table.dataTable {
    border-collapse: collapse;
    width: 100% !important;
}

table.dataTable.no-footer {
    border-bottom: none;
}

table.dataTable > * + tbody > * > *,
table.dataTable > tbody > * ~ * > *,
table.dataTable > tfoot > * > * {
    border-top: none;
}

table.dataTable thead th {
    display: none;
    border-bottom: none;
    background-color: transparent;
    color: var(--brand-color);
    text-transform: uppercase;
    font-family: var(--heading-font-family), var(--fallback-font-family);
}

table.dataTable thead th:last-child {
    border-right: none;
}

table.dataTable tbody {
    border-collapse: separate;
}

table.dataTable tbody tr:nth-child(odd) {
    background-color: var(--tertiary-dark);
}

table.dataTable tbody td {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0;
    padding-left: 1em;
}

table.dataTable tbody td:first-child {
    padding-top: 1.5em;
}

table.dataTable tbody td:last-child {
    padding-bottom: 0.5em;
    border-right: none;
}

table.dataTable tbody td:hover a {
    color: var(--brand-color);
    text-decoration: underline;
}

table.dataTable tbody td .label {
    display: inline-block;
    font-weight: 700;
    color: var(--brand-color);
    margin-bottom: 0;
}

table.dataTable tbody td .data-detail {
    margin-bottom: 0.7em;
}

.sales-contact-table-filter-wrapper {
    margin-bottom: 4.3em;
    width: 100%;
}

#sales-contact-table-filter {
    width: 100%;
}

#sales-contact-table-filter > div {
    width: 100%;
    float: left;
}

#sales-contact-table-filter select {
    width: calc(100%);
    background-color: transparent;
    border-color: transparent;
    border-bottom: 1px solid;
    margin-bottom: 0.5em;
}

#sales-contact-table-filter select {
    margin-bottom: 2em;
}

.filter-selected {
    position: relative;
}

.filter-selected:after {
    content: "x";
    display: block;
    color: var(--primary-accent, #ef4023);
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    background-color: var(--secondary-light, #e9ecf1);
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .filter-selected:after {
        margin-right: 2.7em;
    }
}

#sales-contact-search-box {
    border: 0;
    width: 100%;
    border-radius: 30px;
    padding: 0.5em 1.5em 0.5em 2.5em;
    background: var(--primary-light)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat 1em center;
}

.phone-number,
.contact-name {
    white-space: nowrap;
}

@media screen and (min-width: 768px) {
    #sales-contact-table-filter {
        float: left;
    }

    #sales-contact-table-filter select {
        width: calc(100% - 2.7em);
        margin-bottom: 0.5em;
    }

    #sales-contact-table-filter select:first-child {
        margin-right: 2.7em;
    }

    #sales-contact-search-box {
        /*width: 25%;*/
    }

    #sales-contact-table-filter > div {
        width: 33%;
    }
}

@media screen and (min-width: 900px) {
    #sales-contact-table-filter > div {
        width: 33%;
    }

    #sales-contact-table-filter {
        width: 75%;
    }

    #sales-contact-table-filter select {
        width: calc(100% - 2.7em);
        margin-right: 2.7em;
    }

    #sales-contact-search-box {
        width: 25%;
    }
}

@media screen and (min-width: 1024px) {
    #sales-contact-table-filter {
        float: left;
        width: 75%;
    }
}

@media screen and (min-width: 300px) {
    table.dataTable tbody td {
        flex-direction: row;
    }
    table.dataTable tbody td .label {
        flex-basis: 85px;
        margin-bottom: 0.5em;
    }
    table.dataTable tbody td .data-detail {
        margin-bottom: 0.5em;
    }
}

@media screen and (min-width: 768px) {
    thead {
        border-bottom: 1px solid var(--tertiary-dark);
    }

    thead:after {
        line-height: 1.4em;
        content: "_";
        color: transparent;
        display: block;
    }

    table.dataTable thead th {
        padding: 0 1em;
        display: table-cell;
    }

    table.dataTable thead th:first-child {
        padding-left: 0;
    }

    table.dataTable tbody td {
        display: table-cell;
    }

    table.dataTable tbody td {
        padding: 0.6em 1em;
    }

    table.dataTable tbody td:first-child {
        padding-top: 0.6em;
        padding-left: 0;
    }

    table.dataTable tbody td:last-child {
        padding-bottom: 0;
    }

    table.dataTable tbody td .label {
        display: none;
    }

    tbody:before {
        line-height: 1.4em;
        content: "_";
        color: transparent;
        display: block;
    }

    table.dataTable tbody tr:nth-child(odd) {
        background-color: transparent;
    }

    table.dataTable td,
    table.dataTable th {
        border-right: 1px solid var(--tertiary-dark);
    }
}