.mainpage {
    border: 1px solid silver;
    border-radius: 10px ;
    background: white;
    width: 1300px;
    max-width: 99%;
    padding: 10px;
    margin: 20px auto;
}
.mainhead {
    text-align: center;
    padding: 3px;
    height: 40px;
    font-size: 20px;
    font-family :arial ;
    color: #404040;
    width: 100%;
    background: white;
    position: sticky;
    top: 0px;
}

.subhead {
    text-align: center;
    padding: 3px;
    height: 31px;
    font-size: 18px;
    color: #404040;
    width: 100%;
}
.dataline
{
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1px;
    background-color: white;
    font-size: 13px;
    margin-bottom: 5px;
}
.dataline.noborder  > .databox
}
    border: none !important;
}
.dataline:hover.hover  > .databox
{
    background-color: #f2f2f2 !important;
}
.databox {
    border: 1px solid #ededed;
    padding: 2px;
    color: #515151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
.wrapbox {
    border: 1px solid #ededed;
    padding: 2px;
    color: #515151;
    font-size: 13px;
}
.databox.databoxhead {
    font-weight: bold;
    background: #ededed;
}
.databox.databoxfoot {
    font-weight: bold;
    background: #f2f2f2;
}
.buttonline {
    display: grid;
    grid-template-columns: 150px auto 150px;
    grid-gap: 1px;
    background-color: white;
    height: 50px;
    font-size: 13px;
    margin-bottom: 5px;
}
.buttonbox {
    padding: 2px;
    color: #515151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

/*-- RESPONSIVE --*/
.panelline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    grid-gap: 10px;
    margin-bottom: 20px;
}
.panelbox {
    background-color: #b3d9ff;
    border: 1px solid #668cff;
    box-shadow: 2px 4px 9px #888888;
}
.panelbox-2 {
    background-color: #b3d9ff;
    border: 1px solid #668cff;
    box-shadow: 2px 4px 9px #888888;
    grid-column-start: 1;
    grid-column-end: 3;
}
/*-- ---------- --*/

/*-- MENU --*/
.menuline {
    display: grid;
    grid-template-columns: 300px auto;
    grid-gap: 1px;
    font-size: 13px;
    width: 90%;
    margin: 0 auto 5px auto;
}
.menubox {
    padding: 2px;
    color: #515151;
    font-size: 13px;
}
.menubox.menuboxprompt {
    border-bottom: 1px solid #ededed;
}
.menusubhead {
    padding: 3px 25px;
    margin: 15px 0;
    font-size: 18px;
    color: #404040;
    border: 1px solid #99bbff;
    border-radius: 10px;
    background: #e6eeff;
    width: 100%;
    height: 31px;
}
/*-- ---------- --*/

.spacer {
    height: 10px;
    width: 100%;
}
.boxleft,
.dataleft {
    text-align: left;
}
.boxtotal {
    font-weight : bold;
}
.boxright,
.dataright {
    text-align: right;
}
.boxcenter,
.datacenter {
    text-align: center;
}
.blocktitle {
    background: #b3b3ff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    padding: 3px;
    height: 31px;
    font-size: 13px;
    color: #404040;
    width: 100%;
    font-weight: bold;
}