/* Fade elements */
.fade-in-first {
	opacity: 0;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

.fade-in-second {
	opacity: 0;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Navbar overlap fix */
body {
    padding-top: 100px;
}


.user-circle {
    display: inline-block;
    background-color: #45d8e8;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    line-height: 30px; /* set to same size as width, height */
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

.form-control {
    border-color: #aaaaaa
}

.form-select {
    border-color: #aaaaaa
}

.form-check-input {
    border-color: #aaaaaa
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-day-nobooking {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  background: white;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.calendar-day-unstaffed {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  background: red;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.calendar-day-staffed {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  background: green;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.calendar-blank {
  aspect-ratio: 1 / 1;
}