.questionbutton {
    width: 40px;
    background-color: white;
    height: 40px;
    border-radius: 10px;
    color: #643A71;
    font-family: 'Libre Franklin';
    font-weight: 600;
    border: 2px solid gainsboro;
    position: relative;
}

.questionbutton.flagged {
    border: 2px solid red;
}

.questionbutton.selected {
    border: 2px solid black;
}

.questionbutton.selected.flagged {
    border: 2px solid black;
}

.questionbutton.selected.flagged:before {
    content: " ";
    position: absolute;
    z-index: 10;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 8px;
    border: 2px solid red;
}

.timer {
    font-size: x-large;
    font-weight: 700;
}

#questionhtml {
    font-size: larger;
}

.answered {
    background-color: #D4EDD4;
}

.color-answered {
    color: #D4EDD4;
}

.partially-answered {
    background-color: #F7EBBC;
}

.color-partially-answered {
    color: #F7EBBC;
}

.square-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.save-transition {
    opacity: 1;
    transition: 2s ease-in;
}

.save-transition-fade {
    opacity: 0;
}

.comprehension-container {
    height: 200px;
    overflow: auto;
    transition: 0.25s;
}

.comprehensionbuttons {
    bottom: 0px;
    transform: translateY(-50%)
}

input.q-ratio-input {
    width: 75px;
    display: inline-block;
}

.fractionbar {
    margin-bottom: 10px;
    margin-left: 10px;
    width: 180px;
    border: 1px solid black;
}