/* global */
.cursor-pointer {
  cursor: pointer;
}

input::placeholder {
  color: #858585 !important;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out; 
}  

.fade-in.show {
  opacity: 1;
} 

.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease-in-out, transform 1s ease-in-out; 
  /* transform: translateX(0);  */
}

.fade-out.hidden {
  opacity: 0; 
  /* transform: translateX(100%);  */
}




/* !===> side nav <=== */
.navSideMenu {
  width: 260px;
  position: fixed;
  top: 0px;
  left: -260px;
  z-index: 900;
}

.navHeader {
  width: 66px;
  position: fixed;
  top: 0px;
  left: 0px;
}

.navMenu {
  width: 260px;
  position: relative;

}

.closebtn {
  height: 75vh;
}


.navMenu .navFooter {
  /* margin-top: 340px; */
  position: absolute;
  bottom: 30px;

}

.pages li {
  position: relative;
  top: 200px;
}



/* !===> meal layer <===! */

.col-md-3 .meal-layer {
  background-color: rgba(255, 255, 255, 0.49);
  position: absolute;
  top: 0px;
  left: 11px;
  right: 11px;
  bottom: 0px;
  transform: translateY(100%);
  transition: transform 0.5s
}

.col-md-3:hover .meal-layer {
  transform: translateY(0);
}


/* !===> Loader <===! */

.loading {
  z-index: 999;
  display: flex;
}

.inner-loading-screen {

  z-index: 800;
  background-color: #0D0D0D;
}