@charset "UTF-8";
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2) format("woff2");
  unicode-range: U+1F00-1FFF; }

/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2) format("woff2");
  unicode-range: U+0370-03FF; }

/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2) format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }

/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../iconFont/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: 'fontello';
  src: url("../iconFont/fontello.woff2");
  /*
    src: url('../iconFont/fontello.eot?28635376');
    src: url('../iconFont/fontello.eot?28635376#iefix') format('embedded-opentype'),
         url('../iconFont/fontello.woff2?28635376') format('woff2'),
         url('../iconFont/fontello.woff?28635376') format('woff'),
         url('../iconFont/fontello.ttf?28635376') format('truetype'),
         url('../iconFont/fontello.svg?28635376#fontello') format('svg');
         */
  font-weight: normal;
  font-style: normal; }

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.svg?28635376#fontello') format('svg');
    }
  }
  */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  /*margin-right: .2em;*/
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  /*margin-left: .2em;*/
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

/*
  .icon-user-group:before { content: '\e800'; }
  .icon-down-small:before { content: '\e804'; }
  .icon-left-small:before { content: '\e805'; }
  .icon-right-small:before { content: '\e806'; }
  .icon-up-small:before { content: '\e807'; }
  .icon-arrow-left:before { content: '\e808'; }
  .icon-book:before { content: '\e809'; }
  .icon-calendar:before { content: '\e80a'; }
  .icon-cogwheel:before { content: '\e80b'; }
  .icon-plus:before { content: '\e80c'; }
  .icon-document:before { content: '\e80d'; }
  .icon-refresh:before { content: '\e80e'; }
  .icon-timetable:before { content: '\e80f'; }
  .icon-user:before { content: '\e810'; }
  .icon-cross:before { content: '\e811'; }
  .icon-check:before { content: '\e812'; }
  .icon-search:before { content: '\e813'; }
  */
.icon-user-group:before {
  content: '\e800'; }

/* '' */
.icon-home:before {
  content: '\e801'; }

/* '' */
.icon-pencil:before {
  content: '\e802'; }

/* '' */
.icon-arrow-back:before {
  content: '\e803'; }

/* '' */
.icon-down-small:before {
  content: '\e804'; }

/* '' */
.icon-left-small:before {
  content: '\e805'; }

/* '' */
.icon-right-small:before {
  content: '\e806'; }

/* '' */
.icon-up-small:before {
  content: '\e807'; }

/* '' */
.icon-arrow-left:before {
  content: '\e808'; }

/* '' */
.icon-book:before {
  content: '\e809'; }

/* '' */
.icon-calendar:before {
  content: '\e80a'; }

/* '' */
.icon-cogwheel:before {
  content: '\e80b'; }

/* '' */
.icon-plus:before {
  content: '\e80c'; }

/* '' */
.icon-document:before {
  content: '\e80d'; }

/* '' */
.icon-refresh:before {
  content: '\e80e';
  transform-origin: 0.5em 0.72em; }

/* '' */
.icon-timetable:before {
  content: '\e80f'; }

/* '' */
.icon-user:before {
  content: '\e810'; }

/* '' */
.icon-cross:before {
  content: '\e811'; }

/* '' */
.icon-check:before {
  content: '\e812'; }

/* '' */
.icon-search:before {
  content: '\e813'; }

/* '' */
.icon-user-times:before {
  content: '\f235'; }

/* '' */
.icon-trash:before {
  content: '\e814'; }

/* '' */
.icon-folder:before {
  content: '\e815'; }

/* '' */
.icon-edit:before {
  content: '\e816'; }

/* '' */
.icon-pencil-1:before {
  content: '\e817'; }

/* '' */
.icon-attach:before {
  content: '\e824'; }

/* '' */
.icon-download:before {
  content: '\e825'; }

/* '' */
.icon-info:before {
  content: '\e826'; }

/* '' */
.icon-eye:before {
  content: '\e823'; }

/* '' */
.icon-copy:before {
  content: '\f0c5';
  transform: scale(0.8); }

/* '' */
.icon-chart-bar:before {
  content: '\e819'; }

/* '' */
.icon-database:before {
  content: '\f1c0'; }

/* '' */
.icon-docs-1:before {
  content: '\e821'; }

/* '' */
.icon-print:before {
  content: '\e827'; }

/* '' */
.icon-arrow-up:before {
  content: '\e808';
  transform: rotate(90deg); }

.icon-arrow-right:before {
  content: '\e808';
  transform: rotate(180deg); }

.icon-arrow-down:before {
  content: '\e808';
  transform: rotate(270deg); }

.spinner {
  position: absolute;
  border: .7rem solid #f3f3f3;
  border-top: .7rem solid #3498db;
  border-radius: 50%;
  width: 8rem;
  height: 8rem;
  animation: spin 1s linear infinite; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.bottom-right {
  position: absolute;
  right: .2rem;
  bottom: .2rem; }

.bottom-bar {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  padding: .2rem; }

.disabled {
  filter: grayscale(1) brightness(1.5);
  opacity: .3; }

@keyframes bigsmall {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@keyframes animRotating {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(90deg); }
  50% {
    transform: rotate(180deg); }
  75% {
    transform: rotate(270deg); }
  100% {
    transform: rotate(360deg); } }

.rotating {
  display: block;
  animation-name: animRotating;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

.animated-button.active {
  animation-name: bigsmall;
  animation-duration: .2s; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.flat-button {
  background-color: #000;
  background-color: #3A78FF;
  padding: .3rem .5rem;
  margin: 0;
  margin-right: .5rem;
  /*margin-top: 0.3rem;*/
  border: 0;
  border-radius: .5rem;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  cursor: pointer; }
  .flat-button.selected {
    background-color: #ffda00; }

.bt-2 {
  border-top-width: .2rem !important; }

.bb-2 {
  border-bottom-width: .2rem !important; }

.bl-2 {
  border-left-width: .2rem !important; }

.br-2 {
  border-right-width: .2rem !important; }

.color-red {
  color: red !important; }

.color-green {
  color: green !important; }

.fw-bold {
  font-weight: bold !important; }

.m-1 {
  margin: 0.2rem; }

.mt-1 {
  margin-top: 0.2rem; }

.mb-1 {
  margin-bottom: 0.2rem; }

.ms-1 {
  margin-left: 0.2rem; }

.me-1 {
  margin-right: 0.2rem; }

.mx-1 {
  margin-left: 0.2rem;
  margin-right: 0.2rem; }

.my-1 {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem; }

.p-1 {
  padding: 0.2rem; }

.pt-1 {
  padding-top: 0.2rem; }

.pb-1 {
  padding-bottom: 0.2rem; }

.ps-1 {
  padding-left: 0.2rem; }

.pe-1 {
  padding-right: 0.2rem; }

.px-1 {
  padding-left: 0.2rem;
  padding-right: 0.2rem; }

.py-1 {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem; }

.m-2 {
  margin: 0.4rem; }

.mt-2 {
  margin-top: 0.4rem; }

.mb-2 {
  margin-bottom: 0.4rem; }

.ms-2 {
  margin-left: 0.4rem; }

.me-2 {
  margin-right: 0.4rem; }

.mx-2 {
  margin-left: 0.4rem;
  margin-right: 0.4rem; }

.my-2 {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem; }

.p-2 {
  padding: 0.4rem; }

.pt-2 {
  padding-top: 0.4rem; }

.pb-2 {
  padding-bottom: 0.4rem; }

.ps-2 {
  padding-left: 0.4rem; }

.pe-2 {
  padding-right: 0.4rem; }

.px-2 {
  padding-left: 0.4rem;
  padding-right: 0.4rem; }

.py-2 {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem; }

.m-3 {
  margin: 0.6rem; }

.mt-3 {
  margin-top: 0.6rem; }

.mb-3 {
  margin-bottom: 0.6rem; }

.ms-3 {
  margin-left: 0.6rem; }

.me-3 {
  margin-right: 0.6rem; }

.mx-3 {
  margin-left: 0.6rem;
  margin-right: 0.6rem; }

.my-3 {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem; }

.p-3 {
  padding: 0.6rem; }

.pt-3 {
  padding-top: 0.6rem; }

.pb-3 {
  padding-bottom: 0.6rem; }

.ps-3 {
  padding-left: 0.6rem; }

.pe-3 {
  padding-right: 0.6rem; }

.px-3 {
  padding-left: 0.6rem;
  padding-right: 0.6rem; }

.py-3 {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem; }

.m-4 {
  margin: 0.8rem; }

.mt-4 {
  margin-top: 0.8rem; }

.mb-4 {
  margin-bottom: 0.8rem; }

.ms-4 {
  margin-left: 0.8rem; }

.me-4 {
  margin-right: 0.8rem; }

.mx-4 {
  margin-left: 0.8rem;
  margin-right: 0.8rem; }

.my-4 {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem; }

.p-4 {
  padding: 0.8rem; }

.pt-4 {
  padding-top: 0.8rem; }

.pb-4 {
  padding-bottom: 0.8rem; }

.ps-4 {
  padding-left: 0.8rem; }

.pe-4 {
  padding-right: 0.8rem; }

.px-4 {
  padding-left: 0.8rem;
  padding-right: 0.8rem; }

.py-4 {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem; }

.m-5 {
  margin: 1rem; }

.mt-5 {
  margin-top: 1rem; }

.mb-5 {
  margin-bottom: 1rem; }

.ms-5 {
  margin-left: 1rem; }

.me-5 {
  margin-right: 1rem; }

.mx-5 {
  margin-left: 1rem;
  margin-right: 1rem; }

.my-5 {
  margin-top: 1rem;
  margin-bottom: 1rem; }

.p-5 {
  padding: 1rem; }

.pt-5 {
  padding-top: 1rem; }

.pb-5 {
  padding-bottom: 1rem; }

.ps-5 {
  padding-left: 1rem; }

.pe-5 {
  padding-right: 1rem; }

.px-5 {
  padding-left: 1rem;
  padding-right: 1rem; }

.py-5 {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.m-6 {
  margin: 1.2rem; }

.mt-6 {
  margin-top: 1.2rem; }

.mb-6 {
  margin-bottom: 1.2rem; }

.ms-6 {
  margin-left: 1.2rem; }

.me-6 {
  margin-right: 1.2rem; }

.mx-6 {
  margin-left: 1.2rem;
  margin-right: 1.2rem; }

.my-6 {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem; }

.p-6 {
  padding: 1.2rem; }

.pt-6 {
  padding-top: 1.2rem; }

.pb-6 {
  padding-bottom: 1.2rem; }

.ps-6 {
  padding-left: 1.2rem; }

.pe-6 {
  padding-right: 1.2rem; }

.px-6 {
  padding-left: 1.2rem;
  padding-right: 1.2rem; }

.py-6 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem; }

.m-7 {
  margin: 1.4rem; }

.mt-7 {
  margin-top: 1.4rem; }

.mb-7 {
  margin-bottom: 1.4rem; }

.ms-7 {
  margin-left: 1.4rem; }

.me-7 {
  margin-right: 1.4rem; }

.mx-7 {
  margin-left: 1.4rem;
  margin-right: 1.4rem; }

.my-7 {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem; }

.p-7 {
  padding: 1.4rem; }

.pt-7 {
  padding-top: 1.4rem; }

.pb-7 {
  padding-bottom: 1.4rem; }

.ps-7 {
  padding-left: 1.4rem; }

.pe-7 {
  padding-right: 1.4rem; }

.px-7 {
  padding-left: 1.4rem;
  padding-right: 1.4rem; }

.py-7 {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem; }

.m-8 {
  margin: 1.6rem; }

.mt-8 {
  margin-top: 1.6rem; }

.mb-8 {
  margin-bottom: 1.6rem; }

.ms-8 {
  margin-left: 1.6rem; }

.me-8 {
  margin-right: 1.6rem; }

.mx-8 {
  margin-left: 1.6rem;
  margin-right: 1.6rem; }

.my-8 {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem; }

.p-8 {
  padding: 1.6rem; }

.pt-8 {
  padding-top: 1.6rem; }

.pb-8 {
  padding-bottom: 1.6rem; }

.ps-8 {
  padding-left: 1.6rem; }

.pe-8 {
  padding-right: 1.6rem; }

.px-8 {
  padding-left: 1.6rem;
  padding-right: 1.6rem; }

.py-8 {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem; }

.m-9 {
  margin: 1.8rem; }

.mt-9 {
  margin-top: 1.8rem; }

.mb-9 {
  margin-bottom: 1.8rem; }

.ms-9 {
  margin-left: 1.8rem; }

.me-9 {
  margin-right: 1.8rem; }

.mx-9 {
  margin-left: 1.8rem;
  margin-right: 1.8rem; }

.my-9 {
  margin-top: 1.8rem;
  margin-bottom: 1.8rem; }

.p-9 {
  padding: 1.8rem; }

.pt-9 {
  padding-top: 1.8rem; }

.pb-9 {
  padding-bottom: 1.8rem; }

.ps-9 {
  padding-left: 1.8rem; }

.pe-9 {
  padding-right: 1.8rem; }

.px-9 {
  padding-left: 1.8rem;
  padding-right: 1.8rem; }

.py-9 {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem; }

.m-10 {
  margin: 2rem; }

.mt-10 {
  margin-top: 2rem; }

.mb-10 {
  margin-bottom: 2rem; }

.ms-10 {
  margin-left: 2rem; }

.me-10 {
  margin-right: 2rem; }

.mx-10 {
  margin-left: 2rem;
  margin-right: 2rem; }

.my-10 {
  margin-top: 2rem;
  margin-bottom: 2rem; }

.p-10 {
  padding: 2rem; }

.pt-10 {
  padding-top: 2rem; }

.pb-10 {
  padding-bottom: 2rem; }

.ps-10 {
  padding-left: 2rem; }

.pe-10 {
  padding-right: 2rem; }

.px-10 {
  padding-left: 2rem;
  padding-right: 2rem; }

.py-10 {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.fw-bold {
  font-weight: bold; }

.ta-left {
  text-align: left !important; }

.ta-center {
  text-align: center !important; }

.icon-refresh {
  transform-origin: 0.5em 0.72em; }

.auto-link {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0.2rem;
  padding: 0 0.2rem; }

.auto-link::before {
  content: '🔗'; }

.d-flex {
  display: flex !important; }

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

.flex-row {
  flex-direction: row; }

.justify-content-between {
  justify-content: space-between !important; }

.align-items-center {
  align-items: center !important; }

select {
  background-color: rgba(20, 20, 20, 0.05);
  border: 0;
  font-size: 1.2rem;
  padding: .3rem 0; }

input[type="text"], input[type="password"], textarea {
  border: 0;
  padding: 0; }

button {
  background-color: #3A78FF;
  border: 0;
  font-weight: bold;
  padding: .5em 2em;
  font-size: 1.2em;
  color: black;
  font-family: "Open Sans"; }

button[disabled] {
  background-color: #aaa; }

body {
  color: black; }

.cbx-container {
  display: flex;
  position: relative;
  padding-left: 1.5rem;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 100%; }

/* Hide the browser's default checkbox */
.cbx-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #eee; }

/* On mouse-over, add a grey background color */
.cbx-container:hover input ~ .checkmark {
  background-color: #ccc; }

/* When the checkbox is checked, add a blue background */
.cbx-container input:checked ~ .checkmark {
  background-color: #2196F3; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the checkmark when checked */
.cbx-container input:checked ~ .checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.cbx-container .checkmark:after {
  left: 8px;
  top: 5px;
  width: 4px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

a {
  text-decoration: none;
  color: inherit; }

input[type="checkbox"].switch {
  display: none; }

input[type="checkbox"].switch + label {
  width: 46px;
  min-width: 46px;
  height: 23px;
  border-radius: 23px;
  border: 2px solid #ddd;
  background-color: #EEE;
  display: inline-block;
  content: "";
  margin-right: 5px;
  transition: background-color 0.5s linear; }

input[type="checkbox"].switch + label:hover {
  cursor: pointer; }

input[type="checkbox"].switch + label::before {
  width: 23px;
  height: 23px;
  border-radius: 23px;
  background-color: #fff;
  display: block;
  content: "";
  margin-right: 5px;
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa; }

input[type="checkbox"].switch.small + label {
  width: 30px;
  min-width: 30px;
  height: 15px;
  border-radius: 15px; }

input[type="checkbox"].switch.small + label::before {
  width: 15px;
  height: 15px;
  border-radius: 15px; }

input[type="checkbox"].switch.small:checked + label::before {
  margin: 0 0 0 15px; }

input[type="checkbox"].switch:checked + label {
  background-color: #2b8718; }

input[type="checkbox"].switch:checked + label::before {
  margin: 0 0 0 23px; }

.txt-input {
  margin: 1rem 0; }

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s; }

.slider:hover {
  opacity: 1; }

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer; }

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer; }

.button-circle {
  font-size: 2rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 0.2rem solid #000;
  border-radius: 50%;
  background-color: #3A78FF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 5px #aaa; }

.labeled-text-input {
  position: relative;
  width: 100%;
  align-items: center;
  display: flex;
  border-bottom: 1px solid black; }
  .labeled-text-input .label {
    flex-grow: 1;
    position: relative; }
  .labeled-text-input .label-text {
    display: inline-block; }
  .labeled-text-input input[type="text"], .labeled-text-input input[type="password"] {
    font-size: 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: transparent;
    width: 100%; }
  .labeled-text-input .btn-clear {
    font-size: 2rem; }

.date-select {
  display: inline-flex;
  flex-direction: column;
  align-items: center; }

.date-select .select {
  display: flex;
  flex-direction: column;
  align-items: stretch; }

.date-select .year {
  font-size: 1.3rem;
  font-weight: bold;
  display: flex; }

.date-select .current-year {
  flex-grow: 1; }

.date-select .item.year {
  display: grid;
  text-align: center; }

.date-select .select > .month {
  display: flex; }

.date-select .month .scroller {
  max-width: 16rem; }

/*
.date-select .main {
   display: flex;
   flex-direction: column;
}
*/
.date-select .confirm {
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
  margin: 1rem; }

.date-select .confirm .btn-confirm {
  grid-area: 1 / 3 / span 3;
  background-image: url(../images/check.png);
  height: 24px;
  width: 24px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  align-self: end;
  border: 0;
  background-color: transparent; }

.date-select .confirm .btn-confirm:disabled {
  filter: grayscale(100%) brightness(4); }

.date-select .confirm .date {
  grid-area: 1 / 1;
  margin-right: 1rem; }

.date-select .confirm .date-from.selected, .date-select .confirm .date-to.selected {
  font-weight: bold;
  color: red; }

.date-select .confirm .date-from {
  grid-area: 2 / 1;
  margin-right: 1rem; }

.date-select .confirm .date-to {
  grid-area: 3 / 1;
  margin-right: 1rem; }

.date-select .confirm .date + div {
  grid-area: 1 / 2; }

.date-select .confirm .date-from + div {
  grid-area: 2 / 2; }

.date-select .confirm .date-to + div {
  grid-area: 3 / 2; }

.date-select .month-title {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  margin: 0 .5rem; }

.date-select .btn {
  cursor: pointer;
  font-size: 1.5rem; }

.date-select .btn-change-month.prev, .date-select .btn-change-month.next {
  align-self: center; }

/*
.date-select .weekday-titles {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   border-bottom: 1px solid #999;
}
*/
/*
.date-select .weekday-title {
   text-align: center;
   font-weight: bold;
}
*/
/*
.date-select .months {
   overflow: hidden;
}

.date-select .current-month {

}
*/
.date-select .day-grid {
  display: grid;
  grid-template-columns: 0fr 0fr 0fr 0fr 0fr 0fr 0fr 0fr;
  justify-content: center;
  background-color: #3A78FF;
  border-radius: .5rem; }

.date-select .weekday {
  background-color: transparent;
  padding: .4rem;
  text-align: center;
  font-size: 1rem;
  border: 2px solid transparent;
  z-index: 1;
  font-weight: bold; }

.date-select .weekday.additional {
  color: #555;
  font-weight: normal; }

.date-select .weekday.today {
  border-color: darkorange;
  /*background-color: antiquewhite;*/
  border-radius: 50%; }

.date-select .day-grid .selection {
  background-color: #ffda00; }

.date-select .day-grid .selection.single {
  border-radius: 50%; }

.date-select .day-grid .selection.between {
  height: 1.2rem;
  align-self: center;
  margin-left: -.2rem;
  margin-right: .2rem; }

.date-select .weekday-title {
  text-align: center;
  border-bottom: 1px solid black; }

/*
.scroller {
   max-width: 16rem;
   overflow: hidden;
}
.scroller .container {
       --n: 1;
      display: flex;
      flex-direction: row;
       align-items: center;
       overflow-y: hidden;
       width: 100%;
       width: calc(var(--n)*100%);
       height: 100%;
       max-height: 100%;
       transform: translate(calc(var(--tx, 0px) + var(--i, 0)/var(--n)*-100%));
}

.scroller .container .item {
           width: 100%;
           width: calc(100%/var(--n));
           user-select: none;
           height: 100%;
           overflow-y: auto;
           overflow-x: hidden;
           text-align: center;
           
           height: 100%;
           

}

.scroller .container.smooth {
   transition: transform ease-out var(--td);
}
*/
.number-select {
  font-size: 1.4rem; }
  .number-select .numbers {
    display: grid;
    grid-template-columns: repeat(6, 0fr);
    justify-content: center;
    padding: .5rem; }
    .number-select .numbers .selection.between {
      height: 1.2em;
      align-self: center;
      background-color: #ffda00;
      margin-left: 0;
      margin-right: 0; }
    .number-select .numbers .selection.between:last-of-type {
      margin-right: -.2em; }
    .number-select .numbers .selection.between.first {
      margin-left: .2em; }
  .number-select .number {
    display: grid;
    align-items: center;
    text-align: center;
    padding: .3em;
    width: 1.4em;
    height: 1.4em;
    z-index: 2; }
    .number-select .number.selected {
      border-radius: 50%;
      background-color: #ffda00; }

.multi-select {
  display: grid;
  grid-template-columns: 1fr 0fr;
  align-items: stretch;
  background-color: #82aaff;
  font-size: 1rem; }

.multi-select .selected {
  display: flex;
  flex-flow: row wrap; }

.multi-select .selected-item {
  display: flex;
  align-items: center;
  background-color: #ffda00;
  margin: 2px 0 2px 2px;
  border-radius: .3rem;
  padding: 0 .2rem; }

.multi-select .selected-item .name {
  margin-right: .2rem; }

.multi-select .selected-item .btn-delete {
  font-size: 0.8rem;
  display: flex;
  text-align: center;
  align-items: center;
  font-size: 1.6rem;
  margin: -.2rem 0; }

.multi-select .selected-item .btn-delete div {
  width: 100%; }

.multi-select .btn-add {
  display: grid;
  margin: .1rem;
  align-items: center;
  font-size: 2rem;
  margin: -.2rem 0; }

.multi-select-list {
  z-index: 2;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  font-size: 1.2rem; }

.modal-multi-select-list .main {
  background-color: #82aaff;
  display: flex;
  flex-direction: column;
  overflow: auto; }
  .modal-multi-select-list .main .search {
    padding: .5rem; }

.modal-multi-select-list .items {
  flex-grow: 1;
  overflow: scroll;
  padding-bottom: 4rem; }
  .modal-multi-select-list .items input[type="checkbox"] {
    width: 1.6rem;
    height: 1.6rem; }
  .modal-multi-select-list .items .equal-width {
    width: 4rem;
    max-width: 4rem;
    overflow: hidden;
    text-overflow: ellipsis; }
  .modal-multi-select-list .items .fav-list {
    background-color: #b5cdff; }

.modal-multi-select-list .items td {
  padding: .3rem; }

.modal-multi-select-list .buttons {
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 2rem; }
  .modal-multi-select-list .buttons .button-circle {
    margin: .2rem; }

.radio-buttons input {
  display: none; }
  .radio-buttons input:checked + label {
    background-color: #ffda00; }

.radio-buttons label {
  display: inline-block;
  text-align: center;
  border: 0;
  background-color: #3A78FF;
  margin-right: .2rem;
  padding: .2rem .8rem; }
  .radio-buttons label:first-of-type {
    border-radius: 1rem 0 0 1rem;
    border-right-width: 0; }
  .radio-buttons label:last-child {
    border-radius: 0 1rem 1rem 0; }

.modal-window > .content {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr; }
  .modal-window > .content .head {
    display: grid;
    grid-template-columns: 1fr 0fr;
    align-items: center;
    background-color: #3A78FF; }
    .modal-window > .content .head .btn-back {
      padding: .2rem;
      font-size: 2rem; }
    .modal-window > .content .head .title {
      padding: .5rem;
      font-weight: bold; }
    .modal-window > .content .head .metadata {
      padding: 0 .5rem .5rem .5rem;
      font-size: .8em; }
  .modal-window > .content .body {
    background-color: #e2ebff;
    overflow-y: scroll; }

.modal-confirm {
  padding: 1rem;
  border-top: .2rem dashed #ccc;
  border-bottom: .2rem dashed #ccc;
  background: #333333; }
  .modal-confirm .message {
    padding: 1rem 0; }
  .modal-confirm button {
    margin-right: 1rem; }

.modal-get-text {
  padding: 1rem;
  border-top: .2rem dashed #ccc;
  border-bottom: .2rem dashed #ccc;
  background: #333333; }
  .modal-get-text .message {
    padding: 1rem 0; }
  .modal-get-text .buttons {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 2rem; }
    .modal-get-text .buttons .button-circle {
      margin: .2rem; }
  .modal-get-text .text {
    font-size: 2rem;
    width: 90%; }

.modal-select-time-frame {
  padding: 1rem;
  background: #333333;
  display: flex;
  justify-content: center; }
  .modal-select-time-frame .title {
    margin-bottom: 1rem; }
  .modal-select-time-frame .buttons {
    display: flex;
    flex-direction: column; }

.modal-file-upload {
  justify-content: center;
  position: relative;
  font-size: 1.3rem;
  overflow: hidden; }
  .modal-file-upload .container {
    padding: 1rem;
    border-top: .2rem dashed #ccc;
    border-bottom: .2rem dashed #ccc;
    background: #333333; }
  .modal-file-upload .files {
    padding: 1rem 0; }
    .modal-file-upload .files .file {
      display: flex;
      margin-bottom: .5rem; }
    .modal-file-upload .files .bar {
      flex-grow: 1;
      border-radius: .3rem;
      position: relative;
      background-color: #444;
      padding: .1rem .3rem;
      margin-right: .5rem; }
    .modal-file-upload .files .progress {
      height: 100%;
      position: absolute;
      background-color: rgba(199, 199, 199, 0.5);
      left: 0;
      top: 0;
      border-radius: .3rem;
      transition: width .9s; }
  .modal-file-upload .buttons {
    display: flex;
    justify-content: end; }
    .modal-file-upload .buttons .button {
      margin-right: .5rem; }

.modal-window .settings-item .title {
  display: flex;
  justify-content: space-between; }

.help {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center; }

.modal-edit-absence {
  padding: 1rem;
  border-top: .2rem dashed #ccc;
  border-bottom: .2rem dashed #ccc;
  background: #333333; }
  .modal-edit-absence .title {
    font-size: 1.2rem;
    margin: .5rem 0;
    color: #3A78FF; }
  .modal-edit-absence .label-note {
    margin-bottom: .1rem; }
  .modal-edit-absence .label-cnt-hours {
    margin-bottom: .1rem;
    margin-top: 1rem; }
  .modal-edit-absence .note {
    font-size: 2rem;
    width: 90%; }
  .modal-edit-absence .number-select .number.selected {
    color: #333; }
  .modal-edit-absence .buttons {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 2rem; }
    .modal-edit-absence .buttons .button-circle {
      margin: .2rem; }

.modal-show-timetable-item .container {
  padding: .5rem; }
  .modal-show-timetable-item .container .title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: .5rem 0; }

.modal-show-timetable-item .timetable-grid {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  grid-template-rows: 1fr;
  background-color: transparent;
  border: 0; }
  .modal-show-timetable-item .timetable-grid .timetable-cell {
    flex-direction: column;
    max-width: 30rem; }
    .modal-show-timetable-item .timetable-grid .timetable-cell .timetable-course {
      padding: .5rem;
      border: 1px solid black; }
  .modal-show-timetable-item .timetable-grid .message {
    white-space: wrap !important;
    font-size: 1rem !important; }

.modal-show-timetable-item .pupils {
  padding: .5rem; }
  .modal-show-timetable-item .pupils .course-title {
    padding: .3rem;
    margin-top: 1rem;
    font-weight: bold; }

.modal-show-info .body {
  padding: .5rem; }

.modal-show-appointment .space {
  height: 3.5rem; }

.modal-select-date {
  display: flex;
  justify-content: center; }

.modal-select-time {
  background-color: #82aaff; }
  .modal-select-time .time-picker {
    padding: 1rem; }

.modal-edit-class-note {
  background-color: #3A78FF; }
  .modal-edit-class-note .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #82aaff; }
    .modal-edit-class-note .info .sync-status {
      display: inline-block;
      font-size: 1.4rem;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      text-align: center; }
      .modal-edit-class-note .info .sync-status .icon {
        line-height: 1.4rem;
        text-align: center;
        display: none; }
      .modal-edit-class-note .info .sync-status.error {
        background-color: red;
        font-weight: bold; }
        .modal-edit-class-note .info .sync-status.error .error {
          display: inline-block; }
      .modal-edit-class-note .info .sync-status.update {
        background-color: orange; }
        .modal-edit-class-note .info .sync-status.update .icon-refresh {
          display: inline-block; }
    .modal-edit-class-note .info .message {
      padding: .5rem; }
  .modal-edit-class-note .buttons {
    margin-bottom: .2rem; }
  .modal-edit-class-note .settings-item {
    background-color: #82aaff;
    border-bottom: 1px solid black;
    padding: .5rem; }
    .modal-edit-class-note .settings-item.message .content, .modal-edit-class-note .settings-item.notes .content {
      display: flex; }
      .modal-edit-class-note .settings-item.message .content input[type="text"], .modal-edit-class-note .settings-item.message .content textarea, .modal-edit-class-note .settings-item.notes .content input[type="text"], .modal-edit-class-note .settings-item.notes .content textarea {
        font-family: Verdana, sans-serif;
        font-size: 1.3rem;
        background-color: #82aaff; }
    .modal-edit-class-note .settings-item.permission .content {
      padding: .5rem;
      display: flex;
      align-items: center; }
    .modal-edit-class-note .settings-item .title {
      background-color: #82aaff; }
    .modal-edit-class-note .settings-item .content {
      display: flex;
      flex-direction: column; }
    .modal-edit-class-note .settings-item .validation-error-message {
      color: red; }
    .modal-edit-class-note .settings-item .validation-error {
      border: .2rem solid red; }
  .modal-edit-class-note .date-select .day-grid {
    background-color: lightskyblue; }
  .modal-edit-class-note .settings-item.message {
    margin-bottom: 4rem; }

.modal-edit-pupil-note {
  background-color: #3A78FF; }
  .modal-edit-pupil-note .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #82aaff; }
    .modal-edit-pupil-note .info .sync-status {
      display: inline-block;
      font-size: 1.4rem;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      text-align: center; }
      .modal-edit-pupil-note .info .sync-status .icon {
        line-height: 1.4rem;
        text-align: center;
        display: none; }
      .modal-edit-pupil-note .info .sync-status.error {
        background-color: red;
        font-weight: bold; }
        .modal-edit-pupil-note .info .sync-status.error .error {
          display: inline-block; }
      .modal-edit-pupil-note .info .sync-status.update {
        background-color: orange; }
        .modal-edit-pupil-note .info .sync-status.update .icon-refresh {
          display: inline-block; }
    .modal-edit-pupil-note .info .message {
      padding: .5rem; }
  .modal-edit-pupil-note .buttons {
    margin-bottom: .2rem; }
  .modal-edit-pupil-note .settings-item {
    background-color: #82aaff;
    border-bottom: 1px solid black;
    padding: .5rem; }
    .modal-edit-pupil-note .settings-item.message .content, .modal-edit-pupil-note .settings-item.note .content {
      display: block; }
      .modal-edit-pupil-note .settings-item.message .content input[type="text"], .modal-edit-pupil-note .settings-item.message .content textarea, .modal-edit-pupil-note .settings-item.note .content input[type="text"], .modal-edit-pupil-note .settings-item.note .content textarea {
        font-family: Verdana, sans-serif;
        font-size: 1.3rem;
        background-color: #82aaff; }
    .modal-edit-pupil-note .settings-item.pupil .content {
      font-size: 1.2rem;
      position: relative;
      justify-content: center; }
      .modal-edit-pupil-note .settings-item.pupil .content .icon-plus {
        position: absolute;
        right: 0;
        font-size: 1.8rem; }
      .modal-edit-pupil-note .settings-item.pupil .content .pupil {
        display: flex;
        align-items: center;
        background-color: #ffda00;
        margin: 2px 0 2px 2px;
        border-radius: 0.3rem;
        padding: 0 0.2rem; }
    .modal-edit-pupil-note .settings-item.note .content textarea {
      width: 100%; }
    .modal-edit-pupil-note .settings-item.templates .content {
      align-items: stretch; }
    .modal-edit-pupil-note .settings-item.templates .actions {
      display: flex;
      align-items: stretch; }
      .modal-edit-pupil-note .settings-item.templates .actions div {
        flex-grow: 1;
        text-align: center;
        border-radius: 0.5rem;
        background-color: rgba(255, 255, 255, 0.15);
        margin: 0.3rem;
        padding: 0.3rem;
        width: 10%; }
    .modal-edit-pupil-note .settings-item.templates .templates {
      align-items: left;
      margin-bottom: 4rem; }
      .modal-edit-pupil-note .settings-item.templates .templates .template {
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
    .modal-edit-pupil-note .settings-item .content {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .modal-edit-pupil-note .settings-item .validation-error-message {
      color: red; }
    .modal-edit-pupil-note .settings-item .validation-error {
      border: .2rem solid red; }

.modal-edit-smartphone-violation-note {
  background-color: #3A78FF; }
  .modal-edit-smartphone-violation-note .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #82aaff; }
    .modal-edit-smartphone-violation-note .info .sync-status {
      display: inline-block;
      font-size: 1.4rem;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      text-align: center; }
      .modal-edit-smartphone-violation-note .info .sync-status .icon {
        line-height: 1.4rem;
        text-align: center;
        display: none; }
      .modal-edit-smartphone-violation-note .info .sync-status.error {
        background-color: red;
        font-weight: bold; }
        .modal-edit-smartphone-violation-note .info .sync-status.error .error {
          display: inline-block; }
      .modal-edit-smartphone-violation-note .info .sync-status.update {
        background-color: orange; }
        .modal-edit-smartphone-violation-note .info .sync-status.update .icon-refresh {
          display: inline-block; }
    .modal-edit-smartphone-violation-note .info .message {
      padding: .5rem; }
  .modal-edit-smartphone-violation-note .buttons {
    margin-bottom: .2rem; }
  .modal-edit-smartphone-violation-note .settings-item {
    background-color: #82aaff;
    border-bottom: 1px solid black;
    padding: .5rem; }
    .modal-edit-smartphone-violation-note .settings-item.message .content, .modal-edit-smartphone-violation-note .settings-item.note .content {
      display: block; }
      .modal-edit-smartphone-violation-note .settings-item.message .content input[type="text"], .modal-edit-smartphone-violation-note .settings-item.message .content textarea, .modal-edit-smartphone-violation-note .settings-item.note .content input[type="text"], .modal-edit-smartphone-violation-note .settings-item.note .content textarea {
        font-family: Verdana, sans-serif;
        font-size: 1.3rem;
        background-color: #82aaff; }
    .modal-edit-smartphone-violation-note .settings-item.pupil .content {
      font-size: 1.2rem;
      position: relative;
      justify-content: center; }
      .modal-edit-smartphone-violation-note .settings-item.pupil .content .icon-plus {
        position: absolute;
        right: 0;
        font-size: 1.8rem; }
      .modal-edit-smartphone-violation-note .settings-item.pupil .content .pupil {
        display: flex;
        align-items: center;
        background-color: #ffda00;
        margin: 2px 0 2px 2px;
        border-radius: 0.3rem;
        padding: 0 0.2rem; }
    .modal-edit-smartphone-violation-note .settings-item.note .content textarea {
      width: 100%; }
    .modal-edit-smartphone-violation-note .settings-item .content {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .modal-edit-smartphone-violation-note .settings-item .validation-error-message {
      color: red; }
    .modal-edit-smartphone-violation-note .settings-item .validation-error {
      border: .2rem solid red; }

.modal-edit-reprimand {
  background-color: #3A78FF; }
  .modal-edit-reprimand .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #82aaff; }
    .modal-edit-reprimand .info .sync-status {
      display: inline-block;
      font-size: 1.4rem;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      text-align: center; }
      .modal-edit-reprimand .info .sync-status .icon {
        line-height: 1.4rem;
        text-align: center;
        display: none; }
      .modal-edit-reprimand .info .sync-status.error {
        background-color: red;
        font-weight: bold; }
        .modal-edit-reprimand .info .sync-status.error .error {
          display: inline-block; }
      .modal-edit-reprimand .info .sync-status.update {
        background-color: orange; }
        .modal-edit-reprimand .info .sync-status.update .icon-refresh {
          display: inline-block; }
    .modal-edit-reprimand .info .message {
      padding: .5rem; }
  .modal-edit-reprimand .buttons {
    margin-bottom: .2rem; }
  .modal-edit-reprimand .settings-item {
    background-color: #82aaff;
    border-bottom: 1px solid black;
    padding: .5rem; }
    .modal-edit-reprimand .settings-item.message .content, .modal-edit-reprimand .settings-item.note .content {
      display: block; }
      .modal-edit-reprimand .settings-item.message .content input[type="text"], .modal-edit-reprimand .settings-item.message .content textarea, .modal-edit-reprimand .settings-item.note .content input[type="text"], .modal-edit-reprimand .settings-item.note .content textarea {
        font-family: Verdana, sans-serif;
        font-size: 1.3rem;
        background-color: #82aaff; }
    .modal-edit-reprimand .settings-item.pupil .content {
      font-size: 1.2rem;
      position: relative;
      justify-content: center; }
      .modal-edit-reprimand .settings-item.pupil .content .icon-plus {
        position: absolute;
        right: 0;
        font-size: 1.8rem; }
      .modal-edit-reprimand .settings-item.pupil .content .pupil {
        display: flex;
        align-items: center;
        background-color: #ffda00;
        margin: 2px 0 2px 2px;
        border-radius: 0.3rem;
        padding: 0 0.2rem; }
    .modal-edit-reprimand .settings-item.note .content textarea {
      width: 100%; }
    .modal-edit-reprimand .settings-item .content {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .modal-edit-reprimand .settings-item .validation-error-message {
      color: red; }
    .modal-edit-reprimand .settings-item .validation-error {
      border: .2rem solid red; }

.modal-edit-appointment {
  background-color: #82aaff; }
  .modal-edit-appointment .settings-items {
    padding-bottom: 4rem;
    overflow: scroll; }
  .modal-edit-appointment .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #82aaff; }
    .modal-edit-appointment .info .sync-status {
      display: inline-block;
      font-size: 1.4rem;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      text-align: center; }
      .modal-edit-appointment .info .sync-status .icon {
        line-height: 1.4rem;
        text-align: center;
        display: none; }
      .modal-edit-appointment .info .sync-status.error {
        background-color: red;
        font-weight: bold; }
        .modal-edit-appointment .info .sync-status.error .error {
          display: inline-block; }
      .modal-edit-appointment .info .sync-status.update {
        background-color: orange; }
        .modal-edit-appointment .info .sync-status.update .icon-refresh {
          display: inline-block; }
    .modal-edit-appointment .info .message {
      padding: .5rem; }
  .modal-edit-appointment .buttons {
    /*margin-bottom: .2rem;*/
    z-index: 2; }
  .modal-edit-appointment .settings-item {
    background-color: #82aaff; }
    .modal-edit-appointment .settings-item .outer {
      padding: .5rem;
      border-bottom: 1px solid black; }
    .modal-edit-appointment .settings-item.title .outer {
      height: 4rem;
      position: relative; }
    .modal-edit-appointment .settings-item.title .content input[type="text"], .modal-edit-appointment .settings-item.title .content textarea {
      position: absolute;
      width: 100%;
      font-family: Verdana, sans-serif;
      font-size: 1.3rem;
      background-color: #82aaff; }
    .modal-edit-appointment .settings-item.is-public .content {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center; }
    .modal-edit-appointment .settings-item.classes {
      max-height: 25rem;
      transition: max-height 0.3s ease;
      overflow: hidden; }
      .modal-edit-appointment .settings-item.classes > .outer > .content {
        font-size: 1.2rem; }
    .modal-edit-appointment .settings-item .content-public {
      padding-top: .5rem;
      transition: max-height 0.3s ease;
      overflow: hidden;
      max-height: 0; }
    .modal-edit-appointment .settings-item .title {
      background-color: #82aaff; }
    .modal-edit-appointment .settings-item .content {
      display: flex;
      flex-direction: column; }
    .modal-edit-appointment .settings-item .validation-error-message {
      color: red; }
    .modal-edit-appointment .settings-item .validation-error {
      border: .2rem solid red; }
  .modal-edit-appointment .date-select .day-grid {
    background-color: #3A78FF;
    border-radius: .5rem; }
  .modal-edit-appointment .settings-item.message {
    margin-bottom: 4rem; }

body.fullscreen .note-modal-backdrop {
  z-index: 1; }

.note-editor.note-frame .note-editing-area .note-editable {
  background-color: #82aaff; }

.modal-edit-day-absence {
  background-color: #3A78FF; }
  .modal-edit-day-absence .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #82aaff; }
    .modal-edit-day-absence .info .sync-status {
      display: inline-block;
      font-size: 1.4rem;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      flex-shrink: 0;
      text-align: center; }
      .modal-edit-day-absence .info .sync-status .icon {
        line-height: 1.4rem;
        text-align: center;
        display: none; }
      .modal-edit-day-absence .info .sync-status.error {
        background-color: red;
        font-weight: bold; }
        .modal-edit-day-absence .info .sync-status.error .error {
          display: inline-block; }
      .modal-edit-day-absence .info .sync-status.update {
        background-color: orange; }
        .modal-edit-day-absence .info .sync-status.update .icon-refresh {
          display: inline-block; }
    .modal-edit-day-absence .info .message {
      padding: .5rem; }
  .modal-edit-day-absence .buttons {
    margin-bottom: .2rem; }
  .modal-edit-day-absence .settings-item {
    background-color: #82aaff;
    border-bottom: 1px solid black;
    padding: .5rem; }
    .modal-edit-day-absence .settings-item.message .content, .modal-edit-day-absence .settings-item.note .content {
      display: block; }
      .modal-edit-day-absence .settings-item.message .content input[type="text"], .modal-edit-day-absence .settings-item.message .content textarea, .modal-edit-day-absence .settings-item.note .content input[type="text"], .modal-edit-day-absence .settings-item.note .content textarea {
        font-family: Verdana, sans-serif;
        font-size: 1.3rem;
        background-color: #82aaff; }
    .modal-edit-day-absence .settings-item.pupil .content {
      font-size: 1.2rem; }
      .modal-edit-day-absence .settings-item.pupil .content .icon-plus {
        position: absolute;
        right: .5rem;
        font-size: 1.8rem; }
      .modal-edit-day-absence .settings-item.pupil .content .pupil {
        display: flex;
        align-items: center;
        background-color: #ffda00;
        margin: 2px 0 2px 2px;
        border-radius: 0.3rem;
        padding: 0 0.2rem; }
    .modal-edit-day-absence .settings-item.absence-type .radio-buttons {
      margin: .5rem 0;
      font-size: .9rem;
      display: flex; }
    .modal-edit-day-absence .settings-item.absence-type .late-time {
      max-height: 20rem;
      transition: .2s all;
      overflow: hidden; }
      .modal-edit-day-absence .settings-item.absence-type .late-time .hours, .modal-edit-day-absence .settings-item.absence-type .late-time .minutes {
        display: flex;
        align-items: baseline; }
      .modal-edit-day-absence .settings-item.absence-type .late-time .number-select {
        font-size: 1.2rem;
        margin-left: 1rem; }
    .modal-edit-day-absence .settings-item.date .title .date-value {
      font-weight: bold; }
    .modal-edit-day-absence .settings-item.note .content textarea {
      width: 100%; }
    .modal-edit-day-absence .settings-item .content {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .modal-edit-day-absence .settings-item .absent-to, .modal-edit-day-absence .settings-item .absent-from {
      margin-top: .3rem;
      flex-direction: row; }
      .modal-edit-day-absence .settings-item .absent-to .time, .modal-edit-day-absence .settings-item .absent-from .time {
        margin-left: .5rem;
        font-size: 1.3rem;
        white-space: nowrap;
        background-color: #ffda00;
        border-radius: 0.3rem;
        padding: 0 0.2rem; }
    .modal-edit-day-absence .settings-item .validation-error-message {
      color: red; }
    .modal-edit-day-absence .settings-item .validation-error {
      border: .2rem solid red; }
  .modal-edit-day-absence .date-select .day-grid {
    background-color: lightskyblue; }
  .modal-edit-day-absence .note {
    margin-bottom: 4rem; }

.modal-spinner-content {
  width: 10rem;
  height: 10rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(155, 155, 155, 0.8);
  border-radius: 50%; }

.multi-select .cnt-hours {
  background-color: goldenrod;
  border-radius: 50%;
  padding: .1rem .5rem; }

.multi-select .absent-pupil-select.selected-item {
  align-items: stretch;
  padding: 0; }
  .multi-select .absent-pupil-select.selected-item .left {
    display: flex;
    align-items: center;
    padding: .3rem; }
  .multi-select .absent-pupil-select.selected-item .middle {
    display: flex;
    align-items: center;
    padding: .1rem; }

.multi-select .absent-homework-select.selected-item {
  align-items: stretch;
  padding: 0; }
  .multi-select .absent-homework-select.selected-item .left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .3rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0.5rem;
    align-self: center;
    font-size: 1.3rem; }
  .multi-select .absent-homework-select.selected-item .middle {
    display: flex;
    align-items: center;
    padding: .1rem; }

.main-item.data .accordion-panel .panel {
  padding: .5rem; }

.main-item.data .accordion {
  background-color: #3A78FF;
  font-weight: bold;
  font-size: 1.2rem; }

.main-item.data ul.files {
  list-style-type: none; }
  .main-item.data ul.files li.file::before {
    font-family: "fontello";
    content: '\e80d';
    margin-left: -20px;
    margin-right: 10px; }
  .main-item.data ul.files li.file {
    margin: .5rem 0;
    font-size: 1.3rem; }
  .main-item.data ul.files a {
    text-decoration: none;
    color: inherit; }

.main-item.data .my-class .title {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;
  font-weight: bold;
  background-color: cornflowerblue; }

body > .container > .main > .main-item.timetable.timetable-user-pupil .statusbar {
  height: 0;
  padding: 0;
  overflow: hidden; }

body > .container > .main > .main-item.timetable.timetable-user-pupil .main-content > .title {
  display: none !important; }

body > .container > .main > .main-item.timetable .statusbar {
  display: grid;
  grid-template-columns: 1fr 0fr;
  font-size: 2rem;
  align-items: center; }
  body > .container > .main > .main-item.timetable .statusbar .btn-my {
    margin: -.4rem 0; }
  body > .container > .main > .main-item.timetable .statusbar .search {
    margin-right: 1rem; }

body > .container > .main > .main-item.timetable .main-content .notes {
  display: none;
  background-color: #82aaff;
  justify-content: stretch;
  border-top: 1px solid #666; }
  body > .container > .main > .main-item.timetable .main-content .notes .icon-edit {
    font-size: 1.5rem;
    margin-left: .5rem;
    margin-top: .3rem; }
  body > .container > .main > .main-item.timetable .main-content .notes .items {
    flex-grow: 1;
    padding: .3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start; }
    body > .container > .main > .main-item.timetable .main-content .notes .items .creator {
      color: #3A78FF;
      margin: 0 .5rem; }
    body > .container > .main > .main-item.timetable .main-content .notes .items .date {
      margin: 0 .5rem; }
    body > .container > .main > .main-item.timetable .main-content .notes .items .class-note-item {
      display: inline-block; }
  body > .container > .main > .main-item.timetable .main-content .notes .btn-add-pupil-note {
    font-size: 1.8rem;
    margin-right: .3rem; }

body > .container > .main > .main-item.timetable .main-content[result-type="pupil"] .notes {
  display: flex; }

body > .container > .main > .main-item.timetable .search-results {
  overflow: scroll;
  display: none;
  padding: .5rem; }
  body > .container > .main > .main-item.timetable .search-results .search-result {
    margin-bottom: .2rem; }
    body > .container > .main > .main-item.timetable .search-results .search-result .type {
      display: inline-grid;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background-color: #3A78FF;
      margin-right: 5px;
      box-shadow: 0px 0px 5px #aaa; }
      body > .container > .main > .main-item.timetable .search-results .search-result .type.class {
        background-color: #dc0000; }
      body > .container > .main > .main-item.timetable .search-results .search-result .type.course {
        background-color: #c444ff; }
      body > .container > .main > .main-item.timetable .search-results .search-result .type.pupil {
        background-color: #ff9300; }
      body > .container > .main > .main-item.timetable .search-results .search-result .type.room {
        background-color: #2b8718; }

body > .container > .main > .main-item.timetable .main-content {
  display: grid;
  height: 100%;
  grid-template-rows: 0fr 1fr; }
  body > .container > .main > .main-item.timetable .main-content > .title {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    background-color: #82aaff;
    border-bottom: 1px solid #666; }
  body > .container > .main > .main-item.timetable .main-content > .date {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    background-color: #82aaff; }
    body > .container > .main > .main-item.timetable .main-content > .date .btn-regular {
      border-radius: .8rem;
      text-align: center;
      margin: .3rem;
      padding: .2rem .5rem;
      border: 2px solid #666; }
    body > .container > .main > .main-item.timetable .main-content > .date .date-content {
      padding: .2rem .5rem;
      border-radius: .8rem;
      border: 2px solid #666; }
    body > .container > .main > .main-item.timetable .main-content > .date .selected {
      background-color: #ffda00 !important;
      border-color: #ffda00; }

.timetable-grid {
  display: grid;
  grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.8rem 0fr repeat(2, 5rem) 0fr repeat(2, 5rem) 0fr repeat(2, 5rem) 0fr repeat(4, 5rem);
  column-gap: 2px;
  row-gap: 1px;
  background-color: #555;
  border: 1px solid #555; }
  .timetable-grid .timetable-cell {
    /*padding: 0 .5rem;*/
    display: flex; }
    .timetable-grid .timetable-cell.empty {
      background-color: #e2ebff; }
    .timetable-grid .timetable-cell.current {
      border: 1px solid red; }
  .timetable-grid .timetable-course {
    padding: 0 .5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    border-right: 1px solid #666;
    /*
      &.absent {
         opacity: .5;
         background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100%);
      }
      */ }
    .timetable-grid .timetable-course:last-child {
      border-right: 0; }
    .timetable-grid .timetable-course.inactive {
      opacity: .7;
      background-color: rgba(0, 0, 0, 0.2); }
    .timetable-grid .timetable-course.new {
      box-shadow: 0 0 5px rgba(255, 0, 0, 0.8) inset; }
    .timetable-grid .timetable-course.my {
      background-color: lightyellow; }
    .timetable-grid .timetable-course.cancelled {
      color: #bbb !important; }
      .timetable-grid .timetable-course.cancelled > .diagonal-line {
        display: block; }
      .timetable-grid .timetable-course.cancelled > .class {
        color: #bbb; }
      .timetable-grid .timetable-course.cancelled > .room {
        color: #bbb; }
      .timetable-grid .timetable-course.cancelled span.new {
        background-color: unset !important; }
    .timetable-grid .timetable-course > .diagonal-line {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: .5;
      background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 1px), black 50%, rgba(0, 0, 0, 0) calc(50% + 1px), rgba(0, 0, 0, 0) 100%); }
    .timetable-grid .timetable-course > div {
      text-overflow: ellipsis;
      overflow: hidden; }
    .timetable-grid .timetable-course .new {
      background-color: rgba(255, 0, 0, 0.2);
      padding: 0 .2rem;
      border-radius: .2rem; }
    .timetable-grid .timetable-course .absent {
      color: #bbb;
      text-decoration: line-through; }
  .timetable-grid .day-name {
    background-color: #82aaff;
    font-size: .9rem;
    position: sticky;
    top: 0;
    justify-content: center;
    padding: .3rem 0;
    overflow: hidden; }
  .timetable-grid .hour-name {
    background-color: #82aaff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    padding: 0 .3rem; }
    .timetable-grid .hour-name .hour {
      font-weight: bold; }
    .timetable-grid .hour-name .timeframe {
      font-size: .7rem; }
  .timetable-grid .break {
    background-color: lightblue; }
  .timetable-grid .watch {
    background-color: #ff8888;
    font-size: .8rem;
    text-align: center;
    line-height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding: .1rem; }
    .timetable-grid .watch .watch-item {
      padding: .1rem; }
      .timetable-grid .watch .watch-item.removed {
        text-decoration: line-through;
        color: #666; }
      .timetable-grid .watch .watch-item.add {
        background-color: rgba(255, 255, 255, 0.6);
        padding: 0 .5rem;
        border-radius: .2rem;
        color: red;
        font-weight: bold; }
  .timetable-grid .timetable-item {
    background-color: #fff;
    font-size: .9rem;
    /*display: grid;*/
    align-content: center;
    font-weight: bold;
    overflow: hidden; }
    .timetable-grid .timetable-item .class {
      color: #dc0000; }
    .timetable-grid .timetable-item .teachers {
      color: #3A78FF; }
    .timetable-grid .timetable-item .title {
      font-weight: bold;
      text-align: center; }
    .timetable-grid .timetable-item .room {
      text-align: right;
      color: #2b8718; }
    .timetable-grid .timetable-item .message {
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: .7rem; }

.class-register .statusbar {
  display: flex;
  flex-direction: column; }
  .class-register .statusbar .view-select {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .class-register .statusbar .view-select .selected {
      background-color: #ffda00 !important; }
    .class-register .statusbar .view-select .btn-my {
      font-size: 1.5rem;
      border-radius: .8rem;
      width: 3rem;
      text-align: center;
      margin: .3rem; }
    .class-register .statusbar .view-select .classes {
      display: flex; }
      .class-register .statusbar .view-select .classes .open-class-list {
        margin: 0.3rem 0.5rem; }
      .class-register .statusbar .view-select .classes .my-classes {
        display: flex;
        flex-wrap: wrap; }
  .class-register .statusbar .class-list {
    max-height: 0;
    transition: .2s all ease-in;
    border-top: 1px solid cornflowerblue; }
    .class-register .statusbar .class-list.opened {
      max-height: 16rem; }
    .class-register .statusbar .class-list .year-row {
      display: flex;
      padding-left: 1.5rem; }
  .class-register .statusbar .class {
    padding: .1rem;
    border-radius: .8rem;
    background-color: cornflowerblue;
    margin: .1rem;
    min-width: 1.8rem;
    height: 1.3rem;
    text-align: center;
    line-height: 1.3rem;
    font-weight: bold;
    border: 2px solid rgba(0, 0, 0, 0); }
    .class-register .statusbar .class.not-my {
      border: 2px solid orange; }
  .class-register .statusbar .select-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem; }
    .class-register .statusbar .select-date [class^="icon"] {
      font-size: 1.3rem; }

.class-register .notes {
  display: flex; }
  .class-register .notes .icon-plus {
    font-size: 1.8rem;
    float: right; }
  .class-register .notes .icon-edit {
    font-size: 1.5rem;
    margin-left: .5rem;
    align-self: center; }
  .class-register .notes .items {
    flex-grow: 1;
    padding: .5rem; }
    .class-register .notes .items .class-note-item {
      display: flex;
      align-items: center; }
      .class-register .notes .items .class-note-item .content {
        flex-grow: 1; }
        .class-register .notes .items .class-note-item .content .classes {
          color: #dc0000;
          margin-right: .5rem; }
        .class-register .notes .items .class-note-item .content .creator {
          color: #3A78FF;
          margin: 0 .5rem; }
        .class-register .notes .items .class-note-item .content .pupil {
          color: #dc0000; }
      .class-register .notes .items .class-note-item .sync-status {
        position: relative; }
      .class-register .notes .items .class-note-item.deleted > * {
        opacity: .5;
        filter: grayscale(1); }
  .class-register .notes .dropdown {
    position: relative; }
    .class-register .notes .dropdown .dropdown-content {
      transform: scale(0);
      transition: transform .2s;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
      .class-register .notes .dropdown .dropdown-content.show {
        transform: scale(1); }
      .class-register .notes .dropdown .dropdown-content .menu {
        position: absolute;
        right: 0;
        background-color: #82aaff;
        font-size: 1rem;
        white-space: nowrap;
        border: 2px solid #555;
        border-radius: .5rem; }
        .class-register .notes .dropdown .dropdown-content .menu .button {
          border-bottom: 2px solid #555;
          padding: .5rem;
          font-size: 1.1rem;
          font-weight: bold; }
          .class-register .notes .dropdown .dropdown-content .menu .button:last-of-type {
            border: 0; }

.class-register .absences {
  display: flex;
  border-bottom: 1px solid #666; }
  .class-register .absences .icon-user-times {
    font-size: 1.5rem;
    margin-left: .5rem;
    align-self: center; }
  .class-register .absences .icon-plus {
    font-size: 1.8rem;
    float: right; }
  .class-register .absences .items {
    flex-grow: 1;
    padding: .5rem;
    display: flex;
    flex-wrap: wrap; }
    .class-register .absences .items .item-count {
      font-weight: bold; }
    .class-register .absences .items .icon-user-times {
      font-size: 1rem;
      align-items: center;
      margin-right: .3rem; }
    .class-register .absences .items .absence {
      margin: .1rem;
      margin-right: 1rem;
      padding: 0.2rem;
      border-radius: 0.3rem;
      /*
            &.from-hour::after {
               background-image: url('/images/home.png');
               background-size: 2rem 2rem;
               display: inline-block;
               content:"";
               height: 2rem;
               width: 2rem;
            }
            */ }
      .class-register .absences .items .absence.missing {
        animation: blinker 1s linear infinite;
        background-color: lightcoral; }
      .class-register .absences .items .absence.not-justified {
        background-color: lightcoral; }

.class-register .sync-status {
  position: absolute;
  top: .2rem;
  right: .2rem;
  width: 1.3em;
  height: 1.3rem;
  text-align: center;
  border-radius: 50%;
  line-height: 1.3rem;
  opacity: .3; }
  .class-register .sync-status.ok {
    background-color: lightgreen; }
  .class-register .sync-status.update {
    background-color: orange; }
  .class-register .sync-status.error {
    background-color: red;
    font-weight: bold;
    color: white; }

.class-register .day {
  display: flex;
  flex-direction: column;
  background-color: #82aaff; }
  .class-register .day .info {
    font-size: .9rem;
    padding: 0.3rem;
    background-color: lightyellow; }

.class-register .table {
  display: grid;
  grid-template-columns: 0fr 0fr 1fr;
  background-color: #666;
  border: 1px solid #666;
  align-content: start;
  align-items: stretch;
  column-gap: 1px;
  row-gap: 1px;
  padding-bottom: 1px;
  /*overflow: hidden;*/ }
  .class-register .table .deleted > * {
    opacity: .5;
    filter: grayscale(1); }
  .class-register .table .cell {
    background-color: #fff;
    padding: 0 .3rem; }
    .class-register .table .cell.my {
      background-color: aliceblue; }
    .class-register .table .cell.main {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding: .3rem; }
    .class-register .table .cell.head {
      background-color: #82aaff;
      text-align: center; }
    .class-register .table .cell.hour-name {
      background-color: #82aaff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .class-register .table .cell.hour-name .hour {
        font-weight: bold; }
      .class-register .table .cell.hour-name .timeframe {
        font-size: .7rem; }
    .class-register .table .cell.subject {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      max-width: 4rem;
      min-width: 3rem;
      overflow: hidden;
      padding: .3rem; }
    .class-register .table .cell.empty, .class-register .table .cell.empty .class, .class-register .table .cell.empty .creator {
      color: lightgray; }
    .class-register .table .cell .main-item {
      display: flex;
      margin-top: .2rem; }
      .class-register .table .cell .main-item .icon {
        width: 1.5rem;
        flex-shrink: 0; }
      .class-register .table .cell .main-item.absent-homework .icon {
        color: red; }
      .class-register .table .cell .main-item.absent-material .icon {
        color: red; }
    .class-register .table .cell .main-item.content {
      font-weight: bold;
      color: navy; }
    .class-register .table .cell .class {
      color: #dc0000;
      max-width: 4rem;
      text-overflow: ellipsis;
      overflow: hidden; }
    .class-register .table .cell .creator {
      color: #3A78FF; }
    .class-register .table .cell .icon {
      color: sandybrown; }
    .class-register .table .cell .content .absent {
      padding: 0 .3rem;
      border-radius: .4rem;
      font-size: .8rem; }
      .class-register .table .cell .content .absent .last-name {
        font-weight: bold; }
      .class-register .table .cell .content .absent.not-justified {
        background-color: #f5d5c8;
        white-space: nowrap; }
      .class-register .table .cell .content .absent.justified {
        white-space: nowrap; }
    .class-register .table .cell .content .absent-homework, .class-register .table .cell .content .absent-material {
      margin-right: .5rem;
      border-radius: .4rem;
      font-size: .8rem; }
      .class-register .table .cell .content .absent-homework .last-name, .class-register .table .cell .content .absent-material .last-name {
        font-weight: bold; }
    .class-register .table .cell .attachment {
      display: inline-block;
      font-size: .8rem;
      border: .1rem solid grey;
      padding: 0 .3rem;
      border-radius: .4rem;
      white-space: nowrap; }
    .class-register .table .cell .permission-pupils-tag {
      position: absolute;
      top: -0.5rem;
      left: -1rem;
      width: 2rem;
      height: 1rem;
      -webkit-transform: rotate(-45deg);
      background: #ff9300; }
      .class-register .table .cell .permission-pupils-tag.absent-only {
        opacity: .3; }
    .class-register .table .cell .permission-teachers-tag {
      position: absolute;
      bottom: -0.5rem;
      left: -1rem;
      width: 2rem;
      height: 1rem;
      -webkit-transform: rotate(45deg);
      background: #3A78FF; }
      .class-register .table .cell .permission-teachers-tag.of-class {
        opacity: .3; }

.class-register .class-info {
  background-color: rgba(255, 255, 255, 0.7); }
  .class-register .class-info .header {
    background-color: unset;
    padding: .2rem; }
  .class-register .class-info .buttons {
    padding: .2rem; }
  .class-register .class-info .info {
    background-color: unset; }

.main-item.tagesplaene {
  background-color: #fff; }
  .main-item.tagesplaene .tagesplan-button {
    text-align: center;
    font-weight: bold;
    width: unset;
    position: sticky;
    top: 0;
    background-color: #3A78FF; }
  .main-item.tagesplaene .tagesplan-panel img {
    width: 100%; }

body > .container > .main > .main-item.settings {
  grid-template-rows: 1fr; }
  body > .container > .main > .main-item.settings .container {
    overflow: scroll; }
    body > .container > .main > .main-item.settings .container .settings-panel {
      padding: 1rem; }
      body > .container > .main > .main-item.settings .container .settings-panel button {
        padding: .5em 1em;
        margin: .1rem; }
      body > .container > .main > .main-item.settings .container .settings-panel .settings-item {
        border-bottom: 2px solid #ccc;
        padding: .5rem 0;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center; }
        body > .container > .main > .main-item.settings .container .settings-panel .settings-item select {
          max-width: 50%; }
        body > .container > .main > .main-item.settings .container .settings-panel .settings-item.title-above {
          display: block; }
        body > .container > .main > .main-item.settings .container .settings-panel .settings-item .radio-buttons {
          margin-top: .3rem; }
      body > .container > .main > .main-item.settings .container .settings-panel.classreg-settings .classreg-visibility .content {
        font-size: .8rem; }
      body > .container > .main > .main-item.settings .container .settings-panel.classreg-settings .item-visibility .visibility {
        display: flex;
        margin-top: .7rem; }
      body > .container > .main > .main-item.settings .container .settings-panel .cal-day-preview {
        margin-bottom: 1rem; }
        body > .container > .main > .main-item.settings .container .settings-panel .cal-day-preview .calendar-day {
          position: relative; }
          body > .container > .main > .main-item.settings .container .settings-panel .cal-day-preview .calendar-day .dimensions {
            position: absolute;
            right: 0;
            bottom: 0; }
      body > .container > .main > .main-item.settings .container .settings-panel .title {
        padding: 0 .3rem;
        font-weight: bold;
        background-color: #3A78FF; }
      body > .container > .main > .main-item.settings .container .settings-panel .form-teacher-classes {
        margin-top: 1rem; }
        body > .container > .main > .main-item.settings .container .settings-panel .form-teacher-classes .class .actions {
          padding: .3rem 0;
          display: flex;
          flex-direction: column; }
        body > .container > .main > .main-item.settings .container .settings-panel .form-teacher-classes .flat-button {
          display: block;
          max-width: 20rem;
          margin-top: .5rem;
          font-weight: bold; }

.main-item.calendar .statusbar .menu {
  display: grid;
  grid-template-columns: auto auto auto;
  place-items: stretch stretch;
  background-color: #3A78FF; }
  .main-item.calendar .statusbar .menu .select-year {
    text-align: center; }
  .main-item.calendar .statusbar .menu .select-year select {
    height: 100%;
    font-size: 1.2rem;
    font-weight: bold; }
  .main-item.calendar .statusbar .menu .left {
    align-self: center; }
  .main-item.calendar .statusbar .menu .right {
    display: flex;
    flex-direction: row-reverse;
    align-items: center; }
  .main-item.calendar .statusbar .menu .open-filters {
    margin: .2rem;
    transition: .4s; }
    .main-item.calendar .statusbar .menu .open-filters.opened {
      transform: rotate(180deg); }

.main-item.calendar .statusbar .filters {
  overflow-y: scroll;
  display: flex;
  background-color: #82aaff;
  padding: 0 .2rem;
  justify-content: space-between; }
  .main-item.calendar .statusbar .filters .class-selector {
    margin-right: 1rem; }
  .main-item.calendar .statusbar .filters .app-type-selector {
    margin-bottom: 1rem; }
  .main-item.calendar .statusbar .filters .only-my {
    border-left: .6rem solid transparent;
    border-radius: 3px;
    margin: .1rem 0; }
    .main-item.calendar .statusbar .filters .only-my.selected {
      border-left: .6rem solid red; }
    .main-item.calendar .statusbar .filters .only-my .title {
      background-color: #8db1ff;
      padding: .2rem;
      white-space: nowrap; }

.main-item.calendar .section {
  border-top: 2px solid black; }

.modal-window.show-appointment .classes {
  color: #dc0000;
  padding-right: .3rem; }

.main-item.calendar .appointment, .cal-day-preview .appointment {
  font-weight: bold;
  padding: .1rem .3rem;
  cursor: pointer; }

.main-item.calendar .appointment .classes, .cal-day-preview .appointment .classes {
  color: #dc0000;
  padding-right: .3rem; }

.main-item.subst .statusbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: .3em; }

.main-item.subst .ticker {
  background-color: #fff87f;
  padding: .2rem; }

.main-item.subst table.subst {
  border-collapse: collapse; }
  .main-item.subst table.subst th,
  .main-item.subst table.subst td {
    padding: 0 .2em; }
  .main-item.subst table.subst th {
    font-size: .8em;
    position: sticky;
    top: 0;
    background-color: #3A78FF; }
    .main-item.subst table.subst th.sort-desc:before {
      content: '↑'; }
    .main-item.subst table.subst th.sort-asc:before {
      content: '↓'; }
  .main-item.subst table.subst tr.even {
    background-color: #f2f2f2; }
  .main-item.subst table.subst tr.new-day {
    font-weight: bold; }
    .main-item.subst table.subst tr.new-day td {
      background-color: #82aaff;
      color: #000; }
  .main-item.subst table.subst .new-teachers,
  .main-item.subst table.subst .new-subjects,
  .main-item.subst table.subst .new-rooms,
  .main-item.subst table.subst .new-hours {
    color: #f00; }
  .main-item.subst table.subst .absent-teachers,
  .main-item.subst table.subst .absent-subjects,
  .main-item.subst table.subst .absent-rooms,
  .main-item.subst table.subst .absent-hours {
    color: #575577;
    text-decoration: line-through; }
  .main-item.subst table.subst .info {
    font-size: 0.9rem; }
  .main-item.subst table.subst tr.cancelled td.hour,
  .main-item.subst table.subst tr.cancelled td.class,
  .main-item.subst table.subst tr.cancelled td.subject,
  .main-item.subst table.subst tr.cancelled td.teacher,
  .main-item.subst table.subst tr.cancelled td.room {
    text-decoration: line-through; }

.main-item.subst .class-notes {
  background-color: #82aaff; }
  .main-item.subst .class-notes .class-note-item {
    padding: .3rem;
    border-bottom: 1px solid black; }
    .main-item.subst .class-notes .class-note-item .content .classes {
      color: #dc0000;
      margin-right: .5rem; }
    .main-item.subst .class-notes .class-note-item .content .creator {
      color: #3A78FF;
      margin: 0 .5rem; }
    .main-item.subst .class-notes .class-note-item .content .date {
      margin-right: .5rem;
      color: blue; }

.accordion {
  height: unset;
  cursor: pointer;
  padding: .7em;
  width: 100%;
  border-top: 2px solid black;
  text-align: left;
  outline: none; }

.accordion:first-child {
  border-top: unset; }

.accordion-panel {
  max-height: 0;
  overflow: hidden; }

.dataView-item {
  padding: .4em 0; }

.dataView-label {
  padding-right: 1em;
  font-weight: bold; }

.toggle-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out; }

body::-webkit-scrollbar {
  display: none; }

.main-item.calendar .statusbar {
  padding: .3rem; }

.calendar-wrapper {
  display: inline-block; }
  .calendar-wrapper .month-title {
    background-color: #33edff;
    padding: .2em 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 2; }
    .calendar-wrapper .month-title.left {
      text-align: left; }

.calendar-grid {
  display: grid;
  justify-content: start; }

.calendar-grid .weekday-title {
  place-self: stretch center;
  background-color: #fff;
  padding: .4em;
  font-weight: bold; }

.day-label {
  justify-self: stretch;
  text-align: center;
  display: inline-block;
  padding: .2em;
  font-size: .8rem;
  font-weight: bold; }

.calendar-day {
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 0 -1px -1px 0; }
  .calendar-day.current {
    background-color: #fcc; }
  .calendar-day.day-5, .calendar-day.day-6 {
    background-color: #dfd; }

.appointment {
  z-index: 1;
  border-radius: 5px;
  margin: 0 1px 1px 1px;
  align-self: start;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: .2em .2em; }

table.dv-table {
  font-family: sans-serif;
  border-spacing: 0; }
  table.dv-table th {
    padding: 2px 5px;
    position: relative;
    border-bottom: 2px solid #ddd;
    cursor: pointer;
    position: sticky;
    top: 0;
    background-color: #82aaff; }
    table.dv-table th .sort {
      vertical-align: middle;
      overflow: auto;
      font-size: 0.7em;
      display: inline; }
    table.dv-table th .sort-order {
      position: relative;
      float: left;
      margin-top: 0.1em;
      margin-right: -0.2em; }
  table.dv-table td {
    border-bottom: 1px solid #ddd;
    margin: 1px;
    padding: 1px 4px; }
    table.dv-table td.dv-action {
      cursor: pointer; }
  table.dv-table tr.dv-selectable {
    cursor: pointer; }
  table.dv-table tr.dv-selected,
  table.dv-table tr.dataview-expanded {
    background-color: #FFF6D6; }
  table.dv-table tr.footer {
    padding: 2px 5px; }
    table.dv-table tr.footer td {
      border-top: 2px solid #ddd;
      background-color: #fff; }

.class-selector .button {
  padding: .1rem .3rem;
  border: 0;
  margin: 1px;
  text-align: center;
  background-color: #3A78FF;
  border-radius: .5em; }

.class-selector .buttons {
  display: flex;
  border-bottom: 1px solid black;
  justify-content: center; }
  .class-selector .buttons .button {
    margin-right: .2rem;
    border: 0; }

.class-selector .toggle-button.selected {
  background-color: #ffda00;
  border-radius: .5em; }

.class-selector .classes {
  display: grid;
  grid-auto-columns: 2.5em;
  grid-auto-rows: 0fr;
  align-items: stretch;
  justify-items: stretch;
  justify-content: center;
  padding: .3rem 0; }

.app-type-selector {
  display: flex;
  flex-direction: column; }
  .app-type-selector .app-type {
    border-left: .6rem solid transparent;
    border-radius: 3px;
    margin: .1rem 0; }
    .app-type-selector .app-type .title {
      padding: .2rem;
      white-space: nowrap; }
  .app-type-selector .app-type.selected {
    border-left: .6rem solid yellow; }

.scroller {
  /*
    width: 200px;
    position: relative;
    left: 600px;
    */
  overflow: hidden; }
  .scroller .container {
    --n: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-y: hidden;
    width: 100%;
    /* fallback */
    width: calc(var(--n)*100%);
    height: 100%;
    max-height: 100%;
    transform: translate(calc(var(--tx, 0px) + var(--i, 0)/var(--n)*-100%)); }
    .scroller .container .item {
      width: 100%;
      /* fallback */
      width: calc(100%/var(--n));
      user-select: none;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%; }
    .scroller .container.smooth {
      transition: transform ease-out var(--td); }

.modal-login {
  height: 100%;
  background-color: #3A78FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .modal-login .container {
    min-width: 70%;
    display: flex;
    flex-direction: column;
    margin: 1rem; }
  .modal-login .note {
    margin-top: 1rem;
    color: #444; }
  .modal-login button {
    width: 2rem;
    height: 2rem;
    align-self: flex-end;
    margin-top: .2rem;
    padding: 1.2rem; }
  .modal-login .btn-forgot-password {
    font-size: .8em;
    margin-top: 2rem; }
  .modal-login .btn-ok {
    margin-top: .5rem; }

.modal-debug-log {
  display: flex; }

.modal-course .body {
  padding: .5rem; }
  .modal-course .body .btn {
    display: block;
    max-width: 20rem;
    margin-top: 1rem;
    font-weight: bold; }

.modal-show-day-absences {
  /*
   .bt-2 { border-top-width: .2rem; }
   .bb-2 { border-bottom-width: .2rem; }
   .bl-2 { border-left-width: .2rem; }
   .br-2 { border-right-width: .2rem; }
   */ }
  .modal-show-day-absences table {
    border-collapse: collapse;
    border-spacing: 0;
    border-width: thin 0 0 thin;
    margin: 0 0 1em;
    table-layout: auto; }
  .modal-show-day-absences table, .modal-show-day-absences th, .modal-show-day-absences td {
    border: thin solid cornflowerblue;
    padding: 0.3rem 0.5rem; }
  .modal-show-day-absences td.number {
    text-align: right; }
  .modal-show-day-absences th.sum, .modal-show-day-absences td.sum {
    font-weight: bold; }

.modal-show-absences .body {
  display: flex;
  flex-direction: column;
  overflow: hidden; }
  .modal-show-absences .body .select {
    display: flex;
    flex-direction: column;
    background-color: #82aaff;
    padding: .5rem; }
    .modal-show-absences .body .select .years {
      display: flex; }
      .modal-show-absences .body .select .years .year {
        width: 6rem; }
    .modal-show-absences .body .select .date-range {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap; }
      .modal-show-absences .body .select .date-range .radio-buttons {
        margin-top: .3rem; }
      .modal-show-absences .body .select .date-range .radio-buttons {
        margin-bottom: .3rem; }
      .modal-show-absences .body .select .date-range .range {
        display: flex;
        align-items: baseline; }
        .modal-show-absences .body .select .date-range .range .flat-button {
          margin-left: .3rem; }
        .modal-show-absences .body .select .date-range .range .date {
          margin: 0 0.5rem;
          border-radius: 0.5rem;
          background-color: #ffda00;
          padding: 0.1rem 0.5rem;
          font-weight: bold; }
  .modal-show-absences .body .absences {
    flex-grow: 1;
    overflow: scroll; }
    .modal-show-absences .body .absences table {
      border-collapse: collapse;
      border-spacing: 0;
      border-width: thin 0 0 thin;
      margin: 0 0 1em;
      table-layout: auto; }
    .modal-show-absences .body .absences table, .modal-show-absences .body .absences th, .modal-show-absences .body .absences td {
      border: thin solid cornflowerblue;
      padding: 0.3rem 0.5rem; }
    .modal-show-absences .body .absences td.number {
      text-align: right; }
    .modal-show-absences .body .absences th.sum, .modal-show-absences .body .absences td.sum {
      font-weight: bold; }

.modal-show-absence-details .body .select {
  min-height: 1.5rem;
  background-color: #82aaff;
  padding: .5rem; }

.modal-show-absence-details .body .bt-2 {
  border-top-width: .2rem !important; }

.modal-show-absence-details .body .bb-2 {
  border-bottom-width: .2rem !important; }

.modal-show-absence-details .body .bl-2 {
  border-left-width: .2rem !important; }

.modal-show-absence-details .body .br-2 {
  border-right-width: .2rem !important; }

.modal-show-absence-details .body .color-red {
  color: red !important; }

.modal-show-absence-details .body .color-green {
  color: green !important; }

.modal-show-absence-details .body .fw-bold {
  font-weight: bold !important; }

.modal-show-absence-details .body .ta-left {
  text-align: left !important; }

.modal-show-absence-details .body table {
  border-collapse: collapse;
  border-spacing: 0;
  border-width: thin 0 0 thin;
  margin: 0 0 1em;
  table-layout: auto; }

.modal-show-absence-details .body table, .modal-show-absence-details .body th, .modal-show-absence-details .body td {
  border: thin solid cornflowerblue;
  padding: 0.3rem 0.5rem; }

.modal-show-absence-details .body td.number {
  text-align: right; }

.modal-show-absence-details .body th.sum, .modal-show-absence-details .body td.sum {
  font-weight: bold; }

.modal-edit-class-register .info {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #82aaff; }
  .modal-edit-class-register .info .sync-status {
    display: inline-block;
    font-size: 1.4rem;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    text-align: center; }
    .modal-edit-class-register .info .sync-status .icon {
      line-height: 1.4rem;
      text-align: center;
      display: none; }
    .modal-edit-class-register .info .sync-status.error {
      background-color: red;
      font-weight: bold; }
      .modal-edit-class-register .info .sync-status.error .error {
        display: inline-block; }
    .modal-edit-class-register .info .sync-status.update {
      background-color: orange; }
      .modal-edit-class-register .info .sync-status.update .icon-refresh {
        display: inline-block; }
  .modal-edit-class-register .info .message {
    padding: .5rem; }

.modal-edit-class-register .study-group-type {
  font-size: 1.4rem; }

.modal-edit-class-register .buttons {
  margin-bottom: .2rem; }

.modal-edit-class-register .selected-date {
  background-color: #ffda00;
  border-radius: .3rem;
  padding: .1rem .2rem; }

.modal-edit-class-register .settings-item {
  background-color: #82aaff;
  border-bottom: 1px solid black;
  padding: .5rem; }
  .modal-edit-class-register .settings-item.reg-title .title span:first-of-type, .modal-edit-class-register .settings-item.reg-content .title span:first-of-type, .modal-edit-class-register .settings-item.reg-homework .title span:first-of-type, .modal-edit-class-register .settings-item.reg-notes .title span:first-of-type {
    display: flex; }
  .modal-edit-class-register .settings-item.reg-title .title .visibility, .modal-edit-class-register .settings-item.reg-content .title .visibility, .modal-edit-class-register .settings-item.reg-homework .title .visibility, .modal-edit-class-register .settings-item.reg-notes .title .visibility {
    margin-right: .5rem;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    padding: 0 0.3rem; }
  .modal-edit-class-register .settings-item.reg-title .content, .modal-edit-class-register .settings-item.reg-content .content, .modal-edit-class-register .settings-item.reg-homework .content, .modal-edit-class-register .settings-item.reg-notes .content {
    display: flex; }
    .modal-edit-class-register .settings-item.reg-title .content input[type="text"], .modal-edit-class-register .settings-item.reg-title .content textarea, .modal-edit-class-register .settings-item.reg-content .content input[type="text"], .modal-edit-class-register .settings-item.reg-content .content textarea, .modal-edit-class-register .settings-item.reg-homework .content input[type="text"], .modal-edit-class-register .settings-item.reg-homework .content textarea, .modal-edit-class-register .settings-item.reg-notes .content input[type="text"], .modal-edit-class-register .settings-item.reg-notes .content textarea {
      font-family: Verdana, sans-serif;
      font-size: 1.3rem;
      background-color: #82aaff; }
  .modal-edit-class-register .settings-item .title {
    background-color: #82aaff; }
  .modal-edit-class-register .settings-item .content {
    display: flex;
    flex-direction: column; }
    .modal-edit-class-register .settings-item .content .date {
      text-align: center;
      font-size: 1.4rem; }
    .modal-edit-class-register .settings-item .content .study-group-type {
      padding: .5rem;
      display: flex;
      justify-content: center; }
  .modal-edit-class-register .settings-item.reg-permission .content {
    font-size: .8rem;
    padding: .5rem;
    display: flex;
    align-items: center; }
    .modal-edit-class-register .settings-item.reg-permission .content .radio-buttons:first-of-type {
      margin-bottom: .3rem; }
  .modal-edit-class-register .settings-item.reg-absent-homework .content, .modal-edit-class-register .settings-item.reg-absent-material .content {
    flex-direction: row; }
    .modal-edit-class-register .settings-item.reg-absent-homework .content .icon-chart-bar, .modal-edit-class-register .settings-item.reg-absent-material .content .icon-chart-bar {
      font-size: 1.5rem; }
    .modal-edit-class-register .settings-item.reg-absent-homework .content .absent-homework, .modal-edit-class-register .settings-item.reg-absent-homework .content .absent-material, .modal-edit-class-register .settings-item.reg-absent-material .content .absent-homework, .modal-edit-class-register .settings-item.reg-absent-material .content .absent-material {
      flex-grow: 1;
      margin-left: .5rem; }
  .modal-edit-class-register .settings-item.reg-free-edit .content {
    padding: .5rem;
    display: flex;
    align-items: center; }
  .modal-edit-class-register .settings-item .validation-error-message {
    color: red; }
  .modal-edit-class-register .settings-item .validation-error {
    border: .2rem solid red; }

.modal-edit-class-register .reg-attachment {
  padding-bottom: 4rem; }

.overlay.modal-window.modal-menu {
  transition: unset !important; }
  .overlay.modal-window.modal-menu .menu {
    position: absolute;
    background-color: #82aaff;
    font-size: 1rem;
    white-space: nowrap;
    border: 2px solid #555;
    border-radius: .5rem;
    transform: scale(0);
    transform-origin: top right;
    transition: all .2s ease-out; }
    .overlay.modal-window.modal-menu .menu.show {
      transform: scale(1); }
    .overlay.modal-window.modal-menu .menu .button {
      border-bottom: 2px solid #555;
      padding: .5rem;
      font-size: 1.1rem;
      font-weight: bold; }
      .overlay.modal-window.modal-menu .menu .button:last-of-type {
        border: 0; }

.mod-attachment .offline-message {
  font-size: .8rem;
  padding: 0.3rem;
  background-color: rgba(255, 255, 0, 0.3);
  border-radius: 0.3rem;
  display: none; }

.mod-attachment .selected-item .name {
  position: relative; }

.mod-attachment .selected-item .progress {
  position: absolute;
  height: .2rem;
  width: 0%;
  bottom: 0;
  background-color: rgba(55, 55, 55, 0.3); }

.modal-help .content .body {
  background-color: #82aaff; }

.modal-help p {
  margin-top: .3rem; }

.modal-help h3 {
  margin: .5rem 0; }

.modal-help ul.no-bullets {
  list-style-type: none;
  padding: 0;
  margin: 0; }

.modal-help ul li {
  margin-top: .3rem; }

html {
  height: 100%;
  font-size: 15px; }

body {
  font-family: Verdana, sans-serif;
  font-family: 'Open Sans';
  height: 100%;
  width: 100%;
  overscroll-behavior: contain; }

p {
  margin: 0; }

.hilight {
  color: #ffb371;
  font-weight: bold; }

.center-h {
  text-align: center; }

.fullscreen {
  margin: 0;
  padding: 0; }

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0; }

.overlay-progress {
  background: rgba(51, 51, 51, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.overlay.modal-window {
  left: -100%;
  overflow: hidden;
  transition: .2s ease-out;
  display: grid; }
  .overlay.modal-window div::-webkit-scrollbar {
    display: none; }

.overlay.dark-transparent {
  background: rgba(51, 51, 51, 0.8);
  color: #eee;
  display: grid;
  align-items: center; }

.overlay.transparent {
  background: transparent;
  display: grid;
  align-items: center;
  justify-content: center; }

.overlay.modal-window.active {
  left: 0; }

.update-message {
  background-color: yellow;
  overflow: hidden; }
  .update-message .container {
    padding: 1rem; }
    .update-message .container div {
      padding: 1em;
      display: flex;
      justify-content: center; }

body > .container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 0fr 1fr;
  height: 100%;
  width: 100%; }
  body > .container .header {
    grid-area: 1 / span 1 / 1 / span 1;
    background-color: #3A78FF; }
    body > .container .header .menubar {
      text-align: center;
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #000;
      z-index: 99;
      font-size: 2rem; }
      body > .container .header .menubar .menu-item {
        padding: 0 0.3rem 0 .3rem;
        cursor: pointer; }
        body > .container .header .menubar .menu-item:last-child {
          margin-left: auto; }
        body > .container .header .menubar .menu-item.selected {
          border-bottom: 4px solid #000; }
  body > .container > .main {
    justify-self: stretch;
    align-self: stretch;
    overflow: hidden; }
    body > .container > .main > .main-item {
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: 0fr 1fr;
      height: 100%;
      width: 100%; }
      body > .container > .main > .main-item .container::-webkit-scrollbar {
        display: none; }
      body > .container > .main > .main-item.hidden {
        display: none;
        height: 0; }
      body > .container > .main > .main-item .statusbar {
        font-size: .9rem;
        background-color: #3A78FF; }
        body > .container > .main > .main-item .statusbar select {
          padding: 0; }
      body > .container > .main > .main-item .main-content {
        overflow: auto; }
        body > .container > .main > .main-item .main-content::-webkit-scrollbar {
          display: auto; }

/*# sourceMappingURL=app.css.map */