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

.HIDDEN
{
    display: none;
}

page-header,page-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 / FOOTER ---------------- */

page-header 
{
    top: .5rem; 
    height: var(--page-header-height);
    
    &>page-title
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 180%;
        font-weight: bold;
        color: black;
        white-space: nowrap;
        
        &[position=right]
        {
            right: .5rem;
            transform: translate(0,-50%);
        }
        
        &[position=left]
        {
            left: .5rem;
            transform: translate(0,-50%);
        }

        &>*
        {
            vertical-align: middle;
        }

        &>img
        {
            height: calc(var(--page-header-height) - .5rem);
        }
        
        &>version
        {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%,0);
            font-size: 60%;
        }
    }
    
    .Version
    {
        font-size: 50%;
    }
}

page-footer 
{
    bottom: .5rem; 
    height: var(--page-footer-height);
    
    &>footer-message
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 75%;
        color: black;
    }
}

/* ---------------- CONTAINERS ---------------- */

:is(page-header,page-footer)>container
{
    display: inline-block;
    position: absolute;
    top: 50%;

    &>img{height: 100%;}

    &[position=center]
    {
        left: 50%;
        transform: translate(-50%,-50%);
    }

    &[position=right]
    {
        right: .5rem;
        transform: translate(0,-50%);
    }

    &[position=left]
    {
        left: .5rem;
        transform: translate(0,-50%);
    }
}

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

lower-container
{
    position: fixed;
    bottom: 1rem;
}

lower-container[position=center] {left: 50%; transform: translateX(-50%);}
lower-container[position=right] {right: 1rem;}
lower-container[position=left] {left: 1rem;}

lower-container>*
{
    padding: .5rem;
}

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