@charset "UTF-8";
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm plex mono-normal-400.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/montserrat-normal-400.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-normal-700.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/montserrat-italic-400.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-italic-700.ttf") format("truetype");
}
@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/luckiest guy-normal-400.ttf") format("truetype");
}
@font-face {
  font-family: "OCR-B";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ocr-b-normal-400.ttf") format("truetype");
}
:root {
  --color-blue: #2870B0;
  --color-white: #ffffff;
  --color-red: #cc1017;
  --color-yellow: yellow;
  --color-orange: orange;
  --color-orange10: #ffb52e;
  --color-orange20: #ffb329;
  --color-orange30: #ffb224;
  --color-orange40: #ffb01f;
  --color-orange50: #ffae1a;
  --color-orange60: #ffac14;
  --color-orange70: #ffaa0f;
  --color-orange80: #ffa90a;
  --color-orange90: #ffa705;
  --color-green: darkgreen;
  --color-black: #000000;
  --color-black10: #e6e6e6;
  --color-black20: #cccccc;
  --color-black30: #b3b3b3;
  --color-black40: #999999;
  --color-black50: gray;
  --color-black60: #666666;
  --color-black70: #4d4d4d;
  --color-black80: #333333;
  --color-black90: #1a1a1a;
  --color-blue10: #cae0f3;
  --color-blue20: #b6d4ee;
  --color-blue30: #a1c7ea;
  --color-blue40: #8cbbe5;
  --color-blue50: #77afe0;
  --color-blue60: #63a3db;
  --color-blue70: #4e96d7;
  --color-blue80: #398ad2;
  --color-blue90: #2d7dc5;
  --color-red10: #fbc7c9;
  --color-red20: #f9afb2;
  --color-red30: #f7989b;
  --color-red40: #f58084;
  --color-red50: #f3686d;
  --color-red60: #f15157;
  --color-red70: #ef3940;
  --color-red80: #ee2129;
  --color-red90: #e4121a;
  --color-fg: #1a1a1a;
  --color-bg: #ffffff;
  --color-bg-shader: rgb(from var(--color-bg) r g b / 0.5);
  --color-fg-shader: rgb(from var(--color-fg) r g b / 0.5);
  --color-bg-l: #e6e6e6;
  --color-media-bg: #1a1a1a;
  --color-outline: #2870B0;
  --color-highlight-bg: #2870B0;
  --color-highlight-fg: #ffffff;
  --color-logo-bg: #cc1017;
  --color-logo-fg: #ffffff;
  --color-wrong: #cc1017;
  --color-correct: darkgreen;
  --color-indecisive: #999999;
  --color-checked: #999999;
  --color-active-bg: orange;
  --color-active-fg: #000000;
  --color-unfinished: #cc1017;
  --color-todo-bg: purple;
  --color-todo-fg: #ffffff;
  --color-error-bg: #cc1017;
  --color-error-fg: #ffffff;
  --color-alert-bg: yellow;
  --color-alert-fg: #000000;
  --color-border: #999999;
  --color-input-border: #999999;
  --color-input-focus-border: #398ad2;
  --color-input-error-border: #cc1017;
  --color-input-bg: var(--color-bg);
  --color-input-fg: var(--color-fg);
  --input-choice-border-color: var(--color-input-border);
  --color-choice-fg: var(--color-fg);
  --color-choice-bg: var(--color-bg);
  --color-label-bg: #398ad2;
  --color-label-fg: #ffffff;
  --color-message-notice-bg: #cae0f3;
  --color-message-alert-bg: #ffffcc;
  --color-message-exception-bg: #fbc7c9;
  --color-message-error-bg: #fbc7c9;
  --color-selection-bg: #398ad2;
  --color-selection-fg: #ffffff;
  --color-input-choice-inactive: #ffffff;
  --color-warning: #cc1017;
}
:root[data-color-scheme=dark] {
  --color-fg: #ffffff;
  --color-bg: #1a1a1a;
  --color-bg-l: #666666;
  --color-media-bg: #ffffff;
  --color-indecisive: #666666;
  --color-border: #666666;
  --color-input-border: #cccccc;
  --color-bg-shader: rgba(128, 128, 128, 0.5);
}
:root {
  --font-family: Montserrat, Helvetica, sans-serif;
  --monospace: IBM Plex Mono, monospace;
  --font-m3: 2rem/1.5em IBM Plex Mono, monospace;
  --size-1: 1rem;
  --font-1: 1rem/1.5em Montserrat, Helvetica, sans-serif;
  --size-2: 1.5rem;
  --font-2: 1.5rem/1.5em Montserrat, Helvetica, sans-serif;
  --size-3: 2rem;
  --font-3: 2rem/1.5em Montserrat, Helvetica, sans-serif;
  --font-h1: bold 2.5rem/var(--header-height) Montserrat, Helvetica, sans-serif;
  --font-h2: bold 1.6rem/1.5em Montserrat, Helvetica, sans-serif;
  --font-h3: bold 1.4rem/1.5em Montserrat, Helvetica, sans-serif;
  --raster-3t: 9rem;
  --raster-2t: 6rem;
  --raster: 3rem;
  --raster-2p: 1.5rem;
  --raster-3p: 1rem;
  --raster-4p: 0.75rem;
  --raster-6p: 0.5rem;
  --raster-8p: 0.375rem;
  --raster-12p: 0.25rem;
  --screen-width: min(100vw, calc(1200px + 6rem));
  --aside-width: 3rem;
  --aside-expandable-width: var(--raster);
  --aside-widths: calc(var(--aside-expandable-width) + var(--raster));
  --main-padding: var(--raster-3p);
  --main-width: calc(var(--screen-width) - var(--raster));
  --task-width: calc(var(--_main-width, var(--main-width)) - var(--main-padding) * 2);
  --aside-button-gap: 4px;
  --header-height: 3rem;
  --footer-height: 3rem;
  --response-column-gap: 0.25em;
  --row-gap: 0.5em;
  --border-radius: 0.3em;
  --input-border-width: 1px;
  --input-border-offset: -1px;
  --input-border-style: solid;
  --input-border: 1px solid var(--color-input-border);
  --input-border-radius: 1px;
  --input-padding-v: 0.1em;
  --input-padding-h: 0.5em;
  --input-padding: var(--input-padding-v) var(--input-padding-h);
  --button-border-radius: 1px;
  --button-border-width: 1px;
  --button-background: var(--color-button-background);
  --button-border: 1px solid var(--color-input-border);
  --input-choice-appearence: none;
  --input-choice-offset-width: 2px;
  --input-choice-border-color: var(--color-input-border);
  --color-input-choice-inactive: var(--color-bg);
  --input-choice-border: calc(var(--input-choice-offset-width) * 2) solid;
  --input-choice-focus-color: var(--color-outline);
  --column-height: 1.7em;
  --nav-button-size: 2em;
  --font-ask: var(--font-2);
  --label-font: var(--font-1);
  --label-font-size: var(--size-1);
  --label-width: 6rem;
  --label-line-height: 1.5rem;
  --label-padding: 0 0.25em;
  --response-font: var(--font-1);
  --gap-1: 0.1rem;
  --gap-2: 0.25rem;
  --gap-3: 0.5rem;
  --visual-ratio-width: 3;
  --visual-ratio-height: 2;
  --visual-width: 27rem;
  --visual-height: 18rem;
  --task-row-gap: 1rem;
  --task-column-gap: 0.5rem;
  --task-columns: 12;
  --task-column-width: calc((var(--task-width) - 5.5rem) / 12);
}
@media screen and (min-width: calc(1200px + 6rem)) {
  :root {
    --aside-expandable-width: max(calc((100vw - 1200px - 3rem)), 3rem);
    --aside-widths: calc(var(--aside-expandable-width) + 3rem);
    --main-width: 1200px;
  }
}
@media screen and (max-width: calc(1200px + 6rem)) {
  :root {
    --aside-widths: 3rem;
    --main-width: calc(var(--screen-width) - var(--raster) - var(--main-padding) * 2);
  }
}
:root * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:root *::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: calc(calc(1200px + 6rem) + 4em)) {
  :root {
    --aside-expandable-padding: 0.5em;
  }
}
:root {
  --icon-connected: "❤️";
  --icon-dashboard: "📊";
  --icon-disconnected: "💔";
  --icon-invited: "↗️";
  --icon-queued: "⏳";
  --icon-requested: "↘️";
  --icon-segment: "🎯";
  --icon-visited: "👀";
  --icon-visible: "👀";
  --icon-album: "🖼";
  --icon-following: "🔈";
  --icon-cue: "🎤";
  --icon-mc: "🎤";
  --icon-show: "🎪";
  --icon-controls: "🎛️";
  --icon-follower_count: "📣";
  --icon-tasks: "🤖";
  --icon-textinvite: "💌";
  --icon-textmessage: "✉️";
  --icon-textnote: "📝";
  --icon-edit: "✏️";
  --icon-switch: "🔀";
  --icon-calendar: "📅";
  --icon-list: "📋";
  --icon-reply: "↩";
  --icon-back: "🔙";
  --icon-check: "✅";
  --icon-save: "💾";
  --icon-picture: "🖼️";
  --icon-upload: "📤";
  --icon-download: "📥";
  --icon-faq: "❓";
  --icon-imprint: "📇";
  --icon-legal: "📝";
  --icon-messages: "📨";
  --icon-pause: "❙ ❙";
  --icon-recycle: "♻️";
  --icon-reload: "🔄";
  --icon-remove: "❌";
  --icon-close: "✕";
  --icon-search: "👓";
  --icon-start: "▶";
  --icon-proceed: "◀";
  --icon-info: "ℹ️";
  --icon-stop: "■︎";
  --icon-volume: "︎🔈";
  --icon-muted: "︎🔇";
  --icon-trash: "🗑";
  --icon-alert: "⚠️";
  --icon-exception: "🚨";
  --icon-error: "🐞";
  --icon-sleeping: "⏳";
  --icon-running: "🏃‍️";
  --icon-stopped: "⏸";
  --icon-info: "ℹ️";
  --icon-menu: "𑁔";
  --icon-chat: "💬";
  --icon-moderation-0: "🍻";
  --icon-round: "🎲";
  --icon-moderation-1: "✅";
  --icon-moderation-2: "🤓";
  --icon-moderation-3: "👀";
  --icon-moderation-4: "🏅";
  --icon-moderation-5: "🏁";
  --icon-reaction-heart:"❤️";
  --icon-reaction-thumbsup:"👍";
  --icon-reaction-thumbsdown:"👎️";
  --icon-reaction-star:"⭐️";
  --icon-reaction-warn:"⚠️️";
  --icon-reaction-correct:"✅";
  --icon-reaction-false:"❌";
  --icon-spyglass: "🔍";
  --icon-team: "👫";
}
:root {
  --icon-category-knowledge: "💡";
  --icon-category-music: "💿";
  --icon-category-estimate: "≅";
}
html {
  scroll-behavior: smooth;
  hyphens: auto;
  color: var(--color-fg);
  background-color: var(--color-bg);
  font: 12px var(--font-family);
  --fieldset-border: 1px solid var(--color-blue80);
}
html * {
  box-sizing: border-box;
}
html main > section {
  margin-bottom: 4em;
}
html main > section:not(:first-of-type) {
  margin-top: 4em;
}
html h1 {
  font: var(--font-h1);
  line-height: var(--line-height-h1);
}
html h2 {
  font: var(--font-h2);
  line-height: var(--line-height-h2);
}
html h1:first-child, html h2:first-child, html h3:first-child, html h4:first-child, html h5:first-child, html h6:first-child {
  margin-top: 0;
}
html p, html ul, html ol {
  font: inherit;
}
html a[href]:not(.button) {
  color: inherit;
  text-decoration-color: var(--color-outline);
}
html a[href]:not(.button):hover {
  color: var(--color-outline);
  text-decoration-color: var(--color-outline);
}
html a[href]:not(.button):focus-within {
  outline: none;
  background-color: inherit;
}
html button, html input[type=submit], html input[type=reset] {
  appearance: none;
}
html button, html .button, html input:not([type=range], [type=checkbox], [type=radio]), html select, html textarea, html [contenteditable], html qb-time:has([name]) {
  font: inherit;
  display: inline-block;
  text-decoration: none;
  border: var(--input-border-width) var(--input-border-style, solid) var(--color-input-border, gray);
  color: var(--color-input-fg, inherit);
  background-color: var(--color-input-bg, inherit);
}
html button:focus-visible, html .button:focus-visible, html input:not([type=range], [type=checkbox], [type=radio]):focus-visible, html select:focus-visible, html textarea:focus-visible, html [contenteditable]:focus-visible, html qb-time:has([name]):focus-visible {
  --color-input-border: var(--color-input-focus-border);
  outline: calc(var(--input-border-width) * 2) var(--input-border-style, solid);
  outline-color: var(--color-input-border);
  outline-offset: calc(var(--input-border-width) * -2);
  --input-choice-border-color: var(--color-input-border);
}
html button.field_with_errors, html .button.field_with_errors, html input.field_with_errors, html select.field_with_errors, html textarea.field_with_errors, html [contenteditable].field_with_errors, html qb-time:has([name]).field_with_errors {
  --color-input-border: var(--color-input-error-border) !important;
  --color-label-bg: var(--color-input-error-border) !important;
}
html button, html .button, html input[type=submit], html input[type=reset] {
  background-color: var(--button-background);
  padding-inline: 0.25em;
  padding-block: 0.25em;
  user-select: none;
  align-content: center;
  text-align: center;
}
html button:hover, html .button:hover, html input[type=submit]:hover, html input[type=reset]:hover {
  --color-input-border: var(--color-input-focus-border)!important;
  outline: calc(var(--input-border-width) * 2) var(--input-border-style, solid);
  outline-color: var(--color-input-border);
  outline-offset: calc(var(--input-border-width) * -2);
  --input-choice-border-color: var(--color-input-border);
}
html input:not([type=range], [type=checkbox], [type=radio]), html select, html textarea, html [contenteditable], html qb-time:has([name]) {
  border-style: none;
  outline: var(--input-border-width) var(--input-border-style) var(--color-input-border, gray);
  outline-offset: var(--input-border-offset);
  border-radius: var(--input-border-radius);
  padding: var(--input-padding);
}
html input:not([type=range], [type=checkbox], [type=radio]):focus-visible, html select:focus-visible, html textarea:focus-visible, html [contenteditable]:focus-visible, html qb-time:has([name]):focus-visible {
  --color-input-border: var(--color-input-focus-border);
}
html [type=radio], html [type=checkbox] {
  display: inline-block;
  appearance: var(--input-choice-appearence);
  aspect-ratio: 1;
  outline: var(--input-choice-offset-width) solid var(--color-bg);
  min-width: var(--raster-2p);
  line-height: 1em;
  padding: 0 !important;
  margin: 0;
  border: var(--input-choice-offset-width) solid var(--input-choice-border-color, inherit);
  outline-offset: calc(var(--input-choice-offset-width) * -2);
  background: var(--color-bg, inherit);
}
html [type=radio]:checked, html [type=checkbox]:checked {
  background: var(--color-label-bg);
}
html [type=radio]:focus-visible, html [type=checkbox]:focus-visible {
  --color-input-border: var(--color-input-focus-border);
}
html .checked:not(input)[type=radio],
html .checked:not(input)[type=checkbox] {
  background: var(--input-choice-border-color) !important;
}
html [contenteditable] {
  overflow-wrap: anywhere;
  white-space: normal;
  align-self: stretch;
  overflow: hidden;
}
html menu {
  margin: 0;
  padding: 0;
}
html *::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-fg);
}
html fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
html fieldset legend {
  font-size: 1.2em;
}
html summary::-webkit-details-marker {
  display: none;
}
html body {
  margin: 0;
  height: var(--window-height, 100vh);
}
html.as-user {
  --color-logo-bg: blue;
}
body {
  height: var(--window-height, 100vh);
  display: grid;
  overflow: hidden;
  --template-rows: [body_ show_ header_] var(--header-height) [_header main_] minmax(0, 1fr) [_main footer_] var(--footer-height) [_footer _show _body];
  grid-template-rows: var(--template-rows);
  grid-template-columns: [body_ page_ index_] var(--raster) [_index main_] var(--main-width) [_main chat_] var(--aside-expandable-width) [_chat _page _body];
  align-items: stretch;
}
@media screen and (max-width: calc(1200px + 6rem)) {
  body {
    grid-template-columns: [body_ page_ index_] var(--raster) [_index main_] calc(var(--main-width) - var(--raster) + var(--main-padding) * 2) [_main chat_] var(--raster) [_chat _page _body];
    --chat-row-start: main_;
  }
}
body main, body main > .qb-show {
  padding: 0 var(--main-padding);
  padding-bottom: 2em;
  grid-column: main_/_main;
  grid-row: body_/_body;
  overflow: auto;
  grid-row-start: body_;
}
body main > .qb-show {
  --_main-width: var(--main-width);
  grid-column-end: _page;
}
body > header, body > footer {
  grid-column: main_/_main;
  z-index: 1;
  pointer-events: none;
}
body > header > *, body > footer > * {
  pointer-events: auto;
}
body > header:empty, body > footer:empty {
  display: none;
}
body > header {
  grid-row: header_/_header;
}
body > header:not(:empty) ~ main {
  padding-top: var(--header-height);
}
body footer {
  grid-row: footer_/_footer;
}
body footer:not(:empty) ~ main {
  padding-bottom: var(--footer-height);
}
html.expanded #timer {
  display: none;
}
body qb-chat.open ~ main #timer {
  display: none;
}
body #timer {
  --_nav-border-top-style: solid;
  padding: 0 var(--size-1);
  grid-template-columns: 1ch 1ch min-content 1ch 1ch;
  font: var(--font-h2);
  line-height: 1em;
  text-shadow: 0 0 5px var(--color-bg);
  display: grid;
  line-height: 1em;
  place-items: center;
  text-align: center;
}
body #timer.zero {
  display: none;
}
body #timer.tack::part(S):before {
  color: var(--color-blue);
}
body #timer[localtime]::part(S):before {
  content: ":";
}
body #timer::part(M), body #timer::part(S) {
  display: contents;
}
body > qb-nav {
  scrollbar-color: transparent transparent;
  grid-column: index_/_index;
  z-index: 5000;
  grid-row: body_/_body;
}
body > qb-chat {
  grid-column: chat_/_chat;
  z-index: 4;
  grid-row: var(--chat-grid-rows, body_/_body);
  --template-rows: [body_ show_ header_] var(--header-height) [_header main_] minmax(0, 1fr) [_main footer_] minmax(var(--footer-height), max-content) [_footer _show _body];
  width: 50%;
  justify-self: end;
}
body > qb-nav.left {
  --nav-button-size: 1.5rem;
  --_justify: start;
  --_nav-right: 0;
  --_nav-transform: translateX(100%);
  --_nav-border-right-style: solid;
}
body > qb-nav.left .mid {
  display: grid;
  grid-auto-rows: var(--raster);
}
body > qb-nav, body > qb-chat {
  --gaps: calc(var(--aside-button-gap) / 2) 0;
  --_align: start;
  user-select: none;
  display: grid;
  grid-template-rows: var(--template-rows);
  grid-template-columns: 100%;
}
body > qb-nav.right, body > qb-chat.right {
  --_justify: end;
  --_nav-left: 0;
  --_nav-transform: translateX(-100%);
  --_nav-border-left-style: solid;
}
body > qb-nav .bottom, body > qb-nav .bottom details > button, body > qb-nav .top:not(.menu), body > qb-nav .top:not(.menu) details > button, body > qb-chat .bottom, body > qb-chat .bottom details > button, body > qb-chat .top:not(.menu), body > qb-chat .top:not(.menu) details > button {
  background-color: var(--color-bg);
}
body > qb-nav .top, body > qb-chat .top {
  --_nav-border-bottom-style: solid;
  z-index: 1;
  grid-row: header_/_header;
}
body > qb-nav .top ~ qb-index, body > qb-chat .top ~ qb-index {
  grid-row-start: _header;
}
body > qb-nav .top fieldset, body > qb-chat .top fieldset {
  top: 0;
}
body > qb-nav .bottom, body > qb-chat .bottom {
  --_nav-border-top-style: solid;
  z-index: 1;
  grid-row: footer_/_footer;
}
body > qb-nav .bottom ~ qb-index, body > qb-chat .bottom ~ qb-index {
  grid-row-end: footer_;
}
body > qb-nav .bottom fieldset, body > qb-chat .bottom fieldset {
  bottom: 0;
}
body > qb-nav summary, body > qb-chat summary {
  cursor: context-menu;
  list-style-type: none;
}
body > qb-nav details, body > qb-chat details {
  position: relative;
}
body > qb-nav details nav, body > qb-nav details fieldset, body > qb-chat details nav, body > qb-chat details fieldset {
  position: absolute;
  left: var(--_nav-left, auto);
  right: var(--_nav-right, auto);
  transform: var(--_nav-transform);
  display: flex;
}
body > qb-nav details.top.menu nav, body > qb-chat details.top.menu nav {
  gap: var(--aside-button-gap);
  padding: 0.25em 0.25em var(--aside-button-gap);
  flex-direction: column;
  top: auto;
  left: 0;
  right: auto;
  transform: none;
  white-space: nowrap;
}
body > qb-nav details.top.menu nav, body > qb-chat details.top.menu nav {
  outline: 2px solid var(--color-logo-bg);
  background: var(--color-logo-fg);
  color: var(--color-logo-bg);
}
body > qb-nav details.top.menu nav a, body > qb-chat details.top.menu nav a {
  text-decoration: none;
}
body > qb-nav.left .top.menu > nav {
  font-size: var(--font-size-top-menu-nav);
  gap: var(--gap-3);
  padding: 0.5em;
}
body > qb-nav button {
  border-radius: var(--button-border-radius);
  background-color: var(--button-background);
  width: var(--_aside-button-size);
}
body > qb-nav details summary,
body > qb-nav > button, body > qb-nav > div > button {
  width: var(--raster);
}
body > qb-nav > * {
  border: 1px none;
}
body > qb-nav .bottom, body > qb-nav .top, body > qb-chat .bottom, body > qb-chat .top {
  display: grid;
  grid-auto-flow: column;
}
body > qb-nav .bottom > details > div,
body > qb-nav .bottom #timer, body > qb-nav .top > details > div,
body > qb-nav .top #timer, body > qb-chat .bottom > details > div,
body > qb-chat .bottom #timer, body > qb-chat .top > details > div,
body > qb-chat .top #timer {
  background-color: var(--color-bg);
}
body > qb-nav .bottom > details > *:not(div), body > qb-nav .bottom > details > div > button, body > qb-nav .bottom #timer, body > qb-nav .top > details > *:not(div), body > qb-nav .top > details > div > button, body > qb-nav .top #timer, body > qb-chat .bottom > details > *:not(div), body > qb-chat .bottom > details > div > button, body > qb-chat .bottom #timer, body > qb-chat .top > details > *:not(div), body > qb-chat .top > details > div > button, body > qb-chat .top #timer {
  border-width: 1px;
  border-style: var(--_nav-border-top-style, none) var(--_nav-border-right-style, none) var(--_nav-border-bottom-style, none) var(--_nav-border-left-style, none);
}
body > qb-nav .bottom > details, body > qb-nav .top > details, body > qb-chat .bottom > details, body > qb-chat .top > details {
  display: contents;
}
body > qb-nav .bottom > details button, body > qb-nav .top > details button, body > qb-chat .bottom > details button, body > qb-chat .top > details button {
  font-size: var(--nav-button-size);
}
body > qb-nav .bottom > details > div, body > qb-nav .top > details > div, body > qb-chat .bottom > details > div, body > qb-chat .top > details > div {
  display: grid;
  width: max-content;
  grid-template-rows: var(--raster);
  grid-auto-columns: minmax(var(--raster), max-content);
  grid-auto-flow: column;
  background-color: var(--color-bg);
}
body > qb-nav .bottom > details > *:not(div), body > qb-nav .bottom > details > div > button, body > qb-nav .top > details > *:not(div), body > qb-nav .top > details > div > button, body > qb-chat .bottom > details > *:not(div), body > qb-chat .bottom > details > div > button, body > qb-chat .top > details > *:not(div), body > qb-chat .top > details > div > button {
  display: grid;
  place-items: center;
  background-color: var(--button-background);
  width: var(--raster);
}
body > qb-nav .bottom > details > *:not(div):last-child, body > qb-nav .bottom > details > div > button:last-child, body > qb-nav .top > details > *:not(div):last-child, body > qb-nav .top > details > div > button:last-child, body > qb-chat .bottom > details > *:not(div):last-child, body > qb-chat .bottom > details > div > button:last-child, body > qb-chat .top > details > *:not(div):last-child, body > qb-chat .top > details > div > button:last-child {
  border-radius: var(--_nav-last-border-radius);
}
body > qb-nav .bottom > details > *:not(div):first-child, body > qb-nav .bottom > details > div > button:first-child, body > qb-nav .top > details > *:not(div):first-child, body > qb-nav .top > details > div > button:first-child, body > qb-chat .bottom > details > *:not(div):first-child, body > qb-chat .bottom > details > div > button:first-child, body > qb-chat .top > details > *:not(div):first-child, body > qb-chat .top > details > div > button:first-child {
  border-radius: var(--_nav-first-border-radius);
}
body > qb-nav .top {
  grid-template-rows: var(--raster) min-content;
}
body > qb-nav .top ~ qb-index {
  grid-row-start: _header;
}
body > qb-nav .bottom ~ qb-index {
  grid-row-end: footer_;
}
body > qb-nav qb-index {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: transparent transparent;
  grid-row: body_/_body;
  margin: calc(var(--aside-button-gap) / 2) 0;
  align-items: var(--_align);
  justify-self: var(--_justify);
}
body > qb-nav qb-index::-webkit-scrollbar {
  display: none;
}
body > qb-nav qb-index > * {
  pointer-events: all;
}
html[data-app=qb_auth-show] body > qb-nav {
  grid-row: header_/_header;
}
html[data-app=qb_auth-show] body > qb-chat {
  z-index: 1;
}
html[data-app=qb_auth-show] body > main {
  display: contents;
}
html[data-app=qb_auth-show] body > main qb-auth {
  grid-column: body_/_body;
  grid-row: main_/_main;
}
qb-auth {
  display: grid;
  --qb-auth-shade: none;
  --qb-auth-padding: 0;
}
@media screen and (max-width: 550px) {
  html:not(.show) main {
    grid-column: main_/_main;
  }
}
[data-category=knowledge] {
  order: -10;
}
[data-category=music] {
  order: -9;
}
[data-category=scores] {
  display: none;
}
[data-category=estimate] {
  order: -8;
}
div.ranking {
  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
}
div.shows > button {
  font: var(--font-1);
}
div.shows div.year {
  display: contents;
}
div.shows div.year > header {
  grid-column: 1;
  font-weight: bold;
}
div.shows div.year:not(:first-child) > header {
  margin-top: 2em;
}
div.shows div.month {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
div.shows div.month > * {
  flex: 0 0 24em;
}
@media screen and (max-width: 550px) {
  div.shows div.month > * {
    flex-basis: 100%;
  }
}
div.shows.current-shows div.year {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
div.shows.current-shows div.year > header {
  display: none;
}
div.shows.current-shows div.month {
  display: contents;
}
div.shows div.shows-grouped {
  --font-size-small: 0.7em;
  --line-height-small: 1.2em;
  --day-border: 3px;
  display: grid;
  white-space: nowrap;
}
div.shows div.shows-grouped [format="%Y %B"] {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(-100% - 2em));
}
div.shows div.shows-grouped article {
  --day-color: var(--color-blue80, blue);
  --day-padding: 0.5rem;
  position: relative;
  line-height: var(--line-height-small);
}
div.shows div.shows-grouped article:not(:first-child) [format="%Y %B"] {
  display: none;
}
div.shows div.shows-grouped article:not(:first-child) [format="%B"] {
  display: none;
}
div.shows div.shows-grouped article.show-cancelled qb-time:not([format="%Y %B"]) {
  text-decoration: line-through !important;
}
div.shows div.shows-grouped article .title {
  white-space: wrap;
}
div.shows div.shows-grouped article [itemprop=kind] {
  display: none;
}
div.shows div.shows-grouped article [itemprop=kind]:before {
  content: "(";
}
div.shows div.shows-grouped article [itemprop=kind]:after {
  content: ")";
}
div.shows div.shows-grouped article .actions a {
  text-decoration: none;
}
div.shows div.shows-grouped article .cancelled:before {
  content: var(--icon-remove) " ";
}
div.shows div.shows-grouped article details.book {
  cursor: pointer;
  position: relative;
}
div.shows div.shows-grouped article details.book summary::-webkit-details-marker {
  display: none;
}
div.shows div.shows-grouped article details.book summary::marker {
  content: none;
}
div.shows div.shows-grouped article details.book > div {
  background: var(--color-bg);
  border: var(--day-border) var(--day-color);
  border-style: none solid solid;
  position: absolute;
  bottom: 0;
  right: calc(-1 * var(--day-border));
  transform: translateY(100%);
}
div.shows div.shows-grouped article details.book > div > * {
  display: block;
}
html.list-view div.shows-grouped {
  display: grid;
  gap: var(--gap-2) var(--gap-3);
  grid-template-columns: [wday] min-content [day] min-content [month] min-content [hour] min-content [minute] min-content [title] 30ch [vendor] min-content [slots-count] min-content [players-count] min-content [mcs] min-content [moderate] min-content [view] min-content [author] min-content [manage] min-content;
}
html.list-view div.shows-grouped article,
html.list-view div.shows-grouped div.year,
html.list-view div.shows-grouped div.month {
  display: contents;
}
html.list-view div.shows-grouped article.show-cancelled * {
  text-decoration: line-through !important;
}
html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"] {
  display: contents;
}
html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(a) {
  grid-column: wday;
}
html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(_1), html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(_2), html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(_4), html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(_3) {
  display: none;
}
html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(d) {
  grid-column: day;
  justify-self: end;
}
html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(b) {
  grid-column: month;
  justify-self: start;
}
html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(h) {
  grid-column: hour;
  justify-self: end;
}
html.list-view div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"]::part(m) {
  grid-column: minute;
  justify-self: start;
}
html.list-view div.shows-grouped article .vendor {
  grid-column: vendor;
}
html.list-view div.shows-grouped article .title {
  grid-column: title;
}
html.list-view div.shows-grouped article [itemprop=mcs] {
  grid-column: mcs;
}
html.list-view div.shows-grouped article .actions {
  display: contents;
}
html.list-view div.shows-grouped article .actions .view {
  grid-column: view;
}
html.list-view div.shows-grouped article .actions .moderate {
  grid-column: moderate;
}
html.list-view div.shows-grouped article .actions .manage {
  grid-column: manage;
}
html.list-view div.shows-grouped article .actions .author {
  grid-column: author;
}
html.list-view div.shows-grouped article [itemprop=cancelled] {
  display: none;
}
html.list-view div.shows-grouped article [itemprop=slots_count] {
  grid-column: slots-count;
}
html.list-view div.shows-grouped article [itemprop=players_count] {
  grid-column: players-count;
}
html:not(.list-view) div.shows-grouped {
  gap: 3em;
}
html:not(.list-view) div.shows-grouped article {
  flex: 0 0 24em;
  height: 12em;
  display: grid;
  gap: var(--gap-2) var(--gap-3);
  border: var(--day-border) solid var(--day-color);
  grid-template-columns: [left_] 12em [_left mid_] 1fr [_mid right_] 6em [_right];
  grid-template-rows: 1.5em min-content min-content 1fr;
  grid-template-areas: "date icons icons" "title title title" "content content content" "mcs mcs mcs" "teams teams book";
}
html:not(.list-view) div.shows-grouped article.has-active-slots {
  --day-color: var(--color-orange, orange);
}
html:not(.list-view) div.shows-grouped article:before {
  content: "";
  grid-column: left_/_right;
  grid-row: 1;
  background-color: var(--day-color);
}
html:not(.list-view) div.shows-grouped article [itemprop=cancelled] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: var(--color-cancelled, rgba(255, 0, 0, 0.75));
  color: var(--color-white, white);
  padding: 0.5em;
  z-index: 100;
  pointer-events: none;
}
html:not(.list-view) div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"],
html:not(.list-view) div.shows-grouped article .title,
html:not(.list-view) div.shows-grouped article [itemprop=mcs] {
  padding: 0 var(--day-padding);
}
html:not(.list-view) div.shows-grouped article .actions, html:not(.list-view) div.shows-grouped article .slot,
html:not(.list-view) div.shows-grouped article [itemprop$=_count] {
  padding-left: var(--day-padding);
}
html:not(.list-view) div.shows-grouped article .ranking {
  padding-right: var(--day-padding);
}
html:not(.list-view) div.shows-grouped article [itemprop=starting_at][format="%a %d. %b %H:%M"] {
  grid-area: date;
  background-color: var(--day-color);
  color: var(--color-white, white);
  padding: 2px;
  order: 0;
}
html:not(.list-view) div.shows-grouped article .vendor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(calc(-100% - 0.5em));
}
html:not(.list-view) div.shows-grouped article [itemprop=starting_at], html:not(.list-view) div.shows-grouped article .icons {
  align-self: center;
}
html:not(.list-view) div.shows-grouped article .title {
  grid-area: title;
  order: 1;
}
html:not(.list-view) div.shows-grouped article [itemprop=mcs] {
  grid-area: mcs;
  order: 3;
}
html:not(.list-view) div.shows-grouped article .icons {
  color: var(--color-label-fg);
  justify-self: right;
  grid-area: icons;
  order: 10;
}
html:not(.list-view) div.shows-grouped article [itemprop=slots_count] {
  grid-column: 1;
}
html:not(.list-view) div.shows-grouped article [itemprop=players_count] {
  grid-column: 2;
}
html:not(.list-view) div.shows-grouped article a.slot {
  grid-column: left_/_mid;
  order: 6;
}
html:not(.list-view) div.shows-grouped article .ranking {
  order: 6;
  grid-column: right_/_right;
  display: flex;
  gap: var(--gap-2);
}
html:not(.list-view) div.shows-grouped article .ranking [data-category=knowledge] {
  order: 0;
}
html:not(.list-view) div.shows-grouped article .ranking [data-category=knowledge]:after {
  content: var(--icon-category-knowledge);
}
html:not(.list-view) div.shows-grouped article .ranking [data-category=music] {
  order: 1;
}
html:not(.list-view) div.shows-grouped article .ranking [data-category=music]:after {
  content: var(--icon-category-music);
}
html:not(.list-view) div.shows-grouped article .ranking [data-category=estimate] {
  order: 2;
}
html:not(.list-view) div.shows-grouped article .ranking [data-category=estimate]:after {
  content: var(--icon-category-estimate);
}
html:not(.list-view) div.shows-grouped article .teams {
  grid-area: teams;
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
  grid-auto-columns: 2rem;
  grid-auto-flow: column;
}
html:not(.list-view) div.shows-grouped article .teams .slot {
  grid-column: 1;
}
html:not(.list-view) div.shows-grouped article .teams .ranking {
  display: contents;
}
html:not(.list-view) div.shows-grouped article .book {
  padding: 2px;
  order: 11;
  grid-area: book;
  place-self: end stretch;
  text-align: center;
  color: var(--color-label-fg);
  background-color: var(--day-color);
  border: none;
}
body > qb-chat {
  justify-items: end;
  align-items: stretch;
}
body > qb-chat {
  --font-size: 1.5rem;
  --nav-button-size: 1.5rem;
  --message-width: min(var(--main-width), 344px);
  --_align: end;
}
body > qb-chat:not(.open) > * {
  display: none;
}
body > qb-chat article {
  justify-self: stretch;
  white-space: normal;
  grid-area: article;
  border: none !important;
}
body > qb-chat article:empty:before {
  content: "…";
}
body > qb-chat article.edit-message:before {
  content: var(--icon-edit) " " !important;
  float: left;
}
body > qb-chat article.reply-message {
  position: relative;
}
body > qb-chat article.reply-message:before {
  padding-left: 1.5ch;
  content: "…" attr(data-reference) "…" !important;
  font-style: italic;
  display: block;
}
body > qb-chat article.reply-message:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: var(--slot-avatar);
  background-color: var(--slot-color);
  height: max-content;
  width: max-content;
}
body > qb-chat .qb-message {
  font: var(--font-1);
  max-width: calc(100% - 2em);
}
body > qb-chat .qb-message.my-message {
  justify-self: end;
}
body > qb-chat .my-message {
  --message-editable: block;
}
body > qb-chat .qb-message {
  white-space: normal;
  width: var(--message-width);
}
qb-participants {
  display: flex;
  flex-wrap: wrap;
  --slot-margin: calc(var(--raster-2p) + var(--raster-6p));
  margin-left: var(--slot-margin);
  gap: var(--raster-6p);
  --slot-icon-size: var(--raster-2p);
  --font-size: 1rem;
}
qb-participants .slot-join-token,
qb-participants button,
qb-participants label {
  display: flex;
  align-items: center;
  font: var(--font-1);
  gap: var(--gap-2);
  align-self: center;
}
qb-participants button:hover {
  outline: none;
}
qb-participants button,
qb-participants summary,
qb-participants label [type=radio] {
  width: 1em;
  height: 1em;
  min-width: 0;
}
qb-participants .slot-join-token {
  user-select: all;
  order: 1;
  cursor: copy;
}
qb-participants .slot-join-token:hover {
  color: var(--color-selection-fg);
  background-color: var(--color-selection-bg);
}
qb-participants .slot-join-token:before {
  content: "🔗 ";
}
qb-participants qb-slot,
qb-participants qb-mc,
qb-participants qb-player {
  position: relative;
}
qb-participants qb-slot > button,
qb-participants qb-mc > button,
qb-participants qb-player > button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  width: 1.7em;
  aspect-ratio: 1;
}
qb-participants qb-slot .edit,
qb-participants qb-mc .edit,
qb-participants qb-player .edit {
  order: 10;
}
qb-participants qb-slot:not(:focus-within) .editNode,
qb-participants qb-mc:not(:focus-within) .editNode,
qb-participants qb-player:not(:focus-within) .editNode {
  display: none;
}
qb-participants qb-slot .editNode,
qb-participants qb-mc .editNode,
qb-participants qb-player .editNode {
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
}
qb-participants qb-player[index="0"] .leave-team {
  display: none;
}
qb-participants button.leave {
  order: 11;
}
qb-participants button.leave::before {
  content: var(--icon-remove);
}
qb-participants qb-mc,
qb-participants qb-player {
  overflow: visible;
}
qb-participants:before {
  order: -1000;
  content: var(--icon-mc);
  margin-left: calc(var(--slot-margin) * -1);
  justify-content: start;
  background: var(--slot-color, var(--color-blue80));
  color: var(--slot-avatar-color);
  outline: var(--slot-avatar-outline) solid;
  width: var(--slot-icon-size);
  height: var(--slot-icon-size);
}
qb-participants qb-slot {
  --slot-avatar: var(--slot-index, "?");
  --slot-name: "No Team";
  margin-left: calc(var(--slot-margin) * -1);
  flex: 1 1 100%;
  justify-content: start;
}
qb-participants qb-slot.dragging {
  outline: 2px solid var(--color-outline);
}
qb-participants qb-slot label.join {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
qb-participants qb-slot label.join input:checked, qb-participants qb-slot label.join input:checked + * {
  display: none;
}
section.teams {
  display: grid;
  grid-template-columns: [teamrank_] min-content [_teamrank rank_ teamcount_] min-content [_teamcount _rank count_ teamname_] min-content [_count avatar_] min-content [_avatar name_] max-content [_name _teamname];
  gap: var(--gap-3);
}
section.teams details[open]::details-content {
  display: contents !important;
}
section.teams details qb-user:last-of-type * {
  margin-bottom: 1em;
}
section.teams details, section.teams qb-user, section.teams summary {
  display: contents;
}
section.teams summary {
  cursor: context-menu;
  font-weight: bold;
}
section.teams .rank {
  justify-self: right;
}
section.teams .rank:after {
  content: ".";
}
section.teams summary .rank {
  grid-column: teamrank_/_teamrank;
}
section.teams summary .name {
  grid-column: teamname_/_teamname;
}
section.teams summary .count {
  grid-column: teamcount_/_teamcount;
}
section.teams qb-user, section.teams div {
  display: contents;
}
section.teams qb-user .rank, section.teams div .rank {
  grid-column: rank_/_rank;
}
section.teams qb-user::part(avatar), section.teams div::part(avatar) {
  grid-column: avatar_/_avatar;
}
section.teams qb-user .name, section.teams div .name {
  grid-column: name_/_name;
}
section.teams qb-user .count, section.teams div .count {
  grid-column: count_/_count;
}
section.teams .count:before {
  content: "(";
}
section.teams .count:after {
  content: ")";
}
qb-player-avatar {
  display: flex;
  position: relative;
  font: 1rem;
}
qb-player-avatar input[type=text] {
  height: 2em;
}
qb-player-avatar > div {
  cursor: pointer;
  width: 2em;
  padding: 0 0;
  background: var(--slot-color);
  text-align: center;
  border: none;
  outline: none;
  display: grid;
  place-items: center;
}
qb-player-avatar input[type=color] {
  border: 0;
  padding: 0;
  width: 100%;
  height: 2em;
}
qb-player-avatar:focus-within qb-emoji-picker {
  display: block;
}
qb-player-avatar qb-emoji-picker {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  display: none;
}
qb-player-avatar qb-emoji-picker > * {
  grid-area: 1/1/1/1;
  text-align: center;
  line-height: 2em;
}
qb-player-avatar qb-emoji-picker > :not(input) {
  pointer-events: none;
}
@keyframes animating-alert {
  0%, 100% {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
  50% {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-fg);
  }
}
@keyframes animation-static-bg {
  100% {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
}
@keyframes animation-static-active {
  100% {
    background-color: var(--color-active-bg);
    color: var(--color-active-fg);
  }
}
@keyframes animation-static-highlight {
  100% {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-fg);
  }
}
@keyframes animation-static-todo {
  100% {
    background-color: var(--color-todo-bg);
    color: var(--color-todo-fg);
  }
}
html {
  --animate-static-highlight: animation-static-highlight 0s forwards;
  --animate-static-active: animation-static-active 0s forwards;
  --animate-static: var(--animate-static-active);
  --animate-static-todo: animation-static-todo 0s forwards;
  --animate-static-bg: animation-static-bg 0s forwards;
  --animate-alternate-highlight: 2s animating-alert alternate linear infinite;
}
.has-paused, .is-paused,
.alert-animate {
  --alert-animate: var(--animate-alternate-highlight);
}
.book {
  display: grid;
  row-gap: var(--raster-3p);
  column-gap: var(--raster-4p);
  grid-template-columns: [number] var(--raster-3p) [left_] max-content [_left right_] 1fr [_right];
  counter-reset: step;
}
@media screen and (max-width: 650px) {
  .book {
    grid-template-columns: [number] var(--raster-3p) [left_ right_] 1fr [_left _right];
  }
}
.book form, .book fieldset {
  display: contents;
}
.book .book-button {
  font: var(--font-2);
  justify-self: start;
}
.book legend {
  display: contents;
}
.book legend span {
  grid-column: number;
}
.book legend qb-gettext {
  grid-column: left_/_right;
}
.book form > fieldset > legend:before {
  counter-increment: step 1;
  grid-column: number;
  content: counter(step) ".";
}
.book input[type=submit],
.book qb-player-avatar {
  grid-column: left_/_right;
}
.book .staff a:nth-of-type(odd) {
  grid-column: left_;
}
.book .staff a:nth-of-type(even) {
  grid-column: right_;
}
.book .slot label:nth-of-type(odd) {
  grid-column: left_;
}
.book .slot label:nth-of-type(even) {
  grid-column: right_;
}
.book .slot label.left {
  grid-column: left_;
}
.book .slot label.right {
  grid-column: right_;
}
.book .slot label > * {
  vertical-align: middle;
}
.book .slot label .active {
  color: var(--color-label-fg);
  background-color: var(--color-label-bg);
}
#locations ul {
  flex-wrap: wrap;
  gap: 0 2em;
}
@media screen and (min-width: 550px) {
  #locations ul {
    display: flex;
  }
}
#locations li > * {
  margin-right: 0.5em;
}
#locations [country]::marker {
  content: var(--flag) " ";
}
@media screen and (max-width: 550px) {
  #locations li > strong {
    display: block;
  }
}
html[data-app^=home-] body > section {
  margin-bottom: 4em;
}
html[data-app^=home-] body > section:not(:first-of-type) {
  margin-top: 4em;
}
article.legal {
  margin: max(5vh, 2em) min(5vw, 2em);
}
qb-gettext span > :first-child:not(br) {
  margin-top: 0;
}
qb-gettext span > :last-child:not(br) {
  margin-bottom: 0;
}
qb-gettext:not(.show, [edit]) span:nth-child(n+2) {
  display: none;
}
qb-gettext.show span[lang], qb-gettext[edit] span[lang] {
  padding-left: 2.4ch !important;
}
qb-gettext.show span[lang]:before, qb-gettext[edit] span[lang]:before {
  margin-left: -2.2ch;
  content: var(--flag);
}
qb-gettext.show span > div:first-child, qb-gettext[edit] span > div:first-child {
  display: contents;
}
qb-gettext qb-gettext-edit {
  outline: 2px solid blue;
  position: absolute;
  z-index: 100000;
  left: 0;
  right: 0;
  cursor: text;
}
:root.edit qb-gettext {
  cursor: context-menu;
}
html.development .anchor, html.development .focus {
  border-width: 1px;
}
html.development .anchor.focus {
  border-color: purple;
}
html.development .anchor:not(.focus) {
  border-color: blue;
}
html.development .focus:not(.anchor) {
  border-color: orange;
}
html.development .selection-left {
  border-left-style: solid;
}
html.development .selection-right {
  border-right-style: solid;
}