.order-stage-panel, .lead-stage-panel {
    padding: 0;
    margin: auto;
    width: 100%;
    display: table;
    min-width: max-content;
}

.order-stage-item, .lead-stage-item {
    display: table-cell;
    padding: 10px 10px;
    text-align: center;
    position: relative;
}

.order-stage-arrow, .lead-stage-arrow {
    width: 19px;
    display: table-cell;
    padding: 10px 0px 10px 0px;
    text-align: center;
    position: relative;
}

.arrow {
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    border-top: 19px solid transparent;
    border-bottom: 19px solid transparent;
    border-left: 19px solid green;
}

.step-activated {

}
.step-done {
    background-color: var(--sprinttek-lightgrey) !important;
    color: rgb(20, 23, 26) !important;
}
.step-inactive {
    background-color: var(--sprinttek-lightgrey) !important;
    color: rgb(20, 23, 26) !important;
}
.step-current {
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

.arrow-done.arrow-done > .arrow {
    border-top-color: var(--sprinttek-lightgrey) !important;
    border-bottom-color: var(--sprinttek-lightgrey) !important;
    border-left-color: var(--sprinttek-lightgrey) !important;
}
.arrow-future.arrow-inactive > .arrow {
    border-top-color: var(--sprinttek-lightgrey) !important;
    border-bottom-color: var(--sprinttek-lightgrey) !important;
    border-left-color: var(--sprinttek-lightgrey) !important;
}
.arrow-future.arrow-inactive > .arrow {
    border-top-color: var(--sprinttek-lightgrey) !important;
    border-bottom-color: var(--sprinttek-lightgrey) !important;
    border-left-color: var(--sprinttek-lightgrey) !important;
}
.arrow-inactive > .arrow {
    border-left-color: var(--sprinttek-lightgrey) !important;
}
.arrow-inactive.arrow-done > .arrow {
    border-left-color: var(--sprinttek-lightgrey) !important;
}
li.order-stage-arrow::before, li.lead-stage-arrow::before {
    content: "";
    background: transparent;
    position: absolute;
    height: 40px;
    width: 40px;
    top: 25%;
    z-index: 1;
    rotate: 45deg;
    left: -26px;
    border-right: 4px solid #FFFFFF;
    border-top: 4px solid #FFFFFF;
    margin: -50% 0px;
}
.swim-lane-container {
    max-width: 100%;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius: 15px;
}

@media only screen and (max-width: 500px) {
    /*ul .order-stage-panel {
        width: max-content;
    }
    li.order-stage-item {
        padding: 10px 10px;
    }*/
/*    ul.order-stage-panel li {
        display: block;
        margin-top: 4px;
        position: static;
        z-index: 0;
        text-align: left;
        padding-left: 20px;
    }

    .order-stage-arrow {
        rotate: 90deg;
        margin-left: 90%;
        padding: 0px 0px 0 0px;
    }

    li.order-stage-arrow::before {
        background: transparent;
        position: absolute;
        height: 30px;
        width: 30px;
        top: 100%;
        z-index: 1;
        rotate: 45deg;
        left: -8px;
        border-right: 4px solid #FFFFFF;
        border-top: 4px solid #FFFFFF;
        margin: 3px 1px;
    }

    .arrow {
        right: -5px;
    }*/
}