@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --theme_light_clr: #ECEFF1;
    --theme_clr: #CFD8DC;
    --text_clr: #15192BBF;
    --font: "Poppins", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}

.overflow-hidden {
    overflow: hidden;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.m0 {
    margin: 0 !important;
}

.container {
    width: 100%;
    max-width: 1260px;
    padding-left: 26px;
    padding-right: 26px;
    margin: 0 auto;
    /* overflow-x: hidden;  */
}

main {
    padding-bottom: 100px;
     margin-top: 90px;
}

button,
input,
textarea {
    font-family: var(--font);
}

/* loader  */    
.loader-div {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-top-color: var(--text_clr);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
/* header */
.header {
    border-bottom: 1px solid #00000033;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 5;
}

.main_hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.main_hdr .hdr_logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.main_hdr .hdr_logo .logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 1;
    overflow: hidden;
}

.main_hdr .hdr_logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main_hdr .hdr_logo h1 {
    font-size: 18px;
    color: #2E4450;
    font-weight: 500;
}

/* error div */
.error_div {
    opacity: 1;
    transition: all 0.5s;
    background-color: #FF43431A;   
}

.error_div .error {
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    gap: 10px;
    padding: 16px 0;
}

.error_div .error p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text_clr);
}

.error_div .error .close_btn {
    font-size: 24px;
    color: #FF4343;
}

/* menu div */
.menu_div {
    padding: 20px;
    border: 1px solid #0000001A;
    border-radius: 10px;
    margin: 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: space-between; */
    row-gap: 15px;
    column-gap: 50px;
    width: 100%;
}

.menu_div .menu_li {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.menu_div .line {
    height: 40px;
    width: 1px;
    background-color: #15192B1A;
}

.menu_div .menu_li .menu_icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.menu_div .menu_li .menu_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu_div .menu_li .menu_icon,
.main_hdr .info_icon {
    display: inherit;
}

.main_hdr .info_icon {
    cursor: pointer;
}

.menu_div .menu_li a {
    color: var(--text_clr);
}

.menu_div .menu_li a i {
    margin-left: 10px;
}

.menu_div .menu_li:last-child .menu_icon::after {
    content: none;
}

/* main section start */
.automated_chat {
    background-color: var(--theme_light_clr);
    border-radius: 10px 10px 10px 0;
    padding: 20px;
    margin-top: 20px;
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: var(--text_clr);
    animation: fade-in 0.2s linear;
    max-width: fit-content;
    width: 80%;
}
.automated_chat strong , .automated_chat p span{ 
    color: var(--text_clr) !important;
} 

.automated_chat li {
    list-style: outside;
    margin-left: 30px;
}

.automated_chat .services_link {
    margin-top: 20px;
}

.automated_chat .services_link>a {
    display: inline-block;
    color: var(--theme_clr);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.automated_chat a {
    color: var(--text_clr);
    text-decoration: underline;
}

/* user side section */
.user_chat {
    margin-top: 20px;
    margin-inline-start: auto;
    max-width: fit-content;
    min-width: 300px;
    width: 80%;
    animation: fade-in 0.2s linear;
}

.user_side_part .singl_select_box {
    margin-inline-start: auto;
    max-width: fit-content;
    min-width: 300px;
    border-radius: 10px;
    box-shadow: 0px 3px 15px 0px #0000001A;
    overflow: hidden;
    cursor: pointer;
}

.user_side_part .select_ans {
    display: block;
    padding: 20px;
    color: var(--text_clr);
    border-bottom: 1px solid #0000001A;
    transition: .4s;
}

.singl_select_box .select_ans:hover {
    background-color: var(--theme_clr);
}

.user_side_part p {
    color: var(--text_clr);
}

.user_side_part .select_ans:last-child {
    border-bottom: 0;
}

.ans_div {
    margin-inline-start: auto;
    max-width: fit-content;
    width: 80%;
    margin-top: 20px;
    animation: fade-in 0.2s linear;
}

.ans_div .ans_select {
    background-color: #CFD8DC;
    border-radius: 15px 15px 0 15px;
    font-weight: 400;
    font-size: 16px;
    color: var(--text_clr);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
}

.input_div .input_box {
    max-width: 300px;
    margin-inline-start: auto;
}

.user_side_part .input_box .textarea_input {
    border: 1px solid #0000001A;
    border-radius: 10px;
    width: 300px;
    height: 128px;
    resize: none;
    outline: none;
    padding: 20px;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;

    &::placeholder {
        color: #15192B80;
    }
}

.user_side_part .note {
    font-size: 14px;
    color: #15192B80;
    line-height: 21px;
    margin-top: 8px;
}

.send_btn {
    width: 300px;
    height: 50px;
    padding: 20px;
    border-radius: 5px;
    background-color: var(--theme_clr);
    color: var(--text_clr);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    border: none;
    outline: none;
    font-size: 16px;
    cursor: pointer;
    margin-inline-start: auto;
}

/* multi select input */


.user_side_part .multi_select_option {
    border-radius: 10px;
    /* border: 1px solid #0000001A; */
    box-shadow: 0 2px 10px #cccccc6f;
    cursor: pointer;
    max-width: fit-content;
    margin-inline-start: auto;
}

.user_side_part .multi_select_option .select_ans {
    padding: 20px;
}

.user_side_part .multi_select_option .select_ans label {
    display: flex;
    align-items: center;
    gap: 10px;
}


.user_side_part .multi_select_option .select_ans .chk_box {
    width: 20px;
    height: 20px;
}

/* animation */

.dot-animation {
    height: 30px;
}

.dot-animation .dot {
    display: inline-block;
    background-color: var(--theme_clr);
    border-radius: 50%;
    margin-right: 4px;
    width: 12px;
    height: 12px;
    animation: typing-animate 1s linear infinite;
}

.dot-animation .dot:nth-child(1) {
    animation-delay: 0s;
}

.dot-animation .dot:nth-child(2) {
    animation-delay: 0.3s;
}

.dot-animation .dot:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes typing-animate {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(0, 12px)
    }

    100% {
        transform: translate(0, 0)
    }
}

.hidden {
    opacity: 0;
    height: 0;
    visibility: hidden;
}

.show {
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
    animation: fade-in 0.2s linear;
}

@keyframes fade-in {
    0% {
        transform: translateY(20px)
    }

    100% {
        transform: translateY(0)
    }
}

/* age section */

.input_box .input {
    width: 100%;
    height: 64px;
    /* min-width: 300px; */
    border: 1px solid #0000001A;
    outline: none;
    border-radius: 10px;
    padding: 20px;
    font-size: 16px;
    box-shadow: 0 2px 10px #cccccc6f;

    &::placeholder {
        color: #15192B80;
    }
}

.user_side_part .age_input {
    position: relative;
}

.user_side_part .input_box>.age_title {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translate(0, -50%);
    font-size: 12px;
    color: #15192B80;
}


.select_option_box {
    border: 1px solid #0000001A;
    outline: none;
    border-radius: 10px;
    padding: 20px;
    color: #15192B80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px #cccccc6f;
}

.symptom-list__control {
    height: 64px;
    padding: 20px !important;
}

.symptom-list__control div {
    margin: 0 !important;
    padding: 0 !important;
}

.symptom-list__menu {
    position: static !important;
}

.symptom-list__menu-list {
    max-height: 262px !important;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 12px 0 !important;
}

.symptom-list__option {
    padding: 5px 20px !important;
    background-color: transparent !important;
    transition: .4s;

    &:hover {
        background-color: var(--theme_clr) !important;
    }

    &:active {
        background-color: var(--theme_clr) !important;
    }
}

.select_option {
    height: 64px;
    border-radius: 10px;
    box-shadow: 0 2px 10px #cccccc6f;
    border: 1px solid #0000001A;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 10px;
    transition: .4s;
    cursor: pointer;

    &:hover {
        background-color: var(--theme_clr);
    }
}

.symptom-list__menu-list::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: #b4b4b4a8;
    border-radius: 30px;
}

.symptom-list__control--menu-is-open .symptom-list__indicators {
    transform: rotate(180deg);
}

.symptom-list__indicators {
    transition: .4s;
}

.select_option li {
    display: block;
    color: var(--text_clr);
    font-size: 16px;
    cursor: pointer;
}

.back_to_chat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--text_clr);
    font-weight: 400;
    margin: 30px 0;
    cursor: pointer;
}

.go-back {
    background-color: transparent;
    border: none;
    font-size: 16px;
    font-weight: 400;
    color: #15192BBF;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 20px 0;
    cursor: pointer;
    margin-inline-start: auto;
}

.calculate_result {
    font-size: 16px;
    font-weight: 600;
    color: var(--theme_clr);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.calculate_result .small-dot {
    display: flex;
    align-items: center;
}

.calculate_result .small-dot .dot {
    background-color: var(--theme_clr);
    border-radius: 50%;
    width: 5px;
    height: 5px;
    animation: dot-animation 1.3s linear infinite;
    margin-right: 3px;
}

.small-dot .dot:nth-child(1) {
    animation-delay: 1s;
}

.small-dot .dot:nth-child(2) {
    animation-delay: 1.3s;
}

.small-dot .dot:nth-child(3) {
    animation-delay: 1.6s;
}


@keyframes dot-animation {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(0, -4px)
    }

    100% {
        transform: translate(0, 0)
    }
}

/* tooltip */
.tooltip_wrap {
    position: relative;
    font-size: 16px;
    color: var(--text_clr);
    margin-bottom: 10px;
}
.tooltip{
    cursor: pointer;
}

.tooltip_wrap .tooltiptext {
    visibility: hidden;
    opacity: 0;
    width: 300px;
    background-color: rgb(31, 31, 31);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    right: 0;
    margin-left: -60px;
    font-family: var(--font);
    transition: .5s;

}

.tooltip_wrap span {
    margin-right: 10px;
}

.tooltip_wrap .tooltiptext h2 {
    font-size: 14px;
    font-weight: 500;
}

.tooltip_wrap .tooltiptext p {
    font-size: 12px;
    color: rgb(201, 201, 201);
    line-height: 20px;
    margin-top: 8px;
}

.tooltip_wrap .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 16%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* .symptoms_title.tooltip_wrap .tooltiptext::after {
    left: 34%;
} */

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* form */
.question_control {
    color: var(--text_clr);
    margin: 20px 0;
    cursor: pointer;
    max-width: fit-content;
    margin-inline-start: auto;
}

.modal_overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

.modal_overlay .modal_box {
    width: 100%;
    max-width: 550px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative; 
}

.modal_box .modal_hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #0000001A;
}

.modal_box .close_btn {
    color: var(--text_clr);
    font-size: 20px;
}

.modal_box h2 {
    font-size: 20px;
    font-weight: 500;
}

.modal_box .modal_body {
    padding: 20px;
}

.modal_box .modal_body p {
    font-size: 16px;
    color: var(--text_clr);
}

.modal_box .modal_body p span {
    color: var(--theme_clr);
}

.modal_box label {
    display: flex;
    align-items: center;
    color: #374151;
    font-size: 15px;
}

.restart-popup .modal_box .modal_hdr {
    border: none;
    justify-content: end;
}

.restart-popup .modal_box {
    width: 100%;
    max-width: 425px;
    padding: 20px;
}

.restart-popup .modal_box .modal_footer {
    text-align: center;
    padding: 20px 0 0;
}

.restart-popup .modal_footer .send_btn {
    margin: 0;
    width: 100%;
}

.restart-popup .modal_body {
    text-align: center;
    padding: 0 20px;
}

.restart-popup .modal_box .modal_footer .cancel {
    color: var(--text_clr);
    padding: 0;
    text-decoration: underline;
    font-weight: 400;
    margin: 10px 0 0;
}

/* feedback popup */
.modal_overlay .modal_body .feedback-box {
    padding: 10px;
    border-radius: 5px;
    background-color: #EDF7ED;
}

.modal_body .feedback-box h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.modal_body .feedback-box p {
    font-size: 15px;
    line-height: 24px;
}

.modal_body .feedback-box h3 i {
    color: #30A661;
    margin-right: 5px;
}


.feedback-popup {
    position: fixed;
    z-index: 9999;
    bottom: 30px;
    right: 30px;
    max-width: fit-content;

}

.feedback-popup .popup-body {
    display: flex;
    gap: 10px;
    padding: 20px;
    background-color: #EDF7ED;
    border-radius: 10px;
    box-shadow: 0px 3px 15px 0px #0000001A;
    color: var(--text_clr);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
}

.feedback-popup .popup-body h3 {
    font-size: 16px;
    font-weight: 600;
}

.feedback-popup .popup-body .icon i {
    color: #30A661;
}

/* CUSTOM CHEAKBOX */
.modal_body .select_chkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
}

.select_chkbox input[type="checkbox"] {
    display: none;
}

.select_chkbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    gap: 10px;
    color: var(--text_clr);

}

.select_chkbox .chk_box {
    width: 24px;
    height: 24px;
    border: 2px solid #15192B80;
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    position: relative;
    transition: .5s;
}

.select_chkbox .chk_box i {
    opacity: 0;
}

.select_chkbox input[type="checkbox"]:checked+.chk_box {
    background-color: var(--theme_clr);
    border-color: transparent;
}

.select_chkbox input[type="checkbox"]:checked+.chk_box i {
    opacity: 1;
    color: var(--text_clr);
}

.select_chkbox input[type="checkbox"]:checked+.select_chkbox label {
    background-color: var(--theme_light_clr);
}

.modal_box .enter_reson_box {
    margin-top: 30px;
}

.enter_reson_box label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
    color: #374151;
    padding: 0;
}

.modal_box textarea {
    width: 100%;
    height: 90px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    outline: none;
    font-size: 16px;

    &:focus {
        border-color: var(--theme_clr);
    }
}

.modal_box .enter_reson_box .note {
    font-size: 13px;
    color: #9292a0;
}

.modal_box .modal_footer {
    text-align: right;
    padding: 20px;
}

.modal_box .modal_footer button {
    margin-left: 10px;
    padding: 9px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

.modal_box .select_chkbox label {
    padding: 12px;
}

.modal_box .modal_footer .cancel {
    color: var(--theme_clr);
    background-color: transparent;
}

.modal_box .modal_footer .submit {
    background: var(--theme_clr);
    color: var(--text_clr);
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Care Recommendation page */
.Recommendation_section .main_title h2 {
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    line-height: 33px;
    color: #15192B;
    margin-right: 8px;
}

.Recommendation_section .main_title {
    cursor: pointer;
    margin: 30px 0;
    display: inline-block;
}

.suggestion_alerts {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 10px;
}

.suggestion_alerts .alert_name {
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.red_alert .suggestion_alerts {
    background-color: #FFECEC;
    color: #EF4444;
}
.dark-red_alert .suggestion_alerts {
    background-color: #fcd5d5;
    color: #991B1B;
}

.green_alert .suggestion_alerts {
    background-color: #E7FBF2;
    color: #15803D;
}

.light-green_alert .suggestion_alerts {
    background-color: #E7FBF2;
    color: #8FC741;
}

.yellow_alert .suggestion_alerts {
    background-color: #FBF0CE;
    color: #EAB308;
}

.orange_alert .suggestion_alerts {
    background-color: #FFE8CE;
    color: #FB923C;
}

.suggestion_alerts span {
    font-size: 16px;
    font-weight: 400;
    display: block;
    text-align: center;
}

.suggestion_alerts i {
    font-size: 24px;
}

/* new alert design */

.alert-container {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}

.alert-container .tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 55px 0 10px 0;
}

.alert-container .tabs .tab {
    flex: 1;
    height: 10px;
    border-radius: 10px;
    margin: 0 10px;
}

.tab.green {
    background-color: #15803D;
}

.tab.light-green {
    background-color: #8FC741;
}

.tab.yellow {
    background-color: #EAB308;
}

.tab.orange {
    background-color: #FB923C;
}

.tab.red {
    background-color: #EF4444;
}
.tab.dark-red {
    background-color: #991B1B;
}

.alert-container .alert-tab {
    position: relative;
    flex: 1;
}

.tab-section {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    z-index: -1;
    border-radius: 10px 10px 0 0;
    width: 100%;
    padding: 13px 10px 10px 10px;
    display: none
}

.tab-section::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: -11px;
    width: 26px;
    height: 13px;
    background-color: #fbf0ce;
    z-index: -1;
}

.tab-section::before {
    content: '';
    position: absolute;
    bottom: 10px;
    left: -20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    z-index: 1;
}

.tab-section .icon {
    text-align: center;
    font-size: 20px;
    color: rgba(21, 25, 43, 0.5);
    padding-bottom: 25px;
    position: relative;
}

.tab-section .icon::after {
    content: '';
    position: absolute;
    bottom: 0px;
    width: 26px;
    height: 13px;
    z-index: -1;
    right: -20px;
}

.tab-section .icon::before {
    content: '';
    position: absolute;
    bottom: 0px;
    right: -30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    z-index: 1;
}

.yellow_alert .yellow-section {
    background-color: #FBF0CE;
    display: block;
}

.red_alert .red-section {
    background-color: #FFECEC;
    display: block;
}
.dark-red_alert .drak-red-section {
    background-color: #fcd5d5;
    display: block;
}

.orange_alert .orange-section {
    background-color: #FFE8CE;
    display: block;
}

.light-green_alert .light-green-section {
    background-color: #E7FBF2;
    display: block;
}

.green_alert .green-section {
    background-color: #E7FBF2;
    display: block;
}

.yellow_alert .tab-section .icon::after,
.yellow_alert .tab-section::after {
    background-color: #FBF0CE;
}

.red_alert .tab-section::after {
    background-color: #FFECEC;
}

.dark-red_alert .tab-section::after {
    background-color: #fcd5d5;
}

.red_alert .tab-section .icon::after {
    background-color: #FFECEC;
}

.orange_alert .tab-section .icon::after,
.orange_alert .tab-section::after {
    background-color: #FFE8CE;
}

.green_alert .tab-section .icon::after,
.green_alert .tab-section::after {
    background-color: #E7FBF2;
}

.light-green_alert .tab-section .icon::after,
.light-green_alert .tab-section::after {
    background-color: #e6f6ef;
}

/* -------- */

.find_section {
    padding: 20px;
    border-radius: 15px;
    margin: 30px 0;
    box-shadow: 0px 6px 12px 0px #0000001A;

}

.find_section .zipcode_input {
    padding: 10px 0;
}

.find_section .section_top {
    display: flex;
    align-items: center;
    gap: 20px;
}



.find_section .section_top .section_title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text_clr);
    line-height: 27px;
}

.find_section .section_top .icon {
    display: inherit;
}

.find_section .description {
    font-size: 16px;
    color: var(--text_clr);
    margin: 10px 0;
}

.find_section .zipcode_input span {
    font-size: 16px;
}

.find_section .zipcode_input .input_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    width: 100%;
}

.find_section .zipcode_input .input_box .input {
    box-shadow: none;
    margin-top: 0;
    padding: 20px;
    border-radius: 10px;
    line-height: 17px;
    width: 100%;
    height: 64%;
}

.find_section .zipcode_input .send_btn {
    height: 64px;
    padding: 20px;
    /* border: 1px solid #0000001A; */
    margin: 0;
    width: 100%;
    border-radius: 10px;
}

.zipcode_input .search_loaction_div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* padding-top: 10px; */
}


.search_loaction_div h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text_clr);
}

.search_loaction_div .search_name {
    padding-top: 10px;
}

.search_loaction_div .search_name span {
    font-size: 14px;
    color: var(--text_clr);
    line-height: 21px;
}

.search_loaction_div .search_location,
.search_loaction_div .mobile_num {
    font-size: 16px;
    color: var(--text_clr);
}


.search_loaction_div .map_image {
    display: inline-flex;
    margin-top: 10px;
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}

.search_loaction_div .map_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.general_information_section .information_li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.general_information_section .information_li .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #CFD8DC;
    color: #CFD8DC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}


.general_information_section .information_li .info_title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--text_clr);
}

.general_information_section>ul>li {
    /* box-shadow: 0px 6px 12px 0px #0000001A; */
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* accordion section */

.accordion_section {
    margin-top: 20px;
}

.accordion_section .accordion_label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #15192BBF;
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    transition: 0.3s;
}

.accordion_label i {
    transition: 0.3s;
}

.accordion_section .accordion_contain {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #15192BBF;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
}

.accordion_section .accordion_contain span {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #15192BBF !important;
}

.accordion_section .accordion_contain strong,
.accordion_section .accordion_contain b {
    font-weight: 600;
}

.accordion_section .accordion_contain ul {
    margin: 8px 0;
}
.accordion_section .accordion_contain ol li{
    list-style-type: decimal;
    margin-left: 30px;
}
.accordion_section .accordion_contain ul li {
    list-style: disc;
    margin-left: 26px;
}
.accordion_contain .ql-indent-1{
    margin-left: 45px !important;
}
.accordion_section.show-accordion .accordion_label span {
    color: #CFD8DC;
}

.accordion_section .accordion_label span {
    position: relative;
    transition: .3s;
}

.accordion_section .accordion_label span::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: #CFD8DC;
    position: absolute;
    bottom: -3px;
    left: 0;
    border-radius: 10px;
    opacity: 0;
    transition: .5s;
}

.accordion_section.show-accordion .accordion_contain {
    max-height: fit-content;
    margin-top: 10px;
    opacity: 1;
    p{
      margin: 10px 0;
    }
}

.accordion_section.show-accordion .accordion_label i {
    transform: rotate(180deg);
}

.accordion_section.show-accordion .accordion_label span::after {
    opacity: 1;
}

.search_loaction_div a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--theme_clr);
    font-size: 16px;
    font-weight: 600;
    width: fit-content;
}

.search_loaction_div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.search_loaction_div .voucher-link {
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
}

.disclaimer_section h2 {
    font-size: 22px;
    color: #15192B;
    font-weight: 600;
    line-height: 33px;
    margin: 42px 0 20px 0;
}

.disclaimer_section p {
    font-size: 12px;
    color: var(--text_clr);
    font-weight: 500;
    line-height: 18px;
    margin-bottom: 30px;
}

/* side Care Recommendations alert */
.alert_menu {
    position: fixed;
    top: 90px;
    right: 0;
    z-index: 6;
    height: 100%;
    width: 100%;
    max-width: 600px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: auto;
    visibility: hidden;
    transition: .5s;
    max-height: calc(100vh - 90px);
    transform: translateX(600px);
}

.alert_menu.fade-right {
    visibility: visible;
    transform: translateX(0px);
}

.alert_menu .alert-hdr {
    background-color: #00000008;
    padding: 20px;
    border-bottom: 1px solid #0000001A;
}

.alert-hdr .alert-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-hdr .alert-title h2 {
    font-size: 18px;
    color: var(--text_clr);
    font-weight: 500;
}

.alert-hdr .alert-title .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #33363F;
    cursor: pointer;
}

.alert-hdr .alert-description {
    font-size: 16px;
    color: var(--text_clr);
    margin-top: 5px;
}

.alert_menu .alert-item {
    border-bottom: 1px solid #0000001A;
    color: var(--text_clr);
    font-size: 16px;
    padding: 20px;
    display: flex;
    align-items: normal;
    gap: 10px;
}

.alert_menu .alert-item h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}


.alert_menu .alert-item .line {
    width: 10px;
    height: auto;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Alert Colors */
.green.line {
    background-color: #15803D;
}

.yellow.line {
    background-color: #EAB308;
}

.orange.line {
    background-color: #FB923C;
}

.red.line {
    background-color: #EF4444;
}

.dark-red.line {                         
    background-color: #991B1B;
}

/* doctor visti box */
.appointment_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.appointment_box li {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #0000001A;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.appointment_box .icon {
    display: inherit;
}

.appointment_box .timezone-list__menu-list .appointment_text {
    padding: 5px 10px;
    cursor: pointer;
}

.appointment_box .appointment_text h2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--text_clr);
}

.appointment_box .appointment_text span {
    font-size: 12px;
    color: #15192B80;
    line-height: 18px;
}

.rs-picker-popup {
    z-index: 99999 !important;
}

.appointment_select {
    justify-content: space-between;
}

.appointment_select .left_side {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* appointment modal */
.appointment_modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    justify-content: center;
    align-items: center;
}

.booking_box .find_section {
    box-shadow: none;
}

.appointment_modal_body .section_top {
    padding-bottom: 10px;
}

.booking_box {
    background: #fff;
    width: 600px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    margin: 20px;
    padding: 20px;
}

.booking_box .find_section {
    margin: 0;
    border: none;
    padding: 0;
}

.booking_box .zipcode_input {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.booking_box .appointment_box li {
    width: auto;
}

.booking_box .find_section .zipcode_input .input_box {
    width: 100%;
}

.booking_box .find_section .zipcode_input .send_btn {
    margin: auto;
}

.zipcode_input .cancle_link {
    display: inline-block;
    font-size: 16px;
    text-align: center;
    text-decoration: underline;
    color: var(--text_clr);
    padding-top: 10px;
    margin: 0 auto;

}

.booking_box .booking_contain {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

.booking_box .booking_contain p {
    color: var(--text_clr);
    font-size: 16px;
}

.booking_box .booking_contain .appointment_link {
    color: var(--text_clr);
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline;
}

.booking_modal.find_section .zipcode_input .input_box {
    padding: 0;
}

/* custome scroll bar */
.accordion_section ::-webkit-scrollbar {
    width: 5px;
}

.accordion_section ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 30px;
}

.accordion_section ::-webkit-scrollbar-thumb {
    background: #dcdcdc;
    border-radius: 30px;
}

/* restart button  */
.restart_btn {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 20px;
    z-index: 6;
}

.restart_btn button {
    width: 135px;
    height: 50px;
    border-radius: 50px;
    background-color: white;
    border: 1px solid #dbdbe0;
    outline: none;
    box-shadow: 0 0 20px #00000016;
    font-size: 16px;
    color: #3f414a;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.restart_btn button i {
    margin-right: 8px;
    font-size: 20px;
}

.sm-loading {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: transparent;
    border: 3px solid #89dee242;
    border-top-color: white;
    -webkit-animation: 1s spin linear infinite;
    animation: 1s spin linear infinite;
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.sm-loading.small-loading {
    width: 16px;
    height: 16px;
}

.search_loaction_div .map_image.d-none {
    display: none;
}

.error-for-required {
    color: #C53232 !important;
    font-size: 14px;
}

.input_div .error-for-required {
    margin-top: -10px;
}

.age_input .error-for-required {
    margin-top: 0px !important;
}

.symptom-list__control:hover {
    border-color: #0000001A !important;
}

.css-hlgwow {
    padding: 0 !important;
}

.rs-input {
    padding: 0 !important;
    font-size: 16px;
    font-weight: 500;
    color: var(--text_clr);
    font-family: var(--font);
}

.rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
.rs-input-group:focus-within {
    outline: none !important;
}

.rs-picker .rs-input-group-addon {
    display: none;
}

.timezone-list__control--menu-is-open .appointment_text {
    display: none;
}

.timezone-list__control--menu-is-open .timezone-list__input-container {
    position: relative !important;
}

.timezone-list__input-container {
    position: absolute !important;
}

.timezone-list__menu-list {
    width: 335px !important;
}
 
.main-bot-container {
    transform: translateY(30px);
    transition: .5s;
}

.fade-up {
    transform: translateY(0);
    padding-top: 1px;
}

.fade-up .menu_div {
    margin-top: 30px;
}

.fade-out {
    opacity: 0;
}

/* error page ------------------------- */
.error-div {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-content {
    text-align: center;
    font-size: 16px;
    color: #000;
    line-height: 24px;
}

.error-content h1 {
    font-size: 38px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;
}

.review-information-section {
    margin: 30px 0;
}
.review-information-section .review-information h2{
    font-size: 22px;
    font-weight: 600;
    line-height: 33px;
}
.review-information .link{
    margin: 20px 0;
    display: flex;
    gap: 20px;
    i{
        font-size: 18px;
    }
}
.review-information .link a{
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--text_clr); 
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: .5;
}
.review-information .link a.active{
    opacity: 1;
}
.review-information .content{
    font-size: 15px;
    font-weight: 400;
    color: var(--text_clr);
    line-height: 20px; 
    margin: 10px 0;
}
.review-information .content a{
    color: #000000 !important;
    text-decoration: underline;
    word-break: break-word;
}
.review-information .content p , .review-information .content ol , .review-information .content ul{
    margin: 10px 0;
}
.review-information .content p strong , .review-information .content p b{
    font-weight: 600;
}
.review-information .content ul li {
    list-style: disc;
    margin: 5px 0 5px 20px;
}
.review-information .content ol li{
    list-style: number;
    margin: 5px 0 5px 20px;
}
.review-information .content ul li.ql-indent-1{
    margin-left: 40px !important;
}
.review-information .content h1 , .review-information .content h2 ,.review-information .content h3 ,.review-information .content h4 ,.review-information .content h5 ,.review-information .content h6{
    font-size: 17px;
    margin: 15px 0;
}
.history-content ul li {
    display: flex;
    gap: 10px;
}
.history-content ul li .content {
    line-height: 12px;
    padding-bottom: 25px;
    margin: 0;
}
.history-content ul li .point {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.history-content ul li.active .point .dot {
    background-color: #191919;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
    .history-content ul .point .dot {
        width: 8px;
        height: 8px;
        border: 1px solid #191919;
        background-color: #fff;
        border-radius: 50%;
        flex-shrink: 0;
    }
.history-content ul li .point .line {
    width: 1px;
    height: 100%;
    background-color: #191919;
}
.history-content ul li .content h3 {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    line-height: 12px;
    margin-top: 0;
    margin-bottom: 10px;
}
.history-content ul li .content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary-color);
    line-height: 24px;
    margin: 0;
    display: block;
}

.goal_result .goal-title{
    font-size: 16px;
    font-weight: 600; 
    margin: 0 0 20px 0;
}
.goal_result p{
    margin: 20px 0;
}
.goal_result .description p:last-child , .goal_result  p:last-child{
    margin: 0;
}
/* rating popup ------------ */
.rating-popup{
    animation: fadeIn 0.3s ease forwards;
}
.rating-popup .modal_box{
    max-width: 500px;
    padding: 30px;
    text-align: center;
    transform: scale(0.8);
    opacity: 0;
    animation: popupIn 0.4s ease forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
@keyframes popupIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.rating-popup .title{
    font-size: 20px;
    font-weight: 700;
    color: #191919; 
}
.rating-popup .description{
    font-size: 16px;
    font-weight: 500;
    color: #191919; 
    margin: 20px 0;
}
.rating-popup .star{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    color: #E8E8E8;
}
.rating-popup .star i{
    cursor: pointer;
    transition: .5s;
}
/* .rating-popup .star i:hover{
    color: #FFC15D;
} */
.rating-popup .star .fill{
    color: #FFC15D;
}
.message-box{
    margin-top: 20px;
}
.message-box .error-for-required{
    margin-top: 10px;
}

.message-box textarea{
    width: 100%;
    height: 150px;
    padding: 20px;
    font-size: 16px;
    font-family: var(--font);
    border-radius: 10px;
    border: 1px solid #1919191A; 
}
.submit-button{
    display: block;
    border: none;
    outline: none;
    width: 100%;
    max-width: 250px; 
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background-color: #191919;
    border-radius: 10px; 
    cursor: pointer;
    margin: 20px auto;
}
.submit-button  .sm-loading{
    margin: 0 auto;
}
.rating-popup .skip-link{ 
    display: inline-block; 
    font-size: 14px;
    font-weight: 500;
    color: #191919;
    text-decoration: underline;
}

.singl_select_box .show_animation{
    display: flex;
    align-items: center;
    gap: 15px;
}
.singl_select_box .disabled{
    pointer-events: none;
}
/* media query ------------------------- */


@media screen and (max-width:1280px) {
    .menu_div{
        column-gap: 35px;
    }
}
@media screen and (max-width:900px) {
    main {
        padding-bottom: 160px;
        margin-top: 0;
    }
    main.hide-header{
        margin-top: 90px;
    }
    .review-information-section {
        margin: 20px 0;
    } 
    .review-information .link{
        margin: 10px 0;
    } 
    .review-information .content{
        font-size: 14px; 
        margin: 5px 0;
    }
    .history-content{
        margin-top: 20px;
    }
    .history-content ul li .content{
        padding-bottom: 15px;
    }
    .history-content ul li .content p {
        font-size: 14px;
    }
   
}

@media screen and (max-width:599px) {
    
    .header {
        height: calc(82px + env(safe-area-inset-top));
        top: 0;
        box-sizing: border-box;
    }

    .automated_chat {
        width: 90%;
    }

    .user_chat {
        width: 90%;
    }

    .ans_div {
        width: 90%;
    }

    .menu_div {
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 0;
    }

    .menu_div>.line {
        height: 10px;
        transform: translate(19px, 0px);
    }

    .input_box .input {
        max-width: 100%;
    }

    .user_side_part .input_box .textarea_input {
        width: 100%;
    }

    .appointment_box li {
        width: auto;
    }

    .send_btn {
        width: 100%;
    }

    .search_loaction_div .map_image {
        height: 250px;
    }

    .modal_box .modal_hdr,
    .modal_box .modal_body,
    .modal_box .modal_footer {
        padding: 15px;
    }

    .modal_box .modal_body p {
        font-size: 15px;
        line-height: 20px;
    }

    .modal_box .select_chkbox .chk_box {
        width: 18px;
        height: 18px;
    }

    .modal_box .select_chkbox label {
        padding: 5px;
        font-size: 15px;
    }

    .modal_box h2,
    .modal_box .close_btn {
        font-size: 16px;
    }
 
    .modal_box .enter_reson_box {
        margin-top: 10px;
    }
    .modal_box .modal_footer button { 
        padding: 6px 22px; 
        font-size: 13px; 
    }

    .feedback-popup {
        bottom: 20px;
        right: 20px;
    }

    .feedback-popup .popup-body {
        padding: 15px;
    }

    .error-content h1 {
        font-size: 30px;
        margin-bottom: 10px;
    }
    .review-information-section .review-information h2 {
        font-size: 18px;
    }
 
}