.web-grid {
    padding: 5px;
}

    .web-grid select option {
        margin-bottom: 5px;
    }

    .web-grid select::-ms-expand {
        color: #666;
        background-color: transparent;
        border: none;
        outline: none;
        padding-right: 5px;
        color: #0099CC;
    }


    /* Start:  FILTER Section*/

    .web-grid .container-filters {
        margin-bottom: 10px;
    }

        .web-grid .container-filters .filter {
            margin-bottom: 15px;
        }

            .web-grid .container-filters .filter .filter-label {
                font-size: 15px;
            }


/* End:  FILTER Section*/

/* Start:  GRID Section*/

.web-grid .table-responsive{
    overflow-x:inherit;
}

.web-grid .grid tbody tr td, .web-grid .grid tfoot tr td {
    padding:6px;
}

.web-grid .grid thead tr th {
    color: #fff;
    font-weight: 500;
    padding: 10px !important;
    background-color: #424242 !important;
    border: solid 1px #424242;
}

.web-grid .grid thead tr th:not(:first-child) {
    border-left: 1.01px solid #E6E6E6 !important;
}

.grid thead th.sortable {
    cursor: pointer;
}

.grid thead th.sortable span.sort-icon {     
        margin: 0;
        padding: 0;
        margin-top: 3px;
        float: right;              
    }

.grid thead th.sortable span.sort-icon.fa-sort-asc{     
     font-size:18px;
    color:#97CE68;
    cursor: not-allowed;
}
.grid thead th.sortable span.sort-icon.fa-sort-desc{
    margin-top:-3px;
    margin-bottom:6px;
    font-size:18px;
    color:#FF9F55;
    cursor: not-allowed;
}
.grid tbody tr td {
    border: 1px solid #E6E6E6;
}

/* End:  GRID Section*/

/* Start:  PAGER Section*/

.grid tfoot td {
    text-align: center;
    vertical-align: middle;
    padding: 0 !important;
}

.grid tfoot tr {
    border: solid 1px #424242;
}

.grid-pager {
    margin-top: 0 !important;
    border-collapse: separate;
    background: none;
    background-color: #424242;
    color: white;
    padding: 5px 0 5px 0;
    font-size: 12px;
}

    .grid-pager span {
        margin: 5px;
    }
    .grid-pager .pager-controls span {
        margin-left: 10px;
        margin-right: 10px;
    }

    .grid-pager .pager-no-data-msg {
        padding-top: 10px;
        margin-top: -5px;
        border-top: 0.5px solid;
    }

    .grid-pager select.pager-page-count {
        width: 60px;
        height: 25px;
        color: #000;
        margin: 0 10px 0 10px;
        padding-left: 5px;
        border: .5px solid lightgray;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }


/* End:  PAGER Section*/


/*.web-grid .grid .grid-pager input {
        width: 30px;
        margin: 0 10px 0 10px;
        border: .5px solid lightgray;
        font-size: 11.5px;
        color: #000;
    }
 
  .web-grid .grid  .grid-pager select {
        width: 50px;
        height: 25px;
         width: 75px;
        min-width: 75px;
        margin: 0 10px 0 10px;
        padding-left: 5px;
        border: .5px solid lightgray;
        font-size: 11.5px;
           color: #000;
    }*/



/*.web-grid .grid input, .web-grid .grid select, .web-grid .grid span {
        margin: 5px;
    }

        .web-grid .grid input:not([type="checkbox"]), .web-grid .grid select {
            height: 30px;
            padding: 3px 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }*/

/*.grid thead tr > th:first-child {
        border-left: none;
    }*/

/*.grid tr td {
        margin: 0;
        padding: 10px;
        border-bottom: solid 1px #3cb0fd;
        color: #717171;
    }*/


/*.grid {
    width: 100%;
    background-color: #fff;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
}
    .grid thead tr {
          border: solid 1px #424242;
    }

    .grid thead th {
        color: #fff;
        text-align: left;
        font-size: 11px;
        padding: 10px !important;      
        background-color: #424242 !important;
        border-bottom:1px solid #E6E6E6;
    }


    .grid thead tr th:not(:first-child) {
        border-left: 1px solid #E6E6E6 !important;
    }

    .grid thead th.sortable {
        cursor: pointer;
    } 

    .grid thead th.sortable span.sort_icon {
        background: url('data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==') no-repeat;
        margin: 0;
        padding: 0;
        margin-top: 4px;
        float: right;
        height: 10px;
        width: 20px;
    }

    .grid thead th.sortable.asc span.sort_icon {
        margin-right: 5px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid black;
        cursor: not-allowed;
    }

    .grid thead th.sortable.desc span.sort_icon {
        margin-right: 5px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid black;
        cursor: not-allowed;
    }

  


    .grid tbody tr td {
        border-color: #E6E6E6;
        border-width: 1px;
        border-style: solid;
        color: #030303;
        font-size: 12px;
    }*/

/* End:  GRID Section*/


/* Start:  PAGER Section*/

/*.grid tfoot td {
        text-align: center;
        vertical-align: middle;
        padding: 0 !important;
    }

    .grid tfoot .ui-icon {
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
    }

    .grid tfoot tr {
        border: solid 1px #424242;
    }

    .grid tfoot .ui-icon-plus, .grid tfoot .ui-icon-refresh {
        float: left;
    }

.grid-pager {
    margin-top: 0 !important;
    font-family: Verdana,Arial,sans-serif;
    font-size: 11px;
    border-collapse: separate;
    background: none;
    background-color: #424242;
    color: white;
    padding:5px 0 5px 0;
}

   .web-grid .grid .grid-pager input {
        width: 30px;
        margin: 0 10px 0 10px;
        border: .5px solid lightgray;
        font-size: 11.5px;
        color: #000;
    }
 
  .web-grid .grid  .grid-pager select {
        width: 50px;
        height: 25px;
         width: 75px;
        min-width: 75px;
        margin: 0 10px 0 10px;
        padding-left: 5px;
        border: .5px solid lightgray;
        font-size: 11.5px;
           color: #000;
    }

    .grid-pager .pager-left {
        width: 25%;
        float: left;
        text-align: left;
        padding-top: 5px;
    }

    .grid-pager .pager-center {
        width: 50%;
        float: left;
        text-align: center;
    }

    .grid-pager .pager-right {
        width: 25%;
        float: left;
        text-align: right;
        padding-right: 10px;
        padding-top: 5px;
    }

    .grid-pager .pager-no-data-msg {
        padding-top: 5px;
    }

  .web-grid .grid   .grid-pager input.pager-page-num {
        height: 30px;
        min-height: 30px;
        width: 25px;
        min-width: 25px;
    }

   .web-grid .grid  .grid-pager select.pager-page-count {
        width: 75px;
        min-width: 75px;
        height: 30px;
    }*/

/* End:  PAGER Section*/


/* Start:  FILTERS Section*/

/*table.filters{
    width:99%;
    margin:auto;
}*/

/*table.filters td {
    text-align: center;
    vertical-align: middle;
    padding: 0 10px;
}

table.filters tbody td:nth-child(1) {
    width: 2.5%;
}

table.filters tbody td:nth-child(2) {
    width: 5%;
}

table.filters tbody td:nth-child(3) {
    width: 25%;
}

table.filters tbody td:nth-child(4) {
    width: 20%;
}

table.filters tbody td:nth-child(5) {
    width: 47.5%;
}

table.filters .filter-add, table.filters .filter-remove {
    padding: 0;
    width: 25px;
    height: 25px;
}

table.filters select.andor {
    min-width: 75px;
    width: 75px;
}

table.filters select.fields, table.filters select.operator, table.filters input.value, table.filters select.value {
    width: 85%;
}*/

/* End:  FILTERS Section*/