/* Allgemeine Definitionen */
.margtop30 {margin-top: 30px;}
.margtop50 {margin-top: 50px;}
.highlight-grey {	background-color: #999}
.mrgreen {color : #57aa1c;}
.mrred {background-color: #993300;}

/* Header */

.header {
	background-image: none;
	background-color: #fff;
	border-bottom: solid 2px #ccc;
	height: 70px;
}

.header-message, .open-nav, .open-socials {
	color: #57aa1c;
	font-size: 22px;
}

.open-socials i {
	font-size: 36px;
}

.open-socials img {padding-top: 10px;}

.center {text-align: center;}

.header-message {
	line-height: 28px;
	margin-top: 6px;
}

.header-message span {
	color: #6a6a6a;
	font-size: 18px;
}


/* Sidebar */
.sidebar-logo {
	background-image: none;
}

h1 {
	color: #57aa1c;
}

h3 {
	text-align: center;
}

p {line-height: 24px; font-size: 16px}


/* Content */
.content {
	min-height: 335px;
}


/* Button Overwrite */
.button {
	width: 100%;
	font-size: 1.6em;
	padding: 15px 20px;
	margin-bottom: 1px;
	border-radius: 5px;
}

.button-green {
	background-color: #57aa1c;
	border-radius: 5px;
}

.button-mrred {
	background-color: #993300;
	border-radius: 5px;
	color: #fff;
}

.button-grey {
	background-color: #c8c8c8;
	color: #57aa1c;
	border-radius: 5px;
}

.button-green:hover {
	background-color: rgba(87,170,28,0.85);
	color: #333 !important;
	transform: none;
}

.button-mrred:hover {
	background-color: rgba(153,51,0,0.85);
	color: #ccc !important;
	transform: none; 
}

.button-grey:hover {
	background-color: rgba(200,200,200,0.85);
	color: #333 !important;
	transform: none;
}

.red-notification{
	background-color:#993300!important;
	color:#FFFFFF;	
}

.green-notification{
	background-color:#57aa1c!important;
	color:#FFFFFF;	
}

.grey-notification{
	background-color:#cccccc!important;
	color:#57aa1c;	
}

/* Form Elemente */
.formFieldWrap {
    margin-top: 0px;
}



.borderred {border: solid 1px #993300}

label.contactNameField {font-size: 16px;}

.booked {background-color: #f0f0f0}

/* Toggle Überschreiben */
.deploy-toggle-1 {
  background-image: url("../images/ui/togg_down.png");
  background-position: 15px 19px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  padding: 15px 15px 15px 50px;
}

.toggle-1-active {
  background-image: url("../images/ui/togg_up.png");
}

/* Switch Checkbox */
.switch-1-on {
	background-color: #57aa1c
}

/* Auflistung Maschinen */
.toggle-1 {	margin-bottom: 5px;}
.deploy-toggle-1  {color: #57aa1c; text-transform: inherit; font-size: 18px; }
a.deploy-toggle-1:hover {color: #57aa1c;}
a.toggle-1-active {font-weight: bold;}
.toggle-content table {padding: 10px 5px; border: 0; border-top: solid 1px #ccc; background-color: #eee; margin-bottom: 0}
div.tablebutton {margin: 8px 0; padding: 0px 15px; text-align: center;}
div.tablebutton a.button {text-align: center;}

/* Inputfelder Datum-/Zeitauswahl */
#startdatum, #enddatum {min-width: 160px; width: 160px; font-size: 26px; margin-right: 5px; float: left}
#startzeit, #endzeit {width: 90px;  min-width: 90px; font-size: 26px}

/* Kalendertabelle Datumsauswahl */
h1.calendaroverview {font-weight: normal}

table.calendar td:hover {color: yellow; cursor: pointer; text-decoration: underline; opacity: 0.6}
table.calendar td {background-color: #57aa1c; color: #fff; text-shadow: none; font-weight: bold;}
table.calendar td.empty, table.calendar td.empty:hover {background-color: #eee}
table.calendar td.booked {background-color: #993300}


/* Variante für gleiche Styles der halben Tage */
table.calendar td.halfbooked {
	background-image: -webkit-gradient(
		linear,
		right top,
		right bottom,
		color-stop(0, #57AA1C),
		color-stop(1, #993300)
	);
	background-image: -o-linear-gradient(bottom, #57AA1C 50%, #993300 50%);
	background-image: -moz-linear-gradient(bottom, #57AA1C 50%, #993300 50%);
	background-image: -webkit-linear-gradient(bottom, #57AA1C 50%, #993300 50%);
	background-image: -ms-linear-gradient(bottom, #57AA1C 50%, #993300 50%);
	background-image: linear-gradient(to bottom, #57AA1C 50%, #993300 50%);
}

/* Variante für Start und Endtage */
table.calendar td.halfbookedstart {
	background-image: -webkit-gradient(
		linear,
		left top,
		left top,
		color-stop(0.02, #993300),
		color-stop(1, #57aa1c)
	);
	background-image: -o-linear-gradient(left top, #993300 0%, #57AA1C 100%);
	background-image: -moz-linear-gradient(left top, #993300 0%, #57AA1C 100%);
	background-image: -webkit-linear-gradient(left top, #993300 0%, #57AA1C 100%);
	background-image: -ms-linear-gradient(left top, #993300 0%, #57AA1C 100%);
	background-image: linear-gradient(to left top, #993300 0%, #57AA1C 100%);
}

table.calendar td.halfbookedend{
	background-image: -webkit-gradient(
		linear,
		left top,
		left top,
		color-stop(0.02, #57AA1C),
		color-stop(1, #993300)
	);
	background-image: -o-linear-gradient(left top, #57AA1C 0%, #993300 100%);
	background-image: -moz-linear-gradient(left top, #57AA1C 0%, #993300 100%);
	background-image: -webkit-linear-gradient(left top, #57AA1C 0%, #993300 100%);
	background-image: -ms-linear-gradient(left top, #57AA1C 0%, #993300 100%);
	background-image: linear-gradient(to left top, #57AA1C 0%, #993300 100%);
}


/* Footer */
.footer {
	margin-top: 80px;
	height: 60px;
	background-color: #6a6a6a;
	bottom: 0;
	width: 100%;
}

.footer p {
	padding-top: 13px;
	color: #dddddd;
}


/* Kalender */
table.calendar {width: 300px;}
table.calendar th, table.calendar td, table.calendar tr td:first-child, table.calendar tr th:first-child {padding: 8px 0; margin: 0; text-align: center;}



@media screen and (min-width:1024px) {
	
	.header, .content, .footer {
		margin-left: 300px;
		width: 600px;
	}
	
	.footer {
		display: none;
	}
	
	/* Navi dauerhaft einblenden */
	.snap-drawer-left {
		z-index: 10;
	}	
	
	a.open-nav, a.sidebar-close {display: none;}

	.button {
		margin-bottom: 5px;
	}	
	
}


@media screen and (max-width:800px) {
	
	.button {	
		margin-bottom: 5px;
	}
}