.data-form {

}

.data-form-flash {
    min-height: 20px;
    position: relative;
}


/* spinning CSS taken from http://www.andreaverlicchi.eu/css-3-only-spinning-loading-animation/#.U5Hm83KZccU */
/* Animation keyframes - you need to add prefixes */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Loading animation container */
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
}

/* Spinning circle (inner circle) */
.loading .maskedCircle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 3px solid black;
}

/* Spinning circle mask */
.loading .mask {
    width: 12px;
    height: 12px;
    overflow: hidden;
}

/* Spinner */
.loading .spinner {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 26px;
    height: 26px;
    animation: spin 1s infinite linear;
}
.data-form .fixed-table {
    width: 400px;
    font-size: small;
}

.data-form .error {
    color: red;
}

.data-form .column-header {
    background-color:#c9dbff;
    font-weight:bold;
    text-align:center;
    vertical-align:top;
}

.data-form .row-even {
    background-color: rgba(242, 250, 255, 0.8);
}

.data-form .row-odd {
    background-color: rgba(226, 236, 255, 0.8);
}

/* styling filtering textboxes */
.data-form th input[type=text] {
    width: 100%;
}
.data-form .filter-textbox {
    width: 120px;
}
.data-form select + input[type=text] {
    width: 40px;
}
.data-form th div {
    width: 100px;
}