[data-component-id="amphibios:header"] {
  background-color: #ffffff;
  nav#navbar-main{
      .navbar-brand:focus-visible{outline: 1px solid #4E5EE2; border-radius: 4px;box-shadow:none;border:none!important;}
    background-color: #ffffff;
    padding:32px;
    box-shadow: none;
    -webkit-box-shadow:none;


    /* Remove border from toggler */
    .navbar-toggler {
      border: 0 !important;
      padding: 17px 12px;
    }

    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
      outline: none !important;
      box-shadow: none !important;
      border: 0 !important;
    }
    .navbar-toggler:focus-visible{outline: 1px solid #4E5EE2!important; border-radius: 4px;box-shadow:none;border:none!important;}


    /* Lines of the Toggler */
    .toggler-icon{
      width: 25px;
      height: 2px;
      background-color: #4E5EE2;
      display: block;
      transition: all 0.2s;
      border-radius: 25px;
    }

    /* Adds Space between the lines */
    .middle-bar{
      margin: 5px auto;
    }

    /* State when navbar is opened (START) */
    .navbar-toggler .top-bar {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }

    .navbar-toggler .middle-bar {
      opacity: 0;
      filter: alpha(opacity=0);
    }

    .navbar-toggler .bottom-bar {
      transform: rotate(-45deg);
      transform-origin: 10% 90%;
    }
    /* State when navbar is opened (END) */

    /* State when navbar is collapsed (START) */
    .navbar-toggler.collapsed .top-bar {
      transform: rotate(0);
    }

    .navbar-toggler.collapsed .middle-bar {
      opacity: 1;
      filter: alpha(opacity=100);
    }

    .navbar-toggler.collapsed .bottom-bar {
      transform: rotate(0);
    }
    /* State when navbar is collapsed (END) */

    /* Color of Toggler when collapsed */
    .navbar-toggler.collapsed .toggler-icon {
      background-color: #4E5EE2;
    }

  }
}

@media only screen and (min-width: 1200px) {
  [data-component-id="amphibios:header"] {
    nav#navbar-main {
      height: 100px;
      padding-left: calc(var(--bs-gutter-x) * .5);
      padding-right: calc(var(--bs-gutter-x) * .5);
      .search {
        border: none;
        background: transparent;

        svg {
          width: 21px;
          height: 21px;
        }

        padding: 0;
      }
      .search:focus-visible{outline: 1px solid #4E5EE2; border-radius: 4px;}

      .navbar-collapse > div,
      .navbar-collapse > nav {
        margin-left: 32px;
        margin-right: 32px;
      }

      .navbar-collapse > div:nth-child(2),
      .navbar-collapse > nav:nth-child(2) {
        width: -webkit-fill-available;
        width: -moz-available;
        width: fill-available;
        margin-left: 80px;
        margin-right: 0;
      }

      .navbar-collapse > div:first-child,
      .navbar-collapse > nav:first-child {
        margin:0;
      }

      .navbar-collapse > div:last-child,
      .navbar-collapse > nav:last-child {
        margin-left: 32px;
        margin-right: 0;
      }
    }
  }
}

@media only screen and (max-width: 1199.98px) {
  [data-component-id="amphibios:header"] {
    nav#navbar-main{
      padding-left: calc(var(--bs-gutter-x) * .5);
      padding-right: calc(var(--bs-gutter-x) * .5);
      .navbar-collapse.show{
        display: flex;
        flex-direction: column;
        justify-content: space-between !important;
      }
      .navbar-collapse > * {
        width:100%;
      }
      padding:8px;
      .navbar-collapse > div:nth-child(2),
      .navbar-collapse > nav:nth-child(2) {
        flex-grow: 1;
      }
      .navbar-collapse.collapsing{
        height: 100vh;
        transition: none;
      }
      .navbar-collapse.show{
        height: 100vh;
        max-height: calc(100vh - 66px );
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0px 0px 24px;
        transition: none;
      }
    }
  }
}