@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;300;400;500;700&family=Roboto+Slab:wght@200;400;700&display=swap');

html{ 
 	width: 100%;
    height:100%;
 	font-size: 10px; 
 	
	}
      
body{
    width: 100vw;
    height:100%;
    margin:0;
    padding:0;
    background-color:#fff;
    color:#000;
   /* overflow-x:hidden;*/
font-family: 'Roboto Mono', monospace;
	}

body *{ box-sizing: border-box;}
    
h1,h2,h3,h4,h5,h6{ 
	text-transform:capitalize;
		text-transform:uppercase;
font-family: 'Roboto Slab', serif;
	margin-bottom:0.5em;
	margin-top:2em;
	font-weight:400;
	
	}


.header{
		width: 80%;
    	max-width: 1800px;
    	margin: auto;
    	border-bottom:1px solid #fff;
    	}

.header:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
	 
.tool-kit{ text-align:center;color: #000; text-transform:uppercase;  ;font-size:24px; margin:50 0;}
.brand{font-weight:700;font-size:24px;}

.logo{ 
        display:block;
        margin-left: auto;
        margin-right: auto;
        margin-top:50px;
        width:150px;
    }
    

p{
	font-size:110%; 
	margin:10px 0;
	font-weight:300;
	}

svg{  
	display:block;
	margin-left:auto;
   	margin-right: auto;
   	}

.dropzone {
	border:1px solid;   
	width:80%;
	max-width:1800px;
	height:50%; 
	margin:auto; 
	display: flex;
	justify-content: center ;
	align-items:center;
 
}
 .dropzone .dz-message span {
   
    margin:0; 
    display:block;
    font-size:50px;
   
 
    }

input{font-size:140%;padding:5px; background-color:#fff; border:1px solid #000;}

/**********input*/
input {
   border:0;   
   padding: 0px;
   background: rgba(255,255,255,0.5);
   margin: 0px 0px 0px 0px;
}
input[type=text] {
 -webkit-appearance: none;
width: 80%;
padding:7px;
  
}
input[type=range] {
 -webkit-appearance: none;
  width: 100%;

 
 
}

input[type=range]::-webkit-slider-runnable-track {
  width: 95%;
  height: 2px;
  cursor: pointer; 
  background: #ddd;
  
}


input[type=range]::-webkit-slider-thumb {
  height: 16px;
  width: 6px;
  background: #FFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
/**********  input*/

label {
	/*width:20%;float:left;*/  
	display:block;
	
	margin:5px 0;
	padding:0;
}	

label:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}


.vr{ padding:0; font-size:100%;}

/*************************** HAMBURGER	*/
.hamburger {
flex: none  ; 
	z-index:100;
	margin-top:20px;
	float:right;
	padding:0px; 
	border:0px solid;
	background-color:rgba(0,0,0,0.0)
	}
	
.hamburger span{  
		margin:5px 10px; 		 
		background-color: rgba(255,255,255,0.0); 
		text-transform:uppercase;
		font-weight:700;
		font-size:12px;
		}
.hamburger span:last-child{margin:5px 0 5px 10px; 
}




/*************************** HAMBURGER */

.close{ 
	float:right;
	margin-right:5%;
	margin-top:10px;
	font-weight:500;
	/*margin:20px 20px 40px 80%;*/
	}	


.innerbox{padding:10px 0; border:0px solid rgba(0,0,0,0.15); margin-bottom:5px; width:100%; }


.innerbox:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}


hr {
    border: 0;
    height: 0px;
    background: rgba(0,0,0,0.0);
    
}


.box{
	float:left;
	padding:0px; 
	margin:	10px 20px 10px 0; 
	border-right:0px solid rgba(0,0,0,0.15);

}

.tools{	
	top:10px;
	right:10px;
	width:300px;
	background-color:rgba(255,255,255,1.0);
}
.step{float:left; width:30%;margin:1%;}
.step h3{ font-size:14px; font-weight:600;}
.step p{ font-size:18px; font-weight:300;}
/****************************/
.upload{
	
	width:80%;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	border:0px solid;

	}
.upload:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.borderTop{border-top:1px solid;}

.fdd{
	width:100%;
	position:absolute;
	top:180px;
	height:80%;
	
	}
	
.col{float:left;}
/****************************/
.sidepanel{ 

	display:none;
	position:fixed;
	width:400px;	
	z-index:10;
	bottom:50px;
	right:10%;

	background-color:rgba(0,0,0,0.8);
	color:rgba(255,255,255,0.95);}
	
/****************************/

/****************************/
.footer{ 
	
	position:fixed;
	width:80%;
	height:50px;	
	
	bottom:50px;
	right:10%;
	border-bottom:1px solid;
	border-color:rgba(0,0,0,0.9);
	color:rgba(0,0,0,0.95);
	background-color:rgba(255,255,255,0.9);
	}
	
	
/****************************/
.horpanel{ 
	float:left;
	padding:0 3% 0 3%;
	display:none;
	height:400px;	
	width:100%;
	background-color:rgba(0,0,0,0.8);
	color:rgba(255,255,255,0.95);
	}

.horpanel h3{ color:rgba(255,255,255,0.95);}


/*//------------ menu*/
.nav {
	/*float:left;	*/ 		
	width:90%;
	padding:5px 0;
	
	margin-left:auto;
	margin-right:auto;
	margin-bottom:80px;
	margin-top:0;
	text-transform:uppercase;	
	font-size:12px;
	font-weight:normal;
	min-height:400px
	overflow-x: hidden;
	overflow-y: auto;

	}
.sidepanel hr {
    border: 0;
    height: 1px;
    background: rgba(0,0,0,0.55);
    
}

	
.nav li{ 
	list-style:none;	
	border-top:1px solid;
	border-color:rgba(255,255,255,0.25);	
	margin:0 ;
	padding:5px 0 20px 0;
	}
	
.nav li:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
	
	
.nav li:first-child{	 }

	
.nav a:visited, .nav  a:active, .nav  a:link{	
		text-decoration:none; 		
		color:#fff;  
		}
		
.nav  a:hover{
 		color:#000; 
 		background-color:#fff;
		}
		
.nav a:link.home-anc, a:visited.home-anc  { 
			/*color:#d61d00;*/
			color:#ff;
		
		} 
.nav a:link.profile-anc, a:visited.profile-anc  { 
	 /*color:#008000; */
						color:#ff;

		
		} 
.nav a:link.persona-anc, a:visited.persona-anc  { 
		/*color:#d1008b; */
			color:#fff;
		
		} 
.nav a:link.report-anc, a:visited.report-anc  { 
		/*color:#8f1ab6; */
			color:#fff;
		
		} 
.nav ul a.here:visited {
		color:#fff;
		
		}
		
h3.navheader {
	/*float:left;	*/	
	 
		
	margin-left:auto;
	margin-right:auto;
	margin-top:70px;
	width:90%;
	text-transform:uppercase;	
	font-size:16px;
	font-weight:normal;
	color:#FFF;
	
	}


/*//------------Simple horizontal menu, alternative to tabs*/


	
#profileContainer{

	}


.profile{	
	float:left;	
	min-width:270px;
	width:22%;
	margin:	0 2% 0 0; 
	overflow:hidden; 
	padding:5px 10px 5px 0px;	
	color:#FFF;	
	text-align:left;
	border-bottom:1px solid #999;
	
	 
	
}

.profile:hover {
background-color:rgba(0, 0, 0,0.3); 
}

/*.profile h3,span{
		white-space:nowrap; 
		overflow:hidden;
		text-overflow:ellipsis;		
		padding:5px;
	 cursor:pointer;
	 font-size:18px;
	margin:0px;
	
	
	}*/
	
.profile span{ float:right;}
.profile h3{ float:left; width:50%; color:#FFF; font-weight:500;}
.profile  h3::first-letter{ text-transform: uppercase; padding:0px; }




	
#taskDisplay{margin:0px;}









.table-wrapper{float:left; }



/*tables */

table {}



	.data-table{
	color:#666;
	font-size:12px;
	text-transform:uppercase;
	font-variant:small-caps;

	padding:0px; 
	margin:0;
	border-spacing: 8px;
    border-collapse: separate;
	}
	
.data-table tr{
	
	}
	.data-table tr:hover{
		background-color:#FF0;
	}
	.data-table td{
		padding:2px ; margin:0px; 	
	}

.data-table thead tr:hover{background-color:#FFF;}
.data-table td.th{	
	
	}
.data-table td.th:hover{background-color:#dce;}


td.data-group {	 
	
	
	}
	
td.data-label { 
	 text-align:left; padding-right:10px;
	 border:0px solid #F90;
	
	
	}
td.data-value { 
	height:15px;	
	width:45px; 	
	text-align:center;
	color:#FFF;
	border-radius: 2px;
    -moz-border-radius: 2px;
   font-size:10px;
}



/*
.category-table-wrap{
	/*max-height: 1020px;*/ 	
/*	width:100%;
	overflow: hidden;
	overflow-y: auto;
	padding-bottom:30px;
	}

	.category-table{
	width:100%;	
	border-collapse: collapse;
	padding:0; 
	margin-top:0px;
	margin-bottom:20px;
	font-size:90%;
	color:rgba(0,0,0,0.5);
	
	
	
	
	}
	.category-table th{text-align:left; height:50px;padding:10px 0px 10px 0px; color:#000; font-weight:300;font-size:18px;}
	.category-table  tbody tr{
	border-top:1px solid #ddd;
	}
	.category-table tr:hover{
		background-color:#FF0;
	}
	.category-table td{
		padding:15px 0px 15px 0px; margin:0px; font-weight:300; 
	}
.category-table thead {background-color:rgba(255,255,255,0.5);}
.category-table tbody {background-color:rgba(255,255,255,1.0);}
.category-table thead tr:hover{background-color:rgba(255,255,255,0.5);}
.category-table td.th{	
	
	}
.category-table td.th:hover{background-color:#dce;}

.category-table td.mar{ width:5%}
td.data-group {	 
	
	
	}


.category-table td.blank{width:15%}

*/




.wrap {				
		
		min-width:600px;
		margin:0 ;		
		border-bottom:0px solid #999; 
		
	}
	
.wrap:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}


 
.panel {
	float:left;
	padding:0  ;
	margin:0;
	clear: both;
	padding: 0 3% 0 3%;
	
	
}

.panel:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}



	
/**************Overrides**************/	
.full{width:94%;}
.left{float:left}

.large{font-size:22px;}
.border{border:1px solid rgba(0,0,0,0.15);}

.border-bottom{border-bottom:1px solid rgba(0,0,0,0.15);}

.personaTicker{margin:auto; border-bottom:0px solid rgba(0,0,0,0.15); max-width:1600px;}	

.personaTicker:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}


.pseudo{ cursor:pointer; }
.send {padding:10px;   margin: 0; color:#FFF; text-align:center; background-color:#000; cursor:pointer;}
.send:hover{background-color:#3fbfe8}

/**************Colours**************/
.cyan{color:#3fbfe8;}
.orange{background-color:#3fbfe8;}
.white{background-color:#FFF;}
.bluegray{/*background-color:#EBEEF0;*/}
.yellow{background-color:#EBEEF0;}
.whiteFG{color:#FFF;}


/**************Widths**************/
.F4X{ width:30%; min-width:400px; }
.F2X{ width:50%; min-width:400px; border:0px solid #000;}

.F8X{ width:800px; }


/**************Adjustments**************/
.marg10{margin:10px 20px 10px 0;}

.pad{ padding-bottom:4%;}


/**************Adjustments**************/

.covar-table{ font-size:8px;}		

.covar-table td{padding:0px;  }	
	
.covar-table td span{color:#999;position:relative;padding:0px;}	
.covar-table td:hover { text-overflow: inherit;   overflow: visible;	}

.covar-table span:hover {z-index:1000;padding:0; border:1px solid #BBB;  }
	
	
td.covar-label {   text-align:right; padding:0px; border:0px solid #F90;	white-space: nowrap;  text-overflow:ellipsis;overflow: hidden;  
	display: inline-block; height:10px;
	width:10px; 	
	}
td.covar-value { 	
	height:10px;
	width:10px; 	
	
	
}






.snippet{
width:100px;
float:left;
border:0px solid;
color:rgba(0,0,0,0.9);
background-color:rgba(255,255,255,0.9);
border-left:5px solid #000;
margin:0% 2% 0% 0;
padding:0% 1%;

}
.snippet p {
text-align:center;

margin:0;
}


.snippet:nth-child(odd) {margin-left:0; margin-right:0; }

.small{
text-transform:uppercase;
border-bottom:0.0px solid;
font-size:0.7rem;
}
.big{

font-size:1.5rem;
}
	
	
input[type=text].copy-svg{max-width:1400px; display:block; font-size:12px; margin:auto; border:0px solid; }

.pathvis{position:absolute; top:0; width:100%; height:100%;  z-index:0;}
.meta-data{ position:absolute;left:0;bottom:10px; text-transform:uppercase; border:0px solid; font-size:12px; }	

@media screen and (max-width: 1200px) {
.w32{width:45%;}
.width{width:45%}
.profile{		
	/*width:45%;*/ 	
	 
	
}


}


@media screen and (max-width: 800px) {
.width{width:95%;}
.profile{		
	/*width:95%; */		
}



/**********************/	
	




}


.proxy{float:left; font-size:80%; padding:2px;margin:2px;background-color: rgba(205,205,0,0.5); width:auto;}








@media (max-width: 600px) { html, body { font-size: 18px; } }
@media (max-width: 400px) { html, body { font-size: 16px; } }

#map-canvas {
width:100%;
height: 400px;

}


.container {
max-width: 1200px;
min-width: 600px;
margin: 0 auto 0 auto;
border-bottom: 0px solid #999;
}