.reminder {
    width: 50em;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: var(--pico-form-element-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    background: var(--pico-form-element-background-color);
}

.reminder-dismiss {
  float: right;
}

/* collapseable element */

.collapsible-container {
  margin-bottom: 12px;
}

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

/* Content container styling */
.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.collapsible-inner {
  padding-left: 10px;
  margin-top: 6px;
  border-left: 1px solid var(--pico-secondary-border);
}

/* The magic: when checkbox is checked, expand the content */
.collapsible-checkbox:checked ~ .collapsible-content {
  max-height: 500px; /* Large enough for your content */
}

/* Change the button text using pseudo-elements */
.collapsible-label::after {
  content: " ▼";
  font-size: 0.8em;
}

.collapsible-checkbox:checked ~ .collapsible-label::after {
  content: " ▲";
}

.control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* Custom toggle button styles */
.toggle-container {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: none !important; /* remove tooltip border */
}
.right-button {
  float: right;
  border-bottom: none !important; /* remove tooltip border */
}

.info{
  border-bottom: none !important; /* remove tooltip border */
}

/* [data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after { */
/*   width: 150px; */
/*   white-space: normal; */
/* } */

.toggle-button {
  position: relative;
  width: 50px;
  height: 25px;
  border-radius: 12.5px;
  cursor: pointer;
  background-color: var(--pico-secondary)s;
  display: flex;
  align-items: center;
  padding: 0 5px;
  transition: all 0.3s;
  overflow: hidden;
}

.toggle-button.active {
  background-color: var(--pico-primary);
  border-color: var(--pico-primary-border);
}
.toggle-button.active.global-disabled {
  background-color: var(--pico-secondary);
  border-color: var(--pico-secondary-border);
}

.toggle-button.inactive {
  background-color: var(--pico-secondary);
  border-color: var(--pico-secondary-border);
}

/* .toggle-button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
} */

.toggle-slider {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  transition: transform 0.3s, background-color 0.3s;
  left: 3px;
}

.toggle-button.active .toggle-slider {
  transform: translateX(24px);
  background-color: white;
}

.toggle-button.inactive .toggle-slider {
  transform: translateX(0);
  background-color: white;
}

.toggle-text {
  position: absolute;
  color: var(--pico-secondary-text);
  font-size: 12px;
  font-weight: 500;
  transition: transform 0.3s;
}

.toggle-button.active .toggle-text {
  /* transform: translateX(-12px); */
  color: var(--pico-primary-text);
}

.toggle-button.inactive .toggle-text {
  transform: translateX(19px);
}

.expand-collapse-buttons {
    font-size: 8pt !important;
}
.button-expand {
    padding: 0;
}

.button-back {
    padding-top: var(--pico-spacing);
    padding-bottom: var(--pico-spacing);
    margin-bottom: var(--pico-typography-spacing-vertical);
}