#app-grid {
    layout: grid;
    grid-size: 2 4;  /* two columns, three rows */
    grid-columns: 1fr;
    grid-rows: 16% 37% 37% 10%;
}

#top {
    width: 100%;
    height: 100%;
    background: $panel;
    column-span: 2;
}

#top > Static {
    background: $boost;
    color: auto;
    /*  margin-bottom: 1;
    padding: 1; */
}

#top-left > Static {
    background: $boost;
    color: auto;
    /*  margin-bottom: 1;
    padding: 1; */
}

#top-left {
    height: 100%;
    background: $panel;
    border: dodgerblue;
}

#top-right {
    height: 100%;
    background: $panel;
    border: mediumvioletred;
}

#top-right > Static {
    width: auto;
    height: 100%;
    margin-right: 1;
    background: $boost;
}

/* #bottom-right {
    height: 100%;
    layout: grid;
    grid-size: 3;
    grid-columns: 1fr;
    grid-rows: 1fr;
    grid-gutter: 1;
    background: $panel;
    border: greenyellow;
} */

#bottom-right {
    height: 100%;
    width: 100%;
    background: $panel;
    border: greenyellow;
}

#bottom-right-final {
    column-span: 2;
}

#bottom-right > Static {
    height: 100%;
    background: $boost;
}

#bottom-left{
    height: 100%;
    width: 100%;
    background: $panel;
    border: greenyellow;
}

#bottom-left-final {
    column-span: 2;
}

#bottom-left > Static {
    height: 100%;
    background: $boost;
}




/* #bottom-left {
    height: 100%;
    layout: grid;
    grid-size: 3;
    grid-columns: 1fr;
    grid-rows: 1fr;
    grid-gutter: 1;
    background: $panel;
    border: greenyellow;
}
 */
#bottom-left-final {
    column-span: 2;
}

#bottom-left > Static {
    height: 100%;
    background: $boost;
}

#repl {
    width: 100%;
    height: 100%;
    background: $panel;
    content-align: left bottom;
    column-span: 2;
}

#repl > Static {
    background: $boost;
    color: auto;
    /*  margin-bottom: 1;
    padding: 1; */
}

#repl-result {
    background: $boost;
    color: auto;
    border: yellow;
    /*  margin-bottom: 1;
    padding: 1; */
}

#repl-result2 {
    background: $boost;
    color: auto;
    border: yellow;
    column-span: 2;
    /*  margin-bottom: 1;
    padding: 1; */
}

#repl-input {
    height: 100%;
    background: $boost;
    color: auto;
    border: red;
    content-align: left bottom;
    /*  margin-bottom: 1;
    padding: 1; */
}


#dialog {
    grid-size: 2;
    grid-gutter: 1 2;
    margin: 1 2;
    width: 50%;
    height: 50%;
    content-align: center bottom;
    border: greenyellow;
}

#question {
    column-span: 2;
    content-align: center bottom;
    width: 100%;
    height: 100%;
}

Button {
    width: 100%;
}

/* Dialog Stuff */

Dialog {
    display: none;
    dock: right;
    width: 100;
    height: 40;
    border: round $primary;
    box-sizing: border-box;
    background: $boost;
}

.-show-dialog Dialog {
    display: block;
}

Dialog Container {
    /* border: wide purple; */
    width: auto;
    height: auto;
}

/* Matches the question text in the button */
#dialog_question {
    text-style: bold;
    width: 100%;
    height: auto;
    content-align: center middle;
    margin: 0 0 2 0;
}

/* Matches the container holding the dialog buttons */
.dialog_buttons {
    align: center middle;
    height: auto;
    width: auto;
    /* border: wide red; */

}

/* The button class */
Dialog Button {
    margin: 0 4;
}


Screen {
    layers: base dialog;
}

MyDialog {
    margin-left: 20;
    margin-top: 20;
    layer: dialog;
    width: 51;
    height: 11;
}

MyDialog Input {
    padding: 0 0;
    border: none;
}

.hidden {
    display: none;
}



#mydialog {
    content-align: center middle;
    border: solid brown;
    background: ansi_white;
}

#mydialog Label {
    text-align: center;
    width: 1fr;
    margin-top: 1;
    color: ansi_red;
}

#text-box {
    height: 100%;
    /* background: $panel; */
    /* border: greenyellow; */
}

AsyncDialog {
    layer: dialog;
}

AsyncDialog Input {
    padding: 0 0;
    border: none;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

#asyncdialog{
    content-align: center middle;
    border: solid brown;
    background: ansi_white;
}

#asyncdialog Label {
    text-align: center;
    width: 1fr;
    margin-top: 1;
    color: ansi_red;
}

#hidden-container {
    display: none;
}


Tabs {
    dock: top;
}