@charset "utf-8";
/* CSS Document */

/*body{
	  font-family: "Open Sans", sans-serif;
  line-height: 1.6em;
  font-size: 20px;
	color:#666;
  /*font-weight:$font-weight-default;
  line-height: 27px;
  font-weight: 400;
	min-height:100vh;
}
*/
.left, .right {
	float:left;
	min-width:50%;
	max-width:100%;
}



#fullbox{
	width:100%;
	min-height:100vh;
	/*box-shadow: 0px 2px 8px rgba(0,0,0,0.7);*/
	margin:auto;
	float:left;

}
/*#clickme{
	font-size:24px;
	padding:5px;
	margin:5px;
	border:2px solid #DDD;
	display:inline;
}
#instructions{
	width:80%;
	height:250px;
	height:auto;
	margin:auto;
	
}*/

.chart {
	position:relative;
	/*margin-top:10%;
	margin-left:10%;*/
	float:left;
	/*width:100%;*/
		
}

#lopchart{
	/*width:40%;
	width:100%;*/
	/*height:350px;*/
	float:left;
	margin:0px;
}

#loplegend{
	/*width:50%;
	width:100%;*/
	/*height:350px;*/
	float:left;
	margin:0px;
	display:none;
}

/*------------media -------------------

	
@media  (min-width: 480px) and (max-width: 1200px) {
  #lopchart{
	width:100%;
	
}

#loplegend{
	width:100%;
	
}
}*/

/*#instructions1{
	width:800px;
	height:150px;
	float:left;
	margin:5px;
}

#instructions2{
	width:450px;
	height:150px;
	float:left;
	display:none;
}

.instrleft{
	width:50px;
	padding:15px 10px;
	float:left;
}

.instrright{
	width:900px;
	float:left;
	
}

.instrright p{
	margin-bottom:5px;
}*/

table#loptable{
	margin:0px;
	width:100%;
	/*border-bottom:1px solid #eaeaea;
	border-right:1px solid #eaeaea;*/
	font-family: "Open Sans", sans-serif;
   font-size: 20px;
	line-height:1.3em;
	padding:0px;
}

table#loptable td{
	/*border-top:1px solid #eaeaea;
	border-left:1px solid #eaeaea;*/
	text-align:left;
}


table#loptable tr:first-child{
	border-top:transparent;
	text-align:left;
}



/*td.cellsmall{
	width:75px;
	padding:5px 0px;
	font-size:12px;
	font-weight:600;
}

td.cellbig{
	width:96px;
	padding:5px 0px;
	font-size:12px;
	font-weight:600;
}

td.cellsmall2{
	width:130px;
	padding:5px 0px;
}

td.cellbig2{
	width:150px;
	padding:9px 0px;
}*/

table#loptable input{
	width:50%;
	text-align:center;
	border:1px solid #eaeaea;
	padding:5px;
	font-family: "Open Sans", sans-serif;
    font-size: 20px;
	color:#666;
	
}

.tablebutton{
	width:100%;
	text-align:center;
	/*border:2px solid #0058a4;*/
	background-color:#0058a4;
	margin:auto;
	padding:10px;
	color:#FFF;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	font-size:20px;
	/*-moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.7);
	box-shadow: 0px 2px 8px rgba(0,0,0,0.7);*/
	cursor:pointer;
}

.tablebutton:hover{
	background-color:rgba(0,88,164,.8);
	/*color:rgba(0,88,164,1.00);
	-moz-box-shadow: 0px 2px 12px rgba(0,0,0,0.9);
	-webkit-box-shadow: 0px 2px 12px rgba(0,0,0,0.9);
	box-shadow: 0px 2px 12px rgba(0,0,0,0.9);*/
}

#legendtitle{
	text-align:left;
	font-size:26px;
	color:#4a4a4a;
	margin:5px 0px 5px 0px;
}

#legend1, #legend2, #legend3, #legend4, #legend5, #legend6, #legend7, #legend8, #legend6_1, #legend7_1, #legend1_1{
	text-align:left;
	font-family: "Open Sans", sans-serif;
    font-size: 20px;
	line-height: 1.5em;
}



#legend1 > span, #legend2 > span, #legend3 > span, #legend4 > span, #legend5 > span, #legend6 > span, #legend7 > span, #legend8 > span  {
 display:block;
}

#legend1 span::before, #legend2 span::before, #legend3 span::before, #legend4 span::before, #legend5 span::before, #legend6 span::before, #legend7 span::before, #legend8 span::before {
   content:'';
  width: 20px;
  height: 20px;
  display: block;
  float: left;
  margin:5px 10px 0px 0px;
	
	
}

.one::before {background-color: #BF63D6;}
.two::before {background-color: #FF9022;}
.three::before {background-color: #00B3B8;}
.four::before {background-color: #C1C1BF;}
.five::before {background-color: #E24956;}
.six::before {background-color: #6DBF37;}
.seven::before {background-color: #34B2E3;}
.eight::before {background-color: #FFC547;}