.color-legend-container {
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
    // gap: 4px 10px;
    // align-items: center;
    width: 78%;
    height: auto;
    justify-content: start;

    .legends-block {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;

        .color-legend-block {
            // display: inline-block;
            // display: flex;
            // align-items: center;
            // gap: 4px;
            font-size: 10px;
            margin-right:4px;

            .legend-color {
                border: 1px solid black;
                width: 16px;
                height: 16px;
                background-color: black;
                display: inline-block;
                margin-right: 4px;

                &.bg-calltypeColor0 {
                    background-color: $callTypeColor0;
                }

                &.bg-calltypeColor1 {
                    background-color: $callTypeColor1;
                }

                &.bg-calltypeColor2 {
                    background-color: $callTypeColor2;
                }

                &.bg-calltypeColor3 {
                    background-color: $callTypeColor3;
                }

                &.bg-calltypeColor4 {
                    background-color: $callTypeColor4;
                }

                &.bg-calltypeColor5 {
                    background-color: $callTypeColor5;
                }

                &.bg-light-red {
                    background-color: $light-red;
                }

                &.bg-light-green {
                    background-color: $green;
                }

                &.bg-light-blue {
                    background-color: $light-blue;
                }

                &.bg-voicemail {
                    background-color: $voicemailColor;
                }

            }

            .legend-label {

            }
        }
    }
}

@media (min-width: 768px) { 

    .color-legend-container { 
        height: 22px;
    }
}