.ManageableRelationList .tableWrapper {
    overflow: visible !important;
    background-image: none;
}

.ManageableRelationList :where(colgroup, thead) {
    display: none;
}

.ManageableRelationList :where(tbody, tr, td) {
    display: block;
}

.ManageableRelationList tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--marginSmall);
}

.ManageableRelationList tbody tr {
    position: relative;
    padding: var(--marginSmall);
    border: 1px solid var(--baseLight350);
    border-radius: var(--borderRadiusSmall);
    background-color: var(--baseLight100);
}

.ManageableRelationList tbody td {
    padding: .25rem 0;;
    border-bottom: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ManageableRelationList tbody td:first-child {
    margin-right: var(--marginLarge);
}

.ManageableRelationList tbody td:empty {
    display: none;
}

.ManageableRelationList .itemlist .clickable:hover {
    border-color: var(--primaryColor500);
}

.ManageableRelationList .itemlist .clickable:hover td {
    background-color: inherit;
}

.ManageableRelationList td.buttons {
    position: absolute !important; /** To override inline styling from module */
    top: var(--marginSmall);
    right: var(--marginSmall);
    display: flex;
    gap: .5rem;
    padding-right: 0;
    opacity: .4;
}

.ManageableRelationList tr:hover td.buttons {
    opacity: 1;
}

.ManageableRelationList [data-th="E-mailadres"] {
    white-space: normal;
    overflow-wrap: anywhere;
}