.home_spinner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: $white-color;
}

.o_header_standard {
  .navbar {
    @media(min-width: 1200px) {
      padding: 0.5rem 0 !important;
    }

    #top_menu_container {
      display: flex;
      flex-wrap: wrap;
      position: relative;

      .top_header_container {
        flex-wrap: wrap;
        display: flex;
        width: 100%;
        @media(min-width: 992px) {
          border-bottom: 1px solid #CDC7C7;
          padding-bottom: 10px;
        }

        .header_call-btn_div {
          display: flex;
          align-items: center;
          width: 25%;
          @media(max-width: 991px) {
            width: 50%;
            top: 49px;
            position: absolute;
          }

          .order_call_btn {
            background-color: $yellow-color;
            font-weight: 400;
            color: $black-color;
            font-size: 12px;
            line-height: 130%;
            padding: 4px 10px;
            border: none;
            margin-right: 33px;
            position: relative;
            cursor: pointer;

            .call_btn {
              right: 3px;
              top: 3px;
              position: absolute;
              width: 100%;
              height: 100%;
              border: 1px solid black;
              @media(max-width: 992px) {
                right: 0;
                top: 0;
              }

              &:hover {
                right: 0;
                top: 0;
              }
            }
          }

          .header_website_phone {
            font-size: 14px;
            line-height: 100%;
            color: $black-color;
            font-family: $main-font;
            font-weight: 400;
            text-decoration: none;
            position: relative;
            @media(max-width: 1199px) {
              display: none;
            }

            &:after {
              background: none repeat scroll 0 0 transparent;
              bottom: -6px;
              content: "";
              display: block;
              height: 1px;
              left: 50%;
              position: absolute;
              transition: width 0.3s ease 0s, left 0.3s ease 0s;
              width: 0;
            }

            &:hover {
              &:after {
                background: #000000;
                width: 100%;
                left: 0;
                bottom: -6px;
                content: "";
                display: block;
                height: 1px;
                position: absolute;
                transition: width 0.3s ease 0s, left 0.3s ease 0s;
              }
            }
          }

        }

        .background {
          display: none;
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.4);
          z-index: 1030;
          @media(max-width: 991px) {
            height: 100vh;
          }
        }

        .order_call_modal_container {
          display: none;
          position: fixed;
          top: 30vh;
          border: 1px solid #FFD503;
          padding: 12px 20px 20px 20px;
          min-width: 290px;
          min-height: 255px;
          background-color: #FFFFFF;
          z-index: 1031;
          transform: translate(50%);
          @media(max-width: 400px) {
            left: 50%;
            transform: translateX(-50%);
          }

          .header_close_btn_container {
            display: flex;
            justify-content: flex-end;
            width: 100%;

            .call_modal_close_btn {
              border: none;
              background-color: transparent;
              cursor: pointer;

              &:focus {
                border: none;
              }
            }
          }

          .call_modal_text {
            font-size: 16px;
            line-height: 15px;
            color: $black-color;
            font-family: $main-font;
            font-weight: 400;
            text-align: center;
            margin-bottom: 30px;
          }

          .header_input_div {
            display: flex;
            flex-direction: column;
            align-items: center;

            .call_modal_input_name,
            .call_modal_input_phone {
              width: 100%;
              border: 1px solid #C4C4C4 !important;
              min-height: 30px;
              padding: 3px;
              margin-bottom: 10px;

              &::placeholder {
                font-size: 16px;
                line-height: 15px;
                font-family: $main-font;
                font-weight: 400;
                color: #C4C4C4;
              }
            }
          }

          .call_modal_submit_btn {
            color: $white-color;
            font-family: $main-font;
            font-size: 16px;
            line-height: 106.2%;
            font-weight: 400;
            background-color: $black-color;
            border: none;
            width: 100%;
            cursor: pointer;
            padding: 17px;
            margin-top: 10px;
          }
        }

        .header_logo_div {
          display: flex;
          justify-content: center;
          width: 75%;
          align-items: center;
          position: relative;
          @media(max-width: 400px) {
            padding-left: 95px;
          }
          @media(min-width: 401px) and (max-width: 767px) {
            padding-left: 125px;
          }
          @media(min-width: 768px) and (max-width: 991px) {
            padding-left: 30%;
          }
          @media(min-width: 992px) and (max-width: 1199px) {
            width: 35%;
            justify-content: center;
          }
          @media(min-width: 1200px) {
            width: 35%;
            justify-content: flex-end;
          }

          .logo {
            width: 200px;
            height: 60px;
            @media(max-width: 991px) {
              width: 100px;
              height: 30px;
              margin-right: 0 !important;
            }

            span {
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .dropdown {
          margin-left: 0 !important;
          width: 20% !important;
          display: flex;
          align-items: center;
          @media(max-width: 991px) {
            width: 14% !important;
          }
          @media(min-width: 992px) and (max-width: 1199px) {
            width: 20%;
          }

          .dropdown-toggle {
            @media(max-width: 1199px) {
              padding-right: 0 !important;
            }

            span {
              color: $black-color;
              font-family: $main-font;
              font-size: 14px;
              line-height: 100%;
              font-weight: 400;
              margin-right: 19px;
              @media(max-width: 991px) {
                display: none;
              }
            }

            &:after {
              display: none !important;
            }

            svg {
              @media(max-width: 991px) {
                width: 20px;
                height: 20px;
              }
            }
          }

          .dropdown-menu {
            border: 1px solid $yellow-color;
            @media(max-width: 575px) {
              left: -80px;
            }
            @media(min-width: 576px) and (max-width: 991px) {
              left: -55px;
            }
            @media(min-width: 992px) and (max-width: 1199px) {
              left: -42px;
            }

            a {
              &:focus,
              &:active {
                background-color: $yellow-color !important;
              }

              &:hover {
                background-color: #E5E5E5 !important;
              }
            }

            .o_logout_divider {
              padding-left: 5px;
              padding-right: 5px;
            }
          }

          svg {
            &:hover {
              transform: scale(1.2);
            }
          }
        }

        .o_no_autohide_item {
          margin-left: 0 !important;
          width: 14%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 10px;
        }

        .o_wsale_my_cart {
          justify-content: flex-end;
          align-items: center;
          display: flex;
          width: 6%;
          margin-left: 0 !important;
          @media(max-width: 991px) {
            width: 11%;
          }
          @media(min-width: 992px) and (max-width: 1199px) {
            width: 7%;
            justify-content: center;
          }

          .nav-link {
            padding-right: 21px;
            width: 18px;

            .badge-primary {
              background-color: $yellow-color;
              top: 8px !important;
              right: 14px;
              border-radius: 50%;
              color: $black-color;
              font-size: 9px;
              width: 14px;
              height: 14px;
              padding: 3px !important;
              @media(min-width: 992px) {
                font-size: 11px;
                top: 11px !important;
              }
            }

            svg {
              @media(max-width: 991px) {
                width: 18px;
                height: 20px;
              }
            }
          }
        }

        .header_website_country_container {
          max-width: 120px;
          position: absolute;
          top: 18px;
          width: 25%;
          right: 15px;
          cursor: pointer;
          @media(max-width: 991px) {
            top: 6px;
            width: 25%;
            left: 0;
          }

          .header_website_country_overlay {
            display: none;
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.4);
            @media(max-width: 991px) {
              height: 100vh;
            }
            @media(min-width: 992px) {
              background-color: transparent;
            }
          }

          .header_current_country_website_container {
            @media(min-width: 992px) {
              position: relative;
            }

            .header_current_country_website_btn {
              width: 100%;
              background-color: $yellow-color;
              font-weight: 400;
              color: $black-color;
              font-size: 12px;
              line-height: 16px;
              padding: 3px 10px;
              border: none;
              position: relative;
              cursor: pointer;
            }

            .header_current_country_div {
              right: 3px;
              top: 3px;
              position: absolute;
              width: 100%;
              height: 100%;
              border: 1px solid black;
              @media(max-width: 992px) {
                right: 0;
                top: 0;
              }

              &:hover {
                right: 0;
                top: 0;
              }
            }
          }

          .header_website_country_select {
            display: none;
            background-color: white;
            position: fixed;
            top: 40vh;
            z-index: 1;
            padding: 11px 1px;
            border: 1px solid $yellow-color;
            font-family: $main-font;
            font-size: 16px;
            line-height: 15px;
            color: $black-color;
            @media(max-width: 991px) {
              transform: translateX(-50%);
              left: 50%;
            }
            @media(min-width: 992px) {
              top: 4vh;
              right: 0;
              position: absolute;
            }

            .header_website_country_option {
              &:not(:last-child) {
                margin-bottom: 2px;
              }


              .header_website_country_option_text {
                background-color: #FFFFFF;
                padding: 9px 36px;
                width: 100%;
                border: none;

                &:hover {
                  background-color: #E5E5E5;
                }
              }

              .active_lenguage {
                background-color: $yellow-color;
              }
            }
          }
        }

        hr {
          margin-top: 5px;
          margin-bottom: 0;
          width: 100%;
          @media (min-width: 992px) {
            display: none;
          }
        }

        .navbar-toggler {
          .navbar-light,
          .navbar-toggler-icon {
            background: url("/web_common/static/src/img/header_btn.png") no-repeat center !important;
          }
        }
      }

      #top_menu_collapse {
        @media(min-width: 1200px) {
          padding-top: 10px;
        }

        #top_menu {
          display: flex;
          justify-content: space-between;

          .nav_item_default,
          .sales {
            @media(max-width: 991px) {
              display: flex;
              justify-content: center;
            }

            .nav-link {
              font-size: 16px;
              line-height: 70%;
              color: $black-color;
              font-family: $main-font;
              font-weight: 400;
              position: relative;

              &:after {
                background: none repeat scroll 0 0 transparent;
                bottom: 0;
                content: "";
                display: block;
                height: 1px;
                left: 50%;
                position: absolute;
                transition: width 0.3s ease 0s, left 0.3s ease 0s;
                width: 0;
              }

              &:hover {
                &:after {
                  background: #000000;
                  width: 100%;
                  left: 0;
                  bottom: 0;
                  content: "";
                  display: block;
                  height: 1px;
                  position: absolute;
                  transition: width 0.3s ease 0s, left 0.3s ease 0s;
                }
              }

            }

            &:nth-child(3) {
              order: -3;
            }

            &:nth-child(2) {
              order: -4;
            }
          }

          .sales {
            .nav-link {
              order: -2;
            }
          }
        }
      }
    }
  }
}

.o_header_affixed {
  .navbar {
    box-shadow: rgba(0, 0, 0, 0.075) 0 2px 4px 0;
  }
}