body {
	/* padding-bottom: 60px; */
	height:100%;
	padding-top: 50px; /* body padding for fixed top nav */
	background-color: #9aafbb;
}
body.darkBlue{
	height:100%;
	padding-top: 50px; /* body padding for fixed top nav */
	background-color: #0a3249;
}

.left { float:left; }
.right { float:right; }
.center {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.badge{background-color:#9ab0bc;}

#header { margin:0px; padding:0px; height:50px; width:100%; font-family:Ariel; font-size:110%; text-align:left; }
#hdrPendingTransLbl{ cursor:pointer; }
#hdrPendingTransLbl .badge.newTrans { background-color:#ff9900;}
.resourceRow{ border-bottom:1px solid #58717f;}
.dividerRow{ border-top:1px solid #58717f;}
dl{margin-bottom:10px;}
dt{color:#58717f; font-size:12px;}
dd{color:white; font-size:15px;}

/* .mainScreen{ margin: 5px 0px; } */
.mainScreen{
	margin-top:5px;
}
#map{
	padding:0px;
}

.navbar-default .navbar-nav .active a, 
.navbar-default .navbar-nav .active a:hover{ background-color:#12557c;}

.navbar-default.navbar-brand{
	white-space:pre-line;
	word-wrap: break-word;
	position:absolute;
	font-size:18px;
	color:#FF9900;
}
.navbar-default .navbar-brand: hover{
	color:#FF9900;
}
@media(max-width: 350px){
	.navbar-brand.shrinkText{
		font-size:14px;
		color:#FF9900;
	}
}@media(min-width: 351px) and (max-width: 460px){
	.navbar-brand.shrinkText{
		font-size:15px;
		color:#FF9900;
	}
}@media(min-width: 461px){
	.navbar-brand.shrinkText{
		font-size:18px;
		color:#FF9900;
	}
}

.navbar-nav li.withBorder{
	border-top:1px solid white;
}

.navbar-default {
	background-image: -webkit-linear-gradient(top, #12557C 0%, #0A3249 100%);
	background-image: linear-gradient(to bottom, #12557C 0%, #0A3249 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff12557C', endColorstr='#ff0A3249', GradientType=0);
}
.navbar-toggle{
	border: 0px;
	background-color:#9ab0bc;
}

.navbar-default .navbar-toggle .icon-bar{background-color:#58717f;}


.page-header, footer { margin: 10px; }

.container {
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
}

.padding-md{
	padding-left:5px;
	padding-right:5px;
}

.padding-sm{
	padding-left:2px;
	padding-right:2px;
}

.screenTitle, .screenTitle a {
	font-size:110%;
	text-align:center;
	font-weight:bold;
	color: #12547b !important;
}
#map .screenTitle{
	color:white !important;
}
.speedTitle {
	font-size:100%;
	text-align:center;
	font-weight:bold;
	color: #12547b !important;
}

#transact .control-label, #ship .control-label{color:#12547b;}

.btn-admin{ margin-bottom:2px;}
.btn-map{background-color:#5d798b; margin:1px;}
.btn-map.active{background-color:#8da2ad;}

.statusBG{
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 13px;
}
.resourceBG, .shelter{
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 11px;
}
.resourceDiv{
	color: white;
}

table.map{
	width:100%;
	table-layout:fixed;
	color: #9ab0bc;
}
/* table.map.debrief{
	border:3px solid white;
}
 */
table.map td, table.map th{
	padding:2px;
	text-align:center;
}
table.map.debrief td, table.map.debrief th{
	padding: 4px 2px;
}

table.map th{
	cursor:default;
}

table.map .shelter{
	display:table-cell;
	padding-left: 10px;
}

table.map  td{
	cursor:pointer;
	border: 1px solid #9ab0bc;
}

table.map td span{
	display:inline-block;
	background-color:black;
	width:95%;
}

table.map td.selected {
	/* background-color: rgba(50,50,50,0.8); */
	border: 2px solid #ffcc66;
	font-weight: 900;
}
table.map td.selectedLeft{
	border-right: 2px solid #ffcc66;
}
table.map td.selectedAbove{
	border-bottom: 2px solid #ffcc66;
}

table.map .areaCode{
	width:22px;
}

table.flow{
	margin:0px auto;
}
table.flow td, table.flow th{
	padding:4px;
	text-align:center;
}
table.flow td.single{
	border:1px solid black;
	text-align:right;
}
table.flow td.doubleLeft{
	border-top:1px solid black;
	border-left:1px solid black;
	border-bottom:1px solid black;
	text-align:right;
}
table.flow td.doubleRight{
	border-top:1px solid black;
	border-right:1px solid black;
	border-bottom:1px solid black;
	text-align:right;
}
table.flow .noColor{
	color:#9aafbb;
}
@media(max-width: 350px){
	table.flow{
		font-size:100%;
	}
}
@media(min-width: 768px){
	table.flow{
		font-size:120%;
	}
}
@media(min-width: 992px){
	table.flow{
		font-size:150%;
	}
}
@media(min-width: 1200px){
	table.flow{
		font-size:180%;
	}
}

#mapLegend .RedOrange {
	background-image: -webkit-linear-gradient(left, red 0%, orange 100%);
	background-image: linear-gradient(to right, red 0%, orange 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='orange', GradientType=1);
}
#mapLegend .OrangeYellow {
	background-image: -webkit-linear-gradient(left, orange 0%, yellow 100%);
	background-image: linear-gradient(to right, orange 0%, yellow 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='yellow', GradientType=1);
}
#mapLegend .YellowGreen {
	background-image: -webkit-linear-gradient(left, yellow 0%, green 100%);
	background-image: linear-gradient(to right, yellow 0%, green 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='green', GradientType=1);
}
#mapLegend .GreenWhite {
	background-image: -webkit-linear-gradient(left, green 0%, white 100%);
	background-image: linear-gradient(to right, green 0%, white 100%);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='green', endColorstr='white', GradientType=1);
}
#mapLegend .axis path, #mapLegend .axis line{
	fill:none;
	stroke-width:0;
}
#mapLegend text{
	fill:white;
}


.panel-heading{
	font-weight:bold;
	background-color:#3a7191;
	border-color:#bce8f1;
	color: white;
}
.panel-heading.active{
	background-color:#12547b;
}
.panel-heading.outer{
	cursor:pointer;
}
.panel-heading .badge{
	float:right;
}
.panel-collapse.initiate {margin-top:5px; margin-bottom:5px;}

.panel-group{
	margin:0px;
}
.panel-group .list-group{
	margin-bottom:0;
}

.alert{
	padding: 6px 12px;
	margin-bottom: 0px;
}

.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
#timeLapse .axis path, #timeLapse .axis line{
	fill:none;
	stroke-width:0;
}
#timeLapse text{
	stroke:white;
}

/* .x.axis.fillrate path {display: none;} */

.saArea{
	fill: white;
	stroke: #000;
	shape-rendering: crispEdges;
}

.shipmentDot {
	stroke: #000;
}

/* #f2dede, #fcf8e3, #F0F0C8, #dff0d8, */
.resourceGroup{ color:black;}
.demandServed{ fill:#99ff66; }
.demandOverserved{ fill:#FFFF99; }
.resourcesUnused{ fill:#FFb84d; }
.demandUnserved{ fill:#ff5c33; }
.resourceBar {
	stroke: #000;
	stroke-width:1;
}

.histo{ width:100%;}
.histo rect{
	stroke:#000;
	stroke-width:1;
	/* fill:#0a3249; */
	fill:#335cff;
}

.timeLapseImage{ height:30px; }
.stepLine, .timeLapseLine{
	stroke-width:2;
	stroke: white;
}
.timeLapseCircle{
	stroke-width:1;
	stroke:white;
	fill:white;
}

.timeSeries { }
.timeSeries .graph { overflow: hidden; }
.timeSeries .graph .backgroundRect { opacity:.05; }
.timeSeries .series { overflow: hidden; }
.timeSeries .series .seriesLine { fill:none; opacity:1; stroke:white; stroke-width:2;}
.timeSeries .marker .markerLine { stroke:#000000; opacity:1; }
.timeSeries .axis path,
.timeSeries .axis line { fill: none; stroke: black; shape-rendering: crispEdges; }
.timeSeries .axis text { font-family: sans-serif; font-size: 11px; }
.timeSeries .timeSelector .extent { fill-opacity: .125; shape-rendering: crispEdges; }
.timeSeries .timeSelector .resize path { fill: #666; fill-opacity: .5; stroke: #000; stroke-width: 1.5px; }	


.orange{color:#FF9900 !important;}
.orangeBG, .orangeBG:hover{background-color:#FF9900; color:white;}

.vertical-align {
    display: flex;
    align-items: center;
}