.datatable-wrapper {
    h2 {
        font-family: $headingFont;
        @include font-size(18);
        margin: 30px 0 10px;
    }
    .action-bar {
        margin: 10px 0;
        .btn-info{
            overflow: hidden;
            background: transparent;
            border : 1px  white(.3) solid;
        }
    }
    .filter {
        display: inline-block;
        position: relative;
        text-align: right;
        width: 100%;
        margin-bottom: 10px;
        input {
            padding-right: 30px;
            min-width: 250px;
        }
        button {
            position: absolute;
            right: 1px;
            top: -1px;
            cursor: default;
            opacity: .5;
            background: transparent;
            width: 25px;
            height : 25px;
            &:before {
                color: #666;
            }
        }
        &.column {
            float: none;
            width: auto;
            text-align: left;
            margin-bottom: 0;
            input {
                min-width: inherit;
            }
        }
    }
    .datatable-pagination-bottom,
    .datatable-pagination-top {
        overflow-x: hidden;
    }
}
.datatable-container {
    overflow-y: auto;
}
table.datatable{
    &.matrix {
        th {
            vertical-align: top;
            padding: 2px 2px;
        }
        tr.selected {
            background: $darkBlueGrey;
        }
    }
    &.hoverable {
        tr:hover  {
            background: $lightBlueGrey;
            cursor: pointer;
        }
    }
    th{
        cursor: not-allowed;
        .sortable, .sorted {
            cursor: pointer;
            position: relative;
            padding-right: 20px;
            &:after{
                @include tao-icon-setup;
                position: absolute;
                right: 5px;
                color: $uiClickableActiveBg;
            }
            &:hover,&:active,&:focus {
               &:after {
                 color: $uiClickableHoverBg;
               }
            }
        }
        .sortable:after {
            @include icon-spinner;
            top: 3px;
        }
        .sorted.sorted_asc:after{
            @include icon-down;
        }
        .sorted.sorted_desc:after{
            @include icon-up;
        }
    }
    tr{
        &.selected {
            background: $darkBlueGrey;
        }
        &.highlight {
            background-color: $warningBgColor !important;
        }
    }
    th,
    td{
        &.checkboxes{
            width: 20px;
            text-align: center;
        }
        &.actions {
            text-align: center;
        }
        button{
            text-transform: capitalize;
        }
    }
}