myprojectpackageprav/dist/esm/pages/detailview/progress-steps/progress.css

My package in npm

.progress {
    display: flex;
    flex-direction: row;
}
.progress.v-steps {
    flex-direction: column;
}
.progress .circle {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    background-color: #fff;
    border: solid 3px #8EA4BF;
    position: relative;
    z-index: 16;
}

.progress-title {
    text-align: center;
}

.progress li {
    position: relative;
    width: 100%
}

.progress li:after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #8EA4BF;
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 2;
}

.progress li:last-child:after {
    left: -50%;
}

.progress .active {
    color: var(--rb-primary-color);
}

.progress .active .circle {
    border: solid 3px var(--rb-bgcolor-primary);
    background-color: var(--rb-bgcolor-3);
}

.progress> .tooltip-bottom.tool-tip::after {
    transform: translate(0%, 0%);
    margin-left: 0%;
}

.progress-steps {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.progress.v-steps .carousel-content {
    flex-direction: column;
}

.progress.v-steps li {
    padding: 12px 0px !important;
}

.progress.v-steps li:after {
    width: 3px;
    height: 100%;
    top: 16px;
    left: 10px;
}

.progress.v-steps li:last-child:after {
    top: -100%;
}
.progress.v-steps li:first-child:after {
    top: 16px;
}

.v-steps .progress-title {
    padding-left: 8px;
    text-align: left;
}

.v-steps .progress-steps {
    display: flex;
    flex-direction: row;
    align-items: start;
}

.carousel-container {
    width: 100%;
}

.profile {
    width: 60px;
    text-align: center;
    display: inline-flex;
}

.carousel-wrapper {
    display: flex;
    width: 100%;
    position: relative;
}

.carousel-content-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.carousel-content {
    display: flex;
    transition: all 250ms linear;
    -ms-overflow-style: none;
    /* hide scrollbar in IE and Edge */
    scrollbar-width: none;
    /* hide scrollbar in Firefox */
}

.workflow-title {
    min-height: 20px;
    line-height: 10px;
    display: flex;
    align-items: end;
    justify-content: center;
    text-transform: uppercase;
}

/* hide scrollbar in webkit browser */
.carousel-content::-webkit-scrollbar,
.carousel-content::-webkit-scrollbar {
    display: none;
}

.carousel-content>* {
    width: 100%;
    flex-shrink: 0;
    flex-grow: 1;
    position: relative;
}

.left-arrow,
.right-arrow {
    width: 20px;
    display: flex;
    align-items: center;
    background-color: var(--rb-whitebg);
    justify-content: center;
    font-size: 14px;
}

.carousel-content>:last-child*:after {
    content: "";
    left: calc(-50% + 0px);
}

.carousel-content.show-2>* {
    width: 50%;
}

.carousel-content.show-3>* {
    width: calc(100% / 3);
}

.carousel-content.show-4>* {
    width: calc(100% / 4);
}

.carousel-content.show-5>* {
    width: calc(100% / 5);
}

.carousel-content.show-6>* {
    width: calc(100% / 6);
}

.carousel-content.show-7>* {
    width: calc(100% / 7);
}

.carousel-content.show-8>* {
    width: calc(100% / 8);
}

.carousel-content.show-9>* {
    width: calc(100% / 9);
}

.carousel-content.show-10>* {
    width: calc(100% / 10);
}

.carousel-content.show-11>* {
    width: calc(100% / 11);
}

.carousel-content.show-12>* {
    width: calc(100% / 12);
}

.carousel-content.show-13>* {
    width: calc(100% / 13);
}

.carousel-content.show-14>* {
    width: calc(100% / 14);
}

.carousel-content.show-15>* {
    width: calc(100% / 15);
}

.carousel-content.show-16>* {
    width: calc(100% / 16);
}

.carousel-content.show-17>* {
    width: calc(100% / 17);
}

.carousel-content.show-18>* {
    width: calc(100% / 18);
}

.carousel-content.show-19>* {
    width: calc(100% / 19);
}

.carousel-content.show-20>* {
    width: calc(100% / 20);
}