:root {
  --border-radius: 12px;
  --small-border-radius: 6px;
  --list-padding: 4px 8px;
  --inter-module-spacing: 16px;
}

/* media breakpoints:

X-Small: <576px
Small: >= 576px
Medium: >= 768px
Large: >= 992px
Extra large: >= 1200px
*/
menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.reset {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3 */
}

/*
Sections
========
*/

body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-color: var(--secondary-block-border-color);
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}
:root {
  --body-bg: rgb(244, 242, 240);
  --body-color: hsl(210, 8%, 5%);
  --block-bg: #fff;
  --blockquote-color: hsl(210, 8%, 35%);
  --blockquote-bg: #fafafa;
  --blockquote-border-color: hsl(210, 8%, 80%);
  --blockquote-importante-border-color: rgb(0, 191, 165);
  --blockquote-importante-bg: #f2f3f5;
  --blockquote-atencion-border-color: rgb(255, 145, 0);
  --blockquote-atencion-bg: rgba(255, 145, 0, 0.1);
  --blockquote-peligro-border-color: rgb(255, 23, 68);
  --blockquote-peligro-bg: rgba(255, 23, 68, 0.1);
  --chip-bg: #fafafa;
  --tag-chip-bg: #9871c9;
  --tag-chip-color: #fff;
  --link-color: #0441b3;
  --input-border-color: #bbbbbb;
  --input-bg: #fff;
  --main-bg: transparent;
  --mdeditor-toolbar-bg: #fafafa;
  --mdeditor-preview-bg: #fafafa;
  --mdeditor-blockquote-bg: #f2f2f2;
  --mdeditor-btn-color: #222;
  --mdeditor-btn-hover-bg: #fafafa;
  --mdeditor-btn-hover-border-color: #95a5a6;
  --questions-list-border-color: #eaeaea;
  --progress-bar-blue-bar: #0286db;
  --secondary-color: #777;
  --site-menu-bg: #222;
  --site-menu-link-color: #fff;
  --site-menu-link-hover-color: yellow;
  --site-menu-link-hover-bg: #000;
  --site-menu-new-separator: #4d4d4d;
  --page-feedback-notice-bg: #e2f9da;
  --page-feedback-notice-color: darkgreen;
  --page-feedback-error-bg: #f9dada;
  --page-feedback-error-color: rgb(159, 5, 0);
}
.site-menu {
  display: flex;
  background: var(--site-menu-bg);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

main,
.site-menu {
  max-width: 1100px;
  margin: 0 auto;
}

.site-menu i {
  color: var(--site-menu-link-color);
}

.site-menu a {
  text-decoration: none;
  color: var(--site-menu-link-color);
  padding: 12px 12px;
  display: inline-block;
}

.site-menu a:hover {
  background: var(--site-menu-link-hover-bg);
  color: var(--site-menu-link-hover-color);
}

.site-menu li:first-child a {
  padding-left: 24px;
  padding-right: 24px;
  border-bottom-left-radius: var(--border-radius);
}

.site-menu li.new-question a {
  border-right: 1px solid var(--site-menu-new-separator);
}

main {
  background: var(--main-bg);
  border-top: 1px solid var(--main-bg);
  padding: 16px;
}
body {
  background: var(--body-bg);
  padding: 0 var(--inter-module-spacing);
}

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

a:hover {
  text-decoration: underline;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

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

table {
  border-collapse: collapse;
  margin: 16px 0;
  border: 1px solid #d3d3d3;
  width: 100%;
}

h1 {
  margin: 16px 0 6px 0;
}

th {
  text-align: left;
}

th,
td {
  padding: 6px 8px;
  border-bottom: 1px solid #ccc;
}

thead {
  background: rgb(240, 240, 240);
}

h1:first-child {
  margin-top: 0;
}

input[type="text"],
input[type="password"] {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 8px;
}

blockquote {
  padding: 12px 12px 12px 15px;
  margin: 0 1em 1.1em 1em;
  border-radius: 8px;
}
:root {
  --line-chart-color: #607d8b;
  --annotation-context-color: #546e7a;
  --annotation-badge-color: white;
  --annotation-color: #e8336d;
}

svg {
  background-color: white;
  font-family: "Lato";
}

.axis,
.axis text {
  fill: var(--line-chart-color);
}

.axis line,
path {
  stroke: var(--line-chart-color);
}

path {
  fill: none;
}

.annotation path {
  stroke: var(--annotation-badge-color);
}

.annotation:not(.above):not(.anomaly) path {
  stroke-dasharray: 1, 3;
}

.annotation text {
  fill: var(--annotation-badge-color);
}

.annotation-note-bg {
  fill: rgba(0, 0, 0, 0);
}

.annotation-note-title,
text.title {
  font-weight: bold;
}

svg .annotation.rect text {
  fill: var(--annotation-context-color);
  font-size: 0.6em;
  text-transform: uppercase;
}

svg .annotation.callout.rect path.subject {
  fill-opacity: 0.1;
}

svg .annotation.callout.rect path.subject {
  fill: var(--annotation-context-color);
  stroke: none;
  stroke-dasharray: 2, 8;
}

svg .annotation.badge .annotation-subject path {
  fill: var(--annotation-color);
  stroke-width: 0px;
  stroke-dasharray: none;
}

svg .annotation.badge path.subject-pointer {
  stroke-width: 0px;
}

svg .annotation.badge text {
  font-size: 0.7em;
}

svg text.legend {
  text-anchor: start;
  fill: var(--annotation-color);
}

text.title {
  font-size: 1.2em;
}
.new-journal-entry {
  padding: 8px 0;
}

.je-predictions header {
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.je-predictions menu {
  margin: 16px;
}

.je-predictions menu li {
  list-style: disc;
}

.je-predictions input[name="question_title"] {
  width: 300px;
}

.je-refs {
  border-top: 1px solid #dadada;
}

.je-refs ul {
  padding: 0;
}

.je-refs li {
  list-style: none;
}
/* Copy-paste from gm. */
.md-content ul,
.md-content ol {
  margin-bottom: 32px;
  margin-left: 8px;
}

.md-content code {
  background: var(--code-block-bg);
  padding: 2px 4px;
  border-radius: 3px;
}

.md-content ul ul,
.md-content ol ol,
.md-content ul ol,
.md-content ol ul {
  margin-bottom: 0;
}

.md-content li {
  margin-left: 16px;
}

.md-content ul li {
  list-style: disc;
}

.md-content ol li {
  list-style: decimal;
}

.md-content h1 {
  border-bottom: 2px solid #b9b9b9;
  overflow: hidden;
  font-size: 20px;
  color: #666;
  /* padding-bottom: 4px; */
  margin-bottom: 12px;
  margin-top: 40px;
}

.md-content a,
.md-content a:hover,
.md-content a:visited {
  text-decoration: underline;
}

.md-content a img {
  border: 0;
}

.md-content a.username-link,
.md-content a.username-link:hover,
.md-content a.username-link:visited {
  color: var(--username-link-color);
  text-decoration: none;
  font-weight: 600;
}

.md-content a.username-link:hover {
  text-decoration: underline;
}

.md-content h1:first-child {
  margin-top: 0;
}

.md-content h2 {
  font-size: 18px;
}

.md-content pre {
  background: hsl(0, 0%, 96.5%);
  border-radius: 6px;
  padding: 12px 20px;
  border-radius: 6px;
  margin-bottom: var(--box-gap);
}

.md-content blockquote {
  background: var(--mdeditor-blockquote-bg);
}

.md-content blockquote *:last-child {
  margin-bottom: 0;
}

.md-content table {
  margin: 24px 0;
}

.md-content table td,
.md-content table th {
  border: 1px solid var(--table-border-color);
  padding: 5px;
}

.md-content table th {
  background-color: #f3f3f3;
}

.md-content img {
  max-width: 100%;
  height: auto !important;
}

/* Youtube videos */
.md-content iframe {
  display: block;
  margin: 0 auto;
  width: 560px;
  aspect-ratio: 4 / 3;
}

@media screen and (max-width: 800px) {
  .md-content iframe {
    width: 100%;
  }
}

#markdown-toc {
  float: left;
  background: var(blockquote-bg);
  max-width: 200px;
  margin-right: 24px;
  padding: 8px;
  border: 1px solid var(blockquote-border-color);
  border-radius: 4px;
}

/* Callouts / admonitions */
.md-content .importante,
.md-content .consejo,
.md-content .atencion,
.md-content .peligro {
  /* border-left: 4px solid #666; */
  /* border-radius: 2px; */
  margin: 1em 0;
  padding: 16px;
}

.md-content .importante,
.md-content .consejo {
  background: var(--blockquote-importante-bg);
}

.md-content .importante:before,
.md-content .consejo:before {
  background: var(--blockquote-importante-border-color);
}

.md-content .atencion {
  background: var(--blockquote-atencion-bg);
}

.md-content .atencion:before {
  background: var(--blockquote-atencion-border-color);
}

.md-content .peligro {
  background: var(--blockquote-peligro-bg);
}

.md-content .peligro:before {
  background: var(--blockquote-peligro-border-color);
}
.mdeditor2 {
  margin-bottom: 12px;
}

.mdeditor2--help {
  display: flex;
  justify-content: end;
  margin-top: 6px;
}

.mdeditor2--toolbar {
  user-select: none;
  padding: 9px 10px;
  border-top: 1px solid var(--input-border-color);
  border-left: 1px solid var(--input-border-color);
  border-right: 1px solid var(--input-border-color);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  gap: 2px;
  background: var(--mdeditor-toolbar-bg);
  transition: 0.15s padding ease;
}

.mdeditor2--toolbar--compressed {
  padding: 0px 10px;
}

.mdeditor2--toolbar--compressed > * {
  display: none;
}

.mdeditor2--toolbar--compressed .btn:last-child {
  display: initial;
}

.mdeditor2--toolbar .btn {
  min-width: 30px;
  height: 30px;
  border: 1px solid transparent;
  text-align: center;
  display: inline-block;
  line-height: 30px;
  border-radius: 3px;
  background: none;
  color: var(--mdeditor-btn-color);
  margin: 0;
  font-size: 16px;
  padding: 0;
  cursor: pointer;
}

.mdeditor2--toolbar .btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mdeditor2--toolbar-separator {
  border-left: 1px solid var(--input-border-color);
  border-right: 1px solid transparent;
  margin: 5px 2px 0 1px;
  height: 22px;
}

.mdeditor2--toolbar .btn:first-child {
  margin-left: 0;
}

.mdeditor2 textarea,
.mdeditor2--preview {
  padding: 16px;
  width: 100%;
  min-height: 305px;
  height: auto;
  word-wrap: break-word;
  border: 1px solid var(--input-border-color);
  border-radius: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: var(--input-bg);
  color: var(--input-color);
}

@media (min-width: 800px) {
  .mdeditor2 textarea,
  .mdeditor2--preview {
    min-height: 385px;
  }
}

.comment-textarea .mdeditor2 textarea,
.comment-textarea .mdeditor2--preview {
  min-height: 165px;
}

.mdeditor2 textarea {
  max-height: 305px;
  resize: vertical;
}

.mdeditor2--toolbar .btn.active,
.mdeditor2--toolbar .btn:hover {
  background: var(--mdeditor-btn-hover-bg);
  border-color: var(--mdeditor-btn-hover-border-color);
}

.btn.mdeditor2--toolbar-toggle-full {
  flex-grow: 1;
  /* justify-items: flex-end; */
  text-align: right;
  color: #949494;
}

@media (min-width: 800px) {
  .mdeditor2 textarea {
    max-height: 685px;
  }

  .btn.mdeditor2--toolbar-preview {
    /* to prevent accidental clicks on toggle while previewing */
    margin-right: 44px;
  }

  .mdeditor2--toolbar-toggle-full {
    padding-right: 4px;
  }
}

.mdeditor2--toolbar .btn.mdeditor2--toolbar-toggle-full:hover {
  border-color: transparent;
}

.mdeditor2--toolbar .btn:disabled {
  opacity: 0.4;
}

.mdeditor2--preview {
  background: var(--mdeditor-preview-bg);
}

@media (max-width: 576px) {
  .mdeditor2--toolbar .mdeditor2--toolbar-clean,
  .mdeditor2--toolbar .mdeditor2--toolbar-code,
  .mdeditor2--toolbar .mdeditor2--toolbar-heading,
  .mdeditor2--toolbar .mdeditor2--toolbar-list-ol,
  .mdeditor2--toolbar .mdeditor2--toolbar-table {
    display: none;
  }
}
.mood-graph {
  padding-left: 5rem;
  padding-right: 5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 2rem;
  position: relative;
  max-width: 600px;
}

.mood-graph svg {
  height: 400px;
  max-height: 100%;
  width: 400px;
  max-width: 100%;
  touch-action: none;
}

/* TODO: clean these classes */

.font-bold {
  font-weight: 700;
}

.text-p3 {
  font-size: 12px;
  line-height: 16px;
}
.text-center {
  text-align: center;
}
.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.absolute {
  position: absolute;
}
.pointer-events-none {
  pointer-events: none;
}
.mood-pointer {
  border: 3px solid #fff;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background-color: #fff;
  display: flex;
  position: absolute;
  pointer-events: none;
}

.opacity-0 {
  opacity: 0;
}

.mood-surprised {
  color: rgb(250, 200, 68);
}

.mood-alert {
  color: rgb(203, 206, 78);
}

.mood-excited {
  color: rgb(162, 210, 91);
}

.mood-elated {
  color: rgb(89, 205, 104);
}

.mood-happy {
  color: rgb(67, 223, 157);
}

.mood-contented {
  color: rgb(45, 207, 197);
}

.mood-serene {
  color: rgb(55, 182, 200);
}

.mood-relaxed {
  color: rgb(53, 142, 193);
}

.mood-calm {
  color: rgb(32, 92, 183);
}

.mood-sleepy {
  color: rgb(20, 59, 149);
}

.mood-fatigued {
  color: rgb(94, 68, 171);
}

.mood-lethargic {
  color: rgb(128, 84, 200);
}

.mood-depressed {
  color: rgb(168, 97, 178);
}

.mood-sad {
  color: rgb(212, 94, 179);
}

.mood-upset {
  color: rgb(223, 78, 78);
}

.mood-stressed {
  color: rgb(238, 110, 73);
}

.mood-angry {
  color: rgb(248, 135, 45);
}

.mood-afraid {
  color: rgb(253, 157, 68);
}

.mood-tooltip {
  position: absolute;
  display: flex;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  font-weight: bold;
}
.mpager {
  margin: 40px auto;
  display: flex;
  justify-content: center;
}

.mpager .currentpage {
  padding: 1px 5px;
  border: 1px solid;
  margin: 0 2px;
}

.mpager a,
.mpager .current {
  border-radius: 3px;
  background: var(--alt1-bg);
  border: 1px solid var(--subtle-alt1-border-color);
  padding: 3px 7px;
  margin: 0 2px;
}

.mpager .disabled {
  color: var(--secondary-color);
}

.mpager .current {
  font-style: normal;
}

.mpager a:hover {
  border-color: var(--link-color);
}

.mpager .current {
  font-weight: bold;
}

.mpager .pagination {
  display: flex;
  gap: 2px;
}

.mpager .pagination * {
  box-sizing: border-box;
  display: inline-block;
  padding: 3px 7px;
}

.contents-stream--pager .mpager {
  margin: 16px 10px 16px;
}

.contents-stream--pager .mpager a {
  padding: 4px 7px;
  margin: 0 3px;
}

.contents-stream--pager .mpager * {
  font-size: 13px;
}
.progress-bar {
  width: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: right;
}

.progress-bar--label {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 2em;
  text-align: center;
  font-size: 12px;
  /* TODO: necessary? */
  color: var(--body-color);
}

.progress-bar--bar {
  border-radius: 3px 0 0 3px;
  height: 16px;
}

.progress-bar--nearly-full .progress-bar--bar {
  border-radius: 5px;
}

.progress-bar--blue .progress-bar--bar {
  background: var(--progress-bar-blue-bar);
}
.prolego-ui-autocomplete {
  background: #fff;
  max-width: 500px;
  overflow-x: hidden;
  padding: 0;
  border: 1px solid #ccc;
  filter: drop-shadow(0px 0 3px #0003);
}

.prolego-ui-autocomplete li {
  margin: 6px;
  list-style: none;
}

.prolego-ui-autocomplete li:hover {
  background: lightblue;
}

.prolego-ui-autocomplete .ui-menu-item-wrapper {
  padding: 4px 8px;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow-x: hidden;
  cursor: pointer;
}
.forecasts {
  margin: 32px 0 16px 0;
}

.question-reflection > div,
.forecasts .forecast {
  margin-bottom: 36px;
  background: var(--blockquote-bg);
  padding: 16px;
  border-radius: 8px;
}

.forecasts header {
  font-weight: bold;
  margin-bottom: 8px;
}

.forecast .weight {
  display: flex;
  gap: 8px;
}

.forecast .weight-pcent {
  width: 40px;
  font-size: 12px;
  color: var(--progress-bar-blue-bar);
}

.forecast .weight-pcent-bar {
  flex: 0 0 120px;
}

.forecast .weight-question-title {
  flex: 1 0 auto;
}

.forecast .weights {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
}

/* TODO: move to page-specific */
.new-forecast-form .weights {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.new-forecast-form .weights input[type="number"] {
  width: 50px;
}

.new-forecast-form .weights .unit {
  margin: 0 16px 0 4px;
}

.probability-mass .mass {
  font-weight: bold;
}
.question-form input[name="question[title]"] {
  width: 100%;
}

.question-form menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.question-form menu input {
  width: 100%;
}
.question-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.question-reflection header {
  font-weight: bold;
}

.question-jes header {
  font-weight: 700;
  text-transform: uppercase;
}
.questions-list > li {
  padding: var(--list-padding);
  border-bottom: 1px solid var(--questions-list-border-color);
  font-weight: 500;
}

.questions-list > li:last-child {
  border-bottom: none;
}

.question-details {
  display: flex;
  align-items: center;
}

.question-details li {
  padding: var(--list-padding);
}

.question-details li:first-child {
  padding-left: 0;
}

.question-tags {
  display: flex;
  gap: 16px;
}
.score {
  font-weight: bold;
}

.scorecard {
  vertical-align: top;
  border-radius: 16px;
  padding: 16px;
  background: #000;
  color: #eee;
  display: inline-block;
  margin-bottom: 16px;
}

.scorecard.very-bad {
  background: #b80000;
}

.score.very-bad {
  color: #b80000;
}

.scorecard.bad {
  background: #f78800;
}

.score.bad {
  color: #f78800;
}

.scorecard.ok {
  background: #b5b200;
}

.score.ok {
  color: #adad00;
}

.scorecard.good {
  background: #7cba00;
}

.score.good {
  color: #74ad00;
}

.scorecard.very-good {
  background: #35ba00;
}

.score.very-good {
  color: #35ba00;
}

.scorecard .label,
.correct-answer .label {
  text-transform: uppercase;
  font-size: 12px;
  font-family "Trebuchet MS";
  font-weight: bold;
}

.scorecard .label {
  text-align: center;
}

.scorecard .score {
  padding-top: 16px;
  font-size: 40px;
  text-align: center;
  font-weight: normal;
}
.tags .name {
  min-width: 200px;
}

.tag-questions {
  margin-top: 32px;
}

.tag-questions header {
  font-weight: bold;
  margin-bottom: 8px;
}
.page-feedback {
  padding: var(--inter-module-spacing);
  margin: var(--inter-module-spacing) 0;
  border-radius: var(--inter-module-spacing);
}

.page-feedback.notice {
  background: var(--page-feedback-notice-bg);
  color: var(--page-feedback-notice-color);
}

.page-feedback.error {
  background: var(--page-feedback-error-bg);
  color: var(--page-feedback-error-color);
}

.u-attention-block,
.u-attention {
  color: var(--page-feedback-error-color) !important;
  font-weight: bold;
}

.u-attention-block {
  margin: var(--inter-module-spacing) 0;
  padding: 16px;
  border-radius: var(--border-radius);
  background: var(--page-feedback-error-bg);
}

.u-chip {
  padding: 4px 8px;
  background: var(--chip-bg);
  border-radius: var(--small-border-radius);
}

.u-no-border {
  border: 0;
}

.u-small {
  font-size: 80%;
  font-weight: 400;
}

.u-secondary {
  color: var(--secondary-color);
}

.u-tag-chip {
  font-weight: bold;
  background: var(--tag-chip-bg);
}

.u-tag-chip a {
  color: var(--tag-chip-color);
}

.hidden {
  display: none !important;
}

tr.u-bottom-separator td {
  border-bottom: 1px solid #eeeeee;
}

.u-block {
  margin-bottom: 36px;
  background: var(--block-bg);
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}

.u-h1 {
  font-weight: 700;
  color: rgb(46, 46, 50);
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 12px;
}

.u-small {
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.87);
  justify-content: end;
}

.je-footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.u-text-block {
  line-height: 1.35;
  font-size: 16px;
}

.u-w100pc {
  width: 100%;
}
/*








 */