/**
新版css
主题颜色 #1EBBA6
 */
:root {
    --theme-color-primary: #1EBBA6;
}

#sidebar-id {
    will-change: transform;
}
.el-card__header {
    padding: 0;
    border-bottom:none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background:#FFFFFF;
    height: 0;
    color: #fff;
    overflow: hidden;
}
.el-footer {
    background-color: #f5f5f5;
    color: #333;
    line-height: 60px;
}
.el-main {
    background-color: #ffffff;
    color: #333;
    padding: 10px;
}
.body {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    top:0!important;
}

.el-header .title {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

.el-header .topArea {
    float: right;
}

.el-header .topArea a {
    margin-right: 20px;
    color: white;
    cursor: pointer;
}

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

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

.pub_dialog .el-dialog .el-dialog__body {
    position: absolute;
    left: 0;
    top: 65px;
    bottom: 65px;
    right: 0;
    padding: 0;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
}

.pub_dialog .el-dialog .el-dialog__footer {
    position: absolute;
    bottom: 0;
    right: 0;
}

.el-pagination {
    margin-top: 10px;
    text-align: right;
}
.el-container{
    background-color: #FFFFFF;
}
.el-container>.el-main {
    padding:0 0 0 36px!important;
    margin-top: 30px;
}
.root-sidebar{
    background-color:var(--theme-color-primary);
    width: 120px!important;

}

.sidebar{
    background-color:var(--theme-color-primary);
    width:120px!important;
    height: calc(100% - 26px - 42px );
    margin-top: 20px;

}
.logo{
    margin-top: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo .logo-img{
    width: 72px;
    height: 36px;
    object-fit: cover;
}
.root-menus .root-menu:nth-child(1) {
    margin-top: 0;
}
.root-menus .root-menu:last-child{
    margin-bottom: 30px;
}
.root-menus{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    /*padding:10px 32px;*/
}
.menus{
    position: relative;
}
.root-menu {
    margin-top: 16px;
    width: 60px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    /*padding: 6px 16px;*/
}

.root-menus:hover .root-menu:not(:hover)  {
    background: transparent;
    border-radius: 0;
    transition: all .2s;
}
.root-menu:hover {

    background: #EEFFFD;
    border-radius: 8px 8px 8px 8px;
    transition: all .2s;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 100% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    60% {
        transform: scale3d(0.95, 0.95, 0.95); /* 稍微缩小一点，增强弹性感 */
    }
}

.root-menu:hover .root-menu-title{
    color: var(--theme-color-primary)!important;
    transition: all .2s;
}

/*.root-menu:hover .root-menu-icon img.icon{*/
/*    display: none;*/
/*}*/

/*.root-menu:hover .root-menu-icon img.active_icon{*/
/*    display: block;*/
/*}*/

/*.root-menus:hover .root-menu:not(:hover) img.active_icon{*/
/*    display: none;*/
/*    transition: all .2s;*/
/*}*/
/*.root-menus:hover .root-menu:not(:hover) img.icon{*/
/*    display: block;*/
/*    transition: all .2s;*/
/*}*/
.root-menus:hover .root-menu:not(:hover)  {
    background: transparent;
    border-radius: 0;
    transition: all .2s;
}
.root-menu .root-menu-icon{
    width: 60px;
    height: 23px;
    text-align: center;
    color: #FFFFFF;
    position: relative;
}
.root-menu.is-active .root-menu-icon img.icon{
    opacity: 0;
    transition: all .2s;
}
.root-menu.is-active .root-menu-icon img.active_icon{
    opacity: 1;
    transition: all .2s;
}
.root-menu:hover .root-menu-icon img.icon{
    opacity: 0;
    transition: all .2s;
}
.root-menu:hover .root-menu-icon img.active_icon{
    opacity: 1;
    transition: all .2s;
}
.root-menus:hover .root-menu:not(:hover)  .root-menu-icon img.active_icon{
    opacity: 0;
    transition: all .2s;
}
.root-menus:hover .root-menu:not(:hover)  .root-menu-icon img.icon{
    opacity: 1;
    transition: all .2s;
}
.root-menus:hover .root-menu:not(:hover) .root-menu-title {
    color: #ffffff!important;
    transition: all .2s;
}



.root-menu .root-menu-icon img.icon{
    width: 24px;
    height: 24px;
    text-align: center;
    color: #FFFFFF;
    position: absolute;
    left: 18px;
    opacity: 1;
}
.root-menu .root-menu-icon img.active_icon{
    width: 26px;
    position: absolute;
    height: 26px;
    left: 18px;
    opacity: 0;
}


.root-menu .root-menu-title{
    margin-top: 2px;
    font-size: 14px;
    color: #ffffff;
    width: 60px;
    text-align: center;
}
.root-menu.is-active{
    background: #EEFFFD;
    border-radius: 8px 8px 8px 8px;
}
/*.root-menu.is-active .root-menu-icon{*/
/*    background: linear-gradient( 234deg, var(--theme-color-primary) 0%, #54EDD8 100%);*/
/*}*/
.root-menu.is-active .root-menu-title{
    color: var(--theme-color-primary)!important;
}


.sub-menus{
    margin-top: 32px;
    width:calc(100% - 620px) ;
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    margin-right: 20px;
    min-height: 40px;
}
.sub-menus .sub-menu{
    margin-right: 50px;
    margin-bottom: 20px;
    max-width: 120px;
    cursor: pointer;
    height: 24px;
}
.sub-menu.is-active .sub-menu-title{
    font-weight: 700;
    font-size: 18px;
    color: var(--theme-color-primary);
}
.sub-menu .sub-menu-title{
    font-size: 18px;
    color: #A4A4A4;
    width: 100%;
}
.sub-menu:hover .sub-menu-title{
    font-weight: 700;
    font-size: 18px;
    color: var(--theme-color-primary);
    transition: all .2s;
}
.sub-menus:hover .sub-menu:not(:hover) .sub-menu-title{
    font-size: 18px!important;
    color: #A4A4A4!important;
    transition: all .2s;
}
.sub-menus+.sub-tree-menus{
    width:calc(100% - 620px);
}
.sub-tree-menus {
    margin-top: 10px;
    width:100%;
    background-color: #FFFFFF;
    display: flex;
    flex-wrap:wrap;
    overflow-x: auto;
    margin-right: 20px;
}
.sub-tree-menu{
    margin-right: 20px;
    margin-bottom: 20px;
    width: fit-content;
    cursor: pointer;
    height: 22px;
    /* 基本 */
    border-radius: 4px;
    padding:5px 16px;
    text-align: center;
    color: #606266;
    font-size: 14px;
    border: 1px solid #DCDFE6; /* #DCDFE6 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: content-box!important;
}
.sub-tree-menu.is-active{
    color: var(--theme-color-primary);
    border: 1px solid var(--theme-color-primary);
}
.sub-tree-menu:hover{
    color: var(--theme-color-primary);
    border: 1px solid var(--theme-color-primary);
    transition: all .2s;
}
.sub-tree-menus:hover .sub-tree-menu:not(:hover){
    color: #606266;
    border: 1px solid #DCDFE6; /* #DCDFE6 */
    transition: all .2s;
}

.el-container>.el-main>.el-main{
    padding: 0!important;
    margin-top: 10px;
}
.ellipsis {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示为省略号 */
}
::-webkit-scrollbar {
    width: 0;
    /*对垂直流动条有效*/
    height: 5px;
    /*对水平流动条有效*/
}
.version-switch{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 20px;
    left: 130px;
    cursor: pointer;
    z-index: 9999!important;
}
.version-switch .version-switch-img{
    width: 24px;
    height: 24px;
}
.version-text {
    display: none;
    width: 120px;
    top:-20px;
    text-align: center;
    right: -50px;
    position: absolute;
    font-size: 14px;
    color: var(--theme-color-primary);
}
.version-switch:hover .version-text{
    display: block;
}
.el-container .el-main .el-card{
    border:none!important;
}
.el-dialog__footer{
    border:none;
}
.el-dialog__body{
    padding:30px 40px 0 40px;
}
.el-dialog__footer{
    padding-bottom: 30px!important;
}
.el-tag{
    cursor: pointer;
}
/*.el-button + .el-button{*/
/*    margin-right: 12px;*/
/*    margin-left: 0;*/
/*}*/
.el-button{
    font-size: 14px;
}
.el-button--text-danger{
    color:#E13838;
}
.el-button--text-edit-primary{
    color:#409EFF;
}
.el-table th, .el-table thead tr{
    background: #E7FFFA!important;
    color: #A4A4A4;

}
.el-card__body{
    padding-left: 0;
    padding-top: 0;
}
.status--open-text{
    color: var(--theme-color-primary)!important;
}
.status--close-text{
    color: #E85C5C!important;
}
.status-close-btn{
    background-color: #E85C5C;
    color: #FFFFFF;
    border-color:#E85C5C ;
}
.el-button--text-edit-primary-1{
    color: var(--theme-color-primary);
}
.el-button--text-edit-primary-2{
    background: linear-gradient(240deg, var(--theme-color-primary) 13%, #54EDD8 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.el-button--text-edit-warning{
    color: #D88621;
}
.el-button--text-edit-warning-1{
    color: #EB995E;
}
.el-button--text-edit-warning-2{
    color: #FF7B00;
}


.type-tag{
    width: 142px;
    /*height: 34px;*/
    border-radius: 4px;
    padding: 6px 9px 6px 10px;
    font-size: 14px;
    margin-bottom: 10px;
}
.type-tag-warning{
    background: #FDF8F1;
    color: #D97000;
}
.type-tag-warning-1{
    background: #FFF0CD;
    color: #A77E1E;
}
.type-tag-primary{
    color: var(--theme-color-primary);
    background: #E1FFEF;
}
.type-tag-danger{
    color: #DF4E1E;
    background: #FFDACD;
}
.wk_center{
    display: flex;
    justify-content: center;
    align-items: center;
    color:#c8c9cc;
    margin:20px auto;
}
.statistics-card-list{
    display: flex;
    margin-top:30px;
}
.statistics-card-row{
    /* 框-颜色 */
    background: #E7FFFA;
    width: 200px;
    height: 92px;
    /* 圆角-4 */
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    margin-right: 60px;
}
.statistics-card-row .card-title {
    font-size: 12px;
    color: #606266;
}
.statistics-card-row .card-content {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #3F4442;
    margin-top: 6px;
}
.el-tag.el-tag--success{
    color: var(--theme-color-primary)!important;
    background: #E1FFEF!important;
    border-color: #E1FFEF!important;
}
.edit-btn{
    color: #fff !important;
    background: #409EFF !important;
    border-color: #409EFF !important;
}
.el-tag+.el-tag{
    margin-bottom: 10px;
}
.export-btn{
    background-color: #FF9729!important;
    border-color: #FF9729!important;
    font-size: 14px;
    font-weight: 500;
}
.common-form::before{
    background:var(--theme-color-primary)!important ;
}
.card-main{
    margin-top: 30px;
}


/* 覆盖进度条颜色 */
#nprogress .bar {
    background: var(--theme-color-primary) !important;
    height: 3px!important; /* 可选：调整高度 */
}

/* 覆盖光泽效果颜色 */
#nprogress .peg {
    box-shadow: 0 0 10px var(--theme-color-primary), 0 0 5px var(--theme-color-primary) !important;
}

/* 如果启用spinner，修改它的颜色 */
#nprogress .spinner-icon {
    border-top-color: var(--theme-color-primary) !important;

    border-left-color: var(--theme-color-primary) !important;
}

.right-main{
    width: 560px;
    display: flex;
    position: fixed;
    right:0;
    top: 20px;
    z-index: 20!important;
    align-items: center;
}
.right-main .search{
    width: 120px;
    display: flex;
    align-items: center;
    margin:auto 20px auto auto;

}
.right-main .doc{
    font-size: 16px;
    font-weight: 500;
    color: #FF3A2C;
    line-height: 50px;
    margin-right: 10px;
    cursor: pointer;
    text-decoration: none;
}


.right-main .search .el-input .el-input__inner{
    background-color: rgb(244, 244, 245);
    border-radius: 16px;
    border:none;
}
.right-main .search .el-input__prefix .el-input__icon.el-icon-search,
.right-main .search .el-input .el-input__inner::placeholder,
.right-main .search .suffix-text{
    color:rgb(113, 113, 122);
}
.right-main .search .suffix-text{
    background-color: #fff;
    border-radius: 4px  12px 12px 4px;
    margin-top: 4px;
    padding:4px 6px;
    cursor:pointer;
    font-size: 12px;
}
.search-form-class{
    width: 90%;

}
.search-menu-dialog .el-dialog__body{
    padding:20px;
}

.search-menu-dialog .content{
    height: 200px!important;
    overflow: hidden scroll;
    outline: none; /* 移除默认聚焦轮廓（可选） */


}
.search-menu-dialog .content .no-data{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

}
.search-menu-dialog .el-dialog__header{
    padding-bottom: 0!important;
}
.search-form-class .el-input__inner{
    border:none!important;
}
.search-menu-dialog .content .menu-log-list{
    width: 100%;
    height: 100%;
}
.search-menu-dialog .content .menu-log-list .menu-log .menu-log-img{
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
.search-menu-dialog .content .menu-log-list .menu-log{
    background-color: rgb(244, 244, 245);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 16px;
    color:rgb(50, 54, 57);
    font-size: 16px;
    cursor: pointer;
}
.search-menu-dialog .content .menu-log-list .menu-log .menu-log-title{
    flex: 1;
}
/*.search-menu-dialog .content .menu-log-list .menu-log .el-icon-close{*/
/*  */
/*}*/
.search-menu-dialog .content:hover .menu-log:not(:hover){
    background-color: rgb(244, 244, 245)!important;
    color:rgb(50, 54, 57)!important;
}
.search-menu-dialog .content .menu-log-list .menu-log.active,
.search-menu-dialog .content .menu-log-list .menu-log:is(:hover){
    background-color: var(--theme-color-primary);
    color:#FFFFFF;
}

.search-menu-dialog .el-dialog__footer{
    border-top: 1px solid #f4f4f4;
    padding-bottom: 10px!important;
}
.search-menu-dialog .dialog-footer{
    display: flex;
    align-items: center;
}
.dialog-footer-btn .btn-img{
    width: 14px;
    height: 14px;
    object-fit: cover;
}
.dialog-footer-btn{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--theme-color-primary);
    margin-right: 10px;
}


.right-main .user{
    display: flex;
    margin-left: 8px;
    position: relative;
}
.right-main  .userinfo{
    display: flex;
}
.right-main  .userinfo .user-img{
    margin-right: 6px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
}
.user-img .el-image{
    border-radius: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

.right-main  .userinfo .user-right{
    display: flex;
    margin-left: 10px;
    /*align-items: center;*/
    justify-content: center;
    flex-direction: column;

}
.right-main  .userinfo .user-right .username{
    font-size: 14px;
    color: #3F3F44;
    width: 200px;
}
.right-main  .userinfo .user-right .shop-type{
    color: #3F3F44;
    margin-top: 4px;
    font-size: 12px;

}

.u-t{
    flex:1;
}
.right-main  .user{
    flex: 1;
}
.right-main  .user .opt{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.right-main  .user .opt .setting {
    margin-right: 26px;
}


.right-main .opt-popup{
    position: absolute;
    bottom: -160px;
    left:-20px;
    background: #FFFFFF;
    padding: 20px 40px;
    cursor: pointer;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);

    z-index: 1000!important;
    visibility: hidden;
    transform: translateY(-10px);
    opacity: 0;
    /* 过渡动画 */
    transition:
            opacity 0.3s ease-in-out,
            visibility 0.3s ease-in-out,
            transform 0.3s ease-in-out;
}
.opt-popup.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

}
.right-main .opt-popup::before{
    content: "";
    position: absolute;
    top: -10px; /* 调整位置 */
    left: 80px;
    border-width: 0 10px 10px; /* 三角形大小 */
    border-style: solid;
    border-color: transparent transparent white; /* 颜色匹配背景 */
    filter: drop-shadow(0 -2px 1px rgba(0,0,0,0.1)); /* 可选阴影 */
}
.right-main .opt-popup .opt-row:not(:last-child){
    padding-bottom: 20px;
}
.right-main .opt-popup .opt-row{
    display: flex;
}
.right-main .opt-popup  .opt-img{
    width: 20px;
    height: 20px;
}
.right-main .opt-popup .opt-row .text {
    margin-left: 28px;
    color: #3F4442;
    font-size: 14px;
    line-height: 24px;
}
.user-img .el-image__error, .user-img .el-image__inner, .user-img .el-image__placeholder{
    width: 50px!important;
    height: 50px!important;
    border-radius: 50px;
}

.switch-version{
    font-size: 16px;
    font-weight: 500;
    color:var(--theme-color-primary);
    line-height: 50px;
    margin-right: 10px;
    cursor: pointer;
}
.wkflex{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.wkflex_text{
    margin-left:10px;
    width:150px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.new-common-header{
    position: fixed;
    background-color: #FFFFFF;
    width: 100%;
    left: 150px;
    z-index: 20!important;
}
.el-table .el-tag{
    font-size: 14px!important;
}
.more-expand{
    margin-top: 10px;
    /*text-align: center;*/
    color: #A4A4A4;
    font-size: 12px;
    cursor: pointer;
}
.edui-editor.edui-default{
    width: 100%!important;
}
.empty-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    color: #A1A1A1;
}
.empty-data .empty-data-img{
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}