@font-face {
    font-family: "Archivo-Narrow";
    src: url("../font/archivo_narrow/ArchivoNarrow-VariableFont_wght.ttf");
}

@font-face {
    font-family: "Bebas-Neue";
    src: url("../font/bebas_neue/BebasNeue-Regular.ttf");
}

body {
    font-family: "Archivo-Narrow";
}

header {
    padding: 0;
    margin: 0;
    background-image: url("../img/vevye_header_bg_mb.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: 170vw;
}

#form-q {
    font-weight: 700;
    font-size: 22px;
    color: #FF8A0F;
}

#form-q-subtxt {
    font-size: 18px;
}

/** COMMERCIAL WRAPPER */
.comm-radio-wrapper, .medi-radio-wrapper, .cash-radio-wrapper {
    border: 2px solid #00A0E9;
    border-radius: 50px;
    width: 150px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
    text-align: left;
    color: #00A0E9;
    font-size: 20px;
    cursor: pointer;
}

#comm-radio-yes-wrapper, #medi-radio-yes-wrapper, #cash-radio-yes-wrapper {
    margin-right: 7px
}

#comm-radio-no-wrapper, #medi-radio-no-wrapper, #cash-radio-no-wrapper {
    margin-left: 7px
}

.comm-radio-wrapper-checked, 
.medi-radio-wrapper-checked, 
.cash-radio-wrapper-checked {
    color: #FFFFFF;
    background-color: #00A0E9;
}

.all-radio-wrapper {
    background-color: #FFF;
    z-index: 100 !important;
    position: relative;
    display: inline-block;
}

#comm-yes-wrapper, #comm-no-wrapper, 
#medi-yes-wrapper, #medi-no-wrapper,
#cash-yes-wrapper, #cash-no-wrapper {
    position: relative;
    z-index: 0;
    margin-top: -27px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 50px;
    padding-right: 50px;
    border: 2px solid;
    border-color: #00A0E9;
    border-radius: 50px;
    display: none;
}

.comm-radio-wrapper input[type=radio],
.medi-radio-wrapper input[type=radio],
.cash-radio-wrapper input[type=radio] {
    height: 20px;
    width: 20px;
    border-width: 2px;
    cursor: pointer;
}

.comm-radio-wrapper input[type=radio]:checked,
.medi-radio-wrapper input[type=radio]:checked,
.cash-radio-wrapper input[type=radio]:checked {
    border-color: #FFFFFF;
    background-color: #00A0E9;
}

.comm-radio-wrapper span,
.medi-radio-wrapper span,
.cash-radio-wrapper span {
    margin-left: 20px;
}

#comm-no-txt, #medi-no-txt, #cash-no-txt {
    margin-top: 50px;
    margin-bottom: 50px;
}

#comm-no-txt a {
    color: black;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-content {
    color: red;
    font-size: 12px;
}

.mobile {
    font-size: 14px;
    min-width: 260px;
    width: 100%;
}

.patient-input {
    margin-top: 20px;
}

.sms_number {
    width: 350px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 30px;
    border-radius: 40px !important;
    border-color: #00A0E9 !important;
    border: 1px solid #ced4da !important;
    text-align: left;
    float: right;
}

.sms_number::placeholder {
    color:#97ADA5
}

input[type="text"], input[type="text"]:focus {
    background: transparent;
    border: none;
    font-size: 18px;
    outline: none;
    border-bottom: 2px solid #d3d3d3;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-top: 20px;
    width: 100%;
    border-radius: 0;
}

.download-card-btn, .download-card-btn:hover {
    margin-top: 100px;
    font-weight: bold;
    font-size: 18px;
    padding: 15px 40px;
    color: #FFFFFF;
    background-color: #FF8A0F;
    border-radius: 40px;
}

.download-card-btn:active:focus {
    background-color: #ff5500e7;
    color: #FFFFFF;
}

.text-card {
    width: 100% !important;
    min-width: 260px;
}

.text-card-btn, .text-card-btn:hover, .text-card-btn:active:focus {
    font-weight: bold;
    padding: 15px 0;
    width: 350px !important;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #FF8A0F;
    border-radius: 40px;
}

.download-fine-print {
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 14px;
}

.download-fine-print span {
    color: #FF8A0F;
}

.check-mobile {
    font-size: 12px;
    text-align: left;
}

.fine-print {
    font-size: 12px;
    margin-top: 20px;
}

.fine-print a {
    color: #000000;
}

.tac-container {
    padding-bottom: 0;
    margin-top: 20px;
}

.tac-header {
    font-weight: bold;
    color: #FF8A0F;
    font-size: 20px;
}

.tac-agreement {
    font-size: 20px;
}

.tac-bullets {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.tac-bullets li:not(:last-child) {
    margin-bottom: 5px;
}

#for-quest-container {
    margin-top: 35px; /* account for the 5px bottom margin in li above */
}

#for-quest-call {
    font-size: 20px;
}

#for-quest-call span {
    font-weight: bold;
    color: #FF8A0F;
}

#for-quest-call a {
    color: black;
}

#privacy-footer {
    margin-bottom: 50px;
}

#privacy-footer a {
    color: black;
}

#scroll-top-img {
    position: absolute;
    right: 30px;

    width: 80px;
    height: 70px;
    cursor: pointer;
}

.desktop-footer-img {
    width: 100%;
}

#footer-container {
    background-image: url("../img/footer_bg_mb.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    color: white;
    font-size: 12px;
    height: 135vw;
    padding-top: 12vw;
}

footer .container-xl {
    display: none;
}

footer .row {
    margin: 0;
    width: 100%;
}

#footer-logo {
    width: 150px;
}

#footer-copy-col {
    margin-top: 40px;
}

.error, .error p {
	color: red;
    font-size: 14px;
}

.error-wrapper {
    position: fixed;
    right: 50;
    bottom: 100;
    background: white;
    color: red;
    z-index: 99 !important;
    display: none;
    max-width: 200px;
    font-size: 20px;
}

#print-coupon-overlay {
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,0.4);
    display: none;
}

#print-coupon-panel {
    width: 90%;
    max-width: 1200px;
    height: 90%;
    background-color: white;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    overflow-y: scroll;
}

#print-coupon-header-dt {
    display: none;
}

#print-coupon-header-mb {
    display: block;
}

.print-coupon-header {
    max-width: 100%;
    font-size: 30px;
    font-weight: bold;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}

.print-coupon-vevye-logo {
    width: 150px;
}

.print-coupon-close-btn {
    width: 50px;
    cursor: pointer;
    float: right;
}

#print-coupon-line-separator {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border-top: 1px solid #FF8A0F;
}

.print-coupon-container {
    max-width: 85%;
    font-size: 20px;
}

#ready-to-print-text {
    color: #FF8A0F;
    font-weight: bold;
}

#vevye-access-card-img-dt {
    display: none;
}

#vevye-access-card-img-mb {
    width: 500px;
    margin-bottom: 50px;
}

#present-this-card {
    text-transform: uppercase;
    font-style: italic;
    color: #0075c7;
    font-size: 20px;
    font-weight: bold;
}

#print-savings-card-btn, #print-savings-card-btn:hover {
    font-weight: bold;
    font-size: 18px;
    padding: 15px 40px;
    color: #FFFFFF;
    background-color: #FF8A0F;
    border-radius: 40px;
}

#print-savings-card-btn:active:focus {
    background-color: #ff5500e7;
    color: #FFFFFF;
}

@media only screen and (max-width: 1080px) {
    #vevye-access-card-img-dt {
        margin-left: -60px;
    }
}

@media only screen and (max-width: 768px) {
    
    #comm-yes-wrapper, #comm-no-wrapper, 
    #medi-yes-wrapper, #medi-no-wrapper,
    #cash-yes-wrapper, #cash-no-wrapper {
        margin-top: -21px;
    }    

    .txt-card-row {
        margin-top: 40px;
    }

    .sms_number {
        width: 100% !important;
        min-width: none;
        text-align: center;
    }

    .text-card {
        width: 100%;
        min-width: none;
    }

    .text-card-btn {
        width: 100% !important;
    }

    .desktop-header {
        display: none;
    }

    .mobile-header {
        display: block;
    }

    #user-ans-form {
        margin-top: -60px;
    }

    #comm-radio-yes-wrapper, #medi-radio-yes-wrapper, #cash-radio-yes-wrapper {
        margin-top: -20px;
        margin-left: 0px;
    }
    
    #comm-radio-no-wrapper, #medi-radio-no-wrapper, #cash-radio-no-wrapper {
        margin-top: -20px;
    }

    .comm-radio-wrapper, .medi-radio-wrapper, .cash-radio-wrapper {
        font-size: 16px;
        padding-top: 5px;
        padding-bottom: 8px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100px;
    }

    .comm-radio-wrapper, .medi-radio-wrapper, .cash-radio-wrapper span {
        margin-left: 10px;
    }

    #comm-radio-no-wrapper, #medi-radio-no-wrapper, #cash-radio-no-wrapper {
        padding-right: 15px;
        padding-left: 10px;
    }

    #comm-radio-no-wrapper, #medi-radio-no-wrapper, #cash-radio-no-wrapper {
        padding-left: 15px;
        padding-right: 10px;
    }

    input[type="text"], input[type="text"]:focus {
        margin-left:5px;
    }

    .download-card-btn, .download-card-btn:hover {
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }

    .btn-download-copay-card {
        font-size: 15px;
        margin-top: 50px;
        padding-left: 20%;
        padding-right: 20%;
    }
}

@media only screen and (max-width: 695px) {
    #vevye-access-card-img-mb {
        width: 400px;
    }
}

@media only screen and (max-width: 550px) {
    #vevye-access-card-img-mb {
        width: 300px;
    }
}

@media only screen and (max-width: 420px) {
    #vevye-access-card-img-mb {
        width: 200px;
    }
}


@media only screen and (min-width: 768px) {
    header {
        background-image: url("../img/vevye_header_bg_dt.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        height: 40vw;
    }

    #print-coupon-header-dt {
        display: block;
    }
    
    #print-coupon-header-mb {
        display: none;
    }

    .text-card {
        width: 80%;
        min-width: none;
    }

    .text-card-btn {
        width: 80%;
        float: left;    
    }

    #footer-container {
        background-image: url("../img/footer_bg_dt.svg");
        padding-top: 13vw;
        height: 27vw;
    }

    #footer-copy-col {
        margin-top: 0;
    }

    footer .container-xl {
        display: block;
    }
}

@media only screen and (min-width: 920px) {
    #footer-container {
        padding-top: 15vw;
    }
}


@media only screen and (min-width: 992px) {
    #vevye-access-card-img-dt {
        width: 700px;
        display: block;
    }
    
    #vevye-access-card-img-mb {
        display: none;
    }
}