body.editor {
    height: 100%;
    font-family: Lato, sans-serif;
    font-size: 13px;
    width: 100%;
    overflow-x: hidden;
}

body.editor header {
    position: fixed;
    width: 100%;
    z-index: 91;
}

.user-contents figure {
    border: 1px solid var(--cs-white-border);
}

.user-contents .figure figure {
    width: 100%;
    margin: 0;
    padding: 0;
}

.ProseMirror figcaption.empty span.text,
.ProseMirror caption.empty span.text {
    display: inline-block;
}

.ProseMirror figcaption.empty::after,
.ProseMirror caption.empty::after {
    color: var(--cs-white-placeholder-text);
    content: attr(data-placeholder);
    cursor: text;
}

.ProseMirror span.placeholder::before {
    color: var(--cs-white-placeholder-text);
    content: attr(data-placeholder);
    cursor: text;
}

.ProseMirror-focused span.placeholder.selected {
    display: none;
}

.ProseMirror-focused
    .ProseMirror:not(.ProseMirror-focused)
    span.placeholder.selected {
    display: inline;
}

.user-contents a,
.user-contents a:hover {
    color: var(--cs-1-text);
}

.pagination-footnote-item {
    width: 100%;
}

.pagination-footnote-item-container {
    cursor: pointer;
}

.pagination-footnote-item-container::before {
    content: "\0000a0x";
    position: absolute;
    visibility: hidden;
    font-weight: bold;
}

.pagination-footnote-item-container:hover::before {
    visibility: visible;
}

.pagination-footnote-item-container > div {
    margin-left: 15px;
}

.doc-body,
.pagination-footnote > * > * {
    font-size: 12pt;
}

#document-top {
    padding: 16px 0;
    background-color: var(--cs-5-background);
    width: 100%;
    border-bottom: 1px solid var(--cs-5-border);
}

#document-top > h1 {
    font-size: 22px;
    color: var(--cs-5-text);
    font-style: italic;
    padding: 0 48px 0 110px;
    background: url("../static/img/fidus_face.avif") no-repeat 42px 0;
    background-size: 23px auto;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 1.45em;
}

#header-navigation {
    position: relative;
    margin: 20px 0 0 110px;
    user-select: none;
}

#header-navigation > div {
    position: relative;
    display: inline-block;
    margin-right: 18px;
    height: 18px;
    overflow: visible;
}

#header-navigation span {
    cursor: pointer;
}

#header-navigation .header-nav-item {
    line-height: 35px;
    color: var(--nagivation-link-text-color);
    letter-spacing: 1px;
}

.fw-pulldown-item.fw-cursor {
    border-left: 3px var(--menu-cursor-border-color) solid;
}

#header-navigation .header-nav-item:hover {
    color: var(--nagivation-link-active-text-color);
    text-shadow: 1px 0 0 var(--nagivation-link-active-text-color);
}

#header-navigation span.deactivated {
    text-decoration: line-through;
}

#header-navigation span.fw-disabled,
#toolbar span.fw-disabled {
    color: var(--cs-disabled) !important;
    text-shadow: none;
}

#header-navigation span.fw-selected.fw-disabled,
#toolbar span.fw-selected.fw-disabled {
    background-color: var(--cs-disabled-background);
    color: var(--cs-disabled) !important;
}

/*
 * Selection Menu style
 */
#selection-menu {
    margin-left: -23px;
    z-index: 1;
}

#selection-menu > div {
    width: 46px;
}

/*
 * Toolbar Style
 */

#toolbar {
    display: block;
    z-index: 108;
    width: 100%;
    user-select: none;
    padding-top: 34px;
    padding-bottom: 34px;
    background-color: var(--main-background-color);
}

#ice-control {
    right: 0;
}

#comments-display {
    left: 100%;
    margin-left: 14px;
    background-color: var(--input-focus-background-color);
    vertical-align: top;
}

#comments-display.fw-selected {
    background-color: var(--cs-light-background);
}

#comments-display:hover {
    background-color: var(--cs-light-background-hover);
}

#comments-display.fw-disabled {
    color: var(--cs-disabled);
    background-color: var(--cs-disabled-background);
}

#reviewed {
    left: 100%;
    margin-left: 14px;
    background-color: var(--editor-reviewed);
}

#reviewed:hover {
    background-color: var(--cs-light-background-hover);
}

.editor-toolbar {
    position: relative;
    width: auto !important;
    padding-left: 110px;
}

.editor-toolbar div.ui-buttonset {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    margin-right: 6px;
}

.editor-toolbar div.ui-buttonset:first-child {
    position: absolute;
    left: 30px;
}

.editor-toolbar div.info {
    /* max-width: 90px; */
    min-width: 62px;
    color: var(--cs-white-text);
    background-color: var(--cs-white-background);
    text-shadow: none;
    border-color: var(--cs-white-border);
    height: 46px;
    line-height: 46px;
    padding: 0 10px;
    display: inline-block;
    font-size: 14px;
    border-width: 0;
    border-radius: 23px;
    text-decoration: none;
    box-shadow: none;
    box-sizing: content-box;
    white-space: nowrap;
    margin-right: 6px;
    text-align: center;
}

.editor-toolbar div.multi-buttons {
    width: auto;
}

.editor-toolbar div.multi-buttons .multi-buttons-cover {
    position: relative;
    min-width: 35px;
    max-width: 120px;
    color: var(--cs-light-text);
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07px;
    padding: 0 40px 0 20px;
}

.editor-toolbar div.multi-buttons .multi-buttons-cover::after {
    display: block;
    position: absolute;
    right: 10px;
    top: 16px;
    text-align: right;
    margin-top: 0;
    width: 9px;
    height: 5px;
    opacity: 0.5;
    color: var(--cs-light-text);
    font-size: 15px;
    line-height: 15.75px;
    letter-spacing: 0.15px;
}

.editor-toolbar div.multi-buttons .multi-buttons-cover.fw-disabled::after {
    display: none;
}

.editor-toolbar .fw-button.no-border {
    background: transparent;
    border-color: transparent;
}

.editor-toolbar .fw-button.no-border .ui-button-text {
    width: 10px;
    height: 10px;
    opacity: 0.4;
    color: var(--cs-light-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 15.75px;
    letter-spacing: 0.17px;
}

.editor-toolbar .fw-button,
.editor-selection-menu .fw-button {
    border-width: 0;
}

.editor-selection-menu .fw-button {
    margin-bottom: 4px;
}

.editor-toolbar .fw-button.fw-large,
.editor-selection-menu .fw-button.fw-large {
    height: 46px;
    line-height: 46px;
    border-radius: 23px;
}

.editor-toolbar .fw-button.fw-large.fw-square,
.editor-selection-menu .fw-button.fw-large.fw-square {
    width: 46px;
}

.fw-dialog-content.math {
    min-width: 200px;
    padding-right: 50px;
    padding-bottom: 10px;
}

/* stylelint-disable selector-class-pattern */
.ML__popover {
    z-index: 1000;
}

.ML__fieldcontainer__field {
    min-height: 23px;
}
/* stylelint-enable selector-class-pattern */

math-field {
    border: 0;
    min-width: calc(100% - 10px);
}

#editor-content {
    display: flex;
    position: relative;
    top: 225px;
    max-width: 1600px;
    padding: 0.5in 54px 0 110px;
}

body.header-closed #toolbar {
    padding-top: 12px;
}

body.header-closed #editor-content {
    top: 72px;
}

#flow .doc-bibliography {
    background-color: var(--editor-text-content-item-background-color);
}

#paper-editable .citation,
#paper-editable .cross-reference,
#paper-editable .equation {
    cursor: pointer;
    background-color: var(--editor-text-content-item-background-color);
}

#paper-editable .citation:hover,
#paper-editable .cross-reference:hover,
#paper-editable .equation:hover {
    background-color: var(--editor-text-content-item-hover-background-color);
}

#paper-editable .cross-reference.missing-target {
    text-transform: uppercase;
}

#paper-editable .cross-reference.missing-target,
#paper-editable .cross-reference.missing-target:hover,
#paper-editable a.missing-target {
    background-color: var(--error-background-color);
}

#paper-editable .fw-search {
    background-color: var(--cs-5-background);
}

#paper-editable .fw-search.fw-selected {
    background-color: var(--cs-5-background-hover);
}

div.search-result-count {
    position: absolute;
    right: 10px;
    top: 10px;
}

#paper-editable {
    display: table;
    width: 100%;
}

#document-editable {
    display: table-cell;
    vertical-align: top;
    white-space: pre-wrap;
}

div#layout {
    padding-top: 60px;
}

/*
 * Dialog
 */

.dialogSubmit {
    text-align: right;
    margin-top: 20px;
}

/* for forms */

input.required,
input.error {
    border: 2px solid var(--error-border-color);
}

/* Overwrite color changes through font in editor. Webkit bug */

font {
    color: inherit !important;
}

/* Borders in editor */

.ProseMirror {
    border: none !important;
    padding: 0 !important;
    line-height: inherit !important;
}

.ProseMirror table {
    border-collapse: collapse;
    table-layout: fixed;
}

.ProseMirror td,
.ProseMirror th,
.ProseMirror caption {
    vertical-align: top;
    border: 1px solid #dddddd;
    padding: 3px 5px;
}

.ProseMirror th {
    background-color: var(--cs-6-background);
    color: var(--cs-6-text);
}

/* Don't show parts marked as hidden */

.ProseMirror .doc-part[data-hidden] {
    display: none;
}

.ProseMirror table[data-caption-hidden][data-category="none"] caption,
.ProseMirror figure[data-caption-hidden][data-category="none"] figcaption,
.ProseMirror table[data-caption-hidden] caption span.text,
.ProseMirror table[data-category="none"] caption span.label,
.ProseMirror figure[data-caption-hidden] figcaption span.text,
.ProseMirror figure[data-category="none"] figcaption span.label {
    display: none;
}

/* For default contents of title and contents field */

.doc-part::before {
    text-transform: none;
    color: var(--cs-white-border);
}

/* For Firefox problem: shows input fields without height. */

.doc-part {
    min-height: 1.5em;
    line-height: initial;

    /* Cancel out 1.6em line height for metadata/title. */
}

/* overwrite dropkick layout for access rights dialogue */

.access-rights-dialog select {
    position: static;
    visibility: inherit;
    top: 0;
}

/* delete icon in access rights dialogue */

span.delete {
    cursor: pointer;
}

.doc-title:focus,
.doc-body:focus {
    outline: none;
}

/* Prevent user from writing in the footnote editor while there are no footnotes. */

#footnote-box-container div.ProseMirror:empty {
    display: none;
}

#flow {
    padding: 50px;
    position: relative;
    width: 100%;
    bottom: 50px;
    color: var(--cs-white-text);
    background-color: var(--cs-white-background);
}

#flow.fw-hide {
    display: none;
}

#comments-filter {
    margin-left: 7px;
}

#unobtrusive-messages {
    position: fixed;
    bottom: 0;
    left: 100px;
    background-color: var(--cs-light-background);
    border-top: 1px solid var(--cs-light-border);
    border-right: 1px solid var(--cs-light-border);
    border-left: 1px solid var(--cs-light-border);
    padding: 4px;
}

#unobtrusive-messages .warn {
    color: var(--warning-text-color);
    background-color: rgb(var(--warning-background-color));
}

#unobtrusive-messages:empty {
    display: none;
}

/* Show key bindings menu */

.help-key {
    float: none;
    line-height: 1.5;
    position: relative;
    bottom: 4px;
}

.help-list-wrap {
    overflow: hidden;
    margin: 0 auto;
    transition: width 0.2s linear;
}

.help-list {
    list-style: none;
    margin: 0;
    padding: 0 0 10px;
    overflow: hidden;
    float: left;
    width: 420px;
}

.help-list li {
    margin-right: 40px;
}

.help-key-unit {
    line-height: 1.8;
    margin-right: 2em;
    padding: 5px 0;
}

.help-key-def {
    display: inline-block;
    margin-left: 1em;
    float: right;
}

.image-selection-table tr {
    cursor: pointer;
}

.image-selection-table .datatable-container tbody tr:nth-child(2n + 1) {
    background-color: var(--table-row-background-color);
}

/* MathLive Editor Overwrite */

.math-field {
    background-color: var(--cs-white-background);
    margin: 9px 10px 7px;
    padding-left: 5px;
    font-size: 20px;
    display: block;
    height: 59px;
    border: solid 1px var(--cs-white-border);
    cursor: text;
    position: relative;
}

.math-field .fw-placeholder {
    position: absolute;
    top: 20px;
    left: 10px;
    color: var(--editor-text-content-item-background-color);
}

.math-latex {
    display: block;
    min-width: 250px;
    margin: 5px 0;
    font-size: 18px;
    padding-left: 5px;
}

.fw-media-uploader {
    margin-top: 15px;
    margin-right: 30px;
}

.math-field-outer {
    margin-top: 32px;
}

div.table-edit-button-group {
    margin-bottom: 10px;
    text-align: left;
}

table.insert-table-selection {
    margin: 10px 0;
}

table.insert-table-selection,
table.insert-table-selection td {
    border: 1px solid var(--cs-white-border);
}

table.insert-table-selection td {
    min-width: 30px;
    height: 18px;
}

table.insert-table-selection td.hover {
    color: var(--cs-white-hover);
    background-color: var(--cs-white-background-hover);
}

table.insert-table-selection td.fw-selected {
    color: var(--cs-white-selected);
    background-color: var(--cs-white-background-selected);
}

.ProseMirror td.selectedCell {
    background-color: var(--cs-2-background);
    caret-color: transparent;
}

/* Wide table: used for submission dialog */

.fw-dialog-table-wide .fw-entry-field input[type="text"],
.fw-dialog-table-wide .fw-entry-field textarea {
    width: 678px;
}

.fw-dialog-table-wide .fw-entry-field textarea {
    resize: none;
}

.fw-dialog-table-wide th {
    vertical-align: top;
    padding: 0 6px 0 8px;
    width: 164px;
}

/* Links  & Anchors */

.drop-up-outer {
    /* 1. Reset cascade to browser defaults */
    all: revert;

    /* 2. Predictable box model */
    box-sizing: border-box;

    /* 3. Clear spacing & borders */
    margin: 0;
    padding: 0;
    border: none;
    outline: none;

    /* 4. Typography isolation */
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: inherit; /* Change to explicit hex if needed */
    text-align: left;
    text-transform: none;
    letter-spacing: normal;

    /* 5. Layout & dimensions */
    width: auto;
    max-width: 100vw;
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible;

    /* 6. Break inherited animations/transforms that distort layout */
    transform: none !important;
    transition: none !important;
    animation: none !important;

    /* 7. Modern containment & stacking isolation */
    contain: layout style;
    isolation: isolate;

    /* 8. White space */
    white-space: initial;
    position: absolute;
}

.drop-up-inner {
    position: relative;
    background-color: var(--cs-white-background);
    z-index: 1;
    font-weight: normal;
    color: var(--cs-white-text);
    left: 10px;
}

.drop-up-head {
    padding: 20px 22px;
    background-color: var(--cs-dark-background);
    color: var(--cs-dark-text);
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.13px;
    border-radius: 6px 6px 0 0;
}

.drop-up-head .link-href a {
    color: var(--cs-dark-text);
    font-family: Lato, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.drop-up-head > * + * {
    margin-top: 14px;
}

.link.drop-up-inner {
    box-shadow: 0 0 20px rgb(var(--dropup-box-shadow-color));
    border-radius: 6px;
}

.user-contents ul.drop-up-options li {
    border-top: 1px solid var(--cs-light-border);
    padding: 16px 30px;
    color: var(--cs-light-text);
    background: var(--cs-light-background);
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1em;
}

.user-contents ul.drop-up-options {
    list-style: none;
    padding: 0 0 12px;
    cursor: pointer;
}

ul.drop-up-options li:hover,
ul.drop-up-options li.fw-focused {
    background-color: var(--cs-light-background-hover);
}

ul.drop-up-options li.fw-focused {
    outline: 2px solid var(--cs-light-border);
    outline-offset: -2px;
}

.drop-up-options .remove-link::after {
    font-family: "Font Awesome 7 Free", monospace;
    content: "\f2ed";
    opacity: 0.4;
    float: right;
    display: block;
}

.drop-up-inner .edit {
    font-size: 0.8em;
    text-align: right;
}

*:focus {
    outline: none;
}

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

/* gapcursor related */

.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;
}

/* stylelint-disable keyframes-name-pattern */
@keyframes ProseMirror-cursor-blink {
    to {
        visibility: hidden;
    }
}
/* stylelint-enable keyframes-name-pattern */

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

/* For users who use one of the inverted high contrast modes. Likely want
as much black as possible. */

html[hc="a3"] .fw-overlay,
html[hc="a4"] .fw-overlay,
html[hc="a5"] .fw-overlay {
    background-color: rgb(var(--highcontrast-overlay-color));
}

html[hc="a3"] body,
html[hc="a4"] body,
html[hc="a5"] body {
    background-color: var(--highcontrast-background-color);
}

html[hc="a3"] #toolbar,
html[hc="a4"] #toolbar,
html[hc="a5"] #toolbar {
    border-bottom: 1px solid var(--highcontrast-border-color);
}

#close-document-top {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 100;
}

#close-document-top a,
#close-document-top .fw-link-text {
    display: block;
    width: 30px;
    height: 30px;
    opacity: 0.6;
    color: var(--cs-5-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    letter-spacing: -0.35px;
}

.doc-part.doc-deleted {
    border: 3px solid rgb(var(--warning-border-color));
    border-radius: 5px;
    padding: 10px 20px 10px 10px;
    margin: 5px 0;
    position: relative;
}

.remove-doc-part {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    font-size: 16px;
    color: var(--cs-1-icon);
}

.remove-doc-part:hover {
    color: var(--cs-1-hover);
}

.editor .doc .table-of-contents {
    background-color: var(--editor-text-content-item-background-color);
    font-family: Lato, sans-serif;
    padding: 10px;
}

#navigator {
    top: 250px;
    left: 0;
    position: fixed;
    z-index: 9;
}

#navigator-content {
    position: fixed;
    top: auto;
    left: 0;
    display: block;
    background-color: rgb(var(--editor-navigator-background-color));
    min-width: 216px;
    max-width: 480px;
    color: var(--editor-navigator-color);
    padding: 15px 30px 15px 50px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.2;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    overflow-y: auto;
}

#navigator.opened #navigator-content {
    transform: translateX(0);
}

#navigator-list {
    max-height: min(550px, 100vh - 315px);
    overflow-y: hidden;
}

#navigator-content a {
    color: var(--editor-navigator-color);
}

#navigator-list a:focus {
    outline: var(--editor-navigator-focus-color) solid 2px;
    outline-offset: 2px;
}

#navigator-filter span {
    display: block;
    padding-bottom: 10px;
}

#navigator-list.fw-hide,
#navigator-filter.fw-hide {
    display: block;
    height: 0;
    overflow: hidden;
}

#navigator-list::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--editor-navigator-scrollbar-background-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: var(--editor-navigator-scrollbar-background-color-hover);
}

#navigator-list > * {
    padding-bottom: 12px;
}

#navigator-list a:hover {
    text-decoration: underline;
}

#navigator-content h2 {
    padding-left: 1em;
}

#navigator-content h3 {
    padding-left: 2em;
}

#navigator-content h4 {
    padding-left: 3em;
}

#navigator-content h5 {
    padding-left: 4em;
}

#navigator-content h6 {
    padding-left: 5em;
}

#navigator-content .header {
    text-transform: uppercase;
    padding-bottom: 20px;
}

.header-container {
    position: relative;
    padding-right: 28px;
}

.active-heading {
    text-decoration: underline;
}

#navigator-button {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    background-color: rgb(var(--editor-navigator-background-color));
    cursor: pointer;
    z-index: 4;
}

#navigator.opened #navigator-button {
    background-color: inherit;
}

.navigator-arrow-icon {
    color: var(--editor-navigator-color);
}

.navigator-arrow-icon i {
    transition: all 0.5s 0.25s;
}

.rotate {
    transform: rotate(180deg);
}

#navigator-filter-icon,
#navigator-filter-back {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}

#navigator-filter-icon {
    transition: transform 0.2s;
}

#navigator-filter-icon:hover {
    transform: rotate(90deg);
}

.form-checkbox {
    appearance: none;
    display: inline-block;
    position: relative;
    background-color: var(--editor-navigator-color);
    color: var(--editor-navigator-checkbox-color);
    top: 5px;
    height: 18px;
    width: 18px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 7px;
    outline: none;
}

.form-checkbox:checked::before {
    position: absolute;
    left: 3px;
    content: "\2713";
    font-weight: bold;
    font-size: 1.2em;
}

.navigator-label {
    color: var(--editor-navigator-color);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.fw-hide {
    display: none;
}

body.no-scroll {
    overflow: hidden;
}

/* Additions for tablets + mobile */
@media screen and (width <= 1279px) {
    #document-top > h1 {
        padding-left: 52px;
        background-position: 14px 0;
    }

    #header-navigation {
        margin-left: 52px;
    }

    .editor-toolbar div.ui-buttonset:first-child {
        left: 3px;
    }

    .editor-toolbar {
        padding-left: 52px;
    }

    #editor-content {
        padding-left: 52px;
        padding-right: 30px;
    }
}

@media screen and (width <= 1023px) {
    #toolbar {
        padding-bottom: 6px;
    }

    #editor-content {
        padding-right: 0;
        padding-left: 15px;
    }

    #flow {
        padding: 16px 25px 8px 8px;
        width: calc(100% - 30px);
    }

    #document-top > h1 {
        background: initial;
        padding-left: 8px;
    }

    #header-navigation {
        margin-left: 8px;
    }

    #navigator {
        top: 195px;
        z-index: 90;
    }

    #navigator-button {
        width: 46px;
        height: 46px;
        line-height: 46px;
    }

    body.header-closed #navigator {
        top: 64px;
    }

    body.header-closed #editor-content {
        top: 96px;
    }

    /* Show footnotes at bottom rather than next to main editor. */
    #paper-editable {
        display: block;
    }

    #document-editable {
        display: block;
        width: 100%;
    }

    #footnote-box-container {
        display: block !important;
        position: relative;
        width: 100% !important;
    }

    #citation-footnote-box-container {
        position: relative;
        width: 100%;
        max-width: 100%;
    }

    .margin-box.inactive {
        display: none;
    }

    /* Document comments always stay visible at the end of the article on mobile. */
    #global-comments .margin-box.comment {
        display: block;
    }

    #margin-box-filter {
        position: fixed !important;
        top: 195px !important;
        right: 8px;
    }

    body.header-closed #margin-box-filter {
        top: 64px !important;
    }

    #margin-box-column {
        width: auto;
        position: absolute;
    }

    #margin-box-container {
        overflow: hidden auto;
        bottom: 0;
        position: fixed;
        left: -1px;
        right: 0;
        max-height: 35vh;
        z-index: 2;
    }

    .comment-btns {
        text-align: left !important;
    }

    .margin-box.fw-active {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .footnote-container,
    .footnote-citation {
        margin-top: 10px !important;
    }

    .margin-box.comment.fw-active .comment-answer-container {
        max-height: none !important;
    }
}

@media screen and (width <= 420px) {
    .editor-toolbar div.ui-buttonset {
        margin-right: 0;
    }

    .editor-toolbar div.multi-buttons .multi-buttons-cover {
        padding: 0 25px 0 15px;
    }
}

/* Code block styling */
.code-block-wrapper {
    position: relative;
    margin: 1em 0;
}

.code-block-wrapper pre {
    padding-top: 30px;
    position: relative;
}

.code-block-wrapper.ProseMirror-selectednode {
    outline: 2px solid #4a90e2;
}

.code-block-language-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #4a90e2;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10;
    pointer-events: none;
}

.code-block-menu-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgb(255 255 255 / 80%);
    border: 1px solid #dddddd;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
}

.code-block-menu-btn:hover {
    background: rgb(255 255 255 / 100%);
}

.code-block-wrapper:hover .code-block-menu-btn {
    opacity: 1;
}

.code-block-label {
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 0.5em;
    color: #333333;
}

.code-block-label .label-text {
    background: #f5f5f5;
    padding: 2px 8px;
    border-left: 3px solid #4a90e2;
    display: inline-block;
}

/* Language indicator for code blocks */
pre[data-language]:not([data-language=""], [data-category])::after {
    content: attr(data-language);
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgb(0 0 0 / 10%);
    padding: 2px 6px;
    font-size: 0.75em;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.6;
}

pre[data-language] {
    position: relative;
}

/* Inline reference drop-up */
.inline-reference-drop-up .drop-up-inner {
    min-width: 280px;
    max-width: 400px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--cs-white-background);
    border: 1px solid var(--cs-white-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    padding: 4px 0;
}

.inline-reference-drop-up-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inline-reference-drop-up-item {
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.inline-reference-drop-up-item:hover,
.inline-reference-drop-up-item.fw-selected {
    background-color: var(--cs-light-background-hover);
}

.citation-drop-up-key {
    font-weight: bold;
    color: var(--cs-light-text);
    font-size: 12px;
}

.citation-drop-up-meta {
    color: var(--cs-light-text-secondary);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-reference-drop-up-empty {
    padding: 8px 10px;
    color: var(--cs-light-text-secondary);
    font-size: 12px;
    font-style: italic;
}

.inline-reference-drop-up-section-header {
    padding: 4px 10px 2px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cs-light-text-secondary);
    border-top: 1px solid var(--cs-light-border);
    margin-top: 2px;
}

.inline-reference-drop-up-xref-text {
    font-size: 12px;
    color: var(--cs-light-text);
}

/* Inline reference widget */
.inline-reference-widget {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

.inline-reference-input {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: 1px solid var(--cs-light-border);
    border-radius: 3px;
    padding: 0 4px;
    margin: 0;
    background: var(--cs-white-background);
    color: var(--cs-light-text);
    outline: none;
    min-width: 120px;
    white-space: nowrap;
    cursor: text;
}

.inline-reference-input:focus {
    border-color: var(--cs-2-background);
    box-shadow: 0 0 0 1px var(--cs-2-background);
}

/* Inline math widget */
.inline-math-widget {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

.inline-math-input {
    display: inline-block;
    font-family: monospace;
    font-size: 0.9em;
    line-height: inherit;
    border: 1px solid var(--cs-light-border);
    border-radius: 3px;
    padding: 0 4px;
    margin: 0;
    background: var(--cs-white-background);
    color: var(--cs-light-text);
    outline: none;
    min-width: 80px;
    white-space: nowrap;
    cursor: text;
}

.inline-math-input:focus {
    border-color: var(--cs-2-background);
    box-shadow: 0 0 0 1px var(--cs-2-background);
}

.inline-math-dropup-latex {
    font-family: monospace;
    font-size: 0.9em;
    color: var(--cs-light-text-secondary);
    word-break: break-all;
}