:root {
  --font: 'Prompt-Regular';
  --fontSemiBold: 'Prompt-SemiBold';
  --fontBold: 'Prompt-Bold';
  --white : #fff;
  --skyBlue : #74DBD6;
  --navyBlue : #003D57;
}
#self-quiz a, #self-quiz input, #self-quiz button {-webkit-appearance: none;-moz-appearance: none;appearance: none}
#talkingToDoctorQuiz #contentSection{background: url(/content/dam/intelligentcontent/brands/airsupra-dtc/us/en/images/phase6/desktop/self-assessment-quiz/bannerBackground.png) no-repeat;padding: 45px 0;position: relative;max-width: 1440px;margin: 0 auto;font-family: var(--font)}
#talkingToDoctorQuiz h1{color: var(--white); font: clamp(2.1875rem, 1.9674rem + 0.939vw, 2.8125rem)/clamp(2.8125rem, 2.4824rem + 1.4085vw, 3.75rem) var(--fontBold);margin: 0 0 16px}
#talkingToDoctorQuiz #formHeader{max-width: 768px;margin: 0 auto;text-align: center;color: #fff;}
#talkingToDoctorQuiz #formHeader p{color: var(--white); font: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem)/clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem) var(--font)}
#talkingToDoctorQuiz #formContent{max-width: 593px; padding: 40px 103px 20px 103px;margin: 30px auto 0; border-radius: 13px; border: 1px solid var(--skyBlue); background: var(--white); box-shadow: 0px 0px 60px 0px rgba(1, 60, 86, 0.30);text-align: center}
#talkingToDoctorQuiz #formContent h3{color: var(--navyBlue); font: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem)/clamp(1.625rem, 1.493rem + 0.5634vw, 2rem) var(--fontSemiBold)}
#talkingToDoctorQuiz #doctorImage{position: absolute;top:calc(225px + 0.35vw);max-width: 572px;left:-3vw}
#talkingToDoctorQuiz #pageNo{font: 20px/28px var(--fontSemiBold);color: var(--navyBlue);margin: 24px 0 0}
#talkingToDoctorQuiz #formContent p{color: var(--navyBlue);font: 16px/20px var(--fontSemiBold);text-align: left;margin: 10px 0 22px}
#talkingToDoctorQuiz #formContent .formControl{display: flex; max-width: 377px; padding: 16px 20px; align-items: center; gap: 6px;border-radius: 4px; border: 1px solid var(--gray-scale-gray-03, #9D9C9C);margin: 0 0 16px; border: 1px solid #9D9C9C;}
#talkingToDoctorQuiz #formContent .formControl.selected{background: var(--skyBlue)}
#talkingToDoctorQuiz .formControl input{border-radius: 100px;border: 2px solid #003D57;width: 33px; height: 33px;position: relative}
#talkingToDoctorQuiz .formControl input:checked{background: var(--navyBlue)}
#talkingToDoctorQuiz .formControl input:checked::after{content: url(/content/dam/intelligentcontent/brands/airsupra-dtc/us/en/images/phase3/desktop/self-assessment-quiz/check.svg);position: absolute;top: 7px;left: 7px;}
#talkingToDoctorQuiz .formControl label{font: 20px/20px var(--fontBold);color: var(--navyBlue);text-align: left}
#talkingToDoctorQuiz #formContent button {display: flex; min-width: 162px; padding: 16px 24px; justify-content: center; align-items: center; gap: 8px;border-radius: 4px; border: 1px solid var(--navyBlue);background: var(--white);font: 20px/20px var(--fontBold);margin: 24px 0 0;color: var(--navyBlue); border: 1.5px solid #003D57;}
#talkingToDoctorQuiz #formContent #slideOne button {margin: 24px auto 0;min-width: 193px;}
#talkingToDoctorQuiz #formContent .slides:not(#slideOne) .formControl{max-width: 309px;margin: 0 auto 16px}
#talkingToDoctorQuiz .nextAndPrevCon{display: flex;justify-content: space-between;margin: 0 auto}
#talkingToDoctorQuiz .prev img{transform: rotate(180deg)}
#talkingToDoctorQuiz .warningMessage{display: none}
#talkingToDoctorQuiz #slideSix button{display: flex; padding: 16px 24px; justify-content: center; align-items: center; gap: 8px;max-width: 285px;margin: 0 auto;font: 20px/28px var(--fontBold);border-radius: 4px;background: var(--skyBlue)}
#talkingToDoctorQuiz #slideSix p{font: 16px/24px  var(--font);margin: 0 0 40px 0}
#talkingToDoctorQuiz #allDone{font: clamp(1.875rem, 1.765rem + 0.4695vw, 2.1875rem)/clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem) var(--fontSemiBold);margin: 5px 0 60px;color: var(--navyBlue)}
#talkingToDoctorQuiz #sendEmailOrText a{display: flex;font: 20px/28px var(--fontBold);margin: 32px 0 20px;gap: 8px;align-items: center;justify-content: center;color: var(--navyBlue);
text-decoration: none;
}
#talkingToDoctorQuiz #formContent .slides:not(#slideOne){display: none}
#talkingToDoctorQuiz .formControl.checked{background: var(--skyBlue);border: 1px solid #05A69E}
#talkingToDoctorQuiz #formContent div#slideSix button {padding: 16px 24px}
/*form CSS*/
#talkingToDoctorForm {background: var(--navyBlue);padding: 55px 23px}
#talkingToDoctorForm #getYourResults{max-width: 582px;padding: 40px 0 10px 0;margin: 0 auto;text-align: center;display: flex;flex-direction: column;gap: 24px;border-radius: 13px; background: #fff}
#talkingToDoctorForm h2{margin: 0 0 8px;color: var(--navyBlue);font:clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem)/clamp(1.625rem, 1.493rem + 0.5634vw, 2rem) var(--fontSemiBold)}
#talkingToDoctorForm h3{margin: 0 0 20px;color: #2F2F2F;font:clamp(1rem, 0.956rem + 0.1878vw, 1.125rem)/clamp(1.25rem, 1.294rem + -0.1878vw, 1.125rem) var(--fontSemiBold)}
#talkingToDoctorForm label{display: block;color: #9D9C9C;font: 12px/14px var(--font);text-align: left}
#talkingToDoctorForm #formContent input{display: block;color: #000000;width: 100%;border-radius: 4px;padding: 8px;margin: 0 0 16px 0;border: none;background: #F5F4F4;outline: none;font: 16px/24px var(--font)}
#talkingToDoctorForm #formContent input:focus{background: var(--white);border: 1px solid var(--skyBlue)}
#talkingToDoctorForm #formHeader, #talkingToDoctorForm #formBody{padding: 0 103px}
#talkingToDoctorForm #formFooter p{padding: 0 19px 15px;font: 12px/14px var(--font);text-align: left}
#talkingToDoctorForm #formFooter p a{
text-decoration: underline;
}
#talkingToDoctorForm #formButtonCon{display: flex;gap: 24px;margin: 24px 0 0; justify-content: center}
#talkingToDoctorForm #formButtonCon input{background: none; border-radius: 4px;color: var(--navyBlue); padding:16px 24px;border: 1px solid var(--navyBlue);font: 20px/20px var(--fontBold)}
#talkingToDoctorForm #formButtonCon input:first-child{background: #74DBD6;border: none}
#talkingToDoctorForm #formButtonCon input:last-child{min-width: 181px}
#talkingToDoctorForm .errorMessage{display: none; text-align: left;margin: -15px 0 16px; color: #DC3545;font: 12px/14px var(--font)}
#talkingToDoctorForm #formContent input.validated{background: var(--white);border: 1px solid var(--skyBlue)}
#contentSection #restWidthCon{max-width:1440px;margin:0 auto}
#self-quiz .doctor-connect-left figure { margin:0; }

@media screen and (min-width: 1441px) {
#talkingToDoctorQuiz #contentSection{
  background-size: cover;
  background-position:left;
  max-width: 100%;
  height: 756px;
  margin-bottom: 310px;
}
#contentSection #restWidthCon{position:relative}
#talkingToDoctorQuiz #doctorImage{top:240px}
}

@media only screen and (max-width: 1356px) {
#talkingToDoctorQuiz #doctorImage{left: -7vw}
#talkingToDoctorQuiz #doctorImage { top: calc(277px + 0.35vw); max-width: 510px;}
}

@media only screen and (max-width: 1200px) {
#talkingToDoctorQuiz #doctorImage{display: none}
#self-quiz .modal.cmp-modal__modalbox.modal-md .modal-box { width: 95%; margin: 0 auto;}
}
 
  
@media only screen and (max-width: 767px) {
#talkingToDoctorQuiz #contentSection{padding: 40px 20px 10px}
#talkingToDoctorQuiz #formHeader{padding: 0 7px}
#talkingToDoctorQuiz #formContent{padding: 40px 16px 20px 16px;margin: 60px auto 0}
#talkingToDoctorQuiz #formContent .formControl, #talkingToDoctorQuiz #formContent .slides:not(#slideOne) .formControl{max-width: 100%}
#talkingToDoctorQuiz #slideSix p{font:18px/24px  var(--font);text-align:center}
#talkingToDoctorQuiz #sendEmailOrText{max-width: 184px;margin: 32px auto 20px}
#talkingToDoctorQuiz #formContent button{min-width:143px; padding:16px 0}  
#talkingToDoctorForm {padding: 37px 10px;background: transparent;}
#talkingToDoctorForm #formHeader, #talkingToDoctorForm #formBody{padding: 0 20px}
#talkingToDoctorForm #formFooter p{padding: 0 25px 15px}
#talkingToDoctorForm #formButtonCon{flex-direction: column;gap: 8px; align-items: center}
#talkingToDoctorForm #formButtonCon input:first-child, #talkingToDoctorForm #formButtonCon input:last-child{min-width: 200px}
#talkingToDoctorQuiz #allDone{margin:20px 0}  
#talkingToDoctorQuiz #sendEmailOrText a{display:initial}
#sendEmailOrText a img{margin:7px 6px -3px}
#self-quiz .modal{background:#003D57 !important; padding: 8vh 1vh;} 
}

@media only screen and (max-width: 500px) {
  #talkingToDoctorQuiz #contentSection{background:url(/content/dam/intelligentcontent/brands/airsupra-dtc/us/en/images/phase3/mobile/self-assessment-quiz/bannerBackgroundMob.png) top / contain no-repeat}
}

@media only screen and (max-width: 374px) {
  #talkingToDoctorQuiz #formContent button{
      min-width: 134px;
      padding: 16px 10px;
  }
}

@media only screen and (max-width: 359px) {
  #talkingToDoctorQuiz #formContent button{
    min-width: 104px;
  }
}

/* USBW3-3423 AIRSUPRA DTC Website - Q2 2025 Updates Style start here*/

#talkingToDoctorQuiz #formContent .formControl{
  position: relative;
}
#talkingToDoctorQuiz .formControl input{
  border: 1px solid #003D57;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
#talkingToDoctorQuiz .formControl label{
  padding-left: 30px;
}

#self-quiz .doctor-connect{
  margin-top: 30px;
}

@media screen and (min-width: 1441px) {
  #talkingToDoctorQuiz #contentSection{
    margin-bottom: 206px;
  }
}

@media only screen and (max-width: 500px) {
  #talkingToDoctorQuiz #contentSection{
    background:url(/content/dam/intelligentcontent/brands/airsupra-dtc/us/en/images/phase6/mobile/self-assessment-quiz/bannerBackgroundMob.png) top / contain no-repeat;
  }
}

/* USBW3-3423 AIRSUPRA DTC Website - Q2 2025 Updates Style End here*/