header {
	 background-color:#AAAAAA;
	 font-family: AvenirNext-Regular;
	 /*margin:0px; This does not seem to work... :)*/ 
}
body {
	 /*background-color:#E5E5E5;*/
	 /*background-color:#fdfdff;*/
	 /*background-color:white;*/
	 background-position:top center;
	 background-color:#eeeef5;
	 font-family: AvenirNext-Regular;
	 font-size: 14px;
	 margin:0px
}
table,th,td, tr {
  /*border : 1px solid black;*/
	border:none;
	border-collapse: collapse;
	margin:0px;
}
th,td {
	padding: 0px;
	text-align: left;
}
a {
	color:inherit;
}
.itemdetails {
	margin-top:5px;
	font-size:12px;
}
.itemdetails th {
	font-weight:normal;
	font-size:13px;
	padding-left:2px;
	padding-right:2px;
	text-align:center;
}
.itemdetails th:nth-child(1) {
	padding-left:0px;
}
.itemdetails tr {
	line-height:100%;
}
tr.border-bottom th,tr.border-bottom td{
	border-bottom:2pt solid black;
}
tr.border-top th,tr.border-top td{
	border-top:2pt solid black;
}
tr.cost-settings:hover{
	background-color:#ccc;
}
td.cost-settings{
	padding-right:10px;
}
.itemdetails td {
	padding-top:2px;
	padding-bottom:2px;
}
.itemdetails td:nth-child(1) {  /*1st column cells in tables of class itemdetails*/
	/*width:85px;*/ /*set in js function instead - variable*/
	padding-right:4px;
	color:#888;
}
#mainContainer{
	width:1440px;
	background-color:white;
	margin-left:auto;
	margin-right:auto;
	/*border:1px solid black;*/
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
#headContainer{
	/* position:fixed; */ /*container needs to be moved on top if this is activated*/
	overflow:hidden;
	width:1440px;
	height:74px;
	min-height:74px;
	max-height:74px;
	/*border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;*/
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	/*box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2), 0 0 20px 0 rgba(0, 0, 0, 0.19);*/
}
#mainCanvasContainer{
	width:1440px;
	/*border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;*/
	padding-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	overflow:visible;
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	/*line-height:675px;*/ /*This might work if I force proper line-heights in all elements inside this container? */
}
#mainSteps {
	margin:0px; 
	margin-top:auto;
	width:100%; 
	height:26px;
	min-height:26px;
	max-height:26px;
	background-color:black; 
	color:#777; 
	padding:0px; 
	/*line-height:90%;*/
	display:flex;
	justify-content:space-between;
	align-items:initial;
	/*overflow:hidden;*/
}
#steps{
	font-size:13px;
	margin:0px;
	/*margin-right:10px;*/
	border-top:1px solid black;/*#666;*/
	display:inline-block;
}
.stepactive{
	color:black;
	background-color:#ddd;
	border-bottom:1px solid #ccc;
	border-left:1px solid #aaa;
	width:150px;
	line-height:24px;
	text-align:center;
	display:inline-block;
	cursor:default;
}
.steppassive{
	color:black;
	background-color:#bbb;
	border-bottom:1px solid #aaa;
	border-left:1px solid #999;
	width:150px;
	line-height:24px;
	text-align:center;
	display:inline-block;
	cursor:default;	
}
.steppassive:hover{
	background-color:#b3b3b3;
}

#useremail{
	width:200px;
	line-height:24px;
	color:#bbb;
	font-size:12px;
	display:inline-block;
	text-align:center;
	cursor:pointer;
	text-overflow: ellipsis;
	/* Required for text-overflow to do anything */
	white-space: nowrap;
	overflow: hidden;
}
#configurationmenuContainer{
	position:relative;
	display:inline-block;
}
#configurationname{
	width:265px;
	line-height:24px;
	margin:0px;
	font-size:13px;
	font-weight:normal;
	color:black;
	text-decoration:underline;
	background-color:#ddd;
	display:inline-block;
	text-align:center;
	border:1px solid black;
	border-radius:0px;
	/*vertical-align:bottom;*/
	
	
	
	
	
	
	
	/*
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	*/
	cursor:default;
	text-overflow: ellipsis;
	/* Required for text-overflow to do anything */
	white-space: nowrap;
	overflow: hidden;
}
#configurationname:hover,#configurationname:focus{
	background-color:#ccc;
}
.dropdownmenu {
    display: none;
    position: absolute;
    background-color: #ddd;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdownmenu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdownmenu a:hover {
	background-color: #ccc;
}
.show {
	display:block;
}
#configurationmenu{
	margin-left:0px;/*-268px;*/
	margin-top:0px;
}
#busServiceBox9b{
	background-color:#f5f5f5; !important
}
#busServiceBox9b:hover{
	background-color:#e7e7e7;
	cursor:default;
}
#versiontag{
	width:50px;
	/*height:24px;*/
	line-height:24px;
	font-size:12px;
	color:#bbb;
	text-align:right;
	display:inline-block;
	text-align:center;
	overflow:hidden;
}
	
#logos {
	width:445px;
	line-height:24px;/*not needed, used for testing*/
	padding:3px;
	padding-left:7px;
	padding-bottom:0px;
	margin:0px;
	background-color:#ddd;
	border:1px solid black;
	border-right:none;
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
	display:inline-block;
}
#topMenu   {
	margin:0px; 
	height:47px;
	min-height:47px;
	max-height:47px;
	/*width:100%; */
	/*background-color:#AAAAAA; */
	background-color:#ddd;
	color:#444;
	border-bottom: 1px solid #ccc;
	/*overflow:hidden;*/
	/*clear:both;*/
}
.menuBlock {
	/*position:relative;*/
	display: inline-block;
	max-height:36px;
	text-align: left;
	margin-top:0px;
	margin-left:12px;
	margin-top:5px;
	margin-bottom:5px;
	margin-right:0px;
	vertical-align:bottom;
	/*overflow:hidden;*/
}
.menuLabelContainer{
	line-height: 100%;
	/*height:15px;*/
	/*width: 240px;*/
	text-align:left;
	padding-left:0px;
	padding-bottom:0px;
	margin-bottom:0px;
}
.menuLabel {
	/*font-family: AvenirNext-Demibold;*/
	font-size: 13px;
	float:left;
	margin-left:2px;
	padding-bottom:1px;
	display:block;
}
.menuTag {
	font-size: 12px;
	color:#999;
	float:right;
}
#stopspinner{
	color:white;
	padding-left:20px;
	padding-top:15px;
	font-size:35px;
	cursor:pointer;
}
#instructions {
	width:233px;
	margin-left:-2px;
	margin-bottom:-3px;
	padding-bottom:0px;
	line-height:105%;
	font-size:13px;
	
}
.buttonContainer{
	/*width: 240px;*/
	text-align:left;
	padding-top:2px;
}
button,select {
	background-color:#fdfdfd;
	color:#666;
	height:22px;
	font-size: 12px;
	/*background-color: transparent;*/
	border: none;
	overflow:hidden;
	display: block;
	padding-left:5px;
	appearance:none;
	cursor:pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
}
button {
	width:108px;
	/*float:right;*/
}
.smallButton{
	display:inline-block;
	margin-right:1px;
	width:53px;
}
.configButton{
	display:inline-block;
	margin-right:1px;
	width:48px;
	height:22px;
	line-height:12px;
}
#continueButton {
	width:79px;
}
button:disabled{
	color:#bbb;
}
select {
	width:230px;
}
#tripDateSelector {
	width:83px;
	color:black;
	font-size:10px;
}
#energyPlotOptionSelector {
	color:black;
	font-size:12px;
}
option.rightadjust{
	text-align:right;
}
.topMenuItems{
	border:1px solid #ccc;
}
.subrouteLeftBorderMark{
	border-left:3px solid blue;
}
.stopLeftBorderMark{
	border-left:3px solid red;
}
.configLeftBorderMark{
	border-left:3px solid orange;/*#00bb00;*//*green;*//*#f4d942;*/
}
.depotLeftBorderMark{
	border-left:3px solid #aaa;
}
.noLeftBorderMark{
	border-left:1px solid #ccc;
}
.highlight {
	background-color:orange;/*#f4d942; /*green*/
}
#mapContainer {
	width:715px;
	/*height:900px;*/
	display:inline-block; 
	vertical-align:top;
	margin-left:10px;
	margin-top:10px;
	background-color: white;
	/*border: 1px solid #bbb;*/
}
#mapCanvas {
    width: 100%;
    height: 560px;/*675px;*/
	border:1px solid #c5c5c5;
    /*border:1px solid #555;*/
}
.elevationCharts {
    width: 351px;
    /*height: 222px;*/
    vertical-align:top;
    display:inline-block;
	/*border-top:1px solid #999;/*black;/*#c5c5c5;*/
	margin-top:7px;
	margin-left:-10px;
	/*padding:5px;*/
	/*border:1px solid #c5c5c5;*/
	overflow:visible;
    /*background-color:#c5c5c5;/*#85bffa;*/
    /*border:1px solid #555;*/
}
.tripDensityChart,#noSimultaneousTripsChart {
	height: 85px;
	vertical-align:bottom;
	background-color:white;
	/*overflow:hidden;*/
}
#noSimultaneousTripsTitle {
	height:auto;
	padding-top:5px;
	padding-left:5px;
}
#tripsPreviewContainer{
	width:360px;
	height:110px;
	background-color:white;
	font-size:10px;
	padding:5px;
	margin-left:0px;
	display:inline-block;
	overflow:hidden;
}
#stopsContainer, #chargePointListContainer {
	width:229px;
	display:inline-block; 
	vertical-align:top;
	margin-left:10px;
	margin-top:10px;
}
.boxHeader{
	background-color:#ddd; 
	padding-left:7px;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	height: 20px;
	/*padding-bottom:-5px;*/
}
.boxLabel {
	/*font-family: AvenirNext-Demibold;*/
	font-size: 14px;
	float:left;
	/*margin-left:2px;*/
	/*padding-bottom:1px;*/
	/*line-height:100%;*/
}
.boxTag {
	font-size: 12px;
	color:#999;
	float:right;
	padding-top:2px;
	padding-right:3px;
	/*line-height:140%;*/
} 
.boxButtonContainer{

}
.boxButton{
	display:inline-block;
	width:113px;
	height:20px;
	margin-top:2px;
	font-size:11px;
	border-right:1px solid #ddd;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}
.noMark{
	border-left:1px solid #ddd;
}
/*#getNavigationPathAndInfo{
	width:230px;
}*/
#stopsList {
	/*overflow:auto;*/
	border-top:none;
	cursor:pointer;
}
#stopsList:last-child {
	border-bottom:#fff; /*is this working?*/
}

#stopEditorContainer,#configurationContainer, #chargePointDetailsContainer,#depotEditorContainer,#depotLinkListContainer{/*#routesContainer, #chargePointsContainer {*/
	width:230px;
	/*height: 350px;*/
	display:inline-block; 
	vertical-align:top;
	margin-left:10px;
	margin-top:10px;
}
#configurationContainer {
	width:205px; 
	/*margin-left:8px;*/
}
#subRouteEditor,#stopEditor,#tripsBox,#busServiceBox,#chargePointSummaryBox,#chargePointBox, #depotEditor,#depotLinkEditor{ /*make this into a class ...*/
	background-color:white;
	font-size:14px;
	padding:5px;
	border-top:none;
}
.stopItem,.chargePointItem {
	background-color: #fff;
	/*height:25px;*/
	/*line-height:200%;*/
	/*width:100%;*/
	/*overflow:auto;*/
	font-size:14px;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 6px;
	padding-right: 2px;
	/*border-top:1px solid #ddd;*/
	border-bottom:1px solid #eee;
	/*clear:both;*/
}
.chargePointItem{
	margin-top:5px;
	border:1px solid #ddd;
}
.chargePointLeftBorderMark{
	border-left:3px solid red;
	background-color:#f2f2f2;
}
.transferLeftBorderMark{
	border-left:3px solid #555;
	background-color:#f2f2f2;
}
.linkItem {
	background-color: #fefefe;
	height:15px;
	line-height:100%;
	/*width:100%;*/
	font-size:12px;
	color:#aaa;
	display: block;
	padding-top:3px;
	padding-left:6px;
	border-bottom:1px solid #eee;
}
.stopItemLeftBorderMark{
	border-left:3px solid red;
	background-color:#f2f2f2;
}
.stopItem:hover,.chargePointItem:hover,.linkItem:hover{
	background-color:#eee;
}
.subrouteInConfig,.depotInConfig {
	border:1px solid #ddd;
	padding:5px;
	margin-top:10px;
	overflow:hidden;
}
.border_subtle { 
	/* 	used for direct assignment or indirect reference.*/
	/*border:1px solid #d7d7d7;*/
	border:1px solid #ddd;
}


button::-moz-focus-inner {
    padding: 0;
    border: 0
}
input::-moz-focus-inner {
    padding: 0;
    border: 0
}
/***************************/
/* INDEX 2 specifics BELOW */
/***************************/  
#mainBusServiceContainer{
	display:inline-block;
	vertical-align:top;
	width:1065px;
	margin-left:10px;
	margin-top:10px;
	border:none;/*1px solid black;*/
}
.busServiceContainer{
	/*width:100%;*/
	margin-top:5px;
	padding-left:1px;
	/*overflow:hidden;*/
}
.busContainer{
	width:1055px;/*70px;*/
	/*height:80px;*/
	vertical-align:top;
	padding-left:1px;
	/*display:inline-block;*/
	/*border-right:1px solid #ccc;*/
}
.serviceContainer{
	width:1045px;/*975px;*/
	height:90px;
	/*display:inline-block;*/
	padding-left:5px;
}
#leftCanvas{
	/*width:340px;*/
	/*height: 350px;*/
	display:inline-block;
	vertical-align:top;
	margin-left:10px;
	margin-top:10px;
}
#tripsContainer,#specialTripsContainer{
	width:340px;
	/*height: 350px;*/
	/*display:inline-block;
	vertical-align:top;
	margin-left:10px;
	margin-top:10px;*/
}
#keyParametersInvestmentContainer,#keyParametersAnnualContainer{
	width:1420px;
	margin-top:10px;
	margin-left:10px;
}
#tripsBoxHeader{
	margin-top:10px;
}
#tripsBoxLeft{
	width:159px;
	border-right:1px solid #ccc;
	padding-left:5px;
	display:inline-block;
}
#tripsBoxRight{
	width:154px;
	padding-left:5px;
	display:inline-block;
}
#busDetailsBoxLeft{
	width:180px;
	padding-left:5px;
	display:inline-block;
}
#busDetailsBoxRight{
	width:133px;
	border-left:1px solid #ccc;
	padding-left:5px;
	display:inline-block;
}
/*** slide-down menu (currently more a pop-up menu) ***/
.slideDownMenu { 
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 74px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%;/*100%;*/ /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /* below makes a dimmed or black background */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    
}
#depotSlideDownMenu{
	/*padding-left:320px;*/
	/*padding-top:100px;*/
}
/* Modal Content */
.slideDownMenu-content {
    position: relative;
    background-color: #ddd;
    color:black;
    /*color:#444;*/
    /*font-weight:bold;*/
    margin: auto;
    padding: 10px;
	padding-top: 5px;
    border: 1px solid #ccc;
    /*border-top:none;*/
    width: 500px;	/*80%;*/
    /*height:300px;*/
    /*left:460px;*/
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    /* uncomment below 4 lines to add animation (slide-down) */
    /*-webkit-animation-name: animatetop; 
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s*/
}
.slideDownMenu-content h{
	font-weight:bold;
	font-family:AvenirNext-demibold;
	margin:0;
}
#depotSlideDownMenuContent {
    position: fixed;
    left:50%;/*800px;*/
    margin-left:20px;
    /*top:100px;*/
	width:427px;
}
.slideDownMenu-content-bigBorder{
	border: 75px solid rgb(127, 0, 0);
    border: 75px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
/*** end slide-down menu ***/

/*** spinner (use slideDownMenu as container!) ***/
/*
#spinnerContainer {
	text-align:center;
	float:center;
}
*/
.spinner {
  position: absolute;
  left: calc(50% - 40px);
  top: 50%;
  z-index: 1;
  display:inline-block;
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid orange;
  width: 60px;
  height: 60px;
  transform: translate(-50%,0);
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 /*this could maybe be modified to make a gradient? (probably requires a solid background though)
.spinner::after {
  content: '';
  width: 85%;
  height: 85%;
  background: linear-gradient(45deg, rgba(255, 165, 0, 1) 0%, rgba(255, 165, 0, 1) 40%, rgba(255, 165, 0, 0.7) 60%, rgba(255, 165, 0, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-5%, -5%);
}
*/
.spinnerTextBox {
	position: absolute;
	left: 50%;
  	top: 50%;
	z-index: 1;
	border:none;
	padding-left: 15px;
	padding-right: 15px;
	padding-top:5px;
	height:25px;
	margin-top:100px;
	margin-left:0px;
	margin-right:0px;
	background-color:#888;
	color:white;
	display:none;/*controlled by javascript*/
	transform: translate(-50%,0);
}