/*
grey1: #888
grey2: #ccc
grey3: #dadaea
input background: fff

highlight:  ddd473      // ffbb22
red: 		d43846
dark grey: 	d0d0e0
light grey: e0e0ed
row1:		dadaed      // 60abd8
row2:		d0d0e0      // 84bcda
white:		eeeeee >> ececf5
black		232323

green:      #45d438

link visited (blue): #369
shadow grey: 888888

box-shadow: 0 0 3px 0 #888;


*/

:root {
    --border-radius: 0.25rem;
    --colour-dark: #666666;
    --colour-darker: #232323;
    --colour-light: #9f9f9f;
    --colour-lighter: #ececf5;
    --colour-lighter-alpha: #ececf5ee;
    --colour-link-active: #ddd473;
    --colour-medium: #bbb;
    --colour-primary: #d43846;
    --colour-secondary: #369;
    --colour-tertiary: #58b; /* d0d0e0 */
    --colour-shadow: #888;
    --colour-zebra-even: #dadaed;
    --colour-zebra-odd: #d0d0e0;
    --colour-border-light: #d0d0e0;
    --max-site-width: 1200px;
    --spacing-extra-small: 0.25rem;
    --spacing-large: 2rem;
    --spacing-medium: 1rem;
    --spacing-small: 0.5rem;
}

html {
    box-sizing: border-box;
    font-size: calc(1em + 0.9vw);
    height: 100%;
}


@media only screen and (min-width: 800px) {
    html {
        font-size: 16px;
    }
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    /*line-height: 1 rem;*/
    background-color: var(--colour-light); /* #ccc; */
    color: var(--colour-darker);
    font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
    font-weight: 300;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* tailwindcss ****************************************************************/

.hidden {
    display: none !important;
}

/* generic ********************************************************************/

a {
    color: var(--colour-primary);
    text-decoration: none;
}

/* 300: visited title, 400: new title */
a:visited {
    color: var(--colour-secondary);
    font-weight: 300;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*a:focus*/
a:active {
    background-color: var(--colour-link-active);
}

/* form */

.button,
.button:visited,
.button:hover {
    background-color: #d0d0e0;
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    color: #eee;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    margin: 0;
    outline: 0;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    user-select: none;
}

.button:active {
    box-shadow: 0 0 1px 0 var(--colour-shadow);
}

.button:hover {
    background-color: #dedede;
}

.button.active {
    background-color: #6a6a6a;
}

.button.primary {
    background-color: var(--colour-primary);
    padding: var(--spacing-small) var(--spacing-medium);
}

.button.secondary {
    background-color: #60abd8;
    padding: var(--spacing-small) var(--spacing-medium);
}

.button.alert {
    background-color: var(--colour-primary);
}

.button:disabled,
.button.disabled:active {
    background-color: #fbfbfb;
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    color: #bfbfbf;
    cursor: default;
}

/*.button.disabled:active {*/
/*    box-shadow: 0 0 3px 0 var(--colour-shadow);*/
/*}*/

.button:disabled svg {
    stroke: #bfbfbf;
}

.loading {
    /* make sure to overwrite :hover etc */
    cursor: wait !important;
    position: relative;
}

.loading::before {
    animation: spin 1s infinite linear;
    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cdefs%3e%3clinearGradient id='gradient'%3e%3cstop offset='0%25' stop-color='%23888'/%3e%3cstop offset='100%25' stop-color='%23888' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath d='M50 10 A40 40 0 1 0 90 50' stroke='url(%23gradient)' stroke-width='5' fill='none'/%3e%3c/svg%3e ");
    content: "";
    height: 1em;
    left: 0.25em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    width: 1rem;
}

.button-download-images {
    position: relative;
}

.button-download-images.loading::before {
    left: 50%;
    margin-left: -0.5rem;
}

.button-download-images.loading .download-images {
    visibility: hidden;
}

.button-download-images:disabled::after {
    display: none;
}

.button-download-images::after {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--colour-primary);
    border-radius: 50%;
    color: var(--colour-lighter);
    content: attr(data-image-count);
    display: inline-flex;
    font-size: 60%;
    justify-content: center;
    padding: 0 var(--spacing-extra-small);
    position: absolute;
    right: -33%;
    top: -33%;
}

@media only screen and (min-width: 800px) {
    .button-download-images::after {
        right: -25%;
        top: -25%;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.input {
    background: #fff;
    border-radius: var(--border-radius);
    border: 1px solid #d0d0e0;
    color: var(--colour-darker);
    font-size: 1em;
    margin: 0 0 calc(var(--spacing-medium) + var(--spacing-extra-small)) 0;
    /*min-width: 20vw;*/
    outline: 0;
    padding: 0.25rem 0.5rem;
}

.input:invalid {
    border-bottom: var(--spacing-extra-small) solid var(--colour-primary);
    margin-bottom: var(--spacing-medium);
}

fieldset {
    border: 1px solid #888;
    border-radius: var(--border-radius);
}

label.required {
    font-weight: bold;
}

label span {
    display: inline-block;
    min-width: 10em;
}

textarea {
    font-size: 1em;
    resize: vertical;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--spacing-medium) 0;
}

hr {
    background: linear-gradient(90deg, #888 0%, #888 70%, #eee 100%);
    border: 0;
    color: #888;
    height: 1px;
    margin: var(--spacing-medium) 0;
}

dd {
    margin-bottom: var(--spacing-medium);
}

dt {
    display: inline-block;
    float: left;
    margin-bottom: var(--spacing-medium);
    min-width: 20vw;
}

p {
    margin: var(--spacing-medium) 0;
}

p:last-of-type {
    margin-bottom: 0;
}

ol,
ul {
    padding-left: var(--spacing-medium);
}

/* grid layout ****************************************************************/

.site-wrapper {
    display: grid;
    grid-template-rows: min-content var(--spacing-large) auto min-content;
    height: 100vh;
    width: 100vw;
}

.grid-main {
    display: flex;
    justify-content: center;
}

.grid-content {
    max-width: var(--max-site-width);
    padding: 0 var(--spacing-medium);
    width: 100%;
}

.main .grid-content {
    display: grid;
    padding: var(--spacing-medium) 0;
    gap: var(--spacing-medium);
}

/* search box on top */
.grid-item:nth-child(3) {
    grid-row: 1/2;
}

@media screen and (min-width: 800px) {
    .main .grid-content {
        grid-template-columns: 3fr 1fr;
        padding: var(--spacing-medium);
    }

    .grid-item:first-child {
        grid-row-end: span 10;
    }

    /* reset search box */
    .grid-item:nth-child(3) {
        grid-row: initial;
    }
}

/*
.grid > .header {
    background-color: var(--colour-lighter);
    display: flex;
    grid-area: header;
    justify-content: center;
}

.grid > .top-bar {
    background-color: var(--colour-darker);
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    display: flex;
    grid-area: top-bar;
    justify-content: center;
}

.grid > .fill-left {
    grid-area: fill-left;
}

.grid > .main {
    grid-area: main;
}

.grid > .aside {
    grid-area: aside;
}

.grid > .fill-right {
    grid-area: fill-right;
}

.grid > .footer {
    grid-area: footer;
}

.grid {
    display: grid;
    grid-template-areas:
    "header"
    "top-bar"
    "main"
    "aside"
    "footer";
}

@media (min-width: 800px) {
    .grid {
        grid-template-columns: 5fr 2fr;
        grid-template-areas:
      "header    header  header  header"
      "top-bar   top-bar top-bar top-bar"
      "fill-left main    aside   fill-right"
      "footer    footer  footer  footer";
    }

    .grid > .main {
        justify-self: end;
    }

    .grid > .aside {
        justify-self: start;
        padding-top: var(--spacing-medium);
    }
}
*/
/******************************************************************************/

.logo svg {
    fill: var(--colour-primary);
    filter: drop-shadow(0px 1px 1px #888);
    height: auto;
}

.arrow-up {
    display: inline-block;
    margin-left: 0.25rem;
    transform: rotate(90deg);
}

.icon-svg {
    height: auto;
    width: 1rem;
}

/* section entry **************************************************************/

.section-entry {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
}

.section-entry .button.primary {
    margin-top: var(--spacing-medium);
    width: 100%;
}

.section-entry .soft-break::after {
    content: '\A';
    white-space: pre;
}

.section-entry .page-cookie-consent {
    background-color: var(--colour-lighter); /*  #e0e0ed; */
    padding: var(--spacing-medium);
}

.section-entry .page-cookie-consent h1,
.section-entry .page-cookie-consent h2 {
    margin-top: var(--spacing-medium);
}


@media screen and (min-width: 500px) {
    .section-entry .soft-break::after {
        content: '';
        white-space: initial;
    }
}

@media screen and (min-width: 800px) {
    .page-cookie-consent {
        border-radius: var(--border-radius);
        box-shadow: 0 0 3px 0 var(--colour-shadow);
        margin: var(--spacing-medium) auto;
        max-width: 800px;
    }

    .section-entry .button.primary {
        width: auto;
    }
}

/* menu ***********************************************************************/

.header {
    background-color: var(--colour-lighter);
}

.top-menu {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-medium);
    /*width: 100%;*/ /*   BNOW */

}

.top-menu-logo svg {
    max-width: 500px;
    width: 100%;
}

.top-menu-links {
    margin-top: var(--spacing-medium);
    text-align: left;
}

.top-menu-links ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-menu-links .new-item::before {
    /* ✹ ☆ ★ */
    content: "new";
    background-color: var(--colour-primary);
    color: var(--colour-lighter);
    font-weight: 700;
    /*padding: 0 0.5rem;*/
    padding: 0 var(--spacing-medium) 0.2rem;
    border-radius: 50px;
    /*border-radius: var(--border-radius);*/
    text-decoration: none;
}

@media only screen and (min-width: 600px) {
    .top-menu {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        max-width: var(--max-site-width);
    }

    .top-menu-links {
        margin: 0;
        text-align: right;
    }

    .top-menu-logo svg {
        width: 55vw;
    }
}

@media only screen and (min-width: 800px) {
    .top-menu-logo svg {
        width: 30vw;
    }
}

/* section overview ***********************************************************/

.top-bar {
    background-color: var(--colour-darker);
}

.top-bar .grid-content {
    align-items: center;
    color: var(--colour-lighter);
    display: flex;
    height: 2rem;
    justify-content: space-between;
    max-width: var(--max-site-width);
    padding: 0 var(--spacing-medium);
    width: 100%;
}

.top-bar .grid-content .topics-to-show {
    display: none;
}

@media screen and (min-width: 200px){
    .top-bar .grid-content .topics-to-show {
        align-items: center;
        display: flex;
        flex-direction: row;
    }
}

.top-bar .grid-content .topics-to-show select {
    height: 1rem;
    margin-left: var(--spacing-extra-small);
}

.top-bar .grid-content .top-menu-last-moderated {
    display: none;
}

.top-bar .grid-content .top-menu-last-moderated-short {
    display: none;
}

@media only screen and (min-width: 540px) {
    .top-bar .grid-content .top-menu-last-moderated-short {
        display: inline;
    }
}

@media only screen and (min-width: 800px) {
    .top-bar .grid-content .top-menu-last-moderated {
        display: inline;
        margin-right: 0.25rem;
    }

    .top-bar .grid-content .top-menu-last-moderated-short {
        display: none;
    }
}

/* content ********************************************************************/

.posts-overview-table {
    border-collapse: collapse;
    border-spacing: 0;
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    table-layout: fixed;
}

.posts-overview-table-footer,
.posts-overview-table-header {
    background-color: var(--colour-darker);
    color: var(--colour-lighter);
}

.posts-overview-table .posts-overview-table-row:hover,
.posts-overview-table .posts-overview-table-child-row:hover {
    background-color: var(--colour-lighter);
}

.posts-overview-table .posts-name-heading {
    width: 11rem;
}

.posts-overview-table .posts-replies-heading {
    width: 10vw;
}

.posts-overview-table .posts-date-heading,
.posts-overview-table .post-date {
    text-align: right;
    width: 150px;
}

.posts-overview-table-footer-cell {
    height: 2rem;
    line-height: 2rem;
    padding: 0 var(--spacing-medium);
    text-align: right;
}

.posts-overview-table-footer .table-footer-links {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.posts-overview-table-footer .table-footer-links li {
    margin-left: var(--spacing-small);
    white-space: nowrap;
}

.posts-overview-table-footer .table-footer-links .to-top {
    display: none;
}

.posts-overview-table-footer .table-footer-links a {
    color: var(--colour-primary);
}

@media screen and (min-width: 300px){
    .posts-overview-table-footer .table-footer-links .to-top {
        display: initial;
    }
}

.posts-overview-table-footer .table-footer-links .next-previous {
    display: none;
}

.posts-overview-table .striping-odd {
    background-color: var(--colour-zebra-odd);
}

.posts-overview-table .striping-even {
    background-color: var(--colour-zebra-even);
}

.posts-overview-table-cell {
    height: 2rem;
    line-height: 2rem;
    max-width: 100vw;
    overflow: hidden;
    padding: 0 var(--spacing-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posts-overview-table-cell.post-subject {
    width: 100%;
}

.posts-overview-table-cell.post-subject .svg-emoji {
    height: auto;
    width: 0.8em;
}

/*
.posts-overview-table-cell.post-subject a:link {
    font-weight: 400;
}

.posts-overview-table-cell.post-subject a:visited {
    font-weight: 300;
}
*/

.posts-overview-table-cell .posts-subject-prefix {
    display: inline-block;
    float: left;
    height: 2rem;
    line-height: 2rem;
    margin-right: 0.25rem;
}

.posts-overview-table-cell .posts-subject-prefix svg {
    display: inline-block;
    height: 2rem;
    stroke-width: 1;
    stroke: var(--colour-darker);
    width: auto;
}

.posts-overview-table-cell a {
    display: block;
    height: 2rem;
    line-height: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-view-child-cell.post-name,
.topic-view-child-cell.posts-name-heading,
.posts-overview-table-cell.post-name,
.posts-overview-table-cell.posts-name-heading {
    display: none;
}

.topic-view-child-cell.post-replies,
.topic-view-child-cell.posts-replies-heading,
.posts-overview-table-cell.post-replies,
.posts-overview-table-cell.posts-replies-heading {
    display: none;
}

.posts-overview-table .post-date,
.posts-overview-table .posts-date-heading,
.child-posts-table .post-date,
.child-posts-table .posts-date-heading {
    display: none;
}

@media only screen and (min-width: 800px) {
    .posts-overview-table .posts-subject-heading,
    .posts-overview-table .post-subject {
        max-width: 61vw;
    }
}

@media only screen and (min-width: 890px) {
    .topic-view-child-cell.post-date,
    .topic-view-child-cell.posts-date-heading,
    .posts-overview-table-cell.post-date,
    .posts-overview-table-cell.posts-date-heading {
        display: table-cell;
    }
}

@media only screen and (min-width: 940px) {
    .posts-overview-table .posts-subject-heading,
    .posts-overview-table .post-subject {
        max-width: 40vw;
    }

    .topic-view-child-cell.post-name,
    .topic-view-child-cell.posts-name-heading,
    .posts-overview-table-cell.post-name,
    .posts-overview-table-cell.posts-name-heading {
        display: table-cell;
        max-width: 207px;
    }
}

@media only screen and (min-width: 1200px) {
    .posts-overview-table .posts-subject-heading,
    .posts-overview-table .post-subject {
        max-width: 373px;
    }

    .topic-view-child-cell.post-replies,
    .topic-view-child-cell.posts-replies-heading,
    .posts-overview-table-cell.post-replies,
    .posts-overview-table-cell.posts-replies-heading {
        display: table-cell;
        max-width: 110px;
    }
}

/* section tags ***************************************************************/

.widget-tags-main {
    background-color: var(--colour-lighter);
    margin-bottom: var(--spacing-medium);
    max-width: none !important;
}

.widget-tags-main .widget-tags-heading {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.widget-tags-main .tag-overview-list {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-medium);
    justify-content: flex-start;
    padding: 1rem;
    max-height: 20rem;
    overflow-y: scroll;
}

.widget-tags-main .tag-overview-list .tag-item {
    background-color: transparent;
    list-style: none;
    margin: 0;
    overflow: visible;
}

.widget-tags-main .tag-overview-list .link,
.widget-tags-main .tag-overview-list .link:hover {
    align-content: center;
    align-items: center;
    background-color: var(--colour-medium);
    border-radius: 1rem;
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    color: var(--colour-darker);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: var(--spacing-large);
    justify-content: space-between;
    line-height: var(--spacing-medium);
    padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium);
    text-decoration: none !important;
}

.widget-tags-main .tag-overview-list .tag-item.active-tag .link {
    background-color: var(--colour-link-active);
}

.widget-tags-main .tag-overview-list .link:hover {
    background-color: var(--colour-light);
}

/*.widget-tags-main .tag-overview-list .tag {*/
/*    border: 3px solid red;*/

/*    display: inline-block;*/
/*    max-width: 100%;*/
/*    overflow: hidden;*/
/*}*/

.widget-tags-main .tag-overview-list .page-count {
    background-color: var(--colour-dark);
    border-radius: 100%;
    color: var(--colour-lighter);
    display: inline-block;
    font-size: 75%;
    height: 1.5rem;
    margin-left: var(--spacing-medium);
    padding: var(--spacing-extra-small);
    width: 1.5rem;
    text-align: center;

/*    color: var(--colour-darker);*/
/*    float: right;*/
}

/* section topic-add *********************************************************/

.notification-div {
    align-items: center;
    background-color: #e0e0ed;
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: #336699;
    border-width: var(--spacing-extra-small) 0;
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    display: none;
    font-weight: 700;
    justify-content: flex-start;
    margin: var(--spacing-medium) auto;
    padding: var(--spacing-medium);
}

@media screen and (min-width: 800px) {
    .notification-div {
        border-width: var(--spacing-extra-small);
    }
}

.notification-div.error {
    border-color: var(--colour-primary);
    color: var(--colour-primary);
}

.notification-div.error svg #icon {
    fill: var(--colour-primary);
}

.notification-div.visible {
    display: flex;
}

.notification-div-icon {
    margin-right: var(--spacing-medium);
    width: 5rem;
}

.notification-div-text {
    flex: 1;
}

.notification-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    margin-left: var(--spacing-medium);
    opacity: 0.6;
    padding: 0;
}

.notification-close:hover {
    opacity: 1;
}

.notification-div.warning {
    background-color: var(--colour-warning-bg, #fff3e0);
    border-color: var(--colour-warning, #ff9800);
    color: var(--colour-warning-text, #e65100);
}

.notification-div.success {
    background-color: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}

.notification-div.hiding {
    animation: notification-fade-out 0.3s ease-out forwards;
}

@keyframes notification-fade-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.notification-container {
    margin-bottom: var(--spacing-medium);
}

.topic-add-form .label {
    display: block;
    margin-bottom: var(--spacing-small);
    position: relative;
}

.topic-add-form .input {
    width: 100%;
}

.topic-add-form .buttons-and-remember {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    overflow: visible;
    width: 100%;
}

.topic-add-form .remember-me-wrapper {
    align-items: center;
    display: flex;
    gap: var(--spacing-small);
    overflow: visible;
}

.topic-add-form .remember-me-wrapper .input-remember {
    margin: 0;
    width: auto;
}

.topic-add-form .remember-me-wrapper .label-remember {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: var(--spacing-extra-small);
    margin: 0;
}

.icon-help-remember {
    cursor: help;
    display: inline-flex;
    position: relative;
}

.icon-help-remember svg {
    height: 1rem;
    width: 1rem;
}

.icon-help-remember::after {
    background-color: var(--colour-darker);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: var(--colour-lighter);
    content: attr(data-tooltip);
    display: none;
    font-size: 0.75rem;
    left: 50%;
    line-height: 1.2;
    max-width: 200px;
    padding: var(--spacing-small);
    position: absolute;
    text-align: left;
    top: calc(100% + var(--spacing-small));
    transform: translateX(-50%);
    white-space: normal;
    width: max-content;
    z-index: 1000;
}

.icon-help-remember:hover::after,
.icon-help-remember:focus::after,
.icon-help-remember.show-tooltip::after {
    display: block;
}

/* disable last pass icon */
div[data-lastpass-icon-root],
div[data-lastpass-icon-root="true"],
div[data-lastpass-infield="true"] {
    display: none !important;
    opacity: 0;
}

.topic-add-form .icon-help {
    display: inline-block;
}

.topic-add-form .textarea-message {
    min-height: 10rem;
}

.topic-add-form .emoji-container {
    margin-bottom: var(--spacing-medium);
}

.topic-add-form .buttons {
    display: flex;
    justify-content: space-between;
}

.topic-add-form .button-preview {
    flex-grow: 1;
    margin-right: var(--spacing-small);
}

.topic-add-form .button-submit {
    flex-grow: 1;
    margin-left: var(--spacing-small);
}

.topic-add-form .terms-of-use {
    font-size: 80%;
    text-align: right;
}

.topic-add-form .terms-of-use a {
    white-space: nowrap;
}

/* ALL CAPS warning icon ******************************************************/

.warning-caps-icon {
    color: #ff9900;
    cursor: help;
    display: inline;
    font-size: 1.2em;
    margin-left: var(--spacing-extra-small);
    min-width: auto;
    position: absolute;
}

.warning-caps-icon::after {
    background-color: var(--colour-darker);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: var(--colour-lighter);
    content: attr(data-tooltip);
    display: none;
    font-size: 0.75rem;
    left: 0;
    line-height: 1.2;
    max-width: 250px;
    padding: var(--spacing-small);
    position: absolute;
    text-align: left;
    top: calc(100% + var(--spacing-small));
    white-space: normal;
    width: max-content;
    z-index: 1000;
}

.warning-caps-icon:hover::after {
    display: block;
}

@media screen and (min-width: 800px) {
    .topic-add-form {
        display: grid;
        gap: var(--spacing-medium);
        grid-template-columns: min-content auto 119px;
    }

    .topic-add-form .label {
        align-self: center;
        grid-column-start: 1;
        margin: 0;
        position: relative;
        white-space: nowrap;
    }

    .topic-add-form .label-message {
        align-self: start;
        margin-top: var(--spacing-extra-small);
    }

    .topic-add-form .input {
        grid-column-start: 2;
        justify-content: flex-start;
        margin: 0;
    }

    .topic-add-form .textarea-message {
        min-height: 20rem;
    }

    .topic-add-form .buttons-and-remember {
        align-items: center;
        flex-direction: row;
        grid-column-start: 2;
        justify-content: space-between;
    }

    .topic-add-form .buttons {
        justify-content: flex-end;
    }

    .topic-add-form .button-preview,
    .topic-add-form .button-submit {
        flex-grow: initial;
    }

    .topic-add-form .emoji-container {
        display: flex;
        flex-wrap: wrap;
        grid-column-start: 3;
        grid-row-start: 4;
        justify-content: space-between;
        margin: 0;
    }

    .topic-add-form .emoji-container > * {
        width: 24px;
        height: 24px;
    }

    .topic-add-form .terms-of-use {
        grid-column-start: 2;
        margin: 0;
    }
}

/* section topic-view *********************************************************/

.section-topic-view.grid-content {
    padding: 0;
}

.section-topic-view .topic-view-date {
    display: none;
}

.section-topic-view .topic-view-name,
.section-topic-view .topic-view-site {
    display: block;
    max-width: calc(100vw - var(--spacing-medium));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-topic-view .meta-info {
    color: var(--colour-shadow);
    margin-bottom: var(--spacing-small);
}

.section-topic-view  .kf-link-tag {

}

/* action buttons *************************************************************/

.section-topic-view .action-buttons {
    display: flex;
    gap: var(--spacing-small);
}

.section-topic-view .split-button {
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    border-radius: var(--border-radius);
    display: flex;
    position: relative;
}

.section-topic-view .action-buttons .button-split-left {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-right: 1px solid #bcbcbc;
    box-shadow: none;
    color: var(--colour-dark);
    font-size: 150%;
    height: var(--spacing-large);
    padding: 0 var(--spacing-small);
    width: 3rem;
}

.section-topic-view .action-buttons .button-split-right {
    /*border-left: 1px solid #bcbcbc;*/
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    box-shadow: none;
    color: var(--colour-dark);
    /*font-size: 150%;*/
    height: var(--spacing-large);
    padding: 0 var(--spacing-small);
}

.section-topic-view .action-buttons .button-share {
    align-content: center;
    align-items: center;
    color: var(--colour-darker);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-extra-small);
    justify-content: space-between;
    padding: 0.25rem;
}

.section-topic-view .action-buttons .button-share svg {
    fill: var(--colour-darker);
    stroke: var(--colour-darker);
}

.section-topic-view .tts-menu {
    background-color: #dedede; /* var(--colour-lighter-alpha); */
    /*border: 1px solid var(--colour-light);*/
    border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    left: 3rem;
    min-width: 160px;
    position: absolute;
    top: var(--spacing-large);
    z-index: 999;

    /* hide */
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    /*transition: opacity 5s ease, height 5s ease;*/
}

.section-topic-view .action-buttons .button-split-right:hover + .tts-menu,
.section-topic-view .tts-menu:hover {
    padding: var(--spacing-small);
    height: auto;
    opacity: 1;
    transition: opacity 300ms ease;
}

.section-topic-view .tts-menu label {
    display: block;
}

.section-topic-view .tts-menu label span {
    display: inline;
}

.section-topic-view .tts-menu input {
    width: 100%;
}

/* FIXME update  colours and width with custom properties*/
/* start from likes */

.section-topic-view .like-button {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.section-topic-view .like-button .icon {
    cursor: pointer;
    display: inline-block;
    width: 1.5rem;
}

.section-topic-view .like-button .icon .fill-color {}

.section-topic-view .like-button .icon .fill-color {
    fill: var(--colour-dark);
}

.section-topic-view .like-button .icon.dislike {
    transform: rotate(180deg);
}

.section-topic-view .like-button .icon .full,
.section-topic-view .like-button .icon.scored .empty {
    display: none;
}

.section-topic-view .like-button .icon .empty,
.section-topic-view .like-button .icon.scored .full {
    display: inline;
}

/* // end form likes */

/* // end action buttons ******************************************************/

.section-topic-view .post-contents p {
    line-height: 1.25rem;
    margin: 0;
}

.section-topic-view .svg-emoji {
    height: auto;
    width: 0.8em;
}

.section-topic-view a[target="kf-external"] {
    display: inline-block;
    max-width: calc(100vw - 2 * var(--spacing-medium));
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.section-topic-view .kf-internal,
.section-topic-view .kf-internal:hover,
.section-topic-view .kf-internal-not-found {
    align-content: center;
    align-items: center;
    background-color: var(--colour-zebra-odd);
    baseline-source: last;
    /*border: 1px solid var(--colour-border-light);*/
    border-radius: 0 50px 50px 0;
    color: var(--colour-darker);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 1.15rem;
    justify-content: flex-start;
    line-height: 1.25rem;
    padding: 0 0.5rem 0 0;
    text-decoration: none;
}

.section-topic-view .kf-internal:hover {
    background-color: var(--colour-border-light);
}

.section-topic-view .kf-internal:hover {
    background-color: #dedede;
}

.section-topic-view .kf-internal:active {
    background-color: var(--colour-link-active);
}

.section-topic-view .kf-internal::before {
    background-image: url('/favicon.ico');
    content: "";
    display: inline-block;
    height: 16px;
    line-height: 1.25rem;
    /*margin-right: 0.25rem;*/
    width: 16px;
}

.section-topic-view .kf-internal-not-found {
    border-radius:50px;
    font-style: italic;
    padding: 0 0.5rem;
}

.section-topic-view .bottom-meta-links,
.section-topic-view header .top-meta-links {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-topic-view .page-main .bottom-meta-links li,
.section-topic-view header .top-meta-links li {
    padding: 0;
    margin: 0;
}

.section-topic-view .child-posts-table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%; /* calc(100vw - 2rem); */
}

.section-topic-view .child-posts-table td:first-child,
.section-topic-view .child-posts-table td:last-child {
    padding-left: 0;
    padding-right: 0;
}

.section-topic-view .child-posts-table td:last-child {
    text-align: right;
}

.section-topic-view .child-posts-table .svg-emoji {
    height: auto;
    width: 0.8em;
}

@media screen and (min-width: 460px) {
    .section-topic-view .topic-view-name {
        display: inline;
    }
}

@media screen and (min-width: 800px) {
    .section-topic-view.grid-content {
        padding: 0 var(--spacing-medium);
    }

    .section-topic-view .meta-info {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .section-topic-view .topic-view-date {
        display: inline-block;
        margin-right: var(--spacing-extra-small);
    }

    .section-topic-view .topic-view-date-short {
        display: none;
    }

    .section-topic-view .bottom-meta-links,
    .section-topic-view header .top-meta-links {
        flex-direction: row;
        height: 1rem;
        margin-left: auto;
    }

    .section-topic-view .page-main .bottom-meta-links li,
    .section-topic-view header .top-meta-links li {
        border-right: 1px solid var(--colour-dark);
        padding: 0 var(--spacing-small);
    }

    .section-topic-view .bottom-meta-links li:first-child,
    .section-topic-view header .top-meta-links li:first-child {
        padding-left: 0;
    }

    .section-topic-view .bottom-meta-links li:last-child,
    .section-topic-view header .top-meta-links li:last-child {
        border: 0;
        padding-right: 0;
    }

    .section-topic-view .bottom-meta-links {
        justify-content: flex-end;
    }
}

/* responsive content *********************************************************/

.section-topic-view .responsive-iframe,
.section-topic-view iframe.imgur-embed-iframe-pub {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.section-topic-view .responsive-iframe-container {
    overflow: hidden;
    margin: var(--spacing-medium) 0;
    padding-top: 56.25%;
    position: relative;
}

.responsive-image,
.section-topic-view img[alt^="Too bad"] {
    background-color: #dadaea;
    display: inline-block;
    height: auto;
    min-height: 2em;
    width: 100%;
}

img.responsive-image::after,
.section-topic-view img[alt^="Too bad"]::after {
    content: "📄 image not available...";
    font-size: 1em;
    opacity: 0.8;
    margin-left: 0.5em;
}

/* footer menu *****************************************************************/

.footer {
    background-color: var(--colour-darker);
    width: 100%;
}

.footer-menu {
    padding: var(--spacing-large);
}

.footer-navigation-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-navigation-links a {
    color: var(--colour-light);
    display: inline-block;
    height: auto;
    vertical-align: middle;
}

.footer-navigation .rss-logo {
    height: auto;
    max-width: 88px;
    min-width: 32px;
    vertical-align: middle;
}

.footer-meta {
    color: var(--colour-dark);
    font-size: 80%;
    text-align: center;
    margin: var(--spacing-medium) 0 0;
}

.footer-meta span::after {
    content: '\A';
    white-space: pre;
}

.footer-meta a {
    color: var(--colour-primary);
}

@media screen and (min-width: 800px) {
    .footer-navigation {
        text-align: center;
    }

    .footer-navigation li {
        display: inline-block;
        padding: 0 var(--spacing-small);
        border-right: 1px solid var(--colour-dark);
    }

    .footer-navigation li:last-child {
        border: none;
    }

    .footer-meta span::after {
        content: '';
        white-space: initial;
    }
}

/* generic page section *******************************************************/

.section-page .grid-content {
    padding: 0;
}

.section-page .page-main {
    background-color: var(--colour-lighter);
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    overflow: visible;
    margin: var(--spacing-medium) 0;
    padding: var(--spacing-medium);
}

.section-page .page-main li {
    margin: var(--spacing-medium) 0;
}

.section-page .page-main .no-spacing li {
    margin: 0;
}

.section-page .page-main li:last-of-type {
    margin-bottom: 0;
}

@media only screen and (min-width: 800px) {
    .section-page .page-main {
        border-radius: var(--border-radius);
    }

    .section-page .grid-content {
        padding: 0 var(--spacing-medium);
    }
}

/* callout boxes (warning, notice, important) *********************************/

.callout {
    border-left: 4px solid var(--colour-medium);
    border-radius: var(--border-radius);
    margin: var(--spacing-medium) 0;
    padding: var(--spacing-medium);
}

.callout p {
    margin: 0;
}

.callout p + p {
    margin-top: var(--spacing-small);
}

.callout-warning {
    background-color: #f8d7da;
    border-left-color: var(--colour-primary);
}

.callout-notice {
    background-color: #d0e0ed;
    border-left-color: var(--colour-tertiary);
}

.callout-important {
    background-color: #fff3cd;
    border-left-color: #d4a400;
}

/* callout with close button (JS notifications) */

.callout {
    position: relative;
}

.callout-text {
    flex: 1;
}

.callout-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.6;
    padding: 0;
    position: absolute;
    right: var(--spacing-small);
    top: var(--spacing-small);
}

.callout-close:hover {
    opacity: 1;
}

.callout-hiding {
    animation: callout-fade-out 0.3s ease-out forwards;
}

@keyframes callout-fade-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.notification-container {
    padding: 0 var(--spacing-medium);
}

.notification-container .callout {
    margin-bottom: var(--spacing-medium);
}

/* legal pages (privacy, terms, 2257, abuse) **********************************/

.section-privacy table,
.section-terms table,
.section-2257 table,
.section-abuse table {
    border-collapse: collapse;
    margin: var(--spacing-medium) 0;
    width: 100%;
}

.section-privacy th,
.section-privacy td,
.section-terms th,
.section-terms td,
.section-2257 th,
.section-2257 td,
.section-abuse th,
.section-abuse td {
    border: 1px solid var(--colour-border-light);
    padding: var(--spacing-small) var(--spacing-medium);
    text-align: left;
}

.section-privacy th,
.section-terms th,
.section-2257 th,
.section-abuse th {
    background-color: var(--colour-zebra-odd);
    font-weight: 700;
}

.section-privacy tbody tr:nth-child(even),
.section-terms tbody tr:nth-child(even),
.section-2257 tbody tr:nth-child(even),
.section-abuse tbody tr:nth-child(even) {
    background-color: var(--colour-zebra-even);
}

.section-page .page-main .updated {
    color: var(--colour-dark);
    font-size: 0.875rem;
    font-style: italic;
}

/* entry page legal links *****************************************************/

.page-cookie-consent .legal-links {
    margin-top: var(--spacing-large);
    padding-top: var(--spacing-medium);
    position: relative;
    text-align: center;
}

.page-cookie-consent .legal-links::before {
    background: linear-gradient(
        90deg,
        var(--colour-shadow) 0%,
        var(--colour-shadow) 70%,
        var(--colour-lighter) 100%
    );
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.page-cookie-consent .legal-links a {
    display: inline-block;
    margin: var(--spacing-extra-small) var(--spacing-small);
}

.page-cookie-consent .legal-links span {
    color: var(--colour-medium);
}

/* screen reader only utility *************************************************/

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* widgets ********************************************************************/

.widget {
    box-shadow: 0 0 3px 0 var(--colour-shadow);
    max-width: 100vw;
}


.widget h3 {
    background-color: var(--colour-darker);
    color: var(--colour-lighter);
    font-size: 1rem;
    font-weight: 300;
    height: 2rem;
    line-height: 2rem;
    margin: 0;
    padding: 0 var(--spacing-medium);
    text-transform: capitalize;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget li {
    height: 2rem;
    line-height: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget li:nth-of-type(even) {
    background-color: var(--colour-zebra-even);
}

.widget li:nth-of-type(odd) {
    background-color: var(--colour-zebra-odd);
}

.widget li:last-of-type {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.widget li a {
    display: inline-block;
    overflow: hidden;
    padding: 0 var(--spacing-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.widget li a:hover {
    background-color: var(--colour-lighter);
}

.widget .post-subject .svg-emoji {
    height: auto;
    width: 0.8em;
}

.widget-promotion {
    margin-bottom: var(--spacing-large);
}

.widget-search {
    background-color: var(--colour-lighter);
}

.widget-search .form-search {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-medium);
}

.widget-search .button-search {
    margin: 0;
}

@media only screen and (min-width: 420px) {
    .widget-search .form-search {
        flex-direction: row;
    }

    .widget-search .input-search {
        flex-grow: 2;
        margin: 0 var(--spacing-medium) 0 0;
    }

    .widget-search .button-search {
        flex-grow: 1;
    }
}

@media only screen and (min-width: 800px) {
    .widget {
        border-radius: var(--border-radius);
        box-shadow: 0 0 3px 0 var(--colour-shadow);
        max-width: 300px;
    }

    .widget h3 {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .widget-search .input-search {
        max-width: 165px;
    }
}

/* tags widget */

.widget-row.tag-item .link {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

/* section terms of use *******************************************************/

.section-terms {
}

.section-terms .page-terms-of-use {
}

/* section tools *******************************************************/

.section-tools {
}

.section-tools .page-tools .version {
    color: #888;
    float: right;
    font-size: 80%;
}

.section-tools .get-pix-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 600px) {
    .section-tools .get-pix-fieldset {
        border: 1px solid var(--colour-shadow);
        padding: var(--spacing-medium);
    }
}

/* Pinned Posts Widget ********************************************************/

.widget-pinned-posts {
    max-height: 500px;
    overflow-y: auto;
}

.widget-pinned-posts .pin-count {
    font-size: 0.9em;
    font-weight: normal;
}

.widget-pinned-posts .pin-count.warning {
    color: var(--colour-error, #d32f2f);
    font-weight: bold;
}

.widget-pinned-posts .pinned-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-pinned-posts .pin-item {
    align-items: center;
    display: flex;
    gap: var(--spacing-small, 8px);
    justify-content: space-between;
    padding: var(--spacing-small, 8px) 0;
    transition: opacity 0.3s ease-out;
}

.widget-pinned-posts .pin-link {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-pinned-posts .button-unpin {
    background: transparent;
    border: none;
    color: var(--colour-text-secondary, #666);
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.widget-pinned-posts .button-unpin:hover {
    color: var(--colour-error, #d32f2f);
}

.widget-pinned-posts .button-unpin:focus {
    outline: 2px solid var(--colour-focus, #1976d2);
    outline-offset: 2px;
}

/* Pin Button *****************************************************************/

.button-pin {
    position: relative;
}

.button-pin .pin-icon-empty,
.button-pin .pin-icon-full {
    display: inline-block;
}

.button-pin.pinned .pin-icon-empty {
    display: none;
}

.button-pin.pinned .pin-icon-full {
    display: inline-block;
}

.button-pin.pin-warning {
    border-color: var(--colour-warning, #ff9800);
}

.pin-limit-warning {
    background-color: var(--colour-warning-bg, #fff3e0);
    border-left: 3px solid var(--colour-warning, #ff9800);
    color: var(--colour-warning-text, #e65100);
    font-size: 0.85em;
    margin-top: var(--spacing-small, 8px);
    padding: var(--spacing-small, 8px);
}

/* Mobile Responsive **********************************************************/

@media screen and (max-width: 768px) {
    .widget-pinned-posts {
        order: 2; /* Place after search widget on mobile */
    }

    .widget-search {
        order: 1; /* Keep search widget at top on mobile */
    }
}