:root
{
    --post-font-size: 18px;
    --editor-toolbar-background-colour: var(--constant-anti-background-colour);
    --editor-templates-background-colour: var(--editor-toolbar-background-colour);
    --editing-field-font-family: "Ubuntu Mono";
    --editing-field-background-color: var(--background-colour);
    --error-message-background-colour: rgb(255, 90, 90);
    --error-message-text-colour: rgb(255, 255, 255);
    --main-header-padding: 5px;
    --main-header-border-bottom-colour: color-mix(in srgb, var(--text-colour) 25%, var(--background-colour));
    --main-header-background-colour: none;
    --chart-menu-button-border-radius: 5px;
    --chart-menu-button-text-colour-inactive: color-mix(in srgb, 50% var(--text-colour), 50% var(--background-colour));
    --chart-menu-row-padding-top: calc(0.75 * var(--post-font-size) / 2);
    --chart-menu-row-padding-bottom: var(--chart-menu-row-padding-top);
    --chart-menu-row-border-radius: 4px;
    --input-border-width: 2px;
    --bullet-list-border-width: 4px;
    --bullet-list-size: calc(8 * var(--post-font-size) / 8);
    --inlined-code-border-radius: 5px;
    --inlined-code-padding: 5px;
    --inlined-code-background-colour: color-mix(in srgb, var(--post-section-title-background-colour) 50%, var(--post-section-background-colour) 50%);
    --inlined-code-border-colour: color-mix(in srgb, var(--post-section-border-colour) 75%, var(--post-section-background-colour) 25%);

    --post-header-background-colour: var(--background-colour);

    --source-code-tool-icon-width: var(--post-font-size);
    --source-code-tool-icon-height: var(--source-code-tool-icon-width);
    --source-code-block-line-text-colour: color-mix(in srgb, 75% var(--text-colour), 25% var(--background-colour));
    --source-code-block-line-border-colour: color-mix(in srgb, 30% var(--text-colour), 70% var(--background-colour));
    --source-code-left-column-background-colour: color-mix(in srgb, 5% var(--text-colour), 95% var(--background-colour));
    --source-code-tools-border-radius: 4px;

    --header-logo-size: calc(1 * var(--left-nav-logo-size));

    --editor-toolbar-button-width: var(--header-logo-size);
    --editor-toolbar-button-height: var(--editor-toolbar-button-width);

    --editor-templates-button-width: calc(var(--editor-toolbar-button-width) * 4);
    --editor-templates-button-height: calc(var(--editor-toolbar-button-height) * 4);

    --post-section-background-colour: color-mix(in srgb, 99% var(--background-colour), 1% var(--text-colour));
    --post-section-border-width: 1px;
    --post-section-border-colour: color-mix(in srgb, var(--text-colour) 25%, var(--background-colour));
    --post-section-border-radius: 0px;

    --post-section-title-background-colour: color-mix(in srgb, 92% var(--background-colour), 8% var(--text-colour));

    --h2-margin-top: calc(var(--post-font-size) * 3);
    --h2-margin-bottom: calc(var(--post-font-size) * 3 / 3);
    
    --section-content-padding-top: calc(2 * var(--post-font-size));
    --section-content-padding-bottom: 0px;

    --search-bar-placeholder-text-colour: var(--nav-text-colour);

    --central-content-background-colour: color-mix(in srgb, var(--background-colour) 99%, var(--text-colour) 1%);
    --central-column-width: calc(100% - (var(--left-tool-nav-width) + 1px) + 1px);

    --search-screen-padding-top: calc(3 * var(--post-font-size));
    --search-screen-padding-left: var(--post-font-size);
    --search-screen-padding-right: var(--post-font-size);
    --search-screen-padding-bottom: var(--post-font-size);
    --search-screen-list-row-gap: calc(var(--post-font-size) * 0.75);
    --search-screen-item-padding-top: calc(var(--post-font-size));
    --search-screen-item-padding-left: 0px;
    --search-screen-item-padding-right: 0px;
    --search-screen-item-padding-bottom: calc(var(--search-screen-item-padding-top));
    --search-screen-item-background-colour: color-mix(in srgb, 99% var(--background-colour), 1% var(--text-colour));
    --search-screen-item-background-colour-hovered: color-mix(in srgb, 92% var(--background-colour), 8% var(--text-colour));
    --search-screen-item-footer-font-colour: color-mix(in srgb, 50% var(--text-colour), 50% var(--search-screen-item-background-colour));
    --search-screen-item-border-colour: color-mix(in srgb, 75% var(--search-screen-item-background-colour), 25% var(--text-colour));
    --search-screen-item-shadow-colour: var(--search-screen-item-border-colour);
    --search-screen-item-shadow-colour-hovered: color-mix(in srgb, 65% var(--search-screen-item-background-colour), 35% var(--text-colour));;
    --search-screen-item-shadow-dispersion: calc(var(--search-screen-list-row-gap) * 0.5);
    --search-screen-item-shadow-dispersion-hovered: calc(var(--search-screen-list-row-gap) * 0.6);
    --search-screen-item-title-margin-bottom: calc(var(--post-font-size) * 0.5);

    --sorting-algorithm-button-background-colour: var(--search-screen-item-background-colour);
    --sorting-algorithm-button-background-colour-hovered: var(--search-screen-item-background-colour-hovered);

    --prism-button-border-radius: calc(0.2 * var(--post-font-size));

    --post-section-list-padding-left: calc(1 * 16 * var(--bullet-list-size) / 6);
    --bullet-list-background-colour: var(--accent-colour);
    --bullet-list-border-colour: var(--accent-colour);
    --checkbox-background-colour: var(--accent-colour);
    --checkbox-border-colour: var(--accent-colour);
    --checkbox-tick-colour: var(--accent-colour);
    --checkbox-cross-colour: var(--text-colour);
    --radiobutton-background-colour: var(--accent-colour);
    --radiobutton-border-colour: var(--text-colour);
    --radiobutton-block-margin-bottom: var(--post-font-size);

    --linktobutton-padding: calc(var(--post-font-size) * 0.3) calc(var(--post-font-size) * 0.3 * 2.5);

    --multi-version-section-margin-top: calc(var(--post-font-size) * 2);
    --multi-version-section-margin-bottom: calc(var(--post-font-size) * 2);
    --multi-version-section-menu-background-colour: color-mix(in srgb, var(--text-colour) 5%, var(--background-colour) 95%);
    --multi-section-menu-entry-active-text-colour: var(--accent-colour);
    --multi-version-button-text-colour-inactive-hovered: color-mix(in srgb, var(--multi-version-button-text-colour-inactive) 95%, var(--text-colour) 5%);
    --multi-version-button-text-colour-inactive: color-mix(in srgb, var(--text-colour) 50%, var(--background-colour) 50%);
    --multi-version-section-entry-opening-border-colour: color-mix(in srgb, 80% var(--background-colour), 20% var(--text-colour));
    --multi-version-section-entry-closing-border-colour: var(--accent-colour);
    --multi-version-section-heading-border-colour: var(--multi-version-section-entry-opening-border-colour);
    --multi-version-section-menu-hovered-background-colour: color-mix(in srgb, var(--multi-version-section-menu-background-colour) 95%, var(--text-colour) 5%);

    --webpage-column-width: 90%;
    --webpage-column-max-width: 1024px;
    --editor-column-width: var(--webpage-column-width);
}

@media only screen and (max-width: 768px)
{
    :root
    {
        --webpage-column-width: 100vw;
    }
}

#MainHeader
{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
    width: 100%;
    color: var(--text-colour);
    opacity: 0;
    z-index: var(--header-zindex);
    background-color: var(--main-header-background-colour);
}

#MainHeader .Separator
{
    margin: calc(0.5 * var(--left-nav-logo-size));
    margin-top: 0px;
    margin-bottom: 0px;
    border-right: 1px solid var(--left-tool-nav-separator-colour);
}

#PostSearchBarContainer
{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid rgb(163, 172, 186);
    border-radius: 4px;
    box-shadow: 0px 0px var(--search-screen-item-shadow-dispersion) var(--search-screen-item-shadow-colour);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: calc(var(--webpage-column-width) * 0.5);
}

#PostSearchBar
{
    flex-grow: 0;
    box-sizing: border-box;
    background: none;
    background-color: var(--background-colour);
    width: 100%;
    margin: 0px;
    padding-left: 20px;
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: calc(0.8 * var(--post-font-size));
    border: none;
    border-radius: 4px;
    color: var(--nav-text-colour);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

#PostSearchBar::-webkit-search-cancel-button
{
    display: none;
}

#PostSearchBar:focus
{
    outline: none;
    background-color: var(--background-colour);
}

#PostSearchBar::placeholder
{
    color: var(--search-bar-placeholder-text-colour);
}

#PostSearchBarCloseButton
{
    background: none;
    font-size: calc(1 * var(--post-font-size));
    font-family: var(--post-font-family);
    border: none;
    color: var(--nav-text-colour);
    border-radius: 0px 4px 4px 0px;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: 1px solid color-mix(in srgb, 75% var(--background-colour), 25% var(--text-colour));
    font-weight: bold;
}

#PostSearchBarCloseButton:hover
{
    background-color: color-mix(in srgb, 85% var(--background-colour), 15% var(--text-colour));
}

.SearchOccurrence
{
    color: var(--accent-colour);
    font-weight: bold;
    text-decoration: underline;
}

#SearchScreen
{
    display: none;
    flex-direction: column;
    max-height: 100%;
    padding-top: var(--search-screen-padding-top);
    padding-left: var(--search-screen-padding-left);
    padding-right: var(--search-screen-padding-right);
    padding-bottom: var(--search-screen-padding-bottom);
    width: var(--webpage-column-width);
    margin-left: auto;
    margin-right: auto;
}

#SearchScreenTitle
{
    text-align: center;
}

#SortingAlgorithmButtons
{
    display: flex;
    flex-direction: row;
    justify-content: end;
    column-gap: calc(0.2 * var(--post-font-size));
    margin-bottom: calc(0.4 * var(--post-font-size));;
}

.SortingAlgorithmButton
{
    background: none;
    color: var(--text-colour);
    border: None;
    border-radius: 4px;
    font-size: calc(0.8 * var(--post-font-size));
}

.SortingAlgorithmButton.Selected
{
    color: var(--accent-colour);
}

.SortingAlgorithmButton:hover
{
    background-color: var(--sorting-algorithm-button-background-colour-hovered);
}

#SearchScreenItemList
{
    display: flex;
    flex-direction: column;
    row-gap: var(--search-screen-list-row-gap);
    overflow-y: auto;
}

.SearchScreenItem
{
    padding-top: var(--search-screen-item-padding-top);
    padding-left: var(--search-screen-item-padding-left);
    padding-right: var(--search-screen-item-padding-right);
    padding-bottom: var(--search-screen-item-padding-bottom);
    margin-right: var(--search-screen-item-shadow-dispersion);
    margin-left: var(--search-screen-item-shadow-dispersion);
    border: 1px solid var(--search-screen-item-border-colour);
    border-radius: 4px;
    background-color: var(--search-screen-item-background-colour);
    box-shadow: 0px 0px var(--search-screen-item-shadow-dispersion) var(--search-screen-item-shadow-colour);
    opacity: 0;
    transform: translateY(50px);
    animation: SlideUp 0.5s ease-out forwards;
    animation-delay: calc(var(--index) * 0.05s);
}

.SearchScreenItem:first-child
{
    margin-top: var(--search-screen-item-shadow-dispersion);
}

.SearchScreenItem:last-child
{
    margin-bottom: var(--search-screen-item-shadow-dispersion);
}

@keyframes SlideUp
{
    from
    {
        opacity: 0;
        transform: translateY(50px);
    }
    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

.SearchScreenItem:hover
{
    background-color: var(--search-screen-item-background-colour-hovered);
    cursor: pointer;
    box-shadow: 0px 0px var(--search-screen-item-shadow-dispersion-hovered) var(--search-screen-item-shadow-colour-hovered);
}

.SearchScreenItemHeader
{
    border-bottom: 1px solid var(--search-screen-item-border-colour);
}

.SearchScreenItemTitle
{
    font-weight: bold;
    color: var(--accent-colour);
    font-size: var(--post-font-size);
    margin-bottom: var(--search-screen-item-title-margin-bottom);
    margin-top: 0px;
}

.SearchScreenItemBody *
{
    margin-top: var(--search-screen-item-title-margin-bottom);
    overflow-y: hidden;
    max-height: calc(4 * var(--post-font-size));
    line-height: var(--line-height);
}

.SearchScreenItemFooter
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: calc(0.8 * var(--post-font-size));
    color: var(--search-screen-item-footer-font-colour);
}

.SearchScreenItemFooter *
{
    margin-top: 0px;
    margin-bottom: 0px;
}

.SearchScreenItemAuthorName
{
    font-style: italic;
}

.SearchScreenItemHeader, .SearchScreenItemBody, .SearchScreenItemFooter
{
    margin-left: calc(1 * var(--post-font-size));
    padding-right: calc(1 * var(--post-font-size));
}

#AccountSection
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

#AccountSection button
{
    height: 20px;
    background: none;
    border: none;
    font-family: "Lato";
    padding: 0px;
    font-size: 16px;
    color: white;
    vertical-align: middle;
}

#AccountSection img
{
    width: 20px;
    height: 20px;
    vertical-align: top;
    margin-right: 5px;
}

#AccountSection button:hover
{
    font-weight: bold;
}

#CentralContent
{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    max-width: 100%;
    max-height: calc(100vh);
    overflow-y: auto;
    background-color: var(--central-content-background-colour);
}

@media only screen and (max-width: 768px)
{
    #CentralContent
    {
        max-height: calc(100dvh - var(--top-nav-height));
    }
}

#MainSection
{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    border-radius: 0px 0px var(--central-content-border-radius) 0px;
    overflow-y: hidden;
    height: 100vh;
    box-shadow: calc(var(--post-font-size) / 2 * -1) 0px calc(var(--post-font-size)) 0px rgba(0, 0, 0, 0.15);
    z-index: var(--main-content-zindex);
}

#MainSection.HandleOverflow
{
    overflow-y: auto;
}

#PostHeader
{
    position: relative;
    flex-grow: 1;
    overflow-x: visible;
    overflow-y: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: calc(0.5 * var(--left-nav-logo-size));
    padding-top: calc(0.5 * var(--left-nav-logo-size));
    background-size: 100%;
    font-family: "Lato";
    text-align: center;
    box-shadow: 0px 0px var(--search-screen-item-shadow-dispersion) var(--search-screen-item-shadow-colour);
    border-bottom: 1px solid var(--main-header-border-bottom-colour);
    background-color: var(--post-header-background-colour);
    z-index: var(--header-zindex);
}

#PostHeader.IsSticking
{
    border-bottom: none;
    box-shadow: none;
}

#PostHeaderButtons
{
    overflow-y: visible;
}

@media only screen and (max-width: 768px)
{
    #PostHeaderButtons .PrismSelectionRaw
    {
        display: none;
    }

    #PostHeaderButtons .Separator:first-of-type
    {
        display: none;
    }
}

#MainHeader .PrismSelectionRaw.EditorInProgress svg path
{
    fill: var(--accent-colour);
}

#NoteTitleSentinel
{
    height: 1px;
    display: block;
    flex-shrink: 0;
    margin-top: calc(3 * var(--left-nav-logo-size));
}

#NoteTitleSticking
{
    margin-left: auto;
    margin-right: auto;
    padding-right: calc(var(--post-font-size));
    padding-left: calc(var(--post-font-size));
    text-align: center;
    opacity: 0%;
    transition: opacity 0.2s ease;
    background-color: var(--post-header-background-colour);
    font-size: var(--post-font-size);
    color: var(--accent-colour);
    overflow-x: auto;
}

#NoteTitleSticking.IsSticking
{
    opacity: 100%;
    border-bottom: 1px solid var(--main-header-border-bottom-colour);
    box-shadow: 0px 0px var(--search-screen-item-shadow-dispersion) var(--search-screen-item-shadow-colour);
}

#NoteTitle
{
    position: sticky;
    top: 0px;
    z-index: calc(var(--post-nav-zindex) + 1);
    margin: auto;
    margin-top: 0px;
    margin-bottom: calc(1 * var(--post-font-size));
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: calc(1.5 * var(--post-font-size));
    text-align: center;
    max-width: var(--webpage-column-width);
    background-color: var(--post-section-background-colour);
    border: 1px solid var(--main-header-border-bottom-colour);
    border-left: 6px solid var(--accent-colour);
    border-right: 6px solid var(--accent-colour);
    border-radius: 10px;
    box-shadow: 0px 0px var(--search-screen-item-shadow-dispersion) var(--search-screen-item-shadow-colour);
    transition: opacity 0.2s ease;
    opacity: 100%;
}

#NoteTitle.IsSticking
{
    opacity: 0%;
}

#NoteTitle.LoadingMode, #PostContent.LoadingMode, #PostHeader.LoadingMode, #TagSection.LoadingMode, #MainSectionFooter.LoadingMode
{
    opacity: 1;
}

#NoteTitle.LoadingMode *, #PostContent.LoadingMode *, #PostHeader.LoadingMode *, #TagSection.LoadingMode *, #MainSectionFooter.LoadingMode *
{
    opacity: 0;
}

#ResolutionAspectRatios
{
    display: none;
}

.ButtonGroup
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-left: 10px;
    padding-right: 10px;
}

.ButtonGroup button
{
    background: none;
    border: none;
}

.ButtonGroup img, .ButtonGroup svg
{
    display: inline-block;
    width: var(--post-font-size);
    height: var(--post-font-size);
    vertical-align: middle;   
}

.ButtonGroup img:last-child
{
    margin-right: 0px;
}

.ButtonGroup label
{
    font-size: var(--post-font-size);
    vertical-align: middle;
    color: var(--text-colour);
}

#MainHeader .ButtonGroup img, #MainHeader .ButtonGroup svg
{
    margin-right: 0px;
    width: var(--header-logo-size);
    height: var(--header-logo-size);
}

#MainHeader .ButtonGroup button:hover svg path
{
    fill: var(--accent-colour);
}

#MainHeader .ButtonGroup button
{
    border-radius: var(--prism-button-border-radius);
    padding: var(--left-tool-nav-button-padding);
    padding-left: calc(0.3 * var(--left-nav-logo-size));
    padding-right: calc(0.3 * var(--left-nav-logo-size));
}

#MainHeader .ButtonGroup button.Selected
{
    background-color: var(--accent-colour);
}

#MainHeader .ButtonGroup button svg path
{
    fill: var(--text-colour);
}

#MainHeader .ButtonGroup button.Selected svg path
{
    fill: var(--background-colour);
}

#MainHeader .ButtonGroup button:hover label
{
    color: var(--accent-colour);
}

.ButtonGroup button:not(:disabled):hover, .ButtonGroup button:not(:disabled):hover label
{
    cursor: pointer;
    color: var(--accent-colour);
}

.ButtonGroup button label:hover
{
    cursor: pointer;
}

.ButtonGroup button:disabled:hover, .ButtonGroup button:disabled label:hover
{
    cursor: not-allowed;
}

.ButtonGroup button:disabled img
{
    filter: invert(81%) sepia(59%) saturate(1%) hue-rotate(17deg) brightness(99%) contrast(106%);
}

.AdaptiveImg, *:hover > .AdaptiveHoverImg, button svg
{
    fill: var(--accent-colour);
    color: var(--accent-colour);
}

@media(prefers-color-scheme: dark)
{
    .ButtonGroup button:disabled img
    {
        filter: invert(81%) sepia(59%) saturate(1%) hue-rotate(17deg) brightness(60%) contrast(106%);
    }
}

.ButtonGroup button:disabled label
{
    color: #595959;
}

input[type=range]
{
    appearance: none;
    height: 25px;
    background-color: var(--background-colour);
    border: 1px solid var(--text-colour);
    outline: none;
    transition: opacity .2s;
    border-radius: 12px;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
input[type=range]::-webkit-slider-thumb
{
    appearance: none;
    width: 23px;
    height: 23px;
    border-radius: 100%;
    background: var(--accent-colour);
    cursor: pointer;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
input[type=range]::-moz-range-thumb
{
    appearance: none;
    width: 23px;
    height: 23px;
    border-radius: 100%;
    background: var(--accent-colour);
    cursor: pointer;
}

input[type=color]:hover
{
    cursor: pointer;
}

#InputSettings
{
    display: block;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: var(--background-colour);
    box-shadow: 0px 0px 10px var(--text-colour);
    border: 1px 0px 0px 1px solid var(--text-colour);
    border-radius: 10px 0px 0px 0px;
    padding: 15px;
    padding-right: 60px;
    padding-bottom: 30px;
    font-size: 25px;
    z-index: var(--settings-zindex);
}

#FontFamilyList
{
    font-size: 25px;
}

#Parameters tr
{
    height: 30px;
}

#Parameters tr td:first-of-type
{
    text-align: center;
    padding-right: 20px;
}

#Parameters input[type=color]
{
    width: 100%;
    height: 35px;
}

#Parameters input[type=checkbox]
{
    width: 35px;
    height: 35px;
}

.GroupOfButtonsForAPrism
{
    position: relative;
    overflow-y: visible;
}

.GroupOfButtonsForAPrism .ContextualButtonContainer
{
    display: none;
    position: absolute;
    top: 30px;
}

#MainHeader .GroupOfButtonsForAPrism:hover .Prism
{
    border-radius: var(--prism-button-border-radius) var(--prism-button-border-radius) 0px 0px;
}

.GroupOfButtonsForAPrism:hover .ContextualButtonContainer
{
    display: flex;
}

.ContextualButtonContainer
{
    flex-direction: column;
    align-items: center;
    border-radius: 0px 0px var(--prism-button-border-radius) var(--prism-button-border-radius);
    background-color: var(--text-colour);
}

#MainHeader .ContextualButtonContainer .ContextualButton
{
    flex-grow: 0;
    display: none;
}

#MainHeader .ContextualButtonContainer .ContextualButton svg path
{
    fill: var(--background-colour);
}

#MainHeader .ContextualButtonContainer .ContextualButton:hover svg path
{
    fill: var(--left-tool-nav-text-accent-colour);
}

#ErrorMessageList
{
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: var(--error-message-zindex);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow-y: auto;
}

#ErrorMessageList .ErrorMessage
{
    background-color: var(--error-message-background-colour);
    color: var(--error-message-text-colour);
    padding: 10px;
    margin: 0px;
    border-radius: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--error-message-background-colour) 75%, var(--constant-anti-background-colour) 25%);
    width: calc(var(--post-font-size) * 20);
    opacity: 0;
    transition: opacity .5s;
}

#ErrorMessageList .ErrorMessage.ToShow
{
    opacity: 1;
}

#ErrorMessageList .ErrorMessagePostTitle
{
    font-weight: bold;
}

#MainSectionBody
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

#IDE
{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    max-height: 100%;
}

#IDE > *
{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

#IDE.Multiview
{
    overflow-y: scroll;
    max-height: 100%;
}

#PageProduced
{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

#IDE.Multiview > #PageProduced
{
    overflow-y: scroll;
    max-height: 100%;
}

#PostContent
{
    padding: 0px;
    padding-bottom: calc(var(--post-font-size) * 5);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: justify;
    font-family: var(--post-font-family);
    font-size: var(--post-font-size);
    line-height: calc(2*var(--post-font-size));
    margin-left: auto;
    margin-right: auto;
}

#IDE.Multiview > #PostContent
{
    margin-left: 1%;
    margin-top: 0px;
    overflow-y: scroll;
    max-height: 100%;
}

@media only screen and (max-width: 768px)
{
    #PostContent
    {
        text-align: left;
        margin-left: 0px;
        margin-right: 0px;
    }
}

#PostContent.Webpage:not([Layout="Grid"]), #PostContent.LoadingMode, #PostContent.Latex
{
    width: var(--webpage-column-width);
    max-width: var(--webpage-column-max-width);
}

#MainSectionBody.PrintMedia #PostContent.Webpage
{
    margin: 0px;
    padding: 0px;
    max-width: calc(var(--webpage-column-width) - 2in);
    overflow-x: hidden;
    margin-left: 1in;
    margin-right: 1in;
}

#PostContent.Raw
{
    margin: auto;
    width: var(--editor-column-width);
}

#PostContent.Slideshow
{
    overflow-y: auto;
}

#PostContent.Raw
{
    padding-bottom: 100px;
}

#PostContent h1:not(.PostH1)
{
    margin-top: calc(2*var(--post-font-size));
    margin-bottom: var(--post-font-size);
}

#PostContent a, #MainSectionFooter a
{
    color: var(--link-colour);
}

#PostContent a:hover, #MainSectionFooter a:hover
{
    color: var(--link-colour-hover);
}

#PostContent .TableContainer
{
    display: block;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    overflow-y: hidden;
    overscroll-behavior-y: auto;
}

#PostContent table
{
    border: 1px solid var(--table-heading-row-cell-border-colour);
    border-collapse: collapse;
    margin: 25px 0px;
    font-family: sans-serif;
    font-family: var(--post-font-family);
    text-align: left;
    max-width: 100%;
}

#PostContent table thead tr
{
    font-weight: normal;
    border-spacing: 0px;
    border-bottom: 1px solid var(--table-heading-row-cell-border-colour);
}

#PostContent table thead th
{
    background-color: var(--table-heading-row-background-colour);
    text-decoration: none;
    font-weight: bold;
    position: relative;
    color: var(--table-heading-row-text-colour);
}

#PostContent table thead th:hover
{
    cursor: pointer;
}

#PostContent table tr th.HeadColumn
{
    left: 0px;
}

#PostContent table tbody tr:not(:last-child)
{
    border-bottom: 1px solid var(--table-cell-border-colour);
}

#MainSectionBody.PrintMedia #PostContent table tr th.HeadColumn, #MainSectionBody.PrintMedia #PostContent table tr td.HeadColumn
{
    background-color: inherit;
}

#PostContent .TableContainer .ChartMenu
{
    display: flex;
    flex-direction: row;
    column-gap: calc(var(--post-font-size) * 0.75);
    justify-content: flex-start;
}

#MainSectionBody.PrintMedia #PostContent .TableContainer .ChartMenu
{
    display: none;
}

#PostContent .TableContainer .ChartMenu button
{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: none;
    border: none;
    padding: 0px;
    font-family: var(--post-font-family);
    font-size: var(--post-font-size);
    color: var(--table-heading-row-text-colour);
}

#PostContent .TableContainer .ChartMenu button:disabled
{
    color: var(--chart-menu-button-text-colour-inactive);
}

#PostContent .TableContainer .ChartMenu button div
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#PostContent .TableContainer .ChartMenu button:not(:disabled):hover
{
    color: var(--accent-colour);
}

.ChartWindow button
{
    padding-top: 10px;
}

#PostContent table thead th, #PostContent table td
{
    padding-left: calc(0.75 * var(--post-font-size));
    padding-right: calc(0.75 * var(--post-font-size));
    padding-top: calc(0.65 * var(--post-font-size));
    padding-bottom: calc(0.65 * var(--post-font-size));
    line-height: var(--line-height);
}

#PostContent table thead th:first-child, #PostContent table td:first-child
{
    padding-left: calc(1.5 * var(--post-font-size));
}

#PostContent table thead th:last-child, #PostContent table td:last-child
{
    padding-right: calc(1.5 * var(--post-font-size));
}

#PostContent table td
{
    padding-top: calc(0.35 * var(--post-font-size));
    padding-bottom: calc(0.35 * var(--post-font-size));
}

#PostContent .TableContainer .ChartMenuRow
{
    border-radius: 4px 4px 0px 0px;
}

#PostContent .TableContainer .ChartMenuRow th
{
    border-radius: var(--chart-menu-row-border-radius) var(--chart-menu-row-border-radius) 0px 0px;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-top: var(--chart-menu-row-padding-top);
    padding-bottom: var(--chart-menu-row-padding-bottom);
}

#PostContent .TableContainer .ChartMenuRow th button svg
{
    width: var(--post-font-size);
    height: var(--post-font-size);
    margin-right: calc(var(--post-font-size) * 0.25);
    fill: var(--accent-colour);
}

#PostContent .TableContainer .ChartMenuRow th button:disabled svg
{
    fill: var(--chart-menu-button-text-colour-inactive);
}

#PostContent .TableContainer .ChartMenuRow th button:disabled:hover
{
    cursor: not-allowed;
}

#PostContent table tbody tr:hover td
{
    background-color: var(--table-row-hover-background-colour);
}

#PostContent table td p
{
    padding-top: 0px;
    padding-bottom: 0px;
}

#Editor
{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-right: 2px solid var(--anti-background-colour);
}

#EditingToolbar
{
    background-color: var(--editor-toolbar-background-colour);
    border: none;
    padding: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow-x: auto;
    justify-content: start;
    border-bottom: 1px solid var(--anti-background-colour);
}

#EditingToolbar button, #EditingTemplates button
{
    padding: 0px;
    padding-left: calc(var(--left-nav-logo-size) / 2);
    padding-right: calc(var(--left-nav-logo-size) / 2);
    padding-top: calc(0.5 * var(--editor-toolbar-button-height));
    padding-bottom: calc(0.5 * var(--editor-toolbar-button-height));
}

#EditingToolbar button, #EditingTemplates button .TemplateName
{
    display: block;
    font-size: var(--post-font-size);
    font-family: var(--post-font-family);
    color: var(--text-colour);
}

#EditingToolbar button, #EditingTemplates button:hover .TemplateName
{
    color: var(--accent-colour);
}

#EditingToolbar button:first-of-type, #EditingTemplates button:first-of-type
{
    padding-left: 0px;
}

#EditingToolbar button:last-of-type, #EditingTemplates button:last-of-type
{
    padding-right: 0px;
}

#EditingToolbar button svg, #EditingTemplates button svg
{
    fill: var(--constant-background-colour);
}

#EditingToolbar button svg
{
    width: var(--editor-toolbar-button-width);
    height: var(--editor-toolbar-button-height);
}

#EditingToolbar button:hover svg, #EditingTemplates button:hover svg
{
    fill: var(--accent-colour);
}

#EditingArea
{
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#EditingField
{
    flex-grow: 1;
    width: 100%;
    padding: 0px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    resize: none;
    font-size: calc(var(--post-font-size));
    font-family: var(--editing-field-font-family);
    line-height: var(--line-height);
    background-color: var(--editing-field-background-color);
    color: var(--text-colour);
    border: none;
    outline: none;
}

#EditingTemplates
{
    position: absolute;
    background-color: none;
    width: 100%;
    height: 100%;
    margin: auto;
    pointer-events: none;
}

#EditingTemplates.ButtonGroup
{
    margin: auto;
    align-items: center;
    justify-content: center;
}

#EditingTemplates button
{
    pointer-events: auto;
}

#EditingTemplates button svg
{
    width: var(--editor-templates-button-width);
    height: var(--editor-templates-button-height);
}

#EditingTemplates button svg path
{
    fill: var(--text-colour);
}

#EditingTemplates button:hover svg path
{
    fill: var(--accent-colour);
}

.SectionContent
{
    padding-top: var(--section-content-padding-top);
    padding-bottom: var(--section-content-padding-bottom);
    border-top: none;
    border-radius: 0px 0px 2px 2px;
    line-height: var(--line-height);
}

.PostSectionHeader:has(.PostH1) + .SectionContent
{
    padding-left: calc(2*var(--post-font-size));
    padding-right: calc(2*var(--post-font-size));
}

@media only screen and (max-width: 768px)
{
    #MainHeader, #PostContent, .SectionContent
    {
        padding-left: 5px;
        padding-right: 5px;
    }
}

#PostContent ul, #PostContent ol
{
    padding-inline-start: 0px;
    list-style: none;
    list-style-position: outside;
}

.SectionContent p
{
    margin-top: 0px;
    margin-bottom: 0px;
}

.SectionContent h2
{
    margin-top: var(--h2-margin-top);
    margin-bottom: var(--h2-margin-bottom);
    font-size: 115%;
    text-decoration: none;
    font-weight: normal;
    color: var(--accent-colour);
}

.SectionContent h2:first-child
{
    margin-top: calc(var(--h2-margin-top) - var(--section-content-padding-top));
}

.SectionContent h3
{
    margin-top: calc(var(--post-font-size));
    margin-bottom: calc(var(--post-font-size)/3);
    text-decoration: underline;
    text-underline-offset: 5px;
    font-weight: normal;
}

.SectionContent h4, .SectionContent h5
{
    font-weight: bold;
}

/* GRID LAYOUT */
#PostContent.Webpage[Layout="Grid"]
{
    width: var(--webpage-column-width);
}

#PostContent.Webpage[Layout="Grid"] > .PostSection > .SectionContent
{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    column-gap: calc(2 * var(--post-font-size));
}

#PostContent.Webpage[Layout="Grid"] > .PostSection > .SectionContent > .PostSection
{
    vertical-align: top;
    flex-grow: 0;
    min-width: calc(100% / 3 - (2 * var(--post-font-size)) * 2 / 3);
    max-width: calc(100% / 3 - (2 * var(--post-font-size)) * 2 / 3);
}
/* END OF GRID LAYOUT */

.SourceCodeBlock
{
    background-color: var(--post-section-background-colour);
    border: 1px solid var(--source-code-block-line-border-colour);
    margin-bottom: 20px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior: auto;
}

.CodeLine:first-child p, .CodeLine:first-child pre
{
    padding-top: calc(var(--post-font-size) * 1 / 2);
}

.CodeLine:last-child p, .CodeLine:last-child pre
{
    padding-bottom: calc(var(--post-font-size) * 1 / 2);
}

pre
{
    flex-grow: 1;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: calc(var(--post-font-size) * 1.5);
}

pre code
{
    counter-increment: listing;
    font-size: var(--post-font-size);
    display: inline-block;
    white-space: pre-wrap;
    padding-left: 10px;
    text-align: left;
}

.CodeBorder
{
    display: inline-block;
}

.CodeLeftBorder
{
    position: relative;
    padding-left: 22px;
    padding-right: 10px;
    border-right: 1px solid var(--source-code-block-line-border-colour);
    text-align: right;
    color: var(--source-code-block-line-text-colour);
    background-color: var(--source-code-left-column-background-colour);
}

pre code, .CodeLeftBorder
{
    font-family: monospace;
}

.CodeLine
{
    display: flex;
    position: relative;
    width: 100%;
    line-height: calc(var(--post-font-size) * 1.5);
}

.CodeLine:hover .CodeBorder
{
    font-weight: bold;
    color: var(--accent-colour);
}

.CodeLine:hover .CodeLeftBorder::after
{
    position: absolute;
    content: " ";
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid var(--text-colour);
    border-color: transparent var(--accent-colour) transparent transparent;
}

.CodeLine:hover .CodeLeftBorder, .CodeLine:hover pre
{
    background-color: var(--highlighted-code-line-background-colour);
}

.CodeLine p
{
    margin: 0px;
    text-indent: 0px;
}

.HeadingList
{
    margin: 0px;
    padding-left: 0px;
}

.PostSection
{
    position: relative;
    list-style: none;
}

.PostSection:first-child
{
    margin-top: 0px;
}

.PostSection > .SectionContent > .PostSection
{
    /* margin-top: calc(1.5 * var(--post-font-size)); */
    /* border: 1px solid var(--post-section-border-colour); */
    /* border: var(--post-section-border-width) solid var(--post-section-border-colour); */
    /* border-radius: var(--post-section-border-radius); */
    /* background-color: var(--post-section-background-colour); */
    /* box-shadow: 0px 0px 8px var(--post-section-border-colour); */
    border-top: 4px solid var(--accent-colour);
    margin-top: calc(var(--post-font-size) * 4);
    padding-top: calc(var(--post-font-size) * 4);
}

.PostSection > .SectionContent > .PostSection:first-child
{
    border-top: none;
    margin-top: 0px;
}

.InlineLogo
{
    display: inline-block;
    vertical-align: middle;
}

.PostSection .CollapseLogo
{
    display: none;
    margin: 0px;
    margin-left: calc(var(--post-font-size) * 1);
    margin-right: calc(var(--post-font-size) * 1);
    height: calc(var(--post-font-size));
    width: calc(var(--post-font-size));
    transition: transform 0.4s;
    transform: rotate(0deg);
}

.CollapseLogo:hover
{
    cursor: pointer;
}

.CollapseLogo.Collapsed
{
    transform: rotate(-90deg);
}

.PostSectionHeader .CollapseLogo svg path, .HeadingLogo svg path
{
    fill: var(--text-colour);
}

.PostSectionHeader
{
    display: flex;
    padding: 0px;
    background: none;
    outline: none;
    border: none;
    /* border-bottom: 1px solid var(--post-section-border-colour); */
    /* border-radius: var(--post-section-border-radius) var(--post-section-border-radius) 0px 0px; */
    color: var(--text-colour);
    width: 100%;
    text-align: left;
    /* background-color: var(--post-section-title-background-colour); */
}

.PostSectionTitle
{
    flex-grow: 1;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: calc(var(--post-font-size) * 3 / 4);
    padding-bottom: calc(var(--post-font-size) * 3 / 4);
    color: var(--text-colour);
    font-weight: normal;
    /* border-left: 6px solid var(--accent-colour); */
    /* border-radius: var(--post-section-border-radius) var(--post-section-border-radius) 0px 0px; */
}

.PostH1
{
    display: inline-block;
    margin: 0px;
    padding-left: calc(var(--post-font-size) * 2);
    vertical-align: middle;
    font-size: calc(1.25 * var(--post-font-size));
    font-weight: bold;
    font-family: var(--post-font-family), sans-serif;
    text-transform: uppercase;
}

.PostSection:first-child > .PostSectionHeader .PostH1
{
    margin-top: 0px;
}

#PostContent h1, #PostContent h2, #PostContent h3, #PostContent h4, #PostContent h5, #PostContent h6
{
    text-align: left;
}

#PostContent h3, #PostContent h4, #PostContent h5, #PostContent h6, #PostContent p, .CheckboxLine, .RadioButtonLine, code
{
    font-size: var(--post-font-size);
}

.RadioButtonBlock
{
    margin-bottom: var(--radiobutton-block-margin-bottom);
}

.CheckboxLine, .RadioButtonLine
{
    display: flex;
    flex-shrink: 0;
    line-height: var(--line-height);
}

.CheckboxLine input:hover, .CheckboxLine label:hover, .RadioButtonLine input:hover, .RadioButtonLine label:hover
{
    cursor: pointer;
}

.CheckboxLine label:hover, .RadioButtonLine label:hover
{
    text-decoration: underline;
}

.CheckboxLine label, .RadioButtonLine label
{
    transition: opacity 0.5s ease;
    flex-grow: 1;
}

.RadioButtonLine input, #PostContent li::before
{
    min-width: var(--bullet-list-size);
    width: var(--bullet-list-size);
    min-height: var(--bullet-list-size);
    height: var(--bullet-list-size);
    margin: calc((var(--line-height) - var(--bullet-list-size)) / 2);
    margin-left: calc(5*var(--bullet-list-size)/6);
    margin-right: calc(5*var(--bullet-list-size)/6);
    vertical-align: middle;
    appearance: none;
    content: "";
    border-width: var(--input-border-width);
    border-style: solid;
    transition: opacity 0.2s ease;
}

.RadioButtonLine input
{
    border-color: var(--radiobutton-border-colour);
}

#PostContent ul > li::before
{
    border-color: var(--bullet-list-border-colour);
}

#PostContent ol
{
    list-style-type: none;
    counter-reset: RV1_CustomCounter;
}

#PostContent ol > li
{
    counter-increment: RV1_CustomCounter;
}

#PostContent ol > li::before
{
    display: inline-block;
    font-family: "Ubuntu";
    content: counter(RV1_CustomCounter) " ";
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: var(--line-height);
    font-size: var(--post-font-size);
    min-width: var(--line-height);
    width: var(--line-height);
    max-width: var(--line-height);
    min-height: var(--line-height);
    height: var(--line-height);
    max-height: var(--line-height);
    background-color: var(--bullet-list-background-colour);
    color: var(--post-section-background-colour);
    border: none;
    text-indent: calc(var(--line-height) / 2 - var(--post-font-size) / 4);
}

#PostContent dt
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#PostContent dt::before
{
    content: "";
    min-width: 0px;
    width: 0px;
    max-width: var(--bullet-list-size);
    min-height: 0px;
    height: 0px;
    max-height: var(--bullet-list-size);
    border: calc(var(--bullet-list-size) / 2) solid transparent;
    border-left: calc(var(--bullet-list-size) / 1) solid var(--accent-colour);
    border-right: none;
    margin-left: calc(var(--bullet-list-size) * 5 / 6);
    margin-right: calc(var(--bullet-list-size) * 5 / 6);
}

#PostContent li
{
    padding-left: var(--post-section-list-padding-left);
    text-indent: calc(-1 * var(--post-section-list-padding-left));
}

#PostContent dt
{
    color: var(--accent-colour);
    font-weight: bold;
}

#PostContent dt:not(:first-child)
{
    margin-top: var(--post-font-size);
}

#PostContent dd
{
    margin-left: calc(16 * var(--bullet-list-size) / 6);
}

#PostContent ul > li::before
{
    vertical-align: top;
    padding: 0px;
    box-sizing: border-box;
    display: inline-block;
    min-width: var(--bullet-list-size);
    width: var(--bullet-list-size);
    max-width: var(--bullet-list-size);
    min-height: var(--bullet-list-size);
    height: var(--bullet-list-size);
    max-height: var(--bullet-list-size);
    background-color: var(--bullet-list-background-colour);
    border: none;
    margin-top: calc((var(--line-height) - var(--bullet-list-size)) / 2);
    margin-bottom: calc((var(--line-height) - var(--bullet-list-size)) / 2);
}

body.EditModeHighlightEnabled #PostContent p:hover,
body.EditModeHighlightEnabled #PostContent header:hover,
body.EditModeHighlightEnabled #PostContent h1:hover,
body.EditModeHighlightEnabled #PostContent h2:hover,
body.EditModeHighlightEnabled #PostContent h3:hover,
body.EditModeHighlightEnabled #PostContent h4:hover,
body.EditModeHighlightEnabled #PostContent h5:hover,
body.EditModeHighlightEnabled #PostContent h6:hover,
body.EditModeHighlightEnabled #PostContent .CheckboxLine:hover,
body.EditModeHighlightEnabled #PostContent .CheckboxLine label:hover,
body.EditModeHighlightEnabled #PostContent .RadioButtonLine:hover,
body.EditModeHighlightEnabled #PostContent dt:hover,
body.EditModeHighlightEnabled #PostContent dd:hover,
body.EditModeHighlightEnabled #PostContent li:hover,
body.EditModeHighlightEnabled #PostContent th:hover,
body.EditModeHighlightEnabled #PostContent td:hover,
body.EditModeHighlightEnabled #PostContent .CodeLine pre:hover,
body.EditModeHighlightEnabled #PostContent button:hover
{
    background-color: var(--accent-colour);
    color: var(--background-colour);
    cursor: pointer;
    animation: pulse-accent 1.5s infinite ease-in-out;
}

body.EditModeHighlightEnabled #PostContent *:hover > .InlinedCode
{
    border-color: var(--background-colour);
    color: var(--background-colour);
}

@keyframes pulse-accent {
    0% {
        opacity: color-mix(in srgb, 20% var(--accent-colour), 80% rgba(0, 0, 0, 0));
    }
    50% {
        opacity: color-mix(in srgb, 50% var(--accent-colour), 50% rgba(0, 0, 0, 0));
    }
    100% {
        opacity: color-mix(in srgb, 20% var(--accent-colour), 80% rgba(0, 0, 0, 0));
    }
}

.CheckboxLine input
{
    background-color: none;
    border: var(--input-border-width) solid var(--text-colour);
    border-radius: 2px;
    fill: none;
    appearance: none;
    font-size: var(--post-font-size);
    color: var(--text-colour);
    min-width: calc(var(--bullet-list-size));
    width: calc(var(--bullet-list-size));
    max-width: calc(var(--bullet-list-size));
    min-height: calc(var(--bullet-list-size));
    height: calc(var(--bullet-list-size));
    max-height: calc(var(--bullet-list-size));
    margin: calc((var(--line-height) - var(--post-font-size)) / 2);
    margin-left: calc(5 * var(--post-font-size) / 6);
    margin-right: calc(5 * var(--post-font-size) / 6);
}

.CheckboxLine input:checked
{
    background-color: var(--accent-colour);
}

.RadioButtonLine input:checked
{
    background: radial-gradient(var(--radiobutton-background-colour) 0%, var(--radiobutton-background-colour) 40%, transparent 50%, transparent);
}

.RadioButtonLine input, #PostContent li::before
{
    border-radius: 100%;
}

.InlinedCode
{
    font-family: "Courier";
    color: var(--accent-colour);
    background-color: var(--inlined-code-background-colour);
    border: 1px solid var(--inlined-code-border-colour);
    border-radius: calc(0.25 * var(--post-font-size));
    padding: calc(0.5 * var(--post-font-size));
    padding-top: calc(0 * var(--post-font-size));
    padding-bottom: calc(0 * var(--post-font-size));
    margin-right: calc(0.25 * var(--post-font-size));
    margin-left: calc(0.25 * var(--post-font-size));
}

.SourceCodeTools
{
    justify-content: flex-end;
    border: 1px solid var(--constant-anti-background-colour);
    border-bottom: none;
    border-radius: var(--source-code-tools-border-radius) var(--source-code-tools-border-radius) 0px 0px;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 20px;
    background-color: var(--constant-anti-background-colour);
}

.SourceCodeTools button label
{
    color: var(--constant-background-colour);
}

.SourceCodeTools button svg
{
    width: var(--source-code-tool-icon-width);
    height: var(--source-code-tool-icon-height);
}

#PostContent .SourceCodeTools figcaption
{
    font-size: var(--post-font-size);
}

.CopyButton
{
    background: none;
    border: none;
}

.CopyButton *
{
    display: inline-block;
    vertical-align: middle;
}

.CopyButtonImage
{
    width: var(--post-font-size);
    height: var(--post-font-size);
    margin-right: 5px;
}

.CopyButton:hover
{
    cursor: pointer;
}

.CopyButton:hover figcaption
{
    text-decoration: underline;
}

#ChartWindow
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--text-colour);
    border-radius: 5px;
    padding: 5px;
    color: var(--text-colour);
}

#ChartWindow .ButtonGroup
{
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background-color: inherit;
}

#QRCode
{
    margin: auto;
    width: 25vw;
    border: 4px solid var(--text-colour);
    border-radius: 0px 0px var(--post-font-size) var(--post-font-size);
}

#QRCodeHeader
{
    background-color: var(--text-colour);
    border-bottom: 4px solid var(--text-colour);
    padding-left: var(--post-font-size);
    padding-right: var(--post-font-size);
}

#QRCodeHeader h1
{
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    color: var(--background-colour);
    margin: 0px;
    overflow-x: hidden;
    font-weight: normal;
}

#QRCodeHeader, #QRCodeFooter
{
    text-align: center;
    font-family: var(--post-font-family);
    font-size: calc(1.5 * var(--post-font-size));
    padding-top: var(--post-font-size);
    padding-bottom: var(--post-font-size);
}

#QRCode img
{
    background-color: white;
    width: 100%;
    height: 25vw;
    padding: 16px;
    border-top: 4px solid var(--text-colour);
    border-bottom: 4px solid var(--text-colour);
}

#QRCodeFooter
{
    background-color: var(--accent-colour);
    color: var(--background-colour);
    border-top: 4px solid var(--accent-colour);
    border-radius: 0px 0px calc(var(--post-font-size) - 4px) calc(var(--post-font-size) - 4px);
    font-weight: bold;
}

/*************************
 * MULTI-VERSION SECTION *
 *************************/
.MultiVersionSection
{
    margin-top: var(--multi-version-section-margin-top);
    margin-bottom: var(--multi-version-section-margin-bottom);
}

.MultiVersionSectionMenu
{
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overscroll-behavior-y: auto;
}

.MultiVersionSectionMenuEntry
{
    padding: calc(var(--post-font-size) * 8 / 4);
    padding-top: calc(var(--post-font-size) * 5 / 4);
    padding-bottom: calc(var(--post-font-size) * 5 / 4);
    appearance: none;
    outline: none;
    font-family: var(--post-font-family);
    font-size: var(--post-font-size);
    border: 1px solid var(--multi-version-section-heading-border-colour);
    border-right: none;
    background-color: var(--multi-version-section-menu-background-colour);
    color: var(--multi-version-button-text-colour-inactive);
    text-wrap: nowrap;
}

.MultiVersionSectionMenuEntry:last-child
{
    border-right: 1px solid var(--multi-version-section-heading-border-colour);
}

.MultiVersionSectionMenuEntry.active
{
    background-color: var(--post-section-background-colour);
    color: var(--multi-section-menu-entry-active-text-colour);
    border-top: 4px solid var(--accent-colour);
    border-bottom: none;
}

.MultiVersionSectionMenuEntry.active:hover
{
    cursor: default;
}

.MultiVersionSectionMenuEntry:not(.active):hover
{
    background-color: var(--multi-version-section-menu-hovered-background-colour);
    color: var(--multi-version-button-text-colour-inactive-hovered);
    cursor: pointer;
}

.MultiVersionSectionEntries
{
    border: 1px solid var(--multi-version-section-entry-opening-border-colour);
    padding: calc(var(--post-font-size) * 2);
    margin-top: -1px;
    box-shadow: 0px 2px 2px var(--multi-version-section-entry-opening-border-colour);
}

#Tooltip
{
    position: absolute;
    font-size: 0px;
    display: flex;
    flex-flow: row;
    align-items: center;
    z-index: var(--tooltip-zindex);
}

#TooltipArrow
{
    display: inline-block;
    width: 0px;
    height: 0px;
    border: calc(0.4 * var(--post-font-size)) solid transparent;
    border-right: calc(0.4 * var(--post-font-size)) solid var(--text-colour);
    border-left: 0px solid transparent;
}

#TooltipLabel
{
    background-color: var(--text-colour);
    color: var(--central-content-background-colour);
    font-size: var(--post-font-size);
    border: 2px solid var(--text-colour);
    border-radius: 4px;
    padding: calc(0.2 * var(--post-font-size));
    padding-left: calc(0.6 * var(--post-font-size));
    padding-right: calc(0.6 * var(--post-font-size));
}

#Tooltip.DisplayFromBelow
{
    transform: translateX(-50%) translateY(0%);
    flex-flow: column;
}

#Tooltip.DisplayFromBelow #TooltipArrow
{
    border: calc(0.4 * var(--post-font-size)) solid transparent;
    border-bottom: calc(0.4 * var(--post-font-size)) solid var(--text-colour);
    border-top: 0px solid transparent;
}

#Tooltip.DisplayFromAbove
{
    transform: translateX(-50%) translateY(-100%);
    flex-flow: column-reverse;
}

#Tooltip.DisplayFromAbove #TooltipArrow
{
    border: calc(0.4 * var(--post-font-size)) solid transparent;
    border-top: calc(0.4 * var(--post-font-size)) solid var(--text-colour);
    border-bottom: 0px solid transparent;
}

#Tooltip.DisplayFromRight
{
    transform: translateY(-50%);
    flex-flow: row;
}

#Tooltip.DisplayFromRight #TooltipArrow
{
    border: calc(0.4 * var(--post-font-size)) solid transparent;
    border-right: calc(0.4 * var(--post-font-size)) solid var(--text-colour);
    border-left: 0px solid transparent;
}

#Tooltip.DisplayFromLeft
{
    transform: translateX(-100%) translateY(-50%);
    flex-flow: row-reverse;
}

#Tooltip.DisplayFromLeft #TooltipArrow
{
    border: calc(0.4 * var(--post-font-size)) solid transparent;
    border-left: calc(0.4 * var(--post-font-size)) solid var(--text-colour);
    border-right: 0px solid transparent;
}

.LinkToButton
{
    font-size: var(--post-font-size);
    font-family: var(--post-font-family);
    outline: none;
    border: 1px solid var(--accent-colour);
    position: relative;
    background-color: var(--accent-colour);
    padding: var(--linktobutton-padding);
    text-decoration: none;
    color: var(--background-colour);
    margin: 0 0px;
    border-radius: 2px;
    overflow: hidden;
}

.LinkToButton:hover
{
    background-color: color-mix(in srgb, 50% var(--accent-colour), var(--constant-background-colour));
}

.LinkToButton + .LinkToButton
{
    margin-left: var(--post-font-size);
}