.form-checkbox {margin-bottom: 1rem; } .form-checkbox .form-switch {position: relative;display: block;width: 2.6875rem;height: 1.5625rem;margin-right: 0.625rem;top: 0.25rem; } .form-checkbox .form-switch .form-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #d9dfe3;transition-duration: 0.25s;border-radius: 1.5rem; } .form-checkbox .form-switch .form-slider::before {position: absolute;content: "";height: 1.1875rem;width: 1.1875rem;left: 0.25rem;bottom: 0.1875rem;background-color: var(--white);transition-duration: 0.25s;border-radius: 50%; } .form-checkbox .form-switch input[type=checkbox] {opacity: 0;width: 0;height: 0; } .form-checkbox .form-switch input[type=checkbox]:focus + .form-slider {box-shadow: 0 0 0 0.2rem transparent; } .form-checkbox .form-switch input[type=checkbox]:checked + .form-slider {background-color: var(--primary); } .form-checkbox .form-switch input[type=checkbox]:checked:focus + .form-slider {box-shadow: 0 0 0 0.2rem var(--input-btn-focus-color); } .form-checkbox .form-switch input[type=checkbox]:checked + .form-slider::before {transform: translateX(1rem); }