html {
 height: 100%; // The height of your html document takes 100% size of window
}

/*.wrapper { */
body {
    background-color: lightblue ;
	height:100%;
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: 15% auto;
	grid-template-areas:
	"header header"
	"leftCol rightCol"
	"footer footer";
	grid-gap: 5px;
 }
 .header{
   grid-area: header;
 }
 .leftCol{
   grid-area: leftCol;
 }
 .rightCol{
   grid-area: rightCol;
 }
 .footer{
   grid-area: footer;
 }
.fg_Button {
	font-size:10pt;width:78px;height:24px;margin:0px 3px;
	background:silver;line-height: 1.25;
	border:outset;
}
.fg_Button:hover {background-color: #eee;cursor:pointer;}
.fg_Button:disabled {cursor: not-allowed;}
.fg_GButton {border:0;cursor:pointer;vertical-align:middle;padding:5px;}
.fg_label {font:bold;text-align: right;padding: 0px 5px;}	/* padding left right */
.fg_label:after {content: ":";}
input[type="checkBox"] {cursor:pointer;}
#tableoff table {background-color:#eee;}
#tableoff td {background-color:#eee;padding:5px 10px;border:none;}
.fg_table td, th {border: 1px solid #111;padding:3px}
.fg_table td {font: normal 9pt Arial}
.fg_Title {font: bold 9pt Arial;text-align: center;padding:5px;background-color:#acc;}
.fg_table tr:nth-child(2n+1) {background-color:#eee;}
.fg_table tr:nth-child(2n+2) {background-color:#ffffff;}
#tableContainer {width:100%}
#result{width:70%}
h3 {text-align:center}
.border {border: outset 3px blue;}