/* Timeline
------------*/

	.app-ui-timeline {
		position: relative;
		width: 100%;
	}

/* Zeitstrahl
--------------*/

	.app-ui-timeline--stripe {
		position: absolute;
		left: 5px;
		top: 0;
		width: 3px;
		height: 100%;
		background-color: #AAAAAA;
	}

/* Zeitstrahlüberschrift
-------------------------*/

	.app-ui-timeline--header {
		background-color: #f3f7f8;
		position: relative;
		z-index: 2;
		padding: 30px 0 10px 0;
	}

	.app-ui-timeline--header span {
		font-weight: 700;
	}

	.app-ui-timeline--header img {
		height: 24px;
		float: left;
		position: relative;
		top: -2px;
	}

/* Eintrag
-----------*/

	.app-ui-timeline--item {
		display: block;
		position: relative;
		margin-left: 30px;
		background-color: #FFFFFF;
		/*padding: 0 20px 18px 20px;*/
		margin-top: 20px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 2px 6px -3px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 2px 6px -3px rgba(0,0,0,0.75);
		box-shadow: 0px 2px 6px -3px rgba(0,0,0,0.75);
		z-index: 20;
	}

	/* Verbindungslinie
	--------------------*/

		.app-ui-timeline--item:before {
			content: '';
			display: block;
			position: absolute;
			left: -25px;
			top: 23px;
			height: 3px;
			width: 15px;
			background-color: #AAAAAA;
			z-index: 1;
		}

	/* Item-Kopfbereich
	--------------------*/

		.app-ui-timeline--itemheader {
			position: relative;
			cursor: pointer;
			background-image: url('/core/app/ui/timeline/pub/img/chevron-right.svg');
			background-repeat: no-repeat;
			background-position: right 15px top 50%;
			padding: 18px 20px 20px 20px;
			min-height: 60px;
		}

		.is-open .app-ui-timeline--itemheader {
			background-image: url('/core/app/ui/timeline/pub/img/chevron-down.svg');
		}


	/* Item-Inhaltsbereich
	-----------------------*/

		.app-ui-timeline--itembody {
			display: none;
			background-color: #F8F8F8;
			padding: 0 20px 20px 20px;
			border-top: 1px dashed #DDDDDD;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			margin: 0
		}

		.app-ui-timeline--itembody > div {
			margin-top: 20px;
		}

		.app-ui-timeline--itembody > div > p:first-of-type {
			margin-top: 0;
		}


/* Letzter Zeitstrahl-Knick
----------------------------*/

	.app-ui-timeline--item.is-last::after {
		content: '';
		display: block;
		width: 3px;
		height: calc(100% - 26px);
		background-color: #f3f7f8;
		position: absolute;
		left: -25px;
		bottom: 0;
	}

/* Toggler
-----------*/

	.app-ui-timeline--toggler {
		position: absolute;
		top: 0;
		right: 20px;
		width: 28px;
		height: 28px;
		text-align: center;
		background-color: red;
	}

	.app-ui-timeline--item.is-open .app-ui-timeline--toggler {
		transform: rotate(90deg);
	}


/* pickup--location
====================*/

	.pickup--location {
		position: relative;
	}

	.pickup--location div {
		margin-left:30px;
	}

	.pickup--location img {
		position: absolute;
		top: 0;
		left: 0;
	}