.member-directory-list {
    display: flex;
    flex-direction: column;
}

.member-directory-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0.5rem 1rem
}

.member-directory-list > div:nth-child(odd) {
    background-color: #f5f5f5;
    border-radius: var(--root-border-radius);
}

.member-directory-list .list-item-image img {
    width: 4rem;
    max-width: 4rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
}

.member-directory-list .list-item-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    margin-left: 1rem;
}

.member-directory-list button i::before {
    margin-right: 0.5rem;
}

.member-directory-list .list-item-title {
    font-weight: 600;
}

.member-directory-list .Connect::before {
    content: "\f234";
}

.member-directory-list .Pending::before {
    content: "\f2bd";
}

.member-directory-list .Accepted::before {
    content: " \00a0 \00a0 \f075";
}

.member-directory-list .connectedbutcantmessage::before {
    content: "\f2bd";
}

.member-directory-list .cantconnectormessage::before {
    content: "";
}

.member-directory-list .list-item-user-status {
    display: flex;
    column-gap: 0.5rem;
}

.member-directory-table > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
    flex: 1;
    padding: 0.5rem;
    position: relative;
    padding-right: 3rem;
}

.member-directory-table > div {
    background-color: #f5f5f5;
    border-top-right-radius: var(--root-border-radius);
    border-bottom-right-radius: var(--root-border-radius);
    border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
}

.member-directory-table .list-item-image img {
    width: 4rem;
    max-width: 4rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
}

/* Flatten wrappers so inner elements participate directly in the grid */
.member-directory-table > div > .d-flex,
.member-directory-table > div > .d-flex > .list-item-details {
    display: contents;
}

/* Column placements */
.member-directory-table .member-name-cell { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem;
}
.member-directory-table .member-name-cell .list-item-title { font-weight: 600; }

.member-directory-table > div > .list-item-user-status {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}
.member-directory-table .list-item-user-status .btn {
    width: auto;
    flex: 1 1 0;
}

.member-directory-table .list-item-user-status .btn:hover {
    color: unset
}

.member-directory-table .list-item-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    margin-left: 1rem;
}

.member-directory-table button i::before {
    margin-right: 0.5rem;
}

.member-directory-table .list-item-title {
    font-weight: 600;
}

.member-directory-table .Connect::before {
    content: "\f234";
}

.member-directory-table .Pending::before {
    content: "\f2bd";
}

.member-directory-table .Accepted::before {
    content: " \00a0 \00a0 \f075";
}

.member-directory-table .connectedbutcantmessage::before {
    content: "\f2bd";
}

.member-directory-table .cantconnectormessage::before {
    content: "";
}

.member-directory-table .list-item-user-status {
    display: flex;
    column-gap: 0.5rem;
}

.member-directory-table .row-chevron {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 100%;
    color: var(--root-tab-title);
    background-color: var(--root-button);
    text-decoration: none;
    border-top-right-radius: var(--root-border-radius);
    border-bottom-right-radius: var(--root-border-radius);
}

.member-directory-table .row-chevron::after {
    content: "";
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12.328%206.46731C12.0338%206.17572%2011.5589%206.17784%2011.2673%206.47204C10.9757%206.76624%2010.9778%207.24111%2011.272%207.53269L12.6824%208.93054C13.2573%209.50033%2013.6427%209.88386%2013.9018%2010.2065C13.9137%2010.2213%2013.9251%2010.2358%2013.9362%2010.25L7%2010.25C6.58579%2010.25%206.25%2010.5858%206.25%2011C6.25%2011.4142%206.58579%2011.75%207%2011.75L13.9362%2011.75C13.9251%2011.7642%2013.9137%2011.7787%2013.9018%2011.7935C13.6427%2012.1161%2013.2573%2012.4997%2012.6824%2013.0695L11.272%2014.4673C10.9778%2014.7589%2010.9757%2015.2338%2011.2673%2015.528C11.5589%2015.8222%2012.0338%2015.8243%2012.328%2015.5327L13.7691%2014.1043C14.3053%2013.573%2014.7525%2013.1298%2015.0713%2012.7328C15.4057%2012.3163%2015.6601%2011.8787%2015.7281%2011.3455C15.7427%2011.2308%2015.75%2011.1154%2015.75%2011C15.75%2010.8846%2015.7427%2010.7692%2015.7281%2010.6545C15.6601%2010.1213%2015.4057%209.68367%2015.0713%209.26724C14.7525%208.87023%2014.3053%208.42705%2013.7691%207.89568L12.328%206.46731Z'%20fill='%23000'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%200.25C5.06294%200.25%200.25%205.06294%200.25%2011C0.25%2016.9371%205.06294%2021.75%2011%2021.75C16.9371%2021.75%2021.75%2016.9371%2021.75%2011C21.75%205.06294%2016.9371%200.25%2011%200.25ZM1.75%2011C1.75%205.89137%205.89137%201.75%2011%201.75C16.1086%201.75%2020.25%205.89137%2020.25%2011C20.25%2016.1086%2016.1086%2020.25%2011%2020.25C5.89137%2020.25%201.75%2016.1086%201.75%2011Z'%20fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12.328%206.46731C12.0338%206.17572%2011.5589%206.17784%2011.2673%206.47204C10.9757%206.76624%2010.9778%207.24111%2011.272%207.53269L12.6824%208.93054C13.2573%209.50033%2013.6427%209.88386%2013.9018%2010.2065C13.9137%2010.2213%2013.9251%2010.2358%2013.9362%2010.25L7%2010.25C6.58579%2010.25%206.25%2010.5858%206.25%2011C6.25%2011.4142%206.58579%2011.75%207%2011.75L13.9362%2011.75C13.9251%2011.7642%2013.9137%2011.7787%2013.9018%2011.7935C13.6427%2012.1161%2013.2573%2012.4997%2012.6824%2013.0695L11.272%2014.4673C10.9778%2014.7589%2010.9757%2015.2338%2011.2673%2015.528C11.5589%2015.8222%2012.0338%2015.8243%2012.328%2015.5327L13.7691%2014.1043C14.3053%2013.573%2014.7525%2013.1298%2015.0713%2012.7328C15.4057%2012.3163%2015.6601%2011.8787%2015.7281%2011.3455C15.7427%2011.2308%2015.75%2011.1154%2015.75%2011C15.75%2010.8846%2015.7427%2010.7692%2015.7281%2010.6545C15.6601%2010.1213%2015.4057%209.68367%2015.0713%209.26724C14.7525%208.87023%2014.3053%208.42705%2013.7691%207.89568L12.328%206.46731Z'%20fill='%23000'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%200.25C5.06294%200.25%200.25%205.06294%200.25%2011C0.25%2016.9371%205.06294%2021.75%2011%2021.75C16.9371%2021.75%2021.75%2016.9371%2021.75%2011C21.75%205.06294%2016.9371%200.25%2011%200.25ZM1.75%2011C1.75%205.89137%205.89137%201.75%2011%201.75C16.1086%201.75%2020.25%205.89137%2020.25%2011C20.25%2016.1086%2016.1086%2020.25%2011%2020.25C5.89137%2020.25%201.75%2016.1086%201.75%2011Z'%20fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
    pointer-events: none;
}
.member-directory-table tr:hover .row-chevron {
    background-color: var(--root-primary);
    color: var(--root-secondary);
}
.member-directory-table .row-chevron:focus-visible {
    outline: 2px solid var(--root-primary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .member-directory-table > div {
        grid-template-columns: 64px 1fr;
    }

    .member-directory-table .member-name-cell { grid-column: 1 / -1; }
    .member-directory-table .list-item-job,
    .member-directory-table .list-item-org,
    .member-directory-table .list-item-user-status {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }
    .member-directory-table .list-item-user-status .btn {
        flex: 1 1 100%;
    }
    .member-directory-table > div {
        padding-right: 2.5rem;
    }
}

table.member-directory-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
    table-layout: auto;
}

table.member-directory-table thead th {
    font-weight: 600;
    border: 0;
    background: transparent;
    padding: 0.5rem 1rem;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
table.member-directory-table thead th:last-child { padding-right: 3rem; }

table.member-directory-table.sortable thead th { cursor: pointer; }
table.member-directory-table.sortable thead th[aria-sort="ascending"]::after { content: " \25B2"; }
table.member-directory-table.sortable thead th[aria-sort="descending"]::after { content: " \25BC"; }

table.member-directory-table tbody tr { position: relative; }

table.member-directory-table tbody tr td {
    background-color: #f5f5f5;
    padding: 0.5rem 1rem;
    border: 0;
    vertical-align: middle;
}

table.member-directory-table tbody tr td:first-child {
    border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
}
table.member-directory-table tbody tr td:last-child {
    border-top-right-radius: var(--root-border-radius);
    border-bottom-right-radius: var(--root-border-radius);
    position: relative;
    padding-right: 3rem;
    width: 1%;
    white-space: nowrap;
}

table.member-directory-table .member-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 0.5rem;
}

table.member-directory-table td.status-cell {
    white-space: nowrap;
}

.status-cell .btn {
    width: auto;
}

table.member-directory-table thead th.member-name-cell {
    padding-left: 5rem;
}

table.member-directory-table td.actions-cell { width: 1%; white-space: nowrap; }

table.member-directory-table .member-name-cell .list-item-title { font-weight: 600; }

table.member-directory-table .list-item-image img {
    width: 4rem;
    max-width: 4rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
}

table.member-directory-table .list-item-user-status {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}
table.member-directory-table .list-item-user-status .btn { flex: 1 1 0; }
table.member-directory-table .list-item-user-status .btn:hover { color: unset; }

table.member-directory-table .row-chevron {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: calc(100% - 0px);
    color: var(--root-tab-title);
    background-color: var(--root-button);
    text-decoration: none;
    border-top-right-radius: var(--root-border-radius);
    border-bottom-right-radius: var(--root-border-radius);
}
table.member-directory-table .row-chevron::after {
    content: "";
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12.328%206.46731C12.0338%206.17572%2011.5589%206.17784%2011.2673%206.47204C10.9757%206.76624%2010.9778%207.24111%2011.272%207.53269L12.6824%208.93054C13.2573%209.50033%2013.6427%209.88386%2013.9018%2010.2065C13.9137%2010.2213%2013.9251%2010.2358%2013.9362%2010.25L7%2010.25C6.58579%2010.25%206.25%2010.5858%206.25%2011C6.25%2011.4142%206.58579%2011.75%207%2011.75L13.9362%2011.75C13.9251%2011.7642%2013.9137%2011.7787%2013.9018%2011.7935C13.6427%2012.1161%2013.2573%2012.4997%2012.6824%2013.0695L11.272%2014.4673C10.9778%2014.7589%2010.9757%2015.2338%2011.2673%2015.528C11.5589%2015.8222%2012.0338%2015.8243%2012.328%2015.5327L13.7691%2014.1043C14.3053%2013.573%2014.7525%2013.1298%2015.0713%2012.7328C15.4057%2012.3163%2015.6601%2011.8787%2015.7281%2011.3455C15.7427%2011.2308%2015.75%2011.1154%2015.75%2011C15.75%2010.8846%2015.7427%2010.7692%2015.7281%2010.6545C15.6601%2010.1213%2015.4057%209.68367%2015.0713%209.26724C14.7525%208.87023%2014.3053%208.42705%2013.7691%207.89568L12.328%206.46731Z'%20fill='%23000'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%200.25C5.06294%200.25%200.25%205.06294%200.25%2011C0.25%2016.9371%205.06294%2021.75%2011%2021.75C16.9371%2021.75%2021.75%2016.9371%2021.75%2011C21.75%205.06294%2016.9371%200.25%2011%200.25ZM1.75%2011C1.75%205.89137%205.89137%201.75%2011%201.75C16.1086%201.75%2020.25%205.89137%2020.25%2011C20.25%2016.1086%2016.1086%2020.25%2011%2020.25C5.89137%2020.25%201.75%2016.1086%201.75%2011Z'%20fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12.328%206.46731C12.0338%206.17572%2011.5589%206.17784%2011.2673%206.47204C10.9757%206.76624%2010.9778%207.24111%2011.272%207.53269L12.6824%208.93054C13.2573%209.50033%2013.6427%209.88386%2013.9018%2010.2065C13.9137%2010.2213%2013.9251%2010.2358%2013.9362%2010.25L7%2010.25C6.58579%2010.25%206.25%2010.5858%206.25%2011C6.25%2011.4142%206.58579%2011.75%207%2011.75L13.9362%2011.75C13.9251%2011.7642%2013.9137%2011.7787%2013.9018%2011.7935C13.6427%2012.1161%2013.2573%2012.4997%2012.6824%2013.0695L11.272%2014.4673C10.9778%2014.7589%2010.9757%2015.2338%2011.2673%2015.528C11.5589%2015.8222%2012.0338%2015.8243%2012.328%2015.5327L13.7691%2014.1043C14.3053%2013.573%2014.7525%2013.1298%2015.0713%2012.7328C15.4057%2012.3163%2015.6601%2011.8787%2015.7281%2011.3455C15.7427%2011.2308%2015.75%2011.1154%2015.75%2010.8846%2015.7427%2010.7692%2015.7281%2010.6545C15.6601%2010.1213%2015.4057%209.68367%2015.0713%209.26724C14.7525%208.87023%2014.3053%208.42705%2013.7691%207.89568L12.328%206.46731Z'%20fill='%23000'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%200.25C5.06294%200.25%200.25%205.06294%200.25%2011C0.25%2016.9371%205.06294%2021.75%2011%2021.75C16.9371%2021.75%2021.75%2016.9371%2021.75%2011C21.75%205.06294%2016.9371%200.25%2011%200.25ZM1.75%2011C1.75%205.89137%205.89137%201.75%2011%201.75C16.1086%201.75%2020.25%205.89137%2020.25%2011C20.25%2016.1086%2016.1086%2020.25%2011%2020.25C5.89137%2020.25%201.75%2016.1086%201.75%2011Z'%20fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
    pointer-events: none;
}
table.member-directory-table .row-chevron:hover { background-color: var(--root-primary); color: var(--root-secondary); }
table.member-directory-table .row-chevron:focus-visible { outline: 2px solid var(--root-primary); outline-offset: 2px; }


.table-search {
    max-width: 18rem;
}