.ownScores { padding: var(--s-2); border-radius: var(--rounded); margin: 0 auto; background-color: var(--color-bg-high); font-size: var(--fonts-sm); font-weight: var(--semi-bold); list-style-type: none; padding-inline: var(--s-4); text-align: center; } .success { color: var(--color-success); } .fail { color: var(--color-error); } .tierHeader { display: flex; flex-direction: row; color: var(--color-accent); } .tierHeader::before, .tierHeader::after { flex: 1 1; border-bottom: 3px solid var(--color-accent-low); margin: auto; content: ""; } .tierHeader::before { margin-right: 10px; } .tierHeader::after { margin-left: 10px; } .passedInfoContainer { display: flex; flex-wrap: wrap; gap: var(--s-2); } .passedHeader { color: var(--color-text-high); font-size: var(--fonts-xs); } .userStatus { border-radius: var(--rounded); background-color: var(--color-accent); color: var(--color-text-inverse); font-size: var(--fonts-xs); font-weight: var(--semi-bold); padding-inline: var(--s-1-5); } .userStatusFailed { background-color: var(--color-error); color: var(--color-text); } .suggestionS { border-radius: 50%; background-color: var(--color-bg); color: var(--color-text); font-weight: var(--bold); margin-inline-end: var(--s-1); padding-inline: var(--s-1); }