#root {
    border-radius: 10px;
    background-color: var(--color-white);
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    overflow: hidden;
    width: 100%;
    display: flex;

    @media screen and (max-width:768px) {
        min-height: calc(100vh - 100px);
        min-height: calc(100dvh - 100px);
        margin: 0px;
        border-radius: 0px;
    }
}
.editor-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.editor-shell .editor-container {
    flex: 1;
    display: flex !important;
    flex-direction: column;
}

.editor-scroller {
    flex: 1;
    display: flex;
}
.editor-placeholder {
    color: var(--placeholder-text);
}

[data-floating-ui-portal]:has(.dateTimePicker)>div {
    z-index: 99;
}

.ContentEditable__root {
    padding-right: 24px !important;
    padding-bottom: 24px !important;
}

.ContentEditable__root>p:first-child::before {
    content: '';
}

.ContentEditable__root>p,
.ContentEditable__root>h1,
.ContentEditable__root>h2,
.ContentEditable__root>h3,
.ContentEditable__root>h4,
.ContentEditable__root>h5,
.ContentEditable__root>h6 {
    position: relative;
}

.ContentEditable__root>p.is-active::before,
.ContentEditable__root>h1.is-active::before,
.ContentEditable__root>h2.is-active::before,
.ContentEditable__root>h3.is-active::before,
.ContentEditable__root>h4.is-active::before,
.ContentEditable__root>h5.is-active::before,
.ContentEditable__root>h6.is-active::before {
    content: var(--lexical-editor-placeholder-text);
    color: var(--placeholder-text);
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
    filter: none !important;
    z-index: 1;
}

.ContentEditable__root:has(.is-active)~div>.ContentEditable__placeholder {
    display: none;
}

/* Remove ::before if the element contains a <span> */
/* Remove ::before for the last element if it contains a <span> */
.ContentEditable__root>p.is-active:has(span, strong, em)::before,
.ContentEditable__root>h1.is-active:has(span, strong, em)::before,
.ContentEditable__root>h2.is-active:has(span, strong, em)::before,
.ContentEditable__root>h3.is-active:has(span, strong, em)::before,
.ContentEditable__root>h4.is-active:has(span, strong, em)::before,
.ContentEditable__root>h5.is-active:has(span, strong, em)::before,
.ContentEditable__root>h6.is-active:has(span, strong, em)::before {
    content: '';
}

:root.dark {
    .ContentEditable__root>p.is-active:has(span, strong, em),
    .ContentEditable__root>h1.is-active:has(span, strong, em),
    .ContentEditable__root>h2.is-active:has(span, strong, em),
    .ContentEditable__root>h3.is-active:has(span, strong, em),
    .ContentEditable__root>h4.is-active:has(span, strong, em),
    .ContentEditable__root>h5.is-active:has(span, strong, em),
    .ContentEditable__root>h6.is-active:has(span, strong, em) {
        filter: invert(1) !important;
    }
}