:root {
    --main-bg-color: #f8f8f8;
    --main-blue: #024074;
    --main-darkblue: #012443;
    --main-orange: #ff9d35;
    --main-darkorange: #ff750d;
    --main-white: #fff;
    --main-lightblue: #4397da;
    --main-deeplightblue: #def5fe;
    --main-gray: #777c87;
    --main-lightgray: #bdbbbb;
    --main-cover1: #e3e1d1;
    --main-danger: #e3224d;
    --link-color: #0d6efd;
    --light-blue: #4982ac;
    --round: 6px;
    --light-shadow: 0px 0px 3px 1px #00000008;;
    --todomenu-width: 250px;

    --online-site-color: #007BFF;

    --color-primary: #107036;
    --color-primary-2: #f5a858;
    --color-primary-gym: #B10D00;
    --color-primary-kitchen: #ff6d1c;
    --color-secondary: #1F1F25;
    --color-secondary-2: #110C2D;
    --color-body: #737477;
    --color-body-2: #F9F8FF;
    --color-secondary: #1F1F25;
    --color-heading-1: #110C2D;
    --color-heading-2: #262626;
    --color-white:#fff;
    --color-success: #3EB75E;
    --color-danger: #FF0003;
    --color-warning: #FF8F3C;
    --color-info: #1BA2DB;
    --color-facebook: #3B5997;
    --color-twitter: #1BA1F2;
    --color-youtube: #ED4141;
    --color-linkedin: #0077B5;
    --color-pinterest: #E60022;
    --color-instagram: #C231A1;
    --color-vimeo: #00ADEF;
    --color-twitch: #6441A3;
    --color-discord: #7289da;
}

@font-face{
    font-family: EtoMoiFont;
    src: url(/css/fonts/bebas_neue/BebasBold.eot),
    url(/css/fonts/bebas_neue/BebasBold.otf),
    url(/css/fonts/bebas_neue/BebasBold.ttf),
    url(/css/fonts/bebas_neue/BebasBold.woff),
    url(/css/fonts/bebas_neue/BebasBold.svg);

}

@font-face {
    font-family: 'NotationChess';
    font-display: block;
    src: url('/css/fonts/notation/chess.woff2') format('woff2');
}

body {
    background: #f5f5f5;
    /*font-family: 'Roboto', sans-serif;*/
    margin: 0;
    font-family: -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";
    font-size: 1rem;
    font-weight: 400;

    color: #454545;
    text-align: left;
}
.body-minor {background: #fff !important;}
body.modal-open {overflow: hidden !important;}

.p-relative {position: relative;}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    transition: all .2s ease-in-out;
}

figure {
    margin: 0 0 1rem;
}

th {
    font-weight: 300;
}


img {
    vertical-align: middle;
    border-style: none;
}

input:not(input[type="checkbox"],input[type="radio"]), textarea, select {
    border: 1px solid #00000028;
    border-radius: 6px;
    outline: none;
    padding: 6px 10px;
}

svg {overflow: hidden;   vertical-align: middle;}

select {
    appearance: none;
    -webkit-appearance: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%23444444' class='LanguageWidget-module__arrowIcon--3f6ba'%3E%3Cpath fill-rule='nonzero' d='M10.908 14.623l6.139-6.14c.5-.499.5-1.315 0-1.815l-.172-.174a1.29 1.29 0 0 0-1.817 0L10 11.553l-5.06-5.06a1.288 1.288 0 0 0-1.814 0l-.173.175c-.5.5-.5 1.316 0 1.816l6.14 6.139a1.288 1.288 0 0 0 1.815 0'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 25px;
}

input:disabled {background: #fff;}
.ques-hint {display: inline-block; height: 12px; width: 12px; background: no-repeat center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/> <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/> </svg>')}
.ques-hint-no-img {display: inline-block; width: 100%; position: relative;}
.ques-hint-icon {display: inline-block; position: relative; color: #454545}
.hint-text-show {display: block;     opacity: 1;     transform: translateY(0); max-width: 400px;}

.ques-hint-icon:hover .hint-text-game {
    opacity: 1;
    display: block;
}

.text-icon svg {height: 24px; width: auto;}

.container {padding-left: 0px; padding-right: 0px;}
h1, h2, .h2 {font-size: 30px; color: #222; font-weight: 500;}
.title {font-size: 21px; font-weight: 500;}
.div-mb-1 div {margin-bottom: 0.5rem;}

header {width: 100%; height: 70px; background-color: #fff; border-bottom: 1px solid #00000015;}
.header-content {display: flex; height: 100%;  align-items: center; justify-content: space-between;}

.label-flex {display: flex; cursor: pointer; justify-content: space-between; align-items: center;}
.label-flex input[type="checkbox"] {height: 20px; width: 20px; border-radius: 6px; cursor: pointer;}
.inline-block {display: inline-block;}
.label-flex:hover span {color: #000;}

.flex-gap-3 {display: flex; flex-wrap: wrap; gap: 16px;}
.fg3-item {    flex: 0 0 calc(33.333% - 16px);     box-sizing: border-box;    min-width: 0;     }

.line-tabs .active {border-bottom: 1px solid var(--main-lightblue)}

.win-bg-gray .nav-link.active {background: #f6f6f6; border-bottom: 1px solid #f6f6f6;}
.win-bg-gray select, .win-bg-gray input, .win-bg-gray textarea {background-color: #fff;}

.or-unit {display: flex; position: relative;  align-items: center; justify-content: center;}
.or-unit b {color: #515151; position: relative; z-index: 1; font-size: 18px; font-weight: 400; display: block; background: #fff; padding: 0px 5px;}
.or-unit::before {content: ''; top:calc(50%); left: calc(50% - 50px); height: 1px; background-color: #00000020; position: absolute; width: 100px;}

.screen-info {padding: 10px 20px; background-color: #f0f0f0; border-radius: 6px;}
.screen-info span {color: var(--light-blue); border-bottom: 1px dotted; cursor: pointer;}

.required-form-input {box-shadow: 0px 0px 4px 1px #d83a4c;}

#rotate-box {display: none;  flex-direction: column; gap: 10px;}
#rotate-box img, #rotate-box button {max-width: 70%;}

/* Универсальные стили подсказок для всех кнопок */
.tip-box {position: relative;}
.tip-box span {display: none;}

.btn-circle-icon span,
#classroom-content-type-btns li span,
#classroom-main-btns button span,
#classroom-screen-btns li span, .tip-box span {

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 8px);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: rgba(60, 60, 60, 0.95);
    background: #fff;
    padding: 5px 8px;
    border-radius: 6px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 0.5px solid rgba(0, 0, 0, 0.05);
}

/* Треугольник внизу подсказки */
.btn-circle-icon span::after,
#classroom-content-type-btns li span::after,
#classroom-main-btns button span::after,
#classroom-screen-btns li span::after, .tip-box span::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
}

/* Показываем подсказку при наведении */
.btn-circle-icon:hover span,
#classroom-content-type-btns li:hover span,
#classroom-main-btns button:hover span,
#classroom-screen-btns li:hover span, .tip-box:hover span {
    display: block;
    animation: tooltipFadeIn 0.15s ease-out;
}

/* Анимация появления */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Tip style END */

/*.table>:not(caption)>*>* {border-color: #e9e9e9;} */

.fs-10 {font-size: 10px;}
.fs-11 {font-size: 11px;}
.fs-12 {font-size: 12px;}
.fs-13 {font-size: 13px;}
.fs-14 {font-size: 14px;}
.fs-15 {font-size: 15px;}
.fs-16 {font-size: 16px;}
.fs-17 {font-size: 17px;}
.fs-18 {font-size: 18px;}
.fs-20 {font-size: 20px;}
.fs-21 {font-size: 21px;}
.fs-32 {font-size: 32px;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.td-none {text-decoration: none;}

.max-width-100 {max-width: 100% !important;}
.max-width-600 {max-width: 600px;}
.max-width-800 {max-width: 800px;}
.max-width-900 {max-width: 900px;}
.mw-30 {min-width: 30%;}
.w-24 {width: calc(25% - 10px) !important;}
.w-49 {width: calc(50% - 0.5rem) !important;}
.w-30 {width: 30% !important;}
.w-40 {width: 40% !important;}
.w-60 {width: 60% !important;}
.w-59 {width: calc(60% - 0.5rem) !important;}
.w-69 {width: calc(70% - 0.5rem) !important;}
.w-200 {width: 200px !important;}
.w-220 {width: 220px !important;}
.w-250 {width: 250px !important;}
.w-300 {width: 300px !important;}
.w-350 {width: 350px !important;}
.w-400 {width: 400px !important;}
.bottom-min-2 {position: relative; bottom:-2px;}
.top-min-2 {position: relative; top:-2px;}
.m-w-150 {min-width: 150px; max-width: 100%;}
.m-w-200 {min-width: 200px; max-width: 100%;}
.h-min-500 {min-height: 500px;}
.mt-spare {margin-top:36px;}
.px-30 {padding-left: 30px; padding-right:30px;}
.chev-right {background-repeat: no-repeat; background-position: right 5px center; 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-chevron-right' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");}
.tdn {text-decoration: none;}

.scroll-y {overflow-y: scroll;}

.label-btn-sm {background: #00000012; cursor: pointer; border-radius: 6px; padding: 5px 10px; display: inline-flex; gap: 5px; align-items: center;}
.label-btn-sm input {cursor: pointer;}

.btn-chev-down { height: 25px; width: 25px; position: absolute; right: 3px; top:50%; margin-top: -12px; border-radius: 50%; border:1px solid #f0f0f0; background-repeat: no-repeat; background-color:#fff; background-position: center; background-size: 60%; background-image: 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");}
.btn-chev-down:hover {background-color: #f7f7f7;}

.labels-inputs label {display: inline-flex; align-items: center; padding: 5px 10px; background: #00000015; border-radius: 6px; cursor: pointer; margin: 0px 10px 10px 0px;}
.labels-inputs label input {margin-right: 5px;}
.labels-inputs label span {border-radius: 50px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: #fff; margin-left: 5px; font-size: 12px;}

.form-inputs-grey input, .form-inputs-grey select, .form-inputs-grey textarea {background-color: #00000018; border: none !important;}
.form-inputs-border input, .form-inputs-border select, .form-inputs-border textarea { border: 1px solid #00000030;}

.double-check {display: inline-block; height: 16px; width: 16px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23008000' class='bi bi-check2-all' viewBox='0 0 16 16'%3e%3cpath d='M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0'/%3e%3cpath d='m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708'/%3e%3c/svg%3e");}

.ellip-text { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.unsel {-webkit-touch-callout:none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.cl {clear: left;}
.cb {clear: both;}
.clearfix::after { content: "";  display: table;  clear: both;}
.invisible {visibility: hidden;}
.cross-icon {display: inline-block; height: 30px; width: 30px; border-radius: 50%; background-size: 80% !important; background: #fff no-repeat center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>');}
.w-inherit {width: inherit !important;}
.w-auto {width: auto !important;}
.inline {display: inline !important;}

.flag {height: 18px; width: auto; border-radius: 3px; box-shadow: 0px 0px 3px 0px #00000020;}

@keyframes flashLoad {
    0%, 25% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
    75%, 100% {
        opacity: 0.4;
    }
}

@keyframes rotateAnimation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.c-pointer {cursor: pointer;}
.c-default {cursor: default !important;}
.load-cover {position: relative;}
.load-cover:after {position: absolute; content: ''; left: 0px; top:0px; width: 100%; height: 100%; background: #ffffff20; backdrop-filter:blur(1px);}
.ttс {text-transform: capitalize;}
.ttu {text-transform: uppercase;}
.opacity0 {opacity: 0;}

.info-box-green {padding: 20px; background: #2785571f; border-radius: var(--round);}
.info-box-green svg {height: 36px; width: auto;}
.load-box {display: flex; justify-content: space-between; margin-bottom: 30px;}
.win-popup-content .load-box:last-child {margin-bottom: 0px;}
.load-box-w-1 {width: 100px; height: 30px; border-radius: 6px; opacity: 0.4; background: #999; animation: flashLoad 2s infinite alternate;}
.load-box-w-4 {width: 400px; height: 30px; border-radius: 6px; opacity: 0.4; background: #999; animation: flashLoad 2s infinite alternate;}
.load-box-w-100 {width: 100%; height: 30px; border-radius: 6px; opacity: 0.4; background: #999; animation: flashLoad 2s infinite alternate;}
.load-box.flex-wrap div {margin-bottom: 1.25rem; height: 42px;}

/* ICONS BEGIN*/
.icon {display: inline-block; width: 16px; height: 16px;}
.icon-check-square {background: no-repeat center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23774a7a" class="bi bi-check-square-fill" viewBox="0 0 16 16"><path 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-2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/></svg>')}
.icon-check-calendar {background: no-repeat center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23774a7a" class="bi bi-calendar-check-fill" viewBox="0 0 16 16"> <path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708"/> </svg>')}
.icon-xl svg {height: 80px; width: auto;}
/* ICONS END*/

@keyframes blinkAnim {
    0% {background: rgba(255, 255, 255, 0.1);}
    50% {background: rgba(255, 255, 255, 0.7);}
    100% {background: rgba(255, 255, 255, 0.1);}
}

.image-uploaded-item {position: relative; min-height: 40px; border-radius: 6px; padding: 10px;  display: flex; justify-content: center; margin-bottom: 20px; background: url(/img/load9.gif) no-repeat center #e5e5e5;}
.image-uploaded-item:last-child {margin-bottom: 0px;}
.image-uploaded-item img {border-radius: 3px;}
.image-uploaded-remove {position: absolute; top: -7px; right: -7px; border-radius: 50%; background-color: #ffc008; border: none; cursor: pointer; display: block; height: 25px; width: 25px; background-repeat: no-repeat; background-position: center; background-size: 20px; 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-x' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); ;}
.image-uploaded-remove:hover {background-color: #f5f5f5;}
#attach-photo-number {text-align: center; margin: 10px 0 20px 0; font-size: 18px; color: #8a8a8a;}

.load-box-blink {position: relative;}
.load-box-blink:before {position: absolute; border-radius: var(--round); z-index: 10; content: ''; display: block; left: 0px; top:0px; width: 100%; height: 100%; animation: blinkAnim 2s infinite;}

.note-box {display: inline-block; padding: 30px; border-radius: 6px; background: linear-gradient(45deg, #c5e1e4, #e1e1e1);}
.box-note-success {display: block; padding: 20px; border-radius: var(--round); background: #98ce4421;}
.box-note-warn {display: block; padding: 20px; border-radius: var(--round); background: #ac8d2221;}
.notification-warn {display: flex;}
.notification-warn svg {height: 35px; width: auto; }
.notification-warn-content {width: calc(100% - 25px); padding-left: 15px;}
.bg-lightred {background-color: #ac8d2221 !important;}
.bg-lightblue {background-color: #689fbf21 !important;}
.bg-lightgray {background-color: #00000009 !important;}
.border-box {padding: 20px; border:1px solid #e6e6e6; border-radius: 6px;}
.border-box tr:last-child td{border-bottom: none;}
.crop-image {max-width: 100%;}
.break-line {height: 10px;}
.search-inp {padding-left: 30px !important; background-repeat: no-repeat; background-position: 8px 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");}
.enter-inp {padding-right: 30px !important; background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-arrow-return-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");}

blockquote {display: block; position: relative; padding: 0 0 0 20px; border-left: 3px solid #f4a858; border-radius: 3px 0px 0px 3px;}

.form-section input, .form-section-white input {padding: 5px 10px; color: #000; min-height: 40px; border:1px solid #dedede; outline: none; border-radius: 6px;}
.form-section .inp-div, .form-section-white .inp-div {margin-bottom: 1rem; border:1px solid #00000020; /*box-shadow: 0px 1px 3px 0px #0000000d;*/ padding: 10px 15px 15px 15px; border-radius: 6px;}
.form-section .inp-div input, .form-section .inp-div textarea, .form-section .inp-div select {border:1px solid #00000004 !important; background-color: #00000012 !important;}
.form-section-white .inp-div input, .form-section-white .inp-div textarea, .form-section-white .inp-div select {border:1px solid #00000010 !important; background-color: #fff !important;}
.inp-div b {display: block; margin-bottom: 5px; font-size: 14px;  font-weight: 500;}

.inp-gray {background: #F5F5F5; border:none; outline: none;}

.inp-imp {
    border: 1px solid #e17979;
    box-shadow: 0px 0px 9px 0px #e17979;
}

.rounded {border-radius: 6px;}
.border-none {border:none !important;}
.btn-close-circle {position: absolute; height: 16px; width: 16px; border-radius: 50%; display: block; color: #515151; cursor: pointer; border:none;}
.btn-close-circle svg, .grip-item svg {height: 16px; width: 16px; left: 0px; top:0px; position: absolute;}
.btn-close-circle:hover svg, .grip-item:hover svg {color: #000;}
.grip-item {position: absolute; background: initial; height: 16px; width: 16px; display: block; color: #515151; cursor: pointer; border:none;}
#connection-icon svg {height: 64px; width: auto; color: #000;}

.border-top-gray {border-top:1px solid #00000005;}
footer { background: #00000006;   font-size: 14px;  margin-top:80px; color: #777; }
footer a {text-decoration: none;}
#foot-colums {display: flex; justify-content: space-between;}
.foot-column a {display: inline-block; cursor: pointer; color: #454545;}
.foot-column a:hover {text-decoration: underline;}
.foot-column b {font-weight: 600; margin-bottom: 10px; display: block; color: #454545;}
.foot-column div {margin-bottom: 8px;}
.bor-top {border-top:1px solid #00000010;}

.application-data {border-radius: 8px; background: #ffffff99;}
.application-data div {margin-bottom: 20px;}
.application-data input, .application-data select {border-radius: 6px !important; padding: 10px 15px !important;}
.application-data button {width: 100%; text-transform: uppercase; padding: 8px 0px;}

.application-history-item {padding: 10px 15px 15px 15px; font-size: 18px; border-radius: 12px; background: #fff; box-shadow: 1px 1px 5px 1px #ededed; margin-bottom: 20px;}
.application-history-item:last-child {margin-bottom: 0px;}
.application-history-item-date {font-size: 14px; margin-bottom: 5px; display: flex; justify-content: space-between;}

.application-form-modal-bg-box {background: #00000012; padding: 10px; border-radius: 12px;}

.foot-column svg {margin-right: 5px;}
.foot-column-all {display: flex !important; align-items: center;}
.foot-column-all  svg {height: 15px; position: relative; top:1px; width: auto; margin-left: 5px;}
#foot-und {padding: 20px 0px 30px 0px; margin-top:20px; border-top:1px solid #00000009; display: flex; justify-content: space-between;}
.text-link {color: #454545;}
.text-link:hover {text-decoration: underline; color: var(--main-lightblue);}
.text-link-btn {color: #0D6EFD; cursor: pointer; display: inline-block; border-bottom: 1px dotted;}
.text-link-btn:hover {color: #454545;}
.remove-link {color: #999; font-size: 14px; cursor: pointer; border-bottom: 1px dotted;}
.black-label {display: inline-flex; padding: 3px 10px; background: #454545; color: #fff; border-radius: 6px;}
.remove-link:hover {color: red;}
/* #foot-und a, #foot-und span {margin: 0px 10px;} */
#foot-und span a {margin: 0px;}
#foot-contact {padding: 10px; margin-top: 10px; color: #454545; width: auto; display: inline-block; border-radius: 6px; background: #00000009;}
#foot-contact img {height: 25px; width: auto;}
#foot-contact div {display: inline-block;}
#foot-contact div a {margin-right: 10px; display: inline-block;}
#foot-contact div a:last-child {margin-right: 0px;}
#foot-contact span {margin-right: 15px;}

.text-blue-link {display: inline-block; color: #0d6efd; border-bottom: 1px dotted; cursor: pointer;}
.inp-gray {background: #f5f5f5; border:none; }

.text-center, .t-center {text-align: center;}
.text-right {text-align: right;}
.text-green, .text-green svg {color: #278557;}
.t-black {color: #333333;}
.text-gray {color: #515151;}
.text-light-gray {color: #8a8a8a;}
.text-red, .status-icon.text-red svg {color: darkred !important;}
.text-red-bright {color: #da0000;}
.text-yellow {color: #ecbf37;}
.text-orange {color: #fb9c4c;}
.text-violet {color: #774a7a;}
.text-green2 {color: #198754;}
.text-graphite {color: #1b343f;}
.wsnw {white-space: nowrap;}
.lh1 {line-height: 1;}

.container .main-box-white {padding: 0px;}

.head__for-coaches {
    font-size: 14px; border-bottom: 1px dotted; cursor: pointer; text-decoration: none; color: #454545; margin-right: 15px;
}

.head-logo {text-transform: uppercase; cursor: pointer; font-weight: 700; position: relative; bottom:-2px;}
.head-logo:hover {color: var(--main-blue) !important;}
.head-logo img {height:25px; margin-right: 5px; }
.header-btns button {border:none; width: auto; outline: none; border-radius: 6px; background: var(--main-blue); color: #fff; cursor: pointer; padding: 5px 10px;}
.header-btns button:hover {background: var(--main-blue);}
#head-links {display: flex; align-items: center; padding: 0px; list-style: none;}
#head-links a {text-decoration: none; color: #454545; }
#head-links a:not(.head-logo), .header-user-menu a:not(ul a) {color: #454545; text-decoration: none; margin-left: 24px; /* background: #00000020; */  padding: 5px 10px; border-radius: 6px;}
#head-links a:not(.head-logo):hover, .head-link-ac {background: #4380b020 !important;}
#main {background: #fff; border-radius: 6px; display: flex; justify-content: center; padding: 30px; margin-top:30px; margin-bottom: 100px;}
#header-auth a  { transition: all .1s ease-in-out; }
#header-auth a:hover {background: #f1f1f1;}
.user-menu-btn {border:1px solid #dedede; margin-left: 0px !important;}

#header-auth {position: relative;}
#header-menu-ava {height: 32px; width: 32px;}
#header-menu-ava svg {color: #515151;}
#header-menu-ava img {height: 32px; width: 32px; border-radius: 50%;}
#header-auth-menu {border:1px solid #737477ba; border-radius: 30px; background-color: #fff;  display: flex; align-items: center; padding: 5px 10px 5px 15px;}
#header-menu-btn {margin-right: 10px;}

.header-user-menu {position: relative;}
.header-user-menu a {display: inline-flex; align-items: center;}
.header-user-menu a svg {margin-right: 5px; align-items: center;}

#langs-list, #currency-list { width: 100%; font-weight: 300;}
#langs-list .lang-list-item, #currency-list .currency-list-item {display: inline-block; color: #777; margin-bottom: 25px; font-size: 14px; width: calc(25% - 15px ); margin-right: 16px;  box-sizing: border-box; padding:10px 20px; text-decoration: none;  border-radius: var(--round); cursor: pointer;}
#langs-list .lang-list-item:nth-child(4n), #currency-list .currency-list-item:nth-child(4n) {margin-right:0px;}
.lang-list-item b {display: flex; align-items: center; gap: 5px;}
.lang-list-item img {height: 20px; width: auto; border-radius: 50%;}
#langs-list b, #currency-list b {font-weight: 300; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#langs-list .lang-list-item:hover, #currency-list .currency-list-item:hover {background: #f5f5f5;}
.lang-list-ac, .currency-list-ac  {border:1px solid #dedede;}

#user-menu, #notation-contextmenu, .popup-menu, .contextmenu {position: absolute; white-space:nowrap; z-index: 202; display: none; list-style: none; padding: 0px; margin: 0px; right: 0px; top:60px; box-shadow: 0 10px 20px -5px rgba(0,0,0,.4); border-radius: 6px; padding: 5px 0px; background: #fff;}
#user-menu a, #notation-contextmenu li, .popup-menu li, .contextmenu li {color: #454545; cursor: pointer; display: flex; text-decoration: none; align-items: center; padding: 10px 20px; margin: 0px;}
#user-menu a svg, #notation-contextmenu svg, .popup-menu li svg, .contextmenu li svg {margin-right: 10px; height: 18px; width: auto;}
#user-menu img {height: 22px; width: auto; margin-right: 8px;}
#user-menu li {margin-top: 0px !important; margin-bottom: 0px !important;}

#user-menu { overflow: scroll; max-height: calc(100dvh - 80px);}

#notation-contextmenu, .contextmenu {right: inherit !important; font-size: 14px;}
#notation-contextmenu ul, .contextmenu ul {padding: 0px; list-style: none;}
#notation-contextmenu ul li, .contextmenu ul li {cursor: pointer;}
#notation-contextmenu ul li:hover, .popup-menu li:hover, .contextmenu li:hover {background-color: #f5f5f5;}

@media only screen and (max-width: 768px) {

    #user-menu {
        position: absolute;
        white-space:nowrap;
        z-index: 20;
        display: none;
        list-style: none;
        padding: 0px;
        margin: 0px;
        right: 0px;
        top:60px;
        box-shadow: 0 10px 20px -5px rgba(0,0,0,.4);
        border-radius: 6px;
        padding: 5px 0px;
        background: #fff;
    }

    #user-menu li {
        margin-top: 0;
        margin-bottom: 0;
        
    }

    #user-menu li a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}



#text-pgn {border-radius: 6px; padding: 10px; border:1px solid #ddd;}

.mainbox {background: #fff; min-height: 550px; border-radius: 6px; justify-content: center; padding: 30px; margin-top:30px; }

.modal .close {background: #dedede; display: flex; align-items: center; justify-content: center; border:none; outline: none; border-radius: 50%; cursor: pointer; height: 30px; width: 30px;}
.modal .close svg {width: 20px; height: auto;}
.modal .close:hover {background: #bbb;}

#login-form-center {max-width: 350px; min-height: 325px; margin: 0 auto;}
#login-enter-btn, #reg-enter-btn, #restore-password-btn {height: 40px; font-size: 16px;}
#reg-view-11, #reg-view-3 {width: 400px; margin: 0 auto;}
#reg-view-11 input, #reg-view-11 button, #reg-view-3 input, #reg-view-3 button {width: 100%;}


.modal-body b {display: block; margin-bottom: 5px;}
.modal-body input[type=text], .modal-body input[type=password], .modal-body select, .modal-body textarea {padding: 10px 10px; border-radius: 4px; outline: none; border:1px solid #e6e6e6; width: 100%;}
.modal-content {padding: 10px !important;}
.modal .btn {width: 200px; padding: 10px 0px;}

#schedule-week-head {display: flex;}
.schedule-week-line {display: flex;}
.schedule-time-td {width: 50px; position: relative;}
.schedule-time-td span { display: block; position: absolute; top:-4px; background: #fff; width: 100%; right: 0px;}
.schedule-line-slots {display: flex; width: calc(100% - 50px);}
.hour-slot {width: calc( 100% / 7); height: 100px; position: relative; border-left: 1px solid #dedede;}
.schedule-line-slots {border-right: 1px solid #dedede; border-bottom: 1px solid #dedede;}
.time-slot {cursor: pointer; width: 100%; height: 25%; border-radius: 3px; position: relative;}
.time-slot:hover, .time-slot-ac {background: #00000008; }
#schedule-week .slot-data {position: absolute; padding: 3px 5px; font-size: 14px; left: 2px; z-index: 10; cursor: pointer; width: calc(100% - 4px); border-radius: 3px; background: #4982ac50;}
#schedule-week .slot-cover {position: absolute; pointer-events: none; z-index: 9; width: 100%; left: 0px; top:0px;}
#schedule-week .slot-data b {font-weight: 400;}
#schedule-week .slot-data:hover {background: #4982ac70;}
#schedule-week .slot-data.avail-slot { background: #fcbf4120; z-index: 0;}

#schedule-week .slot-data.avail-slot.slot-unsched { background: #fcbf414d;}
#schedule-week .slot-unsched-remove {border:none; display: flex; z-index: 10; background: none; border-radius: 50%; cursor: pointer; position: absolute; padding: 0px; right: 3px; }
#schedule-week .slot-unsched-remove svg {color: #00000020;}
#schedule-week .slot-unsched-remove:hover svg {color: red;}
#schedule-week .spontaneous-lesson {background: #4cabc185;}
#schedule-week .business-slot-type-1 {background: #0dcaf0;}
#schedule-week .business-slot-type-1:hover {background: #0fbee1;}
#schedule-week .business-slot-type-2 {background: #a994d7;}
#schedule-week .business-slot-type-2:hover {background: #9d88ca;}

.bg-vocation {background: url(https://chesswin.org/images/patterns/travel2.jpg); background-size: cover;}

.hour-min-btns {display: flex; justify-content: space-between; flex-wrap: wrap;}
.hour-min-btns button {border: none; width: calc(50% - 10px); background: #00000012; margin-bottom: 15px; border-radius: 6px; padding: 10px;}
.hour-min-btns button:hover, .hour-min-btn-ac {background-color: #00000080 !important; color: #fff;}


#schedule-week-head {display: flex; position: sticky; top:50px; background: #fff; z-index: 12; }
#schedule-week-head-dates {display: flex; width: calc(100% - 50px); background: #fff; z-index: 12; border-bottom: 1px solid #dedede;}
#header-week-first {width: 50px;}
.schedule-week-head-td {width: calc( 100%  / 7); padding: 10px; font-size: 24px; position: relative;}
.schedule-week-head-td span {font-size: 14px; text-transform: uppercase; color: #777; margin-left: 5px;}
.schedule-week-head-td.text-red-bright span {color: #da0000;}

#reg-view-2 div {margin-bottom: 0px !important;}
#reg-your-email {font-weight: 600; }
#reg-return, .reg-form-close {display: inline-flex; align-items: center; padding: 5px 10px; padding-right: 20px; background: #fff; border:1px solid #dedede; border-radius: 4px; cursor: pointer;}
.reg-form-close {padding-right: 10px;}
#reg-return svg {margin-right: 5px;}
#reg-return:hover, .reg-form-close:hover {background: #f9f9f9;}
#reg-view-11, #reg-view-2, #reg-view-3 {display: none;}

#reg-form-role {display: flex; align-items: center; flex-direction: column; gap: 30px; margin-bottom: 40px;}
#reg-form-role button {display: flex; transition: background-color 0.3s ease; color: #454545; height: 50px; border-radius: 6px; max-width: 300px; width: 100%; align-items: center; justify-content: center; border: 1px solid #00000060; text-transform: uppercase; }
#reg-form-role button:hover {background-color: #f5f5f5; border: 1px solid #777}
#reg-form-role-title {display: block; color: #000; text-align: center; font-size: 21px; font-weight: 400; margin-bottom: 20px;}

#personal-agreement-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
#personal-agreement-box .form-check-input {
    width: 24px !important;
    height: 24px !important;
    min-height: auto;
    opacity: 1 !important;
    position: unset;
}


.reg-form-coach-btn {background-size: 30px !important;  background: 10px center no-repeat url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23515151' class='bi bi-mortarboard-fill' viewBox='0 0 16 16'%3e%3cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917z'/%3e%3cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3e%3c/svg%3e"); }
.reg-form-student-btn {background-size: 30px !important;  background: 10px center no-repeat url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23515151' class='bi bi-backpack4-fill' viewBox='0 0 16 16'%3e%3cpath d='M8 0a2 2 0 0 0-2 2H3.5a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h4v.5a.5.5 0 0 0 1 0V7h4a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H10a2 2 0 0 0-2-2m1 2a1 1 0 0 0-2 0zm-4 9v2h6v-2h-1v.5a.5.5 0 0 1-1 0V11z'/%3e%3cpath d='M14 7.599A3 3 0 0 1 12.5 8H9.415a1.5 1.5 0 0 1-2.83 0H3.5A3 3 0 0 1 2 7.599V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5z'/%3e%3c/svg%3e"); }

#reg-form-coach-box {border-radius: 50px; min-height: 50px; padding: 5px; position: relative; background: #00000012; }
.reg-form-coach-img img {height: 45px; width: 45px; border-radius: 50%;}
.reg-form-coach-cancel {position: absolute; width: auto !important; right:10px; top: 12px; border: none; background: none; border-radius: 50%; cursor: pointer;}
.reg-form-coach-cancel svg {color: #515151;}
.reg-form-coach-cancel:hover svg {color: #000;}
.reg-form-coach-name {max-width: calc(100% - 85px);}

#reg-form-or-line {position: relative; padding: 20px 0px 15px 0px; text-align: center;}
#reg-form-or-line::before {content: ''; left: 0px; position: absolute; top:calc(50% + 2px); height: 1px; width: 100%; border-bottom: 1px dashed #757575;}
#reg-form-or-line span {display: inline-block; padding: 0px 10px; position: relative; background: #fff; z-index: 10;}

#reg-form-step-2-title {display: flex; align-items: center;}
#reg-form-step-2-title button {width: 25px; border:none; background: none; height: fit-content;}
#reg-form-step-2-role-text {width: calc(100% - 45px); text-align: center; font-size: 24px;}
#reg-form-step-2-back svg {height: 25px; width: auto;;}

.btn-violet {background: #a994d7; }
.btn-violet:hover {background: #9f83dd; }
.tab-btn {display: inline-flex; align-items: center;  transition: transform 0.5s ease; background: #b0d3ec; border-radius: 6px; box-shadow: 1px 1px 1px 0px #00000015; border:none; padding: 4px 10px; text-transform: uppercase;}
.tab-btn:hover {background: #8bb8d8;}
.tab-btn svg {margin-right: 5px;}
.tab-btn span {margin-left: 5px;}
.tab-btn b {font-weight: 400;}
.btn-warning svg {color: #624200;}
.tab-btn-zero {background: #0000001c;}

.btn-svg-right, .btn-svg-left {display: inline-flex; align-items: center;}
.btn-svg-right svg {margin-left: 0.5rem;}

.btn-svg-left svg {margin-right: 0.5rem;}

.btn-icon-right {position: relative;}
.btn-icon-right:after {content: ''; display: block; position: absolute; height: 100%; right: 10px; top:0px; width: 16px; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");}
.btn svg {margin-right: 5px;}
.text-inline-btn {color: #454545; text-decoration: none; background: inherit; display: inline-block; padding: 5px 10px; border-radius: 6px; border:1px solid #00000018;}
.text-inline-btn:hover {background: #00000015;}
.btn-clear {padding:0px; border-radius: 50%; border:0px; background: inherit; margin: 0px; display:inline-flex; height: 100%; align-items: center;}
.btn-clear svg {color:#b1b1b1;}
.btn-clear:hover svg {color:#000;}
.btn-down {background: #00000012 !important; border-radius: 6px;}

.icon-lock {color: #515151; height: 20px; width: auto; position: relative; top:-2px;}

.inline-flex-align-center {display: inline-flex; align-items: center;}
.text-btn {display: inline-block; border-bottom: 1px dotted; cursor: pointer;}
.text-btn:hover {color: var(--main-blue);}
.bord-btn {border:1px solid #00000018; text-decoration: none; color: inherit; background: inherit; padding: 2px 10px; transition: all .2s ease-in-out; border-radius: 6px; cursor: pointer;}
.bord-btn svg {margin-right: 5px}
.bord-btn:hover {background: #00000020 !important;}
.bord-btn:hover svg {color: #000;}
.bord-btn a {}
.table .bord-btn {background: #fff;}
.table {vertical-align: middle;}

.title-icon-btn {display: inline-flex; align-items: center; cursor: pointer;}
.title-icon-btn svg {margin-left: 10px; color: #999;}
.title-icon-btn:hover svg, .title-icon-btn:hover {color: #000;}

.director-menu-item-edit {height: 22px; display: none; width: 22px; cursor: pointer; align-items: center; justify-content: center; border-radius: 6px; background: #00000020;}
.director-menu-item-edit svg {height: 18px; width: auto; color: #fff;}
.director-menu-item-edit:hover {background: #00000080;}
.director-menu-item:hover .director-menu-item-edit {display: inline-flex;}

.svg-highlight {color: #b83939;}

#payment-finish-data {width: 500px; max-width: 100%; margin: 0 auto;}
.payment-delete-btn:hover svg {color: red;}

#payment-create-bill-debt-box, #payment-create-bill-not-paid-box {background: #fff; padding: 15px; border-radius: 6px; border:1px solid #00000016;}
#payment-create-bill-debt-box tr:last-child td, #payment-create-bill-not-paid-box tr:last-child td {border-bottom: none;}
#payment-create-bill-debt-box table, #payment-create-bill-not-paid-box table {margin-bottom: 0px;}
.payment-create-bill-addition-info-title {display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.payment-create-bill-additional-box table {margin-top: 10px;}
.payment-create-bill-info-num {font-style: normal;}

.icon-down-opened svg {transform: rotate(180deg);}

#tasks-menu, #puzzles-top-menu {margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: space-between; margin-bottom: 40px;}
#puzzles-top-menu {justify-content: left;}
#puzzles-top-menu li {margin-right: 2rem; display: block;  cursor: pointer;}
#tasks-menu li {display: block; }
#tasks-menu li a, #puzzles-top-menu li {text-decoration: none; display: block; text-transform: uppercase; background: #e8e8e8;  border-radius: 6px; box-shadow: 0px 0px 2px 0px #dedede; display: block; padding: 10px 30px; color: #454545;}
#tasks-menu li a:hover, #puzzles-top-menu li:hover, .tasks-menu-ac, .puzzles-top-menu-ac {background: var(--main-lightblue) !important; color: #fff !important; position: relative;}
.tasks-menu-ac:after, .puzzles-top-menu-ac:after {content:''; position: absolute; left:50%; margin-left:-13px; bottom:-19px; border: 13px solid transparent; border-top: 7px solid var(--main-lightblue); display: block; width: 0; height: 0;}

.status-icon svg {height: 25px; width: auto;}
.status-icon--2 svg {color: #515151;}
.status-icon-0 svg {color: #fb9c4c;}
.status-icon-1 svg {color: var(--main-blue);}
.status-icon-2 svg {color: #198754;}

.lesson-item {cursor: pointer;}
.lesson-item-date {display: flex; align-items: center; gap: 5px;}
.lesson-item-date span {margin-left: 5px;}
.lesson-item-date b {display: inline-block; text-transform: capitalize;}
.lessons-list-icon-coach-student svg {height: 22px; width: auto; color: #f45858;}
/* .lesson-today-hightlight .lesson-item-date, .lesson-today-hightlight .lesson-item-date span {color: #4c219b;} */
.lesson-today-hightlight .lesson-item-date i {font-style: normal; color: #278557;}

#puzzles-edit-sections-section {display: flex; justify-content: space-between;}
#puzzles-edit-sections-menu {width: 300px;}
#puzzles-edit-courses-section {width: calc(100% - 340px);}

#puzzles-edit-sections-menu ul {list-style: none; padding-left:0px;}
#puzzles-edit-sections-menu ul li {display: block; margin-bottom: 20px; transition: background 0.2s ease; cursor: pointer; position: relative; width: 100%; border-radius: 6px; border:1px solid #e6e6e6; padding: 20px;}
#puzzles-edit-sections-menu ul li:hover, .rounded-menu-ac {background: #f5f5f5;}
#puzzles-edit-sections-menu ul li:hover svg, .rounded-menu-ac svg {color: #000;}
#puzzles-edit-sections-menu ul li:hover span, .rounded-menu-ac span {color: #000;}
#puzzles-edit-sections-menu ul li .bi-chevron-right {position: absolute; right: 20px; top:calc(50% - 8px);}
#puzzles-edit-sections-menu ul li span {font-size: 18px;}
#puzzles-edit-sections-menu ul li div {font-size: 14px; color: var(--main-gray);}

#puzzles-couse-description-edit {display: flex; cursor: pointer; justify-content: space-between; background: #f9f9f9; padding: 20px; border-radius: 6px;}
#puzzles-couse-description-edit:hover {background: #f0f0f0}
#puzzles-couse-description-edit-left {width: 200px;}
#puzzles-couse-description-edit-right {width: calc(100% - 220px);}
#puzzles-couse-description-edit-img {min-height: 100px; width: 100%; background: #00000010; border-radius: 6px;}
#puzzles-couse-description-edit-img img {width: 100%; border-radius: 6px;}

#puzzles-couse-edit-left {width: 350px;}
#puzzles-couse-edit-left ul {list-style: none; margin-left: 0px; padding-left: 0px;}
#puzzles-couse-edit-left ul li {display: flex; padding:10px 20px; cursor: pointer; border-radius: 6px; background: #e6e6e6; padding: 10px 12px 10px 15px; transition: all .2s ease-in-out; margin-bottom: 15px;}
#puzzles-couse-edit-left ul li:hover {background: #dedede;}

#puzzles-items {display: flex; flex-wrap: wrap;}
.puzzle-item {display: inline-block; width: 200px;  border-radius: 4px; margin: 0px 20px 20px 0px;}
.puzzle-fen {width: 100%;}

.upload-img-box {background-color:#00000010; cursor: pointer; background-size: 50px; background-repeat: no-repeat; background-position: center; min-height: 100px; min-width: 200px; border-radius: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888888' 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");}
.upload-img-box img {border-radius: 6px;}

.rounded-img-box {width: 40px; height: 40px; background: #f5f5f5; border-radius: 50%;}
.rounded-img-box img {width: 100%; height: auto; border-radius: 50%;}

.circle-mouse {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 123, 255, 0.5); /* Цвет и прозрачность */
    width: 10px;
    height: 10px;
    pointer-events: none;
    transform: scale(1);
    animation: ripple 0.8s ease-out;
}

@keyframes ripple {
    to {transform: scale(20); opacity: 0; }
}

/*.classroom-invate-item {display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f5f5f5; padding: 1rem 0.5rem; border-radius: 6px;}*/
/*.classroom-invate-item:last-child {border-bottom: none;}*/
/*.classroom-invate-item:hover {background: #f9f9f9;}*/
/*.classroom-invate-item-img {width: 35px;}*/
/*.classroom-invate-item-img img {width: 35px; height: 35px; border-radius: 50%;}*/
/*.classroom-invate-item-img svg {height: 35px; width: auto;}*/
/*.classroom-invate-item-info {width: calc(100% - 70px); padding-left: 15px;}*/
/*.classroom-invate-item-checkbox {width: 30px;}*/
/*.classroom-invate-item-info label {display: inline-block; margin-top: 10px; background: #f5f5f5; border-radius: 6px; padding: 5px;}*/

.attendance-form-schedule .list-icons svg {height: 20px; width: auto; margin-right: 10px; color: 515151;}
.attendance-form-schedule .list-icons li {border-radius: 8px; cursor: pointer; padding: 5px 10px; background: #00000020; display: flex; align-items: center;}
.attendance-form-schedule .list-icons li:hover {background: #00000040;}
.attendance-form-schedule .list-icons li:hover svg {color: #000;}

.attendance-form-status-2 .attendance-form-curriculum-add-btn, .attendance-form-status-2 .attendance-form-curriculum-del-btn {visibility:hidden;}


#class-edit-form-homework-box select {background-color: #fff;}

.classroom-piece-symb-menu-btn svg {height: 20px; width: auto;;}
.classroom-piece-btns {gap: 15px;}
.classroom-piece-btns svg {color: #a8a8a8;}
.classroom-piece-btns aside {cursor: pointer;}
.classroom-piece-btns svg:hover {color: #000;}

#classroom-to-board-btn {display: none; justify-content: center;}
#classroom-to-board-btn button {background: #00000007; border:none; outline:none; padding: 10px 0px; border-radius: 6px; width: 220px; text-align: center; cursor: pointer;}
#classroom-to-board-btn button svg {color: #00000020;}
#classroom-to-board-btn button:hover svg {color: #000;;}

.classroom-piece-comment textarea {height: 85px; border-radius: 6px; padding: 10px; width: 100%;}
.classroom-piece-comment button {padding: 5px 10px; border-radius: 6px; border: 1px solid #dedede; background-color: #fff;}

#classroom-invite-student-list {display: flex; flex-wrap: wrap; justify-content: space-between;}
#classroom-invite-student-list .master-card {display: inline-flex; cursor:pointer; margin-bottom: 25px; font-size: 14px; width: calc(50% - 20px); border:1px solid #dedede; border-radius: 6px;}
#classroom-invite-student-list .master-card:hover {background: #f5f5f5;}

 .lesson-ava-status {position: relative;}
/*.lesson-ava-status.classroom-student-online::before, .lesson-ava-status.classroom-student-online2::before {right: -6px; top: -2px;} */

#classroom-invite-student-check-all {display: inline-flex; align-items: center; padding: 5px 10px; margin-bottom: 25px; background: #eee; border-radius: 6px; cursor: pointer;}
#classroom-invite-student-check-all input {height: inherit !important; margin-left: 5px;}
#invite-form-head-filters {display: flex; align-items: center; justify-content: space-between;}
#invite-form-head-filters .label-select {width: calc(50% - 20px);}

#win-invite-students .win-popup-content {padding: 0px;}
#win-invite-students #classroom-invite-form-head {padding: 30px 30px 10px 30px;}
#win-invite-students #classroom-invite-form-body  {padding: 0px 30px;}
#classroom-invite-form-foot {position: sticky; bottom: 0px; background: #f5f5f5; padding: 10px 30px; border-radius: 0px 0px 3px 3px;}

#classroom-invite-form-title {padding: 0px 30px; font-size: 21px; margin-top:15px; position: relative; bottom: -10px;}

#classroom-attendance-time1, #classroom-attendance-time2 {width: 100px;}

#classroom-import-tab-games-users {display: flex; gap: 15px; flex-wrap: wrap;}
#classroom-import-tab-games .master-card {cursor: pointer; width: 216px; height: 80px;}
#classroom-import-tab-games .master-card:hover {background: #f7f7f7;}
#classroom-import-tab-games .master-card-info div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.classroom-card-import-games i {font-style: normal; color: #7a7a7a;}
.classroom-card-import-games b {font-weight: 500;}
.classroom-card-import-games svg {color:#000;}

.board-best-move-box {position: relative;}
.board-best-move-buttons {position: absolute; right: 0px; gap: 5px; top:0px; display: flex; justify-content: right; }
.board-best-move-box button {border: none;  padding: 0px; margin: 0px; cursor: pointer; background-color: inherit;}

.board-best-move span {background: #f5f5f5; border-radius: 6px; padding: 0px 5px; cursor: pointer;}
.board-best-move span:hover {background-color: #dedede;}

.board-best-line {display: flex;  margin-top: 10px;  gap: 10px; padding-right: 30px;}
.board-best-line .chessnotation {padding: inherit;}
.board-best-line .board-best-score {background: #e6e6e6; border-radius: 6px; padding: 0px 5px; font-weight: 500; width: 46px; align-self: flex-start;}

.analyze-board-box {position: absolute; padding: 10px; background-color: #fff;  border-radius: 6px;}
.analyze-board {width: 200px; height: 200px;}

.analyze-board-box {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease;
    z-index: 1000;
  }
  
  .analyze-board-box.d-none {
    opacity: 0;
    visibility: hidden;
  }
  

.svg-icon-btn {display: inline-flex; height: 30px; width: 30px; justify-content: center; align-items: center; background: #00000020; border-radius: 50%; cursor: pointer;}
.svg-icon-btn svg {height:20px; width: auto;}

.ava-div img, .ava-div svg {height: 25px; width: 25px; border-radius: 50%;}
.ava-div-lg {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ava-div-lg img, .ava-div-lg svg {border-radius: 50%; height: 100px; width: 100px;}
.ava-div-md img, .ava-div-md svg, .num-ava-md {border-radius: 50%; height: 36px; width: 36px;}
.ava-div-sm, .ava-div-sm img, .ava-div-sm svg, .num-ava-sm {border-radius: 50%; height: 24px; width: 24px;}
.num-ava-md {background: #f1a765; display: inline-flex; font-size: 16px; justify-content: center; align-items: center; color: #fff;}

.student-card-btn, .text-highlighted-btn {border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; padding: 1px 5px;}
.student-card-btn svg {margin-right: 5px;}
.student-card-btn:hover, .text-highlighted-btn:hover {background: #00000015; color: #000000;}

.student-relative-item {background: #00000010; padding:20px; border-radius: 12px; position: relative;}
.student-relative-item .btn-close-circle {right: 15px; top:15px; z-index: 10;}
.student-relative-item .grip-item {right: 35px; top:15px;}

.student-autobill-remove-btn {position: absolute; right: 10px; top:10px; border: none; border-radius: 50%; cursor: pointer; background: none;}
.student-autobill-remove-btn svg {color: #515151; height: 20px; width: auto;}
.student-autobill-remove-btn:hover svg {color: #6a1a21; }

.days-text-box, .lessons-text-box {display: inline-block; background: #30835a29; padding: 1px 3px; margin: 0px 2px; border-radius: 6px;}

.lesson-item-icons {display: flex; gap: 10px;}
.lesson-item-icons svg {color: #515151; height: 20px; width: auto;}

.lesson-homework-review-btn,
.lesson-homework-legacy-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #515151;
    line-height: 1;
}
.lesson-homework-review-btn {
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}
.lesson-homework-review-cell.is-clickable {cursor: pointer;}
.lesson-homework-review-cell.is-clickable:hover .lesson-homework-review-btn {color: #1a7a3c;}
.lesson-homework-review-btn:hover {color: #1a7a3c;}
.lesson-homework-review-btn svg,
.lesson-homework-legacy-indicator svg {color: currentColor;}
.lesson-homework-legacy-indicator {opacity: .72;}
.lesson-homework-review-count {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #1a7a3c;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.task-cat, .puzzle-edit-course-item {display:inline-flex; width: calc(25% - 25px); min-width: 200px; padding-bottom: 30px; position: relative; transition: transform 0.5s ease; min-height: 200px; border:1px solid #dedede; text-decoration: none; color: #454545; margin-bottom: 30px; margin-right: 28px; align-items: center; justify-content: center; height: 160px; border-radius: 6px; cursor: pointer;}
.task-cat:hover, .puzzle-edit-course-item:hover {border:1px solid #d5d5d5; box-shadow: 1px 1px 7px 0px #b6b6b642;}
.task-cat:nth-child(4n) {margin-right: 0px;}
.task-cat div, .puzzle-edit-course-item div {text-align: center;}
.task-cat b, .puzzle-edit-course-item b {font-weight: 500;}
.task-img, .puzzle-edit-course-card-img {display: block; text-align: center; margin-bottom: 10px;}
.task-img img, .puzzle-edit-course-card-img img {height: 80px; width: auto; transition: transform 0.5s ease; border-radius: 6px;}
.task-cat:hover img {transform: scale(1.05); }
.task-cat:hover img, .puzzle-edit-course-item:hover img {transform: scale(1.05); }

.puzzle-edit-item-moves {height: 50px; font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis;}

#puzzle-edit-form-puzzle-remove-btn {position: relative; top:3px; cursor: pointer;}
#puzzle-edit-form-puzzle-remove-btn:hover {color: red;}

.task-cat-progress {position: absolute; bottom: 10px; left: 10px; width: calc(100% - 20px); background: #e4e4e4; border-radius: 6px; font-size: 12px; height: 20px;}

.info-text {display: flex; position: relative; background: #4c9ad626; border-radius: 6px; padding: 20px;}
.info-text-icon {width: 100px; display: flex; align-items: center; justify-content: center;}
.info-text-icon svg {color: #4982ac; height: 50px; width: auto;}
.info-text-text {width: calc(100% - 140px);}

.option-btns, .option-status-btns {display: flex; align-items: center; justify-content: space-between; background: #e6e6e6; border-radius: 6px; padding: 3px; gap: 4px;}
.option-btns span, .option-status-btns span {width: calc(50% - 5px); padding: 3px 3px; border-radius: 6px; cursor: pointer; text-align: center; white-space: nowrap; display: flex; overflow: hidden; text-overflow: ellipsis; background: #ededed; align-items: center; justify-content: center;}
.option-btns span:hover {color: #000; background: #00000009}
.option-btns-ac {background: #fff !important;}
.option-tab {display: none;}

#reg-new-pass {width: 300px; padding: 7px; border-radius: 4px; outline: none; border:1px solid #bbb; background: #fff;}

/* #pd-inputs {max-width: 800px;} */
.pd-inp-line {width: 100%; display: flex; justify-content: space-between;}
.pd-item {width: calc(50% - 10px); margin-bottom: 20px;}
.pd-item b {display: block; margin-bottom: 5px; font-weight: 500;}
.pd-item input, .pd-inp-line select, .pd-inp-line textarea {border:1px solid #bbb; width: 100%; border-radius: 4px; padding: 5px 10px; outline: none;}

#pd-img {border:1px solid #dedede; border-radius: 6px; padding: 10px; width: 250px; margin-bottom: 40px; min-height: 220px;}
#pd-img div img {width: 100%; border-radius: 3px;}
#pd-img div {background: #f5f5f5; border-radius: 6px; min-height: 150px; margin-bottom: 10px;}
#pd-img button {width: 100%;}

#pd-save-btn {width: 250px; max-width: 100%;}

.table thead { text-transform: uppercase;}
.table tr:hover .tab-hover-text {color: #9d0e0e;}
.tab-tr-btn tbody tr {cursor: pointer;}
.tr-btn tbody tr {cursor: pointer;}
.lider-img {height:25px; width: 25px; border:1px solid #f1f1f1; border-radius:50%;}
.lider-link-btn {text-decoration: none; }
.lider-link-btn:hover {text-decoration: underline;}
.table-hover tbody tr:hover td, .table-hover tbody tr.tab-tr-hover-effect td {background-color: #dbe1e6; --bs-table-bg-type: #dbe1e6;}


#office-guide-menu-select {background-color: #00000018; border:none;}
#guide-video-box video {max-width: 100%; border-radius: var(--round);}

.modal-line {margin-bottom: 1rem;}
.modal-line b {font-weight: 400;  margin-bottom: 0.25rem; display: block;}
.modal-line b svg {height: 18px; width: auto;}
.modal-line-text-btn {cursor: pointer; margin-left: 10px; border-bottom: 1px dotted; font-weight: 300;}
.modal-line-text-btn:hover {color: var(--link-color);  }
.modal-line select, .modal-line input, .modal-line textarea {width: 100%;}
.working-days {display: flex;}
.working-days span {display: block; margin-right: 15px; height: 40px;  line-height: 40px; width: 35px; font-size: 14px; border-radius: 6px; text-align: center;  border:1px solid #dedede; background: #f5f5f5; cursor: pointer;}
.working-days span:hover {background: #eeeeee;}
.working-days-ac {background: #4397da !important; color: #fff;}
.modal-col2, .modal-col3 {display: flex; justify-content: space-between; gap: 16px;}
.modal-col2 .modal-line {width: calc(50% - 10px);}
.modal-col3 .modal-line {width: calc(33.3% - 10px);}
.modal-col2 input, .modal-col2 select {width: 100%; min-height: 40px;}
.modal-labels label {cursor: pointer; transition: all .2s ease-in-out;  background: #fff; border:1px solid #00000016; border-radius: 6px; margin-right: 10px; padding: 5px 10px; display: inline-flex; align-items: center; white-space: nowrap;}
.modal-labels label input {margin-left: 10px;}
.modal-labels label:hover {background: #f0f0f0;}

.autocomplete {position: relative;}
.autocomplete .autocomplete-res {position: absolute; z-index: 10; max-height: 350px; overflow-y: scroll; white-space: nowrap; border-radius: 4px; display: none; left: 0px; top:50px; background: #fff; padding: 5px 0px; 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%);}
.autocomplete .autocomplete-res .autocomplete-item {display: block; cursor: pointer; transition: all .1s ease-in-out; text-decoration: none; color: #515151; padding: 7px 12px; border-bottom: 1px solid #f5f5f5;}
.autocomplete .autocomplete-res .autocomplete-item:hover {background: #f0f0f0;}
.autocomplete .autocomplete-res .autocomplete-item:last-child {border-bottom: none;}
.autocomplete-res svg {margin-left: 7px; color: #777; position: relative; top:-1px;}
.autocomplete-item {display: flex; align-items: center;}
.autocomplete-item div {margin-right: 5px;}
.autocomplete-item-val + small {color: #ababab;}
.autocomplete-nothing {padding: 7px 12px; color:#777;}
.autocomplete-item .avaimg {height: 24px !important; width: auto !important; margin-left: 5px;}
/* .autocomplete-student {width: 250px !important;} */

#videos-box {display: flex; justify-content: space-between;}
#videos-left {width: 250px; }
#videos-left a {display: block; position: relative; transition: all .2s ease-in-out; padding: 5px 30px 5px 10px;  text-decoration: none; color: #454545; border-radius: 4px;  margin-bottom: 10px; background: #f3f3f3;}
#videos-left b {display: block; right: 10px; top:5px; position: absolute; font-weight: 300;}
#videos-right {width: calc(100% - 280px);}
#videos-left a:hover, .video-cat-ac {background: #00000090 !important; color: #fff !important;}

.modal-user-ava__wrapper {display: flex; align-items: center; background: #fff; cursor: pointer; border:1px solid #dedede; border-radius: 6px; padding: 8px 15px;}
.modal-user-ava__wrapper img {border-radius: 50%; height: 50px; width: 50px;}
.modal-user-ava__wrapper span {margin-left: 18px;}

.modal-user-ava-box {display: flex; align-items: center; background: #fff; cursor: pointer; border:1px solid #dedede; border-radius: 6px; padding: 8px 15px;}
.modal-user-ava-box:hover {background: #0000000d;}
.modal-user-ava-box img {border-radius: 50%; height: 50px; width: 50px;}

#popular-videos-menu-item {display: flex !important; align-items: center;}
#popular-videos-menu-item svg {margin-right: 10px;}

.video-item {width: calc(33.3% - 20px); display: inline-block; margin: 0px 20px 30px 0px;}
.video-item-img {cursor: pointer; border-radius: 6px;}
.video-item-img:hover {box-shadow: 0px 0px 3px 1px #dedede;}
.video-item-img img {width: 100%; border-radius: 6px; border:1px solid #dedede;}
.video-item:nth-child(3n) {margin-right: 0px;}
.video-item-name {height: 70px; display: block; text-decoration: none; color: #454545; margin-top:10px; overflow: hidden;}
.video-item-name:hover {text-decoration: underline;}
.videoModal-name {font-size: 18px;}
#videoModal  frame {width: 100% !important;}

#videoModal-code {width: 100%; height: 210px;}
#videoModal-cover-img {height: 210px;  display: flex; cursor: pointer; border-radius: var(--round); justify-content: center; align-items: center; border:1px dashed #00000030;}
#videoModal-cover-img {background: #ffffff50 no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999999' 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");}
#videoModal-cover-img {background-size: 60px 60px !important;}
#videoModal-cover {width: calc(50% - 20px);}
#videoModal-cover-img img {max-width: calc(100% - 20px); max-height: calc(100% - 20px); border-radius: var(--round);}
#video-cover-img img {width: 100%;}

.video-content {width:100%; height: 500px;}
#remove-modal-video-btn {position: absolute; right: 0px; top:0px; height: 100%; display: flex; align-items: center; cursor: pointer; color: #999;}
#remove-modal-video-btn svg {height: 16px; width: auto;}
#remove-modal-video-btn:hover svg {color: red;}

#videoModal .modal-body, .video-content {
    position: relative;
    padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
    height: 0;
    overflow: hidden;
}
#videoModal .modal-body iframe, .video-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 0;
    outline-width: 0;
    border-radius: 3px;
}

.video-back, .btn-back {border:1px solid #dedede; padding:7px 12px; padding-right: 20px; border-radius: 6px; text-decoration: none; color: #454545; display: inline-flex; align-items: center;}
.video-back svg, .btn-back svg {margin-right: 5px;}
.video-back:hover, .btn-back:hover {background: #00000010;}

#learning-title, #contact-title, .highlight-title{font-size: 21px;}
.highlight-title svg {margin-right: 10px; height: 25px; width: auto; color: #656565;}
#learning-box, #contact-box, .highlight-box {background: #f5f5f5; box-shadow: 0px 0px 4px 1px #e3e3e3; padding: 20px; border-radius: 6px;}
.small-back-form input, .small-back-form textarea {width: 100%; padding: 8px 10px; border:none; border-radius: 4px; background: #fff; outline: none;}
.small-back-form button {width: 100%; padding: 8px 0px; text-transform: uppercase; display: flex; justify-content: center; align-items: center;}
.small-back-form button svg {margin-left: 10px; height: 20px; width: auto;}
.small-back-form b {display: block; text-transform: uppercase; font-size: 14px; margin-bottom: 5px; font-weight: 500;}
.contact-office {margin-top:20px;}

.task-section-title {display: flex; align-items: center;}
.task-section-title span {display: block; overflow: hidden; padding: 10px; width: 90px; height: 90px;  margin-right: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.task-section-title img {width: 100%;   height: 100%;   object-fit: cover; border-radius: 50%;}
.task-section-title h1 {margin: 0px; padding: 0px;}

#section-liders a {display: block; padding: 8px 0px; font-size: 16px; border-bottom: 1px solid #dedede; position: relative; padding-right: 15px;  text-decoration: none;}
#section-liders a:last-child {border-bottom: none;}
#section-liders b {display: block; position: absolute; color: #454545; right: 0px; top:11px;}

#section-levels {display: flex; margin-top:30px; border-radius: 6px; justify-content: space-between;}
.level-content {width: 33.3%;}
.level-title {background: #f1f1f1; font-weight: 500; color: #000; position: relative; display: inline-block; width: 200px; margin-bottom: 20px; text-align: center; padding: 8px 15px; border-radius: 6px;}
.level-title:after {content:''; position: absolute; left:50%; margin-left:-13px; bottom:-19px; border: 13px solid transparent; border-top: 7px solid #f1f1f1; display: block; width: 0; height: 0;}


.level-content a, .puzzle-edit-theme-menu-item {display: block; cursor: pointer; max-width: 300px; color: #454545; margin-bottom: 20px; text-decoration: none;}
.level-content a:hover, #theme-menu a:hover, .puzzle-edit-theme-menu-item:hover {color: #0d6efd;}
/*.level-content b {color:#000;}*/
.level-content a span, #theme-menu a span, .puzzle-edit-theme-menu-item span {display: inline-block; font-size: 13px; border-radius: 4px; margin-left: 3px; font-weight: 500; padding: 1px 5px; background: #00000010;}

.section-bottom span {font-size: 12px;}
#section-exam-btn svg {color: #454545; margin-right: 10px;}
.section-bottom {background: #f5f5f5; padding: 20px; border-radius: 6px;}
.section-bottom h3 {font-size: 18px; font-family: inherit;}

.theme-success-btn {background: #f5f5f5; display: flex; align-items: center; justify-content: center; border-radius: 6px; width: 100%; padding: 20px; border:none; text-transform: uppercase;}
.theme-success-ok-btn {background: #f5f5f5; cursor: default !important; display: flex; align-items: center; justify-content: center; border-radius: 6px; width: 100%; padding: 20px;  border:none; text-transform: uppercase;}
.theme-success-ok-btn svg, .theme-success-btn svg {color: #278557; margin-left: 5px;}
.theme-success-btn:hover {background-color: #f0d9b5;}
.theme-success-btn:active {background-color: #b58863;}

.progress-scale {height: 38px; display: flex; align-items: center; border-radius: 6px; position: relative; background: #7d7d7d;}

#theme-menu a {display: inline-block; text-decoration: none; color: #454545;}
#theme-menu div {margin-bottom: 10px; }
.theme-menu-level  {font-style: 16px; display: inline-block; font-weight: 600; margin-bottom: 15px !important;  background: #f1f1f1; color: #000; padding: 5px 10px; border-radius: 6px;}
.theme-menu-title {margin-bottom: 1.5rem; margin-top: 1.5rem; font-size: 16px; display: block;}

.theme-menu-ok {position: relative; top:-2px; display: inline-block;}
#theme-next-prev-btns {display: flex; justify-content: center;}
#theme-next-prev-btns button {border:none; color: #7f7f7f; display: inline-flex; align-items: center; height: 40px; width: 250px; justify-content: center; outline: none; background: inherit; border-radius: 6px;}
#theme-next-prev-btns button:hover {color: var(--link-color);}
#theme-next-prev-btns button:active {border: 1px solid #dedede; }

#table-installations {max-width: 100%; width: 700px;}
#table-installations select, #table-installations input {background-color: #fff; border:none; min-width: 145px; cursor: pointer;}
#table-installations select:hover, #table-installations input:hover {box-shadow: 0px 0px 3px 2px #dedede;}
#table-installations aside {display: flex; justify-content: space-between; align-items: center; padding: 20px; margin-bottom: 20px; background: #00000015; border-radius: 6px;}


#lesson-coach {}
#lesson-coach-img {width: 60px;}
#lesson-coach-img img {border-radius: 50%; height: 60px; width: auto;}
#lesson-coach-name {width: calc(100% - 60px); margin-left: 10px;}

#lesson-invited-students {flex-wrap: nowrap;}

.board-settings-list .classroom-settings-analyze-separator {
    padding: 13px 10px 6px;
    color: #6d747b;
    font-size: 12px;
    border-top: 1px solid #eee;
}
.board-settings-list .classroom-settings-analyze-separator span {
    display: flex;
    align-items: center;
}
.board-settings-list .classroom-settings-analyze-separator svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
.board-settings-list .classroom-settings-analyze-separator b {
    font-weight: 600;
}
.board-settings-list .classroom-settings-analyze-item label {
    align-items: center;
}
.board-settings-list .classroom-settings-analyze-item .list-left {
    width: calc(100% - 150px);
}
.board-settings-list .classroom-settings-analyze-item .list-right {
    width: 150px;
    align-items: center;
    gap: 6px;
}
.board-settings-list .classroom-settings-analyze-item input {
    top: 0;
}
.board-settings-list .classroom-settings-analyze-item input[type="range"] {
    width: 92px;
    height: 18px;
}
.board-settings-list .classroom-settings-analyze-item input[type="number"] {
    width: 58px;
    height: 24px;
    padding: 2px 5px;
    border: 1px solid #d7dde3;
    border-radius: 4px;
    font-size: 12px;
}
.board-settings-list .classroom-settings-analyze-item .settings-analyze-search-value,
.board-settings-list .classroom-settings-analyze-item .settings-analyze-multipv-value,
.board-settings-list .classroom-settings-analyze-item .settings-analyze-threads-value,
.board-settings-list .classroom-settings-analyze-item .settings-analyze-hash-value {
    min-width: 42px;
    color: #6d747b;
    font-size: 11px;
    white-space: nowrap;
}


#tele-wrap {width: 100%; height: calc(100vh - 70px); position: sticky; top:0px;}
.classroom-screen-video #mainbox {display: none;}
.classroom-screen-video #tele-box {width: 100% !important;}
.classroom-screen-video #classroom-left-box {width: 100% !important;}
.classroom-screen-content #classroom-left-box {display: none !important;}
.classroom-screen-content #tele-box {display: none;}
.classroom-screen-content {display: block !important; padding: 0px !important;}
.classroom-screen-content .mainbox{width: 100% !important;}

.classroom-students-box-btn {border-radius: var(--round); width: 80px; cursor: pointer; text-align: center;  margin-right: 5px; padding: 8px 0px;}
.classroom-students-box-btn div:first-child {width:60px; background: #fff; height: 60px; border-radius: 50%; border:1px solid #dedede; display: inline-flex; justify-content: center; align-items: center; }
.classroom-students-box-btn span {margin-top:5px; font-size: 14px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center;}
.classroom-students-box-btn:hover  {background: #f7f7f7;}

#class-top-btns.user-status-2 #class-participant-coach {display: none;}

.classroom-finished-screen {position: relative;}
.classroom-finished-screen .canvas-container {display: none;}

#class-finished-history-boards .quill-chessboard-box {cursor: pointer;}
#class-finished-history-boards .quill-chessboard-box cg-container {border-radius: 6px;}
#class-finished-history-boards .quill-chessboard-box:hover cg-container, .chessboard-box-ac cg-container {box-shadow: 0px 0px 5px 1px #777;}

#import-excel-btns select, #import-excel-btns input { width: 115px;}

.import-excel-btns__wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#classroom-back-btn {}
#classroom-lesson-theme, #classroom-lesson-list {width:100%; height: 50px; max-width:500px; padding: 5px 10px; border:1px solid #e6e6e6; border-radius: 6px;}
#classroom-message-edit {padding: 7px; display: flex; justify-content: space-between; align-items: center; border-radius:6px; background: #f3f3f3;}
#classroom-message-edit input {width: calc(100% - 140px); outline: none; border:none; border-radius: 6px; padding: 5px; height: 35px;}
#classroom-message-edit span {width: 120px; position: relative; text-align: center; display: inline-block; padding: 5px 10px; background: #fff; border-radius: 6px; cursor: pointer;}
#classroom-message-edit span:hover {background: #00000028;}

#classroom-lesson-theme-text {border-radius: 6px;}
#classroom-message-text {padding:4px 10px; background: #1987542e; border-radius: 6px; text-align: center;}

.list-of-faces img {height: 60px; width: 60px; border-radius: 50%;}
.list-of-faces b {display: block; font-weight: 400; font-size: 14px; margin-top:5px;}
.list-of-faces .grid-item {display: inline-block; cursor: pointer; border-radius: 6px; padding: 8px 4px; margin-bottom: 10px; text-align: center;}
.list-of-faces .grid-item:hover {background: #f5f5f5;}

.context-menu {position: absolute; z-index: 103; display: none; left: 0px; top:50px; min-width: 280px; background: #fff; border-radius: 4px; padding: 5px 0px;   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%); ;}
.context-menu li {list-style-type:none; cursor: pointer; padding: 10px;}
.context-menu li:hover {background: #f5f5f5;}
.context-menu svg {color: #454545 !important;}

.classroom-student-item, .classroom-coach-item {display: inline-block; position: relative; cursor: pointer; border-radius: 6px; width: 80px; padding: 8px 0px; text-align: center;}
.classroom-student-item:hover, .classroom-coach-item:hover {background: #f5f5f5;}
.classroom-coach-item-name {color: var(--main-blue); text-transform: uppercase;}
.classroom-student-item-lock {position: absolute; right: 2px; top: 53px;}

.classroom-student-online:before {content: ''; position: absolute; right:-3px; top:-3px; height: 12px; width: 12px; border: 1px solid #dcdcdc; background: #ffc107; border-radius: 50%;}
.classroom-student-online2:before {content: ''; position: absolute; right:-3px; top:-3px; height: 12px; width: 12px; border: 1px solid #dcdcdc; background: #98ce44; border-radius: 50%;}
.classroom-student-disabled-camera:before {content: ''; position: absolute; right:-3px; top:-3px;height: 12px; width: 12px; border: 1px solid #dcdcdc; background: #F16D7A; border-radius: 50%;}
.classroom-student-online-on-site:before {content: ''; position: absolute; right:-3px; top:-3px;height: 12px; width: 12px; border: 1px solid #dcdcdc; background: var( --online-site-color); border-radius: 50%;}

.classroom-student-hand {position: relative; border-radius: 50%;}
.classroom-student-hand:before {content: ''; left: 0px; top:0px; position: absolute; border-radius: 50%; width: 100%; height: 100%; background: #00000040;}
.classroom-student-hand:after {content: ''; position: absolute; left:calc(50% - 12px); background-size: 30px 30px; top:18px; height: 30px; width: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='%23ffffff' class='bi bi-clock-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z'/%3E%3C/svg%3E") no-repeat;}

.notification-box {padding: 10px 20px; position: relative; background: #1971ac4d; border-radius: 12px; font-size: 21px;}
.notification-box-close {position: absolute; right: 5px; top:5px; cursor: pointer; border-radius: 50%; display: flex; justify-content: center; align-items: center; height: 20px; width: 20px; background: #00000020; }
.notification-box-close:hover {background: #00000040;}

.notification-box-close svg {
    margin: 0;
}

.notification-box:hover {
    cursor: pointer;
    filter: brightness(1.1);
    transition: filter 0.2s ease;
}

.notification-box.orange {
    background-color: var(--color-primary-2);
    color: white;
}

#classroom-play-lesson-btn svg {color: #42895a;}

#classroom-new-gamen-menu li {display: flex; align-items: center; padding: 10px 20px;}
#classroom-new-gamen-menu svg {margin-right:10px; height: 16px; width: auto;}

#classroom-choose-curriculum-boards {display: flex; flex-wrap: wrap; justify-content: space-between; }
#classroom-choose-curriculum-boards .curriculum-board-item {width: calc(50% - 10px); border-radius: var(--round); margin-bottom: 30px;}
#classroom-choose-curriculum-boards .curriculum-board-title {height: 60px; text-align: center;}
#classroom-choose-curriculum-boards .make-board { cursor:pointer; width: 100%; border-radius: var(--round);}
#classroom-choose-curriculum-boards .make-board [class^="board-"] {border-radius: 3px; overflow: hidden;}
#classroom-choose-curriculum-boards .curriculum-board-item:hover .quill-chessboard-title {color: var(--main-blue);}
.classroom-choose-curriculum-board-ac .quill-chessboard-title {color: var(--main-lightblue);}
#classroom-choose-curriculum-boards .quill-chessboard {cursor:pointer;}
#classroom-choose-curriculum-boards .quill-chessboard-title {cursor:pointer; height: 30px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#classroom-choose-from-upload-res {display: flex; flex-wrap: wrap;}
#classroom-choose-from-upload-res .quill-chessboard-box {margin-right: 10px; }
#classroom-choose-from-upload-res .quill-chessboard-box:nth-child(2n) {margin-right: 0px;}
#classroom-choose-from-upload-res .quill-chessboard-title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.bg-chess-pattern {background: url(https://chesswin.org/images/patterns/chess_patters_1_300.jpg);}
#board-history .bg-chess-pattern {opacity: 0.3;}

#classroom-choose-from-upload-res .quill-chessboard, #classroom-choose-from-lichess-border .quill-chessboard {cursor: pointer; }

.curriculum-list-btns {list-style: none; padding: 0px;}
.curriculum-list-btns li {display: block; transition: background-color 0.2s ease; padding: 10px 20px; border-radius: var(--round); background: #00000012; cursor:pointer; margin-bottom: 20px;}
.curriculum-list-btns li:hover {background: #00000025; color: #000;}

.curriculum-list-item, .curriculum-theme-item {display: flex !important; justify-content: space-between;}
.curriculum-list-item div, .curriculum-theme-item div {width: calc(100% - 30px);}
.curriculum-list-item span, .curriculum-theme-item span {width: 25px; text-align: right; color: #8e8e8e;}

.classroom-colums-btns button {padding: 5px 10px !important; width: 100%; position: relative; display: flex; align-items: center;}
.classroom-colums-btns button span {white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis;}
.classroom-colums-btns button svg {height: 16px; width:16px; margin-right: 5px;}
.classroom-colums-btns button div {display: flex; align-items: center; margin-right: 5px;}

#classroom-settings-table tbody svg {color: #454545;}
#classroom-settings-table .svg-icon-btn:hover {background-color: #00000050;}
#classroom-settings-table .svg-icon-btn:hover svg {color: #fff;}
#classroom-settings-table thead svg {height: 24px; width: auto; cursor: pointer;}
#classroom-settings-table thead svg:hover {color:var(--main-blue);}

.settings-box-load div {display: none;}
.flash-red {color: red;}


.settings-guide-item {display: block; margin-bottom: 15px;  border-radius: 6px; display: flex; align-items: center; }
.settings-guide-item span {width: 20px; height: 100%; cursor: pointer; display: flex; align-items: center;}
.settings-guide-item input {width: calc(100% - 20px); height: 100%; padding: 10px 20px; display: flex; border:none; background: none;}

.classroom-rules-status span {cursor:default !important;}

#classroom-top-btns {display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; }
#classroom-top-btns .classroom-top-btn { display: inline-flex;}

@media screen and (max-width: 1280px) {
    #classroom-rewards-btn,
    #classroom-students-poll-btn,
    #classroom-finish-lesson-btn,
    #classroom-students-invite-btn,
    #classroom-students-sender-btn {
        display: none !important;
    }
}

#class-top-btns {
    display: flex;
    align-items: center;
    gap: var(--btn-gap, 20px); /* по умолчанию 20 */
}

@media screen and (min-width: 1024px) {
    #class-top-btns {
        margin-right: 1rem;
    }
}

/* Кнопка "+N" */
.classroom-more-students-btn {
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px !important;
}

.classroom-more-students-btn:hover {
    background: #e4e6eb;
}

#lesson-invited-students {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}
@media screen and (min-width: 1280px) {
    #lesson-invited-students {
        margin-left: 12px;
    }
    #lesson-invited-students button:not(:first-child) {
        margin-left: -12px;
    }
}

.classroom-students-popup {
    position: absolute;
    top: 100%; 
    right: 0; 
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    z-index: 1000;
    /* width: max-content; */
    max-width: 440px;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    border: 1px solid #e1e1e1;
}

.classroom-students-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-136px);
}

.classroom-students-popup .classroom-student-item {
    display: flex !important;
    margin: 0;
}

#classroom-top-btns-wrap {max-width: 2000px; margin: 0 auto;}
.container-classroom {margin: 0 auto;}

/* @media screen and (min-width: 1680px) {

    .container-classroom #mainbox {width: calc(100% - 700px);}

} */

.classroom-top-btn {display: flex; list-style: none; border:1px solid #dedede; border-radius: 12px; padding: 0px; margin: 0px;}
.classroom-top-btn li:first-child {border-radius: 12px 0px 0px 12px;}
.classroom-top-btn li:last-child {border-radius: 0px 12px 12px  0px ;}
.classroom-top-btn li:hover  {background: #f5f5f5;}
.classroom-top-btn li {
    padding: 10px var(--btn-li-px, 15px);
    cursor: pointer;
    background: #fff;
}
.classroom-top-btn li svg {height: 20px; width: auto; color: #999;}
.classroom-top-btn li:hover svg {color: #000;}
.classroom-top-btn li i {display: flex; align-items: center;}

.classroom-top-btn .is-homework-done svg {color: green;}
.classroom-top-btn li:hover .is-homework-done svg {color: green;;}
.classroom-option-btn-ac .is-homework-done svg {color: green !important;} 

.classroom-top-btn button {border:none;}
.classroom-screen-btn-ac, .classroom-option-btn-ac {background: #10162224 !important;}
.classroom-screen-btn-ac svg, .classroom-option-btn-ac svg {color: #000 !important;}
#classroom-top-btns button b {display: flex; background: #cecece; font-weight: 400; justify-content: center; align-items: center; position: absolute; top: -3px; right: -3px; height: 18px; width: 18px; border-radius: 50%;}
#classroom-top-btns button.btn-tag-ok b {background-color: #cfd17b;}

#classroom-scroll-board-btn {padding:0px 20px; border:1px solid #dedede; border-radius: 6px; background: #fff; height: 46px; display: inline-flex; align-items: center;}

#classroom-top-btns-section, #classroom-chat {border: 1px solid #c0c1c2;}


#classroom-title {display: flex; align-items: center;}
#classroom-title .text-gray {display: inline-block; margin-left: 10px; }
#classroom-title b {font-weight: 400; display: inline-block; background: #00000015; border-radius: 6px; padding: 1px 6px; margin-right: 10px;}

.tabs-lines {list-style: none; display: flex; padding: 0px; margin-bottom: 20px;}
.tabs-lines li {min-width: 80px; padding: 0px 20px 5px 20px; text-align: center; margin-right: 20px; border-bottom: 1px solid #e7e7e7; cursor: pointer; color: #999;}
.tabs-lines .tab-active, .tabs-lines li:hover {border-bottom: 1px solid #222; color: #000;}
/*.tabs-lines li:hover {color: #454545; border-bottom: 1px solid #00000050;}*/

.container-classroom {display: flex; }
.container-classroom .mainbox {position: relative; margin-top: 0px;  }
.container-classroom #tele-box {background: #b2b2b2; }

#classroom-theory {position: relative; left: -30px; min-height: calc(100dvh - 170px); width: calc(100% + 60px); padding: 0px 30px 10px 30px; outline: none;}
#classroom-theory:focus { outline: none; }
#classroom-theory h1, #classroom-theory h2, #classroom-theory h3, #classroom-theory h4, #classroom-theory h5 {font-family: inherit;}

#classroom-drawing-buttons {position: relative; display: flex; align-items: center; padding: 10px; z-index: 101; position: sticky; top: -3px; background: #ebebeb; border-radius: var(--round); }
#classroom-drawing-buttons .btn-icon-left svg {margin-right: 0px;}
#classroom-drawing-buttons button {background: #fff; padding: 5px 10px; height: 40px; margin-right: 10px;}
#classroom-drawing-buttons button:last-child {margin-right: 0px;}
#classroom-drawing-buttons svg {color: #888;}
#classroom-drawing-buttons .button-svg-ac {background: #1971ac1f !important;}
/* #classroom-drawing-buttons button:hover svg, .button-svg-ac svg {color: #000 !important;} */
.container-classroom #classroom-drawing-buttons .button-svg-down {background: #1971ac60 !important; }

#classroom-right {width: 315px;}

.drawing-color-icon {width: 16px; height: 16px; border-radius: 50%;}

#classroom-drawing-colors-menu {position: absolute; top:55px;}

#classroom-theory .theory-point-scroll-hightlight {background: #0a58ca15 !important;}

#tele-box {width: 100%; background: #fff; height: calc(100vh - 70px); }
#tele-box iframe { display: block; width: 100%;}
/* #tele-box iframe { display: block; width: 100%; height: calc(100vh - 70px) !important;} */

/* #tele-wrap {
    position: relative;
} */

.video-instructions-btn {
    /* position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100; */
    padding: 20px 0;
    width: 100%;
    margin-bottom: 16px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 21px;
    position: relative;
}

.video-instructions-btn:hover {
    text-decoration-line: underline;       /* включаем подчеркивание */
    text-decoration-style: dotted;
    opacity: 0.8;
}

#classroom-left-box {max-width: 100%;}

#classroom-left-box.video-bottom #tele-box {height: calc(50vh - 30px) !important;}
/* #classroom-left-box.video-bottom #tele-box iframe {height: 100% !important;} */
#classroom-left-box.video-bottom .chatbox {height: calc(50vh - 70px) !important; margin-left: 3px !important; margin-top:20px !important; width: calc(100% - 3px) !important;}

.board-piece-move-tile {border:1px solid #dedede; width: 170px; border-radius: var(--round); padding: 5px; display: flex; align-items: center;}
.board-piece-move-user {display: flex; align-items: center; margin-right: 15px; max-width: 100px;}
.board-piece-move-user b {font-weight: 400; display: inline-block; margin-left: 10px;}
.board-piece-move-icon img {height: 25px; width: auto;}

#board-piece-current-move-user-name:empty {border-radius: 6px; height: 15px; background: #00000015; width: 50px;}
#board-piece-current-move:empty {border-radius: 6px; height: 15px; background: #00000015; width: 50px;}

#board-piece-move-take-ava {}

#classroom-cancel-move {border-radius: var(--round); background: #fff; border:1px solid #dedede; padding: 5px 10px; display: flex; align-items: center;}
#classroom-cancel-move div {display: flex; align-items: center; justify-content: center; border-radius: 50%; }
#classroom-cancel-move:hover {background: #f5f5f5;}

#pgnv-box {border: 1px solid #dedede;  border-radius: 6px; padding: 10px;;}
#pgnview {width: calc(100% ) !important;  overflow-y: scroll; height: 300px;;}
#pgnviewMoves {max-height: 350px; height: auto; scroll-y: scroll; padding-right: 10px;}
.outerBoard, #pgnviewButton, #pgnv-fen {position: fixed; top: -999px; left:-999px;}
#pgnv-btns {display: flex; justify-content: flex-end; gap: 10px;}
#pgnv-btns span {display: inline-block; cursor: pointer;}
#pgnv-btns span:hover svg {color: #000;}

.pgnv-hide-visible {background-color: #00000008 !important;}
.pgnv-hide-visible svg {color: var(--main-lightblue);}

#board-piece-move-buttons {width: 100px; display: flex; justify-content: space-between;}
#board-piece-move-buttons button {background: #f0f0f0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; cursor: pointer; width: 35px; height: 35px;}

.chatbox {min-height: 150px; border-radius: var(--round); position: relative;}
.chatbox-sending {position: absolute; height: 50px; bottom:0px; left:0px; width: 100%; padding: 5px;}
.chatbox-text {width: calc(100% - 0px); position: absolute; bottom:0px; left: 0px; overflow: hidden; line-height: 1.3; padding: 10px 105px 10px 15px; display:block; resize: none; border: none; border-top:1px solid #dedede; border-radius: 0px 0px 6px 6px; height: 50px;}
.chatbox-send {border:none; position: absolute; background-color: #fff; right:15px; top:12px; cursor: pointer; padding: 0px; margin: 0px; height: 24px; width: 24px; background-size: contain; 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='%23565656' d='M16,464,496,256,16,48V208l320,48L16,304Z'/%3e%3c/svg%3e");}
.chatbox-board-send {border:none; position: absolute; background-color: #fff; right:48px; top:12px; cursor: pointer; padding: 0px; margin: 0px; height: 24px; width: 24px; background-size: contain; background-size: 20px; background-position: center; background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path fill="%23565656" 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"></path></svg>');}
.chatbox-photo-send {border:none; position: absolute; background-color: #fff; right:80px; top:12px; cursor: pointer; padding: 0px; margin: 0px; height: 24px; width: 24px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%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%3C/path%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/path%3E%3C/svg%3E");}


.chatbox-messages {padding: 15px; height: calc(100% - 50px);}
.chatbox-coach .chatbox-messages {height: calc(100% - 120px);}

.chat-board {width: 140px; height: 140px; max-width: 100%; border-radius: 6px; cursor: pointer;}

.chatbox-send:hover {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='%23222222' d='M16,464,496,256,16,48V208l320,48L16,304Z'/%3e%3c/svg%3e");}
.chatbox-board-send:hover {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path fill="%23222222" 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"></path></svg>');}

@supports (scrollbar-color: auto) {
    .chatbox-messages {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
    }
}

.chatbox-users {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 6px 6px 0px 0px;
    height: 60px;
    padding: 10px 0px 10px 20px;
    background: #fff;
    border-bottom:1px solid #dedede;
    /* Настройка для Firefox */
    scrollbar-width: thin;          /* Делает скролл тонким */
    scrollbar-color: #d1d1d1 transparent; /* Цвет ползунка и трека */
}

.chatbox-users::-webkit-scrollbar {
    height: 4px; /* Высота горизонтального скролла (делаем тонким) */
}
.chatbox-users::-webkit-scrollbar-track {
    background: transparent; /* Делаем фон прозрачным, чтобы не загромождать интерфейс */
    margin: 0 20px;         /* Отступы, чтобы полоса не прилипала к краям */
}

/* 3. Ползунок (то, что мы тащим мышкой) */
.chatbox-users::-webkit-scrollbar-thumb {
    background-color: #d1d1d1; /* Светло-серый цвет */
    border-radius: 10px;       /* Полностью круглые края */
    transition: background 0.3s;
}
/* 4. Ползунок при наведении (hover) */
.chatbox-users::-webkit-scrollbar-thumb:hover {
    background-color: #b5b5b5; /* Чуть темнее при наведении */
}
.chatbox-users::-webkit-scrollbar-thumb {
    background-color: transparent;
}
.chatbox-users:hover::-webkit-scrollbar-thumb {
    background-color: #d1d1d1;
}
.chat-user {width: 40px; flex-shrink:0; cursor: pointer; border-radius: 50%; border:2px solid #F7F7F7; height: 40px; margin-right: 10px;}
.chat-user img {width: 100%; height: 100%; border-radius: 50%;}
.chat-user-all {display: inline-flex; justify-content: center; align-items: center; background: #fb9c4c; color: #fff;}
.chat-user-ac, .chat-user:hover {border-color: #00000008; box-shadow: 0px 0px 6px 2px #b5b5b5;}

.chat-mes .chat-mes-content {display: inline-block; padding: 5px 10px; max-width: 80%; border-radius: var(--round); margin-bottom: 5px;    word-wrap: break-word;  overflow-wrap: break-word;   word-break: break-all;  }

.chatbox-coach .chat-mes-role-coach, .chat-mes-role-1, .chatbox-student .chat-mes-role-student, .chat-mes-role-0 {text-align: right;}
.chatbox-coach .chat-mes-role-coach div, .chatbox-coach .chat-mes-role-1 div, .chatbox-student .chat-mes-role-student div, .chatbox-student .chat-mes-role-0 div { background: #f5f5f5;}

.chatbox-student .chat-mes-role-coach, .chatbox-student .chat-mes-role-1, .chatbox-coach .chat-mes-role-student, .chatbox-coach .chat-mes-role-0 {text-align: left;}
.chatbox-student .chat-mes-role-coach div, .chatbox-student .chat-mes-role-1 div, .chatbox-coach .chat-mes-role-student div, .chatbox-coach .chat-mes-role-0 div { background: #1971ac38;}

.chatbox-coach .chatbox-messages {overflow-y: scroll; }
.chatbox-student .chatbox-messages {overflow-y: scroll;  }
.chat-ava {width: 40px; height: 40px; border-radius: 50%;}
.chat-ava img {width: 100%; height: 100%; border-radius: 50%;}
.chat-mes-to-all .chat-mes-content {background: #98ce4457 !important;}

.chat-mes-icon {display: flex; margin-bottom: 15px; justify-content: space-between;}
.chatbox-mes-right-content {width: calc(100% - 50px); line-height: 1.3;}
.chatbox-mes-right-content i {font-style: normal; }
.chatbox-mes-right-content b {font-weight: 400; display: block; color: var(--main-blue)}
.chatbox-mes-right-content span {display: block; word-wrap: break-word;  overflow-wrap: break-word;}

.chatbox-drag-btn {background: #00000030; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 0px 4px; width: 20px; height: 18px; border-radius: 6px; border:none; outline: none; cursor: pointer; position: absolute; top: -20px; right: 25px;}
.chatbox-menu-btn {background: #00000030; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 0px 4px; width: 20px; height: 18px; border-radius: 6px; border:none; outline: none; cursor: pointer; position: absolute; top: -20px; right: 0px;}
.chatbox-drag-btn svg, .chatbox-menu-btn svg {color: #fff;}
.chatbox-drag-btn:hover, .chatbox-menu-btn:hover {background: #00000020;}

.chatbox-menu {position: absolute; top:0px; right:0px; width: 200px; background: #fff; box-shadow: 0px 0px 6px 2px #dedede; border-radius: var(--round); margin: 0px; padding: 10px 0px; list-style: none;}
.chatbox-menu li {display: block; padding: 5px 10px; cursor: pointer;}
.chatbox-menu li:hover {background: #00000016;}

#classroom-chat-top #classroom-chat {margin-left:25px;}

#classroom-chat-btn svg {color: #000;}
#classroom-chat-btn b {background-color: rgb(248, 174, 26) !important; color: #fff; }
#classroom-chat-btn b:empty {display: none;}
#classroom-chat-btn.chat-icon-ac svg {color: #000;}

.classroom-poll-tr {}
.classroom-poll-ava {width: 50px;}
#classroom-poll-modal thead label {background: #aecbe7;}

.poll-correct-tag {display: inline-block; background: #98ce4494; border-radius: var(--round); padding: 2px 10px;}
.poll-incorrect-tag {display: inline-block; background: #ce444494; border-radius: var(--round); padding: 2px 10px;}

#classroom-chat .classroom-poll-process {box-shadow: 0px 0px 4px 0px #4687ee;}


#drawing-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; user-select: auto;}
.canvas-container {position: absolute !important; top: 0 !important; left: 0 !important; z-index: 100; max-width: 100%;}
.upper-canvas {max-width: 100%;}

.table-rounded {border-collapse: separate; border-spacing: 0; border-radius: var(--round); overflow: hidden;  border: 1px solid #ccc;}
.table-rounded tbody tr:last-child td { border-bottom: 1px solid #ccc;}


.fen-items {display: flex; flex-wrap: wrap; justify-content: space-between;}
.fen-item { width: 200px; cursor: pointer; margin: 10px 0px 0px 0px; padding: 10px; border-radius: 6px;}
.fen-item-board {background: #f5f5f5; border-radius: 4px;}
.fenn-item-name {height:40px; margin-top:10px;}
.fen-item:hover {background: #f5f5f5;}

.fen-item-board div[class^="board-"] {border-radius: 3px; border: 2px solid #61564e;}

/*.grid-container { display: flex; flex-wrap: wrap; justify-content: flex-start;}*/
/*.grid-item { flex: 1 1 calc(33.333% - 20px); display: inline-flex;}*/

.grid-container { display: inline-block; }
.grid-item { width: calc(33.333% - 3px); }




h1, h2, h3 {font-family: EtoMoiFont, cursive; font-size: 32px;}
h3 {font-size: 22px;}

#main-top {background-size: cover; margin-top:25px; position: relative; max-height: 350px; height: 350px; border-radius: 20px; }
#main-top:before {content: ''; display: block; left: 0px; top:0px; background: #00000020; backdrop-filter:blur(2px); position: absolute; border-radius: 20px; width: 100%; height: 100%; }
#main-top h1 {text-align: center; font-size: 72px; text-shadow:0px 0px 10px #000000;  line-height: 1.5; position: relative; z-index: 10; top:60px; color: #fff; font-weight: 400; }

#benefits, #task-types {display: flex; flex-wrap: wrap; justify-content: space-between;}
.benefit {border:1px solid #dedede; margin-bottom: 30px;}
.benefit {width:calc(25% - 20px); background: #fff; border-radius: 6px; padding: 30px 20px; text-align: center;}
.benefit svg {width: auto; height: 40px; color: #f5a858 }
.benefit b {display: block; margin:10px 0px 5px 0px;}
.benefit p {display: block; color: #454545; margin-bottom: 0px;}

.bg-lightblue {background-color: #f0f4f8;}
.bg-dimblue {background-color: #59788e38;}
.bg-white {background-color: #fff;}
.bg-gray {background: #00000015;}

.red-label {display: inline-flex; align-items: center; gap: 10px; padding: 3px 10px; background: #ad000f9e; color: #fff; border-radius: 6px; font-weight: 400;}
.green-label {display: inline-flex; align-items: center; gap: 10px; padding: 3px 10px; background: #1a8754; color: #fff; border-radius: 6px; font-weight: 400;}
.gray-label {display: inline-flex; align-items: center; gap: 10px; padding: 3px 10px; background: #00000015; border-radius: 6px; font-weight: 400;}

.simple-text h1, .simple-text h2, .simple-text h3 {font-family: inherit; font-size: 21px;}
.simple-title {font-size: 21px; font-family: inherit;}
.font-regular {font-family: inherit;}
.font-inherit {font-family: inherit;}

#payments-goods-items {display: flex; flex-wrap: wrap; }
.payments-tariff-buy-title {border-bottom: 1px solid #dedede; padding-bottom: 10px;}
.payments-tariff-buy {padding: 20px; cursor: pointer; position: relative;  border:1px solid #dedede; border-radius: 6px; width: calc(33% - 15px);}
.payments-tariff-buy:hover {box-shadow: 0px 0px 6px 0px #00000015;}
.payments-tariff-buy:hover .payments-tarrif-cost {background-color: #f4a85790;}
.payments-tariff-buy-btn {position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px);}
.payments-tariff-text {max-height: 50px;}
.tags-list {display: flex; justify-content: space-between;}
.tags-list span {display: inline-block; background: #f5f5f5; border-radius: 6px; padding: 3px 7px;}
.payments-tarrif-features {display: flex; flex-direction: column; gap: 5px;}
.payments-tarrif-features b {font-weight: 400; color:#808080;}
.payments-tarrif-cost {padding: 5px 10px; border-radius: 6px; margin-top: 10px; background-color: #d7d7d770; text-align: center; font-size: 18px;}

.payments-student-payment {display: inline-flex; align-items: center; cursor: pointer; background: #00000010; border-radius: 6px; padding: 2px 10px; margin-bottom: 10px;}
.payments-student-payment:hover {background: #00000020;}
.payments-student-payment:last-child {margin-bottom: 0px;}
.payments-student-payment .sep-dot {width: 20px; display: inline-block; text-align: center;}
.payments-student-payment.wallet-negative {
    background: #ffd1d1b5;
}

.payments-student-payment.wallet-negative:hover {
    background: #ff737320;
}

.student-payment-ticket-status  span{display: inline-block;}
.student-payment-status, .student-payment-status span {display: inline-flex; align-items: center;}

.dates-blocks span {display: inline-block; white-space: nowrap;}

#director-section {display: flex; justify-content: space-between; min-height: calc(100vh - 50px);}
#director-left-menu {width: 250px; position: fixed; left: 0px; top:50px; height: calc(100% - 50px);}
#director-right {width: calc(100% - 250px);}
#director-left-menu, #profile-left-menu {
    background: #2f3747;
    -ms-overflow-style: none;
    overflow-y: scroll;
    z-index: 98;
    padding: 10px 0px 20px 0px;
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
}

#director-left-menu::-webkit-scrollbar, #profile-left-menu::-webkit-scrollbar {display: none; }
#director-left-menu a, #profile-left-menu a {color: #91a0bc; text-decoration: none; padding: 10px 20px; display: flex; align-items: center; gap: 12px;}
#director-left-menu a:hover, .director-menu-ac, #profile-left-menu a:hover, .profile-left-menu-ac {color: #fff !important;}
/* #director-left-menu span:not(#director-left-menu-slide-right, #director-left-menu-slide-left) {display: block; width: calc(100% - 35px); } */
#director-left-menu a svg, #profile-left-menu a svg {height: 20px; width: auto;}
/* Уменьшаем отступы для нижних пунктов меню */

#director-left-menu a.coach-menu-service-item, 
#profile-left-menu a.coach-menu-service-item {
    padding: 5px 20px;
}

#director-left-menu a.coach-menu-service-start,
#profile-left-menu a.coach-menu-service-start {
    margin-top: auto; /* Именно это свойство вытолкнет блок в самый низ */
    padding-top: 18px;
    position: relative;
}
#director-left-menu a.coach-menu-service-start::before,
#profile-left-menu a.coach-menu-service-start::before {
    background: rgba(145, 160, 188, 0.28);
    content: "";
    height: 1px;
    left: 20px;
    position: absolute;
    right: 20px;
    top: 0;
}
#director-right {padding: 30px 20px 30px 20px; margin-left: 250px; margin-top:50px;}

#profile-left-menu {width: 250px; position: fixed; left: 0px; top:0px; height: 100%;}
#profile-left-menu span {display: block; width: calc(100% - 35px); }

#director-left-menu-slide-btn {display: flex;  margin-top: 20px;}
#director-left-menu-slide-left {margin-left: 20px; width: 130px;}
#director-left-menu-slide-left, #director-left-menu-slide-right {display: inline-flex; cursor: pointer; align-items: center; justify-content: center; height: 30px; border-radius: 6px; background: #00000020;}
#director-left-menu-slide-btn span:hover {background: #ffffff10;}
#director-left-menu-slide-btn span:hover svg {color: #fff;}

#director-left-menu-slide-right {display: none;}
.director-collapse-menu-footer {margin-left: 68px !important;}
.director-collapse-menu #director-left-menu {width: 68px;}
.director-collapse-menu #director-left-menu a span {display: none !important;}
.director-collapse-menu #director-right {margin-left: 68px !important; width: calc(100% - 68px) !important;}
.director-collapse-menu #director-left-menu-slide-btn span {width: 100% !important; margin: 0px 10px !important;}
.director-collapse-menu #director-left-menu-slide-left {display: none !important;}
.director-collapse-menu #director-left-menu-slide-right {display: inline-flex !important; justify-content: center !important;}
.director-collapse-menu #director-left-menu a {justify-content: center !important;}

#director-logo {display: flex; align-items: center;}
#director-logo img {height: 30px; margin-right: 15px;}
#director-logo-name {display: inline-flex; align-items: center;}
#director-logo-name svg {margin-right: 5px;}
#director-header {display: flex; background: #F7F7F7; z-index: 99; position: fixed; top:0px; left: 0px; width: 100%; height: 50px; padding: 0px 20px; align-items: center; justify-content: space-between;}

#office-top-menu {display: flex; align-items: center;}
#office-top-menu span, #office-top-menu a {display: inline-flex; margin-left: 0.5rem; cursor: pointer; align-items: center; justify-content: center; height: 35px; width: 35px; text-decoration: none;  border-radius: 50%;  color: #454545;}
#office-top-menu svg {height: 24px; width: auto; color: #454545;}
#office-top-menu .logout-btn svg {height: 28px;  }
#office-top-menu span:hover svg, #office-top-menu a:hover svg {color: #000;}


#director-footer {margin-left: 250px; color: #777; height: 50px; padding: 0px 30px; font-size: 14px; background: #F7F7F7; display: flex; align-items: center; justify-content: space-between;}
#director-footer a {color: #777; text-decoration: none;}
#director-footer a:hover {text-decoration: underline;}

.menu-subscription-none svg {color: #dc3545}
.menu-subscription-ok svg {}

.task-type {width:calc(25% - 20px); position: relative; padding-bottom: 50px; box-shadow: 1px 1px 7px 0px #b6b6b61f; border:1px solid #dedede; display: block; text-decoration: none; color: #454545; background: #fff; border-radius: 6px;}
.task-type-img {height: 200px; border-radius: 6px 6px 0px 0px; overflow: hidden; position: relative;}
.task-type-img span {position: absolute; left: 20px; top:20px; background: #ffffffe0; color: #000; box-shadow: 1px 1px 1px 0px #e8e8e8; z-index: 5; border-radius: 6px; padding: 5px 15px;}
.task-type-img img {transition:transform 0.8s ease; width: 100%;   height: 100%;   object-fit: cover;}
.task-type-text {padding: 20px;}
.task-type-text b {display: block; margin-bottom: 10px;}
.task-type-text button {border:1px solid #dedede; padding: 10px 0px; position: absolute; bottom: 25px; left: 20px; border-radius: 4px; text-align: center; width: calc(100% - 40px); outline: none; background: #fff;}
.task-type-text button svg {margin-left: 10px; transition: transform 0.5s ease; }
.task-type-text div {margin-bottom: 20px; color: #454545; }
.task-type:hover button {background: #f7f7f7;}
.task-type:hover svg {transform: translateX(5px);}
.task-type:hover img {transform: scale(1.05); }

.teacher-item {padding: 20px; display: flex; justify-content: space-between; border:4px solid var(--main-cover1); margin-bottom: 30px; border-radius: 16px;}
.teacher-item-img {background: #f5f5f5; border-radius: 16px; width: 200px; height: 200px; overflow: hidden;}
.teacher-item-img img {object-fit: cover; width: 100%; height: 100%;}
.teacher-item-left {width: 200px;}
.teacher-item-right {width: calc(100% - 240px);}
.teacher-item-left-btns button {margin-top: 10px; display: flex; justify-content: center; align-items: center; width: 100%;  text-transform: uppercase;  padding: 8px 0px;}
.teacher-item-left-btns button svg {margin-left: 10px;}
.teacher-item-left-btns .btn-transp {border-color: #b3b099;}
.teacher-item-top {text-transform: uppercase; font-size: 14px; margin-bottom: 10px;}
.teacher-item-top span {display: inline-block; margin-right: 20px;}

.gallery-setion-item {max-width: 100%; background: #f5f5f5; border-radius: 6px; min-width: 200px; position: relative; display: block; margin: 3rem 0rem 0rem 0px;}
.gallery-setion-item img {max-width: 100%; min-width: 200px; border-radius: 6px; border:1px solid #dedede;}
.gallery-setion-item input {position: absolute; border:1px solid #00000010; bottom: 20px; z-index: 10; left: 20px; width: calc(100% - 40px) !important;  background: #ffffffd1 !important; color: #000 !important;}
.gallery-setion-item select {position: absolute; border:1px solid #00000010; top: 20px; z-index: 10; left: 20px; width: 60px; background-color: #ffffff99 !important; color: #000 !important;}
.gallery-setion-item button {position: absolute; border:1px solid #00000010; top: 20px; z-index: 10; right: 20px; border-radius: 50%; height: 30px;  width: 30px; display: flex; align-items: center; justify-content: center; background-color: #ffffff99 !important; color: #000 !important;}

.inp-btn-box {background: #fff; border-radius: 6px; padding:20px; display: inline-flex; border:1px solid #f5f5f5; align-items: center;}
.inp-btn-box input, .inp-btn-box button {height: 40px; width: 100%; max-width: 400px;}
.inp-btn-box input {width: 400px;}
.inp-btn-box button {width: 100px; text-align: center; display: inline-flex; align-items: center; justify-content: center; margin-left: 15px;}

#teacherApplicatModal .modal-header {border-bottom: none; padding-bottom: 0px; text-align: center;}
#teacherApplicatModal .modal-content {background:linear-gradient(45deg, #f5f5f5, #fff5e4);}
.modal-header-default {position: relative; padding: 20px 20px 0px 20px;}
.modal-header-default .modal-close-btn {position: absolute; right: 20px; top:20px;}
#teach-application {display: flex; justify-content: center;}
#teach-application b {display: block; font-weight: 500;}
#teach-application-left {width: 400px;}
/*#teach-application-right {width: calc(100% - 430px);}*/
#teach-application-right div {margin-bottom: inherit !important;;}
#teach-application-right ul {list-style: none; padding-left: 0px; margin-top:20px;}
#teach-application-right li {margin-bottom: 5px; display: flex; justify-content: space-between;}
#teach-application-right li i {height: 16px; display: block; width: 16px; margin-right: 5px;}
#teach-application-right li span {width: calc(100% - 24px);}
#teach-application-right li svg {height: 16px; width: auto; }
#teach-application-right-top {display: flex; justify-content: space-between;}
#teach-application-img {width: 200px; height: 200px; overflow: hidden; background: #f5f5f5;}
#teach-application-img img {object-fit: cover; width: 100%; height: 100%; border-radius: 6px;}
#teach-application-name {width: calc(100% - 220px);}
.modal-header-default .modal-title {font-size: 30px;}

#about {display: flex; justify-content: space-between;}
#main-map {width: calc(50% - 20px); border:1px solid #f5f5f5; border-radius: 6px;}
#main-map iframe {border-radius: 6px;}
#main-text {width: calc(50% - 20px); line-height: 1.5;}
#main-text .text-icon {display: inline-block; margin-right: 5px;}
#main-text .text-icon svg {color:var(--main-gray); }

.director-feedback {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media only screen and (max-width: 768px) {

    /* .mainbox {
        margin-top: 72px;
    } */

    .director-feedback {
        flex-direction: column;
        align-items: start;
    }
}

.top-announcement-wrapper {
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

#applicat-markers {list-style: none; display: inline-flex; padding: 10px 20px; background: #00000015; border-radius: 6px; margin: 0;}
#applicat-markers li {height: 30px; cursor: pointer; width:30px; border:5px solid #fff; border-radius: 50%; margin:0px 15px 0px 0px; padding: 0px;}
#applicat-markers li:last-child {margin-right: 0px;}
#applicat-markers li:hover, .filter-market-ac {border:none ; box-shadow: 0px 0px 3px 0px #999;}
.filter-market-ac {border:none !important; box-shadow: 0px 0px 3px 0px #999;}
.mark-item {height: 25px; width: 25px; border:1px solid #00000015; border-radius: 50%; display: inline-block; cursor: pointer;}
.mark-item:hover, .mark-none:hover {box-shadow: 0px 0px 4px 0px #999;}

.mark-none {border-radius: 6px !important; background: #fff;}
.mark-none.filter-market-ac {background: #00000005;}
.mark-none:hover {}
.mark-gray {background-color: #f5f5f5;}
.mark-blue {background-color: #0000FF;}
.mark-yellow {background-color: #FFFF00;}
.mark-red {background-color: #FF0000;}
.mark-violet  {background-color: #8000FF;}
.mark-orange {background-color: #FFA500;}
.mark-black {background-color: #000000;}
.mark-green {background-color: #198754;}
.mark-brown{background-color: #a52a2a;}

.icon-gray svg {color: #f5f5f5;}
.icon-blue svg {color: #0000FF;}
.icon-yellow svg {color: #FFFF00;}
.icon-red svg {color: #FF0000;}
.icon-violet svg {color: #8000FF;}
.icon-orange svg {color: #FFA500;}
.icon-black svg {color: #000000;}
.icon-green svg {color: #198754;}
.icon-brown svg {color: #a52a2a;}

#markers-context-menu, .markers-context-menu {position: absolute;  border-radius: 6px; left: 300px; top:400px; background: #fff; box-shadow: 0 10px 20px -5px rgba(0,0,0,.4); width: 150px;}
#markers-context-menu:before, .markers-context-menu:before {content: ''; display: block; position: absolute; left: 15px; top:-20px; border: 10px solid transparent; border-bottom: 10px solid #fff;}
#markers-context-menu div, .markers-context-menu div {height: 35px; cursor: pointer; border:1px solid #00000007; margin:10px; border-radius: 6px;}
#markers-context-menu div:hover, .markers-context-menu div:hover { box-shadow: 0px 0px 4px 0px #999;}

.title-icon {display: inline-flex; align-items: center;}
.title-icon svg {margin-right: 10px; height: 20px; width: auto;}
.btn-icon-left, .btn-icon-left-sm, .btn-icon, .btn-text {display: inline-flex; text-align: left; align-items: center; border: 1px solid #dedede; padding: 10px 20px; cursor: pointer; background: inherit; border-radius: 6px;}
.btn-icon {padding: 10px 20px;}
.btn-icon svg {margin-left: 10px;}
.btn-icon-left div {margin-right: 10px;}
.btn-icon-left svg {margin-right: 10px;}
#game-left .btn-icon-left { justify-content: center;}
.btn-icon-left-sm {padding: 3px 6px; font-size: 14px;}
.btn-icon-left-sm svg {height: 16px !important; margin-right: 5px;}
.text-icon-left-sm {display: inline-flex; align-items: center;}
.text-icon-left-sm svg {height: 12px; width: auto; margin-right: 5px;}

.gap-10 {gap: 10px; display: flex;}
.gap-20 {gap: 20px; display: flex;}

.ac-svg-box svg {color: #000 !important;}

.classroom-piece-symbols { background: #fff;  border-radius: 3px; /*max-width: 510px; */ }
.classroom-piece-symbols ul {margin: 0px; padding: 0px 0px 10px 0px;  overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; border-radius: 3px; margin-bottom: 10px;}
.classroom-piece-symbols ul:last-child {border-bottom: none; margin-bottom: 0px;}
.classroom-piece-symbols ul li {display: flex; flex-wrap: wrap; align-items: center; cursor: pointer; background: #f5f5f5;}
.classroom-piece-symbols ul li:hover {background: #dedede;}
.classroom-piece-symbols ul li:hover div {background: #dedede;}
.classroom-piece-symbols ul div {background-color: #e3e3e3; margin-right: 10px; height: 30px; width: 30px; display: flex; flex-shrink: 0; justify-content: center; align-items: center;}
.classroom-piece-symbols ul span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0px;}
.ac-item-sym, .ac-item-sym div {background-color: #f1d9b6 !important;}

.quill-chess-form-editor-btn {cursor: pointer;}
.quill-chess-form-editor-btn:hover {background: #6c757d; color: #fff;}

.status-circle-icon-green, .status-circle-icon-red {position: relative; margin-left:5px; display: block; height: 15px; width: 15px; border-radius: 50%;}
.status-circle-icon-green {background-color: #98ce44;}
.status-circle-icon-red {background-color: #6a1a21;}

.q-text-curiculum {min-height: calc(100% - 70px);}
.q-text-curiculum img {max-width: 100%;} 

#map-contact {border-radius: 6px;}
#main-map iframe, #map-contact iframe {border-radius: 6px; border: 1px solid #f5f5f5;}

#bread-crumbs a,  #bread-crumbs span {font-size: 12px; line-height: initial; text-decoration: none; margin-bottom:0px; font-weight: 300; display:inline-block; position: relative; padding-right: 25px; color: #024074}
#bread-crumbs a {cursor: pointer;}
.breadcrumb-profile-link {padding-right: 0px !important; margin-left: 5px; color: #999 !important; }
.breadcrumb-profile-link::after {display: none; }
#bread-crumbs span {color:#454545;}
#bread-crumbs a:hover {text-decoration: underline;}
/* #bread-crumbs a::after, .breadcrumb-arrow::after {content: ''; height: 14px; width: 12px; position: absolute; right: 7px; top:0px;  background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' height='16' role='presentation' width='16' viewBox='0 0 128 128' aria-hidden='true' focusable='false'%3E%3Cpath d='M54.3 96a4 4 0 0 1-2.8-6.8L76.7 64 51.5 38.8a4 4 0 0 1 5.7-5.6L88 64 57.2 94.8a4 4 0 0 1-2.9 1.2z'%3E%3C/path%3E%3C/svg%3E");} */
#bread-crumbs a:not(:last-child)::after,
.breadcrumb-arrow:not(:last-child)::after {
    content: '';
    height: 14px;
    width: 12px;
    position: absolute;
    right: 7px;
    top: 0px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' height='16' role='presentation' width='16' viewBox='0 0 128 128' aria-hidden='true' focusable='false'%3E%3Cpath d='M54.3 96a4 4 0 0 1-2.8-6.8L76.7 64 51.5 38.8a4 4 0 0 1 5.7-5.6L88 64 57.2 94.8a4 4 0 0 1-2.9 1.2z'%3E%3C/path%3E%3C/svg%3E");
}

.breadcrumb-arrow {position: relative; padding-right: 25px;}
.breadcrumb-arrow::after {display: flex; align-items: center; background-position: center; height: 100%;}

#personal-data-private {padding:20px; background: #f9f9f9; border:1px solid #00000008; border-radius: 6px; margin-top:20px;}
#personal-data-private select {background-image: 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"); background-repeat: no-repeat; background-position: calc(100% - 20px) center;}
#personal-data-private select, #personal-data-private input {background-color: #fff;}

.mainbody {background: #fff;}
/*.mainbody footer {border-top:1px solid #f5f5f5;}*/

.bg1 {background: #4e84a929 !important;}
.bg2 {background: #4ad8a930 !important;}
.bg3 {background: #ad67e029 !important;}
.bg4 {background: #d9555533 !important;}

#main-reviews {background: url(/img/shape-3.png) no-repeat center #F1F8FF; padding:40px 0px;}

#main-reviews-list, .main-review-top, .main-review-who {display: flex; justify-content: space-between;}
.main-review-who img {border-radius:50%;}
.main-review-who span {color: #8a8a8a;}
.main-review-img {margin-right: 20px;}
.main-review-img img {height: 60px; width: auto;}
.main-review {background: #fff; border-radius: 6px; border: 1px solid #e6e6e6; padding: 20px; width: calc(50% - 20px);}
.main-review-who b {display: block;}
.main-review-text {margin-top:15px; min-height: 130px; }
.main-review-rating svg {margin: 0px 2px; color: #fcbf41;}

.main-review-col2 {display: flex; justify-content: space-between;}
.main-review-left {width: calc(50% - 15px);}
.main-review-left .main-review {background: #fff; border-radius: 6px; padding: 20px; width: 100%; margin-bottom: 30px;}
.main-review-left .main-review:last-child {margin-bottom: 0px;}
.main-review-right {width: calc(50% - 15px);}
.main-review-left iframe {height: 100% !important;}

.callback-form {position: relative;}
.callback-form-content {background: linear-gradient(45deg, #f5f5f5, #fcb64126); display: flex; border-radius: 16px; padding: 30px; margin-bottom: 40px;}
.callback-form-left {width: 400px;}
.callback-form-right {width: calc(100% - 750px); margin-left: 20px;}
.callback-form-left h3 {font-size: 40px;}
.callback-form-right input {width: 100%; padding: 10px 20px; border-radius: 0.375rem; outline: none; border:1px solid #dedede; }
.callback-form-right button {width: 100%; padding: 10px 20px; text-transform: uppercase;}
.cacllback-form-img {position: absolute; right: 30px;  height: 220px; width: auto; bottom:36px;}
.cacllback-form-london-bus {right: 30px;}

@media (max-width: 1440px) and (max-height: 900px) {
    .board-history-moves-box {
      /* max-height: 240px !important; */
    }
  }


@media only screen and (max-width: 1132px) {
    .callback-form-left {
        width: 100%;
    }

    .callback-form-right {
        width: 100%;
        z-index: 10;
    }

    .cacllback-form-img {
        height: 220px;
        display: none;
    }

    .classroom-piece-symbols ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* img.shape.ten {
    max-width: 3%;
} */


.callback-form-right input {
    background-color: white !important;
    border: 1px solid #dedede !important;
}

.callback-form-phone .chess-coach__form-phone {
    background-color: white;
}

.callback-form-content.chess-coach__content {background: #f1974705; border: 1px solid #dedede; border-radius: 6px;}

.chess-coach__callback-btn {
    background-color: #f5a858;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.chess-coach__callback-input {
    background-color: white;
    border: 1px solid red;
}

.tasks-task-type { margin-bottom: 40px; position: relative; box-shadow: 1px 1px 7px 0px #b6b6b642; border-radius: 6px; border:1px solid #dedede;}
.tasks-task-type-img {padding: 20px; width: 250px;}
.tasks-task-type-img img {border-radius: 6px; height: 170px;}
.tasks-task-type-text {padding: 20px 20px 20px 10px; width: calc(100% - 250px);}
.tasks-task-type-courses {padding: 0px 20px 20px 20px;}
.tasks-task-type-courses b {font-size: 18px;}
.tasks-task-type-courses a {display: inline-flex; align-items:center; transition: all .2s ease-in-out;  padding: 5px 15px; margin: 15px 15px 0px 0px; text-decoration: none; color: #454545; background: #fff; border-radius: 6px; border:1px solid #dedede;}
.tasks-task-type-courses a:hover {background: #f5f5f5;}
.tasks-task-type-courses a span {display: inline-block; padding: 1px 5px; border-radius: 4px; margin-left: 10px; font-size: 12px; background: #00000010}
.tasks-task-type-courses a svg {color:#278557; height: 14px; width: auto; margin-right: 5px;}
.tasks-task-type-courses i {font-style: normal; font-weight: 400; font-size: 12px; display: inline-block; background: #f5f5f5; width: 25px; height: 25px; line-height: 25px; margin-left: 5px; border-radius: 50%; text-align: center;}

.btn-white {border:1px solid #dedede; border-radius: 6px; box-shadow: 1px 1px 2px 1px #dedede59; outline: none; cursor: pointer; background: #fff; padding: 10px 25px;}
.btn-white svg {margin-left: 5px; transition: transform 0.5s ease; }
.btn-white:hover {background: #f8f8f8;}
.btn-white:hover svg {transform: translateX(5px);}

.btn-back {cursor: pointer;}

.student-curriculum-form-box {background: #0000000a; border-radius: 6px; padding: 20px 0px; margin-bottom: 20px;}
.student-curriculum-form-section {color:#000; font-size: 24px; padding: 0px 20px;}
.student-curriculum-theme {padding: 10px 20px; cursor: pointer;  display: flex; gap: 8px; align-items: center; border-bottom: 1px solid #00000010; display: flex; align-items: center; justify-content: space-between;}
.student-curriculum-theme:hover {background: #00000020;}
.student-curriculum-form-box .student-curriculum-theme:last-child {border-bottom: none;}

.curric-theme-delete-btn {border: none; background: none !important; display: flex; align-items: center; justify-content: center; width: auto; padding: 0;}

.coachOnlineLessonBox {padding: 20px; background: #e0e3e8; border-radius: 6px; margin-bottom: 15px;}
.coachOnlineLessonBoxHeader {padding-bottom: 5px; border-bottom: 1px solid #00000008;}
.coachOnlineLessonBoxStudents span {display: inline-block; background: #00000020; padding: 3px 10px; margin: 10px 10px 0px 0px; border-radius: 6px;}

#user-history-content h1, #user-history-content h2, #user-history-content h3 {font-family: inherit;}

.user-result {padding: 45px 20px 20px 20px; position: relative; border-radius: 6px; background: #bbcfd35c; margin-bottom: 20px;}
.user-result-date {position: absolute; color: #024074; font-size: 12px; top:15px; left: 115px;}
.user-result-user-name {position: absolute; color: #30835a; font-size: 12px; top:15px; left: 380px;}
.user-result a {color: #454545; text-decoration: none;}
.user-result a:hover {text-decoration: underline;}
.user-result i {font-style: normal; font-size: 14px;}
.results-icon {position: absolute; left: 90px; top:10px;}
.results-icon-task {color: #278557;}
.results-icon-theme {color: #fcbf41;}
.results-icon-course {color: #cc0000;}

#userEditImage {min-height: 200px; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; background: #00000018; border-radius: 6px;}
#userEditImage img {width: 100%;}
#userEditImageSaveMiniBtn {display: inline-flex; align-items: center; justify-content: center;}
#userEditImageSaveMiniBtn svg {margin-left: 7px;}

.board-history-moves-box {border: 1px solid #dedede; position: relative; box-sizing: content-box; border-radius: 6px; height: calc(100dvh - 410px); }
.history-move {display: flex; align-items: center; border-bottom: 1px solid #f5f5f5; }
.history-move-n {width: 20px; text-align: center; flex: 0 0 16.666%; align-items: center; display: flex; justify-content: center; color: #b1b1b1; background: #f5f5f5;height: 40px; }
.history-move-1, .history-move-2, .history-move-empty {flex: 0 0 41.666%;  align-items: center; padding-left: 15px; height: 40px; display: flex; align-items: center;}
.board-history-control .history-move-1, .board-history-control .history-move-2 {cursor: pointer;}
.history-move-1:hover, .history-move-2:hover, .history-move-ac {background: #f1f1f1; cursor: pointer;}
.board-history-btns {display: flex; border-radius: 6px 6px 0px 0px; justify-content: space-around; align-items: center; background: #f9f9f9; height: 40px; align-items: center;}
.board-history-btns button { border: none; background-color: transparent; outline: none;}
.board-history-btns button svg {height: 20px; width: auto;}
.board-history-moves {height: 260px; overflow-y: scroll; }
.board-history-btns button:not(:disabled):hover svg {color: var(--main-blue);}

.board-engine-eval-box {
    background: #fff;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    color: #2f3437;
    overflow: hidden;
}
.board-engine-eval-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 6px 8px;
    border-bottom: 1px solid #edf0f2;
    background: #f8fafb;
}
.board-engine-eval-box.is-enabled .board-engine-eval-head {
    background: #f4f8f1;
}
.board-engine-eval-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.board-engine-eval-toggle {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 42px;
    padding-left: 0;
}
.board-engine-eval-toggle.form-switch {
    padding-left: 0;
}
.board-engine-eval-toggle.form-switch .form-check-input {
    width: 2.5em;
    height: 1.25em;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-color: #d6dbe0;
    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.3%29'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    border: 1px solid #b8c0c8;
    border-radius: 2em;
    outline: none;
    transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.board-engine-eval-toggle.form-switch .form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .18);
}
.board-engine-eval-toggle.form-switch .form-check-input:checked {
    background-color: #198754;
    background-position: right center;
    border-color: #198754;
    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");
}
.board-engine-eval-toggle.form-switch .form-check-input.cw-engine-toggle-denied {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .18);
}
.board-engine-eval-score {
    display: inline-block;
    min-width: 42px;
    color: #1f6f43;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}
.board-engine-eval-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
    line-height: 1;
}
.board-engine-eval-tech {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 4px;
    border-radius: 3px;
    background: #5f8f45;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}
.board-engine-eval-lines {
    padding: 6px 8px 8px;
    min-height: 240px;
    overflow-y: auto;
}
.cw-engine-meta {
    margin-bottom: 4px;
    color: #6d747b;
    font-size: 12px;
}
.cw-engine-empty {
    color: #6d747b;
    font-size: 12px;
}
.cw-engine-loading {
    display: flex;
    align-items: center;
    padding: 8px;
    color: #6d747b;
    font-size: 12px;
}
.cw-engine-pv {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-height: 24px;
    line-height: 1.75;
}
.cw-engine-pv + .cw-engine-pv {
    border-top: 1px solid #f0f2f4;
}
.cw-engine-pv-wrap-toggle {
    flex: 0 0 auto;
    width: 10px;
    height: 18px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}
.cw-engine-pv-wrap-toggle::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 6px 0 0 2px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid #8b949e;
}
.cw-engine-score {
    flex: 0 0 42px;
    color: #1f6f43;
    font-weight: 700;
    white-space: nowrap;
}
.cw-engine-pv-moves {
    min-width: 0;
}
.cw-engine-pv.pv--nowrap .cw-engine-pv-moves {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cw-engine-pv:not(.pv--nowrap) {
    align-items: flex-start;
}
.cw-engine-pv:not(.pv--nowrap) .cw-engine-pv-moves {
    white-space: normal;
}
.cw-engine-pv-index {
    color: #737b82;
    margin-right: 3px;
}
.cw-engine-pv-san {
    border-radius: 4px;
    cursor: default;
    padding: 0 3px;
    margin-right: 2px;
}
.cw-engine-pv-san:hover {
    background: #eef2f5;
}

.classroom-bottom-tools {
    gap: 8px;
    align-items: center;
}
.classroom-opening-explorer-toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 26px;
    border: 1px solid #d7d7d7;
    border-radius: 6px;
    background: #fff;
    color: #58616a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.classroom-opening-explorer-toggle svg {
    width: 15px;
    height: 15px;
}
.classroom-opening-explorer-toggle:hover,
.classroom-opening-explorer-toggle.is-active {
    background: #eef7f1;
    border-color: #9fc7a8;
    color: #1f6f43;
}
.opening-explorer-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 42px;
    z-index: 9;
    height: 50%;
    min-height: 180px;
    max-height: calc(100% - 46px);
    background: #fff;
    border-top: 1px solid #dfe3e7;
    box-shadow: 0 -8px 18px rgba(24, 34, 45, .12);
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.opening-explorer-panel.d-none {
    display: none !important;
}
.opening-explorer-head {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f8fafb;
    border-bottom: 1px solid #edf0f2;
}

.opening-explorer-head-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.opening-explorer-title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2f3437;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.opening-explorer-title svg {
    width: 15px;
    height: 15px;
    color: #1f6f43;
}

.opening-explorer-sources {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    background: #edf2f5;
    border-radius: 999px;
}
.opening-explorer-source {
    border: none;
    background: transparent;
    color: #66707a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.opening-explorer-source:hover {
    color: #2f3437;
}
.opening-explorer-source.is-active {
    background: #fff;
    color: #1f6f43;
    box-shadow: 0 1px 2px rgba(24, 34, 45, .08);
}
.opening-explorer-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #7b848c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
}
.opening-explorer-close svg {
    width: 16px;
    height: 16px;
}
.opening-explorer-close:hover {
    background: #eef2f5;
    color: #2f3437;
}
.opening-explorer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #fff;
}
.opening-explorer-state {
    padding: 12px 10px;
    color: #6d747b;
    font-size: 12px;
}
.opening-explorer-error {
    color: #9b2d2d;
}
.opening-explorer-meta {
    padding: 7px 8px 3px;
    color: #747d86;
    font-size: 11px;
}
.opening-explorer-moves {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #30363b;
}
.opening-explorer-moves th,
.opening-explorer-moves td {
    padding: 6px 7px;
    border-bottom: 1px solid #edf0f2;
    white-space: nowrap;
    vertical-align: middle;
}
.opening-explorer-moves th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafb;
    color: #5b6570;
    font-size: 11px;
    font-weight: 700;
}
.opening-explorer-moves tr:hover {
    background: #f7faf8;
}
.opening-explorer-moves .opening-explorer-move {
    font-weight: 700;
}
.opening-explorer-moves .opening-explorer-games {
    color: #59636d;
}
.opening-explorer-bar {
    width: 156px;
    height: 18px;
    display: flex;
    overflow: hidden;
    border-radius: 4px;
    background: #e5e8eb;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
}
.opening-explorer-bar span {
    min-width: 0;
    display: block;
    overflow: hidden;
    color: #fff;
}
.opening-explorer-bar .white {
    background: #8fbf73;
}
.opening-explorer-bar .draws {
    background: #b8b8b8;
}
.opening-explorer-bar .black {
    background: #666d73;
}
.opening-explorer-moves .sum {
    font-weight: 700;
    background: #fbfcfd;
}

.color-circle-white, .color-circle-black {height: 20px; border:2px solid #00000020; width: 20px; display: inline-block; border-radius: 50%;}
.color-circle-white {background: #fff; }
.color-circle-black {background: #454545;}

.course-puzzle-history-watch svg { height: 25px; width: 25px; width: auto; cursor: pointer; color: var(--main-gray);}
.course-puzzle-history-watch { cursor: pointer; z-index: 10; height: 25px; width: 25px; justify-content: center; position: absolute; top:12px; left:50px; font-size: 13px; background: #00000020;  display: flex; align-items: center; border-radius: 50%; }
.course-puzzle-history-watch:hover svg {color: var(--main-blue); }

.course-puzzle-history-ava {height: 25px; width: 25px; position: absolute; left: 15px; top:12px;}
.course-puzzle-history-ava img, .course-puzzle-history-ava svg {border-radius: 50%; width: 25px; height: 25px; position: absolute; left:0px; top:0px;}

.history-text {padding: 10px; font-size: 14px; border-bottom: 1px solid #f9f9f9;}
.history-moves {padding: 10px; font-size: 14px; background: #8da8f712;}
.history-moves move {margin-left: 5px; cursor: pointer; display: inline-block; padding: 3px 5px; border-radius: 6px; }
.history-moves move:hover {background: #00000020;}

#classroom-text-notation-btn {border: 1px solid #dedede; background: none; cursor: pointer; padding: 5px 10px; border-radius: 6px;}

#master-page-left {width: 200px;}
#master-page-right {width:calc(100% - 220px);}
#master-img {display: inline-flex; overflow: hidden;}
#master-img img {width: 200px; border-radius: 12px;}
#master-page-right div {margin-top:5px;}
#master-page-right div span {font-weight: 600;}

#mob-menu-popup { display: none;  padding-top: 10px;  position: fixed; border-left: 1px solid #dedede; border-bottom: 1px solid #dedede; background: #fff; z-index: 999; border-radius: 0px 0px 0px 6px; width: calc(100% - 100px); right: 0px; top:60px;}
#mob-menu-popup a {text-decoration: none; display: flex; align-items: center; color: #454545;}
#mob-menu-popup a svg {margin-right: 10px;}
#mob-menu-popup li {display: block; padding: 10px 0px;}
#mob-menu-popup .mob-menu-line {height: 1px; margin: 8px 0px; width: calc(100% - 20px); display: block; border-bottom: 1px solid #f1f1f1;}

#mob-menu-btn{border: none; position: relative;top:-3px; color: #454545;  outline: none; padding: 0px; background: none; display: inline-block; cursor: pointer;}
#mob-menu-btn svg {height: 30px; width: auto;}
.mob-menu-quick {border:1px solid #dedede; color: #454545; padding: 2px 10px; background: #fff; display: inline-flex; align-items: center; border-radius: 4px; margin-right: 10px;}
.mob-menu-quick svg {margin-right: 5px; height: 15px; width: auto;}

.mob-lider {background: #f5f5f5; padding: 20px; border-radius: 6px; margin-bottom: 30px; text-align: center;}
.mob-lider img {height: 40px; width: 40px; border-radius: 50%; margin-bottom: 10px;}
.mob-lider svg {height: 30px; width: 30px; color: #454545; margin-bottom: 10px;}

.mob-select {width: 100%; padding-right:35px; color: #454545; text-indent:10px; height: 40px; outline: none; padding-left: 20px;  background: #fff; border:1px solid #dedede; border-radius: 6px; background-image: 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"); background-repeat: no-repeat; background-position: calc(100% - 20px) center;}
.mob-select option {padding-left: 20px;}

.master-card {display: flex; border: 1px solid #dedede; align-items: center; background: #fff; padding: 1rem; border-radius: 6px; position: relative;}
.master-card-right  {width: calc(100% - 65px);}
.master-card-info span {color: #515151;}
.master-card-img {width: 45px; height: 45px; margin-right: 20px;}
.master-card-img img, .master-card-img svg {width: 100%; height: auto; border-radius: 50%;}
/* .master-card input[type=checkbox] {position: absolute; right: 15px; top:calc(50% - 7px); height: inherit !important;} */
.master-card-check-top-right {top:5px !important; right: 5px !important;}
.master-card .user-site-status-text {font-size: 13px;}

.master-cards {display: flex; flex-wrap: wrap;}
.master-cards .master-card {width: 330px; transition: background 0.2s ease; cursor: pointer; border:1px solid #e6e6e6; margin: 0px 20px 20px 0px;}
.master-cards .master-card:hover {background: #f5f5f5;}
.master-card-icon {position: absolute; right: 5px; top: 5px; display: flex;}
.master-card-icon svg {height: 14px; width: auto; color: #8a8a8a;}

.payments-purchase-step2 .master-card {border:1px solid #e6e6e6;}

.application-line input, .application-line select {width: 100%;}
.application-line b {display: block; margin-bottom: 5px;}
.application-line-col-2 {display: flex; justify-content: space-between; margin-bottom: 0px;}
.application-line-col-2 div {width: calc(50% - 10px); margin-bottom: 0px;}

.win-bg-gray .btn-back {background: #00000015; cursor: pointer;}
.win-bg-gray .btn-back:hover {background: #00000025;}
.win-bg-beige-grad {background: linear-gradient(45deg, #f5f5f5, #fff5e4) !important;}
.gray-tag-text {display: inline-block; padding: 3px 10px; background: #00000080; border-radius: 6px; color: #fff; font-weight: 400;}

.white-bordered {background: #fff; border-radius: 6px;}

#attendance-dates-btns {padding: 0px; max-width: 100%; margin: 0px; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between;}
#attendance-dates-btns li {display: block;  padding: 10px 20px; cursor: pointer; border-radius: 6px; background: #00000010; margin-right: 20px; margin-bottom: 40px;}
#attendance-dates-btns li:hover {background: #00000020;}
#attendance-dates-btns li span {display: inline-block; padding: 3px 6px; margin-left: 2px; border-radius: 6px; background: #00000015;}
#attendance-dates-btns .attendance-lessons-ok {background:#19875450; }

.attendance-navi-box {display: flex; align-items: center;}
.attendance-navi {background-color: #f5f5f5; display: inline-flex; align-items: center; border-radius: 6px; padding: 7px 12px;}
.attendance-navi svg {margin-right: 10px;}

.calendar-day {position: relative;}
.calendar-day-lessons {position: absolute; bottom: 10px; left: 10px; font-size: 14px;}
.calendar-day-scheduled {position: absolute; right: 10px; bottom: 10px; display: inline-flex; width: 25px; height: 25px; background: #f9f9f9; border-radius: 6px; align-items: center; justify-content: center; font-size: 14px; }

#watch-puzzle-box {display: flex; justify-content: space-between;}
#watch-puzzle-box-left {width: 150px;}
#watch-puzzle-box-right {width: calc(100% - 170px);}
#watch-puzzle-box-left ul {list-style: none; padding-left: 0px;}
#watch-puzzle-box-left li {display: block; border-radius: var(--round); padding: 5px 10px; background: #eee; margin-bottom: .5rem;}
#watch-puzzle-box-left li:hover, .watch-chess-menu-ac {background: #dedede;}

#education-price-section {background: #0d427105; padding: 50px 0px 80px 0px;}
#education-prices {display: flex; justify-content: space-between;}
.education-price {background: linear-gradient(45deg, #f5f5f5, #fcb64126); width: calc(25% - 24px); padding-bottom: 60px; position: relative; border: 1px solid #eee; border-radius: 28px; overflow: hidden;}
.education-price:hover {box-shadow: 1px 1px 4px 0px #eee;}
.educ-price-top {height: 220px; overflow: hidden;}
.educ-price-top img {object-fit: cover; width: 100%; height: 100%;}
.educ-price-content {padding: 30px 20px;}
.educ-price-content h3 {text-align: center; font-size: 32px; color: #454545;}
.educ-price-cost {color: var(--main-blue); font-weight: 600; font-size: 20px; margin: 15px 0px; text-align: center; text-transform: uppercase;}
.educ-price-benefit {text-align: center; display: flex; flex-wrap: wrap; justify-content: space-around;}
.educ-price-benefit span {max-width: calc(50% - 5px); width: 100%; text-align: left; margin-bottom: 20px; padding-left: 25px; position: relative; line-height: 1.5; display: inline-flex;}
.educ-price-benefit svg {position: absolute; color: var(--main-blue); width: 20px; height: 20px; display: block; left: 0px; top:3px; }
.btn-transp {border:2px solid var(--main-blue); border-radius: 6px; padding: 8px 0px; background: transparent; width: 100%; }
.educ-price-btns {position: absolute; bottom: 30px; left: 20px; width: calc(100% - 40px);}
.educ-price-btns button {width: 100%; margin-top: 15px; padding: 8px 0px; text-align: center; font-size: 18px; text-transform: uppercase;   cursor: pointer; outline: none; }
.educ-price-btns button:hover {background: var(--main-blue); border-color: var(--main-blue); color: #fff; }

.bg-title {display: inline-block; padding: 10px 20px; background: #dedede; border-radius: 4px; font-weight: 400; font-size: 21px;}
.btn-large {width: 300px; padding: 15px; text-transform: uppercase;}
.box-max-700 {width: 100%; max-width: 700px;}
.box-max-800 {width: 100%; max-width: 800px;}
.box-max-900 {width: 100%; max-width: 900px;}
.box-max-1000, .w-max-1000 {width: 100%; max-width: 1000px;}
.light-shadow {box-shadow: var(--light-shadow); }
.light-border {border: 1px solid #dedede; }

.btn-load-abs {position: absolute;}
.btn-load, .btn-load-sm {position: relative;}
.btn-load:before, .btn-load-sm:before, .btn-load-abs:before {content: ''; position: absolute; border:1px solid #00000010; left: -2px; top:-2px; border-radius: 6px; background: #fff url(/img/load9.gif) no-repeat center; width: calc(100% + 4px); height: calc(100% + 4px);}
.btn-load-sm:before { background-image: none;}
.btn-load-sm:after, .folder-icon-load::after {content: ''; animation: rotateAnimation 1s linear infinite; width: 100%; height: 100%; position: absolute; left: 0px; top:0px;  display: flex; justify-content: center; align-items: center; background: no-repeat center url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round' class='animate-spin text-center m-auto' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");}


.save-btn__wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.save-btn__wrapper label {
    margin-top: 0;
}

.form-check-input {
    margin: 0;
}

.attendance-lesson-student-grade {width: 70px; }
.attendance-lesson-student-note {width: 350px; }
.attendance-lesson-student-td {min-width: 255px;}
#attendance-lesson-subject {background-color: #fff; width: 100%;}
/* #attendance-lesson-students-save-btn {width: 100%; max-width: 500px; padding: .5rem; } */
#attendance-lesson-students-save-btn { min-width: 220px; padding: .5rem; }

#students-table td:not(.sticky) {min-width: 150px; text-align: center;}
#students-table-2 td:not(.sticky) { text-align: center;}


.payments-purchase-step2 {width: 500px; max-width: 100%; margin: 0 auto;}

.attendance-section {border:1px solid #e6e6e6; box-shadow: 1px 1px 1px 0px #f8f8f8; padding: 5px; border-radius: 6px; width: 100%;  margin-bottom: 20px;}
.attendance-item {display: flex; cursor: pointer; transition: all .2s ease-in-out; align-items: center;  justify-content: space-between; padding: 10px; background: #f5f5f5; border-radius: 6px; margin-bottom: 10px; width: 100%; }
.attendance-item:hover {background: #dde8f0;}
.attendance-item-checkbox {align-items: center;}
.attendance-item-checkbox input {width: inherit;}
.attendance-item-checkbox, .attendance-coach-name label  {display: inline-flex;  align-items: center; cursor: pointer; white-space: nowrap; border:1px solid #00000010; padding: 2px 10px; padding-right: 10px; background: #ffffff; border-radius: 6px;}
.attendance-item-checkbox  input, .attendance-coach-name label input {margin-right: 5px; cursor: pointer; position: relative; top:1px;}
.attendance-info {display: flex; align-items: center; padding: 10px 10px;}
.attendance-info svg, .attendance-info span, .attendance-info b {margin-right: 10px; font-weight: 400;}
.attendance-info svg {height: 20px; width: auto; }
.attendance-coach-name {display: flex; align-items: center; justify-content: space-between;}
.attendance-coach-name label {margin-right: 10px; background: #a1b3c8;}
.attendance-info i {font-style: normal; color: var(--main-blue);}
.attendance-group-check-all {margin-left: auto; border-bottom: 1px dotted; cursor: pointer;}
.attendance-group-check-all:hover {color: var(--main-lightblue);}

#attendance-group-label {display: inline-flex; align-items: center; padding: 2px 10px; background: #00000020; border-radius: 6px;}
#attendance-group-label svg {margin-right: 10px;}
#attendance-group-label b {font-weight: 400;}

.attendance-form-curriculum {display: flex; justify-content: space-between; gap: 6px;}
.attendance-form-curriculum-search {flex: 1 1 auto; min-width: 0;}
.attendance-form-curriculum-search input {height: 100%; min-height: 38px; border: 1px solid #aeaeae; border-radius: 4px; padding: 6px 10px;}
.attendance-form-curriculum-search .autocomplete-res {width: 100%; top: 40px; white-space: normal;}
.attendance-form-curriculum-selects {display: none;}
#curriculum-add-list-autocomplete .autocomplete-res {width: 100%; top: 38px; white-space: normal;}
.attendance-form-curriculum-section {width: calc(40% - 25px);}
.attendance-form-curriculum-theme {width: calc(60% - 15px);}
.attendance-form-curriculum-actions {display: flex; gap: 4px; flex: 0 0 auto;}
.attendance-form-curriculum-add-btn, .attendance-form-curriculum-del-btn, .attendance-form-curriculum-catalog-btn {border:1px solid #00000016; background: #fff; border-radius: 6px; outline: none; cursor: pointer; min-width: 30px; }
.attendance-form-curriculum-add-btn, .attendance-form-curriculum-catalog-btn {display: inline-flex; align-items: center; justify-content: center; background: #fff; height: 100%;}
.attendance-form-curriculum-add-btn svg {color: var(--main-blue);}
.attendance-form-curriculum-catalog-btn svg {color: #515151;}
.attendance-form-curriculum-add-btn.c-default svg {color: #515151;}
.attendance-form-curriculum-del-btn svg {color: #515151;}
.attendance-form-curriculum-add-btn:hover svg {color: #000;}
.attendance-form-curriculum-catalog-btn:hover svg {color: #000;}
.attendance-form-curriculum-del-btn:hover svg {color: #000;}
.attendance-form-curriculum-del-btn {height: 100%;}

#payment-modal-tariff-box {padding: 15px; background: #00000009;  border-radius: 6px; }
#payment-modal-tariff-auto-bill-box {padding: 15px; background: #2785571f;  border-radius: 6px; }
#payment-modal-tariff-auto-bill-box input {height: 18px; width: 18px;}
#payment-create-bill-form select, #payment-create-bill-form input, #attach-tariff-payment .btn-back {background-color: #fff;}

.dashboard-item {display: inline-block; color: #454545; height: 132px; width: 330px; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.08); text-decoration: none; margin: 0px 30px 30px 0px;}
.dashboard-item:hover {box-shadow: 0 2px 16px rgba(0,0,0,.15);}
.dashboard-item-top {display: flex; color: var(--main-blue); padding: 20px 20px 0px 20px;}
.dashboard-item-top span {position: relative; top:2px; text-transform: uppercase; display: flex; gap: 4px;}
.dashboard-icon {margin-right: 10px; color: var(--main-blue);}
.dashboard-icon svg {height: 22px; width: auto;}
.dashboard-item-content {margin: 10px 20px 20px 20px; color: #777; display: flex; flex-wrap: wrap; font-size: 12px; line-height: 0.9;}
.dashboard-item-content div { margin-bottom: 5px; margin-right: 9px;}
.dashboard-item-content div b {font-weight: 400;}
.dashboard-item-content div:last-child {margin-bottom: 0px;}
.dashboard-total {width: 100%;}
.dashboard-updated {background: #98ce445e;}

#landings-list {display: flex;}
.landings-list-item {width:400px; display: block; text-decoration: none; color: inherit; border-radius: var(--round); padding: 20px; border:1px solid #e8e8e8; cursor: pointer; margin:0px 20px 20px 0px;}
.landings-list-item img {width: 100%; border:1px solid #f5f5f5; border-radius: var(--round);}
.landings-list-item:hover {box-shadow: 0px 0px 6px 1px #00000008;}
#todomenu {padding: 20px; background-color: #FFF; width: 100%; max-width: 250px; height: 100%;}
.todolist-section {display: flex; justify-content:space-between; width: 100%; height: 100%; }
@media only screen and (max-width: 768px) {
    .todolist-section {
        flex-direction: column;
        justify-content: start;
    }

    #todomenu {
        height: auto;
        padding: 0;
        max-width: none;
    }

    .todolist {
        height: 100%;
    }

    #classroom-scroll-board-btn {width: auto;}

    #foot-und .d-flex {display: block !important;}
}

.director-new-todo {background: #00000020; display: flex; align-items: center; outline: none; border:none; border-radius: 8px; height: 42px;}
.director-new-todo:before {border-radius: 8px;}
.director-new-todo-clock {margin-right: 15px;}
.director-new-todo-person {margin-right: 15px;}
.director-new-todo-name {width:calc(100% );}
.director-new-todo-name input {background: none; padding-left: 20px !important; border: none !important; width: 100%; border:none; padding:0px;}
.director-new-todo svg {height: 20px; width: auto; cursor: pointer; transition: all .2s ease-in-out;}
.director-new-todo svg:hover {color: var(--main-blue);}
.todo-item { margin-top: 1.25rem; position: relative; padding-left: 20px; transition: all .1s ease-in-out; height: 42px; border-radius: 8px;  display: flex; align-items: center;}
.todo-item-checkbox-area {position: absolute; left: 0px; top:0px; height: 100%; width: 45px; z-index: 0;}
.todo-item {cursor: pointer; background: #fff; }
.todo-item-name  {outline: none;  height: 25px; line-height: 25px;  }
.todo-item-user-ava  { height: 22px; line-height: 22px; margin-right: 1rem; display: flex; }
.todo-item-user-ava img, .todo-item-user-ava svg {width: 22px; height: 22px; border-radius: 50%;}
.todo-item-checkbox, .todo-item-checkbox-none {height: 20px; position: relative; z-index: 1; width: 20px; border:1px solid #c0c0c0; border-radius: 4px;margin-right: 15px;}
.todo-item-important {display: inline-flex; align-items: center; height: 25px; margin-right: 15px;}
.todo-item-important svg {color:#dedede; height: 20px; width: auto;}
.todo-item-important svg:hover, .todo-item-important-ac svg {color: var(--main-orange);}
.todo-item-name {width: calc(100% - 70px);}
.todo-item:hover {box-shadow: 0 2px 8px rgba(0,0,0,.15);}
.tido-item-deadline {position: absolute; right: 30px; height: 100%; display: flex; align-items: center;}

#add-todo-input::placeholder {color: #999; }
#todo-show-done-btn {padding: 5px 20px; transition: all .1s ease-in-out; cursor: pointer; background: #ffffff60; color: #00000060; border-radius: 24px; display: inline-flex; align-items: center;}
#todo-show-done-btn svg {margin-left: 10px; transform: rotate(270deg); transition: transform 0.3s ease; position: relative;}
#todo-show-done-btn:hover, .todo-show-done {background: #ffffff80 !important; color: inherit !important;}
.todo-show-done svg { transform: rotate(360deg) !important;}

.todolist { padding: 20px; padding-bottom: 40px; width: 100%; background: linear-gradient(45deg, #f5f5f5, #9f783669); height: 100%;}
#director-right.todolist-app {padding: 0px;}
#todobox {}

#todomenu ul {padding-left: 0px; list-style: none;}
#todomenu li {display: flex; align-items: center; cursor: pointer; padding: 15px 20px;  border-bottom: 1px solid #00000008;}
#todomenu li:hover, .todomenu-ac {background: #00000020;}
#todomenu li svg {margin-right: 10px;}
.todolist-footer.director-collapse-menu-footer {margin-left: calc(var(--todomenu-width) + 68px) !important;}

#tolist-item-settings {display: inline-flex; align-items: center; border-radius: 6px; padding: 5px 10px; background: #00000015; color: #515151; cursor: pointer;}
#tolist-item-settings svg {color: #515151;}
#tolist-item-settings:hover {background: #00000025;}

.todolist-done-items .todo-item-name {text-decoration: line-through;}
.todolist-done-items .todo-item {opacity: 0.7;}
.todolist-done-items .todo-item-checkbox, .todolist-items .todo-item-checkbox:hover {background-position: center; background-image: url("data:image/svg+xml,%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");}
.todo-item-checkbox-none.todo-checkbox-switch:hover, .todo-item-checkbox.todo-checkbox-switch {background-position: center; background-image: url("data:image/svg+xml,%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");}
.todo-item-checkbox.todo-checkbox-switch:hover, .todolist-done-items .todo-item-checkbox:hover {background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23cccccc' 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");}
.todo-details-popup-info b {font-weight: 500;}
.todo-details-popup-del:hover svg {color: red;}

#classroom-border-switch-initiator {display: flex; align-items: center; border-radius: 6px; padding-left: 10px;; justify-content: space-between;  background: #e6e6e6}
#classroom-border-switch-initiator label {display: flex; align-items: center; padding: 3px 5px; border-radius: 6px; cursor: pointer; justify-content: space-between; gap: 5px; background: #fff;;}
#classroom-border-switch-initiator input {cursor: pointer;}
#classroom-border-switch-initiator #classroom-border-switch-wrap {width: calc(100% - 50px);;}

#director-support-ticket {background: linear-gradient(45deg, #d2d7de, #d1dbe3); border-radius: 6px; padding: 30px; width: 100%; max-width: 750px;}
#director-support-ticket div {margin-bottom: 20px;}
#director-support-ticket div b {display: block; font-weight: 500; margin-bottom: 7px;}
#director-support-ticket input, #director-support-ticket textarea {background: #fff; outline: none; border: none; padding: 10px; width: 100%;}
#director-support-ticket-file {color: var(--main-lightblue); display: inline-flex; align-items: center; cursor: pointer; font-size: 14px;}
#director-support-ticket-school-file a, .director-support-ticket-item-file a {color: var(--main-lightblue); cursor: pointer; font-size: 14px;}
.director-support-ticket-item-file svg {height: 18px; width: auto;}
#director-support-ticket-file svg {height: 20px; width: auto; margin-right: 5px;}
#director-support-ticket button {width: 200px; padding: 10px;}
#director-tickets {width: 100%; max-width: 750px;}
.director-tikets-subject svg {position: relative; top:-1px; margin-right: 3px; }
.director-ticket-del svg {color: var(--main-gray);}
.director-ticket-del svg:hover {color: var(--main-danger);}
.support-ticket-date {font-size: 12px; color: #777;}
#direcotr-support-ticket-subject {display: flex; }

.director-col-right {width: calc(100% - 360px); padding: 0px 0px 0px 20px;}
.director-col-left {width: 340px;}

@media only screen and (max-width: 768px) {
    .director-learning-plan__wrapper {
        flex-direction: column-reverse;
        justify-content: center;
        gap: 16px;
    }

    .director-note-box.note-box__learning-plan {
       max-width: none;
       width: 100%;
    }

    .director-choose-section {
        width: 100%;
        padding-left: 0;
    }

    .director-tasks-list {
        width: 100%;
    }

    .save-btn__wrapper {
        flex-direction: column;
    }
}

@media only screen and (max-width: 576px) {
    #director-header {
        padding-top: 24px;
        min-height: 120px;
        flex-direction: column;
        align-items: flex-start;
    }

    #director-right {
        margin-top: 130px;
    }
}


.director-faq-item {padding: 20px; background: #2f374654; border-radius: 6px; margin-bottom: 25px; box-shadow: 1px 1px 1px 0px #cecece;}
.director-faq-ques {width: calc(100% - 100px);}
.director-faq-ord {width: 80px; margin-left: 15px; background-color: #fff; border-radius: 6px;}

#videos-box {display: flex; justify-content: space-between;}
#video-left {width: 240px;}
#video-left a {display: block; background: #f5f5f5; position: relative; margin-bottom: 10px; border-radius: 4px; color: #454545; padding: 5px 10px; text-decoration: none;}
#video-left a b {margin-left: 4px; position: absolute; right: -27px; color: #454545; background: #00000020;  font-size: 12px;  display: inline-flex; width: 25px; height: 25px; justify-content: center; align-items: center; padding: 1px 3px; border-radius: 50%;}
#video-right {width: calc(100% - 300px);}
/*#video-left a:hover, .video-cat-ac {background: #4397da !important; color: #fff !important;}*/
#add-video-box input, #add-video-box textarea {background: #fff;  border-radius:4px; border: 1px solid #bbb; padding: 5px 10px; outline: none;}

.video-img {overflow: hidden; height: 200px; display: flex; justify-content: center;}
.video-item {width: calc(33.3% - 20px); cursor: pointer; display: inline-block; transition: all .2s ease-in-out; border-radius: var(--round); margin: 0px 20px 20px 0px;  }
.video-img {min-height: 100px; max-width: 100%;  width: 100%; background: #f5f5f5; border-radius: 4px;}
.video-img img {border-radius: 3px;}
.video-item textarea {padding: 5px; cursor: pointer; border: none; outline: none; background: #fff; width: 100%; height: 80px;}

#group-form-remove {position: absolute; right: 0px; top:0px; height: 100%; display: flex; align-items: center; cursor: pointer}
#group-form-remove svg {color: #999;}
#group-form-remove:hover svg {color: red;}
.group-student-remove svg {color: #00000060;}
.group-student-remove:hover svg {color: #000;}

.action-school-item {padding: 30px 20px 20px 20px; position: relative; background: #f9f9f9; border:1px solid #dedede; border-radius: 6px; margin-bottom: 20px;}
.action-school-item  .action-date {position: absolute; left: 50px; top:10px; color: #777; font-size: 12px;}
.action-icon {position: absolute; left: 20px; top:3px;}
.action-icon svg {height: 18px; width: auto;}
.action-icon-ins {color: #2d7ab3;}
.action-icon-upd {color: #278557;}
.action-icon-del {color: red;}

.director-col2 {display: flex; justify-content: space-between;}

.director-menu-item {background: #e6e6e6; transition: all .2s ease-in-out; display: flex; justify-content: space-between;  padding: 10px 12px 10px 15px; border-radius: 6px; position: relative; cursor: pointer; margin-bottom: 15px;}
.director-menu-item:hover {background: #00000030;}
.director-menu-item b {width: 15px; font-weight: 400; text-align: right; color: #808080;}
/*.director-menu-item span {width: calc(100% - 20px);}*/
.director-menu-selected {background: linear-gradient(45deg, #3a83bd, #4397da) !important; color: #fff !important;}
.director-menu-selected b {color: #fff;}
.director-note-box {height: 150px; background: #f8f8f8; width: 100%; max-width: 400px; padding:50px 0px; margin: 0 auto; text-align: center; border-radius: 16px; align-items: center; justify-content: center; font-size: 16px; color: #515151;}
.director-note-box.note-box__learning-plan {margin: 0;}

#director-page-content #textEditor {height: 300px;}

.director-teacher-schedule {display: flex; flex-wrap: wrap; gap: 24px;}
.director-teacher-schedule .teacher-schedule-day {background: #f5f5f5; width: 100%; max-width: 1200px; border-radius: 6px;  padding: 12px; display: flex; flex-direction: column; gap: 16px;}
.director-teacher-schedule .teacher-schedule-day:nth-child(2n) {margin-right: 0px;}
/* .director-teacher-schedule .teacher-schedule-day select {background-color: #fff; width: 200px; padding-right: 26px;} */
.director-teacher-schedule .teacher-schedule-day select {background-color: #fff;}
.director-teacher-schedule .teacher-schedule-day  .director-schedule-lesson-item {align-items: center; display: flex; border-bottom: none;}
.teacher-schedule-btns-wrapper {display: flex; align-items: center;  gap: 16px;}


/* .director-teacher-schedule .teacher-schedule-day .teacher-schedule-lesson-remove {width: 30px; } */
.director-teacher-schedule .teacher-schedule-day .teacher-schedule-lesson-remove svg {cursor: pointer;}
.director-teacher-schedule .teacher-schedule-day .teacher-schedule-lesson-remove svg:hover {color: red;}
.director-teacher-schedule .teacher-schedule-day .director-schedule-lesson-item b input {width: 100px;}
.director-teacher-schedule .teacher-schedule-day-list {min-height: inherit !important;}
.director-schedule-branch-select {max-width: 100px;}

.faq-item {background: #e3e1d1; position: relative; border-radius:32px; margin-bottom: 16px;}
.faq-item svg {position: absolute; cursor: pointer; right: 25px; top:20px; height: 25px; width: auto; transform: rotate(0deg); transition: transform 0.3s ease;}
.faq-ques-open svg { transform: rotate(180deg);}
.faq-ques {margin-bottom: 0px; cursor: pointer; display: block; padding: 20px 30px 20px 30px;}
.faq-ques {font-family: inherit;}
.faq-answ {display: none; padding: 0px 30px 30px 30px; }

.available-slots {border:1px solid #dedede; padding: 20px; border-radius: 6px;}
.available-slots-list span {display: inline-block; cursor: pointer; background: #00000012; border-radius: 12px; margin: 20px 20px 0px 0px; color: #000; padding: 10px 10px;}
.available-slots-list span:hover {background: #00000020;}
.available-slots-title {display: inline-flex; align-items: center; border-radius: 6px; color: #454545; font-size: 18px;  background: linear-gradient(45deg, #499bdb4d, #98ce4429); padding: 10px 15px;}
.available-slots-title svg {margin-right: 5px;}

#curric-themes-box {list-style: none; padding: 0px; width: 500px; max-width: 100%;}
#curric-themes-box li {display: block; cursor: pointer; background: #00000010; padding: 10px; border-radius: 6px; margin-bottom: 10px;}
#curric-themes-box li:hover {background: #00000020;}
#curriculum-del-theme-btn {border-bottom: 1px dotted; cursor: pointer;}
#curriculum-del-theme-btn:hover {color: red;}
/* .title-sort-btn {color: #007bff; cursor: pointer; display: flex; align-items: center;} */
.title-sort-btn {color: #4982ac; cursor: pointer; display: flex; align-items: center;}
/* .title-sort-btn:hover {color: #0056b3;} */
.title-sort-btn:hover {color: #2286d0;}
.title-sort-btn svg {color: #515151; height: 12px; width: auto; margin-left: 5px;}

#teachers-schedule-box {display: flex; justify-content: space-around;}
#teacher-schedule {position: relative;}
.teacher-schedule-load:before {display: block; content: ''; border-radius: 12px; width:calc(100% + 20px); height: calc(100% + 40px); position: absolute; left: -10px; top:-20px; background: #ffffff20; backdrop-filter:blur(1px);}
.teacher-schedule-item {width: 150px; cursor: pointer;}
.teacher-schedule-item-img {width: 150px; position: relative; height: 200px; overflow: hidden; border-radius: 12px; border:4px solid var(--main-cover1);}
.teacher-schedule-item-img:before {display: block; content: ''; position: absolute; left: 0px; top:0px; width: 100%; height: 100%; border-radius: 12px; background: #00000040;}
.teacher-schedule-item-img img {width: 100%;   height: 100%;   object-fit: cover; border-radius: 10px;}
.teacher-schedule-item-name {text-align: center; margin-top:10px; font-family: EtoMoiFont; font-size: 21px;}
.teacher-schedule-selected .teacher-schedule-item-img, .teacher-schedule-item-img:hover {border-color: #ffc720 !important;}
.teacher-schedule-selected .teacher-schedule-item-img:before {display: none !important;}
.teacher-schedule-days {display: flex; flex-wrap: wrap; justify-content: space-around;}
/* .teacher-schedule-day {background: linear-gradient(45deg, #f5f5f5, #fcb64126); margin-bottom: 25px;  border-radius: 6px; width: 300px;} */
.teacher-schedule-day-name { text-transform: uppercase; display: flex; align-items: center; padding: 8px 10px;  font-weight: 500; border-radius: 6px; text-align: center;}
.teacher-schedule-day-name svg {margin-right: 10px; height: 20px; width: auto; color: #00000070;}
.teacher-schedule-day-list { min-height: 100px;}
.teacher-schedule-day-list div {display: flex; justify-content: space-between;}
.teacher-schedule-day-list div:last-child {border-bottom: 0px;}
.teacher-schedule-day-list div b {display: block; width: 105px; font-weight: 500;}
/* .teacher-schedule-day-list div span {display: block; width: calc(100% - 115px);} */
.teacher-schedule-day-list div span {display: block; width: 100%}

#news-section {display: flex; justify-content: space-between;}
#news-left {width: 350px;}
#news-menu {background: #ffff; border-radius: 6px; padding: 10px 20px;}
.news-menu-item {padding: 10px 0px 20px 0px; margin:10px 0px 10px 0px; border-bottom: 1px solid #f0f0f0;}
.news-menu-item i {display: block; font-style: normal; color: #777; margin-bottom: 5px;}
.news-menu-item i span {color: #777;}
.news-menu-item b {font-weight: 400;}
#news-menu  a {text-decoration: none; color:#454545; display: block;}
.news-menu-item:hover, .news-menu-ac {color: rgba(13,110,253) !important;}
.news-menu-item:last-child {border-bottom: none;}
#news-right {width: calc(100% - 380px);}
#news-right img {max-width: 100%;}
.news-box {background: #fff; width: 100%; padding: 20px; margin-bottom: 30px; border-radius: 6px; border:1px solid #eee;}
.news-title {font-weight: 500; font-size: 21px; margin-top:0.5rem;}
.news-date {color: #777; font-size: 12px;}
.news-img {height: 450px; margin-top: 20px; display: block;}
.news-img img {width: 100%;   height: 100%;   object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px #e7e8ec;}
.news-box-top {display: flex; align-items: center; justify-content: space-between;}
.news-box-top a {display: block;}
.news-box-top a svg {height: 16px; width: auto; color: var(--main-gray);}
.news-box-top a svg:hover {color: var(--main-blue);}
.news-text b, .news-text strong {font-weight: 600;}
.news-single-img img {max-width: 100%; border-radius: 3px;}
.news-perform-right {background: #fff; border-radius: 6px; padding: 30px; border:1px solid #eee;}
.news-perform-right h1 {font-size: 28px; font-weight: 400;}

.table-border {border-collapse: collapse; border-radius: 6px;}
.table-border td {padding: 5px 10px; border:1px solid #e4e4e4;}
.table-border input[type="text"], .table-border input[type="number"] {border: none; width: 100%; background: #f5f5f5; padding: 10px 15px; border-radius: 6px;}
.table-td-title {border:none !important;}
.table-valign-middle td {vertical-align: middle;}
.table  tr td:first-child {padding-left: 12px;}
.table.table-borderless {border-bottom: 1px solid #f8f8f8;}

.select-chevron {position: relative;}
.select-chevron:after {display: block; content: ''; position: absolute; top:0px; right: 15px; width: 10px; height: 100%; background-size: 12px; background-position: center; background-repeat: no-repeat; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%23444444' class='LanguageWidget-module__arrowIcon--3f6ba'%3E%3Cpath fill-rule='nonzero' d='M10.908 14.623l6.139-6.14c.5-.499.5-1.315 0-1.815l-.172-.174a1.29 1.29 0 0 0-1.817 0L10 11.553l-5.06-5.06a1.288 1.288 0 0 0-1.814 0l-.173.175c-.5.5-.5 1.316 0 1.816l6.14 6.139a1.288 1.288 0 0 0 1.815 0'%3E%3C/path%3E%3C/svg%3E"); }

table thead a {text-decoration: none;}
table thead a:hover {text-decoration: underline;}

#header-week-left {background: #fff; border-radius: 3px; border: none; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
#header-week-left:hover, #header-week-right:hover {background: #00000008;}
#header-week-right {background: #fff; border-radius: 3px; border: none; height: 100%; width: 35px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
#header-week-left svg, #header-week-right svg {color: #515151;}
#header-week-left:hover svg, #header-week-right:hover svg {color: #000;}
#header-week-right {position: absolute; right: 0px; top:0px;}

#tutorial-top-banner {  height: 80px; border-radius:6px;  background: url(/images/bg-pattern.jpeg); background-size: 370px;  display: flex;  position: relative; margin-bottom: 30px;;}
#tutorial-top-banner h1 {font-size: 32px; position: relative; z-index: 1; }
#tutorial-top-banner::before {content: ''; z-index: 0; position: absolute; left: 0px; top:0px; width: 100%; height: 100%; background: #c3d8ea21; border-radius:6px; }

/* #help-menus { width: calc(100% - 30px); position: relative; left: 30px; display: flex; flex-direction: row;  flex-wrap: wrap;  justify-content: space-between;} */
#help-menus a {display: block; font-size: 15px; color: #1b1b1b;}
/* .help-all-list {width: 30%; margin-bottom: 30px;} */
#help-menus {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3 колонки */
   gap: 25px; 
  align-items: start; /* чтобы выровнять верхушки */
}

.help-item {
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.help-all-list a {text-decoration: none;}
.help-all-list a:hover, .help-left-list a:hover {color: var(--link-color) !important;}
#help-menus  .help-all-list a:visited {color: #777;}
.help-all-list b {display: inline-block; font-weight: 500; text-transform: uppercase; padding: 5px 10px; background: #2785574a; color: #000; border-radius: 3px; font-weight: 300; font-size: 15px;}
#help-top-img {overflow: hidden; height: 210px; border-radius: 6px; position: relative;}
#help-top-img img {width: 100%; border-radius: 6px;}
#help-logo {position: absolute; left: 15px; top:15px; padding: 10px 20px; background: #00000060; color: #fff; border-radius: 4px; font-weight: 300; font-size: 19px;}
.hotel-menu {background:linear-gradient(45deg, #f5f5f5, #1971ac4d); }
.hotel-menu a {}
.fixed-menu-scroll #head-menu a {color: #262626 !important;}

#help-left-menu b {display: block; cursor: pointer; font-weight: 400; padding: 10px 10px; background: #f4f4f4; margin-bottom: 8px; border-radius: 6px; text-decoration: none; }

#help-left-menu a {display: block; padding: 6px 0px; margin: 3px 0px; color: #1b1b1b;}
#help-left-menu b:hover, .help-left-open .help-left-list-title  {background: #dedede !important;}
.page-left-ac, .help-left-ac {background: #033e74 !important; color: #fff !important; position: relative;}
.page-left-ac:after {content: '\e96c'; display: block; font-size: 15px; color: #fff; position: absolute; right: 10px; top:10px; font-family:'icomoon';}
#simple-page {color: #024074; line-height: 1.2}
.help-left-list-links {display: none;}
.help-left-list div{ margin-left: 10px; margin-bottom: 10px;}
.help-left-list a {text-decoration: none;}
.help-sel-link {border-left: 2px solid #ff750d; padding-left:7px !important; padding-right: 5px !important; position: relative;}
.help-left-open .help-left-list-links {display: block;}




.label-select {display: inline-flex;  padding: 5px 5px 5px 9px; background: #f5f5f5; border:1px solid #eeeeee;  border-radius: 6px; align-items: center;}
.label-select select, .label-select input { cursor: pointer; height: 40px; background-color: #fff; border-radius:6px; border:1px solid #00000010 !important; padding: 5px 10px; min-width: 200px;}
.label-select b {margin-left: 10px;}
.label-select svg {height: 22px; width: auto; }
/* .label-select .idate-box {margin-left: 8px;} */
.select-icon-light svg {color: #4982ac !important;}

.messengerIcons svg {height: 18px; width: auto; margin: 0px 2px;}
.telegram-link {color: #229ED9;}
.whatsapp-link {color: #075e54;}

.label-btn {display: inline-flex; gap: 7px; align-items: center; cursor: pointer; background: #00000020; border-radius: 6px; padding: 5px 10px;}


#courseLidersModal table tr:last-child {border-bottom: 1px solid #fff;}

@keyframes growAndShrink {
    0% {  transform: scale(1); }
    50% {     transform: scale(1.12);  }
    100% {     transform: scale(1); }
}

@keyframes blinkAnimBlack {
    0% {background-color: rgba(0, 0, 0, 0.0);}
    50% {background-color: rgba(0, 0, 0, 0.1);}
    100% {background-color: rgba(0, 0, 0, 0.0);}
}

.effect-scale { transition: transform 0.6s ease-in-out;  animation: growAndShrink 0.6s ease-in-out;}
.effect-blink { transition: transform 0.4s ease-in-out;  animation: blinkAnimBlack 0.4s ease-in-out;}
/*.effect-blink2 { transition: transform 0.4s ease-in-out;  animation: blinkAnimBlack 0.4s ease-in-out;}*/


@media only screen and (max-width: 1400px) {
    #top-menu-results {display: none;}
    #head-links a:not(.head-logo), .header-user-menu a:not(ul a) {margin-left: 8px; padding: 5px 5px;}
}

.xl-px-30 {padding-left: 30px; padding-right:30px;}
.xl-px-10 {padding-left: 10px; padding-right:10px;}
@media (max-width: 1500px) {

}

.director-payments__form {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Dashboard BEGIN */

.dashboard-item .fast-start_cta {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    box-sizing: border-box;
}

.report-payments__wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

#payment-bills-res-data {
    overflow-x: scroll;
}

.form__wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.header-site-menu__wrapper {
    display: flex;
    align-items: center;
}
/* d-flex align-items-center justify-content-between */
.attendance-lesson__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

 
.attendance-form-schedule {
    display: flex;
    justify-content: space-between;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border:1px solid #515151;
}

.attendance-form-schedule__section {
    width: 50%;
    padding: 1rem;
}

.attendance-form-schedule__section:last-child {
    border-radius: 0px 6px 6px 0px;
}

.attendance-form-schedule__time {
    display: flex;
    /* justify-content: space-between; */
    margin-bottom: 1rem;
}

.attendance-form-schedule input, .attendance-form-schedule textarea, .attendance-form-schedule select {border:1px solid #d5d5d5 !important;}

.attendance-lesson__btn {
    margin-left: 1rem;
}

.btn-wrapper {
    position: relative;
    display: inline-block;
}

.custom-popup {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #212529;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    box-shadow: 2px 2px 2px 0px #dedede;
    max-width: 360px;
}

.btn-wrapper:hover .custom-popup {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

.custom-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #cecece transparent transparent transparent;
    /* box-shadow: 1px 1px 1px 0px #cecece; */
}




/* #students-list-box, #payment-bills-res-data, .table-mob, #attendance-students-form-table {
    overflow-x: scroll;
} */
#groups-list-box,
#students-list-box, 
#payment-bills-res-data, 
.table-mob, 
#attendance-students-form-table {
    /* overflow-x: auto; */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: transparent transparent; /* Прозрачный скролл */
    transition: scrollbar-color 0.3s;
    margin-bottom: 12px;
}

/* Для WebKit (Chrome, Safari, Edge) */

#students-list-box::-webkit-scrollbar, 
#payment-bills-res-data::-webkit-scrollbar, 
.table-mob::-webkit-scrollbar, 
#attendance-students-form-table::-webkit-scrollbar {
    height: 8px; /* Высота горизонтального скроллбара */
    background: transparent; /* Прозрачный фон */
}

#students-list-box::-webkit-scrollbar-thumb, 
#payment-bills-res-data::-webkit-scrollbar-thumb, 
.table-mob::-webkit-scrollbar-thumb, 
#attendance-students-form-table::-webkit-scrollbar-thumb {
    background: transparent; /* Прозрачный ползунок */
    border-radius: 4px;
    transition: background 0.3s;
}

/* При наведении — скролл становится видимым */

#students-list-box:hover, 
#payment-bills-res-data:hover, 
.table-mob:hover, 
#attendance-students-form-table:hover {
    scrollbar-color: gray lightgray; /* Firefox */
}


#students-list-box:hover::-webkit-scrollbar-thumb, 
#payment-bills-res-data:hover::-webkit-scrollbar-thumb, 
.table-mob:hover::-webkit-scrollbar-thumb, 
#attendance-students-form-table:hover::-webkit-scrollbar-thumb {
    background: gray; /* Цвет скролла при hover */
}

.attendance-lesson__buttons {
    display: flex;
}

.coach-profile__buttons {
    width: 100%;
}

@media only screen and (max-width: 1128px) {
    .attendance-form-schedule__time {
       flex-direction: column;
    }

    /* #theme-box {
        flex-direction: column;
    } */

    #theme-left {width: 100%; max-width: none;}
}


@media only screen and (max-width: 969px) {
    .director-teacher-schedule .teacher-schedule-day  .director-schedule-lesson-item {
        flex-wrap: wrap;
    }

    #attendance-students-form-table {
        overflow-x: auto;
    }

    #director-left-menu, #profile-left-menu {
        height: calc(100vh - 90px);
    }
    #director-left-menu {
        top: 90px;
    }

    #director-header {
        height: 90px;
    }
    #director-right {
        margin-top: 90px;
    }

}

@media only screen and (max-width: 768px) {

    #director-left-menu, #profile-left-menu {
        height: calc(100vh - 120px);
    }
    #director-left-menu {
        top: 120px;
    }

    #director-header {
        height: 120px;
    }
    #director-right {
        margin-top: 120px;
    }

    #director-logo {
        width: 100%;
    }

    #classroom-top-btns-section {margin-top: 30px;}
    #classroom-chat-top .chatbox-messages {padding-bottom: 70px;;}

    .teacher-schedule-btns-wrapper {flex-direction: column;}

    .attendance-lesson__buttons {
        gap: 1rem;
    }

    #news-right {
        width: 100%;
    }

    .fast-start__wrapper {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    #director-dashboard {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .dashboard-item {
        width: 100%;
        margin: 0;
    }

    .attendance-lesson__top {
        flex-direction: column;
        margin-bottom: 1rem;
    }

    .coach-profile__buttons .status-btn {
        width: 100%;
    }

    .coach-profile__buttons {
        display: flex;
        gap: 1rem;
    }

    .attendance-lesson__btn {
        margin: 0;
    }

    .attendance-lesson__top div {
        width: 100%;
        margin: 0 auto;
    }

    .attendance-form-schedule {
        flex-direction: column;
        justify-content: center;
        gap: 16px;
    }

    .attendance-form-schedule__section {
        width: 100%;
    }

    .attendance-form-schedule__time {
        flex-direction: row;
    }

    #applicat-markers {
        flex-wrap: wrap;
        gap: 16px;
    }

    body.no-scroll {
        overflow: hidden;
        height: 100vh;
        position: fixed;
        width: 100%;
    }

    .director-payments__form {
        flex-direction: column;
    }

    .director-payments__form div{
        width: 100%;
    }


    #director-right {
        margin-left: 0;
        width: 100%;
        margin-top: 120px;
        padding: 16px 12px;
    }

    #director-left-menu {
        z-index: 101;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 280px;
        transform: translateX(-100%); 
        transition: transform 0.3s ease-in-out;
        padding-bottom: 180px;
    }

    #director-left-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #dedede;
        opacity: 0.5;
        backdrop-filter: blur(10px);
        z-index: 100;
    }

    #director-left-overlay {
        display: none;
}

    .director-left-menu-item.separate {
        margin-bottom: 20px;
    }

    #director-left-menu.open {
        transform: translateX(0); 
    }

    #director-left-menu.visible,
    #director-left-overlay.visible {
        display: block;
    }

    /* .form-control {
        max-width: 360px !important;
    } */

    .form-control:not(.ql-editor) {
        max-width: 360px !important;
    }

    .mob-mt-3 {margin-top: 1rem;}

    /* #students-list-box, #payment-bills-res-data, .table-mob, #attendance-students-form-table {
        overflow-x: scroll;
    } */

    .inner-input {
        width: 100%;
    }

    .form__wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .form__wrapper div, button {
        width: 100%;
    }

    .label-select-control {
        width: 100%;
    }

    .label-select-control input, select {
        width: 100%;
    }

    .label-select.me-3 {
        width: 100%;
    }

    .label-select.me-2 {
        width: 100%;
    }

    #schedule-week-head-dates {
        gap: 4px;
    }

    #schedule-week-head-dates div {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        padding: 0;
    }

    .label-select select, .label-select input {
        min-width: auto;
    }

    #invite-form-head-filters {
        flex-direction: column;
        gap: 16px;

    }

    #invite-form-head-filters .label-select {
        width: 100%;
    }

    #classroom-invite-student-list .master-card {
        width: 100%;
    }

}

@media only screen and (max-width: 576px) {
    #director-header {
        min-height: 120px;
    }

    #director-right {
        margin-top: 130px;
    }

    .attendance-lesson__buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }


}

@media only screen and (max-width: 480px) {
    .attendance-form-schedule__time {
        flex-direction: column;
    }
}

/* Dashboard END */

@media only screen and (max-width: 768px) {
    body {background: #fff;}
    .mainbody {padding-top:0px !important;}
    .mainbox {padding: 0px;}

    #mob-menu {display: flex; width: 150px;}
    #mob-menu-btn {display: inline-flex; justify-content: end;}

    #director-footer {
        margin-left: 0;
    }

    #classroom-top-btns-wrap, .container-classroom {padding: 0px !important;}

    .mob-hide {display: none !important;}
    .mob-d-block {display: block !important;}
    .mob-w-100 {width: 100% !important;}

    a {text-decoration: none;}

    .container {padding-left: 1rem; padding-right: 1rem;}

    .px-30 {padding-left: 20px; padding-right: 20px;}

    header {height: 60px; position: fixed; top:0px; left: 0px; width: 100%; z-index: 99; background: #fff; box-shadow: 1px 0px 1px 0px #bababa;}

    .callback-form-content {display: block;}

    .grid-item { flex: 1 1 100%; }

    .level-content {width: 100%;}

    #main-top h1 {font-size: 28px; top:80px;}
    .mob-hide {display: none !important;}

    #teachers-schedule-box .teacher-schedule-item:not(.teacher-schedule-selected) {display: none;}

    #benefits, #task-types, #about, #main-reviews-list, .cacllback-form, #foot-und, .tasks-task-type .d-flex, .task-cat, .info-text,
    .pd-inp-line, #learning-page-content, #contact-page-content, #task-section .row, #section-levels, #theme-box,
    #videos-box, #master-section, #education-prices, .teacher-item, #teach-application, #teach-application-right-top, .teacher-schedule-days,
    #news-section, .main-review-col2, #classroom-top-btns-box, #classroom-top-themes, #classroom-message-edit {display: block !important;}

    #classroom-top-btns-box .light-shadow {box-shadow: none; padding: 0px !important;}

    .teacher-schedule-day {margin-bottom: 30px; padding: 1px;}

    #classroom-top-themes .w-400 {width: 100% !important;}

    #main-map, #main-text, .info-text-text, .pd-item, #learning-page-content [class^="col-"], #contact-page-content [class^="col-"],
    #task-section [class^="col-"], #theme-left, #theme-right, #game-move-type, #videos-right, #videos-left, #master-page-right,
    #master-page-left, .callback-form-left, .callback-form-right, .teacher-item-right, .teacher-item-left,
    .teacher-item-img, #teach-application-left, #teach-application-right, #teach-application-name, #teach-application-img, .main-review-left,
    .main-review-right, #langs-list a {width: 100%;}

    #classroom-message-edit input {width: 100%;}
    #classroom-message-edit span {width: 100%; margin-top:10px;}

    #classroom-top-themes div {width: 100% !important; margin-left: 0px !important; margin-top:10px;}
    #classroom-top-themes .d-flex {display:block !important;}

    /* #classroom-chat-top #classroom-chat {border: 1px solid #00000020; margin-left:0px; margin-top:20px;} */
    #classroom-chat-top .chatbox-messages {height: 270px !important;}

    .game-left-section, .game-right-section {max-width: 100% !important;}
    #classroom-right {width:100%; }



    #classroom-drawing-buttons {flex-wrap: nowrap;}

    #contact-page-content [class*="ps-"], #learning-page-content [class*="ps-"] {padding-left: 1rem !important;}
    #contact-page-content  #map, .teacher-item-left  {margin-bottom: 25px;}

    .chess-coach__content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* .callback-form-content {padding-bottom: 320px;} */
    .cacllback-form-img { position:unset; height: 280px; max-width: 100%; left: 0px; right: inherit; display: block;}
    .cacllback-form-london-bus {right:inherit; left:30px;}

    .callback-form-right, #classroom-message-edit {margin-left: 0px !important; margin-top:20px;}
    .callback-form-left {text-align: center;}

    .teacher-item-img, .teach-application-img {height: 300px;}

    #teach-application-name {margin-top:30px;}

    #task-section .highlight-box {margin-top: 30px;}
    #task-section .section-bottom {width: 100%; margin: 20px 0px 0px 0px;}

    .theme-task {width: 100%; margin-bottom: 30px;}
    #theme-box #theme-progress, .education-price {width: 100% !important; margin-bottom: 30px; max-width: 100%;}

    .news-box, .news-perform-right {border:1px solid #dedede;}
    .news-img {height: inherit;}
    .news-img img {object-fit:inherit; height: auto; width: 100%;}

    #education-price-section {padding:30px 0px 30px 0px;}

    #theme-box #theme-menu {display: none;}

    .task-type, .cacllback-form div, .main-review, .task-cat, .video-item {width: 100%; margin-bottom: 25px;}

    .video-item-name {height: auto;}

    .level-content {max-width: 100%; margin-bottom: 40px;}

    #login-form-center, #reg-view-11, #reg-view-2, #reg-view-3 {max-width: 100%;}
    .win-popup, .window-md {width: 100% !important;}

    .info-text-icon {position: absolute; left: 10px; top:10px; width: auto; display: none;}
    .info-text-icon svg {height: 20px; width: auto;}

    #foot-contact {text-align: center; margin-top:0px; width: 100%;}
    #foot-contact span {display: block; margin-bottom: 10px; margin-right: 0;}

    #mob-menu .reg-btn {display: none;}

    .task-cat {padding-top: 10px;}

    #main-top {height: 270px; border-radius: 0px;}
    .task-type-text b {font-weight: 400; font-size: 24px;}
    .benefit {width: 100%; margin-bottom: 25px;}

    .main-review {padding-top: 45px !important;}
    .main-review-top { display: block;  position: relative;}
    .main-review-rating {position: absolute; top:-35px; left: 0px;}
    .main-review-who {justify-content: left;}
    .main-review-right  {margin-top:30px;}

    #foot-und {text-align: center;}
    #foot-und a, #foot-und span {display: inline-block; margin: 3px 0px;}

    #foot-colums {padding: 5px; padding: 10px; flex-direction: column; width: 100%;}
    /* .foot-column {width: 60%; margin-bottom: 30px;} */
    .foot-column {width: 100%; margin-bottom: 30px;}
    /* .foot-column:nth-child(even){width: 40%;} */

    .tasks-task-type {padding-top: 40px;}
    .tasks-task-type h2 {position: absolute; top:20px; left: 20px;}



    .pt-mob-0 {padding-top: 0px !important;}
    .pt-mob-1 {padding-top: 10px !important;}
    .pt-mob-2 {padding-top: 20px !important;}
    .pt-mob-3 {padding-top: 30px !important;}

    .mt-mob-0 {margin-top: 0px !important;}
    .mt-mob-1 {margin-top: 10px !important;}
    .mt-mob-2 {margin-top: 20px !important;}
    .mt-mob-3 {margin-top: 30px !important;}

    .mb-mob-0 {margin-bottom: 0px !important;}
    .mb-mob-1 {margin-bottom: 10px !important;}
    .mb-mob-2 {margin-bottom: 20px !important;}
    .mb-mob-3 {margin-bottom: 30px !important;}

    .rus-desktop-media {
        display: none !important;
    }

    .rus-mobile-media {
        display: block !important;
        order: -1; /* Поднимает блок вверх */
    }

    .quiz-container {
        flex-direction: column; /* Изменяет направление расположения на столбцы */
    }
}


.highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(161, 255, 0, 0.3); /* Прозрачная зеленая пленка */
    z-index: 1; /* Чтобы пленка была поверх клетки */
}


#regGameButton #game-not-auth {
    padding: 0; /* Сбрасываем отступы */
    text-align: initial; /* Сбрасываем выравнивание текста */
    background: none; /* Убираем фоновый цвет */
  }


.check {
    background-image: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.7) 0%, rgba(231, 0, 0, 0.7) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
}


.ck-editor__editable {
    min-height: 200px; /* Задаем минимальную высоту */
    resize: vertical;  /* Разрешить вертикальное изменение размера */
}


.methodical-item {
    margin-bottom: 20px;
}

.item-header {
    display: flex;
    align-items: center;
}

.item-header h4 {
    margin: 0;
    margin-right: 10px; /* Отступ между заголовком и кнопками */
}

.methodical-buttons {
    display: flex;
    gap: 10px; /* Расстояние между кнопками */
}


.game-cover {
    width: 30%;
    height: 30%;
}

.sort-column {
    /* color: #007bff !important; */

    cursor: pointer;
  }
  
.sort-column:hover {
    color: #0056b3 !important;
    text-decoration-color: #0056b3;
}

.font-size-9 {
    font-size: 10px;
}

#students-table {
    width: 100%;
    border-collapse: collapse;
}

#students-table th, #students-table td {
    width: 150px;
    word-wrap: break-word;
    white-space: nowrap; /* Предотвращает перенос слов */
    border-width: 1px;
}

#students-table thead th {
    position: sticky;
    top: 0;
    background-color: white; /* Цвет фона для прилипающих заголовков */
    z-index: 1; /* Обеспечивает, чтобы заголовки были над другими элементами */
}

#students-table th.sticky, #students-table td.sticky {
    position: sticky;
    left: 0;
    background-color: white; /* Цвет фона для прилипающих столбцов */
    z-index: 2; /* Обеспечивает, чтобы прилипшие столбцы были над другими элементами */
}

#students-table th.sticky-2, #students-table td.sticky-2 {
    /* left: 150px; Сдвиг для второго прилипающего столбца */
    z-index: 3; /* Обеспечивает, чтобы второй прилипший столбец был над первым */
}

.table-container {
    overflow-x: auto;
}
.status-green {
    /* background-color: #d4edda !important; */
}

.status-yellow label input {
    /* background-color: #fff3cd !important; */
}

.status-red label input {
    /* background-color: #ffd8c6 !important; */
}
.status-red2 {
    /* background-color: #fce1e3 !important; */
}
.clickable {
    cursor: pointer;
}



#students-table-2 {
    width: 100%;
    border-collapse: collapse;
}

#students-table-2 th, #students-table-2 td {
    word-wrap: break-word;
    white-space: nowrap; /* Предотвращает перенос слов */
    border-width: 1px;
}

#students-table-2 thead th {
    position: sticky;
    top: 0;
    background-color: white; /* Цвет фона для прилипающих заголовков */
    z-index: 1; /* Обеспечивает, чтобы заголовки были над другими элементами */
}

#students-table-2 th.sticky, #students-table-2 td.sticky {
    position: sticky;
    left: 0;
    background-color: white; /* Цвет фона для прилипающих столбцов */
    z-index: 2; /* Обеспечивает, чтобы прилипшие столбцы были над другими элементами */
}

#students-table-2 th.sticky-2, #students-table-2 td.sticky-2 {
    /* left: 150px; Сдвиг для второго прилипающего столбца */
    z-index: 3; /* Обеспечивает, чтобы второй прилипший столбец был над первым */
}


#students-table-3 {
    width: 100%;
    border-collapse: collapse;
}

/* Применяем стили ко всем ячейкам, кроме первых двух столбцов */
#students-table-3 th:nth-child(n+3), 
#students-table-3 td:nth-child(n+3) {
    width: 150px;
    word-wrap: break-word;
    white-space: nowrap;
    border-width: 1px;
}

/* Стили для первых двух столбцов */
#students-table-3 th:nth-child(-n+2), 
#students-table-3 td:nth-child(-n+2) {
    width: auto; /* или конкретное значение, например 100px */
    word-wrap: break-word;
    white-space: nowrap;
    border-width: 1px;
}

#students-table-3 thead th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}

#students-table-3 th.sticky, #students-table-3 td.sticky {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 2;
}

#students-table-3 th.sticky-2, #students-table-3 td.sticky-2 {
    z-index: 3;
}

.font-size-12 {
    font-size: 12px;
}

.qeditor-vh {height: calc(100vh - 50px);}
#puzzles-list-edit-box #puzzles-items {padding-bottom: 50px;}

.ql-container { min-height: 200px !important;  background-color: white; }
.ql-container .quill-chessboard-box, .ql-container .q-photos-box, .ql-container .q-video-wrapper {background: #f5f5f5; padding: 15px; border-radius: 6px; cursor: pointer;}
.ql-container .quill-chessboard-box:hover, .ql-container .q-photos-box:hover, .ql-container .q-video-wrapper:hover  {background: #1971ac21;}

.ql-snow .ql-editor h5, .ql-snow .ql-editor h6, .ql-snow .ql-editor h4, .ql-snow .ql-editor h3 {font-size: inherit !important; }
.ql-editor p, .ql-editor ol, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {margin: inherit !important; padding: inherit !important; padding-top:0px !important; font-weight: inherit !important;}

.ql-container h1, .ql-container h2, .ql-container h3 {font-family: inherit; font-size: 21px !important; margin: 10px 0px 20px 0px !important;}

.card-body {  background-color: #f5f5f5;}
.card-body-white { background-color: #fff;}
.quiz-container { display: flex;}

.quiz-content {
    flex: 1;
    max-width: 500px;
    margin-right: 20px;
    margin-left: 10px;
    /* margin-top: 30px; */

}

.media-container {
    flex: 1;
    max-width: 500px;
    margin-left: 20px;
    margin-top: 15px;
}

.chessboard-container {width: 100%;}

#gameBoard .notation {
    position: absolute; /* Устанавливаем координаты вне стандартной сетки */
    font-size: 16px;
    color: #000;
}

/*#gameBoard { user-select: none; !* Отключить выделение текста *!*/
/*    -webkit-user-select: none; !* Для Safari *!*/
/*    -ms-user-select: none; !* Для IE *!*/
/*}*/

/*#gameBoard, #gameBoard * {*/
/*    user-select: none;*/
/*    -webkit-user-select: none;*/
/*    -ms-user-select: none;*/
/*}*/

/*#gameBoard img {*/
/*    pointer-events: none;*/
/*    -webkit-user-drag: none;*/
/*    user-drag: none;*/
/*}*/

#gameBoard [class*="numeric-"] {  top: 22px;  left: -16px;  color:#454545; font-size: 16px; }
#gameBoard [class*="alpha-"] {  color:#454545;   top: calc(100% - 2px); right:25px; font-size: 16px;}

#gameBoard.board-symbols-none [class*="numeric-"], #gameBoard.board-symbols-none [class*="alpha-"] {display: none !important;}

.text-center-after-quiz {
    display: flex;
    justify-content: center;  /* Центрирование по горизонтали */
    align-items: center;      /* Центрирование по вертикали */
    height: 40vh;            /* Задаем высоту блока на всю высоту экрана */
    text-align: center;       /* Центрируем текст */
    flex-direction: column;   /* Располагаем элементы вертикально */
}

/* #homework-students-table, */
table,
#homework-templates-table,
#quizzes-table,
#puzzles-table,
#users-table,
.tab-border,
.tab-border th,
.tab-border td,
.tab-border tbody,
.tab-border tfoot,
.tab-border thead,
.tab-border tr {
  /* border-width: 1px;
  border-style: solid; */
  border: none;
  border-collapse: collapse;
  font-weight: 300; /* Эквивалент fw-light в Bootstrap */
  font-size: 1rem; /* Эквивалент fs-6 в Bootstrap */
}

.tab-border td.small {
    font-size: 12px;
}

/* tbody, td, tfoot, th, thead, tr {
    text-align: center;
} */

/* table thead {
    position: sticky;
    top: 50px;
} */
.curriculum-filters__wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#students-table, #students-table-3 {
    border-collapse: collapse;
}

#students-table tbody, 
#students-table td, 
#students-table tfoot, 
#students-table th, 
#students-table thead, 
#students-table tr,
#students-table-3 tbody, 
#students-table-3 td, 
#students-table-3 tfoot, 
#students-table-3 th, 
#students-table-3 thead, 
#students-table-3 tr,
#override-table tr,
#override-table th,
#override-table td,
#override-table thead {
    border: none;
    border-style: none;
}

.form-container {
    max-width: fit-content; /* или width: fit-content для older browsers */
    margin-left: 0; /*确ен, что нет отступа слева */
}
/* Стили для изменения цвета текста в placeholder */
::placeholder {
    color: #b0b0b0; /* Более светлый оттенок */
}

.rus-ms-3 {
    margin-left: .7rem !important;
}

.rus-mx-3 {
    margin-right: .8rem !important;
    margin-left: 1rem !important;
}
.rus-badge-container {
    display: inline-block; /* Включаем inline-block для контейнера, чтобы он не переносился */
    vertical-align: middle; /* Чтобы выровнять значок по центру с текстом */
}

.rus-table {
    width: 100%;
    border-collapse: collapse;
}

.rus-table th, .rus-table td {
    width: 150px;
    word-wrap: break-word;
    white-space: nowrap; /* Предотвращает перенос слов */
    border-width: 1px;
}

.rus-table thead th {
    position: sticky;
    top: 0;
    background-color: white; /* Цвет фона для прилипающих заголовков */
    z-index: 1; /* Обеспечивает, чтобы заголовки были над другими элементами */
}

.rus-table td:not(.sticky) {
    min-width: 150px; 
    text-align: center;
}

.rus-table th.sticky, .rus-table td.sticky {
    position: sticky;
    left: 0;
    background-color: white; /* Цвет фона для прилипающих столбцов */
    z-index: 2; /* Обеспечивает, чтобы прилипшие столбцы были над другими элементами */
}

.rus-table th.sticky-2, .rus-table td.sticky-2 {
    /* left: 150px; Сдвиг для второго прилипающего столбца */
    z-index: 3; /* Обеспечивает, чтобы второй прилипший столбец был над первым */
}
.rus-table  tr td:first-child {
    padding-left: 12px;
    max-width: 35px;
}

select.form-select-sm {
    max-width: 200px;
}
.create-link {
    text-decoration: none; /* Убирает подчеркивание */
    color: #007bff; /* Синий цвет Bootstrap ссылок, измените на нужный вам цвет */
}

.create-link:hover {
    text-decoration: underline; /* Добавляет подчеркивание при наведении, если хотите */
}

/* Стили для скроллируемой таблицы */
.scrollable-table {
    max-height: 400px; /* Задайте желаемую высоту */
    overflow-y: auto; /* Включает вертикальную прокрутку, если содержимого больше чем высота */
}

/* Сохранение ширины столбцов при скролле */
.scrollable-table table {
    width: 100%;
}
.rus-small-text {
    font-size: 0.8rem;  /* Установите желаемый размер маленького текста */
    font-weight: 300;   /* Лёгкий (light) шрифт */
}
.rus-container {
    max-width: 450px;
    margin-left: 0;
    margin-right: auto;
}

.rus-select {
    width: 100%;
    max-width: 100%;
}

.rus-table-container {
    /* max-height: 400px; */
    /*overflow-y: auto; */
}

.rus-table-container table {
    width: 100%;
}

.custom-left {
    min-width: 450px;
}


.director-students-buttons__wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}

@media (max-width: 767px) {
    .rus-container {
        max-width: 100%;
    }

    .custom-left {
        min-width: auto;
    }

    .director-students-buttons__wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .director-students-buttons__wrapper button {
        width: 100%;
    }
}





@media (min-width: 992px) { /* Для экранов >=992px */
    .col-lg-9 {
        max-width: 850px;
    }
}

.sender-settings {
    border: 1px dashed #ccc; /* Обводка */
    border-radius: 10px; /* Закругленные углы */
    padding: 15px; /* Отступы внутри блока */
    display: inline-block; /* Отображение блоков в одну линию */
    margin-right: 15px; /* Отступ между блоками */
}

.sender-settings:last-child {
    margin-right: 0; /* Чтобы у последнего блока не было отступа справа */
}
.border-dashed {
    border: 1px dashed var(--border);
}

.preview-template {
    border: 1px dashed #ccc; /* Обводка */
    border-radius: 10px; /* Закругленные углы */
    padding: 15px; /* Отступы внутри блока */
    margin-right: 15px; /* Отступ между блоками */
}



.img-choice.selected {
    border: 2px solid #198754;
    border-radius: 5px;
}

.logo-animation {
    width: 100%; /* задаем нужный размер логотипа */
    filter: brightness(0) invert(1); /* делаем логотип белым */
    animation: revealLogo 2s forwards; /* анимация на 1 секунду */
    opacity: 0; /* логотип невидим в начале */
    margin-bottom: 15px;
}

@keyframes revealLogo {
    0% {
        filter: brightness(0) invert(1); /* белый логотип */
        opacity: 0; /* скрытый */
    }
    100% {
        filter: brightness(1) invert(0); /* возвращаем оригинальные цвета логотипа */
        opacity: 1; /* логотип становится видимым */
    }
}

#game-status-text {
    display: inline-block;
    font-size: 15px;
    font-weight: inherit;
    transition: transform 0.5s, opacity 0.5s; /* Переход при изменении текста */
}

#game-status-text.animate-out {
    transform: translateY(-20px);
    opacity: 0;
}

#game-status-text.animate-in {
    transform: translateY(10px);
    opacity: 1;
}
game-status-text-color {
    transform: translateY(10px);
    opacity: 1;
}

.rus-avatar-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.rus-avatar-image-small {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: #1a8754;
    border-color: #1a8754;
}
#import-accordion-body.card-body {
    background-color: #ffffff;
}




#promotion-choice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 205;
}

#promotion-choice.hidden {
    display: none;
}

.promotion-container {
    display: flex;
    gap: 10px;
}

.promotion-square {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 150ms;
}

.promotion-square:hover {
    transform: scale(1.1);
}

.promotion-square .piece {
    width: 80%;
    height: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.queen.white {
    background-image: url('/img/chesspieces/wikipedia/wQ.svg');
}

.knight.white {
    background-image: url('/img/chesspieces/wikipedia/wN.svg');
}

.rook.white {
    background-image: url('/img/chesspieces/wikipedia/wR.svg');
}

.bishop.white {
    background-image: url('/img/chesspieces/wikipedia/wB.svg');
}

.queen.black {
    background-image: url('/img/chesspieces/wikipedia/bQ.svg');
}

.knight.black {
    background-image: url('/img/chesspieces/wikipedia/bN.svg');
}

.rook.black {
    background-image: url('/img/chesspieces/wikipedia/bR.svg');
}

.bishop.black {
    background-image: url('/img/chesspieces/wikipedia/bB.svg');
} 

#director-left-menu span:not(#director-left-menu-slide-right, #director-left-menu-slide-left) {
    /* Руслан выровнял спан чтобы красный кружок стал влинию */
    display: flex;
    gap: 4px;
}
.badge-circle {
    background-color: #f4a858;
    border-radius: 50%;       
    color: white;             
    font-size: 12px;         
    display: flex !important;    
    text-align: center;       
    width: 20px !important;          
    height: 20px !important;         
    line-height: 20px; 
    align-items: center;
    justify-content: center;       
}

.fast-start__wrapper {
    display: flex;
    flex-wrap: wrap;
}

.fast-start_cta:hover {
    cursor: pointer;
}

.fast-start_btn {
    padding: 4px;
    background-color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    text-decoration: none;
    height: auto;
    box-shadow: 0 2px 16px rgba(0,0,0,.08) ;
}
.blue {
    background-color: #f0faf9;
}

.red {
    background-color: #fff0ed;
}

.uppercase {
    text-transform: uppercase;
}

/* .thumbnail {
    flex: 0 1 50%; 
    max-width: 50%;
    } */

/* .fast-start-desc {

} */


/* Стили для контейнера игр */
    #games-container {
        display: flex;
        flex-wrap: wrap; /* включает перенос на новую строку */
        gap: 10px;       /* отступы между карточками (по желанию) */
        align-items: flex-start; /* чтобы верхние границы карточек были на одной линии */
    }

    .classroom-game-container {
        margin-bottom: 0 !important; /* если нужно убрать нижний отступ */
    }

    /* Медиа-запрос для экранов меньше 1300px */
    @media (max-width:1300px) { /* Можно подстроить под нужную ширину */
        .btn-icon-left {
            /*width: 100%;  Кнопка займет всю ширину */
            margin-left: 0; /* Уберем левый отступ */
            flex-shrink: 0; /* Не дает кнопке уменьшаться */
        }
        #pm-pairs-list > div {
            display: flex;
            flex-wrap: wrap; /* Разрешаем перенос элементов */
            align-items: center;
        }
    }

    /* Стили для текущего хода */
    .current-turn {
        box-shadow: 15px 1px 0px 4px rgb(182 216 242);
    }

    /* Стили для менеджера пар */
    #pairing-manager-container {
        display: flex !important;
        gap: 20px;
    }

    /* Левая часть с пользователями и кнопками */
    .pairing-left-section {
        flex: 0 0 auto;
        width: 300px;
    }

    /* Правая часть со списком пар */
    #pm-pairs-block {
        flex: 1;
        min-width: 0;
        max-width: 400px;
    }

    /* Стили для списка пользователей */
    #pm-users-list {
        margin-bottom: 20px;
    }

    /* Стили для блока управления */
    #pm-control-block {
        margin-bottom: 20px;
    }

    /* Стили для менеджера задач */
    #puzzles-manager-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Стили для уроков пазлов */
    #puzzle-lesson-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Панель мониторинга пазлов */
    #puzzles-monitoring-panel {
        display: flex;
        flex-wrap: wrap; /* Позволяет переносить элементы на новую строку */
        gap: 10px; /* Добавляет отступы между контейнерами */
        justify-content: flex-start; /* Выравнивание слева направо */
        align-items: flex-start; /* Выравнивание сверху */
    }

    /* Отступ сверху для элементов с классом mt-auto */
    .mt-auto {
        margin-top: 50px !important;
    }

    /* Стили для контейнера fluid */
    .container-fluid {
        position: relative;
    }

    /* Стили для инпута файла PGN */
    #pgn-file-input {
        opacity: 0;
        position: absolute;
        left: -9999px;
    }

    /* Стили для кнопок в футере модальных окон */
    .modal-footer.text-center .btn-danger {
        margin-right: 10px;
    }

    /* Стили для заголовков шахматной доски и фото-боксов */
    .quill-chessboard-title, .q-photos-box-title {
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: 300;
    }

    /* Стили для чекбоксов и радио кнопок */
    input[type=checkbox], input[type=radio] {
        opacity: 1;
        width: 15px;
        position: relative;
    }

    /* Стили для кнопок с классом rts-btn */

     .rts-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: max-content;
        padding: 12px  24px;
        border-radius: 4px;
        transition: 0.3s;
        font-weight: 500;
        box-shadow: 1px 1px 2px 1px #dedede59;
        text-align: center;
    }

    @media only screen and (max-width: 768px) {
        .rts-btn {
            max-width: none;
            width: 100%;
        }
    }



    .rts-btn.btn-primary-2 {
        background: var(--color-primary-2);
        color: #fff;
        border: 1px solid transparent;
    }

    .rts-btn.btn-primary-2:hover {
        border: 1px solid var(--color-primary-2);
        color: var(--color-primary-2);
        background-color: #fff;
    }

    .rts-btn.btn-primary {
        background: var(--color-primary);
        color: #fff;
        border: 1px solid transparent;
    }

    .rts-btn.btn-primary:hover {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        background-color: #fff;
    }

    /* Стили для результатов игры */
    .game-section-result  {
        margin-top: 0px !important;
    }

    /* Стили для кнопок с классом rts-btn-rus */
    .rts-btn-rus {
        display: block;
        max-width: max-content;
        border-radius: 4px;
        transition: 0.3s;
        font-weight: 300;
        box-shadow: 1px 1px 2px 1px #dedede59;
    }

    /* Стили для текста с классом text-muted */
    .text-muted {
        color: #888; /* Или другой цвет, который вы хотите использовать */
    }

    /* Стили для статуса урока пазлов */
    .puzzle-lesson-status {
        display: block;
        margin-top: 10px;
        font-weight: bold;
        text-align: left;
        align-self: flex-start;
    }


    /* Стили для парных игр и пазлов Rus */

    /* Стили для контейнера игр */
    #games-container {
        display: flex;
        flex-wrap: wrap; /* включает перенос на новую строку */
        gap: 10px;       /* отступы между карточками (по желанию) */
        align-items: flex-start; /* чтобы верхние границы карточек были на одной линии */
    }

    .classroom-game-container {
        margin-bottom: 0 !important; /* если нужно убрать нижний отступ */
    }



    /* Стили для текущего хода */
    /* .current-turn {
        box-shadow: 15px 1px 0px 4px rgb(182 216 242) !important;
    } */

    /* Стили для менеджера пар */
    #pairing-manager-container {
        display: flex !important;
        gap: 20px;
    }

    /* Левая часть с пользователями и кнопками */
    .pairing-left-section {
        flex: 0 0 auto;
        width: 300px;
    }

    /* Правая часть со списком пар */
    #pm-pairs-block {
        flex: 1;
        min-width: 0;
    }

    /* Стили для списка пользователей */
    #pm-users-list {
        margin-bottom: 20px;
    }

    /* Стили для блока управления */
    #pm-control-block {
        margin-bottom: 20px;
    }

    /* Стили для менеджера задач */
    #puzzles-manager-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Стили для уроков пазлов */
    #puzzle-lesson-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Панель мониторинга пазлов */
    #puzzles-monitoring-panel {
        display: flex;
        flex-wrap: wrap; /* Позволяет переносить элементы на новую строку */
        gap: 10px; /* Добавляет отступы между контейнерами */
        justify-content: flex-start; /* Выравнивание слева направо */
        align-items: flex-start; /* Выравнивание сверху */
    }

    /* Отступ сверху для элементов с классом mt-auto */
    .mt-auto {
        margin-top: 50px !important;
    }

    /* Стили для контейнера fluid */
    .container-fluid {
        position: relative;
    }

    /* Стили для инпута файла PGN */
    #pgn-file-input {
        opacity: 0;
        position: absolute;
        left: -9999px;
    }

    /* Стили для кнопок в футере модальных окон */
    .modal-footer.text-center .btn-danger {
        margin-right: 10px;
    }

    /* Стили для заголовков шахматной доски и фото-боксов */
    .quill-chessboard-title, .q-photos-box-title {
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: 300;
    }

    /* Стили для чекбоксов и радио кнопок */
    input[type=checkbox], input[type=radio] {
        opacity: 1;
        width: 15px;
        position: relative;
    }

    /* Стили для кнопок с классом rts-btn */
    /* .rts-btn.btn-primary {
        background: #f5a858 !important;
        margin-right: 15px;
        padding: 10px;
        max-height: 48px;
    } */

    /* Стили для результатов игры */
    .game-section-result  {
        margin-top: 0px !important;
    }

    /* Стили для кнопок с классом rts-btn-rus */
    .rts-btn-rus {
        display: block;
        max-width: max-content;
        border-radius: 4px;
        transition: 0.3s;
        font-weight: 300;
        box-shadow: 1px 1px 2px 1px #dedede59;
    }

    /* Стили для текста с классом text-muted */
    .text-muted {
        color: #888; /* Или другой цвет, который вы хотите использовать */
    }

    /* Стили для статуса урока пазлов */
    .puzzle-lesson-status {
        display: block;
        margin-top: 10px;
        font-weight: bold;
        text-align: left;
        align-self: flex-start;
    }


    /* END Стили для парных игр и пазлов Rus */

#rus-classroom-lesson-theme, #rus-classroom-lesson-list {width:100%; max-width:250px; padding: 5px 10px; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius);}

.rus-max-width-selector {
    max-width:250px !important; 
}

.rus-180-width-selector {
    max-width:180px !important; 
}
#pgn-link-btn {width: 150px; border-radius: 0px 6px 6px 0px;}

#pgn-link-input {
    all: unset; /* Сбрасывает все стили, кроме базовых */
    width: calc(100% - 150px); /* Возвращаем нужную ширину */
    /* margin-right: 10px; */
    border: 1px solid #ced4da; /* Стандартный стиль Bootstrap */
    border-radius: 0.375rem 0 0 0.375rem; 
    padding: 6px 12px;
    height: auto; /* Отменяем фиксированную высоту */
    background-color: #fff;
}
.btn-dotted {
    border: 1px dotted var(--bs-dark-bg-subtle); /* Используем переменную Bootstrap */
    background-color: transparent;
    color: var(--bs-success);
}
.btn-dotted:hover {
    background-color: var(--bs-success);
    color: white;
}

.card-item {
    display: flex;
    /* gap: 16px; */
    /* align-items: center; */
    flex-direction: column;
} 

.card-item h5 {
    margin: 0;
}

.contact__wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 6px;
}

.contact-icon__wrapper svg, .contact-icon__wrapper img {
    width: 44px;
    height: 44px;
}
/* .contact-icon__wrapper {
    width: 44px;
    height: 44px;
} */


.youtube {
    color: #FF0000;
}

.telegram svg {
    color: #0088CC;
}

.whatsapp {
    color: green;
}

.contact-link {
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

.footer-icon svg {
    width: 25px;
    height: 25px;
}

.coach-video__box {
    display: flex;
    gap: 32px;
}

.video-list__wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 180px;
}

.video-list__item {
    line-height: 16px;
}

.video-list__item:hover {
    cursor: pointer;
}

.video-list__item-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.video-list__icon {
    opacity: 0;
}



.video-list__item-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-video {
    font-size: large;
    color: red;
}

.selected-category {
    font-size: large;
    font-weight: 700;
    color: black;
    opacity: 1;
}

.no-video__box {
    display: flex;
    gap: 16px;
    align-items: center;
    color: #dedede;
    font-size: 32px;    
    font-weight: 700;
}

.video-list__text {
    font-size: 12px;
    font-weight: 300;
}

.icon-large {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-large svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
    transform: rotate(180deg);
    
}

#guide-video-box {
    position: relative;
    /* height: 100%; */
}

.video-preloader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.3s ease;
    width: 100%;
}

.video-preloader img {
    width: 360px;
    height: 360px;
}

.video-preloader.video-hidden {
    opacity: 0;
    pointer-events: none;
}

.video__wrapper {
    width: 100%;
    /* aspect-ratio: 16 / 9; */
    position: relative;

    overflow: hidden;
    /* height: 522px; */
}

.video__wrapper video,
.video-preloader {
    width: 100%;

    object-fit: cover; /* или contain */
    
}

@media (max-width: 969px) {
    .coach-video__box {
        flex-direction: column-reverse;
    }

    .video-list__wrapper {
        max-width: none;
    }
}

.quill-chessboard-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px; /* отступ между доской и текстом */
}

.quill-chessboard-text {
    flex: 1; /* текст займет все доступное пространство справа */
    max-width: 400px; /* можно ограничить ширину текста, если нужно */
}

.quill-chessboard-left {
    display: flex;
}



.no-flex #classroom-choose-curriculum-boards .curriculum-board-item {
    width: auto !important;  /* Отменяем width: calc(50% - 10px) */
}

/* #curric-themes-box.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f0f8ff; 
} */

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: white;
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}
.label-select svg {
    margin-right: 8px;
}
.nav-link {
    color: var(--light-blue);
}
.nav-link:focus, .nav-link:hover {
    color: #2286d0;
}
.text-primary {
    color: rgb(73 130 172) !important;
}
a {
    color: var(--light-blue);
}
.crm-nav {
    color: var(--light-blue) !important;
}

/* Подключить после стандартных стилей chessground */
.cg-promotion {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 20;          /* выше доски */
}

/* полупрозрачный фон, появляется когда открыт диалог */
.cg-promotion__overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(22, 21, 18, 0.7);
    cursor: pointer;
}

/* квадрат-кнопка фигуры */
.cg-promotion__square {
    position: absolute;
    width: 12.5%;
    height: 12.5%;
    background-color: #b0b0b0;
    border-radius: 50%;
    box-shadow: inset 0 0 25px 3px #808080;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-radius 150ms, box-shadow 150ms;
}
.cg-promotion__square:hover {
    border-radius: 0%;
    box-shadow: inset 0 0 48px 8px #d64f00;
}
.cg-promotion__square piece {
    width: 100%;
    height: 100%;
    background-size: contain;   /* ключевая строка */
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    transition: transform 150ms;
    transform: scale(0.9);
}
.cg-promotion__square:hover piece {
    transform: scale(1);
}

.lpv__moves>variation {
    background: hsl(0deg 0% 97.84%) !important;
    border: 1px solid hsl(0deg 0% 79.63%) !important;
    border-left: none !important;
    border-right: none !important;
}


.lpv__moves>comment {
    background: hsl(0deg 0% 100%) !important;
    border: 1px solid hsl(0deg 0% 74.62%) !important;
    border-left: none !important;
    border-right: none !important;
}

/* Убираем внешние бордеры у LPV (если есть) */
.fen-pro .board-wrap .lpv {
    border: none !important;
    box-shadow: none !important;
}


.tasks-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* равномерный отступ между всеми досками */
    justify-content: flex-start;
    align-items: flex-start;
}

.task-item {
    width: 420px; /* фиксируем ширину */
    flex-shrink: 0; /* не даём доскам ужиматься */
}

/* 
.no-flex #classroom-choose-curriculum-boards {
    display: block !important;  
    flex-wrap: unset !important;
    justify-content: unset !important;
} */

.not-valid {
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.6) !important;
}

.valid {
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.6) !important;
}

.color-circle-black-rus {
    background: #454545;
}
.color-circle-white-rus {
    background: #fff;
}
.color-circle-white-rus, .color-circle-black-rus {
    height: 13px;
    border: 2px solid #00000020;
    width: 13px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 8px;
}
/* === FEN input UI — фиксированная кнопка внутри инпута === */
.pm-fen-input-wrap {
    position: relative;
    width: 100%;
}

#pm-fen-input {
    width: 100%;
    padding-right: 80px; /* место под кнопку "Старт" */
    box-sizing: border-box;
    height: 38px; /* явно задаем высоту инпута */
}

#pm-fen-start-btn {
    position: absolute;
    top: 4px; /* привязываемся к верхнему краю инпута + border */
    right: 7px;
    height: 29px; /* высота кнопки = высота инпута - 2px на borders */
    border: 1px solid #ddd;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 12px;
    line-height: 1;
    padding: 0 10px; /* убираем вертикальный padding */
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    z-index: 1;
    display: flex;
    align-items: center; /* центрируем текст по вертикали */
}

#pm-fen-start-btn:hover {
    background: #eeeeee;
}

#pm-fen-start-btn:active {
    background: #e6e6e6;
}

.fen-pro {
    --fenpro-board-size: 320px !important; /* управляется из JS */
    --fenpro-gap: 12px;
    --fenpro-palette-ico: 26px;
    --fenpro-border: 1px solid #e5e5e5;
    --fenpro-radius: 8px;
    --fenpro-muted: #6b7280;
    --fenpro-accent: #0ea5e9;
    --fenpro-bg: #fafafa;
    --fenpro-btn-hover: #f3f4f6;
    --fenpro-danger: #ef4444;
    --fenpro-sidebar-width: 260px;
    /* max-width: 611px; */
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
.fen-pro * { box-sizing: border-box; }

/* ГЛАВНАЯ СЕТКА */
.fen-pro .main-grid {
    display: flex;
    justify-content: space-between;
}

/* Контент-стек: верхняя палитра → доска → нижняя палитра */
.fen-pro .content {
    display: grid;
    grid-template-rows: auto var(--fenpro-board-size) auto;
    gap: var(--fenpro-gap);
    align-items: start;
}

/* Сайдбар */
.fen-pro .sidebar {
    display: grid;
    gap: var(--fenpro-gap);
    align-self: stretch;
    position: sticky;
    top: 0;
}

/* Ряды/палитры */
.fen-pro .row {
    display: flex;
    gap: var(--fenpro-gap);
    align-items: center;
}

.fen-pro .palette {
    width: 95%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    background: var(--fenpro-bg);
    border: var(--fenpro-border);
    border-radius: var(--fenpro-radius);
    padding: 8px 10px;
    user-select: none;
    margin-left: 0px;
}

/* Кнопки-инструменты фиксированной ширины */
.fen-pro .palette .tool-btn {
    flex: 0 0 var(--fenpro-palette-ico);
    width: var(--fenpro-palette-ico);
    height: var(--fenpro-palette-ico);
    border-radius: 6px;
    border: var(--fenpro-border);
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.fen-pro .palette .tool-btn:hover { background: var(--fenpro-btn-hover); }
.fen-pro .palette .tool-btn.active { outline: 2px solid var(--fenpro-accent); }

/* Блок фигур — тянется, центрирует и НЕ переносит */
.fen-pro .palette .pieces {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;       /* фигуры по центру между кнопками */
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;             /* строго в одну линию */
    min-width: 0;                  /* чтобы не разъезжалось в крайних случаях */
}

/* Иконки фигур */
.fen-pro .palette .piece-ico {
    width: var(--fenpro-palette-ico);
    height: var(--fenpro-palette-ico);
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 6px;
    border: var(--fenpro-border);
    cursor: pointer;
}
.fen-pro .palette .piece-ico:hover { background-color: var(--fenpro-btn-hover); }
.fen-pro .palette .piece-ico.selected { outline: 2px solid var(--fenpro-accent); }

/* ДОСКА — квадрат */
.fen-pro .board-wrap {
    width: var(--fenpro-board-size);
    height: var(--fenpro-board-size);
}

/* Карточки в сайдбаре */
.fen-pro .sidebar .card {
    border: var(--fenpro-border);
    border-radius: var(--fenpro-radius);
    background: white;
    padding: 10px;
}
.fen-pro .card h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #111827;
}
.fen-pro label { font-size: 13px; color: #111827; }
.fen-pro .castling-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.fen-pro .actions .btn {
    width: 100%;
    border-radius: 6px;
    border: var(--fenpro-border);
    background: white;
    cursor: pointer;
}
.fen-pro .actions .btn:hover { background: var(--fenpro-btn-hover); }
.fen-pro .actions .btn.danger:hover { background: #fee2e2; border-color: #fecaca; }

.fen-pro .fen-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
.fen-pro .fen-line input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: var(--fenpro-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}
.fen-pro .fen-line .copy-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: var(--fenpro-border);
    background: white;
    cursor: pointer;
}
.fen-pro .fen-line .copy-btn:hover { background: var(--fenpro-btn-hover); }



/* Прячем системный курсор над доской в режимах place/erase */
.fen-pro.cursor-hidden .board-wrap { cursor: none; }

/* Маленькие SVG-иконки внутри кнопок */
.fen-pro .tool-btn svg,
.fen-pro .tool-btn img {
    width: 20px;
    height: 20px;
}

/* Без бордера вокруг cg-container */
.fen-pro .board-wrap cg-container {
    border: none !important;
    border-radius: 0 !important;
}

/* Подписи и мелкие элементы */
.fen-pro .muted { color: var(--fenpro-muted); font-size: 12px; }


.fen-pro #fenpro-side {
    max-width: 92%;
    display: block;          /* чтобы margin авто сработал */
    margin: 0 auto;          /* центрируем по горизонтали */
}
/* скрывать системный курсор, когда активен наш призрак над компонентом */
.fen-pro.cursor-hidden,
.fen-pro.cursor-hidden .board-wrap,
.fen-pro.cursor-hidden cg-container {
    cursor: none !important;
}

/* Глобальный призрак курсора (живёт в <body>) */
.fen-ghost {
    position: fixed;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    z-index: 999999; /* выше модалки */
    transform: translate(-50%, -50%);
    display: none;
}
/* .fen-ghost {
    position: fixed;
    left: -99999px; top: -99999px;
    width: 38px; height: 38px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2147483647;
  } */
  


/* Промежуток между кнопками действий */
.fen-pro .actions {
    display: flex;
    flex-direction: column; /* Располагаем элементы друг под другом */
    gap: var(--fenpro-gap); /* Используем уже определённую переменную для промежутка */
}

/* Также, чтобы не было двойного отступа от заголовка H4 до первой кнопки,
   удалим нижний маргин у H4 внутри блока .actions, если он есть */
.fen-pro .actions h4 {
    margin-bottom: 0; /* Убираем стандартный отступ, чтобы gap контролировал всё */
}

.fen-pro {
    --fenpro-palette-ico: 32px;
}

.fen-pro .palette .tool-btn img,
.fen-pro .palette .piece-ico img {
    pointer-events: none;
}

/* Стили для контейнера взятых фигур на уроке */
.classroom-captured-pieces-container {
    min-height: 28px; /* Чтобы контейнер не "схлопывался", когда фигур нет */
    padding: 5px 0;
}

/* Общие стили для панели взятых фигур (у вас они, скорее всего, уже есть) */
.captured-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.captured-row {
    display: flex;
    align-items: center;
    min-height: 28px;
}

.captured-pieces {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
}

.captured-piece-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.captured-piece-group img {
    height: 24px;
    width: 24px;
}

.captured-badge {
    position: absolute;
    bottom: -2px;
    right: -4px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    min-width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 1px;
    border: 1px solid white;
}


.form-range::-webkit-slider-thumb {
    background-color: #198754; /* Ваш зеленый цвет */
}

.form-range::-moz-range-thumb {
    background-color: #198754; /* Ваш зеленый цвет для Firefox */
}


.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}


.game-player-card .rus-game-move-type-text {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

/* слот для часов */
.player-clock--inline{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    min-width:80px;   /* чтобы не прыгали */
}

/* компактный стиль часов в строке */
.player-clock--inline .gamewatch-clock{
    display:inline-flex;
    align-items:center;
    padding:0 .35rem;
    border:0;
    min-width:auto;
    box-shadow:none;
}

.player-clock--inline .gamewatch-clock__time{
    font-size:1rem;
    line-height:1.1;
    font-weight:600;
}
.dashboard-item .badge-circle {
    padding: 0; /* убираем отступы только внутри карточек */
}


.bt-moves-info {
    border-left: 3px solid #007bff;
    width: 100%;
}

.bt-moves-info div {
    margin-bottom: 4px;
}
.maxw {
    max-width: 350px;
}
.tariffs-currency__tab {
    margin-left: auto;
    display: flex;
    justify-content: space-around;
}

.school-tariffs__tab, .school-tariffs__card {
    max-width: 600px;
    margin: 0 auto;
}


.bt-moves-info div:last-child {
    margin-bottom: 0;
}

.mpt-icon piece {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* 190925 */
#classroom-left-box {
    display: flex;
    width: calc(100% - 920px); /* десктоп */
}
.mpt-main {
    display: flex;
    flex-direction: column; /* десктоп */
    align-items: center;    /* доска по центру */
    gap: 12px;
}

@media (max-width: 1200px) {
    #classroom-left-box {
        width: 70%; /* планшеты */
        flex-direction: column; /* можно стэком расположить */
    }
    .container-classroom .mainbox {
        margin-top: 0px !important;
    }
    .container-classroom #mainbox {
        padding: 5px !important;

    }
    #memory-trainer-wrapper,
    #game-memorizer-wrapper {
        position: relative;
        /* height: calc(100vh - 5px); */
        overflow: hidden; /* исключаем скрол */
    }

}


#gm-monitoring-panel {
    display: flex;
    flex-wrap: wrap;      /* разрешаем перенос на новую строку */
    gap: 12px;            /* расстояние между карточками */
    align-items: flex-start;
    justify-content: flex-start; /* можно center, если нужно центрировать */
}

#gm-monitoring-panel > div[id^="gm-assign-"] {
    flex: 0 1 300px;       /* карточка старается быть 300px, но может ужаться */
    max-width: 300px;
    box-sizing: border-box;
}

/* 190925 */

#pmn-clear-pairs-btn {
    justify-content: center !important;
    text-align: center !important;
}

/* .payment-method-menu-item:hover .delete-payment-method__btn {
    opacity: 1;
}

.delete-payment-method__btn {
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width: 24px;
    height: 24px;
} */

#del-payment-method-btn svg {
    margin: 0;
}

.cfr-text-danger {
    --bs-text-opacity: 1;
    color: rgb(231 89 87) !important;
}
.cfr-student-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
}

.cfr-student-ava {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: 0 0 28px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.08);
    background: #f3f4f6;
}

.cfr-student-ava.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
}


/* Статус-точка вместо текста фыва */
.cfr-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}
.cfr-status-dot.paid {
    background-color: #6dd488;
    box-shadow: 0 0 0 2px #dcfce7;
}
.cfr-status-dot.unpaid {
    background-color: #fb9695;
    box-shadow: 0 0 0 2px #fee2e2;
}

/* Группировка уроков (визуальное отделение) */
.cfr-group-start td {
    border-top: 2px solid #e5e7eb !important; /* Более жирная граница между разными урокамифывафывафывафывафывафыва */
}

.cfr-id-badge {
    font-family: monospace;
    font-size: 0.85em;
    padding: 2px 6px;
    border-radius: 4px;
    color: #4b5563;
}

/* Вариант A */
.cfr-id-badge.alt-a {
    background: #f3f4f6;
}

/* Вариант B */
.cfr-id-badge.alt-b {
    background: #ffcfa369;
}


/* Футер таблицы */
.cfr-table-footer {
    background-color: #f9fafb;
    font-weight: 600;
    font-size: 0.9rem;
    border-top: 2px solid #9ca3af;
}
.cfr-table-footer td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.cfr-trend-btn {
    min-width: 40px;
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.2;
    border-radius: 4px !important;
}

.cfr-trend-btn.active {
    background-color: #ecfef3;
    color: #17803d;
    border-color: #bdf8d1;
}

.cfr-trend-btn:hover:not(.active) {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}
/* ==== Coach Finance Report styles (локальные) ====  ыфвафыва */
.btn-outline-secondary {
    border: 1px solid #00000016;
}
.btn {
    border-radius: 6px;
}
#coach-finance-report-root {
    max-width: 1200px;
}

.cfr-filters-card {
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    padding: 16px 18px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
    margin-bottom: 16px;
}

.cfr-summary-cards {
    margin-bottom: 18px;
}

.cfr-summary-card {
    border-radius: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
    height: 100%;
}

.cfr-summary-card-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 4px;
}

.cfr-summary-card-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 4px;
}

.cfr-summary-card-sub {
    font-size: 12px;
    color: #6b7280;
}

.cfr-summary-card-highlight {
    background: linear-gradient(135deg, #f0fff3, #eff6ff);
}

.cfr-summary-card-danger {
    background: linear-gradient(135deg, #ffffff, #fff1ef);
}
.cfr-summary-card-blue {
    background: linear-gradient(135deg, #ffffff, #f4f6fe);
}
.cfr-summary-card-warning {
    background: linear-gradient(135deg, #ffffff, #fff8e5);
}
.cfr-summary-card-small-label {
    font-size: 11px;
    color: #9ca3af;
}

.cfr-summary-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0 6px;
}

.cfr-progress-label {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cfr-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cfr-section-title small {
    font-weight: 400;
    font-size: 12px;
    color: #6b7280;
}

.cfr-section-card {
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    padding: 12px 14px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
    margin-bottom: 16px;
    height: 100%;
}

.cfr-chart-wrapper {
    position: relative;
    min-height: 240px;
}

.cfr-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
}

.cfr-badge-paid {
    background-color: #ecfdf3;
    color: #15803d;
    border-color: #bbf7d0;
}

.cfr-badge-unpaid {
    background-color: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cfr-badge-neutral {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.cfr-table-wrapper {
    margin-bottom: 16px;
}

.cfr-table-wrapper table {
    font-size: 13px;
}

.cfr-table-wrapper th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    white-space: nowrap;
}

.cfr-amount-cell {
    text-align: right;
    white-space: nowrap;
}

.cfr-lessons-filters {
    margin-bottom: 6px;
}

.cfr-lessons-filters .btn-group .btn {
    font-size: 12px;
}

.cfr-lessons-filter-label {
    font-size: 12px;
    color: #6b7280;
}

.cfr-lessons-filter-label button {
    font-size: 12px;
}

.cfr-day-row {
    cursor: pointer;
}

.cfr-day-row:hover {
    background-color: #f3f4f6 !important;
}

.cfr-lesson-row-unpaid {
    background-color: #fff7ed !important;
}

.cfr-lesson-row-unpaid td {
    border-top-color: #fed7aa !important;
}

.cfr-lesson-row-unpaid td:first-child {
    border-left: 3px solid #fb923c;
}

.cfr-lesson-row-paid td:first-child {
    border-left: 3px solid #4ade80;
}

.cfr-pill-muted {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    background-color: #f3f4f6;
    color: #4b5563;
}

.cfr-small-muted {
    font-size: 11px;
    color: #9ca3af;
}

@media (max-width: 767px) {
    .cfr-summary-card {
        margin-bottom: 8px;
    }
}
/* Контейнер вокруг input + svg */
.cfr-datepicker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Иконка */
.cfr-datepicker-wrapper svg {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.7;
}

/* Сам input */
.cfr-datepicker-input {
    padding-left: 36px !important;
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 6px;
    border: 1px solid #ced4da;
}

/* Hover */
.cfr-datepicker-input:hover {
    border-color: #b0b0b0;
}

/* Focus */
.cfr-datepicker-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.1rem rgba(13,110,253,.15);
}

/* контейнер */
.cfr-idate-box {
    max-width: 240px;
}


/* Цвет группы через CSS-переменную (привязываем к alt-a / alt-b) */
tr.cfr-group-alt-a { --cfr-group-accent: #f3f4f6; }
tr.cfr-group-alt-b { --cfr-group-accent: #ffcfa369; }

/* Ячейка ID урока: даём место под “скобку” */
td.cfr-lesson-id-cell {
    position: relative;
    padding-left: 20px; /* место под скобку слева */
    white-space: nowrap;
}

/* “Скобка” внутри ячейки */
td.cfr-lesson-id-cell .cfr-group-bracket {
    position: absolute;
    left: 0px;
    top: -1px;
    bottom: -1px;
    width: 12px;

    /* вертикальная часть */
    border-left: 2px solid var(--cfr-group-accent);

    pointer-events: none;
    box-sizing: border-box;
}

/* верхняя “полка” скобки у первой строки группы */
tr.cfr-group-first td.cfr-lesson-id-cell .cfr-group-bracket {
    top: 2px;
    border-top: 2px solid var(--cfr-group-accent);
    border-top-left-radius: 6px;
}

/* нижняя “полка” скобки у последней строки группы */
tr.cfr-group-last td.cfr-lesson-id-cell .cfr-group-bracket {
    bottom: 2px;
    border-bottom: 2px solid var(--cfr-group-accent);
    border-bottom-left-radius: 6px;
}

.lesson-grade-badge {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Контейнер для селекторов ДЗ */
#class-edit-form-homework-box .d-flex {
    flex-wrap: nowrap !important; /* Запрещаем перенос на вторую строку */
    gap: 10px;                    /* Расстояние между селекторами */
}

/* Сами селекторы */
#class-edit-form-homework-box .form-select {
    width: 50% !important;        /* Устанавливаем ширину 50% */
    flex: 1 1 50%;                /* Равномерное распределение */
    min-width: 0;                 /* КРИТИЧНО: позволяет селектору сжиматься и не распираться текстом */
    text-overflow: ellipsis;      /* Добавляет троеточие, если текст слишком длинный */
    white-space: nowrap;
    overflow: hidden;
}

/* Адаптивность для мобилок (опционально) */
@media (max-width: 576px) {
    #class-edit-form-homework-box .d-flex {
        flex-wrap: wrap !important; /* На совсем маленьких экранах лучше все же переносить */
    }
    #class-edit-form-homework-box .form-select {
        width: 100% !important;
        flex: 1 1 100%;
    }
}

/* Находим кнопку внутри ячейки оплаты, если она отключена */
.attendance-lesson-student-payment-html .btn.disabled,
.attendance-lesson-student-payment-html .btn:disabled {
    cursor: not-allowed !important;
    pointer-events: auto !important; /* Позволяет показывать курсор 'not-allowed' даже на disabled элементах */
}

/* Уникальный селектор для кнопок в attendance-lesson__buttons и payment кнопок */
.attendance-lesson__buttons .btn.disabled,
.attendance-lesson__buttons .btn:disabled,
.attendance-lesson__buttons fieldset:disabled .btn,
.attendance-payment-btn.disabled,
.attendance-payment-btn:disabled {
    background-color: #ffffff00 !important;
    border: 1px dashed #ced4da !important;
    opacity: 1 !important;
    color: #212529 !important;
    appearance: none;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/* Стили для неактивных полей в таблице посещаемости */
.attendance-lesson-student-item .form-select:disabled,
.attendance-lesson-student-item .form-control:disabled {
    background-color: #ffffff00 !important;
    border: 1px dashed #ced4da !important; /* Пунктирный бордер */
    opacity: 1 !important;               /* Убираем стандартную прозрачность браузера */
    color: #212529 !important;           /* Цвет текста (делаем четким) */
    cursor: default;                     /* Обычный курсор вместо "запрещающего" */
    -webkit-appearance: none;            /* Убираем стандартные стрелочки в некоторых браузерах, если нужно */
    appearance: none;
}
.attendance-form-curriculum select:disabled,
.attendance-form-schedule__section select:disabled {
    border: 1px dashed #ced4da !important;
    background-color: #ffffff00 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}
/* Если хочешь оставить стрелочку у селектора, но сделать её серой */
.attendance-lesson-student-item .form-select:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
}
.ap-picker {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 75vh;
}

.ap-picker-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}

.ap-section {
    margin-bottom: 24px;
}

.ap-section:last-child {
    margin-bottom: 0;
}

.ap-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 12px;
    padding-left: 4px;
    letter-spacing: 0.3px;
}

.ap-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ap-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.2s;
    position: relative;
}

.ap-card[data-selectable="1"] {
    cursor: pointer;
    border-color: #1b8655;
    background: linear-gradient(to right, #f2fff9, #fff);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.1);
}
.ap-card[data-selectable="1"]:hover {
    border-color: #1b8655;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.ap-card[data-selectable="1"]::before {
    content: '✓';
    position: absolute;
    top: 14px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: #1b8655;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s;
}

.ap-card[data-selectable="1"]:hover::before {
    opacity: 1;
}

/* Неподходящие - приглушенные */
.ap-card[data-selectable="0"] {
    background: #fff;
    border-color: #f1f5f9;
    opacity: 0.75;
}

.ap-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.ap-card-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.4;
}

.ap-card[data-selectable="0"] .ap-card-title {
    color: #64748b;
}

.ap-card-id {
    font-family: monospace;
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.ap-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 10px;
    font-size: 13px;
}

.ap-card-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
}

.ap-card[data-selectable="0"] .ap-card-info {
    color: #94a3b8;
}

.ap-card-info-icon {
    opacity: 0.5;
    font-size: 14px;
}

.ap-card-lessons {
    font-weight: 600;
    color: #1e293b;
}

.ap-card[data-selectable="1"] .ap-card-lessons {
    color: #1b8655;
}

.ap-card-lessons-total {
    font-weight: normal;
    color: #94a3b8;
}

.ap-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end; /* ← добавьте это */
}

.ap-card-error {
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
    margin-right: auto; /* ← это уже есть, оставляем */
}

@media (max-width: 640px) {
    .ap-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .ap-card-error {
        margin-right: 0;
    }
}

.ap-btn-edit {
    background: #fff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.ap-btn-edit:hover {
    background: #f8fafc;
    border-color: #64748b;
    color: #1e293b;
}

.ap-status-badge {
    background: #1b8655;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ap-actions-area {
    flex: 0 0 auto;
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
}

.ap-empty {
    text-align: center;
    padding: 48px 16px;
    color: #64748b;
    font-size: 14px;
}

.ap-popover {
    position: fixed;
    z-index: 100000;
    background: #fff;
    border: 0px;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
    overflow: hidden;

    opacity: 0;
    transform: translateY(6px) scale(.98);
    transition: opacity .12s ease, transform .12s ease;
}
.ap-popover.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ap-popover-body {
    padding: 0;
}


.attendance-room-btn--disabled{
    opacity:.45;
    cursor:not-allowed;
}
/* Подсветка кнопки «Перенести» */
.attendance-reschedule-glow {
    animation: rescheduleGlow 0.8s ease-in-out 1;
}

@keyframes rescheduleGlow {
    0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 1); }
    40%  { box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}
.attendance-lesson__status.btn-outline-secondary {
    border: 1px solid #00000016;
    color: #374151;
    border-radius: 6px;
    height: 40px;
    width: 300px;
}

.attendance-lesson__status.btn-outline-secondary:hover {
    border-color: #00000016;
}

/* Контейнер поп-апа (базовые стили, если их нет) */
.ap-popover {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 0px;
    overflow: hidden; /* чтобы углы не торчали */
}

/* Кнопка закрытия */
.ap-popover-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    color: #888;
    font-size: 20px;
    line-height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    z-index: 10; /* поверх контента */
}

.ap-popover-close:hover {
    background: #e0e0e0;
    color: #333;
}

/* Отступ для контента, чтобы он не налезал на крестик */
/* .ap-popover-body {
    padding-top: 20px;
} */

.attendance-lesson__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;

    /* дефолты */
    color: var(--bs-btn-color, #6c757d);
    background: var(--bs-btn-bg, transparent);
    border-color: var(--bs-btn-border-color, #6c757d);
}

/* outline-* работают через переменные, мы их используем */
.attendance-lesson__status.btn-outline-secondary,
.attendance-lesson__status.btn-outline-success,
.attendance-lesson__status.btn-outline-danger,
.attendance-lesson__status.btn-outline-warning {
    background: transparent;
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

/* solid success (текущий урок) */
.attendance-lesson__status.btn-success {
    color: var(--bs-btn-color, #fff);
    background: var(--bs-btn-bg, #198754);
    border-color: var(--bs-btn-border-color, #198754);
}

/* Поле даты: всегда пунктир, так как оно всегда readonly */
#classroom-attendance-date {
    background-color: #ffffff00 !important;
    border: 1px dashed #ced4da !important;
    color: #212529 !important;
    cursor: default !important;
    opacity: 1 !important;
}

/* Поля времени: пунктир только когда они readonly */
#classroom-attendance-time1[readonly],
#classroom-attendance-time2[readonly] {
    background-color: #ffffff00 !important;
    border: 1px dashed #ced4da !important;
    color: #212529 !important;
    cursor: default !important;
    opacity: 1 !important;
}

/* Убираем лишние иконки выбора времени, если редактирование запрещено */
#classroom-attendance-time1[readonly]::-webkit-calendar-picker-indicator,
#classroom-attendance-time2[readonly]::-webkit-calendar-picker-indicator {
    display: none;
}
/* Старый стиль - оставьте как есть */
.attendance-lesson .disabled-notice {
    background-color: #ffffff00 !important;
    border: 1px dashed #ced4da !important;
    padding: 8px 12px;
    display: inline-block;
    border-radius: 4px;
    cursor: not-allowed !important;
}

/* Добавьте новый селектор для вашего случая */
#attendance-students-form-table .disabled-notice {
    background-color: #ffffff00 !important;
    border: 1px dashed #ced4da !important;
    padding: 8px 12px;
    display: inline-block;
    border-radius: 4px;
    cursor: not-allowed !important;
}
.width-300{
    min-width: 300px;
}


/* ------------------------------------------------------------
Attendance lesson — disabled buttons style (единый стиль)
------------------------------------------------------------ */

#attendance-lesson-save-btns .btn.disabled,
#attendance-lesson-save-btns .btn:disabled {
    background-color: #ffffff00 !important;
    border: 1px dashed #ced4da !important;
    opacity: 1 !important;
    color: #212529 !important;

    appearance: none;
    cursor: not-allowed !important;
    pointer-events: auto !important;

    box-shadow: none !important;
}
   
.import-controls {
    padding: 12px;
    border-radius: 10px;
    background: #fff;
}

/* Стили для кастомных селектов */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select-wrapper select,
.form-select-custom {
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ddd;
    width: 100%;
    padding: 8px 35px 8px 12px;
    
    /* ВАЖНО: Отключаем глобальные стили */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    /* Убираем фоновую картинку из глобального стиля */
    background-image: none !important;
}

/* Наша кастомная стрелочка через ::after */
.custom-select-wrapper::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 16px;
    height: 16px;
    
    /* Используем ту же SVG стрелочку из глобального стиля */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%23444444'%3E%3Cpath fill-rule='nonzero' d='M10.908 14.623l6.139-6.14c.5-.499.5-1.315 0-1.815l-.172-.174a1.29 1.29 0 0 0-1.817 0L10 11.553l-5.06-5.06a1.288 1.288 0 0 0-1.814 0l-.173.175c-.5.5-.5 1.316 0 1.816l6.14 6.139a1.288 1.288 0 0 0 1.815 0'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* Стиль для disabled состояния */
.custom-select-wrapper select:disabled,
.form-select-custom:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Стрелочка тоже должна быть полупрозрачной для disabled */
.custom-select-wrapper select:disabled ~ .custom-select-wrapper::after {
    opacity: 0.5;
}

.task-select.form-check {
    padding-left: 0px;
}

.right-course-details .course-side-bar {
    margin-left: 6px;
    margin-right: 6px;
}
.right-course-details .course-side-bar.selected {
    border: 2px solid #f5a858;
}

.crm-nav-link {
    padding: 6px 10px !important
}
/* Поднимаем все модальные окна выше центра */
.lucid-backdrop {
    align-items: flex-start !important;
    padding-top: 120px!important;
}

.swm-row-sub-small {
    font-size: 10px;
    color: rgba(0,0,0,.55);
    margin-top: 2px;
    line-height: 1.2;
    max-width: 100%;
    word-break: break-word;
}

.lesson-recordings-trigger {
    position: relative;
}

.lesson-recordings-btn {
    position: relative;
    border: none;
    background: transparent;
    color: #9aa0a6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
    padding: 2px 6px;
}

.lesson-recordings-btn svg {
    width: 20px;
    height: auto;
}

.lesson-recordings-btn.is-active {
    color: var(--color-youtube, #ED4141);
}

.lesson-recordings-btn.is-empty {
    opacity: .45;
    filter: grayscale(1);
}

.lesson-recordings-btn:hover {
    opacity: 1;
    filter: none;
}

.lesson-recordings-count {
    position: absolute;
    right: -2px;
    top: -5px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    padding: 0 4px;
    font-style: normal;
}

.lesson-recordings-modal {
    display: grid;
    gap: 16px;
}

.attendance-homework-review-btn {
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.1254901961);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    color: inherit;
}

.attendance-homework-review-btn:hover {
    background: rgba(0, 0, 0, 0.2509803922);
}

.attendance-homework-review-btn svg {
    height: 20px;
    width: auto;
    color: #515151;
}

.lesson-recordings-note,
.lesson-recordings-empty,
.lesson-recordings-error {
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
}

.lesson-recordings-error {
    color: #b42318;
    background: #fff4f2;
}

.lesson-recordings-list {
    display: grid;
    gap: 14px;
}

.lesson-recordings-item {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 16px;
}

.lesson-recordings-item__main {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.lesson-recordings-item__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.lesson-recordings-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #5f6368;
    font-size: 13px;
}

.lesson-recordings-meta span {
    border-radius: 999px;
    background: #f1f3f4;
    padding: 4px 8px;
}

.lesson-recordings-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.lesson-recordings-actions select {
    min-width: 150px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
}

.lesson-recordings-actions .btn {
    width: auto;
    min-width: 98px;
    padding: 8px 12px;
}

.lesson-recordings-player {
    margin-top: 14px;
}

.lesson-recordings-player video {
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: 12px;
}

.lesson-recordings-player__fallback {
    margin-top: 8px;
    color: #5f6368;
    font-size: 13px;
}

@media (max-width: 768px) {
    .lesson-recordings-item__main {
        display: grid;
    }

    .lesson-recordings-actions {
        justify-content: flex-start;
    }

    .lesson-recordings-actions .btn,
    .lesson-recordings-actions select {
        width: 100%;
    }
}