body{
	FONT-SIZE: 12pt;
	OVERFLOW: auto;
	ZOOM: 1;
	MARGIN: 0px;
	BACKGROUND-COLOR: transparent;
	width:1920px;
	position:relative;
	user-select:none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

textarea{
	outline:none !important;
}

p{margin:0;}


.inputWrap{
    width:500px;
    margin:0 auto;
    max-width:90%;
    text-align:left;
    margin-bottom: 20px;
}

.inputWrapper{
    position:relative;
}

.inputWrap .title{
    font-weight:bold;
    font-size:14px;
    color:rgb(70,130,151);
    margin-bottom:5px;
}

.inputWrap input[type="text"], .inputWrap input[type="password"]{
    padding:10px 10px;
    font-size:14px;
    color:rgb(100,100,100);
    line-height:20px;
    outline:none;
    width:100%;
    box-shadow:1px 1px 4px rgba(70,130,151,0);
    border:1px solid rgb(0,0,0);
    -webkit-transition:all ease 0.5s;
    -moz-transition:all ease 0.5s;
    -ms-transition:all ease 0.5s;
    -o-transition:all ease 0.5s;
    transition:all ease 0.5s;
    box-sizing: border-box;
}

.inputWrap input[type="text"]:focus{
    box-shadow:1px 1px 4px rgba(70,130,151,0.5);
    color:rgb(70,130,151);
    border:1px solid rgb(70,130,151);

}

.inputWrap input[type="password"]:focus{
    box-shadow:1px 1px 4px rgba(70,130,151,0.5);
    color:rgb(70,130,151);
    border:1px solid rgb(70,130,151);
}

.inputWrap textarea{
    padding:5px;
    font-size:14px;
    color:rgb(37,57,101);
    width:100%;
    outline:none;
    box-shadow:1px 1px 4px rgba(70,130,151,0);
    border:1px solid rgb(70,130,151);
    -webkit-transition:all ease 0.5s;
    -moz-transition:all ease 0.5s;
    -ms-transition:all ease 0.5s;
    -o-transition:all ease 0.5s;
    transition:all ease 0.5s;
    height:150px;
    resize:none;
}

.inputWrap textarea:focus{
    box-shadow:1px 1px 4px rgba(70,130,151,0.5);
}

.inputWrapper .show{
    position:absolute;
    top:1px;
    right:1px;
    font-size:12px;
    padding:0 5px;
    line-height:40px;
    background-color:rgba(70,130,151,1);
    cursor:pointer;
    border-left:1px solid rgb(100,100,100);
    width:100px;
    text-align:center;
}

.loginWrap .inputWrap .button{
    margin:0 auto;
    font-size:22px;
    text-align:center;
    width:100%;
    padding:10px;
}

.loginWrap{
    position:relative;
    width:100%;
    height:100vh;
    background-color:rgb(221,221,221);
    font-family: Arial;
}

.loginWrap .absolute{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align:center;
    width:600px;
}

#scale-wrap{
	transform-origin:top left;
	overflow:hidden;
}


.screenWrap{
	position:relative;
	width:1920px;
	height:1080px;
}

.faceplates{
	width:149px;
	height:850px;
	position:absolute;
	top:0;
}

.faceplates .faceplate{
	height:446px;
	min-width:150px;
	position:absolute;
	overflow:hidden;
	z-index:9000;
	left:0px;
	
}


.faceplates .faceplateOpened{
	border:1px solid rgba(80,90,173);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
	z-index:1000;
}

.faceplates .faceplateActive{
	border:1px solid rgba(12,28,159,1);
	z-index:2000;
}

.faceplates .bigFaceplate{
	min-width:601px;
}

.faceplates .faceplate #Page{
	overflow:hidden;
	top:20px !important;
}

.faceplates .faceplate #picture001{
	top:2px !important;
}

.fpHeader{
	height:20px;
	background-color:rgb(80,90,173);
	text-align:left;
	font-size:12px;
	line-height:20px;
	padding-left:5px;
	color:rgb(255,255,255);
	font-family:Arial;
	position:relative;
	z-index:1000;
}

.faceplates .faceplateActive .fpHeader{
	background-color:rgb(12,28,159);
}


.faceplates .faceplate .close img{
	max-width: 100%;
}
.faceplates .faceplate .detailClose img{
	max-width: 100%;
}

.faceplates #faceplate2{
	top:446px;
}

.faceplates .faceplate .close{
	position:absolute;
	top:2px;
	right:5px;
	color:rgb(255,255,255);
	cursor:pointer;
	width:12px;
	z-index:1100;
}

.faceplates .faceplate .detailClose{
	position:absolute;
	top:20px;
	right:5px;
	color:rgb(255,255,255);
	cursor:pointer;
	width:12px;
	z-index:1100;
	display:none;
}

.faceplates .faceplate #Page{
	top:0;
	right:0;
}

.faceplates .faceplate .faceplateTitle{
	position:absolute;
	top:2px;
	left:0;
	right:0;
	text-align:center;
	color:rgb(0,0,0);
}

.plot{
	padding-left:60px;
}

.plot .plotWrapper{
	padding-top:20px;
	margin-top:10px;
	height:690px;
	font-size:0;
	position:relative;
}

.plot .plotWrapper .plotScrollerWrap{
	width:1499px;
	height:20px;
	margin-left:50px;
	margin-top:40px;
	overflow-x:scroll;
	border:1px solid rgb(0,0,0);
}

/* General scrollbar styling for Windows-like look */
.plot .plotWrapper .plotScrollerWrap {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #888 #f1f1f1; /* For Firefox */
    overflow-x: scroll; /* Ensures scrollbar is always visible */
}

/* Webkit scrollbars (Chrome, Safari, Edge) */
.plot .plotWrapper .plotScrollerWrap::-webkit-scrollbar {
    width: 12px; /* Set consistent width */
    background-color: #f1f1f1; /* Track background */
}

.plot .plotWrapper .plotScrollerWrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px; /* Rounded edges for Windows look */
}

.plot .plotWrapper .plotScrollerWrap::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1; /* Padding around thumb */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* Adds depth */
    transition: background-color 0.2s ease; /* Smooth color change */
}

/* Hover effect on the scrollbar thumb */
.plot .plotWrapper .plotScrollerWrap::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color on hover */
}

.plot .plotWrapper .plotScrollerWrap .plotScrollElem{
	position:relative;
	height:1px;
}

.plot .plotWrapper .yAxis{
	position:relative;
	border-right:1px solid rgb(0,0,0);
	height:100%;
	width:50px;
	font-size:12px;
	display:inline-block;
	vertical-align: middle;
}

.plot .plotWrapper .xAxis{
	position:absolute;
	bottom:0%;
	left:51px;
	border-top:1px solid rgb(0,0,0);
	width:1500px;
	height:50px;
	-webkit-transform:translateY(100%);
	-moz-transform:translateY(100%);
	-ms-transform:translateY(100%);
	-o-transform:translateY(100%);
	transform:translateY(100%);
}

.plot .plotWrapper .canvasWrap{
	position:relative;
	height:100%;
	display:inline-block;
	vertical-align: middle;
}

.plot .plotWrapper .maxElemWrap{
	position:absolute;
	top:0;
	left:-10px;
	z-index:600;
	-webkit-transform:translateY(50%);
	-moz-transform:translateY(50%);
	-ms-transform:translateY(50%);
	-o-transform:translateY(50%);
	transform:translateY(50%);
}

.plot .plotWrapper .periodWrap{
	position:absolute;
	top:-5px;
	left:500px;
	z-index:600;
}

.plot .plotWrapper .historyButton{
	position:absolute;
	top:-5px;
	left:600px;
	z-index:600;
}

.plot .plotWrapper .historyButton button{
	background-color:rgb(20,255,20);
}

.plot .plotWrapper .historyActive button{
	display:block;
	background-color:rgb(255,0,0);
}

.plot .plotWrapper .maxElemWrap input{
	width:50px;
	background-color:rgb(255,255,255);
	text-align:right;
}

.plot .plotWrapper .minElemWrap{
	position:absolute;
	bottom:0;
	left:-10px;
	z-index:600;
	-webkit-transform:translateY(50%);
	-moz-transform:translateY(50%);
	-ms-transform:translateY(50%);
	-o-transform:translateY(50%);
	transform:translateY(50%);
}

.plot .plotWrapper .minElemWrap input{
	width:50px;
	background-color:rgb(255,255,255);
	text-align:right;
}

.plot .plotWrapper .yAxis .tickWrap{
	right:0;
	-webkit-transform: translateY(7px);
	-moz-transform: translateY(7px);
	-ms-transform: translateY(7px);
	-o-transform: translateY(7px);
	transform: translateY(7px);
}

.plot .plotWrapper .tickWrap{
	position:absolute;
}

.plot .plotWrapper .xAxis .tickWrap{
	left:0;
	text-align:center;

}

.plot .plotWrapper .tickWrap .tickNumber{
	position:relative;
	padding-right:12px;
}


.plot .plotWrapper .tickWrap .tickNumber .tick{
	width:10px;
	height:1px;
	background-color:rgb(0,0,0);
	position:absolute;
	right:0%;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
}

.plot .plotWrapper .canvasWrap .gridWrap{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	z-index:400;
}

.plot .plotWrapper .canvasWrap canvas{
	position:relative;
	z-index:300;
	background-color:rgb(0,0,0);
}


.plot .plotWrapper .canvasWrap .gridWrap .relative{
	position:relative;
	width:100%;
	height:100%;
}


.plot .plotWrapper .canvasWrap .gridWrap .relative{
	position:relative;
	width:100%;
	height:100%;
}

.plot .plotWrapper .canvasWrap .gridWrap .relative .gridLine{
	background-color:rgba(255,255,255,0.2);
	position:absolute;
}

.plot .plotWrapper .canvasWrap .gridWrap .relative .xGrid{
	width:1px;
	height:100%;
}

.plot .plotWrapper .canvasWrap .gridWrap .relative .yGrid{
	height:1px;
	width:100%;
}

.plot .plotWrapper .canvasWrap .scooterWrap{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

.plot .plotWrapper .canvasWrap .scooterWrap .relative{
	width:100%;
	height:100%;
	position:relative;
	z-index:500;
}

.plot .plotWrapper .canvasWrap .scooterWrap .relative .scooter{
	position:absolute;
	height:100%;
	width:1px;
	background-color:rgb(255,255,255);
	left:50%;
	display:none;
}

.plot .plotWrapper .liveValue{
	font-size:20px;
	position:absolute;
	top:200px;
	right:800px;
}

.plot .plotWrapper .tagList{
	height:161px;
	width:830px;
	overflow-y:scroll;
	overflow-x:auto;
	margin-left: 50px;
}

.plot .plotWrapper .tagList .elem{
	font-size:0px;
	margin-top:-1px;
}

.plot .plotWrapper .tagList .elemActive{
	background-color:rgb(50, 151, 253);
}

.plot .plotWrapper .tagList .elem:first-child{
	margin-top:0px;
}


.plot .plotWrapper .tagList .elem .checkboxWrap, .plot .plotWrapper .tagList .elem .colorWrap, .plot .plotWrapper .tagList .elem .selectWrap,.plot .plotWrapper .tagList .elem .selectWrap2,.plot .plotWrapper .tagList .elem .textWrap{
	display:inline-block;
	vertical-align: middle;
	font-size:12px;
	border:1px solid rgb(0,0,0);
	margin-left:-1px;
	text-overflow: ellipsis;
	min-height: 19px;
	overflow: hidden;
	white-space: nowrap;
}

.plot .plotWrapper .tagList .elem .orderWrap{
	margin-left:0px;
}
.plot .plotWrapper .tagList .elem .checkboxWrap{
	
	text-align:center;
	width:21px;
}

.plot .plotWrapper .tagList .elem .checkboxWrap input{
	line-height:19px;
	outline:none;
	border:1px solid rgb(0,0,0);
	border-radius:0;
}

.plot .plotWrapper .tagList .elem .colorWrap{
	width:19px;
	height:19px;
}

.plot .plotWrapper .tagList .elem .colorWrap{
	width:19px;
	height:19px;
}

.plot .plotWrapper .tagList .elem .color{
	width:100%;
	height:100%;
}

.plot .plotWrapper .tagList .elem .selectWrap{
	width:100px;
	text-align:left;
}

.plot .plotWrapper .tagList .elem .selectWrap select{
	width:100%;
	outline:none;
	border:none;
	height:19px;
	background-color: transparent;
}

.plot .plotWrapper .tagList .elem .selectWrap2{
	width:50px;
	text-align:left;
}

.plot .plotWrapper .tagList .elem .selectWrap2 select{
	width:100%;
	outline:none;
	border:none;
	height:19px;
	background-color: transparent;
}

.plot .plotWrapper .tagList .elem .textWrap{
	height: 19px;
	padding: 0px 2px;
	text-align: left;

}

.plot .plotWrapper .tagList .elem .descriptionWrap{
	width:250px;
}

.plot .plotWrapper .tagList .elem .lowWrap, .plot .plotWrapper .tagList .elem .highWrap, .plot .plotWrapper .tagList .elem .currentWrap, .plot .plotWrapper .tagList .elem .scooterWrap {
	width:75px;
}

.plot .plotWrapper .tagList .elem .orderWrap{
	width:20px;
}

.plot .plotWrapper .tagList .elem .low, .plot .plotWrapper .tagList .elem .high{
	width:100%;
	border: 1px solid rgb(150, 150, 150);
	outline: none !important;
}















.plot .plotWrapper .tagHeader{
	margin-top:10px;
	margin-left: 50px;
}

.plot .plotWrapper .tagHeader .elem{
	font-size:0px;
	margin-top:-1px;
}

.plot .plotWrapper .tagHeader .elem:first-child{
	margin-top:0px;
}


.plot .plotWrapper .tagHeader .elem .checkboxWrap, .plot .plotWrapper .tagHeader .elem .colorWrap, .plot .plotWrapper .tagHeader .elem .selectWrap,.plot .plotWrapper .tagHeader .elem .selectWrap2,.plot .plotWrapper .tagHeader .elem .textWrap{
	display:inline-block;
	vertical-align: middle;
	font-size:12px;
	border:1px solid rgb(0,0,0);
	margin-left:-1px;
	text-overflow: ellipsis;
	min-height: 19px;
	overflow: hidden;
	white-space: nowrap;
}

.plot .plotWrapper .tagHeader .elem .orderWrap{
	margin-left:0px;
}
.plot .plotWrapper .tagHeader .elem .checkboxWrap{
	
	text-align:center;
	width:21px;
}

.plot .plotWrapper .tagHeader .elem .checkboxWrap input{
	line-height:19px;
	outline:none;
	border:1px solid rgb(0,0,0);
	border-radius:0;
}

.plot .plotWrapper .tagHeader .elem .colorWrap{
	width:19px;
	height:19px;
}

.plot .plotWrapper .tagHeader .elem .colorWrap{
	width:19px;
	height:19px;
}

.plot .plotWrapper .tagHeader .elem .color{
	width:100%;
	height:100%;
}

.plot .plotWrapper .tagHeader .elem .selectWrap{
	width:100px;
	text-align:left;
}

.plot .plotWrapper .tagHeader .elem .selectWrap select{
	width:100%;
	outline:none;
	border:none;
	height:19px;
}

.plot .plotWrapper .tagHeader .elem .selectWrap2{
	width:50px;
	text-align:left;
}

.plot .plotWrapper .tagHeader .elem .selectWrap2 select{
	width:100%;
	outline:none;
	border:none;
	height:19px;
}

.plot .plotWrapper .tagHeader .elem .textWrap{
	height: 19px;
	padding: 0px 2px;
	text-align: left;

}

.plot .plotWrapper .tagHeader .elem .descriptionWrap{
	width:250px;
}

.plot .plotWrapper .tagHeader .elem .lowWrap, .plot .plotWrapper .tagHeader .elem .highWrap, .plot .plotWrapper .tagHeader .elem .currentWrap, .plot .plotWrapper .tagHeader .elem .scooterWrap {
	width:75px;
}

.plot .plotWrapper .tagHeader .elem .orderWrap{
	width:20px;
}



.plot .plotWrapper .xAxis .tickWrap{
	position:absolute;
	top:0;
}

.plot .plotWrapper .xAxis .tickWrap .tickNumber{
	position:relative;
	padding-top:12px;
	font-size:12px;
	margin-left:-50%;
}


.plot .plotWrapper .xAxis .tickWrap .tickNumber .tick{
	width:1px;
	height:11px;
	background-color:rgb(0,0,0);
	position:absolute;
	top:0%;
	left:32%;
}



.controllerStatusSheetButtonClickable{
	cursor:pointer !important;
}

.contextMenu{
	position:absolute;
	border:1px solid #afafaf;
	color:rgb(0,0,0);
	background-color:#dddddd;
	width:100px;
	box-shadow:2px 2px 2px rgba(0,0,0,0.3);
}

.contextMenu .menuItem{
	padding:3px 5px;
}

.contextMenu .menuItem:hover{
	background-color:#c0c0c0;
}

.alarmPage{
	width:1920px;
	height:1080px;
}

.alarmPage .title{
	color:rgb(255,255,255);
	font-size:20px;
	font-weight:bold;
	padding:20px;
	background-color:#707d9c;
	border:1px solid rgb(0,0,0);
	width:1800px;
	margin:0 auto;
	margin-top:20px;
}

.alarmPage .headerTable{
	width:1846px;
	margin:0 auto;
}

.alarmPage .headerTable table{
	border-collapse: collapse;
	background-color:rgb(192,192,192);

}

.alarmPage .headerTable table td{
	border:1px solid rgb(255,255,255);
	color:rgb(0,0,0);
	font-size:18;
}

.alarmPage .headerTable table td .value{
	padding:5px;
}


.alarmPage .icon{
	width:30px;
}

.alarmPage .date{
	width:200px;
}

.alarmPage .loc{
	width:150px;
}

.alarmPage .source{
	width:150px;
}

.alarmPage .condition{
	width:150px;
}

.alarmPage .trip{
	width:150px;
}

.alarmPage .live{
	width:150px;
}

.alarmPage .unit{
	width:150px;
}

.alarmPage .status{
	width:150px;
}

.alarmPage .desc{
	width:533px;
}

.alarmPage .mainTable{
	background-color:rgb(109,109,109);
	border:1px solid rgb(255,255,255);
	width:1843px;
	margin:0 auto;
	height:700px;
	color:rgb(255,255,255);
}


.alarmPage .mainTable td .value{
	padding:5px;
}

.alarmBox{
	position:absolute;
}

.alarmBox img{
	position:absolute;
}

#fullscreenButton{
	position:absolute;
	top:2px;
	left:2px;
	padding:5px;
	z-index:2000;
	background-color:red;
	color:white;
	font-size:20px;
	font-weight:bold;
}

.navMenu{
	position:absolute;
	bottom:42px;
	width:1920px;
	background-color:rgba(221,221,221,1);
	text-align:center;
	font-size:0;
	z-index:200;
}

.navMenu .inline{
	background-color:rgb(216,216,216);
	border:1px solid rgb(128,128,128);
	padding:7px 15px;
	display:inline-block;
	vertical-align:middle;
	width:calc(33.33% - 37px);
	font-size:14px;
}

.navMenu .inline:nth-child(1){
	text-align:left;
}

.navMenu .inline:nth-child(2){
	margin:0px 5px;
	text-align:left;
}

.navMenu .inline:nth-child(2) .navButtonWrap:nth-child(2){
	margin-right:120px;
}

.navMenu .inline:nth-child(3){
	text-align:right;
}

.navMenu .inline .navButtonWrap{
	display:inline-block;
	vertical-align: middle;
	margin:0 5px;
}

.navMenu .inline .navButtonWrap #sim-status{
	width:15px;
	height:15px;
	border:1px solid rgb(128,128,128);
	border-radius:20px;
	background-color:rgb(200,200,200);
	display:inline-block;
	vertical-align: middle;
	text-align:right;
}

.navMenu .inline .navButtonWrap #sim-status-text{
	display:inline-block;
	vertical-align: middle;
	font-size:14px;
	color:rgb(128,128,128);
	font-family: 'Arial',sans-serif;
	width:114px;
	overflow:hidden;
}

.navMenu .inline .navButtonWrap #separator{
	display:inline-block;
	vertical-align: middle;
	font-size:20px;
	font-weight:bold;
	color:rgb(128,128,128);
}

.navMenu .inline .navButtonWrap #sim-time{
	display:inline-block;
	vertical-align: middle;
	font-size:14px;
	color:rgb(128,128,128);
	font-family: 'Arial',sans-serif;
	width:142px;
	overflow:hidden;
}



.navMenu .inline .navButtonWrap textarea{
	padding:5px;
	width:100px;
	height:16px;
	outline:none;
	resize:none;
	overflow:hidden;
}

.navMenu .inline .button{
	width:80px;
	height:35px;
	background-color:rgb(255,255,255);
	position:relative;
	font-size:14px;
	cursor:pointer;
	border:2px outset;
	font-family: Arial;
}

.navMenu .inline .button:active{
	border:2px inset;
}

.navMenu .inline .buttonInactive{
	pointer-events: none;
    background-color: rgb(200, 200, 200);
    border: 2px solid rgb(150, 150, 150);
    color:rgb(150,150,150);
}

.navMenu .inline .button .text{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	text-align:center;
}


.bottomMenu{
	position:absolute;
	bottom:0px;
	width:1920px;
	background-color:rgba(221,221,221,1);
	z-index:200;
	padding:5px 0px;
	text-align:center;
}

.bottomMenu .logos{
	display:inline-block;
	vertical-align: middle;
	padding-left:10px;
	float:left;
}

.bottomMenu .logIn{
	display:inline-block;
	vertical-align: middle;
	padding-right:10px;
	text-align:right;
	float:right;
	font-family: 'Arial',sans-serif;
	font-size:12px;
	color:rgb(128,128,128);
	position:relative;
	z-index:500;
}


.bottomMenu .logIn .inline{
	display:inline-block;
	vertical-align: middle;
}

.bottomMenu .logIn .title{
	font-weight:bold;
}

.bottomMenu .buttons{
	float:center;
}

.bottomMenu .buttons .buttonWrap{
	display:inline-block;
	vertical-align: middle;
}


.bottomMenu .logos .logoWrap{
	display:inline-block;
	vertical-align: bottom;
	width:50px;
}

.bottomMenu .logos .logoWrap:last-child{
	width:73px;
	margin-left:5px;
}

.bottomMenu .logos .logoWrap img{
	max-width:100%;
	display:block;
}

.bottomMenu .buttons{
	position:absolute;
	bottom:5px;
	width:1920px;
	text-align:center;
	z-index:201;
}

.bottomMenu .buttonWrap .button{
	text-align:center;
	padding:5px;
	border:2px outset;
	background-color:rgb(255,255,255);
	font-size:14px;
	font-family:'Arial',sans-serif;
}
.bottomMenu .buttonWrap .button:active{
	border:2px inset;
}

.bottomMenu .buttonWrap .buttonInactive{
	background-color:rgba(255,255,255,0);
	color:rgb(128,128,128);
	border:2px solid rgb(200,200,200);
}

.bottomMenu .buttonWrap .buttonInactive:active{
	border:2px solid rgb(200,200,200);
}

.bottomMenu .buttonWrap .buttonInactive .imageWrap img{
	opacity:0.5;
}

.bottomMenu .buttonWrap .button .imageWrap{
	display:inline-block;
	vertical-align: middle;
	width:15px;
}

.bottomMenu .buttonWrap .button .imageWrap img{
	max-width: 100%;
	display:block;
}

.bottomMenu .buttonWrap .button .textWrap{
	display:inline-block;
	vertical-align: middle;
}

.indicatorValue{
	text-align:right !important;
}

.simRunning .alarmPage .iconBlink img{
	animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.simRunning .blink{
	animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.simRunning .blinkRed {
  animation: blinkRed 1s step-end infinite;
  -webkit-animation: blinkRed 1s step-end infinite;
}

.simRunning .blinkYellow {
  animation: blinkYellow 1s step-end infinite;
  -webkit-animation: blinkYellow 1s step-end infinite;
}

.glowYellow{
	outline: 3px solid rgb(255, 255, 0);
}

.glowRed{
	outline: 3px solid rgb(255, 0, 0);
}

.alarmPage .button{
	width:150px;
	height:35px;
	background-color:rgb(255,255,255);
	position:relative;
	font-size:14px;
	cursor:pointer;
	border:2px outset;
	font-family: Arial;
	display: inline-block;
	margin-top:30px;
	margin-left:40px;
}

.alarmPage .button:active{
	border:2px inset;
}

.alarmPage .button .text{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	text-align:center;
}

#table-header .relative{
	position:relative;
}

.version{
	position:absolute;
	bottom:10px;
	left:150px;
	font-size:12px;
	opacity:0.8;
}

@keyframes blink-animation {
  0%, 50% {
    visibility: visible; /* Visible */
  }
  51%, 100% {
    visibility: hidden; /* Hidden */
  }
}
@-webkit-keyframes blink-animation {
  0%, 50% {
    visibility: visible; /* Visible */
  }
  51%, 100% {
    visibility: hidden; /* Hidden */
  }
}
@keyframes blinkRed {
	from {
    outline: 3px solid transparent;
  }
  to {
    outline: 3px solid rgb(255,0,0);
  }
}

@-webkit-keyframes blinkRed {
	from {
    outline: 3px solid transparent;
  }
  to {
    outline: 3px solid rgb(255,0,0);
  }
}

@keyframes blinkYellow {
  0%, 50% {
    outline: 3px solid rgb(255, 255, 0); /* Visible */
  }
  51%, 100% {
    outline: 3px solid transparent; /* Hidden */
  }
}

@-webkit-keyframes blinkYellow {
  0%, 50% {
    outline: 3px solid rgb(255, 255, 0); /* Visible */
  }
  51%, 100% {
    outline: 3px solid transparent; /* Hidden */
  }
}