:root{
    --bg-color: #fff;
    --bg-active-color: #dddddd;
    --bg-hover-color: #e5e5e5;
    --border-color: #dddddd;
    --border-active-color: #cccccc;
    --text-color: #212121;
    --text-active-color: #000000;
}

:root.layui-dark {
    --bg-color: #0B1326;
    --bg-active-color: #171f31;
    --bg-hover-color: #2e3546;
    --border-color: #1c2435;
    --border-active-color: #49505d;
    --text-color: #ABB1B7;
    --text-active-color: #fff;
}



.layui-table[lay-even] tbody tr:nth-child(even) {
    background-color: #eeeeee;
}
.layui-table-hover, .layui-table-click {
    background-color: var(--bg-hover-color) !important;
}




.layui-dark iframe{
    background-color: var(--bg-active-color);
}

.layui-dark body{
    background-color: var(--bg-active-color);
    color: var(--text-color);
}
.layui-dark .footer{
    background-color: var(--bg-color);
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
}

.layui-dark .layui-nav-child{
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
}
.layui-dark .layui-nav-child dd.layui-this {
    background-color: var(--bg-active-color);
    color: var(--text-active-color);
}
.layui-dark .layui-nav-child dd > a:hover {
    background-color: var(--bg-active-color) !important;
}

.layui-dark .layui-badge-rim, .layui-dark .layui-border, .layui-dark .layui-colla-content, .layui-dark .layui-colla-item, .layui-dark .layui-collapse, .layui-dark .layui-elem-field, .layui-dark .layui-form-pane .layui-form-item[pane], .layui-dark .layui-form-pane .layui-form-label, .layui-dark .layui-input, .layui-dark .layui-input-split, .layui-dark .layui-panel, .layui-dark .layui-quote-nm, .layui-dark .layui-select, .layui-dark .layui-tab-bar, .layui-dark .layui-tab-card, .layui-dark .layui-tab-title, .layui-dark .layui-tab-title .layui-this:after, .layui-dark .layui-textarea{
    border-color: var(--border-color);
}
.layui-dark .layui-panel {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.layui-dark .layui-menu {
    background-color: var(--bg-color);
}
.layui-dark .layui-menu li:hover {
    background-color: var(--bg-active-color);
}
.layui-dark .layui-menu li {
    color: var(--text-color);
}
.layui-dark .layui-menu li .layui-menu-body-title{
    color: var(--text-color);
}

.layui-dark .layui-tab-box {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}
.layui-dark .layui-tab-box > * {
    border-right: 1px solid var(--border-color);
}
.layui-dark .menu-tab-left {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.layui-dark .menu-tab-right {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.layui-dark .menu-tab{
    background-color: var(--bg-color);
    color: #999999;
    border-bottom: 3px solid var(--bg-color);
    border-right: 1px solid var(--border-color);
}
.layui-dark .menu-tab .menu-tab-dot{
    background-color: var(--bg-color);
}
.layui-dark .menu-tab .menu-tab-btn-close{
    background-color: transparent;
    color: #aaaaaa;
}

.layui-dark .layui-card{
    background-color: var(--bg-color);
}
.layui-dark .layui-card-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.layui-dark .layui-table{
    background-color: var(--bg-color);
    color: var(--text-color);
}
.layui-dark .layui-table td, .layui-dark .layui-table th, .layui-dark .layui-table-col-set, .layui-dark .layui-table-fixed-r, .layui-dark .layui-table-grid-down, .layui-dark .layui-table-header, .layui-dark .layui-table-mend, .layui-dark .layui-table-page, .layui-dark .layui-table-tips-main, .layui-dark .layui-table-tool, .layui-dark .layui-table-total, .layui-dark .layui-table-view, .layui-dark .layui-table[lay-skin=line], .layui-dark .layui-table[lay-skin=row]{
    border-color: var(--border-color);
}
.layui-dark table.layui-table td{
    color: var(--text-color);
}
.layui-dark .layui-table-tips-main{
    background-color: var(--bg-active-color);
}
.layui-dark .layui-table-tips .layui-table-tips-main {
    color: var(--text-color);
}
.layui-dark .layui-laypage a[data-page] {
    color: #999999;
}
.layui-dark .layui-laypage a, .layui-laypage span{
    color: #999999;
}
.layui-dark .layui-laypage button, .layui-laypage input{
    background-color: var(--bg-color);
}
.layui-dark .layui-laypage a, .layui-laypage button, .layui-laypage input, .layui-laypage select, .layui-laypage span{
    border: 1px solid var(--bg-color);
}
.layui-dark .layui-laypage select{
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.layui-dark .layui-laypage-btn{
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.layui-dark .layui-table[lay-even] tbody tr:nth-child(even) {
    background-color: #0F1A33;
}
.layui-dark .layui-table-hover, .layui-dark .layui-table-click {
    background-color: var(--bg-hover-color) !important;
}
.layui-dark .layui-table-checked{
    background-color: #394050 !important;
    /* background-color: #3c4251 */
}
.layui-dark .layui-table-view:after {
    background-color: var(--border-color);
}
.layui-dark .layui-table-grid-down {
    background-color: var(--bg-color);
}
.layui-dark .layui-table-grid-down:hover {
    background-color: var(--bg-color);
}


.layui-dark .layui-form-pane .layui-form-label{
    background-color: var(--bg-color);
}

.layui-dark .layui-btn:disabled, .layui-dark .layui-btn-disabled, .layui-dark .layui-btn-disabled:active, .layui-dark .layui-btn-disabled:hover {
    border-color: var(--border-color) !important;
    background-color: transparent !important;
    color: #555555 !important;
    cursor: not-allowed!important;
    opacity: 1;
}
.layui-dark .layui-btn-link:disabled, .layui-dark .layui-btn-link.layui-btn-disabled, .layui-dark .layui-btn-link.layui-btn-disabled:active, .layui-dark .layui-btn-link.layui-btn-disabled:hover {
    /*border-color: #eee !important;*/
    background-color: transparent !important;
    color: #555555 !important;
    cursor: not-allowed !important;
    opacity: 1;
}
.layui-dark .layui-input, .layui-select, .layui-textarea {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.layui-dark .layui-form-select {
    color: var(--text-color);
}
.layui-dark .layui-form-select dl{
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
}
.layui-dark .layui-form-select dl > dd:not(.layui-this):hover{
    background-color: var(--bg-active-color);
}
.layui-dark .layui-form-checkbox[lay-skin=primary]:not(.layui-form-checked)>i{
    background-color: var(--bg-active-color);
    border: 1px solid var(--border-color);
}
.layui-dark .layui-form-switch:not(.layui-form-onswitch){
    background-color: var(--bg-active-color);
    border: 1px solid var(--border-color);
}
.layui-dark .layui-input-affix .layui-icon{
    color: var(--text-color);
}
.layui-dark .layui-input[disabled], .layui-dark .layui-textarea[disabled],
.layui-dark .layui-input.layui-disabled, .layui-dark .layui-textarea.layui-disabled{
    color: #aaaaaa !important;
    opacity: 0.5;
    cursor: not-allowed;
}
.layui-dark .layui-input[disabled]:hover, .layui-dark .layui-textarea[disabled]:hover,
.layui-dark .layui-input.layui-disabled:hover, .layui-dark .layui-textarea.layui-disabled:hover{
    border-color: var(--border-color) !important;
}


.layui-dark .layui-layer:not(.layui-layer-loading){
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
}
.layui-dark .layui-layer-title{
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}
.layui-dark .layui-layer-setwin span{
    color: var(--text-color);
}
.layui-dark .layui-layer-main .layui-layer-btn {
    border-top: 1px solid var(--border-color);
}
.layui-dark .layui-layer-main .layui-layer-btn .layui-layer-btn1,
.layui-dark .layui-layer-dialog .layui-layer-btn .layui-layer-btn1,
.layui-dark .layui-layer-prompt .layui-layer-btn .layui-layer-btn1{
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.layui-dark .layui-layer-prompt .layui-layer-input{
    border: 1px solid var(--border-color);
    color: var(--text-color);
    background-color: transparent;
}


.layui-dark .layui-colorpicker-main{
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}
.layui-dark .layui-colorpicker-main .layui-btn-group button[colorpicker-events="clear"]{
    background: 0 0;
    border-color: var(--border-color);
    color: var(--text-color);
    margin-right: 10px !important;
}


.layui-dark .layui-tabs-header:after, .layui-tabs-scroll:after {
    border-bottom: 1px solid var(--border-active-color);
}
.layui-dark .layui-tabs-card>.layui-tabs-header .layui-this {
    background-color: transparent;
}
.layui-dark .layui-tabs-header .layui-this, .layui-tabs-header li:hover {
    color: var(--mainColor);
}
.layui-dark .layui-tabs-card>.layui-tabs-header .layui-this:after {
    border: 1px solid var(--border-active-color);
    border-bottom-color: var(--bg-color);
}


.layui-dark .upload-container .upload-image-box {
    border: 1px solid var(--border-color);
}