.en-indicator {
    background-color: royalblue;
    color: white;
    font-weight: bold;
    padding: 3px;
}

.mar-indicator {
    background-color: goldenrod;
    font-weight: bold;
    color: white;
    padding: 3px;
}

.ru-indicator {
    background-color: red;
    color: white;
    font-weight: bold;
    padding: 3px;
}

.gr-indicator {
    background-color: green;
    color: white;
    font-weight: bold;
    padding: 3px;
}

.hi-indicator {
    background-color: purple;
    color: white;
    font-weight: bold;
    padding: 3px;
}

.legend-container {
    display: flex;           /* Turns div into a flexbox */
    justify-content: center; /* Centers spans horizontally */
    align-items: center;     /* Aligns spans vertically with each other */
    gap: 15px;               /* Adds space between the two spans */
    text-align: center;
    font-size: 0.8rem;
}

li {
    margin-bottom: 1.6rem;
    width: fit-content;
}

.en {
    border-bottom: 2px solid royalblue;
}

.mar {
    border-bottom: 2px solid goldenrod;
}

.ru {
    border-bottom: 2px solid red;
}

.gr {
    border-bottom: 2px solid green;
}

.en-ru{
    padding-bottom: 10px; /* Space between text and border */
    background-image: linear-gradient(to right, royalblue 0%, 50%, red 50% 100%);
    background-size: 100% 2px; /* Width is 100%, Height (thickness) is 2px */
    background-repeat: no-repeat;
    background-position: bottom;
}

.mar-en-ru {
    padding-bottom: 10px; /* Space between text and border */
    background-image: linear-gradient(to right, goldenrod 0%, 33.33%, royalblue 33.33%, 66.66%, red 66.66% 100%);
    background-size: 100% 2px; /* Width is 100%, Height (thickness) is 2px */
    background-repeat: no-repeat;
    background-position: bottom;
}

.hi-en-gr-ru {
    padding-bottom: 10px; /* Space between text and border */
    background-image: linear-gradient(to right, purple 0%, 25%, royalblue 25%, 50%, green 50%, 75%, red 75% 100%);
    background-size: 100% 2px; /* Width is 100%, Height (thickness) is 2px */
    background-repeat: no-repeat;
    background-position: bottom;
}

.ind-en {
    color: royalblue;
    font-weight: bold;
    font-size: 10px;
}
.ind-ru {
    color: red;
    font-weight: bold;
    font-size: 10px;
}
.ind-mar {
    color: goldenrod;
    font-weight: bold;
    font-size: 10px;
}
.ind-hi {
    color: purple;
    font-weight: bold;
    font-size: 10px;
}
.ind-gr {
    color: green;
    font-weight: bold;
    font-size: 10px;
}