body{
  .NgxEditor{
    border-radius: var(--border-radius-interface);
    background-color: var(--color-surface-neutral-idle);
    color: var(--color-on-surface-neutral-primary)
  }
  .NgxEditor__Wrapper{
    border: 1px solid var(--color-on-surface-neutral-secondary)
  }
  .NgxEditor__Wrapper .NgxEditor__MenuBar{
    border-bottom: 1px solid var(--color-on-surface-neutral-secondary)
  }
  .NgxEditor__Dropdown .NgxEditor__Dropdown--Text{
    font-size: var(--font-size-s);
  }
  .NgxEditor__Seperator{
    border-left: 1px solid var(--color-on-surface-neutral-disabled);
  }
  .NgxEditor__MenuItem .NgxEditor__MenuItem--Icon{
    height: 24px;
    width: 24px;
    cursor: pointer !important;
    color: var(--color-on-surface-neutral-primary);
    &:hover{
      background-color: var(--color-surface-neutral-hover);
    }
    &:active{
      background-color: var(--color-surface-neutral-press);
    }
  }
  .NgxEditor__MenuItem.NgxEditor__MenuItem--Active, .NgxEditor__MenuItem .NgxEditor__MenuItem--Active{
    background-color: var(--color-surface-alt-idle);
    color: var(--color-on-surface-alt-primary);
    &:hover{
      background-color: var(--color-surface-alt-hover);
    }
    &:active{
      background-color: var(--color-surface-alt-press);
    }
  }
  .NgxEditor__MenuBar{
    gap: 4px 2px;
  }
  .NgxEditor__Seperator{
    margin: 0 4px;
  }
  .NgxEditor__Dropdown .NgxEditor__Dropdown--Item{
    font-size: var(--font-size-m);
    padding: 4.5px 8px;
    border-radius: var(--border-radius-interface);
    cursor: pointer !important;
    &:hover{
      background-color: var(--color-surface-neutral-hover);
    }
    &:active{
      background-color: var(--color-surface-neutral-press);
    }
  }
  .NgxEditor__Dropdown .NgxEditor__Dropdown--DropdownMenu{
    padding: 8px;
    min-width: 140px;
    gap: 4px;
    box-shadow: var(--elevation-low);
  }
  .NgxEditor__Dropdown .NgxEditor__Dropdown--Active{
    background-color: var(--color-surface-neutral-press);
  }
  .NgxEditor__Dropdown .NgxEditor__Dropdown--Selected, .NgxEditor__Dropdown .NgxEditor__Dropdown--Open{
    background-color: transparent;
    color: var(--color-on-surface-neutral-primary);
  }
  .NgxEditor{
    p{
      margin: 0 0 8px 0;
    }
    ol{
      list-style: decimal;
      margin-left: 1.5em;
      p{
        margin-bottom: 4px;
      }
    }
    ul{
      list-style: disc;
      margin-left: 1.5em;
      p{
        margin-bottom: 4px;
      }
    }
  }
  .NgxEditor__HelpText.NgxEditor__HelpText--Error{
    font-size: var(--font-size-s);
    color: var(--color-on-surface-danger-primary)
  }
  .NgxEditor__Popup{
    box-shadow: var(--elevation-low);
    padding: 16px;
    label{
      font-size: var(--font-size-s) !important;
      margin-bottom: 2px !important;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    input{
      border-radius: var(--border-radius-data-input);
      border: 1px solid var(--color-on-surface-neutral-secondary);
      padding: 4.5px 8px !important;
      font-size: var(--font-size-m);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
      /* Hide the default checkbox */
      input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid var(--color-on-surface-neutral-primary);
        border-radius: var(--border-radius-data-input);
        cursor: pointer;
        position: relative;
        outline: none;
        &:hover{
          background-color: var(--color-surface-neutral-hover);
        }
        &:active{
          background-color: var(--color-surface-neutral-press);
        }
      }

      input[type="checkbox"]:checked {
        background-color: var(--color-surface-brand-idle); /* Green background when checked */
        border-color: var(--color-surface-brand-idle);
      }
      input[type="checkbox"]:checked::after {
        color: var(--color-on-surface-alt-primary);
        content: "\ec1e";
        position: absolute;
        font-family: "metron-icons" !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        left: 2px;
        top: 2px;
      }
    button{
      margin-top: 8px;
      background-color: var(--color-surface-brand-idle);
      border-radius: var(--border-radius-interface);
      color: var(--color-on-surface-alt-primary);
      padding: 1.5px 8px;
      font-size: var(--font-size-button);
      &:hover{
        background-color: var(--color-surface-brand-hover);
      }
      &:active{
        background-color: var(--color-surface-brand-press);
      }
    }
    .NgxEditor__ColorContainer{
      margin: 0 0 4px 0 !important;
      gap: 4px;
    }
    .NgxEditor__Color{
      margin-top: 0;
      position: relative;
      cursor: pointer !important;
    }
    .NgxEditor__Color--Active:after{
      color: var(--color-on-surface-alt-primary);
      content: "\ec1e";
      position: absolute;
      font-family: "metron-icons" !important;
      speak: never;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      left: 4px;
      top: 4px;
      font-size: 16px;
    }
  }
  .NgxEditor__Popup{
    width: 250px !important;
  }
}

ul li::marker, ol li::marker {
  font-size: 0.75em;
}
:root{
  --ngx-editor-bubble-bg-color: var(--color-on-surface-neutral-primary) !important;
  --ngx-editor-bubble-text-color: var(--color-on-surface-alt-primary) !important;
}
ngx-bubble{
  button{
    cursor: pointer !important;
  }
}
.NgxBubbleMenu__Icon.NgxBubbleMenu__Icon--Active{
  background-color: var(--color-surface-alt-idle) !important;
  color: var(--color-on-surface-alt-primary) !important;
  &:hover{
    background-color: var(--color-surface-alt-hover) !important;
  }
  &:active{
    background-color: var(--color-surface-alt-press) !important;}
}
.NgxBubbleMenu__Seperator{
  border-left: 1px solid var(--color-on-surface-neutral-disabled) !important;
}
/*
.angular-editor{
  .angular-editor-toolbar{
    background-color: var(--color-surface-default-default) !important;
    font: initial !important;
    font-family: var(--font-families-body) !important;
    .angular-editor-toolbar-set{
      .angular-editor-button{
        &.active{
          background: var(--color-surface-brand-default) !important;
          color: var(--color-on-surface-alternative);
        }
      }
    }
  }
  .angular-editor-textarea{
    background-color: var(--color-surface-default-default) !important;
    font-size: var(--font-sizes-medium);
    &:focus{
      outline: none !important;
    }
  }
}

.ck.ck-editor__editable_inline {
  background-color: var(--color-surface-default-nested) !important;
  border-radius: var(--border-radius-input);
  min-height: 200px;
  border: none !important;
  padding: 8px 16px !important;
}

.ck-focused {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.ck {
  ul {
    list-style: circle;
    padding-left: 36px;
    font-size: var(--font-sizes-medium);
  }

  ol {
    list-style: decimal;
    padding-left: 36px;
    font-size: var(--font-sizes-medium);
  }

  b, strong {
    font-weight: var(--font-weights-900);
  }

  i {
    font-style: italic;
  }
}

.angular-editor-wrapper {
  ul {
    list-style: disc;
    padding-left: 1em;
    margin-left: 1em;
  }

  ol {
    list-style: decimal;
    padding-left: 1em;
    margin-left: 1em;
  }

  i {
    font-style: italic;
  }
}

.angular-editor .angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button.active,
.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button {
  width: 25px !important;
}

.ae-font .ae-picker-options .ae-picker-item.selected,
.ae-font .ae-picker-options .ae-picker-item:hover {
  background-color: var(--color-surface-brand-default) !important;
  color: var(--color-on-surface-alternative) !important;
}

.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button {
  border: 1px solid transparent !important;
}

.angular-editor-toolbar .angular-editor-toolbar-set {
  margin-right: var(--spacing-medium) 0 !important;
  height: 25px;
}

.angular-editor-toolbar .angular-editor-toolbar-set .select-heading {
  width: 120px !important;
}

.angular-editor-toolbar i{
  font-size: var(--font-sizes-medium) !important;
}

.ae-font .ae-picker-label {
  border: 1px solid transparent !important;
  line-height: 22px !important;
}

.angular-editor .angular-editor-toolbar {
  align-items: center;
}

.angular-editor .angular-editor-textarea {
  background-color: var(--color-surface-default-nested) !important;
  border: none !important;
  border-bottom-left-radius: var(--border-radius-input);
  border-bottom-right-radius: var(--border-radius-input);
  margin-top: 1px !important;

}

.angular-editor .angular-editor-toolbar {
  background-color: var(--color-surface-default-nested) !important;
  border: none !important;
}

.angular-editor-toolbar .angular-editor-toolbar-set .angular-editor-button {
  background-color: transparent !important;
}

.alternative {
  .ck.ck-editor__editable_inline {
    background-color: var(--color-surface-default-default) !important;
  }
}
.mdc-card {
  .alternative .ck.ck-editor__editable_inline {
    background-color: var(--color-surface-default-nested) !important;
  }
}

.ck.ck-editor__editable_inline{
  background-color: var(--color-surface-default-default) !important;
  &:after{
    display: none !important;
  }
}
.mdc-card{
  .ck.ck-editor__editable_inline{
    background-color: var(--color-surface-default-nested) !important;
  }
}

.alternative {
  .ck.ck-editor__editable_inline {
    background-color: var(--color-surface-default-default) !important;
  }
}
.mdc-card {
  .alternative .ck.ck-editor__editable_inline {
    background-color: var(--color-surface-default-nested) !important;
  }
}
*/