body.light {
    font-family: Inter, Roboto, sans-serif;
    background-color: var(--x-gray-200);
}

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

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

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

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

    /* card */
    body.light .card {
        color: var(--x-gray-700);
        background-color: #fff;
    }

        body.light .card .card-header {
            background-color: var(--x-slate-700);
            color: var(--x-gray-200);
        }

    /* buttons */
    body.light .btn-primary {
        background-color: var(--x-slate-700);
        border-color: var(--x-slate-700);
        color: var(--x-gray-200);
        border-radius: 3px;
    }

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

    body.light .btn-outline-primary {
        background-color: var(--x-slate-700);
        border-color: var(--x-slate-700);
        color: var(--x-gray-200);
        border-radius: 3px;
    }

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

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

        body.light .mks-list-title-row .xtitle {
            color: var(--x-slate-700);
        }

        body.light .mks-list-title-row .xbuttons .fa-filter.x-has-filter {
            color: var(--x-yellow-300);
        }

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

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

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

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

        body.light .mks-paging-row .mks-paging-info-text {
            color: black;
        }

    /* checkbox - used in (mks-sys-checkbox-main, mks-dialoglist-group) */
    body.light .x-icon.x-non-editable {
        color: #888;
    }

    body.light .x-icon.x-editable {
        color: #000;
    }

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

    /* modal */
    body.light .modal-content {
        border-radius: 5px;
    }

        body.light .modal-content .close {
        }

    /* form control */
    body.light .form-control {
    }

        body.light .form-control:focus {
            box-shadow: none;
        }

    /* */
    body.light .mks-sys-html-editor {
    }

        body.light .mks-sys-html-editor ::selection {
            text-shadow: none;
        }

    /* */
    body.light .mks-sys-html-viewer {
    }

        body.light .mks-sys-html-viewer ::selection {
            text-shadow: none;
        }

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

    /* others */
    body.light .form-control:focus {
        border-color: var(--x-gray-700);
        box-shadow: none;
    }

    body.light a {
        color: var(--x-gray-700);
    }