body {
  background-color: black;
  display: none;
}

body #menu .list-group-item {
  background-color: white;
  color: #115c11;
  border-color: #555e2e;
}

body.day {
  background-color: white;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-color: blue;
}

body.discourage {
  background-color: darkred;
}

body.day #menu .list-group-item {
  color: #8aff5c;
  border-color: #1f85e2;
  background: linear-gradient(to right, rgba(217, 228, 221, 0.3), rgba(217, 228, 221, 0));
}

body.night {
  margin: 0;
  padding: 0;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-color: darkslategrey;
}

body.night #menu .list-group-item {
  color: #38d466;
  border-color: #0e701e;
  // background-color: #333333;
  background: none;
}

body.night .imgWrapper img {
  border-radius: 10px;
  padding: 2px;
  // background-color: #ffffff;
  background: none;
}

#menu .keyCode {
  font-weight: bold;
  width: 20px;
  height: 20px;
  text-align: center;
  border-style: outset;
  border-width: 1px;
  margin: -5px;
  border-radius: 10px;
  color: lightgrey;
  padding: 0px;
  opacity: 0.5;
  padding-top: 1px;
  font-size: 8pt;
}

body.day #menu .keyCode {
  color: #d7ff94;
  opacity: 0.7;
}

body.night #menu .keyCode {
  color: #dcff59;
}

#menu {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px;
  min-width: 30%;
}

#menu #searchControl {
  max-height: 74px;
}

#menu #searchControl>span,
#menu #searchControl>input,
#menu #searchControl>button {
  max-height: 74px;
}

#menu #searchControl img {
  max-height: 48px;
}

#menu #searchControl button {
  font-size: 4em;
}

#menu #searchControl>button>img {
  margin-top: -50px;
}

#menu .menuLabel {
  font-size: 16pt;
  font-weight: bold;
  white-space: nowrap;
  padding-right: 30px;
}

#menu .list-group-item:first-child {
  border-top-width: 4px;
  border-top-left-radius: 10px;
  // border-top-right-radius: 20px;
}

#menu .list-group-item:last-child {
  // border-bottom-left-radius: 20px;
  // border-bottom-right-radius: 20px;
  border-bottom: none;
}

#menu .list-group-item {
  border-width: 4px;
  // border-left-width: 16px;
  // border-right-width: 16px;
  border-top-width: 0px;
  padding: 5px;
  padding-left: 0px;
  padding-right: 10px;
  border-right: none;
}

#menu .list-group-item .imgWrapper {
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 6px;
  border-color: mediumslateblue;
  background-color: white;
}

#menu .list-group-item .imgWrapper img {
  max-height: 20px;
  max-width: 20px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 7px;
}

#gallery img {
  max-height: 32px;
  display: none;
}

#digraph {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 25%;
  height: 50%;
  z-index: 1;
}

#path {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 20px;
  display: none;
}

#breadcrumbs {
  position: absolute;
  top: 0px;
  right: 60px;
  font-size: 98px;
  font-weight: bold;
  font-family: 'Digital-7 Mono', monospace;
  opacity: 0.7;
}

body.day .breadcrumb-item                            { color: dodgerblue; }
body.day .breadcrumb-item+.breadcrumb-item::before   { content: "/"; color: palevioletred; }

body.night .breadcrumb-item                          { color: #bd0b8a; }
body.night .breadcrumb-item+.breadcrumb-item::before   { content: "/"; color: #980505; }

.bookmark {
  font-family: courier;
  opacity: 0.4;
}

@media (max-width: 600px) {
  body.night #menu .menuLabel {
    color: red;
    font-size: 26pt;
  }
}

.mobile #menu {
  // left: 50%;
  // transform: translate(-50%, -50%);
  min-width: 90%;
}

.mobile #menu .list-group-item .imgWrapper {
  width: 120px;
  height: 120px;
  padding: 10px;
  border-radius: 20px;
}

.mobile #menu .list-group-item .imgWrapper img {
  height: 80px;
  width: 80px;
  max-height: 80px;
  max-width: 80px;
  margin-top: -28px;
  margin-right: 0px;
  margin-bottom: -8px;
}

.mobile #menu .list-group-item {
  border-top-width: 6px;
  border-left-width: 6px;
  border-bottom-width: 0px;
}

.mobile #menu .list-group-item:first-child {
  border-top-left-radius: 20px;
}

.mobile #menu .list-group-item .imgWrapper {
  margin-left: 20px;
  margin-right: 34px;
}

.mobile #menu .keyCode {
  display: none;
}

.mobile #menu .menuLabel {
  font-size: 50pt;
}

#exercise {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: -1;
}

#exercise[mode="chart"]>.chart>iframe { border-radius: 14px; }
#exercise[mode="badge"] { border-radius: 30px; box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.7); }
#exercise[mode="badge"] .badge>span { opacity: 0.5; }

#exercise>div { display: none; }

#exercise[mode="chart"] { width: 740px; height: 564px; }
#exercise[mode="chart"]>div.chart { display: block; height: 100%; }
#exercise[mode="chart"] iframe { width: 100%; height: 100%; }

#exercise[mode="badge"] {
  opacity: 0.2;
  width: 160px;
  height: 160px;
  padding-top: 25px;
  color: white;
  text-align: center;
  font-size: 28px;
  -webkit-text-stroke: 2px black;
}
#exercise[mode="badge"]:hover { opacity: 1; }
#exercise[mode="badge"] span.n {
  font-size: 77px;
}
#exercise[mode="badge"]>div.badge { display: block; }

#exercise[mode="badge"] .badge { max-width: 160px; max-height: 160px; border-radius: 40px; display: none; }
#exercise[mode="badge"].good { display: block; background-image: url('egood.png'); }
#exercise[mode="badge"].bad  { display: block; background-image: url('ebad.png'); }

#events {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: monospace;
}

body.day   #events { color: #22c3c2; }
body.night #events { color: #e86060; }

#events ul {
  list-style-type: none;
  padding-left: 0px;
  margin-bottom: 0px;
}

#events .daysaway {
  font-weight: bold;
  margin-right: 10px;
}

.mobile #exercise, .mobile #events { display: none; }