@media screen and (max-width: 1366px) {
    :root {
        --containerWidth: 1200px;
    }
    .stepContainer .progress-bar .step {margin-top: 0;margin-bottom: 20px;}
    .progres-widget span i {font-size: 22px;}

}
@media screen and (max-width: 1200px) and (min-width: 900px) {
    :root {
        --containerWidth: 850px;
    }
    .stepContainer .progress-bar .step .stepSubtitle {padding-top: 0;}
    .stepContainer .progress-bar {width: 80%;}  
    .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {left: 42px;width: 158px;}
    .step-content {padding-top: 0 !important;display: flex;flex-direction: column;}
    .form-outer form .page .field.twoIndex {width: 90%;margin: 50px 0 0 0;} 
    .title p {margin-bottom: 0;margin-top: 1px;}
    .title p {margin-bottom: 0;margin-top: 1px;}    
    .list>div {display: flex;flex-direction: row;align-items: center;justify-content: flex-start;align-content: center;padding-top: 2px;}    
    .list>div label {text-align: left;}
    .form-outer form .page {overflow: hidden;}
    .list {display: flex;flex-direction: column;width: 100%;margin: auto;align-content: flex-start;}
    .form-outer form .page .title {font-size: 29px;padding: 20px 25px 15px 25px;}
    .progressText h2 {font-size: 35px;margin: 0;}
    .progressSection {padding:20px;}
    .progressText #progressValue {font-size: 80px;}
    .progressLine .lineRow {font-size: 15px;}
    .progresBar {margin-top: -6px !important;}
    .progres-widget span i {font-size: 18px;}
    .progressThreeSection .progressSection {padding: 20px;}
    .progressThreeSection .progres-widget {margin-top: 12%;}
    .scoreText {font-size: 18px;}
    .progressThreeSection .progressText h2 {font-size: 20px;}
    .progressThreeSection .progressText #progressValue {font-size: 62px;}
    .form-outer form .page .pageTitle .topRight .icons {font-size: 20px;width: 20px;height: 20px;}
    .form-outer form .page .pageTitle .topRight .date {font-size: 20px;padding-top: 1px;}
    .form-outer form .page .pageTitle .topLeft {display: flex;justify-content: flex-start;flex-direction: row; }
    .topLeft .titles {font-size: 29px;}

}
@media screen and (max-width: 899px) and (min-width: 700px) {
    :root {
        --containerWidth: 680px;
    }
   
    .stepContainer .progress-bar {width: 100%;}
    .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {left: 44px;width: 167px;}
    .stepContainer .progress-bar .step .stepSubtitle {font-size: 19px;} 
    .stepContainer .progress-bar .step .stepSubtitle span {padding-top: 4px;}
    .step-content {display: flex;margin: auto;width: 100%;align-items: center;}
    .step-content .field {padding: 0;}
    form .page .field .label {top: -33px;}
    .footer-container {width: 100%;display: flex;flex-direction: column;} 
    .footer {width: var(--containerWidth);display: flex;flex-direction: column;}
    .footerLeft {width: 100%;margin: auto;text-align: center;}
    .footerRight {width: 100%;margin: auto;text-align: center;}
    .step-content {display: flex;padding: 20px 25px 15px 25px;flex-direction: column;width: auto;margin-top: 3%;}
    .form-outer form .page .field.twoIndex {width: 100%;}
    .form-outer form .page .title {padding: 20px;}
    .form-outer form .page .pageTitle .topLeft {display: flex;flex-direction: column;}
    .title p { margin: 0;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title { font-size: 30px;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title { font-size: 30px;}
    .progressText h2 {margin: 0;}    
    .progressText #progressValue {font-size: 90px;}    
    .progressSection {padding: 20px;}    
    .progressThreeSection .progressSection {padding: 20px;}
    .progressThreeSection .progressText h2 {font-size: 20px;}
    .progressThreeSection .progres-widget {margin-top: 12%;}
    .progressThreeSection .progres-widget span i {font-size: 14px;}
    .progressThreeSection .progressText #progressValue {font-size: 70px;}
    .progressThreeSection .progressLine .lineRow {font-size: 12px;}
    .scoreText {font-size: 16px;}
    .home {padding-left: 4% !important;margin-left:4%;}

}
@media screen and (max-width: 699px) and (min-width: 600px) {
    :root {
        --containerWidth: 590px;
    }
    .stepContainer .progress-bar {width: 100%;}
    .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {width: 140px;}
    .step-content {flex-direction: column;justify-content: space-between;}
    .form-outer form .page .field.twoIndex {width: 85%;position: relative;margin: auto;display: flex;margin-top: 45px;}
    .footer-container {width: 100%;display: flex;flex-direction: column;} 
    .footer {width: var(--containerWidth);display: flex;flex-direction: column;}
    .footerLeft {width: 100%;margin: auto;text-align: center;}
    .footerRight {width: 100%;margin: auto;text-align: center;}
    .form-outer form .page .pageTitle .topLeft {display: flex;flex-direction: column;}
    .title p { margin: 0;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title { font-size: 30px;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title { font-size: 30px;}
    .progressText h2 {margin: 0;}    
    .progressText #progressValue {font-size: 90px;}    
    .progressSection {padding: 20px;}    
    .progressThreeSection {flex-direction: column;}
    .progressThreeSection .progressSection {padding: 20px;width: 100% !important;display: flex;flex-direction: column;}
    .progressThreeSection .progres-widget {margin-top: 4%;}
    .progressThreeSection .progres-widget span i {font-size: 14px;}
    .progressThreeSection .progressLine .lineRow {font-size: 12px;}
    .progressThreeSection .progresBar { margin-top: -13px;}
    .scoreText {font-size: 16px;}
    .home {padding-left: 5% !important;margin-left: 5%;}
    .list>div label {
        padding-left: 19px;
    }


}
@media screen and (max-width: 599px) and (min-width: 400px) {
    :root {
        --containerWidth: 390px;
    }
    .stepContainer .progress-bar {width: 100%;}
    .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {left: 44px;width: 72px;}
    .stepContainer .progress-bar .step .stepSubtitle {font-size: 19px;} 
    .stepContainer .progress-bar .step .stepSubtitle span {padding-top: 4px;}
    .step-content {display: flex;margin: auto;width: 100%;align-items: center;}
    .step-content .field {padding: 0;margin-top: 47px !important;}
    form .page .field .label {top: -33px;}
    .footer-container {width: 100%;display: flex;flex-direction: column;} 
    .footer {width: var(--containerWidth);display: flex;flex-direction: column;}
    .footerLeft {width: 100%;margin: auto;text-align: center;}
    .footerRight {width: 100%;margin: auto;text-align: center;}
    .step-content {display: flex;padding: 20px 25px 15px 25px;flex-direction: column;width: auto;margin-top: 3%;}
    .form-outer form .page .field.twoIndex {width: 100%;}
    .form-outer form .page .title {padding: 20px;}
    .title p { margin: 0;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title { font-size: 30px;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title {font-size: 30px;display: flex;flex-direction: column;align-content: flex-start;align-items: flex-start;}
    .progressText h2 {margin: 0;font-size: 33px;}    
    .progressText #progressValue {font-size: 90px;}    
    .progressSection {padding: 20px;}    
    .progressThreeSection .progressSection {padding: 20px;width: 96% !important;margin-top: 5%;}
    .progressThreeSection .progres-widget {margin-top: 12%;}
    .scoreText {font-size: 16px;}
    header h1 {font-size: 35px;}
    .list>div label { font-size: 17px;}
    .list>div {display: flex;align-items: flex-start;flex-direction: row;margin-top: 4px;}
    input[type="checkbox"] {margin: 0 !important;margin-right: 6px !important;height: 22px !important;}
    .form-outer form .page .pageTitle .topLeft {display: flex;flex-direction: column;width: 100%;}
    .form-outer form .page .pageTitle .topRight {display: flex;justify-content: flex-start;margin-top: 3%;flex-direction: row;}
    .progressLine {margin-top: -12px;}
    .progres-widget .skill-count1 {top: -17px !important;}
    .progressThreeSection {display: flex;flex-direction: column;}
    .progressThreeSection .progresBar {margin-top: -13%;}
    .home {padding-left: 7% !important;margin-left: 9%;}
    .list>div label {padding-left: 17px;}
    input[type="checkbox"]:before {margin-left: -4px}
    .form-outer form .page .pageTitle .topRight .date {
        font-size: 21px;
        padding-right: 10%;
        display: flex;
        align-items: center;
        align-content: center;
        }

}

@media screen and (max-width: 400px) and (min-width: 350px) {
    :root {
        --containerWidth: 340px;
    }
    .stepContainer .progress-bar {width: 100%;}
    .progress-bar .step .bullet:before, .progress-bar .step .bullet:after {left: 39px;width: 66px;}
    .stepContainer .progress-bar .step .stepSubtitle {font-size: 17px;} 
    .stepContainer .progress-bar .step .stepSubtitle span {padding-top: 4px;font-size: 16px;}
    .step-content {display: flex;margin: auto;width: 100%;align-items: center;}
    .step-content .field {padding: 0;margin-top: 47px !important;}
    form .page .field .label {top: -33px;}
    .footer-container {width: 100%;display: flex;flex-direction: column;} 
    .footer {width: var(--containerWidth);display: flex;flex-direction: column;}
    .footerLeft {width: 100%;margin: auto;text-align: center;}
    .footerRight {width: 100%;margin: auto;text-align: center;}
    .step-content {display: flex;padding: 20px 25px 15px 25px;flex-direction: column;width: auto;margin-top: 3%;}
    .form-outer form .page .field.twoIndex {width: 100%;}
    .form-outer form .page .title {padding: 20px;}
    .title p {margin: 0;font-size: 15px;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title { font-size: 30px;}
    .topLeft .titles {font-size: 30px;}
    .form-outer form .page .title {font-size: 26px;display: flex;flex-direction: column;align-content: flex-start;align-items: flex-start;}
    .progressText h2 {margin: 0;font-size: 33px;margin-bottom: 0 !important;}    
    .progressText #progressValue {font-size: 70px;}    
    .progressSection {padding: 20px;}    
    .progressThreeSection .progressSection {padding: 20px;width: 96% !important;margin-top: 5%;}
    .progressThreeSection .progres-widget {margin-top: 12%;}
    .scoreText {font-size: 16px;}
    header h1 {font-size: 35px;}
    .list>div label { font-size: 17px;}
    .list>div {display: flex;align-items: flex-start;flex-direction: row;margin-top: 4px;}
    input[type="checkbox"] {margin: 0 !important;margin-right: 6px !important;height: 22px !important;}
    .form-outer form .page .pageTitle .topLeft {display: flex;flex-direction: column;width: 100%;}
    .form-outer form .page .pageTitle .topRight {display: flex;justify-content: flex-start;margin-top: 3%;flex-direction: row;}
    .progressLine {margin-top: -14px;}
    .progres-widget .skill-count1 {top: -17px !important;}
    .progressThreeSection {display: flex;flex-direction: column;}
    .progressThreeSection .progresBar {margin-top: -13%;}
    form .page .field button {font-size: 16px;padding: 6px 10px;height: 46px;}
    .btns button i { font-size: 12px;}
    form .page .field input::placeholder {font-size: 17px;}
    form .page .field select, form .page .field select option{ font-size: 17px;}
    .field.btns { padding: 50px 36px 36px 36px;}
    .stepContainer {padding: 10px;}
    .progressLine .lineRow {font-size: 16px;}
    .progres-widget span i {font-size: 17px;}
    .progresBar {margin-top: -7px;}
    .home {padding-left: 7% !important;margin-left: 9%;}

}