body {}

:root {
    --copay-color: #00b2a9;
    --hyperlink-color: #00b9ac;
    --copay-light: #eaf6f5;
    --cash-color: #810874;
    --cash-light: #f0e4ef;
    --text-color: #000;
    --footer-BG: #efefef;
    --error-color: #f00;
}

body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 120%; border-top: 30px solid var(--cash-color);}

.noWrapTxt {white-space: nowrap;}

a {color: var(--hyperlink-color); text-decoration: underline;}
a:hover {color: var(--hyperlink-color);}

.container {max-width: 720px;}

header {border-top: 5px solid var(--copay-color); padding-top: 30px;}
header img {max-width: 160px;}
header .container {max-width: 680px; text-align: center; position: relative;}
header .container a {position: absolute; left: 0; top: 5px; text-transform: uppercase; display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
header .container a img {width: 16px;}

footer {font-size: 11px; background: var(--footer-BG); padding: 30px 0; margin-top: 40px;}
footer img {width: 100px; margin-bottom: 10px;}
footer p {margin-bottom: 0;}
.TnCWrap {margin-bottom: 30px;}
.TnCWrap h5 {font-weight: 600; font-size: 11px;}
.TnCWrap p {margin-bottom: 10px;}
.TnCWrap ul {margin: 0 0 10px; padding: 0; list-style: none;}
.TnCWrap ul li {position: relative; padding-left: 10px; margin-bottom: 5px;}
.TnCWrap ul li::before {content: '•'; position: absolute; left: 0; top: 0;}

section > .container {margin: 40px auto 25px;}
section > .container h1 {color: var(--cash-color); font-weight: 700; font-size: 26px; margin: 40px 0 30px; text-align: center;}
section > .container sup {top: -6px; font-weight: normal;}

.cardBand {display: flex; justify-content: flex-start; align-items: center;}
.cardBand img {width: 180px;}
.cardBand h3 {background: var(--cash-color); color: var(--white); border-radius: 0 50px 50px 0; padding: 24px 30px 22px; font-size: 20px; font-weight: 600; margin-bottom: 0; margin-left: -5px;}

.welcomeWrap {background: var(--cash-light); padding: 30px 0 20px; line-height: 140%;}
.welcomeWrap h4 {color: var(--cash-color); font-size: 14px; font-weight: 600;}

.radioWrap .radioBtn:not(:last-of-type) {width: 80px;}
.radioBtn input {display: none;}
.radioBtn label {position: relative; padding-left: 25px; margin-bottom: 0;}
.radioBtn label::before {content: ''; position: absolute; left: 0; top: -2px; width: 16px; height: 16px; border-radius: 20px; border: 3px solid var(--white); outline: 1px solid var(--text-color); cursor: pointer; background: var(--white);}
.radioBtn input:checked ~ label::before {background: var(--cash-color); outline-color: var(--cash-color);}

.chooseCard > label {font-weight: 600; font-size: 14px;}
.chooseCard .radioWrap .radioBtn {width: auto;}
.chooseCard .radioWrap .radioBtn:first-of-type {margin-bottom: 5px;}
.chooseCard .radioWrap label {margin-top: 10px;}

.eligibilityWrap {counter-reset: item; background: var(--cash-light); padding: 30px; margin-top: 20px;}
.eligibilityWrap .radioBtn label::before {outline-color: var(--cash-color);}
.eligibilityWrap h3 {font-size: 14px; font-weight: 600;}
.eligibilityWrap h6 {font-size: 12px; margin-bottom: 20px;}
.eligibilityWrap .col-md-6 {padding-right: 10px;}
.eligibilityWrap .quesWrap .count-1, .eligibilityWrap .quesWrap .count-2 {font-weight: 600; position: absolute; left: 0; top: 0;}
.submitWrap button {background: var(--copay-color); text-transform: uppercase; color: var(--white); font-weight: 600; font-size: 13px; border: none; display: block; width: 100px; padding: 15px 10px 12px; margin: 10px 0 0; cursor: pointer;}

.quesWrap .count-1 {display: none;}
.eligibilityWrap:has(.membershipInfoCount) .quesWrap .count-1 {display: block;}
.eligibilityWrap:has(.membershipInfoCount) .quesWrap .count-2 {display: none !important;}
.membershipInfoCount {display: flex !important;}

.errorMsg {color: var(--error-color); font-size: 10px; visibility: hidden;}
.error .errorMsg {visibility: visible;}

.form-control {border: 1px solid var(--cash-color); border-radius: 0; font-size: 12px; padding: 5px 10px; margin-bottom: 2px;}

.quesWrap {position: relative; padding-left: 15px; margin-bottom: 5px;}
.quesWrap > label {padding-bottom: 3px; margin-bottom: 0;}
.quesWrap .radioWrap {display: flex; margin: 5px 0 3px;}

.patientInfoWrap h2 {color: var(--cash-color); font-size: 20px; text-align: center; font-weight: 600; margin-bottom: 25px;}

.patientInfoFields {background: var(--cash-light); padding: 20px 30px;}
.patientInfoFields h3 {font-size: 14px; font-weight: 600; margin-bottom: 30px;}
.patientInfoFields label {margin-bottom: 5px;}
.patientInfoFields .form-control {margin-bottom: 0;}
.patientInfoFields .radioWrap {display: flex; justify-content: flex-start; align-items: center;}
.patientInfoFields .row > div[class^='col-md'] {margin-bottom: 5px;}
.patientInfoFields .row > div[class^='col-md']:first-of-type {padding-right: 30px;}
.patientInfoFields .row.row.customWrap > div[class^='col-md']:first-of-type {padding-right: 15px;}
.patientInfoFields .row.customWrap > .col-md-2 {padding: 0;}
.patientInfoFields .radioWrap .radioBtn:not(:last-of-type) {width: 90px;}
.patientInfoFields .radioWrap .radioBtn label::before {outline-color: var(--cash-color) !important;}

.phoneWrap > label {display: flex; gap: 10px;}
.phoneWrap > .radioWrap {margin-top: 10px; gap: 30px;}
.phoneWrap > .radioWrap .radioBtn {width: auto;}

.authWrap {position: relative; padding-left: 21px; margin-bottom: 10px;}
.authWrap::before {content: '*'; position: absolute; left: 15px; top: 0;}
.authWrap .radioWrap {margin-top: 4px;}
.contactMethodWrap .radioWrap {padding-left: 6px;}

.coverageOptions > label {color: var(--cash-color); font-weight: 600; font-size: 14px;}
.coverageOptions > label span {color: var(--text-color); font-weight: normal; font-style: italic;}
.coverageOptions .radioBtn {font-weight: 600;}
.coverageWrap .radioBtn label::before {outline-color: var(--text-color);}
.coverageWrap .radioBtn input:checked ~ label::before {outline-color: var(--cash-color); background: var(--cash-color);}
.coverageWrap .radioBtn {width: 100% !important; margin-top: 25px;}

.checkBoxWrap {background: var(--cash-light); padding: 20px; margin-top: 40px;}
.checkBoxWrap button {width: 160px; font-size: 13px; margin-top: 30px;}
.checkBoxWrap h5 {font-size: 14px; font-weight: 600;}
.checkBoxes label::before {border-radius: 0; width: 12px; height: 12px; border-width: 2px; outline-color: var(--cash-color) !important; top: 2px;}
.checkBoxes label a {display: block; margin-top: 10px;}

.hideElement {display: none;}
.showElement {display: block;}
.hideSurveyElement {display: none;}
.errorMsgPhone {color: var(--error-color); font-size: 10px; visibility: hidden;}
.errorPhone .errorMsgPhone {visibility: visible;}

.crx-gray-out {z-index: 99;}
.crx-loader {z-index: 100;}

.modal-dialog {max-width: 420px;}
.modal-content {border-radius: 0px; border: none;}
.modal-body {border-top: 20px solid var(--copay-color); padding: 0;}
.modalTxtWrap {border-top: 5px solid var(--cash-color); text-align: center; padding: 25px 30px 10px;}
.modalTxtWrap h3 {color: var(--cash-color); font-size: 20px; font-weight: 600; margin-bottom: 16px;}
.modalTxtWrap p {font-size: 15px; line-height: 120%; max-width: 280px; margin: 10px auto;}
.modalTxtWrap p:first-of-type {max-width: 360px;}
.modalBtnWrap {display: flex; justify-content: center; align-items: center; gap: 20px; margin: 5px auto 30px;}
.modalBtnWrap button {background: var(--copay-color); text-transform: uppercase; color: var(--white); font-weight: 600; font-size: 14px; border: none; display: block; width: 100px; padding: 12px 10px; cursor: pointer;}

@media only screen and (max-width: 768px) {
    header h1 {font-size: max(8vw, 24px);}
    header .container {display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;}
    header .container a {position: static;}

    .cardBand h3 {padding: 12px 15px 11px; font-size: 16px;}

    .radioBtn label::before {top: -1px;}
    .coverageWrap .radioBtn label::before {top: 1px;}

    .patientInfoFields .radioWrap, .authWrap > label {padding-left: 5px;}

    .eligibilityWrap {padding: 20px;}
    .patientInfoFields {padding: 15px 20px;}
    .patientInfoFields .row > div[class^='col-md']:first-of-type, .patientInfoFields .row.customWrap > .col-md-2 {padding: 0 15px;}
}