* { box-sizing: border-box; }
html { min-height: 100vh; background-image: url(fonera1.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; }
html:before { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(255,255,255,0.3); }
body { position: relative; z-index: 2; }
#btnexport {margin: 10px 0 20px;padding: 15px 30px;border: 0;background-color: cornflowerblue;color: #fff;font-size: 15px;font-weight: bold;transition: 0.4s;border-radius: 5px;box-shadow: 5px 5px 5px rgba(0,0,0,0.5);}
#btnexport:hover, #btnexport:focus {text-decoration: none;outline: none;background-color: #3b5a92;box-shadow: 3px 3px 5px rgba(0,0,0,0.5);}
h3 { font-size: 36px; color: #222; margin-bottom: 0; margin-top: 40px; text-shadow: 5px 5px 3px rgba(0,0,0,0.3); }
.rayones { display: none; }
.row2 { text-align: center; }
#tbldemo td, #tbldemo th {padding: 3px 5px;transition: 0.4s;background-color: #fff;}
.table-numbers { text-align: right; }
#tbldemo th, #tbldemo .row2 td { background-color: #3c66b1; color: #fff; border-color: #2d446f; }
#tbldemo {background-color: rgba(255,255,255,0.3);box-shadow: 5px 5px 5px rgba(0,0,0,0.5);width: 100%;min-width: 1100px;}
tr.row1 td { background-color: slateblue; color: #fff; border-color: #312961; }
tr.header td { background-color: #b0c2fd; color: #000; border-color: #566082; }
tr.header:hover td, tr.header.opened td { filter: invert(1); }
tr.rayones td { background-color: lightblue; color: #222; }
tr.rayones:hover td { filter: invert(1); }