html, body, ul, li, header, footer {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

li {
  list-style-type: none;
}

/* Header */
/* Lecture Schedule */
/* Lecture Explorer */
/* Lecture colors */
/* Other */
html {
  font-family: Roboto, tahoma, helvetica;
  font-size: 12px;
}

button {
  border: none;
  background: transparent;
  color: #0097A7;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Roboto, tahoma, helvetica;
  font-size: 12px;
  padding: 8px 8px;
  box-sizing: border-box;
  line-height: 100%;
  min-width: 64px;
  transition: background 0.1s ease, color 0.1s ease;
}

button:hover {
  background: #e6e6e6;
  color: #0097A7;
}

button:active {
  background: #bbb;
  color: #006974;
}

button:disabled {
  color: darkgray;
}

button.emphasis {
  border-radius: 4px;
  border: none;
  color: white;
  background: #0097A7;
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
}

button.emphasis:hover {
  background: #00aec1;
}

button.emphasis:active {
  background: #18c8db;
}

button.emphasis:disabled {
  background: gray;
}

button.header-button {
  color: white;
  transition: color .1s ease;
}

button.header-button:hover {
  color: #0097A7;
  background: transparent;
}

button.header-button:disabled {
  color: white;
  opacity: .6;
}

button.fas, button.fab, button.far {
  font-size: 18px;
  color: white;
  transition: color .1s ease;
  padding: 8px 12px;
  min-width: 0;
}

button.fas:hover, button.fab:hover, button.far:hover {
  color: #0097A7;
  background: transparent;
}

button.fas:active, button.fab:active, button.far:active {
  color: #006974;
}

button.fas:disabled, button.fab:disabled, button.far:disabled {
  color: white;
  opacity: .6;
}

button.small-button, button.close-button {
  min-width: 0;
  padding: 2px;
}

button.close-button {
  font-weight: lighter;
}

button.inline-button {
  padding: 0;
  text-transform: none;
}

a {
  color: #757575;
  text-decoration: underline;
}

a:hover {
  color: #0097A7;
}

a:active {
  color: #006974;
}

.fas.fa-spinner {
  will-change: transform;
  animation: rotate 0.8s linear 0s infinite;
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html, body {
  min-width: 0;
}

body {
  overflow: auto;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

#main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
  max-width: 1080px;
  min-width: 0;
  width: 100%;
  z-index: 0;
}

footer {
  flex: 0 0 auto;
}

.flex-spacer {
  flex: 0 0 16px;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  user-select: none;
  z-index: 1;
}

header #header-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(to top, #cc8000 10px, #FFA000 10px, #FFA000 100%);
  padding-bottom: 10px;
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

header #loading-bar {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 10px;
  background: linear-gradient(to top, #0097A7 50%, #64C6D3 50%, #64C6D3 100%);
  transition: width ease-in-out 0.2s;
  z-index: 2;
}

#logo-wrapper {
  order: 1;
}

#logo,
#icons {
  height: 40px;
}

#logo {
  font-family: tahoma, helvetica;
  font-size: 26px;
  font-weight: bold;
  line-height: 40px;
  letter-spacing: 1px;
  color: white;
  cursor: default;
  flex: 0 0 auto;
}

.beta-tag-wrapper {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.beta-tag-wrapper .beta-tag {
  color: white;
  font-weight: lighter;
  animation: slidefromleft 1s ease 2s backwards;
  display: inline-block;
}

#icons {
  display: inline-block;
  float: right;
  flex: 0 0 auto;
  order: 3;
}

#save-controller {
  display: inline-block;
  flex: 0 0 auto;
  order: 1;
}

#save-controller #user-identifier:disabled {
  display: inline-block;
  color: white;
  font-size: 14px;
  background: transparent;
  border: none;
  text-align: right;
}

@media only screen and (max-width: 720px) {
  #logo-wrapper {
    order: 2;
  }
  #save-controller {
    flex: 0 0 100%;
    text-align: center;
  }
}

footer {
  width: 100%;
  padding: 4px 10%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 24px;
  align-items: flex-end;
  justify-content: space-around;
}

footer #footer-links {
  flex: 1 0 auto;
  margin: 12px 0;
}

footer #github-buttons {
  flex: 0 0 auto;
  text-align: right;
  margin: 8px;
}

footer .fb-page {
  flex: 0 1 380px;
  margin: 8px;
  min-height: 121px;
}

#lecture-schedule {
  display: flex;
  flex-direction: column;
  vertical-align: top;
  min-height: 560px;
  flex: 2 1 430px;
  min-width: 0;
  margin: 16px 0;
}

#time-table {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  padding-bottom: 8px;
  box-sizing: border-box;
}

.column {
  vertical-align: top;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 480px;
  transition: flex ease .2s .2s;
}

.column.time {
  flex: 0 0 auto;
  left: 0;
  width: 22px;
}

.column.time .column-header {
  z-index: 1;
  text-align: right;
}

.print .column.time .column-header {
  visibility: hidden;
}

.column.time .column-header #fit-time-table-button {
  color: #888;
  padding: 0;
  padding-right: 4px;
  min-width: 0;
}

.column.time .column-header #fit-time-table-button:active {
  color: #006974;
}

.column.time .column-header #fit-time-table-button.toggled {
  color: #006974;
}

.column.time .column-header #fit-time-table-button:hover {
  background: transparent;
  color: #0097A7;
}

.column.time .column-header #fit-time-table-button #fit-time-table-button-arrow {
  margin: -3px;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
  transform: translateX(1px);
}

.column.time .column-header #fit-time-table-button #fit-time-table-button-clock {
  transform: scaleX(-1);
}

.column.time .column-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
}

.hour {
  flex: 0 0 0;
  font-size: 13px;
  color: gray;
  text-align: right;
  line-height: 0;
  vertical-align: middle;
  transition: opacity ease .2s;
}

.hour:nth-child(2n) {
  opacity: 0;
}

#time-table.short.fit .hour:nth-child(2n) {
  opacity: 1;
}

.column:not(.time) {
  position: relative;
  flex: 1 0 80px;
}

.column:not(.time) .column-header {
  z-index: -1;
}

.column:not(.time) .column-content-wrapper {
  margin: 0 4px;
}

.column-content-wrapper {
  flex: 1 0 0;
  overflow: visible;
  position: relative;
  min-height: 0;
}

.column-content {
  position: absolute;
  width: 100%;
  top: -31.5789%;
  height: 142.105%;
  will-change: height, top;
  transition: height ease .2s, top ease .2s;
}

.fit .column-content {
  top: var(--col-top);
  height: var(--col-height);
}

.column.hidden {
  flex: 0;
  overflow: hidden;
}

.column.hidden .column-content-wrapper {
  margin: 0;
}

.column-header {
  box-sizing: border-box;
  text-align: center;
  flex: 0 0 24px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  color: #757575;
  background: white;
  font-size: 14px;
  overflow: hidden;
}

.column-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
  z-index: -3;
}

.column-bg svg {
  overflow: visible;
  width: 100%;
  height: 100%;
}

.column-bg svg line {
  stroke: #bbb;
  stroke-width: 1px;
  shape-rendering: crispedges;
  animation: grow ease 1s both;
  transform-origin: center;
}

.column-bg svg line.even {
  stroke-width: 2px;
}

.column-bg svg line.even.noon-center {
  stroke: white;
  stroke-width: 1px;
}

.column-bg svg line.even.noon-outline {
  stroke-width: 5px;
}

.column-bg svg line.odd {
  animation-delay: 0.6s;
}

#lecture-explorer {
  display: flex;
  flex-direction: column;
  position: relative;
  vertical-align: top;
  min-height: 560px;
  flex: 1 1 330px;
  min-width: 0;
  margin: 16px 4px;
}

#search-and-add,
#accordion-window {
  width: 100%;
  position: relative;
}

#search-and-add {
  position: relative;
  flex: 0 0 auto;
  margin-bottom: 4px;
}

#explorer-footer {
  flex: 0 0 auto;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: minmax(auto, 1fr) 2fr;
  margin-top: 10px;
}

#accordion-window {
  flex: 1 0 0;
  border: 1px solid lightgray;
  border-bottom: none;
  min-height: 0;
  height: 100%;
}

#icons .header-button-separator {
  display: inline-block;
  width: 20px;
}

#icons button {
  vertical-align: middle;
  height: 100%;
}

#msg-banner {
  position: absolute;
  margin: 0;
  top: 100%;
  width: 100%;
  background: rgba(0, 151, 167, 0.8);
  z-index: 0;
  backdrop-filter: blur(4px);
  color: white;
  overflow: hidden;
  text-align: center;
  user-select: none;
  transform: translateY(-100%);
  transition: transform ease-in 0.2s;
}

#msg-banner.banner-open {
  transform: translateY(0);
  transition: transform ease-out 0.2s;
}

#msg-banner a {
  color: white;
}

#msg-banner #msg-banner-message {
  padding: 8px 28px;
}

#msg-banner #msg-banner-close {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 24px;
  border: none;
  color: white;
  background: transparent;
  font-size: 12pt;
  align-self: stretch;
}

#msg-banner #msg-banner-close:hover {
  background: rgba(0, 0, 0, 0.15);
}

#msg-banner #msg-banner-close:active {
  background: rgba(0, 0, 0, 0.3);
}

#search-and-add {
  z-index: 1;
}

#search {
  position: relative;
  width: 100%;
  padding: 0 5px;
  font-family: Roboto, tahoma, helvetica;
  font-size: 14px;
  height: 28px;
  border: 1px solid lightgray;
  z-index: 1;
}

#search:focus {
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
}

#search:focus ~ #add-extra-activity {
  opacity: 0.4;
}

#search-result-box {
  position: absolute;
  top: 27px;
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  min-height: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: default;
  background-color: white;
  border-radius: 0 2px 2px 2px;
  visibility: hidden;
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
  border: 1px solid lightgray;
}

#search:focus:valid ~ #search-result-box:not(:empty), #search-result-box:not(:empty):active {
  visibility: visible;
}

.search-result.empty-result, .search-result.loading-result {
  color: gray;
  font-size: larger;
  margin: 20px 8px;
  text-align: center;
}

.search-result.loading-result .search-result-subtitle {
  font-size: small;
  margin: 2px;
}

.search-result.lecture-info {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(159, 159, 159, 0.8);
  display: block;
}

.search-result.lecture-info .lecture-info-description {
  color: #666;
  margin-top: 4px;
}

.search-result-selected {
  background-color: #cacaca;
  color: black;
}

#search-options-summary {
  margin: 2px 0px;
  user-select: none;
  color: #757575;
  cursor: pointer;
  flex: 1 0 0;
}

#search-options-summary .selected-option {
  color: #0097A7;
  font-weight: bold;
}

#search-options-summary:hover {
  color: #333;
}

#search-options-summary:active {
  color: black;
}

#search-summary-wrapper {
  display: flex;
}

#search-options-clear {
  background: white;
  border: none;
  color: gray;
  white-space: nowrap;
  visibility: hidden;
  flex: 0 0 0;
}

#search-options-clear.show-options, #search-options-clear.show-search {
  visibility: visible;
  margin-left: 4px;
  flex: 0 0 auto;
}

#search-options-clear:hover {
  color: #333;
}

#search-options-clear:active {
  color: black;
}

#search-options {
  visibility: hidden;
  padding-top: 4px;
  height: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 4px;
  user-select: none;
}

#search-options.show {
  visibility: visible;
  height: auto;
}

#search-options-clear {
  padding: 0;
}

#search-options label {
  display: block;
  color: #333;
  text-align: center;
}

#search-options input, #search-options select {
  max-width: 100%;
}

#search-options select {
  width: 100%;
}

#campus-select-label {
  grid-row: 2;
  grid-column: 1;
}

#unit-select-label {
  grid-row: 2;
  grid-column: 2;
}

#department-select-label {
  grid-row: 3;
  grid-column: 2;
}

#search-options-timeframes {
  grid-row: 4;
  grid-column: 1/-1;
  margin-top: 8px;
  text-align: center;
}

#search-options-timeframes label {
  display: inline;
}

#search-options-browser-error {
  grid-row: -1;
  grid-column: 1/-1;
  color: #666;
}

#accordion {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  background: white;
}

#accordion:empty {
  display: none;
}

#accordion .lecture-info {
  padding: 4px 0;
  position: relative;
  user-select: none;
  cursor: default;
  transition: background-color ease .1s, opacity ease .1s, color ease .1s;
}

#accordion .lecture-info.slip-reordering {
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
}

#accordion .lecture-info .lecture-info-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  grid-row-gap: 1px;
  padding: 4px 0;
}

#accordion .lecture-info .lecture-info-header * {
  grid-column: 3;
}

#accordion .lecture-info .lecture-info-header .lecture-info-checkbox {
  grid-row: 1/3;
  grid-column: 2;
  width: 22px;
  margin: 0;
}

#accordion .lecture-info .lecture-info-header .lecture-info-delete {
  grid-row: 1/3;
  grid-column: 4;
  width: 24px;
  padding: 4px;
  position: relative;
  opacity: .5;
  font-size: 26px;
  line-height: 16px;
  transition: color ease .1s, opacity ease .1s;
}

#accordion .lecture-info .lecture-info-header .lecture-info-delete > img {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
  width: 20px;
  opacity: 0.3;
}

#accordion .lecture-info .lecture-info-header .lecture-info-handle {
  grid-row: 1/3;
  grid-column: 1;
  opacity: .3;
  margin: 2px;
}

#accordion .lecture-info .lecture-info-header .lecture-info-handle:before {
  line-height: 0;
  vertical-align: middle;
}

#accordion .lecture-info .lecture-info-header .lecture-info-code {
  font-size: 14px;
  text-align: left;
}

#accordion .lecture-info .lecture-info-header .lecture-info-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

#accordion .lecture-info .lecture-info-description {
  padding: 4px 30px;
  display: none;
}

#accordion .lecture-info .lecture-info-description .lecture-info-credits {
  margin-top: 8px;
}

#accordion .lecture-info .lecture-info-description .lecture-info-credits .lecture-info-credits-header {
  display: inline;
  vertical-align: top;
  font-weight: 500;
}

#accordion .lecture-info .lecture-info-description .lecture-info-credits .lecture-info-credits-content {
  display: inline-block;
}

#accordion .lecture-info .lecture-classrooms {
  position: relative;
  display: none;
  overflow: hidden;
  cursor: default;
  padding: 4px 30px;
}

#accordion .lecture-info .lecture-classrooms .classrooms-header {
  padding-bottom: 2px;
  border-bottom: 1px solid;
  font-weight: 500;
}

#accordion .lecture-info .lecture-classrooms .classroom-info {
  padding: 4px 0;
  transition: background-color ease .1s;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-header {
  display: flex;
  align-items: center;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-header .classroom-info-checkbox {
  flex: 0 0 auto;
  width: 30px;
  margin: 0;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-header .classroom-code {
  flex: 0 0 auto;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-header .classroom-teacher {
  flex: 1 0 0;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-header .classroom-vacancies-summary {
  flex: 0 0 auto;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-schedules {
  margin-left: 30px;
  font-weight: lighter;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-obs {
  margin-left: 30px;
  font-weight: lighter;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies {
  display: none;
  margin-top: 8px;
  width: 100%;
  padding-left: 30px;
  border-bottom: 1px solid;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies th {
  font-weight: 500;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies td, #accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies th {
  text-align: center;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies td:first-child, #accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies th:first-child {
  width: 100%;
  text-align: left;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies .classroom-vacancy:not(.classroom-vacancy-group) td {
  padding-top: 4px;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies .classroom-vacancy-group {
  font-weight: lighter;
  border-top: none;
}

#accordion .lecture-info .lecture-classrooms .classroom-info .classroom-info-vacancies .classroom-vacancy-group td:first-child {
  padding-left: 12px;
}

#accordion .lecture-info .lecture-classrooms .classroom-info.classroom-open .classroom-teacher {
  white-space: normal;
}

#accordion .lecture-info .lecture-classrooms .classroom-info.classroom-open .classroom-info-obs {
  white-space: pre-wrap;
}

#accordion .lecture-info .lecture-classrooms .classroom-info.classroom-open .classroom-info-vacancies {
  display: table;
}

#accordion .lecture-info .lecture-classrooms .classroom-info.classroom-active .classroom-info-header {
  font-weight: 500;
}

#accordion .lecture-info .lecture-classrooms .classroom-info.classroom-active .classroom-info-obs {
  font-weight: normal;
}

#accordion .lecture-info .lecture-classrooms .classroom-info.classroom-active .classroom-info-schedules {
  font-weight: normal;
}

#accordion .lecture-info.lecture-open .lecture-info-header .lecture-info-name {
  white-space: normal;
  height: auto;
  line-height: normal;
}

#accordion .lecture-info.lecture-open .lecture-info-description {
  display: block;
}

#accordion .lecture-info.lecture-open .lecture-classrooms {
  display: block;
}

#accordion .lecture-info.color-0 {
  background-color: #adf0b2;
  color: #14711c;
}

#accordion .lecture-info.color-0:hover {
  background-color: #97ed9e;
}

#accordion .lecture-info.color-0:active {
  background-color: #81e98a;
}

#accordion .lecture-info.color-0.lecture-unavailable {
  color: rgba(20, 113, 28, 0.4);
}

#accordion .lecture-info.color-0 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-0 .lecture-info-header .lecture-info-delete:active {
  color: #0c4511;
  opacity: 1;
}

#accordion .lecture-info.color-0 .classroom-highlight {
  background-color: #56e162;
}

#accordion .lecture-info.color-0 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-0 {
  0% {
    background-color: #56e162;
  }
  25% {
    background-color: #56e162;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-0 .classroom-info.classroom-blink {
  animation: classroom-blink-0 1s ease-out;
}

#accordion .lecture-info.color-1 {
  background-color: #a1defc;
  color: #045781;
}

#accordion .lecture-info.color-1:hover {
  background-color: #88d5fb;
}

#accordion .lecture-info.color-1:active {
  background-color: #70ccfb;
}

#accordion .lecture-info.color-1.lecture-unavailable {
  color: rgba(4, 87, 129, 0.4);
}

#accordion .lecture-info.color-1 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-1 .lecture-info-header .lecture-info-delete:active {
  color: #02364f;
  opacity: 1;
}

#accordion .lecture-info.color-1 .classroom-highlight {
  background-color: #3ebbf9;
}

#accordion .lecture-info.color-1 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-1 {
  0% {
    background-color: #3ebbf9;
  }
  25% {
    background-color: #3ebbf9;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-1 .classroom-info.classroom-blink {
  animation: classroom-blink-1 1s ease-out;
}

#accordion .lecture-info.color-2 {
  background-color: #ffc299;
  color: #803300;
}

#accordion .lecture-info.color-2:hover {
  background-color: #ffb380;
}

#accordion .lecture-info.color-2:active {
  background-color: #ffa366;
}

#accordion .lecture-info.color-2.lecture-unavailable {
  color: rgba(128, 51, 0, 0.4);
}

#accordion .lecture-info.color-2 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-2 .lecture-info-header .lecture-info-delete:active {
  color: #4d1f00;
  opacity: 1;
}

#accordion .lecture-info.color-2 .classroom-highlight {
  background-color: #ff8533;
}

#accordion .lecture-info.color-2 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-2 {
  0% {
    background-color: #ff8533;
  }
  25% {
    background-color: #ff8533;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-2 .classroom-info.classroom-blink {
  animation: classroom-blink-2 1s ease-out;
}

#accordion .lecture-info.color-3 {
  background-color: #edc3ee;
  color: #742277;
}

#accordion .lecture-info.color-3:hover {
  background-color: #e7afe9;
}

#accordion .lecture-info.color-3:active {
  background-color: #e19ce3;
}

#accordion .lecture-info.color-3.lecture-unavailable {
  color: rgba(116, 34, 119, 0.4);
}

#accordion .lecture-info.color-3 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-3 .lecture-info-header .lecture-info-delete:active {
  color: #4e1650;
  opacity: 1;
}

#accordion .lecture-info.color-3 .classroom-highlight {
  background-color: #d474d8;
}

#accordion .lecture-info.color-3 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-3 {
  0% {
    background-color: #d474d8;
  }
  25% {
    background-color: #d474d8;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-3 .classroom-info.classroom-blink {
  animation: classroom-blink-3 1s ease-out;
}

#accordion .lecture-info.color-4 {
  background-color: #f3dd95;
  color: #65500b;
}

#accordion .lecture-info.color-4:hover {
  background-color: #f1d67e;
}

#accordion .lecture-info.color-4:active {
  background-color: #eecf68;
}

#accordion .lecture-info.color-4.lecture-unavailable {
  color: rgba(101, 80, 11, 0.4);
}

#accordion .lecture-info.color-4 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-4 .lecture-info-header .lecture-info-delete:active {
  color: #372c06;
  opacity: 1;
}

#accordion .lecture-info.color-4 .classroom-highlight {
  background-color: #e9c03a;
}

#accordion .lecture-info.color-4 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-4 {
  0% {
    background-color: #e9c03a;
  }
  25% {
    background-color: #e9c03a;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-4 .classroom-info.classroom-blink {
  animation: classroom-blink-4 1s ease-out;
}

#accordion .lecture-info.color-5 {
  background-color: #dff5a3;
  color: #58730d;
}

#accordion .lecture-info.color-5:hover {
  background-color: #d7f28c;
}

#accordion .lecture-info.color-5:active {
  background-color: #cff075;
}

#accordion .lecture-info.color-5.lecture-unavailable {
  color: rgba(88, 115, 13, 0.4);
}

#accordion .lecture-info.color-5 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-5 .lecture-info-header .lecture-info-delete:active {
  color: #354508;
  opacity: 1;
}

#accordion .lecture-info.color-5 .classroom-highlight {
  background-color: #bfeb47;
}

#accordion .lecture-info.color-5 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-5 {
  0% {
    background-color: #bfeb47;
  }
  25% {
    background-color: #bfeb47;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-5 .classroom-info.classroom-blink {
  animation: classroom-blink-5 1s ease-out;
}

#accordion .lecture-info.color-6 {
  background-color: #9cf2ec;
  color: #0e6761;
}

#accordion .lecture-info.color-6:hover {
  background-color: #86eee7;
}

#accordion .lecture-info.color-6:active {
  background-color: #6febe3;
}

#accordion .lecture-info.color-6.lecture-unavailable {
  color: rgba(14, 103, 97, 0.4);
}

#accordion .lecture-info.color-6 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-6 .lecture-info-header .lecture-info-delete:active {
  color: #083a37;
  opacity: 1;
}

#accordion .lecture-info.color-6 .classroom-highlight {
  background-color: #43e5da;
}

#accordion .lecture-info.color-6 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-6 {
  0% {
    background-color: #43e5da;
  }
  25% {
    background-color: #43e5da;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-6 .classroom-info.classroom-blink {
  animation: classroom-blink-6 1s ease-out;
}

#accordion .lecture-info.color-7 {
  background-color: #ece7ca;
  color: #756829;
}

#accordion .lecture-info.color-7:hover {
  background-color: #e6deb7;
}

#accordion .lecture-info.color-7:active {
  background-color: #dfd5a4;
}

#accordion .lecture-info.color-7.lecture-unavailable {
  color: rgba(117, 104, 41, 0.4);
}

#accordion .lecture-info.color-7 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-7 .lecture-info-header .lecture-info-delete:active {
  color: #4f471c;
  opacity: 1;
}

#accordion .lecture-info.color-7 .classroom-highlight {
  background-color: #d2c47f;
}

#accordion .lecture-info.color-7 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-7 {
  0% {
    background-color: #d2c47f;
  }
  25% {
    background-color: #d2c47f;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-7 .classroom-info.classroom-blink {
  animation: classroom-blink-7 1s ease-out;
}

#accordion .lecture-info.color-8 {
  background-color: #c0cbed;
  color: #213673;
}

#accordion .lecture-info.color-8:hover {
  background-color: #acbbe7;
}

#accordion .lecture-info.color-8:active {
  background-color: #98aae1;
}

#accordion .lecture-info.color-8.lecture-unavailable {
  color: rgba(33, 54, 115, 0.4);
}

#accordion .lecture-info.color-8 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-8 .lecture-info-header .lecture-info-delete:active {
  color: #16234b;
  opacity: 1;
}

#accordion .lecture-info.color-8 .classroom-highlight {
  background-color: #718ad6;
}

#accordion .lecture-info.color-8 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-8 {
  0% {
    background-color: #718ad6;
  }
  25% {
    background-color: #718ad6;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-8 .classroom-info.classroom-blink {
  animation: classroom-blink-8 1s ease-out;
}

#accordion .lecture-info.color-9 {
  background-color: #f79cc9;
  color: #71093d;
}

#accordion .lecture-info.color-9:hover {
  background-color: #f584bd;
}

#accordion .lecture-info.color-9:active {
  background-color: #f36db0;
}

#accordion .lecture-info.color-9.lecture-unavailable {
  color: rgba(113, 9, 61, 0.4);
}

#accordion .lecture-info.color-9 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-9 .lecture-info-header .lecture-info-delete:active {
  color: #420524;
  opacity: 1;
}

#accordion .lecture-info.color-9 .classroom-highlight {
  background-color: #ef3e96;
}

#accordion .lecture-info.color-9 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-9 {
  0% {
    background-color: #ef3e96;
  }
  25% {
    background-color: #ef3e96;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-9 .classroom-info.classroom-blink {
  animation: classroom-blink-9 1s ease-out;
}

#accordion .lecture-info.color-10 {
  background-color: #afdebf;
  color: #225332;
}

#accordion .lecture-info.color-10:hover {
  background-color: #9dd7b1;
}

#accordion .lecture-info.color-10:active {
  background-color: #8bd0a2;
}

#accordion .lecture-info.color-10.lecture-unavailable {
  color: rgba(34, 83, 50, 0.4);
}

#accordion .lecture-info.color-10 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-10 .lecture-info-header .lecture-info-delete:active {
  color: #132f1d;
  opacity: 1;
}

#accordion .lecture-info.color-10 .classroom-highlight {
  background-color: #67c185;
}

#accordion .lecture-info.color-10 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-10 {
  0% {
    background-color: #67c185;
  }
  25% {
    background-color: #67c185;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-10 .classroom-info.classroom-blink {
  animation: classroom-blink-10 1s ease-out;
}

#accordion .lecture-info.color-11 {
  background-color: #d2bbf7;
  color: #3f1188;
}

#accordion .lecture-info.color-11:hover {
  background-color: #c3a4f4;
}

#accordion .lecture-info.color-11:active {
  background-color: #b48ef1;
}

#accordion .lecture-info.color-11.lecture-unavailable {
  color: rgba(63, 17, 136, 0.4);
}

#accordion .lecture-info.color-11 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-11 .lecture-info-header .lecture-info-delete:active {
  color: #2a0b5b;
  opacity: 1;
}

#accordion .lecture-info.color-11 .classroom-highlight {
  background-color: #9660eb;
}

#accordion .lecture-info.color-11 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-11 {
  0% {
    background-color: #9660eb;
  }
  25% {
    background-color: #9660eb;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-11 .classroom-info.classroom-blink {
  animation: classroom-blink-11 1s ease-out;
}

#accordion .lecture-info.color-12 {
  background-color: #d6c8b8;
  color: #4a3c2b;
}

#accordion .lecture-info.color-12:hover {
  background-color: #cdbca8;
}

#accordion .lecture-info.color-12:active {
  background-color: #c3b097;
}

#accordion .lecture-info.color-12.lecture-unavailable {
  color: rgba(74, 60, 43, 0.4);
}

#accordion .lecture-info.color-12 .lecture-info-header .lecture-info-delete:hover {
  opacity: 1;
}

#accordion .lecture-info.color-12 .lecture-info-header .lecture-info-delete:active {
  color: #2a2218;
  opacity: 1;
}

#accordion .lecture-info.color-12 .classroom-highlight {
  background-color: #b19777;
}

#accordion .lecture-info.color-12 .classroom-highlight.classroom-conflict {
  background-color: #f00;
  color: black;
  opacity: 0.8;
}

@keyframes classroom-blink-12 {
  0% {
    background-color: #b19777;
  }
  25% {
    background-color: #b19777;
  }
  100% {
    background-color: initial;
  }
}

#accordion .lecture-info.color-12 .classroom-info.classroom-blink {
  animation: classroom-blink-12 1s ease-out;
}

.plan-placeholder {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan-placeholder .placeholder-icon {
  color: darkgray;
  text-align: center;
  font-size: 56px;
}

.plan-placeholder .placeholder-title {
  font-size: 16px;
  color: gray;
  text-align: center;
}

.plan-placeholder .placeholder-body {
  text-align: center;
  color: gray;
  margin-top: 32px;
}

#accordion:not(:empty) + .plan-placeholder {
  display: none;
}

#plans-wrapper {
  overflow: hidden;
  position: relative;
}

#plans-wrapper:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: "";
  border-top: 1px solid lightgray;
}

#plans {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  margin-bottom: -40px;
  padding-bottom: 40px;
  position: relative;
}

#new-plan {
  height: 36px;
  line-height: 36px;
  padding: 0 8px;
  display: inline-block;
  overflow: hidden;
  font-size: 16px;
  user-select: none;
  transition: background ease 0.1s;
}

#new-plan:hover {
  background: #eee;
}

#new-plan:active {
  background: #ddd;
}

.plan {
  max-width: 44%;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  position: relative;
  border-right: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  overflow: hidden;
  background: #e3e3e3;
  user-select: none;
  transition: background ease 0.1s;
  vertical-align: top;
}

.plan:first-child {
  border-left: 1px solid lightgray;
}

.plan .plan-tab-name {
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  border: none;
  background: transparent;
  width: 100%;
}

.plan .plan-tab-name:disabled {
  pointer-events: none;
  color: #333;
}

.plan .plan-tab-name:focus {
  padding-right: 32px;
  text-overflow: clip;
}

.plan .plan-tab-close {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 6px;
  z-index: 1;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  font-size: 20px;
  color: gray;
  transition: opacity ease .1s, color ease .1s, background ease .1s;
}

@media (pointer: coarse) {
  .plan .plan-tab-close {
    font-size: 24px;
  }
}

.plan .plan-tab-close:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 32px;
  content: '';
  z-index: -1;
  background: linear-gradient(to left, #f3f3f3, #f3f3f3 60%, transparent);
  pointer-events: none;
}

@media (hover: hover) {
  .plan .plan-tab-close:hover {
    color: #0097A7;
    pointer-events: initial;
  }
}

@media (hover: hover) {
  .plan:hover {
    background-color: #f3f3f3;
  }
  .plan:hover .plan-tab-close {
    opacity: 1;
    pointer-events: initial;
  }
}

.plan:active {
  background-color: white;
}

.plan:active .plan-tab-close:before {
  background: linear-gradient(to left, white, white 60%, transparent);
}

.plan.plan-active {
  z-index: 2;
  background: white;
}

.plan.plan-active:hover {
  background: white;
}

.plan.plan-active:active {
  background: white;
}

.plan.plan-active .plan-tab-close {
  opacity: 1;
  pointer-events: initial;
}

.plan.plan-active .plan-tab-close:before {
  background: linear-gradient(to left, white, white 60%, transparent);
}

.plan-paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 8px;
  text-align: center;
  visibility: hidden;
  border: 1px solid lightgray;
  border-top: none;
  user-select: none;
  background: #e3e3e3;
  height: 36px;
  line-height: 36px;
  overflow: hidden;
}

.plan-paddle:hover {
  background-color: #f3f3f3;
}

.plan-paddle.show {
  visibility: visible;
}

.plan-paddle#plan-paddle-left {
  left: 0;
}

.plan-paddle#plan-paddle-right {
  right: 0;
}

#upload-warning {
  right: 0;
  bottom: 44px;
  display: inline-block;
  position: absolute;
  color: red;
  visibility: hidden;
}

#upload-warning.upload-warning-old-version {
  visibility: visible;
}

#upload-button {
  border: 1px solid lightgray;
  padding: 12px 4px;
  align-items: center;
  display: inline-flex;
  user-select: none;
  cursor: default;
  grid-row: 1;
  grid-column: 2;
}

#upload-button:hover {
  background-color: #e6e6e6;
  color: #006974;
}

#upload-button:active {
  background-color: #bbb;
}

#upload-button > input {
  display: none;
}

#upload-button > div,
#upload-button > img {
  text-align: center;
}

#upload-button > img {
  width: 20px;
  right: 10px;
}

#upload-button > div {
  width: calc(100% - 30px);
  height: 1em;
}

#course-button {
  grid-row: 2;
  grid-column: 2;
  cursor: default;
  user-select: none;
}

#credits {
  display: inline-flex;
  align-items: center;
  grid-row: 1/3;
  grid-column: 1;
}

.credit-wrapper {
  display: flex;
  flex-direction: column;
  color: #444;
  text-align: center;
  width: 60px;
  flex: 1 0 auto;
}

#lecture-credits, #work-credits {
  font-size: x-large;
  margin: 4px 8px;
}

.schedule-box {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transition: background-color .1s ease, border-left-width .1s linear .3s;
  animation: appear .3s ease-out .1s backwards;
  border-left-style: solid;
  border-left-width: 2.3px;
  text-overflow: clip;
  user-select: none;
}

.column.hidden .schedule-box {
  border-left-width: 0px;
  transition-delay: 0s;
}

.schedule-box.schedule-box-highlight {
  z-index: 1;
}

.schedule-box.schedule-box-show {
  display: flex;
}

.schedule-box.schedule-box-show:before {
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.print .schedule-box {
  animation: none;
  transition: none;
}

.ecoprint .schedule-box {
  border: 3.45px solid;
  border-left: 3.45px solid;
}

.ecoprint .schedule-box .timespan {
  margin: -3.45px;
  margin-left: -1.15px;
}

.grayscale .schedule-box {
  border: none;
  font-weight: bold;
}

.schedule-box.color-0 {
  background-color: #adf0b2;
  color: #14711c;
  border-left-color: #1c9c26;
}

.schedule-box.color-0 > .timespan-mini {
  background-color: #adf0b2;
}

.ecoprint .schedule-box.color-0 {
  background-color: white;
  border-color: #adf0b2;
  border-left-color: #1c9c26;
}

.grayscale .schedule-box.color-0 {
  background-color: black;
  color: white;
}

.schedule-box-highlight.color-0 {
  background-color: #56e162;
}

.schedule-box-highlight.color-0 > .timespan-mini {
  background-color: #56e162;
}

.schedule-box.color-1 {
  background-color: #a1defc;
  color: #045781;
  border-left-color: #0679b2;
}

.schedule-box.color-1 > .timespan-mini {
  background-color: #a1defc;
}

.ecoprint .schedule-box.color-1 {
  background-color: white;
  border-color: #a1defc;
  border-left-color: #0679b2;
}

.grayscale .schedule-box.color-1 {
  background-color: #333333;
  color: white;
}

.schedule-box-highlight.color-1 {
  background-color: #3ebbf9;
}

.schedule-box-highlight.color-1 > .timespan-mini {
  background-color: #3ebbf9;
}

.schedule-box.color-2 {
  background-color: #ffc299;
  color: #803300;
  border-left-color: #b34700;
}

.schedule-box.color-2 > .timespan-mini {
  background-color: #ffc299;
}

.ecoprint .schedule-box.color-2 {
  background-color: white;
  border-color: #ffc299;
  border-left-color: #b34700;
}

.grayscale .schedule-box.color-2 {
  background-color: #666666;
  color: white;
}

.schedule-box-highlight.color-2 {
  background-color: #ff8533;
}

.schedule-box-highlight.color-2 > .timespan-mini {
  background-color: #ff8533;
}

.schedule-box.color-3 {
  background-color: #edc3ee;
  color: #742277;
  border-left-color: #9b2d9f;
}

.schedule-box.color-3 > .timespan-mini {
  background-color: #edc3ee;
}

.ecoprint .schedule-box.color-3 {
  background-color: white;
  border-color: #edc3ee;
  border-left-color: #9b2d9f;
}

.grayscale .schedule-box.color-3 {
  background-color: #999999;
  color: black;
}

.schedule-box-highlight.color-3 {
  background-color: #d474d8;
}

.schedule-box-highlight.color-3 > .timespan-mini {
  background-color: #d474d8;
}

.schedule-box.color-4 {
  background-color: #f3dd95;
  color: #65500b;
  border-left-color: #937410;
}

.schedule-box.color-4 > .timespan-mini {
  background-color: #f3dd95;
}

.ecoprint .schedule-box.color-4 {
  background-color: white;
  border-color: #f3dd95;
  border-left-color: #937410;
}

.grayscale .schedule-box.color-4 {
  background-color: #cccccc;
  color: black;
}

.schedule-box-highlight.color-4 {
  background-color: #e9c03a;
}

.schedule-box-highlight.color-4 > .timespan-mini {
  background-color: #e9c03a;
}

.schedule-box.color-5 {
  background-color: #dff5a3;
  color: #58730d;
  border-left-color: #7ba112;
}

.schedule-box.color-5 > .timespan-mini {
  background-color: #dff5a3;
}

.ecoprint .schedule-box.color-5 {
  background-color: white;
  border-color: #dff5a3;
  border-left-color: #7ba112;
}

.grayscale .schedule-box.color-5 {
  color: white;
  background: linear-gradient(-45deg, black 0%, black 14%, black 14%, black 16%, black 16%, black 29%, black 29%, black 31%, black 31%, black 44%, black 44%, black 46%, black 46%, black 59%, black 59%, black 61%, black 61%, black 74%, black 74%, black 76%, black 76%, black 89%, black 89%, black 91%, black 91%, black 104%, black 104%, black 106%, black 106%);
}

.schedule-box-highlight.color-5 {
  background-color: #bfeb47;
}

.schedule-box-highlight.color-5 > .timespan-mini {
  background-color: #bfeb47;
}

.schedule-box.color-6 {
  background-color: #9cf2ec;
  color: #0e6761;
  border-left-color: #14948c;
}

.schedule-box.color-6 > .timespan-mini {
  background-color: #9cf2ec;
}

.ecoprint .schedule-box.color-6 {
  background-color: white;
  border-color: #9cf2ec;
  border-left-color: #14948c;
}

.grayscale .schedule-box.color-6 {
  color: white;
  background: linear-gradient(-45deg, #333333 0%, #333333 14%, #262626 14%, #262626 16%, #333333 16%, #333333 29%, #262626 29%, #262626 31%, #333333 31%, #333333 44%, #262626 44%, #262626 46%, #333333 46%, #333333 59%, #262626 59%, #262626 61%, #333333 61%, #333333 74%, #262626 74%, #262626 76%, #333333 76%, #333333 89%, #262626 89%, #262626 91%, #333333 91%, #333333 104%, #262626 104%, #262626 106%, #333333 106%);
}

.schedule-box-highlight.color-6 {
  background-color: #43e5da;
}

.schedule-box-highlight.color-6 > .timespan-mini {
  background-color: #43e5da;
}

.schedule-box.color-7 {
  background-color: #ece7ca;
  color: #756829;
  border-left-color: #9b8a36;
}

.schedule-box.color-7 > .timespan-mini {
  background-color: #ece7ca;
}

.ecoprint .schedule-box.color-7 {
  background-color: white;
  border-color: #ece7ca;
  border-left-color: #9b8a36;
}

.grayscale .schedule-box.color-7 {
  color: white;
  background: linear-gradient(-45deg, #666666 0%, #666666 14%, #595959 14%, #595959 16%, #666666 16%, #666666 29%, #595959 29%, #595959 31%, #666666 31%, #666666 44%, #595959 44%, #595959 46%, #666666 46%, #666666 59%, #595959 59%, #595959 61%, #666666 61%, #666666 74%, #595959 74%, #595959 76%, #666666 76%, #666666 89%, #595959 89%, #595959 91%, #666666 91%, #666666 104%, #595959 104%, #595959 106%, #666666 106%);
}

.schedule-box-highlight.color-7 {
  background-color: #d2c47f;
}

.schedule-box-highlight.color-7 > .timespan-mini {
  background-color: #d2c47f;
}

.schedule-box.color-8 {
  background-color: #c0cbed;
  color: #213673;
  border-left-color: #2d489a;
}

.schedule-box.color-8 > .timespan-mini {
  background-color: #c0cbed;
}

.ecoprint .schedule-box.color-8 {
  background-color: white;
  border-color: #c0cbed;
  border-left-color: #2d489a;
}

.grayscale .schedule-box.color-8 {
  color: black;
  background: linear-gradient(-45deg, #999999 0%, #999999 14%, #a6a6a6 14%, #a6a6a6 16%, #999999 16%, #999999 29%, #a6a6a6 29%, #a6a6a6 31%, #999999 31%, #999999 44%, #a6a6a6 44%, #a6a6a6 46%, #999999 46%, #999999 59%, #a6a6a6 59%, #a6a6a6 61%, #999999 61%, #999999 74%, #a6a6a6 74%, #a6a6a6 76%, #999999 76%, #999999 89%, #a6a6a6 89%, #a6a6a6 91%, #999999 91%, #999999 104%, #a6a6a6 104%, #a6a6a6 106%, #999999 106%);
}

.schedule-box-highlight.color-8 {
  background-color: #718ad6;
}

.schedule-box-highlight.color-8 > .timespan-mini {
  background-color: #718ad6;
}

.schedule-box.color-9 {
  background-color: #f79cc9;
  color: #71093d;
  border-left-color: #a00d57;
}

.schedule-box.color-9 > .timespan-mini {
  background-color: #f79cc9;
}

.ecoprint .schedule-box.color-9 {
  background-color: white;
  border-color: #f79cc9;
  border-left-color: #a00d57;
}

.grayscale .schedule-box.color-9 {
  color: black;
  background: linear-gradient(45deg, #cccccc 0%, #cccccc 14%, #d9d9d9 14%, #d9d9d9 16%, #cccccc 16%, #cccccc 29%, #d9d9d9 29%, #d9d9d9 31%, #cccccc 31%, #cccccc 44%, #d9d9d9 44%, #d9d9d9 46%, #cccccc 46%, #cccccc 59%, #d9d9d9 59%, #d9d9d9 61%, #cccccc 61%, #cccccc 74%, #d9d9d9 74%, #d9d9d9 76%, #cccccc 76%, #cccccc 89%, #d9d9d9 89%, #d9d9d9 91%, #cccccc 91%, #cccccc 104%, #d9d9d9 104%, #d9d9d9 106%, #cccccc 106%);
}

.schedule-box-highlight.color-9 {
  background-color: #ef3e96;
}

.schedule-box-highlight.color-9 > .timespan-mini {
  background-color: #ef3e96;
}

.schedule-box.color-10 {
  background-color: #afdebf;
  color: #225332;
  border-left-color: #317748;
}

.schedule-box.color-10 > .timespan-mini {
  background-color: #afdebf;
}

.ecoprint .schedule-box.color-10 {
  background-color: white;
  border-color: #afdebf;
  border-left-color: #317748;
}

.grayscale .schedule-box.color-10 {
  color: white;
  background: linear-gradient(45deg, black 0%, black 14%, black 14%, black 16%, black 16%, black 29%, black 29%, black 31%, black 31%, black 44%, black 44%, black 46%, black 46%, black 59%, black 59%, black 61%, black 61%, black 74%, black 74%, black 76%, black 76%, black 89%, black 89%, black 91%, black 91%, black 104%, black 104%, black 106%, black 106%);
}

.schedule-box-highlight.color-10 {
  background-color: #67c185;
}

.schedule-box-highlight.color-10 > .timespan-mini {
  background-color: #67c185;
}

.schedule-box.color-11 {
  background-color: #d2bbf7;
  color: #3f1188;
  border-left-color: #5316b6;
}

.schedule-box.color-11 > .timespan-mini {
  background-color: #d2bbf7;
}

.ecoprint .schedule-box.color-11 {
  background-color: white;
  border-color: #d2bbf7;
  border-left-color: #5316b6;
}

.grayscale .schedule-box.color-11 {
  color: white;
  background: linear-gradient(45deg, #333333 0%, #333333 14%, #262626 14%, #262626 16%, #333333 16%, #333333 29%, #262626 29%, #262626 31%, #333333 31%, #333333 44%, #262626 44%, #262626 46%, #333333 46%, #333333 59%, #262626 59%, #262626 61%, #333333 61%, #333333 74%, #262626 74%, #262626 76%, #333333 76%, #333333 89%, #262626 89%, #262626 91%, #333333 91%, #333333 104%, #262626 104%, #262626 106%, #333333 106%);
}

.schedule-box-highlight.color-11 {
  background-color: #9660eb;
}

.schedule-box-highlight.color-11 > .timespan-mini {
  background-color: #9660eb;
}

.schedule-box.color-12 {
  background-color: #d6c8b8;
  color: #4a3c2b;
  border-left-color: #6b563d;
}

.schedule-box.color-12 > .timespan-mini {
  background-color: #d6c8b8;
}

.ecoprint .schedule-box.color-12 {
  background-color: white;
  border-color: #d6c8b8;
  border-left-color: #6b563d;
}

.grayscale .schedule-box.color-12 {
  color: white;
  background: linear-gradient(45deg, #666666 0%, #666666 14%, #595959 14%, #595959 16%, #666666 16%, #666666 29%, #595959 29%, #595959 31%, #666666 31%, #666666 44%, #595959 44%, #595959 46%, #666666 46%, #666666 59%, #595959 59%, #595959 61%, #666666 61%, #666666 74%, #595959 74%, #595959 76%, #666666 76%, #666666 89%, #595959 89%, #595959 91%, #666666 91%, #666666 104%, #595959 104%, #595959 106%, #666666 106%);
}

.schedule-box-highlight.color-12 {
  background-color: #b19777;
}

.schedule-box-highlight.color-12 > .timespan-mini {
  background-color: #b19777;
}

.schedule-box-highlight.schedule-box-highlight-conflict {
  background-color: #f00;
  border-left-color: #800;
  color: black;
  opacity: 0.8;
  z-index: 1;
}

.lecture-code {
  line-height: 100%;
  text-align: center;
  font-size: 14px;
  max-width: 100%;
  overflow: hidden;
}

.timespan {
  position: absolute;
  font-weight: lighter;
  max-width: 100%;
  overflow: hidden;
}

.timespan-begin {
  left: 2px;
  top: 0px;
}

.timespan-end {
  bottom: 0px;
  right: 3px;
}

.timespan-mini {
  left: 0;
  right: 0;
  visibility: hidden;
}

.timespan-mini.timespan-begin {
  top: -14px;
}

.timespan-mini.timespan-end {
  bottom: -13px;
  text-align: right;
}

.schedule-box:hover.schedule-box-show .timespan-mini,
.schedule-box-highlight.schedule-box-show .timespan-mini {
  visibility: visible;
  z-index: 1;
}

#combination-controller {
  position: relative;
  flex: 0 0 auto;
  margin-top: 20px;
  display: flex;
}

.combination-paddle {
  position: relative;
  flex: 0 0 34px;
  background-color: white;
  border: none;
  z-index: 1;
  color: #bbb;
}

.combination-paddle:hover {
  background-color: #ddd;
}

.combination-paddle:active {
  background-color: #aaa;
}

#combination-paddle-left {
  left: 0;
  border-right: 1px solid lightgray;
}

#combination-paddle-right {
  right: 0;
  border-left: 1px solid lightgray;
}

#combination-track-window {
  position: relative;
}

#combination-track {
  flex: 1 1 0;
  height: 100px;
  width: 0;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

.combination {
  position: relative;
  display: inline-block;
  padding: 0 4px;
  width: 100px;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid lightgray;
  box-sizing: border-box;
  opacity: 0.7;
  transition: background .1s ease, opacity .1s ease;
}

.combination:hover {
  background-color: #e6e6e6;
  opacity: 1;
}

.combination:active {
  background-color: #bbb;
}

.combination:last-child {
  border-right: none;
}

.combination.combination-highlight {
  background-color: #ddd;
  box-shadow: 0 0 3px #eee;
  opacity: 1;
}

.combination.combination-highlight:hover {
  background-color: #ddd;
}

.combination.combination-highlight:active {
  background-color: #aaa;
}

#drop-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
  pointer-events: none;
  z-index: 99;
}

#drop-overlay.overlay-show {
  opacity: 1;
  pointer-events: all;
  pointer-events: initial;
}

#drop-overlay .drop-icon {
  margin: 8px;
  font-size: 32px;
}

#drop-overlay * {
  pointer-events: none;
}

#drop-overlay.overlay-show ~ * {
  filter: blur(2px);
}

#dialog-overlay {
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: background-color ease 0.2s;
}

#dialog-overlay.show {
  opacity: 1;
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.6);
}

.dialog {
  display: none;
  flex: 0 0 420px;
  background: white;
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  max-width: 80%;
  padding: 16px;
  padding-top: 24px;
}

.dialog.show {
  display: block;
}

.dialog button.close-button {
  position: absolute;
  right: 0;
  top: 0;
  background-color: transparent;
  border: none;
  font-size: 16pt;
  color: #888;
  font-weight: lighter;
  width: 24px;
  height: 24px;
  padding: 0;
}

.dialog button.close-button:hover {
  color: #0097A7;
  background: #e6e6e6;
}

.dialog button.close-button:active {
  color: #006974;
  background: #bbb;
}

.dialog button.dialog-button {
  color: #0097A7;
  text-transform: uppercase;
  border: none;
  background: transparent;
  font-weight: bold;
  padding: 8px 4px;
}

.dialog button.dialog-button:hover {
  color: #0097A7;
  background: #e6e6e6;
}

.dialog button.dialog-button:active {
  color: #006974;
  background: #bbb;
}

#course-dialog {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-gap: 12px;
  user-select: none;
  width: 400px;
}

#course-dialog.show {
  display: grid;
}

#course-dialog label {
  display: block;
  color: #333;
  text-align: center;
}

#course-dialog select {
  width: 100%;
}

#course-campus-select-label {
  grid-row: 1;
  grid-column: 1;
}

#course-unit-select-label {
  grid-row: 1;
  grid-column: 2/5;
}

#course-select-label {
  grid-row: 2;
  grid-column: 1/4;
}

#course-period-select-label {
  grid-row: 2;
  grid-column: 4;
}

#course-lecture-list {
  grid-row: 3;
  grid-column: 1/5;
}

#course-lecture-list .course-lecture-type {
  color: darkgray;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Roboto,tahoma,helvetica;
  font-size: 12px;
  margin-top: 8px;
  margin-bottom: 2px;
}

#course-lecture-list .course-no-lectures {
  color: gray;
}

#course-lecture-list .course-lecture.course-lecture-disabled {
  color: gray;
  text-decoration: line-through;
}

#course-plan-erase-warning {
  grid-column: 2/4;
  grid-row: 4;
  color: #444;
  text-align: right;
}

#course-accept-button {
  grid-column: 4;
  grid-row: 4;
}

#course-optative-check-label {
  grid-column: 1;
  grid-row: 4;
}

#menu-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  visibility: hidden;
}

#menu-overlay.show {
  visibility: visible;
}

.context-menu {
  position: absolute;
  display: inline-block;
  background: white;
  border: 1px solid lightgray;
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  max-width: 240px;
  animation: appear .1s ease-out;
}

.context-menu .context-menu-item {
  padding: 8px 12px;
  display: block;
  width: 100%;
  text-align: left;
  color: black;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
}

@media (pointer: coarse) {
  .context-menu .context-menu-item {
    padding: 12px 16px;
    font-size: 14px;
  }
}

.context-menu .context-menu-item.context-external-link:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f35d";
  font-size: 12px;
  color: #757575;
  float: right;
}

.context-menu .context-menu-item:disabled {
  color: gray;
}

.context-menu .context-menu-item:disabled:hover {
  background: white;
}

.context-menu .context-menu-item.context-divider {
  border-bottom: 1px solid lightgray;
}

.context-menu .context-menu-item:hover {
  background: #e6e6e6;
}

.context-menu .context-menu-item.color-picker:hover {
  background: white;
}

.context-menu .context-menu-item.color-picker button.color-picker-button {
  min-width: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid lightgray;
  border-radius: 50%;
  margin: 4px;
  vertical-align: middle;
}

.context-menu .context-menu-item.color-picker button.color-picker-button.color-picker-random-button {
  font-size: 12px;
  color: gray;
}

.context-menu .context-menu-item.color-picker button.color-picker-button.color-picker-random-button:hover {
  background: #e6e6e6;
}

.context-menu .context-menu-item.color-picker button.color-picker-button.color-picker-random-button:active {
  background: #bbb;
  color: #006974;
}

@media (pointer: coarse) {
  .context-menu .context-menu-item.color-picker button.color-picker-button {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-0 {
  background-color: #adf0b2;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-0:hover {
  background-color: #56e162;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-0.selected {
  background-color: #56e162;
  border-color: #1c9c26;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-1 {
  background-color: #a1defc;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-1:hover {
  background-color: #3ebbf9;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-1.selected {
  background-color: #3ebbf9;
  border-color: #0679b2;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-2 {
  background-color: #ffc299;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-2:hover {
  background-color: #ff8533;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-2.selected {
  background-color: #ff8533;
  border-color: #b34700;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-3 {
  background-color: #edc3ee;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-3:hover {
  background-color: #d474d8;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-3.selected {
  background-color: #d474d8;
  border-color: #9b2d9f;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-4 {
  background-color: #f3dd95;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-4:hover {
  background-color: #e9c03a;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-4.selected {
  background-color: #e9c03a;
  border-color: #937410;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-5 {
  background-color: #dff5a3;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-5:hover {
  background-color: #bfeb47;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-5.selected {
  background-color: #bfeb47;
  border-color: #7ba112;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-6 {
  background-color: #9cf2ec;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-6:hover {
  background-color: #43e5da;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-6.selected {
  background-color: #43e5da;
  border-color: #14948c;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-7 {
  background-color: #ece7ca;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-7:hover {
  background-color: #d2c47f;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-7.selected {
  background-color: #d2c47f;
  border-color: #9b8a36;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-8 {
  background-color: #c0cbed;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-8:hover {
  background-color: #718ad6;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-8.selected {
  background-color: #718ad6;
  border-color: #2d489a;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-9 {
  background-color: #f79cc9;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-9:hover {
  background-color: #ef3e96;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-9.selected {
  background-color: #ef3e96;
  border-color: #a00d57;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-10 {
  background-color: #afdebf;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-10:hover {
  background-color: #67c185;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-10.selected {
  background-color: #67c185;
  border-color: #317748;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-11 {
  background-color: #d2bbf7;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-11:hover {
  background-color: #9660eb;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-11.selected {
  background-color: #9660eb;
  border-color: #5316b6;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-12 {
  background-color: #d6c8b8;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-12:hover {
  background-color: #b19777;
}

.context-menu .context-menu-item.color-picker .color-picker-button-color-12.selected {
  background-color: #b19777;
  border-color: #6b563d;
}

#share-dialog #share-link-wrapper {
  width: 320px;
  max-width: 100%;
  display: flex;
}

#share-dialog #share-link-wrapper #share-link {
  height: 22px;
  flex: 1 0 0;
}

#share-dialog #share-clipboard {
  padding: 0 8px;
  vertical-align: middle;
}

#share-dialog #share-calendar {
  margin-top: 12px;
}

#share-dialog button.fas, #share-dialog button.fab, #share-dialog button.far {
  color: gray;
  transition: color .1s ease;
}

#share-dialog button.fas:hover, #share-dialog button.fab:hover, #share-dialog button.far:hover {
  color: #0097A7;
}

#share-dialog button.fas:active, #share-dialog button.fab:active, #share-dialog button.far:active {
  color: #006974;
}

#share-dialog button.fas.fa-facebook:hover, #share-dialog button.fab.fa-facebook:hover, #share-dialog button.far.fa-facebook:hover {
  color: #3B5998;
}

#share-dialog button.fas.fa-facebook:active, #share-dialog button.fab.fa-facebook:active, #share-dialog button.far.fa-facebook:active {
  color: #2d4373;
}

#share-dialog button.fas.fa-whatsapp:hover, #share-dialog button.fab.fa-whatsapp:hover, #share-dialog button.far.fa-whatsapp:hover {
  color: #25d366;
}

#share-dialog button.fas.fa-whatsapp:active, #share-dialog button.fab.fa-whatsapp:active, #share-dialog button.far.fa-whatsapp:active {
  color: #1da851;
}

#print-dialog.show {
  display: block;
}

#print-dialog label {
  display: block;
  color: #333;
}

#print-dialog #print-buttons {
  text-align: right;
}

@keyframes grow {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slidefromleft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

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