/* MVP.css v1.12 - https://github.com/andybrewer/mvp */

:root {
    --active-brightness: 0.85;
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color-accent: #d93f0015;
    --color-bg: #fff;
    --color-bg-secondary: #eee;
    --color-link: #d93f00;
    --color-secondary: #4e8429;
    --color-secondary-accent: #4e84290b;
    --color-shadow: #f4f4f4;
    --color-table: var(--color-link);
    --color-tag: #aaa;
    --color-text: #000610;
    --color-text-secondary: #333;
    --color-valid: #6EC207;
    --color-invalid: #e6e62b;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 1.5;
    --width-card: 300px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1240px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-accent: #d93f004f;
        --color-bg: #000610;
        --color-bg-secondary: #555;
        --color-link: #d93f00;
        --color-secondary: #4e8429;
        --color-secondary-accent: #4e84294f;
        --color-shadow: #bbbbbb20;
        --color-table: var(--color-link);
        --color-tag: #333;
        --color-text: #fff;
        --color-text-secondary: #aaa;
    }
}

/* Layout */
*,
::after,
::before {
    box-sizing: border-box;
}

article aside {
    background: var(--color-secondary-accent);
    border-left: 4px solid var(--color-secondary);
    padding: 0.01rem 0.8rem;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    line-height: var(--line-height);
    margin: 0;
    overflow-x: hidden; /* fix overflow on mobile caused by tooltips */
    padding: 0;
    overflow-y: scroll;
}

footer,
header,
main {
    margin: 0 auto;
    max-width: var(--width-content);
    padding: 1rem 0.5rem;
}

main {
    min-height: 100dvh; /* fix footer layout shift */
}

footer > a {
    margin: 1rem;
}

hr {
    background-color: var(--color-bg-secondary);
    border: none;
    height: 1px;
    margin: 2rem 0;
    width: 100%;
}

section {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--justify-important);
}

section img,
article img {
    max-width: 100%;
}

section pre {
    overflow: auto;
}

section aside {
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
    /*margin: 1rem;*/
    /*padding: 1.25rem;*/
    /*width: var(--width-card);*/
}

section aside:hover {
    box-shadow: var(--box-shadow) var(--color-bg-secondary);
}

[hidden] {
    display: none;
}

/* Headers */
article header,
div header,
main header {
    padding-top: 0;
}

header {
    text-align: var(--justify-important);
}

header a b,
header a em,
header a i,
header a strong {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/*header nav img {
    margin: 1rem 0;
}*/

section header {
    padding-top: 0;
    width: 100%;
}

/* Nav */
nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    justify-content: space-between;
    /* margin-bottom: 7rem; */
    gap: 1rem;
}

nav form {
    flex: 0 0 100%;
}

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

nav ul li {
    display: inline-block;
    position: relative;
    text-align: left;
    padding: 0; /* override */
}

nav ul li:not(:first-child) {
    margin-left: 1rem;
}

/* Nav Dropdown */
nav details {
    margin: 0; /* override */
}

nav details > summary {
    list-style: none;
}

nav details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
nav details > summary::-webkit-details-marker /* Safari */ {
    display: none;
}

nav details[open] > div,
nav ul li:hover ul {
    display: block;
    z-index: 1337;
}

details > div,
nav ul li ul {
    background: var(--color-bg);
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
    display: none;
    height: auto;
    right: 0; /* left: -2px; */
    padding: .5rem 1rem;
    position: absolute;
    /* top: 1.7rem; */
    white-space: nowrap;
    width: auto;
    z-index: 2;
}

nav ul li ul::before {
    /* fill gap above to make mousing over them easier */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.5rem;
    height: 0.5rem;
}

nav ul li details a,
nav ul li ul li,
nav ul li ul li a {
    display: block;
}

nav hr {
    margin: revert;
}

/* Typography */
code,
samp {
    background-color: var(--color-accent);
    border-radius: var(--border-radius);
    color: var(--color-text);
    display: inline-block;
    margin: 0 0.1rem;
    padding: 0 0.5rem;
    font-family: var(--font-family);
}

details {
    margin: 1.3rem 0;
}

details summary {
    font-weight: bold;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--line-height);
}

.h1,
h1 {
    font-size: calc(1.375rem + 1.5vw);
}

.h2,
h2 {
    font-size: calc(1.325rem + .9vw);
}

.h3,
h3 {
    font-size: calc(1.3rem + .6vw);
}

.h4,
h4 {
    font-size: calc(1.275rem + .3vw);
}

.h5,
h5 {
    font-size: 1.25rem;
}

.h6,
h6 {
    font-size: 1rem;
}

@media (min-width: 1200px) {
    .h1,
    h1 {
        font-size: 2.5rem;
    }

    .h2,
    h2 {
        font-size: 2rem;
    }

    .h3,
    h3 {
        font-size: 1.75rem;
    }

    .h4,
    h4{
        font-size: 1.5rem;
    }
}

mark {
    padding: 0.1rem;
}

ol li,
ul li {
    padding: 0.2rem 0;
}

p {
    margin: 0.75rem 0;
    padding: 0;
    width: 100%;
    word-break: break-word;
}

pre {
    margin: 1rem 0;
    max-width: var(--width-card-wide);
    padding: 1rem 0;
}

pre code,
pre samp {
    display: block;
    max-width: var(--width-card-wide);
    padding: 0.5rem 2rem;
    white-space: pre-wrap;
}

small {
    color: var(--color-text-secondary);
}

sup {
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    color: var(--color-bg);
    font-size: xx-small;
    font-weight: bold;
    margin: 0.2rem;
    padding: 0.2rem 0.3rem;
    position: relative;
    top: -2px;
}

/* Links */
a {
    color: var(--color-link);
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
}

a.lightbox {
    /* fix ribbon placement */
    display: inline;
}

a.stretched-link {
    /* fix item truncation */
    display: initial;
}

a:not(a.stretched-link):hover {
    filter: brightness(var(--hover-brightness));
    text-decoration: underline;
}

a:not(a.stretched-link):active {
    filter: brightness(var(--active-brightness));
    text-decoration: underline;
}

a b,
a em,
a i,
a strong,
button,
input[type="submit"] {
    border-radius: var(--border-radius);
    display: inline-block;
    font-size: medium;
    font-weight: bold;
    line-height: var(--line-height);
    margin: 0.5rem 0;
    padding: 0.5rem 1rem; /*padding: 1rem 2rem;*/
}

button,
input[type="submit"] {
    background-color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    font-family: var(--font-family);
}

.toolbar > *:hover,
button:hover,
input[type="submit"]:hover {
    cursor: pointer;
    filter: brightness(var(--hover-brightness));
}

.toolbar > *:hover,
button:active,
input[type="submit"]:active {
    filter: brightness(var(--active-brightness));
}

a b,
a strong,
button,
input[type="submit"] {
    color: var(--color-bg);
}

a b,
a strong {
    background-color: var(--color-link);
    border: 2px solid var(--color-link);
}

a em,
a i {
    border: 2px solid var(--color-link);
    border-radius: var(--border-radius);
    color: var(--color-link);
    display: inline-block;
    /*padding: 1rem 2rem;*/
}

article aside a {
    color: var(--color-secondary);
}

/* Forms */
button:disabled,
input:disabled {
    background: var(--color-bg-secondary);
    border-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

button[disabled]:hover,
input[type="submit"][disabled]:hover {
    filter: none;
}

form:not([role="search"]) {
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
    display: block;
    max-width: var(--width-card-wide);
    min-width: var(--width-card);
    padding: 1.5rem;
    text-align: var(--justify-normal);
}

form header {
    margin: 1.5rem 0;
    padding: 1.5rem 0;
}

input,
label,
select,
textarea {
    display: block;
    font-size: inherit;
    /*max-width: var(--width-card-wide);*/
    width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    display: inline-block;
    font-weight: normal;
    position: relative;
    top: 1px;
}

input[type="range"] {
    padding: 0.4rem 0;
}

.tagsinput,
input,
select,
textarea {
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    padding: 0.4rem 0.8rem;
}

/*input[type="text"],
textarea {
    width: calc(100% - 1.6rem);
}*/

input[readonly],
textarea[readonly] {
    background-color: var(--color-bg-secondary);
}

label {
    font-weight: bold;
    margin-bottom: 0.2rem;
}

textarea {
    resize: vertical;
}

select.validate:valid,
input.validate:valid,
textarea.validate:valid,
input.success,
textarea.success {
    border: 1px solid var(--color-valid);
    box-shadow: 0px 0px 5px var(--color-valid);
}
select.validate:invalid,
textarea.validate:invalid,
input.validate:invalid {
    border: 1px solid var(--color-invalid);
    box-shadow: 0px 0px 5px var(--color-invalid);
}

.input-group > select.currency,
.input-group > input.currency {
    flex-grow: 0;
    width: 25%;
    text-align: left;
}
.input-group .currency {
    min-width: 2rem;
    align-self: center;
    text-align: center;
}
.input-group input[name="price"] {
    text-align: right;
}


/* Popups */
dialog {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    max-width: 90%;
    max-height: 85dvh;
    margin: auto;
    padding: 0;
    border: 1px solid var(--color-bg-secondary);
    border-radius: 0.5rem;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-color: transparent transparent;
    animation: bottom-to-top 0.25s ease-in-out forwards;
}

dialog::-webkit-scrollbar {
    width: 0;
    display: none;
}

dialog::-webkit-scrollbar-track {
    background: transparent;
}

dialog::-webkit-scrollbar-thumb {
    background-color: transparent;
}

@media (min-width: 650px) {
    dialog {
      max-width: 39rem;
    }
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
  
@keyframes bottom-to-top {
    0% {
      opacity: 0;
      transform: translateY(10%);
    }

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

html:has(dialog[open]) {
    overflow: hidden;
}

/* Tables */
table {
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    border-spacing: 0;
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    padding: 0;
    white-space: nowrap;
}

table td,
table th,
table tr {
    padding: 0.4rem 0.8rem;
    text-align: var(--justify-important);
}

table thead {
    background-color: var(--color-table);
    border-collapse: collapse;
    border-radius: var(--border-radius);
    color: var(--color-bg);
    margin: 0;
    padding: 0;
}

table thead th:first-child {
    border-top-left-radius: var(--border-radius);
}

table thead th:last-child {
    border-top-right-radius: var(--border-radius);
}

table thead th:first-child,
table tr td:first-child {
    text-align: var(--justify-normal);
}

table tr:nth-child(even) {
    background-color: var(--color-accent);
}

/* Quotes */
blockquote {
    display: block;
    font-size: x-large;
    line-height: var(--line-height);
    margin: 1rem auto;
    max-width: var(--width-card-medium);
    padding: 1.5rem 1rem;
    text-align: var(--justify-important);
}

blockquote footer {
    color: var(--color-text-secondary);
    display: block;
    font-size: small;
    line-height: var(--line-height);
    padding: 1.5rem 0;
}

/* Message */
.message {
    margin-bottom:5px;
    border-radius: 5px;
    border-spacing: 0px;
    border: 1px solid #333;
    padding: 10px;
    width:80%;
}

.messagedate {
    font-size:10px;
}

.message_overridden {
    text-decoration: line-through;
}

.message_me {
    background-color: var(--color-bg-secondary);
    margin-left: 20%;
    text-align:right;
}
.message_you {
    background-color: var(--color-bg);
    margin-right: 20%;
}

.message_ava_me {
    float: right;
    margin-left: 1rem;
}
.message_ava_you {
    float: left;
    margin-right: 1rem;
}

.active_convo_selector {
    border-left: 5px solid var(--color-link);
    background-color: #555;
}

/* Tabs */
.tabs {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-accent);
    position: sticky;
    top: 0;
    background-color: var(--color-bg);
    z-index: 42;
}

.tab-pane:not(.active) {
    display: none;
}

.tab {
    padding: 0.5rem 1rem;
    text-decoration: none;
    display: inline-block;
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    color: var(--color-link);
    cursor: pointer;
    margin-bottom: -1px;
    font-size: large;
}

.tab:hover {
    isolation: isolate;
    border-color: var(--color-shadow) var(--color-shadow) var(--color-accent);
}

.tab.active {
    border-color: var(--color-accent) var(--color-accent) var(--color-bg);
    color: var(--color-text);
}

/* Unsorted */
.conv_indicator {
    background-color: var(--color-tag);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    position: sticky;
    top: 0;
}

.conv_indicator > * {
    cursor: pointer;
}

.conv_indicator > *:not(:last-child) {
    margin-right: 0.5rem;
}

.conv_indicator:empty {
    display: none;
}

.convo_cell {
    cursor: pointer;
}

pre {
    white-space: pre-wrap;
}

.danger {
    background-color: #d00;
    border-color: #f44;
}

.warning {
    background-color: #FFEB55;
    border-color: #FFEB55;
}

.card-item .clamp-3 > *:first-child {
    margin-top: 0; /* override */
}

/* Input group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > select,
.input-group > input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
}

.input-group > :not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > button {
    margin: 0;
}

.input-group > span {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    background: var(--color-bg-secondary);
    border-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: var(--border-radius);
}

/* Button group */
.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > button + button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

sup.unread-messages {
    position: absolute;
    top: -2px;
    right: -2px;
    margin: 0;
    padding: 0.125rem 0.25rem;
}

/* Tags */
.tagsinput {
    padding: 5px 5px 0 5px;
    font-size: 14px;
}

.tag {
    background-color: var(--color-tag);
    color: var(--color-text);
    border-radius: var(--border-radius);
    padding: 0.25rem 0.75rem;
}

.tag > a {
    margin-left: 0.25rem;
}

.tagsinput input {
    margin: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    outline: 0px;
}

.tagsinput .tag {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.tag-cloud {
    background: transparent;
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    display: flex;
    flex-direction: column;
}

.tag-cloud > .tag {
    background-color: var(--color-bg);
    border: 1px solid var(--color-text);
    margin-bottom: 0.25rem;
}

/* Card */
.card-img-top {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.card-item {
    min-width: 0;
    position: relative;
}

/* Toolbar */
.toolbar {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.toolbar > * {
    background: var(--color-link);
    border-radius: var(--border-radius);
    color: var(--color-bg);
    padding: 0.5rem;
}

.toolbar svg {
    display: block;
    width: 26px;
    height: 26px;
}

/* Badge */
.badge {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 3px var(--color-text);
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    height: 50px;
    width: 50px;
    color: var(--color-bg);
}

.badge_newest,
.badge_oldest,
.badge_contested {
    rotate: -30deg;
}

.badge_newest {
    background-color: #dc322f;
}
.badge_oldest {
    background-color: #976b00;
}
.badge_contested {
    background-color: #627600;
    font-size: 8pt;
}

.badge_photos {
    background-color: #118bee;
}

/* Ribbon */
.ribbon {
    background-color: var(--color-secondary);
    color: var(--color-bg);
    display: inline-block;
    padding: 2px 6px;
    position: absolute;
    right: -6px;
    bottom: 0.5rem;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    font-size: large;
}

.ribbon:after,
.ribbon:before {
    border: solid rgba(0,0,0,0);
    content: "";
    position: absolute;
}

.ribbon:after {
    border-color: rgba(0,0,0,0);
    border-right-color: var(--color-text);
    border-width: 4px;
    bottom: -4px;
    right: 2px;
    transform: rotate(45deg);
}

/* Tagline */
.tagline {
    --marqueeDuration: 0s;
    --marqueeOffset: 0;
    will-change: transform;
    animation: marquee var(--marqueeDuration) linear alternate infinite;
    height: 32px; /* reserve space for no layout shift */
}

.tagline:hover {
    animation-play-state: paused;
}

.tagline li {
    margin-left: 0.5rem; /* override */
}

.tagline li:last-child {
    margin-right: 0.5rem;
}

.tagline-container {
    display: flex;
    flex: 1 0 33%;
    overflow-x: hidden;
}

.tagline-icon {
    flex: 0 0 auto;
    align-content: center;
}

.tagline-wrapper {
    overflow-x: hidden;
    white-space: nowrap;
    margin-left: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .tagline {
        animation: none;
    }

    .tagline-wrapper {
        overflow-x: scroll;
    }
}

/* Tooltip */
@media (pointer: fine) {
    nav ul li [data-tooltip],
    .toolbar > [data-tooltip] {
        position: relative;
    }

    nav ul li [data-tooltip]::before,
    .toolbar > [data-tooltip]::before,
    nav ul li [data-tooltip]::after,
    .toolbar > [data-tooltip]::after {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 12px);
        z-index: 1000;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.18s ease-in-out 0s;
    }

    nav ul li [data-tooltip]::before,
    .toolbar > [data-tooltip]::before {
        content: attr(data-tooltip);
        background: var(--color-text-secondary);
        color: var(--color-bg-secondary);
        font-size: 13px;
        padding: 0.5em 1em;
        white-space: nowrap;
        top: 100%;
        border-radius: var(--border-radius);
    }

    nav ul li [data-tooltip]::after,
    .toolbar > [data-tooltip]::after {
        content: "";
        background: transparent;
        border: 8px solid transparent;
        border-bottom-color: var(--color-text-secondary);
        bottom: 0;
    }

    nav ul li [data-tooltip]:hover::before,
    .toolbar > [data-tooltip]:hover::before,
    nav ul li [data-tooltip]:hover::after,
    .toolbar > [data-tooltip]:hover::after {
        opacity: 1;
    }
}

/* Avatar */
.avatar {
    height: 100px;
    width: 100px;
}

table .avatar--small {
    vertical-align: middle;
}

@keyframes marquee {
    to {
        transform: translate(calc(var(--marqueeOffset) * -1));
    }
}