.header {
  width : 100%;
  background-color : @white;
  padding : 30px 0;
  position : absolute;
  top : 20px;
  z-index : 500;


  &-container {
    width : @width-container;
    margin : 0 auto;
  }

  &-logo {
    width : 160px;
    height : 40px;
    display : inline-block;
    background : url(../biomed/img/new-version/header/logo.png) no-repeat center;
  }

  &-connect-button {
    width : 160px;
    margin-left : 15px;
    &:hover {
      background-color : @red-dark !important;
    }

    &.active {
      background-color : @red-dark !important;
    }

  }

  &-lang-button  {
    width : 40px;
    height : 40px;
    box-sizing : border-box;
    margin-left : 15px;
    float : right;
  }

  &-right-box {
    float : right;
    line-height : 40px;
    position : relative;
  }
}

.header-menu {
  list-style-type : none;
  display : inline-block;
  float : left;

  &-item {
    display : inline-block;
    float : left;
    margin-left : 15px;
    line-height : 40px;

    &:first-child {
      margin-left : 0;
    }

    &-link {
      font-size : 12px;
      color : @grey;
      text-decoration : none;
      text-transform : uppercase;

      &:hover {
        color : @grey-hover;
      }

      &:focus, &:active {
        color : @red;
      }
    }

    &.selected {

      .header-menu-item-link {
        color : @red;
      }

    }

  }

}

.header-user {
  display : inline-block; 
  float : right; 
  margin-left : 20px;

  &-item{ 
    display:inline-block;
    float : left;
    position: relative;

    &:nth-child(1){

      .header-user-item-link {
        border-top-left-radius : 5px;
        border-bottom-left-radius : 5px;
        border-right : none;
        color : @red;
        font-size : 12px;
        &:hover {
          color : @white;
        }
      }

    }


    &:nth-child(2){

      .header-user-item-link {
        &:hover {
          #shopping-cartCounter {
            background-color : @white;
            color : @red;
          }
        }
      }

    }

    &:nth-child(3){

      .header-user-item-link {
        border-top-right-radius : 5px;
        border-bottom-right-radius : 5px;
        border-left : none;
      }

    }

  }

  &-item-link{
    border:1px solid #dddddd;
    text-decoration : none;
    color: @grey;
    padding : 0px 15px;
    text-transform : uppercase;
    font-size : 16px;
    display: inline-block;
    height : 40px;
    float: left;
    line-height : 40px;
    box-sizing : border-box;

    &:hover {
      background-color : @red;
      color : @white;
      border-color : @red;
    }

  }

  #shopping-cartCounter{
    position : absolute;
    display : inline-block;
    top : 5px;
    right : 5px;
    font-family: 'montserratregular';
    font-size : 9px;
    background-color : @red;
    color : @white;
    width : 14px;
    height : 14px;
    text-align:center;
    padding : 0;
    border-radius : 50%;
    line-height : 14px;
    margin-top : 3px;

  }

  &-sub-menu{
    position : absolute;
    display : inline-block;
    width : 170px;
    top : 100%;
    margin-top : 15px;
    left : -60px;
    border : 1px solid #dcdcdc;
    border-radius : 5px;
    background-color : @white;
    text-align : center;
    padding : 5px 0;



    &::before {
      content: '';
      width: 11px;
      height: 7px;
      display: inline-block;
      position: absolute;
      top: -7px;
      left : 50%;
      margin-left : -5.5px;
      background: url(../biomed/img/new-version/select/triangle.png) no-repeat center;
    }

  }

  &-sub-menu-item{

  }

  &-sub-menu-item-link{
    display : inline-block;
    width : 100%;
    text-align : center;
    height : 40px;
    line-height : 40px;
    font-size : 12px;
    font-family: 'montserratregular';
    text-transform : uppercase;
    color : @grey;

    &:hover {
      background-color : @red;
      color : @white;
    }

  }

}

.header-connect-form {
  display: inline-block;
  position : absolute;
  top : 100%;
  right : 0;
  background-color : @white;
  margin-top : 15px;
  padding : 25px 20px;
  width : 260px;
  box-sizing: border-box;
  border : 1px solid #dcdcdc;
  border-radius : 5px;

  &::before {
    content: '';
    width: 11px;
    height: 7px;
    display: inline-block;
    position: absolute;
    top: -7px;
    left : 50%;
    margin-left : -5.5px;
    background: url(../biomed/img/new-version/select/triangle.png) no-repeat center;
  }

  .login-form {
    width : 100%;
  }

}