@media all {

  #subMenu .navbar-nav > .nav-item > .nav-link {
    padding-block: 1rem;
    font-weight: 400;
    font-size: 1em;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      background-size: 100% var(--size-10);
      background-position: center 40%;
      background-repeat: no-repeat;
      margin-inline: calc(var(--size-2)* -1);
      opacity: 0;
      transition: var(--transition-default);
      transition-property: opacity;
      background-image: url("../../../../dw_base_tdh/Resources/Public/Images/MainNav/mainnav-hover-active-red.png");
      background-position: center 66%;
    }

    &:is(:hover, :focus-visible)::before {
      opacity: 1;
    }

  }

  #subMenu .navbar-nav > .nav-item.active > .nav-link::before {
    opacity: 1;
  }


}

@media (min-width: 62rem) {

}