Screen {
    scrollbar-size: 2 2;
    scrollbar-color: #b9b9b9;
    background: $background;
}

/* HEADER */
.header {
    background: $panel;
    content-align: center middle;
    text-style: bold;
    color: #ebccd1;
}

/* GENERAL */
.title {
    content-align: center middle;
    width: 100%;
    min-height: 1;
    text-style: bold;
    background: $background;
    border: hkey #2d4156;
}

/* Homepage */

#homepage-vertical {
    width: 100%;
    height: auto;
    align: center middle;
}

.homepage-options-bar {
    border: blank;
    width: 60%;
    height: auto;
    align: center middle;
}

.homepage-options-bar > Static{
    margin-top: 1;
    content-align: center middle;
    min-height: 1;
    text-style: bold;
    background: $panel;
    border: hkey seagreen;
}

.homepage-commands-bar{
    border: blank;
    width: 60%;
    height: auto;
    align: center middle;
}

.homepage-commands-bar > Static{
    content-align: center middle;
    min-height: 1;
    text-style: bold;
    background: $panel;
    border: hkey red;
}

.homepage-horizontal {
    layout: horizontal;
    border: #1d2e38;
    width: 60%;
    height: auto;
}

.homepage-horizontal > .name{
    content-align: center middle;
    text-style: bold;
    width: 15%;
    border: blank;
}

.homepage-horizontal > .type{
    content-align: center middle;
    text-style: bold;
    width: 10%;
    border: blank;
}

.homepage-horizontal > .description{
    content-align: center middle;
    text-style: bold;
    width: 42%;
    border: blank;
}

.homepage-horizontal > .description-bool{
    content-align: center middle;
    text-style: bold;
    width: 53%;
    border: blank;
}

.homepage-horizontal > .checkbox{
    content-align: center middle;
    width: auto;
}

.homepage-horizontal > .input{
    width: 20%;
}

.homepage-command {
    border: #1d2e38;
    width: 60%;
    height: auto;
    align: center middle;
}

.homepage-command > Static{
    height: auto;
    content-align: center middle;
    border: blank;
    width: 70%;
}

.homepage-command > Button{
    border: tall #1d2e38;
    width: auto;
    background: $primary-background-darken-2;
    margin-right: 2;
}

.homepage-command > Button:hover {
    background: #2d4156;
}

/* Commands */

#command-vertical {
    layout: vertical;
    overflow: auto auto;
    height: auto;
    align: center middle;
}

.command-options-bar {
    border: blank;
    width: 80%;
    height: auto;
    align: center middle;
}

.command-options-bar > .command-arguments {
    margin-top: 1;
    margin-bottom: 1;
    content-align: center middle;
    min-height: 1;
    text-style: bold;
    background: $panel;
    border: hkey green;
}

.command-options-bar > .command-options {
    margin-top: 1;
    margin-bottom: 1;
    content-align: center middle;
    min-height: 1;
    text-style: bold;
    background: $panel;
    border: hkey red;
}

.command-horizontal {
    layout: horizontal;
    border: #1d2e38;
    width: 80%;
    height: auto;
}

.command-horizontal > Checkbox {
    height: auto;
    width: auto;
}

.command-horizontal > Checkbox:hover {
    background: #2d4156;
}

.command-horizontal > .description {
    border: blank;
    width: 40%;
}

.command-horizontal > .type {
    border: blank;
    width: 10%;
}

.command-horizontal > .name {
    border: blank;
    width: 15%;
}

.command-horizontal > .input {
    width: 10%;
}

.command-horizontal > .buttons {
    margin-left: 2;
    margin-right: 1;
    min-width: 5;
    background: $primary-background-darken-2;
}

.command-horizontal > .buttons:hover {
    background: #2d4156;
}

.command-horizontal-run {
    width: 80%;
    height: auto;
    align: center middle;
    margin-top: 1;
    margin-bottom: 1;
}

.empty {
    align: center middle;
    height: 1fr;
    width: 100%;
    border: #ec971f;
}

.empty > Horizontal > #description{
    border: blank;
    width: auto;
}

.empty >Horizontal{
    width: 100%;
    border: blank;
    height: auto;
    align: center middle;
}

.empty > Horizontal > Static{
    content-align: center middle;
    width: auto;
}

.run{
    border: tall #1d2e38;
    width: auto;
    background: $primary-background-darken-2;
    margin-right: 2
}

.run:hover {
    background: #2d4156;
}

/* SHOW */

#show-container {
    layout: vertical;
    overflow: auto auto;
    border: double #ec971f;
    align: center middle;
}

#show-container > #loading{
    content-align: center middle;
    width: 100%;
    height: auto;
}

.output {
    width: auto;
    height: auto;
    content-align: center middle;
}

