/* General style */
body > div.nofooter { min-height: calc(100% - 110px); }

/* Navigation Bar Modification
.navbar-inner a { font-size:10px; }*/
.navbar-inner li { line-height:16px; }
.ui-datepicker .ui-datepicker-next span {
	background:url('next.png');
}
.ui-datepicker .ui-datepicker-prev span {
	background:url('last.png')
}

.ui-effects-transfer {
    border: 1px solid black;
    background: #DDD;
}

#customNavigator * { font-family: 'Source Sans Pro', sans-serif; color: #666; border: 0px; margin: 0px; padding: 0px;}
#customNavigator > li { float:left; width: 160px; height:18px; padding: 5px; font-weight:bold; list-style:none;}
#customNavigator > li:hover { background:#BBB;border-radius:4px;}

#customNavigator > li > ul, #customNavigator > li > ul * { visibility:hidden;position:relative;z-index:20;}
#customNavigator > li:hover > ul,#customNavigator > li:hover > ul * { visibility:visible;}

#customNavigator > li > ul { border-radius:4px; }

#customNavigator > li > ul > li { /*border: 1px solid #666; border-radius:4px; */ background:#DDD; font-size:16px; width:170px;list-style:none; padding:0px; border:0px solid #000; margin-left:-5px; /* compensates padding of category div */}
#customNavigator > li > ul > li:hover { /*border: 1px solid #666; border-radius:4px; */ background:#EEE; border-width:0px 1px; margin:0px -1px 0px -6px; }
#customNavigator > li > ul > li:hover * { /*border: 1px solid #666; border-radius:4px; */ background:#EEE; }

#customNavigator > li > ul > li > a{ display:block; width:162px;padding:4px;cursor:pointer}

/* Main content style */
#maincontent td { border: 0px #aaa solid; max-width:20%;overflow:hidden; /*word-break:break-word;*/padding:0px 10px;}
#maincontent { text-align: center; position:relative; min-height:500px /* Without position relativ, popups move weirdly */ /*padding-bottom:200px; */}
#maincontent > div { background:#FFF }
#maincontent div.jsonelement, #maincontent div.jsonelement * { margin:0px; }
#maincontent table { display:inline-table; table-layout:fixed; padding:5px; background:#FFF;border-radius:5px;}
#maincontent table .tableinput { margin-bottom:0px; }
#maincontent td.inputtd { padding-left:0px;padding-right:0px; padding:0px;}
#maincontent td.inputfield input{ margin-bottom:0px; }
#maincontent div#comparatorToggleDiv{ height:0px; display:inline-block; visibility: hidden;}
#maincontent div#comparatorToggleDiv label{ float:left;}
#maincontent #comparatorToggle{ vertical-align:text-top;}
#maincontent td div.compare{ display:inline-block; width:220px;}
#maincontent td div.compare input { margin-bottom:0px; }

#maincontent input[type="file"] {display: none;}
#maincontent label.upload {margin:auto;}

.authentication table input.input { margin-bottom:0px; }
#maincontent table th.searchtableicon { padding-left:10px; padding-right:10px; }
#maincontent div.searchtabledivinner table th select {
	line-height:100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
}
#maincontent div.searchtabledivinner table th select::-ms-expand {
	display: none;
}
#maincontent div.searchtabledivinner table td.searchtablecheckbox input[type=checkbox] {
	margin: 0px;
}
#maincontent div.searchtabledivinner table td.invisibleSearchEntry {
	display:none;
}
#maincontent div.row {padding-left:0px;}
#maincontent .hiddenTable { display:none; }
#maincontent tr.approval { background: #AFA;; }
#maincontent tr.disapproval { background: #FAA; }

#version { position: fixed; right: 0px; bottom: 0px; background: #FFF; padding: 5px; opacity: 0.5; z-index:2;}
#instance { position: fixed; left: 0px; bottom: 0px; background: #FFF; padding: 5px; opacity: 0.5; z-index:2;}

/* MAP PAGE */
#maincontent div.myrow { margin-bottom:30px;}
#bardiagrambox{
	border:0px #AAA solid;
}
#legend{
	float:right;
	padding-top:3px;
	padding-right:3px;
	/*font: 10px Arial, sans-serif;*/
	line-height:10px;
	white-space: nowrap;
}
#legend span{
	float:left;
	width: 4px;
	height: 4px;
	white-space: nowrap;
}
#legend ul
{
	white-space: nowrap;
    list-style-type: none;
    padding-left: 0px;
}
#legend li{
	float: left;
	margin-left: 10px;
	white-space: nowrap;
}

#requestdistribution{
	border:1px #000 solid;
	width:50%;
	left:0%;
	white-space: nowrap;
}


/* ADVANCED MENU */
ul.nav > li { height: 100px; width:160px; }
ul.nav > li { /*border: 1px solid #000;*/ padding: 5px; text-align:left;}
@media(min-width:980px) {
	ul.nav li.categorySelectionDisplayed { display: inline; }
	ul.nav li.categorySelectionHidden { display: none; }
}
@media(max-width:979px) {
	ul.nav li.categoryMenu { display: none; }
}
#pageheader > #documentPath { display:block;float:left;margin-left:5%; text-align:left;}

#maincontent > div,#maincontent > form > div { width: 90%; max-width:1000px; margin:auto;}
#maincontent > div#errorOverlayDiv,#maincontent > div#problematicSNDiv { display:none; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; max-width: 100%;}
#maincontent > div#errorOverlayDiv { z-index: 10; }
#maincontent > div#problematicSNDiv { z-index: 9; }

#maincontent > div#errorOverlayDiv #list { 
	display:none;
	overflow-y: scroll;
    height: 200px;
    margin: 10px;
    width:70%;
}
#maincontent > div#errorOverlayDiv .circle,#maincontent > div#problematicSNDiv .circle { 
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 28px;
	color:#000;
	font-weight:bold;
	line-height: 47px;
	text-align: center;
	display:inline-block;
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
#maincontent > div#errorOverlayDiv #list table, #maincontent > div#problematicSNDiv table:not(.input) { width:100%; }
#maincontent > div#errorOverlayDiv #list table td, #maincontent > div#problematicSNDiv table:not(.input) td { border:1px solid #000;}
#maincontent > div#errorOverlayDiv div.modebutton { margin: 10px; display: inline-block; border: 1px solid #000; padding: 10px; border-radius: 10px; } 
#maincontent > div#errorOverlayDiv div.modebutton:hover { background: #DDD; } 


#maincontent > form > div.authentication { max-width:100%;}
#maincontent > div.subtitle { padding-top:20px; }
#maincontent > div.subtitle > h2{ line-height:20px; margin:10px 0px; }

#customNavigator .status_lamp, #machineOverview .status_lamp {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	margin: 0px 5px;
	display: inline-block;
	border: "0px solid #AAA";	
}

h2.subtitle { line-height:20px; margin:10px 0px; }
#maincontent > div#subTableDivWrapper {
	position: absolute;
	left: 0px;
	right: 0px;
	box-sizing:border-box;
	text-align:center;
	display:none;
	z-index:2;
}
#maincontent > div#subTableDivWrapper > div#subTableDiv {
	border:1px solid #AAA;
	border-radius:5px;
	background: #DDD;
	font-size:20px;
}
#maincontent > div#subTableDivWrapper > div#subTableDiv table { background: #DDD; }
#maincontent > div#subTableDivWrapper > div#subTableDiv tr { background: #DDD; }
#maincontent > div#subTableDivWrapper > div#subTableDiv tr:hover { background: #BBB; }

#maincontent > form > div.authentication { width:100%; }

#maincontent > h1 { clear:both; }
#maincontent > h2 { margin:0px; }

/* Setting table style */
#maincontent *:not(h1):not(h2):not(a),.ui-tooltip {	
	font-family: 'Source Sans Pro', sans-serif;
	color: #666;
	font-size: 16px; 
}				
#maincontent table.settingstable { width: 89%; max-width:1000px; margin:auto;}
#maincontent table.settingstable, table.settingstable tr, table.settingstable td { border: 0px; }
#maincontent table.settingstable > tbody > tr:hover { background:#DDD;}
#maincontent table.settingstable > tbody > tr.hiddenCategoryEntry { display:none;}
#maincontent table.settingstable > tbody > tr.changedEntry { background: #FFA; }
#maincontent table.settingstable > tbody > tr.errorEntry { background: #FAA; display: table-row; }
#maincontent table.settingstable > tbody > tr > td:first-child > img {
	position: absolute;
	height: 20px;
	margin-top: 11px;
	margin-left: -40px;
}
/* border-radius:5px; */
#maincontent table.settingstable > tbody > tr.category { background:#DDD; font-size:20px; border:1px solid #AAA;}
#maincontent table.settingstable > tbody > tr.inactive { display:none;}
#maincontent table.settingstable > tbody > tr.automatic { display:none;}
#maincontent table.settingstable > tbody > tr > td {line-height:40px; }
#maincontent table.settingstable > tbody > tr > td > * { vertical-align:baseline; }
#maincontent table.settingstable > tbody > tr > td:first-child { vertical-align:top;text-align:left;}
#maincontent table.settingstable > tbody > tr > td:last-child { text-align:right;}
/*#maincontent table.settingstable > tbody > tr > td:last-child table { height:100%;}*/
#maincontent table.settingstable > tbody > tr > td:last-child > input:not([type=checkbox]),
#maincontent table.settingstable > tbody > tr > td:last-child > select,
#maincontent table.settingstable > tbody > tr > td:last-child > textarea
{ width:100%; margin:0px; text-align:right; max-width:250px; height:100%; box-sizing:border-box;}
#maincontent table.settingstable > tbody > tr > td:last-child > textarea.bigtextinput { max-width:250px; }
#maincontent table.settingstable > tbody > tr > td:last-child > textarea { max-width:500px; height:5em;resize:vertical;text-align:left;}
#maincontent table.settingstable > tbody > tr > td > div.htmlpreview { border:1px solid #AAA; height:1in;width:100%;text-align:center;clear:both;overflow:hidden;}
#maincontent table.settingstable > tbody > tr > td > ul { height:100px; /*overflow-y:scroll;*/ overflow-x:hidden;}
#maincontent table.settingstable > tbody > tr > td > button.btn { margin:5px;}
#maincontent > form > button.btn { margin:5px 90px;} /* This comes from bootstrap setting width of page to 1170, and table maximally 1000. So with margin of 90 on both sides, table and button never make it onto same line */
#subTableDiv > form > button.btn { margin:5px;}
#maincontent table.subtable { max-width:250px; width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; margin:3px;}
#maincontent table.subtable > tbody > tr > td:first-child { width:25%; }
.authentication button.btn { margin:5px;}
#maincontent table.settingstable > tbody > tr > td > .rowAdder { cursor:pointer;}
#ui-datepicker-div {border: 1px solid #000; z-index:3 !important; background:#FFF;}

/* JSON INPUT */
#maincontent table.settingstable tr.jsonrow { display: block; width: 200%;}
#maincontent table.settingstable tr.jsonrow:hover { background:#DDD;}
#maincontent table.settingstable tr.jsonrow td { display: inline-block; max-width: 100%; width: 100%; }
#maincontent table.settingstable tr.jsonrow td div.jsonelement textarea:last-child { float:right; }
#maincontent table.settingstable tr.jsonrow td div.jsonelement { text-align:left; margin-right:20px;}

/* ADVANCED TABLES */
#maincontent div.searchtabledivoutter { margin:auto; margin-top:-3px; /* Hides comparison field */ height:200px; overflow:hidden; text-align:left; border:1px #DDD solid; border-radius:4px; }
#maincontent form > div.searchtabledivoutter { height: 200px; }
#maincontent > div.searchtabledivoutter { height: 200px; }
#maincontent div.searchtabledivoutter input[type=text],#maincontent div.searchtabledivoutter select{ width:100%; box-sizing:border-box; height:30px; margin:0px;}
#maincontent div.searchtabledivoutter input::-webkit-input-placeholder { color:#AAA; }
#maincontent div.searchtabledivoutter input:-moz-placeholder { color:#AAA; }
#maincontent div.searchtabledivoutter input::-moz-placeholder { color:#AAA; }
#maincontent div.searchtabledivoutter input:-ms-input-placeholder { color:#AAA; }
#maincontent div.searchtabledivoutter select {color: #AAA;}
#maincontent div.searchtabledivoutter select option {color: #AAA;}
#maincontent div.searchtabledivoutter img.floatingSort {height:20px; float:right;margin-bottom:-50px;position:relative; top:-25px; z-index:1;}
#maincontent div.searchtabledivinner { width:100%; margin:auto; height:100%; overflow:scroll; overflow-y:scroll; overflow-x:hidden; /*border:1px #000 solid;*/ text-align:left;}
#maincontent div.searchtabledivoutter table{ width:100%; table-layout:fixed;}
#maincontent div.searchtabledivoutter table tr:hover{ background:#DDD;}
#maincontent div.searchtabledivoutter table .searchtableicon{ width:20px; text-align:center;}
#maincontent div.searchtabledivoutter table .searchtablecheckbox{ width:40px; text-align:center;}
#maincontent div.searchtabledivoutter table tr{ line-height:20px; }
#maincontent div.searchtabledivoutter table td{ padding: 5px;}
#maincontent div.searchtabledivoutter table th{ text-align:center;}
#maincontent div.searchtabledivoutter table input.tableinput{ width:100%;}
#maincontent div.searchtabledivoutter table input.tableinput.daterange { width: 50% }
#maincontent div.searchtabledivoutter table input.tableinput.daterange { width: 50% }

/* ADVANCED TAB PAGE */
div.tabbedPage { margin: auto;}
div.tabbedPage div { border: 1px solid #AAAAAA; border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
div.tabbedPage li { position:relative; top:1px; border-top-left-radius:5px;border-top-right-radius:5px;}
div.tabbedPage div { border: 1px solid #AAAAAA !important; }
div.tabbedPage ul.tabList { }
div.tabbedPage li.ui-tabs-active { position: relative; top: 2px !important; z-index:2 !important; }
div.tabbedPage > ul > li > a > input { border-bottom: 0px; margin: 0px; width: 100% !important; height: 100% !important; box-sizing:border-box; position: absolute; top: 0px; left: 0px; background: rgba(0, 0, 0, 0); }
div.tabbedPage > ul > li > a > span.invisible { visibility:hidden; }

/* Map */
#leafletmap{ height:400px; width:100%; border:1px solid #000; }

/* Authentication overlay */
.authentication {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #FFF;
	font-size:20px;
	z-index:99; /* Loading icon has 100 */
}

.authwrapper {
	position: absolute;
	padding: 10px;
	top: 80px;
	left: 50%;
	width:470px;
	margin-left:-235px;
	border: 1px solid #000;
	text-align:center;
}

table.metadataTable {
	width: 100%;	
	margin-top:20px;
}

#maincontent > div#subTableDivWrapper > div#subTableDiv table.metadataTable tr.categoryRow{
	background: #BBB;
	border:1px solid #333;
}

#maincontent .app_red { background: #FAA; }
#maincontent .app_green { background: #AFA; }
#maincontent table.settingstable > tbody > tr > td:last-child.simpleTableImage { text-align: center; margin: 0px; }
#maincontent table.settingstable > tbody > tr > td:first-child > img.simpleTableImage { width: 100%; position: relative; height: initial}


#maincontent div.overview_percent tr:nth-child(2) { background: #AFA; }
#maincontent div.overview_percent tr:nth-child(3) { background: #FAA; }


/* Same design as settingstable */
#subTableDiv > div.popuptablewrapper { max-height: 400px; overflow-y:auto}
#maincontent table.popuptable { width: 89%; max-width:1000px; margin:auto;}
#maincontent table.popuptable, table.popuptable tr, table.popuptable td { border: 0px; }
#maincontent table.popuptable > tbody > tr:hover { background:#DDD;}
#maincontent table.popuptable > tbody > tr.hiddenCategoryEntry { display:none;}
#maincontent table.popuptable > tbody > tr.changedEntry { background: #FFA; }
#maincontent table.popuptable > tbody > tr.errorEntry { background: #FAA; display: table-row; }
#maincontent table.popuptable > tbody > tr > td:first-child > img {
	position: absolute;
	height: 20px;
	margin-top: 11px;
	margin-left: -40px;
}
#maincontent table.popuptable > tbody > tr.category { background:#DDD; font-size:20px; border:1px solid #AAA;}
#maincontent table.popuptable > tbody > tr.inactive { display:none;}
#maincontent table.popuptable > tbody > tr.automatic { display:none;}
#maincontent table.popuptable > tbody > tr > td {line-height:40px; }
#maincontent table.popuptable > tbody > tr > td > * { vertical-align:baseline; }

/* Field to expand / shrink tables */
#maincontent div.searchtabledivoutter .ui-resizable-s {
	background-image: url('include/img/dragicon.png');
	background-size:80px 20px;
	height:22px;
	margin: 0px -20px;
	background-repeat:no-repeat;
	background-position:calc(50% + 20px) 50%;;
	z-index:1;
}

#maincontent #errorOverlayDiv div, #maincontent #errorOverlayDiv ul * { font-size:27px; line-height:35px; }


input[type=text]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: url(../include/img/dropdown.png) no-repeat;
    width:2px;
    height:2px;
}

/* tooltips on right click */
#dialogDiv { width: 400px; overflow: auto}
.ui-dialog { z-index: 10000 }
#dialogDiv tr:hover { background: #DDD; }