:root[theme='dark'] {
    /*DARK THEME*/
    --background-color: #000;
    --background-color-secondary: #222;
    --background-color-tertiary: #333;
    --background-color-light: #444;
    --text-color: #fff;
    --shadow-color: #fff;

    /*ELIZA FARBEN*/
    --eliza-blue: #2196f3;
    --eliza-orange: #ff9800;
    --eliza-red: #f44336;
    --eliza-violet: #9c27b0;
    --eliza-green: #4caf50;

    background-color: var(--background-color) !important;
    color: var(--text-color);

    & main {
        background-color: var(--background-color);
        color: var(--text-color);
    }

    & pre {
        background-color: var(--background-color) !important;
    }

    & thead {
        background-color: var(--background-color-secondary);
        color: var(--text-color);
    }

    & tbody tr:hover {
        background-color: var(--background-color-tertiary);
    }

    & tbody tr {
        border-bottom: 1px solid var(--text-color);
    }

    ol > li {
        color: var(--text-color);
    }

    .card {
        box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.12), 0 3px 1px -2px rgba(255, 255, 255, 0.10), 0 1px 5px 0 rgba(255, 255, 255, 0.2);
    }

    .collapsible-header {
        border-radius: 0;
    }

    .black-text,
    .light {
        color: var(--text-color) !important;
    }

    .body,
    .left-panel,
    .main,
    .content,
    .tab-content,
    .sidenav .collapsible-header,
    .sidenav.fixed .collapsible-header,
    .sidenav.sidenav-fixed,
    .collapsible-header,
    .dropdown-content {
        background-color: var(--background-color);
        color: var(--text-color);
    }

    .a,
    .card,
    .tab-link,
    .card-panel {
        background-color: var(--background-color-secondary);
        color: var(--text-color);
    }

    .tab-content.current,
    .tab-link.current,
    .sidenav .collapsible-body li a,
    .sidenav.fixed .collapsible-body li a {
        background-color: var(--background-color-tertiary);
        color: var(--text-color);
    }

    /*Sidenav*/

    .sidenav .collapsible-body li.active a,
    .sidenav.fixed .collapsible-body li.active a {
        background-color: var(--eliza-blue);
        color: var(--text-color);
    }

    .sidenav .collapsible-body li a:hover,
    .sidenav.fixed .collapsible-body li a:hover {
        background-color: var(--background-color-secondary);
        color: var(--text-color);
    }

    /*Icons White*/

    .material-icons {
        color: var(--text-color);
    }

    & a[style*="height:22px"] > i.material-icons.left {
        color: var(--text-color);
    }

    .btn-small.green i.material-icons.left {
        color: var(--text-color);
    }

    /*Icons Dark*/

    .left.material-icons {
        color: var(--background-color);
    }

    & i.material-icons.grey.lighten-2 {
        background-color: var(--background-color-tertiary) !important;
    }

    .material-icons.small.black-text {
        color: var(--text-color) !important;
    }

    .badge.black-text {
        color: var(--text-color) !important;
    }

    .material-icons.small.check-icon-green {
        color: var(--eliza-green) !important;
        background-color: var(--text-color) !important;
        border-radius: 50%;
    }

    .material-icons.small.check-icon-blue {
        color: var(--eliza-blue) !important;
        background-color: var(--text-color) !important;
        border-radius: 50%;
    }

    .modal-trigger.black-text {
        color: var(--text-color) !important;
    }

    .modal-trigger.btn.black-text.grey.lighten-2 {
        color: var(--background-color) !important;
    }


    .yellow.lighten-3,
    .yellow.lighten-4,
    .green.lighten-4,
    .red.lighten-4 {
        color: var(--background-color);
    }

    .yellow.lighten-4 .small.light {
        color: var(--background-color-tertiary) !important;
    }

    .grey.lighten-4 .yellow.lighten-4 b {
        color: var(--background-color) !important;
    }

    .card.yellow.lighten-3 .material-icons,
    .card.yellow.lighten-4 .material-icons,
    .card.yellow.lighten-4 .tiny.material-icons,
    .card.red.lighten-4 .tiny.material-icons,
    & tr.orange.lighten-3 .material-icons.tiny, .card.orange.lighten-4 .material-icons.tiny {
        color: var(--background-color-secondary);
    }

    .card.orange.lighten-4 .card-content .right i.material-icons.grey.lighten-2 {
        color: var(--text-color) !important;
    }

    & tr.orange.lighten-3 td {
        color: var(--background-color);
    }

    .card.orange.lighten-4,
    .card.orange.lighten-4 .material-icons {
        color: var(--background-color);
    }

    .card.orange.lighten-4 tr:hover {
        background-color: #f4ead7;
    }

    .grey.lighten-3,
    .grey.lighten-4 {
        background-color: var(--background-color-tertiary) !important;
    }

    .grey.lighten-4 b {
        color: var(--text-color);
    }

    & tr.grey.lighten-4 .right-align {
        color: var(--text-color) !important;
    }

    .color-box.grey.lighten-3 {
        background-color: #eeeeee !important;
    }

    .color-box.grey.lighten-4 {
        background-color: #f5f5f5 !important;
    }

    .btn-small.green .material-icons {
        color: var(--text-color);
    }

    & span.white.small .material-icons {
        color: var(--eliza-blue);
    }

    .card .card-content .tiny.material-icons,
    .card .card-content .small.material-icons,
    .card .card-content .medium.material-icons,
    .card .card-content .large.material-icons {
        color: var(--text-color);
    }

    .card .card-reveal {
        background-color: var(--background-color) !important;
    }

    .card .card-reveal .material-icons {
        color: var(--text-color);
    }


    /*Collapsible*/

    .collapsible-header {
        border-radius: 10px;
        background-color: var(--background-color);
        color: var(--text-color);
    }

    .collapsible {
        border-radius: 10px;
        background-color: var(--background-color);
        color: var(--text-color);
        border-top: 1px solid var(--background-color-secondary);
        border-right: 1px solid var(--background-color-secondary);
        border-left: 1px solid var(--background-color-secondary);
        margin: 0.5rem 0 1rem 0;
    }

    /*Inputs*/

    & input {
        color: var(--text-color);
    }

    & textarea {
        color: var(--text-color);
    }

    .span,
    .help-block {
        color: var(--text-color);
    }

    .checkbox-field label {
        color: var(--text-color) !important;
    }

    /*Dropdowns*/

    .dropdown-content {
        background-color: var(--background-color-secondary);
    }

    .dropdown-content li > span {
        color: var(--text-color);
    }

    & label.active {
        color: var(--text-color) !important;
    }

    /*Rightnav*/

    .rightnav h5 a {
        color: var(--text-color);
    }

    .rightnav ul li:hover {
        background-color: var(--background-color-light);
    }

    .rightnav ul li {
        background-color: var(--background-color-secondary);
    }

    .rightnav ul li a {
        color: var(--text-color);
    }

    .rightnav ul li.active {
        background-color: var(--eliza-blue);
    }

    /*Modal*/

    .modal {
        color: var(--background-color);
    }

    /*Kanban*/

    .column.column-scroller,
    .column {
        background-color: var(--background-color-light);
    }

    .column-title,
    .column-title a {
        color: var(--text-color) !important;
    }

    /*Sidebar*/

    .sidebar {
        background-color: var(--background-color-secondary) !important;
    }

    & li.subprocess {
        background-color: var(--background-color-tertiary);
    }

    li.subprocess.green.lighten-3 {
        background-color: #57a9fb !important;
    }

    & li.subprocess:hover {
        background-color: var(--background-color-light) !important;
    }

    /*Dropdown*/

    .dropdown-content li > a,
    .dropdown-content li > span {
        color: var(--text-color) !important;
    }

    .dropdown-content li > a:hover,
    .dropdown-content li:hover {
        /*background-color: var(--background-color-tertiary);*/
    }

    /*Tuieditor*/

    .toastui-editor-defaultUI-toolbar,
    .toastui-editor-mode-switch,
    .toastui-editor-popup-body,
    .toastui-editor-popup {
        background-color: var(--background-color-secondary) !important;
    }

    .toastui-editor-ww-container,
    .toastui-editor-popup-body li:hover {
        background-color: var(--background-color-tertiary) !important;
        color: var(--text-color) !important;
    }

    .toastui-editor-popup-body label,
    .toastui-editor-table-description {
        color: var(--text-color) !important;
    }

    .toastui-editor-contents *,
    .ProseMirror {
        color: var(--text-color) !important;
    }

    .toastui-editor-toolbar-icons {
        background-color: var(--text-color) !important;
    }

    .toastui-editor-contents pre,
    .toastui-editor-contents code {
        background-color: var(--background-color-secondary) !important;
    }

    .scoped_label span {
        color: var(--background-color) !important;
    }

    /*Spaces Modal*/

    .spaces_modal,
    .spaces_modal .modal-footer {
        background-color: var(--background-color-secondary) !important;
    }

    .spaces_modal table,
    .spaces_modal .modal-content {
        color: var(--text-color) !important;
    }

    .spaces_modal .card-content.yellow.lighten-4 .material-icons {
        color: var(--background-color) !important;
    }

    .streams-main-comment .material-icons,
    .streams-reply-comment .material-icons {
        color: var(--background-color) !important;
    }

    .streams-main-comment .toastui-editor-popup-body {
        color: var(--text-color) !important;
    }

    .card-action .btn.black-text.white, .card-action .btn.black-text.grey, .card-action .modal-trigger.btn.black-text.grey {
        background-color: var(--background-color) !important;
        color: var(--text-color) !important;
        box-shadow: 1px 1px 1px var(--shadow-color) !important;
    }

    .shop-modal, .shop-footer {
        color: var(--text-color) !important;
        background-color: var(--background-color-secondary) !important;
    }

    .shop-footer .btn {
        background-color: var(--background-color) !important;
        color: var(--text-color) !important;
        box-shadow: 1px 1px 1px var(--shadow-color) !important;
        padding: 0 1rem !important;
    }

    .shop-icon, .shop-text {
        color: var(--text-color) !important;
    }

    .btn.test-phase {
        color: var(--background-color) !important;
        box-shadow: 1px 1px 1px var(--shadow-color) !important;
    }

    .passkey.modal-content,
    .passkey.modal {
        background-color: var(--background-color-secondary) !important;
        color: var(--text-color) !important;
    }

    .black.passkey .material-icons,
    .material-icons.passkey {
        color: var(--text-color) !important;
    }


    .sticky-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: var(--background-color-secondary) !important;
    }

    .segno {
        background-color: var(--text-color) !important;
    }

    .djs-context-pad, .djs-direct-editing-parent {
        color: var(--background-color) !important;
    }

    .djs-popup.color-picker, .djs-popup-body, .bjs-container, svg.djs-drag-active {
        background-color: var(--background-color-tertiary) !important;
    }

    .djs-palette, .entry {
        background-color: var(--background-color-secondary) !important;
        color: var(--text-color) !important;
    }

    .djs-palette .entry:hover {
        background-color: #595959 !important;
    }

    body.with-sidebar {
        background-color: var(--background-color-secondary) !important;
    }

    #sessionModal {
        color: var(--text-color) !important;
        background-color: var(--background-color-secondary) !important;
    }

    .white-text {
        color: var(--background-color) !important;
    }

    button[type="submit"].white-text {
        color: var(--text-color) !important;
    }

    .card.yellow.lighten-3.card-content.div.light {
        color: var(--background-color) !important;
    }

    .caret {
        fill: var(--text-color) !important;
    }

    .material-icon-white {
        color: var(--text-color) !important;
    }

    .material-icon-black {
        color: var(--background-color) !important;
    }

    .card-panel.grey.lighten-5.z-depth-1 {
        background-color: var(--background-color-tertiary) !important;
    }

    .toastui-editor-popup-add-link input {
        color: var(--text-color) !important;
    }

    .always-white {
        color: var(--text-color) !important;
    }

    .always-black {
        color: var(--background-color) !important;
    }

    col.yellow.lighten-3 {
        background-color: #fef49d !important;
    }

    col.green.lighten-3 {
        background-color: #a5d5a7 !important;
    }

    .custom-darkmode-table th:hover, .custom-darkmode-table td:hover {
        color: var(--text-color) !important;
    }

    .custom-darkmode-table tr:hover, .custom-darkmode-table tr:hover td, .custom-darkmode-table tr:hover th {
        color: var(--text-color) !important;
    }

    .custom-darkmode-table th, .custom-darkmode-table td {
        color: var(--background-color) !important;
    }

    .custom-darkmode-table th.white-title, .custom-darkmode-table td.white-title {
        color: var(--text-color) !important;
    }


    .user-item {
        padding: 8px 12px;
        margin-bottom: 8px;
        border-radius: 5px;
        font-family: Arial, sans-serif;
        font-size: 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .user-item:hover {
        background-color: var(--background-color);
        transform: scale(1.005);
    }

    .bw-chip {
        background-color: var(--background-color);
        color: var(--text-color);
    }

    .bw-chip:hover {
        background-color: var(--background-color-tertiary);
    }

    .dx-treeview-with-search, .dx-scrollable {
        background-color: var(--background-color-tertiary);
    }

    .card.yellow.lighten-3 tr:hover {
        background-color: var(--eliza-orange);
    }

    .collection .collection-item {
        background-color: var(--background-color-secondary);
    }

    #archiveModal > div.modal-content, #archiveModal > div.modal-footer, #deleteModal > div.modal-content, #deleteModal > div.modal-footer {
        background-color: var(--background-color-secondary);
        color: var(--text-color);
    }

    table.highlight {
        background-color: var(--background-color-tertiary) !important;
    }

    table.highlight tr:hover {
        background-color: var(--background-color) !important;
        border-radius: inherit;
    }

    .ac-results {
        background-color: #dc9318;
    }

    .markdown table td,
    .toastui-editor-contents table td {
        background-color: var(--background-color-secondary) !important;
        color: var(--text-color) !important;
    }

    .markdown table th,
    .toastui-editor-contents table th {
        background-color: var(--background-color-secondary) !important;
        color: var(--text-color) !important;
    }
}