:root {
--player-width: 240px;
--nag-green: #11a838;
--nag-red: #e15952;
--nag-violet: #e756d8;
--nag-yellow: #e79e00;
--nag-green2: #11a83820;
--nag-red2: #e1595220;
--nag-violet2: #e756d820;
--nag-yellow2: #e79e0020;
--nag-blue: #52b5e9;
--nag-gray: gray;
--nag-lightgreen: lightgreen;
--board-bottom-margin: 180px;
}
.body-cover, .body-cover-force, .body-gallery {overflow: hidden !important;}
.body-cover::after, .body-cover-force:after, #link-cover, .body-gallery::after {content: ""; cursor: pointer; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.5); z-index: 101;}
.body-gallery::after {background-color: rgba(0,0,0,.7);}
.sticky-top-10 {position: sticky; top: 10px;}
.win-popup .board-history-moves-box {width: 100% !important;}
.king-white-icon {display: inline-block; height: 30px; width: 27px; background-size: cover; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjZNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTIyLjUgMjVzNC41LTcuNSAzLTEwLjVjMCAwLTEtMi41LTMtMi41cy0zIDIuNS0zIDIuNWMtMS41IDMgMyAxMC41IDMgMTAuNSIgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTEuNSAzN2M1LjUgMy41IDE1LjUgMy41IDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTBWMzd6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTExLjUgMzBjNS41LTMgMTUuNS0zIDIxIDBtLTIxIDMuNWM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwIi8+PC9nPjwvc3ZnPg==");}
.king-black-icon {display: inline-block; height: 30px; width: 27px; background-size: cover; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjYiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMjIuNSAyNXM0LjUtNy41IDMtMTAuNWMwIDAtMS0yLjUtMy0yLjVzLTMgMi41LTMgMi41Yy0xLjUgMyAzIDEwLjUgMyAxMC41IiBmaWxsPSIjMDAwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjxwYXRoIGQ9Ik0xMS41IDM3YzUuNSAzLjUgMTUuNSAzLjUgMjEgMHYtN3M5LTQuNSA2LTEwLjVjLTQtNi41LTEzLjUtMy41LTE2IDRWMjd2LTMuNWMtMy41LTcuNS0xMy0xMC41LTE2LTQtMyA2IDUgMTAgNSAxMFYzN3oiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMyIDI5LjVzOC41LTQgNi4wMy05LjY1QzM0LjE1IDE0IDI1IDE4IDIyLjUgMjQuNWwuMDEgMi4xLS4wMS0yLjFDMjAgMTggOS45MDYgMTQgNi45OTcgMTkuODVjLTIuNDk3IDUuNjUgNC44NTMgOSA0Ljg1MyA5IiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMTEuNSAzMGM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwbS0yMSAzLjVjNS41LTMgMTUuNS0zIDIxIDAiIHN0cm9rZT0iI2VjZWNlYyIvPjwvZz48L3N2Zz4=");}
#win-notifications {position: fixed; z-index: 999; pointer-events: none; top: 0px; right: 0px; height: 100%; width: 240px; padding: 0px; padding-top: 20px;}
.notification-item {padding: 10px 10px; margin-bottom: 20px; border-radius: 6px; background: #48c0fc; color: #fff; border: 1px solid #00000020;}
.notification-item {
min-width: 260px;
max-width: 360px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
line-height: 1.4;
color: #ffffff;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
pointer-events: auto;
/* ===== Right slide animation ===== */
transform: translateX(120%);
opacity: 0;
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.notification-item.is-visible {
transform: translateX(0);
opacity: 1;
}
.notification-item.is-hiding {
transform: translateX(120%);
opacity: 0;
}
/* ===== Types ===== */
.notification-success {
background: #28a745;
}
.notification-error {
background: #dc3545;
}
.notification-warning {
background: #f0ad4e;
}
.notification-info {
background: #343a40;
}
.notification-msg {
background: #343a40;
position: relative;
padding-left: 45px;
}
.notification-msg::before {content: ''; position: absolute; left: 8px; top: 9px; background-size: contain; width: 30px; height: 25px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23298557' class='bi bi-envelope-fill' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");;}
/* Site Win popup BEGIN */
.win-popup {display:none; opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; box-shadow: 0px 0px 5px 0px #555; position: relative; margin: 1.75rem auto; top:0px; width: calc(100% - 60px); max-width: 100%; background: #fff; z-index: 105; border-radius: 6px; border-top: 3px solid var(--color-primary-2);}
.window-lg {width:800px }
.window-xl {width:976px ; min-height: calc(100vh - 60px);}
.window-xxl {max-width:1200px ; }
.window-xxxl {max-width:1680px ; }
.window-md {width:600px ; }
.window-sm {width:300px ; }
.window-sm {
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.win-popup-content {padding:30px; position: relative;}
.win-popup-content iframe {border-radius:4px; }
.win-popup-header {display: flex; align-items: center; height: 60px; padding-left: 30px; position: relative; font-size: 18px; border-bottom: 1px solid #e7e7e7;}
.win-popup-close {display: flex; align-items: center; gap: 5px; color: #262626; cursor: pointer; font-size: 15px; }
.win-popup-close:hover {color: var(--main-lightblue);}
.win-popup-close:hover svg {fill: var(--main-lightblue);}
.win-popup-close svg {fill:#262626; height: 100%;}
.win-popup-top-right {position: absolute; right: 0px; display: flex; align-items: center; gap:20px; top:0px; right: 20px; height: 100%;}
/* .win-popup-content {position: relative; height: calc(100% - 61px); width: 100%; } */
.win-popup-content {position: relative; width: 100%; }
.window-load:before {display: block; content: ''; left: 0px; position: absolute; top:0px; border-radius: 0px 0px 6px 6px; width: 100%; height: 100%; background-color: #f5f5f599; animation: flashLoad 1s infinite alternate;}
.win-bg-gray {background-color: #f6f6f6;}
/*.win-popup select, .win-popup textarea {background-color: #fff; border-radius: 6px;}*/
.win-popup select,
.win-popup input[type=text],
.win-popup input[type=date],
.win-popup input[type=number],
.win-popup input[type=password],
.win-popup input[type=phone],
.win-popup input[type=email],
.win-popup input[type=tel] {
padding-top: 0px;
/* background-color: #fff; */
border: 1px solid #00000016;
padding-bottom: 0px;
height: 40px;
border-radius: 6px;
}
.week-slider {display: flex; align-items: center; background: #f5f5f5; border-radius: 6px; padding: 5px 15px;}
.week-slider input:hover {color: #0d6efd;}
.week-slider span {background: #fff; display: flex; align-items: center; cursor: pointer; border-radius: 6px; padding: 7px 12px;}
.week-slider span:hover {background: #00000015;}
.week-slider input {background: none; width: 130px !important; padding: 0px !important; cursor: pointer; text-align: center; border: none !important;}
/* .win-popup-title {text-transform: uppercase;} */
.win-popup-title i {display: flex; font-size: 12px; font-style: normal; text-transform: none;}
#windows {position: fixed; display: none; left: 0px; top:0px; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; z-index: 103;}
#windows-box {position: fixed; left: 0px; top:0px; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }
/* Site Win popup END */
/* Site Win Gallery BEIN */
/* Основной фон - черная пленка */
/* Контейнер галереи */
.gallery-author-info {display: flex; gap: 8px; color: #f5f5f5; font-size: 14px; line-height: 1.2;}
.gallery-author-ava .avaimg {height: 40px; width: auto;}
#gallery-box {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 100%;
left: 0;
top: 0;
width: 100%;
position: fixed;
z-index: 105;
}
#gallery-box [class*="yandex-panel"] {
display: none !important;
}
/* Основная область с большим фото */
#gallery-img {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
background: url(/img/load6.gif) no-repeat center;
}
#gallery-img img {border-radius: 3px;}
/* Стиль для изображения внутри #gallery-img (будет добавлено через JS) */
#gallery-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
/* Нижняя панель с миниатюрами */
#gallery-bottom {
display: flex;
align-items: center;
height: 80px;
background-color: #00000018;
padding: 10px 15px;
}
/* Контейнер для миниатюр */
#gallery-bottom-images {
flex: 1;
display: flex;
justify-content: center;
gap: 8px;
overflow-x: auto;
padding: 5px 0;
scrollbar-width: thin;
scrollbar-color: #888 #333;
}
/* Стилизация скроллбара для миниатюр */
#gallery-bottom-images::-webkit-scrollbar {
height: 6px;
}
#gallery-bottom-images::-webkit-scrollbar-track {
background: #333;
border-radius: 3px;
}
#gallery-bottom-images::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
#gallery-left-area, #gallery-right-area {position: absolute; display: none; outline: none; top: 0; z-index: 110; border: none; height: calc(100dvh); width: 10%; justify-content: center; align-items: center; background: none;}
#gallery-left-area svg, #gallery-right-area svg {color: #00000033;}
#gallery-left-area:active, #gallery-right-area:active {border: none; background-color: #00000010;}
#gallery-left-area:hover svg, #gallery-right-area:hover svg {color: #f4a858;}
#gallery-left-area {left: 0; }
#gallery-right-area {right: 0; }
#gallery-box.is-multi-images #gallery-left-area, #gallery-box.is-multi-images #gallery-right-area {display: flex;}
#gallery-close-area {position: absolute; z-index: 110; right: 10px; top: 10px; border-radius: 50%; height: 15%; width: 15%; display: flex; justify-content: right; border: none; background: none; cursor: pointer;}
#gallery-close-area svg {color: #b1b1b1; height: 50px; width: auto; display: none; margin: 25px 25px 0px 0px;}
#gallery-close-area:hover svg {color: #f4a858; display: block;}
/* Стиль для миниатюр (добавляются через JS) */
.thumbnail__gal {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s ease;
opacity: 0.7;
}
.thumbnail:hover {
opacity: 0.9;
}
.thumbnail.active {
border-color: #f3a757;
opacity: 1;
border-radius: 6px;
transform: scale(1.05);
}
.thumbnail__gal img {object-fit: cover; width: 100%; height: 100%;}
.thumbnail img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
#gallery-bottom-left,
#gallery-bottom-right {
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
#gallery-bottom {
height: 100px;
}
.thumbnail {
width: 70px;
height: 70px;
}
#gallery-bottom-left,
#gallery-bottom-right {
width: 35px;
height: 35px;
}
}
@media (max-width: 480px) {
#gallery-bottom {
height: 90px;
padding: 8px 10px;
}
.thumbnail {
width: 60px;
height: 60px;
}
#gallery-bottom-left,
#gallery-bottom-right {
width: 30px;
height: 30px;
font-size: 16px;
}
}
/* Site Win Gallery END */
/* Week Slider BEGIN */
.week-slider {display: inline-flex;}
/* Week Slider END */
/* Board Arrows BEGIN */
#board_wrapper{ position: relative; }
#board{ position: absolute; top: 0px; left: 0px; display: block;}
#board { z-index: -1; }
.board-main-box canvas {
display: block;
opacity: 0.8;
padding: 2px;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
/* Board Arrows BEGIN */
/* Nag BEGIN */
/* Определяем CSS-переменные для цветов */
/* NAG BEGIN */
.cg-wrap [class*=" nag"]::before {
display: flex; width: 25px; height: 25px; border-radius: 50%; color: #fff; justify-content: center; align-items: center; position: absolute; right: -10px; top: -7px; z-index: 1; box-shadow: 1px 1px 2px 0px #333;
}
/* .chessnotation [class*=" nag"]::before {
width: 25px; display: flex; justify-content: center; align-items: center; position: absolute; right: 0px;
} */
.icon-nag {display: inline-flex; margin-left: 3px;}
/* .pgnsan[class*=" nag"] {
padding-right: 25px;
} */
#call-to-lesson-modal {
display: none;
position: fixed;
z-index: 99999;
width: 600px;
max-width: calc(100% - 40px);
padding: 20px 30px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}
#call-to-lesson-modal-close {width: 30px; height: 30px; cursor: pointer; display: flex; justify-content: center; align-items: center; position: absolute; right: -5px; top:-5px; border-radius: 50%; background: #fff; border: 1px solid #d3d3d3;}
#call-to-lesson-modal-close svg {width: 25px; height: auto; color: #454545;}
#call-to-lesson-modal-title {
display: block;
padding: 14px 28px;
border-radius: 10px;
background: linear-gradient(135deg, #ff8a00, #e52e71);
color: white;
font-size: 20px;
font-weight: 600;
text-align: center;
letter-spacing: 0.3px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
}
#call-to-lesson-modal-btns {display: flex; justify-content: space-around;}
#call-to-lesson-modal-btns button {padding: 10px 10px; border:none; border-radius: 6px;; cursor: pointer; width: calc(50% - 20px);}
#call-to-lesson-modal-btns button:focus {outline: 1px solid -webkit-focus-ring-color; outline-offset: 2px;}
#call-to-lesson-modal-cancel {background: #8e8e8e; color:#fff}
#call-to-lesson-modal-apply {background: #278557; color: #fff;}
.btn-frame {border: 1px solid #6c757d; color: #454545;}
.btn-frame:hover {border: 1px solid #00000060}
/* #call-to-lesson-modal-title:hover {
transform: scale(1.03);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
} */
#call-to-lesson-modal-title b {
font-weight: 500;
color: #fff;
text-shadow: 0 0 5px rgba(255,255,255,0.4);
}
#call-to-lesson-modal-countdown {
position: relative;
width: 80px;
height: 80px;
margin: 20px auto;
}
#call-to-lesson-modal-countdown .circle-countdown {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 5px solid #ccc;
border-top-color: #4CAF50;
border-radius: 50%;
animation: spin 1s linear infinite;
}
#call-to-lesson-modal-countdown span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #333;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.table.table-striped thead tr td {background-color: #2e5a6d21 !important;}
#camera-test-box {display: flex; justify-content: space-between;}
#camera-test-left {width: 400px;}
#camera-test-right {width: calc(100% - 420px);}
#camera-test-frame {position: sticky; top: 10px;}
.unit-icon-title-text {background: #79a6af21; padding: 15px; border-radius: 6px; display: flex; flex-direction: column; margin-bottom: 20px; gap: 5px;}
.unit-icon-title-text icon svg {height: 20px; width: auto;}
.unit-icon-title-text icon {display: block; display: flex; }
.unit-icon-title-text div {display: flex; align-items: center; gap: 5px;}
.unit-icon-title-text div b {font-weight: 500; }
.unit-icon-title-text p {margin-bottom: 0; padding-bottom: 0;}
#user-profile-box {display: flex;}
#user-profile-box-mob {display: flex; flex-direction: column;}
#user-profile-left {width: 280px; padding-right: 30px; border-right: 1px solid #00000020; min-height: 500px;}
#user-profile-content {width: calc(100% - 250px); padding-left: 25px;}
#user-profile-menu {padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px;}
#user-profile-menu li {display: block; cursor: pointer; padding: 10px 10px; display: flex; align-items: center; gap: 10px; border-radius: 12px;}
#user-profile-menu li svg {height: 25px; width: auto; color: #002169;}
#user-profile-menu li:hover, .user-profile-menu-ac {background: #00000020;}
#school-profile-box {display: flex;}
#school-profile-left {width: 280px; padding-right: 30px; border-right: 1px solid #00000020; min-height: 500px;}
#school-profile-content {width: calc(100% - 250px); padding-left: 25px;}
#school-profile-menu {padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px;}
#school-profile-menu li {display: block; cursor: pointer; padding: 10px 10px; display: flex; align-items: center; gap: 10px; border-radius: 12px;}
#school-profile-menu li svg {height: 25px; width: auto; color: #002169;}
#school-profile-menu li:hover, .school-profile-menu-ac {background: #00000020;}
.labels-btns-list label {display: flex; cursor: pointer; align-items: center; justify-content: space-between; padding: 15px 20px; background: #00000012; border-radius: 6px; margin-bottom: 15px;}
.labels-btns-list label:hover {color: #000; box-shadow: 0 0 3px 0px #f0f0f0;}
.labels-btns-list label input {height: 18px; width: 18px;}
.student-level-knowledge-name span {color: #757575; font-size: 14px;}
.title-input-box {background: #edeff0; padding: 20px; border-radius: 12px;}
.title-input-box b {font-weight: 400; font-size: 18px;}
.title-input-box div {display: flex; align-items: center; justify-content: space-between;}
.title-input-box div input {width: 100%;}
.title-input-box div button {background: #fff; margin-left: 20px;}
.tutorial-video-item {text-decoration: none; border-radius: 6px;}
.tutorial-video-item:hover {box-shadow: 0px 0px 3px 1px #dedede;}
.tutorial-video-item title {display: block;}
.tutorial-video-item cover {display: block; position: relative; padding: 20px; background: url(/images/bg/orange-chess.jpg) no-repeat; background-size: cover; height: 300px; width: 100%; border-radius: 6px; }
.tutorial-video-item span {font-family: EtoMoiFont; font-size: 41px; margin-top: 25px; display: block;}
.tutorial-video-item-top {display: flex; gap: 10px; align-items: center; justify-content: space-between;}
.tutorial-video-item-top {display: flex; align-items: center;}
.tutorial-video-item-top img {height: 25px; width: auto;}
.tutorial-video-item-top b {background: #00000020; border-radius: 6px; height: 28px; padding: 0px 10px;; display: inline-flex; align-items: center;}
.tutorial-video-item-top svg {height: 28px; position: relative; top:-1px; width: auto; color: #00000040;}
.tutorial-video-item-viewed svg {color: green;}
.tutorial-video-item title {display: block; margin-top:5px; height: 50px;}
.tutorial-video-item ava {position: absolute; right: 20px; bottom: 0px;}
.tutorial-video-item ava img {height: 60px;}
.tutorial-video-item date {position: absolute; font-size: 18px; left: 20px; bottom: 20px;}
.tutorial-video-item date i {font-style: normal; color: #00000070; display: inline-block; margin-left: 5px;}
#tutorial-gudes-content-top {display: flex; align-items: center; justify-content: space-between;}
#tutorial-gudes-select {max-width: 500px; width: 100%; height: 40px;}
#school-head-classroom-enter-box {display: flex; gap: 20px; width: fit-content; margin: 20px 0; align-items: center; padding: 20px; background: #698eae20; border-radius: 6px;}
#school-head-classroom-enter-btn { border-radius: 6px; width: 100%; text-transform: uppercase;}
.smile-survey-box {margin: 20px auto; width: fit-content; display: block; background: #00000012; border-radius: 6px; padding: 20px;}
.smile-survey-box p {display: block;}
.smile-survey-box span {cursor: pointer; cursor: pointer;}
.smile-survey-box svg {height: 35px; width: auto; color: #00000040;}
.smile-survey-box span:hover svg {color: #f4a858;}
.smile-survey-smiles {display: flex; gap: 20px; justify-content: center;}
.survey-need-translation {display: flex; gap:15px; background: #e8efff; padding: 15px; border-radius: 6px;;}
.notification-info-icon {width: 50px; display: flex; align-items: center;}
.notification-info-icon svg {width: 50px; height: auto;}
.survey-need-translation span {border-bottom: 1px dotted; display: inline-block; margin-right: 20px; cursor: pointer;}
.survey-need-translation span:hover {color: var(--link-color); }
.survey-useful {text-align: center; position: relative; margin-top:30px; color: #757575; font-weight: 300;}
.survey-useful svg {height: 25px; width: auto; fill: #767b8b;}
.survey-useful span:hover svg {fill: #000;}
.survey-useful span {width: 35px; line-height: 35px; box-shadow: 0px 0px 2px 0px #bdbdbd; margin-left: 8px; display: inline-block; text-align: center; background: #f1f1f1; border-radius: 50%; cursor: pointer;}
#chess-coach-benefits svg {height: 25px; width: auto; color: #278557;}
#coach-join-section {background: url("/images/bg/shape_01.png") no-repeat 0px -250px;}
#coach-join-section-content {background: url("/images/bg/shape_05.png") no-repeat right -250px;}
#school-application-form input {background: #00000012; border-radius: 6px; border: none; padding: 5px 10px;}
#school-application-form .form-line {margin-bottom: 15px;}
#school-application-form .form-line b { font-weight: 400; color: #222; display: block; margin-bottom: 3px;}
/* .user-site-status {display: inline-flex; align-items: center; gap: 5px; background: #00000020; border-radius: 12px; padding: 2px 7px;} */
.user-site-status {display: flex; align-items: center; gap: 5px; border-radius: 12px; }
.user-site-status div {display: flex; align-items: center;}
.user-site-status svg {height: 12px !important; width: auto; color: #515151;}
.user-site-status-1 svg {color: #006eb0;}
.user-site-status-3 svg, .user-site-status-2 svg {color: #b9ad3e;}
.user-site-status-4 svg, .user-site-status-5 svg {color: #8a7351;}
.user-site-status::before {display: none;}
.user-site-status.classroom-student-online svg {color: #ffc107 !important;}
.user-site-status.classroom-student-online2 svg {color: #98ce44 !important;}
.user-site-status.classroom-student-disabled-camera svg {color: #F16D7A !important;}
#classroom-top-btns li {display: flex; align-items: center; gap: 5px;}
#classroom-top-btns button {height: 46px;}
.btn-icon-circle {background-color: #fff; aspect-ratio: 1; border: none; outline: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.btn-shadow-red {box-shadow: 0px 0px 10px 0px #ff00007d;}
.btn-shadow-green {box-shadow: 0px 0px 10px 0px #27cd41;}
#classroom-lesson-finish-box {background-color: #f5f5f5; display: flex; padding: 20px; overflow-y: scroll;}
.container-classroom-chat-bottom #classroom-lesson-finish-box {height: 50%;}
.container-classroom-chat-top #classroom-lesson-finish-box {height: 100%; display: flex; align-items: baseline; font-size: 21px; gap: 10px;}
#classroom-lesson-finish-themes {margin-top: 20px; font-size: 14px;}
#classroom-lesson-finish-users {font-size: 14px;}
#classroom-lesson-finish-theme div {margin-top: 5px;}
#classroom-lesson-finish-themes span, #classroom-lesson-finish-users span {display: inline-block; padding: 1px 5px; border-radius: 6px; background: #00000020; margin-left: 5px;;}
.theme-item-user {display: flex; align-items: center; gap: 5px;}
.theme-item-user img {height: 25px; width: 25px;}
#class-top-dashboard, #class-top-homepage {display: inline-block; cursor: pointer;}
#class-top-dashboard svg, #class-top-homepage svg {height: 30px; width: auto; color: #515151; cursor: pointer;}
#class-top-dashboard:hover svg, #class-top-homepage:hover svg {color: #000;}
#class-top-btns.user-status-1 #classroom-content-type-btns li {cursor: auto;}
#class-controls #user-menu {top:inherit !important; bottom: 60px;}
.controls-lines-title {margin-bottom: 5px; color: #777; }
.controls-line title {text-transform: capitalize;}
.controls-lines, .controls-topics {background: #fff; box-shadow: 0px 0px 5px 0px #dedede47; border-radius: 6px; margin-bottom: 20px; padding: 15px; }
.controls-line {display: flex; justify-content: space-between; align-items: center; padding: 12px; position: relative; cursor: pointer;}
/* .controls-line:hover {background: #00000020;} */
.controls-line:hover icon svg, .controls-line:hover icon title, .controls-line:hover .chevron-right svg {color: #000;}
.controls-line::after {content: ''; position: absolute; display: block; bottom: 0px; left: 60px; width: calc(100% - 75px); border-bottom: 1px solid #dedede;}
.controls-lines .controls-line:last-child::after {border-bottom: none;}
.controls-line svg {height: 20px; width: auto;}
.controls-line .ava-img {height: 35px; width: auto; border-radius: 50%;}
.controls-topics .attendance-form-curriculum {display: flex; justify-content: space-between; align-items: center; }
.controls-topics .attendance-form-curriculum {gap: 6px;}
.controls-topics .attendance-form-curriculum .attendance-form-curriculum-search {flex: 1 1 auto; min-width: 0;}
.controls-topics .attendance-form-curriculum .attendance-form-curriculum-actions {display: flex; gap: 4px; flex: 0 0 auto;}
.controls-topics .attendance-form-curriculum select {width: calc(50% - 15px); border: 1px solid #aeaeae;}
.controls-topics .attendance-form-curriculum button {width: 20px; padding: 0px; background: none; outline: none; cursor: pointer; border:none;}
.controls-topics .attendance-form-curriculum button.attendance-form-curriculum-add-btn,
.controls-topics .attendance-form-curriculum button.attendance-form-curriculum-del-btn,
.controls-topics .attendance-form-curriculum button.attendance-form-curriculum-catalog-btn {width: 30px; min-width: 30px; border: 1px solid #00000016; background: #fff;}
.controls-topics .attendance-form-curriculum button svg {width: 20px; height: auto; color: #515151;}
.controls-topics .attendance-form-curriculum button:hover svg {color: #000;}
#controls-students-extra-btns button {border: none; background: none; cursor: pointer; outline: none;}
#controls-students-extra-btns button svg {color: #979797;}
#controls-students-extra-btns button:hover svg {color: #000;}
#classroom-student-topic-section, #classroom-student-topic-theme {max-width: 500px; overflow: hidden; text-overflow: ellipsis; }
.attendance-form-curriculum {margin-bottom: 15px;}
.attendance-form-curriculum:last-child {margin-bottom: 0px;}
#attendance-lesson-title {display: flex; align-items: center; gap: 20px;}
#win-curriculum-copy-wrap {position: fixed; background-color: #00000024; display: none; left: 0px; top:0px; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; z-index: 203;}
.win-curriculum-sm {position: fixed; min-height: 100px; top: 50%; left: 50%; width: 400px; transform: translate(-50%, -50%); max-width: 100%; background: #fff; border-radius: 6px; z-index: 205; box-shadow: 0 10px 20px -5px rgba(0,0,0,.4);}
.win-curriculum-sm-top {padding: 10px 20px; position: relative; border-radius: 6px 6px 0px 0px; background: #eeeeee;}
.win-curriculum-sm-top .btn-hide {position: absolute; top:0px; right: 0px; border: none; background: none; outline: none; width: 30px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.win-curriculum-sm .btn-hide svg {color: #515151; height: 25px; width: auto;}
.win-curriculum-sm-top .btn-hide:hover svg {color: #000;}
.win-curriculum-sm-content {padding: 10px 20px;}
.win-curriculum-sm-content select {background-color: #0275ff08; cursor: pointer;}
.win-curriculum-sm-types label {width: 100%; cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 5px 10px; border-radius: 6px; border:1px solid #dedede;}
.win-curriculum-sm label:hover {background: #dedede;}
#win-theme-copy {top: 25% !important;}
.controls-line icon {width: 20; display: block;}
.controls-line check {width: 20px; display: block; min-height: 10px;}
.controls-line check svg {color: #278557;}
.controls-line title {width: calc(100% - 40px); padding: 0px 10px 0px 20px; display: block;}
.controls-line name {display: block; width: calc(100% - 135px); padding: 0px 10px 0px 20px; }
.controls-line buttons {display: flex; width: 205px; gap: 5px; justify-content: end; }
.controls-line button {border: none; display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; border-radius: 50%; outline: none; background: none; cursor: pointer; padding: 0px;}
.controls-line button:hover {background-color: #f5f5f5;}
.controls-line-student-btn-blank {height: 25px; display: none; width: 120px; background: #dedede; border-radius: 12px;;}
.settings-box-load .controls-line-student-btn-blank {display: block;}
.controls-line .chevron-right {width: inherit !important;}
.controls-line .chevron-right:hover {background: none;}
#classroom-exit-btn {background: #f0d9b5; border-radius: 6px; cursor: pointer; padding: 5px 10px; border: 1px solid #00000010;}
@media (max-width: 1650px) {
/* #classroom-screen-btns {display: none !important;} */
#classroom-chat-view-btns {display: none !important; }
}
/* @media (max-width: 1250px) {
#classroom-content-type-btns {display: none !important;}
} */
.icon-nag.nag0 {color: var(--nag-green) !important;}
.nag0::before { content: "○"; }
.nag1::before { content: "!"; }
.nag2::before { content: "?"; }
.nag3::before { content: "!!"; }
.nag4::before { content: "??"; }
.nag5::before { content: "!?"; }
.nag6::before { content: "?!"; }
.nag7::before { content: "□"; }
.nag22::before { content: "⊙"; }
.nag10::before { content: "="; }
.nag13::before { content: "∞"; }
.nag14::before { content: "±"; }
.nag15::before { content: "∓"; }
.nag16::before { content: "+-"; }
.nag17::before { content: "-+"; }
.nag18::before { content: "+-"; }
.nag19::before { content: "-+"; }
.nag32::before { content: "N"; }
.nag36::before { content: "↑↑"; }
.nag40::before { content: "↑"; }
.nag132::before { content: "→"; }
.nag138::before { content: "⇆"; }
.nag140::before { content: "⊕"; }
.nag146::before { content: "=∞"; }
.nag44::before { content: "∆"; }
.nag1_text, .nag1_text b, .nag1_text index {color: var(--nag-green) !important;}
.nag2_text, .nag2_text b, .nag2_text index {color: var(--nag-yellow) !important;}
.nag3_text, .nag3_text b, .nag3_text index {color: var(--nag-green) !important;}
.nag4_text, .nag4_text b, .nag4_text index {color: var(--nag-red) !important;}
.nag5_text, .nag5_text b, .nag5_text index {color: var(--nag-violet) !important;}
.nag6_text, .nag6_text b, .nag6_text index {color: var(--nag-blue) !important;}
.cg-wrap {aspect-ratio: 1;}
.cg-wrap .nag1::before {background: var(--nag-green); }
.cg-wrap .nag2::before {background: var(--nag-yellow); }
.cg-wrap .nag3::before {background: var(--nag-green); }
.cg-wrap .nag4::before {background: var(--nag-red); }
.cg-wrap .nag5::before {background: var(--nag-violet); }
.cg-wrap .nag6::before {background: var(--nag-blue); }
.cg-wrap .nag7::before {background: var(--nag-gray); }
.cg-wrap piece::before {background: var(--nag-blue); }
.pgnsan.nag1, .pgnsan.nag1 b {color: var(--nag-green);}
.pgnsan.nag2, .pgnsan.nag2 b {color: var(--nag-yellow);}
.pgnsan.nag3, .pgnsan.nag3 b {color: var(--nag-green);}
.pgnsan.nag4, .pgnsan.nag4 b {color: var(--nag-red);}
.pgnsan.nag5, .pgnsan.nag5 b {color: var(--nag-yellow);}
.pgnsan.nag6, .pgnsan.nag6 b {color: var(--nag-blue);}
.pgnsan.nag7, .pgnsan.nag7 b {color: var(--nag-gray);}
/* Nag END */
/* Feed BEGIN */
#feedBox {width: 550px; max-width: 100%; margin: 0 auto;}
.feed {background: #fff; border-radius: 6px; margin-bottom: 30px; box-shadow: 1px 0px 2px 1px #00000005;}
.feed-top {padding: 10px 20px; border-bottom: 1px solid #00000015; display: flex; align-items: center; justify-content: space-between;}
.feed-user { display: flex; align-items: center; gap: 10px;}
.feed-user img {height: 40px; width: auto;}
.feed-date {color: #515151;}
.feed-title {padding: 10px 20px 7px 20px; font-size: 21px; font-weight: 400;}
.feed-text {padding: 0px 20px 10px 20px;}
.feed-img {position: relative; cursor: pointer; height: 366.66px; transition: background-image 0.2s ease; background-color: #fff; background-size: cover; background-position: center;}
.feed-img img { max-width: 100%; border-radius: 0px 0px 0px 0px; cursor: pointer;}
.feed-img:hover::before {content: ''; pointer-events: none; cursor: pointer; display: flex; position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); border-radius: 50%; height: 50px; width: 50px; background-size: 60% !important; background: #00000070 no-repeat 12px center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-play-fill' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E");}
.feed-video video {border-radius: 6px;}
.feed-bottom {padding: 0px 20px 20px 20px; display: flex; align-items: center; justify-content: space-between;}
.feed-like-btns {background: #00000012; display: inline-flex; gap: 10px; align-items: center; border-radius: 6px;}
.feed-like-btns button {outline: none; cursor: pointer; padding: 5px 10px; border: none; background-color: transparent; }
.feed-like-btns button span {display: flex; height: 25px; width: 25px; background-size: cover !important;}
.feed-icon-like {border-radius: 6px 0px 0px 6px; }
.feed-icon-dislike {border-radius: 0px 6px 6px 0px;}
.feed-icon-like:hover, .feed-icon-dislike:hover {background-color: #00000020;}
.feed-icon-like span {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-hand-thumbs-up' viewBox='0 0 16 16'%3E%3Cpath d='M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2 2 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a10 10 0 0 0-.443.05 9.4 9.4 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a9 9 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.2 2.2 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.9.9 0 0 1-.121.416c-.165.288-.503.56-1.066.56z'/%3E%3C/svg%3E");;}
.feed-icon-dislike span { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-hand-thumbs-down' viewBox='0 0 16 16'%3E%3Cpath d='M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856s-.036.586-.113.856c-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a10 10 0 0 1-.443-.05 9.36 9.36 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a9 9 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581s-.027-.414-.075-.581c-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.2 2.2 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.9.9 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1'/%3E%3C/svg%3E");}
.feed-icon-like-check span, .thump-icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-hand-thumbs-up-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a10 10 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733q.086.18.138.363c.077.27.113.567.113.856s-.036.586-.113.856c-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.2 3.2 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.8 4.8 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z'/%3E%3C/svg%3E");}
.feed-icon-dislike-check span {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-hand-thumbs-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.956 14.534c.065.936.952 1.659 1.908 1.42l.261-.065a1.38 1.38 0 0 0 1.012-.965c.22-.816.533-2.512.062-4.51q.205.03.443.051c.713.065 1.669.071 2.516-.211.518-.173.994-.68 1.2-1.272a1.9 1.9 0 0 0-.234-1.734c.058-.118.103-.242.138-.362.077-.27.113-.568.113-.856 0-.29-.036-.586-.113-.857a2 2 0 0 0-.16-.403c.169-.387.107-.82-.003-1.149a3.2 3.2 0 0 0-.488-.9c.054-.153.076-.313.076-.465a1.86 1.86 0 0 0-.253-.912C13.1.757 12.437.28 11.5.28H8c-.605 0-1.07.08-1.466.217a4.8 4.8 0 0 0-.97.485l-.048.029c-.504.308-.999.61-2.068.723C2.682 1.815 2 2.434 2 3.279v4c0 .851.685 1.433 1.357 1.616.849.232 1.574.787 2.132 1.41.56.626.914 1.28 1.039 1.638.199.575.356 1.54.428 2.591'/%3E%3C/svg%3E");}
.menu-feed svg {color: #f5a858;}
.feed-hightlight {background-color: #5b8bca40;}
/* .menu-feed {display: block; position: relative;}
.menu-feed::before {content: ''; display: block; position: absolute; height: 20px; width: 20px; background-size: cover !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bell-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901'/%3E%3C/svg%3E");;} */
.feed-copy-btn {border: none; background: none; cursor: pointer;}
/* Feed END */
/* Radio ios BEGIN */
.form-switch .form-check-input{
width: 2em;
margin-left: -2.5em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
background-position: left center;
border-radius: 2em;
transition: background-position .15s ease-in-out;
}
.form-switch .form-check-input:focus {
box-shadow: none !important;
border: 1px solid #777;
}
.form-check-input {
outline: none;
flex-shrink: 0;
width: 1em;
height: 1em;
margin-top: .25em;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
-webkit-print-color-adjust: exact;
color-adjust: exact;
print-color-adjust: exact;
}
.form-check-input:checked {
background-color: #278557;
border-color: #278557;
/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); */
}
/* Radio ios END */
.gap10 {gap: 10px;}
/* Piece BEGIN */
.pawn-white {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==")}
.bishop-white {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PC9nPjwvc3ZnPg==")}
.knight-white {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==")}
.rook-white {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy0zdi00aDIxdjRIMTJ6bS0xLTIyVjloNHYyaDVWOWg1djJoNVY5aDR2NSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMzQgMTRsLTMgM0gxNGwtMy0zIi8+PHBhdGggZD0iTTMxIDE3djEyLjVIMTRWMTciIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMxIDI5LjVsMS41IDIuNWgtMjBsMS41LTIuNSIvPjxwYXRoIGQ9Ik0xMSAxNGgyMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4=")}
.queen-white {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDEyYTIgMiAwIDEgMS00IDAgMiAyIDAgMSAxIDQgMHptMTYuNS00LjVhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAwek00MSAxMmEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTE2IDguNWEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTMzIDlhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAweiIvPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi0xMi03IDExVjExbC01LjUgMTMuNS0zLTE1LTMgMTUtNS41LTE0VjI1TDcgMTRsMiAxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTkgMjZjMCAyIDEuNSAyIDIuNSA0IDEgMS41IDEgMSAuNSAzLjUtMS41IDEtMS41IDIuNS0xLjUgMi41LTEuNSAxLjUuNSAyLjUuNSAyLjUgNi41IDEgMTYuNSAxIDIzIDAgMCAwIDEuNS0xIDAtMi41IDAgMCAuNS0xLjUtMS0yLjUtLjUtMi41LS41LTIgLjUtMy41IDEtMiAyLjUtMiAyLjUtNC04LjUtMS41LTE4LjUtMS41LTI3IDB6IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPjxwYXRoIGQ9Ik0xMS41IDMwYzMuNS0xIDE4LjUtMSAyMiAwTTEyIDMzLjVjNi0xIDE1LTEgMjEgMCIgZmlsbD0ibm9uZSIvPjwvZz48L3N2Zz4=")}
.king-white {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjZNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTIyLjUgMjVzNC41LTcuNSAzLTEwLjVjMCAwLTEtMi41LTMtMi41cy0zIDIuNS0zIDIuNWMtMS41IDMgMyAxMC41IDMgMTAuNSIgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTEuNSAzN2M1LjUgMy41IDE1LjUgMy41IDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTBWMzd6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTExLjUgMzBjNS41LTMgMTUuNS0zIDIxIDBtLTIxIDMuNWM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwIi8+PC9nPjwvc3ZnPg==")}
.pawn-black {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==")}
.bishop-black {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48L2c+PC9zdmc+")}
.knight-black {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjZWNlY2VjIiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMjQuNTUgMTAuNGwtLjQ1IDEuNDUuNS4xNWMzLjE1IDEgNS42NSAyLjQ5IDcuOSA2Ljc1UzM1Ljc1IDI5LjA2IDM1LjI1IDM5bC0uMDUuNWgyLjI1bC4wNS0uNWMuNS0xMC4wNi0uODgtMTYuODUtMy4yNS0yMS4zNC0yLjM3LTQuNDktNS43OS02LjY0LTkuMTktNy4xNmwtLjUxLS4xeiIgZmlsbD0iI2VjZWNlYyIgc3Ryb2tlPSJub25lIi8+PC9nPjwvc3ZnPg==")}
.rook-black {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy41LTdsMS41LTIuNWgxN2wxLjUgMi41aC0yMHptLS41IDR2LTRoMjF2NEgxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTE0IDI5LjV2LTEzaDE3djEzSDE0eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTQgMTYuNUwxMSAxNGgyM2wtMyAyLjVIMTR6TTExIDE0VjloNHYyaDVWOWg1djJoNVY5aDR2NUgxMXoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTEyIDM1LjVoMjFtLTIwLTRoMTltLTE4LTJoMTdtLTE3LTEzaDE3TTExIDE0aDIzIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4=")}
.queen-black {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIHN0cm9rZT0ibm9uZSI+PGNpcmNsZSBjeD0iNiIgY3k9IjEyIiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSI5IiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMjIuNSIgY3k9IjgiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzMSIgY3k9IjkiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjEyIiByPSIyLjc1Ii8+PC9nPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi41LTEyLjVMMzEgMjVsLS4zLTE0LjEtNS4yIDEzLjYtMy0xNC41LTMgMTQuNS01LjItMTMuNkwxNCAyNSA2LjUgMTMuNSA5IDI2eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNOSAyNmMwIDIgMS41IDIgMi41IDQgMSAxLjUgMSAxIC41IDMuNS0xLjUgMS0xLjUgMi41LTEuNSAyLjUtMS41IDEuNS41IDIuNS41IDIuNSA2LjUgMSAxNi41IDEgMjMgMCAwIDAgMS41LTEgMC0yLjUgMCAwIC41LTEuNS0xLTIuNS0uNS0yLjUtLjUtMiAuNS0zLjUgMS0yIDIuNS0yIDIuNS00LTguNS0xLjUtMTguNS0xLjUtMjcgMHoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTExIDM4LjVhMzUgMzUgMSAwIDAgMjMgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMTEgMjlhMzUgMzUgMSAwIDEgMjMgMG0tMjEuNSAyLjVoMjBtLTIxIDNhMzUgMzUgMSAwIDAgMjIgMG0tMjMgM2EzNSAzNSAxIDAgMCAyNCAwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiLz48L2c+PC9zdmc+")}
.king-black {background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjYiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMjIuNSAyNXM0LjUtNy41IDMtMTAuNWMwIDAtMS0yLjUtMy0yLjVzLTMgMi41LTMgMi41Yy0xLjUgMyAzIDEwLjUgMyAxMC41IiBmaWxsPSIjMDAwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjxwYXRoIGQ9Ik0xMS41IDM3YzUuNSAzLjUgMTUuNSAzLjUgMjEgMHYtN3M5LTQuNSA2LTEwLjVjLTQtNi41LTEzLjUtMy41LTE2IDRWMjd2LTMuNWMtMy41LTcuNS0xMy0xMC41LTE2LTQtMyA2IDUgMTAgNSAxMFYzN3oiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMyIDI5LjVzOC41LTQgNi4wMy05LjY1QzM0LjE1IDE0IDI1IDE4IDIyLjUgMjQuNWwuMDEgMi4xLS4wMS0yLjFDMjAgMTggOS45MDYgMTQgNi45OTcgMTkuODVjLTIuNDk3IDUuNjUgNC44NTMgOSA0Ljg1MyA5IiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMTEuNSAzMGM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwbS0yMSAzLjVjNS41LTMgMTUuNS0zIDIxIDAiIHN0cm9rZT0iI2VjZWNlYyIvPjwvZz48L3N2Zz4=")}
/* Piece END */
/* School BEGIN */
#school-menu-box {margin-top: 10px; margin-bottom: 20px; border-bottom: 1px solid #e7e7e7;}
#school-menu {list-style: none; padding: 0; margin: 0; display: flex;}
#school-menu li {margin: 0; display: inline-flex; }
#school-connect-btn {border: 1px solid #b1b1b1; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 6px; padding: 5px 15px; cursor: pointer; background: none; width: 100%;}
#school-connect-btn:hover {background: #f5f5f5;}
#school-connect-btn svg {color: #739f3d; height: 30px; width: auto;}
#school-menu a {
display: inline-flex;
justify-content: center;
padding: 10px 20px;
text-decoration: none;
color: #454545;
position: relative;
}
#school-contact { gap:5px; display: flex; justify-content: space-between; border: 1px solid #dedede; border-radius: 6px; padding: 20px;;}
#school-contact-list {display: flex; font-size: 21px; flex-direction: column; gap:5px; font-size: 21px; display: flex; }
#school-contact-list, #school-contact-form {width: calc(50% - 20px);}
.school-contact-form-win {width: 100% !important;}
.school-contact-form-win .callback-form {background: none !important;}
.school-contact-form .option-btns span {height: 38px;}
.school-contact-title {font-style: inherit; font-size: 32px;;}
.school-contact-form input, .school-contact-form select, .school-contact-form textarea {border:none !important; background-color: #00000010; width: 100%;}
#school-menu-promo {cursor: pointer;}
#school-connect-btn {text-transform: none;}
#school-reg-box {display: flex; justify-content: center; gap:20px;}
#school-reg-box button {min-width: calc(250px); height: 45px;}
#school-reg-box button:hover {border: 1px solid #000;}
#school-map-box {display: flex; justify-content: space-between; border: 1px solid #dedede; border-radius: 6px; }
#school-map-left, #school-map-right {width: calc(50% - 20px);}
#school-map-right {padding: 10px;}
#school-map-container {height: calc(40dvh); width: 100%; border-radius: 6px 0px 0px 6px;}
#school-menu a:hover {background: #f9f9f9;}
.school-menu-ac:before {position: absolute; content: ''; bottom: -1px; left: 0px; width: 100%; height: 2px; background: #f4a858;}
#school-contact-list span {color: #757575;}
#school-menu a:hover {
background-color: #e0e0e0;
}
@media screen and (max-width: 992px) {
#school-menu a {
/* Уменьшаем отступы и шрифт, чтобы влезло в экран */
padding: 10px 10px;
font-size: 14px;
}
}
/* --- АДАПТИВ ДЛЯ МОБИЛЬНЫХ (Меньше 768px - Стиль Telegram) --- */
@media screen and (max-width: 767px) {
#school-menu-box {
/* Включаем горизонтальный скролл */
overflow-x: auto;
/* Плавный скролл для iOS */
-webkit-overflow-scrolling: touch;
/* Трюк, чтобы скролл шел от края до края экрана, игнорируя padding контейнера */
margin-left: -15px;
margin-right: -15px;
padding-left: 15px; /* Возвращаем отступ первому элементу */
/* Скрываем полосу прокрутки (эстетика телеграма) */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
/* Скрываем полосу прокрутки для Chrome/Safari/Webkit */
#school-menu-box::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
#school-menu {
/* Ширина по контенту, чтобы работал скролл */
width: max-content;
/* Добавляем немного воздуха справа последнему элементу */
padding-right: 15px;
}
#school-menu a {
padding: 12px 15px; /* Чуть крупнее область клика пальцем */
font-size: 15px;
}
/* Убираем hover эффект на мобильных, так как он залипает при таче */
#school-menu a:hover {
background-color: transparent;
}
}
#school-cover {background-size: cover; position: relative; margin-top:10px; position: relative; max-height: 350px; height: 350px; border-radius: 6px; }
#school-top:before {content: ''; display: block; left: 0px; top:0px; background: #00000020; backdrop-filter:blur(2px); position: absolute; border-radius: 20px; width: 100%; height: 100%; }
.school-logo {display: inline-flex; gap: 10px; align-items: center; border-radius: 30px; padding: 5px 15px 5px 10px; border: 1px solid #dedede;}
.collage-gallery .school-logo img {height: 40px; width: auto; border-radius: 50% !important;}
#school-logo {position: absolute; height: 50px; font-size: 21px; font-weight: 400; left: 20px; top:20px; background: #ffffffeb; border: none;}
#school-logo span {text-transform: uppercase;}
#school-desction-box {display: flex; justify-content: space-between; padding-bottom: 20px;}
#school-desction-left {width: calc(100% - 400px);}
#school-desction-right {width: 380px;}
#school-desction-info {background: #f0f6ff; padding: 20px 20px 30px 20px; border-radius: 6px;}
#school-desction-info ul {list-style: none; margin: 0; padding: 0;}
#school-desction-info ul li { padding-left: 20px; margin-bottom: 15px; background: 0px 4px url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-lg' viewBox='0 0 16 16'%3e%3cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3e%3c/svg%3e") no-repeat;}
#school-desction-info ul li:last-child {margin-bottom: 0px;}
#school-teaching-langs b {display: block; font-weight: 400; font-size: 18px; margin-bottom: 5px;}
#school-teaching-langs ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;}
#school-teaching-langs ul img {height: 25px; width: auto; border-radius: 6px; border: 1px solid #dedede}
.school-title {font-size: 28px;}
.benefit-icon svg {color: #00000085;}
.school-desction-director {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.school-desction-director img {height: 50px; width: 50px;}
.school-desction-director-name {width: calc(100% - 60px); line-height: 1.3;}
.school-desction-director-name b {font-size: 18px; font-weight: 400; display: block; }
.school-desction-director-name span {font-size: 15px; color: #515151;}
.school-desction-title {font-size: 21px; margin-bottom: 10px;}
.text-highlight {background: #f4a85840; padding: 3px 10px; border-radius: 6px; display: inline-block;}
#school-prices-box {display: flex; justify-content: space-between;}
#top-school-label-text {margin-left: 20px; color: #00000075;}
.school-prices-item {width: calc(50% - 15px);}
.price-title {display: inline-flex; align-items: center; gap: 10px; }
.price-grid {
display: grid;
grid-template-columns: 1fr repeat(3, 1fr);
gap: 1px; /* расстояние между ячейками */
max-width: 100%;
margin: 20px 0;
border-radius: 8px;
overflow: hidden;
background-color: #e0e0e0; /* цвет "разделителей" */
border: 1px solid #dedede;
}
/* Заголовки */
.grid-header {
background: #E6ECF0;
padding: 16px;
text-align: center;
font-weight: 500;
}
/* Ячейки */
.grid-cell {
background-color: white;
padding: 16px;
text-align: center;
}
/* Первая колонка — описание */
.grid-cell:first-child {
background-color: #f1f3f4;
font-weight: 600;
text-align: left;
}
/* Чередование строк для визуального удобства */
.price-grid > div:nth-child(n+5):nth-child(-n+8) {
background-color: #f8f9fa;
}
/* Ховер-эффект */
/* .price-grid > div:hover {
background-color: #e3f2fd;
transition: background-color 0.3s ease;
} */
/* Значения цены */
.price-value {
font-size: 18px;
}
@media screen and (max-width: 767px) {
/* 1. Блоки "Онлайн" и "Очно" ставим в колонку друг под другом */
.school-prices-container {
display: flex;
flex-direction: column; /* Вертикальное расположение */
gap: 20px; /* Отступ между таблицами */
}
/* Растягиваем каждый блок на 100% ширины */
.school-prices-item {
width: 100%;
margin: 0;
}
/* 2. Настройка сетки таблицы для узких экранов */
.price-grid {
/* Меняем распределение ширины колонок.
Вместо 1fr (широкая) + 3 шт, делаем все колонки равными,
чтобы все влезло.
Если уровней меньше 3-х, грид просто заполнит пространство. */
grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
/* Или, если у вас всегда 4 колонки (Заголовок + 3 уровня),
лучше жестко задать пропорции, где первая колонка чуть уже: */
grid-template-columns: 0.8fr 1fr 1fr 1fr;
margin: 10px 0; /* Чуть меньше внешние отступы */
}
/* 3. Сжимаем ячейки и шрифты */
.grid-header,
.grid-cell {
padding: 8px 2px; /* Минимальные отступы по бокам (было 16px) */
font-size: 11px; /* Уменьшаем шрифт (было ~16px) */
line-height: 1.2; /* Плотный интерлиньяж */
/* Критично для мобильных: перенос длинных слов */
word-break: break-word;
hyphens: auto;
/* Выравнивание содержимого по центру вертикально */
display: flex;
align-items: center;
justify-content: center;
min-height: 50px; /* Чтобы ячейки были одной высоты */
}
/* Первая колонка (названия строк: Группа/Индив.) */
.grid-cell:first-child {
text-align: center; /* На мобильном лучше по центру, чтобы экономить место */
justify-content: center;
font-weight: 700;
font-size: 10px; /* Названия можно еще чуть мельче */
background-color: #f1f3f4;
}
/* Заголовки (Опытный, Мастер...) */
.grid-header {
font-size: 10px;
font-weight: bold;
text-transform: uppercase; /* Иногда помогает визуально */
}
/* Сама цена */
.price-value {
font-size: 13px; /* Цену делаем чуть крупнее текста, но меньше десктопа (18px) */
font-weight: bold;
}
#school-contact {
flex-direction: column;
}
#school-contact-form {
width: 100%;
}
#school-contact-list {
width: 100%;
font-size: 18px;
}
.cacllback-form-img {
display: none;
}
}
/* School END */
/* School FAQ BEGIN */
.property-faq-left {width: 320px; padding: 20px 20px; line-height: 1.5; background: #1971ac0f; font-size: 21px; color: #222;}
.property-faq-box {display: flex; border-radius: 4px; border:1px solid #e7e7e7; }
.property-faq-list {width: calc(100% - 320px); }
.property-faq-list .property-faq-item {border-bottom: 1px solid #00000018; padding: 0px;}
.property-faq-list .property-faq-item-opened p {display: block !important;}
.property-faq-list .property-faq-item-opened .property-faq-btn {transform: rotate(180deg);}
.property-faq-list .property-faq-item-opened:hover {background: none !important;}
.property-faq-list .property-faq-item p {display: none; margin-top:0px; line-height: 1.3; padding:1px 20px 5px 20px;}
.property-faq-list .property-faq-item .property-faq-title {cursor: pointer; font-family: inherit; font-weight: 400; padding: 20px; margin:0px; font-size: 18px; display: block; position: relative; border-radius: 4px;}
.property-faq-list .property-faq-item:hover {background: #f9f9f9; }
.property-faq-list .property-faq-item:last-child {border-bottom: none;}
.property-faq-list .property-faq-btn {position: absolute; background: none; display:inline-block; right: 10px; top:15px; border:none; outline: none; cursor: pointer;}
.property-faq-box .property-faq-list .property-faq-item-opened .property-faq-title {color: #000;}
.faqpage .faq-item:first-child {border-top:1px solid #f1f1f1 !important;}
/* School FAQ END */
/* School Reviews BEGIN */
.hotel-review-view {display: inline-block; font-size: 28px; font-weight: 300; position: absolute; height: 80px; width: 66px; border-radius: 4px; top:30px; left: 30px; padding:20px 0px 15px 0px; text-align: center; color: #fff; background: #2a962a;}
.hotel-review-view:before {border-left: 33px solid transparent; border-right: 33px solid transparent; left:0px; border-bottom: 8px solid white; border-top: 40px solid transparent; }
.hotel-review-view:before {bottom: 0; content: ''; display: block; position: absolute; }
.hotel-guest-reviews {border:1px solid #DDDDDD; border-radius: 4px; padding: 30px; position: relative;}
.hotel-review-score {padding-left:80px;}
.hotel-review-score b, .hotel-box-review-title {font-size: 21px; font-weight: 300; display: block; margin-bottom: 5px;}
.hotel-review-score span {color: #454545; font-size: 12px; display: block; margin-bottom: 5px;}
.hotel-review-rating {background: #226eb0; color: #fff; display: inline-block; padding: 2px 4px; border-radius: 5px;}
.hotel-review {border-bottom: 1px solid #f1f1f1; padding-bottom: 20px;}
.hotel-review:last-child {border-bottom: none;}
.review-details {font-size: 13px; color: #454545; margin-left: 15px;}
.review-details div {margin-top: 3px;}
.review-text {color: #777c87; line-height: 1.4;}
.review-text-subject {color:#454545;}
.plus-icon {display: inline-block; vertical-align: middle; height: 15px; width: 15px; background-size:contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3ctitle%3ebackground%3c/title%3e%3crect fill='none' id='canvas_background' height='402' width='582' y='-1' x='-1'/%3e%3c/g%3e%3cg%3e%3ctitle%3eLayer 1%3c/title%3e%3cpath id='svg_1' fill-rule='evenodd' fill='%23226eb0' d='m16,32.012c-8.837,0 -16,-7.164 -16,-16c0,-8.837 7.163,-16 16,-16c8.836,0 16,7.163 16,16c0,8.836 -7.164,16 -16,16zm6,-18l-4,0l0,-4c0,-1.104 -0.896,-2 -2,-2s-2,0.896 -2,2l0,4l-4,0c-1.104,0 -2,0.896 -2,2s0.896,2 2,2l4,0l0,4c0,1.104 0.896,2 2,2s2,-0.896 2,-2l0,-4l4,0c1.104,0 2,-0.896 2,-2s-0.896,-2 -2,-2z' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e");}
.minus-icon {display: inline-block; vertical-align: middle; height: 15px; width: 15px; background-size:contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='50' height='50' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3ctitle%3ebackground%3c/title%3e%3crect fill='none' id='canvas_background' height='52' width='52' y='-1' x='-1'/%3e%3c/g%3e%3cg%3e%3ctitle%3eLayer 1%3c/title%3e%3cpath id='svg_1' fill='%23767b8b' d='m25.087186,0.368969c-13.728,0 -24.851,11.133 -24.851,24.859c0,13.731 11.123,24.85 24.851,24.85c13.726,0 24.858,-11.119 24.858,-24.85c0,-13.727 -11.132,-24.859 -24.858,-24.859zm11.146,27.767l-22.277,0c-1.613,0 -2.907,-1.301 -2.907,-2.913c0,-1.599 1.293,-2.899 2.907,-2.899l22.277,0c1.604,0 2.906,1.299 2.906,2.899c0,1.612 -1.302,2.913 -2.906,2.913z'/%3e%3c/g%3e%3c/svg%3e");}
.plus-icon, .minus-icon {position: relative; top:-2px;}
.review-ava {display: inline-block; line-height: 40px; width: 40px; border-radius: 50%; background: #0f6674; color: #fff; text-transform: uppercase; text-align: center;}
.hotel-review-tabs i {font-style: normal; color: #777c87; font-size: 13px;}
.hotel-score-char b {font-weight: 400;}
.hotel-score-char span {display: block; width: 100%; margin-top: 5px; height: 10px; background: #00000033; border-radius: 3px;}
.hotel-score-char span i {display: block; height: 100%; background: #196fa9; border-radius: 3px; }
.hotel-score-char b i {display: inline-block; margin-left: 5px; font-style: normal; color: #777c87; font-size: 14px;}
.hotel-score-char [class^="col-"] {padding: 0px 15px;}
/* School Reviews END */
/* School Top Gallery BEGIN */
.collage-gallery {height: calc(55vh - 64px); min-height: 1px; width: 100%; position: relative; border-radius: 12px; }
.collage-gallery img {height: 100px; width: 100%;}
.collage-gallery button {outline: none; cursor:default !important; border: none; appearance:none; width: 100%; height: 100%; display: block; background: none; padding: 0px; margin: 0px;}
.collage-gallery button::before {content: ''; background: none; transition:all .1s ease-in-out; position: absolute; width: 100%; height: 100%;}
.collage-gallery button:hover::before {background: #00000012; }
.collage-gallery-left {height: 100%; border-radius: 12px 0px 0px 12px; position: absolute; left: 0px; top:0px; width: calc(50% - 0px); overflow: hidden}
.collage-gallery-left img {border-radius: 12px 2px 2px 12px; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.collage-gallery-middle {height: 100%; position: absolute; left: calc(50% + 8px); top:0px; width: calc(25% - 5px);}
.collage-gallery-right {height: 100%; position: absolute; right:0px; top:0px; width: calc(25% - 10px); border-radius: 0px 12px 12px 0px; }
.collage-gallery-right .collage-gallery-small-top img {border-radius: 2px 12px 2px 2px }
.collage-gallery-right .collage-gallery-small-bottom img {border-radius: 2px 2px 12px 2px }
.collage-gallery-small-top {margin-bottom: 8px;}
.collage-gallery-small-top, .collage-gallery-small-bottom {height: calc(50% - 4px); overflow: hidden; position: relative;}
.collage-gallery-small-top img, .collage-gallery-small-top picture, .collage-gallery-small-bottom img, .collage-gallery-small-bottom picture {width: 100%; border-radius:2px; height: 100%; object-fit: cover; }
@media screen and (max-width: 767px) {
#go-observe {
margin-top: 64px;
}
/* 1. Сбрасываем высоту контейнера и включаем перенос блоков */
.collage-gallery {
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 2. Главное левое фото - на всю ширину сверху */
.collage-gallery-left {
position: relative; /* Отменяем absolute */
width: 100%;
height: 240px; /* Высота главного фото на телефоне */
border-radius: 12px 12px 0 0;
margin-bottom: 8px; /* Отступ снизу до маленьких фото */
overflow: hidden;
}
/* Корректируем скругление углов главного фото */
.collage-gallery-left img {
border-radius: 12px 12px 0 0;
}
/* 3. Средняя и Правая колонки - становятся по 50% ширины снизу */
.collage-gallery-middle,
.collage-gallery-right {
position: relative; /* Отменяем absolute */
width: calc(50% - 4px); /* 50% минус половинка отступа */
height: 200px; /* Общая высота колонки из двух маленьких фото */
left: auto;
top: auto;
right: auto;
}
/* Убираем скругления у правой колонки, которые были для десктопа */
.collage-gallery-right {
border-radius: 0;
}
/* 4. Настройка скруглений для маленьких фото (чтобы углы были красивые) */
/* Левый столбик (Middle) */
.collage-gallery-middle .collage-gallery-small-top img {
border-radius: 0; /* Квадратное */
}
.collage-gallery-middle .collage-gallery-small-bottom img {
border-radius: 0 0 0 12px; /* Скруглен левый нижний угол всей галереи */
}
/* Правый столбик (Right) */
.collage-gallery-right .collage-gallery-small-top img {
border-radius: 0; /* Квадратное */
}
.collage-gallery-right .collage-gallery-small-bottom img {
border-radius: 0 0 12px 0; /* Скруглен правый нижний угол всей галереи */
}
/* Логотип поверх фото адаптируем, чтобы не прилипал к краю */
.collage-gallery .school-logo {
top: 10px;
left: 10px;
}
}
/* School Top Gallery END */
/* School Description Strart */
@media screen and (max-width: 767px) {
#school-desction-box {
display: flex;
flex-direction: column-reverse;
text-align: justify;
gap: 24px;
}
#school-desction-right {
width: 100%;
}
#school-desction-left {
width: 100%;
}
}
/* School Description End */
/* School faq */
@media screen and (max-width: 767px) {
.property-faq-box {
flex-direction: column;
width: 100%;
}
.property-faq-left {
width: 100%;
}
.property-faq-list {
width: 100%;
}
.property-faq-list .property-faq-item .property-faq-title {
/* padding: 0; */
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
}
.property-faq-list .property-faq-btn {
position: relative;
width: auto;
top: 0;
right: 0;
}
}
/* School faq */
/* student-card BEGIN */
.student-card {cursor: pointer;}
.student-card:hover {text-decoration: dotted ; color: #000}
#student-card {display: flex; flex-wrap: wrap; justify-content: space-between}
#student-card .student-card-item {width: calc(50% - 20px); margin-bottom: 40px;}
#student-card .student-card-content {background: #fff; padding: 20px; min-height: 250px; border-radius: 6px;}
/* student-card END */
/* messages BEGIN */
@keyframes shimmer {
0%, 100% {opacity: 0.7; }
50% {opacity: 0.3;}
}
#messages-box {display: flex; justify-content: space-between; position: relative; height: calc(100dvh - 165px);}
.messages-box-lock::after {content: ''; position: absolute; left: 0; top:0; height: 100%; width: 100%; background-color: #fff; border-radius: 6px; animation: shimmer 1.5s infinite;}
#messages-left {width: 320px; border-right: 1px solid #dedede; height: 100%;}
#messages-left-top { height: 50px; padding: 0px 10px 0px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dedede;}
#messages-left-top b {font-weight: 400; font-size: 18px; }
#messages-left-top-search {display: flex; align-items: center; gap: 10px; background: #e7e7e7; border-radius: 6px; padding: 3px 7px; cursor: pointer;}
#messages-left-top-search:hover {background: #dedede;}
#messages-content-top {display: flex; height: 50px; flex-basis: fit-content; border-bottom: 1px solid #dedede;}
#messages-content-top-wrap {height: 49px; width: 100%;; display: flex; align-items: center; padding-left: 20px; }
#messages-content-top b {font-weight: 400; font-size: 18px;}
#messages-content-top-wrap .autocomplete {width: 100%;}
#messages-blank {max-width: 200px; text-align: center; margin: 5% auto; cursor: pointer; padding: 10px; border-radius: 12px;;}
#messages-blank svg {display: inline-block;}
#messages-blank:hover {background: #00000009; color: #000;}
#chat-attaches-menu {position: absolute; bottom: 100px; padding: 10px 0px; left: 10px; min-width: 200px; max-width: 250px; display: flex; flex-direction: column; margin: 0px; list-style: none; background: #fff; border-radius: 6px; box-shadow: 0 10px 20px -5px rgba(0,0,0,.4);}
#chat-attaches-menu li {display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#chat-attaches-menu li:hover {background: #f5f5f5;}
#chat-attaches-menu li svg {height: 20px; width: auto; flex-shrink: 0;}
#chat-attaches-menu li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#messages-dialogs {height: calc(100dvh - 220px); overflow-y: scroll;}
#messages-view {padding: 15px; overflow-y: scroll; overscroll-behavior: contain; height: calc(100dvh - 220px);}
.chat-message {background: #00000012; position: relative; max-width: calc(100% - 50px); padding: 10px 12px 10px 15px; min-width: 70px;}
.chat-message.is-multi-line {padding-bottom: 13px;}
.chat-message-unit {display: flex; margin-bottom: 20px;}
.msg-outgoing {justify-content: end;}
.message-time {font-size: 12px; color: #00000080; display: inline-flex; align-items: center; gap: 5px}
/* .message-time .double-check {filter: brightness(0) saturate(100%) invert(55%) sepia(30%) saturate(1000%) hue-rotate(90deg) brightness(85%) contrast(90%);} */
.chat-message.is-multi-line .message-time {position: absolute; right: 7px; bottom:1px; }
.chat-message-unit.msg-incoming .chat-message {border-radius: 12px 16px 12px 0px; background-color: #4380b020;}
.chat-message-unit.msg-outgoing .chat-message {border-radius: 12px 16px 0px 16px; }
.message-wide {width: calc(100% - 50px);}
.chat-message-text {display: inline-block; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word }
.chat-message-unit.is-video .chat-message, .chat-message-unit.is-tutorial .chat-message, .chat-message-unit.is-help-article .chat-message {padding: 12px 15px !important;}
.chat-message-unit.is-photos .chat-message {padding: 0px;}
.chat-message-unit.is-photos .chat-message-text {padding: 10px 20px;}
#short-footer {margin: 10px auto 0 auto; height: 25px; font-size: 12px; color:#848484;}
#short-footer button {border: none; background: none; padding: 0px; border-bottom: 1px dotted; cursor: pointer; color:#848484; margin-left: 10px;}
/* .chat-message-unit.is-text-empty .chat-message-text {background: #fff;} */
.chat-message-tutorial, .chat-message-video {aspect-ratio: 16 / 9; margin-bottom: 6px;}
.chat-message-tutorial video, .chat-message-video iframe {border-radius: 6px;}
.chat-message-help-card {display: block; color: #172033; text-decoration: none; background: #fff; border: 1px solid #dfe6f0; border-radius: 10px; overflow: hidden; margin-bottom: 8px;}
.chat-message-help-card:hover {color: #172033; text-decoration: none; border-color: #b9c6d8;}
.chat-message-help-img {display: block; width: 100%; max-height: 230px; object-fit: contain; background: #f8fafc; border-bottom: 1px solid #edf1f6;}
.chat-message-help-body {display: block; padding: 12px;}
.chat-message-help-title {display: block; font-size: 17px; line-height: 1.25; font-weight: 700; margin-bottom: 6px;}
.chat-message-help-text {display: block; font-size: 14px; line-height: 1.4; color: #526174; margin-bottom: 10px;}
.chat-message-help-tags {display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px;}
.chat-message-help-tags span {font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: #eef3f8; color: #405066;}
.chat-message-help-link {display: inline-flex; align-items: center; font-weight: 700; color: #1d62d1;}
.chat-message-unit.is-help-article.is-text-empty .chat-message-text {display: none;}
.chat-message-payment-title {display: inline; padding-left: 25px; background: no-repeat 0px center url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bag-check-fill' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0m-.646 5.354a.5.5 0 0 0-.708-.708L7.5 10.793 6.354 9.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z'%3e%3c/path%3e%3c/svg%3e");}
.chat-message-unit.is-payment .chat-message {border: 1px solid #f3a757; cursor: pointer;}
.chat-message-unit.is-payment .chat-message:hover {color: #000;}
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9/16 = 0.5625 * 100% = 56.25% */
height: 0;
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#menu-globe, #menu-messages, #guide-btn, .guide-btn, #video-guide-btn, .video-guide-btn, #menu-wait-room {cursor: pointer; color: #515151; display: flex; align-items: center; justify-content: center;}
#menu-globe svg, #guide-btn svg, .guide-btn svg, #video-guide-btn svg, .video-guide-btn svg, #menu-wait-room svg {height: 20px; width: auto;}
#menu-messages svg {height: 20px; width: auto;}
#menu-messages { position: relative;}
.help-info-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
margin-left: 0px;
border: 1px solid currentColor;
border-radius: 50%;
background: transparent;
color: #6b7c93;
cursor: pointer;
font-size: 10px;
font-weight: 700;
line-height: 1;
padding: 0;
vertical-align: 6px;
}
.help-info-trigger:hover {
color: #1d62d1;
}
.msg-num-new {position: absolute; top: -9px; right: -8px; height: 18px; width: 18px; display: flex; align-items: center; justify-content: center; background: #298557; color: #fff; font-size: 12px; border-radius: 50%;}
#menu-item-msg .msg-num-new {position: relative; top: -3px; right: -3px; display: inline-flex;}
.chat-dialog-item {display: flex; position: relative; cursor: pointer; padding: 10px 0 5px 10px; min-height: 75px; position: relative;}
.chat-dialog-ac {background-color: #4c91c7 !important; color: #fff;}
.chat-dialog-ac .chat-dialog-text span, .chat-dialog-ac .chat-date-time {color: #fff;}
.chat-dialog-item .chat-date-time {min-width: 20px;}
.chat-dialog-ac .double-check {filter: brightness(0) invert(1);}
.chat-dialog-item::after {content: ''; display: block; position: absolute; width: calc(100% - 75px); bottom: -1px; right: 0px; border-bottom: 1px solid #dedede;}
.chat-dialog-item:hover {background: #f3f7fb;}
.chat-dialog-item:hover::after {display: none;}
.chat-dialog-ava {width: 55px;}
.chat-dialog-ava img {width: 55px; height: auto;}
.chat-dialog-content {width: calc(100% - 55px); line-height: 1; margin-left: 10px; padding-bottom: 10px; position: relative;}
.chat-dialog-name { display: flex; align-items: center; gap: 5px; position: relative; }
.chat-dialog-name-val {width: calc(100% - 40px); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chat-dialog-text {margin-top: 5px; position: relative; padding-right: 20px;}
.chat-dialog-text span {color: #8c8c8c; font-size: 14px; width: calc(100% - 25px); display: block; overflow: hidden; text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: clip;
max-height: 2.4em; /* 14px * 1.4 * 2 */
line-height: 1.2;
}
.chat-dialog-text.is-photos span{padding-left: 22px; min-height: 22px; width: 100%; background-position: 0 center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-card-image' viewBox='0 0 16 16'%3e%3cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3e%3cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54L1 12.5v-9a.5.5 0 0 1 .5-.5z'/%3e%3c/svg%3e");;}
.chat-dialog-text.is-guide span{padding-left: 22px; min-height: 22px; width: 100%; background-position: 0 center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-question-octagon-fill' viewBox='0 0 16 16'%3e%3cpath d='M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM5.496 6.033a.237.237 0 0 1-.24-.247C5.35 4.091 6.737 3.5 8.005 3.5c1.396 0 2.672.73 2.672 2.24 0 1.08-.635 1.594-1.244 2.057-.737.559-1.01.768-1.01 1.486v.105a.25.25 0 0 1-.25.25h-.81a.25.25 0 0 1-.25-.246l-.004-.217c-.038-.927.495-1.498 1.168-1.987.59-.444.965-.736.965-1.371 0-.825-.628-1.168-1.314-1.168-.803 0-1.253.478-1.342 1.134-.018.137-.128.25-.266.25h-.825zm2.325 6.443c-.584 0-1.009-.394-1.009-.927 0-.552.425-.94 1.01-.94.609 0 1.028.388 1.028.94 0 .533-.42.927-1.029.927'/%3e%3c/svg%3e");}
.chat-dialog-text.is-video span{padding-left: 22px; min-height: 22px; width: 100%; background-position: 0 center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-youtube' viewBox='0 0 16 16'%3e%3cpath d='M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z'/%3e%3c/svg%3e");}
.chat-dialog-text.is-payment span{padding-left: 22px; min-height: 22px; width: 100%; background-position: 0 center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bag-check-fill' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0m-.646 5.354a.5.5 0 0 0-.708-.708L7.5 10.793 6.354 9.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z'%3e%3c/path%3e%3c/svg%3e");}
.chat-dialog-text.is-board span{padding-left: 22px; min-height: 22px; width: 100%; background-position: 0 center; background-repeat: no-repeat; background-size: 16px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24' width='512' height='512'%3e%3cpath fill='currentColor' d='M19,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V5A5.006,5.006,0,0,0,19,0Zm3,14v4H18v4H14V18H10v4H6V18H2V14H6V10H2V6H6V2h4V6h4V2h4V6h4v4H18v4ZM10,10H6V6h4Zm4,0V6h4v4Zm-4,4v4H6V14Zm4,0h4v4H14Zm-4-4h4v4H10Z'/%3e%3c/svg%3e");}
.chat-dialog-text.is-help_article span{padding-left: 22px; min-height: 22px; width: 100%; background-position: 0 center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-book' viewBox='0 0 16 16'%3e%3cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783'/%3e%3c/svg%3e");}
.chat-dialog-ac .chat-dialog-text.is-photos span {filter: brightness(0) invert(1);}
.chat-dialog-ac .chat-dialog-text.is-guide span {filter: brightness(0) invert(1);}
.chat-dialog-ac .chat-dialog-text.is-video span {filter: brightness(0) invert(1);}
.chat-dialog-ac .chat-dialog-text.is-payment span {filter: brightness(0) invert(1);}
.chat-dialog-ac .chat-dialog-text.is-board span {filter: brightness(0) invert(1);}
.chat-dialog-ac .chat-dialog-text.is-help_article span {filter: brightness(0) invert(1);}
.chat-date-tag-wrap {display: flex; justify-content: center; margin: 15px 0px;}
.chat-date-tag {padding: 5px 30px; background: #00000050; border-radius: 12px; color: #fff;}
.chat-dialog-data-unread {position: absolute; font-size: 12px; right: 5px; top: 0px; display: flex; align-items: center; justify-content: center; height: 20px; width: 20px; background: #f4a858; color:#fff; border-radius: 50%;}
.chat-dialog-item-info {position: absolute; font-size: 12px; right: 5px; top: 2px; display: flex; align-items: center; justify-content: center; gap: 2px; color: #8a8a8a; }
.dialog-data-card {display: flex; gap: 10px; align-items: center; cursor: pointer;}
.dialog-data-card:hover .dialog-data-card-title {color: #000;}
.dialog-data-card-icon img {height: 35px; width: auto;}
.dialog-data-card-info {line-height: 1;}
.dialog-data-card-title {display: flex; align-items: center; gap: 5px;}
.dialog-data-card-title .flag-img {height: 14px; border-radius: 50%; border: 1px solid #00000020;}
.dialog-data-card-title svg {height: 15px; width: auto; color: #515151;}
.dialog-data-card-subtitle {font-size: 12px; color: #515151; margin-top: 5px; display: block;}
.dialog-data-card-subtitle svg {height: 10px !important;}
.msg-read {color: green;}
#messages-content {position: relative; width: calc(100% - 320px); display: flex; flex-direction: column;}
#messages-send-box { background: #fff; display: flex; justify-content: space-between; border-top: 1px solid #dedede; bottom: 0px; left: 0px; width: 100%; border-radius: 0px 0px 6px 0px;}
#messages-text-box {outline: none; width: calc(100% - 80px);}
#chat-attaches {width: 30px; display: flex; align-items: start; position: relative;}
#chat-attaches #chatbox-paperclip {border: none; background: none; outline: none; cursor: pointer; margin-top: 7px;}
#chat-attaches #chatbox-paperclip svg {width: 25px; height: auto; color: #00000065;}
#chat-attaches #chatbox-paperclip:hover svg {color:#000;}
#chat-send-btns {width: 40px; display: flex; position: relative;}
#messages-text-inp {border: none; overscroll-behavior: contain; outline: none; min-height: 40px; resize: none; padding: 10px; width: 100%;}
#subscription-currency-select {width: auto;}
#attach-tariff-list {display: flex; flex-wrap: wrap; gap: 25px;}
#attach-tariff-payment {margin: 0 auto; max-width: 640px; padding: 20px; background: #f7f7f7; border-radius: 6px;}
#attach-tariff-payment-back {max-width: 640px; margin: 0 auto;}
#attach-tariff-payment-back-btn {border: none;}
#attach-tariff-payment-back-btn:hover {color:#000;}
.paper-clip-ac svg {color: #4c92c8 !important;}
#chat-search-view {padding: 20px;;}
#chat-search-cards {display: flex; gap: 15px; flex-wrap: wrap;}
#chat-search-cards .master-card {flex: 0 0 calc(50% - 10px); box-sizing: border-box; max-width: calc(50% - 10px); cursor: pointer;}
#chat-search-cards .master-card:hover {background: #f5f5f5;}
#messages-search-inp {width: calc(50% - 20px); border: none; border-radius: 6px; padding: 5px 10px; background: #f5f5f5;}
#attach-tutorial-text-inp, #attach-video-text-inp {width: 100%; border-radius: 4px; }
#attach-tutorial-video-lang { border-radius: 12px; margin-bottom: 20px; justify-content: end; display: flex; align-items: center; gap: 10px;}
#attach-tutorial-video-lang select {background-color: #fff;}
.chat-message-tutorial-title {font-size: 18px; margin-bottom: 5px;}
.attach-kb {display: flex; flex-direction: column; gap: 12px;}
.attach-kb-top {display: flex; gap: 10px; align-items: center;}
.attach-kb-search {position: relative; flex: 1; min-width: 0;}
.attach-kb-search input {width: 100%; border: 1px solid #d9e1eb; border-radius: 8px; padding: 9px 38px 9px 12px; background: #fff;}
.attach-kb-search input:focus {outline: none; border-color: #8fb2dd; box-shadow: 0 0 0 3px #4c92c826;}
.attach-kb-search button {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font-size: 22px; color: #667085; cursor: pointer;}
.attach-kb-lang {display: inline-flex; padding: 3px; border-radius: 8px; background: #eef3f8;}
.attach-kb-lang button {border: 0; background: transparent; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-weight: 700; color: #526174;}
.attach-kb-lang button.is-active {background: #fff; color: #172033; box-shadow: 0 1px 3px #00000018;}
.attach-kb-hint {font-size: 13px; color: #667085;}
.attach-kb-layout {display: grid; grid-template-columns: minmax(240px, 38%) minmax(0, 1fr); gap: 12px; min-height: 360px;}
.attach-kb-results, .attach-kb-preview {border: 1px solid #dfe6f0; border-radius: 8px; background: #fff; overflow: auto;}
.attach-kb-results {max-height: 430px;}
.attach-kb-result {display: block; padding: 12px 14px; color: #172033; text-decoration: none; border-top: 1px solid #edf1f6;}
.attach-kb-result:first-child {border-top: 0;}
.attach-kb-result:hover {background: #f7f9fc; color: #172033; text-decoration: none;}
.attach-kb-result strong {display: block; font-size: 14px; line-height: 1.25;}
.attach-kb-result span {display: block; margin-top: 5px; font-size: 13px; line-height: 1.35; color: #667085;}
.attach-kb-state {padding: 16px; color: #667085;}
.attach-kb-preview-card {padding: 14px;}
.attach-kb-preview-card h3 {font-size: 20px; line-height: 1.25; margin: 0 0 8px;}
.attach-kb-preview-card p {font-size: 14px; line-height: 1.45; color: #526174; margin: 0 0 12px;}
.attach-kb-preview-img {display: block; max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid #e0e6ef; border-radius: 8px; margin-bottom: 12px; background: #f8fafc;}
.attach-kb-tags {display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;}
.attach-kb-tags span {font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #eef3f8; color: #405066;}
.attach-kb-thumbs {display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;}
.attach-kb-thumbs img {width: 92px; height: 64px; object-fit: cover; border: 1px solid #e0e6ef; border-radius: 6px;}
.attach-kb-footer {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end;}
.attach-kb-footer textarea {width: 100%; border: 1px solid #d9e1eb; border-radius: 8px; padding: 8px 10px; resize: vertical;}
.attach-kb-footer button {min-width: 190px;}
.attach-kb-footer button:disabled {opacity: .55; cursor: not-allowed;}
@media (max-width: 700px) {
.attach-kb-top, .attach-kb-footer {display: block;}
.attach-kb-lang {margin-top: 8px;}
.attach-kb-layout {grid-template-columns: 1fr; min-height: 0;}
.attach-kb-results {max-height: 240px;}
.attach-kb-footer button {width: 100%; margin-top: 8px;}
}
#attach-video-view iframe {width: 100% !important;}
.group-links-box {margin-bottom: 30px;}
.group-links-box:last-child {margin-bottom: 0px;;}
.group-links-item {display: block; padding: 10px 15px 10px 5px; position: relative; text-decoration: none; cursor: pointer;}
.group-links-item::after {content: ''; display: block; position: absolute; bottom: -1px; left:2px; width: calc(100% - 4px); border-bottom: 1px solid #dedede;}
.group-links-item:hover {background-color:#eaeaea; border-radius: 4px;}
.group-links-item:hover::after {display: none;}
.group-links-title {font-size: 18px; display: block; margin-bottom: 5px; }
.curriculum-folder, .curriculum-folder-add {padding: 12px; border-radius: 8px; cursor: pointer; }
.curriculum-folder:hover, .curriculum-folder-add:hover {background-color: #00000012;}
.curriculum-folder .folder-icon, .curriculum-folder-add .folder-icon {height: 80px; width: 80px;}
.folder-icon {background-size: contain; background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none'%3E%3Cpath fill='url(%23a)' d='M0 16C0 10.477 4.477 6 10 6h12.858a10 10 0 0 1 7.07 2.929l7.143 7.142A10 10 0 0 0 44.142 19H70c5.523 0 10 4.477 10 10v41c0 5.523-4.477 10-10 10H10C4.477 80 0 75.523 0 70z'/%3E%3Cpath fill='url(%23b)' d='M0 29v41c0 5.523 4.477 10 10 10h60c5.523 0 10-4.477 10-10V29c0-5.523-4.477-10-10-10H10C4.477 19 0 23.477 0 29'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.854' x2='26.854' y1='80' y2='6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD84D'/%3E%3Cstop offset='.5' stop-color='%23FEBD39'/%3E%3Cstop offset='1' stop-color='%23FFEFB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.854' x2='26.854' y1='80' y2='19' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.016' stop-color='%23FFEDA9'/%3E%3Cstop offset='.985' stop-color='%23FFF2C4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");}
.curriculum-folder-add .folder-add {height: 80px; width: 80px; position: relative; top:3px; display: flex; align-items: center; justify-content: center; border: 1px dashed #acacac; border-radius: 12px;}
.curriculum-folder-add .folder-add svg {height: 30px; width: auto; color: #acacac;}
#curriculum-back-to-folders {background: #fff;}
#curriculum-back-to-folders:hover {background: #00000006;}
#curriculum-folders-sort {display: inline-flex; gap: 15px; flex-wrap: wrap;}
#folder-contextmenu {min-width: 150px;}
.big-svg-box svg {height: 40px; width: auto;}
#folder-invite-access-box {display: flex; align-items: center; justify-content: space-between; }
#folder-invite-access-inputs {display: flex; align-items: center; width: calc(100% - 120px); border-radius: 8px;}
#folder-invite-access-inputs input {width: calc(100% - 120px); height: 40px; background: #f4f4f6; border-radius: 8px 0px 0px 8px; border: none; border:none; padding: 3px 5px 3px 10px !important;}
#folder-invite-access-inputs select {width: 120px; height: 40px; text-align: right; background-color: #f4f4f6; border-radius: 0px 8px 8px 0px; border: none; padding: 3px 25px 3px 5px;}
#folder-invite-access-btn {width: 100px; border: none; }
#global-curriculums-body .label-btn {background-color: #fff; border: 1px solid #cacaca;}
#global-curriculums-body .label-btn:hover {border: 1px solid #dedede;}
.user-folder-access-line {display: flex; background: #f4f4f6; align-items: center; justify-content: space-between; padding: 5px 10px; border-radius: 8px; margin-bottom: 15px;;}
/* .user-folder-access-line select:hover {background-color: #ffffff70;} */
.user-folder-access-line-select {text-align: right; border: none !important; cursor: pointer; }
.user-mini-card {display: flex; gap: 10px;}
.user-mini-card i {display: block; font-style: normal; font-size: 12px; color: #787878;}
.user-mini-card div {line-height: 1.2;}
.user-mini-card img {width: 32px; height: 32px;}
#quill-chess-board-editor .quill-chessboard-title {display: none;}
.folder-icon-load {position: relative;}
.folder-icon-load::after {height: 24px; width: 24px; top: inherit; bottom: 15px; left: calc(50% - 12px)}
.curriculum-folder {position: relative;}
.folder-icons {position: absolute; right: 24px; top: 68px; display: flex; gap: 3px}
.folder-icons icon {display: block;}
.folder-icons icon svg {height: 14px; width: auto; color: #454545;}
#curriculum-folder-top-btns {display: flex; align-items: center; gap: 10px;}
#curriculum-folder-top-btns button, #curriculum-folder-top-btns label {padding: 7px 12px;}
#folder-owner-info {cursor: pointer;}
#folder-owner-info .user-mini-card { border: 1px solid #dedede; border-radius: 6px; padding: 3px 6px;}
.user-large-card {display: flex; gap: 10px;}
.board-history-moves-box-editor {min-height: 200px; height: calc(100dvh - 580px);}
#curriculum-list-title {display: inline-flex;}
#curriculum-list-title, .curriculum-folder-name {position: relative; font-size: 21px; padding-left: 30px; margin-top: 10px; cursor: pointer;}
#curriculum-list-title:hover, .curriculum-folder-name {color: #000;}
#curriculum-list-title::before, .curriculum-folder-name::before {content: ''; position: absolute; display: block; height: 22px; width: 22px; left: 0px; top:2px; background-size: contain !important; background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none'%3E%3Cpath fill='url(%23a)' d='M0 16C0 10.477 4.477 6 10 6h12.858a10 10 0 0 1 7.07 2.929l7.143 7.142A10 10 0 0 0 44.142 19H70c5.523 0 10 4.477 10 10v41c0 5.523-4.477 10-10 10H10C4.477 80 0 75.523 0 70z'/%3E%3Cpath fill='url(%23b)' d='M0 29v41c0 5.523 4.477 10 10 10h60c5.523 0 10-4.477 10-10V29c0-5.523-4.477-10-10-10H10C4.477 19 0 23.477 0 29'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.854' x2='26.854' y1='80' y2='6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD84D'/%3E%3Cstop offset='.5' stop-color='%23FEBD39'/%3E%3Cstop offset='1' stop-color='%23FFEFB6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.854' x2='26.854' y1='80' y2='19' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.016' stop-color='%23FFEDA9'/%3E%3Cstop offset='.985' stop-color='%23FFF2C4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");;}
.folder-stat {position: absolute; top: 40px; text-align: center; font-size: 12px; color: #83784c; width: 80px;}
#curriculum-theme-btns {position: absolute; right: 30px; top:15px; display: flex; align-items: center; gap: 15px;}
#curriculum-theme-btns button {border: none; background: none; color: #515151; display: block; cursor: pointer; padding: 0px;}
#curriculum-theme-btns button:hover {color: #000;}
.global-folder-tr {cursor: pointer;}
.badge-icon-text {display: inline-flex; align-items: center; gap: 5px; background: #00000010; border-radius: 6px; padding: 3px 7px;}
.badge-icon-text span {display: flex;}
.folder-name { margin-left: -6px; width: 92px; align-items: flex-end;
height: 2rem;
justify-content: center;
padding: 0;
align-items: center;
overflow-wrap: break-word;
display: flex;
flex-grow: 1;
margin-top: 5px;
line-height: 1.2;
order: 1;
overflow: hidden;
text-align: center;
font-size: 14px;
}
#my-curriculum-folders, #personal-access-curriculum-folders {display: flex; flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
display: flex;
gap: 15px;
width: 100%;}
#folder-access-text {display: inline-flex; gap: 5px; align-items: center;}
#personal-access-curriculum-folders-box {padding-top: 20px; }
.curriculum-menu-insert-theme {background-color: red !important;}
.attention-box { display: inline-block;padding: 10px;border-radius: 6px;margin-bottom: 20px;font-size: 14px;background: #f3a7571f;}
#curriculum-theme-homework-add-box {background: #00000012; padding: 20px; border-radius: 12px;}
#curriculum-theme-homework-add-box svg:not(.quill-chessboard *) { height: 18px; width: auto; }
#curriculum-theme-homework-add-btns button {background: #fff; cursor: pointer;}
#curriculum-theme-homework-add-btns button:hover {background: #f7f7f7;}
#curriculum-theme-homework-add-lichess-box input, #curriculum-theme-homework-add-pgn-box textarea {min-width: 70%;}
#curriculum-theme-homework-add-pgn-box .curriculum-theme-homework-add-inp {min-height: 100px;}
#curriculum-theme-homework-add-editor-inp {width: 655px; max-width: 100%;}
#curriculum-theme-homework-uploaded {background: #eff4f7; padding: 20px; border-radius: 12px;}
#curriculum-theme-homework-uploaded-btns {z-index: 10; position: sticky; top: 0px; background: #eff4f7; padding: 10px 0px; border-bottom: 1px solid #00000012; }
#curriculum-theme-homework-order-popup {position: absolute; padding: 15px; display: flex; flex-wrap: wrap; gap: 10px; min-height: 50px; z-index: 999; box-shadow: 1px 1px 3px 0px #00000020; width: 250px; max-width: 100%; background: #fff; border-radius: 6px; top: 50%; left: 50%; }
#curriculum-theme-homework-order-popup .order-btn {width: 28px; height: 25px; font-size: 14px;; border-radius: 3px; border:none; background: #d2d2d2; color: #454545;}
.selected-order-btn, #curriculum-theme-homework-order-popup .order-btn:hover {background: #9ac9f8 !important;}
#curriculum-theme-upload-pdf {white-space: nowrap;}
#curriculum-theme-edit-btns button:hover {background-color: #f5f5f5;}
#affiliate-start-btn {font-size: 32px; text-transform: uppercase; font-weight: 400; padding: 10px 50px;}
#affiliate-start-btn svg {height: 32px; width: auto;}
#affiliate-create-link-box {padding: 10px 20px; width: fit-content; display: flex; gap: 15px; background: #00000020; border-radius: 12px; margin-bottom: 20px;}
#affiliate-create-link-box input, #affiliate-create-link-box select {background-color: #fff;}
#affiliate-create-link-res {font-size: 21px; margin-bottom: 10px;}
.affiliate-ref-status svg {height: 22px; width: auto;}
.icon-send {background-position: right 10px center; background-size: 20px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3ctitle%3eionicons-v5-q%3c/title%3e%3cpath fill='%23fff' d='M16,464,496,256,16,48V208l320,48L16,304Z'/%3e%3c/svg%3e");}
#q-text-title {width: 100%;}
.chat-msg-photos{
display: flex;
flex-wrap: wrap;
gap: 2px;
border-radius: 10px 10px 0px 0px;
overflow: hidden;
max-width: 100%;
border: 1px solid #00000012;
border-bottom: none;
}
/* .msg-photo:hover::after {
content: ''; position: absolute; left: 0; top:0; width: 100%; height: 100%; background-color: #00000008;
} */
.msg-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
user-select: none; /* Запрещает выделение */
-webkit-user-drag: none; /* Для Safari/Chrome */
-khtml-user-drag: none; /* Для старых браузеров */
-moz-user-drag: none; /* Для Firefox */
-o-user-drag: none; /* Для Opera */
draggable: false; /* Современный стандарт */
}
/* Общие стили для всех фото */
.msg-photo {
cursor: pointer;
object-fit: cover;
background-color: #f0f0f0;
min-height: 100px;
box-sizing: border-box;
position: relative;
overflow: hidden;
border-radius: 3px;
}
/* 1 фото - на всю ширину */
.msg-photos-1 .msg-photo {
width: 100%;
height: 250px;
}
/* 2 фото - два в ряд (50% ширины) */
.msg-photos-2 .msg-photo {
width: calc(50% - 1px);
height: 150px;
}
/* 3 фото - сетка 2+1 */
.msg-photos-3 .msg-photo {
height: 150px;
}
.msg-photos-3 .msg-photo:nth-child(1) {
width: calc(66.666% - 1px);
}
.msg-photos-3 .msg-photo:nth-child(2) {
width: calc(33.333% - 1px);
height: 150px;
}
.msg-photos-3 .msg-photo:nth-child(3) {
width: 100%;
height: 150px;
}
/* 4 фото - сетка 2х2 */
.msg-photos-4 .msg-photo {
width: calc(50% - 1px);
height: 120px;
}
/* 5 фото - сетка 2+3 */
.msg-photos-5 .msg-photo {
height: 120px;
}
.msg-photos-5 .msg-photo:nth-child(1),
.msg-photos-5 .msg-photo:nth-child(2) {
width: calc(50% - 1px);
}
.msg-photos-5 .msg-photo:nth-child(3),
.msg-photos-5 .msg-photo:nth-child(4),
.msg-photos-5 .msg-photo:nth-child(5) {
width: calc(33.333% - 1.33px);
}
/* 6 фото - 3 ряда по 2 */
.msg-photos-6 .msg-photo {
width: calc(50% - 1px);
height: 110px;
}
/* 7 фото - сетка 2+3+2 */
.msg-photos-7 .msg-photo {
height: 100px;
}
.msg-photos-7 .msg-photo:nth-child(1),
.msg-photos-7 .msg-photo:nth-child(2),
.msg-photos-7 .msg-photo:nth-child(6),
.msg-photos-7 .msg-photo:nth-child(7) {
width: calc(50% - 1px);
}
.msg-photos-7 .msg-photo:nth-child(3),
.msg-photos-7 .msg-photo:nth-child(4),
.msg-photos-7 .msg-photo:nth-child(5) {
width: calc(33.333% - 1.33px);
}
/* 8 фото - сетка 2+3+3 */
.msg-photos-8 .msg-photo {
height: 100px;
}
.msg-photos-8 .msg-photo:nth-child(1),
.msg-photos-8 .msg-photo:nth-child(2) {
width: calc(50% - 1px);
}
.msg-photos-8 .msg-photo:nth-child(3),
.msg-photos-8 .msg-photo:nth-child(4),
.msg-photos-8 .msg-photo:nth-child(5),
.msg-photos-8 .msg-photo:nth-child(6),
.msg-photos-8 .msg-photo:nth-child(7),
.msg-photos-8 .msg-photo:nth-child(8) {
width: calc(33.333% - 1.33px);
}
/* 9 фото - сетка 3х3 */
.msg-photos-9 .msg-photo {
width: calc(33.333% - 1.33px);
height: 100px;
}
/* 10 фото - сетка 2+3+2+3 */
.msg-photos-10 .msg-photo {
height: 90px;
}
.msg-photos-10 .msg-photo:nth-child(1),
.msg-photos-10 .msg-photo:nth-child(2),
.msg-photos-10 .msg-photo:nth-child(6),
.msg-photos-10 .msg-photo:nth-child(7) {
width: calc(50% - 1px);
}
.msg-photos-10 .msg-photo:nth-child(3),
.msg-photos-10 .msg-photo:nth-child(4),
.msg-photos-10 .msg-photo:nth-child(5),
.msg-photos-10 .msg-photo:nth-child(8),
.msg-photos-10 .msg-photo:nth-child(9),
.msg-photos-10 .msg-photo:nth-child(10) {
width: calc(33.333% - 1.33px);
}
.msg-photo:first-child {
border-top-left-radius: 8px;
}
/* Второй элемент, если он есть */
.msg-photo:nth-child(2) {
border-top-right-radius: 8px;
}
/* Опционально: скругление углов для первого и последнего фото в каждой строке */
/* .msg-photo:nth-child(odd):first-child {
border-top-left-radius: 8px;
}
.msg-photo:nth-child(even):nth-child(2),
.msg-photo:nth-child(3):last-child {
border-top-right-radius: 8px;
} */
/* .msg-photo:last-child:nth-child(odd) {
border-bottom-left-radius: 8px;
} */
/* .msg-photo:last-child:nth-child(even),
.msg-photo:nth-last-child(2):nth-child(odd) {
border-bottom-right-radius: 8px;
} */
#mob-messages-dialogs-btn {display: none; border: 1px solid #dedede; background: #fff; width: calc(100% - 30px); top: 70px; left: 15px; height: 30px; border-radius: 6px; align-items: center; justify-content: center; position: absolute; cursor: pointer;}
@media only screen and (max-width: 600px) {
.payments-tariff-buy {width: 100%;}
#short-footer button {width: fit-content;}
#mob-messages-dialogs-btn {display: flex;}
#messages-content {width: 100%;}
#messages-left {display: none; position: fixed; z-index: 101; background: #fff; width: calc(100% - 20px); left: 10px; border-radius: 6px; height: calc(100dvh - 160px);}
}
/* messages END */
/* Onboarding BEGIN */
#onboarding-box { margin: 0px auto 0 auto; max-width: 480px; width: 100%;}
#onboarding-form { background: #fff; border-radius: 12px; min-height: 300px; padding: 20px 20px 30px 20px; }
#onboarding-footer {text-align: center; margin-top: 20px; color: #fff;}
#onboarding-footer img {height: 20px; width: auto;}
#onboarding-label {position: relative; display: flex; align-items: center; justify-content: center; background: #ffffff; padding: 20px; font-size: 21px; margin-bottom: 20px; border-radius: 12px;}
#onboarding-label-cancel-btn {position: absolute; display: flex; align-items: center; justify-content: center; padding: 0px; height: 25px; width: 25px; background: #dedede; border: none; border-radius: 50%; cursor: pointer; top: -10px; right: -10px;}
#onboarding-label-cancel-btn svg {width: calc(100% - 5px); height: auto;}
#onboarding-label img {height: 35px; width: auto; border-radius: 50%;}
#onboarding-logo {text-align: center; margin-bottom: 20px;}
#onboarding-logo img {height: 50px; width: auto;}
#onboarding-label-choose {margin-bottom: 10px; font-size: 14px; text-align: center;}
#onboarding-label-choose span {color: #e1edef; cursor: pointer;}
#onboarding-label-choose span:hover {color: #fff;}
#onboarding-source {text-decoration: none; color: #454545; display: flex; align-items: center; gap: 10px;}
/* Onboarding END */
#profile-user-learning-langs {display: flex; gap: 10px; flex-wrap: wrap;}
#profile-user-learning-langs label {cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 10px 20px; background: #00000018; border-radius: 12px;}
#profile-user-learning-langs label img {height: 18px; width: auto; border-radius: 50%;}
#profile-user-learning-langs label:hover {background: #00000022;;}
#profile-user-learning-langs label:has(input[type="checkbox"]:checked) {background: #f3a757ab;}
#student-menu-box {display: flex; flex-wrap: wrap; justify-content: space-between;}
.student-menu-item {width: calc(33% - 15px); height: 140px; background: #00000003; margin-bottom: 40px; padding: 20px;; display: block; border: 1px solid #c2c2c2; border-radius: 6px; text-decoration: none; }
.student-menu-item:hover { box-shadow: 0 0 10px rgba(0,0,0,.1);}
.student-menu-item-top {display: flex; font-size: 18px; color: #000; align-items: center; gap: 10px; margin-bottom: 10px;}
.student-menu-item-top svg {height: 25px; width: auto; color: #002169;}
.student-menu-item-text {color: #454545;}
.profile-social-item {padding: 15px; background: #f5f5f5; margin-bottom: 15px; border-radius: 6px;}
.profile-social-item a {text-decoration: none; color: #454545; font-size: 16;}
.profile-social-item a:hover {text-decoration: underline;}
.profile-ava-box {width: 50px;}
.profile-ava-box img {width: 100%; height: auto;}
.profile-info-item {margin-top: 5px;}
.profile-info-item b {font-weight: 400; color: #8a8a8a;}
#level-know-labels label {background: #2a787e33;}
.settings-private-group {background: #0000000a; padding: 10px; border-radius: 12px; margin-bottom: 30px;}
.settings-private-item {padding: 10px 5px 10px 10px; border-bottom: 1px solid #00000020; display: flex; align-items: center; justify-content: space-between;}
.settings-private-item select {border: none; text-align: right; cursor: pointer; border-radius: 6px; background-color: none; }
.settings-private-item select:hover {color: #4a81ab;}
.settings-private-group .settings-private-item:last-child {border-bottom: none;}
#help-popup-btn {border-radius: 24px; background: #fff; border: 1px solid #dedede; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #888888;}
#help-popup-btn:hover {border: 1px solid #000; color: #000;}
/* Calendar BEGIN */
.calendar-tab-xl tr th {}
.calendar-tab-xl tr td {height: 90px; position: relative; font-size: 21px;}
.calendar-box .calendar-day {cursor: pointer; }
.calendar-box .calendar-day b {font-weight: 400; }
.calendar-scheduled-ok {background-color:#278557; color:#fff;}
.calendar-box .calendar-day:hover {background-color: #f5f5f5;} {cursor: pointer;}
.calendar-month-menu {display: flex; margin-bottom: 20px;}
.calendar-month-menu b {display: inline-flex; width: 200px; border-radius: 6px; background: #f5f5f5; margin: 0px 15px; height: 40px; justify-content: center; align-items: center; padding: 0px 15px;}
.calendar-month-menu span {display: inline-flex; cursor: pointer; border-radius: 6px; background: #f5f5f5; height: 40px; justify-content: center; align-items: center; padding: 0px 15px;}
.calendar-month-menu span:hover {background: #f0f0f0;}
.calendar-today b {color: red !important; }
.calendar-empty-cell {border:none !important; cursor: auto !important;;}
/* Calendar END */
/* DPWIN Begin */
#box-search {background:url(https://q-cf.bstatic.com/static/img/cross_product_index/accommodation/07ca5cacc9d77a7b50ca3c424ecd606114d9be75.svg) no-repeat 7px 12px; padding:5px 10px 5px 25px; width:200px; }
#box {padding:20px; background:#f5f5f5; }
#box input {background-color:#fff; border:none; padding:10px 10px 10px 30px; border-radius:3px; margin-right:20px; font-size:14px;}
.idate-icon {position: relative;}
/*.idate-icon:before {content: ""; color: #888; fill:#888; cursor:pointer; position: absolute; left: 8px; top:9px; font-size: 20px; color: #767b8b; height: 16px; width: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-calendar3' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");}*/
.idate-box svg {height: 18px; fill: #767b8b; width: auto; position: absolute; left: 12px; top:10px;}
.idate {cursor: pointer; }
.idate b {font-weight: 500;}
#idate {position:absolute; color:#16233e; display:none; z-index:10000; left:50%; top:30%; background:#fff; border:1px solid #d4d4d4; border-radius:4px; box-shadow:0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%); padding:25px 0px 20px 20px;}
.idate-calend-month {min-height: 210px; float:left; margin-right:20px;}
.idate-calend-days div { color:#383838; float:left; width:36px; line-height:35px; padding:5px 0px; text-align:center}
.idate-calend-month-name {color:#454545; font-size:17px; margin-bottom:15px; text-align:center;}
.idate-month-link {cursor: pointer;}
.idate-month-link:hover {color:#0d6efd }
.idate-tab {border-collapse:collapse; }
.idate-tab tr td {border:1px solid #f5f5f5; width:31px; line-height:32px;text-align:center; padding:0px; margin:0px; }
.idate-tab .idate-day {cursor:pointer;}
.idate-tab .idate-day:hover {background-color:#dedede;}
.idate-calend-week-days {margin-bottom: 5px;}
.idate-calend-week-days b, #calend-week-days-mob b {display:inline-block; width:32px; line-height:33px; text-align:center; font-size:12px; font-weight:500;}
.idate-day a {display:block; width:100%; height:100%; text-decoration:none !important; color:#16233e;}
#idate-calend-week-days-mob {width:calc(100% - 20px); margin: 10px 0px; }
#idate-calend-week-days-mob b {width:14.2%; display: inline-block; text-align: center;}
.idate-bn {border:none !important;}
.idate-last-date, .idate-last-date a {color:#ccc; text-decoration:none;}
#idate button {background-color: #fff; outline: none; transition: all .2s ease-in-out; position:absolute; top:20px; border: 1px solid #bbb; border-radius: 3px; padding: 3px 8px; cursor: pointer;}
#idate button:hover {background: #f9f9f9;}
#idate button svg {height: 17px; position: relative; top:-1px; width: 18px; fill: #454545; }
#idate-arr-l {left:20px;}
#idate-arr-r {right:20px;}
/*#idate .idate-sel:first-child {border-radius: 9px 0px 0px 9px;}*/
/*#idate .idate-sel:last-child {border-radius: 0px 9px 9px 0px;}*/
.idate-sel {background:#006eb0 !important; color:#fff !important;}
.idate-sel a {color: #fff;}
.idate-sel-range {background:#e0e0e0 !important; }
.idate-sel-range-move {background:#e0e0e0 !important;}
#idate-foot {border-top:1px solid #f1f1f1; padding:10px 0px; margin:30px 20px 0px 0px;}
#idate-btns {display: flex; height: 25px; justify-content: space-between; align-items: center;}
#idate-btns b {font-weight:500; color:#454545; font-size:14px; cursor:pointer; border-bottom:1px solid #fff;}
#idate-btns b:hover {color: #006eb0;}
#idate-s, #idate-e {text-transform: lowercase; }
#idate-apply-btn, #idate-clear-btn {font-size: 12px; text-transform: uppercase; cursor: pointer;}
#idate-apply-btn:hover, #idate-clear-btn:hover {color:#0d6efd }
/* DPWIN END */
/* Market BEGIN */
#market-curriculum-list {display: flex; margin-top: 30px; flex-wrap: wrap; gap: 20px;}
.market-curriculum-item { flex: 0 0 33.333%; cursor: pointer; text-decoration: none; color: #454545;}
.market-curriculum-item:hover {color: #000;}
.market-curriculum-cover {flex: 0 0 calc(33.333% - 10px); height: 160px; overflow: hidden; position: relative; }
.market-curriculum-cover img { width: 100%; border-radius: 6px;; height: 100%; object-fit: cover; object-position: center; }
.market-curriculum-title {font-size: 16px; margin-top: 5px;}
/* Market END */
/* Hint BEGIN */
.ques-hint {position: relative; cursor: help;}
.hint-text {position: absolute; z-index: 250; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; top:18px; left: -20px; max-width: 400px; padding: 15px; font-size: 13px; background: #fff; border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,.3), 0 0 1px 0 rgba(0,20,51,.4);}
.hint-text.hint-up {top:auto; bottom: 30px; width: 200px;}
.hint-text-game {position: absolute; z-index: 250; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; display: none; top: 16px; left: -20px; max-width: 400px; padding: 4px 8px; font-size: 13px; background: #fff; border-radius: 6px; box-shadow: 0 20px 40px rgba(0,0,0,.3), 0 0 1px 0 rgba(0,20,51,.4); }
.hint-text b {font-weight: 600;}
.hint-text-show {display: block; opacity: 1; transform: translateY(0);}
/* Hint END */
/* Quill BEGIN */
.quill-chessboard-box {margin-bottom: 1rem;}
.quill-chessboard { padding: 0px !important; position: relative; }
.quill-sort-btns {position: absolute; right: 5px; background: #ccbdbdb3; border-radius: 6px; top: 35px; display: flex; align-items: center; justify-content: center; height: 24px; border:none; cursor: pointer; }
.quill-sort-btns button {padding: 0; border-radius: 6px; background-position: center; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; border:none; cursor: pointer;}
.quill-sort-btns button:hover {background-color: #00000040;}
.chessboard-sort-up-btn { background: 0px 0px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E"); }
.chessboard-sort-down-btn { background: 0px 0px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");; }
.chessboard-sort-handle {position: absolute; right: 30px; padding: none; top: 20px; display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; border:none; cursor: pointer; background: 5px 0px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' class='bi bi-grip-horizontal' viewBox='0 0 16 16'%3E%3Cpath d='M2 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E"); }
.chessboard-move-puzzle {position: absolute; right: 5px; padding: 2px 5px; border-radius: 6px; top: 100px; display: flex; align-items: center; justify-content: center; height: 24px; width: 24px; border:none; cursor: pointer; background: #ccbdbdb3 center no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-arrow-up-right-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 0 16 0A8 8 0 0 0 0 8m5.904 2.803a.5.5 0 1 1-.707-.707L9.293 6H6.525a.5.5 0 1 1 0-1H10.5a.5.5 0 0 1 .5.5v3.975a.5.5 0 0 1-1 0V6.707z'/%3E%3C/svg%3E"); }
.chessboard-move-puzzle:hover {transform: scale(1.2); background-color: #00000040; }
.quill-chessboard-ok-btn {position: absolute; right: 0px; padding: none; top: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 25px; width: 25px; border:none; cursor: pointer; color: #000;}
.quill-chessboard-ok-btn { background: #ffc207 no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-check-lg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E"); ;}
.quill-chessboard-ok-btn:hover {background-color: #198754;}
.remove-chessboard-btn, .remove-chessboard-btn2 {position: absolute; right: 0px; padding: none; top: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 25px; width: 25px; border:none; background: none; cursor: pointer; color: #000;}
.remove-chessboard-btn:hover, remove-chessboard-btn2:hover {background: #00000012;}
.remove-chessboard-btn::before,
.remove-chessboard-btn::after,
.remove-chessboard-btn2::before,
.remove-chessboard-btn2::after
{content: ''; position: absolute;top: 50%;left: 50%;width: 60%;height: 2px;background: #000;border-radius: 1px;}
.remove-chessboard-btn::before, .remove-chessboard-btn2::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.remove-chessboard-btn::after, .remove-chessboard-btn2::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.quill-chessboard-settings {overflow-y: scroll; max-height: calc(100% - 16px);}
.ql-videolink {position: relative;}
.ql-videolink:before { content: ''; display: block; position: absolute; left: 10%; top:10%; width: 80%; height: 80%; background-size: contain !important; background: no-repeat center 100% url('data:image/svg+xml,')}
.ql-chessboard, .ql-photos, .ql-pgnfile, .ql-chessboard-past, .ql-insert-initial-line {position: relative;}
.ql-chessboard-left {float: left; margin: 5px 20px 5px 0px;}
.ql-chessboard-right {float: right; margin: 5px 0px 5px 20px;}
/* .ql-chessboard::before { content: ''; display: block; position: absolute; left: 10%; top:10%; width: 80%; height: 80%; background-size: contain !important; background: no-repeat center 100% url('data:image/svg+xml,');} */
.ql-photos::before { content: ''; display: block; position: absolute; left: 10%; top:10%; width: 80%; height: 80%; background-size: contain !important; background: no-repeat center 100% url('data:image/svg+xml,'); }
.ql-chessboard-past::before { content: ''; display: block; position: absolute; left: 10%; top:10%; width: 80%; height: 80%; background-size: contain !important; background: no-repeat center 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-down-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm6.5 4.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5a.5.5 0 0 1 1 0'/%3E%3C/svg%3E"); }
.ql-insert-initial-line::before { content: ''; display: block; position: absolute; left: 10%; top:10%; width: 80%; height: 80%; background-size: contain !important; background: no-repeat center 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-bar-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5m-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); }
/* .ql-pgnfile::before { content: ''; display: block; position: absolute; left: 10%; top:10%; width: 80%; height: 80%; background-size: contain !important; background: no-repeat center 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clipboard-plus-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5zm4.5 6V9H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V10H6a.5.5 0 0 1 0-1h1.5V7.5a.5.5 0 0 1 1 0'/%3E%3C/svg%3E"); } */
.ql-pgnfile::before, .ql-chessboard::before {
content: '';
display: block;
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background-size: contain !important;
background: no-repeat center 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='512' height='512'%3E%3Cpath d='M19,0H5A5.006,5.006,0,0,0,0,5V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V5A5.006,5.006,0,0,0,19,0Zm3,14v4H18v4H14V18H10v4H6V18H2V14H6V10H2V6H6V2h4V6h4V2h4V6h4v4H18v4ZM10,10H6V6h4Zm4,0V6h4v4Zm-4,4v4H6V14Zm4,0h4v4H14Zm-4-4h4v4H10Z'/%3E%3C/svg%3E");
}
.ql-align-center{margin:0 auto; width: 100%; min-height: 250px;}
.player-move-ac {background: #f0f0f0;}
#quill-modal-photos-list {border:1px dashed #00000030; background: #fff; border-radius: 6px; padding: 0px; min-height: 200px; display: flex;}
#quill-modal-photos-list img {max-width: 100%; width: auto; }
#quill-modal-photo-size img {width: 100%; border-radius: 6px; max-height: 300px;}
.quill-modal-photo {margin: 20px; position: relative;}
.quill-modal-photo .cross-icon {position: absolute; background-color: #ffffff99; right: 5px; top:5px; cursor: pointer;}
.quill-modal-photo .cross-icon:hover {background-color: #fff;}
.quill-chessboard-text { margin-left: 15px;}
.quill-chessboard [class^="board-"] {border-radius: 3px; border: 2px solid #796251;}
.quill-chessboard-title, .q-photos-box-title {font-size: 18px; margin-bottom: 5px; font-weight: 500;}
.quill-chessboard-left, .quill-chessboard-left-content {display: flex; justify-content: space-between; gap: 25px;}
.quill-chessboard-player {display: none; background-color: #fff;}
.quill-chess-player-style .quill-chessboard-player {width: calc(var(--player-width)); margin-left: 10px; display: block; position: relative; border:1px solid #dedede; border-radius: 3px;}
#curriculum-theme-homework-uploaded .quill-chessboard-title {}
.quill-chessboard-title.contenteditable {padding: 3px 5px; outline: none;}
.quill-chessboard-left .btn-icon-left {background-color: #fff;}
.quill-chessboard-left #board-history {background: #fff;}
.q-photos-box-text {margin-top: 1rem;}
.q-photos-box-list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.q-photos-box-list img {width: auto;}
.q-photos-type-s .q-photos-box-list img {width: 200px;}
.q-photos-type-m .q-photos-box-list img {width: 300px;}
.q-photos-type-l .q-photos-box-list img {width: 400px;}
.q-photos-type-xl .q-photos-box-list img {width: 500px;}
.q-photos-box img {max-width: 100%;}
/* .quill-chess-align-right .quill-chessboard-left-content {flex-direction: row-reverse !important;} */
.quill-chess-align-left .quill-chessboard-left-content {justify-content: left;}
.quill-chess-align-center .quill-chessboard-left-content {justify-content: center;}
.quill-chess-align-center .quill-chessboard-text {display: none;}
.quill-chess-align-center .quill-chessboard-title {text-align: center}
.quill-chess-align-left .quill-chessboard-text {padding-left:20px}
.quill-chessboard-player-moves {overflow-x: auto; height: calc(100% - 40px);}
.quill-chessboard-player-btns {height: 40px; background: #f9f9f9; border-radius: 0px 0px 3px 3px; position: absolute; bottom:0px; left: 0px; width: 100%; display: flex; justify-content: space-between;}
.quill-chessboard-player-btns button {width: 25%; display: block; height: 100%; cursor: pointer; background-color: inherit; outline: none; border:none;}
.quill-chessboard-player-btns button:hover, .quill-chessboard-player-btns button:focus {background-color: #f0f0f0;}
.quill-player-backward { background: no-repeat center url('data:image/svg+xml,')}
.quill-player-start { background: no-repeat center url('data:image/svg+xml,')}
.quill-player-end { background: no-repeat center url('data:image/svg+xml,')}
.quill-player-forward { background: no-repeat center url('data:image/svg+xml,')}
.quill-player-record {background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-record-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-8 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3C/svg%3E");}
.player-record-ok {background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' class='bi bi-record-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-8 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3C/svg%3E");}
#class-finished-history-boards {overflow: scroll; flex-direction: column; display: flex; gap: 5px; height: 400px; padding: 15px; background: #f5f5f5; border-radius: 6px;;}
#class-finished-history-boards .board-history-moves-box {max-width: 200px !important;}
.board-history-moves-box {max-width: 320px; min-width: 200px;}
.win-popup .board-history-moves-box {width: 280px;}
.win-popup .player-info-item .avaimg {width: 20px; height: 20px; border-radius: 50%;}
.board-players-info {display: flex; gap: 20px;}
.user-game-wrap, .board-game-wrap {padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px dashed #dedede;;}
.user-game-wrap:last-child, .board-game-wrap:last-child {border-bottom: none;}
.win-popup .quill-chessboard-left, .quill-chessboard-left-content {justify-content: left;}
.classroom-themes-theme {display: inline-flex; cursor: pointer; align-items: center; gap: 5px; padding: 5px 10px;}
.classroom-themes-theme-ac {background: #bad0e6; border-radius: 6px;}
#after-class-theme-tab-theory .chessboard-move-puzzle {display: none;}
#after-class-theme-tab-theory .pgn-icon {display: none;}
.solve-puzzle-box { width: 75dvh !important; max-height: 100%; width: 100%;}
.solve-puzzle-box-right {width: 300px;}
.board-blank {width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+PGRlZnM+PGcgaWQ9InRpbGUiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNmMGQ5YjUiLz48cmVjdCB4PSIxIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjYjU4ODYzIi8+PHJlY3QgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI2I1ODg2MyIvPjxyZWN0IHg9IjEiIHk9IjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNmMGQ5YjUiLz48L2c+PGcgaWQ9InJvd19oYWxmIj48dXNlIGhyZWY9IiN0aWxlIi8+PHVzZSB4PSIyIiBocmVmPSIjdGlsZSIvPjx1c2UgeD0iNCIgaHJlZj0iI3RpbGUiLz48dXNlIHg9IjYiIGhyZWY9IiN0aWxlIi8+PC9nPjwvZGVmcz48dXNlIGhyZWY9IiNyb3dfaGFsZiIvPjx1c2UgeT0iMiIgaHJlZj0iI3Jvd19oYWxmIi8+PHVzZSB5PSI0IiBocmVmPSIjcm93X2hhbGYiLz48dXNlIHk9IjYiIGhyZWY9IiNyb3dfaGFsZiIvPjwvc3ZnPg==');}
.solve-puzzle-box .board-blank {height: 75dvh !important; width: 75dvh !important;}
.solve-puzzle-footer {padding: 5px; text-align: right;}
.al-solve-puzzle-res-title {display: flex; gap: 5px; align-items: center;}
#al-solve-puzzle-again, #al-solve-puzzle-next {display: inline-flex; width: 150px; background: #fff; cursor: pointer; max-width: calc(50% - 10px); border: 1px solid #dedede; border-radius: 6px;; align-items: center; justify-content: center; padding: 5px 20px}
.quill-chessboard-box.quill-chess-width-400 .board-history-moves-box {height: 395px;}
.classroom-history-board-remove {color: #b1b1b1; font-weight: 400; font-size: 14px; border-bottom: 1px dotted; cursor: pointer;}
.classroom-history-board-remove:hover {color: red;}
#classroom-number-timeline {height: 5px; border-radius: 6px; margin-top: 3px; background: #00000020;}
#classroom-number-timeline span {display: block; background: #3c8662; border-radius: 6px; height: 100%; width: 0%; transition: width 0.3s ease;}
.classroom-timeline-orange {background-color: #b58863 !important;}
.classroom-timeline-red {background-color: #b4482a !important;}
#create-instant-online-lesson-btn select {border: none; width: auto !important; min-height: auto !important; background-color: #00000018; margin: 0px; padding: 2px 18px 2px 5px;}
#create-instant-online-lesson-btn span {display: block; min-width: 24px;}
#create-instant-online-lesson-btn span::before {background-size: 25px !important;}
.tab-line {display: flex; justify-content: space-between; padding: 10px 5px; border-bottom: 1px solid #00000018;}
.tab-line:hover {background: #f5f5f5; }
.list-icons {list-style: none; display: flex; gap: 15px; padding: 0px;}
.quill-chessboard-editor-warn {padding: 10px 18px; border-radius: 12px; background: #b62e2e29; margin-bottom: 20px; position: relative;}
.editor-castling-box {background: #fff; padding: 10px; border: 1px solid #dedede; border-radius: 6px;}
.editor-castling-box label {width: calc(50% - 4px); border-radius: 6px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center;}
.editor-castling-box label input {cursor: pointer;}
.editor-castling-box label:hover {color: #000;}
.editor-castling-box label .king-black-icon, .editor-castling-box label .king-white-icon {position: relative; bottom: 2px;}
.quill-chess-width-200 .quill-chessboard {width: 200px; height: 200px;}
.quill-chess-width-200 .quill-chessboard-text {width: calc(100% - 220px);}
.quill-chess-width-200.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 235px - var(--player-width));}
.quill-chess-width-200.quill-chess-player-style .quill-chessboard-player {height: 200px;}
.quill-chess-width-220 .quill-chessboard {width: 220px; height: 220px;}
.quill-chess-width-220 .quill-chessboard-text {width: calc(100% - 240px);}
.quill-chess-width-220.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 255px - var(--player-width));}
.quill-chess-width-220.quill-chess-player-style .quill-chessboard-player {height: 220px;}
.quill-chess-width-250 .quill-chessboard {width: 250px; height: 250px;}
.quill-chess-width-250 .quill-chessboard-text {width: calc(100% - 270px);}
.quill-chess-width-250.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 285px - var(--player-width));}
.quill-chess-width-250.quill-chess-player-style .quill-chessboard-player {height: 250px;}
.quill-chess-width-300 .quill-chessboard {width: 300px; height: 300px;}
.quill-chess-width-300 .quill-chessboard-text {width: calc(100% - 320px);}
.quill-chess-width-300.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 335px - var(--player-width));}
.quill-chess-width-300.quill-chess-player-style .quill-chessboard-player {height: 300px;}
.quill-chess-width-350 .quill-chessboard {width: 350px; height: 350px;}
.quill-chess-width-350 .quill-chessboard-text {width: calc(100% - 370px);}
.quill-chess-width-350.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 385px - var(--player-width));}
.quill-chess-width-350.quill-chess-player-style .quill-chessboard-player {height: 350px;}
.quill-chess-width-400 .quill-chessboard {width: 400px; height: 400px;}
.quill-chess-width-400 .quill-chessboard-text {width: calc(100% - 420px);}
.quill-chess-width-400.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 435px - var(--player-width));}
.quill-chess-width-400.quill-chess-player-style .quill-chessboard-player {height: 400px;}
.quill-chess-width-450 .quill-chessboard {width: 450px; height: 450px}
.quill-chess-width-450 .quill-chessboard-text {width: calc(100% - 470px);}
.quill-chess-width-450.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 485px - var(--player-width));}
.quill-chess-width-450.quill-chess-player-style .quill-chessboard-player {height: 450px;}
.quill-chess-width-500 .quill-chessboard {width: 500px; height: 500px;}
.quill-chess-width-500 .quill-chessboard-text {width: calc(100% - 520px);}
.quill-chess-width-500.quill-chess-player-style .quill-chessboard-text {width: calc(100% - 535px - var(--player-width));}
.quill-chess-width-500.quill-chess-player-style .quill-chessboard-player {height: 500px;}
.q-text-curiculum p {margin-bottom: 0px;}
.q-text-curiculum h1, .q-text-curiculum h2, .q-text-curiculum h3 {font-family: inherit;}
.q-text-curiculum table {border-collapse: collapse;}
.q-text-curiculum table td {border:1px solid #e6e6e6; padding: 5px;}
.q-text-curiculum .ql-size-large {font-size: 1.5em;}
#after-classroom-board {display: flex; justify-content: space-between;}
#after-classroom-board .quill-chessboard-left, .quill-chessboard-left-content {justify-content: left;}
#after-classroom-homework-themes {margin-bottom: 10px; padding-bottom: 10px; }
.classroom-homework-theme {font-size: 18px; margin-bottom: 5px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;}
.classroom-homework-theme span {display: flex; align-items: center;}
.classroom-homework-theme.is-homework-done svg {color: green;}
.classroom-homework-theme.ac-theme {background: #dfdfdf; padding: 1px 5px; border-radius: 6px;}
.homework-content__item:empty {display: none;}
.classroom-slide-position-btns {display: flex; overflow: hidden; border-radius: 6px; border: 1px solid #dedede;}
.classroom-slide-position-btns button {border: none; padding: 5px 3px; background: none; outline: none; display: flex; align-items: center;}
.classroom-slide-position-btns button:hover {background: #f5f5f5;}
.classroom-slide-position-btns button svg {height: 20px; width: auto;}
.info-gray {background: #f5f5f5; border-radius: 6px; padding: 20px;}
#after-classroom-board img {height: 70px; border-radius: 6px; cursor: pointer;}
.ac-history-board {display: inline-block;}
@media (max-width: 1400px) {
.quill-chessboard-text {width: 100% !important; margin-left: 15px;}
/*.quill-chessboard-left-content {flex-direction: column-reverse !important;}*/
.quill-chessboard-left, .quill-chessboard-left-content {justify-content: left;}
}
@media only screen and (max-width: 600px) {
.quill-chessboard-left {flex-wrap: wrap;}
.quill-chessboard {width: 100% !important; height: auto !important;}
.quill-chess-player-style .quill-chessboard-player {width: 100% !important; margin-top:20px; margin-left: 0px;}
.quill-chessboard-player-btns {top:0px; bottom: inherit;}
.quill-chessboard-player-moves {top:40px; position: relative;}
#classroom-right .quill-chessboard-player-moves {top:0px;}
.win-popup-header {font-size: 14px;}
}
/* Quill END */
/* Board BEGIN */
.highlight1-32417,.highlight2-9c5d2 { box-shadow: none; background: #84956e;}
.sq-mark {cursor: pointer;}
[class*="black"].highlight-cell {background: #aaa054 ;}
[class*="white"].highlight-cell {background: #cdd084 ;}
[class*="black"].sq-mark:hover {background: #aaa054 ;}
[class*="white"].sq-mark:hover {background: #cdd084 ;}
.sq-mark::before {
display: block;
content: '';
position: absolute;
z-index: 101;
width: 25px;
height: 25px;
left: calc(50% - 12px);
top: calc(50% - 12px);
background-color: #17b890;
opacity: 0.8;
border-radius: calc(10vmin * 0.5);
pointer-events: none;
}
.piece-417db { z-index: 9999 !important;}
#game-section {
display: grid;
grid-template-columns: auto 315px;;
grid-template-rows: auto;
align-items: start;
justify-content: start;
height: 100%;
}
#game-left {width: 280px;}
#game-right {width: calc(100% - 850px );}
.game-left-section, .game-right-section {min-width: 315px; max-width: 400px; width: 100%;}
#gameBoard {position: relative;}
#game-cover {position: absolute; border-radius: 2px; left: 2px; top:2px; width: calc(100% - 4px); height: calc(100% - 4px); display: flex; justify-content: center; align-items: center; background: #ffffff40; backdrop-filter:blur(12px); }
#game-cover button {border:1px solid #b6b6b6; transition: transform 0.5s ease; padding: 10px 0px; width: 200px; font-size: 21px; text-align: center; border-radius: 6px; background: #fff; cursor: pointer;}
#game-cover button:hover {background: #f7f7f7;}
#game-cover [class^="board-"] {border:2px solid #dedede !important;}
.game-section-result {padding: 0px !important; float: right; margin-top:30px;}
.game-section-result-top {display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; border-radius: 5px 5px 0px 0px; padding: 10px 0px;}
#game-section-win-top {background: #198754;}
#game-section-mistake-top {background: #9e5353;}
#game-section-start-top {background: #c8e0a6;}
.game-section-result-content {padding: 20px 20px 30px 20px;}
.game-section-result-content div {}
.game-section-result-content button {border:1px solid #dedede; cursor: pointer; box-shadow: 1px 1px 1px 0px #b6b6b642; border-radius: 4px; width: 100%; padding: 10px 8px; margin-top:20px; background: #fff;}
.game-section-result-content button:hover {background: #f7f7f7;}
.game-section-result svg {margin-left: 10px;}
@media (max-width: 1040px) {
.game-section-result-content {
padding: 8px 8px 12px 8px;
}
.game-section-result-content button {
padding: 8px 6px;
margin-top:8px;
}
}
@media (max-width: 991px) {
.pl-root.pl-lesson-mode .pl-main {
gap: 10px;
max-width: none;
height: 100%;
}
.pl-root.pl-lesson-mode .pl-board-wrap {
width: min(calc(100% - 132px), calc(var(--pl-height, 100dvh) - 24px));
max-width: min(calc(100% - 132px), calc(var(--pl-height, 100dvh) - 24px));
max-height: calc(var(--pl-height, 100dvh) - 24px);
flex: 0 1 auto;
}
.pl-root.pl-lesson-mode .pl-controls-wrap {
flex: 0 1 122px;
min-width: 122px;
max-width: 168px;
}
.pl-root.pl-lesson-mode .pl-controls-inner {
gap: 8px;
padding-bottom: 6px;
}
.pl-root.pl-lesson-mode .game-section-result,
.pl-root.pl-lesson-mode .game-move-type {
margin-top: 0 !important;
}
}
#next-lesson-btn span {display: flex; align-items: center;}
#next-lesson-btn span svg {height: 20px; width: auto;}
.game-cover.cg-wrap {
max-width: calc(100vh - var(--board-bottom-margin));
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
}
.game-cover.cg-wrap > cg-container {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
max-height: calc(100vh - var(--board-bottom-margin));
max-width: calc(100vh - var(--board-bottom-margin));
aspect-ratio: 1 / 1;
}
#foot-links {display: flex; justify-content: space-between;}
#classroom-video iframe {height: 400px; background: #f5f5f5; border-radius: 6px;}
#finished-students-col {padding-right: 0px;}
.win-new-piece {position: absolute; z-index: 999; padding: 15px; left: 10px; top:10px; background: #fff; border-radius: 6px; box-shadow: 0 10px 20px -5px rgba(0,0,0,.4);}
.win-new-piece button {position: absolute; border-radius: 50%; right: 5px; top: 5px; display: flex; align-items: center; justify-content: center; height: 16px; width: 16px; padding: 0px; outline: none; border: none; cursor: pointer; background-color: #fff; ;}
.win-new-piece ul {list-style: none; display: flex; padding: 0px;}
.win-new-piece ul li {display: block; cursor: pointer; height: 40px; width: 40px; background-size: contain;}
.win-new-piece ul li:hover {background-color: #f5f5f5; border-radius: 6px;}
.win-new-piece b {font-weight: 500; text-align: center; display: block; font-size: 18px;}
#survey-box {border-radius: 6px; max-height: 280px; overflow-y: scroll; box-shadow: 0px 0px 4px 0px #4687ee; background: #f9f9f9;; position: relative;}
.survey-box-close {position: absolute; background: none; border: none; right: 0px; top:0px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px;}
.survey-box-close svg {height: 25px; width: auto;}
.survey-box-close:hover {background: #00000010;}
#survey-box-title {font-size: 18px; color: #000; cursor: default; max-width: 55px; overflow: hidden; padding: 10px; border-radius: 6px 6px 0px 0px;}
#survey-box-list {padding: 10px; }
#survey-box-list span {color: #777;}
.classroom-poll-text-btn {border-bottom: 1px dotted; cursor: pointer; margin-right: 10px; font-size: 14px;}
.classroom-poll-text-btn:hover {color: #000; }
.quiz-del-move {display: inline-block; cursor: pointer; height: 16px; width: 16px; background-size: cover !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-backspace-fill' viewBox='0 0 16 16'%3E%3Cpath d='M15.683 3a2 2 0 0 0-2-2h-7.08a2 2 0 0 0-1.519.698L.241 7.35a1 1 0 0 0 0 1.302l4.843 5.65A2 2 0 0 0 6.603 15h7.08a2 2 0 0 0 2-2zM5.829 5.854a.5.5 0 1 1 .707-.708l2.147 2.147 2.146-2.147a.5.5 0 1 1 .707.708L9.39 8l2.146 2.146a.5.5 0 0 1-.707.708L8.683 8.707l-2.147 2.147a.5.5 0 0 1-.707-.708L7.976 8z'/%3E%3C/svg%3E");}
#survey-start-btn {background: #e4edf5; outline: none; padding: 0 5px; border-radius: 6px; cursor: pointer; margin: 0 auto; border:none; }
#survey-box-wrap {position: relative;}
#quiz-user-result, #quiz-showcase-result {position: absolute; padding: 20px; background: #fff; border-radius: 6px; z-index: 10; left: -215px; top: 0px; width: 200px; box-shadow: 0 10px 20px -5px rgba(0,0,0,.4);}
.quiz-user-res-attempt {display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; margin-bottom: 5px;}
.quiz-user-res-attempt move {display: inline-block; padding: 1px 3px; background: #f5f5f5; border-radius: 6px;}
#quiz-showcase-result {width: 400px; height: 250px; left: -415px; top: -50px; display: flex; gap: 15px; justify-content: space-between;}
#quiz-showcase-board {width: 200px; height: 200px;}
#quiz-showcase-moves {border: 1px solid #dedede; width: 145px; padding: 10px; border-radius: 6px; }
#quiz-showcase-moves move {display: inline-block; width: 55px; overflow: hidden; margin: 0px 10px 10px 0; background: #f5f5f5; border-radius: 6px; padding: 2px 5px;}
#quiz-showcase-moves move:nth-of-type(even) {margin-right: 0px;}
.showcase-move-ac {background-color: #1971ac20 !important;}
#player-quiz-icon-on svg {color: #198754;}
.poll-activated {max-height: 250px;}
#survey-box-settings {display: flex; gap: 10px;}
#survey-box-settings-view {display: flex; align-items: center; }
#survey-box-settings-timer-wrap {min-width: 50px;}
#survey-box-settings-timer {display: inline-flex; padding: 0px 5px; background: #f8ae1a; border-radius: 6px;}
#survey-box-settings-info {color: #8a8a8a;}
.poll-timer-red {background-color: #f16d7b !important;}
#school-promo-box {display: flex; justify-content: space-between; padding: 5px 15px; border-radius: 6px; border: 1px solid #b1b1b1; margin-bottom: 10px; cursor: pointer;}
#school-promo-box:hover {background: #f5f5f5;}
#school-promo-title {width: calc(100% - 40px); color: #000; display: flex; align-items: center; }
#school-promo-video-icon { display: flex; align-items: center; justify-content: center; }
#school-promo-video-icon svg {height: 30px; width: auto; color: #f3a757;}
#school-promo-big-btn {margin: 40px auto 0px auto; transition: transform 0.3s ease; width: 360px; padding: 15px 10px; gap: 10px; font-size: 21px; color: #fff; border-radius: 12px; background: #f3a757; box-shadow: 1px 1px 3px 0px #d1d1d1; cursor: pointer; display: flex; justify-content: center; align-items: center;}
#school-promo-big-btn:hover {transform: scale(1.05); }
#school-promo-big-btn svg {height: 40px; width: auto;}
#school-promo {background: #dedede; padding: 30px 0px 40px 0px; margin: 20px 0px;}
#poll-show-result-btn {background-color: #198754 !important; color: #fff;}
.coach-hidden-notation__close {position: absolute; cursor: pointer; right: 2px; top: 4px; border: none; background: none; border-radius: 50%;}
.classroom-participant .lock-svg {position: absolute; right: -8px; bottom: -9px; z-index: 99; color: #414141;;}
.container-classroom #mainbox {padding: 20px 25px 0px 20px; height: calc(100vh - 70px); border-radius: 0px; width: 100%; }
.tariffs-card__container {
display: flex;
justify-content: space-between;
width: 100%;
/* flex: content !important; */
flex-wrap: nowrap;
}
@media screen and (max-width: 1024px) {
.tariffs-card__container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 768px) {
.tariffs-card__container {
display: flex;
flex-direction: column;
}
}
#tariffsPlanTab {
margin: 0 auto;
max-width: 900px;
}
#classroom-coach-sync {display: inline-block; margin-left: 15px;}
#classroom-coach-sync svg {height: 21px; width: auto; }
#classroom-coach-lock-all-boards {display: inline-block; margin-left: 15px; cursor: pointer;}
#classroom-coach-lock-all-boards svg {height: 21px; width: auto; color: #a8a8a8; }
#classroom-coach-lock-all-boards.board-locked svg {color: #ab452a;}
.class-tool-help-text {background: #f5f5f5; border-radius: 12px; padding: 20px; line-height: 1.5;}
.class-tool-help-text ul {list-style: disc;}
.class-tool-help-text ul li {margin-top: 10px;}
.class-tool-help-text button {border: 1px solid #dedede; background: #fff; border-radius: 6px; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 10px 20px 10px 15px;}
.container-classroom .classroom-piece-symbols ul {grid-template-columns: inherit;}
.container-classroom .classroom-piece-symbols {width: 300px;}
.container-classroom .classroom-piece-symbols-content {height: 400px; overflow-y: scroll; }
.container-classroom .classroom-piece-symbols, .container-classroom .classroom-piece-comment, .container-classroom .board-best-move-box {position: fixed; z-index: 99; background: #fff; padding: 10px 20px 10px 20px !important; border-radius: 6px; box-shadow: 1px 1px 6px 0px #0000002b;}
.classroom-piece-symbols-top, .classroom-piece-comment-top {display: flex; justify-content: right; gap: 10px; margin-bottom: 10px;}
.classroom-piece-symbols-top button, .classroom-piece-comment-top button {cursor: pointer; height: fit-content; width: fit-content; border: none; background:none;}
.classroom-piece-symbols-top button svg, .classroom-piece-comment-top button svg {height: 25px; width: auto;}
.container-classroom .classroom-piece-comment {width: 290px;}
.container-classroom .classroom-piece-comment .classroom-piece-comment-cancel {display: none;}
.container-classroom .board-best-move-buttons {right: 5px}
.container-classroom .board-best-move-buttons .analyze-box-close-btn svg {height: 25px; width: auto;}
#class-controls {background: #dedede; position: fixed; bottom: 0px; z-index: 100; left: 0px; width: 100%; height: 70px;}
.editor-board-turn { margin-left: auto; margin-right: 20px;}
.board-symbols-none .ranks, .board-symbols-none .files {display: none !important;}
.board-symbols-size .ranks, .board-symbols-size .files {font-size: 21px;}
.board-symbols-size .files {bottom: 8px !important;}
.chessboard-settings-list {display: flex; flex-wrap: wrap; gap: 10px; line-height: 1; font-size: 14px;}
.chessboard-settings-list b {font-weight: 500;}
.chessboard-settings-list span {color: #757575;}
thead tr td:first-child {border-radius: 3px 0 0 0;}
thead tr td:last-child {border-radius: 0 3px 0 0 ;}
.icon-lock-sm {}
.btn-hightlight {background-color: #f29b4a !important;}
#lesson-invited-students {display: flex; align-items: center;}
.attendance-lesson-save-btns-ok {padding: 20px; border-radius: 6px; background-color: #3a83bd21; margin-top: 20px;}
.attendance-lesson-save-btns-ok button {background-color: #fff;}
.servey-user {display: flex; position: relative; padding: 5px 0px; border-bottom: 1px solid #f5f5f5; justify-content: space-between; align-items: center;}
.servey-user:last-child {border-bottom:none;}
.servey-user-img {width: 25px; margin-right: 5px; position: relative;}
.servey-user-card {width: 120px; display: flex; align-items: center;}
.servey-user-img img {height: 25px; width: 25px; border-radius: 50%;}
.servey-user-attempts, .servey-user-time {background: #00000020; border-radius: 6px; padding: 0px 5px;}
#survey-box-btns {background: #f9f9f9; padding: 10px; display: flex; align-items: center; justify-content: space-between;}
#survey-box-btns button {border: 1px solid #dedede; border-radius: 6px; width: calc(50% - 10px); padding: 5px 10px; outline: none; background: #fff; cursor: pointer;}
#survey-box-top {display: flex; justify-content: space-between; background-color: #f9f9f9; align-items: center; padding: 0px 10px 0px 14px}
#survey-box-top-icons, .servey-user-inputs {width: 50px; display: flex; align-items: center; justify-content: space-between;}
#survey-box-top-icons span {cursor: pointer;}
.servey-user-inputs input {cursor: pointer;}
#survey-box-sm-top {display: flex; align-items: center; gap: 5px;}
#survey-box-sm-top select {border: none; background-color: #fff; border-radius: 6px; padding: 2px 25px 2px 10px;}
#survey-box-coach-move span {display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-left: 5px; font-weight: 500; color: #000;}
#survey-box-coach-move span i {font-style: normal; color: #8a8a8a; font-size: 14px; font-weight: 400;}
#survey-box-coach-finish-btn {display: flex; align-items: center; gap: 2px; background: #e4edf5; padding: 0px 5px; border-radius: 6px; cursor: pointer;;}
#survey-box-coach-finish-btn:hover {background-color: #dedede;}
.loading-pulse {
width: 100%;
height: 100%;
background: linear-gradient(90deg,
#ccc 0%,
#999 50%,
#ccc 100%);
background-size: 400% 100%;
animation: pulse 2s ease-in-out infinite;
border-radius: 4px;
}
@keyframes pulse {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
#theme-progress, #game-volume, #game-move-type, #game-info, .game-section-result, .info-bor-box {border:1px solid #dedede; width: 100%; padding: 20px; display: inline-block; border-radius: 6px; max-width: 280px;}
#theme-progress b {font-size: 14px; margin-left: 5px;}
.light-progress {background: #f1f1f1; margin-top:5px; position: relative; font-size: 12px; height: 20px; border-radius: 5px; width: 100%; display: flex; align-items: center;}
.light-progress span, .progress-scale span, .task-cat-progress span {position: absolute; z-index: 0; transition: width 0.5s ease; width: 0px; left: 0px; height: 100%; background: #98ce447a; border-radius: 5px;}
.light-progress b, .progress-scale b, .task-cat-progress b {position: relative; z-index: 1; font-weight: 400; color: #000; display: inline-block; padding-left: 10px;}
.progress-scale span {background: #4b9f76; border-radius: 6px;}
.progress-scale b {color: #fff;}
.level-content a span {display: inline-flex; align-items: center;}
.level-content a span svg {height: 12px; width: auto; margin-left: 5px; color: #278557;}
#game-volume {width: 100%; margin-top:30px;}
#game-volume div {margin-bottom: 10px;}
#game-volume ul {list-style: none; margin-bottom: 5px; justify-content: space-between; padding-left: 0px; display: flex; width: 100%; }
#game-volume li {display: block; cursor: pointer; width: 35px; height: 35px; line-height: 35px; text-align: center; background: #f0f0f0; border-radius: 50%;}
#game-volume li:hover {background: #dedede ;}
.volume-act {background: #808080 !important; color: #fff;}
#game-move-type-sm {display: flex; align-items: center; justify-content: space-between; border:1px solid #dedede; border-radius: var(--round); padding: 10px 20px;}
#game-move-type {display: flex; float: right; align-items: center; justify-content: space-between;}
#game-move-type span, #game-move-type-sm span {display: flex; align-items: center; justify-content: center; border:5px solid #dedede; border-radius: 50%; width: 25px; height: 25px;}
.move-turn-black {background: #000;}
#game-info {}
#game-info div {display: flex; justify-content: space-between; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; margin-bottom: 10px;}
#game-info div:last-child {margin-bottom: 0px; padding-bottom: 0px; border-bottom: none;}
#game-status-text i {font-style: normal; color: #278557; display: flex; align-items: center;}
#game-status-text svg {margin-left: 10px; color: #278557; }
#game-tasks a {display: inline-flex; align-items: center; padding: 5px 15px; text-decoration: none; margin: 0px 8px 10px 0px; color: #454545; background: #f0f0f0; border-radius: 6px;}
#game-tasks a:hover {background: #dedede;}
#game-tasks a svg {margin-left: 5px; color: #278557;}
#game-tasks a b {align-items: center; display: none;}
.theme-task-win b {display: flex !important;}
.theme-ac-link {position: relative; left: -10px;}
.theme-ac-link a {background: #1971ac24; padding: 3px 10px; border-radius: 6px; display: inline-block !important;}
.theme-ac-link a span {background-color: initial !important;}
.theme-task {display: inline-block; text-decoration: none; color: #454545; height: 100%; width: calc(25% - 20px); border-radius: 4px; margin: 0px 20px 20px 0px;}
.theme-task:hover .make-fen {box-shadow: 0px 0px 3px 1px #ddd;}
.theme-task .make-fen {background: #f5f5f5; width: 100%; height: 100%;}
.theme-task-name {height: 30px; margin-top:5px; justify-content: center; text-align: center; display: flex; align-items: center;}
.theme-task-name svg {color: #278557; margin-left: 5px;}
#theme-box {display: flex; justify-content: space-between; gap: 32px; width: 100%;}
/* #theme-left {width: 300px;}
#theme-right {width:calc(100% - 340px);} */
#theme-left {width: 100%; max-width: 360px}
/* #homework-theme-left {width: ;} */
#theme-right {width: 100%}
#theme-right h1 span {font-size: 16px; color: #777; margin-left: 5px;}
/* #game-center .classroom-piece-symbols, #game-center #pgnv-box {overflow-y: scroll; height: fit-content; } */
/* #classroom-undboard-box {height: fit-content; overflow-y: scroll;} */
#classroom-undboard-box {height: 100%; overflow-y: scroll;}
#game-center {margin-right: 30px; max-width: calc(100vh - var(--board-bottom-margin)); max-height: calc(100vh - 100px); display: flex; flex-direction: column;}
#class-chat-icon {position: fixed; display: none; cursor: pointer; left: 10px; bottom: 90px; height: 40px; width: 40px; align-items: center; justify-content: center; background: #278557; border-radius: 50%;}
#class-chat-icon svg, #class-back-btn-icon svg {width: 20px; height: auto; color: #fff;}
#class-chat-icon b {position: absolute; height: 18px; width: 18px; font-weight: 500; font-size: 12px; top: -5px; right: -5px; color: #fff; background: #f8ae1a; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
#class-back-btn-icon {position: fixed; display: none; cursor: pointer; left: 10px; top: 10px; height: 40px; width: 40px; align-items: center; justify-content: center; background: #00000050; border-radius: 50%;}
#class-chat-unread-num {position: absolute; top: -5px; right: -5px; background: rgb(248, 174, 26); color: #fff; font-size: 12px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
#class-chat-unread-num:empty, #class-chat-unread-num2:empty {display: none;}
#chat-close-btn {position: absolute; right: 3px; top:3px; cursor: pointer; border-radius: 50%; height: 18px; width: 18px; display: flex; align-items: center; justify-content: center;}
#chat-close-btn svg {height: 100%; width: 100%;}
/* @media (min-width: 768px) { #game-center { width: 500px; } }
@media (min-width: 900px) { #game-center { width: 600px; } }
@media (min-width: 1024px) { #game-center { width: 700px; } } */
/* Медиазапросы для больших экранов (от большего к меньшему) */
@media (min-width: 2000px) {
#game-center { width: 1600px; }
}
@media (min-width: 1920px) and (max-width: 1999px) {
.classroom-piece-symbols ul span { max-width: 120px; }
#game-center { width: 1000px; }
}
@media (min-width: 1750px) and (max-width: 1919px) {
#game-center { width: 900px; }
}
@media (min-width: 1600px) and (max-width: 1749px) {
#game-center { width: 800px; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
#game-center { width: 800px; }
#classroom-theory {width: 100%; left: 0px;}
}
/* Медиазапросы для средних и малых экранов (от большего к меньшему) */
@media (max-width: 1400px) {
#mainbox .classroom-finished-screen {display: block;}
}
@media (max-width: 1200px) {
#game-center { width: 430px; }
#classroom-left-box { width: 400px !important; }
#classroom-student-topic-section, #classroom-student-topic-theme {max-width: 350px;}
}
@media (max-width: 1024px) {
#game-center {
width: 370px;
max-width: inherit;
max-height: inherit;
}
#classroom-left-box { width: 320px !important; }
#classroom-right { width: 250px; }
.game-left-section,
.game-right-section { min-width: inherit; }
.game-cover.cg-wrap > cg-container,
.game-cover.cg-wrap {
max-height: calc(100vh - 200px);
max-width: calc(100vh - 200px);
}
#classroom-student-topic-section, #classroom-student-topic-theme {max-width: 150px;}
}
@media (max-width: 768px) {
#classroom-right {
max-height: 180px;
}
}
/* по умолчанию центрируем */
#board-piece-interactions {
justify-content: center;
}
@media (max-width: 1024px) and (orientation: landscape) {
#class-chat-icon, #class-back-btn-icon {display: flex;}
.classroom-piece-comment-menu-btn, .classroom-piece-symb-menu-btn {display: none;}
.container-classroom #mainbox {
width: 100%;
height: 100%;
padding: 10px 20px;
}
/* по умолчанию (split-режим) */
.container-classroom {
display: grid;
grid-template-columns: 30% 70%;
}
/* ✅ видео на весь экран */
.container-classroom.classroom-screen-video {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
}
/* ✅ чистый контент */
.container-classroom.classroom-screen-content {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
}
#tele-wrap, #tele-box {height: calc(100dvh); width: 100%;}
.game-cover.cg-wrap > cg-container,
.game-cover.cg-wrap {
max-width: inherit;
max-height: inherit;
}
#board-piece-interactions {margin-top: 0px !important; justify-content: flex-start; width: 120px;}
#game-section { display: flex; }
/* #class-controls { display: none; } */
#game-center {
width: 430px;
max-width: calc(100dvh - 60px);
}
#classroom-left-box { width: 100% !important; }
/* .board-history-moves-box { height: calc(100dvh - 140px); } */
#classroom-border-switch-wrap { display: none; }
#tele-box,
/* #tele-box iframe { height: calc(100vh) !important; } */
.board-piece-move-tile {
min-width: 100%;
width: 100%;
}
#classroom-right {/* max-width: 185px;*/ }
/* .board-history-moves-box { min-width: inherit; } */
.board-history-moves-box {
min-width: inherit;
height: calc(100dvh - 410px);
}
#history-forward-btn,
#history-backward-btn { display: none; }
#board-piece-move-user-name { display: none; }
.container-classroom-chat-bottom #classroom-chatbox-video-bottom {height: calc(100dvh - 20px) !important; }
.container-classroom-chat-bottom #tele-box {display: none;}
.container-classroom-chat-bottom #classroom-left-box.video-bottom .chatbox {height: calc(100dvh - 20px) !important; margin-top: 5px !important; width: calc(100% - 20px) !important; top:0px !important; left: 10px !important; z-index: 999;}
}
/* #gameBoard {width: 500px; } */
#gameBoard cg-board {border-radius: 6px;}
.custom-page #gameBoard {
width: 500px;
max-width: 100%;
height: auto;
margin: 0;
}
#game-rules-btn {width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; border:1px solid #dedede; border-radius: 6px; outline: none; cursor: pointer; max-width: 280px;}
#game-rules-btn svg {margin-left: 10px;}
#game-not-auth {padding: 50px 20px; min-width: 450px; text-align: center; background: #f6f6f6; border-radius: 6px;}
#game-not-auth div {margin-bottom:30px;}
#game-not-auth div button {border:1px solid #dedede; border-radius: 6px; width: 250px; outline: none; padding: 10px 20px; cursor: pointer; background: #fff; box-shadow: 1px 1px 3px 0px #e6e6e6;}
#game-not-auth div button:hover {background: #4397da30;}
#liders-tab svg {color:#454545;}
#gameBoard [class^="board-"], .make-fen [class^="board-"] {border: 2px solid #fff; !important; border-radius: 4px;}
#gameBoard .square-a8 { border-top-left-radius: 3px;}
#gameBoard .square-h8 {border-top-right-radius: 3px; }
#gameBoard .square-a1 {border-bottom-left-radius: 3px;}
#gameBoard .square-h1 {border-bottom-right-radius: 3px;}
#game-move-type, #game-info, .game-section-result {float: inherit !important; width: 100%; max-width: 100%;}
#game-center {}
#game-cover {width: calc(100% - 7px) !important;}
#game-not-auth {min-width: 100%; width: 100%;}
#game-move-type,#game-info, #theme-progress, #game-volume {max-width: 100%;}
#game-section #theme-progress {margin-top:30px;}
.sq-mark::before {width: 25px; height: 25px; left: calc(50% - 12px); top: calc(50% - 12px);}
.tasks-task-type-courses a span {white-space: nowrap;}
.tasks-task-type-img img {width: 100%; height: auto;}
/* Board END */
/* */
.chessnotation {padding: 10px 0px 0px 0px; display: block; font-size: 14px;}
.pgn-long-comment {display: block; margin-bottom: 5px;}
.pgnline {display: block; position: relative; margin-left: 6px; padding-left: 5px;}
.pgnsan {color: #808080; position: relative;}
.pgnsan b {color: #222; font-weight: 600; font-size: 14px;}
.pgnsan index {font-size: 12px; color: #808080; margin-right:2px;}
.pgnsan-context {background-color: #d0d0d0 !important;}
.san-cell-main {width: calc(50% - 20px); padding:0px 0px 0px 10px !important; border-radius: 0px !important; align-items: flex-start; display: inline-flex !important; background: #fff; align-items: center; height: 32px;}
.chessnotation num {display: inline-flex !important; align-items: center; background: #e7e7e7; justify-content: center; border-right: 1px solid #d9d9d9; height: 32px; width: 40px;}
.pgnvsan-ac {background: #d0d0d0;}
/* .chessnotation num i {display: inline-flex; height: 100%; width: 100%; align-items: center; justify-content: center; font-style: normal;} */
.chessnotation nl { display: block; width: 100%; height: 0px;}
.chessnotation empty {display: inline-flex; padding-left:10px; height: 32px; width: calc(50% - 20px); background: #fff; color: #dedede; }
.lineinline .pgnsan b {color: #808080;}
.lineinline {display: inline !important; margin-left: 0px; font-style: italic;}
.lineinline b {font-weight: 500;}
.lineinline::before {content: "("; color: #808080; margin-inline-start: 2px;}
.lineinline::after {content: ")"; color: #808080; margin-inline-end: 2px;}
.lineslevel-2 {margin-bottom: 5px;}
.pgnlines {display: block;}
.pgn-line.level-2 {margin-left: 10px; }
.tree-angle-up {position: relative;}
.pgn-vertical-line::before {display: block; content: ''; position: absolute; left: 6px; top:0px; height: 13px; width: 2px; background: #c3c3c3;}
.pgn-vertical-line.inline::before {display: none;}
.pgn-comment {color: #646464; margin-left: 3px;}
.chessnotation.notation-cells .pgn-comment {width: 100%;}
.chessnotation.notation-cells .pgn-comment:empty {display: none;}
/*.chessnotation .lineslevel-2 {border-top:1px solid #515151; border-bottom:1px solid #515151;}*/
.notation-str {padding: 10px 10px 15px 10px; line-height: 1.6;}
.notation-cells {background: #f5f5f5; padding-top:0px; }
.notation-cells .pgn-comment {padding:10px;}
.chessnotation pr {display: block;}
.pgnline.linelevel-1 {margin: 0px; padding: 0px; display: flex; flex-flow:row wrap;}
.notation-str .pgnline.linelevel-1 {display: block ;}
.chessnotation step {width: 40px; justify-content: center; border-right: 1px solid #dedede; color: #dedede; height: 35px; font-size: 16px; background: #fff; display: inline-flex; align-items: center;}
.chessnotation .pgnsan.sanlevel-1 {width: calc(50% - 20px); border-radius: 0px; font-size: 16px; height: 35px; background: #fff; display: inline-flex; align-items: center;}
.pgn-line.level-3 {margin-left: 20px; position: relative;}
.pgn-line.level-4 {margin-left: 30px; position: relative;}
.pgn-line.level-5 {margin-left: 40px; position: relative;}
.chessnotation san {padding: 2px 3px; display: inline-block; cursor: pointer; border-radius: 6px; font-family: NotationChess, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
.chessnotation san:hover, .act-san {background: #1971ac20;}
.chessnotation .pgnlines {position: relative; margin-top: 5px; padding-left: 2px;}
.tree-angle-up::before {content: ''; display: block; position: absolute; left: -1px; top: 11px; width: 7px; height: 2px; background: #c3c3c3;}
.chessnotation .tree-angle-up::after {display: block; content: ''; position: absolute; left: -2px; top:13px; height: calc(100%); width: 2px; background: #c3c3c3;}
.pgn-last-line::after {display: none !important;}
.pgn-lines san:hover {background: #00000012;}
.board-settings-list {list-style: none; padding-left: 0px;}
.board-settings-list li {padding: 0px; margin: 0px;}
.board-settings-list li label {display: flex; cursor: pointer; justify-content: space-between; border-bottom: 1px solid #eee; padding: 10px 15px 10px 10px;}
.board-settings-list li label:last-child {border-bottom: none;}
.board-settings-list li label:hover {background: #f9f9f9;}
.board-settings-list li input {cursor: pointer; height: 15px; width: 15px; position: relative; top:5px;}
.board-settings-list .list-right {width: 20px; align-items: baseline; display: flex; justify-content: right;}
.board-settings-list .list-left {width: calc(100% - 20px); display: flex; align-items: center;}
.board-settings-list .list-left svg {margin-right: 5px; width: 16px; height: 16px; position: relative; top:2px;}
.board-settings-list .list-left i {font-style: normal; width: calc(100%); display: flex; align-items: baseline;}
.board-settings-list .list-left i b {font-weight: 400; display: block; width: calc(100% - 21px);}
.board-settings-list input:disabled {}
/* Meeting BEGIN */
.premeeting-screen {background: #dedede !important;}
/* Meeting END */
@media only screen and (max-width: 768px) {
#theme-left {
max-width: none
}
#theme-box {
padding-top: 24px;
}
#top-school-label-text {
display: none;
}
}
@media only screen and (max-width: 600px) {
#game-left, #game-right, #gameBoard {width: 100%;}
}
#rus-game-left {
max-width: 400px;
}
#rus-game-center {
display: flex;
margin-bottom: 10px;
flex-grow: 1;
}
/* Мобильные устройства */
/* @media (max-width: 1200px) {
.container-classroom { display: block !important;}
#classroom-left-box {display: block !important; width: 100% !important; height: auto !important;}
#tele-wrap {width: 100% !important; height: auto !important;}
#tele-box iframe {min-height: 230px; height: auto !important;}
#tele-box {height: auto !important; }
#mainbox {width: 100%; margin-top: 30px;}
footer .container {max-width: calc(100% - 30px) !important; }
} */
@media (max-width: 992px) {
#rus-game-section {
flex-direction: column-reverse;
align-items: center;
}
#rus-game-center {
margin-top: 10px; /* небольшой отступ сверху для мобильных устройств */
}
}
#rus-game-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.current-turn {
/* You can adjust these styles as needed */
box-shadow: 0 0 3px 2px rgba(0, 123, 255, 0.5);
}
#gameBoard [class*="alpha-"]{
color: unset !important;
top: unset !important;
right: 3px;
left: unset !important;
}
#gameBoard [class*="numeric-"] {
color: unset !important;
top: unset !important;
right: unset !important;
left: 3px;
}
@media (max-width: 844px) {
/* #mainbox {overflow-x: scroll; margin-top: 50px;} */
}
@media (max-width: 768px) {
#gameBoard [class*="alpha-"],
#gameBoard [class*="numeric-"] {
font-size: 10px; /* Установите нужный размер шрифта */
}
#gameBoard {
margin: 0;
}
#foot-links {display: block; text-align: center;}
}
#gameBoard [class^="board-"], .make-fen [class^="board-"] {
border: 0px;
border-radius: 0px;
}
.board-b72b1 {
border: 0px;
box-sizing: content-box;
}
/* Дополнительные настройки для мобильных устройств */
@media (max-width: 768px) {
#gameBoard {
max-width: none; /* Убираем ограничение максимальной ширины */
}
#rus-game-left {
max-width: none;
}
}
.piece {
pointer-events: none !important;
}
.presence-circle {
font-size: 14px;
color: gray; /* По умолчанию серый */
margin-right: 4px;
vertical-align: middle;
border: 0px !important;
/* display: inline !important; */
/* display: flex;
justify-content: center;
align-items: center; */
}
.presence-circle.online {
color: green;
}
.presence-circle.offline {
color: gray;
}
.delete-icon, .pgn-icon {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
background-color: #ccbdbdb3;
color: white;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 18px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: background-color 0.2s ease, transform 0.2s ease;
}
/* Эффект при наведении */
.delete-icon:hover {
background-color: rgba(255, 0, 0, 0.8); /* Красный фон */
transform: scale(1.2); /* Увеличение */
}
.pgn-icon {top: 70px; border:none; padding: 2px 5px; border-radius: 6px; width: auto;}
.pgn-icon:hover {background-color: #00000040; transform: scale(1.1); }
/* Если блок содержит крестик, нужно убедиться, что он имеет relative */
.quill-chessboard-box {
position: relative;
}
/* По умолчанию (режим отображения) кнопка скрыта */
.delete-icon, .quill-sort-btns {
display: none;
}
/* В режиме редакции (наличие .ql-container) кнопка показывается */
.ql-container .delete-icon {
display: inline-block; /* или block, в зависимости от нужного отображения */
}
.ql-container .quill-sort-btns {display: inline-flex;}
.delete-icon-rus {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
background-color: #ecbfbf;
color: white;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 18px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: background-color 0.2s ease, transform 0.2s ease;
}
/* Эффект при наведении */
.delete-icon-rus:hover {
background-color: rgba(255, 0, 0, 0.8); /* Красный фон */
transform: scale(1.2); /* Увеличение */
}
cg-board {
border-radius: 5px !important;
}
#rus-game-center {
display: block;
}
#gameBoard {
width: 100%;
}
.mainbox {
padding: 0px;
}
.game-player-card {
padding: 20px; /* Добавим немного отступов для красоты */
border-radius: 5px;
transition: background-color 0.3s ease; /* Плавный переход */
border: 1px solid #dedede;
}
.game-player-card.active-turn {
background-color: #fef7ef;
border-color: #fad5af;
}
.alert-chess-run {
background-color: #fef7ef;
padding: 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
border: 1px solid #fad5af;
}
/* Стили для индикатора присутствия (из updatePlayerOnlineIndicator) */
.presence-circle {
font-size: 1.2em; /* Немного увеличим размер точки */
margin-left: 5px;
margin-right: 5px;
vertical-align: middle;
}
.presence-circle.online {
color: #28a745; /* Зеленый */
}
.presence-circle.offline {
color: #f4a858;
}
.btn-circle-icon {display: flex; justify-content: center; border-radius: 50%; align-items: center; font-size: 12px; position: relative; width: 46px; height: 46px; background: #fff; outline: none;}
.btn-circle-icon svg {height: 20px; width: auto;}
.btn-circle-icon img {height: 46px; width: auto; border-radius: 50%;}
.btn-circle-icon:hover span {display: block;}
.btn-circle-icon span {
display: none;
position: absolute;
left: -15;
bottom: -15px;
white-space: nowrap;
font-size: 12px;
color: #000;
z-index: 2;
text-align: center;
width: 80px;
}
#class-controls .btn-circle-icon:first-child {
margin-left: 0px !important;
}
#class-controls .btn-circle-icon img {
width: 46px;
height: 46px;
border-radius: 50%;
}
#class-controls .btn-circle-icon:not(.do-not-shift-icon) {
margin-left: var(--btn-ml, 0px);
}
#lesson-invited-students .btn-circle-icon:first-child {
margin-left: 0px !important;
}
#lesson-invited-students .btn-circle-icon {
margin-left: var(--btn-ml, 0px);
}
/* Адаптивность заголовка урока */
#classroom-number-date-title, #classroom-student-topic-title {
font-size: var(--title-fs, 16px);
line-height: var(--title-lh, 1.4);
padding: var(--title-padding, 8px) 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: font-size 0.2s ease, line-height 0.2s ease;
}
#classroom-number-date-title b {
font-size: inherit;
display: block;
}
#classroom-number-date-title > div {
font-size: var(--subtitle-fs, 13px);
}
/* Адаптивность для очень маленьких экранов */
@media (max-width: 1000px) {
#classroom-number-date-title {
min-width: 120px;
}
/* Можно скрыть время на совсем маленьких экранах */
#classroom-number-date-title .text-gray {
display: none;
}
}
@media (min-width: 1001px) and (max-width: 1200px) {
#classroom-number-date-title .text-gray {
display: inline;
}
}
/* Подпорка для видимости "взятых фигур" под картами */
.game-player-card .captured-pieces {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px;
min-height: 20px;
padding-left: 5px;
opacity: .85;
}
.game-player-card .captured-piece-group img {
width: 18px;
height: 18px;
}
.pairing-tournament-card {
border-left: 5px solid rgb(248 193 136);
background: rgb(255, 255, 255);
padding: 10px 12px;
border-radius: 6px;
margin-bottom: 22px !important;
}