/*
Border-bottom Skin
*/

/* Menu items */
.menuzord-menu > li > a {
  padding: 26px 16px 22px;
  border-bottom: solid 4px transparent;
  -o-transition: border 0.3s linear;
  -moz-transition: border 0.3s linear;
  -webkit-transition: border 0.3s linear;
  transition: border 0.3s linear;
}

/* Active/hover state (menu items) */
.menuzord-menu > li.active > a,
.menuzord-menu > li:hover > a {
  color: #333;
  border-bottom-color: #333;
}

/* Hover state (dropdown items) */
.menuzord-menu ul.dropdown li:hover > a {
  color: #333;
}

/* Color schemes */
/* blue */
.menuzord.blue .menuzord-menu > li.active > a,
.menuzord.blue .menuzord-menu > li:hover > a,
.menuzord.blue .menuzord-menu ul.dropdown li:hover > a {
  color: #4a89dc;
}
.menuzord.blue .menuzord-menu > li.active > a,
.menuzord.blue .menuzord-menu > li:hover > a {
  border-bottom-color: #4a89dc;
}
/* green */
.menuzord.green .menuzord-menu > li.active > a,
.menuzord.green .menuzord-menu > li:hover > a,
.menuzord.green .menuzord-menu ul.dropdown li:hover > a {
  color: #37bc9b;
}
.menuzord.green .menuzord-menu > li.active > a,
.menuzord.green .menuzord-menu > li:hover > a {
  border-bottom-color: #37bc9b;
}
/* red */
.menuzord.red .menuzord-menu > li.active > a,
.menuzord.red .menuzord-menu > li:hover > a,
.menuzord.red .menuzord-menu ul.dropdown li:hover > a {
  color: #e9573f;
}
.menuzord.red .menuzord-menu > li.active > a,
.menuzord.red .menuzord-menu > li:hover > a {
  border-bottom-color: #e9573f;
}
/* orange */
.menuzord.orange .menuzord-menu > li.active > a,
.menuzord.orange .menuzord-menu > li:hover > a,
.menuzord.orange .menuzord-menu ul.dropdown li:hover > a {
  color: #ff670f;
}
.menuzord.orange .menuzord-menu > li.active > a,
.menuzord.orange .menuzord-menu > li:hover > a {
  border-bottom-color: #ff670f;
}
/* yellow */
.menuzord.yellow .menuzord-menu > li.active > a,
.menuzord.yellow .menuzord-menu > li:hover > a,
.menuzord.yellow .menuzord-menu ul.dropdown li:hover > a {
  color: #f6bb42;
}
.menuzord.yellow .menuzord-menu > li.active > a,
.menuzord.yellow .menuzord-menu > li:hover > a {
  border-bottom-color: #f6bb42;
}
/* purple */
.menuzord.purple .menuzord-menu > li.active > a,
.menuzord.purple .menuzord-menu > li:hover > a,
.menuzord.purple .menuzord-menu ul.dropdown li:hover > a {
  color: #967adc;
}
.menuzord.purple .menuzord-menu > li.active > a,
.menuzord.purple .menuzord-menu > li:hover > a {
  border-bottom-color: #967adc;
}
/* pink */
.menuzord.pink .menuzord-menu > li.active > a,
.menuzord.pink .menuzord-menu > li:hover > a,
.menuzord.pink .menuzord-menu ul.dropdown li:hover > a {
  color: #d770ad;
}
.menuzord.pink .menuzord-menu > li.active > a,
.menuzord.pink .menuzord-menu > li:hover > a {
  border-bottom-color: #d770ad;
}

/* yellow */
.menuzord.primary .menuzord-menu > li.active > a,
.menuzord.primary .menuzord-menu > li:hover > a,
.menuzord.primary .menuzord-menu ul.dropdown li:hover > a {
  color: var(--primary-color);
}
.menuzord.primary .menuzord-menu > li.active > a,
.menuzord.primary .menuzord-menu > li:hover > a {
  border-bottom-color: var(--primary-color);
}

/* Mobile mode (Responsive mode) */
@media (max-width: 768px) {
  /* Menu items */
  .menuzord-responsive .menuzord-menu > li > a {
    padding: 12px 20px !important;
    border-bottom-width: 1px;
  }
}