/*    filter: invert(1);*/
:root{
    --main-color: #4d4e53;
    --main-bg: rgb(255, 255, 255);
    --logo-border-color: rebeccapurple;
  
    --header-height: 68px;
    --content-padding: 10px 20px;
  
    --base-line-height: 1.428571429;
    --transition-duration: .35s;
    --external-link: "external link";
    --margin-top: calc(2vh + 20px);
    
    
/*    

    --baseBkColor:#FFFFFF;
    --lvrmenubcolor :#FFFFFF;
    --lvrmenuHvColor : #f6f7f9;
    --matsBcolor  : #FFFFFF;
    --inputBcolor : #f6f7f9;
    --inputColor : #666666;
    --textColorA : #000;
    --textShow : #fff;
    --borderColor : #ccc;
    --scrollColor : #ccc;
    --TitleBColor : #007aff;
    --TitleTColor : #fff;
    --TitleRColor : #007aff;
*/        
 

    
    --baseBkColor:#373737;
    --lvrmenubcolor :#2c2c2c;
    --lvrmenuHvColor : #3f3f42;
    --matsBcolor  : #FFFFFF;
    --inputBcolor : #2c2c2c;
    --inputColor : #6e6a6a;
    --textColorA : #FFF;
    --borderColor : #4b4b4b;
    --scrollColor : #4d4e53;
    --TitleBColor : #373737;
    --TitleTColor : #fff;
    --TitleRColor : #fff;
    --filter:none;



    
  }
body{
    background: var(--baseBkColor);
    font-size: 14px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 12px;
    height:12px;
    background-color: var(--baseBkColor);
    cursor: auto;
    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
    border-radius:10px;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
    border-radius:10px;
    background: var(--scrollColor);
    }
.lslAlert{
    background-color: var(--baseBkColor);
    color:  var(--textColorA);
}
.imgflt {
    filter: var(--filter);
}
.btn{
    border:solid 1px var(--borderColor); background-color: var(--baseBkColor);
    color:  var(--textColorA);
}
/* ui */
.c-666, .c-666 a, a.c-666 {
    color: #666;
}
.f-12 {
    font-size: 12px;
}

.input-text, .btn, .input-text.size-M, .btn.size-M {
    font-size: 14px;
    height: 31px;
    *height: auto;
    line-height: 1.42857;
    padding: 4px 10px;
}
.input-value {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
    -moz-padding-start: npx;
    -moz-padding-end: npx;
    color: var(--inputColor);
    background: var(--inputBcolor);
    border: 0px solid #4b4b4b;
    width: auto;
    *zoom: 1;
    *overflow: visible;
    -webkit-transition: background-color .1s linear;
    -moz-transition: background-color .1s linear;
    -o-transition: background-color .1s linear;
    transition: background-color .1s linear;
    padding: 4px 2px;
    font-size: 14px;
    height: 36px;
    *height: auto;
    line-height: 1.42857;
    width: 99%;text-align: left;
}
.input-value:hover{border: solid 1px #3bb4f2}
 
.input-text.focus{border:solid 1px #0f9ae0 \9;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)}
.divTitle{
    background-color: var(--TitleBColor);
    color:var(--TitleTColor) !important;
}
.rgihtBtn{
    border:0px;
    background:var(--baseBkColor);
    color:var(--TitleRColor);
    cursor: pointer;
}
.btn2 {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
    -moz-padding-start: npx;
    -moz-padding-end: npx;
    background: var(--inputBcolor);
    width: auto;
    *zoom: 1;
    *overflow: visible;
    -webkit-transition: background-color .1s linear;
    -moz-transition: background-color .1s linear;
    -o-transition: background-color .1s linear;
    transition: background-color .1s linear;
    padding: 10px 5px;
    font-size: 12px;
    height: 36px;
    *height: auto;
    line-height: 1.42857;
    border: 0px solid #4b4b4b;
}
.cell-right{
    margin-right: 6px;
}
.btn2spacing {
    background: var(--baseBkColor);
    padding: 4px 4px;
}  
 /* end */
#lsEdit{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.mp-0{
    margin: 0px;
    padding: 0px;
}
.mg-15{
    margin: 5px 15px 5px 15px;
}
.cu-p {
    cursor: pointer;
}
.r, .f-r {
    float: right!important;
    _display: inline;
}
.w110 {
    width: 110px !important;
    color: #b7b6b6;
}
.w96 {
/* width: 96px !important; */
font-size: 12px;
width: 35%;
}
.mt_3{
    margin-top: -3px;
}
.radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group {
    font-size: 0;
}

.c-primary, .c-primary a, a.c-primary {
    color: #5a98de;
}
.c-666, .c-666 a, a.c-666 {
    color: #666;
}
.divblock {
    border-bottom: 1px solid; 
    border-bottom-color: var(--borderColor);
    padding: 15px 15px;
    color: var(--textColorA);
}

.padding-15 {
    padding: 15px 15px;
    border-bottom: 1px solid; 
    border-bottom-color: var(--borderColor);
    color: var(--textColorA);
}
.noBorder {
    border:none !important;
}
/* .bb-1 {
    border-bottom: 1px solid; 
    border-bottom-color: var(--borderColor);
} */
.l_fc{
    color:#fff;
}
.h80{
   min-height: 80px;
}



.lvrMenu{
    width: 60px;
    height: 100vh;
    background-color:var(--lvrmenubcolor);
    box-shadow: 0 0 22px 0 rgb(0 0 0 / 30%);
    border-right: 1px solid #000;
    display: block;
    overflow: hidden;
    position: absolute;
    top:0px; left: 0px;
    z-index: 8;
    opacity: 0.8;
    padding-top: 15px;
}
.numItem:hover{
    background-color:var(--lvrmenuHvColor) ;
    border-left: 2px solid #480702;
}
.numItem {
    width: 100%;

    display: block;
    padding: 10px 0px 0px 0px;
    /* border-bottom: 1px solid #222; */
    text-align: center;    
}a
.numItem a,a:hover{
    width: 100%;

    display: block;
    text-decoration: none;
}
.numItem p{
 display: block;
 text-align: center;
 font-size: 12px;
 /* text-shadow: -1px -1px 1px #252a42, 1px 1px 1px #000; */
 margin-top: 4px;
 color: var(--inputColor);
}
.numItem  p img{
 width: 30px;
}
.numItem  img{
 width: 24px;
 filter:var(--filter);
}
.varImg{
    filter:var(--filter);
}
.l_LeftPlanTitle{
    background: var(--TitleBColor);
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid;
    border-bottom-color: var(--borderColor);
}

.mats {
    width: calc(50% - 8px);
    max-width: 150px;
    height: 150px;
    color: #fff;
    text-align: center;
    margin: 2px;
    border: 1px solid var(--scrollColor);
    display: inline-block;
    background: var(--lvrmenuHvColor);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mats div {
    color: #fff;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mats div img{
    /* max-width: 600px; 
    max-height: 600px; */
    outline: none;
    outline-color: #f00;
    max-width: 100%;
    max-height: 100%;
    width: auto;


}
.mats span {
    top: -24px;
    position: relative;
    text-shadow: 1px -1px 0px var(--textShow);
    color:var(--textColorA);
}

.lvrLeftPlan{
    position: absolute;z-index: 6;
    width: 320px;
    height: 100vh;
    background-color: var(--baseBkColor);
    display: block;
    /* overflow: hidden; */
    left: 60px;    top: 0px;
    box-shadow: 0 0 22px 0 rgb(0 0 0 / 30%);
}
.lvrLeftPlan .elemt{
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100vh - 100px);  
}


.lvrRightPlane{
    position: absolute;z-index: 6;
    width: 300px;
    height: 100vh;
    background-color: var(--baseBkColor);
    display: block;
    overflow: auto;
    right: 0px;    top: 0px;
    color: aliceblue;
    z-index: 6;
}
.selepices{
     padding: 5px;
    height: 70px;
    display: -webkit-box;
    line-height: 70px;
    /* width: 260px; */
    max-width:260px;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: scroll;
}
.selepices .umat{
    height: 50px;
    width: 50px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #ff0000;
    font-size: 16px;
    margin: 2px;
    border: 1px solid #ccc;
    text-align: right;
    line-height: 20px;
}
.umatdel{
    /* margin-right: 2px;
    cursor: pointer; */
    background: aliceblue;
    padding: 0px 4px;
}
.seleAudioes{
    padding: 5px;
    height: 30px;
    display: -webkit-box;
    line-height: 30px;
    max-width:260px;
    background: var(--inputBcolor);
}
.seleAudioes .audioimats{
    width: 100%;
}
.seleAudioes .audioimats span{
    width: 30px;
    color: red;
    background: none;
}
.slideSlt{
    margin-top: 10px;
}
.slideSlt span{
    display: initial;
    text-align: left;
    margin-right: 2px;
    color: #666;
}
.slideSlt span input{
    margin-right: 4px;
}
.myPlane{
    margin: 0px;
    padding: 0px;
}
.sysicon span{
    display: inline-block; cursor: pointer;
    width: 35px;
    height: 35px;
    overflow: hidden;
    padding: 4px;
    background: #222;
}
.sysicon span img {
    width: 100%;
}
.hotIco, .lvrImg {
    width: 60px;
    height: 60px;
    float: left;
    /* line-height: 50px; */
    text-align: center;
    padding: 0px;
    background: #fff;
}
.hotIco img, .lvrImg img {
    /* width: 40px;
    height: 40px; */
    height: 100%;
    padding: 0px;
    margin: 0px;
    mix-blend-mode: darken;
}
.hotrow {
    width: 192px;
    float: right;
}
.tabCon {
    display: block;
    background-color: var(--inputBcolor);
}
.check-box, .radio-box {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    padding-left: 4px;
    padding-right: 12px;
};

.linkInpt {
    max-width:260px;
    width: 99%;
    text-align: left;
    background: var(--inputBcolor);
    color: var(--inputColor);
    margin: 15px 0px 0px;
    padding: 2px 3px;
    border: 0px
}
#selectPicList {
    background: var(--inputBcolor);
}
.tolink {
    margin-bottom: 10px;
}
.editBtn {
    position: fixed;z-index: 2;
}
.editBtn span{
    font-size:12px; height:36px; line-height:36px;
    display:inline-block;
    box-sizing:border-box;cursor:pointer;
    text-align:center;font-weight:400;
    white-space:nowrap;vertical-align: middle;
    -moz-padding-start:npx; 
    -moz-padding-end:npx;
    /* border:solid 1px #ddd; */
     /* background-color:#fff;  */
     width:auto;*zoom:1;*overflow:visible;
}
.leftBtn {
    font-size:12px; height:19px; line-height:19px;
    display:inline-block;
    box-sizing:border-box;cursor:pointer;
    text-align:center;font-weight:400;
    white-space:nowrap;vertical-align: middle;
    -moz-padding-start:npx; 
    -moz-padding-end:npx;
    border: solid 1px #6c6c6c;
    background-color: #565656;
    color: #fff;
    padding: 0px 8px;
    border-radius: 4px;
     width:auto;*zoom:1;*overflow:visible;

}
.listPage {
    position: fixed;
    bottom: 0px;
    /* right: 10%; */
    /* border-top: 1px solid #ccc; */
    width: 321px;
    overflow: hidden;
    /* margin-top: 10px; */
    padding-top: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #fff;
    background:  var(--baseBkColor);
}
.lvrtopMun{
    display: flex;
    position: absolute;
    top: 10px;
    left: 50%;
}