.switch {
    position: relative;
    display: inline-block;
    width: 40px; /* Smaller width */
    height: 22px; /* Smaller height */
}

.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;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px; /* Smaller height */
    width: 16px;  /* Smaller width */
    left: 3px;    /* Adjusted position */
    bottom: 3px;  /* Adjusted position */
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

/* When checkbox is checked */
    input:checked + .slider {
    background-color: #3b0764; /* Change background when active */
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #3b0764; /* Focus state */
  }
  
  input:checked + .slider:before {
    transform: translateX(18px); /* Adjusted translation for toggle position */
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 22px; /* Rounded corners for the slider */
  }
  
  .slider.round:before {
    border-radius: 50%; /* Circle toggle button */
  }
  
  /* Labels */
  .label-left,
  .label-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    transition: opacity 0.4s ease;
    padding: 0 5px;
  }
  
  .label-left {
    left: 39px; /* Position the 'Hide' label on the left */
    opacity: 1; /* Make 'Hide' visible when the switch is off */
  }
  
  .label-right {
    right: 39px; /* Position the 'Show' label on the right */
    opacity: 0; /* Make 'Show' invisible initially */
  }
  
  input:checked + .slider .label-left {
    opacity: 0; /* Hide 'Hide' text when checked */
  }
  
  input:checked + .slider .label-right {
    opacity: 1; /* Show 'Show' text when checked */
  }