body {
    background-color: #e4e9f7 !important;
} 

.custom-breadcrumb {
    display: flex;
    justify-content: space-between;
}

.custom-breadcrumb .step {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-weight: bolder;
    color: white;
}

.custom-breadcrumb .step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-breadcrumb .step-container .step-label {
    font-size: 1em;
    font-weight: bolder;
    max-width: 100px;
    word-wrap: normal;
}

.custom-breadcrumb .step-container.done .step
{
    background-color: var(--primary-color);
}

.custom-breadcrumb .step-container.done .step-label {
    color: var(--primary-color);

}

.custom-breadcrumb .step-container.to-do .step {
    background-color: white;
    color: #dddddd;
}

.custom-breadcrumb .step-container.active .step {
    background-color: white;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.custom-breadcrumb .step-container.active .step-label {
    color: var(--secondary-color);
}

.custom-breadcrumb .step-container.to-do .step-label {
    color:var(--not-active-color);
}

.custom-breadcrumb .arrow {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6em;
    font-weight: bolder;
}

.custom-breadcrumb .arrow.done {
    color: var(--primary-color);
}

.custom-breadcrumb .arrow.to-do {
    color: var(--not-active-color);
}