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

:root
{
    /* -------- 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);
}

/* ---------------- 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;
}

html {overflow: hidden;}

/* Reset table display modes (universal * selector above breaks them) */
table { display: table; }
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
tr { display: table-row; }
th, td { display: table-cell; }
caption { display: table-caption; }
colgroup { display: table-column-group; }
col { display: table-column; }


/* ---------------- 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;
}

/* ---------------- DIALOG ---------------- */

dialog
{
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border: none;
    box-shadow: var(--shadow5);
    padding: 1rem;
}

/* ---------------- SIMPLE NOTIFICATION ---------------- */

simple_notification
{
    display: inline-block;
    position: fixed;
    bottom: 1rem;
    left: 50%;
    translate: -50% 0;
    padding: .5rem;
    color: white;
    background-color: grey;
}

simple_notification.SUCCESS {background-color: green;}
simple_notification.ERROR {background-color: red;}
simple_notification.WARNING {background-color: orange;}