/*
 * file_name = debene__main_stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = this file contains the main CSS styles used throughout the Debene.com
 *               website.  
 *
 * descripción = este archivo contiene los principales estilo CSS usados en el sitio web 
 *               de Debene.com.  
 *
 */

/*
                TABLE OF CONTENT       /        INDICE

      (1) ➔ GLOBAL STYLES             /  ESTILOS GLOBALES

      (2) ➔ TYPOGRAPHY                /  TIPOGRAFIA

      (3) ➔ ORDERED & UNORDERED LISTS /  LISTAS PUNTEADAS & NO ORDENADAS

      (4) ➔ PAGE LAYOUT ELEMENTS      /  ELEMENTOS DE LA ESTRUCTURA DE LA PÁGINA
         (4.1) ➔ PAGE HEADER          /     CABECERA DE PAGINA
         (4.2) ➔ NAVIGATION BAR       /     BARRA DE NAVEGACIÓN
         (4.3) ➔ MAIN CONTENT         /     CONTENIDO PRINCIPAL
         (4.4) ➔ PAGE FOOTER          /     PIE DE PAGINA

      (5) ➔ INFO FILES   /  ARCHIVOS INFORMATIVOS

      (6) ➔ MODAL FOR IMAGE DISPLAY   /  VENTANA EMERGENTE PARA VISUALIZACION DE IMAGENES

      (7) ➔ HIDE/SHOW TEXT TOGGLE     /  INTERRUPTOR PARA MOSTRAR/ESCONDER TEXTO

      (8) ➔ IMAGE MAPS WITH HOVER EFFECTS   /  MAPAS DE IMAGEN CON EFFECTOS AL SOBREVOLAR CON EL MOUSE

      (9) ➔ SUPPLIER MAIN LANDING PAGE & PRODUCT PAGES  /  PAGINA PRINCIPAL DE CADA PROVEEDOR & PAGINA DE PRODUCTOS 

     (10) ➔ WEBFORMS                  /  FORMULARIOS EN LINEA

     (11) ➔ MEDIA QUERIES             /  CONSULTAS DE MEDIOS

*/



/***********************************************************************
*                                                                      *
*              ➔  GLOBAL STYLES  /  ESTILOS GLOBALES                  *
*                                                                      *
***********************************************************************/
/* #region */

/*  
  Imported typography fonts. 
  Note: for '@import' statements to work, they need to be placed at the very top of the stylesheet 

  Fuentes de tipografía importadas
  Nota: Para que la declaración '@import' funcione, tiene que colocarse al tope de la hoja de estilo
*/
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

/* 
  Definition of the global CSS variables that will are used on this website
  Definición de las variables CSS que se usan en este sitio web
*/  
:root
{
       --body__font_color: #222222              ;
      --body__font_family: 'Mulish', sans-serif   ;
      --body__font_weight: 500                    ;
    --header__font_family: 'Open Sans', sans-serif   ;
   --navbar__main__height:  2.2rem                   ;

}

/* 
  Reset the margin and padding for all HTML <elements>.
  Force size calculations to always include the content, padding, and border-width.

  Reestablecer el margen y el relleno de todos los <elementos> HTML.
  Obligar al cálculo de medidas a incluir el contenido, el relleno, y el grosor de los bordes.
*/
*           ,
*::after    ,
*::before
{
  /* The size of elements will include the padding and border width */
  box-sizing: border-box   ; 
      margin: 0rem         ;
     padding: 0rem         ;
}


html 
{
  /* 
    Fluid Typography:  The font size will scale up or down in proportion to the viewport screen size.
    However, the font size will not decrease beneath the set minimum value or increase beyond the maximum set value

    MAXIMUM AND MINIMUM VALUES
      minimum font size  = 12px
      maximium font size = 18px 
      minimum viewport width =  320px
      maxmum viewport width  = 1600px
  
      EQUATION TO CALCULATE FONT SIZE BASED ON FONT MAX & MIN VALUES AND VIEW PORT MAX & MIN VALUES
 
  /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
  font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));

  scroll-behavior: smooth;
}


body
{
    /* background: lightgreen         ; */
          color: var(--body__font_color)    ;
    font-family: var(--body__font_family)   ;
    font-weight: var(--body__font_weight)   ;
     /* prevents white space at the bottom of the screen when the page does not have much content */
     min-height: 100vh                      ;
     /* prevents the appearance of a navigator horizontal scrollbar */
     overflow-x: hidden                     ;
     text-align: center                     ;
          width: 100%                       ;
}


/*
  Because the main content section has a center alignment, paragraphs will be given a left-alignment
  so that they are not stuck horizontally in the middle of the page.
  
  Visto que la seccion del contenido principal tiene un alineamiento al centro, a los parrafos
  se les va a dar un alinamiento a la izquierda para que no queden colgados horizontalmente en el medio de la página
*/
p
{
  text-align: left                      ;
      margin: 0.5rem 0rem 0.5rem 0rem   ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*                 ➔ TYPOGRAPHY  /  TIPOGRAFIA                         *
*                                                                      *
***********************************************************************/
/* #region */

h1, h2, h3, h4, h5
{
  font-family: var(--header__font_family);
}


h1
{
          color: #333333   ;
      font-size: 2rem        ;
     margin-top: 1rem        ;
  margin-bottom: 0.5rem      ;
}


h2
{
        color: #1F497D   ;
    font-size: 1.5rem      ;
}


h3
{
          color: #1F497D   ;
      font-size: 1.3rem      ;
     margin-top: 1rem        ;
  margin-bottom: -0.25rem    ;
}


h4
{
          color: #945538   ;
      font-size: 1.1rem      ;
     margin-top: 1rem        ;
  margin-bottom: -0.15rem    ;
}


h5
{
          color: #333333   ;
      font-size: 1rem        ;
}


strong
{
        color: #111   ;
  font-weight: 700      ;
}

/*#endregion */



/****************************************************************** 
*                                                                 *
*                 ➔ ORDERED & UNORDERED LISTS                    *
*                LISTAS PUNTEADAS & NO ORDENADAS                  *
*                                                                 *
*******************************************************************/
/* #region */

ol ,
ul
{
  margin: 0.3rem 0rem 0.5rem 0rem;
  /*        margin-left: 1.4rem      ;  distance between numbered list and left edge of parent element */
   /* padding-inline-start: 1.4rem      ; distance between numbered list and left edge of parent element */
}


ul
{
        line-height: 1.7        ; 
         text-align: left       ; 
}


ol li , 
ul li
{
       margin-left: 1rem       ;  /* distance between list item and left edge of parent element */
      padding-left: 0.5rem     ;  /* distance between list item and number or bullet point    */
}

/*#endregion */



/***********************************************************************
*                                                                      *
*               ➔ PAGE LAYOUT ELEMENTS                                *
*          ELEMENTOS DE LA ESTRUCTURA DE LA PÁGINA                     *
*                                                                      *
***********************************************************************/
/* #region */

 div.debene__web_page
{ 
    /* background: pink;    */
    background: linear-gradient(to bottom, #FFFFFF  90.0%   ,
                                           #EEEEEE  95.0%   ,
                                           #DADADA  97.5%   ,
                                           #d5d5d5 100.0%   );
    min-height: 100vh               ;
    text-align: center              ;
         width: 100%                ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*               ➔ PAGE HEADER  /  CABECERA DE PAGINA                  *
*                                                                      *
***********************************************************************/
/* #region */

/*
  Page header where the Debene logo, server information (Development versus Production), 
  and company address and contact information are displayed.

  Cabecera de página donde residen el logo de Debene, información sobre el servidor 
  (Desarollo/Prueba vs. Producción), y la dirección/contactos de la empresa.
*/
header.debene__header
{
              display: grid            ;
   grid-template-areas:
                       '   debene__header__left_panel   debene__header__center_panel   debene__header__right_panel   '
                       ;
  grid-template-columns: 1fr 3fr 10rem            ;

}


div.debene__header__left_panel
{
      align-items: center                       ;
       /* background: lightyellow                ; */
          display: flex                         ;
  justify-content: flex-start                   ;
        grid-area: debene__header__left_panel   ;
}


div.debene__header__center_panel
{
      /* background: azure          ; */
       grid-area: debene__header__center_panel         ;
     line-height: normal           ;  /* resetting line-height so this div does not inherint the parent div value */
      text-align: center           ;
  vertical-align: top              ; 
}  


div.debene__header__right_panel
{
      /* background: lightgreen     ; */
       grid-area: debene__header__right_panel         ;
      text-align: right            ; 
  vertical-align: top              ; 
}  


/* 
  Used for the <img > element that displays the large Debene logo in the page header
  Usado para el elemento <img > que muestra el gran logo de Debene en la cabecera de la página
*/   
#header__debene_logo
{
        /* border: 1px solid #ccc   ; */
       content: url('../imagenes/global/global__debene_logo.webp')   ;
    max-height: 6rem                                                 ;
   margin-left: 0.75rem                                              ;
}	


/*
  Displays server information within the page header, e.g. "Servidor Local" or "Servidor de Prueba"
  Muestra la información sobre el servidor en la cabecera de la página, p.e. "Servidor Local" o "Servidor de Prueba"
*/   
div.debene__server_information
{
       /*  background: beige            ;   */
           display: block               ;
         font-size: 2.5vw               ;
       font-weight: bold                ;
            height: 3rem                ;
        text-align: center              ;
             width: 70%                 ;
}


/*
  <div> box with the company's contact information (physical address, telephone numbers, and email address)
  casillero <div> con la información de contacto de la empresa (dirección, teléfonos, y correo electrónico)
*/

address.company_contact_information
{ 
   /*background-color: beige            ; */
             color: #333                         ;
         font-size: 0.7rem          ;
        font-style: normal                         ;
           padding: 0.75rem 0.5rem 0.5rem 0.5rem   ;
        text-align: right                          ;
}

/* formatting for 'info@debene.com' address in page header */
address.company_contact_information a
{
            color: var(--body__font_color)   ;
  text-decoration: none                ;
}


address.company_contact_information a:hover
{
  text-decoration: underline   ;
}

/* #endregion */



/***********************************************************************
*                                                                      *
*               ➔ NAVIGATION BAR  /  BARRA DE NAVEGACIÓN              *
*                                                                      *
***********************************************************************/
/* #region */


/*
  This elements is the container for the main navigation bar. It has a postion of sticky so that 
  the navigation bar alwyas stays visible at the top of the page
*/
div.debene__navigation_bar
{
  background: #7A94D2;
       width: 100%  ;

       /* Makes the navigation bar permanently visible at the top of the page, even when the user scrolls downwards
        Hace que la barra de navegación se siempre sea visible, aún cuando el usuario desliza la página hacia abajo */
    position: sticky              ;
         top: 0rem                ;
      /* The z-index of the nav bar needs to be higher than 0 zero so that it overlaps downstream page elements,
         but it needs to be lower than that of the modal window used to display images whose z-index is curretly set to 100 */
      z-index: 5                   ;
}


/* On wide screens, hide the "Buscar" search button/link
   but display it on narrow screens 
   En pantallas anchas, esconder el botón/vinculo de "Buscar"
   pero mostrarlo en pantallas angostas */
a.navigation-bar__search-button
{
            color: white      ;
          display: none         ;
            float: left         ;
        font-size: 1rem         ;
      font-weight: bold         ;
           margin: 0.4rem 0 0 1rem   ;
  text-decoration: none!important   ;
}


/* Hide the checkbox <input> element that is used to display or hide the navigation bar
   on small screens
   Esconder la casilla <input type='checkbox' > que es usada para mostrar o esconder 
   la barra de navegación en pantallas pequeñas */
input.navigation-bar__toggle-checkbox
{
  display: none;
}


/* Hide the <label> element that is used to display or hide the navigation bar
   on small screens
   Esconder el elemento <label> que es usada para mostrar o esconder 
   la barra de navegación en pantallas pequeñas */
label.navigation-bar__toggle-label
{ 
        color: white   ;
      display: none      ;
    font-size: 1rem      ;
  font-weight: bold      ;
}


/*
  Main Navigation Bar
  Barra de Navegación Principal
*/
nav.debene__navigation_bar
{ 
       /* vertically align nav buttons to the top of this element */
       align-items: flex-start          ;
  background-color: #7A94D2           ; 
           display: flex                ;  
         flex-wrap: wrap                ;
   /* center the navigation buttons horizontally */
   justify-content: center              ;
}



/****************   ALL LEVELS - Common Styles   ****************************/
/************   Estilos Comunes a TODOS LOS NIVELES  ************************/


/* 
  <div> element that holds both the parent button and all of its children buttons. 
  For example, it wold hold [Fruit] + the group [ [Apple] [Oranges] [Mandarin] ]

  Elemento <div> que contiene un botón padre y todos sus botones hijos/descendientes.
  Por ejemplo, contendría [Fruta] + el grupo [ [Manzana] [Naranja] [Mandarina] ]
*/
div.navigation_buttons_dropdown__sublevel_0   ,
div.navigation_buttons_dropdown__sublevel_1   ,
div.navigation_buttons_dropdown__sublevel_2   ,
div.navigation_buttons_dropdown__sublevel_3
{
  /* border: red solid 1px; */
  /* allows the absolute positioning of the <div> element holding the sub level 2 navigation buttons */
  position: relative  ;
}


/*
  Level 3 navigation buttons become visible when their parent Level 2 button is hovered.
  Level 3 navigation buttons are shown in one single vertical column
*/
div.navigation_buttons_dropdown__sublevel_2:hover  div.navigation_buttons_container__sublevel_3
{
                 display: grid      ;
   grid-template-columns: 1fr       ;
   /* If list of level 3 buttons extends vertically beyond the field of view, use this setting
      to create a two column list instead
      Si la lista de botones de navegación de subnivel 3 se extiende demasiado verticalmente y las opciones
      más inferiores no son mas visible, usar este valor para crear una lista más compacta de 2 columnas:
      
      grid-template-columns: 1fr 1fr   ;  */
}


/* 
  Styles share by all navigation buttons
  Estilos comportidos por todos los botones de navegación
*/
a.current_page_button             ,
a.navigation_button__sublevel_0   ,
a.navigation_button__sublevel_1   ,
a.navigation_button__sublevel_2   ,
a.navigation_button__sublevel_3
{
      /* border-color: transparent;  */
      /* border-style: solid                         ; */
      /* border-width: 2px                           ; */
           display: block                         ;
       font-weight: bold                          ;
            height: var(--navbar__main__height)   ;
       line-height: var(--navbar__main__height)   ;
	         padding: 0px 2rem 0px 1rem             ;
   text-decoration: none                          ;
        transition: all 0.2s                      ;
       /* Keep the nav button label on one line  |  Mantener el título del botón en un renglón */ 
       white-space: nowrap                        ;
}


/*
  navigation button style for top-level, sublevel 1, sublevel 2, and sublevel 3 buttons when the user does a mouse-over
  Estilo para los botones de navegación primarios, secundarios, terciarios cuando flota el cursor por encima  
*/
a.navigation_button__sublevel_0:hover   ,
a.navigation_button__sublevel_1:hover   ,
a.navigation_button__sublevel_2:hover   ,
a.navigation_button__sublevel_3:hover
{ 
    background: #b8bc86      ;   /* olive green  */
}


/* 
  DEAD BUTTONS
  Use this style for navigations buttons that do not have a link to follow. 
  The cursor will remain as an arrow and will not change to a finger pointer.
  This applies to any button where the link has been removed by setting the href attribute to "#" 
   
  BOTONES MUERTOS
  Usar este estilo para botones de navegación que no tienen un vínculo para seguir.
  El cursor del mouse permanecera en forma de flecha y no cambirá a una mano con el dedo apuntando.
  Este estilo sera aplicado a cualquier botón donde se removio el vínculo al poner href='#'
*/   
a.current_page_button[href="javascript:void(0)"]             ,
a.navigation_button__sublevel_0[href="javascript:void(0)"]   ,
a.navigation_button__sublevel_1[href="javascript:void(0)"]   ,
a.navigation_button__sublevel_2[href="javascript:void(0)"]   ,
a.navigation_button__sublevel_3[href="javascript:void(0)"]
{
   /* Show arrow cursor | Mostrar cursor en forma de flecha */
   cursor: default;
}



/****************   SUB LEVELS 1, 2, & 3 - Common Styles   ****************************/
/***************   Estilos Comunes a SUBNIVELES 1, 2 y 3   ************************/

/* 
  <div> element that holds all the sibling buttons belonging to a parent. 
  For example, it wold hold [Apple] [Oranges] [Mandarin]
  By default it is hidden but will become visible when the parent navigation button is hovered upon
  The z-index = 10 ensures that the navigation drop down menus sit on top of other elements on the pages

  Elemento <div> que contiene a todos los botones hermanos descendientes del mismo padre.
  Por ejemplo, contendría [Manzana] [Naranja] [Mandarina]
  Inicialmente el elemento es escondido pero se hace visible cuando el mouse es puesto sobre el botón de navegación padre.
  El valor de z-index = 10 garantiza que los menus colgantes de navegación estén por encima de otros elementos en las páginas
*/
div.navigation_buttons_container__sublevel_1   ,
div.navigation_buttons_container__sublevel_2   ,
div.navigation_buttons_container__sublevel_3
{
      display: none                                 ;
     position: absolute                             ;
      z-index: 10                                   ;
}


a.navigation_button__sublevel_1   ,
a.navigation_button__sublevel_2   ,
a.navigation_button__sublevel_3
{ 
             color: #666666   ;
           display: block       ;
         font-size: 0.9rem      ;
      padding-left: 1rem        ;
     padding-right: 2rem        ;
        text-align: left        ;
}


a.navigation_button__sublevel_1:hover   ,
a.navigation_button__sublevel_2:hover   ,
a.navigation_button__sublevel_3:hover
{ 
    color: #333      ;
}

/* 
  Sublevel botton whose link points to the same page as the one being viewed
  Botón primario cuyo vínculo apunta a la misma página que está siendo visualizada
*/ 
div.navigation_buttons_container__sublevel_1  a.current_page_button   ,
div.navigation_buttons_container__sublevel_2  a.current_page_button   ,
div.navigation_buttons_container__sublevel_3  a.current_page_button
{ 
        /* light yellow */
        background: #f9f9b9             ;
            border: solid 1px #eeeeaa   ;
      border-width: 2px                   ;
             color: #666                ;
             cursor:default ;
         font-size: 0.9rem                ;
        text-align: left                  ;
}


/****************   SUB LEVELS 1 & 2 - Common Styles   ****************************/
/***************   Estilos Comunes a SUBNIVELES 1 y 2   ***************************/

/* 
 When a top-level parent navigation button is hovered on, it will cause a dropdown menu listing all
 of its sublevel children buttons to appear. So, when the cursor is moved onto [Fruits], immedately below
 the button, a dropdown will appear, showing  [Apple] [Oranges] [Mandarin]
 
 Cuando el cursor es puesto por encima de un botón de navegación padre, causará la aparición de un 
 menu deplegable que mostrará una lista de todos los botones hijos.
 Entonces, cuando el cursor es puesto sobre el botón [Frutas], justo debajo del botón aparecerá una lista
 desplegable mostrando [Manzana] [Naranja] [Mandarina]
*/  
div.navigation_buttons_dropdown__sublevel_0:hover  div.navigation_buttons_container__sublevel_1   ,
div.navigation_buttons_dropdown__sublevel_1:hover  div.navigation_buttons_container__sublevel_2
{
   display: block;
}



/****************   SUB LEVELS 2 & 3 - Common Styles   ****************************/
/***************   Estilos Comunes a SUBNIVELES 2 y 3   ***************************/

div.navigation_buttons_container__sublevel_2   ,
div.navigation_buttons_container__sublevel_3
{
    /* the border is set to be a large width and transparent to offer more "sticky" hover area where
       the sublevel 2 links remain visible even when the mouse is slightly off target */
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
    border-width: 0rem 2rem 2rem 5rem;
            /* Use slightly less than 100% so th at the <div> holding sublevel 2 buttons overlaps a bit on top
              of the <div> that holds the sublevel 1 buttons */
            left: calc(100% - 5rem)                    ;
             top: 0                                    ;
}



/****************   TOP LEVEL Navigation Buttons   ***************************/
/***************   Botones de navegación PRIMARIOS   *************************/

div.navigation_buttons_container__sublevel_1
{
   box-shadow: 0px 0.5rem 1rem 0rem rgba(0,0,0,0.2)   ;
}


/* 
  Style of top-level navigation buttons
  Estilo para los botónes de navegación primarios/a nivel 0
*/
a.navigation_button__sublevel_0
{ 
  background: #7A94D2   ;
       color: #FFFFFF   ;
}


/* 
  Adds a downward facing triangle icon(▽)to the right of the top level navigation buttons 
  that have dropdowns with children/sublevel buttons. The addition of this symbol happens 
  irrespective whether the button has a link to the current page or not.

  Adiciona el icono de un triangulo apuntando hacia abajo (▽) a la derecha de los botones
  de navegación primarios que tienen menus desplegables con botones secundarios pertenecientes al subnivel
  La adición del simbolo ocurre cuando el vínculo del boton apunta a la pagina que se visualiza y tambien 
  si no lo hace.
 */
div.navigation_buttons_dropdown__sublevel_0 > a.navigation_button__sublevel_0::after   ,
div.navigation_buttons_dropdown__sublevel_0 > a.current_page_button::after
{
        content: "▿"   ; 
    font-weight: bold   ; 
}


/* 
  Top-level botton whose link points to the same page as the one being viewed
  Botón primario cuyo vínculo apunta a la misma página que está siendo visualizada
*/ 
nav a.current_page_button
{ 
        background: #a5b9e8                   ;
             color: #3B2A98                   ;
}



/****************   SUBLEVEL 1 Navigation Buttons   ***************************/
/************   Botones de Navegación del SUBNIVEL 1  *************************/


div.navigation_buttons_dropdown__sublevel_1
{
    /* z-index: 10   ; */
}


/*
  Style for sublevel 1 buttons
  Estilo para botones del subnivel 1
*/
a.navigation_button__sublevel_1
{ 
  background: lavender   ;
     z-index: 10           ;

}


/* 
  Show a right-pointing arrow icon on the right side of sublevel 1 buttons that have sublevel 2 children buttons.
  The arrow icon will signal that the button has descendant buttons
*/
div.navigation_buttons_dropdown__sublevel_1  a.navigation_button__sublevel_1:first-child::after   ,
div.navigation_buttons_dropdown__sublevel_2  a.navigation_button__sublevel_2:first-child::after   ,
div.navigation_buttons_dropdown__sublevel_1  a.current_page_button:first-child::after
{
      color: #999     ;
    content: '➤'       ;
  font-size: 0.7rem     ;
   position: absolute   ;
      right: 0.75rem    ;
        top: 0rem       ;
}


/* Used for icons that lay adjacent to the button label of the sublevel buttons 
   Usado para los iconos que acompañan el texto de los botones que yacen en el subnivel
*/
img.navigation_button_icon
{
       /* background: beige           ;  */
      margin-right: 0.40rem            ;
        max-height: 1rem            ;
         max-width: 1rem            ;
    vertical-align: text-bottom     ; /* Vertically aligns icon with button label  |  Deja alineado verticalmente el icono con el texto del botón  */
}


/* Used for company logos that appear as sublevel buttons 
   Usado para los logos que aparecen como botones en el subnivel
*/
img.navigation_button_logo
{
       /* background: beige           ;  */
            margin: 0rem 0px 0px 1.2rem  ;    
        max-height: 1rem               ;
         max-width: 8rem                 ; 
    vertical-align: text-bottom          ; /* Vertically aligns icon with button label  |  Deja alineado verticalmente el icono con el texto del botón  */
}



/****************   SUBLEVEL 2 Navigation Buttons   ***************************/
/************   Botones se navegación en el SUBNIVEL 2   ***********************/

div.navigation_buttons_dropdown__sublevel_2
{
    /* z-index: 15   ; */
}


div.navigation_buttons_container__sublevel_2
{
    /* border: solid 4px #b8bc56  ; */
    /* border: solid 4px purple  ; */
    z-index: 15   ;

}


div.navigation_buttons_container__sublevel_2:hover
{
  /* border: purple solid 4px; */

}

/*
  Style of sublevel 2 navigation buttons
*/ 
a.navigation_button__sublevel_2
{
      background: #ecedde         ;
    /* border-color: azure           ;
    border-style: solid             ;
    border-width: 1px 1px 0px 1px   ; */
}



/****************   SUBLEVEL 3 Navigation Buttons   ***************************/
/************   Botones de navegación del SUBNIVEL 3   ************************/

div.navigation_buttons_dropdown__sublevel_3
{
    /* z-index: 20   ; */
}


/* 
  Style of top-level navigation buttons
  Estilo para los botónes de navegación primarios/a nivel 0
*/
a.navigation_button__sublevel_3
{ 
  background: #e9dbaf   ;
       /* color: #FFFFFF   ; */
       z-index: 20   ;

}



/*#endregion */



/***********************************************************************
*                                                                      *
*                ➔ MAIN CONTENT  /  CONTENIDO PRINCIPAL               *
*                                                                      *
***********************************************************************/
/* #region */

/*
  When a confirmation message is sent via the URL query, it will be displayed
  in this <div> element
  Cuando un mensaje de confirmación es enviado a través de una consulta URL,
  el mensajo será mostrado por este elemento <div>
*/  
div.debene__confirmation_message 
{
       color: #8DBE85;
   font-size: 2rem;
  /* height: 30px; */
     padding: 0.5rem 0rem 0.5rem 0rem;
  text-align: center;
}


/*
  This is the main area where content is displayed.
  It is located beneath the header and above the footer.

  Esta es el área principal donde se muestra contenido. El área está ubicada por debajo de la 
  cabecera de página y por encima del pie de página.
*/  
main.debene__main_content
{
  /* background: coral;    */
       /* font-size: 1rem; */
          margin: 0px auto   ; 
      /* Used to prevent vertical collapase of pages that have very little content.  
        Usado para prevenir el colapso vertical de páginas con muy poco contenido */
      min-height: 62vh       ;
      text-align: center     ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*               ➔ PAGE FOOTER /  PIE DE PAGINA                        *
*                                                                      *
***********************************************************************/
/* #region */

footer.debene__footer
{
          display: flex                  ;
        font-size: 0.8rem                ;
  justify-content: center                ;
          padding: 4rem 0rem 1rem 0rem   ;
            width: 100%                  ;
}


div.debene__footer__left_panel 
{ 
  /* background: pink             ;    */
     display: inline-block     ;    
        flex: 1 1 5%         ;
}


div.debene__footer__center_panel 
{ 
   /* background: azure             ;    */
        color: #333333         ; 
         flex: 1 1 100%          ;
  line-height: 1.5               ;
   text-align: center            ; 
      padding: 0px               ;
    }


div.debene__footer__right_panel 
{ 
      /* background: khaki                   ;    */
            flex: 1 1 15%                   ;
         padding: 0.5rem 0.5rem 0rem 0rem   ;
      text-align: center                    ;
  vertical-align: middle                    ;
}



div.debene__footer__right_panel a
{
            color: #333333          ; 
      font-weight: normal             ; 
       text-align: center             ; 
  text-decoration: none               ;
}

div.debene__footer__right_panel a:hover 
{ 
  text-decoration:underline;
}


div.debene__footer__center_panel a
{
            color: #333333            ; 
      font-weight: normal; 
       text-align: center             ; 
  text-decoration: none               ;
}

div.debene__footer__center_panel a:hover 
{ 
  text-decoration: underline  ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*             ➔ INFO FILES   /   ARCHIVOS INFORMATIVOS                *
*                                                                      *
***********************************************************************/
/* #region */

/*================================================================================================================

                PDF FILES  /  ARCHIVOS PDF

  The elements imediately below are used to display a preview thumbnail image of the first page of a PDF document.
  The thumbnail image is overlayed by a file type icon (e.g. a PDF icon). The icon is positioned
  in the middle of the image (horizontal and vertical center). When the preview image is clicked, the browser navigates
  to the PDF file and opens it.

  Los elementos que siguen son usados para mostrar una estampilla de la primera página de un documento PDF.  La imagen en
  estampilla es sobrepuesto por un icono que simboliza el tipo de archivo (p.e. un icono de archivos PDF). El icono es 
  posicionado en el centro horizontal y vertical de la imágen.  Cuando se hace clic sobre la imágen, el navegador abre
  el archivo PDF.
=======================================================================================================================*/

/* Container for the info file buttons */

div.info-files-groups
{
       align-items: flex-start;
  background-image: radial-gradient( ellipse , #ecf0f8  60%, white  );
        column-gap: 1rem;
           display: flex;
         flex-flow: row;
         flex-wrap: wrap;
   justify-content: center;
            margin: 0px auto 3rem auto;
           padding: 1rem;
           row-gap: 1rem;
         max-width: 85%;
}


div.info-files-group
{
           /* background: coral; */
          align-items: center;
               border: 2px dashed #CCCCCC;
        border-radius: 0.5rem;
              display: grid;
  grid-template-areas: '   info-files-group__title      '
                       '   info-files                   ';
       justify-content: center;
               padding: 0.2rem 1rem 0.5rem 1rem;
}


div.info-files-group__title
{
  padding: 1rem 0rem 0.5rem 0rem;
}


h2.info-files-group__title
{
     background: #F2F2F2                 ;
         border: outset 2px #8da8bf      ;
  border-radius: 0.5rem                    ;
          color: #1F497D                 ;
        display: inline-block              ;
      font-size: 1.2rem                    ;
    font-weight: bold                      ;
      grid-area: info-files-group__title   ;
         margin: 0rem 4rem;
        padding: 0.2rem 1rem;
}


div.info-files
{
  /* background: lightgreen   ; */
   grid-area: info-files     ;

}


a.info_file__link
{ 
       /* background: lightgreen            ; */
            color: black                 ;
           border: 2px solid transparent   ;
    border-radius: 0.25rem                 ;
          display: inline-block            ;
           filter: grayscale(30%)          ;
           height: min-content             ;
           margin: 0.5rem                  ;
        max-width: 16rem                   ;
          opacity: 0.95                    ;
          padding: 1rem 0.5rem             ;
       text-align: center                  ;
  text-decoration: none                    ;
       transition: all 0.3s ease           ;
}


a.info_file__link:hover
{
  background: #dae2f1                               ;
      border: 2px solid #c8c8ea                     ;
  box-shadow: 0.25rem 0.5rem 0.5rem rgb(0,0,0,0.3)  ;
      filter: grayscale(0%)                           ;
     opacity: 1.00                                    ;
     z-index: 1                                       ;
} 


div.info_file__image_and_icon
{ 
  /* background: coral    ; */
    position: relative   ;
}


img.info_file__image
{
  border: solid 2px #d6dbf5;
  display: block      ;
   margin: 0px auto   ;
    width: 80%        ;
}


a.info_file__link:hover img.info_file__image
{
  border-color: #c8c8ea   ;
}


img.info_file__icon
{
           left: 50%                     ;
        opacity: 0.7                     ;
       position: absolute                ;
            top: 50%                     ;
      transform: translate(-50%, -50%)   ;
          width: 25%                    ;
}

a.info_file__link:hover img.info_file__icon
{
  opacity: 1   ;
}

div.info_file__caption
{
     /* background: coral               ; */
          color: #555                ;
      font-size: 0.8rem                ;
    font-weight: bold                  ;
        padding: 0rem 1rem             ;
     text-align: center                ;
         margin: 0.5rem auto 0px auto  ;
} 

a.info_file__link:hover div.info_file__caption
{ 
        color: #222222              ;
  font-weight: bold                ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*                   ➔ MODAL FOR IMAGE DISPLAY                         *
*                                                                      *
*            VENTANA EMERGENTE PARA VISUALIZACION DE IMAGENES          *
*                                                                      *
***********************************************************************/
/* #region */

/* The CSS below is used to create a modal (dialog box) that floats on top of the page's content.
   When the page loads, the modal <div> is hidden by default.
   When a user clics on an image, JavaScript is used to make the modal <div> visible and to display 
   within it the image that the user selected. The JavaScript function that does this is called showImage(); 
   Also, note that the value of the <image>'s "alt" attribute is used to create the text for the image
   caption within the modal window.
   
   El CSS aqui abajo es usado para crear una ventana emergente (pop-up window) que flota por encima
   del contenido de la página.
   Cuando la página es cargada, esta ventana emergente <div> esta escondida inicialmente.
   Cuando el usuario hace click sobre una imagen, códido de JavaScript es usado para que la ventana emergente se vuelva visible y que dentro de ella aparezca
   la imagen que el usuario seleccionó.  La función JavaScript que realiza esto se llama showImage();
   Nota: el valor del atributo "alt" de <image> es usado para crear texto del pie de foto
   dentro de la ventana emergente.
*/


/* The Modal pop up window (black background) */
div.modal
{
           background: rgba(0,0,0,0.9); /* Black w/ opacity */
              /* Hidden by default */
              display: none; 
       grid-auto-flow: column                  ;

  grid-template-areas:
                      '   modal__header    '
                      '   modal__content   '
                      '   modal__caption   '
                      '   modal__footer    '
                     ;

   grid-template-rows: 1fr minmax(min-content, 20vh) min-content 1fr ;

               height: 100vh                    ;
                 left: 0                        ;
             /* Stay in place */
             position: fixed                    ;
             /* center elements both vertically and horizontally */
          place-items: center                   ;
             /* Enable scroll if needed */
             overflow: auto                     ;
                  top: 0                        ;
                width: 100%                     ;
              /* Sit on top of any other element on the page like the main navigation bar */
              z-index: 100                      ;
}


div.modal__header
{
    /* background: azure         ; */
     grid-area: modal__header   ;
}


/* Modal Content (container to hold image to be displayed) */
div.modal__content 
{
       /* background: red            ; */
          display: flex             ;
        grid-area: modal__content   ;
  justify-content: center;
           /* height: 100%             ; */
            /* width: 100%             ; */
}


/* Modal Content (image to be displayed) */
img.modal__image 
{
     /* background: lightyellow   ; */
  border-radius: 1rem            ;
        display: block           ;
         height: auto            ;
     max-height: 75vh            ;
      max-width: 90vw            ;
      min-width: 80vw            ;
     object-fit: contain         ;
}


/* Caption of Modal Image */
div.modal__caption
{
     /* background: tomato       ; */
          color: #ccc             ;
        display: block              ;
      font-size: clamp(1rem, 4vw, 2rem)               ;
    font-weight: bold               ;
      grid-area: modal__caption     ;
         margin: auto               ;
        padding: clamp(1rem, 2vw, 2rem) clamp(2rem, 10vw, 15rem) clamp(1rem, 2vw, 2rem) clamp(2rem, 10vw, 15rem)  ;
     text-align: center             ;
}


div.modal__footer
{
  background: mistyrose     ;
   grid-area: modal__footer   ;
}


/* Both the image and its caption zoom into view when the modal window becomes visible */
img.modal__image     ,
div.modal__caption
{    
      animation-name: zoom   ;
  animation-duration: 0.6s   ;
}


@keyframes zoom 
{
    from {transform:scale(0)} 
      to {transform:scale(1)}
}

/*#endregion */


/***********************************************************************
*                                                                      *
*                 ➔ HIDE/SHOW TEXT TOGGLE                             *
*                                                                      *
*           INTERRUPTOR PARA MOSTRAR/ESCONDER TEXTO                    *
*                                                                      *
***********************************************************************/

/*
//  SHOW/HIDE TEXT VISIBILITY TOGGLE
//    This functionality is used when there is too much text to be displayed initially and it is desirable
//    to hide a portion of the text. The user can click on a "(...leer más)" control element to reveal 
//    the hidden text.  It is also possble to hide again the text afterwards by clicking on the a "(...ver menos)"
//    control element

//  INTERRUPTOR DE VISIBILIDA PARA MOSTRAR/ESCONDER TEXTO
//    Esta funcionalida se usa cuando hay demasiado texto para mostrar inicialmente y es deseable esconder una
//    porción del texto.  El usuario puede hacer click en el elemento de control "(...leer más)" para 
//    reverlar el texto escondido.  Es también posible volver a esconder el texto haciendo click en el 
//    elemento de control "(...ver menos)"
*/

button.read-more__button
{
       border: 0             ;
   background: transparent   ;
        color: darkblue    ;
       cursor: pointer       ;
  font-family: inherit       ;
    font-size: inherit       ;
   font-weight: bold         ;
}


span.read-more__text--hidden
{
  /* background: lightgreen; */
  display: none;
}


span.read-more__text--visible
{
  display: inline;
}


/*#endregion */



/***********************************************************************
*                                                                      *
*                 ➔ IMAGE MAPS WITH HOVER EFFECTS                     *
*                                                                      *
*        MAPAS DE IMAGEN CON EFFECTOS AL SOBREVOLAR CON EL MOUSE       *
*                                                                      *
***********************************************************************/
/* #region */


/* Styles used for image maps that have hover effects, i.e. A Javascript function replaces <area> 
   elements for equivalent <a> elements. The positioning of the anchor elements is identical to the 
   <area> elements from which they were derived. The border of the anchor elements then becomes 
   visible when the mouse is placed on top of them.
   
   Estilos usados mapa de imagenes que tienen efectos desencadenados por el sobrevuelo con el mouse.
   Una función de Javasript reemplaza los elementos <area> por elementos <a> equivalentes, y a estos
   anclajes se les confiere la posición identica de los anclajes de los cuales fueron derivados.
   El perímetro de los elementos de anclaje <a> se hacen visible cuando el mouse se coloca por encima de ellos
*/


a.image__map__anchor
{
           border: #AAAAAA dashed 3px          ;
          display: block                         ;
        /* initially make text invisible  */
            color: transparent                   ;
      font-weight: bold                          ;
          padding: 0.25rem                       ;
         position: absolute                      ;
       transition: box-shadow 0.1s ease-in-out   ;

       /* the next 3 properties are to center the text horizontally and vertically */
          display: flex;
   flex-direction: column;
  justify-content: center;
}


/* For active links */
a.image__map__anchor:hover
{ 
  background: hsla(61, 99%, 50%, 0.05)               ;
      border: mediumblue solid 2px                  ;
  box-shadow: 0px 0px 3rem rgba(82, 78, 183, 0.3)   ;
       color: darkblue                              ;
   /* make text visible by assigning it a non-zero size */
  text-shadow: 0rem 0rem 2rem white          ;
}


/* For dead links */
a.image__map__anchor[href$="javascript:void(0);"]:hover
{
            color: #333333                      ;
           cursor: default                        ;
  text-decoration: none                           ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*             ➔ SUPPLIER MAIN LANDING PAGE & PRODUCT PAGES            *
*                                                                      *
*        PAGINA PRINCIPAL DE CADA PROVEEDOR & PAGINA DE PRODUCTOS      *
*                                                                      *
***********************************************************************/
/* #region */

/*
  Section at the top of the page used to hold a supplier's logo, a description of the supplier's company, 
  and a navigation breadcrumb containing hierarchical links (for example 'Marcas > Merit > Emolización > EMBOSPHERE').

  Sección ubicada en la parte superior de la página dentro de la cual está el logo del proveedor, una descipción de la empresa,
  y una navegación estructural por jerarquía de página (por ejemplo 'Marcas > Merit > Emolización > EMBOSPHERE' ) 
*/  
div.supplier__header
{
          align-items: center       ;
           /* background: lavender   ; */
           column-gap: 1rem         ;
              display: grid         ;

   grid-template-areas:
                       '       supplier__header__link      supplier__header__breadcrumb    '
                       '   supplier__header__description   supplier__header__description   '
                       ;

  grid-template-columns: minmax(10rem, 0.3fr) 1fr               ;

   grid-template-rows: max-content min-content   ;
               margin: 1rem 0rem 1rem clamp(2rem, 6vw, 6rem)         ;
              row-gap: 0.25rem                   ;

}


a.supplier__header__link
{
    /* background: lightyellow            ; */
       display: block                    ;
     grid-area: supplier__header__link   ;
        margin: 0rem 0rem 0rem 0rem      ;
}


/* Used for top-level landing pages, to make the brand logo not-clickable 
   Usado para la página cumbre de las marcas, para que no se pueda hacer click sobre el logo de la marca */
a.supplier__header__link--dead
{
    /* background: lightyellow            ; */
        cursor: default                  ;
       display: block                    ;
     grid-area: supplier__header__link   ;
        margin: 0rem 0rem 0rem 0rem      ;
}

/*
  Supplier logo that is placed in the upper left of the page

  Logo del proveedor el cual está situado en la parte superior izquierda de la página
*/ 
img.supplier__header__logo
{
    /* background: lightgreen          ; */
        height: 4rem                         ;
    /* allows for landscape and portrait logo shapes to be displayed equally well */
    object-fit: contain                      ;
        margin: 0rem 0rem 0rem 0rem          ;
    /* max-height: clamp(2rem, 8vmin, 10rem )   ; */
         width: 100%                         ;

}

/*
  Description of the supplier, e.g. "French company specialized in interventional neuroradiology products".

  Descripción del proveedeor, p.e. "Empresa francesa especializade en productos de neuroradiología intervencionista"
*/
div.supplier__header__description
{
     /* background: mistyrose   ; */
          color: #7A94D2     ;
        display: flex          ;
  	font-weight: bold          ;
      font-size: 1rem          ;
      grid-area: supplier__header__description   ;
         margin: 0.5rem 1rem 0rem 4rem    ;
}


nav.supplier__header__breadcrumb
{
       align-self: flex-end                       ;
       /* background: thistle                      ; */
        grid-area: supplier__header__breadcrumb   ;
           margin: 0rem auto 0.5rem 2.5rem        ;
}


ul.breadcrumb__list
{
      align-items: center       ;
          /* used to prevent hyperlink underline of breadcrumb links from extending beyond text last character */
          display: flex         ;
   flex-direction: row          ;
        flex-wrap: wrap         ;
  justify-content: flex-start   ;
       list-style: none         ;
}


li.breadcrumb__item
{
  /* border: 1px red solid         ; */
    /* override/reset default margin value */
    margin-left: 0rem     ;
    /* override/reset default value */
   padding-left: 0rem     ;
}


/* 
  Add a separation symbol between one level of the breadcrum trail and 
  the lower next. A "greater than" symbol is being used as the separator symbol.
*/
li.breadcrumb__item + li.breadcrumb__item:before 
{
    content: '>'     ;
    padding: 0.5rem  ;
}


a.breadcrumb__link
{
  color: #668;
  font-weight: 600;
  /* text-decoration: none; */
}

a.breadcrumb__link:hover
{
  text-decoration: underline  ;
}

/*
   Used for the link that corresponds to the current page 
   (located at right end of crumb trail)
   Usado para el vínculo que corresponde a la página actual 
   (ubicado en la parte terminal derecha de la ruta de navegación)
*/
a.breadcrumb__link--dead
{
  background-color: lightyellow;
  cursor: default   ;
  font-weight: 800;
  text-decoration: none   ;
}


a.breadcrumb__link--dead:hover
{
  text-decoration: none  ;
}


/*
  This CSS class imparts a highlight color to product title and is helpful to distinguish
  products that have very similar names, e.g. "Catéter Multipróposito Locking" and "Catheter Multipróposito Non-Locking".
  The pages that use this class include those that are devoted to a single product as well as pages or 
  listing multiple products.

  Esta clase CSS imparte un color resaltante y ayuda a diferenciar productos que tienen
  nombres muy similares como  "Catéter Multipróposito Locking" and "Catheter Multipróposito Non-Locking" 
  Las páginas que usan esta clase incluyen las que muestran una lista de productos y tambien
  las que son dedicadas a tan solo un producto.
*/
span.product_item__name__highlight
{
     color: sienna    ;
}


img.product_image
{
         background: rgba(255, 255, 255, 0.75) ; /* white with a 50% opacity/transparency */                
      border-radius: 0.5rem                      ;
             cursor: pointer                  ;
             margin: 1rem                     ;
         max-height: 15rem                    ;
          max-width: 90%                      ;
          min-width: 6rem                     ;
         transition: 0.3s                     ;
}


/*
  CSS classes to style debene's contact information at the bottom of supplier landing pages.
  The HTML elements will contain, for example, 'Para más información diríjase a info@debene.com'

  Clases CSS usadas para impartir estilos a la información usada para contactar a Debene.
  La información reside al pié de página en la páginas principales de los provedores y contiene,
  por ejemplo, a 'Para más información diríjase a info@debene.com'
*/
div.supplier_landing_page__distributor_contact_information
{
  /* background: aquamarine   ; */
   font-size: inherit        ;
}


a.supplier_landing_page__debene_email
{
  font-size: inherit;
}


img.supplier_landing_page__debene_email
{
  /* background: lightblue; */
  border-radius: 0.5rem                    ;
        display: block                     ;
         margin: 0.5rem auto 0.5rem auto   ;
        padding: 0.5rem 1rem               ;
     transition: box-shadow 250ms          ;
          width: 12rem                     ;
}


img.supplier_landing_page__debene_email:hover
{
       box-shadow: 0 0 1rem rgb(0,0,0,0.2)   ;
}


/*#endregion */



/***********************************************************************
*                                                                      *
*           ➔ WEBFORMS /  FORMULARIOS EN LINEA                        *
*                                                                      *
***********************************************************************/
/* #region */

/* 
//  These styles are used for webforms that allow the user to log in,
//  contact the organization, or request products.
//
//  Estos estilos son usados para formularios en línea que permiten al 
//  usuario iniciar una sesión, contactar la organización, o pedir productos
*/

table.webform_table
{
      /* background: azure   ; */
  border-collapse: collapse   ;
           margin: 0px auto   ;
    /* table-layout: fixed      ; */ /* prevents text content from distorting the horizontal width of cells */
}


/*
  This class is used in the HTML but does not have any styles set to it yet
 tr.webform_row class 
{

}
*/


/*
  Large webforms are sometimes subdivided into sections. This style
  is for the table cell that holds the section title 

  A veces los formularios en línea que son extensos se subdividen
  en secciones. Este estilo es para la celda de tabla que contiene el 
  título de la sección
*/
td.webform_section_title 
{
  border-style: none                ;
         color: #6b6b47           ;
     font-size: 20px                ;
   font-weight: bold                ;
    text-align: left                ;
       padding: 0px 0px 10px 10px   ;
}


td.webform_field
{
    border-style: solid              ;
    border-width: 0px 0px 2px 0px    ;
           color: #555555          ;
     font-weight: bold               ;
         padding: 10px 5px 5px 15px  ;
      text-align: right              ;
  vertical-align: top                ;
     white-space: nowrap             ;
}


tr.webform_row:nth-child(even) td.webform_field 
{
    background: #c2c2a3          ;
  border-color: #b8b894          ;
}

tr.webform_row:nth-child(odd) td.webform_field
{
    background: #c2c2a3          ; 
  border-color: #b8b894          ;
}


td.webform_value
{
  border-style: solid              ;
  border-width: 0px 0px 2px 0px    ;
    text-align: left               ;
}


tr.webform_row:nth-child(even) td.webform_value 
{
    background: #d6d6c2           ;
  border-color: #c2c2a3;
       padding: 5px 15px 5px 10px   ;
}


tr.webform_row:nth-child(odd) td.webform_value 
{
    background: #d6d6c2           ;
  border-color: #c2c2a3           ;
       padding: 5px 10px            ;
}


tr.webform_submit_row td.webform_field 
{
    background: #c2c2a3           ;
  border-color: #b8b894           ;
}


/*
  Style for the table cell that holds the button to submit the webform
  Estilo para la celda de tabla que contiene el botón para enviar el formulario
 */ 
tr.webform_submit_row td.webform_value
{
    background: #d6d6c2           ;
  border-color: #c2c2a3           ;
       padding: 15px 20px           ;
    text-align: center              ;
}


/*
  If the webform was submitted with missing or incorrectly formatted information,
  this <div> element is used to display an error message.
  Si el formulario fue enviado con información faltante o con un formato incorrecto,
  este elemento <div> es usado para mostrar un mensaje de error
*/  
div.webform_error_message 
{
   /*background: lightYellow           ;  */
        color: darkred               ;
  font-family: Verdana                 ;
    font-size: 0.9rem                  ;
  font-weight: normal                  ;
   text-align: left                    ;
}



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


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


/*
  When the cursor is in an <input> or <textarea> elements, the element will be 
  highlighted so that the user can easy tell where they are on the webform.
  Cuando el cursor se encuentra dentro de un elemento <input> o <textarea>, 
  el elemento será resaltado para que el usuario sepa con facilidad 
  donde se encuentra en el formulario
*/
table.webform_table input:focus     ,
table.webform_table textarea:focus 
{
  background: lightYellow   ;
}

/*#endregion */



/***********************************************************************
*                                                                      *
*                     ➔ 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: 800px)
{
  /* hide the header's right panel that contains the company's contact information,
  and hide the header's middle panel with the search form.  Show the header's left panel that contains the Debene logo.
  */
  header.debene__header
  {
              align-items: center   ;

           grid-auto-flow: column   ; 
      grid-template-areas:
                          '    debene__header__left_panel    '
                         ;
    grid-template-columns: 1fr             ;
          justify-content: center;
  }


  div.debene__header__left_panel
  {
    justify-content: center;
  }


  div.debene__header__center_panel   ,
  div.debene__header__right_panel
  {
    display: none;
  }


  /* allow a bit more headroom for the logo */
  #header__debene_logo 
  {
    margin-top: 1rem;
  }


  section.debene__navigation_bar
  {
     background: #7A94D2   ;
    line-height: 2.5rem      ;
    /* remove position: sticky */
       position: relative    ;
          width: 100%        ;
  }


  /* Display an internal search link */
  a.navigation-bar__search-button
  {
      display: inline     ;
    font-size: 1rem       ;
  }


  /* Make the "hamburger icon" ☰ visible
     Hacer visible el "icono de hamburguesa" ☰   */
  label.navigation-bar__toggle-label   ,
  input.navigation-bar__toggle-checkbox:not(:checked) + label.navigation-bar__toggle-label
  { 
         cursor: pointer      ;
        display: block        ;
      font-size: 1rem         ;
    font-weight: bold         ;
        padding: 0.3rem 1rem 0 0   ;
     text-align: right        ;
  }

  /* This positioning is necessary otherwise user cannot scroll down the vertically oriented navigation bar to 
     see the navigation options/buttons beyond the bottom of the screen

     Este posicionamiento es necesario porque, sin él, no es posible deslizarce hacia abajo en la barra de navegación
     par ver las opciones más abajo del fondo de la pantalla (cuando esta tiene una orientación vertical
  */   
  div.debene__navigation_bar
  {
      height: 2rem       ;
    position: relative   ;
  }

  nav.debene__navigation_bar
  {
       align-items: center     ;
    /* Change from aligning top level nav buttons horizontally to staking them vertically. */
    flex-direction: column     ;
              /* intially the nav bar is off screen (not visible) */
              left: -100%      ;
          position: absolute   ;
        transition: all 1.5s ease-in-out   ;
             width: 100%       ;
  }

  /*
    When the "hamburger icon" ☰ is clicked, make the nav bar appear.
    This hamburger icon is within the <label> element associated to a control
    input checkbox that was rendered invisible
  
    Cuando se hace click sobre el "icono de la hamburguesa" ☰, hacer que aparezca
    la barra de navegación.
    El icono de la hamburguesa es dentro de un elemento <label> que está asociado a 
    una casilla (checkbox) de control invisible.
  */
  input.navigation-bar__toggle-checkbox:checked ~ nav.debene__navigation_bar
  {
        /* brings the nav bar from offscreen into the field of view */
        left: 0          ;
    position: absolute   ;
  }


  div.navigation_buttons_dropdown__sublevel_0
  {
    width: 100%   ;
  }


  div.navigation_buttons_dropdown__sublevel_0
  {
    width: 100%   ;
  }


  /* Make the sublevel 1 navigation buttons always visible and centered horizontally */
  div.navigation_buttons_container__sublevel_1   ,
  div.navigation_buttons_dropdown__sublevel_1   ,
  div.navigation_buttons_container__sublevel_1 a.current_page_button   ,
  a.navigation_button__sublevel_1
  {
       display: block      ;
      position: relative   ;
    text-align: center     ;
  }

  a.navigation_button__sublevel_0 ,
  a.navigation_button__sublevel_1 ,
  a.current_page_button
  {
    display: block                         ;
     border: solid 1px #7a7ad1   ;
      width: 100%                          ;
  }


  a.navigation_button__sublevel_1 
  {
     border: solid 1px #bfccf3   ;
  }


  /* Highlight the current page button with a more vivid backgrond color (light yellow) */
  nav a.current_page_button
  {
    background: #f9f9b9             ;
        border: solid 1px #eeeeaa   ;
         width: 100%                  ;
  }


  a.current_page_button::before
  {
    /* position: absolute      ; */
     content: '➔ '        ;
  }

  /* 
    Remove the right-pointing arrow icon on the right side of sublevel 1 buttons that have sublevel 2 children buttons.
  */
  div.navigation_buttons_dropdown__sublevel_1  a.navigation_button__sublevel_1:first-child::after   ,
  div.navigation_buttons_dropdown__sublevel_2  a.navigation_button__sublevel_2:first-child::after   ,
  div.navigation_buttons_dropdown__sublevel_1  a.current_page_button:first-child::after
  {
      content: ''       ;
  }



  div.supplier__header
  {
    grid-template-areas:
                        '       supplier__header__link      '
                        '   supplier__header__breadcrumb    '
                        '   supplier__header__description   '
                        ;

   grid-template-columns: 1fr               ;
                  margin: 1rem              ;
                 row-gap: 0rem              ;
  }
}

/*#endregion */