@import url("wp-colors.css");
@import url("components.css");
@import url("header.css");
@import url("order-process.css");
@import url("contracts.css");
@import url("tooltips.css");
@import url("footer.css");


html, body {
	width: 100%;
	height: 100%;
	font-size: 16px;
}

body {
	background-color: #F3F3F3;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


::selection {
	background: #11456B;
	color: #fff;
}
::-moz-selection {
	background: #11456B;
	color: #fff;
}

/* Layouts */
.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

/* TOPBAR */
.topbar {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	height: 66px;
	background-color: #fff;
	padding: 20px 0;
}

/* Main Wrapper */
main {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
}

/* SIDEBAR */
.sidebar {
	display: flex;
	flex: 0 1 150px;
	width: 150px;
	margin-right: 30px;
	background: rgb(65,130,168);
	background: linear-gradient(-180deg, rgba(65,130,168,1) 0%, rgba(39,87,121,1) 60%);
}

/* CONTENT */
.main-content {
	position: relative;
	z-index: 2;
	flex: 1;
	order: 2;
	padding: 30px;
	max-width: 1024px;
}

/* Background Circle */
.bg-circle {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.bg-circle::after {
	position: absolute;
	display: block;
	content: "";
	background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' fill='white' fill-opacity='0.25'/></svg>")  no-repeat;
	background-size: 210vw;
	background-position: -85vw -100vh;
	top: -40vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
}

/* Layout Details */
.sidebar nav {
	width: 100%;
}
.sidebar ul {
	list-style-type: none;
	margin: 0 auto 20px;
	padding: 0;
	text-align: center;
}
.sidebar ul li {
	clear: both;
	display: block;
	font-size: 16px;
	line-height: 20px;
	padding: 0;
	margin-bottom: 0px;
}
.sidebar li span {
	display: inline;
}
.sidebar a:link,
.sidebar a:visited {
	color: #ededed;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 20px 10px;
	display: block;
}
.sidebar a:hover,
.sidebar a:active,
.sidebar li.active a {
	color: #fff;
}
.sidebar li:hover,
.sidebar li.active {
	background: rgb(65,130,168);
	background: linear-gradient(200deg, rgba(65,130,168,1) 0%, rgba(17,69,107,1) 56%);
}

/* Sidebar Icons */
.sidebar a::before {
	content: "";
	height: 37px;
	width: 50px;
	display: block;
	margin: 0 auto 10px;
	background-size: contain;
	opacity: .5;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.sidebar li:hover a::before,
.sidebar li.active a::before {
	opacity: 1;
}
.nav1 a::before {
	height: 28px;
	background: transparent url("../icons/icon-light-start.svg") no-repeat center center;
}
.nav2 a::before {
	background: transparent url("../icons/icon-light-electricity.svg") no-repeat center center;
}
.nav3 a::before {
	background: transparent url("../icons/icon-light-gas.svg") no-repeat center center;
}
.nav4 a::before {
	height: 40px;
	background: transparent url("../icons/icon-light-nightstorage.svg") no-repeat center center;
}
.nav5 a::before {
	height: 40px;
	background: transparent url("../icons/icon-light-heatpump.svg") no-repeat center center;
}


.main-content > h1,
.main-content > h2,
.view-content > h2 {
	font-family: "Gilroy";
	font-size: 2.5em;
	margin: 0 0 30px;
	color: #4182A8;
	line-height: 1;
}
.main-content > h2,
.view-content > h2 {
	font-size: 1.5em;
/* 	color: #11456B; */
	text-transform: uppercase;
}
.main-content > .row {
	margin: inherit;
}
.content-row {
	display: flex;
	margin-bottom: 50px;
	flex-flow: wrap row;
}
.content-row.no-margin {
	margin-bottom: 30px;
}
.content-column {
	display: flex;
	margin-bottom: 30px;
	flex-flow: wrap column;
}
.stats-box {
	min-width: 300px;
	display: flex;
	flex: 1 0 300px;
	flex-flow: column wrap;
	position: relative;
	padding: 10px 15px;
	border-radius: 10px;
	background-color: #fff;
}
.stats-box + .stats-box {
	margin-left: 30px;
}
.stats-box.highlight-blue {
	flex: 0;
	width: 300px;
	background: rgb(65,130,168);
	background: linear-gradient(200deg, rgba(82,154,195,1) 0%, rgba(39,87,121,1) 72.22%);
/*
	background: rgb(120,192,234);
	background: linear-gradient(200deg, rgba(120,192,234,1) 0%, rgba(28,90,136,1) 56%);
*/
	color: #fff;
}
.stats-box.border-blue {
	border-left: 15px solid rgb(65,130,168);
}
.stats-box.border-orange {
	border-left: 15px solid #FFB300;
}
.stats-box p {
	text-transform: uppercase;
	font-size: 1.1em;
	margin: 0;
}
.stats-icon {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 80px;
	height: 80px;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
}
.stats-icon.savings {
	background-image: url("../icons/stats-savings.svg");
}
.stats-box span {
	display: block;
	line-height: 1.2;
}
.stats-box span.stats-value {
	color: #FFB300;
	font-size: 2.75em;
	font-weight: 500;
	margin-bottom: 5px;
}
.stats-box span.stats-info {
	font-size: 1em;
	opacity: .75;
}
.with-action {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}
.stats-wrapper {
	position: relative;
	width: 300px;
}
.stats-icon.recommend {
	width: 110px;
	background-image: url("../icons/stats-recommend.svg");
}
.stats-box .is-action {
	flex-flow: row wrap;
	padding: 0 20px;
}
.is-action h2 {
	color: #376382;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.5em;
	line-height: 1;
	margin: 0 0 10px;
	opacity: .75;
	max-width: 225px;
}
.is-action .btn.ghst {
	font-size: 1.5em;
	display: block;
}
.stats-icon.next {
	width: 90px;
	background-image: url("../icons/stats-next.svg");
}
.action-box {
	min-width: 250px;
	display: flex;
	flex: 1;
	flex-flow: column wrap;
	position: relative;
	padding: 10px 0 10px 30px;
}
.action-box .btn.cta {
	margin: 0;
	background: rgb(209,147,0);
	background: linear-gradient(343deg, rgba(209,147,0,1) 0%, rgba(255,198,77,1) 80%);
}
.action-box .btn.cta:hover {
 background: rgb(209,147,0);
background: linear-gradient(343deg, rgba(209,147,0,1) 0%, rgba(255,198,77,1) 100%);
}
/* Shadows & Animations */
.has-shadow,
.hover-shadow,
.is-growing {
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.has-shadow,
.hover-shadow:hover {
	-webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15);
}
.has-shadow.highlight-blue {
	-webkit-box-shadow: 0px 5px 15px 0px rgba(44,101,143,.5);
	-moz-box-shadow: 0px 5px 15px 0px rgba(44,101,143,.5);
	box-shadow: 0px 5px 15px 0px rgba(44,101,143,.5);
}
.is-growing:hover {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-transform: translate3D(0,-1px,0) scale(1.02);
	-moz-transform: translate3D(0,-1px,0) scale(1.02);
	transform: translate3D(0,-1px,0) scale(1.02);
}

/* Todos */
.todo-box {
	border-radius: 10px;
	color: #fff;
	padding: 20px;
	display: flex;
	flex: 1;
	flex-direction: column;
	background: #456F8D;
	background: linear-gradient(188deg, rgba(65,130,168,.75) 0%, rgb(42, 89, 130,.95) 56%);
/* 	linear-gradient(188deg, rgba(65,130,168,.75) 0%, rgba(17,69,107,.75) 56%); */
}
.todo-box a:link,
.todo-box a:visited {
	color: #fff;
	border: none;
}
.todo-box a:hover,
.todo-box a:active {
	color: #11456B;
}
.todo-box .todo {
	display: flex;
	flex-flow: row wrap;
	flex: 1;
	height: 100%;
}
.todo-box .todo:not(:last-child) {
	margin-bottom: 15px;
}
.todo .action {
	flex: 1;
	margin-right: 20px;
}
.todo .action a::before,
.contract-info a::before {
	display: inline-block;
	content: "";
	width: 80px;
	height: 100%;
	margin-right: 20px;
	border-radius: 10px 0 0 10px;
	background-color: #F9C043;
}
.todo .action.type-meter a::before {
	background: #F9C043 url("../icons/icon-light-meter.svg") no-repeat center center;
	background-size: auto 25px;
}
.todo .action.type-electricity a::before {
	background: #F9C043 url("../icons/icon-light-electricity.svg") no-repeat center center;
	background-size: auto 42px;
}
.todo .action.type-gas a::before {
	background: #F9C043 url("../icons/icon-light-gas.svg") no-repeat center center;
	background-size: auto 42px;
}
.todo .action.type-heatpump a::before {
	background: #F9C043 url("../icons/icon-light-heatpump.svg") no-repeat center center;
	background-size: auto 42px;
}
.todo .action.type-nightstorage a::before {
	background: #F9C043 url("../icons/icon-light-nightstorage.svg") no-repeat center center;
	background-size: auto 42px;
}
/* test inverted colors */
.todo-box.inverted {
	background: #BCD1DB;
	color: #11456B;
}
.todo-box.inverted1 .action.type-meter a::before {
	background: #11456B url("../icons/icon-light-meter.svg") no-repeat center center;
	background-size: auto 25px;
}
.todo-box.inverted .action.type-electricity a::before {
	background: #11456B url("../icons/icon-light-electricity.svg") no-repeat center center;
	background-size: auto 42px;
}
.todo-box.inverted .action.type-gas a::before {
	background: #11456B url("../icons/icon-light-gas.svg") no-repeat center center;
	background-size: auto 42px;
}
.todo-box.inverted .action.type-heatpump a::before {
	background: #11456B url("../icons/icon-light-heatpump.svg") no-repeat center center;
	background-size: auto 42px;
}
.todo-box.inverted .action.type-nightstorage a::before {
	background: #11456B url("../icons/icon-light-nightstorage.svg") no-repeat center center;
	background-size: auto 42px;
}
.todo .action a:link,
.todo .action a:visited {
	height: 100%;
	display: flex;
	color: #11456B;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1;
	align-items: center;
	text-transform: uppercase;
	border-radius: 10px;
	background-color: #eaf3f8;
}
.todo .action a:hover,
.todo .action a:active {
	background-color: #fff; /* rgba(255, 255, 255, 0.85);*/
}
.todo .action .action-title {
	padding: 12px 0;
}
.todo .action .action-infos {
	font-size: 12pt;
	font-weight: 400;
	line-height: 1;
	min-width: 180px;
	margin-right: 20px;
	margin-left: auto;
	text-transform: inherit;
	opacity: .75;
}
.todo .info-box,
.contract-info-box {
	flex: 0 0 300px;
	width: 300px;
	line-height: 1.2;
}
.todo .info-box h3,
.contract-info-box h3 {
	margin: 0;
	font-weight: 500;
	font-size: 14pt;
}
.action-buttons a.btn:not(:last-child) {
	margin-bottom: 10px;
}

/* At Home */
.contracts-group {
	border-radius: 10px;
	color: #1C4E72;
	padding: 20px;
	display: flex;
	flex: 1;
	flex-direction: column;
	background: #BCD1DB;
 }
.group-contract {
	display: flex;
	flex-flow: row wrap;
	flex: 1;
	height: 100%;
}
.group-contract:not(:last-child),
.contract-info a {
	margin-bottom: 15px;
}
.contract-group {
	flex: 1;
	margin-right: 20px;
}
.contract-info-box p {
	margin: 5px 0 15px;
}
.contract-info-box p:last-child {
	margin-bottom: 0;
}
.contract-info-box .btn.ghst {
	font-size: 1.25em;
	display: block;
	margin-bottom: 0;
}
.contract-info a:link,
.contract-info a:visited {
	position: relative;
	height: 100%;
	display: flex;
	flex-flow: row;
	color: #11456B;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1;
	align-items: flex-end;
	text-transform: uppercase;
	border-radius: 10px;
	background-color: #fff;
	padding-left: 100px;
}
.contract-info a:hover,
.contract-info a:active {
	background-color: rgba(255, 255, 255, 0.85);
}
.contract-info a::before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: #1C4E72;
}
.contract-info.type-meter a::before {
	background: #1C4E72 url("../icons/icon-light-meter.svg") no-repeat center center;
	background-size: auto 25px;
}
.contract-info.type-electricity a::before {
	background: #1C4E72 url("../icons/icon-light-electricity.svg") no-repeat center center;
	background-size: auto 42px;
}
.contract-info.type-gas a::before {
	background: #1C4E72 url("../icons/icon-light-gas.svg") no-repeat center center;
	background-size: auto 42px;
}
.contract-info.type-heatpump a::before {
	background: #1C4E72 url("../icons/icon-light-heatpump.svg") no-repeat center center;
	background-size: auto 42px;
}
.contract-info.type-nightstorage a::before {
	background: #1C4E72 url("../icons/icon-light-nightstorage.svg") no-repeat center center;
	background-size: auto 42px;
}
.contract-info.type-info a::before {
	background: #1C4E72 url("../icons/icon-info.svg") no-repeat center center;
	background-size: auto 36px;
}
.contract-info em {
	display: block;
	text-transform: uppercase;
	font-size: 12pt;
	font-style: normal;
	color: rgba(29, 79, 116, 0.66);
	white-space: nowrap;
}
.contract-info .savings {
	display: block;
	padding: 10px 0;
}
.contract-info .status {
	display: block;
	font-size: 12pt;
	font-weight: 400;
	line-height: 1;
	min-width: 200px;
	margin-right: 20px;
	margin-left: auto;
	text-transform: inherit;
	opacity: .75;
	padding: 12px 0;
}
.contract-info.type-info a {
	font-size: 1.25em;
	padding: 15px 0 15px 100px;
}
.contract-info .highlighted {
	color: #F9C043;
	margin-left: 5px;
}

/* Teaser Cards */
.teaser-group {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.teaser-box {
	flex: 0 1 200px;
	background-color: #D9DFE2;
	border-radius: 10px;
	padding: 15px;
	background: #D9DFE2 url("../icons/teaser-electricity.svg") no-repeat right bottom;
	background-size: auto 120px;
	margin-bottom: 30px;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.teaser-box:hover:after {
	border-radius: 10px;
	display: block;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: -1;
	background: rgb(145,220,106);
	background: linear-gradient(0deg, rgba(145,220,106,0.3) 0%, rgba(73,175,156,0.3) 100%);
}
.teaser-box h3 {
	color: #1C4E72;
	font-size: 1.35em;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.teaser-box p:not(.info-text) {
	margin: 0;
}
.teaser-box .btn.cta {
	font-size: 1.25em;
	padding: 8px 15px;
	white-space: nowrap;
}
.teaser-box p.info-text {
	width: 64%;
	font-size: 1em;
	line-height: 1.2;
	margin-top: 30px;
	margin-bottom: 0;
	color: rgba(28, 78, 114, 0.8)
}
.teaser-box.type-electricity {
	background-image: url("../icons/teaser-electricity.svg");
}
.teaser-box.type-gas {
	background-image: url("../icons/teaser-gas.svg");
}
.teaser-box.type-nightstorage {
	background-image: url("../icons/teaser-nightstorage.svg");
}
.teaser-box.type-heatpump {
	background-image: url("../icons/teaser-heatpump.svg");
}

/* Meter/Contract List */
.grouped {
	flex: 1;
}
.single-item {
	display: flex;
	flex-wrap: wrap;
	flex: 0 1 auto;
	border-radius: 10px;
	margin-bottom: 15px;
	justify-content: flex-start;
	cursor: pointer;
}
.single-item .section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	text-transform: uppercase;
	font-weight: 400;
	padding: 0 20px;
}
.single-item .section.infos {
	width: 400px;
	font-size: 1.15em;
	color: #fff;
	justify-content: flex-start;
	background-color: #346C94;
	border-radius: 10px 0 0 10px;
}
.single-item:hover .section.infos {
	background-color: #3d80b1;
}
.single-item .section.infos span {
	padding: 10px 0;
}
.single-item .section.infos span:first-child {
	min-width: 130px;
	padding-left: 20px;
}
.single-item .section.infos em {
	font-style: normal;
	display: block;
	margin-bottom: 0px;
	color: #fff;
	opacity: .5;
}
.single-item .section.actions {
	flex: 1;
	justify-content: space-around;
	font-size: 1.8em;
	line-height: 1;
	color: #1C4E72;
	background-color: #4B7DA1;
}
.single-item:hover .section.actions {
	background-color: #5699ca;
}
.single-item .section.actions a:link,
.single-item .section.actions a:visited {
	color: #fff;
	margin: 0 20px;
}
.single-item .section.actions a:hover,
.single-item .section.actions a:active {
	color: #A5BFBE;
}
.single-item .section.status {
	padding: 0;
	flex: 0 1 150px;
	justify-content: space-around;
	font-size: 1.8em;
	color: #1C4E72;
	background-color: #fff;
	border-radius: 0 10px 10px 0;
}
.single-item .section.status.active {
	color: #6EC9C3;
}
.single-item .section.status.inactive {
	color: #A5BFBE;
}
.single-item .section.status.asked {
	color: #5CA9C7;
}
.single-item .section.status.problem {
	color: #FF002A;
}

/* Tipps Box */
.tipps-box {
	flex: 1;
	padding: 20px;
	font-size: 1.25em;
	line-height: 1.2;
	color: #fff;
	border-radius: 10px;
	background: rgb(81,228,168);
	background: linear-gradient(200deg, rgba(81,228,168,0.8) 0%, rgba(30,138,180,0.8) 56%);
}
.tipps-box p:last-child {
	margin-bottom: 0;
}
.tipps-box p:not(:last-child) {
	margin: 0 0 15px;
}


/* Contact Popup */
#need-help {
	position: fixed;
	z-index: 2;
	right: 20px;
	bottom: 20px;
	color: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	background: rgb(65,130,168);
	background: linear-gradient(-160deg, rgba(65,130,168,1) 0%, rgba(39,87,121,1) 80%);
}
#need-help strong {
	color: #fff;
	font-weight: 500;
	font-size: 1.25em;
}
#need-help p {
	opacity: 0;
	max-height: 0;
	margin: 0 0 5px;
	font-size: 1.1em;
	line-height: 1.2;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
#need-help:hover p,
#need-help.hover p {
	opacity: 1;
	max-height: 200px;
}
#need-help a {
	color: #fff;
}
#need-help button.btn {
	font-size: 1.2em;
	color: #11456B;
	display: block;
	margin: 0;
	width: 100%;
	border: none;
}
#need-help button.btn:hover {
	background-color: #F9C043;
}
#need-help button.btn svg path,
#need-help button.btn:hover svg path {
	fill: #11456B
}


/* Upload */
.meterid {
	margin: 0 auto 10px;
	text-align: center;
	font-size: 1.25em;
}
.meterid span {
	margin-top: -5px;
	display: block;
	font-size: 12pt;
}
#changeMeterId {
	margin-top: 10px;
	font-size: 13pt;
}


/* Search Meter */
.search-meter {
	margin: 0;
}
.search-meter .mc-form-group {
	justify-content: center;
}
.search-meter .mc-form-input select,
.search-meter .mc-form-input select:focus {
	width: 320px;
	max-width: 80vw;
	padding: 6px 20px 5px;
	border: none;
	box-shadow: none;
	text-align: left;
	margin-bottom: 0;
}
.search-meter .select2-container--default .select2-selection--single,
.search-meter .select2-container--default .select2-selection--multiple,
.search-meter .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	border: none;
	padding: 5px 10px;
	border-radius: 10px 0 0 10px;
	height: 34px;
	font-size: 1.1em;
}
#account .select2-dropdown {
	border: 1px solid #fff;
}
#account .select2-results__options li span {
	width: 62px;
	display: inline-block;
}
#account .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #3d80b1;
}
.search-meter .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 25px;
}
.search-meter .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

/* News Box */
.news-box {
	flex: 1;
	padding: 20px;
	font-size: 1.25em;
	line-height: 1.2;
	color: #333;
	border-radius: 10px;
	background: #fff;
}
.news-box p {
	margin: 0 0 15px;
}
.news-box ul {
	list-style-type: none;
	margin: 10px auto;
	padding: 0;
	display: flex;
	flex: 1;
	flex-flow: row wrap;
	justify-content: space-around;
}
.news-box ul li {
	display: inline-block;
	font-size: .8em;
	text-align: center;
}
.news-box ul li a {
	color: inherit;
}
.news-box ul li img {
	height: 100px;
	width: auto;
	margin-bottom: 10px;
}

/* Change Bank Infos */
.single-view-form {
	flex: 1;
	max-width: 800px;
}
.form-wrapper {
	max-width: 800px;
}
select[name="meterIdForIban"] {
	font-size: 14pt;
}
select[name="meterIdForIban"] option span:first-child {
	width: 80px;
	display: inline-block;
}
select[name="meterIdForIban"] option span:last-child {
	display: inline-block;
	margin-left: 15px;
}
.single-view-form .select2-container,
ul[id^="select2-meterIdForIban"] {
	font-family: "Barlow Condensed";
	font-weight: 500;
}
.single-view-form .select2-selection__rendered {
	padding: 5px 10px;
}
.single-view-form .select2-container .select2-selection--single,
.single-view-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 50px;
}
.accept-iban {
	display: flex;
}
.accept-iban .toggle {
	float: none;
	margin-left: 5px;
}
.accept-iban .toggle-label.address {
	font-size: 12px;
	margin-bottom: 20px;
}
.accept-iban .form-error.is-visible {
	position: absolute;
	left: 0;
	top: 94%;
	width: 100%;
	text-align: center;
}
.bankchange {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px 10px;
	margin: 40px auto;
}
.bankchange h2 {
	margin: 0 auto 20px;
	text-align: center;
	color: #11456B;
}
.bankchange .accept-iban {
	position: relative;
	align-items: flex-start;
	margin-top: 20px;
}
.bankchange .accept-iban .toggle {
	margin: 10px 10px 0;
}
.bankchange .change-all .toggle {
	margin: 0;
}
.bankchange .accept-iban .form-error.is-visible {
	font-size: 1em;
}
.bankchange .flex-elements {
	margin-top: 20px;
	justify-content: center;
}
.bankchange p {
	text-align: center;
	font-size: 15pt;
}

/* 2019 */
.reveal {
	border: 0;
	border-radius: 10px;
}

/* Forms */
[type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="decimalnumber"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea {
	height: auto;
	border: 1px solid #c3c3c3;
	border-radius: 3px;
	background-color: #fff;
	padding: 10px;
	box-shadow: none;
	font-family: "Barlow Condensed", "Helvetica Neue", sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	color: #333;
	transition: box-shadow .5s, border-color .25s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Select*/
select {
	padding-top: 10px;
	padding-bottom: 10px;
	height: auto;
	font-size: 1.1em;
}

.text-centered {
	text-align: center;
}

#account .main,
.block_wide_content {
/*	color: #444;
	background-color: #fff;
	border-radius: 10px;
	padding: 10px 20px;
	margin-bottom: 30px;

	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
*/
}

.content-header {
	position: relative;
	z-index: 0;
	color: #fff;
	padding: 5px 20px;
	font-family: "Gilroy Bold";
	font-weight: normal;
	background-color: #3484be;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	margin: -10px -20px 20px;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
}

	.content-header h2 {
		font-size: 1.5em;
		font-weight: normal;
		margin: 0;
	}

.block-content {
	margin-bottom: 20px;
}

	.block-content h3 {
		margin: 0;
		font-size: 1.4em;
		font-family: "Gilroy Bold";
		font-weight: normal;
	}

.has-sep::before {
	display: block;
	content: "";
	margin: 0 -20px 20px;
	border-top: 1px solid #dedede;
}

.block-content:last-of-type {
	margin-bottom: 10px;
}

/* sidebar */
.block_sidebar_content {
	padding: 0 15px;
}

	.block_sidebar_content h3 {
		margin: 0;
		text-transform: uppercase;
		font-size: 1.5em;
		font-family: "Gilroy Bold";
		font-weight: normal;
	}

	.block_sidebar_content .btn.cta,
	.block_sidebar_content .btn.ghst {
		width: 100%;
	}

/* more block elements */
.block_footnote p {
	font-size: .8em;
	color: #9f9f9f;
}

.block_options {
	margin: 20px auto;
	width: 100%;
}

	.block_options h3 {
		font-family: "Gilroy Bold";
		font-weight: normal;
		font-size: 1.3em;
		color: #3484be;
		margin: 20px 0 10px;
	}

main section:last-child,
main + .block_options {
	margin-bottom: 60px;
}

.block_options + .block_footnote {
	margin-bottom: 20px;
}

.text_box {
	font-size: 1.25em;
}
.text_box p {
	max-width: 800px;
}

.text_box a:not(.btn):link, .text_box a:not(.btn):visited {
	color: #2a70b0;
	border-bottom: 1px solid transparent;
}

.text_box a:not(.btn):hover, .text_box a:not(.btn)s:active {
	color: #2a70b0;
	border-bottom: 1px solid #f9aa00;
}

.text_box h2 {
	font-family: 'Gilroy Bold';
	font-size: 1.8em;
	font-weight: 400;
	margin: -10px 0 0;
	color: #2a70b0;
}

.text_box h2::after {
	display: block;
	content: "";
	height: 10px;
	width: 100px;
	background-color: #2a70b0;
	margin: 10px 0 30px;
}

.smaller-text {
	font-size: .75em;
}

.flex-elements {
	display: flex;
	justify-content: space-between;
	padding: 10px 0 0;
	flex-wrap: wrap;
	clear: both;
}

.flex-elements.centered {
	justify-content: center;
}

/* .flex-elements.centered .btn { */
.main .flex-elements .btn {
	margin: 0 5px 10px;
}

.main .content-box {
	border: 1px solid rgba(42,111,176,.33);
	border-width: 1px 0;
	margin: 20px -1.2em;
	padding: 0 20px;
	background-color: #f4f4f4;
}

.content-box button.btn.cta {
	margin: 10px auto 20px;
	text-align: center;
}

/* Profile */
.account-profile .show-lieferaddress {
	float: left;
}

.account-profile .show-lieferaddress p strong {
	display: inline-block;
	text-align: right;
	width: 120px;
	color: #666;
	margin-right: 5px;
}

.element-indent {
	margin-left: 130px;
}

.element-right {
	float: right;
}

.element-right:after {
	clear: both;
	float: none;
	content: "";
	display: inline-block;
}

.account-profile .profile-meta {
	float: right;
	text-align: right;
	font-family: "Gilroy Bold";
	font-weight: 400;
	font-size: 1.1em;
	color: #2a70b0;
}

.account-profile .profile-meta strong {
	color: #666;
}

.account-profile .profile-meta a:link, .account-profile .profile-meta a:visited {
	text-transform: uppercase;
	font-size: .9em;
	color: #2a70b0;
	font-family: "Barlow Condensed",sans-serif;
	border-bottom: 2px solid transparent;
}

.account-profile .profile-meta a:hover, .account-profile .profile-meta a:active {
	border-bottom: 2px solid #f9aa00;
}

.account-profile .form_name_fields input {
	width: 45%;
	margin-right: 10px;
	float: left;
}

.account-profile .edit_profile_data .toggle {
	float: left;
	margin: 5px 0 0;
}

.birthday-fields input {
	max-width: calc(33% - 10px);
	margin-right: 10px;
	float: left;
}

	.birthday-fields input:last-of-type {
		max-width: 33%;
		margin-right: 0;
	}

.birthday-fields span {
	float: none;
	clear: both;
}

.zaehler label {
	text-align: left;
}

/* finanztest logo */
.text-box.finanztest h4 {
	font-family: Gilroy;
	font-weight: 400;
	font-size: 1.25em;
	margin: -5px 0 auto;
	color: #207bb9;
}

.text-box.finanztest img {
	height: 150px;
	width: auto;
}

/* New Loading Spinner */
.loading {
	position: relative;
	cursor: progress !important;
	color: #f9aa00 !important;
	background-color: #fff !important;
}

.loading::before {
	content: "";
	position: absolute;
	left: calc(50% - 14px);
	top: calc(50% - 14px);
	width: 28px;
	height: 28px;
	border: 5px solid #2a70b0;
	border-top-color: #f9aa00;
	border-radius: 50%;
	-webkit-animation: spinning .8s ease infinite;
	animation: spinning .8s ease infinite;
	outline: solid 1px transparent;
	background-color: #fff;
}

@-webkit-keyframes spinning {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spinning {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.reveal-overlay {
	background-color: rgba(0, 66, 88, 0.85);
}

/* Partner */
.partner-row {
	display: flex;
	align-items: center;
	padding: 10px 20px;
}

.partner-overview .partner-name {
	padding-left: 20px;
}


/* Profile stats */
.block_userinfos .cta-btn a {
	font-size: 2em;
	margin-top: 4px;
	padding: 20px 40px;
}

.block_userinfos .cta-btn.ghst a {
	font-size: 1.25em;
	padding: 15px;
	/*margin-top: 0;*/
	display: block;
}

.content-wrapper {
	display: flex;
	justify-content: flex-start;
}

	.content-wrapper .left-content {
		flex: 0 1 50%;
		text-align: center;
	}

		.content-wrapper .left-content img {
			max-width: 250px;
		}

	.content-wrapper .right-content {
		flex: 0 1 50%;
		margin-top: 20px;
	}

ol {
	padding: 0;
	margin-left: 15px;
}

	ol li {
		margin: 5px 0;
	}

/* modals */
.modal-form label {
	font-family: Gilroy Bold;
	font-size: 1.25em;
}

/* Recommend */
.info-box__recommended .info-box-content {
	font-family: 'Barlow Condensed';
	font-weight: 400;
	font-size: 1em;
	padding: 10px 20px;
}

.info-box__recommended .info-box-top {
	padding: 10px 20px;
}

.recommendation .recommend {
	margin: 20px auto 30px;
	max-width: 500px;
	text-align: center;
}

.copy_ref_link_input {
	display: inline-block;
	max-width: 360px;
}


.recommend-btn {
	margin: 30px auto 10px;
	text-align: center;
}

.recommendation .recommend h3 {
	margin: 30px 0 0;
	font-size: 1.5em;
	font-family: 'Gilroy Bold';
	color: #2a70b0;
	font-weight: 400;
}

.recommendation .recommend p {
	background-color: #2a70b0;
	color: #fff;
	display: inline-block;
	padding: 10px 20px 0;
	margin-bottom: 0;
	text-align: center;
	font-size: 1.2em;
}

.recommendation .recommend strong {
	font-size: 1.5em;
	font-family: 'Gilroy Bold';
	font-weight: 400;
	line-height: 1.3em;
	display: block;
	margin-bottom: 10px;
}

.recommend-btn {
	margin: 30px auto 10px;
	text-align: center;
}

.recommend-link {
	text-align: center;
	background-color: #f3f3f3;
	padding: 10px 10px 0;
	font-size: .9em;
}

	.recommend-link span {
		color: #2a70b0;
		font-family: "Gilroy Bold";
		font-size: 1.1em;
	}

.main .recommend .btn.cta {
	margin-bottom: 20px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 5px 20px;
}

.recommend_title, .reviews {
	text-align: center;
	margin: 10px auto;
}

	.recommend_title img {
		height: 50px;
		width: auto;
	}

	.recommend_title .icon {
		background-color: #add8e6;
		padding: 20px;
		border-radius: 50%;
		margin-bottom: 20px;
		display: inline-block;
	}


iframe.iframe-modal {
	width: 100%;
}
.reveal.medium {
	width: 90%;
	max-width: 800px;
}
	.reveal.medium .close-button {
		right: 2px;
		top: -4px;
		font-weight: 700;
		color: #0f3c54;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 25px;
	}


/* Copy Link */
#actionResult {
	position: fixed;
	width: 250px;
	height: 60px;
	left: calc(50% - 125px);
	top: calc(50% - 30px);
	background-color: #f9aa00;
	border-radius: 5px;
	border: 3px solid #fff;
	padding: 20px;
	font-family: 'Gilroy Bold';
	text-transform: uppercase;
	color: #fff;
	line-height: 1em;
	text-align: center;
	vertical-align: center;
	z-index: 1000;
}

	#actionResult .success {
		display: inline-block;
		opacity: 0;
	}

		#actionResult .success.draw {
			opacity: 1;
		}

			#actionResult .success.draw:after {
				animation-duration: 800ms;
				animation-timing-function: ease;
				animation-name: checkmark;
				transform: scaleX(-1) rotate(135deg);
			}

		#actionResult .success:after {
			opacity: 1;
			height: 2em;
			width: 1em;
			transform-origin: left top;
			border-right: 5px solid #fff;
			border-top: 5px solid #fff;
			content: '';
			margin-left: -3em;
			margin-top: -.3em;
			position: absolute;
		}

@keyframes checkmark {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}

	20% {
		height: 0;
		width: 1em;
		opacity: 1;
	}

	40% {
		height: 2em;
		width: 1em;
		opacity: 1;
	}

	100% {
		height: 2em;
		width: 1em;
		opacity: 1;
	}
}