:root {
    --bgcolor: #e9e9eb;
    /* 全局背景色 */
    --lightenbgcolor: #404040;
    --fontcolor: #666;
}

/* 深色模式 */
:root {
    --bgcolor: #262626;
    /* 全局背景色 */
    --lightenbgcolor: #40404036;
    --fontcolor: #666;
}

/* 全局背景色 */
.flatstyle,
.flatstyle .wrapper,
.flatstyle .left-side,
.flatstyle .content-wrapper,
.flatstyle .right-side {
    background-color: #e9e9eb;
    /* 全局背景色 */
    /* background-color: #f5f5f5; */
}

/* 深色模式 */
.flatstyle.darktheme,
.flatstyle.darktheme .wrapper,
.flatstyle.darktheme .left-side,
.flatstyle.darktheme .content-wrapper,
.flatstyle.darktheme .right-side {
    background-color: #262626;
    /* 全局背景色 */
}

/* 提示背景色 */
.flatstyle .toast {
    background-color: #030303;
}

.flatstyle .toast-success {
    background-color: #67c23a !important;
}

.flatstyle .toast-error {
    background-color: #f56c6c;
}

/* .flatstyle .toast-info {
    background-color: #909399
} */

.flatstyle .toast-warning {
    background-color: #e6a23c;
}

/* 全局图标动画 */
@keyframes twinkle-fa {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.2);
    }

    to {
        transform: scale(1);
    }
}

.flatstyle .fa {
    animation: twinkle-fa 0.3s ease-in-out;
}

/* 全局鼠标进入放大 */
/* 鼠标进入时的样式 */
.flatstyle .panel-statistics,
.flatstyle .sm-st,
.flatstyle .stats-container .stat-col,
.flatstyle #statistics .panel,
.flatstyle .suspension {
    transition: all 0.3s ease;
}

.flatstyle .panel-statistics:hover,
.flatstyle #statistics .panel:hover,
.flatstyle .sm-st:hover,
.flatstyle .stats-container .stat-col:hover,
.flatstyle .suspension:hover {
    -webkit-transform: translateY(-5px) scale(1.05);
    -moz-transform: translateY(-5px) scale(1.05);
    -ms-transform: translateY(-5px) scale(1.05);
    -o-transform: translateY(-5px) scale(1.05);
    transform: translateY(-5px) scale(1.05);
    -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.3);
    box-shadow: 0 14px 24px #0003;
    z-index: 999;
    border-radius: 12px;
}

/* 主题控制面板 */
.flatstyle .control-sidebar {
    padding-top: 66px;
    background-color: #e9e9eb;
    /* 全局背景色 */
    color: #000;
}

.control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a {
    background: #fcfcfc;
    border: 1px solid #fcfcfc;
}

.flatstyle .control-sidebar-dark .control-sidebar-heading,
.flatstyle .control-sidebar-dark .control-sidebar-subheading {
    color: #5f5d5d;
}

.flatstyle .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li:hover > a,
.flatstyle .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a,
.flatstyle
    .control-sidebar-dark
    .nav-tabs.control-sidebar-tabs
    > li.active
    > a:hover,
.flatstyle
    .control-sidebar-dark
    .nav-tabs.control-sidebar-tabs
    > li.active
    > a:focus,
.flatstyle
    .control-sidebar-dark
    .nav-tabs.control-sidebar-tabs
    > li.active
    > a:active {
    background: #ecf5ff;
    color: #fff;
    border: 1px solid #ecf5ff;
}

/* 主头部 */
.flatstyle .main-header {
    background: initial;
    -webkit-box-shadow: initial;
    box-shadow: initial;
    margin: 16px 16px 0 16px;
}

.flatstyle .main-header .navbar {
    /* background-color: #e9e9eb; */
    background-color: initial;
    margin-left: 180px;
}

/* 深色模式 */
.flatstyle.darktheme .main-header {
    background-color: initial;
}

.flatstyle.darktheme .main-header .navbar {
    background-color: initial;
}

.flatstyle.sidebar-collapse .main-header .navbar {
    margin-left: 0;
}

/* 多级菜单的时候 */
/* 第二导航 */
#secondnav {
    left: 50px;
    box-shadow: initial;
    width: calc(100% - 50px);
}

.flatstyle #secondnav .nav-addtabs > li > a {
    margin-top: 0px;
}

.flatstyle #secondnav .nav-addtabs > li.active > a,
.flatstyle #secondnav .nav-addtabs > li:hover > a {
    border-radius: 0px;
    background-color: initial !important;
}

/* 头部第一个导航 */
.flatstyle #firstnav {
    box-shadow: initial;
    border-bottom: 0px;
}

/* 收缩按钮 */
.flatstyle #firstnav .sidebar-toggle {
    width: 50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.flatstyle #firstnav .nav-addtabs {
    left: 57px;
}

.flatstyle #firstnav .nav-addtabs .dropdown {
    margin-right: 10px;
}

.flatstyle .nav-addtabs > li > a {
    height: 40px;
    line-height: 30px;
    margin-top: 5px;
    padding: 5px 15px;
}

/* 第一个Tab */
.flatstyle .nav-addtabs > li#tab_1 {
    margin-left: 16px;
}

/* 第一个导航，右侧 */
.flatstyle #firstnav .navbar-custom-menu {
    border-radius: 30px;
    /* overflow: hidden; */
    background-color: #ffffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    margin-top: 5px;
}

/* 深色模式 */
.flatstyle.darktheme #firstnav .navbar-custom-menu {
    border-radius: 30px;
    background-color: #404040;
}

.flatstyle #firstnav .navbar-custom-menu .navbar-nav {
    height: 40px;
}

.flatstyle #firstnav .navbar-custom-menu .navbar-nav > li:last-child {
    display: none !important;
}

.flatstyle .theme-li {
    height: 40px;
    padding: 10px 8px;
}

.flatstyle .main-header .navbar .nav > li > a {
    color: #666;
}

.flatstyle .main-header .navbar .nav > li > a:hover,
.flatstyle .main-header .navbar .nav > li > a:active,
.flatstyle .main-header .navbar .nav > li > a:focus,
.flatstyle .main-header .navbar .nav .open > a,
.flatstyle .main-header .navbar .nav .open > a:hover,
.flatstyle .main-header .navbar .nav .open > a:focus,
.flatstyle .main-header .navbar .nav > .active > a {
    background-color: #e9e9eb;
    /* 全局背景色 */
    color: #000000;
}

/* 头部个人信息 */
.flatstyle .main-header li.user-header {
    background: #ffffff;
}

.flatstyle .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
    color: #000000;
}

.flatstyle .navbar-nav > .user-menu > .dropdown-menu > .user-body {
    padding: 0px;
    background: #e9e9eb;
    border-top: 0px;
}

.flatstyle .nav-addtabs > li {
    margin-left: 5px;
}

.flatstyle .nav-addtabs > li.active > a,
.flatstyle .nav-addtabs > li:hover > a {
    border-radius: 12px;
    background-color: #ffffff !important;
}

.flatstyle .main-header .nav-addtabs > li > a,
.flatstyle .main-header .nav-addtabs > li.active > a {
    border-right-color: transparent;
}

.flatstyle.darktheme .nav-addtabs > li.active > a,
.flatstyle.darktheme .nav-addtabs > li:hover > a {
    border-radius: 12px;
    background-color: #000 !important;
}

.flatstyle .main-header .navbar .nav-addtabs li > .close-tab {
    color: #333;
}

/* 收缩按钮 start */
.flatstyle .main-header .navbar .sidebar-toggle {
    color: #000000;
    background-color: #fcfcfc;
}

/* 深色模式 */
.flatstyle.darktheme .main-header .navbar .sidebar-toggle {
    color: #fff;
    /* background-color: #000000; */
}

.flatstyle.darktheme .main-header .navbar .sidebar-toggle {
    background-color: initial;
}

.flatstyle .main-header .navbar .sidebar-toggle:hover {
    color: #000000;
    background-color: #fcfcfc;
}

.flatstyle.darktheme .main-header .navbar .sidebar-toggle:hover {
    color: #fff;
    background-color: #0000008f;
}

/* 收缩按钮 end */

.flatstyle .main-header .navbar .navbar-nav > li > a {
    border-right: none;
}

.skin-black .main-header .navbar .nav > li > a:hover,
.skin-black .main-header .navbar .nav > li > a:active,
.skin-black .main-header .navbar .nav > li > a:focus,
.skin-black .main-header .navbar .nav .open > a,
.skin-black .main-header .navbar .nav .open > a:hover,
.skin-black .main-header .navbar .nav .open > a:focus,
.skin-black .main-header .navbar .nav > .active > a {
    background: rgba(0, 0, 0, 0.02);
    color: #444;
}

.flatstyle .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
.flatstyle .main-header .navbar .navbar-right > li > a {
    border-left: none;
    border-right-width: 0;
    border-radius: 30px;
}

/* Logo start */
/* 收缩后隐藏logo */
.flatstyle.sidebar-collapse .main-header .logo {
    display: none;
}

.flatstyle .main-header .logo {
    background-color: #fcfcfc;
    color: #000000;
    border-bottom: 0 solid transparent;
    border-right: 1px solid #fcfcfc;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    width: 180px;
}

.flatstyle .main-header .logo:hover {
    background-color: #fcfcfc;
}

/* Logo end */

.flatstyle .content-header {
    background: transparent;
    box-shadow: none;
}

.flatstyle .content-wrapper,
.flatstyle .right-side,
.flatstyle .main-footer {
    margin-left: 246px;
}

.flatstyle.fixed .content-wrapper,
.flatstyle.fixed .right-side {
    padding-top: 65px;
}

.flatstyle.multipletab.multiplenav .content-wrapper,
.flatstyle.multipletab.multiplenav .right-side {
    padding-top: 110px;
}

/* 左侧菜单 */
/* 左侧菜单用户信息 */
.flatstyle .user-panel > .info,
.flatstyle .user-panel > .info > a {
    color: #000;
}

.flatstyle .main-sidebar {
    background: #ffffff;
    margin: 16px 0 16px 16px;
    height: calc(100vh - 32px);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;

    /* box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12); */
    border-radius: 30px;
    /* overflow: hidden; */
    transition: width 0.3s ease;
    padding-top: 50px;
    min-height: calc(100vh - 32px);
}

.flatstyle .slimScrollDiv,
.flatstyle .slimScrollDiv .sidebar {
    height: 100% !important;
    padding-bottom: 0px;
}

.flatstyle .sidebar-menu > li.header {
    color: #000000;
    background: #ffffff;
}

.flatstyle
    .sidebar-menu
    > li:not(.active):not(.treeview-open):not(.menu-open):hover
    > a {
    color: #000000;
    background: #ecf5ff;
    border-left-color: #ecf5ff;
    transition: all 0.3s ease-in-out;
}

/* 深色模式 */
body.darktheme .treeview-menu > li:hover > a,
body.darktheme .treeview-menu > li.active > a {
    background: #404040;
}

.flatstyle .sidebar-menu > li > .treeview-menu {
    background: #ffffff;
}

/* 深色模式 */
body.darktheme.sidebar-collapse .sidebar-menu li:hover > a,
body.darktheme.sidebar-collapse .sidebar-menu li.active > a {
    background: #404040;
}

body.darktheme.sidebar-collapse .sidebar-menu .treeview-menu li.active > a {
    background: #404040;
}

.flatstyle .sidebar a {
    color: #000;
}

.flatstyle .sidebar a:hover {
    text-decoration: none;
}

/* 统一菜单项外边距,保证父项和叶子项的文字在同一竖线上 */
.flatstyle .sidebar-menu > li > a {
    margin: 4px 12px;
    border-radius: 30px;
}
.flatstyle .sidebar-menu .treeview-menu > li > a {
    margin: 2px 12px;
    border-radius: 30px;
}

.flatstyle .treeview-menu > li > a {
    color: #000;
}

.flatstyle .treeview-menu > li.active:not(.treeview) > a {
    color: #fff;
}
.flatstyle .treeview-menu > li:not(.active) > a:hover {
    color: #000;
    transition: all 0.3s ease-in-out;
}

.flatstyle .treeview-menu > li.active:not(.treeview) > a {
    color: #fff;
    transition: all 0.3s ease-in-out;
}
.flatstyle .treeview-menu > li:not(.active) > a:hover {
    color: #000000;
}

/* 左侧菜单内搜索 */
.flatstyle .sidebar-form {
    border-radius: 8px;
    border: 1px solid #ecf5ff;
    background-color: #ecf5ff;
    margin: 10px 15px;
}

.flatstyle .sidebar-form input[type="text"] {
    color: #666;
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    background-color: #ffffff;
}

.flatstyle .sidebar-form input[type="text"]:focus + .input-group-btn {
    background: #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 0;
}

/* 深色模式 */
.flatstyle.darktheme .sidebar-form input[type="text"]:focus + .input-group-btn {
    background: initial;
}

.flatstyle .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    border-left-color: #fff;
}

.flatstyle .sidebar-form .btn {
    color: #000;
    background-color: #ffffff;
}

/* 左侧菜单内搜索 end */

.flatstyle .treeview-menu > li > a {
    padding-left: 18px;
}

.flatstyle .treeview-menu > li.active:not(.treeview) > a {
    background-color: #165dff;

    color: #fff;
    border-radius: 30px;
    margin: 2px 12px;
    transition: all 0.3s ease-in-out;
}
.flatstyle .treeview-menu > li:not(.active):hover > a {
    background-color: #ecf5ff;
    border-radius: 30px;
    margin: 2px 12px;
}

.flatstyle .sidebar-menu > li.active:not(.treeview) > a {
    color: #fff;
    background: #165dff;
    border-left-color: transparent;
    border-radius: 30px;
    margin: 4px 12px;
}
/* 深色模式 */
.flatstyle.darktheme .sidebar-menu > li.active:not(.treeview) > a {
    color: #fff;
    background: #7f7f7f;
    border-left-color: transparent;
    border-radius: 30px;
    margin: 4px 12px;
    transition: all 0.3s ease-in-out;
}
.flatstyle
    .sidebar-menu
    > li:not(.active):not(.treeview-open):not(.menu-open):hover
    > a {
    border-left-color: transparent;
    border-radius: 30px;
    margin: 4px 12px;
}

.flatstyle .sidebar-menu li.treeview > a {
    background: transparent;
    border-left-color: transparent;
}

/* 有子级的父/祖先(即 li.treeview) 一律不算选中,即使被自动打上 active/treeview-open/menu-open */
.flatstyle .sidebar-menu li.treeview > a,
.flatstyle .sidebar-menu li.treeview.active > a,
.flatstyle .sidebar-menu li.treeview.treeview-open > a,
.flatstyle .sidebar-menu li.treeview.menu-open > a {
    background-color: transparent !important;
    background: transparent !important;
    color: #000 !important;
    border-left-color: transparent !important;
    margin: 4px 12px;
}
/* 父项 hover 给浅色反馈:必须指针压在该 <a> 上,避免因 :hover 冒泡导致祖先父项一起变色 */
.flatstyle .sidebar-menu li.treeview > a:hover {
    background-color: #ecf5ff !important;
    color: #000 !important;
}
/* 深色模式:父项文字换成白色 */
.flatstyle.darktheme .sidebar-menu li.treeview > a,
.flatstyle.darktheme .sidebar-menu li.treeview.active > a,
.flatstyle.darktheme .sidebar-menu li.treeview.treeview-open > a,
.flatstyle.darktheme .sidebar-menu li.treeview.menu-open > a {
    color: #fff !important;
}

/* 修正右侧箭头/角标垂直居中：AdminLTE 默认用 margin-top:-7px，pill 化后视觉偏移，改用 transform 居中 */
.flatstyle .sidebar-menu li > a > .pull-right-container {
    top: 50%;
    margin-top: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 22px;
}

.flatstyle .sidebar-menu .treeview-menu {
    padding-left: 0;
}

.flatstyle .sidebar-menu .treeview-menu .treeview-menu {
    padding-left: 0;
}

.flatstyle .sidebar-menu .treeview-menu .treeview-menu > li > a {
    padding-left: 30px;
}

.flatstyle .sidebar-menu .treeview-menu li.treeview > a {
    background: transparent;
    border-left-color: transparent;
}

.flatstyle.sidebar-collapse .sidebar-menu li:not(.active):hover > a {
    color: #000;
    background: #ecf5ff;
    border-radius: 30px;
    margin: 4px 8px;
}
.flatstyle.sidebar-collapse .sidebar-menu li.active > a {
    color: #fff;
    background: #165dff;
    border-radius: 30px;
    margin: 4px 8px;
}

.flatstyle.sidebar-collapse .sidebar-menu .treeview-menu li.active > a {
    color: #fff;
    background: #165dff;
    border-radius: 30px;
    margin: 2px 8px;
}

.flatstyle.sidebar-collapse .sidebar-menu .treeview-menu li.treeview > a {
    background: transparent;
    border-left-color: transparent;
}

@media (min-width: 768px) {
    .flatstyle.sidebar-mini.sidebar-collapse .content-wrapper,
    .flatstyle.sidebar-mini.sidebar-collapse .right-side,
    .flatstyle.sidebar-mini.sidebar-collapse .main-footer {
        margin-left: 66px !important;
    }

    .flatstyle .navbar-nav > li > a {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

@media (max-width: 767px) {
    .flatstyle.multiplenav .sidebar .mobilenav a.btn-app {
        background: #374850;
        color: #fff;
    }

    .flatstyle.multiplenav .sidebar .mobilenav a.btn-app.active {
        color: #000000;
        background: #fff;
    }
}

/* 正文部分 */
.flatstyle .panel-intro {
    border-radius: 20px;
    overflow: hidden;
    /* box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12); */
    box-shadow:
        rgba(17, 17, 26, 0.1) 0px 4px 16px,
        rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.flatstyle .panel-intro > .panel-heading {
    background: #e1eaf9;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.flatstyle .panel-intro > .panel-heading .nav-tabs > li > a {
    background: #f9f9f9;
    border: 1px solid #f9f9f9;
}

.flatstyle .panel-intro > .panel-heading .nav-tabs > li.active > a,
.flatstyle .panel-intro > .panel-heading .nav-tabs > li.active:hover > a {
    background: #ffffff;
    border: 1px solid #ffffff;
}

/* 列表TAB 鼠标进入样式 */
.flatstyle .panel-intro > .panel-heading .nav-tabs > li:hover > a {
    background: #ffffff;
    border: 1px solid #ffffff;
}
/* 深色模式 */
.flatstyle.darktheme .panel-intro > .panel-heading .nav-tabs > li:hover > a {
    background: #333333;
    border: 1px solid #333333;
}

.flatstyle .bootstrap-select > .dropdown-toggle,
.flatstyle .form-control {
    border-radius: 12px;
}

.flatstyle .form-control {
    border-radius: 12px;
}

/* 按钮 */
.flatstyle .btn:active,
.flatstyle .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: initial;
    box-shadow: initial;
}

.flatstyle .btn-primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}

.flatstyle .btn-primary:focus,
.flatstyle .btn-primary.focus {
    color: #fff;
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.flatstyle .btn-primary:hover {
    color: #fff;
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.flatstyle .btn-primary:active,
.flatstyle .btn-primary.active,
.flatstyle .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #3a8ee6;
    border-color: #3a8ee6;
}

.flatstyle .btn-primary:active:hover,
.flatstyle .btn-primary.active:hover,
.flatstyle .open > .dropdown-toggle.btn-primary:hover,
.flatstyle .btn-primary:active:focus,
.flatstyle .btn-primary.active:focus,
.flatstyle .open > .dropdown-toggle.btn-primary:focus,
.flatstyle .btn-primary:active.focus,
.flatstyle .btn-primary.active.focus,
.flatstyle .open > .dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: #3a8ee6;
    border-color: #3a8ee6;
}

.flatstyle .btn-primary:active,
.flatstyle .btn-primary.active,
.flatstyle .open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.flatstyle .btn-primary.disabled:hover,
.flatstyle .btn-primary[disabled]:hover,
.flatstyle fieldset[disabled] .btn-primary:hover,
.flatstyle .btn-primary.disabled:focus,
.flatstyle .btn-primary[disabled]:focus,
.flatstyle fieldset[disabled] .btn-primary:focus,
.flatstyle .btn-primary.disabled.focus,
.flatstyle .btn-primary[disabled].focus,
.flatstyle fieldset[disabled] .btn-primary.focus {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.flatstyle .btn-primary .badge {
    color: #66b1ff;
    background-color: #fff;
}

.flatstyle .btn-success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
}

.flatstyle .btn-success:focus,
.flatstyle .btn-success.focus {
    color: #fff;
    background-color: #85ce61;
    border-color: #85ce61;
}

.flatstyle .btn-success:hover {
    color: #fff;
    background-color: #85ce61;
    border-color: #85ce61;
}

.flatstyle .btn-success:active,
.flatstyle .btn-success.active,
.flatstyle .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #85ce61;
    border-color: #85ce61;
}

.flatstyle .btn-success:active:hover,
.flatstyle .btn-success.active:hover,
.flatstyle .open > .dropdown-toggle.btn-success:hover,
.flatstyle .btn-success:active:focus,
.flatstyle .btn-success.active:focus,
.flatstyle .open > .dropdown-toggle.btn-success:focus,
.flatstyle .btn-success:active.focus,
.flatstyle .btn-success.active.focus,
.flatstyle .open > .dropdown-toggle.btn-success.focus {
    color: #fff;
    background-color: #5daf34;
    border-color: #5daf34;
}

.flatstyle .btn-success:active,
.flatstyle .btn-success.active,
.flatstyle .open > .dropdown-toggle.btn-success {
    background-image: none;
}

.flatstyle .btn-success.disabled:hover,
.flatstyle .btn-success[disabled]:hover,
.flatstyle fieldset[disabled] .btn-success:hover,
.flatstyle .btn-success.disabled:focus,
.flatstyle .btn-success[disabled]:focus,
.flatstyle fieldset[disabled] .btn-success:focus,
.flatstyle .btn-success.disabled.focus,
.flatstyle .btn-success[disabled].focus,
.flatstyle fieldset[disabled] .btn-success.focus {
    background-color: #5daf34;
    border-color: #5daf34;
}

.flatstyle .btn-success .badge {
    color: #85ce61;
    background-color: #fff;
}

.flatstyle .btn-info {
    color: #fff;
    background-color: #2db7f5;
    border-color: #2db7f5;
}

.flatstyle .btn-info:focus,
.flatstyle .btn-info.focus {
    color: #fff;
    background-color: #51baeb;
    border-color: #51baeb;
}

.flatstyle .btn-info:hover {
    color: #fff;
    background-color: #51baeb;
    border-color: #51baeb;
}

.flatstyle .btn-info:active,
.flatstyle .btn-info.active,
.flatstyle .open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: #42bcf5;
    border-color: #42bcf5;
}

.flatstyle .btn-info:active:hover,
.flatstyle .btn-info.active:hover,
.flatstyle .open > .dropdown-toggle.btn-info:hover,
.flatstyle .btn-info:active:focus,
.flatstyle .btn-info.active:focus,
.flatstyle .open > .dropdown-toggle.btn-info:focus,
.flatstyle .btn-info:active.focus,
.flatstyle .btn-info.active.focus,
.flatstyle .open > .dropdown-toggle.btn-info.focus {
    color: #fff;
    background-color: #42bcf5;
    border-color: #42bcf5;
}

.flatstyle .btn-info:active,
.flatstyle .btn-info.active,
.flatstyle .open > .dropdown-toggle.btn-info {
    background-image: none;
}

.flatstyle .btn-info.disabled:hover,
.flatstyle .btn-info[disabled]:hover,
.flatstyle fieldset[disabled] .btn-info:hover,
.flatstyle .btn-info.disabled:focus,
.flatstyle .btn-info[disabled]:focus,
.flatstyle fieldset[disabled] .btn-info:focus,
.flatstyle .btn-info.disabled.focus,
.flatstyle .btn-info[disabled].focus,
.flatstyle fieldset[disabled] .btn-info.focus {
    background-color: #42bcf5;
    border-color: #42bcf5;
}

.flatstyle .btn-info .badge {
    color: #909399;
    background-color: #fff;
}

.flatstyle .btn-warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
}

.flatstyle .btn-warning:focus,
.flatstyle .btn-warning.focus {
    color: #fff;
    background-color: #ebb563;
    border-color: #ebb563;
}

.flatstyle .btn-warning:hover {
    color: #fff;
    background-color: #ebb563;
    border-color: #ebb563;
}

.flatstyle .btn-warning:active,
.flatstyle .btn-warning.active,
.flatstyle .open > .dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #cf9236;
    border-color: #cf9236;
}

.flatstyle .btn-warning:active:hover,
.flatstyle .btn-warning.active:hover,
.flatstyle .open > .dropdown-toggle.btn-warning:hover,
.flatstyle .btn-warning:active:focus,
.flatstyle .btn-warning.active:focus,
.flatstyle .open > .dropdown-toggle.btn-warning:focus,
.flatstyle .btn-warning:active.focus,
.flatstyle .btn-warning.active.focus,
.flatstyle .open > .dropdown-toggle.btn-warning.focus {
    color: #fff;
    background-color: #cf9236;
    border-color: #cf9236;
}

.flatstyle .btn-warning:active,
.flatstyle .btn-warning.active,
.flatstyle .open > .dropdown-toggle.btn-warning {
    background-image: none;
}

.flatstyle .btn-warning.disabled:hover,
.flatstyle .btn-warning[disabled]:hover,
.flatstyle fieldset[disabled] .btn-warning:hover,
.flatstyle .btn-warning.disabled:focus,
.flatstyle .btn-warning[disabled]:focus,
.flatstyle fieldset[disabled] .btn-warning:focus,
.flatstyle .btn-warning.disabled.focus,
.flatstyle .btn-warning[disabled].focus,
.flatstyle fieldset[disabled] .btn-warning.focus {
    background-color: #cf9236;
    border-color: #cf9236;
}

.flatstyle .btn-warning .badge {
    color: #e6a23c;
    background-color: #fff;
}

.flatstyle .btn-danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
}

.flatstyle .btn-danger:focus,
.flatstyle .btn-danger.focus {
    color: #fff;
    background-color: #f78989;
    border-color: #f78989;
}

.flatstyle .btn-danger:hover {
    color: #fff;
    background-color: #f78989;
    border-color: #f78989;
}

.flatstyle .btn-danger:active,
.flatstyle .btn-danger.active,
.flatstyle .open > .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #dd6161;
    border-color: #dd6161;
}

.flatstyle .btn-danger:active:hover,
.flatstyle .btn-danger.active:hover,
.flatstyle .open > .dropdown-toggle.btn-danger:hover,
.flatstyle .btn-danger:active:focus,
.flatstyle .btn-danger.active:focus,
.flatstyle .open > .dropdown-toggle.btn-danger:focus,
.flatstyle .btn-danger:active.focus,
.flatstyle .btn-danger.active.focus,
.flatstyle .open > .dropdown-toggle.btn-danger.focus {
    color: #fff;
    background-color: #dd6161;
    border-color: #dd6161;
}

.flatstyle .btn-danger:active,
.flatstyle .btn-danger.active,
.flatstyle .open > .dropdown-toggle.btn-danger {
    background-image: none;
}

.flatstyle .btn-danger.disabled:hover,
.flatstyle .btn-danger[disabled]:hover,
.flatstyle fieldset[disabled] .btn-danger:hover,
.flatstyle .btn-danger.disabled:focus,
.flatstyle .btn-danger[disabled]:focus,
.flatstyle fieldset[disabled] .btn-danger:focus,
.flatstyle .btn-danger.disabled.focus,
.flatstyle .btn-danger[disabled].focus,
.flatstyle fieldset[disabled] .btn-danger.focus {
    background-color: #dd6161;
    border-color: #dd6161;
}

.flatstyle .btn-danger .badge {
    color: #f56c6c;
    background-color: #fff;
}

/* 弹窗 */
.flatstyle .layui-layer-fast .layui-layer-title {
    /* background-color: #409eff !important; */
    background: linear-gradient(90deg, #165dff 0%, #80b0ff 100%) !important;
}

/* 翻页 */
.flatstyle .pagination > .active > a,
.flatstyle .pagination > .active > span,
.flatstyle .pagination > .active > a:hover,
.flatstyle .pagination > .active > span:hover,
.flatstyle .pagination > .active > a:focus,
.flatstyle .pagination > .active > span:focus {
    background-color: #409eff;
    border-color: #409eff;
}

/* 深色模式 */
.flatstyle.darktheme .pagination > .active > a,
.flatstyle.darktheme .pagination > .active > span,
.flatstyle.darktheme .pagination > .active > a:hover,
.flatstyle.darktheme .pagination > .active > span:hover,
.flatstyle.darktheme .pagination > .active > a:focus,
.flatstyle.darktheme .pagination > .active > span:focus {
    background-color: #404040;
    border-color: #404040;
}

.flatstyle .pagination > li > a,
.flatstyle .pagination > li > span {
    background-color: #efefef;
    border: 1px solid #efefef;
}

.flatstyle .layui-layer-fast .layui-layer-btn .layui-layer-btn0 {
    background-color: #85ce61;
    border-color: #85ce61;
}

.flatstyle .layui-layer-fast .layui-layer-btn .layui-layer-btn1 {
    background-color: #909399;
    border-color: #909399;
}

.flatstyle .layui-layer-fast .layui-layer-confirm:focus {
    border: 0px solid #444c69;
}
body.darktheme .btn {
    background-color: #404040;
    border-color: #404040;
    color: #ffffff;
}
body.darktheme .btn:hover,
body.darktheme .btn:focus,
body.darktheme .btn.focus,
body.darktheme .btn:active,
body.darktheme .btn.active {
    background-color: #262626 !important;
    border-color: #262626 !important;
}

/* 小屏幕 */

@media (max-width: 767px) {
    /* 隐藏侧边栏 */
    .flatstyle .main-sidebar {
        display: none;
    }
    .flatstyle.sidebar-open .main-sidebar {
        display: block;
        padding-top: 0px;
    }
    .flatstyle .main-header .logo {
        background-color: #181f23;
        color: #fff;
        border-bottom: 0 solid transparent;
        border-right: none;
        display: none;
    }
    .navbar-custom-menu .navbar-nav > li > a {
        padding-top: 10px;
    }
    .flatstyle .main-header .logo:hover {
        background-color: #161d20;
    }
    .flatstyle .content-wrapper,
    .flatstyle .right-side,
    .flatstyle .main-footer {
        margin-left: 0px;
    }

    .flatstyle.sidebar-open .content-wrapper,
    .flatstyle.sidebar-open .right-side,
    .flatstyle.sidebar-open .main-footer {
        margin-left: 16px;
    }
    /* 隐藏时间 */
    .flatstyle .flatstyle-timebox {
        display: none !important;
    }
    .flatstyle .main-header .navbar {
        margin-left: 0px;
    }
    .flatstyle.sidebar-open .main-header .navbar {
        margin-left: 245px;
    }
    .flatstyle .main-header .navbar {
        background-color: initial;
    }

    .flatstyle .main-header .navbar .nav > li > a {
        color: #fff;
    }

    .flatstyle .main-header .navbar .nav > li > a:hover,
    .flatstyle .main-header .navbar .nav > li > a:active,
    .flatstyle .main-header .navbar .nav > li > a:focus,
    .flatstyle .main-header .navbar .nav .open > a,
    .flatstyle .main-header .navbar .nav .open > a:hover,
    .flatstyle .main-header .navbar .nav .open > a:focus,
    .flatstyle .main-header .navbar .nav > .active > a {
        background: rgba(0, 0, 0, 0.1);
        color: #f6f6f6;
    }

    .flatstyle .main-header .navbar .nav-addtabs li > .close-tab {
        color: #f6f6f6;
    }

    .flatstyle .main-header .navbar .sidebar-toggle {
        color: #000;
        background-color: #ffffff;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
        height: 40px !important;
        width: 40px !important;
        line-height: 40px !important;
        margin-top: 5px;
        border-radius: 12px;
    }

    .flatstyle .main-header .navbar .sidebar-toggle:hover {
        color: #f6f6f6;
        background: rgba(0, 0, 0, 0.1);
    }
    .flatstyle .navbar-nav > .user-menu > .dropdown-menu > .user-body {
        background: #e9e9eb;
        padding: 15px;
    }
    .flatstyle
        .navbar-nav
        > .user-menu
        > .dropdown-menu
        > .user-body
        .visible-xs
        .pull-right
        li {
        display: none;
    }
}
@media (max-width: 991px) {
    .flatstyle .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
        background: #e9e9eb !important;
        color: #000 !important;
    }
}
.flatstyle .btn {
    border-radius: 12px;
    padding: 6px 15px;
}

.flatstyle .btn:hover {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    transition: all 0.3s ease-in-out;
}

.flatstyle .btn-xs {
    padding: 1px 5px;
    border-radius: 5px;
}

/* ===== 现代化 Table ===== */
.flatstyle .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #1f2329;
    font-size: 13px;
}

.flatstyle .table > thead > tr > th {
    background: #f7f8fa;
    color: #4e5969;
    font-weight: 500;
    border-bottom: 1px solid #e5e6eb;
    border-top: 0;
    padding: 12px 14px;
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.flatstyle .table > tbody > tr > td {
    padding: 12px 14px;
    vertical-align: middle;
    border-top: 1px solid #f2f3f5;
    color: #1f2329;
    transition: background-color 0.15s ease;
}

.flatstyle .table > tbody > tr:first-child > td {
    border-top: 0;
}

.flatstyle .table > tbody > tr:hover > td,
.flatstyle .table-hover > tbody > tr:hover > td {
    background-color: #f2f7ff;
}

.flatstyle .table > tbody > tr.selected > td,
.flatstyle .table > tbody > tr.active > td {
    background-color: #ecf3ff;
}

/* 条纹 */
.flatstyle .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #fafbfc;
}
.flatstyle .table-striped > tbody > tr:hover > td {
    background-color: #f2f7ff;
}

/* 去掉自带外边框，改用容器圆角包裹 */
.flatstyle .table-bordered {
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    overflow: hidden;
}
.flatstyle .table-bordered > thead > tr > th,
.flatstyle .table-bordered > tbody > tr > td {
    border-left: 0;
    border-right: 0;
}

/* bootstrap-table 容器圆角 */
.flatstyle .fixed-table-container {
    border: 1px solid #e5e6eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.flatstyle .fixed-table-container .table {
    border: 0;
}
.flatstyle .fixed-table-toolbar {
    padding: 8px 0;
}
.flatstyle .fixed-table-pagination {
    padding: 10px 12px;
    border-top: 1px solid #f2f3f5;
    background: #fff;
}

/* 复选框列更紧凑 */
.flatstyle .table > thead > tr > th.bs-checkbox,
.flatstyle .table > tbody > tr > td.bs-checkbox {
    padding: 12px 8px;
    width: 36px;
    text-align: center;
}

/* 单元格内小按钮组间距 */
.flatstyle .table .btn-group > .btn,
.flatstyle .table .btn + .btn {
    margin-right: 4px;
}

/* 表格内标签更柔和 */
.flatstyle .table .label,
.flatstyle .table .badge {
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
}

/* 深色主题 */
body.darktheme .flatstyle .table {
    color: #e5e6eb;
}
body.darktheme .flatstyle .table > thead > tr > th {
    background: #2a2a2e;
    color: #c9cdd4;
    border-bottom-color: #3a3a3f;
}
body.darktheme .flatstyle .table > tbody > tr > td {
    border-top-color: #2f2f34;
}
body.darktheme .flatstyle .table > tbody > tr:hover > td,
body.darktheme .flatstyle .table-hover > tbody > tr:hover > td {
    background-color: #23324d;
}
body.darktheme .flatstyle .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #26262a;
}
body.darktheme .flatstyle .fixed-table-container,
body.darktheme .flatstyle .table-bordered {
    border-color: #3a3a3f;
}
body.darktheme .flatstyle .fixed-table-pagination {
    background: #1e1e22;
    border-top-color: #2f2f34;
}

.flatstyle .dropdown-menu {
    border-radius: 12px;
}

.flatstyle .layui-layer {
    border-radius: 12px;
    overflow: hidden;
}

/* ============================================================
 * 表格自适应高度（纯 CSS 方案，替代 bootstrap-table 的 height 选项）
 * 让列表页表格撑满可视高度，数据在表格内部滚动，
 * 表头固定、分页条固定在底部始终可见。
 *
 * 作用域：仅当页面初始化了 bootstrap-table（bindevent 给 body 加了
 * .fa-table-fullheight class）时才生效。配置页/表单页不受影响。
 *
 * 适用结构：.panel-intro > .panel-body > .tab-content > .tab-pane
 *          > .widget-body > .bootstrap-table
 * ============================================================ */

/* 1. 列表页 body 以视口高度为根（用 100vh，不依赖 html/body 的 height:100%，
 * 避免给全局 html 设高度而影响配置页/表单页的正常滚动）。
 * overflow:hidden 把滚动完全交给内部的表格滚动区。 */
.flatstyle.fa-table-fullheight {
    height: 100vh;
    overflow: hidden;
}

/* 2. panel 整条链使用 flex 纵向撑满 */
.flatstyle.fa-table-fullheight .panel-intro {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}
.flatstyle.fa-table-fullheight .panel-intro > .panel-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.flatstyle.fa-table-fullheight .panel-intro > .panel-body > .tab-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.flatstyle.fa-table-fullheight
    .panel-intro
    > .panel-body
    > .tab-content
    > .tab-pane.active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.flatstyle.fa-table-fullheight .panel-intro .widget-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 3. bootstrap-table 容器撑满剩余空间 */
.flatstyle.fa-table-fullheight .panel-intro .widget-body > .bootstrap-table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* toolbar / 通用搜索表单 保持自身高度 */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    > .bootstrap-table
    > .fixed-table-toolbar,
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    > .bootstrap-table
    > .fixed-table-pagination {
    flex: none;
}
/* 4. 表格滚动区占据剩余空间并内部滚动
 * 注意用 margin-bottom 而非 padding-bottom 给分页条让位：
 * 横向滚动条由浏览器绘制在本元素 border-box 底边内侧，不在内容流里，
 * padding 推不走它 —— 底边贴到 container 底部时会被 z-index:4 的分页条完全盖住。
 * margin-bottom 让 flex 把整个 border-box 底边上移，滚动条随之落到分页条上方。
 * （macOS 是 overlay 滚动条 + 触控板横滑手势，感知不到遮挡；Windows 鼠标只能拖滚动条，
 *   被遮住就等于完全无法横向滚动。) */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    > .bootstrap-table
    > .fixed-table-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    position: relative;
}
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-body {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-x: auto; /* 显式声明，避免被 overflow 简写覆盖后丢失横向滚动 */
    overflow-y: auto;
    margin-bottom: 62px;
}
/* 5. 表头吸顶：tbody 滚动、thead 固定不动（sticky） */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-body
    table
    > thead
    > tr
    > th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 3;
    background: #f7f8fa; /* 与 flatstyle 表头同色，且必须不透明，否则滚动透出下方行 */
}
/* border-collapse 下 sticky 表头边框会随滚动消失，用伪元素补边框 */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-body
    table
    > thead
    > tr
    > th::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    border-bottom: 1px solid #ddd;
}
/* 6. 分页条浮动固定在底部，始终可见 */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-pagination {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 4px 15px;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 4;
}
/* 7. 补齐 .tab-addtabs 到 .panel-intro 之间的中间容器高度链 */
.flatstyle.fa-table-fullheight > div,
.flatstyle.fa-table-fullheight .tab-content.tab-addtabs,
.flatstyle.fa-table-fullheight .tab-addtabs > div,
.flatstyle.fa-table-fullheight .tab-addtabs .tab-pane,
.flatstyle.fa-table-fullheight .tab-addtabs .tab-pane > div,
.flatstyle.fa-table-fullheight .tab-addtabs .row,
.flatstyle.fa-table-fullheight .tab-addtabs .row > [class*="col-"],
.flatstyle.fa-table-fullheight .tab-addtabs .content {
    height: 100%;
    min-height: 0;
}
/* 8. 修复 sticky 表头失效：table 的 overflow:hidden 会使其成为 sticky 的定位容器 */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-body
    > table {
    overflow: visible !important;
}

/* 9. 表格滚动区滚动条美化
 * Windows/Linux 是占布局的经典滚动条，默认 15px 灰条在浅色表格里很突兀；
 * macOS overlay 滚动条不受 ::-webkit-scrollbar 影响，保持系统原生行为。
 * 只作用于表格滚动区，不动全局滚动条。 */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-body {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c5cbd4 transparent;
}
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-body::-webkit-scrollbar-track {
    background: #f2f4f7;
    border-radius: 5px;
}
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-body::-webkit-scrollbar-thumb {
    background: #c5cbd4;
    border-radius: 5px;
}
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-body::-webkit-scrollbar-thumb:hover {
    background: #a3abb8;
}
/* 横竖滚动条交汇的方角，避免出现默认的白色缺口 */
.flatstyle.fa-table-fullheight
    .panel-intro
    .widget-body
    .fixed-table-container
    > .fixed-table-body::-webkit-scrollbar-corner {
    background: #f2f4f7;
}