:root {
  --bs-primary: #5290a8;
  --bs-primary-rgb: 82, 144, 168;
  --bs-primary-dark10: #467a8f;
  --bs-primary-dark20: #396475;
  --bs-primary-light20: #629bb2;
}

.navbar {
  --bs-navbar-padding-y: 0;
}
.navbar-text {
  color: #fff;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-dark10);
  --bs-btn-hover-border-color: var(--bs-primary-dark10);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-primary-dark20);
  --bs-btn-active-border-color: var(--bs-primary-dark20);
  --bs-btn-disabled-bg: var(--bs-primary-light20);
  --bs-btn-disabled-border-color: var(--bs-primary-light20);
}

.page-link {
  --bs-pagination-color: var(--bs-primary-dark20);
  --bs-pagination-hover-color: var(--bs-primary-dark10);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.input-group > .form-select {
  flex: none;
  width: auto;
}

.modal.fade .modal-dialog {
  transition: transform 0.15s ease-out;
}
.fade {
  transition: opacity 0.5 linear;
}

.air-datepicker {
  --adp-day-name-color: var(--bs-primary);
  --adp-cell-background-color-selected: var(--bs-primary);
  --adp-cell-background-color-selected-hover: var(--bs-primary-dark10);
}
.air-datepicker.-inline- {
  margin: auto;
}

.dragOver {
  border-color: var(--bs-primary);
}

.dropdown-highlight {
  background-color: var(--bs-dropdown-link-hover-bg);
}

.form-control-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-control-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.fc .fc-timegrid-slot-label {
  vertical-align: top;
}

.fc-event {
  transition: all 0.3s;
}
.fc-event-selected {
  outline: 1px var(--bs-secondary) solid;
  /* transform: scale(1.1); */
  z-index: 99 !important; /* TODO: z index not working */
}

@media (max-width: 992px) {
  #infoBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    box-shadow: var(--bs-box-shadow-lg);
  }
}

.ql-snow .ql-picker.ql-header {
  width: 110px;
}

.ql-container,
.ql-snow .ql-picker.ql-header .ql-picker-options {
  font-size: 1em;
}

.ql-bar {
  border: 1px solid #ccc;
  border-top: 0;
  padding: 8px;
}