.cozy-toggle input{
    opacity: 0;
    position: absolute;
}

.cozy-toggle label {
    position: relative;
    display: block;
    background: #f8f8f8;
    border: 1px solid #f0f0f0;
    border-radius: 2em;
    padding: .5em 1em .5em 5em;
    box-shadow: 0 1px 2px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.1) inset;
    cursor: pointer;
    text-shadow: 0 2px 2px #fff;
}
.cozy-toggle label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: .7em;
    width: 3em;
    height: 1.2em;
    border-radius: .6em;
    background: #eee;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(100, 100, 100, 0.5) inset, 0 0 10px rgba(100, 100, 100, 0.2) inset;
}
.cozy-toggle label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: .5em;
    width: 1.4em;
    height: 1.4em;
    border: .25em solid #fafafa;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #ddd;
    background-image: -webkit-linear-gradient(bottom, #fff 0%, #fff 40%, transparent 100%);
    background-image: linear-gradient(to top, #fff 0%, #fff 40%, transparent 100%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}
.cozy-toggle label, .cozy-toggle label::before, .cozy-toggle label::after {
    -webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cozy-toggle label:hover, .cozy-toggle input:focus +  label {
    color: black;
}
.cozy-toggle label:hover::after, .cozy-toggle input:focus +  label::after {
    background-color: #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cozy-toggle input:checked {
    counter-increment: total;
}
.cozy-toggle input:checked +  label::before {
    background: #00ff67;
}
.cozy-toggle input:checked +  label::after {
    -webkit-transform: translateX(2em) translateY(-50%);
    transform: translateX(2em) translateY(-50%);
}