/*
 * file_name = contacto__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = Sets the CSS styles used by the contacto action (= contacto.php file) where users can fill out a contact form 
 *               that generates an email to a general email address (info@debene.com)
 *                
 * descripción = Hoja de estilo utilizada por la acción contacto (= archivo contacto.php) la cual ofrece a los visitantes un formulario 
 *               en línea para contactar a la empresa.  Cuando rellenan y envian el formulario, un correo se genera a
 *               la direccion info@debene.com
 *
 */

/*
  This element displays a confirmation message after the user attempt to use the contact webform
  Este elemento muestra un mensaje de confirmación después que el usuario intenta usar el formulario para contactar a la empresa
*/  
div.contact__confirmation_message
{
    background: HoneyDew      ; 
         color: darkGreen     ; 
       display: none            ; 
     font-size: 1.3rem          ; 
   font-weight: bold            ; 
   line-height: 1.4             ;
       padding: 1rem            ;
}  


div.contact_container
{
      align-items: center                 ;

           /* border: 2px solid red       ;  */
          display: flex                  ; 
  justify-content: center                ;
        flex-wrap: wrap                  ;
           margin: 0rem auto 3rem auto   ;
            max-width: 100%                   ;
}  


div.contact_webform_container
{
    /* background: lavender             ; */
          flex: 1 1 40%                ;
     max-width: 100%;
}


div.webform_error_message
{
  color: darkRed   ;
  font-size: 0.7 rem ;
}


div.contact_information
{
  /* background: lightyellow          ; */
   font-size: 1rem                   ;
        flex: 1 1 30%                ;
     padding: 0rem 1rem              ;
  text-align: center                 ;
}


table.debene__contact_form_table
{
  border-collapse: collapse     ; 
           margin: 0px auto     ;
          padding: 0.75rem      ;
          /*  width: 100%         ;   */
}


tr.debene__contact_form_table
{
          /*  width: 100%         ;   */
}


td.form_field
{
    background: #c2c2a3                ;
  border-color: #b8b894                ;
  border-width: 0px 0px 2px 0px          ;
  border-style: solid                    ;
   font-weight: bold                     ;
    text-align: right                    ;
     /* max-width: 85%                      ; */
       padding: 0.5rem 1rem 0.5rem 1rem  ;
}


td.form_value
{
    background: #d6d6c2                        ; 
  border-color: #c2c2a3                        ; 
  border-width: 0px 0px 2px 0px                  ; 
  border-style: solid                            ;
     /* max-width: 85%                              ; */
       padding: 0.75rem 0.75rem 0.75rem 0.75rem  ;
    text-align: left                             ;
}


span.form_required_field_flag
{
         color: darkRed            ;
   font-weight: bold                 ;
}


input.debene__contact_form_table  ,
label.debene__contact_form_table  ,
textarea.debene__contact_form_table
{
  max-width: 95%;
  font-size: 1.1rem;
  padding: 2px;
}


input[type="submit"] 
{
  padding: 4px 6px;
}


input:focus, select:focus, textarea:focus
{
  background-color: lightYellow         ;
           outline: none !important     ;
            border: 1px solid #6b6b47   ;
     border-radius: 2px                 ;

}


/* to prevent pixel jump when element receives focus */
input:focus
{
  padding: 2px 3px     ;
}


/* to prevent pixel jump when element receives focus */
textarea:focus
{
  padding: 2px 2px     ;
}


/* to prevent pixel jump when element receives focus */
input[type=submit]:focus
{
  background-color: lightYellow   ;
           padding: 2px 7px       ;
}

iframe.contact__google_map
{
     display: block            ;
      height: 20rem            ;
      margin: 2rem auto        ; 
       max-width: 80%            ;
}

/***********************************************************************
*                                                                      *
*                     ➔ MEDIA QUERIES                                 *
*                                                                      *
***********************************************************************/
/* #region */

/* Display layout for narrower screens (tablets and smart phones)
   All the content is displayed in a single column */
@media only screen and (max-width: 550px)
{
  div.contact_container
  {
    flex-direction: column;

  }

  table.debene__contact_form_table
  {
        /* background: orange      ; */
           display: flex          ;
         flex-flow: column        ;
            margin: 0px auto      ;
            padding: 0.75rem      ;
            /*  width: 100%         ;   */
  }


  tr.debene__contact_form_table
  {
           display: flex          ;
         flex-flow: column        ;
  }


  /* Force the table cells to stack vertically on top of each other so that the form
     displays as a single column instead of two */
  td.form_field
  {
           display: block             ;
            margin: 0 auto            ;
        text-align: left              ;
             width: 100%              ;
  }

  /* Force the table cells to stack vertically on top of each other so that the form
    displays as a single column instead of two */
  td.form_value
  {
    display: block             ;
     margin: 0 auto            ;
     width: 100%              ;
  }
}




   /*#endregion */