:root{
--primary-blue:#0f68f8;
--primary-dark:#0f68f8;
--sidebar-bg:#ffffff;
--text-dark:#1a1a1a;
--text-grey:#6b7280;
--light-blue-bg:#ebf5ff;
--card-glass:rgba(255, 255, 255, 0.2);
--border-radius:24px;
--modal-radius:24px;
--success-green:#10b981;
--success-bg:#d1fae5;
--danger-red:#ef4444;
--absent-color:#fee2e2;
--late-color:#fef3c7;
--warning-yellow:#ffd700;
--holiday-color:#ffffff;
--meeting-color:#3b82f6;
--excursion-color:#8b5cf6;
--other-color:#f59e0b;
--mriia-wide-page-width:1800px;
}html{
scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
background-color:var(--primary-blue);
width:100% !important;
height:100% !important;
overflow:hidden !important;
}*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Inter", sans-serif;
}body{
display:flex;
height:108.69565% !important;
width:108.69565% !important;
background-color:var(--primary-blue);
overflow:hidden !important;
transform:scale(0.92) !important;
transform-origin:top left !important;
}
@font-face {
font-family: "Inter";
src: url("../UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg-DTDqJMc6.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg-DeRxoV32.woff2") format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg-DXygfkDE.woff2") format("woff2");
font-style: normal;
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg-BxNEQG5A.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "KaTeX_Main";
src: url("../fonts/Katex/KaTeX_Main-Regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "KaTeX_Main";
src: url("../fonts/Katex/KaTeX_Main-Bold.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "KaTeX_Main";
src: url("../fonts/Katex/KaTeX_Main-Italic.woff2") format("woff2");
font-style: italic;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "KaTeX_Math";
src: url("../fonts/Katex/KaTeX_Math-Italic.woff2") format("woff2");
font-style: italic;
font-weight: 400;
font-display: swap;
}
.mriia-local-icon {
display: inline-block;
width: 1em;
height: 1em;
background-color: transparent !important;
line-height: 1;
vertical-align: -0.125em;
font-family: inherit;
font-style: normal;
}
.mriia-local-icon .mriia-inline-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
color: inherit;
fill: none;
stroke: none;
pointer-events: none;
}
.mriia-local-icon-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.mriia-colored-icon-image {
display: block;
}
.mriia-content-icon {
background: transparent !important;
}
#home svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.mriia-menu-icon {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 9px;
flex: 0 0 auto;
object-fit: contain;
}
.support-icon {
width: 15px !important;
height: 15px !important;
}
.logout-icon {
width: 15px !important;
height: 15px !important;
}
.user-logout-full .logout-icon {
filter: brightness(0) saturate(100%) !important;
}
.mriia-local-icon-image {
width: 100%;
height: 100%;
}
.mriia-content-icon,
.mriia-content-icon .mriia-local-icon-image {
width: 18px !important;
height: 18px !important;
}
#journals .nav-btn .mriia-local-icon,
#journals .nav-btn .mriia-local-icon-image {
width: 18px !important;
height: 18px !important;
}
#journals .nav-btn .mriia-local-icon-image {
filter: brightness(0) invert(1) !important;
}
#gradebook-view .mriia-local-icon,
#gradebook-view .mriia-local-icon-image,
.gb-wrapper .mriia-local-icon,
.gb-wrapper .mriia-local-icon-image,
.gb-tabs-row .mriia-local-icon,
.gb-tabs-row .mriia-local-icon-image,
.nav-zoom-box .mriia-local-icon,
.nav-zoom-box .mriia-local-icon-image {
background-color: transparent !important;
filter: brightness(0) invert(1) !important;
}
#calendar .schedule-nav-arrow-btn .mriia-local-icon,
#calendar .schedule-nav-arrow-btn .mriia-local-icon-image,
#schedule .schedule-nav-arrow-btn .mriia-local-icon,
#schedule .schedule-nav-arrow-btn .mriia-local-icon-image {
width: 25px !important;
height: 25px !important;
}
#calendar .schedule-nav-arrow-btn .mriia-local-icon-image,
#schedule .schedule-nav-arrow-btn .mriia-local-icon-image {
filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%) !important;
}
#modal-schedule-lesson .schedule-popover-chip {
background: #edf5ff;
border-color: #cfe3ff;
color: #234d92;
}
#modal-schedule-lesson .schedule-popover-chip span {
color: #234d92;
}
#modal-schedule-lesson .schedule-popover-chip .mriia-local-icon,
#modal-schedule-lesson .schedule-popover-chip .mriia-local-icon-image {
width: 18px !important;
height: 18px !important;
color: #234d92 !important;
}
#modal-schedule-lesson .schedule-popover-chip .mriia-local-icon-image {
filter: brightness(0) saturate(100%) invert(28%) sepia(39%) saturate(844%) hue-rotate(197deg) brightness(92%) contrast(101%) !important;
}
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user,
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user svg,
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user path,
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user * {
color: inherit !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.mriia-local-icon::before {
content: none !important;
}
.nav-item .mriia-icon-users,
.nav-item .mriia-icon-headset {
width: 15px !important;
height: 15px !important;
margin-right: 9px !important;
flex: 0 0 auto;
font-size: 15px !important;
}
.sidebar .nav-item > .nav-icon {
width: 15px !important;
height: 15px !important;
filter: brightness(0) saturate(100%);
}
.mriia-icon-users {
filter: none;
}
.mriia-icon-headset {
filter: none;
}
.mriia-icon-chevron-down,
.mriia-icon-chevron-up,
.mriia-icon-chevron-left,
.mriia-icon-chevron-right,
.mriia-icon-angle-left,
.mriia-icon-angle-right {
filter: none;
}
.sidebar .nav-item > .mriia-icon-chevron-down,
.sidebar .nav-item > .mriia-icon-chevron-up,
.sidebar .nav-item > .mriia-icon-chevron-left,
.sidebar .nav-item > .mriia-icon-chevron-right {
filter: none;
}
.sidebar .nav-item > .mriia-local-icon {
filter: brightness(0) saturate(100%) !important;
}
.sidebar .nav-item.active > .nav-icon,
.sidebar .nav-item.active > .mriia-local-icon {
filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%) !important;
}
.sidebar .nav-item.expanded > .nav-icon {
filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%) !important;
}
.sidebar .nav-item.expanded > .mriia-local-icon {
filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%) !important;
}
.sidebar .nav-item.expanded > .arrow {
border-bottom-color: currentColor !important;
}
.sidebar .nav-item.active > .arrow {
border-bottom-color: currentColor !important;
}
#tab-learning .big-card .title-icon-badge {
background: transparent !important;
}
.mriia-local-icon.fa-spin .mriia-local-icon-image {
animation: mriia-local-icon-spin 1s linear infinite;
}
@keyframes mriia-local-icon-spin {
to { transform: rotate(360deg); }
}
#modal-grade-edit .grade-popover-circle-input:focus,
#modal-grade-edit .grade-popover-circle-input:focus-visible{outline:none !important;box-shadow:none !important;}
#login-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--primary-blue);
z-index:2000;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}.login-card{
background:white;
padding:40px;
border-radius:30px;
width:400px;
text-align:center;
}.login-logo{
font-size:32px;
font-weight:bold;
font-style:italic;
color:var(--primary-blue);
margin-bottom:10px;
}.login-input{
width:100%;
padding:14px;
border:none;
border-radius:12px;
margin-top:20px;
font-size:16px;
outline:none;
box-shadow:none;
}.login-input:focus{
border:none;
box-shadow:none;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
textarea,
select,
.form-input,
.form-select,
.form-textarea,
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus{
border:none !important;
border-width:0 !important;
box-shadow:none !important;
outline:none !important;
}
.login-btn{
width:100%;
padding:14px;
background:var(--primary-blue);
color:white;
border:none;
border-radius:12px;
margin-top:20px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:0.2s;
}.login-btn:hover{
background:var(--primary-dark);
}.hint{
margin-top:20px;
font-size:12px;
color:#888;
background:#f9f9f9;
padding:10px;
border-radius:8px;
}@supports not selector(::-webkit-scrollbar){
html,
body,
.sidebar-scroll,
.main-content{
scrollbar-width:thin;
scrollbar-color:rgba(15, 104, 248, 0.45) rgba(15, 23, 42, 0.08);
}}html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar,
.main-content::-webkit-scrollbar{
width:12px;
height:12px;
}html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track{
background:rgba(15, 23, 42, 0.08);
border-radius:999px;
}html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar-scroll::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb{
background:rgba(15, 104, 248, 0.45);
border-radius:999px;
border:3px solid rgba(15, 23, 42, 0.08);
}.main-content::-webkit-scrollbar-track,
#mobile-day-strip::-webkit-scrollbar-track,
#login-screen::-webkit-scrollbar-track,
#idgov-screen::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.18);
border-radius:999px;
}.main-content::-webkit-scrollbar-thumb,
#mobile-day-strip::-webkit-scrollbar-thumb,
#login-screen::-webkit-scrollbar-thumb,
#idgov-screen::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.9);
border-radius:999px;
border:3px solid rgba(255, 255, 255, 0.18);
}.main-content::-webkit-scrollbar-thumb:hover,
#mobile-day-strip::-webkit-scrollbar-thumb:hover,
#login-screen::-webkit-scrollbar-thumb:hover,
#idgov-screen::-webkit-scrollbar-thumb:hover{
background:#ffffff;
}@supports not selector(::-webkit-scrollbar){
.main-content,
#mobile-day-strip,
#login-screen,
#idgov-screen{
scrollbar-color:rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.18);
}}html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner,
html::-webkit-resizer,
body::-webkit-resizer,
*::-webkit-resizer{
background:transparent !important;
display:none !important;
}*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button{
display:none !important;
width:0 !important;
height:0 !important;
background:transparent !important;
background-image:none !important;
border:0 !important;
opacity:0 !important;
-webkit-appearance:none !important;
}*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button:increment,
*::-webkit-scrollbar-button:decrement{
display:none !important;
width:0 !important;
height:0 !important;
background:transparent !important;
background-image:none !important;
border:0 !important;
opacity:0 !important;
-webkit-appearance:none !important;
}#mobile-topbar,
#mobile-day-strip,
#mobile-bottom-nav,
#mobile-sidebar-backdrop{
display:none;
}.sidebar{
width:218px;
background-color:var(--sidebar-bg);
min-height:100vh;
height:100vh;
display:flex;
flex-direction:column;
padding:14px 10px 0 10px;
border-radius:0;
overflow:hidden;
flex-shrink:0;
z-index:10020;
}@media (min-width:901px){
.sidebar{
--sidebar-ui-scale:0.97;
}.sidebar > .logo-area,
.sidebar > .sidebar-scroll,
.sidebar > .user-profile{
zoom:var(--sidebar-ui-scale);
}.sidebar > .user-profile{
margin-bottom:-6px;
}}@supports (height:100dvh){
.sidebar{
min-height:100dvh;
height:auto;
}}.sidebar-scroll{
overflow-y:auto;
overflow-x:hidden;
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
margin-top:0px;
padding-bottom:12px;
margin-right:-7px;
padding-right:12px;
}.sidebar-scroll::-webkit-scrollbar{
width:9.5px;
height:9.5px;
}.sidebar-scroll::-webkit-scrollbar-thumb{
border:1px solid rgba(15, 23, 42, 0.08);
}.sidebar .logo-area .top-controls-oval{
background:transparent;
border-radius:0;
padding:0;
display:flex;
gap:16px;
align-items:center;
margin-left:32px !important;
}.oval-btn{
background:transparent;
border:none;
cursor:pointer;
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:4px;
color:var(--primary-blue);
transition:
background 0.15s,
transform 0.08s;
}.oval-btn:hover{
background-color:rgba(28, 119, 255, 0.06);
}.oval-btn i{
font-size:12px;
width:12px;
height:12px;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}#fullscreen-btn i,
#pin-toggle i{
font-size:12px;
}.control-divider{
display:none;
}.pin-icon{
position:relative;
display:inline-block;
width:22px;
height:20px;
border:2px solid currentColor;
border-radius:5px;
box-sizing:border-box;
}.pin-icon::before{
content:"";
position:absolute;
left:4px;
top:-1px;
width:2px;
height:20px;
border-radius:1px;
background-color:currentColor;
transform:none;
display:block;
pointer-events:none;
}.oval-btn[aria-pressed="false"] .pin-icon::before{
left:10px;
}#fullscreen-btn{
position:relative;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 10 14M14 10 21 3M3 21h8M3 21v-8M21 3h-8M21 3v8' fill='none' stroke='%231a69f3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position:center;
background-repeat:no-repeat;
background-size:21px 21px;
}#fullscreen-btn svg,
#pin-toggle .pin-icon svg{
display:none;
}button,
.action-btn{
border-radius:999px !important;
}
#pin-toggle{
width:36px;
height:36px;
}
.action-btn{
border-radius:999px !important;
}#journals .action-btn,
#journals .btn,
#journals .gb-subbar > button,
#journals .journal-link,
#journals .journal-tab-button,
#journals .journal-controls button,
#gradebook-view .action-btn,
#gradebook-view .btn,
#gradebook-view .nav-zoom-box .nav-btn{
border-radius:6px !important;
}.journal-tab,
.journal-sub-tab{
border-radius:12px !important;
}.journal-admin-btn{
border-radius:14px !important;
}#class-admin-panel{
width:auto !important;
position:relative;
padding:0;
margin-left:-20px !important;
margin-right:-20px !important;
margin-bottom:8px !important;
}#class-admin-page-title,
.class-admin-header-title{
margin:0 0 6px 0 !important;
padding:0 !important;
margin-left:-20px !important;
line-height:1.2 !important;
}#journals-list-view.journal-class-card-layout #journal-filters{
margin-bottom:0 !important;
}#class-admin-panel .class-admin-card{
background:linear-gradient(180deg, #2b9bff 0%, #1c77ff 100%) !important;
border-radius:20px !important;
padding:30px 36px 30px 30px !important;
display:grid !important;
grid-template-columns:240px 1fr !important;
align-items:end !important;
gap:20px !important;
min-height:180px !important;
position:relative !important;
border:none !important;
}#class-admin-panel .class-admin-kicker{
position:absolute !important;
top:30px !important;
left:30px !important;
font-size:13px !important;
color:rgba(255, 255, 255, 0.8) !important;
font-weight:600 !important;
margin:0 !important;
}#class-admin-panel .class-admin-left-side{
display:flex !important;
flex-direction:column !important;
gap:15px !important;
align-items:flex-start !important;
padding-bottom:5px !important;
min-width:0 !important;
}#class-admin-panel .class-admin-bubble{
height:28px !important;
padding:0 10px !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-weight:575 !important;
font-size:14px !important;
width:fit-content !important;
max-width:160px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
border:none !important;
margin-top:6px !important;
margin-bottom:0 !important;
}#class-admin-panel .class-admin-title{
font-size:20px !important;
font-weight:575 !important;
color:#ffffff !important;
line-height:1 !important;
margin:0 !important;
max-width:none !important;
}.gb-admin-journal-subtitle{
margin:4px 0 10px 5px;
padding:0 8px;
font-size:22px;
font-weight:800;
color:#ffffff;
line-height:1.15;
}#gb-crumb-class,
#gb-crumb-subject{
font-size:18px !important;
font-weight:700 !important;
color:#ffffff !important;
}#class-admin-panel .class-admin-actions-scroll{
display:flex !important;
gap:15px !important;
justify-content:flex-start !important;
overflow-x:auto !important;
padding:10px 0 !important;
align-items:end !important;
width:100% !important;
-webkit-overflow-scrolling:touch !important;
}#class-admin-panel .class-admin-actions-scroll::-webkit-scrollbar{
height:6px !important;
}#class-admin-panel .class-admin-actions-scroll::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.3) !important;
border-radius:3px !important;
}#class-admin-panel .class-admin-actions-scroll::-webkit-scrollbar-track{
background:transparent !important;
}#class-admin-panel .journal-admin-btn{
width:140px !important;
min-width:140px !important;
height:120px !important;
background:#ffffff !important;
border-radius:20px !important;
padding:15px !important;
display:flex !important;
flex-direction:column !important;
justify-content:space-between !important;
align-items:flex-start !important;
border:none !important;
cursor:pointer !important;
transition:transform 0.2s !important;
}#class-admin-panel .journal-admin-btn:hover{
}#class-admin-panel .class-admin-icon-box{
width:36px !important;
height:36px !important;
border-radius:12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}#class-admin-panel .class-admin-icon-box svg{
width:20px !important;
height:20px !important;
display:block !important;
}#class-admin-panel .class-admin-icon-box i{
font-size:22px !important;
width:22px !important;
height:22px !important;
}#class-admin-panel .class-admin-btn-label{
font-size:14px !important;
font-weight:700 !important;
color:#111 !important;
line-height:1.2 !important;
text-align:left !important;
}@media (max-width:820px){
#class-admin-panel{
margin-left:-20px !important;
margin-right:-20px !important;
}#class-admin-panel .class-admin-card{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:15px !important;
padding:20px 36px 20px 20px !important;
min-height:auto !important;
}#class-admin-panel .class-admin-kicker{
position:static !important;
margin-bottom:5px !important;
left:auto !important;
top:auto !important;
}#class-admin-panel .class-admin-left-side{
padding-bottom:0 !important;
}#class-admin-panel .class-admin-actions-scroll{
width:100% !important;
overflow-x:auto !important;
padding-bottom:10px !important;
}}.lesson-day-header-flex .header-comma{
color:#ffffff;
}.header-comma{
color:#ffffff;
}.sidebar{
transition:width 0.25s ease;
width:218px;
}.sidebar.collapsed{
width:72px;
}.sidebar.collapsed .logo img{
width:36px;
height:36px;
}.sidebar.collapsed .nav-item{
font-size:0;
padding-left:0;
padding-right:0;
margin-left:0;
width:48px;
min-height:44px;
margin:2px auto;
border-radius:12px;
justify-content:center;
align-self:unset;
}.sidebar.collapsed .nav-item i{
margin-right:0;
font-size:18px;
}.sidebar.collapsed .nav-item .nav-icon{
margin-right:0;
width:20px;
height:20px;
}.sidebar.collapsed .nav-item .arrow{
display:none;
}.sidebar.collapsed .submenu{
display:none !important;
}.sidebar.collapsed .logo-area{
justify-content:center;
padding-left:0;
padding-right:0;
margin-left:0;
margin-right:0;
}.sidebar.collapsed .top-controls-oval{
display:none;
}.sidebar.collapsed .user-profile{
display:none !important;
width:72px;
padding:0 8px 10px;
}.sidebar.collapsed .user-card-inner{
margin:0;
padding:8px 4px;
min-height:0;
align-items:center;
gap:8px;
border-radius:14px;
}.sidebar.collapsed .user-card-top{
justify-content:center;
}.sidebar.collapsed .user-card-top .user-name,
.sidebar.collapsed .user-logout-full span{
display:none;
}.sidebar.collapsed .user-logout-full{
width:36px;
height:36px;
padding:0;
border-radius:10px;
gap:0;
font-size:0;
}.sidebar.collapsed .user-logout-full i{
margin:0;
font-size:26px;
}.sidebar.collapsed .avatar{
width:36px;
height:36px;
font-size:12px;
}@media (min-width:901px){
.sidebar.collapsed:hover{
width:218px;
}.sidebar.collapsed:hover .nav-item{
font-size:14px;
padding-left:10px;
padding-right:10px;
width:100%;
margin:0;
border-radius:10px;
justify-content:flex-start;
}.sidebar.collapsed:hover .nav-item i{
margin-right:8px;
}.sidebar.collapsed:hover .nav-item .nav-icon{
margin-right:8px;
}.sidebar.collapsed:hover .submenu{
display:block !important;
}.sidebar.collapsed:hover .logo-area{
justify-content:space-between;
padding-left:8px;
padding-right:8px;
}.sidebar.collapsed:hover .top-controls-oval{
display:flex;
}.sidebar.collapsed:hover .user-profile{
display:block !important;
width:100%;
padding:0 0 12px;
}.sidebar.collapsed:hover .user-card-inner{
margin:0;
padding:4px 8px 12px;
min-height:62px;
align-items:stretch;
}.sidebar.collapsed:hover .user-card-top{
justify-content:flex-start;
}.sidebar.collapsed:hover .user-card-top .user-name,
.sidebar.collapsed:hover .user-logout-full span{
display:block;
}.sidebar.collapsed:hover .user-logout-full{
width:100%;
height:auto;
padding:10px;
border-radius:8px;
gap:8px;
font-size:13px;
}.sidebar.collapsed:hover .user-logout-full i{
margin-right:8px;
font-size:inherit;
}.sidebar.collapsed:hover .avatar{
width:42px;
height:42px;
font-size:14px;
}
}.logo-area{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:24px;
padding:0 8px;
}.logo{
margin-left:0px;
}.logo{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
height:auto;
background:transparent;
border-radius:0;
}.logo img{
display:block;
width:40.33px;
height:40.33px;
object-fit:contain;
}.year-display{
padding:10px 16px;
background:#f9fafb;
border-radius:12px;
margin-bottom:15px;
font-size:13px;
font-weight:600;
color:var(--text-dark);
display:flex;
justify-content:space-between;
align-items:center;
border:1px solid #eee;
}.school-year-btn{
padding:5px 10px;
border-radius:10px !important;
background:var(--primary-blue);
color:#ffffff;
border:2px solid #ffffff;
font-weight:700;
font-size:13px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
height:40px;
min-height:40px;
box-sizing:border-box;
}.school-year-btn .school-year-icon{
color:#ffffff;
font-size:14px;
}.nav-section{
display:flex;
flex-direction:column;
gap:0;
margin-bottom:19px;
}.sidebar-scroll > nav.nav-section:nth-of-type(2){
margin-bottom:4px;
}.nav-section > .nav-item{
margin-top:10px;
}.nav-section > .nav-item:first-child{
margin-top:0;
}body.admin-role .sidebar-scroll .nav-section > .nav-item{
margin-top:10px;
}body.admin-role .sidebar-scroll .nav-section > .nav-item:first-child{
margin-top:0;
}.nav-item{
display:flex;
align-items:center;
padding:9px 10px;
margin-top:6px;
margin-left:6px;
margin-right:-6px;
border-radius:10px;
color:var(--text-dark);
text-decoration:none;
font-weight:490;
font-size:13.5px;
transition:
background-color 0.2s,
color 0.2s;
cursor:pointer;
user-select:none;
box-sizing:border-box;
width:100%;
align-self:flex-start;
}.nav-item.collapsed,
.nav-item.expanded{
margin-top:2px;
margin-left:6px;
margin-right:-6px;
width:100%;
padding:9px 10px;
}.nav-item[onclick*="sub-extracurricular"]{
align-items:baseline;
}.nav-item[onclick*="sub-extracurricular"].collapsed,
.nav-item[onclick*="sub-extracurricular"].expanded{
padding:9px 10px;
margin-left:6px;
margin-right:-6px;
}.sidebar .nav-item{
font-size:12.5px;
}.nav-item:hover{
background-color:#f3f4f6;
}.nav-item.active{
background-color:var(--light-blue-bg);
color:var(--primary-blue);
}.nav-item .nav-icon{
transform:translateY(0);
}.nav-item i{
transform:translateY(0);
}.nav-item i:not(.extracurricular-icon){
width:20px;
margin-right:10px;
text-align:center;
font-size:18px;
}.nav-item .nav-icon{
width:20px;
height:20px;
margin-right:10px;
flex:0 0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
color:currentColor;
}.sidebar .nav-item i{
line-height:1;
}.sidebar .nav-item .nav-icon{
display:block;
}.sidebar.collapsed .nav-section > .nav-item,
.sidebar.collapsed .nav-item{
margin:10px auto 0 !important;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:48px !important;
height:44px;
min-height:44px;
margin:10px auto 0 !important;
padding:0 !important;
}.sidebar.collapsed .nav-item i,
.sidebar.collapsed .nav-item .nav-icon{
width:20px !important;
height:20px !important;
margin:0 !important;
flex:0 0 20px;
line-height:1;
transform:none;
}.sidebar.collapsed .feedback-item{
display:flex;
align-items:center;
justify-content:center;
width:48px !important;
height:44px;
min-height:44px;
margin:2px auto !important;
padding:0 !important;
}.sidebar.collapsed .feedback-item > div{
display:flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:20px !important;
font-size:0;
position:relative;
left:16px;
}.sidebar.collapsed .feedback-item > div > span{
display:none;
}.sidebar.collapsed .feedback-item > div > i{
width:20px !important;
height:20px !important;
margin:0 !important;
font-size:14px !important;
}@media (min-width:901px){
.sidebar.collapsed:hover .nav-section > .nav-item,
.sidebar.collapsed:hover .nav-item{
width:100% !important;
height:auto;
min-height:0;
margin:0 !important;
padding:10px !important;
justify-content:flex-start;
}.sidebar.collapsed:hover .nav-item i,
.sidebar.collapsed:hover .nav-item .nav-icon{
margin-right:8px !important;
}
.sidebar.collapsed:hover .feedback-item{
width:100% !important;
height:auto;
min-height:0;
margin:0 !important;
padding:10px !important;
justify-content:flex-start;
}
.sidebar.collapsed:hover .feedback-item > div{
width:auto;
height:auto;
justify-content:flex-start;
font-size:13px;
left:0;
}
.sidebar.collapsed:hover .feedback-item > div > span{
display:block;
}
.sidebar.collapsed:hover .feedback-item > div > i{
margin-right:8px !important;
font-size:13px !important;
}
}.nav-item .nav-icon *{
fill:currentColor;
}.submenu{
padding:0;
flex-direction:column;
gap:0;
margin:0;
box-sizing:border-box;
width:100%;
align-self:flex-start;
display:flex;
max-height:0;
overflow:hidden;
opacity:0;
transition:
max-height 0.32s cubic-bezier(0.2, 0.9, 0.3, 1),
opacity 0.18s ease;
}.submenu.open{
max-height:800px;
opacity:1;
}.nav-item + .submenu.open{
margin-top:0;
padding-top:0;
}.submenu .nav-item{
font-size:13.5px;
padding:9px 10px 9px 34px;
margin-top:2px;
margin-left:6px;
margin-right:-6px;
border-radius:10px;
color:var(--text-grey);
width:100%;
box-sizing:border-box;
align-self:flex-start;
}.sidebar .submenu .nav-item{
font-size:13.5px;
}.submenu .nav-item:hover{
color:var(--text-dark);
}.sidebar-divider{
display:block;
height:0;
border:none;
border-top:1px solid #c5d9eb !important;
background:transparent;
margin:20px -19px;
width:calc(100% + 32px);
position:relative;
z-index:6;
opacity:1;
border-radius:1px;
transform:translateZ(0);
flex:0 0 auto;
}.sidebar-scroll > nav.nav-section + .sidebar-spacer + .sidebar-divider{
margin-top:5px;
}body.teacher-role
.sidebar-scroll
> nav.nav-section
+ .sidebar-spacer
+ .sidebar-divider{
margin-top:2px;
}.sidebar-divider:focus,
.sidebar-divider:hover{
border-top-color:rgba(15, 23, 42, 0.28);
}.spacer{
flex-grow:1;
}.sidebar-spacer{
height:10px;
flex:0 0 auto;
}@media (min-width:901px) and (max-height:1000px){
:root{
--sidebar-divider_gap:clamp(10px, 2.2vh, 22px);
}body.teacher-role{
--sidebar-divider_gap:clamp(8px, 1.6vh, 16px);
}body.role-superadmin,
body.role-platform-admin,
body.role-deputy,
body.role-director{
--sidebar-divider_gap:clamp(12px, 2.8vh, 30px);
}.sidebar-scroll > .sidebar-spacer{
height:var(--sidebar-divider_gap) !important;
}.nav-section > .nav-item{
margin-top:8px;
}body.teacher-role .nav-section > .nav-item{
margin-top:7px;
}}body.admin-role
.sidebar-scroll
> nav.nav-section:first-of-type
+ .sidebar-spacer{
height:14px;
}@media (min-width:901px){
}#app-sidebar.sidebar .nav-section{
margin-bottom:0 !important;
}#app-sidebar.sidebar .nav-section > .nav-item{
margin-top:8px !important;
}#app-sidebar.sidebar .nav-section > .nav-item:first-child{
margin-top:0 !important;
}
#app-sidebar.sidebar .sidebar-scroll > .sidebar-spacer{
height:14px !important;
}#app-sidebar.sidebar .sidebar-divider{
margin-top:6px !important;
margin-bottom:8px !important;
}
#app-sidebar.sidebar .nav-item.expanded > .arrow{
border-bottom-color:currentColor !important;
}#app-sidebar.sidebar .nav-item.active > .arrow{
border-bottom-color:currentColor !important;
}.sidebar.collapsed .nav-section > .nav-item,
.sidebar.collapsed .nav-section > .nav-item:first-child,
.sidebar.collapsed .feedback-item{
margin-top:8px !important;
}
body.admin-role
.sidebar-scroll
> nav.nav-section:first-of-type
+ .sidebar-spacer
+ .sidebar-divider
+ .sidebar-spacer{
height:14px;
}body.admin-role
.sidebar-scroll
> nav.nav-section:nth-of-type(2)
+ .sidebar-spacer{
height:0px;
}.user-profile{
padding:0 0 12px 0;
margin-top:auto;
border-top:none;
position:relative;
bottom:auto;
left:auto;
width:100%;
background:var(--sidebar-bg);
z-index:9999;
box-sizing:border-box;
flex:0 0 auto;
}.sidebar:not(.collapsed) .user-profile{
margin-left:-6px;
margin-right:-6px;
width:calc(100% + 12px);
}.sidebar.collapsed .user-profile{
width:64px;
margin-left:0;
margin-right:0;
padding:0 12px 12px 12px;
overflow:hidden;
}.avatar{
width:42px;
height:42px;
background-color:var(--light-blue-bg);
color:var(--primary-blue);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size:14px;
}.user-profile .user-name{
color:#111;
font-weight:700;
font-size:13px;
margin-top:3px;
line-height:1.15;
white-space:normal;
overflow:visible;
text-overflow:clip;
}.user-profile .user-role{
display:none !important;
}.user-card-inner{
background:#ffffff;
border-radius:16px;
border:1px solid #e1ebf5;
padding:4px 8px 12px;
display:flex;
flex-direction:column;
gap:6px;
margin:0;
box-sizing:border-box;
justify-content:center;
min-height:62px;
font-size:13px;
}.sidebar.collapsed .user-card-inner{
margin:0 -12px;
padding:4px 8px 12px;
min-height:62px;
}.user-card-top{
display:flex;
align-items:center;
gap:8px;
}.user-card-top .avatar{
flex:0 0 auto;
}.user-card-top .user-name{
flex:1 1 auto;
}.user-logout-full{
width:100%;
background:#ffffff;
color:#111;
border:1px solid #e1ebf5;
padding:10px;
border-radius:8px;
font-weight:700;
text-align:center;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}.user-logout-full i{
color:#111;
}.logout-left{
color:#111 !important;
}.user-profile .nav-item.user-logout{
padding:12px;
}.main-content{
border-radius:10px;
flex-grow:1;
padding:20px 36px;
color:white;
font-size:14px;
overflow-y:auto;
position:relative;
display:none;
}.page-section{
display:none;
animation:fadeIn 0.12s ease-out;
}.page-section.active{
display:block;
}@keyframes fadeIn{
0%{
opacity:0.85;
}100%{
opacity:1;
}}.main-content .header,
.main-content .page-section,
.main-content > section,
.main-content > div:not(.header){
}.header{
margin-left:-15px;
margin-top:-4px;
}.header h1{
font-size:28px;
font-weight:500;
margin-bottom:4px;
line-height:1.15;
}.header p{
font-size:14px;
opacity:0.8;
margin-bottom:30px;
}#header-bottom{
opacity:1 !important;
color:#ffffff !important;
font-size:12px !important;
}.header.reduced-header #header-top{
display:flex;
align-items:baseline;
gap:0.5px;
}.header.reduced-header #header-top .subject-toggle-wrap{
align-self:center !important;
}.header.reduced-header #header-bottom{
margin-bottom:0 !important;
}.header .header-page-icon,
.header.reduced-header .header-page-icon{
display:inline-flex;
align-items:flex-end;
justify-content:center;
color:inherit;
font-size:15px;
line-height:1;
opacity:1;
transition:color 0.15s ease, opacity 0.15s ease;
}.header #header-top a:hover .header-page-icon,
.header #header-top .journal-link:hover ~ .header-page-icon,
.header #header-top:hover .header-page-icon,
.header .header-page-icon:hover{
opacity:1;
color:#ffffff;
}.header .header-page-icon svg,
.header .header-page-icon i,
.header .header-page-icon img,
.header.reduced-header .header-page-icon svg,
.header.reduced-header .header-page-icon i,
.header.reduced-header .header-page-icon img{
height:1em;
width:auto;
color:inherit;
fill:currentColor;
font-size:1em;
line-height:1;
vertical-align:-0.08em;
}.header.reduced-header .header-crumb-sep{
margin:0 12px;
}.header.reduced-header #header-top:has(.header-page-icon){
padding-left:4px;
}.header.reduced-header #header-top:has(.header-page-icon),
.header.reduced-header #header-top:has(.header-page-icon) > span{
font-weight:450 !important;
}.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}.subject-journal-toggle{
background:#0b84ff;
border:none;
width:30px;
height:30px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;
position:relative;
top:0;
}.subject-journal-toggle svg{width:14px;height:14px;display:block}.subject-journal-menu{
position:absolute;
background:#0b84ff;
color:#fff;
border-radius:10px;
padding:6px;
display:none;
min-width:240px;
max-height:320px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
z-index:60000;
}.subject-journal-menu::-webkit-scrollbar{width:10px}.subject-journal-menu::-webkit-scrollbar-track{background:transparent}.subject-journal-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:999px}.subject-journal-menu-item{
display:block;
background:transparent;
border:none;
outline:none;
color:#fff;
text-align:left;
width:100%;
padding:8px 10px;
font-size:14px;
cursor:pointer;
}.subject-journal-menu-item:hover{background:rgba(255,255,255,0.06)}.subject-journal-menu-item:focus{background:rgba(255,255,255,0.08)}.subject-journal-menu-admin-item{font-weight:700}.subject-journal-menu-empty{padding:8px 10px;color:rgba(255,255,255,0.95);opacity:0.95}#header-top > span{
display:inline-block;
max-width:100%;
}.header.reduced-header #header-top{
font-size:15.1px !important;
line-height:1 !important;
}.header.reduced-header #header-bottom{
font-size:10px !important;
line-height:1 !important;
}#header-top:has(span[onclick="calendarShowMonth()"]){
height:28px !important;
}.header.reduced-header .header-page-icon{
font-size:13px;
}button,
.btn,
.btn-primary,
.action-btn,
.nav-btn{
transition:
transform 0.12s ease,
background 0.18s ease,
opacity 0.18s ease;
}#journals button,
#journals .btn,
#journals .btn-primary,
#journals .action-btn,
#journals .nav-btn,
#schedule button,
#schedule .btn,
#schedule .btn-primary,
#schedule .action-btn,
#schedule .nav-btn{
}button:hover,
.btn:hover,
.btn-primary:hover,
.action-btn:hover,
.nav-btn:hover{
}#journals button:hover,
#journals .btn:hover,
#journals .btn-primary:hover,
#journals .action-btn:hover,
#journals .nav-btn:hover,
#schedule button:hover,
#schedule .btn:hover,
#schedule .btn-primary:hover,
#schedule .action-btn:hover,
#schedule .nav-btn:hover{
}button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.action-btn:focus-visible,
.nav-btn:focus-visible{
outline:none;
}#journals button:focus-visible,
#journals .btn:focus-visible,
#journals .btn-primary:focus-visible,
#journals .action-btn:focus-visible,
#journals .nav-btn:focus-visible,
#schedule button:focus-visible,
#schedule .btn:focus-visible,
#schedule .btn-primary:focus-visible,
#schedule .action-btn:focus-visible,
#schedule .nav-btn:focus-visible{
}.btn-primary{
background-color:var(--primary-blue);
color:white;
border:none;
padding:12px 24px;
border-radius:12px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
transition:
transform 0.1s,
background-color 0.2s;
}.btn-primary:hover{
background-color:var(--primary-dark);
}.btn-primary:active{
transform:scale(0.98);
}.card{
background-color:var(--card-glass);
border-radius:var(--border-radius);
padding:24px;
margin-bottom:20px;
border:1px solid rgba(255, 255, 255, 0.1);
}@supports not selector(::-webkit-scrollbar){
*{
scrollbar-width:thin;
scrollbar-color:rgba(147, 197, 253, 0.9) rgba(0, 0, 0, 0.04);
}}::-webkit-scrollbar{
width:8px;
height:8px;
}::-webkit-scrollbar-track{
background:transparent;
border-radius:999px;
}::-webkit-scrollbar-thumb{
background:rgba(147, 197, 253, 0.9);
border-radius:999px;
border:2px solid rgba(255, 255, 255, 0.6);
background-clip:padding-box;
}::-webkit-scrollbar-thumb:hover{
background:rgba(147, 197, 253, 1);
}::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement{
display:none !important;
width:0 !important;
height:0 !important;
}::-webkit-scrollbar-corner{
background:transparent !important;
}@supports not selector(::-webkit-scrollbar){
.sidebar,
.main-content,
.conversations-list,
.chat-messages,
.modal-window,
.storage-stats-grid,
.home-lesson-item{
scrollbar-color:rgba(147, 197, 253, 0.9) rgba(0, 0, 0, 0.04);
}#mobile-day-strip,
#modal-subjects-list{
scrollbar-width:thin;
}}.white-card{
background:white;
color:var(--text-dark);
border-radius:16px;
overflow:hidden;
padding:0;
}.home-side-widgets{
display:flex;
flex-direction:column;
gap:12px;
width:280px;
}.home-widget{
background:var(--light-blue-bg);
border-radius:14px;
padding:16px 8px;
color:#0f172a;
min-height:34px;
}.home-widget .widget-title{
font-size:13px;
font-weight:700;
color:#0f172a;
margin-bottom:8px;
}.home-class-name{
font-size:20px;
font-weight:800;
color:#0f172a;
}.home-class-meta{
color:#475569;
margin-top:8px;
font-size:13px;
}#home .home-shell{
display:flex;
gap:24px;
}#home .home-main{
flex:1;
min-width:0;
margin-right:10px;
}#home .home-toprow{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}#home .home-title{
font-size:24px;
font-weight:600;
color:white;
margin:0;
margin-left:-12px;
}#home .home-full-schedule-btn{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(255, 255, 255, 0.14);
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.06);
color:white;
cursor:pointer;
font-weight:700;
transition:0.15s;
padding:12px 18px;
font-size:16px;
white-space:nowrap;
flex-shrink:0;
margin-left:auto;
margin-right:0;
transform:translateX(0);
}#home .home-full-schedule-btn:hover{
background:rgba(255, 255, 255, 0.1);
}#home .home-schedule{
display:flex;
flex-direction:column;
gap:16px;
min-height:420px;
}#home .home-right{
--home-right-width:clamp(300px, 19vw, 350px);
width:var(--home-right-width);
min-width:var(--home-right-width);
max-width:var(--home-right-width);
display:flex;
flex-direction:column;
gap:3px;
margin-left:auto;
margin-right:-24px;
transform:translateX(-18px);
margin-top:-10px;
border-left:0;
}@media (min-width:1700px){
.home-my-class-card{
height:clamp(108px, 7.1vw, 130px);
}}@media (max-width:900px){
#home .home-right{
width:100%;
min-width:0;
max-width:100%;
margin-right:0;
transform:none;
}}#home .home-right-frame{
position:relative;
isolation:isolate;
border-radius:28px;
padding:15px 10px 10px 10px;
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.92) 0%,
rgba(28, 119, 255, 0.78) 100%
);
border:1px solid rgba(255, 255, 255, 0.14);
backdrop-filter:none;
overflow:visible;
}#home #home-my-class-widget{
position:relative;
z-index:0;
}#home .home-widget-title{
font-size:14.5px;
font-weight:800;
color:rgba(255, 255, 255, 0.92);
margin:0;
text-transform:none;
letter-spacing:0;
}#home .home-right-widgets-divider{
display:none;
border:none;
border-top:1px solid rgba(255, 255, 255, 0.38);
height:0;
margin:-8px 0 -2px 0;
width:100%;
max-width:100%;
box-sizing:border-box;
padding:0;
transform:translateY(14px);
position:relative;
z-index:0;
pointer-events:none;
opacity:1;
}#home
#home-my-class-widget[style*="display:flex"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:flex"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:block"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:block"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:inline-flex"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:inline-flex"]
~ .home-right-widgets-divider{
display:block;
}#home .home-right-widgets-divider + div{
position:relative;
z-index:2;
padding-top:22px;
}#home
#home-my-class-widget[style*="display:none"]
~ .home-right-widgets-divider
+ div,
#home
#home-my-class-widget[style*="display:none"]
~ .home-right-widgets-divider
+ div{
padding-top:6px;
}#home .home-empty{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:14px;
min-height:320px;
color:rgba(255, 255, 255, 0.92);
font-weight:700;
}#home .home-empty-icon{
width:78px;
height:78px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255, 255, 255, 0.18);
border:1px solid rgba(255, 255, 255, 0.22);
}#home .home-empty-icon i{
font-size:34px;
color:rgba(255, 255, 255, 0.95);
}#home .home-empty-text{
font-size:18px;
font-weight:700;
color:rgba(255, 255, 255, 0.98);
}#home .home-empty-img{
width:815px;
max-width:90%;
height:auto;
object-fit:contain;
}.home-journals-card{
background:linear-gradient(90deg, #eff6ff, #f0f9ff);
border-radius:14px;
padding:12px 8px;
min-height:120px;
border:1px solid rgba(28, 119, 255, 0.06);
}.home-journals-list{
display:flex;
flex-direction:column;
gap:8px;
}.home-journal-btn{
display:flex;
align-items:center;
gap:12px;
padding:12px 8px;
border-radius:8px !important;
background:#5c9bfc;
color:white;
font-weight:800;
cursor:pointer;
border:1px solid rgba(0, 0, 0, 0.06);
width:100%;
}.home-journal-btn:hover{
background:#4f8ff7;
}.home-journal-badge{
background:#ffb6c1 !important;
color:#000 !important;
padding:7px 12px;
border-radius:999px;
font-size:14.5px;
font-weight:800;
white-space:nowrap;
display:inline-flex;
align-items:center;
justify-content:center;
max-width:240px;
overflow:hidden;
text-overflow:ellipsis;
}#home-my-journals > .home-journal-btn:nth-child(-n + 5),
#home-my-journals > *:nth-child(-n + 5){
border-radius:22px !important;
overflow:hidden;
}.home-journal-subject{
font-size:15.5px;
line-height:1.2;
color:rgba(255, 255, 255, 0.92);
font-weight:700;
text-align:left;
flex:1;
}#home-my-journals > .home-journal-btn:nth-child(-n + 5) .home-journal-subject{
font-size:17px;
font-weight:600;
}.home-all-journals{
margin-top:10px;
display:flex;
justify-content:center;
}.home-all-journals .btn{
padding:10px 8px;
border-radius:999px !important;
background:transparent;
color:white;
font-weight:550;
border:1px solid rgba(255, 255, 255, 0.55);
cursor:pointer;
width:100%;
text-align:center;
font-size:16px;
height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
}.home-all-journals .btn:hover{
background:rgba(255, 255, 255, 0.1);
}.home-journals-frame{
background:transparent;
border-radius:14px;
padding:12px 8px;
color:inherit;
border:none;
}.home-my-class-card{
background:white;
color:#0f172a;
border-radius:18px;
padding:18px 10px;
height:108px;
transform-origin:top left;
position:relative;
}.home-class-arrow{
position:absolute;
right:12px;
bottom:12px;
width:30px;
height:30px;
border-radius:50%;
background:#ffffff;
border:3px solid var(--primary-blue);
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--primary-blue);
cursor:pointer;
transition:
transform 0.12s ease,
;
padding:0;
}.home-class-arrow i{
font-size:12px;
color:var(--primary-blue);
}.home-class-arrow-icon{
width:14px;
height:14px;
display:block;
}.home-class-arrow:hover{
transform:translateY(-2px);
}.home-my-class-card .home-my-class-text{
display:block;
width:calc(100% - 60px);
box-sizing:border-box;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
position:relative;
top:-2px;
left:6px;
}#home-my-class{
font-size:22px !important;
font-weight:500 !important;
}#home-my-journals .journal-class-badge{
color:#000 !important;
max-width:240px;
}.home-widget-dark{
background:transparent;
border-radius:0;
padding:0;
color:white;
border:none;
backdrop-filter:none;
}.home-widget-dark .home-my-class-text{
font-size:18px;
font-weight:800;
color:white;
text-align:left;
}.data-table{
width:100%;
border-collapse:collapse;
}.gb-sticky-col{
width:20px;
min-width:20px;
max-width:20px;
position:static;
left:0;
z-index:50;
}.gb-sticky-col-2{
width:200px;
min-width:160px;
max-width:320px;
position:static;
left:auto;
z-index:49;
}.gb-sticky-avg{
position:static;
left:auto;
z-index:48;
min-width:60px;
max-width:160px;
width:80px;
}th.gb-sticky-col-2 > div,
td.gb-sticky-col-2 > div{
padding-left:10px;
padding-right:8px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.data-table th{
text-align:left;
padding:16px;
background:#f9fafb;
color:#6b7280;
font-size:12px;
text-transform:uppercase;
font-weight:600;
}.data-table td{
padding:16px;
border-bottom:1px solid #e5e7eb;
font-size:14px;
vertical-align:middle;
}.role-badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}.role-admin{
background:#fee2e2;
color:#991b1b;
}.role-teacher{
background:#dbeafe;
color:#1e40af;
}.status-active{
background:var(--success-bg);
color:var(--success-green);
}.teachers-table-shell{
margin-left:0;
margin-right:0;
}#learning-rooms .white-card{
margin-left:-12px;
margin-right:-12px;
width:calc(100% + 24px);
}#learning-rooms .teachers-table-shell{
margin-left:0;
margin-right:0;
}#learning-rooms .teachers-card-head{
padding:10px 12px 8px 12px !important;
}#learning-rooms .teachers-search{
max-width:420px !important;
}#learning-rooms .data-table th{
padding:12px 12px;
font-size:11px;
}#learning-rooms .data-table td{
padding:12px 12px;
font-size:13px;
}.teachers-card{
border-radius:18px;
overflow:hidden;
border:1px solid rgba(255, 255, 255, 0.14);
display:flex;
flex-direction:column;
height:calc(108.69565vh - 118px);
min-height:420px;
}.teachers-card-head{
padding:16px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:12px;
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.92) 0%,
rgba(28, 119, 255, 0.78) 100%
);
border-bottom:1px solid rgba(255, 255, 255, 0.18);
color:#fff;
}.teachers-card-title{
font-size:18px;
font-weight:900;
}.teachers-toolbar{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}.teachers-toolbar .tbtn{
height:32px;
padding:0 10px;
border-radius:9px;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
font-weight:800;
font-size:13px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
}.teachers-toolbar .tbtn:hover{
background:rgba(255, 255, 255, 0.16);
}.teachers-toolbar .tselect{
height:32px;
border-radius:9px;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
font-weight:800;
font-size:13px;
padding:0 8px;
outline:none;
}.teachers-toolbar .tselect option{
color:#111;
}.teachers-search{
height:32px;
display:inline-flex;
align-items:center;
gap:8px;
padding:0 10px;
border-radius:9px;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
}.teachers-search input{
border:none;
outline:none;
background:transparent;
color:#fff;
font-weight:700;
font-size:13px;
width:210px;
max-width:55vw;
}.teachers-search input::placeholder{
color:rgba(255, 255, 255, 0.82);
}.teachers-table-wrap{
background:#fff;
color:#0f172a;
font-weight:800;
font-size:12px;
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
}.teachers-table-scroll{
flex:1 1 auto;
min-height:0;
overflow:auto;
}.teachers-table-wrap .data-table th{
background:#ffffff;
color:#6b7280;
border-bottom:1px solid #e5e7eb;
font-weight:900;
padding:10px;
font-size:11px;
}.teachers-table-wrap .data-table td{
background:#ffffff;
padding:10px;
font-size:12px;
font-weight:800;
}.teachers-table-wrap .data-table tr:hover td{
background:#f8fbff;
}.teachers-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border-top:1px solid #e5e7eb;
color:#475569;
font-weight:800;
font-size:11px;
}.teachers-pager{
display:flex;
align-items:center;
gap:8px;
}.teachers-pager .pbtn{
width:30px;
height:30px;
border-radius:9px;
border:1px solid #e5e7eb;
background:#fff;
color:#0f172a;
font-weight:900;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}.teachers-pager .pbtn.active{
background:var(--primary-blue);
border-color:var(--primary-blue);
color:#fff;
}.teachers-pager .pbtn:disabled{
opacity:0.45;
cursor:not-allowed;
}.teachers-perpage{
height:30px;
border-radius:9px;
border:1px solid #e5e7eb;
background:#f8fafc;
color:#0f172a;
font-weight:800;
font-size:11px;
padding:0 8px;
outline:none;
}#teachers .section-header{
margin-bottom:10px;
}.action-btn{
background:none;
border:none;
cursor:pointer;
color:var(--text-grey);
padding:5px;
font-size:16px;
transition:color 0.2s;
}.action-btn:hover{
color:var(--primary-blue);
}.action-btn.delete:hover{
color:var(--danger-red);
}.logout-btn{
display:inline-flex;
align-items:center;
gap:8px;
background:transparent;
border:none;
color:var(--text-grey);
padding:6px 8px;
border-radius:8px;
cursor:pointer;
font-weight:600;
font-size:13px;
}.logout-btn i{
font-size:14px;
}.logout-btn:hover{
color:var(--primary-blue);
background:rgba(28, 119, 255, 0.06);
}.journal-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:16px;
}#journals-list-view{
padding-right:62px;
}@media (min-width:1100px){
.journal-grid{
grid-template-columns:repeat(4, minmax(220px, 1fr));
}}@media (min-width:1700px) and (max-width:1800px){
.journal-grid{
grid-template-columns:repeat(5, minmax(220px, 1fr));
}}@media (min-width:1801px) and (max-width:1920px){
.journal-grid{
grid-template-columns:repeat(6, minmax(220px, 1fr));
}}@media (min-width:2200px) and (max-width:2500px){
.journal-grid{
grid-template-columns:repeat(5, minmax(220px, 1fr));
}}@media (min-width:2501px) and (max-width:2800px){
.journal-grid{
grid-template-columns:repeat(6, minmax(220px, 1fr));
}}@media (min-width:2801px) and (max-width:3200px){
.journal-grid{
grid-template-columns:repeat(7, minmax(220px, 1fr));
}}@media (min-width:3201px) and (max-width:3800px){
.journal-grid{
grid-template-columns:repeat(8, minmax(220px, 1fr));
}}@media (min-width:3801px){
.journal-grid{
grid-template-columns:repeat(10, minmax(220px, 1fr));
}}.teachers-grid{
display:grid;
grid-template-columns:repeat(4, minmax(220px, 1fr));
gap:16px;
}.journal-card{
background:white;
border-radius:18px;
padding:16px;
color:var(--text-dark);
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:140px;
cursor:pointer;
position:relative;
}body:not(.admin-role) .journal-card .journal-subject{
margin-top:auto;
}body.admin-role .journal-card .journal-subject{
margin-top:auto;
}.journal-top{
display:flex;
flex-direction:column;
gap:12px;
align-items:flex-start;
}.journal-card:hover{
transform:none;
}.journal-subject{
font-size:16.7px;
font-weight:590;
margin-bottom:4px;
color:var(--primary-blue);
margin-left:0;
line-height:1.35;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-word;
}.journal-card.hide-teacher-field .journal-teacher{
display:none;
}.journal-card.hide-teacher-field .journal-bottom{
flex:1 1 auto;
width:100%;
}.journal-card.hide-teacher-field .journal-bottom .journal-subject{
margin-top:auto;
}.subst-wrap{
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.92) 0%,
rgba(28, 119, 255, 0.78) 100%
);
border-radius:18px;
padding:14px;
border:1px solid rgba(255, 255, 255, 0.14);
}.subst-strip-title{
font-weight:900;
color:rgba(255, 255, 255, 0.92);
margin:2px 0 10px;
}.subst-strip{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(220px, 1fr);
gap:16px;
overflow-x:auto;
padding-bottom:8px;
scroll-snap-type:x mandatory;
}.subst-strip::-webkit-scrollbar{
height:8px;
}.subst-strip::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.18);
border-radius:999px;
}.subst-strip::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.06);
border-radius:999px;
}.journal-card.subst-card{
background:rgba(255, 255, 255, 0.98);
border:1px solid rgba(0, 0, 0, 0.05);
scroll-snap-align:start;
}.journal-card.subst-card:hover{
}.journal-class-badge{
display:inline-flex;
align-items:center;
justify-content:center;
background:#fee2e2;
color:#991b1b;
padding:4.5px 10px;
border-radius:999px;
font-size:14px;
font-weight:600;
margin-bottom:8px;
min-width:0;
text-align:center;
border:1px solid rgba(0, 0, 0, 0.04);
margin-left:0;
max-width:180px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.journal-badges-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}.journal-group-badge{
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(56, 189, 248, 0.18);
color:#111;
padding:4.5px 10px;
border-radius:999px;
font-size:14px;
font-weight:600;
margin-bottom:8px;
min-width:0;
text-align:center;
border:1px solid rgba(2, 132, 199, 0.25);
max-width:180px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.journal-teacher{
font-size:11.5px;
color:#666;
display:flex;
align-items:center;
gap:8px;
font-weight:600;
margin-left:0;
margin-top:auto;
}.journal-bottom{
margin-top:auto;
display:flex;
flex-direction:column;
justify-content:flex-end;
gap:6px;
padding-bottom:0 !important;
}.journal-bottom > .journal-subject{
height:auto !important;
line-height:1.35 !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
white-space:normal !important;
text-overflow:ellipsis !important;
word-break:break-word !important;
max-height:calc(1.35em * 2) !important;
}.journal-bottom > .journal-teacher{
height:auto !important;
line-height:18px !important;
margin:0 !important;
padding:0 !important;
align-self:stretch !important;
font-size:12px !important;
}.classes-parallel-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
gap:16px;
align-items:start;
}@media (min-width:1100px){
.classes-parallel-grid{
grid-template-columns:repeat(6, minmax(100px, 1fr));
}}.class-card{
background:#fff;
border-radius:18px;
padding:14px;
color:var(--text-dark);
display:flex;
flex-direction:column;
justify-content:space-between;
height:200px;
cursor:pointer;
border:1px solid rgba(0, 0, 0, 0.05);
}.class-card:hover{
}.class-card__top{
display:flex;
flex-direction:column;
gap:10px;
align-items:flex-start;
}.class-card__teacher{
font-size:16px;
font-weight:900;
line-height:1.15;
color:#0f172a;
margin-top:4px;
}.class-card__divider{
height:1px;
background:rgba(2, 6, 23, 0.1);
margin-top:10px;
margin-bottom:10px;
}.class-card__footer{
display:flex;
align-items:center;
gap:8px;
color:#6b7280;
font-size:14px;
font-weight:800;
margin-top:0;
}.class-card__footer svg{
width:16px;
height:16px;
color:#6b7280;
flex:0 0 auto;
}#journals-list-view{
display:flex;
flex-direction:column;
height:calc(108.69565vh - 106px);
min-height:0;
overflow:hidden;
}#journals-grid-body{
flex:1 1 auto;
min-height:0;
overflow:auto;
padding-right:6px;
}#journals-list-view{
height:calc(108.69565vh - 106px);
min-height:0;
overflow:visible;
}#journals-grid-body{
overflow:visible;
padding-right:0;
}#journals-grid-body::after{
content:"";
grid-column:1 / -1;
height:10px;
margin-top:-16px;
}.gb-wrapper{
background:transparent;
border-radius:24px;
display:flex;
flex-direction:column;
height:calc(108.69565vh - 118px);
overflow:hidden;
}#gradebook-view .gb-header-top,
#gradebook-view .gb-controls-top{
display:none !important;
}.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .white-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .reports-shell,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .teachers-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .stats-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .big-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .teachers-table-shell{
height:calc(108.69565vh - 118px) !important;
max-height:calc(108.69565vh - 118px) !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}#summary-performance-view{
height:calc(108.69565vh - 58px) !important;
max-height:calc(108.69565vh - 58px) !important;
box-sizing:border-box !important;
}#summary-performance-view .summary-page-wrapper,
.summary-page-wrapper{
height:calc(108.69565vh - 58px) !important;
max-height:calc(108.69565vh - 58px) !important;
overflow:hidden !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
}.modal-overlay .modal-window[id^="modal-summary-"]{
max-height:calc(100vh - 75px);
overflow:auto;
}.summary-page-wrapper{
padding-bottom:0px !important;
}.summary-page-wrapper table{
margin-bottom:0px;
}.modal-overlay .modal-window[id^="modal-summary-"]{
padding-bottom:0px !important;
}#gradebook-view{
background:transparent;
border-radius:0;
padding:0;
overflow:visible;
margin-left:-17px;
margin-right:-17px;
margin-top:-4px;
border:none;
}.white-card{
height:calc(108.69565vh - 118px) !important;
max-height:calc(108.69565vh - 118px) !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}#gradebook-view .gb-wrapper{
height:calc(108.69565vh - 106px);
max-height:calc(108.69565vh - 106px);
min-height:0;
overflow:hidden;
display:flex;
flex-direction:column;
}#gradebook-view.has-admin-subtitle .gb-wrapper{
height:calc(108.69565vh - 162px);
max-height:calc(108.69565vh - 162px);
}#gradebook-view.no-tabs .gb-wrapper{
height:calc(108.69565vh - 58px);
max-height:calc(108.69565vh - 58px);
}#gradebook-view.no-tabs.has-admin-subtitle .gb-wrapper{
height:calc(108.69565vh - 118px);
max-height:calc(108.69565vh - 118px);
}#gradebook-view .gb-tabs-row{
padding:4px 0 2px;
margin-left:-5px;
margin-top:0;
margin-bottom:4px;
position:relative;
top:-5px;
}#gradebook-view .gb-tabs-row{
overflow:visible;
}#gradebook-view .gb-tabs{
margin-top:0px !important;
}#gradebook-view .gb-tab{
line-height:1;
padding-top:10px;
padding-bottom:10px;
padding-left:12px;
padding-right:12px;
font-size:18px;
}#gradebook-view .gb-header-content-wrap{
border:none;
border-radius:14px;
overflow:hidden;
background:#ffffff;
display:flex;
flex-direction:column;
min-height:0;
}#gradebook-view .gb-header-area{
padding-top:0;
}#gradebook-view .gb-subbar-header{
}#gradebook-view .gb-content{
border:none;
margin:0;
padding:8px;
border-radius:0;
flex:1 1 auto;
min-height:0;
overflow:auto;
}#gradebook-view #tab-attendance.gb-content,
#gradebook-view #tab-grades.gb-content,
#gradebook-view #tab-remarks.gb-content{
padding:0;
}#gradebook-view #tab-attendance,
#gradebook-view #tab-grades,
#gradebook-view #tab-remarks{
padding-top:0;
}#gradebook-view #gb-zoom-grades,
#gradebook-view #gb-zoom-attendance{
width:max-content;
}#gradebook-view #gb-table,
#gradebook-view #att-table{
width:max-content;
}#gradebook-view .gb-header-area{
flex:0 0 auto;
}#gradebook-view .gb-wrapper,
#gradebook-view .gb-header-content-wrap{
overscroll-behavior:none;
}#gradebook-view .gb-header-area{
background:#1a67e6;
}#gradebook-view .gb-subbar-header{
padding:8px 4px 8px 12px;
background:#377eff;
}#gradebook-view .gb-subbar{
align-items:center;
gap:12px;
min-height:48px;
background:transparent;
display:flex;
}#gradebook-view .gb-controls{
gap:8px;
justify-content:flex-end;
}#gradebook-view .school-year-btn{
height:40px;
padding:0 12px;
border-radius:10px !important;
background:rgba(255, 255, 255, 0.16);
border:1px solid rgba(255, 255, 255, 0.22);
color:#fff;
font-weight:700;
font-size:12px;
line-height:1;
display:inline-flex;
align-items:center;
box-sizing:border-box;
}#gradebook-view .school-year-btn .school-year-icon{
font-size:12px;
opacity:0.95;
}#gradebook-view .gb-subbar .btn-add-column{
height:32px;
padding:0 10px;
border-radius:10px;
background:transparent;
border:none;
color:#fff;
font-weight:600;
gap:8px;
}#gradebook-view .gb-subbar .btn-add-column:hover{
background:rgba(255, 255, 255, 0.12);
}#gradebook-view .gb-subbar .btn-add-column .plus-circle{
width:18px;
height:18px;
background:#ffffff;
border:1px solid rgba(255, 255, 255, 0.85);
}#gradebook-view .gb-subbar .btn-add-column .plus-circle span{
font-size:14px;
line-height:1;
color:var(--primary-blue);
}#gradebook-view .scale-pill,
.schedule-zoom .scale-pill,
.schc-zoom,
.scale-pill{
height:38px !important;
padding:3px 4px !important;
background:rgba(255, 255, 255, 0.1) !important;
border:1px solid rgba(255, 255, 255, 0.22) !important;
border-radius:999px !important;
gap:2px !important;
display:inline-flex !important;
align-items:center !important;
box-sizing:border-box !important;
}#gradebook-view .scale-option,
.schedule-zoom .scale-option,
.schedule-zoom .zoom-option,
.schc-zoom button,
.scale-option,
.zoom-option{
height:32px !important;
min-width:44px !important;
padding:0 10px !important;
font-size:12px !important;
font-weight:700 !important;
border-radius:999px !important;
transform:none !important;
background:transparent !important;
border:none !important;
color:rgba(255, 255, 255, 0.92) !important;
cursor:pointer !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
transition:background 0.15s ease, color 0.15s ease;
}#gradebook-view .scale-option:hover:not(.active),
.schedule-zoom .scale-option:hover:not(.active),
.schedule-zoom .zoom-option:hover:not(.active),
.schc-zoom button:hover:not(.active),
.scale-option:hover:not(.active),
.zoom-option:hover:not(.active){
background:rgba(255, 255, 255, 0.18) !important;
color:#ffffff !important;
}#gradebook-view .scale-option.active,
.schedule-zoom .scale-option.active,
.schedule-zoom .zoom-option.active,
.schc-zoom button.active,
.scale-option.active,
.zoom-option.active{
background:rgba(255, 255, 255, 0.95) !important;
color:#1c77ff !important;
border-radius:999px !important;
font-weight:800 !important;
}#gradebook-view .nav-zoom-box{
background:transparent;
border:none;
padding:0;
gap:6px;
height:44px;
}#gradebook-view .nav-zoom-box .nav-btn{
width:40px;
height:40px;
min-width:40px;
border-radius:14px !important;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
font-size:18px;
}#gradebook-view .nav-zoom-box .nav-btn:hover{
background:rgba(255, 255, 255, 0.18);
transform:none;
}#gradebook-view .three-dot-btn{
width:32px;
height:32px;
border-radius:999px;
background:rgba(255, 255, 255, 0.12);
border:1px solid rgba(255, 255, 255, 0.22);
font-size:18px;
}#gradebook-view .gb-controls-top{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
position:relative;
min-height:32px;
}#gradebook-view .gb-controls-top .export-menu{
right:0;
top:calc(100% + 10px);
}#gradebook-view .gb-zoom-surface{
width:max-content;
}#gradebook-view #tab-attendance.gb-content,
#gradebook-view #tab-grades.gb-content,
#gradebook-view #tab-planning.gb-content{
margin:0;
border-radius:0;
}#gradebook-view #tab-attendance,
#gradebook-view #tab-grades{
padding-top:10px;
}#gradebook-view .lesson-day-shell{
max-width:none;
.nav-item{
padding:8px 10px;
font-size:14px;
}.modal-content{
height:100%;
overflow:auto;
}body{
display:block;
height:auto;
overflow:auto;
}#app-sidebar{
display:none;
}#mobile-topbar,
#mobile-day-strip,
#mobile-bottom-nav{
display:block;
}#mobile-sidebar-backdrop.active{
display:block;
}#mobile-topbar{
position:fixed;
top:0;
left:0;
right:0;
height:62px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background:rgba(28, 119, 255, 0.92);
z-index:2000;
}#mobile-topbar .mobile-icon{
width:44px;
height:44px;
border-radius:14px;
display:inline-flex;
align-items:center;
justify-content:center;
color:white;
background:rgba(255, 255, 255, 0.14);
border:1px solid rgba(255, 255, 255, 0.22);
cursor:pointer;
}#mobile-bell-btn{
position:fixed;
top:9px;
right:14px;
z-index:2001;
}#mobile-bell-btn.has-unread::after{
content:"";
position:absolute;
width:10px;
height:10px;
border-radius:999px;
background:#ef4444;
right:6px;
bottom:6px;
}#mobile-topbar .mobile-title{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
color:white;
font-weight:800;
line-height:1.1;
font-size:14px;
}#mobile-topbar .mobile-title div{
line-height:1.2;
}#mobile-topbar .mobile-day-nav{
width:36px;
height:36px;
border-radius:12px;
background:rgba(255, 255, 255, 0.14);
border:1px solid rgba(255, 255, 255, 0.22);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:white;
}#mobile-topbar .mobile-day-nav:hover{
background:rgba(255, 255, 255, 0.2);
}.header{
display:none;
}.home-toprow{
display:none;
}.home-shell{
padding:0 12px 16px;
}#home-schedule-container{
padding-bottom:16px;
}#home-schedule-container .home-lesson-item{
margin-bottom:12px;
}#home-schedule-container .home-lesson-card{
border-radius:18px;
padding:24px 20px;
}#home-schedule-container .home-lesson-icon{
display:flex;
}#home-schedule-container .home-room-number{
display:none;
}#mobile-day-strip{
position:fixed;
top:62px;
left:0;
right:0;
padding:8px 12px 10px;
display:flex;
gap:8px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
background:rgba(28, 119, 255, 0.92);
z-index:2000;
}#mobile-day-strip button{
flex:0 0 auto;
padding:8px 10px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.25);
background:rgba(255, 255, 255, 0.12);
color:rgba(255, 255, 255, 0.92);
font-weight:700;
font-size:12px;
cursor:pointer;
white-space:nowrap;
}#mobile-day-strip button.active{
background:rgba(255, 255, 255, 0.95);
color:var(--primary-blue);
border-color:rgba(255, 255, 255, 0.7);
}body:not(.mobile-home) #mobile-day-strip{
display:none !important;
}body:not(.mobile-home) #mobile-topbar .mobile-day-nav,
body:not(.mobile-home) #mobile-topbar #mobile-date,
body:not(.mobile-home) #mobile-topbar #mobile-day{
display:none !important;
}body:not(.mobile-home) #mobile-topbar #mobile-page-title{
display:block !important;
}body.mobile-home #mobile-topbar #mobile-page-title{
display:none !important;
}#mobile-bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
height:66px;
padding:6px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:4px;
background:rgba(255, 255, 255, 0.94);
border-top:1px solid rgba(0, 0, 0, 0.08);
z-index:2000;
}#mobile-bottom-nav button{
flex:1;
height:54px;
border-radius:14px;
background:transparent;
border:none;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
color:rgba(17, 24, 39, 0.7);
font-size:11px;
font-weight:700;
cursor:pointer;
transition:background 0.15s;
}#mobile-bottom-nav button.active{
color:var(--primary-blue);
background:rgba(28, 119, 255, 0.1);
}#mobile-bottom-nav button:hover{
background:rgba(28, 119, 255, 0.12);
}#mobile-bottom-nav button i{
font-size:18px;
}#mobile-sidebar-backdrop{
position:fixed;
inset:0;
background:rgba(0, 0, 0, 0.4);
z-index:1950;
}#app-sidebar.mobile-open{
display:flex !important;
position:fixed;
top:0;
left:0;
bottom:0;
width:280px;
max-width:80%;
padding-top:64px;
z-index:2000;
}.main-content{
padding-top:124px;
padding-bottom:90px;
}.home-shell{
flex-direction:column;
gap:14px;
}.home-right{
display:none;
}}#schedule-view-mode,
#schedule-view-value{
color:white;
background:transparent;
border:1px solid rgba(255, 255, 255, 0.12);
-webkit-appearance:none;
appearance:none;
}#schedule-view-mode{
min-width:110px;
width:110px;
}#schedule-view-value{
min-width:120px;
width:120px;
}#schedule-view-mode option,
#schedule-view-value option{
color:#000;
background:#fff;
}.gb-header-content-wrap{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
border-radius:12px 12px 0 0;
border:1px solid rgba(0, 0, 0, 0.18);
}#gradebook-view.lesson-day-mode .gb-header-content-wrap{
border:0;
border-radius:0;
overflow:visible;
background:transparent;
}#gradebook-view.lesson-day-mode{
padding:0;
border-radius:24px;
overflow:hidden;
margin-left:-15px;
margin-right:-15px;
width:calc(100% + 30px);
box-sizing:border-box;
}#gradebook-view.lesson-day-mode .gb-wrapper{
height:auto;
overflow:visible;
}#gradebook-view.lesson-day-mode .lesson-day-view{
padding:0;
}#gradebook-view.lesson-day-mode .lesson-day-topbar{
border-radius:18px;
}.gb-header-area{
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:stretch;
gap:0;
background:#f5f5f5;
color:var(--text-dark);
flex-shrink:0;
}.gb-subbar-header{
padding:0;
border-bottom:none;
background:transparent;
color:var(--text-dark);
}.gb-breadcrumbs{
font-size:20px;
font-weight:600;
color:var(--text-dark);
display:flex;
align-items:center;
gap:10px;
}.gb-breadcrumbs span{
cursor:pointer;
opacity:0.8;
transition:opacity 0.2s;
}.gb-breadcrumbs span:hover{
opacity:1;
}.gb-breadcrumbs .sep{
color:rgba(0, 0, 0, 0.35);
font-size:14px;
}.gb-breadcrumbs .current{
color:var(--text-dark);
opacity:1;
cursor:default;
font-weight:700;
}.subject-journal-toggle{
background:var(--primary-blue);
border:none;
width:28px;
height:28px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;
}.subject-journal-toggle svg{width:14px;height:14px;display:block}.subject-journal-menu{
position:absolute;
background:var(--primary-blue);
color:#fff;
border-radius:10px;
padding:6px;
display:none;
min-width:220px;
z-index:60000;
}.subject-journal-menu-item{
display:block;
background:transparent;
border:none;
color:#fff;
text-align:left;
width:100%;
padding:8px 10px;
font-size:14px;
cursor:pointer;
border-radius:8px;
}.subject-journal-menu-item:hover{background:rgba(255,255,255,0.06)}.subject-journal-menu-empty{padding:8px 10px;color:rgba(255,255,255,0.95);opacity:0.95}.gb-tabs{
display:inline-flex;
gap:0;
padding:0;
background:transparent;
margin:0;
border:none;
border-radius:0;
overflow:visible;
align-items:center;
justify-content:flex-start;
flex:none;
margin-top:2px;
margin-bottom:2px;
align-self:flex-start;
}.gb-tabs-row{
background:transparent;
padding:8px 0;
display:flex;
justify-content:flex-start;
flex-shrink:0;
}.gb-tabs-row .gb-tabs{
margin-top:0;
background:transparent;
border:none;
padding:0;
padding-left:10px;
display:inline-flex;
gap:0;
overflow:visible;
white-space:nowrap;
flex-wrap:nowrap;
}.gb-subbar{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:6px;
padding:0;
}.gb-subbar .gb-controls{
margin-left:auto;
margin-right:0;
padding-right:0;
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
}.gb-subbar > button:not(.school-year-gap),
.gb-subbar #school-year-block:not(.school-year-gap){
margin:0;
}.gb-subbar .gb-controls > *:first-child{
margin-left:0;
}.gb-subbar .gb-controls > *:last-child{
margin-right:0;
}.gb-subbar-header .gb-subbar{
align-items:center;
}#gradebook-view .gb-header-content-wrap,
#gradebook-view .gb-header-area,
#gradebook-view .gb-subbar-header,
#gradebook-view .gb-subbar{
padding-left:0 !important;
padding-right:0 !important;
margin:0 !important;
}#gradebook-view .nav-zoom-box{
padding-right:0 !important;
padding-left:0 !important;
}#gradebook-view .scale-pill{
padding-left:4px !important;
padding-right:4px !important;
}#gradebook-view #school-year-block:not(.school-year-gap),
#gradebook-view #btn-add-column,
#gradebook-view .nav-zoom-box .nav-btn{
margin:0 !important;
}.gb-header-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:6px;
}.gb-left-top{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:1px;
}.gb-controls{
display:flex;
align-items:center;
gap:4px;
}.btn-add-column{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--primary-blue);
color:#fff;
border:0;
padding:6px 10px;
border-radius:8px;
cursor:pointer;
}.btn-add-column .plus-circle{
width:22px;
height:22px;
border-radius:50%;
background:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--primary-blue);
font-weight:700;
}.nav-zoom-box{
display:inline-flex;
gap:6px;
padding:4px 6px;
background:rgba(0, 0, 0, 0.02);
border-radius:12px;
border:1px solid rgba(0, 0, 0, 0.04);
height:34px;
align-items:center;
}.nav-zoom-box .nav-btn{
padding:6px 8px;
height:30px;
min-width:36px;
background:transparent;
color:var(--primary-blue);
border:1px solid rgba(15, 104, 248, 0.08);
border-radius:8px;
cursor:pointer;
font-weight:600;
font-size:14px;
display:inline-flex;
align-items:center;
justify-content:center;
transition:
background 0.12s,
color 0.12s,
transform 0.06s;
}.nav-zoom-box .nav-btn:hover{
background:rgba(15, 104, 248, 0.06);
color:var(--primary-blue);
}.school-year{
background:var(--primary-blue);
color:#fff;
border:2px solid var(--primary-blue);
padding:4px 8px;
border-radius:8px;
font-weight:700;
font-size:13px;
line-height:1;
}.school-year-btn.school-year-gap{
margin-left:10px !important;
}.gb-subbar .btn-add-column{
display:inline-flex;
align-items:center;
gap:8px;
background:#1c77ff00;
color:#fff;
border:0;
padding:6px 10px;
border-radius:8px;
cursor:pointer;
}.gb-subbar .btn-add-column span{
font-weight:600;
}.school-year-icon{
color:#fff;
margin-left:8px;
font-size:14px;
vertical-align:middle;
}.three-dot-btn{
width:36px;
height:36px;
border-radius:50%;
background:var(--primary-blue);
display:inline-flex;
align-items:center;
justify-content:center;
color:white;
cursor:pointer;
border:none;
}.three-dot-btn i{
font-size:18px;
}.nav-zoom-box .nav-btn > .mriia-local-icon,
.three-dot-btn > .mriia-local-icon,
.three-dot-btn-circle > .mriia-local-icon{
width:18px !important;
height:18px !important;
margin:0 !important;
}.export-menu{
position:absolute;
right:24px;
top:64px;
background:white;
color:var(--text-dark);
border-radius:12px;
padding:8px;
display:none;
min-width:160px;
z-index:9999;
}.export-menu.open{
display:block;
}.export-menu button{
width:100%;
background:transparent;
border:none;
text-align:left;
padding:8px 12px;
font-size:14px;
cursor:pointer;
color:var(--text-dark);
border-radius:8px;
}.export-menu button:hover{
background:#f3f4f6;
color:var(--primary-blue);
}.zoom-wrapper{
position:relative;
display:inline-block;
}.zoom-toggle{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
background:white;
color:var(--primary-blue);
border-radius:999px;
height:36px;
border:1px solid rgba(28, 119, 255, 0.08);
font-weight:700;
cursor:pointer;
}.zoom-toggle i{
font-size:14px;
}.zoom-popup{
position:absolute;
right:0;
top:calc(100% + 10px);
background:white;
color:var(--text-dark);
border-radius:12px;
padding:12px;
min-width:320px;
display:none;
z-index:9999;
}.zoom-popup.open{
display:block;
}.zoom-controls{
display:flex;
align-items:center;
gap:10px;
}.zoom-btn{
background:var(--primary-blue);
color:white;
border:none;
width:33px;
height:33px;
border-radius:8px;
font-weight:700;
cursor:pointer;
}.zoom-range{
flex:1;
}.zoom-range input[type="range"]{
width:100%;
height:6px;
appearance:none;
background:linear-gradient(90deg, var(--primary-blue), #3b82f6);
border-radius:6px;
outline:none;
}.zoom-option{
background:transparent;
color:var(--primary-blue);
padding:6px 10px;
border-radius:8px;
font-weight:700;
cursor:pointer;
font-size:13px;
border:1px solid transparent;
}.zoom-option.active{
background:#ffffff;
color:var(--primary-blue);
border-color:rgba(0, 0, 0, 0.04);
}.zoom-reset{
background:transparent;
border:1px solid rgba(0, 0, 0, 0.06);
padding:6px 8px;
border-radius:8px;
cursor:pointer;
}.scale-pill{
display:inline-flex;
gap:2px;
padding:3px 4px;
background:rgba(255, 255, 255, 0.1);
border-radius:999px;
align-items:center;
border:1px solid rgba(255, 255, 255, 0.22);
height:38px;
box-sizing:border-box;
}.scale-option, .zoom-option{
padding:0 10px;
height:32px;
min-width:44px;
border-radius:999px;
background:transparent;
color:rgba(255, 255, 255, 0.92);
font-weight:700;
font-size:12px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:none;
transition:background 0.15s ease, color 0.15s ease;
box-sizing:border-box;
}.scale-option:hover:not(.active), .zoom-option:hover:not(.active){
background:rgba(255, 255, 255, 0.18);
color:#ffffff;
}.scale-option.active, .zoom-option.active{
background:rgba(255, 255, 255, 0.95);
color:var(--primary-blue, #1c77ff);
border-radius:999px !important;
font-weight:800;
}@media (max-width:700px){
.zoom-popup{
right:8px;
left:8px;
min-width:auto;
}}.gb-actions-wrap{
position:relative;
display:flex;
align-items:center;
gap:10px;
}.gb-tab{
padding:8px 10px;
height:34px;
min-height:34px;
min-width:0;
background:transparent;
color:white;
border-radius:0;
font-size:16px;
font-weight:600;
cursor:pointer;
border:none;
transition:
background 0.2s,
color 0.2s,
transform 0.1s;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}.gb-tab.active{
background:transparent;
color:white;
transform:none;
font-weight:600;
text-decoration:underline;
text-underline-offset:8px;
text-decoration-thickness:2px;
}.gb-tab:not(.active),
.filter-btn:not(.active),
.journal-tab:not(.active),
#journals .journal-tab-button:not(.active),
#journals .gb-subbar > button:not(.active){
text-decoration-color:#d1d5db !important;
}.filter-btn:not(.active),
.gb-tab:not(.active),
.journal-tab:not(.active){
color:#bdc9de;
}.gb-tab:hover:not(.active){
background:transparent;
color:#bdc9de;
}.filter-btn:hover:not(.active){
background:transparent;
color:#bdc9de;
}#gradebook-view .gb-tab[data-gb="planning"]{
margin-left:4px;
}.gb-content{
flex-grow:1;
overflow:auto;
background:#ffffff;
position:relative;
padding:12px;
border-radius:12px;
margin:8px;
}#tab-attendance.gb-content,
#tab-grades.gb-content{
margin:0 8px 8px 8px;
border-radius:0 0 12px 12px;
}.gb-table{
border-collapse:separate;
border-spacing:0;
width:max-content;
table-layout:auto;
background:transparent;
border-radius:0;
overflow:visible;
border:none;
}#gradebook-view .gb-table th{
border-color:rgba(28, 119, 255, 0.16) !important;
padding:6px 6px !important;
height:34px !important;
font-size:11px !important;
letter-spacing:0.2px !important;
text-transform:none !important;
}#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg,
#gradebook-view .gb-table thead th.gb-avg-col{
position:sticky !important;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col{
top:0 !important;
z-index:40;
}#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col{
top:var(--gb-thead-row1-h, 14px) !important;
z-index:35;
}#gradebook-view .gb-table td{
border-color:rgba(28, 119, 255, 0.14) !important;
height:48px !important;
font-size:13px !important;
background:#ffffff;
}#gradebook-view .gb-table tbody tr:nth-child(even) td{
background:#ffffff !important;
}#gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-col,
#gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-col-2,
#gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-avg{
background:#ffffff !important;
}#gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-col,
#gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-col-2,
#gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-avg{
background:#ffffff !important;
}#gradebook-view .gb-table tbody td:hover{
background:rgba(28, 119, 255, 0.08) !important;
}#gradebook-view .gb-table th.gb-sticky-avg,
#gradebook-view .gb-table td.gb-sticky-avg{
background-clip:padding-box;
}#gradebook-view #gb-table th.gb-sticky-col,
#gradebook-view #gb-table td.gb-sticky-col{
border-right:0 !important;
}#gradebook-view #gb-table th.gb-sticky-col-2,
#gradebook-view #gb-table td.gb-sticky-col-2{
border-left:0 !important;
border-right:0 !important;
}#gradebook-view #gb-table th.gb-sticky-avg,
#gradebook-view #gb-table td.gb-sticky-avg{
border-left:0 !important;
}#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-col-2{
background-clip:padding-box;
}#gradebook-view #att-table thead tr:nth-child(2){
display:none;
}#gradebook-view #att-table thead th{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table{
--gb-sticky-col-1-w:25px;
--gb-sticky-col-2-w:200px;
--gb-sticky-avg-w:60px;
--gb-thead-row1-h:26px;
--gb-thead-row2-h:26px;
}#gradebook-view .gb-table .gb-sticky-col{
width:var(--gb-sticky-col-1-w) !important;
min-width:var(--gb-sticky-col-1-w) !important;
max-width:var(--gb-sticky-col-1-w) !important;
}#gradebook-view .gb-table td.gb-sticky-col{
font-size:11px !important;
}#gradebook-view .gb-table .gb-sticky-col-2{
width:var(--gb-sticky-col-2-w) !important;
min-width:160px !important;
max-width:var(--gb-sticky-col-2-w) !important;
}#gradebook-view .gb-table .gb-sticky-avg{
width:var(--gb-sticky-avg-w) !important;
min-width:40px !important;
max-width:var(--gb-sticky-avg-w) !important;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col{
height:var(--gb-thead-row1-h) !important;
top:0 !important;
z-index:60;
line-height:1 !important;
}#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col{
height:var(--gb-thead-row2-h) !important;
top:var(--gb-thead-row1-h) !important;
z-index:55;
line-height:1 !important;
}#gradebook-view
#gb-table
thead
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view #gb-table thead th.date-clickable,
#gradebook-view #gb-table thead th.gb-subtype-header{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table thead th.date-clickable,
#gradebook-view .gb-table thead th.gb-subtype-header{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col{
position:sticky !important;
left:0 !important;
}#gradebook-view .gb-table th.gb-sticky-col-2,
#gradebook-view .gb-table td.gb-sticky-col-2{
position:sticky !important;
left:var(--gb-sticky-col-1-w) !important;
}#gradebook-view .gb-table th.gb-sticky-avg,
#gradebook-view .gb-table td.gb-sticky-avg{
position:sticky !important;
left:calc(var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)) !important;
}#gradebook-view #gb-table th.gb-sticky-col,
#gradebook-view #gb-table td.gb-sticky-col,
#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col{
position:sticky !important;
left:0 !important;
}#gradebook-view #gb-table th.gb-sticky-col-2,
#gradebook-view #gb-table td.gb-sticky-col-2,
#gradebook-view #gb-table div.gb-sticky-col-2,
#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-col-2,
#gradebook-view #att-table div.gb-sticky-col-2{
position:sticky !important;
left:var(--gb-sticky-col-1-w) !important;
}#gradebook-view #gb-table th.gb-sticky-avg,
#gradebook-view #gb-table td.gb-sticky-avg,
#gradebook-view #gb-table div.gb-sticky-avg,
#gradebook-view #gb-table th.gb-avg-col,
#gradebook-view #gb-table td.gb-avg-col,
#gradebook-view #gb-table div.gb-avg-col{
position:sticky !important;
left:calc(var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)) !important;
}#gradebook-view .gb-table td.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col-2,
#gradebook-view .gb-table td.gb-sticky-avg,
#gradebook-view .gb-table div.gb-sticky-col-2,
#gradebook-view .gb-table div.gb-sticky-avg{
z-index:500 !important;
background:#ffffff !important;
}#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col{
background-clip:padding-box;
}#gradebook-view .gb-table td.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col-2,
#gradebook-view .gb-table td.gb-sticky-avg,
#gradebook-view .gb-table td.gb-avg-col,
#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table th.gb-sticky-col-2,
#gradebook-view .gb-table th.gb-sticky-avg,
#gradebook-view .gb-table th.gb-avg-col{
-webkit-transform:translateZ(0);
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;
}#gradebook-view #tab-attendance.gb-content,
#gradebook-view #tab-grades.gb-content{
isolation:isolate;
position:relative;
}#gradebook-view .gb-table thead th{
z-index:500;
background:#ffffff !important;
}#gradebook-view
.gb-table
thead
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
z-index:500 !important;
}#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg{
z-index:2000;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg{
z-index:2100;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table thead th.gb-sticky-avg,
#gradebook-view #att-table thead th.gb-avg-col{
position:sticky !important;
z-index:2000 !important;
background:#ffffff !important;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-avg{
top:0 !important;
z-index:2100 !important;
}#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-avg{
top:var(--gb-thead-row1-h, 14px) !important;
z-index:2050 !important;
}#gradebook-view #att-table td.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-avg,
#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table th.gb-sticky-avg{
-webkit-transform:translateZ(0);
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;
}#gradebook-view #att-table thead th{
z-index:500 !important;
background:#ffffff !important;
}.gb-sticky-col{
width:50px;
min-width:50px;
max-width:50px;
}.gb-sticky-col-2{
width:240px;
min-width:180px;
max-width:420px;
}th.gb-sticky-col-2 > div,
td.gb-sticky-col-2 > div{
padding-left:10px;
padding-right:8px;
justify-content:flex-start;
}.gb-table th{
background:white;
border:1px solid rgba(0, 0, 0, 0.08);
padding:12px 8px;
height:50px;
font-size:13px;
text-align:center;
vertical-align:middle;
color:var(--text-dark);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}#gradebook-view .gb-table{
table-layout:fixed;
}.gb-table
thead
tr:nth-child(1)
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
top:0;
z-index:40;
}.gb-table
thead
tr:nth-child(2)
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
top:26px;
z-index:35;
}.gb-table th.gb-header-clickable{
height:26px;
padding-top:6px;
padding-bottom:6px;
}.gb-table td{
border:1px solid rgba(0, 0, 0, 0.06);
height:45px;
padding:0;
text-align:center;
font-size:14px;
color:var(--text-dark);
background:white;
transition:background-color 0.2s;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-sizing:border-box;
}.gb-table th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg),
.gb-table td:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg){
min-width:62px;
}.gb-table th.gb-sticky-col,
.gb-table td.gb-sticky-col,
.gb-table th.gb-sticky-col-2,
.gb-table td.gb-sticky-col-2,
.gb-table th.gb-sticky-avg,
.gb-table td.gb-sticky-avg{
padding:0;
background:white !important;
color:var(--text-dark) !important;
border:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
}.gb-table th.gb-sticky-col > div,
.gb-table td.gb-sticky-col > div,
.gb-table th.gb-sticky-col-2 > div,
.gb-table td.gb-sticky-col-2 > div{
box-sizing:border-box;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 12px;
overflow:visible;
white-space:normal;
text-overflow:clip;
line-height:1.2;
padding-top:6px;
padding-bottom:6px;
}.gb-table th.gb-sticky-col.fixed,
.gb-table th.gb-sticky-col-2.fixed,
.gb-table th.gb-sticky-avg.fixed{
position:sticky;
z-index:70;
}.gb-table thead tr:nth-child(1) th.fixed{
top:0 !important;
z-index:80;
}.gb-table thead tr:nth-child(2) th.fixed{
top:26px !important;
z-index:75;
}.gb-table thead tr:nth-child(1) th.gb-sticky-col.fixed,
.gb-table thead tr:nth-child(1) th.gb-sticky-col-2.fixed,
.gb-table thead tr:nth-child(1) th.gb-sticky-avg.fixed{
z-index:90;
}.gb-table td.gb-sticky-col.fixed,
.gb-table td.gb-sticky-col-2.fixed,
.gb-table td.gb-sticky-avg.fixed{
position:sticky;
top:auto !important;
}.gb-table th.gb-sticky-col,
.gb-table th.gb-sticky-col-2,
.gb-table th.gb-sticky-avg{
vertical-align:bottom;
}.gb-table th.gb-sticky-col > div,
.gb-table th.gb-sticky-col-2 > div,
.gb-table th.gb-sticky-avg > div{
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
}.gb-table td > div,
.gb-table th > div{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
padding:0;
color:var(--text-dark);
}.student-cell{
display:inline-flex;
align-items:center;
gap:8px;
}.student-avatar{
width:32px;
height:32px;
border-radius:8px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:450;
font-size:14px;
margin-left:-8px;
flex-shrink:0;
}.student-name-text{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
line-clamp:2;
overflow:hidden;
font-weight:590;
line-height:1.15;
font-size:12px;
}.gb-table th.gb-sticky-col,
.gb-table th.gb-sticky-col-2{
background:white !important;
color:var(--text-dark) !important;
border:1px solid rgba(0, 0, 0, 0.06) !important;
}th.gb-sticky-col{
position:sticky;
top:0;
width:50px !important;
min-width:50px !important;
max-width:50px !important;
background:white !important;
z-index:20;
border-right:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
}th.gb-sticky-col-2{
position:sticky;
top:0;
width:200px !important;
min-width:160px !important;
max-width:200px !important;
background:white !important;
z-index:20;
border-right:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
}.gb-table td.gb-sticky-col{
color:#1c77ff !important;
font-weight:800 !important;
}.gb-table th.gb-sticky-col,
.gb-table td.gb-sticky-col{
border-right:1px solid transparent !important;
}.gb-table th.gb-sticky-col-2,
.gb-table td.gb-sticky-col-2{
border-left:1px solid transparent !important;
}.gb-table th.gb-sticky-col-2 > div{
justify-content:flex-start !important;
padding-top:3px !important;
padding-bottom:3px !important;
}.gb-table thead tr:nth-child(1) th{
top:0 !important;
z-index:12;
padding-top:2px !important;
padding-bottom:2px !important;
height:14px !important;
line-height:1 !important;
}.gb-table thead tr:nth-child(2) th{
top:14px !important;
z-index:11;
padding-top:2px !important;
padding-bottom:2px !important;
height:13px !important;
line-height:1 !important;
}.gb-table thead tr:nth-child(2) th.gb-subtype-header{
padding-top:2px !important;
padding-bottom:2px !important;
}.gb-table thead tr:nth-child(1) th.gb-sticky-col-2{
padding-left:0px !important;
}#gradebook-view #gb-table thead th.gb-sticky-col-2 > div{
padding-left:2px;
}#gradebook-view #gb-table thead th.gb-num-header{
border-color:transparent !important;
background:#ffffff !important;
}#gradebook-view #gb-table thead th.gb-num-header > div{
display:none;
}.gb-students-title{
font-size:11px;
font-weight:700;
color:#000;
text-transform:none;
letter-spacing:0.5px;
line-height:1.1;
}.gb-students-subtitle{
font-size:11px;
font-weight:700;
color:#000;
text-transform:none;
letter-spacing:0;
line-height:1.1;
margin-top:1px;
}th.gb-sticky-avg{
position:sticky;
top:0;
width:40px !important;
min-width:40px !important;
max-width:60px !important;
background:white !important;
z-index:25;
border-right:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
transform:translateZ(0);
}td.gb-sticky-col,
td.gb-sticky-col-2,
td.gb-sticky-avg{
position:sticky !important;
left:0;
transform:none !important;
background:white !important;
z-index:22 !important;
}th.gb-sticky-col,
th.gb-sticky-col-2,
th.gb-sticky-avg{
z-index:30;
background:white !important;
backdrop-filter:none !important;
color:var(--text-dark) !important;
}.gb-cell{
width:62px;
min-width:62px;
max-width:62px;
cursor:pointer;
transition:background-color 0.1s ease, opacity 0.1s ease;
user-select:none;
font-weight:500;
}.gb-placeholder{
background-color:#f8fafc !important;
cursor:default !important;
border:1px dashed #e2e8f0 !important;
}.gb-subtype-header{
width:12px;
min-width:12px;
max-width:12px;
padding-left:0;
padding-right:0;
position:relative;
}.gb-cell:hover{
background:#f3f4f6;
}.gb-cell.is-active{
background:#ffffff;
border-radius:6px;
z-index:3;
}.gb-cell.is-active:hover{
background:#ffffff;
}#gradebook-view #gb-table td.gb-cell{
position:relative;
}#gradebook-view #gb-table td.gb-cell .grade-badge{
position:absolute;
top:2px;
right:2px;
left:auto;
transform:none;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:999px;
background:#1c77ff;
color:#fff;
font-size:9px;
font-weight:800;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:4;
}#gradebook-view .gb-table th.gb-col-tint,
#gradebook-view .gb-table td.gb-col-tint{
background:#edf4ff !important;
}#gradebook-view #gb-table td.gb-cell-plain{
font-weight:700 !important;
color:#0f172a !important;
}.gb-cell input{
width:100%;
height:100%;
border:none;
outline:none;
background:transparent;
text-align:center;
font-size:14px;
color:var(--text-dark);
}.gb-cell input:focus{
background:rgba(0, 0, 0, 0.04);
}.gb-avg-col{
background:rgba(28, 119, 255, 0.2);
color:white;
font-weight:bold;
width:30px;
font-size:15px;
}.gb-avg-label{
display:inline-block;
font-size:10px;
line-height:1.1;
white-space:normal;
color:#000000;
font-weight:600;
}#gradebook-view #gb-table td.gb-sticky-avg,
#gradebook-view #gb-table td.gb-avg-col{
font-weight:700;
color:#0f172a;
}.gb-header-clickable{
cursor:pointer;
transition:background-color 0.2s;
}.gb-header-clickable:hover{
background:rgba(255, 255, 255, 0.2);
}.col-type-label{
display:block;
font-size:10px;
color:rgba(255, 255, 255, 0.7);
margin-top:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:25px;
font-weight:500;
}.att-cell.absent{
background-color:rgba(239, 68, 68, 0.2);
color:#fee2e2;
font-weight:bold;
}.att-cell.late{
background-color:rgba(245, 158, 11, 0.2);
color:#fef3c7;
font-weight:bold;
}.gb-content-planning{
background:#ffffff !important;
padding:0 !important;
margin:0 8px 8px 8px !important;
border-radius:0 0 12px 12px !important;
}.planning-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
padding:12px 16px;
background:#fff;
border-radius:12px;
}.planning-toolbar-left{
display:flex;
align-items:center;
gap:12px;
}.planning-count{
font-size:13px;
color:#64748b;
font-weight:500;
background:#f1f5f9;
padding:6px 12px;
border-radius:8px;
}.btn-planning-add{
display:inline-flex;
align-items:center;
gap:8px;
background:#1c77ff;
color:#fff;
border:none;
padding:10px 18px;
border-radius:10px;
font-weight:600;
font-size:14px;
cursor:pointer;
transition:
background 0.2s,
transform 0.1s;
}.btn-planning-add:hover{
background:#1565d8;
}.btn-planning-export{
display:inline-flex;
align-items:center;
gap:6px;
background:#fff;
color:#475569;
border:1px solid #e2e8f0;
padding:8px 14px;
border-radius:8px;
font-size:13px;
cursor:pointer;
transition:all 0.2s;
}.btn-planning-export:hover{
background:#f1f5f9;
color:#1c77ff;
border-color:#1c77ff;
}.planning-export-wrap{
position:relative;
}.planning-export-menu{
position:absolute;
right:0;
top:calc(100% + 6px);
background:#fff;
border-radius:10px;
padding:6px;
min-width:140px;
z-index:1000;
display:none;
border:1px solid #e2e8f0;
}.planning-export-menu.open{
display:block;
}.planning-export-menu button{
width:100%;
background:transparent;
border:none;
text-align:left;
padding:10px 14px;
font-size:14px;
cursor:pointer;
color:#334155;
border-radius:8px;
display:flex;
align-items:center;
gap:10px;
}.planning-export-menu button:hover{
background:#f1f5f9;
color:#1c77ff;
}.planning-table-wrap{
background:#fff;
border-radius:12px;
overflow:hidden;
border:none;
display:flex;
flex-direction:column;
flex:1;
min-height:0;
}.planning-grid-head{
display:grid;
grid-template-columns:56px 160px 1.2fr 1fr 56px;
gap:12px;
padding:12px 12px;
align-items:center;
color:#334155;
font-size:12px;
font-weight:700;
letter-spacing:0.2px;
border-bottom:1px solid #e2e8f0;
}.planning-grid-head > div{
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.planning-grid-scroll{
overflow:auto;
min-height:0;
flex:1;
scrollbar-gutter:stable;
}.planning-grid-body{
display:flex;
flex-direction:column;
gap:12px;
padding:12px 12px;
}.planning-row{
display:grid;
grid-template-columns:56px 160px 1.2fr 1fr 56px;
gap:12px;
align-items:center;
}.planning-num{
font-weight:700;
color:#475569;
text-align:center;
}.planning-datecell{
color:#475569;
font-weight:600;
line-height:1.15;
cursor:pointer;
}.planning-datecell .date-top{
font-size:13px;
}.planning-datecell .date-sub{
font-size:12px;
color:#94a3b8;
margin-top:2px;
}.planning-box{
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:10px;
padding:12px 12px;
min-height:44px;
display:flex;
align-items:center;
color:#0f172a;
}.planning-box.placeholder{
border-style:dashed;
color:#94a3b8;
background:#fbfdff;
}.planning-arrow{
width:44px;
height:44px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#ffffff;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
color:#334155;
transition:
background 0.15s,
border-color 0.15s,
transform 0.05s;
}.planning-arrow:hover{
background:#f8fafc;
border-color:#cbd5e1;
}.planning-arrow:active{
transform:translateY(1px);
}.plan-empty{
text-align:center;
padding:48px 24px !important;
color:#94a3b8 !important;
}.plan-empty i{
font-size:40px;
display:block;
margin-bottom:12px;
opacity:0.5;
}.plan-empty span{
font-size:16px;
font-weight:600;
display:block;
margin-bottom:6px;
}.plan-empty p{
font-size:13px;
margin:0;
opacity:0.8;
}.planning-sidepanel{
position:fixed;
top:0;
right:0;
bottom:0;
width:380px;
max-width:85vw;
background:#ffffff;
z-index:100050;
display:flex;
flex-direction:column;
transform:translateX(110%);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.planning-sidepanel.open{
transform:translateX(0);
opacity:1;
visibility:visible;
pointer-events:auto;
}.planning-sidepanel.closing{
transform:translateX(110%);
opacity:0;
visibility:visible;
pointer-events:none;
}.planning-sidepanel-header{
padding:16px 16px;
border-bottom:1px solid #eef2f7;
display:flex;
#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table thead th.gb-sticky-avg{
position:sticky !important;
top:0 !important;
left:auto !important;
z-index:500 !important;
background:#ffffff !important;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-avg{
top:0 !important;
z-index:60 !important;
}#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-avg{
top:var(--gb-thead-row1-h, 14px) !important;
z-index:55 !important;
}#gradebook-view #att-table td.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-avg,
#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table th.gb-sticky-avg{
z-index:500 !important;
background:#ffffff !important;
-webkit-transform:translateZ(0);
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;
}#gradebook-view #att-table{
--gb-sticky-col-1-w:25px;
--gb-sticky-col-2-w:200px;
--gb-sticky-avg-w:60px;
table-layout:fixed;
}#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col{
position:sticky !important;
left:0 !important;
z-index:600 !important;
background:#ffffff !important;
}#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-col-2{
position:sticky !important;
left:var(--gb-sticky-col-1-w) !important;
z-index:600 !important;
background:#ffffff !important;
}#gradebook-view #att-table th.gb-sticky-avg,
#gradebook-view #att-table td.gb-sticky-avg{
position:sticky !important;
left:calc(
var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)
) !important;
z-index:600 !important;
background:#ffffff !important;
}align-items:center;
justify-content:space-between;
}.planning-sidepanel-title{
font-weight:800;
color:#0f172a;
}.planning-sidepanel-close{
border:1px solid #e2e8f0;
background:#fff;
width:36px;
height:36px;
border-radius:10px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
color:#334155;
}.planning-sidepanel-body{
padding:12px 16px;
overflow:auto;
flex:1;
min-height:0;
}.planning-sidepanel-section-title{
font-size:12px;
font-weight:800;
color:#64748b;
margin:8px 0 10px;
}.planning-sidepanel-item{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
padding:10px 12px;
border:1px solid #eef2f7;
border-radius:12px;
background:#fff;
margin-bottom:10px;
}.planning-sidepanel-item-text{
font-size:13px;
color:#0f172a;
line-height:1.3;
flex:1;
}.planning-sidepanel-item-actions{
display:flex;
gap:6px;
flex:0 0 auto;
}.planning-sidepanel-iconbtn{
width:34px;
height:34px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#fff;
cursor:pointer;
color:#1c77ff;
display:inline-flex;
align-items:center;
justify-content:center;
}.planning-sidepanel-footer{
padding:12px 16px 16px;
border-top:1px solid #eef2f7;
}.planning-sidepanel-input{
width:100%;
border:1px solid #e2e8f0;
border-radius:12px;
padding:12px 12px;
outline:none;
font-size:14px;
background:#f8fafc;
}.planning-sidepanel-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:12px;
}.planning-sidepanel-save{
border:none;
background:#1c77ff;
color:#fff;
border-radius:12px;
padding:10px 16px;
font-weight:800;
cursor:pointer;
opacity:0.95;
}.planning-sidepanel-save:hover{
opacity:1;
}.lesson-topic-empty{
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:16px;
padding:22px 16px;
text-align:center;
color:#64748b;
}.lesson-topic-empty-icon{
width:56px;
height:56px;
border-radius:18px;
margin:0 auto 12px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(28, 119, 255, 0.12);
color:#1c77ff;
font-size:22px;
}.lesson-topic-empty-title{
font-size:13px;
font-weight:800;
color:#475569;
}.lesson-topic-muted{
color:#94a3b8;
font-size:13px;
padding:8px 0;
font-weight:700;
}.lesson-topic-item{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid #eef2f7;
border-radius:14px;
background:#fff;
margin-bottom:10px;
cursor:pointer;
}.lesson-topic-item:hover{
background:#f8fafc;
}.lesson-topic-item-selected{
cursor:default;
}.lesson-topic-item-selected:hover{
background:#fff;
}.lesson-topic-check{
width:18px;
height:18px;
border-radius:999px;
background:rgba(28, 119, 255, 0.12);
border:1px solid rgba(28, 119, 255, 0.22);
color:#1c77ff;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
flex:0 0 auto;
}.lesson-topic-check.is-empty{
background:#fff;
border:1px solid #cbd5e1;
color:transparent;
}.lesson-topic-text{
font-size:13px;
font-weight:700;
color:#0f172a;
line-height:1.25;
flex:1;
min-width:0;
}.lesson-topic-actions{
flex:0 0 auto;
}.planning-sidepanel-backdrop{
position:fixed;
inset:0;
background:rgba(2, 6, 23, 0.35);
z-index:100040;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity 0.22s ease;
}.planning-sidepanel-backdrop.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}.planning-sidepanel-backdrop.closing{
opacity:0;
visibility:visible;
pointer-events:none;
}.plan-table,
#plan-table{
width:100%;
border-collapse:collapse;
background:#fff;
}.plan-table th,
#plan-table th{
background:#f1f5f9;
color:#334155;
text-transform:uppercase;
font-size:11px;
font-weight:700;
letter-spacing:0.5px;
padding:14px 16px;
text-align:left;
border-bottom:2px solid #e2e8f0;
}.plan-table td,
#plan-table td{
color:#1e293b;
padding:14px 16px;
border-bottom:1px solid #f1f5f9;
font-size:14px;
vertical-align:middle;
}.plan-table tr:last-child td,
#plan-table tr:last-child td{
border-bottom:none;
}.plan-table tr:hover td,
#plan-table tr:hover td{
background:#f8fafc;
}.plan-num{
width:48px;
color:#64748b;
font-weight:600;
}.plan-date{
width:100px;
font-weight:600;
color:#1c77ff;
cursor:pointer;
}.plan-date:hover{
text-decoration:underline;
}.plan-topic{
font-weight:500;
}.plan-hw{
color:#64748b;
font-size:13px;
max-width:280px;
}.plan-actions{
width:90px;
}.plan-actions .action-btn{
margin-right:4px;
}.gb-header-content-wrap #gb-actions{
background:#1c77ff;
flex-shrink:0;
}.gb-wrapper.planning-tab-active #tab-planning{
display:flex !important;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
}.gb-wrapper.planning-tab-active .gb-subbar-header{
display:none !important;
}.gb-wrapper.planning-tab-active .gb-subbar-header #school-year-block,
.gb-wrapper.planning-tab-active .gb-subbar-header .btn-add-column,
.gb-wrapper.planning-tab-active .gb-subbar-header .zoom-wrapper,
.gb-wrapper.planning-tab-active .gb-subbar-header .nav-zoom-box{
display:none !important;
}#gb-actions .btn-primary{
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.2);
color:white;
}#gb-actions .btn-primary:hover{
background:rgba(255, 255, 255, 0.2);
}.gb-content::-webkit-scrollbar{
width:8px;
height:8px;
}.gb-content::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.05);
border-radius:4px;
}.gb-content::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.2);
border-radius:4px;
}.gb-content::-webkit-scrollbar-thumb:hover{
background:rgba(255, 255, 255, 0.3);
}.group-badge{
display:inline-block;
background:rgba(56, 189, 248, 0.2);
color:#7dd3fc;
font-size:9px;
padding:1px 5px;
border-radius:4px;
margin-top:3px;
font-weight:600;
}.grade-with-comment{
position:relative;
background:rgba(59, 130, 246, 0.15) !important;
}.grade-with-comment::after{
content:"рџ’¬";
position:absolute;
top:2px;
right:2px;
font-size:8px;
color:#93c5fd;
}.day-selector{
display:flex;
gap:10px;
margin-bottom:20px;
}.day-pill{
padding:8px 20px;
background:rgba(255, 255, 255, 0.2);
color:white;
border-radius:20px;
font-size:14px;
font-weight:600;
cursor:pointer;
border:1px solid rgba(255, 255, 255, 0.1);
transition:0.2s;
}.day-pill:hover{
background:rgba(255, 255, 255, 0.3);
}.day-pill.active{
background:white;
color:var(--primary-blue);
}.schedule-item{
display:flex;
align-items:flex-start;
gap:20px;
margin-bottom:20px;
position:relative;
}.time-col{
width:100px;
padding-top:24px;
font-size:15px;
font-weight:500;
color:rgba(255, 255, 255, 0.9);
flex-shrink:0;
}.schedule-card{
flex-grow:1;
padding:20px;
border-radius:24px;
border:1px solid rgba(255, 255, 255, 0.1);
transition:transform 0.2s;
position:relative;
min-height:120px;
}.schedule-card.clickable{
cursor:pointer;
position:relative;
}.schedule-card.clickable:hover::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255, 255, 255, 0.1);
border-radius:24px;
}.schedule-card:hover{
transform:translateY(-2px);
}.schedule-card.blue{
background:rgba(255, 255, 255, 0.2);
color:white;
}.schedule-card.white{
background:white;
color:var(--text-dark);
}.schedule-delete{
position:absolute;
top:15px;
right:15px;
color:inherit;
opacity:0.5;
cursor:pointer;
transition:0.2s;
z-index:5;
}.schedule-delete:hover{
opacity:1;
color:var(--danger-red);
}.schedule-edit{
position:absolute;
top:15px;
right:45px;
color:inherit;
opacity:0.5;
cursor:pointer;
transition:0.2s;
z-index:5;
}.schedule-edit:hover{
opacity:1;
color:var(--primary-blue);
}.subst-badge{
position:absolute;
top:10px;
right:45px;
background:var(--warning-yellow);
color:#333;
font-size:10px;
padding:3px 8px;
border-radius:10px;
font-weight:bold;
z-index:5;
}.subst-info{
font-size:11px;
color:var(--warning-yellow);
margin-top:5px;
font-weight:600;
display:flex;
align-items:center;
gap:5px;
}.news-item{
border-left:4px solid var(--primary-blue);
padding-left:16px;
margin-bottom:24px;
}.news-date{
font-size:12px;
color:#888;
margin-bottom:4px;
font-weight:600;
text-transform:uppercase;
}.news-title{
font-size:18px;
font-weight:700;
margin-bottom:8px;
color:#111;
}.news-content{
font-size:14px;
line-height:1.5;
color:#4b5563;
}.settings-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}body.modal-open{
overflow:hidden;
}.modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.4);
z-index:6000;
display:none;
justify-content:center;
align-items:center;
opacity:0;
transition:opacity 0.3s;
pointer-events:none;
}.modal-overlay.open{
display:flex;
opacity:1;
pointer-events:auto;
}.modal-overlay.closing{
display:flex;
opacity:0;
pointer-events:none;
}.modal-window{
background:#ffffff;
width:500px;
max-width:90%;
max-height:90vh;
overflow-y:auto;
border-radius:18px;
padding:26px;
position:relative;
border:1px solid rgba(15, 23, 42, 0.08);
color:var(--text-dark);
transform:translateY(-24px);
opacity:0;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.modal-overlay.open .modal-window{
transform:translateY(0);
opacity:1;
}.modal-overlay.closing .modal-window{
transform:translateY(-24px);
opacity:0;
}#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg,
#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg{
background:#ffffff !important;
background-clip:padding-box;
}#gradebook-view .gb-table thead tr th.gb-sticky-col:first-of-type{
border-radius:8px 0 0 8px;
border:1px solid rgba(229, 231, 235, 0.95) !important;
border-right:none !important;
}#gradebook-view .gb-table tbody tr td.gb-sticky-col:first-of-type{
border-left:1px solid rgba(229, 231, 235, 0.95) !important;
border-right:none !important;
}#gradebook-view .gb-table thead tr th.gb-sticky-avg:last-of-type{
border-radius:0 8px 8px 0;
border:1px solid rgba(229, 231, 235, 0.95) !important;
border-left:none !important;
}#gradebook-view .gb-table tbody tr td.gb-sticky-avg:last-of-type{
border-right:1px solid rgba(229, 231, 235, 0.95) !important;
border-left:none !important;
}#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-col-2{
border-left:none !important;
border-right:1px solid rgba(229, 231, 235, 0.6) !important;
}#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table th.gb-sticky-col-2,
#gradebook-view .gb-table th.gb-sticky-avg{
background-clip:padding-box;
}.modal-overlay.open .grade-popover-win,
.modal-overlay.open .schedule-popover-win{
transform:translateY(0);
opacity:1;
transition:
transform 0.22s ease,
opacity 0.22s ease;
}.modal-overlay .grade-popover-win,
.modal-overlay .schedule-popover-win{
transform:translateY(-18px);
opacity:0;
}.modal-overlay.closing .grade-popover-win,
.modal-overlay.closing .schedule-popover-win{
transform:translateY(-18px);
opacity:0;
}.modal-overlay .modal{
transform:translateY(-24px);
opacity:0;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.modal-overlay.open .modal{
transform:translateY(0);
opacity:1;
}.modal-overlay.closing .modal{
transform:translateY(-24px);
opacity:0;
}.modal-overlay .progress-modal{
transform:translateY(-24px);
opacity:0;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.modal-overlay.open .progress-modal{
transform:translateY(0);
opacity:1;
}.modal-overlay.closing .progress-modal{
transform:translateY(-24px);
opacity:0;
}.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-bottom:18px;
}.modal-title{
font-size:20px;
font-weight:800;
letter-spacing:-0.01em;
color:#0f172a;
}.close-btn{
background:rgba(15, 23, 42, 0.04);
border:none;
font-size:22px;
cursor:pointer;
color:rgba(15, 23, 42, 0.55);
transition:
background 0.2s,
color 0.2s;
width:36px;
height:36px;
border-radius:999px;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
}.close-btn:hover{
background:rgba(15, 23, 42, 0.08);
color:rgba(15, 23, 42, 0.75);
}.modal-actions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(15, 23, 42, 0.08);
}.modal-window .btn-cancel,
.modal-window .btn-submit{
appearance:none;
border:none;
border-radius:999px;
padding:10px 16px;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:
transform 0.12s ease,
background 0.18s ease,
opacity 0.18s ease;
user-select:none;
}.modal-window .btn-cancel{
background:#f1f5f9;
color:#0f172a;
}.mriia-hw-modal{
width:560px;
max-width:92vw;
}.mriia-hw-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}@media (max-width:560px){
.mriia-hw-grid{
grid-template-columns:1fr;
}}.mriia-hw-filebox{
border:1px dashed rgba(15, 23, 42, 0.18);
background:rgba(28, 119, 255, 0.06);
border-radius:14px;
padding:16px;
width:140px;
min-height:120px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
cursor:pointer;
transition:
background 0.18s ease,
border-color 0.18s ease,
transform 0.12s ease;
user-select:none;
}.mriia-hw-filebox:hover{
background:rgba(28, 119, 255, 0.09);
border-color:rgba(28, 119, 255, 0.35);
transform:translateY(-1px);
}.mriia-hw-fileicon{
width:38px;
height:38px;
border-radius:12px;
background:#ffffff;
border:1px solid rgba(15, 23, 42, 0.08);
display:flex;
align-items:center;
justify-content:center;
color:#1c77ff;
}.mriia-hw-filelabel{
font-size:12px;
font-weight:800;
color:#1c77ff;
text-align:center;
line-height:1.2;
}.modal-window .btn-cancel:hover{
background:#e9eef6;
}.modal-window .btn-submit{
background:var(--primary-blue);
color:#ffffff;
}.modal-window .btn-submit:hover{
}.modal-window .btn-cancel:active,
.modal-window .btn-submit:active{
transform:translateY(1px);
}.modal-window .btn-cancel:focus-visible,
.modal-window .btn-submit:focus-visible{
outline:none;
}.modal-window .btn-submit:disabled,
.modal-window .btn-cancel:disabled{
opacity:0.55;
cursor:not-allowed;
}#toast-container{
position:fixed;
right:18px;
bottom:18px;
z-index:250000;
display:flex;
flex-direction:column;
gap:10px;
pointer-events:none;
}#toast-container .toast{
position:relative;
left:auto;
right:auto;
bottom:auto;
min-width:280px;
max-width:min(460px, calc(100vw - 40px));
background:#ffffff;
color:#111827;
border-radius:999px;
padding:14px 16px;
border:1px solid rgba(17, 24, 39, 0.1);
box-shadow:0 10px 30px rgba(2, 6, 23, 0.14);
transform:translateY(10px);
opacity:0;
visibility:visible;
transition:
transform 0.22s ease,
opacity 0.22s ease;
pointer-events:auto;
}#toast-container .toast.open{
transform:translateY(0);
opacity:1;
}#toast-container .toast-icon{
font-size:20px;
line-height:1.3;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}#toast-container .toast-close{
appearance:none;
border:none;
background:transparent;
color:rgba(17, 24, 39, 0.55);
font-size:20px;
line-height:1;
cursor:pointer;
padding:0;
margin-left:6px;
}#toast-container .toast-row{
display:flex;
align-items:flex-start;
gap:10px;
}#toast-container .toast-text{
font-size:16px;
line-height:1.3;
font-weight:600;
flex:1;
white-space:pre-wrap;
word-break:break-word;
}@media (max-width:900px){
#toast-container{
bottom:calc(var(--mobile-bottom-height, 60px) + 12px);
}
}
.form-group{
margin-bottom:16px;
}.form-label{
display:block;
font-size:14px;
font-weight:600;
margin-bottom:6px;
color:#374151;
}.form-input,
.form-select,
.form-textarea{
width:100%;
padding:12px;
border:none;
border-radius:12px;
font-size:14px;
outline:none;
transition:border-color 0.2s;
background:white;
box-shadow:none;
}#notfound-screen{
position:fixed;
inset:0;
background:var(--primary-blue);
color:#fff;
display:none;
z-index:3000;
align-items:center;
justify-content:center;
flex-direction:column;
gap:12px;
}#notfound-screen.open{
display:flex;
}#notfound-screen h2{
font-size:28px;
font-weight:800;
}#notfound-screen p{
font-size:16px;
opacity:0.95;
}#notfound-screen .nf-btn{
margin-top:18px;
padding:12px 20px;
border-radius:12px;
background:#fff;
color:var(--primary-blue);
font-weight:700;
border:none;
cursor:pointer;
}.form-textarea{
resize:vertical;
min-height:80px;
}.form-input:focus,
.form-select:focus{
border:none;
box-shadow:none;
}.grade-circle-wrapper{
width:120px;
height:120px;
border-radius:999px;
border:3px solid var(--primary-blue);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
margin-top:4px;
background:#f9fafb;
}.grade-circle-input{
width:80px;
height:80px;
border-radius:999px;
border:none;
text-align:center;
font-size:32px;
font-weight:700;
outline:none;
background:white;
}.grade-circle-input::placeholder{
font-size:12px;
font-weight:500;
}#modal-grade-edit.modal-overlay{
z-index:200000;
}#modal-grade-edit.open{
background:transparent !important;
backdrop-filter:none !important;
}#modal-grade-edit .grade-popover-win{
border-radius:20px;
overflow:hidden;
border:none;
border-left:4px solid #1c77ff;
box-shadow:inset 4px 0 0 0 #1c77ff, 0 18px 44px rgba(15,23,42,0.18) !important;
padding:0;
display:flex;
flex-direction:column;
max-height:70vh;
}#modal-grade-edit .grade-popover-top{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px 6px 14px;
background:#ffffff;
}#modal-grade-edit .grade-popover-top-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1 1 auto;
}#modal-grade-edit .grade-popover-date{
background:#1c77ff;
color:#ffffff;
font-weight:900;
font-size:12px;
padding:5px 9px;
border-radius:12px;
}#modal-grade-edit .grade-popover-title{
font-weight:900;
font-size:14px;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}#modal-grade-edit .grade-popover-trash{
width:30px;
height:30px;
border-radius:12px;
border:1px solid #fecaca;
background:#ffffff;
color:#ef4444;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}#modal-grade-edit .grade-popover-trash:hover{
background:#fef2f2;
}#modal-grade-edit .grade-popover-close{
width:32px;
height:32px;
border-radius:12px;
border:none;
background:transparent;
color:#0f172a;
font-size:0;
cursor:pointer;
line-height:1;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
}#modal-grade-edit .grade-popover-close::before,
#modal-grade-edit .grade-popover-close::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
border-radius:999px;
background:currentColor;
transform-origin:center;
}#modal-grade-edit .grade-popover-close::before{
transform:translate(-50%, -50%) rotate(45deg);
}#modal-grade-edit .grade-popover-close::after{
transform:translate(-50%, -50%) rotate(-45deg);
}#modal-grade-edit .grade-popover-body{
padding:8px 14px 12px 14px;
background:#f8fafc;
flex:1 1 auto;
overflow-y:auto;
overflow-x:hidden;
}#modal-grade-edit .grade-popover-student{
display:flex;
align-items:center;
gap:12px;
margin-top:6px;
}#modal-grade-edit .grade-popover-avatar{
width:42px;
height:42px;
border-radius:9px;
background:#e5e7eb;
color:#0f172a;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
}#modal-grade-edit .grade-popover-student-name{
font-weight:900;
font-size:14.5px;
color:#0f172a;
}#modal-grade-edit .grade-popover-gr{
margin-left:auto;
background:#eef2ff;
border:1px solid #d7e5ff;
color:#1c77ff;
font-weight:900;
font-size:12px;
padding:6px 10px;
border-radius:999px;
display:none;
}#modal-grade-edit .grade-popover-circle-wrap{
display:flex;
justify-content:center;
margin:10px 0 8px 0;
}#modal-grade-edit .grade-popover-circle{
width:90px;
height:90px;
border-radius:999px;
background:#f1f5ff;
border:3px solid #d7e5ff;
display:flex;
align-items:center;
justify-content:center;
}#modal-grade-edit .grade-popover-circle-input{
width:100%;
height:100%;
border:none;
outline:none;
background:transparent !important;
box-shadow:none !important;
-webkit-appearance:none;
appearance:none;
line-height:1;
caret-color:#1c77ff;
text-align:center;
font-weight:900;
font-size:40px;
color:#0f172a;
}#modal-grade-edit .grade-popover-toggle-row{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin-bottom:12px;
}#modal-grade-edit .grade-popover-toggle-text{
font-weight:800;
color:#334155;
font-size:13px;
}#modal-grade-edit .grade-popover-switch{
position:relative;
display:inline-flex;
width:48px;
height:28px;
}#modal-grade-edit .grade-popover-switch input{
opacity:0;
width:0;
height:0;
}#modal-grade-edit .grade-popover-slider{
position:absolute;
inset:0;
background:#e2e8f0;
border-radius:999px;
transition:all 0.2s;
}#modal-grade-edit .grade-popover-slider:before{
content:"";
position:absolute;
height:22px;
width:22px;
left:3px;
top:3px;
background:white;
border-radius:999px;
transition:all 0.2s;
}#modal-grade-edit .grade-popover-switch input:checked + .grade-popover-slider{
background:#1c77ff;
}#modal-grade-edit
.grade-popover-switch
input:checked
+ .grade-popover-slider:before{
transform:translateX(20px);
}#modal-grade-edit .grade-popover-pills{
display:flex;
justify-content:space-between;
flex-wrap:nowrap;
gap:4px;
align-items:center;
}#modal-grade-edit .grade-popover-pill{
border:1px solid #e2e8f0;
background:#f8fafc;
color:#0f172a;
border-radius:8px;
font-weight:900;
font-size:11px;
height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex:1 1 0;
min-width:0;
padding:0 4px;
box-sizing:border-box;
white-space:nowrap;
}#modal-grade-edit .grade-popover-pill.active{
background:#eaf2ff;
border-color:#bbd7ff;
color:#1c77ff;
}#modal-grade-edit .grade-popover-divider{
height:1px;
background:#e2e8f0;
margin:12px 0;
}#modal-grade-edit .grade-popover-section-title{
font-weight:900;
color:#0f172a;
font-size:13px;
margin-bottom:8px;
text-align:left;
}#modal-grade-edit .grade-popover-work{
display:flex;
justify-content:center;
gap:12px;
}#modal-grade-edit .grade-popover-work-dot{
width:48px;
height:48px;
border-radius:16px;
border:2px solid #d7e5ff;
background:#eef4ff;
cursor:pointer;
}#modal-grade-edit .grade-popover-work-dot.active{
background:#dcebff;
border-color:#9fc2ff;
}#modal-grade-edit .grade-popover-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:7px 4px;
cursor:pointer;
color:#0f172a;
}#modal-grade-edit .grade-popover-row-title{
font-weight:900;
font-size:13px;
}#modal-grade-edit .grade-popover-row-chevron{
font-weight:900;
color:#64748b;
}#modal-grade-edit .grade-popover-textarea{
width:100%;
border-radius:16px;
border:1px solid #e2e8f0;
padding:9px 10px;
font-weight:700;
color:#0f172a;
resize:none;
background:#ffffff;
}#modal-grade-edit .grade-popover-actions{
background:#f8fafc;
padding:8px 12px 12px 12px;
flex:0 0 auto;
}#modal-grade-edit .grade-popover-submit{
width:100%;
height:36px;
border:none;
border-radius:999px;
background:#1c77ff;
color:#fff;
font-weight:900;
font-size:13px;
cursor:pointer;
}#modal-grade-edit .grade-popover-submit.enabled{
filter:none;
opacity:1;
}#modal-grade-edit .grade-popover-submit:not(.enabled){
opacity:0.55;
}#modal-grade-edit .grade-popover-hidden{
display:none;
}#modal-grade-edit .grade-gr-menu{
display:none;
margin-top:10px;
padding:10px;
border-radius:16px;
border:1px solid #e2e8f0;
background:#ffffff;
}#modal-grade-edit .grade-gr-menu.open{
display:block;
}#modal-grade-edit .grade-gr-menu-items{
display:flex;
gap:8px;
flex-wrap:wrap;
}#modal-grade-edit .grade-gr-item{
border:1px solid #e2e8f0;
background:#f8fafc;
color:#0f172a;
padding:7px 11px;
border-radius:999px;
font-weight:900;
font-size:12px;
cursor:pointer;
}#modal-grade-edit #grade-type-select.form-select{
height:28px;
padding-top:4px;
padding-bottom:4px;
font-size:12px;
}#modal-grade-edit .grade-gr-item.active{
background:#eaf2ff;
border-color:#bbd7ff;
color:#1c77ff;
}#modal-schedule-lesson.modal-overlay{
z-index:200000;
}#modal-role-edit.modal-overlay{
z-index:200000;
}#modal-schedule-lesson.open{
background:transparent !important;
backdrop-filter:none !important;
}#modal-schedule-lesson .schedule-popover-win{
border-radius:20px;
overflow:hidden;
border:none;
padding:0;
display:flex;
flex-direction:column;
max-height:70vh;
}#modal-schedule-lesson .schedule-popover-top{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px 6px 14px;
background:#ffffff;
}#modal-schedule-lesson .schedule-popover-top-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1 1 auto;
}#modal-schedule-lesson .schedule-popover-date{
background:#1c77ff;
color:#ffffff;
font-weight:900;
font-size:12px;
padding:5px 9px;
border-radius:12px;
}#modal-schedule-lesson .schedule-popover-title{
font-weight:900;
font-size:14px;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}#modal-schedule-lesson .schedule-popover-close{
width:32px;
height:32px;
border-radius:12px;
border:none;
background:transparent;
color:#0f172a;
font-size:0;
cursor:pointer;
line-height:1;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
}#modal-schedule-lesson .schedule-popover-close::before,
#modal-schedule-lesson .schedule-popover-close::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
border-radius:999px;
background:currentColor;
transform-origin:center;
}#modal-schedule-lesson .schedule-popover-close::before{
transform:translate(-50%, -50%) rotate(45deg);
}#modal-schedule-lesson .schedule-popover-close::after{
transform:translate(-50%, -50%) rotate(-45deg);
}#modal-schedule-lesson .schedule-popover-body{
padding:10px 14px 12px 14px;
background:#ffffff;
flex:1 1 auto;
overflow-y:auto;
}#modal-schedule-lesson .schedule-popover-classline{
font-weight:900;
font-size:18px;
color:#0f172a;
margin-top:2px;
}#modal-schedule-lesson .schedule-popover-subjectline{
font-weight:800;
font-size:14px;
color:#0f172a;
margin-top:8px;
}#modal-schedule-lesson .schedule-popover-linkrow{
display:flex;
align-items:center;
gap:10px;
margin-top:12px;
font-weight:800;
color:#1c77ff;
cursor:pointer;
user-select:none;
}#modal-schedule-lesson .schedule-popover-linkrow i{
width:18px;
min-width:18px;
text-align:center;
}#modal-schedule-lesson .schedule-popover-divider{
height:1px;
border-top:1px dashed #e2e8f0;
margin:14px 0;
}#modal-schedule-lesson .schedule-popover-section-title{
font-weight:900;
color:#0f172a;
font-size:14px;
margin-bottom:8px;
text-align:left;
}#modal-schedule-lesson .schedule-popover-topic{
font-weight:700;
color:#0f172a;
font-size:13px;
line-height:1.25;
}#modal-schedule-lesson .schedule-popover-topic::before{
content:"\2022";
margin-right:8px;
color:#1c77ff;
}#modal-schedule-lesson .schedule-popover-chipwrap{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}#modal-schedule-lesson .schedule-popover-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#0f172a;
font-weight:800;
font-size:12px;
max-width:100%;
}#modal-schedule-lesson .schedule-popover-chip i{
color:#64748b;
}#modal-schedule-lesson .schedule-popover-chip span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}#modal-schedule-lesson .schedule-popover-actions{
background:#ffffff;
padding:10px 14px 14px 14px;
flex:0 0 auto;
}#modal-schedule-lesson .schedule-popover-submit{
width:100%;
height:44px;
border:none;
border-radius:16px;
background:#1c77ff;
color:#fff;
font-weight:900;
font-size:14px;
cursor:pointer;
}#modal-schedule-lesson .schedule-popover-submit:hover{
filter:brightness(0.98);
}@media (max-width:1100px){
.home-shell{
grid-template-columns:1fr;
}.home-side-widgets{
width:100%;
}}.grade-group-pill{
border-radius:999px;
padding:6px 10px;
font-size:12px;
border:1px solid #e5e7eb;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
background:#f9fafb;
}.grade-group-pill input{
margin:0;
}.grade-group-pill.active{
border-color:var(--primary-blue);
background:#eff6ff;
color:var(--primary-blue);
}.auto-star-wrapper{
position:relative;
display:inline-block;
}.auto-star-btn{
position:absolute;
top:2px;
right:2px;
width:18px;
height:18px;
border-radius:6px;
border:1px solid #bfdbfe;
background:#eff6ff;
color:#2563eb;
font-size:11px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}.gb-tall-assessment{
vertical-align:middle;
}.gb-tall-assessment .gb-tall-name{
position:absolute;
top:0;
left:0;
right:0;
bottom:20px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
line-height:1.15;
font-weight:700;
overflow-wrap:anywhere;
padding:2px 3px;
box-sizing:border-box;
}.gb-tall-assessment .auto-star-btn.gb-tall-star{
position:absolute !important;
top:auto !important;
right:auto !important;
bottom:2px !important;
left:50% !important;
transform:translateX(-50%) !important;
}.schedule-view-label{
font-weight:600;
font-size:14px;
}.journal-filters{
margin-bottom:20px;
display:inline-flex;
gap:0;
align-items:center;
padding:0;
padding-left:10px;
background:transparent;
border:none;
border-radius:0;
overflow:visible;
width:auto;
white-space:nowrap;
flex-wrap:nowrap;
}.journal-tab{
font-size:18px;
font-weight:700;
cursor:pointer;
padding:8px 12px;
}.filter-btn{
padding:8px 12px;
height:34px;
min-height:34px;
border-radius:0;
border:none;
background:transparent;
color:white;
cursor:pointer;
font-weight:600;
font-size:18px;
transition:all 0.15s;
outline:none;
display:inline-flex;
align-items:center;
justify-content:center;
}.filter-btn:hover{
background:transparent;
transform:none;
}.filter-btn.active{
background:transparent;
color:white;
text-decoration:underline;
text-underline-offset:8px;
text-decoration-thickness:2px;
}#journals-tabs-wrap{
padding:0 !important;
margin:0 !important;
}.journal-subfilters{
margin-top:0px;
margin-bottom:10px;
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.14);
border-radius:16px;
padding:12px;
display:none;
align-items:center;
gap:12px;
flex-wrap:wrap;
}.journal-subfilters.open{
display:flex;
}.journal-subfilters .jsf-select{
height:40px;
min-width:220px;
padding:0 14px;
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.18);
background:rgba(255, 255, 255, 0.16);
color:#ffffff;
font-weight:800;
outline:none;
appearance:none;
}.journal-subfilters .jsf-select option{
color:#0f172a;
}#journals-class-subfilters{
flex-wrap:nowrap;
width:100%;
background:rgba(255, 255, 255, 0.08);
border:1px solid rgba(255, 255, 255, 0.12);
border-radius:16px;
padding:10px 12px;
gap:12px;
justify-content:flex-start;
}#journals-class-subfilters .jsf-select{
flex:0 0 220px;
width:220px;
max-width:220px;
min-width:220px;
padding:0 12px;
height:34px;
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.12);
font-size:12.5px;
font-weight:800;
}@media (max-width:520px){
#journals-class-subfilters{
flex-wrap:wrap;
}#journals-class-subfilters .jsf-select{
flex:1 1 100%;
width:100%;
max-width:100%;
min-width:0;
}}.parallel-header{
font-size:18px;
font-weight:bold;
margin-top:20px;
margin-bottom:10px;
color:white;
}@keyframes slideIn{
0%{
opacity:0;
transform:translateX(18px) scale(0.995);
}60%{
opacity:0.98;
transform:translateX(-6px) scale(1.002);
}100%{
opacity:1;
transform:translateX(0) scale(1);
}}#sync-indicator{
transition:
background-color 0.3s,
transform 0.3s;
cursor:pointer;
}#sync-indicator:hover{
}.key-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:8px;
font-size:13px;
margin-top:10px;
}.key-status.connected{
background:#d1fae5;
color:#065f46;
border:1px solid #a7f3d0;
}.key-status.disconnected{
background:#fee2e2;
color:#991b1b;
border:1px solid #fecaca;
}.key-status.local{
background:#fef3c7;
color:#92400e;
border:1px solid #fde68a;
}.sync-indicator{
position:fixed;
bottom:20px;
right:20px;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:999;
transition:background-color 0.3s ease, transform 0.3s ease;
}.sync-indicator.connected{
background:#10b981;
color:white;
}.sync-indicator.disconnected{
background:#ef4444;
color:white;
}.sync-indicator.local{
background:#f59e0b;
color:white;
}.sync-indicator.syncing{
background:#3b82f6;
color:white;
animation:pulse 3s ease-in-out infinite;
transform-origin:center center;
will-change:transform, opacity;
}.sync-indicator.raised-for-modal{
bottom:120px;
z-index:16000;
}@keyframes pulse{
0%, 100% {
transform:scale(1);
opacity:1;
}
35% {
transform:scale(1.015);
opacity:1;
}
70% {
transform:scale(1.02);
opacity:1;
}
}.sync-status-message{
position:fixed;
top:20px;
right:20px;
max-width:300px;
z-index:10000;
animation:slideIn 0.3s ease;
}.sync-status-message > div{
background:#3b82f6;
color:white;
padding:12px 16px;
border-radius:8px;
margin-bottom:8px;
display:flex;
justify-content:space-between;
align-items:center;
}.sync-status-message .success{
background:#10b981;
}.sync-status-message .warning{
background:#f59e0b;
}.sync-status-message .error{
background:#ef4444;
}.sync-status-message .info{
background:#3b82f6;
}.bin-test-success{
background:#d1fae5;
color:#065f46;
padding:8px;
border-radius:6px;
margin-top:5px;
font-size:12px;
}.bin-test-warning{
background:#fef3c7;
color:#92400e;
padding:8px;
border-radius:6px;
margin-top:5px;
font-size:12px;
}.bin-test-error{
background:#fee2e2;
color:#991b1b;
padding:8px;
border-radius:6px;
margin-top:5px;
font-size:12px;
}.copy-btn{
background:#f3f4f6;
border:none;
padding:5px 10px;
border-radius:6px;
cursor:pointer;
font-size:12px;
transition:background-color 0.2s;
}.copy-btn:hover{
background:#e5e7eb;
}.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:20px;
margin-top:20px;
}.stats-card{
background:white;
border-radius:16px;
padding:20px;
}.stats-title{
font-size:16px;
font-weight:600;
margin-bottom:15px;
color:#374151;
}.stats-value{
font-size:32px;
font-weight:700;
color:var(--primary-blue);
}.stats-subvalue{
font-size:14px;
color:#6b7280;
margin-top:5px;
}.stats-chart{
height:200px;
margin-top:15px;
}.dash-wrap{
padding:22px;
}.dash-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
flex-wrap:wrap;
padding:18px 22px;
border-bottom:1px solid #e5e7eb;
}.dash-title{
display:flex;
flex-direction:column;
gap:6px;
}.dash-title h3{
margin:0;
font-size:18px;
font-weight:900;
color:#0f172a;
}.dash-title .dash-sub{
font-size:13px;
font-weight:700;
color:#64748b;
}.dash-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}.dash-pill{
padding:8px 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
background:#eff6ff;
color:#1d4ed8;
border:1px solid #dbeafe;
}.dash-grid{
display:grid;
grid-template-columns:repeat(12, 1fr);
gap:16px;
padding:18px 22px 22px;
}.dash-col-12{
grid-column:span 12;
}.dash-col-8{
grid-column:span 8;
}.dash-col-6{
grid-column:span 6;
}.dash-col-4{
grid-column:span 4;
}.dash-col-3{
grid-column:span 3;
}@media (max-width:1100px){
.dash-col-8{
grid-column:span 12;
}.dash-col-6{
grid-column:span 12;
}.dash-col-4{
grid-column:span 12;
}.dash-col-3{
grid-column:span 6;
}}@media (max-width:640px){
.dash-col-3{
grid-column:span 12;
}}.kpi-card{
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
border:1px solid #e5e7eb;
border-radius:18px;
padding:16px;
}.kpi-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}.kpi-label{
font-size:12px;
font-weight:900;
color:#64748b;
text-transform:uppercase;
letter-spacing:0.04em;
}.kpi-icon{
width:34px;
height:34px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:#eff6ff;
color:#1d4ed8;
border:1px solid #dbeafe;
}.kpi-value{
margin-top:10px;
font-size:28px;
font-weight:950;
color:#0f172a;
line-height:1.1;
}.kpi-meta{
margin-top:6px;
font-size:12px;
font-weight:800;
color:#64748b;
display:flex;
gap:10px;
flex-wrap:wrap;
}.kpi-good{
color:#047857;
background:#d1fae5;
border:1px solid #a7f3d0;
padding:4px 10px;
border-radius:999px;
}.kpi-warn{
color:#92400e;
background:#fef3c7;
border:1px solid #fde68a;
padding:4px 10px;
border-radius:999px;
}.kpi-bad{
color:#991b1b;
background:#fee2e2;
border:1px solid #fecaca;
padding:4px 10px;
border-radius:999px;
}.dash-card{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:18px;
overflow:hidden;
}.dash-card-head{
padding:14px 16px;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
border-bottom:1px solid #eef2f7;
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}.dash-card-title{
font-size:14px;
font-weight:950;
color:#0f172a;
margin:0;
}.dash-card-sub{
font-size:12px;
font-weight:800;
color:#64748b;
margin-top:4px;
}.dash-card-body{
padding:14px 16px;
}.dash-search{
width:min(360px, 100%);
padding:9px 12px;
border-radius:12px;
border:1px solid #e5e7eb;
background:#ffffff;
color:#0f172a;
font-size:13px;
font-weight:800;
outline:none;
}.dash-search:focus{
border-color:#93c5fd;
}.dash-search::placeholder{
color:#94a3b8;
font-weight:800;
}.dash-table-wrap{
overflow:auto;
}.dash-table{
width:100%;
border-collapse:collapse;
min-width:620px;
}.dash-table th{
text-align:left;
padding:12px 12px;
background:#f8fafc;
color:#64748b;
font-size:11px;
text-transform:uppercase;
font-weight:950;
border-bottom:1px solid #e5e7eb;
letter-spacing:0.06em;
position:sticky;
top:0;
z-index:1;
}.dash-table td{
padding:12px 12px;
border-bottom:1px solid #eef2f7;
font-size:13px;
font-weight:800;
color:#0f172a;
}.dash-table tr:hover td{
background:#f8fbff;
}.mini-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 10px;
border-radius:999px;
font-size:12px;
font-weight:900;
border:1px solid #e5e7eb;
background:#ffffff;
color:#0f172a;
white-space:nowrap;
}.mini-dot{
width:8px;
height:8px;
border-radius:999px;
background:#94a3b8;
}.mini-dot.good{
background:#10b981;
}.mini-dot.warn{
background:#f59e0b;
}.mini-dot.bad{
background:#ef4444;
}.svg-chart{
width:100%;
height:auto;
display:block;
}.chart-legend{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:10px;
}.chart-legend .mini-badge{
background:#f8fafc;
}.problem-item{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
padding:12px 12px;
border-radius:14px;
border:1px solid #eef2f7;
background:#ffffff;
}.problem-item + .problem-item{
margin-top:10px;
}.problem-left{
display:flex;
flex-direction:column;
gap:6px;
}.problem-title{
font-size:13px;
font-weight:950;
color:#0f172a;
}.problem-desc{
font-size:12px;
font-weight:800;
color:#64748b;
line-height:1.35;
}.problem-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}.problem-priority{
font-size:12px;
font-weight:950;
}.dash-spark{
margin-top:10px;
width:100%;
height:40px;
}.calendar-add-btn{
display:inline-flex;
align-items:center;
gap:8px;
height:34px;
padding:0 16px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.28);
background:rgba(255, 255, 255, 0.16);
color:#fff;
font-weight:700;
font-size:13px;
cursor:pointer;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space:nowrap;
}.calendar-add-btn:hover{
background:rgba(255, 255, 255, 0.26);
border-color:rgba(255, 255, 255, 0.4);
}.calendar-add-btn i{
font-size:12px;
}.calendar-month-header{
display:grid;
grid-template-columns:repeat(7, minmax(150px, 1fr));
gap:0;
margin:0 auto;
max-width:1800px;
padding:0 10px;
border-left:1px solid transparent;
border-right:1px solid transparent;
box-sizing:border-box;
}.calendar-month-header .schedule-header-cell:first-child,
.calendar-month-header .schedule-header-cell:last-child{
border-right:1px solid rgba(15, 23, 42, 0.06);
}.calendar-table-body{
overflow:auto;
max-height:calc(100vh - 195px);
min-height:470px;
}.calendar-month-grid{
display:grid;
grid-template-columns:repeat(7, minmax(150px, 1fr));
grid-auto-rows:minmax(140px, 1fr);
gap:8px;
padding:16px 10px;
background:#fff;
box-sizing:border-box;
}.cal-m-day{
background:#f8fafc;
border:1px solid rgba(15, 23, 42, 0.06);
border-radius:12px;
padding:8px;
min-height:140px;
display:flex;
flex-direction:column;
gap:6px;
cursor:pointer;
position:relative;
box-sizing:border-box;
transition:border-color 0.15s ease;
}.cal-m-day:hover{
border-color:rgba(28, 119, 255, 0.45);
}.cal-m-day.is-empty{
background:transparent;
border-color:transparent;
cursor:default;
}.cal-m-day.is-weekend{
background:#f1f5f9;
}.cal-m-day.is-today{
background:#f0f6ff;
border-color:#1c77ff;
}.cal-m-day-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
}.cal-m-date-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:26px;
height:26px;
padding:0 8px;
border-radius:999px;
font-size:13px;
font-weight:800;
color:#0f172a;
background:transparent;
box-sizing:border-box;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}.cal-m-day.is-today .cal-m-date-pill{
background:#1c77ff;
color:#fff;
}.cal-m-day.is-empty .cal-m-date-pill{
color:rgba(15, 23, 42, 0.3);
}.cal-m-day.is-weekend .cal-m-date-pill{
color:rgba(15, 23, 42, 0.55);
}.cal-m-events{
display:flex;
flex-direction:column;
gap:4px;
overflow:hidden;
flex:1;
min-height:0;
}.cal-m-event{
display:flex;
align-items:center;
gap:6px;
padding:5px 8px;
border-radius:6px;
border-left:3px solid transparent;
font-size:12px;
font-weight:700;
line-height:1.2;
overflow:hidden;
transition:filter 0.15s ease;
flex-shrink:0;
}.cal-m-event:hover{
filter:brightness(0.96);
}.cal-m-event i{
font-size:10px;
flex-shrink:0;
}.cal-m-event-title{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}.cal-m-event.holiday{
background:rgba(16, 185, 129, 0.12);
border-left-color:#10b981;
color:#047857;
}.cal-m-event.meeting{
background:rgba(28, 119, 255, 0.1);
border-left-color:#1c77ff;
color:#1d4ed8;
}.cal-m-event.excursion{
background:rgba(139, 92, 246, 0.12);
border-left-color:#8b5cf6;
color:#6d28d9;
}.cal-m-event.other{
background:rgba(245, 158, 11, 0.14);
border-left-color:#f59e0b;
color:#b45309;
}.cal-m-event.birthday{
background:#f6d8f2;
border-left-color:#c026d3;
color:#86198f;
}.cal-m-more{
align-self:flex-start;
font-size:11px;
font-weight:700;
color:rgba(15, 23, 42, 0.55);
padding:2px 8px;
border-radius:999px;
background:rgba(15, 23, 42, 0.05);
cursor:pointer;
transition:background 0.15s ease;
flex-shrink:0;
}.cal-m-more:hover{
background:rgba(28, 119, 255, 0.12);
color:#1c77ff;
}
.home-lesson-header{
display:flex;
align-items:center;
gap:12px;
}.home-class-pill{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:22px;
flex:0 0 auto;
}.home-class-pill,
.home-class-pill *{
line-height:22px;
}.home-subject{
.home-group-pill{
background:#e8f1ff;
color:#000;
}
display:block;
line-height:22px;
margin:0;
padding:0;
flex:1 1 auto;
min-width:0;
}@media (max-width:520px){
.home-lesson-header{
gap:8px;
}}@media (max-width:768px){
.calendar-month-header,
.calendar-month-grid{
grid-template-columns:repeat(7, 120px);
}.calendar-table-body{
min-height:300px;
}}.calendar-day-title{
color:#fff;
font-size:28px;
font-weight:500;
line-height:1.15;
padding:4px 6px 12px;
}.calendar-day-controls{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
flex-wrap:wrap;
gap:10px;
}.calendar-day-nav{
display:inline-flex;
gap:4px;
background:rgba(255, 255, 255, 0.15);
border-radius:999px;
padding:4px;
}.calendar-day-table-wrap{
overflow:auto;
background:#fff;
border-radius:12px 12px 0 0;
height:calc(100vh - 155px) !important;
max-height:calc(100vh - 155px) !important;
box-sizing:border-box !important;
}.calendar-day-table{
width:100%;
border-collapse:collapse;
background:#fff;
}.calendar-day-table thead th{
text-align:left;
font-size:11px;
letter-spacing:0.4px;
text-transform:uppercase;
color:#64748b;
font-weight:700;
padding:12px 16px;
border-bottom:1px solid #e2e8f0;
background:#f8fbff;
white-space:nowrap;
}.calendar-day-table tbody td{
padding:14px 16px;
border-bottom:1px solid #eef2f7;
font-size:13px;
color:#0f172a;
vertical-align:top;
}.calendar-day-empty{
text-align:center;
padding:48px 20px;
color:#64748b;
font-size:14px;
}.calendar-day-empty i{
font-size:40px;
margin-bottom:12px;
color:#64748b;
}.calendar-day-footer{
padding:10px 16px;
font-size:12px;
color:#475569;
background:#fff;
border-top:1px solid #e2e8f0;
border-radius:0 0 12px 12px;
}.calendar-day-type-badge{
display:inline-block;
padding:4px 12px;
border-radius:999px;
font-size:12px;
font-weight:700;
white-space:nowrap;
}.calendar-day-type-badge.holiday{background:rgba(16, 185, 129, 0.14);color:#047857}.calendar-day-type-badge.meeting{background:rgba(28, 119, 255, 0.12);color:#1d4ed8}.calendar-day-type-badge.excursion{background:rgba(139, 92, 246, 0.14);color:#6d28d9}.calendar-day-type-badge.other{background:rgba(245, 158, 11, 0.16);color:#b45309}.no-events{
text-align:center;
padding:40px;
color:rgba(255, 255, 255, 0.5);
font-size:16px;
}.calendar-filter{
display:flex;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap;
}.filter-chip{
padding:8px 16px;
border-radius:20px;
background:rgba(255, 255, 255, 0.1);
color:white;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:all 0.2s;
border:1px solid rgba(255, 255, 255, 0.2);
}.filter-chip:hover{
background:rgba(255, 255, 255, 0.2);
}.filter-chip.active{
background:white;
color:var(--primary-blue);
}.schedule-filter-panel{
display:flex;
gap:15px;
margin-bottom:20px;
align-items:center;
flex-wrap:wrap;
padding:20px;
background:rgba(255, 255, 255, 0.1);
border-radius:16px;
border:1px solid rgba(255, 255, 255, 0.2);
}.schedule-filter-panel select{
padding:10px 15px;
border-radius:10px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.15);
color:white;
font-weight:600;
min-width:200px;
cursor:pointer;
outline:none;
}.schedule-filter-panel select option{
background:white;
color:var(--text-dark);
}.schedule-filter-panel button{
padding:10px 20px;
border-radius:10px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.15);
color:white;
font-weight:600;
cursor:pointer;
transition:all 0.2s;
}.schedule-filter-panel button:hover{
background:rgba(255, 255, 255, 0.25);
}#schedule .section-header{
display:none;
}#schedule .section-title{
font-size:26px;
}.schedule-frame{
background:#0f68f8;
border-radius:18px;
padding:6px 12px;
margin-top:-10px;
}#schedule .schedule-frame{
margin-top:-30px;
}.schedule-top-controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
margin-bottom:6px;
}.schedule-center-controls{
display:flex;
align-items:center;
justify-content:center;
flex:1;
}.schedule-left-controls{
flex:1;
}.schedule-left-controls{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}.schedule-pill{
display:inline-flex;
align-items:center;
gap:8px;
height:34px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.18);
background:rgba(255, 255, 255, 0.1);
color:rgba(255, 255, 255, 0.92);
font-weight:700;
font-size:13px;
cursor:pointer;
user-select:none;
}.schedule-pill.primary{
background:rgba(255, 255, 255, 0.16);
}.schedule-pill.active{
background:rgba(255, 255, 255, 0.92);
color:#1c77ff;
border-color:rgba(255, 255, 255, 0.92);
}.schedule-week-nav{
display:flex;
align-items:center;
gap:8px;
height:34px;
padding:0 10px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.18);
background:rgba(255, 255, 255, 0.1);
color:rgba(255, 255, 255, 0.92);
font-weight:800;
font-size:13px;
}.schedule-week-nav button{
width:26px;
height:26px;
border-radius:8px;
border:none;
background:rgba(255, 255, 255, 0.2);
color:white;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}.schedule-week-label{
white-space:nowrap;
font-weight:800;
}.schedule-week-picker{
position:absolute;
z-index:100000;
width:260px;
background:#1c77ff;
border-radius:14px;
padding:12px;
color:#fff;
display:none;
left:50%;
top:calc(100% + 10px);
transform:translateX(-50%);
}.schedule-week-picker.open{
display:block;
}.schedule-week-picker *{
box-sizing:border-box;
}.schedule-week-picker-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px;
font-weight:900;
}.schedule-week-nav{
position:relative;
}.schedule-week-picker-header button{
width:28px;
height:28px;
border-radius:10px;
border:none;
background:rgba(255, 255, 255, 0.18);
color:#fff;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}.schedule-week-picker-title{
font-size:14px;
letter-spacing:0.2px;
text-transform:none;
}.schedule-week-picker-weekdays{
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:6px;
margin-bottom:8px;
opacity:0.92;
font-size:11px;
font-weight:900;
}.schedule-week-picker-weekdays div{
text-align:center;
}.schedule-week-picker-days{
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:6px;
}.schedule-week-picker-day{
height:30px;
border-radius:10px;
border:none;
background:rgba(255, 255, 255, 0.14);
color:#fff;
font-weight:900;
cursor:pointer;
}.schedule-week-picker-day.is-out{
opacity:0.55;
}.schedule-week-picker-day.is-today{
background:rgba(255, 255, 255, 0.26);
}.schedule-week-picker-day.is-selected{
background:rgba(255, 255, 255, 0.92);
color:#1c77ff;
}.schedule-zoom{
display:inline-flex;
align-items:center;
gap:10px;
}.schedule-zoom .scale-pill{
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
border-radius:999px;
}.schedule-zoom .zoom-option, .schedule-zoom .scale-option{
color:rgba(255, 255, 255, 0.92);
border-radius:999px;
}.schedule-zoom .zoom-option.active, .schedule-zoom .scale-option.active{
background:rgba(255, 255, 255, 0.95);
color:#1c77ff;
border-radius:999px !important;
}.schedule-view-wrap{
position:relative;
}.schedule-view-menu{
position:absolute;
top:calc(100% + 10px);
left:0;
background:#fff;
border:1px solid rgba(15, 23, 42, 0.1);
border-radius:14px;
padding:10px;
min-width:260px;
z-index:9999;
display:none;
}.schedule-view-menu.open{
display:block;
}.schedule-view-menu .menu-row{
display:flex;
gap:10px;
align-items:center;
}#schedule-make-substitution .schedule-frame{
background:#2f73ff;
border-radius:18px;
padding:14px;
}.schedule-view-menu select{
width:100%;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(15, 23, 42, 0.12);
background:#fff;
color:#0f172a;
font-weight:700;
outline:none;
}.schedule-actions{
display:flex;
align-items:center;
gap:10px;
}.schedule-shell{
background:#fff;
border:1px solid rgba(0, 0, 0, 0.05);
border-radius:16px;
overflow:hidden;
}.schedule-table-header{
background:#f8fbff;
border-bottom:1px solid rgba(15, 23, 42, 0.08);
}.schedule-table-header-grid{
display:grid;
grid-template-columns:40px repeat(7, minmax(160px, 1fr));
gap:0;
margin:0 auto;
max-width:1800px;
padding:0 10px;
}.schedule-header-cell{
padding:8px 8px;
border-right:1px solid rgba(15, 23, 42, 0.06);
min-height:52px;
display:flex;
flex-direction:column;
justify-content:center;
}.schedule-header-cell:last-child{
border-right:none;
}.schedule-table-header-grid .schedule-header-cell:first-child{
border-right:none;
padding:0;
}.schedule-today-header-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:calc(100% - 4px);
margin:0 auto;
height:30px;
padding:0;
font-size:10px;
font-weight:800;
color:#1c77ff;
background:#ffffff;
border:1.5px solid #1c77ff;
border-radius:8px;
cursor:pointer;
box-sizing:border-box;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space:nowrap;
}.schedule-today-header-btn:hover{
background:rgba(28, 119, 255, 0.05);
}.schedule-today-header-btn.active{
background:#ffffff;
color:#1c77ff;
border:2px solid #1c77ff;
cursor:default;
}.schedule-day-title{
font-size:12px;
color:rgba(15, 23, 42, 0.7);
font-weight:800;
text-transform:none;
display:flex;
align-items:center;
gap:8px;
}.schedule-date-pill{
display:inline-flex;
align-items:center;
justify-content:center;
height:20px;
padding:0 8px;
border-radius:999px;
background:rgba(28, 119, 255, 0.1);
color:#1c77ff;
font-weight:800;
font-size:12px;
width:max-content;
}.schedule-date-pill.is-today{
background:#1c77ff;
color:white;
}.schedule-table-body{
overflow:auto;
max-height:calc(100vh - 185px);
}@media (min-width:769px){
#schedule .schedule-shell{
margin-left:5px;
margin-right:5px;
width:calc(100% - 10px) !important;
}#journals #journal-filters{
margin-left:-40px;
margin-right:-40px;
}#journals #journals-my-subfilters,
#journals #journals-class-subfilters,
#journals #journals-teachers-subfilters,
#journals #journals-grid-body{
margin-left:-20px;
margin-right:-20px;
}#gradebook-view .gb-tabs-row{
margin-left:-20px;
margin-right:-16px;
}#gradebook-view .gb-admin-journal-subtitle{
margin-left:-5px;
}#class-admin-panel{
margin-left:-20px;
margin-right:-20px;
}}#journals-tab-content #class-admin-panel,
#journals-tab-content #journal-filters,
#journals-tab-content #journals-my-subfilters,
#journals-tab-content #journals-class-subfilters,
#journals-tab-content #journals-teachers-subfilters{
margin-left:-20px !important;
margin-right:-20px !important;
padding-left:0 !important;
padding-right:0 !important;
}#journals-tab-content #class-admin-panel,
#journals-tab-content #journal-filters,
#journals-tab-content #journals-my-subfilters,
#journals-tab-content #journals-class-subfilters,
#journals-tab-content #journals-teachers-subfilters{
margin-left:-20px !important;
margin-right:-20px !important;
margin-top:0 !important;
margin-bottom:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}@media (max-width:768px){
#schedule .schedule-shell{
margin-left:0;
margin-right:0;
}#gradebook-view{
margin-left:0;
margin-right:0;
}#journals #journal-filters,
#journals #journals-my-subfilters,
#journals #journals-teachers-subfilters,
#journals #journals-grid-body{
margin-left:0;
margin-right:0;
}}body.no-global-scroll .main-content{
overflow:hidden !important;
}.schedule-table-body-inner{
transform-origin:top left;
}.schedule-grid{
display:grid;
grid-template-columns:40px repeat(7, minmax(160px, 1fr));
grid-template-rows:repeat(2161, 1px);
gap:0;
position:relative;
background:#fff;
border-radius:16px;
padding:20px 10px;
border:1px solid rgba(0,0,0,0.05);
margin:0 auto;
}.schedule-shell{
margin:0 auto;
width:100%;
max-width:1800px;
background:#fff;
border-radius:16px;
overflow:hidden;
}#schedule.page-section{
margin-left:-17px !important;
margin-right:-17px !important;
width:calc(100% + 34px) !important;
}.schedule-lesson-card{
background:#e9f2ff !important;
border-left:6px solid #2563eb !important;
border-radius:4px;
padding:10px 12px;
margin:0;
display:flex;
flex-direction:column;
justify-content:flex-start;
gap:10px;
font-size:11px;
overflow:hidden;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
cursor:pointer;
z-index:10;
}.schedule-lesson-card:hover{
background:#e0e7ff !important;
}.schedule-lesson-class{
font-size:12px;
font-weight:800;
color:#0f172a;
margin:0;
}.schedule-lesson-subject{
font-size:14px;
font-weight:600;
color:#0f172a;
margin:0;
}.schedule-lesson-teacher{
font-size:14px;
font-weight:600;
color:#0f172a;
display:flex;
align-items:center;
gap:8px;
margin-top:auto;
padding-top:0;
}.schedule-lesson-teacher i{
font-size:16px;
color:#0f172a;
}.schedule-time-label{
grid-column:1;
font-size:11px;
font-weight:600;
color:#94a3b8;
text-align:right;
padding-right:12px;
pointer-events:none;
display:flex;
align-items:center;
justify-content:flex-end;
transform:translateY(-50%);
}.schedule-grid-line{
grid-column:2 / span 7;
border-top:1px dotted #e2e8f0;
z-index:1;
pointer-events:none;
}.schedule-grid-line.hour{
border-top:1px solid #f1f5f9;
}.schedule-header-cell{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:15px 0;
border-bottom:1px solid #f1f5f9;
}.schedule-day-title{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
}.schedule-date-pill{
font-size:13px;
font-weight:700;
color:#475569;
}.schedule-date-pill.is-today{
background:#2563eb;
color:#fff;
padding:2px 8px;
border-radius:99px;
}.schedule-cell{
border-right:1px solid rgba(0,0,0,0.05);
position:relative;
}.schedule-cell:last-child{
border-right:none;
}.schedule-subst-shell{
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.14);
border-radius:16px;
overflow:hidden;
}.schedule-subst-shell{
width:100%;
}.header{
position:relative;
}.header .header-actions,
.header.reduced-header .header-actions{
position:absolute !important;
right:20px !important;
top:3px !important;
display:flex !important;
gap:8px !important;
align-items:center !important;
}#schedule-subst-save-btn{
border:1px solid rgba(255, 255, 255, 0.9);
padding:14px 20px;
font-size:16px;
border-radius:12px;
}.schedule-subst-top{
padding:14px 16px;
background:rgba(255, 255, 255, 0.06);
border-bottom:1px solid rgba(255, 255, 255, 0.12);
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:flex-end;
}.schedule-subst-field{
flex:1 1 220px;
min-width:220px;
}.schedule-subst-field .form-label{
color:rgba(255, 255, 255, 0.85);
}.schedule-subst-field .form-select,
.schedule-subst-field .form-input{
background:rgba(255, 255, 255, 0.12);
color:#fff;
border:1px solid rgba(255, 255, 255, 0.18);
}.schedule-subst-field .form-select option{
color:#000;
}.schedule-subst-body{
padding:14px;
}.schedule-subst-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}@media (max-width:920px){
.schedule-subst-grid{
grid-template-columns:1fr;
}}.schedule-subst-col{
display:flex;
flex-direction:column;
gap:10px;
}.schedule-subst-lesson{
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.08);
border-radius:14px;
padding:12px 12px;
display:flex;
gap:12px;
align-items:center;
min-height:66px;
}.schedule-subst-lesson-pill{
background:#1c77ff;
color:#fff;
font-weight:900;
font-size:12px;
padding:6px 10px;
border-radius:999px;
flex:0 0 auto;
}.schedule-subst-lesson-main{
min-width:0;
}.schedule-subst-lesson-title{
font-weight:900;
font-size:14px;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.schedule-subst-lesson-sub{
margin-top:2px;
font-weight:800;
font-size:12px;
color:rgba(15, 23, 42, 0.7);
}.schedule-subst-slot{
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.16);
border-radius:14px;
padding:12px;
min-height:66px;
display:flex;
align-items:center;
justify-content:center;
color:rgba(255, 255, 255, 0.92);
font-weight:900;
cursor:pointer;
user-select:none;
position:relative;
}.schedule-subst-slot:hover{
background:rgba(255, 255, 255, 0.14);
}.schedule-subst-slot-filled{
justify-content:flex-start;
gap:12px;
cursor:default;
}.schedule-subst-slot-filled{
background:#ffffff;
border:1px solid rgba(28, 119, 255, 0.12);
color:#1c77ff;
}.schedule-subst-slot-filled .schedule-subst-slot-title{
color:#1c77ff;
font-weight:800;
}.schedule-subst-slot-filled .schedule-subst-slot-name{
color:#1c77ff;
}.schedule-subst-slot-filled .schedule-subst-slot-title{
font-weight:900;
font-size:12px;
opacity:0.9;
}.schedule-subst-slot-filled .schedule-subst-slot-name{
font-weight:900;
font-size:14px;
margin-top:2px;
}.schedule-subst-edit{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.1);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}.schedule-subst-edit:hover{
background:rgba(255, 255, 255, 0.16);
}.schedule-time-cell{
padding:8px 8px;
border-right:1px solid rgba(15, 23, 42, 0.06);
border-bottom:1px solid rgba(15, 23, 42, 0.06);
background:#fbfdff;
color:rgba(15, 23, 42, 0.62);
font-weight:800;
font-size:12px;
display:flex;
align-items:flex-start;
justify-content:flex-start;
}.schedule-day-column{
border-right:1px solid rgba(15, 23, 42, 0.06);
background:white;
pointer-events:none;
z-index:0;
}.schedule-day-column.first-day{
border-left:1px solid rgba(15, 23, 42, 0.06);
}.schedule-cell{
padding:0;
cursor:cell;
z-index:5;
transition:background 0.1s ease;
border-bottom:none;
}.schedule-cell:hover{
background:rgba(37, 99, 235, 0.05);
}.schedule-lesson-card{
border-radius:14px;
padding:8px 10px 8px 14px;
border:1px solid rgba(15, 23, 42, 0.08);
cursor:pointer;
display:flex;
flex-direction:column;
gap:6px;
min-height:100%;
height:100%;
box-sizing:border-box;
flex:1 1 100%;
max-width:100%;
position:relative;
overflow:hidden;
background:var(--lesson-bg, #f8fafc);
}.schedule-lesson-card::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:var(--lesson-accent, rgba(15, 23, 42, 0.18));
}.schedule-lesson-card:active{
cursor:grabbing;
}.schedule-lesson-card.is-dragging{
opacity:0.55;
}.schedule-cell.is-drop-target{
outline:2px solid rgba(28, 119, 255, 0.35);
outline-offset:-2px;
}.schedule-cell > .schedule-lesson-card{
flex:1 1 50%;
max-width:50%;
}.schedule-lesson-class{
font-weight:900;
font-size:12px;
color:rgba(15, 23, 42, 0.82);
line-height:1.1;
}.schedule-lesson-subject{
font-weight:900;
font-size:14px;
color:rgba(15, 23, 42, 0.92);
line-height:1.15;
}.schedule-lesson-rows{
display:grid;
grid-template-columns:1fr;
gap:6px;
}.schedule-lesson-row{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#0f172a;
font-weight:700;
line-height:1.15;
}.schedule-lesson-row i{
width:14px;
min-width:14px;
text-align:center;
color:#0f172a;
}.schedule-lesson-row .schedule-lesson-text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}.schedule-lesson-row.is-teacher{
align-items:flex-start;
}.schedule-lesson-row.is-teacher .schedule-lesson-text{
overflow:visible;
text-overflow:clip;
white-space:normal;
word-break:break-word;
}.schedule-lesson-card.is-upcoming{
background:rgba(28, 119, 255, 0.92);
border:1px solid rgba(255, 255, 255, 0.18);
color:rgba(255, 255, 255, 0.95);
}.schedule-lesson-card.is-upcoming .schedule-lesson-class,
.schedule-lesson-card.is-upcoming .schedule-lesson-subject,
.schedule-lesson-card.is-upcoming .schedule-lesson-row,
.schedule-lesson-card.is-upcoming .schedule-lesson-text{
color:rgba(255, 255, 255, 0.95);
}.schedule-lesson-card.is-upcoming:hover{
background:rgba(28, 119, 255, 0.98);
}.schedule-lesson-card.is-past{
background:rgba(244, 247, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
color:rgba(15, 23, 42, 0.92);
}.schedule-lesson-card.is-past .schedule-lesson-class,
.schedule-lesson-card.is-past .schedule-lesson-subject,
.schedule-lesson-card.is-past .schedule-lesson-row{
color:rgba(15, 23, 42, 0.92);
}.holiday-message{
background:rgba(16, 185, 129, 0.2);
border:1px solid rgba(16, 185, 129, 0.3);
color:#10b981;
padding:20px;
border-radius:16px;
margin-bottom:20px;
text-align:center;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}.date-clickable{
cursor:pointer;
transition:all 0.2s;
}.date-clickable:hover{
background:rgba(255, 255, 255, 0.2) !important;
transform:scale(1.05);
}.no-schedule-message{
background:rgba(255, 255, 255, 0.1);
border:1px dashed rgba(255, 255, 255, 0.3);
color:rgba(255, 255, 255, 0.7);
padding:30px;
border-radius:16px;
text-align:center;
margin-top:0px;
font-size:16px;
}.no-schedule-image-wrap{
background:transparent;
border:0;
padding:0;
display:flex;
justify-content:center;
align-items:flex-start;
}.no-schedule-image{
width:815px;
max-width:90%;
height:auto;
display:block;
object-fit:contain;
margin-top:-25px;
}.schedule-day{
background:rgba(255, 255, 255, 0.05);
border-radius:16px;
padding:15px 10px;
min-height:100px;
border:1px solid rgba(255, 255, 255, 0.1);
transition:all 0.2s;
color:white;
display:flex;
flex-direction:column;
position:relative;
}.schedule-day:hover{
background:rgba(255, 255, 255, 0.1);
transform:translateY(-2px);
}.schedule-day.holiday{
background:rgba(16, 185, 129, 0.15);
border-color:rgba(16, 185, 129, 0.3);
}.schedule-day-title{
font-weight:600;
font-size:16px;
margin-bottom:10px;
text-align:center;
color:white;
}.schedule-day-lessons{
flex-grow:1;
display:flex;
flex-direction:column;
gap:5px;
}.schedule-lesson-item{
font-size:11px;
padding:5px 8px;
border-radius:8px;
background:rgba(255, 255, 255, 0.1);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}.schedule-lesson-item:hover{
background:rgba(255, 255, 255, 0.2);
}.schedule-bells-panel{
background:rgba(255, 255, 255, 0.1);
border-radius:16px;
padding:20px;
margin-bottom:20px;
border:1px solid rgba(255, 255, 255, 0.2);
}.bells-display{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:15px;
}.bell-time{
background:rgba(255, 255, 255, 0.15);
padding:8px 15px;
border-radius:10px;
font-size:14px;
font-weight:600;
color:#0f172a;
display:flex;
align-items:center;
gap:8px;
}.schedule-frame .bell-time{
color:rgba(255, 255, 255, 0.95);
}.bell-number{
background:var(--primary-blue);
color:white;
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
}.schedule-frame .bell-number{
background:rgba(255, 255, 255, 0.22);
border:1px solid rgba(255, 255, 255, 0.24);
}.schedule-sync-dropdown{
position:relative;
display:inline-block;
}.schedule-sync-btn{
padding:10px 20px;
border-radius:10px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.15);
color:white;
font-weight:600;
cursor:pointer;
transition:all 0.2s;
display:flex;
align-items:center;
gap:8px;
}.schedule-sync-btn:hover{
background:rgba(255, 255, 255, 0.25);
}.schedule-sync-menu{
position:absolute;
top:100%;
left:0;
background:white;
border-radius:10px;
min-width:200px;
z-index:100;
display:none;
overflow:hidden;
}.schedule-sync-menu.show{
display:block;
}.schedule-sync-item{
padding:12px 16px;
color:var(--text-dark);
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
transition:background-color 0.2s;
}.schedule-sync-item:hover{
background:#f5f5f5;
}.bin-status{
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 8px;
border-radius:12px;
font-size:12px;
font-weight:600;
}.bin-status.active{
background:#d1fae5;
color:#065f46;
}.bin-status.inactive{
background:#fee2e2;
color:#991b1b;
}.bin-status.pending{
background:#fef3c7;
color:#92400e;
}.storage-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:15px;
margin:20px 0;
}.storage-stat-card{
background:#f8f9fa;
padding:15px;
border-radius:12px;
border-left:4px solid var(--primary-blue);
}.storage-stat-value{
font-size:24px;
font-weight:700;
color:var(--primary-blue);
margin-bottom:5px;
}.storage-stat-label{
font-size:13px;
color:#666;
}@media (prefers-color-scheme:dark){
.storage-stat-card{
background:rgba(255, 255, 255, 0.1);
color:white;
}.storage-stat-label{
color:rgba(255, 255, 255, 0.7);
}}.subst-badge{
position:absolute;
top:10px;
right:45px;
background:var(--warning-yellow);
color:#333;
font-size:10px;
padding:3px 8px;
border-radius:10px;
font-weight:bold;
z-index:5;
}.status-badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
display:inline-block;
}.status-present{
background:#d1fae5;
color:#065f46;
}.status-absent{
background:#fee2e2;
color:#991b1b;
}.status-late{
background:#fef3c7;
color:#92400e;
}.status-vacation{
background:#dbeafe;
color:#1e40af;
}.report-filters{
display:flex;
gap:15px;
margin-bottom:20px;
flex-wrap:wrap;
padding:20px;
background:rgba(255, 255, 255, 0.1);
border-radius:16px;
border:1px solid rgba(255, 255, 255, 0.2);
}.report-filter-group{
display:flex;
flex-direction:column;
gap:8px;
min-width:200px;
}.report-card{
background:white;
border-radius:16px;
padding:25px;
margin-bottom:20px;
}.report-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
padding-bottom:15px;
border-bottom:2px solid #f0f0f0;
}.report-title{
font-size:20px;
font-weight:700;
color:var(--text-dark);
}.report-meta{
font-size:14px;
color:#666;
}.report-section{
margin-bottom:25px;
}.report-section-title{
font-size:16px;
font-weight:600;
color:var(--primary-blue);
margin-bottom:15px;
padding-bottom:8px;
border-bottom:1px solid #e5e7eb;
}.reports-shell{
border:1px solid rgba(0, 0, 0, 0.06);
}.reports-inner{
padding:18px 18px 10px 18px;
}.reports-breadcrumb{
font-size:12px;
font-weight:700;
color:#6b7280;
margin-bottom:10px;
display:flex;
align-items:center;
gap:8px;
}.reports-breadcrumb-sep{
color:#9ca3af;
font-weight:800;
}.reports-list{
border:1px solid rgba(2, 132, 199, 0.18);
border-radius:14px;
overflow:hidden;
background:rgba(255, 255, 255, 0.92);
}.reports-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 14px;
border-bottom:1px solid rgba(2, 132, 199, 0.14);
}.reports-row:last-child{
border-bottom:none;
}.reports-row-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}.reports-doc-icon{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
color:var(--primary-blue);
}.reports-doc-title{
font-size:14px;
font-weight:600;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.reports-generate-btn{
border:1px solid rgba(37, 99, 235, 0.35);
background:rgba(255, 255, 255, 0.95);
color:#2563eb;
border-radius:999px;
padding:7px 12px;
font-weight:700;
font-size:12px;
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
transition:
transform 0.08s ease,
background 0.15s ease,
;
flex:0 0 auto;
}.reports-generate-btn:hover{
background:#eff6ff;
}.reports-generate-btn:active{
transform:translateY(1px);
}.report-metrics .metric-card{
transition:transform 0.2s;
}.report-metrics .metric-card:hover{
transform:translateY(-2px);
}.report-table table{
}.report-table th{
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}.report-conclusions li{
position:relative;
padding-left:10px;
}.report-conclusions li:before{
content:"•";
position:absolute;
left:0;
color:var(--primary-blue);
}@keyframes fadeInReport{
0%{
opacity:0;
transform:translateY(12px) scale(0.995);
}70%{
opacity:0.98;
transform:translateY(-6px) scale(1.002);
}100%{
opacity:1;
transform:translateY(0) scale(1);
}}#report-preview{
animation:fadeInReport 0.5s ease;
}@media (max-width:768px){
.reports-controls .form-group{
flex:1 0 100%;
}.report-metrics{
grid-template-columns:1fr;
}.report-table{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}}@media (max-width:768px){
.report-filters{
flex-direction:column;
}.report-filter-group{
width:100%;
}.report-card{
padding:15px;
}}@media (min-width:769px){
#home-schedule-container{
margin-left:-12px;
width:calc(100% + 12px);
}}@media (max-width:768px){
#home-schedule-container{
margin-left:0;
width:100%;
}}.home-lesson-item{
display:flex;
gap:65px;
margin-bottom:0;
}.home-time{
width:100px;
flex-shrink:0;
padding-top:6px;
font-size:13px;
opacity:1;
color:#ffffff;
font-weight:800;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
}#home-schedule-container .home-time{
padding-left:10px;
}.home-lesson-card{
flex:1;
background:rgba(255, 255, 255, 0.08);
border:1px solid rgba(255, 255, 255, 0.12);
border-radius:16px;
padding:20px;
transition:all 0.2s;
}.home-lesson-card.is-past,
.home-lesson-card.is-active{
background:rgba(244, 247, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
}.home-lesson-card.is-upcoming{
background:rgba(59, 130, 246, 0.55);
border:1px solid rgba(255, 255, 255, 0.22);
}.home-lesson-card:hover{
background:rgba(255, 255, 255, 0.12);
transform:translateY(-2px);
}.home-lesson-card.is-past:hover,
.home-lesson-card.is-active:hover{
background:rgba(255, 255, 255, 0.96);
}.home-lesson-card.is-upcoming:hover{
background:rgba(59, 130, 246, 0.62);
}.home-class-pill{
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255, 255, 255, 0.92);
color:#0f172a;
padding:6px 12px;
border-radius:999px;
font-size:12px;
font-weight:700;
margin-bottom:0;
margin-right:12px;
border:1px solid rgba(0, 0, 0, 0.04);
vertical-align:middle;
}.home-lesson-card.is-upcoming .home-class-pill{
background:rgba(255, 255, 255, 0.92);
border-color:rgba(255, 255, 255, 0.55);
}.home-subject{
font-size:16px;
font-weight:700;
color:white;
margin-bottom:4px;
}.home-lesson-card.is-past .home-subject,
.home-lesson-card.is-active .home-subject{
color:#0f172a;
}.home-lesson-details{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin-top:10px;
}.home-lesson-details{
display:none !important;
}#home-schedule-container .home-lesson-details{
display:grid !important;
}#home-schedule-container .home-lesson-card{
padding:22px 22px;
border-radius:12px;
display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
column-gap:14px;
row-gap:18px;
position:relative;
}#home-schedule-container .home-lesson-card.is-active{
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
}#home-schedule-container .home-lesson-card.is-upcoming{
background:rgba(28, 119, 255, 0.92);
border:1px solid rgba(255, 255, 255, 0.18);
}#home-schedule-container .home-lesson-card.is-past{
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
}#home-schedule-container .home-lesson-card.is-upcoming .home-subject{
color:rgba(255, 255, 255, 0.98);
}#home-schedule-container .home-lesson-card.is-past .home-subject,
#home-schedule-container .home-lesson-card.is-active .home-subject{
color:#0f172a;
}#home-schedule-container .home-lesson-card.is-upcoming .home-room-number{
color:rgba(255, 255, 255, 0.85);
}#home-schedule-container .home-lesson-card.is-active .home-room-number,
#home-schedule-container .home-lesson-card.is-past .home-room-number{
color:rgba(15, 23, 42, 0.72);
}#home-schedule-container .home-room-number{
font-size:12.5px;
font-weight:800;
text-align:right;
align-self:end;
justify-self:end;
grid-column:2;
grid-row:2;
}#home-schedule-container .home-lesson-icon{
grid-column:2;
justify-self:end;
align-self:start;
width:44px;
height:44px;
border-radius:18px;
background:rgba(255, 255, 255, 0.18);
display:none;
align-items:center;
justify-content:center;
color:rgba(255, 255, 255, 0.95);
}#home-schedule-container .home-lesson-card.is-past .home-lesson-icon,
#home-schedule-container .home-lesson-card.is-active .home-lesson-icon{
background:rgba(28, 119, 255, 0.1);
color:rgba(28, 119, 255, 0.85);
}#home-schedule-container .home-lesson-details{
gap:14px;
grid-row:2;
margin-top:0;
}#home-schedule-container .home-lesson-details .home-detail-block:first-child{
padding-bottom:12px;
border-bottom:1px solid rgba(15, 23, 42, 0.1);
}#home-schedule-container
.home-lesson-card.is-upcoming
.home-lesson-details
.home-detail-block:first-child{
border-bottom-color:rgba(255, 255, 255, 0.28);
}#home-schedule-container .home-detail-label{
font-size:14px;
font-weight:900;
}#home-schedule-container .home-detail-text{
font-size:12.5px;
font-weight:800;
}#home-schedule-container .home-lesson-header{
display:flex;
align-items:center;
gap:12px;
}#home-schedule-container .home-lesson-header .home-subject{
margin-bottom:0;
align-self:center;
}#home-schedule-container .home-lesson-header{
align-items:center;
}#home-schedule-container .home-subject{
line-height:1.2;
}#home-schedule-container .home-lesson-header .home-class-pill,
#home-schedule-container .home-lesson-header .home-subject{
display:inline-flex;
align-items:center;
vertical-align:middle;
margin-bottom:0 !important;
line-height:1.2 !important;
}#home-schedule-container .home-class-pill{
padding:4.5px 10px;
font-size:12px;
font-weight:700;
border-radius:999px;
line-height:1;
transform:none;
border:1px solid rgba(0, 0, 0, 0.04);
background:rgba(255, 255, 255, 0.92);
color:#0f172a;
}#home-schedule-container .home-lesson-card.is-active .home-class-pill,
#home-schedule-container .home-lesson-card.is-past .home-class-pill{
background:#1c77ff;
color:#ffffff;
border-color:rgba(255, 255, 255, 0);
}#home-schedule-container .home-room-number{
white-space:nowrap;
}#home-schedule-container .home-lesson-card.is-past .home-room-number,
#home-schedule-container .home-lesson-card.is-active .home-room-number{
color:#0f172a;
}#home-schedule-container .home-lesson-card.is-upcoming .home-room-number{
color:rgba(255, 255, 255, 0.95);
}.home-detail-block{
display:flex;
flex-direction:column;
gap:2px;
}.home-detail-label{
font-size:13.5px;
font-weight:800;
color:var(--primary-blue);
}.home-detail-text{
font-size:16px;
font-weight:700;
color:#0f172a;
}.home-lesson-card.is-upcoming .home-detail-label,
.home-lesson-card.is-upcoming .home-detail-text{
color:rgba(255, 255, 255, 0.95);
}.home-lesson-card .home-lesson-details::before{
content:"";
display:block;
height:1px;
width:100%;
background:rgba(15, 23, 42, 0.1);
margin-bottom:4px;
}.home-lesson-card.is-upcoming .home-lesson-details::before{
background:rgba(255, 255, 255, 0.28);
}#home-schedule-container .home-lesson-details::before{
content:none;
display:none;
height:0;
margin:0;
background:transparent;
}.home-room-number{
position:absolute;
bottom:20px;
right:20px;
font-size:18px;
font-weight:700;
color:rgba(255, 255, 255, 0.5);
}.home-lesson-card.is-past .home-room-number,
.home-lesson-card.is-active .home-room-number{
color:rgba(15, 23, 42, 0.55);
}.home-lesson-card{
position:relative;
}.main-content.lesson-day-mode-active{
background:#1860ec !important;
min-height:100vh !important;
height:auto !important;
overflow-y:auto !important;
padding:8px 32px 24px 32px !important;
box-sizing:border-box !important;
}.main-content.lesson-day-mode-active > .header,
.main-content.lesson-day-mode-active #header-top,
.main-content.lesson-day-mode-active #header-bottom{
display:none !important;
}.lesson-day-view{
display:none;
position:relative;
box-sizing:border-box;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
font-family:inherit;
color:#0f172a;
height:calc(100vh - 8px + 25px);
min-height:calc(100vh - 8px + 25px);
overflow:visible;
flex-direction:column;
}
#header-top .header-page-icon{
color:var(--header-icon-color, #ffffff);
transition:color 0.15s ease, opacity 0.15s ease;
}
#header-top:has(.journal-link) .header-page-icon,
#header-top:has(.header-crumb-sep) .header-page-icon{
color:rgba(255, 255, 255, 0.75) !important;
opacity:0.75 !important;
}
#header-top:has(.journal-link) .header-page-icon img,
#header-top:has(.header-crumb-sep) .header-page-icon img{
opacity:0.75 !important;
}
#header-top .journal-link,
#header-top .journal-class-link{
color:rgba(255, 255, 255, 0.75) !important;
text-decoration:none !important;
transition:color 0.15s ease;
}
#header-top .journal-link:hover,
#header-top .journal-class-link:hover{
color:#ffffff !important;
text-decoration:none !important;
}
#header-top:has(.journal-link:hover) .header-page-icon,
#header-top:has(.journal-link:hover) .header-page-icon img,
#header-top .journal-link:hover ~ .header-page-icon,
#header-top .journal-link:hover ~ .header-page-icon img,
#header-top:hover .header-page-icon,
#header-top:hover .header-page-icon img{
color:#ffffff !important;
opacity:1 !important;
}
#header-top .journal-subject-name{
color:#ffffff !important;
font-weight:500;
}
#header-top .header-crumb-sep{
color:rgba(255, 255, 255, 0.55) !important;
margin:0 12px;
}
.lesson-day-header{
margin-top:8px;
margin-left:-11px;
}
@media (min-width:769px){
.lesson-day-header{
margin-left:6px;
}
}
.lesson-day-header #lesson-day-header-top{
display:flex;
align-items:baseline;
gap:1.8px;
font-size:15.1px !important;
line-height:1 !important;
margin-left:4px;
}
.lesson-day-header #lesson-day-header-top > span{
display:inline-block;
max-width:100%;
}
.lesson-day-header #lesson-day-header-top,
.lesson-day-header #lesson-day-header-top > span{
font-weight:450 !important;
}
.lesson-day-header #lesson-day-header-top > .header-page-icon{
display:inline-flex;
align-items:flex-end;
justify-content:center;
color:rgba(255, 255, 255, 0.75) !important;
opacity:0.75 !important;
font-size:13px !important;
margin-right:1px !important;
transform:translateY(2px);
transition:color 0.15s ease, opacity 0.15s ease;
}
.lesson-day-header #lesson-day-header-top > .header-page-icon img{
opacity:0.75 !important;
transition:opacity 0.15s ease;
}
.lesson-day-header .header-crumb-sep{
color:rgba(255, 255, 255, 0.55);
margin:0 12px;
}
.lesson-day-header #lesson-day-header-top .journal-link,
.lesson-day-header #lesson-day-header-top .journal-class-link{
color:rgba(255, 255, 255, 0.75) !important;
text-decoration:none !important;
transition:color 0.15s ease;
}
.lesson-day-header #lesson-day-header-top .journal-link:hover,
.lesson-day-header #lesson-day-header-top .journal-class-link:hover{
color:#ffffff !important;
text-decoration:none !important;
}
.lesson-day-header:has(.journal-link:hover) .header-page-icon,
.lesson-day-header:has(.journal-link:hover) .header-page-icon img,
.lesson-day-header #lesson-day-header-top .journal-link:hover ~ .header-page-icon,
.lesson-day-header #lesson-day-header-top .journal-link:hover ~ .header-page-icon img,
.lesson-day-header .header-page-icon:hover,
.lesson-day-header .header-page-icon:hover img{
color:#ffffff !important;
opacity:1 !important;
}
.lesson-day-header #lesson-day-header-top .journal-subject-name{
color:rgba(255, 255, 255, 0.75) !important;
font-weight:450;
}
.lesson-day-header #lesson-day-header-top #lesson-day-crumb-date{
color:#ffffff !important;
font-weight:600 !important;
}
.lesson-day-header #lesson-day-header-bottom{
font-size:28px !important;
font-weight:500 !important;
line-height:1.15 !important;
margin-bottom:4px !important;
color:#ffffff !important;
opacity:1 !important;
}
.lesson-day-header #lesson-day-header-bottom{
margin-left:-6px;
}
@media (max-width:768px){
.lesson-day-header #lesson-day-header-bottom{
margin-left:11px;
}
}
.lesson-day-header .subject-toggle-wrap{
display:none !important;
}
.lesson-day-header .lesson-day-back-btn{
display:none;
position:absolute;
top:-4px !important;
right:0;
align-items:center;
justify-content:center;
padding:12px 24px;
border:none;
border-radius:999px;
background:rgba(255, 255, 255, 0.16);
color:#ffffff;
font-family:inherit;
font-size:14px;
font-weight:600;
line-height:1;
letter-spacing:0.2px;
cursor:pointer;
white-space:nowrap;
z-index:10;
transition:background 0.15s ease;
}
.lesson-day-header .lesson-day-back-btn:hover{
background:rgba(255, 255, 255, 0.3);
}
.lesson-day-card-container{
background:#ffffff;
border-radius:24px;
padding:22px 24px 28px;
box-shadow:0 10px 32px rgba(0, 0, 0, 0.06);
display:grid;
grid-template-columns:minmax(300px, 380px) minmax(0, 1fr);
gap:24px;
align-items:stretch;
flex:1;
min-height:0;
overflow:hidden;
width:100%;
max-width:1720px;
margin:0 auto;
box-sizing:border-box;
}
.lesson-day-col-left{
display:flex;
flex-direction:column;
gap:14px;
min-width:0;
height:100%;
max-height:100%;
overflow:hidden;
}
.lesson-day-overview-card{
background:#ffffff;
display:flex;
flex-direction:column;
flex-shrink:0;
}
.ld-scrollable-sections{
flex:1;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
display:flex;
flex-direction:column;
gap:14px;
padding-right:6px;
}
.ld-scrollable-sections::-webkit-scrollbar{
width:5px;
}
.ld-scrollable-sections::-webkit-scrollbar-track{
background:transparent;
}
.ld-scrollable-sections::-webkit-scrollbar-thumb{
background:#e2e8f0;
border-radius:999px;
}
.ld-scrollable-sections::-webkit-scrollbar-thumb:hover{
background:#cbd5e1;
}
.ld-topic-empty-prompt{
display:inline-flex;
align-items:center;
gap:5px;
margin-top:8px;
margin-bottom:2px;
padding:7px 14px;
background:#eff6ff;
border:1.5px dashed #3b82f6;
border-radius:10px;
color:#1d4ed8;
font-size:13.5px;
font-weight:600;
cursor:pointer;
transition:all 0.2s ease;
}
.ld-topic-empty-prompt:hover{
background:#dbeafe;
border-color:#2563eb;
color:#1e40af;
}
.ld-hw-empty-prompt{
display:flex;
align-items:center;
gap:7px;
padding:12px 14px;
background:#f8fafc;
border:1.5px dashed #cbd5e1;
border-radius:12px;
color:#475569;
cursor:pointer;
transition:all 0.2s ease;
}
.ld-hw-empty-prompt:hover{
background:#f1f5f9;
border-color:#3b82f6;
color:#1d4ed8;
}
.ld-hw-empty-icon{
width:26px;
height:26px;
border-radius:50%;
background:#ffffff;
border:1px solid #e2e8f0;
display:flex;
align-items:center;
justify-content:center;
color:#3b82f6;
font-size:12px;
flex-shrink:0;
}
.ld-hw-empty-text{
font-size:13px;
font-weight:500;
}
.ld-tests-list{
display:flex;
flex-direction:column;
gap:8px;
}
.ld-test-item{
display:flex;
align-items:center;
gap:11px;
width:100%;
padding:12px 14px;
background:#ffffff;
border:1.5px solid #e2e8f0;
border-radius:12px;
color:#334155;
font-family:inherit;
font-size:13px;
font-weight:600;
text-align:left;
cursor:pointer;
transition:all 0.2s ease;
}
.ld-test-item:hover{
background:#eff6ff;
border-color:#3b82f6;
color:#1d4ed8;
}
.ld-test-icon{
width:34px;
height:34px;
border-radius:10px;
background:#eff6ff;
color:#2563eb;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
flex-shrink:0;
}
.ld-test-item:hover .ld-test-icon{
background:#dbeafe;
}
.ld-test-chevr{
margin-left:auto;
color:#94a3b8;
font-size:11px;
flex-shrink:0;
}
.ld-test-item:hover .ld-test-chevr{
color:#2563eb;
}
.ld-card-header-row{
display:flex;
align-items:center;
justify-content:space-between;
}
.ld-card-date{
font-size:13.5px;
font-weight:600;
color:#475569;
}
.ld-card-nav-arrows{
display:flex;
align-items:center;
gap:4px;
}
.ld-nav-btn{
border:none;
background:transparent;
color:#64748b;
width:26px;
height:26px;
border-radius:6px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:13px;
transition:all 0.15s;
}
.ld-nav-btn:hover{
background:#f1f5f9;
color:#0f172a;
}
.ld-lesson-topic-title{
font-size:17px;
font-weight:700;
color:#0f172a;
line-height:1.35;
margin-top:10px;
cursor:pointer;
transition:color 0.15s;
}
.ld-lesson-topic-title:hover{
color:#1b64f2;
}
.ld-lesson-meta-line{
font-size:13px;
font-weight:500;
color:#64748b;
margin-top:8px;
}
.ld-format-pill-wrap{
position:relative;
margin-top:12px;
}
.ld-format-pill{
display:inline-flex;
align-items:center;
gap:5px;
background:#eef5ff;
color:#1b64f2;
border:1px solid #dbeafe;
border-radius:9999px;
padding:5px 13px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:background 0.15s;
}
.ld-format-pill:hover{
background:#e0edff;
}
.ld-pen-icon{
font-size:10.5px;
margin-left:2px;
opacity:0.8;
}
.ld-format-menu{
position:absolute;
top:calc(100% + 6px);
left:0;
background:#ffffff;
border-radius:12px;
border:1px solid #e2e8f0;
box-shadow:0 8px 20px rgba(0, 0, 0, 0.08);
padding:6px;
z-index:50;
min-width:150px;
display:flex;
flex-direction:column;
gap:3px;
}
.ld-format-menu-item{
border:none;
background:transparent;
border-radius:8px;
padding:8px 12px;
font-size:13px;
font-weight:600;
color:#334155;
text-align:left;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:all 0.15s;
}
.ld-format-menu-item:hover{
background:#f1f5f9;
color:#1b64f2;
}
.ld-format-bar-row{
display:flex;
align-items:center;
justify-content:space-between;
border:1px solid #e2e8f0;
border-radius:12px;
padding:10px 14px;
margin-top:10px;
background:#ffffff;
cursor:pointer;
color:#1b64f2;
font-weight:600;
font-size:13.5px;
transition:border-color 0.15s, background 0.15s, box-shadow 0.15s;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.03);
}
.ld-format-bar-row:hover{
border-color:#bfdbfe;
background:#f8faff;
}
.ld-fbr-left{
display:flex;
align-items:center;
gap:8px;
}
.ld-hw-check-block{
position:relative;
margin-top:8px;
}
.ld-hw-check-label{
font-size:11.5px;
font-weight:600;
color:#64748b;
margin-bottom:4px;
padding-left:2px;
}
.ld-hw-check-menu{
position:absolute;
top:calc(100% + 4px);
left:0;
right:0;
width:100%;
background:#ffffff;
border-radius:12px;
border:1px solid #e2e8f0;
box-shadow:0 8px 20px rgba(0, 0, 0, 0.1);
padding:6px;
z-index:100;
display:flex;
flex-direction:column;
gap:3px;
box-sizing:border-box;
}
.ld-hw-check-menu .ld-format-menu-item.active{
background:#eff6ff;
color:#1b64f2;
font-weight:700;
}
.lesson-day-section{
display:flex;
flex-direction:column;
}
.ld-section-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px;
}
.ld-section-title{
font-size:16px;
font-weight:700;
color:#0f172a;
margin:0;
}
.ld-plus-circle-btn{
width:28px;
height:28px;
border-radius:50%;
border:1.5px solid #cbd5e1;
background:#ffffff;
color:#3b82f6;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:13px;
cursor:pointer;
transition:all 0.15s;
}
.ld-plus-circle-btn:hover{
border-color:#3b82f6;
background:#eff6ff;
}
.ld-columns-cards{
display:flex;
flex-direction:column;
gap:8px;
}
.ld-col-item-card{
position:relative;
border:1px solid #e2e8f0;
border-radius:12px;
padding:12px 14px;
background:#ffffff;
display:flex;
flex-direction:column;
gap:3px;
transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.ld-col-item-card:hover{
border-color:#cbd5e1;
box-shadow:0 2px 8px rgba(0, 0, 0, 0.04);
}
.ld-col-actions{
position:absolute;
top:10px;
right:10px;
display:none;
align-items:center;
gap:4px;
z-index:2;
}
.ld-col-item-card:hover .ld-col-actions{
display:inline-flex;
}
.ld-col-action-btn{
background:#f1f5f9;
border:1px solid #e2e8f0;
color:#475569;
width:26px;
height:26px;
border-radius:6px !important;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
cursor:pointer;
padding:0;
transition:all 0.15s ease;
}
.ld-col-action-btn:hover{
background:#e2e8f0;
color:#0f172a;
}
.ld-col-action-btn.delete-btn:hover{
background:#fee2e2;
color:#ef4444;
border-color:#fca5a5;
}
.ld-col-item-card.ld-col-compact{
padding:13px 14px;
}
.ld-col-item-title{
font-size:14px;
font-weight:700;
color:#0f172a;
}
.ld-col-item-sublink{
font-size:12px;
font-weight:500;
color:#64748b;
cursor:pointer;
transition:color 0.15s;
}
.ld-col-item-sublink:hover{
color:#1b64f2;
}
.ld-hw-subgroup{
display:flex;
flex-direction:column;
}
.ld-hw-subgroup-title{
font-size:12.5px;
font-weight:600;
color:#64748b;
margin-bottom:8px;
}
.ld-hw-card{
border:1px solid #e2e8f0;
border-radius:14px;
padding:14px;
background:#ffffff;
margin-bottom:8px;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.02);
}
.ld-hw-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.ld-badge-dz{
background:#f1f5f9;
color:#334155;
font-size:11px;
font-weight:700;
padding:2.5px 8px;
border-radius:6px;
letter-spacing:0.2px;
}
.ld-badge-test{
background:#e0f2fe;
color:#0284c7;
font-size:11px;
font-weight:700;
padding:2.5px 8px;
border-radius:6px;
letter-spacing:0.2px;
}
.ld-hw-date-range{
font-size:12px;
font-weight:500;
color:#64748b;
flex:1;
margin-left:6px;
}
.ld-card-dots-btn{
border:none;
background:transparent;
color:#94a3b8;
width:24px;
height:24px;
border-radius:6px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:14px;
transition:color 0.15s;
}
.ld-card-dots-btn:hover{
color:#0f172a;
}
.ld-hw-card-text{
font-size:13px;
line-height:1.45;
color:#334155;
margin:10px 0;
cursor:pointer;
}
.ld-test-card-title{
font-size:14px;
font-weight:700;
color:#0f172a;
margin:8px 0 6px;
}
.ld-test-card-meta{
font-size:12px;
color:#64748b;
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
}
.ld-hw-card-bottom{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:4px;
}
.ld-hw-type-badge{
color:#1b64f2;
font-size:12px;
font-weight:600;
display:inline-flex;
align-items:center;
gap:6px;
}
.ld-mria-type-badge{
color:#1b64f2;
font-size:12px;
font-weight:600;
display:inline-flex;
align-items:center;
gap:6px;
}
.ld-arrow-action-btn{
border:none;
background:transparent;
color:#1b64f2;
cursor:pointer;
font-size:14px;
padding:4px;
display:inline-flex;
align-items:center;
justify-content:center;
transition:transform 0.15s;
}
.ld-arrow-action-btn:hover{
transform:translateX(3px);
}
.lesson-day-col-right{
display:flex;
flex-direction:column;
min-width:0;
height:100%;
max-height:100%;
overflow-y:auto;
overflow-x:hidden;
padding-right:6px;
box-sizing:border-box;
}
.lesson-day-col-right::-webkit-scrollbar{
width:5px;
}
.lesson-day-col-right::-webkit-scrollbar-track{
background:transparent;
}
.lesson-day-col-right::-webkit-scrollbar-thumb{
background:#e2e8f0;
border-radius:999px;
}
.lesson-day-col-right::-webkit-scrollbar-thumb:hover{
background:#cbd5e1;
}
.ld-materials-title{
font-size:18px;
font-weight:700;
color:#0f172a;
margin:0 0 14px 0;
}
.ld-materials-buttons-row{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:14px;
}
.ld-mat-pill-btn{
border:1px solid #e2e8f0;
background:#ffffff;
color:#1e293b;
border-radius:12px;
padding:8px 16px;
font-size:13px;
font-weight:600;
display:inline-flex;
align-items:center;
gap:5px;
cursor:pointer;
transition:all 0.15s ease;
white-space:nowrap;
}
.ld-mat-pill-btn i{
color:#3b82f6;
font-size:14px;
}
.ld-mat-pill-btn:hover{
background:#f8fafc;
border-color:#cbd5e1;
}
.ld-materials-dropzone{
border:1.5px dashed #cbd5e1;
border-radius:16px;
background:#fafcff;
padding:32px 20px 24px;
text-align:center;
cursor:pointer;
transition:all 0.2s ease;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ld-materials-dropzone:hover{
border-color:#3b82f6;
background:#f0f7ff;
}
.ld-dz-preview-cards{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
margin-bottom:22px;
flex-wrap:wrap;
}
.ld-dz-card{
width:138px;
height:90px;
background:#eff6ff;
border:1px solid #dbeafe;
border-radius:12px;
padding:10px 12px;
display:flex;
flex-direction:column;
justify-content:space-between;
text-align:left;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.02);
}
.ld-dz-mockup{
position:relative;
height:44px;
}
.ld-mockup-check{
width:16px;
height:16px;
border-radius:50%;
background:#3b82f6;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:8px;
margin-bottom:8px;
}
.ld-mockup-bars{
display:flex;
flex-direction:column;
gap:5px;
}
.ld-bar{
height:5px;
border-radius:3px;
background:#bfdbfe;
}
.ld-bar.bar-1{ width:85%; }
.ld-bar.bar-2{ width:60%; }
.ld-mockup-bars-short{
display:flex;
flex-direction:column;
gap:4px;
position:absolute;
top:2px;
left:0;
width:40%;
}
.ld-bar.bar-s1{ width:80%; height:4px; }
.ld-bar.bar-s2{ width:50%; height:4px; }
.ld-chart-svg{
position:absolute;
bottom:0;
right:0;
width:70px;
height:42px;
}
.ld-space-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.ld-dz-card-label{
font-size:11px;
font-weight:500;
color:#64748b;
display:flex;
align-items:center;
gap:6px;
}
.ld-dz-card-label i{
font-size:11px;
color:#94a3b8;
}
.ld-dropzone-prompt{
font-size:13.5px;
color:#475569;
font-weight:400;
line-height:1.45;
}
.ld-browse-link{
color:#1b64f2;
font-weight:600;
cursor:pointer;
text-decoration:underline;
}
.ld-dropzone-sub{
font-size:12.5px;
color:#64748b;
margin-top:5px;
}
.ld-attached-files-list{
margin-top:14px;
display:flex;
flex-direction:column;
gap:6px;
width:100%;
max-width:480px;
text-align:left;
}
.ld-attached-file-item{
display:flex;
align-items:center;
justify-content:space-between;
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:10px;
padding:8px 12px;
font-size:13px;
font-weight:500;
}
.ld-file-remove-btn{
border:none;
background:transparent;
color:#ef4444;
cursor:pointer;
font-size:13px;
}
.ld-teacher-note-card{
border:1px solid #e2e8f0;
border-radius:16px;
background:#f8fafc;
padding:14px 18px;
margin-top:16px;
}
.ld-tn-header{
font-size:13px;
font-weight:600;
color:#475569;
display:flex;
align-items:center;
gap:5px;
}
.ld-tn-header i{
font-size:14px;
color:#64748b;
}
.ld-tn-textarea{
width:100%;
border:none;
background:transparent;
outline:none;
resize:none;
font-family:inherit;
font-size:14px;
color:#0f172a;
margin-top:8px;
line-height:1.45;
padding:0;
}
.ld-tn-textarea::placeholder{
color:#94a3b8;
}
.ld-mascot-fab{
position:fixed;
right:28px;
bottom:54px;
z-index:9999;
cursor:pointer;
transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.main-content:not(.lesson-day-mode-active) .ld-mascot-fab{
display:none;
}
.main-content.lesson-day-mode-active .ld-mascot-fab{
display:none !important;
}
.ld-mascot-shape{
width:48px;
height:48px;
border-radius:18px;
background:linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 6px 18px rgba(168, 85, 247, 0.4);
}
.ld-mascot-fab:hover{
transform:scale(1.08);
}
.ld-mascot-fab:hover .ld-mascot-shape{
box-shadow:0 8px 24px rgba(168, 85, 247, 0.55);
}
@media (max-width: 640px){
.lesson-day-card-container{
grid-template-columns:1fr;
grid-template-rows:auto minmax(0, 1fr);
}
.lesson-day-view{
padding:16px;
}
}
.scale-option.active{
background:#ffffff !important;
color:var(--primary-blue) !important;
}.button-mriya{
background:linear-gradient(135deg, #82a9ff 0%, #4b81ff 100%);
color:white;
padding:15px 40px;
border-radius:50px;
border:1px solid rgba(255, 255, 255, 0.4);
font-family:sans-serif;
font-weight:bold;
}.present-pill{
display:inline-block;
width:18px;
height:10px;
border-radius:999px;
background:var(--primary-blue);
vertical-align:middle;
}.quick-oval{
position:absolute;
width:32px;
height:16px;
border-radius:999px;
background:var(--primary-blue);
opacity:0;
transform:scale(0.6);
transition:
opacity 220ms ease,
transform 220ms ease;
z-index:9999;
pointer-events:none;
}.attendance-bubbles{
display:flex;
gap:12px;
align-items:center;
justify-content:center;
}.attendance-bubble{
padding:12px 18px;
border-radius:999px;
background:#f3f4f6;
cursor:pointer;
font-weight:800;
border:1px solid transparent;
}.attendance-bubble:hover{
background:#e6f0ff;
border-color:rgba(28, 119, 255, 0.12);
}.attendance-new-modal{
width:600px;
max-width:95vw;
border-radius:24px;
overflow:hidden;
background:#fff;
display:flex;
flex-direction:column;
}.attendance-new-header{
padding:24px 32px;
display:flex;
justify-content:space-between;
align-items:flex-start;
}.attendance-new-user-info{
display:flex;
gap:16px;
align-items:center;
}.attendance-new-avatar{
width:48px;
height:48px;
background:#f3f4f6;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:#4b5563;
font-size:16px;
}.attendance-new-name{
font-size:14.5px;
font-weight:600;
color:#111827;
}.attendance-new-date{
font-size:14px;
color:#6b7280;
margin-top:2px;
}.attendance-new-close{
cursor:pointer;
font-size:24px;
color:#374151;
line-height:1;
padding:4px;
}.attendance-new-table{
width:100%;
border-collapse:collapse;
}.attendance-new-table th{
text-align:left;
padding:12px 16px;
font-size:13px;
font-weight:600;
color:#374151;
border-bottom:1px solid #e5e7eb;
background:#fff;
}.attendance-new-table td{
padding:16px;
border-bottom:1px solid #f3f4f6;
font-size:14px;
color:#374151;
}.attendance-new-table tr:last-child td{
border-bottom:none;
}.attendance-new-table .reason-col{
width:40%;
}.attendance-new-table .status-col{
width:20%;
text-align:center;
}.attendance-new-table .status-col th{
text-align:center;
}.attendance-new-row-all{
background:#f0f7ff;
}.attendance-new-cell-action{
cursor:pointer;
height:40px;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.2s;
border-radius:4px;
}.attendance-new-cell-action:hover{
background:#f3f4f6;
}.attendance-new-cell-action.active-n{
color:#fff;
}.attendance-new-mark-circle{
width:28px;
height:28px;
border-radius:50%;
background:#1c77ff;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:13px;
}.attendance-new-footer{
padding:24px 32px 32px;
display:flex;
justify-content:center;
}.attendance-new-btn-submit{
background:#1c77ff;
color:#fff;
border:none;
border-radius:999px;
padding:14px 60px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:opacity 0.2s;
}.attendance-new-btn-submit:hover{
opacity:0.9;
}#gradebook-view .gb-table thead th{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table thead th.gb-subtype-header{
position:relative !important;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table .gb-sticky-col,
#gradebook-view .gb-table .gb-sticky-col-2,
#gradebook-view .gb-table .gb-sticky-avg,
#gradebook-view .gb-table .gb-avg-col{
position:static !important;
left:auto !important;
top:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg,
#gradebook-view .gb-table tbody td.gb-avg-col{
position:static !important;
left:auto !important;
top:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table th.gb-sticky-col.fixed,
#gradebook-view .gb-table th.gb-sticky-col-2.fixed,
#gradebook-view .gb-table th.gb-sticky-avg.fixed,
#gradebook-view .gb-table td.gb-sticky-col.fixed,
#gradebook-view .gb-table td.gb-sticky-col-2.fixed,
#gradebook-view .gb-table td.gb-sticky-avg.fixed{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table thead th,
#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg{
-webkit-transform:none !important;
transform:none !important;
will-change:auto !important;
backface-visibility:visible !important;
}#gradebook-view #gb-table thead th.gb-tall-assessment:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col),
#gradebook-view .gb-table thead th.gb-tall-assessment:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col){
position:relative !important;
}#gradebook-view #att-table{
--gb-sticky-col-1-w:25px;
--gb-sticky-col-2-w:200px;
--gb-thead-row1-h:68px;
--gb-thead-row2-h:68px;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table tbody td.gb-sticky-col,
#gradebook-view #att-table tbody td.gb-sticky-col-2{
position:sticky !important;
background:#ffffff !important;
background-clip:padding-box;
z-index:1200 !important;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table tbody td.gb-sticky-col{
left:0 !important;
}#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table tbody td.gb-sticky-col-2{
left:var(--gb-sticky-col-1-w) !important;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2{
top:auto !important;
z-index:1300 !important;
}#gradebook-view
#att-table
tbody
td:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg){
position:relative;
z-index:1;
}#gradebook-view #gb-table{
--gb-thead-row1-h:34px;
--gb-thead-row2-h:34px;
}#gradebook-view #gb-table thead th,
#gradebook-view #att-table thead th{
position:sticky !important;
background:#ffffff !important;
background-clip:padding-box;
}#gradebook-view #gb-table thead tr:nth-child(1) th,
#gradebook-view #att-table thead tr:nth-child(1) th{
top:0 !important;
z-index:2200 !important;
}#gradebook-view #gb-table thead tr:nth-child(2) th,
#gradebook-view #att-table thead tr:nth-child(2) th{
top:var(--gb-thead-row1-h, 34px) !important;
z-index:2150 !important;
}#gradebook-view #gb-table thead th.gb-sticky-col,
#gradebook-view #gb-table thead th.gb-sticky-col-2,
#gradebook-view #gb-table thead th.gb-sticky-avg,
#gradebook-view #gb-table thead th.gb-avg-col,
#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2{
z-index:2300 !important;
}#gradebook-view #gb-table thead tr:nth-child(1) th{
height:34px !important;
min-height:34px !important;
padding-top:6px !important;
padding-bottom:6px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #gb-table thead tr:nth-child(2) th{
height:34px !important;
min-height:34px !important;
padding-top:5px !important;
padding-bottom:5px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #gb-table thead th.gb-header-clickable,
#gradebook-view #gb-table thead th.gb-subtype-header{
height:34px !important;
min-height:34px !important;
}#gradebook-view #att-table thead tr:nth-child(1) th{
height:68px !important;
min-height:68px !important;
padding-top:10px !important;
padding-bottom:10px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #att-table thead tr:nth-child(2) th{
height:68px !important;
min-height:68px !important;
padding-top:10px !important;
padding-bottom:10px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2{
text-align:left !important;
vertical-align:middle !important;
padding-left:10px !important;
padding-right:8px !important;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2 > div{
justify-content:center !important;
align-items:flex-start !important;
flex-direction:column !important;
padding-left:0 !important;
padding-right:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}#gradebook-view
#att-table
thead
tr:nth-child(1)
th.gb-sticky-col-2
.gb-students-title{
width:auto;
text-align:left;
font-size:12px;
line-height:1.15;
font-weight:590;
letter-spacing:0;
margin-top:4px;
}#gradebook-view #tab-planning .planning-grid-scroll{
position:relative;
}#gradebook-view #tab-planning .planning-grid-head,
#gradebook-view #tab-planning .planning-row{
min-width:760px;
}#gradebook-view #tab-planning .planning-grid-head > div:nth-child(1),
#gradebook-view #tab-planning .planning-grid-head > div:nth-child(2),
#gradebook-view #tab-planning .planning-row > .planning-num,
#gradebook-view #tab-planning .planning-row > .planning-datecell{
position:relative;
z-index:20;
background:#ffffff;
}#gradebook-view #tab-planning .planning-row > .planning-box,
#gradebook-view #tab-planning .planning-row > .planning-arrow,
#gradebook-view #tab-planning .planning-grid-head > div:nth-child(n + 3){
position:relative;
z-index:1;
}.section-title{
display:none !important;
}.mriia-tests-section{
padding:10px 0 24px 0;
color:#ffffff;
font-family:inherit;
}.mriia-tests-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
}.mriia-tests-title{
font-size:24px;
font-weight:800;
color:#ffffff;
margin:0;
}.mriia-tests-nav{
display:flex;
gap:8px;
}.mriia-nav-btn{
width:38px;
height:38px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.06);
color:rgba(255, 255, 255, 0.7);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:14px;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow:0 8px 16px rgba(15, 23, 42, 0.12);
}.mriia-nav-btn:hover{
background:rgba(255, 255, 255, 0.12);
border-color:rgba(255, 255, 255, 0.4);
color:#ffffff;
transform:translateY(-1px);
}.mriia-tests-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:20px;
}.mriia-test-card{
border-radius:26px;
padding:26px 24px;
position:relative;
overflow:hidden;
min-height:280px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:linear-gradient(160deg, rgba(15, 23, 42, 0.38), rgba(30, 41, 59, 0.56));
border:1px solid rgba(255, 255, 255, 0.18);
box-shadow:0 18px 38px rgba(15, 23, 42, 0.18);
transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}.mriia-test-card::before{
content:"";
position:absolute;
right:-30px;
bottom:-30px;
width:180px;
height:180px;
border-radius:50%;
background:rgba(255, 255, 255, 0.08);
filter:blur(10px);
}.mriia-test-card:hover{
transform:translateY(-2px);
box-shadow:0 22px 40px rgba(15, 23, 42, 0.22);
}.card-ai-gen{
grid-column:span 2;
background:linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(29, 78, 216, 0.98), rgba(14, 116, 144, 0.92));
border-color:rgba(147, 197, 253, 0.55);
display:flex;
flex-direction:row;
padding-right:0;
}.card-ai-gen::after{
content:"";
position:absolute;
left:-35px;
top:-35px;
width:180px;
height:180px;
border-radius:50%;
background:rgba(255, 255, 255, 0.08);
}.card-ai-gen .card-content-left{
width:48%;
display:flex;
flex-direction:column;
justify-content:space-between;
z-index:10;
}.card-ai-gen .card-preview-right{
width:52%;
position:relative;
height:100%;
}.mriia-test-card .card-title{
font-size:22px;
font-weight:800;
color:#ffffff;
line-height:1.3;
margin:0 0 12px 0;
}.mriia-test-card .card-subtitle{
font-size:14px;
color:rgba(255, 255, 255, 0.72);
line-height:1.4;
margin:0;
font-weight:500;
}.card-action-btn{
height:48px;
border-radius:999px;
font-weight:800;
font-size:14px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
padding:0 24px;
border:none;
outline:none;
box-shadow:0 12px 22px rgba(15, 23, 42, 0.18);
}.card-action-btn:hover{
transform:translateY(-1px);
}.primary-action-btn{
background:linear-gradient(135deg, #ffffff, #eff6ff);
color:#1d4ed8;
}.primary-action-btn:hover{
background:linear-gradient(135deg, #ffffff, #dbeafe);
}.card-create-own, .card-import{
grid-column:span 1;
border:1px solid rgba(255, 255, 255, 0.18);
background:linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(30, 64, 175, 0.12));
transition:border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}.card-create-own:hover{
border-color:rgba(147, 197, 253, 0.55);
background:linear-gradient(180deg, rgba(15, 23, 42, 0.22), rgba(37, 99, 235, 0.2));
box-shadow:0 18px 32px rgba(37, 99, 235, 0.12);
}.card-create-own .card-content-full, .card-import .card-content-full{
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
}.card-create-own .card-content-full > div, .card-import .card-content-full > div{
display:flex;
flex-direction:column;
gap:8px;
}.border-action-btn{
background:linear-gradient(135deg, #ffffff, #f8fbff);
color:#1c77ff;
}.border-action-btn:hover{
background:linear-gradient(135deg, #f8fbff, #dbeafe);
}.card-import{
position:relative;
background:linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(250, 204, 21, 0.07));
}.yellow-ribbon-container{
position:absolute;
bottom:95px;
left:-50px;
width:150%;
overflow:hidden;
pointer-events:none;
z-index:5;
}.yellow-ribbon-tape{
background:linear-gradient(90deg, #facc15, #f59e0b, #facc15);
color:#1f2937;
font-size:11px;
font-weight:900;
text-transform:uppercase;
white-space:nowrap;
padding:6px 0;
transform:rotate(0deg);
display:flex;
justify-content:center;
letter-spacing:0.5px;
box-shadow:0 8px 16px rgba(245, 158, 11, 0.18);
}.phone-mockup{
background:#ffffff;
border-radius:16px;
position:absolute;
overflow:hidden;
display:flex;
flex-direction:column;
}.phone-left{
width:165px;
height:240px;
left:20px;
bottom:-35px;
z-index:2;
padding:12px;
background:#ffffff;
border:1px solid rgba(226, 232, 240, 0.8);
}.phone-left .mockup-header{
margin-bottom:8px;
}.phone-left .mockup-number{
font-size:9px;
color:#64748b;
font-weight:700;
}.phone-left .mockup-question{
font-size:11px;
font-weight:900;
color:#0f172a;
margin-bottom:8px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.phone-left .mockup-options{
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:8px;
}.phone-left .mockup-option{
display:flex;
align-items:center;
gap:6px;
padding:6px;
border-radius:6px;
border:1px solid #e2e8f0;
background:#f8fafc;
}.phone-left .mockup-option.selected{
border-color:#22c55e;
background:rgba(34, 197, 94, 0.05);
}.phone-left .option-check.selected{
width:10px;
height:10px;
border-radius:2px;
background:#22c55e;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:6px;
}.phone-left .option-radio{
width:10px;
height:10px;
border-radius:50%;
border:1px solid #cbd5e1;
background:#ffffff;
}.phone-left .option-text{
font-size:8px;
color:#334155;
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.phone-left .mockup-add-answer{
font-size:8px;
color:#1c77ff;
font-weight:800;
cursor:pointer;
}.phone-right{
width:180px;
height:260px;
right:-10px;
bottom:-10px;
z-index:3;
padding:12px;
background:#1e3a8a;
color:#ffffff;
}.phone-right .mockup-header-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
}.phone-right .mockup-label{
font-size:8px;
color:rgba(255, 255, 255, 0.6);
font-weight:700;
}.phone-right .mockup-time{
font-size:8px;
font-weight:800;
background:rgba(255, 255, 255, 0.1);
padding:2px 6px;
border-radius:999px;
display:inline-flex;
align-items:center;
gap:4px;
}.phone-right .mockup-pagination{
display:flex;
justify-content:center;
gap:4px;
align-items:center;
margin-bottom:12px;
}.phone-right .page-dot{
width:5px;
height:5px;
border-radius:50%;
background:rgba(255, 255, 255, 0.2);
}.phone-right .page-dot.active{
width:14px;
height:14px;
background:#eab308;
color:#000000;
font-size:8px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}.phone-right .mockup-question-title{
font-size:9px;
font-weight:800;
line-height:1.3;
margin-bottom:12px;
color:#ffffff;
}.phone-right .mockup-question-options{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:12px;
}.phone-right .question-option{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 10px;
border-radius:8px;
background:rgba(255, 255, 255, 0.08);
border:1px solid rgba(255, 255, 255, 0.1);
font-size:8px;
font-weight:700;
}.phone-right .question-option.selected{
background:#ffffff;
color:#000000;
border-color:#ffffff;
}.phone-right .option-circle{
width:8px;
height:8px;
border-radius:50%;
border:1px solid rgba(255, 255, 255, 0.4);
}.phone-right .option-circle-filled{
width:8px;
height:8px;
border-radius:50%;
background:#1e3a8a;
border:1px solid #1e3a8a;
}.phone-right .mockup-footer{
margin-top:auto;
display:flex;
justify-content:flex-end;
}.phone-right .mockup-footer-btn{
border:none;
background:rgba(255, 255, 255, 0.15);
color:#ffffff;
font-size:8px;
font-weight:900;
padding:6px 12px;
border-radius:999px;
display:flex;
align-items:center;
gap:4px;
cursor:pointer;
}@media (max-width:1024px){
.mriia-tests-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}}@media (max-width:640px){
.mriia-tests-grid{
grid-template-columns:1fr;
}.card-ai-gen{
grid-column:span 1;
flex-direction:column;
padding-right:32px;
}.card-ai-gen .card-content-left{
width:100%;
margin-bottom:20px;
}.card-ai-gen .card-preview-right{
width:100%;
height:200px;
}}#stats-remarks-content{
width:100%;
}.remark-log-shell{
width:100%;
background:#ffffff;
border:1px solid rgba(15, 23, 42, 0.08);
border-radius:12px;
overflow:hidden;
}.remark-log-toolbar{
min-height:64px;
padding:14px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
background:#1c77ff;
color:#ffffff;
}.remark-log-title{
min-width:0;
}.remark-log-title h3{
margin:0;
color:#ffffff;
font-size:18px;
font-weight:800;
line-height:1.2;
}.remark-log-subtitle{
margin-top:4px;
color:rgba(255, 255, 255, 0.85);
font-size:12px;
font-weight:600;
}.remark-add-btn,
.remark-primary-btn,
.remark-outline-btn{
min-height:40px;
border-radius:999px;
padding:0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid transparent;
font-size:13px;
font-weight:800;
line-height:1;
cursor:pointer;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
white-space:nowrap;
outline:none;
}.remark-add-btn{
background:transparent;
color:#ffffff;
border:1px solid rgba(255, 255, 255, 0.45);
}.remark-add-btn:hover{
background:rgba(255, 255, 255, 0.12);
border-color:#ffffff;
}.remark-primary-btn{
background:#1c77ff;
color:#ffffff;
}.remark-primary-btn:hover{
background:#0966f5;
}.remark-outline-btn{
background:#ffffff;
color:#1c77ff;
border-color:#1c77ff;
}.remark-outline-btn:hover{
background:#f0f7ff;
}.remark-add-btn:active,
.remark-primary-btn:active,
.remark-outline-btn:active{
transform:scale(0.965);
}.remark-primary-btn:disabled{
cursor:default;
opacity:0.55;
background:#94a3b8;
}.remark-log-table-wrap{
width:100%;
overflow-x:auto;
background:#ffffff;
}.remark-log-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
color:#0f172a;
}.remark-log-table th,
.remark-log-table td{
padding:12px 10px;
border-bottom:1px solid #e2e8f0;
text-align:left;
vertical-align:middle;
}.remark-log-table th{
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.5px;
transition:background 0.2s ease;
}.remark-log-table th:hover{
background:#f1f5f9;
}.remark-log-table td{
font-size:13px;
font-weight:700;
}.remark-log-table tbody tr{
cursor:pointer;
transition:background 0.16s ease;
}.remark-log-table tbody tr:nth-child(even){
background:#f8fafc;
}.remark-log-table tbody tr:hover{
background:#f0f7ff;
}.remark-log-date{
color:#1c77ff;
font-weight:800;
}.remark-log-muted{
color:#64748b;
}.remark-log-text{
color:#334155;
line-height:1.4;
font-weight:500;
}.remark-status-pill{
min-width:112px;
min-height:30px;
padding:0 12px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
font-size:11px;
font-weight:800;
white-space:nowrap;
}.remark-status-pill.pending{
background:#f1f5f9;
color:#475569;
border:1px solid #cbd5e1;
}.remark-status-pill.done{
background:#d1fae5;
color:#065f46;
border:1px solid #a7f3d0;
}.remark-action-btn{
width:32px;
height:32px;
border-radius:8px;
border:1px solid #cbd5e1;
background:#ffffff;
color:#64748b;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:14px;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
margin-left:6px;
outline:none;
}.remark-action-btn:active{
transform:scale(0.9);
}.remark-action-btn.edit-btn:hover{
border-color:#1c77ff;
color:#1c77ff;
background:#f0f7ff;
}.remark-action-btn.delete-btn:hover{
border-color:#ef4444;
color:#ef4444;
background:#fef2f2;
}.remark-empty-state{
padding:44px 18px;
text-align:center;
color:#64748b;
font-size:13px;
font-weight:800;
}.remark-modal{
width:440px;
max-width:min(440px, calc(100vw - 24px));
border-radius:18px;
padding:30px 24px 24px;
overflow:visible;
}.remark-detail-modal{
width:460px;
max-width:min(460px, calc(100vw - 18px));
}.remark-add-modal{
width:560px;
max-width:min(560px, calc(100vw - 24px));
}.remark-confirm-modal{
width:400px;
max-width:min(400px, calc(100vw - 24px));
padding:32px 32px 28px;
}.remark-modal-close{
position:absolute;
top:14px;
right:14px;
width:32px;
height:32px;
border:none;
border-radius:999px;
background:transparent;
color:#64748b;
font-size:24px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
outline:none;
}.remark-modal-close:hover{
background:#f1f5f9;
color:#0f172a;
}.remark-modal-title{
padding-right:34px;
color:#0f172a;
font-size:22px;
font-weight:800;
line-height:1.2;
}.remark-modal-subtitle,
.remark-confirm-subtitle{
margin-top:6px;
color:#64748b;
font-size:13px;
font-weight:600;
line-height:1.4;
}.remark-detail-grid{
margin-top:24px;
display:grid;
grid-template-columns:1fr 1fr;
column-gap:24px;
row-gap:16px;
}.remark-detail-block{
margin-top:16px;
}.remark-detail-label,
.remark-form-field label{
display:block;
margin-bottom:6px;
color:#1c77ff;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.5px;
}.remark-detail-value,
.remark-detail-text{
color:#0f172a;
font-size:14px;
font-weight:700;
line-height:1.4;
}.remark-detail-divider{
height:1px;
margin:22px 0 18px;
background:#e2e8f0;
}.remark-textarea-wrap{
position:relative;
margin-top:6px;
}.remark-textarea{
width:100%;
min-height:120px;
padding:12px 14px 32px;
border:1px solid #cbd5e1;
border-radius:8px;
background:#f1f5f9;
color:#0f172a;
font-family:inherit;
font-size:13px;
font-weight:600;
line-height:1.4;
resize:vertical;
outline:none;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.remark-textarea:focus{
border-color:#1c77ff;
background:#ffffff;
}.remark-add-textarea{
min-height:140px;
}.remark-textarea-count{
position:absolute;
right:12px;
bottom:10px;
color:#94a3b8;
font-size:11px;
font-weight:700;
}.remark-detail-actions{
margin-top:24px;
display:flex;
justify-content:flex-end;
}.remark-confirm-title{
color:#0f172a;
font-size:22px;
font-weight:800;
line-height:1.25;
text-align:center;
}.remark-confirm-subtitle{
text-align:center;
margin-top:8px;
}.remark-confirm-actions{
margin-top:28px;
display:flex;
justify-content:center;
gap:12px;
}.remark-confirm-actions .remark-outline-btn,
.remark-confirm-actions .remark-primary-btn{
min-width:140px;
height:44px;
}.remark-form-grid{
margin-top:24px;
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}.remark-form-field{
margin-bottom:16px;
}.remark-form-field input,
.remark-form-field select{
width:100%;
min-height:42px;
border:1px solid #cbd5e1;
border-radius:8px;
background:#ffffff;
color:#0f172a;
padding:0 14px;
font-family:inherit;
font-size:13px;
font-weight:600;
outline:none;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.remark-form-field input:focus,
.remark-form-field select:focus{
border-color:#1c77ff;
}.remark-add-actions{
justify-content:flex-end;
}@media (max-width:640px){
.remark-log-toolbar{
align-items:flex-start;
flex-direction:column;
}.remark-add-btn{
width:100%;
}.remark-form-grid,
.remark-detail-grid{
grid-template-columns:1fr;
}.remark-confirm-actions,
.remark-add-actions{
flex-direction:column-reverse;
}.remark-confirm-actions .remark-outline-btn,
.remark-confirm-actions .remark-primary-btn{
width:100%;
}}#tab-remarks .remark-log-shell{
border:none;
border-radius:0;
width:100%;
}@media (min-width:769px){
:root{
--mriia-wide-page-width:1800px;
}#calendar.page-section,
#students-list.page-section,
#classes.page-section,
#materials.page-section,
#homeworks.page-section,
#teachers.page-section,
#teacher-attendance.page-section,
#teacher-substitutions.page-section,
#teacher-lessons-fill.page-section,
#extracurricular.page-section,
#clubs.page-section,
#sections.page-section,
#projects.page-section,
#excursions.page-section,
#volunteering.page-section,
#news.page-section,
#stats-students.page-section,
#stats-teachers.page-section,
#stats-attendance-reasons.page-section,
#stats-attendance-days.page-section,
#stats-attendance.page-section,
#stats-grades.page-section,
#stats-remarks.page-section,
#stats-teacher-attendance.page-section,
#stats-reports.page-section,
#settings.page-section,
#learning-school-year.page-section,
#learning-journals.page-section,
#learning-subgroups.page-section,
#learning-schedule.page-section,
#learning-rooms.page-section,
#learning-subjects.page-section,
#learning-teacher-load.page-section,
#learning-curriculum-plans.page-section,
#schedule-constructor.page-section,
#user-rights.page-section,
#help.page-section,
#support.page-section{
margin-left:-17px !important;
margin-right:-17px !important;
width:min(var(--mriia-wide-page-width), calc(100% + 34px)) !important;
max-width:var(--mriia-wide-page-width) !important;
padding-left:0;
padding-right:0;
box-sizing:border-box;
}#calendar.page-section >:not(script):not(style):not(link),
#students-list.page-section >:not(script):not(style):not(link),
#classes.page-section >:not(script):not(style):not(link),
#materials.page-section >:not(script):not(style):not(link),
#homeworks.page-section >:not(script):not(style):not(link),
#teachers.page-section >:not(script):not(style):not(link),
#teacher-attendance.page-section >:not(script):not(style):not(link),
#teacher-substitutions.page-section >:not(script):not(style):not(link),
#teacher-lessons-fill.page-section >:not(script):not(style):not(link),
#extracurricular.page-section >:not(script):not(style):not(link),
#clubs.page-section >:not(script):not(style):not(link),
#sections.page-section >:not(script):not(style):not(link),
#projects.page-section >:not(script):not(style):not(link),
#excursions.page-section >:not(script):not(style):not(link),
#volunteering.page-section >:not(script):not(style):not(link),
#news.page-section >:not(script):not(style):not(link),
#stats-students.page-section >:not(script):not(style):not(link),
#stats-teachers.page-section >:not(script):not(style):not(link),
#stats-attendance-reasons.page-section >:not(script):not(style):not(link),
#stats-attendance-days.page-section >:not(script):not(style):not(link),
#stats-attendance.page-section >:not(script):not(style):not(link),
#stats-grades.page-section >:not(script):not(style):not(link),
#stats-remarks.page-section >:not(script):not(style):not(link),
#stats-teacher-attendance.page-section >:not(script):not(style):not(link),
#stats-reports.page-section >:not(script):not(style):not(link),
#settings.page-section >:not(script):not(style):not(link),
#learning-school-year.page-section >:not(script):not(style):not(link),
#learning-journals.page-section >:not(script):not(style):not(link),
#learning-subgroups.page-section >:not(script):not(style):not(link),
#learning-schedule.page-section >:not(script):not(style):not(link),
#learning-rooms.page-section >:not(script):not(style):not(link),
#learning-subjects.page-section >:not(script):not(style):not(link),
#learning-teacher-load.page-section >:not(script):not(style):not(link),
#learning-curriculum-plans.page-section >:not(script):not(style):not(link),
#schedule-constructor.page-section >:not(script):not(style):not(link),
#user-rights.page-section >:not(script):not(style):not(link),
#help.page-section >:not(script):not(style):not(link),
#support.page-section >:not(script):not(style):not(link),
:is(
#calendar,
#students-list,
#classes,
#materials,
#homeworks,
#teachers,
#teacher-attendance,
#teacher-substitutions,
#teacher-lessons-fill,
#extracurricular,
#clubs,
#sections,
#projects,
#excursions,
#volunteering,
#news,
#stats-students,
#stats-teachers,
#stats-attendance-reasons,
#stats-attendance-days,
#stats-attendance,
#stats-grades,
#stats-remarks,
#stats-teacher-attendance,
#stats-reports,
#settings,
#learning-school-year,
#learning-journals,
#learning-subgroups,
#learning-schedule,
#learning-rooms,
#learning-subjects,
#learning-teacher-load,
#learning-curriculum-plans,
#schedule-constructor,
#user-rights,
#help,
#support
):is(
.news-grid,
.news-quick-post,
.reports-shell,
.settings-layout,
.right-panel,
.mriia-accordion,
.teachers-table-shell,
.teachers-card,
.stats-card,
.white-card,
.big-card
){
width:100% !important;
max-width:var(--mriia-wide-page-width) !important;
box-sizing:border-box;
}#settings .control-row{
max-width:100% !important;
}#user-rights .user-rights-body{
max-width:100% !important;
}}.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights){
position:relative !important;
}.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) button.btn-primary,
.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) button.button-mriya,
.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .section-header button,
.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .section-header div:has(button){
position:absolute !important;
top:20px !important;
right:24px !important;
margin:0 !important;
z-index:100 !important;
}@keyframes modalOverlayFadeIn{
from{
opacity:0;
}to{
opacity:1;
}}@keyframes modalWindowSlideIn{
from{
opacity:0;
transform:scale(0.95) translateY(-150px);
}to{
opacity:1;
transform:scale(1) translateY(0);
}}.modal-overlay.open:not(#modal-grade-edit):not(#modal-schedule-lesson){
animation:modalOverlayFadeIn 0.3s ease-out forwards !important;
}.modal-overlay.open .modal-window,
.modal-overlay.open .modal,
.modal-overlay.open .progress-modal{
animation:modalWindowSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}.modal-overlay{
z-index:200000 !important;
}@keyframes modalOverlayFadeOut{
from{opacity:1}to{opacity:0}}@keyframes modalWindowSlideOut{
from{
opacity:1;
transform:scale(1) translateY(0);
}to{
opacity:0;
transform:scale(0.95) translateY(-150px);
}}.modal-overlay.closing:not(#modal-grade-edit):not(#modal-schedule-lesson){
animation:modalOverlayFadeOut 0.28s ease-in forwards !important;
}.modal-overlay.closing .modal-window,
.modal-overlay.closing .modal,
.modal-overlay.closing .progress-modal{
animation:modalWindowSlideOut 0.28s ease-in forwards !important;
}#modal-grade-edit.modal-overlay.open,
#modal-schedule-lesson.modal-overlay.open{
animation:none !important;
opacity:1 !important;
}#modal-grade-edit.modal-overlay.closing,
#modal-schedule-lesson.modal-overlay.closing{
animation:none !important;
opacity:0 !important;
}.grade-popover-win,
.schedule-popover-win{
transform:none !important;
transition:none !important;
animation:none !important;
opacity:1 !important;
}:is(
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.btn-primary,
.btn-secondary,
.btn-cancel,
.btn-submit,
.btn-danger,
.action-btn,
.nav-btn,
.login-btn,
.primary-action-btn,
.border-action-btn,
.oval-btn,
.filter-btn,
.tab-btn,
.close-btn,
.nav-pill,
.settings-segment-btn,
.home-journal-btn,
.home-class-arrow,
.btn-planning-add,
.btn-planning-export,
.reports-generate-btn,
.schc-ai-btn,
.schc-generate-btn,
.schc-btn-generate,
.bells-add-btn,
.copy-btn,
.calendar-add-btn,
.schedule-sync-btn,
.mriia-nav-btn,
.remark-add-btn,
.remark-primary-btn,
.remark-outline-btn,
.remark-action-btn,
.lesson-format-btn,
.lesson-day-link-top-btn,
.three-dot-btn-circle,
.lesson-day-icon-btn,
.lesson-day-pill-btn,
.lesson-day-link-btn,
.lesson-day-card-btn,
.attendance-new-btn-submit,
.schedule-today-header-btn,
.schedule-nav-arrow-btn,
.auto-assign-btn-exit,
.auto-assign-btn-submit,
.chat-send-btn,
.accordion-toggle,
.journal-admin-btn,
#sync-indicator
):is(:hover,:active){
transform:none !important;
}#learning-bells .bells-add-btn:is(:hover,:active),
.modal-window:is(.btn-cancel, .btn-submit):is(:hover,:active),
#login-screen .login-btn:is(:hover,:active),
.nav-zoom-box .nav-btn:is(:hover,:active),
#mobile-day-strip .day-pill:is(:hover,:active, .active){
transform:none !important;
}
.lesson-actions {
margin-left: auto;
display: flex;
gap: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(2px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.lesson:hover .lesson-actions,
.lesson:focus-within .lesson-actions {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lesson-btn {
padding: 8px 18px;
border-radius: 999px;
border: 1px solid #bcd6fb;
background: #fff;
color: var(--primary-blue, #1c77ff);
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s, border-color .15s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.lesson-btn:hover {
background: var(--hp-blue-light, #eef5ff);
border-color: var(--primary-blue, #1c77ff);
}
.lesson {
position: relative;
border-radius: 12px;
transition: background .15s;
}
.lesson:hover {
background: rgba(255, 255, 255, 0.06);
}
.lesson.is-active:hover,
.lesson.is-past:hover {
background: #f9fbff;
}
@media (hover: none) {
.lesson-actions {
opacity: 1;
visibility: visible;
transform: none;
}
}
.home-v2-lesson-row {
display: flex;
gap: 65px;
margin-bottom: 0;
align-items: stretch;
}
.home-v2-lesson-row .home-time {
width: 100px;
flex-shrink: 0;
padding-top: 6px;
font-size: 13px;
color: #ffffff;
font-weight: 800;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.home-v2-lesson-card {
flex: 1;
border-radius: 12px;
padding: 22px;
transition: all 0.2s;
contain: layout style paint;
content-visibility: auto;
contain-intrinsic-size: auto 0 180px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
min-width: 0;
}
.home-v2-lesson-card.is-active,
.home-v2-lesson-card.is-past {
background: rgba(244, 247, 255, 0.96);
border: 1px solid rgba(15, 23, 42, 0.1);
}
.home-v2-lesson-card.is-upcoming {
background: rgba(28, 119, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.home-v2-lesson-card:hover {
transform: translateY(-1px);
}
.lesson {
border-radius: 12px;
transition: background .15s;
cursor: default;
}
.lesson:hover {
background: #f9fbff;
}
.lesson.is-active:hover,
.lesson.is-past:hover {
background: #f9fbff;
}
.home-v2-lesson-header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.home-v2-lesson-header .home-class-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
padding: 4.5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(0, 0, 0, 0.04);
line-height: 1;
}
.home-v2-lesson-card.is-active .home-class-pill,
.home-v2-lesson-card.is-past .home-class-pill {
background: #1c77ff;
color: #ffffff;
border-color: rgba(255, 255, 255, 0);
}
.home-v2-lesson-header .home-subject {
font-size: 16px;
font-weight: 700;
color: white;
line-height: 1.2;
}
.home-v2-lesson-card.is-active .home-subject,
.home-v2-lesson-card.is-past .home-subject {
color: #0f172a;
}
.home-v2-lesson-details {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.home-v2-lesson-details .home-detail-block:first-child {
padding-bottom: 12px;
border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
.home-v2-lesson-card.is-upcoming .home-v2-lesson-details .home-detail-block:first-child {
border-bottom-color: rgba(255, 255, 255, 0.28);
}
.home-v2-lesson-details .home-detail-label {
font-size: 14px;
font-weight: 900;
}
.home-v2-lesson-details .home-detail-text {
font-size: 12.5px;
font-weight: 800;
}
.home-v2-room-number {
font-size: 12.5px;
font-weight: 800;
text-align: right;
white-space: nowrap;
align-self: end;
}
.home-v2-lesson-card.is-active .home-v2-room-number,
.home-v2-lesson-card.is-past .home-v2-room-number {
color: #0f172a;
}
.home-v2-lesson-card.is-upcoming .home-v2-room-number {
color: rgba(255, 255, 255, 0.95);
}
.home-v2-actions-row {
display: flex;
gap: 10px;
justify-content: flex-end;
opacity: 0;
visibility: hidden;
transform: translateY(2px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.home-v2-lesson-card:hover .home-v2-actions-row,
.home-v2-lesson-card:focus-within .home-v2-actions-row {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (hover: none) {
.home-v2-actions-row {
opacity: 1;
visibility: visible;
transform: none;
}
}
.home-v2-btn {
padding: 8px 18px;
border-radius: 999px;
border: 1px solid #bcd6fb;
background: #fff;
color: var(--primary-blue, #1c77ff);
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s, border-color .15s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.home-v2-btn:hover {
background: #eef5ff;
border-color: var(--primary-blue, #1c77ff);
}
.hidden-home-toggle {
opacity: 0.7;
border-top: 1px dashed rgba(15, 23, 42, 0.15);
margin-top: 4px;
padding-top: 8px;
}
.home-page {
width: calc(100% + 48px);
}
.home-dashboard {
display: grid;
grid-template-columns: 360px 1fr;
gap: 24px;
align-items: start;
}
.home-left {
display: flex;
flex-direction: column;
gap: 18px;
}
.calendar {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
padding: 18px;
color: #0f172a;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.cal-head h2 {
font-size: 16px;
font-weight: 800;
margin: 0;
text-transform: capitalize;
}
.cal-nav {
display: flex;
gap: 6px;
}
.cal-arrow {
width: 32px;
height: 32px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #fff;
color: #334155;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, border-color .15s;
}
.cal-arrow svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.cal-arrow:hover {
background: #eef5ff;
border-color: var(--primary-blue, #1c77ff);
color: var(--primary-blue, #1c77ff);
}
.cal-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 8px;
}
.cal-week span {
text-align: center;
font-size: 11px;
font-weight: 700;
color: #94a3b8;
padding: 4px 0;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.cal-day {
position: relative;
min-height: 52px;
border-radius: 10px;
padding: 5px;
box-sizing: border-box;
cursor: pointer;
background: #f8fafc;
transition: background .12s, box-shadow .12s;
overflow: hidden;
}
.cal-day:hover {
background: #eef5ff;
}
.cal-day.is-weekend {
background: #f1f5f9;
}
.cal-day.is-today .cal-day-num {
background: var(--primary-blue, #1c77ff);
color: #fff;
}
.cal-day.is-selected {
box-shadow: inset 0 0 0 2px var(--primary-blue, #1c77ff);
background: #e8f1ff;
}
.cal-day.is-empty {
background: transparent;
cursor: default;
}
.cal-day.is-empty .cal-day-num {
color: #cbd5e1;
}
.cal-day-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
color: #0f172a;
}
.cal-day-badges {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 3px;
}
.cal-day-badge {
display: block;
font-size: 9px;
font-weight: 600;
color: #1e75ff;
background: #dbeafe;
border-radius: 4px;
padding: 1px 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-day-badge.holiday { background: #ffedd5; color: #c2410c; }
.cal-day-badge.meeting { background: #e0e7ff; color: #4338ca; }
.cal-day-badge.excursion { background: #d1fae5; color: #047857; }
.cal-day-badge.other { background: #f1f5f9; color: #475569; }
.cal-day-more {
font-size: 9px;
font-weight: 700;
color: #94a3b8;
}
.events {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
padding: 18px;
color: #0f172a;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.events h3 {
font-size: 14px;
font-weight: 800;
margin: 0 0 12px 0;
text-transform: capitalize;
}
.events-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.event-item {
display: flex;
align-items: center;
gap: 10px;
background: #f8fafc;
border-radius: 12px;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
color: #0f172a;
}
.event-icon {
font-size: 16px;
width: 20px;
text-align: center;
}
.no-events {
font-size: 13px;
color: #94a3b8;
font-weight: 600;
padding: 6px 0;
}
.home-right {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.home-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: #fff;
flex-wrap: wrap;
}
.home-header .greeting {
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 4px 0;
}
.home-header h1 {
font-size: 22px;
font-weight: 800;
margin: 0;
text-transform: capitalize;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.btn-today {
padding: 9px 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
}
.btn-today:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.18);
}
.btn-today.active {
background: rgba(255, 255, 255, 0.28);
cursor: default;
opacity: 0.7;
}
.day-arrow {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.day-arrow svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.day-arrow:hover {
background: rgba(255, 255, 255, 0.2);
}
.day-arrow.accent {
background: rgba(255, 255, 255, 0.2);
}
.class-card {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
padding: 18px;
color: #0f172a;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.my-class {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.my-class-label {
font-size: 16px;
font-weight: 800;
color: #0f172a;
}
.my-class-value {
font-size: 18px;
font-weight: 800;
color: var(--primary-blue, #1c77ff);
background: #eef5ff;
border: 1px solid #dbeafe;
padding: 4px 14px;
border-radius: 999px;
}
.quick-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #f8fafc;
color: #0f172a;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s;
white-space: nowrap;
}
.action-btn:hover {
background: #eef5ff;
border-color: var(--primary-blue, #1c77ff);
color: var(--primary-blue, #1c77ff);
}
.action-icon {
display: inline-flex;
width: 18px;
height: 18px;
}
.action-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.lessons {
display: flex;
flex-direction: column;
gap: 16px;
}
.no-lessons {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 14px;
padding: 26px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: #64748b;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
@media (max-width: 980px) {
.home-dashboard {
grid-template-columns: 1fr;
}
.home-left {
order: 2;
}
.home-right {
order: 1;
}
}
@media (max-width: 520px) {
.home-header {
flex-direction: column;
align-items: flex-start;
}
.quick-actions {
flex-direction: column;
}
.action-btn {
width: 100%;
justify-content: flex-start;
}
}
#homeV2Root .home-right {
width: auto;
min-width: 0;
max-width: none;
margin-left: 0;
margin-right: 0;
margin-top: 0;
transform: none;
border-left: 0;
--home-right-width: none;
}
#homeV2Root .home-dashboard {
width: 100%;
box-sizing: border-box;
}
#homeV2Root {
--hp-blue: #2f80f5;
--hp-blue-light: #e8f1fe;
--hp-bg: #fbfcfe;
--hp-text: #1c2430;
--hp-muted: #7a8699;
--hp-border: #e5e9f0;
--hp-gray: #c3cad6;
box-sizing: border-box;
width: 100%;
min-height: 545px !important;
height: calc(108.69565vh - 38px) !important;
max-height: none !important;
overflow: visible;
color: var(--hp-text);
font-size: 14px;
}
#homeV2Root *,
#homeV2Root *::before,
#homeV2Root *::after {
box-sizing: border-box;
}
#homeV2Root svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
#homeV2Root button {
font-family: inherit;
}
#homeV2Root .dashboard {
background: var(--hp-bg);
border-radius: 18px;
display: grid;
grid-template-columns: 240px 1fr;
min-height: 545px !important;
height: auto !important;
overflow: hidden;
}
#homeV2Root .col-left {
padding: 24px;
border-right: 1px solid var(--hp-border);
}
#homeV2Root .col-right {
padding: 24px 28px 24px 10px;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
overflow: visible;
}
#homeV2Root .calendar {
display: block;
background: transparent;
border: 0;
border-radius: 0;
margin-left: -24px;
margin-top: -24px;
min-width: 0;
width: calc(100% + 48px);
box-shadow: none !important;
}
#homeV2Root .cal-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
#homeV2Root .cal-head h2 {
font-size: 16px;
font-weight: 700;
margin: 0;
color: var(--hp-text);
text-transform: capitalize;
line-height: 1.2;
}
#homeV2Root .cal-nav {
display: flex;
gap: 2px;
}
#homeV2Root .cal-week,
#homeV2Root .cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
text-align: center;
}
#homeV2Root .cal-week span {
font-size: 11px;
color: var(--hp-muted);
padding: 4px 0;
background: none;
}
#homeV2Root .cal-grid {
row-gap: 6px;
background: none;
border: 0;
padding: 0;
}
#homeV2Root .cal-day {
border: none;
background: none;
height: 28px;
width: 28px;
margin: auto;
border-radius: 50%;
font-size: 12.5px;
color: var(--hp-text);
cursor: pointer;
padding: 0;
min-height: 0;
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: visible;
font-weight: 400;
box-shadow: none;
}
#homeV2Root .cal-day:hover {
background: #eef2f8;
}
#homeV2Root .cal-day.other {
color: var(--hp-gray);
}
#homeV2Root .cal-day.today,
#homeV2Root .cal-day.is-today,
#homeV2Root .cal-day.is-today .cal-day-num {
box-shadow: inset 0 0 0 1.5px var(--hp-blue);
color: var(--hp-blue);
}
#homeV2Root .cal-day.selected,
#homeV2Root .cal-day.is-selected {
background: var(--hp-blue);
color: #fff;
}
#homeV2Root .cal-day .cal-day-num {
display: contents;
background: none;
color: inherit;
}
#homeV2Root .cal-day .cal-day-badges,
#homeV2Root .cal-day .cal-day-more,
#homeV2Root .cal-day.is-weekend {
display: none;
}
#homeV2Root .empty-topics-pill {
display: none;
width: calc(100% + 15.5px);
max-width: none;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
gap: 10px;
margin: -3px 0 0 -7.75px;
padding: 3.75px 18px 3.75px 6px;
border: 0;
border-radius: 999px;
background: #ffdfc4;
color: #000000;
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
box-shadow: none;
transition: filter 0.15s ease;
}
#homeV2Root .empty-topics-pill.is-visible { display: flex; }
#homeV2Root .empty-topics-pill:hover { filter: brightness(0.97); }
#homeV2Root .empty-topics-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 18px;
min-width: 18px;
height: 18px;
padding: 0;
border-radius: 50%;
line-height: 18px;
text-align: center;
vertical-align: middle;
background: #ff9a6e;
color: #000000;
font-size: 10px;
font-weight: 800;
}
#homeV2Root .events {
margin-top: 28px;
background: none;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
#homeV2Root .events h3 {
font-size: 13px;
color: var(--hp-muted);
font-weight: 600;
margin-bottom: 10px;
margin-top: 0;
text-transform: none;
}
#homeV2Root .events-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
margin: 0;
}
#homeV2Root .event-item {
padding: 7px 10px;
border-left: 3px solid #f2b23e;
font-size: 13px;
font-weight: 400;
border-radius: 4px;
background: none;
color: var(--hp-text);
display: flex;
align-items: center;
gap: 8px;
}
#homeV2Root .event-item:hover {
background: #f2f4f8;
}
#homeV2Root .event-item .event-icon {
display: inline-block;
}
#homeV2Root .event-item.no-events,
#homeV2Root .events-empty,
#homeV2Root #eventsList .no-events {
border-left: none;
background: none;
font-size: 13px;
font-weight: 400;
color: var(--hp-gray);
}
#homeV2Root .page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
flex-wrap: wrap;
margin-top: -12px;
}
#homeV2Root .greeting {
color: var(--hp-muted);
font-size: 13.5px;
font-weight: 700;
margin-bottom: 4px;
}
#homeV2Root #currentDate {
font-size: 16.5px;
font-weight: 700;
margin: 0;
color: var(--hp-text);
line-height: 1.3;
}
#homeV2Root .head-actions {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
margin-left: auto;
margin-right: -22px;
}
#homeV2Root .btn-today {
padding: 10px 20px;
border-radius: 999px;
border: 1px solid #cfd8e3;
background: #fff;
color: var(--hp-blue);
font-weight: 600;
font-size: 13.5px;
cursor: pointer;
font-family: inherit;
}
#homeV2Root .btn-today:hover {
border-color: var(--hp-blue);
}
#homeV2Root .btn-today[disabled],
#homeV2Root .btn-today.active {
opacity: 0.6;
cursor: default;
}
#homeV2Root .icon-btn {
border: none;
background: none;
cursor: pointer;
color: var(--hp-muted);
display: grid;
place-items: center;
border-radius: 8px;
padding: 6px;
}
#homeV2Root .icon-btn:hover {
background: #f1f4f9;
color: var(--hp-blue);
}
#homeV2Root .icon-btn.small svg {
width: 18px;
height: 18px;
}
#homeV2Root .icon-btn.round svg {
width: 18px;
height: 18px;
}
#homeV2Root .home-clock-icon {
width: 18px;
height: 18px;
display: inline-block;
object-fit: contain;
background: transparent;
filter: brightness(0) saturate(100%) invert(55%);
}
#homeV2Root .icon-btn.round {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #cfd8e3;
background: #fff;
color: var(--hp-muted);
}
#homeV2Root .icon-btn.round:hover {
background: #f1f4f9;
color: var(--hp-blue);
}
#homeV2Root .icon-btn.round.accent {
color: var(--hp-blue);
border-color: #bcd6fb;
}
.schedule-popover-video-icon {
width: 18px !important;
height: 18px !important;
font-size: 18px !important;
margin-right: 0 !important;
}
#homeV2Root .class-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
background: #f2f4f8;
border-radius: 14px;
padding: 14px 16px;
flex-wrap: wrap;
border: 0;
height: auto;
min-height: 0;
justify-content: flex-start;
}
#homeV2Root .my-class {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 90px;
box-shadow: none;
background: none;
cursor: default;
border-radius: 0;
align-items: flex-start;
}
#homeV2Root .my-class .label {
font-size: 13.5px;
font-weight: 600;
color: var(--hp-muted);
}
#homeV2Root .my-class .value {
font-size: 16px;
font-weight: 450;
color: var(--hp-text);
}
#homeV2Root .quick-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-left: auto;
}
#homeV2Root .action-btn {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: none;
border-radius: 12px;
padding: 10px 16px;
font-size: 13.5px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
color: var(--hp-text);
font-family: inherit;
}
#homeV2Root .action-btn:hover {
box-shadow: 0 3px 8px rgba(16, 24, 40, 0.12);
}
#homeV2Root .action-ico {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--hp-blue-light);
color: var(--hp-blue);
display: grid;
place-items: center;
}
#homeV2Root .action-ico svg {
width: 16px;
height: 16px;
}
#homeV2Root .lessons {
display: flex;
flex-direction: column;
gap: 0 !important;
border: 0;
border-radius: 0;
overflow: hidden;
min-height: 480px;
width: calc(100% + 28px);
}
#homeV2Root .lesson {
display: grid;
grid-template-columns: 78px 1fr;
gap: 0;
padding: 0;
margin: 0 !important;
border: none;
border-bottom: 1px solid var(--hp-border);
border-radius: 0;
position: relative;
background: #fff;
transition: background .15s, box-shadow .15s;
}
#homeV2Root .lesson:last-child {
margin-bottom: 0;
border-bottom: none;
}
#homeV2Root .lesson:hover {
background: #fff;
box-shadow: 0 3px 12px rgba(16, 24, 40, 0.06);
}
#homeV2Root .lesson-actions {
position: absolute;
top: 16px;
right: 12px;
display: flex;
gap: 10px;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(2px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
#homeV2Root .lesson:hover .lesson-actions,
#homeV2Root .lesson:focus-within .lesson-actions {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0);
}
#homeV2Root .lesson-btn {
padding: 8px 18px;
border-radius: 999px;
border: 1px solid #bcd6fb;
background: #fff;
color: var(--hp-blue, #1c77ff);
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s, border-color .15s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
#homeV2Root .lesson-btn:hover {
background: #eef5ff;
border-color: var(--hp-blue, #1c77ff);
}
#homeV2Root .lesson-btn svg {
width: 14px;
height: 14px;
}
#homeV2Root .lesson-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 100%;
padding: 16px 10px;
border-radius: 0;
font-size: 13px;
color: var(--hp-text);
font-weight: 700;
box-shadow: none;
background: #f1f3f5;
box-sizing: border-box;
}
#homeV2Root .lesson-meta .time {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 2px;
width: fit-content;
padding: 0;
border-radius: 0;
background: transparent;
color: var(--hp-text);
font-weight: 700;
line-height: 1.25;
}
#homeV2Root .lesson-meta .time span {
background: transparent;
border-radius: 0;
font-weight: 700;
padding: 0;
white-space: nowrap;
}
#homeV2Root .lesson:first-child .lesson-meta {
border-radius: 12px 0 0 0;
}
#homeV2Root .lesson:last-child .lesson-meta {
border-radius: 0 0 0 12px;
}
#homeV2Root .lesson-badges {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
#homeV2Root .badge {
padding: 5px 10px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
display: inline-block;
}
#homeV2Root .group-badge {
background: #e8f1ff;
color: #000;
}
#homeV2Root .room {
color: var(--hp-muted);
font-size: 12.5px;
}
#homeV2Root .lesson h4 {
font-size: 15px;
margin-bottom: 10px;
font-weight: 600;
color: var(--hp-text);
}
#homeV2Root .lesson h4.hp-subject {
margin: 0 0 10px;
}
#homeV2Root .lesson-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #40506a;
margin-bottom: 6px;
}
#homeV2Root .lesson-row svg {
width: 14px;
height: 14px;
color: #22a06b;
}
#homeV2Root .lesson-row b {
font-weight: 600;
color: #40506a;
}
#homeV2Root .home-lesson-links {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 180px 16px 12px;
}
#homeV2Root .lesson > div:nth-child(2) {
min-width: 0;
padding: 16px 12px 0;
}
#homeV2Root .link-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: none;
color: var(--hp-muted);
font-size: 13px;
cursor: pointer;
padding: 4px 0;
margin-right: 14px;
font-family: inherit;
}
#homeV2Root .link-btn:hover {
color: var(--hp-blue);
}
#homeV2Root .link-btn svg {
width: 14px;
height: 14px;
}
#homeV2Root .break-area {
background: repeating-linear-gradient(45deg, #f0f2f6 0 10px, #fafbfc 10px 20px);
border-radius: 8px;
display: flex;
align-items: center;
padding: 10px;
min-height: 78px;
}
#homeV2Root .break-pill {
background: #eef1f5;
border-radius: 999px;
padding: 7px 16px;
display: flex;
gap: 8px;
align-items: center;
font-size: 13px;
color: var(--hp-text);
}
#homeV2Root .break-pill svg {
width: 14px;
height: 14px;
}
#homeV2Root .lessons-empty,
#homeV2Root #lessonsList .no-lessons {
align-items: center;
color: var(--hp-gray);
display: flex;
flex-direction: column;
flex: 1;
font-size: 14px;
gap: 25px;
justify-content: flex-start;
min-height: 545px;
padding: 48px 0 0;
text-align: center;
width: 100%;
}
#homeV2Root .lessons-empty img {
height: auto;
max-width: min(815px, 90%);
object-fit: contain;
width: 280px;
}
#homeV2Root .lessons-empty div {
color: var(--hp-gray);
font-size: 16px;
font-weight: 600;
}
#homeV2Root,
#homeV2Root .dashboard {
height: calc(108.69565vh - 38px) !important;
min-height: 545px !important;
max-height: none !important;
}
#homeV2Root:has(#lessonsList .lesson),
#homeV2Root:has(#lessonsList .lesson) .dashboard {
height: auto !important;
}
@media (max-width: 900px) {
#homeV2Root .dashboard {
grid-template-columns: 1fr;
}
#homeV2Root .col-left {
border-right: none;
border-bottom: 1px solid var(--hp-border);
}
}
#homeV2Root .dashboard {
grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
}
#homeV2Root .col-left,
#homeV2Root .col-right {
contain: layout paint;
}
#homeV2Root .calendar,
#homeV2Root .events {
contain: layout paint style;
}
#homeV2Root .col-right {
padding-left: 18px;
padding-right: 20px;
}
#homeV2Root .head-actions {
margin-right: 0;
}
#homeV2Root .lessons {
width: 100%;
contain: layout paint;
}
#homeV2Root .lesson {
contain: layout paint;
content-visibility: auto;
contain-intrinsic-size: 0 82px;
}
#homeV2Root .home-lesson-links {
padding-right: 12px;
}
#homeV2Root .break-area {
min-height: 64px;
}
.modal-window button,
.modal-window .btn,
.modal-window .action-btn,
.modal-window .btn-primary{
border-radius:999px !important;
padding:10px 16px !important;
border:none !important;
}.modal-window .close-btn{
border-radius:8px !important;
padding:6px !important;
}.modal-window .modal-footer,
.modal-window .modal-actions,
.modal-window .modal-actions-wrap,
.modal-window footer{
display:flex !important;
justify-content:flex-end !important;
gap:14px !important;
align-items:center !important;
}.modal-window button + button{
margin-left:12px !important;
}
button,
input[type="button"],
input[type="submit"],
.action-btn,
.btn,
.oval-btn{
border-radius:999px !important;
}.nav-item[data-target="journals"],
.nav-item[data-target="journals"] .nav-icon,
.nav-item[data-target="journals"] + .submenu .nav-item,
#journals,
#learning-journals,
#journals button,
#journals .btn,
#journals .journal-tab,
#journals .journal-sub-tab,
#gradebook-view,
#gradebook-view button,
#gradebook-view .btn{
border-radius:6px !important;
}
.sidebar-divider{
display:block !important;
height:0;
border:none;
border-top:1px solid #c5d9eb !important;
background:transparent;
margin:12px -16px;
width:calc(100% + 32px);
position:relative;
z-index:6;
opacity:1;
border-radius:1px;
transform:translateZ(0);
flex:0 0 auto;
}.user-logout-full{
border:none !important;
justify-content:flex-start !important;
padding:10px 12px !important;
text-align:left;
}.user-logout-full i{
margin-right:8px;
}.nav-item:not(.active) i.fa-calendar-week,
.nav-item:not(.active) i.fa-calendar{
color:#111;
}.nav-item .arrow{
font-size:0 !important;
width:0;
height:0;
margin-left:auto;
margin-right:21px;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:0;
border-bottom:8px solid currentColor;
transition:
transform 0.22s ease,
border-bottom-color 0.2s;
display:inline-block;
transform-origin:center;
transform:rotate(0deg) !important;
}.nav-item .arrow::before{
content:none !important;
}.nav-item.collapsed .arrow{
transform:rotate(180deg) !important;
}.nav-item.expanded .arrow{
transform:rotate(0deg) !important;
border-bottom-color:currentColor !important;
}.nav-item.active .arrow{
border-bottom-color:currentColor !important;
}.submenu{
max-height:0;
overflow:hidden;
transition:
max-height 0.28s ease,
padding 0.22s ease;
padding-left:0;
}.submenu.open{
max-height:480px;
padding-top:0;
padding-bottom:10px;
}.nav-item.expanded{
background:var(--light-blue-bg);
color:var(--primary-blue);
border:1px solid rgba(28, 119, 255, 0.12);
border-radius:10px 10px 0 0;
padding:10px 0 12px 12px;
}.nav-item.expanded > i{
color:var(--primary-blue);
}.nav-item.expanded + .submenu.open{
border:1px solid rgba(28, 119, 255, 0.12);
border-top:none;
border-radius:0 0 10px 10px;
background:linear-gradient(
-90deg,
rgba(235, 245, 255, 0.6),
rgba(235, 245, 255, 0.4)
);
padding-left:0;
}.nav-item.expanded + .submenu.open .nav-item{
background:transparent !important;
color:var(--text-dark);
border-radius:0;
padding:8px 12px 8px 40px !important;
font-weight:600;
}.nav-item.expanded.active,
.nav-item.expanded.active > i{
color:var(--primary-blue);
}.nav-item.expanded + .submenu.open .nav-item.active{
color:var(--primary-blue);
font-weight:700;
}.sidebar.collapsed .nav-item .arrow{
display:none;
}
.sidebar.updated-user-card .user-profile {
padding: 10px 6px 12px;
margin-left: -6px;
margin-right: -6px;
width: calc(100% + 12px);
border-top: 1px solid #edf1f7;
}
.sidebar.updated-user-card .user-card-inner {
width: calc(100% + 16px);
margin-left: -8px;
min-height: 62px;
padding: 8px 10px 10px;
border: 1px solid #e4e9f0;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(31, 51, 79, .04);
}
.sidebar.updated-user-card .user-card-top {
gap: 9px;
align-items: flex-start;
}
.user-card-top .user-identity {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
text-align: left;
}
.user-identity:has(#user-school-wrap[style*="display:none"]),
.user-identity:has(#user-school-wrap[style*="display: none"]) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: center;
text-align: left;
}
.user-identity .user-name {
width: 100%;
text-align: left;
transform: translateY(1.5px) !important;
margin: 0 !important;
}
.user-identity:has(#user-school-wrap[style*="display:none"]) .user-name,
.user-identity:has(#user-school-wrap[style*="display: none"]) .user-name {
width: 100%;
text-align: left;
transform: translateY(1.5px) !important;
margin: 0 !important;
}
.user-identity:has(#user-school-wrap:not([style*="display:none"]):not([style*="display: none"])) {
display: block;
align-self: auto;
text-align: initial;
}
.user-identity:has(#user-school-wrap:not([style*="display: none"])) .user-name {
transform: translateY(1.5px) !important;
}
.sidebar.updated-user-card .user-card-top .avatar {
width: 36px;
height: 36px;
background: #eaf2ff;
color: #246fe8;
font-size: 13px;
}
.sidebar.updated-user-card .user-name {
color: #000;
font-size: 12.5px;
font-weight: 700;
}
.user-school-wrap {
width: 100%;
margin-top: 5px;
margin-left: -4px;
}
.user-school-selector {
display: flex;
align-items: flex-start;
gap: 6px;
width: 100%;
max-width: 100%;
margin-left: -4px;
padding: 5px 8px;
border: 0;
border-radius: 8px !important;
background: #fff;
color: #111;
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
line-height: 1.2;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.user-school-label {
display: -webkit-box;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.user-school-selector > i {
flex: 0 0 auto;
margin-top: 1px;
}
.user-settings-window {
display: flex;
flex-direction: column;
width: min(440px, calc(100vw - 24px));
max-width: none;
min-height: 360px;
max-height: min(90vh, 520px);
overflow: hidden;
padding: 0;
border-radius: 18px;
color: #172033;
}
.modal-window.user-settings-window {
width: min(440px, calc(100vw - 24px)) !important;
max-width: none !important;
min-height: 360px !important;
max-height: min(90vh, 520px) !important;
border-radius: 18px !important;
}
#modal-user-settings {
align-items: center !important;
padding: 20px !important;
}
.user-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px 12px;
border-bottom: 1px solid #edf1f7;
}
.user-settings-header h2 {
margin: 0;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
.user-settings-window .user-settings-header .close-btn {
flex: 0 0 auto;
margin: 0;
padding: 0 !important;
border: 0 !important;
background: transparent;
color: #334155;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.user-settings-content {
display: grid;
gap: 8px;
padding: 10px 18px 12px;
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
}
.user-settings-profile,
.user-settings-school-card {
border: 1px solid #e8edf4;
border-radius: 16px;
background: #fff;
}
.user-settings-profile {
display: flex;
align-items: center;
gap: 9px;
min-height: 58px;
padding: 8px 10px;
box-sizing: border-box;
}
.user-settings-avatar {
display: flex;
flex: 0 0 38px;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #eaf2ff;
color: #246fe8;
font-size: 15px;
font-weight: 600;
}
.user-settings-name {
min-width: 0;
color: #172033;
font-size: 13px;
font-weight: 700;
overflow-wrap: anywhere;
}
.user-settings-school-card {
min-width: 0;
overflow: hidden;
padding: 11px 12px;
}
.user-settings-school-card .custom-select-wrapper {
display: block !important;
width: 100% !important;
min-width: 0 !important;
}
.user-settings-school-card .custom-select-trigger {
width: 100% !important;
min-width: 0 !important;
overflow: hidden;
}
.user-settings-school-card .custom-select-label {
display: block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user-settings-school-card .custom-select-option {
min-width: 0;
overflow-wrap: anywhere;
}
.user-settings-school-card label {
display: block;
margin-bottom: 5px;
color: #475569;
font-size: 11px;
font-weight: 600;
}
.user-settings-school-select {
width: 100%;
min-height: 38px;
padding: 0 9px;
border: 1px solid #e4eaf3;
border-radius: 9px;
background: #eff4ff;
color: #172033;
font: inherit;
font-size: 12px;
font-weight: 600;
}
.user-settings-school-card p {
margin: 6px 0 0;
color: #475569;
font-size: 11px;
line-height: 1.45;
}
.user-settings-actions {
display: flex;
justify-content: flex-end;
gap: 7px;
padding: 10px 18px 14px;
border-top: 1px solid #e8edf4;
background: #fbfcff;
}
.user-settings-actions button {
min-width: 92px;
min-height: 36px;
margin: 0 !important;
padding: 8px 11px !important;
border-radius: 999px !important;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.user-settings-actions .user-settings-close-button {
border: 1px solid #9bb8e6 !important;
background: #fff;
color: #527ab5;
}
.user-settings-actions .user-settings-save-button {
border: 1px solid #1c77ff !important;
background: #1c77ff;
color: #fff;
}
@media (max-width: 600px) {
.user-settings-window {
width: min(440px, calc(100vw - 24px));
min-height: 360px;
max-height: min(90vh, 520px);
border-radius: 18px;
}
.user-settings-header {
padding: 14px 18px 12px;
}
.user-settings-header h2 {
font-size: 20px;
}
.user-settings-content {
gap: 8px;
padding: 10px 18px 12px;
}
.user-settings-actions {
gap: 7px;
padding: 10px 18px 14px;
}
.user-settings-actions button {
flex: 1 1 0;
min-width: 0;
padding: 8px 11px !important;
}
}
@media (max-width: 640px) {
.modal-window.user-settings-window {
width: min(440px, calc(100vw - 24px)) !important;
min-height: 360px !important;
max-height: min(90vh, 520px) !important;
border-radius: 18px !important;
}
}
.sidebar.updated-user-card .user-role {
display: none !important;
}
.sidebar.updated-user-card .user-logout-full {
min-height: 36px;
margin-top: 8px;
padding: 8px 12px;
border-color: #e4e9f0;
border-radius: 8px;
color: #000;
font-size: 12px;
}
.custom-select-hidden{
display:none !important;
}.custom-select-wrapper{
position:relative;
display:inline-block;
box-sizing:border-box;
font-family:'Inter', -apple-system, sans-serif;
vertical-align:middle;
}.custom-select-trigger{
display:inline-flex;
align-items:center;
justify-content:space-between;
width:100%;
height:100%;
min-height:36px;
padding:8px 12px;
background:#ffffff;
border:1px solid #cbd5e1;
border-radius:8px;
color:#0f172a;
font-size:13.5px;
font-weight:500;
cursor:pointer;
box-sizing:border-box;
outline:none;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
text-align:left;
user-select:none;
gap:8px;
background-image:none !important;
}.custom-select-trigger:hover:not(.custom-select-disabled){
border-color:#94a3b8;
background:#f8fafc;
}.custom-select-trigger:focus-visible{
border-color:var(--custom-select-accent, #3b82f6);
}.custom-select-wrapper.custom-select-disabled{
opacity:0.6;
cursor:not-allowed;
}.custom-select-wrapper.custom-select-disabled .custom-select-trigger{
pointer-events:none;
background:#f1f5f9;
border-color:#e2e8f0;
color:#94a3b8;
}.custom-select-label{
flex:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.custom-select-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
color:inherit;
opacity:0.8;
flex-shrink:0;
}.custom-select-wrapper.custom-select-open .custom-select-arrow{
transform:rotate(180deg);
}.custom-select-dropdown{
position:fixed;
min-width:160px;
background:rgba(255, 255, 255, 0.88);
border:1px solid rgba(15, 23, 42, 0.08);
border-radius:12px;
z-index:2147483000;
overflow:hidden;
display:none !important;
opacity:0;
transform:translateY(-8px) scale(0.98);
pointer-events:none;
visibility:hidden;
transition:opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing:border-box;
}.custom-select-dropdown.custom-select-active{
display:block !important;
}.custom-select-dropdown.custom-select-open{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
visibility:visible;
}.custom-select-dropdown.custom-select-open-upwards{
transform:translateY(8px) scale(0.98);
}.custom-select-dropdown.custom-select-open.custom-select-open-upwards{
transform:translateY(0) scale(1);
}.custom-select-options{
list-style:none;
padding:4px;
margin:0;
max-height:240px;
overflow-y:auto;
}@supports not selector(::-webkit-scrollbar){
.custom-select-options{
scrollbar-width:thin;
scrollbar-color:rgba(15, 23, 42, 0.2) transparent;
}}.custom-select-options::-webkit-scrollbar{
width:6px;
}.custom-select-options::-webkit-scrollbar-thumb{
background-color:rgba(15, 23, 42, 0.15);
border-radius:99px;
}.custom-select-option{
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 12px;
margin:2px 0;
border-radius:8px;
font-size:13.5px;
font-weight:500;
color:#334155;
cursor:pointer;
transition:background 0.12s ease, color 0.12s ease;
user-select:none;
gap:8px;
box-sizing:border-box;
}.custom-select-option:hover{
background:var(--custom-select-accent-light, rgba(28, 119, 255, 0.08));
color:var(--custom-select-accent, #1c77ff);
}.custom-select-option.custom-select-option-selected{
background:var(--custom-select-accent, #1c77ff);
color:#ffffff;
font-weight:600;
}.custom-select-option.custom-select-option-disabled{
opacity:0.4;
cursor:not-allowed;
pointer-events:none;
}.custom-select-group-label{
padding:8px 12px 4px;
font-size:11px;
font-weight:700;
text-transform:uppercase;
color:#94a3b8;
letter-spacing:0.05em;
user-select:none;
}.custom-select-checkmark{
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
color:currentColor;
flex-shrink:0;
}.custom-select-wrapper.form-select,
.custom-select-wrapper.tselect,
.custom-select-wrapper.jsf-select,
.custom-select-wrapper.schedule-pill,
.custom-select-wrapper.schedule-period-select,
.custom-select-wrapper.teachers-perpage{
border:none !important;
padding:0 !important;
background:transparent !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-trigger{
background:#ffffff !important;
border:1px solid #cbd5e1 !important;
color:#0f172a !important;
border-radius:12px !important;
font-size:14px !important;
height:40px !important;
min-height:40px !important;
padding:8px 14px !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-trigger:hover:not(.custom-select-disabled){
border-color:#94a3b8 !important;
background:#f8fafc !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-trigger:focus-visible{
border-color:var(--custom-select-accent, #1c77ff) !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-arrow{
color:#64748b !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-dropdown,
.custom-select-dropdown:not(.custom-select-dark){
background:#ffffff !important;
border:1px solid #cbd5e1 !important;
color:#0f172a !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-option,
.custom-select-dropdown:not(.custom-select-dark) .custom-select-option{
color:#334155 !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-option:hover,
.custom-select-dropdown:not(.custom-select-dark) .custom-select-option:hover{
background:var(--custom-select-accent-light, rgba(28, 119, 255, 0.08)) !important;
color:var(--custom-select-accent, #1c77ff) !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-option.custom-select-option-selected,
.custom-select-dropdown:not(.custom-select-dark) .custom-select-option.custom-select-option-selected{
background:var(--custom-select-accent, #1c77ff) !important;
color:#ffffff !important;
}.custom-select-wrapper:not(.custom-select-dark) .custom-select-options::-webkit-scrollbar-thumb{
background-color:rgba(15, 23, 42, 0.15);
}.custom-select-wrapper.custom-select-dark .custom-select-trigger{
background:var(--primary-blue, #0f68f8) !important;
border:1px solid rgba(255, 255, 255, 0.22) !important;
color:#ffffff !important;
font-size:13.5px !important;
font-weight:700 !important;
border-radius:999px !important;
height:34px !important;
min-height:34px !important;
padding:0 16px !important;
}.custom-select-wrapper.custom-select-dark .custom-select-trigger:hover:not(.custom-select-disabled){
background:rgba(255, 255, 255, 0.16) !important;
border-color:rgba(255, 255, 255, 0.35) !important;
}.custom-select-wrapper.custom-select-dark .custom-select-arrow{
color:#ffffff !important;
}.custom-select-wrapper.custom-select-dark .custom-select-dropdown,
.custom-select-dropdown.custom-select-dark{
background:var(--primary-blue, #0f68f8) !important;
border:1px solid rgba(255, 255, 255, 0.2) !important;
color:#ffffff !important;
}.custom-select-wrapper.custom-select-dark .custom-select-option,
.custom-select-dropdown.custom-select-dark .custom-select-option{
color:rgba(255, 255, 255, 0.9) !important;
}.custom-select-wrapper.custom-select-dark .custom-select-option:hover,
.custom-select-dropdown.custom-select-dark .custom-select-option:hover{
background:rgba(255, 255, 255, 0.15) !important;
color:#ffffff !important;
}.custom-select-wrapper.custom-select-dark .custom-select-option.custom-select-option-selected,
.custom-select-dropdown.custom-select-dark .custom-select-option.custom-select-option-selected{
background:rgba(255, 255, 255, 0.3) !important;
color:#ffffff !important;
font-weight:700 !important;
}.custom-select-wrapper.custom-select-dark .custom-select-options::-webkit-scrollbar-thumb{
background-color:rgba(255, 255, 255, 0.25);
}.custom-select-wrapper.in-modal{
display:block !important;
width:100% !important;
}.custom-select-wrapper.in-modal .custom-select-trigger{
height:48px !important;
min-height:48px !important;
padding:12px 16px !important;
border-radius:12px !important;
width:100% !important;
}
.user-settings-school-card .custom-select-wrapper.in-modal .custom-select-trigger{
background:#eff4ff !important;
border-color:#e4eaf3 !important;
border-radius:9px !important;
color:#172033 !important;
}.custom-select-wrapper.tselect .custom-select-trigger{
border-radius:9px !important;
height:32px !important;
min-height:32px !important;
font-weight:800 !important;
font-size:13px !important;
padding:0 12px !important;
}.custom-select-wrapper.jsf-select .custom-select-trigger{
border-radius:12px !important;
height:40px !important;
min-height:40px !important;
font-weight:800 !important;
padding:0 14px !important;
}.custom-select-wrapper.form-select:not(.in-modal) .custom-select-trigger{
border-radius:12px !important;
height:38px !important;
min-height:38px !important;
padding:0 14px !important;
font-weight:600 !important;
}.custom-select-wrapper.schedule-period-select .custom-select-trigger{
height:34px !important;
min-height:34px !important;
border-radius:999px !important;
font-weight:700 !important;
font-size:13px !important;
padding:0 14px !important;
}.custom-select-search{
display:block;
width:calc(100% - 16px);
margin:8px 8px 4px;
padding:7px 10px;
border:1px solid #cbd5e1;
border-radius:8px;
font-family:inherit;
font-size:13px;
color:#0f172a;
background:#f8fafc;
outline:none;
box-sizing:border-box;
transition:border-color 0.15s ease, background 0.15s ease;
}.custom-select-search:focus{
border-color:var(--custom-select-accent, #1c77ff);
background:#ffffff;
}.custom-select-search::placeholder{
color:#94a3b8;
}.custom-select-option.custom-select-option-hidden,
.custom-select-group-label.custom-select-option-hidden{
display:none !important;
}.custom-select-no-results{
display:none;
padding:12px;
text-align:center;
font-size:13px;
color:#94a3b8;
user-select:none;
}.custom-select-no-results.visible{
display:block;
}
:root{
--mobile-topbar-height:56px;
--mobile-bottom-height:60px;
--sidebar-width-mobile:82vw;
}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;height:auto;display:block}a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}@media (max-width:900px){
#mobile-topbar{display:flex !important;position:fixed;left:0;right:0;top:0;height:var(--mobile-topbar-height);align-items:center;gap:8px;padding:8px 12px;background:#ffffff;z-index:10040}.mobile-title{display:flex;align-items:center;gap:8px;flex:1}.mobile-icon{width:44px;height:44px;min-width:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none}.mobile-title-content{font-weight:600;font-size:14px;line-height:1.1}#mobile-day-strip{display:flex !important;gap:6px;padding:8px 10px;overflow:auto;-webkit-overflow-scrolling:touch;position:sticky;top:var(--mobile-topbar-height);z-index:10020;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92))}#mobile-day-strip .day-pill{
display:inline-flex;align-items:center;justify-content:center;
padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px;
color:#0f172a;background:rgba(15,23,42,0.04);min-width:44px;text-align:center;
transition:transform .18s ease, background .18s ease, color .18s ease;
user-select:none;margin:0;
}#mobile-day-strip .day-pill.active{
background:linear-gradient(90deg,#1C77FF 0%, #06B6D4 100%);
color:#ffffff}#mobile-bottom-nav{display:flex !important;position:fixed;left:0;right:0;bottom:0;height:var(--mobile-bottom-height);align-items:center;justify-content:space-around;background:#ffffff;border-top:1px solid rgba(2,6,23,0.06);z-index:10040}#mobile-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;padding:6px 8px;color:#334155;background:transparent;border:none;min-width:44px}main.main-content{padding-top:calc(var(--mobile-topbar-height) + 8px);padding-bottom:calc(var(--mobile-bottom-height) + 8px)}aside.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width-mobile);max-width:360px;transform:translateX(-110%);transition:transform .28s cubic-bezier(.2,.9,.2,1);z-index:10050}aside.sidebar.mobile-open{transform:translateX(0)}#mobile-sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(2,6,23,0.38);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:10045}#mobile-sidebar-backdrop.active{opacity:1;pointer-events:auto}.decor-circles, .enter-splash-inner .enter-splash-greeting, .news-quick-post{}.news-quick-post{bottom:calc(var(--mobile-bottom-height) + 12px) !important}.home-shell{display:flex;flex-direction:column;gap:12px}.home-main, .home-right{width:100%}.teachers-table-wrap, .teachers-table-scroll, .teachers-card .teachers-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{width:100%;min-width:640px;border-collapse:collapse}button, .btn, .hero-btn, .nav-item{min-height:44px;padding:10px 12px;font-size:15px}.modal-window{max-width:calc(100vw - 24px) !important;width:100% !important;margin:12px auto !important}#mobile-topbar .mobile-icon{background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));border-radius:10px;color:#0f172a}#mobile-topbar .mobile-day-nav{background:transparent;border-radius:8px;padding:8px}.header h1{font-size:16px !important;line-height:1.2 !important}.news-card, .home-my-class-card, .white-card{will-change:auto}@media (prefers-reduced-motion:reduce){*
{transition:none !important;animation:none !important}}}.link-like{display:inline-flex;align-items:center;gap:8px}@media (orientation:landscape) and (max-width:1200px){
.modal-window{
width:92vw !important;
max-width:92vw !important;
margin:12px auto !important;
}}
@media (max-width:900px){
#homeV2Root .lesson-actions{position:static;opacity:1 !important;visibility:visible !important;transform:none;flex-wrap:wrap;padding:0 0 14px;}
#homeV2Root .lesson-btn{min-height:40px;padding:8px 12px;}
#schedule .schedule-table-body{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#schedule .schedule-table-header,#schedule .schedule-table-body-inner{min-width:calc(var(--schedule-time-column) + (var(--schedule-day-min) * 7));}
#schedule .schedule-top-controls{flex-wrap:wrap;gap:8px !important;}
#schedule-view-mode.schedule-pill,#schedule-view-value.schedule-pill{min-width:0 !important;width:min(100%,220px);}
#gradebook-view #tab-planning .planning-grid-head{display:none;}
#gradebook-view #tab-planning .planning-grid-body{gap:10px;padding:10px 8px;}
#gradebook-view #tab-planning .planning-row{grid-template-columns:32px minmax(0,1fr) 44px;gap:8px;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;}
#gradebook-view #tab-planning .planning-datecell{grid-column:2 / 3;}
#gradebook-view #tab-planning .planning-box{grid-column:2 / 4;min-height:42px;padding:10px;}
#gradebook-view #tab-planning .planning-arrow{grid-column:3;grid-row:1;}
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.nav-item:focus-visible,
.custom-select-trigger:focus-visible{
outline:3px solid rgba(28,119,255,.38) !important;
outline-offset:2px !important;
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
scroll-behavior:auto !important;
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
@media (min-width:769px){
:root{
--mriia-wide-page-width:1800px;
}#lesson-day-view.page-section, #calendar.page-section, #students-list.page-section,
#students-report-card.page-section, #students-achievements.page-section,
#classes.page-section, #materials.page-section, #homeworks.page-section, #teachers.page-section,
#teacher-attendance.page-section, #teacher-substitutions.page-section,
#teacher-lessons-fill.page-section, #extracurricular.page-section,
#clubs.page-section, #sections.page-section, #afterschool.page-section, #projects.page-section,
#excursions.page-section, #volunteering.page-section, #news.page-section,
#stats-students.page-section, #stats-teachers.page-section,
#stats-attendance-reasons.page-section, #stats-attendance-days.page-section,
#stats-attendance.page-section, #stats-grades.page-section,
#stats-remarks.page-section, #stats-teacher-attendance.page-section,
#stats-reports.page-section,
#settings.page-section, #learning-school-year.page-section,
#learning-journals.page-section, #learning-subgroups.page-section,
#learning-bells.page-section,
#learning-schedule.page-section, #learning-rooms.page-section,
#learning-subjects.page-section, #learning-teacher-load.page-section,
#learning-curriculum-plans.page-section, #homeV2Root, #schedule-constructor.page-section,
#user-rights.page-section, #help.page-section, #support.page-section{
margin-left:-17px !important;
margin-right:-17px !important;
width:min(var(--mriia-wide-page-width), calc(100% + 34px)) !important;
max-width:var(--mriia-wide-page-width) !important;
padding-left:0 !important;
padding-right:0 !important;
box-sizing:border-box !important;
}#lesson-day-view.page-section >:not(script):not(style):not(link),
#lesson-day-view .lesson-day-breadcrumbs,
#lesson-day-view .lesson-day-topbar,
#lesson-day-view .lesson-day-tabs,
#lesson-day-view .lesson-day-board,
#lesson-day-view .mriia-tests-section,
#calendar.page-section >:not(script):not(style):not(link),
#calendar .calendar-month-header,
#calendar .calendar-month-grid,
#students-list.page-section >:not(script):not(style):not(link),
#students-list .teachers-table-shell,
#students-list .teachers-card,
#students-report-card.page-section >:not(script):not(style):not(link),
#students-report-card .teachers-table-shell,
#students-report-card .teachers-card,
#students-achievements.page-section >:not(script):not(style):not(link),
#students-achievements .teachers-table-shell,
#students-achievements .teachers-card,
#classes.page-section >:not(script):not(style):not(link),
#classes .teachers-table-shell,
#classes .teachers-card,
#materials.page-section >:not(script):not(style):not(link),
#materials .white-card,
#homeworks.page-section >:not(script):not(style):not(link),
#homeworks .white-card,
#teachers.page-section >:not(script):not(style):not(link),
#teachers .teachers-table-shell,
#teachers .teachers-card,
#teacher-attendance.page-section >:not(script):not(style):not(link),
#teacher-attendance .white-card,
#teacher-substitutions.page-section >:not(script):not(style):not(link),
#teacher-substitutions .white-card,
#teacher-lessons-fill.page-section >:not(script):not(style):not(link),
#teacher-lessons-fill .white-card,
#extracurricular.page-section >:not(script):not(style):not(link),
#extracurricular .white-card,
#clubs.page-section >:not(script):not(style):not(link),
#clubs .white-card,
#sections.page-section >:not(script):not(style):not(link),
#sections .white-card,
#afterschool.page-section >:not(script):not(style):not(link),
#afterschool .white-card,
#projects.page-section >:not(script):not(style):not(link),
#projects .white-card,
#excursions.page-section >:not(script):not(style):not(link),
#excursions .white-card,
#volunteering.page-section >:not(script):not(style):not(link),
#volunteering .white-card,
#news.page-section >:not(script):not(style):not(link),
#news .news-grid,
#news .news-quick-post,
#stats-students.page-section >:not(script):not(style):not(link),
#stats-students .stats-card,
#stats-teachers.page-section >:not(script):not(style):not(link),
#stats-teachers .stats-card,
#stats-attendance-reasons.page-section >:not(script):not(style):not(link),
#stats-attendance-reasons .stats-card,
#stats-attendance-days.page-section >:not(script):not(style):not(link),
#stats-attendance-days .stats-card,
#stats-attendance.page-section >:not(script):not(style):not(link),
#stats-attendance .stats-card,
#stats-grades.page-section >:not(script):not(style):not(link),
#stats-grades .stats-card,
#stats-remarks.page-section >:not(script):not(style):not(link),
#stats-remarks .stats-card,
#stats-teacher-attendance.page-section >:not(script):not(style):not(link),
#stats-teacher-attendance .white-card,
#stats-reports.page-section >:not(script):not(style):not(link),
#stats-reports .reports-shell,
#settings.page-section >:not(script):not(style):not(link),
#settings .settings-layout,
#settings .right-panel,
#settings .big-card,
#settings .control-row,
#learning-school-year.page-section >:not(script):not(style):not(link),
#learning-school-year .white-card,
#learning-journals.page-section >:not(script):not(style):not(link),
#learning-journals .white-card,
#learning-subgroups.page-section >:not(script):not(style):not(link),
#learning-subgroups .white-card,
#learning-bells.page-section >:not(script):not(style):not(link),
#learning-bells .teachers-table-shell,
#learning-bells .teachers-card,
#learning-schedule.page-section >:not(script):not(style):not(link),
#learning-schedule .schc-root,
#learning-schedule .schc-topbar,
#learning-schedule .schc-utabs,
#learning-schedule .schc-toolbar,
#learning-schedule .schc-content,
#learning-schedule .schc-shift-row,
#learning-schedule .schc-shift-card,
#learning-schedule .white-card,
#learning-rooms.page-section >:not(script):not(style):not(link),
#learning-rooms .white-card,
#learning-subjects.page-section >:not(script):not(style):not(link),
#learning-subjects .white-card,
#learning-teacher-load.page-section >:not(script):not(style):not(link),
#learning-teacher-load .white-card,
#learning-curriculum-plans.page-section >:not(script):not(style):not(link),
#homeV2Root .dashboard,
#learning-curriculum-plans .white-card,
#schedule-constructor.page-section >:not(script):not(style):not(link),
#schedule-constructor .white-card,
#schedule-constructor .schc-grid-card,
#schedule-constructor .schc-body-blocks,
#schedule-constructor .schc-bottom,
#user-rights.page-section >:not(script):not(style):not(link),
#user-rights .user-rights-body,
#help.page-section >:not(script):not(style):not(link),
#help .mriia-accordion,
#support.page-section >:not(script):not(style):not(link),
#support .white-card{
width:100% !important;
max-width:var(--mriia-wide-page-width) !important;
box-sizing:border-box !important;
}#help .mriia-accordion{
left:auto !important;
right:auto !important;
margin-left:0 !important;
margin-right:0 !important;
}#schedule.page-section{
width:calc(100% + 50px) !important;
max-width:none !important;
margin-left:-25px !important;
margin-right:-25px !important;
}#schedule.page-section >:not(script):not(style):not(link):not(#lesson-day-view){
max-width:none !important;
width:100% !important;
}#lesson-day-view{
max-width:none !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
box-sizing:border-box !important;
}#schedule .schedule-frame{
max-width:none !important;
width:100% !important;
}#schedule .schedule-shell{
max-width:none !important;
width:100% !important
}#schedule .schedule-table-header-grid,
#schedule .schedule-grid{
max-width:none !important;
width:100% !important;
}#calendar.page-section{
width:calc(100% + 60px) !important;
max-width:none !important;
margin-left:-30px !important;
margin-right:-30px !important;
}#calendar.page-section >:not(script):not(style):not(link){
max-width:none !important;
width:100% !important;
}#calendar .schedule-frame{
max-width:none !important;
width:100% !important;
box-sizing:border-box !important;
}#calendar .schedule-shell{
max-width:none !important;
width:100% !important;
box-sizing:border-box !important;
}#calendar .calendar-month-header,
#calendar .calendar-month-grid{
max-width:none !important;
width:100% !important;
}#learning-curriculum-plans.page-section{
width:calc(100% + 60px) !important;
max-width:none !important;
margin-left:-30px !important;
margin-right:-30px !important;
}#learning-curriculum-plans.page-section >:not(script):not(style):not(link),
#learning-curriculum-plans .white-card{
max-width:none !important;
width:100% !important;
}#learning-curriculum-plans-body{
padding:0 !important;
overflow:visible !important;
}#learning-schedule.page-section{
width:calc(100% + 72px) !important;
max-width:none !important;
margin-left:-36px !important;
margin-right:-36px !important;
}#learning-schedule.page-section >:not(script):not(style):not(link),
#learning-schedule .schc-root,
#learning-schedule .schc-topbar,
#learning-schedule .schc-utabs,
#learning-schedule .schc-toolbar,
#learning-schedule .schc-content,
#learning-schedule .schc-shift-row,
#learning-schedule .schc-shift-card{
max-width:none !important;
width:100% !important;
}
body.home-v2-page #header-top,
body.home-v2-page #header-bottom,
body.home-v2-page #messages-bell {
display:none !important;
}
}
#splash-overlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:#1c77ff url("../../sphasl-photo.jpg") center/cover no-repeat;
z-index:100000;
opacity:0;
visibility:hidden;
transition:
opacity 0.5s ease,
visibility 0s linear 0.5s;
pointer-events:none;
}#splash-overlay.open{
opacity:1;
visibility:visible;
transition:none;
pointer-events:auto;
}#splash-overlay .splash-inner,
#splash-overlay .splash-inner img{
width:110vw;
height:110vh;
}#splash-overlay .splash-inner img{
object-fit:cover;
border-radius:0;
transform-origin:center;
}@keyframes splashPulse{
0%{
transform:scale3d(1, 1, 1);
}50%{
transform:scale3d(1.08, 1.08, 1);
}100%{
transform:scale3d(1, 1, 1);
}}#splash-overlay.open #splash-img{
animation:splashPulse 2s ease-in-out infinite;
}
#enter-splash{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:#1C77FF url('../../entersphash-photo.jpg') center/cover no-repeat;
z-index:10040;
opacity:0;
visibility:hidden;
transition:opacity 0.35s ease, visibility 0s linear 0.35s;
pointer-events:none;
}#enter-splash.open{
opacity:1;
visibility:visible;
transition-delay:0s;
}#enter-splash .enter-splash-inner{
position:relative;
width:100%;
height:100%;
}#enter-splash .enter-splash-greeting{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width:min(720px, calc(100% - 40px));
text-align:center;
color:#ffffff;
font-weight:800;
font-size:24px;
line-height:1.25;
}@media (max-width:768px){
#enter-splash .enter-splash-greeting{top:50%;font-size:18px}}
#login-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:2000;
background:
radial-gradient(
1200px 600px at 10% 20%,
rgba(255, 255, 255, 0.06),
transparent
),
linear-gradient(180deg, #0f4ef0 0%, #1c77ff 60%);
}#login-screen .login-wrap{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:32px;
}#login-screen .login-card{
width:100%;
max-width:1200px;
border-radius:20px;
padding:0;
overflow:visible;
display:flex;
background:transparent;
border:none;
color:#ffffff;
}#login-screen .login-left{
width:56%;
padding:48px 44px;
background:transparent;
}#login-screen .login-right{
width:44%;
background:transparent;
padding:40px;
display:flex;
flex-direction:column;
gap:18px;
align-items:center;
justify-content:center;
}#login-screen .login-logo{
display:flex;
align-items:center;
gap:12px;
font-size:0;
margin-bottom:6px;
}#login-screen .login-subtitle{
color:rgba(17, 24, 39, 0.9);
margin-bottom:18px;
font-size:15px;
}#login-screen .hero{
position:relative;
padding:6px 0 12px 0;
}#login-screen .hero-blob{
position:absolute;
left:-80px;
top:-80px;
width:420px;
height:420px;
background:radial-gradient(
circle at 30% 30%,
#ff5f5f 0%,
#1c77ff 35%,
transparent 60%
);
border-radius:48%;
filter:blur(16px);
opacity:0.95;
transform:rotate(-12deg);
pointer-events:none;
}#login-screen .hero-title{
font-size:64px;
line-height:0.95;
color:#ffffff;
font-weight:800;
margin:28px 0 12px 0;
}#login-screen .hero-sub{
font-size:20px;
color:rgba(255, 255, 255, 0.92);
margin-bottom:18px;
}#login-screen .hero-ctas{
display:flex;
gap:14px;
margin-top:6px;
}#login-screen .hero-btn{
padding:14px 22px;
border-radius:999px;
font-weight:800;
font-size:15px;
cursor:pointer;
border:2px solid rgba(255, 255, 255, 0.12);
}#login-screen .hero-btn-outline{
background:transparent;
color:#fff;
border:2px solid rgba(255, 255, 255, 0.18);
}#login-screen .hero-btn-solid{
background:#fff;
color:var(--primary-blue);
border:none;
}@media (max-width:900px){
#login-screen .hero-title{
font-size:34px;
}}#login-screen .form-group{
margin-top:10px;
text-align:left;
width:100%;
}#login-screen .form-label{
color:rgba(15, 23, 42, 0.7);
font-size:13px;
margin-bottom:6px;
display:block;
}#login-screen .input-icon{
display:flex;
align-items:center;
gap:12px;
background:#fbfdff;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(15, 23, 42, 0.06);
transition:
border-color 0.16s ease,
transform 0.12s ease;
}#login-screen .input-icon i{
color:rgba(15, 23, 42, 0.56);
width:20px;
text-align:center;
}#login-screen .input-icon input,
#login-screen select.login-select{
background:transparent;
border:none;
outline:none;
color:#0f172a;
font-size:15px;
width:100%;
}#login-screen .input-icon input::placeholder{
color:rgba(15, 23, 42, 0.45);
}#login-screen .login-hidden{
display:none !important;
}#login-screen .form-group:focus-within .input-icon{
border-color:var(--primary-blue);
transform:translateY(-2px);
}#login-screen select.login-select{
-webkit-appearance:none;
appearance:none;
}#login-screen .login-btn{
margin-top:16px;
padding:14px 18px;
border-radius:12px;
background:var(--primary-blue);
color:#ffffff;
font-weight:800;
border:none;
cursor:pointer;
transition:
transform 0.12s ease,
;
}#login-screen .login-btn:hover{
}#login-screen .login-note{
font-size:13px;
color:rgba(15, 23, 42, 0.6);
margin-top:8px;
}#login-screen #login-error{
color:#9b1111;
background:rgba(255, 235, 235, 0.8);
padding:8px 12px;
border-radius:10px;
margin-top:12px;
display:none;
border:1px solid rgba(155, 17, 17, 0.08);
}#login-screen .brand-tag{
font-weight:700;
color:rgba(15, 23, 42, 0.9);
font-size:13px;
}#login-screen .decor-circles{
position:absolute;
inset:-10% -10% auto auto;
pointer-events:none;
}#login-screen .login-left::before{
content:"";
position:absolute;
left:44px;
top:24px;
bottom:24px;
width:4px;
border-radius:4px;
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.12),
rgba(28, 119, 255, 0.04)
);
pointer-events:none;
}#login-screen .login-card{
position:relative;
overflow:visible;
}#login-screen .decor-circles span{
position:absolute;
border-radius:50%;
opacity:0.12;
filter:blur(16px);
}#login-screen .decor-circles .c1{
width:420px;
height:420px;
right:4%;
top:6%;
background:#fff;
}#login-screen .decor-circles .c2{
width:260px;
height:260px;
right:22%;
top:40%;
background:#ffd05b;
opacity:0.08;
}
#idgov-screen{
position:absolute;
inset:0;
z-index:5;
display:none;
background:#ffffff;
}#idgov-screen .wrap{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:32px;
}#idgov-screen .card{
width:100%;
max-width:920px;
background:rgba(255, 255, 255, 0.96);
border-radius:20px;
padding:22px;
color:#0f172a;
border:1px solid rgba(2, 6, 23, 0.06);
box-shadow:0 24px 60px rgba(2, 6, 23, 0.12);
}#idgov-screen .top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
}#idgov-screen .title{
font-weight:900;
font-size:18px;
}#idgov-screen .step{
display:none;
}#idgov-screen .step.active{
display:block;
}#idgov-screen .btnrow{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:14px;
}#idgov-screen .list{
display:flex;
flex-direction:column;
gap:8px;
max-height:340px;
overflow:auto;
padding-top:8px;
}#idgov-screen .list-item{
display:block;
width:100%;
text-align:left;
padding:12px 14px;
background:#f6f8fb;
border:1px solid rgba(15, 23, 42, 0.08);
border-radius:12px;
cursor:pointer;
font-weight:700;
color:#0f172a;
transition:background 0.15s ease, border-color 0.15s ease;
}#idgov-screen .list-item:hover{
border-color:rgba(28, 119, 255, 0.35);
background:rgba(28, 119, 255, 0.06);
}#idgov-screen .list-item.lite{
background:rgba(28, 119, 255, 0.06);
border:1px solid rgba(28, 119, 255, 0.25);
}#qr-screen{
position:absolute;
inset:0;
z-index:6;
display:none;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(15, 23, 42, 0.45);
}#qr-screen .wrap{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
padding:32px;
}#qr-screen .card{
width:100%;
max-width:560px;
background:#ffffff;
border-radius:20px;
padding:22px;
color:#0f172a;
border:1px solid rgba(2, 6, 23, 0.06);
box-shadow:0 24px 60px rgba(2, 6, 23, 0.12);
}#qr-screen .top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:12px;
}#qr-screen .title{
font-weight:900;
font-size:18px;
}#qr-screen .qr-wrap{
display:flex;
justify-content:center;
padding:14px 0;
}#qr-screen .qr-wrap img,
#qr-screen .qr-wrap canvas{
width:200px;
height:200px;
border-radius:14px;
}#idgov-screen .idgov-close,
#qr-screen .idgov-close{
margin-left:auto;
background:transparent;
border:none;
color:#64748b;
font-size:20px;
cursor:pointer;
width:38px;
height:38px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.15s ease, color 0.15s ease;
}#idgov-screen .idgov-close:hover,
#qr-screen .idgov-close:hover{
background:rgba(2, 6, 23, 0.05);
color:#0f172a;
}#idgov-screen .idgov-hint,
#qr-screen .idgov-hint{
color:#475569;
font-size:14px;
margin:6px 0 12px;
}#idgov-screen .idgov-input,
#qr-screen .idgov-input{
width:100%;
padding:13px 14px;
border:1px solid rgba(15, 23, 42, 0.12);
border-radius:12px;
font-size:15px;
outline:none;
background:#fbfdff;
color:#0f172a;
letter-spacing:0.04em;
box-sizing:border-box;
}#idgov-screen .idgov-input:focus,
#qr-screen .idgov-input:focus{
border-color:var(--primary-blue);
box-shadow:0 0 0 3px rgba(28, 119, 255, 0.15);
}#idgov-screen .idgov-input::placeholder,
#qr-screen .idgov-input::placeholder{
color:rgba(15, 23, 42, 0.45);
}#idgov-screen .idgov-btn,
#qr-screen .idgov-btn{
padding:12px 20px;
border-radius:999px;
font-weight:800;
font-size:14px;
cursor:pointer;
border:none;
}#idgov-screen .idgov-btn.ghost,
#qr-screen .idgov-btn.ghost{
background:transparent;
border:2px solid rgba(15, 23, 42, 0.15);
color:#0f172a;
}#idgov-screen .idgov-btn.solid,
#qr-screen .idgov-btn.solid{
background:var(--primary-blue);
color:#ffffff;
}#idgov-screen .idgov-profile,
#qr-screen .idgov-profile{
display:flex;
align-items:center;
gap:14px;
padding:14px;
background:#f6f8fb;
border:1px solid rgba(2, 6, 23, 0.06);
border-radius:14px;
margin-bottom:12px;
}#idgov-screen .idgov-profile-avatar,
#qr-screen .idgov-profile-avatar{
width:52px;
height:52px;
border-radius:50%;
background:var(--primary-blue);
color:#fff;
font-weight:900;
font-size:20px;
display:flex;
align-items:center;
justify-content:center;
}#idgov-screen .idgov-profile-name,
#qr-screen .idgov-profile-name{
font-weight:800;
color:#0f172a;
}#idgov-screen .idgov-profile-sub,
#qr-screen .idgov-profile-sub{
font-size:13px;
color:#64748b;
margin-top:2px;
}#idgov-screen .field-error,
#qr-screen .field-error{
display:none;
color:#9b1111;
background:rgba(255, 235, 235, 0.9);
padding:8px 12px;
border-radius:10px;
margin-top:10px;
font-size:13px;
}@media (max-width:900px){
#login-screen .login-card{
flex-direction:column;
width:92%;
}#login-screen .login-left,
#login-screen .login-right{
width:100%;
}#login-screen .login-left{
padding:28px;
}#login-screen .login-right{
padding:20px;
}
}@media (max-width:640px){
#idgov-screen .wrap,
#qr-screen .wrap{
padding:16px;
}
}#login-screen{
overflow-y:auto;
justify-content:safe center;
}#login-screen .login-eyebrow{
font-size:13px;
font-weight:800;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(255, 255, 255, 0.85);
margin:0;
}#login-screen .login-tabs{
display:flex;
gap:6px;
width:100%;
margin:2px 0 14px 0;
padding:5px;
border-radius:16px;
background:rgba(255, 255, 255, 0.12);
}#login-screen .login-tab{
flex:1;
padding:10px 8px;
border:none;
border-radius:12px;
background:transparent;
color:rgba(255, 255, 255, 0.88);
font-weight:800;
font-size:14px;
cursor:pointer;
transition:
background-color 0.16s ease,
color 0.16s ease;
}#login-screen .login-tab.active{
background:#fff;
color:var(--primary-blue);
box-shadow:0 4px 14px rgba(0, 0, 0, 0.12);
}#login-screen .login-panel{
display:none;
width:100%;
}#login-screen .login-panel.active{
display:block;
}#login-screen .login-step{
display:none;
}#login-screen .login-step.active{
display:block;
}#login-screen .panel-hint{
color:rgba(255, 255, 255, 0.95);
font-size:14px;
font-weight:700;
margin:2px 0 12px 0;
}#login-screen .login-method{
width:100%;
margin-top:8px;
padding:14px 16px;
border-radius:14px;
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(255, 255, 255, 0.2);
display:flex;
align-items:center;
gap:12px;
text-align:left;
cursor:pointer;
color:#0f172a;
font-weight:700;
font-size:15px;
transition:
transform 0.12s ease,
box-shadow 0.12s ease;
}#login-screen .login-method i{
color:var(--primary-blue);
font-size:17px;
}#login-screen .login-method i:last-child{
margin-left:auto;
color:#cbd5e1;
font-size:13px;
}#login-screen .login-method span{
flex:1;
}#login-screen .login-method:hover{
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0, 0, 0, 0.18);
}#login-screen .login-method-lite{
background:rgba(255, 255, 255, 0.6);
font-weight:700;
color:#0f172a;
}#login-screen .login-btnrow{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:16px;
}#login-screen .login-btn-ghost{
padding:13px 18px;
border-radius:12px;
background:transparent;
color:#fff;
border:2px solid rgba(255, 255, 255, 0.4);
font-weight:800;
font-size:14px;
cursor:pointer;
}#login-screen .login-btn-solid{
padding:13px 18px;
border-radius:12px;
background:#fff;
color:var(--primary-blue);
border:none;
font-weight:800;
font-size:14px;
cursor:pointer;
transition:transform 0.12s ease;
}#login-screen .login-btn-solid:hover{
transform:translateY(-1px);
}#login-screen .login-block-btn{
width:100%;
margin-top:16px;
padding:14px 18px;
font-size:15px;
}#login-screen .login-profile{
display:flex;
align-items:center;
gap:14px;
background:rgba(255, 255, 255, 0.96);
border-radius:14px;
padding:14px 16px;
margin-top:4px;
}#login-screen .login-profile-avatar{
width:52px;
height:52px;
border-radius:50%;
background:rgba(28, 119, 255, 0.12);
color:var(--primary-blue);
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:22px;
flex-shrink:0;
}#login-screen .login-profile-name{
font-weight:900;
color:#0f172a;
font-size:16px;
}#login-screen .login-profile-sub{
color:#64748b;
font-size:13px;
font-weight:600;
margin-top:2px;
}#login-screen .qr-inline{
margin:0 auto 16px auto;
width:200px;
height:200px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
padding:12px;
}#login-screen .qr-inline img,
#login-screen .qr-inline canvas{
max-width:100%;
max-height:100%;
}#login-screen .login-panel .form-label{
color:rgba(255, 255, 255, 0.95);
}#login-screen .login-note{
color:rgba(255, 255, 255, 0.75);
}#login-screen .field-error{
margin-top:10px;
color:#9b1111;
background:rgba(255, 235, 235, 0.95);
padding:8px 12px;
border-radius:10px;
display:none;
border:1px solid rgba(155, 17, 17, 0.08);
font-weight:600;
font-size:13px;
}
.left-nav-card{width:260px;padding:12px;border-radius:16px;background:#fff}.nav-pill{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;border-radius:10px;font-weight:600;cursor:pointer;color:#0f172a;background:transparent;border:0;outline:0}.nav-pill i{color:#0f172a;width:18px;text-align:center}.nav-pill + .nav-pill{margin-top:8px}.nav-pill.active{background:#EFF6FF;color:#0b61ff}.nav-pill:focus{outline:none}.big-card{display:flex;flex-direction:column;align-items:stretch;background:#fff;border-radius:18px;padding:18px;margin-bottom:18px;border:1px solid rgba(11,97,255,0.04)}.big-card .card-title{font-size:16px;font-weight:700;color:#0b61ff;display:flex;align-items:center;gap:10px}.big-card .card-title .title-icon{font-size:18px;color:#0b61ff;background:rgba(11,97,255,0.06);padding:6px;border-radius:8px}.big-card .card-sub{font-size:13px;color:#6b7280;margin-top:6px}.big-card .card-content{display:flex;flex-direction:column}.card-chevron{font-size:28px;color:#cbd5e1}.card-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}#tab-learning .big-card .card-title, #tab-learning .big-card .card-sub, #tab-learning .control-label, #tab-learning .card-controls select{color:#0f172a}#tab-users .big-card .card-title, #tab-users .big-card .card-sub, #tab-users .control-label, #tab-users .card-controls select{color:#0f172a}.card-desc{font-size:13px;color:#6b7280;margin-top:6px}.card-label{font-size:14px;color:#0f172a;margin-top:10px;font-weight:600}.card-controls{display:flex;flex-direction:column;align-items:flex-end;gap:10px}#tab-general select, #tab-learning select, #tab-users select{padding:8px 10px;border-radius:10px;border:1px solid #e6eefc;background:#f8fbff;font-size:14px}.switch{position:relative;display:inline-block;width:46px;height:28px}.switch input{display:none}.switch span{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#f1f5ff;border-radius:999px;transition:.18s}.switch span:after{content:'';position:absolute;width:20px;height:20px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.18s}.switch input:checked + span{background:#0b61ff}.switch input:checked + span:after{transform:translateX(18px)}.control-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:760px}@media (min-width:769px){
.control-row{max-width:100%}}.control-label{flex:1;color:#0f172a;font-size:14px}.card-controls select, .card-controls .switch{flex:0 0 auto}.big-card.clickable{cursor:pointer;transition:transform .18s}.big-card.clickable:hover{transform:translateY(-6px)}.settings-list-container{
display:flex;
flex-direction:column;
margin-top:6px;
}.settings-list-item{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 0;
cursor:pointer;
border-bottom:1px solid #f1f5f9;
background:transparent;
}.settings-list-item:last-child{
border-bottom:none;
padding-bottom:0;
}.settings-list-item:first-child{
padding-top:12px;
}.settings-list-item .item-info{
display:flex;
flex-direction:column;
gap:4px;
}.settings-list-item .item-title{
font-size:15px;
font-weight:700;
color:#0f172a;
transition:color 0.15s ease;
}.settings-list-item:hover .item-title{
color:#0b61ff;
}.settings-list-item .item-sub{
font-size:13px;
color:#64748b;
}.settings-list-item .item-action{
display:flex;
align-items:center;
}.settings-list-item .item-chevron{
font-size:14px;
color:#94a3b8;
transition:transform 0.2s ease, color 0.15s ease;
}.settings-list-item:hover .item-chevron{
color:#0b61ff;
transform:translateX(4px);
}.big-card .card-title{
font-size:16px;
font-weight:700;
color:#0b61ff;
display:flex;
align-items:center;
gap:12px;
border-bottom:1px solid #f1f5f9;
padding-bottom:14px;
margin-bottom:4px;
}.big-card .card-title .title-icon-badge{
font-size:14px;
color:#fff;
background:#0b61ff;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}.breadcrumb-link{
cursor:pointer;
opacity:0.75;
transition:opacity 0.2s ease, color 0.2s ease;
}.breadcrumb-link:hover{
opacity:1;
color:#eff6ff;
}.breadcrumb-separator{
opacity:0.5;
font-weight:400;
margin:0 10px;
}.breadcrumb-current{
font-weight:700;
}.settings-content-layout{
display:flex;
gap:24px;
align-items:flex-start;
flex-wrap:wrap;
padding:8px;
}.settings-main-col{
flex:1;
min-width:320px;
display:flex;
flex-direction:column;
gap:12px;
}.settings-side-card{
width:340px;
max-width:100%;
background:#ffffff;
padding:20px;
border-radius:16px;
border:1px solid #eef2f6;
display:flex;
flex-direction:column;
gap:16px;
}.settings-section-title{
font-size:15px;
font-weight:700;
color:#0f172a;
margin-bottom:8px;
}.settings-card-title{
font-size:16px;
font-weight:700;
color:#0f172a;
border-bottom:1px solid #f1f5f9;
padding-bottom:12px;
margin-bottom:4px;
}.settings-item-card{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px;
border-radius:12px;
border:1px solid #f1f5f9;
background:#f8fafc;
margin-bottom:10px;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.settings-item-card:hover{
border-color:#cbd5e1;
background:#ffffff;
}.settings-item-card .item-name{
font-weight:700;
color:#0f172a;
font-size:14.5px;
}.settings-item-card .item-details{
font-size:12.5px;
color:#64748b;
margin-top:3px;
}.page-section input.form-input,
.page-section select.form-input,
.page-section select.form-select{
height:40px !important;
border-radius:10px !important;
border:1px solid #cbd5e1 !important;
padding:8px 12px !important;
font-size:14px !important;
background:#ffffff !important;
color:#0f172a !important;
outline:none !important;
box-sizing:border-box !important;
transition:border-color 0.15s ease;
}.page-section input.form-input:focus,
.page-section select.form-input:focus,
.page-section select.form-select:focus{
border-color:#0b61ff !important;
}.settings-segment-control{
display:inline-flex;
background:#f1f5f9;
padding:4px;
border-radius:12px;
border:1px solid #e2e8f0;
}.settings-segment-btn{
border:none;
background:transparent;
padding:8px 18px;
font-size:13.5px;
font-weight:700;
color:#64748b;
cursor:pointer;
border-radius:9px;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.settings-segment-btn:hover{
color:#0f172a;
}.settings-segment-btn.active{
background:#ffffff !important;
color:#0b61ff !important;
}.settings-item-card{
gap:16px;
}.settings-item-card .item-main-info{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}.settings-item-card .item-icon-wrapper{
font-size:18px;
color:#0b61ff;
background:rgba(11, 97, 255, 0.06);
width:38px;
height:38px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}.settings-item-card .item-details-row{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:5px;
}.settings-item-card .detail-label{
font-size:12px;
color:#64748b;
display:inline-flex;
align-items:center;
gap:6px;
background:#f1f5f9;
padding:3px 8px;
border-radius:6px;
font-weight:500;
}.settings-item-card .detail-label i{
color:#94a3b8;
}.settings-item-card .item-actions-wrapper{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}.date-badge{
background:#e0f2fe;
color:#0369a1;
padding:2px 8px;
border-radius:6px;
font-weight:600;
font-size:11.5px;
}.date-arrow{
color:#cbd5e1;
font-weight:700;
margin:0 2px;
}.page-section .btn-primary{
background:#0b61ff;
color:#ffffff;
border:none;
border-radius:10px;
padding:8px 16px;
font-weight:700;
cursor:pointer;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
display:inline-flex;
align-items:center;
gap:6px;
}.page-section .btn-primary:hover{
background:#004ecc;
}.page-section .btn-secondary{
border:1px solid #cbd5e1;
background:#ffffff;
color:#0f172a;
border-radius:8px;
padding:6px 12px;
font-weight:600;
cursor:pointer;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
display:inline-flex;
align-items:center;
gap:6px;
}.page-section .btn-secondary:hover{
background:#f8fafc;
border-color:#94a3b8;
}.page-section .btn-danger{
border:none;
background:#fee2e2;
color:#ef4444;
border-radius:8px;
padding:6px 12px;
font-weight:600;
cursor:pointer;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
display:inline-flex;
align-items:center;
gap:6px;
}.page-section .btn-danger:hover{
background:#fca5a5;
color:#ffffff;
}.page-section .btn-cancel{
background:#f1f5f9;
color:#64748b;
border:1px solid #e2e8f0;
border-radius:10px;
padding:8px 16px;
font-weight:600;
cursor:pointer;
margin-bottom:10px;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}#learning-school-year .white-card,
#learning-journals .white-card,
#learning-subgroups .white-card,
#learning-schedule .white-card,
#schedule-constructor .white-card,
#learning-rooms .white-card,
#learning-subjects .white-card,
#learning-teacher-load .white-card,
#learning-curriculum-plans .white-card{
height:calc(100vh - 60px) !important;
min-height:480px !important;
max-height:900px !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
}#learning-school-year-body,
#learning-journals-body,
#learning-subgroups-body,
#learning-schedule-body,
#schedule-constructor-body,
#learning-rooms-body,
#learning-subjects-body,
#learning-teacher-load-body,
#learning-curriculum-plans-body{
flex:1 !important;
overflow-y:auto !important;
padding:16px !important;
box-sizing:border-box !important;
}
#user-rights{background:var(--primary-blue)}#user-rights .user-rights-body{max-width:1180px;margin:0 auto}@media (min-width:769px){
#user-rights .user-rights-body{max-width:100%}}#user-rights .btn-primary{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.28)}#user-rights .btn-primary:hover{background:rgba(255,255,255,0.24)}#user-rights .action-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent}#user-rights .action-btn:hover{background:rgba(11,97,255,0.08)}
.messages-bell{position:absolute;right:30px;top:20px;background:var(--primary-blue);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1200;border:1px solid #fff}.messages-bell .fa-bell{font-size:18px;color:#fff}.messages-count{position:absolute;top:6px;right:6px;background:#ef4444;color:white;font-size:11px;padding:3px 7px;border-radius:12px;font-weight:700}.messages-panel{position:absolute;right:30px;top:74px;width:340px;max-height:72vh;background:white;border-radius:12px;overflow:hidden;z-index:1200;display:flex;flex-direction:column}.messages-panel-header{padding:12px 14px;background:linear-gradient(90deg,#EFF6FF,#F0F9FF);display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#0f172a}.messages-close{background:transparent;border:none;font-size:18px;cursor:pointer}.conversations-list{padding:8px;overflow:auto;flex:1;background:#fff}.conv-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;cursor:pointer;gap:8px}.conv-item:hover{background:rgba(59,130,246,0.06)}.conv-title{font-weight:700;color:#0f172a}.conv-snippet{color:#6b7280;font-size:13px}.chat-window{padding:12px;display:flex;flex-direction:column;gap:8px;background:#f8fafc}.chat-messages{flex:1;overflow:auto;max-height:40vh;display:flex;flex-direction:column;gap:8px;padding:6px}.msg{max-width:80%;padding:8px 10px;border-radius:12px}.msg.out{align-self:flex-end;background:var(--primary-blue);color:white}.msg.in{align-self:flex-start;background:#e6f0ff;color:#0f172a}.chat-input-row{display:flex;gap:8px}.chat-input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #d1d5db}.chat-send-btn{background:var(--primary-blue);color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
#planning-page{position:fixed;inset:0;background:#f4f7ff;display:none;z-index:99999;overflow:auto}#planning-page .page-inner{max-width:1100px;margin:30px auto;padding:20px}#planning-page .page-header{font-weight:600;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}#planning-page .page-header button{background:#1C77FF;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}.planning-center{display:flex;gap:24px;align-items:flex-start;justify-content:center}.planning-card{background:linear-gradient(180deg,#fff,#fcfcff);border-radius:16px;padding:18px;display:flex;gap:12px;align-items:center;min-width:560px}.planning-card .col{padding:10px 12px;border-radius:8px;background:transparent;min-width:120px;text-align:center}.planning-card .col.num{width:80px;font-weight:700}.planning-card .col.date{width:140px}.planning-card .col.dropzone{flex:1;min-height:90px;border:2px dashed #cfcfcf;background:#fff;display:flex;align-items:center;justify-content:center}.planning-date-input{padding:8px 10px;border:1px solid #d0d6e8;border-radius:8px;font-size:14px;width:100%}.planning-import-section{margin-bottom:20px;padding:16px;background:#fff;border-radius:12px;border:1px solid #e2e8f0}.imported-topics-wrap{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;min-height:40px}.import-panel{display:flex;flex-direction:column;gap:12px;align-items:center}.import-panel .import-box{background:linear-gradient(90deg,#7ec8ff,#1c77ff);color:#fff;padding:12px 16px;border-radius:10px;min-width:200px;text-align:center}.import-panel button{background:#0b63e6;color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}#imported-topics{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}.topic{background:#fff;border-radius:8px;padding:8px 12px;cursor:grab;border:1px solid #e6eefc}#import-modal.modal-overlay,
#progress-modal.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:150000}#import-modal .modal{background:#fff;padding:18px;border-radius:12px;min-width:320px}.import-options{display:flex;gap:8px}.import-options button{flex:1;padding:10px;border-radius:8px;border:1px solid #d0d6e8;background:#fff;cursor:pointer}.progress-modal{display:flex;flex-direction:column;gap:14px;align-items:center;padding:26px;border-radius:14px;background:linear-gradient(135deg,#7ec8ff,#1c77ff);color:#fff}.smiley{font-size:48px}.progress-bar{width:260px;height:10px;background:rgba(255,255,255,0.3);border-radius:999px;overflow:hidden}.progress-bar > i{display:block;height:100%;background:rgba(255,255,255,0.95);width:0%}@media (max-width:900px){.planning-center{flex-direction:column;align-items:stretch}.planning-card{min-width:unset;width:100%}}.ktp-import-container::-webkit-scrollbar{
width:8px;
}.ktp-import-container::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.05);
border-radius:4px;
}.ktp-import-container::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.2);
border-radius:4px;
}.ktp-import-container::-webkit-scrollbar-thumb:hover{
background:rgba(255, 255, 255, 0.3);
}#ktp-lessons-list::-webkit-scrollbar,
#ktp-themes-container::-webkit-scrollbar{
width:6px;
}#ktp-lessons-list::-webkit-scrollbar-track,
#ktp-themes-container::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.05);
border-radius:3px;
}#ktp-lessons-list::-webkit-scrollbar-thumb,
#ktp-themes-container::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.2);
border-radius:3px;
}#ktp-lessons-list::-webkit-scrollbar-thumb:hover,
#ktp-themes-container::-webkit-scrollbar-thumb:hover{
background:rgba(255, 255, 255, 0.35);
}.ktp-theme-card{
transition:transform 0.15s, border-color 0.15s;
}.ktp-theme-card:hover{
transform:translateY(-1px);
}.ktp-theme-card:active{
cursor:grabbing;
}.ktp-assigned-card{
transition:border-color 0.15s, background-color 0.15s;
}.ktp-assigned-card:hover{
border-color:#cbd5e1;
background-color:#f1f5f9;
}.ktp-dropzone{
border:2px dashed #cbd5e1;
background:transparent;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.ktp-dropzone:hover{
border-color:#1c77ff;
color:#1c77ff;
background:rgba(28, 119, 255, 0.03);
}.modal-overlay.open{
display:flex !important;
align-items:center;
justify-content:center;
}.ktp-import-container{
position:fixed !important;
top:0 !important;
bottom:0 !important;
right:0 !important;
left:218px !important;
z-index:10000 !important;
}@media (max-width:900px){
.ktp-import-container{
left:0 !important;
}}
.grade-circle{position:relative;overflow:hidden;outline:none !important;box-shadow:none !important;user-select:none;caret-color:transparent}.grade-circle:focus,.grade-circle:focus-visible{outline:none !important;box-shadow:none !important}
.mriia-modal-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(2,6,23,0.5);display:none;align-items:center;justify-content:center;z-index:200000}.mriia-modal{background:#fff;border-radius:18px;padding:20px;min-width:360px;max-width:760px}.mriia-modal.open{display:flex}.grade-circle{width:160px;height:160px;border-radius:50%;background:linear-gradient(180deg,#f8fafc,#fff);border:6px solid #e6eefc;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:800;color:#0f172a;margin:12px auto}.grade-keypad{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.grade-key{width:56px;height:44px;border-radius:10px;background:#f3f4f6;border:1px solid #e6e6e6;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}.grade-actions{display:flex;justify-content:center;gap:12px;margin-top:14px}.btn-apply{background:#1C77FF;color:#fff;border:none;padding:8px 14px;border-radius:10px;cursor:pointer}.btn-secondary{background:#f3f4f6;border:none;padding:8px 14px;border-radius:10px;cursor:pointer}.gr-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.gr-item{padding:8px 10px;border-radius:10px;background:#f8fafc;border:1px solid #e6eefc;cursor:pointer;font-weight:700}.gr-item.selected{background:#1C77FF;color:#fff;border-color:#155ecb}.gr-star{width:16px;height:16px;border-radius:4px;border:1px solid rgba(28,119,255,0.2);display:inline-flex;align-items:center;justify-content:center;color:#1C77FF;cursor:pointer;background:#f0f8ff;font-size:12px}.gr-star.active{background:#1C77FF;color:#fff}.gb-table th .gr-star, thead th .gr-star{position:absolute !important;right:8px !important;top:6px !important}.gb-subtype-header .auto-star-btn, .gb-subtype-header .gr-star{position:absolute !important;right:6px !important;top:6px !important;width:16px !important;height:16px !important;padding:0 !important;display:inline-flex !important;align-items:center;justify-content:center}.gr-star-preview{pointer-events:none}.gr-star-saved{pointer-events:none;font-weight:700}.gr-star.shake{animation:gr-shake 0.28s}@keyframes gr-shake{0%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-1.5px)}100%{transform:translateX(0)}}.gr-columns{display:flex;gap:6px;margin-top:8px}.gr-col{width:64px;height:60px;border-radius:8px;background:#fff;border:1px solid #e6eefc;display:flex;align-items:center;justify-content:center;font-weight:700}.gb-subtype-header .auto-star-wrapper,
.gb-header-clickable .auto-star-wrapper.svid-general-open-wrapper{
display:flex;
width:100%;
align-items:center;
justify-content:space-between;
padding:0 4px;
box-sizing:border-box;
}.gb-subtype-header .auto-star-wrapper .auto-star-btn,
.gb-header-clickable .auto-star-wrapper.svid-general-open-wrapper .auto-star-btn{
position:static !important;
transform:none;
flex-shrink:0;
}.gb-subtype-header .auto-star-btn.svid-plus-btn,
.gb-header-clickable .auto-star-btn.svid-plus-btn{
background:#cfe7ff !important;
color:#1c77ff !important;
border:none !important;
border-radius:50% !important;
font-weight:bold !important;
font-size:10px !important;
width:14px !important;
height:14px !important;
}.auto-calc-popover{
position:fixed;
z-index:210000;
background:#fff;
border-radius:20px;
padding:20px 22px 16px;
min-width:270px;
max-width:340px;
font-family:'Inter', sans-serif;
animation:acpFadeIn 0.18s cubic-bezier(0.4,0,0.2,1);
}@keyframes acpFadeIn{
from{opacity:0;transform:translateY(-6px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}.auto-calc-popover-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
}.auto-calc-popover-title{
font-weight:800;
font-size:13px;
color:#0f172a;
display:flex;
align-items:center;
gap:6px;
}.auto-calc-popover-title .acp-star-icon{color:#f59e0b;font-size:15px}.auto-calc-popover-close{
background:none;border:none;cursor:pointer;
color:#94a3b8;font-size:18px;line-height:1;
padding:0 2px;border-radius:6px;transition:color 0.15s;
}.auto-calc-popover-close:hover{color:#0f172a}.auto-calc-grade-area{
display:flex;align-items:center;gap:14px;margin-bottom:14px;
}.auto-calc-grade-circle{
width:64px;height:64px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:28px;font-weight:900;flex-shrink:0;
border:3px solid transparent;transition:transform 0.15s;
}.auto-calc-grade-circle.grade-10-12{background:#dcfce7;color:#15803d;border-color:#86efac}.auto-calc-grade-circle.grade-7-9{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.auto-calc-grade-circle.grade-4-6{background:#fef9c3;color:#a16207;border-color:#fde047}.auto-calc-grade-circle.grade-1-3{background:#fee2e2;color:#dc2626;border-color:#fca5a5}.auto-calc-grade-circle.grade-none{background:#f1f5f9;color:#64748b;border-color:#e2e8f0;font-size:14px}.auto-calc-grade-label{font-size:12px;color:#64748b;font-weight:600;line-height:1.4}.auto-calc-grade-label strong{display:block;font-size:14px;color:#0f172a;font-weight:800;margin-bottom:2px}.auto-calc-details-toggle{
background:none;border:none;cursor:pointer;font-size:12px;color:#1c77ff;
font-weight:700;padding:0;display:flex;align-items:center;gap:5px;
margin-bottom:8px;text-align:left;transition:opacity 0.15s;
}.auto-calc-details-toggle:hover{opacity:0.75}.auto-calc-details-toggle .acp-chevron{display:inline-block;transition:transform 0.2s;font-style:normal;font-size:10px}.auto-calc-details-toggle.open .acp-chevron{transform:rotate(180deg)}.auto-calc-details-body{
display:none;background:#f8fafc;border-radius:10px;padding:10px 12px;
margin-bottom:10px;max-height:180px;overflow-y:auto;
}.auto-calc-details-body.open{display:block}.auto-calc-details-body .acp-row{
display:flex;justify-content:space-between;font-size:11.5px;
color:#475569;font-weight:600;padding:3px 0;border-bottom:1px solid #e2e8f0;
}.auto-calc-details-body .acp-row:last-child{border-bottom:none}.auto-calc-details-body .acp-row .acp-col-name{color:#64748b;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auto-calc-details-body .acp-row .acp-col-grade{font-weight:800;color:#0f172a}.auto-calc-details-body .acp-total{font-size:12px;font-weight:800;color:#0f172a;margin-top:6px;text-align:right}.auto-calc-no-grades{font-size:12px;color:#ef4444;font-weight:700;text-align:center;padding:8px 0}.auto-calc-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}.auto-calc-actions .btn-apply{padding:8px 16px;border-radius:10px;font-size:13px;font-weight:700}.auto-calc-actions .btn-secondary{padding:8px 12px;border-radius:10px;font-size:13px;font-weight:700}.acct-for-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.acct-for-pill{
display:inline-flex;align-items:center;gap:6px;
padding:7px 13px;border-radius:999px;border:2px solid #e2e8f0;
background:#f8fafc;font-size:12px;font-weight:700;color:#475569;
cursor:pointer;transition:background-color 0.18s ease, transform 0.18s ease;user-select:none;
}.acct-for-pill:hover{border-color:#93c5fd;color:#1d4ed8;background:#eff6ff}.acct-for-pill.selected{border-color:#1c77ff;background:#eff6ff;color:#1c77ff}.acct-for-pill .pill-dot{
width:10px;height:10px;border-radius:50%;border:2px solid currentColor;
flex-shrink:0;display:inline-block;transition:background 0.18s;
}.acct-for-pill.selected .pill-dot{background:#1c77ff;border-color:#1c77ff}.auto-assign-banner{
display:none;
align-items:center;
justify-content:space-between;
background:#0084FF;
border-radius:12px;
padding:10px 20px;
color:#fff;
margin-bottom:12px;
font-family:'Inter', sans-serif;
}.auto-assign-banner-title{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
font-size:14px;
}.auto-assign-banner-info-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
background:#FFC107;
color:#fff;
border-radius:50%;
font-size:11px;
font-weight:900;
cursor:pointer;
}.auto-assign-banner-actions{
display:flex;
align-items:center;
gap:12px;
}.auto-assign-btn-exit{
background:transparent;
border:1px solid rgba(255, 255, 255, 0.6);
color:#fff;
padding:8px 20px;
border-radius:20px;
font-weight:700;
cursor:pointer;
transition:all 0.2s;
}.auto-assign-btn-exit:hover{
background:rgba(255, 255, 255, 0.1);
}.auto-assign-btn-submit{
background:#fff;
border:none;
color:#000;
padding:8px 20px;
border-radius:20px;
font-weight:700;
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
transition:all 0.2s;
}.auto-assign-btn-submit:hover{
background:#f0f0f0;
}.auto-assign-btn-submit-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
background:#0084FF;
color:#fff;
border-radius:50%;
font-size:11px;
}.active-auto-assign-col{
background-color:#EAF2FF !important;
}th.active-auto-assign-col{
background-color:#EAF2FF !important;
color:#0084FF !important;
font-weight:800 !important;
}.recommended-grade-badge{
border:none;
cursor:pointer;
font-size:14px;
font-weight:800;
padding:4px 12px;
border-radius:12px;
transition:transform 0.1s;
}.recommended-grade-badge:hover{
transform:scale(1.05);
}.recommended-grade-badge.grade-10-12{background:#dcfce7;color:#15803d;border:1.5px solid #86efac}.recommended-grade-badge.grade-7-9{background:#dbeafe;color:#1d4ed8;border:1.5px solid #93c5fd}.recommended-grade-badge.grade-4-6{background:#fef9c3;color:#a16207;border:1.5px solid #fde047}.recommended-grade-badge.grade-1-3{background:#fee2e2;color:#dc2626;border:1.5px solid #fca5a5}.recommended-grade-badge.grade-none{background:#f1f5f9;color:#64748b;border:1.5px solid #e2e8f0}
.schedule-shell{
--schedule-time-column:40px;
--schedule-day-min:0px;
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
}#schedule .schedule-shell{
margin-left:0;
margin-right:0;
width:100% !important;
max-width:none !important;
box-sizing:border-box !important;
display:flex;
flex-direction:column;
height:calc(108.69565vh - 140px);
min-height:0;
overflow:hidden;
}#schedule .schedule-table-body{
overflow:auto;
flex:1 1 auto;
min-height:0;
max-height:none;
box-sizing:border-box;
padding:2.5vh 1.2vh;
}.schedule-table-header{
flex:0 0 auto;
width:100%;
box-sizing:border-box;
padding:0 1.2vh;
overflow:hidden;
}.schedule-table-header-grid{
display:grid;
grid-template-columns:var(--schedule-time-column) repeat(7, minmax(var(--schedule-day-min), 1fr));
gap:0;
margin:0;
width:100%;
max-width:none;
padding:0;
border-left:1px solid transparent;
border-right:1px solid transparent;
box-sizing:border-box;
}.schedule-table-header-grid .schedule-header-cell:first-child{
border-right:1px solid rgba(15, 23, 42, 0.06);
}.schedule-table-header-grid .schedule-header-cell:last-child{
border-right:1px solid rgba(15, 23, 42, 0.06);
}.schedule-table-body-inner{
width:100%;
min-width:100%;
box-sizing:border-box;
}.schedule-grid{
display:grid;
grid-template-columns:var(--schedule-time-column) repeat(7, minmax(var(--schedule-day-min), 1fr));
grid-auto-rows:1px;
gap:0;
position:relative;
background:#fff;
border-radius:16px;
padding:0;
border:1px solid rgba(0, 0, 0, 0.05);
margin:0;
width:100%;
max-width:none;
box-sizing:border-box;
}.schedule-lesson-card{
background:#e9f2ff !important;
border-left:3px solid #2563eb !important;
border-radius:4px;
padding:10px 6px;
margin:0;
width:100%;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:flex-start;
gap:10px;
font-size:12px !important;
overflow:hidden;
transition:background-color 0.2s ease, border-color 0.2s ease;
cursor:pointer;
z-index:10;
}.schedule-lesson-card {
font-size:12px !important;
line-height:1.2 !important;
text-transform:none !important;
font-weight:600 !important;
contain:layout style;
}.schedule-lesson-card i{
font-weight:900 !important;
color:#000 !important;
}.schedule-lesson-card::before{
display:none !important;
}.schedule-lesson-class{
color:#0f172a;
margin:0;
}.schedule-lesson-subject{
color:#0f172a;
margin:0;
}.schedule-lesson-teacher{
color:#0f172a;
display:flex;
align-items:center;
gap:8px;
margin-top:auto;
padding-top:0;
font-size:8px !important;
}.schedule-lesson-teacher i{
color:#0f172a;
font-size:10px !important;
}html[data-page=\"schedule\"] .main-content{
overflow:hidden !important;
}select.schedule-pill{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba%28255, 255, 255, 0.8%29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:12px;
padding-right:32px !important;
padding-left:16px !important;
height:34px;
line-height:32px;
border:1px solid rgba(255, 255, 255, 0.18);
border-radius:999px;
background-color:rgba(255, 255, 255, 0.1);
color:rgba(255, 255, 255, 0.95);
font-weight:700;
font-size:13px;
cursor:pointer;
outline:none;
box-sizing:border-box;
transition:background-color 0.15s ease, border-color 0.15s ease;
}select.schedule-pill:hover{
background-color:rgba(255, 255, 255, 0.15);
border-color:rgba(255, 255, 255, 0.28);
}select.schedule-pill option{
color:#0f172a;
background-color:#ffffff;
}.schedule-card-header{
flex:0 0 auto;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
padding:8px 12px;
border-bottom:1px solid rgba(15, 23, 42, 0.08);
background:#ffffff;
}.schedule-period-wrapper{
display:flex;
justify-content:flex-end;
}.schedule-today-header-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto !important;
margin:0 !important;
justify-self:start !important;
height:28px;
padding:0 10px;
font-size:11px;
font-weight:700;
color:#1c77ff;
background:#ffffff;
border:1.2px solid #1c77ff;
border-radius:999px;
cursor:pointer;
box-sizing:border-box;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space:nowrap;
}.schedule-today-header-btn:hover{
background:rgba(28, 119, 255, 0.05);
}.schedule-today-header-btn.active{
border-width:2px;
font-weight:800;
background:#ffffff;
color:#1c77ff;
cursor:default;
}.schedule-date-display{
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
font-size:14px;
font-weight:800;
color:#0f172a;
user-select:none;
padding:6px 12px;
border-radius:999px;
transition:background 0.15s ease;
}.schedule-date-display:hover{
background:rgba(15, 23, 42, 0.05);
}.schedule-nav-arrow-btn{
background:none;
border:none;
cursor:pointer;
color:#1c77ff;
padding:6px 10px;
font-size:14px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
transition:background 0.15s ease;
}.schedule-nav-arrow-btn:hover{
background:rgba(28, 119, 255, 0.08);
}.mriia-col-week-picker{
left:50%;
top:calc(100% + 10px);
transform:translateX(-50%);
}.mriia-col-week-picker .schedule-week-picker-day:disabled{
opacity:0.2;
cursor:not-allowed;
background:rgba(255, 255, 255, 0.08);
}.mriia-col-week-picker .schedule-week-picker-day.is-current-date{
outline:2px solid #fff;
outline-offset:1px;
}.mriia-col-week-picker .schedule-week-picker-day.is-selected:not(:disabled){
background:rgba(255, 255, 255, 0.92);
color:#1c77ff;
}.schedule-period-select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba%2815, 23, 42, 0.7%29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:10px;
padding-right:28px !important;
padding-left:14px !important;
height:34px;
line-height:32px;
border:1px solid rgba(15, 23, 42, 0.12);
border-radius:999px;
font-weight:700;
font-size:13px;
color:#0f172a;
background-color:#ffffff;
cursor:pointer;
box-sizing:border-box;
outline:none;
transition:background-color 0.15s ease, border-color 0.15s ease;
}.schedule-period-select:hover{
background-color:rgba(15, 23, 42, 0.02);
border-color:rgba(15, 23, 42, 0.2);
}.schedule-header-cell{
padding:4px 8px !important;
min-height:44px !important;
}.schedule-day-title{
font-size:12px;
color:rgba(15, 23, 42, 0.55);
font-weight:800;
text-transform:none;
display:flex;
flex-direction:column !important;
align-items:center;
gap:2px !important;
}.schedule-day-title .dow-label{
font-size:12px;
font-weight:900;
color:rgba(15, 23, 42, 0.75);
transition:color 0.15s ease;
}.schedule-day-title.is-today .dow-label{
color:#1c77ff !important;
}.schedule-date-pill{
display:inline-flex;
align-items:center;
justify-content:center;
height:22px;
padding:0 10px;
border-radius:999px;
background:transparent !important;
color:#0f172a !important;
font-weight:600;
font-size:13px;
width:max-content;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}.schedule-date-pill.is-today{
background:#1c77ff !important;
color:#ffffff !important;
}#schedule-view-mode.schedule-pill{
min-width:140px !important;
}#schedule-view-value.schedule-pill{
min-width:180px !important;
}
.schedule-day-overlay {
pointer-events: auto;
cursor: cell;
z-index: 2 !important;
background: transparent;
}
.schedule-lesson-card {
position: relative;
z-index: 10;
}
.schedule-time-label {
font-size: 10px;
color: rgba(15,23,42,0.35);
font-weight: 500;
display: flex;
align-items: flex-start;
padding-top: 2px;
user-select: none;
}
.schedule-grid-line.hour {
border-top: 1px solid rgba(15,23,42,0.07);
grid-column: 2 / -1;
pointer-events: none;
}
#schedule {
background: linear-gradient(180deg, #0f68f8 0%, #287df0 58%, #0f68f8 100%);
min-height: 100%;
padding-bottom: 24px;
}
#schedule .section-header {
display: flex !important;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 0;
margin-top: -8px;
padding: 0 8px 4px;
}
#schedule .schedule-section-heading {
display: none !important;
}
#schedule .schedule-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
#schedule .schedule-section-icon svg {
width: 17px;
height: 17px;
stroke: currentColor;
}
#schedule .schedule-tabs {
display: flex;
align-items: center;
gap: 20px;
min-height: 38px;
border: 0;
margin-bottom: 0;
padding: 0;
}
#schedule .schedule-tab {
position: relative;
min-height: 34px;
padding: 6px 0;
border: 0;
border-radius: 0;
background: transparent;
color: rgba(255,255,255,0.72);
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: color 0.15s ease;
}
#schedule .schedule-tab:hover,
#schedule .schedule-tab.active {
color: #ffffff;
}
#schedule .schedule-tab.active::after {
display: none;
}
#schedule .schedule-tab.active {
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 8px;
}
#schedule .schedule-tab:first-child {
padding-left: 0;
}
#schedule .schedule-frame {
padding: 0 8px 16px;
margin-top: -6px !important;
}
#schedule .schedule-top-controls {
margin-bottom: 14px !important;
}
#schedule .schedule-pill {
min-width: 160px;
height: 38px;
border-radius: 8px;
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.26);
}
#schedule .schedule-zoom .scale-pill {
border-radius: 999px;
background: rgba(255,255,255,0.16);
padding: 4px;
}
#schedule .schedule-zoom .scale-option {
min-width: 54px;
height: 30px;
border-radius: 999px;
}
#schedule .schedule-zoom .scale-option.active {
background: #ffffff;
color: #1767d8;
}
#schedule .schedule-shell {
margin: 0 !important;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(10, 57, 133, 0.18);
}
#schedule .schedule-card-header {
min-height: 58px;
padding: 8px 14px;
border-radius: 14px 14px 0 0;
}
#schedule .schedule-table-body {
padding: 0;
display: flex;
align-items: stretch;
}
#schedule .schedule-table-body-inner {
display: flex;
align-items: stretch;
width: 100%;
min-width: 100%;
min-height: 100%;
}
#schedule .schedule-table-header {
padding: 0 14px;
}
#schedule .schedule-grid {
grid-template-rows: none !important;
grid-auto-rows: 0.2px;
flex: 1 0 auto;
min-width: 100%;
min-height: 100%;
border-radius: 8px;
border-color: rgba(15,23,42,0.08);
}
#schedule .schedule-grid-line {
border-top: 1px dashed rgba(15,23,42,0.07);
grid-column: 2 / -1;
pointer-events: none;
}
#schedule .schedule-grid-line.hour {
border-top-style: solid;
border-top-color: rgba(15,23,42,0.14);
}
#schedule .schedule-time-label {
color: rgba(15,23,42,0.5);
font-size: 11px;
font-weight: 600;
justify-content: center;
}
#schedule .schedule-lesson-card {
background: #f1f3f7 !important;
border: 1px solid rgba(15,23,42,0.06) !important;
border-left: 1px solid rgba(15,23,42,0.06) !important;
border-radius: 12px;
padding: 8px 10px;
gap: 5px;
justify-content: space-between;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
#schedule .schedule-lesson-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 20px;
}
#schedule .schedule-lesson-card.has-schedule-group .schedule-lesson-meta {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 4px;
}
#schedule .schedule-lesson-card.has-schedule-group {
padding-left: 5px;
}
#schedule .schedule-lesson-card.has-schedule-group .schedule-lesson-bubbles {
width: auto;
max-width: 100%;
}
#schedule .schedule-lesson-card.has-schedule-group .schedule-lesson-class {
width: auto;
max-width: 100%;
justify-content: center;
font-size: 9px !important;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
#schedule .schedule-lesson-card.has-schedule-group .schedule-lesson-number {
padding-left: 2px;
}
#schedule .schedule-lesson-class {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
padding: 2px 7px;
border-radius: 999px;
font-size: 11px !important;
font-weight: 800 !important;
}
#schedule .schedule-lesson-bubbles {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
#schedule .schedule-lesson-group {
display: inline-flex;
align-items: center;
min-height: 20px;
max-width: 120px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.18);
color: #111111;
margin-left: 5px;
font-size: 9px !important;
font-weight: 800 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#schedule .schedule-lesson-number {
color: rgba(15,23,42,0.6);
font-size: 9px;
font-weight: 700;
white-space: nowrap;
}
#schedule .schedule-lesson-subject {
margin-top: auto;
color: #111827;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#schedule .schedule-lesson-teacher {
display: none;
}
#modal-schedule-lesson .schedule-popover-chip {
background: #edf5ff;
border-color: #cfe3ff;
color: #234d92;
box-shadow: inset 0 0 0 1px rgba(35, 77, 146, 0.06);
}
#modal-schedule-lesson .schedule-popover-chip i,
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user,
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user svg,
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user path,
#modal-schedule-lesson .schedule-popover-chip i.fa-solid.fa-user * {
color: inherit !important;
fill: currentColor !important;
stroke: currentColor !important;
}
#modal-schedule-lesson .schedule-popover-chip span {
color: inherit;
}
#modal-schedule-lesson .schedule-popover-linkrow i {
width: 26px;
min-width: 26px;
text-align: center;
font-size: 19px;
color: #1c77ff;
transform: scaleX(1.25);
}
@media (max-width: 900px) {
#schedule .schedule-shell {
--schedule-day-min: 140px;
}
#schedule .schedule-table-header,
#schedule .schedule-table-body-inner {
min-width: calc(var(--schedule-time-column) + (var(--schedule-day-min) * 7));
}
#schedule .schedule-tabs {
gap: 0;
overflow-x: auto;
}
#schedule .schedule-top-controls {
align-items: stretch !important;
flex-direction: column;
}
#schedule .schedule-left-controls,
#schedule .schedule-inline-menu {
flex-wrap: wrap;
}
#schedule .schedule-zoom {
justify-content: space-between;
}
#schedule .schedule-pill {
flex: 1 1 140px;
}
}
#gradebook-view .gb-wrapper,
#gradebook-view .gb-zoom-surface,
#gradebook-view .gb-zoom-inner {
background-color: #f8fbff !important;
background-image:
linear-gradient(to right, rgba(28, 119, 255, 0.12) 1px, transparent 1px),
linear-gradient(to bottom, rgba(28, 119, 255, 0.12) 1px, transparent 1px) !important;
background-size: 62px 48px !important;
background-position: 0 0 !important;
}
#gradebook-view .planning-table-wrap,
#gradebook-view .planning-grid-scroll {
background-color: #ffffff !important;
background-image: none !important;
}
#gradebook-view .gb-table,
#gradebook-view #gb-table,
#gradebook-view #att-table,
#gradebook-view .gb-table tbody td {
background-color: #ffffff !important;
background-image: none !important;
}
#gradebook-view .gb-table tbody tr:hover td:not(.gb-sticky-col-2):not(.gb-sticky-col):not(.gb-sticky-avg) {
background-color: rgba(28, 119, 255, 0.05) !important;
}
#gradebook-view .gb-table thead th:not(.gb-sticky-col-2):not(.gb-sticky-col):not(.gb-sticky-avg) {
background-color: #f8fbff !important;
}
#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg,
#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg {
background-color: #ffffff !important;
}
#gradebook-view #gb-table th.gb-sticky-col,
#gradebook-view #gb-table td.gb-sticky-col,
#gradebook-view #gb-table th.gb-sticky-col-2,
#gradebook-view #gb-table td.gb-sticky-col-2,
#gradebook-view #gb-table th.gb-sticky-avg,
#gradebook-view #gb-table td.gb-sticky-avg {
border-left: 0 !important;
border-right: 0 !important;
}
#gradebook-view #gb-table th.gb-sticky-col:first-of-type,
#gradebook-view #gb-table td.gb-sticky-col:first-of-type {
border-left: 1px solid rgba(229, 231, 235, 0.95) !important;
}
#gradebook-view #gb-table th.gb-sticky-avg:last-of-type,
#gradebook-view #gb-table td.gb-sticky-avg:last-of-type {
border-right: 1px solid rgba(229, 231, 235, 0.95) !important;
}
#gradebook-view .gb-wrapper,
#gradebook-view .gb-header-content-wrap {
overflow: clip !important;
}
#gradebook-view #gb-table th.gb-sticky-col,
#gradebook-view #gb-table td.gb-sticky-col {
position: sticky !important;
left: 0 !important;
}
#gradebook-view #gb-table th.gb-sticky-col-2,
#gradebook-view #gb-table td.gb-sticky-col-2 {
position: sticky !important;
left: var(--gb-sticky-col-1-w) !important;
}
#gradebook-view #gb-table th.gb-sticky-avg,
#gradebook-view #gb-table td.gb-sticky-avg {
position: sticky !important;
left: calc(var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)) !important;
border-left: 1px solid rgba(229, 231, 235, 0.95) !important;
border-right: 1px solid rgba(229, 231, 235, 0.95) !important;
}
#gradebook-view #tab-planning,
#gradebook-view #tab-homework {
display: none !important;
}
#gradebook-view.tab-planning-active #tab-planning,
#gradebook-view:not(.tab-homework-active) .gb-wrapper.planning-tab-active #tab-planning,
.gb-wrapper.tab-planning-active #tab-planning {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
#gradebook-view.tab-homework-active #tab-homework,
.gb-wrapper.tab-homework-active #tab-homework {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
#gradebook-view.tab-planning-active #tab-homework,
.gb-wrapper.planning-tab-active #tab-homework {
display: none !important;
}
#gradebook-view.tab-homework-active #tab-planning,
.gb-wrapper.tab-homework-active #tab-planning {
display: none !important;
}
.gb-planning-right-actions {
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: auto;
margin-right: 20px;
margin-top: -4px;
}
.gb-circle-flag-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.gb-circle-flag-btn:hover {
background: rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
}
.btn-ktp-pill {
background: #ffffff !important;
color: #1c77ff !important;
border: none !important;
border-radius: 999px !important;
padding: 8px 22px !important;
font-weight: 700 !important;
font-size: 13.5px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
transition: all 0.2s ease !important;
}
.btn-ktp-pill:hover {
background: #f0f6ff !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
#gradebook-view #tab-planning,
#gradebook-view #tab-homework {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
#gradebook-view #tab-planning .planning-table-wrap,
#gradebook-view #tab-homework .planning-table-wrap {
background: #ffffff !important;
border-radius: 0 !important;
overflow: hidden !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
.planning-ktp-banner {
background: #edf5ff !important;
border-radius: 14px !important;
padding: 14px 20px !important;
margin: 16px 20px 10px 20px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
}
.planning-ktp-banner-left {
display: flex !important;
align-items: center !important;
gap: 16px !important;
min-width: 0 !important;
}
.planning-ktp-mascot {
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.planning-ktp-banner-text {
min-width: 0 !important;
}
.planning-ktp-banner-title {
font-weight: 700 !important;
font-size: 15px !important;
color: #0f172a !important;
margin-bottom: 2px !important;
}
.planning-ktp-banner-sub {
font-size: 13px !important;
color: #475569 !important;
line-height: 1.4 !important;
}
.planning-ktp-banner-right {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-shrink: 0 !important;
}
.planning-ktp-banner-btn {
background: #1c77ff !important;
color: #ffffff !important;
border: none !important;
border-radius: 999px !important;
padding: 8px 18px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
transition: all 0.15s ease !important;
}
.planning-ktp-banner-btn:hover {
background: #0056d6 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(28, 119, 255, 0.25) !important;
}
.planning-ktp-banner-close {
background: #cbd5e1 !important;
border: 1px solid #94a3b8 !important;
color: #475569 !important;
font-size: 20px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
transition: color 0.15s ease, background 0.15s ease !important;
}
.planning-ktp-banner-close span {
color: #475569 !important;
display: block !important;
transform: translateY(-1px) !important;
}
.planning-ktp-banner-close:hover {
color: #1e293b !important;
background: #b8c4d1 !important;
}
.planning-ktp-banner-close:hover span {
color: #1e293b !important;
}
#gradebook-view #tab-planning .planning-grid-head,
#gradebook-view #tab-homework .planning-grid-head {
display: grid !important;
grid-template-columns: 44px 140px 1fr 1fr 36px !important;
gap: 16px !important;
padding: 10px 16px !important;
width: 100% !important;
box-sizing: border-box !important;
align-items: center !important;
color: #0f172a !important;
font-size: 13.5px !important;
font-weight: 700 !important;
border-bottom: 1px solid #f1f5f9 !important;
background: #ffffff !important;
}
#gradebook-view #tab-planning .planning-grid-head .head-num,
#gradebook-view #tab-homework .planning-grid-head .head-num,
#gradebook-view #tab-planning .planning-grid-head > div:first-child,
#gradebook-view #tab-homework .planning-grid-head > div:first-child {
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}
#gradebook-view #tab-planning .planning-grid-scroll,
#gradebook-view #tab-homework .planning-grid-scroll {
overflow-y: auto !important;
flex: 1 1 auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
#gradebook-view #tab-planning .planning-grid-body,
#gradebook-view #tab-homework .planning-grid-body {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 12px 20px 32px 20px !important;
width: 100% !important;
box-sizing: border-box !important;
background: #ffffff !important;
}
#gradebook-view #tab-planning .planning-row,
#gradebook-view #tab-homework .planning-row {
display: grid !important;
grid-template-columns: 44px 140px 1fr 1fr 36px !important;
gap: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
align-items: center !important;
padding: 2px 0 !important;
transition: background 0.15s ease !important;
}
#gradebook-view #tab-planning .planning-num,
#gradebook-view #tab-homework .planning-num {
font-weight: 700 !important;
font-size: 14px !important;
color: #0f172a !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
transition: color 0.15s ease !important;
}
#gradebook-view #tab-planning .planning-datecell,
#gradebook-view #tab-homework .planning-datecell {
cursor: pointer !important;
line-height: 1.25 !important;
}
#gradebook-view #tab-planning .planning-datecell .date-top,
#gradebook-view #tab-homework .planning-datecell .date-top {
font-size: 14px !important;
font-weight: 700 !important;
color: #0f172a !important;
transition: color 0.15s ease !important;
}
#gradebook-view #tab-planning .planning-datecell .date-sub,
#gradebook-view #tab-homework .planning-datecell .date-sub {
font-size: 12px !important;
font-weight: 500 !important;
color: #94a3b8 !important;
margin-top: 3px !important;
}
#gradebook-view #tab-planning .planning-box,
#gradebook-view #tab-homework .planning-box {
background: #f8fafc !important;
border: 1px solid #eef2f6 !important;
border-radius: 12px !important;
padding: 0 16px !important;
height: 48px !important;
min-height: 48px !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
color: #0f172a !important;
font-size: 13px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
position: relative !important;
}
#gradebook-view #tab-planning .planning-box-text,
#gradebook-view #tab-homework .planning-box-text {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
flex: 1 !important;
}
#gradebook-view #tab-planning .planning-box.placeholder .planning-box-text,
#gradebook-view #tab-homework .planning-box.placeholder .planning-box-text {
color: #94a3b8 !important;
font-weight: 400 !important;
}
#gradebook-view #tab-planning .planning-box:not(.placeholder) .planning-box-text,
#gradebook-view #tab-homework .planning-box:not(.placeholder) .planning-box-text {
color: #0f172a !important;
font-weight: 500 !important;
}
#gradebook-view #tab-planning .planning-box:hover,
#gradebook-view #tab-homework .planning-box:hover,
#gradebook-view #tab-planning .planning-box:focus,
#gradebook-view #tab-homework .planning-box:focus {
border: 1px dashed #2563eb !important;
background: #f8fbff !important;
}
.planning-box-plus {
display: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #1c77ff;
color: #ffffff;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
line-height: 1;
margin-left: 8px;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(28, 119, 255, 0.25);
transition: transform 0.15s ease, background 0.15s ease;
}
.planning-box:hover .planning-box-plus {
display: inline-flex !important;
}
.planning-box-plus:hover {
transform: scale(1.15) !important;
background: #0056d6 !important;
}
#gradebook-view #tab-planning .planning-arrow,
#gradebook-view #tab-homework .planning-arrow {
width: 36px !important;
height: 36px !important;
border: none !important;
background: transparent !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #475569 !important;
font-size: 15px !important;
border-radius: 8px !important;
transition: color 0.15s ease, transform 0.15s ease !important;
}
#gradebook-view #tab-planning .planning-arrow i,
#gradebook-view #tab-homework .planning-arrow i {
color: #475569 !important;
}
#gradebook-view #tab-planning .planning-row:hover .planning-num,
#gradebook-view #tab-homework .planning-row:hover .planning-num {
color: #1c77ff !important;
}
#gradebook-view #tab-planning .planning-row:hover .planning-datecell .date-top,
#gradebook-view #tab-homework .planning-row:hover .planning-datecell .date-top {
color: #1c77ff !important;
}
#gradebook-view #tab-planning .planning-row:hover .planning-arrow,
#gradebook-view #tab-homework .planning-row:hover .planning-arrow,
#gradebook-view #tab-planning .planning-arrow:hover,
#gradebook-view #tab-homework .planning-arrow:hover {
color: #1c77ff !important;
transform: translateX(3px) !important;
}
#gradebook-view #tab-planning.gb-content-planning,
#gradebook-view #tab-homework.gb-content-planning {
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
#gradebook-view.tab-planning-active .gb-wrapper {
background-color: #ffffff !important;
background-image: none !important;
border-radius: 12px !important;
overflow: hidden !important;
}
#gradebook-view.tab-homework-active .gb-wrapper {
background-color: #ffffff !important;
background-image: none !important;
border-radius: 0 !important;
overflow: hidden !important;
}
#gradebook-view #tab-planning,
#gradebook-view #tab-homework {
background-color: #ffffff !important;
background-image: none !important;
}
#gradebook-view #tab-planning .planning-ktp-banner,
#gradebook-view #tab-homework .planning-ktp-banner {
margin: 12px 16px 8px 16px !important;
}
#gradebook-view #tab-planning .planning-grid-head,
#gradebook-view #tab-homework .planning-grid-head {
padding: 10px 16px !important;
}
#gradebook-view #tab-planning .planning-grid-body,
#gradebook-view #tab-homework .planning-grid-body {
padding: 10px 16px 24px 16px !important;
}
#gradebook-view #tab-planning .planning-row,
#gradebook-view #tab-homework .planning-row {
align-items: start !important;
}
#gradebook-view #tab-planning .planning-box,
#gradebook-view #tab-homework .planning-box {
min-width: 0 !important;
height: auto !important;
min-height: 48px !important;
align-items: flex-start !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
#gradebook-view #tab-planning .planning-box-text,
#gradebook-view #tab-homework .planning-box-text {
min-width: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
line-height: 1.35 !important;
}
.mriia-schedule-spinner {
width: 46px;
height: 46px;
border-radius: 50%;
border: 4px solid rgba(28, 119, 255, 0.18);
border-top-color: #1c77ff;
animation: mriia-schedule-spin 0.85s linear infinite;
}
.mriia-schedule-loader-text {
color: #5b6b85;
}
.mriia-schedule-loader-text {
display: none !important;
}
@keyframes mriia-schedule-spin {
to { transform: rotate(360deg); }
}
.mriia-spinner-centered {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
z-index: 99999;
pointer-events: none;
}
.mriia-spinner-centered .mriia-schedule-spinner {
background: #ffffff;
box-shadow: 0 6px 24px rgba(10, 57, 133, 0.2);
}
#gradebook-view #gb-table td.gb-cell.is-active,
#gradebook-view #gb-table td.gb-cell.is-active:hover,
#gradebook-view #gb-table td.gb-cell.active-cell,
#gradebook-view #gb-table td.gb-cell.active-cell:hover {
background: #ffffff !important;
border-radius: 10px !important;
outline: 2px solid #1c77ff !important;
outline-offset: -2px !important;
box-shadow: 0 0 0 2px rgba(28, 119, 255, 0.18) !important;
z-index: 6 !important;
}
#gradebook-view .gb-table tbody td:not(.gb-sticky-col),
#gradebook-view .gb-table .student-name-text,
#gradebook-view .gb-table td.gb-sticky-avg,
#gradebook-view .gb-table td.gb-avg-col,
#gradebook-view .gb-table td.gb-cell-plain {
font-size: 14.5px !important;
}
#gradebook-view .gb-table .gb-avg-label {
font-size: 11px !important;
}
#gradebook-view .gb-table thead th.gb-header-clickable,
#gradebook-view .gb-table thead th.date-clickable {
font-size: 13.5px !important;
}
#gradebook-view .gb-table thead th.gb-subtype-header {
font-size: 13.5px !important;
}
#gradebook-view #gb-table thead tr:nth-child(1) th.gb-sticky-col-2 .gb-students-title,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2 .gb-students-title,
#gradebook-view #gb-table thead tr:nth-child(2) th.gb-sticky-col-2 .gb-students-subtitle,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col-2 .gb-students-subtitle {
font-size: 13.5px !important;
}
#gradebook-view .gb-table .student-name-text,
#gradebook-view .gb-table td.gb-sticky-avg,
#gradebook-view .gb-table td.gb-avg-col,
#gradebook-view .gb-table td.gb-cell-plain,
#gradebook-view .gb-table .gb-students-title,
#gradebook-view .gb-table .gb-students-subtitle,
#gradebook-view .gb-table .gb-avg-label,
#gradebook-view .gb-table tbody td.gb-cell,
#gradebook-view .gb-table tbody td.gb-sticky-col-2 {
color: #0f172a !important;
}
#gradebook-view .gb-tabs-row {
top: 0px !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
padding-top: 2px !important;
padding-bottom: 14px !important;
}
#gradebook-view.has-admin-subtitle .gb-tabs-row {
margin-top: 0 !important;
}
#gradebook-view .gb-tab {
padding-top: 5px !important;
padding-bottom: 5px !important;
height: 26px !important;
min-height: 26px !important;
}
#gradebook-view:not(.no-tabs):not(.has-admin-subtitle) .gb-wrapper {
margin-top: 0px !important;
height: calc(108.69565vh - 106px) !important;
max-height: calc(108.69565vh - 106px) !important;
}
:root {
--ux-blue: var(--primary-blue, #0f68f8);
--ux-blue-dark: #0b56d1;
--ux-text: #172033;
--ux-muted: #64748b;
--ux-border: #dbe4f0;
--ux-surface: #ffffff;
--ux-surface-muted: #f8fafc;
--ux-danger: #c62828;
--ux-danger-surface: #fff4f4;
--ux-radius: 14px;
--ux-control-height: 42px;
--ux-shadow: 0 18px 50px rgba(15, 35, 70, 0.18);
}
.mriia-skeleton-item {
min-height: 96px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 9px;
padding: 16px;
overflow: hidden;
border: 1px solid rgba(219, 228, 240, 0.72);
border-radius: 14px;
background: rgba(255, 255, 255, 0.46);
opacity: 0.78;
}
.mriia-skeleton-item span {
display: block;
height: 13px;
width: 72%;
border-radius: 5px;
background: linear-gradient(90deg, rgba(224, 234, 245, 0.44) 25%, rgba(255, 255, 255, 0.72) 50%, rgba(224, 234, 245, 0.44) 75%);
background-size: 240% 100%;
animation: journal-skeleton-shimmer 1.25s ease-in-out infinite;
}
.mriia-skeleton-item span:first-child {
width: 38%;
height: 24px;
}
.mriia-skeleton-item span:last-child {
width: 52%;
height: 11px;
}
.mriia-skeleton-row {
min-height: 48px;
border-radius: 8px;
}
.mriia-skeleton-list {
display: grid;
gap: 12px;
}
[data-viewport-managed="true"] {
content-visibility: auto;
contain: layout style;
contain-intrinsic-size: auto 140px;
}
[data-viewport-managed="true"][data-viewport-offscreen] {
content-visibility: hidden;
contain-intrinsic-size: auto 140px;
}
@media (prefers-reduced-motion: reduce) {
.mriia-skeleton-item span {
animation: none;
}
}
.btn-primary,
.btn-submit,
.btn-secondary,
.btn-cancel,
.btn-danger,
.btn-apply,
.button-mriya,
.action-btn {
min-height: var(--ux-control-height);
border: 1px solid transparent;
border-radius: 10px !important;
padding: 10px 16px;
font: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.modal-window .btn-primary,
.modal-window .btn-submit,
.modal-window .btn-secondary,
.modal-window .btn-cancel,
.modal-window .btn-danger,
.modal-window .btn-apply {
border-radius: 10px !important;
padding: 10px 16px !important;
border-width: 1px !important;
border-style: solid !important;
}
.btn-primary,
.btn-submit,
.btn-apply,
.button-mriya {
color: #fff;
background: var(--ux-blue);
border-color: var(--ux-blue);
}
.modal-window .btn-primary,
.modal-window .btn-submit,
.modal-window .btn-apply {
border-color: var(--ux-blue) !important;
}
.btn-primary:hover,
.btn-submit:hover,
.btn-apply:hover,
.button-mriya:hover {
background: var(--ux-blue-dark);
border-color: var(--ux-blue-dark);
}
.btn-secondary,
.btn-cancel {
color: var(--ux-text);
background: var(--ux-surface);
border-color: var(--ux-border);
}
.modal-window .btn-secondary,
.modal-window .btn-cancel {
border-color: var(--ux-border) !important;
}
.btn-secondary:hover,
.btn-cancel:hover {
background: var(--ux-surface-muted);
border-color: #b9c8da;
}
.btn-danger {
color: var(--ux-danger);
background: var(--ux-danger-surface);
border-color: #f2c4c4;
}
.btn-danger:hover {
background: #ffe7e7;
border-color: #e7a7a7;
}
.btn-primary:active,
.btn-submit:active,
.btn-secondary:active,
.btn-cancel:active,
.btn-danger:active,
.btn-apply:active,
.button-mriya:active,
.action-btn:active {
transform: translateY(1px);
}
.btn-primary:focus-visible,
.btn-submit:focus-visible,
.btn-secondary:focus-visible,
.btn-cancel:focus-visible,
.btn-danger:focus-visible,
.btn-apply:focus-visible,
.button-mriya:focus-visible,
.action-btn:focus-visible,
.modal-window .close-btn:focus-visible {
outline: 3px solid rgba(15, 104, 248, 0.28) !important;
outline-offset: 2px;
}
.btn-primary:disabled,
.btn-submit:disabled,
.btn-secondary:disabled,
.btn-cancel:disabled,
.btn-danger:disabled,
.btn-apply:disabled,
.button-mriya:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.modal-overlay {
background: rgba(15, 23, 42, 0.48) !important;
padding: 20px;
}
.modal-window {
width: min(100%, 640px);
max-height: min(88vh, 820px);
overflow: auto;
border: 1px solid rgba(219, 228, 240, 0.9);
border-radius: var(--ux-radius) !important;
background: var(--ux-surface);
box-shadow: var(--ux-shadow);
color: var(--ux-text);
}
.modal-overlay > .modal {
max-width: min(100%, 640px);
max-height: min(88vh, 820px);
overflow: auto;
border: 1px solid rgba(219, 228, 240, 0.9);
border-radius: var(--ux-radius) !important;
background: var(--ux-surface);
box-shadow: var(--ux-shadow);
color: var(--ux-text);
}
.mriia-modal-backdrop {
background: rgba(15, 23, 42, 0.48) !important;
padding: 20px;
}
.mriia-modal-backdrop.open {
animation: uxModalFadeIn 180ms ease-out both;
}
.mriia-modal {
width: min(100%, 640px);
max-width: min(100%, 640px);
max-height: min(88vh, 820px);
overflow: auto;
border: 1px solid rgba(219, 228, 240, 0.9);
border-radius: var(--ux-radius) !important;
background: var(--ux-surface);
box-shadow: var(--ux-shadow);
color: var(--ux-text);
animation: uxModalPopIn 220ms cubic-bezier(.2, .8, .2, 1) both;
}
.feedback-overlay {
background: rgba(15, 23, 42, 0.48) !important;
}
.feedback-modal {
border: 1px solid rgba(219, 228, 240, 0.9);
border-radius: var(--ux-radius) !important;
box-shadow: var(--ux-shadow);
color: var(--ux-text);
animation: uxFeedbackModalPopIn 220ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes uxModalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes uxModalPopIn {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes uxFeedbackModalPopIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-overlay.open .modal-window {
animation: uxModalPopIn 220ms cubic-bezier(.2, .8, .2, 1) both;
}
.modal-overlay.open {
animation: uxModalFadeIn 180ms ease-out both;
}
.modal-window .modal-header {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid var(--ux-border);
}
.modal-window .modal-title {
color: var(--ux-text);
font-size: 18px;
font-weight: 750;
line-height: 1.25;
}
.modal-window .modal-actions,
.modal-window .modal-footer,
.modal-window .modal-actions-wrap,
.modal-window > footer {
min-height: 70px;
display: flex !important;
align-items: center;
justify-content: flex-end !important;
flex-wrap: wrap;
gap: 10px !important;
margin-top: 20px;
padding: 14px 20px;
border-top: 1px solid var(--ux-border);
background: var(--ux-surface-muted);
}
.modal-window .modal-actions button + button,
.modal-window .modal-footer button + button,
.modal-window .modal-actions-wrap button + button {
margin-left: 0 !important;
}
.modal-window .close-btn {
width: 36px;
height: 36px;
min-width: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: transparent !important;
color: var(--ux-muted) !important;
font-size: 24px;
line-height: 1;
}
.modal-window .close-btn:hover {
background: #eef4fb !important;
color: var(--ux-text) !important;
}
.modal-window input:not([type="checkbox"]):not([type="radio"]),
.modal-window select,
.modal-window textarea,
.mriia-modal input:not([type="checkbox"]):not([type="radio"]),
.mriia-modal select,
.mriia-modal textarea,
.feedback-modal input:not([type="checkbox"]):not([type="radio"]),
.feedback-modal select,
.feedback-modal textarea,
.modal-overlay > .modal input:not([type="checkbox"]):not([type="radio"]),
.modal-overlay > .modal select,
.modal-overlay > .modal textarea {
border-color: var(--ux-border);
border-radius: 10px;
}
.modal-window input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-window select:focus,
.modal-window textarea:focus,
.mriia-modal input:not([type="checkbox"]):not([type="radio"]):focus,
.mriia-modal select:focus,
.mriia-modal textarea:focus,
.feedback-modal input:not([type="checkbox"]):not([type="radio"]):focus,
.feedback-modal select:focus,
.feedback-modal textarea:focus,
.modal-overlay > .modal input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-overlay > .modal select:focus,
.modal-overlay > .modal textarea:focus {
border-color: var(--ux-blue);
box-shadow: 0 0 0 3px rgba(15, 104, 248, 0.12);
outline: none;
}
.modal-window.schedule-popover-win,
.modal-window.grade-popover-win {
border-radius: 12px !important;
}
.form-group .form-hint,
.form-hint {
margin-top: 6px;
font-size: 12px;
line-height: 1.4;
color: #64748b;
}
.ld-col-item-sublink i.fa-solid.fa-arrow-right {
margin-right: 4px;
color: #1c77ff;
}
#modal-grade-edit .grade-popover-win {
border-left: 3px solid #1c77ff !important;
box-shadow: inset 3px 0 0 0 #1c77ff !important;
}
#modal-grade-edit .grade-popover-win::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #1c77ff;
z-index: 10;
pointer-events: none;
}
#modal-schedule-lesson .schedule-popover-win {
border-left: 3px solid #1c77ff !important;
box-shadow: inset 3px 0 0 0 #1c77ff !important;
}
#modal-schedule-lesson .schedule-popover-win::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #1c77ff;
z-index: 10;
pointer-events: none;
}
.modal-window.schedule-popover-win .modal-actions,
.modal-window.grade-popover-win .modal-actions {
margin-top: 0;
padding: 10px 12px;
}
@media (max-width: 640px) {
.modal-overlay {
align-items: flex-end !important;
padding: 0 !important;
}
.modal-window {
width: 100% !important;
max-width: none !important;
max-height: min(92vh, 820px);
border-radius: 16px 16px 0 0 !important;
}
.mriia-modal-backdrop {
align-items: flex-end !important;
padding: 0 !important;
}
.mriia-modal {
width: 100%;
max-width: none;
max-height: min(92vh, 820px);
border-radius: 16px 16px 0 0 !important;
}
.modal-overlay > .modal {
width: 100% !important;
max-width: none !important;
max-height: min(92vh, 820px);
border-radius: 16px 16px 0 0 !important;
}
.feedback-modal {
width: 100%;
max-width: none;
border-radius: 16px 16px 0 0 !important;
}
.modal-window .modal-header {
padding: 14px 16px;
}
.modal-window .modal-actions,
.modal-window .modal-footer,
.modal-window .modal-actions-wrap,
.modal-window > footer {
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.modal-window .modal-actions > button,
.modal-window .modal-footer > button,
.modal-window .modal-actions-wrap > button {
flex: 1 1 140px;
}
.modal-window.schedule-popover-win,
.modal-window.grade-popover-win {
width: min(100%, 420px) !important;
max-height: 88vh;
border-radius: 14px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.modal-overlay.open,
.modal-overlay.open .modal-window,
.mriia-modal-backdrop.open,
.mriia-modal,
.feedback-overlay,
.feedback-modal,
.modal-overlay.open > .modal {
animation: none !important;
}
}
.journal-card-skeleton {
pointer-events: none;
overflow: hidden;
border: 1px solid #e8eef6;
background: rgba(255, 255, 255, 0.46) !important;
opacity: 0.78;
}
.journal-card-skeleton::before,
.journal-card-skeleton::after,
.journal-skeleton-badge,
.journal-skeleton-line {
background: linear-gradient(90deg, rgba(224, 234, 245, 0.44) 25%, rgba(255, 255, 255, 0.72) 50%, rgba(224, 234, 245, 0.44) 75%);
background-size: 240% 100%;
animation: journal-skeleton-shimmer 1.25s ease-in-out infinite;
}
.journal-card-skeleton::before,
.journal-card-skeleton::after {
content: none;
}
.journal-skeleton-badge {
width: 64px;
height: 28px;
border-radius: 999px;
}
.journal-skeleton-content {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
}
.journal-skeleton-line {
height: 15px;
border-radius: 5px;
}
.journal-skeleton-subject {
width: 78%;
height: 20px;
}
.journal-skeleton-teacher {
width: 54%;
height: 12px;
}
.journal-card-skeleton-class .journal-skeleton-badge {
width: 48px;
height: 32px;
}
.journal-card-skeleton-class .journal-skeleton-subject {
width: 66%;
height: 24px;
}
.journal-card-skeleton-class .journal-skeleton-teacher {
width: 76%;
}
.journal-card-skeleton-teacher .journal-skeleton-badge {
width: 92px;
height: 24px;
}
.journal-card-skeleton-teacher .journal-skeleton-subject {
width: 84%;
}
.journal-card-skeleton-teacher .journal-skeleton-teacher {
width: 46%;
}
.journal-card-skeleton-extra {
min-height: 156px;
}
.journal-card-skeleton-extra .journal-skeleton-badge {
width: 74px;
height: 26px;
}
.journal-card-skeleton-extra .journal-skeleton-subject {
width: 72%;
}
.journal-section-skeleton-header,
.journal-section-skeleton-grid {
pointer-events: none;
}
.journal-section-skeleton-wrap {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
grid-column: 1 / -1;
}
.journal-section-skeleton-grid {
width: 100%;
grid-column: 1 / -1;
}
#journals-my-subfilters,
#journals-class-subfilters,
#journals-teachers-subfilters,
#journals-teacher-subfilters {
min-height: 46px;
align-items: center;
}
#journals-my-subfilters.open,
#journals-class-subfilters.open,
#journals-teachers-subfilters.open,
#journals-teacher-subfilters.open {
display: flex;
}
#journals-my-subfilters,
#journals-class-subfilters,
#journals-teachers-subfilters,
#journals-teacher-subfilters {
width: calc(100% + 52px) !important;
max-width: none !important;
margin: 0 0 10px -21px !important;
padding: 10px !important;
gap: 12px !important;
flex-wrap: nowrap !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 16px !important;
}
#journals-my-subfilters .journal-filter-select,
#journals-class-subfilters .journal-filter-select,
#journals-teachers-subfilters .journal-filter-select,
#journals-teacher-subfilters .journal-filter-select {
flex: 0 0 660px !important;
width: 660px !important;
min-width: 660px !important;
max-width: 660px !important;
height: 40px !important;
padding: 0 38px 0 14px !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.16) !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 800 !important;
appearance: auto;
cursor: pointer;
}
#journals-my-subfilters {
gap: 14px !important;
margin-bottom: 0 !important;
}
#journals-my-subfilters .journal-filter-select {
flex: 0 0 180px !important;
width: 180px !important;
min-width: 180px !important;
max-width: 180px !important;
height: 38px !important;
font-weight: 500 !important;
}
#journals-list-view #journals-my-subfilters-caption {
display: block;
width: calc(100% + 42px);
align-self: flex-start;
justify-self: start;
margin: 10px 0 12px -21px !important;
padding: 0 !important;
text-align: left !important;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
#journals .journal-filter-select option {
color: #0f172a;
background: #fff;
}
.journal-section-skeleton-wrap + #journals-grid-body {
grid-column: 1 / -1;
}
#class-admin-panel .class-admin-skeleton,
#class-admin-panel .class-admin-title-skeleton {
position: relative;
overflow: hidden;
color: transparent !important;
background: linear-gradient(90deg, rgba(224, 234, 245, 0.44) 25%, rgba(255, 255, 255, 0.72) 50%, rgba(224, 234, 245, 0.44) 75%) !important;
background-size: 240% 100% !important;
animation: journal-skeleton-shimmer 1.25s ease-in-out infinite;
}
#class-admin-panel .class-admin-skeleton {
min-width: 72px;
min-height: 42px;
border-radius: 999px;
}
#class-admin-panel .class-admin-title-skeleton {
width: 170px;
height: 42px;
border-radius: 8px;
}
.journal-card-unified {
height: 140px !important;
min-height: 140px !important;
max-height: 140px !important;
}
.journal-card-unified .journal-bottom {
min-height: 48px;
}
@media (max-width: 520px) {
#journals-my-subfilters,
#journals-class-subfilters,
#journals-teachers-subfilters,
#journals-teacher-subfilters {
width: 100% !important;
margin-left: 0 !important;
flex-wrap: wrap !important;
border-radius: 16px !important;
}
#journals-my-subfilters .journal-filter-select,
#journals-class-subfilters .journal-filter-select,
#journals-teachers-subfilters .journal-filter-select,
#journals-teacher-subfilters .journal-filter-select {
flex-basis: 100% !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
#journals-my-subfilters .journal-filter-select {
flex: 1 1 160px !important;
width: auto !important;
min-width: min(100%, 160px) !important;
}
}
.class-card-skeleton {
min-height: 200px;
background: rgba(255, 255, 255, 0.46) !important;
border-color: rgba(219, 228, 240, 0.72) !important;
opacity: 0.78;
}
.class-card-skeleton .class-skeleton-badge,
.class-card-skeleton .class-skeleton-line {
display: block;
background: linear-gradient(90deg, rgba(224, 234, 245, 0.44) 25%, rgba(255, 255, 255, 0.72) 50%, rgba(224, 234, 245, 0.44) 75%);
background-size: 240% 100%;
animation: journal-skeleton-shimmer 1.25s ease-in-out infinite;
}
.class-skeleton-badge {
width: 58px;
height: 28px;
border-radius: 999px;
}
.class-skeleton-title {
width: 78%;
height: 20px;
margin-top: 10px;
border-radius: 5px;
}
.class-card-skeleton .class-card__divider {
background: rgba(155, 173, 195, 0.22);
}
.class-skeleton-count {
width: 72%;
height: 14px;
border-radius: 5px;
}
.class-card-skeleton-teachers .class-skeleton-badge {
width: 118px;
height: 24px;
}
.class-card-skeleton-teachers .class-skeleton-title {
width: 88%;
height: 22px;
}
.class-card-skeleton-teachers .class-skeleton-count {
width: 64%;
}
@keyframes journal-skeleton-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
:root {
--ux-text: #1d1d1f;
--ux-muted: #6e6e73;
--ux-border: rgba(60, 60, 67, 0.18);
--ux-surface: #ffffff;
--ux-surface-muted: #f6f6f8;
--ux-radius: 20px;
--ux-shadow: 0 28px 80px rgba(0, 0, 0, 0.24), 0 4px 18px rgba(0, 0, 0, 0.10);
}
.modal-overlay {
background: rgba(20, 24, 33, 0.38) !important;
}
.modal-window {
overflow: hidden auto;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
border-radius: var(--ux-radius) !important;
background: var(--ux-surface) !important;
box-shadow: var(--ux-shadow);
animation: modal-appear 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-window .modal-header {
min-height: 68px;
padding: 18px 22px !important;
background: #ffffff;
border-bottom: 1px solid var(--ux-border);
}
.modal-window .modal-title {
letter-spacing: -0.015em;
font-size: 19px !important;
font-weight: 650 !important;
}
.modal-window .modal-actions,
.modal-window .modal-footer,
.modal-window .modal-actions-wrap,
.modal-window > footer {
background: var(--ux-surface-muted);
}
.modal-window .close-btn {
border-radius: 50% !important;
background: rgba(118, 118, 128, 0.12) !important;
color: #636366 !important;
}
.modal-window .close-btn:hover {
background: rgba(118, 118, 128, 0.2) !important;
}
.modal-window input:not([type="checkbox"]):not([type="radio"]),
.modal-window select,
.modal-window textarea {
min-height: 40px;
border: 1px solid var(--ux-border) !important;
background: rgba(255, 255, 255, 0.82) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.modal-window input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-window select:focus,
.modal-window textarea:focus {
border-color: #0a84ff !important;
box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.16) !important;
}
.modal-window .btn-primary,
.modal-window .btn-submit,
.modal-window .btn-apply {
background: #0a84ff;
border-color: #0a84ff !important;
box-shadow: 0 2px 6px rgba(10, 132, 255, 0.2);
}
.modal-window .btn-primary:hover,
.modal-window .btn-submit:hover,
.modal-window .btn-apply:hover {
background: #006edb;
border-color: #006edb !important;
}
@keyframes modal-appear {
from { opacity: 0; transform: translateY(10px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.journal-card-skeleton::before,
.journal-card-skeleton::after,
.journal-skeleton-badge,
.journal-skeleton-line,
.class-card-skeleton .class-skeleton-badge,
.class-card-skeleton .class-skeleton-line {
animation: none;
}
}
#ktp-import-view {
display: none !important;
}
.main-content.ktp-constructor-mode-active > .header {
display: none !important;
}
.main-content.ktp-constructor-mode-active {
overflow: hidden !important;
}
.main-content.ktp-constructor-mode-active #ktp-import-view,
#ktp-import-view.active {
display: flex !important;
flex-direction: column !important;
width: calc(100% + 34px) !important;
max-width: calc(100% + 34px) !important;
margin-left: -17px !important;
margin-right: -17px !important;
margin-top: -4px !important;
margin-bottom: 0 !important;
padding: 0 !important;
height: calc(108.69565vh - 30px) !important;
max-height: calc(108.69565vh - 30px) !important;
min-height: 0 !important;
overflow: hidden !important;
position: relative !important;
background: transparent !important;
box-sizing: border-box !important;
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
#ktp-import-view .ktp-header {
margin-left: 2px !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
position: relative !important;
display: block !important;
flex-shrink: 0 !important;
}
#ktp-import-view .ktp-header #ktp-header-top {
display: flex !important;
align-items: baseline !important;
gap: 1.8px !important;
font-size: 15.1px !important;
line-height: 1 !important;
font-weight: 450 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin: 0 0 6px 0 !important;
}
#ktp-import-view .ktp-header .header-page-icon {
display: inline-flex !important;
align-items: flex-end !important;
justify-content: center !important;
color: rgba(255, 255, 255, 0.75) !important;
opacity: 0.75 !important;
font-size: 13px !important;
line-height: 1 !important;
margin-right: 1px !important;
transform: translateY(2px) !important;
transition: color 0.15s ease, opacity 0.15s ease !important;
}
#ktp-import-view .ktp-header .header-page-icon img {
opacity: 0.75 !important;
transition: opacity 0.15s ease !important;
}
#ktp-import-view .ktp-header .header-crumb-sep {
color: rgba(255, 255, 255, 0.55) !important;
margin: 0 12px !important;
font-weight: 400 !important;
}
#ktp-import-view .ktp-header .journal-link,
#ktp-import-view .ktp-header .journal-class-link,
#ktp-import-view .ktp-header .journal-subject-name {
cursor: pointer !important;
color: rgba(255, 255, 255, 0.75) !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
#ktp-import-view .ktp-header .journal-link:hover,
#ktp-import-view .ktp-header .journal-class-link:hover,
#ktp-import-view .ktp-header .journal-subject-name:hover {
color: #ffffff !important;
text-decoration: none !important;
}
#ktp-import-view .ktp-header:has(.journal-link:hover) .header-page-icon,
#ktp-import-view .ktp-header:has(.journal-link:hover) .header-page-icon img,
#ktp-import-view .ktp-header .journal-link:hover ~ .header-page-icon,
#ktp-import-view .ktp-header .journal-link:hover ~ .header-page-icon img,
#ktp-import-view .ktp-header .header-page-icon:hover,
#ktp-import-view .ktp-header .header-page-icon:hover img {
color: #ffffff !important;
opacity: 1 !important;
}
#ktp-import-view .ktp-header #ktp-crumb-current {
color: #ffffff !important;
font-weight: 700 !important;
cursor: default !important;
}
#ktp-import-view .ktp-header #ktp-header-bottom {
font-size: 26px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
margin: 0 0 8px 0 !important;
color: #ffffff !important;
opacity: 1 !important;
}
#ktp-import-view .ktp-top-bar {
flex-shrink: 0 !important;
margin-left: 2px !important;
margin-right: 2px !important;
margin-bottom: 12px !important;
min-height: 36px !important;
display: flex !important;
align-items: center !important;
}
#ktp-import-view .ktp-panel-header {
width: 100% !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 0 !important;
}
#ktp-import-view .ktp-panel-title {
font-size: 15px !important;
font-weight: 600 !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
#ktp-import-view .ktp-panel-title i {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 16px !important;
}
#ktp-import-view .ktp-panel-actions {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
#ktp-import-view .btn-ktp-action {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 7px 16px !important;
border-radius: 20px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
border: none !important;
outline: none !important;
}
#ktp-import-view .btn-ktp-action.secondary {
background: rgba(255, 255, 255, 0.18) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
#ktp-import-view .btn-ktp-action.secondary:hover {
background: rgba(255, 255, 255, 0.28) !important;
color: #ffffff !important;
}
#ktp-import-view .btn-ktp-action.primary {
background: #ffffff !important;
color: #0b61ff !important;
font-weight: 700 !important;
}
#ktp-import-view .btn-ktp-action.primary:hover {
background: #f0f7ff !important;
}
#ktp-import-view .btn-ktp-action.primary.disabled,
#ktp-import-view .btn-ktp-action.primary:disabled {
background: rgba(255, 255, 255, 0.25) !important;
color: rgba(255, 255, 255, 0.6) !important;
cursor: not-allowed !important;
}
#ktp-import-view .ktp-panel-header {
display: flex;
}
#ktp-import-view .ktp-autoplan-banner {
display: none;
}
#ktp-import-view .ktp-autoplan-bottom-banner {
display: none;
}
#ktp-import-view:not(.is-autoplan-mode) .ktp-panel-header,
#ktp-import-view:not(.is-autoplan-mode) #ktp-panel-header-normal {
display: flex !important;
}
#ktp-import-view:not(.is-autoplan-mode) .ktp-autoplan-banner,
#ktp-import-view:not(.is-autoplan-mode) #ktp-autoplan-banner,
#ktp-import-view:not(.is-autoplan-mode) .ktp-autoplan-bottom-banner,
#ktp-import-view:not(.is-autoplan-mode) #ktp-autoplan-bottom-banner {
display: none !important;
}
#ktp-import-view.is-autoplan-mode .ktp-panel-header,
#ktp-import-view.is-autoplan-mode #ktp-panel-header-normal {
display: none !important;
}
#ktp-import-view.is-autoplan-mode .ktp-autoplan-banner,
#ktp-import-view.is-autoplan-mode #ktp-autoplan-banner {
display: flex !important;
}
#ktp-import-view.is-autoplan-mode .ktp-autoplan-bottom-banner,
#ktp-import-view.is-autoplan-mode #ktp-autoplan-bottom-banner {
display: flex !important;
}
#ktp-import-view.is-autoplan-mode .ktp-autoplan-bottom-banner.dismissed {
display: none !important;
}
#ktp-import-view .ktp-grid-layout {
width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 340px !important;
gap: 16px !important;
flex: 1 1 0 !important;
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
align-items: stretch !important;
}
@media (max-width: 1100px) {
#ktp-import-view .ktp-grid-layout {
grid-template-columns: 1fr !important;
}
}
#ktp-import-view .ktp-panel-card {
background: #ffffff !important;
border-radius: 16px !important;
padding: 16px 20px !important;
color: #0f172a !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
position: relative !important;
}
#ktp-import-view .ktp-autoplan-banner {
flex-shrink: 0 !important;
width: 100% !important;
background: #e0f2fe !important;
border: 1px solid #bae6fd !important;
border-radius: 12px !important;
padding: 10px 16px !important;
margin-bottom: 0 !important;
justify-content: space-between !important;
align-items: center !important;
color: #0369a1 !important;
font-size: 13px !important;
}
#ktp-import-view .ktp-autoplan-banner-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-weight: 700 !important;
}
#ktp-import-view .ktp-autoplan-banner-info-btn {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #bae6fd !important;
color: #0369a1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 10px !important;
font-weight: 800 !important;
cursor: help !important;
}
#ktp-import-view .ktp-autoplan-banner-actions {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
#ktp-import-view .ktp-autoplan-cancel-link {
background: none !important;
border: none !important;
color: #0284c7 !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 4px 6px !important;
}
#ktp-import-view .ktp-autoplan-cancel-link:hover {
text-decoration: underline !important;
}
#ktp-import-view .ktp-autoplan-unplan-btn {
background: #ffffff !important;
border: 1px solid #bae6fd !important;
color: #0369a1 !important;
border-radius: 16px !important;
padding: 5px 12px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: all 0.2s !important;
}
#ktp-import-view .ktp-autoplan-unplan-btn:hover {
background: #f0f9ff !important;
}
#ktp-import-view .ktp-autoplan-publish-btn {
background: #0b61ff !important;
border: none !important;
color: #ffffff !important;
border-radius: 16px !important;
padding: 6px 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
transition: all 0.2s !important;
}
#ktp-import-view .ktp-autoplan-publish-btn:hover {
background: #094ed6 !important;
}
#ktp-import-view .ktp-table-scroll {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
padding-right: 4px !important;
}
#ktp-import-view .ktp-table-scroll::-webkit-scrollbar {
width: 6px !important;
}
#ktp-import-view .ktp-table-scroll::-webkit-scrollbar-track {
background: #f1f5f9 !important;
border-radius: 8px !important;
}
#ktp-import-view .ktp-table-scroll::-webkit-scrollbar-thumb {
background: #cbd5e1 !important;
border-radius: 8px !important;
}
#ktp-import-view .ktp-table-scroll::-webkit-scrollbar-thumb:hover {
background: #94a3b8 !important;
}
#ktp-import-view .ktp-table {
width: 100% !important;
table-layout: fixed !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
#ktp-import-view .ktp-table thead th {
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
background: #ffffff !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #64748b !important;
padding: 10px 12px !important;
text-align: left !important;
border-bottom: 1px solid #f1f5f9 !important;
box-shadow: 0 1px 0 #f1f5f9 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-badge-pill {
background: #e0edff !important;
color: #1c77ff !important;
padding: 2px 8px !important;
border-radius: 10px !important;
font-size: 11px !important;
font-weight: 700 !important;
margin-left: 6px !important;
display: inline-block !important;
}
#ktp-import-view .ktp-table tbody td {
padding: 8px 8px !important;
vertical-align: middle !important;
border-bottom: 1px solid #f8fafc !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-col-num {
width: 36px !important;
max-width: 36px !important;
min-width: 36px !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #475569 !important;
text-align: center !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-col-datetime {
width: 110px !important;
max-width: 110px !important;
min-width: 110px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-datetime-day {
font-size: 13px !important;
font-weight: 700 !important;
color: #1e293b !important;
line-height: 1.2 !important;
}
#ktp-import-view .ktp-datetime-time {
font-size: 11px !important;
color: #64748b !important;
margin-top: 3px !important;
}
#ktp-import-view .ktp-col-topic {
width: 53% !important;
max-width: 53% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-col-hw {
width: 47% !important;
max-width: 47% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-col-topic-cell-wrap {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-table .planning-box {
background: #f8fafc !important;
border: 1px solid #eef2f6 !important;
border-radius: 12px !important;
padding: 0 14px !important;
height: 44px !important;
min-height: 44px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
color: #0f172a !important;
font-size: 13px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
position: relative !important;
user-select: none !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-table .planning-box.placeholder {
border: 1px dashed #cbd5e1 !important;
background: #ffffff !important;
}
#ktp-import-view .ktp-table .planning-box.has-multiple-topics {
height: auto !important;
min-height: 52px !important;
padding: 6px 12px !important;
}
#ktp-import-view .ktp-table .planning-box .planning-multi-topic-list {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
flex: 1 1 0 !important;
min-width: 0 !important;
overflow: hidden !important;
justify-content: center !important;
}
#ktp-import-view .ktp-table .planning-box .planning-multi-topic-row {
display: flex !important;
align-items: center !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-table .planning-box .planning-multi-topic-row:not(:first-child) {
padding-top: 3px !important;
border-top: 1px dashed #e2e8f0 !important;
}
#ktp-import-view .ktp-table .planning-box .planning-multi-topic-text {
flex: 1 1 0 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: #0f172a !important;
line-height: 1.3 !important;
}
#ktp-import-view .ktp-table .planning-box .ktp-multi-subremove-btn {
background: none !important;
border: none !important;
color: #94a3b8 !important;
cursor: pointer !important;
padding: 2px 4px !important;
font-size: 12px !important;
line-height: 1 !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.15s !important;
flex-shrink: 0 !important;
}
#ktp-import-view .ktp-table .planning-box .ktp-multi-subremove-btn:hover {
color: #ef4444 !important;
background: #fee2e2 !important;
}
#ktp-import-view .ktp-table .planning-box:hover,
#ktp-import-view .ktp-table .planning-box.is-dragover {
border: 1px dashed #2563eb !important;
background: #f8fbff !important;
}
#ktp-import-view .ktp-table .planning-box.placeholder .planning-box-text {
color: #94a3b8 !important;
font-weight: 400 !important;
}
#ktp-import-view .ktp-table .planning-box:not(.placeholder) .planning-box-text {
color: #0f172a !important;
font-weight: 500 !important;
}
#ktp-import-view .ktp-table .planning-box .planning-box-content {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 0 !important;
min-width: 0 !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-table .planning-box .planning-box-text {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
flex: 1 1 0 !important;
min-width: 0 !important;
display: block !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
#ktp-import-view .ktp-table .planning-box .planning-box-plus {
display: none !important;
}
#ktp-import-view .ktp-table .planning-box .ktp-grip-icon {
color: #2563eb !important;
font-size: 13px !important;
cursor: grab !important;
flex-shrink: 0 !important;
margin-right: 2px !important;
}
#ktp-import-view .ktp-table .planning-box.assigned {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
cursor: grab !important;
}
#ktp-import-view .ktp-table .planning-box.assigned:hover {
border-color: #cbd5e1 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07) !important;
background: #ffffff !important;
}
#ktp-import-view .ktp-table .planning-box.assigned:active {
cursor: grabbing !important;
}
#ktp-import-view .ktp-assigned-remove-btn {
background: #f1f5f9 !important;
border: none !important;
color: #64748b !important;
width: 24px !important;
height: 24px !important;
border-radius: 6px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 12px !important;
flex-shrink: 0 !important;
margin-left: 8px !important;
transition: all 0.15s !important;
}
#ktp-import-view .ktp-assigned-remove-btn:hover {
background: #fee2e2 !important;
color: #dc2626 !important;
}
#ktp-import-view .ktp-insert-tr,
#ktp-import-view .ktp-row-insert-wrap,
#ktp-import-view .ktp-row-insert-btn {
display: none !important;
}
#ktp-import-view .ktp-autoplan-bottom-banner {
flex-shrink: 0 !important;
background: #e0f2fe !important;
border: 1px solid #bae6fd !important;
border-radius: 12px !important;
padding: 12px 18px !important;
margin-top: 14px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
font-size: 13px !important;
color: #0284c7 !important;
line-height: 1.4 !important;
}
#ktp-import-view .ktp-autoplan-bottom-close {
background: none !important;
border: none !important;
color: #0284c7 !important;
font-size: 18px !important;
cursor: pointer !important;
padding: 2px 6px !important;
}
#ktp-import-view .ktp-side-panel {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
#ktp-import-view .ktp-tabs-switch {
flex-shrink: 0 !important;
display: flex !important;
gap: 8px !important;
border-bottom: 1.5px solid #f1f5f9 !important;
padding-bottom: 12px !important;
margin-bottom: 14px !important;
}
#ktp-import-view .ktp-tab-btn {
background: transparent !important;
border: none !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #64748b !important;
cursor: pointer !important;
padding: 6px 14px !important;
border-radius: 14px !important;
transition: all 0.2s !important;
}
#ktp-import-view .ktp-tab-btn.active {
background: #e0edff !important;
color: #0b61ff !important;
}
#ktp-import-view .ktp-side-content {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
margin-bottom: 14px !important;
padding-right: 4px !important;
}
#ktp-import-view .ktp-side-content::-webkit-scrollbar {
width: 6px !important;
}
#ktp-import-view .ktp-side-content::-webkit-scrollbar-track {
background: #f1f5f9 !important;
border-radius: 8px !important;
}
#ktp-import-view .ktp-side-content::-webkit-scrollbar-thumb {
background: #cbd5e1 !important;
border-radius: 8px !important;
}
#ktp-import-view .ktp-empty-bubble {
background: #f8fafc !important;
border: 1px dashed #cbd5e1 !important;
border-radius: 18px !important;
padding: 36px 18px !important;
text-align: center !important;
color: #64748b !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin-top: 16px !important;
}
#ktp-import-view .ktp-empty-bubble-icon {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
background: #e0edff !important;
color: #0b61ff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
}
#ktp-import-view .ktp-empty-bubble-title {
font-size: 14px !important;
font-weight: 700 !important;
color: #334155 !important;
margin: 0 !important;
}
#ktp-import-view .ktp-empty-bubble-link {
color: #0b61ff !important;
font-weight: 600 !important;
font-size: 13px !important;
cursor: pointer !important;
text-decoration: none !important;
}
#ktp-import-view .ktp-empty-bubble-link:hover {
text-decoration: underline !important;
}
#ktp-import-view .ktp-unassigned-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 10px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
cursor: grab !important;
margin-bottom: 8px !important;
transition: transform 0.15s, border-color 0.15s !important;
user-select: none !important;
}
#ktp-import-view .ktp-unassigned-card:hover {
border-color: #cbd5e1 !important;
transform: translateY(-1px) !important;
}
#ktp-import-view .ktp-side-add-row {
flex-shrink: 0 !important;
margin-top: auto !important;
display: flex !important;
gap: 8px !important;
align-items: center !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 6px 10px !important;
}
#ktp-import-view .ktp-side-add-input {
flex: 1 !important;
border: none !important;
background: transparent !important;
font-size: 13px !important;
color: #0f172a !important;
outline: none !important;
padding: 6px !important;
}
#ktp-import-view .ktp-side-add-btn {
background: #0b61ff !important;
border: none !important;
color: #ffffff !important;
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 13px !important;
transition: background 0.15s !important;
}
#ktp-import-view .ktp-side-add-btn:hover {
background: #094ed6 !important;
}
#modal-ktp-choice .ktp-modal-window,
#modal-ktp-copy .ktp-modal-window,
#modal-ktp-upload .ktp-modal-window {
background: #ffffff !important;
border-radius: 24px !important;
padding: 28px 32px !important;
color: #0f172a !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
box-sizing: border-box !important;
}
#modal-ktp-choice .ktp-modal-header,
#modal-ktp-copy .ktp-modal-header,
#modal-ktp-upload .ktp-modal-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin-bottom: 20px !important;
}
#modal-ktp-choice .ktp-modal-title,
#modal-ktp-copy .ktp-modal-title,
#modal-ktp-upload .ktp-modal-title {
font-size: 22px !important;
font-weight: 800 !important;
color: #0f172a !important;
margin: 0 !important;
letter-spacing: -0.3px !important;
}
#modal-ktp-choice .ktp-modal-subtitle,
#modal-ktp-copy .ktp-modal-subtitle,
#modal-ktp-upload .ktp-modal-subtitle {
font-size: 13px !important;
color: #64748b !important;
margin-top: 6px !important;
line-height: 1.4 !important;
}
#modal-ktp-choice .ktp-modal-close-btn,
#modal-ktp-copy .ktp-modal-close-btn,
#modal-ktp-upload .ktp-modal-close-btn {
background: none !important;
border: none !important;
color: #94a3b8 !important;
font-size: 24px !important;
cursor: pointer !important;
padding: 2px 6px !important;
line-height: 1 !important;
transition: color 0.15s !important;
}
#modal-ktp-choice .ktp-modal-close-btn:hover,
#modal-ktp-copy .ktp-modal-close-btn:hover,
#modal-ktp-upload .ktp-modal-close-btn:hover {
color: #0f172a !important;
}
#modal-ktp-choice .ktp-choice-card {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 20px 22px !important;
background: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 18px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
margin-bottom: 14px !important;
}
#modal-ktp-choice .ktp-choice-card:hover {
border-color: #0b61ff !important;
background: #f8fbff !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(11, 97, 255, 0.08) !important;
}
#modal-ktp-choice .ktp-choice-card-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 0 6px 0 !important;
}
#modal-ktp-choice .ktp-choice-card-sub {
font-size: 13px !important;
color: #64748b !important;
margin: 0 0 12px 0 !important;
line-height: 1.4 !important;
}
#modal-ktp-choice .ktp-choice-tag {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 10px !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
#modal-ktp-choice .ktp-choice-tag.green {
background: #e6f9f0 !important;
color: #059669 !important;
}
#modal-ktp-choice .ktp-choice-tag.gray {
background: #f1f5f9 !important;
color: #475569 !important;
}
#modal-ktp-choice .ktp-choice-arrow {
font-size: 20px !important;
color: #64748b !important;
margin-left: 16px !important;
}
#modal-ktp-copy .ktp-form-group,
#modal-ktp-upload .ktp-form-group {
margin-bottom: 18px !important;
}
#modal-ktp-copy .ktp-form-label,
#modal-ktp-upload .ktp-form-label {
display: block !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #334155 !important;
margin-bottom: 8px !important;
}
#modal-ktp-copy .ktp-select-field,
#modal-ktp-upload .ktp-select-field {
width: 100% !important;
padding: 12px 16px !important;
background: #ffffff !important;
border: 1.5px solid #cbd5e1 !important;
border-radius: 12px !important;
font-size: 14px !important;
color: #0f172a !important;
outline: none !important;
transition: border-color 0.15s !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
#modal-ktp-copy .ktp-select-field:focus,
#modal-ktp-upload .ktp-select-field:focus {
border-color: #0b61ff !important;
}
#modal-ktp-choice .ktp-modal-footer,
#modal-ktp-copy .ktp-modal-footer,
#modal-ktp-upload .ktp-modal-footer {
display: flex !important;
justify-content: flex-end !important;
gap: 12px !important;
margin-top: 24px !important;
padding-top: 18px !important;
border-top: 1px solid #f1f5f9 !important;
}
#modal-ktp-copy .btn-ktp-pill,
#modal-ktp-upload .btn-ktp-pill {
padding: 10px 24px !important;
border-radius: 24px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
border: none !important;
transition: all 0.2s !important;
}
#modal-ktp-copy .btn-ktp-pill.secondary,
#modal-ktp-upload .btn-ktp-pill.secondary {
background: transparent !important;
border: 1.5px solid #cbd5e1 !important;
color: #475569 !important;
}
#modal-ktp-copy .btn-ktp-pill.secondary:hover,
#modal-ktp-upload .btn-ktp-pill.secondary:hover {
background: #f1f5f9 !important;
}
#modal-ktp-copy .btn-ktp-pill.primary,
#modal-ktp-upload .btn-ktp-pill.primary {
background: #0b61ff !important;
color: #ffffff !important;
}
#modal-ktp-copy .btn-ktp-pill.primary:hover,
#modal-ktp-upload .btn-ktp-pill.primary:hover {
background: #094ed6 !important;
}
#modal-ktp-copy .btn-ktp-pill.primary:disabled,
#modal-ktp-upload .btn-ktp-pill.primary:disabled {
background: #cbd5e1 !important;
color: #94a3b8 !important;
cursor: not-allowed !important;
}
.mriia-doc-container{
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
padding:0;
width:100%;
min-height:0;
overflow-y:auto;
box-sizing:border-box;
}.mriia-doc-page{
width:210mm;
min-height:297mm;
background:#ffffff;
color:#0f172a;
padding:20mm 15mm;
border-radius:6px;
font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing:border-box;
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
line-height:1.4;
font-size:13px;
}.mriia-doc-page.screen-mode{
width:100% !important;
max-width:100% !important;
min-height:auto !important;
border-radius:0 !important;
padding:0 6px 4px !important;
margin:0 !important;
}.mriia-doc-page.screen-mode > div{
padding:0 6px 4px !important;
margin:0 !important;
}.mriia-doc-page.screen-mode .nush-table,
.mriia-doc-page.screen-mode .old-table{
width:100% !important;
margin:0 !important;
border-collapse:collapse !important;
border-spacing:0 !important;
}.mriia-doc-page.screen-mode .nush-table th,
.mriia-doc-page.screen-mode .nush-table td,
.mriia-doc-page.screen-mode .old-table th,
.mriia-doc-page.screen-mode .old-table td{
padding:6px 8px !important;
}#mriia-print-container{
display:none;
}.report-header-line{
border-bottom:1px solid #000000;
text-align:center;
font-weight:700;
font-size:14px;
height:20px;
min-width:120px;
display:inline-block;
padding:0 10px;
}.report-subtitle-label{
font-size:10px;
color:#4b5563;
text-align:center;
display:block;
margin-top:2px;
}.nush-title{
color:#1e3a8a;
font-size:28px;
font-weight:800;
text-align:center;
letter-spacing:0.5px;
margin:10px 0;
}.nush-class-tag{
font-size:18px;
font-weight:700;
text-align:center;
color:#1e3a8a;
margin-bottom:12px;
}.nush-table{
width:100%;
border-collapse:collapse;
margin-top:10px;
font-size:11px;
border:1px solid #3b82f6;
}.nush-table th{
background:#eff6ff;
color:#1e3a8a;
border:1px solid #3b82f6;
padding:6px 8px;
font-weight:800;
text-align:center;
}.nush-table td{
border:1px solid #3b82f6;
padding:5px 8px;
}.nush-category-header{
background:#dbe7f7 !important;
font-weight:800;
color:#1e3a8a;
font-size:11px;
text-transform:uppercase;
}.nush-radio-label{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
cursor:pointer;
}.nush-radio-input{
width:15px;
height:15px;
accent-color:#2563eb;
margin:0;
}.old-title{
font-size:36px;
font-weight:800;
text-align:center;
letter-spacing:1px;
margin-top:80px;
}.old-cover-field-group{
margin:40px auto 0;
width:80%;
display:flex;
flex-direction:column;
gap:25px;
}.old-cover-field{
width:100%;
text-align:center;
}.old-table{
width:100%;
border-collapse:collapse;
font-size:12px;
border:1px solid #3b82f6;
}.old-table th, .old-table td{
border:1px solid #3b82f6;
padding:5px 6px;
}.old-table th{
background:#eff6ff;
color:#1e3a8a;
font-weight:700;
text-align:center;
}.old-table-section{
background:#dbe7f7 !important;
color:#1e3a8a;
font-weight:800;
text-align:center;
}.mriia-inline-input, .mriia-inline-textarea{
border:none;
border-bottom:1px dashed #3b82f6;
background:transparent;
font-family:inherit;
font-size:inherit;
font-weight:600;
color:#1e293b;
padding:2px 4px;
outline:none;
width:100%;
box-sizing:border-box;
transition:border-bottom-color 0.2s;
}.mriia-inline-input:focus, .mriia-inline-textarea:focus{
border-bottom-color:#2563eb;
border-bottom-style:solid;
background:rgba(239, 246, 255, 0.5);
}.mriia-inline-textarea{
resize:vertical !important;
line-height:1.5;
min-height:110px !important;
}.report-signatures-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:20px;
}.signature-row{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-top:15px;
}.signature-line{
border-bottom:1px solid #000000;
flex:1;
margin:0 10px;
min-width:60px;
height:18px;
}.report-footer-note{
font-size:10px;
color:#4b5563;
margin-top:15px;
line-height:1.3;
}@media print{
#app-sidebar,
#mobile-topbar,
#mobile-bottom-nav,
.gb-tabs-row,
.gb-admin-journal-subtitle,
.summary-page-wrapper > div:first-child,
.summary-page-wrapper > .gb-admin-journal-subtitle,
#summary-performance-view > .summary-page-wrapper > div:first-child,
.modal-overlay,
.journal-tab,
#journals-tabs-wrap{
display:none !important;
}body, html{
background:#ffffff !important;
color:#000000 !important;
margin:0 !important;
padding:0 !important;
width:100% !important;
height:auto !important;
overflow:visible !important;
}#app-main, main.main-content, #summary-performance-view, .summary-page-wrapper{
background:transparent !important;
margin:0 !important;
padding:0 !important;
width:100% !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
position:static !important;
display:block !important;
}#mriia-print-container{
display:block !important;
position:absolute !important;
left:0 !important;
top:0 !important;
width:100% !important;
z-index:99999 !important;
}.mriia-doc-page{
page-break-before:always !important;
break-before:page !important;
page-break-after:always !important;
break-after:page !important;
page-break-inside:avoid !important;
break-inside:avoid !important;
border:none !important;
border-radius:0 !important;
margin:0 !important;
padding:10mm 15mm !important;
width:100% !important;
min-height:0 !important;
background:#ffffff !important;
color:#000000 !important;
box-sizing:border-box !important;
}.mriia-doc-page:first-child{
page-break-before:avoid !important;
break-before:avoid !important;
}.mriia-inline-input, .mriia-inline-textarea{
border-bottom:1px solid #000000 !important;
color:#000000 !important;
}.mriia-inline-input:placeholder-shown, .mriia-inline-textarea:placeholder-shown{
border-bottom-color:transparent !important;
}*{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}table, th, td{
border-color:#000000 !important;
}.nush-table, .nush-table th, .nush-table td,
.old-table, .old-table th, .old-table td{
border-color:#3b82f6 !important;
}.nush-table th, .old-table th{
background-color:#eff6ff !important;
color:#1e3a8a !important;
}.nush-category-header, .old-table-section{
background-color:#dbe7f7 !important;
color:#1e3a8a !important;
}}
@media (max-width:768px){
#settings .settings-layout{display:none !important}#settings .left-nav-card{display:none !important}#settings-mobile-shell{display:block;padding:16px 12px 86px}.settings-mobile-shell .mobile-settings-inner{background:transparent}.mobile-menu-title{color:#fff;font-size:20px;font-weight:800;margin:6px 0 12px}.mobile-widget-myclass{margin-bottom:12px}.myclass-card{background:rgba(255,255,255,0.12);border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,0.08)}.myclass-title{font-weight:800;color:white}.myclass-sub{font-size:12px;color:rgba(255,255,255,0.9);margin-top:4px}.myclass-action{color:rgba(255,255,255,0.9);font-size:22px}.mobile-menu-cards{display:flex;flex-direction:column;gap:12px;margin-top:8px}.mobile-card{background:rgba(255,255,255,0.06);border-radius:14px;padding:8px}.mobile-card-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.04);color:white;cursor:pointer}.mobile-card-item i{width:28px;text-align:center;font-size:16px;color:white}.mobile-card-item .chev{margin-left:auto;color:rgba(255,255,255,0.9)}.mobile-logout-wrap{display:flex;justify-content:center;margin-top:8px}.mobile-logout-btn{background:transparent;border:1px solid rgba(255,255,255,0.22);color:white;padding:12px 36px;border-radius:24px;font-weight:800}header.header{display:none !important}}@media (min-width:769px){
#settings-mobile-shell{display:none !important}}
.custom-select-dropdown:not(.custom-select-dark),
.home-empty-icon,
.news-quick-post,
.ktp-panel-left,
.ktp-panel-right,
#mobile-topbar{
background-color:#ffffff;
}.performance-mode #splash-overlay{
display:none !important;
opacity:0 !important;
visibility:hidden !important;
}.performance-mode *,
.performance-mode *::before,
.performance-mode *::after,
.battery-power-saving-extreme *,
.visibility-restoring *{
transition:none !important;
animation:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
will-change:auto !important;
}.performance-mode .journal-card,
.performance-mode .class-card,
.performance-mode .teacher-card,
.performance-mode .news-card,
.performance-mode .schedule-card,
.performance-mode .student-item,
.performance-mode .event-item,
.performance-mode .home-lesson-card,
.performance-mode .gb-row,
.performance-mode .schc-pool-item{
content-visibility:auto;
contain-intrinsic-size:auto 60px;
}.simulated-tab-hidden *{
transition-duration:0.12s !important;
transition-timing-function:cubic-bezier(0.2, 0.9, 0.3, 1) !important;
animation-duration:0.12s !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
box-shadow:none !important;
text-shadow:none !important;
}.simulated-tab-hidden #splash-overlay,
.simulated-tab-hidden #mobile-sidebar-backdrop,
.simulated-tab-hidden .submenu,
.simulated-tab-hidden .custom-select-dropdown,
.simulated-tab-hidden .custom-select-trigger,
.simulated-tab-hidden .custom-select-option,
.simulated-tab-hidden .nav-item,
.simulated-tab-hidden .sidebar,
.simulated-tab-hidden .sidebar *{
transition-duration:0.28s !important;
transition-timing-function:cubic-bezier(0.2, 0.9, 0.3, 1) !important;
animation-duration:0.55s !important;
}.performance-mode .login-wrap,
.performance-mode .login-card,
.performance-mode .modal-window,
.performance-mode .sidebar,
.performance-mode .news-quick-post,
.performance-mode .big-card,
.performance-mode .news-card,
.performance-mode .settings-side-card,
.performance-mode .mobile-settings-inner,
.performance-mode .custom-select-dropdown:not(.custom-select-dark),
.performance-mode .custom-select-options{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
background:#ffffff !important;
border:1px solid #e2e8f0 !important;
}.performance-mode .sidebar{
background-color:#f1f5f9 !important;
border-right:1px solid #cbd5e1 !important;
}.performance-mode .modal-overlay,
.battery-power-saving-extreme .modal-overlay{
background:rgba(0, 0, 0, 0.4) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}.performance-mode .hero-blob,
.simulated-tab-hidden .hero-blob,
.simulated-tab-hidden .decor-circles,
.simulated-tab-hidden .decor-circles span,
.performance-mode .decor-circles,
.performance-mode .decor-circles span,
.battery-power-saving .hero-blob,
.battery-power-saving .decor-circles,
.battery-power-saving .decor-circles span{
display:none !important;
}.no-decorations-mode .hero-blob,
.no-decorations-mode .decor-circles,
.no-decorations-mode .decor-circles span{
display:none !important;
}.disable-hover-mode .big-card.clickable:hover,
.disable-hover-mode .schedule-card:hover,
.disable-hover-mode .mriia-hw-filebox:hover,
.disable-hover-mode .calendar-day:hover,
.disable-hover-mode .event-list-item:hover,
.disable-hover-mode .date-clickable:hover,
.disable-hover-mode .schedule-day:hover,
.disable-hover-mode .report-metrics .metric-card:hover,
.disable-hover-mode .home-lesson-card:hover,
.disable-hover-mode .primary-action-btn:hover,
.disable-hover-mode .border-action-btn:hover,
.disable-hover-mode .login-btn:hover{
transform:none !important;
transition:none !important;
animation:none !important;
}.disable-hover-mode .gb-cell:hover,
.disable-hover-mode .gb-row:hover,
.disable-hover-mode tr:hover td{
background-color:inherit !important;
}#gb-table thead tr:nth-child(1) th,
#att-table thead tr:nth-child(1) th{
position:sticky !important;
top:0px !important;
z-index:2200 !important;
background:#ffffff !important;
}#gb-table thead tr:nth-child(2) th,
#att-table thead tr:nth-child(2) th{
position:sticky !important;
top:34px !important;
z-index:2150 !important;
background:#ffffff !important;
}#gb-table thead th.gb-sticky-col,
#gb-table thead th.gb-sticky-col-2,
#gb-table thead th.gb-sticky-avg,
#gb-table thead th.gb-avg-col,
#att-table thead th.gb-sticky-col,
#att-table thead th.gb-sticky-col-2,
#att-table thead th.gb-sticky-avg,
#att-table thead th.gb-avg-col{
z-index:2300 !important;
background:#ffffff !important;
}.class-card,
.journal-card,
.news-card,
.schedule-card,
.schedule-day{
content-visibility:auto;
}.class-card{
contain-intrinsic-size:200px;
}.journal-card{
contain-intrinsic-size:140px;
}.news-card{
contain-intrinsic-size:300px;
}.schedule-card{
contain-intrinsic-size:auto 140px;
}.schedule-day{
contain-intrinsic-size:400px;
}.custom-select-dropdown,
.custom-select-options,
.home-empty-icon{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}.big-card:hover,
.schedule-card:hover,
.mriia-hw-filebox:hover,
.cal-m-day:hover,
.event-list-item:hover,
.date-clickable:hover,
.metric-card:hover,
.home-lesson-card:hover,
.primary-action-btn:hover,
.border-action-btn:hover,
.login-btn:hover{
will-change:auto;
}.hero-blob,
.decor-circles,
.decor-circles span{
pointer-events:none;
}#mobile-topbar,
.custom-select-options,
.home-empty-icon{
}.home-empty-icon{
}#mobile-topbar{
}.teachers-table-scroll,
.custom-select-options,
#modal-subjects-list,
.mriia-doc-container,
.settings-list-container,
.table-responsive,
.schc-tablewrap,
.schc-pool-body,
.teachers-table-wrap,
.planning-table-wrap,
.dash-table-wrap,
.remark-log-table-wrap{
-webkit-overflow-scrolling:touch;
}.news-quick-post,
.metric-card,
.teacher-card,
.class-card,
.student-item,
.settings-card,
.schedule-lesson-card,
.schc-pool-item,
.ktp-panel-left,
.ktp-panel-right,
#extra-students-list-modal > *,
#ktp-lessons-list > *,
#ktp-themes-list > *{
content-visibility:auto;
contain-intrinsic-size:auto 120px;
}#ktp-lessons-list > *,
#ktp-themes-list > *,
#extra-students-list-modal > *{
content-visibility:auto;
contain-intrinsic-size:auto 72px;
}.battery-power-saving .hero-blob,
.battery-power-saving .decor-circles,
.battery-power-saving .decor-circles span{
display:none !important;
}.battery-power-saving-extreme *{
transition:none !important;
animation:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
transform:none !important;
}.battery-power-saving-extreme .login-wrap,
.battery-power-saving-extreme .login-card,
.battery-power-saving-extreme .modal-window,
.battery-power-saving-extreme .sidebar,
.battery-power-saving-extreme .news-quick-post,
.battery-power-saving-extreme .big-card,
.battery-power-saving-extreme .news-card,
.battery-power-saving-extreme .settings-side-card{
background:#ffffff !important;
}html, body{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}.page-section:not(.active){
display:none !important;
content-visibility:hidden !important;
}.news-card,
.settings-card,
.schedule-lesson-card,
.schc-pool-item{
content-visibility:auto;
contain-intrinsic-size:auto 60px;
}
.schedule-lesson-card,
.schc-pool-item,
.journal-card,
.class-card,
.teacher-card,
.news-card,
.settings-card,
.student-item {
content-visibility: auto;
contain-intrinsic-size: auto 120px;
}
.table-responsive,
#schedule-table-body,
#journals-grid-body {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}.journal-card,
.class-card,
.teacher-card{
contain:layout style;
content-visibility:auto;
contain-intrinsic-size:auto 140px;
}
.custom-select-dropdown,
.news-quick-post,
.ktp-panel-left,
.ktp-panel-right{
}.hero-blob,
.decor-circles,
.schc-tablewrap {
contain: layout paint;
}
.schc-table {
contain: layout style;
}
.schc-pool-class {
contain: layout style paint;
content-visibility: auto;
contain-intrinsic-size: auto 60px;
}
.schc-pool-chips {
contain: layout style;
}
.decor-circles span{
contain:strict;
pointer-events:none !important;
will-change:auto !important;
}.big-card,
.news-card,
.modal-window,
.login-card,
.custom-select-dropdown{
}.modal-overlay{
will-change:opacity;
transform:translateZ(0);
}.modal-window{
transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}.tab-background-hidden *,
.tab-background-hidden *::before,
.tab-background-hidden *::after{
animation-play-state:paused !important;
animation:none !important;
transition:none !important;
}
#gb-table,
#att-table{
transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.gb-wrapper{
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
}
@media (max-width:768px){
#settings .settings-layout{display:none !important}#settings .left-nav-card{display:none !important}#settings-mobile-shell{display:block;padding:16px 12px 86px}.settings-mobile-shell .mobile-settings-inner{background:transparent}.mobile-menu-title{color:#fff;font-size:20px;font-weight:800;margin:6px 0 12px}.mobile-widget-myclass{margin-bottom:12px}.myclass-card{background:rgba(255,255,255,0.12);border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,0.08)}.myclass-title{font-weight:800;color:white}.myclass-sub{font-size:12px;color:rgba(255,255,255,0.9);margin-top:4px}.myclass-action{color:rgba(255,255,255,0.9);font-size:22px}.mobile-menu-cards{display:flex;flex-direction:column;gap:12px;margin-top:8px}.mobile-card{background:rgba(255,255,255,0.06);border-radius:14px;padding:8px}.mobile-card-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.04);color:white;cursor:pointer}.mobile-card-item i{width:28px;text-align:center;font-size:16px;color:white}.mobile-card-item .chev{margin-left:auto;color:rgba(255,255,255,0.9)}.mobile-logout-wrap{display:flex;justify-content:center;margin-top:8px}.mobile-logout-btn{background:transparent;border:1px solid rgba(255,255,255,0.22);color:white;padding:12px 36px;border-radius:24px;font-weight:800}header.header{display:none !important}}@media (min-width:769px){
#settings-mobile-shell{display:none !important}}
#user-rights{background:var(--primary-blue)}#user-rights .user-rights-body{max-width:1180px;margin:0 auto}@media (min-width:769px){
#user-rights .user-rights-body{max-width:100%}}#user-rights .btn-primary{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.28)}#user-rights .btn-primary:hover{background:rgba(255,255,255,0.24)}#user-rights .action-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:transparent}#user-rights .action-btn:hover{background:rgba(11,97,255,0.08)}
.messages-bell{position:absolute;right:30px;top:20px;background:var(--primary-blue);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1200;border:1px solid #fff}.messages-bell .fa-bell{font-size:18px;color:#fff}.messages-count{position:absolute;top:6px;right:6px;background:#ef4444;color:white;font-size:11px;padding:3px 7px;border-radius:12px;font-weight:700}.messages-panel{position:absolute;right:30px;top:74px;width:340px;max-height:72vh;background:white;border-radius:12px;overflow:hidden;z-index:1200;display:flex;flex-direction:column}.messages-panel-header{padding:12px 14px;background:linear-gradient(90deg,#EFF6FF,#F0F9FF);display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#0f172a}.messages-close{background:transparent;border:none;font-size:18px;cursor:pointer}.conversations-list{padding:8px;overflow:auto;flex:1;background:#fff}.conv-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;cursor:pointer;gap:8px}.conv-item:hover{background:rgba(59,130,246,0.06)}.conv-title{font-weight:700;color:#0f172a}.conv-snippet{color:#6b7280;font-size:13px}.chat-window{padding:12px;display:flex;flex-direction:column;gap:8px;background:#f8fafc}.chat-messages{flex:1;overflow:auto;max-height:40vh;display:flex;flex-direction:column;gap:8px;padding:6px}.msg{max-width:80%;padding:8px 10px;border-radius:12px}.msg.out{align-self:flex-end;background:var(--primary-blue);color:white}.msg.in{align-self:flex-start;background:#e6f0ff;color:#0f172a}.chat-input-row{display:flex;gap:8px}.chat-input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #d1d5db}.chat-send-btn{background:var(--primary-blue);color:white;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
#login-screen { display: flex; }
#app-sidebar { display: none !important; }
#app-main { display: none !important; }
body.is-logged-in #login-screen { display: none !important; }
body.is-logged-in #app-sidebar { display: flex !important; }
body.is-logged-in #app-main { display: block !important; }
#news .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
#news.page-section {
min-height: calc(100vh - 40px);
flex-direction: column;
}
#news.page-section.active {
display: flex;
}
.news-quick-post {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px 20px 0 0;
padding: 16px;
margin-top: auto;
margin-bottom: 0;
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
gap: 12px;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.news-quick-input {
flex: 1;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 12px;
padding: 12px 18px;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
color: #1a1a1a;
}
.news-quick-send {
width: 44px;
min-width: 44px;
height: 44px;
border-radius: 12px !important;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
#news-container {
padding-bottom: 92px;
}
.news-card {
background: #4188fc;
border-radius: 20px;
padding: 24px;
position: relative;
transition: transform 0.3s ease;
border: none;
display: flex;
flex-direction: column;
min-height: 180px;
width: 100%;
box-sizing: border-box;
}
.news-card:hover {
transform: translateY(-5px);
}
.news-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.news-card-date {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.news-card-title {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
line-height: 1.4;
}
.news-card-content {
font-size: 15px;
color: rgba(255, 255, 255, 0.95);
line-height: 1.6;
flex-grow: 1;
}
.news-card-actions {
position: absolute;
top: 16px;
right: 16px;
display: flex;
gap: 8px;
opacity: 0;
transition: opacity 0.2s ease;
}
.news-card:hover .news-card-actions {
opacity: 1;
}
.news-action-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
}
.btn-edit { background: #eff6ff; color: #3b82f6; }
.btn-edit:hover { background: #3b82f6; color: #ffffff; }
.btn-delete { background: #fef2f2; color: #ef4444; }
.btn-delete:hover { background: #ef4444; color: #ffffff; }
.news-empty {
text-align: center;
padding: 60px;
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
color: rgba(255, 255, 255, 0.7);
grid-column: 1 / -1;
}
#add-lesson-submit-btn:hover { background: #7baaff !important; }
.btn-cancel:hover { background: #f8fafc !important; }
#modal-add-lesson .form-select, #modal-add-lesson .form-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
}
#add-lesson-date {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230b61ff' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 20px !important;
}
.schedule-grid {
pointer-events: auto !important;
z-index: 1 !important;
}
.schedule-cell {
pointer-events: auto !important;
cursor: cell !important;
z-index: 5 !important;
}
#schedule-table-body, #schedule-table-body-inner {
pointer-events: auto !important;
}
.nav-section .feedback-item {
display:flex;
align-items:center;
gap:10px;
padding:10px 12px 10px 12px;
border-radius:12px;
background:transparent;
color:inherit;
cursor:pointer;
transition: background-color 0.2s, color 0.2s;
margin-top:10px;
border:none;
justify-content:space-between;
width:100%;
box-sizing:border-box;
align-self:flex-start;
}
.nav-section .feedback-item i { font-size:15px; line-height:1; width:20px; margin-right:10px; text-align:center; }
.nav-section .feedback-item .feedback-label { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.nav-section .feedback-item .feedback-arrow { margin-left:auto; margin-right:12px; color:#000; font-size:14px; display:inline-flex; align-items:center; }
.nav-section .feedback-item .feedback-arrow svg { width:16px; height:16px; display:block; fill:currentColor; }
.nav-section .feedback-item:hover { background-color: #f3f4f6; }
.feedback-modal {
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:white;
border-radius:12px;
z-index:22000;
width: min(720px, 92%);
max-width:720px;
padding:20px;
display:none;
}
.feedback-modal .modal-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.feedback-modal .modal-body { display:flex; flex-direction:column; gap:12px; }
.feedback-modal textarea { width:100%; min-height:120px; padding:12px; border-radius:10px; border:1px solid #e6e6e6; resize:vertical; outline:none; }
.feedback-modal .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.feedback-overlay { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.45); z-index:21000; display:none; }
.sidebar-version {
font-size: 13.5px;
color: #888888;
padding: 0 12px;
margin-top: 4px;
text-align: center;
opacity: 1;
transition: opacity 0.2s ease;
font-weight: 500;
white-space: nowrap;
}
.sidebar.collapsed:not(:hover) .sidebar-version {
opacity: 0;
pointer-events: none;
}
/* ==========================================================================
   NEW SIDEBAR STYLING - EXACT 1:1 REPLICATION OF MRIYA REFERENCE
   ========================================================================== */
#app-sidebar.sidebar {
    width: 228px !important;
    min-width: 228px !important;
    max-width: 228px !important;
    background-color: #ffffff !important;
    border-right: 1px solid #eaedf2 !important;
    display: none;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    z-index: 10020 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

body.is-logged-in #app-sidebar.sidebar {
    display: flex !important;
}

body:not(.is-logged-in) #app-sidebar,
body:not(.is-logged-in) .sidebar,
body:not(.is-logged-in) #app-sidebar.sidebar,
html:not(.is-logged-in) #app-sidebar,
html:not(.is-logged-in) .sidebar,
html:not(.is-logged-in) #app-sidebar.sidebar {
    display: none !important;
}

#app-sidebar > .logo-area,
#app-sidebar > .sidebar-scroll,
#app-sidebar > .user-profile {
    zoom: 1 !important;
    margin-bottom: 0 !important;
}

#app-sidebar .logo-area {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 10px 0 12px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#app-sidebar .logo-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

#app-sidebar .sidebar-logo-img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
}

#app-sidebar .top-controls {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

#app-sidebar .ctrl-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #64748b !important;
    position: relative !important;
    margin: 0 !important;
    transform: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

#app-sidebar .ctrl-btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

#app-sidebar .ctrl-icon {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(543%) hue-rotate(177deg) brightness(92%) contrast(89%) !important;
    transition: filter 0.15s ease !important;
    margin: 0 !important;
}

#app-sidebar .ctrl-btn:hover .ctrl-icon {
    filter: brightness(0) saturate(100%) invert(14%) sepia(23%) saturate(1048%) hue-rotate(182deg) brightness(94%) contrast(92%) !important;
}

#app-sidebar .ctrl-badge {
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
}

#app-sidebar.sidebar > .sidebar-divider,
#app-sidebar > .sidebar-divider,
#app-sidebar.sidebar .sidebar-divider,
#app-sidebar .sidebar-divider {
    border: none !important;
    border-top: 1px solid #edf0f5 !important;
    margin: 6px 12px 8px 12px !important;
    height: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#app-sidebar.sidebar .sidebar-scroll .sidebar-divider,
#app-sidebar .sidebar-scroll .sidebar-divider {
    margin: 8px 12px !important;
}

#app-sidebar .sidebar-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 8px 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#app-sidebar .sidebar-scroll::-webkit-scrollbar {
    width: 6px !important;
}

#app-sidebar .sidebar-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
}

#app-sidebar .nav-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#app-sidebar .nav-item.role-hidden,
#app-sidebar .nav-group.role-hidden,
#app-sidebar .submenu.role-hidden,
#app-sidebar .admin-only.role-hidden,
.role-hidden {
    display: none !important;
}

/* Only hide header icons on home screen */
body:has(#home.active) .header .header-page-icon,
body:has(#home.active) #header-top .header-page-icon {
    display: none !important;
}

#user-school-wrap,
#sidebar-user-card #user-school-wrap,
#user-school {
    display: none !important;
}

.header.reduced-header #header-top {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.5px !important;
    font-size: 15.1px !important;
    line-height: 1 !important;
}

.header.reduced-header .header-page-icon,
.lesson-day-header .header-page-icon,
.ktp-header .header-page-icon,
#ktp-import-view .ktp-header .header-page-icon,
#lesson-day-header-top .header-page-icon,
#tc-header-top .header-page-icon,
#ktp-header-top .header-page-icon {
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    margin-right: 1px !important;
    transform: translateY(2px) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: inherit;
    transition: color 0.15s ease, opacity 0.15s ease !important;
}

.header.reduced-header .header-page-icon img,
.lesson-day-header .header-page-icon img,
.ktp-header .header-page-icon img,
#ktp-import-view .ktp-header .header-page-icon img,
#header-top .header-page-icon img,
#lesson-day-header-top .header-page-icon img,
#tc-header-top .header-page-icon img,
#ktp-header-top .header-page-icon img,
.header-v2-img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: contain !important;
    transition: opacity 0.15s ease, color 0.15s ease !important;
}

/* НЕМАРШРУТНІ ЗАВЖДИ БІЛІ (opacity: 1, color: #ffffff) */
.header.reduced-header #header-top:not(:has(.journal-link)):not(:has(.header-crumb-sep)):not(:has(a)) .header-page-icon,
.header.reduced-header #header-top:not(:has(.journal-link)):not(:has(.header-crumb-sep)):not(:has(a)) .header-page-icon img,
#header-top:not(:has(.journal-link)):not(:has(.header-crumb-sep)):not(:has(a)) .header-page-icon,
#header-top:not(:has(.journal-link)):not(:has(.header-crumb-sep)):not(:has(a)) .header-page-icon img {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* МАРШРУТНІ: іконка строго бере колір і прозорість першого слова (0.75 за замовчуванням) */
#header-top:has(.journal-link) .header-page-icon,
#header-top:has(.journal-link) .header-page-icon img,
#header-top:has(.header-crumb-sep) .header-page-icon,
#header-top:has(.header-crumb-sep) .header-page-icon img,
#header-top:has(a) .header-page-icon,
#header-top:has(a) .header-page-icon img,
.lesson-day-header .header-page-icon,
.lesson-day-header .header-page-icon img,
.ktp-header .header-page-icon,
.ktp-header .header-page-icon img,
#lesson-day-header-top .header-page-icon,
#lesson-day-header-top .header-page-icon img,
#tc-header-top .header-page-icon,
#tc-header-top .header-page-icon img,
#ktp-header-top .header-page-icon,
#ktp-header-top .header-page-icon img,
#ktp-import-view .ktp-header .header-page-icon,
#ktp-import-view .ktp-header .header-page-icon img {
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 0.75 !important;
    cursor: pointer !important;
}

/* МАРШРУТНІ: при ховері на шапку, іконку або перше посилання — іконка і посилання стають чисто білими (#ffffff, opacity: 1) */
#header-top:has(.journal-link:hover) .header-page-icon,
#header-top:has(.journal-link:hover) .header-page-icon img,
#header-top:has(a:hover) .header-page-icon,
#header-top:has(a:hover) .header-page-icon img,
#header-top .header-page-icon:hover,
#header-top .header-page-icon:hover img,
.lesson-day-header:has(.journal-link:hover) .header-page-icon,
.lesson-day-header:has(.journal-link:hover) .header-page-icon img,
.lesson-day-header .header-page-icon:hover,
.lesson-day-header .header-page-icon:hover img,
.ktp-header:has(.journal-link:hover) .header-page-icon,
.ktp-header:has(.journal-link:hover) .header-page-icon img,
.ktp-header .header-page-icon:hover,
.ktp-header .header-page-icon:hover img,
#ktp-import-view .ktp-header:has(.journal-link:hover) .header-page-icon,
#ktp-import-view .ktp-header:has(.journal-link:hover) .header-page-icon img,
#ktp-import-view .ktp-header .header-page-icon:hover,
#ktp-import-view .ktp-header .header-page-icon:hover img {
    color: #ffffff !important;
    opacity: 1 !important;
}

#header-top:has(.header-page-icon:hover) .journal-link,
#header-top:has(.header-page-icon:hover) a,
.lesson-day-header:has(.header-page-icon:hover) .journal-link,
.ktp-header:has(.header-page-icon:hover) .journal-link,
#ktp-import-view .ktp-header:has(.header-page-icon:hover) .journal-link {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Кнопка розгортання списку журналів має стояти рівно там, де хедер по висоті */
.header.reduced-header #header-top .subject-toggle-wrap,
.subject-toggle-wrap {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    vertical-align: middle !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 0 0 6px !important;
    transform: none !important;
    height: auto !important;
}

.header.reduced-header #header-top .subject-journal-toggle,
.subject-journal-toggle {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.subject-journal-toggle svg {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
}

/* Підняти action-кнопки у хедері вище */
.header.reduced-header .header-actions button,
.lesson-day-header button.lesson-day-back-btn,
.ktp-header button:not(.ctrl-btn):not(.subject-journal-toggle) {
    transform: translateY(-4px) !important;
}

/* Підняти маленькі хедери та хедери-маршрути назад вище */
.header.reduced-header,
#app-main > .header.reduced-header {
    margin-top: -8px !important;
}

.header.reduced-header #header-top {
    margin-bottom: 0 !important;
}

.header.reduced-header #header-bottom {
    display: none !important;
}

.lesson-day-header,
#lesson-views-host .lesson-day-header,
#test-constructor-view .lesson-day-header {
    margin-top: 4px !important;
}

.ktp-header,
#ktp-import-view .ktp-header {
    margin-top: -8px !important;
}

#learning-subgroups.page-section {
background: var(--primary-blue, #0f68f8) !important;
min-height: 100vh !important;
padding: 10px 16px 24px 16px !important;
margin: -20px -36px 0px -36px !important;
width: auto !important;
max-width: none !important;
box-sizing: border-box !important;
}
#learning-subgroups .section-header {
border: none !important;
margin-top: 0px !important;
margin-bottom: 8px !important;
padding: 0 !important;
background: transparent !important;
}
#learning-subgroups .section-title {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 14px !important;
font-weight: 500 !important;
margin: 0 !important;
}
#learning-subgroups .breadcrumb-separator {
color: rgba(255, 255, 255, 0.6) !important;
margin: 0 4px !important;
}
#learning-subgroups .breadcrumb-link {
color: rgba(255, 255, 255, 0.8) !important;
cursor: pointer !important;
text-decoration: none !important;
}
#learning-subgroups .breadcrumb-link:hover {
color: #ffffff !important;
}
#learning-subgroups .breadcrumb-current {
color: #ffffff !important;
}
.groups-filters-row select {
appearance: none !important;
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 12px !important;
color: #ffffff !important;
padding: 10px 36px 10px 16px !important;
font-size: 14px !important;
font-weight: 600 !important;
min-width: 260px !important;
cursor: pointer !important;
outline: none !important;
transition: background 0.2s !important;
}
.groups-filters-row select:hover {
background: rgba(255, 255, 255, 0.18) !important;
}
.parallel-title {
color: #ffffff !important;
font-size: 14px !important;
font-weight: 600 !important;
margin-top: 10px !important;
margin-bottom: 16px !important;
}
.cards-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 16px !important;
margin-bottom: 24px !important;
}
.group-class-card {
background: #ffffff !important;
border-radius: 18px !important;
padding: 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 140px !important;
transition: transform 0.2s ease;
box-sizing: border-box !important;
cursor: pointer !important;
position: relative !important;
}
.group-class-card:hover {
transform: translateY(-2px) !important;
}
.card-badge {
background: #eef5ff !important;
border: 1px solid #dbeafe !important;
color: #1e75ff !important;
padding: 6px 12px !important;
border-radius: 20px !important;
font-size: 11px !important;
font-weight: 700 !important;
display: inline-block !important;
width: fit-content !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.card-label {
font-size: 10px !important;
color: #8b9bb4 !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-bottom: 2px !important;
}
.card-value {
font-size: 24px !important;
font-weight: 700 !important;
color: #0f172a !important;
line-height: 1 !important;
}
.card-info-text {
font-size: 14px !important;
font-weight: 600 !important;
color: #1e293b !important;
min-height: 18px !important;
}
.add-subgroup-btn {
border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
background: transparent !important;
color: #ffffff !important;
padding: 10px 24px !important;
border-radius: 24px !important;
font-weight: 700 !important;
font-size: 14px !important;
cursor: pointer !important;
outline: none !important;
transition: background 0.2s, border-color 0.2s !important;
}
.add-subgroup-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #ffffff !important;
}
#learning-bells .bells-page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 16px 0; }
#learning-bells .bells-page-title { color: #fff; font-size: 22px; font-weight: 600; margin: 0; }
#learning-bells .bells-add-btn { background: #fff; color: var(--primary-blue, #0f68f8); border: none; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; transition: transform 0.15s ease; }
#learning-bells .bells-table { padding: 6px 24px 12px 24px; }
#learning-bells .bells-grid { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(90px, 0.55fr) minmax(120px, 0.8fr) minmax(220px, 1.6fr) minmax(330px, auto); gap: 16px; align-items: start; }
#learning-bells .bells-thead { color: #6b7280; font-size: 13px; font-weight: 600; padding: 16px 0 12px 0; border-bottom: 1px solid #eef2f7; }
#learning-bells .bells-thead .bells-sort { cursor: pointer; user-select: none; margin-left: 6px; color: #9ca3af; }
#learning-bells .bells-thead .bells-col-bells { text-align: right; color: #374151; font-weight: 700; }
#learning-bells .bells-row { padding: 20px 0; border-bottom: 1px solid #eef2f7; }
#learning-bells .bells-row:last-child { border-bottom: none; }
#learning-bells .bells-cell-name { color: #0f172a; font-size: 14px; font-weight: 600; }
#learning-bells .bells-cell { color: #374151; font-size: 13px; font-weight: 500; }
#learning-bells .bells-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#learning-bells .bells-chip { background: #f1f5f9; color: #334155; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#learning-bells .bells-card-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#learning-bells .bells-card-actions { display: flex; gap: 10px; }
#learning-bells .bells-card-actions button { background: transparent; border: none; color: #9ca3af; font-size: 14px; cursor: pointer; padding: 2px 4px; transition: color 0.15s ease; }
#learning-bells .bells-card-actions button:hover { color: #0f68f8; }
#learning-bells .bells-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; width: 330px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
#learning-bells .bells-card-row { display: flex; align-items: center; gap: 10px; }
#learning-bells .bells-lesson-num { color: #374151; font-size: 12px; font-weight: 600; min-width: 52px; }
#learning-bells .bells-time-pill { background: #f1f5f9; color: #334155; border-radius: 8px; padding: 5px 14px; font-size: 12px; font-weight: 600; }
#learning-bells .bells-break { color: #94a3b8; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; white-space: nowrap; }
@media (max-width: 1100px) {
#learning-bells .bells-grid { grid-template-columns: 1fr; gap: 10px; }
#learning-bells .bells-thead { display: none; }
#learning-bells .bells-card { width: 100%; }
#learning-bells .bells-card-wrap { align-items: stretch; }
#learning-bells .bells-card-actions { justify-content: flex-end; }
}
#learning-schedule.page-section {
background: var(--primary-blue, #0f68f8) !important;
min-height: 100vh !important;
padding: 0px 16px 0px 16px !important;
margin: -45px -36px 0px -36px !important;
width: auto !important;
max-width: none !important;
box-sizing: border-box !important;
}
#learning-schedule-body { padding: 0 !important; overflow: visible !important; background: transparent !important; }
.schc-root { display: flex; flex-direction: column; gap: 4px; margin-top: -34px; }
.schc-utabs { display: flex; align-items: center; gap: 26px; margin-top: -20px; }
.schc-utab { position: relative; border: none !important; outline: none !important; background: transparent; color: rgba(255,255,255,.55); font-size: 15px; font-weight: 700; padding: 4px 1px 9px; cursor: pointer; font-family: inherit; }
.schc-utab:focus, .schc-utab:focus-visible, .schc-utab:active { border: none !important; outline: none !important }
.schc-utab:hover { color: rgba(255,255,255,.85); }
.schc-utab.active { color: #fff; font-weight: 800; }
.schc-utab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 2px; background: #fff; }
.schc-generate-btn { background: #fff; color: #0b61ff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; margin-top: 38px; align-self: flex-end; transition: transform .15s ease; }
.schc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 8px 12px; flex-wrap: wrap; }
.schc-toolbar-left, .schc-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.schc-select-wrap { position: relative; }
.schc-select { appearance: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #fff; padding: 9px 34px 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; outline: none; font-family: inherit; }
.schc-select option { color: #0f172a; background: #fff; }
.schc-select-wrap .fa-chevron-down { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.85); font-size: 12px; pointer-events: none; }
.schc-icon-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(255,255,255,.14); color: #fff !important; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.schc-icon-btn i, .schc-icon-btn svg { color: inherit !important; }
.schc-icon-btn.active { background: #fff; color: #0b61ff !important; }
.schc-zoom { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 999px !important; padding: 3px 4px !important; height: 38px !important; gap: 2px !important; box-sizing: border-box !important; }
.schc-zoom button { border: none !important; background: transparent !important; color: rgba(255, 255, 255, 0.92) !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 10px !important; height: 32px !important; min-width: 44px !important; border-radius: 999px !important; cursor: pointer !important; font-family: inherit !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.15s ease, color 0.15s ease !important; box-sizing: border-box !important; }
.schc-zoom button:hover:not(.active) { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; }
.schc-zoom button.active { background: rgba(255, 255, 255, 0.95) !important; color: #1c77ff !important; font-weight: 800 !important }
.schc-tab-wrap { margin-top: -2px; }
.schc-content { flex: 1; min-height: 0; }
.schc-shift-row { display: flex; gap: 16px; align-items: stretch; }
.schc-shift-card { flex: 1; min-width: 0; background: #fff; border-radius: 16px; overflow: auto; height: calc(108.69565vh - 165px); }
.schc-table { --schc-day-header-height: 31px; border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.schc-table th, .schc-table td { border-bottom: 1px solid #edf1f7; border-right: 1px solid #edf1f7; }
.schc-table thead tr:first-child th { position: sticky; top: 0; z-index: 4; }
.schc-table thead tr:nth-child(2) th { position: sticky; top: var(--schc-day-header-height); z-index: 3; }
.schc-corner { position: sticky; top: 0 !important; left: 0; z-index: 6 !important; background: #fff; text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 800; color: #0f172a; min-width: 110px; max-width: 150px; }
.schc-day { height: var(--schc-day-header-height); box-sizing: border-box; background: #f7f9fd; color: #334155; font-size: 12px; font-weight: 800; line-height: 14px; padding: 8px 4px; }
.schc-day.day-start, .schc-slot.day-start, .schc-cell.day-start { border-left: 2px solid #e2e8f0 !important; }
.schc-slot { background: #fbfcff; padding: 6px 4px; min-width: 85.5px; }
.schc-slot .n { color: #0f172a; font-size: 12px; font-weight: 800; }
.schc-slot .t { color: #94a3b8; font-size: 9px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.schc-cls { position: sticky; left: 0; z-index: 2; background: #fff; padding: 8px 12px; font-size: 12px; font-weight: 800; color: #0f172a; min-width: 110px; max-width: 150px; text-align: left; }
.schc-cell { text-align: left; padding: 2px; min-width: 85.5px; width: 85.5px; max-width: 85.5px; height: 30px; box-sizing: border-box; cursor: pointer; }
.schc-cell .schc-chip { display: block; height: 100%; box-sizing: border-box; padding: 0 5px; margin: 0; max-width: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 26px; }
.schc-cell-split { display: flex !important; flex-direction: column !important; align-items: stretch; height: 100%; gap: 1px; }
.schc-cell-half { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.schc-cell .schc-chip-half { display: block; width: 100%; height: 100%; box-sizing: border-box; background: #c7ddfb; color: #000; border: 1px solid #82b4f4; border-radius: 4px !important; padding: 0 4px; text-align: left; font-size: 8px; font-weight: 800; cursor: pointer; font-family: inherit; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schc-chip-half:hover { background: #bfdbfe; }
.schc-cell:hover { background: #f1f5f9; }
.schc-cell.has:hover { background: #f7faff; }
.schc-cell.empty { background: transparent; }
.schc-cell.prohibited { background: #ededed; color: #9ca3af; font-size: 12px; text-align: center; vertical-align: middle; }
.schc-cell.prohibited i { color: #9ca3af; font-size: 14px; }
.schc-cell.prohibited:hover { background: #e2e2e2; color: #9ca3af; }
.schc-chip { display: block; width: 100%; background: #c7ddfb; color: #000 !important; border: 1px solid #82b4f4; border-radius: 6px !important; padding: 4px 5px; text-align: left; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; }
.schc-cell .schc-chip[data-imp="1"] { cursor: grab; }
.schc-cell .schc-chip[data-imp="1"]:active { cursor: grabbing; }
.schc-cell .schc-chip[data-pin="1"] { cursor: default; }
.schc-root.pin-mode #schc-btn-pin { background: rgba(255,255,255,.35); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.schc-root.pin-mode td.schc-cell { cursor: crosshair; }
.schc-chip:hover { background: #b4d2f8; }
.schc-pool { width: 340px; flex: none; background: #fff; border-radius: 16px; display: flex; flex-direction: column; height: calc(108.69565vh - 165px); }
.schc-pool-head { display: flex; align-items: center; padding: 0; border-bottom: 1px solid #eef2f7; }
.schc-pool-cls-head { flex: 0 0 92px; min-width: 92px; max-width: 92px; padding: 10px; font-size: 12px; font-weight: 800; color: #0f172a; border-right: 1px solid #eef2f7; }
.schc-pool-title { flex: 1; font-size: 12px; font-weight: 800; color: #0f172a; padding: 10px 8px; }
.schc-pool-icons { display: flex; gap: 10px; padding-right: 10px; }
.schc-pool-icons button { border: none; background: transparent; color: #0b61ff !important; font-size: 14px; cursor: pointer; padding: 2px; }
.schc-pool-icons button i, .schc-pool-icons button svg { color: inherit !important; }
.schc-pool-icons button.active { color: #0846b8 !important; }
.schc-pool-body { padding: 0; overflow: auto; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.schc-pool-class { display: flex; align-items: stretch; border-bottom: 1px solid #eef2f7; min-height: 30px; width: max-content; min-width: 100%; }
.schc-pool-cls-name { flex: 0 0 92px; min-width: 92px; max-width: 92px; font-size: 12px; font-weight: 800; color: #0f172a; padding: 4px 10px; background: #fff; border-right: 1px solid #eef2f7; display: flex; align-items: center; position: sticky; left: 0; z-index: 2; }
.schc-pool-class:nth-child(even) .schc-pool-cls-name { background: #e8f0fe; }
.schc-pool-chips { flex: 1; display: flex; flex-wrap: nowrap; overflow: visible; gap: 4px; padding: 2px; min-height: 30px; align-items: center; width: max-content; }
.schc-pool-chips .schc-chip { width: 85.5px; height: 26px; box-sizing: border-box; flex: 0 0 auto; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 24px; padding: 0 5px; text-align: left; cursor: grab; border-radius: 6px !important; }
.schc-pool-chips .schc-chip.selected { outline: 2px solid #0b61ff; background: #b4d2f8; }
.schc-pool-chips .schc-chip:active { cursor: grabbing; }
.schc-pool-empty { color: #94a3b8; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 10px; }
.schc-empty-state { background: #fff; border-radius: 16px; padding: 28px; color: #64748b; font-weight: 700; text-align: center; }
.schc-ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px; border: none; border-radius: 10px; background: linear-gradient(135deg, #0b61ff, #3b82f6); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; transition: transform .15s ease; letter-spacing: .1px; white-space: nowrap; }
.schc-ai-btn:active { transform: translateY(0); }
.schc-ai-btn i { font-size: 12px; }
.schc-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px; border: none; border-radius: 10px; background: #217346; color: #fff !important; font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; transition: background-color .15s ease; letter-spacing: .1px; white-space: nowrap; }
.schc-export-btn:hover { background: #1a5c38; }
.schc-export-btn i { font-size: 13px; color: #fff !important; }
.schc-ai-assistant-btn { position: fixed; right: 22px; bottom: 22px; z-index: 9998; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, #eafaff, #c3ecfa); color: #2563eb; font-size: 14px; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(37,99,235,.26), 0 1px 4px rgba(37,99,235,.15), inset 0 1px 0 rgba(255,255,255,.85); transition: transform .18s ease, box-shadow .18s ease; }
.schc-ai-assistant-btn:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(37,99,235,.34), 0 2px 6px rgba(37,99,235,.2); }
.schc-ai-assistant-btn:active { transform: scale(.92); }
.schc-ai-assistant-btn i { color: #2563eb; }
.schc-ai-assistant-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; }
.schc-ai-assistant-btn.schc-fab-top { top: 14px; bottom: auto; }
@media print { .schc-ai-assistant-btn, .schc-ai-assistant-popover { display: none !important; } }
.schc-ai-assistant-popover { position: fixed; z-index: 10000; width: min(380px, calc(100vw - 20px)); background: #ffffff; border: 1px solid #dff0fa; border-radius: 20px; box-shadow: 0 18px 50px rgba(2,132,199,.25), 0 4px 12px rgba(2,132,199,.10); overflow: hidden; animation: schcAipIn .32s cubic-bezier(.34,1.56,.64,1); font-family: inherit; display: flex; flex-direction: column; }
@keyframes schcAipIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.schc-aip-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid #edf5fb; background: linear-gradient(135deg, #f2fbff, #e8f6fe); }
.schc-aip-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #2563eb); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; box-shadow: 0 3px 10px rgba(37,99,235,.35); }
.schc-aip-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.schc-aip-titles b { font-size: 14.5px; color: #0f172a; font-weight: 800; }
.schc-aip-titles small { font-size: 11px; color: #64748b; font-weight: 600; }
.schc-aip-close { width: 26px; height: 26px; border: none; background: #eaf4fb; border-radius: 50%; color: #64748b; font-size: 15px; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.schc-aip-close:hover { background: #d8ecf9; color: #334155; }
.schc-aip-msgs { max-height: 300px; min-height: 64px; flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: #fdffff; }
.schc-aip-bubble { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.schc-aip-bubble.bot { align-self: flex-start; background: #ecfbff; color: #155e75; border: 1px solid #cff2fc; border-bottom-left-radius: 5px; }
.schc-aip-bubble.me { align-self: flex-end; background: #dbeafe; color: #1e3a8a; border-bottom-right-radius: 5px; }
.schc-aip-form { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid #edf5fb; background: #f7fcff; }
.schc-aip-form input { flex: 1; min-width: 0; padding: 10px 13px; border: 1.5px solid #d6ebf7; border-radius: 999px; font-family: inherit; font-size: 13.5px; outline: none; transition: border-color .2s, box-shadow .2s; background: #fff; }
.schc-aip-form input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.16); }
.schc-aip-form button { width: 40px; height: 40px; flex-shrink: 0; border: none; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, opacity .15s ease; }
.schc-aip-form button:hover { opacity: .92; }
.schc-aip-form button:active { transform: scale(.92); }
@media (max-width: 1100px) {
.schc-shift-row { flex-direction: column; }
.schc-pool { width: 100%; }
}
.schc-pool-class { contain: layout style; }
.schc-cell { contain: layout style; }
.schc-chip, .schc-chip-half { transition: background-color 0.12s ease; }
@media (hover: none) and (pointer: coarse) {
.schc-cell:hover, .schc-cell.has:hover { background: inherit; }
.schc-cell.prohibited:hover { background: #ededed; color: #b3b3b3; }
.schc-chip:hover, .schc-chip-half:hover { background: initial; }
.schc-pool-chips .schc-chip:hover { background: initial; }
}
.mriia-accordion { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; box-sizing:border-box; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; padding:28px 40px 48px; }
.mriia-accordion .accordion-item { margin-bottom:14px; }
.mriia-accordion .accordion-toggle {
display:flex; align-items:center; justify-content:space-between; gap:24px;
width:100%; padding:28px 44px; border-radius:18px; background:linear-gradient(180deg,#2f80ff,#1f66e0);
color:#fff; font-size:26px; font-weight:700; border:none; cursor:pointer;
transition: background 220ms ease, color 220ms ease, transform 120ms ease;
}
.mriia-accordion .accordion-toggle:active{ transform:translateY(1px); }
.mriia-accordion .accordion-title { text-align:left; flex:1; }
.mriia-accordion .accordion-badge {
width:80px; height:64px; border-radius:12px; background:#fff; display:inline-flex; align-items:center; justify-content:center; color:#1f66e0; font-weight:800; font-size:28px
}
.mriia-accordion .accordion-panel { overflow:hidden; height:0; transition:height 260ms ease; margin-top:0; }
.mriia-accordion .accordion-panel-inner { background:#fff; padding:24px; border-radius:18px; color:#0f1724; }
.mriia-accordion .accordion-panel-inner h3 { margin-top:0; margin-bottom:8px; }
.mriia-accordion .accordion-item.open .accordion-toggle { background:#fff; color:#0f1724; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.mriia-accordion .accordion-item.open .accordion-toggle .accordion-badge { background:#fff; color:#0f1724; border:1px solid #eee }
.mriia-accordion .accordion-item.open .accordion-panel-inner { border-top-left-radius:0; border-top-right-radius:0; }
@media (max-width:1100px){ .mriia-accordion { padding:10px 12px 24px; } .mriia-accordion .accordion-toggle { font-size:18px; padding:16px 16px; } }
@media (max-width:420px){ .mriia-accordion .accordion-badge{ width:44px; height:38px; font-size:18px; } }


#app-sidebar .nav-item,
#app-sidebar.sidebar .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    user-select: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#app-sidebar .nav-item:hover,
#app-sidebar.sidebar .nav-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

#app-sidebar .nav-item.active,
#app-sidebar.sidebar .nav-item.active {
    background-color: #eff6ff !important;
    color: #1a69f3 !important;
    font-weight: 600 !important;
}

#app-sidebar .nav-item.expanded,
#app-sidebar.sidebar .nav-item.expanded {
    color: #1a69f3 !important;
    font-weight: 600 !important;
}

#app-sidebar .nav-item .nav-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    display: block !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(32%) sepia(12%) saturate(760%) hue-rotate(177deg) brightness(94%) contrast(89%) !important;
    transition: filter 0.15s ease !important;
    margin: 0 !important;
}

#app-sidebar .nav-item:hover .nav-icon {
    filter: brightness(0) saturate(100%) invert(12%) sepia(25%) saturate(1060%) hue-rotate(182deg) brightness(94%) contrast(92%) !important;
}

#app-sidebar .nav-item.active .nav-icon,
#app-sidebar .nav-item.active:hover .nav-icon,
#app-sidebar .nav-item.expanded > .nav-icon,
#app-sidebar .nav-item.expanded:hover > .nav-icon {
    filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%) !important;
}

#app-sidebar .nav-item .nav-text,
#app-sidebar.sidebar .nav-item .nav-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

#app-sidebar .nav-item .arrow,
#app-sidebar.sidebar .nav-item .arrow {
    margin-left: auto !important;
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    border-right: 2px solid #94a3b8 !important;
    border-bottom: 2px solid #94a3b8 !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease !important;
    display: inline-block !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
}

#app-sidebar .nav-item .arrow::before,
#app-sidebar.sidebar .nav-item .arrow::before {
    display: none !important;
}

#app-sidebar .nav-item.expanded > .arrow,
#app-sidebar.sidebar .nav-item.expanded > .arrow {
    transform: rotate(-135deg) !important;
    border-color: #1a69f3 !important;
}

#app-sidebar .nav-item:hover > .arrow,
#app-sidebar.sidebar .nav-item:hover > .arrow {
    border-color: #0f172a !important;
}

#app-sidebar .nav-item.active > .arrow,
#app-sidebar.sidebar .nav-item.active > .arrow {
    border-color: #1a69f3 !important;
}

#app-sidebar .submenu,
#app-sidebar.sidebar .submenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, margin 0.28s ease !important;
}

#app-sidebar .submenu.open,
#app-sidebar.sidebar .submenu.open {
    max-height: 500px !important;
    opacity: 1 !important;
    margin: 2px 0 4px 0 !important;
    pointer-events: auto !important;
}

#app-sidebar .submenu .nav-item,
#app-sidebar.sidebar .submenu .nav-item {
    padding: 7px 10px 7px 39px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

#app-sidebar .submenu .nav-item .nav-text,
#app-sidebar.sidebar .submenu .nav-item .nav-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

#app-sidebar .submenu .nav-item:hover,
#app-sidebar.sidebar .submenu .nav-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

#app-sidebar .submenu .nav-item.active,
#app-sidebar.sidebar .submenu .nav-item.active {
    background-color: #eff6ff !important;
    color: #1a69f3 !important;
    font-weight: 500 !important;
}

#app-sidebar .feedback-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

#app-sidebar .feedback-arrow {
    margin-left: auto !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
}

#app-sidebar .sidebar-version {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    padding: 8px 10px 4px 10px !important;
    text-align: left !important;
    font-weight: 500 !important;
}

/* USER PROFILE BOTTOM CARD (1:1 with photo 2) */
#app-sidebar .user-profile {
    position: sticky !important;
    bottom: 0 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #edf0f5 !important;
    padding: 10px 12px 14px 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    z-index: 10 !important;
    display: block !important;
    margin: 0 !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

#app-sidebar .user-card-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

#app-sidebar .user-card-inner:hover {
    background-color: transparent !important;
}

#app-sidebar .avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
    flex-shrink: 0 !important;
    background-color: #eaedf2 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    letter-spacing: 0.5px !important;
    user-select: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    align-self: center !important;
}

#app-sidebar .user-identity {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

#app-sidebar .user-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    width: auto !important;
}

#app-sidebar .user-settings-trigger {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    color: #667085 !important;
    margin-left: auto !important;
    align-self: center !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

#app-sidebar .user-settings-trigger:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

#app-sidebar .user-settings-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    filter: none !important;
}

/* COLLAPSED SIDEBAR BEHAVIOR */
#app-sidebar.sidebar.collapsed {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}

#app-sidebar.sidebar.collapsed .logo-area {
    justify-content: center !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 0 6px !important;
}

#app-sidebar.sidebar.collapsed #sidebar-v2-bell-btn {
    display: none !important;
}

#app-sidebar.sidebar.collapsed .sidebar-logo-img {
    width: 36px !important;
    height: 36px !important;
}

#app-sidebar.sidebar.collapsed .top-controls {
    display: none !important;
}

#app-sidebar.sidebar.collapsed .nav-item {
    justify-content: center !important;
    padding: 9px 0 !important;
    gap: 0 !important;
}

#app-sidebar.sidebar.collapsed .nav-text,
#app-sidebar.sidebar.collapsed .arrow,
#app-sidebar.sidebar.collapsed .feedback-arrow,
#app-sidebar.sidebar.collapsed .sidebar-version,
#app-sidebar.sidebar.collapsed .user-identity,
#app-sidebar.sidebar.collapsed .user-settings-trigger,
#app-sidebar.sidebar.collapsed .submenu {
    display: none !important;
}

#app-sidebar.sidebar.collapsed .user-profile {
    padding: 8px !important;
}

#app-sidebar.sidebar.collapsed .user-card-inner {
    justify-content: center !important;
    padding: 4px 0 !important;
}

@media (min-width: 901px) {
    #app-sidebar.sidebar.collapsed:hover {
        width: 228px !important;
        min-width: 228px !important;
        max-width: 228px !important;
    }
    #app-sidebar.sidebar.collapsed:hover .top-controls,
    #app-sidebar.sidebar.collapsed:hover #sidebar-v2-bell-btn {
        display: flex !important;
    }
    #app-sidebar.sidebar.collapsed:hover .logo-area {
        justify-content: space-between !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 0 10px 0 12px !important;
    }
    #app-sidebar.sidebar.collapsed:hover .nav-item {
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        gap: 11px !important;
    }
    #app-sidebar.sidebar.collapsed:hover .nav-text,
    #app-sidebar.sidebar.collapsed:hover .arrow,
    #app-sidebar.sidebar.collapsed:hover .feedback-arrow,
    #app-sidebar.sidebar.collapsed:hover .sidebar-version,
    #app-sidebar.sidebar.collapsed:hover .user-identity,
    #app-sidebar.sidebar.collapsed:hover .user-settings-trigger {
        display: flex !important;
    }
    #app-sidebar.sidebar.collapsed:hover .submenu.open {
        display: flex !important;
    }
    #app-sidebar.sidebar.collapsed:hover .user-profile {
        padding: 10px 10px 12px 10px !important;
    }
    #app-sidebar.sidebar.collapsed:hover .user-card-inner {
        justify-content: flex-start !important;
        padding: 5px 6px !important;
    }
}
* {
--text-weight-normal: 575 !important;
}
body,
input,
button,
select,
textarea {
font-weight: 575;
}
#class-admin-panel .class-admin-bubble,
#class-admin-panel .class-admin-bubble *,
#class-admin-panel .class-admin-title,
#class-admin-panel .class-admin-title * {
font-weight: 575 !important;
}
#app-sidebar .nav-item.active,
#app-sidebar .submenu .nav-item.active,
.btn-primary,
.badge-active,
.active-pill {
font-weight: 600 !important;
}
.journal-card,
.class-card,
.teacher-card,
.news-card,
.schedule-card,
.student-item,
.event-item,
.home-lesson-card,
.gb-row,
.schc-pool-item {
content-visibility: auto;
contain-intrinsic-size: auto 60px;
}
.home-empty-icon,
#mobile-topbar,
.custom-select-dropdown,
.news-quick-post,
.mriia-test-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#test-constructor-view .lesson-day-card-container {
background: #ffffff;
border-radius: 24px;
padding: 22px 24px 28px;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06);
width: 100%;
max-width: 1720px;
margin: 0 auto;
box-sizing: border-box;
}
.tc-overview-title-input {
width: 100%;
box-sizing: border-box;
border: 1.5px solid transparent;
background: #f1f5f9;
border-radius: 9px;
padding: 7px 12px;
font-size: 15px;
font-weight: 700;
color: #07182f;
outline: none;
transition: all 0.2s;
}
.tc-overview-title-input:focus {
background: #ffffff;
border-color: #1875ff;
box-shadow: 0 0 0 3px rgba(24, 117, 255, 0.12);
}
.tc-ld-questions-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 280px;
overflow-y: auto;
padding-right: 4px;
}
.tc-ld-q-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 9.5px;
background: #ffffff;
border: 1px solid #dfe7f2;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.tc-ld-q-item:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.tc-ld-q-item.active {
background: #eff6ff;
border-color: #4f8cff;
}
.tc-ld-q-badge {
width: 22px;
height: 22px;
border-radius: 6px;
background: #f1f5f9;
color: #475569;
font-weight: 800;
font-size: 11.5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tc-ld-q-item.active .tc-ld-q-badge {
background: #1875ff;
color: #ffffff;
}
.tc-ld-q-info {
flex: 1;
min-width: 0;
}
.tc-ld-q-title {
font-size: 12.5px;
font-weight: 700;
color: #07182f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tc-ld-q-sub {
font-size: 11px;
font-weight: 600;
color: #718098;
margin-top: 1px;
}
.tc-ld-settings-card {
background: #f7f9fb;
border: 1px solid #dfe7f2;
border-radius: 11.5px;
padding: 4px 14px;
}
.tc-ld-setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #e0e7f0;
font-size: 12.5px;
font-weight: 700;
color: #07182f;
}
.tc-ld-select-box {
position: relative;
display: inline-flex;
align-items: center;
}
.tc-ld-mini-select {
height: 27px;
padding: 0 24px 0 10px;
border-radius: 7.5px;
border: 1px solid #cdd9ec;
background: #ffffff;
font-size: 12px;
font-weight: 700;
color: #07182f;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.tc-ld-mini-input {
height: 27px;
width: 68px;
padding: 0 8px;
border-radius: 7.5px;
border: 1px solid #cdd9ec;
background: #ffffff;
font-size: 12px;
font-weight: 700;
color: #07182f;
outline: none;
box-sizing: border-box;
text-align: center;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tc-ld-mini-input:focus {
border-color: #1875ff;
box-shadow: 0 0 0 2px rgba(24, 117, 255, 0.15);
}
.tc-ld-input-unit-wrap {
display: inline-flex;
align-items: center;
gap: 5px;
}
.tc-ld-input-unit {
font-size: 11.5px;
font-weight: 600;
color: #64748b;
}
.tc-select-arrow {
position: absolute;
right: 8px;
pointer-events: none;
font-size: 10px;
color: #718098;
}
.tc-quick-actions-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.tc-quick-action-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 14px 7px 10px !important;
background: #ffffff !important;
border: 1px solid #dfe7f2 !important;
border-radius: 20.5px !important;
cursor: pointer;
transition: all 0.15s ease;
}
.tc-quick-action-item:hover {
background: #f8fafc !important;
border-color: #cdd9ec !important;
}
.tc-quick-icon {
width: 24px !important;
height: 24px !important;
border-radius: 8px !important;
background: #eef5ff !important;
color: #1875ff !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px !important;
flex-shrink: 0;
}
.tc-quick-text {
flex: 1;
font-size: 12.5px;
font-weight: 700;
color: #07182f;
text-align: left;
}
.tc-right-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.tc-points-pill-box {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f1f5f9;
padding: 3px 10px;
border-radius: 12.5px;
font-size: 12px;
font-weight: 700;
color: #07182f;
}
.tc-points-pill-box input {
width: 32px;
height: 20px;
border-radius: 7px;
border: none;
background: #ffffff;
text-align: center;
font-weight: 800;
font-size: 12px;
color: #07182f;
outline: none;
}
.tc-points-sub {
font-size: 11.5px;
color: #718098;
font-weight: 600;
}
.tc-right-top-actions {
display: flex;
align-items: center;
gap: 8px;
}
.tc-action-icon-btn {
width: 26px;
height: 26px;
border-radius: 13px;
border: 1px solid #dfe7f2;
background: #f7f9fb;
color: #475569;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
transition: all 0.15s;
}
.tc-action-icon-btn:hover {
background: #e2e8f0;
color: #0f172a;
}
.tc-action-icon-btn.danger:hover {
background: #fef2f2;
color: #ef4444;
border-color: #fecaca;
}
.tc-btn-secondary {
height: 26px;
padding: 0 14px;
border-radius: 13px;
border: 1px solid #cdd9ed;
background: #ffffff;
color: #07182f;
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
transition: all 0.15s;
}
.tc-btn-secondary:hover {
background: #f1f5f9;
}
.tc-btn-primary {
height: 26px;
padding: 0 16px;
border-radius: 13px;
border: none;
background: #1875ff;
color: #ffffff;
font-weight: 700;
font-size: 12.5px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
box-shadow: 0 3px 7px rgba(24, 117, 255, 0.25);
transition: all 0.15s;
}
.tc-btn-primary:hover {
background: #0f68f8;
}
#tc-type-pills-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
}
#tc-type-pills-row .ld-mat-pill-btn {
height: 24px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid #dfe7f2;
background: #ffffff;
font-size: 12px;
font-weight: 700;
color: #07182f;
gap: 6px;
}
#tc-type-pills-row .ld-mat-pill-btn i {
font-size: 12px;
color: #718098;
}
#tc-type-pills-row .ld-mat-pill-btn.active {
background: #1875ff !important;
color: #ffffff !important;
border-color: #1875ff !important;
}
#tc-type-pills-row .ld-mat-pill-btn.active i {
color: #ffffff !important;
}
.tc-workspace-card {
background: #f7f9fb;
border: 1px solid #dfe7f2;
border-radius: 13.5px;
padding: 16px 18px;
margin-bottom: 14px;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.tc-workspace-label {
display: block;
font-size: 12px;
font-weight: 800;
color: #07182f;
margin-bottom: 6px;
}
.tc-workspace-textarea {
width: 100%;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #dfe7f2;
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
font-weight: 600;
color: #07182f;
resize: vertical;
outline: none;
transition: border-color 0.2s;
min-height: 55px;
}
.tc-workspace-textarea:focus {
border-color: #1875ff;
}
.tc-answers-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.tc-option-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
height: 35px;
box-sizing: border-box;
border-radius: 9.5px;
background: #ffffff;
border: 1px solid #dfe7f2;
transition: all 0.15s;
}
.tc-option-row.is-correct {
background: #f0fcf3;
border-color: #16c75a;
}
.tc-correct-toggle {
width: 17px;
height: 17px;
border-radius: 8.5px;
border: 1px solid #ceddf3;
background: #ffffff;
color: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;
transition: all 0.15s;
padding: 0;
}
.tc-option-row.is-correct .tc-correct-toggle {
background: #16c75a;
border-color: #16c75a;
color: #ffffff;
}
.tc-option-input {
flex: 1;
border: none;
background: transparent;
font-size: 13.5px;
font-weight: 600;
color: #07182f;
outline: none;
}
.tc-add-opt-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
background: #eff6ff;
color: #1875ff;
border: 1px dashed #93c5fd;
font-weight: 700;
font-size: 12px;
cursor: pointer;
transition: background 0.15s;
}
.tc-add-opt-pill:hover {
background: #dbeafe;
}
.tc-input-flat {
width: 100%;
box-sizing: border-box;
height: 34px;
padding: 0 10px;
border-radius: 8px;
background: #ffffff;
border: 1px solid #dfe7f2;
font-size: 13px;
font-weight: 600;
color: #07182f;
outline: none;
}
#test-constructor-view .ld-teacher-note-card {
border: 1px solid #dfe7f2;
border-radius: 11.5px;
background: #f7f9fb;
padding: 10px 14px;
margin-top: auto;
}
#test-constructor-view .ld-tn-header {
font-size: 12px;
font-weight: 700;
color: #07182f;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
#test-constructor-view .ld-tn-header i {
color: #1875ff;
font-size: 12px;
}
#test-constructor-view .ld-tn-textarea {
font-size: 13px;
color: #07182f;
}
.tc-ai-badge-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #1c77ff, #6366f1);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.lesson-day-header #tc-header-top{
display:flex;
align-items:baseline;
gap:1.8px;
font-size:15.1px !important;
line-height:1 !important;
margin-left:4px;
}
.lesson-day-header #tc-header-top > span{
display:inline-block;
max-width:100%;
}
.lesson-day-header #tc-header-top,
.lesson-day-header #tc-header-top > span{
font-weight:450 !important;
}
.lesson-day-header #tc-header-top > .header-page-icon{
display:inline-flex;
align-items:flex-end;
justify-content:center;
color:rgba(255, 255, 255, 0.75) !important;
opacity:0.75 !important;
font-size:13px !important;
margin-right:3px !important;
transform:translateY(2px);
transition:color 0.15s ease, opacity 0.15s ease;
}
.lesson-day-header #tc-header-top > .header-page-icon img{
opacity:0.75 !important;
width:14px !important;
height:14px !important;
transition:opacity 0.15s ease;
}
.lesson-day-header .header-crumb-sep{
color:rgba(255, 255, 255, 0.55);
margin:0 12px;
}
.lesson-day-header #tc-header-top .journal-link,
.lesson-day-header #tc-header-top .journal-class-link{
color:rgba(255, 255, 255, 0.75) !important;
text-decoration:none !important;
transition:color 0.15s ease;
}
.lesson-day-header #tc-header-top .journal-link:hover,
.lesson-day-header #tc-header-top .journal-class-link:hover{
color:#ffffff !important;
text-decoration:none !important;
}
.lesson-day-header:has(.journal-link:hover) .header-page-icon,
.lesson-day-header:has(.journal-link:hover) .header-page-icon img,
.lesson-day-header #tc-header-top .journal-link:hover ~ .header-page-icon,
.lesson-day-header #tc-header-top .journal-link:hover ~ .header-page-icon img,
.lesson-day-header #tc-header-top:hover .header-page-icon,
.lesson-day-header #tc-header-top:hover .header-page-icon img{
color:#ffffff !important;
opacity:1 !important;
}
.lesson-day-header #tc-header-top .journal-subject-name{
color:rgba(255, 255, 255, 0.75) !important;
font-weight:450;
}
.lesson-day-header #tc-header-bottom{
font-size:28px !important;
font-weight:500 !important;
line-height:1.15 !important;
margin-bottom:4px !important;
color:#ffffff !important;
opacity:1 !important;
}
.lesson-day-header #tc-header-bottom{
margin-left:-6px;
}
@media (max-width:768px){
.lesson-day-header #tc-header-bottom{
margin-left:11px;
}
}
.lesson-day-header .subject-toggle-wrap{
display:none !important;
}
.lesson-day-header .lesson-day-back-btn{
display:none;
position:absolute;
top:-4px !important;
right:0;
align-items:center;
justify-content:center;
padding:12px 24px;
border:none;
border-radius:999px;
background:rgba(255, 255, 255, 0.16);
color:#ffffff;
font-family:inherit;
font-size:14px;
font-weight:600;
line-height:1;
letter-spacing:0.2px;
cursor:pointer;
white-space:nowrap;
z-index:10;
transition:background 0.15s ease;
}
.lesson-day-header .lesson-day-back-btn:hover{
background:rgba(255, 255, 255, 0.3);
}
#test-constructor-view .lesson-day-header #tc-header-top .lesson-day-current-crumb{
color:#ffffff !important;
font-weight:600 !important;
}
#test-constructor-view .lesson-day-header .lesson-day-back-btn{
display:inline-flex;
}
#tc-header-top .header-page-icon img{
height:16px !important;
width:16px !important;
object-fit:contain !important;
vertical-align:-0.1em !important;
display:inline-block !important;
opacity:0.75 !important;
}
#test-constructor-view .lesson-day-col-left,
#test-constructor-view .lesson-day-col-right{
background:transparent;
border-radius:0;
box-shadow:none;
padding:0;
box-sizing:border-box;
min-height:0;
overflow:hidden;
}
#lesson-views-host{
display:none;
}
#lesson-views-host:has(> .lesson-day-view[style*="display: flex"]),
#lesson-views-host:has(> .lesson-day-view[style*="display: block"]){
display:block;
}
body:has(#lesson-views-host > .lesson-day-view[style*="display: flex"]) #app-main,
body:has(#lesson-views-host > .lesson-day-view[style*="display: block"]) #app-main{
display:none !important;
}
#test-constructor-view .lesson-day-header {
margin-left: -11px !important;
}
@media (min-width: 769px) {
#test-constructor-view .lesson-day-header {
margin-left: 6px !important;
}
}
.tc-embedded-settings-box {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 12px;
}
.tc-embedded-settings-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.tc-embedded-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 12px 14px;
align-items: center;
}
.tc-embedded-setting-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.tc-embedded-setting-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: #f8fafc;
border-radius: 10px;
padding: 6px 10px;
border: 1px solid #e2e8f0;
}
.tc-field-mini-label {
font-size: 11.5px;
font-weight: 700;
color: #475569;
}
#lesson-day-view .lesson-day-card-container,
#test-constructor-view .lesson-day-card-container {
height: calc(108.69565vh - 89.56px) !important;
max-height: calc(108.69565vh - 89.56px) !important;
min-height: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 1720px !important;
margin: 0 auto !important;
}
#lesson-day-view,
#test-constructor-view {
height: auto !important;
min-height: 0 !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
@media (min-width: 769px) {
#test-constructor-view.page-section {
margin-left: -17px !important;
margin-right: -17px !important;
width: min(var(--mriia-wide-page-width), calc(100% + 34px)) !important;
max-width: var(--mriia-wide-page-width) !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
#test-constructor-view.page-section > :not(script):not(style):not(link) {
width: 100% !important;
max-width: var(--mriia-wide-page-width) !important;
box-sizing: border-box !important;
}
}
#lesson-views-host,
.main-content.lesson-day-mode-active,
#lesson-views-host.main-content.lesson-day-mode-active {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
.ld-mascot-fab,
#ld-mascot-fab {
display: none !important;
}
.sidebar .nav-item.active .mriia-local-icon,.sidebar .nav-item.expanded .mriia-local-icon{filter:brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%)!important;}

#app-sidebar .nav-item.active .nav-icon, #app-sidebar .nav-item.active:hover .nav-icon, #app-sidebar .nav-item.expanded > .nav-icon, #app-sidebar .nav-item.expanded:hover > .nav-icon, .sidebar .nav-item.active > .nav-icon, .sidebar .nav-item.active:hover > .nav-icon, .sidebar .nav-item.expanded > .nav-icon, .sidebar .nav-item.expanded:hover > .nav-icon { filter: none !important; }


/* FINAL USER PROFILE ENFORCEMENT: 1:1 WITH PHOTO 2 */
#app-sidebar #sidebar-user-card,
#app-sidebar .user-profile,
.sidebar .user-profile {
    position: sticky !important;
    bottom: 0 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #eaedf2 !important;
    padding: 10px 14px 12px 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    z-index: 100 !important;
    display: block !important;
    margin: 0 !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

#app-sidebar #sidebar-user-card .user-card-inner,
#app-sidebar .user-card-inner,
.sidebar .user-card-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

#app-sidebar #sidebar-user-card .avatar,
#app-sidebar .avatar,
.sidebar .avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
    flex-shrink: 0 !important;
    background-color: #eaedf2 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    letter-spacing: 0.5px !important;
    user-select: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    align-self: center !important;
}

#app-sidebar #sidebar-user-card .user-identity,
#app-sidebar .user-identity,
.sidebar .user-identity {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: center !important;
}

#app-sidebar #sidebar-user-card .user-name,
#app-sidebar .user-name,
.sidebar .user-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    width: auto !important;
}

#app-sidebar #sidebar-user-card .user-settings-trigger,
#app-sidebar .user-settings-trigger,
.sidebar .user-settings-trigger {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    color: #667085 !important;
    align-self: center !important;
}

#app-sidebar #sidebar-user-card .user-settings-icon,
#app-sidebar .user-settings-icon,
.sidebar .user-settings-icon {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    filter: none !important;
    margin: 0 !important;
}