.radio-choice-group {
    display: block;
    /* border: 1px dashed gray; */ /* comment me out in prod! */
}
.radio-choice-group[data-lockstate="unlocked"] {
}
.radio-choice-group[data-lockstate="locked"] {
    pointer-events: none;
}
.radio-choice-group[data-view="question"] {
}
.radio-choice-group[data-view="answer"] {
}

.radio-choice-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    height: 4rem;
    margin: 0.5rem;
}
.radio-choice-container[data-choice-unavailable] {
    pointer-events: none;
    opacity: 0.5;
}
.radio-choice-container[data-answer="selected"] {
}
.radio-choice-container[data-answer="correct"] {
}
.radio-choice-container[data-answer="incorrect"] {
}
.radio-choice-container[data-answer="skip"] {
}

.radio-choice-icon {
    display: inline;
    width: 10%;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
}

.radio-choice-tile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    height: 100%;
    width: 70%;
}

.radio-choice-tile-input {
    display: inline;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 1; 
    cursor: pointer;
}

.radio-choice-tile-fill {
    display: inline;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    border-radius: 5px;
    width: 0%;  /* default: overridden by inline width style */
    /* background-color: #CCCCCC; */
}
.radio-choice-container[data-answer="selected"] .radio-choice-tile-fill {
    width: 100% !important;
    background-color: #5FAAFF;
}
.radio-choice-container[data-answer="correct"] .radio-choice-tile-fill {
    background-color: #5FAAFF;
    opacity: 1;
}
.radio-choice-container[data-answer="incorrect"] .radio-choice-tile-fill {
    background-color: #FF454B;
    opacity: 0.5;
}
.radio-choice-container[data-answer="skip"] .radio-choice-tile-fill {
    background-color: #BFBFBF;
    opacity: 0.5;
}

.radio-choice-tile-border {
    display: inline;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border: 2px solid #0077FF;
    border-radius: 5px;
}
.radio-choice-container[data-answer="correct"] .radio-choice-tile-border {
    border: 2px solid #0077FF;
    opacity: 1;
}
.radio-choice-container[data-answer="incorrect"] .radio-choice-tile-border {
    border: 2px solid #FF0008;
    opacity: 0.5;
}
.radio-choice-container[data-answer="skip"] .radio-choice-tile-border {
    border: 2px solid #404040;
    opacity: 0.5;
}

.radio-choice-tile-label {
    display: inline;
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.radio-choice-container[data-answer="correct"] .radio-choice-tile-label {
    font-weight: bold;
}

.radio-choice-pct {
    display: inline;
    position: relative;
    width: 20%;
    padding-left: 0.5rem;
}