.js-plotly-plot .modebar {left: 0%;z-index: 10}
.js-plotly-plot .modebar-btn { color: white; transform: scale(1.5);}

/* SYSTEM CLASSES */
body {background-color: rgb(22, 19, 49); font-family: 'Arial', 'Times New Roman', Times, serif; color:lightblue;}
div {display: inline-block; }
label { color: lightblue; font-size: 1rem}
button {cursor:pointer}
sup, sub { vertical-align: 0; position: relative;}
sup {bottom: 1ex;}
sub {top: 0.8ex;}
p {line-height:140%; font-size:20px; display: block; color: lightblue  }
.cEq_norm {font-family:Consolas, Courier New, monospace; font-size:14pt; white-space: normal;} /* Equations */
.cEq_small {font-family:Consolas, Courier New, monospace; font-size:12pt; white-space:normal} /* Equations */
img {  display: block;  margin-left: auto;  margin-right: auto;  max-width: 100%;  height: auto;}
html {font-size: 16px}
i {color: white}
mi {font-size:14pT; padding-top: 5px; padding-bottom: 5px} 
mfrac {font-size:14pt; font-size:14pt}
h1 {font-weight:bold; font-size: 1.3rem; font-family: 'Arial', 'Times New Roman', Times, serif}
h2 {font-weight:bold; font-size: 1.2rem; color: cornflowerblue; font-family: 'Arial', 'Times New Roman', Times, serif}
h3 {font-weight:bold; font-size: 1.1rem; color: cornflowerblue; font-family: 'Arial', 'Times New Roman', Times, serif; text-decoration-line: underline;}
h4 {font-weight:bold; font-size: 1.2rem; color: cornflowerblue; font-family: 'Arial', 'Times New Roman', Times, serif; margin-bottom: 0px}
.highlight {color: white}
span {white-space: pre;}

/* TABLES AND LISTS */
li {font-size: 20px; margin: 5px; color: lightblue} /* bullet list */
th {background-color:blue; color: lightblue; text-align: center;} /* table header */
tr {text-align: center}
table {margin-left: auto; margin-right: auto; width: 80%; table-layout: fixed}

/* INPUTS */
input[type="text"] {color: white; background-color: red;} 
input[type="radio"] {transform: scale(2); margin-right: 15px ; margin-top: 10px; accent-color: blue; padding:5px }
input[type="number"] { 
  width: 70px; height: 21px; margin: 2px; margin-right: 10px; cursor:pointer;
  font-size: 1.1rem; font-weight:bold; color: blue; text-align: center; 
  background-color: white; border:  1px solid #555;  outline: none; border-radius: 5px;   }
input[readonly] {background-color: transparent; color: lightskyblue; }

/******************************************* WINDOWS *********************************/
.cWin_LessonContainer { position: relative; left: 0px; top: 0px;width: 650px;  min-width:400px; overflow-y: scroll; margin-top: 0.0%}
.cWin_Lesson {
	position: relative; left: 0px; top:0px; padding: 2%; margin-right: 1%;
	border: 2px solid blue; box-shadow: 0 0 10px blue; border-radius: 10px; 
	font-size: 1.0rem; }
.cWin_SimulatorContainer { position: relative;  left: 10px; top: 0px; min-width: 1220px; min-height: 1000px; margin: 0.0%; overflow-x: auto; overflow-y: scroll;}
.cWin_Simulator { position: relative; width: 100%; height: 930px;}

.cWin_Fp {    
	position: absolute; width: 18%; padding: 0.5%; margin-top: 0.0%; 	
	border: 2px solid blue; box-shadow: 0 0 10px blue; border-radius: 10px;
	font-family: Arial; font-size: 1rem; color: lightblue;	}
 
.cWin_Boiler_Toolbar {position: absolute; left: 5%; top: 43.0%; width: 100%; height: 5%;text-align: center}	
.cWin_TrendBoiler {position: absolute; left: 20.3%; width:78%; height: 100%; margin-top: 0.0% }

	
.cWin_Boiler {
	position: absolute; top: 47.5%; left: 0%; width: 100%;  height: 50%; visibility: visible;
	border: 2px solid blue;  box-shadow: 0 0 10px blue; border-radius: 10px;
	font-family: Arial; color: lightblue}

.cWin_Tune {
	position: absolute; left: 0%; top: 47.5%; width: 100%; height: 52%; padding-top: 2px; visibility: hidden;
	border: 2px solid blue;  box-shadow: 0 0 10px blue; border-radius: 10px;
	font-size: 1rem; color: lightblue;	}

.cWin_ExtSetup { 
	position: relative; width: 5%; height: 5%; ; left:5%; padding-top: 1%; display: none;
	border: 2px solid blue;  box-shadow: 0 0 10px blue; border-radius: 10px;
	font-size: 1.0rem; color: lightblue;	}
.cWin_Hidden {
	position: absolute; top: 1%; width: 5%; height:5%; ; left:1%; padding-top: 1%; visibility: hidden;
	border: 2px solid blue;  box-shadow: 0 0 10px blue; border-radius: 10px;
	font-size: 1rem; color: lightblue;	}

.cWin_FF {
	position: absolute; top: 50%; width: 100%; height: 48%; left:0%; padding-top: 1%; visibility: hidden;
	border: 2px solid blue;  box-shadow: 0 0 10px blue; border-radius: 10px;
	font-size: 1.0rem; color: lightblue;	}

.cWin_Debug {
	position: relative; width: 95%; height: 60px; padding: 4px;margin-top: 10px;
	background-color: magenta; border: 2px solid black;  box-shadow: 0 0 10px grey; border-radius: 10px;
	color: white;  font-size:1rem;}

.cGroup_Box { width: 300px; border:  1px solid #555;  outline: none; border-radius: 5px; padding:10px; }

/* TREND */
/******************************************* TREND *********************************/
.cWin_Trend {     
	position: absolute; left: 0%; height: 42%; width: 100%;
	border: 2px solid blue; box-shadow: 0 0 10px blue; border-radius: 10px; }
.cPlotlyTrend { position: absolute; left: 7%; top: 0%; height: 100%; width: 93%;}
.cTrend_Toolbar { position: absolute; left: 1%; top:5%; width: 5.5%; height: 85%;	background-color: transparent; z-index: 10}
.cLegend {z-index: 3; position: relative; top: 0%; padding-bottom: 15%;}
.cTb {height: 7%; width:100%; margin: 3%; color: black;  font-size: 1.0rem; border-color:lightblue; border-radius: 5px;  cursor: pointer}

/******************************************* FACEPLATE *********************************/
.cFp_Modes {display:flex;  justify-content: center;  padding: 5px;}
.cFp_Pb {position: relative;  width: 20%; height: 20%; font-size:22px; margin:3px; color: lightblue; background-color: darkblue;border-color:lightblue; border-style:outset;border-radius: 5px; cursor: pointer}
.cFp_Pb:active {border-style:outset; top:2px; left: 2px; color: darkblue; background-color: white  }
.cFp_PbOn { background-color: white; color: black; border-style:inset;  font-size:22px; border-color:lightgrey; border-radius: 5px; margin:3px; cursor: pointer }
.cFp_PbOff { background-color: darkblue; color: lightblue; border-style:outset;  font-size:22px; border-color:lightblue; border-radius: 5px; margin:3px; cursor: pointer }
.cFp_Header {width:95%; background-color: darkblue; width: auto; color: lightblue; border-color: darkgrey; font-size: 1.1rem;; font-weight:bold ;  text-align: center; padding: 3px; margin-top:10px; margin-bottom:5px ; display: block; border: 1px solid; border-radius: 5px; }
.cFp_Desc {font-size: 1rem; font-weight:bold; color: cornflowerblue; text-align: center; padding:2px; display: flex;  justify-content: center}
.cFp_Range {font-size:1.1rem; font-weight:bold; color: lightskyblue; text-align: center; padding:2px; display: flex;  justify-content: center}
.cFp_combo {width: 90px; font-size: 14pt; color: blue; margin-right: 7px}

/******************************************* BOILER *********************************/
.cImg_Boiler {z-index: 0; width: 99%; height: 99%;  position: absolute; top: 50%; left: 49%; transform: translate(-50%, -50%) }
.cImg_Flame_Bg { position: absolute; top: 77.5%; left: 40%; width: 20%; height: 8.5%; background-color: transparent;}
.cImg_Flame {z-index: 1; position: relative; top: 1px; left:47% ; object-fit: fill; height: 99% ;margin: 0 0;}
.cLevel_Bg {position:absolute; top: 46%; left: 51%; width:3%; height: 25%;background-color: black; }
.cLevel {position: absolute; bottom: 0 ;height:40%; width:100%; background-color: rgb(0,122,204); }
.cTagA {z-index: 2; width:10%; height:20%; padding: 1px; ; text-align: center; cursor: pointer;}
.cTagB { position: relative; width:100%; height:47%; background-color: #989ac2; border-radius: 5px; border: 3px solid  #7276c0;}
.cTagC { position: relative; width: 6%; height:7.2%; background-color: #989ac2; border-radius: 5px; border: 3px solid #7276c0; text-align: center;}
.cSAFR { z-index: 10;position: relative; top: 10%; left: 1%; width:8%; height:14%; text-align:center; font-size: 1rem; font-weight:bold;  color:blue; background-color: #989ac2; border-radius: 5px; border: 3px solid #7276c0; padding:3px}
.cTrip {position: absolute; font-weight:bold; font-size: 1.6rem; font-family: 'Arial', 'Times New Roman', Times, serif; text-align: center;
	top: 10%; left: 55%; width: 14%;  height: 12%; visibility: visible;
	background-color: black; border: 8px solid red;  box-shadow: 0 0 10px red; border-radius: 10px;
	color: yellow
}
.cPv {width: 100%; text-align: center; color: blue;  font-weight:bold; font-size: 1rem;  }
.cHcA {z-index: 2; width:10%; height:10%; padding: 1px; ; text-align: center; cursor: pointer; }
.cHcB { position: relative; width:80%; height:100%; background-color: #989ac2; border-radius: 5px; border: 2px solid blue;} 
.cValveHalo {z-index: 12; width:50%; height:60%; padding: 1px; border: 2px solid white ;border-radius: 5px;  text-align: center; cursor: pointer; }

.cTag_Sp {color: rgb(2, 99, 2); font-weight:bold; font-size: 1.0rem;;display:block }
.cTag_Pv {color: blue;  font-weight:bold; font-size: 1.5rem; display:block;}
.cTag_Op {color: white; font-weight:bold; font-size: 0.9rem; display:block }
.cTag_Eu {color: blue; font-weight:bold; font-size: 0.9rem; display:block }
.cTagC_Eu {color: blue; font-weight:bold; font-size: 0.9rem; display:block }
.cLoSel1 {font-size: 1.8rem;position:absolute; left:13.0%; top:29.0%; color: grey}
.cLoSel2 {font-size: 1.8rem;position:absolute; left:15.9%; top:30.5%; color: yellow}
.cHiSel1 {font-size: 1.8rem;position:absolute; left:28.0%; top:29.0%; color: grey}
.cHiSel2 {font-size: 1.8rem;position:absolute; left:25.3%; top:30.5%; color: yellow}


#o31Elem_div {position:absolute; left: 47%; top: 32.5%; width:7%; height:8%; 
	font-size: 0.8rem; color:grey; 
	border-radius: 5px; border: 1px solid grey; padding:2px}

/******************************************* TAGS (LOOPS) *********************************/
#oTagA01 {position:absolute; left:74.5%; top: 60.9%;}  	/* WATER */
#oTagA02 {position:absolute; left:75.0%; top: 20.4%;} 	/* STEAM */
#oTagA03 {position:absolute; left:54.2%; top: 49.6%} 	/* LEVEL */
#oTagA04 {position:absolute; left:15.4%; top: 02.9%;} 	/* PRESS */
#oTagA05 {position:absolute; left:88.5%; top: 54.4%;} 	/* PH */
#oTagA06 {position:absolute; left:07.2%; top: 42.2%;} 	/* GAS */
#oTagA07 {position:absolute; left:24.4%; top: 42.2%;} 	/* AIR */
#oTagA08 {position:absolute; left:34.0%; top: 25.4%;} 	/* O2 */
#oTagA09 {position:absolute; left:08.2%; top: 70.1%;} 	/* Gas HC */
#oTagA10 {position:absolute; left:75.1%; top: 80.0%;} 	/* Water FV */
#oTagA11 {position:absolute; left:75.1%; top: 39.5%;} 	/* Steam FV */
#oTagA12 {position:absolute; left:07.6%; top: 84.6%;} 	/* Gas FV */

#oDelay     	{position:absolute; left: 50.0%; top: 01.1%;} 	/* Delay */
#oGainSched 	{position:absolute; left: 50.0%; top: 01.1%;} 	/* Delay */
#oGasFlowDiv	{position:absolute; left: 01.3%; top: 87.0%;} 	/* Gas Flow */
#oAirFlowDiv	{position:absolute; left: 36.1%; top: 69.2%;}	/* Air Flow */
#oGasOpDiv  	{position:absolute; left: 03.0%; top: 86.0%;} 	/* Gas Flow */
#oTempDiv  		{position:absolute; left: 60.0%; top: 35.5%;} 	/* Steam Temp*/

.cFF_Circles {top: 0%; left: 0%}
.cFF_Circle {width: 40px; height: 40px; background-color: transparent; border: 5px solid red; border-radius: 50%; 	opacity: 0.5;	position: relative; z-index: 10}
#oFF_Circle1 {position: absolute; left:25.7%; top:5.9%;}
#oFF_Circle2 {position: absolute; left:52.3%; top:45.5%;}
#oFF_Circle3 {position: absolute; left:84.3%; top:57.8%;}

/******************************************* LESSONS *********************************/
.cLessonTop {position: relative; width:100%; height: 50px; padding: 2px; color: black }
.cLessonPb {position: relative;  width: 50px; height: 35px; margin:3px; color: lightblue; background-color: darkblue;border-color:lightblue; border-style:outset;border-radius: 5px; cursor: pointer}
.cLessonPb:active {border-style:outset; top:2px; left: 2px; color: darkblue; background-color: white  }
.cLessonBody {position: relative; width:100%; padding: 2px; color: white }
.cLessonBtm {position: relative;  width:100%; height: 40px;  padding: 2px; color: black }
.cLessonLabel { color: lightblue; font-size: 18px}

/* COLUMNS */
.cCol2_1 {position: relative; height: 100%; width: 50%; left: 1%; top: 0%; padding-left: 1%;}
.cCol2_2 {position: relative; height: 100%; width: 50%; left: 0%; top: 0%; padding-left: 1%;}

.cCol3_1 {position: absolute; width: 33%; left: 0%;  top: 7%; padding: 0.5%}
.cCol3_2 {position: absolute; width: 33%; left: 33%; top: 7%; padding: 0.5%}
.cCol3_3 {position: absolute; width: 33%; left: 66%; top: 7%; padding: 0.5%}
.cCol_Hdr {
	height: 10%; width: 94%;  padding: 2px; margin-bottom: 10px; margin-top: 5px;  
	font-size: 1.1rem; font-weight:bold ; font-family: Times; color: white; text-align: center; cursor:pointer;
	background-color: darkblue; border: 1px solid lightblue; border-radius: 5px;
}

/******************************************* GENERAL *********************************/
.cCheckbox {width: 22px; height: 22px; appearance: none; background-color: white; border: 2px solid grey; cursor: pointer; margin-right:10px; margin-bottom:5px; margin-top:5px;}
.cCheckbox:checked {background-color: blue; color: white;  border: 2px solid white}
.cCheckbox::before {content: '✔'; color: white; font-size: 1.0rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}

.cCbPbDiv {display: flex; align-items: center;}
.cCbPb {appearance: none; width: 22px; height: 22px; color: lightblue; background-color: darkblue; border: 2px outset lightblue; border-radius: 5px; cursor: pointer; margin-right:14px; margin-bottom:5px; margin-top:5px;}
.cCbPb:checked {background-color: white; color: transparent;}
.cCbPb:checked::after {content: '✔'; font-size: 16px; color: transparent; position: absolute; z-index: 1;}

.cPb {height: 30px; width:100px; margin: 5px;  font-size: 1.1rem; border-color:lightblue; border-radius: 5px;  cursor: pointer}
.cOn  {background-color: white;    color: black;  border-style:inset;}
.cOff {background-color: darkblue; color: lightblue;  border-style:outset;}
.cPb_Load {
	width: 80px; height: 30px; margin: 3px;  margin-right: 8px;
	font-size: 1.0rem; text-align: center; color: lightblue; cursor: pointer;
	background-color: darkblue; color: white; border-color:lightgrey; border-style:outset; border-radius: 5px;}
.cPb_Load:active {border-style:outset; top:2px; left: 2px; color: darkblue; background-color: white  }
.cPb_Caution {
	height: 1.0rem; width:75px; background-color: red; font-size: 12px; font-weight:bold; color: white; 
	border-color:lightgrey; border-style:outset;border-radius: 5px; cursor: pointer}

.cSpeedSlider { accent-color:blue; width:95%;}
.cPb_Submit {position: relative; font-size: 1.0rem; height: 28px; margin-top:10px; color: black; background-color: yellow;border-color:lightblue; border-style:outset;border-radius: 5px; cursor: pointer}
.cPb_Quiz   {position: relative; font-size: 1.0rem; height: 28px; margin-top:10px; color: lightblue; background-color: darkblue;border-color:lightblue; border-style:outset;border-radius: 5px; cursor: pointer}

/* HAMBURGER MENU */
.hb_img {position: relative; transition: transform 0.5s; /* add transition */ cursor: pointer; left: 250px }
.hb_img:hover { transform: scale(1.2); /* scale up on hover */ }

[Ttip]:hover {
	position: relative;
}
[Ttip]:hover::before {
	all: initial;
	display: inline-block;
	border-radius: 5px;
	padding: 10px;
	background-color: white;
	content: attr(Ttip);
	color: black;
	position: absolute;
	bottom: 100%;
	width: 80px;
	left: 50%;
	transform: translate(-50%, 0);
	margin-bottom: 15px;
	text-align: center;
	font-size: 1.0rem;
	z-index: 999;
}
  /* This creates the little triangle */
[Ttip]:hover::after {
	all: initial;
	display: inline-block;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;		  
	border-top: 10px solid white;
	position: absolute;
	bottom: 100%;
	content: '';
	left: 50%;
	transform: translate(-50%, 0);
	margin-bottom: 5px;
}