/***************************************/
/* Sticky App Layout:
	"header" is auto height
    "footer" is auto height
    "main" is remaining height of app container
*/
/***************************************/
html, body {
    height: 100%; /* Set Body Height for Height-Inheritance */
    /* margin: 0; */
}
  
.app {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* align-items: stretch; */
}
  
.app > header {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.app > footer {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.app > main {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    width: 100%;
    max-width: 1200px;
}

.app > main .scrollable { /* use for "main" to make content scrollable */
    height: 1px;
    overflow: auto;
}