.mainpage {
    border: 1px solid silver;
    border-radius: 10px ;
    background: white;
    width: 1300px;
    max-width: 99%;
    padding: 10px;
    margin: 20px auto;
    box-shadow: 5px 10px 18px #888888;
}
.mainhead {
    text-align: center;
    padding: 3px;
    height: 40px;
    font-size: 20px;
    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,
.dataline0,
.dataline1,
.dataline2,
.dataline3,
.dataline4,
.dataline5,
.dataline6,
.dataline7,
.dataline8,
.dataline9 {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1px;
    background-color: white;
    font-size: 13px;
    margin-bottom: 5px;
    border: 1px solid white;
}
.dataline.noborder > .databox,
.dataline0.noborder > .databox,
.dataline1.noborder > .databox,
.dataline2.noborder > .databox,
.dataline3.noborder > .databox,
.dataline4.noborder > .databox,
.dataline5.noborder > .databox,
.dataline6.noborder > .databox,
.dataline7.noborder > .databox,
.dataline8.noborder > .databox,
.dataline9.noborder > .databox {
    border: none !important;
}
.dataline.heading > .databox,
.dataline0.heading > .databox,
.dataline1.heading > .databox,
.dataline2.heading > .databox,
.dataline3.heading > .databox,
.dataline4.heading > .databox,
.dataline5.heading > .databox,
.dataline6.heading > .databox,
.dataline7.heading > .databox,
.dataline8.heading > .databox,
.dataline9.heading > .databox {
    font-weight: bold;
    background: #ededed;
}
.dataline:hover.hover > .databox,
.dataline0:hover.hover > .databox,
.dataline1:hover.hover > .databox,
.dataline2:hover.hover > .databox,
.dataline3:hover.hover > .databox,
.dataline4:hover.hover > .databox,
.dataline5:hover.hover > .databox,
.dataline6:hover.hover > .databox,
.dataline7:hover.hover > .databox,
.dataline8:hover.hover > .databox,
.dataline9:hover.hover > .databox {
    background-color: #ededed !important;
}
.dataline:hover.hover,
.dataline0:hover.hover,
.dataline1:hover.hover,
.dataline2:hover.hover,
.dataline3:hover.hover,
.dataline4:hover.hover,
.dataline5:hover.hover,
.dataline6:hover.hover,
.dataline7:hover.hover,
.dataline8:hover.hover,
.dataline9:hover.hover {
    background-color: #ededed !important;
    border: 1px solid silver;
}
.dataline:hover.pointer > .databox,
.dataline0:hover.pointer > .databox,
.dataline1:hover.pointer > .databox,
.dataline2:hover.pointer > .databox,
.dataline3:hover.pointer > .databox,
.dataline4:hover.pointer > .databox,
.dataline5:hover.pointer > .databox,
.dataline6:hover.pointer > .databox,
.dataline7:hover.pointer > .databox,
.dataline8:hover.pointer > .databox,
.dataline9:hover.pointer > .databox {
    cursor: pointer;
}
.databox {
    border: 1px solid #ededed;
    padding: 2px;
    color: #515151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
.databox.databoxhead {
    font-weight: bold;
    background: #ededed;
}
.databox.databoxfoot {
    font-weight: bold;
    background: #f2f2f2;
}
.buttonline {
    display: grid;
    grid-template-columns: 250px auto 250px;
    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;
}
.buttonline .buttonbox:nth-child(1) {
    text-align: left;
}
.buttonline .buttonbox:nth-child(2) {
    text-align: center;
}
.buttonline .buttonbox:nth-child(3) {
    text-align: right;
}

/*-- 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;
}
.boxwrap,
.datawrap {
    white-space: pre-wrap;
    overflow: auto;
    text-overflow: clip;
}
.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;
}

.sticky-top {
    position: sticky;
    top: 0;
}
.sticky-top-10 {
    position: sticky;
    top: 10px;
}
.sticky-top-20 {
    position: sticky;
    top: 20px;
}
.sticky-top-30 {
    position: sticky;
    top: 30px;
}
.sticky-top-40 {
    position: sticky;
    top: 40px;
}
.sticky-top-50 {
    position: sticky;
    top: 50px;
}
.sticky-top-60 {
    position: sticky;
    top: 60px;
}

/*-- NAMED BLOCKS --*/
.sticky-top-mainhead {
    position: sticky;
    top: 0px;
}
.sticky-top-close {
    position: sticky;
    top: 40px;
}
.sticky-top-colhead {
    position: sticky;
    top: 90px;
}