/**
 * Responsive Anpassungen
 */

/* Allgemein
-------------*/

	.clear {
		clear: both;
		display: block;
		height: 0.03em;
		line-height: 0;
		font-size: 0;
	}

/* Bildbreite
--------------*/

	img {
		max-width: 100%;
		height: auto;
	}

/* Hauptinhalt - Abstände links und rechts
-------------------------------------------*/

	#main {
		padding-left: 10px;
		padding-right: 10px;
	}

/* Header: Suche
-----------------*/

	#suche_top {
		right: 100px;
		top: 30px;
		height: 30px;
		bottom: inherit;
	}

	#suche_top select[name='search_type'] {
		display: inline-block;
		width: auto;
		margin-right: 5px !important;
	}

	#suche_top input[name='search_string'] {
		width: auto;
		margin-right: 5px !important;
	}

	#suche_top button {
		width: auto;
		vertical-align: bottom;
		height: 28px;
		color: #fff;
		outline: none;
	}

	@media screen and (max-width: 767px) {

		#suche_top {
			display: none;
			position: relative;
			top: inherit;
			right: inherit;
			margin-top: 30px;
			box-sizing: border-box;
			padding: 10px;
			width: 100%;
			background-color: rgba(1,51,84,0.55);
			height: auto;
		}

		#suche_top form {
			text-align: right;
		}

	}

	@media screen and (max-width: 480px) {

		#suche_top select[name='search_type'],
		#suche_top input[name='search_string'],
		#suche_top button {
			width: 100%;
			margin-right: 0 !important;
			margin-bottom: 5px !important;
		}

		#suche_top {
			height: auto;
		}

		#logo_customer {
			right: 20px;
			top: 10px;
		}

		#suche_top {
			right: 0;
		}
	}

/* Logo
--------*/

	#logo {
		padding: 5px;
		margin-bottom: 10px;
	}

/* Menü-Toggle-Buttons
-----------------------*/

	.mobile-buttons {
		display: none;
	}

	@media screen and (max-width: 767px) {
		.mobile-buttons {
			display: block;
			position: relative;
			text-align: right;
			right: 70px;
			margin-top: 15px;
		}

		.mobile-buttons .fi-list,
		.mobile-buttons .fi-magnifying-glass {
			font-size: 21px;
			color: #FFF;
			margin-right: 10px;
		}
	}

/* Hauptnavigation
-------------------*/

	@media screen and (max-width: 767px) {

		#main_nav_top {
			display: none;
		}

		#main_nav_top ul {
			padding-bottom: 10px;
		}

		#main_nav_top li {
			float: none;
			display: block;
			border-bottom: 1px solid #fff;
		}

		#main_nav_top .ul_main_nav_right {
			padding: 10px;
		}

		#main_nav_top .ul_main_nav_right li {
			margin-bottom: 10px;
			border-bottom: none;
		}

	}

	@media screen and (max-width: 768px) {
		#main_nav_top .col-8 {
			width: 100%;
		}
	}

/* Login
---------*/

	.login-wrapper {
		width:500px;
		margin:20px auto;
	}

	.passwort_vergessen_login {
		margin: 10px 10px 0 0;
	}
	

	#login_benutzer {
		margin-right: 2%;
	}

	@media screen and (max-width: 520px) {
		.login-wrapper {
			width: 100%;
			margin: 0;
		}

		#login_start input {
			width: 100%;
			margin-bottom: 10px !important;
		}

		.passwort_vergessen_login {
			width: calc(50% - 5px);
			float: left;

		}
	}

	@media screen and (max-width: 320px) {
		.passwort_vergessen_login {
			width: 100%;
		}

	}

	#logo_customer {
		position: absolute;
		right: 5px;
		top: 5px;
		width: 35px;
	}

/* Hauptnavigation
-------------------*/

	#main_nav_sub:after,
	#top_sub_nav:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		font-size: 0;
	}

	@media screen and (max-width: 480px) {

		#main_nav_sub li {

			border-bottom: 1px solid #FFFFFF;
		}

		#top_sub_nav > div > ul > li {

		}
	}

/* File-Inputfelder
--------------------*/

	@media screen and (max-width: 480px) {
		.input_file label {
			margin-bottom: 20px;
		}
	}

/* Abstand-Klassen
-------------------*/

	.spacer-5 {
		display: block;
		height: 5px;
		line-height: 5px;
		clear: both;
	}

	.spacer-10 {
		display: block;
		height: 10px;
		line-height: 10px;
		clear: both;
	}

/**
 * Speichern-Block
 */

	div.save {
		width: 100%;
		background-image: none;
		background-color: transparent;
		position: relative;
	}

	div.save * {
		position: relative;
		z-index: 1;
	}

	div.save:hover {
		background-image: none;
	}

	div.save:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		font-size: 0;
	}

	.save::before {
		content: "";
		display: block;
		height: 10px;
		background-color: red;
		position: absolute;
		top: 0;
		right: 10px;
		bottom: 0;
		left: 10px;
		height: 100%;
		z-index: 0;
		background: url(../images/icon/bg_blue_line.jpg) repeat-x;
	}
	
	.saveover::before {
		right: 0px !important;
	}

	.saveover {
		margin-bottom: 10px !important;
	}
	
/**
 * Speichern-Block inline
 */

	div.submit_inline_box {
		background-image: none;
		background-color: transparent;
		position: relative;
	}

	div.submit_inline_box * {
		position: relative;
		z-index: 1;
	}

	div.submit_inline_box:hover {
		background-image: none;
	}

	div.submit_inline_box:after {
		content: "";
		display: block;
		clear: both;
		height: 1px;
		font-size: 0;
	}

	.submit_inline_box::before {
		content: "";
		display: block;
		height: 10px;
		background-color: red;
		position: absolute;
		top: 0;
		right: 10px;
		bottom: 0;
		left: 10px;
		height: 100%;
		z-index: 0;
		background: url(../images/icon/bg_blue_line.jpg) repeat-x;
	}

/**
 * Selectfelder müssen oben und unten
 * etwas kleineren Abstand haben damit sie sauber mit anderen
 * Eingabefelder fließen
 */

	select {
		padding-top: 4px;
		padding-bottom: 4px;
	}

/**
 * Positionierung von .input_file
 * Damit der innere Container aufgrund neuem box-Model nicht raus rutscht
 */

	.input_file {
		position: relative;
	}

/**
 * Fake-File input überlager
 */
	.input_file div.fake_file {
		left: 10px;
		right: 10px;
		width: calc(100% - 20px);
	}

/* Hauptkoordination
 * Popup (unten) zum Hinzufügen von Buchungen
----------------------------------------------*/

	.bottom_action_panel,
	.calender_nav_right_slider,
	.calender_nav_left_slider {
		box-sizing: border-box;
	}