#header {
  .home {
    font-family: 'mitr';
    padding: 55px 11%;
    display: flex;
    align-items: center;
    // position: absolute;

    &__logo{
      width: 14%;
      padding-right: 20px;
      border-right: 1px solid #d9d9d9;
    }

    &__login{
      a{
        display: flex;
        padding: 0 20px;
        color: #0053c3;
      }

      img{
        width: 12px;
        margin-right: 10px;
      }
    }
    
  }
  .already_login {
    // width: calc(85vh + 400px + 45px);
    margin: 25px auto 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 85%;
    min-width: 993px;
    max-width: 1600px;

    .dropdown_option--lang {
      right: 0;
    }
  }
  .control {
    flex-wrap: wrap;

    &__btn {
      cursor: pointer;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ddd;
      border-width: 1px 0 1px 1px;
      padding: 15px 0;
      line-height: 1em;
      position: relative;
      font-size: $font-size-small;

      &--icon {
        width: 12px;
        height: 12px;
        margin-right: 10px;
      }

      &--brand {
        // width: 65%;
        display: flex;
        align-items: center;
        width: 100%;

        &-title {
          margin-right: 10px;
        }
      }

      &--name {
        font-weight: 500;
        text-align: left;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &--share {
        background: #004f9c;
        color: #fff;
        padding: 5px 15px;
        margin: -7px 0;
        border-radius: 5px;
        cursor: pointer;

        svg {
          fill: #fff;
          width: 15px;
          height: 15px;
        }
      }
    }
    .setting {
      border-right: 1px solid #ddd;
    }

    .status {
      display: inline-block !important;
      content: "";
      background: red;
      width: 5px;
      height: 5px;
      border-radius: 100%;
      position: absolute;
      right: 7px;
      top: 7px;

      &.show {
        background: #81c241;
      }
    }

    .brand {
      justify-content: space-between;
      padding: 15px 0.8em;
      width: 27%;

      .status {
        position: inherit;
        width: 10px;
        height: 10px;
        margin-right: 5px;
      }
    }

    .landing {
      width: 19.666667%;
    }

    .preview {
      cursor: pointer;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      line-height: 1em;
      position: relative;
      margin-left: 10px;
      background: #004f9c;
      color: #fff;
      width: 10.7%;
      border-radius: 3px;

      svg {
        width: 12px;
        height: 12px;
        margin-right: 10px;
        fill: #fff;
      }
    }
  }

  .active {
    font-weight: 500;
    -webkit-box-shadow: 0px -3px 0px #004f9c inset;
    -moz-box-shadow: 0px -3px 0px #004f9c inset;
    box-shadow: 0px -3px 0px #004f9c inset;

    .control__btn--icon {
      fill: #004f9c;
    }
  }

  .user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 20px;

    &__icon{
      width: 20px;
    }

    &__name {
      margin-left: 10px;
    }

    &__option {
      cursor: pointer;
      position: relative;

      &--icon {
        width: 10px;
        height: 17px;
        margin-left: 5px;
      }
    }
  }

  .lang {
    &__option {
      text-transform: uppercase;
      padding-left: 20px;
      cursor: pointer;
      position: relative;

      &--icon {
        width: 10px;
        height: 17px;
        margin-left: 5px;
      }
    }
  }

  .dropdown_option {
    &--mainmenu {
      display: none;
      position: absolute;
      box-shadow: 1px 1px 1px #ddd;
      z-index: 1;
      background: #fff;
      top: 25px;
      right: 0;
      width: 100%;

      li {
        // display: block;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background: #fff;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
      }

      li:hover {
        background: #e7f3fb;
      }
    }

    &--lang {
      display: none;
      position: absolute;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 10;
      background: #fff;
      top: 25px;
      right: 0;
      width: 100%;

      li {
        display: block;
        background: #fff;
        border-bottom: 1px solid #ddd;
        cursor: pointer;

        a {
          display: block;
          padding: 10px 15px;
          color: inherit;
        }
      }
      li:last-child {
        border-bottom: 0px;
      }

      li.active {
        color: #004f9c;
        box-shadow: unset;
      }
      li:hover {
        color: #fff;
        background: #004f9c;
      }
    }

    &--brand, &--dashboard {
      display: none;
      position: absolute;
      top: 30px;
      right: 25%;
      box-shadow: 1px 1px 1px #ddd;
      z-index: 10;
      width: max-content;
      background: #fff;
      text-align: left;

      .status {
        margin-left: 0px !important;
      }

      li {
        border-bottom: 1px solid #ddd;
      }

      li:hover {
        background: #e7f3fb;
      }
    }

    &--register {
      display: none;
      position: absolute;
      top: 35px;
      right: 20px;
      box-shadow: 1px 1px 1px #ddd;
      z-index: 10;
      width: max-content;
      background: #fff;

      ul {
        text-align: left;
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
        margin: 0;
      }

      li.title {
        font-weight: 500;
      }

      li.item {
        cursor: pointer;
        font-weight: 300;
      }

      li.item:hover {
        background: #e7f3fb;
      }
    }

    &--brand,
    &--dashboard,
    &--register {
      width: 100%;
      top: 45px;
      right: 0;

      li {
        display: block;
        padding: 15px;
      }
    }
    &--icon{
      width: 20px;
    }
  }

  .top {
    margin: 0 0 10px 0;
  }
  .controlPreview {
    padding: 15px 9.5%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;

    &__content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    &__close {
      display: flex;
      align-items: center;
      svg {
        width: 15px;
        height: 15px;
        fill: #004f9c;
        margin-left: 10px;
      }
    }

    .qrcode {
      display: flex;
      align-items: center;
      margin-left: 15px;

      input {
        width: 280px;
      }
      &--copy {
        margin-left: 10px;
        color: #fff;
        background: #004f9c;
        border: 0;
        border-radius: 5px;
        padding: 10px 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        svg {
          width: 15px;
          height: 15px;
          fill: #fff;
          margin-right: 10px;
        }
      }
      &--qr {
        margin-left: 10px;
        color: #fff;
        background: #004f9c;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
          height: 20px;
        }
      }
    }
  }

  @media only screen and (max-width: 992px) {
    .home {
      padding: 25px 5%;
      justify-content: space-between;
      position: inherit;

      &__logo{
        width: 40%;
        padding-right: 0;
        border-right: 0;
      }
    }
    .dropdown_option {
      &--mainmenu,
      &--lang {
        top: 20px;
      }
      &--register {
        min-width: 175px;
      }

      &--brand,
      &--register {
        top: 55px;

        li {
          padding: 20px 15px;
        }
      }
      &--icon{
        width: 12px;
      }
    }
    .already_login {
      margin: 0 auto;
      width: 100%;
      min-width: unset;
      max-width: 100%;
      display: block;
      padding: 0;
      background: #f6f6f6;

      .lang__option {
        padding-left: 10px;
      }
    }

    .top {
      display: flex;
      align-items: center;
      margin: 20px 0;
      // padding: 0 25px;
    }

    .top:first-child {
      padding-left: 5%;
    }
    .top:nth-child(2) {
      padding-right: 15px;
      padding-left: 10px;
    }

    .control {
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      border-width: 1px 0;

      &__btn {
        padding: 20px 0;
        border: 0px;
        width: 20%;

        &--icon {
          width: 15px;
          height: 15px;
          margin: 0;
        }
        &--name {
          width: 95%;
        }
      }

      .brand {
        border-bottom: 1px solid #ddd;
        border-right: 0;
        padding: 20px 15px;
        width: 100%;
      }

      .landing {
        width: 25%;
      }

      .landing,
      .dashboard,
      .leads {
        border-right: 1px solid #ddd;
      }
      .preview {
        margin-left: 0;
        width: 15%;
        padding: 21px 0;
        border-radius: 0;

        svg {
          margin: 0;
        }
      }
    }

    .user {
      font-size: 10px;
      &__icon{
        width: 12px;
      }
      &__name {
        display: inline-block;
        width: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
      }

      &__option {
        padding-left: 10px;

        a {
          display: flex;
          align-items: center;
        }

        &--icon {
          width: 10px;
          height: 10px;
        }
      }
    }

    .controlPreview {
      margin: 0 auto;
      width: 100%;
      padding: 15px;

      &__close {
        svg {
          margin-left: 0px;
        }
      }

      .qrcode {
        margin-left: 0;
        input {
          width: 220px;
          border-radius: 3px 0 0 3px;
          line-height: 31px;
        }
        &--copy {
          padding: 10px;
          border-radius: 0 5px 5px 0;
          margin: 0;

          svg {
            margin: 0;
          }
        }
        &--qr {
          img {
            height: 15px;
          }
        }
      }
    }
  }

  /* ----------- iPad Portrait ----------- */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .home {
      &__logo {
        width: 20%;
      }
    }
    .controlPreview {
      max-width: 450px;
      margin-bottom: 10px;
    }
  }

  @media only screen and (width: 1024px) {
    max-width: 984px;
    margin: 0 auto;

    .controlPreview {
      padding: 15px 5%;
    }
  }
}

#header.center {
  justify-content: center;
}

.main_Orderkrub {
  margin: 30px auto !important;
  // background: #fff !important;
  width: 85% !important;

  &__logo {
    // width: 17%;
    width: auto;
    img {
      width: 147px;
    }
  }

  @media only screen and (max-width: 992px) {
    margin: 0 !important;

    &__logo {
      width: 50%;
    }
  }
}

.header_signup {
  width: 100% !important;
  margin: 25px 0 15px !important;
  padding: 0 5%;

  @media only screen and (max-width: 992px) {
    margin: 0 !important;
    background: #fff !important;

    &__logo {
      width: 50%;
    }
  }
}