@charset "utf-8";

.successMessage {
	color:green;
}

.errorMessage {
	color:red;
}

.rowCell{
	min-width:100px;
	padding: 5px;
	display:inline-block;
}

.header {
	margin: auto;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
	-moz-box-shadow: 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px #000000;
	padding-left: 10px;
	padding-right: 0px;
	padding-bottom: 5px;
	background-color: #FFFFFF;
	overflow: hidden;
}

.leftHeader {
	float: left;
	/*padding: 500px;*/
	/*z-index: 999;*/
}

.rightHeader {
	float: right;
	padding: 5px;
}

.contenet{
	clear: both;
	
	/*margin-top: 5px;*/
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
	-moz-box-shadow: 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px #000000;
	padding-left: 10px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color: #FFFFFF;
	/*white-space: nowrap;*/
}
.contenetOutageUpdate{
	clear: both;
	
	/*margin-top: 5px;*/
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
	-moz-box-shadow: 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px #000000;
	padding-left: 10px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color: #BDBDBD;
	/*white-space: nowrap;*/
}

.tableHeader {
    table-layout: fixed;
	border:none;
	word-break:break-word;
	word-wrap:break-word;
	width: 99%; 
	overflow: hidden;
}
.tableCell {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	border:none;
	overflow: hidden;
}
.tableCellCenter {
	text-align: center
}
.tableCellLeftText {
	text-align: left;
	padding: 0px;
	margin: 0px;
}
.tableCellRightText {
	text-align: right;
	padding: 0px;
	margin: 0px;
}
.tableHeaderBorder {
    table-layout: fixed;
	border:1px solid;
	word-break:break-word;
	word-wrap:break-word;
	width: 99%; 
	overflow: hidden;
}
.tableHeaderComments {
	border:3px solid red;
	word-break:break-word;
	word-wrap:break-word;
	width: 99%; 
	overflow: hidden;
}
.tableCellComments {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	border:none;
	height: 100px;
	vertical-align:top;
	text-align: left;
}
.outageGroupNotSame {
	border-top-style:solid;
	border-right-style:solid;
	border-bottom-style:none;
	border-left-style:solid;
}
.outageGroupSame {
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:none;
	border-left-style:solid;
}
.outageHeader {
	border-style:solid;
	border-width:2px;
	background-color: #BDBDBD;
	font-weight:bold;
	font-size:120%;
}
.yellowHighlight{
	background-color: #ffff00
}


body {
	background-color: #BDBDBD;
	font-family: Arial, Helvetica, Sans-serif;
}

h2 {
	text-align: center;
	font-weight:bold;
	font-size:200%;
	padding: 5px;
	margin: 5px;
}

h3 {
	font-weight:bold;
	font-size:200%;
	text-align: center;
	padding: 1px;
	margin: 1px;
}

h4 {
	text-align: left;
	font-weight:bold;
	font-size:150%;
	padding: 0px;
	margin: 0px;
	color: red;
}

h5 {
	text-align: left;
	font-weight:bold;
	font-size:110%;
	padding: 0px;
	margin: 0px;
}

h6 {
	font-weight:bold;
	font-size:100%;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

table {
    table-layout: fixed;
	word-break:break-word;
	word-wrap:break-word;
	border:1px solid black;
	width: 98%; 
	overflow: hidden;
}
.euLogo{
	/*vertical-align:middle;*/
	height:45px;
}
.scadaTable{
	padding: 0px;
	height:600px;
	border-collapse:collapse;
	table-layout: fixed;
	border:none;
	overflow: hidden;
}
.scadaTd {
	border:0px;
	padding: 0px;
	border:none;
	overflow: hidden;
}
.scadaDiv{
	position: absolute; 
	z-index: 1; 
	left: 0; 
	top: 0; 
	width:600px;
}
td {
	/*white-space: pre-wrap;*/ /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	border:1px solid black;
	overflow: hidden;
}

p {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	width: 98%; 
	overflow: hidden;
}

textarea {
   width: 99%;
}


ul{
list-style-type: none;
}
li
{
   padding-left: 0px;
}

@-webkit-keyframes invalid {
  from { background-color: LightGreen; }
  to { background-color: inherit; }
}
@-moz-keyframes invalid {
  from { background-color: LightGreen; }
  to { background-color: inherit; }
}
@-o-keyframes invalid {
  from { background-color: LightGreen; }
  to { background-color: inherit; }
}
@keyframes invalid {
  from { background-color: LightGreen; }
  to { background-color: inherit; }
}
.turnOffAlert {
    background-color: LightGreen;
}
.itemAddButton{
	display: inline-block; 
	background-color: #4CAF50; 
	border: none; 
	color: white; 
	text-align: center; 
	text-decoration: none; 
	display: font-size: 16px; 
	font-weight: bold;
	margin: 5px 0px 5px 0px; 
	padding: 10px 25px 10px 25px;
}
.itemDeleteButton{
	display: inline-block; 
	background-color: #f44336; 
	border: none; 
	color: white; 
	text-align: center; 
	text-decoration: none; 
	display: font-size: 16px; 
	font-weight: bold;
	margin: 0px 0px 0px 0px; 
	padding: 5px 15px 5px 15px;
}
.itemEditButton{
	display: inline-block; 
	background-color: #e7e7e7; 
	border: none; 
	color: black; 
	text-align: center; 
	text-decoration: none; 
	display: font-size: 16px; 
	font-weight: bold;
	margin: 0px 0px 0px 0px; 
	padding: 5px 15px 5px 15px;
}
#tabs{
	font-size: 12pt;
	width: 98%;
}
#addOnTableResults{
	font-size: 12pt;
}

div.mobileFormDiv input {
   	padding: 2px 5px 2px 5px;
	margin: 0px 0px 2px 0px;
    box-sizing: border-box;
}
div.mobileFormDiv select{
   	padding: 2px 5px 2px 5px;
	margin: 0px 0px 2px 0px;
    box-sizing: border-box;
}
div.mobileFormDiv label{
	font-weight: bold;
    padding: 5px 5px 5px 0px;
	margin: 0px 0px 5px 0px;
}
.notification {
	position: absolute;
	max-width: 50%;
	display: inline-block;
	font-size: 2em;
	font-weight: bold;
	padding: 2.5em;
	box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
	background: #90EE90;
}
@media only screen and (max-width: 1000px) {
	/* This is to make the logo disappear if the screen size gets to small*/
	#rightLogoSection{
		display: none;
	}
}

@media only screen and (max-width: 950px) {
	div.mobileFormDiv input{
		width: 98%;
	    	padding: 5px 5px 5px 5px;
		margin: 0px 0px 25px 0px;
	    	box-sizing: border-box;
	}
	div.mobileFormDiv select{
		width: 98%;
	    padding: 5px 5px 5px 5px;
		margin: 0px 0px 25px 0px;
	    box-sizing: border-box;
	}
	div.mobileFormDiv label{
		font-weight: bold;
		width: 98%;
	}
	.header {
		margin: auto;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	.leftHeader {
		float: left;
		z-index: 999;
		/*padding: 1em;*/
	}
	.rightHeader {
		float: right;
		/*padding: 1em;*/
	}
	.contenet{
		clear: both;
		background-color: #FFFFFF;
		/*white-space: nowrap;*/
	}
	.ui-menu .ui-menu-item a {
		text-decoration:none;
		display:block;
		padding:.5em .5em;
		line-height:1.5;
		/*zoom:2.5;*/
	}
	.portCheckbox{
		min-width:50px;
		min-height:50px;
	}
	.permitCheckbox{
		width:50px;
		text-align: left;
	}

	body {
		background-color: #BDBDBD;
		font-family: Sans-serif;
		width: auto;
		min-width: 0px;
	}
	body > section {
		border-radius       : 2em;
		background          : #ffffff;
		border-radius       : 2em;
		padding             : 0px;
		background          : #ffffff;
		min-height          : 70%
	 }
	img{
		/*padding: 1.5em;*/
		width: 100%;
		height:auto;
	}
	.euLogo{
		vertical-align:middle;
		height:75px;
		width:auto;
	}
	.accountAddButton{
		height:1em;
		width:auto;
		padding: 1.5em;
	}
	#addSlotsHide{
		height:1em;
		width:auto;
	}
	ul{
		list-style-type: none;
		margin-left: 0px;
		padding-left: 0px;
	}
	li{
		/*font-size:large;*/
		padding-top: 1em;
		padding-bottom: 1em;
	}
	h1{}
	input	{
		/*font-size:x-large;*/
		font-weight: bold;
		padding   : 10px;
		
	}
	select{
		/*font-size:x-large;*/
		font-weight: bold;
		padding   : 10px;
		max-width: 98%;
	}
	button{
		/*font-size:x-large;*/
		font-weight: bold;
		padding   : .75em;
		width:auto;
		overflow:visible;					
		text-align:center;	
		white-space:nowrap;	
	}
	h2 {
		text-align: center;
	}
	h3 {
		font-weight:bold;
	}
	h4 {
		text-align: left;
		color: red;
	}
	h5 {
		text-align: left;
	}
	h6 {
		font-weight:bold;
	}
	td {
		/*white-space: pre-wrap;*/ /* css-3 */
		white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: -o-pre-wrap; /* Opera 7 */
		word-wrap: break-word; /* Internet Explorer 5.5+ */
		border:1px solid black;
		overflow: hidden;
		font-size: .75em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.scadaTable{
		/*height:600px;*/
		padding: 0px;
		border-collapse:collapse;
		table-layout: fixed;
		border:none;
		width: 100%; 
		overflow: hidden;
	}
	.scadaDiv{
		position: absolute; 
		z-index: 1; 
		left: 0; 
		top: 0; 
		width:100%; 
	}
	p {
		white-space: pre-wrap; /* css-3 */
		white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: -o-pre-wrap; /* Opera 7 */
		word-wrap: break-word; /* Internet Explorer 5.5+ */
		width: 100%; 
		overflow: hidden;
		/*font-size: large;*/
	}
	textarea {
	   width: 98%;
	}

}

body.dark-theme {
    background-color: #363636;
    font-family: Arial, Helvetica, Sans-serif;
}
body.dark-theme div#contentOfPage {
    background-color: #363636;
    color: #f2f2f2;
}
body.dark-theme div#topStaticContent {
    background-color: #363636;
    color: #f2f2f2;
}
body.dark-theme div.contenet {
    background-color: #363636;
    color: #f2f2f2;
}
body.dark-theme a {
    color: #b366ff;
}
body.dark-theme input:not(.mobileFormDiv input) {
    background-color: #888888;
    color: #f2f2f2;
}
body.dark-theme button {
    background-color: #888888;
    color: #f2f2f2;
}
body.dark-theme textarea:not(.mobileFormDiv textarea) {
    background-color: #888888;
    color: #f2f2f2;
}
body.dark-theme select:not(.mobileFormDiv select) {
    background-color: #888888;
    color: #f2f2f2;
}
body.dark-theme th {
    color: #f2f2f2;
}
body.dark-theme td {
    color: #000000;
}
body.dark-theme table a {
    color: #554093; 
}
body.dark-theme table {
    background-color: #aaaaaa;
}
body.dark-theme .turnOffAlert {
    background-color: #a7f1a7;
}