.hide-section {
display: none;
}
.label {
font-size: 18px;
font-weight: bold;
color: white;
vertical-align: middle;
}
.label-left {
margin-right: 1.5rem; }
.label-right {
margin-left: 1.5rem; }
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 32px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 3px;
bottom: 3px;
background-color: #005764;
transition: 0.4s;
}
input:checked + .slider {
background-color: #fff;
}
input:checked + .slider:before {
transform: translateX(28px);
} .slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.toggle-labels {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.label-on,
.label-off {
display: none;
}
input:checked ~ .toggle-labels .label-on {
display: inline;
}
input:not(:checked) ~ .toggle-labels .label-off {
display: inline;
}
@media (max-width: 992px) {
.label {
font-size: 18px;
}
.label-left {
margin-right: 0.7rem; }
.label-right {
margin-left: 0.7rem; }
.switch {
width: 56px;
height: 30px;
}
.slider:before {
height: 24px;
width: 24px;
left: 3px;
bottom: 3px;
}
input:checked + .slider:before {
transform: translateX(26px);
}
}