/*************************blue table **********************************************/
.erp-blue-table {
    display: table;
    margin: 0 auto;
    background-color: #ffffff;
    font-size: 13px;
    font-weight: normal;
    margin-top: 30px;
}
.erp-blue-table,.erp-blue-table * {
 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/************************************ title ***************************************/
.erp-blue-table-title {
    background-color: #f5f6f8;
    padding: 10px 15px 10px 15px;
        display:block;
}

.erp-blue-table-title > div {
        
    }

.erp-blue-table-title .title{
    font-size: 14px;
    font-weight: bold;
    color: #6E7483;
    text-transform:uppercase;
    display:block;
}

.erp-blue-table-title .show-deleted{
        width: 100%;
        margin: 0px;
        height:28px;
       
}



.erp-blue-table-title .show-deleted >div{
        font-size: 13px;
        color: #777777;
        margin: 0 auto;
        width: 300px;
        float: none;
}

    .erp-blue-table-title .addentry 
    {
        margin-top: 4px;
    }
    .erp-blue-table-title .addentry a {
        font-weight: 600;
        padding: 6px 12px;
        border: 1px solid #e5e5e5;
        background-color: #ffffff;
        color: #666666;
        text-decoration: none;
    }
    .erp-blue-table-title .addentry a:hover {
        background-color: #eeeeee;
    }





.erp-blue-table-inner {
    padding: 15px;
    display: table;
}

    .erp-blue-table select,
    .erp-blue-table input {
        font-size: 13px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .erp-blue-table  form > div > div > div:not(:last-child) {
        border-right: none;/* vertical gridlines */
    }

.erp-blue-table  form > div > div > div {
    float: left;
    padding: 3px 4px 0px 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/*************************blue body **********************************************/



.erp-blue-table div.body {
    max-height: 703px;
    min-height: 24px;
    overflow: auto;
    overflow-y: scroll;
    position: relative;
}

    .erp-blue-table div.body > div {
        display: table-row;
        color: #777777;
    }


.erp-blue-table div.body > div > div {
    border-top: 1px solid #e5e5e5;
    height: 34px;
    padding: 8px;
}
.erp-blue-table div.body > div.alt1 > div.fixed {
    background-color: #f5f6f8;
}


.erp-blue-table div.body > div.alt1 > div,
.erp-blue-table div.body > div.alt1 > div input,
.erp-blue-table div.body > div.alt1 > div select {
    background-color: #f5f6f8;
}

.erp-blue-table div.body > div.alt1:hover > div,
.erp-blue-table div.body > div:hover div.fixed,
.erp-blue-table div.body > div:hover > div {
    background-color: #f5f6f8;
}


/*        border-bottom: 1px solid black; */

/*************************blue table head**********************************************/
.erp-blue-table div.head .state-disabled {
    opacity: 0.5; /* modern browser */
}

.erp-blue-table div.head {
    width: 100%;
}

    .erp-blue-table div.head > div {
        color: #777777;
        border-bottom: 1px solid #cccccc;
        font-weight:bold;
        height: 51px;
        width: 100%;
    }
    .erp-blue-table div.head > div a,
    .erp-blue-table div.head > div input {
        font-weight:normal;
        font-size:13px;
    }

        .erp-blue-table div.head > div > div > div:first-child {
            height:23px;
            padding: 0px 2px 0px 2px;
        }

        .erp-blue-table div.head > div > div > div > div {
            width: auto;
            overflow: auto;
            overflow-x: hidden;
        }

    .erp-blue-table div.head input {
        margin: 3px 0px 0px 0px;
        height: 19px;
        width: 100%;
        font-size: 14px;
        padding: 0px;
    }


    .erp-blue-table div.head a {
        margin: 3px 0px 0px 0px;
        height: 19px;
        padding: 0px;
        width: 15px;
        float: right;
        font-size: 12px;
        background-color:#ffffff;
        color: #777777;
    }

    .erp-blue-table div.head > div > div {
        height: 43px;
        padding: 0px 0px 8px 8px;
    }

    .erp-blue-table div.head .sortable:hover {
        background-color: #f5f6f8;
    }

    .erp-blue-table div.head .sortable {
        cursor: pointer;
        
    }
        .erp-blue-table div.head .sortable div {
            padding-right: 14px;
        }
        .erp-blue-table div.head .sortable .erp-blue-table-up-down {
            position: relative;
        }
.erp-blue-table div.head .sortable .erp-blue-table-up-down:after{
    opacity:0.2;
    content: "\e150";
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: block;
    font-weight:normal;
    font-family: 'Glyphicons Halflings';
}
.erp-blue-table div.head .sortable .erp-blue-table-up-down.erp-blue-table-asc:after
{
    opacity: 0.5;
    content: "\e155";
}
.erp-blue-table div.head .sortable .erp-blue-table-up-down.erp-blue-table-desc:after
{
    opacity: 0.5;
    content: "\e156";
}
.erp-blue-table div.head .material-icons {
    opacity: 0.2
}
.erp-blue-table div.head .material-icons:hover {
    opacity: 0.5
}

/*************************blue table footer *******************/
.erp-blue-table div.footer {
    text-align: left;
    border-top: 1px solid #cccccc;
    color: #777777;
    width: 100%;
    height: 43px;
    font-size: 12px;
    padding-top: 8px;
}

    .erp-blue-table div.footer > div {
        padding-top: 8px;
    }


    .erp-blue-table div.footer div {
        border: none;
        overflow: auto;
        width: auto;
    }

    .erp-blue-table div.footer .erp-blue-table-navi {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        float: none;
        padding: 0px;
        width: 100%;
    }

        .erp-blue-table div.footer .erp-blue-table-navi > div {
            width: 200px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .erp-blue-table div.footer .erp-blue-table-navi span {
            display: inline-block;
        }


    .erp-blue-table div.footer span {
       padding-right: 4px; 
       padding-left: 4px; 
    }
    .erp-blue-table div.footer input {
        width: 40px;
        height: 23px;
        text-align: right;
        padding-top: 0px;
    }

        .erp-blue-table div.footer ul {
            font-size: 12px;
            border-radius: 3px;
            display: inline-block;
        }
    .erp-blue-table div.footer ul>li {
        display: inline;
    }
        .erp-blue-table div.footer ul > li:first-child a{
                border-radius: 3px 0 0 3px;
        }
    .erp-blue-table div.footer ul>li a {
        color: #999999;
        font-weight:600;
        padding: 6px 12px;
        border: 1px solid #e5e5e5;
    }
    .erp-blue-table div.footer ul>li.active a,
    .erp-blue-table div.footer ul>li.active a:hover {
    background-color: #3C4349;
    border-color: #3C4349; 
    color: #ffffff;
    }
    .erp-blue-table div.footer ul > li a:hover{
        background-color: #eeeeee;
        color:#666666;
        text-decoration:none;
    }
    .erp-blue-table div.footer ul > li a:focus {
        text-decoration:none;
    }

/*************************blue table busy shadow **********************************************/
.erp-blue-table .body .erp-blue-table-ajax-busy-shadow {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    background-color: #808080;
    display: none;
    width: 100%;
    height: 703px;
    margin: 0px;
    opacity: 0.5; /* modern browser */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 in Standard Compliant Mode */
    filter: alpha(opacity=50); /* IE5.x -7.0 */
    z-Index: 9999;
}

    .erp-blue-table .body .erp-blue-table-ajax-busy-shadow div {
        position: absolute;
        width: 128px;
        height: 15px;
        top: 50%;
        left: 50%;
        margin-top: -64px;
        margin-left: -8px;
        border: none !important;
    }

.erp-blue-table-hidden {
    display: none;
}
/******************************* blue table filter select ********************/
.btn-blue-table-multi-select-dropdown {
    width: 40px !important;
    height: 22px !important;
    margin-top: -6px !important;
    margin-right: 5px !important;
}

.blue-table-multi-select-container > button.btn-blue-table-multi-select-all {
    float: right !important;
}

.blue-table-multi-select-container > button.btn-blue-table-multi-select-submit,
.blue-table-multi-select-container > button.btn-blue-table-multi-select-all {
    float: left;
    height: 25px !important;
    width: 50px !important;
    margin-bottom: 5px !important;
    margin-right: 2em !important;
}

.blue-table-multi-select-container {
    z-index: 1;
    position: absolute;
    background-color: white;
    width: 13em;
    margin-top: 1.5em;
    border: 1px solid black;
    display: none;
}

    .blue-table-multi-select-container > ul {
        width: 100%;
    }

        .blue-table-multi-select-container > ul > li {
            color: black;
            display: block;
        }
        .erp-blue-table div.head input[type=checkbox] {
            margin: 3px 0px 0px 0px;
            height: 19px;
            width: 20%;
            padding: 0px;
        }


        /***************** blue table button **********************/
        .erp-blue-table  form > div.body > div > div button {
    height: 22px;
    width: 22px;
    padding-top: 0px;
    padding-left: 3px;
    border: 2px outset rgb(221,221,221) ;
    background-color: buttonface;
    color: buttontext;
}
        /***************** blue table checkbox **********************/