@keyframes spinner {
    to {transform: rotate(360deg);}
  }
   
  .spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 5%;
    left: 5%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #000;
    animation: spinner .6s linear infinite;
  }
  
  .example {
    margin: 10px;
    background: #ffcccc;
    padding: 10px;
  }
  
  .example-spinner {
    position: relative;
    min-height: 36px;
    background: #fff;
    margin: 10px 0 0;
  }

  .loader {
    content:'';
    border: 12px solid #ffffff;
    border-radius: 50%;
    border-top: 12px solid rgb(48, 131, 48);
    border-bottom: 12px solid rgb(59, 136, 44);
    width: 24px;
    height: 24px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 1s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


  .cblist { border:2px solid #ccc; width:300px; height: 300px; overflow-y: scroll;}

  .selitem {
    background-color: rgb(255, 255, 255);
    color: green;    
    font-weight: 400;
    font-size: 24px;
    margin-top:20px; 
    padding: 3 7 3 7; 
display:inline-block;
}
.selremove {
    background-color: rgb(182, 182, 182);
    color: white;    
    padding: 0 2 0 2; 
    display:inline-block;
    margin-right: 8px;
}

.toggle__dot {
  top: -.25rem;
  left: -.25rem;
  transition: all 0.3s ease-in-out;
}

input:checked ~ .toggle__dot {
  transform: translateX(100%);
  background-color: #48bb78;
}