.rdc-table-red,
.rdc-table {
    overflow-x: auto;
    max-width: 100vw;
}

.mortgage-matrix .rdc-table thead tr th,
.mortgage-matrix .rdc-table thead tr th p {
    font-weight: 800;
}

.rdc-table tbody tr td:first-child {
    color: var(--color-red);
    font-weight: 800;
}

.rdc-table-red th,
.rdc-table th,
.rdc-table-red td,
.rdc-table td {
    padding: 1rem;
}

.rdc-table-red tr,
.rdc-table tr {
    border-bottom: 1px solid #e5e5e5;
}

.rdc-table-red tbody tr td:first-child {
    background: var(--color-red);
    color: white;
}

.rdc-table-red tbody tr td:first-child *,
.rdc-table tbody tr td:first-child * {
    color: white;
}

.rdc-table-red.top-label thead tr th,
.rdc-table.top-label thead tr th {
    background: var(--color-red);
    color: white;
}

.rdc-table-red.top-label thead tr th *,
.rdc-table.top-label thead tr th * {
    color: white;
}

.rdc-table-red.top-label tbody tr td:first-child,
.rdc-table.top-label tbody tr td:first-child {
    background: unset;
    color: unset;
}

.rdc-table-red.top-label tbody tr td:first-child *,
.rdc-table.top-label tbody tr td:first-child * {
    color: unset;
}

.rates-table .mt-3 {
    margin-top: 3rem;
}

.mortgage-matrix .rates-table th:first-child {
    background-color: white;
    position: sticky;
    left: 0;
    z-index: 1;
}

@media screen and (max-width: 900px) {
    .rdc-table-red {
        display: block;
    }

    .rdc-table-red tbody tr td:first-child {
        position: sticky;
        left: 0;
        color: white !important;
    }

    .rdc-table-red.top-label {
        display: block;
    }

    .rdc-table-red.top-label tbody tr td:first-child {
        position: relative;
    }

    .rdc-table.top-label thead tr th {
        background: var(--color-red);
        color: white;
    }
}