body,div,p,table,tr,th,td,form,fieldset,input,textarea,blockquote,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd{margin:0;padding:0}
body{font-size:14px;line-height:1;text-align:left;font-family:"PingFangSC-Light","\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","iconfont","Hiragino Sans GB",tahoma,arial,"\5B8B\4F53" !important; color: #333333;}
ul,ol,li{list-style:none;margin:0;padding:0; }
table{border-collapse:separate;border-spacing: 0;}
h1,h2,h3,h4,h5,h6,em,b{font-size:100%;font-weight:normal;font-style:normal;}
img{border:0;padding:0;margin:0;}
input{vertical-align:middle; outline: none;}
input,select,textarea{font-size:14px;font-family: "微软雅黑";}
*, :after, :before {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
pre{
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "Microsoft Yahei" !important;
}

body{
    color: #262626;
    line-height: 1;
    background: #f0f2f5;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
}

// 清除浮动
.clear{clear:both;height:0;overflow:hidden;display:block}
//.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:"."}
//.clearfix{ overflow:hidden; zoom:1}

// 浮动左侧
.fl{float:left}

// 浮动右侧
.fr{float:right}

// 居中对齐
.tc{text-align:center !important}

// 左对齐
.tl{text-align:left}

// 右对齐
.tr{text-align:right}

// 加粗
.fb{font-weight:bold}

// 清除左侧浮动
.cl{clear:left}

// 相对定位
.pr{position:relative}

// 绝对定位
.pa{position:absolute}

// 块级显示
.dis{display:block}

// 隐藏显示
.undis{display:none}

// 行内显示
.disline{display:inline}

// 无下划线
.unline{text-decoration:none}
// .unline a{text-decoration:none;color:#000000}

// 相对定位
.rel{ position:relative;}

// 绝对定位
.abs{ position:absolute;}

// 块级浮动左侧
.disfl{display: block;float: left;}

// 块级浮动右侧
.disfr{display: block;float: right;}

// 行内块级显示
.disIB{display: inline-block;}

// 隐藏溢出
.oh{
    overflow: hidden !important;
}

// 自动溢出
.oa{
    overflow: auto !important;
}

// 链接样式
a{color:#333333; text-decoration:none}

// 链接未访问样式
a:link{
    text-decoration: none;
}

// 链接悬停样式
a:hover{
    text-decoration: none;
}

// Flex 布局
.flex,.disFlex,.df{
    display: flex;
}

// Flex 列布局
.flex_column{
    display: flex;
    flex-direction: column;
}

// Flex 自适应
.flex_grow{
    position: relative;
    flex-grow: 1;
}

// Flex 1
.flex_1{
    flex: 1;
}

// Flex 不自适应
.flex_none{
    flex: none !important;
}

// Flex 换行
.flex_wrap{
    flex-wrap: wrap;
}

// 绝对定位全覆盖
.pa0{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

// Flex 居中对齐
.aic{
    align-items: center;;
}

// Flex 两端对齐
.jcb{
    justify-content: space-between;
}

// Flex 居中对齐
.jcc{
    justify-content: center;
}

// Flex 右对齐
.jcr{
    justify-content: flex-end;
}

// 隐藏可见性
.vh{
    visibility: hidden;
}

// 显示可见性
.vs{
    visibility: visible;
}

// 顶部对齐
.vt{
    vertical-align: top;
}

// 省略号
.ellipsis,.slh{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    // max-width: 160px;
    // max-width: 100%;
}

// 指针样式
.cp {
    cursor: pointer;
}

// 蒙层背景
.tmbg{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    z-index: 100;
    filter:Alpha(opacity=0);
    opacity: 0;
}

//padding && margin
//padding && margin
@for $i from 0 through 200 {
    .pad_t_#{$i} {   padding-top: #{$i}px !important; }
    .pad_r_#{$i} {   padding-right: #{$i}px !important; }
    .pad_b_#{$i} {   padding-bottom: #{$i}px !important; }
    .pad_l_#{$i} {   padding-left: #{$i}px !important; }

    .mar_t_#{$i} {   margin-top: #{$i}px !important; }
    .mar_r_#{$i} {   margin-right: #{$i}px !important; }
    .mar_b_#{$i} {   margin-bottom: #{$i}px !important; }
    .mar_l_#{$i} {   margin-left: #{$i}px !important; }
    
    .pad_#{$i} { padding: #{$i}px !important; }
    .mar_#{$i} { margin: #{$i}px !important; }
    
    .fs_#{$i*2} {font-size:#{$i*2}px !important;}

    .l_#{$i} {left:#{$i}px !important;}
    .t_#{$i} {top:#{$i}px !important;}
    .b_#{$i} {bottom:#{$i}px !important;}
    .r_#{$i} {right:#{$i}px !important;}

    .radius_#{$i} {border-radius:#{$i}px !important;}
    .gap_#{$i} {gap:#{$i}px !important;}
    .rowGap_#{$i} {row-gap:#{$i}px !important;}
    .colGap_#{$i} {column-gap:#{$i}px !important;}
    .lineHeight_#{$i} {line-height:#{$i}px !important;}
}

.mar_0{
    margin: 0 !important;
}

.mar_t_0 {   margin-top: 0 !important; }
.mar_r_0 {   margin-right: 0 !important; }
.mar_b_0 {   margin-bottom:0 !important; }
.mar_l_0 {   margin-left: 0 !important; }
.pad_t_0 {   padding-top: 0 !important; }
.pad_r_0 {   padding-right: 0 !important; }
.pad_b_0 {   padding-bottom:0 !important; }
.pad_l_0 {   padding-left: 0 !important; }




.opacity-enter-active,
.opacity-leave-active {
    transition: all 0.3s ease;
}


.opacity-enter-from,
.opacity-leave-to {
    opacity: 0;
}

.right-enter-active,
.right-leave-active {
    transition: all 0.3s ease;
}


.right-enter-from,
.right-leave-to {
    transform: translateX(2%);
    opacity: 0;
}


.bg_none{
    background: none !important;
}



.wrapper_bar{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    // bottom: -17px;
    bottom: 0;
    overflow: hidden;
}

.myBar,
.myBar .el-table--scrollable-x .el-table__body-wrapper ,
.myBar .el-table--scrollable-y .el-table__body-wrapper
{
    &::-webkit-scrollbar-track-piece {
        border-radius: 3px;
    }
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    &::-webkit-scrollbar-thumb {
        height: 10px;
        background-color: rgba(144,147,153,.3);
        border-radius: 7px;
    }
}
.myBar .el-table--scrollable-x .el-table__body-wrapper,
.myBar .el-table--scrollable-y .el-table__body-wrapper {
    &::-webkit-scrollbar {
        height: 16px;
        width: 16px;
    }
}

.myBar_X_MAX,
.myBar_X_MAX .el-table--scrollable-x .el-table__body-wrapper ,
.myBar_X_MAX .el-table--scrollable-y .el-table__body-wrapper {
    &::-webkit-scrollbar {
        height: 16px;
    }
}
.myBar_Y_MAX ,
.myBar_Y_MAX .el-table--scrollable-x .el-table__body-wrapper ,
.myBar_Y_MAX .el-table--scrollable-y .el-table__body-wrapper {
    &::-webkit-scrollbar {
        width: 16px;
    }
}
.myBar_MAX ,
.myBar_MAX .el-table--scrollable-x .el-table__body-wrapper ,
.myBar_MAX .el-table--scrollable-y .el-table__body-wrapper {
    &::-webkit-scrollbar {
        height: 16px;
        width: 16px;
    }
}


.hover,.iconHover{
    cursor: pointer;
    @include themeColor('color','color');
    &:hover{
        @include themeColor('color','hover');
    }
    &:active{
        @include themeColor('color','down');
    }
}
.hover2{
    cursor: pointer;
    &:hover{
        @include themeColor('color','hover');
    }
    &:active{
        @include themeColor('color','down');
    }
}