.c-slite-ui-button____main {
  border: var(--border-s);
}

.c-slite-ui-comp____options {
  cursor: pointer;
}

.c-slite-ui-comp____option_meta {
  margin: var(--margin-s);
  color: blue;
}

.c-slite-ui-comp____option_up {
  margin: var(--margin-s);
  color: orange;
}

.c-slite-ui-comp____option_down {
  margin: var(--margin-s);
  color: orange;
}

.c-slite-ui-comp____option_remove {
  margin: var(--margin-s);
  color: red;
}

.c-slite-ui-comp____options_collapsable {
  right: var(--margin-xl);
  border: var(--border-s);
  padding: var(--padding);
  background-color: var(--background-color);
}

.c-slite-ui-form____main {
  border: 1px solid rgba(128, 128, 128, 0.5);
}

.c-slite-ui-form____cell {
  padding: var(--padding);
}

.c-slite-ui-form____label {
  font-weight: bold;
  padding: var(--padding);
}

.c-slite-ui-list____main {
  border: 1px solid rgba(128, 128, 128, 0.5);
}

.c-slite-ui-list____add {
  cursor: pointer;
}

.c-slite-ui-meta____sub {
  padding: var(--padding);
}

.c-slite-ui-meta____heading {
  font-size: var(--font-size-l);
}

.c-slite-ui-select____selected, .c-slite-ui-select____option {
  padding: var(--padding-s);
}

.c-slite-ui-select____options {
  background-color: var(--background-color);
  border: var(--border-s);
}

@font-face {
  font-family: UbuntuLight;
  src: url(a_lib.php?file=font/ubuntu/Ubuntu-Light.ttf);
}
@font-face {
  font-family: UbuntuLightItalic;
  src: url(a_lib.php?file=font/ubuntu/Ubuntu-LightItalic.ttf);
}
@font-face {
  font-family: UbuntuMedium;
  src: url(a_lib.php?file=font/ubuntu/Ubuntu-Medium.ttf);
}
@font-face {
  font-family: UbuntuMediumItalic;
  src: url(a_lib.php?file=font/ubuntu/Ubuntu-MediumItalic.ttf);
}
@font-face {
  font-family: UbuntuBold;
  src: url(a_lib.php?file=font/ubuntu/Ubuntu-Bold.ttf);
}
@font-face {
  font-family: UbuntuBoldItalic;
  src: url(a_lib.php?file=font/ubuntu/Ubuntu-BoldItalic.ttf);
}
@font-face {
  font-family: UbuntuRegularMono;
  src: url(a_lib.php?file=font/ubuntu/UbuntuMono-Regular.ttf);
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  scroll-behavior: smooth;
  border-spacing: 0;
  border-collapse: separate;
}

div {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

a {
  text-decoration: none;
}

b {
  font-family: var(--font-family-bold);
}

body, html {
  font-family: var(--font-family-light);
  font-size: 1vw;
  width: 100%;
  height: 100%;
  color: var(--color-1);
  background-color: var(--background-color-0);
  overflow: auto;
}
@media only screen and (orientation: landscape) and (min-width: 1280px) {
  body, html {
    font-size: 12.8px;
  }
}
@media only screen and (orientation: portrait) {
  body, html {
    font-size: 3.33333vw;
  }
}

#app {
  font-size: var(--font-size);
  width: 100%;
  height: 100%;
}

.input-text, .input-password, .textarea {
  transition-duration: 0.5s;
  padding: var(--padding);
  outline: var(--border-xs);
  background-color: var(--background-color-1);
  border: 0px;
  box-shadow: inset 0px 0px 0rem 0px rgba(0, 0, 0, 0.5);
}

.input-text:focus, .input-password:focus, .textarea:focus {
  outline: var(--border-s);
  box-shadow: var(--box-shadow-inset);
}

.input-button, .button {
  background-color: var(--background-color-button);
  color: var(--color-2);
  border-radius: var(--border-radius-s);
  border: var(--border-s);
  padding: var(--padding-s);
  padding-left: var(--padding-l);
  padding-right: var(--padding-l);
  cursor: pointer;
  transform: translateY(0);
  transition-timing-function: ease-in-out;
  transition-duration: 0.1s;
}

.input-button:active, .button:active {
  transform: translateY(0.25rem);
}

.h1 {
  background-color: var(--background-color-3);
  font-size: 36px;
  font-weight: bold;
  padding: 3px;
  padding-left: 10px;
  white-space: nowrap;
  border-radius: var(--border-radius);
  border: 0px solid var(--color-4);
}

.h2 {
  background-color: var(--background-color-3);
  font-size: 20px;
  font-weight: bold;
  padding: 3px;
  padding-left: 10px;
  white-space: nowrap;
  border-radius: var(--border-radius);
  border: 0px solid var(--color-4);
}

:root {
  --font-family: UbuntuMedium;
  --font-family-normal: UbuntuMedium;
  --font-family-light: UbuntuLight;
  --font-family-bold: UbuntuBold;
  --font-family-normal-italic: UbuntuMediumItalic;
  --font-family-light-italic: UbuntuLightItalic;
  --font-family-bold-italic: UbuntuBoldItalic;
  --color-0: #000000;
  --color-1: #555555;
  --color-2: #BBBBBB;
  --color-3: #FFFFFF;
  --color-4: #999999;
  --color-error: #FF0000;
  --font-size-xs: 0.8rem;
  --font-size-s: 1rem;
  --font-size: 1.5rem;
  --font-size-l: 2rem;
  --font-size-xl: 3rem;
  --background-color: #FFFFFF;
  --background-color-0: var(--background-color);
  --background-color-1: #EEEEEE;
  --background-color-2: #2b2b2b;
  --background-color-button: var(--background-color-2);
  --background-image-logo: url("a_lib.php?file=img/logo/medium_black.png");
  --background-image-logo-invert: url("a_lib.php?file=img/logo/medium_white.png");
  --padding-xs: 0.1rem;
  --padding-s: 0.25rem;
  --padding: 0.5rem;
  --padding-l: 1rem;
  --padding-xl: 2rem;
  --margin-xs: var(--padding-xs);
  --margin-s: var(--padding-s);
  --margin: var(--padding);
  --margin-l: var(--padding-l);
  --margin-xl: var(--padding-xl);
  --border-radius-xs: 0.25rem;
  --border-radius-s: 0.5rem;
  --border-radius: 1rem;
  --border-radius-l: 2rem;
  --border-radius-xl: 4rem;
  --border-xs: 0.5px solid rgba(0,0,0,0.1);
  --border-s: 1px solid rgba(0,0,0,0.2);
  --border: 2px solid rgba(0,0,0,0.2);
  --border-l: 3px solid rgba(0,0,0,0.2);
  --border-xl: 6px solid rgba(0,0,0,0.2);
  --outline-xs: var(--border-xs);
  --outline-s: var(--border-s);
  --outline: var(--border);
  --outline-l: var(--boder-l);
  --outline-xl: var(--boder-xl);
  --grid-gap-xs: 0.5rem;
  --grid-gap-s: 0.5rem;
  --grid-gap: 1rem;
  --grid-gap-l: 2rem;
  --grid-gap-xl: 2rem;
  --box-shadow: 0.3rem 0.3rem 0.5rem 0 rgba(0,0,0,0.3);
  --box-shadow-l: 0.6rem 0.6rem 1rem 0 rgba(0,0,0,0.3);
  --box-shadow-inset: inset 0px 0px 0.5rem 0px rgba(0,0,0,0.25);
  --opacity-icon: 0.75;
}