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

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

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

.login-failed {
    width: 100%;
    height: 1fr;
    border: heavy #9B0000;
    content-align: center middle;
    text-style: bold italic;
}

/* HOMEPAGE */
#homepage{
    width: 100%;
    max-height: 100%;
}

#homepage > Vertical {
    align: center middle;
    border: outer #1d2e38;
    width: 100%;
}

#homepage > Vertical > Button {
    margin: 1;
    border: tall #1d2e38;
    width: 50%;
    background: $primary-background-darken-2;
}

#homepage > Vertical > Button:hover {
    background: #2d4156;
}

/* BOOKLET */

#booklet-container > Vertical > Tables{
    content-align: center middle;
    border: #ec971f;
    width: 100%;
    height: auto;
}

#booklet-container > NewAverage{
    content-align: center middle;
}

.booklet-container-options{
    height: auto;
    layout: horizontal;
    align: center middle;
    border: #ec971f;
}

.booklet-container-options > Average {
    width: auto;
}

.booklet-container-options > Button{
    margin-left: 1;
    margin-top: 2;
    border: tall #1d2e38;
    width: auto;
    background: $primary-background-darken-2;
}

.booklet-container-options > Button:hover {
    background: #2d4156;
}

.booklet-container-options > Static {
    width: auto;
    height: auto;
    border: blank;
}

.booklet-container-options> Input {
    width: auto;
    height: auto;
}

.booklet-container-options > .options{
    margin-left: 1;
    border: tall #1d2e38;
    width: auto;
    background: $primary-background-darken-2;
}

.booklet-container-options > .options:hover {
    background: #2d4156;
}

.booklet-container-filters{
    height: auto;
    layout: horizontal;
    align: center middle;
    border: #2b542c;
}

.booklet-container-filters > Average {
    width: auto;
}


.booklet-container-filters > Static {
    width: auto;
    height: auto;
    border: blank;
}

.booklet-container-filters > Input {
    width: 7%;
    height: auto;
}

.booklet-container-filters > .compute{
    border: tall #1d2e38;
    width: auto;
    background: $primary-background-darken-2;
}

.booklet-container-filters > .compute:hover {
    background: #2d4156;
}

#clear{
    margin-left: 2;
    margin-top: 2;
    background: #f7e1b5;
}

#clear:hover {
    background: #818360;
}

#result {
    margin-left: 2;
    border: none;
}

/*
#booklet-filters{
    align: center middle;
    width: auto;
}

#booklet-filters > Input{
    width: 10%;
}

#booklet-filters > Button{
    margin-left: 3;
    border: tall #1d2e38;
    width: auto;
    background: $primary-background-darken-2;
}

#booklet-filters > Button:hover {
    background: #2d4156;
}
*/
#booklet-table-exams{
    content-align: center middle;
    border: heavy #2b542c;
    width: 100%;
    height: auto;
}

#booklet-table-average{
    content-align: center middle;
    border: heavy #2b542c;
    width: 100%;
    height: auto;
}

#booklet-loading {
    width: 100%;
    height: 1fr;
    border: double #ec971f;
    content-align: center middle;
    text-style: italic;
}

#booklet-value-error {
    border: blank;
    content-align: center middle;
    width: auto;
}

.booklet-average {
    border: red;
    height: auto;
}

.booklet-average > Static {
    width: 20%;
    height: auto;
    border: blank;
    content-align: center middle;
}

.booklet-average > Input {
    width: 20%;
    height: auto;
}

.booklet-average > Button {
    width: 20%;
    height: auto;
}


/* TAXES */

#taxes-container {
}

#taxes-table{
    content-align: center middle;
    border: #ec971f;
    width: 100%;
    height: auto;
}

#taxes-loading {
    width: 100%;
    height: 1fr;
    border: double #ec971f;
    content-align: center middle;
    text-style: bold italic;
}

/*
.click-saved {
    width: 100%;
    height: auto;
    border: red;
    content-align: center middle;
}
*/
/* EXAMS */

#exams-table {
    border: #ec971f;
    width: 100%;
    height: auto;
}

#exams-table > Tables {
    content-align: center middle;
    /* height: auto; questo qua fa in modo che rimpicciolendo lo schermo poi mi esce la scrollbar, senza invece si adatta*/
}

#add {
    border: tall #1d2e38;
    width: 30%;
    background: $primary-background-darken-2;
}

#add:hover {
    background: #2d4156;
}

.exams-loading{
    width: 100%;
    height: 1fr;
    border: double #ec971f;
    content-align: center middle;
    text-style: bold italic;
}

#exams-added-success{
    width: 100%;
    height: 1fr;
    border: heavy #2b542c;
    content-align: center middle;
    text-style: bold italic;
}

#exams-empty {
    width: 100%;
    height: 1fr;
    border: heavy #9B0000;
    content-align: center middle;
    text-style: bold italic;
}

/* RESERVATIONS */

.reservations-table{
    height: 40%;
    border: #ec971f;
}

.reservations-table > Tables {
    content-align: center middle;
    border: none;
    width: 100%;
    height: auto;
}

.reservations-buttons{
    margin-top: 1;
    layout: horizontal;
    height: auto;
    align: center middle;
    scrollbar-color: #f7ecb5;
    scrollbar-size: 1 2;
}

.reservations-buttons > Line  {
    border: #ec971f;
    align: center middle;
    height: auto;
    width: auto;
}

.reservations-buttons  > Line > Static {
    width: auto;
    height: auto;
    text-style: bold;
    border: $background;
}

.reservations-buttons  > Line > Check {
    width: auto;
    height: auto;
}

.reservations-buttons  > Line > Check:hover {
    background: #2d4156;
}

.reservations-container > Horizontal {
    margin-top: 1;
    align: center middle;
    height: auto;
    width: 100%;
}

#remove {
    border: tall #1d2e38;
    width: 30%;
    background: $primary-background-darken-2;
}

#remove:hover {
    background: #2d4156;
}

.reservations-loading{
    width: 100%;
    height: 1fr;
    border: double #ec971f;
    content-align: center middle;
    text-style: bold italic;
}

#reservations-loading-removed{
    width: 100%;
    height: 1fr;
    border: double #ec971f;
    content-align: center middle;
    text-style: bold italic;
}

#reservations-removed-success{
    width: 100%;
    height: 1fr;
    border: heavy #2b542c;
    content-align: center middle;
    text-style: bold italic;
}

.reservations-removed-error{
    width: 100%;
    height: 1fr;
    border: heavy #9B0000;
    content-align: center middle;
    text-style: bold italic;
}

.reservations-empty{
    width: 100%;
    height: 1fr;
    border: heavy #9B0000;
    content-align: center middle;
    text-style: bold italic;
}

.reservations-removed-mix{
    width: 100%;
    height: 1fr;
    border: heavy #2b542c;
    content-align: center middle;
    text-style: bold italic;
}

/* FOOTER */
Footer {
    background: $background;
}



