html, body { font-family: Helvetica, Arial, sans-serif; margin: 0; }

.italic { font-style: italic; }

.container { max-width: 640px; margin: auto; }
.container { position: relative; }

button,
.button,
.select label { border-radius: 10px; border: 0 none; box-sizing: border-box; background-color: #00aeff; display: block; width: auto; padding: 10px; font-weight: bold; text-align: center; text-decoration: none; }
.low,
.container .low { background-color: rgba(0, 255, 132, 0.5); }
.med,
.container .med { background-color: rgba(255, 252, 0, 0.5); }
.hi,
.container .hi { background-color: rgba(255, 48, 0, 0.5); }

.grid-3-col { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-3-col .col { grid-column: auto; }

#logger { background-color: #eee; box-shadow: 0 -10px 30px rgba(0,0,0,0.2); padding-top: 5px; position: fixed; bottom: 0; left: 0; width: 100%; }
#logger .note { padding: 5px; }
#logger textarea { border-radius: 5px; width: 100%; height: 100px; box-sizing: border-box; }
#logger button { color: #ffffff; margin: 10px 5px 5px; width: 100%; width: calc( 100% - 10px ); height: 100px; font-size: 3em; opacity: 0.3; }
#logger .loaded button {  opacity: 1; }
.select label { height: 50px; position: relative; margin: 5px; }
.select label span { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; }
.select input[type="radio"] { display: none; }
.select input[type="radio"]:checked+label { border: 4px solid #00aeff; }
#logger .details p { font-size: 0.7em; font-style: italic; text-align: center; margin: 0.1em 0; }

#display { height: 300px; }
#display > section { overflow: scroll; max-height: 100%; }

.btn-delete { background-color: rgb(255, 48, 0); color: #ffffff; }

#btn-save { background-color: #ddd; opacity: 0.5; padding: 5px; font-size: 0.6em; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); color: #000; position: fixed; top: 5px; right: 5px; }

/* Sections */

#display-logs ul { list-style: none; margin: 0; padding: 0; }
#display-logs ul li { padding: 5px; border-bottom: 1px solid rgba(0,0,0,0.2) }
#display-logs ul li:last-child { border-bottom: 0 none; }
#display-logs .time { font-size: 1.1em; font-weight: bold; }
#display-logs .level {}
#display-logs .note { font-size: 0.8em; }
#display-logs .level,
#display-logs .loc,
#display-logs .note,
#display-logs .btn-delete { display: none; }
#display-logs .open .level,
#display-logs .open .loc,
#display-logs .open .note,
#display-logs .open .btn-delete { display: block; }