/* ==========================================================================
   FORM CSS
   ========================================================================== */
  
  form {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
  }

  fieldset {
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-basis: 100%;
  }

  input:disabled,
  button:disabled {
      opacity: 0.2;
      transition: all 0.3s ease-in-out;
  }

  input:enabled,
  button:enabled {
      opacity: 1;
      transition: all 0.3s ease-in-out;
  }

  input:not([type=checkbox]):not([type=radio]):not([type=file]).is-invalid,
  select.is-invalid,
  textarea.is-invalid,
  input:invalid {
    border-color: #f00;
  }

  legend {
      font-weight: 700;
      margin: 0 0 1em;
  }

  label,
  .label {
      line-height: 1;
      padding: 0 0 10px 0;
      display: flex;
  }

  input + label,
  input[type=checkbox] + label,
  input[type=radio] + label {
    display: inline-flex;
    padding: 0;
  }

  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  select,
  textarea {
      color: rgba(0, 60, 113, 1);
      background-color: white;
      border: 1px solid rgba(119, 119, 119, .33);
      padding: 14px 24px 14px 24px;
      min-height: 57.2px;
      display: inline-block;
      width: 100%;
      max-width: 100%;
      outline: none;
      font-size: 17px;
      border-radius: 0;
      transition: all 0.3s ease-in-out;
  }

  input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
  input:focus,
  textarea:focus,
  select:focus {
      border: 1px solid rgba(0, 60, 113, 1);
      color: rgba(0, 60, 113, 1);
  }

  input:hover,
  textarea:hover,
  select:hover {
      border: 1px solid rgba(0, 60, 113, 1);
      box-shadow: 1px 0px 10px 0px rgb(0 0 0 / 5%);
  }

  input[type=radio],
  input[type=checkbox] {
      margin-right: 0.5rem;
  }

  input[type=file] {
      color: rgba(0, 60, 113, 1);
      background-color: white;
      border: 1px solid rgba(119, 119, 119, .33);
      padding: 14px 24px 14px 24px;
      min-height: 0;
      display: inline-block;
      width: 100%;
      max-width: 100%;
      outline: none;
      border-radius: 0;
      transition: all 0.3s ease-in-out;
  }

  textarea {
      height: 165px;
      max-height: 666px;
      width: 100%;
      max-width: 100%;
      padding: 24px;
  }

  select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: 0;
      cursor: pointer;
      background: url(../assets/img/down-arrow.svg) #FFFFFF
      no-repeat right 1em center / 1em;
  }

  option {
      color: rgba(0, 60, 113, 0.5);
  }

  option:checked {
      color: rgba(0, 60, 113, 1);
  }

  select::-ms-expand {
      display: none;
  }

  select::after {
      content: "";
  }

  input::-webkit-input-placeholder {
      opacity: 0.5;
      color: rgba(0, 60, 113, 1);
  }

  input::-moz-placeholder {
      opacity: 0.5;
      color: rgba(0, 60, 113, 1);
  }

  input::-ms-input-placeholder {
      opacity: 0.5;
      color: rgba(0, 60, 113, 1);
  }

  input::placeholder {
      opacity: 0.5;
      color: rgba(0, 60, 113, 1);
  }

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  /* GLOBAL */

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

  .form-infos,
  .formulaire,
  .steps {
      text-align: left;
  }

  .form-input.error {
      border-color: #ff0047;
      padding: .375rem .75rem;
  }

  .alert-danger,
  .error {
      background: #ff0047;
      font-weight: 700;
      font-size: 14px;
      color: white;
      padding: 1em;
      border-radius: 6px;
      display: inline-block;
      margin: 0 0 1em;
  }

  .alert-success,
  .success {
      background: #44e74d;
      font-weight: 700;
      font-size: 14px;
      color: white;
      padding: 1em;
      border-radius: 6px;
      display: inline-block;
      margin: 0 0 1em;
  }

  .alert-message {
      font-weight: 700;
      font-size: 14px;
      color: white;
  }

  .alert-infos {
      color: rgba(0, 60, 113, 1);
      font-weight: 700;
      font-size: 14px;
  }

  .resultats {
    padding: 1em;
    text-align: center;
  }

  .notifications {
    padding: 0 1em;
    text-align: left;
  }

  .form-control {
      margin: 0;
      padding: 0 15px 15px;
  }

  .form_control_auto {
      display: inline-flex;
      max-width: none;
      flex-basis: auto;
      padding: 0 15px 15px;
  }

  .form_control_25 {
      max-width: 100%;
      flex-basis: 100%;
  }

  .form_control_30 {
      max-width: 100%;
      flex-basis: 100%;
  }

  .form_control_33 {
      max-width: 100%;
      flex-basis: 100%;
  }

  .form_control_50 {
      max-width: 100%;
      flex-basis: 100%;
  }

  .form_control_70 {
      max-width: 100%;
      flex-basis: 100%;
  }

  .form_control_100 {
      max-width: 100%;
      flex-basis: 100%;
  }

  .form_control_flex {
    display: flex;
  }

  .form-control-group {
      margin: 1em 0;
      max-width: 100%;
      flex-basis: 100%;      
  }

  .form-control-group .label {
    padding: 0 1em;
  }

  fieldset.column {
      flex-direction: column;
  }

  .fieldset_titre {
      flex-basis: 100%;
      width: 100%;
      padding: 0 1em;
  }

  .fieldset_titre h3 {
    margin: 0;
  }

  .fieldset_text {
      width: 100%;
      margin: 1em 0;
      padding: 0 1em;
  }

  .fieldset_text p,
  .fieldset_text legend,
  .fieldset_text label {
      margin: 0;
      padding: 0;
  }

  .sub_fieldsets,
  .sub_fieldset {
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-basis: 100%;
  }

  .fieldset_coordonnees .fieldset_titre h3 {
    margin-bottom: 1em;
  }

  /* MULTISTEP */

  .form_container {
      width: 100%;
      height: auto;
      margin: auto;
      padding: 2em;
  }

  #form_ddr .container {
      flex-direction: column;
  }

  #form_ddr .form-control-group {
      margin: 0;
      display: flex;
      flex-direction: column;
  }

  #form_ddr .form-control-group.row {
      flex-direction: row;
  }

  #form_ddr .form-control-group.row .form_control_auto {
      padding: 0 15px;
  }

  #form_ddr .form-control-checkbox {
    display:  flex;
  }

  #form_ddr .reponse_evaluation {
    border: 1px solid;
    padding: 2em;
    margin: 1em 1em 0;
    text-align: center;
    width: 100%;
    line-height: 1.5;
    background: #003c71;
    color: white;
    border-radius: 6px;
  }
  #form_ddr .reponse_evaluation a {
    color: white;
  }
  #form_ddr .reponse_evaluation p {
      margin: 0;
  }

  #form_ddr .navigation_buttons {
      margin: 1em 0 0;
  }

  #form_ddr .navigation_buttons .buttons {
      margin: 0;
  }

  .reponse_3_1 {
      text-transform: capitalize;
  }

  .reponse_3_5 {
      width: 100%;
      width: 100%;
      display: flex;
  }

  .preview ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }

  .preview img {
      max-width: 100%;
      max-width: 250px;
  }

  .preview_thumb {
      max-width: 50%;
      float: left;
  }

  /* Make circles that indicate the steps of the form: */
  .step {
      display: block;
      clear: both;
      opacity: 0.4;
      margin: 1em 0;
      flex-basis: 100%;
      width: 100%;
  }

  /* Mark the active step: */
  .step.active,
  .step.check {
      opacity: 1;
  }

  .steps {
      display: flex;
      margin: auto;
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      padding: 2em;
  }

  /* AUTOCOMPLETE */

  .autocomplete_list {
      border: 1px solid rgba(119, 119, 119, .33);
      background: white;
      position: absolute;
      top: calc(100% - 1px);
      left: 0;
      z-index: 100000;
      width: 100%;
      padding: 1em;
  }

  .autocomplete_list .autocomplete-items {
      margin: 0;
      padding: 0;
      width: 100%;
  }

  .autocomplete-item {
      cursor: pointer;
      list-style-type: none;
      padding: 0.25em;
      display: flex;
      flex-direction: column;
      color: rgba(0, 60, 113, 0.5);
  }

  .autocomplete-item:hover {
      color: rgba(0, 60, 113, 1);
  }

  #form_eligibilite .button {
    margin:1em 0;
  }

  @media only screen and (min-width: 768px) {
      .form_control_25 {
          max-width: 25%;
          flex-basis: 25%;
      }

      .form_control_30 {
          max-width: 30%;
          flex-basis: 30%;
      }
      
      .form_control_33 {
          max-width: calc(100% / 3);
          flex-basis: calc(100% / 3);
      }

      .form_control_50 {
          max-width: 50%;
          flex-basis: 50%;
      }

      .form_control_70 {
          max-width: 70%;
          flex-basis: 70%;
      }

      .form_control_100 {
          max-width: 100%;
          flex-basis: 100%;
      }
  }