/* Card Header */
.directory-card-header{
    background-color:#16358c !important;
}

/* Department Heading */
.department-heading{
    color: #16358c;
}

/* Filter Inputs */
.directory-filter{
    font-size: 14px;
}

/* Email Column */
.directory-email{
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Table Layout */
.directory-table{
    table-layout: fixed;
    width: 100%;
}

.directory-table th:nth-child(1),
.directory-table td:nth-child(1){
    width:20%;
}

.directory-table th:nth-child(2),
.directory-table td:nth-child(2){
    width:20%;
}

.directory-table th:nth-child(3),
.directory-table td:nth-child(3){
    width:10%;
}

.directory-table th:nth-child(4),
.directory-table td:nth-child(4){
    width:15%;
}

.directory-table th:nth-child(5),
.directory-table td:nth-child(5){
    width:35%;
}

.directory-table th,
.directory-table td{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}


.directory-card{
    border-radius: 0;
}

.directory-card .card-header{
    border-radius: 0 !important;
}

.directory-card .card-body{
    border-radius: 0 !important;
}

/* Department Section */
.department-section{
    width:100%;
    margin:25px 0;
}

.department-title{
    width:100%;
    background:#16358c;
    color:#fff;
    font-size:18px;
    font-weight:300;
    padding:6px 12px;
    margin:0;
    border:1px solid #16358c;
    box-sizing:border-box;
}

/* Table Wrapper */
.department-section .table-responsive{
    width:100%;
    margin:0 !important;
}

/* Table */
.directory-table{
    width:100% !important;
    table-layout:fixed;
    margin:0;
    border-top:none;
    border-collapse:collapse;
}

/* Table Header */
.directory-table-header th{
    background:#d3d3d3 !important;
    color:#000 !important;
    font-size:16px;
    font-weight:600;
    padding:8px 12px;
    border-top:none !important;
}


.directory-note{
    font-size:15px;
    margin:10px 0 15px;
    color:#333;
}


/* ===========================
   Mobile Responsive Directory
   =========================== */

@media (max-width: 768px) {

    .directory-table{
        table-layout: auto;
        min-width: 700px;
    }

    .directory-table th,
    .directory-table td{
        white-space: nowrap;
        font-size:14px;
        padding:8px;
    }

    .department-title{
        font-size:16px;
        padding:6px 10px;
    }

    .directory-card .col-md-3{
        margin-bottom:10px;
    }

    .directory-note{
        font-size:14px;
    }

    .heading h1{
        font-size:1.8rem;
    }
}