﻿
div.dataTables_wrapper div.dataTables_filter {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

    div.dataTables_wrapper div.dataTables_filter label {
        font-weight: 600;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        margin-right: 0.5rem;
    }

div.dataTables_wrapper div.dataTables_length {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

    /*do we want the pagination results per page label bold? it might bring too much attention to the label for the purpose of the control...*/
    /*div.dataTables_wrapper div.dataTables_length label {
        font-weight: 600;
    }*/

    div.dataTables_wrapper div.dataTables_length select {
        width: 100px;
    }

@media (min-width:48em) {
    div.dataTables_wrapper div.dataTables_length {
        justify-content: flex-end;
    }

        div.dataTables_wrapper div.dataTables_length select {
            margin-right: 0.5rem;
        }
}

div.dataTables_wrapper div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right;
}

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        white-space: nowrap;
    }

@media (min-width:48em) {
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        margin: 2px 0;
        justify-content: flex-end;
    }
}

.pagination {
    font-family: Montserrat,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 600;
    margin-top: 1.5rem;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end; /*center;*/
    list-style: none
}

    .pagination > li {
        position: relative;
        display: inline-flex;
        text-decoration: none;
        vertical-align: middle;
        text-align: center;
        min-width: 1.5rem
    }

        .pagination > li > a,
        .pagination > li > span {
            display: inline-flex;
            border: none;
            font-size: 1rem;
            line-height: 1.5rem;
            background-color: transparent;
            margin: 0 0 0 .5rem;
            padding: .25rem .5rem;
            text-decoration: none !important;
            color: #333 !important;
            vertical-align: middle;
        }

            .pagination > li > a:active,
            .pagination > li > span:active {
                background-color: rgba(0,133,179,.2) !important;
            }


        .pagination > li.next {
            margin: 0 0 0 1rem;
        }

        .pagination > li.previous {
            margin: 0 1rem 0 0;
        }

            .pagination > li.previous + .pagination > li {
                margin-left: 0;
            }

            .pagination > li.previous > a > i.nsw-material-icons {
                font-size: 1.25rem;
                color: #333 !important;
                align-self: center;
                margin-right: .25rem;
            }

        .pagination > li.next > a > i.nsw-material-icons {
            font-size: 1.25rem;
            color: #333 !important;
            align-self: center;
            margin-left: .25rem;
        }



    .pagination > .active > a,
    .pagination > .active > span {
        border-color: transparent;
        color: #000;
    }

        .pagination > .active > a:after {
            position: absolute;
            content: "";
            bottom: 0;
            right: 0;
            width: 80%;
            /*left: 50%;
            transform: translateX(-50%);*/
            height: 2px;
            background-color: #002664
        }

        .pagination > .active > a:hover,
        .pagination > .active > a:active,
        .pagination > .active > span:hover,
        .pagination > .active > span:active {
            background-color: rgba(0,133,179,.2);
        }

        .pagination > .active > a:focus,
        .pagination > .active > span:focus {
            border-color: transparent;
            color: #000;
            outline: 3px solid #0085b3;
            outline-offset: 0
        }
