body
{
    overflow-y: auto;
}

header
{
    position: fixed;
    text-align: center;
    padding: 1rem;
    height: 5rem;
    width: 100%;
    box-shadow: var(--shadow3);
    background-color: white;
    z-index: 100;
}

header>.Title
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 250%;
    font-weight: bold;
    text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
    white-space: nowrap;
}

.AppPage
{
    display: none;
    position: absolute;
    top: 6rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
}

.AppPage.SHOW
{
    display: inline-block;
}

.AppPage button
{
    background-color: blue;
    color: white;
}

/* ---------------- PAGINA DI LOGIN ---------------- */

#loginPage>img
{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(25%);
}

#loginPage>div
{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% - 3rem);
    font-size: 300%;
}

#loginPage>div *
{
    display: inline-block;
    width: 100%;
    text-align: center;
}

#loginPage>div input
{
    margin-bottom: 5rem;
}

#loginPage>div button
{
    padding: 2rem;
}

/* ---------------- PAGINA DEL BORDEREAU ---------------- */

#info
{
    font-size: 300%;
}

#info #identity
{
    font-weight: bold;
}

#bordereau_table 
{
    width: 100%;
}

#bordereau_table tbody>tr:hover
{
    background-color: darkseagreen;
    color: white;
    cursor: pointer;
}

#bordereau_table
{
    font-size: 200%;
}

#bordereau_table tbody td
{
    padding: 2rem 1rem;
}

#bordereau_table tbody .Delivery,
#bordereau_table tbody .Document,
#bordereau_table tbody .Outcome
{
    width: 1rem;
    font-size: 75%;
}

#bordereau_table tbody .Delivery,
#bordereau_table tbody .Document
{
    text-align: right;
}

#bordereau_table .Outcome.OutcomeCONS
{
    background-color: green;
    color: white;
}

#bordereau_table .Outcome.OutcomeNONC
{
    background-color: red;
    color: white;
}

#bordereau_table .Outcome.OutcomePARZ
{
    background-color: orange;
    color: white;
}

#bordereau_table .Outcome.OutcomeRESP
{
    background-color: grey;
    color: white;
}

#bordereauPage button
{
    width: 100%;
    font-size: 250%;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 2rem;
}

#reload_button
{
    background-color: darkolivegreen;
}

#startTravel_button,
#endTravel_button
{
    background-color: darkorange;
}

body.TRAVEL_STARTED #startTravel_button,
body:not(.TRAVEL_STARTED) #endTravel_button
{
    display: none;
}

#logout_button
{
    background-color: red;
}

/* ---------------- PAGINA DELL'ESITO ---------------- */

#detailsPage #details
{
    font-size: 300%;
}

#detailsPage button
{
    width: 100%;
    font-size: 250%;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 2rem;
}

#detailsPage #outcome_CONS
{
    background-color: green;
}

#detailsPage #outcome_NONC
{
    background-color: red;
}

#detailsPage #outcome_PARZ
{
    background-color: orange;
}

#detailsPage #outcome_RESP
{
    background-color: grey;
}

#detailsPage #outcome_NULL
{
    background-color: white;
    color: black;
    border: 1px solid black;
}

#detailsPage #outcome_BACK
{
    margin-top: 5rem;
}

body:not(.TRAVEL_STARTED) #outcome_CONS,
body:not(.TRAVEL_STARTED) #outcome_NONC,
body:not(.TRAVEL_STARTED) #outcome_PARZ,
body:not(.TRAVEL_STARTED) #outcome_RESP,
body:not(.TRAVEL_STARTED) #outcome_NULL
{
    display: none;
}

/* ---------------- SCHERMO MODALE ---------------- */

#modalScreen
{
    font-size: 200%;
}