.hl-table {
    display: block;
}

.hl-table > .row {
    white-space: nowrap;
    margin: 0px;
    display: flex;
}

.hl-table > .row:not(.header) > .cell {
    display: inline-flex;
}

.hl-table > .row > .cell {
    width: 8em;
    overflow: hidden;
    display: inline-block;
    margin: 0px;
}

.hl-table > .row > .cell.large {
    width: 12em;
}

.hl-table > .row > .cell.hidden, .hl-table .row .hl-control-action.hidden {
    display: none;
}

.hl-table > .row input, .hl-table > .row select, .row span {
    width: 100%;
    height: 2em;

    margin: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;   

    border: solid 1px #333333;
    /* border-radius: 3px; */
    background-color: #444444;
    color: #ffffff;
    padding: .25em;
    display: inline-block;
    cursor: default;
}
.hl-table > .row:nth-child(even) input, .hl-table > .row:nth-child(even) select, .hl-table > .row:nth-child(even) span {
    background-color: #554e43;
}
.hl-table > .row input.active:hover, .hl-table > .row select.active:hover {
    border: solid 1px #555555;
    background-color: #555555;
}

.hl-table .cell .button {
    text-decoration: none;
    font-size: .75em;
    padding: 0.25em 1em
}

.hl-table .row .icon {
    padding: .15em .15em;
    margin: 0px .25em;
    cursor: pointer;
    border-radius: .25em;
    transition: .25s;
    transition-timing-function: ease-in-out;
    font-weight: 700;
    border: 1px solid #3d3d3c;
    color: #640000;
    background-color: #dedddb;
    display: inline-flex;
}

.hl-table .row .icon:hover {
    background-color: #636363;
    color: #eee;
}

.hl-table .row .hl-control-action-cell {
    white-space: nowrap;
    display: inline-flex;
    margin: 0px;
}

.hl-table .row .hl-control-action {
    padding: .15em .15em;
    margin: 0px .25em;
    cursor: pointer;
    border-radius: .25em;
    transition: .25s;
    transition-timing-function: ease-in-out;
    border: 1px solid #3d3d3c;
    background-color: #636363;
    color: #eee;
    display: inline-flex;
    font-size: .85em;
}

.hl-table .row .hl-control-action.disabled {
    background-color: #333333;
    color: #636363;
    cursor: default;
}

.hl-table .row .hl-control-action:not(.disabled):hover {
    background-color: #eee;
    color: #636363;
}

.hl-table .row .hl-control-action i {
    padding: .15em .15em;
    font-weight: 700;
    /* color: #640000;
    background-color: #dedddb; */
}