.tone-custom-menu-style {
  background: #051136 !important;
  border-bottom: none;
  user-select: none;
  min-width: unset !important;
}

.tone-custom-header-global-cls {
  .nav_bottom_line {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
    visibility: hidden;
  }

  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item,
  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu {
    margin-top: 0;
  }

  .ant-menu-item:active,
  .ant-menu-submenu-title:active,
  .ant-menu-item-selected {
    background-color: #051136 !important;
  }

  .ant-menu-item,
  .ant-menu-submenu-title {
    font-size: 14px;
    margin-top: 0;
    top: 0;
    margin: 0 12px !important;
    padding: 0;
    color: #fff !important;
    border-bottom: 2px solid transparent !important;
    .ant-space-item {
      color: #fff !important;
      .anticon {
        margin-right: 0 !important;
      }
      span,
      svg {
        color: #fff !important;
        path {
          fill: currentColor;
        }
      }
    }

    &:hover {
      color: rgba(255, 255, 255, 0.5) !important;
      border-bottom: 2px solid transparent !important;
      span,
      svg {
        color: rgba(255, 255, 255, 0.5) !important;
        path {
          fill: currentColor;
        }
      }
    }
  }

  .ant-dropdown-menu-item {
    min-width: 160px;
    height: 32px;
    display: flex;
  }

  .ant-menu-submenu {
    top: 0;
  }

  .ant-menu-item .anticon {
    margin-right: 0;
  }

  .ant-menu-item-selected {
    border-bottom: 2px solid transparent !important;

    .ant-space-horizontal .ant-space-item span,
    .ant-space-horizontal .ant-space-item {
      color: #ffffff !important;
    }
    .nav_bottom_line {
      visibility: visible;
    }
    svg {
      path {
        fill: #fff;
      }
    }
  }

  .ant-menu-submenu-open {
    border-bottom: 2px solid transparent !important;
  }
  
  .ant-menu-item-active {
    border-bottom: 2px solid transparent !important;

    .ant-space-horizontal .ant-space-item span,
    .ant-space-horizontal .ant-space-item {
      color: #ffffff !important;
    }
    svg {
      path {
        fill: #fff;
      }
    }
  }

  .ant-menu-overflowed-submenu:hover {
    border-bottom: 2px solid transparent !important;
  }

  .ant-menu-overflowed-submenu.ant-menu-submenu-selected {
    border-bottom: 2px solid #fff !important;
  }

  .ant-space-horizontal {
    &:hover {
      .ant-space-item span,
      .ant-space-item {
        color: rgba(255, 255, 255, 0.5) !important;
      }
    }
  }

  .ant-menu-item.ant-menu-item-active.ant-menu-item-selected {
    // border-bottom:2px solid #fff!important;
    border-bottom: 2px solid transparent !important;
    .nav_bottom_line {
      visibility: visible;
    }

    .ant-space-horizontal .ant-space-item span,
    .ant-space-horizontal .ant-space-item {
      color: #fff !important;
    }
    svg {
      path {
        fill: #fff;
      }
    }
  }
}

.header {
  height: 50px;
  width: 100%;
  line-height: 50px;
  padding: 0 25px;
  position: relative;
  border-bottom: 1px solid #f0f0f0;

  .left {
    height: 100%;
    align-items: center;
    h3 {
      font-weight: normal;
      line-height: 50px;
      margin-bottom: 0;
      margin-right: 30px;
    }
    img {
      margin-right: 10px;
    }
  }

  .right {
    height: 100%;
    align-items: center;
  }
}

:global {
  .ant-menu-horizontal {
    border: none;
  }
  .ant-menu-submenu-popup ul {
    .tone-custom-menu-style();
    .tone-custom-header-global-cls();
  }
}

.menu {
  background: #051136;
  height: 35px;
  line-height: 35px !important;
  border-bottom: none;
  color: #fff;
  // margin-left:20px;
  flex: 1;

  :global {
    .tone-custom-header-global-cls();
  }
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  color: #1890ff;
  background-color: #f5f5f5;
}

.active_typography {
  color: #1890ff;
}

.dropdownArrowHide {
  :global(.ant-dropdown-arrow) {
    visibility: hidden;
  }
}
