/* :root {
    --text-color: #2F3438;
    --border-radius-main: 15px;
    --border-main: 1px solid #E6E6E6;

    --blocks-shadow: 0 0 20px -15px #777777;
    --white: #FFFFFF;
    --background-grey: #F5F5F5;
    --border-color: #DBDBDB;
    --selected-room: #FFF9A4;

    --free-interval-before: #00CE1F;
    --busy-interval-before: #CA4000;
    --selected-interval-before: #E2E600;
    --selected-interval-back: #FDFFEB;

    --selector-back: #CFFFD6;

    --green-back: #339E33;
    --teal-back: #06B6D4;

    --error-color: #9E3333;

    --busy-OS: #ffac00
    --full-busy-OS: #FF0000;
    --full-busy-OS_expiring: #cc0000;

    --free-area: #1d7522;
    --selected-area: #181a45;
} */

*,
*::before,
*::after {

    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;

    font-family: 'Open Sans', sans-serif;
    /* font-size: 16px; */

}

body {
    background-color: #F0F0F0;
    color: var(--text-color);
}

#wrapper {
    /* background-color: #fefefe; */

    /* max-width: 1920px; */
    /* max-height: 560px; */
    margin: 0 auto;
    box-shadow: 0 0 28px -16px #8a8a8a;
    background-color: var(--background-grey);
    padding: 16px;

    display: flex;
    justify-content: center;
}

#map-wrapper {
    background-color: var(--white);
    border: var(--border-main);

    width: 100%;
    max-width: 1515px;
    /* height: 960px; */
    /* height: 100%; */
    padding: 24px;
    border-radius: var(--border-radius-main);
    box-shadow: var(--blocks-shadow);

    overflow: hidden;

    position: relative;
}

svg {
    height: 100%;
    width: 100%;
}

#Areas rect {
    transition: fill 0.2s ease;
}

#Areas .clicked rect:first-child,
#coworking_tables .clicked rect,
#coworking_tables .clicked path:nth-child(2) {
    /* fill: var(--selected-room); */
    fill: var(--selected-area);
}

#squaresContainer .clicked {
    background-color: var(--selected-area);
}

#coworking_tables g[id^="o"] path,
#coworking_tables g[id^="o"] rect,
#coworking_tables g[id^="o"] {
    transition: all 0.2s ease;
}

#Areas g,
.add-time,
header *,
#coworking_tables>g>g {
    cursor: pointer;
}

.busy-OS .cls-22 {
    fill: var(--busy-OS);
}

.busy-room .cls-1 {
    fill: var(--busy-room);
}

.full-busy-room .cls-1 {
    fill: var(--full-busy-room);
}

.busy-OS.full-busy-OS .cls-22 {
    fill: var(--full-busy-OS);
    /* height: 50px; */
}

.busy-OS.full-busy-OS_expiring-1 .cls-22 {
    fill: var(--full-busy-OS_expiring-1);
}

.busy-OS.full-busy-OS_expiring-2 .cls-22 {
    fill: var(--full-busy-OS_expiring-2);
}

.disabledTable {
    display: none;
}


#lockersModalBack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(88, 88, 88, 0.33);
    backdrop-filter: blur(8px);
    z-index: 5;
    cursor: pointer;

    visibility: hidden;
    opacity: 0;
    transition: all 0.33s ease;
}

#lockersOuter {
    position: absolute;
    top: -55px;
    left: 0;
    width: 100%;
    height: 100%;

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

    z-index: 12;
    pointer-events: none;

    visibility: hidden;
    opacity: 0;
    transition: all 0.33s ease;
}

#lockersModal {
    background-color: #f0f0f0;
    pointer-events: all;

    box-shadow: var(--blocks-shadow);
    border-radius: var(--border-radius-main);
    padding: 30px;
}

#lockersModalBack.modal-clicked,
#lockersOuter.modal-clicked {
    opacity: 1;
    visibility: visible;
}

#lockersOuter.modal-clicked {
    top: 0;
}

#squaresContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lockers-row {
    display: flex;
    gap: 10px;
}

.locker {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: var(--free-area);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

.locker.busy-locker {
    background-color: var(--full-busy-OS);
}



#right-column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width: 320px;

    margin-left: 18px;
}

#calendar,
#temp-date {
    margin-bottom: 12px;
}

#right-column>div {
    background-color: var(--white);
    border: var(--border-main);

    /* max-width: 300px; */
    width: 100%;
    /* height: 360px; */
    border-radius: var(--border-radius-main);
    box-shadow: var(--blocks-shadow);
}

#times-and-cart {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    overflow: hidden;
}




#selected-room {
    border-bottom: 1px dashed var(--border-color);
    padding: 6px 0;
    text-align: center;

    font-weight: 700;
    /* background-color: var(--selected-room); */
    background-color: var(--selected-area);
    color: var(--white);
}

#available-times {
    /* padding: 5px 0; */
    /* margin: 14px; */

    width: 100%;

    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    /* align-items: center; */

    font-size: 14px;
    font-weight: 500;

    /* text-align: center; */

    overflow-y: auto;

}

#available-times>div {
    padding: 8px 14px;
    /* margin: 5px 0; */
    border-bottom: 1px dashed var(--border-color);
    /* height: 55px; */
}

#available-times>p {
    font-weight: 700;
    font-size: 16px;
    width: 270px;
    margin: 0 auto;
    padding: 15px 15px 20px 15px;
    border-radius: 0 0 10px 10px;
    background-color: var(--busy-OS);
    text-align: center;
}

.free-interval,
.busy-interval,
.selected-interval {
    position: relative;
}

.free-interval::before,
.busy-interval::before,
.selected-interval::before {
    position: absolute;
    left: 0;
    top: 6%;
    content: '';
    height: 88%;
    border-radius: 0 6px 6px 0;
    /* padding: 5px; */
    width: 6px;
}

.free-interval::before {
    background-color: var(--free-interval-before);
}

.busy-interval::before {
    background-color: var(--busy-interval-before);
}

.selected-interval::before {
    background-color: var(--selected-interval-before);
}

.selected-interval {
    background-color: var(--selected-interval-back);
}

.map-site .selected-interval::before {
    background-color: var(--busy-room);
}

.map-site .selected-interval {
    background-color: transparent;
}

.map-site .busy-interval::before {
    background-color: var(--full-busy-room);
}

.map-site .free-interval::before {
    background-color: var(--free-interval-before);
}

.selected-interval label {
    display: none;
}


.free-interval::after,
.busy-interval::after,
.selected-interval::after {
    /* content: ''; */
    display: block;
    /* height: 1px; */
    width: 100%;
    /* background-color: var(--border-color); */
    border-bottom: 1px dashed var(--border-color);
    /* margin: 10px 0; */
}

.free-interval,
.busy-interval,
.selected-interval {
    width: 100%;
}

.free-interval,
.selected-interval,
.busy-interval {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.map-room-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

#available-times button,
#available-times a {
    background-color: transparent;
    cursor: pointer;
    height: 26px;
    width: 26px;

    border-radius: 50%;
    transition: background-color 0.5s ease;
}

#available-times .free-interval:hover button {
    background-color: var(--free-interval-before);
}

#available-times .selected-interval:hover button {
    background-color: var(--busy-interval-before);
}

#available-times button img,
#available-times a img {
    width: 100%;
    height: auto;

    padding: 6px;
    filter: invert(0);
    transition: filter 0.5s ease;
}

#available-times .selected-interval button img {
    padding: 7px;
}

#available-times>div:hover button img {
    filter: invert(1);
}

#available-times a {
    text-decoration: none;
}

.map-site #available-times {
    font-size: 18px;
}

.map-site #selected-room {
    font-size: 22px;

    padding: 10px 0;
}

.map-site #available-times>div {
    padding: 10px 20px;
}

select {
    /* background-color: #F0F0F0; */
    background-color: var(--selector-back);
    border-radius: 5px;
    padding: 2px 5px;
    font-size: inherit;
    font-weight: inherit;

    outline: 1px solid var(--white);

    /* for Firefox */
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
    appearance: none;

    /* margin: 0 3px; */
}

option {
    background-color: var(--white);
}

.time-from {
    margin-right: 6px;
}

.disabled-clicks {
    pointer-events: none;
}

#cart {
    /* background-color: var(--green-back); */
    background-color: var(--free-area);
    font-weight: 700;
    color: var(--white);
    width: 100%;
    text-align: center;
    padding: 6px 0;

    /* ОПИЦОНАЛЬНО, МОЖНО ГРОХНУТЬ */
    cursor: pointer;

    transition: background-color 0.65s ease;
}

#cart::before {
    content: 'Перейти к оформлению';
}

#cart.cart-pressed::before {
    content: 'Вернуться к выбору';
}

#cart.cart-pressed {
    /* background-color: rgb(51, 151, 158); */
    background-color: var(--teal-back);
    /* color: #2F3438; */
}

select:focus,
select:hover {
    border: none;
    outline: 1px solid green;
}

/* select:checked {
    outline: 1px solid red;
} */

select {
    transition: outline 0.2s ease;
}

.OS-rate {
    appearance: auto;
    padding: 2px 10px;
    margin-left: 5px;
}



#times-wrapper {
    width: 100%;
    height: 100%;
    position: relative;

    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#cart-popup {
    position: absolute;
    z-index: 5;
    height: 100%;
    width: 100%;
    background-color: var(--white);
    transform: translate(100%, 0);
    transition: all 0.65s ease;

    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
    /* border: 1px solid transparent; */
    box-shadow: inset 0 0 0 1px transparent;
    opacity: 0;

    overflow-y: auto;
}

#cart-popup.popup-show {
    transform: translate(0, 0);
    /* border: 1px solid #2F3438; */
    /* border: 1px solid var(--border-color); */
    transition: all 0.65s ease;
    box-shadow: inset 0 0 0 1px var(--teal-back);
    opacity: 1;
}

#cart-popup_inputs {
    display: flex;
    flex-direction: column;
}

#cart-popup input:not([type="checkbox"]),
#cart-popup textarea,
#cart-popup button {
    border-radius: 5px;
    padding: 5px;

    margin-bottom: 12px;

    background-color: var(--background-grey);
    border: 1px solid var(--border-color);

    font-size: 13px;
}

textarea {
    resize: vertical;
}

#cart-popup #send-button {
    color: var(--white);
    /* background-color: var(--green-back); */
    background-color: var(--free-area);
}

#cart-popup button {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
}

#cart-popup label {
    margin-bottom: 4px;
    font-weight: 700;

    font-size: 15px;
}

#cart-popup label[for="privacy"] {
    font-weight: 400;
    font-size: 12px;
    word-break: break-all;

    display: flex;
    align-items: center;
}

#privacy {
    margin-right: 8px;
}

#cart-popup a {
    text-decoration: none;
    font-weight: 700;
}

#total-price {
    font-size: 15px;
    margin-bottom: 4px;
}

#error-message:not(:empty) {
    background-color: var(--error-color);
    /* padding: 4px; */
    font-weight: 700;
    color: var(--white);

    padding: 5px;
    border-radius: 8px;
}

#error-message.error-success {
    background-color: var(--green-back);
}



#os_button_1,
#os_button_2,
#lockers_button {
    cursor: pointer;
}

.OS-rate-selected rect {
    fill: var(--selected-area);
    stroke: var(--busy-OS);
    stroke-width: 3px;
}




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

.room-card {
    border-radius: var(--border-radius-main);
    border: var(--border-main);
    box-shadow: var(--blocks-shadow);

    cursor: pointer;

    background-color: var(--free-area);
    color: var(--white);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    transition: background-color 0.2s ease;


    position: relative;
}

.room-capacity {
    position: absolute;
    top: 0;
    right: 0;

    background-color: var(--text-color);
    border: 1px solid var(--border-color);
    opacity: 0.95;
    border-radius: 7.5px;
    margin: 7.5px;
    padding: 4px 8px;
    font-size: 14px;

    display: flex;
    align-items: center;

    line-height: 1;
}

span.material-symbols-outlined {
    font-size: inherit;
    margin-left: 4px;
}

.room-card-external {
    width: 25%;
    max-height: 25%;
    display: flex;
    padding: 8px;
}

.room-card.clicked {
    background-color: var(--selected-area);
}

.room-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3/2;
    overflow: hidden;
}

.room-text {
    display: flex;
    justify-content: space-between;

    padding: 8px var(--border-radius-main);
    border-top: 1px dashed var(--white);
}

.room-name {
    font-weight: 700;
}

#map-wrapper.client {
    /* Костыли для версии клиента */
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    padding: 7px;
}

.OS-cart-rates {
    cursor: pointer;
    /* font-weight: 700; */
}


/* @keyframes rotateY45 {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
} */

.phone {
    font-size: 14px;
}

.phone #wrapper {
    flex-direction: column;
    padding: 16px;

}

.phone #map-wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;

    overflow: initial;
}

.phone .room-card-external {
    width: calc(50% - 4px);
    padding: 0;
    margin-bottom: 8px;

    font-size: 14px;


    /* max-height: 14.28%; */
}

.phone .room-capacity {
    font-size: 12px;
}

.phone .room-card-external:nth-of-type(odd) {
    margin-right: 8px;
}

.phone .room-card {
    border: var(--border-main);
    box-shadow: var(--blocks-shadow);
    border-radius: 8px;
    /* border-radius: 0; */
}

.phone .room-text {
    padding: 8px;
}

.phone #right-column {
    margin-left: 0;
    margin-top: 16px;
    max-width: initial;
}

.phone #calendar {
    margin-bottom: 16px;
}

.phone .vanilla-calendar-days {
    /* row-gap: 0; */
}

.phone .disabled-times {
    display: none !important;
}