.listUpDown > .vList {
    display:grid;
    grid-template:
            "topList" 60px
            "dataList" 1fr;
    height: 100%;
    width: 100%;
    border: 1px solid #484756;
}

.dataLine{
    height: calc(100vh - 83px - 83px - 60px);
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #484756;
}

#listPackCode .stampCode,
#listPackCode .stampLink {
    font-size: 20px;
    border-bottom: 1px solid #484756;
    align-items: center;
    display: grid;
    grid-template-areas: "titleCode smallBtn";
    grid-template-columns: 1fr 61px;
}

#listPackCode .packLayer {
    font-size: 20px;
    background-color: #b1b1b6;;
    border-bottom: 1px solid #484756;
    align-items: center;
    display: grid;
    grid-template-areas: "titleCode smallBtn";
    grid-template-columns: 1fr 61px;
}

#listStampLink .stampLink {
    #padding: 9px 8px;
    font-size: 20px;
    border-bottom: 1px solid #484756;
    align-items: center;
    display: grid;
    grid-template-areas:
        "aggregationStamp smallBtn"
        "stamp smallBtn";
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 61px;
}

#listStampLink .stampLink.add,
#listStampLink .stampLink.delete {
    display: grid;
    grid-template-areas:
        "delete aggregationStamp smallBtn"
        "delete stamp smallBtn";
    grid-template-rows: auto auto;
    grid-template-columns: 20px 1fr 61px;

}

.stampCode.delete:before,
.stampCode.add:before,
.stampLink.delete:before,
.stampLink.add:before {
    grid-area: delete;
}

.stampLink .aggregationStamp {
    grid-area: aggregationStamp;
}

.stampLink .stamp {
    grid-area: stamp;
}

.stampLink .smallBtn {
    grid-area: smallBtn;
}

.stampLink .aggregationStamp,
.stampLink .stamp {
    padding-left: 6px;
    padding-right: 6px;
    align-items: center;
    display: inline-flex;
    word-break: break-word;
    border-right: 1px solid #484756;
}

.stamp {

}

.stamp:hover {
    cursor: pointer;
}

.dataLine .titleCode {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px 0 6px;
    height: 61px;
    display: inline-flex;
    align-items: center;
}

.smallBtn {
    width: 60px;
    background-color: #2f2f38;
    color: white;
    font-size: 20px;
    font-family: 'Roboto-Regular', sans-serif;
    border-color: #484756;
    height: 48px;
}

.smallBtn:hover,
.smallBtn:active,
.smallBtn:focus,
.smallBtn:visited{
    color: white
}

.stampLink.add:before {
    content: "\e080";
    color: forestgreen;
    font-family: 'Glyphicons Halflings';
}

.stampCode.delete:before,
.stampLink.delete:before {
    content: "\e079";
    color: firebrick;
    font-family: 'Glyphicons Halflings';
}

.stampCode.delete,
.stampLink.delete {
    color: #b1b1b6;
}

.stampLink.state_DEFECTIVE {
    color: #CC0000;
}

#listPackCode .stampCode.add,
#listPackCode .stampCode.delete,
#listPackCode .stampLink.add,
#listPackCode .stampLink.delete {
    display: grid;
    grid-template-areas: "delete titleCode smallBtn";
    grid-template-columns: 25px 1fr 61px;
}

.stampLink.find {
    border: 2px solid greenyellow;
    border-radius: 6px;
}

.topList {
    padding: 6px;
    color: #b1b1b6;
    font-size: 20px;
}

.packEdit {
    display: grid;
    grid-template: "packInfo listUpDown" auto
    "packBtn listUpDown" 313px / 1fr 2fr;
}

.packEdit .packCode {
    word-break: break-all;
}

#manualview .packEdit {
    display: grid !important;
    grid-template:
    "packCounter listUpDown" 122px
    "packCol listUpDown" auto / 1fr 2fr !important;
}

#manualview .packEdit .packCol {
    display: grid;
    grid-template:
    "packInfo" auto
    "packBtn" auto / 1fr;
}

#page-packEdit .packEdit {
    display: grid;
    grid-template: "packInfo listUpDown" auto
    "packBtn listUpDown" 313px / 1fr 2fr;
}

.listUpDown {
    grid-area: listUpDown;
}

.packBtn {
    padding: 0 15px 0 15px;
}

.packBtn button {
    width: 100%;
}

.stampElement {
    /*width: 500px;*/
    word-break: break-word;
}