/*
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400 or 600;

    font-family: "palatino-linotype", sans-serif;
    font-weight: 400 or 700;

    font-family: "helvetica-neue-lt-pro";
    font-weight: 300, 400 or 500, 700;

    font-family: "univers-next-pro", sans-serif;
    font-weight: 300, 400 or 500;
    font-style: normal;
*/

:root {
    --TextTypeface: "adobe-garamond-pro", "Garamond", serif;
    --PostTypeface: "palatino-linotype", "Palatino", serif;
    --HeadingTypeface: "helvetica-neue-lt-pro", "Helvetica", sans-serif;
    --TableTypeface: "univers-next-pro", "Helvetica", sans-serif;
    --highlightColour: oklch(0.7921 0 0);
    --lightLineColour: oklch(0.6268 0 0);
    --lighterLineColour: oklch(0.738 0 0);
    --colour1: oklch(0.6347 0.1852 24.05);
    --colour2: oklch(0.6347 0.127 234.48);
    --colour2Light: oklch(0.9347 0.027 234.48);
    --colour3: oklch(0.8161 0.0304 240.27);
    --colour3Lighter: oklch(0.9385 0.0228 241.89);
    --colour4: oklch(0.9491 0.0219 138.98);
    --colour5: oklch(0.9535 0.0149 260.73);
    --linkColour: oklch(0.6347 0.127 234.48);
    --linkVisited: oklch(0.55 0.11 240.82);
    --linkVisitedLight: oklch(70.932% 0.07636 236.505);
    --BaseSize: 14pt;
    --borderRadius: 6px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--HeadingTypeface);
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
    hanging-punctuation: first;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    text-wrap: pretty;
    /* Only works in some browsers, but coming along */
    scroll-behavior: smooth;

    &.Mode2 {
        div.metadata {
            position: sticky;
            bottom: 1em;
        }
    }

    &.Mode3 {
        header {
            position: static;
        }

        div.metadata {
            position: sticky;
            bottom: 1em;
            top: 1em;
        }
    }

}

header {
    padding-left: 19.1%;
    padding-right: 19.1%;
}

main {
    padding-left: 19.1%;
    padding-right: 19.1%;
}

footer {
    margin-left: 19.1%;
    margin-right: 19.1%;
}

/*--- Spacing ---*/

p+p {
    margin-top: 0.5em;
}

p+h1 {
    margin-top: 1em;
}

h1+p {
    margin-top: 0.5em;
}

p+h2 {
    margin-top: 1em;
}

h2+p {
    margin-top: 0.5em;
}

p+h3 {
    margin-top: 1em;
}

h3+p {
    margin-top: 0.5em;
}

h1+h2 {
    margin-top: 0.75em;
}

h2+h3 {
    margin-top: 0.75em;
}

h3+h2 {
    margin-top: 0.25em;
}

h4+small {
    margin-top: 0.5em;
}

table+* {
    margin-top: 1em;
}

span.time {
    white-space: nowrap;
}

section.posting,
section.bookmarkButtons {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(10ch, 25ch) minmax(30ch, 66ch);
    column-gap: 1em;
}

div.bookmarkButtons {
    margin-top: 1.5em;
    margin-left: 0.5em;
    min-height: 4em;
    display: flex;
    flex-direction: row-reverse;
}

section.editor {
    & p {
        text-align: left;
    }

    & li {
        text-align: left;
    }
}

section+section.editorContainer {
    margin-top: 2em;
}

section.bookmarkButtons+section.posting {
    margin-top: 0;
}

.editorContainer {
    & div.postingAs {
        margin-top: 0.5em;
        margin-left: 0.2em;
        margin-bottom: 0.5em;
        color: var(--lightLineColour);

        & span.name {
            font-weight: 500;
        }
    }
}

section.threadPage .editorContainer {
    margin-left: 0.5em;
}

#editor {
    height: 100%;
    min-height: 8em;
    display: flex;
    flex-direction: column;
}

section.newThreads {
    img[src="/Images/icons/newIndicator.svg"] {
        display: none;
    }
}

section.threadPage #editor {
    min-height: 8em;
}

section.newThreadPage #editor {
    min-height: 20em;
}

#editor .ql-container {
    flex: 1;
    overflow-y: auto;
}


#editor .ql-toolbar {
    max-width: 100%;
}


*+section.controlPanel {
    margin-top: 0.5em;
}

*+section.controlPanel button {
    margin-right: 0;
}

/*--- Basic tags ---*/

footer {
    margin-top: 8em;
    border-top: 1px solid black;
    padding-top: 0.5em;
    display: flex;
    justify-content: flex-end;
}

footer p {
    font-family: var(--HeadingTypeface);
}

h1,
h2,
h3,
h4 {
    font-family: var(--HeadingTypeface);
    font-weight: 700;
    letter-spacing: -0.03em;
}

h1+table,
h2+table {
    margin-top: 1em;
}

h3+table {
    margin-top: 0.5em;
}

h1 {
    font-size: 30pt;
}

h2 {
    font-size: 21pt;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 16pt;
    letter-spacing: -0.01em;
}

h4 {
    font-size: 14pt;
    letter-spacing: 0.01em;
}


/* div.body added in here, as old messages aren't formatted correctly, so essentially apply
   the <p> style to the whole message as a default. */

div.message div.body,
p,
ul,
ol,
blockquote {
    font-family: var(--PostTypeface);
    font-variant-numeric: oldstyle-nums;
    line-height: 1.25em;
    font-size: var(--BaseSize);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    /* not standard, but works well */
}

*+blockquote,
blockquote+* {
    margin-top: 0.5em;
    margin-left: 0;
    margin-right: 0;
}

blockquote {
    font-style: italic;
    margin-left: 1.5em;
    margin-right: 1.5em;
}

/* Add bookMode class to div.messages tag if you want 'book-style' paragraphs */

div.messages.bookMode div.body p+p,
div.example.postDisplayMode.bookMode p+p {
    text-indent: 1em;
    margin-top: 0;
}

/* The above will wipe out the gap above a paragraph preceded by a list, so reinstate that */

div.messages {
    & div.body {

        & *+ul,
        *+ol,
        ul+*,
        ol+* {
            margin-top: 0.75em;
        }
    }
}


blockquote+blockquote {
    margin-top: 0.5em;
}

p .smallcaps {
    text-transform: lowercase;
    font-variant: small-caps;
    font-size: calc(var(--BaseSize) * 1.15);
    letter-spacing: 0.0em;
}

ul,
ol {
    margin-left: 2em;

    & li {
        text-align: left;

        & * {
            text-align: left;
        }
    }
}

li+li {
    margin-top: 0.5em;
}

li::marker {
    font-size: 0.75em;
}

ol li::marker {
    font-size: 1em;
    font-variant-numeric: oldstyle-nums;
}

a {
    color: var(--linkVisited);
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;

    &:visited {
        color: var(--linkVisited);
    }
}

div.messages {
    & a {
        color: var(--linkColour);
    }
}

button.titania,
a.titania {
    display: flex;
    gap: 0.75em;
    align-items: center;
    justify-content: space-around;
    font-family: var(--TableTypeface);
    font-weight: 500;
    max-width: 18em;
    min-height: 2em;
    padding: 0.75em;
    padding-left: 2em;
    padding-right: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    font-size: 11pt;
    background-color: #F7F7F7;
    color: black;
    outline: none;
    box-shadow: none;
    border: 1px solid #DDD;
    border-radius: var(--borderRadius);

    &:focus {
        outline: 1px solid var(--highlightColour);
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    &.flushRight {
        margin-right: 0;
        margin-left: 1.5em;
        word-break: keep-all;
    }

    &:not(:disabled):hover {
        transition: 0.25s;
        background-color: #FCFCFC;
        cursor: pointer;
        text-decoration: none;
        box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
    }

    &:not(:disabled):active {
        transition: 0.15s;
        transform: translate(1.5px, 1.5px);
        box-shadow: none;
    }

    & div.shortcutKey {
        font-weight: 400;
    }

    & img {
        max-width: 2.5em;
        max-height: 1.5em;
    }

    & div {
        display: flex;
        flex-direction: column;
    }
}

header {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0px;
    z-index: 1000;
    background: white;
    padding-top: 2em;
    padding-bottom: 1em;

    & span.warning {
        font-weight: 500;
        font-size: 8pt;
        text-transform: uppercase;
        /* position: absolute; */
        background-color: red;
        color: white;
        padding: 0.5em;
        border-radius: 10px;
    }

    & h2.threadName {
        a {
            color: black;
        }
    }

    & h3.boardName {
        font-size: 16pt;
        text-transform: uppercase;
        margin: 0;
    }

    & .bookmarkButtons {
        display: flex;
        flex-direction: row-reverse;
        margin-left: 2em;
    }

    & nav.mainMenu {
        display: flex;
        gap: 2em;
        margin-bottom: 2em;
        font-family: var(--HeadingTypeface);
        font-weight: 400;
        font-size: var(--BaseSize);
        justify-content: space-between;
        align-items: center;
        row-gap: 0.5em;
        padding-bottom: 0.5em;
        border-bottom: 1px solid black;
        /* Extra to account for the bookmark alert's size */
        min-height: calc(1.5em + 9px);

        & div {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            row-gap: 0.5em;
            align-items: center;

            & .menuItem {
                display: flex;

                & a {
                    word-break: keep-all;
                    display: inline-flex;
                    gap: 0.5em;
                    align-items: center;
                }

                & .displayName {
                    font-weight: 500;

                    & .role {
                        font-weight: 400;
                    }
                }

                & a.history {
                    & img {
                        position: relative;
                        top: 1px;
                    }
                }
            }
        }

        & div.placeholder {
            position: relative;

            & div.alert {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--colour1);
                width: 27px;
                height: 27px;
                border-radius: 27px;
                color: white;
                font-size: 10pt;
                cursor: pointer;
            }
        }

        & div.activeUsers {
            gap: 0.5em;
            margin-right: 0.5em;
        }

        & img {
            height: 1em;
        }

        & div.breadcrumbs {
            flex-wrap: nowrap;
            margin: 0;
            gap: 0.5em;

            & a {
                white-space: nowrap;
            }
        }
    }

    & nav.contextMenu {
        display: flex;
        justify-content: space-between;
        align-items: center;

        & div.boardAndThreadName {
            flex: 2;
        }

        & div.bookmarkButtons {
            flex: 1;
        }
    }
}

section.heading+section.content {
    margin-top: 2em;
}

section.content {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 61.8fr 38.2fr;
    gap: 0em 2em;
}

@media (max-width: 1400px) {
    section.content {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    span.role {
        display: none;
    }
}

@media (max-width: 800px) {
    a.recentActivity span {
        display: none;
    }
}

/* Only one column on the thread page */

section.threadPage {
    grid-template-columns: 1fr;
}


section.content.boardsPage {
    grid-template-columns: 1fr;

    & table {
        table-layout: fixed;

        /* Board Name */
        & colgroup col:nth-child(1) {
            width: 20%;
        }

        /* Description */
        & colgroup col:nth-child(2) {
            width: 50%;
        }

        /* Access */
        & colgroup col:nth-child(3) {
            width: 15%;
        }

        /* Creation Date */
        & colgroup col:nth-child(4) {
            width: 15%;
        }
    }
}

/*--- Generic Table ---*/

table {
    line-height: 1.25em;
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
    font-family: var(--TableTypeface);
    font-weight: 400;
    font-size: var(--BaseSize);
    cursor: default;
}

table thead th {
    /* This is what's meaning the central piece is pushing its way out of its container */
    white-space: nowrap;
    font-weight: 500;
}

@media (max-width: 1200px) {
    table thead th {
        white-space: normal;
    }

    span.warning {
        display: none;
    }
}

@media (max-width: 1400px) {
    nav.mainMenu {
        & div.menuItem.displayName {
            display: none;

            & span.displayName {
                display: none;
            }
        }
    }
}

table tbody td {
    font-weight: 400;
}


table img {
    height: 1em;
}

table td,
table th {
    padding-top: 0.1em;
    padding-bottom: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    vertical-align: baseline;
}

table td:first-child,
table th:first-child {
    padding-left: 0;
}

table td:last-child,
table th:last-child {
    padding-right: 0;
}

table tbody tr:first-child td {
    padding-top: 0.5em;
}

table thead th,
table {
    border-bottom: 1px solid var(--lightLineColour);
}

table tbody tr:last-child td {
    padding-bottom: 0.5em;
}

table .selected {
    background-color: var(--colour3);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] {
    font-family: var(--TableTypeface);
    font-size: var(--BaseSize);
    background-color: var(--colour4);
    padding: 0.5em;
    border: none;
    outline: none;
    box-shadow: none;
}

input:focus {
    outline: 1px solid var(--highlightColour);
    outline-offset: 0;
}

pre,
code {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variant-ligatures: contextual common-ligatures;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 12pt;
    overflow-x: auto;
}

/*--- Board List Page ---*/

table.boards thead tr th:first-child {
    text-align: right;
}

table.boards tbody tr td {
    vertical-align: middle;
}

table.boards thead tr th:nth-child(2) {
    text-align: left;
}

table.boards tbody tr td:first-child {
    text-align: right;
    font-weight: 500;
    min-width: 12em;
}

table.boards thead tr th:nth-child(3) {
    text-align: center;
}

table.boards thead tr th:nth-child(3) {
    text-align: center;
}

table.boards tbody tr td:nth-child(3) {
    text-align: center;
    padding: 0;
}

table.boards tbody tr td:nth-child(2) {
    width: 10%;
    overflow-wrap: anywhere;
}

table.boards tbody tr td:nth-child(4),
table.boards thead tr th:nth-child(4) {
    text-align: right;
    min-width: clamp(6em, 8em, 10em);
}

/*--- Thread List Page ---*/

table.threads {

    & span.boardIndicator {
        background-color: #c8e1f4;
        color: black;
        font-family: var(--HeadingTypeface);
        font-size: 8pt;
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        border-radius: 4px;
        line-height: normal;
        text-align: center;
    }

    & div.authorAndCreationDate {
        font-size: 11pt;
        color: gray;
    }
}

table.threads div.nameAndDate {
    width: clamp(5em, 8em, 10em);

    & .displayName {
        overflow-x: auto;
    }
}

table.threads {

    & div.newPosts {
        font-size: 11pt;
    }
}

table.threads div.nameAndDate,
table.threads div.titleAndLastUpdated {
    hanging-punctuation: initial;
    display: flex;
    flex-direction: column;

    & span.newPosts {
        color: var(--colour1);
        font-weight: 500;
    }

    & div.title {

        display: flex;
        align-items: center;
        gap: 0.5em;

        & span.pollIndicator {
            font-family: var(--TableTypeface);
            font-weight: 500;
            font-size: 10pt;
            color: white;
            background-color: black;
            padding: 0.25em;
            padding-left: 0.5em;
            padding-right: 0.5em;
            border-radius: 4px;
            margin-right: 1em;

            &.complete {
                background-color: var(--colour1);
            }
        }

    }

    & div.date {
        line-height: 1.2em;
        margin-top: 0.5em;
    }

    & div.messageCount {
        margin-top: 0.25em;

        &.unanswered {
            color: black;
        }
    }
}

table.threads div.date,
table.threads div.messageCount {
    font-size: 11pt;
    color: gray;
    font-variant-numeric: normal;
}

table.threads .firstMessage {
    font-size: 12pt;
    color: black;
    font-family: var(--PostTypeface);
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    word-break: break-word;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: anywhere;
    padding-bottom: 0.5em;
    line-height: 1.25em;
    text-align: left;
    max-width: 66ch;
}

table.threads td {
    vertical-align: middle;
    border-bottom: 1px solid #E5E5E5;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

table.threads thead tr th:nth-child(1) {
    text-align: left;
}

table.threads thead tr th:nth-child(2),
table.threads tbody tr td:nth-child(2) {
    text-align: right;
}

/*--- Individual Thread Page ---*/

section.heading {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.25em;
}

section.heading .subtitle {
    text-transform: uppercase;
}

section.messages {

    & .pageLinks {
        display: grid;
        align-items: start;
        grid-template-columns: minmax(10ch, 25ch) minmax(30ch, 66ch);
        column-gap: 1em;

        & .nextPageLink {
            margin-bottom: 1em;
            margin-top: 2em;
        }

        & .previousPageLink {
            margin-top: 2em;
            margin-bottom: 1em;
        }

        & .pageLink {
            margin-left: 1.75rem;
            font-weight: 500;

            &:hover {
                text-decoration: none;
            }
        }
    }
}

div.messages {
    display: flex;
    flex-direction: column;
    gap: 1em;

    & div.timeElapsedContainer {

        display: grid;
        align-items: center;
        grid-template-columns: minmax(10ch, 25ch) minmax(30ch, 66ch);
        column-gap: 1em;

        & div.timeElapsed {
            display: flex;
            justify-content: center;
            font-family: var(--TextTypeface);
            font-style: italic;
            font-size: 14pt;
            margin-top: 1em;
            margin-bottom: 1em;

            & span.lineLeft {
                margin-right: 1em;
                color: #AAA;
            }

            & span.lineRight {
                margin-left: 1em;
                color: #AAA;
            }
        }
    }

}

div.messages .message {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(10ch, 25ch) minmax(30ch, 66ch);
    word-break: break-word;
    column-gap: 1em;
    cursor: default;

    & h1 {
        line-height: normal;
        text-align: left;
        font-size: 24pt;
    }

    & h2 {
        /* margin-top: 0.25em; */
        line-height: normal;
        text-align: left;
        font-size: 18pt;
    }

    & em.muted {
        color: lightgray;
    }

    & div.displayName {
        overflow: hidden;
    }

}

div.messages .message>* {
    min-width: 0;
}

div.messages .message .metadata {
    grid-column: 1;
}

div.messages .message .body {
    grid-column: 2;
    position: relative;
}

div.messages .body {
    padding-left: 1em;
    margin-left: 0.5rem;
    border-left: 1px solid var(--lighterLineColour);
    word-break: break-word;
    min-width: 0;
}

section.messages div.messages .creationDate {
    font-size: 10pt;
    font-weight: 300;
    color: var(--lightLineColour);
}

section.messages div.messages .body a {
    font-family: var(--PostTypeface);
    font-weight: 500;
}

section.messages div.messages div.metadata {
    font-family: var(--HeadingTypeface);
    font-size: 14pt;
    font-weight: 500;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    align-self: center;
    /* Retained for implementing display modes */
    /* position: sticky;
    bottom: 1em;
    top: 1em; */
}

section.messages img {
    display: flex;
    margin: 0 auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    max-height: 40vh;
    max-width: 100%;
}

div.interstitial {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(10ch, 25ch) minmax(30ch, 66ch);
    column-gap: 1em;
    margin-left: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;

    & p {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        margin-left: 0.5em;
        text-align: center;
        font-family: var(--HeadingTypeface);
        font-weight: 500;
        background-color: var(--colour5);
        padding: 0.25em;
    }

    & a {
        font-family: var(--HeadingTypeface);
        font-size: 14pt;
        font-weight: 500;
        margin-top: 1em;
        margin-bottom: 1em;
    }
}


section.controlPanel {
    display: flex;
    justify-content: flex-end;

    & button+button {
        margin-left: 1em;
    }
}


/*--- Login Page ---*/

section.loginPage {
    display: flex;
    gap: 1em;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    margin: auto;

    & section.login {
        display: grid;
        align-items: center;
        font-family: var(--TableTypeface);
        font-size: var(--BaseSize);
        grid-template-columns: 14ch 30ch;
        gap: 1em;
        border-top: 1em solid var(--colour1);
        border-radius: 6px;
        background-color: var(--colour4);
        padding: 3em;
        padding-left: 3.5em;
        padding-right: 3.5em;

        & label {
            text-align: right;
            font-weight: 400;
        }

        & div.submitDialog {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 1em;

            & div.rememberMeDialog {
                display: flex;
                align-items: baseline;
                gap: 0.5em;
            }
        }

        & input {
            background-color: white;
            border-radius: 6px;
        }
    }
}

& div.error {
    background-color: var(--colour1);
    border-radius: 6px;
    padding: 1em;
    color: white;
    font-family: var(--TableTypeface);
    font-weight: bold;

    &.invisible {
        visibility: hidden;
    }
}


section.notRegistered p {
    font-family: var(--TableTypeface);
}

.blackBorder {
    border: 4px solid black;
}

/* Animation */

@keyframes bounce-in {
    0% {
        transform: translateY(var(--initial-translate));
        opacity: 0;
    }

    20% {
        transform: translateY(-24px);
        opacity: 1;
    }

    40% {
        transform: translateY(12px);
    }

    60% {
        transform: translateY(-6px);
    }

    80% {
        transform: translateY(4px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Inside the editor — this needs to be here because of specificity, but it's
   a copy of what's above to make editing text look like it is when it's
   posted. */

.ql-container {
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
}

.ql-toolbar {
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
}

div.ql-editor {

    & p+p {
        margin-top: 0.5em;
    }

    & p+h1 {
        margin-top: 1em;
    }

    & h1+p {
        margin-top: 0.5em;
    }

    & p+h2 {
        margin-top: 1em;
    }

    & h2+p {
        margin-top: 0.5em;
    }

    & p+h3 {
        margin-top: 1em;
    }

    & h3+p {
        margin-top: 0.5em;
    }

    & h1+h2 {
        margin-top: 0.75em;
    }

    & h2+h3 {
        margin-top: 0.75em;
    }

    & h3+h2 {
        margin-top: 0.75em;
    }

    & table+* {
        margin-top: 1em;
    }

    & p+ul,
    p+ol {
        margin-top: 0.5em;
    }

    *+blockquote,
    blockquote+* {
        margin: 1em;
        margin-left: 0;
        margin-right: 0;
    }

    blockquote+blockquote {
        margin-top: 0.5em;
    }

}

/* New Thread Page */

body.newThreadPage {

    & section.content {
        grid-template-columns: auto;
    }

    & .newThreadForm {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 6fr;
        gap: 0.5em 1em;

        & label {
            text-align: right;
        }

        & input {
            font-family: var(--TableTypeface);
            font-size: var(--BaseSize);
            background-color: var(--colour4);
            padding: 0.5em;
            border: none;
            outline: none;
            box-shadow: none;
        }

        & label {
            font-family: var(--TableTypeface);
            font-weight: 500;
        }

        & input[type=text] {
            background-color: var(--colour5);
            width: 100%;
            border-radius: 8px;
        }

        & div.postingAs {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.5em;
            margin-left: 0.2em;
            color: var(--lightLineColour);

            & span.name {
                font-weight: 500;
                margin-left: 0.5em;
            }
        }
    }

    & button.titania {
        padding: 0.75em;
        padding-left: 2em;
        padding-right: 2em;
    }

    & section+section {
        margin-top: 1em;
    }

    & section+section.controlPanel {
        margin-top: 0.5em;
    }
}

div.errorMessage {
    font-family: var(--TableTypeface);
    font-weight: 500;
    padding-left: 0;
    color: var(--colour1);
    margin-top: 0.25em;
    margin-bottom: 0.25em;

    display: flex;
    gap: 1em;
    align-items: center;

    & img {
        width: 1.5em;
    }
}


.button-6 {
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--TableTypeface);
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 3rem;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: auto;
}

.button-6:hover,
.button-6:focus {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    color: rgba(0, 0, 0, 0.65);
}

.button-6:hover {
    transform: translateY(-1px);
}

.button-6:active {
    background-color: #F0F0F1;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
    color: rgba(0, 0, 0, 0.65);
    transform: translateY(0);
}

/* Last read indicator. Hidden by default — will be shown with Javascript. */

div.lastReadIndicator {

    display: none;
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translate(100%, -22px);
    /* Adjustment to get the pointer of the SVG lined up with the middle of what it's pointing at */
    pointer-events: none;

    & img {
        width: 4em;
    }

    & div {
        position: relative;
        font-family: var(--HeadingTypeface);
        font-weight: 500;
        text-align: left;
        width: 7em;
        padding: 1em;
        padding-left: 0;
        background-color: white;
        left: 6em;
        top: -3em;
    }
}




/* Animate Button Icons */
@keyframes bounce-icon {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

button img.bounceIn,
span.bounceIn {
    display: inline-block;
    animation: bounce-icon 400ms ease-out;
    transform-origin: center;
}

@keyframes disappear {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes disappear2 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

.disappear {
    animation: disappear 300ms ease-out forwards;
}

.disappear2 {
    animation: disappear2 300ms ease-out forwards;
}

/* Bookmarks */

*+section.bookmarksList {
    margin-top: 1em;
}


/* Entire viewport transparent thing to take a click event and dismiss the popup */

div.bookmarksOverlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9;
}

section.bookmarksList {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    top: 1em;
    max-width: 50vw;
    max-height: 70vh;
    overflow-y: auto;
    width: max-content;
    right: 0em;
    background-color: white;
    padding: 2em;
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #DDD;
    border-radius: 8px;
    z-index: 10;
    font-family: var(--TableTypeface);
    margin-bottom: 1em;
    font-size: 12pt;
    font-variant-numeric: normal;

    & h3 {
        color: black;
        font-size: 12pt;
        font-family: var(--TableTypeface);
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    & hr {
        width: 100%;
        margin: 0 auto;
        border: none;
        margin-top: 0.25em;
        margin-bottom: 0.25em;
        border-top: 1px solid #DDD;
        display: none;
    }

    & a {
        font-family: var(--TableTypeface);
        line-height: 1.25em;
        font-variant-numeric: normal;
        text-align: left;
        color: var(--linkColour);
    }

    & span.numberOfNewPosts {
        color: black;
    }
}

/* Debug */

div.messageId {
    background-color: #9999EE;
    color: white;
    padding: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-family: var(--TableTypeface);
    font-weight: 500;
    font-variant: normal;
    font-size: 10pt;
    margin-bottom: 0.5em;
    display: flex;
    margin-top: 0.5em;
    align-self: flex-end;
    width: fit-content;
    border-radius: 3px;
}

/* Error Page */

main.errorPage {

    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

    & img {
        width: 90vw;
        height: 90vh;
        object-fit: contain;
    }

}

a.lastReadMessageURL {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-family: var(--HeadingTypeface);
    font-size: 14pt;
}

/* Emojis */

div.emojis {
    display: flex;
    margin-top: 0.5em;
    margin-left: 1.5em;
    margin-bottom: 0.5em;
    gap: 0.25em;

    & span.numberOfUsers {
        position: relative;
        top: 1.75em;
        right: -2em;
        font-size: 8pt;
    }

    & span.icon {
        cursor: default;
    }

}


& span.icon {
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;

    &[data-emoji-id="0"] {
        background-image: url('/Images/icons/emojis/thumbsUp.svg');
    }

    &[data-emoji-id="1"] {
        background-image: url('/Images/icons/emojis/laugh.svg');
    }

    &[data-emoji-id="2"] {
        background-image: url('/Images/icons/emojis/love.svg');
    }

    &[data-emoji-id="3"] {
        background-image: url('/Images/icons/emojis/sad.svg');
    }

    &[data-emoji-id="4"] {
        background-image: url('/Images/icons/emojis/cry.svg');
    }

    &[data-emoji-id="5"] {
        background-image: url('/Images/icons/emojis/confused.svg');
    }

    &[data-emoji-id="6"] {
        background-image: url('/Images/icons/emojis/eyebrowRaised.svg');
    }

    &[data-emoji-id="7"] {
        background-image: url('/Images/icons/emojis/scared.svg');
    }

    &[data-emoji-id="8"] {
        background-image: url('/Images/icons/emojis/wow.svg');
    }
}

& div.postMetadata {
    display: flex;
    justify-content: flex-start;

    & div.postCreationDate {
        font-size: 16px;
        font-weight: 400;
        color: var(--linkVisited);
    }
}

div.postMenu {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    margin-left: 0.5rem;
    max-height: 0;
    overflow: hidden;
    padding: 0em 1em;
    transition: max-height 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        padding 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        margin 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    &+div.postMenu {
        margin-top: 0;
    }

    &.expanded {
        background-color: #FAFAFA;
        max-height: 6.5em;
        padding: 1em 1em;
        border-left: 1px solid #AAA;
        margin-top: 1em;
    }

    &.emojiContainer {
        background-color: #e8f4fd;

        & div.menuButton.selected {
            background: radial-gradient(circle, rgba(255, 200, 0, 0.5) 0%, transparent 80%);
        }
    }

    /* Permalinks */

    & div.menuButton {
        display: block;
        transform-origin: center center;
        will-change: transform;

        & a.menuButton {
            display: inline-flex;
            align-items: center;

            &:hover {
                cursor: pointer;
            }

            & .linkIcon {
                background-image: url('/Images/icons/link.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.5em;
            }

            & .favouriteIcon {
                background-image: url('/Images/icons/favourite.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.5em;
            }

            &.favourited .favouriteIcon {
                background-image: url('/Images/icons/favourite-red.svg');
            }

            & .muteIcon {
                background-image: url('/Images/icons/mute.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.5em;
            }

            &.muted .muteIcon {
                background-image: url('/Images/icons/mute-red.svg');
            }

            &:hover {
                text-decoration: none;
            }

            & img {
                display: inline;
                max-width: 1em;
                margin-right: 0.5em;
            }
        }
    }
}

@keyframes bounceElement {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes bounceElementLight {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.025);
    }

    60% {
        transform: scale(0.975);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes bounceElementHeavy {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.15);
    }

    50% {
        transform: scale(1.3);
    }

    75% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}


.bounceElement {
    animation: bounceElement 300ms ease-in-out;
}

.bounceElementThreeTimes {
    animation: bounceElement 300ms ease-in-out;
    animation-iteration-count: 3;
}

.bounceElementLight {
    animation: bounceElementLight 300ms ease-in-out;
}

.bounceElementHeavy {
    animation: bounceElementHeavy 300ms ease-out;
    animation-iteration-count: 2;
    animation-delay: 1s;
}

div.pollResults {
    width: 100%;
    height: 600px;
    background-color: #f6f6f6;
    border-radius: 10px;
    margin-top: 0.5em;
    padding: 0 2em;
}

div.pollResultsTable {
    margin-bottom: 2em;
    margin-left: 8em;
    margin-right: 8em;
    display: flex;
    justify-content: center;

    & table {

        width: fit-content;
        border-bottom: none;

        & th {
            padding: 0.25em;

            &:first-child {
                padding-left: clamp(1em, 2em, 8em);
                padding-right: 1em;
                text-align: right;
            }

            &:last-child {
                padding-right: clamp(1em, 2em, 8em);
                padding-left: 1em;
                text-align: center;
            }

        }

        & td:first-child {
            padding-left: clamp(1em, 2em, 8em);
            padding-right: 1em;
            text-align: right;
            vertical-align: middle;
        }

        & td:last-child {
            padding-right: clamp(1em, 2em, 8em);
            padding-left: 1em;
            text-align: center;
            vertical-align: middle;
        }
    }
}

iframe {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

section.pollEditor {

    & p.maxOptionsMessage {
        margin-left: 0.5em;
        font-family: var(--TableTypeface);
        margin-bottom: 0.5em;
        font-size: 12pt;
    }

    & div.pollItem {
        display: flex;
        align-items: center;
        gap: 1em;
    }

    & div.pollItem+div.pollItem {
        margin-top: 0.25em;
    }

    & button {
        margin: 0;
    }

    & div.closingDate {
        margin-left: 0.5em;
        display: flex;
        align-items: center;
        margin-bottom: 0.5em;
        margin-top: 0.5em;

        & select {
            font-size: 12pt;
            width: 12em;
            margin-left: 0.5em;
            padding: 0.25em;
        }
    }
}

section.options {

    margin-top: 1em;
    width: 100%;

    & h3 {
        margin-bottom: 0.5em;
    }

    & section.displayOptions {

        display: grid;
        align-items: center;
        font-family: var(--TableTypeface);
        font-size: var(--BaseSize);
        grid-template-columns: 3fr 2fr;
        gap: 1em;
        border-radius: 6px;
        background-color: var(--colour3Lighter);
        padding: 2em;
        margin-bottom: 1em;

        &.postDisplayMode {
            grid-template-columns: 2fr 3fr;

            & select {
                font-size: 16pt;
                width: 8em;
            }
        }

        @media (max-width: 1400px) {
            grid-template-columns: 1fr;
        }

        & div.header {
            display: flex;
            flex-direction: column;
            gap: 0.25em;
            grid-column: 1 / -1;
        }

        & div.option {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5em;

            & label {
                text-align: right;
                font-weight: 400;
                font-size: 12pt;
                font-family: var(--TableTypeface);
                font-weight: 400;
            }

            & input[type=text] {
                font-variant-numeric: oldstyle-nums;
                font-family: var(--TableTypeface);

                &.error {
                    background-color: pink;
                }

                background-color: white;
                border-radius: 6px;
            }
        }

        & input[type=checkbox] {
            transform: scale(1.5);
            margin-left: 6px;
        }

        & section.example {
            padding-left: 1em;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            border-left: 1px solid gray;
            font-family: var(--PostTypeface);

            @media (max-width: 1400px) {
                border-left: none;
            }

            & h4 {
                font-size: 12pt;
                font-family: var(--TableTypeface);
                font-weight: 400;
                margin-bottom: 0.5em;
                margin-left: 4px;
            }

            & div.example {
                border-radius: 8px;
                background-color: white;
                padding: 0.5em;

                & p {
                    font-family: var(--TableTypeface);
                    text-align: left;
                }
            }

            & div.postDisplayMode.example p {
                font-family: var(--PostTypeface);
                font-size: 12pt;
            }
        }
    }
}


/* Check box and radio button stylings */

label-titania {
    display: block;
    line-height: 30px;
}

.option-titania {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.15s ease-out 0s;
    background: white;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 1rem;
    outline: none;
    position: relative;
    border-radius: 3px;
}

/* .option-titania:hover {
    background: #fae9a7;
} */

.option-titania:checked {
    background: white;
}

.option-titania:checked::before {
    width: 20px;
    height: 20px;
    display: flex;
    content: '✓';
    color: black;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    align-items: center;
    justify-content: center;
}

input[type=radio].option-titania:checked::before {
    color: rbga(0, 0, 0, 0.6);
    content: '●';
    position: relative;
    top: -0.5px;
}

.option-titania:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: #40e0d0;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
}

.option-titania.radio {
    border-radius: 50%;
}

.option-titania.radio::after {
    border-radius: 50%;
}

@keyframes click-wave {
    0% {
        height: 20px;
        width: 20px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 60px;
        width: 60px;
        margin-left: -20px;
        margin-top: -20px;
        opacity: 0;
    }
}

a.search {
    position: relative;
    top: 1.5px;
}

span.threadIcons {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5em;
    gap: 0.5em;

    & img {
        width: 1em;
    }
}

body.searchPage,
body.bookmarksPage,
body.favouritesPage,
body.settingsPage,
body.historyPage,
body.chronologicalPage,
body.monthViewPage {

    & .subHeader {
        display: flex;
        align-items: center;
        margin-bottom: 0.5em;

        & img {
            display: inline;
            height: 28px;
            margin-right: 0.75em;
        }
    }
}

body.monthViewPage {

    & div.noThreadsMessage {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2.5em;
        font-size: 14pt;
        font-weight: 500;
        font-family: var(--HeadingTypeface);
    }

    & .subHeader {
        & img {
            display: inline;
            height: 60px;
            margin-right: 0.75em;
        }
    }

    & section.threadsByDay {
        & h3 {
            margin-top: 1.5em;
            margin-bottom: 1em;
        }

        & section.pageControl+h3 {
            margin-top: 1em;
            margin-bottom: 0.5em;
        }

        & section.pageControl {
            display: flex;
            background-color: var(--colour3);
            padding: 0.5em;
            justify-content: space-between;
            margin-top: 3em;

            & a {
                display: inline-flex;
                margin-right: 1em;
                font-weight: bold;
                color: white;
                font-size: 14pt;
            }
        }

        & div.thread {
            display: grid;
            grid-template-columns: 1fr 2fr;
            align-items: center;
            gap: 1.5em;
            margin-bottom: 1em;

            & div.threadInfo {
                display: flex;
                flex-direction: column;
                gap: 0.25em;
                justify-content: center;
                padding-right: 1em;
                border-right: 1px solid #999;
                height: 100%;
                padding-top: 0.5em;
                padding-bottom: 0.5em;
            }

            & div.threadInfo * {
                justify-content: flex-end;
                text-align: right;
            }

            & a {
                line-height: 1.2em;
                font-size: 14pt;
                font-family: var(--HeadingTypeface);
                font-weight: 500;
                color: #555;
            }

            & span.author {
                font-size: 12pt;
                color: #6C6C6C;

                & span.username {
                    font-weight: 400;
                }
            }

            & span.firstMessage {
                font-family: var(--PostTypeface);
                font-variant-numeric: oldstyle-nums;
                font-size: 12pt;
                max-width: 66ch;
                color: #555;

                & .smallcaps {
                    font-variant: small-caps;
                }
            }
        }
    }
}


body.chronologicalPage {

    & section+h3 {
        margin-top: 1.5em;
    }

    & h3+section {
        margin-top: 1em;
    }

    & section#threadsOverTime {
        height: 400px;
        width: 100%;
    }

    & .subHeader {
        & img {
            display: inline;
            height: 60px;
            margin-right: 0.75em;
        }
    }

    & section.years {
        display: grid;
        grid-template-columns: repeat(13, auto);
        gap: 0.25em;
        font-weight: 800;
        width: fit-content;
        margin-top: 1.5em;

        & .yearCell,
        .monthCell {
            color: white;
            -webkit-user-drag: none;

            & span:last-child {
                font-weight: 100;
                font-size: 9pt;
                color: var(--colour2Light);
            }

            display: flex;
            gap: 0.25em;
            flex-direction: column;
            width: 4em;
            justify-content: center;
            align-items: center;
            aspect-ratio: 1 / 1;
            background: var(--colour2);
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        & .monthCell {
            font-weight: 400;
        }

        & div.yearCell {
            background: var(--colour1);
        }

        & .monthCell:hover {
            background: var(--colour2Light);
            color: black;
            transition: 0.3s;

            & span:last-child {
                color: #777;
            }
        }
    }
}

section.searchPage {
    font-family: var(--HeadingTypeface);
    font-size: 14pt;
    font-weight: 500;

    & section.errorMessage {
        display: none;
        gap: 0.5em;
        align-items: center;
        grid-template-columns: 4em minmax(auto, 20em) min-content;
        margin-top: 0.5em;

        & div.errorMessage {
            background-color: white;
            color: black;
            padding: 1em;
            padding-left: 0;
            padding-right: 0;
        }
    }

    & select.boardList {
        font-size: 12pt;
        padding: 0.25em;
        width: fit-content;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: 0.25em;
    }

    & section.search {
        display: grid;
        gap: 0.5em;
        align-items: center;
        grid-template-columns: 8em minmax(auto, 20em) min-content;

        & label {
            margin-right: 0.5em;
            text-align: right;
            font-size: 12pt;
            font-weight: 500;
        }

        & input[type=search] {
            border-radius: 8px;
        }
    }

    & section.searchOptions {
        display: grid;
        grid-template-columns: 8em auto;
        gap: 0.5em;
        margin-top: 1em;

        & div.option {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-align: right;
            font-size: 12pt;
            font-weight: 400;
        }

    }
}

& section.results {
    margin-top: 2em;

    & table {
        width: 100%;
        /* or any explicit width */

        &.threadSearchResults {

            & div.creationDate,
            div.lastUpdated {
                font-size: 10pt;
            }

            & span.createdBy {
                font-weight: 500;
            }
        }


        &.messageSearchResults {

            border-collapse: separate;
            border-spacing: 0 0.5em;

            & tr td:first-child,
            tr th:first-child {
                width: 6em;
                text-align: center;
            }

            & tr td:nth-child(2) {
                width: auto;
            }

            & tr td:nth-child(3) {
                width: 6em;
            }

            & div.postedBy {
                margin-top: 0.15em;
                font-family: var(--TableTypeface);
                font-size: 10pt;

                & strong {
                    font-weight: 500;
                }

                & span.creationDate {
                    text-transform: lowercase;
                }
            }
        }

        & th {
            text-align: left;
        }

        & td {
            text-align: left;
            vertical-align: middle;
        }

        small {
            word-break: break-word;
            overflow-wrap: anywhere;
            font-size: 10pt;
            font-family: var(--PostTypeface);
            margin-top: 0.5em;
            display: flex;
        }
    }

    & section.nextPreviousLinks {
        display: flex;
        align-items: baseline;
        gap: 1em;
    }

    & section.searchingFor {
        margin-bottom: 1em;
        font-weight: normal;

        & span.searchType {
            text-transform: lowercase;
        }
    }

    & h3 {
        margin-top: 2em;
    }
}


& section.timeline {

    margin-top: 2em;

    & .vis-timeline {
        border: none;
    }

    & .vis-panel {
        &.vis-center {
            border-bottom-style: none;
            border-top-color: #DDD;
            /* background-color: rgb(255, 255, 235); */
        }
    }

    & .vis-item {

        & a {
            color: white;
        }

        border-color: white;
        background-color: #DB6F00;
        color: white;
        font-size: 10pt;
        font-family: var(--HeadingTypeface);
        padding: 0.25em;
    }

    & .vis-text {
        padding-left: 1em;
    }
}

section.threadActivity {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;

    & p {
        font-family: var(--TableTypeface);
    }
}

h3.threadActivityCaption {
    text-transform: uppercase;
    font-size: 14pt;
    margin-left: 1.5em;
    letter-spacing: 0;
}

section.topPosters {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3em;
    min-height: 700px;

    & span {
        margin-bottom: 1em;
    }
}

section.topPosters:empty {
    height: 0;
    margin-top: 0;
    /* optional: also remove the gap */
}

section.favourites,
section.bookmarks {
    margin-top: 1em;
}

/* Data Tables */

table#bookmarksTable {
    margin-top: 1.5em;

    & div.dt-column-header {
        text-align: left;
    }
}

div.dt-column-header:hover {
    cursor: pointer;
}

div.dt-search {
    background-color: #EEE;
    padding: 0.5em;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    margin-bottom: 1em;
    border-radius: 8px;

    & label+input {
        margin-left: 1em;
    }

    & label {
        margin-left: 1em;
    }

    & input[type=search] {
        padding: 0.25em;
        background-color: white;
        border-radius: 8px;
    }
}

div.dt-layout-row {
    margin-top: 0.5em;
}


@keyframes menuBounce {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    60% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.menuBounce {
    animation: menuBounce 250ms ease-out;
}

@keyframes menuDismiss {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    60% {
        transform: scale(0.4);
        opacity: 1;
    }

    100% {
        transform: scale(0);
    }
}

.menuDismiss {
    animation: menuDismiss 100ms ease-out forwards;
}


.radio-titania {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.5rem;
    background-color: #EEE;
    box-sizing: border-box;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
    padding: 0.25rem;
    font-size: 14px;
    font-family: var(--HeadingTypeface);
    letter-spacing: 0.02em;
    font-weight: 500;
}

.radio-titania label {
    flex: 1 1 auto;
    text-align: center;
    width: 6em;
}

.radio-titania label input {
    display: none;
}

.radio-titania label .name {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    padding: .5rem 0;
    color: rgba(51, 65, 85, 1);
    min-height: 4em;
    transition: all .25s ease-in-out;
}

.radio-titania label input:checked+.name {
    background-color: var(--colour3);
    font-weight: 600;
}


section.displayChartOptions,
section.displayModeOptions {
    display: flex;
    flex-direction: column;
    gap: 1em;
    border-radius: 6px;
    background-color: var(--colour3Lighter);
    padding: 2em 2.5em;
    margin-bottom: 1em;

    h4 {
        margin-bottom: 0.5em;
    }

    span.explanation {
        margin-top: 0.5em;
        display: inline-block;
    }

    p {
        font-family: var(--TableTypeface);
        font-size: 11pt;
        font-variant-numeric: normal;
        text-align: left;
    }

    section.pollChartType,
    section.displayModeType {

        display: flex;
        align-items: center;
        gap: 2em 1.5em;

        label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1em;
            text-align: center;
            line-height: 1.2em;

            span {
                font-family: var(--HeadingTypeface);
                font-weight: 500;
                display: inline-block;
            }
        }

        .radio-hidden {
            display: none;
        }

        .radio-img {
            display: inline-block;
            width: 80px;
            height: 80px;
            background-size: cover;
            cursor: pointer;
            padding: 0.5em 1em;
            border-radius: 0.5em;
        }

        .radio-hidden:checked+.radio-img {
            background-color: white;
        }

        .radio-img:hover {
            background-color: white;
            transition: 0.25s
        }

        input[type="radio"]:checked+label .radio-img {
            outline: 3px solid black;
            outline-style: dotted;
        }
    }
}

.toastify {
    display: flex;
    align-items: center;
    position: fixed;
    left: 2em;
    max-width: 40vw;
    padding: 1.5em 1.25em;
    background: var(--colour3Lighter);
    color: black;
    font-family: var(--TableTypeface);
    line-height: 1.5em;
    border-radius: 6px;
    font-size: 1rem;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
    outline: 4px solid white;
    opacity: 0.95;
    z-index: 9999;

    & div.notification {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 10em;
        gap: 0.5em;

        &.horizontal {
            display: block;
        }

        & div.username {
            font-weight: 500;
        }

        & span.icon {
            background-size: 72px 72px;
            width: 72px;
            height: 72px;
        }

        & a {
            hanging-punctuation: initial;
            word-break: break-word;
        }

    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.toastify.toastify-fadeout {
    animation: fadeOut 0.5s ease forwards;
}

body.favouritesPage {

    & table {
        & img {
            position: relative;
            top: 2px;
        }
    }

}


body.bookmarksPage {

    & div+h2 {
        margin-top: 1.5em;
    }

    & h2 {
        margin-bottom: 0.5em;
    }

    & span.instructions {
        display: inline-flex;
        font-size: 14pt;
        margin-bottom: 1em;
    }

    & table {
        word-break: break-word;
        font-size: 13pt;

        & th:first-child,
        td:first-child {
            text-align: center;
            width: 3%;

            & img {
                position: relative;
                top: 2px;
            }
        }

        & th:nth-child(2),
        td:nth-child(2) {
            text-align: left;
            width: 50%;
        }

        & th:nth-child(3),
        td:nth-child(3) {
            text-align: left;
            width: 20%;
        }

        & th:nth-child(4),
        td:nth-child(4) {
            text-align: left;
            width: 15%;
        }

        & th:nth-child(5),
        td:nth-child(4) {
            text-align: left;
            width: 10%;
        }
    }

    & section.updateAllBookmarksSection {
        display: flex;
        gap: 1em;
        align-items: center;
        margin-bottom: 1.5em;
    }
}

/* Tabs */

.tab-wrap {
    transition: 0.3s box-shadow ease;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: #FAFAFA;
    margin: 40px 0;
}

.tab {
    display: none;
}

.tab:checked:nth-of-type(1)~.tab__content:nth-of-type(1) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(2)~.tab__content:nth-of-type(2) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(3)~.tab__content:nth-of-type(3) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(4)~.tab__content:nth-of-type(4) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(5)~.tab__content:nth-of-type(5) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:first-of-type:not(:last-of-type)+label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tab:not(:first-of-type):not(:last-of-type)+label {
    border-radius: 0;
}

.tab:last-of-type:not(:first-of-type)+label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tab:checked+label {
    background-color: #FAFAFA;
    cursor: default;
    border-bottom: 0;
    font-weight: 500;
}

.tab+label {
    /* box-shadow: 0 -1px 0 #eee inset; */
    cursor: pointer;
    display: block;
    text-decoration: none;
    flex-grow: 3;
    text-align: center;
    background-color: #f2f2f2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px;
}

.tab+label:hover {
    background-color: var(--colour2Light);
}

.tab__content {
    padding: 2em;
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: -1;
    opacity: 0;
    left: 0;
    transform: translateY(-3px);
    border-top: 0;
}

div.tooltip {
    padding: 1em;
    background-color: rgb(255, 246, 212);
    font-family: var(--TableTypeface);
    max-width: 25vw;
    min-width: 15ch;
    border-radius: 1em;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.1);

    & h1 {
        letter-spacing: 0em;
        font-size: 12pt;
        font-weight: 500;
        margin-bottom: 0.5em;
        width: 100%;
        border-bottom: 1px solid black;
        padding-bottom: 0.25em;
        margin-bottom: 0.75em;
    }

    & em {
        font-style: italic;
    }

    & p {
        letter-spacing: 0em;
        line-height: 1.5em;
        font-size: 12pt;
        font-weight: normal;
        font-family: var(--HeadingTypeface);
        text-align: left;
        margin: 0;
        padding: 0;
        box-shadow: unset;
    }

    & p+p {
        margin-top: 0.5em;
    }
}

section.threadMetadata {

    display: flex;
    justify-self: flex-start;
    width: 100%;

    & table {
        border: 0;
        width: 50%;

        & tbody {
            border: 0;

            & tr td:first-child {
                text-align: right;
            }
        }
    }
}

/* Media Queries / Responsiveness */

@media (max-width: 1500px) {
    header {
        padding-left: 15%;
        padding-right: 15%;
    }

    main {
        padding-left: 15%;
        padding-right: 15%;
    }

    footer {
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media (max-width: 1400px) {
    header {
        padding-left: 10%;
        padding-right: 10%;
    }

    main {
        padding-left: 10%;
        padding-right: 10%;
    }

    footer {
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media (max-width: 1100px) {

    header {
        padding-left: 5%;
        padding-right: 5%;
    }

    main {
        padding-left: 5%;
        padding-right: 5%;
    }

    footer {
        margin-left: 5%;
        margin-right: 5%;
    }

    div.breadcrumbs {
        & span {
            display: none;
        }
    }
}

@media (max-width: 900px) {

    /* Widen the editor dialog to take all the space available */

    & section.posting>div {
        display: none;
    }

    & section.posting {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    div.menuItem {
        & a {
            & span {
                display: none;
            }
        }
    }

    table.boards {
        table-layout: auto;
        width: 100%;

        & colgroup {
            & col:nth-child(3) {
                display: none;
            }

            & col:nth-child(4) {
                display: none;
            }
        }

        & thead th:nth-child(3),
        tbody td:nth-child(3) {
            display: none;
        }

        & thead th:nth-child(4),
        tbody td:nth-child(4) {
            display: none;
        }
    }
}

div.mutedUsers {
    & div.mutedUser {
        display: grid;
        grid-template-columns: 14em max-content;
        align-items: center;
        gap: 1em;

        & span.username {
            font-size: 14pt;
        }
    }
}

img.headingIcon {
    width: 96px;
    height: 96px;
}

body.historyPage {

    & section.historicPosts {
        & a {
            display: flex;
            align-items: center;
            gap: 1em;
            font-size: 16pt;
        }
    }

    font-family: var(--HeadingTypeface);

    & *+h3 {
        margin-top: 1em;
    }

    & h3+* {
        margin-top: 1em;
    }

    & ul {
        font-family: var(--HeadingTypeface);
        line-height: 1.5em;
    }

    & ul ul {
        list-style-type: disc;
    }

    & li+ul {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
}