// top -header//@at-root
  .top-header{
      background: $st-text-ninth;
      border-bottom: 1px solid #d8dbe0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3px 25px;
      position: sticky;
      top: 0;
      z-index: 2;
      // padding: 10px 25px;
      @media #{$small} {
        padding: 0px 15px; 
       }
      position: sticky;
      top: 0;
      // z-index: 1029;
      .header-toggler {
        cursor: pointer;
        background-color: transparent;
        border: 0;
        border-radius: 0.375rem;
        font-size: $st-font16;
        color: rgba(44,56,74, 0.6);
        @media #{$small} {   
          font-size: 20px;
        }
      }
      .navbar {
        padding: 0;
      }
      .header-nav {
        padding-left: 10px;
        padding-top: 3px;
        display: flex;
        flex-direction: row;
        list-style: none;
        margin-bottom: 0;
        .nav-item {
          position: relative;
          .nav-link {
            color: $st-text-primary;
            // padding: 8px;
            padding: 8px 4px;
            svg {
              // font-size: $st-font20;
              font-size: $st-font16;
              color: #464646;
              opacity: 0.8;
              &:hover {
                color: #224491;
              }
              @media #{$small} {   
                font-size: 18px;
              }
            }
            &:hover {
              color: #224491;
            }
            &.active {
              color: $st-secondary-bg;
            }
            @media #{$small} {   
              padding: 6px;
            }
          }
        }
        .dropdown {
          position: relative;
          .dropdown-menu {
            position: absolute;
            border: 0;
            inset: 0px 0px auto auto;
            transform: translate(0px, 48px);
            border-radius: 8px;
            padding-bottom: 0;
            li {
              border-bottom: 1px solid #dddedf;
              .dropdown-header {
                background-color: $st-secondary-bg;
                color: $st-text-ninth;
                padding: 12px 8px;
                border-radius: 8px 8px 0 0;
              }
              .dropdown-item {
                padding: 12px 8px;
                font-size: 14px;
                &:focus {
                  background-color: transparent;
                  color: #212529;
                }
              }
              &:last-child {
                border-bottom: none;
              }
            }
            &.show {
              display: block;
            }
          }
          .avatar {
            display: inline-flex;
            width: 40px;
            height: 40px;
            position: relative;
            transition: margin .15s;
            vertical-align: middle; 
            img {
              width: 100%;
              height: auto;
              border-radius: 50%;
            }       
          }
        }
        &.breadcrumb {
          .nav-item {
              span {
                display: inline-block;
                padding: 8px 4px;
              }
          }
        }
      }
      .rightNavBar {
        @media #{$small} {
          position: relative;
          left: 92px; 
         }
        .nav-item {
          margin: 0 8px 0 0;
          @media #{$small} {
           margin: 0;
           }
        }
      }
      .toprighticon{
        ul{
          margin: 0;
          padding: 0;
          li {
            color: #bfb9b9;
            &:first-child{
              color: #eb576caa;
               
             
            }      
              svg{
               font-size: 20px;
            }
          }
        }
        .haederimage{
          width: 100%;
          height: 100%;
          img{
            width: 29px;
            height: 29px;
            border-radius: 40px;
          }
        }
      }
  }
 //end top-header//@at-root