layout.css

html {
  height: 100%
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: column;
}
[hidden] {
  display: none !important;
}
pre {
  white-space: pre-wrap;
}
input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
}
button, .button {
  margin: 2px;
  padding: 1px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerbox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexrow {
  display: flex;
  flex-flow: row;
  align-items: center;
}
.equal-parent > * {
  flex: 1;
}
.minor {
  flex: none;
}
.major {
  flex: 1;
}
.bar {
  flex: none;
  height: 48px;
  align-items: stretch;
}
.small-bar {
  flex: none;
  height: 24px;
}
.region {
  flex: 1 1 100px;
  margin: 0;
  overflow-y: scroll;
}
.slack-message {
  display: flex;
  flex-flow: column;
  margin: 12px;
  padding: 4px;
}
.dingroll-message {
  display: flex;
  flex-flow: column;
  margin: 4px;
  padding: 4px;
}
.dingroll-message *,
.new-dingroll-message * {
  margin: 4px;
}
.loose-bar {
  padding: 4px;
}
.loose-bar * {
  margin: 4px;
}
.new-dingroll-message {
  display: inline-flex;
  flex-flow: row;
  margin: 0 4px 4px;
  padding: 4px;
}
.tag-line {
  display: flex;
  flex-flow: row;
  margin: 0;
}
#global-tags {
  flex: 1;
}
.proxied {
  /* hide without breaking tab focus:
     see http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
  */
	overflow: hidden;
	position: absolute;
	top: 0; left: 0; right: 100%; bottom: 100%;
  opacity: 0;
	z-index: -1;
}
.proxied:focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}