/**
 * 一些组件，以w_ 开头
 */


/*============= 菜单项 ============*/

.w_left_remain {
    background: #3679c1;
    width: 100px;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

.w_left_menu {
    width: 100px;
    height: 100%;
    color: #fff;
    background: #4e5a69;
    position: fixed;
    top: 55px;
    left: 0;
    z-index: 2000;
    /* border-top: 1px solid #4b9af9; */
}

.w_left_menu .menu_ul {
    width: 100%;
}

.w_left_menu .first {
    /* border-bottom: 1px solid #4b9af9; */
    position: relative;
    width: 100%;
    /* min-height: 60px; */
    background: #4e5a69;
    text-align: center;
    /* padding: 10px 0; */
    transition: 0.3s;
    z-index: 3;
    line-height: 40px;
    font-size: 14px;
    /* margin-bottom: 5px; */
}

.w_left_menu .first .flag {
    color: #fff;
    text-decoration: none;
    display: flex;
    width: 100%;
    align-items: center;
    padding-left: 5px;
}

.w_left_menu .first .flag i {
    font-size: 28px;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 6px;
}

.w_menu_wrap ul li i.pulic{
    width: 20px;
    height: 20px;
    display: block;
    margin-right: 5px;
}

/* 通用icon */

.w_menu_wrap ul li i.pulic,
.w_left_menu .first .flag i.pulic {
    background: url(../../images/ic_classify.png) no-repeat center;
    background-size: 80%;
}


/* boss菜单icon */

.w_menu_wrap ul li i.bo_xitongguanli,
.w_left_menu .first .flag i.bo_xitongguanli {
    background: url(../../images/ic-system.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.bo_yuangongguanli,
.w_left_menu .first .flag i.bo_yuangongguanli {
    background: url(../../images/ic_staff.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.bo_xitongweihu,
.w_left_menu .first .flag i.bo_xitongweihu {
    background: url(../../images/ic_set.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.bo_kehuguanli,
.w_left_menu .first .flag i.bo_kehuguanli {
    background: url(../../images/ic_client.png) no-repeat center;
    background-size: 80%;
}


/* 后台管理icon */

.w_menu_wrap ul li i.dh_xitongguanli,
.w_left_menu .first .flag i.dh_xitongguanli {
    background: url(../../images/ic-system.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.dh_huiyuanguanli,
.w_left_menu .first .flag i.dh_kehuguanli {
    background: url(../../images/ic_member.png) no-repeat center;
    background-size: 94%;
}

.w_menu_wrap ul li i.dh_kucunguanli,
.w_left_menu .first .flag i.dh_kucunguanli {
    background: url(../../images/ic_invent.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.dh_dingdanguanli,
.w_left_menu .first .flag i.dh_dingdanguanli {
    background: url(../../images/ic_orders.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.dh_yuangongguanli,
.w_left_menu .first .flag i.dh_yuangongguanli {
    background: url(../../images/ic_staff.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.dh_shangpinguanli,
.w_left_menu .first .flag i.dh_shangpinguanli {
    background: url(../../images/ic_trade.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.dh_cuxiaoguanli,
.w_left_menu .first .flag i.dh_cuxiaoguanli {
    background: url(../../images/ic_sale.png) no-repeat center;
    background-size: 80%;
}

.w_menu_wrap ul li i.dh_yunyingguanli,
.w_left_menu .first .flag i.dh_yunyingguanli {
    background: url(../../images/yyIcon.png) no-repeat center;
    background-size: 100%;
}

.w_menu_wrap ul li i.dh_chexiaoguanli,
.w_left_menu .first .flag i.dh_chexiaoguanli {
    background: url(../../images/cxIcon.png) no-repeat center;
    background-size: 100%;
}

.w_menu_wrap ul li i.dh_caiwuguanli,
.w_left_menu .first .flag i.dh_caiwuguanli {
    background: url(../../images/pay.png) no-repeat center;
    background-size: 100%;
}


/* 后台管理icon end */

.w_left_menu .first .flag .name {
    /* margin-top: 5px; */
    line-height: 40px;
}

.w_left_menu .first .content {
    visibility: hidden;
    position: absolute;
    left: 70px;
    top: 0;
    padding: 5px 0;
    background: #3679c1;
    transition: 0.3s;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 2;
}

.w_left_menu .first .content.bottom {
    top: auto;
    bottom: 0;
}

.w_left_menu .first .content .second_ul {
    display: table-cell;
    min-width: 100px;
    font-size: 13px;
}

.w_left_menu .first .content .second_ul li {
    background: #444f5a;
    transition: 0.3s;
    line-height: 28px;
    padding: 3px 0;
}

.w_left_menu .first .content .second_ul li:hover {
    background: #444f5a;
}

.w_left_menu .first .content .second_ul a {
    display: block;
    text-decoration: none;
    color: #fff;
    opacity: 0.8;
}

.w_left_menu .first .content .second_ul+ul {
    border-left: 1px dashed #4ea2ea;
}

.w_left_menu .first:hover {
    background: #444f5a;
}

.w_left_menu .first:hover .content {
    visibility: visible;
    background: #444f5a;
    left: 100px;
    opacity: 1;
    filter: alpha(opacity=1);
}

.w_left_menu .first.active {
    background: #444f5a;
}

.w_left_menu .first.active:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    border-right: 6px solid #fff;
    border-top: 6px solid transparent;
    border-left: 0px solid transparent;
    border-bottom: 6px solid transparent;
    vertical-align: middle;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 0;
    line-height: 0;
}

.w_left_menu .first.active:hover:before {
    display: none;
}

.w_tab {
    background: #4e5a69;
    color: #000;
    height: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
}

.w_left_div {
    width: 80px;
    float: left;
    height: 30px;
    background: #4e5a69;
}

.w_tabs_wrap {
    overflow: hidden;
    height: 50px;
    flex: 1;
}

.w_tabs {
    line-height: 30px;
    height: 30px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    background: #4e5a69;
}

.w_tabs li {
    float: left;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #fff;
    border-right: 1px solid #aaa;
}

.w_tab .w_tab_left {
    /* margin-left: 80px; */
}

.w_left_block {
    width: 100px;
    height: 30px;
    background: #4e5a69;
}

.w_tab .w_tab_left,
.w_tab .w_tab_right {
    float: left;
    width: 20px;
    height: 30px;
    background: #f1f1f1 url(../../images/tabs_icons.png) no-repeat 1px center;
    cursor: pointer;
}

.w_tab .w_block {
    float: left;
    width: 10px;
    background: #f1f1f1;
}

.w_tab .w_tab_right {
    background: #f1f1f1 url(../../images/tabs_icons.png) no-repeat -15px center;
}

.w_tabs li.active {
    background: #f1f1f1;
    color: #000;
}

.w_tabs li:hover {
    color: #ccc;
}

.w_tabs li:last-child {
    margin-right: 200px;
}

.w_tabs li .ic_del {
    margin-left: 5px;
    display: inline-block;
    width: 10px;
    height: 30px;
    background: url(../../images/tab_close_gray.png) no-repeat center;
}

.w_tabs li.active .ic_del {
    background-image: url(../../images/tab_close_blue.png);
}