:root {
    --primary-color: #ECC44B;
    --secondary-color: #F5B048;
    --dark-bg: #000;
    --dark-text: #1f2d3d;
    --light-border: transparent;
    --box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

/* Buttons */
.btn-primary,
.btn-success,
.btn-info {
    border-radius: 8px;
    border: 1px solid var(--light-border);
    background: linear-gradient(91deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    box-shadow: var(--box-shadow);
}

/* Dark Mode Buttons */
.dark-mode .btn-success,
.dark-mode .btn-info {
    background: linear-gradient(91deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-color: var(--light-border);
}

/* Sidebar Active Links */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
}

/* Accent Color Elements */
.accent-primary .btn-link,
.accent-primary .nav-tabs .nav-link,
.accent-primary a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn),
.accent-primary .btn-link:hover,
.accent-primary .nav-tabs .nav-link:hover,
.accent-primary a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn):hover {
    color: var(--primary-color);
}

/* Dark Mode Navbar */
.dark-mode .navbar-white {
    background-color: #454d55 !important;
    color: var(--dark-text);
}

/* Dark Mode Alerts */
.dark-mode .alert-success {
    color: #fff;
    background-color: var(--dark-text) !important;
    border-color: var(--dark-text);
}

/* Login Page Styling */
.login-logo img {
    height: 190px;
    width: auto;
    object-fit: contain;
}

.jazzmin-login-page,
body:not(.layout-fixed) .main-sidebar {
    background-color: var(--dark-bg) !important;
}

/* Text Field Borders */

.vTextField:focus, 
.vLargeTextField:focus, 
.vURLField:focus, 
.vIntegerField:focus, 
.vBigIntegerField:focus, 
.vForeignKeyRawIdAdminField:focus, 
.vDateField:focus, 
.vTimeField:focus, 
input[type="number"]:focus, 
input[type="text"]:focus,
.vTextField:active, 
.vLargeTextField:active, 
.vURLField:active, 
.vIntegerField:active, 
.vBigIntegerField:active, 
.vForeignKeyRawIdAdminField:active, 
.vDateField:active, 
.vTimeField:active, 
input[type="number"]:active, 
input[type="text"]:active,
.vTextField:hover, 
.vLargeTextField:hover, 
.vURLField:hover, 
.vIntegerField:hover, 
.vBigIntegerField:hover, 
.vForeignKeyRawIdAdminField:hover, 
.vDateField:hover, 
.vTimeField:hover, 
input[type="number"]:hover, 
input[type="text"]:hover,
.vTextField:focus-visible, 
.vLargeTextField:focus-visible, 
.vURLField:focus-visible, 
.vIntegerField:focus-visible, 
.vBigIntegerField:focus-visible, 
.vForeignKeyRawIdAdminField:focus-visible, 
.vDateField:focus-visible, 
.vTimeField:focus-visible, 
input[type="number"]:focus-visible, 
input[type="text"]:focus-visible {
    border-color: var(--primary-color) !important;
    outline-color: var(--primary-color) !important;
}



input[type="checkbox"] {
    border-radius: 4px; /* Adjust to desired rounding */
}

input[type="checkbox"]:checked {
    accent-color: var(--primary-color) !important; /* Change to desired color when active */
    border-radius: 4px; /* Ensure border radius applies when checked */
}
.dropdown-item:focus, .dropdown-item:hover{
    background-color: var(--primary-color) !important;
}
.btn-success.focus, .btn-success:focus, .btn-success:hover, .btn-info:hover, .btn-info:focus,
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle{
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow:unset !important;
}

button:hover, 
input:hover, 
optgroup:hover, 
select:hover, 
textarea:hover,
button:focus, 
input:focus, 
optgroup:focus, 
select:focus, 
textarea:focus,
button:active, 
input:active, 
optgroup:active, 
select:active, 
textarea:active,
button:focus-visible, 
input:focus-visible, 
optgroup:focus-visible, 
select:focus-visible, 
textarea:focus-visible {
    border-color: var(--primary-color) !important;
    outline-color: var(--primary-color) !important;
}

.d-sm-inline {
    display: none !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .logo-xl, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel>.info, .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text, .sidebar-mini.sidebar-collapse .main-sidebar:hover .logo-xl, .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p, .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel>.info{
    white-space: normal !important;
}

.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p {
    width: 0;
    white-space: normal !important;
}

.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
}

#changelist-search .form-group{

    gap: 10px !important;
}

.selector-chosen h2{
    background: var(--primary-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: var(--primary-color) !important;
    padding-left: 20px !important;
}

.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear{
    display: none;
}

select2-selection select2-selection--single{
    max-width: 50% !important;
}