@media only screen and (max-width: 385px) {
    .mark-as-label {
        display: block;
        text-align: center;
    }
}

@media only screen and (max-width: 300px) {
    .correct-incorrect-btn {
        display: block;
        text-align: center;
    }
}

.btn-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media (max-width: 575.98px) {
    .mark-button-background {
        width: 100% !important;
    }

    .btn-span {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.btn-hidden {
    display: none;
}

.btn-not-checked {
    background-color: inherit !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-white) !important;
}

.btn-not-checked:hover {
    background-color: rgba(82, 106, 224, 0.75) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-white) !important;
}

.btn-not-checked-hide-selected {
    background-color: white !important;
    color: black !important;
}

.btn-checked-correct {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-white) !important;
    cursor: default;
}

.btn-checked-correct:hover {
    background-color: rgba(25, 135, 84, 0.75) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-white) !important;
    cursor: default;
}

.btn-checked-incorrect {
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-white) !important;
    cursor: default;
}

.btn-checked-incorrect:hover {
    background-color: rgba(220, 53, 69, 0.75) !important;
    color: white !important;
    border-color: white !important;
    cursor: default;
}

.btn-icon-incorrect {
    color: var(--bs-danger) !important;
}

.btn-icon-correct {
    color: var(--bs-success) !important;
}
