.calendar {
  margin-top: 50px;
}

.calendar-body-column {
  display: flex;
}

.calendar-container {
  width: 14%;
  height: 7.5rem;
  text-align: center;
  vertical-align: middle !important;
  border: solid 1px #d9d9d9 !important;
  padding: 0px !important;
  background-color: white;
}

.calendar-date {
  float: left;
  margin-left: 1rem;
}

.calendar-text {
  float: right;
}

.calendar-text>div {
  text-align: start;
}

.calendar_event_name {
  height: 3rem;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
  .calendar-container {
    width: 100%;
  }
  .calendar-head {
    display: none;
  }
  .calendar-empty {
    display: none;
  }
}

.btn-calendar {
  padding: 36px 0;
  height: 7.5rem;
  margin: 0px;
}

.btn-calendar:hover {
  background-color: #f2f2f26e;
}

.thead-dark {
  color: #fff;
  background-color: #212529;
  border-color: #32383e;
  text-align: center;
}

.loader {
  text-align: center;
}

.loader-bg {
  width: 70px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.loader-spinner {
  position: absolute;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #272c33;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  left: 0px;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  top: 44px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cs-notification:hover {
  background-color: #F2F2F2 !important;
  color: white;
}

.modal-lg {
  max-width: 1150px !important;
}