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

/* 深色模式 */
:root {
    --bgcolor: #262626;
    /* 全局背景色 */
    --lightenbgcolor: #404040;
    --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 .3s ease-in-out
}

/* 全局鼠标进入放大 */
/* 鼠标进入时的样式 */
.flatstyle .panel-statistics,
.flatstyle .sm-st,
.flatstyle .stats-container .stat-col,
.flatstyle #statistics .panel,
.flatstyle .suspension {
    transition: all .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, .3);
    box-shadow: 0 14px 24px #0003;
    z-index: 999;
    border-radius: 4px
}

/* 主题控制面板 */
.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: 4px;
    border-top-right-radius: 4px;
}

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

.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: 5px;
    background-color: #ffffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
    margin-top: 5px;
}

/* 深色模式 */
.flatstyle.darktheme #firstnav .navbar-custom-menu {
    border-radius: 5px;
    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: 5px;
    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: 5px;
    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;
}

/* 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: 4px;
    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: 0px 0px 12px rgba(0, 0, 0, .12);
    border-radius: 4px;
    /* overflow: hidden; */
    transition: width .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:hover>a,
.flatstyle .sidebar-menu>li.active>a {
    color: #000000;
    background: #ecf5ff;
    border-left-color: #ecf5ff;
}

/* 深色模式 */
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 .treeview-menu>li>a {
    color: #000;
}

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

.flatstyle .treeview-menu>li.active>a,
.flatstyle .treeview-menu>li>a:hover {
    color: #000000;
}

/* 左侧菜单内搜索 */
.flatstyle .sidebar-form {
    border-radius: 3px;
    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>a,
.flatstyle .treeview-menu>li:hover>a {
    background-color: #ecf5ff;
}

.flatstyle .sidebar-menu>li.active>a {
    color: #000000;
    background: #fff;
    border-left-color: #ecf5ff;
}
/* 深色模式 */
.flatstyle.darktheme .sidebar-menu > li.active > a{
    color: #fff;
    background: #7f7f7f;
    border-left-color: #7f7f7f;
}
.flatstyle .sidebar-menu>li:hover>a {
    border-left-color: transparent;
}

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

.flatstyle .sidebar-menu li.treeview.active>a,
.flatstyle .sidebar-menu li.treeview.treeview-open>a {
    background-color: #ffffff;
    border-left-color: #ecf5ff;
}

.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:hover>a,
.flatstyle.sidebar-collapse .sidebar-menu li.active>a {
    color: #409eff;
    background: #ecf5ff;
}

.flatstyle.sidebar-collapse .sidebar-menu .treeview-menu li.active>a {
    color: #409eff;
    background: #ecf5ff;
}

.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 {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
}

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

.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: 5px;
}

/* 按钮 */
.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;
}

/* 翻页 */
.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, .12);
        height: 40px !important;
        width: 40px !important;
        line-height: 40px !important;
        margin-top: 5px;
        border-radius: 5px;
    }

    .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;
    }
}