:root {
  --color-dark: #232323;
  --color-light: #DFDFDF;
  --color-very-light: #EAEAEA;
  --color-success: #229922;
}

body.no-scroll {
  height: 100vh;
}

.navbar {
  background-color: var(--color-dark);
  color: white;
}

#content {
  display: flex;
  flex-direction: column;

  margin-bottom: 20px;
}

.content-block {
  padding: 15px 20px 0px;

  display: flex;
  flex-direction: row;
}

.content-options {
  width: 100%;

  display: flex;
  flex-direction: row-reverse;
}

.content-options > div {
  padding-left: 7px;
}

.content-filler {
  flex: 1 1 auto;
}

.content-main {
  flex: 0 1 800px;

  display: flex;
  flex-direction: column;
}

form.one-column {
  display: flex;
  flex-direction: column;
}

form.one-column label,
.detail.one-column label {
  font-weight: bold;

  margin-top: 10px;
}

form.one-column button {
  margin-top: 20px;
}

.detail.one-column > div {
  margin: 5px 10px 20px;
  overflow-wrap: anywhere;
}

.one-column h3 {
  overflow-wrap: anywhere;
}

.login {
  width: 300px;

  padding: 10px;
  margin: auto;
}

.listing {
  width: 100%;

  display: flex;
  flex-direction: column;
}

.listing>div {
  background-color: var(--color-light);

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.listing>div:nth-child(even) {
  background-color: var(--color-very-light);
}

.listing>div.header {
  color: white;
  font-weight: bold;
  background-color: var(--color-dark);
}

.listing>div>div { 
  padding: 5px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing .field-title {
  flex: 1 1 400px;
}

.listing .field-small {
  flex: 0 1 120px;
}

.listing .sortable {
  user-select: none;
}

.message.success {
  background-color: var(--color-success);

  text-align: center;
  padding: 5px;
}

.bg-meals-dark {
  background-color: var(--color-dark);
}

i.icon {
  vertical-align: middle;
  line-height: inherit;
  padding: 0px 3px 3px 0px;
}

.field-error, .non-field-error {
  color: red;
}