@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{
	padding:0px;
	margin:0px;
	font-family:open_sansregular,Helvetica, Ariel, sans-serif;
	font-weight:100;
	font-size:12px;
	line-height:16px;
	font-style:normal;
	color:#fff;
	border:0px;
	outline:none;
	text-decoration:none;
	border-collapse:collapse;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	/*-webkit-transform: translate3d(0,0,0);*/
}
html {
	width:100%;
	height:100%;
	background:#000;
}
body {
	width:100%;
	height:100%;
}
#backg{
	display: block;
	position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
}
.mitte{
	display: inline-block;
	position: relative;
	width:100%;
	max-width:600px;
    display: block;
    margin: auto;
    text-align: left;
}
.mitteXY{
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.mitteX{
	position:absolute;
	left:50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.mitteY{
	position:absolute;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.blur{
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}
img{
	vertical-align:top;
}
a{
	cursor: pointer;
}
b{
    color:inherit;
    font-weight: bold;
    font-size: inherit;
    line-height: inherit;
}
small{
    color:inherit;
    font-size: 10px;
    font-weight:inherit;
    line-height: inherit;
}
i{
    color:inherit;
	font-style: italic;
    font-size: inherit;
    line-height: inherit;
}
u{
	color:inherit;
    text-decoration: underline;
    font-size: inherit;
    line-height: inherit;
}
del{
	display: inline;
	color:#f00;
	font-size: inherit;
	line-height: inherit;
}
dfn{
	color:#666;
}
/*
.zeilenbruch{
	display: inline-block;
	width:2px;
	height: 16px;
	margin-right: 5px;
	vertical-align: baseline;
	background: #38444f;
}
*/
.btn{
    display: inline-block;
    position: relative;
    padding:10px 20px;
    transition: all 0.2s;
}
.btn.reset{
    opacity: 0.5;
}
.btn.over{
    opacity: 0.5;
}
.btn.reset.over{
    opacity: 1;
}
#sync_meldung{
    display:block;
    margin-bottom: 10px;
    padding:5px;
    color:inherit;
}
/* CONTENT ####################################################################*/
#content {
    min-height:100%;
    position:relative;
    transition: opacity 0.2s;
    z-index:2;
}
/* NAV ####################################################################*/
.nav{
    position: fixed;
    top:0px;
    left:0px;
    margin: auto;
    text-align: center;
    width: 100%;
    z-index: 20;
    box-shadow:0px 0px 1px rgba(0,0,0,0);
    background: transparent;
    -webkit-transform: translate3d(0,0,0);
    transition: all 0.4s;
}
.nav .header,.nav .btns{
    display:block;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-transform: translate3d(0,0,0);

}
.nav .logo{
    display: block;
    position: relative;
    padding:20px;
}
.nav .logo img{
    margin:auto;
    transition: all 0.2s;
}
.nav .user{
    position: absolute;
    right:20px;
}
.nav .user .name{
    display: inline-block;
    vertical-align: middle;
    font-size:12px;
}
.nav .user .bild{
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 20px;
}
.nav .user .bild.over{
    opacity:0.75;
}
.nav .user .bild img{
    width: 100% !important;
    height: 100% !important;
}
.nav .user .msg{
    position: relative;
    display:inline-block;
    vertical-align: middle;
    margin-left: 10px;
    opacity:0.5;
}
.nav .user .msg.over{
    opacity: 1;
}
.nav .btns{
    white-space: nowrap;
    overflow: scroll;
    -webkit-overflow-scrolling:touch;
    transition: opacity 0.2s;
}
.nav .btns .mitte{
    text-align: center;
}
.nav .btns .bt{
    position: relative;
    display: inline-block;
    padding:10px 0px;
    margin:0px 20px;
}
.nav .btns .bt div{
    background: #f00;
    position: absolute;
    bottom:0px;
    transition: all 0.2s;
    height: 0px;
    width: 100%;
}
.nav .btns .bt.aktiv div{
    height: 4px;
}
.nav .btns .bt.over div{
    height: 6px;
}
#nav_abstand{
    position:relative;
    display: block;
}
.admin_flag{
    position: fixed;
    top:-3px;
    overflow: hidden;
    pointer-events: none;
    line-height:14px;
    background: #f00;
    font-size: 9px;
    padding:2px 10px;
    color:#fff;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    border-radius: 3px;
    z-index:41;
}

/* INHALT ####################################################################*/
.inhalt{
    display:block;
    position:relative;
	width:100%;
    min-height: 20px;
    margin:0px auto;
    transition: all 0.2s;
}
.inhalt .logo_default{
    display:block;
    margin:auto;
    margin-bottom:20px;
    height: 60px;
}
.inhalt .maxheight{
    display: block;
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
}
.inhalt .maxheight .version{
    position: absolute;
    display: block;
    bottom:5px;
    left:0px;
    width:100%;
    text-align: center;
    font-size:9px;
    opacity: 0.5;
}
.inhalt .box{
    width:100%;
    text-align: center;
}
.bt,.form_input,.bt_tag{
    display: inline-block;
    position: relative;
    padding:10px 20px;
    margin:5px;
    min-height: 12px;
    line-height: 12px;
    background: #f00;
    color:#333;
    vertical-align: top;
}
.bt,.bt_tag{
    line-height: 14px;
}
.inhalt .bt.miticon .pics{
    display: inline-block;
    position: relative !important;
    margin-left: -10px;
    margin-right: 5px;
}
.inhalt .bt .bticon{
    margin-left: -10px;
    margin-right: 5px;
}
.inhalt .bt span{
    padding-left:10px;
    color:inherit;
    font-size: 10px;
    line-height: 12px;
    vertical-align: baseline;
}
.inhalt .bt span.menge{
    padding-left:0px;
    color:inherit;
    font-size: inherit;
}
.inhalt .bt .bt_close{
    position: absolute;
    left:0px;
    top:0px;
    width:30%;
    height: 100%;
}
.inhalt .bt .bt_menge{
    position: absolute;
    right:0px;
    top:0px;
    width:60%;
    height: 100%;
}
.report .text{
    display: block;
    text-align: center;
    margin:0px 20px;
}
.report .abstand{
    display: block;
}
.report .linie{
    display: block;
    height: 1px;
    width:calc(100% - 40px);
    margin:10px 20px;
    background: #f00;
}
.report .feld{
    display: block;
    position: relative;
    margin:0px 15px;
    border-left:0px solid #f00;
    border-right:0px solid #f00;
    text-align: center;
}
.report .feld_abstand{
    display: block;
    height:20px;
}
.report .feld .txt{
    display: block;
    text-align: inherit;
    margin:0px 5px;
}
.report .feld .pflicht{
    position: absolute;
    display: none;
    left:-7px;
    top:0px;
    width:5px;
    height: 100%;
    background: #f00;
    border-radius: 5px;
}
.report .feld .txt .produktanzahl{
    display: inline-block;
    width:40px;
    text-align: right;
    margin-right:10px;
    color:inherit;
    font-size: inherit;
    line-height: inherit;
}
.report .feld .txt .produktanzahl small{
    opacity:0.5;
}

.report .gruppe{
    display: none;
    position: relative;
    /*
    overflow:hidden;
    width:100%;
    height:0px;
    transition: all 0.1s;
    */
    padding:0px;
    margin:0px;
}
.report .gruppe .mask{
    display: block;
    position: relative;
    padding:0px;
    margin:0px;
}
.report .warenkorb{
    display: block;
}
.report .produkte{
    display: block;
    white-space: nowrap;
    overflow: scroll;
    -webkit-overflow-scrolling:touch;
}
.report .produkte .produktgruppe{
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    width:auto;
    margin-top:10px;
    margin-right:10px;
    padding-right:10px;
}
.report .produkte.buttons{
    white-space: normal;
}

.report .symbol{
    position: relative;
    display:inline-block;
    border-radius: 100px;
    margin-right:5px;
    width:12px;
    height:12px;
    line-height: 12px;
    text-align: center;
    margin-left:-5px;
    font-size: inherit;
    vertical-align: baseline;
}
.report .feld .bt .pics{
    position: absolute;
}
.report .erg{
    display:none;
    white-space: normal;
    margin-top:10px;
}

.report .suche{
    position: relative;
    margin-top:5px;
    transition: all 0.2s;
    padding:0px;
    overflow: hidden;
}
.report .suche .treffer{
    display: none;
    position: absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height: 5px;
    z-index: 8;
}
.report .suche .bt_lupe{
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    z-index:9;
}
.report .suche .bt_lupe.over{
    opacity:0.5 !important;
}
.report .suche .bt_clear{
    position: absolute;
    right:0px;
    top:0px;
    width: 100%;
    height: 100%;
    opacity:0;
    z-index:9;
}
.report .suche .bt_clear.over{
    opacity:1 !important;
}
.report .suche input{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    vertical-align: top;
    border-radius:0;
    border:0;
    background: none;
    opacity: 0;
    z-index:10;
}
.report .suche .sichtbar{
    opacity: 1;
    z-index:8;
}
.report .suche2{
    position: relative;
    margin-top:5px;
    min-width:240px;
}
.report .suche2 .bt_lupe{
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    z-index:9;
}
.report .suche2 input{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    vertical-align: top;
    border-radius:0;
    border:0;
    background: none;
    z-index:10;
}
.report .suche2_erg{
    display: block;
    position: relative;
}
.report .suche2_select{
    display: block;
    position: relative;
}

.report .feld .eingabe,.form_input{
    position: relative;
    display: block;
    padding:10px 10px;
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    border-radius:0;
    border:0;
    background: none;
    resize:none;
    width:200px;
}
.report .feld .signatur{
    padding:0px;
}
.report .feld .signatur .pics{
    opacity: 0.25;
    transform: scale(1.3);
    margin-left:-65px;
    margin-top:-25px;
}
.report .feld .signatur .bild{
    display: none;
    position: absolute;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
}
.report .rechtliches{
    /*column-count: 3;
    column-gap: 40px;
    */
    max-width: 600px;
    vertical-align: top;
    text-align: justify;
    text-align: left;
}
.report .feld .checkbox{
    display: block;
    position: relative;
    vertical-align: middle;
}
.report .feld .checkbox .bt{
    position: relative;
    display: inline-block;
    height:30px;
    width:30px;
    padding: 0px;
    vertical-align: middle;
}
.report .feld .checkbox .bt .pics{
    opacity:0;
}
.report .feld .checkbox span{
    color:inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    margin-left: 5px;
    vertical-align: middle;
}
/* Upload ######################################################################*/
.foto_upload .bt{
    display: inline-block;
    position: relative;
    padding:0px;
    margin:5px;
    height: 12px;
    line-height: 12px;
    background: #f00;
    color:#333;
    vertical-align: top;
}
.foto_upload .bt .pics{
    opacity: 0.5;
    position:absolute;
}
.foto_upload .fotos{
    display: inline-block;
}
.foto_upload .fotos.tags{
    display: block;
}
.foto_upload .fotos .foto{
    display: inline-block;
}
.foto_upload .fotos.tags .foto{
    display: block;
}
.foto_upload .fotos .bt{
    overflow: hidden;
    height:50px;
    width:50px;
    padding:0px;
}
.foto_upload .fotos img{
    position: absolute;
    width:auto;
    height:auto;
    max-width: 100%;
    max-height: 100%;
}
.foto_upload .fotos.tags .bt,.foto_upload .fotos.tags .bt_tag{
    vertical-align: middle;
}
.foto_upload .tags{
    display:none;
}
.foto_upload .neu{
    display: inline-block;
    position: relative;
}
.foto_upload .neu input{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	opacity:0;
	cursor:pointer;
	z-index:1;
}
/* Fenster ######################################################################*/
.fenster{
    position:fixed;
    display: none;
    width:100%;
    z-index:100;
    text-align: center;
    opacity:0;
    transition: opacity 0.2s;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}
.fenster .inhalt{
    position: relative;
    display:block;
    width:100%;
    max-height: 100%;
    padding:20px 0px;
    max-width: 600px;
}
.fenster .abstand{
    display: block;
    height: 50px;
}
.fenster .infos{
    display: block;
    padding:20px;
    margin:5px;
    margin-bottom:30px;
}
.fenster .infos hr{
    display: block;
    height: 1px;
    margin:20px 0px;
    margin-left:-20px;
    margin-right: -20px;
}
.fenster .linie{
    display: block;
    height: 1px;
    width:calc(100% - 10px);
    margin:20px 5px;
    background: #f00;
}
.fenster .text{
    margin:5px;
}
.fenster .version{
    float:right;
    display:inline-block;
    margin-top:80px;
    margin-right: 5px;
    font-size:9px;
    opacity: 0.5;
}
/* Signature #################################################################*/
.sign{
    position: fixed;
    display: none;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: #333;
    z-index:99;
}
.sign .box{
    width:100%;
    max-width:600px;
}
.sign .box .reset,.sign .box .save,.sign .box .close{
    position: absolute;
    height:50px;
    width:50px;
    opacity: 0.3;
}
.sign .box .reset.over,.sign .box .save.over,.sign .box .close.over{
    opacity: 1;
}
.sign .box .reset{
    left:0px;
    top:0px;
}
.sign .box .close{
    right:0px;
    top:0px;
}
.sign .box .save{
    left:0px;
    bottom:0px;
}
.sign .box .zone{
    display: block;
    position: relative;
    background: #fff;
    border-radius:10px;
    box-shadow: 0px 0px 20px #000;
    margin-top: 50px;
    margin-bottom:50px;
    width: 600px;
    height: 300px;
}
.sign .box .zone .dummy{
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:url(images/signature.png?v1) no-repeat center center;
    opacity: 0;
}
.sign .box .zone .linie{
    position: absolute;
    left:5%;
    bottom:30%;
    height: 1px;
    width: 90%;
    background: #333;
    opacity: 0.5;
}
.sign .box .zone .drag,.sign .box .zone canvas{
    position: absolute;
    left:0px;
    top:0px;
    height:100%;
    width: 100%;
}
/* BIGPIC ####################################################################*/
.bigpic{
    display:none;
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index:99;
    background: #000;
}
.bigpic .bild{
    position: absolute;
	height:calc(100% - 60px);
	width:100%;
	top:30px;
	margin: auto;
	z-index:8;
}
.bigpic .bild img{
    max-width:calc(100% - 60px);
    max-height:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
    transition: all 0.2s;
    cursor: pointer;
}
.bigpic .close{
	position: absolute;
	top:0px;
	right:0px;
	width:100px;
	height:100px;
    z-index:10;
	cursor: pointer;
    color:#fff;
}
.bigpic .close .icon{
    position: absolute;
    top:9px;
    right:10px;
    font-size:20px;
}
.bigpic .close.over .icon{
    opacity: 0.5;
}
.bigpic .del{
	position: absolute;
	top:0px;
	left:0px;
	z-index:10;
	cursor: pointer;
    color:#f00;
    height: 40px;
    line-height: 40px;
    padding:0px 10px;
    opacity: 0.5;
}
.bigpic .del.over{
    opacity: 1;
}
/* dCHART ####################################################################*/
.dCHART{
    display: inline-block;
    position: relative;
    text-align: center;
    color:inherit;
    margin-top:5px;
    padding-top:5px;
}
.dCHART .titel{
    display: block;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color:inherit;
}
.dCHART .canvas{
    display: block;
    position: relative;
    color:inherit;
}
.dCHART .canvas div{
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color:inherit;
    /*text-shadow: 1px 0px 0px #fff, 0px 1px 0px #fff, -1px 0px 0px #fff, 0px -1px 0px #fff;*/
}
.dCHART .canvas div.unten{
    top:auto;
    bottom:5px;
}
.dCHART canvas{
    display: block;
}
.dCHART .legende{
    display: block;
    text-align: center;
    color:inherit;
    height: 20px;
    line-height: 20px;
}
.dCHART .werte{
    display: block;
    text-align: center;
    color:inherit;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}
.dCHART .werte .wert{
    position: relative;
    display: inline-block;
    margin:0px 5px;
    color:inherit;
    font-size:inherit;
    line-height: inherit;
}
.dCHART .werte .wert .farbe{
    position: absolute;
    bottom:2px;
    height:2px;
    width:100%;
}
/* WIN #######################################################################*/
.win{
    display:none;
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index:110;
}
.win input{
    width:200px;
}
.win .version{
    position: absolute;
    display: block;
    bottom:5px;
    left:0px;
    width:100%;
    text-align: center;
    font-size:9px;
    opacity: 0.5;
}
.win .box{
    width:calc(100% - 40px);
    text-align:center;
}
.win .bg{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-transform: translate3d(0,0,0);
}
/* FOOTER ####################################################################*/
#footer_abstand{
	position:relative;
    display: block;
}
.footer{
    display: none;
	position:fixed;
	bottom:0px;
	width:100%;
    transition: opacity 0.2s;
}
.footer .mitte{
    text-align: center;
}
/* LOADING & SPERRE #######################################################*/
#loading {
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0);
	z-index:100;
}
@keyframes rotation_ani {
  0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}
}
.load_icon{
	position:fixed;
	bottom:10px;
	left:50%;
	margin-left:-20px;
	height:40px;
	width:40px;
	animation: rotation_ani 0.7s linear infinite;
}
.load_icon .pics.loading {
	position:absolute;
	left:0px;
	top:0px;
	width:40px;
	height:40px;
}
#debug{
    position: fixed;
    z-index:500;
    left:0px;
    top:0px;
    background: #000;
    color:#fff;
    padding:2px;
    font-size:9px;
    display: none;
    max-width:200px;
}
#sperre{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height: 100%;
	z-index:200;
}
#hinweis {
	display:none;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	cursor: pointer;
	background:rgba(0,0,0,0.9);
	backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-transform: translate3d(0,0,0);
    transition: opacity 0.2s;
    z-index:199;
}
.hinweis{
	position:absolute;
	min-width:240px;
	max-width:560px;
	color:#f00;
	text-align:center;
	margin-top:-10px;
}
.hinweis.ok{
	color:#0f0;
}
.hinweis.update{
	color:#fff;

}
.hinweis .load_icon{
	position: relative;
	margin-top: 10px;
	bottom:auto;
}
.hinweis .refresh{
	margin-top:10px;
}
#saveicon{
	position:fixed;
	left:0px;
	top:0px;
	z-index:102;
}
#saveicon .saveicon{
	position:absolute;
	width:80px;
	height:80px;
	opacity:0;
	opacity: 1;
	animation: saveicon_ani 0.6s;
}
#saveicon .saveicon.save_ok{
	background: #3ad041;
	border-radius:100px;
}
#saveicon .saveicon.save_error{
	background: #f60b0b;
	border-radius:100px;
}
@keyframes saveicon_ani {
  0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;}
}
/* FORM #######################################################*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
	color: rgba(0,0,0,0.5);
}
input::-moz-placeholder,textarea::-moz-placeholder{
	color: rgba(0,0,0,0.5);
}
input[type=range] {
	-webkit-appearance: none;
	border:0;
	margin:15px 5px;
	width: 300px;
	background:none !important;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #aaa;
}
input[type=range]::-webkit-slider-thumb {
	border: 0px;
	height: 30px;
	width: 30px;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -9px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #c1a755;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #aaa;
}
input[type=range]::-moz-range-thumb {
    border: 0px;
	height: 30px;
	width: 30px;
	border-radius: 30px;
	background: #fff;
	cursor: pointer;
	margin-top: -9px;
}
/* PICS #######################################################*/
.pics{
	position:relative;
	display:inline-block;
	vertical-align:top;
	background:url(images/pics.png) no-repeat 0 0;
	background-size: 400px 400px;
	width:40px;
	height:40px;
}
.pics.kreis{
	border:1px solid #fff;
	border-radius:50px;
}
.pics.nav_menu		 		{background-position:0px 0px;}
.pics.icon_loading			{background-position:-40px 0px;}
.pics.nav_user		 		{background-position:-80px 0px;}
.pics.nav_cloud		 		{background-position:-120px 0px;}
.pics.nav_cloud_black		{background-position:-120px -40px;}
.pics.nav_x			 		{background-position:-160px 0px;}
.pics.nav_location	 		{background-position:-200px 0px;}
.pics.icon_refresh		 	{background-position:-240px 0px;}
.pics.icon_close		 	{background-position:-280px 0px;}
.pics.hinweis_klein	 		{background-position:-210px -10px;width:20px;height:20px;}
.pics.icon_download		 	{background-position:-0px -40px;}
.pics.icon_ok	      	 	{background-position:-80px -40px;}
.pics.sign_reset		 	{background-position:-0px -80px;}
.pics.sign_close		 	{background-position:-40px -80px;}
.pics.sign_save		       	{background-position:-80px -80px;}

.pics.camera		       	{background-position:-160px -40px;}
.pics.b_camera		       	{background-position:-160px -80px;}
.pics.chaticon	           	{background-position:-200px -40px;}
.pics.b_chaticon          	{background-position:-200px -80px;}

.pics.ok_big        		{background-position:0px -140px;width:20px;height:20px;}

.pics.cb1_1				{background-position:0px -160px;width:14px;height:14px;}
.pics.cb1_0				{background-position:-14px -160px;width:14px;height:14px;}
.pics.cb2_1				{background-position:-28px -160px;width:14px;height:14px;}
.pics.cb2_0				{background-position:-42px -160px;width:14px;height:14px;}
.pics.close				{background-position:-56px -160px;width:14px;height:14px;}
.pics.sync				{background-position:-70px -160px;width:14px;height:14px;}
.pics.sync_black		{background-position:-84px -160px;width:14px;height:14px;}
.pics.cb3_1				{background-position:-98px -160px;width:14px;height:14px;}
.pics.cb3_0				{background-position:-112px -160px;width:14px;height:14px;}

.pics.sign_black		{background-position:-150px -340px;width:125px;height:60px;}
.pics.sign_white		{background-position:-275px -340px;width:125px;height:60px;}

.pics.save_ok			{background-position:0px -240px;width:80px;height:80px;}
.pics.save_error		{background-position:0px -320px;width:80px;height:80px;}

.pics.i			 		{width:14px;height:14px;}
.pics.i.pfeil_wo		{background-position:0px -175px;}
.pics.i.pfeil_nwso		{background-position:0px -175px;transform: rotate(45deg);}
.pics.i.pfeil_o			{background-position:-14px -175px;transform: rotate(0deg);}
.pics.i.pfeil_no		{background-position:-14px -175px;transform: rotate(-45deg);}
.pics.i.pfeil_n			{background-position:-14px -175px;transform: rotate(-90deg);}
.pics.i.download  		{background-position:-28px -175px;}
.pics.i.download_s  	{background-position:-28px -175px;transform: rotate(90deg);}
.pics.i.frage  		    {background-position:-42px -175px;}
.pics.i.ausruf  		{background-position:-56px -175px;}
.pics.i.sync  		    {background-position:-70px -175px;}
.pics.i.del_x  		    {background-position:-84px -175px;}
.pics.i.minus  		    {background-position:-98px -175px;}
.pics.i.plus  		    {background-position:-112px -175px;}
.pics.i.ok  		    {background-position:-126px -175px;}
.pics.i.edit  		    {background-position:-140px -175px;}
.pics.i.glocke			{background-position:-154px -175px;}
.pics.i.verlauf  		{background-position:-168px -175px;}
.pics.i.lupe	  		{background-position:-182px -175px;}

.pics.i.b_pfeil_wo		{background-position:0px -190px;}
.pics.i.b_pfeil_nwso	{background-position:0px -190px;transform: rotate(45deg);}
.pics.i.b_pfeil_o		{background-position:-14px -190px;transform: rotate(0deg);}
.pics.i.b_pfeil_no		{background-position:-14px -190px;transform: rotate(-45deg);}
.pics.i.b_pfeil_n		{background-position:-14px -190px;transform: rotate(-90deg);}
.pics.i.b_download  	{background-position:-28px -190px;}
.pics.i.b_download_s  	{background-position:-28px -190px;transform: rotate(90deg);}
.pics.i.b_frage  		{background-position:-42px -190px;}
.pics.i.b_ausruf  		{background-position:-56px -190px;}
.pics.i.b_sync  		{background-position:-70px -190px;}
.pics.i.b_del_x  		{background-position:-84px -190px;}
.pics.i.b_minus  		{background-position:-98px -190px;}
.pics.i.b_plus  		{background-position:-112px -190px;}
.pics.i.b_ok  		    {background-position:-126px -190px;}
.pics.i.b_edit  		{background-position:-140px -190px;}
.pics.i.b_glocke		{background-position:-154px -190px;}
.pics.i.b_verlauf  		{background-position:-168px -190px;}
.pics.i.b_lupe	  		{background-position:-182px -190px;}

@keyframes ani_rotate {
  0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}
}
.ani_rotate{
	animation: ani_rotate 1s linear infinite;
}
@keyframes ani_puls {
  0% {opacity:1;} 80% {opacity:0.5;} 100% {opacity:1;}
}
.ani_puls{
	animation: ani_puls 1s ease-out infinite;
}
@keyframes ani_fadeout {
  0% {opacity:0.3;} 100% {opacity:0;}
}
.ani_fadeout{
	animation: ani_fadeout 5s ease-out;
}


@media only screen and (max-width:700px){
    .report .rechtliches{
        /*column-count: 2;*/
    }
}
@media only screen and (max-width:500px){
    .report .rechtliches{
        /*column-count: 1;*/
    }
}
@media only screen and (max-width:400px){
    .nav .user .name{
        display: none;
    }
}