// DataTable
//==================================================
.dataTables_wrapper{
    width : 100%;

    .dataTables_filter{
        padding    : 5px;
        text-align : right;
        font-size  : @font-size-small;

        label{

            input{
                margin-left : 5px;
                width       : 250px;
            }
        }
    }

    .dataTable{
    }

    .sorting, .sorting_asc, .sorting_desc{
        cursor        : pointer;
        position      : relative;
        padding-right : 16px;
        border-left   : 1px solid @table-border-color;

        &:after{
            .flexkit-icon();
            content   : "\e0cd";
            font-size : 16px;
            height    : 16px;
            position  : absolute;
            top       : 0;
            bottom    : 0;
            right     : 0;
            margin    : auto;
        }
    }

    .sorting:after{
    }
    .sorting_asc:after{
        content : "\e0cc";
    }
    .sorting_desc:after{
        content : "\e0cb";
    }

    .dataTables_empty{
        text-align : center;
    }
}

.dataTables_paginate{
    margin-top : 1em;
    float      : right;
    font-size  : 12px;

    .paginate_button{
        background : @gray-lighter;
        margin     : 0 .25em;
        padding    : .25em .75em;
        min-width  : 2em;
        .inline-block();
        text-align : center;
        color      : @gray-darker;

        &:hover{
            background : darken(@gray-lighter, 3%);
        }

        &.disabled, &.current{
            cursor     : default;
            color      : darken(@gray-lighter, 5%);
            background : lighten(@gray-lighter, 3%);
        }

        &.current{
            font-weight : bold;
            background  : saturate(screen(@brand-primary, @gray), 10%);
            color       : #fff;
        }

        &.first, &.last, &.previous, &.next{
            &:before, &:after{
                .flexkit-icon()
            }
        }

        &.first, &.last{
            font-weight : bold;

            &:before, &:after{
                font-size   : 15px;
                font-weight : bold;
            }
        }

        &.previous, &.next{

            &:before, &:after{
            }
        }

        &.first, &.previous{
            &:before{
                content : "\e0c2";
            }
        }

        &.last, &.next{
            &:after{
                content : "\e0c3";
            }
        }
    }
}