#calendar{
  z-index: 1;
  width:80%;
  height:60vh;
  margin:auto;
}


.fc-list-day-text, .fc-list-day-side-text, .fc-list-event-dot{
  color:#000080;
}

.fc-event{
  cursor: pointer;
}

.modal {
  z-index: 2;
  display: none;
  position: fixed;
  width:30%;
  top: 25%;
  left: 35%;
  border: 1px solid gray;
  border-radius:5px;
}
.modal-header{
  display:flex;
  justify-content:space-between;
  height:12vh  ;
  overflow-y: auto;
  background-color:#a4c3f5;
  padding:10px;
}
.modal-main{
  height:20vh;
  overflow-y: auto;
  background-color:#f0f4f5;
  padding:10px;
}
.modal-footer{
  height:10vh;
  overflow-y: auto;
  background-color:#0a3d62;
  padding:10px;
  text-align:left;
  color:#fff;
  font-style: italic;
}
.modal-footer p{
}
#modal-close{
  font-size: 25px;
}
@media screen and (max-width:1500px){
  .modal{
    width:50%;
    left:25%;
    height: 50%;
  }
  .modal-header{
    height:15vh;
  }
  .modal-footer{
    height:15vh;
  }
}
@media screen and (max-width:1000px){
  #calendar{
    width:100%;
    height:80vh;
    margin:0;
    padding:0;
  }
  .fc .fc-toolbar-title{
    font-size:0.8rem;
  }
  .fc .fc-button {
    font-size:0.6rem;
  }
  .fc .fc-event-title{
    font-size:0.7rem;
  }
  .fc .fc-event-time{
    font-size:0.7rem;
  }
  .modal{
    width:80%;
    left:10%;
    height: 50%;
  }
  .card-footer{
    height:12vh;
  }
  #modal-content{
    font-size:1rem;
  }
}