#calendar-table{
}

#calendar-display{
  display: none;
  overflow: scroll;
  position: relative;

}

thead th{

  position: sticky;
  top:0;
  border: 1px solid black;
  background-color: rgb(214, 214, 214);
  z-index: 50;
}



th{
  width: 10%;
}

.calendar-time{
  font-weight: bold;
}

table {
  font-family: arial, sans-serif;
  width: 100%;
  border-spacing: 0;
  font-size: xx-small;
  height: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 3px;

}




.calendar-item {

  background-color: rgb(214, 214, 214);

  text-align: center;
  transition: all ease-in-out 150ms;
  position: relative;
}

/* .calendar-item:hover{

  background-color: rgb(85, 25, 25);
  border-radius: 10px;
  color: white;
  z-index: 10;
  scale: 1.2;
  cursor: pointer;


} */

.calendar-item.hover{
  background-color: rgb(85, 25, 25);
  border-radius: 10px;
  color: white;
  z-index: 10;
  scale: 1.15;
  cursor: pointer;
}

.close-button-cal{
  scale: 0;

  position: absolute;
  top:0px;
  right: 0px;
  margin-top: 10%;
  margin-right: 10%;
  color: black;



  transition: all ease-in-out 150ms;
}

.calendar-item:hover .close-button-cal {



  scale: 2 ;
}

.close-button-cal:hover{
  scale: 3 !important;
}