/* START BASE ***********************************************************************************************/

/* --- Google Fonts --- */

/*
    

    */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Montserrat:400,700");
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

/* --- Components design --- */

/* ---
    @import url("components/font-awesome.min.css");
    @import url("components/avatar.css");
    @import url("components/button.css");
    @import url("components/dropdown.css");
    @import url("components/card.css");
    @import url("components/badge.css");
    @import url("components/banner.css");
    @import url("components/tabs.css");
    @import url("components/list.css");
    @import url("components/login_signup.css");
    @import url("components/nav.css");
    --- */

/* Reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	border: 0;
	font-size: 100%;
}
.animated {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	text-align: center;
}
.displayUpdate {
	position: fixed;
	width: 100%;
	height: 70px;
	top: 50;
	left: 0;
	background-color: #e44c65;
	margin-top: -50px;
	text-align: center;
	color: white;
	line-height: 70px;
	z-index: 1000000000 !important;
	display: none;
}
.displayUpdateLogin {
	position: fixed;
	width: 100%;
	height: 30px;
	background-color: #e44c65;
	text-align: center;
	color: white;
	line-height: 30px;
	display: none;
}
body {
	background-color: #fff;
	color: #ddd;
	font-family: "oxygen", "sans-serif";
	line-height: 1;
	-webkit-text-size-adjust: none;
	/* herausfinden was das genau macht */
}
h1,
h2,
h3 {
	font-family: "oxygen", "sans-serif";
}
* {
	box-sizing: border-box;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration-line: none;
	text-decoration: none;
}
a {
	-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	color: #e44c65;
	text-decoration: none;
}
a:hover {
	color: #e44c65;
	border-bottom-color: transparent;
}
.wrapper {
	margin: 0;
	padding: 0;
}
hr {
	width: 100%;
	height: 1px;
	background: #fff;
	color: black;
}
/* END BASE ***********************************************************************************************/

.bezahlt {
	transform: rotate(-14deg);
	width: 200px;
	height: 100px;
	margin-left: 100px;
	position: absolute;
	left: 100px;
	top: 140px;
	color: green;
	text-align: center;
}
.bezahlt img {
	width: 100%;
	height: 100%;
}
.verrechnen {
	height: 24px;
	width: 24px;
	margin-left: 20px;
	margin-right: 1px;
}
@media only screen and (max-width: 766px) {
	.verrechnen {
		height: 20px;
		width: 20px;
		margin-left: 6px;
		margin-right: 1px;
	}
}


/* ==========================================================================
Navigation
    ========================================================================== */

active,
a:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none
}

.abstand {
	margin-top: 15px;
	margin-bottom: 15px;
	width: 100%;
}
.abstand-klein {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
}
.abstand-gross {
	height: 30px;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 100%;
}
.divider {
	height: 40px;
	width: 100%;
	text-align: center;
	margin: auto;
	color: #fff;
	border-radius: 3px;
	margin-left: 36px;
	margin-right: 36px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	border-radius: 4px;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-left: 36px;
	margin-right: 36px;
}
/* kann gelöscht werden ? 
.container {
	width: 100%;
	display: flex;
	height: 100vh;
	margin: 0;
	padding: 0;
	font-family: "oxygen", "sans-serif";
	background: #f7f7f7;
}
*/
.hide-div {
	height: 0px;
	display: none;
}
.content {
	width: 100%;
	height: 100vh;
	background: #1d1d27;
	margin-top: 0px;
	padding-top: 0px;
	font-family: "oxygen", "sans-serif";
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#live_data {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
    	max-width: 1100px;
		margin-top: 80px;
	}
@media only screen and (max-width: 1000px) {
	.content {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
	}

	.divider {
		width: 92%;
		margin-left: 0px;
	}
}
.neuer-kundename {
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
}
@media only screen and (max-width: 766px) {
	.neuer-kundename {
		flex-wrap: wrap;
	}
}
.kunden-darstellen {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.kunden-wrap {
	background: #ddd;
	height: 40px;
	width: auto;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	margin-right: 14px;
	padding: 10px;
	border-radius: 3px;
	width: 92%;
	margin-left: 15px;
	margin-right: 15px;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: solid 0px #26799b;
	background: #22222d;
	cursor: pointer;
	border-radius: 4px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-right: 20px;
	-webkit-box-shadow: 2px 2px 4px 0px #161616;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    2px 2px 4px 0px #161616;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 2px 4px 0px #161616;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.kunden-wrap:hover {
	border: solid 0px #343443;
	background: #2a2a37;
	cursor: pointer;
}
@media only screen and (max-width: 766px) {
	.kunden-wrap {
		width: 92%;
		margin-right: auto;
		margin-left: auto;
		font-size: 19px;
	}
}
#kunden_name_adresse {
	margin-right: 10px;
	width: calc(100% - 66px);
}
#kunden_name_adresse:hover {
	cursor: pointer;
}
#kunden_name {
	margin-left: 0px;
	width: 92%;
}
@media only screen and (max-width: 766px) {
	#kunden_name_adresse {
		width: 100%;
	}
}
input {
	border: solid 0px #eee;
	line-height: 48px;
	background: none;
	font-size: 18px;
	font-size: 21px;
}
textarea {
	Font-size: 17px;
	font-family: "Montserrat", sans-serif;
}
select {
	width: 45.8%;
	Font-size: 17px;
	font-family: "Montserrat", sans-serif;
	background-color: white;
}
.input-full {
	width: calc(100% - 60px);
	margin-left: 30px;
}
.input-half {
	width: calc(50% - 55px);
	margin-left: 30px;
}
.input-1-quarter {
	width: calc(25% - 30px);
	margin-left: 30px;
}
.input-3-quarter {
	width: calc(75% - 60px);
	margin-left: 30px;
}
select option {
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select {
	background: #ddd;
	color: red;
	color: #ddd;
	color: pink;
}
select {
	background: #22222d;
	color: red;
	color: #ddd;
}
select option {
	background: #22222d;
	color: #ddd;
}
#aufwaende_id {
	height: 42px;
	width: 12%;
	border: solid 1px #666;
	padding-left: 10px;
	font-size: 17px;
	margin-right: 10px;
	font-size: 16px;
}
#dasprojekt_id {
	height: 42px;
	width: 24%;
	border: solid 1px #666;
	padding-left: 10px;
	font-size: 17px;
	margin-right: 10px;
	font-size: 16px;
}
.small {
	width: 120px;
}
button,
.button {
	width: 160px;
	height: 40px;
	border: solid 0px;
	color: #fff;
	cursor: pointer;
	border-radius: 3px;
}
@media only screen and (max-width: 766px) {
	button,
	.button {
		width: 92%;
		height: 40px;
		border: solid 0px;
		color: #fff;
		cursor: pointer;
		border-radius: 3px;
		margin: auto;
	}
}
.green {
	background: #e44c65;
	font-size: 17px;
}
.green:hover {
	background: #d2485f;
	font-size: 17px;
}
.red {
	background: #C92D47;
	font-size: 17px;
}
.edit {
	width: 20px;
	height: 20px;
	opacity: 0.8;
	margin-right: 13px;
	margin-left: 5px;
	opacity: 0.7;
	text-align: center;
	cursor: pointer;
}
.edit img {
	width: 100%;
	height: 100%;
}
.delete,
.stats {
	width: 20px;
	height: 20px;
	opacity: 0.7;
	cursor: pointer;
	right: 0;
}
@media only screen and (max-width: 766px) {
	.delete,
	.stats {
		width: 26px;
		height: 26px;
		opacity: 0.7;
		margin-right: 15px;
		margin-left: 10px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.edit {
		width: 26px;
		height: 26px;
		margin-right: 13px;
		margin-left: 5px;
		opacity: 0.5;
		text-align: center;
		cursor: pointer;
	}
}
.delete img {
	width: 120%;
}
.stats img {
	width: 100%;
	height: 100%;
}
.overview-kunde {
	font-size: 26px;
	width: 100%;
	background: orange;
	height: 40px;
}
.overview-projekt {
	font-size: 17px;
	color: red;
}
.overlay-stunden {
	width: 500px;
	height: 500px;
	background: grey;
	position: absolute;
	top: 30%;
	left: 70%;
}
.liste-projekte {
	margin-left: 20px;
}
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #000;
	opacity: 0.8;
	display: none;
}
#editier-div,
#projekt-editier-div,
#projekt-hinzufügen-div,
#stunden-editier-div {
	width: 600px;
	height: 480px;
	z-index: 300;
	margin: auto;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	background: #22222d;
	position: absolute;
	z-index: 15;
}
#adresse-editier-div {
	width: 500px;
	height: 510px;
	z-index: 300;
	margin: auto;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	background: #22222d;
	position: absolute;
	z-index: 15;
}
@media only screen and (max-width: 766px) {
	#editier-div,
	#projekt-editier-div,
	#projekt-hinzufügen-div,
	#stunden-editier-div,
	#adresse-editier-div {
		width: 100%;
		height: 100vh;
		z-index: 300;
		margin-top: 30 px;
		margin: auto;
		position: fixed;
		right: 0;
		top: 150px;
		left: 0;
		display: none;
		background: #22222d;
		position: absolute;
		z-index: 15;
		overflow-y: hidden;
	}
}
.editier-header {
	height: 70px;
	width: 100%;
	display: flex;
	color: #e44c65;
}
@media only screen and (max-width: 766px) {
	.editier-header {
		height: 60px;
		width: 100%;
		display: flex;
		margin-bottom: 10px;
	}
}
.editier-titel {
	width: 90%;
	height: 80px;
	padding: 30px;
	font-size: 20px;
	margin-bottom: 20px;
}
@media only screen and (max-width: 766px) {
	.editier-titel {
		width: 86%;
		height: 60px;
		padding-left: 15px;
		font-size: 20px;
		line-height: 3px;
	}
}
.editier-close {
	width: 22px;
	height: 22px;
	opacity: 0.5;
	margin-top: 30px;
	margin-right: 24px;
	cursor: pointer;
}
.editier-close img {
	width: 100%;
	height: 100%;
}
.suche-close {
	width: 22px;
	height: 22px;
	opacity: 0.5;
	margin-left: 10px;
	cursor: pointer;
	height: 22px;
	width: 22px;
	position: absolute;
	top: 12px;
	border-radius: 25px;
	color: #000;
	text-align: right;
	font-size: 18px;
	line-height: 48px;
	right: 18px;
	opacity: 0.3;
}
.suche-close img {
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 766px) {
	.editier-close {
		width: 22px;
		height: 22px;
		opacity: 0.5;
		margin-top: 20px;
		cursor: pointer;
	}
	.suche-close {
		width: 22px;
		height: 22px;
		opacity: 0.5;
		margin-left: 10px;
		margin-right: 16px;
		cursor: pointer;
	}
}
.editier-content {
	display: flex;
	flex-wrap: wrap;
}
.felder {
	height: 34px;
	//margin: 0 auto;
	margin-bottom: 0px;
	margin-top: 10px;
	color: #757575;
	font-size: 17px;
	padding-left: 10px;
	border: solid 1px #ccc;
}

.einbezahlt img {
		margin-left: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 20px;
		height: 20px;
		margin-right: 0px;
	}

@media only screen and (max-width: 766px) {
	.felder {
		height: 34px;
		width: 92%;
		margin: 0 auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0px;
		margin-top: 12px;
		color: #757575;
		font-size: 17px;
	}
}
#txt_kommentar {
	height: 80px;
	color: #757575;
	font-size: 17px;
	padding-left: 10px;
	padding-top: 20px;
	margin-top: 16px;
	border: solid 1px #ccc;
	background: #ddd;
	background: #22222d;
}
.stunden-hinzufügen-container {
	width: 100%;
	display: flex;
	width: 100%;
	height: 37px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 0px;
	justify-content: center;
	border-bottom: solid 1px #E0E0E0;
	font-size: 16px;
	background: #ddd;
	height: 40px;
	width: auto;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	margin-right: 14px;
	padding: 10px;
	border-radius: 3px;
	width: 92%;
	margin-left: 15px;
	margin-right: 15px;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10px;
	justify-content: center;
	border: solid 0px #26799b;
	background: #22222d;
	cursor: pointer;
	border-radius: 4px;
	padding-top: 30px;
	padding-bottom: 30px;
	color: #ddd;
}
@media only screen and (max-width: 766px) {
	.stunden-hinzufügen-container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		height: auto;
		padding-bottom: 0px;
		padding-top: 20px;
	}
}
#dasdatum {
	width: 16%;
	margin-right: 10px;
	color: #aaa;
	font-family: "oxygen", "sans-serif";
	margin-left: 0px;
	font-size: 19px;
	border: solid 1px #666;
	height: 42px;
}
#diestunden {
	width: 4%;
	margin-right: 10px;
	font-size: 16px;
	border: solid 1px #666;
	height: 42px;
	color: #ddd;
}
#von {
	width: 7%;
	margin-right: 10px;
	font-size: 16px;
}
#bis {
	width: 7%;
	margin-right: 10px;
	font-size: 16px;
}
#tätigkeit {
	width: 44%;
	margin-right: 10px;
	font-size: 16px;
	color: #ddd;
	padding-left: 10px;
	border: solid 1px #666;
	height: 42px;
}
@media only screen and (max-width: 766px) {
	#diestunden {
		width: 100%;
		margin-right: 15px;
		font-size: 16px;
		margin-left: 15px;
		margin-bottom: 10px;
		padding-left: 10px;
		border: solid 1px #666;
	}
	#dasdatum {
		width: 100%;
		margin-right: 15px;
		margin-left: 15px;
		margin-bottom: 10px;
		padding-left: 10px;
	}
	#tätigkeit {
		width: 100%;
		margin-right: 15px;
		font-size: 16px;
		margin-left: 15px;
		margin-bottom: 10px;
		border: solid 1px #666;
	}
	#dasprojekt_id {
		width: 100%;
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 10px;
	}
	#aufwaende_id {
		width: 100%;
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 10px;
	}
	#von {
		height: 42px;
		margin-right: 15px;
		font-size: 16px;
		width: calc(50% - 30px);
		margin-left: 15px;
		margin-bottom: 10px;
	}
	#bis {
		height: 42px;
		margin-right: 15px;
		font-size: 16px;
		font-size: 16px;
		width: calc(50% - 30px);
		margin-bottom: 10px;
	}
}
.editier-button {
	justify-content: flex-end;
	margin-left: auto;
	margin-right: 30px;
	cursor: pointer;
}
@media only screen and (max-width: 766px) {
	.editier-button {
		justify-content: flex-end;
		margin-left: auto;
		margin-right: auto;
		cursor: pointer;
	}
}
#btn_show_projekt_overlay {
	margin-top: 30px;
}
.haupttitel {
	width: 100%;
	display: block;
	font-size: 30px;
	margin-right: auto;
	padding-left: 55px;
	background: ##1d1d27;
	padding-top: 26px;
	padding-bottom: 2px;
	color: #ddd;
	letter-spacing: 1px;
}
.untertitel {
	font-size: 15px;
	width: 100%;
	display: block;
	margin-right: auto;
	padding-left: 55px;
	background: ##1d1d27;
	padding-top: 10px;
	padding-bottom: 46px;
	margin-bottom: 24px;
	color: #ddd;
	position: relative;
	letter-spacing: 1px;
}
.searcher {
	background: #ddd;
	height: 50px;
	width: 40%;
	position: absolute;
	top: 46px;
	border-radius: 25px;
	color: #000;
	text-align: left;
	font-size: 18px;
	line-height: 48px;
	left: 50%;
	color: #666;
	transform: translate(-50%);
	padding-left: 60px;
}
.searcher-icon {
	height: 26px;
	width: 26px;
	position: absolute;
	top: 10px;
	border-radius: 25px;
	color: #000;
	text-align: center;
	font-size: 18px;
	line-height: 48px;
	left: 14px;
	opacity: 0.5;
}
.searcher-icon img {
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 766px) {
	.searcher {
		height: 50px;
		width: 91%;
		position: absolute;
		top: 67px;
		border-radius: 25px;
		color: #000;
		text-align: left;
		font-size: 18px;
		line-height: 48px;
		left: 50%;
		transform: translate(-50%);
		color: #666;
		padding-left: 60px;
	}
	.haupttitel {
		font-size: 25px;
		margin-right: auto;
		font-family: oxygen;
		padding-left: 30px;
		padding-right: 30px;
	}
	.untertitel {
		margin-right: auto;
		padding-left: 30px;
		padding-right: 30px;
		font-size: 16px;
	}
}
.projekt-row {
	width: 100%;
	height: 37px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 0px;
	justify-content: center;
	border-bottom: solid 1px #E0E0E0;
	font-size: 16px;
	background: #ddd;
	height: 40px;
	width: auto;
	display: flex;
	align-items: center;
	margin-right: 14px;
	padding: 10px;
	border-radius: 3px;
	width: 92%;
	margin-left: 15px;
	margin-right: 15px;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10px;
	justify-content: center;
	border: solid 0px #26799b;
	background: #22222d;
	cursor: pointer;
	border-radius: 4px;
	padding-top: 30px;
	padding-bottom: 30px;
	-webkit-box-shadow: 2px 2px 4px 0px #161616;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    2px 2px 4px 0px #161616;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 2px 4px 0px #161616;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.projekt-row:hover {
	cursor: pointer;
	background: #2a2a37;
}
.projekt-col1 {
	width: 35%;
}
.projekt-col2 {
	width: 35%;
	color: #e44c65
}
.projekt-col3 {
	width: 20%;
}
.projekt-col4 {
	width: 5%;
	display: inline-flex;
	text-align: right;
	padding-left: 10px;
}
.projekt-col5 {
	width: 5%;
	display: inline-flex;
	text-align: right;
}
@media only screen and (max-width: 766px) {
	.projekt-row {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 0px;
		justify-content: center;
		padding-left: 5px;
		font-size: 16px;
		margin-bottom: 10px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.title {
		display: none;
	}
	.projekt-row:hover {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 0px;
		justify-content: center;
	}
	.projekt-col2 {
		width: 100%;
		height: 30px;
		font-size: 19px;
	}
	.projekt-col1 {
		width: 100%;
		height: 30px;
	}
	.projekt-col3 {
		width: 25%;
		height: 40px;
		display: none;
	}
	.projekt-col3b {
		width: 33%;
		height: 40px;
		display: flex;
		align-items: center;
	}
	.projekt-col4 {
		width: 33%;
		height: 40px;
		display: flex;
		align-items: center;
	}
	.projekt-col5 {
		width: 33%;
		height: 40px;
		display: flex;
		align-items: center;
	}
}
.stunden-stunden-row {
	width: 100%;
	height: 37px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 0px;
	justify-content: center;
	border-bottom: solid 1px #313143;
	font-size: 13px;
	width: 100%;
	height: 37px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 0px;
	justify-content: center;
	border-bottom: solid 1px #E0E0E0;
	font-size: 16px;
	background: #ddd;
	height: 40px;
	width: auto;
	display: flex;
	align-items: center;
	margin-right: 14px;
	padding: 10px;
	border-radius: 3px;
	width: 92%;
	margin-left: 15px;
	margin-right: 15px;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10px;
	justify-content: center;
	border: solid 0px #26799b;
	background: #22222d;
	cursor: pointer;
	border-radius: 4px;
	padding-top: 30px;
	padding-bottom: 30px;
	-webkit-box-shadow: 2px 2px 4px 0px #161616;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    2px 2px 4px 0px #161616;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 2px 4px 0px #161616;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.stunden-stunden-row:hover {
	background: #2a2a37;
	cursor: pointer;
}
.stunden-col1 {
	width: 22%;
}
.stunden-col2 {
	width: 17%;
}
.stunden-col3 {
	width: 43%;
	line-height: 20px;
}
.stunden-col5 {
	width: 10%;
}
.stunden-col6 {
	width: 4%;
}
.stunden-col7 {
	width: 4%;
	margin-left: 20px;
}
@media only screen and (max-width: 766px) {
	.stunden-stunden-row {
		height: 60px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 0px;
		justify-content: center;
		height: auto;
		font-size: 14px;
		margin-bottom: 10px;
		padding-top: 15px;
		padding-bottom: 15px;
	}
}
.stunden-stunden-row:hover {
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
}
.stunden-col1 {
	line-height: 13px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 1.3;
	width: 30%;
}
.stunden-col2 {
	width: 20%;
	line-height: 13px;
	display: none;
}
.stunden-col3 {
	width: 70%;
	line-height: 1.3;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.stunden-col5 {
	width: 10%;
	--display: none;
}
.stunden-col6 {
	display: none;
	width: 7%;
}
.stunden-col7 {

	width: 6%;
}

.suche-stunden {
	width: 100%;
	height: 60px;
	display: flex;
	text-align: left;
	justify-content: center;
	align-items: center;
	background: #E5E5E5;
	border-radius: 3px;
}
#suche-stunden {
	width: 80%;
	align-items: center;
}
@media only screen and (max-width: 766px) {
	.suche-stunden {
		width: 95%;
	}
	#suche-stunden {
		width: 80%;
		height: 40px;
		align-items: center;
		margin-top: 5px;
		font-size: 21px;
	}
}
.overview-row-main {
	width: 100%;
	margin-left: 36px;
	margin-right: 36px;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #fff;
	margin-top: 10px;
	justify-content: center;
	border: solid 0px #26799b;
	background: #22222d;
	cursor: pointer;
	color: #ddd;
	border-radius: 4px;
	padding-top: 30px;
	padding-bottom: 30px;
  -webkit-box-shadow: 2px 2px 4px 0px #161616;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    2px 2px 4px 0px #161616;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 2px 4px 0px #161616;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.overview-row-main-buchhaltung {
	width: 100%;
	margin-left: 36px;
	margin-right: 36px;
	height: 126px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	color: #fff;
	margin-top: 16px;
	justify-content: center;
	border: solid 0px #26799b;
	background: #22222d;
	cursor: pointer;
	color: #ddd;
	border-radius: 4px;
	padding: 10px 20px 10px 20px;
  -webkit-box-shadow: 2px 2px 4px 0px #161616;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    2px 2px 4px 0px #161616;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 2px 4px 0px #161616;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.overview-row-main-buchhaltung-details {
	width: 100%;
	height: 126px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	color: #fff;
	margin-top: 16px;
	justify-content: center;
	border: solid 0px #26799b;
	background: #22222d;
	cursor: pointer;
	color: #ddd;
	border-radius: 4px;
	padding: 10px 20px 10px 20px;
  -webkit-box-shadow: 2px 2px 4px 0px #161616;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    2px 2px 4px 0px #161616;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 2px 4px 0px #161616;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}




@media only screen and (max-width: 766px) {
	.overview-row-main {
		width: 92%;
		margin-left: 15px;
		margin-right: 15px;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		justify-content: center;
		border: solid 0px #26799b;
		background: #22222d;
		cursor: pointer;
		border-radius: 4px;
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
.overview-row-main:hover {
	border: solid 0px #343443;
	background: #2a2a37;
	cursor: pointer;
}
.overview-row-main_not_paid {
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10px;
	justify-content: center;
	border-bottom: solid 1px #E0E0E0;
	background: #ebdfe6;
	cursor: pointer;
	width: 100%;
	margin-left: 36px;
	margin-right: 36px;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #fff;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10px;
	justify-content: center;
	border: solid 0px #26799b;
	background: #3a1f23;
	cursor: pointer;
	color: #ddd;
	border-radius: 4px;
	padding-top: 30px;
	padding-bottom: 30px;
	-webkit-box-shadow: 2px 2px 4px 0px #161616;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    2px 2px 4px 0px #161616;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 2px 4px 0px #161616;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
@media only screen and (max-width: 766px) {
	.overview-row-main_not_paid {
		width: 92%;
		margin-left: 15px;
		margin-right: 15px;
		line-height: 1.5;
		height: auto;
		padding-top: 10px;
    padding-bottom: 10px;
	}
}
.overview-main-col1 {
	width: 95%;
	text-align: left;
	font-size: 17px;
	padding-left: 20px;
}

.overview-main-col1-buchhaltung {
	width: 70%;
	text-align: left;
	font-size: 17px;
	--padding-left: 20px;
}


.overview-main-col2-buchhaltung {
	width: 15%;
	text-align: right;
	font-size: 17px;
}

.overview-main-col3-buchhaltung {
	width: 15%;
	text-align: right;
	font-size: 17px;
}
.overview-main-col4-buchhaltung {
	width: 30%;
	text-align: right;
	font-size: 17px;
}


.overview-main-col2 {
	width: 5%;
	text-align: right;
	font-size: 17px;
}
.overview-main-col3 {
	width: 15%;
	text-align: right;
	font-size: 17px;
	padding-right: 20px;
}
@media only screen and (max-width: 766px) {
	.overview-main-col1 {
		font-size: 19px;
		padding-left: 15px;
		padding-right: 15px;
		width: 90%;
	}
	.overview-main-col2 {
		font-size: 15px;
		width: 10%;
	}
	.overview-main-col3 {
		font-size: 15px;
		padding-right: 5px;
		width: 20%;
	}
}
.arrow {
	width: 24px;
	height: 28px;
}
.arrow img {
	width: 100%;
	height: 100%;
}
.overview-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 0px;
	justify-content: center;
	border-bottom: solid 1px #666;
	background: #272733;
	padding-top: 20px;
	padding-bottom: 20px;
}
.overview-row:hover {
	cursor: pointer;
}
@media only screen and (max-width: 766px) {
	.overview-row {
		margin-left: 15px;
		margin-right: 15px;
		width: auto;
		color: #ddd;
		background: #272733;
		padding-left: 15px;
		padding-right: 15px;
		flex-wrap: wrap;
		display: flex;
	}
	.overview-row:hover {
		width: auto;
	}
}
.overview-projekt-col1 {
	width: 65%;
	text-align: left;
	font-size: 17px;
	padding-left: 10px;
}
.overview-projekt-col2 {
	width: 15%;
	text-align: right;
	font-size: 17px;
}
.overview-projekt-col3 {
	width: 15%;
	text-align: right;
	font-size: 17px;
	padding-right: 20px;
	
}
.overview-projekt-col5 {
	width: 5%;
	text-align: left;
	font-size: 17px;
	padding-left: 0px;
	margin-left: 20px;
}
.overview-projekt-col5 img {
	width: 24px;
	height: 24px;
}
@media only screen and (max-width: 766px) {
	.overview-projekt-col1 {
		width: 100%;
		font-size: 16px;
		padding-left: 5px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		line-height: 24px;
		padding: 5px;
	}
	.overview-projekt-col2 {
		width: 50%;
		text-align: left;
		font-size: 16px;
		padding-left: 5px;
		padding-bottom: 10px;
	}
	.overview-projekt-col3 {
		width: 50%;
		text-align: right;
		font-size: 16px;
		padding-right: 5px;
		padding-bottom: 10px;
	}
	.overview-projekt-col5 {
		text-align: left;
		font-size: 13px;
		padding-right: 0px;
		padding-left: 0px;
		margin-left: 0px;
	}
	.overview-row .overview-projekt-col5 {
		width: 50%;
		display: flex;
		text-align: left;
		font-size: 13px;
		padding-right: 0px;
		padding-left: 0px;
		margin-left: 0px;
	}
	.overview-projekt-col5 img {
		margin-top: 10px;
		margin-bottom: 10px;
		width: 40px;
		height: 40px;
	}
	.einbezahlt img {
		margin-left: 0;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 36px;
		height: 36px;
		margin-right: 14px;
	}
	.fpdf img {
		margin-top: 10px;
		margin-bottom: 10px;
		width: 36px;
		height: 36px;
		margin-right: 30px;
	}
}
.stunden-row {
	width: 100%;
	height: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 0px;
	justify-content: center;
	font-size: 16px;
}
.stunden-row:hover {
	cursor: pointer;
}
.overview-col4 {
	width: 17%;
	text-align: left;
	padding-left: 20px;
}
.overview-col1 {
	width: 63%;
	text-align: left;
	padding-left: 0px;
}
.overview-col2 {
	width: 10%;
	color: #913443 text-align: right;
}
.overview-col3 {
	width: 10%;
	text-align: right;
	padding-right: 20px;
}
@media only screen and (max-width: 766px) {
	.stunden-row {
		width: auto;
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 0px;
		justify-content: center;
		margin-left: 15px;
		margin-right: 15px;
		color: #ddd;
		flex-wrap: wrap;
		padding-left: 15px;
	}
	.overview-col4 {
		width: 100%;
		text-align: left;
		padding-left: 5px;
		font-size: 18px;
		margin-top: 15px;
		color: #aaa;
	}
	.overview-col1 {
		height: 24px;
		line-height: 24px;
		width: 100%;
		text-align: left;
		padding-left: 20px;
		padding-right: 10px;
		font-size: 16px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-top: 5px;
	}
	.overview-col2 {
		width: 20%;
		color: #556677;
		text-align: left;
		font-size: 16px;
		margin-top: 5px;
		flex-grow: 1;
		padding-left: 20px;
	}
	.overview-col3 {
		width: 20%;
		color: #556677;
		text-align: right;
		padding-right: 5px;
		font-size: 16px;
		flex-grow: 1;
		margin-top: 5px;
		padding-right: 15px;
	}
}
.settings-content {
	width: 100%;
	height: 800px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.settings-col50 {
	width: 49%;
	padding: 20px;
	border: solid 1px #D0D0D0;
	margin-bottom: 30px;
}
@media only screen and (max-width: 766px) {
	.settings-col50 {
		width: 100%;
	}
}
.settings-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	cursor: pointer;
}
.settings-col1 {
	width: 70%;
}
.settings-col2 {
	width: 30%;
}
.settings-col3 {
	width: 45%;
}
.settings-col4 {
	width: 30%;
	text-align: right;
}
.settings-col5 {
	width: 25%;
}
.anzeigen-projekte {
	width: 100%;
	display: none;
	margin-left: 36px;
	margin-right: 36px;
	flex-wrap: wrap;
	padding-bottom: 20px;
}
@media only screen and (max-width: 766px) {
	.anzeigen-projekte {
		margin-left: 0px;
		margin-right: 0px;
	}
}
.invoice-row {
	width: 95%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 5px;
	cursor: pointer;
	font-size: 13px;
}
.positionen {
	width: 100%;
	font-size: 10px;
}
.invoice-col-1 {
	width: 32%;
	text-align: left;
}
.invoice-col-2 {
	width: 70%;
	text-align: left;
}
.invoice-col-3 {
	width: 15%;
	text-align: left;
}
.invoice-col-4 {
	width: 20%;
	text-align: right;
}
.invoice-col-5 {
	width: 30%;
	text-align: right;
}
.invoice-col-6 {
	width: 10%;
	text-align: right;
}
.invoice-col-7 {
	width: 65%;
	text-align: left;
}
.invoice-total {
	width: 50%;
	text-align: right;
}
.invoice-total-left {
	width: 50%;
	text-align: left;
}

.rech-green {
	background: #6e4080;
		border-radius: 4px;
	padding: 10px;
	margin: 3px;
		margin-left: 0;
}

.rech-rot {
	background: #728040;
	border-radius: 4px;
	padding: 10px;
	margin: 3px;
	margin-left: 0;
}
.rech-green2 {
	background: #341e3d;
		border-radius: 4px;
	padding: 10px;
	margin: 3px;
		margin-left: 0;
}

.rech-rot2 {
	background: #31371b;
	border-radius: 4px;
	padding: 10px;
	margin: 3px;
	margin-left: 0;
}

.icon-buchhaltung {
	padding: 30px;
	background: #407e80;
	margin: 20px;
	border-radius: 4px;
	font-size: 1.6em;
	font-weight: bold;
	width: 100%;
	margin-left: 36px;
  margin-right: 36px;
  text-align:center;
}

.goto-buchhaltung {
	position: absolute;
	right: 33%;
	top: 12%;
	padding: 10px 30px 10px 30px;
	background: #407e80;
	--margin: 20px;
	border-radius: 4px;
	font-size: 1.6em;
	font-weight: bold;
	--width: 100%;

  text-align:center;
}