/* html Elemente */
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    min-height: 100%;
}

header {
    min-height: 90px;
}

body {
    font-size: 13px;
    line-height: 15.6px;
    -webkit-font-smoothing: antialiased;
    color: #1a3b5f;
    background: url(../img/bg.jpg) no-repeat fixed;
    background-size: 100% 100%;
    margin: 0;
}

footer{
	width: calc(100% - 10px);
	max-width: 1090px;
	margin-right: auto;
	margin-left: auto;
	font-size: 13px;
    line-height: 15.6px;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    padding: 5px;
    margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
}

h1{
	font-size: 32px;
	line-height: 35px;
	margin: 10px 0px 10px 0px;
}

h2{
	line-height: 26px;
        font-size: 23px;
}

h3{
	
}
/* allgemine Elemente */

.headline-center{
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
}

.center{
	text-align: center;
}

.bold{
	font-weight: bold;
}

.underline{
	text-decoration: underline;
}

.big18{
	font-size: 18px;
}

.big22{
	font-size: 22px;
}

.trenner{
	background-color: #fff;
	height: 6px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: -15px;
	margin-right: -15px;
	box-shadow: inset 0 3px 3px #bfbfbf;
}

.headline{
	font-weight: bold;
	text-decoration: underline;
}

.fehler-icon{
	width: 40px;
	height: 40px;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	display: block;
	margin-left: 10px;
}

.fehler-text{
	width: calc(100% - 85px);
	max-width: 1015px;
	margin: 5px;
	float: left;
}

.fehler-ausblenden{
	width: 25px;
	height: 25px;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 10px;
	cursor: pointer;
}

.inhalt-container{
	width: 100%;
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
}

.inhalt{
	width: calc(100% - 30px);
	max-width: 1070px;
	background-color: #fff;
	font-size: 15px;
    line-height: 17px;
    -webkit-font-smoothing: antialiased;
    color: #1a3b5f;
    padding: 15px;
}

.inhalt-shadow{
	box-shadow: inset 0 3px 3px #bfbfbf;
}

.clear{
	clear: both;
}

.link{
	cursor: pointer;
}

.bar-front{
	width:calc(50% - 32.5px);
	height:17px;
	float:left;
	background:#1c4069;
	color:#fff;
	border-radius: 10px 0 0 10px;
	padding: 10px;
	padding-left: 15px;
	margin-bottom:15px;
}

.bar-mitte-aktiv{
	width:calc(50% - 32.5px);
	height:17px;
	float:left;
	background:#1c4069;
	color:#fff;
	padding: 10px;
	padding-left: 15px;
	margin-bottom:15px;
}

.bar-mitte-passiv{
	width:calc(50% - 32.5px);
	height:17px;
	float:left;
	background:#cbcbcb;
	color:#fff;
	padding: 10px;
	padding-left: 15px;
	margin-bottom:15px;
}

.bar-back-aktiv{
	width:calc(50% - 32.5px);
	height:17px;
	float:left;
	background:#1c4069;
	color:#fff;
	border-radius: 0 10px 10px 0;
	padding: 10px;
	padding-left: 15px;
	margin-bottom:15px;
}

.bar-back-passiv{
	width:calc(50% - 32.5px);
	height:17px;
	float:left;
	background:#cbcbcb;
	color:#fff;
	border-radius: 0 10px 10px 0;
	padding: 10px;
	padding-left: 15px;
	margin-bottom:15px;
}

.bar-trenner-aktiv{
	width:15px;
	height:37px;
	background: url(../img/bar-blau.png) 0 0 no-repeat;
	float:left;
}

.bar-trenner-mittel{
	width:15px;
	height:37px;
	background: url(../img/bar-blau.png) 0 0 no-repeat;
	float:left;
	background-position: -15px 0;
}

.bar-trenner-passiv{
	width:15px;
	height:37px;
	background: url(../img/bar-blau.png) 0 0 no-repeat;
	float:left;
	background-position: -30px 0;
}

.meldung_bg{
	width: 100%; 
	height: 100%; 
	background: rgba(0, 0, 0, 0.5); 
	position: absolute; 
	z-index: 99;
}

.meldung{
	height: auto; 
	width: 350px;
	position: absolute; 
	transform: translate(-50%, -50%); 
	top: 50%; 
	left: 50%;
	font-family: Verdana,Arial,sans-serif;
	font-size: 14px;
}

.meldung_titel{
	background: #1c4069; 
	color: #fff; 
	border-radius: 10px 10px 0px 0px; 
	height: 25px; 
	padding-top: 10px; 
	padding-left: 10px;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis;
}

.meldung_inhalt{
	padding: 5px; 
	background: #ffffff; 
	width: calc(100% - 14px);
	border: 2px solid #1c4069;
	border-top: none;
   	border-bottom: none;
}

.meldung_ende{
	background:#1c4069; 
	color:#fff; 
	border-radius: 0px 0px 10px 10px; 
	height: 10px;
}

.meldung_button_1v1{
	background:#1c4069; 
	color:#fff; 
	min-height: 20px;
	padding: 5px;
	width: 50%;
	margin-left: 50%;
	transform: translateX(-50%); 
	margin-top: 20px;
	cursor: pointer;
	text-align: center;
}

.meldung_button_1v2{
	background:#1c4069; 
	color:#fff; 
	min-height: 20px;
	padding: 5px;
	width: calc(50% - 15px);
	margin-right: 5px;
	float: left;
	margin-top: 20px;
	cursor: pointer;
	text-align: center;
}

.meldung_button_2v2{
	background:#1c4069; 
	color:#fff; 
	min-height: 20px;
	padding: 5px;
	width: calc(50% - 15px);
	margin-left: 5px;
	float: left;
	margin-top: 20px;
	cursor: pointer;
	text-align: center;
}

.meldung_button_1v3{
	background:#1c4069; 
	color:#fff; 
	min-height: 20px;
	padding: 5px;
	width: calc(33.33% - 16.67px);
	margin-right: 5px;
	float: left;
	margin-top: 20px;
	cursor: pointer;
	text-align: center;
}

.meldung_button_2v3{
	background:#1c4069; 
	color:#fff; 
	min-height: 20px;
	padding: 5px;
	width: calc(33.33% - 16.67px);
	margin-right: 5px;
	margin-left: 5px;
	float: left;
	margin-top: 20px;
	cursor: pointer;
	text-align: center;
}

.meldung_button_3v3{
	background:#1c4069; 
	color:#fff; 
	min-height: 20px;
	padding: 5px;
	width: calc(33.33% - 16.67px);
	margin-left: 5px;
	float: left;
	margin-top: 20px;
	cursor: pointer;
	text-align: center;
}

.meldung_red:HOVER{
	background-color: #e60000;
}

.meldung_gray:HOVER{
	background-color: gray;
}

.meldung_green:HOVER{
	background-color: #287828;
}

.nolink{
	text-decoration: none;
    color: inherit;
}

/* Desktop Elemente */
@media only screen and (min-width: 768px) {
	.header-container {
	    margin-right: auto;
	    margin-left: auto;
	}
	
	footer{
		border-radius: 10px;
	}
		
	.header {
	    height: 90px;
	    max-width: 1100px;
	    margin: 0 auto;
	    z-index: 20;
	    background: #fff;
	    border-radius: 0 0 5px 5px;
	    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	}
	
	.header-logo {
    	float: left;
    	height: 100%;
    	width: 160px;
	}
	
	.header-logo-img {
    	height: 80px;;
    	width: 120px;
    	margin-top: 5px;
    	margin-bottom: 5px;
    	margin-left: 20px;
	}
	
	.header-banner {
		height: 38px;
		max-width: calc(100% - 20px);
		margin-top: 9.5px;
		margin-bottom: 9.5px;
		display: block;
    	margin-left: auto;
    	margin-right: auto;
    	padding-left: 10px;
		padding-right: 10px;
		clear: both;
	}
	
	.header-start {
    	float: left;
		height: 100%;
		width: 940px;
	}
	
	.header-menu{
		height: 32px;
		min-width: 200px;
		float: right;
		background-image: linear-gradient(to bottom, rgba(228, 227, 226, 0.25) 0%, rgba(228, 227, 226, 0.75) 100%);
		border-top: 1px solid grey;
		border-radius: 10px 0 10px 0;
		overflow: hidden;
	}
	
	.header-menu-button {
    	height: 29px;
		width: auto;
		text-align: center;
		color: #373636;
		cursor: pointer;
		float: left;
		border-left: 1px solid grey;
		padding: 3px 15px 0px 15px;
		font-size: 17px;
		line-height: 23px;
		letter-spacing: 1px;
		font-family: "Segoe UI", "Tahoma", "Helvetica-Light", "Droid Sans Pro", sans-serif;
	}
	
	.header-menu-button:hover {
    	background-image: linear-gradient(to bottom, white 0%, #e4e3e2 100%);
	}
	
	.menu-aktiv {
    	background: #E4E3E2;
	}
	
	.inhalt-start{
		margin-top: 15px;
		border-radius: 10px 10px 0 0;
	}
	
	.inhalt-ende{
		margin-bottom: 15px;
		border-radius: 0 0 10px 10px;
	}
	
	.inhalt-only{
		margin-bottom: 15px;
		margin-top: 15px;
		border-radius: 10px;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	}
	
	.bild-r{
		float: right;
		margin-left: 10px;
		margin-bottom:5px;
		max-width: 200px;
		height: auto;
		border-radius:10px;
	}
	
	.bild-l{
		float: left;
		margin-right: 10px;
		margin-bottom:5px;
		max-width: 200px;
		height: auto;
		border-radius:10px;
	}
        
        .bild-c{
		margin-right: auto;
		margin-left: auto;
		display: block;
		margin-bottom:5px;
		max-width: auto;
		max-height: auto;
		border-radius:10px;
	}
	
	.bild-xl{
		max-width: 400px;
	}
	
	.fehler{
		width: 100%;
		max-width: 1100px;
		border-radius: 10px;
		margin-top: 10px;
		background: #fff;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.impressum-bild {
		width: 150px;
		height: 150px;
		position: relative;
		float: left;
		margin-right: 15px;
		margin-bottom: 5px;
		border-radius: 75px;
	}
	
	.header-menu-mobile {
    	display: none;
	}
	
	.header-banner-mobile{
		display: none;
	}
	
	.header-menu-button-mobile{
		display: none;
	}
	
	.header-logo-mobile {
		display: none;
	}
	
	.header-menu-dropdown-mobile {
		display: none;
	}
	
	.kontakt-text{
		width: 300px;
		float: left;
	}
	
	.kontakt-select{
		width: 300px;
		height: 30px;
		float: left;
	}
	
	.kontakt-input{
		width: 286px;
		height: 24px;
		float: left;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.kontakt-nachricht{
		width: 294px;
		max-width: calc(100% - 270px);
		max-height: 200px;
		height: 100px;
		float: left;
	}
	
	.g-recaptcha{
		float: left;
	}
	
	.shop-anwendung-container{
		display: block;
	}
	.shop-anwendung-container-mobile{
		display: none;
	}
	
	.wk-anzahl{
		float: left;
		width: 50px;
		height: 20px;
		padding-right: 10px;
		border-bottom: 1px solid black;
	}
	.wk-produkt{
		float: left;
		width: calc(100% - 340px);
		height: 20px;
		padding-right: 10px;
		border-bottom: 1px solid black;
	}
	.wk-preis{
		float: left;
		width: 100px;
		height: 20px;
		padding-right: 10px;
		text-align:right;
		border-bottom: 1px solid black;
	}
	.wk-preis-g{
		float: left;
		width: 100px;
		height: 20px;
		text-align:right;
		border-bottom: 1px solid black;
	}
	.wk-text{
		float: left;
		width: calc(100% - 110px);
		height: 20px;
		padding-right: 10px;
		border-bottom: 1px solid black;
	}
}

@media only screen and (max-width: 1100px) {
	.fehler, .inhalt-start, .inhalt-ende, .inhalt-only, .header{
		border-radius: 0px;
	}
	
	.header-logo{
		display: none;
	}
	
	.header-start{
		width: 100%;
	}
	
	.header-banner{
		margin-bottom: 12.5px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: calc(100% - 20px);
		padding-left: 10px;
		padding-right: 10px;
	}
	
	footer{
		border-radius: 0px;
		margin-bottom: 0px;
	}
}

/* Mobile Elemente */
@media only screen and (max-width: 768px) {
	
	footer{
		margin-bottom: 0px;
	}
	 
	.header-banner{
		display: none;
	}
	
	.header-logo-mobile {
		height: 40px;
		padding: 10px;
		width: calc(100% - 20px);
		background: #fff;
	}
	
	.header-banner-mobile{
		height: auto;
		max-height: 40px;
		width: auto;
		margin-right: auto;
	    margin-left: auto;
	    display: block;
		max-width: 100%;
	}
	
	.header-menu-mobile {
    	height: 30px;
    	width: 100%;
    	max-width: calc(100% - 40px);
    	background: #1a3b5f;
    	float: left;
	}
	
	.header-menu-dropdown-mobile {
    	max-width: calc(100% - 20px);
    	padding: 10px;
    	background: #1a3b5f;
    	color: #fff;
    	position: absolute;
    	right: 0px;
    	top: 110px;
    	float: right;
    	border-radius: 5px 0 0 5px;
    	z-index: 20;
	}
	
	.dropdown-mobile{
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-right: 15px;
		font-size: 22px;
		cursor: pointer;
	}
	.dropdown-mobile-sub{
		padding-left: 45px;
	}
	
	.dropdown-mobile-ecke{ 
		font-size: 0px;
	    line-height: 0%;
	    width: 0px;
	    border-bottom: 20px solid #1a3b5f;
	    border-left: 15px solid transparent;
	    border-right: 15px solid transparent;
	    z-index: 20;
	    right: 8px;
	    position: absolute;
	    top: -20px;
	} 
	
	.header-menu-button-mobile {
    	height: 25px;
		width: 25px;
		padding: 2.5px;
		padding-right: 12.5px;
		background: #1a3b5f;
		cursor: pointer;
		float: left;
	}
	
	.header-menu-button-icon-mobile {
    	height: 3px;
    	margin: 2.5px;
    	border-radius: 1.5px;
		width: 100%;
		background: #fff;
		float: left;
	}
	
	.header-menu {
    	display: none;
	}
	
	.header-logo {
		display: none;
	}
	
	.inhalt-start{
		margin-top: 15px;
		border-radius: 0px 0px 0 0;
	}
	
	.inhalt-ende{
		margin-bottom: 15px;
		border-radius: 0 0 0px 0px;
	}
	
	.inhalt-only{
		margin-bottom: 15px;
		margin-top: 15px;
		border-radius: 0px;
	}
	
	.bild-r{
		margin-right: auto;
		margin-left: auto;
		display: block;
		margin-bottom:5px;
		max-width: 200px;
		max-height: auto;
		border-radius:10px;
	}
	
	.bild-l{
		margin-right: auto;
		margin-left: auto;
		display: block;
		margin-bottom:5px;
		max-width: 200px;
		max-height: auto;
		border-radius:10px;
	}
        
        .bild-c{
		margin-right: auto;
		margin-left: auto;
		display: block;
		margin-bottom:5px;
		max-width: auto;
		max-height: auto;
		border-radius:10px;
	}
	
	.bild-xl{
		max-width: 100%;
	}
	
	.fehler{
		width: 100%;
		max-width: 1100px;
		margin-top: 10px;
		background: #fff;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.impressum-bild {
		width: 150px;
		height: 150px;
		display: block;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 5px;
		border-radius: 75px;
	}
	
	.kontakt-text{
		width: 300px;
		display: block;
		margin-right: auto;
		margin-left: auto;
		
	}
	
	.kontakt-select{
		width: 300px;
		height: 30px;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	
	.kontakt-input{
		width: 286px;
		height: 24px;
		display: block;
		margin-right: auto;
		margin-left: auto;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.kontakt-nachricht{
		width: 294px;
		max-width: 294px;
		max-height: 100px;
		height: 100px;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	
	.g-recaptcha{
		width: 300px;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	
	.shop-anwendung-container{
		display: none;
	}
	.shop-anwendung-container-mobile{
		display: block;
	}
	.shop-bild{
		float: none !important;
		margin-left: calc(50% - 80px);
    	margin-right: calc(50% - 80px);
	}
	.shop-button{
		float: none !important;
		margin-top: 10px;;
	}
}

/* Anwendungs-Boxen */
.anwendung{
	float: left;
	background: #DEDEDE;
	border-radius: 5px;
	width: 336.66px;
	height: 150px;
	margin: 10px;
	overflow: hidden;
}

.anwendung-input{
	font-size: 16px;
	line-height: 16px;
	width: 175px;
	height: 25px;
	margin-top: 10px;
	padding: 0px;
}

.anwendung-container{
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.anwendung-img{
	float:left;
	width:150px;
	height:150px;
	border-radius:5px;
	margin-right:5px;
}

.verbrauch_box{
	width: 100%;
	height: 15px;
	position: relative;
	border-radius: 7.5px;
	border: 1px solid black;
	background-color: #D6D6D6;
	overflow: hidden;
	z-index: 1;
	float: left;
}

.verbrauch_anzeige{
	position: absolute;
	border-radius: 7.5px;
	height: 15px;
	z-index: 2;
	background-color: red;
}

.verbrauch_proz{
	 width: 100%;
	 position: absolute;
	 text-align: center;
	 z-index: 3;
	 font-size: 13px;
	 color: black;
}

.verbrauch_info{
	 position: relative;
	 width: 100%;
	 height: 15px;
	 font-size: 13px;
	 float: left;
	 margin-top: 10px;
	 text-align: center;
}
	
@media only screen and (min-width: 1107px) {
	.anwendung-container{
		width: 1070px;
	}
}

@media only screen and (max-width: 1106px) {
	.anwendung-container{
		width: 715px;
	}
}

@media only screen and (max-width: 750px) {
	.anwendung-container{
		max-width: 336.66px;
		width: 100%;
	}
	.anwendung{
		width: 100%;
		margin: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.anwendung-img{
		width: calc(100% - 186.66px);
		height: auto;
	}
}

.dialog_meldung {
	min-height: 50px;
	width: 300px;
	margin-top: -111px;
	margin-left: -161px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 9999;
	color:black;
	border-width: 1px;
 	border-style: solid;
 	border-color: black;
 	padding: 10px;
	background-color: #EEEEEE;
}

.dialog_button  {
	height: 20px;
	width: calc(50% - 32px);
	text-align: center;
	color: white;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-width: 1px;
 	border-style: solid;
 	border-color: black;
 	padding: 5px;
	background-color: #4C4E5A;
	float: left;
	cursor: pointer;
}

.dialog_button_voll  {
	height: 20px;
	width: calc(100% - 32px);
	text-align: center;
	color: white;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-width: 1px;
 	border-style: solid;
 	border-color: black;
 	padding: 5px;
	background-color: #4C4E5A;
	float: left;
	cursor: pointer;
}

.dialog_button_v  {
	min-height: 17px;
	width: calc(100% - 42px);
	text-align: center;
	font-size: 15px;
    line-height: 17px;
	color: white;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 10px;
	border: 1px solid black;
 	padding: 10px;
	background-color: #1a3b5f;
	float: left;
	cursor: pointer;
}

.input-submit  {
	min-height: 17px;
	width: calc(100% - 22px);
	text-align: center;
	font-weight: bold;
	font-size: 15px;
    line-height: 17px;
	color: white;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 10px;
	border: 1px solid black;
 	padding: 10px;
	background-color: #1a3b5f;
	float: left;
	cursor: pointer;
}

.dialog_button_input  {
	height: 32px;
	width: calc(50% - 20px);
	text-align: center;
	color: white;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-width: 1px;
 	border-style: solid;
 	border-color: black;
	background-color: #4C4E5A;
	float: left;
	cursor: pointer;
}

.shop-anwendung{
	padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: justify;
    width: calc(100% - 30px);
    min-height: 20px;
    background: #DEDEDE;
    border-radius: 5px;
    margin-bottom: 20px;
}

.shop-link{
	min-height: 110px;
    width: 160px;
    text-align: center;
    padding-right: 15px;
    padding-bottom: 10px;
    float: left;
}

.shop-bild{
	width: 160px;
    height: 160px;
    padding-bottom: 10px;
    position: relative;
    float: left;
}

.shop-button{
	min-height: 20px;
    min-width: 50px;
    text-align: center;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-radius: 5px;
    padding: 5px;
    background-color: #1a3b5f;
    float: left;
    cursor: pointer;
}



.aw_uebersicht_zeile {
	width: 100%;
	background: ;
	min-height: 20px;
	position: relative;
	text-align: center;
}

.aw_uebersicht_zelle {
	width: 15%;
	background: ;
	min-height: 20px;
	position: relative;
	text-align: center;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
}

.aw_uebersicht_zelle_1 {
	width: 25%;
	background: ;
	min-height: 20px;
	position: relative;
	text-align: left;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
}

.aw_uebersicht_bild {
	width: auto;
	max-width: 80px;
	height: auto;
	max-height: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}

.aw_uebersicht_bild_1 {
	width: auto;
	max-width: 20px;
	height: auto;
	max-height: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


.timer-box {
    color: #1B232F;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    border-radius: 3px;
    overflow: hidden;
    height: 25px;
    width: 77px;
    float: right;
    margin-top: 4px;
    margin-right: 5px;
}
.timer{
	overflow: hidden;
	float: left;
	width: 50px;
	background-image: linear-gradient(to top,#fff 67%,#d1d1d1 100%);
 	border: 1px solid #b4bed5;
}
.timer-bg{
	background: #b0dbe4;
	width: 0px;
	height: 23px;
}
.countdown{
	width: 50px;
	height: 19.5px;
	padding-top: 3.5px;
	text-align: center;
}
.reset{
	width: 14px;
	height: 13px;
	padding: 5px;
	float: left;
	border-color: #b4bed6;
	border-width: 1px 1px 1px 0;
	border-style: solid;
	background-image: linear-gradient(to top,#fff 67%,#d1d1d1 100%);
	cursor: pointer;
}

/* switch */


.onoffswitch {
    position: relative; width: 70px;
    margin-left: calc(50% - 35px);
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 15px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-right: 10px;
    background-color: #34C251; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #FF3B3B; color: #FFFFFF;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 8px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #999999; border-radius: 15px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

.msg_box{
	background: #dedede;
	border-radius: 5px;
	padding: 10px;
	width: calc(100% - 20px);
	min-height: 20px;
	margin-top: 10px;
}

.msg_box_neu{
	background: #dedede;
	border-radius: 5px;
	padding: 10px;
	width: calc(100% - 22px);
	min-height: 20px;
	border: 1px solid blue;
	margin-top: 10px;
}

.msg_titel{
	
}

.msg_text{
	margin-top: 15px;
}

/* rage */

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid #999999;;
    
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #fff;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #34C251;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #fff;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #fff;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #34C251;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid #999999;;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #fff;;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #fff;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #34C251;
}
input[type=range]:focus::-ms-fill-lower {
    background: #fff;;
}
input[type=range]:focus::-ms-fill-upper {
    background: #fff;
}