/* Bootstrap's fixed utility and focus shadows follow the site's shadow setting. */
:root {
  --bs-box-shadow: var(--box-shadow);
  --bs-box-shadow-sm: var(--box-shadow);
  --bs-box-shadow-lg: var(--box-shadow);
  --bs-btn-active-shadow: var(--box-shadow);
}

.shadow,
.shadow-sm,
.shadow-lg,
.toast {
  box-shadow: var(--box-shadow) !important;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus,
.form-check-input:focus,
.custom-control-input:focus ~ .custom-control-label::before,
.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb,
.btn:focus,
.btn-check:focus + .btn,
.nav-link:focus-visible,
.navbar-toggler:focus,
.accordion-button:focus,
.page-link:focus,
.btn-close:focus,
.focus-ring:focus {
  box-shadow: var(--box-shadow) !important;
}

:where(.form-control, .form-select, .custom-select, .form-check-input,
  .btn, .nav-link, .navbar-toggler, .accordion-button, .page-link,
  .btn-close):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
  text-shadow: 0 -1px 0 color-mix(in srgb, var(--color-title) 35%, transparent);
}