@charset "UTF-8";
:root {
  --color-white: #000000;
  --color-black: #ffffff;
  --color-amber:#FFB000 !important;
  --color-green: #66FF66 !important;
  --color-dos: #0000AA !important;
}

:root {
  --color-bg: var(--color-white);
  --color-fe: var(--color-black);
  --color-text: var(--color-fe);
  --color-link: var(--color-fe);
  --color-hover-bg: var(--color-fe);
  --color-hover-fe: var(--color-bg);
  --color-border: var(--color-fe);
  --head-color-bg: var(--color-fe);
  --head-color-fe: var(--color-bg);
  --color-scrollbar-thumb: var(--color-fe);
  --color-scrollbar-track: var(--color-bg);
  --color-button-bg: var(--color-bg)
  --collor-button-fe: var(--color-fe) ;
}

.color-amber {
  --color-fe: var(--color-amber);
  --color-text: var(--color-fe);
  --color-link: var(--color-fe);
  --color-hover-bg: var(--color-fe);
  --color-hover-fe: var(--color-bg);
  --color-border: var(--color-fe);
  --head-color-bg: var(--color-fe);
  --head-color-fe: var(--color-bg);
  --color-scrollbar-thumb: var(--color-fe);
  --color-scrollbar-track: var(--color-bg);
  --color-button-bg: var(--color-bg)
  --collor-button-fe: var(--color-fe) ;
}

.color-green {
  --color-fe: var(--color-green);
  --color-text: var(--color-fe);
  --color-link: var(--color-fe);
  --color-hover-bg: var(--color-fe);
  --color-hover-fe: var(--color-bg);
  --color-border: var(--color-fe);
  --head-color-bg: var(--color-fe);
  --head-color-fe: var(--color-bg);
  --color-scrollbar-thumb: var(--color-fe);
  --color-scrollbar-track: var(--color-bg);
  --color-button-bg: var(--color-bg)
  --collor-button-fe: var(--color-fe) ;
}

.color-dos {
  --color-bg: var(--color-dos);
  --color-text: var(--color-fe);
  --color-link: var(--color-fe);
  --color-hover-bg: var(--color-fe);
  --color-hover-fe: var(--color-bg);
  --color-border: var(--color-fe);
  --head-color-bg: var(--color-fe);
  --head-color-fe: var(--color-bg);
  --color-scrollbar-thumb: var(--color-fe);
  --color-scrollbar-track: var(--color-bg);
  --color-button-bg: var(--color-bg)
  --collor-button-fe: var(--color-fe) ;
}

@media print {
  :root {
    --color-bg: var(--color-white);
    --color-fe: var(--color-black);
    --color-text: var(--color-fe);
    --color-link: var(--color-fe);
    --color-hover-bg: var(--color-fe);
    --color-hover-fe: var(--color-bg);
    --color-border: var(--color-fe);
    --head-color-bg: var(--color-fe);
    --head-color-fe: var(--color-bg);
    --color-scrollbar-thumb: var(--color-fe);
    --color-scrollbar-track: var(--color-bg);
    --color-button-bg: var(--color-bg)
    --collor-button-fe: var(--color-fe) ;
  }
  .color-amber {
    --color-fe: var(--color-black);
    --color-text: var(--color-fe);
    --color-link: var(--color-fe);
    --color-hover-bg: var(--color-fe);
    --color-hover-fe: var(--color-bg);
    --color-border: var(--color-fe);
    --head-color-bg: var(--color-fe);
    --head-color-fe: var(--color-bg);
    --color-scrollbar-thumb: var(--color-fe);
    --color-scrollbar-track: var(--color-bg);
    --color-button-bg: var(--color-bg)
    --collor-button-fe: var(--color-fe) ;
  }
  .color-green {
    --color-fe: var(--color-black);
    --color-text: var(--color-fe);
    --color-link: var(--color-fe);
    --color-hover-bg: var(--color-fe);
    --color-hover-fe: var(--color-bg);
    --color-border: var(--color-fe);
    --head-color-bg: var(--color-fe);
    --head-color-fe: var(--color-bg);
    --color-scrollbar-thumb: var(--color-fe);
    --color-scrollbar-track: var(--color-bg);
    --color-button-bg: var(--color-bg)
    --collor-button-fe: var(--color-fe) ;
  }
  body, body * {
    background-color: var(--color-bg) !important;
    color: var(--color-fe) !important;
  }
}
main {
  width: 80%;
  margin: auto;
}
@media screen and (max-width: 1600px) {
  main {
    width: 98vw;
    padding-left: 3px;
    padding-right: 3px;
  }
}

body.sidebar-layout {
  overflow-y: hidden;
}

.sidebar-layout {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 3px;
  height: 100vh;
}
.sidebar-layout .aside-wrapper-fullheight {
  float: left;
  padding: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 40%;
  max-width: 40%;
}
.sidebar-layout .aside-wrapper-fullheight .banner {
  font-size: 0.6rem;
}
.sidebar-layout .aside-wrapper-fullheight aside {
  flex-grow: 3;
  height: 100vh;
  overflow-y: scroll;
}
.sidebar-layout .aside-wrapper-fullheight footer {
  padding: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  align-self: flex-end;
  font-size: 0.8rem;
}
.sidebar-layout .aside-wrapper-fullheight .button-close {
  display: none;
}
@media print {
  .sidebar-layout .aside-wrapper-fullheight {
    display: none;
  }
}
.sidebar-layout .aside-wrapper-fullheight[data-visible=false] {
  display: none;
}
@media screen and (max-width: 1700px) {
  .sidebar-layout .aside-wrapper-fullheight {
    display: none;
    position: fixed;
    left: 0;
    z-index: 999999;
    width: 40%;
    background-color: var(--color-bg);
    padding: 1px;
    overflow-y: scroll;
  }
  .sidebar-layout .aside-wrapper-fullheight .button-close {
    display: block;
  }
  .sidebar-layout .aside-wrapper-fullheight .banner {
    font-size: 0.8rem;
  }
  .sidebar-layout .aside-wrapper-fullheight {
    border-right: 2px dashed var(--color-fe);
    top: 60px !important;
  }
  .sidebar-layout .aside-wrapper-fullheight[data-visible=false] {
    display: none !important;
  }
  .sidebar-layout .aside-wrapper-fullheight[data-visible=true] {
    display: flex !important;
  }
}
@media screen and (max-width: 800px) {
  .sidebar-layout .aside-wrapper-fullheight {
    width: 100%;
    border: none;
    overflow-y: scroll;
  }
  .sidebar-layout .aside-wrapper-fullheight .banner {
    font-size: 1rem;
  }
}
.sidebar-layout .aside-wrapper {
  float: left;
  padding: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 40%;
  max-width: 40%;
}
.sidebar-layout .aside-wrapper .banner {
  font-size: 0.6rem;
}
.sidebar-layout .aside-wrapper aside {
  flex-grow: 3;
  height: 100vh;
  overflow-y: scroll;
}
.sidebar-layout .aside-wrapper footer {
  padding: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  align-self: flex-end;
  font-size: 0.8rem;
}
.sidebar-layout .aside-wrapper .button-close {
  display: none;
}
@media print {
  .sidebar-layout .aside-wrapper {
    display: none;
  }
}
@media screen and (max-width: 1600px) {
  .sidebar-layout .aside-wrapper {
    display: none;
    position: fixed;
    left: 0;
    z-index: 999999;
    width: 40%;
    background-color: var(--color-bg);
    padding: 1px;
    overflow-y: scroll;
  }
  .sidebar-layout .aside-wrapper .button-close {
    display: block;
  }
  .sidebar-layout .aside-wrapper .banner {
    font-size: 0.8rem;
  }
  .sidebar-layout .aside-wrapper {
    border: 2px dashed var(--color-fe);
    top: 0;
  }
  .sidebar-layout .aside-wrapper[data-visible=false] {
    display: none;
  }
  .sidebar-layout .aside-wrapper[data-visible=true] {
    display: flex;
  }
}
@media screen and (max-width: 800px) {
  .sidebar-layout .aside-wrapper {
    width: 100%;
    border: none;
    overflow-y: scroll;
  }
  .sidebar-layout .aside-wrapper .banner {
    font-size: 1rem;
  }
}

.main-wrapper {
  float: right;
  width: auto !important;
  margin: 1px !important;
  height: 100%;
  overflow-y: scroll;
  flex-grow: 4;
  min-width: 80vw;
}
@media screen and (max-width: 1600px) {
  .main-wrapper {
    width: 100%;
  }
}

.top-left-responsive {
  display: none;
  position: sticky;
  width: 3rem;
  height: 3rem;
  font-size: 2rem !important;
  border: 1px dashed;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1600px) {
  .top-left-responsive {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 800px) {
  .sidebar-layout .aside-wrapper {
    width: 100%;
  }
  .sidebar-layout .main-wrapper {
    width: 100%;
  }
}
@media print {
  .sidebar-layout {
    height: 100%;
    color: #000;
  }
  .sidebar-layout .main-wrapper {
    width: 100%;
    height: 100%;
  }
  main {
    width: 100%;
  }
}
html {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

body {
  font-family: "Fira Code", "Consolas", "Courier New", monospace;
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

hr {
  border-top: 1px dashed var(--color-border);
  border-bottom: none;
}

footer {
  height: 5vh;
  text-align: center;
  padding: 3px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px dashed;
  margin-top: 10px;
}

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

::-webkit-scrollbar-track {
  background-color: --color-scrollbar-track;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
}

* {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
  scrollbar-width: thin;
}

iframe {
  border: 1px dashed var(--color-border);
}

code {
  background-color: var(--color-fe);
  color: var(--color-bg);
}

article, section {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
article h1, section h1 {
  text-align: left;
}
article p, section p {
  text-align: left;
}
article *, section * {
  width: 100%;
}

@media print {
  article, section {
    margin-top: 0;
    padding: 1pt;
  }
}
.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
}

.sticky-top {
  position: sticky;
  top: 0;
  background-color: var(--color-bg);
}

table {
  border-collapse: collapse;
  width: auto;
  width: max-content;
}

thead {
  background-color: var(--head-color-bg);
  color: var(--head-color-fe);
  margin: 0 auto;
}

td, th {
  padding: 6px 12px;
  width: max-content;
}

tfoot td, tfoot th {
  border: 1px dashed var(--color-border);
}

@media print {
  table {
    border-collapse: separate;
    border: 0px solid #000000;
    border-spacing: 0;
    font-size: 11pt;
    width: 100%;
    border-color: #000000;
    border-right: 1px solid;
  }
  tr {
    border-color: #000000;
    border-style: none;
    border-width: 0;
  }
  td {
    border-color: #000000;
    border-left: 1px solid;
    border-bottom: 1px solid;
  }
  th {
    border-color: #000000;
    border-left: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
}
.main-nav {
  display: flex;
  justify-content: center;
  border: 1px dashed var(--color-border);
  background-color: var(--color-bg);
  flex-wrap: nowrap;
}
.main-nav a {
  padding: 15px;
  text-align: center;
  flex-grow: 1;
}
@media screen and (max-width: 640px) {
  .main-nav a {
    font-size: 0.9rem;
  }
}
.main-nav a:hover {
  background-color: var(--color-hover-bg);
  color: var(--color-hover-fe);
}
.main-nav a.active {
  background-color: var(--color-fe);
  color: var(--color-bg);
}
@media screen and (max-width: 640px) {
  .main-nav {
    justify-content: space-evenly;
  }
}

.nav-wrapper {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  border: 1px dashed var(--color-border);
  background-color: var(--color-bg);
  align-items: stretch;
}
.nav-wrapper .main-nav {
  border: none !important;
  outline: none !important;
  flex-grow: 3;
  height: 100%;
}
.nav-wrapper .lead {
  align-self: flex-start;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 2rem;
}
.nav-wrapper .lead * {
  padding-top: 15px;
  padding-bottom: 15px;
  margin: auto;
  flex-grow: 1;
  text-align: center;
}
.nav-wrapper button {
  font-weight: bold;
}
@media print {
  .nav-wrapper {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .main-nav {
    overflow-x: scroll;
  }
  .main-nav * {
    padding: 3px;
  }
}
button {
  background-color: var(--color-button-bg);
  color: var(--color-button-fe);
  text-align: center;
  text-decoration: none;
  border: none;
  curson: pointer;
  width: auto;
}
button::before {
  content: "[";
}
button::after {
  content: "]";
}
button::hover {
  background-color: var(--color-hover-bg);
  color: var(--color-hover-fe);
}

a.button {
  background-color: var(--color-button-bg);
  color: var(--color-button-fe);
  text-align: center;
  text-decoration: none;
  border: none;
  curson: pointer;
  width: auto;
}
a.button::before {
  content: "[";
}
a.button::after {
  content: "]";
}
a.button::hover {
  background-color: var(--color-hover-bg);
  color: var(--color-hover-fe);
}
a.button {
  text-decoration: none;
}

.button-expand {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.button-toggle[data-element-hidden=true]::after {
  content: ">" !important;
}
.button-toggle::after {
  content: "<";
}
.button-toggle::before {
  content: "";
}
@media screen and (max-width: 1020px) {
  .button-toggle[data-element-hidden=true]::after {
    content: "-" !important;
  }
  .button-toggle::after {
    content: "+";
  }
}

.button-close {
  width: 2em;
  height: 2em;
  font-size: 2em;
  z-index: 9999999;
  float: right;
  margin-left: calc(100% - 2em);
  padding: 1px;
}
.button-close::after {
  content: "X]";
}
.button-close::before {
  content: "[";
}

.treemenu, .tree {
  list-style: none;
}
.treemenu ul, .tree ul {
  list-style: none;
  padding-left: 20px;
}
.treemenu li, .tree li {
  position: relative;
  padding-left: 10px;
}
.treemenu li::before, .tree li::before {
  content: "├─";
  position: absolute;
  left: -20px;
}
.treemenu li:has(> ul), .tree li:has(> ul) {
  padding-left: 20px;
}
.treemenu li:has(> ul)::before, .tree li:has(> ul)::before {
  content: "└─[-]";
}
.treemenu li:has(> ul)[data-visible=false] ul, .tree li:has(> ul)[data-visible=false] ul {
  display: none;
}
.treemenu li:has(> ul)[data-visible=false]::before, .tree li:has(> ul)[data-visible=false]::before {
  content: "├─[+]";
}
.treemenu li:last-child::before, .tree li:last-child::before {
  content: "└─";
}
.treemenu li:last-child:has(> ul)::before, .tree li:last-child:has(> ul)::before {
  content: "└─[-]";
}
.treemenu li:last-child:has(> ul)[data-visible=false]::before, .tree li:last-child:has(> ul)[data-visible=false]::before {
  content: "└─[+]";
}
.treemenu li a, .treemenu li button, .tree li a, .tree li button {
  text-decoration: none;
  font-weight: bold;
  margin: 0.1 rem;
  text-align: center;
  width: auto;
}
.treemenu li a::before, .treemenu li button::before, .tree li a::before, .tree li button::before {
  content: "";
}
.treemenu li a::after, .treemenu li button::after, .tree li a::after, .tree li button::after {
  content: "";
}
.treemenu li a:hover, .treemenu li button:hover, .tree li a:hover, .tree li button:hover {
  background-color: var(--color-fe);
  color: var(--color-bg);
}

.tree span {
  padding-left: 5px;
}

.alert {
  font-size: 1.2rem;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0.5rem;
  border: 1px dashed var(--color-border);
}
.alert-info .icon::after {
  font-size: 2rem;
  font-style: bold;
  width: 15px;
  height: 15px;
  padding: 3px;
  border-right: 1px solid var(--color-border);
  content: "i";
}
.alert-notice .icon::after {
  font-size: 2rem;
  font-style: bold;
  width: 15px;
  height: 15px;
  padding: 3px;
  border-right: 1px solid var(--color-border);
  content: "!";
}
.alert-stop .icon::after {
  font-size: 2rem;
  font-style: bold;
  width: 15px;
  height: 15px;
  padding: 3px;
  border-right: 1px solid var(--color-border);
  content: "X";
}
.alert-warning {
  text-align: center;
}
.alert-danger {
  text-align: center;
  animation: blink 0.3s steps(1) infinite;
}
.alert-danger2 {
  text-align: center;
  animation: blinkSwap 0.3s steps(1) infinite;
}

@keyframes blinkSwap {
  0%, 49% {
    background-color: var(--color-bg);
    color: var(--color-fe);
  }
  50%, 100% {
    background-color: var(--color-fe);
    color: var(--color-bg);
  }
}
@keyframes blink {
  0%, 49% {
    color: var(--color-fe);
  }
  50%, 100% {
    color: var(--color-bg);
  }
}
.tab-button-container {
  display: flex;
}
.tab-button-container button[aria-selected=true]::before {
  content: ">";
}
.tab-button-container button[aria-selected=true]::after {
  content: "<";
}
.tab-button-container button:hover::before {
  content: "[>";
}
.tab-button-container button:hover::after {
  content: "<]";
}

.code-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--color-fe);
}
.code-wrapper div {
  font-size: 1.2rem;
  height: 1.4rem;
  background-color: var(--color-fe);
  color: var(--color-bg) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code-wrapper div button::before {
  text-transform: capitalize;
}
.code-wrapper div .copy, .code-wrapper div .button {
  /* Reset defaults */
  appearance: none;
  background: transparent;
  border: none;
  margin: 0;
  /* Ensure typography matches */
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4rem;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  order: 99;
  flex-shrink: 4;
  font-weight: normal;
  width: 7%;
}
.code-wrapper div button, .code-wrapper div a {
  cursor: pointer;
}
.code-wrapper div .tab-button-container {
  display: flex;
  flex-shrink: 10;
  gap: 5px;
  align-items: center;
}
.code-wrapper div .tab-button-container button {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 4px;
  transition: all 0.2s;
  display: inline-flex;
  justify-content: center;
  min-width: 40px;
}
.code-wrapper div h5 {
  flex-grow: 3;
  padding-right: 3px;
  padding-left: 3px;
}
.code-wrapper code {
  margin-left: 20px;
  font-size: 1.1rem;
  background-color: var(--color-bg) !important;
  color: var(--color-fe) !important;
}
.code-wrapper pre {
  width: 100%;
  padding: 3px;
  max-height: 1000px;
  overflow-y: scroll;
}