.modal {
    display: none; 
    position: fixed; 
    z-index: 1001; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
    /* Added for centering */
    align-items: center;
    justify-content: center;
}

#booking-modal h2 {
    text-align: center;
    font-weight: bold;
    color: yellow;
}

#booking-modal .close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#booking-modal .close-button:hover,
#booking-modal .close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* New Booking Modal Styles from Uiverse.io by bhaveshxrawat */
#booking-modal .modal-content,
#new-employee-modal .modal-content,
#employee-modal .modal-content {
  width: 350px;
  height: auto;
  min-height: 254px;
  padding: 20px;
  background: #ffc0cb;
  position: relative;
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid black;
}

#booking-modal .modal-content h2,
#new-employee-modal .modal-content h2,
#employee-modal .modal-content h2 {
  z-index: 1;
  color: yellow;
  font-size: 1.5em;
  margin-bottom: 15px;
  font-weight: bold;
  text-shadow: none;
}

#booking-modal .modal-content .booking-info,
#new-employee-modal .modal-content #employee-info,
#employee-modal .modal-content #employee-info {
    z-index: 1;
    color: #333;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

#booking-modal .modal-content::before,
#new-employee-modal .modal-content::before,
#employee-modal .modal-content::before {
  content: '';
  position: absolute;
  width: 100px;
  background-image: linear-gradient(180deg, rgb(0, 183, 252), rgb(255, 48, 255));
  height: 200%;
  animation: rotBGimg 3s linear infinite;
  transition: all 0.2s linear;
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#booking-modal .modal-content::after,
#new-employee-modal .modal-content::after,
#employee-modal .modal-content::after {
  content: '';
  position: absolute;
  background: #ffc0cb;
  inset: 5px;
  border-radius: 15px;
  z-index: 0;
}

#booking-modal .close-button,
#new-employee-modal .close-button,
#employee-modal .close {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 2;
    color: #333;
}