/*
        Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
@media
only screen 
and (max-width: 760px), (min-device-width: 760px) 
and (max-device-width: 770px)  {

    /* Force table to not be like tables anymore */
    .tbl_3col	table,.tbl_3col thead,.tbl_3col tbody,.tbl_3col th,.tbl_3col td,.tbl_3col tr {
        display: block;
    } 

    /* Hide table headers (but not display: none;, for accessibility) */
    .tbl_3col thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .tbl_3col tr {
        margin: 0 0 1rem 0;
    }


    .tbl_3col td:nth-child(3),.tbl_3col td:nth-child(6){

        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        margin-top: -45px;
        padding-top: 25px;
        word-wrap: break-word;
    }
    .tbl_3col td:nth-child(2),.tbl_3col td:nth-child(5){

        display:none;
    }
    .tbl_3col td:nth-child(1),.tbl_3col td:nth-child(4) {
        word-wrap: break-word;
        width: 50%;		
    }
    .tbl_3col td:nth-child(1):after, .tbl_3col td:nth-child(4):after {

        position: absolute;        
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;

    }

    .tbl {width: 100%; }
    /* Force table to not be like tables anymore */
    .tbl thead,.tbl tbody,.tbl th,.tbl td,.tbl tr { display: block;  }  
    .tbl tr { border: 0px solid #ccc; }
    /* Behave  like a "row" */

    .tbl > tbody > tr > td{ border: none; position: relative;}

    /* Now like a table header */ /* Top/left values mimic padding */

    .tbl > tbody > tr > td[data-column]{ padding-left: 50%; }
    .tbl > tbody > tr > td[data-column]:before {position: absolute; left: 6px; width: 45%;  padding-right: 10px; white-space: nowrap;content: attr(data-column); text-align: left;word-wrap: break-word;    }

    .tbl thead tr { display: none; }
    .tbl tbody tr td, .tbl tbody tr th {
        border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
        padding: 1px;
    }
    .tbl > thead > tr > th, .tbl > tbody > tr > th, .tbl > tfoot > tr > th, .tbl > thead > tr > td, .tbl > tbody > tr > td, .tbl > tfoot > tr > td {
        border-top: 1px solid #ddd;
        padding: 1px;
    }

}
@media only screen and (min-width: 760px) {
.tbl tbody tr td, .tbl tbody tr th {
    padding: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.tbl > thead > tr > th, .tbl > tbody > tr > th, .tbl > tfoot > tr > th, .tbl > thead > tr > td, .tbl > tbody > tr > td, .tbl > tfoot > tr > td {
    padding: 8px;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
.tbl > thead > tr > th{
    color:#fff;
}
}

.has-error.form-control,
.has-error .form-control {
    border-color: #fc0202;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control > .selectpicker {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}