body {
    background-color: #f8f9fa;
    background-image: url('../images/bg-home.jpg');
    background-size: cover;
    background-attachment: fixed;
}
.hero {
    background-color: rgb(15, 84, 126, 0.5);
    height: 50vh;
    background-size: cover;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.navbar-nav .nav-link {
    padding: 0.375rem 0.75rem;
    margin: 0 0.25rem;
}
@media (min-width: 768px) {
    .navbar-nav {
        align-items: center;
    }
}
.service-cell {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s;
}
.service-cell:hover {
    color: #222;
    background-color: #F5B027;
}
#steps {
    margin-bottom: 2.5rem;
    border: 1px solid #555;
}
#steps > .col {
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s;
}
.active {
    background-color: #eea3a3;
    color: beige;
}
.pointer {
    cursor: pointer;
}

.ele-hide {
  display: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#calendar {
  border: 1px solid #555;
  margin: 0.5rem;
  /*cursor: pointer;*/
}
.col-date {
  flex: unset;
  width: 14.28%;
  border: 1px solid #777;
}
.col-date:hover {
  background-color: darkgray;
}
.highlight {
  color: red;
  background-color: yellow;
}
.profile-card:hover {
  background-color: #FFFAA0;
  cursor: pointer;
}
.profile-img {
  width: 120px;
  height: 120px;
  border: 8px solid #9B5DE5;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
}
.profile-img:hover {
  cursor: pointer;
}
.profile-desc {
  padding-left: 0.5rem;
}

#booking-time, #login {
  display: none;
}

.time-table, .login-register {
  display: flex;
}
.time-table > div, .login-register > div {
  width: 49%;
}

.menu-customer {
  position: fixed;
  z-index: 1;
  top: 54px;
  right: 20px;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  color: #FFF;
  padding: 0 0.7rem;
}