.table-row-responsive {
}

.table-row-responsive > thead > tr > th,
.table-row-responsive > tbody > tr > th,
.table-row-responsive > tfoot > tr > th {
}

.table-row-responsive > thead > tr > th,
.table-row-responsive > tbody > tr > th,
.table-row-responsive > tfoot > tr > th,
.table-row-responsive > thead > tr > td,
.table-row-responsive > tbody > tr > td,
.table-row-responsive > tfoot > tr > td {
    
}

/*320px portrait width of smartphones, */
@media only screen and (min-width: 1px) and (max-width: 321px) {
    .table-row-responsive > thead > tr > td.btn-group-responsive .btn,
    .table-row-responsive > thead > tr > th.btn-group-responsive .btn,
    .table-row-responsive > tbody > tr > td.btn-group-responsive .btn,
    .table-row-responsive > tbody > tr > th.btn-group-responsive .btn,
    .table-row-responsive > tfoot > tr > td.btn-group-responsive .btn,
    .table-row-responsive > tfoot > tr > th.btn-group-responsive .btn {
        display: block;
        width: 100%;
        margin-bottom: 2px;
    }
}

.visible-table-row-responsive-block,
.visible-table-row-responsive-inline,
.visible-table-row-responsive-inline-block {
    display:none !important;
}

 
/*768px portrait width of tablets, screen and (orientation: landscape) */
@media only screen and (min-width: 321px) and (max-width: 769px) {
    .table-row-responsive > thead > tr > td.btn-group-responsive .btn,
    .table-row-responsive > thead > tr > th.btn-group-responsive .btn,
    .table-row-responsive > tbody > tr > td.btn-group-responsive .btn,
    .table-row-responsive > tbody > tr > th.btn-group-responsive .btn,
    .table-row-responsive > tfoot > tr > td.btn-group-responsive .btn,
    .table-row-responsive > tfoot > tr > th.btn-group-responsive .btn {
        display: inline-block;
        width: 32.5%;
    }
}
/*1024px landscape width of tablets */
@media only screen and (min-width: 769px) and (max-width: 1025px) {

}

/* 1680px(and typical netbook resolutions) as well as various desktop monitor resolutions. */
/* 979px is a resolution where even the tables look good */
@media only screen and (max-width: 768px),
       only screen and (min-device-width: 768px) and (max-device-width: 979px) {
    /* Force table to not be like tables anymore */    
    .table-row-responsive {
        display: block;
    }

    .hidden-table-row-responsive {
        display:none !important;
    }

    .visible-table-row-responsive-block {
        display:block !important;
    }

    .visible-table-row-responsive-inline {
        display:inline !important;
    }

    .visible-table-row-responsive-inline-block {
        display:inline-block !important;
    }

    .table-row-responsive > thead,
    .table-row-responsive > tbody,
    .table-row-responsive > tfoot {
        display: block;
    }
    .table-row-responsive > thead > tr,
    .table-row-responsive > tbody > tr,
    .table-row-responsive > tfoot > tr {
        display: block;
    }
    .table-row-responsive.table-striped > tbody > tr:nth-of-type(odd) {
        background-color: transparent;
    }
    .table-row-responsive.table-striped > tbody > tr > td:nth-of-type(2n+1) {
        background-color: #f9f9f9;
    }    
    .table-row-responsive.table-striped > thead > tr, 
    .table-row-responsive.table-striped > tbody > tr, 
    .table-row-responsive.table-striped > tfoot > tr {        
        border-width: 0px;
        border-style: solid;        
        border-color: #ccc;
    }
    .table-row-responsive.table-striped > tbody > tr {        
        border-bottom-width: 4px;  
    }
    .table-row-responsive > thead > tr > th,
    .table-row-responsive > thead > tr > td,
    .table-row-responsive > tbody > tr > th,
    .table-row-responsive > tbody > tr > td,
    .table-row-responsive > tfoot > tr > th,
    .table-row-responsive > tfoot > tr > td {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */    
    .table-row-responsive > thead > tr,
    .table-row-responsive > tfoot > tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .table-row-responsive > thead.responsive > tr ,
    .table-row-responsive > tfoot.responsive > tr {
        position: relative;
        top: 0;
        left: 0;
    }
    .table-row-responsive.table-column-responsive > thead > tr > td,
    .table-row-responsive.table-column-responsive > thead > tr > th,
    .table-row-responsive.table-column-responsive > tbody > tr > td,
    .table-row-responsive.table-column-responsive > tbody > tr > th,
    .table-row-responsive.table-column-responsive > tfoot > tr > td,
    .table-row-responsive.table-column-responsive > tfoot > tr > th {
        /* Behave  like a "row" */        
        position: relative !important;
        padding-left: 45% !important;
    }
    .table-row-responsive.table-column-responsive > thead > tr > td:before,
    .table-row-responsive.table-column-responsive > thead > tr > th:before,
    .table-row-responsive.table-column-responsive > tbody > tr > td:before,
    .table-row-responsive.table-column-responsive > tbody > tr > th:before,
    .table-row-responsive.table-column-responsive > tfoot > tr > td:before,
    .table-row-responsive.table-column-responsive > tfoot > tr > th:before {
        /* Now like a table header */        
        position: absolute;
    }
    .table-row-responsive > thead > tr > td:before,
    .table-row-responsive > thead > tr > th:before,
    .table-row-responsive > tbody > tr > td:before,
    .table-row-responsive > tbody > tr > th:before,
    .table-row-responsive > tfoot > tr > td:before,
    .table-row-responsive > tfoot > tr > th:before {
        /* Top/left values mimic padding */                
        top: 6px;
        left: 6px;
        /*width: 45%;*/
        padding-right: 10px;
        white-space: nowrap;
    }
    .table-row-responsive > thead > tr.none,   
    .table-row-responsive > tbody > tr.none,   
    .table-row-responsive > tfoot > tr.none,   
    .table-row-responsive > thead > tr > td.none,    
    .table-row-responsive > tbody > tr > td.none,
    .table-row-responsive > tfoot > tr > td.none,    
    .table-row-responsive > thead > tr > th.none,    
    .table-row-responsive > tbody > tr > th.none,        
    .table-row-responsive > tfoot > tr > th.none {
        display: none;
    }
    .table-row-responsive > tbody > tr > td,
    .table-row-responsive > tbody > tr > th {
        text-align: right !important;
    }

    .table-row-responsive > tbody > tr > td.text-center,
    .table-row-responsive > tbody > tr > th.text-center {
        text-align: center !important
    }    

    /* Label the data */    
    .table-row-responsive > thead > tr > td:nth-of-type(n):before,
    .table-row-responsive > thead > tr > th:nth-of-type(n):before,
    .table-row-responsive > tbody > tr > td:nth-of-type(n):before,
    .table-row-responsive > tbody > tr > th:nth-of-type(n):before,
    .table-row-responsive > tfoot > tr > td:nth-of-type(n):before,
    .table-row-responsive > tfoot > tr > th:nth-of-type(n):before {
        font-weight: bold;
        float: left;
        content: attr(data-title);
    }
    .table-row-responsive > thead > tr > td.btn-group-responsive,
    .table-row-responsive > thead > tr > th.btn-group-responsive,
    .table-row-responsive > tbody > tr > td.btn-group-responsive,
    .table-row-responsive > tbody > tr > th.btn-group-responsive,
    .table-row-responsive > tfoot > tr > td.btn-group-responsive,
    .table-row-responsive > tfoot > tr > th.btn-group-responsive {
        padding-left: 5px !important;
    }
    .table-row-responsive > thead > tr > td.btn-group-responsive:nth-of-type(n):before,
    .table-row-responsive > thead > tr > th.btn-group-responsive:nth-of-type(n):before,
    .table-row-responsive > tbody > tr > td.btn-group-responsive:nth-of-type(n):before,
    .table-row-responsive > tbody > tr > th.btn-group-responsive:nth-of-type(n):before,
    .table-row-responsive > tfoot > tr > td.btn-group-responsive:nth-of-type(n):before,
    .table-row-responsive > tfoot > tr > th.btn-group-responsive:nth-of-type(n):before {
        position: relative;
        top: auto;
    }
}