.spb-container-d80358c8 {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: stretch;
    box-sizing: border-box;
}

.spb-segment-d80358c8 {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.spb-texts-container-d80358c8 {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Context for absolute children if needed */
}

.spb-text-container-d80358c8 {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative; /* Allow children to escape */
}

/* Specific alignments based on the image provided */
.spb-text-container-d80358c8:first-child {
    justify-content: flex-start;
}

.spb-text-container-d80358c8:last-child {
    justify-content: flex-end;
}

.spb-text-d80358c8 {
    white-space: nowrap;
    padding: 0 4px;
    z-index: 1;
}

/* For inside text, keep overflow hidden so it doesn't spill out of the colored bar */
.text-pos-inside .spb-text-d80358c8 {
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.text-pos-inside .spb-text-d80358c8.visible {
    opacity: 1;
}

/* 
   For below text, force it to ignore container boundaries.
   Absolute positioning with transform is a robust way to center
   text regardless of its parent's width.
*/
.text-pos-below .spb-text-container-d80358c8 {
    overflow: visible !important;
}

.text-pos-below .spb-text-d80358c8 {
    overflow: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Fix first and last items which shouldn't be center-aligned absolutely */
.text-pos-below .spb-text-container-d80358c8:first-child .spb-text-d80358c8 {
    left: 0;
    transform: none;
}

.text-pos-below .spb-text-container-d80358c8:last-child .spb-text-d80358c8 {
    left: auto;
    right: 0;
    transform: none;
}