body.theme-dark {
  --eduloo-modal-footer-bg: var(--surface-container-high);
  --eduloo-modal-shell-bg: var(--eduloo-dark-surface-card);
  --eduloo-modal-panel-bg: var(--eduloo-dark-surface-panel);
  --eduloo-modal-input-bg: var(--eduloo-input-inset-bg);
  --eduloo-modal-input-focus-bg: color-mix(
    in srgb,
    var(--eduloo-input-inset-bg) 66%,
    var(--primary-container) 34%
  );
  --eduloo-modal-shell-border: color-mix(
    in srgb,
    var(--outline-variant) 78%,
    color-mix(in srgb, var(--on-surface) 20%, transparent) 22%
  );
}

body.theme-dark .st-study-modal .st-modal {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 12%, transparent),
    0 10px 20px -14px rgba(0, 0, 0, 0.36) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item,
body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card {
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 82%,
    var(--primary-container) 18%
  ) !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected {
  border-color: var(--eduloo-modal-option-selected-border) !important;
  background: var(--eduloo-modal-option-selected-bg) !important;
  color: var(--eduloo-modal-option-selected-text) !important;
}

body.theme-dark {
  --eduloo-modal-shell-bg: color-mix(
    in srgb,
    var(--surface-container-high) 86%,
    var(--primary-container) 14%
  );
  --eduloo-modal-panel-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container-high) 22%
  );
  --eduloo-modal-input-bg: var(--eduloo-input-unified-bg);
  --eduloo-modal-input-bg-hover: var(--eduloo-input-unified-bg-hover);
  --eduloo-modal-input-focus-bg: var(--eduloo-input-unified-bg-focus);
  --eduloo-modal-shell-border: color-mix(
    in srgb,
    var(--outline-variant) 72%,
    color-mix(in srgb, var(--on-surface) 28%, transparent) 28%
  );
  --eduloo-modal-option-selected-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 90%, var(--on-primary-container) 10%) 0%,
    color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100%
  );
  --eduloo-modal-option-selected-border: color-mix(
    in srgb,
    var(--primary) 68%,
    color-mix(in srgb, var(--on-surface) 32%, transparent) 32%
  );
  --eduloo-modal-option-selected-text: var(--on-primary-container);
}

body.theme-dark .st-study-modal .st-modal {
  background: var(--eduloo-modal-shell-bg) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 12%, transparent),
    0 12px 24px -16px rgba(0, 0, 0, 0.36) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group {
  background: var(--eduloo-modal-panel-bg) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input,
body.theme-dark .st-study-modal .st-modal-form-group textarea,
body.theme-dark .st-study-modal .st-modal-form-group select,
body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger {
  background: var(--eduloo-modal-input-bg) !important;
  border: 1px solid var(--eduloo-input-unified-border) !important;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input:hover,
body.theme-dark .st-study-modal .st-modal-form-group textarea:hover,
body.theme-dark .st-study-modal .st-modal-form-group select:hover,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-trigger:hover:not(:disabled) {
  background: var(--eduloo-modal-input-bg-hover) !important;
  border-color: var(--eduloo-input-unified-border-hover) !important;
  filter: none !important;
  transform: none !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input:focus,
body.theme-dark .st-study-modal .st-modal-form-group input:focus-visible,
body.theme-dark .st-study-modal .st-modal-form-group textarea:focus,
body.theme-dark .st-study-modal .st-modal-form-group textarea:focus-visible,
body.theme-dark .st-study-modal .st-modal-form-group select:focus,
body.theme-dark .st-study-modal .st-modal-form-group select:focus-visible,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown.open
  .custom-dropdown-trigger,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-trigger:focus-visible {
  background: var(--eduloo-modal-input-focus-bg) !important;
  border-color: var(--eduloo-input-unified-border-focus) !important;
  box-shadow: 0 0 0 2px var(--eduloo-input-unified-ring) !important;
  filter: none !important;
  transform: none !important;
}

body.theme-dark .st-study-modal .st-modal-form-group .st-btn,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .button.button-secondary.st-btn,
body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item,
body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 80%,
    var(--primary-container) 20%
  ) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  color: var(--eduloo-text-body) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group .st-btn:hover,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .button.button-secondary.st-btn:hover,
body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item:hover,
body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card:hover {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--eduloo-modal-shell-border) 54%,
    var(--primary) 46%
  ) !important;
  filter: none !important;
}

body.theme-dark .st-study-modal .st-modal-form-group .st-btn.selected,
body.theme-dark .st-study-modal .st-modal-form-group .st-btn.is-selected,
body.theme-dark .st-study-modal .st-modal-form-group .st-btn.active,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-btn[aria-selected='true'],
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-btn[aria-pressed='true'],
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .button.button-secondary.st-btn[aria-pressed='true'],
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled) {
  background: var(--eduloo-modal-option-selected-bg) !important;
  border: 1px solid var(--eduloo-modal-option-selected-border) !important;
  color: var(--eduloo-modal-option-selected-text) !important;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--on-surface) 20%, transparent) !important;
}

body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn,
body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn,
body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn,
body.theme-dark .st-study-modal .button.button-secondary.st-btn {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 80%,
    var(--surface-container-high) 20%
  ) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  color: var(--eduloo-text-title) !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-footer
  .st-modal-footer-btn.button-primary,
body.theme-dark
  .st-study-modal
  .modal-footer
  .st-modal-footer-btn.button-primary,
body.theme-dark
  .st-study-modal
  .modal-actions
  .st-modal-footer-btn.button-primary,
body.theme-dark .st-study-modal .button.button-primary.st-btn,
body.theme-dark .st-study-modal .button.button-secondary.st-btn.btn-success {
  background: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%,
    color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100%
  ) !important;
  border: 1px solid
    color-mix(
      in srgb,
      var(--primary) 68%,
      color-mix(in srgb, var(--on-surface) 30%, transparent) 32%
    ) !important;
  color: var(--on-primary-container) !important;
}

body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon,
body.theme-dark
  .st-study-modal
  .st-modal-header
  button.button-secondary.st-btn.st-btn--only-icon {
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container-high) 22%
  ) !important;
}

body.theme-dark .st-study-modal input[type='checkbox']:not(:checked) {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent) !important;
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--on-surface) 44%, transparent) !important;
}

body.theme-dark .st-study-modal input[type='checkbox']:checked {
  background: var(--eduloo-modal-option-selected-bg) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-modal-option-selected-border) !important;
}

body.theme-dark .st-study-modal input[type='checkbox']:checked::before {
  border-left-color: var(--eduloo-modal-option-selected-text) !important;
  border-bottom-color: var(--eduloo-modal-option-selected-text) !important;
}

body.theme-dark
  .st-study-modal--workspace-manage
  .st-modal-form-group.st-workspace-manage-section {
  background: transparent !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-header
  .st-btn.st-btn--only-icon:hover,
body.theme-dark
  .st-study-modal
  .st-modal-header
  button.button-secondary.st-btn.st-btn--only-icon:hover {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 54%,
    var(--primary) 46%
  ) !important;
  filter: none !important;
}

body .st-study-modal--edit-quiz .st-modal-header {
  margin-bottom: 10px !important;
}

body
  .st-study-modal--edit-quiz
  .st-modal-quiz-item-actions
  .button.button-secondary.st-btn.st-btn--only-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

body
  .st-study-modal--edit-quiz
  .st-modal-quiz-item-actions
  .button.button-secondary.st-btn.st-btn--only-icon
  .icon,
body
  .st-study-modal--edit-quiz
  .st-modal-quiz-item-actions
  .button.button-secondary.st-btn.st-btn--only-icon
  i {
  margin: 0 !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
}

body .st-study-modal--edit-quiz .st-modal-quiz-answer-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
}

body
  .st-study-modal--edit-quiz
  .button.button-secondary.st-btn.st-modal-quiz-correct-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  body .st-study-modal--edit-quiz .st-modal-header {
    margin-bottom: 8px !important;
  }

  body
    .st-study-modal--edit-quiz
    .st-modal-quiz-item-actions
    .button.button-secondary.st-btn.st-btn--only-icon,
  body
    .st-study-modal--edit-quiz
    .button.button-secondary.st-btn.st-modal-quiz-correct-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 9px !important;
  }
}

body.theme-dark .st-study-modal--edit-quiz .st-modal-quiz-search {
  position: relative !important;
  min-height: 40px !important;
  height: 40px !important;
}

body.theme-dark
  .st-study-modal--edit-quiz
  .st-modal-quiz-search
  .search-field__input {
  min-height: 40px !important;
  height: 40px !important;
  padding-left: 36px !important;
  padding-right: 12px !important;
}

body.theme-dark
  .st-study-modal--edit-quiz
  .st-modal-quiz-search
  .search-field__icon {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  left: 12px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  line-height: 1 !important;
  color: var(--eduloo-modal-muted) !important;
}

body.theme-dark
  .st-study-modal--edit-quiz
  [data-edit-quiz-add-trigger].button.button-secondary.st-btn:not(
    .st-modal-quiz-add-trigger--cancel
  ) {
  background: var(--eduloo-ui-primary-btn-bg) !important;
  border: 1px solid var(--eduloo-ui-primary-btn-border) !important;
  color: var(--on-primary-container) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 22%, transparent),
    var(--eduloo-ui-primary-btn-shadow) !important;
}

body.theme-dark
  .st-study-modal--edit-quiz
  [data-edit-quiz-add-trigger].button.button-secondary.st-btn:not(
    .st-modal-quiz-add-trigger--cancel
  ):hover,
body.theme-dark
  .st-study-modal--edit-quiz
  [data-edit-quiz-add-trigger].button.button-secondary.st-btn:not(
    .st-modal-quiz-add-trigger--cancel
  ):focus-visible {
  background: var(--eduloo-ui-primary-btn-bg) !important;
  color: var(--on-primary-container) !important;
  filter: brightness(1.08) !important;
  border-color: var(--eduloo-ui-primary-btn-border) !important;
}

body.theme-dark
  .st-study-modal--edit-quiz
  [data-edit-quiz-add-trigger].button.button-secondary.st-btn
  .icon {
  color: inherit !important;
}

body.theme-dark .st-study-modal--edit-quiz .st-modal-quiz-list {
  background: color-mix(
    in srgb,
    var(--surface-container-high) 88%,
    var(--surface-container-low) 12%
  ) !important;
  box-shadow: inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--outline-variant) 76%,
      color-mix(in srgb, var(--on-surface) 24%, transparent) 24%
    ) !important;
}

body.theme-dark
  .st-study-modal.st-study-modal--edit-quiz
  .st-modal-quiz-list
  .st-modal-quiz-item,
body.theme-dark
  .st-study-modal.st-study-modal--edit-quiz
  .st-modal-quiz-list
  .st-modal-quiz-item:hover,
body.theme-dark
  .st-study-modal.st-study-modal--edit-quiz
  .st-modal-quiz-list
  .st-modal-quiz-item--expanded,
body.theme-dark
  .st-study-modal.st-study-modal--edit-quiz
  .st-modal-quiz-list
  .st-modal-quiz-item.selected {
  box-shadow: none !important;
}

body.theme-dark {
  --eduloo-modal-overlay: color-mix(in srgb, black 68%, transparent);
  --eduloo-modal-shell-bg: color-mix(
    in srgb,
    var(--surface-container-high) 86%,
    var(--primary-container) 14%
  );
  --eduloo-modal-shell-border: color-mix(
    in srgb,
    var(--outline-variant) 72%,
    color-mix(in srgb, var(--on-surface) 28%, transparent) 28%
  );
  --eduloo-modal-header-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container-high) 22%
  );
  --eduloo-modal-panel-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container-high) 22%
  );
  --eduloo-modal-panel-alt: color-mix(
    in srgb,
    var(--surface-container-highest) 82%,
    var(--secondary-container) 18%
  );
  --eduloo-modal-input-bg: var(--eduloo-input-unified-bg);
  --eduloo-modal-input-bg-hover: var(--eduloo-input-unified-bg-hover);
  --eduloo-modal-input-focus-bg: var(--eduloo-input-unified-bg-focus);
  --eduloo-modal-input-border: var(--eduloo-input-unified-border);
  --eduloo-modal-input-border-focus: var(--eduloo-input-unified-border-focus);
  --eduloo-modal-focus: var(--eduloo-input-unified-ring);
  --eduloo-modal-button-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 80%,
    var(--primary-container) 20%
  );
  --eduloo-modal-button-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  );
  --eduloo-modal-button-text: var(--eduloo-text-title);
  --eduloo-modal-button-border: color-mix(
    in srgb,
    var(--outline-variant) 72%,
    color-mix(in srgb, var(--on-surface) 28%, transparent) 28%
  );
  --eduloo-modal-option-unselected-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 80%,
    var(--primary-container) 20%
  );
  --eduloo-modal-option-unselected-border: var(--eduloo-modal-shell-border);
  --eduloo-modal-option-selected-bg: var(--eduloo-ui-primary-btn-bg);
  --eduloo-modal-option-selected-border: var(--eduloo-ui-primary-btn-border);
  --eduloo-modal-option-selected-text: var(--on-primary-container);
  --eduloo-modal-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.38);
}

body.theme-dark .st-study-modal {
  background: var(--eduloo-modal-overlay) !important;
  backdrop-filter: blur(12px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
}

body.theme-dark .st-study-modal .st-modal {
  background: var(--eduloo-modal-shell-bg) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 10%, transparent),
    var(--eduloo-modal-shadow) !important;
}

body.theme-dark .st-study-modal .st-modal-header {
  background: var(--eduloo-modal-header-bg) !important;
  border-bottom: 1px solid var(--eduloo-modal-shell-border) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group {
  background: var(--eduloo-modal-panel-bg) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--on-surface) 8%, transparent) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group label {
  color: var(--eduloo-text-title) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input,
body.theme-dark .st-study-modal .st-modal-form-group textarea,
body.theme-dark .st-study-modal .st-modal-form-group select,
body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-topic-select-row
  .custom-dropdown-trigger {
  background: var(--eduloo-modal-input-bg) !important;
  border: 1px solid var(--eduloo-modal-input-border) !important;
  color: var(--eduloo-text-title) !important;
  outline: none !important;
  box-shadow: none !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input:hover,
body.theme-dark .st-study-modal .st-modal-form-group textarea:hover,
body.theme-dark .st-study-modal .st-modal-form-group select:hover,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-trigger:hover:not(:disabled),
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-topic-select-row
  .custom-dropdown-trigger:hover:not(:disabled) {
  background: var(--eduloo-modal-input-bg-hover) !important;
  border-color: var(--eduloo-input-unified-border-hover) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input:focus,
body.theme-dark .st-study-modal .st-modal-form-group input:focus-visible,
body.theme-dark .st-study-modal .st-modal-form-group textarea:focus,
body.theme-dark .st-study-modal .st-modal-form-group textarea:focus-visible,
body.theme-dark .st-study-modal .st-modal-form-group select:focus,
body.theme-dark .st-study-modal .st-modal-form-group select:focus-visible,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown.open
  .custom-dropdown-trigger,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-trigger:focus-visible,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-topic-select-row
  .custom-dropdown.open
  .custom-dropdown-trigger,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-topic-select-row
  .custom-dropdown-trigger:focus-visible {
  background: var(--eduloo-modal-input-focus-bg) !important;
  border-color: var(--eduloo-modal-input-border-focus) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--eduloo-modal-focus) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-panel {
  background: var(--eduloo-modal-panel-alt) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item,
body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card,
body.theme-dark .st-study-modal .st-modal-form-group .st-btn.st-btn--sm,
body.theme-dark .st-study-modal .st-modal-form-group .st-quizz-option {
  background: var(--eduloo-modal-option-unselected-bg) !important;
  border: 1px solid var(--eduloo-modal-option-unselected-border) !important;
  color: var(--eduloo-text-body) !important;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--on-surface) 8%, transparent) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group .st-modal-quiz-item:hover,
body.theme-dark .st-study-modal .st-modal-form-group .st-selectable-card:hover,
body.theme-dark .st-study-modal .st-modal-form-group .st-btn.st-btn--sm:hover,
body.theme-dark .st-study-modal .st-modal-form-group .st-quizz-option:hover {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 54%,
    var(--primary) 46%
  ) !important;
  filter: none !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-btn.st-btn--sm.selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-btn.st-btn--sm[aria-pressed='true'],
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-btn.st-btn--sm[aria-selected='true'],
body.theme-dark .st-study-modal .st-modal-form-group .st-quizz-option--selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled) {
  background: var(--eduloo-modal-option-selected-bg) !important;
  border-color: var(--eduloo-modal-option-selected-border) !important;
  color: var(--eduloo-modal-option-selected-text) !important;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--on-surface) 20%, transparent) !important;
}

body.theme-dark .st-study-modal .st-modal-footer,
body.theme-dark .st-study-modal .modal-footer,
body.theme-dark .st-study-modal .modal-actions {
  border-top: 1px solid var(--eduloo-modal-shell-border) !important;
  background: color-mix(
    in srgb,
    var(--eduloo-dark-elev-panel) 84%,
    var(--surface-container-high) 16%
  ) !important;
}

body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn,
body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn,
body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn,
body.theme-dark .st-study-modal .button.button-secondary.st-btn {
  background: var(--eduloo-modal-button-bg) !important;
  border: 1px solid var(--eduloo-modal-button-border) !important;
  color: var(--eduloo-modal-button-text) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent),
    var(--eduloo-dark-shadow-soft) !important;
}

body.theme-dark .st-study-modal .st-modal-footer .st-modal-footer-btn:hover,
body.theme-dark .st-study-modal .modal-footer .st-modal-footer-btn:hover,
body.theme-dark .st-study-modal .modal-actions .st-modal-footer-btn:hover,
body.theme-dark .st-study-modal .button.button-secondary.st-btn:hover {
  background: var(--eduloo-modal-button-hover) !important;
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 54%,
    var(--primary) 46%
  ) !important;
  filter: none !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-footer
  .st-modal-footer-btn.button-primary,
body.theme-dark
  .st-study-modal
  .modal-footer
  .st-modal-footer-btn.button-primary,
body.theme-dark
  .st-study-modal
  .modal-actions
  .st-modal-footer-btn.button-primary,
body.theme-dark .st-study-modal .button.button-primary.st-btn,
body.theme-dark .st-study-modal .button.button-secondary.st-btn.btn-success {
  background: var(--eduloo-ui-primary-btn-bg) !important;
  border: 1px solid var(--eduloo-ui-primary-btn-border) !important;
  color: var(--on-primary-container) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 22%, transparent),
    var(--eduloo-ui-primary-btn-shadow) !important;
}

body.theme-dark .st-study-modal .st-modal-header .st-btn.st-btn--only-icon,
body.theme-dark
  .st-study-modal
  .st-modal-header
  button.button-secondary.st-btn.st-btn--only-icon {
  border: 1px solid var(--eduloo-modal-button-border) !important;
  background: var(--eduloo-modal-button-bg) !important;
  color: var(--eduloo-text-title) !important;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--on-surface) 14%, transparent) !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-header
  .st-btn.st-btn--only-icon:hover,
body.theme-dark
  .st-study-modal
  .st-modal-header
  button.button-secondary.st-btn.st-btn--only-icon:hover {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 54%,
    var(--primary) 46%
  ) !important;
  filter: none !important;
}

body.theme-dark .st-study-modal,
body.theme-dark .st-modal,
body.theme-dark [class*='st-modal'],
body.theme-dark [class*='st-study-modal'] {
  --eduloo-modal-overlay: color-mix(in srgb, black 62%, transparent);
  --eduloo-modal-shell-bg: var(--surface-container-high);
  --eduloo-modal-shell-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-modal-shell-accent-a: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-modal-shell-accent-b: color-mix(
    in srgb,
    var(--secondary) 12%,
    transparent
  );
  --eduloo-modal-header-bg: transparent;
  --eduloo-modal-header-accent: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-modal-title: var(--on-surface);
  --eduloo-modal-text: var(--on-surface);
  --eduloo-modal-muted: var(--on-surface-variant);
  --eduloo-modal-panel-bg: var(--surface-container-highest);
  --eduloo-modal-panel-alt: var(--surface-container);
  --eduloo-modal-row-bg: var(--surface-container-highest);
  --eduloo-modal-row-alt-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 82%,
    var(--primary-container) 18%
  );
  --eduloo-modal-row-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-modal-button-bg: var(--eduloo-dark-btn-soft-bg);
  --eduloo-modal-button-hover: var(--eduloo-dark-btn-soft-bg-hover);
  --eduloo-modal-button-text: var(--on-surface);
  --eduloo-modal-button-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-modal-button-strong: color-mix(
    in srgb,
    var(--primary) 36%,
    transparent
  );
  --eduloo-modal-button-primary: var(--eduloo-dark-btn-primary-bg);
  --eduloo-modal-button-primary-hover: var(--eduloo-dark-btn-primary-bg-hover);
  --eduloo-modal-button-primary-text: var(--on-primary);
  --eduloo-modal-danger-bg: color-mix(
    in srgb,
    var(--error) 26%,
    var(--surface-container-highest) 74%
  );
  --eduloo-modal-danger-text: var(--on-primary-container);
  --eduloo-modal-shadow: 0 32px 64px -28px
    color-mix(in srgb, black 76%, transparent);
  --eduloo-modal-panel-shadow: 0 14px 28px -20px
    color-mix(in srgb, black 62%, transparent);
  --eduloo-modal-input-bg: var(--surface-container-lowest);
  --eduloo-modal-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 80%,
    var(--primary-container) 20%
  );
  --eduloo-modal-input-focus-bg: var(--surface-container);
  --eduloo-modal-input-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-modal-input-border-focus: color-mix(
    in srgb,
    var(--primary) 48%,
    transparent
  );
  --eduloo-modal-focus: color-mix(in srgb, var(--primary) 24%, transparent);
  --eduloo-modal-option-unselected-bg: var(--surface-container-highest);
  --eduloo-modal-option-unselected-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-modal-option-selected-bg: linear-gradient(
    135deg,
    var(--primary-container) 0%,
    color-mix(in srgb, var(--primary-container) 80%, var(--primary) 20%) 100%
  );
  --eduloo-modal-option-selected-border: color-mix(
    in srgb,
    var(--primary) 40%,
    transparent
  );
  --eduloo-modal-option-selected-text: var(--on-primary-container);
}

body.theme-dark .st-study-modal .st-modal,
body.theme-dark .st-modal__shell,
body.theme-dark .st-modal-shell {
  background: var(--eduloo-modal-shell-bg) !important;
  border: 1px solid var(--eduloo-modal-shell-border) !important;
  box-shadow: var(--eduloo-modal-shadow) !important;
}

body.theme-dark .st-study-modal-overlay,
body.theme-dark .st-modal-overlay,
body.theme-dark .st-modal__backdrop {
  background: var(--eduloo-modal-overlay) !important;
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
}

body.theme-dark .st-study-modal .st-modal-header,
body.theme-dark .st-modal-header,
body.theme-dark .st-modal__header {
  background: transparent !important;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, transparent) !important;
  color: var(--on-surface) !important;
}

body.theme-dark .st-study-modal .st-modal-footer,
body.theme-dark .st-modal-footer,
body.theme-dark .st-modal__footer {
  background: transparent !important;
  border-top: 1px solid color-mix(in srgb, var(--primary) 16%, transparent) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input,
body.theme-dark .st-study-modal .st-modal-form-group textarea,
body.theme-dark .st-study-modal .st-modal-form-group select,
body.theme-dark .st-study-modal .st-modal-form-group .custom-dropdown-trigger,
body.theme-dark .st-modal input,
body.theme-dark .st-modal textarea,
body.theme-dark .st-modal select {
  background: var(--eduloo-modal-input-bg) !important;
  border: 1px solid var(--eduloo-modal-input-border) !important;
  color: var(--on-surface) !important;
  box-shadow: none !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input:hover:not(:disabled),
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  textarea:hover:not(:disabled),
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  select:hover:not(:disabled),
body.theme-dark .st-modal input:hover:not(:disabled),
body.theme-dark .st-modal textarea:hover:not(:disabled) {
  background: var(--eduloo-modal-input-bg-hover) !important;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

body.theme-dark .st-study-modal .st-modal-form-group input:focus,
body.theme-dark .st-study-modal .st-modal-form-group input:focus-visible,
body.theme-dark .st-study-modal .st-modal-form-group textarea:focus,
body.theme-dark .st-study-modal .st-modal-form-group textarea:focus-visible,
body.theme-dark .st-study-modal .st-modal-form-group select:focus,
body.theme-dark .st-modal input:focus,
body.theme-dark .st-modal textarea:focus {
  background: var(--eduloo-modal-input-focus-bg) !important;
  border-color: var(--eduloo-modal-input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--eduloo-modal-focus) !important;
  outline: none !important;
}

body.theme-dark
  .st-study-modal
  .st-btn:not(.button-primary):not(.st-btn--danger),
body.theme-dark .st-modal .st-btn:not(.button-primary):not(.st-btn--danger) {
  background: var(--eduloo-modal-button-bg) !important;
  border: 1px solid var(--eduloo-modal-button-border) !important;
  color: var(--eduloo-modal-button-text) !important;
  box-shadow: 0 6px 14px -10px color-mix(in srgb, black 58%, transparent) !important;
}

body.theme-dark
  .st-study-modal
  .st-btn:not(.button-primary):not(.st-btn--danger):hover:not(:disabled),
body.theme-dark
  .st-modal
  .st-btn:not(.button-primary):not(.st-btn--danger):hover:not(:disabled) {
  background: var(--eduloo-modal-button-hover) !important;
  border-color: var(--eduloo-modal-button-strong) !important;
  box-shadow: 0 10px 20px -12px
    color-mix(in srgb, var(--primary) 32%, transparent) !important;
}

body.theme-dark .st-study-modal .st-btn.button-primary,
body.theme-dark .st-modal .st-btn.button-primary {
  background: var(--eduloo-modal-button-primary) !important;
  color: var(--eduloo-modal-button-primary-text) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent) !important;
  box-shadow: 0 10px 20px -12px
    color-mix(in srgb, var(--primary) 36%, transparent) !important;
}

body.theme-dark .st-study-modal .st-btn.button-primary:hover:not(:disabled),
body.theme-dark .st-modal .st-btn.button-primary:hover:not(:disabled) {
  background: var(--eduloo-modal-button-primary-hover) !important;
  filter: brightness(1.04);
}

body.theme-dark .st-study-modal .st-btn--danger,
body.theme-dark .st-modal .st-btn--danger {
  background: color-mix(
    in srgb,
    var(--error) 82%,
    var(--primary-container) 18%
  ) !important;
  color: var(--on-primary) !important;
  border: 1px solid color-mix(in srgb, var(--error) 50%, transparent) !important;
}

body.theme-dark .st-study-modal .st-modal-row,
body.theme-dark
  .st-study-modal
  [class*='row']:not([class*='arrow']):not([class*='borrow']),
body.theme-dark .st-modal-row {
  background: transparent;
}

body.theme-dark .st-study-modal [role='option'][aria-selected='true'],
body.theme-dark .st-study-modal .is-selected,
body.theme-dark .st-modal [role='option'][aria-selected='true'] {
  background: var(--eduloo-modal-option-selected-bg) !important;
  border-color: var(--eduloo-modal-option-selected-border) !important;
  color: var(--eduloo-modal-option-selected-text) !important;
}

body.theme-dark
  .st-study-modal
  [role='option']:hover:not([aria-selected='true']),
body.theme-dark .st-modal [role='option']:hover:not([aria-selected='true']) {
  background: var(--eduloo-modal-row-hover) !important;
}

body.theme-dark .st-study-modal .st-chip,
body.theme-dark .st-study-modal .st-pill,
body.theme-dark .st-study-modal .st-tag {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--primary-container) 22%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: var(--on-surface) !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn,
body.theme-dark
  .st-study-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn,
body.theme-dark
  .st-study-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn,
body.theme-dark
  .st-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn,
body.theme-dark
  .st-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn,
body.theme-dark
  .st-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn {
  background: var(--eduloo-modal-option-selected-bg) !important;
  background-image: var(--eduloo-modal-option-selected-bg) !important;
  background-color: transparent !important;
  border: 1px solid var(--eduloo-modal-option-selected-border) !important;
  color: var(--eduloo-modal-option-selected-text) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 18%, transparent),
    0 8px 20px -12px color-mix(in srgb, var(--primary) 48%, transparent),
    0 2px 6px -2px rgba(0, 0, 0, 0.32) !important;
  filter: none !important;
  transition:
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background-image 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms ease !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-study-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-study-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn:hover:not(:disabled):not(
    [aria-disabled='true']
  ) {
  background: var(--eduloo-modal-option-selected-bg) !important;
  background-image: var(--eduloo-modal-option-selected-bg) !important;
  background-color: transparent !important;
  border-color: color-mix(
    in srgb,
    var(--primary) 78%,
    var(--on-primary-container) 22%
  ) !important;
  color: var(--eduloo-modal-option-selected-text) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 28%, transparent),
    0 14px 28px -12px color-mix(in srgb, var(--primary) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
    0 3px 8px -2px rgba(0, 0, 0, 0.34) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.14) saturate(1.04) !important;
  transition:
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background-image 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-study-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-study-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn:active:not(:disabled):not(
    [aria-disabled='true']
  ) {
  transform: translateY(0) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent),
    0 4px 10px -6px color-mix(in srgb, var(--primary) 50%, transparent) !important;
  filter: brightness(0.96) !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:focus-visible:not(
    :disabled
  ),
body.theme-dark
  .st-study-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:focus-visible:not(
    :disabled
  ),
body.theme-dark
  .st-study-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn:focus-visible:not(
    :disabled
  ),
body.theme-dark
  .st-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:focus-visible:not(
    :disabled
  ),
body.theme-dark
  .st-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn:focus-visible:not(
    :disabled
  ),
body.theme-dark
  .st-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn:focus-visible:not(
    :disabled
  ) {
  outline: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 22%, transparent),
    0 0 0 3px color-mix(in srgb, var(--primary) 38%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--primary) 60%, transparent) !important;
}

body.theme-dark
  .st-study-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn
  i,
body.theme-dark
  .st-study-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn
  i,
body.theme-dark
  .st-study-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn
  i,
body.theme-dark
  .st-modal
  .st-modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn
  i,
body.theme-dark
  .st-modal
  .modal-footer
  .button.button-primary.st-btn.st-modal-footer-btn
  i,
body.theme-dark
  .st-modal
  .modal-actions
  .button.button-primary.st-btn.st-modal-footer-btn
  i {
  color: var(--eduloo-modal-option-selected-text) !important;
}

body
  .st-study-modal
  .base-multi-select-button-group
  .base-multi-select-button-group__btn--active,
body
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled),
body
  .st-study-modal--workspace-manage
  .st-panel-workspace-select
  .custom-dropdown-option.selected:not(.disabled),
body
  .st-study-modal--workspace-manage
  .st-demo-toggle-row:has(input[type='checkbox']:checked),
body
  .st-study-modal
  .button.button-secondary.st-btn.st-topic-select-all-toggle[aria-pressed='true'],
body.theme-dark .st-study-modal [role='option'][aria-selected='true'],
body.theme-dark .st-modal [role='option'][aria-selected='true'],
body.theme-dark .st-study-modal .is-selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected,
body.theme-dark .st-study-modal .st-btn.selected,
body.theme-dark .st-study-modal .st-btn.is-selected,
body.theme-dark .st-study-modal .st-btn[aria-selected='true'],
body.theme-dark .st-study-modal .st-quizz-option--selected,
body.theme-dark .st-study-modal .st-btn.st-btn--sm.selected,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled) {
  transition:
    background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background-image 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  filter: none;
}

body
  .st-study-modal
  .base-multi-select-button-group
  .base-multi-select-button-group__btn--active:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body[class]
  .st-study-modal
  .base-multi-select-button-group
  .base-multi-select-button-group__btn--active:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled):hover,
body[class]
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled):hover,
body
  .st-study-modal--workspace-manage
  .st-panel-workspace-select
  .custom-dropdown-option.selected:not(.disabled):hover,
body
  .st-study-modal--workspace-manage
  .st-demo-toggle-row:has(input[type='checkbox']:checked):hover,
body
  .st-study-modal
  .button.button-secondary.st-btn.st-topic-select-all-toggle[aria-pressed='true']:hover:not(
    :disabled
  ):not([aria-disabled='true']),
body.theme-dark .st-study-modal [role='option'][aria-selected='true']:hover,
body.theme-dark .st-modal [role='option'][aria-selected='true']:hover,
body.theme-dark
  .st-study-modal
  .is-selected:hover:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected:hover,
body.theme-dark[class]
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected:hover,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected:hover,
body.theme-dark[class]
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected:hover,
body.theme-dark
  .st-study-modal
  .st-btn.selected:hover:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-btn.is-selected:hover:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-btn[aria-selected='true']:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-study-modal
  .st-quizz-option--selected:hover:not(:disabled):not([aria-disabled='true']),
body.theme-dark[class]
  .st-study-modal
  .st-quizz-option--selected:hover:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-btn.st-btn--sm.selected:hover:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled):hover,
body.theme-dark[class]
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled):hover {
  background: var(--eduloo-modal-option-selected-bg) !important;
  background-image: var(--eduloo-modal-option-selected-bg) !important;
  background-color: transparent !important;
  color: var(--eduloo-modal-option-selected-text) !important;
  filter: brightness(1.14) saturate(1.04) !important;
  transform: translateY(-1px) !important;
  border-color: color-mix(
    in srgb,
    var(--primary) 78%,
    var(--on-primary-container) 22%
  ) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 28%, transparent),
    0 14px 28px -12px color-mix(in srgb, var(--primary) 60%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
    0 3px 8px -2px rgba(0, 0, 0, 0.34) !important;
}

body
  .st-study-modal
  .base-multi-select-button-group
  .base-multi-select-button-group__btn--active:focus-visible,
body
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled):focus-visible,
body
  .st-study-modal--workspace-manage
  .st-panel-workspace-select
  .custom-dropdown-option.selected:not(.disabled):focus-visible,
body
  .st-study-modal--workspace-manage
  .st-demo-toggle-row:has(input[type='checkbox']:checked):focus-visible,
body
  .st-study-modal
  .button.button-secondary.st-btn.st-topic-select-all-toggle[aria-pressed='true']:focus-visible,
body.theme-dark
  .st-study-modal
  [role='option'][aria-selected='true']:focus-visible,
body.theme-dark .st-modal [role='option'][aria-selected='true']:focus-visible,
body.theme-dark .st-study-modal .is-selected:focus-visible,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected:focus-visible,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected:focus-visible,
body.theme-dark .st-study-modal .st-btn.selected:focus-visible,
body.theme-dark .st-study-modal .st-btn.is-selected:focus-visible,
body.theme-dark .st-study-modal .st-btn[aria-selected='true']:focus-visible,
body.theme-dark .st-study-modal .st-quizz-option--selected:focus-visible,
body.theme-dark .st-study-modal .st-btn.st-btn--sm.selected:focus-visible,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled):focus-visible {
  outline: none !important;
  background: var(--eduloo-modal-option-selected-bg) !important;
  background-image: var(--eduloo-modal-option-selected-bg) !important;
  background-color: transparent !important;
  filter: brightness(1.14) saturate(1.04) !important;
  border-color: color-mix(
    in srgb,
    var(--primary) 78%,
    var(--on-primary-container) 22%
  ) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 28%, transparent),
    0 0 0 3px color-mix(in srgb, var(--primary) 38%, transparent),
    0 12px 24px -12px color-mix(in srgb, var(--primary) 56%, transparent) !important;
}

body
  .st-study-modal
  .base-multi-select-button-group
  .base-multi-select-button-group__btn--active:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body[class]
  .st-study-modal
  .base-multi-select-button-group
  .base-multi-select-button-group__btn--active:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body
  .st-study-modal
  .st-modal-form-group
  .custom-dropdown-option.selected:not(.disabled):active,
body
  .st-study-modal--workspace-manage
  .st-demo-toggle-row:has(input[type='checkbox']:checked):active,
body
  .st-study-modal
  .button.button-secondary.st-btn.st-topic-select-all-toggle[aria-pressed='true']:active:not(
    :disabled
  ):not([aria-disabled='true']),
body.theme-dark .st-study-modal [role='option'][aria-selected='true']:active,
body.theme-dark .st-modal [role='option'][aria-selected='true']:active,
body.theme-dark
  .st-study-modal
  .st-btn.selected:active:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-btn.is-selected:active:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-btn[aria-selected='true']:active:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-study-modal
  .st-quizz-option--selected:active:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-modal-quiz-item.selected:active,
body.theme-dark
  .st-study-modal
  .st-modal-form-group
  .st-selectable-card.is-selected:active {
  background: var(--eduloo-modal-option-selected-bg) !important;
  background-image: var(--eduloo-modal-option-selected-bg) !important;
  background-color: transparent !important;
  transform: translateY(0) !important;
  filter: brightness(1.04) saturate(1) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent),
    0 4px 10px -6px color-mix(in srgb, var(--primary) 50%, transparent) !important;
}