/*
Pallette
$dark-gray: #211F20;
$violet-dark: #D800FF;
$violet:#FC64A9;
$green: #00D59B;
$red: #FC7064;
*/




/*SVG styles*/
svg {
    font-family:Lato;
}

svg .graph-grid-lines {
    /*stroke:rgba(33, 31, 32,.15); */
    stroke:rgba(0, 128, 256, 0.15);
    stroke-width:1px;
}
svg .graph-grid-lines-axis {
    stroke:rgba(33, 31, 32,.15);
    stroke-width:3px;
}
svg .graph-grid-tick {
    stroke:rgba(0, 0, 0, 1.0);
    /*stroke-width:1px;*/
    stroke-width:3px;
}

svg  .graph-space-label {
    fill:#211F20;
    font-size:11px;    
}

svg .graph-line {
    stroke:#D800FF;
    stroke-width:4;
    fill:none;
}



/*
#SENTINEL button {
	display: block;
	margin: auto;
	border: 4px solid #000;
	font-size: 1.5em;
	padding: 0.5em;
	margin-bottom: 0.5em;
	width: 10em;
	border-radius: 1em;
	color: #FFF;
	background-color: #468;
}
*/

/*
#SENTINEL button:focus {
	border: 4px solid #fff;
}
*/


/*
	TAB GROUPS
*/

.has-tab-group-focus {
	background-color: rgba(255.0,255.0,0.0,0.25);
	border-radius: 0.25em;
}

.visibleTabCursor .has-tab-focus {
	outline: 2px dotted #FF0;
	outline-offset: 6px;
}

.tab-item:not(.active-tab-item) {
	opacity: 0.25;
}


/*
	PRESENTATION OF MAIN CONTENT
*/

#sky-background {	/* Background sky image. */
	zposition: absolute;
	left:0px;
	top:0px;
	width: 960px;
	height: 85px;
}

.soil-background {	/* Background soil image. */
	position: absolute;
	left:0px;
	bottom:0px;
	width: 960px;
	height: 470px;
}

#temp-layout {	/* Temp image for layout work. */
	position: absolute;
	left:0px;
	bottom:0px;
	width: 960px;
	height: 540px;
}

.graph-box,
.dots-box {	/* The graph areas */
	position: absolute;
	top: 200px;
}

.graph-box {
	outline: 2px solid #211F20;
}

.controller .dots-box {
	pointer-events: none;
}

.controller .dots-box circle {
	pointer-events: all;
}

.visibleTabCursor .graph-box.has-tab-focus,
.visibleTabCursor #soil-description-box.has-tab-focus {
	outline-color: #FF0;
	outline-offset: 2px;           
}

.visibleTabCursor #zoomer.has-tab-focus {
	outline-color: #FF0;
	outline-offset: -6px;           
}

#graph-box {
	overflow: hidden;
}

.graph-grid-label {
	
    font-family:'Lato', sans-serif;
	font-size: 10px;
}



@keyframes fade-in {
    0%{
      opacity:0;  
    }
    100%{
        opacity:1;
    }
    
}
@keyframes fade-in2 {
    0%{
      opacity:0;  
    }
    100%{
        opacity:1;
    }
    
}

.debug-links,
#FULLSCREEN {
    font-family: Lato, sans-serif;
    font-size:16px; 
    display:inline-flex;
    align-items: center;
    width:auto;
}

#FULLSCREEN-BUTTON,
.debug-links a,
.debug-links button {
    display:block;
    text-decoration:none;
    padding:4px 8px;
    border-radius:4px;
    border:0;
    font-size:16px;
    color:#fff;
    background:#211F20;
    margin:4px 5px;
}

/*
	Soil particle water animation
*/
.click-receiver * {
	pointer-events: none;
}

.click-receiver .graph-point {
	pointer-events: auto;
	
}

/*	----------------------------------------------- Exit Button */

#exit-button {
    position:absolute;
    top:10px;
    left:10px;
    z-index:0;
    width:85px;
    height:50px;
    padding:2px;
    background-color:#105CAA;
    cursor:pointer;
    transition:all .2s ease;
    transform-origin: 50% 50%;
    border: 3px solid transparent;
}
#exit-button:hover, #exit-button.has-tab-focus {
    background-color:#10508A;
    box-shadow: 0 0 50px rgba(255,255,155,1);
    transform:scale(1.05);
}
#exit-button.has-tab-focus { 
    outline-offset: 2px;
    border: 3px solid #EE0;
}
#exit-button:active {
     background-color:#10407A;
    transform:scale(.95);
}


#exit-button h1,
#exit-button a {
    display:block;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: auto;
    padding-left:10px;
    line-height: 0;
    text-indent: -10000px;
    background-repeat: no-repeat;
    background-image: url(../SVG/FlowTitleLarge.svg);
}
/*	----------------------------------------------- AXIS LABELS */

.axis-label {
	color: white;
	position: absolute;
    font-family: 'Lato', sans-serif;
	z-index: 1000;
	display: grid;
    letter-spacing: .06em;
	width: 332px;
	height: 30px;
	align-items: center;
	justify-items: center;
	font-size: 9pt;
}

#graph-0-domain-label {
	top: 276px;
	left: 20px;
}

#graph-0-range-label {
	transform: rotate(-90deg);
	top: 170px;
	left: 197px;
}

#graph-1-domain-label {
	top: 276px;
	right: 20px;
}

#graph-1-range-label {
	transform: rotate(-90deg);
	top: 170px;
	right: 199px;
}

#graph-2-domain-label {
	top: 500px;
	left: 20px;
}

#graph-2-range-label {
	transform: rotate(-90deg);
	top: 394px;
	left: 199px;
}

#graph-3-domain-label {
	top: 500px;
	right: 20px;
}

#graph-3-range-label {
	transform: rotate(-90deg);
	top: 394px;
	right: 197px;
}

#water-table-label {
	position: absolute;
	z-index: 1000;
	top: 250px;
	left: 352px;
	width: 256px;
	height: 30px;
}
#water-table-label svg {
    width:100%;
    max-height:100%;
    height:100%;
}

/*	----------------------------------------------- SOIL STEPPER CONTROL */

#soil-stepper-control {
/*	border: 1px solid rgba(0,0,0,1);*/
	z-index: 1000;
	top: 10px;
	height: 50px;

	/*	Centered */
	left: 230px;
	width: 500px;
	/*	Equal leading and trailing space to other items */
/*
	left: 126px;
	width: 716px;
*/

	position: absolute;
	background-color: #fff;
	background-color: rgba( 255,255,255, 0.9);
	display: grid;
	grid-template-columns: 1.5em 1fr 8fr 1.5em;
	align-items: stretch;
	justify-items: stretch;
	color: #222;
    transition:transform .5s ease;
	padding: 0px;
	grid-column-gap: 0px;
	border-radius: 2px;
}

#soil-label-display {
	font-size: 14pt;
    font-weight:800;
    font-style:italic;
    letter-spacing:.04em;
    margin-left:5px;
}

#soil-label-description {
	font-size: 10pt;
    font-weight:100;
    font-style:normal;
    letter-spacing:.04em;
    font-family: 'Barlow Semi Condensed', sans-serif;
    padding: 0px 10px;
    align-self: center;
}

#soil-stepper-control.has-tab-focus {
    outline-offset: 2px;
    transform:scale(1.05);
    box-shadow: 0 0 50px rgba(255,255,155,1);
}
.soil-stepper-button {
	background-color: #105CAA;
	color: #fff;
	margin: 0px;
	display: grid;
	align-items: center;
	justify-items: center;
    cursor:pointer;
}
.soil-stepper-button svg { 
    width:50%;
    fill:white;
}
.soil-stepper-button:hover {
	background-color: #10508A;
}
.soil-stepper-button:active {
	background-color: #10407A;
}

#soil-label-display {
	display: grid;
	font-weight: bold;
	align-items: center;
	justify-items: center;
}


/*	----------------------------------------------- ZOOMER */

#zoomer {
	position: absolute;
	width: 256px;
	height: 195px;
}


/*	----------------------------------------------- SOIL DESCRIPTION BOX */

#soil-description-box {
	border: 2px solid #000;
	z-index: 1000;
	top: 307px;
	left: 382px;
	width: 196px;
	min-height: 200px;
	position: absolute;
	background-color: #fff;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-items: center;
	color: #222;
	font-size: 10pt;
	line-height: 1.2;
}

#soil-description {
	padding: 10px;
}
#soil-description h3.description-heading {
    font-weight:bold;
    margin:1px 0;
}
#soil-description h4.description-subheading {
    font-weight:normal;
    margin:0;
    font-size:90%;
}
#soil-description ul {
    margin:2px 0 2px 0px;
    padding:0px;
    list-style: none
    }
#soil-description li {
    padding:0;
    margin-top:5px;
    text-indent:0; 
}
/*	----------------------------------------------- GRAPH DOTS */

.graph-dot-positioner {
	position: absolute;
	width: 20px;
	height: 20px;
}
.graph-dot {
	position: relative;
	left: -20px;
	top: -20px;
}

svg .graph-point {
    fill:#fff;
    stroke:#D800FF;
    stroke-width:2px;
    cursor:pointer;
    transition:all .3s ease;
    r:4px;
}

svg .graph-point:hover {
    r:6px;
}

svg .graph-point:active {
    r:3px;
}

svg .graph-point.current {
    fill:#FC64A9;
    stroke:#fff;
    r:8px;
    animation:circle-anim .5s ease-out;
    transform-origin:left;
}

@keyframes circle-anim {
    0%{
      r:3px;  
    fill:#Fff;
    }
    50%{
        
    stroke:#fff;
    }
    100%
    {
    r:8px; 
        
    fill:#FC64A9;
    }
    
}
/* ------------------------------GLOSSARY BUTTON ---*/
#glossary-button {
    display:flex;
    position:absolute;
    padding:5px;
    border-radius:2px;
    font-size:18px;
    letter-spacing:1px;
    justify-content: center;
    cursor:pointer;
    transition:all .3s ease-out;
    z-index:1;
    background-color: #105CAA;
    color: #fff;
    margin: 0px;
    align-items: center;
    cursor: pointer;
    right:10px;
    top:10px;
    left:auto;
    bottom:auto;
    height: 50px;
    
    border: 3px solid rgba(0,0,0,0);
} 

#glossary-button:hover, #glossary-button.has-tab-focus { 
    transform:scale(1.05);
    background-color: #10508A;
    
    box-shadow: 0 0 50px rgba(255,255,155,1);
}
#glossary-button.has-tab-focus {
    outline-offset: 2px;
    box-shadow: 0 0 50px rgba(255,255,155,1);
        
    border: 3px solid #EE0;
}
#glossary-button:active{ 
    transform:scale(.95);
    background-color: #10407A;
}