/*
    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: #BBB;
    --lightLineColour: #888;
    --lighterLineColour: #AAA;
    --colour1: #E55050;
    --colour2: #732255;
    --colour3: #B2C6D5;
    --colour4: #E7F2E4;
    --colour5: rgb(234, 240, 250);
    --linkColour: #154360;
    --linkVisited: #154360;
    --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;
    width: 61.8%;
    margin: 0 auto;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    text-wrap: pretty;
    /* Only works in some browsers, but coming along */
    scroll-behavior: smooth;
}

@media (max-width: 1400px) {
    body {
        width: 80%;
    }
}

@media (max-width: 1100px) {
    body {
        width: 90%;
    }
}


/*--- 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;
}

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

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

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+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/newIndicator3.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 {
    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;
}

/* 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 {
    font-style: italic;
}

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

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::marker {
    font-size: 0.75em;
}

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

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

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

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: 11pt;
        text-transform: capitalize;
        position: absolute;
        left: -7em;
        background-color: red;
        color: white;
        padding: 0.5em;
        border-radius: 10px;
    }

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

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

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

    & nav.mainMenu {
        display: flex;
        gap: 1em;
        margin-bottom: 2em;
        font-family: var(--HeadingTypeface);
        font-weight: 400;
        font-size: var(--BaseSize);
        justify-content: space-between;
        padding-bottom: 0.5em;
        border-bottom: 1px solid black;

        & 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;
            position: relative;
            top: -2px;
            cursor: pointer;
        }

        & div:last-child {
            flex-wrap: wrap;
        }

        & img {
            height: 1em;
            position: relative;
            top: 2.5px;

            &.settingsIcon {
                top: 3px;
            }
        }

        & div {
            display: flex;
            align-items: baseline;
            gap: 1em;

            & .menuItem {
                display: flex;
                align-items: baseline;
                gap: 0.5em;

                & a {
                    & img {
                        margin-right: 0.25em;
                    }

                    word-break: keep-all;
                }

                & .displayName {
                    font-weight: 500;

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

    & 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: 900px) {
    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: scroll;
}

/*--- 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 thead tr th:nth-child(4) {
    text-align: right;
    min-width: clamp(6em, 8em, 10em);
}

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

table.threads {

    & span.boardIndicator {
        margin-right: 1em;
        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;
    }
}

table.threads img {
    padding-right: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: 2.5px;
    min-width: 1.5em;
}

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

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

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

    & div.title {

        display: flex;
        align-items: center;

        & 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;
    color: #555;
}

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

    & 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(--HeadingTypeface);
    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 {
    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: 5em;
        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;
    }
}

.disappear {
    animation: disappear 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;
    visibility: hidden;
    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;
    }

    & 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.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');
            }

            &: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;
}

.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: 16pt;
            width: 12em;
            margin-left: 0.5em;
        }
    }
}

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(--colour4);
        padding: 2em;
        margin-bottom: 1em;

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

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


/* 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;
    }
}

section.searchPage {

    font-family: var(--HeadingTypeface);
    font-size: 14pt;
    font-weight: 500;

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

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

    & 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 {
    width: 100%;
    height: 300px;

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

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

/* Data Tables */

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