/* ================================================= */
/* // Page Comtainer / Wrapper // */
/* ================================================= */
.page_container {
    --dark-blue: #002b49;
    --light-blue: #264b64;
    --orange: #ff9e1b;
    --red: #cc0202;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url("/images/intake/BG-01.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: Jagger;
    font-size: calc(16px + 1vw);
}
/* // Mobile Styles: Height // */
@media screen and (min-height: 1280px) {
    .page_container {
        height: calc(100vh - 90px);
    }
}


/* ================================================= */
/* // Question Card // */
/* ================================================= */
.question_card {
    width: calc(100% - 40px);
    max-width: 800px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: calc(2em + 35px) 1.5em 1em 1.5em;
    background-color: var(--dark-blue);
    border-radius: 15px;
    overflow: visible;
    margin: 3em 0px;
}

.question_card h2 {
    width: 100%;
    font-size: clamp(25px, 1.3em, 45px);
    color: var(--orange);
    text-align: center;
    line-height: 1.1;
    padding: 0px 0px .2em 0px;
}
@media screen and (max-width: 768px) {
    .question_card {
        padding: calc(2em + 35px) 1em 1em 1em;
    }
}

/* ================================================= */
/* // Question Card Top Bar // */
/* ================================================= */
.top_bar {
    width: 100%;
    height: 50px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0;
}

/* // Previous Button // */
/* ================================================= */
.previous_btn_container {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0px;
    margin-left: .7em;
    padding-right: .4em;
    transform: translateY(-50%);
    font-size: clamp(12px, .7em, 18px);
    color: rgba(255,255,255,.5);
    cursor: pointer;
}
.GrFormPrevious polyline {
    stroke: rgba(255,255,255,.5);
}
.previous_btn_container:hover .GrFormPrevious polyline {
    stroke: white;
}
.previous_btn_container:hover {
    color: white;
}

/* // Progress Bar // */
/* ================================================= */
.progress_container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: .6em;
    padding: .2em .6em;
}
.progressBar_true {
    display: inline-block;
    width: 20px;
    height: 6px;
    background-color: white;
    margin: 0px 2px;
    transform: skewX(-25deg);
}
.progressBar_false {
    display: inline-block;
    width: 20px;
    height: 6px;
    background-color: var(--light-blue);
    margin: 0px 2px;
    transform: skewX(-25deg);
}

/* // Close Button // */
/* ================================================= */
.close_btn_container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 0px;
    left: auto;
    margin-right: .5em;
    transform: translateY(-50%);
    cursor: pointer;
}
.MdHighlightOff path {
    color: var(--light-blue);
}
.close_btn_container:hover .MdHighlightOff path {
    color: white;
}
.close_btn_container:before {
    content: attr(data-tooltip);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right: calc(100% + .2em);
    width:fit-content;
    padding:.2em 1.2em;
    border-radius:10px;
    background:#ffffff;
    font-size: .4em;
    color: var(--dark-blue);
    text-align:center;
    display:none;
}
.close_btn_container:hover:before {
    display:block;
}
/* ================================================= */
/* // Questions // */
/* ================================================= */
.question_holder, .question_holder_ToolTip {
    display: block;
    position: relative;
    width: 100%;
    height: fit-content;
    text-align: center;
}
.question_holder p, .question_holder_ToolTip p {
    display: inline-block;
    font-size: clamp(14px, 1em, 25px);
    line-height: 1.3;
    color: white;
}
.question_holder_ToolTip:before {
    content: attr(data-tooltip);
    position:absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    padding: .8em 1em;
    background: white;
    border-radius: 5px;
    font-size: clamp(12px, .5em, 16px);
    color: var(--dark-blue);
    line-height: 1.2;
    text-align:left;
    display:block;
    box-shadow: 0px 2px 2px rgba(0,0,0,.5);
    z-index: 1000;
    white-space:pre;
}
.question_holder_ToolTip:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateY(-6px);
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    display: block;    
}
.helpIconBtn {
    background-color: var(--dark-blue);
    border: none;
    padding: 0px 5px;
    cursor: help;
}
/* ================================================= */
/* // Answers: Form Elements // */
/* ================================================= */
.answers_holder {
    position: relative;
    margin-top: 1em;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.answers_holder label {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    font-size: clamp(12px, .7em, 18px);
    text-align: center;
    padding: .5em 1.5em;
    background-color: #ffffff;
    border-radius: 8px;
    color: var(--dark-blue);
    margin: .5em .5em;
    cursor: pointer;
}
.answers_holder input[type=checkbox] + label, .answers_holder input[type=radio] + label {
    background-color: #ffffff;
}
.answers_holder label:hover, .answers_holder input[type=radio] + label:hover, .answers_holder input[type=checkbox] + label:hover {
    background-color: var(--orange);
}
@media (hover: none) {
    .answers_holder label:hover, .answers_holder input[type=radio] + label:hover, .answers_holder input[type=checkbox] + label:hover  { 
        background-color: #ffffff; 
    }
}
.answers_holder label:hover, .answers_holder input[type=radio]:checked + label:hover, .answers_holder input[type=checkbox]:checked + label:hover {
    background-color: var(--orange);
}

.answers_holder input:checked + label {
    background-color: var(--orange);
}
.answers_holder input[type=radio] + label .react_icons {
    display: none;
}
.answers_holder input[type=checkbox] + label .react_icons {
    display: none;
    position: relative;
    margin-right: 6px;
}
.answers_holder input[type=checkbox]:checked + label .react_icons {
    display: inline-block;
}
.checkBox {
    display: inline-block;
    font-size: .5em;
    appearance: none;
}
.react_icons path {
    color: var(--dark-blue);
}
.react_icons_white {
    display: inline-block;
    cursor: help;
}
.react_icons_white path {
    color: white;
}
.text {
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--dark-blue);
    padding: .6em 1.2em;
    background-color: #ffffff;
    border: 1px solid #ffffff;
}
.text_small {
    display: inline-block;
    width: 6em;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--dark-blue);
    padding: .6em 1.2em;
    background-color: #ffffff;
    border: 1px solid #ffffff;
}
.text_active {
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--dark-blue);
    padding: .6em 1.2em;
    background-color: var(--orange);
    outline-color: var(--orange);
    border: 1px solid var(--orange);
}
.text_small_active {
    display: inline-block;
    width: 6em;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--dark-blue);
    padding: .6em 1.2em;
    background-color: var(--orange);
    outline-color: var(--orange);
    border: 1px solid var(--orange);
}
.text:focus, .text_small:focus, .text_error:focus, .answers_holder input[type=text]:focus, .answers_holder input[type=number]:focus {
    outline-color: var(--orange);
}

.dropDown {
    display: inline-block;
    font-size: clamp(12px, .7em, 18px);;
    padding: .5em 40px .5em 1em;
    background-color: #ffffff;
    border-radius: 8px;
    border: none;
    color: var(--dark-blue);
    margin: .5em .5em;
}
.dropDown_active {
    display: inline-block;
    font-size: clamp(12px, .7em, 18px);;
    padding: .5em 40px .5em 1em;
    background-color: var(--orange);
    outline-color: var(--orange);
    border-radius: 8px;
    border: none;
    color: var(--dark-blue);
    margin: .5em .5em;
}
.dropDown, .dropDown_active {
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 10px);
    background-position-y: 50%;
    cursor: pointer;
}
.answers_holder select:focus {
    outline-color: var(--orange);
}

.button_holder {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .5em;
}
.next_btn {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    font-size: clamp(12px, .7em, 18px);
    text-align: center;
    padding: .5em 1.5em;
    background-color: #ffffff;
    border-radius: 8px;
    border: none;
    color: var(--dark-blue);
    cursor: pointer;
}
.next_btn:hover {
    background-color: var(--orange);
}
@media (hover: none) {
    .next_btn:hover  { background-color: #ffffff; }
}
.help_copy {
    width: 100%;
    text-align: center;
    font-size: clamp(12px, .6em, 16px);
    color: #ffffff;
    line-height: 1.2;
    margin-top: 1em;
}
.answers_holder [data-tooltip], .answers_holder .textTooltip [data-tooltip] {
    position:relative;
  
}
.answers_holder [data-tooltip]:before {
    content: attr(data-tooltip);
    position:absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: .4em .8em;
    background:#1a415c;
    font-size: clamp(10px, .6em, 13px);
    color: white;
    line-height: 1.2;
    text-align:center;
    display:none;
    z-index: 1000;
}
.answers_holder .textTooltip:before {
    content: attr(data-tooltip);
    position:absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: .4em .8em;
    background: #ffffff;
    font-size: clamp(10px, .35em, 13px);
    color: white;
    line-height: 1.2;
    text-align:center;
    display:none;
    z-index: 1000;
}
.answers_holder [data-tooltip]:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateY(-6px);
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    display: none;    
}
.answers_holder .textTooltip:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateY(1px);
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    display: none;    
}
.answers_holder [data-tooltip]:hover:before, .answers_holder .textTooltip:hover:before,
.answers_holder [data-tooltip]:hover:after, .answers_holder .textTooltip:hover:after {
  display:block;
}

/* ================================================= */
/* // Hide Arrows From Number Inputs // */
/* ================================================= */
/* Chrome, Safari, Edge, Opera */
.answers_holder input::-webkit-outer-spin-button,
.answers_holder input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.answers_holder input[type=number] {
  -moz-appearance: textfield;
}
/* ================================================= */


/* ================================================= */
/* // Contact Info Answers: Form Elements // */
/* ================================================= */
.contact_info_answers_holder {
    position: relative;
    margin-top: 1em;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.contact_info_answers_holder .checkBox_holder {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
.contact_info_answers_holder .checkBox {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background-color: #ffffff;
    appearance: none;
    cursor: pointer;
}
.contact_info_answers_holder .text_holder {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    width: 100%;
    padding: 10px;
}
.contact_info_answers_holder .text {
    display: inline-block;
    position: relative;
    width: 100%;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--dark-blue);
    padding: .6em 1.2em;
    background-color: #ffffff;
    border: 1px solid #ffffff;
}
.contact_info_answers_holder .text_error {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--dark-blue);
    padding: .6em 1.2em;
    background-color: #ffffff;
    border: 2px solid var(--red);
}
.contact_info_answers_holder label {
    display: inline-block;
    width: calc(100% - 40px);
    height: fit-content;
    font-size: clamp(12px, .6em, 16px);
    text-align: left;
    line-height: 1.2;
    padding: .5em;
    color: #ffffff;
    margin: 0px .5em;
    cursor: pointer;
}

.contact_info_answers_holder input:checked {
    background-color: var(--orange);
}
.contact_info_answers_holder .required {
    display: block;
    width: 100%;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: #ffffff;
    padding-top: 1em;
}
.contact_info_answers_holder .button_holder {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1em;
}
.contact_info_answers_holder .next_btn {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    font-size: clamp(12px, .7em, 18px);
    text-align: center;
    padding: .5em 1.5em;
    background-color: #ffffff;
    border-radius: 8px;
    border: none;
    color: var(--dark-blue);
    cursor: pointer;
}
.contact_info_answers_holder .next_btn:hover {
    background-color: var(--orange);
}

.contact_info_answers_holder .dropDown {
    display: inline-block;
    width: 100%;
    font-size: clamp(12px, .7em, 18px);;
    padding: .5em 40px .5em 1em;
    margin: 0px;
    background-color: #ffffff;
    border-radius: 8px;
    border: none;
    color: var(--dark-blue);
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 10px);
    background-position-y: 50%;
    cursor: pointer;
}
.contact_info_answers_holder select:focus {
    outline-color: var(--orange);
}

/* TOOL TIPS / HELP COPY */
/* ================================================= */
.contact_info_answers_holder .toolTipHolder_Hidden, .contact_info_answers_holder .toolTipHolder {
    display: block;
    position: relative;
    width: 100%;
    height: 0px;
}
.contact_info_answers_holder .toolTipHolder:before {
    content: attr(data-tooltip);
    position:absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: .8em 1em;
    background: var(--orange);
    border-radius: 5px;
    font-size: clamp(12px, .5em, 16px);
    color: var(--dark-blue);
    line-height: 1.2;
    text-align:center;
    display:block;
    box-shadow: 0px 2px 2px rgba(0,0,0,.5);
    z-index: 1000;
}
.contact_info_answers_holder .toolTipHolder:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateY(-6px);
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent var(--orange) transparent;
    display: block;  
    z-index: 999;  
}
.contact_info_answers_holder .helpIconBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: .15em;
    margin-left: -30px;
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0);
    border: none;
    padding: 0px 0px;
    cursor: help;
    z-index: 100;
}
.contact_info_answers_holder .helpIconBtnError {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: .2em;
    margin-left: -2px;
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0);
    border: none;
    padding: 0px 0px;
    cursor: help;
    z-index: 100;
}
/* ================================================= */

.disclaimer {
    width: 100%;
    text-align: left;
    font-size: clamp(12px, .6em, 16px);
    font-style: italic;
    color: rgba(255,255,255,.5);
    line-height: 1.2;
    margin-top: 1em;
}
.disclaimer a {
    color: rgba(255,255,255,.6);
}

.error_message {
    display: block;
    width: 100%;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--red);
    padding: .4em .8em;
    background-color: #ffffff;
    border: 1px solid var(--red);
    margin-top: .5em;
}
.error_icon {
    display: inline-block;
    position: relative;
    margin-top: .35em;
    margin-left: -30px;
    color: var(--red);
    width: 20px;
    height: 20px;
}
.message_on_select {
    display: block;
    text-align: center;
    width: 100%;
    border-radius: 10px;
    font-size: clamp(12px, .6em, 16px);
    color: var(--green);
    padding: .4em .8em;
    background-color: #ffffff;
    border: 1px solid var(green);
    margin-top: .5em;
}
.contact_info_answers_holder .error_icon[id="phoneNumber_error"] , 
.contact_info_answers_holder .error_icon[id="email_error"] {
    display: inline-block;
    position: relative;
    margin-top: .35em;
    margin-left: -50px;
    width: 20px;
    height: 20px;
    color: var(--red);
}

@media screen and (min-width: 768px) {
    .contact_info_answers_holder .text_holder {
        width: 50%;
    }
}
/* ================================================= */
/* // Hide Arrows From Number Inputs // */
/* ================================================= */
/* Chrome, Safari, Edge, Opera */
.contact_info_answers_holder input::-webkit-outer-spin-button,
.contact_info_answers_holder input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.contact_info_answers_holder input[type=number] {
  -moz-appearance: textfield;
}
/* ================================================= */


/* ================================================= */
/* // Messages // */
/* ================================================= */
.message_holder, .appt_message_holder {
    display: block;
    position: relative;
    width: 100%;
    height: fit-content;
    text-align: center;
    margin-bottom: 1em;
}
.message_holder p, .appt_message_holder p {
    font-size: clamp(14px, 1em, 25px);
    line-height: 1.3;
    color: white;
}
.message_holder a {
    font-size: clamp(14px, 1em, 25px);
    line-height: 1.3;
    color: white;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .answers_holder {
        justify-content: center;
    }
    .button_holder {
        justify-content: flex-end;
    }
}


/* ================================================= */
/* // Appointment Calendar Styles // */
/* ================================================= */
.appointment_scheduler_container {
    position: relative;
    margin-top: 1em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.appointment_scheduler_container .spacer {
    position: relative;
    display: inline-block;
    width: clamp(6px, 1em, 15px);
}
.appointment_time{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius:  10px;
    background-color: #fff;
    margin: 8px;
    padding: .7em 1.5em;
    font-size: clamp(12px, .4em, 14px);
    font-weight: 600;
    color: var(--dark-blue);
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
    width: 88px;
}
.appointment_time.active{
    background-color: var(--orange);
    color: #fff;
}
@media screen and (max-width: 768px) {
    .appointment_scheduler_container .spacer {
        width: 100%;
        height: 1em;
    }
}