/* for modern design */
body {
    font-family: 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
}

/* view_result.php answer details */
.accordion-body .list-group-item {
    position: relative;
    padding-left: 2.5rem;
}

.accordion-body .list-group-item::before {
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.list-group-item.correct-answer {
    background-color: var(--bs-success-bg-subtle);
    border-left: 5px solid var(--bs-success-border-subtle);
}

.list-group-item.correct-answer::before {
    content: "\f26a"; /* bi-check-circle */
    color: var(--bs-success-text-emphasis);
}

.list-group-item.user-choice::before {
    content: "\f231"; /* bi-caret-right-fill */
    color: var(--bs-primary-text-emphasis);
}

.list-group-item.user-choice.correct-answer::before {
    content: "\f26b"; /* bi-check-circle-fill */
    color: var(--bs-success-text-emphasis);
}

/* Incorrect user choice */
.list-group-item.user-choice:not(.correct-answer) {
    background-color: var(--bs-danger-bg-subtle);
    border-left: 5px solid var(--bs-danger-border-subtle);
}

.list-group-item.user-choice:not(.correct-answer)::before {
    content: "\f633"; /* bi-x-circle */
    color: var(--bs-danger-text-emphasis);
}