.scaleph-header {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  .scaleph-header-main {
    display: flex;
    height: 100%;

    .scaleph-header-main-left {
      display: flex;
      align-items: center;
      .scaleph-header-main-left-mega {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 1px;
        margin-left: 10px;
        color: #666;
        line-height: 14px;
        cursor: pointer;
        padding-block: 0;
        .scaleph-header-main-left-mega-icon {
          width: 22px;
          height: 22px;
        }
        &:hover {
          color: rgba(0, 0, 0, 0.65);
          background-color: rgba(0, 0, 0, 0.04);
        }
      }
      .scaleph-header-main-left-title {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
        overflow: hidden;
        .scaleph-header-main-left-title-logo {
          display: flex;
          align-items: center;
          min-height: 22px;
          //default logo color
          color: rgba(0, 0, 0, 0.88);
          font-size: 22px;
        }
        .scaleph-header-main-left-title-text {
          display: inline-block;
          color: rgba(0, 0, 0, 0.88);
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          vertical-align: top;
          margin-block: 0;
          margin-inline: 0;
          margin-inline-start: 6px;
        }
      }
    }
    .scaleph-header-main-center {
      display: flex;
      flex: 1 1 0%;
      align-items: center;
      text-align: left;
    }

    .scaleph-header-main-right {
      display: flex;
      align-items: center;
      min-width: 120px;
      height: 100%;
      text-align: right;
    }
  }
}
