.Planning_calendar {
  width: 100%;
  table-layout: fixed;
}
.Planning_calendar th {
  font-weight: normal;
  overflow: hidden;
  font-size: 13px;
  padding: 16px 8px 0px;
  /* padding-bottom: 4px; /\* Making room for Calendar.title *\/ */
}
.Planning_calendar th > a {
  text-decoration-color: var(--grey-200);
  text-underline-offset: 2px;
  text-decoration-thickness: 3px;
}
.Planning_calendar th .Planning_daynumber {
  font-size: 24px;
  line-height: 1em;
}
/* Time column */
.Planning_calendar tr th:first-child,
.Planning_calendar tr td:first-child {
  width: 40px;
  font-size: 13px;
}
/* Move times slightly up to improve readability */
.Planning_calendar tr td:first-child div {
  position: relative;
  top: -9px;
}
.Planning_calendar td {
  border: 0px;
  padding: 0px;
}

/* Striped background showing hours */
.Planning_calendar tr:last-child td:nth-child(n + 2) {
  background-image: linear-gradient(
    180deg,
    lightgrey 1.25%,
    white 1.25%,
    white
  );
  background-size: 1px 80px;

  border: 1px solid lightgrey;
  border-top: 0px;
  /* box-shadow: 0px 2px 4px 0px #BABABA; This is OK in dayview, not in week */
}
.Planning_slot {
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid white;
  line-height: 1.25;

  will-change: box-shadow, border, z-index, filter;
  transition:
    box-shadow 0.2s linear,
    filter 0.2s linear;
}

.Planning_slot_new {
  background-color: #ffdcbd !important; /* Annoying, classing with Layout.card in overview_rosters */
  border: 1px solid #ff7700;
}

.Planning_slot .Planning_top_time,
.Planning_slot .Planning_bottom_time {
  opacity: 0;
}

/* Adding shadow behavior on hover only on desktop */
/* Otherwise we get this "sticky-hover" effect when you click on a lesson and then go back with browser controls */
@media (min-width: 769px) {
  .Planning_slot:hover {
    z-index: 15;
    border: 1px solid #5d5d5d;
    box-shadow: 0px 3px 10px 2px #5f5e5ebf;
    filter: saturate(2);
  }
  .Planning_slot:hover .Planning_top_time,
  .Planning_slot:hover .Planning_bottom_time {
    opacity: 1;
  }
}
.Planning_selected {
  z-index: 10;
  border: 1px solid #5d5d5d;
  box-shadow: 0px 3px 10px 2px #5f5e5ebf;
  opacity: 1;
}
.Planning_selected .Planning_top_time,
.Planning_selected .Planning_bottom_time {
  opacity: 1;
}
.Planning_not_selected {
  filter: grayscale(90%);
}
.Planning_lesson_status {
  content: "\00a0";
  position: relative;
  top: 4px;
  border: 1px solid white;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 18px;
}

.Planning_top_time,
.Planning_bottom_time {
  box-shadow: 0px 3px 10px 2px #5f5e5ebf;
  color: white;
  position: absolute;
  left: -46px;
  border-radius: 4px;
  background: #ff6514;
  padding: 1px 3px;
  border: 1px solid #dc5e1f;
  pointer-events: none;
  filter: none;
  /* box-shadow: 0px 3px 4px 2px #5f5e5ebf; */

  will-change: opacity;
  transition: opacity 0.2s linear;
  font-size: 13px;
  line-height: 1.25;
}
.Planning_top_time {
  top: -11px;
}
.Planning_bottom_time {
  bottom: -11px;
}

@media (max-width: 768px) {
  .Planning_header {
    display: block;

    background-image: url("/static/images/notes-full.eabe62fe2ba95a555f6cff890bd2f50e.svg");
    background-repeat: no-repeat;
    background-position-y: -107px; /* headerHeight + buttonbar height */
    background-size: var(--leftbarwidth);
  }
}

.Planning_overlay {
  background-color: rgba(0, 0, 0, 0.05);
  position: absolute;
  color: var(--grey-500);
  width: 100%;
  height: calc(100% - 1px);
  display: block;
  padding: 16px 8px;
  text-align: center;
  top: 1px;
  font-size: 0.9em;
  pointer-events: none;
}

.Planning_overlay {
  z-index: 1;
}

.Planning_slot {
  z-index: 3;
}

.Planning_slot_absence {
  z-index: 2;
}

.Planning_editblock {
  z-index: 4;
}

.Planning_timeline {
  z-index: 5;
}

.Planning_buttonbar {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-end;
  justify-content: center;
  /* padding-left: 16px; */
}
.Planning_weeknumber {
  color: var(--grey-500);
}
.Planning_weekdates {
  font-size: 16px;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  min-width: 240px;
}
.Planning_buttonbar i {
  font-size: 18px;
}
.Planning_buttonbar:empty {
  display: none;
}

.Planning_buttonbar > * {
  margin-left: 16px;
}
.Planning_buttonbar > *:first-child {
  margin-left: 0px;
}
@media (max-width: 768px) {
  .Planning_buttonbar {
    justify-content: space-around;
    padding-top: 0px;
    margin-bottom: 0px;
    align-items: center;
    height: 40px;
    background-color: var(--grey-900);
    background-image: url("/static/images/notes-full.eabe62fe2ba95a555f6cff890bd2f50e.svg");
    background-repeat: no-repeat;
    background-position-y: -47px; /* headerHeight */
    background-size: var(--leftbarwidth);
    color: var(--grey-200);
  }
  .Planning_buttonbar > * {
    margin-left: 0px;
    flex: 1 auto;
    text-align: center;
  }
  .Planning_buttonbar button,
  .Planning_buttonbar a,
  .Planning_buttonbar .Style_button {
    background-color: transparent;
    color: inherit;
    font-size: 0.85em;
    border: 0px;
    min-width: 40px;
    text-decoration: none;
  }
  .Planning_buttonbar button, .Planning_buttonbar a:hover , .Planning_buttonbar .Style_button: hover {
    background-color: var(--grey-700);
  }
  .Planning_buttonbar i {
    color: var(--grey-300);
    margin: 0px !important;
    padding: 0px !important;
    font-size: 18px;
  }
  .Planning_buttonbar .Planning_hidden_date_input {
    padding: 4px;
    min-width: unset;
  }
  .Planning_buttonbar_section {
    justify-content: center;
  }
}
@media (min-width: 769px) {
  .Planning_buttonbar {
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 16px 24px 0px;
  }
}
.Planning_topbuttons {
  display: flex;
  .Planning_newbuttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
}

.Planning_buttonbar_section {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

@media (max-width: 769px) {
  .Planning_topbuttons .Planning_newbuttons {
    width: 100%;
    gap: 0px;
    flex-wrap: nowrap;

    a {
      flex: 1;
      button {
        padding-left: 0px;
        padding-right: 0px;
        min-width: unset;
        width: 100%;
        border-radius: 0px;
        border-bottom: 1px;
        border-top: 1px;
        height: 100%;

        i {
          display: none;
        }
      }
      &:first-child button {
        border-radius: 8px 0px 0px 8px;
      }
      &:last-child button {
        border-radius: 0px 8px 8px 0px;
      }
    }
  }
}
.Planning_hidden_date_input {
  min-width: 184px;
  position: relative;
  display: flex;
  margin-bottom: 0px;
  align-items: center;
}
.Planning_hidden_date_input input {
  outline: none;
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  left: 0;
  top: 0;
}

/* Chrome */
.Planning_hidden_date_input input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  cursor: pointer;
}

.Planning_timeline {
  border-bottom: 2px solid orange;
}

.Planning_editblock {
  color: #ff6514;
  border: 1px solid #ff6514;
  background-color: #ffdcbd;
}

.Planning_teacher_title {
  position: absolute;
  text-align: center;
  font-size: 10px;
  overflow: hidden;
  text-transform: uppercase;

  /* Let's try this */
  z-index: 50; /* To come over slot, even while hovering */
  padding: 0px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 4px;
  color: black;
  width: 100%;
  text-align: center;
  top: 0px;
  transform: translateY(-100%);
}

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

.Planning_checkbox_as_button span {
  display: block;
  padding: 4px 16px;
  border-radius: 4px;
}
.Planning_checkbox_as_button span:hover {
  background-color: var(--accent-100);
}

.Planning_checkbox_as_button input:checked + span {
  background-color: var(--accent-500);
  color: var(--accent-900);
}

.Planning_checkbox_as_button input:checked + span:hover {
  background-color: var(--accent-500);
}

button.Planning_close_popup_button {
  position: absolute;
  top: 0px;
  width: 48px;
  height: 48px;
  z-index: 1;
  border-radius: 0px 8px 0px 8px;
  cursor: pointer;
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  padding: 0px;
  border: 0px;
  min-width: 0px;
  background-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

.Planning_close_popup_button i {
  margin: 0px;
  color: inherit;
}

.Planning_close_popup_button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.Planning_indicators {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  justify-content: flex-end;
  border-radius: 0px 4px 0px 4px;

  border: 1px solid white;
  border-top: 0px;
  border-right: 0px;

  background-color: rgba(255, 255, 255, 0.75);
  color: black;
}
.Planning_indicators > * {
  font-size: 12px;
  padding: 1px 4px;
}

.Planning_aside {
  max-height: var(--viewportminusnav);
  overflow-y: auto;
  border-left: 1px solid var(--grey-300);
  padding: 0px;
  min-height: var(--viewportminusnav);
}

@media (max-width: 768px) {
  .Planning_aside {
    position: absolute;
    background-color: var(--bg-white);
    z-index: 10000;
    left: 12vw;
    width: 88vw;
  }
}