.bar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
}

.horizontal-bar-background {
    display: flex;
    width: 100%;
    min-width: 16px;
    height: 8px;
    flex-direction: row;
    gap: 2px;
    margin-top: 4px;
}

.horizontal-bar {
    height: 8px;
    border-radius: 9999px;
    min-width: 8px;
}

.horizontal-bar-filled {
    background-color: #51cf66;
}

.horizontal-bar-empty {
    background-color: rgb(32, 32, 32);
}

.description-background {
    display: flex;
    width: 100%;
    min-width: 16px;
    height: 8px;
    flex-direction: row;
    margin-bottom: 4px;
    align-items: center;
}

.bar-text {
    font-size: 10px;
    color: rgb(160, 160, 160);
}

.bar-marker {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    margin-right: 4px;
    background-color: #51cf66;
}



.vertical-bar-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 32px;
    height: 100%;
    min-height: 32px;
    max-height: 84px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.vertical-bar-background {
    display: flex;
    height: 100%;
    min-height: 16px;
    width: 100%;
    min-width: 32px;
    flex-direction: column;
    gap: 2px;
}

.vertical-bar {
    height: 100%;
    min-height: 6px;
    border-radius: 3px;
}

.vertical-bar-deviation {
    background-color: #51cf66;
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px;
}

.deviation-positive {
    background-color: hsl(120, 60%, 50%);
}

.deviation-negative {
    background-color: hsl(0, 60%, 50%);
}

.vertical-bar-base {
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px;
    background: repeating-linear-gradient(
        -45deg,
        rgb(30, 30, 30) 0px, rgb(30, 30, 30) 4px,
        rgb(34, 34, 34) 4px, rgb(34, 34, 34) 8px
    );
}