:root {
    --row-selection: #775253;
    --error-message-background: #f8d7da;
    --error-message: #842029;
    --main-navbar-background: #775253;
    --links: #3c8dbc;
    --links-hover: #19384b;
    --form-range-bg: #000000;
    --pagination-background: #775253;
    --pagination-border-color: #122b40;
    --button-primary: #1a2226;
    --button-primary-font: #ffffff;
    --button-secondary: #775253;
    --button-secondary-font: #ffffff;
    --label: #204d74;
    --label-font: #ffffff;
    --brand-container: #ffffff;

    --brand-container-text: #000000;
    --brand-text: #000000;

    /*--brand-container-text: rgba(255,255,255,.8);
    --brand-text: rgba(255,255,255,.8);*/
    --sidebar-link-active: #ffffff;
    --main-header-background: #ffffff;
    --main-header-font: #000000;
    --main-header-link: #000000;
    --main-header-login-background: #000000;
    --main-header-login-text: #ffffff;
    --tablink: #0a0e86;
    --page-item-active-link-background: #351431;
    --page-item-active-link: #ffffff;
    --page-item-link-background: #ffffff;
    --page-item-link: #351431;
    --footer-link: #775253;
    --footer-link-hover: #775253;
    --card-header: #ffffff;
    --card-header-background: #1a2226;
    --thead-background: #000;
    --thead-font: #ffffff;
    --thead-font-link: #ffffff;
    --leftnav-dropdown-background: #394247;
    --leftnav-background: #1a2226;
    --leftnav-header-background: unset;
    --leftnav-header: var(--lte-sidebar-dark-header-color);
    --image-info-background: #000000;
    --image-info: #ffffff;
    --plot-items: #D1D3C4;
    --axis-color: #F5F5DC;
    --powerpoint-sortable: #f6f7d5;
    --highlight-warn-background: #fff3cd;
    --highlight-warn: #664d03;
    --main-image: url(../ceres/img/ceres.png);
}

/* Ceres Specific */

:root {
    --ceres-gray: #351431;
    --ceres-white: #ffffff;
}

#id_layouts_default_div_header {
    clear: both;
    top: 0;
    left: 0;
    height: 150px;
    padding: 0;
    background: #f3f4f6 var(--main-image) no-repeat center;
}

.highlightLetters {
    color: var(--ceres-gray);
    font-size: 50px;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: #fff;
    -webkit-text-fill-color: var(--ceres-gray);
    font-family: Impact, Charcoal, sans-serif;
}

.skin.main-header {
    background-image: url("../ceresc/img/lines.png");
}

#ceresBg {
    font-family: 'Jost', sans-serif;
    color: var(--ceres-gray);
}

#mainTitleBg {
    padding: 30px 0 0;
}

#mainTitle {
    font-family: 'Raleway', Arial, sans-serif;
    text-align: left;
    color: var(--ceres-white);
    font-size: 3em;
    text-shadow: 0 4px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1);
}

#subtext {
    font-size: 2vw;
    color: var(--ceres-white);
    font-family: 'Jost', sans-serif;
    border-top: 5px solid var(--ceres-gray);
    line-height: 1;
    text-align: left;
}
/******/
#id_layouts_default_div_header {
    clear: both;
    top: 0px;
    left: 0px;
    height: 150px;
    padding: 0px 0px 0px 0px;
    background: #000 url(../img/ceres.png) no-repeat;
    background-position: center;
}

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&display=swap');

#id_layouts_default_div_header {
    clear: both;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    padding: 0;
    background-size: 100% 100%;
    background-image: var(--main-image);
}

.ui-selecting, .ui-selected {
    background: var(--row-selection);
}

.error-message {
    color: var(--error-message);
    background-color: var(--error-message-background);
}

.main-header .navbar {
    background-color: var(--main-navbar-background);
}

a {
    color: var(--links);
}

a:hover,
a:active,
a:focus {
    outline: none;
    text-decoration: none;
    color: var(--links-hover);
}

thead {
    background-color: var(--thead-background);
    color: var(--thead-font);
    position: sticky;
    top: 0;
    z-index: 999;
}

thead a {
    color: var(--thead-font-link);
}

thead a:hover {
    color: var(--thead-font-link);
}

/* RANGE BUTTON STYLES */
input.rangeColor::-webkit-slider-thumb,
input.rangeColor::-moz-range-thumb,
input.rangeColor::-ms-thumb,
input.rangeColor::-webkit-slider-thumb:active,
.rangeColor .custom-range:focus::-webkit-slider-thumb,
.rangeColor .custom-range:focus::-moz-range-thumb {
    background-color: var(--form-range-bg);
}


#site-Pagination > .pagination > .active > a,
#site-Pagination > .pagination > .active > span,
#site-Pagination > .pagination > .active > a:hover,
#site-Pagination > .pagination > .active > span:hover,
#site-Pagination > .pagination > .active > a:focus,
#site-Pagination > .pagination > .active > span:focus {
    background-color: var(--pagination-background);
    border-color: var(--pagination-border-color);
}

/**************************
 * Site Specific Buttons
 **************************/
/* Button Styles */
.btn-site, .btn-site:hover,
.bg-site, .bg-site:hover {
    background-color: var(--button-primary) !important;
    color: var(--button-primary-font) !important;
}

.btn-site:active, .btn-site.active,
.bg-site:active, .bg-site.active,
.show > .btn-site.dropdown-toggle,
.show > .bg-site.dropdown-toggle {
    background-color: var(--button-primary) !important;
    color: var(--button-primary-font) !important;
}

.btn_secondary-site, .btn_secondary-site:hover,
.bg_secondary-site, .bg_secondary-site:hover {
    background-color: var(--button-secondary) !important;
    color: var(--button-secondary-font) !important;
}

.btn_secondary-site:active, .btn_secondary-site.active,
.bg_secondary-site:active, .bg_secondary-site.active,
.show > .btn_secondary-site.dropdown-toggle,
.show > .bg_secondary-site.dropdown-toggle {
    background-color: var(--button-secondary) !important;
    color: var(--button-secondary-font) !important;
}

/* Default appearance (outline button) */
.btn-outline-site {
    color: var(--button-primary) !important; /* Readable text color */
    background-color: transparent !important; /* Transparent background */
    border: 1px solid var(--button-primary) !important; /* Outline border */
}

/* Hover state (same as selected state) */
.btn-outline-site:hover {
    color: var(--button-primary-font) !important; /* Font color for filled state */
    background-color: var(--button-primary) !important;
    border-color: var(--button-primary) !important;
}

/* Selected state (when associated input is checked) */
.btn-check:checked + .btn-outline-site {
    color: var(--button-primary-font) !important; /* Font color for filled state */
    background-color: var(--button-primary) !important; /* Filled background */
    border-color: var(--button-primary) !important; /* Filled border */
}

/* Focus state (outline with shadow for accessibility) */
.btn-outline-site:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--button-primary-rgb), 0.5) !important; /* Focus ring */
}

/* File Selector Button */
input[type=file]::file-selector-button {
    background-color: var(--button-primary) !important;
    color: var(--button-primary-font) !important;
}

/* Label Styles */
.label-site {
    background-color: var(--label);
    color: var(--label-font);
}

/**END SITE SPECIFIC BUTTONS**/

/*
 * Skin:
 * ------------
 */

.card-header {
    color: var(--card-header);
    background-color: var(--card-header-background);
    background-repeat: repeat;
}

.brand-container {
    background-color: var(--brand-container);
    font-weight: bold;
}

.brand-text {
    color: var(--brand-text);
}

.sidebar-bg-dark .brand-container .pushmenu {
    color: var(--brand-container-text);
}

.brand-container .pushmenu:hover {
    color: var(--brand-container-text);
}

.sidebar-bg-dark .nav-sidebar > .nav-item.menu-open > .nav-link {
    color: var(--sidebar-link-active);
}

.skin .main-header {
    color: var(--main-header-font);
    background-color: var(--main-header-background);
    background-repeat: repeat;
}

.skin .main-header .nav-link {
    color: var(--main-header-link);
}

.skin .main-header li.user-header {
    color: var(--main-header-login-text);
    background-color: var(--main-header-login-background);
    background-repeat: repeat;
}

.tablink {
    color: var(--tablink);
}

.page-item.active .page-link {
    color: var(--page-item-active-link);
    background-color: var(--page-item-active-link-background);
    border-color: var(--page-item-active-link-background);
}

.page-link {
    color: var(--page-item-link);
    background-color: var(--page-item-link-background);
}

.main-footer a {
    color: var(--footer-link) !important;
    text-decoration: none;
}

.main-footer a:hover,
.main-footer a:active,
.main-footer a:focus {
    outline: none;
    color: var(--footer-link-hover) !important;
}

.dropdown_bg {
    background-color: var(--leftnav-dropdown-background);
}

.sidebar-bg-dark {
    background-color: var(--leftnav-background);
}

.sidebar-bg-dark .nav-header {
    color: var(--leftnav-header);
    background: var(--leftnav-header-background);
}

.imageInfo {
    font-weight: bold;
    text-align: center;
    width: 400px;
    padding: 0;
    background-color: var(--image-info-background);
    color: var(--image-info);
}

.plotItemsColor {
    background-color: var(--plot-items);
}

.axisColor {
    background-color: var(--axis-color);
}

.ppSortableStyle {
    min-height: 275px;
    background-color: var(--powerpoint-sortable);
}

.highlight_warn {
    color: var(--highlight-warn);
    background-color: var(--highlight-warn-background);
}

.treeselect-list__item--checked .treeselect-list__item-checkbox-container, .treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container {
    background-color: var(--checkbox-color) !important;
}

div:where(.swal2-container).swal2-backdrop-show {
    backdrop-filter: blur(2px);
}

.titleColor {
    color: #00f;
}

.main-header .htmx-indicator {
    color: var(--main-header-link);
}

input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--checkbox-color);
}

.checkboxColor {
    color: var(--checkbox-color);
}

.form-check-input:checked {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
}

/* Styling for radio buttons and checkboxes */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--checkbox-color); /* Unified color for radio/checkbox accent */
}

.checkboxColor {
    color: var(--checkbox-color);
}

/* Checked state for checkboxes */
.form-check-input:checked {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
}

/* Slider Thumb Styling */
.rangeColor::-webkit-slider-thumb {
    background: var(--checkbox-color); /* Thumb color for Webkit-based browsers */
    border: 2px solid var(--checkbox-color); /* Border for better visibility */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

.rangeColor::-moz-range-thumb {
    background: var(--checkbox-color); /* Thumb color for Firefox */
    border: 2px solid var(--checkbox-color);
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

.rangeColor::-ms-thumb {
    background: var(--checkbox-color); /* Thumb color for IE/Edge */
    border: 2px solid var(--checkbox-color);
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

.rangeColor:focus::-webkit-slider-thumb,
.rangeColor:focus::-moz-range-thumb,
.rangeColor:focus::-ms-thumb {
    outline: none; /* Remove outline when focused */
    box-shadow: 0 0 5px var(--checkbox-color); /* Add a shadow on focus for accessibility */
}