/* Reset */
html, body, div, span, iframe, a
{
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

html, body {
	height: 100%;
	width: 100%;
}

@import
	url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Roboto');

/*
* {
	box-sizing: border-box;
}
*/

/* Farben:

	Grün blass:		#85A19F;
	Rot dunkel:		#B00000;

	Grau hell:		#F0F0F0;
	Grau mittel:	#A4A4A4;
	Grau dunkel:	#545454;

	Grau reserve:	#6B6B6B;

	yellow1: #FFFFE0
	yellow2; #fc0;
	  
    neu-grau: #333
    neu-blau: #37c0fb
    hc-blau: #008cd9
    
    violett-ganzhell: #e7e7fe
    violett-hell: #b9b9fa
    violett-hover: #9191f1 Org: 7272f5
    violett-dunkel: #6c6ce0 Org: 5a5af3
*/

.rot {
	background: LightCoral !important;
	color: black !important;
}

.gelb {
	background: LightYellow !important; /*FACC2E*/
	color: black !important;
}

.gruen {
	background: LightGreen !important; /*bcfe00*/
	color: black !important;
}

.lightgrey {
	background: #d0d6e2 !important;
}

.grey-inv {
	color: #b9b9fa;
}

.rot-inv {
	color: #DF0101 !important;
}

.gelb-inv {
	color: #FFEF00!important; /*FACC2E*/
}

.gruen-inv {
	color: Green !important; /*bcfe00*/
}

.blau {
	background: #6c6ce0 !important; /*bcfe00*/
	color: white !important;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
	padding: 20px 0 10px 0;
}

.section-bg {
  background: #eeeef5; /* -color */
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #434175;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: #6c6ce0;
  bottom: 0;
  left: calc(50% - 25px);
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Section SelfServiceAdmin
--------------------------------------------------------------*/
#Overview {
	clear:left;	
}

#Contentbuttons {

}

#Bigbuttons {
	padding-top:20px;
}

#NewUsers{
	
}

#SelfServiceAdmin {
	
}

#SelfService {
	
}

#BookedEvents {
	
}

#RunningGames {
	
}

#Dashboard h3 {
  clear: left;
  margin: 0;
  padding: 50px 0 10px 0;
}

#Feedboard {
	width: 100%;
}
/*--------------------------------------------------------------
# DIV-Klassen
--------------------------------------------------------------*/
#inner-body {
	width: 100%;
	background: #eeeef5;
	overflow-x: hidden;
}

#wrapper {
	margin: auto;
	max-width: 800px;
	background: #fff;
}

#header {
/*	clear: left;
	float: left;*/
	background: #f2f4f7;
	color: #000;
	position: relative;
	width: 100%;
	top: 0;
	margin: 0px;
	padding: 0px;
}

#main {
	padding-bottom: 2em;/*
	width: 100%;
	margin: auto;
	text-align: center;
	padding: 0px;*/
	/*height: 100%;*/ /*calc(100vh - 50vh)*/ /*50em*/
	min-height: calc(100vH - 20em - 5em);
}

#footer {
	/*position: absolute;
	bottom: 0;
	height: 2em;*/
	background: #fff;
}

#header-logo {
	position: relative;
	background-position: center center;
	background-size: cover;
	height: 20em;
	text-align: center;
}

#header-logo-mobile {
	position: relative;
	display: none !important;
	text-align: left;
	margin: 0;
	padding: 6px;
	line-height: 1;
/*	color: #6c6ce0;
	font-size: 18px;
	width: 150px;
	font-weight: 700;
	letter-spacing: 2px;
	font-family: "Poppins", sans-serif; */
}

#header-logo-nav {
	position: relative;
	display: inline-block;
	/*clear: left;*/
	color: #6c6ce0;
	font-size: 18px;
	/*width: 200px;*/
	/*margin: auto;*/
	padding: 5px 0 0 10px;	
	/*line-height: 1;*/
	font-weight: 700;
	letter-spacing: 2px;
	font-family: "Poppins", sans-serif;
	text-align: left;
}

.headerselect {
	background: #b9b9fa !important;
	/*color: #fff;*/
	/*margin: auto;
	border: 0;
	border-radius: 0;
	text-align-last: center;
	text-align: center;*/
	cursor: pointer;
}

.headerselectno {
	margin: auto;
	background: #b9b9fa; /*#87CEFA;*/
	color: #000;
	border:0;
	border-radius:0;
	text-align-last:center;
	text-align:center;
	cursor:pointer;
}

#header-login {
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 152px);
	/*background: transparent;*/
	color: #000;
	padding: 0;
}

.content {
	width: 90%;
	margin: auto;
	text-align: left;
	/*margin: 4em 0 4em 5%;*/
}

#followboard {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 20px 0 20px 0;
	box-shadow: 0 1px 0 0 #dee0e3;
}

#followbackground {
	position: absolute;
	top: 50%;
	left: 40%;
	z-index: 0;
	color: #b9b9fa
}

#openmodulFollowbox {
	display: inline-block;
	vertical-align: top !important;
	padding-top: 0px;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

.followcolumn {
	display: inline-flex;
	flex-direction: column;
	flex-basis: 80px;
	flex: 1;
	padding: 6px;
	width:80px;
	height:80px;
	margin-right:10px;
}

.followcolumn img {
	float: left;
	display: inline-block;
	position: relative;
	width: 60px;
	height: 60px;
}

.grid-container,
.grid-dash-container,
.grid-plan-container,
.grid-week-container {
	width: 100%;
	display: grid;	
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.grid-container {
	align-items: center;
	justify-content:center;
	grid-template-columns: 50% 50%;
}

.grid-dash-container {
	align-items: center;
	justify-content:center;
	grid-template-columns: auto auto auto auto;
}

.grid-plan-container {
	align-items: start;
	justify-content: start;
	grid-template-columns: 25% 25% 25% 25%;
}

.grid-week-container {
	align-items: start;
	justify-content: start;
	grid-template-columns: 50% 50%;
}

.grid-item {
	padding: 0;
}

.border-top {
  border-top: 1px solid;
}

.border-bottom {
  border-bottom: 1px solid;
}

.grid-dash {
	width: 150px;
	padding: 10px;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	transition: all ease-in-out 0.3s;
}

.eventrow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	border: 0;
	box-shadow: 1px 1px 0 0 #dee0e3;
}

.eventcolumn {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
	padding: 6px;
}

.double-eventcolumn {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 2;
	padding: 6px;
}

.tripple-eventcolumn {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 3;
	padding: 6px;
}

.eventcolumn img {
	margin: 0.75em 1.5em 1em 0;
	float: left;
	display: inline-block;
	position: relative;
	width: 100px;
	height: 100px;
}

.img-fit {
	object-fit: cover;
	object-position: 50%;
}

.img-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

time.icon {
	font-size: 1em; /* change icon size */
	display: block;
	position: relative;
	width: 7em;
	height: 7em;
	background-color: #fff;
	border-radius: 0.6em;
	box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff,
		0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
	overflow: hidden;
}

time.icon * {
	display: block;
	width: 100%;
	font-size: 1em;
	font-weight: bold;
	font-style: normal;
	text-align: center;
}

time.icon strong {
	position: absolute;
	top: 0;
	padding: 0.4em 0;
	color: #fff;
	background-color: #6c6ce0; /*#fd9f1b;*/
	border-bottom: 1px dashed #6c6ce0; /*#f37302;*/
	box-shadow: 0 2px 0 #6c6ce0; /*#fd9f1b;*/
}

time.icon em {
	position: absolute;
	bottom: 0.3em;
	color: #6c6ce0; /*#fd9f1b;*/
}

time.icon span {
	font-size: 2.8em;
	letter-spacing: -0.05em;
	padding-top: 0.8em;
	color: #2f2f2f;
}

.col-2 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 20px;
	width: 100%;
	float: left;
	margin: 0 0 2em 0;
}

.col-2 img {
	margin: 0.75em 1.5em 1em 0;
	width: 180px;
	float: left;
	display: inline-block;
	position: relative;
}

.col-4 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 20px;
	width: 300px;
	float: left;
	margin: 0 0 2em 0;
}

.col-4 img {
	margin: 0 1.5em 1em 0;
	width: 140px;
	float: left;
	display: inline-block;
	position: relative;
}

.colgroup {
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;
	border: 0;
}

.image {
	border: 0;
	display: inline-block;
	position: relative;
	border-radius: 5px;
}

.image img {
	display: block;
	border-radius: 5px;
}

.image.left {
	display: block;
	float: left;
	margin: 0 2em 2em 0;
	position: relative;
	top: 0.25em;
}

.image.left img {
	display: block;
	width: 100%;
}

.image.featured {
	display: block;
}

.image.featured img {
	display: block;
	width: 100%;
}

#cookietext {
	position: fixed;
	z-index: 9999;
	bottom: 0;
	left: 0;
	clear: left;
	float: left;
	width: 100%;
	/*height: 140px;*/
	background: #333;
	color: #f2f4f7;
	padding: 2em 0;
	/*padding-top: 50px;*/
	text-align: center;
	font-size: 14px;
	/*top:60%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);*/
}

#errorpopup {
	padding: 50px 30px;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	transition: all ease-in-out 0.3s;
	position: fixed;
	display: block;
	z-index: 800;
	top: calc(50% - 80px);
	right: calc(50% - 130px);
	width: 260px;
	height: 160px;
	background: #FFFFFF;
}

#dashboard {

}

#pinboard {
	/*position: relative;
	clear: left;
	float: left;*/
	width: 95%;
	/*margin-top: 20px;*/
}

#dateboard {
	/*position: relative;
	clear: left;
	float: left;*/
	width: 95%;
	/*margin-top: 20px;*/
}

#gameboard {
	/*position: relative;
	float: left;*/
	width: 100%;
	/*margin-top: 20px;*/
}

.ersatztext {
	clear: left;
	float: left;
	display: none;
	visability: hidden;
	color: #6c6ce0;
	margin-top: 10px;
	margin-bottom: 10px;
}

#questionpopup {
	position: sticky;
	width: 720px;/*100%;*/
	height: 340px;
	top: calc(50% - 170px);
	left: calc(50% - 360px);
	margin-top: -160px;
	margin-left: -30px;
	z-index: 100;
	display: none;
	font-size: 1.5em;
	line-hight: 1.5em;
}

.jeppardy {
	display: inline-block;
	padding: 0 1em 0 1em;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
	border: solid 1px #dee0e3;
	display: table-cell;
	vertical-align: middle;
}

.kat {
	background: #6c6ce0;
	color: #fff;
	height: 4em;
}

.ques {
	font-weight: bold;
}

.answer {
	width: 40%;
	margin: 10px;
	background: #6c6ce0;
	color: #fff;
	height: 3.5em;
	display: table-cell;
	cursor: pointer;
}

.wrong {
	width: 140px;
	height: 44px;
	border-bottom: 3px solid red;
	-webkit-transform: translateY(-20px) translateX(-10px) rotate(20deg);
	position: absolute;
	margin-top: -54px;
	margin-left: -2px;
}

.wrong2 {
	width: 140px;
	height: 44px;
	border-bottom: 3px solid red;
	-webkit-transform: translateY(-20px) translateX(-10px) rotate(-20deg);
	position: absolute;
	margin-top: -54px;
	margin-left: -2px;
}

.focus {
	cursor: pointer;
	font-weight: bold;
}

#Progress {
	width: 90%;
	background-color: #6c6ce0;
	
}

#TimeBar {
	width: 1%;
	height: 10px;
	margin-top: 5px;
	background-color: white;
}

.long-text {
	white-space: nowrap;
	overflow: hidden;
	/*width: 100%;*/
	text-overflow: ellipsis;
}
/*
.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}
*/
/* mixin for multiline */
.block-with-text {
  overflow: hidden;
  position: relative;
  line-height: 2em;
  max-height: 3.6em;
  text-align: justify;
  margin-right: -0.5em;
  padding-right: 2em;
}
.block-with-text:before {
  content: '[...]';
  position: absolute;
  right: 0.2em;
  bottom: -0.5em;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

#more-text {
	display: none;
}

.vertical-text {
	transform: rotate(-90deg);
	/*
	transform-origin: left top 0;
	
	writing-mode: vertical-lr; 
    text-orientation: upright;
    */
}

.lp_contentbox {
	display: inline-block;
	width: 300px;
	margin: 10px;
}

.lp_contentbox img {
	margin-left: 10px;
	-webkit-clip-path: circle(50px at 50% 50%);
	clip-path: circle(50px at 50% 50%);
}

.dateselbox {
	display: inline-block;
	width: 40px;
	margin: 10px;
}

.wideboard {
	/*position: relative;*/
	padding-top: 20px;
}

.contentbox {
/*	padding: 1em;*/
/*	position: relative;
	clear: left;
	height: 100%;
*/
	font-size: 1em;
	line-height: 1.75em;
	padding-bottom: 20px;
	box-shadow: 0 1px 0 0 #dee0e3;
}

#statsboard {
	/*float: left;*/
	width: 100%;
	/*margin-top: 20px;*/
}

.statselement {
	float: left;
	width: calc(50% - 10px);
	margin-right: 10px;
}

#timer {
	display: none;
}

#postboard {
	/*position: relative;*/
	/*clear: left;
	float: left;*/
	width: 100%;
	/*margin-top: 20px;*/
	background: #fff;
}

.postrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/*clear: left;
	float: left;*/
	/* margin-bottom: 10px; */
	padding: 10px 0 10px 0;
	min-height: 20px;
	width: 100%;
	background: #fff;
}
.postrow img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 0;
}

.postattachment {
	position: relative;
	float: left;
	background: #FFFFFF;
	padding: 0.5em;
	border: 1px outset #333;
	width: 2.5em;
	height: 3.5em;
	margin-right: 10px;
	margin-left: 3px;
}

.postformatbutton {
	display: inline-block;
	height: 1em;
	line-height: 1em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 4px;
	text-decoration: none;
	border: solid 1px #dee0e3;
	border-color: #6c6ce0;
	color: #6c6ce0;
	cursor: pointer;
	white-space: nowrap;
}

.postformatbutton:hover {
	border-color: #6c6ce0 !important;
	background: #6c6ce0 !important;
	color: #ffffff !important;
}

.surveyboard {
	position: relative;
	clear: left;
	float: left;
	width: 95%;
	height: 100%;
	margin-top: 20px;
}
/*
.iconcircle {
	position: relative;
	width: 40px;
	height: 40px;
    border: 2px solid #e4e2d4;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 20px;
	background: #6c6ce0;
	color: white !important;
}
*/
/*
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(to right, #25c481, #25b7c4);
*/

.usercircle_big {
	width: 80px;
	height: 80px;
	border: none;
	border-radius: 40px;
	color: #eeeef5;
	font-size: 18pt;
	font-family: 'Poppins', sans-serif;
	background: -webkit-linear-gradient(135deg, #b9b9fa, #6c6ce0);
	background: linear-gradient(135deg, #b9b9fa, #6c6ce0);
}

.usercircle_small {
	position: relative;
	margin-left: 10px;
	width: 26px;
	height: 26px;
	border: none;
	/*border: 2px solid #e4e2d4;*/
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 20px;
	color: #eeeef5;
	font-size: 10pt;
	font-family: 'Poppins', sans-serif;
	background: -webkit-linear-gradient(135deg, #b9b9fa, #6c6ce0);
	background: linear-gradient(135deg, #b9b9fa, #6c6ce0);
}

.usercircle {
	/*position: relative;*/
	margin-left: 10px;
	width: 40px;
	height: 40px;
	border: none;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-radius: 20px;
	color: #eeeef5;
	font-size: 14pt;
	font-family: 'Poppins', sans-serif;
	background: -webkit-linear-gradient(135deg, #b9b9fa, #6c6ce0);
	background: linear-gradient(135deg, #b9b9fa, #6c6ce0);
}

.circle_active {
	background: #6c6ce0 !important;
}

.circle_inactive {
	background: #d0d6e2 !important;
}

.fotocircle {
	margin-left: 10px;
	-webkit-clip-path: circle(20px at 50% 50%);
	clip-path: circle(20px at 50% 50%);
}

.fotocircle_big {
	-webkit-clip-path: circle(40px at 50% 50%);
	clip-path: circle(40px at 50% 50%);
}

/* Profilfoto */
#picupload {
	margin-top: -40px;
}

#picbox {
	position: relative;
	float: left;
	margin: 0 auto 0 auto;
	width: 90%;
	overflow: hidden;
	border: 1px rgba(0, 0, 0, .4) solid;
}

/* Apply these styles only when #preview-pane has
 been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
	display: block;
	position: absolute;
	z-index: 2000;
	top: 13px;
	left: 220px;
	right: auto;
	padding: 6px;
	border: 1px rgba(0, 0, 0, .4) solid;
	background-color: white;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
 area based on the size of the thumbnail preview,
 specified here */
#preview-pane .preview-container {
	width: 100px;
	height: 100px;
	overflow: hidden;
}

/* ENDE Profilfoto */

#mapdiv {
	position: relative;
	clear: left;
	float: left;
	width: 580px;
	height: 450px;
	margin: auto;
	margin-top: 10px;
}

#mapdiv-small {
	position: relative;
	clear: left;
	float: left;
	width: 90%;
	height: 200px;
	margin: auto;
	margin-top: 10px;
}

.ajaxpopup {
	display: none;
	background: #FFFFFF;
	/*padding: 10px;*/
	padding: 50px 30px;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	transition: all ease-in-out 0.3s;
}

.menupopup {
	position: absolute;
	z-index: 100;
	display: none;
	float: left;
}

.contextpopup {
	position: absolute;
	z-index: 97;
	bottom: 35px;
	left:10px;
	width: 120px;
	height: 170px;
	display: none;
	background: #FFFFFF;
	color: black;
	padding: 10px;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	transition: all ease-in-out 0.3s;
}

.stamp {
	position: relative;
	z-index: 1;
	color: tomato;
	border: 2px dashed tomato;
    border-radius: 3px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    padding: 4px;
    -webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	background: white;
	box-shadow: 4px 8px rgba(0, 0, 0, 0.1);
	opacity:0.9;
}

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

.menuband_item {
	width: 100px;
	float: left;
	font-size: 1.6em;
	margin-right: 20px;
}

.menuband_item:hover {
	cursor: pointer;
	box-shadow: 0 4px 0 #e4e2d4;
}

.menu_aktiv {
	box-shadow: 0 4px 0 #6c6ce0;
}

.menu_contentexists {
	z-index: 33;
	background-color: #fe0000;
	position: absolute;
	top: 12px;
	left: -5px;
	width: 16px;
	height: 16px;
	border: none; /*1px solid white;*/
	display: table-cell;
	vertical-align: middle;
	padding-top: 1px;
	text-align: center;
	border-radius: 10px;
	color: white;
	font-size: 8pt;
}

#msgbox {/*
	position: fixed;
	z-index: 90;
	top: 0px;
	right: 50px;
	*/
}

#user {
	padding-right: 30px;
	/*padding-top: 7px;*/
	/*
	position: fixed;
	z-index: 90;
	top: 0px;
	right: 10px;
	padding-top: 7px;
	*/
}

/*
	grau-hell: #f2f4f7
	violett-hell: #b9b9fa
    violett-dunkel: #6c6ce0
*/

.profile {
	border: 0;
	border-collapse: collapse;
	border-radius: 10px;
	background: white; /* #b9b9fa */
	color: #444444;
}

.profile td {
	padding: 8px;
}

.profile tr {
	border: none;
    cursor: pointer;
}

.profile tr:last-child {
	border: none;
}

.profile-chev {
	color: #444444;
}

.profile-chev-li {
	color: #6c6ce0;
	font-size: 12px;
	width: 60px;
	cursor: pointer;
}

.profile-chev-li:after {
    content: ' zur\0000FCck';
    float: right;
    font-size: 14px;
    font-weight: 200;
	font-family: 'Poppins', sans-serif;
	margin-top: -1px;
}

.profile-btn {
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 6px 3px 0 3px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    width: 20px;
    height: 20px;
}

#userpopup,
#userpopup2 {
	position: fixed;
	display: none;
	top: calc(50% - 260px);
	left: calc(50% - 190px);
	width: 380px;
	height: 520px;
}

#userpopup {
	z-index: 20;
	padding: 0px !important;
	background: #f2f4f7;
}

#userpopup2 {
	z-index: 21;
	padding: 10px !important;
	background: #f2f4f7;
}

#search {
	position: absolute;
	z-index: 90;
	top: 0px;
	right: 90px;
}

#searchinput {
	display: none;
	position: absolute;
	z-index: 92;
	border-radius: 1px;
	margin-top: 0px;
	right: 7px;
}

.searchinput:hover {
	border-color: #6c6ce0 !important;
}

.suche:hover {
	background: #FFFFFF !important;
	color: #000000;
}

#centerpopup {
	position: fixed;
	display: none;
	z-index: 29;
	top: calc(50% - 260px);
	left: calc(50% - 180px);
	width: 360px;
	height: 520px;
	padding: 0;
}


.evcal span {
	font-size: 2.8em;
}

#newpost {
	position: relative;
	clear: left;
	float: left;
	display: none;
	width: 95%;
	/*height: 400px;*/
	/*margin-bottom: 20px;*/
}

#surveyNew {
	display: none;
}

#savepopup {
	z-index: 9999;
	display: none;
	position: fixed;
	width: 140px;
	height: 30px;
	top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -70px;
}

#addprofilepopup {
	z-index: 9999;
	display: none;
	position: sticky;
	width: 300px;
	height: 200px;
	top: calc(50% - 100px);
	left: 50%;
	margin-top: -100px;
	margin-left: -150px;
}

#mainpopup1 {
	position: fixed;
	display: none;
	z-index: 70;
	top: calc(50% - 300px);
	left: calc(50% - 210px);
	width: 420px;
	height: 600px;
}

#mainpopup2 {
	position: fixed;
	display: none;
	z-index: 101;
	top: 50px;
	right: 10px;
	width: 440px;
	height: 460px;
	text-align: left;
}

#bigpopup {
	position: fixed;
	display: none;
	z-index: 69;
	top: 10px;
	left: 10px;
	width: 600px;
	height: 620px;
	text-align: left;
}

#searchpopup {
	position: absolute;
	top: 60px;
	right: 20px;
	width: 440px;
	height: 350px;
	text-align: left;
}

#completeloader {
	z-index: 10;
	display: none;
	position: absolute;
	width: 100%;
	/*height: 100%;*/
	top: 0px;
	left: 0px;
	opacity: 0.9;
	background-color: white;
}

#completespinner {
	z-index: 11;
	display: none;
	position: -webkit-sticky;
    position: sticky;
	top: calc(50vH - 10px);
	left: calc(50vW - 10px);
	
	color: #6c6ce0;
}

.fa-spinner:before {
  color: transparent;
  position: relative;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(#b9b9fa 20%, #6c6ce0);
}

#searchloader {
	z-index: 99;
	display: none;
	position: absolute;
	width: 440px;
	height: 170px;
	top: 70px;
	right: 30px;
	background-color: rgba(0, 0, 0, 0.1);
	padding-top: 180px;
}

#bigloader {
	z-index: 99;
	display: none;
	position: fixed;
	width: 640px;
	height: 370px;
	top: 20px;
	left: 20px;
	background-color: rgba(0, 0, 0, 0.1);
	padding-top: 310px;
}

#addformular {
	clear: left;
	float: left;
	padding-bottom: 20px;
}

#addformular2 {
	clear: left;
	float: left;
	padding-bottom: 20px;
}

#tippopup {
	position: relative;
	display: inline-block;
	z-index: 0;
	margin-top: 10px;
	width: 98%;
	background: #FFFBD2; /*faf2cc*/
	color: black;
	padding: 10px;
}

.scroll {
	overflow: auto;
	border: 0px;
	padding: 0px;
}

.scrollupdown {
	position: fixed;
	bottom: 80px;
	left: calc(50% + 300px);
	display: none;
	z-index: 20;
}

.scrollstop {
    touch-action: none !important;
    -webkit-overflow-scrolling: none !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

#datepopup {
	position: fixed;
	display: none;
	z-index: 90;
	top: 200px;
	right: 20px;
	width: 420px;
	height: 280px;
	background: #FFFFFF;
	padding: 10px;
	border: 1px outset #333;
}

.datepopup {
	position: fixed;
	display: none;
	float: left;
	z-index: 90;
	top: 100px;
	right: 100px;
	width: 420px;
	height: 280px;
	background: #FFFFFF;
	padding: 10px;
	border: 1px outset #333;
}

.date_embedded {
	clear: left;
	float: left;
	height: 150px;
	padding: -10px 22px;
}

.popover-content {
	width: 40px;
	background: transparent;
	font-size: 14px;
	color: #000000;
	text-align: center;
}

.dreieck {
	position: absolute;
	z-index: 22;
	width: 0;
	height: 0;
	margin-left: 60px;
	margin-top: -22px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #000000;
}

/* -------------------------------------
   Scrollbars
   ------------------------------------- */

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #b9b9fa white;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: #b9b9fa;
  border-radius: 20px;
  border: 3px solid white;
}

/* -------------------------------------
   Markierungen u. Zustände
   ------------------------------------- */
   
.hinweis {
	font-family: Roboto, sans-serif;
	font-size: 10pt;
}

.warnung {
	color: #ff9900;
	border-color: #ff9900 !important;
}

.fehler {
	background: #b9b9fa !important;
	color: #FFFFFF;
}

.empfehlung {
	color: #b9b9fa !important;
	border-color: #b9b9fa !important;
}

.pflicht {
	color: #6c6ce0 !important;
	border-color: #6c6ce0 !important;
}

.nix {
	background-color: transparent;
	font-size: 9pt;
	border: none;
}

.selected {
	color: #6c6ce0;
	font-weight: bold;
}

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

.watermark {
	opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
	filter: alpha(opacity = 50); /* for <= IE 8 */
}

.minor-col {
	display: table-cell;
}

.print-col {
	display: none;
}

.icon-dark {
	color: #333;
}

.icon-menu {
	color: #eeeef5;
}

.icon-menu:hover {
	color: #6c6ce0;
}

.icon {
	color: #eeeef5;
}

.icon:hover {
	color: #6c6ce0;
}

.darkbg {
	background: #fafbfd !important;
}

.markup:hover {
	cursor: pointer;
	background: #b9b9fa;
}

.marked {
	background: #b9b9fa !important;
}

.marked-light {
	border: 2px;
	border-color: #b9b9fa !important;
}

.centered {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

/* -------------------------------------
   Pinnwand (Sticky Notes)
   ------------------------------------- */
h2.pin {
  font-weight: bold;
  font-size: 1em;
}
p.pin {
  font-size: 1rem;
  font-weight: normal;
}
ul.pin, li.pin {
  list-style:none;
}
 
ul.pin {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
ul.pin li {
  text-decoration:none;
  color:#000;
  background:#FFFBD2; /*#ffc*/
  display:block;
  height:6em;
  width:40%;
  padding:1em;
  margin:0.5em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transform: rotate(-6deg);
  transition: transform .15s linear;
}

ul.pin li:nth-child(even) {
  transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#E9F6AB; /*cfc*/
}
ul.pin li:nth-child(3n) {
  transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#EFC5D1; /*ccf*/
}
nul.pin li:nth-child(5n) {
  transform:rotate(5deg);
  position:relative;
  top:-10px;
}

ul.pin li:hover,ul li:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  transform: scale(1.25);
  position:relative;
  z-index:5;
}

/* -------------------------------------
   Generelle Elemente
   ------------------------------------- */

body {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
}

h1 {
	font-family: 'Poppins', sans-serif; /*Sternsinger, sans-serif;*/
	font-size: 2em;
	color: #434175;
}

h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 1.6em;
	color: #434175;
}

h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 1.4em;
	color: #434175;
}

title {
	background: #FFEE64;
}

.nl {
	display:block;
}

.br-a::after {
	content: '\A';
    white-space: pre;
}

.br-b::before {
	content: '\A';
    white-space: pre;
}

/* -------------------------------------
	Tabellen
   ------------------------------------- */
	
table {
	table-layout: fixed;
	border: 0px;
	border-color: #8BA5DB;
	border-style: solid;
	border-spacing: 0;
	padding: 1px;
	margin: 0px;
	white-space: nowrap;
	word-wrap: break-word;
}

table span {
	display: block;
	background-color: #ccc;
	border: 1px solid black;
	color: fff;
	height: 30px;
	width: 100%;
}

tr {
	border-bottom: 2px solid #333;
}

td,
th {
	padding: 4px;
}

.keinrahmen {
	border: 0px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;
}

.rahmen-rechts {
	box-shadow: 1px 0 0 0 #333;
	border-collapse: collapse;
}

.rahmen-links {
	box-shadow: -1px 0 0 0 #333;
	border-collapse: collapse;
}

.td-bb {
	/*min-height: 20px;*/
	border: 1px;
	border-style: none none solid none;
	border-color: #e4e2d4;
}

.coloredlist:nth-child(2n+0) {
	background: #d0d6e2;
}

.sortboth {
	padding-left: 16px !important;
	background-image: url('../img/sortboth.png');
	background-position: left center;
	background-size: 12px;
	background-repeat: no-repeat;
}

.sortup {
	padding-left: 16px !important;
	background-image: url('../img/up.png');
	background-position: left center;
	background-size: 12px;
	background-repeat: no-repeat;
}

.sortdown {
	padding-left: 16px !important;
	background-image: url('../img/down.png');
	background-position: left center;
	background-size: 12px;
	background-repeat: no-repeat;
}

.tabhead {
	color: #ffffff;
	font-size: 1em;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-bottom: 2px;
	background-color: #6c6ce0;
	border-radius: 3px;
}

.tabhead-kipp {
	writing-mode: vertical-rl;
}

.tabrow {
	clear: left;
	float: left;
}

.tabrowplain {
	display: flex;
	align-items: center;
	clear: left;
	float: left;
	margin-bottom: 1px;
	min-height: 20px;
}

.tabrowseperate {
	display: flex;
	align-items: center;
	clear: left;
	float: left;
	min-height: 20px;
	border: 1px;
	border-style: none none solid none;
	border-color: #e4e2d4;
}

.tabcolsmarked {
	border: 1px;
	border-style: none solid none solid;
}

.taballmarked {
	border: 1px;
	border-style: solid solid solid solid;
	border-color: #e4e2d4;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
	transition: all ease-in-out 0.3s;
}

.rTable {
	display: table;
}

.rTableRow {
	display: table-row;
}

.rTableHeading {
	display: table-header-group;
}

.rTableBody {
	display: table-row-group;
}

.rTableFoot {
	display: table-footer-group;
}

.rTableCell, .rTableHead {
	display: table-cell;
}

/* -------------------------------------
   Generelle Elemente
   ------------------------------------- */

.boxcaldate {
	min-width: 10px;
	min-height: 10px;
	font-size: 12px;
	line-height: 13px;
	padding: 5px;
	border: 0px;
	cursor: pointer;
	color: #000000;
	border-radius: 1px;
}

.boxcaldatefocus {
	min-width: 10px;
	min-height: 10px;
	font-size: 12px;
	line-height: 13px;
	padding: 5px;
	border: 0px;
	background: #6c6ce0;
	cursor: pointer;
	color: #ffffff;
	border-radius: 1px;
}

.boxbutton,
.boxbuttonalert,
.boxbuttonfocus {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 6px 20px;
  margin-bottom: 15px;
  border-radius: 3px;
  transition: 0.5s;
  border-radius: 50px;
}

.boxbutton {
  color: #6c6ce0;
  border: 2px solid #6c6ce0;
}

.boxbutton:hover,
.planentity:hover {
  background: #9191f1;
  color: #fff;
}

.boxbuttonfocus {
  background: #6c6ce0;
  color: #fff;
  border: 2px solid #6c6ce0;
  margin-right: 10px;
}

.boxbuttonfocus:hover {
  background: #9191f1;
  border-color: #9191f1;
}

.boxbuttonalert {
  background: tomato;
  color: #fff;
  border: 2px solid tomato;
  margin-right: 10px;
}

.boxbuttonalert:hover {
  background: #FF927E;
  border-color: #FF927E;
}

input[type="file"]{
    opacity: 0.5;
    z-index: -1;
    position: absolute;
    top: -1px;
    left: 0;
    width: 0.1px;
    height: 0.1px;
    user-select: none;
}

input[type="file"]:focus + label[for="files"]{
    border: 1px solid #6c6ce0;
}

label[for="files"]{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 6px 20px 6px 20px;
  margin-bottom: 15px;
  border-radius: 3px;
  transition: 0.5s;
  border-radius: 50px;
  background: white;
  color: #6c6ce0;
  border: 2px solid #6c6ce0;
}

label[for="files"]:hover{
  background: #9191f1;
  color: #fff;
}

.userbutton {
	width: 300px;
}

.addbutton {
/*	position: absolute;
	z-index: 3;
	top: 30px;
	right: 10px;*/
	cursor: pointer;
}

.movebutton,
.closebutton,
.closebuttonsmall {
	position: absolute;
	/*z-index: 10000;*/
	top: 10px;
	cursor: pointer;
	border: 0;
}

.closebutton,
.closebuttonsmall {
	right: 10px;
}

.closebutton:before,
.closebuttonsmall:before {
 	font: var(--fa-font-solid);
	content: '\f00d';
	display: inline-block;
	font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

.closebutton:before {
	font-size: 1.5em;
}
.closebuttonsmall:before {
	font-size: 1em;
}

.movebutton {
	left: 10px;
}

.movebutton:before {
 	font: var(--fa-font-solid);
	content: '\f0b2';
	font-size: 1.5em;
	display: inline-block;
	font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

.planhead {
	color: #ffffff;
	font-size: 1em;
	margin: 30px auto 0 auto;
	width: 100%;
	height: 30px;
	line-height: 30px;
	background-color: #333;
	border-radius: 8px 8px 0 0;
}

.eventelement,
.planelement,
.previewelement {
	border-radius: 0 0 8px 8px;
	width: calc(100% - 20px);
	padding: 0 10px 10px 10px;
	margin: 0 auto;
}

.eventelement {
	background-color: #eeeef5 !important; /*EFC5D1*/
}

.planelement {
	background-color: #f2f4f7 !important;
	
}
.previewelement {
	background-color: #FFFBD2 !important;
}

.planfield {
	background-color: #f2f4f7;
	background-image: repeating-linear-gradient(225deg, transparent, transparent 10px, rgba(255, 255, 255, .5) 10px, rgba(255, 255, 255, .5) 20px);
}

.planheadedit {
	color: #ffffff;
	font-size: 1em;
	padding: 4px;
	background-color: #6c6ce0;
	border-radius: 4px;
}

.planedit {
	border: solid 1px #6c6ce0 !important;
	color: #6c6ce0 !important;
	background-color: #f2f4f7 !important;
}

.planentity {
	 font-family: "Poppins", sans-serif;
	 font-weight: 400;
	 font-size: 12px;
	 letter-spacing: 0.5px;
	 display: inline-block;
	 margin: 0 5px 10px 5px;
	 padding: 2px;
	 float:left;
	 background: #6c6ce0;
	 color: #fff;
	 border: 2px solid #6c6ce0;
	 border-radius: 5px;
}

/* -------------------------------------
   Links
   ------------------------------------- */
   
a:link {
	color: #6c6ce0;
	font-weight: normal;
	text-decoration: none;
}

a:visited {
	color: #6c6ce0;
	font-weight: normal;
	text-decoration: none;
}

a:active {
	color: #e4e2d4;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	color: #6c6ce0;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer
}

a.w:link {
	color: #ffffff;
	font-weight: normal;
	/*font-size: 12px;*/
	text-decoration: none;
}

a.w:visited {
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
}

a.w:active {
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
}

a.w:hover {
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
}

/* ---------------------------
   Chat
   --------------------------- */
#chatlist {
	position: fixed;
	bottom: -1px;
	left: calc(50% + 20px);
	width: 360px;
	height: 16px; /*32*/
	z-index: 30;
	display: block;
	background: #434175;
	color: #FFFFFF;
	padding: 10px;
}

#chataltpopup {
	display: none;
	padding: 10px;
	position: fixed;
	bottom: 36px;
	left: calc(50% + 20px);
	width: 360px;
	height: 352px;
	z-index: 31;
	background: #fff;	
}

#chatpopup,
#chatlistpopup {
	padding: 10px;
	position: fixed;
	bottom: 36px;
	left: calc(50% + 20px);
	width: 360px;
	height: 450px;
}

#chatpopup {
	z-index: 32;
}

#chatlistpopup {
	z-index: 30;
}

.ChatBox {
	background: #FFFFFF;
	overflow: auto;
}

textarea#ChatMsg, textarea#ChatMsg:focus {
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.ChatOwn {
	clear: left;
	float: left;
	margin-left: calc(100% - 250px);
	margin-bottom: 10px;
    padding: 10px 20px; 
    width: 200px;
 	font-size: 14px;
 	color: #fff;
	background: #b9b9fa;
    border-radius: 10px;
    word-wrap: break-word !important;
    word-break: break-word;
}

.ChatOther {
	clear: left;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
    padding: 10px 20px; 
	width: 200px;
	font-size: 14px;
	background: #eeeef5;
    border-radius: 10px;
    word-wrap: break-word !important;
    word-break: break-word;
}

.chat-a {
	color: #FF9900;
}

.chat-a:hover {
	color: #FF9900;
}

#chatalert {
	display: none;
	position: fixed;
	z-index: 24;
	background: tomato; /* red */
	bottom: 16px;
	left: calc(50% + 258px);
	right: 50px;
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 5px;
/*	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: white;
	font-size: 8pt;*/
}

/* ---------------------------
  Annimationen 
---------------------------*/

.ffr {
	transition: right 1s;	
}

.blink {
    animation:blink 700ms infinite alternate;
}

@keyframes blink {
    from { background: #333; }
    to { background: #e4e2d4; }
}

.right-blink {
	animation: right-blink 2s linear infinite;
}

@keyframes right-blink {
	0% {
		opacity: 0;
	}
}

.einblenden {
    animation: einblenden 3s;
    -moz-animation: einblenden 3s; /* Für Firefox */
    -webkit-animation: einblenden 3s; /* Für Safari und Chrome */
    -o-animation: einblenden 3s; /* Für Opera */
}

@keyframes einblenden {
	 0%   {background: white; border: 0;}
	 99%   {background: white; border: 0;}
  	100% {background: #6c6ce0; border: 2px solid #6c6ce0;}
}

@-moz-keyframes einblenden { /* Für Firefox */
	 0%   {background: white; border: 0;}
	 99%   {background: white; border: 0;}
  	100% {background: #6c6ce0; border: 2px solid #6c6ce0;}
}

@-webkit-keyframes einblenden { /* Für Safari und Chrome */
	 0%   {background: white; border: 0;}
	 99%   {background: white; border: 0;}
  	100% {background: #6c6ce0; border: 2px solid #6c6ce0;}
}

@-o-keyframes einblenden { /* Für Opera */
	 0%   {background: white; border: 0;}
	 99%   {background: white; border: 0;}
  	100% {background: #6c6ce0; border: 2px solid #6c6ce0;}
}


/* ---------------------------
   Responsive Menu
   --------------------------- */
#nav-rahmen {
	position: fixed;
	display: flex;
	justify-content:space-between;
	z-index: 2;
	top: 0;
	width: min(800px, 100vw);
	/*width: 800px;*/
	height: 54px; /*42*/
	background: #434175;
}

.nav {
	position: relative;
	clear: right;
	float: right;
	display: inline-block;
	z-index: 3;
	height: 100%;
	margin: 0 auto;
}

.general {
	margin: auto;	
	padding: 10px 0;
}

.nav>ul {
	margin: 0;
	background: #434175;
	width: 120px;
}

.nav-item {
	width: 120px;
	float: left;
	display: inline;	
	text-align: left;
	zoom: 1;
	color: white; /* #e4e2d4 */
	cursor: pointer;
	padding: auto;
}

.nav-item a {
	display: block;
	padding: 0;
	color: white; /* #eeeef5 */
	background: #434175;
}

.nav-item span {
	display: block;
}

.nav-item a:hover {
	cursor: pointer;
	box-shadow: 0 2px 0 #6c6ce0;
	z-index: 99;
}

.nav-item ul {
	display: none;
	/*margin: 2px;*/
	padding: 0px;
}

.nav-item:hover ul {
	display: block;
	z-index: 5;
}

.nav-subitem a {
	margin: 0;
	padding: 10px;
}

.nav-subitem a {
	margin: 0;
	position: relative;
	clear: both; /* special IE6 */
}

.nav-large {
	display: block !important;
}

.nav-mobile,
.nav-mobile-tag {
	display: none !important;
}

.nav-mobile-tag {
	padding-top:2px;
	font-size:8pt;
}

.bar {
	width: 20px;
	height: 2px;
	background-color: #fff;
	margin: 4px 0;
	transition: 0.4s;
}

nav li {
	list-style-type: none;
}

nav li a {
	display: block;
	width: 100px;
	margin: 2px;
	background: #434175 !important;
}

ul.footer li {
	line-height: 2.5em;
	display: inline;
	margin: 0 20px;
}

ul.footer a {
	display: inline;
	/*width: 100%;
	margin-left: -20px;*/
}

.nav {
	position: relative;
	clear: right;
	float: right;
	display: inline-block;
	z-index: 3;
	height: 100%;
	margin: 0 auto;
}

/* -------------------------------------
   Emoticonlist
   ------------------------------------- */
   
ul.emos, li.emos {
	list-style: none;
	padding: 0;
	margin: 0;
}
 
ul.emos li {
	display: inline-block;
	margin-right: 10px;
	font-size: 16pt;
}

ul.emos li:last-child {
	margin: 0;
}


/* -------------------------------------
   Input
   ------------------------------------- */
input, select, textarea {
	border: none;
	padding: 2px;
	border-bottom: 1px solid #d0d6e2;
	border-left: 1px solid #d0d6e2;
	background: #FFFFFF;
	color: #000000;
	outline: 0;
	font-family: Roboto, sans-serif;
	font-size: 11pt;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.65em;
	resize: none;
}

input.login {
	border: none;
	/*border-radius: 0px !important;*/
	border-bottom: 1px solid #333 !important;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/*
.headerselect option {
	background: #b9b9fa !important;
	color: rgba(255, 255, 255, 0.75);
}
*/
.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 10px;
}

.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity = 0);
}

.formular {
	/* border: none; */
	border: solid 2px transparent; /* white */
	padding-right: 2em;
	text-decoration: none;
}

.formular, input[type="text"], input[type="password"], input[type="email"],
	select {
	height: 2em;
	margin: 0 20px 10px 0;
	width: 300px;
}

.form-label:after {
	position: relative;
	display: block;
	width: 100%;
	float: none;
	clear: left;
	content: ' [' attr(data-tooltip) ']'; /* \A */
	white-space: pre-line;
    color: #9191f1;
    font-size: 12px;
	font-family: 'Poppins', sans-serif;
	margin-top: -10px;
}

/*	
input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:4px;
    border: 1px solid #bbb;
    background: #FFFFFF;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#ddd;
  box-shadow: inset 0 0 0 2px white;
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:black;
  box-shadow: inset 0 0 0 2px white;
}
*/
input:invalid {
	color: #b00000 !important;
	border-color: #6c6ce0 !important;
}

input:valid {
	color: #000000 !important;
}

input[type="text"], input[type="password"], input[type="email"], select,
	textarea {
	/*
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
*/
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-moz-transition: border-color 0.2s ease, background-color 0.2s ease;
	-webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
	-ms-transition: border-color 0.2s ease, background-color 0.2s ease;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	/*border-radius: 6px;*/
	/*border: solid 2px #d0d6e2; */
	color: inherit;
	display: block;
	outline: 0;
	padding: 0 1em;
	text-decoration: none;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
	textarea:focus {
	border-color: #6c6ce0;
}

/* ------ */
.onoffswitch {
	position: relative;
	width: 50px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.onoffswitch-checkbox {
	display: none;
}

.onoffswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	height: 20px;
	padding: 0;
	line-height: 20px;
	border: 2px solid #999999;
	border-radius: 20px;
	background-color: #EEEEEE;
	transition: background-color 0.3s ease-in;
}

.onoffswitch-label:before {
	content: "";
	display: block;
	width: 20px;
	margin: 0px;
	background: #FFFFFF;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 28px;
	border: 2px solid #999999;
	border-radius: 20px;
	transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label {
	background-color: #6c6ce0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label, .onoffswitch-checkbox:checked+.onoffswitch-label:before
	{
	border-color: #6c6ce0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label:before {
	right: 0px;
}

/* ------ */
@media screen and (max-width: 1680px) {
	body, input, select, textarea {
		font-size: 11pt;
	}

	.formular, input[type="text"], input[type="password"], input[type="email"],
		select, textarea {
		width: 300px;
	}
	.icon-beb {
		position: absolute;
		top: 20px;
		padding-right: 20px;
		margin: auto;
	}
	.image.featured img {
		margin: 0 1em 1em 0;
	}
}

@media screen and (max-width: 1280px) {
	body, input, select, textarea {
		font-size: 11pt;
	}

	.formular, input[type="text"], input[type="password"], input[type="email"],
		select, textarea {
		width: 300px;
	}
	.icon-beb {
		position: absolute;
		top: 20px;
		padding-right: 20px;
		margin: auto;
	}
	.image.featured img {
		margin: 0 1em 1em 0;
	}
}
/*
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 1200px) 
and (orientation : landscape) {
	
	#questionpopup {
		position: sticky;
		margin-top: 0;
		margin-left: 0;
		top: 0px;
		left: 0px;
		width: calc(100vW - 4px);
		height: calc(100vH - 4px);
	}
}
*/
@media screen and (max-width: 980px) {
	body, input, select, textarea {
		font-size: 11pt;
	}

	.formular, input[type="text"], input[type="password"], input[type="email"],
		select, textarea {
		width: 250px;
	}
	.icon-beb {
		position: absolute;
		top: 20px;
		padding-right: 20px;
		margin: auto;
	}
	.image.featured img {
		margin: 0 1em 1em 0;
	}
	/*
	#questionpopup {
		position: absolute;
		margin-top: 0;
		margin-left: 0;
		top: 0px;
		left: 0px;
		width: calc(100vW - 4px);
		height: calc(100vH - 4px);
	}
	*/
}

/*
iPhone 8 has a 4.7-inch screen with a screen size (resolution): 750px × 1334px, 375px × 667px viewport 1, and a CSS Pixel Ratio of 2.
1 Property is displayed as width × height. Screen size (resolution) is the number of physical pixels present on a screen.
*/
@media screen and (max-width: 768px) {
	#openmodulFollowbox {
		padding-top: 0px;
	}
	
	#bigpopup {
		position: fixed;
		display: none;
		z-index: 69;
		top: 10px;
		left: 10px;
		width: calc(100% - 10px);
		height: 250px;
	}
	
	.movebutton {
		display: none;
	}

	.grid-dash-container,
	.grid-plan-container {
		grid-template-columns: 33% 33% 33%;
  	}
}

@media screen and (max-width: 666px) { /*736px*/
	body, input, select, textarea {
		font-size: 12pt;
	}
	body {
		background: #fff;
	}
	#main {
		background: #fff;
	}
	.formular, input[type="text"], input[type="password"], input[type="email"],
		select, textarea {
		width: 240px;
	}
	.icon-beb {
		position: relative;
		margin: auto;
	}
	.image.featured img {
		margin: 0 1em 1em 0;
	}
	#mainpopup1 {
		z-index: 170;
		top: 0px;
		left: 0px;
		margin: 0;
		width: calc(100vW - 4px);
		height: calc(100vH - 4px);
	}
	.nav-item-mobile-hide {
		display: none;
	}
	#nav-rahmen {
		justify-content: center;
		z-index: 10000;
		top: auto;
		bottom: 0;
		left: 0;
		text-align: left;
		background: #000;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.nav {
		display: flex;
		width: 100%;
		text-align: center;
		justify-content: space-around;
	}
	.nav-item {
		width: 60px;
		text-align: center;
	}
	.nav-item span {
		display: none;
	}
	.nav-subitem a {
		padding: 10px 0;
	}
	.nav-large {
		display: none !important;
	}
	.nav-mobile,
	.nav-mobile-tag {
		display: block !important;
	}
	.general {
		padding: 10px 0 20px;
	}
	nav ul {
		background: #000;
		z-index: 10000;
		width: 100%;
	}
	
	nav ul ul {
	  display: none;
	  position: absolute; 
	  left: 0;
	  right: auto;
	  z-index: 10000;
	  bottom: 54px;
	  width: 100%;
	}
	  
	nav ul li:hover > ul {
	  display:inherit;
	}
	
	nav ul ul li a {
		text-align: center;
		margin: auto;
		padding: 4px 0;
		width: 100%;
	}
	nav i {
		zoom: 1.5;
	}
	
	nav li a {
		background: #000 !important;
	}

	#nav-mob-filter {
		display: block;
	}
	#msgbox {
		display: none;
	}
	#user {
		display: none;
	}
	#header-logo {
		display: none;
	}
	#header-logo-mobile {
		display: flex !important;
		width:100%;
	}
	#header-logo-nav {
		display: none;
	}
/*	#followboard {
		background: #f2f4f7;
	}*/

	#chatlist{
		display:none;
	}
	#chataltpopup {
		top: auto;
		left: 0px;
		width: calc(100% - 20px);
		height: calc(100% - 170px);
		bottom: 54px;	
	}
	#centerpopup {
		top: auto;
		left: 0;
		bottom: 54px;
		width: 100%;
	}
	#bigpopup,
	#mainpopup1,
	#mainpopup2,
	#userpopup,
	#userpopup2,
	#chatpopup,
	#chatlistpopup {
		top: auto;
		left: 0;
		bottom: 54px;
		width: calc(100% - 10px);
	}
	#bigpopup,
	#centerpopup,
	#mainpopup1,
	#mainpopup2,
	#userpopup,
	#userpopup2 {
		height: calc(100% - 54px);
	}
	#bigpopup,
	#centerpopup {
		padding-top: 30px;
		top: 0;
	}
	#mainpopup1,
	#mainpopup2 {
		padding: 0 10px;
		width: calc(100% - 30px);
	}
	#chatpopup,
	#chatlistpopup {
		height: calc(100% - 60px);
	}	
	#chatalert {
		position: relative;
		z-index: 10000;
		bottom: 24px;
		top: auto;
		left: 42px;
	}
	.scrollstop {
	    position: fixed !important;
	}
	.scrollupdown {
		left: auto;
		right: 30px;
	}
	.grid-container {
  		grid-template-columns: 100%;
  	}
  	.grid-week-container {
  		grid-template-columns: 100%;
  	}
  	.grid-dash-container,
  	.grid-plan-container {
		grid-template-columns: 50% 50%;
	}
	.ajaxpopup {
		padding: 10px;
		/*width: calc(100% - 20px);*/
	}
	#centerpopup {
		padding: 0px !important;
	}
	#mainpopup1 {
		z-index: 170;
	}
	#mainpopup2 {
		z-index: 171;
	}
	#bigpopup {
		z-index: 172;
	}
	#datepopup {
		top: 0px;
		left: 0px;
		width: calc(100vW - 4px);
		height: 420px;
		padding: 0px;
	}
	#errorpopup {
		top: calc(50% - 90px);
		height: 180px;
	}
	.wideboard {
		/*width: 90%;*/
	}
	#pinboard {
		width: 90%;
	}
	ul.pin li {
	  height: 8em;
	  width: 80%;
	}
	#dateboard {
		width: 90%;
	}
	#statsboard {
		width: 90%;
	}
	#followboard {
	}
	#Feedbaord{
	width: 90%;
	}
	.statselement {
		width: 100%;
		padding: 0;
	}
	#tippopup {
		width: 95%;
	}
	.answer {
		width: 33%;
	}
	#postboard {
		width: 90%;
	}
	#newpost {
		/*height: 500px;*/
	}
	#surveyNew {
	}
	#searchinput {
		top: 40px;
		left: 0px;
		background: #333;
		width: 100%;
	}
	#searchpopup {
		top: 80px;
	}
	#searchloader {
		top: 90px;
	}
	ul.footer li {
		display: block;
		width: 100%;
		margin-left: -20px;
	}
	#cookietext {
		font-size: 12pt;
	}
	
	td.nowrap {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	table.breakable, tr.breakable { /*, td.breakable*/
		padding: 0;
		border: 1px solid #f2f4f7;
	}
	table.breakable {
		border: none;
	}
	thead.breakable {
		display: none;
	}
	tr.breakable {
		float: left;
		width: 100%;
		margin-bottom: 2em;
		/*margin-left: 0.2em;*/
		background: white;
	}
	td.breakhead {
		color: #ffffff;
		font-size: 1em;
		margin: 0 auto 0 auto;
		width: 100%;
		background-color: #333;
		border-radius: 8px 8px 0 0;
	}
	.breakcorners {
		border-radius: 8px;
	}
	td.breakable {
		float: left;
		width: calc(100% - 20px);
		padding: 10px;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	td.breakable:empty {
		display: none;
	}
	td.breakablelable::before {
		content: attr(data-label);
		color: white;
		background: #6c6ce0;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 33%;
		float: left;
		padding: 0.5em;
		font-weight: bold;
		margin: -0.5em 0.5em -0.5em -0.5em;
	}
	.survey-col {
		padding:0 !important;
	}
	.minor-col {
		display: none;
		visability: hidden;
	}
	.ersatztext {
		display: block;
	}
	.ersatztext::before {
		content:
			"Die Displaybreite reicht leider nicht für den vollen Funktionsumfang aus ... wenn möglich, drehe das Gerät bitte um 90 Grad.";
	}
	#mapdiv-small {
		width: 360px;
	}
}

/*--------------------------------------------------------------
# Media Queries: max-width 320px
--------------------------------------------------------------*/
@media screen and (max-width: 320px) {
    body, input, select, textarea {
        font-size: 14pt;
    }

    .formular, input[type="text"], input[type="password"], input[type="email"],
    select, textarea {
        width: 100%;
    }

    .icon-menu {
        font-size: 10pt;
    }

    .icon-beb {
        position: relative;
        margin: auto;
    }

    .image.featured img {
        margin: 0 0.5em 1em 0;
    }

    .ajaxpopup {
        padding: 10px;
        width: calc(100% - 20px);
    }

    #savepopup {
        height: 60px;
    }

    .col-4 {
        padding-right: 10px;
        width: 90%;
    }

    .col-4 img {
        margin: 0 1.5em 1em 0;
        width: 160px;
    }

    #centerpopup {
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        margin: 0;
    }

    .evcal span {
        font-size: 1.4em;
    }

    #mainpopup1, #mainpopup2, #bigpopup {
        z-index: 170;
        top: 0;
        left: 0;
        width: calc(100vw - 4px);
        height: 1540px;
        margin: 0;
        padding: 0;
    }

    #datepopup {
        top: 0;
        left: 0;
        width: calc(100vw - 4px);
        height: 420px;
        padding: 0;
    }

    .eventrow {
        width: 98%;
        flex-direction: column;
    }

    td.nowrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    table.breakable {
        border: none;
    }

    table.breakable, tr.breakable, td.breakable {
        padding: 0;
        border: 1px solid #f2f4f7;
    }

    thead.breakable {
        display: none;
    }

    tr.breakable {
        float: left;
        width: 100%;
        margin-bottom: 2em;
        background: white;
    }

    td.breakable {
        float: left;
        width: 100%;
        padding: 0.5em 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td.breakable::before {
        content: attr(data-label);
        color: white;
        background: #6c6ce0;
        width: 33%;
        float: left;
        padding: 0.5em;
        font-weight: bold;
        margin: -0.5em 0.5em -0.5em -0.5em;
    }

    .minor-col {
        display: none;
        visibility: hidden;
    }

    .ersatztext {
        display: block;
    }

    .ersatztext::before {
        content: "Die Displaybreite reicht leider nicht für den vollen Funktionsumfang aus ... wenn möglich, drehe das Gerät bitte um 90 Grad.";
    }

    #mapdiv-small {
        width: 360px;
    }
}

@media print {
	.noprint {
		display: none !important;
		visability: hidden !important;
	}
	
	.print-col {
		display: table-cell;
	}
}

/*
iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}
*/