:root {

    --grid-area-default: 
        "side_menu_header content_header content_header"
        "content_panel content_panel property_panel"
        "side_menu_footer content_footer content_footer";

    /*--grid-rows-l: var(--grid-rows-default);  */
    --grid-rows-default: 
        var(--header-height) 
        auto 
        var(--footer-height);   
        
    /*--grid-columns-l: var(--grid-columns-default); */
    --grid-columns-default: 
        var(--side-menu-width) 1fr;

    --display-side-menu-panel: block;
    --display-side-menu-footer: block;
    --display-content-header: block;
    --display-content-panel: block;
    --display-content-footer: block;        
}

.page {
    display: grid;
    grid-template-areas: var(--grid-area-default);
    grid-template-columns: var(--grid-columns-default);    
    grid-template-rows: var(--grid-rows-default);
    height: 100vh;
}

/* CONTENT GRID DEFINITION */
.content-grid { grid-area: page-description-area; }
.content-grid { grid-area: login-area; }


.content-header {
    background-color: var(--content-header-background);
    color: var(--content-header-color);
    box-sizing: border-box;
    height: var(--footer-height);
    /*box-shadow: 0px 4px 2px 0px #888888;*/
    width: 100%;
}

.content-header > p {
    width: 400px;
    white-space: nowrap;  
    overflow: hidden;
    text-overflow: ellipsis; 
}

.content-panel {
    /*background-color: #FFFFFF;*/
    background-color: #434343;
    color: var(--content-color);
    padding: 0;
    overflow: auto;    
}

.content-panel > p {
    padding: 0;
    min-width: 320px;
    overflow-x: auto;
}


.content {
    display: grid;
    grid-template-areas: page-description-area login-area;
    grid-template-columns: 60% 40%;    
    grid-template-rows: 1fr;
}

.content h1,
.content h2,
.content h3,
.content p {
    
    color: var(--blue-darken-4);
    color: #FFFFFF;
    font-weight: 300;
    padding-bottom: 0.5em;
}

.content p {
    color: #FFFFFF;  
}

.description-panel {
    box-sizing: border-box;
    background-color: #3F51B5;
    border-radius: 6px 0 0 6px;
    /*box-shadow: 3px 3px 2px 0px #888888; */
    margin-top: 2em;
    margin-left:2em;
    padding: 2em 4em 2em 2em;
    text-align: center;
    min-width: 320px;
    max-width: 800px;
    justify-self: right;
    align-self: top;
}

.login-panel {
    box-sizing: border-box;
    background-color: var(--panel-color-dark);
    border-radius: 0 6px 6px 0;
    margin-top: 2em;
    margin-right: 2em;
    padding: 1em 4em 2em 3em;
    justify-self: left;
    align-self: top;
    width: 100%;
    max-width: 30em;
}

.login-panel.login-card {
    border-radius: 0 6px 6px 0;
    /*box-shadow: 3px 3px 2px 0px #888888;*/
    width: 100%;
    min-height: 30em;
    text-align: left;
    padding: 1em 3em 1em 1em;
}

.login-card p {
    margin: 0;
    padding: 0;
}

.content-footer {
    background-color: var(--content-footer-background);
    color: var(--content-footer-color);
    /*box-shadow: 0px -2px 2px 0px #888888;*/
}

.property-panel {
    background-color: lightgray;
    color: var(--content-color);
    padding: 0;
}

.side-menu-panel.display {
    display: var(--display-side-menu-panel);
}

.side-menu-footer.display {
    display: var(--display-side-menu-footer);
}

.content-header.display {
    display: var(--display-content-header);
}

.content-panel.display {
    display: var(--display-content-panel);
}

.content-footer.display {
    display: var(--display-content-footer);
}

@media (max-width: 800px) {
    .side-menu-header-content {
        display: grid;
        grid-template-columns: auto var(--header-height);
        width: 100%;
        height: var(--header-height);
    }

    .content {
        display: grid;
        grid-template-areas: login-area page-description-area;
        grid-template-columns: 1fr;    
        grid-template-rows: 1fr 1fr;
    }

    .description-panel {
        border-radius: 0;
        margin: 0;
        padding: 2em;
        text-align: center;
        min-width: 320px;
        justify-self: center;
    }

    .login-panel {
        grid-row: 1;
    }

    .login-panel {
        box-sizing: border-box;
        background-color: var(--panel-color-dark);
        border-radius: 0;
        padding: 2em;
        margin: 0;
        justify-self: center;
        align-self: top;
        width: 100%;
    }

    .login-panel {
        min-height: 10em;
    }

}