div#slot-table div table tr td {
  vertical-align: text-top;
}

div#unavailability-user-table div table {
  table-layout: fixed;
}

.slot-container {
  min-height: 57px;
  border: 1px solid #dddddd;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  cursor: default;
  background-color: #ffffff
}

.slot-container-empty {
  min-height: 57px;
  border: 1px solid #dddddd;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  cursor: default;
  background-color: #ffffff
}

.slot-caption {
  color: #FFFFFF;
  font-size: small;
  border: none;
}

.unavailability-container {
  border: 1px solid #dddddd;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: default;
  background-color: #ffffff;
  max-height: 18rem;
  overflow-y: auto;
  text-align: left;
}

.roster-container {
  border: 1px solid #dddddd;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 8px;
  text-align: center !important;
  cursor: default;
  background-color: #ffffff;
}

.hamburger-hover:hover {
  cursor: pointer;
  background-color: #eeeeee;
}

.centre {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.page-not-available-outer {
  height: 90vh;
  width: 100%;
}

.page-not-available-middle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border: black 3px solid;
  padding: 4rem 4rem 0 4rem;
  width: fit-content;
  margin: auto;
}

.page-not-available-icon {
  -ms-transform:scale(3);
  -webkit-transform:scale(3);
  transform:scale(3);
  margin-right: 2rem;
}

.page-not-available-inner-bottom {
  text-align: center;
  padding: 1rem 0 3rem;
}

.page-not-available-caption {
  position: relative;
  top: -1rem;
}

.btn-primary {
  background-color: #594ae2;
  border-color: #1861ac;
  color: #fff;
}


.btn-primary:hover {

  background-color: #3a29d7;
  border-color: #1861ac;
  color: #fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.month-button:hover {
  background-color: #dddddd;
}

#roster-table .mud-input-slot {
  color: #ffffff!important;
}

#roster-table div.mud-input-adornment.mud-input-adornment-end.mud-select-input svg {
  color: white;
}

div#roster-table div table{
  table-layout: fixed;
}

div#unavailability-table div table {
  table-layout: fixed;
}

div#slot-table div table {
  table-layout: fixed;
}

.roster-period-dropdown {
  min-width: fit-content;
}

.calendar {
  vertical-align: top !important;
}

td.mud-table-cell.calendar div.mud-tooltip-root.mud-tooltip-inline {
  width: 100%;
}

.date-label {
  text-align: center;
  width: 100%;
  padding: 3px;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  background-color: #DDEBF7;
}

.date-label:hover {
  background-color: #c2d0dd;
}

.date-label-bank-holiday {
  text-align: center;
  width: 100%;
  padding: 3px;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  background-color: #9BC2E6;
}

.date-label-bank-holiday:hover {
  background-color: #91b5d6;
}

.date-label-bst {
  text-align: center;
  width: 100%;
  padding: 3px;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  background-color: #FFD966;
}

  .date-label-bst:hover {
    background-color: #f1cd60;
  }

.date-label-special-event {
  text-align: center;
  width: 100%;
  padding: 3px;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  background-color: #CCFFFF;
}

  .date-label-special-event:hover {
    background-color: #bdeded;
  }

.date-label-evening-flights {
  text-align: center;
  width: 100%;
  padding: 3px;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  background-color: #F8CBAD;
}

  .date-label-evening-flights:hover {
    background-color: #e8bea1;
  }

.date-label-school-day {
  text-align: center;
  width: 100%;
  padding: 3px;
  font-size: 0.9rem !important;
  font-weight: bold !important;
  background-color: #D3B0E8;
}

.date-label-school-day:hover {
   background-color: #cbaadf;
}

.mud-list-item-icon {
  min-width: 1rem !important;
  margin-right: 0.75rem;
}

.icon-small  {
  -ms-transform: scale(0.75);
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
}

.dialog-body-text {
  margin-bottom: 12px !important;
}

.dialog-background {
  backdrop-filter: blur(10px);
}

.my-roster-popover {
  margin-bottom: 0.25rem !important;
}

.login-container{ 
  margin-top:8rem;
}

.landing-item-spacing {
  gap: 64px;
}

.landing-subtitle {
  margin-top:1rem !important;
  margin-bottom: 2rem !important;
}

.landing-card {
  padding-left: 48px !important;
  padding-right: 48px !important;
  padding-top: 48px !important;
  margin-left: 48px !important;
  margin-right: 48px !important;
  margin-top: 4px !important;
}

.landing-footer {
  margin-bottom: 0 !important;
  margin-top: 16px !important;
}

@media only screen and (max-width: 600px) {
  .login-container {
    margin-top: 0;
  }

  .landing-item-spacing {
    gap: 0 !important;
    display: block !important;
  }

  .landing-title {
    font-size: 2rem !important;
  }

  .landing-subtitle {
    font-size: 1.2rem !important;
    margin-bottom: 0 !important;
  }

  .landing-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
  }

  .landing-footer {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
    margin-top: 20px !important;
  }

  .mud-card-content {
    padding: 0 ! important;
  }

 
/*  .item1 {
    grid-area: 1 / span 6;
  }
*/

}