html {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  height: 100%;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  max-width: 90rem;
}
#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
#wrapper {
  position: absolute;
  top: 0;
  bottom: 3rem;
  width: 100%;
  padding: 0;
  margin: 0;
}
nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  margin-right: 0.5rem;
}
header {
  position: absolute;
  top: 0;
  height: 3rem;
  left: 0;
  right: 0;
  padding-left: 2.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #132339;
}
footer {
  position: absolute;
  bottom: 0;
  height: 3rem;
  left: 0;
  right: 0;
  background-color: #132339;
}
#shnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.75rem;
  width: auto;
}
#menuicon {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  z-index: 2000;
}
#shicon {
  position: absolute;
  right: 0;
  height: 2.75rem;
  width: 2.75rem;
  padding: 0.5rem;
  z-index: 2000;
}
#fileInput,
#hiddeninput {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
#linkslist {
  width: auto;
  right: 0.5rem;
  left: auto;
}
.icon img {
  height: 1.5rem;
  vertical-align: middle;
}
.icon svg {
  height: 1.5rem;
  width: 1.5rem;
  vertical-align: bottom;
}
.shownumbers .editor > div::before {
  min-width: 3em;
}
h1 {
  height: 3rem;
  margin: 0;
  display: flex;
  align-items: center;
}
nav ul {
  position: absolute;
  left: 0;
  top: 2.75rem;
  width: 16rem;
  bottom: 0;
  z-index: 2000;
  padding: 0;
  margin: 0;
}
nav li {
  width: 100%;
  padding: 0;
  margin: 0;
}
nav a,
nav button {
  width: 100%;
  padding: 1rem;
  margin: 0;
}
button {
  padding: 0;
  margin: 0;
}
nav button img {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
}
html.menubar nav.hidden {
  width: 100%;
  height: 1.95rem;
}
nav.hidden ul {
  width: 100%;
  height: 3rem;
}
html.mobilekeypad nav.hidden ul {
  height: 2.15rem;
}
html.menubar nav.hidden button,
nav.hidden a {
  padding: 0.1rem 0.5rem;
  width: auto;
}
html.menubar nav.hidden li {
  width: auto;
}
nav.hidden #linkslist li {
  width: auto;
}
html.menubar h1 {
  padding-left: 2.5rem;
}
#editor {
  top: 4.8rem;
}
#editor div:first-child {
  padding-top: 20px;
}
#desktop {
  top: 5.2rem;
}
html.nomenubar #editor {
  top: 4.2rem;
}
html.nomenubar #desktop {
  top: 3.2rem;
}
#shlist {
  top: 0;
  right: 3rem;
  height: 2.75rem;
  left: initial;
  width: initial;
}
#shlist a,
#shlist button {
  padding: 0.45rem;
  width: auto;
}
#shlist li {
  width: auto;
}
#add {
  position: absolute;
  left: 0;
  top: 6.05rem;
  right: 0;
  padding: 0.35rem;
  height: 1.25rem;
  z-index: 220;
}
#add div {
  padding-bottom: 0.7rem;
}
.close {
  position: absolute;
  right: 0.5em;
  top: 0;
}
#menulist label {
  padding: 1rem;
}
.hidden #menulist {
  width: auto;
  right: 21rem;
  height: 1.95rem;
  padding-top: 0;
  padding-right: 0.3rem;
  padding-bottom: 0;
}
.hidden #menulist label {
  padding: 0;
  position: absolute;
  width: auto;
  top: 0;
  right: -21rem;
  width: 20.5rem;
  left: initial;
  height: 1.75rem;
  padding-top: 0.2rem;
  padding-right: 0.5rem;
}
.hidden #menulist label span {
  position: absolute;
  left: 0.5rem;
  top: 0.18rem;
  white-space: nowrap;
}
nav.links {
  position: initial;
}
.links > #linkslist {
  position: absolute;
  top: initial;
  bottom: 0;
  right: 0;
  width: 21rem;
  z-index: 2;
}
html.mobilekeypad .links > #linkslist {
  width: 100%;
}
nav.links div {
  position: absolute;
  top: auto;
  bottom: 3.5rem;
  right: 0;
  width: 21rem;
  z-index: 2;
}
.keyboardbg {
  position: absolute;
  top: 4.7rem;
  bottom: 0;
  right: 0;
  width: 21rem;
  z-index: 1;
}
html.nomenubar .keyboardbg {
  top: 2.75rem;
}
html.mobilekeypad .keyboardbg {
  top: initial;
  width: initial;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8rem;
}
#menulist label input {
  width: 13rem;
}
#statusbar {
  height: calc(2.4rem - 2px);
  position: absolute;
  left: 0;
  bottom: 0;
  right: 21rem;
  z-index: 100;
  padding: 0.1rem 0.5rem 0.1rem 2.5rem;
}
html.mobilekeypad #statusbar {
  padding-left: 0.5rem;
}
#editor {
  position: absolute;
  left: 2.5rem;
  bottom: 2.6rem;
  right: 21rem;
  z-index: 100;
}
#statusbar.hidden ~ .editor {
  bottom: 0;
}
.keyboard {
  position: absolute;
  z-index: 12;
}
.schoettler {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2999;
}
.schoettler ~ #wrapper {
  bottom: 6rem;
}
.mobilekeypad .schoettler ~ #wrapper,
.schoettler.agreed ~ #wrapper {
  bottom: 3rem;
}
.schoettler span {
  padding: 0.4rem;
}
.schoettler span span {
  padding: 0 0.2rem;
  margin: 0;
  display: inline-block;
}
.website .logo {
  position: absolute;
  top: 0;
  left: 0;
}
#desktop {
  width: 20rem;
  right: 0.5rem;
  bottom: 5rem;
  max-height: 20rem;
}
.schoettler ~ #desktop {
  bottom: 14.4rem;
}
.schoettler.agreed ~ #desktop {
  bottom: 6.6rem;
}
#mobile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  height: 6rem;
}
#savedialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}
#savedialog > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3001;
  padding: 1.2rem;
  padding-bottom: 2.4rem;
}
#savedialog a,
#savedialog span {
  padding: 0.6rem;
  margin: 0.6rem;
}
#savedialog ul {
  padding-bottom: 1.2rem;
}
.dialog.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}
.dialog.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3001;
  padding: 1rem;
}
.dialog.content {
  padding-bottom: 1.8rem;
  margin: 0.6rem;
}
.dialog .no,
.dialog .yes {
  padding: 0.6rem;
  margin: 0 0.6rem;
  display: inline-block;
}
.hidden ~ #status_text {
  padding-top: 0.55rem;
}
.keyboard button,
.keyboard input {
  position: absolute;
}
html.mobilekeypad #editor {
  top: 3.25rem;
  left: 0.5rem;
  right: 0;
}
html.mobilekeypad #statusbar {
  left: 0;
  right: 0;
  bottom: 8rem;
}
html.mobilekeypad #statusbar ~ .editor {
  bottom: 10.6rem;
}
html.mobilekeypad #statusbar.hidden ~ .editor {
  bottom: 8rem;
}
html.mobilekeypad .schoettler {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11.5rem;
  height: auto;
  width: auto;
  z-index: 3000;
}
html.mobilekeypad .schoettler.agreed {
  display: none;
}
html.mobilekeypad .schoettler > span {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  height: auto;
  z-index: 401;
}
@media print {
  #wrapper,
  #wrapper > #editor,
  body,
  html {
    position: initial !important;
    top: initial !important;
    width: initial !important;
    height: initial !important;
    left: initial !important;
    right: initial !important;
    bottom: initial !important;
  }
  #wrapper > #editor {
    width: 100% !important;
    padding: 1rem !important;
  }
  #wrapper.showlines > #editor > div {
    border-bottom: 1px solid #ccc !important;
  }
}
html.loading div {
  cursor: progress;
}
div {
  cursor: default;
}
.editor,
.editor div {
  cursor: text;
}
.editor {
  counter-reset: linenum;
}
.shownumbers .editor > div::before {
  counter-increment: linenum;
  content: counter(linenum);
  display: inline-block;
}
h1,
nav * {
  text-decoration: none;
  list-style-type: none;
}
html.nomenubar nav #menulist a {
  width: calc(100% - 2rem);
  display: inline-block;
}
nav ul {
  display: block;
}
nav a,
nav button {
  text-align: left;
}
.hidden {
  display: none;
}
html.mobilekeypad nav.links div {
  display: none;
}
#add {
  display: none;
}
html.menubar #shlist {
  right: 0;
}
html.menubar #add {
  display: block;
}
html.menubar #add.hidden {
  display: none;
}
html.menubar nav.hidden {
  display: block;
}
html.menubar nav.hidden .description {
  display: none;
}
#linkslist .description {
  display: none;
}
html.menubar nav.hidden a,
html.menubar nav.hidden button {
  display: inline-block;
}
nav.hidden #linkslist a,
nav.hidden #linkslist button {
  display: inline-block;
}
html.menubar nav.hidden li {
  display: inline-block;
}
nav.hidden #linkslist li {
  display: inline-block;
}
html.menubar nav.hidden li.hidden {
  opacity: 0.5;
}
html.menubar #menuicon {
  display: none;
}
html.menubar #linkslist {
  display: block;
}
.lines_on {
  display: inline;
}
.lines_off {
  display: none;
}
.showlines .lines_on {
  display: none;
}
.showlines .lines_off {
  display: inline;
}
.hidden #shlist {
  display: block;
}
html.nomenubar nav.links.hidden {
  display: block;
}
#shicon {
  display: none;
}
#shlist.hidden {
  display: block;
}
#shlist .description {
  display: none;
}
#shlist a,
#shlist button {
  display: inline-block;
}
#shlist li {
  display: inline-block;
}
#add {
  overflow: hidden;
}
.close {
  cursor: default;
}
#menulist label {
  display: inline-block;
}
.hidden #menulist {
  text-align: right;
  overflow: initial;
}
.hidden #menulist label {
  display: inline-block;
  text-align: right;
}
.links > #linkslist {
  text-align: center;
}
nav.links div {
  text-align: center;
}
#menulist label input {
  text-align: right;
}
#statusbar {
  overflow: auto;
}
#editor:focus {
  outline: 0;
}
#editor {
  overflow: auto;
}
#editor span ~ span {
  white-space: pre-wrap;
}
.schoettler div {
  text-align: center;
}
.schoettler span {
  display: block;
}
.schoettler span.hidden {
  display: none;
}
.schoettler span span {
  display: inline;
  cursor: pointer;
  white-space: nowrap;
}
#mobile {
  display: none;
}
#savedialog a,
#savedialog span {
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.dialog .no,
.dialog .yes {
  text-decoration: none;
  cursor: pointer;
}
html.mobilekeypad #desktop {
  display: none;
}
html.mobilekeypad #mobile {
  display: block;
}
html.mobilekeypad .schoettler img {
  display: none;
}
html.mobilekeypad .schoettler > br {
  display: none;
}
@media print {
  #wrapper > *,
  footer,
  header {
    display: none !important;
  }
  #wrapper,
  #wrapper > #editor,
  body,
  html {
    display: initial !important;
    overflow: initial !important;
  }
  #wrapper > #editor {
    display: block !important;
  }
  #editor div {
    page-break-inside: avoid;
  }
}
h1,
nav * {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  padding: 0 0 0 2.5rem;
}
footer * {
  font-family: sans-serif;
  text-decoration: none;
}
footer a {
  margin-right: 2rem;
}
footer .icon svg {
  vertical-align: middle;
}
nav span {
  background: 0 0;
}
h1 {
  font-size: 2.8vw;
}
html.maxheadline h1 {
  font-size: 1.25rem;
}
nav ul {
  border: 0;
}
nav li {
  border: 0;
}
nav a,
nav button {
  border: 0;
}
button {
  border: 0;
}
nav button img {
  border: 0;
}
#shlist li.hidden {
  opacity: 0.5;
}
.keyboard button {
  border-style: solid;
  border-width: 0.25rem;
  border-radius: 0.5rem;
  background-clip: padding-box;
}
html.shrinkkeys #desktop.keyboard button {
  border-top-width: 7%;
  border-bottom-width: 7%;
  border-top-width: calc(1.025vh - 0.18rem);
  border-bottom-width: calc(1.025vh - 0.18rem);
}
#add * {
  font-family: sans-serif;
}
.hidden #menulist {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.hidden #menulist label {
  border-bottom: 1px solid #b2cfe4;
}
.hidden #menulist label * {
  border: none;
  font-size: 1.25rem;
}
nav.links div {
  background: 0 0;
  font-size: 1rem;
}
.links > #linkslist,
.links > #linkslist * {
  background: 0 0;
}
.links > #linkslist li.hidden:hover * {
  background: 0 0;
}
#menulist label ~ label {
  font-family: sans-serif;
}
#menulist label input {
  background: 0 0;
  border: 1px solid #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.2rem;
  font-family: sans-serif;
  font-size: 1.2rem;
}
#statusbar {
  font-family: sans-serif;
  border-right: 1px solid #d9e2ea;
  border-top: 2px solid #c4c8ca;
}
.showlines #editor {
  background-image: url(img/bg.png);
}
#editor {
  background-size: 64px 19px;
  background-attachment: local;
}
.editor,
.editor * {
  font-size: 1.2rem;
  font-family: Consolas, monospace;
}
html.mobilekeypad .editor,
html.mobilekeypad .editor * {
  font-size: 1.8rem;
  font-family: Consolas, monospace;
}
html.mobilekeypad .editor span.div {
  background-size: 1.875rem 1.875rem;
}
.schoettler,
.schoettler * {
  font-family: sans-serif;
  text-align: center;
}
.schoettler img:hover {
  background: 0 0;
}
.schoettler span {
  font-family: sans-serif;
  border-radius: 0.2rem;
  border: 1px solid #e0aa0f;
}
#savedialog,
.dialog.background {
  opacity: 0.8;
}
#savedialog > div,
.dialog.popup {
  font-family: sans-serif;
  border-radius: 0.3rem;
  width: 85%;
  max-width: 30rem;
}
#savedialog a,
#savedialog span,
.dialog .no,
.dialog .yes {
  font-family: sans-serif;
  border-radius: 0.12rem;
}
html.shrinkkeys #desktop.keyboard button {
  font-size: calc(6.15vh - 1.08rem);
}
.keyboard button {
  font-size: 1.5rem;
}
.keyboard .m_number {
  font-size: 45%;
}
.keyboard .m_function {
  font-size: 80%;
}
.text {
  font-family: sans-serif;
  font-size: 0.95em;
}
.comment {
  font-family: sans-serif;
  font-size: 0.95em;
}
.editor span.div {
  color: transparent;
  background-image: url(img/line.png);
  background-size: 1.25rem 1.25rem;
}
html.mobilekeypad .schoettler {
  font-size: 1.4rem;
}
html.mobilekeypad .keyboard input {
  font-size: 1.5rem;
}
@media print {
  #wrapper,
  #wrapper > #editor,
  body,
  html {
    background: 0 0 !important;
  }
}
#add *,
#menulist label,
#menulist label input,
#savedialog a,
#savedialog span,
.dialog .no,
.dialog .yes,
.keyboard .ac,
.keyboard .system,
footer,
footer *,
h1,
nav * {
  color: #fff;
}
footer,
footer *,
html.nomenubar .icon svg {
  fill: #fff;
}
#savedialog > div,
#wrapper,
.dialog.popup {
  background-color: #fff;
}
#menulist label input {
  border-color: rgba(255, 255, 255, 0.5);
}
#savedialog > div,
.dialog.popup,
.ptext,
.schoettler span {
  color: #000;
}
#savedialog,
.dialog.background {
  background: #000;
}
.editor span {
  caret-color: #000;
}
#add,
button,
footer,
footer *,
header,
nav button img,
nav ul {
  background-color: #132339;
}
.schoettler,
.schoettler * {
  color: #083562;
}
#shlist,
h1,
html.nomenubar nav button,
html.nomenubar nav ul,
nav * {
  background-color: #132339;
}
#statusbar,
.hidden #menulist * {
  color: #083562;
}
.icon svg {
  fill: #083562;
}
.keyboard .system {
  background-color: #6c849e;
}
.links > #linkslist,
.links > #linkslist *,
nav.links div {
  color: #6c849e;
}
.links > #linkslist svg {
  fill: #6c849e;
}
.hidden #menulist li:hover label,
.hidden #menulist li:hover label * {
  background-color: #d5dde5;
}
#statusbar,
.hidden #menulist label,
.hidden #menulist label *,
.hidden #menulist li:hover *,
.keyboard .function,
.keyboard .operator,
.links > #linkslist li:hover * {
  background-color: #c5cfd8;
}
#shlist * {
  color: #c5cfd8;
}
#shlist svg {
  fill: #c5cfd8;
}
.hidden #menulist,
.hidden #menulist *,
.hidden #menulist li.hidden:hover *,
.keyboardbg,
.schoettler span span {
  background-color: #e6ecf2;
}
.keyboard button {
  border-color: #e6ecf2;
}
button:hover,
img:hover {
  background-color: #233349;
}
.keyboard .number,
.keyboard button {
  background-color: #fbfdfc;
}
.keyboard button {
  color: #1d4067;
}
.keyboard button:hover {
  background-color: #89a7c6;
}
.keyboard .ac {
  background-color: #bc622d;
}
body {
  background-color: #f8f9fc;
}
#wrapper.showlines {
  background-color: #fafaf8;
}
.hidden #menulist {
  border-bottom-color: #cce2ef;
}
.hidden #menulist label,
.hidden #menulist label * {
  color: #0d182b;
}
.hidden #menulist label {
  border-bottom-color: #b2cfe4;
}
#statusbar {
  border-right-color: #d9e2ea;
}
#statusbar {
  border-top-color: #c4c8ca;
}
#lines_warning {
  color: #d90;
}
#lines_warning.error {
  color: rgba(204, 51, 51);
}
.error {
  color: rgba(204, 51, 51);
}
.schoettler span {
  background: #e0aa0f;
}
.schoettler span {
  border-color: #e0aa0f;
}
#savedialog a,
#savedialog span,
.dialog .no,
.dialog .ok,
.dialog .yes {
  background: #6c849e;
}
.dialog .no,
.dialog .ok,
.dialog .yes {
  margin-bottom: 1rem;
  border-radius: 8px;
}
.style_number {
  color: #007000;
}
.text {
  color: #1d4067;
}
.editor div[title] span {
  background-color: rgba(204, 51, 51, 0.1);
}
.comment {
  color: #6c849e;
}
.positive {
  color: #1d4067;
}
.negative {
  color: #e54433;
}
.var {
  color: #a0780b;
}
.func {
  color: #0f0;
}
.hint {
  color: #6c849e;
}
.offset {
  color: #6c849e;
}
/* mobile: full keypad docked at the bottom instead of the 2-row #mobile pad */
html.mobilekeypad {
  --kp: 45vh;
}
html.mobilekeypad .keyboardbg {
  height: calc(var(--kp) + 2rem);
}
html.mobilekeypad #desktop {
  display: block;
  top: auto;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 2rem;
  width: auto;
  height: var(--kp);
  max-height: none !important;
}
html.mobilekeypad #mobile {
  display: none;
}
html.mobilekeypad #statusbar {
  bottom: calc(var(--kp) + 2rem);
}
html.mobilekeypad #statusbar ~ .editor {
  bottom: calc(var(--kp) + 4.6rem);
}
html.mobilekeypad #statusbar.hidden ~ .editor {
  bottom: calc(var(--kp) + 2rem);
}
html.mobilekeypad .schoettler {
  bottom: calc(var(--kp) + 5.5rem);
}
/* mobile: no branding or app links, title bar becomes a toolbar */
#mtools {
  display: none;
}
html.mobilekeypad #mtools {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  z-index: 2001;
}
html.mobilekeypad #mtools button {
  height: 2.2rem;
  padding: 0 0.8rem;
  border-radius: 0.3rem;
  background-color: #6c849e;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.1rem;
}
html.mobilekeypad header,
html.mobilekeypad footer,
html.mobilekeypad nav.links,
html.mobilekeypad h1 > * {
  display: none;
}
html.mobilekeypad h1 {
  font-size: 0;
}
html.mobilekeypad #wrapper,
html.mobilekeypad .schoettler ~ #wrapper {
  bottom: 0;
}
html.mobilekeypad .keyboardbg {
  height: calc(var(--kp) + 0.5rem);
}
html.mobilekeypad #desktop {
  bottom: 0.25rem;
}
html.mobilekeypad #statusbar {
  bottom: calc(var(--kp) + 0.5rem);
}
html.mobilekeypad #statusbar ~ .editor {
  bottom: calc(var(--kp) + 3.1rem);
}
html.mobilekeypad #statusbar.hidden ~ .editor {
  bottom: calc(var(--kp) + 0.5rem);
}
html.mobilekeypad .schoettler {
  bottom: calc(var(--kp) + 4rem);
}
html.mobilekeypad.nokeypad {
  --kp: 0px;
}
html.mobilekeypad.nokeypad #desktop,
html.mobilekeypad.nokeypad .keyboardbg {
  display: none;
}