.sq_togglebutton {

}

.sq_togglebutton[data-toggle="true"]{
    /*box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.5);*/
    background-color:#2ECC71;
}

@keyframes slide {
    from {
      top:.5mm;
      left:.5mm;
    }
    to {
       top:.5mm;
       left:4.5mm;
    }
}
@keyframes slideb {
    from {
      top:.5mm;
       left:4.5mm;
    }
    to {
        top:.5mm;
      left:.5mm;

    }
}
/*shapes*/
.sq_toggle {
    position:relative;
    display:inline-block;
    height:5mm;
    width:5mm;
    background-color:rgb(150,150,150);
    border:3px solid rgb(150,150,150);
}
.sq_toggle .slide {
    position:relative;
    top:.5mm;
    left:.75mm;
    height:3.5mm;
    width:3.5mm;
}

.sq_toggle.circle {
    position:relative;
    display:inline-block;
    height:5mm;
    width:5mm;
    border-radius:3mm;
    background-color:rgb(150,150,150);
    border:3px solid rgb(150,150,150);
}
.sq_toggle.circle .slide {
    position:relative;
    top:.5mm;
    left:.75mm;
    height:3.5mm;
    width:3.5mm;
    border-radius:2mm;
}


.sq_toggle.slider {
    /*position:relative;
    display:inline-block;
    border-radius:3mm;
    background-color:rgb(150,150,150);
    height:5mm;*/
    width:8.5mm;
    border:1px solid rgba(0,0,0,0);
    
}

.sq_toggle.slider .slide {
    position:relative;
    top:.5mm;
    left:.5mm;
    height:3.5mm;
    width:3.5mm;
    /*border-radius:2mm;*/
    background-color:#696B6E;
    border:transparent;
}

.sq_toggle.slider[data-toggle='false'] .slide {
    position:relative;
    animation: slideb .2s linear 0s 1 alternate;

}
.sq_toggle.slider[data-toggle='true'] .slide {
    position:relative;
    animation: slide .2s linear 0s 1 alternate;
    top:.5mm;
    left:4mm;

}

.sq_toggle[data-toggle="true"]{
  background-color:#3FC380;
}
.sq_toggle[data-toggle="false"]{
    background-color:#696B6E;
}