#cards {
    margin: auto;
}

.card {
    border: 1px solid black;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 3px;
    width: 155px;
    height: 155px;
    padding: 5px;
    text-align: center;
    font-size: medium;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    cursor: pointer;
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, .2);
    transition: all 0.2s ease;
}

.card:hover, .card.hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .3), 0 0 1px 0 rgba(0, 0, 0, .25);
}
.card:hover .card-content, .card.hover .card-content {
	box-shadow: inset 0 3px 0 0 #30ef1f50;
	border-color: #31ef1f;
}
.card:hover .card-img .overlay, .card.hover .card-img .overlay {
	background-color: rgba(25, 29, 38, .85);
	transition: opacity 0.2s ease;
	opacity: 1;
}

.card-img .overlay .overlay-content a:hover, .card-img .overlay .overlay-content a.hover {
	background: #68ff49a0;
	border-color: #31ef1f;
}

.card-content a:hover {
	text-decoration: none;
	color: #7029cf;
}

.selected {
    background-color: var(--sidebar-bg-color);
    color: var(--card-title-txt-color);
}

.answer-correct {
    background-color: #8eff83;
    color: #1e1e1e;
}

.answer-incorrect {
    background-color: #d34444;
    color: #fff;
}

tr > :first-child {
    margin-left: 0 !important;
}

tr > :last-child {
    margin-right: 0 !important;
}