i.nf {
  font-size: 120%;
}

.hidden {
  display: none;
}

input.is-error {
  background: #fdd !important;
}

label.form-switch,
label.form-checkbox,
label.form-input,
.inbox-group {
  margin-right: 1em;
}

.inbox-group > .form-input {
  width: 4em;
  margin-right: 0.8ex;
  border: 0;
}

.tiles > label > input {
  margin-left: 1ex;
}

.tiles-btn {
  float: right;
}

.container {
  height: 100vh;
}

.container > * {
  height: 100%;
  max-height: 100vh;
}

.code {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

#cm {
  flex-grow: 1;
}

.CodeMirror {
  height: 100%;
}

.code > .form-group {
  flex-grow: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

.examples {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
}

.examples > .form-select {
  flex-grow: 1;
}

.examples > .btn {
  flex-grow: 0;
  margin-left: 5px;
}

.machine > .form {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 5px;
  padding-bottom: 5px;
}

.machine > .form > .form-group {
  flex-grow: 0;
}

.machine > .form > .tiles-group {
  flex-grow: 1;
}

.tiles {
  margin-top: 5px;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, 4em);
}

.tiles > label {
  display: flex;
}