*,
*::before,
*::after {
    box-sizing: border-box; 
    outline: 0 none;
}
ul, li{
    list-style: none;
}
html{
    font-family: 'PingFang SC';
    color: $color-text-primary;
}
.cursor-pointer{
    cursor: pointer;
}
//=================== start::全局自定义滚动条样式 =======================
/* 设置垂直滚动条的宽度和水平滚动条的高度 */
::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}

/* 设置滚动条的滑轨 */
::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 滑块 */
::-webkit-scrollbar-thumb {
    background-color: $border-color-light;
    border-radius: 4px;
}

/* 滑轨两头的监听按钮 */
::-webkit-scrollbar-button {
    background-color: $border-color-light;
    display: none;
}

/* 横向滚动条和纵向滚动条相交处尖角 */
::-webkit-scrollbar-corner {
    /*background-color: black;*/
}
.el-scrollbar__wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}  
.el-scrollbar__bar.is-horizontal{
    display: none;
}
.overflow-y-scroll{
    overflow-y: scroll !important;
}
.overflow-y-auto{
    overflow-y: auto !important;
}


//=================== end::全局自定义滚动条样式 =========================

//=================== start::文字样式 =======================
.f12{
    font-size: $f12;
}
.f14{
    font-size: $f14;
}
.f16{
    font-size: $f16;
}
.f18{
    font-size: $f18;
}
.f20{
    font-size: $f20;
}
.f22{
    font-size: $f22;
}
.f24{
    font-size: $f24;
}
.f32{
    font-size: $f32;
}
.f-weight400{
    font-weight: 400;
}
.f-weight500{
    font-weight: 500;
}
.f-weight600{
    font-weight: 600;
}
.color-fff{
    color: $color-white;
}
.color-000{
    color: $color-000000;
}
.color-text-primary{
    color: $color-text-primary;
}
.color-text-regular{
    color: $color-text-regular;
}
.color-text-secondary{
    color: $color-text-secondary;
}
.color-text-placeholder{
    color: $color-text-placeholder;
}
.bg-color-light{
    background-color:$bg-color-light
}
.color-1960F4{
    color: $color-1960F4;
}
.color-primary{
    color: $color-primary;
}
.text-overflow{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
//=================== end::文字样式 =========================

//=================== start::定位样式 =======================
.position-r{
    position: relative;
}
.position-a{
    position: absolute;
}
.position-f{
    position: fixed;
}
//=================== end::定位样式 =========================

//=================== start::边距样式 =======================

// 内边距
@mixin basePadding($top:$size8,$right:$top,$bottom:$top,$left:$right) {
    padding: {
      top: $top;
      right: $right;
      bottom: $bottom;
      left: $left;
    }
  }
.pt-8{
    padding-top: $size8;
}
.pb-8{
    padding-bottom: $size8;
}
.pr-8{
    padding-right: $size8;
}
.pl-8{
    padding-left: $size8;
}

.p-8{
    @include basePadding($size8) 
}
.p-v-8{
    @include basePadding($size8, 0);
}

.p-h-8{
    @include basePadding(0, $size8);
}

.pt-16{
    padding-top: $size16;
}
.pb-16{
   padding-bottom: $size16;
}
.pr-16{
   padding-right: $size16;
}
.pl-16{
   padding-left: $size16;
}
.p-16{
    @include basePadding($size16)
}
.p-v-16{
    @include basePadding($size16, 0);
}

.p-h-16{
    @include basePadding(0, $size16);
}

.p-h-22{
    @include basePadding(0, $size22)
}

.pt-24{
    padding-top: $size24;
}
.pb-24{
   padding-bottom: $size24;
}
.pr-24{
   padding-right: $size24;
}
.pl-24{
   padding-left: $size24;
}
.p-24{
    @include basePadding($size24);
}
.p-v-24{
    @include basePadding($size24, 0);
}
.p-h-24{
    @include basePadding(0, $size24);
}

.pt-32{
    padding-top: $size32;
}
.pb-32{
   padding-bottom: $size32;
}
.pr-32{
   padding-right: $size32;
}
.pl-32{
   padding-left: $size32;
}
.p-32{
    @include basePadding($size32); 
}
.p-v-32{
    @include basePadding($size32, 0);
}
.p-h-32{
    @include basePadding(0, $size32);
}

.pt-40{
    padding-top: $size40;
}
.pb-40{
   padding-bottom: $size40;
}
.pr-40{
   padding-right: $size40;
}
.pl-40{
   padding-left: $size40;
}
.p-40{
    @include basePadding($size40); 
}
.p-v-40{
    @include basePadding($size40, 0);
}
.p-h-40{
    @include basePadding(0, $size40);
}

// 外边距
@mixin baseMargin($top:$size8,$right:$top,$bottom:$top,$left:$right) {
    margin: {
        top: $top;
        right: $right;
        bottom: $bottom;
        left: $left;
    }
}
.mt-8{
    margin-top: $size8;
}
    
.mb-8{
    margin-bottom: $size8;
}
    
.mr-8{
    margin-right: $size8;
}
.ml-8{
    margin-left: $size8;
}
.m-8{
    @include baseMargin($size8)
}
.m-v-8{
    @include baseMargin($size8, 0)
}
.m-h-8{
    @include baseMargin(0, $size8)
}

.mt-16{
    margin-top: $size16;
}
    
.mb-16{
    margin-bottom: $size16;
}
    
.mr-16{
    margin-right: $size16;
}
.ml-16{
    margin-left: $size16;
}
.m-16{
    @include baseMargin($size16);
}
.m-v-16{
    @include baseMargin($size16, 0);
}
.m-h-16{
    @include baseMargin(0, $size16);
}

.mt-24{
    margin-top: $size24;
}
    
.mb-24{
    margin-bottom: $size24;
}
    
.mr-24{
    margin-right: $size24;
}
.ml-24{
    margin-left: $size24;
}
.m-24{
    @include baseMargin($size24)
}
.m-v-24{
    @include baseMargin($size24, 0)
}
.m-h-24{
    @include baseMargin(0, $size24)
}

.mt-32{
    margin-top: $size32;
}
    
.mb-32{
    margin-bottom: $size32;
}
    
.mr-32{
    margin-right: $size32;
}
.ml-32{
    margin-left: $size32;
}
.m-32{
    @include baseMargin($size32)
}
.m-v-32{
    @include baseMargin($size32, 0)
}
.m-h-32{
    @include baseMargin(0, $size32)
}

.mt-40{
    margin-top: $size40;
}
    
.mb-40{
    margin-bottom: $size40;
}
    
.mr-40{
    margin-right: $size40;
}
.ml-40{
    margin-left: $size40;
}
.m-40{
    @include baseMargin($size40)
}
.m-v-40{
    @include baseMargin($size40, 0)
}
.m-h-40{
    @include baseMargin(0, $size40)
}

//=================== end::边距样式 =========================

//=================== start::宽高样式 =========================
.width100{
    width: 100% !important;
}
.width75{
    width: 75% !important;
}
.width-40{
    width: $height40;
}
.width-120{
    width: $height120;
}
.width70{
    width: 70% !important;
}
.width30{
    width: 30% !important;
}

.height100{
    height: 100% !important;
}
.height-30 {
    height: $height30;
}
.height-40{
    height: $height40;
}
.height-48{
    height: $height48;
}
.height-56{
    height: $height56;
}
.height-90{
    height: $height90;
}
.height-138{
    height: $height138;
}

.line-height-30{
    line-height: $height30;
}
.line-height-40{
    line-height: $height40;
}
.line-height-48{
    line-height: $height48;
}

//=================== end::宽高样式 ===========================


//=================== start::border边框 ===========================
.border-t-0{
    border-top: 0 none !important;
}
.border-b-0{
    border-bottom: 0 none !important;
}
.border-r-0{
    border-right: 0 none !important;
}
.border-l-0{
    border-left: 0 none !important;
}

.border-t-solid-lighter-1{
    border-top: 1px solid $border-color-lighter;
}
.border-b-solid-lighter-1{
    border-bottom: 1px solid $border-color-lighter;
}
.border-solid-lighter-1{
    border:1px solid $border-color-lighter;
}
//=================== end::border边框 ===========================
//=================== start::圆角样式 ==============================
.border-radius50{
    border-radius: 50%;
}
.border-radius-2{
    border-radius: 2px;
}
.border-radius-4{
    border-radius: 4px;
}
.border-radius-8{
    border-radius: 8px;
}
//=================== end::圆角样式 ================================
//=================== start::旋转动画 ==============================
.transform-time-default{
    transition: transform .3s
}
.rotate-0{
    transform: rotate(0deg);
}
.rotate-45{
    transform: rotate(45deg);
}
.rotate-90{
    transform: rotate(90deg);
}
.rotate-180{
    transform: rotate(180deg);
}
.rotate--180{
    transform: rotate(-180deg);
}
//=================== end::旋转动画 ================================


//=================== start:: 自定义tabs样式 ==============================
.zd-el-tabs-custom{
    .el-tabs__header{
        margin: 0;
    }
    .el-tabs__item{
        height: $height48;
        line-height: $height48;
    }
    // tabs第一个菜单有左边的边距
    .el-tabs__item.is-top:nth-child(2),
    .el-tabs__item.is-bottom:nth-child(2), {
        padding-left: $size24 !important;
    }
    // 被选中的tabs样式
    .el-tabs__item.is-active{
        color: $color-1960F4 !important;
    }
    // 被选中的tabs样式
    .el-tabs__active-bar{
        background-color: $color-1960F4 !important;
    }
}
// tabs第一个菜单有padding-left
.zd-el-tabs-custom__left_padding{
    .el-tabs__item.is-top:nth-child(2),
    .el-tabs__item.is-bottom:nth-child(2), {
        padding-left: $size24 !important;
    }
}
// tabs最后一个菜单有padding-right
.zd-el-tabs-custom__right_padding{
    .el-tabs__item.is-top:last-child,
    .el-tabs__item.is-bottom:last-child{
        padding-right: $size24 !important;
    }
}

// 去调解页面  去掉tabs灰色的下横线
.layout-center-right-center .zd-el-tabs-custom{
    .el-tabs__nav-wrap::after {
        height: 0 !important;
        background-color: transparent!important;
    }
}
//=================== end::自定义tabs样式 ================================


//=================== start:: tabs内容区域通用样式 ==============================
.layout-tabs-content-box{
    width: 100%;
    height: calc(100% - $height48);
    padding: $size16 $size24;
    box-sizing: border-box;
    .tabs__search-criteria-title{
        @extend .f14;
        @extend .color-text-regular;
        @extend .text-right;
        min-width: 88px;
        white-space: nowrap;
        box-sizing: content-box;
    }

    .tabs__search-criteria-title—minwidth120{
        @extend .f14;
        @extend .color-text-regular;
        @extend .text-right;
        min-width: 120px;
        white-space: nowrap;
        box-sizing: content-box;
    }
}

//=================== end::tabs内容区域通用样式 =================================
//=================== start::border 样式 ===============================

//=================== end::border-bottom 样式 ==================================
//=================== start::图片宽高 样式 ===============================
.images24{
    width:$height24 ;
    height: $height24;
}
.images56{
    width:$height56 ;
    height: $height56;
}
.images120{
    width: $height120;
    height: $height120;
}
//=================== start::图片宽高 样式 ===============================

//=================== start::自定义drawer样式 ===============================
.el-drawer__wrapper {
    .el-drawer__header{
        height: $height64 !important;
        line-height: $height64 !important;
        margin: 0;
        font-size:$f22; 
        color: $color-text-primary;
        padding: 0 $height20;
    }
}   
//=================== start::自定义drawer样式 ===============================
//=================== start::自定义dialog样式 ===============================
.el-dialog__wrapper {

    .el-dialog{
        // 设置居中显示
        position:absolute;
        top:50%;
        left:50%;
        margin:0 !important;
        transform:translate(-50%, -50%);

        .el-dialog__header{
            height: $height64 !important;
            line-height: $height64 !important;
            margin: 0;
            font-size:$f16; 
            color: $color-text-primary;
            padding: 0 $size24;
        }
        .el-dialog__body{
            // padding: $size16 $size72 $size16 $size72;
            padding: 0;
        }
    }
    
    
}
 
//=================== start::自定义dialog样式 ===============================


//=================== start::日期时间选择器 ===============================
.el-date-editor .el-range-separator{
    box-sizing: content-box;
}
//=================== end::日期时间选择器 ===============================


// message提示框加优先级，防止抽屉、弹框等被遮挡
.messageZindex{
    z-index: 4000!important;
}

//=================== start::提示框置顶 ===============================
.el-message.el-message--error.is-closable{z-index: 3000 !important;}
.el-message.el-message--warning.is-closable{z-index: 3000 !important;}
.el-message.el-message--success.is-closable{z-index: 3000 !important;}
.el-loading-mask.is-fullscreen{z-index: 9999 !important;}
//=================== end::提示框置顶 ===============================

//=================== start::解决Elementui输入框(text)与文本域(textarea)字体不一样问题 ===============================
.el-textarea__inner{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
//去调解页 去掉textarea边框
.layout-center-right-bottom .el-textarea__inner {
    border: none!important;
    padding: 5px 0!important;
    resize: none!important;
}

//=================== end::解决Elementui输入框(text)与文本域(textarea)字体不一样问题 ===============================

//=================== start::状态标签样式 ===============================
// 公用状态标签样式
.status-btn {
    width: 60px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    border: 1px solid;
    height: 24px;
    line-height: 22px;
}
// 调解状态 0-待调解 1-调解中 2-已结束
.case-status0{
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c
}
.case-status1{
    background-color: #ecf5ff;
    border-color: #d9ecff;
    color: #409EFF;
 }
 .case-status2{
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
 }
// 案件状态1-调解成功、0-调解失败、2-暂存
.result-status0{
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
 }
 .result-status1{
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
 }
 .result-status2{
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c
 }



 //=================== end::状态标签样式 ===============================