:root {
  --dark0: #242728;
  --dark1: #1b1d1d;
  --dark2: #171717;
  --light0: #3c3d3e;
  --light1: #666666;
  --light2: #999999;
  --white: #ffffff;
  --primary: #ffbd38;
  --blue: #3388ff;
  --brown: #c68c53;
  --cyan: #00d6b3;
  --golden: #ffbd38;
  --green:  #66ff66;
  --grey: #aaaaaa;
  --lime: #d2ff4d;
  --magenta: #ff4d7f;
  --orange: #ff811a;
  --pink: #ff4de1;
  --purple: #825cff;
  --red: #ff4d4d;
  --slategrey: #708ca9;
  --white: #ffffff;
}


html[data-theme="blue"] {--primary: var(--blue);}
html[data-theme="brown"] {--primary: var(--brown);}
html[data-theme="cyan"] {--primary: var(--cyan);}
html[data-theme="green"] {--primary: var(--green);}
html[data-theme="grey"] {--primary: var(--grey);}
html[data-theme="golden"] {--primary: var(--golden);}
html[data-theme="light"] {--primary: #000000}
html[data-theme="lime"] {--primary: var(--lime);}
html[data-theme="magenta"] {--primary: var(--magenta);}
html[data-theme="orange"] {--primary: var(--orange);}
html[data-theme="pink"] {--primary: var(--pink);}
html[data-theme="purple"] {--primary: var(--purple);}
html[data-theme="red"] {--primary: var(--red);}
html[data-theme="slategrey"] {--primary: var(--slategrey);}
html[data-theme="white"] {--primary: var(--white);}


html[data-theme="blue"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233388ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="brown"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c68c53' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="cyan"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300d6b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="green"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366ff66' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="grey"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aaaaaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="golden"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffbd38' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="lime"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d2ff4d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="magenta"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff4d7f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="orange"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff811a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="pink"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff4de1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="purple"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23825cff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="red"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff4d4d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="slategrey"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23708ca9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}
html[data-theme="white"] #modal-timetable .form-select {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");}


html[data-theme="blue"] #bookmark-dropdown object {filter: invert(41%) sepia(67%) saturate(1618%) hue-rotate(199deg) brightness(100%) contrast(102%) saturate(0%) invert(50%);}
html[data-theme="brown"] #bookmark-dropdown object {filter: invert(55%) sepia(99%) saturate(252%) hue-rotate(349deg) brightness(90%) contrast(85%) saturate(0%) invert(50%);}
html[data-theme="cyan"] #bookmark-dropdown object {filter: invert(56%) sepia(83%) saturate(1249%) hue-rotate(126deg) brightness(99%) contrast(104%) saturate(0%) invert(50%);}
html[data-theme="green"] #bookmark-dropdown object {filter: invert(86%) sepia(86%) saturate(472%) hue-rotate(49deg) brightness(103%) contrast(102%) saturate(0%) invert(50%);}
html[data-theme="grey"] #bookmark-dropdown object {filter: invert(68%) sepia(11%) saturate(0%) hue-rotate(284deg) brightness(97%) contrast(93%) saturate(0%) invert(50%);}
html[data-theme="golden"] #bookmark-dropdown object {filter: invert(78%) sepia(76%) saturate(627%) hue-rotate(327deg) brightness(102%) contrast(102%) saturate(0%) invert(50%);}
html[data-theme="lime"] #bookmark-dropdown object {filter: invert(75%) sepia(85%) saturate(317%) hue-rotate(25deg) brightness(103%) contrast(114%) saturate(0%) invert(50%);}
html[data-theme="magenta"] #bookmark-dropdown object {filter: invert(45%) sepia(64%) saturate(2423%) hue-rotate(315deg) brightness(101%) contrast(106%) saturate(0%) invert(50%);}
html[data-theme="orange"] #bookmark-dropdown object {filter: invert(47%) sepia(93%) saturate(783%) hue-rotate(348deg) brightness(106%) contrast(101%) saturate(0%) invert(50%);}
html[data-theme="pink"] #bookmark-dropdown object {filter: invert(45%) sepia(85%) saturate(2093%) hue-rotate(283deg) brightness(100%) contrast(103%) saturate(0%) invert(50%);}
html[data-theme="purple"] #bookmark-dropdown object {filter: invert(37%) sepia(61%) saturate(1284%) hue-rotate(225deg) brightness(101%) contrast(108%) saturate(0%) invert(50%);}
html[data-theme="red"] #bookmark-dropdown object {filter: invert(47%) sepia(82%) saturate(4015%) hue-rotate(333deg) brightness(107%) contrast(103%) saturate(0%) invert(50%);}
html[data-theme="slategrey"] #bookmark-dropdown object {filter: invert(60%) sepia(30%) saturate(399%) hue-rotate(170deg) brightness(85%) contrast(83%) saturate(0%) invert(50%);}
html[data-theme="white"] #bookmark-dropdown object {filter: invert(100%) saturate(0%) invert(50%);}


html[data-theme="blue"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="blue"] #loader-content img {filter: invert(41%) sepia(67%) saturate(1618%) hue-rotate(199deg) brightness(100%) contrast(102%);}
html[data-theme="brown"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="brown"] #loader-content img {filter: invert(55%) sepia(99%) saturate(252%) hue-rotate(349deg) brightness(90%) contrast(85%);}
html[data-theme="cyan"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="cyan"] #loader-content img {filter: invert(56%) sepia(83%) saturate(1249%) hue-rotate(126deg) brightness(99%) contrast(104%);}
html[data-theme="green"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="green"] #loader-content img {filter: invert(86%) sepia(86%) saturate(472%) hue-rotate(49deg) brightness(103%) contrast(102%);;}
html[data-theme="grey"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="grey"] #loader-content img {filter: invert(68%) sepia(11%) saturate(0%) hue-rotate(284deg) brightness(97%) contrast(93%);}
html[data-theme="golden"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="golden"] #loader-content img {filter: invert(78%) sepia(76%) saturate(627%) hue-rotate(327deg) brightness(102%) contrast(102%);}
html[data-theme="lime"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="lime"] #loader-content img {filter: invert(95%) sepia(76%) saturate(666%) hue-rotate(22deg) brightness(106%) contrast(94%);}
html[data-theme="magenta"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="magenta"] #loader-content img {filter: invert(45%) sepia(64%) saturate(2423%) hue-rotate(315deg) brightness(101%) contrast(106%);}
html[data-theme="orange"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="orange"] #loader-content img {filter: invert(47%) sepia(93%) saturate(783%) hue-rotate(348deg) brightness(106%) contrast(101%);}
html[data-theme="pink"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="pink"] #loader-content img {filter: invert(45%) sepia(85%) saturate(2093%) hue-rotate(283deg) brightness(100%) contrast(103%);}
html[data-theme="purple"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="purple"] #loader-content img {filter: invert(37%) sepia(61%) saturate(1284%) hue-rotate(225deg) brightness(101%) contrast(108%);}
html[data-theme="red"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="red"] #loader-content img {filter: invert(47%) sepia(82%) saturate(4015%) hue-rotate(333deg) brightness(107%) contrast(103%);}
html[data-theme="slategrey"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="slategrey"] #loader-content img {filter: invert(60%) sepia(30%) saturate(399%) hue-rotate(170deg) brightness(85%) contrast(83%);}
html[data-theme="white"] #bookmark-dropdown .dropdown-item:hover object, html[data-theme="white"] #loader-content img {filter: invert(100%);}


html[data-theme="blue"] .btn-close {filter: invert(41%) sepia(67%) saturate(1618%) hue-rotate(199deg) brightness(100%) contrast(102%) saturate(0) brightness(75%);}
html[data-theme="brown"] .btn-close {filter: invert(55%) sepia(99%) saturate(252%) hue-rotate(349deg) brightness(90%) contrast(85%) saturate(0) brightness(75%);}
html[data-theme="cyan"] .btn-close {filter: invert(56%) sepia(83%) saturate(1249%) hue-rotate(126deg) brightness(99%) contrast(104%) saturate(0) brightness(75%);}
html[data-theme="green"] .btn-close {filter: invert(86%) sepia(86%) saturate(472%) hue-rotate(49deg) brightness(103%) contrast(102%) saturate(0) brightness(75%);}
html[data-theme="grey"] .btn-close {filter: invert(68%) sepia(11%) saturate(0%) hue-rotate(284deg) brightness(97%) contrast(93%) saturate(0) brightness(75%);}
html[data-theme="golden"] .btn-close {filter: invert(78%) sepia(76%) saturate(627%) hue-rotate(327deg) brightness(102%) contrast(102%) saturate(0) brightness(75%);}
html[data-theme="lime"] .btn-close {filter: invert(95%) sepia(76%) saturate(666%) hue-rotate(22deg) brightness(106%) contrast(94%) saturate(0) brightness(75%);}
html[data-theme="magenta"] .btn-close {filter: invert(45%) sepia(64%) saturate(2423%) hue-rotate(315deg) brightness(101%) contrast(106%) saturate(0) brightness(75%);}
html[data-theme="orange"] .btn-close {filter: invert(47%) sepia(93%) saturate(783%) hue-rotate(348deg) brightness(106%) contrast(101%) saturate(0) brightness(75%);}
html[data-theme="pink"] .btn-close {filter: invert(45%) sepia(85%) saturate(2093%) hue-rotate(283deg) brightness(100%) contrast(103%) saturate(0) brightness(75%);}
html[data-theme="purple"] .btn-close {filter: invert(37%) sepia(61%) saturate(1284%) hue-rotate(225deg) brightness(101%) contrast(108%) saturate(0) brightness(75%);}
html[data-theme="red"] .btn-close {filter: invert(47%) sepia(82%) saturate(4015%) hue-rotate(333deg) brightness(107%) contrast(103%) saturate(0) brightness(75%);}
html[data-theme="slategrey"] .btn-close {filter: invert(60%) sepia(30%) saturate(399%) hue-rotate(170deg) brightness(85%) contrast(83%) saturate(0) brightness(75%);}
html[data-theme="white"] .btn-close {filter: invert(100%);}


html[data-theme="blue"] .btn-close:hover {filter: invert(41%) sepia(67%) saturate(1618%) hue-rotate(199deg) brightness(100%) contrast(102%);}
html[data-theme="brown"] .btn-close:hover {filter: invert(55%) sepia(99%) saturate(252%) hue-rotate(349deg) brightness(90%) contrast(85%);}
html[data-theme="cyan"] .btn-close:hover {filter: invert(56%) sepia(83%) saturate(1249%) hue-rotate(126deg) brightness(99%) contrast(104%);}
html[data-theme="green"] .btn-close:hover {filter: invert(86%) sepia(86%) saturate(472%) hue-rotate(49deg) brightness(103%) contrast(102%);}
html[data-theme="grey"] .btn-close:hover {filter: invert(68%) sepia(11%) saturate(0%) hue-rotate(284deg) brightness(97%) contrast(93%);}
html[data-theme="golden"] .btn-close:hover {filter: invert(78%) sepia(76%) saturate(627%) hue-rotate(327deg) brightness(102%) contrast(102%);}
html[data-theme="lime"] .btn-close:hover {filter: invert(95%) sepia(76%) saturate(666%) hue-rotate(22deg) brightness(106%) contrast(94%);}
html[data-theme="magenta"] .btn-close:hover {filter: invert(45%) sepia(64%) saturate(2423%) hue-rotate(315deg) brightness(101%) contrast(106%);}
html[data-theme="orange"] .btn-close:hover {filter: invert(47%) sepia(93%) saturate(783%) hue-rotate(348deg) brightness(106%) contrast(101%);}
html[data-theme="pink"] .btn-close:hover {filter: invert(45%) sepia(85%) saturate(2093%) hue-rotate(283deg) brightness(100%) contrast(103%);}
html[data-theme="purple"] .btn-close:hover {filter: invert(37%) sepia(61%) saturate(1284%) hue-rotate(225deg) brightness(101%) contrast(108%);}
html[data-theme="red"] .btn-close:hover {filter: invert(47%) sepia(82%) saturate(4015%) hue-rotate(333deg) brightness(107%) contrast(103%);}
html[data-theme="slategrey"] .btn-close:hover {filter: invert(60%) sepia(30%) saturate(399%) hue-rotate(170deg) brightness(85%) contrast(83%);}
html[data-theme="white"] .btn-close:hover {filter: invert(100%);}


#theme-changer .theme-change[data-theme-change="blue"] i {color: var(--blue);}
#theme-changer .theme-change[data-theme-change="blue"]:hover {color: var(--blue);border-color: var(--blue);}
#theme-changer .theme-change[data-theme-change="brown"] i {color: var(--brown);}
#theme-changer .theme-change[data-theme-change="brown"]:hover {color: var(--brown);border-color: var(--brown);}
#theme-changer .theme-change[data-theme-change="cyan"] i {color: var(--cyan);}
#theme-changer .theme-change[data-theme-change="cyan"]:hover {color: var(--cyan);border-color: var(--cyan);}
#theme-changer .theme-change[data-theme-change="golden"] i {color: var(--golden);}
#theme-changer .theme-change[data-theme-change="golden"]:hover {color: var(--golden);border-color: var(--golden);}
#theme-changer .theme-change[data-theme-change="green"] i {color: var(--green);}
#theme-changer .theme-change[data-theme-change="green"]:hover {color: var(--green);border-color: var(--green);}
#theme-changer .theme-change[data-theme-change="grey"] i {color: var(--grey);}
#theme-changer .theme-change[data-theme-change="grey"]:hover {color: var(--grey);border-color: var(--grey);}
#theme-changer .theme-change[data-theme-change="light"] i {color: var(--white);}
#theme-changer .theme-change[data-theme-change="light"]:hover {color: var(--white);border-color: var(--white);}
#theme-changer .theme-change[data-theme-change="lime"] i {color: var(--lime);}
#theme-changer .theme-change[data-theme-change="lime"]:hover {color: var(--lime);border-color: var(--lime);}
#theme-changer .theme-change[data-theme-change="magenta"] i {color: var(--magenta);}
#theme-changer .theme-change[data-theme-change="magenta"]:hover {color: var(--magenta);border-color: var(--magenta);}
#theme-changer .theme-change[data-theme-change="orange"] i {color: var(--orange);}
#theme-changer .theme-change[data-theme-change="orange"]:hover {color: var(--orange);border-color: var(--orange);}
#theme-changer .theme-change[data-theme-change="pink"] i {color: var(--pink);}
#theme-changer .theme-change[data-theme-change="pink"]:hover {color: var(--pink);border-color: var(--pink);}
#theme-changer .theme-change[data-theme-change="purple"] i {color: var(--purple);}
#theme-changer .theme-change[data-theme-change="purple"]:hover {color: var(--purple);border-color: var(--purple);}
#theme-changer .theme-change[data-theme-change="red"] i {color: var(--red);}
#theme-changer .theme-change[data-theme-change="red"]:hover {color: var(--red);border-color: var(--red);}
#theme-changer .theme-change[data-theme-change="slategrey"] i {color: var(--slategrey);}
#theme-changer .theme-change[data-theme-change="slategrey"]:hover {color: var(--slategrey);border-color: var(--slategrey);}
#theme-changer .theme-change[data-theme-change="white"] i {color: var(--white);}
#theme-changer .theme-change[data-theme-change="white"]:hover {color: var(--white);border-color: var(--white);}


::-webkit-scrollbar {
  height: 15px;
  width: 15px;
}


::-webkit-scrollbar-thumb {
  background-color: var(--light0);
  border: 4px solid var(--dark1);
  border-radius: 15px;
}


::-webkit-scrollbar-thumb:hover {
  background-color: var(--light1);
}


::-webkit-scrollbar-thumb:active {
  background-color: var(--primary);
}


::-webkit-scrollbar-track {
  background-color: transparent;
}


::-webkit-scrollbar-corner {
  background-color: transparent;
}


@keyframes modal-show {
  0% {transform: scale(0.95);}
  100% {transform: scale(1);}
}


@keyframes shake {
  0% {transform: translateX(0);}
  25% {transform: translateX(5px);}
  75% {transform: translateX(-5px);}
  100% {transform: translateX(0);}
}


@media (min-width: 992px) {
  #navbar {
    background-color: transparent !important;
  }
  #navbar .navbar-brand {
    display: none;
  }
  #navbar .nav-item:after {
    border-bottom: solid 2px transparent;
    content: "";
    display: block;
    transform: scaleX(0);
    transition: border-color 400ms, transform 400ms;
  }
  #navbar .nav-item:hover:after {
    border-color: var(--primary);
    transform: scaleX(1);
  }
}


@media (max-width: 991px) {
  #navbar {
    background-color: var(--dark2) !important;
  }
  #navbar .nav-item {
    border-left: solid 2px transparent;
    padding-left: 20px;
    margin-left: -12px;
    transition: border-color 400ms, padding-left 400ms;
  }
  #navbar .nav-item:hover {
    border-color: var(--primary);
    padding-left: 30px;
  }
  .dropdown-item.disabled {
    white-space: initial;
  }
}


@media (max-width: 575px) {
  .modal-dialog {
    height: 100% !important;
  }
  .timer-title {
    margin-bottom: 10px;
    text-align: center;
  }
  .timer-title h1 {
    text-align: center;
  }
}


@media (hover: none) {
  #title span {
    font-size: 60px !important;
  }
}


html, body {
  background-color: var(--dark1);
  color: var(--white);
  font-family: "Barlow Semi Condensed", sans-serif;
  height: 100%;
  line-height: 1.2;
}


body#body-404 {
  background-image: url(404.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25%;
  overflow: hidden;
}


body#body-index {
  overflow: hidden;
}


a {
  color: #6fa9ff;
  text-decoration: none;
  transition: color 400ms;
}


a:hover {
  color: #bfd9ff;
}


#bookmark-dropdown object {
  filter: invert(0.5);
  height: 20px;
  margin-right: 5px;
  pointer-events: none;
  position: relative;
  top: 4px;
  transition: filter 400ms;
}


#changelog {
  position: relative;
}


#changelog-badge {
  background-color: var(--dark1);
  box-shadow: none;
  color: var(--primary);
  font-size: 25px;
  right: 10px;
  position: absolute;
  top: 10px;
}


#copy-message {
  background-color: var(--light0);
  bottom: 40px;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  color: var(--primary);
  cursor: default;
  font-size: 20px;
  left: calc(50% - 118px);
  padding: 20px;
  position: absolute;
  transition: bottom 400ms;
  z-index: 10000;
}


#copy-text {
  border: 0;
  height: 0;
  opacity: 0;
  padding: 1px;
}


#explorer-iframe {
  filter: saturate(0) invert(0.92) brightness(1.3);
  height: calc(100% / 1.3);
  opacity: 0;
  transform: scale(1.3);
  transform-origin: 0 0;
  transition: opacity 400ms;
  width: calc(100% / 1.3);
}


#guides-iframe {
  height: 100%;
  transition: opacity 400ms;
}


#iframe-gdrive {
  filter: saturate(0) invert(0.92) brightness(1.3);
  opacity: 0;
  transform: scale(1.3);
  transform-origin: 0 0;
  transition: opacity 400ms;
}


#modal-guides .modal-body {
  overflow: hidden;
}


#iframe-wrap {
  background-image: url(loader.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10%;
  margin-bottom: 20px;
  width: 100%;
}


#loader-overlay {
  background-color: var(--dark1);
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1000000;
}


#loader-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}


#loader-content img {
  display: block;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
}


#loader-motd {
  display: block;
  font-family: "Maven Pro", sans-serif;
  font-size: 20px;
  text-align: center;
}


#loader-motd b {
  color: var(--primary);
}


#loader-motdlight {
  color: var(--red);
  display: none;
  font-family: "Maven Pro", sans-serif;
  text-align: center;
}


#modal-explorer .modal-body {
  background-image: url(puffloader.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20%;
}


#modal-guides .modal-body {
  background-image: url(puffloader.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20%;
}


#modal-timetable .form-select {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffbd38' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  border-color: var(--primary);
  border-radius: 0;
  border-width: 0 0 1px 0;
  color: var(--primary);
  cursor: pointer;
  margin: 0 0 20px 8px;
  padding: 10px;
  width: calc(100% - 16px);
}


#modal-timetable .form-select:focus {
  border-color: var(--primary);
  box-shadow: none;
}


#modal-timetable .form-select option {
  background-color: var(--dark0);
  color: var(--white);
  transition: background-color 200ms;
}


#navbar {
  font-family: "Maven Pro", sans-serif;
}


#navbar.navbar-dark .navbar-nav .nav-item:hover .nav-link {
  color: var(--primary);
}

#navbar.navbar-dark .navbar-nav .nav-link {
  color: var(--light1);
  font-size: 20px;
  transition: color 400ms;
}

#navbar.navbar-dark .navbar-nav .nav-link span {
  font-weight: bold;
  position: relative;
  top: -5px;
}


#navbar.navbar-dark .navbar-brand {
  color: #959596;
}


#navbar.navbar-dark .navbar-toggler {
  border: none;
  color: transparent;
}


#navbar a {
  cursor: pointer;
}


#navbar .dropdown-menu {
  background-color: var(--dark2);
  border: none;
  border-radius: 0;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
}


#navbar .dropdown-menu a {
  color: var(--light1);
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 0 2px;
  transition: border-color 400ms, color 400ms;
}


#navbar .dropdown-menu a:hover {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}


#randomiser-form select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  color: var(--white);
  cursor: pointer;
}


#randomiser-form select, #randomiser-form textarea {
  background-color: var(--dark2);
  border: none;
  border-radius: 0;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  transition: transform 200ms;
}


#randomiser-form select:hover, #randomiser-form textarea:hover {
  transform: scale(1.025);
}


#randomiser-form label {
  color: var(--light2);
  font-size: 20px;
  margin: 0 0 10px 0 !important;
}


#randomiser-form textarea {
  height: 300px;
  margin-bottom: 20px;
  resize: none;
}


#randomiser-female {
  color: var(--pink);
}


#randomiser-male {
  color: var(--blue);
}


#table-files {
  padding: 0 12px;
}


#table-files tbody {
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
}


#table-files tbody tr:hover {
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 999;
}


#table-files td, #table-files th {
  color: var(--light2);
  font-size: 20px;
}


#table-files td {
  background-color: var(--dark0);
  cursor: pointer;
  padding: 15px 20px;
  transition: background-color 400ms, color 400ms, transform 400ms;
}


#table-files td:first-child {
  width: 75%;
}


#table-files tr:hover td {
  background-color: var(--primary);
  color: var(--dark1);
  transform: scale(1.02);
}


#theme-changer span {
  position: relative;
  top: -7px;
}


#theme-changer .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}


#timetable-courses-preview {
  background-image: url(puffloader.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20%;
}


#timetable-student-preview {
  background-image: url(puffloader.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20%;
  aspect-ratio: 1338 / 733;
}


#timetable-selector {
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  padding: 0 12px;
}


#timetable-student-preview {
  padding: 8px;
  width: 100%;
}


#title {
  color: var(--light2);
  font-family: "Saira Semi Condensed", sans-serif;
  font-size: 60px;
  margin: 10px 0 20px 0;
  text-align: center;
}


#title span {
  cursor: pointer;
  transition: font-size 200ms;
}


#title span:hover {
  font-size: 75px;
}


#title span b {
  font-weight: 100;
}


.badge {
  background-color: var(--light0);
  border-radius: 0;
  box-shadow: 0 5px 5px 0 rgb(0, 0, 0, 0.1);
  color: var(--light2);
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 3px;
}


.badge.bg-changelog {
  position: relative;
  top: -2px;
}


.badge.bg-female {
  border: 1px solid var(--pink);
  color: var(--pink);

}


.badge.bg-female, .badge.bg-male {
  background-color: transparent !important;
  margin-right: 3px;
}


.badge.bg-male {
  border: 1px solid var(--blue);
  color: var(--blue);
}


.badge.bg-primary {
  background-color: var(--primary) !important;
  color: var(--dark1);
}


.badge.bg-mini {
  font-size: 12px;
}


.bigbtn {
  background-color: var(--dark0);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  height: calc(100% - 8px);
  margin-bottom: 8px;
  padding: 40px 20px;
  transition: background-color 400ms, box-shadow 200ms, opacity 400ms, transform 200ms;
}


.bigbtn:active:hover {
  transform: scale(0.975);
}


.bigbtn:hover {
  background-color: var(--primary);
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.15);
  transform: scale(1.025);
}


.bigbtn:hover .bigbtn-name, .bigbtn-active .bigbtn-name {
  color: var(--dark1);
}


.bigbtn:hover .bigbtn-icon, .bigbtn-active .bigbtn-icon {
  filter: invert(0.145);
}


.bigbtn-active {
  background-color: var(--primary);
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.15);
}


.bigbtn-icon {
  display: block;
  filter: invert(0.35);
  margin: auto;
  max-width: 100px;
  transition: filter 400ms;
  width: 100%;
}


.bigbtn-name {
  color: var(--light2);
  font-size: 18px;
  margin: 15px 0 0 0;
  text-align: center;
  transition: color 400ms;
}


.book {
  cursor: pointer;
  padding: 8px 4px;
}


.book:hover .book-name {
  opacity: 1;
}


.book-cover {
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
  filter: saturate(0) brightness(0.8) contrast(1);
  transition: filter 400ms, transform 400ms;
  width: 100%;
}


.book-cover:active:hover {
  transform: scale(0.975);
}


.book-cover:hover {
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.3);
  filter: none;
  transform: scale(1.05);
}


.btn-close {
  box-shadow: none !important;
  filter: invert(66.25%);
  opacity: 1 !important;
  transition: filter 200ms;
}


.changelog-note {
  padding: 15px;
  transition: background-color 200ms;
}


.changelog-note:hover {
  background-color: var(--dark0);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 999;
}


.changelog-note h6 {
  color: var(--primary);
  font-family: "Mavel Pro", sans-serif;
  font-size: 20px;
  margin-bottom: 2px;
}


.changelog-note ul {
  margin: 0;
  text-align: justify;
}


.contact-card {
  background-color: var(--dark1);
  cursor: pointer;
  padding: 15px;
  position: relative;
  transition: background-color 200ms;
}


.contact-card:hover {
  background-color: var(--dark0);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 999;
}


.contact-card:hover .contact-copy {
  opacity: 1;
}


.contact-card h5 {
  margin-bottom: 5px;
}


.contact-copy {
  color: var(--light1);
  opacity: 0;
  position: absolute;
  right: 10px;
  top: 5px;
  transition: opacity 200ms;
}


.contact-info {
  color: var(--light2);
}


.contact-name {
  color: var(--primary);
}


.container {
  position: relative;
  transform: scale(0.75);
  transition: transform 400ms;
}


.dropdown-divider {
  border-top: 1px solid var(--dark1);
}


.dropdown-item:focus {
  background-color: transparent;
}


.dropdown-toggle::after {
  content: none;
}


.guide {
  background-color: var(--dark0);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  height: 100%;
  padding: 20px 20px;
  transition: background-color 200ms, transform 200ms;
}


.guide:active:hover {
  transform: scale(0.975);
}


.guide:hover {
  background-color: var(--light0);
  transform: scale(1.025);
}


.guide-container {
  margin-bottom: 8px;
}


.guide-subtitle {
  color: var(--light2);
}


.guide-title {
  font-family: "Maven Pro", sans-serif;
  margin-bottom: 2px;
}


.guide-title .material-symbols-outlined {
  position: relative;
  top: 3px;
}


.hidden {
  display: none;
}


.modal.show {
  animation: modal-show 500ms;
  animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
}


.modal-body {
  padding: 30px;
}


.modal-body-styled h2 {
  color: var(--primary);
  font-family: "Maven Pro", sans-serif;
  margin-bottom: 0;
}


.modal-body-styled p:not(:last-child) {
  color: var(--light2);
  font-size: 20px;
  margin-bottom: 25px;
  text-align: justify;
}


.modal-body-styled p:last-child {
  color: var(--light1);
  margin-bottom: 0;
}


.modal-content {
  background-color: var(--dark1);
  border-radius: 0;
}


.modal-content-preview {
  width: 100%;
}


.modal-filled {
  height: calc(100% - 56px);
}


.modal-filled .modal-content {
  height: 100%;
}


.modal-filled .modal-body {
  overflow: auto;
}


.modal-footer {
  border-color: var(--light0);
  padding: 16px;
}


.modal-footer .row {
  width: 100%;
}


.modal-footer-alt {
  padding: 8px;
}


.modal-footer-btn {
  background-color: var(--dark0);
  border: none;
  border-radius: 0;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  color: var(--light2);
  font-size: 18px;
  height: 100%;
  padding: 20px;
  width: 100%;
  transition: background-color 400ms, color 400ms, transform 400ms;
}


.modal-footer-btn:active:hover {
  transform: scale(1);
}


.modal-footer-btn:hover {
  background-color: var(--primary);
  color: var(--dark1);
  transform: scale(1.015);
}


.modal-header {
  border-color: var(--light0);
  color: var(--light2);
}


.page {
  transform: scale(1);
  transition: transform 400ms;
}


.page-back {
  height: auto;
  padding: 10px;
}


.page-back h6 {
  margin: 0;
}


.randomiser-error label:not([for=randomiser-number]) {
  animation: shake 250ms;
  color: var(--red) !important;
}


.randomiser-error textarea {
  animation: shake 250ms;
  border: 1px solid var(--red) !important;
}


.randomiser-error textarea::placeholder {
  color: var(--red);
}


.randomiser-group {
  background-color: transparent;
  cursor: pointer;
  padding: 15px;
  transition: background-color 200ms;
}


.randomiser-group:hover {
  background-color: var(--dark0);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 999;
}


.recommendation-title {
  border-bottom: 1px solid var(--light1);
  font-family: "Maven Pro", sans-serif;
  padding-bottom: 5px;
}


.recommendation-title:not(:first-child) {
  margin-top: 15px;
}


.row {
  --bs-gutter-x: 0.5rem;
}


.section-separator h5 {
  color: var(--white);
  font-family: "Maven Pro", sans-serif;
  margin: 25px 0 5px 0;
}


.section-separator hr {
  color: var(--light1);
  margin: 3px 0 5px 0;
  opacity: 1;
}


.timer {
  background-color: var(--dark1);
  padding: 15px 27px;
  transition: background-color 200ms;
}


.timer:hover {
  background-color: var(--dark0);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 999;
}


.timer-container h1 {
  color: var(--primary);
  margin-bottom: 2px;
}


.timer-countdown h1, .timer-countdown div div {
  text-align: center;
}


.timer-title {
  padding-left: 0;
}


.timetable-active {
  background-color: var(--primary);
  color: var(--dark1);
}


.timetable-item {
  padding: 15px;
  text-align: center;
  transition: background-color 400ms;
}


.timetable-item:not(.timetable-active) {
  background-color: var(--dark0);
  color: var(--light2);
  cursor: pointer;
}


.timetable-item:hover:not(.timetable-active) {
  background-color: var(--light0);
}