nes-ui-react/dist/nes-ui.debug.css

A design system that paints the web in 8 bits.

/**
 * NES UI for React
 * Copyright (c) 2022 Aron Homberg <https://github.com/kyr0>
 * 
 * Forked from NES.css, licensed MIT (https://github.com/nostalgic-css/NES.css/blob/develop/LICENSE)
 * Copyright (c) 2018 B.C.Rikko <https://github.com/BcRikko>
 */
/*!
 * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@-ms-viewport {
  width: device-width;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
  text-align: left;
  background-color: var(--color-white-absolute);
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

:root {
  --font-family: "Press Start 2P";
  --cursor-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAARRJREFUWEfdl0ESwyAIRXXr2vtf0L1bO3GqiVTka52SpqukwfD4IhBrzl+6XB+Xltxzt3RdsYPWX43UAJL33oQQmgitrWw0kgY0pb4Ag/WtH+dcijEa+iJ1gLqRpxL5Lw50VYlD3qwh8AIdAJr6ZWs4YM6eO1WiAr8AKD6GWwHWBMMpxCX1Rx1ApeWAvgFYUkJyWAJCFLgXQKVhKt1sck4rcBuAWRApOS/P8wHotcxud9l1OqYBdjnmeoiogAbA0nFEKyXtsqOxaUtplpISmdsgELRL0nrwFwBNTrCjsVAxZyrh7PjdnZTQwQTZAinB0ZGu6+s5AAOZhkFuU0ATgDslUHCQkZSF7+dL35Y7AUDO1kwd4AWXSKwd8HVMJQAAAABJRU5ErkJggg==");
  --cursor-click-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC") 14 0;
  --border-size: 4px;
  --font-size: 16px;
  --background-color: #fff;
  --color-white: #efefef;
  --color-black: #212529;
  --color-black-absolute: #000;
  --color-white-absolute: #fff;
  --contrast-alpha-color-normal: rgba(153, 153, 153, 0.7333333333);
  --contrast-alpha-color-shadow: rgba(153, 153, 153, 0.2);
  --default-color-normal: #fefefe;
  --default-color-hover: #e7e7e7;
  --default-color-shadow: #adafbc;
  --disabled-color-normal: #888;
  --disabled-color-shadow: #adafbc;
  --primary-color-normal: #209cee;
  --primary-color-hover: #108de0;
  --primary-color-shadow: #006bb3;
  --success-color-normal: #92cc41;
  --success-color-hover: #76c442;
  --success-color-shadow: #4aa52e;
  --warning-color-normal: #f7d51d;
  --warning-color-hover: #f2c409;
  --warning-color-shadow: #e59400;
  --error-color-normal: #e76e55;
  --error-color-hover: #ce372b;
  --error-color-shadow: #8c2022;
}

html.nes-ui {
  cursor: var(--cursor-url), auto;
  font-family: var(--font-family);
}
html.nes-ui pre,
html.nes-ui code,
html.nes-ui kbd,
html.nes-ui samp {
  font-family: var(--font-family);
}
html.nes-ui body {
  font-size: 16px;
  color: #212529;
  background-color: var(--background-color);
  -webkit-font-smoothing: antialiased;
}
html.nes-ui label {
  cursor: inherit;
}
html.nes-ui a,
html.nes-ui button {
  cursor: var(--cursor-click-url), pointer;
}
html.nes-ui button,
html.nes-ui [type=button],
html.nes-ui [type=reset],
html.nes-ui [type=submit] {
  -webkit-appearance: none;
}
html.nes-ui input[type=radio],
html.nes-ui input[type=checkbox] {
  outline: 0;
}

:root {
  --pixel-borders-image-1-primary-color-normal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='%23209cee' /></svg>");
  --pixel-borders-image-1-success-color-normal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='%2392cc41' /></svg>");
  --pixel-borders-image-1-warning-color-normal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='%23f7d51d' /></svg>");
  --pixel-borders-image-1-error-color-normal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='%23e76e55' /></svg>");
  --pixel-borders-image-1-color-black-absolute: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='%23000' /></svg>");
  --pixel-borders-image-2-color-black-absolute: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M2 2h2v2H2zM4 0h2v2H4zM10 4h2v2h-2zM0 4h2v2H0zM6 0h2v2H6zM8 2h2v2H8zM8 8h2v2H8zM6 10h2v2H6zM0 6h2v2H0zM10 6h2v2h-2zM4 10h2v2H4zM2 8h2v2H2z' fill='%23000' /></svg>");
  --pixel-borders-image-1-color-white-absolute: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='%23fff' /></svg>");
  --pixel-borders-image-2-color-white-absolute: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M2 2h2v2H2zM4 0h2v2H4zM10 4h2v2h-2zM0 4h2v2H0zM6 0h2v2H6zM8 2h2v2H8zM8 8h2v2H8zM6 10h2v2H6zM0 6h2v2H0zM10 6h2v2h-2zM4 10h2v2H4zM2 8h2v2H2z' fill='%23fff' /></svg>");
  --pixel-borders-image-1-contrast-alpha-color-shadow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='rgba(153, 153, 153, 0.2)' /></svg>");
  --pixel-borders-image-1-contrast-alpha-color-normal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z' fill='rgba(153, 153, 153, 0.7333333333)' /></svg>");
}

.nes-ui-btn,
.nes-ui-icon-btn, .nes-ui-dark-mode .nes-ui-progress.nes-ui-is-rounded, .nes-ui-progress.nes-ui-is-rounded {
  border-style: solid;
  border-width: var(--border-size);
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
html.nes-ui ::-webkit-scrollbar {
  width: 16px;
}
html.nes-ui ::-webkit-scrollbar-track {
  background: transparent;
}
html.nes-ui ::-webkit-scrollbar-thumb {
  background: var(--color-white);
  border-style: solid;
  border-width: 4px;
  border-color: var(--contrast-alpha-color-normal);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-contrast-alpha-color-normal);
  position: relative;
}
@supports (border-image-source: none) {
  html.nes-ui ::-webkit-scrollbar-thumb {
    border-radius: 14px;
  }
}
html.nes-ui ::-webkit-scrollbar-thumb::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset -4px -4px "contrast-alpha-color-shadow";
}
html.nes-ui ::-webkit-scrollbar-corner {
  display: none;
}
html.nes-ui.nes-ui-dark-mode ::-webkit-scrollbar {
  width: 16px;
}
html.nes-ui.nes-ui-dark-mode ::-webkit-scrollbar-thumb {
  background: var(--color-black);
  border-style: solid;
  border-width: 4px;
  border-color: var(--contrast-alpha-color-normal);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-contrast-alpha-color-normal);
  position: relative;
}
@supports (border-image-source: none) {
  html.nes-ui.nes-ui-dark-mode ::-webkit-scrollbar-thumb {
    border-radius: 14px;
  }
}
html.nes-ui.nes-ui-dark-mode ::-webkit-scrollbar-thumb::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset -4px -4px "contrast-alpha-color-shadow";
}

html.nes-ui img,
html.nes-ui canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
html.nes-ui img.invert.nes-ui-dark-mode,
html.nes-ui canvas.invert.nes-ui-dark-mode {
  filter: invert(1);
}

.nes-ui-is-inverted {
  filter: invert(1);
}

.nes-ui-pointer {
  cursor: var(--cursor-click-url), pointer;
}

.nes-ui-pixel-border {
  border-radius: 4px !important;
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-black-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-pixel-border {
    border-radius: 14px;
  }
}

.nes-ui-pixel-border-2 {
  border-radius: 8px !important;
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-black-absolute);
  border-image-slice: 4;
  border-image-width: 2;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-2-color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-pixel-border-2 {
    border-radius: 20px;
  }
}

.nes-ui-pixel-border-2x {
  border-radius: 0 !important;
  border-style: solid;
  border-width: 8px;
  border-color: var(--color-black-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-pixel-border-2x {
    border-radius: 26px;
  }
}

.nes-ui-pixel-border-2x-2 {
  border-radius: 0 !important;
  border-style: solid;
  border-width: 8px;
  border-color: var(--color-black-absolute);
  border-image-slice: 4;
  border-image-width: 2;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-2-color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-pixel-border-2x-2 {
    border-radius: 36px;
  }
}

.nes-ui-dark-mode .nes-ui-pixel-border {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-white-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-white-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-dark-mode .nes-ui-pixel-border {
    border-radius: 14px;
  }
}
.nes-ui-dark-mode .nes-ui-pixel-border-2 {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-white-absolute);
  border-image-slice: 4;
  border-image-width: 2;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-2-color-white-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-dark-mode .nes-ui-pixel-border-2 {
    border-radius: 20px;
  }
}
.nes-ui-dark-mode .nes-ui-pixel-border-2x {
  border-style: solid;
  border-width: 8px;
  border-color: var(--color-white-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-white-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-dark-mode .nes-ui-pixel-border-2x {
    border-radius: 26px;
  }
}
.nes-ui-dark-mode .nes-ui-pixel-border-2x-2 {
  border-style: solid;
  border-width: 8px;
  border-color: var(--color-white-absolute);
  border-image-slice: 4;
  border-image-width: 2;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-2-color-white-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-dark-mode .nes-ui-pixel-border-2x-2 {
    border-radius: 36px;
  }
}

.nes-ui-scale-2x {
  position: absolute;
  transform: scale(2);
  transform-origin: 0% 0%;
}

.nes-ui-row {
  max-width: 100em;
  margin: 0 auto;
}
.nes-ui-row:not(:last-child) {
  margin-bottom: 8px;
}
.nes-ui-row::after {
  content: "";
  display: table;
  clear: both;
}
.nes-ui-row [class^=nes-ui-col-] {
  float: left;
  display: block;
}
.nes-ui-row [class^=nes-ui-col-]:not(:last-child) {
  margin-right: 8px;
}
.nes-ui-row .nes-ui-col-1-of-2 {
  word-break: break-all;
  width: calc((100% - 8px) / 2);
}
.nes-ui-row .nes-ui-col-1-of-3 {
  word-break: break-all;
  width: calc((100% - 2 * 8px) / 3);
}
.nes-ui-row .nes-ui-col-2-of-3 {
  word-break: break-all;
  width: calc(2 * (100% - 2 * 8px) / 3 + 8px);
}
.nes-ui-row .nes-ui-col-1-of-4 {
  word-break: break-all;
  width: calc((100% - 3 * 8px) / 4);
}
.nes-ui-row .nes-ui-col-2-of-4 {
  word-break: break-all;
  width: calc(2 * (100% - 3 * 8px) / 4 + 8px);
}
.nes-ui-row .nes-ui-col-3-of-4 {
  word-break: break-all;
  width: calc(3 * (100% - 3 * 8px) / 4 + 2 * 8px);
}
@media screen and (max-width: 450px) {
  .nes-ui-row [class^=nes-ui-col-] {
    clear: both;
    width: 100%;
  }
  .nes-ui-row [class^=nes-ui-col-]:not(:last-child) {
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 768px) {
  .nes-ui-row .nes-ui-col-1-of-4,
  .nes-ui-row .nes-ui-col-2-of-4,
  .nes-ui-row .nes-ui-col-3-of-4 {
    clear: both;
    width: 100%;
  }
  .nes-ui-row .nes-ui-col-1-of-4:not(:last-child),
  .nes-ui-row .nes-ui-col-2-of-4:not(:last-child),
  .nes-ui-row .nes-ui-col-3-of-4:not(:last-child) {
    margin-bottom: 8px;
  }
}

.nes-ui-badge {
  position: relative;
  display: inline-block;
  width: 10.5em;
  height: 1.875em;
  margin: 0.5em;
  font-size: 0.9em;
  white-space: nowrap;
  vertical-align: top;
  user-select: none;
  margin-right: 2em;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-dark:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #212529;
  left: 0;
  box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0 0 #212529, -0.5em 0 #212529;
  color: #000;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-dark:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #212529;
  right: 0;
  box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0.5em 0 #212529, 0 0 #212529;
}
.nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-dark:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #212529;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-dark:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #212529;
  box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0.5em 0 #212529, -0.5em 0 #212529;
}
.nes-ui-badge span.nes-ui-is-dark:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #212529;
  box-shadow: 0 0.5em #212529, 0 -0.5em #212529, 0.5em 0 #212529, -0.5em 0 #212529;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-primary:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  left: 0;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0 0 #209cee, -0.5em 0 #209cee;
  color: #000;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-primary:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  right: 0;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, 0 0 #209cee;
}
.nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-primary:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-primary:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, -0.5em 0 #209cee;
}
.nes-ui-badge span.nes-ui-is-primary:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, -0.5em 0 #209cee;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-disabled:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #888;
  left: 0;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0 0 #888, -0.5em 0 #888;
  color: #000;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-disabled:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #888;
  right: 0;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0.5em 0 #888, 0 0 #888;
}
.nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-disabled:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #888;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-disabled:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #888;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0.5em 0 #888, -0.5em 0 #888;
}
.nes-ui-badge span.nes-ui-is-disabled:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #888;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0.5em 0 #888, -0.5em 0 #888;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-success:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  left: 0;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0 0 #92cc41, -0.5em 0 #92cc41;
  color: #000;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-success:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  right: 0;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, 0 0 #92cc41;
}
.nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-success:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-success:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, -0.5em 0 #92cc41;
}
.nes-ui-badge span.nes-ui-is-success:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, -0.5em 0 #92cc41;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-warning:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  left: 0;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0 0 #f7d51d, -0.5em 0 #f7d51d;
  color: #000;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-warning:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  right: 0;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, 0 0 #f7d51d;
}
.nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-warning:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-warning:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, -0.5em 0 #f7d51d;
}
.nes-ui-badge span.nes-ui-is-warning:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, -0.5em 0 #f7d51d;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-error:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  left: 0;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0 0 #e76e55, -0.5em 0 #e76e55;
  color: #000;
}
.nes-ui-badge.nes-ui-is-split span.nes-ui-is-error:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  right: 0;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, 0 0 #e76e55;
}
.nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-error:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-badge.nes-ui-is-icon span.nes-ui-is-error:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, -0.5em 0 #e76e55;
}
.nes-ui-badge span.nes-ui-is-error:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, -0.5em 0 #e76e55;
}

.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-dark:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #000;
  text-align: center;
  background-color: #000;
  left: 0;
  box-shadow: 0 0.5em #000, 0 -0.5em #000, 0 0 #000, -0.5em 0 #000;
  color: #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-dark:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #000;
  text-align: center;
  background-color: #000;
  right: 0;
  box-shadow: 0 0.5em #000, 0 -0.5em #000, 0.5em 0 #000, 0 0 #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-dark:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #000;
  text-align: center;
  background-color: #000;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-dark:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #000;
  text-align: center;
  background-color: #000;
  box-shadow: 0 0.5em #000, 0 -0.5em #000, 0.5em 0 #000, -0.5em 0 #000;
}
.nes-ui-dark-mode .nes-ui-badge span.nes-ui-is-dark:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #000;
  text-align: center;
  background-color: #000;
  box-shadow: 0 0.5em #000, 0 -0.5em #000, 0.5em 0 #000, -0.5em 0 #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-primary:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  left: 0;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0 0 #209cee, -0.5em 0 #209cee;
  color: #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-primary:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  right: 0;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, 0 0 #209cee;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-primary:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-primary:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, -0.5em 0 #209cee;
}
.nes-ui-dark-mode .nes-ui-badge span.nes-ui-is-primary:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #209cee;
  box-shadow: 0 0.5em #209cee, 0 -0.5em #209cee, 0.5em 0 #209cee, -0.5em 0 #209cee;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-success:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  left: 0;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0 0 #92cc41, -0.5em 0 #92cc41;
  color: #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-success:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  right: 0;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, 0 0 #92cc41;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-success:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-success:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, -0.5em 0 #92cc41;
}
.nes-ui-dark-mode .nes-ui-badge span.nes-ui-is-success:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #92cc41;
  box-shadow: 0 0.5em #92cc41, 0 -0.5em #92cc41, 0.5em 0 #92cc41, -0.5em 0 #92cc41;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-disabled:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #888;
  left: 0;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0 0 #888, -0.5em 0 #888;
  color: #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-disabled:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #888;
  right: 0;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0.5em 0 #888, 0 0 #888;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-disabled:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #888;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-disabled:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #888;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0.5em 0 #888, -0.5em 0 #888;
}
.nes-ui-dark-mode .nes-ui-badge span.nes-ui-is-disabled:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #888;
  box-shadow: 0 0.5em #888, 0 -0.5em #888, 0.5em 0 #888, -0.5em 0 #888;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-warning:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  left: 0;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0 0 #f7d51d, -0.5em 0 #f7d51d;
  color: #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-warning:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  right: 0;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, 0 0 #f7d51d;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-warning:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-warning:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, -0.5em 0 #f7d51d;
}
.nes-ui-dark-mode .nes-ui-badge span.nes-ui-is-warning:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #f7d51d;
  box-shadow: 0 0.5em #f7d51d, 0 -0.5em #f7d51d, 0.5em 0 #f7d51d, -0.5em 0 #f7d51d;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-error:first-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  left: 0;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0 0 #e76e55, -0.5em 0 #e76e55;
  color: #000;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-split span.nes-ui-is-error:last-child {
  position: absolute;
  top: 0;
  width: 50%;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  right: 0;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, 0 0 #e76e55;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon {
  width: 5.25em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-error:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7em;
  font-size: 0.5em;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  position: absolute;
  top: -2.8em;
  left: -2.7em;
  height: 2.7em;
}
.nes-ui-dark-mode .nes-ui-badge.nes-ui-is-icon span.nes-ui-is-error:last-child {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 6em;
  font-size: 0.88em;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, -0.5em 0 #e76e55;
}
.nes-ui-dark-mode .nes-ui-badge span.nes-ui-is-error:first-child {
  position: absolute;
  top: 0;
  width: 100%;
  color: #212529;
  text-align: center;
  background-color: #e76e55;
  box-shadow: 0 0.5em #e76e55, 0 -0.5em #e76e55, 0.5em 0 #e76e55, -0.5em 0 #e76e55;
}

.nes-ui-toast {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-black-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-black-absolute);
  position: relative;
  display: flex;
  padding: 1rem 1.5rem;
  margin: 8px;
  margin-bottom: 30px;
  background: var(--color-white-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-toast {
    border-radius: 14px;
  }
}
.nes-ui-toast > :last-child {
  margin-bottom: 0;
}
.nes-ui-toast .nes-ui-text {
  margin-bottom: 0;
}
.nes-ui-toast::before, .nes-ui-toast::after {
  position: absolute;
  content: "";
}
.nes-ui-toast.nes-ui-clickable {
  cursor: var(--cursor-click-url), pointer;
}
.nes-ui-toast:not(.nes-ui-clickable) {
  cursor: var(--cursor-url), default;
}
.nes-ui-toast.nes-ui-from-left::before, .nes-ui-toast.nes-ui-from-left::after, .nes-ui-toast.nes-ui-from-right::before, .nes-ui-toast.nes-ui-from-right::after {
  left: 2rem;
}
.nes-ui-toast.nes-ui-from-left::before, .nes-ui-toast.nes-ui-from-right::before {
  bottom: -14px;
  width: 26px;
  height: 10px;
  border-right: 4px solid var(--color-black);
  border-left: 4px solid var(--color-black);
  background-color: var(--color-white);
}
.nes-ui-toast.nes-ui-from-left::after, .nes-ui-toast.nes-ui-from-right::after {
  bottom: -18px;
  width: 18px;
  height: 4px;
  margin-right: 8px;
  color: #212529;
  background-color: var(--color-white);
  box-shadow: -4px 0, 4px 0, -4px 4px #efefef, 0 4px, -8px 4px, -4px 8px, -8px 8px;
}
.nes-ui-toast.nes-ui-from-right::before, .nes-ui-toast.nes-ui-from-right::after {
  left: unset;
  right: 2rem;
}
.nes-ui-toast.nes-ui-from-right::after {
  margin-right: 4px;
  box-shadow: -4px 0, 4px 0, 4px 4px #efefef, 0 4px, 8px 4px, 4px 8px, 8px 8px;
}

.nes-ui-dark-mode .nes-ui-toast {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-white-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-white-absolute);
  border-radius: 0 !important;
  color: var(--color-white);
  background: var(--color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-dark-mode .nes-ui-toast {
    border-radius: 14px;
  }
}
.nes-ui-dark-mode .nes-ui-toast.nes-ui-from-left::before, .nes-ui-dark-mode .nes-ui-toast.nes-ui-from-right::before {
  background-color: var(--color-black);
  border-color: var(--color-white);
}
.nes-ui-dark-mode .nes-ui-toast.nes-ui-from-left::after, .nes-ui-dark-mode .nes-ui-toast.nes-ui-from-right::after {
  color: var(--color-white);
  background-color: var(--color-black);
}
.nes-ui-dark-mode .nes-ui-toast.nes-ui-from-left::before {
  box-shadow: -5px 10px 0 6px var(--color-black);
}
.nes-ui-dark-mode .nes-ui-toast.nes-ui-from-left::after {
  box-shadow: -4px 0, 4px 0, -4px 4px #212529, 0 4px, -8px 4px, -4px 8px, -8px 8px;
}
.nes-ui-dark-mode .nes-ui-toast.nes-ui-from-right::before {
  box-shadow: 5px 10px 0 6px var(--color-black);
}
.nes-ui-dark-mode .nes-ui-toast.nes-ui-from-right::after {
  box-shadow: -4px 0, 4px 0, 4px 4px #212529, 0 4px, 8px 4px, 4px 8px, 8px 8px;
}

.nes-ui-container {
  position: relative;
  padding: 1.5rem 2rem;
  border-color: var(--color-black-absolute);
  border-style: solid;
  border-width: 4px;
  background-color: var(--color-white);
  position: relative;
  margin: var(--border-size);
}
.nes-ui-container > :last-child {
  margin-bottom: 0;
}
.nes-ui-container.nes-ui-is-center {
  text-align: center;
}
.nes-ui-container.nes-ui-is-right {
  text-align: right;
}
.nes-ui-container.nes-ui-with-title > .nes-ui-title {
  display: table;
  padding: 0 0.5rem;
  margin: -1.8rem 0 1rem;
  font-size: 1rem;
  background-color: var(--color-white);
}
.nes-ui-container.nes-ui-with-title.nes-ui-is-center > .nes-ui-title {
  margin: -2rem auto 1rem;
}
.nes-ui-container.nes-ui-with-title.nes-ui-is-right > .nes-ui-title {
  margin: -2rem 0 1rem auto;
}
.nes-ui-container.nes-ui-with-title {
  margin-top: 2em;
}
.nes-ui-container.nes-ui-with-title > .nes-ui-title {
  top: -0.5rem;
  position: relative;
}
.nes-ui-container.nes-ui-is-rounded {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-black-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-container.nes-ui-is-rounded {
    border-radius: 14px;
  }
}
.nes-ui-container.nes-ui-is-rounded.nes-ui-with-title > .nes-ui-title {
  margin-top: -1.8rem;
}
.nes-ui-container.nes-ui-is-rounded.nes-ui-with-title.nes-ui-is-centered > .nes-ui-title {
  margin: -1.5rem auto 1rem;
}
.nes-ui-container.nes-ui-is-rounded.nes-ui-with-title.nes-ui-is-right > .nes-ui-title {
  margin: -1.5rem 0 1rem auto;
}

.nes-ui-dark-mode .nes-ui-container {
  color: var(--color-white);
  background-color: var(--color-black);
  border-color: var(--color-white-absolute);
}
.nes-ui-dark-mode .nes-ui-container::after {
  position: absolute;
  top: -7.2px;
  right: -7.2px;
  bottom: -7.2px;
  left: -7.2px;
  z-index: -1;
  content: "";
  background-color: #212529;
}
.nes-ui-dark-mode .nes-ui-container.nes-ui-with-title {
  margin-top: 2em;
}
.nes-ui-dark-mode .nes-ui-container.nes-ui-with-title > .nes-ui-title {
  top: -0.5rem;
  position: relative;
  color: var(--color-white);
  background-color: var(--color-black);
}
.nes-ui-dark-mode .nes-ui-container.nes-ui-is-rounded {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-white-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-white-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-dark-mode .nes-ui-container.nes-ui-is-rounded {
    border-radius: 14px;
  }
}
.nes-ui-dark-mode .nes-ui-container.nes-ui-is-rounded::after {
  content: none;
}
.nes-ui-dark-mode .nes-ui-container.nes-ui-is-rounded.nes-ui-with-title > .nes-ui-title {
  margin-top: -1.8rem;
}
.nes-ui-dark-mode .nes-ui-container.nes-ui-is-rounded.nes-ui-with-title.nes-ui-is-centered > .nes-ui-title {
  margin: -1.5rem auto 1rem;
}
.nes-ui-dark-mode .nes-ui-container.nes-ui-is-rounded.nes-ui-with-title.nes-ui-is-right > .nes-ui-title {
  margin: -1.5rem 0 1rem auto;
}

.nes-ui-modal {
  padding: 4px;
  border-width: 4px;
  display: block;
  width: 80vw;
  color: #212529;
  background-color: var(--color-white-absolute);
  border-color: #efefef;
  border-radius: none;
  z-index: 10000;
  top: 100px;
  position: fixed;
}
.nes-ui-modal > :last-child {
  margin-bottom: 0;
}
.nes-ui-modal.nes-ui-is-rounded {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-black-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-modal.nes-ui-is-rounded {
    border-radius: 14px;
  }
}
.nes-ui-modal .nes-ui-modal-content {
  margin: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.nes-ui-modal:not(.nes-ui-is-rounded)::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  content: "";
  border: var(--border-size) solid var(--color-white-absolute);
}

.nes-ui-dark-mode .nes-ui-modal {
  border-color: var(--color-white-absolute);
  color: #efefef;
  background-color: #212529;
  border-color: #efefef;
}
.nes-ui-dark-mode .nes-ui-modal.nes-ui-is-rounded {
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-white-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-white-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-dark-mode .nes-ui-modal.nes-ui-is-rounded {
    border-radius: 14px;
  }
}
.nes-ui-dark-mode .nes-ui-modal:not(.nes-ui-is-rounded)::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  content: "";
  border: var(--border-size) solid var(--color-white-absolute);
}

.nes-ui-modal-backdrop {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.nes-ui-list {
  list-style-type: none;
}
.nes-ui-list.nes-ui-is-small li {
  font-size: 1em;
}
.nes-ui-list.nes-ui-is-medium li {
  font-size: 1.25em;
}
.nes-ui-list.nes-ui-is-large {
  font-size: 1.5em;
}
.nes-ui-list.nes-ui-is-xlarge {
  font-size: 1.75em;
}
.nes-ui-list li {
  position: relative;
}
.nes-ui-list.nes-ui-is-disc li::before {
  position: absolute;
  top: calc(50% - 8px);
  left: -22px;
  content: "";
  transform: scale(0.75);
  width: 2px;
  height: 2px;
  color: #212529;
  box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,8px 6px,10px 6px,12px 6px,14px 6px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px;
}
@supports (-moz-appearance: meterbar) {
  .nes-ui-list.nes-ui-is-disc li::before {
    box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em;
  }
}
.nes-ui-list.nes-ui-is-circle li::before {
  position: absolute;
  top: calc(50% - 8px);
  left: -22px;
  content: "";
  transform: scale(0.75);
  width: 2px;
  height: 2px;
  color: #212529;
  box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,12px 6px,14px 6px,4px 8px,6px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px;
}
@supports (-moz-appearance: meterbar) {
  .nes-ui-list.nes-ui-is-circle li::before {
    box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em;
  }
}

.nes-ui-dark-mode .nes-ui-list.nes-ui-is-disc li::before {
  position: absolute;
  top: calc(50% - 8px);
  left: -22px;
  content: "";
  transform: scale(0.75);
  width: 2px;
  height: 2px;
  color: #efefef;
  box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,8px 6px,10px 6px,12px 6px,14px 6px,4px 8px,6px 8px,8px 8px,10px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px;
}
@supports (-moz-appearance: meterbar) {
  .nes-ui-dark-mode .nes-ui-list.nes-ui-is-disc li::before {
    box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em;
  }
}
.nes-ui-dark-mode .nes-ui-list.nes-ui-is-circle li::before {
  position: absolute;
  top: calc(50% - 8px);
  left: -22px;
  content: "";
  transform: scale(0.75);
  width: 2px;
  height: 2px;
  color: #efefef;
  box-shadow: 8px 2px,10px 2px,6px 4px,8px 4px,10px 4px,12px 4px,4px 6px,6px 6px,12px 6px,14px 6px,4px 8px,6px 8px,12px 8px,14px 8px,6px 10px,8px 10px,10px 10px,12px 10px,8px 12px,10px 12px;
}
@supports (-moz-appearance: meterbar) {
  .nes-ui-dark-mode .nes-ui-list.nes-ui-is-circle li::before {
    box-shadow: 8px 2px 0 0.020em,10px 2px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,10px 4px 0 0.020em,12px 4px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,12px 6px 0 0.020em,14px 6px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,12px 8px 0 0.020em,14px 8px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,12px 10px 0 0.020em,8px 12px 0 0.020em,10px 12px 0 0.020em;
  }
}
.nes-ui-dark-mode .nes-ui-list li {
  color: #efefef;
}

.nes-ui-progress {
  width: 100%;
  height: 28px;
  margin: 4px;
  color: #212529;
  background-color: #efefef;
  -webkit-appearance: none;
  appearance: none;
}
.nes-ui-progress::-webkit-progress-bar {
  background-color: var(--color-white-absolute);
  border-style: solid;
  border-width: 4px;
  border-color: var(--color-black-absolute);
  border-image-slice: 2;
  border-image-width: 1;
  border-image-outset: 0;
  border-image-source: var(--pixel-borders-image-1-color-black-absolute);
}
@supports (border-image-source: none) {
  .nes-ui-progress::-webkit-progress-bar {
    border-radius: 14px;
  }
}
.nes-ui-progress::-webkit-progress-value {
  background-color: #212529;
}
.nes-ui-progress::-moz-progress-bar {
  background-color: #212529;
}
.nes-ui-progress::-ms-fill {
  background-color: #212529;
  border: none;
}
.nes-ui-progress.nes-ui-is-rounded {
  border-image-slice: 1;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
  border-image-outset: 2;
}
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .nes-ui-progress.nes-ui-is-rounded {
    border-image-repeat: space;
  }
}
@supports (-moz-appearance: meterbar) {
  .nes-ui-progress.nes-ui-is-rounded {
    border-image-repeat: stretch;
  }
}
.nes-ui