/* The switch - the box around the slider */
 .switch {
     position: relative;
     display: inline-block;
     width: 33px;
     height: 18.7px;
 }

 /* Hide default HTML checkbox */
 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 /* The slider */
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 14.3px;
     width: 14.3px;
     left: 2.2px;
     bottom: 2.2px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
 }

 input:checked+.slider {
     background-color: #43b556;
 }

 input:focus+.slider {
     box-shadow: 0 0 1px #43b556;
 }

 input:checked+.slider:before {
     -webkit-transform: translateX(14.3px);
     -ms-transform: translateX(14.3px);
     transform: translateX(14.3px);
 }

 /* Rounded sliders */
 .slider.round {
     border-radius: 18.7px;
 }

 .slider.round:before {
     border-radius: 50%;
 }

 .hdr-unsupported-warning {
     color: #555555;
     padding-left: 15px;
     padding-right: 15px;
     text-align: center;
     display: block;
     width: 65%;
     margin: 5px auto;
 }

 .hdr-switch {
     color: #555;
     padding-left: 15px;
     padding-right: 15px;
     text-align: center;
     display: block;
     margin: 5px auto;
 }

 .hdr-disabled {
     text-align: center;
     color: #999;
     display: block;
     margin: 5px auto;
 }