#selfService {
    margin-top: 2em;
}

ul {
    list-style: none;
    padding-left: 0;
}

    ul li {
        margin: 5px 0;
    }

.contact-group + .contact-group {
    margin-top: 55px;
}

#filterContainer {
    margin-top: 2.5em;
}

#providerListContainer {
    margin-top: 1.5em;
}

    #providerListHeader {
        align-items: center;
        background-color: #555555;
        color: #FFF;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        padding: 15px 10px;
    }

    #providerListHeader span + span,
    .containerCard span + span {
        margin-left: 10px;
    }

    .containerCard {
        align-items: center;
        border: 1px solid #ddd;
        border-bottom: none;
        background-color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        padding: 15px 10px;
    }

    .containerCard:last-child {
        border-bottom: 1px solid #ddd;
    }

    .containerCard:nth-of-type(even) {
        background-color: #FCFCFD;
    }

    #providerListContainer .providerName {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    }

    #providerListContainer .afterHours,
    #providerListContainer .phone {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 25%;
            flex: 1 0 25%;
    }

#providerListTable {
    max-height: 350px;
    overflow-x: hidden;
    overflow-y: auto;
}

#loadingProviders.containerCard,
#noData.containerCard {
    display: block;
    text-align: center;
}

.k-loading-mask {
    display: none;
}

.selfservice-header {
    border-bottom: 1px solid #24A8E0;
}

    .selfservice-header h2 {
        color: #24A8E0;
        box-sizing: content-box;
        display: inline-block;
        height: 68px;
        font-size: 22px;
        font-size: 1.692rem;
        letter-spacing: normal;
        line-height: 72px;
        margin: 0 0 0 -1px;
    }

@media only screen and (max-width: 991px) {
    #providerServices {
        margin: 55px 0;
    }
    #providerListTable {
        max-height: 60vh;
    }
}

@media only screen and (max-width: 767px) {
    #providerListHeader {
        display: none;
    }
    #providerListTable {
        max-height: 85vh;
    }
    #providerListTable .containerCard {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 25px 15px;
    }
    #providerListContainer .providerName {
        -ms-flex-preferred-size: 70%;
        flex-basis: 70%;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    #providerListContainer .afterHours {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        margin-left: 0;
    }
    #providerListContainer .afterHours.hasAfterHours {
        margin-top: 15px;
    }
    #providerListTable .containerCard .afterHoursLabel {
        display: inline-block !important;
    }
    #providerListContainer .phone {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        text-align: right;
    }

    .selfservice-header {
        margin-bottom: 30px;
        margin-left: -20px;
        width: 110%;
    }
        .selfservice-header h2 {
            font-size: 18px;
            height: 35px;
            line-height: 1;
            overflow: hidden;
            padding: 0 20px 0;
        }

    #selfService h4 {
        line-height: 1.25em;
        margin-bottom: 20px;
    }

    #selfService a {
        display: block;
    }
}

@media only screen and (max-width: 450px) {

    #providerListContainer .providerName {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    #providerListContainer .phone {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        text-align: left;
        margin: 20px 0 5px 0;
    }

    #providerListTable .containerCard .phoneLabel {
        display: inline-block !important;
    }
}