html,
body {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  background-color: #34abe6;
  font-family: Monda;
  font-size: 14px;
}

#app {
  display: flex;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  background-color: #34abe6;
  font-size: 1em;
  justify-content: center;
  font-family: Monda;
}

.sidebar {
  width: 30%;
  min-width: 300px;
  height: 100%;
  background-color: #333;
}

.main {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background-color: #999;
}

.link {
  cursor: pointer;
}

.subtitle {
  float: left;
  margin: 2px;
  border-bottom: solid 1px black;
  border-right: solid 1px black;
  font-size: 20px;
}

.actions {
  display: inline-flex;
  float: right;
  max-height: 30px;
  margin: 2px;
  border-bottom: solid 1px black;
  border-left: solid 1px black;
}

button {
  margin: 0;
  padding: 0;
  outline: none;
  background: Transparent;
  border: 0;
  cursor: pointer;
}

.loading {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  margin-top: -0.3em;
  line-height: 1.5em;
  vertical-align: text-bottom;
  font-size: 24px;
  font-weight: bold;
}
.loading::after {
  display: inline-table;
  white-space: pre;
  text-align: left;
}
.loading.dots2::after {
  content: '⠋\A⠙\A⠚\A⠞\A⠖\A⠦\A⠴\A⠲\A⠳';
  animation: spin9 1s steps(9) infinite;
  font-weight: bold;
  color: #000;
}
.loading.open-circle::after {
  content: '◜\A◠\A◝\A◞\A◡\A◟';
  animation: spin6 0.6s steps(6) infinite;
}
.loading.bullet::after {
  content: ' ●    \A   ●   \A    ●  \A     ● \A      ●\A     ● \A    ●  \A   ●   \A  ●    \A ●     ';
  animation: spin10 1s steps(10) infinite;
}
@keyframes spin6 {
  to {
    transform: translateY(-9em);
  }
}
@keyframes spin9 {
  to {
    transform: translateY(-13.5em);
  }
}
@keyframes spin10 {
  to {
    transform: translateY(-15em);
  }
}