@font-face {
  font-family: Merriweather;
  src: local("Merriweather"),
       url(MerriweatherSans-Regular.ttf);
  font-weight: bold;
}

body {
	margin: 0px;
	padding: 0;
	font-size: 12px;
	font-family: Merriweather, Tahoma, Arial, sans-serif;
	color: #595959;
	margin-right: 15px;
	margin-left: 15px;
	/* max-width: 670px; */
}

.top-buffer{
	margin-top: 25px;
}

.top-buffer-half{
	margin-top: 13px;
}


/* Alles für den Inhalt */

#inhalt{
	float: left;
	width: 75%;
	margin-left: 50px;
}

#inhalt #oben{
	width: 100%;
	float: left;
}

h1{
	font-size: 16pt;
	font-weight: bold;
	color: #4b4b4d;
}
h2{
	font-size: 16pt;
	margin-top: 20px;
	font-weight: normal;
	color: #4b4b4d;
}

#h3stromverbrauch{
	/* float: right; */
	margin-top: 10px;
	/* margin-right: 15px; */
}
h3{
	
	font-size: 13px;
	font-weight: normal;
	color: #4b4b4d;
	line-height: 140%;
}

.negMarginLeft40{
	margin-left: -50px;
}

.negMarginLeft{
	margin-left: -20px;
}

.negMarginLeft10 {
    margin-left: -10px;
}

h4{
	
	font-size: 25px;	
	font-weight: normal;
	color: #4b4b4d;
	text-align: center;
}


.infoicon{
	width: 20px;
	height: 20px;
	margin-left: 10px;
	margin-top:-5px;
}

.infoicon:hover{
	/* background-color: #eee; */
	/* box-shadow: 2px 2px 2px 2px #aaa; */
	border: 1px solid #c83f3f;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	border-radius: 10px;
}


.chartInfo{
	z-index: 10;	
	position: absolute;
	margin-top: 10px;
	margin-left: 65%;
	float: left;
}


input, input[disabled]{
	border: 0px solid #eee;
	background-color: #fff;
	text-align: right;
	width: 60%; 
	margin-right: 10px;
	/* padding: 8px; */
	margin-top: -5px;
	color: #4b4b4d;
	font-family: Merriweather, sans-serif;
	font-size: 25px;
	font-weight: bold;
	border-radius: 4px;
	-moz-border-radius: 4px;
}

input[type="radio"] {
	width: 30px; 
}




input {
  
} 

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
	/* remove standard-styles */
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%;
  
  /* width:auto; */
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}


input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content: ' ';
	display: inline-block;
	width: 22px;
	height: 22px;
	position: relative;
	top: 4px;
	border: 2px solid #c83f3f;
	background: white;
	margin-right: 1em;
	box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
	
    box-shadow: 2px 2px 4px 0px #888;
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
  margin-top: -7px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#c83f3f;
  box-shadow: inset 0 0 0 2px white; 
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:#c83f3f;
  /* box-shadow: inset 0 0 0 2px white; */
}




span{
	width: 20%;
	font-size: 12px;
}

.centerText{
	text-align: center;
}



/* input:hover, input:focus{ */
	/* border: 0px solid #CC3300; */
	/* color: #CC3300;		 */
/* } */




#svgContainer{
	text-align: center;
	padding-bottom: 50px;
	border-bottom: 5px solid #c83f3f;
}

#svgGrafik{
	/* height:100%; */
	max-width:400px;
	width: 100%;
}

.kuchen{
	width: 100%;
	height: 100%;
}
.centerParent{
	width:100%;
	text-align: center;
	height: 60px;
}
.centervalue{
	font-size: 30px;
	vertical-align: bottom;
}

.resultIcon{
	/* width: 70px; */
	margin-right: 20px;
}

#results{	
	float: left;
	font-size: 6pt;
}

#resultstoggle, #menu_head #resultstoggle{
	font-size: 8px;
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: #DE0202;
	text-decoration: none;
	display: none;
}



/* Grüner Fußzeile unten */

#menu_head {
	background-color: #666666;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	position: relative;
	padding: 10px 5px 10px 17px;
	color: #ffffff;
	min-height: 80px;
}

#menu_head h4 {
	font-size: 10pt;
	/* margin: 0 0 20px 0; */
	text-align: left;
	color: #ffffff;
	margin-top: 15px;
}
#menu_head a{
	color: #ffffff;
	font-size: 10pt;
	margin-top: 20px;
	text-decoration: underline;
}

#menu_head a:hover{
	text-decoration: none;
}

#menu_head #htw{
	margin: 10px;
	height: 50px;
	float: left;
	margin-right: 50px;
}

#eingabe {
    /*background: url("../images/sep-arrow.png") no-repeat bottom center;*/
    /* padding-bottom: 100px; */
    margin-bottom: 50px;
}

.paddingLeft{
	padding-left: 35px;
}

.paddingTop{
	padding-top: 35px;
}

.eingabeIconCol{
	text-align: center;
}

.eingabeIcon{
	/* width: 50px; */
	height:50px; 
	margin-top:20px;
}

.eingabeIconWidth{
	width: 50px; 
	margin-top:20px;
}

.eingabeIconWidthAuto{
	width: 50px; 
	margin-top:-18px;
}

.stromverbrauchAuto {
    text-align: right;
    margin-top: 10px;
}

/* CSS Properties von jQuery überschreiben */
.ui-slider, #ui-slider-pseudo {
    position: relative;
    text-align: left;
    background: #eeeeee;
    border-radius: 4px;
    margin: 5px 0 25px 0;
    height: 8px;
}

#ui-slider-pseudo {
	border: 1px solid #dddddd;
	margin-right: 15px;
	margin-bottom: -20px;
}
/*
.ui-slider-horizontal {
    height: 5px;
	margin-top: 15px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -0.5em;
    margin-left: -0.6em;
}
*/
.ui-slider .ui-slider-range-min {
    left: 0;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 100%;
    font-size: .7em;
    display: block;
    border: 0;
    border-radius: 4px;
    background: #4b4b4d;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    top: -9px;
    margin-left: -15px;
    width: 22px;
    height: 22px;
    background: #c83f3f;
    border-radius: 50%;
    cursor: move;
    box-shadow: 2px 2px 4px 0px #888;
    outline: none;
	border: 2px solid #c83f3f;
}

.ui-slider .ui-slider-handle.ui-state-hover {
    /* background: #ffffff; */
}

/*
.ui-widget-header {
	background: #CC3300;
	border: none;
	color: #fff;
}

.ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #222;
}

#eingabe .ui-state-focus,  #eingabe .ui-widget-content .ui-state-focus {
    border: 1px solid #DE0202;
	background: #DE0202;
	outline: 0;
}

#eingabe .ui-state-hover,  #eingabe .ui-widget-content .ui-state-hover {
    border: 1px solid #DE0202;
	background: #DE0202;
	outline: 0;
}
*/

.paddingTopEAutoKwh{
	padding-top: 0px;
	margin-bottom: 30px;
	float: right;
	text-align: right;
}
/* #amount-car-kwh{ */
	/* width: 75px; */
/* } */


@media(max-width:599px){
	.paddingTop{
		padding-top: 0px;
		margin-bottom: 30px;
		float: right;
		text-align: right;
	}
	.autoH3center{
		text-align: center;
	}
	.autoH3right{
		text-align: right;
	}
	.stromverbrauchAuto {
		text-align: left;
		margin-top: 0px;
	}
	.textRightIfSmall{
		text-align: right;
	}
}