.AvailabilityGrid {
  background: rgb(48, 54, 61) !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 3rem !important;
  color: rgba(255, 255, 255, 0.788) !important;
  margin: 2rem;
  height: 100%;
  text-align: center !important;
  overflow: scroll;
  overflow-y: hidden;
}

.AvailabilityGrid h1 {
  margin-bottom: 1.3rem;
}

.AvailabilityGrid thead {
  background-color: rgb(190, 190, 190);
}

.AvailabilityGrid table {
  background-color: rgb(69, 82, 82);
}

.AvailabilityGrid .availability-block {
  /* color: white !important; */
  color: rgb(37, 233, 37) !important;
  font-size: 1.1rem;
  font-weight: 700;
}

.AvailabilityGrid .available-ico {
  /* color: white !important; */
  color: rgb(3, 187, 3) !important;
  font-size: 1.3rem;
  font-weight: 700;
}

.AvailabilityGrid .full-block {
  color: rgb(231, 56, 56) !important;
  font-weight: 700;
  font-size: 1.4rem;
  /* background-color: rgb(202, 50, 50); */
}

.AvailabilityGrid .unit-desc {
  background-color: rgb(190, 190, 190);
  font-weight: 700;
}

.AvailabilityGrid .scroll-indicator {
  font-weight: 600;
  /* float: right; */
}

.AvailabilityGrid .select-box {
  margin: 0.8rem auto 1.6rem auto;
  width: 15%;
  color: rgb(20, 20, 20);
}

.AvailabilityGrid .unit-cat {
  position: relative !important;
  background-color: rgb(61, 61, 61) !important;
}

.AvailabilityGrid .unit-cat td{
  font-size: 1.1rem !important; 
  font-weight: 600 !important;
  color: white !important;
}

.AvailabilityGrid .unit-cat:hover {
  cursor: pointer;
}

.AvailabilityGrid .unit-cat .ico {
  /* position: absolute;
  left: 15px;
  top: 10px; */
  float: left;
  margin-top: 0.3rem;
  margin-right: 0.1rem;
}

.AvailabilityGrid .collapse-box-row {
  background-color: rgb(61, 61, 61) !important;
}

.AvailabilityGrid .collapse-box-row input{
  margin-right: 0.5rem;
  background-color: rgb(61, 61, 61) !important;
}

.AvailabilityGrid .collapse-box-row td {
  font-weight: 600;
  color: white !important;
}

/* Seems useless */
.react-datepicker-popper {
  margin: 0 auto !important;
}

.select-date-container {
  margin: 0 auto !important;
  width: 20%;
}

/* .AvailabilityGrid .scroll-indicator *:hover {
  cursor: pointer;
} */


.AvailabilityGrid .MuiCircularProgress-root {
  color: rgba(48, 54, 61, 0.966);
}

.AvailabilityGrid .loadingText {
  color: rgba(48, 54, 61, 0.966);
}

@media (max-width: 1250px) {
  .AvailabilityGrid {
    font-size: 0.9rem;
    
  }

  .AvailabilityGrid .unit-cat td{
    font-size: 0.9rem !important; 
  }

  .AvailabilityGrid .availability-block {
    font-size: 0.9rem;
    padding: 0.4rem;
  }

  .AvailabilityGrid .unit-cat .ico {
    display: none;
  }
  
  .AvailabilityGrid .full-block {
    font-size: 0.9rem;
    padding: 0.4rem;
  }

  .AvailabilityGrid .unit-desc {
    padding: 0.4rem;
  }

  .select-date-container {
    width: 35%;
  }
}

@media (max-width: 950px) {
  
  .AvailabilityGrid .select-box {
    width: 30%;
  }

  .AvailabilityGrid .unit-cat td{
    font-size: 0.7rem !important; 
  }

  .AvailabilityGrid {
    padding: 0.8rem !important;
    margin: 0.7rem;
    font-size: 0.7rem;
  }

  .AvailabilityGrid .availability-block {
    font-size: 0.7rem;
    padding: 0.2rem;
  }
  
  .AvailabilityGrid .full-block {
    font-size: 0.7rem;
    padding: 0.2rem;
  }

  .AvailabilityGrid .unit-desc {
    padding: 0.2rem;
  }

  .select-date-container {
    width: 45%;
  }
}

@media (max-width: 750px){
  .AvailabilityGrid .select-box {
    margin: 0.2rem auto 1rem auto;
    width: 60%;
  }

  .select-date-container {
    width: 60%;
  }
}

.react-calendar__tile--now {
  background-color: #ffffff !important;
}

.react-calendar__tile--active {
  border-radius: 10px !important;
  background-color: #9dff65 !important;
  padding: 5px;
}