:root {
    --form-right-border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    --form-left-border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    --form-fon-width: 340px;
    --form-box-width: 600px;

    --form-closed: 52px;
    --form-content-padding: 40px;

    --form-input-height: 52px;
    --form-textarea-height: 108px;
    --form-input-padding: 16px;
    --form-input-margin: 16px;
    --form-input-margin-error: 32px;
    --form-input-margin-bottom: 40px;

    --form_info-icon: 56px;
    --form_info-padding: 16px;
    --form_info-padding-2: 24px;
}

@media (max-width: 1280px) and (min-width: 900px) {
    --form_info-icon: 48px;
    --form_info-padding-2: 12px;
}

@media (max-width: 899px) {
    :root {
        --form-box-width: 520px;
        --form-content-padding: 24px;

        --form_info-icon: 40px;
        --form_info-padding-2: 8px;
    }
}

@media (max-width: 599px) {
    :root {
        --form-box-width: 100%;
        --form-content-padding: 16px;

        --form_info-padding: 12px;
    }
}

.form_input_disabled input {
    pointer-events: none;
}

/* body */
.no-scroll {
    overflow: hidden;
}

/* calendar */
.form_calendar,
.form_calendar {
    width: 620px;
}

@media (max-width: 660px) {
    .form_calendar {
        width: 310px
    }
}

@media (max-width: 343px) {
    .form_calendar {
        width: 287px
    }
}

.right .form_calendar {
    right: var(--form-content-padding);
}

.left .form_calendar {
    left: var(--form-content-padding);
}

.form_calendar_content {
    width: 280px;
    flex-shrink: 0;
}

/* FORM */
.form {
    position: fixed;
    inset: 0;
    z-index: 30;

    display: flex;
    align-items: flex-start;

    background: rgba(0,0,0,.7);
}

.form.right {
    justify-content: flex-end;
}


.form.left {
    justify-content: flex-start;
}

/* fon */
.form_fon {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    max-width: var(--form-fon-width);
    overflow: hidden;
}

.form.right .form_fon {
    border-radius: var(--form-right-border-radius);
}

.form.left .form_fon {
    order: 2;
    border-radius: var(--form-left-border-radius);
}

.form_fon_picture {
    width: inherit;
    height: inherit;
}

.form_fon_picture_img {
    object-fit: cover;
    object-position: top center;

    width: inherit;
    height: inherit;

    pointer-events: none;
}

/* box */
.form_box {
    position: relative;
    z-index: 2;

    height: 100%;
    width: var(--form-box-width);

    flex-shrink: 0;

    background: var(--bg-surface);

    overflow: auto;
    -webkit-overflow-scrolling:touch;

    /* Скрываем scrollbar для IE, Edge и Firefox */
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Скрываем scrollbar для Chrome, Safari и Opera */
.form_box::-webkit-scrollbar {
    width: 0;
    display: none;
}


.form.right .form_box {
    margin-left: -24px;
    border-radius: var(--form-right-border-radius);
}

.form.left .form_box {
    order: 1;
    margin-right: -24px;
    border-radius: var(--form-left-border-radius);
}

.form_box_closed {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: var(--form-closed);
    height: var(--form-closed);

    display: flex;
    align-items: center;
    justify-content: center;
}

.form_box_closed:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background: url("../assets/close.svg") center no-repeat;
    zoom: 1;
    transition: zoom .3s ease-in-out;
}

.form_box_closed:hover:before {
    zoom: 1.2;
}

.form_box_closed:active:before {
    zoom: 1.4;
}

/* content */
.form_content {
    padding: var(--form-content-padding) 0;
}

.form_content_title {
    position: relative;
    z-index: 1;
    padding: 0 var(--form-content-padding);
    font-family: "Montserrat", sans-serif;
}

.form_content_title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;

    width: 4px;
    background: var(--primary-default);

    border-radius: 0 8px 8px 0;
}

.form_content_title_description {
    font-size: var(--text-caption);
    line-height: var(--text-caption-line);
    color: var(--primary-default);

    padding-bottom: 8px;
}

.form_content_title_text {
    font-size: var(--text-h2);
    line-height: var(--text-h2-line);
    color: var(--text-primary);
}

.form_content_box,
.form_content_box_send {
    padding: var(--form-content-padding);
    font-family: "Montserrat", sans-serif;
}

.form_content_box_description {
    font-size: var(--text-M);
    line-height: var(--text-M-line);
    color: var(--text-primary);

    margin-bottom: var(--form-input-padding);
}

/* Статус отправки сообщения */
.form_info_send {
    border: 1px solid var(--status-green);
    border-radius: var(--input-radius);
    background: rgba(51, 185, 96, 0.1);
    padding: var(--form_info-padding-2);
    display: flex;
}

.form_info_send_error.form_info_send {
    border-color: var(--status-alert);
    background: rgba(227, 34, 34, 0.1);
}

.form_info_send_left {
    width: var(--form_info-icon);
    padding-right: var(--form_info-padding-2);
}

@media (max-width: 599px) {
    .form_info_send_left {
        width: 100%;
        padding-right: 0;
        padding-bottom: var(--form_info-padding);
    }

    .form_info_send {
        flex-direction: column;
    }
}

.form_info_send_left span {
    width: var(--form_info-icon);
    height: var(--form_info-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-green);
    border-radius: var(--input-radius);
}

.form_info_send_error .form_info_send_left span {
    background: var(--status-alert);
}

.form_info_send_left span i {
    display: block;
    width: inherit;
    height: inherit;
    background: url("../assets/send_ok.svg") center no-repeat;
    background-size: 24px auto;
}

.form_info_send_title {
    font-family: "Montserrat", sans-serif;
    font-size: var(--text-h4);
    line-height: var(--text-h4-line);
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 8px;
}

.form_info_send_description {
    font-family: "Montserrat", sans-serif;
    font-size: var(--text-S);
    line-height: var(--text-S-line);
    font-weight: 400;
    color: var(--text-secondary);
}


/* Поля ввода */
.form_input,
.form_textarea {
    position: relative;

    border: 1px solid var(--border-light);
    border-radius: var(--input-radius);

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

    margin-bottom: var(--form-input-margin);

    transition: margin-bottom .1s ease-in-out;
}

/* error */
.form_input_error {
    position: absolute;
    z-index: 1;
    left: 12px;
    top: calc(100% - 16px);
    opacity: 0;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    background: rgba(227, 34, 34, 0.1);
    border-radius: 0 0 8px 8px;
    pointer-events: none;

    transition: top .1s ease-in-out;
}

.form_input_error_text {
    font-size: var(--text-XS);
    line-height: var(--text-XS-line);
    color: var(--status-alert);
    font-weight: 600;
}

.form_input.form-error {
    position: relative;
    border-color: var(--status-alert);
}

.form_input:not(.form_input_margin).form-error {
    margin-bottom: var(--form-input-margin-error);
}


.form-error .form_input_error {
    top: 100%;
    opacity: 1;
}


.form_input,
.form_input label {
    height: var(--form-input-height);
}

.form_input label {
    display: block;
}

.form_textarea {
    min-height: var(--form-textarea-height);
}

.form_input input,
.form_textarea textarea {
    position: relative;
    z-index: 2;

    width: 100%;
    box-sizing: border-box;

    border: 0;
    outline: none;
    margin: 0;
    border-radius: var(--input-radius);

    background-color: var(--bg-surface);

    color: var(--text-primary);
    font-family: "Montserrat", sans-serif;
    font-size: var(--text-S);
    line-height: var(--text-S-line);
    font-weight: 500;
}

.form_input input {
    height: var(--form-input-height);
    padding: 0 var(--form-input-padding);
}

.form_textarea textarea {
    min-height: var(--form-textarea-height);
    padding: var(--form-input-padding);
    resize: vertical;
}

.form_input_placeholder,
.form_textarea_placeholder {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3;

    pointer-events: none;

    border-radius: var(--input-radius);

    transition: top .1s ease-in-out;
}

.form_input_placeholder_text,
.form_textarea_placeholder_text {
    height: var(--form-input-height);
    padding: 0 var(--form-input-padding);

    display: inline-flex;
    align-items: center;

    font-size: var(--text-S);
    line-height: var(--text-S-line);
    color: var(--text-ordinary);
    font-weight: 500;

    transition: font-size .1s ease-in-out, line-height .1s ease-in-out, font-weight .1s ease-in-out;
}

.form_input input.is-show ~ .form_input_placeholder,
.form_input input:focus ~ .form_input_placeholder,
.form_textarea textarea:focus ~ .form_textarea_placeholder,
.form_input input.is-value ~ .form_input_placeholder,
.form_textarea textarea.is-value ~ .form_textarea_placeholder {
    background-color: var(--bg-surface);
    left: 12px;
    top: -10px;
    bottom: auto;
}

.form_input input.is-show ~ .form_input_placeholder .form_input_placeholder_text,
.form_input input:focus ~ .form_input_placeholder .form_input_placeholder_text,
.form_textarea textarea:focus ~ .form_textarea_placeholder .form_textarea_placeholder_text,
.form_input input.is-value ~ .form_input_placeholder .form_input_placeholder_text,
.form_textarea textarea.is-value ~ .form_textarea_placeholder .form_textarea_placeholder_text {
    font-size: var(--text-XS);
    line-height: var(--text-XS-line);
    font-weight: 600;
    padding: 0 4px;
    border-radius: 0;
    height: 16px;
}

.form_input_margin {
    margin-bottom: var(--form-input-margin-bottom);
}

.form_button {
    display: flex;
    justify-content: flex-end;
}

.form_input_btn {
    height: 52px;
    padding: 0 28px;
    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form_button_transparent {
    border: 1px solid var(--border-normal);
    border-radius: var(--radius-l);
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Montserrat", serif;
    color: var(--text-fixed);
    font-weight: 500;
    white-space: nowrap;
    font-size: var(--text-M);

    margin-right: 16px;
}

.form_button_transparent:hover {
    background-color: var(--bg-medium);
}

.form_button_transparent:active {
    background-color: transparent;
}

/* ИКОНКИ */
/* Лупа */
.form_icon_magnifying_glass input,
.form_icon_magnifying_glass .form_input_placeholder {
    background-image: url("../assets/magnifying_glass.svg");
    background-position: var(--form-input-padding) center;
    background-repeat: no-repeat;
    background-size: 20px auto;
}

.form_icon_magnifying_glass .form_input_placeholder {
    padding-left: 28px;
}

.form_icon_magnifying_glass input {
    padding-left: calc(28px + var(--form-input-padding));
}

.form_icon_magnifying_glass input.is-show ~ .form_input_placeholder,
.form_icon_magnifying_glass input.is-value ~ .form_input_placeholder,
.form_icon_magnifying_glass input:focus ~ .form_input_placeholder {
    padding-left: 0;
    background-image: none;
}

/* Стрелка открытия / закрытия списка */
.form_icon_arrow .form_arrow {
    content: '';
    position: absolute;
    right: var(--form-input-padding);
    top: calc(50% - 10px);
    z-index: 101;
    width: 20px;
    height: 20px;
    background-image: url("../assets/arrow_select.svg");
    transition: transform .4s ease-in-out;
    transform: rotateX(180deg);
    pointer-events: none;
}

.form_icon_arrow input.is-show ~ .form_arrow {
    transform: rotateX(0deg);
}

.form_icon_arrow input {
    padding-right: calc(20px + var(--form-input-padding));
}

/* Календарь */
.form_icon_calendar .form_calendar_icon {
    content: '';
    position: absolute;
    right: var(--form-input-padding);
    top: calc(50% - 10px);
    z-index: 101;
    width: 20px;
    height: 20px;
    background-image: url("../assets/calendar.svg");
    pointer-events: none;
}

.form_icon_calendar input {
    padding-right: calc(20px + var(--form-input-padding));
}


/* hidden */
.form_hidden {
    display: none !important;
}


/* tag */
.form_tag {
    margin-bottom: var(--form-input-padding);
    display: flex;
    flex-wrap: wrap;
}

.form_tag_service {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 6px 0 18px;
    background-color: var(--primary-light);
    border-radius: var(--radius-l);

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

    font-size: var(--text-S);
    line-height: var(--text-S-line);
    color: var(--text-ordinary);
    font-weight: 400;

    margin-right: 16px;
    margin-bottom: 8px;
}

.form_tag_service_del {
    display: flex;
    width: 20px;
    height: 20px;
    background: url("../assets/close.svg") center no-repeat;
    background-size: 15px auto;
    margin-left: 5px;
    cursor: pointer;
}

/* select */
.form_input_choice {
    position: absolute;
    z-index: 500;
    width: 100%;
    left: -1px;
    top: calc(100% - 8px);
    padding-top: 8px;

    background: var(--bg-surface);

    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 var(--input-radius) var(--input-radius);

    max-height: 0;
    opacity: 0;

    overflow: auto;
    -webkit-overflow-scrolling:touch;

    scrollbar-color: var(--bg-medium) transparent;
    scrollbar-width: thin;

    transition: max-height .3s ease-in-out, .3s opacity 0s ease-in-out;
}

.form_input_choice::-webkit-scrollbar {
    width: 12px;
}

.form_input_choice::-webkit-scrollbar-track {
    background-color: transparent;
}

.form_input_choice::-webkit-scrollbar-thumb {
    box-shadow: var(--bg-medium);
    border-radius: 4px;
}

.form-error .form_input_choice {
     border-color: var(--status-alert);
 }

input.is-show ~ .form_input_choice {
    max-height: 220px;
    opacity: 1;

    transition: max-height .3s ease-in-out, .1s opacity 0s ease-in-out;
}

.form_input_choice li {
    height: var(--form-input-height);
    padding: 0 var(--form-input-padding);

    display: flex;
    align-items: center;
}

.form_input_choice li span {
    font-family: "Montserrat", sans-serif;

    font-size: var(--text-S);
    line-height: var(--text-S-line);
    color: var(--text-ordinary);
    font-weight: 500;
}

.form_input_choice li span.active {
    color: var(--text-fixed);
}

.form_input_choice_selected {
    position: relative;
    display: block;
    margin-right: 10px;
    padding: 2px;
    cursor: pointer;
}

.form_input_choice_selected i {
    position: relative;
    z-index: 1;
    display: block;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid var(--border-light);
    border-radius: 7px;
}

.form_input_choice_selected.selected i {
    background: url("../assets/check.svg") center no-repeat;
    background-size: 19px auto;
}

.form_input_choice li:hover {
    background: var(--primary-light);
    cursor: pointer;
}

.form_input_choice li:hover .form_input_choice_selected:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--primary-tonal);
    border-radius: 50%;
}

.form_input_choice li:hover .form_input_choice_selected i {
    border-color: var(--text-link);
}

.form_input_choice li mark {
    background: var(--text-link);
}

/* checkbox */
.form_checkbox {
    margin-bottom: var(--form-input-margin);
}

.form_checkbox > div {
    display: flex;
    align-items: flex-start;
}

.form_checkbox_custom {
    padding-right: 10px;
}

.form_checkbox_custom span {
    position: relative;
    z-index: 1;
    display: block;
    width: 24px;
    height: 24px;
}

.form_checkbox_custom span:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    display: block;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid var(--border-light);
    border-radius: 7px;
}

.form_checkbox_custom span:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--bg-inactive);
    border-radius: 50%;
}

.form_checkbox_custom label:hover span:after {
    border-color: var(--text-link);
}

.form_checkbox_custom input {
    display: none;
}

.form_checkbox_custom input:checked ~ span i {
    position: absolute;
    z-index: 3;
    display: block;
    width: 24px;
    height: 24px;
    background: url("../assets/check.svg") center no-repeat;
    background-size: 19px auto;
}

.form_checkbox_text {
    font-family: "Montserrat", serif;
    font-size: var(--text-S);
    color: var(--text-secondary);
    line-height: var(--text-S-line);
}

.form_checkbox_text,
.form_checkbox_text .link {
    font-weight: 400;
}

.form-error.form_checkbox {
    padding: 5px;
    border: 1px solid var(--status-alert);
}

/* animation */
.form.animation.open {
    visibility: visible;
}

.form.animation:not(.open) {
    visibility: hidden;
    animation: formVisibility .6s ease-in-out;
}

.form:not(.animation) {
    display: none;
}


/* right */
.form.right.animation.open .form_fon {
    right: 0;
    animation: formAnimationRight .8s ease-in-out;
}

.form.right.animation:not(.open) .form_fon {
    right: -100%;
    animation: formAnimationRightReverse .6s ease-in-out;
}


.form.right.animation.open .form_box {
    right: 0;
    animation: formAnimationRight .6s ease-in-out;
}


.form.right.animation:not(.open) .form_box {
    right: -100%;
    animation: formAnimationRightReverse .8s ease-in-out;
}

/* left */
.form.left.animation.open .form_fon {
    left: 0;
    animation: formAnimationLeft .8s ease-in-out;
}

.form.left.animation:not(.open) .form_fon {
    left: -100%;
    animation: formAnimationLeftReverse .6s ease-in-out;
}


.form.left.animation.open .form_box {
    left: 0;
    animation: formAnimationLeft .6s ease-in-out;
}


.form.left.animation:not(.open) .form_box {
    left: -100%;
    animation: formAnimationLeftReverse .8s ease-in-out;
}


@keyframes formAnimationRight {
    from { right: -100% }
    to { right: 0; }
}

@keyframes formAnimationRightReverse {
    from { right: 0}
    to { right: -100% ; }
}


@keyframes formAnimationLeft {
    from { left: -100% }
    to { left: 0; }
}

@keyframes formAnimationLeftReverse {
    from { left: 0}
    to { left: -100% ; }
}

@keyframes formVisibility {
    0% { visibility: visible; }
    99% { visibility: visible; }
    100% { visibility: hidden; }
}