.table-holder {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    height: 100%;
}



.datatable_mobilescroll_wrapper.scroll-shadow{
    position:relative;
}
.datatable_mobilescroll_wrapper.scroll-shadow:after{
    content:"";
    position:absolute;
    right:0;
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 200%, rgba(0,0,0,0.75) 20%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(200%,rgba(0,0,0,0.75)), color-stop(20%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 200%,rgba(0,0,0,0.75) 20%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 200%,rgba(0,0,0,0.75) 20%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 200%,rgba(0,0,0,0.75) 20%); /* IE10+ */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 200%,rgba(0,0,0,0.75) 20%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
    width: 5%;
    top:0;
    bottom:0;
}
.datatable_mobilescroll {
    z-index: 0;
}
.datatable_mobilescroll_wrapper{
    height: 100%;
    width: 100%;
}



.datatable_mobilescroll_wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.datatable_mobilescroll_wrapper::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

@media(min-width: 1220px){
    .datatable_mobilescroll_wrapper {
        width: 100%;
        position: relative;
        display: block;
        white-space: normal !important; 
        overflow-x: visible !important;
    }
    .datatable_mobilescroll {
        display: block;
        position: relative;
        width: 100%;
        border: 1px solid #d3d3d3;

    }
}
@media (min-device-width: 980px) and (min-width: 980px), (max-device-width: 1024px) and (min-width: 1024px) and (orientation: landscape){
    .datatable_mobilescroll_wrapper {
        width: 100%;
        position: relative;
        display: block;
        /*white-space: nowrap;*/
        overflow-x: visible !important;
    }
    .datatable_mobilescroll {
        display: block;
        position: relative;
        width: 100% ;
        border: 1px solid #d3d3d3;

    }
}

.datatable_mobilescroll_wrapper {
    width: 100%;
    box-sizing: content-box;
    box-sizing: border-box;
    box-sizing: inherit;
    box-sizing: initial;
    box-sizing: unset;
    position: relative;
    display: block;
    /*white-space: nowrap;*/
    overflow-x: visible !important;
}


/* iPads (landscape) ----------- */
@media only screen and (max-width : 768px)  {

    .datatable_mobilescroll_wrapper {
        width: 100%;
        box-sizing: content-box;
        box-sizing: border-box;
        box-sizing: inherit;
        box-sizing: initial;
        box-sizing: unset;
        position: relative;
        display: block;
        /*white-space: nowrap;*/
        overflow-x: scroll !important;
    }

    .datatable_mobilescroll {
        display: block;
        position: relative;
        width: 150% !important;
        border: 1px solid #d3d3d3;

    }
}
.datatable_mobilescroll_row{

}
.datatable_mobilescroll td {
    border-color: #7a792f;
    padding: 0px;
    border-spacing: 0px;
}
.datatable_mobilescroll_data_1{
    width: 10%;
}
.datatable_mobilescroll_data_2{
    width: 20%;

}
.datatable_mobilescroll_data_3{
    width: 30%;

}




/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .datatable_mobilescroll_wrapper {
        width: 100%;
        box-sizing: content-box;
        box-sizing: border-box;
        box-sizing: inherit;
        box-sizing: initial;
        box-sizing: unset;
        position: relative;
        display: block;
        /*white-space: nowrap;*/
        overflow-x: scroll ;
    }
    .datatable_mobilescroll{
        display: block;
        overflow: visible !important;
        position: relative;
        width: 150%;
        border: 1px solid #d3d3d3;

    }
    .datatable_mobilescroll td {
        border-color: #7a792f;
        border: 1px solid #7a792f !important;
        padding: 0px;
        border-spacing: 0px;
    }
}

/*!* Smartphones (landscape) ----------- *!*/
/*@media only screen and (min-width : 321px) {*/
    /*.datatable_mobilescroll_wrapper {*/
        /*width: 100%;*/
        /*box-sizing: content-box;*/
        /*box-sizing: border-box;*/
        /*box-sizing: inherit;*/
        /*box-sizing: initial;*/
        /*box-sizing: unset;*/
        /*position: relative;*/
        /*display: block;*/
        /*white-space: nowrap;*/
        /*overflow-x: scroll;*/
    /*}*/
    /*.datatable_mobilescroll{*/
        /*display: block;*/
        /*overflow: visible;*/
        /*position: relative;*/
        /*width: 100%;*/
        /*border: 1px solid #d3d3d3;*/

    /*}*/
    /*.datatable_mobilescroll td {*/
        /*border-color: #7a792f;*/
        /*border: 1px solid #7a792f !important;*/
        /*padding: 0px;*/
        /*border-spacing: 0px;*/
    /*}*/
/*}*/

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    .datatable_mobilescroll_wrapper {
        width: 100%;
        box-sizing: content-box;
        box-sizing: border-box;
        box-sizing: inherit;
        box-sizing: initial;
        box-sizing: unset;
        position: relative;
        display: block;
        /*white-space: nowrap;*/
        overflow-x: scroll;
    }
    .datatable_mobilescroll{
        display: block;
        overflow: visible;
        position: relative;
        width: 150% !important;
        border: 1px solid #d3d3d3;

    }
    .datatable_mobilescroll td {
        border-color: #7a792f;
        border: 1px solid #7a792f !important;
        padding: 0px;
        border-spacing: 0px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .datatable_mobilescroll_wrapper {
        width: 100%;
        box-sizing: content-box;
        box-sizing: border-box;
        box-sizing: inherit;
        box-sizing: initial;
        box-sizing: unset;
        position: relative;
        display: block;
        /*white-space: nowrap;*/
        overflow-x: scroll;
    }
    .datatable_mobilescroll{
        display: block;
        overflow: visible !important;
        position: relative;
        width: 150%;
        border: 1px solid #d3d3d3;

    }
    .datatable_mobilescroll td {
        border-color: #7a792f;
        border: 1px solid #7a792f !important;
        padding: 0px;
        border-spacing: 0px;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .datatable_mobilescroll_wrapper {
        width: 100%;
        box-sizing: content-box;
        box-sizing: border-box;
        box-sizing: inherit;
        box-sizing: initial;
        box-sizing: unset;
        position: relative;
        display: block;
        /*white-space: nowrap;*/
        overflow-x: scroll;
    }

    .datatable_mobilescroll{
        display: block;
        overflow: visible !important;
        position: relative;
        width: 100%;
        border: 1px solid #d3d3d3;

    }
    .datatable_mobilescroll td {
        border-color: #7a792f;
        border: 1px solid #7a792f !important;
        padding: 0px;
        border-spacing: 0px;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .datatable_mobilescroll_wrapper {
        width: 100%;
        box-sizing: content-box;
        box-sizing: border-box;
        box-sizing: inherit;
        box-sizing: initial;
        box-sizing: unset;
        position: relative;
        display: block;
        /*white-space: nowrap;*/
        overflow-x: scroll;
    }
    .datatable_mobilescroll{
        position: relative;
        width: 150%;
        border: 1px solid #d3d3d3;

    }
    .datatable_mobilescroll td {
        border: 1px solid #7a792f !important;
        border-color: #7a792f;
        padding: 0px;
        border-spacing: 0px;
    }

    /* Landscape */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {
        .datatable_mobilescroll{
            position: relative;
            width: 150%;
            border: 1px solid #d3d3d3;

        }

    }

    /* Landscape */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {
        .datatable_mobilescroll_wrapper {
            width: 100%;
            box-sizing: content-box;
            box-sizing: border-box;
            box-sizing: inherit;
            box-sizing: initial;
            box-sizing: unset;
            position: relative;
            display: block;
            /*white-space: nowrap;*/
            overflow-x: scroll;
        }
        .datatable_mobilescroll{
            position: relative;
            width: 150%;
            border: 1px solid #d3d3d3;

        }
        .datatable_mobilescroll td {
            border: 1px solid #7a792f !important;
            border-color: #7a792f;
            padding: 0px;
            border-spacing: 0px;
        }

    }
}

/* iPhone Portrait + Landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px) 
and (-webkit-min-device-pixel-ratio: 2) {
    .datatable_mobilescroll_wrapper.scroll-shadow{
        background-color: transparent;
        -webkit-box-shadow: inset -27px 0px 40px -25px rgba(0,0,0,0.75);
        -moz-box-shadow: inset -27px 0px 40px -25px rgba(0,0,0,0.75);
        box-shadow: inset -27px 0px 40px -25px rgba(0,0,0,0.75);
    }
    .datatable_mobilescroll_wrapper.scroll-shadow > table{
        z-index:-1;

    }
}

/* iPad Portrait + Landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .datatable_mobilescroll_wrapper.scroll-shadow{
        background-color: transparent;
        -webkit-box-shadow: inset -27px 0px 40px -25px rgba(0,0,0,0.75);
        -moz-box-shadow: inset -27px 0px 40px -25px rgba(0,0,0,0.75);
        box-shadow: inset -27px 0px 40px -25px rgba(0,0,0,0.75);
    }
    .datatable_mobilescroll_wrapper.scroll-shadow > table{
        z-index:-1;
    }
}