:global {
  @main-bg: #f4f7ff; //#033C67 #f5f5f5
  @opacity-bg: rgba(72, 133, 255, 0.2);
  @header-prefix: header;
  .headerModal {
    .ant-modal-footer {
      display: none;
    }
    .ant-modal-body {
      max-height: 90vh;
    }
  }
  .ant-modal {
    padding-bottom: 0;
  }
  .headerInput {
    .ant-input {
      border: 1px solid #fff;
      height: 38px;
    }
    .ant-input-affix-wrapper .ant-input:not(:first-child) {
      padding-left: 40px;
    } 
    .ant-input::placeholder {
      color: #909399;
    }
  }

  .@{header-prefix} {
    // width: 100%;
    height: 100%;
    padding: 0 24px;
    margin: 0px 10px;
    // background-color: @main-bg;
    // box-shadow      : 0 0 10px rgba(0, 0, 0, 0.25);//rgba(250, 246, 246, 0.25)
    transition: background-color 0.2s ease;

    &.login {
      // background-color: @opacity-bg;
    }
    &.nologin {
      // background-color: @opacity-bg;
      background-color: @main-bg;
      // box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); //rgba(250, 246, 246, 0.25)
    }

    &__left,
    &__right {
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }

    &__left {
      float: left;

      &-logo {
        width: auto;
        height: 52px;
        margin-right: 16px;
      }

      &-slogan {
        font-size: 16px;
        font-weight: bolder;
        color: #606266; //#f3eded
      }
      &-sloganLogin {
        font-size: 16px;
        font-weight: bolder;
        color: #ffffffdc; //#f3eded
      }
      &-slogan-mobile {
        font-size: 11px;
        font-weight: bolder;
        color: #333333;
      }
    }

    &__right {
      float: right;

      &-icon {
        font-size: 22px !important;
        // color: #909399 !important; //f3eded
        cursor: pointer;
      }

      &-datav {
        font-size: 0;
        margin-right: 36px;
      }

      &-user {
        font-size: 0;
        margin-left: 36px;
        margin-right: 26;
      }
    }
  }
}