form#connexion, form#register, form#profile, form#mot-de-passe {
  width: 100%;

  @media (min-width: 768px) {
    width: 800px;
    margin: 0 auto;
  }
}

form.form-page, form.form-familly {
  width: 90%;
  margin: 0 auto;
}

form {
  input, textarea {
    font-size: 1em;
    border-radius: 5px;
    padding: 2px 5px;
    transition: .2s;

    &:hover, &:focus {
      box-shadow: 0 0 5px 0 #656565;
      transition: .2s;
    }
  }

  .input-mandatory {
    label::after {
      content: "*";
      color: #b52828;
      padding-left: .5em;
      font-size: .9em;
      vertical-align: top;
    }
  }

  .form-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    label {
      width: 35%;
    }

    input:not([type='checkbox']) {
      width: 62%;
    }

    .input-radio {
      max-width: 20%;
    }
  }

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

    label {
      width: 100%;
      margin-top: 1em;

      .label-info {
        display: inline-block;
        padding-left: 1em;
        font-size: .75em;
        font-style: italic;
        color: saddlebrown;
      }
    }

    textarea, input:not([type='checkbox']) {
      width: 100%;
    }
  }

  .form-row, &.form-column {
    margin: 10px 0;

    &.checkbox {
      display: block;
      position: relative;
      height: 1.4em;

      input {
        position: absolute;
        left: -9999px;

        & + label {
          &:focus, &:hover {
            &:after {
              box-shadow: 0 0 5px 0 #656565;
              transition: .2s;
            }
          }
        }

        &:checked + label {
          &:after {
            background: linear-gradient(0.45turn, #13bf1a, darkgreen),
            linear-gradient(0.65turn, #13bf1a, darkgreen),
            linear-gradient(0.15turn, #13bf1a, darkgreen);
            box-shadow: 0 0 5px 0 #658565;
            transition: .2s;
          }
        }
      }

      label {
        cursor: pointer;
        transition: .4s;
        width: 80%;
        padding-right: 1em;

        &:after {
          display: inline-block;
          position: absolute;
          content: "";
          height: 1em;
          width: 1em;
          margin-left: 1em;
          margin-top: .1em;
          background-color: gray;
          border-radius: 50%;
          transition: .2s;
        }
      }
    }

    &.buttons {
      justify-content: space-around;
      margin: 1em 0;
    }
  }

  .form-error {
    ul {
      font-size: .9em;
      list-style-type: none;
      color: darkred;
      font-style: italic;
      margin: 0 0 1.2em 0;
      padding: 0;
    }
  }

  select {
    border-radius: 5px;
    font-size: 1em;
    padding: 2px 5px;
    transition: .2s;
    width: 62%;

    &:focus, &:hover {
      box-shadow: 0 0 5px 0 #656565;
      transition: .2s;
    }
  }

  .ts-wrapper {
    width: 62%;

    .ts-control {
      border-radius: 5px;
      font-size: 1em;
      padding: 2px 5px;
      transition: .2s;
    }

    &.focus .ts-control, .ts-control:hover {
      box-shadow: 0 0 5px 0 #656565;
      transition: .2s;
    }

    .ts-dropdown {
      border-radius: 5px;
      font-size: 1em;
    }
  }

  .form-contact-comment {
    display: none;
  }
  &.contact-form {
    textarea {
      width: 62%;
      height: 12em;
    }
  }
}