.record-wrap {
    width: 100%;
    overflow: auto;
    -border: 1px solid #ccc;
    -border-radius: 5px;
}

table.record {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    line-height: 140%;
    line-height: 1.4;
    -border: 1px solid #bfbfbf;
}
.record td:first-child {
    width: 150px;
    text-align: right;
    padding-right: 40px;
}
@media (min-width:750px)
{
    .record td:first-child {
        width: 20vw;
    }
}

.record td {
    padding: 10px;
    text-align: left;
    text-overflow: ellipsis "..";
    color: #000;
    overflow: hidden;
    max-width: 30%;
}
.record thead td, .record tfoot td {
    background: #666;
    color: #fff;
    font-weight: bold;
    font-size: 11rem;
    height: 56px;
}
.record thead td:first-child, .record tfoot td:first-child {
    border-radius: 5px 0 0 5px;
}
.record thead td:last-child, .record tfoot td:last-child {
    border-radius: 0 5px 5px 0;
}
.record tfoot td:first-child {
    font-weight: normal;
    font-size: 10rem;
}
.record tbody td {
    background: #f4f4f4;
    height: 50px;
}
.record tbody td:first-child {
    color: #888;
    vertical-align: top;
    padding-top: 13px;
}
.record tbody tr:nth-child(odd) td {
    background: #fafafa;;
}

.record-options {
    margin-bottom: 40px;
    word-spacing: 10px;
    text-align: right;
    float: right;
}
.record-options > * {
    word-spacing: normal;
    margin-right: 7px;
}

.message {
    outline: 2px solid red;
}


.record .button, .record .button-primary, .record .button-blank {
    padding: 5px 25px;
}
.record .button-blank {
    color: #fff;
}


.record-bar {
    background: #666;
    color: #fff;
    padding: 10px 20px;
}
.record-top {
    border-bottom: 2px solid var(--color-primary);
}
.record-bottom {
    border-top: 2px solid var(--color-primary);
}
.record-table {
    width: 100%;
    overflow: auto;
}

.record-actions {
    float: right;
}


.record-actions-top {
    position: relative;
}
.record-actions-top .record-actions {
    position: absolute;
    right: 0;
    top: -6px;
}


.table:not(.record) a:not(.button-primary) {
    display: inline-block;
    width: 100%;
    padding: 5px 10px;
    margin: -3px -10px;
    overflow: hidden;
    text-overflow: ellipsis ".."; /* … */
    line-height: 1.6;
    -text-align: center;
}
/*
.table:not(.record) a:not(.button-primary):first-child {
    margin-top: -5px;
}
.table:not(.record) a:not(.button-primary):last-child {
    margin-bottom: -5px;
}
*/
.table a span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis ".."; /* … */
}
.table a:hover, .table a:hover span, .table a:hover img {
    text-decoration: none;
    background: #666;
    color: #fff;
}
.table a:hover img {
    cursor: zoom-in;
}

.after-record {
    text-align: right;
    margin-top: 20px;
    font-size: 10rem;
}

.req {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 900;
    font-size: 13rem;
    line-height: 1;
    vertical-align: middle;
    padding-right: 3px;
}
.record tfoot td:first-child .req {
    color: #fff;
}

.record-field-error {
    margin-top: 10px;
}
.row-error td {
    border: solid red;
    border-width: 1px 0;
}
.row-error td:first-child {
    border-left-width: 1px;
}
.row-error td:last-child {
    border-right-width: 1px;
}


.record ul.children, .records ul.children {
    margin: 0;
    padding: 0;
    list-style: none;
}
.records ul.children {
    margin: -5px 0;
    font-size: 90%;
}
.record ul.children a, .records ul.children a {
    display: inline-block;
    vertical-align: top;
}
.record ul.children a {
    padding: 5px;
    min-width: 150px;
}


.children a {
    text-overflow: ellipsis "..";
    white-space: nowrap;
}