/* Base styles for positioning and hiding the checkbox */
.switch {
    position: relative;
    display: inline-block;
    width: 60px; /* width of the outer box */
    height: 34px; /* height of the outer box */
    margin: 10px; /* Optional: Adds some space around the switch */
}

.switch input {
    opacity: 0; /* Hide the checkbox visually */
    position: absolute;
    width: 100%; /* Cover the entire area of the switch */
    height: 100%; /* Cover the entire area of the switch */
    top: 0;
    left: 0;
    z-index: 2; /* Ensures the checkbox is above the slider but invisible */
    cursor: pointer; /* Shows a pointer cursor when hovering over the checkbox area */
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Default color */
    transition: .4s;
    border-radius: 34px;
    z-index: 1; /* Ensures the slider is visually below the checkbox */
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* When the checkbox is checked */
input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px); /* Slide the inner circle to the right */
}

/* Adding focus styles for accessibility */
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}