/* Style for switch */

.toggle-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 3px; /* Adjust spacing between elements */
}

.toggle-container label {
  margin-right: 10px; /* Adjust spacing between label and switch */
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 25px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 20px; /* Ensure the border-radius matches the height for a circular appearance */
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px; /* Adjust the height of the circle */
    width: 17px; /* Adjust the width of the circle */
    left: 3px; /* Position the circle inside the switch */
    bottom: 4px; /* Position the circle inside the switch */
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%; /* Make it a circle */
    box-sizing: border-box;
}
  
  input:checked + .slider {
    background-color: green;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(17px);
  }