.framework-perseus {
    .perseus-graded-group {
        position: relative;

        // We don't want group text to be centered, so we
        // set the group width to 100% so that a centered
        // group is the same as an uncentered group, and
        // its text still ends up all on the left.
        width: 100%;

        margin-left: 3px;
        padding-left: 5px;

        // The border colors are darkened by 10% for the checkmark / x icons
        // in graded-group.jsx
        &.answer-correct {
            border-left: 3px solid @green;
            margin-left: 0;
        }

        &.answer-incorrect {
            border-left: 3px solid darken(@red, 10%);
            margin-left: 0;
        }

        .group-icon {
            font-size: 14px;
            position: absolute;
            top: 50%;
            top: ~"calc(50% - 7px)";
            left: -19px;
            text-align: center;
            width: 16px;
        }
    }
}