@font-face {
  font-family: "Merriweather Sans";
  font-weight: normal;
  src: url("../fonts/MerriweatherSans-Regular.ttf"); }
@font-face {
  font-family: "Merriweather Sans";
  font-weight: bold;
  src: url("../fonts/MerriweatherSans-Bold.ttf"); }
@font-face {
  font-family: "Merriweather Sans";
  font-style: italic;
  src: url("../fonts/MerriweatherSans-Italic.ttf"); }
* {
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
  position: relative; }

body {
  background: #1d1f21;
  color: #c5c8c6;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 18px;
  line-height: 30px; }

a {
  color: #81a2be;
  cursor: pointer;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

h1, h2, h3 {
  font-size: 24px;
  font-weight: bold; }

label, input {
  display: block; }

.container {
  margin-top: 30px;
  margin-bottom: 50px; }

.title h2 {
  margin-bottom: 10px; }

input {
  border: 0;
  background: #282a2e;
  color: #c5c8c6;
  font: inherit;
  outline: 0;
  width: auto; }
  input:focus {
    background: #373b41;
    color: #e0e0e0; }

.ecg a {
  display: block;
  padding: 5px 15px; }
  .ecg a#xx {
    color: #969896; }
  .ecg a.current {
    background: #282a2e;
    color: #b5bd68; }
  .ecg a:hover {
    background: #373b41;
    color: #e0e0e0;
    text-decoration: none; }

.status .block {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px; }
.status input, .status label {
  padding: 0 15px; }
.status .block.item-1 {
  border: 5px solid #493132;
  padding: 5px; }
  .status .block.item-1 .label {
    color: #cc6666; }
.status .block.item-2 {
  border: 5px solid #4d3c31;
  padding: 5px; }
  .status .block.item-2 .label {
    color: #de935f; }
.status .block.item-3 {
  border: 5px solid #524936;
  padding: 5px; }
  .status .block.item-3 .label {
    color: #f0c674; }
.status .block.item-4 {
  border: 5px solid #434733;
  padding: 5px; }
  .status .block.item-4 .label {
    color: #b5bd68; }
.status .block.item-5 {
  border: 5px solid #384747;
  padding: 5px; }
  .status .block.item-5 .label {
    color: #8abeb7; }
.status .block.item-6 {
  border: 5px solid #364048;
  padding: 5px; }
  .status .block.item-6 .label {
    color: #81a2be; }
.status .block.item-7 {
  border: 5px solid #423c48;
  padding: 5px; }
  .status .block.item-7 .label {
    color: #b294bb; }
.status .block.item-8 {
  border: 5px solid #3f312f;
  padding: 5px; }
  .status .block.item-8 .label {
    color: #a3685a; }

#bar {
  background: #161719;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0.5;
  padding: 5px 15px;
  text-align: right;
  display: flex; }
  #bar:hover {
    opacity: 1; }
  #bar a {
    display: block;
    flex: 1;
    padding: 5px 0;
    text-align: center; }
    #bar a:hover {
      background: #1d1f21;
      text-decoration: none;
      color: #e0e0e0; }