@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .toggle-body.small{
    display: flex;
    justify-content: top;
    align-items: left;
    height: 30px;
    font-family: Arial, sans-serif;
  }
  
  .outer-box.small{
    position: absolute;
    width: 55px; /* Set width of the rectangle */
    height: 26px; /* Set height of the rectangle */
    background-color: rgb(0, 255, 0); /* Green background */
    border-radius: 12px; /* Curved corners */
    border: 2.5px solid rgba(0, 0, 0);
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.3); /* Inner shadow only at the top */
    display: flex; /* Center the circle inside the box */
    align-items: center;
    justify-content: flex-end;
    padding-right: 1.5px;
    
  }
  
  .toggle-container.small{
    position: relative;
    width: 20px; /* Set a specific width for the toggle container */
    height: 20px; /* Match the height to maintain a square area */
    right: 0;
    transition: transform 0.5s ease; /* Smooth transition */
    -webkit-transition: transform 0.5s;
  }
  
  .toggle-button.small{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(0,240,255,1);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    animation: reverse spin 5s linear infinite; /* Apply the spin animation */
  
  }


  /* Define a faster spin when the toggle is active */
.toggle-button.small.fast-spin {
  animation-duration: 0.5s; /* Faster spin during active period */
}
  
  .toggle-container.small.active {
    transform: translateX(-27px); /* Move to the left when active */
    -webkit-transform: translateX(-27px);
  }
  
  .inner-hub.small{
    position: absolute;
    width: 3px;
    height: 3px;
    background: solid, rgb(0,255,240);
    border: 1px solid #000000; /* Add a border to create the hollow effect */
    border-radius: 50%;
  }
  
  .outer-hub.small{
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent; /* Make the center transparent */
    border: 2px solid #000000; /* Add a border to create the hollow effect */
    border-radius: 50%; /* Keep the circle shape */
  }
  
  .spoke.small{
    position: absolute;
    width: 14.5px;
    height: 14.5px;
    border-radius: 100%;
    border: 2px solid transparent;
    border-bottom-color: #000000;
    transform-origin: 80% 80%;
    top: -2.0px;
    left: -2.0px;
  }
  
  .spoke.small:nth-child(1) {
    transform: rotate(0deg);
  }
  
  .spoke.small:nth-child(2) {
    transform: rotate(40deg);
  }
  
  .spoke.small:nth-child(3) {
    transform: rotate(80deg);
  }
  
  .spoke.small:nth-child(4) {
    transform: rotate(120deg);
  }
  
  .spoke.small:nth-child(5) {
    transform: rotate(160deg);
  }
  
  .spoke.small:nth-child(6) {
    transform: rotate(200deg);
  }
  
  .spoke.small:nth-child(7) {
    transform: rotate(240deg);
  }
  
  .spoke.small:nth-child(8) {
    transform: rotate(280deg);
  }
  
  .spoke.small:nth-child(9) {
    transform: rotate(320deg);
  }