/*---- pipoPRO web CSS ----*/
body {
	font-size: 10px;
	background: #f0f0f0;
	color:#2a5f7d;
}

body.noheader {
	background: #2a5f7c;
}

p, li {
	margin: 0 0 10px 0;
}

p.nomargin {
	margin: 0;
}

p.gap {
	margin: 5px 0;
}
strong { font-weight: bold;}

.gap {
	margin-top: 20px;
}

.gap-mini {
	margin-top: 20px;
}

h1 {
	font-size: 1.2em;
	margin: 0;
	font-weight: normal;
}

hr {
	margin: 5px 20px 20px 20px;
}

a {
	color: #fff;
	text-decoration: none!important;
}

.margin-top { margin-top: 20px; }
.margin-left { margin-left: 10px; }
.margin-right { margin-right: 10px; }
.margin-bottom { margin-bottom: 20px;}

.last-grid-margin {
	margin-bottom: 80px;
}

.last-grid-margin-xlrg {
	margin-bottom: 130px;
}

.xtra-padding { padding-top: 5px;}

.img20 {
	height: 20px;
	margin-top: 3px;
}

.hidden-lg, .hidden-md { display: none; }

.width10 { width: 10%; }
.width20 { width: 20%; }
.width30 { width: 30%; }
.width40 { width: 40%; }
.width50 { width: 50%; }
.width60 { width: 60%; }
.width70 { width: 70%; }
.width80 { width: 80%; }
.width90 { width: 90%; }
.width100 { width: 100%; }

.txt-bold { font-weight: 700; }
.txt-left { text-align: left; }
.txt-center { text-align: center; }
.txt-right { text-align: right; }

.txt-xsml { font-size: 0.7em;}
.txt-sml { font-size: 1.2em; }
.txt-lrg { font-size: 1.5em; }
.txt-xlrg { font-size: 2em;}
.txt-mega { font-size: 3em; font-weight: 700;}


/*.txt-blue { color: #2a5f7d;}*/
.txt-lgrey { color: #ddd}
.txt-grey { color: #929292;}
.txt-lblue { color: #80afc9; }

.infobox {
	width: 90%;
	height: auto;
	padding: 20px;
	border-radius: 5px;
	background: #F20056;
	margin-left: 5%;
}

/* ---- Bugfixer for desktop*/
.desktopfixer {
	position: absolute;
	left: 50%;
	width: 1200px;
	height: 100%;
	margin: 0;
	margin-left: -600px;
	background: #FFF;
	box-shadow: 0px 2px 4px 2px #ccc;
}

/* ---- Header */
header nav {
	/*position: fixed;*/
	top: 0;
	z-index: 1000;
	width: 100%;
	margin: 0 auto;
	padding:0 1%;
	background: #2a5f7d;
	height: 65px;
	line-height: 65px;
	color: #F0F0F0;
	/*font-size: 1.6em;*/
	-webkit-transition: background 0.4s ease, height 0.4s ease, line-height 0.4s ease;
	transition: background 0.4s ease, height 0.4s ease, line-height 0.4s ease;
}

/* ---- Header Light */
header nav {
	background: #f6f6f6;
	height: 45px;
	color: #2a5f7d;
	line-height: 40px;
}

hr.nav-hr {
	width: 100%;
	border-color: #2a5f7d;
	margin: 0;
	padding: 0;
}

/* ---- END Header Light */

header .nav-logo {
	/*margin-right: 5px;*/
}

header .nav-logo img {
	height: 20px;
	margin-top: 8px;
}

header .nav-home img {
	height: 25px;
}

/* ---- Main */
main {
	width: 100%;
	margin: 0 auto;
	background: #FFF;
}

.wrapper {
	padding: 0;
	height: auto;
	width:100%;
}
.pre-wrapper {
	height: 1px;
}

.wrapper.menu {
	background: #2a5f7d;
	/*position: absolute;
	top: 0;
	left: 0;
	height: 100%;*/
}

.pad-l-r {
	padding: 0 10px 0 10px;
}


/* Class to style js backbutton */
.backBtn {
	cursor: pointer;
}

.backicon {
	height: 30px;
	margin-top: 8px;
}

.chefmenu-icon {
	position: relative;
}

.chefmenu-icon img {
	height: 25px;
	margin-top: 10px;
}

.cm-alert-badge {
	position: absolute;
	top: -10px;
	left: 25px;
	font-size: 1.2em;
}
.cm-alert-badge2 {
	position: absolute;
	top: -10px;
	left: 30px;
	font-size: 1.2em;
}

button {
	background: #80afc9;
	position: fixed;
	bottom: 0;
	height: 60px;
	display: block;
	width: 1200px;
	border: none;
	margin-left: 0;
	color: #fff;
	font-size: 2.2em;
}

.btn-terminal img {
	height: 60px;
}

.btn-bottom-main {
	background: #80afc9;
	position: fixed;
	bottom: 0;
	font-size: 2.2em;
	height: 55px;
	width: 1200px;
	padding: 16px 0 0 0;
	z-index: 1000;
}
.btn-bottom-main-green {
	background: #10be99;
	position: fixed;
	bottom: 0;
	font-size: 2.2em;
	height: 55px;
	width: 100%;
	padding: 16px 0 0 0;
}
.btn-bottom-50-green {
	background: #17be99;
	position: fixed;
	bottom: 0;
	font-size: 2.2em;
	height: 55px;
	width: 50%;
	padding: 0px 0 0 0;
}

.btn-bottom-50-red {
	background: #d25163;
	position: fixed;
	bottom: 0;
	font-size: 2.2em;
	height: 55px;
	width: 50%;
	margin-left: 50%;
	padding: 0px 0 0 0;
}

.simple_btn {
	color: #80afc9;
	text-decoration: underline!important;
}

.simple_btn_red {
	color: #d25163;
	text-decoration: underline!important;
	display: block;
	margin-top: 40px;
}

.bottomspacer {
	height: 80px;
}

/* ---- Menu Navigation */

}
.menu-close {
	height: 100px;
}
.menu-close img {
	height: 20px;
	margin: 10px 10px 0 0;
}

a.btn-menu img {
	height: 30px;
	/*border: 1px solid #ff0;*/
	margin-bottom: 10px;
}
a.btn-menu {
	/*font-weight:100;*/
	text-decoration: none!important;
}

p.menu-header {
	color: #fff;
	margin: 20px 0 0 20px;
}

p.menu-header-settings {
	color: #fff;
	margin: -10px 0 0 20px;
}

p.menu-servercon {
	margin: 5px 0 0 20px;
}

p.menu-servercon img {
	height: 15px;
}

/* background filling to bottom */
.padding-bottom { padding-bottom: 20px;}

/* ---- Terminal */

a.bluelink {
	color: #80afc9;
	cursor: pointer;
}

.listheader {
	display: block;
	background: #ddd;
	height: 35px;
	color: #929292;
	padding: 10px 0 0 10px;
}

.list-btn {
	display: block;
	background: #2a5f7d;
	height: 35px;
	color: #fff;
	padding: 10px 0 0 10px;
}

/* ---- Hello / Bye Background Image */
.backimg {
	/*background: url(/img/welcome.png);*/
	background-repeat: no-repeat;
	position: fixed;
	background-size: cover;
	bottom: 0;
}

.backimg img {
	width: 100%;
}

.hello-bye {
	color: #929292;
}

/* ---- Absences Overview Calendar */
.dp-note {
    background: #17BE99;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    bottom: -2px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.dp-note {
	position: absolute;
}

.dp-note1 {
    background: #FF9933;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    bottom: -2px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.dp-note1 {
	position: absolute;
}

.dp-note2 {
    background: #669900;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    bottom: -2px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.dp-note2 {
	position: absolute;
}

.dp-note3 {
    background: #CC0000;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    bottom: -2px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.dp-note3 {
	position: absolute;
}

.centering-datepicker .datepicker{
	margin: 0 auto;
}

/* ---- Form Absences */
fieldset {
	border: 0;
}

.hide {
	display: none;
}

.active {
	display: block;
}

.forcetoleft {
	margin-left: -10px;
}

/* ---- Absences StepCounter */
.abs_stepcounter {
	margin: 0px 0px 0 0;
	}

/* ---- Choosen Date */
.choosendate {
	display: block;
	min-height: 30px;;
	width: 120px;
	border: 1px solid #ccc;
	padding:5px;
	}

/* ---- Edit Date Datepicker */
input.editdate-picker {
	border: none;
	outline: none;
	height: 60px;
	padding: 10px;
	text-align: center;
	width: 100%;
}

.edit-date-icon {
	height: 20px;
	position: relative;
	top: -39px;
	left: 120px;
	z-index: 0;
}

/* CM Calendarview */
/* overwrite dhtml css */
#scheduler_here.dhx_cal_container {
	width: 98%;
	height: 100%;
	position: absolute;
	top: 60px;
	left: 1%;
	font-size: 1.2em;
}

/* ---- Auswertungen */
div.infocircle {
	border: 2px solid #2a5f7d;
	border-radius: 80px;
	width: 120px;
	height: 120px;
	display: block;
	padding: 20px 0 0 0;
}

.infoicon img {
	height: 30px;
	left: 95px;
	top: -35px;
	position: relative;
}

/* ---- Setting */
.settings {
	margin: 0;
	padding: 0;
}

.settings img {
	width: 20px;
}

.settings-txt {
	margin-left: 20px;
	vertical-align: super;
	color: #ddd;
}

hr.settings-spacer {
	border: none;
	border-bottom: 1px solid #ddd;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* ---- Footer */
footer {
	height: 50px;
	background:#f3f3f3;
	padding: 10px 0 5px 0;
    bottom:0;
	width: 100%;
}

/* tablet Landscape */
/* ====== */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	body {
		background:#FFF;
		font-size: 11px;
	}

	body.noheader {
		background: #2a5f7c;
	}

	.desktopfixer {
		position: relative;
		left: 0%;
		width: 100%;
		height: 100%;
		margin-left: 0px;
		background: #FFF;
		box-shadow: none;
	}

	header nav {
		width: 100%;
	}

	.btn-bottom-main {
		width: 100%;
	}

	button {
		width: 100%;
	}

	/* reset special positioning for GLZ-Saldo on bigger Screens */
	.phone-positioning {
    	font-size: 1.2em;
    	padding-top: 8px;
    	text-align: right;
	}

}

/* tablet */
/* ====== */
@media screen and (max-width: 1050px) {
	body {
		background:#FFF;
		font-size: 11px;
	}

	body.noheader {
		background: #2a5f7c;
	}

	.desktopfixer {
		position: relative;
		left: 0%;
		width: 100%;
		height: 100%;
		margin-left: 0px;
		background: #FFF;
		box-shadow: none;
	}

	header nav {
		width: 100%;
	}

	.btn-bottom-main {
		width: 100%;
	}

	button {
		width: 100%;
	}

	/* reset special positioning for GLZ-Saldo on bigger Screens */
	.phone-positioning {
    	font-size: 1.2em;
    	padding-top: 8px;
    	text-align: right;
	}

}

/* phone */
/* ====== */
@media screen and (max-width: 595px) {

	body {
		font-size: 10px;
	}

	/* special positioning on phone screens for GLZ-Saldo */
	.phone-positioning {
		font-size: 1em;
		padding-top: 9px;
		text-align: center;
	}


}

/*
@media (min-width: 1024px) {

}
*/
/* desktop */
/* ====== */
@media (min-width: 1200px) {
	body {
		font-size: 11px;
	}

	body.noheader {
		background: #FFF;
	}
	.noheader .desktopfixer {
		background: #2a5f7c;
	}
	.backimg img {
    	width: 1200px;
    }

	.btn-bottom-50-green {
    width: 600px;
	}

	.btn-bottom-50-red {
    width: 600px;
    margin-left: 600px;
	}


}

/* Smart Ad
================================ */
.smartAd {
	position: fixed;
	bottom: 10px;
	width: 100%;
}

.smartAd img {
	width: 90%;
	margin: 0 5%;
	box-shadow: 0px 4px 10px 3px #afafaf;
	border-radius: 4px;
}

/* Smart Ad Phone Landscape */
/* ====== */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 960px)
and (orientation : landscape) {
	.smartAd img {
		width: 26%;
		margin: 0 37%;
	}
}

/* Smart Ad tablet Landscape */
/* ====== */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	.smartAd img {
		width: 70%;
		margin: 0 15%;
	}
}

/* Smart Ad tablet */
/* ====== */
@media screen and (max-width: 1050px) {
	.smartAd img {
		width: 80%;
		margin: 0 10%;
	}
}

/* Smart Ad desktop */
/* ====== */
@media (min-width: 1200px) {
	.smartAd {
		position: static;;
		bottom: 0;
		width: 100%;
		margin-top: 120px;
	}

	.smartAd img {
		width: 50%;
		margin: 0 25%;
	}
}