// ----------------------------------------------
// Header Style
// ----------------------------------------------

.app-topstrip {
  position: fixed;
  top: 0;
  z-index: 12;
  background: linear-gradient(90deg, #001138 0%, #001E66 100%);

  .text-linear-gradient {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FFFFFF 0%, #3772FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .border-opacity-40 {
    --bs-border-opacity: 0.4;
  }

  .live-preview-drop {
    border-radius: 4px !important;

    &:hover,
    &:active {
      background-color: #3772FF;
    }

    &.show {
      background-color: #3772FF;
    }
  }

  .get-pro-btn {
    border-radius: 4px !important;
    background-color: #3772FF;

    &:hover {
      background-color: #5D87FF;
    }
  }

  .link-hover {
    &:hover {
      color: #5D87FF !important;
    }
  }

  .dropdown-menu {
    min-width: 280px;
    box-shadow: 0px 2px 8px rgba(99, 99, 99, 0.12);

    .dropdown-item {
      font-size: 16px;
      color: #000C29;
      padding: 12px 18px;

      &:hover {
        background: rgba(0, 12, 41, 0.05);
      }
    }
  }
}

.app-header {
  position: relative;
  z-index: 50;
  width: 100%;
  background: $white;
  padding: 0 10px;
  top: 72px;

  @include media-breakpoint-down(lg){
    top: 152px;
  }

  @include media-breakpoint-down(sm){
    top: 105px;
  }

  .container-fluid {
    max-width: $boxed-width;
    margin: 0 auto;
    padding: 0 30px;
  }

  .navbar {
    min-height: $header-height;
    padding: 0;

    .navbar-nav {
      .nav-item {
        .nav-link {
          padding: $navlink-padding;
          line-height: $header-height;
          height: $header-height;
          display: flex;
          align-items: center;
          position: relative;

          font-size: 20px;
          z-index: 2;
        }
      }
    }
  }
}

.navbar-nav .dropdown-menu {
  position: absolute;
  min-width: 200px;

  .dropdown-item {
    border-radius: 8px;
  }

}

.notification {
  content: "";
  position: absolute;
  top: 22px;
  right: 9px;
  width: 8px;
  height: 8px;
}

@include media-breakpoint-down(lg) {
  .app-header {
    .navbar {
      flex-wrap: nowrap;

      .navbar-nav {
        flex-direction: row;
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .navbar-nav .dropdown-menu {
    position: absolute;
    width: 100%;
  }

  .navbar-nav .nav-item.dropdown {
    position: static;
  }
}

@include media-breakpoint-down(lg) {
  .w-xs-100 {
    width: 100% !important;
  }
}