:root {
  --card-kpis-height-cycle: 114px;
  --card-kpis-height-large-auto: 225px;
  --card-kpis-height-medium-auto: 180px;
  --card-kpis-height-small-auto: 77px;
  --card-kpis-height-large: 201px;
  --card-kpis-height-medium: 156px;
  --card-kpis-height-small: 77px;
  --card-width-kpis-large: 332px;
  --card-width-kpis-medium: 312px;
  --card-width-kpis-small: 292px;
  --card-width-edit: 485px;
  --card-kpis-height-edit: 350px;
  --card-kpis-height-edit-parent: 310px;
}

.kpis-section {
  border-radius: 10px;
  background: #FAFAFA;
}

.border-add {
  width: 24px;
  height: 24px;
  border: 1px dashed #C0C6DC;
  border-radius: 4px;
}

  .border-add .icon {
    color: #C0C6DC;
  }

.member-add-card {
  border-radius: 100px;
  border: 1px solid #C0C6DC;
}

/*tree KPIs*/
.tree_kpis .tree_card_kpis .dash_line.child {
  z-index: 10;
}

.tree_card:not(.cycle) > *:not(.tree_background):not(hr) {
  background-color: white;
}

.tree_card.cycle > *:not(.tree_background):not(hr):not(.dash_line) {
  background-color: #3850b7;
}

.tree_kpis .tree.not_item {
  overflow: unset;
}

.tree_kpis > .tree .tree_card_kpis .dash_line {
  height: 29px;
}

.tree_kpis .tree_card.has-add .dash_line.child {
  display: block;
}

.tree_kpis > .tree .tree_card_list {
  padding-top: 60px;
  gap: 0;
}

.tree_kpis > .tree .dash_line.child .icon-add {
  transform: translate(-53%, 65%);
  z-index: 2;
  position: absolute;
}

.tree_kpis > .tree .tree_card {
  box-shadow: none;
}

  .tree_kpis > .tree .tree_card.is_last {
    margin-bottom: 224px;
  }

.tree_kpis > .tree .tree_card {
  padding: 0 1rem;
}

  .tree_kpis > .tree .tree_card .tree_background {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 1rem;
    width: calc(100% - 2rem);
    height: 100%;
    z-index: 0;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

.tree_kpis > .tree > .tree_card_kpis.has-add.is_first.is_last {
  margin-bottom: 0;
}

.progress_has_value .progress.custom {
  width: calc(100% - 45px);
}

.progress-kpis.progress.is-small {
  height: 5px !important;
}

/*auto*/
.tree_kpis > .tree > .horizontal_dash.cycle {
  top: calc(var(--card-kpis-height-cycle) + 2 * var(--padding) + 8px);
}

.tree_kpis > .tree > .horizontal_dash.edit_view:not(.cycle) {
  top: calc(var(--card-kpis-height-edit) + 2 * var(--padding) + 8px);
}

.tree_kpis > .tree > .horizontal_dash.edit_view_parent:not(.cycle) {
  top: calc(var(--card-kpis-height-edit-parent) + 2 * var(--padding) + 8px);
}

.tree_kpis > .tree > .horizontal_dash.large-auto:not(.cycle) {
  top: calc(var(--card-kpis-height-large-auto) + 2 * var(--padding) + 8px);
}

.tree_kpis > .tree > .horizontal_dash.medium-auto:not(.cycle) {
  top: calc(var(--card-kpis-height-medium-auto) + 2 * var(--padding) + 8px);
}

.tree_kpis > .tree > .horizontal_dash.small-auto:not(.cycle) {
  top: calc(var(--card-kpis-height-small-auto) + 2 * var(--padding) + 8px);
}

.tree .horizontal_dash.cycle {
  top: calc(var(--card-kpis-height-cycle) + var(--padding) + 8px);
}

.tree .horizontal_dash.edit_view:not(.cycle) {
  top: calc(var(--card-kpis-height-edit) + var(--padding) + 8px);
  width: calc(100% - var(--card-width-edit));
}

.tree .horizontal_dash.edit_view_parent:not(.cycle) {
  top: calc(var(--card-kpis-height-edit-parent) + var(--padding) + 8px);
  width: calc(100% - var(--card-width-edit));
}

.tree .horizontal_dash.large-auto:not(.cycle) {
  top: calc(var(--card-kpis-height-large-auto) + var(--padding) + 8px);
  width: calc(100% - var(--card-width-kpis-large));
}

.tree .horizontal_dash.medium-auto:not(.cycle) {
  top: calc(var(--card-kpis-height-medium-auto) + var(--padding) + 8px);
  width: calc(100% - var(--card-width-kpis-medium));
}

.tree .horizontal_dash.small-auto:not(.cycle) {
  top: calc(var(--card-kpis-height-small-auto) + var(--padding) + 8px);
  width: calc(100% - var(--card-width-kpis-small));
}


.tree_kpis .tree_card_kpis.cycle {
  height: var(--card-kpis-height-cycle);
}

  .tree_kpis .tree_card_kpis.cycle.large,
  .tree_kpis .tree_card_kpis.cycle.large-auto {
    width: var(--card-width-kpis-large);
  }

  .tree_kpis .tree_card_kpis.cycle.medium,
  .tree_kpis .tree_card_kpis.cycle.medium-auto {
    width: var(--card-width-kpis-medium);
  }

  .tree_kpis .tree_card_kpis.cycle.small,
  .tree_kpis .tree_card_kpis.cycle.small-auto {
    width: var(--card-width-kpis-small);
  }

.tree_kpis .tree_card_kpis.edit_view:not(.cycle) {
  height: var(--card-kpis-height-edit);
}

.tree_kpis .tree_card_kpis.edit_view_parent:not(.cycle) {
  height: var(--card-kpis-height-edit-parent);
}

.tree_kpis .tree_card_kpis.large-auto:not(.cycle) {
  height: var(--card-kpis-height-large-auto);
}

.tree_kpis .tree_card_kpis.medium-auto:not(.cycle) {
  height: var(--card-kpis-height-medium-auto);
}

.tree_kpis .tree_card_kpis.small-auto:not(.cycle) {
  height: var(--card-kpis-height-small-auto);
}

/*not auto*/
.tree_kpis > .tree > .horizontal_dash.large {
  top: calc(var(--card-kpis-height-large) + 2 * var(--padding) + 8px);
}

.tree_kpis > .tree > .horizontal_dash.medium {
  top: calc(var(--card-kpis-height-medium) + 2 * var(--padding) + 8px);
}

.tree_kpis > .tree > .horizontal_dash.small {
  top: calc(var(--card-kpis-height-small) + 2 * var(--padding) + 8px);
}

.tree .horizontal_dash.large {
  top: calc(var(--card-kpis-height-large) + var(--padding) + 8px);
}

.tree .horizontal_dash.medium {
  top: calc(var(--card-kpis-height-medium) + var(--padding) + 8px);
}

.tree .horizontal_dash.small {
  top: calc(var(--card-kpis-height-small) + var(--padding) + 8px);
}

.tree_kpis .tree_card_kpis.large {
  height: var(--card-kpis-height-large);
}

.tree_kpis .tree_card_kpis.medium {
  height: var(--card-kpis-height-medium);
}

.tree_kpis .tree_card_kpis.small {
  height: var(--card-kpis-height-small);
}

.tree_kpis .tree_card.is_first::before {
  top: -35px;
}

.tree_kpis .tree_card.is_last::after {
  top: -35px;
}

/*----------width-------------*/
/*large*/
.tree_kpis > .tree.large > .horizontal_dash,
.tree_kpis > .tree.large-auto > .horizontal_dash {
  width: calc(100% - var(--card-width-kpis-large) - 2 * var(--padding));
}

.tree_kpis > .tree.large > .horizontal_dash,
.tree_kpis > .tree.large-auto > .horizontal_dash {
  content: "";
  width: calc(100% - var(--card-width-kpis-large)) !important;
  left: calc(var(--card-width-kpis-large) / 2);
}

.tree_card_kpis.tree_card.large,
.tree_card_kpis.tree_card.large-auto {
  width: var(--card-width-kpis-large);
}

/*medium*/
.tree_kpis > .tree.medium > .horizontal_dash,
.tree_kpis > .tree.medium-auto > .horizontal_dash {
  width: calc(100% - var(--card-width-kpis-medium) - 2 * var(--padding));
}

.tree_kpis > .tree.medium > .horizontal_dash,
.tree_kpis > .tree.medium-auto > .horizontal_dash {
  content: "";
  width: calc(100% - var(--card-width-kpis-medium)) !important;
  left: calc(var(--card-width-kpis-medium) / 2);
}

.tree_card_kpis.tree_card.medium,
.tree_card_kpis.tree_card.medium-auto {
  width: var(--card-width-kpis-medium);
}

/*small*/
.tree_kpis > .tree.small > .horizontal_dash,
.tree_kpis > .tree.small-auto > .horizontal_dash {
  width: calc(100% - var(--card-width-kpis-small) - 2 * var(--padding));
}

  .tree_kpis > .tree.small > .horizontal_dash.small,
  .tree_kpis > .tree.small-auto > .horizontal_dash.small {
    content: "";
    width: calc(100% - var(--card-width-kpis-small)) !important;
    left: calc(var(--card-width-kpis-small) / 2);
  }

.tree_card_kpis.tree_card.small,
.tree_card_kpis.tree_card.small-auto {
  width: var(--card-width-kpis-small) !important;
}

/*edit*/
.tree_kpis > .tree.edit_view > .horizontal_dash,
.tree_kpis > .tree.edit_view_parent > .horizontal_dash {
  width: calc(100% - var(--card-width-edit) - 2 * var(--padding));
}

.tree_kpis > .tree.edit_view .horizontal_dash.edit_view,
.tree_kpis > .tree.edit_view_parent .horizontal_dash.edit_view_parent {
  content: "";
  width: calc(100% - var(--card-width-edit)) !important;
  left: calc(var(--card-width-edit) / 2);
}

.tree_card_kpis.tree_card.edit_view,
.tree_card_kpis.tree_card.edit_view_parent {
  width: var(--card-width-edit);
}

/*----------slider-----------*/
.tree_kpis_slidebar .view-tag {
  border-bottom: 2px solid #f5f7ff;
}

  .tree_kpis_slidebar .view-tag.is-active {
    border-bottom: 2px solid #355CAA;
  }

/*  ---------------thóng kê-----------------*/
/*layout-6*/
#kpis-report.report-layout-6 > li:nth-of-type(1),
#kpis-report.report-layout-6 > li:nth-of-type(2),
#kpis-report.report-layout-6 > li:nth-of-type(3) {
  height: 300px;
}

#kpis-report.report-layout-6 > li:nth-of-type(4),
#kpis-report.report-layout-6 > li:nth-of-type(5),
#kpis-report.report-layout-6 > li:nth-of-type(6) {
  height: calc(100vh - 466px);
  min-height: 300px;
}

#kpis-report.report-layout-6 > li:nth-of-type(1),
#kpis-report.report-layout-6 > li:nth-of-type(2),
#kpis-report.report-layout-6 > li:nth-of-type(4),
#kpis-report.report-layout-6 > li:nth-of-type(5) {
  flex: none;
  width: 350px;
}

.sidebar ~ #content #kpis-report.report-layout-6 > li:nth-of-type(3),
.sidebar ~ #content #kpis-report.report-layout-6 > li:nth-of-type(6) {
  flex: none;
  width: calc(100vw - 840px);
}

.sidebar.is_pin ~ #content #kpis-report.report-layout-6 > li:nth-of-type(3),
.sidebar.is_pin ~ #content #kpis-report.report-layout-6 > li:nth-of-type(6) {
  flex: none;
  width: calc(100vw - 1038px);
}

#kpis-report.report-layout-6 > li:nth-of-type(5) .kpis-list-report {
  max-height: calc(100% - 100px);
}

#kpis-report.report-layout-6 > li:nth-of-type(6) .kpis-list-report {
  max-height: calc(100% - 158px);
}

/*layout-4*/

#kpis-report.report-layout-4 > li:nth-of-type(1),
#kpis-report.report-layout-4 > li:nth-of-type(2),
#kpis-report.report-layout-4 > li:nth-of-type(3),
#kpis-report.report-layout-4 > li:nth-of-type(4) {
  height: 300px;
}

#kpis-report.report-layout-4 > li:nth-of-type(5),
#kpis-report.report-layout-4 > li:nth-of-type(6) {
  height: unset;
}

#kpis-report.report-layout-4 > li {
  flex: none;
  width: calc(50% - 8px);
}

  #kpis-report.report-layout-4 > li:nth-of-type(5) .kpis-list-report,
  #kpis-report.report-layout-4 > li:nth-of-type(6) .kpis-list-report {
    max-height: unset;
  }

/*----*/

.indicator-card {
  border-radius: 4px;
  padding: 4px 8px;
  border: 1px solid #C0C6DC;
}

.report_progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  height: 160px;
  margin: 0 auto;
}

.no-border {
  border: none !important;
}