:root {
    --primary-color: #0B4F4E;
    --secondary-color: #3C3C3C;
    --accent-color: #E85D26;
    --body-color: #FFFFFF;
    --white-color: #FFFFFF;
    --black-color: #000000;
    --light-grey-color: #CCCCCC;
    --dark-text-color: #343A40;
    --light-text-color: #F8F9FA;
    --bg-image: url("../../img/WhiteGradientBG-landing-min.jpg");
}

html {
    background: var(--bg-image) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    color: var(--body-color);
}

.text-dark {
    color: var(--dark-text-color) !important;
}

.text-light {
    color: var(--light-text-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-highlighted {
    background-color: var(--accent-color);
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--primary-color) !important;
}
.btn-highlighted, .btn-highlighted:hover, .btn-highlighted:active, .btn-highlighted:focus {
    background-color: var(--accent-color);
    color: var(--white-color);
}
.submit-button:disabled, .skip-button:disabled {
    color: var(--white-color);
    background-color: var(--light-grey-color) !important;
    cursor: default;
}
.btn-answer, .btn-answer:hover {
    color: var(--secondary-color);
}
.btn-answer.active {
    background-color: var(--secondary-color);
}

.slider::-webkit-slider-thumb {
    background: var(--primary-color);
}
.slider::-moz-range-thumb {
    background: var(--primary-color);
}

.progress-line {
    background-color: var(--primary-color);
}
.progress-amount {
    color: var(--primary-color);
}

.screen-bar.active {
    background-color: var(--secondary-color);
}
.screen-bar.active.highlight, .correct .screen-bar.active {
    background-color: var(--accent-color);
}

.user-response-highlight {
    color: var(--accent-color);
}
.bg-user-response-highlight {
    background-color: var(--accent-color);
}

#timer-bar, #team-rep-timer-bar {
    background-color: var(--primary-color);
}

input.form-control:not(#participant-points-purchase-modal *), input.form-control:not(#participant-points-purchase-modal *):focus,
textarea.form-control:not(#participant-points-purchase-modal *), textarea.form-control:not(#participant-points-purchase-modal *):focus,
select.form-control:not(#participant-points-purchase-modal *), select.form-control:not(#participant-points-purchase-modal *):focus {
    color: var(--secondary-color);
    background-color: var(--white-color);
    box-shadow: 2px 2px 2px 2px rgba(11, 79, 78, 0.4) !important;
}

.action-bar .submit-button-col {
    background-color: var(--primary-color);
}

.action-bar div {
    padding: 0;
}

.modal {
    color: var(--secondary-color);
}
.modal .modal-header, .modal .modal-footer {
    background-color: var(--secondary-color);
}

.checkbox_label:has(input[type="checkbox"]:checked) {
    background-color: var(--accent-color);
    color: var(--white-color);
}

.radio_label:has(input[type="radio"]:checked) {
    background-color: var(--accent-color);
    color: var(--white-color);
}

/* Custom scrollbar styling for scrollable divs*/
div ::-webkit-scrollbar {
    width: 10px;
}
div *{
    scrollbar-width: auto;
    scrollbar-color: var(--primary-color) var(--secondary-color);
}
div ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px var(--secondary-color);
    border-radius: 10px;
}
div ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}
div ::-webkit-scrollbar-thumb:hover {
    filter: brightness(.75);
}