.containerChessboard { max-width: 100%; height: 100vh; text-align: left; display: flex; flex-direction: column; position: relative; overflow: auto; overscroll-behavior: contain;    padding-bottom: 56px;}
#containerChessboard::-webkit-scrollbar { width: 5px; height: 5px; }
#containerChessboard::-webkit-scrollbar-corner { background: transparent; }
#containerChessboard::-webkit-scrollbar-track { background: #171818; border-radius: 10px; }
#containerChessboard::-webkit-scrollbar-thumb { background: #3b3b3b; border-radius: 4px; }
#containerChessboard::-webkit-scrollbar-thumb:hover { background: #434343; }
.containerChessboard.dragging { cursor: grabbing; }

.cb-header {position: sticky;top: 0;z-index: 8;display: flex;height: 50px;}
.cb-corner { position: sticky; left: 0; top: 0; z-index: 11; }
.cb-corner-wrapper { display: flex ; flex-direction: column; height: 50px; width: 70px; min-width: 70px; background: #000; border-right: 1px solid #313131; align-items: center; padding-top: 7px; padding-left: 1px; line-height: 19px; position: absolute; top: 0; left: 0; border-bottom: 1px solid #313131;}
.cb-corner-date { display: flex ; flex-direction: row; align-items: center; gap: 4px; justify-content: flex-end; font-weight: 600; font-size: 21px; letter-spacing: 0.03em; }
.cb-corner-day { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.cb-corner-calendar { width: 18px; height: 18px; background: url(/static/img/icon-calendar-second.svg) center center no-repeat; margin-right: 1px; display: inline-block; margin-top: -1px; }

.chessboard-nowtime {width: 1px;position: sticky;background: #C02956;z-index: 11;top: 50px;pointer-events: none;will-change: transform;height: 0px;}
.chessboard-nowtime span { width: 1px; display: block; height: calc(100vh - 55px); position: absolute; z-index: 9; background: #C02956;}
.chessboard-nowtime:before {content: '';width: 5px;height: 5px;border-radius: 50%;background: #C02956;position: absolute;left: -2px;top: -2px;z-index: 9;}

.cb-header-item { display: flex ; flex-direction: column; align-items: center; gap: 2px; flex: 1; width: 70px; min-width: 70px; padding: 3px 4px 7px 7px; background: #000; border-right: 1px solid #313131; position: relative; border-bottom: 1px solid #313131;}
.cb-header-time { font-weight: 600; font-size: 16px; color: #808080; }
.cb-header-accent .cb-header-time { color: #dedede; }
.cb-header-arrow { position: absolute; right: -5px; top: 0; z-index: 1; background: url(/static/img/icon-cheesboard-arrow.svg) center center no-repeat; width: 5px; height: 27px; }
.cb-header-item:last-child .cb-header-arrow { display: none; }
.headerChessboard_item--highlight-bg { border-left: 1px dashed rgba(86, 235, 255, 0.5); border-right: 1px dashed rgba(86, 235, 255, 0.5); }
.headerChessboard_item--highlight-vertical::after { content: ""; position: absolute; inset: 0; background: rgba(142, 230, 248, 0.1); z-index: 5; }
.headerChessboard_item--highlight-vertical::after:hover { background: rgba(142, 230, 248, 0.17); }
.headerChessboard_item--highlight-title .headerChessboard_item_title { color: #57c0ee; }
.cb-header-info { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.cb-header-info-item { display: flex; flex-direction: row; align-items: center; gap: 2px; }

.current-time-line-segment--line { position: absolute; height: 100%; width: 2px; pointer-events: none; background: #c02956; z-index: 5; }
.current-time-line-segment--half-dot-bottom { position: absolute; width: 7.2px; height: 3.6px; background: #c02956; border: 3.6px solid #c02956; border-bottom: 0; border-top-left-radius: 7.2px; border-top-right-radius: 7.2px; margin-left: -2.6px; z-index: 1; bottom: 0; }
.current-time-line-segment--half-dot-top { position: absolute; top: 0; height: 100%; width: 2px; pointer-events: none; background: #c02956; z-index: 1; }
.current-time-line-segment--half-dot-top::after { content: ""; position: absolute; width: 7.2px; height: 3.6px; background: #c02956; border: 3.6px solid #c02956; border-top: 0; border-bottom-left-radius: 7.2px; border-bottom-right-radius: 7.2px; margin-left: -2.6px; top: 0; z-index: 1; }

.bodyChessboard {flex: 1;}

.floor-container { display: contents; }
.floor-grid { display: grid; position: relative; }
.floor-header { position: sticky; top: 50px; z-index: 10; display: flex; grid-column: 1/-1; height: 30px; background: #000;border-bottom: 1px solid #313131; }
.floor-hcon { position: sticky; top: 0; z-index: inherit; left: 0; display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 3.5px 12px 6.5px; color: rgba(255, 255, 255, 0.7); }
.floor-hcon-title { font-weight: 600; font-size: 14px; position: relative; z-index: 2; }
.floor-items { display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; position: relative; z-index: 2; }
.floor-hcon-backdrop { height: 100%; width: 70px; background: #000; position: absolute; top: 0; left: 0; z-index: 1; }

.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 4; opacity: 0; transition: opacity 0.3s ease; visibility: hidden; }
.overlay--visible { opacity: 1; visibility: visible; }

.chessboard-floors { position: sticky; left: 0; z-index: 10;}
.chessboard-floors-wrapper { width: 70px; position: absolute; }
.chessboard-floor { height: 30px; }
.cell-empty { width: 70px; min-width: 70px; }
.cb-item {display: flex;flex-direction: column;height: 40px;padding: 5px 6px;justify-content: space-between;background: #000;border-bottom: 1px solid #313131;}
.cb-item-number {font-weight: 600;font-size: 12px;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex: 1 0;line-height: 15px;}
.cb-item-count { display: flex ; flex-direction: row; align-items: center; gap: 2px; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.cb-item-count:before { content: ''; width: 10px; height: 10px; background: url(/static/img/icon-people-mini.svg) center center no-repeat; opacity: .4; }
.cb-item-footer {display: flex;align-items: center;}
.cb-item-deposit { width: 10px; height: 10px; background: url(/static/img/icon-cb-deposit.svg) center center no-repeat; opacity: .8; }
.cb-item-type {font-weight: 600;font-size: 10px;color: rgba(255, 255, 255, 0.3);flex: 1 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.cb-item-top { display: flex ; }


#chessboard-reserves { width: 100%; height: 100%; position: absolute; pointer-events: none; }
.cr-reserve { min-width: 28px; height: 39px; position: absolute; cursor: pointer; transform: translate(70px, 30px); will-change: transform; background: #D9F3FE; border-radius: 6px; padding: 5px 6px; color: #211E1E; font-size: 10px; font-weight: 400;pointer-events: auto;z-index: 7;}
.cr-reserve[data-status="3"] { background: #FED27E; }
.cr-reserve[data-status="4"] { background: #8CD78C; }
.cr-reserve[data-status="4"][data-action="flash"] { background: #F49EB2; }
.cr-reserve[data-status="4"][data-action="after-flash"] { background: #D54D4D; }
.cr-reserve[data-status="4"][data-action="after-flash"]:after { content: ''; position: absolute; right: -6px; top: -1px; bottom: 0; width: 15px; height: 15px; background: url(/static/img/icon-warning-2.svg) !important; margin: auto; }
.cr-line-top { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.cr-r-time { font-weight: 500; }
.cr-duration { opacity: 0.4; display: inline-block; padding-left: 3px; }
#chessboard-item-hover { width: 100%; height: 100%; position: absolute; z-index: 11; pointer-events: none; }
.chessboard-hover { background: #31DDFF80; border: 1px dashed #56EBFF; border-radius: 6px; position: relative; display: none; pointer-events: none; }
.chessboard-h-icon { width: 16px; height: 16px; background: url(/static/img/icon-circle-plus.svg) center center no-repeat; background-size: contain; }
.chessboard-hover-lines { position: absolute; top: 0; display: none; pointer-events: none; }
.chessboard-hover-lines:before { content: ''; border-left: 1px dashed #63C6F180; border-right: 1px dashed #63C6F180; height: 400vh !important; transform: translate(0, -200vh); display: block; }
.chessboard-hover-lines:after { content: ''; border-top: 1px dashed #63C6F180; border-bottom: 1px dashed #63C6F180; width: 400vw !important; transform: translate(-200vw, 0); display: block; height: calc(100% - 2px); position: absolute; top: 0;}
.chessboard-hover-lines-second:before { display: none; }
.chessboard-hover-wrapper { display: flex; height: 100%; padding: 2px 7px; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chessboard-h-t2 { opacity: 0.8; }
.chessboard-hover[data-min="true"] .chessboard-h-icon { display: none; }
.chessboard-hover[data-min="true"] .chessboard-hover-wrapper { flex-direction: column; gap: 0; padding-top: 3px; align-items: flex-start; }

.cr-line-middle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 5px; margin-bottom: 3px; }
.cr-r-name {font-weight: 600;}
.cr-r-phone {color: #595E62;}
.cr-line-bottom { display: none; }
.cr-group .cr-line-bottom { display: flex; }
.cr-r-text { opacity: 0.7; }
.cr-no-middle .cr-line-middle { display: none; }

.cell { position: relative; height: 40px; background: #171818; border-bottom: 1px solid #313131; border-left: 1px solid #313131; overflow: visible; cursor: pointer; }

body[data-mobile="chessboard"].leftmodal-open .cb-header { z-index: 222; }
body[data-mobile="chessboard"].leftmodal-open .chessboard-floors { z-index: 222; }
body[data-mobile="chessboard"].leftmodal-open .cb-corner { z-index: 223; }

#chessboard-reserves-temporary { width: 100%; height: 100%; position: absolute; z-index: 223; pointer-events: none; display: none; }
body.leftmodal-open[data-mobile="chessboard"] #chessboard-reserves-temporary {display: block;}
.cr-line-remove { position: absolute; right: 13px; top: 0; margin: auto; width: 26px; height: 100%; z-index: 1; background: url(/static/img/icon-close-red-circle.svg) 2px center no-repeat; cursor: pointer; transition: 0.2s ease; }
.cr-reserve-temporary { cursor: move; }
.cr-line-remove:hover { opacity: 0.7; }
#chessboard-temporary-hover .chessboard-hover-lines:after,
#chessboard-temporary-hover .chessboard-hover-lines:before { background: #8EE6F81A; }
#chessboard-temporary-hover { width: 100%; height: 100%; position: absolute; z-index: 223; pointer-events: none; display: none; }
body.leftmodal-open[data-mobile="chessboard"] #chessboard-temporary-hover {display: block;}
body.leftmodal-open[data-mobile="chessboard"] .background-container { pointer-events: none !important; }
body.leftmodal-open[data-mobile="chessboard"] .bodyChessboard { pointer-events: none; }
body.leftmodal-open[data-mobile="chessboard"] #tabs { display: none !important; }

.hover-color .cb-item-number,
.hover-color .cb-item-type,
.hover-color .cb-header-time{ color: #57C0EE; }

.cr-resize { position: absolute; right: -11px; height: 100%; width: 20px; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; cursor: e-resize; }
.cr-resize:before { content: ''; height: 20px; width: 100%; background: #fff url(/static/img/icon-resize.svg) center no-repeat; border-radius: 8px; }
.cr-move { position: absolute; left: -7px; height: 100%; width: 14px; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cr-move:before { content: ''; height: 20px; width: 100%; background: #fff url(/static/img/icon-move-points.svg) center no-repeat; border-radius: 5px; }

#chessboard-add-btns { width: 100%; height: 100%; position: absolute; z-index: 223; pointer-events: none; display: none; }
body.leftmodal-open[data-mobile="chessboard"] #chessboard-add-btns {display: block;}
#chessboard-add-wrapper { height: 100%; padding-top: 50px; }
.cb-add-btn { height: 40px; display: flex ; align-items: center; padding-left: 24px; cursor: pointer; pointer-events: auto; border-radius: 6px; }
.cb-add-btn span { width: 20px; height: 20px; position: relative; background: url(/static/img/icon-plus-blue.svg); }
.cb-add-btn:hover { background: #ffffff0d; }
.cb-add-btn-none { opacity: 0; pointer-events: none; }
.chessboard-floor-item { opacity: 0; pointer-events: none; overflow: hidden; visibility: hidden; }
.chessboard-floor-item.active { opacity: 1; visibility: visible; overflow: visible; }

#chessboard-item-need-select { width: 100%; height: 100%; position: absolute; z-index: 11; pointer-events: none; }
.chessboard-need-select { background: #31DDFF80; border: 1px dashed #56EBFF; border-radius: 6px; position: relative; display: none; pointer-events: none; }

.chessboard-need-select-btns { position: absolute; top: 100%; left: 0; background: #fff; border-radius: 10px; border-top-left-radius: 2px; overflow: hidden; }
.chessboard-need-select-btn {color: #211E1E;font-size: 12px;font-weight: normal;text-align: left;padding: 6px 14px 6px 13px;display: flex;align-items: center;pointer-events: auto;transition: 0.2s ease;}
.chessboard-need-select-btn:before {content: '';width: 16px;height: 17px;display: block;margin-right: 6px;background: url(/static/img/icon-add-red.svg) no-repeat;}
.chessboard-need-select-btn:first-child { padding-top: 11px; }
.chessboard-need-select-btn:last-child { padding-bottom: 11px; }
.chessboard-need-select-btn:hover { background: #efefef; }
.chessboard-need-select-btn[data-type="open"]:before { background-image: url(/static/img/icon-good-green.svg); }

#chessboard-open-backgound { position: fixed; cursor: pointer; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(15, 16, 16, 0.5); z-index: 12; opacity: 0; visibility: hidden; transition: all 0.2s ease 0s; }
body.panel-second-right-active[data-mobile="chessboard"] #chessboard-open-backgound { opacity: 1; visibility: visible; }
.cr-reserve.cr-reserve-open { z-index: 12; }

.cb-header-table-icon { content: ''; width: 10px; height: 10px; background: url(/static/img/icon-table-mini.svg) center center no-repeat; opacity: .3; margin-right: 1px; display: inline-block; }
.cb-header-count-icon { content: ''; width: 10px; height: 10px; background: url(/static/img/icon-people-mini-2.svg) center center no-repeat; opacity: .3; margin-right: 1px; display: inline-block; }

.floor-hcon-tables,
.floor-hcon-guest { width: 11px; height: 11px; background: url(/static/img/icon-table-mini.svg) center center no-repeat; margin-right: 1px; display: inline-block; opacity: .7; }
.floor-hcon-guest { background: url(/static/img/icon-people-mini-2.svg) center center no-repeat; }


.userline-down { right: 50px; top: 0; font-size: 18px; opacity: 0.6 !important; text-decoration: none; transition: 0.2s ease; width: 50px; height: 50px; line-height: 28px; text-align: center; cursor: pointer; position: fixed; z-index: 11; display: none; }
.userline-down:before,
.userline-down:after { content: ""; left: 12px; top: 15px; position: absolute; width: 15px; height: 1px; transition-timing-function: ease; transition-duration: 0.3s; transition-property: transform; background-color: rgb(255, 255, 255); border-radius: 4px; transform: translate3d(0px, 9px, 0px) rotate( 38deg); }
.userline-down:after { transform: translate3d(0px, 9px, 0px) rotate(-38deg); left: 23px; }
.userline-down:hover { opacity: 0.8 !important; }

@media (max-width: 869px) {
    body[data-mobile="chessboard"] .leftmodal-wrapper[data-type="reservation"] .userline-down { display: block; }
    body[data-mobile="chessboard"] .leftmodal-wrapper[data-type="reservation"] .userline-standart h2 { padding-right: 100px; }

    body[data-mobile="chessboard"].leftmodal-open #main-bg,
    body[data-mobile="chessboard"].leftmodal-open .background-container,
    body[data-mobile="chessboard"].leftmodal-open #leftmodal-bg { transition: transform 0.3s ease !important; }
    body[data-mobile="chessboard"].leftmodal-open #leftmodal,
    body[data-mobile="chessboard"].leftmodal-open #leftmodal h2,
    body[data-mobile="chessboard"].leftmodal-open #leftmodal .userline-down,
    body[data-mobile="chessboard"].leftmodal-open #leftmodal .userline-close { transition: top 0.3s ease !important; }

    body[data-mobile="chessboard"].leftmodal-down #leftmodal,
    body[data-mobile="chessboard"].leftmodal-down #leftmodal h2,
    body[data-mobile="chessboard"].leftmodal-down #leftmodal .userline-down,
    body[data-mobile="chessboard"].leftmodal-down #leftmodal .userline-close { top: calc(100% - 100px) !important; }
    body[data-mobile="chessboard"].leftmodal-down #main-bg,
    body[data-mobile="chessboard"].leftmodal-open .background-container,
    body[data-mobile="chessboard"].leftmodal-down #leftmodal-bg { transform: translateY(calc(100% - 100px)) !important; }
    body[data-mobile="chessboard"].leftmodal-down .userline-down:before,
    body[data-mobile="chessboard"].leftmodal-down .userline-down:after { transform: translate3d(0px, 9px, 0px) rotate(-38deg); }
    body[data-mobile="chessboard"].leftmodal-down .userline-down:after { transform: translate3d(0px, 9px, 0px) rotate(38deg); }

    body[data-mobile="chessboard"].leftmodal-open #leftmodal-bg { box-shadow: #00000059 0 0 50px 14px; }
}