/* Toggle instances */
.toggle { width: 100px; margin: 20px; }
.stacked .toggle { display: block; }

/* General toggle styles */
.toggle { position: relative; padding: 0; display: inline-block; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
    .toggle input { position: absolute; opacity: 0; }
    .toggle > div { overflow: hidden; padding: 0; width: 100%; }
    .toggle label { display: block; margin: 0 0 0 -100%; padding: 0; width: 200%; -webkit-transition: margin 0.15s cubic-bezier(1, 0.035, 0.665, 0.91); transition: margin 0.15s cubic-bezier(1, 0.035, 0.665, 0.91); }
        .toggle label::before, .toggle label::after { content: " "; display: table; }
        .toggle label::after { clear: both; }
        .toggle label .btn { display: block; float: left; }
    .toggle input:focus + div { box-shadow: 0 0 0 2px #ababab; }
    .toggle input:checked + div > label { margin-left: 0; }
        .toggle input:checked + div > label .toggle-handle { left: 85%; left: calc(85% - 2px); }
.toggle-on, .toggle-off { border-radius: 4px; width: 50%; }
.toggle-on { padding-right: 15%; }
.toggle-off { padding-left: 15%; }
.toggle-handle { width: 15%; padding: 0; position: absolute; left: 2px; top: 2px; bottom: 2px; -webkit-transition: left 0.15s cubic-bezier(1, 0.035, 0.665, 0.91); transition: left 0.15s cubic-bezier(1, 0.035, 0.665, 0.91); }
.toggle-align .toggle-on { text-align: left; padding-right: 0; }
.toggle-align .toggle-off { text-align: right; padding-left: 0; }

/*** Bootstrap overrides ***/
label { max-width: 200%;}
div.toggle-on.btn, div.toggle-off.btn { text-align: center; padding-left: 1em;} 
/*.btn.focus { text-align: left;}*/

/*** qct.css overrides ***/
.toggle > .btn > label > div > i.fa{ font-size: 1.25em; font-weight: normal;}