/* The switch - the box around the slider */
 .switch {
     position: relative;
     text-align: center;
     display: inline-block;
     margin-right: 0px;
     padding-right: 0px;
     max-width: 60px;
     min-width: 60px;
     height: var(--input-height);
     font-size: large;
 }

 .switch-container {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
     margin: 5px 5px 5px 5px;
 }

 .switch-label {
     text-align: center;
     font-size: large;
     margin: 0px 10px 0px 10px;
 }

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

 /* The slider */
 .slider {
     position: absolute;
     cursor: pointer;
     height: var(--input-height);
     width: calc(var(--input-height) * 2);
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: var(--input-background-color);
     border: 2px solid var(--knob-color);
     box-shadow: inset 0 0 0px 1px var(--light-accent),
         var(--box-shadow-inset-neg);
     outline: 1px var(--knob-color);
 }

 /*knob*/
 .slider:before {
     position: absolute;
     content: "";
     height: var(--input-height);
     width: calc(var(--input-height));
     left: 0px;
     bottom: 0px;
     background-color: var(--knob-color);
     box-shadow: var(--box-shadow-inset-pos);
     transition: .3s;
 }

 input:checked+.slider:before {
     transform: translateX(100%);
 }

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

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