.date-layout {
    position: fixed;
    top: 50px;
    left: 0px;
    bottom: 0px;
    width: 238px;
    background-color: #f9f9f9;
    border-right: 2px solid steelblue;
}

.date-list {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    /* background-color: violet; */
    padding: 10px 0px;
    /* border-right: 2px solid steelblue; */
}

.date-item {
    position: relative;
    cursor: pointer;
}

.date-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.date-item.selected {
    background-color: rgb(214, 240, 248);
}

.date-text {
    padding: 0px 20px;
    line-height: 36px;
    font-size: 16px;
}

.table-layout {
    position: fixed;
    top: 50px;
    left: 240px;
    right: 400px;
    bottom: 0px;
    padding: 10px;
}

.table-bar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 0px;
}

.table-bar-left button {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: black;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    height: 30px;
    padding: 0px 20px;
    background: linear-gradient(to bottom, white, #f7f7f7);
}

.table-bar-left button:hover {
    border-color: #bfbfbf;
}

.table-bar-left button:active {
    background: linear-gradient(to bottom, #f7f7f7, #efefef);
    border-color: #bfbfbf;
}

.table-bar-left button:nth-child(1n+2) {
    margin-left: 10px;
}

.table {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding-top: 36px;
    overflow: auto;
    font-size: 0px;
    padding: 0px;
    table-layout: fixed;
}

.table table {
    width: 100%;
}

.table thead {}

.table th {
    padding: 5px 5px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    top: 0;
    position: sticky;
    background-color: #efefef;
}

.table td {
    padding: 5px 5px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    text-align: center;
}

.table [no] {
    width: 6%;
}

.table [scan] {
    width: 10%;
}

.table [prd] {
    /* width: 10%; */
}

.table [sn] {}

.table [iv] {
    width: 8%;
}

.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.table tbody tr.selected {
    background-color: rgb(214, 240, 248);
}

.content-layout {
    position: fixed;
    top: 50px;
    right: 0px;
    bottom: 0px;
    width: 400px;
    border-left: 2px solid steelblue;
}

.content-iv {
    position: absolute;
    top: 10px;
    left: 0px;
    right: 0px;
    height: 270px;
}

.content-fields {
    position: absolute;
    top: 280px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    padding: 20px;
    border-top: 2px solid steelblue;
    background-color: #f9f9f9;
}

.content-fields-title {
    margin-bottom: 20px;
}

.content-fields-title span {
    display: inline-block;
    color: steelblue;
    font-size: 16px;
}

.content-field {
    margin-top: 10px;
}

.content-field-label {
    font-size: 12px;
    color: gray;
}

.content-field-value {
    margin-top: 4px;
    font-size: 16px;
    padding: 5px 10px;
    background-color: white;
}