/* ---------------- ROOT ---------------- */

:root
{
    /* -------- DIMENSIONI -------- */
    
    --header-height: 3.5rem;
    --footer-height: 2.5rem;

    /* -------- OMBRE -------- */
    --shadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --shadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --shadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --shadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

/* -------- OMBRE -------- */
.SHADOW1 {box-shadow: var(--shadow1);}
.SHADOW2 {box-shadow: var(--shadow2);}
.SHADOW3 {box-shadow: var(--shadow3);}
.SHADOW4 {box-shadow: var(--shadow4);}
.SHADOW5 {box-shadow: var(--shadow5);}

/* ---------------- IMPOSTAZIONI GENERALI ---------------- */

*
{
    font-size: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
}

html,body
{
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: whitesmoke;
}

body
{
    padding-top: calc(var(--header-height) + .5rem);
    padding-bottom: calc(var(--footer-height) + 1rem);
}

/* ---------------- BLOCCHI ---------------- */

.Block
{
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1.5rem;
    width: calc(100% - 3rem);
    box-shadow: var(--shadow3);
    background-color: white;
}

*:not(table).Block
{
    display: block;
}

/* ---------------- HEADER & FOOTER ---------------- */

header,footer
{
    position: fixed;
    left: 1rem;
    text-align: center;
    padding: 1rem;
    width: calc(100% - 2rem);
    box-shadow: var(--shadow4);
    background-color: white;
    z-index: 100;
}

header {top: .5rem; height: var(--header-height);}
footer {bottom: .5rem; height: var(--footer-height);}

header>.Title
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 180%;
    font-weight: bold;
    color: black;
}

header>.Title>img
{
    height: calc(var(--header-height) - 1.5rem);
}

header>.Title>*
{
    vertical-align: middle;
}

header>.Version
{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    font-size: 60%;
}

header center_container,
footer center_container
{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

header right_container,
footer right_container
{
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translate(0,-50%);
}

header left_container,
footer left_container
{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translate(0,-50%);
    text-align: left;
}

/* ---------------- CONTROLLI IN BASSO ---------------- */

lower_container
{
    position: fixed;
    bottom: 1rem;
}

lower_container[position=center] {left: 50%; transform: translateX(-50%);}
lower_container[position=right] {right: 1.5rem;}
lower_container[position=left] {left: 1.5rem;}

lower_container>*,
lower_container>button
{
    padding: .5rem;
}

lower_container>input,
lower_container>select
{
    box-shadow: var(--shadow3);
    background-color: lightgreen;
}

/* ---------------- BADGE ---------------- */

badge
{
    font-size: 80%;
    color: var(--fg-color);
    background-color: var(--bg-color);
    display: inline-block;
    box-shadow: var(--shadow2);
    padding: .25rem .5rem;
    border-radius: .5rem;
}

badge 
{
    --fg-color: white;
    --bg-color: black;
}

badge.GREEN {--bg-color: green;}
badge.RED {--bg-color: red;}
badge.ORANGE {--bg-color: orange;}
badge.BLUE {--bg-color: blue;}
badge.BLACK {--bg-color: black;}
badge.GRAY {--bg-color: gray;}

/* ---------------- INPUT ---------------- */

input, select, textarea
{
    outline: none;
    border: none;
    border-bottom: 1px solid grey;
}

input:focus, select:focus, textarea:focus
{
    border-bottom: 1px solid blue;
}

input, textarea, select, button, label
{
    cursor: pointer;
}

input:focus, textarea:focus
{
    cursor: text;
}