/* Container for the group of checkboxes */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
  gap: 15px; /* Space between toggles */
  padding: 10px;
}

/* Individual toggle container */
.toggle-container {
  display: flex;
  align-items: center;
}

/* Label styling */
.toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-text {
  margin-right: 10px; /* Space between label text and toggle */
  font-size: 16px;
}

/* Hide the native checkbox */
.toggle-checkbox {
  display: none;
}

/* Toggle switch styling */
.slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #ccc; /* Unchecked state */
  transition: background-color 0.3s;
}

  .slider.square {
    border-radius: 4px; /* Slightly rounded, or 0 for sharp square */
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: transform 0.3s;
    border-radius: 2px;
  }

/* Checked state */
.toggle-checkbox:checked + .slider {
  background-color: darkgreen;
}

  .toggle-checkbox:checked + .slider:before {
    transform: translateX(20px);
  }

/* Handle the hidden input generated by CheckBoxFor */
.toggle-checkbox:checked + input[type="hidden"] + .slider {
  background-color: #ff6a00;
}

  .toggle-checkbox:checked + input[type="hidden"] + .slider:before {
    transform: translateX(20px);
  }

/* Focus state for accessibility */
.toggle-checkbox:focus + .slider,
.toggle-checkbox:focus + input[type="hidden"] + .slider {
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

/* Disabled state */
.toggle-checkbox:disabled + .slider,
.toggle-checkbox:disabled + input[type="hidden"] + .slider {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

  .toggle-checkbox:disabled + .slider:before,
  .toggle-checkbox:disabled + input[type="hidden"] + .slider:before {
    background-color: #f5f5f5;
  }

/* Responsive adjustment for mobile */
@@media (max-width: 600px) {
  .printer-group {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}




.sticky-edit {
  position: fixed;
  bottom: 0;
  z-index: 25;
  margin: 0;
  padding: 1rem .25rem 1rem 0;
  background-color: white;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 4px #000;
  opacity: 0.9;
}








.badge {
  padding: 0.4em 0.8em;
  color: #ffffff;
}

  .badge:empty {
    display: none;
  }

.badge-default {
  background-color: #64b0f2 !important;
}

.badge-primary {
  background-color: #105b8c !important;
}

.badge-success {
  background-color: #1bb99a !important;
}

.badge-info {
  background-color: #3db9dc !important;
}

.badge-warning {
  background-color: #f1b53d !important;
}

.badge-danger {
  background-color: #ff5d48 !important;
}

.badge-pink {
  background-color: #ff7aa3 !important;
}

.badge-purple {
  background-color: #9261c6 !important;
}

.badge-dark {
  background-color: #105b8c !important;
}