#calendar {
  margin-top: 4px;
  min-height: 90vh;
}

#calendar .fc-view-harness {
  transition: all .5s ease;
}

#calendar.updating .fc-view-harness {
  opacity: 0.25;
}

#calendar .fc-event,
#calendar .fc-more-link {
  transition: all .5s ease;
}

#calendar.updating .fc-event,
#calendar.updating .fc-more-link {
  opacity: 0;
}

#calendar table {
  margin-bottom: 0;
}

#calendar thead .fc-scrollgrid-sync-inner {
  padding: 0.5rem;
  font-size: 1.25rem;
}

#calendar th.fc-day a {
  color: var(--color--gray);
  font-weight: 700;
  text-decoration: none;
  cursor: initial;
}

#calendar .fc-event.home .fc-daygrid-event-dot,
#calendar .fc-event.away .fc-daygrid-event-dot,
#calendar .fc-event.tbd .fc-daygrid-event-dot,
#calendar .fc-event.home .fc-list-event-dot,
#calendar .fc-event.away .fc-list-event-dot,
#calendar .fc-event.tbd .fc-list-event-dot{
  width: 6px;
  height: 6px;
  border: 1px solid var(--color--gray);
  border-radius: 50%;
}

#calendar .fc-event.home .fc-daygrid-event-dot,
#calendar .fc-event.home .fc-list-event-dot {
  background: var(--color--gray);
}

#calendar select#filter--sports {
  height: auto;
  padding: 0.4em 2.5em 0.4em 0.5em;
}

.home-away-key {
  display: inline-block;
}

.home-away-key > div {
  display: flex;
  align-items: center;
  color: #4d4d4d;
  font-size: 0.9rem;
}

.fc-toolbar-chunk:last-child {
  display: flex;
  gap:2rem;
}

/* Modal */
html.modal-active, body.modal-active {
  overflow: hidden;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 99999;
}

#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}

#modal-container.active {
  transform: scale(1);
}

#modal-container.active .modal-background {
  background: rgba(0, 0, 0, 0);
  animation: modalFadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.active .modal-background .modal {
  opacity: 0;
  animation: modalScaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.active + .content {
  animation: modalScaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.active.out {
  animation: modalQuickScaleDown 0s 0.5s linear forwards;
}
#modal-container.active.out .modal-background {
  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.active.out .modal-background .modal {
  animation: modalScaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.active.out + .content {
  animation: modalScaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal {
  width: clamp(200px, 75%, 600px);
  background: white;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: var(--box-shadow--lg);
  padding: 2rem;
  max-height: 100vh;
  overflow: auto;
}

.modal .close-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-weight: normal;
  border-radius: 0px;
}

span.modal__title__home-away {
  display: block;
  font-family: var(--font--secondary);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color--red);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

ul.modal__content {
    list-style: none;
    padding: 0;
    margin: 0 !important;
    font-size: 1.25rem;
    text-align: left;
}

ul.modal__content li {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

ul.modal__content li span {
    font-weight: 300;
}

@keyframes modalFadeIn {
  0% { background: rgba(0, 0, 0, 0); }
  100% { background: rgba(0, 0, 0, 0.7); }
}
@keyframes modalFadeOut {
  0% { background: rgba(0, 0, 0, 0.7); }
  100% { background: rgba(0, 0, 0, 0); }
}
@keyframes modalScaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}
@keyframes modalScaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}
@keyframes modalScaleBack {
  0% { transform: scale(1); }
  100% { transform: scale(0.85); }
}
@keyframes modalScaleForward {
  0% { transform: scale(0.85); }
  100% { transform: scale(1); }
}
@keyframes modalQuickScaleDown {
  0% { transform: scale(1); }
  99.9% {  transform: scale(1); }
  100% { transform: scale(0); }
}

@media (max-width: 768px){
  .fc-header-toolbar {
    flex-direction: column;
    gap: 1rem;
  }

    .fc-header-toolbar .fc-toolbar-chunk:nth-child(2){
     order: -1;
    }
}