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

    --text-primary:   #212529;
    --text-secondary: #343a40;

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

    --theme-t3: #dfe0e1;
    --theme-t2: #e5e6e7;
    --theme-t1: #ecedee;

    --ilink-n: #dfe0e1;
    --ilink-h: #b4bfca;

    --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;

    --ilink-n: #343a40;
    --ilink-h: #171a1c;

    --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 {
    color: var(--bg-primary);
    background-color: var(--bg-secondary) !important;
    border-color: var(--text-secondary);
}
.dropdown-menu-themed .dropdown-item {
    color: var(--navbar-link);
}
.dropdown-menu-themed .dropdown-item:hover, .dropdown-menu-themed .dropdown-item:focus {
    color: var(--navbar-link-active);
    background-color: var(--bg-primary);
}
.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);
}

/* Index Linktree */
.iheader .icon, .imain .icon {
    color: var(--text-primary);
}

.imain a {
    background-color: var(--ilink-n);
    color: var(--text-primary);
}

.imain a:hover {
    background-color: var(--ilink-h);
    color: var(--text-secondary);
}

/**********************************/
/*            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;
}