.wd-horizontal-layout {
  display: flex;
  height: 100%;
  background: #f7f8fa;
}
.wd-horizontal-layout .right-container {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
}
.wd-horizontal-layout .wd-side-menus {
  position: relative;
  width: 220px;
  flex: 0 0 220px;
  grid-template-rows: 64px 1fr 48px;
  background: #fff;
  transition: all ease 0.2s;
}
.wd-horizontal-layout .wd-side-menus .wd-menus-list {
  overflow-x: hidden;
  overflow-y: auto;
}
.wd-horizontal-layout .wd-side-menus .wd-menus-list .is-active {
  z-index: 15;
}
.wd-horizontal-layout .wd-side-menus .wd-menus-list::-webkit-scrollbar {
  display: none;
}
.wd-horizontal-layout .wd-side-menus .wd-menus-list::before {
  content: '';
  display: block;
  top: 38px;
  left: 0px;
  height: 20px;
  z-index: 10;
  width: 100%;
  position: absolute;
  box-shadow: 0 20px 5px -3px rgba(255, 255, 255, 0.7);
}
.wd-horizontal-layout .wd-side-menus .wd-menus-list::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  height: 20px;
  width: 100%;
  left: 0;
  bottom: 0px;
  box-shadow: 0 -40px 5px -3px rgba(255, 255, 255, 0.7);
}
.wd-horizontal-layout .wd-side-menus.collapse {
  width: 56px;
  flex: 0 0 56px;
}
.wd-horizontal-layout .wd-side-menus.collapse .collapse-btn .collapse-icon {
  transform: rotate(-90deg);
}
.wd-horizontal-layout .wd-side-menus.collapse .wd-logo {
  background: none;
}
.wd-horizontal-layout .wd-side-menus.collapse .wd-menu-text {
  display: none;
}
.wd-horizontal-layout .wd-side-menus.collapse .copyright {
  display: none;
}
.wd-horizontal-layout .wd-side-menus .collapse-btn {
  position: absolute;
  right: 16px;
  bottom: 63px;
  width: 24px;
  height: 24px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
  text-align: center;
  line-height: 28px;
  z-index: 18;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.wd-horizontal-layout .wd-side-menus .collapse-btn .collapse-icon {
  transform: rotate(90deg);
  transition: transform ease 0.2s;
}
.wd-horizontal-layout .wd-side-menus .wd-logo {
  position: relative;
  background-size: 110px;
  height: 64px;
  z-index: 20;
}
.wd-horizontal-layout .wd-side-menus .wd-menus-list {
  height: calc(100% - 112px);
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 54px;
  line-height: 54px;
  color: #0F1222;
  cursor: pointer;
  transition: background ease 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item.small {
  height: 36px;
  line-height: 36px;
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item.small::after {
  display: none;
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 2px;
  height: 22px;
  background: transparent;
  transition: all ease 0.3s;
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item:hover,
.wd-horizontal-layout .wd-side-menus .wd-menu-item.router-link-active {
  color: #5384FF;
  background: rgba(83, 132, 255, 0.06);
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item:hover .wd-menu-icon,
.wd-horizontal-layout .wd-side-menus .wd-menu-item.router-link-active .wd-menu-icon {
  filter: invert(45%) sepia(13%) saturate(4258%) hue-rotate(197deg) brightness(108%) contrast(100%);
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item:hover::after,
.wd-horizontal-layout .wd-side-menus .wd-menu-item.router-link-active::after {
  background: #5384FF;
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item .wd-menu-icon {
  margin-right: 8px;
  width: 14px;
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item .s-user-ctn {
  position: relative;
  padding-right: 50px;
}
.wd-horizontal-layout .wd-side-menus .wd-menu-item .s-user-ctn .user-logout-btn {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  padding: 0 8px;
  color: #5384FF;
}
.wd-horizontal-layout .wd-side-menus .copyright {
  position: relative;
  height: 48px;
  line-height: 48px;
  font-size: 12px;
  color: rgba(15, 18, 34, 0.2);
  text-align: center;
  margin: 0;
  z-index: 10;
}

.wd-nav-bar-page {
  position: relative;
  padding: 0 20px 0 8px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  color: #0F1222;
  background-color: #fff;
  border-radius: 4px;
}
.wd-nav-bar-page::after {
  content: ' ';
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
}
.wd-nav-bar-page :deep(.fes-scrollbar-container) {
  display: flex;
}
.wd-nav-bar-page .fes-menu.is-horizontal {
  border-bottom: 1px #f1f1f2;
}
.wd-nav-bar-page .wd-nav-bar-scroll {
  width: 100%;
}
.wd-nav-bar-drawer-parent {
  margin-left: -8px;
  margin-top: -16px;
  border-bottom: 1px solid #f1f1f2;
}

.wd-nav-header {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
}
.wd-nav-header .back {
  color: #93949B;
  height: 24px;
  width: 24px;
  transform: scale(1.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wd-nav-header .name {
  font-size: 24px;
  color: #0F1222;
  margin: 0 12px;
}

.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.loading-block .tip {
  margin-bottom: 103px;
  text-align: center;
}
.loading-block .tip .tip-text {
  color: #93949B;
  margin-bottom: 32px;
}
.page {
  height: 600px;
}
.normal {
  height: 600px;
}
.loading {
  background: url('./assets/images/loading.png') center no-repeat;
}
.emptyInitResult {
  background: url('./assets/images/emptyInitResult.svg') center no-repeat;
}
.emptyQueryResult {
  background: url('./assets/images/emptyQueryResult.svg') center no-repeat;
}
.noPermissions {
  background: url('./assets/images/noPermissions.svg') center no-repeat;
}
.handleException {
  background: url('./assets/images/handleException.png') center no-repeat;
}
.responseTimedOut {
  background: url('./assets/images/responseTimedOut.png') center no-repeat;
}

.wd-search {
  display: flex;
  flex-wrap: wrap;
}
.wd-search .condition-item {
  align-items: center;
  padding-right: 22px;
  padding-bottom: 24px;
}
.wd-search .condition-item:last-child {
  padding-right: 0;
}
.wd-search .condition-item .condition-label {
  padding-right: 16px;
  font-size: 14px;
  color: #0F1222;
}
.wd-search .condition-item .condition-value {
  margin-right: 16px;
}
.wd-search .condition-item .fes-input,
.wd-search .condition-item .fes-select {
  width: 160px;
}
.wd-search .selected-count {
  background: rgba(83, 132, 255, 0.06);
  border: 1px solid #5384FF;
  color: #5384FF;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}
.title-desc {
  line-height: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #CFD0D3;
}
.table-header-config .content {
  padding: 0;
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
  text-align: left;
  background-color: transparent;
  border-radius: 0;
}
.table-header-config .content .section-list .section-item {
  margin-bottom: 16px;
}
.table-header-config .content .section-list .section-item:last-of-type {
  margin-bottom: 0;
}
.table-header-config .content .section-list .section-item .sub-title {
  margin-bottom: 8px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(15, 18, 34, 0.65);
  font-weight: 400;
}
.table-header-config .content .section-list .section-item .hint {
  line-height: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #CFD0D3;
  margin-left: 0;
}
.table-header-config .content .section-list .header-list {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
.table-header-config .content .section-list .header-list .header-item {
  margin: 0 8px 8px 0;
  flex: 0 0;
}

.wd-table-page {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  position: relative;
}
.wd-table-page .operate {
  margin-bottom: 24px;
}
.wd-table-page .table-pagination-container {
  padding-top: 16px;
}
.wd-table-page .table-pagination-container .fes-pagination {
  justify-content: flex-end;
}
.wd-table-drawer {
  background: #fff;
  border-radius: 4px;
  padding: 8px 0px 0px 0px;
  position: relative;
}
.wd-table-drawer .operate {
  margin-bottom: 24px;
}
.wd-table-drawer .table-pagination-container {
  padding-top: 16px;
}
.wd-table-drawer .table-pagination-container .fes-pagination {
  justify-content: flex-end;
}

.selector-wrapper {
  width: 100%;
}
.selector-wrapper .selector {
  border: 1px solid #cfd0d3;
  border-radius: 4px;
  padding: 16px;
  min-height: 240px;
  max-height: 320px;
  overflow: auto;
}
.selector-wrapper .selector .query-input {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  grid-gap: 8px;
}
.selector-wrapper .selector .query-input .hidden-select .fes-select-trigger .fes-select-trigger-label-item {
  display: none;
}
.selector-wrapper .selector .tag-label {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}
.selector-wrapper .selector .tag-label .clearable {
  font-size: 14px;
  color: #63656F;
  cursor: pointer;
}
.selector-wrapper .selector-header {
  display: block;
  border: 1px solid #cfd0d3;
  border-radius: 4px 4px 0px 0px;
  background-color: #f7f7f8;
  padding: 5px 16px;
}
.selector-wrapper .selector-with-header {
  border-width: 0px 1px 1px 1px;
  border-color: #cfd0d3;
  border-style: solid;
  border-radius: 0px 0px 4px 4px;
  padding: 16px;
  min-height: 240px;
  max-height: 320px;
  overflow: auto;
}
.selector-wrapper .selector-with-header .query-input {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  grid-gap: 8px;
}
.selector-wrapper .selector-with-header .query-input .hidden-select .fes-select-trigger .fes-select-trigger-label-item {
  display: none;
}
.selector-wrapper .selector-with-header .tag-label {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}
.selector-wrapper .selector-with-header .tag-label .clearable {
  font-size: 14px;
  color: #63656F;
  cursor: pointer;
}

.wd-vertical-layout {
  display: flex;
  height: 100%;
  background: #f7f8fa;
  flex-direction: column;
}
.wd-vertical-layout .vertical-nav {
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%;
  height: 54px;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.2);
}
.wd-vertical-layout .vertical-nav .vertical-menuInfo {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.wd-vertical-layout .vertical-nav .vertical-menuInfo .logo {
  margin-right: 12px;
}
.wd-vertical-layout .vertical-nav .vertical-userInfo {
  display: flex;
  align-items: center;
  color: #63656f;
  margin-left: 12px;
}
.wd-vertical-layout .vertical-nav::-webkit-scrollbar {
  display: none;
}
.wd-vertical-layout .vertical-body {
  overflow-y: auto;
  position: relative;
  height: 100%;
}

.wd-tags-panel {
  display: flex;
  flex-wrap: wrap;
}
.wd-tags-panel .fes-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}
.wd-tags-panel .input-nef-tag {
  width: 100px;
}
.wd-tags-panel .input-in-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}
.wd-tags-panel .button-nef-tag {
  margin-right: 16px;
}

.wd-column-tip {
  position: relative;
}
.wd-column-tip .wd-hint-icon-column {
  position: absolute;
  transform: translateY(-50%);
  top: 55%;
  color: #B7B7BC;
  margin: 0px 6px;
}

.chart-body {
  width: 100%;
}
.chart-body .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.chart-body .title-section {
  display: flex;
  flex-direction: column;
  color: #999;
  gap: 8px;
}
.chart-body .update-info {
  display: flex;
  align-items: center;
}
.chart-body .update-time {
  font-size: 12px;
}
.chart-body .refresh-icon {
  margin-left: 8px;
  font-size: 12px;
  cursor: pointer;
  color: #999;
}
.chart-body .refresh-icon:hover {
  color: #5384ff;
}
.chart-body .chart-title {
  margin: 0;
  font-size: 16px;
  color: #333;
}
.chart-body .date-range {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.chart-body .chart-container {
  position: relative;
  width: 100%;
  height: 400px;
}
.chart-body .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
}
.chart-body .mr16 {
  margin-right: 16px;
}
.chart-body .my-btn.active {
  background-color: #f5f8ff;
  border-color: #5384ff;
  color: #5384ff;
}