* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	min-width: 100%;
}

body {
	background-color: #607d8b;
	/*background: linear-gradient(to bottom, #FC466B 40px, #3F5EFB 100%);*/
	color: #607d8b;
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	min-width: 100%;
	min-height: 100%;
}

a {
	color: #00B8D4;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	padding: 0px;
	margin: 0px;
	vertical-align: middle; /* Abstand nach unten entfernen */
}

span.logotext {
	font-weight: bold;
	color: #524a6e;
	font-size: 72px;
	display: inline-block;
	padding: 0px 10px;
}

h1 {
	text-align:center;
	margin-bottom: 0px;
	/*margin-top: 60px; /*Header*/
	margin: 10px auto 10px;
	font-size: 30px;
	text-shadow: 3px 3px 2px #749292;
}

h3 {
	text-align:center;
	margin: 0px;
	padding: 0px 0px 5px 0px;
	font-size: 30px;
	text-shadow: 3px 3px 2px #749292;
}

div.contentwrapper {
	/* 5px seitliches Padding, wir wollen mobil ja nicht am Rand kleben */
	padding: 15px 15px 0;
	margin: auto;
	text-align: center;
	/*margin-top: 40px;*/
}

/* Navigation Anfang! */

#header {
	/*box-sizing: border-box;*/
	font-size: 22px;
	background-color: #546e7a;
	color: #ffffff;
	min-width: 100%;
	padding: 10px 10px;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	z-index: 10;
	text-shadow: 2px 2px 2px #485257;
	border-bottom: 1px solid #607d8b;
	box-sizing: border-box;
	position: relative;
}

#header .sidenav_toggle {
	position: absolute;
	left: 10px;
	top: 15px;
	cursor: pointer;
	color: black;
	box-sizing: border-box;
	cursor: pointer;
	position: absolute;
	height: 22px;
	width: 22px;
}


/* Animation von https://codepen.io/plavookac/pen/qomrMw */
.spinner {
	  box-sizing: border-box;
	  position: absolute;
	  height: 3px;
	  width: 100%;
	  background-color: #ffffff;
}

.horizontal {
	transition: all 0.3s;
	  box-sizing: border-box;
	  position: relative;
	  float: left;
	  margin-top: 3px;
}

.diagonal-part-1 {
	transition: all 0.3s;
	  position: relative;
	  transition: all 0.3s;
	  box-sizing: border-box;
	  float: left;
}

.diagonal-part-2 {
	transition: all 0.3s;
	  box-sizing: border-box;
	  position: relative;
	  float: left;
	  margin-top: 3px;
}

.horizontal.rotate {
	transition: all 0.3s;
	  box-sizing: border-box;
	  opacity: 0;
}

.diagonal-part-1.rotate {
	transition: all 0.3s;
	  float: left;
	transform: rotate(135deg);
	margin-top: 8px;
}

.diagonal-part-2.rotate {
	transition: all 0.3s;
	  float: left;
	transform: rotate(-135deg);
	  margin-top: -9px;
}

#sidenav {
	display: none;
	min-height: 100%;
	width: 360px;
	background-color: white;
	border-right: 1px solid #607d8b;
	position: absolute;
	top: 0px;
	left: 0px;
	background: linear-gradient(to bottom, #546e7a 40px, #37474f 100%);
	z-index: 9;
	box-sizing: border-box;
}

#sidenav ul.sidenav_menu {
	margin-top: 46px;
	/*padding-left: 0px;*/
	padding: 0px;
}

#sidenav li {
	list-style: none;
	display: block;
}

#sidenav li a {
	text-transform: uppercase;
	display: block;
	text-decoration: none;
	color: white;
	padding: 10px 20px;
	width: 320px;
	font-weight: bold;
	font-size: 14px;
	border-bottom: 1px solid #607d8b;
}

#sidenav ul.sidenav_submenu {
	padding: 0px;
	display: none;
}

#sidenav ul.sidenav_submenu li a {
	width: 300px;
	padding: 10px 20px 10px 40px;
}

#sidenav ul.sidenav_subsubmenu {
	padding: 0px;
	display: none;
}

#sidenav ul.sidenav_subsubmenu li a {
	width: 260px;
	padding: 10px 20px 10px 80px;
}

#sidenav li a:hover {
	background-color: #263238;
}

#sidenav div.userinfo {
	text-transform: uppercase;
	display: block;
	text-decoration: none;
	color: white;
	padding: 0px 20px;
	width: 320px;
	font-size: 10px;
	text-align: right;
}

/* Navigation Ende */

/* Spezielle Konfigurationen für die Loginseite Anfang */

div.login {
	width: 350px;
	/* 5px seitliches Padding, wir wollen mobil ja nicht am Rand kleben */
	padding: 8% 5px 0;
	margin: auto;
}

div.loginform {
	position: relative;
	z-index: 1;
	background: #FFFFFF;
	max-width: 350px;
	margin: 0 auto 100px;
	padding: 35px 45px 45px;
	text-align: center;
	box-shadow: 0 0 3em 0 rgba(255, 255, 255, 0.2);
	border-radius: 2em;
}

div.error {
	background: #fce4e4;
	border: 1px solid #cc0033;
	color: #cc0033;
	padding: 15px;
	margin: 0px 0px 15px;
	font-weight: bold;
}

div.loginform input {
	outline: 0;
	background: #b0bec5;
	width: 100%;
	border: 0;
	/*margin: 0 0 15px;*/
	margin-bottom: 5px;
	border: 1px solid #263238;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
	color: #000000;
}

div.loginform input[type="submit"] {
	text-transform: uppercase;
	outline: 0;
	background: #37474f;
	width: 100%;
	border: 0;
	padding: 15px;
	color: #FFFFFF;
	font-size: 14px;
	-webkit-transition: all 0.3 ease;
	transition: all 0.3 ease;
	cursor: pointer;
	margin-bottom: 0px;
}

div.loginform input[type="submit"]:hover {
	background-color: #455a64;
}

div.loginform h1 {
	padding: 0px;
	margin: 0px 0px 10px 0px;
	color: #263238;
}

/* Spezielle Konfigurationen für die Loginseite Ende */

/* Spezielle Konfigurationen für die Inhaltsseiten Beginn */

ul.contentlist, div.content {
	/*background: #eceff1;*/
	background: #ffffff;
	margin: 0 auto 0;
	padding: 5px;
	text-align: center;
	box-shadow: 0 0 3em 0 rgba(255, 255, 255, 0.2);
	display: inline-block;
	border-radius: 5px;
	min-width: 100%;
	box-sizing: border-box;
}

div.content form {
	border: 1px solid darkgray;
	border-radius: 5px;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}

div.content input {
	margin: 5px 0px;
	min-width: 160px;
}

div.content input[type="checkbox"], div.content input[type="radio"] {
	min-width: 15px;
	min-height: 15px;
	margin: auto 10px;
}

div.content input[type="checkbox"].nomargin, div.content fieldset input[type="radio"].nomargin {
	margin: 5px auto;
}

div.content input[type="text"], div.content input[type="password"] {
	padding: 5px;
	min-width: 150px;
}

div.content input[type="number"] {
    width: 75px;
    min-width: auto;
}

span.add_los, span.remove_los {
    cursor: pointer;
}

div.content div.error {
	background: #fce4e4;
	border: 1px solid #cc0033;
	color: #cc0033;
	padding: 15px;
	margin: 0px 0px 15px;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
}

div.content div.success {
	background: #DFF2BF;
	border: 1px solid #4F8A10;
	color: #4F8A10;
	padding: 15px;
	margin: 0px 0px 15px;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
}

ul.contentlist {
	list-style-type: none;
}

div.menubar {
	width: 100%;
	border-radius: 5px 5px 0px 0px;
	background-color: #90a4ae;
	border: 1px solid #607d8b;
	color: #455a64;
	text-align: center;
	padding: 5px 0px;
}

div.menubar a {
	display: inline-block;
	background-color: #CFD8DC;
	padding: 5px;
	border: 2px outset #607d8b;
	color: #546E7A;
}

div.menubar a:hover {
	background-color: #37474F;
	color: #CFD8DC;
	text-decoration: none;
	border: 2px inset #607d8b;
}

/* Spezielle Konfigurationen für die Inhaltsseiten Ende */

/* Spezielle Konfigurationen für Listenseiten (bspw. Dashboard) Beginn */
li.contentitem {
	width: 278px;
	padding: 10px;
	background-color: #546e7a;
	color: #37474f;
	box-shadow: 10px 10px 10px 0px rgba(2,26,44,0.4);
	border-radius: 5px;
	display: inline-block;
	margin: 5px 5px;
	vertical-align: top;
	position: relative;
	border: 1px solid #607d8b;
}

li.contentitem span.headline {
	font-weight: bold;
	font-size: 150%;
	color: #FFFFFF;
	text-shadow: 3px 3px 2px #37474f ;
}

li.contentitem div.content {
	height: 150px;
	background-color: #eceff1;
	width: 260px;
	border-radius: 5px;
	margin-top: 10px;
	padding: 10px;
	color: #455a64;
}

li.contentitem span.moveitem {
	position: absolute;
	right: 17px;
	top: 17px;
	width: 16px;
	height: 16px;
	border: 1px solid #455a64;
	cursor: pointer;
	background-color: white;
}

li.contentitemplaceholder {
	width: 280px;
	padding: 10px;
	background-color: #78909c;
	border-radius: 5px;
	display: inline-block;
	margin: 5px 5px;
	vertical-align: top;
	position: relative;
	height: 205px;
}

/* Spezielle Konfigurationen für das Dashboard Ende */

/* Spezielle Konfigurationen für Appartments Anfang */

li.roomitem {
	max-width: 100%;
	overflow: hidden;
	background-color: #cfd8dc;
	border-radius: 5px;
	text-align: left;
	border: 1px solid #90a4ae;
	padding: 5px 10px 5px 40px;
	box-sizing: border-box;
	margin: 2px;
	color: #455a64;
	position: relative;
	display: block;
}

/* Dots von https://codepen.io/fskirschbaum/pen/MYJNaj */

.dot-green {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #ABFF00;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
	/*position: absolute;
	left: 10px;
	top: 50%; 
	margin-top: -12px;*/
}

.dot-red {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #FF0000;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
	/*position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -12px;*/
}

.dot-gray {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #D3D3D3;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #444444 0 -1px 9px;
	/*position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -12px;*/
}

input.buttongreen {
	background-color: #006600;
}

input.buttonred {
	background-color: #990000;
}

input.buttongreen, input.buttonred {
	padding: 5px 10px;
	color: white;
	font-weight: bold;
	margin: 10px !important; 
}

form.editReservation input {
	margin: 0px;
}
	
/* Spezielle Konfigurationen für Appartments Ende */

/* Buchungsansicht für SW Beginn */

/* In beiden Seiten müssen die inner divs die selbe höhe haben, sonst wirds schnell asynchron */

div.bookingCal {
	display: table;
	margin: auto;
	font-weight: bold;
	text-align: left;
	border-collapse: collapse;
	table-layout: fixed;
}

div.bookingCal div.row {
	display: table-row;
	position: relative;
	max-width: 100%;
}

div.bookingCal div.row div {
	display: table-cell;
	white-space:nowrap;
	border: 1px solid #607d8b;
	padding: 2px 5px;
}

div.bookingCal div.row div span.wd {
	display: inline-block;
	position: relative;
	top: -3px;
}

div.bookingCal ul {
	padding: 0px 10px 0px 20px;
}

/* Buchungsansicht für SW Ende */

/* Apt Details Beginn */
table {
	border-collapse: collapse;
	color: #607d8b;
	margin: 5px auto;
	text-align: left;
}

table th {
	border: 1px solid #607d8b;
	font-weight: bold;
	padding: 2px;
	background-color: #78909C;
	color: #ECEFF1;
}

table td {
	padding: 3px 5px;
	border: 1px solid #607d8b;
}

table td.error {
	color: #ff0000;
	font-weight: bold;
}

table td.warning {
	color: #fda50f;
	font-weight: bold;
}

table td.success {
	color: #016420;
}

table.bookings {
	margin-bottom: 15px;
}

/* Apt Details Ende */

/* Reservierungsspezifisches Anfang */
table.resdetails {
	display: inline-block;
}

table.resdetails th {
	text-align: center;
}

table.resdetails .right {
	border-right-color: #8b6068;
}

table.resdetails .top {
	border-top-color: #8b6068;
}

div.information {
	width: 100%;
	padding: 5px;
}

div.information_top {
	background-color: #90a4ae;
	padding: 5px;
	color: #455a64;
	margin-bottom: 10px;
}

#resoptions form {
	display: inline-block;
	width: auto;
	background-color: #CFD8DC;
}

#resoptions label {
	text-align: center;
	font-size: 150%;
}

table tr.incomplete td {
	background-color: #FFEAEA;
}

table tr.complete td {
	background-color: #EAFFEA;
}

table tr.cardReported td {
	border: 2px solid #FF0000;
}

/* Reservierungsspezifisches Ende */

/* Felder für preise */

span.deleteRow {
	cursor: pointer;
}

/* Felder für Preise */

ul.block {
	display: inline-block;
	border: 1px solid darkgray;
	text-align: left;
	padding: 5px 10px 5px 20px;
}


ul.block li {
	padding: 0px;
}

div.formfield {
	box-sizing: border-box;
	width: 320px;
	display: inline-block;
	text-align: left;
	padding: 0px 5px;
}

div.formfield label {
	display: block;
	width: 300px;
	font-weight: bold;
	vertical-align: -4px;
}

div.formfield input, div.formfield select {
	width: 300px;
}

div.formfield input[type="checkbox"] {
	min-width: 1em;
	width: auto;
}

div.formfield select {
	padding: 5px;
}

div#tabs {
	margin-top: 10px;
}

div#tabs textarea, textarea.fullSize {
	width: 100%;
	min-height: 300px;
}

div.float-2 {
	float:left;
	width: 50%;
	box-sizing: border-box;
	border: 1px solid #cacaca;
}

span.clear {
	clear: both;
	display: block;
}

/* Tablesorter */
thead th {
    background-repeat: no-repeat;
    background-position: right center;
}

thead th.tablesorter-header {
	padding-right: 20px;
	background-image:url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
}

thead th.tablesorter-headerAsc {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
thead th.tablesorter-headerDesc {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

/* Reinigungscalender */
div.cleaningList {
	display: inline-block;
	text-align: left;
	padding: 5px;
}

div.cleaningList div.cleaningUpDown {
	cursor: pointer;
	text-align: center;
	margin: 5px 0px;
}

div.cleaningList div.cleaningUpDown:hover {
	text-decoration: underline;
}

div.cleaningList div.cleaningItems {
	display: none;
}

div.cleaningList input[type="text"] {
	width: 90%;
}

/* massenimporte */
.ui-checkboxradio-label {
	margin: 2px;
}

/* Buse Dashboard */
table.busetable {
	width: 100%;
}

table.busetable td {
	vertical-align: top;
}

td.buseleft {
	text-align: left;
}

td.busecenter {
	text-align: center;
}

td.buseright {
	text-align: right;
}

/* Für Accounts */
div.float {
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}

div.floatCenter {
	margin: 0 auto;
	text-align: center;
}

.strike {
	text-decoration: line-through;
}