/* COLORED SKIN
 ================================*/
.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo) .navigation-link {
  z-index: 1;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo) .navigation-link:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: -1;
  transition: background 0.3s;
}

.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):hover .navigation-link,
.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):focus .navigation-link,
.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text).is-active .navigation-link {
  color: #fff;
  border-color: #887ef2;
}

.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):hover .navigation-link:after,
.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):focus .navigation-link:after,
.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text).is-active .navigation-link:after {
  background-color: #7367F0 !important;
}

.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):hover > .navigation-link > .submenu-indicator:after,
.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text):focus > .navigation-link > .submenu-indicator:after,
.navigation-menu:not(.navigation-social-menu) .navigation-item:not(.navigation-avatar-item):not(.navigation-logo):not(.navigation-brand-text).is-active > .navigation-link > .submenu-indicator:after {
  border-color: transparent #fff #fff transparent;
}

.navigation-dropdown-link {
  transition: border 0.3s, color 0.3s, background 0.3s;
}

.navigation-dropdown-item:hover > .navigation-dropdown-link,
.navigation-dropdown-item:focus > .navigation-dropdown-link,
.navigation-dropdown-item.is-active > .navigation-dropdown-link {
  color: #fff;
  background-color: #7367F0;
  border-color: #887ef2;
}

.navigation-dropdown-item:hover > .navigation-dropdown-link > .submenu-indicator:after,
.navigation-dropdown-item:focus > .navigation-dropdown-link > .submenu-indicator:after,
.navigation-dropdown-item.is-active > .navigation-dropdown-link > .submenu-indicator:after {
  border-color: transparent #fff #fff transparent;
}

.navigation-list > li > a {
  color: #555d65;
}

.navigation-list > li > a:hover {
  color: #fff;
  background-color: #7367F0;
}