.nav-tabs-horizontal{
  background-color: $modal-header-bg;
  padding: 0.3125rem 0 0 0.9375rem;
  .nav-link{
    position: relative;
    padding-bottom: 0.3125rem;
    transition: none;
    border: unset;
    color: var(--bs-dark);
    &::before, &::after{
      content: '';
      position: absolute;
      width: 0.625rem;
      height: 0.625rem;
      background-color: $modal-header-bg;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    & .nav-span{
      &::before, &::after{
        content: '';
        position: absolute;
        width: 0.625rem;
        height: 0.625rem;
        background-color: #fff;
        transform: translate(-50%, -50%);
        // z-index: 1;
      }
    }
    & hr{
      border: unset;
      opacity: 1;
      height: 0.125rem;
      background-color: transparent;
      margin: 0.1875rem auto 0;
      max-width: 4.375rem;
      border-radius: 0.625rem;
      transform: scale(0);
      transform-origin: center;
      transition: transform 0.5s;
    }
    &:hover hr{
      background-color: $primary-color;
      transform: scale(1);
    }
    &.active {
      color: $primary-color;
      &::before{
        bottom: -0.3125rem;
        left: -0.3125rem;
        border-bottom-right-radius: 60%;
      }
      &::after{
        right: -0.9375rem;
        bottom: -0.3125rem;
        border-bottom-left-radius: 60%;
      }
      & .nav-span{
        &::before{
          bottom: -0.3125rem;
          left: -0.3125rem;
        }
        &::after{
          right: -0.9375rem;
          bottom: -0.3125rem;
        }
      }
      &:hover hr{
        background-color: transparent;
        transform: scale(0);
      }
    }
  }
}

/** Vertical Tab css **/
.nav-tabs-vertical{
  .nav-link{
    border: unset;
    border-radius: 6px;
    color: var(--bs-gray-600);
    padding: 0.625rem 0.3125rem;
    &:hover{
      background-color: rgba($primary-color, 10%);
    }
    &.active{
      background-color: rgba($primary-color, 10%);
      color: $primary-color;
    }
  }
}