.behaivor-main-conten {
    position: relative !important;
    width: 100%;
    display: flex !important;
    flex-direction: row;
    gap: 4px;
    pointer-events: none !important;

    &.behaivor_for_1 {
        .behaivor {
            width: 100%;
        }
    }

    &.behaivor_for_2 {
        .behaivor {
            width: 50%;
        }
    }

    &.behaivor_for_3 {
        .behaivor {
            width: 33.33%;
        }
    }

    &.behaivor_for_4 {
        .behaivor {
            width: 25%;
        }
    }
}

.behaivor {
    // border: 0.1px solid rgba($color: #961111, $alpha: .5);

    .behaivorElem {
        display: flex;
        flex-direction: column-reverse; // Alinea la barra a la izquierda del label
        align-items: left;

        // border: 0.1px solid rgba($color: #961111, $alpha: .5);

        label {
            height: 12px;
            line-height: 24px;
            font-size: 9px;
            text-transform: uppercase;
            color: #000;
            margin: 0;
            display: block;
            opacity: .56;
            // border: 0.1px solid rgba($color: #961111, $alpha: .5);
        }

        .bar {
            display: flex;
            // gap: 1px;
            height: 18px;
            align-items: center;
            // border: 0.1px solid rgba($color: #961111, $alpha: .5);

            span {
                width: 11px;
                height: 9px;
                background: transparent;
                border: 0.5px solid rgba($c-b, 0.12);
                border-style: solid;
                box-sizing: border-box;
                display: inline-block;
            }
        }
    }

}