Indicators: Stage Indicators

.acl-stage-indicator {
    display: flex;

    li {
        list-style: none;
    }

    &__item {
        height: 10px;
        width: 10px;
        background-color: #fafafa;
        box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
        margin: 7.5px;
        border-radius: 50%;
        align-self: center;

        &--completed {
            box-sizing: border-box;
            height: 10px;
            width: 10px;
            border: 0 solid #062725;
            background-color: #46ccc2;
            box-shadow: inset 1px 1px 2px 0 rgba(255, 255, 255, 0.2);
            margin: 7.5px;
        }

        &--active {
            border: 1px solid #46ccc2;
            &:after {
                content: '';
                display: inline-block;
                width: 6px;
                position: relative;
                height: 6px;
                -moz-border-radius: 7.5px;
                border-radius: 7.5px;
                background-color: #46ccc2;
                //margin: 2.9px;
                /* top: -9.02px; */
                /* left: 1px; */
                top: -6.12px;
                margin: 0.5px 0 1px 1px;
            }
        }
    }
}
.acl-scroll-indicator {
    display: flex;

    &__item {
        background: #2cbcb2;
        border-radius: 50%;
        color: #fff;
        height: 48px;
        width: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        i {
            font-size: 18px;
        }

        &:hover {
            background-color: #46ccc2;
        }

        &--disabled {
            background-color: #b1b7cd;

            &:hover {
                background-color: darkgrey;
            }
        }
    }
}