html,
:root {
/*--header-bgcolor: lightskyblue;
--header-item-bgcolor-hover: DeepSkyBlue;*/

--header-bgcolor: white;
--header-item-bgcolor-hover: lightgray;

--color1: #e8e0c1;
--color1alt: #ebda98;
--color2: #dff5c1;
--color2alt: #bfde95;
--color3:#cafaec;
--color3alt:#97dec9;
--color4:#caeffc;
--color4alt:#8bc3d6;
}
#loading {
  display: flex;
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(192, 192, 192, 0.5);
  background-image: url("https://i.stack.imgur.com/MnyxU.gif");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}
body{
	margin-left:30px;
	margin-right:30px;
	padding:10px;
	font-size:18px;
	
}
header {
		 display: flex;
		 border-radius: 5px;
		 outline: 1px solid black;
	background-color : var(--header-bgcolor);
	justify-content:left;
}
.color1{
	background-color:var(--color1);
}
.color1alt{
	background-color:var(--color1alt);
}
.color2{
	background-color:var(--color2);
}
.color2alt{
	background-color:var(--color2alt);
}
.color3{
	background-color:var(--color3);
}
.color3alt{
	background-color:var(--color3alt);
}
.color4{
	background-color:var(--color4);
}
.color4alt{
	background-color:var(--color4alt);
}
.backgroundGray{
	background-color: var(--header-item-bgcolor-hover);
}
.cursorChange:hover{
	cursor: pointer;
}
.headeritem {
	/*border:1px black solid;*/
	padding:10px;
	min-height : 20px;
	min-width : 8em;
	background-color: var(--header-item-bgcolor);
}
.headeritem:hover{
	background-color: var(--header-item-bgcolor-hover);
}
.headeritem label{
	font-size:80%;
	font-weight: bold;
	
}
.item-verybig{
			 border-right:1px solid black;
	width:10.5em;	
	padding-top:10px;
	padding-bottom:10px;
}

.item{
			 border-right:1px solid black;
	width:7.5em;
	padding-top:10px;
	padding-bottom:10px;
}
.item-rank{
	 border-right:1px solid black;
	width:6em;
	padding-top:10px;
	padding-bottom:10px;
}
.myLabel{
	font-size:80%;
	margin-left:3px;
}
.myLabelHeader{
	font-size:120%;
	font-weight: bold;
	align-items: center;
	margin-left:8px;
	display: block;
}
.headerHighlight:hover{
	background-color: var(--header-item-bgcolor-hover);
}
.border{
			 border-radius: 5px;
		 outline: 1px solid black;
}
.fillrow{
	-ms-flex-preferred-size: 2;
}
main {
	outline: 1px solid black;	
	border-radius: 5px;
	min-height:100%;
}

footer {
	display:flex;
	justify-content:space-evenly;
	margin-top:auto;
}
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left:0px;
  margin-right:0px;
  justify-content::space-evenly;
}

.row-fill {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.row-fill>* {
	flex: 1 0;
}
.col-md-3{
	-ms-flex: 0 0 24%;
	flex: 0 0 24%;
    max-width: 24%;
}
.col-md-9{
	-ms-flex: 0 0 72%;
	flex: 0 0 72%;
    max-width: 72%;
}
.col-md-12{
		-ms-flex: 0 0 97%;
	flex: 0 0 97%;
    max-width: 97%;
}
.col1 {
  -ms-flex-preferred-size: 0;  
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;  
  flex-basis: 0;
}
.col2 {
	display:flex;
flex-direction: column;
	  -ms-flex-wrap: wrap;
  flex-wrap: wrap;  
  
  -ms-flex-preferred-size: 0;
  flex-basis: 0
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}


	
@media only screen and (max-width:767px) {
	header {
	background-color : var(--header-bgcolor);
	display:flex;
	align-items: center;
	justify-content:space-evenly;
	margin:0;
	padding: 0;
	flex-direction : column;
	flex:1 0 90%;
	}
	
	main{
	flex-direction : column;
	align-items: center;
	justify-content:space-evenly;
	font-size:50%;
	}