﻿.l-fs-topic-group-container {
    position: relative;
}

[class*="l-fs-topic-group-position__"]:before {
    content: "";
    position: absolute;
    z-index: 4; /* must be higher than 2 to be above DataPresenter's overlay */
    top: 8px;
    bottom: 8px;
    left: 6px;
    width: 8px;
    border-radius: 4px;
    animation: fadein 0.5s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.l-fs-topic-group-position__0:before {
    background-color: #005EBC;
}

.l-fs-topic-group-position__1:before {
    background-color: #FF6E24;
}

.l-fs-topic-group-position__2:before {
    background-color: #3E9100;
}

.l-fs-topic-group-position__3:before {
    background-color: #FFD202;
}

.l-fs-topic-group-position__4:before {
    background-color: #7ACDEC;
}

.l-fs-topic-group-position__5:before {
    background-color: #B761C9;
}

.l-fs-topic-group-position__6:before {
    background-color: #68CA27;
}

.l-fs-topic-group-position__7:before {
    background-color: #FF3232;
}

.l-fs-topic-group-position__8:before {
    background-color: #005EBC;
    opacity: 0.7;
}

.l-fs-topic-group-position__9:before {
    background-color: #FF6E24;
    opacity: 0.7;
}

.l-fs-topic-group-position__10:before {
    background-color: #3E9100;
    opacity: 0.7;
}

.l-fs-topic-group-position__11:before {
    background-color: #FFD202;
    opacity: 0.7;
}

.l-fs-topic-group-position__12:before {
    background-color: #7ACDEC;
    opacity: 0.7;
}

.l-fs-topic-group-position__13:before {
    background-color: #B761C9;
    opacity: 0.7;
}

.l-fs-topic-group-position__14:before {
    background-color: #68CA27;
    opacity: 0.7;
}

.l-fs-topic-group-position__15:before {
    background-color: #FF3232;
    opacity: 0.7;
}

.l-fs-topic-group-position__16:before {
    background-color: #005EBC;
    opacity: 0.4;
}

.l-fs-topic-group-position__17:before {
    background-color: #FF6E24;
    opacity: 0.4;
}

.l-fs-topic-group-position__18:before {
    background-color: #3E9100;
    opacity: 0.4;
}

.l-fs-topic-group-position__19:before {
    background-color: #FFD202;
    opacity: 0.4;
}

.l-fs-topic-group-position__20:before {
    background-color: #7ACDEC;
    opacity: 0.4;
}

.l-fs-topic-group-position__21:before {
    background-color: #B761C9;
    opacity: 0.4;
}

.l-fs-topic-group-position__22:before {
    background-color: #68CA27;
    opacity: 0.4;
}

.l-fs-topic-group-position__23:before {
    background-color: #FF3232;
    opacity: 0.4;
}
