:root{--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 5rem;--space-5xl: 6rem;--bg-color-theme: #b9daf5;--burger-menu-button-color: #4A1D5D;--theme-button-color: #000000;--form-bg: #dadada;--item-bg: #2d4059;--title-1: #1a365d;--title-2: #2d3748;--title-3: #000000;--title-4: #1e3a8a;--text-color: #1a202c;--link-color-1: #10365f;--link-color-2: #8bbfe4;--success-color: #22543d;--error-color: #742a2a;--warning-color: #744210;--info-color: #2a4365;--border-color: #334155;--border-focus-color: #15a3f5;--border-hover-color: rgba(21, 163, 245, .7);--select-color: #284154;--button-color: #10365f;--button-text: #edf2f7;--option-text: #1a202c;--option-bg: #fff;--table-header-bg: #10365f;--table-header-text: #edf2f7;--table-row-bg: #f1f5f9;--table-row-hover: #e2e8f0;--table-border: #032753;--table-row-text: #1a202c;--white: #ffffff;--black: #000000}[data-theme=dark]{--bg-color-theme: #284154;--burger-menu-button-color: #EBC5FC;--theme-button-color: #ffff00;--item-bg: #4a6491;--form-bg: #3f4b5c;--title-1: #ffffff;--title-2: #f8f9fa;--title-3: #e6f3ff;--title-4: #fef7f0;--text-color: #edf2f7;--link-color-1: #8bbfe4;--link-color-2: #10365f;--success-color: #68d391;--error-color: #fc8181;--warning-color: #f6ad55;--info-color: #90cdf4;--border-color: #CDE2FF;--border-focus-color: #60a5fa;--border-hover-color: rgba(96, 165, 250, .7);--select-color: #b9daf5;--button-color: #8bbfe4;--button-text: #1a202c;--option-text: #fff;--option-bg: #1a202c;--table-header-bg: #8bbfe4;--table-header-text: #1a202c;--table-row-bg: #2d3748;--table-row-hover: #4a5568;--table-border: #0862ff;--table-row-text: #edf2f7;--white: #ffffff;--black: #000000}*{margin:0;padding:0;box-sizing:border-box;border:none}body{background-color:var(--bg-color-theme);overflow-x:hidden;width:100%}main{overflow-x:hidden}:root{--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-large: 1.75}h1,h2,h3,h4{text-align:center;font-family:Comic Relief,cursive;font-weight:700;line-height:var(--line-height-large)}h1{font-size:var(--font-size-3xl);color:var(--title-4)}@media(min-width:768px){h1{font-size:var(--font-size-4xl)}}h2{font-size:var(--font-size-2xl);color:var(--title-1)}@media(min-width:768px){h2{font-size:var(--font-size-3xl)}}h3{font-size:var(--font-size-xl);color:var(--title-3)}@media(min-width:768px){h3{font-size:var(--font-size-2xl)}}h4{font-size:var(--font-size-lg);color:var(--title-2)}@media(min-width:768px){h4{font-size:var(--font-size-xl)}}p,em,td,legend{font-family:Alan,sans-serif;font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text-color)}@media(min-width:768px){p,em,td,legend{font-size:var(--font-size-lg)}}th{font-family:Alan,sans-serif;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:var(--line-height-normal)}@media(min-width:768px){th{font-size:var(--font-size-xl)}}output{font-family:Alan,sans-serif;font-size:var(--font-size-lg)}@media(min-width:768px){output{font-size:var(--font-size-2xl)}}button{border:none;background-color:var(--button-color);color:var(--button-text);border:solid 2px var(--button-color);transition:background-color .3s ease,color .3s ease,border-color .3s ease}button:active,button:focus{background-color:var(--button-text);color:var(--button-color);border-color:var(--border-hover-color)}@media(min-width:768px){button{cursor:pointer;font-size:var(--font-size-xl)}button:hover{background-color:var(--button-text);color:var(--button-color);border-color:var(--border-hover-color)}}ul{list-style:none}.home-button{margin:var(--space-lg);font-size:var(--font-size-lg);width:100%;text-align:center}.home-button a{text-decoration:none;color:var(--link-color-1);border:2px solid var(--link-color-1);padding:var(--space-sm);border-radius:5px;transition:background-color .3s ease,color .3s ease}.home-button a:focus{text-decoration:underline;background-color:var(--link-color-1);color:var(--link-color-2)}@media(min-width:768px){.home-button{width:auto;font-size:var(--font-size-xl)}.home-button a:focus{text-decoration:none;background-color:transparent;color:var(--link-color-1);outline:none}.home-button a:hover{text-decoration:underline;background-color:var(--link-color-1);color:var(--link-color-2)}}form{border:4px solid var(--border-color);display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);border-radius:1rem}input,select,textarea{border:2px solid var(--border-color);width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--space-sm);background-color:transparent;color:var(--text-color);transition:border-color .5s ease}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}@media(min-width:768px){input,select,textarea{border:4px solid var(--border-color)}}select{text-align:center;font-size:var(--font-size-xl)}input,textarea{font-size:var(--font-size-base)}input:valid,input:focus,textarea:valid,textarea:focus{border-color:var(--border-focus-color)}@media(min-width:768px){input:focus,textarea:focus{border-color:none}input,textarea{font-size:var(--font-size-xl)}}table{width:100%;border-collapse:collapse}thead{background-color:var(--table-header-bg);color:var(--table-header-text)}tr{border:5px solid var(--border-color)}tr:focus{background-color:var(--table-header-bg)}tr:focus td{color:var(--table-header-text);border-color:var(--white)}th{padding:var(--space-sm);padding-left:var(--space-md);padding-right:var(--space-md);border:2px solid var(--white);text-align:center}td{padding:var(--space-sm);padding-left:var(--space-md);padding-right:var(--space-md);border:2px solid var(--border-color);text-align:center;color:var(--table-row-text)}table,thead,tbody,th,td,tr{display:block}thead tr{position:absolute;top:-9999px;left:-9999px}tr{border:3px solid var(--border-focus-color);margin-bottom:var(--space-md);border-radius:8px;padding:var(--space-sm);background-color:var(--option-bg)}td{border:none;border-bottom:1px solid var(--border-color);position:relative;padding-left:150px;padding-top:var(--space-sm);padding-bottom:var(--space-sm);text-align:left;color:var(--table-row-text);word-wrap:break-word}td:before{content:attr(data-label);position:absolute;left:6px;top:var(--space-sm);width:140px;padding-right:10px;white-space:nowrap;text-align:left;font-weight:700;color:var(--text-color)}td:last-child{border-bottom:none}@media(min-width:768px){table,thead,tbody,th,td,tr{display:revert}table{width:100%;border-collapse:collapse}thead{background-color:var(--table-header-bg);color:var(--table-header-text)}thead tr{position:static}tr{border:5px solid var(--border-color);margin-bottom:0;border-radius:0;padding:0;background-color:transparent}tr:focus{background-color:var(--table-header-bg)}tr:focus td{color:var(--table-header-text);border-color:var(--white)}th{padding:var(--space-sm);padding-left:var(--space-md);padding-right:var(--space-md);border:2px solid var(--white);text-align:center}td{padding:var(--space-sm);padding-left:var(--space-md);padding-right:var(--space-md);border:2px solid var(--border-color);text-align:center;color:var(--table-row-text);position:static;word-wrap:normal}td:before{content:none}td:last-child{border-bottom:2px solid var(--border-color)}}.layout{display:none;position:fixed;top:0;left:0;z-index:100;opacity:.5;width:100%}.layout:hover{opacity:1}@media(min-width:768px){.layout{display:block}}.menu-navigation{background-color:var(--option-bg)}.menu-navigation ul{display:flex;justify-content:space-around;align-items:center;gap:var(--space-lg);padding:var(--space-md)}.nav-link a{text-decoration:none;color:var(--link-color-1);border:2px solid var(--link-color-1);padding:var(--space-md);border-radius:5px;transition:background-color .3s ease,color .3s ease}.nav-link a:hover{text-decoration:underline;background-color:var(--link-color-1);color:var(--link-color-2)}.nav-link button{padding:var(--space-md);border-radius:5px}@media(min-width:768px){.nav-link{font-size:var(--font-size-xl)}}.user-menu button{padding:var(--space-md);border-radius:5px}.user-dropdown{position:fixed;display:inline-block}.theme-button button{padding:var(--space-md);border-radius:5px}.layout-footer{position:relative;bottom:0;left:0;width:100%;background-color:var(--bg-color-theme);text-align:center;padding:var(--space-md);font-size:var(--font-size-sm);color:var(--text-color-secondary);border-top:1px solid var(--border-color);margin-top:var(--space-lg)}.burger-menu{margin-bottom:var(--space-3xl)}.burger-menu-button{position:fixed;opacity:.3;top:0;left:0;width:20%;font-size:var(--font-size-3xl);margin-bottom:var(--space-md);transition:opacity .5s ease;z-index:100}.burger-menu-button:focus,.burger-menu-button:active{opacity:1}.burger-menu-content{position:fixed;top:0;left:0;height:100%;width:100%;background-color:var(--bg-color-theme);z-index:99;padding:var(--space-3xl);animation:slideInLeft .3s ease-out forwards;transform-origin:left}.mobile-user-menu-nav{position:fixed;top:0;left:40%;width:100%;height:5%}.mobile-user-menu-list{width:100%;height:100%;display:flex;flex-direction:row}.mobile-user-menu-list li{width:100%;height:100%}.mobile-user-menu-list li .mobile-user-menu-button{border-radius:5px;width:70%;height:100%}.mobile-user-menu-list li .mobile-theme-button{border-radius:5px;width:20%;height:100%}.mobile-user-dropdown{width:60%;height:80%;margin:var(--space-sm);margin-top:var(--space-sm)}.mobile-user-dropdown li{width:100%;height:100%}.mobile-user-dropdown li .mobile-user-disconnect-button{border-radius:5px;width:100%;height:100%}.burger-menu-nav{position:absolute;top:25%;left:30%;height:20%;width:40%}.burger-menu-nav .burger-menu-list{position:absolute;left:15%}.burger-menu-link{font-size:var(--font-size-2xl);padding:var(--space-md);text-align:center;background-color:var(--link-color-1);margin-bottom:20%;border-radius:5px;transition:background-color .3s ease}.burger-menu-link a{color:var(--link-color-2);text-decoration:none;transition:color .3s ease;width:100%;height:100%;display:block}.burger-menu-link:focus,.burger-menu-link:focus-within{background-color:var(--link-color-2)}.burger-menu-link:focus a,.burger-menu-link:focus-within a{color:var(--link-color-1)}.form-placeholder{color:var(--text-color)}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.burger-menu-footer{position:relative;bottom:0;left:0;width:100%;background-color:var(--bg-color-theme);text-align:center;padding:var(--space-md);font-size:var(--font-size-sm);color:var(--text-color-secondary);border-top:1px solid var(--border-color);margin-top:var(--space-lg)}@media(min-width:768px){.burger-menu{display:none}}.admin-page article,.teacher-page article,.student-page article{margin-top:var(--space-3xl);margin-bottom:var(--space-3xl)}.admin-page article h3,.teacher-page article h3,.student-page article h3{color:var(--white)}@media(min-width:768px){.admin-page article,.teacher-page article,.student-page article{margin-top:var(--space-5xl);margin-left:var(--space-4xl);margin-right:var(--space-4xl);border:solid 2px var(--border-color);border-radius:5px;padding:var(--space-lg);background-color:var(--item-bg)}}.date-filter{border:none;margin-bottom:var(--space-md);width:100%;display:flex;flex-direction:column;align-items:center}@media(min-width:768px){.date-filter{flex-direction:row;gap:var(--space-lg)}}.react-datepicker-wrapper{width:90%;background-color:var(--option-bg);border-radius:6px;margin:var(--space-sm)}.datepicker-input{text-align:center}.react-datepicker__month-container{background-color:var(--option-bg)}[data-theme=dark] .react-datepicker__day,[data-theme=dark] .react-datepicker__day-name{color:var(--text-color)!important}.main-data-list,.secondary-data-list,.tertiary-data-list{display:flex;flex-direction:column;align-items:center}@media(min-width:768px){.main-data-list,.secondary-data-list,.tertiary-data-list{flex-wrap:wrap;flex-direction:row;justify-content:center;gap:var(--space-lg)}}.data-item{width:80%;margin:var(--space-sm);padding:var(--space-sm);border:1px solid var(--border-color);border-radius:6px;background-color:var(--option-bg)}.data-item button{display:flex;flex-direction:column;width:100%;padding-top:var(--space-sm);padding-bottom:var(--space-sm)}@media(min-width:768px){.data-item{width:30%}}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}@media(min-width:768px){.login-container{margin-top:var(--space-5xl)}}.login-section{display:flex;flex-direction:column;justify-content:center;width:90%}@media(min-width:768px){.login-section{width:80%;background-color:var(--form-bg)}}.login-form{align-items:center}.login-form select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right var(--space-sm) center;background-repeat:no-repeat}.login-form option{background-color:var(--option-bg);color:var(--option-text)}.login-form .login-button{width:50%;padding:var(--space-md);border-radius:var(--space-sm);margin-top:var(--space-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.custom-field{position:relative;padding-top:var(--space-lg);width:100%}.custom-field .login-input{transition:border-color .5s ease}.custom-field .login-input:valid+.form-placeholder,.custom-field .login-input:focus+.form-placeholder{top:var(--space-sm);font-size:var(--font-size-xs);color:var(--text-color)}.custom-field .form-placeholder{position:absolute;left:var(--space-md);top:var(--space-xl);transition:top .3s ease,font-size .3s ease,color .3s ease}.newsfeed-container{width:100%;padding:var(--space-md);display:flex;align-items:center;flex-direction:column}@media(min-width:768px){.newsfeed-container{margin-top:var(--space-4xl)}}.add-news-button{margin-top:var(--space-lg);margin-bottom:var(--space-lg);padding:var(--space-sm);border-radius:5px}@media(min-width:768px){.add-news-button{width:20%;padding:var(--space-md)}}.news-feed{width:90%;max-height:550px;margin:0 auto;overflow-x:hidden;overflow-y:auto;border-radius:5px;padding:var(--space-md)}.news-feed::-webkit-scrollbar{display:none}@media(min-width:768px){.news-feed{width:60%;max-height:600px}}.news-list{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);width:100%}.news-item{border:4px solid var(--border-focus-color);border-radius:5px;padding:var(--space-md);background-color:var(--option-bg);width:100%}@media(min-width:768px){.news-item{padding:var(--space-lg);width:80%}}.news-article{display:flex;flex-direction:column;align-items:center;font-size:var(--font-size-md);color:var(--text-color);margin-top:var(--space-sm);margin-bottom:var(--space-sm);gap:var(--space-sm)}.news-image{max-width:100%;height:auto;border-radius:5px;margin:var(--space-sm) 0;object-fit:cover}.news-content{text-align:center;word-wrap:break-word;max-width:100%}.news-options{display:flex;justify-content:center;gap:var(--space-lg);margin-top:var(--space-sm);border:none}.news-options-button{padding:var(--space-sm);border-radius:5px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--form-bg);padding:var(--space-lg);border-radius:10px;width:90%;max-width:500px;box-shadow:0 4px 8px #0003;position:relative}.modal-content label{display:block;margin-bottom:var(--space-sm);font-weight:var(--font-weight-bold);color:var(--text-color)}.modal-content option{background-color:var(--option-bg);color:var(--option-text)}.input-field{border:none;text-align:center}.query-result-container{width:100%;overflow-x:hidden}@media(min-width:768px){.query-result-container{margin-top:var(--space-5xl)}}.controls-section{display:flex;flex-direction:column;justify-content:space-between;align-items:center;margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.pagination{width:90%;border:4px solid var(--border-color);padding:var(--space-sm);margin-top:var(--space-xl);margin-bottom:var(--space-xl);border-radius:5px}.pagination-list{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:var(--space-sm);border:4px solid var(--border-focus-color);border-radius:5px;padding:var(--space-sm);background-color:var(--option-bg)}.pagination-list li{padding:var(--space-sm)}.pagination-list li button{padding:var(--space-sm);padding-left:var(--space-md);padding-right:var(--space-md);border-radius:5px;font-size:var(--font-size-lg)}.results-table-container{width:90%;margin:0 auto;overflow-x:auto;border:4px solid var(--border-color);border-radius:5px;padding:var(--space-md);scrollbar-width:thin;scrollbar-color:var(--border-focus-color) var(--option-bg)}.results-table-container::-webkit-scrollbar{width:8px}.results-table-container::-webkit-scrollbar-track{background:var(--option-bg);border-radius:10px}.results-table-container::-webkit-scrollbar-thumb{background:var(--border-focus-color);border-radius:10px;border:2px solid var(--option-bg)}@media(min-width:768px){.results-table-container::-webkit-scrollbar{width:12px}.results-table-container :hover::-webkit-scrollbar-thumb{background:var(--border-hover-color)}}.pagination-list{scrollbar-width:thin;scrollbar-color:var(--border-focus-color) var(--option-bg)}.pagination-list::-webkit-scrollbar{width:8px}.pagination-list::-webkit-scrollbar-track{background:var(--option-bg);border-radius:10px}.pagination-list::-webkit-scrollbar-thumb{background:var(--border-focus-color);border-radius:10px;border:2px solid var(--option-bg)}@media(min-width:768px){.pagination-list::-webkit-scrollbar{width:12px}.pagination-list :hover::-webkit-scrollbar-thumb{background:var(--border-hover-color)}}@media(min-width:768px){.search-form{width:80%}}.query-graph-container{width:100%;overflow-x:hidden}@media(min-width:768px){.query-graph-container{margin-top:var(--space-5xl)}}.graph-container{display:flex;flex-direction:column;width:100%;margin:0 auto;margin-top:var(--space-xl);margin-bottom:var(--space-xl);align-items:center}@media(min-width:768px){.graph-container{width:80%}}.table-close{padding:var(--space-sm);border-radius:5px}.search-form{margin-top:var(--space-lg);margin-bottom:var(--space-2xl)}
