.key{
    position: absolute;
	
    top: 0px;
    right: 0px;
	margin:20px;
	max-width:50px;
	
	cursor:pointer;
}

* {box-sizing:border-box}

.body {
	/*margin:0;*/
	font-family: Calibri;
	transition: background-color .5s;
}



a {
  color:#09acdb; 
  /*background:white;*/
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
	/* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}

/*
a:hover { color:red; background:yellow; }
*/

a:link{text-decoration:none;}
a:visited{}
a:hover{color:#ff9600;text-decoration:underline;}
a:active{text-decoration:underline;}



@font-face {
    font-family: Glyph;
    src: url("../fonts/glyph.otf") format("opentype");
}
@font-face {
    font-family: Symbols;
	font-style: normal;
	font-weight: 400;
    src: url("../fonts/symbols.woff2") format('woff2');
}

/* BUTTONS */

.btn{
	cursor: pointer;
}
.btn-cut{
	padding:5px;
	display:inline-block;
}
.btn-danger{
	/*border-style: solid;*/
    border-color: #ff0000;
	background-color: rgba(255,0,0,0.4); /*redish*/
	color:#ffffff;
}
.btn-success{
    border-color: #00ff00;
	background-color: rgba(204,255,0,0.9); /*greenish*/
}
.btn-normal{
    border-color: #00ff00;
	color:#ffffff;
	background-color: #9b9994; /*greenish*/
}
.btn-default{
	width: 80px;
	height:40px;
}
.btn-block{
	height:45px;
	width:50px;
}
.btn-edit{
	/*height:45px;*/
	width:150px;
}

.btn-submit{
	text-align:center;
	margin:5px;
	padding:6px;
	color:#34c30d;
	background:#d0e84c;
}

.errortext{
	color:#ff0018;
	background:#ffe071;
	padding:6px;
}

.add-punishment-number{
	display:inline;
}

.add-punishment{
	/*display:inline;*/
	/*float:left;*/
}

.punish-auto-fill{
	border:1px solid #fff29c;
	background:#f1f3d5;
}

.active-punish-list-item{
	display:inline;
}

.del-active-punisment{
	text-size:4px;
	color:#f8600e;
}
.whole-punisment{
	/*float:left;*/
}
.a-punishment{
	/*display:inline-block;*/
	overflow:auto;
	width:200px;
	height:100px;
	border: 1px solid black;
    margin: 5px;
	background:#f5ffda;
	width:160px;
}
.punishment-inlay{
	margin:5px;
	width:150px;
}
.punishment-level{
	margin:2px;
	background:#f5ff6f;
	width:150px;
}
.a-punishment-descr{
	/*display:inline;*/
	width:200px;
	word-wrap: break-word;
	border: 1px solid black;
	margin-left:5px;
	/*float:right;*/
}

/*Cookies*/

.cookie-message{
	border: 2px solid #bfc1b7;
	
    padding: 10px;
    border-radius: 5px;
	margin-top:50px;
	display:inline-block;
	vertical-align: top;
	z-index:5;
}

/* POP-UP MESSAGES */

.popup{
	position:fixed;
	top:20px;
	margin:auto;
	width:80%;
	z-index:10;
	padding:10px;
}
.popup-alert{
	border-color: #ff0000;
	background-color: rgba(255,0,0,0.8); /*redish*/
	color:#ffffff;
}
.popup-info{
	border-color: #00ff00;
	background-color: rgba(29,55,255,0.9); /*blueish*/
}
.popup-success{
	border-color: #0000ff;
	background-color: rgba(205,255,66,0.9); /*greenish*/
}
.popup-hidden{
	display:none;
}
.cookie-message{
	
}

.stick{
	position: -webkit-sticky;
	position: sticky;
	top: 30px;
}

.main {
  float:left;
  width:60%;
  padding:0 20px;
}
.right {
  background-color:#e5e5e5;
  float:left;
  width:25%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}
.pull-left{
	float:left;
}
.pull-right{
	text-align:right;
	float:right;
}
.pull-right-text-left{
	float:right;
}
.glyphig{
	font-family: Glyph;
}
.symbs{
	font-family: Symbols;
	color:#ff0000;
}
.comic{
	font-family: Comic Sans MS;
}

.centered{
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-top: -60px;
  transform: translate(-50%, -50%);
}
.hidden{
	display:none;	
}

.greyeven{
	background:#e8e7d1;
}

.header{
	position:absolute;
}
.header-shadow{
	position:absolute;
	z-index:-1;
}
.header-wrapper{
	position:relative;
}
.header-fixed{
	position:fixed;
}
.header-fixed-menu{
	display: inline-table;
}
.header-top-menu{
	display: none;
}

.menu {
	float:left;
	width:20%;
	text-align:left;
}
.menu-hidden{
	display:none;
	
}
.menu-spacer{
	float:left;
	width:100%;
	/*text-align:left;*/
}
.menuitem {
  background-color:#e5e5e5;
  padding:8px;
  padding-left:15px;
  margin-top:7px;
  cursor:pointer;
  z-index:2;
}
.menuitem:hover{
	padding:8px;
	background-color:#ebebeb;
}
.menuitem-hidden{
	display:none;
}

/*OVERVIEW*/
.overview-all{
	display:inline-block;
}
.overview-day{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}
.overview-week{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}
.overview-month{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}
.overview-custom{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}
/* Progress bar*/
.progressbar-overview{
  background-color: #bfc1b7;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}
.progressbar-overview-water{
   background-color: #41c9fc;
   width: 0%; /* Adjust with JavaScript */
   height: 8px;
   border-radius: 10px;
}
.progressbar-overview-carbs {
   background-color: #41c9fc;
   width: 0%; /* Adjust with JavaScript */
   height: 8px;
   border-radius: 10px;
}
.progressbar-overview-fats {
   background-color: #fcd141;
   width: 0%; /* Adjust with JavaScript */
   height: 8px;
   border-radius: 10px;
}
.progressbar-overview-protein {
   background-color: #c5ec3d;
   width: 0%; /* Adjust with JavaScript */
   height: 8px;
   border-radius: 10px;
}
.progressbar-overview-kcal {
   background-color: #ec993d;
   width: 0%; /* Adjust with JavaScript */
   height: 8px;
   border-radius: 10px;
}
/*ACTION LOG*/
.log-actionentry{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	/*width:max-content;*/
	float:left;
	/*display:block;*/
	vertical-align: top;
	margin:10px;
}
.log-actionentry-top{
	float:left;
	display:inline-block;
}
.log-actionentry-name{
	font-size:20px;
	font-weight:bold;
}
.log-actionentry-time{
	
}
.log-actionentry-menge{
	
}
.log-actionentry-newday{
	border-bottom:2px solid #bfc1b7;
	height:20px;
	width:100%;
	float:left;
	padding:10px;
	/*display:block;*/
	margin:10px;
}
.log-actionentry-newday-content{
	z-index:3;
	background:#a0cc08;
	display:inline-block;
	color:#088bcc;/*0069d2*/
	border: 2px solid #bfc1b7;
    
    border-radius: 5px;
}
.log-actionentry-newday-kcalsum{
	z-index:3;
	margin-left:20px;
	background:#36bed7;
	display:inline-block;
	color:#088bcc;/*0069d2*/
	border: 2px solid #bfc1b7;
    
    border-radius: 5px;
}
.log-actionentry-newday-wattsum{
	z-index:3;
	background:#ffd736;
	display:inline-block;
	color:#088bcc;/*0069d2*/
	border: 2px solid #bfc1b7;
    
    border-radius: 5px;
}
.log-actionentry{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	/*width:max-content;*/
	float:left;
	/*display:block;*/
	vertical-align: top;
	margin:10px;
}
.log-actionentry-top{
	float:left;
	display:inline-block;
	/*border-right:1px solid #bfc1b7;
	padding-right:15px;*/
}
.log-actionentry-bottom{
	/*padding-left:15px;*/
}
.log-actionentry-name{
	font-size:20px;
	font-weight:bold;
}
/* LOG */
.log-foodentry{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	/*width:max-content;*/
	float:left;
	/*display:block;*/
	vertical-align: top;
	margin:10px;
}
.log-foodentry-top{
	float:left;
	display:inline-block;
}
.log-foodentry-name{
	font-size:20px;
	font-weight:bold;
}
.log-foodentry-time{
	
}
.log-foodentry-menge{
	
}
.log-foodentry-nutrifacts{
	width:150px;
}
.log-foodentry-newday{
	border-bottom:2px solid #bfc1b7;
	height:20px;
	width:100%;
	float:left;
	padding:10px;
	/*display:block;*/
	margin:10px;
}
.log-foodentry-newday-content{
	z-index:3;
	background:#a0cc08;
	display:inline-block;
	color:#088bcc;/*0069d2*/
	border: 2px solid #bfc1b7;
    
    border-radius: 5px;
}
.log-foodentry-newday-kcalsum{
	z-index:3;
	margin-left:20px;
	background:#36bed7;
	display:inline-block;
	color:#088bcc;/*0069d2*/
	border: 2px solid #bfc1b7;
    
    border-radius: 5px;
}
.log-foodentry-newday-proteinsum{
	z-index:3;
	background:#ffd736;
	display:inline-block;
	color:#088bcc;/*0069d2*/
	border: 2px solid #bfc1b7;
    
    border-radius: 5px;
}
.log-edit{
	
}
.log-edit:hover{
	background:#ddfb73;
}
	/*log Progress bar*/
.log-bar{
	background-color: #bfc1b7;
	border-radius: 13px; /* (height of inner div) / 2 + padding */
	padding: 3px;
}
.log-bar-fill{
   background-color: #41c9fc;
   width: 0%; /* Adjust with JavaScript */
   height: 3px;
   border-radius: 10px;
}	
.log-edit:hover{
	background-color: #ddfb73;
}
.logover{
	/*display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(230,229,221); /* Fallback color */
    /*background-color: rgba(230,229,221,0.6); /* grey w/ opacity */
	background-color: rgba(244,245,224,0.7); /* green w/ opacity */
}

/*FOODPLAN*/
.intake-plan{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}
.intake-change{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}
.intake-calc{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}

/*KCAL*/
 /* + */
.kcal-toplist-view{
	display: inline-block;
	padding-right:5px;
}
.kcal-search-view{
	display: inline-block;
	padding-right:5px;
}
.kcal-result{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
	margin-bottom:5px;
}


/*Settings*/
.settings-calculation{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}
.settings-friends{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
}

/*FOOD*/
.food-action-menu{
	position:absolute;
	display:inline-block;
	background:#ffffff;
}
.food-result{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
	margin-bottom:5px;	
}

.food-drop-down-menu{
	position:relative;
	display:inline-block;
	
}
.meal-drop-down-menu{
	position:relative;
	display:inline-block;
	
}
.compare-drop-down-menu{
	position:relative;
	display:inline-block;
	
}
.facts-drop-down-menu{
	position:relative;
	display:inline-block;
}
.food-drop-down-menu:hover .food-menu-entry{
	display:block;
}
.meal-drop-down-menu:hover .meal-menu-entry{
	display:block;
}
.compare-drop-down-menu:hover .compare-menu-entry{
	display:block;
}
.facts-drop-down-menu:hover .facts-menu-entry{
	display:block;
}

.food-drop-down-element{
	margin:10px;
	padding:5px;
	text-align:center;
	background:#eefd3e;
	cursor:pointer;
}
.meal-drop-down-element{
	margin:10px;
	padding:5px;
	text-align:center;
	background:#eefd3e;
	cursor:pointer;
}
.compare-drop-down-element{
	margin:10px;
	padding:5px;
	text-align:center;
	background:#eefd3e;
	cursor:pointer;
}
.facts-drop-down-element{
	margin:10px;
	padding:5px;
	text-align:center;
	background:#eefd3e;
	cursor:pointer;
}

.food-menu-entry{
	display:block;
	cursor:pointer;
}	
.meal-menu-entry{
	display:block;
	cursor:pointer;
}
.compare-menu-entry{
	display:block;
	cursor:pointer;
}
.facts-menu-entry{
	display:block;
	cursor:pointer;
}

.food-menu-entry:hover{
	background:#eefdd7;
}	
.meal-menu-entry:hover{
	background:#eefdd7;
}
.compare-menu-entry:hover{
	background:#eefdd7;
}
.facts-menu-entry:hover{
	background:#eefdd7;
}

.addfood-headerplus{
	padding:5px;
	width:250px;
	cursor:pointer;
}
.addfood-headerplus:hover{
	background:#f6f8d5;
}
.addfood-headerminus{
	background:#f6f8d5;
	width:250px;
	cursor:pointer;
}
.addfood-forms{
	
}

.form-input{
	
}
.anonym-kcal{
	
}
.anonym-kcal:hover{
	background:#f6f8d5;
}
.food-hint{
	padding:5px;
	display:inline-block;
}
.food-hint-eat{
	padding:5px;
	display:inline-block;
}
.food-hint-eat:hover{	
	background:#d1ff43;
}

/*ACTION*/
.action-menu{
	position:absolute;
	display:inline-block;
	background:#ffffff;
}
.action-menu-drop-menu{
	position:relative;
	display:inline-block;
}
.action-menu-drop-down-element{
	margin:10px;
	padding:5px;
	text-align:center;
	background:#eefd3e;
	cursor:pointer;
}
.action-drop-down-menu{
	
}
.action-menu-drop-down-element:hover .action-menu-entry{
	display:block;
}
.action-drop-down-menu:hover .action-menu-entry{
	display:block;
}
.action-menu-entry{
	/*display:none;*/
	cursor:pointer;
}
.action-menu-entry:hover{
	background:#eefdd7;
}
.action-view{
	padding:5px;
	display:inline-block;
}
.action-view:hover{	
	background:#d1ff43;
}
.action-compare-menu-entry:hover{
	background:#eefdd7;
}
.menu-border{
	display:inline-block;
	border: 1px solid #bfc1b7;
	padding: 5px;	
	border-radius: 5px;
	margin:10px;
}

/* ACTION ADD*/

.addactioninfo {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.addactioninfo .addactioninfotext {
    visibility: hidden;
    width: 120px;
    background-color: #d5ff06;
    color: #088bcc;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.addactioninfo .addactioninfotext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #d5ff06 transparent transparent transparent;
}

.addactioninfo:hover .addactioninfotext {
    visibility: visible;
}
.addactioninfotext{
	text-align:center;
}
/* ACTION SEARCH */

.action-all-result{
	border: 2px solid #bfc1b7;
    padding: 10px;
    border-radius: 5px;
	display:inline-block;
	vertical-align: top;
	margin-bottom:5px;	
}

.home-tree{
	
}





/* The Overlay (background) */
.over{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(230,229,221); /* Fallback color */
    /*background-color: rgba(230,229,221,0.6); /* grey w/ opacity */
	background-color: rgba(244,245,224,0.7); /* green w/ opacity */
}

/* The Overlay (menge) */
.over-menge {
    display: block; 
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /*background-color: rgb(230,229,221); /* Fallback color */
    /*background-color: rgba(230,229,221,0.6); /* grey w/ opacity */
	background-color: rgba(244,245,224,0.7); /* green w/ opacity */
}

/* Overlay Content (image) */
.over-content {
    margin: auto;
	
    display: block;
    width: 80%;
    max-width: 700px;
}
.over-header{
	background-color: #e6e6e6;
	text-align: center;
	font-size: 30px;
}
.over-body{
	background-color: #fafafa;
	min-height:200px;
}
.over-footer{
	background-color: #e6e6e6;
	padding: 10px;
	text-align:right;
}

.page-footer-top{
	background-color:#e5e5e5;
	overflow:auto;
	text-align:center;
	padding:20px;
	margin-top:7px;
	
}
.page-footer-top-wrap{
	background-color:#818688;
	overflow:hidden;
	margin:0 auto;
	/*width:50%;*/
	/*max-width:50%;*/
	text-align:center;
	align:center;
	dislpay:inline;
	
}
.page-footer-top-entry{
	float:left;
	text-align:center;
	margin:0 auto;
	padding:15px;
	color:#f6ffd0;
}
.page-footer-top-entry:hover{
	color:#ccff00;
	cursor:pointer;
}
.page-footer{
	background-color:#e5e5e5;
	/*text-align:center;*/
	padding:10px;
	margin-top:7px;
}
.footer-links{
	float:left;
	padding:15px;
}
.footer-links-head{
	font-size:14px;
	clear:left;
}
.footer-links-element{
	
}
.footer-links-social{
	
	float:left;
	padding:30px;
	padding-left:100px;
	padding-right:100px;
}
.footer-links-element-social{
	float:left;
	padding:15px;
}
.footer-last-line{
	clear:left;
	font-size: 11px;
	
}
.footer-copyright{
	float:left;
	padding:10px;
}
.footer-agb{
	float:left;
	padding:10px;
}
.footer-impr{
	float:left;
	padding:10px;
}
	

.loader-eins{
	z-index:-3;
  border: 16px solid #484f51;
  border-radius: 50%;
  border-top: 16px solid #09acdb;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}	
.loader-half{
	z-index:-3;
  border: 16px solid #484f51;
  border-radius: 50%;
  border-top: 16px solid #09acdb;
  border-right: 16px solid #ffd700;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader-dreiv{
	z-index:-3;
  border: 16px solid #484f51;
  border-radius: 50%;
  border-top: 16px solid #09acdb;
  border-right: 16px solid #ffd700;
  border-bottom: 16px solid #ff3030;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}	
.loader-full {
  z-index:-3;
  border: 16px solid #484f51;
  border-radius: 50%;
  border-top: 16px solid #09acdb;
  border-right: 16px solid #ffd700;
  border-bottom: 16px solid #ff3030;
  border-left: 16px solid #ccff00;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader-full-baby{
	float:left;
	margin-left:10px;
  z-index:-3;
  border: 4px solid #484f51;
  border-radius: 50%;
  border-top: 4px solid #09acdb;
  border-right: 4px solid #ffd700;
  border-bottom: 4px solid #ff3030;
  border-left: 4px solid #ccff00;
  width: 23px;
  height: 23px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*
	
#me {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
	*/
	

/* Caption of Overlay Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.over-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.close {
    /*position: absolute;*/
    top: 15px;
    right: 35px;
    color: #bbb;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover,
.close:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}



.footer-container{
	/*position:absolute;*/
	/*bottom:0;*/
	width:100%;
	/*background-color:#333;*/
	border-radius: 5px;
   padding: 20px;
}

.footer-impressum{
	padding:10px;
	color:#333;
	font-color:#efe1e1;
}
.impressum-content{
	
}



/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .over-content {
        width: 100%;
    }
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
  .menu{
/*display:none;*/
  }
  .menuitem{
	text-align:center;
  }
  .fixed-header-menu{
	/*display:inline-table;*/
  }
}