/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

html {
	height: 100%;
	min-width: 320px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	font-family: 'Fira Sans', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 30px;
	height: 100%;
	font-weight: 300;
	min-height: 100%;
	min-width: 320px;
	background: #1a1a1a;
	color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body.mobile {
	font-size: 18px;
	line-height: 26px;
}
body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body .page {
	position: relative;
}
body.desktop.signed_in .page {
	margin-right: 300px;
}
ul,
ol {
	padding-left: 30px;
}
ol {
	counter-reset: ol1;
	list-style: none;
}
ol li {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #1a1a1a;
}
ol li h3 {
	font-size: 20px;
	line-height: 30px;
}
ol > li:before {
	counter-increment: ol1;
  	content: counter(ol1) ".";
	position: absolute;
	left: -30px;
}
ol li ol {
	counter-reset: ol2;
}
ol > li > ol > li:before {
	counter-increment: ol2;
  	content: counter(ol1) "." counter(ol2) ".";
	left: -40px;
}
h1,
h2,
h3,
strong {
	font-weight: 300;
}
h2 {
	font-size: 34px;
	line-height: 42px;
}
h3 {
	font-size: 26px;
	line-height: 36px;
}
h4 {
	font-size: 20px;
	line-height: 30px;
}
.mobile h1 {
	font-size: 24px;
	line-height: 36px;
}
.mobile h2 {
	font-size: 22px;
	line-height: 30px;
}
.mobile h3 {
	font-size: 19px;
	line-height: 23px;
}
a {
	cursor: pointer;
	text-decoration: none;
	color: #1a1a1a;
}
a:hover {
	color: #00a99d;
}
.combine h2 {
	margin-bottom: 15px;
}
.combine h2 + p {
	margin-top: 0;
}
.center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.clear {
	clear: both;
}
.left,
.right {
	width: 50%;
}
.left {
	float: left;
}
.right {
	float: left;
	text-align: right;
}
.euro:after {
	content: ' €';
}
.alert {
	padding: 40px 40px 40px 80px;
	border: 1px solid #C00;
	position: relative;
}
.alert:before {
	content: "\26a0";
	font-family: 'entypo', sans-serif;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 24px;
	padding: 40px 20px;
	font-size: 24px;
	color: #C00;
}
.inline {
	display: inline-block;
}
.cookies {
	background: #333;
	color: #fff;
	min-height: 80px;
}
.cookies .close {
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 100;
}
.cookies .wrapper {
	padding: 20px 80px 20px 20px;
	max-width: none;
}
.cookies .wrapper p {
	margin: 0;
}
.cookies .wrapper p a {
	color: #fc5c63;
}
.cookies + .page header {
	position: absolute;
}
.wrapper {
	margin: 0 auto;
	max-width: 1400px;
	padding: 0 20px;
	position: relative;
}
.mobile .wrapper {
	padding: 0 10px;
}

.tooltip {
	position: relative;
	display: inline-block;
}
.tooltip:after {
	content: 'i';
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	background-color: #1e1e1e;
	font-size: 14px;
	border-radius: 10px;
	color: #fff;
	width: 20px;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin: 10px 0 0 5px;
}
.tooltip .tip {
	color: #1a1a1a;
	font-size: 14px;
	line-height: 20px;
	display: none;
	top: 100%;
	position: absolute;
	z-index: 500;
	width: 300px;
	background-color: #fff;
	border: 1px solid #1a1a1a;
	padding: 10px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	margin-top: 5px;
}
.tooltip .tip:before {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
}
.tooltip:hover .tip {
	display: block;
}
.page header {
	padding: 20px 0;
	position: absolute;
	z-index: 500;
	width: 100%;
	transition: background 0.2s;
	-moz-transition: background 0.2s;
	-webkit-transition: background 0.2s;
	-o-transition: background 0.2s;
}
.mobile .page header {
	padding: 10px 0;
}
.desktop.signed_in .page header {
	display: none;
}
.logo {
	position: relative;
	cursor: pointer;
	float: left;
}
aside .logo {
	padding: 20px;
}
.logo .app_icon {
	width: 50px;
	height: 50px;
	background-image: url('logo_icon.png');
	background-size: 50px;
	position: absolute;
}
.logo .app_text {
	background-image: url('logo_text.png');
	height: 50px;
	width: 197px;
	position: relative;
	margin-left: 55px;
	z-index: 100;
	vertical-align: top;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
aside .logo .app_text {
	background-image: url('logo_white_text.png');
}
.logo img {
	display: none;
}
.tablet header .logo .app_text {
	display: none;
}

body[data-page="/"] header {
	background: rgba(26,26,26,0.9);
}
body[data-page="/"] header .logo .app_text {
	background-image: url('logo_white_text.png');
}
body[data-page="/"] header.shrink {
	background: #1a1a1a;
}
.mobile header .logo app_text {
	display: none;
}
header .account {
	display: inline-block;
	float: right;
	top: 0;
	width: 50%;
}
.tablet header .account {
	width: auto;
}
header .account .bulb_navi {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
.desktop.signed_in header .account .bulb_navi {
	display: none;
}
header .account .bulb_navi:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
header .account .bulb_navi li {
	display: inline-block;
	vertical-align: top;
	position: relative;
	float: right;
}
header .account .count {
	position: absolute;
	right: 0;
	top: 0;
	background-color: #fc5c63;
	color: #;
	line-height: 18px;
	height: 20px;
	width: 20px;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	font-size: 12px;
	text-align: center;
	border: 1px solid #fff;
}
header .account .small {
	width: 50px;
	height: 50px;
	display: inline-block;
	float: left;
	margin-left: 10px;
}

.heading {
	position: relative;
}
.heading .wrapper h2 {
	text-align: center;
	line-height: 100px;
	padding-bottom: 15px;
	margin: 0;
}
.mobile .heading .wrapper h2 {
	display: none;
}
.heading .wrapper h2 span {
	margin-right: 20px;
}
.heading .background {
	height: 100%;
	display: block;
	position: absolute !important;
	width: 100%;
	bottom: 0;
	background: #00d29d;
	opacity: 0.5;
}
.page section {
	min-height: 670px;
	background: #eee;
}
.page footer {
	width: 100%;
	min-height: 50px;
	border-top: 1px solid #fff;
	background: #1a1a1a;
	padding: 20px 0 20px 0;
	color: #fff;
}
footer .wrapper {
	position: relative;
}
footer nav {
	display: inline-block;
	float: left;
	width: 50%;
}
.mobile footer nav {
	width: 100%;
}
footer nav ul {
	float: left;
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile footer nav ul {
	text-align: center;
	width: 100%;
}
footer nav ul li {
	line-height: 40px;
	display: inline-block;
	padding-right: 20px;
}
footer nav ul li:last-child {
	margin-right: 0;
}
footer nav ul li a {
	text-decoration: none;
	color: #ccc;
	display: block;
}
footer nav ul li:hover a {
	color: #fff;
}
footer .copyright {
	color: #ccc;
	width: 50%;
	display: inline-block;
}
.mobile footer .copyright {
	width: 100%;
	margin-top: 50px;
}
footer .copyright p {
	margin: 0;
	line-height: 40px;
	text-align: right;
}
.mobile footer .copyright p {
	text-align: center;
}
footer .wrapper:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}


/* Inputs and textareas */
input,
textarea {
	-webkit-appearance: none;
	height: 52px;
	padding: 4px 8px;
	border: 1px solid #fff;
	color: #1e1e1e !important;
	font-size: 16px;
	margin: 0;
	outline: none;
	background: rgba(255,255,255,0.8);
    border-radius: 3px;
    box-sizing: border-box;
	vertical-align: top;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #333;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #333;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #333;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #333;
}
:focus::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ccc;
}
:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
}
:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ccc;
}
textarea {
	padding: 8px;
}
/* SELECTS */

.select {
	position: relative;
}
.select:before {
	right: 10px;
	content: '';
	position: absolute;
	bottom: 50%;
	margin-bottom: -2.5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid rgba(26,26,26,0.9);
}
.select input {
	padding-right: 25px;
	width: 100%;
}
.select.show_arrow:after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid rgba(26,26,26,0.9);
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -10px;
}
.select > ul {
	position: absolute;
	margin: 0;
	padding: 5px 0;
	list-style: none;
	display: none;
	max-height: 200px;
	overflow: auto;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
	background-color: rgba(26,26,26,0.9);
	width: 100%;
	top: 100%;
	margin-top: 10px;
	z-index: 2100;
}
.select ul li {
	position: relative;
	color: #fff;
	cursor: pointer;
	overflow: hidden;
}
.select ul li.disabled {
	cursor: default;
}
.select ul li.search p {
	cursor: default;
	height: auto;
	padding: 4px 8px;
}
.select ul li.search p input {
	height: 30px;
	min-width: auto;
	width: 100%;
}
.select ul li p {
	margin: 0;
	padding: 0 8px;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.select ul li.disabled p {
	color: #CCC;
}
.select > ul > li:hover {
	background-color: #00d29d;
}
.select > ul > li.disabled:hover,
.select > ul > li.search:hover {
	background-color: inherit;
}
.select > ul > li > ul {
	padding: 0;
	margin: 0;
	max-height: 0;
	list-style: none;
	transition: all 0.3s 0.5s;
	-moz-transition: all 0.3s 0.5s;
	-webkit-transition: all 0.3s 0.5s;
	-o-transition: all 0.3s 0.5s;
}
.select > ul > li > ul > li {
	padding-left: 8px;
	line-height: 30px;
	color: #ccc;
}
.select > ul > li > ul > li:hover {
	color: #fff;
}
.select > ul > li:hover > ul {
	max-height: 800px;
	padding: 10px 0;
}
aside {
	z-index: 600;
	position: fixed;
	right: -300px;
	top: 0;
	width: 300px;
	height: 100%;
	display: none;
	background: #555;
}
.desktop.signed_in aside {
	right: 0 !important;
	display: block !important;
}
aside nav {
	height: 100%;
	position: relative;
	margin: 0;
}
aside nav > a {
	display: block;
	position: relative;
	z-index: 100;
}
aside nav .nav_container {
	position: absolute;
	top: 0;
	padding: 100px 0 90px 0;
	width: 100%;
	height: 100%;
}
aside nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: auto;
	height: 100%;
}
aside nav ul.show {
	display: block;
}
aside nav ul li {
	line-height: 50px;
}
aside nav ul li.active {
}
aside nav ul li.active a {
	cursor: default;
	color: #00d29d;
}
aside nav ul li a {
	margin: 0 20px;
	display: block;
	border-top: 1px solid #444;
	text-decoration: none;
	padding: 10px 0;
	color: #eee;
}
aside nav ul li a .title {
	display: inline-block;
	line-height: 50px;
	vertical-align: top;
	padding-left: 10px;
	font-size: 20px;
}
aside nav ul li:first-child a {
	border-top: none;
}
aside nav .container {
	padding: 20px;
	position: absolute;
	bottom: 0;
	width: 100%;
}
aside nav .container .button {
	width: 100%;
}
section > .wrapper:first-child {
	padding: 90px 10px 40px 10px;
}
section .heading:first-child {
	padding-top: 70px;
}
.mobile section .heading:first-child {
	padding-top: 80px;
}
.desktop.signed_in section .heading:first-child {
	padding-top: 0;
}
section > .wrapper {
	padding: 20px;
}
.mobile section > .wrapper {
	padding: 10px;
}
section:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
/* Signin box */
.modal {
	top: 0;
	position: fixed;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
	transition: all 0.3s;
}
.modal.show {
	visibility: visible;
	opacity: 1;
}
.modal .container {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal .box {
	width: 460px;
	padding: 20px;
	position: absolute;
	background: #eee;
	-moz-box-shadow: 0 0 20px #000;
	-webkit-box-shadow: 0 0 20px #000;
	box-shadow: 0 0 20px #000;
	background-color: #777;
	color: #fff;
	z-index: 500;
	border: 3px solid #fff;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
	max-height: 90%;
	overflow: auto;
}
.desktop .modal .box {
	width: 600px;
}
.mobile .modal .box {
	width: 100%;
}
#signin .social {
	margin-top: 10px;
}
#signin .facebook,
#signin .google {
	width: calc(50% - 10px);
	float: left;
}
#signin .facebook {
	margin: 0 10px 0 0;
}
#signin .google {
	margin: 0 0 0 10px;
}
.modal .followingBallsG {
	background-color: #fff;
}
.modal h2 {
	margin: 0;
	padding: 0;
	line-height: 26px;
	font-size: 26px;
}
.modal p {
	margin: 0;
	padding: 3px 0;
}
.modal .fr-view .small {
	font-size: 0.8em;
}
.modal .fr-view ul {
	margin: 20px 0;
}
.modal .moderate {
	font-size: 16px;
	line-height: 24px;
	width: calc(100% + 40px);
	position: relative;
	left: -20px;
	top: -20px;
	padding: 20px;
	background: rgba(0,0,0,0.5);
	color: #fff;
}
.modal .info span {
	margin-right: 10px;
}
.modal a:not(.button, .web_icon) {
	color: #fc5c63;
}
.modal .pack {
	padding-top: 20px;
}
.modal .pack > *:first-child {
	margin-top: 0;
}
.modal .box > .close {
	position: absolute;
	right: 20px;
	top: 20px;
	text-decoration: underline;
	display: block;
	margin-bottom: 20px;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	font-size: 30px;
}
.modal a {
	color: #fff;
}
.modal button {
	width: 100%;
	position: relative;
	margin-top: 10px;
}
.modal button .icon {
	position: absolute;
	top: 5px;
	right: 5px;
	background-image: url(login.svg);
	background-size: 20px;
	background-position: center;
	width: 20px;
	height: 20px;
	display: block;
}
.modal .box input {
	width: 100%;
}
.modal .center {
	font-size: 16px;
	line-height: 24px;
	width: calc(100% + 40px);
	position: relative;
	left: -20px;
	bottom: -20px;
	padding: 20px;
	background: rgba(0,0,0,0.5);
	color: #fff;
}

/* Slide navi */
.slide_navi {
	height: 40px;
	overflow: hidden;
	position: relative;
	bottom: 0;
}
.mobile .slide_navi {
	bottom: 0;
}
.slide_navi > ul {
	position: absolute;
	min-width: 100%;
}
.slide_navi .user_navi {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slide_navi .user_navi li {
	display: inline-block;
	float: left;
}
.slide_navi .user_navi li a {
	display: block;
	line-height: 40px;
	padding: 0 20px;
	
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.slide_navi .user_navi li a span {
	padding-right: 10px;
}
.slide_navi .user_navi li.active a {
	background: #eee;
	color: #1a1a1a;
}
/* Forms */
.form {
	margin: 0 -10px;
	padding: 0;
	list-style: none;
	width: calc(100% + 20px);
}
.form:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.form > li {
	position: relative;
	margin-bottom: 10px;
	float: left;
	width: 100%;
	padding: 0 10px;
}
.form > li.medium {
	width: 50%;
}
.form > li label {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	left: 0;
	vertical-align: top;
	font-size: 16px;
}
.mobile .form > li label {
	width: 100%;
	line-height: 20px;
	height: 20px;
	position: relative;
}
.form > li .field input {
	width: 100%;
	height: 40px;
	min-width: auto;
}
.form > li.calc_net .field input {
	width: calc(50% - 10px);
}
.form > li.calc_net .field .mini_btn {
	margin-left: 10px;
}
.form > li.calc_net .field .mini_btn + input {
	width: calc(50% - 50px);
	margin-left: 10px;
}
.form > li .field .file_select {
	width: 100%;
	height: 100px;
	line-height: 90px;
}
.form > li .field .file_select.highlight {
	background: rgba(0,210,157,0.5);
}
.form > li .field textarea {
	width: 100%;
	height: 150px;
}
.form > li .field .file_select input {
	height: 100%;
}
.form > li .field .upload_progress {
	top: 0;
	left: 0;
	z-index: -1;
}
.form > li .field .file_preview {
	min-height: 200px;
	border: 1px solid #fff;
}
.form > li .field .file_preview embed {
	width: 100%;
	height: 400px;
}
.form > li .field .file_preview img {
	width: 100%;
}
.form > li .field > .checkbox {
	margin-top: 10px;
}
/* Stehen zwei Haekchen untereinander, addieren sich der Abstand der Zeile und
   der des Feldes zu 20px. Das ist fuer eine zusammengehoerige Gruppe zu viel,
   die Haelfte reicht. */
.form > li.checkbox_row + li.checkbox_row {
	margin-top: -10px;
}
.form > li .field .checkboxes {
	max-height: 240px;
	overflow: auto;
	border: 1px solid #fff;
}
.form > li .field .checkboxes ul {
	margin: 0;
	padding: 20px;
	list-style: none;
}
.form > li .field .checkboxes ul li {
	position: relative;
}
.form > li .field .checkboxes ul li span {
	display: inline-block;
	vertical-align: top;
}
.form > li .field .checkboxes ul li span.num {
	width: 40px;
}
.form > li .field .checkboxes ul li span.name {
	width: calc(100% - 140px);
	overflow: hidden;
	text-overflow: ellipsis;
}
.form > li .field .checkboxes ul li span.total {
	width: 100px;
	text-align: right;
}
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label {
	position: relative;
	vertical-align: bottom;
	line-height: 26px;
	cursor: pointer;
	white-space: nowrap;
	height: 26px;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 30px;
	font-size: 17px;
}
input[type="checkbox"] + label:before {
	content: '';
	border: 1px solid #333;
	position: absolute;
	width: 16px;
	display: inline-block;
	height: 16px;
	top: 50%;
	left: 0;
	margin-top: -8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
}
input[type="checkbox"]:checked + label:after {
	content: '';
	background: #333;
	position: absolute;
	left: 2px;
	top: 50%;
	margin-top: -6px;
	width: 12px;
	display: block;
	height: 12px;
}
.form > li .field .checkboxes ul input[type="checkbox"] + label:before {
	border: 1px solid #fff;
	background: none;
}
.form > li .field .checkboxes ul input[type="checkbox"]:checked + label:after {
	background: #fff;
}
/* Tabs */
.tabs .nav {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #fff;
}
.tabs .nav li {
	display: inline-block;
	padding: 5px 10px;
	margin-right: 10px;
	cursor: pointer;
}
.tabs .nav li.active {
	background: #fff;
	color: #333;
}
.tabs .contents {
	margin-top: 40px;
}
.tabs .contents > div {
	display: none;
}
.tabs .contents > div.active {
	display: block;
}
/* Pinbox */
.pin_box {
	padding: 20px;
	background: rgba(119,119,119,0.8);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC777777,endColorstr=#CC777777);
	border: 2px solid #fff;
}
.pin_box p {
	color: #fff;
}
.pin_box input {
	width: 100%;
}
/* Buttons */
button,
.button {
	display:inline-block;
	text-decoration: none;
	text-align: center !important;
	white-space: nowrap;
	cursor: pointer;
	line-height: 20px;
	font-size: 18px;
	height: 50px;
	line-height: 40px;
	color: #fff;
	border: none;
	vertical-align: top;
	padding: 5px 15px;
    border-radius: 3px;
	margin: 0;
	outline: none;
	background: linear-gradient(to bottom,  #00d29d 0%, #00a99d 100%);
}
.button + .button {
	margin-left: 10px;
}
button:hover,
.button:hover {
	background: linear-gradient(to bottom,  #00a99d 0%, #00d29d 100%);
	color: #333;
	text-decoration: none;
}
button .fa,
.button .fa,
button .entypo,
.button .entypo {
	margin-right: 15px;
}
.good {
	color: #333 !important;
	background: rgb(210,255,82); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
}
.good:hover {
	background: rgb(145,232,66); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(145,232,66,1) 0%, rgba(210,255,82,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(145,232,66,1) 0%,rgba(210,255,82,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(145,232,66,1) 0%,rgba(210,255,82,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91e842', endColorstr='#d2ff52',GradientType=0 ); /* IE6-9 */
}
.bad {
	color: #fff;
	background: rgb(255,48,25); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
.bad:hover {
	background: rgb(207,4,4); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(207,4,4,1) 0%, rgba(255,48,25,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0404', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */
}
.view_switcher {
	font-size: 0;
	float: right;

	.button {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		color: #1a1a1a;
		background: rgba(255,255,255,0.5);
	}
	.button.active {
		background: #00d29d;
	}
	.button + .button {
		margin-left: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}
}

.mini_btn {
	width: 40px;
	height: 40px;
	background: #00d29d;
	color: #fff;
	display: inline-block;
	line-height: 40px;
	text-align: center;
}
.mini_btn:hover,
.active .mini_btn {
	text-decoration: none;
	background: #00a99d;
	color: #fff;
}
.signin {
	margin: 5px;
}
.signin.facebook {
	background: #627AAD;
}
.signin.google {
	background: #DD4B39;
}
.browser_nav {
	position: fixed;
	z-index: 1000;
	bottom: -40px;
	height: 40px;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
}
.browser_nav.view_always {
	bottom: 0 !important;
	opacity: 1 !important;
}
.browser_nav a {
	color: #fc5c63;
	z-index: 1000;
	cursor: pointer;
	
	width: 40px;
	height: 40px;
	display: inline-block;
}
.browser_nav a:before {
	font-family: 'entypo', sans-serif;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	display: block;
}
.browser_nav a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(0,0,0,0.8);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
}
#scroll_top_button {
	position: absolute;
	right: 10px;
}
#scroll_top_button:before {
	content: '\E767';
}
#go_prev:before {
	content: '\E765';
}
#go_next:before {
	content: '\E766';
}

#quit {
	display: inline-block;
	float: right;
}

section .waiter {
	padding-top: 140px;
}
#signin .spinner > div {
	background-color: #fff;
}
.waiter {
	width: 50px;
	margin: 0 auto;
	padding: 40px 0;
	position: relative;
	z-index: 500;
}
.page > .waiter {
	position: fixed;
	z-index: 600;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(26,26,26,0.8);
}
.page > .waiter .spinner {
	width: 50px;
	height: 50px;
	text-align: center;
	font-size: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -25px;
}

.spinner > div {
	background-color: #00d29d;
	height: 100%;
	width: 6px;
	display: inline-block;
	margin: 2px;
	-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
	0%, 40%, 100% { 
	  transform: scaleY(0.4);
	  -webkit-transform: scaleY(0.4);
	}  20% { 
	  transform: scaleY(1.0);
	  -webkit-transform: scaleY(1.0);
	}
}
section .sharing {
	padding: 40px 0;
	background-color: #333;
}
.sharing .icons {
	text-align: center;
}
.sharing .web_icon {
	display: inline-block;
	margin: 10px;
}
/* Register */
#error_msg {
	margin-top: 0;
	text-align: center;
	background-color: #00d29d;
	color: #fff;
	padding: 10px;
}
/* data forms */
.data {
	padding: 0;
	margin: 20px 0 0 0;
	border: none;
	text-align: left;
	background-color: #eee;
	border: 1px solid #ccc;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.data label {
	display: inline-block;
	width: 50%;
	float: left;
	line-height: 40px;
}
.mobile .data label {
	width: 100%;
	float: none;
}
.data .select,
.data input,
.data textarea,
.data .no-image,
.data label + * {
	width: 50%;
	float: right;
}
.mobile .data .select,
.mobile .data input,
.mobile .data textarea,
.mobile .data label + *  {
	width: 100%;
	float: none;
}
.data textarea {
	min-height: 120px;
}
.data .select input {
	width: 100%;
}
.data > ul {
	list-style: none;
	margin: 0;
	padding: 20px;
	width: 50%;
	display: inline-block;
	float: left;
}
.data > .options {
	text-align: center;
	padding: 20px;
	background: rgba(255,255,255,0.9);
}
.data h2,
.data h3,
.data p {
	margin: 0;
}
.mobile .data > ul {
	width: 100%;
}
.data > ul > li {
	margin-bottom: 20px;
}
.data > ul > li:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.data > ul > li .upload {
	background: rgba(255,255,255,0.5);
	border: 1px solid #1a1a1a;
	cursor: pointer;
	text-align: center;
	line-height: 40px;
	position: relative;

	input {
		width: 100%;
	}
}
.data > ul > li .preview {
	min-height: 400px;
}
.data > ul > li .preview[src=""] {
	display: none;
}
.data > ul > li .preview + .no-image {
	border: 1px solid #1a1a1a;
	line-height: 30px;
	padding: 5px 10px;
	text-align: center;
	display: none
}
.data > ul > li .preview[src=""] + .no-image {
	display: block;
}
.data > ul > li .mail_logo_container {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.data > ul > li .mail_logo_container img {
	max-width: 80%;
	max-height: 200px;
	object-fit: contain;
	object-position: center;
}
.upload_progress {
	position: absolute;
	width: 100%;
	height: 100%;
}
.upload_bar {
	background: #1a1a1a;
	height: 100%;
	position: absolute;
}


body[data-page^="/search"] header:after {
	content: "";
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #fff;
	position: absolute;
	left: 50%;
	margin-left: -15px;
	bottom: -15px;
}
body[data-page^="/search"] header .logo .app_text {
	background-image: url('app_text_black.png');
}
/* Marketing CSS */
.padding {
	padding: 20px 0;
}
.fullscreen {
	width: 100%;
	height: 100vh;
	
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
.fullscreen .wrapper {
	height: 100%;
	position: relative;
}
.fullscreen .wrapper .ontext {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px 20px 40px 20px;
	color: #fff;
	text-shadow: 0 0 3px #1a1a1a, 0 0 3px #1a1a1a;
}
.fullscreen .wrapper .ontext h3 {
	margin: 0;
}

/* Forgot */
#forgotten_email {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}
.mobile #forgot {
	margin-top: 20px;
}
/* list legend */
.list-legend {
	margin-top: 20px;
	border-bottom: 1px solid #1a1a1a;
	font-weight: 600;
	border-left: 5px solid transparent;
}
.list-legend:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.mobile .list-legend {
	display: none;
}
.list-legend p a {

	&.active {
		color: #00d29d;
		position: relative;

		&[href*="desc"] {
			&:after {
				border-top: none;
				border-bottom: 5px solid #00d29d;
			}
		}

		&:after {
			content: "";
			position: relative;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 5px solid #00d29d;
			margin-bottom: 5px;
			margin-left: 5px;
			display: inline-block;
		}
	}
}
/* list view */
.scrollable {
	outline: none;
	width: 100%;
}
.mobile .scrollable {
	margin-top: 10px;
}
.list-view {
	min-height: 360px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.desktop .list-view {
	min-height: auto;
}
.list-view > li {
	cursor: default;
	display: block;
	width: 100%;
	position: relative;
	border-top: 1px solid #eee;
	border-left: 5px solid #fff;
}
.list-view li[data-type='service'],
.list-view li[data-type='archive'] {
	border-left: 5px solid #76D785;
}
.list-view li[data-type='estimation'] {
	border-left: 5px solid #8AA2DB;
}
.list-view li[data-type='material'] {
	border-left: 5px solid #E48A8C;
}
.list-view li[data-type='credit'],
.list-view li[data-type='active'] {
	border-left: 5px solid #DBB878;
}
.list-view.estimates li[data-type='won'] {
	border-left: 5px solid #76D785;
}
.list-view.estimates li[data-type='lost'] {
	border-left: 5px solid #E48A8C;
}
.list-view.estimates li[data-type='valid'] {
	border-left: 5px solid #DBB878;
}
.list-view.estimates li[data-type='expired'] {
	border-left: 5px solid #C4C8CC;
}
/* Der bereits gesetzte Ausgang bleibt im Menü des Angebots markiert. */
.list-view.estimates li .options .mini_btn.is-set,
.list-view.estimates li .options .mini_btn.is-set:hover {
	background: #1a1a1a;
}
.list-view.bank-receipts li[data-type='credit'] {
	border-left: 5px solid #76D785;
}
.list-view.bank-receipts li[data-type='credit'] p[data-id='amount'] {
	color: #76D785;
}
.list-view.bank-receipts li[data-type='debit'] {
	border-left: 5px solid #E48A8C;
}
.list-view.bank-receipts li[data-type='debit'] p[data-id='amount'] {
	color: #E48A8C;
}
.list-view.bank-receipts li.has-receipt:before {
	content: "\2713" !important;
	display: block;
	font-family: 'entypo', sans-serif;
	position: absolute;
	right: 10px;
	top: 0;
	padding: 5px;
}
.list-view.bank-receipts li.has-receipt.in-datev:before {
	content: "\e711" !important;
}
.list-view > li:first-child {
	border-top: none;
}
.list-view > li:nth-child(even) {
	background: rgba(255,255,255,0.5);
}
.list-view li.force_hide {
	display: none !important;
}
.list-view > li:hover {
	background: #eee;
}
.list-view > li:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.list-view > li > [data-id],
.list-legend p {
	display: none;
	margin: 0;
	width: 25%;
	padding: 5px 10px;
	line-height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	float: left;
	height: 40px;
	white-space: nowrap;
}
.list-view > li[data-canceled='yes'] > [data-id] {
	text-decoration: line-through;
}
.list-view.expand li p {
	height: auto;
	text-overflow: clip;
	white-space: normal;
}
.list-view.efforts-archive li p,
.list-view.efforts li > [data-id],
.list-view.hbcis li p,
.list-legend.for-efforts p,
.list-legend.for-hbcis p {
	width: 20%;
}
.list-view li > .visible,
.list-legend p.visible {
	display: inline-block;
}
.list-view li p[data-id='sum'],
.list-view li p[data-id='amount'],
.list-view li p[data-id='cost'],
.list-view li p[data-id='total'],
.list-legend p[data-id='sum'],
.list-legend p[data-id='amount'],
.list-legend p[data-id='cost'],
.list-legend p[data-id='total'],
.list-legend p[data-id='receipt'] {
	text-align: right;
}
.list-view.efforts li > div[data-id] > * {
	margin: 0;
}
p[data-id='bank_pin'] {
	-webkit-text-security: disc;
}
.list-view li [data-id].big,
.list-legend p.big {
	width: 50%;
}
.list-view li [data-id].mini,
.list-legend p.mini {
	width: 5%;
}
.list-view li [data-id].small,
.list-legend p.small {
	width: 10%;
}
.list-view li [data-id].medium,
.list-legend p.medium {
	width: 15%;
}
.list-view li [data-id].large,
.list-legend p.large {
	width: 40%;
}
.mobile .list-view li [data-id]:not(.show_mobile),
.mobile .list-legend p:not(.show_mobile) {
	display: none;
}
.mobile .list-view li [data-id].show_mobile,
.mobile .list-legend p.show_mobile {
	width: 50%;
}
/* Multi-select checkbox column */
.list-view > li > p[data-id='select'],
.list-legend p[data-id='select'] {
	text-align: center;
}
.multi-select + label {
	width: 16px;
	height: 16px;
	line-height: 16px;
	padding-left: 0;
	display: inline-block;
	vertical-align: middle;
}
.list-view > li.multi-selected {
	background: rgba(0,210,157,0.12);
}
.list-view li .visible .highlight {
	background: #FF0;
}
.list-view li p .done {
	width: 100%;
	height: 100%;
	position: relative;
	border: 1px solid #1a1a1a;
	display: block;
	text-align: center;
	font-size: 14px;
}
.list-view li p .grace {
	width: 100%;
	height: 100%;
	position: relative;
	border: 1px solid #1a1a1a;
	background: rgba(26,26,26,0.5);
	display: block;
}
.list-view li p .days {
	width: 100%;
	height: 100%;
	text-align: center;
	display: block;
	line-height: 28px;
	font-size: 14px;
	z-index: 100;
	position: relative;
	color: #fff;
	text-shadow: 0 0 3px #1a1a1a;
}
.list-view li p .grace .indicator {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	display: inline-block;
	background: #1a1a1a;
}
.list-view li:hover a {
	color: #fff;
}
.list-view li .options {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 160;
}
.list-view li .options .hidden_menu {
	position: absolute;
	z-index: 100;
	display: none;
}
.list-view li .options ul.hidden_menu {
	list-style: none;
	background: #00d29d;
	padding: 10px;
}
.list-view li:nth-last-child(-n+7) .options .hidden_menu {
	top: auto;
	bottom: 100%;
}
.list-view li:nth-child(-n+7) .options .hidden_menu {
	top: 100%;
	bottom: auto;
}
.list-view li .options:hover .hidden_menu {
	display: block;
}
.list-view li .options:hover ul.hidden_menu {
	right:  0;
}
.list-view li .options ul.hidden_menu .mini_btn {
	display: block;
	width: auto;
	text-align: left;
	white-space: nowrap;
}
.list-view li .options ul.hidden_menu .mini_btn span {
	width: 40px;
	height: 40px;
	display: inline-block;
	text-align: center;
}
.list-view li .options ul.hidden_menu .mini_btn:after {
	content: attr(title);
	display: inline-block;
	padding: 0 10px;
}
.bills li.in-datev:before {
	content: "\e711" !important;
	display: block;
	font-family: 'entypo', sans-serif;
	position: absolute;
	right: 10px;
	top: 0;
	padding: 5px;
}
.bills li[data-type='archive'] p[data-id='date_archived'] {
	display: inline-block;
}
.mobile .bills li[data-type='archive'] p[data-id='date_archived'] {
	display: none;
}
.bills li[data-type='archive'] p[data-id='days_left'] {
	display: none;
}
.bills li p[data-id='total'] {
	padding-right: 50px;
}
.bills li .bank_match {
	position: absolute;
	right: 0;
	z-index: 150;
}
.bills li.in-datev .bank_match {
	display: none;
}
.bills li .bank_match .entypo-alert {
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}
.bills li .bank_match:hover .entypo-alert {
	background: #00d29d;
	color: #fff;
}
.bills li .bank_match ul {
	position: absolute;
	display: none;
	right: 0;
	background: #00d29d;
	color: #fff;
	list-style: none;
	margin: 0;
	padding: 20px;
	min-width: 300px;
}
.mobile .bills li .bank_match ul {
	position: absolute;
	display: none;
	right: 0;
	background: #00d29d;
	color: #fff;
	list-style: none;
	margin: 0;
	padding: 20px;
	min-width: 200px;
}
.bills li .bank_match:hover ul {
	display: block;
}
.bills li .bank_match ul li {
	font-size: 12px;
	line-height: 20px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #fff;
	position: relative;
}
.bills li .bank_match ul li span {
	display: inline-block;
}
.bills li .bank_match ul li .label {
	position: absolute;
	width: 100px;
}
.bills li .bank_match ul li .value {
	padding-left: 120px;
}
.bills li .bank_match ul li:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.datev-progress {
	margin: 20px 0 10px 0;
}
.datev-progress .bar {
	width: 100%;
	height: 16px;
	background: #eee;
	border-radius: 8px;
	overflow: hidden;
}
.datev-progress .bar span {
	display: block;
	height: 100%;
	width: 0;
	background: #00d29d;
	transition: width 0.3s ease;
}
.datev-progress .status {
	margin-top: 8px;
	text-align: center;
}

/* list filter */
.list-filter > * {
	display: inline-block;
	vertical-align: top;
	margin-top: 20px;
}
.list-filter:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.list-filter .checkboxes {
	background: rgba(255,255,255,0.8);
    border-radius: 3px;
    position: relative;
}
.mobile .list-filter .checkboxes {
	margin-left: 0;
}
.list-filter .checkboxes .selected:before {
	right: 10px;
	content: '';
	position: absolute;
	bottom: 50%;
	margin-bottom: -2.5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid rgba(26,26,26,0.9);
}
.list-filter .checkboxes .selected {
	margin: 0;
	line-height: 32px;
	height: 52px;
	padding: 10px;
    padding-right: 30px;
    min-width: 200px;
    max-width: 400px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list-filter .checkboxes ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	visibility: hidden;
	overflow: auto;
	max-height: 0;
	transition: all 0.3s;
	position: absolute;
	z-index: 100;
	background: #fff;
	width: 100%;
}
.list-filter .checkboxes:hover ul {
	visibility: visible;
	max-height: 500px;
}
.list-filter .checkboxes ul li.search input {
	border: 1px solid #1e1e1e;
	margin-bottom: 10px;
	width: 100%;
}
.list-filter .checkboxes ul li.reset a {
	font-size: 17px;
	padding-left: 30px;
	border-bottom: 1px solid #1e1e1e;
	display: block;
	position: relative;
}
.list-filter .checkboxes ul li.reset a:before {
	content: "\274e";
	font-family: 'entypo', sans-serif;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 20px;
}
.mobile .list-filter > * {
	width: calc(50% - 10px);
	margin-top: 10px;
}
.list-filter label {
	display: inline-block;
	line-height: 50px;
	padding: 0 10px;
}
.list-filter .select {
	display: inline-block;
	vertical-align: top;
}
.mobile .list-filter .select {
	width: 100%;
}
#project_filter,
#month_filter,
#year_filter,
#effort_year_filter {
	float: right;
}
#year_filter,
#effort_year_filter {
	margin-right: 10px;
}
.mobile #month_filter,
.mobile #year_filter {
	float: left;
}
.mobile #month_filter {
	margin: 10px 10px 0 0;
	width: 25%;
}
.mobile #year_filter {
	margin: 10px 0 0 0;
	width: calc(25% - 10px);
}
#more_filter .checkboxes {
	padding: 10px 20px;
}
#more_filter .checkboxes label {
	width: auto;
}
.search_filter {
	width: 200px;
	margin-right: 20px;
}
.mobile .search_filter {
	margin: 10px 10px 0 0;
	float: left;
}
.desktop .search_filter:focus {
	width: 40%;
	transition: width 0.3s 0.5s;
	-moz-transition: width 0.3s 0.5s;
	-webkit-transition: width 0.3s 0.5s;
	-o-transition: width 0.3s 0.5s;
}

/* list overview */
.list-overview {
	margin-top: 10px;
	border-top: 1px solid #1a1a1a;
}
.list-overview .sum {
	padding: 10px;
	float: right;
	text-align: right;
	margin: 5px 0 0 0;
	border-top: 1px solid #1a1a1a;
	position: relative;
	right: 0;
}
[data-page="/bills"] .list-overview .sum {
	padding: 10px 50px 10px 10px;
}
.list-overview:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
/* list controls */
.list-controls {
	margin-top: 10px;
}
.list-controls > .datev-send-multiple {
	float: right;
}
.mobile .list-controls > .datev-send-multiple {
	float: none;
}
.mobile .list-controls .button {
	width: 100%;
	margin: 10px 0 0 0;
}
/* Kanban */
.kanban {
	margin: 20px 0;
	display: flex;
	gap: 20px;

	.col {
		overflow: visible;
		max-height: none;
		flex: 1;
		min-width: 0;
		width: 0;
	}

	.layer {
		background: rgba(255,255,255,0.5);
		border-radius: 3px;
		padding: 20px;
		position: relative;

		.title {
			font-size: 20px;
			font-weight: 600;
			margin: 0 0 20px 0;
		}
	}

	.cards {
		height: calc(100vh - 200px);
		overflow-y: auto;
		list-style: none;
		margin: 0;
		padding: 0;
		min-height: 400px;

		&::-webkit-scrollbar {
			display: none;
		}

		> li {
			padding-bottom: 10px;
		}

		.ui-sortable-placeholder {

			position: relative;

			&:after {
				content: "";
				border: 1px dashed #fff;
				border-radius: 8px;
				position: absolute;
				width: 100%;
				height: calc(100% ~'-' 20px);
			}
		}

		.card {
			background: #fff;
			border: none;
			border-radius: 3px;
			padding: 20px;
			position: relative;
			border-top: 8px solid #00d29d;
			overflow: visible;
			cursor: move;
			margin: 0;
			
			.title {
				font-size: 16px;
				margin: 0;
			}
		}
	}
}
/* Dashboard */
.double,
.triple {
	margin: 0;
	padding: 0;
	list-style: none;
	width: calc(100% + 40px);
	position: relative;
	left: -20px;
}
.mobile .double,
.mobile .triple {
	width: 100%;
	left: 0;
}
.double > li,
.triple > li {
	float: left;
	display: inline-block;
	padding: 0 20px;
}
.double > li {
	width: 50%;
}
.triple > li {
	width: 33.33%;
}
.tablet .triple > li {
	width: 50%;
}
/* Angebotskennzahlen und Umsatzverlauf teilen sich eine Zeile im Verhältnis
   ein Drittel zu zwei Dritteln. Nebeneinander lohnt sich das nur, solange
   genug Breite da ist, darunter stehen beide Karten voll.

   Die Zeile ist ein Flex-Verbund, damit beide Karten gleich hoch bleiben.
   Das Diagramm gibt seine Höhe nicht mehr über das Seitenverhältnis der
   Zeichenfläche vor, sondern füllt, was die Kennzahlen daneben vorgeben. */
.triple.uneven {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.triple.uneven > li {
	float: none;
	display: flex;
	flex-direction: column;
}
.triple.uneven > li:first-child {
	width: 33.33%;
}
.triple.uneven > li:last-child {
	width: 66.66%;
}
.tablet .triple.uneven > li,
.mobile .triple.uneven > li {
	width: 100%;
}
.triple.uneven > li > .card {
	flex: 1;
	display: flex;
	flex-direction: column;
}
/* Untereinander gibt die Zeile keine Höhe mehr vor, deshalb der Mindestwert. */
.triple.uneven > li > .card > .chart {
	flex: 1;
	position: relative;
	min-height: 250px;
}
.mobile .double > li,
.mobile .triple > li {
	width: 100%;
	padding: 0;
}
.double:after,
.triple:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.key_facts {
	margin: 0;
	padding: 0;
	list-style: none;
}
.key_facts li {
	border-top: 1px solid #1a1a1a;
}
.key_facts li:first-child {
	border-top: none;
}
.key_facts li:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.key_facts li p {
	display: inline-block;
	line-height: 30px;
	padding: 10px 0;
	margin: 0;
	vertical-align: top;
	float: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.key_facts li p.label {
	width: 60%;
}
.key_facts li p.value {
	font-weight: 600;
	text-align: right;
	width: 40%;
}
/* Die Angebotskennzahlen tragen den Zeitraum in der Beschriftung, brauchen
   dort also mehr Platz. Die Werte daneben sind nur ein oder zwei Zahlen. */
.card.estimate-facts .key_facts li p.label {
	width: 75%;
}
.card.estimate-facts .key_facts li p.value {
	width: 25%;
}
.card {
	background: #fff;
	padding: 20px;
	margin: 20px 0;
}
.card.text-based {
	min-height: 415px;
}
.card h2,
.card h3 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: center;
	background: #00d29d;
	color: #fff;
	margin: -20px -20px 20px -20px;
	padding: 20px;
	line-height: 30px;
}


/* RETINA DISPLAY SUPPORT */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {

}

@media (prefers-color-scheme: dark) {

	body {
		color: #fff;
	}
	aside {
		background: rgba(0,0,0,0.5);
	}
	.page header.shrink {
		background: rgba(51,51,51,0.8);
	}
	.page section {
		background: #333;
	}
	.slide_navi .user_navi li.active a {
		background: #333;
		color: #fff;
	}
	.list-view > li:nth-child(even) {
		background: rgba(51,51,51,0.5);
	}
	.list-view > li {
		border-top: 1px solid #000;
	}
	.list-view > li:hover {
		background: #000;
	}
	.list-view li p .grace {
		border: 1px solid #eee;
		background: rgba(150,150,150,0.5);
	}
	.card {
		background: #000;
	}

	.data {
		background-color: #333;
		border: 1px solid #000;
	}
	.data > .options {
		background-color: #000;
	}
	input,
	textarea {
		background: rgba(51,51,51,0.8);
		border: 1px solid #000;
		color: #fff !important;
		font-size: 16px;
	}
	input[type="checkbox"] + label:before {
		border: 1px solid #fff;
		background: #333;
	}
	input[type="checkbox"]:checked + label:after {
		background: #fff;
	}
	button,
	.button {
		background: transparent;
		border: 1px solid #00d29d;
	}
	button:hover,
	.button:hover {
		background: rgba(0,210,157,0.5);
		color: #fff;
	}
	.good {
		color: #fff !important;
		border: 1px solid #d2ff52;
	}
	.good:hover {
		background: rgba(145,232,66,0.5);
	}
	.bad {
		color: #fff;
		border: 1px solid #ff3019;
	}
	.bad:hover {
		background: rgba(207,4,4,0.5);
	}

	.list-filter .checkboxes {
		background: rgba(51,51,51,0.8);
		border: 1px solid #000;
	}
	.list-filter .checkboxes ul {
		background: rgba(26,26,26,0.9);
	}
	.list-filter .checkboxes ul li.reset a {
		color: #00d29d;
	}

	::-webkit-input-placeholder { /* WebKit browsers */
	    color:    #eee;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	    color:    #eee;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	    color:    #eee;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
	    color:    #eee;
	}
	:focus::-webkit-input-placeholder { /* WebKit browsers */
	    color:    #ddd;
	}
	:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	    color:    #ddd;
	}
	:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
	    color:    #ddd;
	}
	:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
	    color:    #ddd;
	}
	.page footer {
		border-top: 1px solid #000;
	}
}


/* PRINT */
@media print {
	
	body,
	.list-view li p,
	.list-legend p {
		font-size: 15px;
	}
	.list-view li p,
	.list-legend p {
		padding: 5px 5px 5px 0;
	}
	.heading .wrapper h2 {
		line-height: 32px;
		font-size: 26px;
		margin-bottom: 20px;
	}
	
	footer,
	aside,
	.slide_navi .user_navi li:not(.active),
	.list-controls,
	.jspVerticalBar {
		display: none;
	}
	.desktop.signed_in aside {
		display: none !important;
	}
	body.desktop.signed_in .page {
		margin-right: 0;
	}
	.list-legend,
	.scrollable,
	.jspPane,
	.list-view {
		width: 100% !important;
	}
	.slide_navi .user_navi li.active a {
		padding: 0;
	}
	.scrollable {
		height: auto !important;
	}
	.jspPane {
		position: static;
	}
	.list-legend,
	.scrollable:not(.jspScrollable) .list-view {
		padding-right: 0;
	}
	.list-overview .sum {
		right: 0;
		padding: 5px 5px 5px 0;
	}
	.list-view {
		min-height: 0;
		-webkit-print-color-adjust: exact;
	}
	.list-view li {
		page-break-inside: avoid;
	}
	input[type='text'],
	input[type='password'],
	input[type='text'],
	textarea {
		border: 1px solid #000;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.heading .wrapper h2 {
		color: #000;
	}
}

/* Farblegende unter den Listen. Der Farbklecks hat genau die Masse des farbigen
   Randes am Listeneintrag: 5px breit, 40px hoch, ohne Rundung. Schrift und
   Zeilenhoehe wie in der Liste, buendig mit deren linker Kante. Sie steht unter
   den Schaltflaechen mit 20px Abstand nach oben und unten. */
.list-legend-colors {
	clear: both;
	padding: 0;
	margin: 20px 0;
	text-align: left;
}
.list-legend-colors span {
	display: block;
	height: 40px;
	line-height: 40px;
	margin: 0;
	white-space: nowrap;
}
.list-legend-colors span:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 40px;
	margin-right: 10px;
	vertical-align: top;
	background: #fff;
}
.list-legend-colors .is-won:before,
.list-legend-colors .is-paid:before {
	background: #76D785;
}
.list-legend-colors .is-lost:before {
	background: #E48A8C;
}
.list-legend-colors .is-valid:before,
.list-legend-colors .is-open:before {
	background: #DBB878;
}
.list-legend-colors .is-expired:before {
	background: #C4C8CC;
}
.list-legend-colors .is-canceled {
	text-decoration: line-through;
}
.list-legend-colors .is-canceled:before {
	background: #eee;
}

/* Angebotsliste: Suche und Filter stehen links, die Schaltflaechen oben rechts.
   Die Auswahl fuer Monat und Jahr braucht dort nur die halbe Breite. */
.list-filter.filters-left #month_filter,
.list-filter.filters-left #year_filter {
	float: none;
	width: 100px;
	margin-right: 10px;
}
.list-filter.filters-left .list-controls {
	float: right;
	margin-top: 20px;
}
.mobile .list-filter.filters-left #month_filter,
.mobile .list-filter.filters-left #year_filter {
	float: left;
}
.mobile .list-filter.filters-left .list-controls {
	float: none;
	margin-top: 10px;
}