.pop_loader{
    background: rgba($white,0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    text-align: center;
    color: $gray-300;
    z-index: 9900;
    &:before{
        vertical-align: middle;
        display: inline-block;
        height: 100%;
        content: ""; 
    }
    .white-bg{ 
        display: inline-block; 
        vertical-align: middle;
        box-shadow: 2px 2px 10px rgba($dark,0.2);
        font-size: 18px;
    }
}
 
.popupShowLogin{display: none;} 

header{ 
    background: $white;
    @include transition(all 1.5s cubic-bezier(0.23, 1, 0.32, 1));
}

.header-top-fix{
    header.affix{
        top: 0;  
    }
    header.affix-top{
      position: fixed !important;
      top: 0;
      left: 0;    
      width: 100%;          
      margin: auto;
      z-index: 1000;
    }
}

.offers-deal {
   @include media-breakpoint-up(lg) {
    background-color: $secondary;
    color: $white;
    line-height: 39px;
    font-size: 14px;
    &:before {
      content: "";
      background-image: url(../images/offer.png);
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 6px;
      vertical-align: middle;
      background-size: 100%;
    }
    &:hover {
      background-color: darken($secondary, 10%);
      color: $white;
    }
  }

 @include media-breakpoint-down(md) {
    display: block;
    padding: 10px 0;
    color: $gray-800;
    text-transform: uppercase;
    font-weight: $font-weight-normal;
  }
}
@include media-breakpoint-down(md) {
  .menu-jb-ntn {
    display: block;
    padding: 10px 0;
    color: $gray-800;
    text-transform: uppercase;
    font-weight: $font-weight-normal;
  }
}
// Start header top Area
.header-topest {
  border-bottom: 1px solid $border-color;
  padding: 0 10px;
}
.header-top {
  background: $white; 
  padding: 6px 0;
}

// .logo {
//   img {
//     max-height: 55px;
//   }
// }

.right-top-section{
  ul{
    margin-top: 11px;
    @include media-breakpoint-down(md) { margin: 14px 0; }
  }
  padding: 0;
  > ul >li {
    display: inline-block;
    vertical-align: middle;
    @include media-breakpoint-up(sm) { padding: 0 12px; }
  } 
  .dropdown-menu{
    li {
      display: block;
      margin-bottom: 5px;
    }
  }
  a {
    display: block; 
    color: #414e5d;
    @include media-breakpoint-down(md) { font-size: 14px; }
    i {
      font-size: 25px;  
      @include media-breakpoint-down(xs) { font-size: 20px; }
    }

    i.icon-search, i.icon-user {
        cursor: pointer; 
    }
  }

  .icon-heart-outline{
@include media-breakpoint-up(lg) {
      position: relative;
      &:after {
        width: 1px;
        height: 25px;
        background: $gray-300;
        content: '';
        position: absolute;
        right: -11px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
    &:before {
      font-size: 25px;
      line-height: 1;
      display: block;
      text-align: center;
      @include media-breakpoint-down(xs) { font-size: 20px; }
    }
  }
    .cart-dropdown-box{
        text-align: center;
        .ajax_cart_product_txt, .ajax_cart_quantity{
         font-family: $font-family-base !important;
        }
    }    
    .icon-shopping-cart{
        position: relative;display: inline-block;vertical-align: middle;
        &:before {
          display: block;
          font-size: 27px;
          line-height: 1;
           @include media-breakpoint-down(xs) { font-size: 23px; }
        }
  }
}

.serch-drop{
  select {
    background: $gray-300;
    border: none;
  }

}

.search {
  margin-top: 5px;
  .ui-helper-hidden-accessible {
    position: absolute;
    bottom: -17px;
    color: $white;
    font-size: 12px;
  } 
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: $gray-500;
        opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: $gray-500;
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        color: $gray-500;
    }
  .form-control{
      padding-left: 40px;
    }

    .form-control.form-control-lg,.btn.btn-lg {
      height: 46px !important;line-height: 46px;text-transform: none!important;font-size: 14px!important;
    }

 .ui-autocomplete{
        background: $white;
        position:absolute;
        padding: 10px;
        max-height: 300px;
        z-index: 1000;
        overflow-y: auto;
        overflow-x: hidden;
        border:$border-color 1px solid;
       
    }
    a{
        color: $body-color;
        padding: 5px 0;
        display: block; 
        font-size: 13px;
    }
    .text-selected{
        color: $primary; 
        font-weight: $font-weight-medium ; 
    }
    .search-error-outer{
        position: absolute;
        right: 55px;
        margin: 2px;
    }
}
.languageList {
  &:before {
    left: 15px;
  }
}

.ajax_cart_quantity {
  position: absolute;
  right: 2px;
  top: -7px;
  width: 18px;
  border-radius: 50%;
  height: 18px;
  background: $secondary; 
  display: block;
  line-height: 18px!important;
  text-align: center;
  font-size: 11px;
  color: $white;
  @include media-breakpoint-down(md) { top: -8px; right: -8px;}
}

// End header top Area

// Start header bottom Area
.site_main_menu {
  display: inline-block;
}

.header-bottom {
    &.affix{
        position: fixed;
        left:0;
        width: 100%;
        top:0;
        z-index: 999;
    }
  @include media-breakpoint-up(lg) {
    background-color: $primary;
    position: relative;
  }

  .dropdown-menu.pull-right
  {
    min-width: 200px;
    padding: 12px;
    border-radius: 0;
    top: 32px;
    border: none;

    a {
      padding: 0;
      margin-bottom: 10px;
    }
  }
}


.menu_items { 
  margin: 0;
  padding: 0;
  ul {
    list-style: none;
    padding: 0;
  }
  @include media-breakpoint-up(lg) {
    > li{
      display: inline-block;
        position: relative;
      &:last-child {
        a { 
          margin-right: 0
        }
      }
      > a, > span {
        color: $white;
        font-weight: $font-weight-medium;
        font-size: 13px; 
        text-transform: uppercase;
        padding-right: 20px;
      }
        >ul{
            opacity: 0;
            visibility: hidden;
            position: absolute;
            z-index: 3550;
            top: 135%;
            background: $white;
            padding: 25px 20px 50px;
            width: auto;
            left: 0;
            min-width: 200px;
            @include transition(all 0.35s ease);
            box-shadow: 0 2px 11px rgba(70, 70, 70, 0.16);
            >li{
                >a,>span{
                    padding-bottom: 3px;
                    font-size: 14px;
                }
                a,span{
                    color: $gray-600;
                    text-transform: capitalize;
                    margin-bottom: 10px;
                    display: block;
                    white-space: nowrap;
                    &:hover {
                      color: $primary;
                    }
                }
            }
        }
     &.mega-menu{
            position: inherit;
              > ul {
                opacity: 0;
                visibility: hidden;
                position: absolute;
                z-index: 999;
                top: 175%;
                background: $white;
                padding: 25px 20px 50px;
                width: 100%;
                left: 0;
                right: 0;
                transition: all 0.5s ease;
                box-shadow: 0 2px 4px rgba(70, 70, 70, 0.51);

                >li {

                  > ul {

                    > li {
                      width: 20%;
                      max-width: 220px;
                      float: left;
                      padding-right: 20px;
                      &:last-child {
                        padding-right: 0;
                      }
                      a, span {
                        text-transform: capitalize;
                        margin-bottom: 5px;
                        display: block;
                      }
                      > a, > span {
                        color: $primary;
                        font-weight: $font-weight-medium;
                        font-size: 13px; 
                        padding-bottom: 3px;
                      }
                    }
                  }

                }

              }
        }
    }

    > li{
       @include media-breakpoint-up(xl) {
            margin-right: 10px;
        }
        cursor: pointer;
      
      > a, >span {
        position: relative;
        padding: 0 5px;line-height: 39px;
        font-weight: $font-weight-bold;
        @include media-breakpoint-up(lg) {
           padding: 0 10px;
        }  
        display: block;
        background:  $primary;
          @include transition (all .5s ease);
        &.down-arr:after {
          content: "\e919";
          font-family: 'icomoon' !important;
          display: inline-block;
          margin: 0 8px;
          font-size: 8px;line-height: 37px;
          transform: rotate(90deg);
        }
        // &:before {
        //   content: "";
        //   position: absolute;
        //   left: 0;
        //   bottom: 0;
        //   height: 3px;
        //   background-color: $secondary;
        //   width: 0;
        //   transition: all 0.3s ease;
        // }
      }
      &:hover {
         > a, >span {
           background: $white;
           color: $dark;  
           z-index: 40000;     
         }
        > ul {
          opacity: 1;
          visibility: visible;
          top: 100%;
        }
      }
    }
  }
}

.menu_items {
  .menu-banner {
    img {
      max-width: 100%;
    }
  }
}


.drop-menu-track{
  .dropdown-menu{
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all .35s ease;
    min-width: 240px;
    left: -70px;
    box-shadow: 0 2px 11px rgba(70, 70, 70, 0.16);
    border: none;
  }
  &.open {
    .dropdown-menu{
      opacity: 1;
      visibility: visible;
    }
  }
  &.mob-dropmenu{
    .dropdown-menu {
      left: -140px;
    }
  }
}

.accountDetails { 
  > li {
    float: left; 
    font-size: 13px;
    padding: 8px 25px 8px 0;
    position: relative;
    &.drop-menu-track{ 
      .dropdown-menu{
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all .35s ease;
        min-width: 240px;
        left: -130px;
      }
      &.open {
        .dropdown-menu{
          opacity: 1;
          visibility: visible;
        }
      }
    }
    .dropdown-menu{
      li {
        padding-bottom: 5px;
      }
      a{
        font-size: 13.5px;
      }
    }
    &:after {
      content: "";
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translate(0, -50%);
      width: 1px;
      height: 14px;
      background-color: #dcdcdc;
    }
    &:last-child {
      padding-right: 0;
      &:after {
        width: 0;
      }
    }
    a {
      color: $dark;
    }
    > a,>span {
      color: #808081;cursor: pointer;
        font-weight: $font-weight-bold;
      &:hover {
        color: $primary;
      }
        &.bundle-products{
            color:$secondary !important;
        }
    }
  }

}
.lang-option {
  font-size: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
  .lang-optionlist-btn{
    border: 1px solid $gray-800;
    color: $gray-800;
    font-size: 11px;
  }
  a {
    white-space: nowrap;
    font-size: 15px;
    color: lighten($dark, 32%);
  }

  img {
    margin-right: 3px;
  }
  .dropdown-menu{
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: all .35s ease;
    box-shadow: 0 2px 11px rgba(70, 70, 70, 0.16);
    border: none;
  }
  &.open {
    .dropdown-menu{
      opacity: 1;
      visibility: visible;
    }
  }
}


@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0); 
    transform: translate3d(0, -100%, 0);
    visibility: visible; 
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@include media-breakpoint-up(xl) {
  .right-top-section {
    width: 200px;
  }
}

@include media-breakpoint-up(lg) {
  .languagebox_head {
    &:after {
      content: "\e919";
      font-family: 'icomoon' !important;
      display: inline-block;
      margin: 0 8px;
      font-size: 11px;
      transform: rotate(90deg);
      color: lighten($dark, 50%);
      position: relative;
      top: 1px;
    }
  }
}
@include media-breakpoint-down(md) {
  .dropdown-backdrop {
    display: none;
  }
    body:not(.remove-fix){
        padding-top: 63px;
        header{ 
        // background: rgba(97, 93, 93, 0.5);
        position: fixed;
        width: 100%;
        left: 0;  
        top: 0;  
        z-index: 1040;
        box-shadow: 0px 5px 9px -2px rgba(0, 0, 0, 0.07);
      }
    }
    body.remove-fix{
        padding-top:0;
       header,header.affix{ 
           position:inherit!important;@include box-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.09));
        }
    }
  
  .header-top {
    padding: 5px 0;
    
      >.container{
        padding-top: 0;padding-bottom: 0;  
      }
  }
  .logo{
   padding-left: 40px;
   @include media-breakpoint-down(xs) { 
       width: 157px; margin: 8px 0; 
      }
   @media (max-width: 345px) { 
       width: 138px; margin: 7px 0;}
   img {
    max-height: 55px;
    @include media-breakpoint-down(xs) { 
        max-height: 45px;margin-top: -5px; 
       }
   }
  }
  .menu-open .c-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.75);
    z-index: 10003;
  }
  
  .icon-menu {
    color: $dark;
    font-size: 25px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -17px;
    &.m-active {
      &:before {
        content: "\e90e";
      }
    }
  }
  .header-bottom {
   position: fixed;
   max-width: 320px; 
   width: calc(100% - 40px);
   height: 100%;
   z-index: 10005; 
   background: $white;
   opacity: 0;  
   top: 0;
   left: 0;
   padding: 0 0 80px;
   border: 0;
   visibility: hidden;
   @include box-shadow(4px 2px 16px -8px #333);
   transform: translate(-100%, 0); 
   @include transition(all 0.5s cubic-bezier(0.19, 1, 0.22, 1)); 
    @include media-breakpoint-down(xs) { max-width: 275px; }
   &.is-active {
    opacity: 1;
    visibility: visible; 
    transform: translate(0, 0);
   }
   li {
    padding: 10px 0;
   }

   .dropdown-menu.pull-right{
    box-shadow: none;
    padding: 0;
    width: 90%;
    li{
      padding: 5px 0;
      input {
        padding: 10px;
      }
    }
   } 
   > .container {
    padding: 0;
   }
   .log-notify {
    padding: 15px;
    background-color: $primary;
    a {
      color: $white;
    }
    .icon-user {
      margin-right: 10px;
    }
    .LogedName {
      text-transform: capitalize;
    }
    > * {
      vertical-align: middle;
      line-height: 1;
      color: $white;
      font-size: 15px;
    }
   }
 } 

 .let-overflow {
  overflow-y: auto;
  height: 100vh;
  padding: 0 0 85px;
  width: 100%;
 }

 .site_main_menu{
  display: block;
  padding-left: 10px;
 }

 .menu_items { 
  li {
    display: block;
    position: relative;
  }
  a{
    font-size: 14px;
    color: $gray-800;
  }

  > li {
    > a, > span:not(.show-sub,.show-sub2) {
      font-weight: $font-weight-normal; 
      color: $gray-800;
      text-transform: uppercase; 
      font-size: 14px;
    }
    .show-sub {
      position: absolute;
      right: 0;
      top: 0;
      padding: 12px;
      line-height: 1;
      font-family: 'icomoon';
      &:before {
        content: "\e919";
        display: inline-block;
        @include transition(all 0.35s ease);
        font-size: 12px;
      }
      &.active {
        &:before {
          transform: rotate(90deg);
        }
      }
    }
    > ul {
      display: none;
      padding-left: 15px;
      > li {
        > a, > span:not(.show-sub,.show-sub2) {
//          display: none;
        }
        > ul {
          > li {
            > a, > span:not(.show-sub,.show-sub2) {
              // color: $primary;
              font-size: 14px;
              display: block;
              padding-bottom: 3px;
            }
            .show-sub2 {
              position: absolute;
              right: 0;
              top: 0;
              padding: 12px;
              line-height: 1;
              font-family: 'icomoon';
              &:before {
                content: "\e919";
                display: inline-block;
                font-size: 12px;
                @include transition(all 0.35s ease);
              }
              &.active {
                &:before {
                 transform: rotate(90deg);
                }
              }
            }
            > ul {
              display: none;
              padding-left: 10px;
            }
          }
        }
      }
    }
  }
  .menu-banner {
    display: none;
  }
}



 .c-menu__close{ 
  font-size: 20px;
  position: absolute;
  right: -50px;
  top: 10px;
  padding: 10px;
  color: #fff;
  line-height: 1;
  font-weight: $font-weight-medium;
}

.header-bottom .lang-option,.rtl .header-bottom .lang-option {
  float: none !important;
  // margin: 0 -10px 0 -10px !important;
  padding: 8px 10px 8px;
  background: #eee;
  a {
    display: block;
      cursor: pointer;
  }
  .languageList {
    background-color: transparent;
    &:before {
      width: 0;
      height: 0;
      border: 0;
    }
    li {
      padding: 0;
    }
  }
  &.open .languageList {
    position: static;
    float: none;
    display: block;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    margin-top: 15px;
    padding: 0;
  }
}

 .accountDetails{
  float: initial;
  padding-left: 10px;
  li{
    display: block;   
    float: initial;  
    a{
      font-weight: $font-weight-bold; 
      color: $secondary;
      text-transform: uppercase; 
      font-size: 13px;
    }
  }
 }

 .right-top-section { 
  padding: 0;
  
   .dropdown-menu{
    min-width: 210px;
    border: none;
    border-radius: none;
   }
 }



 .search {
    position: absolute;
    top: 100%;
    z-index: -1; 
    width: 100%; 
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;    
    opacity: 0;
    visibility: hidden;
    background: $white;
    padding: 12px;
    @include transition(all 0.5s ease);

    &.active {
      opacity: 1;
      visibility: visible;  
      z-index: 9;
      -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.09);
      box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.09);
    }
 }

} 

.search_ico{
  position: relative;
  &:before {
    position: absolute;
    content: "\e904";
    font-family: 'icomoon' !important;
    z-index: 9;
    top: 14px;  
    left: 15px;     
    color: #afadad;

  }
}


@include media-breakpoint-down(md) {
    .lang-option{
        >a:before {
            //content: "\e919";
            font-family: 'icomoon';
            float: right;
            @include transition(all 0.5s ease);
        }
        &.open > a:before{
            transform: rotate(90deg);
        }
    }
}

@include media-breakpoint-down(xs) {
    .right-top-section{
        ul{
          margin: 10px -7px 0!important;
        }
        li{
            padding: 0 5px;
        }
    } 
}


