/* 
    Created on : 04/05/2017, 21:55:32
    Author     : joaog
*/

.cool-checkbox.selected{
    border-color: #4183F4;
}

.cool-checkbox.selected .checkspan{
    left: 22px;
    background: #4183F4;
}

.cool-checkbox .checkspan{
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 10px;
    background: #ddd;
    left: 2px;
    transition: left 0.2s ease-out;
}

.cool-checkbox{
    width: 40px;
    height: 20px;
    border: 3px solid #ddd;
    background: #fff;
    position: relative;
    border-radius: 13px;
    float: left;
    cursor: pointer;
    padding: 2px;
}

.cool-checkbox:not(.selected):hover{
    border: 3px solid #aaa;
}