:root, :root[data-theme='light'] {
    --bg-primary:    #ffffff; 
    --bg-secondary:  #f8f9fa; 
    --bg-dark:       #f1f3f5; 

    --text-primary:   #1a1d20;
    --text-secondary: #495057;

    --theme-t3: #dee2e6;
    --theme-t2: #e9ecef;
    --theme-t1: #f1f3f5;

    --pandacy: #00db84;
    --pandacy-hover: #00bd71;

    --dropdown-bg: #ffffff;
    --dropdown-shadow: 0 10px 25px rgba(0,0,0,0.1);

    --navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

:root[data-theme='dark'] {
    --bg-primary:    #212529;
    --bg-secondary:  #343a40;
    --bg-dark:       #171a1c;

    --text-primary:   #f8f9fa;
    --text-secondary: #b4bfca;

    --text-black-10: rgba(255, 255, 255, 0.10);
    --text-black-25: rgba(255, 255, 255, 0.25);
    --text-black-50: rgba(255, 255, 255, 0.50);
    --text-black-65: rgba(255, 255, 255, 0.65);
    --text-black-75: rgba(255, 255, 255, 0.75);
    --text-black-95: rgba(255, 255, 255, 0.95);

    --theme-t3: #373b3e;
    --theme-t2: #323539;
    --theme-t1: #2c3034;

    --pandacy: #00db84;
    --pandacy-hover: #00bd71;

    --dropdown-bg:     #2c3034; 
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

    --navbar-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

:root {
    --border: var(--text-primary);
    --scrollbar-bg: var(--bg-dark);
}

.bg-themed {background-color: var(--bg-primary) !important;}
.bg-themed2 {background-color: var(--bg-dark) !important;}
.border-themed {border-color: var(--border) !important;}
.text-themed {color: var(--text-primary) !important;}
.text-themed2 {color: var(--text-secondary) !important;}



/* Scrollbar */
:root[data-theme='dark'] {
    scrollbar-color: var(--bg-secondary) var(--scrollbar-bg);
}

::-webkit-scrollbar {
    background-color: var(--scrollbar-bg);
    /*width: 12px;*/
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg-secondary);
}



/**********************************/
/*            Navbar              */
/**********************************/
/* Navbar */
:root {
    --navbar-link-active: var(--text-black-95);
    --navbar-link-hover: var(--text-black-75);
    --navbar-link: var(--text-black-50);
    --navbar-link-disabled: var(--text-black-25);
    --navbar-toggler-border: var(--text-black-10);

    --dropdown-menu-disabled: var(--text-black-25);
}

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

.navbar-themed .navbar-brand {
    color: var(--navbar-link-active);
}
.navbar-themed .navbar-brand:hover, .navbar-themed .navbar-brand:focus {
    color: var(--navbar-link-active);
}
.navbar-themed .navbar-nav .nav-link {
    color: var(--navbar-link);
}
.navbar-themed .navbar-nav .nav-link:hover, .navbar-themed .navbar-nav .nav-link:focus {
    color: var(--navbar-link-hover);
}
.navbar-themed .navbar-nav .nav-link.disabled {
    color: var(--navbar-link-disabled);
}
.navbar-themed .navbar-nav .show > .nav-link,
.navbar-themed .navbar-nav .nav-link.active {
    color: var(--navbar-link-active);
}
.navbar-themed .navbar-toggler {
    color: var(--navbar-link);
    border-color: var(--navbar-toggler-border);
}
.navbar-themed .navbar-toggler-icon {
    background-image: var(--navbar-toggler-icon);
}
.navbar-themed .navbar-text {
    color: var(--navbar-link);
}
.navbar-themed .navbar-text a,
.navbar-themed .navbar-text a:hover,
.navbar-themed .navbar-text a:focus {
    color: var(--navbar-link-active);
}

/* Dropdown */
.dropdown-menu-themed {
    background-color: var(--dropdown-bg) !important;
    border: 1px solid var(--theme-t2);
    box-shadow: var(--dropdown-shadow);
    border-radius: 12px;
    padding: 8px;
}
.dropdown-menu-themed .dropdown-item {
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 8px 16px;
}
.dropdown-menu-themed .dropdown-item:hover, .dropdown-menu-themed .dropdown-item:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.dropdown-menu-themed .dropdown-item.active, .dropdown-menu-themed .dropdown-item:active {
    color: var(--navbar-link-active);
    background-color: var(--bg-secondary);
    /*background-color: #0d6efd;*/
}
.dropdown-menu-themed .dropdown-divider {
    border-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu-themed .dropdown-item-text {
    color: var(--bg-primary);
}
.dropdown-menu-themed .dropdown-item.disabled, .dropdown-menu-themed .dropdown-item:disabled {
    color: var(--dropdown-menu-disabled);
}
.dropdown-menu-themed .dropdown-header {
    color: var(--dropdown-menu-disabled);
}

/**********************************/
/*            Table               */
/**********************************/
.table-themed {
    --bs-table-bg: var(--bg-primary) !important;
    --bs-table-striped-bg: var(--theme-t1) !important;
    --bs-table-striped-color: var(--text-secondary) !important;
    --bs-table-active-bg: var(--theme-t3) !important;
    --bs-table-active-color: var(--text-primary) !important;
    --bs-table-hover-bg: var(--theme-t2) !important;
    --bs-table-hover-color: var(--text-primary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--theme-t3) !important;
}