/**
 * @file
 * Form component's rules.
 *
 * Defines rules for form components : input, label, etc.
 *
 */


/**
 * Forms bases
 */

 input,
 textarea {
   max-width: 100%;
 }


 /**
  * User Log Block
  */

  .user-login-form,
  .user-pass {
    padding: 10rem 1rem 3rem 1rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .user-login-form .form-item,
  .user-pass .form-item {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .user-login-form .form-item .form-text,
  .user-pass .form-item .form-text {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .user-login-form .form-submit,
  .user-pass .form-submit {
    padding: 0.444rem;
    border: 1px solid;
    border-radius: 40px;
    padding-left: 1.333rem;
    padding-right: 1.333rem;
    border-color: var(--color-primary);
    transition: all 0.3s ease;
  }
  .user-login-form .form-submit:hover,
  .user-pass .form-submit:hover {
    background-color: var(--color-primary);
    color: var(--color-neutral);
  }
  @media screen and (min-width: 700px) {
    .user-login-form .form-item,
    .user-pass .form-item {
    width: 50%;
    max-width: 745px;
    }
  }
  @media screen and (min-width: 1200px) {
    .user-login-form .form-item,
    .user-pass .form-item {
    width: 33.333%;
    max-width: 438px;
    }
  }


 /**
 *  Contact page
 **/

 .webform-submission-contact-form{
  margin-top: -1.5rem;
 }
 .webform-submission-contact-form input,
 .webform-submission-contact-form textarea{
   border: solid 1px var(--neutral-medium);
   display: flex;
   display: block;
   width: 100%;
   padding: 10px;
 }
 .webform-submission-contact-form .webform-button--submit{
   color: var(--color-neutral);
   background-color: var(--color-primary);
   border: 2px solid var(--color-primary);
   padding: 0.5rem 1.5rem;
   border-radius: 25px;
   transition: 0.3s;
   width: inherit;
   height: inherit;
   margin-bottom: 2rem;
 }
 .webform-submission-contact-form .webform-button--submit:hover{
   color: var(--color-primary);
   background-color: var(--color-neutral);
   border: 2px solid var(--color-primary);
 }

 .field--name-field-adresse iframe{
   max-width: 100%;
 }
 .field--name-field-adress iframe{
   max-width: 100%;
 }

 @media screen and (min-width: 640px) {
  .webform-submission-contact-form input,
  .webform-submission-contact-form textarea{
    width: 85%;
  }
}

/* Modal submission */
.ui-dialog .webform-confirmation-modal--content.ui-widget-content.ui-dialog-content {
  background-color: var(--color-neutral);
}