body {
 font-size:.8rem;
 background-color:#eee
}

html, body {
 height:100%;
 margin:0;
 padding:0
}

header, .main {
 position:absolute;
 width:100%
}

header {
 position:fixed;
 z-index:2000;
 float:left;
 height:5rem;
 transition:box-shadow .2s;
 box-shadow:0 2px 5px rgba(0,0,0,.26);
 color:white;
 background:deepskyblue
}

footer {
 font-size:.8rem;
 overflow:hidden;
 text-align:right;
 white-space:nowrap;
 color:#aaa;
 text-shadow:0 0 2px #bbb;
 padding:1rem
}

footer > a {
 text-decoration:none;
 color:#aaa
}

.main {
 position:relative;
 top:5rem;
 bottom:0;
 overflow-y:auto;
 height:calc(100% - 5rem)
}

#menu {
 position:fixed;
 top:5rem;
 float:left;
 overflow-x:auto;
 width:calc(0% + 15rem);
 height:calc(100% - 4rem);
 background-color:white
}

.main-right {
 float:right;
 width:calc(100% - 15rem);
 height:calc(100% - 1rem);
 background-color:#eee
}

header > .fill > .container {
 margin-top:.5rem;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 padding:.5rem 1rem 0
}

header > .fill > .container > #logo {
 margin:0 3.5rem 0 1.5rem
}

header > .fill > .container > #logo > img {
 width: 3rem;
 margin-top:-.1rem
}

header > .fill > .container > #brand {
 font-size:1.4rem;
 position:absolute;
 cursor:default;
 vertical-align:text-bottom;
 text-decoration:none;
 color:white;
 padding-top: 0.5rem;
}

.nav {
 font-size: 1.15rem;
 margin-top: 0.5rem;
 padding: 0;
}

.slide {
 list-style-type: none;
 padding: 0;
 user-select: none;
 display: none;
}

.category {
 padding: 0.4rem 1rem;
 cursor: pointer;
}

.slide-menu {
 padding: 0.4rem 2rem;
 list-style-type: none;
 cursor: pointer;
 user-select: none;
}

.menu-item {
 padding: 0.2rem;
 list-style-type: none;
 cursor: pointer;
 user-select: none;
}

.menu-item:hover, .category:hover {
 background-color: lightgray;
}

#report-name {
 padding: 1rem;
 font-size: 2rem;
}

.selector {
 display: inline-block;
 cursor: pointer;
 font-size: 1rem;
 margin: 0 0.5rem 0 0.5rem;
 padding: 0.5rem 2rem 0.5rem 2rem;
}

.selector:hover {
 background-color: lightgray;
}

.report-block, #report-dates, #filter, #page-selector {
 margin: 0 1rem 0 1rem;
 background-color: white;
}

.report-block {
 min-height: 50%;
 padding: 0.2rem 1rem 1rem 1rem;
}

#report-dates {
 font-size: 1rem;
 padding: 0.5rem 1rem 0.5rem 1rem;
 display: none;
}

#report-button {
 float: right;
}

#filter {
 display: none;
 margin: 0;
 padding: 0 2rem 0 2rem;
}

.fllter-button {
 padding-right: 2rem;
}

#report {
 width: 100%;
}

#report th {
 font-size: 1.4rem
}

#report tr {
 font-size: 1rem
}

#report tr:nth-child(2n+1) {
 background-color: lightgray;
}

#report tr:nth-child(2n) {
 background-color: white;
}

#report-graph {
 display: none;
 height: calc(100% - 10rem);
}

.numeric, .clickable-numeric {
 text-align: right; 
}

.total td {
 font-size: 1.2rem;
 padding: 0.4rem 0 0.4rem 2rem;
}

.clickable, .clickable-numeric {
 cursor: pointer;
 text-decoration: underline;
}