/*
 Theme Name:   Garten App
 Description:  Mein Child Theme
 Author:       Webtimiser
 Author URI:   http://www.webtimiser.de
 Template:     twentyfifteen
 Version:      1.0
 Text Domain:  twenty-fifteen-child
*/
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@-webkit-keyframes done {
    0% { transform: translateX(0px); }
    50% { transform: translateX(20px); }
	100% { transform: translateX(0px); }
}  
@keyframes done {
    0% { transform: translateX(0px); }
    50% { transform: translateX(20px); }
	100% { transform: translateX(0px); }
}
@-webkit-keyframes upshadow {	
	0%  {transform: translateZ(0px); opacity: 1; -webkit-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; -moz-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px;}
	40% {transform: translateZ(10px); opacity:1; background-color: rgba(76, 175, 80, 0.7); -webkit-box-shadow: rgba(204, 204, 204, 0.7) 10px 10px 10px; -moz-box-shadow: rgba(204, 204, 204,  0.7 ) 10px 10px 10px; box-shadow: rgba(204, 204, 204, 0.7) 10px 10px 10px; }
	100%  {transform: translateZ(0px); opacity:1; -webkit-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; -moz-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px;}
}

@keyframes upshadow {	
	0%  {transform: translateZ(0px); opacity: 1; -webkit-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; -moz-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px;}
	40% {transform: translateZ(10px); opacity:1; -webkit-box-shadow: rgba(204, 204, 204, 0.7) 10px 10px 10px; -moz-box-shadow: rgba(204, 204, 204,  0.7 ) 10px 10px 10px; box-shadow: rgba(204, 204, 204, 0.6) 10px 10px 10px; }
	100%  {transform: translateZ(0px); opacity:1; -webkit-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; -moz-box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px; box-shadow: rgba(54, 54, 54, 0.3) 0px 0px 0px;}
}


body:before { display:none !important; }

	.site-content {
		float: none;
		margin-left: 0;
		width: 100%;
	}

.site-main { padding:0 !important; }
.hentry { padding-top: 2vw !important; background-color: whitesmoke;}

button {  font-weight: inherit; }

.dobtn { color:#fff; cursor: pointer; font-size: 1em; background-color: #7B564F; padding:15px 25px; margin: 0 10px 0 0; transition: all 0.3s ease-in-out; border: 0 !important; font-family: calibri; font-weight: 400; display:block;}
.dobtn:hover, .dobtn:active, .dobtn:focus { color: #fff; background-color: #666 !important; text-decoration: underline; transition: all 0.3s ease-in-out;} 

@media only screen and (max-width: 850px) { .dobtn  { width:100% !important; float:none; margin-bottom:5px !important;} }

.panel input, .panel textarea, .panel select { background-color: #fff !important; max-height: 120px;}

div.garten-app {
	margin-top:20px; 
	margin-bottom:100px !important;
	font-family: Roboto;
}
.mobile-full {border-radius:4px;}


@media only screen and (max-width: 850px) {
	.half { width:100% !important; }
	.garten-app ul.row li span { width:100% !important; }
	.mobile-full {width:99% !important;}

}

.garten-app input, .garten-app textarea, .garten-app select {
	width:100%;
	font-family: roboto;
	border-radius: 4px;
}

.garten-app textarea {
	font-weight:normal;
	font-size: 0.9em;
	line-height:1.2em;
    font-family: Roboto;
	min-height:8em;
	max-height: 50vh;
		width:100%;		
	resize:vertical;
}

.garten-app textarea::placeholder, .garten-app input::placeholder {
	font-weight:normal;
	font-size: 1em;
    font-family: Roboto;
	opacity:0.5;
}

.garten-app input[type="number"] {
	padding: 6px 4px;
    font-size: 1em;
    font-family: roboto;
    width: 4em;
}

.garten-app select {
	height: 2em;
}

.garten-app input[type="radio"] {
	width:initial;
}
.garten-app ul.row { margin-left:0 !important; padding-top:5px; padding-bottom:5px; }
.garten-app .row li { width:100%; background-color:#fff; list-style: None; border-left: 4px solid #fff;}
.garten-app .row li:nth-child(even) { background-color:#f4f4f4; }
.garten-app ul.row li span { display:inline-block; padding:5px;}
.garten-app .row li:hover { border-left: 4px solid green; }
.garten-app .row li input, .garten-app .row li label { padding:5px; }
label:hover, label:focus, label:active, input:hover+label, input:focus+label, input:active+label, input:checked+label { color: green !important; transition: all 0.3s ease-in-out; }

.form_heading {
    padding: 5px 20px;
    font-weight: normal;
    background-color: #fff;
    border-radius: 10px;
	border: solid 1px green;
    font-size: 20px;
    color: green;
    /* border: dashed 1px rgba(0,0,0,2);
    font-size: 18px;
    color: #333; */
	-webkit-box-shadow: 5px 5px 12px 0px rgba(102,102,102,0.1);
-moz-box-shadow: 5px 5px 12px 0px rgba(102,102,102,0.1);
box-shadow: 5px 5px 12px 0px rgba(102,102,102,0.1);
}

.form_box {
font-family: calibri;
    padding: 15px 15px 15px 15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: dashed 1px rgba(0,0,0,0.5);
    margin-bottom: 10px;
    background-color: #fefefe;
    font-weight: bold;
    font-size: 17px;
    color: rgba(0,0,0,0.8);
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
    background: #fff;
    background: #feffff;
    background: -moz-linear-gradient(top,rgba(254,255,255,1) 0,rgba(252,252,252,1) 100%);
    background: -webkit-linear-gradient(top,rgba(254,255,255,1) 0,rgba(252,252,252,1) 100%);
    background: linear-gradient(to bottom,rgba(254,255,255,1) 0,rgba(252,252,252,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff',endColorstr='#fcfcfc',GradientType=0);
	-webkit-box-shadow: 3px 3px 3px 0px rgba(102,102,102,0.1);
-moz-box-shadow: 3px 3px 3px 0px rgba(102,102,102,0.1);
box-shadow: 3px 3px 3px 0px rgba(102,102,102,0.1);
}
.group-of-half:after {
    content: "";
    display: table;
    clear: both;
}

.half:nth-child(even) {
    margin-right: 2%;
}
.half {
    width: 49%;
    margin-left: 0;
    margin-right: 0;
    float: left;
	margin-bottom: 1em;
}

button {margin-bottom:5px; background-color:#7B564F !important;}

#overlay { position:fixed; width:100vw; height: 100vh; left:0; top:0; background-color:#fff; opacity:0.99;  -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;}
#overlay button { width:100%; height:100%; opacity:0.9;}

#pflanzen #overlay button { width:100%; height:100%; opacity:0.9;}


#ganzes-feld {  display: grid;
    height: 50%;
	width:50%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25%;
    grid-gap: 1% 1%;
    grid-template-areas: ". ." ". .";
    margin: 10% auto;}

#ganzes-feld-anzeige {  display: grid;
    height: 50%;
	width:100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25%;
    grid-gap: 1% 1%;
    grid-template-areas: ". ." ". .";
    margin: 0 auto;}

#ganzes-feld-anzeige button {
	border-bottom: 3px solid #fff;
    border-right: 3px solid #999;
}

#teil-von-ganzes-feld {  display: block;
    height: 75%;
	width: 75%;
    margin: 10% auto;}
.row-von-teil-ganzes-feld { width:100%; margin-bottom:1%;}
.teil-ganzes-feld {  }

#anzeige_pflanze_im_feld {  display: grid;
	width:90%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25%;
    grid-gap: 2% 2%;
    grid-template-areas: ". ." ". .";
    margin: 0;}

#anzeige_pflanze_im_feld button {
	border-bottom: 3px solid #fff;
    border-right: 3px solid #999;
}


button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus { transition: all 0.6s ease-in-out; }


/* plus minus buttons */
.qty {
    width: 50px !important;
    text-align: center;
}
input.qtyplus { width:25px  !important; }
input.qtyminus { width:25px  !important; }


/* -- quantity box -- */

.quantity {
 display: inline-block; }

.quantity .input-text.qty {
 width: 35px;
 height: 58px;
 padding: 0 5px;
 text-align: center;
 background-color: #fff !important;
 border: 1px solid #efefef;
	font-weight: bold;
    color: #333;
    font-size: 32px;
    font-family: calibri;
}

@media only screen and (max-width: 850px) {
.quantity .input-text.qty {
 width: 34% !important;
 height: 100px;
	}
.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
 height: 100px !important;
 width: 33% !important; }
	.quantity.buttons_added { width:100%; }
}


.quantity.buttons_added {
 text-align: left;
 position: relative;
 white-space: nowrap;
 vertical-align: top; }

.quantity.buttons_added input {
 display: inline-block;
 margin: 0;
 vertical-align: top;
 box-shadow: none;
}

.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
 padding: 7px 10px 8px;
 height: 58px;
 width: 50px;
	border-radius:4px;
 background-color: #eee;
	color:#333;
 border: 1px solid #fff;
 cursor:pointer;
 font-size:32px;
}

.quantity.buttons_added .minus {
 border-right: 0; }

.quantity.buttons_added .plus {
 border-left: 0; }

.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
/* background: #999; */ }

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 -moz-appearance: none;
 margin: 0; }
 
 .quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
 outline: none; }



/* Pflanze Belegungsplan*/
.pflanze {width:200px; height:200px; padding:10px; background-color:#f9f9f9; border: 1px solid #f1f1f1; font-family:calibri; border-radius:8px; text-align: center; float:left;  margin:15px;}
.pflanze-titel {min-width: 90%; font-size:14px !important; margin:0 auto;}
.pflanze-info {min-width: 90%; font-size:14px !important; margin:0 auto; }
.pflanze-plusminus {min-width:90%; margin-bottom:10px;}
.pflanze-klein {width:10vw; height:8vh; padding:10px; background-color:#f9f9f9; border: 1px solid #f1f1f1; font-family:calibri; border-radius:8px; text-align: center; float:left;  margin:15px;}


.feld {max-width: 100%; width: 100vw; max-height: 100%; height: 100vh; background-color:#666; display:grid;}
.viertel-feld {float:left; width: 49.99999%; height:100%; background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); border: 1px solid #666;}


/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee !important;
    color: #444;
    cursor: pointer;
    padding: 8px 12px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	border-radius:8px;
	border-top: 2px solid #fff;
    border-bottom: 1px solid #666;

}
.accordion.active {background-image: repeating-linear-gradient(45deg, transparent, transparent 75%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,.4) 100%) !important;}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc !important; 	
}
/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
	background: #f9f9f9;
		border: 1px dashed #ddd;
	margin-bottom:10px;
	font-family:calibri;
	border-radius: 8px;
}
.active +.panel {
	padding: 18px 18px; }

button.accordion:after {	
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f078";	
    color: #333;
    font-weight: bold;
    float: right;
    margin: 5px;

}
button.accordion.active:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
button.accordionwhite:after, button.accordionwhite.active:after { color: #fff !important; margin-top:10px; text-shadow: 0px 1px #333;}


.dobutton {background-color:#333 !important; color:#fff !important; font-size:16px; border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; overflow: hidden; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;}


#tasklist img {box-shadow: 0px 1px #444;}
a.iconlink {text-decoration: none; outline: 0; border-bottom: 0 !important; font-weight: unset;
    padding: 10px 20px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-bottom: 1px solid #bbb;
    border-radius: 12px;
    font-size: 16px;}


button.flaeche {
	background-color: #49b293;
	width: 500px;
	height: 160px;
	margin: 5px auto 0 auto;
	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(0px, 0px, 0px);
}
button.flaeche:nth-of-type(1) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(460px, 80px, 0px); }
button.flaeche:nth-of-type(2) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(230px, 40px, 0px); }
button.flaeche:nth-of-type(3) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(0px, 0px, 0px); }
button.flaeche:nth-of-type(4) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(-230px, -40px, 0px); }
button.flaeche:nth-of-type(5) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(360px, 10px, 230px); }
button.flaeche:nth-of-type(6) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(120px, -420px, 230px); }
button.flaeche:nth-of-type(7) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(-120px, -850px, 230px); }
button.flaeche:nth-of-type(8) { 	transform: rotateX(60deg) rotateY(0deg) rotateZ(
		45deg) translate3d(-360px, -1270px, 230px); }

.pflanzzeit {
  margin-left:8.3%;
  width:80%;
  background-color: green;
  height: 15px;
  
}
.erntezeit {
  margin-left: 16.6%; width: 70%;
  background-color: red;
  height: 15px;
  margin-top: -15px; /* to overlap */
}

.pulse {

  position: relative;
  width: 40px;
  height: auto;
  border: none;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  border-radius: 50%;
  background-color: #e84c3d;
 
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse:hover 
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);}}

.animationfeldwahl {    animation-name: upshadow;
    animation-duration: 4s;
    animation-iteration-count: infinite;}

.pflanzen_beschreibung { width:100%; text-align: justify; }

.pflanzen_beschreibung h3 { margin:15px 0 0 0 !important; }
.pflanzen_beschreibung p { margin:0 0 10px 0 !important; }

#kalender {font-family: calibri; margin: 10px auto; margin-bottom:35px; }
#kalender th {text-align: center; background-color:#f9f9f9 !important;}
#kalender ul {margin:0 !important;}
#kalender tr {background-color:#e9e9e9 !important;}
#kalender table {border-radius:5px;}

#kalender .pflanzenname {vertical-align: top;}
#kalender .monat-box {padding: 0 !important;}
#kalender .monat-liste {list-style: none; margin-bottom:2px !important;}
#kalender .vorzucht {height: 15px; width:100%; background-color:rgba(255, 255, 255, 0.6); margin: 4px 0 !important;}
#kalender .einpflanzen {height: 15px; width:100%; background-color:rgba(255, 255, 255, 0.6);}
#kalender .ernten {height: 15px; width:100%; background-color:rgba(255, 255, 255, 0.6); margin: 4px 0 !important;}
#kalender .farbe-vorzucht {  background-color:#FFD129 !important; }
#kalender .farbe-einpflanzen { background-color:#95AE39 !important; }
#kalender .farbe-ernten {  background-color:#D42E20 !important; }
#kalender .start { border-top-left-radius:10px; border-bottom-left-radius:10px;}
#kalender .ende { border-top-right-radius:10px; border-bottom-right-radius:10px;}
#kalender table, th, td { border: 1px solid rgba(51, 51, 51, 0.2);}
#kalender td { border-width: 0 1px 4px 0; }

#new_plant_form select { font-family: calibri; }
#new_plant_form option:first-child { font-size: 14px !important; color: #333 !important;  }

#new_plant_form li { padding:5px;}

.input-checkbox {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  width: 0;
  height: 0;
}

.label-checkbox {
  position: relative;
  cursor: pointer;
  padding-left: 40px;
  padding-top: 2px;
}

.input-checkbox:before,
.input-checkbox:after {
  cursor: pointer;
  content: '';
  box-sizing: border-box;
  display: block;
  position: absolute;
}

.input-checkbox:before {
  background-color: #ccc;
  width: 36px;
  height: 16px;
  border-radius: 8px;
  top: 7px;
  left: 2px;
	
}
.input-checkbox:after {
  background-color: #999;	
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 5px;
  left: 0;
  transition: left 0.1s;
-webkit-box-shadow: 3px 3px 3px 0px rgba(102,102,102,0.1);
-moz-box-shadow: 3px 3px 3px 0px rgba(102,102,102,0.1);
box-shadow: 3px 3px 3px 0px rgba(102,102,102,0.1);
}

.input-checkbox:checked:before {
  background-color: #8FBC8F;
  
}
.input-checkbox:checked:after {
  background-color: #228B22;
  left: 18px;
}

.input-checkbox:focus { outline: none !important; border: none !important; background-color:transparent; }



.slider {
    -webkit-appearance: none;
    width: 50% !important;
    height: 15px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
	background: rgb(255,127,129);
background: -moz-linear-gradient(left, rgba(255,127,129,1) 0%, rgba(153,153,153,1) 50%, rgba(153,153,153,1) 50%, rgba(153,153,153,1) 50%, rgba(86,173,115,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,127,129,1) 0%,rgba(153,153,153,1) 50%,rgba(153,153,153,1) 50%,rgba(153,153,153,1) 50%,rgba(86,173,115,1) 100%);
background: linear-gradient(to right, rgba(255,127,129,1) 0%,rgba(153,153,153,1) 50%,rgba(153,153,153,1) 50%,rgba(153,153,153,1) 50%,rgba(86,173,115,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f81', endColorstr='#56ad73',GradientType=1 );
}

.slider:hover {
    opacity: 1;
}

.slider:focus {
  outline: none; 
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 30px;
    background: #fff;
	border: 1px solid #333;
	border-radius: 2px;
    cursor: pointer;
-webkit-box-shadow: 3px 3px 5px 0px rgba(102,102,102,0.8);
-moz-box-shadow: 3px 3px 5px 0px rgba(102,102,102,0.8);
box-shadow: 3px 3px 5px 0px rgba(102,102,102,0.8);
}

.slider::-moz-range-thumb {
    width: 15px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}


#log ul {font-family: calibri; list-style: none; border: 1px solid #ddd; border-radius:5px;}
#log li:nth-child(odd) { background-color:#f9f9f9; font-size: 15px; padding:5px;  }
#log li:nth-child(even) { background-color:#eee; font-size: 15px; padding:5px; }

.donee {animation-name: done;
    animation-duration: 4s;
    animation-iteration-count: infinite; -webkit-box-shadow: 3px 3px 5px 0px rgba(102,102,102,0.8);
-moz-box-shadow: 3px 3px 5px 0px rgba(102,102,102,0.8);
box-shadow: 3px 3px 5px 0px rgba(102,102,102,0.8);}

.box-content { 
	/* background-color: #f9f9f9; 
	border:1px solid #ddd; 
	padding: 15px; */
	border-radius: 4px; 
	font-family:calibri; 
	min-height: 75px; 
	margin: 0 0 10px 0; }


.schnellwahlicon {cursor: pointer; list-style:none; width:70px; height:70px; text-align:center; float:left; margin: 0 8px 15px 8px; padding:10px; background-color: #fff; border-radius:5px; border:1px solid #ddd; -webkit-box-shadow: 3px 3px 5px 0px rgba(153,153,153,0.2);-moz-box-shadow: 3px 3px 5px 0px rgba(153,153,153,0.2); box-shadow: 3px 3px 5px 0px rgba(153,153,153,0.2); background: -moz-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(249,249,249,1) 49%, rgba(254,254,254,1) 51%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(249,249,249,1) 49%,rgba(254,254,254,1) 51%,rgba(255,255,255,1) 100%);
background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(249,249,249,1) 49%,rgba(254,254,254,1) 51%,rgba(255,255,255,1) 100%);}


.schnellwahlicon:hover, .schnellwahlicon:focus,  .schnellwahlicon:active {background: rgb(255,255,255);}

.liste-reihe {    background-color: #ddd;
    list-style: none;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 2px;}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

#pflanz_interface select {     
	width:100%;
	padding: 10px 16px;
    color: darkslategrey; 
	-webkit-box-shadow: rgba(204, 204, 204, 0.4) 1px 2px 15px; -moz-box-shadow: rgba(204, 204, 204, 0.4) 1px 2px 15px; box-shadow: rgba(204, 204, 204, 0.4) 1px 2px 15px; }

#footer_bar { position:fixed; width:100vw; height: 14vh; left:0; bottom:0; background-color:whitesmoke; opacity:1; z-index:99999; text-align:center; padding-top:10px; border-top: 1px solid #fff; -webkit-box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.25);
box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.25);}
#footer_bar button { width:20%; padding:5px; border-radius:5px; margin: auto 1.5%; border-top: 2px solid #fff; background-color: #fff !important; color: #000c44 !important; border:1px solid #000c44; box-shadow: 3px 3px 5px 0px rgba(153,153,153,0.2);
    background: -moz-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(249,249,249,1) 49%, rgba(254,254,254,1) 51%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(249,249,249,1) 49%,rgba(254,254,254,1) 51%,rgba(255,255,255,1) 100%);
    background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(249,249,249,1) 49%,rgba(254,254,254,1) 51%,rgba(255,255,255,1) 100%);}

@keyframes move {	
	0%  { transform: rotateY(0deg); }
	100%  { transform: rotateY(360deg); }
}
button:focus i {    animation-name: move;
    animation-duration: 1.5s;
    animation-iteration-count: 1;}
@keyframes bam {	
	0%  { transform: scale(1); z-index: 9999999;  opacity: 1;   }
	100%  { transform: scale(10); z-index: 9999999; opacity: 0.1; }
}
.baem {    animation-name: bam;
    animation-duration: 2s;
    animation-iteration-count: 1;}
@keyframes jump {	
	0%  { transform: translateY(0px); z-index: 9999999;  opacity: 1;   }
	100%  { transform: translateY(-8px); z-index: 9999999; opacity: 0.1; }
}
.jump {    animation-name: jump;
    animation-duration: 1s;
    animation-iteration-count: 1;}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {animation-name: fadeInUp;
    animation-duration: 1s;
    animation-iteration-count: 1;}

 @keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
	 30% {   opacity: 0;}
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInDown {animation-name: fadeInDown;
    animation-duration: 0.8s;
    animation-iteration-count: 1;}

@keyframes bargo {
  from {
    width:0%;
  }
}
.bargo {animation-name: bargo;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

@keyframes animatebar {
  from {
    height:0px;
  }
}
.animatebar {animation-name: animatebar;
    animation-duration: 1s;
    animation-iteration-count: 1;}


@keyframes feedback {
  0% {
    background-color: #eee !important;
  }
20% {
    background-color: #bbb !important;
	font-size:40px;
  }
  100% {
    background-color: #eee !important;
  }
}
.feedback {animation-name: feedback;
    animation-duration: 0.3s;
    animation-iteration-count: 1;}

@keyframes feedbackf {
  0% {
  }
25% {
	font-size:40px; opacity:0.8;
  }
  100% {
  }
}
.feedback-font {animation-name: feedbackf;
    animation-duration: 0.3s;
    animation-iteration-count: 1;}

.chart{
  width: 100%;
  min-height: 400px;
}

.mainmenu-btn {border-top: 2px solid #fff; border-radius: 4px; width:28% !important; margin: 1.5% 0; -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.23); -ms-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.23); -o-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.23); box-shadow: 0 1px 20px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.23);}
.mainmenu-btn-active, .mainmenu-btn:active, .mainmenu-btn:focus, .mainmenu-btn:hover {background-color: #444 !important; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}