.member-form-section .fi-section-header-heading {
    color: #2563eb;
}

.member-token-picker {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
}

.member-token-picker .fi-fo-field-wrp,
.member-token-picker .fi-sc-component {
    width: 100%;
    max-width: none;
}

.token-picker {
    width: 100%;
}

.token-picker__counter {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(107 114 128);
    transition: color 200ms ease;
}

.token-picker__counter--limit {
    color: #2563eb;
}

.token-picker__counter--rejected {
    color: #dc2626;
}

.token-picker__grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.token-picker__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    background-color: rgb(255 255 255 / 4%);
    font-size: 0.95rem;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.token-picker__cell:focus-visible {
    outline: 2px solid rgb(37 99 235 / 50%);
    outline-offset: 2px;
}

.token-picker__cell--selected {
    border-color: #2563eb;
    background-color: rgb(37 99 235 / 12%);
    color: #2563eb;
}

.token-picker__cell--disabled:not(.token-picker__cell--selected) {
    cursor: not-allowed;
    opacity: 0.55;
}

.token-picker__cell--unavailable {
    border-color: #dc2626;
    background-color: rgb(220 38 38 / 12%);
    color: #dc2626;
    cursor: not-allowed;
    opacity: 0.9;
}

.token-picker__cell--unavailable:hover,
.token-picker__cell--unavailable:focus-visible {
    border-color: #dc2626;
    background-color: rgb(220 38 38 / 12%);
    color: #dc2626;
    box-shadow: none;
}

.token-picker__cell--rejected {
    border-color: #dc2626 !important;
    background-color: rgb(220 38 38 / 15%) !important;
    color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgb(220 38 38 / 25%);
    animation: token-picker-reject 700ms ease;
}

@keyframes token-picker-reject {
    0%,
    100% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.05);
    }
}

@media (min-width: 768px) {
    .token-picker__cell {
        min-height: 3.75rem;
        font-size: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    .member-form-section .fi-section-header-heading {
        color: #60a5fa;
    }

    .token-picker__counter {
        color: rgb(156 163 175);
    }

    .token-picker__counter--limit {
        color: #60a5fa;
    }

    .token-picker__counter--rejected {
        color: #f87171;
    }

    .token-picker__cell {
        border-color: rgb(75 85 99);
        background-color: rgb(255 255 255 / 3%);
    }

    .token-picker__cell--selected {
        border-color: #60a5fa;
        background-color: rgb(96 165 250 / 15%);
        color: #60a5fa;
    }

    .token-picker__cell--rejected {
        border-color: #f87171 !important;
        background-color: rgb(248 113 113 / 15%) !important;
        color: #f87171 !important;
        box-shadow: 0 0 0 2px rgb(248 113 113 / 25%);
    }

    .token-picker__cell--unavailable {
        border-color: #f87171;
        background-color: rgb(248 113 113 / 12%);
        color: #f87171;
    }

    .token-picker__cell--unavailable:hover,
    .token-picker__cell--unavailable:focus-visible {
        border-color: #f87171;
        background-color: rgb(248 113 113 / 12%);
        color: #f87171;
    }
}

.member-details-table .fi-ta-filters-heading {
    display: none;
}

.member-details-table .fi-ta-filters .fi-fo-field-wrp,
.member-details-table .fi-ta-filters .fi-input-wrp {
    width: 100%;
}

.member-details-table .fi-ta-header-cell {
    background-color: #2563eb;
    color: #fff;
}

@media (prefers-color-scheme: dark) {
    .member-details-table .fi-ta-header-cell {
        background-color: #1d4ed8;
    }
}