html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    background: #fff;
    height: 100%;
    font-size: 12px;
    margin: 0;
    padding: 0;
    font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

.fs-10 { font-size:10px !important; }
.fs-12 { font-size:12px !important; }
.fs-14 { font-size:14px !important; }
.fs-16 { font-size:16px !important; }
.fs-18 { font-size:18px !important; }
.fs-20 { font-size:20px !important; }
.fs-22 { font-size:22px !important; }
.fs-24 { font-size:24px !important; }
.fs-26 { font-size:26px !important; }
.fs-28 { font-size:28px !important; }
.fs-30 { font-size:30px !important; }
.fs-32 { font-size:32px !important; }

#app {
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.nva {
    margin: 10px 0 15px;
    display: flex;
    align-items: center;
    display: -webkit-flex;
}

.h90_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
}

.h90_dialog .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
}

.h90_dialog .el-dialog__body {
    position: absolute;
    left: 0;
    top: 54px;
    bottom: 70px;
    right: 0;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
}

.h90_dialog .el-dialog__footer {
    position: absolute;
    left: 0;
    height: 70px;
    bottom: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
}

/* 导航菜单样式 begin */
.el-tabs--top {
    margin-top: 3px;
    float: right;
    margin-right: 100px;
}

.title_name {
    float: left;
}

.title_icon {
    margin-left: 5px;
}

.main-container .app-main {
    position: relative;
    width: calc(100% - 16px);
    box-sizing: border-box;
    background: #fff;
    border-radius: 6px;
    margin: 0 8px 5px 8px;
    -webkit-box-sizing: border-box;
    padding: 5px 10px 15px;
    overflow: hidden;
    height: 100%;
}

.main-container .app-main-container {
    padding: 5px 10px;
    overflow: auto;
}

.navbar {
    height: 64px;
    overflow: hidden;
    position: relative;
    background: #fff;
    z-index: 1000;
    box-sizing: border-box;
    -webkit-transition: left .28s;
    transition: left .28s;
}

.navbar .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    padding: 0px 15px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.navbar .hamburger-container .el-breadcrumb {
    margin-left: 10px;
}

.navbar .hamburger-container:hover {
    background: rgba(0, 0, 0, 0.025);
}

.navbar .hamburger-container .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.navbar .hamburger-container .hamburger.is-active {
    transform: rotate(180deg);
}

.navbar .breadcrumb-container {
    float: left;
}

.navbar .right-menu {
    float: right;
    height: 100%;
    line-height: 64px;
    padding-left: 10px;
    padding-right: 5px;
}

.navbar .right-menu:focus {
    outline: none;
}

.navbar .right-menu .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #5a5e66;
    vertical-align: text-bottom;
}

.navbar .right-menu .right-menu-item .hover-effect {
    cursor: pointer;
    transition: background 0.3s;
}

.navbar .right-menu .right-menu-item .hover-effect:hover {
    background: rgba(0, 0, 0, 0.025);
}

.navbar .right-menu .avatar-container {
    cursor: pointer;
    margin-right: 0;
}

.navbar .right-menu .avatar-container:hover .title_name {
    color: rgb(255, 106, 0);   
}

.navbar .right-menu .avatar-container .avatar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    display: -webkit-flex;
}

.navbar .right-menu .avatar-container .avatar-wrapper .user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.navbar .right-menu .avatar-container .avatar-wrapper .el-icon-arrow-down {
    cursor: pointer;
    position: absolute;
    right: -20px;
    top: 28px;
    font-size: 14px;
    display: none;
}

.app-wrapper {
    width: 100%;
    height: 100%;
    background: #f0f2f5;
    background-size: 100%;
    background-repeat: no-repeat;;
}

.drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
}

.fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - 210px);
    transition: width 0.28s;
}

.hideSidebar .fixed-header {
    width: calc(100% - 54px);
}

.mobile .fixed-header {
    width: 100%;
}

a {
    text-decoration: none;
}

#app .main-container {
    height: 100%;
    -webkit-transition: margin-left .28s;
    transition: margin-left .28s;
    margin-left: 240px;
    position: relative;
}



#app .sidebar-container .horizontal-collapse-transition {
    -webkit-transition: width 0s ease-in-out, padding-left 0s ease-in-out, padding-right 0s ease-in-out;
    transition: width 0s ease-in-out, padding-left 0s ease-in-out, padding-right 0s ease-in-out
}

#app .sidebar-container .scrollbar-wrapper {
    overflow-x: hidden !important
}

#app .sidebar-container .el-scrollbar__bar.is-vertical {
    right: 0
}

#app .sidebar-container .el-scrollbar {
    height: 100%
}

#app .sidebar-container.has-logo .el-scrollbar {
    height: calc(100% - 50px)
}

#app .sidebar-container .is-horizontal {
    display: none
}

#app .sidebar-container a {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

#app .sidebar-container .svg-icon {
    margin-right: 16px
}

#app .sidebar-container .el-menu {
    border: none;
    height: 100%;
    width: 100% !important
}

#app .sidebar-container .el-menu-item img {
    width: 18px;
    padding: 0 7px 0 3px;
}

#app .hideSidebar .sidebar-container {
    width: 54px;
}

#app .hideSidebar .main-container {
    margin-left: 54px
}

#app .hideSidebar .submenu-title-noDropdown {
    padding: 0 !important;
    position: relative;
    text-align: center
}

#app .hideSidebar .submenu-title-noDropdown .el-tooltip {
    padding: 0 !important
}

#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon {
    margin-left: 20px
}

#app .hideSidebar .el-submenu {
    overflow: hidden;
    text-align: center
}

#app .hideSidebar .el-submenu [class^=el-icon-] {
    margin-right: 0;
}

#app .hideSidebar .el-submenu .el-menu {
    display: none;
}

#app .hideSidebar .el-submenu>.el-submenu__title {
    padding: 0 !important;
}

#app .hideSidebar .el-submenu .el-submenu__title .menu-text {
    display: none;
}

#app .hideSidebar .el-submenu>.el-submenu__title .svg-icon {
    margin-left: 20px
}

#app .hideSidebar .el-submenu>.el-submenu__title .el-submenu__icon-arrow {
    display: none
}

#app .hideSidebar .el-menu--collapse .el-submenu>.el-submenu__title>span {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
}

#app .hideSidebar .el-menu .el-menu-item>span {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
}

#app .el-menu--collapse .el-menu .el-submenu {
    min-width: 210px !important
}

#app .mobile .main-container {
    margin-left: 0
}

#app .mobile .sidebar-container {
    -webkit-transition: -webkit-transform .28s;
    transition: -webkit-transform .28s;
    transition: transform .28s;
    transition: transform .28s, -webkit-transform .28s;
    width: 210px !important
}

#app .mobile.hideSidebar .sidebar-container {
    pointer-events: none;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transform: translate3d(-210px, 0, 0);
    transform: translate3d(-210px, 0, 0)
}

#app .withoutAnimation .main-container,
#app .withoutAnimation .sidebar-container {
    -webkit-transition: none;
    transition: none
}

.el-menu-item, .el-submenu__title, .el-submenu .el-menu-item {
    font-size: 14px;
    height: 56px;
    line-height: 56px;
    white-space: nowrap;
    list-style: none;
}

.el-menu--vertical>.el-menu .svg-icon {
    margin-right: 16px
}

.el-menu--vertical>.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto
}

.el-menu--vertical>.el-menu--popup::-webkit-scrollbar-track-piece {
    background: #d3dce6
}

.el-menu--vertical>.el-menu--popup::-webkit-scrollbar {
    width: 6px
}

.el-menu--vertical>.el-menu--popup::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px
}


.sidebarLogoFade-enter-active {
    -webkit-transition: opacity 1.5s;
    transition: opacity 1.5s
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
    opacity: 0
}

.sidebar-logo-container .sidebar-logo-link {
    height: 100%;
    width: 100%
}

.sidebar-logo-container .sidebar-logo-link .sidebar-logo {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 12px
}

.sidebar-logo-container .sidebar-logo-link .sidebar-title {
    display: inline-block;
    margin: 0;
    font-weight: 600;
    line-height: 50px;
    font-size: 14px;
    vertical-align: middle
}

.sidebar-logo-container.collapse .sidebar-logo {
    margin-right: 0
}

/* 顶部右上角menu下拉框样式 */

.user-dropdown li.el-dropdown-menu__item {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding: 0;
}

.user-dropdown li.el-dropdown-menu__item a {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

.user-dropdown li.el-dropdown-menu__item i {
    font-size: 18px;
}

.user-dropdown li.el-dropdown-menu__item img,
.user-dropdown li.el-dropdown-menu__item img {
    width: 18px;
    margin-right: 5px;
}

.user-dropdown .el-dropdown-menu__item--divided:before {
    display: none;
}

/* element ui  */
.el-table th {
    background: rgb(243, 243, 244) !important;
    color: rgba(0,0,0,.85) !important;
    font-weight: bold;
}

.el-dialog__header {
    padding: 10px 0 5px 20px;
    border-bottom: 1px solid #e7eaec;
    background: #fff;
}

.el-dialog__body {
    padding: 20px 15px 5px 15px !important;
    flex: 1;
    overflow: auto;
}

.el-dialog__title {
    font-size: 15px;
    color: rgb(103, 106, 108);
}

.el-dialog__headerbtn {
    top: 10px;
}

.dialog-footer {
    text-align: center;
    padding: 10px 0 5px 0;
}

.index_dialog1 {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    top: 30px !important;
    right: 30px !important;
    bottom: 30px !important;
    left: 30px !important;
}

.index_dialog1 .el-dialog {
    margin: 0 auto !important;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.index_dialog1 .el-dialog__body {
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 70px;
    right: 0;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
}

.index_dialog1 .el-dialog__footer {
    position: absolute;
    left: 0;
    height: 70px;
    bottom: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
}

.navbar .top-bar__item {
    position: relative;
    display: inline-block;
    height: 64px;
    font-size: 16px;
}

.top-search {
    line-height: 64px;
    position: absolute!important;
    top: 0;
    width: 400px!important;
}

.top-search .el-input__inner {
    font-size: 13px;
    background-color: transparent;
    border: 1px solid #f0f0f0;
}

.avue-tags {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    padding: 0 20px 0 10px;
    margin-bottom: 10px;
    border-top: 1px solid #f6f6f6;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    height: 40px;
    line-height: 40px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-between;
    -webkit-transition: left .28s;
    transition: left .28s;
}

.avue-tags .avue-tags-left {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.avue-tags .avue-tags-right {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.avue-tags .avue-tags-right .el-button.is-circle {
    padding: 6px;
}

.right-container {
    display: flex;
    display: -webkit-flex;
    float: right;
    align-items: center;
    margin-right: 15px;
}

.keepContent .main-container {
    margin-left: 0 !important;
}

.keepContent .sidebar-container {
    width: 0 !important;
}

.keepContent .navbar {
    height: 0 !important;
}

.keepContent .avue-tags {
    -webkit-transition: left .28s;
    transition: left .28s;
}

.x-bottom {
    position: fixed;
    height: 40px;
    line-height: 40px;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: #fff;
}


/* gray theme begin */
.gray .sidebar-container {
    -webkit-transition: width .28s;
    transition: width .28s;
    width: 240px;
    background-color: rgb(245,245,245) !important;
    box-sizing: border-box;
    color: #333 !important;
    height: 100%;
    position: fixed;
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    -webkit-transition: width .28s;
    transition: width .28s;
}

.gray .hideSidebar .sidebar-container .sidebar-logo-container {
    text-align: center;
    padding-left: 0;
    background: rgb(245,245,245) !important;
    color: rgb(255, 106, 0) !important; 
}

.gray .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 64px;
    line-height: 64px;
    background: rgb(245,245,245) !important;
    color: rgb(255, 106, 0); 
    text-align: left;
    overflow: hidden;
    padding-left: 8px;
    box-sizing: border-box;
}

.gray .sidebar-container .el-submenu .el-menu-item,
.gray .sidebar-container .nest-menu .el-submenu>.el-submenu__title {
    min-width: 240px !important;
    background-color: rgb(245,245,245) !important;
}

.gray .sidebar-container .el-submenu__title:hover,
.gray .sidebar-container .submenu-title-noDropdown:hover,
.gray .sidebar-container .el-submenu .el-menu-item:hover,
.gray .sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover {
    background-color: rgb(235,235,235) !important;
}

.gray .el-menu--vertical .el-menu-item:hover,
.gray .el-menu--vertical .nest-menu .el-submenu>.el-submenu__title:hover {
    background-color: rgb(235,235,235) !important;
}

.gray .sidebar-container .el-menu-item.is-active {
    background-color:#DEDEDE !important;
    font-weight: 800;
}

.gray .sidebar-container .el-menu-item.is-active:before, 
.gray .sidebar-container .el-submenu__title.is-active:before {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: rgb(255, 106, 0);
    position: absolute;
}

.gray .sidebar-logo-container .sidebar-logo-link .sidebar-title {
    color: rgb(255, 106, 0) !important;
    font-size: 16px;
    font-weight: 300;
}

.gray .el-menu--vertical>.el-menu--popup::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
}

.gray .sidebar-container .has-logo {
    border-bottom: 1px solid #ececec;
}
/* gray theme end */

/* blue theme begin */
.blue .sidebar-container {
    -webkit-transition: width .28s;
    transition: width .28s;
    width: 240px;
    background-color: #1a67b7 !important;
    box-sizing: border-box;
    color: #fff !important;
    height: 100%;
    position: fixed;
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    -webkit-transition: width .28s;
    transition: width .28s;
}

.blue .hideSidebar .sidebar-container .sidebar-logo-container {
    text-align: center;
    padding-left: 0;
    background:  #234f8b !important;
    color: #fff !important; 
}

.blue .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 64px;
    line-height: 64px;
    background:#234f8b !important;
    color: #fff; 
    font-size: 20px;
    text-align: left;
    overflow: hidden;
    padding-left: 8px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 1024;
}

.blue .sidebar-container .el-submenu .el-menu-item,
.blue .sidebar-container .nest-menu .el-submenu>.el-submenu__title {
    min-width: 240px !important;
    background-color: #287acf !important;
}

.blue .sidebar-container .el-submenu__title:hover,
.blue .sidebar-container .submenu-title-noDropdown:hover,
.blue .sidebar-container .el-submenu .el-menu-item:hover,
.blue .sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover {
    background-color: #409eff !important;
}

.blue .el-menu--vertical .el-menu-item:hover,
.blue .el-menu--vertical .nest-menu .el-submenu>.el-submenu__title:hover {
    background-color: #409eff !important
}

.blue .sidebar-container .el-menu-item.is-active {
    background-color:#409EFF !important;
    font-weight: 800;
}

.blue .sidebar-container .el-menu-item.is-active:before, 
.blue .sidebar-container .el-submenu__title.is-active:before {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: #409eff;
    position: absolute;
}

.blue .sidebar-logo-container .sidebar-logo-link .sidebar-title {
    color: #fff !important;
    font-size: 16px;
    font-weight: 300;
}

.blue .el-menu--vertical>.el-menu--popup::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px
}

.blue .el-submenu__title i, 
.blue .el-menu-item i {
    color: #fff;
}

/* blue theme end */

/* darkblue theme begin */
.darkblue .sidebar-container {
    -webkit-transition: width .28s;
    transition: width .28s;
    width: 240px;
    background-color:#152A5C !important;
    color: #fff !important;
    height: 100%;
    position: fixed;
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    -webkit-transition: width .28s;
    transition: width .28s;
}

.darkblue .hideSidebar .sidebar-container .sidebar-logo-container {
    text-align: center;
    padding-left: 0;
    background:#152A5C !important;
    color:#fff !important; 
}

.darkblue .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 64px;
    line-height: 64px;
    background:#152A5C !important;
    color: #fff; 
    text-align: left;
    overflow: hidden;
    padding-left: 8px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: hsla(0,0%,100%,.8);
    border-bottom: 1px solid #eeeeee0d;
}

.darkblue .sidebar-container .el-submenu .el-menu-item,
.darkblue .sidebar-container .nest-menu .el-submenu>.el-submenu__title {
    min-width: 240px !important;
    background-color:#152A5C !important;
}

.darkblue .sidebar-container .el-submenu__title:hover,
.darkblue .sidebar-container .submenu-title-noDropdown:hover,
.darkblue .sidebar-container .el-submenu .el-menu-item:hover,
.darkblue .sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover {
    background-color: #0251F4 !important;
}

.darkblue .el-menu--vertical .el-menu-item:hover,
.darkblue .el-menu--vertical .nest-menu .el-submenu>.el-submenu__title:hover {
    background-color: #0251F4 !important
}

.darkblue .sidebar-container .el-menu-item.is-active {
    background-color:#2E70FD !important;
    font-weight: 800;
}

/* .darkblue .sidebar-container .el-menu-item.is-active:before, 
.darkblue .sidebar-container .el-submenu__title.is-active:before {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: #ffffff87;
    position: absolute;
} */

.darkblue .sidebar-logo-container .sidebar-logo-link .sidebar-title {
    color: #fff !important;
    font-size: 16px;
    font-weight: 300;
}

.darkblue .el-menu--vertical>.el-menu--popup::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
}

.darkblue .el-submenu__title i, 
.darkblue .el-menu-item i {
    color: #fff;
}
/* darkblue theme end */


/* darkgray theme begin */
.darkgray .sidebar-container {
    -webkit-transition: width .28s;
    transition: width .28s;
    width: 240px;
    background-color:#20222a !important;
    box-sizing: border-box;
    color: #fff !important;
    height: 100%;
    position: fixed;
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    -webkit-transition: width .28s;
    transition: width .28s;
}

.darkgray .hideSidebar .sidebar-container .sidebar-logo-container {
    text-align: center;
    padding-left: 0;
    background:#20222a !important;
    color:#fff !important; 
}

.darkgray .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 64px;
    line-height: 64px;
    background: #20222a !important;
    color: #fff !important; 
    font-size: 20px;
    text-align: left;
    overflow: hidden;
    padding-left: 8px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: hsla(0,0%,100%,.8);
    z-index: 1024;
    border-bottom: 1px solid #1c1c1ca8;
}

.darkgray .sidebar-container .el-submenu .el-menu-item,
.darkgray .sidebar-container .nest-menu .el-submenu>.el-submenu__title {
    min-width: 210px !important;
    background-color:#20222a !important;
}

.darkgray .sidebar-container .el-submenu__title:hover,
.darkgray .sidebar-container .submenu-title-noDropdown:hover,
.darkgray .sidebar-container .el-submenu__title:hover i,
.darkgray .sidebar-container .submenu-title-noDropdown:hover i {
    color: #fff !important;
}

.darkgray .sidebar-container .el-submenu .el-menu-item:hover,
.darkgray .sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover,
.darkgray .sidebar-container .el-submenu .el-menu-item:hover i,
.darkgray .sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover i {
    color: #fff !important;
}

.darkgray .el-menu--vertical .el-menu-item:hover,
.darkgray .el-menu--vertical .nest-menu .el-submenu>.el-submenu__title:hover,
.darkgray .el-menu--vertical .el-menu-item:hover i,
.darkgray .el-menu--vertical .nest-menu .el-submenu>.el-submenu__title:hover i {
    color: #fff !important;
}

.darkgray .sidebar-container .el-menu-item.is-active {
    background-color: rgba(0,0,0,.8) !important;
    color: #fff !important;
}

.darkgray .sidebar-container .el-menu-item.is-active i {
    color: #fff !important;
}

.darkgray .sidebar-container .el-menu-item.is-active:before, 
.darkgray .sidebar-container .el-submenu__title.is-active:before {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: #409eff;
    position: absolute;
}

.darkgray .sidebar-logo-container .sidebar-logo-link .sidebar-title {
    color: #EFEFEF !important;
    font-size: 16px;
    font-weight: bold;
}

.darkgray .el-menu--vertical>.el-menu--popup::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px
}

.darkgray .el-submenu__title i, 
.darkgray .el-menu-item i {
    color: hsla(0,0%,100%,.7);
}

/* darkgray theme end */

.content-scrollbar>.el-scrollbar__wrap {
    overflow-x: hidden;
}

.el-autocomplete-suggestion li .menu-item {
    width: 100%;
    display: flex;
    align-items: center;
}

.selected-theme {
    background: #ECF5FF;
}