/* Footnotes */

.user-contents .footnote-container h1,
.user-contents .footnote-container h2,
.user-contents .footnote-container h3,
.user-contents .footnote-container h4,
.user-contents .footnote-container h5,
.user-contents .footnote-container h6,
.user-contents .footnote-container p,
.user-contents .footnote-container blockquote,
.user-contents .footnote-container code,
.user-contents .footnote-container ol,
.user-contents .footnote-container ul {
    margin-bottom: unset;
}

/* footnotes in main editor */

.footnote-marker::before,
.citation-footnote-marker::before {
    counter-increment: footnote-marker-counter;
    content: counter(footnote-marker-counter);
}

.footnote-container,
.footnote-citation {
    margin-top: 10px;
    overflow-wrap: break-word;
}

/* footnotes in footnote in print */

.pagination-footnotes .footnote-marker::before {
    content: "";
    counter-increment: none;
}

.pagination-footnotes .footnote-marker > *:first-child::before {
    counter-increment: footnote-counter;
    content: counter(footnote-counter) " ";
}

.pagination-contents .footnote-marker > * {
    display: none;
}

.footnote-marker,
.citation-footnote-marker {
    font-size: 75%;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

#footnote-box-container {
    display: table-cell;
    width: 20vw;
    vertical-align: top;
}

/* Make the <hr> at the end of the footnote editor not show. It is only there
because PM needs some content. */

#footnote-box-container > div.ProseMirror > div:last-child > hr {
    display: none;
}

#citation-footnote-box-container {
    position: absolute;
    width: 20vw;
    max-width: 20vw;
}

#footnote-box-container .footnote-container > *:first-child::before {
    counter-increment: footnote-counter;
    content: counter(footnote-counter) " ";
}

#footnote-box-container .ProseMirror {
    display: grid;
}

/* Mobile/tablet layout: stack footnotes under the main text with full width. */
@media screen and (width <= 1023px) {
    #footnote-box-container {
        display: block;
        width: 100%;
    }

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