section > span {
    display: block;
    font-size: 2em;
    font-weight: 600;
    hyphens: auto;
    margin-bottom: 20px;
}

.ban-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.2rem;
}

.ban--entry {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    background-color: var(--gray-300);
    border-radius: var(--border-radius-medium);
    padding: 20px;
}

.ban--entry.preset {
    display: none;
}

.ban--header span {
    font-size: 1.3rem;
    font-weight: 600;
}

.ban--info-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.2rem;
}

.ban--info,
.ban--actions {
    display: flex;
    flex-direction: column;
}

.ban--actions.hide {
    display: none;
}

.ban--info span {
    opacity: var(--text-opacity-contrast);
}

.ban--status.active {
    color: var(--red-200);
    opacity: 1 !important;
}

.ban--status.inactive,
.ban--revert-status.accepted {
    color: var(--green-200);
    opacity: 1 !important;
}

.ban--revert-status.none,
.ban--revert-status.denied {
    color: var(--red-200);
    opacity: 1 !important;
}

.ban--revert-status.edit {
    color: var(--yellow-200);
    opacity: 1 !important;
}

.ban--actions span {
    display: block;
    margin-bottom: 5px;
}

.ban--apply-revert {
    background-color: var(--purple-200);
    font-size: 1rem;
    font-weight: 400;
}

.ban--apply-revert:hover {
    background-color: var(--purple-400);
    text-decoration: none;
}