/* Daten Tabelle
 ======================================================= */

.data-table,
.data-table-nowidth {
    background-color: #fff;
    border: 1px solid #dedede;
    border-collapse: collapse;
    clear: both;
    float: left;
    font-size: 12px;
    margin-bottom: 20px;
    position: relative;
    text-align: left;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.data-table__noborder {
    border: 0;
}

.data-table {
    width: 100%;
}

.data-table th,
.data-table-no-width th {
    color: #003399;
    font-size: 14px;
    font-weight: normal;
    padding: 10px 8px;
    text-align: left;
}

.data-table th .description {
    font-size: 12px;
}

.data-table tr,
.data-table tbody,
.data-table thead,
.data-table-no-width tr,
.data-table-no-width tbody,
.data-table-no-width thead {
    clear: both;
    width: 100%;
}

.data-table-toggle {
    float: left;
    text-align: center;
    width: 34px;
}

.data-table-no-toggle th {
    cursor: default !important;
}

.data-table-no-toggle .data-table-toggle {
    display: none;
}

.data-table-text {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 34px);
}

.data-table th h1,
.data-table-no-width th h1 {
    color: #003399;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px;
    padding: 0;
}

.data-table td,
.data-table-nowidth td {
    color: #666699;
    padding: 8px;
    vertical-align: top;
}

.data-table .odd,
.data-table-nowidth .odd {
    background: none repeat scroll 0 0 #E8EDFF;
}

.data-table .data,
.data-table-nowidth .data {
    color: #333;
}

.data-table td.label-text {
    width: 160px;
}

.data-table td label {
    float: left;
    width: 150px;
}

.data-table td label.field-container {
    width: 100%;
}

.data-table .qui-users-and-groups label,
.data-table td label.hasCheckbox {
    width: 100% !important;
}

.data-table td p {
    clear: both;
    float: left;
}

.data-table input.int,
.data-table-nowidth input.int {
    width: 80px;
}

.data-table-closed .qui-button {
    display: none;
}

/** flexbox tables */

.data-table-flexbox thead tr {
    /*display: block;*/
}

.data-table-flexbox thead,
.data-table-flexbox th {
    background-color: #dedede;
    color: #666;
    /*float: left;*/
    width: 100%;
}

.data-table-flexbox tbody,
.data-table-flexbox thead {
    display: table;
}

.data-table-flexbox .odd {
    background: none;
}

.data-table-flexbox .qui-elements-select {
    flex: 1;
    width: inherit;
}

.data-table-flexbox .field-container-field > .qui-elements-select {
    flex: none;
    width: 100%;
}

.field-container > .qui-elements-select {
    border: 1px solid #dedede;
    border-left: 0;
    flex: 1;
    float: none;
    max-width: none;
    padding: 0;
}

.field-container > .qui-elements-select > button {
    border-radius: 0;
    border-left: 1px solid #dedede;
    box-shadow: none;
    height: 100%;
}

.field-container > .qui-elements-select-multiple > button {
    height: auto;
}

.field-container .qui-elements-select-list {
    border: none;
    border-bottom: 1px solid #dedede;
}

.field-container .qui-elements-select-list-search {
    border: none;
}

.field-container .qui-elements-select-multiple .qui-elements-select-list-search {
    border-top: 1px solid #dedede;
}

.field-container-item-help {
    cursor: help;
    display: inline-block;
    float: right;
}

.field-container-item-help:before {
    font: normal normal 300 14px/1 FontAwesome;
    content: "\f128";
}