body.dark {
    font-family: Inter, Roboto, sans-serif;
    background-color: var(--x-zinc-950);
}

    /* navbar */
    body.dark .navbar {
        background-color: var(--x-neutral-800) !important;
    }

    body.dark .btn-dark {
        background-color: var(--x-neutral-800);
        border-color: var(--x-neutral-800);
        color: var(--x-neutral-50);
        border-radius: 3px;
    }

        body.dark .btn-dark:hover, .btn-dark:active, .btn-dark:focus {
            filter: brightness(115%);
        }

    /* title */
    body.dark .mks-title {
        color: var(--x-gray-100);
        background-color: rgba(0,0,0,0);
    }

    /* card */
    body.dark .card {
        color: var(--x-gray-300);
        background-color: var(--x-zinc-800);
        border-color: var(--x-gray-600);
    }

        body.dark .card .card-header {
            color: var(--x-gray-200);
            background-color: var(--x-zinc-600);
        }

    /* buttons */
    body.dark .btn-primary {
        background-color: var(--x-gray-300);
        border-color: var(--x-gray-300);
        color: var(--x-lime-900);
        border-radius: 3px;
    }

        body.dark .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
            filter: brightness(115%);
        }

    body.dark .btn-outline-primary {
        background-color: var(--x-gray-300);
        border-color: var(--x-gray-300);
        color: var(--x-lime-900);
        border-radius: 3px;
    }

        body.dark .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
            filter: brightness(115%);
        }

    body.dark .btn-outline-secondary {
        background-color: var(--x-zinc-700);
        border-color: var(--x-zinc-500);
        color: var(--x-zinc-200);
        border-radius: 3px;
    }

        body.dark .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:focus {
            filter: brightness(115%);
        }

    /* listview */
    body.dark .mks-list-title-row {
        margin-right: 5px;
        margin-left: 5px;
    }

        body.dark .mks-list-title-row .xtitle {
            color: var(--x-gray-300);
        }

        body.dark .mks-list-title-row .xbuttons .fa-filter.x-has-filter {
            color: var(--x-red-900);
        }

    body.dark .mks-srcbox-row {
        margin-right: 5px;
        margin-left: 5px;
    }

        body.dark .mks-srcbox-row #x_src_text {
            font-size: 14px;
        }

    body.dark .mks-search-result .card {
        margin-right: 5px;
        margin-left: 5px;
        padding: 3px;
    }

    body.dark .mks-paging-row {
        margin: 5px;
    }

        body.dark .mks-paging-row .mks-paging-info-text {
            color: var(--x-gray-50);
        }

    /* checkbox - used in (mks-sys-checkbox-main, mks-dialoglist-group) */
    body.dark .x-icon.x-non-editable {
        color: var(--x-gray-600);
    }

    body.dark .x-icon.x-editable {
        color: var(--x-gray-100);
    }

        body.dark .x-icon.x-editable.x-checked {
            color: var(--x-gray-100);
        }

    /* checkbox ??? */
    body.dark .mks-dlg-section1 .x-grp-row {
        color: var(--x-gray-100);
    }

    /* modal */
    body.dark .modal-content {
        background-color: var(--x-zinc-800);
        color: var(--x-gray-50);
        border: 1px solid var(--x-gray-500);
        border-radius: 5px;
    }

        body.dark .modal-content .close {
            color: var(--x-gray-50);
        }

    /* form control */
    body.dark .form-control {
        background-color: var(--x-zinc-950);
        color: var(--x-gray-100);
        border-color: var(--x-zinc-500);
    }

        body.dark .form-control:focus {
            border-color: var(--x-gray-100);
            box-shadow: none;
        }

    /* mks-dialoglist-group */
    body.dark .mks-dialoglist-group .mks-dialoglist-item:first-child {
        border-top: 1px solid var(--x-gray-500);
    }

    body.dark .mks-dialoglist-group .mks-dialoglist-item {
        border-left: 1px solid var(--x-gray-500);
        border-right: 1px solid var(--x-gray-500);
        border-bottom: 1px solid var(--x-gray-500);
    }

        body.dark .mks-dialoglist-group .mks-dialoglist-item:hover {
            background-color: var(--x-gray-700);
        }

    /* */
    body.dark .mks-sys-html-editor {
        background-color: var(--x-gray-200);
    }

        body.dark .mks-sys-html-editor ::selection {
            background-color: var(--x-gray-800);
            color: var(--x-gray-200);
            text-shadow: none;
        }

    /* */
    body.dark .mks-sys-html-viewer {
        background-color: var(--x-gray-200);
    }

        body.dark .mks-sys-html-viewer ::selection {
            background-color: var(--x-gray-800);
            color: var(--x-gray-200);
            text-shadow: none;
        }


    /* selection */
    body.dark ::selection {
        background-color: var(--x-gray-200);
        color: var(--x-gray-800);
        text-shadow: none;
    }

    /* datepicker - day */
    body.dark a.ui-state-default {
        color: var(--x-gray-950);
    }

    body.dark a {
        color: var(--x-gray-300);
    }