/*=============================================
=            MAIN APP                         =
=============================================*/


/*----------  GENERAL STYLES  ----------*/

/* main app */

/* set general font for app */
body {
  font-family: 'Roboto', sans-serif;
}

/* activate box model */
*, *:before, *:after {
	box-sizing: border-box;
}

/* loader icon */
.loader {
  margin: auto;
    width: 32px;
    height: 32px;
}

/* material icons: size */
.material-icons.md-14{
	font-size: 14px;
  }

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-36 {
  font-size: 36px;
}

/* popup size modifiers */
.popup-480480 {
	width: 480px !important;
	height: 480px !important;
}

/* clickable element change cursor */
.abd-clickable {
	cursor: pointer;
}

.abd-zoomin {
	cursor: zoom-in;
}

.abd-zoomout {
	cursor: zoom-out;
}

/* change style on hover */
.abd-hover:hover {
	background-color: #EEEEEE;
}

/* top margin of 36px */
.abd-margin-top-36 {
	margin-top: 36px;
}

/* center content */
.align-center {
  text-align: center;
}

/* right align content */
.align-right {
  text-align: right;
}

/* accent colors for the framework7 material lightgreen theme */
.bg-lightgreen-accent-1 {
  background-color: #F1FC8B;
}

.bg-lightgreen-accent-2 {
  background-color: #E6F460;
}

.bg-lightgreen-accent-3 {
  background-color: #ACBC19;
}

.bg-lightgreen-accent-4 {
  background-color: #889606;
}

/* abd Hintergrundbild */
.abd-bg-image {
	background: url(../img/logo-288.png) no-repeat 70% center fixed;
}

/* wichtige Information */
.abd-important {
	background-color: #DD0000;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	padding: 0.1em;
	margin-bottom: 0.5em;
}

/* abd data table */
thead.abd-data-table>tr>td, thead.abd-data-table-na>tr>td {
	padding: 0.5em;
	color: rgba(0,0,0,0.54);
	border-bottom: 0.5px solid rgba(0,0,0,0.87);
}

tbody.abd-data-table>tr>td, tbody.abd-data-table-na>tr>td {
	padding: 0.5em;
	color: rgba(0,0,0,0.87);
}

tbody.abd-data-table>tr:nth-child(even) {
	background: #DDDDDD;
}

tbody.abd-data-table>tr:nth-child(odd) {
	background: #FFFFFF;
}

/* data table top level sidebar, non alternate rows */

.abd-data-table-na {
	width: 100%;
	border-collapse: collapse;
}

table.abd-data-table-na>thead>tr>td {
	padding: 0.5em;
	color: rgba(0,0,0,0.54);
	border-bottom: 0.5px solid rgba(0,0,0,0.87);
	font-size: 16px;
}

table.abd-data-table-na>tbody>tr>td {
	padding: 0.5em;
	color: #757575;
	font-size: 14px;
}

/* data table accordeon content sidebar, non alternate rows */

.abd-data-table-acna {
	margin-left: 1em;
	width: 95%;
	border-collapse: collapse;
}

table.abd-data-table-acna>thead>tr>td {
	padding: 0.5em;
	color: rgba(0,0,0,0.54);
	border-bottom: 0.5px solid rgba(0,0,0,0.87);
	font-size: 16px;
}

table.abd-data-table-acna>tbody>tr>td {
	padding: 0.5em;
	color: #757575;
	font-size: 14px;
}

td.abd-hover>a {
	color: #757575;
}

td a {
	display: block;
	width: 100%;
	height: 100%;
}

.abd-col-valign {
	vertical-align: top;
}

.abd-ta-icon {
	border: 1px solid #8bc34a;
	padding: 4px 6px 0px 6px;
	height: 48px;
	width: 48px;
}

.abd-city-head {
	border: 1px solid #8bc34a;
	font-size: 20px;
	color: #FFFFFF;
	background-color: #8bc34a;
	padding: 0 36px 0 24px;
}

.abd-list-txt {
	padding: 0px 6px 0px 24px;
}

.abd-list-txt-w {
	color: #FFFFFF;
	padding: 0px 6px 0px 6px;
}

.abd-list-num {
	text-align: right;
	color: #FFFFFF;
	padding: 0px 6px 0px 6px;
}

/* child row bottom padding */
.abd-row-padding-1 div {
	padding-bottom: 1em;
}

small {
	font-size: 0.7em;
}

.abd-info-bar {
	font-size: 16px;
	background-color: #386C88;
	color: #FFFFFF;
	height: 48px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}

div.abd-info-bar>a {
	color: #FFFFFF;
	float: right;
	padding-left: 24px;
}

.abd-table-full-width {
	width: 100%;
}

.abd-topline {
	border-top: 1px solid #303030;
}

.abd-scrollbox {
	width: 100%;
	max-height: 512px;
	overflow-y: scroll;
}

.efaosm-legend {
	background-color: #EEEEEE;
	padding: 8px;
	width: 100%;
}

/*----------  Framework 7.io elements  ----------*/

.list-block {
	margin: 0px 0px;
}

.badge {
	font-size: 11px;
}

.abd-tabbar-top {
	top: 0px !important;
}

.tabs {
	margin-top: 8px;
}

.item-text {
	max-height: 48px !important;
}

/* near stops */
.near-stops-cont {
 padding-top: 8px;
}

.near-stops {
	font-size:12px;
	font-weight:400;
	color:rgba(0,0,0,.87);
	background:#F1FC8B;
	display:inline-block;
	height:18px;
	line-height:18px;
	border-radius:9px;
	padding:0 8px;
	box-sizing:border-box;
	vertical-align:middle;
	display:-webkit-inline-box;
	display:-ms-inline-flexbox;
	display:-webkit-inline-flex;
	display:inline-flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	align-items:center;
	margin:2px 2px;
}

/* serving lines */
.sl-row {
	border-bottom: 1px solid #DDDDDD;
	padding-bottom: 8px;
}

.sl-row:after {
	content: "";
	display: table;
	clear: both;
}

.sl-id {
	float: right;
}

/* departure monitor */
.dep-row {
	border-bottom: 1px solid #DDDDDD;
	padding-bottom: 8px;
}

.dep-mot-icon {
	width:20px;
	height:20px;
	margin: 4px 4px -5px 11px;
}

.bg-dep-intime {
	background-color: #ACBC19;
	padding: 2px;
}

.bg-dep-late {
	background-color: #FA787E;
	padding: 2px;
}

.bg-dep-noreal {
	background-color: #DDDDDD;
	padding: 2px;
}

.bg-dep-cancelled {
	background-color: #303030;
	padding: 2px;
}

.dep-stop-point {
	float: right;
}

/* stop photos small - container */

.abd-pic-cont, .abd-pic-cont-old {
	position: relative;
	overflow: hidden;
	max-width: 640px;
	margin-top: 4px;
}

/* small photo - image */

.abd-pic-thumb {
	width: 100%;
	height: 100%;
	max-height: 360px;
	max-width: 640px;
}

/* small photo - header */
.abd-pic-cont > h1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background: rgba(0, 0, 0, 0.55);
	padding: 4px;
	color: white;
	margin: 0;
	font-size: 14px;
}

.abd-pic-cont-old > h1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background: rgba(247, 170, 6, 0.911);
	padding: 4px;
	color: white;
	margin: 0;
	font-size: 14px;
}

/* small photo - edit tools */
.abd-pic-cont > h3, .abd-pic-cont-old > h3 {
	position: absolute;
	top: 30px;
	left: 0px;
	padding: 4px;
	color: white;
	margin: 0;
}

/* small photo - public comments */
.abd-pic-legend {
	background-color: #EEEEEE;
	padding: 4px;
	margin-top: -6px;
	margin-bottom: 6px;
	width: 100%;
}

/* stop photos big - container */

.abd-pic-fullcont, .abd-pic-fullcont-old {
	position: relative;
	overflow: hidden;
	max-width: 1920px;
	margin-top: 4px;
}

/* big photo - zoomable by 2.5x */
.abd-pic-full {
	width: 100%;
	height: 100%;
	transition: -webkit-transform 0.25s ease;
	transition: transform 0.25s ease;
}

/* big photo - clicked */
.abd-pic-full:active {
	transform-origin: 66% 33%;
	-webkit-transform: scale(2.5);
	transform: scale(2.5);
}

/* big photo - header */
.abd-pic-fullcont > h1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background: rgba(0, 0, 0, 0.55);
	padding: 8px;
	color: white;
	margin: 0;
	font-size: 20px;
}

.abd-pic-fullcont-old > h1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background: rgba(247, 170, 6, 0.911);
	padding: 8px;
	color: white;
	margin: 0;
	font-size: 20px;
}

/* big photo - public comments */
.abd-pic-fullcont > h2, .abd-pic-fullcont-old > h2 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background: rgba(0, 0, 0, 0.55);
	padding: 8px;
	line-height: 28px;
	color: white;
	margin: 0;
	font-size: 14px;
}

/* big photo - close icon */
.abd-pic-fullcont > h3, .abd-pic-fullcont-old > h3 {
	position: absolute;
	top: 46px;
	right: 0px;
	width: 46px;
	background: rgba(0, 0, 0, 0.55);
	padding: 4px;
	color: white;
	margin: 0;
}

.abd-photo-date {
	float: right;
}

/* line map */
.head-mot-icon {
	margin: 0px 4px -10px 0px;
}

/*----------  ANGULAR FORMS  ----------*/

/* field error */
.field-error {
  color: #FA787E;
   font-size: 0.9em;
}

/*----------  Leaflet 1.2.0 elements  ----------*/

#stopMap {
	margin-top: 8px;
	height: 640px;
}

#stopListMap {
	height: 896px;
}

#lineMap {
	height: 896px;
}

/* Map Popup Header */

.efa-popup-header {
	background: #ddd;
	padding: 3px;
	font-weight: 700;
}
/*----------  LOGIN SCREEN  ----------*/

/* message box login screen */
.login-notification {
  color: white;
  text-align: center;
  padding: 0.25em;
}