/* Colors and fonts */

:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);

    /*color-scheme: light dark;*/
    --background-color: #ffffff;
    --text-color: #121212;
    --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --background-color-menubar: transparent;
    --text-color-menubar: #666666;
    --border-top-color-menubar: #transparent;
    --border-bottom-color-menubar: #ECECEC;
    --border-top-width-menubar: 0;
    --border-bottom-width-menubar: 1px;

    --background-color-dropdown: #ffffff;
    --text-color-dropdown: #666666;
    --border-color-dropdown: #dedede;

    --background-color-dropdown-item-hover: #f2f2f2;

    /* SVG icon colors */
    --fill-color-menu-icon: #666666;
    --fill-color-menu-icon-active: #000000;
    --background-color-menu-icon-active: #EAEAEA;

    --link-color: #33aaff;
    --background-color-pre: #ebebeb;
    --border-color-pre: 1px solid #dcdcdc;
    --background-color-mark: #fae59b;
    --border-color-mark: #fae59b;
    --border-color-hr: #dcdcdc;
    --border-color-blockquote: #333333;
}

@media (prefers-color-scheme: dark) {
    :root {
        /*--background-color: #1f1f1f;*/
        /*--background-color: rgb(14 14 14);*/
        --background-color: rgb(30, 30, 32);
        /*--background-color: rgb(19, 20, 23);*/
        /*--text-color: #e8e8e8;*/
        --text-color: rgb(251, 251,251);
        /*--text-color: rgb(237, 237, 237);*/

        /*--background-color-menubar: #282828;*/
        --background-color-menubar: rgb(40, 40, 42);
        --text-color-menubar: #e8e8e8;
        --border-top-color-menubar: #242424;
        --border-bottom-color-menubar: #242424;
        --border-top-width-menubar: 1px;
        --border-bottom-width-menubar: 2px;

        --background-color-dropdown: #303030;
        --text-color-dropdown: #efefef;
        --border-color-dropdown: #393939;

        --background-color-dropdown-item-hover: #353535;

        /*SVG icon colors */
        --fill-color-menu-icon: #e8e8e8;
        /*--fill-color-menu-icon-active: #f77981;*/
        /*--fill-color-menu-icon-active: #8a83ee;*/
        --fill-color-menu-icon-active: rgb(124 80 194);
        --background-color-menu-icon-active: transparent;

        --link-color: rgb(106 160 225);
        --background-color-pre: #292929;
        --border-color-pre: #313131;
        --background-color-code: rgb(71, 71, 73);
        --background-color-mark: #7a3900;
        --border-color-mark: #7a3900;
        --border-color-hr: #292929;
        --border-color-blockquote: #e8e8e8;
    }
}



/* Orientation specific styles and responsive design settings */

/*@media (orientation: portrait) {*/
/*    :root {*/
/*        padding-top: env(safe-area-inset-top);*/
/*        padding-bottom: env(safe-area-inset-bottom);*/
/*        @supports (-webkit-touch-callout: none) {*/
/*            padding-top: 40px;*/
/*        }*/
/*    }*/
/*}*/

/*@media (orientation: landscape) {*/
/*    :root {*/
/*        padding-top: 0;*/
/*        padding-left: env(safe-area-inset-left);*/
/*        padding-right: env(safe-area-inset-right);*/
/*    }*/
/*}*/


/* General styles and editor layout and menubar */

/*html,*/
/*body {*/
/*    width: 100%;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    background-color: var(--background-color);*/
/*}*/

/*html {*/
/*    height: 100%;*/
/*}*/

/*body {*/
/*    min-height: calc(100dvh - 40px);*/
/*    box-sizing: border-box;*/
/*}*/

.ProseMirror,
.ProseMirror-menubar-wrapper {
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-family-sans-serif), sans-serif;
    /*touch-action: manipulation;*/
}

.ProseMirror-menubar-wrapper {
    background-color: var(--background-color);
    font-size: 16px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ProseMirror {
    background-color: var(--background-color);
    font-size: 16px;
    word-wrap: break-word;
    outline: 0 solid transparent;
    /*position: relative;*/
    /*padding: 0 10px 10px 10px;*/
    line-height: 1.45;
    flex: 2;
    overflow-x: scroll;
    padding: 2rem 3.5rem 0.5rem 3.5rem;
    margin-top: 0.5rem;
}

/*.ProseMirror {*/
/*    -ms-overflow-style: none;*/
/*    scrollbar-width: none;*/
/*}*/

/*.ProseMirror::-webkit-scrollbar {*/
/*    display: none;*/
/*}*/

.fullscreen .ProseMirror {
    padding: 0 2.5rem 1rem 2.5rem;
}


/* base html elements styling */

div, nav, header, main, footer, p {
    box-sizing: border-box;
}

.ProseMirror :first-child {
    padding-top: 0;
    margin-top: 0;
}

.ProseMirror pre {
    white-space: pre-wrap;
    border: 1px solid var(--border-color-pre);
    background-color: var(--background-color-pre);
    padding: 1em;
    max-width: 600px;
    border-radius: 5px;
    margin-bottom: 1.5em;
    margin-top: 1em;
}

.ProseMirror code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    background-color: var(--background-color-code);
    border-radius: 3px;
    padding: 0 2px 0 2px;
}

.ProseMirror mark {
    background-color: var(--background-color-mark);
    color: var(--text-color);
    border-left: 2px solid var(--border-color-mark);
    border-right: 2px solid var(--border-color-mark);
    border-radius: 3px;
}

/* Add space around the hr to make clicking it easier */
.ProseMirror hr {
    margin: 1rem 0 1.5rem 0;
    border: 1px solid var(--border-color-hr);
    height: 0;
}

.ProseMirror a {
    color: var(--link-color);
}

.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6,
.ProseMirror ul,
.ProseMirror ul li,
.ProseMirror ol,
.ProseMirror ol li {
    padding: 0;
    margin: 0;
}

.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
    padding-top: 1.8rem;
    padding-bottom: 1.5rem;
    font-weight: 500;
}

.ProseMirror h1 {
    font-size: 2.25rem;
}

.ProseMirror h2 {
    font-size: 2rem;
}

.ProseMirror h3 {
    font-size: 1.75rem;
}

.ProseMirror h4 {
    font-size: 1.5rem;
}

.ProseMirror h5 {
    font-size: 1.25rem;
}

.ProseMirror h6 {
    font-size: 1rem;
}

.ProseMirror p,
.ProseMirror figure {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 1.5rem;
    padding: 0 0 1rem 0;
    max-width: 100%;
}

.ProseMirror figure {
    margin-left: 0;
    margin-right: 1.5rem;
}

.ProseMirror p:empty,
.ProseMirror figure:empty {
    padding-bottom: 0;
}

.ProseMirror ul,
.ProseMirror ol {
    list-style-position: outside;
    padding-bottom: 1.5rem;
    overflow: hidden;
    max-width: 100%;
}

.ProseMirror ul li,
.ProseMirror ol li {
    margin-bottom: 0.5rem;
    max-width: 100%;
}

.ProseMirror ul li,
.ProseMirror ol li {
    margin-left: 1rem;
}

.ProseMirror ul li li,
.ProseMirror ol li li {
    margin-left: 1.2rem;
}

.ProseMirror ul[style*="text-align: right"],
.ProseMirror ol[style*="text-align: right"] {
    display: grid;
    justify-items: end;
    width: max-content;
    margin-left: auto;
    padding-left: 2rem;
    max-width: 50%;
}

.ProseMirror ul[style*="text-align: right"] li,
.ProseMirror ol[style*="text-align: right"] li {
    width: 100%;
    padding-left: 0;
    text-align: left;
}

.ProseMirror ul[style*="text-align: center"],
.ProseMirror ol[style*="text-align: center"] {
    display: grid;
    justify-items: center;
    width: max-content;
    padding-left: 2rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
}

.ProseMirror ul[style*="text-align: center"] li,
.ProseMirror ol[style*="text-align: center"] li {
    width: 100%;
    padding-left: 0;
    text-align: left;
}

html[dir=rtl] .ProseMirror ul[style*="text-align: right"] li,
html[dir=rtl] .ProseMirror ol[style*="text-align: right"] li,
html[dir=rtl] .ProseMirror ul[style*="text-align: center"] li,
html[dir=rtl] .ProseMirror ol[style*="text-align: center"] li {
    text-align: right;
}




.ProseMirror blockquote {
    margin: 1rem 0 1rem 0;
    padding: 0 0 0 1rem;
    border-left: 3px solid var(--border-color-blockquote);
    max-width: 600px;
}

.ProseMirror blockquote:has(p[style*="text-align:right"]),
.ProseMirror blockquote:has(p[style*="text-align: right"]) {
    padding: 0 1rem 0 0;
    border-left: none;
    border-right: 3px solid var(--border-color-blockquote);
}

.ProseMirror blockquote > :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.ProseMirror sup,
.ProseMirror sub {
    font-size: calc(0.5rem + 4px);
    vertical-align: baseline;
    position: relative;
    /* Simplified top: calc(-0.83rem + 3.32px) */
    top: calc(-0.5 * 0.83 * 2 * (1rem - 4px));
}

.ProseMirror sub {
    /* Simplified top: calc(0.42rem - 1.66px) */
    top: calc(0.25 * 0.83 * 2 * (1rem - 4px));
}

.ProseMirror br,
.ProseMirror hr,
.ProseMirror blockquote,
.ProseMirror pre,
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6,
.ProseMirror ul,
.ProseMirror ol,
.ProseMirror table {
    clear: both;
}

.ProseMirror img {
    cursor: default;
    max-width: 100%;
}

.ProseMirror a img,
.ProseMirror a figure {
    cursor: pointer;
}

.ProseMirror .img25Float,
.ProseMirror .img50Float,
.ProseMirror .img75Float {
    float: left;
    margin: 0 1.5rem 0.5rem 0;
}

.ProseMirror .img25,
.ProseMirror .img50,
.ProseMirror .img75 {
    display: inline-block;
    margin: 0 1.5rem 0.5rem 0;
}

.ProseMirror .img25,
.ProseMirror .img25Float{
    width: 25%;
}

.ProseMirror .img50,
.ProseMirror .img50Float{
    width: 50%;
}

.ProseMirror .img75,
.ProseMirror .img75Float {
    width: 75%;
}

.ProseMirror p:has(> .img25Float),
.ProseMirror figure:has(> .img25Float){
    padding: 0;
    margin: 0;
}

.ProseMirror p:has(> .img50Float),
.ProseMirror figure:has(> .img50Float){
    padding: 0;
    margin: 0;
}

.ProseMirror p:has(> .img75Float),
.ProseMirror figure:has(> .img75Float){
    padding: 0;
    margin: 0;
}

.ProseMirror p[style*="text-align:right"] .img25Float,
.ProseMirror p[style*="text-align: right"] .img25Float,
.ProseMirror p[style*="text-align:right"] .img50Float,
.ProseMirror p[style*="text-align: right"] .img50Float,
.ProseMirror p[style*="text-align:right"] .img75Float,
.ProseMirror p[style*="text-align: right"] .img75Float,
.ProseMirror figure[style*="text-align:right"] .img25Float,
.ProseMirror figure[style*="text-align: right"] .img25Float,
.ProseMirror figure[style*="text-align:right"] .img50Float,
.ProseMirror figure[style*="text-align: right"] .img50Float,
.ProseMirror figure[style*="text-align:right"] .img75Float,
.ProseMirror figure[style*="text-align: right"] .img75Float{
    float: right;
    margin: 0 0 0.5rem 1.3rem;
}

.ProseMirror figure figcaption,
.ProseMirror figure a figcaption {
    display: block;
    clear: left;
    text-align: left;
    font-size: 0.875rem;
    opacity: 0.6;
    padding: 0.1rem 0.1rem 0 0.1rem;
    color: var(--text-color);
}


.ProseMirror a[download]:has(img) {
    display: inline-block;
    overflow: hidden;
}

.ProseMirror a[download] img.thumbnail {
    display: block;
    width: 100%;
    border: 1px solid grey;
}

.ProseMirror a[download] div.img25,
.ProseMirror a[download] div.img25Float,
.ProseMirror a[download] div.img50,
.ProseMirror a[download] div.img50Float,
.ProseMirror a[download] div.img75,
.ProseMirror a[download] div.img75Float {
    width: auto;
}

.ProseMirror a[download] img.thumbnail.img75,
.ProseMirror a[download] img.thumbnail.img75Float {
    zoom: 0.75;
    width: 100%;
}

.ProseMirror a[download] img.thumbnail.img50,
.ProseMirror a[download] img.thumbnail.img50Float,
.ProseMirror a[download] .img50 img.thumbnail,
.ProseMirror a[download] .img50Float img.thumbnail {
    zoom: 0.5;
    width: 100%;
}

.ProseMirror a[download] img.thumbnail.img25,
.ProseMirror a[download] img.thumbnail.img25Float {
    zoom: 0.25;
    width: 100%;
}



.ProseMirror ul li :last-child,
.ProseMirror ol li :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.ProseMirror ul li:last-of-type,
.ProseMirror ol li:last-of-type {
    margin-bottom: 0;
}

.ProseMirror h1 + *,
.ProseMirror h2 + *,
.ProseMirror h3 + *,
.ProseMirror h4 + *,
.ProseMirror h5 + *,
.ProseMirror h6 + * {
    padding-top: 0;
    margin-top: 0;
}

.ProseMirror pre + *,
.ProseMirror hr + * {
    padding-top: 0;
    margin-top: 0;
}

.ProseMirror h1 + pre,
.ProseMirror h2 + pre,
.ProseMirror h3 + pre,
.ProseMirror h4 + pre,
.ProseMirror h5 + pre,
.ProseMirror h6 + pre {
    padding-top: 1rem;
}


/** ProseMirror menu **/

.ProseMirror-menubar {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    line-height: 1;
    padding: 0.7rem 0.2rem 0.6rem 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1rem;
    color: var(--text-color-menubar);
    background-color: var(--background-color-menubar);
    border-top: var(--border-top-width-menubar) solid var(--border-top-color-menubar);
    border-bottom: var(--border-bottom-width-menubar) solid var(--border-bottom-color-menubar);
    z-index: 10;
    box-sizing: border-box;
    font-family: var(--font-family-sans-serif), sans-serif;
    position: sticky;
    scrollbar-width: none;
    white-space: nowrap;
    touch-action: manipulation;
    width: 100%;
}

/*.ProseMirror-tooltip .ProseMirror-menubar {*/
/*    width: 100%;*/
/*    white-space: pre;*/
/*}*/

.ProseMirror-menuitem {
    margin-right: 3px;
    display: flex;
    align-self: stretch;
    align-items: center;
}

.ProseMirror-menuitem button,
.ProseMirror-menuitem div {
    appearance: none;
    background: none;
    outline: none;
    margin: 0;
    color: inherit;
    align-self: stretch;
    border: 1px solid transparent;
    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
    font-size: inherit;
}

.ProseMirror-menuitem button.ProseMirror-icon,
.ProseMirror-menuitem div.ProseMirror-icon {
    padding: 0.2rem;
}

.ProseMirror-menuitem button {
    cursor: pointer;
}

.ProseMirror-menuseparator {
    display: inline-block;
    width: 1rem;
}

.ProseMirror-menugroup {
    margin-left: 1rem;
}

.ProseMirror-menugroup:first-child {
    margin-left: 0;
}

.ProseMirror-menu-dropdown,
.ProseMirror-menu-dropdown-menu {
    font-size: 90%;
    white-space: nowrap;
}

.ProseMirror-menu-dropdown {
    vertical-align: 1px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ProseMirror-menu-dropdown-wrap {
    padding: 1px 0 1px 4px;
    display: inline-block;
}

.ProseMirror-menu-dropdown:after {
    content: "\21E3";
    color: #555555;
    padding-left: 3px;
    padding-right: 1px;
}

.ProseMirror-menu-dropdown-menu,
.ProseMirror-menu-submenu {
    position: absolute;
    background-color: var(--background-color-dropdown);
    color: var(--text-color-dropdown);
    border: 1px solid var(--border-color-dropdown);
    padding: 5px 0 5px 0;
    border-radius: 4px;
}

.ProseMirror-menu-dropdown-menu {
    z-index: 15;
    min-width: 6rem;
    margin-top: 10px;
}

.ProseMirror-menu-dropdown-item {
    cursor: pointer;
    padding: 5px 25px 5px 25px;
}

.ProseMirror-menu-dropdown-item:hover {
    background-color: var(--background-color-dropdown-item-hover);
}

.ProseMirror-menu-submenu-wrap {
    position: relative;
    margin-right: -4px;
}

.ProseMirror-menu-submenu-label:after {
    content: "";
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    opacity: .6;
    position: absolute;
    right: 4px;
    top: calc(50% - 4px);
}

.ProseMirror-menu-submenu {
    display: none;
    min-width: 4rem;
    left: 100%;
    top: -3px;
}

.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
    display: block;
}

.ProseMirror-menubar .ProseMirror-icon {
    display: inline-block;
    padding: 3px;
    cursor: pointer;
    /*font-size: 1.2em;*/
}

.ProseMirror-menu-dropdown-menu .ProseMirror-icon {
    padding: 0 4px 0 0;
    vertical-align: -4px;
}

.ProseMirror-menu-dropdown-wrap .ProseMirror-icon svg {
    margin-right: 2px;
    display: inline-block;
    shape-rendering: crispEdges;
}

.ProseMirror-menu-disabled.ProseMirror-icon {
    cursor: default;
}

.ProseMirror-menubar .ProseMirror-icon svg {
    fill: var(--fill-color-menu-icon);
    height: 1.3rem;
    width: 1.3rem;
    vertical-align: middle;
}

.ProseMirror-menubar .ProseMirror-menu-active svg {
    border-radius: 2px;
    background: var(--background-color-menu-icon-active);
    fill: var(--fill-color-menu-icon-active);
}

.ProseMirror-menuitem[disabled] .ProseMirror-icon svg,
.ProseMirror-menu-disabled {
    opacity: .3;
}

.ProseMirror-menubar .ProseMirror-icon span {
    vertical-align: text-top;
}

.ProseMirror-menubar .ProseMirror-label {
    display: inline-block;
    cursor: pointer;
}

.pm-dialog:modal {
    position: absolute;
    outline: none;
    appearance: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: var(--font-family-sans-serif), sans-serif;
    overflow: visible;
}

.pm-dialog .pm-menu-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1.5rem;
}

.pm-dialog .pm-menu-row:first-child {
    margin-top: 0;
}

.pm-dialog .pm-menu-row-end {
    flex-basis: 100%;
    height: 0;
}

.pm-dialog .spacer {
    margin-right: 1.5rem;
}

.pm-dialog .btn-spacer {
    margin-right: 0.3rem;
}

.pm-dialog input {
    margin-top: 0;
    margin-bottom: 0;
    border: 1px solid #333;
    background-color: var(--background-color);
}

.pm-dialog input[type="text"] {
    outline: none;
    color: var(--text-color);
    cursor: text;
    caret-color: var(--text-color);
    padding: 0.5em;
    appearance: none;
    accent-color: var(--background-color);
    flex: 1;
    min-width: 0;
}

.pm-dialog input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pm-dialog input:focus,
.pm-dialog input:active,
.pm-dialog input:autofill,
.pm-dialog input:autofill:focus,
.pm-dialog input:autofill:hover,
.pm-dialog input:autofill:active,
.pm-dialog input:-webkit-autofill,
.pm-dialog input:-webkit-autofill:hover,
.pm-dialog input:-webkit-autofill:focus,
.pm-dialog input:-webkit-autofill:active {
    background-color: var(--background-color);
}

.pm-dialog input[disabled] {
    opacity: .5;
}

.pm-dialog .active {
    border-color: var(--fill-color-menu-icon-active);
}

.pm-dialog button {
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: var(--font-family-sans-serif), sans-serif;
    outline: none;
    appearance: none;
    border: 1px solid #333;
    opacity: 0.75;
    padding: 0.5em;
}

.pm-dialog button:hover {
    cursor: pointer;
    opacity: 1;
}

.pm-dialog .pm-tab-bar {
    position: absolute;
    top: 5px;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    background-color: rgb(34, 34, 36);
    border: 1px solid #333;
    border-radius: 8px 0 0 8px;
    border-right: none;
    border-bottom: none;
    padding: 0.1rem 0 0.1rem 0;
}

.pm-dialog .pm-tab-btn {
    width: 100%;
    border-top: none;
    border-right: none;
    border-left: none;
    padding: 0.9rem 1.3rem 0.9rem 1.3rem;
    background-color: rgb(34, 34, 36);
}

.pm-dialog .pm-tab-btn.active {
    background-color: var(--background-color);
    color: var(--fill-color-menu-icon-active);
    border-color: #333;
}

.pm-dialog label {
    padding: 0;
    margin: 0 0 0 0.5rem;
    outline: none;
    appearance: none;
    color: var(--text-color);
    font-family: var(--font-family-sans-serif), sans-serif;
    font-size: 90%;
    display: inline-block;
    opacity: 0.8;
}

.pm-dialog label.hidden {
    position: absolute;
    top: -1000px;
}

.pm-dialog label.wrap {
    display: block;
    margin-bottom: 0.5rem;
}

.pm-dialog .pm-close-btn {
    position: absolute;
    z-index: 100;
    color: transparent;
    top: 10px;
    right: 10px;
    width: 23px;
    height: 23px;
    border: 2px solid #333;
    background-color: var(--background-color);
    border-radius: 50%;
}

.pm-dialog .pm-close-btn::before,
.pm-dialog .pm-close-btn::after {
    position: absolute;
    top: 8px;
    left: 3px;
    width: 13px;
    height: 3px;
    content: "";
    background-color: var(--fill-color-menu-icon-active);
    display: block;
    /*opacity: 0.9;*/
}

.pm-dialog .pm-close-btn::before {
    transform: rotate(-45deg);
}
.pm-dialog .pm-close-btn::after {
    transform: rotate(45deg);
}
.pm-dialog .pm-close-btn:hover {
    cursor: pointer;
}
.pm-dialog .pm-close-btn:hover::before,
.pm-dialog .pm-close-btn:hover::after {
    opacity: 1;
    background-color: #000000;
    filter: invert(100%);
}

.ProseMirror-menubar-wrapper .wcag-label,
.ProseMirror .wcag-label {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ProseMirror-menubar-wrapper .label,
.ProseMirror .label {
    font-size: 1rem;
    padding-left: 0.75rem;
}

.ProseMirror-menubar .ProseMirror-menu-active .label {
    color: var(--fill-color-menu-icon-active);
}

.ProseMirror-menubar:focus {
    border: none;
    outline: none;
}

.ProseMirror-menubar .ProseMirror-icon:focus,
.ProseMirror-menu-dropdown-wrap:focus div {
    /*background-color: #33aaff;*/
    /*border: none;*/
    /*outline: none;*/
}

.ProseMirror-menuitem button:focus,
    /*.ProseMirror-icon:focus svg,*/
.ProseMirror-menubar .ProseMirror-icon:focus div,
.ProseMirror-menu-dropdown-wrap:focus,
.ProseMirror-menu-dropdown-item:focus {
    /*border: none;*/
    outline: none;
    border: 1px dotted var(--fill-color-menu-icon-active);
}


/** gap cursor **/

.ProseMirror-gapcursor {
    display: none;
    pointer-events: none;
    position: absolute;
}

.ProseMirror-gapcursor:after {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    width: 20px;
    border-top: 1px solid black;
    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
    to {
        visibility: hidden;
    }
}

.ProseMirror-focused .ProseMirror-gapcursor {
    display: block;
}

.prosemirror-dropcursor-block,
.prosemirror-dropcursor-inline {
    background-color: #f77981;
}

.prosemirror-dropcursor-block {
    height: 3px !important;
}

.prosemirror-dropcursor-inline {
    width: 3px !important;
    height: 24px !important;
}


/* Utilities and more */

.ProseMirror-hideselection *::selection {
    background: transparent;
}

.ProseMirror-hideselection *::-moz-selection {
    background: transparent;
}

.ProseMirror-hideselection {
    caret-color: transparent;
}

/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
.ProseMirror [draggable][contenteditable=false] {
    user-select: text;
}

.ProseMirror-selectednode {
    outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
    outline: none;
}

li.ProseMirror-selectednode:after {
    content: "";
    position: absolute;
    left: -32px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    border: 2px solid #8cf;
    pointer-events: none;
}

img.ProseMirror-separator {
    display: inline !important;
    border: none !important;
    margin: 0 !important;
}