
#booksorter {

background-image: url(/sorter/booksorter.png);
width:900px;
height:490px;
/border:2px solid #fff;
margin: auto;

}

.booksorter1inner {
width:65px;
height:50px;
/border:2px solid #000;
position:relative;
top:65px;
left:210px;
font-size:2em;

color:#000;
border-radius:8px;
text-align:center;

}

.booksorter2inner {
width:180px;
height:60px;
position:relative;
top:17px;
left:438px;
/border:2px solid #000;
overflow: auto;
text-align:center;

}


.booksorter3inner {

font-size:1.8em;
color:#000;
width:100px;
height:60px;
position:relative;
top:-40px;
left:687px;


}


.krilo1{
  position:relative;

  width:100px;
  height:100px;
  /border:2px solid #000; 
  left:92px;
  top:170px;
}

.krilo2{
    position:relative;

  width:100px;
  height:100px;
  /border:2px solid #000; 
  left:290px;
  top:60px;  
}




.sortertags {

padding:3px;
border-radius:4px; 
border:1px solid #fff; 
background-color:#4E00A2;
color:#fff;
font-size:11px;
float:left;

}
    

ul.ks-cboxtags {
    list-style: none;
    padding: 20px;
}
ul.ks-cboxtags li{
  display: inline;
}
ul.ks-cboxtags li label{
 
    background-color: #00A2A4;

    color: #fff;
    border-radius: 05px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}

ul.ks-cboxtags li label {
    padding: 8px 12px 0px 12px;
    cursor: pointer;
    
}

ul.ks-cboxtags li label::before {
    display: inline-block;
    padding: 10px 30px 0px 0px;
    content: "";
    background-image: url(../images/uncheck.svg);
    background-repeat:no-repeat;
    
    width:20px;height:20px;
    transition: transform .2s ease-in-out;
    
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
    padding: 10px 30px 0px 0px;
    content: "";
    background-image: url(../images/check.svg);
    background-repeat:no-repeat;
    width:20px;height:20px;    
    /transform: rotate(360deg);
    transform:scale(1.5,1.5);
    transition: transform .2s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    
    background-color: #4E00A2;
    color: #fff;
    transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {

}  



