table.reactive-table {
    width: 100%;
}

.reactive-table th {
    vertical-align: top;
    text-align:left;
    padding: 0;
    font-weight: bold;
}

.reactive-table td {
    vertical-align: top;
    text-align:left;
    padding: 0;
    padding-right: 10px;
}

.reactive-table tr { border-bottom: 1px solid #999999; }
.alert-success .reactive-table tr { border-bottom: 1px solid #9BCC9C; }
.alert-info .reactive-table tr { border-bottom: 1px solid #98C6DC; }
.alert-warning .reactive-table tr { border-bottom: 1px solid #DFCBAA; }
.alert-error .reactive-table tr,.alert-danger .reactive-table tr { border-bottom: 1px solid #DCA6A5; }

.reactive-table tr {
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.reactive-table tr td {
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.reactive-table tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.reactive-table tr:last-child td {
    padding-bottom: 0;
    margin-bottom: 0;
}

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

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

.collapse-reactive-tables .reactive-table td { 
    /* Behave  like a "row" */
    border: none;
    position: relative;
    /* Create space for the before */
    padding-left: 50%;
    /* Padding to match below */
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    white-space: normal;
}

.collapse-reactive-tables .reactive-table td:before { 
    /* Label the data */
    font-weight: bold;
    content: attr(data-title) ':';
    position: absolute;
    /* Space allocated from above */
    width: 50%;
    left: 0;
    /* Top must match padding above */
    top: 0;
    /* Padding for a separation between label and value */
    padding-right: 10px;
}

.collapse-reactive-tables .reactive-table tbody td.invisible {
    visibility: hidden;
    display: none!important;
}