﻿.matrix-container {
    margin-bottom: 15px;
    border-radius: 8px;
}

    .matrix-container .title {
        font-weight: normal;
    }

.matrix-row {
    display: table;
}

    .matrix-row:last-child {
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #dddddd;
    }

    .matrix-row:nth-child(odd) {
        background: #eeeeee;
    }

    .matrix-row:nth-child(even) {
        background: #fefefe;
    }

    .matrix-row:first-child {
        border-radius: 8px 8px 0 0;
    }

    .matrix-row:last-child {
        border-radius: 0 0 8px 8px;
    }

.matrix-cell {
    display: table-cell;
    padding: 10px;
    min-width: 60px;
    border-style: solid;
    border-width: 1px 1px 0 0;
    border-color: #dddddd;
    vertical-align: middle;
    text-align: center;
}

.matrix-row:first-child .matrix-cell:first-child {
    border-radius: 8px 0 0 0;
}

.matrix-row:first-child .matrix-cell:last-child {
    border-radius: 0 8px 0 0;
}

.matrix-row:last-child .matrix-cell:first-child {
    border-radius: 0 0 0 8px;
}

.matrix-row:last-child .matrix-cell:last-child {
    border-radius: 0 0 8px 0;
}

.matrix-cell:nth-child(1) {
    width: 100%;
    text-align: left;
    border-left-width: 1px;
}

.matrix-cell .fa-brands,
.matrix-cell .fa-solid {
    font-size: 20px;
    line-height: 1;
}

.nextdoor img {
    width: 20px;
    padding-top: 8px;
}

@media(max-width:500px) {
    .matrix-row {
        display: block;
        text-align: center;
        border-style: none;
        padding-bottom: 15px;
        padding-top: 20px;
    }

        .matrix-row .title {
            text-align: center;
            display: table;
            margin-left: auto;
            margin-right: auto;
        }

    .matrix-cell {
        display: inline-block;
        border-style: none;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

        .matrix-cell:first-child {
            display: block;
        }

        .matrix-cell .fa-brands,
        .matrix-cell .fa-solid {
            padding: 5px;
        }

    .nextdoor img {
        padding-top: 10px;
    }
}
