.viewer-status {
    position: relative;
    left: 0px;
    right: 0px;
    height: 0px;
}

.viewer-status-info {
    /* alert-info from Bootstrap */
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
    border-radius: 4px;
    padding: 5px;
    margin: 5px;
}

.viewer-status-error {
    /* alert-danger from Bootstrap */
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
    border-radius: 4px;
    padding: 5px;
    margin: 5px;
}

.viewer-arrow {
    width: 0px;
    height: 0px;
    border-top: 15px solid #eee;
    /* Firefox blends toward this, so use same color */
    border-left: 30px solid rgba(238,238,238,0);
    border-right: 30px solid rgba(238,238,238,0);
    margin: 0px auto;
}

.viewer-operator {
    padding-top: 10px;
    padding-bottom: 10px;
}

.viewer-heatbar {
    text-align: center;
}

.viewer-heatbar canvas {
    vertical-align: middle;
    margin: 0.5em;
}

.viewer-heatbar span {
    vertical-align: middle;
    display: inline-block;
}

table.datatable {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

table.datatable > thead > tr > th {
    text-align: left;
}

/* Format datatable data rows */
tr.datatable-row > td, table.datatable > thead > tr > th {
    padding: .2em;
    padding-right: .5em;
}
tr.datatable-row:hover {
    color: #428bca;
    cursor: pointer;
}

/* For datatable-info rows, move padding to inner div. */
tr.datatable-info > td {
    padding: 0px;
    padding-left: 1em;
}
tr.datatable-info > td > div {
    padding: .2em;
    padding-right: .5em;
}

tr.datatable-more {
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
