/* ******************************************************** Common ******************************************************** */
html
{
}


body {
	margin: 0px;
	padding: 0px;

	height:100%;
	/* background-image :url(../images/de_DE/bg.gif);
	background-repeat: repeat; */
	/*background-color: #363548;*/
	/* Text Attributes */
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-variant: normal;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}

td.label, td.value
{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #ffffff !important;
}

hr {
	display: none;
}

.invisible {
	display: none;
}

strong {
	font-weight: bold;
}

table {
	clear: both;
}


/* *************************************************** Framework **************************************************** */

/* R */
#center {
	width: 350px;
	padding: 6px 6px 6px 6px;
}

#contentContainer {
}

#contentContainertext  {
}
/* R */
#head {
}

#bg_head_logo {
}

#bg_head_picture {
}

#mainNavi {
}

/* R */
#main {
}

#borderMainRight {
}


/* ******************************************************** Containers ******************************************************** */

div.steps {
}

div.contentEmpty {
}

div.contentSubHead div.contentDummy,
div.contentText div.contentDummy,
div.contentTextExtra div.contentDummy,
div.contentSmallLeftHead div.contentDummy,
div.contentSmallRightHead div.contentDummy {
}

div.contentHeadDummy {
}

div.contentSmallLeftEmpty {
}

div.contentSmallLeftHead {
}

div.contentSmallLeftBottom {
}

div.contentSmallLeft {
}

div.contentSmallLeft div.contentDummy {
}

div.contentSmallRightEmpty {
}

div.contentSmallRightHead {
}

div.contentSmallRightBottom {
}

div.contentSmallRight {
}

div.contentSmallRight div.contentDummy {
}

div.contentEmpty div.contentSubTableLeft {
}

div.contentEmpty div.contentSubTableRight {
}

div.contentHead {
}

div.contentHead_floatleft {
}

div.contentHead_floatleft_LogInOut {
}

div.contentHead_floatright {
}

div.contentHead_floatright_LogInOut {
}

div.contentHead_floatright_Steps {
}

div.contentHead_floatright_Step_images {
}
div.contentHead_floatright_Step_images img{
	margin-left: 0px;
}

div.contentSubHead {
}

div.contentBottom {
	margin-top: 10px;
}

div.contentTable {
}


div.contentText {
}

/* ******************************************************** Text ******************************************************** */


/* ******************************************************** Links ******************************************************** */

div.breaker {
    clear: both;
}

div.vspaceslim {
	height: 10px;
	clear: both;
}

/* ******************************************************** Images ******************************************************** */

.right {
	float: right;
	border: 0px;
}

img {
	border: 0px;
}


/* ******************************************************** Headlines ******************************************************** */

div.contentSubHead div.contentDummy h3.error {
}

div.contentHead div.contentHeadDummy h2,
div.contentHead div.contentHeadDummy h3,
div.contentSubHead h2,
div.contentSubHead h3,
div.contentSmallLeftHead h2,
div.contentSmallLeftHead h3,
div.contentSmallRightHead h2,
div.contentSmallRightHead h3 {
}


/* ******************************************************** Lists ******************************************************** */

div.contentText ul.error {
}

div.contentText div.contentDummy ul {
}
div.contentText div.contentDummy ul li {
}



/* ******************************************************** Forms ******************************************************** */

form {
	margin: 0px;
	padding: 0px;
}

input[type=hidden] {
	margin: 0px;
	padding: 0px;
	color: #777777;
}

input {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-variant: normal;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
}

label {
	font-weight: normal;
	position: relative;
}

/* Required fields */
#center table th, #center table td.inputPflicht
{
	background-image: url("../images/de_DE/bg_1stern.gif");
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-left: 20px;
	margin-left: -20px;
}

input[type=radio] {
	margin-left: 0px;
}

input[type=checkbox] {
	margin-left: 0px;
}

input.long {
	width: 180px;
}

input.prefixlong {
    width: 180px;
    float: right;
}

input.medium {
	width: 70px;
}

input.short {
	width: 50px;
}

input.btnRight{
	background-color: #FFFFFF;
    background-image: url("../images/de_DE/marke.gif");
    background-position: left top;
    background-repeat: no-repeat;
	float: right;
	}

input.btnLeft{
	background-color: #FFFFFF;
    background-image: url("../images/de_DE/marke_rueck.gif");
    background-position: left top;
    background-repeat: no-repeat;
	float: left;
	}

input.btnDown{
	background-color: #FFFFFF;
    background-image: url("../images/de_DE/marke_down.gif");
    background-position: left top;
    background-repeat: no-repeat;
	}

input.btnUp{
	background-color: #FFFFFF;
    background-image: url("../images/de_DE/marke_up.gif");
    background-position: left top;
    background-repeat: no-repeat;
	}


.btnLeft, .btnRight, .btnUp, .btnDown {

    border: 0 solid #FFFFFF;
    cursor: pointer;
    height: 15px;
    margin: 1px 0 0 10px;
    padding: 0 0 0 12px;
    vertical-align: middle;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-variant: normal;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-align: left;

}

div.prefix {
    width: 36px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: right;
    float: right;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    border: 2px solid transparent;
}

div.suffix {
    display: inline;
    width: 36px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    border: 2px solid transparent;
}
img.cal {
    vertical-align: middle;
}

/* ******************************************************** Tables ******************************************************** */

table {
}

td {
}

td.label {
	width: 150px;
	max-width: 150px;
	min-width: 150px;
	height: 24px;
	overflow: hidden;
	text-align: left;
	white-space: normal;
}

td.hvlabel {
	display: block !important;
	float: left;
	width: 45%;
	height: 24px;
	overflow: hidden;
	word-wrap: break-word;
}

td.input {
	margin-left: 8px;
    padding: 4px 4px 4px 16px;
    width: 200px;
	max-width: 200px;
	min-width: 200px;
}
/* custom
td.inputPflicht {
	margin-left: 8px;
	background-image: url("bg_1stern.gif");
    background-position: left top;
    background-repeat: no-repeat;
    padding: 4px 4px 4px 16px;
    width: 200px;
	max-width: 200px;
	min-width: 200px;
}
*/
/* global */
td.inputPflicht {
	margin-left: 8px;
    padding: 4px 4px 4px 16px;
    width: 435px;
}

td.input, td.inputPflicht
{
	margin-bottom: 10px;
}

div.contentText ul.error {
    color: #FF0000;
}

td.hvcol2,
td.hvcol3 {
	width: 25% !important;
	overflow: hidden;
	word-wrap: break-word;
}

td.hvcol2 {
}

td.hvcol3 {
	padding-left: 2%;
}

/* **** loader */
div.loader
{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../images/de_DE/loader.gif") no-repeat center center;
	display: inline;
	left: 0;
	top: 0;
	position: fixed;
	z-index: 1;
}



/* Global: make it responsive */

body {
	font-size: 16px;
	color: #000;
}

#center table,
#center thead,
#center tbody,
#center tfoot {
	width: 100%;
}
#center table th, #center table td {
	display: inline-block;
	padding: 0;
}
h3 {
	color: #2b2b2b;
	font-size: 22px;
  font-weight: 700;
}
.contentTable .contentDummy h3 {
	font-size: inherit;
}
h3.error {
	font-size: inherit;
	color: #FF0000;
}
div.contentText ul.error {
	background-color: #FF0000;
	color: #fff;
	list-style-type: square;
	padding: 2% 0;
	animation: fadein 2s;
}
div.contentText ul.error li {
	margin-left: 8%;
	padding-bottom: 10px;
	animation: fadein 2s;
}
div.contentText ul.error li:last-child {
	padding-bottom: 0;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
#center {
	max-width: 500px;
	margin: 5% auto 0;
	padding: 0 10px;
  width: auto;
}
div.contentSubHead {
	padding-left: 2px;
}
div.contentBottom {
  padding-top: 20px;
	width: 100%;
	max-width: 500px;
	margin: 10px auto;
  border-top: 1px solid #f2f2f2;
  //float: left;

    clear: both;
    display: table;
	content: "";

}



input:focus {
    outline: 0;
}
input.long {
	width: 100%;
  float:right;
}

input.prefixlong {
    float: right;
}
td.label {
	display: block;
	width: 100%;
  max-width: none;
  min-width: 0;
	height: 30px;
  margin-right: 4%;
	color: #000000 !important;
	font-family: Arial !important;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
}
@media only screen and (min-width: 550px) {
    td.label {
			display: block;
			float: left;
			width: 35%;
	}
}
/* Zaehlerstand only: smaller breakpoint */
@media only screen and (min-width: 340px) {
    form[name="createmetervaluedso"] td.label {
			display: block;
			float: left;
      width: 35%;
			height: 50px;
	}
}

input[name="btnForward"], input[name="btnBackward"], input[name="btnStart"], input[name="btnPrint"], input.btnDown {
	-webkit-appearance: none;
  background-color: #2b2b2b;
  box-shadow: none;
  background-image: none;
  margin: 0;
  color: #fff;
  padding: 15px 32px;
  font-size: 16px;
  height: auto;
	text-align: center;
	opacity: 1;
	transition: all 1s cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
input[name="btnForward"] {
	padding: 15px 42px 15px 32px;
	/* Base 64 Encoding for IE */
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDc2OCA3NjgnPjxwYXRoIGQ9J00zMTkuNSAxOTJsMTkyIDE5Mi0xOTIgMTkyLTQ1LTQ1IDE0Ny0xNDctMTQ3LTE0N3onIGZpbGw9JyNmZmZmZmYnPjwvcGF0aD48L3N2Zz4=");
	/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 768 768'><path d='M319.5 192l192 192-192 192-45-45 147-147-147-147z' fill='#ffffff'></path></svg>"); */
	background-position: right 10px center;
	background-repeat: no-repeat;
}
input[name="btnForward"]:hover {
	background-position: right 5px center;
	transform: translateX(-5px);
}
input[name="btnBackward"], input[name="btnStart"] {
	padding: 15px 32px 15px 42px;
	-ms-padding: 15px 32px 15px 142px;
	background-color: #d2d2d2;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDc2OCA3NjgnPjxwYXRoIGQ9J000OTMuNSAyMzdsLTE0NyAxNDcgMTQ3IDE0Ny00NSA0NS0xOTItMTkyIDE5Mi0xOTJ6JyBmaWxsPScjZmZmZmZmJz48L3BhdGg+PC9zdmc+");
	/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 768 768'><path d='M493.5 237l-147 147 147 147-45 45-192-192 192-192z' fill='#ffffff'></path></svg>"); */
	background-position: left 10px center;
	background-repeat: no-repeat;
}
input[name="btnStart"] {
	background-color: #2b2b2b;
}
input[name="btnBackward"]:hover, input[name="btnStart"]:hover {
	background-position: left 5px center;
	transform: translateX(5px);
}
input[name="btnForward"]:hover, input[name="btnBackward"]:hover, input.btnDown:hover {
	opacity: 0.6;
}
input.btnDown, input[name="btnPrint"] {
	width: 158px;
	padding: 15px;
	background-position: center -10px;
	background-repeat: no-repeat;
}
@media screen and (max-width:490px) {
	input[name="btnPrint"] {
		margin-bottom: 20px;
		float: left;
	}
}
input.btnDown {
	margin-top: 10px;
}
input.btnDown:hover, input[name="btnPrint"]:hover {
	color: rgba(255, 255, 255, .00004); /* IE hack */
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0NicgaGVpZ2h0PSc0Nicgdmlld0JveD0nMCAwIDc2OCA3NjgnPjxwYXRoIGQ9J00yMzcgMjUwLjVsMTQ3IDE0NyAxNDctMTQ3IDQ1IDQ1LTE5MiAxOTItMTkyLTE5MnonIGZpbGw9JyNmZmZmZmYnPjwvcGF0aD48L3N2Zz4=");
	/* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 768 768'><path d='M237 250.5l147 147 147-147 45 45-192 192-192-192z' fill='#ffffff'></path></svg>"); */
	background-position: center 0;
}
input {
  border: 1px solid #d2d2d2;
  padding: 15px 5%;
  font-size: 16px;
}

td.inputPflicht, td.input {
	display: block;
  width: 93%;
  margin-left: 0;
  max-width: none;
	min-width: 0;
  height: auto;
  padding: 0 0 1% 6%;
	position: relative;
}
@media only screen and (min-width: 550px) {
    td.inputPflicht, td.input {
			display: block;
			float: left;
      width: 57%;
      padding: 0 0 1% 4%;
	}
}
/* Zaehlerstand only: smaller breakpoint */
@media only screen and (min-width: 340px) {
    form[name="createmetervaluedso"] td.inputPflicht,
		form[name="createmetervaluedso"] td.input {
			display: block;
			float: left;
      width: 57%;
      padding: 0 0 1% 4%;
	}
}
td.inputPflicht input, td.input input {
	margin-bottom: 20px;
	float: left;
	border-color: none;
	transition: all 1s cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
td.inputPflicht input:focus, td.input input:focus {
	border-color: #2b2b2b;
}
td.inputPflicht input {
  width: 89%;
}
td.inputPflicht input.short.suffix
{
	width: 70%;
	margin-right: 5%;
}

/* Brennwertrechner only: special solutions */

form .contentTable .default tr:nth-of-type(2) td.label {
  height: 0;
}
form .contentTable .default tr:nth-of-type(2) td.input {
  line-height: normal;
	margin-bottom: 5%;
}
form .contentTable .default tr:nth-of-type(2) td.input {
	font-size: 14px;
	font-style: italic;
}
@media only screen and (min-width: 550px) {
  form .contentTable .default tr:nth-of-type(2) td.label {
    height: 50px;
  }
	form .contentTable .default tr:nth-of-type(2) td.input {
	  margin-bottom: 2%;
	}
}


/* Zaehlerstand only: (delete special solutions) */
form[name="createmetervaluedso"] .contentTable .default tr:nth-of-type(2) td.label {
  height: 30px;
}
@media only screen and (min-width: 340px) {
	form[name="createmetervaluedso"] .contentTable .default tr:nth-of-type(2) td.label {
	  height: 50px;
	}
}
form[name="createmetervaluedso"] .contentTable .default tr:nth-of-type(2) td.input {
	margin-bottom: 0;
	font-size: inherit;
	font-style: normal;
}

/* Error messages */
div.errorIcon
{
	right: 0;
    color: #fff;
    background: #f00;
    width: 13%;
    text-align: center;
    font-size: 26px;
    line-height: 52px;
	height: 52px;
	cursor: pointer;
	display: inline;
	position: absolute;
	opacity: 1;
}

.tooltip
{
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext
{
	display: none;
	width: 160px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 10px;
	border-radius: 6px;
	line-height: normal;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	right: 105%;
	font-weight: normal;
	font-size: 14px;
}

@media only screen and (min-width: 340px)
{
	.tooltip .tooltiptext
	{
		width: 240px;
		right: 105%;
	}
}

@media only screen and (min-width: 1000px)
{
	.tooltip .tooltiptext
	{
		width: 240px;
		left: 105%;
	}
}

input.error
{
	width: 70% !important;
	margin-right: 5%;
}

input.error.suffix
{
	width: 48% !important;
	margin-right: 5%;
}

input.prefixlong
{
	width: 72% !important;
}

input.prefixlong.error
{
	width: 48% !important;
}

input.street
{
	width: 54% !important;
	margin-right: 5%;
}

input.no
{
	width: 30% !important;
}

input
{
	margin-left: 20px;
}

input:first-of-type
{
	margin-left: 0;
}

#podZipRow .street
{
	width: 54% !important;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 5%;
	height: 52px !important;
	border-radius: 0;
}

#podZipRow .street.bootstrap-select
{
	padding-top: 0;
	padding-bottom: 0;
}

#podZipRow .street.bootstrap-select .selectpicker
{
	height: 100%;
}

/* ******************************************************** C Is For Cookie ******************************************************** */

.cookie-popup
{
  position: fixed;
  bottom: -500px;
  right: 0px;
  z-index: 333333;
  padding: 20px;
  background-color: #ffffff;
  max-width: 640px;
  text-align: left;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  opacity: 0.0;
  transition: opacity 1.5s ease-in, bottom 1s ease-in;
}

.cookie-popup h4,
.cookie-popup div.cookie-message
{
	margin-left: 17px;
	margin-bottom: 17px;
}

.cookie-popup div.cookie-buttons
{
	margin-left: 12px;
	margin-bottom: 0;
}

body.loading
{
	overflow: hidden;
}

body.loading .modal {
  display: block;
}

.modal
{
	background: rgba( 255, 255, 255, .8 ) url('../images/de_DE/loading.gif') 50% 50% no-repeat;
	display: none;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}