@font-face {
  font-family: "Knockout";
  src: url("../fonts/Knockout.otf") format("opentype");
}

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

body {
  color: #000;
  background-color: #f3f3f3;
  font-family: "Roboto Condensed", sans-serif;
  padding: 10px;
}

h1 {
  font-family: "Knockout", sans-serif;
}

div.event-container {
  background-color: #ffffff;
  min-height: 50vh;
}

div.delivered-container {
  background-color: #ffffff;
  min-height: 50vh;
}

ul {
  list-style: none;
  margin-block: 0;
  padding: 5px;
}

li {
  background-color: #EEF3F7;
  font-size:0;
  margin-bottom: 5px;
  padding: 5px;
}

li span, li div {
  font-size: medium;
  line-height: 1.4em;
}

.event-time {
  display: inline-block;
  font-weight: 400;
  width: 70px;
}

.updated-event-time {
  display: inline-block;
  font-weight: 400;
  width: 70px;
  color: blue;
}

.event-desc {
  display: inline-block;
  font-weight: 400;
  margin-left: 0;
}

.event-insight {
  padding-left: 70px;
  font-weight: 900;
}

#connection {
  font-family: "Roboto", sans-serif;
  margin: 10px 0;
}

.dot {
  height: 7px;
  width: 7px;
  background-color: #7d7d7d;
  border-radius: 50%;
  display: inline-block;
  margin: 1px 7px 1px 0;
}

.dot.connected {
  background-color: #76C94A;
}

.dot.toggled {
  transform: scale(1.25,1.25);
  transition: transform 0.25s;
}

#connect-btn {
  float: right;
}

#replay-btn {
  float: right;
}

#view-events-btn {
  float: right;
}

#period-num {
  width: 80px;
}

#event-id-guid {
  width: 250px;
}

#event-guid {
  width: 250px;
}

#orgId {
  width: 70px;
}