.progress:not(.progress-rounded) {
    height: 10px;
    min-width: 200px;
    border-radius: 20px;
    border: 1px solid transparent;
}

.progress .progress-bar{
    position: relative;
    height: 100%;
    top: 0;
    background-color: var(--primary);
}

/* Size */
.progress.progress-thin, /* Update view and remove this class */
.progress.progress-sm {
    height: 6px;
}

.progress.progress-lg:not(.progress-rounded) {
    height: 16px;
}

.progress.progress-rounded.progress-sm {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    margin-bottom: 0 !important;
}

/* Color */
.progress.secondary:not(.progress-rounded) {
    background-color: var(--light-blue);
}

.progress.secondary:not(.progress-rounded) .progress-bar {
    background-color: var(--secondary);
}

.progress.tertiary:not(.progress-rounded) {
    background-color: var(--light-blue);
}

.progress.tertiary:not(.progress-rounded) .progress-bar {
    background-color: var(--tertiary);
}

.progress.success:not(.progress-rounded) .progress-bar {
    background-color: var(--success);
}

.progress:not(.progress-rounded) .progress-bar[style="width: 100%"] {
    color: var(--primary);
    background-color: var(--secondary);
}

.progress.danger:not(.progress-rounded) {
    background-color: var(--red-02);
}

.progress.danger:not(.progress-rounded) .progress-bar {
    background-color: var(--red-04);
}

.progress.danger:not(.progress-rounded) .progress-bar[style="width: 100%"] {
    background-color: var(--red-04);
}

.progress.warning:not(.progress-rounded) {
    background-color: var(--yellow-01);
    border-color: var(--yellow-02);
}

.progress.warning:not(.progress-rounded) .progress-bar {
    background-color: var(--warning);
}

/* Rounded */
.progress.progress-rounded {
    display: flex;
    height: 150px;
    overflow: hidden;
    font-size: .75rem;
    background-color: transparent;
    border-radius: 0.25rem;
    /* Commented to develop new journey cover - create a new modifier or use bootstrap modifiers to eventual refix */
    /* margin-right: auto !important;
    margin-left: auto !important;
    margin-bottom: 1rem !important; */
}

.progress.progress-rounded .progress-bar {
    border-color: var(--progress-bar-rounded-color);
}

/* Progress-large means Circle weight */
.progress.progress-rounded.progress-large,
.progress.progress-rounded.progress-bold {
    overflow: visible;
}

.progress.progress-rounded.progress-large > span,
.progress.progress-rounded.progress-bold > span {
    height: 102%;
    width: 52%;
    top: -1px;
}

.progress.progress-rounded.progress-large > span.progress-right,
.progress.progress-rounded.progress-bold > span.progress-right {
    right: -1px;
}

.progress.progress-rounded.progress-large > span.progress-left,
.progress.progress-rounded.progress-bold > span.progress-left {
    left: -1px;
}

.progress.progress-rounded.progress-large .progress-bar,
.progress.progress-rounded.progress-bold .progress-bar {
    border-color: var(--secondary);
    border-width: 17px;
}

.progress.progress-rounded.progress-large::after,
.progress.progress-rounded.progress-bold::after {
    border: 14px solid var(--primary);
}

.progress:not(.progress-rounded) .progress-bar {
    background-color: var(--primary);
}

.progress.tertiary.progress-rounded {
    border-color: var(--light-blue);
}

.progress.progress-bar .progress-bar {
    position: relative;
    background: var(--success);
    border-style: initial;
    border-width: 6px;
    height: 100%;
    top: 0;
}

.progress.progress-bar:after {
    display: none;
}

/* Color */
.progress.progress-rounded.secondary {
    border-color: var(--light-blue);
}

.progress.secondary.progress-rounded .progress-bar {
    border-color: var(--secondary);
}

.progress.tertiary.progress-rounded {
    border-color: var(--light-blue);
}

.progress.tertiary.progress-rounded .progress-bar {
    border-color: var(--tertiary);
}

.progress.success.progress-rounded .progress-bar {
    border-color: var(--success);
}

.progress.progress-rounded .progress-bar[style="width: 100%"] {
    color: var(--primary);
    border-color: var(--secondary);
}

.progress.danger.progress-rounded {
    border-color: var(--red-02);
}

.progress.danger.progress-rounded .progress-bar {
    border-color: var(--red-04);
}

.progress.danger.progress-rounded .progress-bar[style="width: 100%"] {
    border-color: var(--red-04);
}

.progress.warning.progress-rounded {
    border-color: var(--yellow-02);
}

.progress.warning.progress-rounded .progress-bar {
    border-color: var(--warning);
}

.progress.progress-rounded .progress-bar[style="width: 100%"] {
    color: var(--primary);
    border-color: var(--secondary);
}

.progress.danger.progress-rounded {
    border-color: var(--red-02);
}

.progress.danger.progress-rounded .progress-bar {
    border-color: var(--red-04);
}

.progress.danger.progress-rounded .progress-bar[style="width: 100%"] {
    border-color: var(--red-04);
}

.progress.warning.progress-rounded {
    border-color: var(--yellow-02);
}

.progress.warning.progress-rounded .progress-bar {
    border-color: var(--warning);
}

/*
Journey
@media (max-width: 576px) {
    .accordion-body .progress.progress-bar {
        width: 100%;
    }

    .accordion-body .progress.progress-bar~.wdk-text {
        margin-left: auto;
    }
} */

/*
Monitor
.progress.progress-monitor {
    height: 6px;
    width: 100%;
}

/* TODO: Maybe it's possible to clean this double class progress-bar  */
.progress.progress-bar.progress-thin {
    height: 5px;
}

.progress.progress-bar.tertiary {
    background-color: var(--light-blue);
}

.progress.progress-bar.tertiary .progress-bar {
    background-color: var(--tertiary);
}

.progress.progress-bar.tertiary .progress-bar[style="width: 100%"] {
    background-color: var(--secondary);
}

.progress.progress-bar.secondary {
    background-color: var(--light-blue);
}

.progress.progress-bar.secondary .progress-bar {
    background-color: var(--secondary);
}

.progress.progress-bar.secondary .progress-bar[style="width: 100%"] {
    background-color: var(--secondary);
}

.progress.progress-bar.danger {
    background-color: var(--red-02);
}

.progress.progress-bar.danger .progress-bar {
    background-color: var(--red-04);
}

.progress.progress-bar.danger .progress-bar[style="width: 100%"] {
    background-color: var(--red-04);
}