:host ::ng-deep {
    .progressbar .progress-bar {
        text-align: right;
    }
}

.progressbars-wrap {
    padding: 8px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.progressbars {
    display: grid;
    gap: 0.5rem;
}

.progressbar {
    height: 1.25rem;
}

.progressbar:not(:last-child) {
    border-bottom: 1px solid !important;
}


.progress-1 {
    background-color: #E74C3C;
}

.progress-2 {
    background-color: #E67E22;
}

.progress-3 {
    background-color: #F39C12;
}

.progress-4 {
    background-color: #F1C40F;
}

.progress-5 {
    background-color: #D4AC0D;
}

.progress-6 {
    background-color: #A3CB38;
}

.progress-7 {
    background-color: #82E0AA;
}

.progress-8 {
    background-color: #58D68D;
}

.progress-9 {
    background-color: #2ECC71;
}

.progress-10 {
    background-color: #27AE60;
}

.progress-label {
    position: absolute;
    left: 100%;
    padding-left: 4px;
    color: rgba(var(--app-gray_1000), 1);
}

.progressbar.partials {
    > :nth-child(1) {
        background-color: #34A853 !important;
        color: #F1FFF3;
    }
    > :nth-child(2) {
        background-color: #8A8A8A !important;
        color: #F9F9F9;
    }
    > :nth-child(3) {
        background-color: #B8535E !important;
        color: #FFEFF0;
    }
}