body {}

:root {
    --primary-color: #0d213e;
    --secondary-color: #ef5121;
    --text-color: #000;
    --error-color: #f00;
    --BG-color: #f0f0f0;
}

body {font-family: 'Roboto', sans-serif; color: var(--text-color); font-size: 16px; line-height: 120%;}

.container {max-width: 1080px;}
.crx-gray-out {
    z-index: 9999;
}

.crx-loader {
    z-index: 9999;
}

.noWrapTxt {white-space: nowrap;}

header {border-bottom: 5px solid var(--primary-color); position: relative; overflow: hidden; padding: 20px 0 30px;}
header::after {content: ''; position: absolute; left: 50%; top: calc(100% - 10px); width: 100vw; height: 10vw; border-radius: 50%; z-index: -1; background: var(--secondary-color); transform: translateX(-50%);}
header .container {display: flex; align-items: flex-start; justify-content: space-between;}
header .container img {width: 180px;}
header .container h1 {text-transform: uppercase; margin: 0 auto 0 0; padding: 10px 0 0 30px; font-family: 'Roboto Condensed', sans-serif; font-size: 30px; font-weight: 700; color: var(--primary-color); white-space: nowrap;}
header .container p {font-size: 13px; text-align: right; align-self: flex-end; margin-bottom: 0; font-weight: 500; color: var(--primary-color);}
header .container p a {color: var(--secondary-color); display: block; text-decoration: underline;}

footer {background: var(--BG-color); padding: 30px 0;}
footer .footerLinks {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
footer .footerLinks img {height: 24px;}
footer .footerLinks ul {margin: 0; padding: 0; width: 70%; list-style: none; display: flex; align-items: flex-end; justify-content: flex-end; gap: 5px 0; text-transform: uppercase; flex-wrap: wrap; font-family: 'Roboto Condensed', sans-serif;}
footer .footerLinks ul li {white-space: nowrap;}
footer .footerLinks ul li:not(:last-of-type)::after {content: '|'; padding: 0 10px;}
footer .footerLinks ul li.noBorder::after {display: none;}
footer .footerLinks ul li a {color: var(--secondary-color) !important; border: 0 !important; padding: 0 !important; background: transparent !important; font-size: 16px !important;}
footer .footerLinks ul li:last-of-type a {background: url('../image/privacy-btn.png') no-repeat right center !important; background-size: 26px auto !important; padding-right: 28px !important;}
footer p {font-size: 13px;}
footer p:last-of-type {margin-bottom: 0;}

section {padding: 40px 0;}
section .container {display: flex; justify-content: space-between; align-items: flex-start;}
.infoRgt {width: calc(100% - 620px);}
.infoRgt .cardWrap {background: rgba(13, 33, 62, 0.8); display: flex; align-items: center; justify-content: space-between; text-align: center; padding: 15px 35px 15px 0;}
.infoRgt .cardWrap img {width: 65%; transform: translateX(-30px); border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.7); filter: drop-shadow(4px 6px 5px #333);}
.infoRgt .cardWrap h3 {display: flex; flex-direction: column; font-family: 'Roboto Condensed', sans-serif; align-items: center; margin-bottom: 0;}
.infoRgt .cardWrap h3 span {font-size: 16px; font-weight: 700; line-height: 140%; color: var(--white); white-space: nowrap;}
.infoRgt .cardWrap h3 span:first-of-type {font-size: 14px;}
.infoRgt .cardWrap h3 span.amount {font-size: 52px; color: var(--secondary-color); letter-spacing: -7px; position: relative;}
.infoRgt .cardWrap h3 span.amount::before {content: '$'; color: var(--secondary-color); font-size: 24px; top: -7px; left: -15px; position: absolute;}
.infoRgt .cardWrap h3 span.amount::after {content: '*'; color: var(--secondary-color); font-size: 21px; top: -10px; right: -12px; position: absolute;}
.infoRgt p {font-size: 12.2px; margin-top: 20px; line-height: 120%; position: relative; padding-left: 5px; font-weight: 500;}
.infoRgt p:first-of-type:before {content: '*'; position: absolute; left: -1px; top: 0;}

.infoLft {width: 480px;}
.infoLft h2 {font-family: 'Roboto Condensed', sans-serif; font-weight: 700; color: var(--primary-color); font-size: 26px; text-transform: uppercase; margin-bottom: 20px;}

.form-control::-ms-input-placeholder {color: #ccc;}
.form-control::placeholder {color: #ccc;}

.errorMsg {color: var(--error-color); width: 100%; font-size: 11px; font-weight: 700; padding-left: 180px;display: none;}
.formWrap {background: var(--BG-color); border-radius: 10px; box-shadow: 10px 10px 18px #cecece; padding: 20px;}
.fieldWrap {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 10px 0 20px;}
.fieldWrap:not(.radioBtn) > label {color: var(--primary-color); width: 160px; font-size: 14px; margin-bottom: 0;}
.fieldWrap .form-control {width: calc(100% - 180px); border-radius: 0; border: 1px solid var(--primary-color); font-size: 14px; color: var(--primary-color); padding: 5px 7px; height: 30px;}
.fieldWrap p {font-size: 15px; color: var(--primary-color); margin-bottom: 0;}
.fieldWrap a {color: var(--secondary-color); text-decoration: underline;}

.radioBtn input {display: none;}
.radioBtn label {position: relative; color: var(--primary-color); font-size: 15px; margin-bottom: 0;}
.radioBtn label::before {content: ''; float: left; width: 16px; height: 16px; margin-right: 10px; border-radius: 10px; border: 1px solid var(--secondary-color); cursor: pointer;}
.radioBtn input:checked ~ label::before {background: var(--secondary-color);}

.eligibilityWrap > label {width: 250px !important;}
.eligibilityWrap .errorMsg {padding-left: 0 !important; display: none;}
.eligibilityWrap select.form-control {margin-top: 10px; width: 240px;}

.radioWrap {display: flex; align-items: center; justify-content: space-between;}
.radioWrap .radioBtn:not(:last-of-type) {margin-right: 30px;}
.radioBtn .errorMsg {padding-left: 26px !important;}

.infoRgt button, button.respOnly {font-family: 'Roboto Condensed', sans-serif; font-size: 16px; background: var(--secondary-color); color: var(--white); border-radius: 50px; height: 48px; line-height: 48px; text-transform: uppercase; border: none; width: 90%; font-weight: 500; margin: 140px auto 0; display: flex; justify-content: center; align-items: center; gap: 5px;}
.infoRgt button span, button.respOnly span {font-size: 22px; margin-top: -1px;}

.modal-dialog {max-width: 640px;}
.modal-header {border: none;}
.modal-header .close {padding: 5px 15px; color: var(--secondary-color); opacity: 1 !important; font-weight: 400; text-transform: uppercase; font-size: 14px; display: flex; align-items: center; gap: 4px;}
.modal-header .close span {font-size: 23px; margin-top: -1px;}
.modal-content {border-radius: 10px;}
.modal-body {font-size: 14px;}
.modal-body p {margin-bottom: 10px; color: var(--primary-color);}
.modal-body p a {color: #0000ed; text-decoration: underline;}

.error .errorMsg {
    display: inherit;
}

.respOnly {display: none !important;}

@media only screen and (max-width: 992px) {
    header .container img {width: 160px; margin-top: 10px;}
    header .container h1 {margin: auto; display: none; padding: 20px 0 10px; font-size: 24px;}
    header .container p {position: relative; margin-top: 40px;}
    header .container p::before {content: 'PATIENT SAVINGS PROGRAM'; text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; font-size: 30px; font-weight: 700; color: var(--primary-color); white-space: nowrap; position: absolute; right: 0; top: -30px;}

    footer .footerLinks {flex-direction: column; gap: 20px; align-items: center;}
    footer .footerLinks ul {flex-wrap: wrap; justify-content: center;}
    footer .footerLinks ul li {padding: 5px 0;}
    footer p {text-align: center;}
    footer .footerLinks ul li.noBorder::after {display: inline;}

    section {padding: 20px 0; background: var(--primary-color);}
    section .container {padding-left: 15px; flex-direction: column; align-items: center; gap: 40px;}
    .infoLft {width: 100%;}
    .infoLft h2 {color: var(--white); text-align: center;}
    .infoRgt .cardWrap {flex-direction: column; padding: 20px; align-items: center;}
    .infoRgt .cardWrap img {width: 100%; max-width: 480px; margin: 0 auto 20px; transform: translateX(0);}

    .infoRgt {min-width: none; max-width: 480px; width: 100%; display: none;}
    .infoRgt button {margin-top: 20px;}

    .errorMsg {padding-left: 0;}

    .formWrap {box-shadow: none;}
    .respOnly {display: block !important;}
    button.respOnly {max-width: 340px; margin: 40px auto 0;}

    .eligibilityWrap:not(.radioBtn) > label {width: calc(100% - 160px) !important;}
}

@media only screen and (max-width: 767px) {
    header .container img {width: 140px;}
    header .container p::before {font-size: 4vw;}
}

.hideElement{display: none;}