html, body{
	width: 100%;
	height: 100%;
	position: fixed;
	font-family: Arial, sans-serif;
	background-color: #EFEFEF;
	--numLanguage: attr("numberOffLanguages");
	overflow: scroll;
}

#allContainer{
	position: absolute;
	left: 50%;
	margin-left: -590px;
	max-width: 1180px;
	min-width: 1000px;
	height: 100%;
	display: block;
	border-left: 1px SOLID #DDDDDD;
	border-right: 1px SOLID #DDDDDD;
}
table{
	margin: 0px;
}
#topMenu{
	width: 100%;
	height: 55px;
	background-color: #DDDDDD;
	border-bottom: 1px SOLID #AAAAAA;
	margin-bottom: 0px;
}
#tabs{
	float: left;
	display: block;
	width: 110px;
	height: calc(100% - 20px);
	padding-top: 20px;
	text-align: center;
	
}
#tabs span{
	margin-bottom: 10px;
}
span.icon{
	margin-left: 15px;
	display: inline-block;
	width: auto;
	height: 55px;
	font-family: Calibri, sans-serif;
	line-height: 85px;
	
	background-repeat: no-repeat;
	background-size: contain;
	background-size: auto 35px;
	object-fit: contain;
	background-position: top; 
}
span.icon.right{
		float: right;
}
#workflow .meta{
	display: block;
	text-align: center;
}
#workflow span.icon{
	display: inline-block;
	margin: 15px;
	height: 100px;
	padding: 5px;
	background-size: auto 75px;
	line-height: 170px;
}
#workflow .icon:hover{
	background-color: transparent;
	outline: 0px SOLID #007800;
}
#workflow .icon.active{
	background-color: RGBA(0,140,0,0.2);
	outline: 1px SOLID #007800;
}
span.icon.active{
	background-color: RGBA(120,120,120,0.1);
	outline: 1px SOLID #007800;
}
span.icon:hover{
	background-color: RGBA(0,120,215,0.1);
	outline: 1px SOLID #0078D7;
	cursor: pointer;
}
span.more{
	height: 25px !important;
	width: 25px !important;
	margin: 0px !important;
	padding: 0px !important;
	margin-left: calc(100% - 25px - 15px) !important;
	background-image: url("images/more.svg");
	background-size: auto 25px !important;
}

#topMenu span.ward{
	background-image: url("images/stats.svg");
}
#topMenu span.scenario{
	background-image: url("images/scenario.svg");
}
#topMenu span.synth{
	background-image: url("images/orchestra.svg");
}
#topMenu span.mute{
	background-image: url("images/mute.svg");
}
#topMenu span.language{
	background-position: center 5px;
    background-size: 35px auto;
}	
#topMenu span.language.sv{
	background-image: url("images/lang/sv.svg");
}
#topMenu span.language.en{
	background-image: url("images/lang/en.svg");
}
#topMenu span.reload{
	background-image: url("images/reload.svg");
}
#topMenu span.mute.muted{
	background-image: url("images/muted.svg");
}
#topMenu span.sound{
	background-image: url("images/notes.svg");
}
#tabs span.limits{
	background-image: url("images/limits.svg");
}
#tabs span.workflow{
	background-image: url("images/workflow.svg");
}
#tabs span.reaction{
	background-image: url("images/reaction.svg");
}
#workflow span.pause{
	background-image: url("images/alarmpause.svg");
}
#workflow span.electrode{
	background-image: url("images/electrodes.svg");
}
#scenario{
	text-align: center;
	height: 100%;
}
#scenario .scenario{
	padding: 15px; 
	width: calc(100% - 50px);
	background-color: #FEFEFE;
	border: 1px SOLID #CCCCCC;
	margin: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 60px;
}
.playButton:before{
	position: absolute;
	top: 7px; 
	left: 7px;
	height: 40px;
	width: 40px;
	

	content: "";
	background-image: url("images/play.svg");
	background-size: 30px;
	background-repeat: no-repeat;
}
.playButton.playing:before{
	background-image: url("images/stop.svg");
}
#scenario .scenario .playButton{
	float: left;
	position: relative;
	display: inline-block;
	padding: 15px 30px 12px 60px;
	margin: 5px;
	width: auto;
	background-color: #DDDDDD;
	border: 1px SOLID #999999;
	cursor: pointer;
}
#scenario .scenario p:nth-child(-n+2){
	float: left;
	font-weight: bold;
}
#scenario .scenario > p:nth-last-child(-n+4){
	float: right;
	font-style: italic;
}
#scenario .scenario div{
	display: inline-block;
	width: 100%;
}
#scenario span.icon{
	display: inline-block;
	margin: 15px;
	width: auto;
	height: 100px;
	padding: 5px;
	background-size: auto 75px;
	line-height: 170px;
}
#scenario .scenario span.icon{
	position: relative;
	display: inline-block;
	margin: 15px;
	margin-left: 30px; 
	margin-right: 30px;
	height: 180px;
	padding: 5px;
	background-size: auto 150px;
	background-repeat: no-repeat;
	font-weight: bold;	
	object-fit: contain;
	background-position: top; 
	line-height: 300px;
}
#scenario .scenario span.icon p{
	position: absolute; 
	bottom: -20px;
	width: 100%;
	line-height: 30px;
}
#scenario .scenario span.soft{
	background-image: url("images/soft.svg");
}
#scenario .scenario span.pitch{
	background-image: url("images/pitch.svg");
}
#scenario .scenario span.timing{
	background-image: url("images/timing.svg");
}
#scenario span.inop{
		background-image: url("images/inop.svg");
}
#scenario span.yellow{
		background-image: url("images/yellow.svg");
}
#scenario span.red{
		background-image: url("images/red.svg");
}
#scenario span.audibility{
		background-image: url("images/audibility.svg");
}
#wave{
	position: relative;
	display: inline-block;
	width: calc(100% - 20px);
	height: 160px;
	margin: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #FFF;
	text-align: left;
	border: 1px SOLID #CCCCCC;
	box-sizing: border-box;
}
#wave span{
		position: relative;
		display: inline-block; 
		font-weight: bold; 
		font-size: small;
		color: #444444;
		z-index: 2;
}
#wave span.eq{
	 left: 5px;
}
#wave span.waveform{
	left: calc(20% - 20px);
}
#wave canvas{
	margin-top: 20px;
}
canvas{
	background-color: #FFFFFF;
	border: 1px SOLID #CCCCCC;
	box-sizing: border-box;
}
#eq{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 20%;
	height: calc(100% - 20px);
	z-index: 1;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
}
#waveform{
	position: absolute;
	top: 0px;
	left: 20%;
	width: 80%;
	height: calc(100% - 20px);
	border-right: 0px;
	border-bottom: 0px;
	
}
#lightbox{
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(6px);
	background-color: rgba(240, 240, 240, 0.5);
	z-index: 999;
}
#select{
	position: absolute;
	display: block;
	left: 50%;
	margin-left: -100px;
	top: 50%;
	margin-top: -130px;
	width: 200px;
	height: 260px;
	font-weight: bold;
	padding: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #FFFFFF;
	border: 1px SOLID #000;
}
#select span{
	font-weight: Normal;
	display: inline-block;
	background-color: #EEEEEE;
	border: 1px SOLID #AAAAAA;
	margin: 5px;
	margin-left: -10px;
	padding: 10px 20px 10px 20px;
	box-sizing: border-box;
	width: 100%;	
	cursor: pointer;
}
 .toggle {
      --width: 120px;
      --height: calc(var(--width) / 4);
	  
      position: relative;
	  margin-top: 12px;
	  margin-right: 12px;
	  margin-left: 18px;
	  float: right;
      display: inline-block;
      width: var(--width);
      height: var(--height);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      border-radius: var(--height);
      cursor: pointer;
    }

    .toggle input {
      display: none;
    }

    .toggle .slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--height);
      background-color: #FFC;
      transition: all 0.4s ease-in-out;
    }

    .toggle .slider::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(var(--height));
      height: calc(var(--height));
      border-radius: calc(var(--height) / 2);
      background-color: #fff;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      transition: all 0.4s ease-in-out;
    }

    .toggle input:checked+.slider {
      background-color: #2196F3;
    }

    .toggle input:checked+.slider::before {
      transform: translateX(calc(var(--width) - var(--height)));
    }

    .toggle .labels {
      position: absolute;
      top: 8px;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 12px;
      font-family: sans-serif;
      transition: all 0.4s ease-in-out;
    }

    .toggle .labels::after {
      content: attr(data-off);
      position: absolute;
      right: 5px;
      color: #4d4d4d;
      opacity: 1;
  
      transition: all 0.4s ease-in-out;
    }

    .toggle .labels::before {
      content: attr(data-on);
      position: absolute;
      left: 5px;
      color: #ffffff;
      opacity: 0;
     
      transition: all 0.4s ease-in-out;
    }

    .toggle input:checked~.labels::after {
      opacity: 0;
    }

    .toggle input:checked~.labels::before {
      opacity: 1;
    }
	
#synth{
	display: none;
}
#synth .container{
		margin-top: 25px;
}
#charts{
	display: block;
	grid-column: 2 / 3;
	grid-row: 1 / span 2;
	width: 100%;
	background-color: #EFEFEF;
	padding-left: 5px;
}
#charts table{
	margin-top: 30px;
	width: 100%;
	border-spacing: 0px;
	border: 1px SOLID #CCCCCC;
}
#charts table td:first-child{
	width: 90px;
}
#charts table tr:nth-child(3n + 4) td,#charts table tr:nth-child(3n + 5) td{
	background-color: #FEFEFE;
}
#charts table thead td{
	font-size: 10pt;
	font-weight: bold;
	background-color: #0077BB !important;
	border: 0px;
	color: #FFFFFF;
}
#sectorTable{
	background-color: #111111;
	width: 100%;
	height: 100%;
}
#sectorTable td{
	position: relative;
	border: 1px SOLID #999999;
	width: 33%;
	height: 20%;
}
#modification{
	display: block;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	background-color: #EFEFEF;
}
#limits{
	display: inline-block;
	width: calc(100% - 130px);
	height: 100%;
	z-index: 2;
	padding-top: 20px;
	box-sizing: border-box;
}
div.box{
	top: 0px;
	display: inline-block; 
	height: calc(100% - 15px);
	border: 1px SOLID #CCCCCC;
	margin-left: 4px;
	padding-top: 15px;
	padding-right: 4px;
}
#reaction{
	display: inline-block;
	width: calc(100% - 110px);
	height: 100%;
	z-index: 2;
}
#reaction div.meta{
	border: 1px SOLID #CCCCCC;
	height: calc(100% - 45px);
	padding-bottom: 45px;
	text-align: center;
	padding-left: 2px;
	padding-right: 2px;
}
div.spacer{
	display: block; 
	height: 10px;
	width: 100%;
}
div.meta{
	height: calc(100% - 35px);
}
/* #sectorTable span{
	position: relative;
	display: inline;
	color: #FFFFFF;
	font-size: 30pt;
	font-family: Calibri;
	padding-top: 10px;
	pointer-events: none;
	margin-left: 10px;
}
#sectorTable span.hf{
	color: #00FF00;
	padding-left: 20px;
}
#sectorTable span.hf:before{
	position: absolute;
	top: 0px;
	left: 0px;
	content: "HR";
	font-size: 10pt;	
}
#sectorTable span.spO2{
	color: #00EEFF;
	padding-left: 30px;
}
#sectorTable span.spO2:before{
	position: absolute;
	top: 0px;
	left: 0px;
	content: "SpO2";
	font-size: 10pt;	
}
#sectorTable span.abp{
	color: #FF0000;
	padding-left: 25px;
}
#sectorTable span.abp:before{
	position: absolute;
	top: 0px;
	left: 0px;
	content: "ABP";
	font-size: 10pt;	
}
#sectorTable span.physAlarm, #sectorTable span.inop{
	--padding: 20px;
	position: absolute;
	top: 0px;
	padding: 3px;
	height: auto;
	width: auto;
	display: block;
	border-radius: 5px;
	margin-top: 2px;
	margin-right: 3px;
	font-size: 12pt;
	color: #000000;
	padding-right: var(--padding);
}
#sectorTable span.physAlarm{
	right: 0px;
}
#sectorTable span.yellow{
	padding-left: calc(var(--padding) + 20px);
	background-color: #FFFF00;
}
#sectorTable span.yellow:before{
	content: "**";
	position: absolute; 
	top: 6px;
	left: var(--padding);
	font-size: 14pt;
	font-weight: bold;

}
#sectorTable span.red{
	padding-left: calc(var(--padding) + 30px);
	background-color: #FF0000;
	color: #FFFFFF;
}
#sectorTable span.red:before{
	content: "***";
	position: absolute; 
	top: 6px;
	left: var(--padding);
	font-size: 14pt;
	font-weight: bold;

}
#sectorTable span.inop{
	left: 0px;
	margin-left: 3px;
	background-color: #00EEFF;
	padding-left: calc(var(--padding) + 10px);
}
#sectorTable span.inop:before{
	content: "!";
	position: absolute; 
	left: var(--padding);
} */
div.DataArea{
	
	grid-template-columns: 60% 39%;
	grid-template-rows: 60% 38%; 
	display: grid;
	width: 100%;
	height: calc(100% - 100px);
	margin: 0px;
	margin-top: 25px;
	padding: 0px;
}
div.PICiX{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	--width: calc(100% - 20px);
	display: inline-block;
	position: relative;
	background-image: url("images/ix.png");
	background-size:     contain;                      /* <------ */
    background-repeat:   no-repeat;
	width: var(--width);
	aspect-ratio: 1481/884;
	padding-top: 2.9%;
	padding-left: 1.3%;
	padding-right: 0.55%;
	margin-bottom:  80px;
	box-sizing: content-box;
}
/*
div.PICiX div{
	position: relative;
	display: block;
	top: 4.8%;
	left: 1.3%;
	width: 97.3%;
	border: 1px SOLID #F00;
	aspect-ratio: 1445/788;
}*/
div.PICiX div{
	position: relative;
	float: left;
	top: 0px;
	left: 0px;
	display: block;
	border: 1px SOLID #999999;
	width: calc((var(--width)) / 3 + 4px);
	max-height: calc(var(--width)*0.32);
	display: block;
	aspect-ratio: 374/120;
	box-sizing: content-box;

}

div.PICiX div span{
	position: relative;
	display: inline-block;
	color: #FFFFFF;
	font-size: 24px;
	font-family: Calibri, sans-serif;
	padding-top: calc(var(--width)/100*0.5);
	pointer-events: none;
	margin-top:  calc(var(--width)/100);
	margin-left:  calc(var(--width)/100*5);
}
div.PICiX div span.HF{
	color: #00FF00;
	padding-left:  15px;
}
div.PICiX div span.HF:before{
	position: absolute;
	top: 0px;
	left: 0px;
	content: "HR";
	font-size: 12px;	
}
div.PICiX div span.SpO2{
	color: #00EEFF;
	padding-left: 25px;
}
div.PICiX div span.SpO2:before{
	position: absolute;
	top: 0px;
	left: 0px;
	content: "SpO2";
	font-size: 12px;	
}
div.PICiX div span.ABP{
	color: #FF0000;
	padding-left: 20px;
}
div.PICiX div span.ABP:before{
	position: absolute;
	top: 0px;
	left: 0px;
	content: "ABP";
	font-size: 12px;	
}
div.PICiX div span.physAlarm, div.PICiX div  span.inop{
	--padding: 10px;
	position: absolute;
	top: 0px;
	padding: 3px;
	height: auto;
	width: auto;
	display: block;
	border-radius: 3px;
	margin-top: 2px;
	margin-right: 3px;
	font-size: 12px;
	color: #000000;
	padding-right: var(--padding);
}
div.PICiX div span.inop{
	left: 0px;
	margin-left: 3px;
	background-color: #00EEFF;
	padding-left: 12px;
}
div.PICiX div span.inop:before{
	content: "!";
	position: absolute; 
	left: 10px;
}
div.PICiX div span.physAlarm{
	right: 0px;
}
div.PICiX div span.yellow{
	padding-left: calc(var(--padding) + 1.5vw);
	background-color: #FFFF00;
}
div.PICiX div span.yellow:before{
	content: "**";
	position: absolute; 
	top: 5px;
	left: var(--padding);
	font-size: 12px;
	font-weight: bold;

}
div.PICiX div span.red{
	padding-left: calc(var(--padding) + 2.3vw);
	background-color: #FF0000;
	color: #FFFFFF;
}
div.PICiX div span.red:before{
	content: "***";
	position: absolute; 
	top: 5px;
	left: var(--padding);
	font-size: 12px;
	font-weight: bold;

}
div.mx{
	display: inline-block;
	position: relative;
	background-image: url("images/mx850.png");
	background-size:     contain;                      /* <------ */
    background-repeat:   no-repeat;
	width: 20%;
	margin-left: 2.1%;
	margin-right: 2.1%;
	aspect-ratio: 1200/858;
	
}
div.mx:after{
	content: "";
	position: absolute;
	top: 12%;
	left: 5%;
	width: 89%;
	height: 70%;
}
div.mx.red:after{
	background-color: #F00;
}
div.mx.yellow:after{
	background-color: #FF0;
}
div.mx.inop:after{
	background-color: #0FF;
}

.react, .range, .meta{
	height: calc(100% - 10px);
	display: inline-block;
	z-index: 2;
	
}
.meta{
	margin-left: 2px;
	vertical-align: top;
}
.sliders{
	display: inline-block;
	height: 100%;
}
.sliders .range{
	margin: 0px;
	padding: 0px;
	margin-right: 2px;
}
.sliders .range:first-child{
	margin-right: 15px;
}
.on{
	color: #0000FF;
	text-decoration: underline;
}
.on:hover{
	color: #FF0000;
	cursor: pointer;
	text-decoration: underline;
}