/* Lottie Spinner */

#lottie-spinner {
    width: 100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Initially hidden */
    z-index: 10;
}



/* Hide Doctor post name */
.doctor-entry h2 {
    display: none;
}

/* Main styles */

#survey-container .title {

    font-family: 'Poppins';

    font-weight: 600;

    font-size: 32px;

    color: #8F82E8;

    display: contents;

    letter-spacing: 1px;

}





#survey-container .main-question {

    font-family: 'Poppins';

    font-weight: 600;

    font-size: 42px;

    color: #6369B7;

    letter-spacing: 2px;

    line-height: 130%;

}





.info-text-1st, .info-text-1st a {

    font-family: 'Poppins';

    font-size: 16px;

    margin-top: 10px;

    color: #6369B7;

}

#question_1 .answer-option {

    font-family: 'Poppins';

    width: 350px;

    height: 90px;

}









#survey-container {

    overflow-x: hidden;

}



.question {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 75px 100px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    background-color: #F4F7FF;

    border-radius: 30px 120px;

    position: relative;

    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* Added opacity to transition */

    transform: translateX(0);  /* By default, there's no translation */

    overflow: hidden; /* Prevents content from displaying outside during slide */

}



.slide-left {

    transform: translateX(-100%); /* Move the element out of view to the left */

}



.slide-right {

    transform: translateX(100%); /* Move the element out of view to the right */

}



.from-left {

    transform: translateX(-100%); /* Immediately place the element out of view on the left */

}





.info-text-1st a{

    color: #6369B7;

}



.info-link:hover {

    color: #6369B7!important;

    text-decoration: underline;

}



.title {

    float: left;

}



.mr-pagination {

    float: right;

}



.main-question {

    display: inline-block;

}



.info-link {

    font-family: 'Poppins';

    font-size: 16px;

    color: #6369B7;

    letter-spacing: 0.5px;

    display: flex;

}



.info-text {

    font-family: 'Poppins';

    font-size: 16px;

    font-weight: bold;

    display: none;

    margin-top: 10px;

    color: #6369B7;

}



.info-text-1st,

.info-text-1st a {

    font-family: 'Poppins';

    font-size: 16px;

    margin-top: 10px;

    color: #6369B7;

}



.info-text-1st a {

    text-decoration: underline!important;

    color: #6369B7;

}



.info-text-1st a:hover {

    color: #6369B7!important;

    font-weight: 500;

}



.question a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {

    background: transparent!important;

    color: #6369B7!important;

}



.question-icon {

    background: url('../images/question-mark-2x.png') no-repeat;

    width: 24px;

    height: 24px;

    display: inline-block;

    margin-right: 10px;

    background-size: 24px 24px;

}



/* Container for answer options */

.answer-options{

    display: flex;

    flex-wrap: wrap;  /* Allow wrapping of items */

    gap: 15px;        /* Gap between buttons for better appearance */

    justify-content: flex-start; /* Align buttons to the start */

    margin-top: 50px;

    margin-bottom: 50px;

}



.answer-options-emoji{

    margin-top: 50px;

    margin-bottom: 100px;

}



/* Individual answer button styles */



/* Question 1 (starting screen) */



#question_1 .answer-options {

    display: block;

    text-align: center;

}



#question_1 .answer-option {

    width: 350px;

    height: 90px;

}



/* Questions 3 and 4.5 (multiple select buttons) */



/* Hide the checkbox visually but still keep it clickable */

#question_3 .answer-option input[type="checkbox"],

#question_4_5 .answer-option input[type="checkbox"] {

    position: absolute;

    opacity: 0;

    height: 0;

    width: 0;

}



#question_3 .answer-options,

#question_4_5 .answer-options {

    user-select: none;

}



/* Base styles for the label-button */

#question_3 .answer-option,

#question_4_5 .answer-option {

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    padding: 10px 15px;

    background-color: #fff;

    color: #8F82E8;

    border: 3px solid #8F82E8;

    padding: 13px 30px;

}



#question_3 .answer-option,

#question_4_5 .answer-option {

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Hover effect for the label-button */

#question_3 .answer-option:hover,

#question_4_5 .answer-option:hover {

    background-color: #8F82E8;  /* Adjust hover background color */

    color: #fff;  /* Adjust hover text color */

    border: 3px solid #8F82E8;

    transform: scale(1.04); 

    transition: transform 0.2s;

}



/* Styles for the checked state */

#question_3 .answer-option.checked,

#question_4_5 .answer-option.checked {

    background-color: #6369B7;  /* Adjust selected background color */

    color: #fff;  /* Adjust selected text color */

    border: 3px solid #6369B7;

}



#question_3 .answer-option.checked span,

#question_4_5 .answer-option.checked span {

    color: inherit;  /* Ensure the text color matches the parent label */

}



#question_3 .next-button,

#question_4_5 .next-button {

    display: flex;

    width: 189px;

    height: 54px;

    padding: 18px 26px;

    justify-content: center;

    align-items: center;

    gap: 10px;

    border-radius: 60px;

    background: #B17EF4;

    color: #FFF;

}



#question_3 .next-button:hover,

#question_4_5 .next-button:hover {

    color: #B17EF4;

    background: white;

    transform: scale(1.05);

    transition: transform 0.2s;

    

}



#question_3 .next-button:focus,

#question_4_5 .next-button:focus {

    outline-offset: 0;

    outline: 0;

}



#question_3 .next-button:active,

#question_4_5 .next-button:active {

    transform: scale(0.95); /* You can adjust the scale value as needed */

    transition: transform 0.1s;

}



#question_3 .button-and-link,

#question_4_5 .button-and-link {

    display: flex;

    align-items: center;  /* align vertically centered */

    justify-content: space-between;  /* space out elements */

    width: 100%;  /* take full width */

}



.custom-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.5);

    z-index: 9999;

}



.modal-content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: #fff;

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0 0 10px rgba(0,0,0,0.2);

}



.modal-content p,

.next-button {

    font-family: 'Poppins';

    letter-spacing: 1px;

}



.close-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    cursor: pointer;

}





/* Questions 3.5 and 4 */



#question_4 .answer-option,

#question_3_5 .answer-option {

    width: 275px;

    height: 90px;

}



#question_4 .answer-options,

#question_3_5 .answer-options{

    display: flex;

    gap: 30px;

}



@media screen and (max-width: 550px) {

    #question_4 .answer-options,

    #question_3_5 .answer-options {

        display: flex;

        gap: 20px;

        flex-direction: column;

        align-items: center;

    }

}



@media screen and (min-width: 870px) {

    #question_4 .answer-options,

    #question_3_5 .answer-options {

        display: block;

        text-align: center;

    }

    #question_4 .answer-options .answer-option,

    #question_3_5 .answer-options .answer-option {

        margin-left: 15px;

        margin-right: 15px;

    }

}



#question_4 .answer-option,

#question_3_5 .answer-option

 {

    height: 90px;

}



.answer-option{

    flex: 1 0 calc(33.333% - 10px); /* Let it take up to 1/3 of the space minus gap; 

                                    the "calc" part accounts for the gap between buttons */

    box-sizing: border-box; /* To ensure padding and border are included in width */

    margin-bottom: 10px;   /* Space between rows */

    text-align: center;    /* Center the text on buttons */

    /* ... other button styles ... */

    border-radius: 30px;

    color: #8F82E8;

    border-color: #8F82E8;

    background-color: white;

    font-family: "Tahoma", sans-serif;

    font-weight: bold;

    letter-spacing: 1px;

    font-size: 16px;

}



.answer-options button:not(:hover):not(:active):not(.has-background){

    color: #8F82E8;

    border-color: #8F82E8;

    background-color: white;

}



.answer-options button:hover{

    color: white;

    border-color: #8F82E8;

    background-color: #8F82E8;

}



.answer-options button:focus{

    outline: 0;

}



/* Scale up slightly on hover */

.answer-options button:hover {

    transform: scale(1.05); /* You can adjust the scale value as needed */

    transition: transform 0.2s; /* Smooth transition */

}



/* Scale down slightly on active/click */

.answer-options button:active {

    transform: scale(0.95); /* You can adjust the scale value as needed */

    transition: transform 0.1s; /* Quicker transition to give a feeling of pressing */

}





/* Question 5 - Emoji buttons */



.answer-options-emoji {

    text-align: center;

}



/* Emoji ratings in quiz */

.emoji-answer img {

    transition: transform 0.3s, filter 0.3s; /* Smooth transition for scaling and graying out */

    display: block;

    width: 100%; /* Adjust as necessary */

    height: 70px;

    width: 70px;

    /* background-size: 70px 70px; */

    border-radius: 100px;

}



.emoji-answer img:hover {

    transform: scale(1.2);

}



.emoji-answer.selected img {

    transform: scale(1.2); /* Enlarge the selected emoji */

}



.emoji-answer {

    cursor: pointer;

    transition: transform 0.5s ease; /* Smooth scaling */

}



/* Container for the question, to ensure everything inside is centered */

#question_5 .question {

    text-align: center;

}



/* Style for each answer option */

#question_5 .emoji-answer {

    display: inline-block; /* This makes them line up in a row */

    margin: 0 15px; /* This adds some spacing between them; adjust values as needed */

}



/* Set non-selected emojis to 50% transparency */

.emoji-answer.grey-out img {

    opacity: 0.5;

    pointer-events: none; /* Prevent further interactions while greyed out */

}





/* Tilt-nod animation */

@keyframes tilt-nod {

    0%, 100% {

        transform: translateY(0) rotate(0deg);

    }

    20% {

        transform: translateY(-5px) rotate(-10deg);

    }

    40% {

        transform: translateY(5px) rotate(10deg);

    }

    60% {

        transform: translateY(-5px) rotate(-5deg);

    }

    80% {

        transform: translateY(5px) rotate(5deg);

    }

}





.emoji-answer.selected img {

    animation: tilt-nod 1.5s infinite;

    transform: scale(1.2); /* Enlarge the selected emoji */

}





/* Fonts and other styles on quiz screens */



#survey-container .title{

    font-family: 'Poppins';

    font-weight: 600;

    font-size: 32px;

    color: #8F82E8;

    display: contents;

    letter-spacing: 1px;

}



#survey-container .question-block{

    padding-left: 50px;

    margin-top: 110px;

    position: relative;

    padding-top: 25px;

    padding-bottom: 25px;

}



#survey-container .question-block:before,

#screen_6 .question-block:before{

    content: "";

    display: inline-block;

    width: 4px;

    background: #89DAF7;

    position: absolute;

    top: 0;      /* Start from the top edge of the div */

    bottom: 0;   /* Stretch down to the bottom edge of the div */

    left: 0;     /* Optionally, stretch it to full width */

    right: 0;    /* Optionally, stretch it to full width */

    border-radius: 5px;

  }



#survey-container .main-question{

    font-family: 'Poppins';

    font-weight: 600;

    font-size: 42px;

    color: #6369B7;

    letter-spacing: 2px;

    line-height: 130%;

}



#survey-container .instruction{

    font-family: 'Poppins';

    font-weight: 600;

    font-size: 32px;

    color: #8F82E8;

    letter-spacing: 2px;

    line-height: 42px;

    margin-top: 15px;

}



/* Page counter */



.page-counter {

    display: flex;

    align-items: center;

    color: #8F82E8;

    width: 350px;

    float: right;

    font-weight: 600;

    /* temporary disable pointer */

    pointer-events: none;

    padding-top: 5px;

}



.page-item {

    font-family: 'Poppins';

    width: 32px;

    height: 32px;

    border: 2px solid #8F82E8; /* Circle border */

    border-radius: 50%; /* Make it circular */

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #fff; /* Background of circle */

    cursor: pointer; /* Hand pointer to indicate clickable */

}



.page-item.active,

.page-item.passed {

    background-color: #8F82E8; /* Background color of the active page */

    color: #fff; /* Text color of the active page */

}



.page-line {

    flex-grow: 1; /* To make the line take all available space between circles */

    height: 2px; /* Thickness of the line */

    background-color: #c1bcf3; /* Line color */

}



.title,

.page-counter

{

    display: inline-flex;

}



/* Back button */



.back-button {

    background: url('../images/back-button-2x.png') no-repeat;

    height: 42px;

    width: 42px;

    background-size: 42px 42px;

    background-color: transparent!important;

    padding: 0;

    border: none;

    position: absolute;  

    top: 50%;            

    left: 27px;             

    transform: translateY(-50%);

}



.back-button:focus{

    outline: none;

}



.back-button:hover {

    background: url('../images/back-button-hover-2x.png') no-repeat;

    background-size: 42px 42px;

}



#screen_6 .back-button {

    left: -73px;  

    top: 70%;

}



@media screen and (max-width: 834px) {

    .back-button {

        top: 70px;

        left: 45px;

    }

    #screen_6 .back-button {

        left: -5px;

        top: -50px;

    }

    #screen_6 .question-block  {

        margin-top: 70px!important;

    }

}



@media screen and (max-width: 500px) {

    .back-button {

        top: 70px;

        left: 20px;

    }

}







/* Responsive adaptation */



@media screen and (max-width: 1280px) {

    .question {

        width: 95%;

        max-width: 1200px;

        margin: 0 auto;

        padding: 75px 100px;

        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        background-color: #F4F7FF;

        border-radius: 30px 120px;

    }

}



@media screen and (max-width: 890px) {

    .page-counter {

        width: 325px;

    }

    .question {

        width: 95%;

        max-width: 1200px;

        margin: 0 auto;

        padding: 75px 100px;

        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        background-color: #F4F7FF;

    }

    .info-text-1st {

        text-align: center;

    }

    /* .info-link {

        justify-content: center;

    } */

    .question {

        border-radius: 30px 90px;

    }



    #survey-container .instruction {

        font-size: 28px;

        line-height: 32px;

    }

}



@media screen and (max-width: 834px) {

    .title-and-counter {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .page-counter {

        padding-top: 30px;

    }

    #survey-container .question-block{

        margin-top: 70px;

        padding-left: 30px;

    }

    #survey-container .main-question {

        font-size: 36px;

    }

    .question {

        padding: 50px 50px;

    }

    .answer-option {

        border-radius: 50px;

    }

    #question_1 .answer-option {

        width: 320px;

        height: 75px;

    }

    #question_5 .emoji-answer {

        margin: 0 10px;

    }

    .emoji-answer img {

        width: 60px;

    }

    .answer-options-emoji {

        text-align: center;

    }

    #question_3 .button-and-link {

        flex-direction: column-reverse;

    }



    #question_3 .answer-options {

        margin-bottom: 50px;

    }



    .next-button {

        margin-bottom: 50px;

    }



    .info-text {

        text-align: center;

    }

}



@media screen and (max-width: 568px) {

    .answer-options{

        gap: 10px;        /* Gap between buttons for better appearance */

    }

    .question {

        width: 90%;

        padding: 50px 25px;

    }

    #survey-container .question-block{

        margin-top: 60px;

        padding-left: 25px;

    }

    #question_1 .answer-option {

        width: 275px;

        height: 65px;

    }

    

    #question_4 .answer-option {

        height: 65px;

    }

    .page-counter {

        width: 260px;

    }

    .question {

        border-radius: 30px 60px;

    }



}



@media screen and (max-width: 436px) {

    .emoji-answer img {

        width: 40px;

    }

    #question_5 .emoji-answer {

        margin: 0 3px;

    }

    #survey-container .title {

        font-size: 28px;

    }

}



/* Screen 6 (You are eligible) */



#screen_6 .contact-btn-nodocs a:hover,

#screen_6 .contact-btn-nodocs a:focus

 {

    background-color: #89DAF7!important; /* Darker shade for hover effect */

    color: white!important;

    text-decoration: none!important;

}



/* Temporary Hide Doctors Counter Container - Screen 6 */



#screen_6 .doctors-counter-container {

    display: none;

}



/* Load More button */

#screen_6 .load-more-doctors {

    display: flex;

    width: 189px;

    height: 54px;

    padding: 18px 26px;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    border-radius: 60px;

    background-color: #B17EF4;

    color: white;

    text-align: center;

    font-family: Poppins;

    font-size: 16px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    letter-spacing: 1.6px;

    margin-left: auto;

    margin-right: auto;

}



#screen_6 .load-more-doctors:hover {

    color: #B17EF4;

    background-color: white;

    border: 2px solid #B17EF4; 

}



.incorrect-zip-message,

.no-doctors-message {

    color: var(--blue, #6369B7);

    font-feature-settings: 'clig' off, 'liga' off;

    font-family: Poppins;

    font-size: 32px;

    font-style: normal;

    font-weight: 600;

    line-height: 48px;

    letter-spacing: 3.84px;

    position: relative;

    padding-left: 30px;

    padding-top: 7px;

    padding-bottom: 7px;

}



.zip-in-search {

    color: var(--blue, #6369B7);

    font-family: Poppins;

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 18px; /* 90% */

    letter-spacing: 5px;

    margin-top: 30px;

    margin-left: 30px;

}



.zip-in-search span {

    color: var(--Blue-2, #89DAF7);

    font-family: Poppins;

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 18px;

    letter-spacing: 5px;

}



.please-contact {

    color: var(--blue, #6369B7);

    font-feature-settings: 'clig' off, 'liga' off;

    font-family: Poppins;

    font-size: 38px;

    font-style: normal;

    font-weight: 600;

    line-height: 50px;

    letter-spacing: 1.9px;

    margin-top: 125px;

    margin-left: 30px;

}



.incorrect-zip-message::before,

.no-doctors-message::before {

    content: "";

    display: inline-block;

    width: 3px;

    background: #8F82E8;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    border-radius: 5px;

}



.contact-btn-nodocs {

    text-align: center; /* Aligns content in the center horizontally */

    margin-top: 60px;

}



.contact-us-nodocs-btn {

    display: inline-block; /* Necessary for padding and background color to affect the link correctly */

    border-radius: 60px;

    background: #B17EF4;

    padding: 20px 55px;

    color: #ffffff; /* Button text color */

    text-decoration: none; /* Removes underline */

    font-weight: bold; /* Bold font */

    transition: background-color 0.3s; /* Smooth color change effect when hovering */

    color: #FFF;

    text-align: center;

    font-family: Poppins;

    font-size: 16px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    letter-spacing: 1.6px;

    flex-shrink: 0;

}





.user-name-inputs {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    margin-top: 50px;

}



.search-inputs {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    width: 100%;

    margin-top: 35px;

}



.user-name-inputs {

    position: relative;

}



#screen_6 .question-block{

    padding-left: 50px;

    position: relative;

    padding-top: 25px;

    padding-bottom: 25px;

}



#screen_6 .main-question {

    color: var(--blue, #6369B7);

    font-feature-settings: 'clig' off, 'liga' off;

    font-family: Poppins;

    font-size: 42px;

    font-style: normal;

    font-weight: 700;

    line-height: 48px; /* 114.286% */

    letter-spacing: 5.04px;

}



#screen_6 #user_last_name {

    border-radius: 0px 30px 30px 0px;

}



.fine-print-text {

    color: #695DA8;

    font-size: 12px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    margin-top: 50px;

}



#screen_6 .fine-print-text a {

    color: #695DA8;

    text-decoration: underline;

}



#screen_6 .fine-print-text a:hover {

    color: #695DA8;

}



#screen_6 #user_email,

#screen_6 #user_first_name,

#screen_6 #user_last_name {

    color: var(--Off-black, #6A6A6A);

    font-family: Poppins;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    letter-spacing: 5px;

    flex: 1;

}



#screen_6 #user_zip {

    color: var(--Off-black, #6A6A6A);

    font-family: Poppins;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    letter-spacing: 5px;

    flex: 0;

}



#screen_6 #search_doctors {

    color: #FFF;

    text-align: center;

    font-family: Poppins;

    font-size: 18px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    letter-spacing: 5px;

    border: none;

    flex-shrink: 0;

}



#screen_6 .error-message {

    z-index: 1;

    color: red;

    font-size: 12px;

    padding-top: 5px;

    display: none; /* Hide by default */

}



#screen_6 .doctors-list-section {

    margin-top: 60px;

}



/* Load More Doctors button */



/* #load-more-doctors {

    display: none;

} */



/* Locate button effects */



#screen_6 #search_doctors:active {

    transform: scale(0.95);

    transition: transform 0.1s;

}



#search_doctors:hover {

    transform: scale(1.05); 

    transition: transform 0.2s;

}



#search_doctors::after {

    content: "";

    display: none;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 30px;

    height: 30px;

    margin-left: -15px; /* Half of width */

    margin-top: -15px; /* Half of height */

    border: 4px solid transparent;

    border-top-color: #89daf7; /* Color of the spinner */

    border-radius: 50%;

    animation: spin 1s linear infinite;

}





/* Spinner in the center of the Screen 6 */



.spinner-center-screen::after {

    content: "";

    position: fixed; /* instead of absolute */

    top: 50%;

    left: 50%;

    width: 60px; /* increased size */

    height: 60px;

    margin-left: -30px;

    margin-top: -30px;

    border: 6px solid transparent; /* increased border thickness */

    border-top-color: #89daf7;

    border-radius: 50%;

    animation: spin 1s linear infinite;

    z-index: 9999; /* Ensure it's above other content */

}



/* Adjusting keyframes to add a bit of fun (ease in and out) */



@keyframes spin {

    0% {

        transform: rotate(0deg);

    }

    50% {

        transform: rotate(180deg);

    }

    100% {

        transform: rotate(360deg);

    }

}





/* --- */



#user_zip {

    margin-right: 10px;

}



.search-inputs input[type=email],

.search-inputs input[type=text],

.user-name-inputs input[type=text]{

    padding: 10px;

    flex-basis: 40%; /* adjust as needed */

    border: 2px solid #8f82e8;

    margin: 0;

}



#search_doctors {

    width: 20%;

    height: 91px;

    flex-shrink: 0;

    border-radius: 0px 30px 30px 0px;

    border-top: 2px solid #8F82E8;

    border-right: 2px solid #8F82E8;

    border-bottom: 2px solid #8F82E8;

    background: #8F82E8;

    background-color: #8f82e8;

    border-color: #8F82E8;

}



#user_email,

#user_zip,

#user_first_name,

#user_last_name {

    height: 91px;

    padding: 12px 32px;

}



#user_email:focus,

#user_zip:focus,

#search_doctors:focus,

#user_first_name:focus,

#user_last_name:focus {

    outline: none;

}



#search_doctors:hover {

    background: linear-gradient(to left, #95f4f9, #a173de);

    color: white;

    border: none;

}



#user_first_name_error {

    position: absolute;

    padding-left: 35px;

    top: 100%;

}



.name-input-container,

.email-input-container,

.zip-input-container {

    display: flex;

    position: relative;

}



#user_email_error,

#user_zip_error {

    position: absolute;

    top: 100%;

    padding-left: 35px;

}



.email-input-container,

.name-input-container {

    width: 50%;

}



.zip-input-container {

    width: 30%;

}



.doctor-entry-fields a:hover {

    color: #6369B7!important;

}



@media screen and (max-width: 992px) {

   

    #user_first_name,

    #user_last_name,

    #user_email,

    #user_zip,

    #search_doctors {

        display: inline-flex;

        width: 280px;

        text-align: left;

        justify-content: center;

    }



    #screen_6 #user_last_name {

        border-radius: 30px;

    }



    .search-inputs {

        margin-top: 0;

    }



    .search-inputs,

    .user-name-inputs {

        flex-direction: column;

    }



    #user_zip {

        margin-right: 0;

    }



    #user_email,

    #user_zip,

    #user_first_name,

    #user_last_name {

        border-radius: 30px;

        margin-bottom: 30px;

    }



    #search_doctors {

        height: auto;

        border-radius: 30px;

        border: none;

    }



    #user_email,

    #user_zip,

    #user_first_name {

        height: 56px;

    }



    .name-input-container,

    .email-input-container,

    .zip-input-container {

        width: 280px;

    }



    #user_first_name_error,

    #user_email_error,

    #user_zip_error {

        top: 65%;

    }



    #search_doctors {

        margin-top: 15px;

    }

   

    

}



@media screen and (max-width: 674px) {

   

    .doctors-counter p {

        font-size: 26px;

        line-height: 32px;

    }



    #screen_6 .main-question {

        font-size: 36px;

        letter-spacing: 2px;

    }



    #question_3 .next-and-info-row

    {

        display: flex;

        flex-direction: column;

        /* align-items: center; */

    }



    #question_3 .next-button {

        position: inherit;

    }



    .info-link {

        justify-content: center;

    }





}



@media screen and (max-width: 568px) {

    #survey-container .main-question {

        font-size: 28px;

    }

    #survey-container .instruction {

        font-size: 24px;

    }

    .answer-options {

        margin-bottom: 50px;

    }

    .answer-options-emoji {

        margin-bottom: 50px;

    }

    #question_5 .emoji-answer {

        margin: 0 5px;

    }

    .emoji-answer img {

        width: 39px;

    }

    .no-doctors-message {

        font-size: 28px;

        letter-spacing: 1px;

    }



    .please-contact p {

        line-height: 40px;

        font-size: 28px;

    }



    .please-contact {

        margin-top: 50px;

    }

}





@media screen and (max-width: 450px) {

    #question_5 .title {

        font-size: 20px;

        letter-spacing: -0.3px;

    }

}



@media screen and (min-width: 993px) {



    #user_email,

    #user_first_name {

        border-radius: 30px 0px 0px 30px;

        border-right: none;

    }



}



/* Screen 7 (Nidra may not be right for you) */



.answer-option-anchor { 

    width: 416px;

    height: 91px;

    flex-shrink: 0;

    border-radius: 30px;

    border: 2px solid #8F82E8;

    background: #FFF;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-family: Poppins;

    font-size: 18px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    letter-spacing: 1px;

    color: #8F82E8;

}



.answer-options .answer-option-anchor:hover,

.answer-options .answer-option-anchor:focus {

    background: #8F82E8;

    color: #FFF!important;

}



@media screen and (max-width: 570px) {

    .answer-option-anchor {

        width: 100%;

        padding: 15px 50px;

    }

    #screen7 .answer-options {

        justify-content: center;

    }

    #screen_6 .main-question {

        font-size: 28px;

        letter-spacing: 1px;

    }



    #screen_6 .question-block {

        padding-left: 30px;

    }

}



@media screen and (max-width: 1400px) {

    .anchor-button-desk {

        display: none;

    }

}



@media screen and (min-width: 1401px) {

    .anchor-button-mob {

        display: none;

    }

}