h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
li,
input,
textarea,
span,
a {
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'Ubuntu', sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

.previewTooltip {
    max-width: 50%;
}

/*CK Editor styles*/
body {
    --ck-color-base-foreground: var(--white);
    --ck-color-base-background: var(--white);
    --ck-color-base-border: var(--grey-light);
    --ck-color-base-action: var(--green);
    --ck-color-base-focus: var(--primary);
    --ck-color-base-text: var(--text);
    --ck-color-base-active: var(--primary);
    --ck-color-base-active-focus: var(--primary);
    --ck-color-base-error: var(--red);

    /* -- Generic colors ------------------------------------------------------------------------ */

    --ck-color-focus-outer-shadow: var(--primary-opacity);
    --ck-color-focus-disabled-shadow: var(--primary-light-opacity);
    --ck-color-focus-error-shadow: var(--red-opacity);
    --ck-color-text: var(--ck-color-base-text);
    --ck-color-shadow-drop: var(--grey-light-opacity);
    --ck-color-shadow-drop-active: var(--grey-dark-opacity);
    --ck-color-shadow-inner: var(--grey-light-opacity);

    /* -- Buttons ------------------------------------------------------------------------------- */

    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: var(--background);
    --ck-color-button-default-active-background: var(--background);
    --ck-color-button-default-active-shadow: var(--background);
    --ck-color-button-default-disabled-background: transparent;

    --ck-color-button-on-background: var(--background);
    --ck-color-button-on-hover-background: var(--background);
    --ck-color-button-on-active-background: var(--background);
    --ck-color-button-on-active-shadow: var(--background);
    --ck-color-button-on-disabled-background: var(--background);

    --ck-color-button-action-background: var(--ck-color-base-action);
    --ck-color-button-action-hover-background: var(--green);
    --ck-color-button-action-active-background: var(--green);
    --ck-color-button-action-active-shadow: var(--green);
    --ck-color-button-action-disabled-background: var(--green);
    --ck-color-button-action-text: var(--ck-color-base-background);

    --ck-color-button-save: var(--green);
    --ck-color-button-cancel: var(--red);

    --ck-color-switch-button-off-background: var(--grey-light);
    --ck-color-switch-button-off-hover-background: var(--grey-light);
    --ck-color-switch-button-on-background: var(--ck-color-button-action-background);
    --ck-color-switch-button-on-hover-background: var(--green);
    --ck-color-switch-button-inner-background: var(--ck-color-base-background);
    --ck-color-switch-button-inner-shadow: var(--grey-dark);

    /* -- Dropdown ------------------------------------------------------------------------------ */

    --ck-color-dropdown-panel-background: var(--ck-color-base-background);
    --ck-color-dropdown-panel-border: var(--ck-color-base-border);

    /* -- Input --------------------------------------------------------------------------------- */

    --ck-color-input-background: var(--ck-color-base-background);
    --ck-color-input-border: var(--grey-light);
    --ck-color-input-error-border: var(--ck-color-base-error);
    --ck-color-input-text: var(--ck-color-base-text);
    --ck-color-input-disabled-background: var(--white);
    --ck-color-input-disabled-border: var(--grey-light);
    --ck-color-input-disabled-text: var(--grey-dark);

    /* -- List ---------------------------------------------------------------------------------- */

    --ck-color-list-background: var(--ck-color-base-background);
    --ck-color-list-button-hover-background: var(--ck-color-button-default-hover-background);
    --ck-color-list-button-on-background: var(--ck-color-base-active);
    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
    --ck-color-list-button-on-text: var(--ck-color-base-background);

    /* -- Panel --------------------------------------------------------------------------------- */

    --ck-color-panel-background: var(--ck-color-base-background);
    --ck-color-panel-border: var(--ck-color-base-border);

    /* -- Toolbar ------------------------------------------------------------------------------- */

    --ck-color-toolbar-background: var(--skeleton-highlight);
    --ck-color-toolbar-border: var(--ck-color-base-border);

    /* -- Tooltip ------------------------------------------------------------------------------- */

    --ck-color-tooltip-background: var(--ck-color-base-text);
    --ck-color-tooltip-text: var(--ck-color-base-background);

    /* -- Mention ------------------------------------------------------------------------------- */

    --ck-color-mention-background: transparent;
    --ck-color-mention-text: var(--ck-color-base-text);

    /* -- Other --------------------------------------------------------------------------------- */

    --ck-color-labeled-field-label-background: var(--ck-color-base-background);
    --ck-color-split-button-hover-background: var(--white);
}

.ck-content p {
    margin-bottom: revert;
}

.dropdown-button {
    background-color: rgba(116, 60, 205, 0.4);
}

.dropdown-button-hover {
    background-color: rgba(116, 60, 205, 0.2) !important;
    cursor: pointer;
}

.dropdown-button-label {
    font-weight: bold;
    width: auto !important;
}

.ck-content .mention.invalid-tag {
    --ck-color-mention-text: red !important; /* Override only for invalid mentions */
}