[data-component-id="amphibios:menu_main"]{
  --bs-navbar-active-color:#4E5EE2;
  .dropdown:hover .dropdown-menu:not(.show) {
    display: none;
  }
}

@media only screen and (min-width: 1200px) {
  [data-component-id="amphibios:menu_main"] {
    a.nav-link.dropdown-toggle:after,
    span.nav-link.dropdown-toggle:after{
      background-color: transparent;
      background-image: url("./images/icon-arrow-down.svg");
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: right center;
      width: 16px;
      height: 16px;
      border: none;
      position: absolute;
      margin-left:10px;
    }
    a.nav-link,
    span.nav-link,
    a.nav-link:checked,
    span.nav-link:checked{
      height: 60px;
      padding-top: 20px;
      padding-bottom: 20px;
      margin-left: 0px;
      margin-right: 16px;
      font-weight: 400;
      font-size: 20px;
      line-height: 100%;
      font-family: OpenSans, sans-serif;
      color: #0F2066;
    }
    a.nav-link.dropdown-toggle,
    span.nav-link.dropdown-toggle{
      padding-right: 32px;
    }

    a.show.nav-link.dropdown-toggle:after,
    span.show.nav-link.dropdown-toggle:after,
    a.nav-link.dropdown-toggle:focus:after,
    span.nav-link.dropdown-toggle:focus:after,
    a.nav-link.dropdown-toggle:active:after,
    span.nav-link.dropdown-toggle:active:after,
    a.nav-link.dropdown-toggle.active:after,
    span.nav-link.dropdown-toggle.active:after,
    a.nav-link.dropdown-toggle:checked:after,
    span.nav-link.dropdown-toggle:checked:after,
    a.nav-link.dropdown-toggle:hover:after,
    span.nav-link.dropdown-toggle:hover:after{
      background-image: url("./images/icon-arrow-down-active.svg");
    }

    a.show.nav-link,
    span.show.nav-link,
    a.nav-link:focus,
    span.nav-link:focus,
    a.nav-link:checked,
    span.nav-link:checked,
    a.nav-link:active,
    span.nav-link:active,
    a.nav-link.active,
    span.nav-link.active,
    a.nav-link:hover,
    span.nav-link:hover{
      color: #4E5EE2;
      border-bottom: 2px solid #4E5EE2;
    }

    .nav-link:focus-visible{outline: 1px solid #4E5EE2; border-radius: 4px;box-shadow:none;border:none!important;outline-offset: 4px;}

    .dropdown-menu,.dropdown-menu[data-bs-popper]{
      border-radius: 0;
      border: transparent;
      padding-top: 28px;
      padding-right: 16px;
      padding-bottom: 8px;
      padding-left: 16px;
      .dropdown-item:focus,
      .dropdown-item:active,
      .dropdown-item:checked,
      .dropdown-item:hover,
      .dropdown-item{
        padding:0;
        background: transparent;
        a{
          display: block;
          height: 60px;
          padding-top: 20px;
          padding-bottom: 20px;
          margin-left: 0px;
          margin-right: 16px;
          font-weight: 400;
          font-size: 20px;
          line-height: 100%;
          font-family: OpenSans, sans-serif;
          color: #0F2066;
          text-decoration: none;
        }
        a:focus,
        a:active,
        a.active,
        a:hover{
          color: #4E5EE2;
        }
        a:focus-visible{outline: 1px solid #4E5EE2; border-radius: 4px;box-shadow:none;border:none;}
      }
    }
  }
}

@media only screen and (max-width: 1199.98px) {
  nav.menu--main{
    margin-left: 0!important;
    width: 100%;
    padding-bottom: 16px;
  }
  [data-component-id="amphibios:menu_main"] {
    height: max-content;
    .tmp_hidden{
      display:none;
    }
    .dropdown-toggle:after {
      background-color: transparent;
      background-image: url(./images/icon-arrow-right.svg);
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
      width: 16px;
      height: 16px;
      border: none;
      right: 22px;
      position: absolute;
    }
    .dropdown-toggle:focus:after,
    .dropdown-toggle:active:after,
    .dropdown-toggle.active:after,
    .dropdown-toggle:hover:after{
      background-image: url("./images/icon-arrow-right-active.svg");
    }
    .dropdown-toggle:active,
    .dropdown-toggle.active{
      color: #4E5EE2!important;
    }
    .dropdown-toggle:focus-visible{outline: 1px solid #4E5EE2; border-radius: 4px;box-shadow:none;}

    .dropdown:has(.show){
      .dropdown-toggle:focus-visible{outline: none; border-radius: 4px;box-shadow:none;}
      overflow-y: auto;
      overflow-x:hidden;
      z-index: 1;
      height: calc(100vh - 58px);
      width: 100%;
      position: absolute;
      top:58px;
      left: 0;
      padding:16px;
      background-color: #ffffff!important;
      .dropdown-toggle::after{
        display: none;
      }
      .dropdown-toggle{
        width: 100vw;
        border-bottom: 1px solid #0F2066;
        height: 46px;
        line-height: 46px;
        padding: 0 0 0 44px;
        margin-bottom: 32px;
        color: #0F2066!important;
      }
      .dropdown-toggle:checked,
      .dropdown-toggle:hover{
        color: #0F2066!important;
      }
      .dropdown-toggle::before{
        content:"";
        background-color: #0F2066;
        background-image: url("./images/icon-arrow-left.svg");
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: center center;
        width: 44px;
        height: 46px;
        border: none;
        position: absolute;
        left:0;
        border-top-right-radius: 4px;
      }
      .dropdown-toggle{font-size:20px;}
      .dropdown-item{
        padding: 16px 16px 16px 16px;
      }
    }
    .dropdown-item a,
    .nav-link{
      font-family: OpenSans, sans-serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 100%;
      color: #0F2066!important;
      text-decoration: none;
      width: 100%;
      display: block;
      padding-top:8px;
      padding-bottom:8px;
    }
    .dropdown-item,
    .dropdown-item:focus,
    .dropdown-item:active,
    .dropdown-item:hover{
      background: #ffffff!important;
    }
    .dropdown-item a:focus-visible{outline: 1px solid #4E5EE2; border-radius: 4px;box-shadow:none;border:none;}
    .dropdown-item,
    .nav-item{
      padding: 16px 24px;
      font-family: OpenSans, sans-serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 100%;
      color: #0F2066;
    }
    .dropdown-menu{border:none;}
    .nav-item a:focus-visible{outline: 1px solid #4E5EE2; border-radius: 4px;box-shadow:none;border:none;}
    .nav-item a:focus,
    .dropdown-toggle:focus,
    .dropdown-item a:focus,
    .dropdown-item a:active,
    .dropdown-item a:hover,
    .nav-link:active,
    .nav-link:hover,
    a.nav-link.active,
    .dropdown-item a.active{
      color: #4E5EE2!important;
    }
  }
}