/* ALLGEMEIN */

html,body{
	width:100%;
	height:100%;
}

body {
	border:0;
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	font-size:1rem;
	font-weight:400;
	color:#595959;
	background-color:#cccccc;
	/* background-color: rgba(19,89,119,0.1); */
}
#main{
	min-height:100%;
	width:100%;
	max-width:600px;
	margin:0 auto;
	/* background-color:#ffffff; */
	/* overflow-x:hidden; */
	/* overflow-y:auto; */
	position:relative;
	/* background-image:URL('../images/bg-content2.jpg'); */
	/* background-color:rgba(0,110,166,0.1); */
	/* background-color:rgba(19,89,119,0.1); */
	background-color:#e7eef1;
	background-position:cover;
	background-repeat:no-repeat;
}
#main-logout{
	height:100%;
	width:100%;
	max-width:600px;
	margin:0 auto;
	background-color:#ffffff;
	overflow-x:hidden;
	overflow-y:auto;
	position:relative;
}

/* MENU */
.top-menu{
	position:fixed;
	top:0px;
	width:100%;
	max-width:600px;
	height:38px;
	box-sizing:border-box;
	background-color:#135977;
	z-index:1900;
}
.top-menubox{
	float:left;
	box-sizing:border-box;
	width:calc(25% - 10px);
	text-align:center;
	background-color:#135977;
}
.top-menubox:last-child{
	width:40px;
	font-size:0;
    line-height: 3px;
}
.top-menubox img{
	max-width:20px;
	height:auto;
}
.top-menu a{
	color:#ffffff;
	display:inline-block;
	padding:10px;
}
.top-menubox.aktiv a{
	color:#135977;
}
.top-menubox.aktiv{
	background-color:#ffffff;
}

/* START */

#pacop-start{
	/* float:left; */
	padding-top:20px;
	/* background-image:URL('../images/bg-main.jpg'); */
	background-size:cover;
	background-position:center;
	/* position:absolute; */
	/* top:0; */
	/* left:0; */
}
.pacop-start-logo{
	margin:0px auto;
    position:relative;
	width:100%;
	width:80px;
	height:80px;
	background-image:URL('../images/logo.png');
	background-size:100% auto;
	margin-bottom:30px;
}
.pacop-logo{
	float:left;
	margin-top:20px;
	margin-right:20px;
}
.pacop-welcome{
	float:left;
	margin-top:40px;
}
.fortschritt-left{
	float:left;
	font-size:0.8rem;
}
.fortschritt-right{
	float:right;
}
.fortschritt-kasten{
	float:right;
	box-sizing:border-box;
	padding:15px;
	font-size:1.3rem;
	color:#ffffff;
	background-color:#84b6cc;
	text-align:right;
	height:55px;
}
.fortschritt-dreieck{
	float:left;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 55px 55px;
	border-color: transparent transparent #84b6cc transparent;
}
.fortschritt-dreieck-green{
	float:left;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 55px 55px;
	border-color: transparent transparent #a3d265 transparent;
	border-color: transparent transparent #b6af1d transparent;
}
.fortschritt-linie{
	float:left;
	width:100%;
	height:1px;
	background-color:#dddddd;
	margin-top:-1px;
	margin-bottom:40px;
}
.fortschritt-inhalte{
	float:left;
	width:100%;
	height:350px;
	overflow:hidden;
}
.fortschritt-heute{
	position:absolute;
	width:100%;
	left:0px;
	box-sizing:boder-box;
}
.fortschritt-total{
	position:absolute;
	width:100%;
	height:400px;
	right:-400px;
	display:none;
}
.fortschritt-arrow-left{
	position:absolute;
	margin-top:140px;
	opacity:0.3;
}
.fortschritt-arrow-right{
	position:absolute;
	margin-top:140px;
	right:20px;
	opacity:0.3;
}
.arrow-left-total{
	display:none;
}
.arrow{
	opacity:0.5;
}

/* WOCHENZIELE */
.wochenziele-topbox{
	float:left;
	width:100%;
	box-sizing:border-box;	
	background-color:#006ea6;
	padding:20px;
	/* padding-top:35px; */
	/* padding-bottom:35px; */
	padding-top:58px;
	color:#ffffff;
}
.wochenziele-topbox h1{
    font-size: 1.70rem;
}
.wochenziele-date{
	font-size: 0.88rem;
}
.wochenziele-topbox .left, .wochenziele-topbox .right{
	margin-top:10px;
}
.wochenziel-headline{
	line-height:1.1; 
	margin:0 20px;
	margin-bottom:10px;
}
.wochenziel-target{
	font-weight:300;
}

.wochenziele-triangle-box{
	float:left;
	width:100%;
	text-align:center;
}
.wochenziele-triangle{
	width: 0px;
	height: 0px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 30px 80px 0 80px;
	border-color: #006ea6 transparent transparent transparent;
	margin:0 auto;
}
.wochenziel-box{
	/* float:left; */
	width:100%;
	box-sizing:border-box;
	margin-bottom:40px;
	/*border:1px solid #c2d3da;*/
	background:rgba(255,255,255,0.7);
	min-height:170px;
	cursor:pointer;
	position:relative;
	-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
	border-radius:10px;
}
.wochenziel-box-left{
	/* float:left; */
	width:70%;
	padding:20px;
	box-sizing:border-box;
	position:relative;
}
.wochenziel-box-left.editable{
	background-image:url('../images/edit.png');
	background-repeat:no-repeat;
	background-position:95% 10px;
}
.wochenziel-box-krank{
	position:absolute;
	top:10px;
	left:10px;
	filter:grayscale(100%);
}
.wochenziel-box.krank .wochenziel-box-krank{
	filter:grayscale(0%);
}
.wochenziel-box.krank{
	background-color:#ffdddd;
}
.krankpopup{
	padding:20px;
	background-color:#ffffff;
	position:absolute;
	bottom:105%;
	left:0;
	right:0;
	box-shadow:0px 0px 14px 0px rgba(0,0,0,0.2);
	display:none;
	z-index:2;
}
.krankpopup .krankpopup-ja, .krankpopup .krankpopup-nein{
	width:auto;
	padding-left:20px;
	padding-right:20px;
}
.wochenziel-box-fortschritt{
	float:left;
	width:100%;
	box-sizing:border-box;
	padding:5px;
	border:1px solid #ebebeb;
	height:20px;
	margin-top:10px;
	background-color:#ffffff;
}
.wochenziel-box-fortschritt-bar{
	float:left;
	width:60%;
	height:8px;
	background-color:#a3d265;
	background-color:#b6af1d;
}
.wochenziel-box-fortschritt-subline{
	float:left;
	width:100%;
	text-align:center;
	margin-top:10px;
}
.wochenziel-box-add{
	position:absolute;
	width:30%;
	top:0;
	right:0;
	bottom:0;
	box-sizing:border-box;
	background-color:#c8d7b5;
	background-color:#e1dea6;
	padding-top:20px;
	padding-bottom:20px;
	/* border:3px solid #c2d3da; */
	padding:10px;
	text-align:center;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}
.wochenziel-box-disabled{
	position:absolute;
	width:30%;
	top:0;
	right:0;
	bottom:0;
	box-sizing:border-box;
	background-color:#999999;
	
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}
.wochenziel-box-add-input{
	width:100%;
	padding:5px;
	font-size:1.8rem;
	font-weight:300;
	box-sizing:border-box;
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}

/* STATISTIK */
.statistik-topbox{
	float:left;
	width:100%;
	box-sizing:border-box;	
	background-color:#7fa251;
	background-color:#b6af1d;
	padding:20px;
	/* padding-top:35px; */
	/* padding-bottom:35px; */
	padding-top:58px;
	color:#ffffff;
}
.statistik-topbox .left, .statistik-topbox .right{
	margin-top:10px;
}
.statistik-topbox h1{
    font-size: 1.70rem;
}
.statistik-date{
	font-size: 0.88rem;
}
.statistik-triangle{
	width: 0px;
	height: 0px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 30px 80px 0 80px;
	border-color: #b6af1d transparent transparent transparent;
	margin:0 auto;
}
.statistik-diagramm{
	float:left;
	width:150px;
	height:150px;
	box-sizing:border-box;
	position:relative;
}
.statistik-kreis{
	float:left;
	width:80px;
	height:80px;
	border-radius:80px;
	background-color:#ffffff;
	margin-left:35px;
	margin-top:35px;
	position:relative;
	z-index:3;
}
.statistik-kreis-text{
	float:left;
	width:100%;
	text-align:center;
	font-size:1.6rem;
	margin-top:25px;
}
.statistik-canvas{
	position:absolute;
	width:180px;
	height:180px;
	top:-15px;
	left:-15px;
}
.user-ziel{
	text-align:center;
	font-size:1.25rem;
	padding:20px;
	padding-top:0px;
	font-weight:700;
}

#whiteoverlay{
	position:fixed;
	width:100%;
	top:0;
	bottom:0;
	background:rgba(255,255,255,0.95);
	z-index:1000;
	display:none;
	box-sizing:border-box;
	top:38px;
	overflow-y:auto;
	max-width: 600px;
}
.whiteoverlay-content{
	float:left;
	width:100%;
	box-sizing:border-box;
	padding:30px;
	padding-left:22px;
	padding-right:22px;
}
.whiteoverlay-btn-close{
	float:right;
	cursor:pointer;
}

.pacop-content{
	float:left;
	width:100%;
	box-sizing: border-box;
	padding-left:20px;
	padding-right:20px;
	font-weight:400;
	margin-top:38px;
	margin-top:10px;
	
}

.pacop-start-login{
	position:relative;
	margin: auto;
	width:calc(100% - 40px);
	background:rgba(255,255,255,0.8);
	background:rgba(255,255,255,1);
	box-sizing: border-box;
	border-radius:10px;
	padding:30px;
	padding-top:10px;
	font-size:1.1rem;
}

.kontakt-fusszeile{
	position:fixed;
	bottom:0px;
	height:40px;
	background-color:#a9a9a9;
	width:100%;
	max-width:600px;
	text-align:center;
	padding-top:12px;
	box-sizing:border-box;
	color:#ffffff;
	font-size:0.9rem;
}

.kontakt-fusszeile a{
	color:#ffffff;
}
.kontakt-textarea{
	width:100%;
	box-sizing:border-box;
	padding:10px;
	height:150px;
	font-family: 'Open Sans', sans-serif;
	font-size:1rem;
}

.eintragung-box{
	clear:both;
	padding:20px;
	margin-bottom:20px;
	border:1px solid #e0e0e0;
}
.eintragung-info{
	padding-left:20px;
	padding-bottom:10px;
}

.add-unit{
	margin-top:14px;
}

/* Favoriten */

.schlagwort-box{
	border-radius:10px;
	background-color:rgba(255,255,255,1.0);
	display:inline-block;
	vertical-align:top;
	margin-bottom:20px;
	text-align:center;
	cursor:pointer;
	width:48%;
	margin-right:2%;
}
.schlagwort-box:nth-child(2n){
	margin-right:0;
}
.schlagwort-box a{
	display:block;
	padding:15px;
	font-size:1.2rem;
}
.textinput{
	border-radius:7px;
	border:2px solid #c8c8c8;
	background-image:URL('../images/input-bg.jpg');
	background-size:100% auto;
	background-repeat:repeat-x;
	height:26px;
	padding:10px;
	font-size:1.6rem;
}

hr{
	height:2px;
	border:0;
	background-color:#aaaaaa;
}
.border-top{
	height:2px;
	background-color:#aaaaaa;
	margin-bottom:12px;
}
.border-bottom{
	height:2px;
	background-color:#aaaaaa;
	margin-top:12px;
}

.left{ 
	float:left; 
}
.right{ 
	float:right; 
}
.clear{
	clear:both;
}

.button{
	border-radius:10px;
	border:0px;
	background-color:#135977;
	color:#ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size:1.2rem;
	text-align:center;
	cursor:pointer;
	margin-top:15px;
	padding-left:40px;
	padding-right:40px;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:300;
	-webkit-appearance: none;
	-webkit-border-radius: none;
	display:inline-block;
}
.button.small{
	padding:8px 20px;
	font-size:1rem;
	margin:0 10px;
}
.button-green, .share-button, .button-red{
	/* border-radius:20px; */
	border:0px;
	background-color:#7fa251;
	background-color:#b6af1d;
	color:#ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size:1.2rem;
	text-align:center;
	cursor:pointer;
	width:100%;
	box-sizing:border-box;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:400;
	-webkit-appearance: none;
	-webkit-border-radius: none;
}
.share-button{
	display:block;
	margin:0 auto;
	width:auto;
	margin-bottom:20px;
	padding:10px 20px;
}
.button-red{
	background-color:#c94f30;
}

.pre-delete{
	
}
.delete-box{
	display:none;
}

.error-box{
	background-color:#c94f30;
	color:#ffffff;
	padding:20px;
}
.success-box{
	background-color:#4cc94c;
	color:#ffffff;
	padding:20px;
}
a.break, span.break{
	/* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

table, .table{
	border-collapse:collapse;
	/* min-width:500px; */
}
.table th, .table td{
	padding:15px;
	border:1px solid rgba(0,0,0,0.2);
	border:1px solid rgba(122,122,122,0.3);
}
.table th{
	color:#ffffff;
	background-color:#135977;
	font-weight:400;
}
/*.table tr:nth-child(2n+1) td{
	background-color:#f5f5f5;
}*/
.table td{
	background-color:#ffffff;
}

table td{
	vertical-align:top;
}

.infobox{
	color:#ffffff;
	background-color:#135977;
	padding:15px;
	margin-bottom:1em;
}
h1{
	font-family: 'Open Sans', sans-serif;
	font-size:1.8rem;
	padding:0px;
	margin:0px;
	border:0px;
	font-weight:300;
}

h2{
	font-family: 'Open Sans', sans-serif;
	font-size:1.2rem;
	padding:0px;
	margin:0px;
	border:0px;
	margin-bottom:0.3em;
	font-weight:400;
}

h3{
	font-family: 'Open Sans', sans-serif;
	font-size:1.5rem;
	padding:0px;
	margin:0px;
	border:0px;
	color:#ffffff;
	font-weight:400;
}


.bold{
	font-weight:600;
}
.italic{
	font-style:italic; 
}

a {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color:#135977;
}

a:hover {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color:#2e7a9a;
}

a:active {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color:#2e7a9a;
}
a[id]{
	display:block;
	position:relative;
	top:-50px;
}

table td{
	vertical-align:top;
}

img{
	border: 0px;
}

.textfeld{
	box-sizing:border-box;
	width:100%;
	padding:5px;
	font-size:1rem;
	font-weight:300;
}

.blinkanim{
	animation: blinkanim 1s linear;
}
ol{
	padding-left:20px;
}
ol li{
	margin-bottom:5px;
}
.red{
	color:#ff5555;
	font-weight:700;
}

@media(max-width:500px){
	.schlagwort-box{
		width:100%;
		margin-right:0;
	}
	.wochenziel-box-left{
		width:100%;
		float:none;
	}
	.wochenziel-box-add, .wochenziel-box-disabled{
		position:relative;
		width:100%;
		border-radius: 0 0 10px 10px;
		clear:both;
		padding-top:10px;
		margin-top:10px;
	}
	.add-unit{
		float:left;
		margin-top:12px;
		width:100px;
	}
	.add-button{
		display:block;
		overflow:hidden;
		width:auto;
	}
	.wochenziel-box-add-input{
		width:80px;
		float:left;
		margin:0;
		margin-right:20px;
	}
}

@media(max-width:340px){
	.top-menubox{
		font-size:0.9rem;
	}
	.top-menubox a{
		padding:10px 5px;
	}
	.top-menubox img{
		max-width:19px;
	}
	.top-menubox:last-child{
		line-height: 0px;
	}
}
/* registrieren / Konto */

.inputtext{
	border:1px solid #555555;
	border-radius:0;
	background:#eeeeee;
	padding:10px;
	vertical-align:middle;
	font-size:1rem;
	width:100%;
	max-width:250px;
	font-family: 'Open Sans', sans-serif;
	box-sizing:border-box;
}
textarea.inputtext{
	width:100%;
	height:80px;
}
.inputtext.upper{
	text-transform:uppercase;
}
.codetable .inputtext{
	width:80px;
	text-transform:uppercase;
}
.code-error{
	display:none;
	color:#cc0000;
	font-weight:700;
}

.konto-menu{
	border-bottom:1px solid #cccccc;
	margin-bottom:20px;
}
.konto-item{
	display:inline-block;
}
.konto-item a{
	display:inline-block;
	padding:10px 20px;
	background-color:#ffffff;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.konto-item:hover a,.konto-item._active a{
	background-color:#135977;
	color:#ffffff;
}
.werte-container{
	/* margin-bottom:50px; */
	width:100%;
	overflow-x:auto;
}
.settings-menu{
	background-color:#ffffff;
	/* border:1px solid #dddddd; */
	color:#135977;
	width:100%;
	text-align:center;
	font-size:1.2rem;
	padding:10px;
	margin-bottom:4px;
	box-sizing:border-box;
}
.settings-item{
	display:none;
	padding:20px 0;
	padding-bottom:40px;
}

@media(max-width:600px){
	.konto-menu{
		border:0;
	}
	.konto-item, .konto-item a{
		border-radius:0;
		margin:0;
		display:block;
		text-align:center;
		/* font-size:1.2rem; */
	}
	.konto-item{
		/* border:1px solid #dddddd; */
		margin-bottom:4px;
	}
	.konto-item a{
		
	}
	.menu-item{
		/* display:block; */
	}
	.menu-item a{
		padding:10px 10px;
	}
	.table td{
		padding:10px;
	}
}
@keyframes blinkanim {
	0% { filter: brightness(100%); }
	50% { filter: brightness(115%); }
	100% { filter: brightness(100%); }
}