@charset "UTF-8";

/* client/src/style/style.less */
.scheme-light {
  --color-neutral: #eaeae1;
  --color-text: #3e3e29;
  --color-text-strong: #000;
  --color-text-invert: #f8f8f8;
  --color-neutral-invert: #3e3e29;
  --color-neutral-invert-text: #ccc5c2;
  --color-block: #3e3e29;
  --color-block-text: #ccc5c2;
  --color-highlight-1: #D3DE9C;
  --color-highlight-2: #E0B8A3;
  --color-highlight-3: #B3D9E6;
}
.scheme-dark {
  --color-neutral: #444444;
  --color-text: #eee;
  --color-text-strong: #fff;
  --color-text-invert: #3e3e29;
  --color-neutral-invert: #eaeae1;
  --color-neutral-invert-text: #3e3e29;
  --color-block: #000000;
  --color-block-text: #ccc5c2;
  --color-highlight-1: #5D6B24;
  --color-highlight-2: #7E3B2A;
  --color-highlight-3: #286C77;
}
body {
  --color-h: 19;
  --color-s: 50%;
  --color-v: 58%;
  --color-hsl:
    var(--color-h),
    var(--color-s),
    var(--color-v);
  --color-primary: hsl(var(--color-hsl));
  --color-secondary: 0;
  --color-accent: hsl(var(--color-hsl));
  --color-accent-l05: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 5%));
  --color-accent-l10: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 10%));
  --color-accent-l15: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 15%));
  --color-accent-l20: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 20%));
  --color-accent-l25: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 25%));
  --color-accent-l30: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 30%));
  --color-accent-l35: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 35%));
  --color-accent-l40: hsl(var(--color-h), var(--color-s), calc(var(--color-v) + 40%));
  --color-accent-d05: hsl(var(--color-h), var(--color-s), calc(var(--color-v) - 5%));
  --color-accent-d10: hsl(var(--color-h), var(--color-s), calc(var(--color-v) - 10%));
  --color-accent-d15: hsl(var(--color-h), var(--color-s), calc(var(--color-v) - 15%));
  --color-accent-d20: hsl(var(--color-h), var(--color-s), calc(var(--color-v) - 20%));
  --color-accent-d25: hsl(var(--color-h), var(--color-s), calc(var(--color-v) - 25%));
  --color-accent-d30: hsl(var(--color-h), var(--color-s), calc(var(--color-v) - 30%));
  --color-accent-d40: hsl(var(--color-h), var(--color-s), calc(var(--color-v) - 40%));
  --color-highlight: var(--color-highlight-1);
}
body:not(.dark-mode) {
  --color-neutral: #eaeae1;
  --color-text: #3e3e29;
  --color-text-strong: #000;
  --color-text-invert: #f8f8f8;
  --color-neutral-invert: #3e3e29;
  --color-neutral-invert-text: #ccc5c2;
  --color-block: #3e3e29;
  --color-block-text: #ccc5c2;
  --color-highlight-1: #D3DE9C;
  --color-highlight-2: #E0B8A3;
  --color-highlight-3: #B3D9E6;
}
body.dark-mode {
  --color-neutral: #444444;
  --color-text: #eee;
  --color-text-strong: #fff;
  --color-text-invert: #3e3e29;
  --color-neutral-invert: #eaeae1;
  --color-neutral-invert-text: #3e3e29;
  --color-block: #000000;
  --color-block-text: #ccc5c2;
  --color-highlight-1: #5D6B24;
  --color-highlight-2: #7E3B2A;
  --color-highlight-3: #286C77;
}
body.scheme-gray {
  --color-h: 19;
  --color-s: 0%;
  --color-v: 49%;
}
body.scheme-chinese-black {
  --color-h: 210;
  --color-s: 4%;
  --color-v: 9%;
}
body.scheme-slate-gray {
  --color-h: 210;
  --color-s: 13%;
  --color-v: 50%;
}
body.scheme-watermelon-red {
  --color-h: 4;
  --color-v: 49%;
}
body.scheme-salmon {
  --color-h: 10;
  --color-s: 79%;
  --color-v: 68%;
}
body.scheme-rose-gold {
  --color-h: 348;
  --color-s: 41%;
  --color-v: 63%;
}
body.scheme-orange {
  --color-h: 19;
  --color-v: 58%;
}
body.scheme-orioles-orange {
  --color-h: 10;
  --color-s: 100%;
  --color-v: 56%;
}
body.scheme-peach-caramel {
  --color-h: 24;
  --color-s: 55%;
  --color-v: 51%;
}
body.scheme-amber-brown {
  --color-h: 20;
  --color-s: 41%;
  --color-v: 46%;
}
body.scheme-special-walnut {
  --color-h: 28;
  --color-s: 31%;
  --color-v: 47%;
}
body.scheme-sandstorm {
  --color-h: 54;
  --color-s: 70%;
  --color-v: 56%;
  --color-neutral: #444444;
  --color-text: #eee;
  --color-text-strong: #fff;
  --color-text-invert: #3e3e29;
  --color-neutral-invert: #eaeae1;
  --color-neutral-invert-text: #3e3e29;
  --color-block: #000000;
  --color-block-text: #ccc5c2;
  --color-highlight-1: #5D6B24;
  --color-highlight-2: #7E3B2A;
  --color-highlight-3: #286C77;
}
body.scheme-royal-gold {
  --color-h: 46;
  --color-s: 98%;
  --color-v: 48%;
  --color-neutral: #444444;
  --color-text: #eee;
  --color-text-strong: #fff;
  --color-text-invert: #3e3e29;
  --color-neutral-invert: #eaeae1;
  --color-neutral-invert-text: #3e3e29;
  --color-block: #000000;
  --color-block-text: #ccc5c2;
  --color-highlight-1: #5D6B24;
  --color-highlight-2: #7E3B2A;
  --color-highlight-3: #286C77;
}
body.scheme-pistachio {
  --color-h: 87;
  --color-s: 50%;
  --color-v: 60%;
}
body.scheme-medium-sea-green {
  --color-h: 140;
  --color-v: 49%;
}
body.scheme-american-green {
  --color-h: 125;
  --color-v: 49%;
}
body.scheme-aquamarine {
  --color-h: 157;
  --color-s: 50%;
  --color-v: 58%;
}
body.scheme-teal {
  --color-h: 184;
  --color-s: 32%;
  --color-v: 41%;
}
body.scheme-green-teal {
  --color-h: 173;
  --color-s: 87%;
  --color-v: 28%;
}
body.scheme-pastel-teal {
  --color-h: 180;
  --color-s: 37%;
  --color-v: 55%;
}
body.scheme-azure {
  --color-h: 210;
  --color-s: 100%;
  --color-v: 50%;
}
body.scheme-cyan-blue-azure {
  --color-h: 210;
  --color-s: 100%;
  --color-v: 50%;
}
body.scheme-moonstone {
  --color-h: 197;
  --color-v: 49%;
}
body.scheme-skype-blue {
  --color-h: 196;
  --color-s: 100%;
  --color-v: 47%;
}
body.scheme-dark-lavender {
  --color-h: 279;
  --color-s: 30%;
  --color-v: 43%;
}
body.scheme-pale-khaki {
  --color-h: 39;
  --color-s: 26%;
  --color-v: 66%;
}
body.scheme-khaki {
  --color-h: 54;
  --color-s: 77%;
  --color-v: 75%;
  --color-neutral: #444444;
  --color-text: #eee;
  --color-text-strong: #fff;
  --color-text-invert: #3e3e29;
  --color-neutral-invert: #eaeae1;
  --color-neutral-invert-text: #3e3e29;
  --color-block: #000000;
  --color-block-text: #ccc5c2;
  --color-highlight-1: #5D6B24;
  --color-highlight-2: #7E3B2A;
  --color-highlight-3: #286C77;
}
body.scheme-dark-khaki {
  --color-h: 56;
  --color-s: 38%;
  --color-v: 58%;
}
body.scheme-khaki-green {
  --color-h: 55;
  --color-s: 19%;
  --color-v: 45%;
}
h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9 {
  font-family: PT Sans;
}
hr {
  border: transparent;
  background: var(--color-primary);
  height: 0.25em;
}
a {
  text-decoration: none;
  color: var(--color-text);
}
a[action],
a[data-action] {
  cursor: pointer;
}
p {
  margin-block-start: 0;
}
p a {
  opacity: 0.7;
}
p a:hover {
  background: var(--color-highlight);
  text-decoration: underline;
  opacity: 1;
}
q,
blockquote {
  color: var(--color-primary);
}
math-latex {
  color: var(--color-primary);
}
math-latex .katex-display,
math-latex .katex {
  color: var(--color-accent-d10);
}
math-latex .katex-display .colorbox,
math-latex .katex .colorbox {
  opacity: 0.5;
}
math-latex.left > .katex-display > .katex {
  text-align: left;
}
math-latex.right > .katex-display > .katex {
  text-align: right;
}
math-latex[display="1"] {
  display: block;
  overflow-x: auto;
}
math-latex[display="1"]::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
math-latex[display="1"]::-webkit-scrollbar-track {
  background-color: transparent;
}
math-latex[display="1"]::-webkit-scrollbar-thumb {
  background-color: hsla(var(--color-hsl), 0.4);
}
math-latex .highlight {
  background: var(--color-highlight-1) !important;
}
math-latex .highlight.h1 {
  background: var(--color-highlight-1) !important;
}
math-latex .highlight.h2 {
  background: var(--color-highlight-2) !important;
}
math-latex .highlight.h3 {
  background: var(--color-highlight-3) !important;
}
dialog {
  border: transparent;
  outline: transparent;
  background: var(--color-neutral);
  box-shadow: 5px 5px 5px #00000055;
  color: var(--color-text);
}
[hidden] {
  display: none !important;
}
img.user-image {
  height: 36px;
  border-radius: 20px;
}
#top {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 20px;
  z-index: 10;
  background-color: var(--color-primary);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
@media print {
  #top {
    display: none;
  }
}
@media only screen and (max-width: 720px) {
  #top {
    padding: 5px 0px;
    font-size: 14px;
  }
  #top #site-title {
    font-size: 1em;
    margin-left: 15px !important;
  }
  #top #site-nav {
    font-size: 1.5em;
    gap: 0 0.6em;
  }
}
@media only screen and (min-width: 721px) {
  #top #site-title {
    font-size: 2em;
  }
  #top #site-nav {
    font-size: 1em;
    gap: 0 1.8em;
  }
}
#top .inner {
  display: flex;
  flex-direction: row;
  gap: 0 10px;
  margin: 0 auto;
  width: 100%;
  align-items: center;
  justify-content: space-around;
}
@media only screen and (min-width: 550px) {
  #top .inner {
    justify-content: space-between;
  }
}
#top a {
  color: var(--color-text-invert);
  cursor: pointer;
}
#top a:hover {
  color: var(--color-accent-d25);
}
#top #site-title {
  margin: 0;
  font-family: PT Sans;
  text-align: left;
  color: var(--color-text-invert);
}
@media only screen and (max-width: 720px) {
  #top #site-title {
    display: none;
  }
}
#top #site-nav {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  align-items: center;
  font-family: PT Sans;
  font-weight: bold;
}
#top #site-nav a:before {
  margin-right: 0.3em;
}
@media only screen and (max-width: 720px) {
  #top #site-nav a .label {
    display: none;
  }
}
@media only screen and (min-width: 550px) {
  #top #site-nav a[action=logout]:before {
    display: none;
  }
}
#top .search-input {
  display: inline;
  padding: 2px 5px;
  border: transparent;
  background: transparent;
  outline: transparent;
  font-family: PT Sans;
  font-size: 0.9em;
  color: var(--color-text-invert);
}
#top .search-input::placeholder {
  color: var(--color-text-invert);
}
ol.sidebar-menu {
  box-sizing: border-box;
  margin: 0em;
  padding: 0em;
  background: var(--color-primary);
  counter-reset: toc-num-1;
}
ol.sidebar-menu ol {
  margin: 0;
  padding: 0;
}
ol.sidebar-menu li {
  margin: 0em;
  padding: 0em 32px 0 0;
  list-style-type: none;
  background: #ffffff55;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 0px solid var(--color-accent);
  overflow: hidden;
  counter-increment: toc-num-1;
}
ol.sidebar-menu li a.page {
  display: block;
  margin: 0em;
  padding: 1em 0 1em 1em;
  cursor: pointer;
  color: #333;
}
ol.sidebar-menu li a.page:before {
  content: counter(toc-num-1) ". ";
}
ol.sidebar-menu li a.button {
  float: right;
  padding: 0px;
  margin: 12px -24px 0px 0px;
  font-size: 25px;
  cursor: pointer;
  color: #555;
  transform: rotate(0deg);
  transition: transform 0.5s ease-in;
}
ol.sidebar-menu li a.button:before {
  content: "\f0062";
  font-family: Material Design Icons;
}
ol.sidebar-menu li a.button:hover {
  color: #111;
}
ol.sidebar-menu li.open > a.button {
  transform: rotate(180deg);
  transition: transform 0.2s ease-in;
}
ol.sidebar-menu li.open > a.button:before {
  content: "\f0063";
}
ol.sidebar-menu li li {
  background: #ffffff88;
}
ol.sidebar-menu li li li {
  background: #ffffffaa;
}
ol.sidebar-menu li:hover {
  border-left-width: 5px;
  transition: border-left-width 0.1s ease-in;
}
ol.sidebar-menu li > ol {
  max-height: 0;
  transition: max-height 0.3s ease-out;
  counter-reset: toc-num-2;
}
ol.sidebar-menu li > ol li {
  counter-increment: toc-num-2;
}
ol.sidebar-menu li > ol li a.page:before {
  content: counter(toc-num-1) "." counter(toc-num-2) ". ";
}
ol.sidebar-menu li > ol li > ol {
  counter-reset: toc-num-3;
}
ol.sidebar-menu li > ol li > ol li {
  counter-increment: toc-num-3;
  font-size: 0.8em;
  padding-left: 1em;
}
ol.sidebar-menu li > ol li > ol li a.page {
  opacity: 0.8;
}
ol.sidebar-menu li > ol li > ol li a.page:before {
  font-size: 0.7em;
  content: counter(toc-num-3) ".";
  margin-right: 0.5em;
  opacity: 0.5;
}
ol.sidebar-menu li.open > ol {
  max-height: 1000px;
  transition: max-height 0.3s ease-in;
}
ol.sidebar-menu li.this > a.page {
  font-weight: bold;
}
ol.sidebar-menu li.this > a.page:after {
  content: "\a0\f06c4";
  font-family: Material Design Icons;
  color: var(--color-primary);
}
body.layout-app {
  margin: 0px;
  padding: 0px;
  display: grid;
  grid-template-areas: "header header" "menubar menubar" "sidebar main";
  grid-template-rows: 3em 1.6em 1fr;
  grid-template-columns: 200px 1fr;
  background: #f8f8f8;
  font-family: PT Sans;
  font-size: 16px;
  color: var(--color-text);
}
@media only screen and (max-width: 384px) {
  body.layout-app {
    font-size: 20px;
  }
}
@media only screen and (min-width: 550px), only screen and (min-width: 385px) and (max-width: 550px) {
  body.layout-app {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    grid-gap: 0px;
  }
}
body.layout-app .body-scrollable {
  display: block;
  margin: 0;
  padding: 0px;
}
body.layout-app #top {
  grid-area: header;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: transparent;
  box-shadow: none;
}
body.layout-app #top #site-title {
  font-size: 1em;
}
body.layout-app #main {
  grid-area: main;
  padding: 1em;
  overflow: auto;
}
body.layout-app #main h1 {
  margin: 0 0 1em 0;
  padding: 10px;
  background: var(--color-primary);
  color: var(--color-text-invert);
}
body.layout-app #main h2 {
  margin: 0 0 1em 0;
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-primary);
}
body.layout-app #main table {
  width: 100%;
}
body.layout-app #main table thead {
  position: sticky;
  top: 0;
}
body.layout-app #main dd:before {
  display: none;
}
body.layout-app #menubar {
  grid-area: menubar;
  user-select: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 0.8em;
}
body.layout-app #menubar .menu-item {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
body.layout-app #menubar .menu-item:before {
  display: none;
  content: "";
}
body.layout-app #menubar .menu-item:hover {
  background: #ddd;
}
body.layout-app #menubar .menu-item a {
  display: inline-block;
  padding: 3px 5px;
  min-width: 150px;
}
body.layout-app #menubar .menu.main {
  margin: 0;
  padding: 0;
  background: #f8f8f8;
}
body.layout-app #menubar .menu.main > .menu-item {
  display: inline-block;
}
body.layout-app #menubar .menu.main > .menu-item > a {
  min-width: unset;
}
body.layout-app #menubar .menu.main > .menu-item > .menu.submenu {
  display: block;
}
body.layout-app #menubar .menu.submenu {
  display: inline-block;
  padding: 5px;
  position: absolute;
  background: #f8f8f8;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 5px #0002;
}
@media only screen and (min-width: 550px), only screen and (min-width: 385px) and (max-width: 550px) {
  body.layout-app #sidebar {
    grid-area: sidebar;
    bottom: 0;
    width: auto;
    border-right: 1px solid #ddd;
  }
}
body.layout-app #sidebar ol {
  margin: 0;
  padding: 0;
  user-select: none;
}
body.layout-app #sidebar ol li {
  display: block;
  margin: 0;
  padding: 0;
}
body.layout-app #sidebar ol li:before {
  display: none;
  content: "";
}
body.layout-app #sidebar ol li a {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  cursor: pointer;
}
body.layout-app #sidebar ol li a:hover {
  background: #ddd;
}
@font-face {
  font-family: "Cutive Mono";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/cutivemono/v23/m8JWjfRfY7WVjVi2E-K9H6RCTms.ttf) format("truetype");
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/ptsans/v18/jizaRExUiTo99u79D0KEwA.ttf) format("truetype");
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes goyang {
  25% {
    transform: rotate(45deg);
  }
  75% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes mondarmandir {
  25% {
    transform: translate(-5px, 0px);
  }
  75% {
    transform: translate(5px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes detailsopen {
  0% {
    margin-left: -100px;
    opacity: 0;
  }
  100% {
    margin-left: 0px;
    opacity: 1;
  }
}
@keyframes placeholderAnimation {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
.bullet-flip {
  transform: rotate(90deg);
}
.content > div {
  margin-bottom: 1em;
}
.content > div.scrollable {
  overflow-x: auto;
}
.content figure div {
  margin-bottom: 0;
}
.content ul {
  margin-bottom: 1em;
  padding: 0 0 0 2em;
}
.content ul li {
  display: block;
  padding: 0 0 0 1em;
}
.content ul li:before {
  display: block;
  float: left;
  margin: 0 0 0 -2em;
  font-family: Material Design Icons;
  content: "\f0766";
  color: var(--color-primary);
  transform: scale(1, -1) rotate(90deg);
}
.content ul li:nth-child(16n):before {
  content: "\f0a9e";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+15):before {
  content: "\f0a9f";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+14):before {
  content: "\f0aa0";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+13):before {
  content: "\f0aa1";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+12):before {
  content: "\f0aa2";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+11):before {
  content: "\f0aa3";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+10):before {
  content: "\f0aa4";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+9):before {
  content: "\f0aa5";
  transform: rotate(90deg);
}
.content ul li:nth-child(16n+8):before {
  content: "\f0aa4";
}
.content ul li:nth-child(16n+7):before {
  content: "\f0aa3";
}
.content ul li:nth-child(16n+6):before {
  content: "\f0aa2";
}
.content ul li:nth-child(16n+5):before {
  content: "\f0aa1";
}
.content ul li:nth-child(16n+4):before {
  content: "\f0aa0";
}
.content ul li:nth-child(16n+3):before {
  content: "\f0a9f";
}
.content ul li:nth-child(16n+2):before {
  content: "\f0a9e";
}
.content details {
  margin-bottom: 1em;
  padding: 0 1em 0 2em;
  font-size: 0.9em;
  color: var(--color-text);
  opacity: 0.7;
}
.content details[open] {
  opacity: 0.9;
}
.content details[open] summary:before {
  transform: rotate(90deg);
  transition: transform 0.25s ease-in;
}
.content details[open] summary {
  margin-bottom: 10px;
}
.content details summary {
  display: block;
  cursor: pointer;
  font-weight: bold;
  transition: margin 250ms ease, opacity 150ms ease;
}
.content details summary:before {
  float: left;
  margin-right: 1em;
  font-family: Material Design Icons;
  content: "\f040a";
  transition: transform 1s ease-in;
}
.indented {
  margin-left: 1.5em;
}
.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration: underline;
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.sub-content {
  box-sizing: border-box;
  font-size: 0.8em;
  line-height: 1.5em;
}
.sub-content.collapsible {
  padding: 0;
  border: 2px solid var(--color-primary);
  background: rgba(205, 119, 106, 0.1);
  overflow: hidden;
  opacity: 0.5;
}
.sub-content.collapsible[open] {
  opacity: 0.9;
}
.sub-content.collapsible[open]:hover {
  opacity: 1;
}
.sub-content.collapsible:hover {
  opacity: 0.7;
}
.sub-content.collapsible > summary {
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: var(--color-primary);
}
.sub-content.collapsible > summary [action=open-link] {
  float: right;
}
.sub-content.collapsible > summary [action=open-link]:hover {
  color: var(--color-text-strong);
}
.sub-content.collapsible > .inner {
  padding: 0.5em 2em;
}
.sub-content.collapsible[open] > .inner {
  animation: detailsopen 0.5s ease-in;
}
@media only screen and (min-width: 550px) {
  .sub-content.side {
    float: right;
    width: 200px;
    margin-right: -215px;
  }
}
.sub-content.article {
  margin: 0 1em 1em 1em;
  height: auto;
}
@media only screen and (max-width: 384px) {
  .sub-content.article {
    margin-left: 50px;
  }
}
.sub-content.article:target {
  position: fixed;
  top: 20px;
  bottom: 90px;
  left: 50%;
  width: 400px;
  background: var(--color-neutral-invert);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  color: var(--color-neutral-invert-text) !important;
  overflow-y: scroll;
}
.sub-content.article:target .title {
  padding: 10px 15px;
}
.sub-content.article:target .content {
  display: block;
}
@media only screen and (max-width: 384px) {
  .sub-content.article:target {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 45px;
    margin: 0px;
    width: auto;
    font-size: 1em;
  }
}
.sub-content.article .title {
  margin: 0;
  min-height: auto !important;
  padding: 10px 20px;
  border-bottom: 1px solid transparent !important;
  font-weight: bold;
  font-family: PT Sans;
  color: var(--color-text);
  overflow-x: visible !important;
}
.sub-content.article .title:hover {
  background: rgba(0, 0, 0, 0.3);
}
.sub-content.article .title a {
  display: block;
  padding: 0px 0px 0px 45px;
}
.sub-content.article .title a:before {
  float: left;
  margin-left: -45px;
  margin-top: 3px;
  font-size: 35px;
}
.sub-content.article .content {
  display: none;
  margin: 0;
  min-height: 200px;
  padding: 10px 15px;
  overflow: hidden;
}
.sub-content.media {
  display: flex;
  flex-direction: column;
  margin: 0 0 1em 0;
  width: 100%;
  text-align: center;
}
@media only screen and (min-width: 550px) {
  .sub-content.media {
    display: block;
  }
}
.sub-content.media .the-media {
  margin: 0 auto;
  text-align: center;
  overflow: auto;
}
.sub-content.media .media-text {
  margin-top: 1em;
  padding: 0 2em;
  text-align: center;
  order: 2;
}
@media only screen and (min-width: 550px) {
  .sub-content.media .media-text {
    padding: 0em;
    float: right;
    margin-top: 0em;
    margin-right: -250px;
    width: 200px !important;
    text-align: left;
  }
  .sub-content.media .media-text * {
    text-align: left;
  }
}
.sub-content.media p {
  margin: 0;
}
.sub-content.media.size-full .the-media {
  width: 100%;
}
.sub-content.media.size-medium .the-media {
  width: 100%;
}
.sub-content.media.size-small .the-media {
  width: 75%;
}
.sub-content.media.size-tiny .the-media {
  width: 50%;
}
@media only screen and (min-width: 550px) {
  .sub-content.media.size-full .the-media {
    width: 100%;
  }
  .sub-content.media.size-medium .the-media {
    width: 75%;
  }
  .sub-content.media.size-small .the-media {
    width: 50%;
  }
  .sub-content.media.size-tiny .the-media {
    width: 25%;
  }
}
.sub-content .original-text,
.sub-content .inner-text {
  line-height: 1.5em;
}
ol {
  list-style-type: none;
  counter-reset: ol-level-1;
}
ol li {
  display: block;
  clear: left;
  box-sizing: border-box;
  padding: 2px 0px 2px 10px;
  border-left: 2px solid transparent;
}
ol li:hover {
  background: rgba(0, 0, 0, 0.02);
  border-left: 2px solid rgba(0, 0, 0, 0.5);
}
ol li:hover:before {
  background: rgba(0, 0, 0, 0.5);
  color: #f8f8f8;
}
ol li:before {
  float: left;
  clear: left;
  padding: 6px 5px;
  margin: -2px 0px 3px -41px;
  min-width: 30px;
  min-height: 25px;
  box-sizing: border-box;
  counter-increment: ol-level-1;
  content: counter(ol-level-1);
  background: rgba(0, 0, 0, 0.1);
  color: #777;
  text-align: center;
  font-size: 0.7em;
  line-height: 1em;
}
ol ol {
  counter-reset: ol-level-2;
  list-style-type: none;
}
ol ol li:before {
  counter-increment: ol-level-2;
  content: counter(ol-level-2, upper-alpha);
}
blockquote:before {
  float: left;
  margin-left: -45px;
  font-size: 35px;
  content: "\f027e";
  font-family: "Material Design Icons";
  color: var(--color-primary);
}
pre {
  margin-left: 2em;
}
figure {
  position: relative;
}
figure div {
  margin-bottom: 0;
}
figure p,
figure figcaption {
  font-size: 1em;
  color: var(--color-text);
}
figure embed-content {
  display: block;
}
figure:hover .media-links {
  display: block;
}
figure .media-links {
  display: none;
  position: absolute;
  padding: 0;
  bottom: 0px;
  right: 0px;
  background: #00000055;
  font-size: 0.7em;
}
figure .media-links a {
  display: inline-block;
  margin: 0 0em;
  padding: 0.25em 1em;
  color: #fff;
}
figure .media-links a:hover {
  background: #00000088;
}
table {
  margin: 0 auto 1.5em auto;
  border-collapse: collapse;
  font-size: 0.8em;
}
table thead {
  background: hsla(var(--color-hsl), 0.5);
}
table tr:nth-child(2n-1) {
  background: hsla(var(--color-hsl), 0.2);
}
table th,
table td {
  padding: 0.5em 1em;
  border: 1px solid hsla(var(--color-hsl), 0.5);
}
table th.c,
table td.c {
  text-align: center;
}
table th.r,
table td.r {
  text-align: right;
}
table tr.h,
table th.h,
table td.h,
table col.h {
  background: var(--color-highlight-1) !important;
}
table tr.h1,
table th.h1,
table td.h1,
table col.h1 {
  background: var(--color-highlight-1) !important;
}
table tr.h2,
table th.h2,
table td.h2,
table col.h2 {
  background: var(--color-highlight-2) !important;
}
table tr.h3,
table th.h3,
table td.h3,
table col.h3 {
  background: var(--color-highlight-3) !important;
}
table td[on] {
  color: green;
  font-weight: bold;
}
table td[off] {
  color: #aaa;
}
table.noformat {
  background: transparent;
}
table.noformat > tr,
table.noformat > thead > tr,
table.noformat > tbody > tr {
  background: transparent;
}
table.noformat > tr > td,
table.noformat > thead > tr > td,
table.noformat > tbody > tr > td {
  border: none;
}
table.noformat > tr > th,
table.noformat > thead > tr > th,
table.noformat > tbody > tr > th {
  border: none;
  background: transparent;
}
table.plain > tr,
table.plain > thead > tr,
table.plain > tbody > tr {
  background: transparent;
}
table.plain > tr > th,
table.plain > thead > tr > th,
table.plain > tbody > tr > th {
  background: transparent;
}
table.pack > tr > th,
table.pack > thead > tr > th,
table.pack > tbody > tr > th,
table.pack > tr > td,
table.pack > thead > tr > td,
table.pack > tbody > tr > td {
  padding: 0;
}
table.checker tr {
  background: transparent;
}
table.checker tr td {
  background: hsla(var(--color-hsl), 0.2);
}
table.checker tr td:nth-child(2n) {
  background: hsla(var(--color-hsl), 0.4);
}
table.checker tr:nth-child(2n) {
  background: transparent;
}
table.checker tr:nth-child(2n) td {
  background: hsla(var(--color-hsl), 0.4);
}
table.checker tr:nth-child(2n) td:nth-child(2n) {
  background: hsla(var(--color-hsl), 0.2);
}
table.linear-scale {
  font-size: 1em;
  color: #555;
}
table.linear-scale > tr,
table.linear-scale > thead > tr,
table.linear-scale > tbody > tr {
  background: transparent;
}
table.linear-scale > tr > td,
table.linear-scale > thead > tr > td,
table.linear-scale > tbody > tr > td {
  border: none;
}
table.linear-scale > tr > th,
table.linear-scale > thead > tr > th,
table.linear-scale > tbody > tr > th {
  border: none;
  background: transparent;
}
table.linear-scale tr:first-child {
  border-bottom: 3px solid #888;
}
table.linear-scale td {
  width: 3em;
  text-align: center;
}
table.linear-scale th {
  width: 1em;
  text-align: left;
}
table.horner tr,
table.horner td,
table.horner th {
  border: none;
  background: transparent;
  text-align: center;
  min-width: 2em;
}
table.horner tr td:first-child {
  border-right: 2px solid rgba(0, 0, 0, 0.2);
}
table.horner tr:nth-child(2n) td:not(:first-child) {
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
table.horner tr:nth-child(2n) td:last-child:after {
  float: right;
  margin-right: -20px;
  content: "+";
  color: var(--color-primary);
  font-weight: bold;
}
table.horner tr:nth-child(2n+1):last-child td:first-child {
  border-right: transparent;
}
table.truth-table tr {
  background: transparent;
}
table.truth-table tr:nth-child(4n) td:not(.o),
table.truth-table tr.l td:not(.o) {
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
}
table.truth-table thead {
  background: transparent;
}
table.truth-table thead th:not(.o) {
  background: rgba(0, 0, 0, 0.1);
}
table.truth-table thead td:not(.o),
table.truth-table thead th:not(.o) {
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  border-top: 2px solid rgba(0, 0, 0, 0.6);
}
table.truth-table th {
  font-weight: bold;
}
table.truth-table td,
table.truth-table th {
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom: transparent;
  border-top: transparent;
  background: transparent;
  text-align: center;
}
table.truth-table td.o,
table.truth-table th.o {
  color: rgba(0, 0, 0, 0.5);
  border: transparent;
}
table.truth-table td.h,
table.truth-table th.h {
  font-weight: bold;
}
table.truth-table td.l,
table.truth-table th.l {
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
}
table.truth-table td.b0,
table.truth-table th.b0 {
  color: #C85B5B;
}
table.truth-table td.b1,
table.truth-table th.b1 {
  color: #6A7326;
  font-weight: bold;
}
table.relation tr {
  background: transparent;
}
table.relation tr:nth-child(2) {
  background: transparent;
}
table.relation tr th:first-child {
  text-align: right;
}
table.relation tr:first-child td,
table.relation tr:first-child th {
  border-top: none;
}
table.relation.rotate-codomain tr:first-child td,
table.relation.rotate-codomain tr:first-child th {
  vertical-align: bottom;
}
table.relation.rotate-codomain tr:first-child td span,
table.relation.rotate-codomain tr:first-child th span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
table.relation td,
table.relation th {
  min-width: 2em;
  min-height: 2em;
  height: 2em;
  background: transparent;
  text-align: center;
}
table.relation td:first-child,
table.relation th:first-child {
  border-left: none;
}
table.relation td.r {
  color: green;
  font-weight: bold;
}
table.relation td.n {
  color: red;
  font-weight: normal;
}
table.relation td.n:before {
  content: "*";
}
.input input,
.input textarea {
  box-sizing: border-box;
  padding: 3px 5px;
  border: transparent;
  background: rgba(255, 255, 255, 0.5);
  color: #555;
  outline: 1px solid transparent;
}
.input input:focus,
.input textarea:focus {
  border-bottom: 1px solid #888;
  background: #fff;
}
.keyboard {
  padding: 10px;
  margin: 0 0 10px 0;
  background: rgba(0, 0, 0, 0.1);
}
.keyboard .key {
  min-width: 50px;
  min-height: 50px;
  padding: 10px;
  margin: 0 5px 5px 0;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.keyboard .key:hover {
  background: rgba(0, 0, 0, 0.3);
}
key {
  display: inline-block;
  padding: 3px 4px;
  margin: 0 2px 0 0;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}
dl dt {
  clear: left;
  font-weight: bold;
  color: var(--color-primary);
}
dl dd:after {
  content: "";
  display: block;
  height: 1em;
  clear: both;
}
@media only screen and (min-width: 550px) {
  dl dt {
    float: left;
    width: 100px;
    text-align: right;
  }
  dl dd {
    margin-left: 120px;
    padding-left: 10px;
    border-left: 3px solid var(--color-primary);
  }
  dl dd:before {
    float: right;
    margin-right: -45px;
    font-size: 35px;
    content: "\f021a";
    font-family: "Material Design Icons";
    color: #7AAC39;
  }
}
.dlist {
  display: flex;
  flex-direction: column;
  gap: 0.5em 0;
  margin: 0 0 1em 0;
}
.dlist .line {
  display: grid;
  grid-template-columns: 1fr 10fr;
  gap: 0 1.5em;
  justify-content: center;
  align-items: flex-start;
}
.dlist div {
  margin: 0;
}
.dlist.dialog .line.custom-cast {
  align-items: center;
}
.dlist.dialog .line .cast {
  padding: 10px 0px;
  width: fit-content;
  font-family: PT Sans;
  font-weight: bold;
  text-align: right;
  color: var(--color-primary);
}
.dlist.dialog .line .cast .rep,
.dlist.dialog .line .cast .name {
  display: block;
  margin: 0;
  padding: 0;
}
.dlist.dialog .line .cast.with-rep {
  padding: 0px;
}
.dlist.dialog .line .cast.with-rep .name {
  display: none;
}
.dlist.dialog .line .statement {
  margin-right: auto;
  padding-left: 15px;
  padding-bottom: 0.5em;
}
.dlist.dialog .line .statement > *:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 384px) {
  .dlist.dialog .line .statement {
    margin-right: 0px;
  }
}
.dlist.dialog .line .statement .expr,
.dlist.dialog .line .statement .expression {
  color: #777;
  font-style: italic;
  font-size: 0.8em;
}
.dlist.dialog .line.talker .statement {
  display: block;
  width: fit-content;
  max-width: 75%;
  padding: 10px 15px;
  background: hsla(var(--color-hsl), 0.2);
  border-radius: 6px;
  border-left: none;
  color: var(--color-text);
}
.dlist.dialog .line.talker .statement:before {
  position: relative;
  margin-left: -25px;
  content: "";
  float: left;
  border-left: transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid hsla(var(--color-hsl), 0.2);
}
.dlist.dialog .line.talker .statement:after {
  display: none;
}
.dlist.dialog .line.talker.first {
  grid-template-columns: 10fr 1fr;
}
.dlist.dialog .line.talker.first .cast {
  order: 2;
}
.dlist.dialog .line.talker.first .statement {
  margin-left: auto;
  margin-right: 0;
  width: fit-content;
  text-align: right;
  order: 1;
}
.dlist.dialog .line.talker.first .statement:before {
  position: relative;
  margin-right: -25px;
  content: "";
  float: right;
  border-right: transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid hsla(var(--color-hsl), 0.2);
}
.dlist.dialog .line.narrator,
.dlist.dialog .line.comment {
  grid-template-columns: 1fr;
}
.dlist.dialog .line.narrator .statement,
.dlist.dialog .line.comment .statement {
  display: block;
  margin: 0 1em;
  padding: 0px;
  border-left: transparent;
  font-style: italic;
  color: #5a5a5e;
}
.dlist.dialog .line.narrator .statement:before,
.dlist.dialog .line.comment .statement:before {
  content: "";
}
.dlist.dialog .line.narrator .statement .expr,
.dlist.dialog .line.comment .statement .expr,
.dlist.dialog .line.narrator .statement .expression,
.dlist.dialog .line.comment .statement .expression {
  font-size: 1em;
}
.dlist.dialog .line.comment statement {
  padding: 0;
  text-align: right;
  font-size: 0.8em;
  color: #888;
}
.dlist.inference {
  margin: 0 1em 1em 1em;
  gap: 0;
  color: var(--color-primary);
}
.dlist.inference .line {
  padding: 0.5em 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.dlist.inference .line:first-child {
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
.dlist.inference .line .cast {
  color: var(--color-primary);
  font-weight: bold;
  text-align: right;
}
.dlist.inference .line .statement:before {
  float: left;
  margin-left: -1em;
  content: ":";
  color: var(--color-primary);
}
.dlist.inference .line .statement:after {
  height: 1px;
}
.dlist.inference .line .statement p {
  margin: 0;
}
.dlist.inference .line .statement *:last-child {
  margin-bottom: 0;
}
.dlist.inference .line.narrator .statement {
  margin: 0.5em 0em 0.5em 0em;
}
dl.comments {
  padding: 1em 1.5em;
  font-size: 0.8em;
  background: rgba(0, 0, 0, 0.05);
}
dl.comments dt.cast {
  display: block;
  margin-left: 50px;
  float: none;
  text-align: left;
}
dl.comments dt.cast .rep {
  display: block;
  float: left;
  margin-left: -50px;
  margin-top: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
dl.comments dt.cast .rep figure {
  margin: 0px;
  padding: 0px;
}
dl.comments dt.cast .rep img {
  margin: 0px;
  max-width: 40px;
  max-height: 40px;
}
dl.comments dd {
  display: block;
  margin-left: 50px;
  margin-bottom: 2em;
  padding-left: 0px;
  border: transparent;
}
dl.comments dd:after {
  display: block;
  text-align: left;
  font-size: 0.7em;
  content: "\1f44d\1f3fd  \a0\a0\a0    \1f44e\1f3fd  \a0\a0\a0    REPLY";
  opacity: 0.5;
}
dl.comments dd:before {
  content: none;
}
@media only screen and (min-width: 550px), only screen and (min-width: 385px) and (max-width: 550px) {
  dl.comments {
    margin: 0 1em 1em 1em;
  }
}
.inference-diagram .statement {
  text-anchor: middle;
  alignment-baseline: middle;
  fill: #555;
}
.inference-diagram .label {
  font-size: 0.7em;
  font-weight: bold;
  text-anchor: end;
  alignment-baseline: middle;
  fill: #999;
}
.inference-diagram .label.premise {
  text-anchor: middle;
  alignment-baseline: middle;
}
.inference-diagram .label.inference {
  text-anchor: middle;
  alignment-baseline: baseline;
  font-weight: normal;
  font-size: 0.7em;
  fill: #555;
}
.inference-diagram .label.inference.sim {
  text-anchor: end;
  alignment-baseline: middle;
}
.inference-diagram .box {
  fill: #D1C975;
  stroke: #555;
  stroke-width: 1px;
}
.inference-diagram .box.invalid {
  fill: #adb1f2;
}
.inference-diagram .box.premise {
  fill: #C3DA90;
}
.inference-diagram .line {
  stroke: #555;
}
.tags {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-family: PT Sans;
  font-size: 0.9em;
  line-height: 1.8em;
}
.tags .tag {
  display: inline-block;
  margin: 0 0.5em 0 0;
}
.tags .tag a {
  display: inline-block;
  padding: 0.1em 1em;
  background: #ccc;
  border-radius: 3px;
  cursor: pointer;
  color: #555;
}
.tags .tag a:hover {
  background: #bbb;
}
.content-list {
  margin-top: 1em;
}
.content-list > ul {
  padding: 0;
  margin: 0;
}
.content-list .content-item {
  display: block;
  margin: 0 0 0.7em 0;
  padding: 0;
}
@media only screen and (min-width: 550px) {
  .content-list .content-item {
    margin-bottom: 0em;
  }
}
.content-list .content-item .title {
  display: block;
  padding: 0px 0px 0px 2em;
  min-height: auto;
  font-size: 1em;
  color: var(--color-primary);
}
@media only screen and (min-width: 550px) {
  .content-list .content-item .title {
    padding: 0.5em 0 0.5em 2em;
    font-size: 1.5em;
  }
}
.content-list .content-item .title:before {
  float: left;
  margin-left: -1.3em;
  font-size: 1.5em;
  color: var(--color-primary);
}
.content-list .content-item .description {
  display: block;
  margin: 0;
  padding: 0 0 0 3em;
  font-size: 0.7em;
  line-height: 1.2em;
  color: var(--color-text);
}
@media only screen and (min-width: 550px) {
  .content-list .content-item .description {
    padding-left: 4.5em;
  }
}
.content-list .content-item .description:empty {
  display: none;
}
.content-list .content-item:hover .title {
  color: var(--color-neutral-invert);
}
.content-list .content-item:hover .title:before {
  color: var(--color-neutral-invert);
}
.content-list .content-item:hover .description {
  color: var(--color-text);
}
#content .content-list.subs {
  margin-top: 2em;
}
#content .content-list.subs .content-item {
  border-right: 0.5em solid transparent;
}
#content .content-list.subs .content-item:hover {
  border-right-color: var(--color-primary);
}
@media only screen and (min-width: 550px) {
  #content .content-list.subs {
    margin-top: 4em;
  }
}
#content .references {
  margin-top: 1em;
  border: none;
  border-top: 1px solid var(--color-primary);
  font-size: 0.8em;
}
#content .references header {
  margin: 1em 0;
  border: none;
  font-weight: bold;
  color: var(--color-primary);
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  #content .references header {
    margin: 1em 0;
  }
}
#content .references .content-item {
  padding: 0;
  margin: 0 0 0.5em 0;
}
#content .references .content-item a {
  display: block;
  padding: 0 0 0 25px;
}
#content .references .content-item a:before {
  float: left;
  margin-left: -25px;
}
details.example.problem {
  width: 100%;
  margin: 0 0 1em 0;
  padding: 0;
  counter-increment: example-problem;
}
details.example.problem summary {
  margin: 0 0 1em 3em;
  font-size: 100%;
  font-weight: normal;
}
details.example.problem summary:before {
  float: left;
  box-sizing: border-box;
  margin: 0 0 0 -1.5em;
  padding: 0.1em 0.5em 0 0;
  width: 1.5em;
  content: counter(example-problem);
  font-size: 2em;
  font-family: PT Sans;
  text-align: right;
  color: var(--color-accent);
  opacity: 0.5;
  transform: none;
  transition: none;
}
details.example.problem > div {
  margin-top: 100px;
  margin-left: 3em;
  padding: 0.6em 1em;
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);
  opacity: 0;
}
details.example.problem[open] > div {
  margin-top: 0;
  transition: margin-top 250ms ease, opacity 150ms ease;
  opacity: 1;
}
details.example.problem[open] > div:before {
  opacity: 1;
}
#table-of-contents {
  display: block;
  position: fixed;
  width: 0px;
  top: 0;
  bottom: 50px;
  left: 0px;
  order: -1;
  box-sizing: border-box;
  padding: 0px 0px 0px 8px;
  padding: 0em;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 10;
  direction: rtl;
  background: var(--color-block);
  box-shadow: 3px 0px 7px rgba(0, 0, 0, 0.2);
  transition: width 0.2s ease-out, opacity 0.2s ease-out;
}
@media print {
  #table-of-contents {
    display: none;
  }
}
#table-of-contents .site-contents {
}
#table-of-contents .site-contents .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  margin: 0.8em 0;
  padding: 2px 15px;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: var(--color-block-text);
}
#table-of-contents .site-contents a {
  color: var(--color-block-text);
  opacity: 0.8;
  cursor: pointer;
}
#table-of-contents .site-contents a:hover {
  color: var(--color-block-text);
  opacity: 1;
}
#table-of-contents .site-contents nav {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  justify-content: space-around;
  font-size: 1.5em;
}
#table-of-contents .site-contents nav a {
  display: block;
  padding: 2px 5px;
}
#table-of-contents .site-contents .search-box {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 5px;
}
#table-of-contents .site-contents .search-box input[type=search] {
  padding: 5px 10px;
  flex-grow: 1;
  border: transparent;
  background: var(--color-neutral-invert-text);
  color: var(--color-neutral-invert);
}
#table-of-contents .site-contents .search-box a[action=search] {
  width: 2em;
  text-align: center;
}
#table-of-contents * {
  direction: ltr;
}
@media only screen and (max-width: 384px) {
  #table-of-contents {
    direction: ltr;
  }
}
#table-of-contents .book.title,
#table-of-contents li {
  box-sizing: border-box;
  margin: 0em;
  width: 300px;
}
#table-of-contents .book.title {
  top: 0;
  padding: 0.5em 0.7em;
  background: var(--color-accent-l05);
  font-size: 1.5em;
}
#table-of-contents .book.title a {
  color: var(--color-text-invert);
  opacity: 0.9;
}
#table-of-contents .book.title a:hover {
  opacity: 1;
}
#table-of-contents ol {
  box-sizing: border-box;
  width: 300px;
  margin: 0em;
  padding: 0em;
  background: var(--color-primary);
  counter-reset: toc-num-1;
}
#table-of-contents ol li {
  margin: 0em;
  padding: 0em 32px 0 0;
  list-style-type: none;
  background: #ffffff55;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 0px solid var(--color-accent);
  overflow: hidden;
  counter-increment: toc-num-1;
}
#table-of-contents ol li a.page {
  display: block;
  margin: 0em;
  padding: 1em 0 1em 1em;
  cursor: pointer;
  color: #333;
}
#table-of-contents ol li a.page:before {
  content: counter(toc-num-1) ". ";
}
#table-of-contents ol li a.button {
  float: right;
  padding: 0px;
  margin: 12px -24px 0px 0px;
  font-size: 25px;
  cursor: pointer;
  color: #555;
  transform: rotate(0deg);
  transition: transform 0.5s ease-in;
}
#table-of-contents ol li a.button:before {
  content: "\f0062";
  font-family: Material Design Icons;
}
#table-of-contents ol li a.button:hover {
  color: #111;
}
#table-of-contents ol li.open > a.button {
  transform: rotate(180deg);
  transition: transform 0.2s ease-in;
}
#table-of-contents ol li.open > a.button:before {
  content: "\f0063";
}
#table-of-contents ol li li {
  background: #ffffff88;
}
#table-of-contents ol li li li {
  background: #ffffffaa;
}
#table-of-contents ol li:hover {
  border-left-width: 5px;
  transition: border-left-width 0.1s ease-in;
}
#table-of-contents ol li > ol {
  max-height: 0;
  transition: max-height 0.3s ease-out;
  counter-reset: toc-num-2;
}
#table-of-contents ol li > ol li {
  counter-increment: toc-num-2;
}
#table-of-contents ol li > ol li a.page:before {
  content: counter(toc-num-1) "." counter(toc-num-2) ". ";
}
#table-of-contents ol li > ol li > ol {
  counter-reset: toc-num-3;
}
#table-of-contents ol li > ol li > ol li {
  counter-increment: toc-num-3;
  font-size: 0.8em;
  padding-left: 1em;
}
#table-of-contents ol li > ol li > ol li a.page {
  opacity: 0.8;
}
#table-of-contents ol li > ol li > ol li a.page:before {
  font-size: 0.7em;
  content: counter(toc-num-3) ".";
  margin-right: 0.5em;
  opacity: 0.5;
}
#table-of-contents ol li.open > ol {
  max-height: 1000px;
  transition: max-height 0.3s ease-in;
}
#table-of-contents ol li.this > a.page {
  font-weight: bold;
}
#table-of-contents ol li.this > a.page:after {
  content: "\a0\f06c4";
  font-family: Material Design Icons;
  color: var(--color-primary);
}
body.toc-open #table-of-contents {
  width: 300px;
  display: block;
  opacity: 1;
  transition: width 0.2s ease-out, opacity 0.2s ease-out;
}
@media print {
  body.toc-open #table-of-contents {
    display: none;
  }
}
@media only screen and (max-width: 384px) {
  body.toc-open #table-of-contents {
    position: fixed;
    top: 0;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow-y: scroll;
  }
}
table.matrix {
  border: none;
}
table.matrix tr {
  background: transparent;
}
table.matrix td {
  width: 2em;
  height: 2em;
  padding: 0.2em;
  background: transparent;
  text-align: center;
  vertical-align: center;
  color: var(--color-text);
}
table.matrix td.i {
  font-size: 0.7em;
}
table.matrix td.h {
  background: var(--color-highlight);
}
table.matrix td.d {
  width: 12em;
  padding: 0.2em 1em;
  border: transparent;
  text-align: left;
}
table.matrix.mul td {
  border: none;
}
table.matrix.mul td.m {
  border: 1px solid var(--color-text);
}
table.arithmetics colgroup .nf {
  border-left: 1px dashed var(--color-primary);
}
table.arithmetics tr {
  background: none;
}
table.arithmetics td {
  border: none;
  text-align: center;
}
table.arithmetics.division td.p:before {
  content: ".";
}
table.arithmetics.division td.d,
table.arithmetics.division td.n,
table.arithmetics.division td.rs {
  font-weight: bold;
}
table.arithmetics.division td.d.last {
  background-image: url(/css/pembagi-bengkok.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
}
table.arithmetics.division td.n {
  border-top: 3px solid var(--color-primary);
}
table.arithmetics.division td.r {
  border-top: 3px solid var(--color-primary);
}
table.arithmetics.division td.t0 {
  color: var(--color-text);
}
table.arithmetics.addition tr.c {
  font-size: 0.6em;
  color: var(--color-primary);
  text-align: right;
}
table.arithmetics.addition tr.r td {
  border-top: 3px solid var(--color-primary);
}
table.arithmetics.multiplication tr.c {
  font-size: 0.6em;
  color: var(--color-primary);
  text-align: right;
}
table.arithmetics.multiplication tr:last-child td,
table.arithmetics.multiplication tr:nth-child(3) td {
  border-top: 3px solid var(--color-primary);
}
.input .mq-math-mode,
.input .mq-math-mode .mq-editable-field {
  min-width: 60px;
  padding: 5px 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}
.input-padding {
  padding: 0.5em 0.75em;
}
input.invalid,
select.invalid,
math-field.invalid {
  background: #C25C4799;
}
input.invalid:focus,
select.invalid:focus,
math-field.invalid:focus {
  background: #C25C4777;
}
input:focus,
select:focus,
math-field:focus {
  outline: 1px dashed var(--color-primary);
}
select {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-family: PT Sans;
  color: var(--color-text);
}
textarea {
  max-width: 100%;
  width: 100%;
}
input,
textarea {
  padding: 0.5em 0.75em;
  background: hsla(var(--color-hsl), 0.3);
  border-radius: 0px;
  border: transparent;
  font-family: PT Sans;
  font-size: inherit;
  color: var(--color-text);
}
input-short,
input-long {
  display: inline-grid;
  grid-template-columns: 1;
  font-size: 1em;
}
input-short input,
input-long input,
input-short textarea,
input-long textarea {
  min-width: 3em;
}
input-short:after,
input-long:after {
  width: auto;
  min-width: 1em;
  font: PT Sans;
  font-size: inherit;
  padding: 0.5em 0.75em;
  margin: 0;
  resize: none;
  background: none;
  appearance: none;
  border: none;
  content: attr(data-value) " ";
  visibility: hidden;
  white-space: pre-wrap;
}
input-short:after {
  padding: 0em 0.75em;
  height: 0;
}
input-select,
input-radio,
input-checkbox,
input-tristate,
input-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 1em;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  margin: 0;
}
@media print {
  input-select,
  input-radio,
  input-checkbox,
  input-tristate,
  input-sort {
    gap: 0em 2em;
  }
}
input-select input-item,
input-radio input-item,
input-checkbox input-item,
input-tristate input-item,
input-sort input-item {
  display: grid;
  grid-template-columns: 2.5em auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5em 2em 0.5em 0;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  user-select: none;
}
input-select input-item:before,
input-radio input-item:before,
input-checkbox input-item:before,
input-tristate input-item:before,
input-sort input-item:before {
  display: block;
  box-sizing: border-box;
  font-family: "Material Design Icons";
  font-size: 1em;
  text-align: center;
}
@media print {
  input-select input-item,
  input-radio input-item,
  input-checkbox input-item,
  input-tristate input-item,
  input-sort input-item {
    align-items: center;
    padding: 0;
    width: max-content;
  }
  input-select input-item:before,
  input-radio input-item:before,
  input-checkbox input-item:before,
  input-tristate input-item:before,
  input-sort input-item:before {
    padding: 0;
    content: "\f0130";
  }
}
@media screen {
  input-select input-item,
  input-radio input-item,
  input-checkbox input-item,
  input-tristate input-item,
  input-sort input-item {
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
  }
  input-select input-item:before,
  input-radio input-item:before,
  input-checkbox input-item:before,
  input-tristate input-item:before,
  input-sort input-item:before {
    padding: 0.5em 0.25em;
    color: rgba(0, 0, 0, 0.4);
  }
  input-select input-item:hover,
  input-radio input-item:hover,
  input-checkbox input-item:hover,
  input-tristate input-item:hover,
  input-sort input-item:hover {
    border-color: rgba(0, 200, 0, 0.2);
  }
  input-select input-item[state="1"],
  input-radio input-item[state="1"],
  input-checkbox input-item[state="1"],
  input-tristate input-item[state="1"],
  input-sort input-item[state="1"] {
    background: rgba(0, 200, 0, 0.4);
  }
  input-select input-item[state="2"],
  input-radio input-item[state="2"],
  input-checkbox input-item[state="2"],
  input-tristate input-item[state="2"],
  input-sort input-item[state="2"] {
    background: rgba(255, 0, 0, 0.4);
  }
}
input-select input-item p:last-child,
input-radio input-item p:last-child,
input-checkbox input-item p:last-child,
input-tristate input-item p:last-child,
input-sort input-item p:last-child {
  margin-bottom: 0;
}
@media screen {
  input-radio input-item:before {
    content: "\f0130";
  }
  input-radio input-item[state="1"]:before {
    content: "\f05e0";
    color: #006310;
  }
  input-checkbox input-item {
    background: rgba(255, 0, 0, 0.1);
  }
  input-checkbox input-item:before {
    content: "\f0156";
    color: rgba(255, 0, 0, 0.4);
  }
  input-checkbox input-item[state="1"]:before {
    content: "\f0e1e";
    color: #006310;
  }
  input-tristate input-item:before {
    content: "\f02d6";
  }
  input-tristate input-item[state="0"] {
    color: transparent;
    border: 2px dashed rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.1);
    background-size: 200% auto;
  }
  input-tristate input-item[state="0"]:hover {
    background-image:
      linear-gradient(
        75deg,
        transparent 30%,
        #00000022 50%,
        transparent 80%);
    animation: placeholderAnimation 8s infinite;
  }
  input-tristate input-item[state="0"] > * {
    visibility: hidden;
  }
  input-tristate input-item[state="1"]:before {
    content: "\f0e1e";
    color: #006310;
  }
  input-tristate input-item[state="2"]:before {
    content: "\f0156";
    color: #55001c;
  }
  input-sort {
    counter-reset: item-number;
    gap: 1em 2px;
  }
  input-sort input-item {
    align-items: flex-end;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  input-sort input-item:hover {
    border: 1px solid rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.2);
  }
  input-sort input-item:before {
    display: block;
    margin-right: 1em;
    content: counter(item-number);
    counter-increment: item-number;
    color: #777;
    font-size: 0.7em;
  }
  input-sort input-item math-latex {
    color: var(--color-text);
  }
  input-sort input-item[value="0"] {
    background-color: rgba(193, 190, 68, 0.6);
  }
  input-sort input-item[value="1"] {
    background-color: rgba(201, 159, 34, 0.6);
  }
  input-sort input-item[value="2"] {
    background-color: rgba(194, 108, 113, 0.6);
  }
  input-sort input-item[value="3"] {
    background-color: rgba(110, 164, 55, 0.6);
  }
  input-sort input-item[value="4"] {
    background-color: rgba(42, 126, 111, 0.6);
  }
  input-sort input-item[value="5"] {
    background-color: rgba(50, 106, 149, 0.6);
  }
  input-sort input-item[value="6"] {
    background-color: rgba(57, 88, 172, 0.6);
  }
  input-sort input-item[value="7"] {
    background-color: rgba(116, 48, 145, 0.6);
  }
  input-sort input-item[value="8"] {
    background-color: rgba(194, 71, 143, 0.6);
  }
  input-sort input-item.drag-over {
    border: 1px dashed rgba(0, 0, 0, 0.5);
    opacity: 0.4;
  }
}
math-field {
  padding: 0.5em 1em;
  background: rgba(255, 255, 255, 0.5);
  outline: 1px solid transparent;
  border: 1px solid transparent;
  --highlight: var(--color-accent-l30);
  --highlight-inactive: var(--color-accent-l35);
  --caret: var(--color-accent-l10);
  --contains-highlight: var(--color-accent-l40);
}
math-field[read-only] {
  background: transparent;
}
math-field:focus {
  outline-color: var(--color-accent);
  border-color: var(--color-accent);
}
input-table .toolbar,
input-spreadsheet .toolbar,
input-horner .toolbar {
  display: flex;
  flex-direction: row;
  gap: 0 0.1em;
  margin-bottom: 0.5em;
}
input-table .toolbar button,
input-spreadsheet .toolbar button,
input-horner .toolbar button {
  padding: 0.25em 0.5em;
  border: 1px solid #ddd;
  background: var(--color-accent-l15);
  border-radius: 5px;
  font-size: 1em;
  color: var(--color-accent-d15);
  cursor: pointer;
}
input-table .toolbar button:hover,
input-spreadsheet .toolbar button:hover,
input-horner .toolbar button:hover {
  background: var(--color-accent-l25);
}
input-table table,
input-spreadsheet table,
input-horner table {
  background: transparent;
  border: 2px solid var(--color-accent-d10);
}
input-table table tr,
input-spreadsheet table tr,
input-horner table tr {
  background: transparent;
}
input-table table td,
input-spreadsheet table td,
input-horner table td,
input-table table th,
input-spreadsheet table th,
input-horner table th {
  padding: 0;
  background: transparent;
}
input-table table input,
input-spreadsheet table input,
input-horner table input,
input-table table input-short,
input-spreadsheet table input-short,
input-horner table input-short,
input-table table input-math,
input-spreadsheet table input-math,
input-horner table input-math {
  border: transparent;
}
input-table th,
input-table td {
  border: 1px solid #ddd;
}
input-spreadsheet .handsontable.ht_master .wtHolder {
  padding: 1em;
  width: auto !important;
  height: auto !important;
}
input-spreadsheet table.htCore {
  background: transparent;
}
input-spreadsheet table.htCore tr {
  background: transparent;
}
input-spreadsheet table.htCore tr:nth-child(2n-1) {
  background: transparent;
}
input-spreadsheet table.htCore th,
input-spreadsheet table.htCore td {
  padding: 0.5em 1em;
  min-width: 1em;
  min-height: 1em;
  background: transparent;
  text-align: center;
}
input-horner table.htCore th,
input-horner table.htCore td {
  border: 1px solid transparent;
}
input-horner table.htCore tr:first-child td {
  border-top: 1px solid transparent;
}
input-horner table.htCore td:first-child {
  border-left: 1px solid transparent;
}
input-horner table.htCore tr:not(:last-child) td:first-child {
  border-right: 2px solid var(--color-accent);
}
input-horner table.htCore tr:nth-child(2n) td:not(:first-child) {
  border-bottom: 2px solid var(--color-accent);
}
embed-question {
  margin: 0 0 1em 0;
  display: grid;
  grid-template-areas: "q-number q-controls" "q-question q-question";
  grid-template-columns: 1fr 2em;
  grid-row-gap: 1em;
  opacity: 0.8;
}
embed-question:hover {
  opacity: 1;
}
@media only screen and (min-width: 550px) {
  embed-question {
    margin: 0 -3em 1em -3em;
    grid-template-areas: "q-number q-question q-controls";
    grid-template-columns: 2em 1fr 2em;
    grid-gap: 1em;
  }
}
embed-question .q--number,
embed-question .q--controls {
  border: 1px solid #00000022;
  border-left: transparent;
  border-right: transparent;
}
@media only screen and (min-width: 550px) {
  embed-question .q--number,
  embed-question .q--controls {
    border-top: transparent;
    border-bottom: transparent;
  }
}
embed-question .q--number {
  grid-area: q-number;
  padding: 3px 5px;
  color: var(--color-accent);
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}
@media only screen and (min-width: 550px) {
  embed-question .q--number {
    text-align: right;
  }
}
embed-question .q--controls {
  grid-area: q-controls;
  padding: 3px 5px;
  text-align: center;
}
@media only screen and (min-width: 550px) {
  embed-question .q--controls {
    text-align: left;
  }
}
embed-question .q--question {
  grid-area: q-question;
  margin: 0;
  cursor: pointer;
}
embed-question .q--question ol.question-options {
  display: block;
}
embed-question .q--question ol.question-options li {
  display: list-item;
  list-style: lower-alpha;
}
embed-question .q--question ol.question-options li:before {
  display: none;
  content: "";
}
embed-question .q--question ol.question-options li:hover {
  background: transparent;
  border-left-color: transparent;
}
embed-question .q--question math-latex[display="1"] > .katex-display > .katex {
  text-align: left;
}
embed-question:not([data-loaded="1"]) .q--question {
  min-height: 100px;
  background-image:
    linear-gradient(
      75deg,
      transparent 30%,
      #00000022 50%,
      transparent 80%);
  background-size: 200% auto;
  animation: placeholderAnimation 5s infinite;
}
embed-question .media-links {
  display: none !important;
  visibility: hidden;
}
embed-question .q--controls button,
#t_qd_question_dialog .q--controls button {
  display: inline-block;
  box-sizing: border-box;
  padding: 0;
  border: 0px solid transparent;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.3s;
  opacity: 0.8;
}
embed-question .q--controls button:hover,
#t_qd_question_dialog .q--controls button:hover {
  opacity: 1;
}
embed-question .q--controls button[disabled],
#t_qd_question_dialog .q--controls button[disabled] {
  display: none;
}
embed-question .q--controls button .desc,
#t_qd_question_dialog .q--controls button .desc {
  display: inline-block;
  margin-left: 1em;
}
embed-question .q--controls button:before,
#t_qd_question_dialog .q--controls button:before {
  display: inline-block;
  padding: 4px;
  content: none;
  font-family: "Material Design Icons";
  font-size: 1.5em;
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  embed-question .q--controls button:before,
  #t_qd_question_dialog .q--controls button:before {
    padding: 2px;
  }
}
embed-question .q--controls button[data-question-action=check]:before,
#t_qd_question_dialog .q--controls button[data-question-action=check]:before {
  content: "\f0349";
}
embed-question .q--controls button[data-question-action=check].loading:before,
#t_qd_question_dialog .q--controls button[data-question-action=check].loading:before {
  animation-name: goyang;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
embed-question .q--controls button[data-question-action=regenerate]:before,
#t_qd_question_dialog .q--controls button[data-question-action=regenerate]:before {
  content: "\f1377";
}
embed-question .q--controls button[data-question-action=regenerate].loading:before,
#t_qd_question_dialog .q--controls button[data-question-action=regenerate].loading:before {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
embed-question .q--controls button[data-question-action=instruction]:before,
#t_qd_question_dialog .q--controls button[data-question-action=instruction]:before {
  content: "\f02fc";
}
embed-question .q--controls button[data-question-action=instruction].loading:before,
#t_qd_question_dialog .q--controls button[data-question-action=instruction].loading:before {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
embed-question .q--controls button[data-question-action=explain]:before,
#t_qd_question_dialog .q--controls button[data-question-action=explain]:before {
  content: "\f1738";
}
embed-question .q--controls button[data-question-action=explain].loading:before,
#t_qd_question_dialog .q--controls button[data-question-action=explain].loading:before {
  animation-name: mondarmandir;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
embed-question .q--controls button[data-question-action=debug]:before,
#t_qd_question_dialog .q--controls button[data-question-action=debug]:before {
  content: "\f082d";
}
embed-question .q--controls button[data-question-action=page]:before,
#t_qd_question_dialog .q--controls button[data-question-action=page]:before {
  content: "\f03cc";
}
embed-question .q--controls button[data-question-action=edit]:before,
#t_qd_question_dialog .q--controls button[data-question-action=edit]:before {
  content: "\f03eb";
}
embed-question .q--controls button[data-question-action=close]:before,
#t_qd_question_dialog .q--controls button[data-question-action=close]:before {
  content: "\f015a";
}
#t_qd_question_dialog {
  display: none;
  padding: 0px;
  max-width: 100%;
  max-height: 100%;
  grid-template-areas: "q-header" "q-question" "q-answer-area";
}
#t_qd_question_dialog[open] {
  display: grid;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog {
    padding: 5px;
    grid-template-areas: "q-list q-header q-header" "q-list q-question q-answer-area" "q-list q-footer q-footer";
    grid-template-columns: 100px 1fr 1fr;
    grid-template-rows: min-content 1fr min-content;
    gap: 5px;
  }
}
#t_qd_question_dialog .q--list {
  display: none;
  grid-area: q-list;
  padding: 0;
  margin: 5px 10px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#t_qd_question_dialog .q--list ol {
  padding: 0;
  margin: 0;
}
#t_qd_question_dialog .q--list li {
  display: block;
  padding: 0;
}
#t_qd_question_dialog .q--list li::before {
  display: none;
  content: "";
}
#t_qd_question_dialog .q--list li.current {
  background: var(--color-accent);
}
#t_qd_question_dialog .q--list li.current a {
  color: var(--color-text-invert);
}
#t_qd_question_dialog .q--list li a {
  display: block;
  padding: 3px 5px;
  text-align: center;
  outline: transparent;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--list {
    display: block;
  }
}
#t_qd_question_dialog .q--header {
  grid-area: q-header;
  display: grid;
  grid-template-areas: "q-number q-title" "q-toolbar q-toolbar";
  grid-template-columns: 3em 1fr;
  justify-content: center;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--header {
    grid-template-areas: "q-title q-toolbar";
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0;
    border-bottom: 1px solid #00000022;
  }
}
#t_qd_question_dialog .q--header .number {
  grid-area: q-number;
  padding: 5px 10px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 1.5em;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--header .number {
    display: none;
  }
}
#t_qd_question_dialog .q--header .title {
  grid-area: q-title;
  margin: 0;
  padding: 5px 10px;
  font-size: 1.5em;
  background: var(--color-accent);
  color: #fff;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--header .title {
    padding: 5px 0px;
    background: transparent;
    color: var(--color-accent);
  }
}
#t_qd_question_dialog .q--header .toolbar {
  grid-area: q-toolbar;
  margin: 0px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #00000022;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--header .toolbar {
    background: transparent;
  }
}
#t_qd_question_dialog .q--question {
  grid-area: q-question;
  padding: 10px;
  overflow-x: auto;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--question {
    overflow-y: auto;
    margin: 0;
    padding: 10px 10px 10px 0;
    border-right: 1px solid #00000022;
  }
}
#t_qd_question_dialog .q--answer-area {
  grid-area: q-answer-area;
  padding: 10px;
  overflow-x: auto;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--answer-area {
    padding: 10px;
    overflow-y: auto;
  }
}
#t_qd_question_dialog .q--answer-area .q--instruction {
  margin: 0 0 1em 0;
  padding: 0 0 1em 0;
  border-bottom: 1px solid #00000022;
  font-size: 0.7em;
}
#t_qd_question_dialog .q--answer-area .q--input {
  margin: 0 0 1em 0;
}
#t_qd_question_dialog .q--answer-area .q--controls {
  display: flex;
  flex-direction: row;
  gap: 2em;
  margin: 0 0 1em 0;
  justify-content: right;
}
#t_qd_question_dialog .q--answer-area .q--controls button:before {
  font-size: 0.8em;
}
#t_qd_question_dialog .q--answer-area .q--controls button .desc {
  margin: 0;
}
#t_qd_question_dialog .q--answer-area .q--feedback {
  grid-area: q-feedback;
  display: grid;
  grid-template-columns: auto 8em;
  grid-template-areas: "qf-comment qf-score" "qf-message qf-message";
  align-items: center;
  min-height: 120px;
  font-size: 0.8em;
  color: var(--color-text);
  padding: 0.6em 1em 0.5em 120px;
  background-color: #00000022;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  background-size: 15%;
  border-radius: 1em;
}
#t_qd_question_dialog .q--answer-area .q--feedback.s-10000 {
  background-color: #6D953266;
  background-image: url(/files/icons/buguru-2.png);
}
#t_qd_question_dialog .q--answer-area .q--feedback.s-9000 {
  background-color: #32954966;
  background-image: url(/files/icons/buguru-5.png);
}
#t_qd_question_dialog .q--answer-area .q--feedback.s-7500 {
  background-color: #B4C75766;
  background-image: url(/files/icons/buguru-3.png);
}
#t_qd_question_dialog .q--answer-area .q--feedback.s-5000 {
  background-color: #CF906E66;
  background-image: url(/files/icons/buguru-1.png);
}
#t_qd_question_dialog .q--answer-area .q--feedback.s-2500 {
  background-color: #CF906E66;
  background-image: url(/files/icons/buguru-4.png);
}
#t_qd_question_dialog .q--answer-area .q--feedback.s-0 {
  background-color: #D07B7166;
  background-image: url(/files/icons/buguru-4.png);
}
#t_qd_question_dialog .q--answer-area .q--feedback .score {
  grid-area: qf-score;
  box-sizing: border-box;
  font-size: 2em;
  text-align: center;
  padding: 0;
  color: var(--color-text);
}
#t_qd_question_dialog .q--answer-area .q--feedback .score:after {
  content: "% benar";
}
#t_qd_question_dialog .q--answer-area .q--feedback .title {
  grid-area: qf-title;
  padding: 0.2em;
  font-size: 1em;
  font-style: italic;
}
#t_qd_question_dialog .q--answer-area .q--feedback .comment {
  grid-area: qf-comment;
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages {
  grid-area: qf-message;
  padding: 0;
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li {
  display: block;
  padding: 0.2em 0.5em 0.2em 2em;
  margin: 0 0 0.5em 0;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li:before {
  float: left;
  margin: 0.2em 0 0 -1.5em;
  font-family: Material Design Icons;
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.error {
  background-color: rgba(255, 0, 0, 0.3);
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.wrong {
  background-color: rgba(255, 0, 0, 0.3);
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.correct {
  background-color: rgba(0, 255, 100, 0.3);
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.question {
  background-color: rgba(255, 255, 0, 0.3);
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.error:before {
  content: "\f0028";
  color: #ff0000;
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.wrong:before {
  content: "\f05ad";
  color: #ff0000;
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.correct:before {
  content: "\f0513";
  color: #00ffaa;
}
#t_qd_question_dialog .q--answer-area .q--feedback .messages li.question:before {
  content: "\f0625";
  color: #ffff00;
}
#t_qd_question_dialog .q--answer-area .q--feedback.hidden {
  display: none;
}
#t_qd_question_dialog .q--explanation > .title {
  padding: 5px 0;
  border-top: 1px solid #00000022;
  border-bottom: 1px solid #00000022;
  text-align: center;
}
#t_qd_question_dialog .q--explanation.hidden {
  display: none;
}
#t_qd_question_dialog .q--footer {
  grid-area: q-footer;
  display: none;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--footer {
    display: block;
    padding: 0;
    margin: 0;
    height: 2em;
    border-top: 1px solid #00000022;
  }
}
#t_qd_question_dialog .q--keywords {
  grid-area: q-keywords;
  display: none;
  padding: 0em;
  margin: 0;
  text-align: right;
  font-size: 0.8em;
}
#t_qd_question_dialog .q--keywords li {
  display: inline-block;
  padding: 0;
  margin: 0 0 0.2em 1em;
}
@media only screen and (min-width: 550px) {
  #t_qd_question_dialog .q--keywords {
    display: block;
  }
}
#t_qd_question_dialog .media-links {
  display: none;
}
.excluded embed-question {
  display: grid;
  grid-template-areas: "q-number q-question" "q-controls q-question" "q-controls q-instruction" "q-controls q-answer" "q-controls q-after-input" "q-controls q-feedback" "q-controls q-explanation";
  gap: 0;
  margin: 0 0 1em 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
}
.excluded embed-question .padded {
  padding: 0.5em 1em;
}
.excluded embed-question .empty {
  display: none;
}
@media only screen and (min-width: 550px) {
  .excluded embed-question {
    grid-template-columns: max-content auto;
    font-size: 0.9em;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question {
    grid-template-columns: 3em auto;
    grid-template-areas: "q-number q-controls" "q-question q-question" "q-answer q-answer" "q-instruction q-instruction" "q-after-input q-after-input" "q-feedback q-feedback" "q-explanation q-explanation";
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
@media print {
  .excluded embed-question {
    grid-template-columns: 2em calc(100% - 2em);
    border: 1px solid var(--color-accent);
  }
}
.excluded embed-question > .list {
  grid-area: q-list;
  display: none;
}
.excluded embed-question > .number {
  grid-area: q-number;
  display: block;
  box-sizing: border-box;
  padding: 11px 5px;
  margin: 0;
  color: var(--color-accent);
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}
@media only screen and (min-width: 550px) {
  .excluded embed-question > .number {
    background: rgba(0, 0, 0, 0.05);
  }
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question > .number {
    display: inline-block;
    font-size: 2em;
  }
}
@media print {
  .excluded embed-question > .number {
    padding: 0.5em 0;
    border-right: 1px solid var(--color-accent);
    color: #000;
    font-size: 1em;
    font-weight: normal;
  }
}
.excluded embed-question > .question {
  grid-area: q-question;
  padding: 0.5em 1em;
  overflow-x: auto;
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question > .question {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}
@media print {
  .excluded embed-question > .question {
    overflow-x: hidden;
  }
}
.excluded embed-question > .controls button {
  cursor: pointer;
}
.excluded embed-question > .controls button[disabled] {
  display: none;
}
.excluded embed-question > .controls button .desc {
  display: inline-block;
  margin-left: 1em;
}
.excluded embed-question > .controls button:before {
  display: inline-block;
  padding: 4px;
  content: none;
  font-family: "Material Design Icons";
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question > .controls button:before {
    padding: 2px;
  }
}
.excluded embed-question > .controls button[action=question-check]:before {
  content: "\f0349";
}
.excluded embed-question > .controls button[action=question-check].loading:before {
  animation-name: goyang;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.excluded embed-question > .controls button[action=question-regenerate]:before {
  content: "\f1377";
}
.excluded embed-question > .controls button[action=question-regenerate].loading:before {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.excluded embed-question > .controls button[action=question-instruction]:before {
  content: "\f02fc";
}
.excluded embed-question > .controls button[action=question-instruction].loading:before {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.excluded embed-question > .controls button[action=question-explain]:before {
  content: "\f1738";
}
.excluded embed-question > .controls button[action=question-explain].loading:before {
  animation-name: mondarmandir;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.excluded embed-question > .controls button[action=question-debug]:before {
  content: "\f082d";
}
.excluded embed-question > .controls button[action=question-edit]:before {
  content: "\f03eb";
}
.excluded embed-question .controls.after-answer {
  display: block;
  padding: 0.5em 0;
  text-align: right;
}
@media print {
  .excluded embed-question .controls.after-answer {
    display: none;
  }
}
.excluded embed-question .controls.after-answer button {
  display: inline-block;
  padding: 2px 5px;
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.4);
}
.excluded embed-question .controls.after-answer button:before {
  width: auto;
  height: auto;
}
.excluded embed-question .controls.after-answer button:hover {
  color: rgba(0, 0, 0, 0.8);
}
.excluded embed-question > .controls.toolbar {
  grid-area: q-controls;
  box-sizing: border-box;
  margin: 0;
  padding: 5px;
  background: rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 550px) {
  .excluded embed-question > .controls.toolbar {
    display: block;
  }
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question > .controls.toolbar {
    display: inline-block;
  }
}
@media print {
  .excluded embed-question > .controls.toolbar {
    background: transparent;
    border-right: 1px solid var(--color-accent);
  }
}
.excluded embed-question > .controls.toolbar button {
  display: block;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 0px solid transparent;
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.3s;
}
@media print {
  .excluded embed-question > .controls.toolbar button {
    display: none;
  }
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question > .controls.toolbar button {
    display: inline-block;
  }
}
.excluded embed-question > .controls.toolbar button:before {
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.excluded embed-question > .controls.toolbar button:hover:not([disabled]) {
  color: #000;
  transition: color 0.2s;
}
@media only screen and (min-width: 550px) {
  .excluded embed-question > .controls.toolbar button:hover:not([disabled]):before {
    width: 32px;
    height: 32px;
    padding: 0px;
    font-size: 32px;
    transition:
      font-size 0.2s,
      width 0.2s,
      height 0.2s,
      padding 0.2s;
  }
}
@media only screen and (min-width: 550px) {
  .excluded embed-question > .controls.toolbar li {
    display: block;
    width: 100%;
  }
  .excluded embed-question > .controls.toolbar li a {
    width: 150px;
  }
  .excluded embed-question > .controls.toolbar li a .desc {
    display: inline-block;
  }
  .excluded embed-question > .controls.toolbar li a:hover .desc {
    opacity: 1;
  }
}
.excluded embed-question > .instruction {
  grid-area: q-instruction;
  font-size: 0.8em;
  background: var(--color-accent-l25);
  padding: 0.5em 1em;
}
.excluded embed-question > .instruction.hidden {
  display: none;
}
.excluded embed-question > .instruction:before {
  float: left;
  content: "\f02fc";
  font-family: Material Design Icons;
  margin-right: 0.5em;
}
.excluded embed-question > .explanation {
  grid-area: q-explanation;
  margin: 1em 0 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
  color: #666;
  overflow-x: auto;
  padding: 0.5em 1em;
}
.excluded embed-question > .explanation.empty {
  display: none;
}
.excluded embed-question > .explanation.hidden {
  display: none;
}
.excluded embed-question > .debug {
  margin: 1em 0 0 0;
  padding: 1em;
  width: 100%;
  min-height: 100px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  background: #f8f8f8;
  font-size: 0.8em;
  line-height: 1.2em;
  color: #777;
}
.excluded embed-question > .debug.empty {
  display: none;
}
.excluded embed-question > .input {
  grid-area: q-answer;
  overflow-x: auto;
  padding: 0.5em 1em;
}
.excluded embed-question > .input .options,
.excluded embed-question > .input .sort-items {
  margin: 1em 0em 0em 0em;
  padding: 0em;
}
.excluded embed-question > .input .options .option,
.excluded embed-question > .input .sort-items .option,
.excluded embed-question > .input .options .sort-item,
.excluded embed-question > .input .sort-items .sort-item {
  display: inline-block;
  min-width: 60px;
  padding: 0.5em 1em;
  margin: 0 0.5em 0.5em 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.6;
}
.excluded embed-question > .input .options .option:before,
.excluded embed-question > .input .sort-items .option:before,
.excluded embed-question > .input .options .sort-item:before,
.excluded embed-question > .input .sort-items .sort-item:before {
  content: none;
}
.excluded embed-question > .input .options .option.correct-answer,
.excluded embed-question > .input .sort-items .option.correct-answer,
.excluded embed-question > .input .options .sort-item.correct-answer,
.excluded embed-question > .input .sort-items .sort-item.correct-answer {
  border: 2px solid #222;
}
.excluded embed-question > .input .options .option.wrong-answer,
.excluded embed-question > .input .sort-items .option.wrong-answer,
.excluded embed-question > .input .options .sort-item.wrong-answer,
.excluded embed-question > .input .sort-items .sort-item.wrong-answer {
  border: 2px dashed #222;
}
.excluded embed-question > .input .options .option[sel=true],
.excluded embed-question > .input .sort-items .option[sel=true],
.excluded embed-question > .input .options .sort-item[sel=true],
.excluded embed-question > .input .sort-items .sort-item[sel=true] {
  background: #3EBB49;
  opacity: 1;
}
.excluded embed-question > .input .options .option[sel=false],
.excluded embed-question > .input .sort-items .option[sel=false],
.excluded embed-question > .input .options .sort-item[sel=false],
.excluded embed-question > .input .sort-items .sort-item[sel=false] {
  background: #C4634F;
  opacity: 1;
}
@media print {
  .excluded embed-question > .input {
    overflow-x: hidden;
  }
}
.excluded embed-question > .feedback {
  grid-area: q-feedback;
  display: grid;
  grid-template-columns: auto 8em;
  grid-template-areas: "qf-title qf-score" "qf-message qf-message";
  align-items: center;
  min-height: 120px;
  font-size: 0.8em;
  color: #444;
  padding: 0.6em 1em 0.5em 120px;
  background-color: rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;
  background-position: 15px 15px;
  background-size: 20%;
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question > .feedback {
    padding: 0.5em 1em;
    grid-template-columns: auto;
    grid-template-areas: "qf-score" "qf-title" "qf-message";
    gap: 0.5em;
  }
}
.excluded embed-question > .feedback.s-10000 {
  background-color: #6D953266;
  background-image: url(/files/icons/buguru-2.png);
}
.excluded embed-question > .feedback.s-9000 {
  background-color: #32954966;
  background-image: url(/files/icons/buguru-5.png);
}
.excluded embed-question > .feedback.s-7500 {
  background-color: #B4C75766;
  background-image: url(/files/icons/buguru-3.png);
}
.excluded embed-question > .feedback.s-5000 {
  background-color: #CF906E66;
  background-image: url(/files/icons/buguru-1.png);
}
.excluded embed-question > .feedback.s-2500 {
  background-color: #CF906E66;
  background-image: url(/files/icons/buguru-4.png);
}
.excluded embed-question > .feedback.s-0 {
  background-color: #D07B7166;
  background-image: url(/files/icons/buguru-4.png);
}
.excluded embed-question > .feedback .score {
  grid-area: qf-score;
  box-sizing: border-box;
  font-size: 2em;
  text-align: center;
  padding: 0.2em 0 0.1em 80px;
  color: rgba(0, 0, 0, 0.5);
}
.excluded embed-question > .feedback .score:after {
  content: "% benar";
}
@media only screen and (min-width: 721px) {
  .excluded embed-question > .feedback .score {
    padding: 0.2em 0.2em;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
  }
}
.excluded embed-question > .feedback .title {
  grid-area: qf-title;
  padding: 0.2em;
  font-size: 1em;
  font-style: italic;
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .excluded embed-question > .feedback .title {
    padding: 0 0 0 80px;
  }
}
.excluded embed-question > .feedback .message {
  grid-area: qf-message;
}
.excluded embed-question > .feedback.empty {
  display: none;
}
.excluded embed-question:target {
  position: fixed;
  background: #f8f8f8;
  z-index: 1000;
  font-size: 1em;
}
.excluded embed-question:target input[type=text],
.excluded embed-question:target input[type=number],
.excluded embed-question:target textarea {
  border: rgba(0, 0, 0, 0.2) !important;
}
@media only screen and (min-width: 550px) {
  .excluded embed-question:target {
    top: 20px;
    bottom: 20px;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    padding: 50px 20px 20px 20px;
    overflow: hidden;
  }
  .excluded embed-question:target .qi-top {
    margin-top: -50px;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.2);
  }
  .excluded embed-question:target .qi-left {
    box-sizing: border-box;
    float: left;
    width: 50%;
    height: 100%;
    padding: 0px 15px 0px 0px;
    border-right: 1px solid #aaa;
    overflow-x: auto;
    overflow-y: auto;
  }
  .excluded embed-question:target .qi-right {
    box-sizing: border-box;
    margin-left: 50%;
    width: 50%;
    height: 100%;
    padding: 0px 0px 0px 15px;
    overflow-x: auto;
    overflow-y: auto;
  }
}
@media only screen and (min-width: 385px) and (max-width: 550px), only screen and (max-width: 384px) {
  .excluded embed-question:target {
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    overflow-y: scroll;
  }
}
.question-include.paragraph {
  border-left: 0px solid transparent;
}
.question-include.paragraph .explanation {
  margin: 2em 0em;
}
dialog#tdq-question-report {
  max-width: 500px;
}
dialog#tdq-question-report input-box input-select {
  grid-template-columns: 1fr 1fr;
  gap: 0.5em 1em;
}
dialog#tdq-question-report input-box input-item {
  padding: 0;
  width: 100%;
}
dialog#tdq-question-report input-box input-long {
  width: 100%;
}
dialog#tdq-question-report input-box input-long textarea {
  width: auto;
  resize: vertical;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: hsla(var(--color-hsl), 0.3);
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: hsla(var(--color-hsl), 0.8);
}
body > .keyboard {
  display: block;
  position: fixed;
  right: 0px;
  bottom: 70px;
  z-index: 100;
  background: transparent;
}
body > .keyboard table {
  display: none;
  margin: 0;
  border-collapse: separate;
  border-spacing: 1px;
  background: rgba(255, 255, 255, 0.4);
}
body > .keyboard.visible table {
  display: block;
}
body > .keyboard th {
  border: transparent;
}
body > .keyboard td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  cursor: pointer;
}
body > .keyboard td:hover {
  background: rgba(0, 0, 0, 0.3);
}
body > .keyboard .keyboard-toggle {
  position: fixed;
  right: 0px;
  width: 40px;
  height: 40px;
  border-radius: 20px 0 0 20px;
  border: transparent;
  background: rgba(0, 0, 0, 0.2);
}
body > .keyboard .keyboard-toggle:before {
  font-family: "Material Design Icons";
  content: "\f030c";
}
body > .keyboard .keyboard-toggle:hover {
  background: rgba(0, 0, 0, 0.5);
}
.webix_view {
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.2);
}
.webix_view .webix_slider_box .webix_slider_left {
  background: rgba(0, 0, 0, 0.5);
}
.webix_view .webix_slider_box .webix_slider_right {
  background: rgba(0, 0, 0, 0.1);
}
.webix_view .webix_slider_box .webix_slider_handle {
  background: #777;
  border: 1px solid #777;
}
.webix_view .webix_slider_box .webix_slider_handle:focus {
  background: 1px solid #555;
}
.webix_view .webix_all_tabs .webix_item_tab {
  background: transparent;
  color: #777;
}
.webix_view .webix_all_tabs .webix_item_tab:hover {
  background: rgba(0, 0, 0, 0.1);
}
.webix_view .webix_all_tabs .webix_item_tab.webix_selected {
  background: rgba(0, 0, 0, 0.5);
  color: #f8f8f8 !important;
  box-shadow: none;
}
.webix_view .webix_all_tabs .webix_item_tab.webix_selected:hover {
  background: rgba(0, 0, 0, 0.6);
}
@media print {
  @page {
    size: A4;
    margin: 1cm 1.5cm;
  }
  body {
    position: static !important;
    margin: 0 0 1cm 0 !important;
    padding: 0 !important;
    font-size: 8pt !important;
    background: transparent;
    overflow: none !important;
  }
  body:before {
    position: fixed;
    top: 0;
    left: 0;
    content: "berpikirmatematis.xyz";
    font-size: 72pt;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0) rotate(90deg) translate(50vh, -85vw);
  }
  math-latex {
    color: #000 !important;
  }
  .body-scrollable {
    margin: 0;
    padding: 0;
    height: auto;
    overflow-y: none;
  }
  .center-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  #content header .title {
    font-size: 5em !important;
    color: #000 !important;
  }
  #content header .keyword {
    color: #000 !important;
  }
  #content section.content {
    column-count: 2;
    column-gap: 1cm;
    font-size: 8pt;
    color: #000 !important;
  }
  #content section.content h1,
  #content section.content h2,
  #content section.content h3,
  #content section.content h4,
  #content section.content h5,
  #content section.content h6,
  #content section.content blockquote,
  #content section.content q,
  #content section.content li:before,
  #content section.content figcaption {
    color: #000 !important;
  }
  #content section.content h1:before {
    content: "";
  }
  #content section.content .dlist {
    color: #000 !important;
  }
  #content:before {
    position: fixed;
    bottom: 0;
    left: 0;
    display: block;
    content: "Dari berpikirmatematis.xyz . Tidak diperkenankan memperbanyak materi ini tanpa seizin penulis.";
    color: #000;
    transform: translate(-50%, -50%) rotate(-90deg) translate(50%, 1cm);
  }
}
graph-viz svg {
  background-color: transparent;
}
graph-viz svg text {
  font-family: PT Sans;
  fill: var(--color-accent-d15);
}
graph-viz svg .node :not(text),
graph-viz svg .edge :not(text),
graph-viz svg .cluster :not(text) {
  fill: transparent;
  stroke: var(--color-accent-d10);
  stroke-width: 1px;
}
graph-viz.state-machine .node.state {
  cursor: pointer;
  user-select: none;
}
graph-viz.state-machine .node.state circle,
graph-viz.state-machine .node.state ellipse {
  stroke: var(--color-primary);
}
graph-viz.state-machine .node.state text {
  fill: var(--color-primary);
}
graph-viz.state-machine .node.state:hover circle,
graph-viz.state-machine .node.state:hover ellipse {
  stroke: var(--color-text);
  stroke-width: 2px;
  fill: rgba(0, 0, 0, 0.1);
}
graph-viz.state-machine .node.state:hover text {
  fill: var(--color-text);
}
graph-viz.state-machine .edge.transition {
  cursor: pointer;
  user-select: none;
}
graph-viz.state-machine .edge.transition path,
graph-viz.state-machine .edge.transition polygon {
  stroke: var(--color-primary);
}
graph-viz.state-machine .edge.transition polygon {
  fill: var(--color-primary);
}
graph-viz.state-machine .edge.transition text {
  fill: var(--color-primary);
}
graph-viz.state-machine .edge.transition:hover path,
graph-viz.state-machine .edge.transition:hover polygon {
  stroke: var(--color-text);
  stroke-width: 2px;
}
graph-viz.state-machine .edge.transition:hover polygon {
  fill: var(--color-text);
}
graph-viz.state-machine .edge.transition:hover text {
  fill: var(--color-text);
}
chatai-box {
  position: fixed;
  width: 300px;
  right: 0px;
  top: 0;
  bottom: 40px;
}
chatai-box#chat {
  display: none;
}
chatai-box#chat.open {
  display: grid;
}
body {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  background: var(--color-neutral);
  font-family: PT Sans;
  font-size: 16px;
  color: var(--color-text);
}
@media only screen and (max-width: 384px) {
  body {
    font-size: 20px;
  }
}
body .body-scrollable {
  display: block;
  margin: 0;
  padding: 0px;
}
ul.horizontal-menu {
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.horizontal-menu li {
  display: inline-block;
  padding: 2px 10px;
}
ul.horizontal-menu li:before {
  content: none;
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  ul.horizontal-menu li {
    display: block;
    text-align: left;
  }
}
ul.horizontal-menu li:hover {
  background-color: var(--color-accent-d10);
}
ul.horizontal-menu li a {
  font-size: 0.8em;
}
.center-wrap {
  max-width: 550px;
  margin: 0 auto;
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  .center-wrap {
    margin: 0px 16px;
  }
}
#main-area {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
}
@media only screen and (max-width: 384px) {
  #main-area {
    display: block;
  }
}
#content-container {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}
#content-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0px;
  z-index: 15;
  background: var(--color-block);
  box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
  color: var(--color-block-text);
}
@media print {
  #content-nav {
    display: none;
  }
}
#content-nav #toc-button {
  margin: 0;
  cursor: pointer;
}
#content-nav ul {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#content-nav ul li {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: block;
  flex-grow: 1;
}
#content-nav ul li a {
  box-sizing: border-box;
  display: block;
  padding: 10px;
  font-family: PT Sans;
  text-align: center;
  overflow: hidden;
  color: var(--color-block-text);
}
#content-nav ul li a[action=toc-toggle],
#content-nav ul li a[action=goto-top],
#content-nav ul li a[href] {
  opacity: 0.9;
}
#content-nav ul li a[action=toc-toggle]:hover,
#content-nav ul li a[action=goto-top]:hover,
#content-nav ul li a[href]:hover {
  opacity: 1;
}
#content-nav ul li a:before {
  margin-right: 15px;
}
@media only screen and (max-width: 720px) {
  #content-nav ul li a {
    padding: 10px 0px;
  }
  #content-nav ul li a:before {
    margin: 0px;
  }
  #content-nav ul li a .title {
    display: none;
  }
}
body.local:before {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  padding: 0.5em 1em 0.5em em;
  background: #ffffff88;
  content: "LOCAL";
}
#content {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0em 0em;
  line-height: 1.5em;
}
@media only screen and (max-width: 384px) {
  #content .content {
    overflow-x: hidden;
  }
}
#content.content-type-o .content-header {
  margin-bottom: 12em;
}
#content.content-type-o .content-header .title {
  font-size: 4em;
}
@media only screen and (max-width: 384px) {
  #content.content-type-o .content-header {
    margin-bottom: 6em;
  }
  #content.content-type-o .content-header .title {
    font-size: 2em;
  }
}
#content .content-header {
  margin-bottom: 4em;
  color: var(--color-accent);
  line-height: 1.2;
}
#content .content-header .title {
  height: auto;
  padding: 0.5em 0em 0em 0em;
  font-size: 2.5em;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}
#content .content-header .title .title-dash {
  display: none;
}
#content .content-header .title .tagline {
  display: block;
  margin-top: 0.5em;
  font-size: 0.5em;
  font-weight: normal;
}
#content .content-header .description {
  margin-top: 2em;
  padding: 0.5em 0em;
  font-size: 1em;
  text-align: left;
  color: #888;
}
#content .content-header .keywords {
  padding: 0;
  font-size: 0.7em;
  text-align: right;
}
#content .content-header .keywords .keyword {
  display: inline-block;
  padding: 0.2em 1em;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2em;
  cursor: pointer;
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  #content .content-header .keywords .keyword {
    padding: 0;
    margin-right: 0.5em;
    background: transparent;
  }
  #content .content-header .keywords .keyword:before {
    margin-right: 0.5em;
    content: "\f09df";
    font-family: Material Design Icons;
  }
  #content .content-header .keywords .keyword:first-child:before {
    content: "";
  }
}
@media only screen and (max-width: 384px), only screen and (min-width: 385px) and (max-width: 550px) {
  #content .content-header {
    width: 100%;
    margin-bottom: 2em;
    border-bottom: transparent;
  }
  #content .content-header .title {
    font-size: 30px;
  }
  #content .content-header .description {
    padding-top: 0px;
    margin-top: 1em;
    font-size: 0.8em;
  }
}
#content footer {
  clear: both;
  margin-top: 100px;
  padding: 1em 0 5em 0;
  background: var(--color-block);
  border-top: 1px solid var(--color-primary);
  font-size: 0.8em;
  color: var(--color-block-text);
}
#content footer dl.meta {
  font-size: 1em;
  line-height: 1;
}
@media only screen and (max-width: 720px) {
  #content footer dl.meta {
    font-size: 10px;
  }
}
#content footer dl.meta dt {
  float: left;
  clear: left;
  width: 8em;
  text-align: right;
  font-weight: bold;
}
#content footer dl.meta dd {
  margin-left: 9em;
  margin-inline-start: 9em;
  border-left: transparent;
}
#content footer dl.meta dd a {
  display: inline-block;
  margin-right: 1em;
  margin-bottom: 0.5em;
  color: var(--color-block-text);
}
#content footer dl.meta dd a:before {
  margin-right: 0.5em;
}
#content footer dl.meta dd:before {
  content: "";
  margin-right: 1em;
}
body.error {
  position: absolute;
  left: 1em;
  right: 1em;
  top: 1em;
  bottom: 1em;
  padding: 1em 2em;
  border: 1em solid #aaa;
  text-align: center;
  color: #555;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.error h1 {
  margin: 0 0 1em 0;
  padding: 0;
  color: #222;
}
body.error p {
  margin: 0 0 0.5em 0;
}
body.error a {
  font-weight: bold;
}
body.error a:hover {
  color: #000;
  text-decoration: underline;
}
body.error .math {
  font-family:
    Georgia,
    Garamond,
    Serif;
}
body.error .math var {
  font-style: italic;
}
body.error #code {
  font-size: 100px;
  font-weight: bold;
  color: #222;
}
.content {
  min-height: 100px;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  line-height: 1em;
}
.content h1 {
  margin-top: 2em;
  padding: 0.3em 0em;
  font-size: 2em;
  color: var(--color-accent);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}
.content h1:before {
  display: block;
  float: left;
  margin: 0 0 0 -50px;
  content: "\f01a6";
  font-family: "Material Design Icons";
  font-weight: normal;
}
.content h2 {
  color: var(--color-accent-d10);
}
.content p {
  margin: 0 0 1em 0;
  margin-block-start: 0;
}
.content p:last-child {
  margin: 0;
}
.search-result {
  margin: 0 0 5em 0;
}
.search-result .search-item {
  margin: 0 0 1em 0;
  padding: 0;
}
.search-result .search-item:before {
  display: block;
  float: left;
  margin-right: 2em;
}
.search-result .search-item .title {
  margin: 0 0 1em 0;
  font-size: 1em;
}
.search-result .search-item .description {
  font-size: 0.8em;
  margin-left: 2em;
  line-height: 1.2em;
}
.keyword-list {
  margin: 0 0 5em 0;
}
.keyword-list ul {
  padding: 0;
}
.keyword-list .item {
  display: inline-block;
  cursor: pointer;
}
.keyword-list .item a:hover {
  text-decoration: underline;
}
.keyword-list .item .count {
  font-size: 0.5em;
}
.keyword-list .item:before {
  display: none;
  content: "";
}
body.login #login {
  margin: 5em auto;
  max-width: 320px;
  padding: 15px;
  text-align: center;
}
body.login #login #login-button {
  display: block;
  margin: 1em auto;
  padding: 10px 20px;
  width: 50%;
  background: var(--color-accent);
  color: var(--color-highlight-1);
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}
body.login #login #login-button:hover {
  background: var(--color-text);
}
body.login #login #login-button:before {
  margin-right: 0.5em;
  content: "\f02ad";
  font-family: "Material Design Icons";
}
#swipe-indicator * {
  display: block;
  position: fixed;
  top: 50%;
  font-size: 35px;
  color: #6E83CF;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
#swipe-indicator #swipe-indicator-left {
  opacity: 0;
  left: 0.1vw;
}
#swipe-indicator #swipe-indicator-right {
  opacity: 0;
  right: 0.1vw;
}