body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-height: 100vh;
}
.header-line {
  background-color: #aaf;
}
.header-line .title {
  font-size: 1.3em;
  padding: 0.2em 0.5em;
}
.main-content {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.main-content .left-menu {
  min-width: 15em;
  background-color: #ccf;
}
.main-content .content {
  overflow-x: auto;
  flex-grow: 1;
}
.view-add-entry,
.view-search {
  padding: 1em;
}
.view-add-entry h2 {
  border-bottom: 0.15em solid #aaf;
}
.view-add-entry h2:first-of-type {
  margin-top: 0;
}
.view-add-entry .entry-group {
  display: table;
  width: 100%;
}
.view-add-entry .entry {
  display: table-row;
}
.view-add-entry .entry > div {
  display: table-cell;
  position: relative;
  vertical-align: top;
}
.view-add-entry .entry > div:first-child {
  width: 0;
  padding: 0 1em 0 0;
}
.view-add-entry .entry .input > input,
.view-add-entry .entry .input > textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
}
.view-add-entry .entry .input > textarea {
  min-height: 6em;
}
.view-add-entry .user-bar {
  background-color: #ccf;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1em;
}
.main-content .left-menu .button,
.view-add-entry .user-bar .button {
  background-color: #aaf;
  margin: 0.3em 0.5em;
  padding: 0.2em 0.4em;
  border-radius: 1em;
  cursor: pointer;
}
.main-content .left-menu .button:hover,
.view-add-entry .user-bar .button:hover {
  background-color: #88f;
}
.main-content .left-menu .button {
  border-radius: 0;
  text-align: center;
}
.view-search .search-bar {
  position: relative;
  margin: 0 0 1em;
}
.view-search .search-bar input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.5em;
  padding: 0.2em 0.5em;
  border-radius: 1em;
  border: 0.1em solid #88f;
}
.view-search .search-result {
  margin: 0.5em 0;
  border: 0.15em solid #aaf;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.view-search .search-result:hover {
  background-color: #ccf;
}
.view-search .search-result .title {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
}
.view-search .search-result .title .kind {
  margin: 0 0.5em 0 0;
  color: #008;
}
.view-search .search-result .title .name {
  text-overflow: ellipsis;
  font-size: 1.1em;
  overflow: hidden;
  white-space: nowrap;
}
.view-search .search-result .info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 0.75em;
}
.view-search .search-result .info .entry {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0.25em;
}
.view-search .search-result .info .key {
  font-weight: bold;
}
.view-search .search-result .info .key:after {
  content: ":";
  margin-right: 0.25em;
}
.view-search .search-result .result {
  display: flex;
  flex-direction: row;
  font-size: 0.9em;
  align-items: end;
}
.view-search .search-result .result .attribute:after {
  content: ":";
  margin-right: 0.5em;
}
.view-search .search-result .result .found {
  font-family: monospace;
}
.view-search .search-result .result .highlight {
  color: #008;
  font-weight: bold;
}