.document-editor {
    --csstools-color-scheme--light:initial;
    color-scheme:light dark;

    --viewer-container-height:0;
    --pdfViewer-padding-bottom:0;
    --page-margin:1px auto -8px;
    --page-border:9px solid transparent;
    --spreadHorizontalWrapped-margin-LR:-3.5px;
    --loading-icon-delay:400ms;
    --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) #0df;
    --focus-ring-color:var(--csstools-light-dark-toggle--93, #0060df);
    --focus-ring-outline:2px solid var(--focus-ring-color);

    --dir-factor: 1;
    --inline-start: left;
    --inline-end: right;
    --sidebar-width: 200px;
    --sidebar-transition-duration: 200ms;
    --sidebar-transition-timing-function: ease;
    --toolbar-height: 32px;
    --toolbar-horizontal-padding: 1px;
    --toolbar-vertical-padding: 2px;
    --icon-size: 16px;
    --toolbar-icon-opacity: 0.7;
    --doorhanger-icon-opacity: 0.9;
    --doorhanger-height: 8px;
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) rgb(249 249 250);
    --main-color: var(--csstools-light-dark-toggle--0, rgb(12 12 13));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(42 42 46);
    --body-bg-color: var(--csstools-light-dark-toggle--1, rgb(212 212 215));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) rgb(0 96 223);
    --progressBar-color: var(--csstools-light-dark-toggle--2, rgb(10 132 255));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) rgb(40 40 43);
    --progressBar-bg-color: var(--csstools-light-dark-toggle--3, rgb(221 221 222));
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) rgb(20 68 133);
    --progressBar-blend-color: var(--csstools-light-dark-toggle--4, rgb(116 177 239));
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) rgb(121 121 123);
    --scrollbar-color: var(--csstools-light-dark-toggle--5, auto);
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgb(35 35 39);
    --scrollbar-bg-color: var(--csstools-light-dark-toggle--6, auto);
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) rgb(255 255 255);
    --toolbar-icon-bg-color: var(--csstools-light-dark-toggle--7, rgb(0 0 0));
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) rgb(255 255 255);
    --toolbar-icon-hover-bg-color: var(--csstools-light-dark-toggle--8, rgb(0 0 0));
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) rgb(42 42 46 / 0.9);
    --sidebar-narrow-bg-color: var(--csstools-light-dark-toggle--9, rgb(212 212 215 / 0.9));
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) rgb(50 50 52);
    --sidebar-toolbar-bg-color: var(--csstools-light-dark-toggle--10, rgb(245 246 247));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) rgb(56 56 61);
    --toolbar-bg-color: var(--csstools-light-dark-toggle--11, rgb(249 249 250));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) rgb(12 12 13);
    --toolbar-border-color: var(--csstools-light-dark-toggle--12, rgb(184 184 184));
    --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
    --toolbar-border-bottom: none;
    --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
    --toolbarSidebar-border-bottom: none;
    --button-hover-color: color-mix(in srgb, currentColor 17%, transparent);
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) rgb(255 255 255);
    --toggled-btn-color: var(--csstools-light-dark-toggle--13, rgb(0 0 0));
    --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
    --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
    --toggled-hover-btn-outline: none;
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) rgb(74 74 79);
    --dropdown-btn-bg-color: var(--csstools-light-dark-toggle--14, rgb(215 215 219));
    --dropdown-btn-border: none;
    --separator-color: rgb(0 0 0 / 0.3);
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) rgb(250 250 250);
    --field-color: var(--csstools-light-dark-toggle--15, rgb(6 6 6));
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) rgb(64 64 68);
    --field-bg-color: var(--csstools-light-dark-toggle--16, rgb(255 255 255));
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) rgb(115 115 115);
    --field-border-color: var(--csstools-light-dark-toggle--17, rgb(187 187 188));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8);
    --treeitem-color: var(--csstools-light-dark-toggle--18, rgb(0 0 0 / 0.8));
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15);
    --treeitem-bg-color: var(--csstools-light-dark-toggle--19, rgb(0 0 0 / 0.15));
    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9);
    --treeitem-hover-color: var(--csstools-light-dark-toggle--20, rgb(0 0 0 / 0.9));
    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9);
    --treeitem-selected-color: var(--csstools-light-dark-toggle--21, rgb(0 0 0 / 0.9));
    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25);
    --treeitem-selected-bg-color: var(--csstools-light-dark-toggle--22, rgb(0 0 0 / 0.25));
    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.1);
    --thumbnail-hover-color: var(--csstools-light-dark-toggle--23, rgb(0 0 0 / 0.1));
    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.2);
    --thumbnail-selected-color: var(--csstools-light-dark-toggle--24, rgb(0 0 0 / 0.2));
    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) #42414d;
    --doorhanger-bg-color: var(--csstools-light-dark-toggle--25, rgb(255 255 255));
    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) rgb(39 39 43);
    --doorhanger-border-color: var(--csstools-light-dark-toggle--26, rgb(12 12 13 / 0.2));
    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) rgb(249 249 250);
    --doorhanger-hover-color: var(--csstools-light-dark-toggle--27, rgb(12 12 13));
    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) rgb(92 92 97);
    --doorhanger-separator-color: var(--csstools-light-dark-toggle--28, rgb(222 222 222));
    --dialog-button-border: none;
    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) rgb(92 92 97);
    --dialog-button-bg-color: var(--csstools-light-dark-toggle--29, rgb(12 12 13 / 0.1));
    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) rgb(115 115 115);
    --dialog-button-hover-bg-color: var(--csstools-light-dark-toggle--30, rgb(12 12 13 / 0.3));
    --loading-icon: url(images/loading.svg);
    --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
    --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
    --toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg);
    --toolbarButton-editorHighlight-icon: url(images/toolbarButton-editorHighlight.svg);
    --toolbarButton-editorInk-icon: url(images/toolbarButton-editorInk.svg);
    --toolbarButton-editorStamp-icon: url(images/toolbarButton-editorStamp.svg);
    --toolbarButton-editorSignature-icon: url(images/toolbarButton-editorSignature.svg);
    --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
    --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
    --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg);
    --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg);
    --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg);
    --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg);
    --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg);
    --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg);
    --toolbarButton-print-icon: url(images/toolbarButton-print.svg);
    --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg);
    --toolbarButton-download-icon: url(images/toolbarButton-download.svg);
    --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg);
    --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg);
    --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg);
    --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg);
    --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg);
    --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg);
    --toolbarButton-search-icon: url(images/toolbarButton-search.svg);
    --findbarButton-previous-icon: url(images/findbarButton-previous.svg);
    --findbarButton-next-icon: url(images/findbarButton-next.svg);
    --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg);
    --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg);
    --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg);
    --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg);
    --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg);
    --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg);
    --secondaryToolbarButton-scrollPage-icon: url(images/secondaryToolbarButton-scrollPage.svg);
    --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg);
    --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg);
    --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg);
    --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
    --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
    --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
    --secondaryToolbarButton-imageAltTextSettings-icon: var(--toolbarButton-editorStamp-icon);
    --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
    --editorParams-stampAddImage-icon: url(images/toolbarButton-zoomIn.svg);
}

@media (prefers-color-scheme: dark){
    .document-editor {
        --csstools-color-scheme--light:;
    }
}

@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) {
    .document-editor {
        --scrollbar-color: light-dark(auto, rgb(121 121 123));
        --scrollbar-bg-color: light-dark(auto, rgb(35 35 39));
        --toolbar-icon-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255));
        --toolbar-icon-hover-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255));
        --toolbar-bg-color: light-dark(rgb(249 249 250), rgb(56 56 61));
        --toolbar-border-color: light-dark(rgb(184 184 184), rgb(12 12 13));
    }
}


@media screen and (forced-colors: active){
    .document-editor {
        --pdfViewer-padding-bottom:9px;
        --page-margin:8px auto -1px;
        --page-border:1px solid CanvasText;
        --spreadHorizontalWrapped-margin-LR:3.5px;
        --focus-ring-color:CanvasText;
    }
}

.document-editor {
    padding: 10px;
    width: 100%;
    position: relative;
    display: inline-block;
    overflow: auto;
    background-color: rgb(42, 42, 46);
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
}

.document-editor-main-container
{
    position: absolute;
    inset: 0;
    min-width: 350px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.document-editor-toolbar {
    z-index: 2;
}

.document-editor-toolbar-container {
    --menuitem-height: calc(var(--toolbar-height) - 6px);

    width: 100%;
    font: message-box;
    position: relative;
    box-sizing: border-box;
    height: var(--toolbar-height);
    padding: var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding);
    background-color: var(--toolbar-bg-color);
    box-shadow: var(--toolbar-box-shadow);
    border-bottom: var(--toolbar-border-bottom);
}

.document-editor-toolbar-container .document-editor-toolbar-viewer {
    width:100%;
    height:100%;
    justify-content:space-between;
}

:is(.document-editor-toolbar-containerr .document-editor-toolbar-viewer)  > * {
    flex:none;
}

:is(.document-editor-toolbar-container .document-editor-toolbar-viewer) input {
    font:message-box;
}

:is(.document-editor-toolbar-container .document-editor-toolbar-viewer) .document-editor-toolbar-button-spacer {
    width:30px;
    display:block;
    height:1px;
}

:is(.document-editor-toolbar-container .document-editor-toolbar-viewer) .document-editor-toolbar-viewer-left #numPages.toolbarLabel {
    padding-inline-start:3px;
    flex:none;
}

.document-editor-toolbar-horizontal-group {
    height:100%;
    display:inline flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:1px;
    box-sizing:border-box;
}

.document-editor-viewer-container {
    overflow: auto;
    position: absolute;
    inset: var(--toolbar-height) 0 0;
    outline: none;
    z-index: 0;
}

.document-editor-viewer {
    --scale-factor: 1;
    --page-bg-color: unset;
    padding-bottom: var(--pdfViewer-padding-bottom);
    --hcm-highlight-filter: none;
    --hcm-highlight-selected-filter: none;
}

.document-editor-page {
    position: relative;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    overflow: hidden;
    border: var(--page-border);
    background-clip: padding-box;
    background-color: var(--page-bg-color, rgb(255 255 255));
}

.document-editor-page pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.document-editor button, .document-editor .button {
    margin: auto;
}

.document-editor-toolbar-button:hover, .document-editor-toolbar-button:focus {
    background-color: initial;
}

.document-editor-toolbar-button,
.document-editor-toolbar-button:is([disabled="disabled"], [disabled]) {
    height:100%;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    color:var(--main-color);
    outline:none;
    border-radius:2px;
    box-sizing:border-box;
    font:message-box;
    flex:none;
    position:relative;
    padding:0;
}

.document-editor-toolbar-button > span {
    display:inline-block;
    width:0;
    height:0;
    overflow:hidden;
}

.document-editor-toolbar-button::before {
    opacity:var(--toolbar-icon-opacity);
    display:inline-block;
    width:var(--icon-size);
    height:var(--icon-size);
    content:"";
    background-color:var(--toolbar-icon-bg-color);
    -webkit-mask-size:cover;
            mask-size:cover;
    -webkit-mask-position:center;
            mask-position:center;
}

.document-editor-toolbar-button.toggled {
    background-color:var(--toggled-btn-bg-color);
    color:var(--toggled-btn-color);
}

.document-editor-toolbar-button.toggled::before {
    background-color:var(--toggled-btn-color);
}

.document-editor-toolbar-button.toggled:hover {
    outline:var(--toggled-hover-btn-outline) !important;
}

.document-editor-toolbar-button.toggled:hover:active {
    background-color:var(--toggled-hover-active-btn-color);
}

.document-editor-toolbar-button:is(:hover, :focus-visible) {
    background-color:var(--button-hover-color);
}

.document-editor-toolbar-button:is(:hover, :focus-visible)::before {
    background-color:var(--toolbar-icon-hover-bg-color);
}

.document-editor-toolbar-button:is([disabled="disabled"], [disabled]) {
    opacity:0.5;
    pointer-events:none;
}

.document-editor-toolbar-button.labeled {
    width:100%;
    min-height:var(--menuitem-height);
    justify-content:flex-start;
    gap:8px;
    padding-inline-start:12px;
    aspect-ratio:unset;
    text-align:start;
    white-space:normal;
    cursor:default;
}

.document-editor-toolbar-button.labeled:is(a) {
    text-decoration:none;
}

.document-editor-toolbar-button.labeled[href="#"]:is(a) {
    opacity:0.5;
    pointer-events:none;
}

.document-editor-toolbar-button.labeled::before {
    opacity:var(--doorhanger-icon-opacity);
}

.document-editor-toolbar-button.labeled:is(:hover, :focus-visible) {
    color:var(--doorhanger-hover-color);
}

.document-editor-toolbar-button.labeled > span {
    display:inline-block;
    width:-moz-max-content;
    width:max-content;
    height:auto;
}

.document-editor-toolbar-button-add-text::before {
    -webkit-mask-image: url(../img/document-editor/text-regular.svg);
    mask-image: url(../img/document-editor/text-regular.svg);
}

.document-editor-toolbar-button-add-header::before {
    -webkit-mask-image: url(../img/document-editor/heading-solid-full.svg);
    mask-image: url(../img/document-editor/heading-solid-full.svg);
}

.document-editor-toolbar-button-add-nested-list::before {
    -webkit-mask-image: url(../img/document-editor/list-ul-solid-full.svg);
    mask-image: url(../img/document-editor/list-ul-solid-full.svg);
}

.document-editor-toolbar-button-add-checklist::before {
    -webkit-mask-image: url(../img/document-editor/square-check-regular-full.svg);
    mask-image: url(../img/document-editor/square-check-regular-full.svg);
}

.document-editor-toolbar-button-add-code::before {
    -webkit-mask-image: url(../img/document-editor/code-solid-full.svg);
    mask-image: url(../img/document-editor/code-solid-full.svg);
}

.document-editor-toolbar-button-add-table::before {
    -webkit-mask-image: url(../img/document-editor/table-solid-full.svg);
    mask-image: url(../img/document-editor/table-solid-full.svg);
}

.document-editor-toolbar-button-save::before {
    -webkit-mask-image: url(../img/document-editor/floppy-disk-regular-full.svg);
    mask-image: url(../img/document-editor/floppy-disk-regular-full.svg);
}

@keyframes not-saved-animation {
    from {background-color: light-dark(rgb(159, 48, 57), rgb(254, 55, 55));}
    to {background-color: var(--toolbar-icon-bg-color);}
}

.document-editor-toolbar-button-save.not-saved::before {
    background-color: light-dark(rgb(159, 48, 57), rgb(254, 55, 55));
    animation-name: not-saved-animation;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: alternate-reverse;
    animation-timing-function: ease;
}

.document-editor-toolbar-button-save.saved::before {
    background-color: light-dark(rgb(48, 149, 110), rgb(83, 255, 188));
}

.document-editor-toolbar-field,
.document-editor-toolbar-field:is([disabled="disabled"], [disabled]) {
    padding:4px 7px;
    margin:3px 0;
    border-radius:2px;
    background-color:var(--field-bg-color);
    background-clip:padding-box;
    border:1px solid var(--field-border-color);
    box-shadow:none;
    color:var(--field-color);
    font-size:12px;
    line-height:16px;
    outline:none;
}

.document-editor-toolbar-field:is([disabled="disabled"], [disabled]) {
    opacity:0.5;
    pointer-events:none;
}

.document-editor-toolbar-field:focus {
    background-color:var(--field-bg-color);
    border-color:#0a84ff;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Fixes */
.ce-popover__container {
    margin-bottom: 60px;
}

.cdx-search-field__input, .ce-inline-tool-input {
    color:#000000;
}

.ce-block__content,
.cdx-checklist__item,
.cdx-nested-list__item {
    border-bottom: solid 1px #eeeeee;
}