/* @import url("/view/st/css/font.css"); */
@import url("/view/st/css/reset.css");

:root {
    --width-aside: 950px;
    --width-widgets: 270px;
    --main-text-color: #292f37;
    /* --primary-color: rgb(15, 93, 228); */
    --primary-color: #8C6F4D;
    --secondary-color: #FFA841;
    --primary-color-light: rgba(140, 111, 77, .5);
    --primary-color-very-light: rgba(140, 111, 77, .1);
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: var(--main-text-color);
}

header {
    height: 50px;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

header .logo {
    /* color: rgb(15, 93, 228); */
    color: var(--secondary-color);
    font-size: 1.2rem;
    font-weight: 700;
}

header .header_buttons {
    /* color: rgb(15, 93, 228); */
    color: #8C6F4D;
    display: flex;
    align-items: center;
    gap: 30px;
    user-select: none;
}

header .header_buttons .header_widget {
    position: relative;
}

header .header_buttons .header_widget .title {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    height: 25px;
}

header .header_buttons .header_widget .title .flag {
    width: 16px;
    height: 16px;
}

header .header_buttons .name {
    font-weight: 500;
}

header .header_buttons .widget_content {
    display: none;
    position: absolute;
    top: 200%;
    right: -10px;
    background: #f7f7f7;
    width: 300px;
    max-height: 500px;
    min-height: 150px;
    box-shadow: 0 0 5px rgba(0,0,0,.35);
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 5px;
    z-index: 99;
    color: var(--main-text-color);
}

header .header_buttons .widget_content::after {
    content: '';
    position: absolute;
    right: 8px;
    top: -20px;
    border: 10px solid transparent;
    border-bottom: 10px solid #f7f7f7;
}

header .header_buttons .header_widget .title .arrow_down {
    transition: transform .3s ease-in-out;
}

header .header_buttons .header_widget.open .title .arrow_down {
    transform: rotateX(180deg);
}

header .header_buttons .header_widget.open .widget_content {
    display: block;
    animation: headerWidgetFadeIn .2s ease-in-out forwards;
}

@keyframes headerWidgetFadeIn {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

header .header_buttons .header_widget .no_notifications {
    display: flex;
    height: 100px;
    font-size: .85rem;
    justify-content: center;
    align-items: center;
}

header .header_buttons .header_widget ul.language_list {
    margin: -10px;
    overflow: auto;
    max-height: 350px;
}

header .header_buttons .header_widget ul.language_list li {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
}

header .header_buttons .header_widget ul.language_list li:hover {
    background-color: #ddd;
}

.input_field {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.input_field .label {
    font-size: .8rem;
}

.input_field input[type="text"],
.input_field input[type="password"] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
}

header .header_buttons .header_widget ul.currencies_list {
    margin: 0 -10px -10px -10px;
    max-height: 300px;
    list-style: none;
    overflow: auto;
    border-top: 1px solid #ccc;
}

header .header_buttons .header_widget ul.currencies_list li {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

header .header_buttons .header_widget ul.currencies_list li:hover {
    background-color: #ddd;
}

header .header_buttons .header_widget ul.currencies_list li .title {
    font-weight: 400;
}

header .header_buttons .header_widget ul.currencies_list li .name {
    font-weight: 300;
}

header .header_widget .header_icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

header .header_widget .header_icon.currency {
    background-image: url(/view/st/images/new_icons/icon_Валюта.svg);
}

header .header_widget .header_icon.quastion {
    background-image: url(/view/st/images/new_icons/icon_Задать\ вопрос.svg);
}

header .header_widget .header_icon.signin {
    background-image: url(/view/st/images/new_icons/icon_Войти.svg);
}

header .header_widget .header_icon.language {
    background-image: url(/view/st/images/new_icons/icon_Язык.svg);
}

.light_button {
    text-decoration: none;
    color: var(--primary-color);
    background-color: var(--primary-color-very-light);
    display: flex;
    justify-content: center;
    padding: 15px 0;
    margin: 10px 0;
    font-weight: 400;
    border-radius: 5px;
}

.light_button:hover {
    opacity: .8;
}

header .header_buttons .header_widget ul.menu_list {
    list-style: none;
    padding: 10px;
    margin: -10px 0;
}

header .header_buttons .header_widget ul.menu_list li {
    padding: 10px 0;
    font-weight: 400;
}

header .header_buttons .header_widget.signin span.title {
    font-weight: 400;
    margin: 0 10px;
    cursor: default;
}

header .header_buttons .header_widget.signin .forgot_pass {
    text-align: center;
    font-weight: 400;
}

header .header_buttons .header_widget.signin button {
    width: calc(100% - 20px);
    margin: 10px;
    margin-bottom: 0;
}

header .header_buttons .header_widget.signin .signin_text {
    font-size: .8rem;
    color: #777;
    text-align: center;
}

header .header_buttons .header_widget.signin .social_networks {
    margin: 20px 10px;
    display: flex;
    justify-content: space-around;
}

main {
    flex: 1;
    background-color: #efefef;
    display: flex;
}

aside {
    width: var(--width-aside);
    display: flex;
    flex-direction: column;
}

aside[data-mode="map"] .sidebar_top .search .calendar_img {
    display: none;
}

aside[data-mode="map"] .sidebar_top .search .info {
    margin: 5px;
}

aside[data-mode="map"] .sidebar_top .search .info .search_box {
    flex-direction: column;
}

aside[data-mode="map"] .sidebar_top .search .info .search_box .panel {
    width: 100%;
}

aside[data-mode="map"] .sidebar_top .search .info .search_box .panel:not(:nth-of-type(4)) {
    border: 0;
    border-bottom: 1px solid #eee;
}

aside[data-mode="map"] .sidebar_top .search .info .search_box .panel.search_btn {
    border-radius: 0 0 5px 5px;
}

aside[data-mode="map"] .sidebar_content {
    transform: none;
    width: unset;
    position: relative;
}

aside[data-mode="map"] .sidebar_content #widgets {
    position: relative;
    width: unset;
}

aside[data-mode="map"] .sidebar_content #hotels_list {
    margin: 0 10px 20px 10px;
}

aside[data-mode="map"] .sidebar_content #widgets {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 99;
    width: unset;
    background: #eee;

    transform: translateX(-100%);
    transition: transform .5s ease-in-out;
}

aside[data-mode="map"] #hotels_list .hotel_card {
    flex-direction: column;
    margin: 0;
}

aside[data-mode="map"] #hotels_list .hotel_card .hotel_images {
    width: 100%;
    height: 200px;
    border-radius: 5px 5px 0 0;
}

aside[data-mode="map"] #hotels_list .hotel_card .main_info {
    margin: 10px 10px 0 10px;
    border: 0;
}

aside[data-mode="map"] #hotels_list .hotel_card .hotel_price {
    width: unset;
    margin: 0 10px 10px 10px;
    padding: 0;
}

aside[data-mode="map"] #hotels_list .hotel_card .hotel_price .price_rang {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

aside[data-mode="map"] #hotels_list .hotel_card .hotel_price .link-button {
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

aside .sidebar_top {
    display: flex;
    flex-direction: column;
}

aside .sidebar_top .search {
    display: flex;
    /* margin: 0 10px 5px 20px; */
    margin: 10px 10px 5px 20px;
}

aside .sidebar_top .search .calendar_img {
    background-image: url(/view/st/images/new_icons/image.hotel.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    margin: 10px;
}

aside .sidebar_top .search .info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 10px 10px 10px 0;
    flex: 1;
}

aside .sidebar_top .search .info .search_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

aside .sidebar_top .search .info .search_title button {
    height: fit-content;
    padding: 2px 7px;
    font-size: 1.2rem;
}

.search_box {
    display: flex;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
}

.search_box.hide {
    display: none;
}

.search_box .panel {
    width: 25%;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.search_box .guest-picker {
    top: calc(100% + 4px);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 5px;
}

.search_box .panel.search_btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
}

.search_box .panel.search_btn .main_button {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
}

.search_box .panel.search_btn .clear_button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,.6);
    border-radius: 0 5px 5px 0;
}

.search_box .panel:not(:nth-of-type(4)):hover {
    opacity: .8;
    background-color: rgba(0, 0, 0, .1);
}

.search_box .panel:not(:nth-of-type(4)) {
    border-right: 1px solid #eee;
}

.search_box .panel span {
    font-size: .8rem;
}

.search_box .panel .data {
    font-weight: 400;
}

.search_box .button-container-calendar button {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.search_box .date-picker.selected {
    background-color: var(--primary-color);
}

.search_box .date-picker.range {
    background-color: var(--primary-color-light);
}

aside .sidebar_top .sort_buttons {
    display: flex;
    justify-content: space-between;
    margin: 0 10px 5px 20px;
}

aside .sidebar_top .sort_buttons .left_btns, aside .sidebar_top .sort_buttons .right_btns {
    display: flex;
    gap: 10px;
}

aside .sidebar_top .sort_btn {
    background: #fff;
    padding: 7px 10px;
    border-radius: 5px;
    display: flex;
    gap: 5px;
    align-items: center;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    position: relative;
}

aside .sidebar_top .sort_btn.price-picker span.down {
    width: 13px;
    height: 13px;
    background-image: url(/view/st/images/icons/down.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotateX(0deg);
    transition: transform .3s ease-in-out;
}

aside .sidebar_top .sort_btn.price-picker.active span.down {
    transform: rotateX(180deg);
}

aside .sidebar_top .sort_btn.active {
    background-color: #bfbfbf;
    color: #444;
    box-shadow: inset 0 3px 5px rgb(41 47 55 / 20%);
}

aside .sidebar_top .sort_btn select {
    border: none;
    background-color: transparent;
    font-weight: 400;
    cursor: pointer;
}

aside .sidebar_top .sort_btn.map_btn {
    display: none;
    width: 47px;
}

aside .sidebar_top .sort_btn.map_btn svg {
    fill: var(--main-text-color);
}

aside .sidebar_top .link_btns {
    padding: 5px 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-height: 40px;
    overflow: hidden;
}

aside .sidebar_top .link_btns a.link_ext {
    background: #D5D9F2;
    font-size: .8rem;
    text-decoration: none;
    color: #747DA5;

    padding: 7px 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

aside .sidebar_top .link_btns a.link_ext:hover {
    opacity: .8;
}

#hotels_path {
    background-color: #fff;
    margin: 5px 10px 5px 20px;
    border-radius: 5px;
    font-size: .9rem;
    display: flex;
}

#hotels_path .path_item {
    padding: 10px 20px 10px 10px;
    position: relative;
}

#hotels_path .path_item:not(:last-child)::after {
    right: 3px;
    width: 6px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' fill='none'%3E%3Cpath fill='%23868686' fill-rule='evenodd' d='M3.5 5L.3 1.8 1.4.7 5.7 5 1.4 9.3.3 8.2 3.5 5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    content: '';
    height: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
}

aside .sidebar_content {
    display: flex;
    transform: translateX(calc(-1 * (var(--width-widgets) - 20px)));
    width: calc(100% + (var(--width-widgets) - 20px));
    margin-top: 10px;
    /* transition: width .5s ease-in-out, transform .5s ease-in-out; */
}

aside .sidebar_content.open {
    animation: open-widgets .5s ease-in-out forwards;
    /* width: 100%;
    transform: translateX(0); */
}

aside .sidebar_content.close {
    animation: close-widgets .5s ease-in-out forwards;
    /* width: 100%;
    transform: translateX(0); */
}

aside[data-mode="map"] .sidebar_content.close,
aside[data-mode="map"] .sidebar_content.open {
    animation: none;
}

aside[data-mode="map"] .sidebar_content.open #hotels_list {
    display: none;
}

aside[data-mode="map"] .sidebar_content.open #widgets {
    transform: translateX(0);
}

@keyframes open-widgets {
    0% {
        width: calc(100% + (var(--width-widgets) - 20px));
    }
    50% {
        width: 100%;
        transform: translateX(calc(-1 * (var(--width-widgets) - 20px)));
    }
    100% {
        width: 100%;
        transform: translateX(0);
    }
}

@keyframes close-widgets {
    0% {
        width: 100%;
        transform: translateX(0);
    }
    50% {
        width: 100%;
        transform: translateX(calc(-1 * (var(--width-widgets) - 20px)));
    }
    100% {
        width: calc(100% + (var(--width-widgets) - 20px));
        transform: translateX(calc(-1 * (var(--width-widgets) - 20px)));
    }
}

aside .sidebar_content #widgets {
    width: var(--width-widgets);
    padding: 0 20px;
    position: relative;
}

aside .sidebar_content #widgets .show_results_btn {
    position: absolute;
    z-index: 9;
    left: calc(100% - 20px);
    background: rgb(15, 93, 228);
    color: #fff;
    padding: 7px 10px;
    top: calc(552px - 10px);
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 5px rgb(0 0 0 / 70%);
}

aside .sidebar_content #widgets .show_results_btn::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 10px solid transparent;
    border-right: 10px solid rgb(15, 93, 228);
}

#widgets .widgets_title {
    display: none;
}

.star_empty {
    min-width: 16px;
    height: 16px;
    background: url(/view/st/images/icons/star_empty.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.star_filled {
    min-width: 16px;
    height: 16px;
    background: url(/view/st/images/icons/star_filled.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.link {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.link:hover {
    opacity: .8;
}

aside .sidebar_content #hotels_list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    margin-bottom: 30px;
    transition: opacity .45s ease-in-out;
}

aside .sidebar_content #hotels_list .message_box {
    background: rgb(250, 200, 100);
    padding: 20px;
    border-radius: 5px;
    margin-right: 10px;
    text-align: center;
}

#hotels_list .hotel_card, aside .sidebar_top .search {
    margin-right: 10px;
    padding: 5px 5px 8px 5px;
    background-color: #fff;
    border-radius: 5px;
    min-height: 130px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

#hotels_list .hotel_card {
    padding: 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    transition: transform .2s ease-in-out;
}

#hotels_list .hotel_card:hover {
    box-shadow: 0 3px 5px rgba(15, 93, 228, .7);
    transform: translate(-2px, -2px);
}

#hotels_list .hotel_card.selected {
    background-color: #292f37;
    color: #fff;
    border: 3px solid #FFA841;
}

#hotels_list .hotel_card .hotel_images {
    width: 200px;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#hotels_list .hotel_card .hotel_images .slide img {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}

.hotel_card .main_info {
    flex: 1;
    margin: 20px 30px;
    padding-right: 5px;
    border-right: 1px solid #dedede;
}

.hotel_card .main_info .name {
    font-weight: 500;
    font-size: 1.2rem;
}

.hotel_card .hotel_price {
    width: 23%;
    margin: 20px 0;
    padding-right: 30px;
    min-width: 185px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hotel_card .hotel_price .price_value {
    font-size: 1.4rem;
    font-weight: 500;
}

.hotel_card .hotel_price .price_value_description {
    font-size: .8rem;
}

.stars {
    display: flex;
    gap: 3px;
}

.hotel_card .main_info .reviews_and_type {
    font-size: .85rem;
    margin: 10px 0;
}

.location_info {
    font-size: .85rem;
    display: flex;
    gap: 10px;
}

.location_info .info {
    display: flex;
    align-items: center;
    gap: 3px;
}

.location_info .info .icon {
    width: 16px;
    height: 16px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.location_info .info .icon.to_center {
    background-image: url(/view/st/images/new_icons/icon_1.svg);
}

.location_info .info .icon.address {
    background-image: url(/view/st/images/new_icons/icon_2.svg);
}

/* .location_info .info svg {
    min-width: 16px;
} */

.hotel_card .main_info ul.services {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
}

.hotel_card .main_info ul.services li {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center;
}

.hotel_card .main_info ul.services li:hover {
    background-color: rgba(0, 0, 0, .1);
}

.hotel_card .main_info ul.services li.internet {
    background-image: url(/view/st/images/new_icons/icon_WIFI3.svg);
}

.hotel_card .main_info ul.services li.fiteness {
    background-image: url(/view/st/images/new_icons/icon_FITNES.svg);
}

.hotel_card .main_info ul.services li.parking {
    background-image: url(/view/st/images/new_icons/icon_3.svg);
}

.hotel_card .main_info ul.services li.shuttle {
    background-image: url(/view/st/images/new_icons/icon_5.svg);
}

.hotel_card .main_info ul.services li.pool {
    background-image: url(/view/st/images/new_icons/icon_4.svg);
}

.hotel_card .main_info ul.services li.pets {
    background-image: url(/view/st/images/new_icons/icon_7.svg);
}

.hotel_card .main_info ul.services li.air-conditioning {
    background-image: url(/view/st/images/new_icons/icon_KONDI.svg);
}

.hotel_card .main_info ul.services li.barber-shop {
    background-image: url(/view/st/images/new_icons/barber-shop.svg);
}

.hotel_card .main_info ul.services li.busyness {
    background-image: url(/view/st/images/new_icons/busyness.svg);
}

.hotel_card .main_info ul.services li.disabled-support {
    background-image: url(/view/st/images/new_icons/disabled-support.svg);
}

.hotel_card .main_info ul.services li.kids {
    background-image: url(/view/st/images/new_icons/icon_6.svg);
}

.hotel_card .main_info ul.services li.kitchen {
    background-image: url(/view/st/images/new_icons/kitchen.svg);
}

.hotel_card .main_info ul.services li.meal {
    background-image: url(/view/st/images/new_icons/meal.svg);
}

.hotel_card .rating_stars {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 5px 0;
}

.hotel_card .rating_stars .rating {
    height: 23px;
    min-width: 54px;
    background-image: url(/view/st/images/icons/rating.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    padding-left: 5px;
    color: #fff;
    font-weight: 500;
}

.hotel_card .rating_stars .rating_arrow {
    height: 23px;
    min-width: 18px;
    background-image: url(/view/st/images/icons/rating_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* .hotel_card .rating {
    position: absolute;
    right: 10px;
    top: 0;
    width: 46px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='60' fill='none'%3E%3Cpath fill='%2325ac03' d='M3 0h40v50.8a2 2 0 01-2.2 2L23.2 51a2 2 0 00-.4 0L5.2 52.8a2 2 0 01-2.2-2V0z'/%3E%3C/svg%3E");
    background-size: cover;
    filter: drop-shadow(0 3px 3px rgba(37, 172, 3, 0.6));
    color: #fff;
    font-weight: 800;
    display: flex;
    justify-content: center;
    padding-top: 16px;
} */

aside .seo_text {
    margin: 10px 20px 20px 20px;
}

aside .seo_text p {
    margin-right: -10px;
    padding: 5px 0;
    text-align: justify;
}

aside .seo_links {
    display: flex;
    flex-direction: column;
}

aside .seo_links .links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 10px 10px 20px;
    gap: 10px;
}

aside .seo_links .links a {
    text-decoration: none;
    color: var(--primary-color);
}

aside .seo_links .show_more_btn {
    margin: 5px auto;
}

main #map {
    width: calc(100vw - var(--width-aside));
    position: sticky;
    height: 100vh;
    top: 0;
}

main .search__block {
    width: calc(100vw - var(--width-aside));
    position: absolute;
    right: 0;
}

main .search__block .search-wrapper {
    position: absolute;
}

footer {
    background-color: #efefef;
    font-size: .9rem;
}

footer .page_narrow {
    margin-top: 0;
}

footer .footer_top {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

footer .footer_top .left_column {
    display: flex;
    align-items: center;
    gap: 30px;
}

footer .footer_top .logo {
    color: rgb(15, 93, 228);
    font-size: 2rem;
    font-weight: 700;
}

footer .footer_top .left_column .links a {
    margin-right: 20px;
}

footer .footer_top .social_networks a {
    text-decoration: none;
    margin-left: 10px;
}

footer .links_block {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 10px;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

footer .title {
    font-size: 1rem;
    margin-bottom: 10px;
}

footer .links_block .column ul {
    list-style: none;
}

footer .links_block .column ul li {
    margin-bottom: 10px;
}

footer .links_block .column.mobile_app {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

footer .links_block .column.mobile_app p {
    line-height: 1.5rem;
}

footer .links_block .column.mobile_app .app_stores {
    margin-top: 10px;
}

footer .security {
    padding: 10px 0;
}

footer .security .partners {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

footer .security .img_partner {
    width: 70px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

footer .security .img_partner.visa {
    background-image: url(/view/st/images/icons/visa_secure.svg);
}

footer .security .img_partner.mastercard {
    background-image: url(/view/st/images/icons/mastercard-secure.svg);
}

footer .security .img_partner.mir {
    background-image: url(/view/st/images/icons/mir.svg);
}

footer .security .img_partner.thawte {
    background-image: url(/view/st/images/icons/thawte.svg);
}

footer .security .img_partner.dss {
    background-image: url(/view/st/images/icons/dss.svg);
}

footer .policy {
    padding: 10px 0;
}

footer .policy a {
    color: #777;
    text-decoration: none;
}

.page_narrow {
    width: 1200px;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page_narrow #hotels_path {
    margin: 0;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.hotel_title {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    /* align-items: center; */
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.hotel_title .location_info {
    flex-direction: column;
    margin-top: 5px;
    gap: 5px;
}

.hotel_title .right_column_title {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: end;
}

.hotel_title .right_column_title .phone a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 400;
}

.hotel_title .report_title {
    display: flex;
    gap: 5px;
    align-items: center;
}

.hotel_title .report_title .rating, .hotel_widgets .stars_and_rating .rating {
    background-color: #25ac03;
    color: #fff;
    padding: 3px 5px;
    font-weight: 500;
    border-radius: 3px;
}

.page_narrow .images_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    height: 400px;
    gap: 5px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.page_narrow .images_grid .img {
    /* background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: box-shadow .2s ease-in-out, opacity .2s ease-in-out;
    overflow: hidden;
    position: relative;
}

.page_narrow .images_grid .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page_narrow .images_grid .img span {
    position: absolute;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 500;
    text-shadow: 0 0 3px black;
}

.page_narrow .images_grid .img:hover {
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .8);
    opacity: .95;
}


.page_narrow .images_grid .img:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.page_narrow .content_wrapper {
    display: flex;
    gap: 10px;
}

.page_narrow .content_wrapper .left_container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page_narrow .content_wrapper .hotel_content {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}


.page_narrow .content_wrapper .personal_data {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.page_narrow .content_wrapper .personal_data .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_narrow .content_wrapper .personal_data .header .error_msg {
    color: #a00;
    text-shadow: 0 0 7px rgb(255 0 0 / 60%);
}

.page_narrow .content_wrapper .personal_data .data_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.page_narrow .content_wrapper .personal_data .data_fields .phone_input {
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.page_narrow .content_wrapper .personal_data .data_fields .phone_input .custom-select {
    display: flex;
    border-right: 1px solid #ccc;
    margin-right: 10px;
}

.page_narrow .content_wrapper .personal_data .data_fields .phone_input .custom-select .select-selected {
    font-weight: inherit;
    padding-right: 30px;
}

.page_narrow .content_wrapper .personal_data .data_fields .phone_input .custom-select .select-selected:after {
    top: 3px;
}

.page_narrow .content_wrapper .personal_data .data_fields .phone_input .custom-select .select-items {
    min-width: auto;
    max-height: 200px;
    overflow: auto;
}

.page_narrow .content_wrapper .personal_data .comment button {
    padding: 0 17px 0 0;
    background: transparent;
    color: #292f37;
    font-size: .9rem;
    position: relative;
}

.page_narrow .content_wrapper .personal_data .comment button::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 11px;
    background-image: url(/view/st/images/icons/down.svg);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: right;
    transition: transform .2s ease-in-out;
}

.page_narrow .content_wrapper .personal_data .comment textarea {
    resize: vertical;
    padding: 5px;
    width: 100%;
    margin: 10px 0;
    display: none;
}

.page_narrow .content_wrapper .personal_data .comment.show button::after {
    transform: rotateX(180deg);
}

.page_narrow .content_wrapper .personal_data .comment.show textarea {
    display: block;
}

.page_narrow .content_wrapper .widget {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.page_narrow .content_wrapper .payment {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.page_narrow .content_wrapper .payment .payment_types {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}

.page_narrow .content_wrapper .payment .payment_types .inn_field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page_narrow .content_wrapper .payment .payment_types .inn_field .check_status {
    display: flex;
    flex-direction: column;
}

.page_narrow .content_wrapper .payment .payment_types .inn_field .check_status i.address {
    font-size: .9rem;
}

.page_narrow .content_wrapper .payment .payment_types .inn_field button {
    padding: 0 10px;
    font-size: .9rem;
    height: 30px;
}

.page_narrow .content_wrapper .payment .payment_types .input_field {
    padding: 2px;
    font-size: 1rem;
    width: 160px;
    flex: unset;
}

.page_narrow .content_wrapper .payment .payment_types .input_field input {
    margin: 0;
}

.page_narrow .content_wrapper .payment .radio_control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 25px;
}

.page_narrow .content_wrapper .payment input[type="radio"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    min-width: 1.15rem;
    min-height: 1.15rem;
    border: 0.15rem solid currentColor;
    border-radius: 50%;
    /* transform: translateY(-0.075rem); */

    display: grid;
    place-content: center;
}

.page_narrow .content_wrapper .payment input[type="radio"]::before {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--primary-color);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}

.page_narrow .content_wrapper .payment input[type="radio"]:checked::before {
    transform: scale(1);
}

.page_narrow .content_wrapper .booking_main_button {
    display: flex;
    justify-content: end;
}

.page_narrow .content_wrapper .booking_main_button button {
    font-size: 1.5rem;
}

.page_narrow .content_wrapper .hotel_content .hotel_title_search {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_narrow .content_wrapper .hotel_content .hotel_title_search button {
    height: fit-content;
}

.content_wrapper .hotel_content .hotel_rooms {
    display: flex;
    flex-direction: column;
}

.content_wrapper .hotel_content .hotel_rooms .room_card {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.content_wrapper .hotel_content .hotel_rooms .room_card:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.content_wrapper .hotel_content .hotel_rooms .room_card .room_top {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

.content_wrapper .hotel_content .hotel_rooms .room_card .room_slider {
    height: 200px;
    flex-basis: 250px;
    min-width: 250px;
    border-radius: 5px;
}

.content_wrapper .hotel_content .room_slider .slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.hotel_content .hotel_rooms .room_card .room_info {
    flex: 1;
    padding: 20px;
}

.hotel_content .hotel_rooms .room_card .room_info .room_name {
    font-size: 1.3rem;
    font-weight: 400;
}

.hotel_content .hotel_rooms .room_card .room_info .room_description {
    font-size: .95rem;
    margin-top: 10px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    box-orient: vertical;
}

.hotel_content .hotel_rooms .room_card .room_info .count_rooms {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    margin-right: -20px;
}

.hotel_content .hotel_rooms .room_card .room_functions {
    display: grid;
    grid-template-columns: 150px 1fr 100px 170px 110px;
    gap: 5px;
    font-size: .85rem;
    border-top: 1px solid #ccc;
    padding: 3px;
}


.hotel_content .hotel_rooms .room_card .room_functions.booking {
    grid-template-columns: 150px 1fr 100px 170px;
}

.page_narrow .content_wrapper .input_field {
    /* margin: 10px; */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
}

.page_narrow .content_wrapper .input_field .label {
    font-size: .8rem;
}

.page_narrow .content_wrapper .input_field input[type="text"],
.page_narrow .content_wrapper .input_field input[type="password"] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    margin-top: 2px;
}

.hotel_content .hotel_rooms .room_card .room_functions .func_name .pay_online {
    width: 20px;
    height: 20px;
    margin: 5px 0;
    position: relative;
}

.hotel_content .hotel_rooms .room_card .room_functions .func_name .pay_online:hover::after {
    content: attr(data-title);
    position: absolute;
    top: -43px;
    left: -50px;
    right: -50px;
    overflow: hidden;
    padding: 3px 5px;
    text-align: center;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .85);
    backdrop-filter: blur(10px);
    color: #fff;
}

.hotel_content .hotel_rooms .room_card .room_functions .func_name .pay_online svg {
    fill: var(--primary-color);
}

.hotel_content .hotel_rooms .room_card .room_functions .guest_name {
    grid-column: 1/5;
    display: flex;
    gap: 10px;
}

.hotel_content .hotel_rooms .room_card .room_functions .func_desc span.valid {
    color: #d50;
    font-weight: 500;
}

/* .hotel_content .hotel_rooms .room_card .room_functions:last-child {
    border-bottom: 1px solid #ccc;
} */

.hotel_content .hotel_rooms .room_card .room_functions > div:not(:last-child) {
    padding: 5px;
    height: fit-content;
}



.func_price {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: end;
}

.func_price .price_info {
    width: 17px;
    height: 17px;
    background-image: url(/view/st/images/icons/info.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    opacity: .7;
    cursor: pointer;
    /* transition: opacity .2s ease-in-out; */
}

.func_price > span {
    font-size: 1.4rem;
    font-weight: 400;
}

.func_price .price_info:hover {
    opacity: 1;
}

.func_price .price_info:hover .price_info_content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.func_price .price_info:hover .price_info_content .item {
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, .05);
}

.func_price .price_info .price_info_content {
    position: absolute;
    bottom: calc(100% + 10px);
    left: -10px;
    background: rgba(0,0,0,.8);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    color: #fff;
    /* padding: 10px; */
    border-radius: 5px;
    display: none;
    flex-direction: column;
    animation: fadeInPriceInfo .2s ease-in-out forwards;
    z-index: 9999;
}

@keyframes fadeInPriceInfo {
    0% {
        transform: translateY(10px);
        background: rgba(0,0,0,0);
    }

    100% {
        transform: translateY(0);
        background: rgba(0,0,0,.8);
    }
}

.func_price .price_info .price_info_content::after {
    content: '';
    border: 8px solid transparent;
    border-top: 8px solid rgba(0,0,0,.8);
    position: absolute;
    top: 100%;
    left: 10px;
    z-index: -1;
}

.func_price .price_info .price_info_content span {
    white-space: nowrap;
}

.func_price .price_info .price_info_content span.price {
    font-weight: 600;
}

.func_desc .guests {
    display: flex;
    gap: 5px;
    align-items: center;
}

.func_desc .guests .guests_icon {
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(/view/st/images/icons/profile.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

.func_desc .guests span.count {
    font-weight: 500;
    margin-left: -7px;
}

ul.room_services {
    list-style: none;
}

ul.room_services li:not(:first-child) {
    /* background-image: url(/view/st/images/icons/add.svg); */
    background-image: url(/view/st/images/icons/booking_check.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
}

.controls {
    display: flex;
    align-items: center;
    height: 30px;
    width: fit-content;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    border-radius: 5px;
    padding: 0px;
    overflow: hidden;
    margin: 5px;
    background: #e3e3e3;
}

.controls .btn {
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgb(255 168 65);
    color: #fff;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
    user-select: none;
}
.controls .btn:active {
    box-shadow: inset 1px 1px 5px rgb(0 0 0 / 60%);
}

.controls .btn:hover {
    opacity: .9;
}

.controls .current {
    width: 45px;
}

.content_wrapper .left_container .about_hotel {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.content_wrapper h3 {
    margin-top: 10px;
    margin-bottom: 20px;
}

.content_wrapper p {
    margin: 15px 0;
}

.content_wrapper .left_container .hotel_services {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.content_wrapper .left_container .hotel_services .all_services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0;
}

.content_wrapper .left_container .hotel_services .all_services ul.service_group {
    list-style: none;
    margin-bottom: 20px;
}

.content_wrapper .left_container .hotel_services .all_services ul.service_group li {
    font-size: .9rem;
    padding-left: 30px;
    position: relative;
    margin: 3px 0;
}

.content_wrapper .left_container .hotel_services .all_services ul.service_group li.group_name {
    font-size: 1rem;
    list-style: none;
    padding-bottom: 10px;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
}

.content_wrapper .left_container .hotel_services .all_services ul.service_group li:not(:first-child):before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #bbb;
    position: absolute;
    left: 18px;
    top: 7px;
    border-radius: 50%;
}

li.group_name div.service_group_icon {
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    /* position: absolute; */
    width: 25px;
    height: 25px;
}

li.group_name div.service_group_icon.common-info {
    background-image: url(/view/st/images/icons/common-info.svg);
}

li.group_name div.service_group_icon.extra-service {
    background-image: url(/view/st/images/icons/extra-service.svg);
}

li.group_name div.service_group_icon.extra-services {
    background-image: url(/view/st/images/icons/extra-services.svg);
}

li.group_name div.service_group_icon.meal {
    background-image: url(/view/st/images/icons/meal.svg);
}

li.group_name div.service_group_icon.internet {
    background-image: url(/view/st/images/icons/internet.svg);
}

li.group_name div.service_group_icon.languages {
    background-image: url(/view/st/images/icons/languages.svg);
}

li.group_name div.service_group_icon.parking {
    background-image: url(/view/st/images/icons/parking.svg);
}

li.group_name div.service_group_icon.busyness {
    background-image: url(/view/st/images/icons/busyness.svg);
}

li.group_name div.service_group_icon.fitness {
    background-image: url(/view/st/images/icons/fitness.svg);
}

li.group_name div.service_group_icon.anticovid {
    background-image: url(/view/st/images/icons/anticovid.svg);
}


.widget.conditions .title {
    background-image: url(/view/st/images/icons/checkin.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    padding-left: 25px;
    font-weight: 500;
    font-size: .95rem;
}

.widget.conditions .checkin_checkout {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    margin: 10px 5px;
    font-size: .8rem;
    align-items: center;
}

.widget.conditions .checkin_checkout span {
    color: #777;
}

.widget.conditions .checkin_checkout .time {
    margin-top: 5px;
}

.widget.conditions .checkin_checkout .line_block {
    position: relative;
    width: fit-content;
}

.widget.conditions .checkin_checkout .line {
    height: 8px;
    width: 150px;
    background: #ccc;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.widget.conditions .checkin_checkout .line::before {
    content: '';
    position: absolute;
    left: var(--from);
    top: 0;
    height: 100%;
    width: var(--length);
    background-color: #25ac03;
}

.widget.conditions .checkin_checkout .from {
    position: absolute;
    left: var(--from);
    top: -13px;
    font-size: .7rem;
    transform: translateX(-50%);
}

.widget.conditions .checkin_checkout .to {
    position: absolute;
    left: calc(var(--from) + var(--length));
    top: calc(100% + 1px);
    font-size: .7rem;
    transform: translateX(-50%);
}

.content_wrapper .pay_info {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.content_wrapper .pay_info .pay_main_block {
    display: flex;
    gap: 20px;
    padding: 0 20px;
    font-size: .9rem;
}

.content_wrapper .pay_info .pay_main_block .column {
    flex: 1;
}

.content_wrapper .pay_info .pay_main_block .pay_type {
    padding: 10px;
}

.content_wrapper .pay_info .pay_main_block .pay_type:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.content_wrapper .pay_info .pay_main_block .pay_type .title {
    font-weight: 500;
}

.content_wrapper .pay_info .pay_main_block .pay_type .currency_block {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.content_wrapper .pay_info .pay_main_block .pay_type .currency_block div {
    flex: 1;
}

.content_wrapper .pay_info .pay_main_block .pay_type .currency_block div img {
    height: 20px;
}

.content_wrapper .pay_info .pay_main_block .pay_type .currency_block .title {
    color: #888;
    margin-bottom: 3px;
}

.content_wrapper .qa {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.content_wrapper .qa .questions_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content_wrapper .qa .question {
    max-height: 50px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    border-radius: 5px;
    transition: all .3s ease-in-out;
    user-select: none;
}

.content_wrapper .qa .question_header {
    height: 51px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 30px 0 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.content_wrapper .qa .question_header:hover {
    background-color: #ddd;
}

.content_wrapper .qa .question_header::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    height: 15px;
    width: 15px;
    transform: translateY(-50%);
    background-image: url(/view/st/images/icons/down.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.content_wrapper .qa .question .answer {
    padding: 10px;
}

.content_wrapper .hotel_location_map {
    height: 400px;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.content_wrapper .hotel_location_map #map_hotel_big {
    width: 100%;
    height: 100%;
}

.content_wrapper .hotel_location_map .close_mobile {
    display: none;
}

.content_wrapper .left_container .hotel_reports {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.content_wrapper .left_container .hotel_reports .hotel_reports_title {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 500;
}

.content_wrapper .left_container .hotel_reports .hotel_reports_title .rating {
    background-color: #25ac03;
    color: #fff;
    padding: 3px 5px;
    border-radius: 3px;
}

.content_wrapper .left_container .hotel_reports .reports_list {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    gap: 20px;
}

.content_wrapper .left_container .hotel_reports .report_card {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.content_wrapper .left_container .hotel_reports .report_card:first-child {
    border-top: 1px solid #ccc;
}

.content_wrapper .left_container .hotel_reports .report_card .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.content_wrapper .left_container .hotel_reports .report_card .title .user_name {
    font-weight: 500;
}

.content_wrapper .left_container .hotel_reports .report_card .title .rating {
    width: 40px;
    height: 40px;
    background: rgb(15, 93, 228);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 50%;
    font-weight: 500;
    font-size: 1.4rem;
}

.content_wrapper .left_container .hotel_reports .report_card .text {
    font-size: .95rem;
}

.content_wrapper .left_container .hotel_reports .report_card .rating_range_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: end;
    margin: 10px 0;
    font-size: .85rem;
}

.page_narrow .content_wrapper .hotel_widgets {
    flex-basis: 300px;
}

.page_narrow .content_wrapper .hotel_widgets .widget {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
    font-size: .9rem;
    margin-bottom: 10px;
}

.page_narrow .content_wrapper .hotel_widgets .widget #map_hotel {
    width: 100%;
    height: 300px;
}

.hotel_widgets .list_similar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hotel_widgets .list_similar .hotel_card_similar {
    display: flex;
    gap: 10px;
    font-size: .85rem;
    align-items: center;
}

.hotel_widgets .list_similar .hotel_card_similar .img {
    width: 55px;
    height: 55px;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hotel_widgets .list_similar .hotel_card_similar .info .name {
    font-weight: 500;
}

.hotel_widgets .list_similar .hotel_card_similar .info .rating_type {
    display: flex;
    gap: 5px;
    align-items: center;
}

.hotel_widgets .list_similar .hotel_card_similar .info .rating_type .rating {
    background-color: #25ac03;
    color: #fff;
    padding: 2px 3px;
    border-radius: 3px;
}

.hotel_widgets .rating_range_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rating_range {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rating_range .title {
    display: flex;
    justify-content: space-between;
}

.rating_range .title .percent {
    font-weight: 500;
}

.rating_range .range_line {
    width: 100%;
    height: 15px;
    background: #eee;
    border-radius: 7px;
    position: relative;
}

.rating_range .range_line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(var(--range-value) * 10%);
    background-color: rgb(15, 93, 228);
    border-radius: 10px;
}


.hotel_widgets .widget_hotel_gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 150px;
    gap: 5px;
}

.hotel_widgets .widget_hotel_gallery .img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 500;
    text-shadow: 0 0 3px black;
    cursor: pointer;
    transition: box-shadow .2s ease-in-out, opacity .2s ease-in-out;
}

.hotel_widgets .widget_hotel_gallery .img:first-child {
    grid-column: 1/3;
    grid-row: 1/3;
}

.stars_and_rating {
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hotel_widgets .hotel_name {
    font-size: 1.3rem;
    font-weight: 400;
}

.hotel_widgets .location_info {
    flex-direction: column;
    margin: 10px 0;
}

.hotel_widgets .location_info a {
    text-decoration: none;
    color: currentColor;
}

.hotel_widgets .checkin_dates {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 -10px;
    padding: 5px 10px;
    background: #f3f3f3;
    font-size: .8rem;
}

.hotel_widgets .checkin_dates .checkin, .hotel_widgets .checkin_dates .checkout {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hotel_widgets .checkin_dates .date {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 2.5rem;
}

.hotel_widgets .checkin_dates .date .day {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 2rem;
    margin-top: 5px;
    /* width: 3.2rem; */
    text-align: right;
}

.hotel_widgets .checkin_dates .date .month_year_week {
    font-size: .85rem;
}

.hotel_widgets .separator {
    width: 30px;
    height: 30px;
}


.page_narrow .content_wrapper .hotel_widgets .widget.check {
    border-radius: 0;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    margin: 20px 0;
}

.page_narrow .content_wrapper .hotel_widgets .widget.check::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 3px;
    background-image: url(/view/st/images/top-beard.png);
    background-repeat: repeat-x;
    width: calc(100% - 5px);
    height: 4px;
}

.page_narrow .content_wrapper .hotel_widgets .widget.check::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 3px;
    background-image: url(/view/st/images/top-beard.png);
    background-repeat: repeat-x;
    width: calc(100% - 5px);
    height: 4px;
    transform: rotateX(180deg);
}

.widget.check .room {
    margin: 0 -10px;
    padding: 10px;
    border-bottom: 1px dashed #ccc;
}

.widget.check .room > span {
    font-size: 1.1rem;
    font-weight: 400;
}

.widget.check .room .funcs {
    padding: 5px 0;
}

.widget.check .room .funcs .func {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
}

.widget.check .price {
    white-space: nowrap;
}

.widget.check .total {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    font-size: 1.4rem;
    font-weight: 400;
}

.widget.timer .timer_clock {
    font-size: 2rem;
    text-align: center;
    width: 100%;
}

.booking_info_line {
    --height-line: 70px;

    position: fixed;
    bottom: 0;
    height: var(--height-line);
    width: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .8);
    z-index: 9998;
    transform: translateY(calc(100% + 10px));   /* + 10px из-за тени */
    transition: transform .3s ease-in-out, height .3s ease-in-out;
}

.booking_info_line.open_list {
    height: 50vh;
}

.booking_info_line.open_list .line_content button .open {
    transform: rotateX(180deg);
}

.booking_info_line.show {
    transform: translateY(0);
}

.booking_info_line .line_content {
    width: 1200px;
    height: var(--height-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}

.booking_info_line .line_content .text_info {
    font-size: 1.2rem;
    font-weight: 400;
}

.booking_info_line .line_content .right_btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking_info_line .line_content .right_btns button {
    height: 40px;
}

.booking_info_line .line_content button .open {
    width: 1rem;
    height: 1rem;
    position: relative;
    transition: transform .3s ease-in-out;
}

.booking_info_line button .open::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDQ0OCA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQxNiAzNTJjLTguMTg4IDAtMTYuMzgtMy4xMjUtMjIuNjItOS4zNzVMMjI0IDE3My4zbC0xNjkuNCAxNjkuNGMtMTIuNSAxMi41LTMyLjc1IDEyLjUtNDUuMjUgMHMtMTIuNS0zMi43NSAwLTQ1LjI1bDE5Mi0xOTJjMTIuNS0xMi41IDMyLjc1LTEyLjUgNDUuMjUgMGwxOTIgMTkyYzEyLjUgMTIuNSAxMi41IDMyLjc1IDAgNDUuMjVDNDMyLjQgMzQ4LjkgNDI0LjIgMzUyIDQxNiAzNTJ6Ii8+PC9zdmc+);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(1);
}

.booking_info_line .booking_list {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: calc(100% - var(--height-line));
    background: #fff;
    width: 1200px;
    transform: translateX(-50%);
    overflow-y: auto;
}

.booking_info_line .booking_list .booking_room_card {
    margin: 10px 0 40px 0;
    border-bottom: 1px solid #ccc;
}

.booking_info_line .booking_list .booking_room_card .room_name {
    font-size: 1.3rem;
    font-weight: 400;
    padding: 0 10px;
}

.booking_info_line .booking_list .booking_room_card .room_funcs {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
}

.booking_info_line .booking_list .booking_room_card .room_funcs .room_func {
    display: grid;
    grid-template-columns: 1fr 200px 200px;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

.booking_info_line .booking_list .booking_room_card .room_funcs .room_func:nth-child(even) {
    background-color: #f3f3f3;
}

.booking_info_line .booking_list .booking_room_card .room_funcs .room_func:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.booking_info_line .booking_list .booking_room_card .room_funcs .room_func .price {
    font-size: 1.5rem;
}

/* BOOKING PAGE */
.page_narrow .content_wrapper .booking_content {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.content_wrapper .booking_content .booking_rooms {
    display: flex;
    flex-direction: column;
    margin: 0 -10px;
}

.content_wrapper .booking_content .booking_rooms .room_card:not(:last-child) {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ccc;
}

.content_wrapper .booking_content .booking_rooms .room_card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    position: relative;
}

.content_wrapper .booking_content .booking_rooms .room_card .room_no_access {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255, .8);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 400;
    padding: 20px;
    text-shadow: 0 0 10px rgb(0 0 0 / 70%);
}

.content_wrapper .booking_content .booking_rooms .room_card .room_top {
    display: flex;
    gap: 10px;
    margin: 5px 0;
}

.content_wrapper .booking_content .booking_rooms .room_card .room_slider {
    height: 180px;
    flex-basis: 180px;
    border-radius: 5px;
}

.content_wrapper .booking_content .room_slider .slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.booking_content .booking_rooms .room_card .room_info {
    flex: 1;
    padding: 5px;
}

.booking_content .booking_rooms .room_card .room_info .room_name {
    font-size: 1.2rem;
    font-weight: 400;
}

.booking_content .booking_rooms .room_card .room_info .room_description {
    font-size: .95rem;
    margin-top: 10px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    box-orient: vertical;
}

.booking_content .booking_rooms .room_card .room_info .setup_params {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    position: relative;
}

.booking_content .booking_rooms .room_card .room_info .setup_params .guest-picker {
    left: 0;
}

.booking_content .booking_rooms .room_card .room_info .setup_params .root_calendar {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.booking_content .booking_rooms .room_card .room_info .setup_params .container-calendar {
    left: calc(50% + 5px);
}

.booking_content .booking_rooms .room_card .room_info .panel {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    user-select: none;
}

.booking_content .booking_rooms .room_card .room_info .panel.checkin_time {
    position: relative;
}

.booking_content .booking_rooms .room_card .room_info .panel.checkin_time .custom-select {
    position: unset;
}

.booking_content .booking_rooms .room_card .room_info .panel.checkin_time .custom-select .select-selected {
    display: none;
}

.booking_content .booking_rooms .room_card .room_info .panel.checkin_time .custom-select .select-items div {
    padding: 5px;
}

.booking_content .booking_rooms .room_card .room_info .panel:hover {
    background-color: rgba(0, 0, 0, .05);
}

.booking_content .booking_rooms .room_card .room_info .panel span.param_name {
    font-size: .8rem;
}

.booking_content .booking_rooms .room_card .room_info .panel span.param_value {
    margin-top: 2px;
    font-weight: 400;
}

.booking_content .booking_rooms .room_card .room_info .pay_online_info {
    margin: 10px 0;
    text-align: right;
    color: var(--primary-color);
}

.booking_content .booking_rooms .room_card .room_setup {
    display: grid;
    grid-template-columns: 150px 1fr 100px 170px;
    gap: 5px;
    font-size: .85rem;
    border-top: 1px solid #eee;
    padding: 3px;
}

.booking_content .booking_rooms .room_card .room_setup > div {
    padding: 5px;
    height: fit-content;
}

.booking_content .booking_rooms .room_card .room_setup .combined_columns {
    grid-column: 1/5;
}

.booking_content .booking_rooms .room_card .room_setup .guest_name {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.booking_content .booking_rooms .room_card button.show_guest_btn {
    padding: 3px 7px;
    font-size: .9rem;
}

.booking_content .booking_rooms .room_card .room_setup .guest_name .guest_inputs {
    display: none;
    gap: 10px;
}

.booking_content .booking_rooms .room_card .room_setup .guest_name .guest_inputs.show {
    display: flex;
}

.booking_content .booking_rooms .room_card .room_setup .guest_name .input_field {
    padding: 3px 5px;
}

.page_narrow .content_wrapper .room_setup .guest_name .input_field input[type="text"] {
    font-size: 1rem;
}

.page_narrow .content_wrapper .addons {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.page_narrow .content_wrapper .addons_mobile {
    display: none;
    padding: 10px;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile .addon_card {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
    overflow: hidden;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile .addon_card .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile .addon_card .main .price {
    font-size: 1.4rem;
    font-weight: 400;
    white-space: nowrap;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile .addon_card .count {
    display: none;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
    margin: 10px -10px 0 -10px;
    padding: 2px 10px 0 10px;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile .addon_card .count span.label {
    font-size: .75rem;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile .addon_card .count .controls {
    margin: 0;
}

.page_narrow .content_wrapper .addons_mobile .addons_list_mobile .addon_card .count .total_price {
    font-size: 1.4rem;
    font-weight: 400;
}

.page_narrow .content_wrapper .addons .addons_list {
    display: grid;
    grid-template-columns: 50px 1fr 160px 130px 160px;
    margin: 10px 0;
}

.page_narrow .content_wrapper .addons .addons_list .item {
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.page_narrow .content_wrapper .addons .addons_list .item.text_left {
    text-align: left;
}

.page_narrow .content_wrapper .addons .addons_list .item.title {
    font-weight: 400;
}

.page_narrow .content_wrapper .addons .addons_list .item.price {
    font-size: 1.4rem;
    font-weight: 400;
}

.page_narrow .content_wrapper .addons .addons_list .item.bg {
    background-color: #f5f5f5;
}

.page_narrow .content_wrapper .addons .addons_list .item.count {
    display: flex;
    justify-content: center;
    transition: opacity .3s ease-in-out;
}

.controls.disabled {
    opacity: .5;
}
/* 
.page_narrow .content_wrapper .addons .addons_list .controls {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0px 0px 5px rgb(0 0 0 / 40%);
    height: 30px;
    width: fit-content;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    border-radius: 5px;
    padding: 0;
    overflow: hidden;
}

.page_narrow .content_wrapper .addons .addons_list .controls .btn {
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgb(15, 93, 228);
    color: #fff;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
    user-select: none;
}

.page_narrow .content_wrapper .addons .addons_list .controls .btn:active {
    box-shadow: inset 1px 1px 5px rgb(0 0 0 / 60%);
}

.page_narrow .content_wrapper .addons .addons_list .controls .btn:hover {
    opacity: .9;
}

.page_narrow .content_wrapper .addons .addons_list .controls .current {
    width: 45px;
} */

/* STATUS BOOKING */

.page_narrow .content_wrapper .booking_status {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
    position: relative;
}

.page_narrow .content_wrapper .booking_status img.qr_about_booking {
    position: absolute;
    top: 0;
    right: 0;
}

.page_narrow .content_wrapper .booking_status .icon_status {
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    /* background-color: #000; */
}

.page_narrow .content_wrapper .booking_status .icon_status.check {
    -webkit-mask-image: url(/view/st/images/icons/booking_check.svg);
    mask-image: url(/view/st/images/icons/booking_check.svg);
}

.page_narrow .content_wrapper .booking_status .icon_status.abort {
    -webkit-mask-image: url(/view/st/images/icons/booking_abort.svg);
    mask-image: url(/view/st/images/icons/booking_abort.svg);
}

.bg-green {
    background-color: #0a0;
}

.bg-yellow {
    background-color: #aa0;
}

.bg-red {
    background-color: #a00;
}

.bg-gray {
    background-color: #aaa;
}

.page_narrow .content_wrapper .booking_status .status_type {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
}

.c-green {
    color: #0a0;
}

.c-yellow {
    color: #aa0;
}

.c-red {
    color: #a00;
}

.c-gray {
    color: #aaa;
}

.page_narrow .content_wrapper .booking_description, .page_narrow .content_wrapper .booking_data {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);
}

.page_narrow .content_wrapper .booking_data .info_and_docs {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 10px 0;
}

.page_narrow .content_wrapper .booking_data .info_and_docs ul.main {
    margin: 10px 0;
}

.page_narrow .content_wrapper .booking_data .info_and_docs ul {
    list-style: none;
}

.page_narrow .content_wrapper .booking_data .info_and_docs ul li {
    margin: 5px 0;
}

.page_narrow .content_wrapper .booking_data .info_and_docs ul > ul {
    margin: 10px 20px;
}

.page_narrow .content_wrapper .booking_data .info_and_docs .docs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 15px 0;
}

.page_narrow .content_wrapper .booking_data .info_and_docs .docs .doc {
    padding: 5px;
    height: fit-content;
    box-shadow: 0 0 5px rgba(0, 0, 0, .7);
    border-radius: 5px;
    max-width: 230px;
    overflow: hidden;
    cursor: pointer;
    color: #000;
    text-decoration: none;
}

.page_narrow .content_wrapper .booking_data .info_and_docs .docs .doc:hover {
    opacity: .8;
}

.page_narrow .content_wrapper .booking_data .info_and_docs .docs .doc img {
    object-fit: cover;
}

.page_narrow .content_wrapper .booking_description .rooms_list {
    display: grid;
    grid-template-columns: 1fr 120px 195px 200px;
    margin: 10px 0;
}

.page_narrow .content_wrapper .booking_description .rooms_list .item {
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.page_narrow .content_wrapper .booking_description .rooms_list .item .room_name {
    font-size: 1.2rem;
    font-weight: 400;
}

.page_narrow .content_wrapper .booking_description .rooms_list .item.price {
    font-size: 1.7rem;
    font-weight: 400;
    display: flex;
    justify-content: right;
}


.page_narrow .content_wrapper .booking_description .rooms_list .item.title {
    text-align: center;
    font-weight: 400;
    background-color: #eee;
}

.page_narrow .content_wrapper .booking_description .rooms_list .item.title,
.page_narrow .content_wrapper .booking_description .rooms_list .item.bg {
    background-color: #f5f5f5;
}



.page_narrow .content_wrapper .booking_description .services_list {
    display: grid;
    grid-template-columns: 1fr 200px;
    margin: 10px 0;
}

.page_narrow .content_wrapper .booking_description .services_list .item {
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.page_narrow .content_wrapper .booking_description .services_list .item.name {
    font-size: 1.2rem;
    font-weight: 400;
}


.page_narrow .content_wrapper .booking_description .services_list .item.title {
    text-align: center;
    font-weight: 400;
    background-color: #eee;
}

.page_narrow .content_wrapper .booking_description .services_list .item.price {
    font-size: 1.7rem;
    font-weight: 400;
    display: flex;
    justify-content: right;
}

.page_narrow .content_wrapper .booking_description .services_list .item.title,
.page_narrow .content_wrapper .booking_description .services_list .item.bg {
    background-color: #f5f5f5;
}

#pay_frame {
    width: 70vw;
    height: 90vh;
    border: 0;
    margin: -17px;
    margin-bottom: -30px;
}

.payment_status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.payment_status .icon {
    width: 200px;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.payment_status .icon.payment_success {
    background-image: url(/view/st/images/icons/payment_success.svg);
}

.payment_status span {
    font-size: 2.2rem;
    font-weight: 600;
}

.payment_status span.success {
    color: #2bb673;
}

main[data-page="booking_status"] .widget.check .room .funcs .func {
    justify-content: end;
}

main[data-page="booking_status"] .widget.check .room.addons_check .funcs .func {
    justify-content: space-between;
}

main[data-page="booking"] .content_wrapper .error_box {
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgb(41 47 55 / 10%);

    display: flex;
    flex-direction: column;
    align-items: center;
}

main[data-page="booking"] .content_wrapper .error_box .icon.error {
    width: 200px;
    height: 200px;
    background-image: url(/view/st/images/icons/booking_abort.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

main[data-page="booking"] .content_wrapper .error_box p {
    font-size: 1.4rem;
}

main[data-page="country"] {
    position: relative;
}

main[data-page="country"] .background_image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100vh - 50px);
    background-image: url(/view/st/48b92e195e2a3ed458157727070c500aec8d0429.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

main[data-page="country"] .page_narrow {
    margin-top: calc(50vh - 250px);
}

main[data-page="country"] .page_narrow .search_box {
    background: #fff;
    box-shadow: 0 3px 5px rgb(41 47 55 / 90%);
}

main[data-page="country"] .page_narrow .search_box .panel {
    padding: 20px;
}

main[data-page="country"] .page_narrow .popular_cities {
    margin-top: 70px;
    z-index: 1;
}

main[data-page="country"] .page_narrow .popular_cities h3 {
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 0 5px #000;
    font-size: 2rem;
}

main[data-page="country"] .page_narrow .cities_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 410px;
    gap: 10px;
}

main[data-page="country"] .page_narrow .cities_container a.city_item {
    position: absolute;
    width: 100%;
    bottom: 0;
    border-radius: 10px;
    box-shadow: 0 3px 5px rgba(41, 47, 55, .9);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease-in-out;
    border: 1px solid #ccc;
}

main[data-page="country"] .page_narrow .cities_container a.city_item:hover {
    transform: scale(1.02);
}

main[data-page="country"] .page_narrow .cities_container a.city_item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

main[data-page="country"] .page_narrow .cities_container a.city_item span {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    padding: 3px 10px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    backdrop-filter: blur(10px);
}

main[data-page="country"] .search_box {
    z-index: 777;
}

main[data-page="country"] .search_box .panel {
    width: 20%;
}

main[data-page="country"] .search_box .panel:nth-of-type(5) {
    border: 0;
}

main[data-page="country"] .search_box .panel:nth-of-type(5):hover {
    opacity: .8;
    background-color: var(--secondary-color);
}

main[data-page="country"] .search_box .panel:not(:nth-of-type(5)):hover {
    opacity: .8;
    background-color: rgba(0, 0, 0, .1);
}

main[data-page="country"] .search_box .panel:not(:nth-of-type(5)) {
    border-right: 1px solid #eee;
}

main[data-page="country"] .search_box .panel.city {
    align-items: start;
}

main[data-page="country"] .search_box .panel.city:hover {
    opacity: 1;
}


main[data-page="country"] .search_box .container-calendar {
    left: 20%;
}

main[data-page="country"] .search_box .guest-picker {
    left: 60%;
}

main[data-page="country"] .page_narrow .popular_hotels {
    margin-top: 60px;
}

main[data-page="country"] .page_narrow .popular_hotels h3 {
    margin-bottom: 20px;
    font-size: 2rem;
}

main[data-page="country"] .page_narrow .hotels_container {
    display: grid;
    border-radius: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 410px;
    gap: 10px;
}

main[data-page="country"] .page_narrow .hotels_container a.hotel_item {
    border-radius: 10px;
    box-shadow: 0 3px 5px rgba(41, 47, 55, .9);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease-in-out;
    border: 1px solid #ccc;
}

main[data-page="country"] .page_narrow .hotels_container a.hotel_item:hover {
    transform: scale(1.02);
}

main[data-page="country"] .page_narrow .hotels_container a.hotel_item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

main[data-page="country"] .page_narrow .hotels_container a.hotel_item span {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    padding: 3px 10px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    backdrop-filter: blur(10px);
}

main[data-page="country"] .page_narrow .cities_list_of_regions {
    display: flex;
    flex-direction: column;
    margin: 50px 0;
    gap: 20px;
}

main[data-page="country"] .page_narrow .citiest_list_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

main[data-page="country"] .page_narrow .citiest_list_container ul {
    list-style: none;
}

main[data-page="country"] .page_narrow .citiest_list_container .region .name {
    font-weight: 400;
    margin-bottom: 5px;
}

main[data-page="country"] .page_narrow .citiest_list_container .region a {
    text-decoration: none;
    color: var(--primary-color);
}

main[data-page="country"] .page_narrow .citiest_list_container .region a:hover {
    text-decoration: underline;
}

main[data-page="country"] .page_narrow .cities_list_of_regions .show_more_btn {
    margin: 0 auto;
}

main[data-page="main"] {
    position: relative;
}

main[data-page="main"] .background_image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100vh - 50px);
    background-image: url(/view/st/bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

main[data-page="main"] .page_narrow {
    margin-top: calc(50vh - 250px);
}

main[data-page="main"] .page_narrow .search_box {
    background: #fff;
    box-shadow: 0 3px 5px rgb(41 47 55 / 90%);
}

main[data-page="main"] .page_narrow .search_box .panel {
    padding: 20px;
}

main[data-page="main"] .search_box {
    z-index: 777;
}

main[data-page="main"] .search_box .panel {
    width: 20%;
}

main[data-page="main"] .search_box .panel:nth-of-type(5) {
    border: 0;
}

main[data-page="main"] .search_box .panel:nth-of-type(5):hover {
    opacity: .8;
    background-color: var(--secondary-color);
}

main[data-page="main"] .search_box .panel:not(:nth-of-type(5)):hover {
    opacity: .8;
    background-color: rgba(0, 0, 0, .1);
}

main[data-page="main"] .search_box .panel:not(:nth-of-type(5)) {
    border-right: 1px solid #eee;
}

main[data-page="main"] .search_box .panel.city {
    align-items: start;
}

main[data-page="main"] .search_box .panel.city:hover {
    opacity: 1;
}


main[data-page="main"] .search_box .container-calendar {
    left: 20%;
}

main[data-page="main"] .search_box .guest-picker {
    left: 60%;
}

main[data-page="main"] .page_narrow .countries_container {
    display: grid;
    border-radius: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 410px;
    gap: 10px;
}

main[data-page="main"] .page_narrow .popular_countries {
    z-index: 1;
}

main[data-page="main"] .page_narrow .popular_countries h3 {
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 0 5px #000;
    font-size: 2rem;
}

main[data-page="main"] .page_narrow .countries_container a.country_item {
    border-radius: 10px;
    box-shadow: 0 3px 5px rgba(41, 47, 55, .9);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease-in-out;
    border: 1px solid #ccc;
}

main[data-page="main"] .page_narrow .countries_container a.country_item:hover {
    transform: scale(1.02);
}

main[data-page="main"] .page_narrow .countries_container a.country_item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

main[data-page="main"] .page_narrow .countries_container a.country_item span {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    padding: 3px 10px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    backdrop-filter: blur(10px);
}

main[data-page="main"] .page_narrow .counties_list {
    display: flex;
    flex-direction: column;
    margin: 130px 0 20px 0;
    gap: 20px;
}

main[data-page="main"] .page_narrow .counties_list_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

main[data-page="main"] .page_narrow .counties_list_container a {
    text-decoration: none;
    color: var(--primary-color);
}

main[data-page="main"] .page_narrow .counties_list_container a:hover {
    text-decoration: underline;
}

main[data-page="main"] .page_narrow .counties_list .show_more_btn {
    margin: 0 auto;
}

main[data-page="main"] .seo_text p {
    margin: 10px 0;
}