body{
  font-family:arial;
  background-color:#e0e0e0;
  padding:0px;
  margin:0px;
  font-family: 'Rubik', sans-serif;
  margin-bottom:65px;
}
button{
  background-color:transparent;
  padding:10px;
  border:1px solid black;
  margin-left:20px;
  margin-right:20px;
}
a, a:active, a:focus,a:visited,a:hover {
  text-decoration:none;
  color:black;
}
.saveButton, .okButton{
  color:#80CBC4;
  margin-left:10px;
}
.addButton{
  color:#80CBC4;
  margin-left:10px;
}
.editButton{
  color:#80CBC4;
  margin-left:10px;
}
.deleteButton, .deleteCustomerButton, .cancelButton{
  color:#EF9A9A;
  margin-left:10px;
}
.footerButton{

}
.footerMessage{
  width:100%;
  text-align:center;
  font-size:15px;
  font-weight:bold;
}
#footer{
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
  height:65px;
  background-color:#EEEEEE;
}
i{
  cursor:pointer
}

hr{
  border:0px;
  height: 1px;
  background: #BDBDBD;
}
.iconleft{
  margin-right:10px;
}
.phoneButton{
  margin-right:20px;
  margin-left:20px;
  color:#4cd137;
}
input,select{
  height:33px;
  border:0px solid black;
  border-bottom:1px solid #c9c9c9;
  padding:3px;
  width:180px
}
label, label select{
  width:150px;
  display:inline-block;
  font-weight:bolder;
  font-style: italic;
}
legend{
  font-weight:bold;
  padding-left:10px;
  padding-right:10px;
  padding-top:5px;
  padding-bottom:5px;
  background-color:#ECEFF1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


}
fieldset{
   border:0px;
   min-width:320px;
   background-color:#FFFFFF;
   margin-bottom:20px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nodisplay{
  display:none;
}



.grid {
 display: grid;
 grid-gap: 10px;
 grid-template-columns: repeat(auto-fit, minmax(350px,1fr));

 padding-top:10px;
 padding-bottom:10px;
 max-width:1500px;
 border:0px solid black;
 margin:0 auto;
}
.gridheader{
  grid-column: 1 / -1 ;
}
.contentarea{
  max-width:1500px;
  border:0px solid black;
  padding:10px;
  margin:0 auto;
  box-sizing: border-box;
}

h5{
  margin-block-start:0px;
  margin-block-end:0px;
}

.h30{
  height:30px;
}

ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li{
  padding:10px;
  background-color:#ffffff;
  border-radius:3px;

}
h1{
  font-size:23px;
  margin:5px;
}
h3{
  font-size:18px;
  margin:3px;
}
header{
  background-color:#ECEFF1;
  padding:10px;
  padding-left:7px;
  margin:0px;
  border-radius: 7px 7px 0px 0px;


}
section{
  margin:0px;
  padding:10px;
  border-radius: 0px 0px 7px 7px;
  background-color:#FFFFFF;
}
article{
  border-radius: 7px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.mainNav{
  height: auto;
  padding-top:5px;
  padding-bottom:5px;
  display:grid;
  grid-template-columns: auto auto auto auto auto auto;
}
.mainNav a, .mainNav span{
  text-align: center;
  font-size:0.7em;
}
.menuIcon{
  margin-left:10px;
  margin-right:10px;
}
.left{
  float:left;
}
.right{
  float:right;
}
.clb{
  clear:both;
}
.pointer{
  cursor:pointer;
}
.footercenter{
  border:0px;
  text-align: center;
  font-size:25px;
  position:fixed;
  bottom:15px;
  left:50%;
  width:200px;
  background:#FAFAFA;
  margin-left:-100px;
  font-family: 'Rubik','material-design-iconic-font', sans-serif;
}
.footercenterdiv{
  border:0px;
  text-align: center;
  position:fixed;
  bottom:10px;
  left:50%;
  width:200px;

  margin-left:-100px;
  font-family: 'Rubik','material-design-iconic-font', sans-serif;
}
input[type=search]::placeholder{
  font-style:italic;
  text-align:left;
  color:white;
}
.footerRightButton{
  position:fixed;
  right:0px;
  bottom:0px;
  margin:10px;
}
.footerCenterButton{
  position:fixed;
  text-align: center;
  bottom:0px;
  margin:10px;
}
.footerLeftButton{
  position:fixed;
  left:0px;
  bottom:0px;
  margin:10px;
}
.loginInput{
  -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   background:transparent;
   border:0px;
   width:150px;
}
.top{
  margin-top:-20px;
}


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #EF9A9A;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #80CBC4;
}

input:focus + .slider {
  box-shadow: 0 0 1px #80CBC4;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


form{
  margin:0px;
}
.label{
  font-size:0.85em;
  font-style:italic;
  padding:5px;
  border-radius:0.6em;
  color:white;
}
.label a{
  color:white;
}
.yellow{
  background-color:#e1b12c;
}
.red{
  background-color:#f44242;
}
.green{
  background-color:#44bd32;
}
.petrol{
  background-color:#009688;
}
.violet{
  background-color:#673AB7;
}
.white{
  background-color:#ffffff;
}
.blue{
  background-color: #273c75;
}
.baby{
  background-color: #00a8ff;
}
.lightblue{
  background-color: #90CAF9;
}

.bgEinzahlung, .bgAuszahlung{
  background-color:#e1b12c;
}
.bgBehandlung{
  background-color: #273c75;
}
.bgGutschein{
  background-color: #00a8ff;
}
img {
  image-orientation: from-image;
}

.listitemgrid{
  display:grid;grid-template: 20px auto 20px/ auto 40px;
  grid-template-areas: 
  "header right"
  "main right"
  "footer footer"; 
}
.listitemheader{
  grid-area: header;
}
.listitemright{
  grid-area:right;
}
.listitemfooter{
  grid-area:footer;
}

.search{
  width:100px !important;
  color:white;
}

.templateElement{
  font-size:12px;
  font-style: italic;
  margin:4px;
  display:inline-block;
  cursor:pointer;
  white-space: nowrap;  
}

.fas{
  font-size:1.5em;
}

.fa-edit{
  font-size:2em;
}
.fa-check{
  color:green;
}
.fa-clock, .fa-ban{
  color:red;
}
.fa-times{
  color:orange;
}


#loader{
  display:none;
  position:fixed;
  left:0px;
  top:0px;
  width:100vw;
  height:100vh;
  background-color:rgba(255,255,255,0.5);
}
#loader img{
  position:fixed;
  left:50vw;
  top:50vh;
  width:200px;
  height:200px;
  margin-top:-100px;
  margin-left:-100px;
  z-index:9999;
}