.referral-table-container {
    background-color: var(--bs-referral-border-color);
    border-bottom: 1px solid var(--bs-referral-border-color);
    --bs-referral-color-type: initial;
    --bs-referral-bg-type: initial;
    --bs-referral-color-state: initial;
    --bs-referral-bg-state: initial;
    --bs-referral-color: var(--bs-emphasis-color);
    --bs-referral-bg: var(--bs-body-bg);
    --bs-referral-border-color: var(--bs-border-color);
    --bs-referral-accent-bg: transparent;
    --bs-referral-striped-color: var(--bs-emphasis-color);
    --bs-referral-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-referral-active-color: var(--bs-emphasis-color);
    --bs-referral-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-referral-hover-color: var(--bs-emphasis-color);
    --bs-referral-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
}

.referral-table {
    display: grid;
    grid-template-columns: repeat(5, auto);
    /*column-gap: 0.5em;*/
    row-gap: 1px;
    background-color: var(--bs-referral-border-color);
    border-bottom-color: var(--bs-referral-border-color);
    border-bottom-width: 1px;
}

.referral-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 5;
    color: var(--bs-referral-color-state, var(--bs-referral-color-type, var(--bs-referral-color)));
    background-color: var(--bs-referral-bg);
    box-shadow: inset 0 0 0 9999px var(--bs-referral-bg-state, var(--bs-referral-bg-type, var(--bs-referral-accent-bg)));
}

.referral-row:nth-child(even) {
    --bs-referral-color-type: var(--bs-referral-striped-color);
    --bs-referral-bg-type: var(--bs-referral-striped-bg);
}

.referral-header {
    font-weight: bold;
}

.referral-phone {
    white-space: nowrap;
}

.referral-info {
    display: grid;
    grid-column: span 4;
    grid-template-columns: subgrid;
}

.referral-name {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
}

.referral-contact {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
}

.referral-extra {
    display: grid;
    grid-column: span 1;
    grid-template-columns: subgrid;
}

.referral-table > .referral-row {
    padding: 0.5em;
}

.referral-status {
    justify-self: center;
    align-self: center;
}

@media (max-width: 991.98px) {
    .referral-table {
        grid-template-columns: repeat(3, auto);
    }

    .referral-row {
        grid-column: span 3;
    }

    .referral-info {
        grid-column: span 2;
        grid-template-columns: subgrid;
    }

    .referral-contact, .referral-name {
        grid-auto-flow: row;
        grid-column: span 1;
        grid-template-columns: subgrid;
    }

    /*
    .referral-contact > *:first-child, .referral-name > *:first-child {
        padding: 0.5em 0 0 0.5em;
    }

    .referral-contact > *:last-child, .referral-name > *:last-child {
        padding: 0 0 0.5em 0.5em;
   }
     */
}

@media (max-width: 575.98px) {
    .referral-table {
        grid-template-columns: repeat(2, auto);
    }

    .referral-name, .referral-name > *, .referral-contact, .referral-contact > * {
        display: inline;
    }

    /*
    .referral-name > *:first-child, .referral-contact > *:first-child {
        padding: 0 0 0 0.5em;
    }
    .referral-contact > *:last-child, .referral-name > *:last-child {
        padding: 0;
    }
*/
    .referral-row {
        grid-column: span 2;
    }

    .referral-info {
        grid-column: span 1;
        grid-template-columns: subgrid;
    }

    .referral-contact {
        grid-auto-flow: row;
        grid-column: span 1;
        grid-template-columns: subgrid;
    }
}