.layout {
    display: grid;

    grid-template-rows:
        auto      /* header */
        auto      /* toolbox */
        auto      /* info */
        1fr       /* content */
        auto;     /* footer */

    min-height: 800px;
    max-height: 100%;

    min-width: 1200px;
    max-width: 100%;

    margin: 0 auto;
    background-color: #BDD5FB;
    overflow: hidden;
}

.header {
    background-color: #000080;
    color: white;
    padding: 10px 20px;
    font-weight: bold;
	font-size: 1.1rem;
	border: 1px solid white;
	height: 32px;
	text-align: center;
}
.footer {
    background-color: #000080;
    color: white;
    padding: 10px 20px;
    font-weight: bold;
	font-size: 0.8rem;
	border: 1px solid white;
	height: 24px;
	text-align: center;
}

.toolbox_top,
.info_area {
    background-color: #BDD5FB;
    color: #000080;
    padding: 10px 20px;
}

.full_area {
    display: grid;
    grid-template-columns: 1fr;	
	min-height: 744px;  /* 800-(32+24) */
    max-height: 100%;
	min-width: 1024px;
    max-width: 100%;
	border: 2px solid #000080
}
.content.two-grids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
}

.content.one-grid {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
}

.grid_left,
.grid_right {
    background-color: #BDD5FB;
    color: #000080;
    border: 1px solid #000080;
    padding: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tabulator {
    height: 100%;
}

.hide-toolbox .toolbox_top {
    display: none;
}
.hide-info .info_area {
    display: none;
}
.hide-toolbox.hide-info .toolbox_top,
.hide-toolbox.hide-info .info_area {
    display: none;
}