:root {
    --ukceh-charcoal:#333333;
    --ukceh-teal:#0483a4;
    --ukceh-grey:#eaefec;
    --ukceh-orange:#f49633;
    --ukceh-blue:#2f7ece;
    --ukceh-green:#4da43a;
}

body:not(.dark-mode) {
    color: var(--ukceh-charcoal);
}

.btn-primary {
    background-color: var(--ukceh-teal);
    border-color: var(--ukceh-grey);
    color: var(--ukceh-grey);
}

.btn-primary:hover {
    background-color: var(--ukceh-grey) !important;
    border-color:  var(--ukceh-grey);
    color: var(--ukceh-charcoal);
}

.btn-primary:disabled {
    background-color: var(--ukceh-grey) !important;
    border-color: white;
    color: var(--ukceh-charcoal);
    opacity: 1.0 !important;
}

.btn-primary:active {
    box-shadow: 0px 0px 0px 5px var(--ukceh-grey) !important;
}

.btn-primary:focus {
    background-color: var(--ukceh-teal) !important;
    border-color: var(--ukceh-grey);
    box-shadow: 0px 0px 0px 5px var(--ukceh-grey);
}

.btn-primary:visited {
  background-color: var(--ukceh-teal);
  border-color: var(--ukceh-grey);
}

/* On very small screens, make buttons full width */
/* @media(max-width: 575.98px) { */
/* @media(max-width: 991.98px) { */
    /* button.full-width { */
    button {
        width: 100% !important;
        min-width: 0px;
    }
/* } */

/* On small screens, make buttons half width such that 2 buttons are full width */
/* @media(max-width: 991.98px) and (min-width: 576px) {
    button.half-width {
        width: 49.5% !important;
        min-width: 0px;
    }
} */

/* On medium screens, make buttons quarter width such that 4 buttons are full width */
@media(max-width: 1199.98px) and (min-width: 992px) {
    button.quarter-width {
        width: 24.6% !important;
        min-width: 0px;
    }
}

.form-control {
    font-family: monospace;
    font-size: smaller;
}

.form-control:disabled {
    background-color: var(--ukceh-grey);
}

.alert-danger {
    border: var(--ukceh-charcoal);
    background-color: var(--ukceh-orange);
    color: var(--ukceh-charcoal);
}

.card-header {
    background-color: var(--ukceh-grey) !important;
    color: var(--ukceh-charcoal);
}

.text-danger {
    color: var(--ukceh-orange) !important;
}

.form-check-label {
    color: var(--ukceh-charcoal);
}

.form-check-input {
    background-color: var(--ukceh-grey) !important; 
    /* border-color: var(--ukceh-charcoal); */
    border-color: white !important; 
    color: var(--ukceh-charcoal); 
}

.form-check-input:focus {
    box-shadow: 0px 0px 0px 5px var(--ukceh-grey);
}

.form-check-input:focus {
    box-shadow: 0px 0px 0px 5px var(--ukceh-grey);
}

.form-control:focus {
    box-shadow: 0px 0px 0px 5px var(--ukceh-grey) !important;
    border-color: var(--ukceh-grey);
}

.form-select:focus {
    box-shadow: 0px 0px 0px 5px var(--ukceh-grey) !important;
    border-color: var(--ukceh-grey);
}

.form-check-input:checked {
    background-color: var(--ukceh-teal) !important;
    border-color: var(--ukceh-grey) !important; 
}

input:focus {
    box-shadow: 0px 0px 10px var(--ukceh-grey);
}

.dark-mode {
    color: var(--ukceh-grey);
    background-color: var(--ukceh-charcoal);
}

.dark-mode .list-group-item {
    color: var(--ukceh-grey);
    background-color: var(--ukceh-charcoal);
}

.dark-mode .form-control {
    color: var(--ukceh-grey);
    background-color: var(--ukceh-charcoal);
}

.dark-mode .form-select {
    color: var(--ukceh-grey);
    background-color: var(--ukceh-charcoal);
}

.dark-mode .btn-primary {
    border-color: var(--ukceh-charcoal);
}

.dark-mode .form-check-label {
    color: var(--ukceh-grey);
}

.text-link {
    color: var(--ukceh-teal) !important;
    overflow-wrap: break-word;
}

.form-range::-webkit-slider-thumb {
    background: var(--ukceh-teal);
  }
  
.form-range::-moz-range-thumb {
    background: var(--ukceh-teal);
}

.form-range::-ms-thumb {
    background: var(--ukceh-teal);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: var(--ukceh-grey);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: var(--ukceh-grey);
}

.form-range:focus::-ms-thumb {
    box-shadow: var(--ukceh-grey);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--ukceh-grey);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--ukceh-grey);
}

.form-range::-ms-thumb:active {
    background-color: var(--ukceh-grey);
}

.form-range:focus {
    box-shadow: none !important;
}

.form-range:focus {
    box-shadow: none !important;
}

.form-range:focus {
    box-shadow: none !important;
}