.options-box {
  color: white;
  background-color: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  padding: 20px;
  max-width: 400px;
  /* position: relative; */
  /* margin: auto; */
  width: 66%;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #ffffff; /* Close button color */
}

.option-title {
    margin: 0 0 18px; /* Space below the title */
    font-size: 20px; /* Title size */
    text-align: center; /* Center the title */
}

.form-group {
    display: flex; /* Flexbox for alignment */
    align-items: flex-start;
    justify-content: space-between; /* Space between label and input */
    align-items: center; /* Vertically align items */
    /* margin-top: 15px;   */
}
.switch-title{
    padding-top: 10px;
    margin: 0;
}

label {
    flex: 1; /* Takes available space */
    font-size: 14px; /* Smaller font size for labels */
}

.options-button {
    background-color: #3a3a3a; /* Button background */
    color: #ffffff; /* Button text color */
    border: none; /* No border */
    padding: 10px; /* Padding inside buttons */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    width: 100%; /* Full width buttons */
    margin-top: 15px; /* Space above buttons */
    transition: background-color 0.3s; /* Smooth background transition */
}
.options-button:hover {
    background-color: #505050; /* Lighter on hover */
}
hr {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1); /* Light divider */
    margin:   5px; /* Margin around the divider */
}
.centered {
    text-align: center; /* Center align text in buttons */
}

/* has  */

label.switch.has-label {
        display: grid;
    grid-template-areas: "col-1 col-2 ";
    grid-gap: 1px;
    align-items: center;
    justify-content: space-between;
  }
  label.switch.has-label .off {
    color: rgba(255, 255, 255 );
    grid-area: col-1;
    transition: var(--transition);
  }
  label.switch.has-label .on {
    color: rgba(0, 0, 0, 0.3);
    grid-area: col-3;
    transition: var(--transition);
  }
  label.switch.has-label .track {
    grid-area: col-2;
  }
  label.switch.has-label input[type=checkbox]:checked ~ .on {
    color: rgb(255, 255, 255);
  }
  label.switch.has-label input[type=checkbox]:checked ~ .off {
    color: rgb(255 253 253 / 47%);
  }


 
/* Main Component Styles */
label.switch {
    text-align: -webkit-right;
    /* padding-bottom: 10px; */
    --switch-size: 40px;
    --thumb-gap: 4px;
    --thumb-size: calc(var(--switch-size) * 0.55 - var(--thumb-gap));
    --thumb-active-offset: calc(var(--switch-size) / 2);
    --track-radius: calc(var(--switch-size) / 1.6666);
    --thumb-color: #fff;
    --track-color: rgba(146, 146, 146, 0.479);
    --accent-color: #2f57d4;
    --transition: 200ms ease;
  }
  label.switch .track {
    width: var(--switch-size);
    height: calc(var(--switch-size) / 1.6666);
    background: var(--track-color);
    border-radius: var(--track-radius);
    border-radius: calc(var(--track-radius) / 2);
    display: flex;
    align-items: center;
    box-shadow: inset 0px 0px 4px -2px rgba(0, 0, 0, 0.129);
    transition: 250ms ease;
  }
  label.switch .thumb {
    display: inline-block;
    background: var(--thumb-color);
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
    transform: translateX(var(--thumb-gap));
    transition: transform 250ms ease-in-out;
  }
  label.switch input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  label.switch input[type=checkbox]:checked + .track {
    background: var(--accent-color);
  }
  label.switch input[type=checkbox]:checked + .track .thumb {
    transform: translateX(var(--thumb-active-offset));
  }
  label.switch input[type=checkbox]:focus + .track {
    box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
  }


  .addedButtonsContainer{
    display: flex;
    padding: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

.group-options-title{
  margin: 9px 0px;
    color: #818193a6;
    font-size: 13px;
    font-family: monospace;
}