.calendar-table{
  width: 50%;
  max-width: 50%;
  margin-top: 40px !important;
  display: table;
  margin: 0 auto;
}

.calendar-month-name{
  font-size: 20px;
  text-transform: uppercase;
}

.calendar-day{
  font-size: 20px;
  font-weight: bold;
  background-color: rgb(100, 100, 100);
  color: white !important;
  text-align: center;
  line-height: calc(50vw / 7 *0.5);
}

.calendar-cell{
  min-width: calc(100% / 7 - 1px);
  width: calc(100% / 7 - 1px);
  max-width: calc(100% / 7 - 1px);
  border: 1px solid #696969;
  border-radius: 10px;
  height: calc(50vw / 7 *0.5);
  color: #696969;
  display: inline-block;
}

.event-on-day{
  background-color: #93d147;
  color: white !important;
  cursor: pointer;
}

.calendar-cell-outdated{
  background-color: white;
  color: white;
}

.modal-styler{
  width: 60vw;
}

.modal-styler .modal-body{
  height: 32vh;
  overflow-y: scroll;
}

.modal-styler .btn-danger{
  background-color: #93d147;
}

@media (max-width: 991px){
.calendar-table{
  width: 100%;
  max-width: 100%;
}

  .calendar-day{
  font-size: 14px;
  font-weight: bold;
  line-height: calc(100vw / 7 *0.5);
}

.calendar-cell{
  min-width: calc(100% / 7 - 1px);
  width: calc(100% / 7 - 1px);
  max-width: calc(100% / 7 - 1px);
  border: 1px solid #696969;
  border-radius: 5px;
  height: calc(100vw / 7 *0.5);
}
.modal-styler{
  width: 90vw;
}
}