body{
font-family:arial,verdana;
}


#addSplitCover{
    z-index: 9998;
    display: none;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);

}


#splitEditBox{
  display: block;
  width: 250px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  position: fixed;
  z-index: 9999;
  background: #fff;
  left: 50%;
  margin-left: -130px;
  border-radius:4px;
  }
  
#splitEditBox h3{
  margin: 10px 0;
  color: #7C7998;
}
  
#splitEditBox input[type='text']{
display:block;
padding:6px;
font-size:15pt;
width:210px;
margin:5px auto;
border:3px solid #ccc;
border-radius:4px;
text-align: center;
}  

#splitEditBox input[type='text']:hover{
border-color:#989797;
}

#splitEditBox input[type='text']:active{
border-color:#000;
}

#splitEditBox input[type='text']:focus{
border-color:#E5064D;
outline:none;
}

#splitEditBox button{
  background: #7B7B7B;
  border: 0;
  padding: 10px;
  width: 130px;
  font-size: 14pt;
  color: #fff;
  border-radius: 15px;
  margin-top: 6px;
}


#splitEditBox button:hover{
background:#4D4D4D;
}

#splitEditBox button:focus{
background:#E5064D;
outline:none;
}


#playFader,#pauseFader{
display:none;
position:fixed;
top:150px;
left:50%;
width:100px;
height:100px;
margin-top:-50px;
margin-left:-50px;
border-radius:20px;
background-color:rgba(0,0,0,0.3);
background-position:center center;
background-repeat:no-repeat;
background-size:80%;
z-index:10000;

}

#playFader{
background-image:url('../images/play.svg');
}

#pauseFader{
background-image:url('../images/pause.svg');
}


.faderBig{
width:160px !important;
height:160px !important;
margin-top:-80px !important;
margin-left:-80px !important;
}

#statusPanel{
font-size:9pt;
color:#aaa;
margin-bottom:15px;
}

#status{font-weight:bold;}
.green{color:#1BAF0F;}
.grey{color:#4D4D4D;}
.red{color:#CA0000;}

#panel{
display:table;
margin-bottom:15px;
}
#showControl,#showGroupsPanel{
display:table-cell;
vertical-align: top;
}
#showControl{padding-right:20px}

#play, #pause{
border-radius: 40px;
width: 40px;
height: 40px;
background-color: #4D4D4D;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
vertical-align: top;

}

#play:hover, #pause:hover{
    background-color: #313130;
}
#play:active, #pause:active{
    background-color: #000;
}

#play{background-image:url('../images/play.svg');}
#pause{background-image:url('../images/pause.svg');}


#showGroupsPanel {width: 100%;
padding: 6px;
border-radius: 17px;
background-color: #F9F9F9;
height: auto;}

#showGroupsPanel div{
display:inline-block;
}

#showAll, #showProblem, #splitmon_groups div{
border-radius: 30px;
background: #8E8B8B;
color: #FFF;
text-align: center;
cursor: pointer;
padding: 5px 9px;
margin: 2px;
font-size: 9pt;
font-weight: 400;
}

#showAll:hover, #showProblem:hover, #splitmon_groups div:hover{
background:#313130;
}

.gCurrent{
background:#000 !important;
}

.count{font-weight:bold;}


.cL {display:table;
margin-bottom:10px;}

.cL .hasProblem{
background-color:#FCDFDF !important;

}

.cL .i{
display: table-cell;
width: 150px;
height: 60px;
background-color: #EAF2F7;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 3px;
cursor: default;
overflow: hidden;
position: relative;
}

.cL .i .cN{
color: #56595B;
font-size: 16pt;
font-weight: bold;
display: block;
padding: 2px 4px 0px 7px;
white-space: nowrap;
}

.cL .i .cNa{
font-size: 9pt;
color: #56595B;
padding: 0 1px 1px 7px;
display: block;
white-space: nowrap;
}
.cL .i .cTe{
font-size: 8pt;
color: rgba(0, 0, 0, 0.34);
padding: 0 1px 1px 7px;
overflow: hidden;
display: block;
white-space: nowrap;
}

.cL .i .edt{
display:none;
position:absolute;
right:2px;
top:2px;
width:14px;
height:14px;
background:url('../images/e.svg') center center no-repeat;
}


.cL .i:hover .edt{
display:block;
cursor:pointer;
}

.cL ul {
vertical-align:top;
display: table-cell;
  margin: 0;
  padding: 0 0 0 5px;
  }
  

.cL ul li.addSpl{
vertical-align:top;
display: inline-block;
list-style: none;
width: 3px;
height: 60px;
margin:  0px;
border-radius: 2px;
cursor: default;
overflow: hidden;
position: relative;
background-color: #E0EDF5;
}

.cL ul li.addSpl:hover{
background-color: #9DB9CA;
cursor:pointer;
}

.cL ul li{
vertical-align:top;
display: inline-block;
list-style: none;
width: 90px;
height: 60px;
margin:  0 2px 2px 2px;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 3px;
cursor: default;
position: relative;
background-color: #D1EAFA;
  overflow: hidden;
}
  
  
.cL ul li.sSt_1{background-color: #D1EAFA;}
.cL ul li.sSt_0{background-color: #DDDDDD;}



.cL ul li.sSt_1:hover{
    background-color: #C5DCEA !important;
    cursor:pointer;
}
.cL ul li.sSt_0:hover{
    background-color: #cccccc !important;
    cursor:pointer;    
}



  
  

.cL ul li .sCn{
color: #56595B;
font-size: 13pt;
font-weight: bold;
display: block;
padding: 2px 4px 0px 7px;
white-space: nowrap;
}

.cL ul li .sTi{
font-size: 10pt;
color: #56595B;
padding: 0 1px 1px 7px;
display: block;
white-space: nowrap;
}

.cL ul li .sDe{
color: rgba(0, 0, 0, 0.39);
font-size: 9pt;
padding: 0 1px 1px 7px;
display: block;
white-space: nowrap;
}


.DSQ{
    background-color: #BDBDBD !important;
}