/* ALLGEMEIN */

html,body{
	width:100%;
	height:100%;
	font-size:18px;
}
*{
	box-sizing:border-box;
}

body {
	border:0;
	margin:0;
	padding:0;
	font-family: 'Roboto', sans-serif;
	font-size:1rem;
	color:#595959;
	overflow-y: scroll;
	background-color:#ffffff;
}
#anzeiger-container{
	max-width:1000px;
	margin:0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
}

#main{
	/* position:absolute; */
	/* height:100%; */
	width:100%;
	flex-grow:1;
	overflow-y:auto;
	background-color:#ffffff;
}

#content{
	/* margin:0px auto; */
	width:100%;
	padding:20px;
}
#content.small{
	font-size:0.9em;
}

.topbalken{
	/* float:left; */
	width:100%;
	box-sizing:border-box;
	background-color:#4b4b4b;
	color:#ffffff;
	padding:15px;
	font-size:1.6em;
	font-weight:300;
}
.top-notification{
	position:absolute;
	top:20px;
	right:20px;
}
#main .top-notification img{
	width:26px;
	height:auto;
	filter:invert(100%);
	animation: swingRotate 2s ease-in-out infinite;
}

.news{
	float:left;
	border:1px solid grey;
	padding:15px;
	box-sizing:border-box;
	margin-top:20px;
	width:100%;
}
.news-red{
	border:6px solid #c23b3b;
}
.new{
	font-weight:600;
	color:#92b34c;
}
.old{
	font-weight:600;
	color:#c23b3b;
	text-decoration:line-through;
}
.old2{
	font-weight:600;
	color:#c23b3b;
	text-decoration:none;
	text-decoration-line:none !important;
}

.error{
	background-color:#aa0000;
	color:#ffffff;
	padding:15px;
}
.error{
	background-color:#aa0000;
	color:#ffffff;
	padding:15px;
}
.infobox{
	background-color:#92b34c;
	color:#ffffff;
	padding:15px;
}
.table-liste tr:nth-child(even) td{
	background-color:#fafafa;
}
#visible{
	display:none;
}
#visible + label{
	position:absolute;
	top:18px;
	right:8px;
	display:block;
	width:28px;
	height:28px;
	background-image:url('../images/icon_visible.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	opacity:0.5;
}
#visible:checked + label{
	background-image:url('../images/icon_hidden.png');
}
.list-container{
    margin-bottom:20px;
}

/* MENU */

#anzeiger-menu{    
	position: sticky;
    bottom: 0px;
    height: auto;
    z-index: 999;
    left: 0;
    right: 0;
	
	height:74px;
	z-index:999;
	background-color:#8bb8d1;
}
.anzeiger-menu-itemcontainer{
	width:90%;
	margin:0px auto;
}
.anzeiger-menu-item{
	float:left;
	width:20%;
	text-align:center;
	cursor:pointer;
	height:74px;
}
.anzeiger-menu-item-0._active, .anzeiger-menu-item-1._active, .anzeiger-menu-item-2._active, .anzeiger-menu-item-3._active,.anzeiger-menu-item-4._active{
	background-color:#54839e;
}

.anzeiger-menu-item-0{
	width:100%;
	height:100%;
	background-image:URL('../images/icon-menu0.png');
	background-size:90% auto;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#8bb8d1;
}
.anzeiger-menu-item-1{
	width:100%;
	height:100%;
	background-image:URL('../images/icon-menu1.png');
	background-size:90% auto;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#8bb8d1;
}
.anzeiger-menu-item-2{
	width:100%;
	height:100%;
	background-image:URL('../images/icon-menu2.png');
	background-size:90% auto;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#8bb8d1;
}
.anzeiger-menu-item-3{
	width:100%;
	height:100%;
	background-image:URL('../images/icon-menu3.png');
	background-size:90% auto;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#8bb8d1;
}
.anzeiger-menu-item-4{
	width:100%;
	height:100%;
	background-image:URL('../images/icon-menu4.png');
	background-size:90% auto;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#8bb8d1;
}

/* START */
#anzeiger-start{
	float:left;
	width:100%;
	height:100%;
}
#anzeiger-start img{
	width:100%;
	margin-bottom:20px;
}
.textinput{
	border-radius:7px;
	border:2px solid #c8c8c8;
	background-image:URL('../images/input-bg.jpg');
	background-size:100% auto;
	background-repeat:repeat-x;
	height:26px;
	padding:10px;
	font-size:1.6rem;
}

/* PAGETOP */

#pagetop{
	float:left;
	width:100%;
	height:87px;
	background-image:URL('../images/topbg.jpg');
	background-size:100% auto;
	background-position:center;
}
.pagetop-logo{
	float:left;
	width:120px;
	margin-left:27px;
	margin-top:20px;
}

.pagetop-logo img{
	width:100%;
}

.pagetop-bg-content{
	float:right;
	font-size:1.6rem;
	font-weight:600;
	color:#ffffff;
	margin-right:30px;
	margin-top:45px;
}

/* CONTENT */
#content-scrollcontent{
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
	width:616px;
}
.content-area{
	float:left;
	margin-top:27px;
	margin-left:27px;
}
.content-box{
	float:left;
	width:255px;
	height:195px;
	margin-bottom:30px;
}
.filter-box{
	display:flex;
	flex-flow:row nowrap;
	margin-bottom:10px;
}
.filter-left{
	text-align:left;
	flex-grow:1;
}
.filter-right{
	text-align:right;
	width:80px;
	margin-left:10px;
}
.filter-box .textfeld{
	font-size:0.8rem;
	padding:8px;
	margin-top:0;
}
.zaehlernummer-box{
	float:left;
	width:500px;
	border:1px dashed grey;
	padding:20px;
	font-size:2rem;
	font-weight:300;
	margin-top:20px;
	cursor:pointer;
	height:45px;
}
.zaehlernummer-box.active{
	background-color:#b2b2b2;
}
.zaehlernummer-box:hover{
	background-color:#eaeaea;
}
.zaehlernummer-box-done{
	float:right;
	width:180px;
	padding:10px;
	padding-left:20px;
	font-size:1rem;
	font-weight:300;
	margin-bottom:20px;
	background-color:#609329;
	color:#ffffff;
	cursor:pointer;
	margin-top:-20px;
	margin-right:-20px;
}
.zaehlernummer-box-content{
	float:left;
	width:540px;
	height:400px;
	border:1px dashed grey;
	background-image:url('../images/test/stromzaehler.jpg');
	background-size:100% auto;
	display:none;
}


/* Chatter */
#chatter{
	display:flex;
	flex-flow:column nowrap;
	/* justify-content:space-between; */
	height:100%;
    margin-left: -20px;
    margin-right: -20px;
}
/*
.chatter-tabs{
	
}
.chatter-tab{
	background-color:#8c8c8c;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color:#ffffff;
	padding:10px 25px;
	font-size: 14pt;
    font-weight: 300;
	position:relative;
	margin-right:8px;
	cursor:pointer;
	transition:0.2s;

	display:inline-block;
}
.chatter-tab:hover,.chatter-tab.active{
	background-color:#ffffff;
	color:#253e5c;
}*/

.chatter-root{
	position:fixed;
	right:60px;
	top:10px;
	height:98vh;
	max-height:98vh;
	overflow-y:auto;
	width:calc(100% - 1080px);
	padding-left:5px;
	border-left:1px solid #cccccc;
}
.chatter-chats{
	width:100%;
	flex-grow: 1;
    /* height: calc(100% - 100px); */
    overflow-y: auto;
	padding:0 20px;
	background-image:url('../images/chat-backdrop3.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	padding-top:20px;
}
.chatter-form{
	position:relative;
	/* height:40px; */
	/* border-top:1px solid #999999; */
	/* margin-top:5px; */
    /* padding-top: 10px; */
    /* padding-bottom: 5px; */
	/* background-color:#eeeeee; */
}
.chatter-input{
	background-color:#f0f0f0;
	position:fixed;
	bottom:0;
	width:600px;
}
.chatter-input .button{
	width:auto;
	min-width:0;
}
.chatter-form textarea{
	width:calc(100% - 70px);
	margin-left:20px;
	height:36px;
	border:1px solid #aaaaaa;
	border-radius:18px;
	padding:5px;
	background-color:#ffffff;
	font-family:inherit;
	transition:height 0.3s;
	vertical-align:top;
	font-size:1rem;
}
.chatter-form.focus textarea{
	height:100px;
	/* font-size:1rem; */
}
.chatter-form textarea::placeholder{
	font-style:italic;
}
.chatter-form button{
	font-size:1rem;
	line-height:0;
	vertical-align:bottom;
	text-align:center;
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	background-color: var(--color-greenstoma);
	color:#ffffff;
	border:0;
	border-radius:50%;
	width: 36px;
	height: 36px;
	min-width:0;
	overflow:hidden;
	padding:2px;
	margin-top:0;
}
.chatter-form img{
	width:22px !important;
	height:auto;
	vertical-align:middle;
	margin-top:-1px;
	margin-bottom:0 !important;
}
.chatter-content{
	display:none;
}
.chatter-content:first-child{
	display:block;
}
.chatter-file{
	width:40px;
	height:30px;
	opacity:0;
	overflow:hidden;
	position:absolute;
	left:0;
}
.chatter-file-button{
	position:absolute;
	left:3px;
	bottom:4px;
	pointer-events:none;
}
.chatter-emoji-button{
	position:absolute;
	left:3px;
	bottom:44px;
}
.chatter-emojis{
	position:absolute;
	bottom:calc(100% + 40px);
	background-color:#eeeeee;
	padding:5px;
	font-size:2.0rem;
	display:none;
}
.chatter-noaccount{
	font-size:0.9rem;
	padding:5px 10px;
	line-height:1.3;
}

.chat-item{
	background-color:#ffffff;
	border:1px solid #cccccc;
	border-radius:6px;
	padding:10px;
	margin-bottom:10px;
	margin-right:25px;
}
.chat-item._own{
	margin-right:0;
	margin-left:25px;
	background-color:#f0ffe1;
}
.chat-item.chat-moderation{
	opacity:0.7;
	border-style:dashed;
	border-color:#dd5500;
}
.chat-name{
	float:left;
	font-size:0.8rem;
}
.chat-user{
	float:left;
	border-radius:50%;
	margin-right:5px;
	border:1px solid var(--color-greenstoma);
	background-color:#ffffff;
	/* box-shadow:1px 1px 4px rgba(0,0,0,0.1); */
	/* background-color:var(--color-greenstoma); */
	object-fit:cover;
	line-height:0;
	padding:2px;
}
.chat-user img{
	width:18px;
	height:18px;
}
.chat-date{
	float:right;
	font-size:0.8rem;
}
.chat-report{
	display:none;
	float:right;
}
.chat-item:focus .chat-report, .chat-item._focus .chat-report{
	display:inline-block;
}
.chat-report img{
	width:14px;
	margin:2px;
	height:auto;
}
.chat-text{
	clear:both;
	/* margin-top:30px; */
	/* white-space:pre-line; */
}
.chat-moderation .chat-text{
	font-size:0.9em;
	font-style:italic;
}
.chat-image{
	width:100%;
	max-width:100%;
}
.chat-edit{
	float:right;
}
.chat-accept{
	float:right;
	display:none;
	text-align:center;
	width:40px;
}
.chat-cancel{
	float:right;
	display:none;
}
	
hr{
	height:1px;
	border:0;
	background-color:#aaaaaa;
}

.left{ 
	float:left; 
}
.right{ 
	float:right; 
}
.clear{
	clear:both;
}

.textfeld{
	width:100%;
	padding:10px;
	border-radius:10px;
	box-sizing:border-box;
	border:1px solid grey;
	margin-top:10px;
	font-size:1rem;
}
select.textfeld{
	-webkit-appearance:none;
}
.textfeld::placeholder{
	font-style:italic;
	color:#aaaaaa;
}

.button{
	padding:10px;
	border-radius:20px;
	border:0px;
	background-color:#84943b;
	color:#ffffff;
	font-family: 'Roboto', sans-serif;
	font-size:1.2rem;
	width:80%;
	text-align:center;
	cursor:pointer;
	height:55px;
	margin-top:1px;
	margin-top:15px;
	transition:0.3s;
	background: #67910d; /* Old browsers */
	background: -moz-linear-gradient(top, #67910d 0%, #518216 50%, #518216 50%, #437029 50%, #475e17 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #67910d 0%,#518216 50%,#518216 50%,#437029 50%,#475e17 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #67910d 0%,#518216 50%,#518216 50%,#437029 50%,#475e17 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910d', endColorstr='#475e17',GradientType=0 ); /* IE6-9 */
}
.button:hover{
	background: #bfd255; /* Old browsers */
	background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
}

h1{
	font-family: 'Roboto', sans-serif;
	font-size:2.2em;
	padding:0px;
	margin:0px;
	border:0px;
	color:#000000;
	font-weight:400;
	margin-bottom:30px;
}

h2{
	font-family: 'Roboto', sans-serif;
	font-size:1.6em;
	padding:0px;
	margin:0px;
	border:0px;
	color:#4b4b4b;
	font-weight:400;
}

h3{
	font-family: 'Roboto', sans-serif;
	font-size:1.4em;
	padding:0px;
	margin:0px;
	border:0px;
	font-weight:400;
}

h4{
	font-family: 'Roboto', sans-serif;
	font-size:1.4em;
	padding:0px;
	margin:0px;
	border:0px;
	font-weight:400;
}

td{
	border-bottom:1px solid #d3d3d3;
}

.bold{
	font-weight:600;
}
.italic{
	font-style:italic; 
}

a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color:#8bb8d1;
}

a:hover {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color:#595959;
}

a:active {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color:#595959;
}

hr{
	margin:15px 0;
}
table td{
	vertical-align:top;
}

img{
	border: 0px;
}
@keyframes swingRotate {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(30deg); }
    30% { transform: rotate(-30deg); }
    45% { transform: rotate(30deg); }
    60% { transform: rotate(-30deg); }
    75% { transform: rotate(0deg); }
}