/*Categories list*/
.the7-vertical-list .cat-item ul {
  margin-left: 0;
}
.the7-vertical-list {
  transition: opacity .5s ease;
  #the7-body & {
    list-style: none;
    margin: 0;
  }
  #the7-body .collapsible & {
    margin-top: 10px;
  }
  &.dt-sub-menu-display-on_click {
    visibility: visible;
  }
}
.elementor-popup-modal .the7-vertical-list .children {
    margin: 0;
}

.the7-vertical-list {
  --icon-size: 1em;
  --icon-spacing: 5px;
  & li {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    & .item-content {
      display: flex;
      align-items: center;
      order: 1;
      grid-area: item;
    }
  }
  & a {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    transition: all 0.3s;
    border: 0 solid;
    line-height: 1.2;

    &.not-clickable-item {
      cursor: pointer;
    }

    .dt-sub-menu-display-on_click& {
      display: grid;
    }
    transition: all 0.5s ease;
  }
}
.the7-vertical-list > li > a {
  border-color: var(--the7-divider-color);
  justify-content: var(--justify-count);
}
.widget-divider-yes .the7-vertical-list li:first-child:before,
.widget-divider-yes .the7-vertical-list li:after,
.sub-widget-divider-yes .the7-vertical-list li:first-child:before,
.sub-widget-divider-yes .the7-vertical-list li:after {
    content: "";
    position: absolute;
    bottom: calc((var(--grid-row-gap, 0px) - var(--divider-width, 0px))/ 2);
    left: 0;
    width: 100%;
    border-top-width: var(--divider-width, 0px);
    border-bottom-width: var(--divider-width, 0px);
    border-color: var(--the7-divider-color);
}
.widget-divider-yes .the7-vertical-list > li:first-child:before {
  bottom: calc(100% - var(--divider-width, 0px));
}
.widget-divider-yes .the7-vertical-list li:last-child:after {
    bottom: calc(-1 * var(--divider-width, 0px) / 2);
}
.widget-divider-yes .dt-categories-list--main:not(.last-item-border-hide) {
  padding-bottom: calc( var(--divider-width, 0px) / 2)
}
.sub-widget-divider-yes .the7-vertical-list .children li:first-child:before,
.sub-widget-divider-yes .the7-vertical-list .children li:after {
    bottom: calc((var(--sub-grid-row-gap, 0px) - var(--divider-sub-width, 0px)) / 2);
    left: 0;
    width: 100%;
    border-top-width: var(--divider-sub-width, 0px);
    border-bottom-width: var(--divider-sub-width, 0px);
    border-color: var(--the7-divider-color);
}
.sub-widget-divider-yes .the7-vertical-list .children li:last-child:after {
    bottom: calc(-1 * var(--divider-sub-width, 0px) / 2);
}
.sub-widget-divider-yes .the7-vertical-list .children > li:first-child:before {
  bottom: calc(100% - var(--divider-sub-width, 0px));
}

.the7-vertical-list .children {
  --sub-icon-size: 1em;
  --sub-icon-spacing: 5px;
  & > li a {
    
    font: var(--the7-widget-content-font);
    color: var(--the7-title-color);
    border-color: var(--the7-divider-color);
    justify-content: var(--justify-count);
    .dt-sub-menu-display-on_click & {
      grid-template-columns: auto;
      grid-template-areas: " item";
    }

    .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-columns: auto 1fr auto;
      grid-template-areas: " item empty indicator ";
    }
    .dt-sub-category_align-center .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-columns: calc(var(--icon-size) + var(--icon-spacing)) 1fr  calc(var(--icon-size) + var(--icon-spacing));
      grid-template-areas: "empty item indicator ";
    }
    .dt-sub-category_align-right .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-areas: " item indicator ";
      grid-template-columns: auto auto;
      justify-content: flex-end;
    }
    .dt-sub-menu-display-on_click.dt-sub-icon-align-with_text& {
      grid-template-areas: " item count indicator ";
      grid-template-columns: auto auto calc(var(--sub-icon-size) + var(--sub-icon-spacing));
    }
    .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-columns: auto auto 1fr auto;
      grid-template-areas: " item count empty indicator ";
    }
    .sub-category-count-align-right .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-columns: 1fr auto calc(var(--sub-icon-size) + var(--sub-icon-spacing)) ;
      grid-template-areas: " item count indicator ";
    }
    .dt-sub-category_align-center.sub-category-count-align-right .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-columns: calc(var(--sub-icon-size) + var(--sub-icon-spacing)) 1fr auto calc(var(--sub-icon-size) + var(--sub-icon-spacing));
      grid-template-areas: "empty item count indicator ";
    }
    .dt-sub-category_align-right.sub-category-count-align-left .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-areas: " item count indicator ";
      grid-template-columns: auto auto auto;
      justify-content: flex-end;
    }
    .dt-sub-category_align-center.sub-category-count-align-left .dt-sub-menu-display-on_click.dt-sub-icon-align-side& {
      grid-template-columns: 1fr auto auto 1fr;
      grid-template-areas: "empty item count indicator ";
      & .next-level-button {
        justify-self: flex-end;
      }
    }
  }
  transition: opacity 0.5s;
}

.category-count-align-right .the7-vertical-list > li > a .item-content,
.sub-category-count-align-right .the7-vertical-list .children .item-content {
    width: 100%;
}

.the7-vertical-list li .count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  order: 1;
  grid-area: count;
  text-align: center;
  padding: 1px 2px;
  margin-left: 5px;
  min-width: 15px;
  font-size: 10px;
  line-height: 1.2em;
  border-radius: 0;
  background-color: var(--the7-content-boxes-bg);
  border-width: 0;
  border-color: var(--the7-divider-color);
  color: var(--the7-secondary-text-color);
  transition: all 0.3s;
}

.the7-vertical-list li .next-level-button {
  order: 2;
  width: 1em;
  justify-self: var(--justify-self);
  grid-area: indicator;
  transition: color 0.3s;
  & svg {
    transition: all 0.3s;
  }
}
.content .the7-vertical-list ul.children {
  margin: 0;
}

.the7-vertical-list li > .children {
  width: 100%;
  padding-left: 20px;
}
.dt-sub-menu-display-on_click.the7-vertical-list li .next-level-button {
  visibility: hidden;
  pointer-events: none;
}
.the7-vertical-list .has-children > a .next-level-button {
  position: relative;
  align-self: center;
  justify-content: flex-end;
  visibility: visible;
  pointer-events: auto;
  line-height: 1.2;
  text-align: center;
 
  &:after {
    position: absolute;
    content: "";
    min-width: 50px;
    min-height: 30px;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    cursor: pointer;
    transform: translate3d(-50%,-50%,0);
  }
}
.the7-vertical-list .has-children > a .next-level-button i {
  width: 1em;
}
.the7-vertical-list li > a .next-level-button svg {
  width: 1em;
  height: auto;
  fill: var(--the7-title-color);
  color: var(--the7-title-color);
}

.the7-vertical-list .next-level-button {
  display: none;
  margin-left: 5px;
  order: 2;
  .dt-sub-menu-display-on_click& {
    display: flex;
  }
}
