html[data-ui-theme="modern_dense_pro"] {
    --ui-page-bg: #f4f6f8;
    --ui-panel-bg: #ffffff;
    --ui-topbar-bg: #273142;
    --ui-sidebar-bg: #202938;
    --ui-border-color: #d9dee7;
    --ui-border-soft: #e8ebf0;
    --ui-text-color: #1f2937;
    --ui-muted-color: #667085;
    --ui-accent-color: #2f6fed;
    --ui-hover-color: #f3f7fc;
    --ui-card-radius: 7px;
    --ui-button-radius: 6px;
    --ui-topbar-height: 43px;
    --ui-tabs-height: 34px;
    --ui-sidebar-width: 176px;
    --ui-sidebar-collapsed-width: 56px;
    --ui-page-padding: 11px;
    --ui-section-gap: 9px;
    --ui-table-header-height: 35px;
    --ui-table-row-height: 22px;
    --ui-input-height: 31px;
    --ui-button-height: 31px;
    --ui-small-button-height: 27px;
    --ui-modal-title-height: 42px;
    --ui-modal-footer-height: 46px;
}

html[data-ui-theme="modern_dense_pro"] body {
    background: var(--ui-page-bg);
    color: var(--ui-text-color);
}

html[data-ui-theme="modern_dense_pro"] .main-header .navbar,
html[data-ui-theme="modern_dense_pro"] .main-header .logo {
    min-height: var(--ui-topbar-height);
    background: var(--ui-topbar-bg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-ui-theme="modern_dense_pro"] .main-sidebar {
    background: var(--ui-sidebar-bg);
    box-shadow: 1px 0 0 rgba(15, 23, 42, .08);
}

html[data-ui-theme="modern_dense_pro"] .sidebar-menu > li > a {
    border-left: 3px solid transparent;
}

html[data-ui-theme="modern_dense_pro"] .sidebar-menu > li.active > a,
html[data-ui-theme="modern_dense_pro"] .sidebar-menu > li:hover > a {
    border-left-color: var(--ui-accent-color);
    background: rgba(255, 255, 255, .07);
}

html[data-ui-theme="modern_dense_pro"] .content-wrapper,
html[data-ui-theme="modern_dense_pro"] .right-side {
    background: var(--ui-page-bg);
}

html[data-ui-theme="modern_dense_pro"] .panel,
html[data-ui-theme="modern_dense_pro"] .box,
html[data-ui-theme="modern_dense_pro"] .thumbnail {
    border: 1px solid var(--ui-border-color);
    border-radius: var(--ui-card-radius);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}

html[data-ui-theme="modern_dense_pro"] .panel-heading,
html[data-ui-theme="modern_dense_pro"] .box-header {
    border-bottom-color: var(--ui-border-soft);
}

html[data-ui-theme="modern_dense_pro"] .btn-primary {
    border-color: var(--ui-accent-color);
    background: var(--ui-accent-color);
}

html[data-ui-theme="modern_dense_pro"] .form-control:focus,
html[data-ui-theme="modern_dense_pro"] .select2-container-active .select2-choice {
    border-color: color-mix(in srgb, var(--ui-accent-color) 70%, #ffffff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent-color) 12%, transparent);
}

html[data-ui-theme="modern_dense_pro"] .bootstrap-table .table > thead > tr > th,
html[data-ui-theme="modern_dense_pro"] .fixed-table-container thead th {
    border-color: var(--ui-border-color);
    background: #f7f8fa;
    color: #344054;
}

html[data-ui-theme="modern_dense_pro"] .bootstrap-table .table > tbody > tr > td,
html[data-ui-theme="modern_dense_pro"] .fixed-table-container tbody td {
    border-color: var(--ui-border-soft);
}

html[data-ui-theme="modern_dense_pro"] .layui-layer,
html[data-ui-theme="modern_dense_pro"] .modal-content {
    border: 1px solid var(--ui-border-color);
    border-radius: var(--ui-card-radius);
    box-shadow: 0 16px 36px rgba(16, 24, 40, .14);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    html[data-ui-theme="modern_dense_pro"] .form-control:focus {
        border-color: #2f6fed;
        box-shadow: 0 0 0 2px rgba(47, 111, 237, .12);
    }
}