$no-columns-breakpoint: 600px;

code {

font-family: $font-monospace, monospace;
font-weight: 400;

}

.form-container {

max-width: 400px;
padding: 20px;
margin: 0 auto;

}

.simple_form {

&.hidden {
  display: none;
}

.input {
  margin-bottom: 15px;
  overflow: hidden;

  &.hidden {
    margin: 0;
  }

  &.radio_buttons {
    .radio {
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .radio > label {
      position: relative;
      padding-left: 28px;

      input {
        position: absolute;
        top: -2px;
        left: 0;
      }
    }
  }

  &.boolean {
    position: relative;
    margin-bottom: 0;

    .label_input > label {
      font-family: inherit;
      font-size: 14px;
      padding-top: 5px;
      color: $primary-text-color;
      display: block;
      width: auto;
    }

    .label_input,
    .hint {
      padding-left: 28px;
    }

    .label_input__wrapper {
      position: static;
    }

    label.checkbox {
      position: absolute;
      top: 2px;
      left: 0;
    }

    label a {
      color: $highlight-text-color;
      text-decoration: underline;

      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
    }

    .recommended {
      position: absolute;
      margin: 0 4px;
      margin-top: -2px;
    }
  }
}

.row {
  display: flex;
  margin: 0 -5px;

  .input {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 50%;
    padding: 0 5px;
  }
}

.title {
  color: #d9e1e8;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  margin-bottom: 30px;
}

.hint {
  color: $darker-text-color;

  a {
    color: $highlight-text-color;
  }

  code {
    border-radius: 3px;
    padding: 0.2em 0.4em;
    background: darken($ui-base-color, 12%);
  }

  li {
    list-style: disc;
    margin-left: 18px;
  }
}

ul.hint {
  margin-bottom: 15px;
}

span.hint {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

p.hint {
  margin-bottom: 15px;
  color: $darker-text-color;

  &.subtle-hint {
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    margin-top: 15px;
    margin-bottom: 0;
  }
}

.authentication-hint {
  margin-bottom: 25px;
}

.card {
  margin-bottom: 15px;
}

strong {
  font-weight: 500;

  @each $lang in $cjk-langs {
    &:lang(#{$lang}) {
      font-weight: 700;
    }
  }
}

.input.with_floating_label {
  .label_input {
    display: flex;

    & > label {
      font-family: inherit;
      font-size: 14px;
      color: $primary-text-color;
      font-weight: 500;
      min-width: 150px;
      flex: 0 0 auto;
    }

    input,
    select {
      flex: 1 1 auto;
    }
  }

  &.select .hint {
    margin-top: 6px;
    margin-left: 150px;
  }
}

.input.with_label {
  .label_input > label {
    font-family: inherit;
    font-size: 14px;
    color: $primary-text-color;
    display: block;
    margin-bottom: 8px;
    word-wrap: break-word;
    font-weight: 500;
  }

  .hint {
    margin-top: 6px;
  }

  ul {
    flex: 390px;
  }
}

.input.with_block_label {
  max-width: none;

  & > label {
    font-family: inherit;
    font-size: 16px;
    color: $primary-text-color;
    display: block;
    font-weight: 500;
    padding-top: 5px;
  }

  .hint {
    margin-bottom: 15px;
  }

  ul {
    columns: 2;
  }
}

.input.datetime .label_input select {
  display: inline-block;
  width: auto;
  flex: 0;
}

.required abbr {
  text-decoration: none;
  color: lighten($error-value-color, 12%);
}

.fields-group {
  margin-bottom: 25px;

  .input:last-child {
    margin-bottom: 0;
  }
}

.fields-row {
  display: flex;
  margin: 0 -10px;
  padding-top: 5px;
  margin-bottom: 25px;

  .input {
    max-width: none;
  }

  &__column {
    box-sizing: border-box;
    padding: 0 10px;
    flex: 1 1 auto;
    min-height: 1px;

    &-6 {
      max-width: 50%;
    }

    .actions {
      margin-top: 27px;
    }
  }

  .fields-group:last-child,
  .fields-row__column.fields-group {
    margin-bottom: 0;
  }

  @media screen and (max-width: $no-columns-breakpoint) {
    display: block;
    margin-bottom: 0;

    &__column {
      max-width: none;
    }

    .fields-group:last-child,
    .fields-row__column.fields-group,
    .fields-row__column {
      margin-bottom: 25px;
    }
  }

  .fields-group.invited-by {
    margin-bottom: 30px;

    .hint {
      text-align: center;
    }
  }
}

.input.radio_buttons .radio label {
  margin-bottom: 5px;
  font-family: inherit;
  font-size: 14px;
  color: $primary-text-color;
  display: block;
  width: auto;
}

.check_boxes {
  .checkbox {
    label {
      font-family: inherit;
      font-size: 14px;
      color: $primary-text-color;
      display: inline-block;
      width: auto;
      position: relative;
      padding-top: 5px;
      padding-left: 25px;
      flex: 1 1 auto;
    }

    input[type=checkbox] {
      position: absolute;
      left: 0;
      top: 5px;
      margin: 0;
    }
  }
}

.input.static .label_input__wrapper {
  font-size: 16px;
  padding: 10px;
  border: 1px solid $dark-text-color;
  border-radius: 4px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=url],
textarea {
  box-sizing: border-box;
  font-size: 16px;
  color: $primary-text-color;
  display: block;
  width: 100%;
  outline: 0;
  font-family: inherit;
  resize: vertical;
  background: darken($ui-base-color, 10%);
  border: 1px solid darken($ui-base-color, 14%);
  border-radius: 4px;
  padding: 10px;

  &::placeholder {
    color: lighten($darker-text-color, 4%);
  }

  &:invalid {
    box-shadow: none;
  }

  &:required:valid {
    border-color: $valid-value-color;
  }

  &:hover {
    border-color: darken($ui-base-color, 20%);
  }

  &:active,
  &:focus {
    border-color: $highlight-text-color;
    background: darken($ui-base-color, 8%);
  }
}

input[type=text],
input[type=number],
input[type=email],
input[type=password] {
  &:focus:invalid:not(:placeholder-shown),
  &:required:invalid:not(:placeholder-shown) {
    border-color: lighten($error-red, 12%);
  }
}

.input.field_with_errors {
  label {
    color: lighten($error-red, 12%);
  }

  input[type=text],
  input[type=number],
  input[type=email],
  input[type=password],
  textarea,
  select {
    border-color: lighten($error-red, 12%);
  }

  .error {
    display: block;
    font-weight: 500;
    color: lighten($error-red, 12%);
    margin-top: 4px;
  }
}

.input.disabled {
  opacity: 0.5;
}

.actions {
  margin-top: 30px;
  display: flex;

  &.actions--top {
    margin-top: 0;
    margin-bottom: 30px;
  }
}

button,
.button,
.block-button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: $ui-highlight-color;
  color: $primary-text-color;
  font-size: 18px;
  line-height: inherit;
  height: auto;
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 500;
  outline: 0;
  margin-bottom: 10px;
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    background-color: lighten($ui-highlight-color, 5%);
  }

  &:active,
  &:focus {
    background-color: darken($ui-highlight-color, 5%);
  }

  &:disabled:hover {
    background-color: $ui-primary-color;
  }

  &.negative {
    background: $error-value-color;

    &:hover {
      background-color: lighten($error-value-color, 5%);
    }

    &:active,
    &:focus {
      background-color: darken($error-value-color, 5%);
    }
  }
}

select {
  appearance: none;
  box-sizing: border-box;
  font-size: 16px;
  color: $primary-text-color;
  display: block;
  width: 100%;
  outline: 0;
  font-family: inherit;
  resize: vertical;
  background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
  border: 1px solid darken($ui-base-color, 14%);
  border-radius: 4px;
  padding-left: 10px;
  padding-right: 30px;
  height: 41px;
}

h4 {
  margin-bottom: 15px !important;
}

.label_input {
  &__wrapper {
    position: relative;
  }

  &__append {
    position: absolute;
    right: 3px;
    top: 1px;
    padding: 10px;
    padding-bottom: 9px;
    font-size: 16px;
    color: $dark-text-color;
    font-family: inherit;
    pointer-events: none;
    cursor: default;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 1px;
      width: 5px;
      background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
    }
  }
}

&__overlay-area {
  position: relative;

  &__blurred form {
    filter: blur(2px);
  }

  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba($ui-base-color, 0.65);
    border-radius: 4px;
    margin-left: -4px;
    margin-top: -4px;
    padding: 4px;

    &__content {
      text-align: center;

      &.rich-formatting {
        &,
        p {
          color: $primary-text-color;
        }
      }
    }
  }
}

}

.block-icon {

display: block;
margin: 0 auto;
margin-bottom: 10px;
font-size: 24px;

}

.flash-message {

background: lighten($ui-base-color, 8%);
color: $darker-text-color;
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
text-align: center;

&.notice {
  border: 1px solid rgba($valid-value-color, 0.5);
  background: rgba($valid-value-color, 0.25);
  color: $valid-value-color;
}

&.alert {
  border: 1px solid rgba($error-value-color, 0.5);
  background: rgba($error-value-color, 0.1);
  color: $error-value-color;
}

&.hidden {
  display: none;
}

a {
  display: inline-block;
  color: $darker-text-color;
  text-decoration: none;

  &:hover {
    color: $primary-text-color;
    text-decoration: underline;
  }
}

p {
  margin-bottom: 15px;
}

.oauth-code {
  outline: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  border: 0;
  padding: 10px;
  font-family: $font-monospace, monospace;
  background: $ui-base-color;
  color: $primary-text-color;
  font-size: 14px;
  margin: 0;

  &::-moz-focus-inner {
    border: 0;
  }

  &::-moz-focus-inner,
  &:focus,
  &:active {
    outline: 0 !important;
  }

  &:focus {
    background: lighten($ui-base-color, 4%);
  }
}

strong {
  font-weight: 500;

  @each $lang in $cjk-langs {
    &:lang(#{$lang}) {
      font-weight: 700;
    }
  }
}

@media screen and (max-width: 740px) and (min-width: 441px) {
  margin-top: 40px;
}

&.translation-prompt {
  text-align: unset;
  color: unset;

  a {
    text-decoration: underline;
  }
}

}

.form-footer {

margin-top: 30px;
text-align: center;

a {
  color: $darker-text-color;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

}

.quick-nav {

list-style: none;
margin-bottom: 25px;
font-size: 14px;

li {
  display: inline-block;
  margin-right: 10px;
}

a {
  color: $highlight-text-color;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;

  &:hover,
  &:focus,
  &:active {
    color: lighten($highlight-text-color, 8%);
  }
}

}

.oauth-prompt, .follow-prompt {

margin-bottom: 30px;
color: $darker-text-color;

h2 {
  font-size: 16px;
  margin-bottom: 30px;
  text-align: center;
}

strong {
  color: $secondary-text-color;
  font-weight: 500;

  @each $lang in $cjk-langs {
    &:lang(#{$lang}) {
      font-weight: 700;
    }
  }
}

@media screen and (max-width: 740px) and (min-width: 441px) {
  margin-top: 40px;
}

}

.qr-wrapper {

display: flex;
flex-wrap: wrap;
align-items: flex-start;

}

.qr-code {

flex: 0 0 auto;
background: $simple-background-color;
padding: 4px;
margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block;

svg {
  display: block;
  margin: 0;
}

}

.qr-alternative {

margin-bottom: 20px;
color: $secondary-text-color;
flex: 150px;

samp {
  display: block;
  font-size: 14px;
}

}

.table-form {

p {
  margin-bottom: 15px;

  strong {
    font-weight: 500;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }
  }
}

}

.simple_form, .table-form {

.warning {
  box-sizing: border-box;
  background: rgba($error-value-color, 0.5);
  color: $primary-text-color;
  text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
  box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;

  a {
    color: $primary-text-color;
    text-decoration: underline;

    &:hover,
    &:focus,
    &:active {
      text-decoration: none;
    }
  }

  strong {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;

    @each $lang in $cjk-langs {
      &:lang(#{$lang}) {
        font-weight: 700;
      }
    }

    .fa {
      font-weight: 400;
    }
  }
}

}

.action-pagination {

display: flex;
flex-wrap: wrap;
align-items: center;

.actions,
.pagination {
  flex: 1 1 auto;
}

.actions {
  padding: 30px 0;
  padding-right: 20px;
  flex: 0 0 auto;
}

}

.post-follow-actions {

text-align: center;
color: $darker-text-color;

div {
  margin-bottom: 4px;
}

}

.alternative-login {

margin-top: 20px;
margin-bottom: 20px;

h4 {
  font-size: 16px;
  color: $primary-text-color;
  text-align: center;
  margin-bottom: 20px;
  border: 0;
  padding: 0;
}

.button {
  display: block;
}

}

.scope-danger {

color: $warning-red;

}

.form_admin_settings_site_short_description, .form_admin_settings_site_description, .form_admin_settings_site_extended_description, .form_admin_settings_site_terms, .form_admin_settings_custom_css, .form_admin_settings_closed_registrations_message {

textarea {
  font-family: $font-monospace, monospace;
}

}

.input-copy {

background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
border-radius: 4px;
display: flex;
align-items: center;
padding-right: 4px;
position: relative;
top: 1px;
transition: border-color 300ms linear;

&__wrapper {
  flex: 1 1 auto;
}

input[type=text] {
  background: transparent;
  border: 0;
  padding: 10px;
  font-size: 14px;
  font-family: $font-monospace, monospace;
}

button {
  flex: 0 0 auto;
  margin: 4px;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  padding: 7px 18px;
  padding-bottom: 6px;
  width: auto;
  transition: background 300ms linear;
}

&.copied {
  border-color: $valid-value-color;
  transition: none;

  button {
    background: $valid-value-color;
    transition: none;
  }
}

}

.connection-prompt {

margin-bottom: 25px;

.fa-link {
  background-color: darken($ui-base-color, 4%);
  border-radius: 100%;
  font-size: 24px;
  padding: 10px;
}

&__column {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-shrink: 1;
  max-width: 50%;

  &-sep {
    align-self: center;
    flex-grow: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
  }

  p {
    word-break: break-word;
  }
}

.account__avatar {
  margin-bottom: 20px;
}

&__connection {
  background-color: lighten($ui-base-color, 8%);
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  border-radius: 4px;
  padding: 25px 10px;
  position: relative;
  text-align: center;

  &::after {
    background-color: darken($ui-base-color, 4%);
    content: '';
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: 1px;
  }
}

&__row {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
}

}

.input.user_confirm_password, .input.user_website {

&:not(.field_with_errors) {
  display: none;
}

}