html {
    height: 100%;
}

body {
    /* font-family: Lato; */
	height: 100%;
}

receipt .receipt #receipt {
	white-space: pre !important;
	font-family: 'Roboto Mono', monospace !important;
}


/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("restaurant-banners-splash.jpg");

  /* Set a specific height */
  height: 50%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

.navbar {
  min-height: 80px;
}
.mco-banner {
  max-width: 75%;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.card-qr {
  border: 0px !important;
}


.social {
  text-align: center;
  padding-bottom: 25px;
}

.social > a:hover {
  opacity: 0.9;
}

.social > a {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: 0 8px;
  color: inherit;
  opacity: 0.75;
}

.slider.slider-horizontal {
    width: 100%;
}
.slider-handle {
	width: 50px;
    height: 50px;
    background-color: red;
}
slider-track .slider-track #slider-track{
    height: 50px !important;
   
}