@import 'individual.css?v=4';
@import 'mq.css?v=2';
[type=color]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=datetime]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
select:focus {
	background-color: var(--input-background);
}
textarea,[type=color]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=datetime]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select, textarea:focus {
	background-color: var(--input-background);
	color: var(--input-text);
}

.stdinner>div {
	overflow:hidden;
}
.bdg,
.header,
.stdinner>div>span,
.stundenplan td {
	text-align: center
}

.StundenplanStand,
.auswtitel,
.datuhr,
.delTable td,
.tab table th {
	font-style: italic
}

.mail,
.newSelect {
	text-transform: none
}

#nachrichtenText,
.mail,
.top,
.top>p {
	box-sizing: border-box
}

#sidsel table,
.delTable,
.fd table,
.mmeinung table,
.tab table,
.vinfo {
	border-collapse: collapse
}

a {
	color: var(--lightblue)
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: SourceSans, sans-serif;
}

a:focus,
a:hover {
	color: var(--blue)
}

[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea {
	color: var(--lightblack);
	background-color: var(--white)
}

.fieldset legend {
	background: var(--white)
}

.button {
	background-color: var(--lightblue);
	color: var(--white)
}

.button:focus,
.button:hover {
	background-color: var(--blue);
	color: var(--white)
}

.button.primary {
	background-color: var(--lightblue);
	color: var(--white)
}

.button.primary:focus,
.button.primary:hover {
	background-color: var(--blue);
	color: var(--white)
}

.button.secondary {
	background-color: #ddd;
	color: var(--lightblack)
}

.button.secondary:focus,
.button.secondary:hover {
	background-color: #5e5e5e;
	color: var(--white)
}

.button.hollow,
.button.hollow.primary {
	border: 1px solid var(--lightblue);
	color: var(--lightblue)
}

.button.dropdown:after {
	border-color: var(--white) transparent transparent
}

.accordion {
	background: var(--white)
}

.accordion-title {
	color: var(--lightblue)
}

.accordion-content {
	background-color: var(--white)
}

.is-accordion-submenu-parent>a:after {
	border-color: var(--lightblue) transparent transparent
}

.badge {
	background: var(--lightblue);
	color: var(--white)
}

.badge.secondary {
	background: var(--lightblack);
	color: var(--white)
}

.badge.success {
	background: var(--green);
	color: var(--white)
}

.badge.warning {
	background: var(--warning);
	color: var(--white)
}

.badge.alert {
	background: var(--red);
	color: var(--white)
}

.breadcrumbs a {
	color: var(--lightblue)
}

.button-group.primary .button {
	background-color: var(--lightblue);
	color: var(--white)
}

.button-group.primary .button:focus,
.button-group.primary .button:hover {
	background-color: var(--blue);
	color: var(--white)
}

.button-group.secondary .button {
	background-color: #ddd;
	color: var(--white)
}

.button-group.secondary .button:focus,
.button-group.secondary .button:hover {
	background-color: #c4c4c4;
	color: var(--white)
}

.button-group.success .button {
	background-color: var(--green);
	color: var(--white)
}

.button-group.success .button:focus,
.button-group.success .button:hover {
	background-color: #23bf5d;
	color: var(--white)
}

.button-group.warning .button {
	background-color: var(--warning);
	color: var(--white)
}

.button-group.warning .button:focus,
.button-group.warning .button:hover {
	background-color: var(--darkwarning);
	color: var(--white)
}

.button-group.alert .button {
	background-color: var(--red);
	color: var(--white)
}

.button-group.alert .button:focus,
.button-group.alert .button:hover {
	background-color: #e23317;
	color: var(--white)
}

.button-group.stacked .button:not(:last-child),
.button-group.stacked-for-medium .button:not(:last-child),
.button-group.stacked-for-small .button:not(:last-child) {
	border-bottom: 1px solid var(--white)
}

.menu .active>a {
	color: var(--white);
	background: var(--lightblue)
}

.is-drilldown-submenu,
.is-dropdown-submenu,
.menu-icon:after {
	background: var(--white)
}

.menu-icon:after {
	box-shadow: 0 7px 0 var(--white), 0 14px 0 var(--white)
}

.is-drilldown-submenu-parent>a:after {
	border-color: transparent transparent transparent var(--lightblue)
}

.dropdown-pane {
	background-color: var(--white)
}

.dropdown.menu>li.is-dropdown-submenu-parent>a:after {
	border-color: var(--lightblue) transparent transparent
}

.dropdown.menu.vertical>li.opens-left>a:after {
	border-color: transparent var(--lightblue) transparent transparent
}

.dropdown.menu.vertical>li.opens-right>a:after {
	border-color: transparent transparent transparent var(--lightblue)
}

.dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a:after {
	border-color: var(--lightblue) transparent transparent
}

.dropdown.menu.medium-vertical>li.opens-left>a:after {
	border-color: transparent var(--lightblue) transparent transparent
}

.dropdown.menu.medium-vertical>li.opens-right>a:after {
	border-color: transparent transparent transparent var(--lightblue)
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left>a:after {
	border-color: transparent var(--lightblue) transparent transparent
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after {
	border-color: transparent transparent transparent var(--lightblue)
}

.label {
	background: var(--lightblue);
	color: var(--white)
}

.label.secondary {
	background: #ddd;
	color: var(--white)
}
.reveal.success {
	background: var(--green);
	color: var(--input-text);
}
.label.success {
	background: var(--green);
	color: var(--white)
}

.label.warning {
	background: var(--warning);
	color: var(--white)
}

.label.alert {
	background: var(--red);
	color: var(--white)
}

.off-canvas-content {
	background: var(--white)
}

.orbit-caption,
.orbit-next,
.orbit-previous {
	color: var(--white)
}

.pagination .current {
	background: var(--lightblue);
	color: var(--white)
}

.slider-handle {
	background-color: var(--lightblue)
}

.slider-handle:hover {
	background-color: var(--blue)
}

.reveal {
	background-color: var(--input-background);
}

#msgOuter.reveal {
	padding-right: 3rem
}

.switch {
	color: var(--input-background);
}

.switch-paddle:after {
	background: var(--input-background);
}

input:checked~.switch-paddle {
	background: var(--lightblue);
}

.switch-inactive {
	right: 10%!important
}

table tbody,
table tfoot,
table thead {
	background-color: var(--white)
}

.tabs {
	background: var(--white)
}

.tabs.primary {
	background: var(--lightblue)
}

.tabs.primary>li>a {
	color: var(--white)
}

.tabs-content,
.tabs-title>a:hover {
	background: var(--white)
}

.thumbnail {
	border: 4px solid var(--white)
}

.title-bar {
	color: var(--white);
	background-color: var(--lightblack);
	width: 100%;
	display: flex
}

.tooltip {
	color: var(--white)
}

.button.success {
	background-color: var(--green);
	color: var(--white)
}

.button.success:focus,
.button.success:hover {
	background-color: #23bf5d;
	color: var(--white)
}

.button.warning {
	background-color: var(--warning);
	color: var(--white)
}

.button.warning:focus,
.button.warning:hover {
	background-color: var(--darkwarning);
	color: var(--white)
}

.button.alert,
.switch-paddle.alert {
	background-color: var(--red)!important;
	color: var(--white)
}

.button.alert:focus,
.button.alert:hover {
	background-color: #e23317;
	color: var(--white)
}

body {
	height: 100%!important;
	padding: 0;
	margin: 0;
	font-family: Questrial, sans-serif;
	color: var(--lightblack);
	background: var(--white)
}

.newSelectFields>div>div>ul li:hover,
.newSelectSelected {
	color: var(--white);
	background: var(--lightblack)
}



#Ajaxxx>div {
	bottom: 0;
	right: 0;
	margin: auto;
	border: 16px solid #ddd;
	border-top: 16px solid var(--lightblue);
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite
}

@keyframes spin {
	0% {
		transform: rotate(0)
	}
	100% {
		transform: rotate(360deg)
	}
}

.bdg {
	position: absolute;
	height: 1.2em;
	width: 1.2em;
	color: var(--white);
	line-height: 1.2em;
	border-radius: 50%;
	margin-top: -3em;
	margin-left: 1.7em
}

.dropdown p,
.off-canvas {
	border: 1px solid #000
}

.bdg:empty {
	display: none
}

.fxmenu .bdg {
	margin-top: -2.4em!important
}

#BadgeVC,
#lBadgeVC {
	background-color: #var(--red);
	color: var(--white)
}

#BadgeStundenplan,
#lBadgeStundenplan {
	background-color: var(--red);
	color: var(--white)
}

#BadgeDateien,
#lBadgeDateien {
	background-color: var(--green);
	color: var(--white)
}

#BadgeMitteilungen,
#lBadgeMitteilungen {
	background-color: var(--lightblue);
	color: var(--white)
}

#BadgeNachrichten,
#lBadgeNachrichten {
	background-color: var(--lightblack);
	color: var(--white)
}

#BadgeVotings,
#lBadgeVotings {
	background-color: var(--warning);
	color: var(--lightblack)
}

.move-left .exit-off-canvas,
.move-right .exit-off-canvas,
.off-canvas-content {
	box-shadow: none!important
}

.menu-icon {
	width: 1.8em;
	background: var(--lightblack);
	line-height: inherit;
	position: relative;
	height: 20px;
	margin: 0
}

.dropdown a,
.top,
.top div,
.top>p {
	background-repeat: no-repeat
}

@media screen and (max-width:40em) {
	#news_ticker,
	.menu-icon {
		display: block
	}
	#news_ticker {
		flex-grow: 1
	}
}

@media screen and (min-width:40em) {
	.menu-icon {
		top: 0
	}
}

.dropdown a {
	background-position: left center!important
}

.dropdown p {
	display: inline-block;
	background-size: contain;
	width: 2em;
	height: 2em;
	margin: 0 4px 0 0
}

.is-dropdown-submenu {
	top: 80%;
	left: 0
}

.level2 {
	top: 0;
	left: 100%
}
.top {
	width:100%;
	z-index:850;
}
.top>div:nth-child(1) {
	margin: 2px 0;
	width: 100%;
	height: 1.6em;
	padding: none;
	vertical-align: bottom;
	display: flex;
	display: flexbox;
	flex-direction: row
}

.top>p, .top>div>p {
	display: block;
	width: 60px;
	background-image: url(../img/schullogo_nurLogo.svg);
	background-size: 100% 100%;
	background-position: center center;
	height: 100%;
	margin: 0;
	padding: 0
}

.row.full-width {
	max-width: 96%;
	padding: 0 2%
}

@media screen and (min-width:54em) {
	.element {
		padding: 2em!important
	}
	.fxmenu>div>div>ul>li {
		line-height: 2em!important;
		height: 2em!important;
		vertical-align: middle!important;
		-webkit-transition: all .2s ease-in;
		transition: all .2s ease-in
	}
	.fxmenu {
		line-height: 4em;
	}
	.varmenu>div>div>ul>li {
		line-height: 4.5em!important;
		height: 4.5em!important;
		vertical-align: middle!important;
		-webkit-transition: all .2s ease-in;
		transition: all .2s ease-in
	}
	.pageheader {
		margin-top:3rem;
	}
}
.fxmenu span.menuimg, .fxmenu i.menuimg {
	height:1rem;
}
.varmenu span.menuimg, .varmenu i.menuimg {
	height:2rem;
}
@media screen and (max-width:69.9375em) {
	.dropdown.menu>li>a>span {
		display:none !important;
	}
	.dropdown.menu>li>a>i {
		display:block !important;
		font-size: 1rem;
	}
}
@media screen and (min-width:70em) {
	.dropdown.menu>li>a>span {
		margin:-1rem 0;
		
	}
	.dropdown.menu>li>a>span.fas {
		color:#000 !important;
	}
	.dropdown.menu>li>a>i {
		display:none !important;
	}
}
@media screen and (min-width:80em) {
	.dropdown.menu>li>a>span {
		margin:0;
	}
}
.menulabel {
	padding-left: 1em;
	padding-right: .3em;
	color: var(--lightblue);
	font-size: .7em
}

.fxmenu {
	position: absolute!important;
	position: fixed!important;
	top: 0!important;
	left: 0;
	right: 0;
	z-index: 600
}

@media screen and (max-width:39.9375em) {
	#willkommenbody {
		margin-top: 50px
	}
}

.varmenu {
	position: relative;
	width: 100%;
	left: 0;
	right: 0
}

.xchangeschriftzug {
	background-image: url(../img/xchangeSchriftzug.svg);
	background-size: auto 90%;
	background-position: 90% bottom
}

.webportal {
	background-size: auto 120%;
	background-position: center center
}

.sheet {
	display: none
}

.sheet[active=active] {
	display: block
}

#tickerdiv {
	height: 48px
}

#news_ticker {
	height: 36px;
	position: absolute;
	left: 3px;
	right: 3px;
	overflow: hidden;
	border: 2px solid #ddd
}

#tickerrun div div {
	text-align: center;
	line-height: 36px;
	height: 36px;
	position: absolute;
	padding: 1px 6px;
	margin: 0;
	top: 11px;
	white-space: nowrap
}

#tickerrun div {
	position: relative;
	line-height: 36px;
	height: 33px;
	min-width: 100%;
	color: var(--lightblack);
	margin: 0
}

.header,
.samstag,
.sonntag,
.wochentag {
	color: var(--white)
}

.dropdown a {
	background-size: contain;
	margin: 0 3px;
	stroke: var(--red)
}

.dropdown a[active=active] {
	background-color: #ddd
}

.header {
	background: var(--lightblack);
	font-weight: 700;
	padding: 2px 4px!important
}

.kalender,
.stundenplan {
	table-layout: fixed;
	width: 100%;
	white-space: nowrap;
	font-size: .8em;
	/*-webkit-box-reflect: below 0.5em linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.25));*/
}

@media screen and (max-width:43em) {
	.kalender td,
	.stundenplan td {
		font-size: .7em
	}
}

.wochentag {
	background-color: var(--lightblack)
}

.samstag {
	background-color: var(--lightblue)
}

.sonntag {
	background-color: #c00
}

.stundenplan td:first-Child {
	width: 5%
}

.stundenplan td {
	border: 1px solid rgb(210, 210, 210);
	width: 19%
}
.pausenaufsicht {
	display: block;
  position: absolute;
  font-size: calc(0.9 * var(--stdfontsize));
  z-index: 999;
  background: var(--white);
  border: 2px solid black;
  padding: 0.1rem 0rem;
  cursor:pointer;
  left: 0;
  right: 0;
  width: 70%;
  margin: auto;
  color: var(--gelesen-background);
  text-align: center;
}
.pausenaufsicht.pausenv {
	background: var(--std_fremdvertretungmitte);
	color:var(--white);
}
.vinfo,
.vinfo tbody {
	border: none
}

.std {
	position: relative;
	width: 100%;
	padding-top: 100%;
	font-size:var(--stdfontsize);
	border-radius:6px;
}

.stdinner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 0.32rem;
	margin:0.10rem;
}

.stdinner>div {
	height: 33%;
	display: table;
	width: 100%;
	padding: 1px 2px
}

.vinfo td,
.vinfo th {
	padding: 1px 3px;
	width: 16.6666%
}

.stdinner>div>span {
	display: table-cell;
	vertical-align: middle
}

.stundenplan td>div>div:nth-Child(2) {
	font-weight: 700
}

.StundenplanStand {
	font-size: .9em;
	font-weight: 400
}

.head,
.tab table th,
.unread,
.vinfo td {
	font-weight: 700
}

.vinfo {
	background: var(--white)
}

.kalender td,
.vinfo td {
	border: 1px solid #ddd;
	text-align: center
}

.vinfo tr {
	background: 0 0
}

.vinfo th {
	background: #ddd;
	text-align: center
}

.vinfo td {
	background-color: var(--white)
}

#vid input {
	width: 100%
}

#vid input[type=text] {
	margin: 0
}

.top-bar {
	padding: 0!important;
	position: relative;
	z-index: 700;
	font-size:var(--menuitemfs);
}
.varmenu>div.top-bar {
	/*height:4.5rem !important;*/
}
.kalender {
	height: 80%
}

.kalender tr {
	height: 80px
}

.kalender td {
	cursor: pointer;
	width: 14.2857%;
	font-size: .8em;
	overflow: hidden;
	vertical-align: top;
	padding: 0
}

.tagesanzeige {
	background: var(--lightblack);
	color: #fff;
	width: 100%;
	font-size: .9em;
	text-align: center
}

.kalender td>div {
	text-overflow: ellipsis;
	border: none
}

.weekend {
	background: #ddd;
	cursor: wait
}

.ferien {
	background: #6f4;
	cursor: wait;
}
.studientag {
	background: #ff4;
	cursor: wait;
	
}
.ferien span, .studientag span {
	transform: rotate(-90deg); 
	transform-origin: bottom right;
	display: block;
	position: relative;
	left: calc(-50% - 1rem); 
}
.terminspr {
	background: #bf9
}

.terminpriv {
	background: #f84
}

.kalendermonat {
	text-align: center;
	font-size: 1.2em;
	background: #ddd
}
.kalendermonat span {
	display:block;
	width:100%;
	position:relative;
	
}
.kalendermonat span a i {
	color:var(--input-text);
}
.kalendermonat span a.kalprbut {
	position:absolute;
	background:var(--grey);
	height:100%;
	width:2.8rem;
	transition:all 0.9s;
	cursor:pointer;
}
.kalendermonat span a.kalprbut:hover i {
	color:var(--white);
}
.kalendermonat span a.kalprbut:hover {
	background:var(--darkgrey);
	
}
.kalendermonat span a.kalprbut.left {
	left:0px;
}
.kalendermonat span a.kalprbut.right {
	right:0px;
}
.dateiTabelle {
	width: 100%
}
.dateiTabelle th {
  /* für Chrome, Edge und Safari (WebKit) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer, alte Edge-Version */
}

.dateiTabelle th::-webkit-scrollbar {
  display: none; /* Chrome, Edge (Chromium), Safari */
}
.dateiTabelle tr {
	-ms-transition: opacity .3s linear;
	-webkit-transition: opacity .3s linear;
	transition: opacity .3s linear;
	cursor: pointer;
}

.dateiTabelle tr:first-child {
	cursor: default
}

.dateiTabelle tr:last-child td {
	border-bottom: none
}

.dateiTabelle td {
	padding: 2px 3px;
	border-bottom: 1px solid #ddd;
	text-align: center
}

.dateiTabelle td:first-child {
	width: 25px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto
}

.dateiTabelle td:nth-child(2) {
	text-align: left;
	overflow: hidden;
	width: 30px;
}

.dateiTabelle td:nth-child(3) {
	overflow: hidden;
	width: calc(100vw - 120px);
}

.dateiTabelle td:nth-child(2),
.dateiTabelle td:nth-child(5),
.dateiTabelle td:nth-child(6) {
	width: 25px;
	padding: 0;
	min-width: 25px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-origin:content-box;
	padding:3px;
}

.dateiTabelle th {
	text-align: left;
	vertical-align: middle;
	padding: 2px 3px;
	color: var(--lightblack);
	border-bottom: 1px solid #000;
	overflow: hidden
}

.dateiTabelle img {
	height: 20px;
	width: 20px
}

.optionenButton {
	width: 60%;
	margin-left: 20%!important;
	display: block
}

.optionenKnopf {
	width: 60%;
	margin-left: 20%;
	padding: 3px 5px;
	text-align: center;
	background: #ddd;
	border: 1px solid #000;
	cursor: pointer
}

.eigenerbutton {
	width: 8.3333%;
	padding: 0!important;
	margin: 0;
	background-color: #bbb;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain
}

.buttonline,
.flex,
.flexrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0;
	flex-direction: row
}

.buttonlinemitte {
	flex-grow: 5
}

.chatheadline {
	background: #ddd
}

.plusbutton {
	background-image: url(../img/plus.png)
}

.peoplebutton {
	background-image: url(../img/people.svg)
}

.arrowleft {
	background-image: url(../img/left.svg)
}

.arrowright {
	background-image: url(../img/right.svg)
}

#neuerChatButton {
	float: left
}

.chatOuter {
	margin: auto
}

.neuerChatOuter {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #ddd
}

.neuerChatInnerTop {
	width: 100%;
	padding: 0 3px
}

.neuerChatInnerTop li {
	border: 1px solid #ddd;
	padding: 3px 10px;
	border-radius: none;
	color: var(--lightblack);
	width: 33%!important;
	background-color: #bbb
}

.neuerChatInnerBottom div:first-child {
	border-top: none
}

.neuerChatInnerBottom div {
	border-top: 1px solid #000;
	padding: 2px 4px;
	text-overflow: ellipsis;
	white-space: nowrap
}

.suchHintergrund {
	width: 100%;
	background: var(--lightblack);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 10px
}

.suchHintergrund button {
	width: 3em;
	height: 3em;
	background: #ddd;
	text-align: center;
	border-radius: 0;
	border: none
}

.ChatButton {
	width: calc(100% + 40px);
	border: 1px solid #000;
	overflow: hidden;
	white-space: nowrap;
	padding: 0;
	transition: left .4s ease-in;
	position: relative;
	left: -40px;
	background-color: var(--lightblue);
	color: var(--white);
	cursor: pointer;
	font-size: 1.2em
}

.ChatButton span {
	width: 40px;
	display: inline-block;
	padding: 0;
	margin: 0;
	text-align: center
}

.ChatButton>span>input {
	display: none
}

.unread {
	background-color: var(--warning);
	position: relative
}

.ChatButton>span>input[type=checkbox] {
	width: auto;
	float: left;
	margin-right: .75em;
	background: 0 0;
	border: none
}

.ChatButton>span>input[type=checkbox]:checked,
.ChatButton>span>input[type=checkbox]:not(:checked) {
	background: 0 0;
	position: relative;
	visibility: hidden;
	margin: 0;
	padding: 0
}

.ChatButton>span>input[type=checkbox]:checked+label::before,
.ChatButton>span>input[type=checkbox]:not(:checked)+label::before {
	content: ' ';
	display: inline-block;
	width: 17px;
	height: 17px;
	position: relative;
	top: 4px;
	border: 1px solid var(--red);
	border-radius: 20px;
	background: #fff;
	margin-right: 1em;
	box-shadow: inset 0 1px 1px 0 rgba(155, 0, 0, .1)
}

.ChatButton>span>input[type=checkbox]:hover+label::before {
	background: var(--red);
	box-shadow: inset 0 0 0 2px #fff
}

.ChatButton>span>input[type=checkbox]:checked+label::before {
	background: var(--red);
	box-shadow: inset 0 0 0 2px #fff
}

.ChatButton>span>input[type=checkbox]+label {
	cursor: pointer
}

.ChatButton p {
	z-index: 1;
	border-left: 1px solid #000
}

.ChatButton div,
.ChatButton p {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 3px 5px 0;
	vertical-align: middle;
	line-eight: 1em
}

.ChatButton div {
	position: absolute;
	left: 40px;
	top: 0;
	height: 100%;
	z-index: 990;
	background-color: rgba(0, 0, 0, .6);
	display: none
}

.waehlbar>div {
	display: block
}

.waehlbar {
	left: 0
}

#aktiveChats div {
	overflow-x: hidden
}

#aktuelleChats {
	margin-top: 1em
}

.neuerChatPartner {
	background: var(--white)!important
}

#chatLoeschButton {
	background: var(--red);
	color: var(--white);
	height: 1.8em;
	text-align: center;
	line-height: 1.8em;
	width: 100%;
	margin: 0
}

#nachrichtenText {
	position: absolute;
	margin: 0;
	resize: none;
	width: 100%;
	line-height: 16px;
	font-size: 14px;
	padding: 2px;
	height: auto;
	min-height: 20px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #000;
	z-index: 1
}

#NachrichtenFenster {
	padding-right: 10px;
	position: relative;
	top: 3rem;
	z-index: 0;
	width: 100%;
	max-height: max(2000px, 100vh);
	min-height:20rem;
	height: auto;
	overflow-y: scroll;
	overflow-x: hidden;
}

#aktiverChat,
.mail {
	position: relative
}

#ChatUeberschrift {
	display: inline-block;
	padding-left: 1em
}

.datuhr,
.mail {
	display: block
}

.mitteilung {
	border: 1px solid #000;
	background: #fafeaa;
	margin-top: 10px;
	
	line-height: 1.2em;
}
.mitteilung, .withshadow {
	border-radius:1.25rem;
	padding:0.8rem;
	box-shadow: 5px 2px 7px var(--lightblack); 
}

.mitteilung a {
	color: var(--lightblack);
	text-decoration: underline
}

.miteilung a:hover {
	color: #171717;
	text-decoration: none
}

.gelesen a {
	color: var(--gelesen-text);
	text-decoration: underline
}

.gelesen a:hover {
	color: #cbcbcb
}

.gelesen {
	background-color: var(--gelesen-background);
	color: var(--gelesen-text);
}
.bestaetigt {
	background-color: var(--bestaetigt-background);
	color: var(--gelesen-text);
}
.mitteilung>div:nth-of-type(2) {
	font-size: .8em;
	font-style: italic;
	text-align: right;
	width: 100%
}

.hidden {
	box-shadow: 5px 5px 2px var(--red);
	border-color: var(--lightblack);
	border-width: 3px;
	background-color: #ddd;
	color: #444
}

#login>div {
	margin-top: 10%
}

.loginbox {
	border: 1px solid #ddd;
	padding: 40px 20px 0
}

#helpbutton,
#loginbutton,
#neuPassSpeichernButton {
	width: 100%
}

#fehlerMeldung,
#savePWFehler,
.fehlerMeldung {
	background-color: rgba(255, 100, 60, .97)!important;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3gQGCy8XqZF8qAAAAnVJREFUOMvNkztoFFEUhr9zZ3Z2ZzYvYhIlWgQ0gtpIIKLB+MQHCmqhCCIKNga0UVDR2kJBhHSp1AhaqI2CCCJioaKNglgIdkYlOknIbqKb3Zm9xyIPR3cjPhr/5sC95/7nPz//hV8gxJ+u84Zc/z7/itD43Z/xx0aCzFBph9nydyRTqgYJrkXbzJuvJ9yRzwSvALQH+WPCTwS7i+udd/qMvL4gn1vnDdpDMjBFWAEziyoBcERvmnaNsSgx6nVaJ7zku3qDpdL3e+sJwJDj98dH5b0+ZVSfktNXjOpL8sWLznBurnenmroKZc0UNMS/pZYNTrtGOBhSsGofNRis1112y3nToWfY9bO6CrIBajwTaEPT+UKJNTRTi5VO6p69xrlyAw8Fm0EmHrvX9RTZpLofyELxMx72dl1XqY2NtFCgnLxPe0AM9b2loPDcHdVQziTVmaRXkZo4syBe5R62tRSxs/nqLrLGdKgRRw8mo2IStKkUdtyZo8PU4sycW2htQgGCzGQFqO8vBuFlHz3OQ+lDtQfMdDjV8jhYEX/MnotqaMCbfqQ55MMj8p1LKO/cTjQzZAyyB2Jv4rmb1dO0Sx+YZgqE4m+1yNygKyrSQoD9rkAEyCMjYwhxYtciGhyLMl+epOYTsBJAQvxWhbeNeyYGnJM6n6i6V6pTxD+hPCC2eNbVYFO0zCisDRbHOeeItlQl8uDqPVINm6kdHK78k5JBtI7YDslq13ja6++NCwTUYKp8YA+VNMakEdKYyaQl4tCm6EJEIy7IcDbzrrFn4gsR8mNbcjyUSojnoRU9BsYfpNL+8rgkIf5dW9WNP0PT/kKB/xbfAKxR99yRfSjNAAAAAElFTkSuQmCC)!important;
	background-position: left middle;
	background-repeat: no-repeat;
	padding-left: 25px
}

#erfolgMeldung,
.erfolgMeldung {
	background-Color: rgba(100, 255, 60, .97);
	padding-left: 25px
}

.hilfegrafik {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	height: 28px
}

.datuhr {
	margin-top: 0;
	padding-top: 0;
	font-size: .6em;
	width: 50%;
	height: 16px;
	line-height: 16px;
	margin-left: 50%;
	text-align: right!important;
	vertical-align: top
}

.mail>div {
	text-align: left
}

.mail {
	margin-top: 5px;
	margin-bottom: 5px;
	box-shadow: 5px 5px 2px #ddd;
	border: 1px solid #000;
	padding: 3px;
	width: 70%;
	-ms-transition: opacity .3s linear;
	-webkit-transition: opacity .3s linear;
	transition: opacity .3s linear;
	cursor: pointer;
	z-index: 991;
	min-height: 36px;
	word-wrap: keep-all;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: .7em!important;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -pre-wrap;
	white-space: pre-wrap
}

.mail::after,
.mail::before {
	width: 0;
	height: 0;
	line-height: 0;
	top: 8px;
	_filter: chroma(color='@dark-color');
	content: "";
	position: absolute
}

.antworten,
.auswertungframe,
.hh,
.mobmeinung,
.newSelectFields input,
.roundthing,
.uauswbody {
	box-sizing: border-box
}

.mail:first-child {
	margin-top: 10px
}

.an tick,
.newMail tick {
	display: none
}

.an,
.mail::after,
.mail::before,
.von {
	display: block
}

.mail tick {
	font-size: 1.5em;
	padding-right: 5px;
	color: #1b9448
}

.von {
	margin-left: 30%;
	margin-right: 10px;
	background-color: #efd
}

.an {
	margin-right: 30%;
	margin-left: 10px;
	background-color: var(--an-background);
}

.an::before {
	content: "";
	border-width: 10px 10px 10px 0;
	border-color: transparent var(--lightblack) transparent transparent;
	left: -10px
}

.von::before {
	content: "";
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent var(--lightblack);
	right: -10px;
	z-index: 5
}

.mail::before {
	border-style: solid;
	_border-color: var(--lightblack);
	z-index: 2
}

.an::after {
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #dff transparent transparent;
	left: -9px;
	_border-color: var(--lightblack) #dff var(--lightblack) var(--lightblack)
}

.von::after {
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #efd;
	right: -9px;
	_border-color: var(--lightblack) var(--lightblack) var(--lightblack) #efd
}

.mail::after {
	z-index: 3
}

.an.newMail::before {
	content: "";
	border-width: 10px 10px 10px 0;
	border-color: transparent var(--lightblack) transparent transparent;
	left: -11px
}

.an.newMail::after {
	border-color: transparent #fe9 transparent transparent
}

.von.newMail::after {
	border-color: transparent transparent transparent #fe9
}

.newMail {
	border-width: 1px;
	background: #fe9;
	color: var(--lightblack)!important
}

.an.hiddenMail::after {
	content: "";
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #ddd transparent transparent;
	left: -9px;
	_border-color: var(--lightblack) #ddd var(--lightblack) var(--lightblack)
}

.fd,
fieldset.round {
	left: 0;
	text-align: center
}

.von.hiddenMail::after {
	content: "";
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #ddd;
	right: -7px;
	_border-color: var(--lightblack) var(--lightblack) var(--lightblack) #ddd
}

.hiddenMail {
	box-shadow: 5px 5px 2px var(--red);
	border-color: var(--lightblack);
	border-width: 3px;
	background-color: #ddd;
	color: var(--lightblack)
}

.ChatSelected {
	background: var(--lightblack)!important;
	color: var(--white)!important
}

.an.ChatSelected::after,
.von.ChatSelected::after {
	border-color: transparent!important
}

.fd {
	position: absolute;
	right: 0;
	margin: 0 auto
}

.fd table th {
	background: var(--lightblack);
	color: var(--white);
	text-align: center;
	border: 1px solid #000
}

.fd table td {
	border: 1px solid #000;
	padding: 0
}

.fd input[type=date],
.fd input[type=text],
.fd textarea {
	width: 98%;
	height: 100%;
	background: 0 0;
	border: none;
	font-size: 1.2em
}

.fd a,
.fd input[type=submit] {
	display: block;
	background: var(--white);
	border: 2px outset;
	border-radius: 10px;
	padding: 4px 8px;
	height: 80%;
	margin: 0 0 0 10px;
	text-decoration: none;
	color: var(--lightblack);
	box-shadow: none;
	line-height: 22px;
	position: relative;
	top: 0;
	font-size: 1.2em
}

.fd a:hover,
.fd input[type=submit]:hover {
	background: var(--lightblue);
	color: var(--white)
}

fieldset.round {
	border-radius: 5px;
	box-shadow: 3px 4px 5px var(--lightblack);
	width: 80%;
	right: 0;
	margin: 0 auto
}

fieldset.uinfo {
	border: 1px solid #000
}

fieldset.uinfo legend {
	position: relative;
	top: .3em;
	left: 1em;
	background: var(--white);
	padding: 2px 1em
}

.antdivs {
	display: flex;
	flex-direction: column
}

.antdivs input {
	margin: 0
}

.antdivs>div:last-child {
	border-bottom: none
}

.antdivs>div {
	display: flex;
	width: 100%;
	border-bottom: 1px solid #000
}

.antdivs>div>div:nth-Child(1) {
	flex-grow: 1
}

.antdivs>div>div:nth-Child(2) {
	width: 30px
}

.uinfo {
	margin: 10px 10%;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	width: 80%
}

.uinfo>div {
	display: flex;
	flex-direction: column;
	text-align: justify;
	padding: 3px 5px
}

.uinfo>div:last-child {
	white-space: wrap;
	width: 96%;
	margin: 5px 2%;
	padding: 5px 0
}

.mmeinung,
.mobmeinung {
	margin-right: 5%;
	margin-top: 20px
}

#frage,
.mmeinung,
.mobmeinung {
	margin-left: 5%
}

.uinfo>div>div {
	display: flex;
	flex-wrap: wrap
}

.uinfo>div>div>div {
	display: flex;
	flex-wrap: nowrap;
	text-align: center;
	border: 1px solid
}

.uinfo>div>div>div>span {
	display: block;
	padding: 3px 5px
}

.cols,
.cols>div,
.janein {
	display: flex
}

.uinfo>div>div>div>span:first-child {
	background: var(--lightblack);
	color: var(--white);
	min-width: 80px;
	text-align: center;
	border: none
}

.mmeinung table td,
.mmeinung table th {
	border: 1px solid #000
}

.ui-datepicker-trigger {
	height: 1.8em;
	width: 1.8em;
	padding: 0
}

.mmeinung {
	width: 90%
}

.mmeinung fieldset,
.mmeinung table {
	width: 100%
}

.mmeinung table th {
	background: var(--lightblack);
	color: var(--white)
}

.mmeinung table td:first-child {
	width: 30px;
	text-align: center
}

.mmeinung table td:nth-child(2) {
	text-align: left;
	font-style: italic;
	font-weight: 700
}

#antwort,
#frage,
.antworten>div,
.auswtitel,
.janein>div,
.mthumb,
.tab table th {
	text-align: center
}

.mmeinung table tr:hover {
	background: #ddd
}

.mmeinung table td:last-child {
	width: 300px;
	padding: 0;
	overflow: hidden
}

#content {
	margin: 10px 20px
}

#frage {
	font-size: 1.4em;
	width: 90%;
	border-bottom: 3px outline #000;
	margin-bottom: 20px;
	padding: 5px;
	border-radius: 3px;
	background: var(--lightblue);
	color: var(--white)
}

#antwort {
	width: 70%;
	margin: 30px 15%;
	padding-bottom: 10px
}

.antworten {
	margin: 0;
	width: 100%
}

.janein {
	justify-content: space-around;
	margin: 5px;
	width: 100%
}

.antworten>div,
.janein>div {
	cursor: pointer;
	min-height: 22px;
	line-height: 22px;
	border: 1px solid #000;
	padding: 3px 8px;
	box-sizing: border-box
}

.hh,
.mthumb {
	border: 1px solid green
}

.janein>div {
	width: 80px
}

.antworten>div {
	margin: 6px 3%;
	width: 94%
}

.antworten>div:hover,
.janein>div:hover {
	background: var(--lightblack);
	color: var(--white)
}

.usel {
	background: var(--lightblue);
	color: var(--white)
}

.cols {
	width: 100%;
	flex-direction: row;
	justify-content: space-around
}

.cols>div {
	flex-direction: column
}

.mthumb {
	width: 250px;
	z-index: 999;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	display: -webkit-box
}

.mthumb>div {
	margin: auto
}

.hh {
	display: flex;
	width: 100%;
	height: 60px;
	margin: 0
}

.hh>div:nth-child(2) {
	flex-grow: 1;
	line-height: 30px;
	color: var(--white);
	background: var(--warning);
	height: 100%;
	text-align: center;
	font-weight: 700;
	font-size: 1.4em
}

.hh>div:first-child,
.hh>div:last-child {
	width: 60px;
	height: 58px;
	background-image: url(img/ssgx.png);
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat
}

.auswertungframe {
	width: 90%;
	margin-left: 5%;
	height: 700px;
	padding: 0
}

.uauswbody {
	height: 100%;
	width: 100vmax;
	min-width: 420px;
	transform-origin: 0 0 0;
	o-transform-origin: 0 0 0;
	ms-transform-origin: 0 0 0;
	-webkit-transform-origin: 0 0 0;
	-moz-transform-origin: 0 0 0;
	-transform-origin: 0 0 0
}

.auswnavi {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	padding: 3px 4px;
	height: 30px;
	margin: 0;
	display: none
}

.auswnavi>div:first-child,
.auswnavi>div:last-child {
	box-sizing: border-box;
	margin: 0;
	width: 30px;
	height: 100%;
	border: 2px outset var(--lightblack);
	border-radius: 5px;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	visibility: hidden;
	box-shadow: 2px 3px 4px var(--lightblack)
}

.auswnavi>div:nth-child(2) {
	flex-grow: 1;
	font-size: 1.1em;
	text-align: center
}

.frei {
	width: 100%;
	margin: 0
}

.frei>textarea {
	border: 1px solid var(--lightblue);
	width: 90%!important;
	margin-left: 5%;
	height: 100%;
	color: var(--lightblue);
	padding: 3px 8px;
	font-size: 1.1em
}

.frei>textarea:hover {
	background: #ddd
}

.next,
.prev {
	width: 30px;
	height: 30px;
	border: 2px solid #000;
	cursor: pointer
}

.prev {
	background-image: url(../img/links.png)
}

.next {
	background-image: url(../img/rechts.png)
}

.umfragerow {
	display: flex;
	flex-direction: row;
	justify-content: space-between
}

.umfrage .vis {
	cursor: pointer;
	visibility: visible!important
}

.vismob {
	border-color: red
}

.tab table td,
.tab table th {
	border: 1px solid #000
}

.vis:hover,
.vismob:hover {
	background-color: #ddd
}

.auswtitel {
	font-size: 20pt;
	width: 100%
}

.tab table th {
	background: var(--lightblack);
	color: var(--white)
}

.tab table td:first-child {
	min-width: 400px;
	text-align: center;
	padding: 3px 8px
}

.tab table td:last-child {
	min-width: 80px;
	text-align: right;
	padding: 3px 8px
}

.votinp {
	border: none;
	margin: 0;
	background: 0 0;
	width: 100%
}

.votingheader {
	width: 100%;
	text-align: center;
	font-size: 1.6em;
	margin-top: 40px;
	height: 60px
}

.prog {
	border: 0;
	width: 80%;
	margin-left: 10%;
	margin-top: 10px;
	padding: 0;
	text-align: left;
	display: inline-block;
	min-height: 30px
}

.prog>div {
	width: 94%;
	margin-left: 3%;
	height: 38px;
	padding: 3px 0 6px;
	display: flex;
	flex-wrap: no-wrap;
	align-items: center
}

.prog[wert='100%'] {
	background: rgba(90, 230, 0, .6)
}

.navlinie {
	height: 0;
	flex-grow: 2;
	flex-shrink: 2;
	border: 2px solid;
	margin: 0
}

.beant {
	background-color: #3b0!important;
	color: var(--white)
}

.antakt {
	background-color: var(--lightblue)!important;
	color: var(--white);
	box-shadow: 0 0 4px
}

.antakt:after {
	background: var(--lightblue)!important;
	color: var(--white)!important
}

.prog:before {
	content: attr(wert);
	position: absolute;
	width: 80%;
	display: inline-block;
	text-align: center;
	font-size: 36px;
	color: transparent;
	z-index: -1;
	text-shadow: -1px -1px 2px #969696
}

.roundthing {
	max-width: 30px;
	width: 30px;
	min-width: 20px;
	height: 20px;
	border: transparent;
	background: #f61;
	border-radius: 20px;
	margin: 0;
	cursor: pointer
}

.roundthing:after {
	content: attr(Nummer);
	display: block;
	position: relative;
	height: 50%;
	width: 50%;
	margin: 25%;
	text-align: center;
	border-radius: 40px;
	background: rgba(255, 255, 255, .6);
	padding: 1px;
	color: var(--lightblack);
	font-size: .8em;
	line-height: 14px;
	vertical-align: middle
}

#umfrageInfoButton {
	border: 1px solid #000;
	cursor: pointer;
	font-size: 1.4em;
	text-align: center;
	border-radius: 3px;
	position: absolute;
	right: 10px;
	width: 28px;
	height: 28px;
	margin-left: -28px
}

.UInfoOpen {
	background-color: #ddd
}

.foundtable {
	border: 1px solid #000!important
}

.lister {
	border: 1px solid #000;
	padding: 2px 4px;
	text-align: center
}

.lister:nth-child(even) {
	background: rgba(200, 200, 255, .8)
}

.lister:nth-child(odd) {
	background: rgba(255, 255, 200, .8)
}

.helptd {
	width: 3em
}

.dark-background {
	background-color: var(--lightblack)
}

.white-background {
	background-color: var(--input-background);
}

#sidsel table td {
	padding: 1px 3px;
	line-height: .5em;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: .8em
}

#sidsel table td:nth-child(odd) {
	border-left: 1px solid #000;
	border-right: 1px none
}

#sidsel table td:nth-child(even) {
	border-left: none;
	border-right: 1px solid #000;
	text-align: right
}

#sender p {
	margin-left: 30px;
	text-align: left;
	color: var(--lightblack);
	margin-bottom: 0
}

.newSelectFields,
.pageheader,
.senderspan {
	text-align: center
}

.senderspan {
	display: block;
	height: 20px;
	color: var(--lightblack);
	width: 100%;
	font-size: 10px
}

progress {
	height: 5px;
	width: 90%;
	border: 1px inset #fff;
	margin-left: 20px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px
}

progress[value="100"]::-moz-progress-bar {
	background: var(--green);
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px
}

progress::-moz-progress-bar {
	background: var(--red);
	height: 5px;
	width: 280px
}

.sendfailure {
	color: var(--red)
}

.sendsuccess {
	color: var(--green)
}

.small-switch-label {
	font-size: 1em;
	position: relative;
	top: -9px;
	background: var(--white)
}

.switch.small {
	margin-bottom: 0!important
}

.lab {
	background-color: #cacaca;
	font-size: 1em;
	padding-left: .2em
}

.lab>span {
	margin: 3px 7px
}

.menu-icon::after {
	background: #fff;
	box-shadow: 0 7px 0 #fff, 0 14px 0 #fff
}

.menu-icon:hover::after {
	background: #ccc;
	box-shadow: 0 7px 0 #ccc, 0 14px 0 #ccc
}

@media screen and (min-width: 64em) {
	#mainmenu,
	.top-bar,
	.top-bar ul {
		background-color: #ddd!important
	}
}
.stundenplan td.header, .ferien {
	font-size:--stdfontsize;
	position:relative;
}
@media screen and (min-width:74.9375em) and (max-width:89.9375em) {
	.hide-for-xlarge-only {
		display: none!important
	}
	.std {
		/*font-size:0.6rem;*/
		/*font-size:0.9vw;*/
	}
	.stundenplan td.header, .ferien {
		/*font-size:0.6rem;*/
		/*font-size:0.9vw;*/
	}
}

@media screen and (min-width:75em) {
	.hide-for-xlarge-up {
		display: none!important
	}
	.std {
		/*font-size:0.7rem;*/
		/*font-size:0.9vw;*/
	}
	.stundenplan td.header, .ferien {
		/*font-size:0.7rem;*/
		/*font-size:0.9vw;*/
	}
}

@media screen and (max-width:74.9375em) {
	.show-for-xlarge-up {
		display: none!important
	}
}

@media screen and (max-width:74.9375em) {
	.show-for-xlarge-only {
		display: none!important
	}
	.std {
		/*font-size:0.5rem;*/
		/*font-size:0.9vw;*/
	}
	.stundenplan, .ferien {
		/*font-size:0.5rem;*/
		/*font-size:0.9vw;*/
	}
	.hide-for-large-down {
		display:none !important;
	}
}
.menuimg {
	width:3rem;
	padding:0;
	
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
@media screen and (min-width:64em) {
	.hide-for-large-up {
		display: none !important
	}
}

@media screen and (max-width:63,9375em) {
	.show-for-large-up {
		display: none !important
	}
}

@media screen and (min-width:90em) {
	.hide-for-xxlarge-only {
		display: none!important
	}
	.std, .ferien, .stundenplan {
		/*font-size:1rem;*/
		/*font-size:0.9vw;*/
	}
	.ferien {
		/*line-height:1rem;*/
	}
}

@media screen and (max-width:89.9375em) {
	.show-for-xxlarge-only {
		display: none!important
	}
}

@media screen and (max-width:39.9375em) {
	.hide-for-small-only {
		display: none!important
	}
}

.NewSelectValid {
	border-color: green!important
}

.NewSelectInvalid {
	border-color: red!important
}

.newSelectOpen {
	border: 1px solid #000!important;
	height: 16em!important;
	box-shadow: 10px 10px 5px var(--lightblack)
}

.newSelectSelected {
	color: var(--white);
	background: #ddd
}

.newSelect {
	display: inline-block;
	width: 100%
}

.newSelect div:first-child {
	background-color: var(--white);
	width: 100%;
	font-size: 1.4em;
	border: 1px solid #000;
	padding-left: 7px;
	vertical-align: middle;
	line-height: 1.6em;
	background-image: url(../img/select.png);
	background-repeat: no-repeat;
	background-position: 98% center;
	margin: 4px 0
}

.newSelectFields {
	border: none;
	box-shadow: 0 0;
	position: absolute;
	height: 0;
	margin-top: 1px;
	transition: height .5s ease-in-out;
	overflow: hidden;
	z-index: 900;
	background: var(--white)
}

.newSelectFields input {
	width: 90%;
	margin: 5%;
	height: 1.2em;
	line-height: 1.2em;
	font-size: 1em;
	padding: 1px 7px;
	background-color: #ddd;
	background-image: url(../img/lupe.svg);
	background-repeat: no-repeat;
	background-position: 98% center;
	background-size: auto 80%;
	outline: 0
}

.newSelectFields input:focus {
	border-color: var(--red);
	outline: 0
}

.newSelectFields div:first-child {
	background: 0 0;
	border: none;
	box-shadow: none
}

.newSelectFields::-webkit-scrollbar {
	display: none
}

.newSelectFields::-moz-scrollbar {
	display: none
}

.newSelectFields div {
	width: 100%
}

.newSelectFields>div>div {
	position: relative;
	width: 100%;
	height: 10em;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 0 0 15px
}

.newSelectFields>div>div>ul {
	position: relative;
	left: 0;
	width: 100%;
	top: 0;
	margin: 0
}

.gelesenlist,
.anwesendelist,
.newSelectFields>div>div>ul li {
	list-style-type: none;
	width: 100%;
	font-size: 1em;
	text-align: left;
	padding: 2px 5px;
	line-height: 1.2em
}

.newSelectFields>div>div>ul>li:first-child {
	border-top: none
}

#msgOuter {
	position: absolute;
	position: fixed;
	top: 100px;
	margin: auto
}

.tableheader {
	background: var(--lightblack);
	color: var(--white)
}

.rowh {
	display: inline-block;
	font-size: .9rem;
	padding: .85em 1em;
	margin: 0
}

.delTable {
	margin-top: 20px
}

.delTable tr:first-child {
	border: none
}

.delTable tr {
	border: 1px solid #000
}

.delTable td {
	width: 10%;
	text-align: center
}

.delTable td:nth-Child(2) {
	width: auto;
	background-size: 30px 30px;
	background-position: 4px center;
	background-repeat: no-repeat;
	text-align: left;
	padding: 4px 0 4px 38px;
	cursor: pointer
}

.delTable td:first-child {
	width: 70px;
	cursor: pointer;
	background-image: url(../img/trashempty.png);
	background-size: 30px 30px;
	background-position: center 2px;
	background-repeat: no-repeat;
	vertical-align: bottom;
	padding-top: 34px;
	font-size: 9px
}

.delTable td:first-child:hover {
	background-color: rgba(255, 0, 0, .3);
	cursor: pointer
}

.delTable img {
	height: 40px;
	width: 40px
}

.uploadselector {
	margin-left: 1em;
	overflow-y: auto;
}

@media (hover: none) {
	body {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
}

@media (hover: hover) {
	.mail,
	.mitteilung {
		-webkit-user-select: text;
		-ms-user-select: text;
		-moz-user-select: text;
		user-select: text
	}
}

.mail a {
	text-decoration: underline;
}

@media only screen and (max-width: 1899px) {
	.uploadselector {
		overflow-x: auto;
	}
}

@media only screen and (min-width: 1900px) {
	.uploadselector {
		overflow-x: hidden;
	}
}

.mailmap>div:nth-child(1) {
	width: 90%;
	margin-left: 5%;
	height: 220px;
}

.leaflet-popup-content-wrapper {
	text-align: center;
}

.mail.group.an {
	padding-top: 20px;
}

.mail.group.an p {
	position: absolute;
	top: 2px;
	left: 3px;
	font-size: 0.8em;
	font-weight: bold;
	font-style: italic;
}

.mail.group.an p:after {
	content: ' schrieb:';
}

.trashbutton {
	/*background-image:url(../img/trash.svg)*/
}

.sendbutton {
	/*background-image:url(../img/send.svg)*/
}

.showbutton {
	/*background-image:url(../img/show.svg)*/
}

.sendbutton:before {
	content: '\f1d8';
	font-family: 'Font Awesome\ 5 Free';
}

.bildbutton>i {
	font-style: normal !important;
}

.showbutton:before {
	content: '\f06e';
	font-family: 'Font Awesome\ 5 Free';
}

.tmbnachricht {
	width: 100%;
	text-align: center !important;
}

.lpicture {
	margin-top: 25px;
	width: 100%;
	position: relative;
	text-align: center;
}

.lpicture img {
	max-height: 500px;
	border: 1px solid black;
}

.showbutton.hidebutton:before {
	content: '\f070';
}

.trashbutton:before {
	content: '\f2ed';
	font-family: 'Font Awesome\ 5 Free';
}

.eigenerbutton:hover {
	background-color: var(--darkgrey);
}

.eigenerbutton {
	font-size: 1em;
	padding: 0;
	text-align: center;
	line-height: 1.9em;
	height: 1.9em;
}

.li_fa_tick:before {
	content: '\f058';
	font-family: 'Font Awesome\ 5 Free';
	padding: 0 10px 0 0;
	color: #2b0;
}

.li_fa_edit:before {
	content: '\f4ff';
	font-family: 'Font Awesome\ 5 Free';
	font-weight:bold;
	padding: 0 10px 0 0;
	color: var(--darkred);
}
.li_fa_exkursion:before {
	content: '\f207';
	font-family: 'Font Awesome\ 5 Free';
	font-weight:bold;
	padding: 0 10px 0 0;
	color: var(--darkblue);
}
.li_fa_exkursion, .li_fa_edit {
	color: var(--red);
}
.li_fa_usercheck:before {
	content: '\f007';
	font-family: 'Font Awesome\ 5 Free';
	padding: 0 10px 0 0;
	color: var(--darkgreen);
}
.li_fa_usercheck.red:before {
	color:var(--red);
}
.li_fa_user-check:before {
	content: '\f2bd';
	font-family: 'Font Awesome\ 5 Free';
	padding: 0 10px 0 0;
}

.li_fa_admin-check {
	font-weight: bold;
}

.li_fa_admin-check:before {
	content: '\f007';
	font-family: 'Font Awesome\ 5 Free';
	padding: 0 10px 0 0;
}

.li_fa_cross:before {
	content: '\f057';
	font-family: 'Font Awesome\ 5 Free';
	padding: 0 10px 0 0;
	color: #d30;
}

.mail.group.von p {
	display: none;
}

#technikstoerung {
	background: rgba(255, 130, 70, 0.97);
}

.aktiverChat {
	background-color: var(--white);
	color: var(--lightblue);
}

.unread:after {
	display: none;
	position: absolute;
	top: 2px;
	right: 70px;
	width: 1.6em;
	text-align: center;
	content: attr(neue);
	background: var(--lightblue);
	color: #fff;
	border-radius: 50%;
}

.QRCode {
	width: 80%;
	position: relative;
	height: 300px;
	margin: 10%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.QRCode img {
	width: 100%;
	height: 100%;
}

.evaText {
	display: flex;
	margin-bottom: 1rem;
}

.evaText i,
.evaDateien i {
	font-size: 1.4em;
}

.evaText textarea {
	display: block;
	flex-grow: 1;
	margin-bottom: 0;
}

.evaText button {
	display: block;
	margin: 0px 3px;
	width: 60px;
}

.evaDateien {
	display: flex;
}

.evaDateien>div:nth-Child(1) {
	width: 60px;
}

.EvaFileListItem {
	background-size: 20px 20px;
	min-height: 24px;
	margin: 3px 10px;
	padding-left: 30px;
	background-position: 2px center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.EvaFileListItem:hover {
	background-color: #ccc;
}

.stdklicker.Eva {
	position: relative;
}

.stdklicker.EVA:before {
	font-size: 1.4em;
	font-family: 'Font Awesome 5 Free';
	/*src:url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype");*/
	position: absolute;
	top: 0.2em;
	text-shadow: 2px 2px 4px #ccc;
	left: 0.2em;
	height: 1em;
	line-height: 1em;
	background: transparent;
}
.stdklicker.klassenbuch:before {
	font-size: 1.4em;
	content: '\f2b9';
	color: var(--black);
	opacity:16%;
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	display: block;
	/*src:url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype");*/
	position: absolute;
	top: 0.2em;
	text-shadow: 2px 2px 4px #ccc;
	right: 0.2em;
	height: 1em;
	line-height: 1em;
	background: transparent;
}
.stdklicker.klassenbuch.mit:before {
	color: var(--green);
}
.stdklicker.klassenbuch.ohne:before {
	color: var(--red);
}
.stdklicker.Klausur,
.stdklicker.nachschreibe,
.stdklicker.stundeKursschreibe,
.stdklicker.exkurs {
	cursor: pointer;
	opacity:100% !important;
}
.stdklicker.exkurs:before {
	font-size: 1.4em;
	content: 'E';
	color: var(--darkred);
	display: block;
	/*src:url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype");*/
	position: absolute;
	top: 0.2em;
	text-shadow: 2px 2px 4px #ccc;
	right: 0.2em;
	height: 1em;
	opacity:1;
	line-height: 1em;
	background: transparent;
}
.klassenbuchlist {
	width:100%;
}
.klassenbuchlist tr:not(.klbheader)>th {
	text-align:left;
}
.klassenbuchlist tr>td {
	text-align:center;
	min-width:1.3rem;
}
.klassenbuchlist th, .klassenbuchlist td {
	border:1px solid black;
}
.klassenbuchlist td.klbchk {
	cursor:pointer;
	width:2rem;
}
.klassenbuchlist td.klbchk:before {
	font-family: "Font Awesome 5 Free";
	font-weight:900;
}
.klassenbuchlist td.klbchk[anw="1"]:before {
	/*content:'\f4fc';
	color:var(--input-text);*/
}
.klassenbuchlist td.klbchk[anw="2"]:before {
	content:'\e511';
	color:var(--warning);
}
.klassenbuchlist td.klbchk[anw="3"]:before {
	content:'\e513';
	color:var(--red);
}
.klassenbuchlist td.klbchk[anw="4"]:before {
	content:'\e509';
	color:var(--lightblue);
}
.klassenbuchlist td.klbchk[anw="5"]:before {
	content:'\e511';
	color:var(--green);
}
.klassenbuchlist td.klbchk[ma] {
	font-size:0.7rem;
	padding:0.15rem;
}
.klassenbuchlist td.onerow[ma="1"]:before, .klassenbuchlist td.fiverow.setMA[ma="1"]:before {
	content:'\2b\2b';
	color:var(--darkgreen);
}
.klassenbuchlist td.onerow[ma="2"]:before, .klassenbuchlist td.fiverow.setMA[ma="2"]:before {
	content:'\2b o';
	color:var(--darkgreen);
}
.klassenbuchlist td.onerow[ma="3"]:before, .klassenbuchlist td.fiverow.setMA[ma="3"]:before {
	content:'o';
	color:var(--lightblack);
}
.klassenbuchlist td.onerow[ma="4"]:before, .klassenbuchlist td.fiverow.setMA[ma="4"]:before {
	content:'o\f068';
	color:var(--warning);
}
.klassenbuchlist td.onerow[ma="5"]:before, .klassenbuchlist td.fiverow.setMA[ma="5"]:before {
	content:'\f068\f068';
	color:var(--red);
}
.klassenbuchlist td.klbchk[ha="1"],.klassenbuchlist td.onerow[ha="1"],.klassenbuchlist td.klbchk[ha="2"] {
	background:var(--red);
}
.klassenbuchlist td.klbchk[ha="1"]:before {
	content:'\58';
	color:var(--black);
}
.klassenbuchlist th:nth-child(1) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width:14rem;
}
@media screen and (max-width:70em) {
	.klassenbuchlist th.klbwide, .klassenbuchlist td.klbwide {
		display:none;
	}
}
.klassenbuchlist td.klbwide input {
	margin-bottom:0;
}
.stdausfall.alert:before {
	content:'Ja';
}
.stdausfall.success:before {
	content:'Nein';
}
.entschTable td button {
	margin:0.2rem 0.5rem;
}
.li_fa_bemerkung {
	background:var(--yellow);
}
@media screen and (max-width:25em) {
	.klassenbuchlist th:nth-child(1) {
		max-width:8rem;
	}
	.klassenbuchlist td.klbchk[ma],.klassenbuchlist td.klbchk[ha],.klassenbuchlist td.klbchk[anw] {
		padding:0.05rem;
	}
}
@media screen and (max-width:22em) {
	.fiverow {
		display:none;
	}
	.onerow {
		display:table-cell;
	}
}
@media screen and (min-width:22em) {
	.fiverow {
		display:table-cell;
	}
	.onerow {
		display:none;
	}
}
.stdklicker.Klausur:before,
.stdklicker.Kursschreibe:before {
	font-size: 1.4em;
	content: 'K';
	color: var(--darkred);
	display: block;
	/*src:url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype");*/
	position: absolute;
	top: 0.2em;
	text-shadow: 2px 2px 4px #ccc;
	right: 0.2em;
	height: 1em;
	line-height: 1em;
	background: transparent;
	opacity:100% !important;
}
.stdinner.nachschreibe {
	color:var(--grey);
}
.stdklicker.nachschreibe:before {
	font-size: 1.4em;
	content: 'N';
	color: var(--darkred);
	display: block;
	/*src:url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype");*/
	position: absolute;
	top: 0.2em;
	text-shadow: 2px 2px 4px #ccc;
	right: 0.2em;
	height: 1em;
	line-height: 1em;
	background: transparent;
	opacity:100% !important;
}
.stdklicker.Kursschreibt {
	cursor: pointer;
}

.stdklicker.Kursschreibt:before,
.stdklicker.fremdvertretung.Klausur:before {
	font-size: 1.4em;
	content: 'K';
	color: var(--darkblue);
	display: block;
	position: absolute;
	top: 0.2em;
	text-shadow: 2px 2px 4px #ccc;
	right: 0.2em;
	height: 1em;
	line-height: 1em;
	background: transparent;
	opacity:100% !important;
}

.stdklicker.technikstoerung {
	cursor: pointer;
}

.stdklicker.technikstoerung:before {
	content: ' ';
	display: block;
	width: 1.4em;
	height: 1.4em;
	position: absolute;
	bottom: 0.1em;
	right: 0.1em;
	background-image: url(../img/warning.svg);
	background-size: contain;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.Klausurbemerkungen {
	padding: 0;
	position: relative;
}

.Klausurbemerkungen>div {
	display: flex;
	width: 100%;
	border: 1px solid black;
}

.Klausurbemerkungen>div>div:nth-child(1) {
	width: 30px;
}

.Klausurbemerkungen>div>div:nth-child(2) {
	flex-grow: 1;
	text-align: left;
}

.stdklicker.AufgabenVorhanden:before {
	color: var(--darkgreen) !important;
	content: '\f022';
	display: block;
	color: var(--darkred);
}

.stdklicker.KeineAufgabenVorhanden:before {
	color: var(--darkred) !important;
	content: '\f022';
	font-size: 1.4em;
	display: block;
}

.stdklicker.stdinfo:before {
	color: var(--blue) !important;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f05a";
	font-size: 1.4em;
	display: block;
	position: absolute;
	left: 0.2em;
	bottom: 0.1em;
}
.mitInfo div.stdVinfo {
	color:var(--yellow);
}
.stdklicker.stdVinfo:before {
	color: var(--black) !important;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f05a";
	font-size: 1.4em;
	display: block;
	position: absolute;
	left: 0.2em;
	top: 0.1em;
}
.terminallg {
	background-color:var(--terminallg);
	border:1px solid black;    
}
.terminEP {
	background-color:var(--terminep);
	border:1px solid black;    
}
.terminQ1 {
	background-color:var(--terminq1);
	border:1px solid black;    
}
.terminQ2 {
	background-color:var(--terminq2);
	border:1px solid black;    
}
.terminLehrer {
	background-color:var(--terminlehrer);
	border:1px solid black;    
}
.termintt {
	background-color:var(--termintt);
	border:1px solid black;    
}
.externGebucht {
	background-color: var(--green) !important;
}

.Aufsichtenliste {
	width: 100%;
	position: relative;
}

.Aufsichtenliste>div {
	text-align: left;
	width: 100%;
	border: 1px solid black;
}

.Aufsichtenliste>div:nth-child(2n+1) {
	background: #ddd;
}

.Aufsichtenliste>div>span:nth-child(1) {
	font-style: italic;
	padding-left: 35%;
	padding-right: 20px;
}

.meineAufsicht {
	color: var(--red);
	font-weight: bold;
}

#Buchungen .extGebucht:hover {
	cursor: pointer;
	background: rgba(230, 200, 160, 0.6);
}

.stunde.EVA.mitte {
	background: var(--std_EVAmitte);
	font-weight: 700
}

.stunde.vertretung.mitte {
	background-color: var(--std_vertretungmitte);
	font-weight: 700
}
.stunde.veranstaltung.mitte {
	background-color: var(--std_veranstaltungmitte);
	font-weight: 700
}
.stunde.sprech.mitte {
	background-color: var(--std_sprechmitte);
	font-weight: 700
}

.stunde.vertreten.mitte {
	background-color: var(--std_vertretenmitte);
	font-weight: 700
}

.stunde.fremdvertretung.mitte {
	background-color: var(--std_fremdvertretungmitte)
}

.stunde.ausfall.mitte {
	background-color: var(--std_ausfallmitte);
	font-weight: 700
}

.stunde.raumvertretung.mitte {
	background-color: var(--std_raumvertretungmitte);
	font-weight: 700
}

.stunde.mitte {
	background-color: var(--std_normalmitte);
	font-weight: 700
}

.stunde {
	background-color: var(--std_normal)
}

.stunde.EVA {
	background: var(--std_EVA)
}

.stunde.vertretung {
	background-color: var(--std_vertretung)
}
.stunde.veranstaltung {
	background-color: var(--std_veranstaltung);
	display: grid; 
	place-content: center;
	text-align:center;
	height:100%;
	width:100%;
	white-space: wrap;
}
.stunde.sprech {
	background-color: var(--std_sprech)
}

.stunde.vertreten {
	background-color: var(--std_vertreten)
}

.stunde.aufsicht {
	background-color: var(--std_vertretung);
}

.stunde.fremdvertretung {
	background-color: var(--std_fremdvertretung)
}

.stunde.ausfall {
	background-color: var(--std_ausfall)
}

.stunde.raumvertretung {
	background-color: var(--std_raumvertretung)
}

.stunde.frei,
.stunde.frei.mitte {
	background: var(--std_frei)
}

.stdklicker {
	width: 50%;
	height: 50%;
	position: absolute;
}

.stdklicker.ro {
	top: 0%;
	right: 0%;
}

.stdklicker.ru {
	top: 50%;
	right: 0%;
}

.stdklicker.lo {
	top: 0%;
	left: 0%;
}

.stdklicker.lu {
	top: 50%;
	left: 0%;
}

.klausuren {
	position: relative;
	height: 2.4em !important;
	vertical-align: top;
	z-index: 1;
}

.klausuren>div {
	height: 2.5em;
	position: absolute;
	top: 0px;
	z-index: 5;
	width: 34%;
}

.klausuren>div.EP,
.klausuren>div.Q1,
.klausuren>div.Q2 {
	cursor: pointer;
}

.klausuren>div.EP::after {
	background-color: var(--EP);
}

.klausuren>div.Q1::after {
	background-color: var(--Q1);
}

.klausuren>div.Q2::after {
	background-color: var(--Q2);
}

.klausuren>div::after {
	content: ' ';
	display: block;
	background-color: #fff;
	position: absolute;
	bottom: 0em;
	width: 100%;
	height: 0.4em;
	z-index: 999;
}

.klausuren>div:nth-child(1) {
	left: 0%;
}

.klausuren>div:nth-child(2) {
	left: 34%;
}

.klausuren>div:nth-child(3) {
	left: 67%;
}

.klausurplanTable>table {
	width: 100%;
}

.klausurplanTable>table>th {
	background-color: var(--darkgrey);
	color: var(--grey);
}

.klausurplanTable td.center {
	text-align: center;
}

.klausurplanTable td,
.klausurplanTable th {
	border: 1px solid black;
	padding: 0.3px 3px;
}

.klausurplanTable td.bem {
	font-style: italic;
}

.klausurplanTable tr.Pause {
	background-color: var(--lightgrey);
}

#Betreuunginner p.warning {
	background-color: var(--orange);
	padding: 4px;
}

.betr table td button {
	margin-bottom: 0;
	font-size: 1em;
	padding: 0.2em;
}

.clicktd_dateien {
	position: relative;
}

div[sorthelper]:first-child {
	left: 0;
}

div[sorthelper]:nth-child(2) {
	left: 50%;
}

div[sorthelper] {
	cursor: pointer;
	height: 24px;
	position: absolute;
}

.dateiTabelle th {
	position: relative;
	padding: 0;
	overflow: scroll;
	color: var(--input-text);
}

div[sorthelper] {
	width: 100%;
	top: 0;
	z-index: auto;
}
.dateiTabelle {
	table-layout: fixed;
}
.dateiTabelle div[sorthelper]:hover::before {
	content: attr(sorthelper);
	position: absolute;
	display: block;
	bottom: 100%;
	left: 50%;
	margin-left: -100px;
	height: 20px;
	border-radius: 5px;
	width: max-content;
	padding: 2px 4px;
	font-size: 0.7em;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-weight: 50;
	z-index: auto;
	position: absolute;
}
.elliptical {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.dateiTabelle th:nth-child(1), .dateiTabelle th:nth-child(2), .dateiTabelle th:nth-child(5), .dateiTabelle th:nth-child(6) {
	width:25px !important;
}
.dateiTabelle th:nth-child(4) {
	width:4rem;
}
.dateiTabelle td:nth-child(3) {

}
.dateiTabelle td>div.elliptical {
	width:100%;
}
div[sorthelper].ASC::after {
	content: "\f0de";
}

div[sorthelper].DESC::after {
	content: "\f0dd";
	padding-bottom: 10px;
}

div[sorthelper]::after {
	font-size: 1.4em;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	/*src:url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype");*/
	position: absolute;
	top: 0em;
	text-shadow: 2px 2px 4px #ccc;
	right: 0.2em;
	height: 1em;
	line-height: 1em;
	background: transparent;
	display: block;
}

#mitt_sorter, #mmitt_sorter {
	font-size: 0.5em;
	padding-left: 50px;
}

.filterbutton {
	position: absolute;
	top: 150px;
	left: 20px;
	width: 50px;
	height: 50px;
	border-radius: 30px;
	cursor: pointer;
}

.filterbutton>div {
	position: absolute;
	left: 100%;
	top: 0px;
	width: 235px;
	display: none;
	padding: 0.3em 0.3em 0.3em 0.3em;
	background: #ccc;
	overflow: hidden;
	transition: width 1s;
}

.filterbutton::before {
	content: "\f0b0";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 28px;
}

.filterbutton>div.open {
	display: block;
}

.filterbutton>div>input {
	width: 170px;
	display: inline-block;
	margin: 0 0 0rem !important
}

.filterbutton>div>button {
	width: 50px;
	display: inline-block;
	position: relative;
	top: -2px;
	height: calc(2.4375rem - 0px) !important;
	margin: 0 0 0rem !important;
}

.gefiltert {
	display: none;
}

.dateikategorie {
	background-color: var(--orange);
	text-align: left !important;
	padding-left: 30px !important;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	border: 1px solid black;
}

.dateikategorie.open:before {
	content: '-';
}

.dateikat {}

.dateikategorie:before {
	content: '+';
	position: absolute;
	display: block;
	width: calc(0.8em + 4px);
	height: calc(0.8em + 6px);
	top: 7px;
	left: 7px;
	border: 1px solid black;
	background-color: var(--grey);
	line-height: 0.8em;
	font-size: 0.9em;
	padding: 2px;
	text-align: center;
}

.menu a i {
	color: black;
	font-style: normal !important;
}

.Canvasselector {
	display: flex;
	justify-content: space-around;
}

.Canvasselector input[type="color"] {
	width: 3em !important;
}

.Canvasselector>div {
	position: relative;
}

.Canvasselector>div:nth-Child(2) {
	width: 270px;
}

.Canvasselector input[type="range"] {
	display: inline-block;
	border: 2px solid red;
	position: absolute;
	left: 0;
	top: 8px;
}

.Canvasselector span {
	display: block;
	vertical-align: middle;
	text-align: center;
	position: absolute;
	left: 200px;
	height: 2.4375rem;
	width: 60px;
}

.Canvasselector span>i {
	display: block;
	position: absolute;
	top: -10px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	padding: 0;
	height: 20px;
}

#lPicture {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	display: none;
	z-index: 99999;
}

#lPicture>div {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
	-webkit-box-shadow: 4px 4px 17px 7px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 4px 4px 17px 7px rgba(0, 0, 0, 0.75);
	box-shadow: 4px 4px 17px 7px rgba(0, 0, 0, 0.75);
	max-width: 80vw;
	max-height: 80vh;
}

#lpCanvas {
	max-width: 100%;
	max-height: 100%;
}

#lPicture>div>div:firstChild {
	margin-top: 20x;
}

@media screen and (max-width:69.9375em) {
	.reveal {
		padding-top: 60px !important;
	}
	.close-button {
		margin-top: 40px !important;
	}
}

.Dateierledigt {
	background-color: var(--green);
}

.aufgabenbutton {
	position: relative;
}

.aufgabenbutton button {
	position: absolute;
	right: 0.3em;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}

.aufgabenbutton[data-new]::after {
	content: attr(data-new);
	display: block;
	position: absolute;
	border: 1px solid red;
	border-radius: 2em;
	width: 1.5em;
	height: 1.5em;
	right: .3em;
	top: -.7em;
	background: var(--red);
	text-align: center;
	line-height: 1.3em;
}

.aufgabenbutton[data-new=""]::after {
	display: none;
}

.reveal-modal-bg {
	position: fixed;
}

.reveal-modal {
	top: 150px !important;
}

.file>td:nth-child(4)>img,
.file>td:nth-child(5)>img {
	min-width: 20px !important;
	width: 20px !important;
}

.notUploaded {
	color: #666;
	background: var(--grey);
}

.coronaxytable {
	display: flex;
	width: 100%;
}

.coronaxytable>div {
	width: 50%;
}

.coronaxytable h4 {
	width: 100%;
	text-align: center;
}

.sporthallenoffen>div:nth-child(3) {
	font-weight: bold;
}

.sporthallenoffen>div:nth-child(3)::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 10px;
	height: 10px;
	border: 1em solid var(--darkgreen);
	border-radius: 1em;
}

.sporthallengeschlossen>div:nth-child(3)::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 10px;
	height: 10px;
	border: 1em solid var(--darkred);
	border-radius: 1em;
}

.Stdueberschrift {
	display: flex;
}

.Stdueberschrift>span:first-child {
	flex-grow: 1;
	margin: 0;
}

.Stdueberschrift>span:nth-child(2),
.Stdueberschrift>span:nth-child(3),
.Stdueberschrift>span:nth-child(4) {
	height: 2.1em;
	margin: 0px 5px;
}

.Stdueberschrift>span {
	display: block;
}

.radioSwitchDiv {
	width: 100%;
	display: flex;
	justify-content: space-around;
}

.radioSwitchDiv label {
	display: block;
	margin: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.radioSwitchDiv input {
	display: none;
	margin-bottom: 0;
}

.radioSwitchDiv input:checked+label {
	background: var(--blue);
}

.radioSwitchDiv .coron {
	background: var(--green) !important;
}

.praesenzname {
	width: 100%;
	text-align: center;
	margin-top: 1em;
	font-size: 1.2em;
}
.TeamsPwResetDone {
	background:var(--darkgreen);
	color:var(--white);
	padding:0.25em;
}
.TeamsPwResetReq {
	background:var(--orange);
	color:var(--white);
	padding:0.25em;
	text-align:center;
}
#PdfPreview {
	background:rgba(200,200,200,0.8);
	z-index:9999;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
}
#PdfPreview>div {
	display: inline-block;
	position:absolute;
	top:4vh;
	left:0px;
	right:0px;
	max-height:96vh;
	margin:auto;
	padding-top:30px;
	border:2px solid black;
	background:var(--white);
	float:left;
	overflow:auto;
}
#PdfPreview>div>div {
	position:relative;
	display: inline-block;
	float:left;
	width: fit-content; 
  /* To adjust the height as well */ 
	height: fit-content;
	/*width:100%;
	//height:100%;
	//display:flex;
	padding:0;
	overflow:hidden;
	flex-direction:row;
	justify-content:space-between;*/
}
#PdfPreview>div>div>img {
	display: block;
    max-width: 96vw;
    max-height: calc(96vh - 35px);
    width: auto;
    height: auto;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}
#PdfPreview>div>div>img.fullSize {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}
#closePdfPreview {
	top:0.1rem;
}
.previewerChanger {
	position:absolute;
	top:0;
	width:20%;
	bottom:0;
	overflow:auto;
	cursor:pointer;
}
.previewerChanger:hover {
	background-color:rgba(200,200,200,0.7);
}
.previewerChanger.left {
	left:0;
}
.previewerChanger.right {
	right:0;
}
.previewerChanger:hover::before {
	content:'';
	z-index:2;
	position:absolute;
	left:0;
	display:block;
	right:0;
	bottom:0;
	top:0;
	height:0;
	width:0;
	margin:auto;
	border: 30px solid rgba(100,100,100,0.7);
	border-radius:100%;
}
.previewerChanger:hover:after {
	content:'';
	z-index:2;
	position:absolute;
	display:block;
	bottom:0;
	top:0;
	height:0;
	width:0;
	margin:auto;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent; 
}
.previewerChanger.right:after {
	border-left:20px solid rgba(200,200,200,0.7);
	left:11px;
	right:0px;
}
.previewerChanger.left:after {
	border-right:20px solid rgba(200,200,200,0.7);
	right:11px;
	left:0px;
}
.Nachrichteltern {
	background-color:var(--red);
}
#FS2 label {
	width:13rem;
}
a>abbr[title] {
	border-bottom:none;
	text-decoration:none;
	color:inherit;
}
#feedback>closebut {
	position:absolute;
	right:0.4rem;
	top:-0.6rem;
	font-size:2rem;
	margin:0;
	padding:0.3rem;
	color:var(--grey);
	cursor:pointer;
}
#feedback>closebut:hover {
	color:var(--black);
}
#feedback p {
	width:100%;
	white-space:nobreak;
	padding-left:1rem;
}
#feedback {
	position:fixed;
	left:0;
	bottom:-3rem;
	height:3rem;
	line-height:calc(2.5 * var(--stdfontsize));
	font-size:calc(1.5 * var(--stdfontsize));
	border:1px solid black;
	width:100%;
	transition:all 0.5s;
	z-index:9999;
}
#feedback.open {
	bottom:0rem;
}
#feedback.fbtop {
	top:-3rem;
}
#feedback.fbtop.open {
	top:0;
}
#feedback.success {
	background:var(--green);
}
#feedback.alert {
	background:var(--red);
}
.zahlung.unbest {
	background-color:var(--red);
}
.zahlung.freigegeben {
	background-color:var(--green);
}
.zahlung {
	background-color:var(--yellow);
	padding:1rem;
	box-shadow:3px 4px 7px #343434;
	transition: box-shadow 0.4s;
	margin:1rem 0.3rem;
	cursor:pointer;
}
.zahlung:hover {
	box-shadow:7px 10px 9px #343434;
}
.zahlung h5 {
	width:100%;
	text-align:center;
}
.zahlung table th {
	width:6rem;
}
th.sortable.DESC::after {
	content: "\f0de";
	position:absolute;
	right:0;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

th.sortable.ASC::after {
	content: "\f0dd";
	padding-bottom: 10px;
	position:absolute;
	right:0;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
th.sortable {
	cursor: pointer;
	height: 24px;
	position:relative;
	
}
.menuicon {
	width:1.3rem;
	height:1.3rem;
	padding:0;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}

@media screen and (min-width: 80rem) {
	.top-bar { 
		display: flex;
		width: 100%;
	}
	.top-bar-left {
		flex-grow: 2;
	}
}
.anzeige {
	max-width: calc(100vw - 1rem);
}
#willkommenbody {
	display:grid;
	grid-gap:1rem;
	margin:0px 2rem 0px 5px; 
	max-width:calc(100vw - 2rem);
	clear: both;
	grid-template-columns:var(--willkommenbodygridtc);
	padding-bottom:4rem;
	padding-top:0.75rem;
}
@media screen and (max-width: 63.975em) {
	#willkommenbody {
		margin-top:1.8rem;
	}
}
@media screen and (min-width: 40em) {
	#willkommenbody {
		/*grid-template-columns: 1fr 1fr;*/
	}
	.chatbox {
		grid-column: auto / span 2;
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-gap:1rem;
	}
}
@media screen and (min-width: 64em) and (orientation:landscape) {
	#willkommenbody {
		/*grid-template-columns: 1fr 1fr 1fr;*/
	}
}
#aktuelleChats {
	width:100%;
}
#Ajax {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, .6);
	height: 100%;
	width: 100%;
	z-index: 999;
	display: none
}
.ring {
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	margin:auto;
}
.ring>div {
	/* 	--character-width: 1ch; */
	--inner-angle: calc((360 / var(--char-count)) * 1deg);
	--character-width: 1;
	font-size: calc(var(--font-size, 1) * 1rem);
	font-weight:var(--boldness);
	color:var(--font-color);
	position: absolute;
	top:50%;
	left:50%;
	text-shadow: var(--text-shadow);
	animation: ringspin var(--speed) infinite linear; 
}
@keyframes ringspin {
    to {
      rotate: -360deg;
    }
  }
@media () {
  .ring>div {
  	animation: ringspin var(--speed) infinite linear;  
  }
  @keyframes ringspin {
    to {
      rotate: -360deg;
    }
  }
}
.ring .char {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
/* 	line-height: 1; */
	transform:
		translate(-50%, -50%)
		rotate(calc(var(--inner-angle) * var(--char-index)))
		translateY(var(--radius));
}
.sr-only {
	position: absolute;
	width: 100px;
	height: 100px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
.absenzshower {
	display:grid;
	max-width:90%;
	grid-template-columns: 1fr 6rem 4rem 2rem 2rem 2rem;
}
.absenzshower>div>div {
	border:.5rem solid black;
	border-radius:100%;
	width:1rem;
	margin-top:0.25rem;
	height:1rem;
}
.absenzshower>div {
	text-align:center;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.absenzshower>div:not(:nth-child(1)) {
	text-align:center;
}
.absenzshower>div:nth-child(1) {
	text-align:left;
}
.absenzshower>div:nth-child(6n+1):not(:nth-child(1)) {
	text-align:left;
	cursor:help;
}
.absenzshower>div.th {
	font-weight:bold;
	border-bottom:2px solid black;
}
.absenzshower>div>div.inbearb {
	border-color:var(--yellow);
}
.absenzshower>div>div.neu {
	border-color:var(--darkred);
}
.absenzshower>div>div.genehm {
	border-color:var(--green);
}
.absenzshower>div.clickable {
	cursor:pointer;
}
td.checkfb, div.checkfb {
	width:2rem;
	text-align:center;
}
td.checkfb:after, div.checkfb:after {
	display:inline-block;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
td.checkfb.notok:after, div.checkfb.notok:after {
	content:'\f071';
	color:var(--red);
}
td.checkfb.redpoint:after, div.checkfb.redpoint:after {
	content:'\f057';
	color:var(--red);
}
td.checkfb.waiting:after, div.checkfb.waiting:after {
	content:'\f252';
	color:var(--darkyellow);
}
td.checkfb.waiting.red:after, div.checkfb.waiting.red:after {
	color:var(--darkred);
}
td.checkfb.ok:after, div.checkfb.ok:after {
	content:'\f058';
	color:var(--green);
}
div.input-group-switch.large {
	width:6rem;
}
div.input-group-switch>label.switch-paddle {
	display:table-cell;
	height:2.6rem;
	width:5rem;
	font-size:1.1rem;
}
div.input-group-switch>label.switch-paddle:after {
	height:2rem;
	width:2rem;
	top:0.3rem;
}
div.input-group-switch>input.switch-input:checked + label.switch-paddle:after {
	left:2.7rem;
}

@media screen and (max-width:63.950rem) {
	.fxmenu {
		position: absolute !important;
	}
	.large-horizontal>ul.menu.vertical {
		min-height:100vh;
		height:100%;
		position:absolute;
	}
	.menu.vertical > li {
		line-height:4rem !important;
		min-height: 6em !important;
		font-size:1vh;
	}
	.menu.vertical > li a {
		font-size:3vh;
		padding:0.3rem 0.2rem;
	}
	.menuimg {
		background-position:left center;
	}
}
.anwGrid {
	display:grid;
	grid-template-columns: repeat(3,1fr);
	column-gap: 10px;
	row-gap: 5px;
}
.anwGrid>button.anw {
	background:var(--green);
}
.anwGrid>button.abw {
	background:var(--red);
}
.anwGrid>button.sonst, .anwGrid>button.url, .anwGrid>button.abg {
	background:var(--yellow);
	color:var(--black);
}
.anwGrid>button.klausur {
	color:var(--blue);
}
.widebuttons button {
	display:block;
	width:100%;	
}
.eabwh {
	cursor:pointer;
	user-select: none;
}
.entschlist {
	display:flex;
}
.entschlist p {
	width:50%;
}
.entschlist button:nth-child(3) {
	width:4rem;
}
.stdbuttons {
	display:flex;
	justify-content:space-between;
	margin-bottom:1rem;
}

.stdbuttons label {
	display:block;
}
.stdbuttons input {
	display:none;
}
.stdbuttons input:checked + label {
	background:var(--blue);
}
.setDigIdEin {
	display:flex;
}
.setDigIdEin>span {
	display:block;
}
.setDigIdEin input:not(:checked) + label:after {
	content:"nein";
}
.setDigIdEin input:checked + label:after {
	content:"Ja";
}
.setDigIdEin input:checked + label {
	background:var(--green);
}
.klassebuchbox {
	position:relative;
	max-height:54rem;
	overflow-y:hidden;
}
.klassebuchbox ul {
	max-height:47rem;
	overflow-y:scroll;
	list-style-type: none;
	position:relative;
}
@media screen and (max-width:39.9375em) {
	.klassebuchbox {
		max-height:20rem;
		overflow-y:hidden;
	}	
	.klassebuchbox ul {
		max-height:20rem;
	}
}

.klassebuchbox ul li {
	display:flex;
	width:100%;
	cursor:pointer;
}
.klassebuchbox ul li.vergangen.fehlend {
	color:var(--red);
}
.klassebuchbox ul li.eintrag {
	color:var(--darkgreen);
}
.klassebuchbox ul li.newday {
	border-top:1px solid black;
}
.klassebuchbox ul li>span {
	display:block;
}
.klassebuchbox ul li>span:nth-child(1) {
	width:7rem;
}
.klassebuchbox ul li>span:nth-child(2) {
	width:2rem;
}
.klassebuchbox ul li>span:nth-child(2):after {
	content:'.';
}
.klassebuchbox ul li>span:nth-child(3) {
	flex-grow:1;
}
.klassebuchbox div.today {
	position:absolute;
	top:1rem;
	right:1rem;
}
.klassebuchbox div.toggleKlBuch:before {
	content: "\f06e";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
.klassebuchbox div.toggleKlBuch.open:before {
	content: "\f070";
}
.klassebuchbox div.toggleKlBuch {
	position:absolute;
	top:1rem;
	right:4rem;
}
.klassebuchbox div.today:before {
	content: "\f783";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
#download_button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--progress) * 1%);
  background-color: var(--darkgreen);
  transition: width 0.2s ease;
  z-index: 0;
}
#download_button::after {
  content: attr(data-progress);
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 2.5rem;
  color: var(--offwhite);
  font-size:2rem;
  left:0;top:0;
  z-index: 1;
  pointer-events: none;
}
.icon-wrapper i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 24px;
  opacity: 0;
  animation: fadeSwap 4s infinite;
}

.icon-wrapper i:nth-child(1) {
  animation-delay: 0s;
}
.icon-wrapper i:nth-child(2) {
  animation-delay: 2s;
}
@keyframes fadeSwap {
      0%, 45% {
        opacity: 1;
      }
      50%, 100% {
        opacity: 0;
      }
    }