html, body {
        width: 100%;
        height: 100%;
        margin: 5;
		background-color: black;
		color: #FFFFFF;
      }

.container {
  display: grid;
  grid-template-columns: 890px;
  grid-template-rows: min-content 1fr;
  gap: 0px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "head1"
    "list1"
	"head2"
    "list2"
	"head6"
    "list6"
	"head3"
    "list3"
	"head4"
    "list4"
	"head5"
    "list5"
	"head7"
    "list7";
	
}


.head1, .head2, .head3, .head4, .head5, .head6, .head7 { 
font-family: 'Roboto Condensed', sans-serif;
font-size: 30px;
text-align: center;
padding-bottom: 3px;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}

.head1 { grid-area: head1;
background-color: white;
color: black;
border-bottom-color: black;
}
.head2 { grid-area: head2;
background-color: green;
color: white;
border-bottom-color: white;
margin-top: 30px; }

.head3 { grid-area: head3;
background-color: yellow;
color: black;
border-bottom-color: black;
margin-top: 30px; }

.head4 { grid-area: head4; 
background-color: red;
color: white;
border-bottom-color: white;
margin-top: 30px; }

.head5 { grid-area: head5; 
background-color: black;
color: white;
border-bottom-color: white;
margin-top: 30px; }

.head6 { grid-area: head6; 
background-color: yellow;
color: black; 
border-bottom-color: black;
margin-top: 30px; }

.head7 { grid-area: head7;
background-color: blue;
color: white;
border-bottom-color: white;
margin-top: 30px; }

.list1 { grid-area: list1; }
.list2 { grid-area: list2; }
.list3 { grid-area: list3; }
.list4 { grid-area: list4; }
.list5 { grid-area: list5; }
.list6 { grid-area: list6; }
.list7 { grid-area: list7; }

table.List {
table-layout: fixed;
background-color:#000000;
border-collapse:collapse;
border-width:1px;
border-color:#FFFFFF;
border-style:solid;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
}

table.List th {
background-color:#FFFFFF;
color:#000000;
padding: 5px;
}

table.List td {
background-color:#000000;
color:#FFFFFF;
height: 36px;
padding-left: 5px;
padding-right: 5px;
vertical-align: center;
}

table.List th.head-position, td.list-position {
        text-align: left;
		overflow: hidden;
		width: 20px;
}

table.List th.head-min, td.list-min {
        text-align: left;
		width: 40px;
}

table.List th.head-nat, td.list-nat {
        text-align: center;
		width: 40px;
}

table.List th.head-name, td.list-name {
        text-align: left;
		width: 380px;
		overflow: hidden;
		text-overflow: ellipsis;
}

table.List th.head-name, td.list-name {
        text-align: left;
		width: 520px;
		overflow: hidden;
		text-overflow: ellipsis;
}

table.List th.head-oldname, td.list-oldname {
        text-align: left;
		width: 260px;
		overflow: hidden;
		text-overflow: ellipsis;
}

table.List th.head-oldtyp, td.list-oldtyp {
        text-align: left;
		width: 260px;
		overflow: hidden;
		text-overflow: ellipsis;
}

table.List th.head-result, td.list-result {
        text-align: right;
		width: 80px;
}

.flag {
	height: 20px;
	margin-top: 5px;
	border: 1px solid #FFFFFF;
}