html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
*:focus {
  outline: none;
}
[onClick] {
  cursor: pointer;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
  font-size: 11pt;
}
h1:first-child {
  margin-top: 0px;
}
html {
  height: 97%;
}
body {
  font-family: sans-serif;
  font-size: 14px;
  height: 100%;
  background: #fff;
}
.page {
  display: none;
}
.page.show {
  display: grid;
}
.page.login {
  color: #444;
  grid-template-columns: 0.5fr min-content 0.5fr;
}
.page.login .box {
  display: grid;
  grid-gap: 8px;
  margin-top: 64px;
  border: 1px solid #aaa;
  padding: 32px;
}
.page.login .box .button-login {
  justify-self: center;
}
.page.login #login-error {
  display: none;
  color: #a00;
  margin-top: 16px;
}
.page.login #login-error.show {
  display: block;
}
.page.calendar .fc-highlight {
  background: rgba(175, 233, 175, 0.5);
}
.page.calendar #day-selector {
  grid-area: days;
}
.page.calendar #day-selector .fc-today-button {
  display: none;
}
.page.calendar #day-selector .fc-view-harness {
  border-left: none !important;
}
.page.calendar #day-selector .fc-multiMonthYear-view {
  border-left: none !important;
}
.page.calendar #day-selector .fc-multiMonthYear-view::-webkit-scrollbar {
  display: none;
}
.page.calendar #day-selector .fc-multimonth-month:not(:first-child) {
  padding-top: 48px;
}
.page.calendar #day-selector .fc-multimonth-title {
  background-color: #afe9af;
}
.page.calendar #day-selector .fc-col-header-cell-cushion {
  padding-top: 10px;
}
.page.calendar #day-selector .fc-header-toolbar.fc-toolbar {
  margin-left: 16px;
}
.page.calendar #day-selector .fc-day {
  height: 32px;
}
.page.calendar #day-selector .fc-day.fc-day-today {
  background-color: #afe9af;
}
.page.calendar #day-selector .fc-daygrid-day-number {
  padding-right: 8px;
  margin-top: 2px;
}
.page.calendar #day-selector .fc-media-screen .fc-multimonth-singlecol .fc-multimonth-header {
  position: relative !important;
}
.page.calendar #day-selector .fc-more-link {
  visibility: hidden;
  position: absolute;
  top: -21px;
  left: 5px;
  pointer-events: none;
}
.page.calendar #day-selector .fc-more-link:before {
  visibility: visible;
  display: block;
  content: "⬤";
  color: #afd9e9;
}
#layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-areas: "units units" "days calendars";
  grid-gap: 16px 0;
  height: 100vh;
}
#units {
  grid-area: units;
  display: flex;
  justify-content: end;
  gap: 16px;
  background: #eee;
  padding: 16px;
  border-bottom: 1px solid #ccc;
}
#units .unit {
  color: #fff;
  background: #888;
  padding: 16px;
  border-radius: 8px;
  min-width: 96px;
  text-align: center;
  font-weight: bold;
}
#units .unit.selected {
  color: #fff;
  background: #42a5d5;
}
#calendars {
  grid-area: calendars;
  display: grid;
  grid-template-columns: 1 1 1;
  height: 100%;
}
.fc-scroller::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
}
.fc-scroller {
  scrollbar-width: none;
}
.fc .fc-timegrid-slot {
  height: 3em;
}
.fc:not(:first-child) .fc-timegrid-slots td:first-child {
  display: none;
}
#calendars > .fc:not(:first-child) .fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink div {
  display: none;
}
#event-editor {
  box-shadow: 5px 5px 20px -3px rgba(0, 0, 0, 0.75);
}
#event-editor #event-editor-content {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  grid-template-rows: min-content min-content min-content;
  grid-template-areas: "description description description" "from        to          type" "button      button      button";
  grid-gap: 8px;
}
#event-editor #event-editor-content label {
  display: block;
}
#event-editor #event-editor-content input[name="description"] {
  width: 100%;
}
#event-editor #event-editor-content input,
#event-editor #event-editor-content select {
  padding: 8px;
}
#event-editor #event-editor-content select * {
  line-height: 32px;
}
#event-editor #event-editor-content .buttons {
  display: flex;
  justify-content: end;
  gap: 8px;
}
#event-editor #event-editor-content .buttons button {
  padding: 6px 8px;
}
.fc-day.selected {
  background-color: #ffb380 !important;
}
:root {
  --fc-today-bg-color: #ffffff !important;
}
.fc > .fc-view-harness {
  border-left: 1px solid #000;
}
.fc-toolbar-chunk button {
  white-space: nowrap;
}
.fc-event-time {
  padding-top: 8px;
  padding-left: 8px;
  font-size: 14px !important;
}
.fc-event-title {
  padding-top: 4px;
  padding-left: 8px;
  font-size: 14px !important;
  font-weight: bold;
}