.dialogs-holder {
  padding: 0 var(--half-padding);
  display: flex;
  flex-wrap: wrap;
}

.dialog {
  border: 1px solid var(--dark-grey);
  border-radius: var(--radius);
  margin: var(--half-padding);
  flex-basis: 10%;
}

.dialogs-holder > .dialog {
  flex-grow: 1;
}

.dialog-header {
  border-bottom: 1px solid var(--dark-grey);
  padding: 0 var(--half-padding);
  display: flex;
}

.dialog h3,
.dialog h3 a {
  padding-left: var(--half-padding);
  color: var(--lighter-blue);
}

.dialog-body h3 {
  margin-bottom: 0;
}

.dialog-body {
  padding: var(--half-padding);
}

.inputs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.inputs-row .input {
  flex-grow: 1;
}

.half-padding {
  padding: var(--half-padding);
}

.fb-20,
.inputs-row .fb-20 {
  flex-basis: 20%;
  flex-grow: 2;
}

.mw-20 {
  max-width: 20%;
  min-width: 8em;
}

.dialog.fit-dialog-contents {
  flex-grow: 0;
}

.centered-form {
  width: 50em;
  max-width: 50em;
  margin: 1em auto;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .centered-form {
    width: 80%;
  }
}

@media only screen and (max-width: 768px) {
  .centered-form {
    width: 90%;
  }
}