html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.radix-themes {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI (Custom)", Roboto, "Helvetica Neue", "Open Sans (Custom)", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

#root, .radix-themes {
    height: 100%;
    overflow: hidden;
}


/* TABLE STLYES */
.prospects-table thead {
    font-size: 12px;
    font-weight: 600;
    padding-top: .25rem;
    padding-bottom: .25rem;
    text-transform: uppercase;
    color: #6c757d;
}

.prospects-table thead th {
    vertical-align: middle;
    line-height: 1.5;
    font-size: 12px;
}

.prospects-table thead tr th {
    text-align: left;
    color: rgba(66, 82, 110, 0.5);
    border-bottom: 1px solid hsl(var(--border));
    border-right: 1px solid hsl(var(--border));
    padding: 0.25rem;
    outline: 1px solid hsl(var(--border)); /* https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element */
}

div.prospects-table {
    width: 100%;
}

.prospects-table table {
    width: 100%;
}

.prospects-table tr td {
    color: rgba(66, 82, 110, 0.5);
    border-right: 1px solid hsl(var(--border));
    padding-left: 0.25rem;
}

.prospects-table tbody tr:hover, .prospects-table tbody tr.active {
    background-color: hsl(216deg 100% 23% / 3%);
}

.prospects-table tbody tr.checked {
    background-color: var(--accent-4);;
}

.prospects-table tbody tr {
    border-bottom: 1px solid hsl(216deg 100% 23% / 5%);
}

.prospects-table tr > td:first-child {
    padding-left: 1rem;
}

.prospects-table tr > th:first-child {
    padding-left: 1.5rem;
}

.prospects-table tr > td:last-child {
    padding-right: 1rem;
}

.prospects-table .avatar-container > span {
    padding: 0;
    margin: 0;
}

#AttributesBrowser .rt-DataListItem:hover {
    background-color: hsl(216deg 100% 23% / 3%);
    border-radius: 4px;
}

#AttributesBrowser .rt-DataListItem input {
    background-color: transparent;
}


.row-link-to-reference {
    opacity: 0;
    transition: all 0.2s;
}

td:hover .row-link-to-reference {
    opacity: 1;
}

.record-card:hover, .record-card.active {
    background-color: hsl(216deg 100% 23% / 3%);
}

.record-card-group-header {
    font-size: 13px;
    margin-bottom: 12px;
    font-weight: 500;
    color: hsl(var(--sidebar-foreground) / 0.7);
    margin-left: 8px;
}

.record-card-groups {
    overflow-x: scroll;
}

.record-card-groups :last-child .record-card-group-header {
    border-right: 0;
}

.record-card-group {
    background-color: hsl(var(--sidebar-background));
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0.5rem;
    overflow-y: scroll;
    height: calc(100vh - 80px);
    min-width: 340px;
}

.task {
    line-height: 1;
}

.task:hover, .task.active {
    background-color: hsl(216deg 100% 23% / 3%);
}

.prospects-table {
    overflow: scroll;
    max-height: calc(100vh - 56px);
    display: block;
}

.prospects-table th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 2;
}

.tab-counter {
    background-color: hsl(var(--border));
    border-radius: 100%;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: 0.5rem;
}


.campaign-prospects-row .rt-AvatarRoot.rt-r-size-1 {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
}

.campaign-prospects-row .rt-AvatarRoot.rt-r-size-1 .rt-AvatarFallback {
    font-size: 9px;
}

.row-checkbox {
    vertical-align: center;
    text-align: center;
    opacity: 0;
    transition: all 0.1s;
}

.row-checkbox * {
    display: table-cell;
}

.row-checkbox:hover, .checked .row-checkbox {
    opacity: 1;
}

.command-item-avatar .rt-AvatarFallback, .command-item-avatar .rt-AvatarImage {
    font-size: 10px;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.command-item-avatar .rt-AvatarFallback.rt-two-letters {
    font-size: 8px;
}

.rt-AvatarFallback.rt-two-letters {
    white-space: nowrap;
}


.campaign-prospects-row {
    content-visibility: auto;
    contain-intrinsic-size: 22.5px;
}

.prospects-table thead tr th.checkbox-col, .prospects-table td.row-checkbox {
    border: 0;
}

.prospects-table thead tr th.checkbox-col + th {
    outline-left: 0;
}

.prospects-table tr td:last-child {
    border-right: 0;
}

.prospects-table td, .prospects-table th {
    white-space: nowrap;
    text-overflow: ellipsis;
}