.switch-wrapper {
display: flex;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 12px;
}
.switch-wrapper label {
display: flex;
align-items: center;
}
.switch-wrapper span {
font-size: small;
color: var(--red);
margin-right: 0.5rem;
}  .switch {
position: relative;
display: inline-block;
width: 49px;
height: 24px;
margin-bottom: 0;
} .switch input {
opacity: 0;
width: 0;
height: 0;
} .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #999;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 17px;
width: 17px;
left: 5px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: var(--red);
}
input:checked + .slider:before {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
} .slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}