.dClass_colors_white    { background-color : white;    color : black; }
.dClass_colors_black    { background-color : black;    color : white; }
.dClass_colors_red      { background-color : red;      color : white; }
.dClass_colors_blue     { background-color : blue;     color : white; }
.dClass_colors_green    { background-color : green;    color : white; }
.dClass_colors_orange   { background-color : orange;   color : white; }
.dClass_colors_grey     { background-color : grey;     color : white; }
.dClass_colors_yellow   { background-color : yellow;   color : black; }

.dClass_colors_red10    { background-color : #fc3d46;  color : black; }
.dClass_colors_red20    { background-color : #fa1b1b;  color : black; }
.dClass_colors_red30    { background-color : #fa0202;  color : white; }
.dClass_colors_red40    { background-color : #e80202;  color : white; }
.dClass_colors_red50    { background-color : #d40202;  color : white; }
.dClass_colors_red60    { background-color : #c20404;  color : white; }
.dClass_colors_red70    { background-color : #ad0303;  color : white; }
.dClass_colors_red80    { background-color : #9c0303;  color : white; }
.dClass_colors_red90    { background-color : #8a0101;  color : white; }

.dClass_colors_blue10   { background-color : #9f9afc;  color : black; }
.dClass_colors_blue20   { background-color : #736bfa;  color : black; }
.dClass_colors_blue30   { background-color : #574dfa;  color : white; }
.dClass_colors_blue40   { background-color : #3226fc;  color : white; }
.dClass_colors_blue50   { background-color : #1305fc;  color : white; }
.dClass_colors_blue60   { background-color : #1004cf;  color : white; }
.dClass_colors_blue70   { background-color : #0c02a1;  color : white; }
.dClass_colors_blue80   { background-color : #0a0185;  color : white; }
.dClass_colors_blue90   { background-color : #070157;  color : white; }

.dClass_colors_green10  { background-color : #a7fca7;  color : black; }
.dClass_colors_green20  { background-color : #72fc72;  color : black; }
.dClass_colors_green30  { background-color : #32fa32;  color : white; }
.dClass_colors_green40  { background-color : #02fa02;  color : white; }
.dClass_colors_green50  { background-color : #04d904;  color : white; }
.dClass_colors_green60  { background-color : #04c204;  color : white; }
.dClass_colors_green70  { background-color : #02a802;  color : white; }
.dClass_colors_green80  { background-color : #018501;  color : white; }
.dClass_colors_green90  { background-color : #025402;  color : white; }

.dClass_colors_orange10 { background-color : #fc9247;  color : black; }
.dClass_colors_orange20 { background-color : #fa8837;  color : black; }
.dClass_colors_orange30 { background-color : #fa7c23;  color : white; }
.dClass_colors_orange40 { background-color : #fa700f;  color : white; }
.dClass_colors_orange50 { background-color : #fa6a02;  color : white; }
.dClass_colors_orange60 { background-color : #d65b02;  color : white; }
.dClass_colors_orange70 { background-color : #b84e02;  color : white; }
.dClass_colors_orange80 { background-color : #9e4302;  color : white; }
.dClass_colors_orange90 { background-color : #873a03;  color : white; }

.dClass_colors_grey10   { background-color : #e8e6e6;  color : black; }
.dClass_colors_grey20   { background-color : #cfcccc;  color : black; }
.dClass_colors_grey30   { background-color : #b8b8b8;  color : white; }
.dClass_colors_grey40   { background-color : #9e9d9d;  color : white; }
.dClass_colors_grey50   { background-color : #8a8888;  color : white; }
.dClass_colors_grey60   { background-color : #706e6e;  color : white; }
.dClass_colors_grey70   { background-color : #575656;  color : white; }
.dClass_colors_grey80   { background-color : #454343;  color : white; }
.dClass_colors_grey90   { background-color : #2e2d2d;  color : white; }

.dClass_colors_yellow10 { background-color : #fcfc74;  color : black; }
.dClass_colors_yellow20 { background-color : #fafa52;  color : black; }
.dClass_colors_yellow30 { background-color : #fafa34;  color : black; }
.dClass_colors_yellow40 { background-color : #fafa16;  color : black; }
.dClass_colors_yellow50 { background-color : #fafa02;  color : black; }
.dClass_colors_yellow60 { background-color : #e0e002;  color : white; }
.dClass_colors_yellow70 { background-color : #c9c902;  color : white; }
.dClass_colors_yellow80 { background-color : #b3b302;  color : white; }
.dClass_colors_yellow90 { background-color : #9c9c02;  color : white; }



.dClass_scroll_white    { }
.dClass_scroll_black    { }
.dClass_scroll_red      { }
.dClass_scroll_blue     { }
.dClass_scroll_green    { }
.dClass_scroll_orange   { }
.dClass_scroll_grey     { }
.dClass_scroll_yellow   { }


.dClass_scroll_white::-webkit-scrollbar  { width : 16px; }
.dClass_scroll_black::-webkit-scrollbar  { width : 16px; }
.dClass_scroll_red::-webkit-scrollbar    { width : 16px; }
.dClass_scroll_blue::-webkit-scrollbar   { width : 16px; }
.dClass_scroll_green::-webkit-scrollbar  { width : 16px; }
.dClass_scroll_orange::-webkit-scrollbar { width : 16px; }
.dClass_scroll_grey::-webkit-scrollbar   { width : 16px; }
.dClass_scroll_yellow::-webkit-scrollbar { width : 16px; }

.dClass_scroll_white::-webkit-scrollbar-track  { background: white;  }
.dClass_scroll_black::-webkit-scrollbar-track  { background: black;  }
.dClass_scroll_red::-webkit-scrollbar-track    { background: red;    }
.dClass_scroll_blue::-webkit-scrollbar-track   { background: blue;   }
.dClass_scroll_green::-webkit-scrollbar-track  { background: green;  }
.dClass_scroll_orange::-webkit-scrollbar-track { background: orange; }
.dClass_scroll_grey::-webkit-scrollbar-track   { background: grey;   }
.dClass_scroll_yellow::-webkit-scrollbar-track { background: yellow; }

.dClass_scroll_white::-webkit-scrollbar-thumb  { background : grey;  border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }
.dClass_scroll_black::-webkit-scrollbar-thumb  { background : white; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }
.dClass_scroll_red::-webkit-scrollbar-thumb    { background : white; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }
.dClass_scroll_blue::-webkit-scrollbar-thumb   { background : white; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }
.dClass_scroll_green::-webkit-scrollbar-thumb  { background : white; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }
.dClass_scroll_orange::-webkit-scrollbar-thumb { background : white; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }
.dClass_scroll_grey::-webkit-scrollbar-thumb   { background : white; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }
.dClass_scroll_yellow::-webkit-scrollbar-thumb { background : black; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); }



/* https://css-tricks.com/custom-scrollbars-in-webkit/ */
/* https://css-tricks.com/examples/WebKitScrollbars/ */
/* https://pixonauta.com/barra-de-scroll-personalizada-con-css/ */
/* https://github.com/adobe/webkit/blob/master/LayoutTests/scrollbars/scrollbar-buttons.html */

.dClass_scroll_grey03_red03::-webkit-scrollbar { width: 16px; }
.dClass_scroll_grey03_red03::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba( 0, 0, 0, 0.3 ); border-radius: 16px; }
.dClass_scroll_grey03_red03::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba( 0, 0, 0, 0.8 ); border-radius: 16px; background: rgba( 255, 0, 0, 0.3 ) }
.dClass_scroll_grey03_red03::-webkit-scrollbar-button:single-button
{
    background-color  : transparent;
    display           : block;
    background-size   : 10px;
    background-repeat : no-repeat;
}


/*
.dClass_scroll_grey80::-webkit-scrollbar-button:single-button:hover
{
    background-color: #d0cbcb;
}

.dClass_scroll_grey80::-webkit-scrollbar-button:single-button:vertical:decrement
{
    height: 14px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

.dClass_scroll_grey80::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}
*/
/* Down */
/*
.dClass_scroll_grey80::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 14px;
    width: 16px;
    background-position: center 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

.dClass_scroll_grey80::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}
*/


/*
.dClass_scroll_grey80::-webkit-scrollbar-button { display: block;  width: 17px;  height: 17px; }
.dClass_scroll_grey80::-webkit-scrollbar-button:decrement:start {  background-color:lightblue;  border:2px solid black; }
.dClass_scroll_grey80::-webkit-scrollbar-button:increment:start {  background-color:lightgreen; border:2px solid black; }
.dClass_scroll_grey80::-webkit-scrollbar-button:decrement:end   {  background-color:orange;     border:2px solid black; }
.dClass_scroll_grey80::-webkit-scrollbar-button:increment:end   {  background-color:brown;      border:2px solid black; }
*/
/*
.dClass_scroll_grey80::-webkit-scrollbar  { width : 16px; }

.dClass_scroll_grey80::-webkit-scrollbar-track  { background : #161617;  }

.dClass_scroll_grey80::-webkit-scrollbar-thumb  { background : linear-gradient(90deg,#3c3c40,#3c3c40 1px,#111 0,#111); border-radius: 16px; }
*/
/* .dClass_scroll_grey80::-webkit-scrollbar-track  { background : #454343;  } */

/* .dClass_scroll_grey80::-webkit-scrollbar-thumb  { background : #706e6e; border-radius: 16px;  box-shadow: inset 2px 2px 2px hsl( 0deg 0% 100% / 25% ), inset -2px -2px 2px rgb( 0 0 0 / 25% ); } */


/* background: linear-gradient(90deg,#434343,#434343 1px,#111 0,#111); */









.dCursor_Pointer
{
  cursor           : pointer;
}

.css-button-shadow--grey
{
  min-width        : 40px;
  height           : 40px;

  color            : #fff;
  background-color : #6c757d;

/*margin           : 0px 10px;*/
  padding          : 5px 10px;
  font-weight      : bold;
  cursor           : pointer;
  transition       : all 0.3s ease;
  position         : relative;
/*display          : inline-block;*/
/*outline          : none;*/
  border-radius    : 5px;
  border           : none;
  box-shadow       : 0 3px 1px -2px #ccc, 0 2px 2px 0 #ccc, 0 1px 5px 0 #ccc;
}

.css-button-shadow--grey:active
{
  box-shadow       : 0 4px 2px -3px #ccc, 0 4px 5px 1px #ccc, 0 2px 7px 1px #ccc;
}


.dButtons_QTY
{
  min-width        : 40px;
  height           : 40px;
  color            : #fff;
  padding          : 5px 10px;
  font-weight      : bold;
  cursor           : pointer;
  transition       : all 0.3s ease;
  position         : relative;
  display          : inline-block;
  outline          : none;
  border-radius    : 5px;
  z-index          : 0;
  background       : #fff;
  overflow         : hidden;
  border           : 2px solid #212529;
  color            : #212529;
  text-align       : center;
}



.css-button-sliding-to-bottom--black
{
  min-width        : 40px;
  height           : 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  z-index: 0;
  background: #fff;
  overflow: hidden;
  border: 2px solid #212529;
  color: #212529;
}

.css-button-sliding-to-bottom--black:hover
{
  color: #fff;
}

.css-button-sliding-to-bottom--black:hover:after
{
  height: 100%;
}
.css-button-sliding-to-bottom--black:after
{
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  left: 0;
  top: 0;
  height: 0;
  width: 100%;
  background: #212529;
}




/* No margin, because it is vertical centered with dClass_v_center_right */

.dButtons_Next_Active, .dButtons_Prev_Active, .dButtons_Next_Inactive, .dButtons_Prev_Inactive, .dButtons_Transparent, .dButtons_Text
{
  color            : white;

  width            : auto;
  height           : auto;
  overflow         : hidden;

  font-size        : 18px;
  cursor           : pointer;

  padding          : 10px 20px 10px 20px;
  border           : 0px;
  border-radius    : 5px;
  text-align       : center;
  z-index          : 1;
}

.dButtons_Next_Active   {  background-color : blue; }
.dButtons_Prev_Active   {  background-color : #6a65f7; }  /* #25961d */
.dButtons_Next_Inactive {  background-color : #909c8f; }
.dButtons_Prev_Inactive {  background-color : #909c8f; }
.dButtons_Transparent   {  background-color : transparent; }

.dButtons_Text          {  background-color : transparent;
                                      color : black;
                                    padding : 5px 5px 5px 5px;
                                     border : 1px solid #EEEEEE;
                                  font-size : 14px;
                        }


.dButtons_Neutral, .dButtons_Inactive, .dButtons_Active
{
  width            : auto;
  height           : auto;
  overflow         : hidden;

  font-size        : 18px;
  cursor           : pointer;

  padding          : 10px 20px 10px 20px;
  margin           : 10px;

  border           : 2px;
  border-style     : solid;
  border-color     : transparent;
  border-radius    : 5px;

  z-index          : 0;
}

.dButtons_Neutral  {  background-color : #e6e6e6;   color : black; }
.dButtons_Inactive {  background-color : #e6e6e6;   color : black; }
.dButtons_Active   {  background-color : blue;      color : white; }

.dButtons_Inactive:hover {  background-color : blue;      color : white; }





.dButtons_Enter, .dButtons_SignUp, .dButtons_Intranet
{
  overflow         : hidden;

  font-family      : Arial, sans-serif;
  font-weight      : normal;
  font-size        : 17px;

  cursor           : pointer;

  padding          : 5px 20px 5px 20px;
  margin           : 10px;

  border           : 3px;
  border-style     : solid;
  border-color     : transparent;
  border-radius    : 9em;

  z-index          : 1;
}

.dButtons_Enter          {  background-color : #757575;       color : #EEEEEE; border-color : #757575; }
.dButtons_Enter:hover    {  background-color : #424242;       color : #FFFFFF; border-color : #424242; }

.dButtons_SignUp         {  background-color : #3D78A6;       color : #EEEEEE; border-color : #3D78A6; }
.dButtons_SignUp:hover   {  background-color : #1D5480;       color : #FFFFFF; border-color : #1D5480; }

.dButtons_Intranet       {  background-color : transparent;   color : #757575; border-color : #757575; }
.dButtons_Intranet:hover {  background-color : transparent;   color : #000000; border-color : #000000; }










.dAnchor:link, .dAnchor:visited, .dAnchor:link:active, .dAnchor:visited:active
{
    color           : white;
    text-decoration : underline;
    cursor          : pointer;
}

.dAnchor:hover
{
    color           : #8ee1fa;
}

.dProduct_OD_1, .dProduct_OD_Total_Sale_1
{
/*
  font-family      : Verdana, sans-serif;
  font-weight      : normal;
  font-size        : 2vmin;

  margin           : 10px;
*/
  color            : #333333;
}
/*
.dProduct_OD_1            { width : 70%; }
.dProduct_OD_Total_Sale_1 { width : 30%; }
*/

html
{
  height: 100%;
}

body
{
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}


/*
    NOTE:
    - With position relative, Top and Buttom Sanck Effect does nothing
    - With position relative, height : 100%;  and  width : 100%; Style, has no effect

    NOTE:
    - With position fixed and absolute, All Sanck Effect work
    - With position fixed and absolute, height : 100%;  and  width : 100%; Style, work
*/

.dStyle_position_fixed    { position  : fixed;    }
.dStyle_position_relative { position  : relative; }
.dStyle_position_static   { position  : static;   }
.dStyle_position_absolute { position  : absolute; }
.dStyle_position_sticky   { position  : sticky;   }
.dStyle_position_initial  { position  : initial;  }
.dStyle_position_inherit  { position  : inherit;  }

.dClass_full_div, .dClass_full_land_div, .dClass_full_port_div
{
    width               : 100%;

    margin              : 0;
    padding             : 20px 20px 20px 20px;

    background-position : center;
    background-repeat   : no-repeat;
    background-size     : cover;

    font-family         : Gill Sans, Verdana;
    font-weight         : normal;
    font-size           : 16px;

    overflow-y          : visible;

    box-sizing          : border-box;   /* https://www.w3schools.com/css/css_padding.asp    fix width and padding undesirable result */
}

.dClass_full_div      { min-height : 100%; }
.dClass_full_land_div { min-height : 100vmin; }
.dClass_full_port_div { min-height : 100vmax; }





/* Necesario para que no se desajuste el bottom padding */

* {box-sizing:border-box}


.dDisplay_None  { display : none;  }
.dDisplay_Block { display : block; }




.dClass_size_div
{
  /*display             : none;*/

    margin              : 10px;
    padding             : 10px;

    background-position : center;
    background-repeat   : no-repeat;
    background-size     : cover;

    font-family         : Gill Sans, Verdana;
    font-weight         : normal;
    font-size           : 16px;

    border-style        : solid;
}







.dClass_hv_center
{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dClass_hv_center_absolute, .dClass_hv_center_relative
{
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dClass_hv_center_absolute { position: absolute; }
.dClass_hv_center_relative { position: relative; }






.dClass_h_center
{
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.dClass_h_center_absolute, .dClass_h_center_relative
{
  margin: 0;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.dClass_h_center_absolute { position: absolute; }
.dClass_h_center_relative { position: relative; }

.dClass_horizontal_center
{
  margin: auto;

  justify-content:center;
  align-items:center;
  text-align: center;

  width      : 100%;  /* Full width */
  height     : 100%;  /* Full height */
}





.dClass_v_center
{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.dClass_v_center_absolute, .dClass_v_center_relative
{
  margin: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.dClass_v_center_absolute { position: absolute; }
.dClass_v_center_relative { position: relative; }





/*
  -ms-transform: translateY(-20%);
  transform: translateY(-20%);
*/
.dClass_v_bottom_absolute, .dClass_v_bottom_relative
{
  margin: 0;
  top: 100%;
}

.dClass_v_bottom_absolute { position: absolute; }
.dClass_v_bottom_relative { position: relative; }







.dClass_v_center_right
{
  margin        : 0;
  position      : absolute;
  top           : 50%;
  right         : 10px;
  -ms-transform : translateY(-50%);
  transform     : translateY(-50%);
}

.dClass_v_center_left
{
  margin        : 0;
  position      : absolute;
  top           : 50%;
  left          : 10px;
  -ms-transform : translateY(-50%);
  transform     : translateY(-50%);
}



.dClass_top_left        { margin : 0;  position : absolute;     top : 10px;   left : 10px; }
.dClass_top_right       { margin : 0;  position : absolute;     top : 10px;  right : 10px; }

.dClass_bottom_left     { margin : 0;  position : absolute;  bottom : 10px;   left : 10px; }
.dClass_bottom_right    { margin : 0;  position : absolute;  bottom : 10px;  right : 10px; }

.dClass_top_left_0      { margin : 0;  position : absolute;     top :  0px;   left :  0px; }
.dClass_top_right_0     { margin : 0;  position : absolute;     top :  0px;  right :  0px; }

.dClass_bottom_left_0   { margin : 0;  position : absolute;  bottom :  0px;   left :  0px; }
.dClass_bottom_right_0  { margin : 0;  position : absolute;  bottom :  0px;  right :  0px; }

.dClass_top_left_5      { margin : 0;  position : absolute;     top :  5px;   left :  5px; }
.dClass_top_right_5     { margin : 0;  position : absolute;     top :  5px;  right :  5px; }

.dClass_bottom_left_5   { margin : 0;  position : absolute;  bottom :  5px;   left :  5px; }
.dClass_bottom_right_5  { margin : 0;  position : absolute;  bottom :  5px;  right :  5px; }

.dClass_bottom_10       { margin : 0;  position : absolute;  bottom : 10px; }

.dClass_top_center      { margin : 0;  position : absolute;     top : 10px;   left: 50%;  -ms-transform: translateX(-50%);  transform: translateX(-50%); }
.dClass_bottom_center   { margin : 0;  position : absolute;  bottom : 10px;   left: 50%;  -ms-transform: translateX(-50%);  transform: translateX(-50%); }

.dClass_top_center_0    { margin : 0;  position : absolute;     top :  0px;   left: 50%;  -ms-transform: translateX(-50%);  transform: translateX(-50%); }
.dClass_bottom_center_0 { margin : 0;  position : absolute;  bottom :  0px;   left: 50%;  -ms-transform: translateX(-50%);  transform: translateX(-50%); }

.dClass_top_center_5    { margin : 0;  position : absolute;     top :  5px;   left: 50%;  -ms-transform: translateX(-50%);  transform: translateX(-50%); }
.dClass_bottom_center_5 { margin : 0;  position : absolute;  bottom :  5px;   left: 50%;  -ms-transform: translateX(-50%);  transform: translateX(-50%); }


.dClass_triangle-top-right
{
    width       : 0;
    height      : 0;
    margin      : 0;  
    padding     : 0;  
    border-top  : 75px solid red;
    border-left : 75px solid transparent;
}




.dClass_X_Close
{
    cursor           : pointer;
    position         : absolute;
    top              : 0px;
    right            : 0px;
    width            : auto;
    margin           : 2px;
    padding          : 5px;
    background-color : transparent;
    font-weight      : normal;
    font-size        : 20px;
    transition       : 0.6s ease;
    user-select      : none;

    line-height      : 0.7;

    border-width     : 0px 0px 2px 0px;
    border-color     : transparent;
    border-style     : solid;
}

/* On hover, add a black background color with a little bit see-through */

.dClass_X_Close:hover { font-weight      : bold; }



.d2Class_X_Close
{
    cursor           : pointer;
    position         : absolute;

    right            : 5px;
    width            : auto;

    margin           : 2px;
    padding          : 5px;

    color            : black;
    background-color : transparent;

    font-weight      : normal;
    font-size        : 20px;
    transition       : 0.6s ease;
    user-select      : none;

    line-height      : 0.7;

    border-width     : 2px;
    border-color     : transparent;
    border-style     : solid;
    border-radius    : 50%;
}

.d2Class_X_Close:hover { font-weight : bold;   color : white;    border-color : white; }



.d2Class_Symbol, .d2Class_Symbol_absolute, .d2Class_Symbol_relative
{
    cursor           : pointer;
    position         : absolute;

    width            : auto;

    margin           : 2px;
    padding          : 5px;

    color            : #424242;
    background-color : transparent;

    font-weight      : normal;
    font-size        : 20px;
    transition       : 0.6s ease;
    user-select      : none;

    line-height      : 0.7;

    border-width     : 2px;
    border-color     : transparent;
    border-style     : solid;
    border-radius    : 50%;
    
    z-index          : 1;
}

.d2Class_Symbol_absolute { position : absolute }
.d2Class_Symbol_relative { position : relative }

.d2Class_Symbol:hover          { font-weight : bold;   color : #000000; border-color : #000000; }
.d2Class_Symbol_absolute:hover { font-weight : bold;   color : #000000; border-color : #000000; }
.d2Class_Symbol_relative:hover { font-weight : bold;   color : #000000; border-color : #000000; }





.dClass_Curtain, .dClass_Absolute_Curtain
{
    top              : 0;
    left             : 0;
    height           : 100%;
    width            : 100%;
    margin           : 0px;
    padding          : 0px;
    border-radius    : 0px;
    border-width     : 0px;
}

.dClass_Curtain          {  position : fixed; }
.dClass_Absolute_Curtain {  position : absolute; }




/* Fading animation */

.dClass_fade
{
    animation-name    : dClass_fade;
    animation-duration: 1.5s;
}

@keyframes dClass_fade
{
    from { opacity :  .4 }
    to   { opacity : 1   }
}







/* The dots/bullets/indicators */

.dClass_slide_dot_landscape
{
  cursor           : pointer;
  height           : 2.5vmax;
  width            : 2.5vmax;
  margin           : 10px 30px 10px 30px;
  background-color : #bbb;
  border-radius    : 50%;
  display          : inline-block;
  transition       : background-color 0.6s ease;
}

.dClass_slide_dot_portrait
{
  cursor           : pointer;
  height           : 4vmin;
  width            : 4vmin;
  margin           : 10px 15px 10px 15px;
  background-color : #bbb;
  border-radius    : 50%;
  display          : inline-block;
  transition       : background-color 0.6s ease;
}

.dClass_slide_dot_landscape_active, .dClass_slide_dot_landscape:hover
{
  background-color : #717171;
}

.dClass_slide_dot_portrait_active, .dClass_slide_dot_portrait:hover
{
  background-color : #717171;
}







/* Next & previous buttons */

.dClass_slide_prev, .dClass_slide_next
{
    cursor           : pointer;
    position         : absolute;
    top              : 50%;
    width            : auto;
    margin-top       : -22px;
    padding          : 16px;
    color            : white;
    background-color : rgba(0,0,0,0.2);
    font-weight      : bold;
    font-size        : 30px;
    transition       : 0.6s ease;
    border-radius    : 0 3px 3px 0;
    user-select      : none;
}

/* Position the "prev button" to the left */

.dClass_slide_prev
{
    left          : 0;
    border-radius : 0 3px 3px 0;   /* Superior Izquierdo -> Superior Derecho */
}

/* Position the "next button" to the right */

.dClass_slide_next
{
    right         : 0;
    border-radius : 3px 0 0 3px;   /* Superior Izquierdo -> Superior Derecho */
}

/* On hover, add a black background color with a little bit see-through */

.dClass_slide_prev:hover, .dClass_slide_next:hover
{
    background-color: rgba(0,0,0,0.8);
}


.dClass_full_snackbar_bottom
{
  bottom              : 0px;      /* 0px from the bottom */

  -webkit-animation   : full_snackbar_fadein_bottom 2.5s;
  animation           : full_snackbar_fadein_bottom 2.5s;
}

.dClass_full_snackbar_top
{
  top                 : 0px;      /* 0px from the top */

  -webkit-animation   : full_snackbar_fadein_top 2.5s;
  animation           : full_snackbar_fadein_top 2.5s;
}

.dClass_full_snackbar_left
{
  left                : 0px;      /* 0px from the left */

  -webkit-animation   : full_snackbar_fadein_left 2.5s;
  animation           : full_snackbar_fadein_left 2.5s;
}

.dClass_full_snackbar_right
{
  right               : 0px;      /* 0px from the right */

  -webkit-animation   : full_snackbar_fadein_right 2.5s;
  animation           : full_snackbar_fadein_right 2.5s;
}







@-webkit-keyframes full_snackbar_fadein_bottom
{
  from { bottom:  -100%;  }
  to   { bottom:     0px; }
}

@keyframes full_snackbar_fadein_bottom
{
  from { bottom:   -100%; }
  to   { bottom:     0px; }
}

@-webkit-keyframes full_snackbar_fadeout_bottom
{
  from { bottom:     0px; }
  to   { bottom:  -100%;  }
}

@keyframes full_snackbar_fadeout_bottom
{
  from { bottom:     0px; }
  to   { bottom:  -100%;  }
}





@-webkit-keyframes full_snackbar_fadein_top
{
  from { top:  -100%;  }
  to   { top:     0px; }
}

@keyframes full_snackbar_fadein_top
{
  from { top:   -100%; }
  to   { top:     0px; }
}

@-webkit-keyframes full_snackbar_fadeout_top
{
  from { top:     0px; }
  to   { top:  -100%;  }
}

@keyframes full_snackbar_fadeout_top
{
  from { top:     0px; }
  to   { top:  -100%;  }
}







@-webkit-keyframes full_snackbar_fadein_left
{
  from { left:  -100%;  }
  to   { left:     0px; }
}

@keyframes full_snackbar_fadein_left
{
  from { left:   -100%; }
  to   { left:     0px; }
}

@-webkit-keyframes full_snackbar_fadeout_left
{
  from { left:     0px; }
  to   { left:  -100%;  }
}

@keyframes snackbar_fadeout_left
{
  from { left:     0px; }
  to   { left:  -100%;  }
}







@-webkit-keyframes full_snackbar_fadein_right
{
  from { right:  -100%;  }
  to   { right:     0px; }
}

@keyframes full_snackbar_fadein_right
{
  from { right:   -100%; }
  to   { right:     0px; }
}

@-webkit-keyframes full_snackbar_fadeout_right
{
  from { right:     0px; }
  to   { right:  -100%;  }
}

@keyframes full_snackbar_fadeout_right
{
  from { right:     0px; }
  to   { right:  -100%;  }
}




.dClass_size_snackbar_top_left
{
  top                 : 0px;      /* 0px from the top */
  left                : 0px;      /* 0px from the left */

  -webkit-animation   : size_snackbar_fadein_top 2.5s;
  animation           : size_snackbar_fadein_top 2.5s;
}

.dClass_size_snackbar_top_right
{
  top                 : 0px;      /* 0px from the top */
  right               : 0px;      /* 0px from the right */

  -webkit-animation   : size_snackbar_fadein_top 2.5s;
  animation           : size_snackbar_fadein_top 2.5s;
}

.dClass_size_snackbar_bottom_left
{
  bottom              : 0px;      /* 0px from the bottom */
  left                : 0px;      /* 0px from the left */

  -webkit-animation   : size_snackbar_fadein_bottom 2.5s;
  animation           : size_snackbar_fadein_bottom 2.5s;
}

.dClass_size_snackbar_bottom_right
{
  bottom              : 0px;      /* 0px from the bottom */
  right               : 0px;      /* 0px from the right */

  -webkit-animation   : size_snackbar_fadein_bottom 2.5s;
  animation           : size_snackbar_fadein_bottom 2.5s;
}







@-webkit-keyframes size_snackbar_fadein_top
{
  from { top:  -100%;   opacity: 0; }
  to   { top:     0px;  opacity: 1; }
}

@keyframes size_snackbar_fadein_top
{
  from { top:   -100%;  opacity: 0; }
  to   { top:     0px;  opacity: 1; }
}

@-webkit-keyframes size_snackbar_fadeout_top
{
  from { top:     0px;  opacity: 1; }
  to   { top:  -100%;   opacity: 0; }
}

@keyframes size_snackbar_fadeout_top
{
  from { top:     0px;  opacity: 1; }
  to   { top:  -100%;   opacity: 0; }
}







@-webkit-keyframes size_snackbar_fadein_bottom
{
  from { bottom:  -40px;  opacity: 0; }
  to   { bottom:     0px; opacity: 1; }
}

@keyframes size_snackbar_fadein_bottom
{
  from { bottom:  -40px;  opacity: 0; }
  to   { bottom:     0px; opacity: 1; }
}

@-webkit-keyframes size_snackbar_fadeout_bottom
{
  from { bottom:     0px; opacity: 1; }
  to   { bottom:  -40px;  opacity: 0; }
}

@keyframes size_snackbar_fadeout_bottom
{
  from { bottom:     0px; opacity: 1; }
  to   { bottom:  -40px;  opacity: 0; }
}


.landscape
{
  display: none;
}

.portrait
{
}


/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px)
{
    .landscape
    {
        display: block;
    }
    .portrait
    {
        display: none;
    }
}



.none
{
  display: none;
}

.block
{
  display: block;
}


.dClass_form_div_input
{ 
    position       : relative;
    margin-top     : 20px;
    margin-bottom  : 40px;
    box-sizing     : border-box;
}

.dClass_form_div_input_sql_list
{ 
    position       : relative;
    margin-top     : 10px;
    margin-bottom  : 25px;
    box-sizing     : border-box;
}


.dClass_form_input, .dClass_form_area
{
    font-family   : Gill Sans, Verdana;
    font-size     : 16px;
    padding       : 5px 10px;
    margin        : 0;

    display       : inline-block;
    width         : 100%;
    border        : 1px solid #ccc;
    border-radius : 4px;
/*  border-bottom : 1px solid #757575;  */

    box-sizing    : border-box;
 }

.dClass_form_area
 {
    margin        : 5px 0px;
 }
 
.dClass_form_input_readonly  { color : #5c5c61; }

.dClass_form_input:focus     { outline : none; }

/* The label but like a placeholder */
.dClass_form_input_label
{
    font-family        : "Times New Roman", Times, serif;
    color              : #999;
    font-size          : 18px;
    font-weight        : normal;
    position           : absolute;
    pointer-events     : none;
    left               : 5px;
    top                : 5px;
    transition         : 0.2s ease all; 
    -moz-transition    : 0.2s ease all; 
    -webkit-transition : 0.2s ease all;
}

.dClass_form_input_err_label
{
    font-family        : Gill Sans, Verdana;
    color              : red; 
    font-size          : 12px;
    font-weight        : normal;
    position           : absolute;
    pointer-events     : none;
    left               : 5px;
    bottom             : -17px;
}


/* The label but like a top label */
.dClass_form_input:focus ~ .dClass_form_input_label,
.dClass_form_input:valid ~ .dClass_form_input_label,
.dClass_form_input:read-only ~ .dClass_form_input_label
{
    top         : -19px;
    font-family : Gill Sans, Verdana;
    font-size   : 14px;
    font-weight : bold;
    color       : blue;   /*  #5264AE;  */
}

.bar
{ 
    position : relative;
    display  : block;
    width    : 100%;
}

.bar:before, .bar:after
{
    content            : '';
    height             : 2px; 
    width              : 0;
    bottom             : 1px; 
    position           : absolute;
    background         : #5264AE; 
    transition         : 0.2s ease all; 
    -moz-transition    : 0.2s ease all; 
    -webkit-transition : 0.2s ease all;
}

.bar:before
{
    left : 50%;
}
.bar:after
{
    right : 50%; 
}

.dClass_form_input:focus ~ .bar:before, .dClass_form_input:focus ~ .bar:after
{
    width : 50%;
}


.highlight
{
    position       : absolute;
    height         : 60%; 
    width          : 100%; 
    top            : 25%; 
    left           : 0;
    pointer-events : none;
    opacity        : 0.5;
}


.dClass_form_div_input:focus ~ .highlight
{
    -webkit-animation : inputHighlighter 0.3s ease;
    -moz-animation    : inputHighlighter 0.3s ease;
    animation         : inputHighlighter 0.3s ease;
}

@-webkit-keyframes inputHighlighter
{
    from { background : #5264AE; }
    to   { width      : 0; background : transparent; }
}
@-moz-keyframes inputHighlighter
{
    from { background : #5264AE; }
    to   { width      : 0; background : transparent; }
}
@keyframes inputHighlighter
{
    from { background : #5264AE; }
    to   { width      : 0; background : transparent; }
}




.dClass_form_Upper   { text-transform: uppercase;  }
.dClass_form_Lower   { text-transform: lowercase;  }
.dClass_form_Capital { text-transform: capitalize; }




/* ----------------------------------------------------------------------------------------------------------------------------- */

.live-search-box
{
    position: relative;
    display: inline-block;

    margin  : 0px;
    padding : 0px;

    border  : 0px;
}


.live_search_result
{
    position: absolute;

    z-index: 999;

    background-color: #FFFFFF;

    top: 55%;
    left: 0;
    width: 100%;

    /* box-sizing: border-box; */
}


/* Formatting result items */

.live_search_result p
{
    margin: 0;
    padding: 5px 5px;

    border: 1px solid #CCCCCC;
    border-top: none;

    cursor: pointer;
}

.live_search_result p:hover { background: #d2d2d2; }



.dClass_form_input_01, .dClass_form_area_01
{
    font-family   : Gill Sans, Verdana;
    font-size     : 16px;
    padding       : 5px 10px;
    margin        : 0;

    display       : inline-block;
    width         : 100%;
    border        : 1px solid #ccc;
    border-radius : 4px;
    
    color            : black;
    background-color : #F5F5F5;

    box-sizing    : border-box;
 }

.dClass_form_area_01
 {
    margin        : 5px 0px;
 }
 
.dClass_form_input_01_readonly  { color : #757575; background-color : #E0E0E0; }

.dClass_form_input_01:focus     { outline : none; }

/* The label but like a placeholder */
.dClass_form_input_01_label
{
    font-family        : "Times New Roman", Times, serif;
    color              : black;
    font-size          : 18px;
    font-weight        : normal;
    position           : absolute;
    pointer-events     : none;
    left               : 5px;
    top                : 5px;
    transition         : 0.2s ease all; 
    -moz-transition    : 0.2s ease all; 
    -webkit-transition : 0.2s ease all;
}

.dClass_form_input_01_err_label
{
    font-family        : Gill Sans, Verdana;
    color              : orange; 
    font-size          : 12px;
    font-weight        : normal;
    position           : absolute;
    pointer-events     : none;
    left               : 5px;
    bottom             : -17px;
}


/* The label but like a top label */
.dClass_form_input_01:focus ~ .dClass_form_input_01_label,
.dClass_form_input_01:valid ~ .dClass_form_input_01_label,
.dClass_form_input_01:read-only ~ .dClass_form_input_01_label
{
    top         : -19px;
    font-family : Gill Sans, Verdana;
    font-size   : 14px;
    font-weight : bold;
    color       : white;   /*  #5264AE;  */
}



.dClass_processing
{
   position      : relative;

   border        : 8px solid #f3f3f3; /* Light grey */
   border-top    : 8px solid #3498db; /* Blue */
   border-radius : 50%;
   width         : 40px;
   height        : 40px;

   margin        : auto;

   animation     : dClass_spin 1.3s linear infinite;
}

@keyframes dClass_spin
{
   0%   { transform : rotate(  0deg ); }
   100% { transform : rotate(360deg ); }
}


.dClass_lp01_header_1, .dClass_lp01_header_2
{
    position         : fixed;
    display          : flex;
    top              : 0px;
    min-height       : 70px;

    margin           : 0px;
    padding          : 0px;

    border-width     : 1px;
    border-style     : solid;

    box-sizing       : border-box;

    box-shadow       : 0px 0px 6px 0px rgba( 0, 0, 0, 0.4 );
}

.dClass_lp01_header_1 { width : 100%;    }
.dClass_lp01_header_2 { width : 100%; max-width : 1050px; }

/* .dClass_port_lp01_header   { width : calc( 100% - 40px ); } */ /* FULL <div> padding 20 px */

/* Given the attr position = fixed we need two attributes: width and max-width, because using only max-width */
/*     we do not achieve the objectives */
/* complete the <div> whith dClass_h_center_absolute class */










.dClass_lp01_header_component_1
{
    position         : absolute;
/*  display          : inline-block; */

    padding          : 0px;    /* 0px 0px 0px 20px; FULL div padding 20px */ /* 0px 0px 0px 30px; paragraph container padding */
    margin           : 0px;

    border-width     : 1px;
    border-style     : solid;

    box-sizing       : border-box;
}










.dClass_land_lp01_container_1, .dClass_land_lp01_container_2
{
    position         : relative;
    top              : 70px;
    min-height       : calc(100vmin - 70px - 40px);  /* 60px : Header Hight      40px : FULL div padding 20px * 2 */

    display          : flex;
    border-radius    : 10px;

    box-shadow       : 0px 6px 6px 0px rgba( 0, 0, 0, 0.4 );
}

.dClass_land_lp01_container_1 {     width : 80%;    }
.dClass_land_lp01_container_2 { max-width : 1050px; }

.dClass_port_lp01_container
{
    position         : relative;
    top              : 70px;
    width            : 100%;
    min-height       : calc(100vmax - 70px - 40px);  /* 60px : Header Hight      40px : FULL div padding 20px * 2 */

    display          : block;
    border-radius    : 10px;

    box-shadow       : 0px 6px 6px 0px rgba( 0, 0, 0, 0.4 );
}














.dClass_land_lp01_paragraph, .dClass_port_lp01_paragraph
{
    position         : relative;
    top              : 0px;
    margin           : 0px;

    background-color : transparent;
    border-width     : 1px;
    border-style     : solid;
    border-radius    : 10px;

    text-align       : justify;

    box-sizing       : border-box;
}


.dClass_land_lp01_paragraph { padding : 30px; width :  49%; min-height : calc(100vmin - 70px - 40px);  /* 60px : Header Hight      40px : FULL div padding 20px * 2 */ }
.dClass_port_lp01_paragraph { padding : 10px; width : 100%;     height : none; }









.dClass_land_lp01_image, .dClass_port_lp01_image
{
    position         : relative;
    top              : 0px;
    margin           : 0px;

    background-color : transparent;
    border-width     : 1px;
    border-style     : solid;
    border-radius    : 10px;

    box-sizing       : border-box;
}

.dClass_land_lp01_image { padding : 30px; width :  49%; min-height : calc(100vmin - 70px - 40px);  /* 60px : Header Hight      40px : FULL div padding 20px * 2 */ }
.dClass_port_lp01_image { padding : 10px; width : 100%;     height : none; }


.dClass_land_lp01_img, .dClass_port_lp01_img
{
    position         : relative;
    margin           : 0px;
    padding          : 0px;

    background-color : transparent;
    border-width     : 1px;
    border-style     : solid;
    border-radius    : 10px;

    box-sizing       : border-box;
}

.dClass_land_lp01_img { width :  70%; }
.dClass_port_lp01_img { width : 100%; }


.dClass_lp01_img
{
    width            : 100%;
    border-width     : 1px;
    border-style     : solid;
    border-color     : transparent;
    border-radius    : 10px;

    box-sizing       : border-box;
}

.dClass_lp01_AutoSizeAdjusted_img
{
    border-width     : 1px;
    border-style     : solid;
    border-color     : transparent;
    border-radius    : 10px;

    box-sizing       : border-box;
}









.dClass_lp01_form_container
{
    position         : relative;
    top              : 0px;
    margin           : 0px;
    padding          : 20px 0px 20px 20px;
    width            : 100%;
    height           : none;

    background-color : transparent;
    border-width     : 1px;
    border-style     : solid;
    border-radius    : 10px;

    box-sizing       : border-box;
}


.dClass_lp01_form_label_div
{
    margin           : 30px 10px 0px 20px;
    padding          : 0px;

    font-family      : Gill Sans, Verdana;
    font-weight      : bold;
    font-size        : 14px;
}

.dClass_lp01_form_input_div
{
    margin           : 0px 10px 0px 20px;
    padding          : 0px;

    font-family      : Gill Sans, Verdana;
    font-weight      : normal;
    font-size        : 16px;
}

.dClass_lp01_form_err_label_div
{
    margin           : 0px 10px 0px 20px;
    padding          : 0px;

    font-family      : Gill Sans, Verdana;
    font-weight      : normal;
    font-size        : 12px;
}



.dClass_lp01_hn     { font-family : 'Oswald',    sans-serif; }
.dClass_lp01_p      { font-family : 'Open Sans', sans-serif; }
.dClass_lp01_p_b    { font-family : 'Open Sans', sans-serif; font-weight : bold;   }
.dClass_lp01_logo   { font-family : 'Genos',     sans-serif; font-weight : bold;   font-size : 8vmin; margin : 0px; padding : 0px; }
.dClass_lp01_slogan { font-family : 'BenchNine', sans-serif; font-weight : normal; font-size : 8vmin; }




.dClass_lp01_set_of_links_div
{
    margin  : 0px;
    width   : 100%;
    height  : auto;
}

.dClass_lp01_link_div
{
    margin  : 10px 10px 10px 40px;
}