.fc { font-size: .8em; height: 90vh; min-height: 600px; }
.fc a:not(href), .fc a:not(href):hover { color: unset; }
/* place dot-event title on new line */
/*
.fc-daygrid-dot-event { flex-wrap: wrap; }
.fc-daygrid-dot-event>.fc-event-title { flex-basis: 100%; margin-left: 4px; }
*/
:root{
  --fc-button-bg-color: #666;
  --fc-button-border-color: #666;
  --fc-button-hover-bg-color: #F39;
  --fc-button-hover-border-color: #F39;
  --fc-button-active-bg-color: #F39;
  --fc-button-active-border-color: #F39;
}
@media(prefers-color-scheme: dark) {
  :root {
    --fc-page-bg-color: #000;
    --fc-list-event-hover-bg-color: #333;
    --fc-border-color: #666;
  }
  .fc-daygrid-dot-event.fc-event-mirror, .fc-daygrid-dot-event:hover {
    background: #FFF2;
  }
}

/* Modal Popup */
.app-modal {
  position: fixed;
  z-index: 9001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #000;
  background: #0006;
}
.modal-box {
  background: #FFF;
  margin: 15% auto;
  border: 4px solid;
  border-radius: 10px;
  border-color: #F39;
  width: 600px;
  max-width: 90%;
}
@media(prefers-color-scheme: dark){.modal-box{background: #222;}}
.icon-entry { margin: 1em 0 1em 1.8em; }
.icon-entry>:first-child { margin: 0 .5em -.24em -1.5em; font-size: 1.2em; }
.modal-title {
  display: block;
  font-size: 1.3rem;
  margin: 0;
  padding: 10px 15px;
  color: #FFF;
  background: #F39;
  font-weight: bold;
}
.modal-close {
  cursor: pointer;
  font-size: 1.8rem;
  padding: .1rem 15px .4rem;
  color: #FFF;
  float: right;
  font-weight: bold;
}
.modal-content {
  padding: 0 15px;
}