/*
	TioX a set of Animations for Operations Management
    Copyright (C) 2020  Gregory Dobson
	gregory.c.dobson@gmail.com

    GPL-3.0-or-later
	This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/		


:root {
  	--fontColor: #383838;
	--borderColor: rgb(122, 141, 208);
	
	--colorBlue: rgb(0,81,178);
	--colorYellow: rgb(240,228,66);
	--colorOrangy: rgb(213,56,0);
	--colorPurply: rgb(204,121,167);
	font-family: "Arial";
	font-size: 1.2vw;
}

.wrapper2by1 {
	box-sizing:border-box;
	position: relative;
	width: 100%;
	height: 50vw;
}
#topofpage {
		font-size: 15vh;
		color: #1244ea;
		text-align: center;
		padding: 2vh 2vh 2vh 2vw;
	}
A {
    text-decoration:none;
}
.appLink{
	text-align: center;
	font-size: 5vh;
	height: 6vh;
/*	background-color: var(--borderColor);*/
	margin:  1vh auto  1vh auto;
	padding: 1vh;
	width: 60vh;
	color: var(--borderColor);
    cursor: pointer;
    text-underline-position: left;
}
.appLink:hover{
/*	background-color: blue;*/
	color:rgb(0, 172, 152);
}
.appLink:active{
    color: blue;
}
/*
.verticalCenter{
	padding: 0vh 2vh 0vh 2vh;
}
*/


/*************  Left Hand Side   **************/
.leftHandSideBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 66%;
	bottom: 0;
	
	border: var(--borderColor) solid;
	border-width: .5vw 1px;
	
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items:stretch;
}

/********************************************/
/*********  Left hand side boxes  ***********/
.stageWrapper {
	flex: 0 0 41%; 
	border-bottom:  solid  var(--borderColor) .5vw;
	
}
.facStageWrapper{
    flex: 0 0 65%;
	border-bottom:  solid  var(--borderColor) .5vw;
}
.pairStageWrapper{
    flex: 0 0 65%;
    width: 100%;
    height: 60%;
    border-bottom:  solid  var(--borderColor) .5vw;
/*     border: solid green;*/
}
.pairStageLeft{
    position: absolute;
    top: 0;
    left: 0;
    width: 47%;
    height: 65%;
    border-right: solid  var(--borderColor) 1px;
/*    border: solid red;*/
}
.pairStageRight{
    position: absolute;
    top: 0;
    right: 0;
    width: 47%;
    height: 65%;
/*    border: solid blue;*/
    border-left: solid  var(--borderColor) 1px;
}
/*********  stage boxes  **********/
	.foreground {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 1;
	}
	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}
	.coverAnimation{
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--borderColor);
		opacity: 0%;
		width: 100%;
		height: 41%;
		transition:   opacity 1s ease-out;
		z-index: 2;
	}
    /*   different height for EOS 65% vs 41% for standard apps */
    #coverAnimationeos{
        height:65%;
    }
	.addOpacity{
		opacity: 95%;
	}

/*********  stats boxes  *************/
.statsWrapper{
	flex: 0 0 4%;
	border-bottom:  solid  var(--borderColor) .5vw;
	display: flex;
	flex-flow: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}

	.statDisplay {
		color: var(--fontColor);
        cursor:context-menu;
	}

.facDataWrapper{
/*
	position: absolute;
	bottom: 30%;
	left: 0;
	right: 0;
*/
	display: grid;
    grid-template-columns: 18% 12% 12% 12% 40%; 
    justify-content:end;
    border-bottom: solid var(--fontColor) 1px;
    padding: .5vw;
    
    flex: 1 1 30%;
	}
/*********  chart boxes  ************/
.chartWrapper {
	flex: 1 0 55%;
	
	display: flex;
	flex-flow: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}


	.chartTitle{
		flex: 0 10 7%;
		position: relative;
        margin: 1% 0 0 0;
		font-size: 1.5vw;
/*        border: solid purple*/
	}
	.chart{
		flex: 0 1 100%;  
		/* let it shrink to fill rest */
		position: relative;
		width: 100%;
        height: 100%;
/*        border: solid green;*/
	}
	.chartCanvas{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
/*        border: black solid*/
}
	
	.chartLegend{
		flex: 0 10 10%;
        position: relative;
        margin: 0% 0% 2% 0%;
        width: 80%;
/*        border: solid red;*/
	}
	.legitem {
		cursor: pointer;
        margin-right: 2vw;
/*        border: red solid*/
	}
/* four formats for legend box of dot and name */
    .crossOut{
        text-decoration-line: line-through;
        }
    .legendbox{
        display: flex;
        align-items:center;
        /*        border: solid red;*/
        font-size: 1.3vw;
        cursor: pointer;
        }
    .legendCircle{
            margin-right: .5vw;       
        }
    .legendText{
            
        }

.dualChartWrapper{
   flex: 1 1 0;
	
	display: grid;
    grid-template-columns: 18% 64% 18%; 
}
.dualChartTitle{
    margin: auto;
    font-size: 1.3vw;
}
.dualChart{
		position: relative;
		width: 100%;
	}
.dualChartCanvas{
    border: solid green;
}

.pairChartWrapper{
    flex: 0 0 35%;
	position: relative;
}
.pairChartTop{
    position: relative;
/*    border: solid 3px purple;*/
    height: 100%;
    width: 100%;    
    
}
.pairChartLegend{
        margin: 0% 0% 2% 0%;
    height: 10%;
        width: 80%;
        
	}
    .pairChartLeft{
        width: 100%;
        height: 100%;
        
    }
    .pairChartRight{
        width: 100%;
        height: 100%;
/*        border: solid green;*/
    }
        .pairChartTitle{
            margin: 1% 0 0 0;
            font-size: 1.2vw;
/*    border: solid red*/
        }
        .pairChart{
            position: relative;
            width: 100%;
            height: 100%;
/*            border: solid green;*/
        }
        .pairChartCanvas{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 0;
    /*        border: black solid*/
        }
	

.inputTime{
    display: inline;
    
}
.inputTime>span{
/*    display:inline;*/
}
.inputTime>input{
/*    display:inline;*/
    max-width: 8vw;
}

/*    ******  Right Hand Side  *******    */
.rightHandSideBox {
	position: absolute;
	top: 0;
	right: 0;
	width: 32%;
	bottom: 0;
	
	border: var(--borderColor) solid;
	border-width: .5vw 1px;
	
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content:space-between;
	align-items:stretch;
}
/*     Right hand side boxes  */	
.slidersWrapper{
	flex: 0 0 auto;/* create two columns of sliders */
	display: grid;
	grid-template-columns: 50% 50%;

}
.ropupto {
	min-height: 3vw;
	border-bottom: solid var(--fontColor) 1px;
}
.sliderBox{
	font-size: 1.2vw;
	padding: .5vw;
	border-bottom:  solid var(--fontColor) 1px;
}
.sliderBox:nth-child(odd) {
	border-right:  solid var(--fontColor) 1px;
}
.rowAroundEnd{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-end;
}
.rowBetweenCenter{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.rowAroundCenter{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.rowCenterCenter{
    display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content:center;
	align-items: center;
}
.columnAroundStart{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
}
.columnAroundCenter {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
/*    border: solid green;*/
}
.columnAroundStretch {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-around;
	align-items:stretch;
}
.columnBetweenCenter {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-between;
	align-items:center;
}
	
/*   within slider formats  */
	/*  spreadValues for #'s on scale and Input formats */

.spreadValues {
	margin: 0% 10% 0% 8%;
	width: 84%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
}
.center{
    text-align: center;
    
}

.spreadValues span {
	min-width: 1.5vw;
	text-align: center;
    
}
input[type=number]{
    width:2.7vw;
    height: 1.3vw;
    font-size: 1.3vw;
    vertical-align:baseline;
}
input[type=radio]{
    /* margin: 0vw .7vw 0vw 1.3vw; */
    cursor: pointer;
}
input[type=checkbox],
label {
	height: 1vw;
	cursor: pointer;
    
}
input[type=range] {
	-webkit-appearance: none;
/*	margin: .5vw;*/
	width: 80%;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 1vw;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #3346f8;
	background: #77beed;
	border-radius: .3vw;
}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #000000;
	height: 1vw;
	width: 1vw;
	border-radius: 2vw;
	background: #3347FF;
	cursor: grab;
	-webkit-appearance: none;
/*	margin-bottom:  1vw;*/
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #2497E3;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: .5vw;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #8C9FFF;
	background: #2497E3;
	border-radius: .3vw;
	border: .3vw solid #B3D4FF;
}
input[type=range]::-moz-range-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #2497E3;
	height: .9vw;
	width: .9vw;
	border-radius: .9vw;
	background: #3347FF;
	cursor: grab;
}
input[type=range]::-ms-track {
	width: 100%;
	height: .3vw;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	background: #2497E3;
	border: .3vw solid #B3D4FF;
	border-radius: 2px;
	box-shadow: 0px 0px 0px #8C9FFF;
}
input[type=range]::-ms-fill-upper {
	background: #2497E3;
	border: .3vw solid #B3D4FF;
	border-radius: .15vw;
	box-shadow: 0px 0px 0px #8C9FFF;
}
input[type=range]::-ms-thumb {
	margin-top: 1px;
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #2497E3;
	height: .9vw;
	width: .9vw;
	border-radius: .9vw;
	background: #3347FF;
	cursor: grab;
}
input[type=range]:focus::-ms-fill-lower {
	background: #2497E3;
}
input[type=range]:focus::-ms-fill-upper {
	background: #2497E3;
}
input.inputTime{
	padding: 0 0 0 0;
/*	line-height: 2vw;*/
/*	height: .5vw;*/
	font-size: 1.1vw;
}
input[type="radio"]{
	height: 1vw;
	width: 1vw;
}


.facepart{
	font-size: 1.2vw;
	line-height: 1.1vw;
	margin:auto;
    margin-left:0 ;
}
.faceRadio{
    font-size: 1.2vw;
	line-height: 1.1vw;
	margin: auto
}
.faceRange{
    font-size: 1.2vw;
	line-height: 1.1vw;
    margin-left: 1vw;
    width: 90%
/*	margin: auto*/
}

	
/*    **** special font for buttons    ****  
  for the play, pause, reset animation;
  add, delete, link, revert , edit scenarios; 
  done with edit buttons*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  
  color: rgb(34, 129, 118);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  	
}
.actButton{
	color: rgb(34, 129, 118);
	cursor: pointer;
}
.actButton:hover {
	color: rgb(0, 172, 152);
}
.actButton:active {
	color: blue;
}
.disButton{
	color: grey;
	cursor: default;
}
.revButton{
	background:rgb(34, 129, 118);
	color: white;
	cursor: pointer;
}
.revButton:hover{
	background: rgb(0, 172, 152);
	color: white;
}
.revButton:active{
	background: blue;
	color: white;
}

#linkMessage {
	position: absolute;
  border: red solid 3px;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
}

.font35vw{
	font-size: 3.5vw;  /* min(3.5vw, 7vh) */
}
.font15vw{
	font-size: 1.5vw;
	min-width: 1.5vw;
	padding: .2vw .5vw 0;
}


.actionBox{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-around;
	align-items:center;
}
	
	/* return to right hand side formats */
.scenariosWrapper{
	position: relative;
	flex: 0 0 auto;
	margin: auto;
	border: solid var(--borderColor) 1px; 
	width: 80%;
	
	display: flex;
	flex-flow: nowrap;
	flex-direction: column;
	
}
.scenariosPre{
	flex: 0 0 2vw;
}
.scenariosPost{
	flex: 0 1 10vw;
}
.scenariosTop {
	flex: 0 0 1.5vw;
	font-size: 1vw;
	color: var(--fontColor);
	font-weight: bold;
	border-bottom: solid var(--borderColor) 1px
}

.scenariosMid {
	overflow-y: auto;
	flex: 0 1 10vw;
	color: var(--fontColor);
	
}
#linkButton{
	position: relative;
}
@-webkit-keyframes linkFadingMessage {
  0%   {z-index:3;
	    opacity: 0%}
  30%  {z-index:3;
	  	opacity: 100%}
  70%  {z-index:3;
	  	opacity: 100%}
  99%  {z-index: 0;
	  	opacity: 0%}
}
@keyframes linkFadingMessage {
  0%   {z-index:3;
	    opacity: 0%}
  30%  {z-index:3;
	  	opacity: 100%}
  70%  {z-index:3;
	  	opacity: 100%}
  99%  {z-index: 0;
	  	opacity: 0%}
}

.linkMessage {
	position: absolute;
	display:block;
	opacity: 0%;
	cursor:pointer;
	top: 2vw;
	left: 2vw;
	right: 2vw;
	color: var(--fontColor);
	border: solid rgb(34, 129, 118);
	padding: 1vw;
	background: lightblue;
	z-index: 0;
}
.linkMessageTrigger{
	animation-name: linkFadingMessage;
	animation-duration: 4s;
}

.scenariosBot {
	flex: 0 0 1.5vw;
	width: 100%;
	bottom: 0px;
	border-top: solid var(--borderColor) 1px;
}
ul {
	margin: 0px;
	border: 0px;
	padding: 0px;
	position: relative;
	height: 100%;
	overflow: auto;
	
	
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-items:flex-start;	
}
li {
	position: relative;
	width: 96%;
	min-height: 1.8vw;
	font-size: 1.2vw;
	font-family: "Times New Roman";
	cursor: pointer;
	padding: .1vw 0px .1vw;
/*	border-bottom: grey 1px solid;*/
	margin-left: 1vw;
	list-style-type: none;
	transition: 0.2s;
	/* make the list items unselectable */
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	
	display: flex;
	align-items: center;
}
ul li.selected,
ul li.selected:hover{
	background: blue;
	color: #fff;
}

/* Darker background-color on hover */
ul li:hover,
button:hover {
	background: #a0a7f2;
	color: white;
}
button:active {
	background: blue;
}
.textInput {
	position: absolute;
	top: 0;
	left: -1%;
	display: block;
	box-sizing: border-box;
	height: 100%;
	width: 101%;
	font-size: 1vw;
	font-family: "Times New Roman";
	color: black;
	background-color: lightblue;
}

.displayNone{
	display:none
}