1 /* CSS Document
  2    Modified original CSS source from:
  3    http://codepen.io/mattbeaudry/pen/rwjIJ */
  4 
  5 .toggle-sm {
  6    width: auto !important;
  7    height: auto !important;
  8    background: transparent !important;
  9    overflow: visible !important;
 10 }
 11 
 12 .toggle-sm .button-wrap {
 13    width: 50px;
 14    cursor: pointer;
 15 }
 16 .toggle-sm .button-bg {
 17    width: 100%;
 18    height: 100%;
 19    background-color: #ddd;
 20    border-radius: 40px;
 21    padding: 2px;
 22    color:#fff;
 23    transition:all 0.2s ease;
 24    box-shadow: 0px 0px 7px 0px #9A4343;
 25 }
 26 .toggle-sm .button-switch {
 27    /* OFF POSTION */
 28    position:relative;
 29    left:0px;
 30    width: 22px;
 31    height: 22px;
 32    /* border:solid 6px; */
 33    box-shadow: -1px 1px 4px 2px #6C3131 inset;
 34    background-color: #ffbebe;
 35    border-radius: 18px;
 36    transition:all 0.2s ease;
 37 }
 38 .toggle-sm .button-active .button-switch { 
 39    /* ON POSTION */
 40    background-color: #fff;
 41    left:25px;
 42    box-shadow: 1px 1px 5px 3px #406440 inset;
 43 }
 44 .toggle-sm .button-in, 
 45 .toggle-sm .button-out {
 46    position: absolute; 
 47    transition: opacity 0.6s ease;
 48    padding-top: 7px;
 49    line-height: 0.95em;
 50    font-size: 0.85em;
 51    text-transform: uppercase;
 52    font-weight: bold;
 53 }
 54 .toggle-sm .button-in {
 55    /* OFF > SHOW */
 56    opacity: 1.0;
 57    color: #707070; 
 58    margin-left: 25px;
 59 }
 60 .toggle-sm .button-out {
 61    /* ON > HIDE */
 62    opacity: 0;
 63    margin-left: 6px;
 64 }
 65 .toggle-sm .button-active .button-out {
 66    /* ON > SHOW */
 67    opacity: 1.0;
 68 }
 69 .toggle-sm .button-active .button-in {
 70    /* OFF > HIDE */
 71    opacity: 0;
 72 }
 73 .toggle-sm .button-active .button-bg { 
 74    background-color: #22bb22;
 75    box-shadow: 0px 0px 5px 2px #58F258;
 76 }