html.grayscale { filter: grayscale(1); }
html.invert { filter: invert(1); }

html[class*="dark"] {
    --color-text-primary: #eeeeee;
    --color-text-white: #000000;
    --color-text-black: #ffffff;
    --color-text-dimmed: #888888;

    /* --color-background-primary: #eeeeee; */
    --color-background-secondary: #1E1E2D;
    --color-background-white: #111111;
    --color-background-black: #dddddd;

    --color-utility-border: #444444;

    --color-border-primary: #eeeeee;
}

html[class*="dark"] .custom-login-button.primary,
html[class*="dark"] .custom-href.primary,
html[class*="dark"] .custom-button.primary,
html[class*="dark"] .fakturca-button.primary {
    background-color: #eee;
}

html[class*="dark"] .custom-icon {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(115deg) brightness(105%) contrast(104%) !important;
}

html[class*="dark"] .custom-button:has(.custom-icon):hover .custom-icon {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(115deg) brightness(105%) contrast(104%) !important;
}

html[class*="dark"] .custom-icon.white {
    filter: invert(0%) sepia(100%) saturate(11%) hue-rotate(201deg) brightness(103%) contrast(104%) !important;
}

html[class*="dark"] .custom-icon.close-red {
    filter: none !important;
}

html[class*="dark"] .sidebar-left-content .sidebar-circle {
    background-color: #0000007A !important;
}

html[class*="dark"] .dropdown-item:focus,
html[class*="dark"] .dropdown-item:hover {
    background-color: #eee !important;
    color: #000000 !important;
}

html[class*="dark"] .bg-white {
    background-color: #28283b !important;
    color: #fff !important;
}

html[class*="dark"] .sidebar-left-content ul.sidebar-menu li a.active,
html[class*="dark"] .sidebar-left-content ul.sidebar-menu li a:hover {
    color: #fff !important;
}

html[class*="dark"] .swal2-popup {
    background: #000 !important;
}

html[class*="dark"] .swal2-styled.swal2-confirm {
    background-color: #eee !important;
    color: #000 !important;
}

html[class*="dark"] .swal2-popup {
    color: #aaa;
}

html[class*="dark"] .btn-close,
html[class*="dark"] .tagsinput-remove {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(115deg) brightness(105%) contrast(104%) !important;
}

html[class*="dark"] .select-search-dropdown-item.selected {
    background-color: #aaa !important;
}

html[class*="dark"] .universal-access-content button {
    color: #fff !important;
}

html[class*="dark"] .universal-access-content button:hover,
html[class*="dark"] .universal-access-content button.active {
    color: #000 !important;
}