.modal_appointment,
.modal_login,
.modal_input_code,
.modal_cancel_consultation,
.modal_canceled_consultation,
.modal_change_consultation,
.modal_changed_consultation,
.modal_login_error,
.modal_appoint_error,
.modal_paying,
.modal_player {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal_player {
    top: 25vh;
    height: auto;
    background-color: unset;
}
.modal_cookies_info {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
}
.modal_cookies_info .modal-body {
    display: flex;
    flex-direction: column;
}
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px 50px;
    border: 1px solid #888;
    width: 1200px;
    border-radius: 15px;
}
.modal_player .modal-content {
    width: 95%;
    max-width: 700;
    height: 415;
}
.modal_login .modal-content,
.modal_input_code .modal-content,
.modal_cancel_consultation .modal-content,
.modal_canceled_consultation .modal-content,
.modal_change_consultation .modal-content,
.modal_changed_consultation .modal-content,
.modal_login_error .modal-content,
.modal_appoint_error .modal-content {
    padding: 30px 40px;
    width: 550px;
    height: 590px;
    position: absolute;
    top: calc(50% - 295px);
    left: calc(50% - 275px);
}
.modal_cancel_consultation .modal-content {
    width: 580px;
    height: 420px;
}
.modal_canceled_consultation .modal-content,
.modal_changed_consultation .modal-content {
    width: 580px;
    height: 200px;
}

.modal_login_error .modal-content,
.modal_appoint_error .modal-content {
    height: auto;
}
.modal_change_consultation .day_buttons_row {
    gap: 8px 8px;
}
.modal_change_consultation .block_shedule {
    display: flex;
    gap: 10px 0;
    flex-direction: column;
    margin-top: 10px;
}
.modal_change_consultation .modal-content {
    top: 100px;
    height: 700px;
    overflow: scroll;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    gap: 0px 10px;
    width: 100%;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: #9ec1d4;
}
.modal-title {
    font:
        700 35px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal_login .modal-title,
.modal_input_code .modal-title,
.modal_cancel_consultation .modal-title,
.modal_canceled_consultation .modal-title,
.modal_change_consultation .modal-title,
.modal_changed_consultation .modal-title {
    font:
        700 30px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}

.subtitle_modal {
    margin: 18px 0px 0px;
    font:
        700 25px/1.4 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.close_modal {
    display: flex;
    flex-direction: column;
    width: 18px;
    height: 18px;
    background: var(--src) center center/100% 100% no-repeat;
}
.close_modal1 {
    display: flex;
    flex-direction: column;
    font:
        700 25px/1.4 "Mulish",
        Helvetica,
        Arial,
        serif;
    background-color: rgb(74, 76, 210);
    color: white;
    padding: 0px 10px;
    border-radius: 10px;
}
/* The Close Button */
.image_close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    width: 18px;
    height: 18px;
}
.close_modal:hover,
.close_modal:focus,
.close_modal1:hover,
.close_modal1:focus {
    text-decoration: none;
    cursor: pointer;
}
/* ---------------------------------------   */

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

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

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

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

/* ---------------------------------------   */
.modal_login .get_code,
.modal_input_code .continue,
.modal_login .email,
.modal_cancel_consultation .cancel {
    display: flex;
    flex-direction: column;
    width: 355px;
    border-radius: 38.5px;
    justify-content: center;
    position: static;
    height: 70px;
    font:
        800 22px/1.36 "Mulish",
        Helvetica,
        Arial,
        serif;

    text-align: center;
}
.modal_cancel_consultation .cancel_but_box {
    display: flex;
    flex-direction: row;
    margin: 40px 0 0 0;
    justify-content: space-evenly;
}
.modal_cancel_consultation .cancel {
    width: 225px;
    height: 60px;
}
.modal_login .get_code,
.modal_input_code .continue {
    margin: 44px 55px 0px;
    background-color: #d9d9d9;
    color: #9f9f9f;
    cursor: auto;
}
.modal_login .get_code.active,
.modal_input_code .continue.active,
.modal_cancel_consultation .cancel.active {
    background-color: #00c99d;
    color: #ffffff;
    cursor: pointer;
}
.modal_login .get_code.inactive,
.modal_input_code .continue.inactive {
    background-color: #d9d9d9;
    color: #9f9f9f;
    cursor: auto;
}
.modal_login .login_mess {
    margin-top: 30px;
}
.modal_cancel_consultation .cancel.inactive {
    background-color: #d9d9d9;
    color: red;
    cursor: auto;
    cursor: pointer;
}
.modal_change_consultation .change_consultation_but {
    display: flex;
    flex-direction: column;
    width: 355px;
    border-radius: 38.5px;
    justify-content: center;
    position: static;
    height: 70px;
    font:
        800 22px/1.36 "Mulish",
        Helvetica,
        Arial,
        serif;

    text-align: center;
    margin: 10px 55px 0px;
    background-color: #d9d9d9;
    color: #9f9f9f;
}
.modal_change_consultation .change_consultation_but.active {
    background-color: #00c99d;
    color: #ffffff;
    cursor: pointer;
}

.modal_change_consultation .comm_row {
    justify-content: space-evenly;
}

.modal_login .email {
    margin: 30px 0px 30px;
    background-color: #e5e5ff;
}
.modal_login .email.invalid {
    color: red;
}

.modal_login .email.valid {
    color: #00c99d;
}
/* ------------------------------------- */
.modal_input_code .email_user,
.date_time_consultation {
    color: #00c99d;
}
.modal_input_code .input_code {
    margin: 30px 4px 0px;
    font:
        500 22px/1.36 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #6c6a6a;
}
.modal_input_code .code_row {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 0px 29px;
    margin: 13px 4px 50px;
}

.modal_input_code .code {
    height: 50px;
    width: 50%;
    border-radius: 10px;
    outline-offset: -1px;
    font:
        800 25px/1.36 "Mulish",
        Helvetica,
        Arial,
        serif;
    text-align: center;
}
.modal_input_code .code.active {
    outline: 1px solid #4a4cd2;
}
.modal_input_code .code.inactive {
    background-color: #e5e5ff;
    pointer-events: none;
}

.modal_input_code .repeat {
    margin: 33px 4px 0px;
    text-align: center;
    font:
        700 22px/1.36 "Mulish",
        Helvetica,
        Arial,
        serif;
}
.modal_input_code .repeat.active {
    color: #00c99d;
    text-decoration: underline;
    cursor: pointer;
}

.modal_input_code .repeat.inactive {
    color: rgb(108, 106, 106);
    cursor: auto;
}

/* ------------------------------------- */
.modal_login .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modal-body .calendar_box {
    position: relative;
    display: flex;
    flex-direction: column;
}
.modal-body .calendar_col {
    position: relative;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    grid-row: 1/3;
}
.modal-body .days_title,
.modal-body .times_title,
.modal-body .patient_title,
.modal-body .cost_title,
.modal-body .comm_title,
.about_doc .days_title,
.about_doc .times_title,
.about_doc .patient_title,
.about_doc .cost_title,
.about_doc .comm_title {
    width: auto;
    height: 40px;
    font:
        700 25px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .months_row {
    display: flex;
    align-items: center;
    gap: 0px 29px;
}
#change_consultation .modal-body .months_row {
    justify-content: center;
}
.modal-body .month_passive {
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #6c6a6a;
    cursor: pointer;
    height: 30px;
    display: flex;
    align-items: center;
}
.modal-body .month_active {
    font:
        700 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #00c99d;
    height: 30px;
    display: flex;
    align-items: center;
}
.modal-body .calendar_table,
.modal-body .times,
.about_doc .times {
    display: flex;
    position: relative;
    flex-direction: column;
    margin: 0 0 0 -10px;
}
.modal-body .day_names_row {
    display: flex;
    align-items: center;
    gap: 0px calc(2vw);
    height: 40px;
}
#change_consultation .modal-body .day_names_row {
    margin-left: 30px;
}
.modal-body .day_name {
    font:
        700 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
}
.modal-body table {
    display: flex;
}
.modal-body tbody {
    display: flex;
    flex-direction: column;
}
.modal-body .dates_row {
    display: flex;
    align-items: center;
    gap: 0px calc(2vw);
    height: 40px;
}
#change_consultation .modal-body .dates_row {
    margin-left: 30px;
}
.modal-body .times_row {
    display: flex;
    align-items: center;
    height: 40px;
}

.modal-body .day_month {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font:
        400 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #b4b3b3;
}
.modal-body .time,
.about_doc .time {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 30px;
    font:
        400 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.docs_cards .time {
    /* width: 70px; */
    margin: 0 5px;
    font-size: 20px;
    text-align: center;
}
.about_doc .time {
    width: calc(7vw / 2);
}
.modal-body .day_month.enabled {
    color: #000000;
    font-weight: 700;
    border-radius: 5px;
    outline: 2px solid rgb(0, 201, 157);
    cursor: pointer;
}
.modal-body .time.enabled,
.about_doc .time.enabled {
    color: #000000;
}
.modal-body .time.enabled:hover,
.about_doc .time.enabled:hover,
.docs_cards .time.enabled:hover {
    border-radius: 5px;
    outline: 2px solid rgb(0, 201, 157);
    cursor: pointer;
}
.modal-body .day_month.current,
.modal-body .time.current,
.about_doc .time.current,
.docs_cards .time.current {
    border-radius: 5px;
    outline: 1px solid #8e8e8e;
    outline-offset: -1px;
}
.modal-body .day_month.choised,
.modal-body .time.choised,
.about_doc .time.choised,
.docs_cards .time.choised {
    color: white;
    background-color: #00c99d;
    border-radius: 5px;
}
.modal-body .subtitle23 {
    position: absolute;
    top: -24px;
    right: 235px;
    bottom: 196px;
    left: 224px;
    width: 49px;
    height: 70px;
    font:
        600 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .content_box5 {
    position: absolute;
    top: -24px;
    right: 162px;
    bottom: 196px;
    left: 281px;
    display: flex;
    flex-direction: column;
    width: 65px;
    height: 70px;
}
.modal-body .subtitle24 {
    position: absolute;
    top: 0px;
    left: 16px;
    width: 49px;
    height: 70px;
    font:
        600 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .rect2 {
    position: absolute;
    top: 14px;
    left: 0px;
    width: 43px;
    height: 43px;
    border-radius: 5px;
    outline: 1px solid #8e8e8e;
    outline-offset: -1px;
}
.modal-body .subtitle25 {
    position: absolute;
    top: -24px;
    right: 86px;
    bottom: 196px;
    left: 373px;
    width: 49px;
    height: 70px;
    font:
        600 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle26 {
    position: absolute;
    top: -24px;
    right: 12px;
    bottom: 196px;
    left: 447px;
    width: 49px;
    height: 70px;
    font:
        600 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle27 {
    position: absolute;
    top: 60px;
    right: 484px;
    bottom: 112px;
    left: 0px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle28 {
    position: absolute;
    top: 60px;
    right: 408px;
    bottom: 112px;
    left: 76px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle29 {
    position: absolute;
    top: 60px;
    right: 298px;
    bottom: 112px;
    left: 149px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle210 {
    position: absolute;
    top: 60px;
    right: 223px;
    bottom: 112px;
    left: 224px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle211 {
    position: absolute;
    top: 60px;
    right: 150px;
    bottom: 112px;
    left: 297px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle212 {
    position: absolute;
    top: 60px;
    right: 74px;
    bottom: 112px;
    left: 373px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle213 {
    position: absolute;
    top: 60px;
    right: 0px;
    bottom: 112px;
    left: 447px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle214 {
    position: absolute;
    top: 17px;
    right: 496px;
    bottom: 155px;
    left: 0px;
    width: 12px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle215 {
    position: absolute;
    top: 17px;
    right: 420px;
    bottom: 155px;
    left: 76px;
    width: 12px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle216 {
    position: absolute;
    top: 17px;
    right: 298px;
    bottom: 155px;
    left: 149px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle217 {
    position: absolute;
    top: 17px;
    right: 223px;
    bottom: 155px;
    left: 224px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle218 {
    position: absolute;
    top: 17px;
    right: 150px;
    bottom: 155px;
    left: 297px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle219 {
    position: absolute;
    top: 17px;
    right: 74px;
    bottom: 155px;
    left: 373px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle220 {
    position: absolute;
    top: 17px;
    right: 37px;
    bottom: 155px;
    left: 447px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle221 {
    position: absolute;
    top: 103px;
    right: 484px;
    bottom: 69px;
    left: 0px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle222 {
    position: absolute;
    top: 103px;
    right: 408px;
    bottom: 69px;
    left: 76px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle223 {
    position: absolute;
    top: 103px;
    right: 298px;
    bottom: 69px;
    left: 149px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle224 {
    position: absolute;
    top: 103px;
    right: 223px;
    bottom: 69px;
    left: 224px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle225 {
    position: absolute;
    top: 103px;
    right: 150px;
    bottom: 69px;
    left: 297px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle226 {
    position: absolute;
    top: 103px;
    right: 74px;
    bottom: 69px;
    left: 373px;
    width: 61px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle227 {
    position: absolute;
    top: 103px;
    right: 37px;
    bottom: 69px;
    left: 447px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle3 {
    position: absolute;
    top: 148px;
    right: 484px;
    bottom: 24px;
    left: 0px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .content_box4 {
    position: absolute;
    top: 148px;
    right: 298px;
    bottom: 24px;
    left: 140px;
    display: flex;
    flex-direction: column;
    width: 70px;
    height: 70px;
}
.modal-body .rect1 {
    position: absolute;
    top: 15px;
    left: 0px;
    width: 43px;
    height: 43px;
    background-color: #00c99d;
    border-radius: 5px;
}
.modal-body .subtitle4_box {
    position: absolute;
    top: 0px;
    left: 9px;
    width: 61px;
    height: 70px;
}
.modal-body .subtitle4 {
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: black;
}

.modal-body .subtitle31 {
    position: absolute;
    top: 148px;
    right: 408px;
    bottom: 24px;
    left: 76px;
    width: 24px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle228 {
    position: absolute;
    top: 148px;
    right: 235px;
    bottom: 24px;
    left: 224px;
    width: 49px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle229 {
    position: absolute;
    top: 148px;
    right: 162px;
    bottom: 24px;
    left: 297px;
    width: 49px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle230 {
    position: relative;
    margin: 148px 16.93% 24px auto;
    width: 49px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .subtitle231 {
    position: absolute;
    right: 49px;
    bottom: 24px;
    width: 12px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.times_col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-row: 3/5;
    width: 100%;
}
#change_consultation .times_col {
    align-items: center !important;
}
.modal-body .content_box {
    position: absolute;
    top: -17px;
    right: 295px;
    bottom: 413px;
    left: 140px;
    display: flex;
    flex-direction: column;
    width: 71px;
    height: 50px;
}
.modal-body .rect3 {
    position: absolute;
    top: 18px;
    left: 0px;
    width: 71px;
    height: 33px;
    background-color: #00c99d;
    border-radius: 5px;
}
.modal-body .subtitle6 {
    position: absolute;
    top: 0px;
    left: 9px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: white;
}
.modal-body .subtitle32 {
    position: absolute;
    top: -17px;
    right: 450px;
    bottom: 416px;
    left: 3px;
    width: 53px;
    height: 47px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle33 {
    position: absolute;
    top: -17px;
    right: 377px;
    bottom: 414px;
    left: 76px;
    width: 53px;
    height: 49px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle34 {
    position: absolute;
    top: -18px;
    right: 222px;
    bottom: 412px;
    left: 224px;
    width: 60px;
    height: 52px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle35 {
    position: absolute;
    top: -17px;
    right: 156px;
    bottom: 413px;
    left: 297px;
    width: 53px;
    height: 50px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle36 {
    position: absolute;
    top: -17px;
    right: 80px;
    bottom: 411px;
    left: 373px;
    width: 53px;
    height: 52px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle37 {
    position: absolute;
    top: -17px;
    right: 2px;
    bottom: 413px;
    left: 447px;
    width: 57px;
    height: 50px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle38 {
    position: absolute;
    top: 144px;
    right: 453px;
    bottom: 232px;
    left: 0px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle39 {
    position: absolute;
    top: 144px;
    right: 377px;
    bottom: 232px;
    left: 76px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle310 {
    position: absolute;
    top: 144px;
    right: 304px;
    bottom: 232px;
    left: 149px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle311 {
    position: absolute;
    top: 144px;
    right: 226px;
    bottom: 232px;
    left: 224px;
    width: 56px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle312 {
    position: absolute;
    top: 144px;
    right: 156px;
    bottom: 232px;
    left: 297px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle313 {
    position: absolute;
    top: 144px;
    right: 80px;
    bottom: 232px;
    left: 373px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle314 {
    position: absolute;
    top: 144px;
    right: 2px;
    bottom: 232px;
    left: 447px;
    width: 57px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle315 {
    position: absolute;
    top: 34px;
    right: 453px;
    bottom: 366px;
    left: 0px;
    width: 53px;
    height: 46px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle316 {
    position: absolute;
    top: 34px;
    right: 377px;
    bottom: 366px;
    left: 76px;
    width: 53px;
    height: 46px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle317 {
    position: absolute;
    top: 34px;
    right: 304px;
    bottom: 367px;
    left: 149px;
    width: 53px;
    height: 45px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle318 {
    position: absolute;
    top: 34px;
    right: 226px;
    bottom: 361px;
    left: 224px;
    width: 56px;
    height: 51px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle319 {
    position: absolute;
    top: 34px;
    right: 156px;
    bottom: 364px;
    left: 297px;
    width: 53px;
    height: 48px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle320 {
    position: absolute;
    top: 34px;
    right: 80px;
    bottom: 364px;
    left: 373px;
    width: 53px;
    height: 48px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle321 {
    position: absolute;
    top: 34px;
    right: 4px;
    bottom: 367px;
    left: 447px;
    width: 55px;
    height: 45px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle322 {
    position: absolute;
    top: 195px;
    right: 453px;
    bottom: 181px;
    left: 0px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle323 {
    position: absolute;
    top: 195px;
    right: 377px;
    bottom: 181px;
    left: 76px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle324 {
    position: absolute;
    top: 195px;
    right: 304px;
    bottom: 181px;
    left: 149px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle325 {
    position: absolute;
    top: 195px;
    right: 225px;
    bottom: 181px;
    left: 224px;
    width: 57px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle326 {
    position: absolute;
    top: 195px;
    right: 156px;
    bottom: 181px;
    left: 297px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle327 {
    position: absolute;
    top: 195px;
    right: 80px;
    bottom: 181px;
    left: 373px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle328 {
    position: absolute;
    top: 195px;
    right: 0px;
    bottom: 181px;
    left: 447px;
    width: 59px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle329 {
    position: absolute;
    top: 90px;
    right: 453px;
    bottom: 286px;
    left: 0px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle330 {
    position: absolute;
    top: 90px;
    right: 377px;
    bottom: 286px;
    left: 76px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle331 {
    position: absolute;
    top: 90px;
    right: 304px;
    bottom: 286px;
    left: 149px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle332 {
    position: absolute;
    top: 90px;
    right: 225px;
    bottom: 286px;
    left: 224px;
    width: 57px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle333 {
    position: absolute;
    top: 90px;
    right: 156px;
    bottom: 286px;
    left: 297px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle334 {
    position: absolute;
    top: 90px;
    right: 80px;
    bottom: 286px;
    left: 373px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle335 {
    position: absolute;
    top: 90px;
    right: 2px;
    bottom: 286px;
    left: 447px;
    width: 57px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle336 {
    position: absolute;
    top: 251px;
    right: 453px;
    bottom: 125px;
    left: 0px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle337 {
    position: absolute;
    top: 251px;
    right: 377px;
    bottom: 125px;
    left: 76px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle338 {
    position: absolute;
    top: 251px;
    right: 304px;
    bottom: 125px;
    left: 149px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle339 {
    position: absolute;
    top: 251px;
    right: 225px;
    bottom: 125px;
    left: 224px;
    width: 57px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle340 {
    position: absolute;
    top: 251px;
    right: 156px;
    bottom: 125px;
    left: 297px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle341 {
    position: absolute;
    top: 251px;
    right: 80px;
    bottom: 125px;
    left: 373px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle342 {
    position: absolute;
    top: 251px;
    right: 1px;
    bottom: 125px;
    left: 447px;
    width: 58px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle343 {
    position: absolute;
    top: 305px;
    right: 453px;
    bottom: 71px;
    left: 0px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle344 {
    position: absolute;
    top: 305px;
    right: 377px;
    bottom: 71px;
    left: 76px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle345 {
    position: absolute;
    top: 305px;
    right: 304px;
    bottom: 71px;
    left: 149px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle346 {
    position: absolute;
    top: 305px;
    right: 225px;
    bottom: 71px;
    left: 224px;
    width: 57px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle347 {
    position: absolute;
    top: 305px;
    right: 156px;
    bottom: 71px;
    left: 297px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle348 {
    position: absolute;
    top: 305px;
    right: 80px;
    bottom: 71px;
    left: 373px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle349 {
    position: absolute;
    top: 305px;
    right: 1px;
    bottom: 71px;
    left: 447px;
    width: 58px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle350 {
    position: absolute;
    top: 358px;
    right: 453px;
    bottom: 18px;
    left: 0px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle351 {
    position: absolute;
    top: 358px;
    right: 377px;
    bottom: 18px;
    left: 76px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle352 {
    position: absolute;
    top: 358px;
    right: 304px;
    bottom: 18px;
    left: 149px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle353 {
    position: absolute;
    top: 358px;
    right: 226px;
    bottom: 18px;
    left: 224px;
    width: 56px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle354 {
    position: absolute;
    top: 358px;
    right: 156px;
    bottom: 18px;
    left: 297px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle355 {
    position: absolute;
    right: 80px;
    bottom: 18px;
    width: 53px;
    height: 70px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .subtitle356 {
    position: relative;
    margin: 358px 0px 18px auto;
    width: 59px;
    font:
        500 20px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .flex_col3 {
    display: flex;
    flex-direction: column;
    margin: 120px 0px 0px;
    width: 476px;
}
.modal-body .problems_col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    grid-column: 2 / 3;
}
.modal-body .problems_title {
    display: flex;
    align-items: center;
    margin: 15px 0px 0px;
    width: 97.47%;
    height: 40px;
    font:
        700 16px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #8e8e8e;
}
.modal-body .problems {
    width: 100%;
    min-height: 146px;
    background-color: #e5e5ff;
    border-radius: 10px;
    border: none;
    overflow-y: auto;
    padding: 10px;
    resize: none;
}
.modal-body .add_files_row {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.modal-body .add_files_but {
    position: relative;
    display: flex;
    height: 20px;
    gap: 0px 15px;
    align-items: center;
    margin: 5px 0;
    cursor: pointer;
}
.modal-body .add_files_but:hover {
    border-radius: 20px;
    box-shadow: inset 0 0 10px rgba(129, 129, 238, 0.2);
}
.modal-body .add_files_but input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.modal-body .add_files_but label {
    display: flex;
    cursor: pointer;
}

.modal-body .add_files_but label i {
    margin-right: 5px;
}
.modal-body .add_file_ico {
    display: flex;
    flex-direction: column;
    width: 18px;
    height: 18px;
    background: var(--src) center center/100% 100% no-repeat;
    margin: 0 0 0 10px;
}
.modal-body .add_files_title,
.modal-body .added_files {
    display: flex;
    align-items: center;
    font:
        500 16px/1 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
    letter-spacing: -0.1px;
    margin: 0 10px 0 0;
}
.modal-body .added_files {
    align-items: normal;
    text-overflow: ellipsis;
    max-width: 250px;
    overflow: hidden;
    /* white-space: nowrap; */
    flex-direction: column;
}
.modal-body .added_files span {
    align-items: normal;
    text-overflow: ellipsis;
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    color: #4a4cd2;
    margin: 0;
}
.modal-body .patient_card {
    display: flex;
    flex-direction: column;
    margin: 0px 0px 0px 2px;
    width: 85%;
    grid-column: 2 / 3;
}
.modal-body .patient_data {
    display: flex;
    gap: 0px 20px;
}
.modal-body .patient_photo {
    width: 49px;
    height: 49px;
}
.modal-body .patient_name {
    margin: 8px 0px 17px;
    font:
        400 20px/1.2 "Inter",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.comm_col {
    display: flex;
    flex-direction: column;
    width: 100%;
    grid-column: 2 / 3;
}
.modal-body .medium_title2 {
    margin: 15px 0px 0px;
    font:
        700 25px/2.8 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
    padding: 0px;
}
.comm_row,
.day_buttons_row {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    margin: 10px 0 10px 0;
    width: 97%;
    justify-content: center;
}
.comm_but,
.comm_but_filter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 111px;
    gap: 0 7px;
    outline: 1px solid #4a4cd2;
    outline-offset: -1px;
    min-height: 44px;
    background-color: #ffffff;
    border-radius: 22px 22px 22px 22px;
    font:
        500 16px/1.5 "Inter",
        Helvetica,
        Arial,
        serif;
    cursor: pointer;
    background-color: white;
    color: #4a4cd2;
}
.comm_but.active,
.comm_but_filter.active {
    background-color: #4a4cd2;
    color: white;
}
.swiper {
    margin-left: 0 !important;
    margin-right: 0px;
}
.swiper-wrapper {
    display: flex;
    height: auto;
    gap: 0 7px;
    margin: 0 auto;
}
.day_but,
.day_but.swiper-slide {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 111px;
    gap: 0 7px;
    outline: 1px solid rgb(0, 201, 157);
    outline-offset: -1px;
    min-height: 44px;
    background-color: #ffffff;
    border-radius: 22px 22px 22px 22px;
    font:
        500 16px/1.5 "Inter",
        Helvetica,
        Arial,
        serif;
    cursor: pointer;
}
.day_but#dt_picker_date {
    display: none;
}
.day_but[id^="dt_picker_date_"] {
    display: none;
}

.day_but#to_calendar {
    width: 70px;
}

.docs_shedule .day_but,
.docs_shedule .day_row .day_but,
.docs_shedule .day_but.swiper-slide {
    width: 100px;
    min-height: 35px;
    outline: 1px solid rgb(74, 76, 210);
}
.docs_shedule .day_but[id^="to_calendar_"] {
    width: 35px;
    min-width: 35px;
}
.day_but.swiper-slide.active {
    background-color: rgb(0, 201, 157);
    color: white;
}
.docs_shedule .day_row .day_but.active,
.docs_shedule .day_but.swiper-slide .day_but.active {
    background-color: rgb(74, 76, 210);
    color: white;
}
.docs_shedule .day_but.swiper-slide.active {
    background-color: rgb(74, 76, 210);
    color: white;
}
.day_but.passive {
    background-color: white;
    color: rgb(0, 0, 0);
}

.modal-body .chat_but_ico {
    display: flex;
    align-items: center;
    gap: 0px 8px;
    margin: 10px 21px;
}
.modal-body .chat_but_box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 17px;
    min-height: 13px;
}
.modal-body .audio_but {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 111px;
    gap: 0 7px;
    min-height: 44px;
    border-radius: 22px 22px 22px 22px;
    outline: 1px solid #4a4cd2;
    outline-offset: -1px;
    cursor: pointer;
}
.modal-body .audio_but_ico {
    display: flex;
    gap: 0px 9px;
    margin: 10px 21px;
    align-items: center;
}
.modal-body .video_but {
    display: flex;
    flex-direction: column;
    width: 111px;
    border-radius: 22px 22px 22px 22px;
    outline: 1px solid #4a4cd2;
    outline-offset: -1px;
    cursor: pointer;
}
.modal-body .video_but_ico {
    display: flex;
    align-items: center;
    gap: 0px 8px;
    margin: 10px 18px 10px 20px;
}
.cost_row {
    display: flex;
    align-items: center;
    gap: 0px 25px;
    width: 100%;
    flex-wrap: wrap;
}
.cost_sum {
    font:
        700 30px/1.5 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #4a4cd2;
    width: auto;
}
.modal-body .agreement_col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0px;
    margin: 0px 22px 0px 3px;
    grid-column: 2/3;
}
.modal-body .check_box_agreement {
    display: flex;
    flex-direction: column;
    gap: 0px 12px;
    width: 100%;
}
.modal-body .wrapper6 {
    display: flex;
    flex-direction: column;
    margin: 10px 8px;
    min-height: 9px;
    background: var(--src) center center/100% 100% no-repeat;
}
.modal-body .highlight6 {
    font:
        400 18px/1.33 "Inter",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .agreement_title {
    font:
        1em/1.33 "Inter",
        Helvetica,
        Arial,
        serif;
    color: #1b1b1b;
}
.modal-body .agreement_link {
    font:
        1em/1.33 "Inter",
        Helvetica,
        Arial,
        serif;
    color: #1b1b1b;
    text-decoration: underline;
}
.modal-body .image5 {
    width: 29px;
    height: 29px;
}
.appoint,
.about_doc .to_appoint {
    display: flex;
    flex-direction: column;
    margin: 10px 0px 0px;
    width: 74.58%;
    height: 70px;
    border-radius: 38.5px 38.5px 38.5px 38.5px;
    font:
        800 22px/1.36 "Mulish",
        Helvetica,
        Arial,
        serif;
    text-align: center;
    justify-content: center;
    grid-column: 2/3;
    background-color: #d9d9d9;
    color: #9f9f9f;
    cursor: auto;
}
.appoint.active,
.about_doc .to_appoint.active {
    background-color: #00c99d;
    color: white;
    cursor: pointer;
}
.modal-body .subtitle9 {
    display: flex;
    justify-content: center;
    margin: 20px 42px 27px 43px;
    width: 270px;
    height: 30px;
}
.modal-body .flex_col8 {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    gap: 20px 0px;
    width: 1087px;
    height: 193px;
}
.modal-body .flex_col9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px 0px;
}
.modal-body .flex_row11 {
    display: flex;
    justify-content: space-between;
    gap: 0px 10px;
    width: 99.91%;
}
.modal-body .big_title {
    font:
        700 35px/2 "Mulish",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .content_box7 {
    display: flex;
    flex-direction: column;
    margin: 21px 0px 31px;
    width: 18px;
    background: var(--src) center center/100% 100% no-repeat;
}
.modal-body .image1 {
    width: 18px;
    height: 18px;
}
.modal-body .agreement {
    margin: 6px 0 0;
    color: #414040;
    margin: 3px 0 0 40px;
}

.modal-body .doc_calendar_block {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.modal-body .doc_patient_block {
    display: grid;
    gap: 0 calc(4vw);
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: repeat(6, 20%); */
}
.modal-body .doc_card {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    flex-direction: row;
    gap: 0px 20px;
    margin: 30px 0px 0px 0px;
    box-shadow: none;
    width: auto;
    grid-column: 2 / 3;
}
#change_consultation .modal-body .doc_card {
    justify-content: center;
}
.modal-body .doc_photo {
    width: 81px;
    height: 81px;
}
.modal-body .flex_col10 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px 0px;
    width: 368px;
}
.modal-body .doc_name {
    font:
        600 20px/1.2 "Inter",
        Helvetica,
        Arial,
        serif;
    color: #1c1c1c;
}
.modal-body .doc_spec {
    width: 100%;
    font:
        400 18px/1.33 "Inter",
        Helvetica,
        Arial,
        serif;
    color: #414040;
}
.modal-body .doc_work {
    width: 100%;
    font:
        500 16px/1.5 "Inter",
        Helvetica,
        Arial,
        serif;
    color: #4a4cd2;
}
.modal-body .checkbox-other {
    display: flex;
    line-height: 30px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.modal-body .checkbox-other input[type="checkbox"] {
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
}
.modal-body .checkbox-other .agreement:before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 20px;
    box-shadow: inset 0 0 20px #8a8a8a;
}

/* Checked */
.modal-body .checkbox-other input[type="checkbox"] + .agreement:after {
    content: "";
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-body .checkbox-other input[type="checkbox"]:checked + .agreement:after {
    content: "✓";
    color: #4a4cd2;
    font-size: 30px;
    font-weight: 900;
    position: absolute;
    left: 6px;
    top: -3px;
    opacity: 1;
}

/* Focus */
.modal-body .focused .agreement:before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Hover */
.modal-body .checkbox-other .agreement:hover:after {
    filter: brightness(110%);
}

/* Active */
.modal-body .checkbox-other .agreement:active:before,
.modal-body .checkbox-other .agreement:active:after {
    filter: brightness(80%);
}

/* Disabled */
.modal-body .checkbox-other input[type="checkbox"]:disabled + .agreement {
    color: #666;
    cursor: default;
}
.modal-body .checkbox-other input[type="checkbox"]:disabled + .agreement:before,
.modal-body .checkbox-other input[type="checkbox"]:disabled + .agreement:after {
    filter: grayscale(100%);
    opacity: 0.6;
}
.error_text {
    color: red;
}
@media (max-width: 1800px) {
    .about_doc .time {
        font-size: 18px;
        width: calc(4vw);
    }
}
@media (max-width: 1570px) {
    .about_doc .days_title,
    .about_doc .times_title,
    .about_doc .patient_title,
    .about_doc .cost_title,
    .about_doc .comm_title {
        font-size: 20px;
    }
    .about_doc .time {
        font-size: 16px;
    }
}
@media (max-width: 1400px) {
    .modal-body .days_title,
    .modal-body .times_title,
    .modal-body .patient_title,
    .modal-body .cost_title,
    .modal-body .comm_title,
    .about_doc .days_title,
    .about_doc .times_title,
    .about_doc .patient_title,
    .about_doc .cost_title,
    .about_doc .comm_title {
        width: auto;
    }
    .modal-content {
        width: 60%;
    }
    .close_modal {
        margin: 0;
    }
    .modal-title {
        font-size: 25px;
    }
    .modal-body .doc_patient_block {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
    }
    .modal-body .doc_patient_block .calendar_col {
        order: 2;
    }

    .modal-body .doc_patient_block .doc_card {
        order: 1;
    }

    .modal-body .doc_patient_block .times_col {
        order: 3;
    }

    .modal-body .doc_patient_block .problems_col {
        order: 4;
    }

    .modal-body .doc_patient_block .patient_card {
        order: 5;
    }

    .modal-body .doc_patient_block .comm_col {
        order: 6;
    }

    .modal-body .doc_patient_block .agreement_col {
        order: 7;
    }

    .modal-body .doc_patient_block .appoint {
        order: 8;
    }
}

@media (max-width: 800px) {
    .modal-body .days_title,
    .modal-body .times_title,
    .modal-body .patient_title,
    .modal-body .cost_title,
    .modal-body .comm_title,
    .modal-body .modal-title,
    .about_doc .days_title,
    .about_doc .times_title,
    .about_doc .patient_title,
    .about_doc .cost_title,
    .about_doc .comm_title,
    .about_doc .modal-title {
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-body .cost_sum,
    .about_doc .cost_sum {
        font-size: 25px;
    }
    .modal-body .appoint,
    .about_doc .to_appoint {
        font-size: 16px;
        height: 50px;
    }
    .modal-content {
        width: 80%;
    }
    .modal-body .comm_row,
    .modal-body .day_buttons_row,
    .about_doc .comm_row,
    .about_doc .day_buttons_row {
        flex-wrap: wrap;
        gap: 10px 12px;
    }
    .modal-body .doc_name {
        font-size: 16px;
    }
    .modal-body .doc_spec {
        font-size: 15px;
    }
    .modal-body .doc_work {
        font-size: 14px;
    }
}
@media (max-width: 550px) {
    .modal-content {
        width: 88%;
        padding: 20px 30px;
    }
    .modal-body .doc_photo {
        width: 50px;
        height: 50px;
    }
    .modal-body .doc_card {
        gap: 0 10px;
    }
}

@media (max-width: 500px) {
    .about_doc .days_title,
    .about_doc .times_title,
    .about_doc .patient_title,
    .about_doc .cost_title,
    .about_doc .comm_title,
    .about_doc .modal-title {
        font-size: 18px !important;
    }
    .about_doc .block_shedule {
        margin: 20px 0px 20px 20px !important;
    }
    .about_doc .about_col {
        margin: 10px 20px 15px 20px !important;
    }
}

.consultation_notify {
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    align-items: flex-end;
    bottom: 10px;
    width: 28%;
    height: 50%;
    right: 0;
    gap: 10px;
    overflow: scroll;
    padding: 0 10 0 10;
    z-index: -1;
}
.notification,
.new_consultation_notify {
    display: flex;
    position: fixed;
    bottom: 110px;
    right: 0;
    transform: translateX(-50%);
    background-color: rgb(0, 201, 157);
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 1s;
}

.notification_err,
.cancel_consultation_notify {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 0;
    transform: translateX(-50%);
    background-color: rgb(139, 10, 10);
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 1s;
}
.changed_consultation_notify {
    display: flex;
    position: fixed;
    bottom: 60px;
    right: 0;
    transform: translateX(-50%);
    background-color: rgb(196, 160, 0);
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 1s;
}

.new_consultation_notify,
.cancel_consultation_notify,
.changed_consultation_notify {
    position: relative;
    right: -12vw;
    bottom: auto;
    width: 100%;
}
.hidden {
    opacity: 0;
}