/*original*/

/*
Farben:

Gemeindegrau: #ececec
Gemeindegrün: #008800
Tennisgelb: #ffff00

*/




body {
	margin: 0 auto;
	padding: 0;
	generic-family: sans-serif;
	font-family: Aptos, Tahoma, Verdana;
	background-color: #ececec; /* HIER FARBE ÄNDERN! */
}

.wrapper {
	padding: 0 auto;
	width: 100%;
}

nav {
	width: 100%;
	background: linear-gradient(90deg, #006600, #008800); /* HIER FARBE ÄNDERN! */
	position: fixed;
	min-height: 60px;
	z-index: 999;
}

.sidemenuleft {
	width: 11%;
	background-color: #ececec; /* HIER FARBE ÄNDERN! */
	float: left;
	/*padding: 0.5% 2%;*/
	/*padding: 0px 2% 80px 2%;*/
	padding: 80px 1% 80px 1%;
	/*position: fixed;*/
	/*top: 60px;*/
	/*min-height: 540px;*/
}

.content {
	width: 65%;
	float: left;
	/*padding: 0.5% 2%;*/
	padding: 80px 1% 80px 1%;
	/*margin: 0 auto;*/
	margin: 0 auto;
	background-color: #ffffff; /* HIER FARBE ÄNDERN! */
	min-height: 540px;
}

.sidebarright {
	width: 18%;
	background-color: #ececec; /* HIER FARBE ÄNDERN! */
	/*padding: 0.5% 2%;*/
	padding: 80px 1% 80px 1%;
	float: right;
	/*min-height: 540px;*/
}

footer {
	clear: both;
	text-align: center;
	padding: 10px 0px 6px 0px;
	position: fixed;
	bottom: 0;
	width: 100%;
	background: linear-gradient(90deg, #006600, #008800); /* HIER FARBE ÄNDERN! */
	color: #ffffff; /* HIER FARBE ÄNDERN! */
}

.footerspanwide {
	display: inline-block;
	margin-top: 4px;
}

.footerspansmall {
	display: none;
}

#footeranimation_rect {
	animation: blowUp 45s ease infinite;
	animation-delay: calc(var(--order) * 200ms + 3000ms);
	transform-origin: center;
	transform-box: fill-box;
	opacity: 0.8; fill: #ffffff;
}

.footeranimation {
	float: right;
	width: 140px;
}

@keyframes blowUp {
	1% {
		transform: scale(200%);
		opacity: 0.4;
		}
	3% {
		transform: scale(90%);
		opacity: 0.85;
		}
	4.4%, 6.6% {
		transform: scale(100%);
		opacity: 0.8;
		}
	7% {
		transform: rotateZ(0deg);
		}
	30%, 100% {
		transform: rotateZ(1800deg);
		}
}

.toggle {
	width: 100%;
	padding: 10px 20px;
	background: linear-gradient(90deg, #006600, #008800); /* HIER FARBE ÄNDERN! */
	text-align: right;
	box-sizing: border-box;
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	font-size: 30px;
	height: 60px;
	display: none;
}

.menu {
	right: 12px;
	display: block;
	position: absolute;
}

.menucheck {
	display: none;
}

.menu_bar {
	fill: #ffffff;
}

#menu1.active {
	animation: turn45cw 0.5s ease forwards;
	transform-origin: center;
	transform-box: fill-box;
}

#menu1.inactive {
	animation: return45cw 0.5s ease forwards;
	transform-origin: center;
	transform-box: fill-box;
}

#menu2.active {
	/*animation: disappear 0.5s ease forwards;*/
	transform: scaleY(0%);
	transform-origin: center;
	transform-box: fill-box;
	transition: 0.1s;
	transition-delay: 0.1s;
}

#menu2.inactive {
	/*animation: redisappear 0.5s ease forwards;*/
	transform: scaleY(100%);
	transform-origin: center;
	transform-box: fill-box;
	transition: 0.1s;
	transition-delay: 0.1s;
}

#menu3.active {
	animation: turn45acw 0.5s ease forwards;
	transform-origin: center;
	transform-box: fill-box;
}

#menu3.inactive {
	animation: return45acw 0.5s ease forwards;
	transform-origin: center;
	transform-box: fill-box;
}

@keyframes turn45cw {
	0% {
		transform: translateY(0px);
	}
	40% {
		transform: translateY(9px) rotateZ(0deg);
	}
	50%, 100% {
		transform: rotateZ(45deg) translate(6.3px, 6.3px) scaleX(125%);
	}
}

@keyframes return45cw {
	0% {
		transform: rotateZ(45deg) translate(6.3px, 6.3px) scaleX(125%);
	}
	40% {
		transform: translateY(9px) rotateZ(0deg);
	}
	50%, 100% {
		transform: translateY(0px);
	}
}

@keyframes turn45acw {
	0% {
		transform: translateY(0px);
	}
	40% {
		transform: translateY(-9px) rotateZ(0deg);
	}
	50%, 100% {
		transform: rotateZ(-45deg) translate(6.3px,-6.3px) scaleX(125%);
	}
}

@keyframes return45acw {
	0% {
		transform: rotateZ(-45deg) translate(6.3px,-6.3px) scaleX(125%);
	}
	40% {
		transform: translateY(-9px) rotateZ(0deg);
	}
	50%, 100% {
		transform: translateY(0px);
	}
}

th .tooltip {
	text-decoration-color: #ececec; /* HIER FARBE ÄNDERN! */
}

.tooltip {
	position: relative;
	font-style: italic;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: #006600; /* HIER FARBE ÄNDERN! */
	text-decoration-thickness: 2px;
}

.tooltip span[role=tooltip] {
	display: none;
}

.tooltip:hover span[role=tooltip] {
	display: block;
	position: absolute;
	writing-mode: horizontal-tb;
	border: 1px solid #006600; /* HIER FARBE ÄNDERN! */
	bottom: 1.5em;
	width: -moz-max-content;
	width: -webkit-max-content;
	/*left: 0em;*/
	text-align: left !important;
	padding: 5px 20px 5px 10px;
	/*font-variant: normal;*/
	font-weight: normal;
	font-size: 1.0em;
	color: #000000; /* HIER FARBE ÄNDERN! */
	opacity: 1.0 !important;
	background-color: #ffffff; /* HIER FARBE ÄNDERN! */
	z-index: 998;
}

.tabellenfilter {
	generic-family: sans-serif;
	font-family: Verdana, Arial;
	font-size: 20px;
	width: 50%;
}


.mygallery {
	display: grid;
	width: 90%;
	margin: auto;
	grid-template-columns: repeat(5, 17.6%);
	grid-column-gap: 3%;
	grid-row-gap: 4.5%;
	color: #444444; /* HIER FARBE ÄNDERN! */
	margin-top: 10px;
	margin-bottom: 100px;
}

.mygallery > [style^='--aspect-ratio']::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0;
	padding-bottom: calc(100% / (var(--aspect-ratio)));
}



.mybuttons2 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 49%);
	grid-column-gap: 2%;
	grid-row-gap: 0px;
	color: #444444; /* HIER FARBE ÄNDERN! */
}

.mybuttons3 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 32%);
	grid-column-gap: 2%;
	grid-row-gap: 0px;
	color: #444444; /* HIER FARBE ÄNDERN! */
}

.mybutton {
	background-color: #444444; /* HIER FARBE ÄNDERN! */
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	border-radius: 5px;
	padding: 10px 1px;
	font-size: 150%;
	text-align: center;
	border: 2px outset #cccccc; /* HIER FARBE ÄNDERN! */
}

.mybutton:hover {
	background-color: #ffff00; /* HIER FARBE ÄNDERN! */
	color: #000000; /* HIER FARBE ÄNDERN! */
	transition: 200ms;
}

.mybuttonselected {
	background-color: #006600; /* HIER FARBE ÄNDERN! */
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	border-radius: 5px;
	padding: 10px 1px;
	font-size: 150%;
	text-align: center;
	border: 2px outset #ececec; /* HIER FARBE ÄNDERN! */
}

.mybuttonselected:hover {
	background-color: #ffff00; /* HIER FARBE ÄNDERN! */
	color: #000000; /* HIER FARBE ÄNDERN! */
	transition: 200ms;
}

/* Beginn GRID Bildauswahl */

.bildauswahl {
	display: grid;
	grid-template-columns: 65% 32%;
	grid-column-gap: 3%;
	grid-row-gap: 4.5%;
}

/* Ende GRID Bildauswahl */


/* Beginn GRID myinputs */

.myinputs1 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(1, 100%);
	grid-column-gap: 2%;
	grid-row-gap: 0px;
}

.myinputs2 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 49%);
	grid-column-gap: 2%;
	grid-row-gap: 0px;
}

.myinputs3 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 32%);
	grid-column-gap: 2%;
	grid-row-gap: 0px;
}

.myinputs4 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, 23.5%);
	grid-column-gap: 2%;
	grid-row-gap: 0px;
}

.myinputs5 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(5, 19.6%);
	grid-column-gap: 0.5%;
	grid-row-gap: 6px;
}

.myinputs6 {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(6, 16.25%);
	grid-column-gap: 0.5%;
	grid-row-gap: 6px;
}

/* Ende GRID myinputs */

.vorschau_ansicht {
	width: 97%;
	padding: 15px 20px;
	border: 2px solid #444444; /* HIER FARBE ÄNDERN! */
	min-height: 300px;
	background: #ececec; /* HIER FARBE ÄNDERN! */
}

div.menuentry {
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	background-color: #006600; /* HIER FARBE ÄNDERN! */
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 5px;
	border: 2px outset #ececec; /* HIER FARBE ÄNDERN! */
	text-decoration: none;
}

div.menuentry:hover {
	color: #000000; /* HIER FARBE ÄNDERN! */
	background-color: #ffff00; /* HIER FARBE ÄNDERN! */
	transition: 200ms;
}

div a {
	color: #006600; /* HIER FARBE ÄNDERN! */
	text-decoration: none;
}


ul {
	width: 80%;
	margin: 0 auto;
	padding: 0;
}

ul a {
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	text-decoration: none;
}

ul li {
	list-style: none;
	display: inline-block;
	padding: 20px 15px;
}

ul li:hover {
	background-color: #ffff00; /* HIER FARBE ÄNDERN! */
	color: #000000; /* HIER FARBE ÄNDERN! */
	transition: 200ms;
}

.onlineusers {
	display: block;
	padding: 0px;
	list-style: circle;
}

.onlineusers:hover {
	background-color: none;
}

ul li a {
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	text-decoration: none;
}

.toggle {
	width: 100%;
	padding: 10px 20px;
	background-color: #006600; /* HIER FARBE ÄNDERN! */
	text-align: right;
	box-sizing: border-box;
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	font-size: 30px;
	display: none;
}

div.debugmodeSQL {
	display: block;
	/*position: absolute;*/
	generic-famliy: monospace;
	font-family: "Lucida Console", "Courier", "Courier New";
	color: #333333; /* HIER FARBE ÄNDERN! */
	background-color: #dd33aa; /* HIER FARBE ÄNDERN! */
	border-radius: 5px;
	padding: 5px;
	margin: 10px;
	text-align: left;
	z-index: 999;
}

textarea.debugmodeSQL {
	generic-family: monospace;
	font-family: "Lucida Console", "Courier", "Courier New";
	color: #dd33aa; /* HIER FARBE ÄNDERN! */
	background-color: #333333; /* HIER FARBE ÄNDERN! */
	width: 99.5%;
	text-align: left;
	resize: vertical;
	z-index: 999;
}

textarea.debugmodeSQL:focus {
	outline: none;
	border-color: #dd33aa; /* HIER FARBE ÄNDERN! */
}

.FontNotAvailable {
	color: #ff0000; /* HIER FARBE ÄNDERN! */
}

.HdreiButton {
	background-color: #ffff00; /* HIER FARBE ÄNDERN! */
	padding: 20px;
	text-align: center;
	margin: 1% 20%;
	border-radius: 10px;
}

.LinkOhneUnderline {
	text-decoration: none;
	color: #ffffff; /* HIER FARBE ÄNDERN! */
}

h1 {
	generic-family: sans-serif;
	font-family: Aptos, Tahoma, Verdana;
}

h2 {
	generic-family: sans-serif;
	font-family: Aptos, Tahoma, Verdana;
}

p {
	generic-family: sans-serif;
	font-family: Aptos, Tahoma, Verdana;
}

#my_glider_home {
	animation: wiglwogl 5s ease infinite;
	transform-origin: 65% 22%;
	transform-box: fill-box;
}

@keyframes wiglwogl {
	0% {
		transform: rotate(0deg);
		opacity: 0.9;
	}
	25% {
		transform: rotate(-0.3deg);
		opacity: 1.0;

	}
	65% {
		transform: rotate(0.7deg);
		opacity: 0.85;
	}
	100% {
		transform: rotate(0deg);
		opacity: 0.9;
	}
}



/* Beginn GRID AnwenderRechte */

.anwenderrechtecontainer {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 2%;
	padding-right: 3%;
	padding-left: 3%;
	grid-row-gap: 2px;
	margin-top: 5px;
}

/* Ende Grid AnwenderRechte */



.inputnumber {
	width: 95%;
	border: 0px;
	background: transparent;
	height: 24px;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	margin: 0;
	text-align: right;
}

.standardbutton {
	width: 100%;
	padding: 15px 30px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	background-color: #008800; /* HIER FARBE ÄNDERN! */
	color: #ffffff; /* HIER FARBE ÄNDERN! */
}

.standardbutton:hover {
	background-color: #ffff00; /* HIER FARBE ÄNDERN! */
	color: #000000; /* HIER FARBE ÄNDERN! */
}

fieldset {
	border: 0px;
	padding-left: 30px;
	/*display: block;*/
}

fieldset.standard {
	border: 1px solid #006600; /* HIER FARBE ÄNDERN! */
	padding-top: 16px;
	padding-left: 16px;
	margin-top: 4px;
}

input {
	generic-family: sans-serif;
	font-family: Aptos, Tahoma, Verdana;
	font-size: 20px;
	/*width: 100%;*/
}

.inputuseranlegen {
	generic-family: sans-serif;
	font-family: Aptos, Tahoma, Verdana;
	font-size: 20px;
	width: 99%;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	padding: 5px;
}

.inputcheckbox input[type="checkbox"]{
	opacity: 0;
}

.inputcheckbox input[type="radio"]{
	opacity: 0;
}

.inputcheckbox label::before {
    content: "";
    display: inline-block;

    height: 16px; /*24*/
    width: 16px; /*24*/

    border: 2px solid #008800; /* HIER FARBE ÄNDERN! */
}

.inputcheckbox label::after {
    content: "";
    display: inline-block;

    height: 6px; /*9*/
    width: 9px; /*14*/
    border-left: 3px solid #008800; /*4*/ /* HIER FARBE ÄNDERN! */
    border-bottom: 3px solid #008800; /*4*/ /* HIER FARBE ÄNDERN! */

    transform: rotate(-45deg);
}

.inputcheckbox label {
    position: relative;
		/*display: block;*/
		/*padding-left: 5px;*/
		font-size: 100%; /*120*/
}

.inputcheckbox label::before,
.inputcheckbox label::after {
    position: absolute;
}

/*Outer-box*/
.inputcheckbox label::before {
  	top: 0px; /*-3*/
		left: -24px; /*-29*/
}

/*Checkmark*/
.inputcheckbox label::after {
    left: -20px; /*-24*/
    top: 4px; /*2*/
}

/*Hide the checkmark by default*/
.inputcheckbox input[type="checkbox"] + label::after {
    content: none;
}

.inputcheckbox input[type="radio"] + label::after {
    content: none;
}


/*Unhide the checkmark on the checked state*/
.inputcheckbox input[type="checkbox"]:checked + label::after {
    content: "";
}

.inputcheckbox input[type="radio"]:checked + label::after {
    content: "";
}

abbr[data-title] {
	position: relative;
	text-decoration: underline dotted;
}

th abbr[data-title]:hover::after,
th abbr[data-title]:focus::after {
	background-color: #ffffff; /* HIER FARBE ÄNDERN! */
	color: #006600; /* HIER FARBE ÄNDERN! */
}

.thAbbrLeft:hover::after,
.thAbbrLeft:focus::after {
	left: 0px;
}

.thAbbrCenter:hover::after,
.thAbbrCenter:focus::after {
	left: 50%;
	transform: translate(-50%, 0);
}

.thAbbrRight:hover::after,
.thAbbrRight:focus:after {
	right: 0px;
}

abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
	background-color: #006600; /* HIER FARBE ÄNDERN! */
	color: #ffffff; /* HIER FARBE ÄNDERN! */
}

.tdAbbrLeft:hover::after,
.tdAbbrLeft:focus::after {
	left: 0px;
}

.tdAbbrCenter:hover::after,
.tdAbbrCenter:focus::after {
	left: 50%;
	transform: translate(-50%, 0);
}

.tdAbbrRight:hover::after,
.tdAbbrRight:focus:after {
	right: 0px;
}

abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
	content: attr(data-title);
	position: absolute;
	bottom: -30px;
	width: auto;
	white-space: nowrap;

	font-weight: normal !important;
	border-radius: 3px;
	box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
	font-size: 14px;
	padding: 4px 7px;
}

div.table-overflow {
	overflow-x: auto;
}

option {
	font-size: 20px;
}

select {
	font-size: 20px;
}

table {
	border-collapse: collapse;
	/*overflow-x: auto;*/
	/*display: block;*/
	/*width: fit-content;*/
	max-width: 100%;
}

table, td {
	border: 1px solid #cccccc; /* HIER FARBE ÄNDERN! */
	generic-family: sans-serif;
	font-family: Aptos, Tahoma, Verdana;
}

table a {
	color: #006600; /* HIER FARBE ÄNDERN! */
	text-decoration: none;
}

tr.angemeldet {

}

tr.ausgetreten {
	color: #999999; /* HIER FARBE ÄNDERN! */
	background-color: #eeeeee; /* HIER FARBE ÄNDERN! */
}


td {
	padding: 2px 5px;
}

td.durchrechnung_li {
	text-align: left;
	padding: 0px 10px 0px 10px;
}

td.durchrechnung_ctr {
	text-align: center;
	padding: 0px 10px 0px 10px;
}

td.durchrechnung_re {
	text-align: right;
	padding: 0px 10px 0px 0px;
}

tr:nth-child(even) {
	background-color: #ececec; /* HIER FARBE ÄNDERN! */
}

tr:hover {
	background-color: #ffff00; /* HIER FARBE ÄNDERN! */
}

tr.tablebackground {
	background-color: #ffffff; /* HIER FARBE ÄNDERN! */
}

th {
	background-color: #006600; /* HIER FARBE ÄNDERN! */
	color: #ffffff; /* HIER FARBE ÄNDERN! */
	border: 0px;
	padding: 15px 2px;
}

hr {
	color: #006600; /* HIER FARBE ÄNDERN! */
}

/* Beginn On-Offline Sprites */

.onoffline {
	display: inline-block;
	width: 16px;
	height: 16px;
}

#flag-ON {width: 16px; height: 16px; background: url(flags/online_16.png) 0px 0px; }
#flag-ONOFF {width: 16px; height: 16px; background: url(flags/online_16.png) -16px 0px; }
#flag-OFF {width: 16px; height: 16px; background: url(flags/online_16.png) -32px 0px; }

/* Ende On-Offline Sprites */



@media screen and (max-width:1600px) {
	.mygallery {
		grid-template-columns: repeat(4, 22%);
		grid-column-gap: 4%;
		grid-row-gap: 3.5%;
	}
}



@media screen and (max-width:1440px) {
	.wrapper {
		width: 98%;
	}

	.sidemenuleft {
		width: 20%;
		/*padding: 1% 4%;*/
		/*float: left;*/
	}

	.content{
		width: 63%;
		float: right;
		/*padding: 1% 4%;*/
		padding: 80px 4% 80px 4%;
	}

	.sidebarright {
		width: auto;
		clear: both;
		float: none;
		padding: 1% 4% 80px 4%;
	}

	.toggle {
		display: block;
	}
	ul {
		width: 100%;
		display: none;
		min-height: 60px;
	}
	ul li {
		display: block;
		text-align: center;
	}
	.active {
		display: block;
	}

	.tabellenfilter {
		width: 80%;
	}

	/* Beginn GRID AnwenderRechte */

	.anwenderrechtecontainer {
		grid-template-columns: 46% 46%;
	}

	/* Ende Grid AnwenderRechte */

	.mygallery {
		grid-template-columns: repeat(3, 30%);
		grid-column-gap: 5%;
		grid-row-gap: 2.5%;
	}

}

@media screen and (max-width:1024px)
{
	.wrapper {
		width: 90%;
	}

	.sidemenuleft {
		font-size: 120%;
		width: auto;
		padding: 80px 4% 80px 4%;
		float: none;
		position: static;
	}

	.content {
		width: auto;
		padding: 2% 4%;
		margin: 0 auto;
		float: none;
	}

	.sidebarright {
		width: auto;
		padding: 2% 4%;
		float: none;
	}

	footer {
		text-align: left;
		padding-left: 10px;
		position: relative;
	}

	.footerspanwide {
		display: none;
	}

	.footerspansmall {
		display: inline-block;
		font-size: 0.8em;
	}

	.footeranimation {
		margin-right: 10px;
	}

	.tabellenfilter {
		width: 90%;
	}

	.inputcheckbox label::before {
		height: 24px; /*16*/
		width: 24px; /*16*/
	}

	.inputcheckbox label::after {
		height: 9px; /*6*/
		width: 14px; /*9*/
		border-left: 4px solid #008800; /*3*/ /* HIER FARBE ÄNDERN! */
		border-bottom: 4px solid #008800; /*3*/ /* HIER FARBE ÄNDERN! */
	}

	.inputcheckbox label {
		font-size: 120%; /*100*/
	}

	/*Outer-box*/
	.inputcheckbox label::before {
		top: -3px; /*0*/
		left: -29px; /*-24*/
	}

	/*Checkmark*/
	.inputcheckbox label::after {
		left: -24px; /*-20*/
		top: 2px; /*4*/
	}

	.standardbutton {
		padding: 15px 30px;
		font-size: 120%;
	}

	/* Beginn GRID AnwenderRechte */

	.anwenderrechtecontainer {
		grid-template-columns: 94%;
	}

	.mygallery {
		grid-template-columns: repeat(2, 47%);
		grid-column-gap: 6%;
		grid-row-gap: 1.5%;
	}

}