:root {
  /* Utilities */
.btn-white {
    background-color: #fff;
    border-color: #fff;
    color: #333;
}
.btn-white:hover {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

/* Primary */
  --bs-primary: #f38a12;
  --bs-primary-rgb: 243, 138, 18;

  /* info */
  --bs-info: #4077ba;
  --bs-info-rgb: 64, 119, 186;

  /* Links */
  --bs-link-color: #4FA7CF;
  --bs-link-hover-color: #4FA7CF;

  /* Player */
  --plyr-color-main: #f38a12;
}

/* Primary text/bg */

.text-primary {
  color: #f38a12 !important;
}
.bg-primary,
.text-bg-primary {
  background-color: #f38a12 !important;
  color: #fff !important;
}

/* info text/bg */

.text-info {
  color: #4077ba !important;
}
.bg-info,
.text-bg-info {
  background-color: #4077ba !important;
  color: #fff !important;
}

/* Buttons */

.btn-primary {
  background-color: #f38a12 !important;
  border-color: #f38a12 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #c96c0f !important; /* Darker variant */
  border-color: #c96c0f !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: rgba(var(--bs-primary-rgb), 0.5) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.5) !important;
  color: #fff !important;
  opacity: 0.65;
}


.btn-info {
  background-color: #4077ba !important;
  border-color: #4077ba !important;
  color: #fff !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: #305a8c !important; /* Darker variant */
  border-color: #305a8c !important;
}
.btn-info:disabled,
.btn-info.disabled {
  background-color: rgba(var(--bs-info-rgb), 0.5) !important;
  border-color: rgba(var(--bs-info-rgb), 0.5) !important;
  color: #fff !important;
  opacity: 0.65;
}

/* Outline buttons */

.btn-outline-primary {
  color: #f38a12 !important;
  border-color: #f38a12 !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #f38a12 !important;
}


.btn-outline-info {
  color: #4077ba !important;
  border-color: #4077ba !important;
  background-color: transparent !important;
}
.btn-outline-info:hover {
  color: #fff !important;
  background-color: #4077ba !important;
}

/* Nav pills and tabs */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #f38a12 !important;
  color: #fff !important;
}
.nav-tabs .nav-link.active {
  border-color: #f38a12 #f38a12 #fff !important;
  color: #f38a12 !important;
}

/* List group */

.list-group-item.active {
  background-color: #f38a12 !important;
  border-color: #f38a12 !important;
  color: #fff !important;
}

/* Progress bar */

.progress-bar.bg-primary {
  background-color: #f38a12 !important;
}
.progress-bar.bg-info {
  background-color: #4077ba !important;
}

/* Alerts (solid style) */

.alert-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  border-color: #f38a12 !important;
  color: #f38a12 !important;
}
.alert-info {
  background-color: rgba(var(--bs-info-rgb), 0.1) !important;
  border-color: #4077ba !important;
  color: #4077ba !important;
}

/* Badges */

.badge-primary,
.bg-primary {
  background-color: #f38a12 !important;
  color: #fff !important;
}
.badge-info,
.bg-info {
  background-color: #4077ba !important;
  color: #fff !important;
}

/* Form controls focus */

.form-control:focus,
.form-select:focus {
  border-color: #f38a12 !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Outline color for accessibility */

:focus {
  outline-color: #f38a12 !important;
}

/* Custom player color */

.plyr--full-ui input[type="range"]::-webkit-slider-thumb {
  background: #f38a12 !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
  color: #f38a12 !important;
  background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}
.accordion-button::after {
  filter: sepia(100%) hue-rotate(330deg) saturate(500%);
}

/* Pagination */
.page-link {
  color: #f38a12 !important;
}
.page-item.active .page-link {
  background-color: #f38a12 !important;
  border-color: #f38a12 !important;
  color: #fff !important;
}
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Body */
body {
  background-color: #ffffff; /* White Background */
}