.bblue{border:1px solid blue;}
.bwhite{border:1px solid white;}
.bred{border:1px solid red;}
.bgreen{border:1px solid green;}
.byellow{border:1px solid yellow;}
.bblack{border:1px solid black;}
.bgray{border:1px solid gray;}
.bcel{border:1px solid #00FFFF;}

.scroll-down{display:flex;flex-direction:column;position:relative;}
.scroll-right{display:flex;flex-direction:row;position:relative;}
.scroll-left{display:flex;flex-direction:row-reverse;position:relative;}

.stick2left{position:absolute;left:0px;}
.stick2right{position:absolute;right:0px;}

.mainfont{font-family: 'Play', sans-serif;color: #00FFFF;}
.bgtb{background-color: #00000030;}

.fontwhite{color:white;}
.fontmath{font-family:"Times New Roman", Times, serif;font-style:italic;font-size: 18px;line-height: 0;}
.fontcel{color:#00FFFF;}
.fontmain{font-family: 'Play', sans-serif;}
.fontcourier{font-family: 'Courier New', monospace;}
.fontgray{color:#A5A5A5;}

.fontarial{font-family:Arial, Helvetica, sans-serif;font-size: 14px;text-align: justify;color:white;}
.fontarialcel{font-family:Arial, Helvetica, sans-serif;font-size: 14px;text-align: justify;color:#00FFFF;}

.bgblur{background-color: #00000030;backdrop-filter: blur(4px);}

.hline-top{border-top: 1px solid #D5D5D5;}      /* top horizontal line */
.hline-bottom{border-bottom: 1px solid #D5D5D5;}  /* down horizontal line */
.vline-left{border-left: 1px solid #D5D5D5;}    /* left vertical line */
.vline-right{border-right: 1px solid #D5D5D5;}  /* right vertical line */

.ta-right{text-align:right;}
.ta-center{text-align:center;}
.ta-left{text-align:left;}

.toppadding-5px{padding-top: 5px;}
.hinnermargin-5px{padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;} /* horizontal inner margin */
.hsep-5px{margin: 0px 5px 5px 0px;} /* separation horizontal 5 pixels: right & down */
.u-margin-5px{margin: 0px 5px 5px 5px;}
.o-margin-5px{margin: 5px 5px 5px 5px;}

.fillremain{flex-grow: 1;} /* supuestamente sirve para cubrir el espacio remanente del div */
.no-selectable-text{-webkit-user-select:none;-ms-user-select:none;user-select:none;}
.all-width{width:100%;}
.fit-all{position:absolute;top:0px;right:0px;bottom:0px;left:0px;}

.scrollable-div{
  scroll-behavior: smooth;
  overflow: hidden;
  overflow-y: scroll; /* Add the ability to scroll */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollable-div::-webkit-scrollbar {display: none;}  /* Hide scrollbar for Chrome, Safari and Opera */

.audio-default {
  margin: auto auto auto auto;
  max-width:100%;
  max-height:100%;
  width:100%;
  height:40px;
  z-index: 0;
}

.img-static {
 margin: auto auto auto auto;
 max-width:100%;
 max-height:100%;
 z-index: 0;
}

.obj-default {
 min-width:64px;
 min-height:20px;
}

/*
h1: WAVEDEV Documentation
h2: Getting Started
h3: About
*/


/* NUEVOS 13/04/2025 */

.BlurredPanel{ /* panel dinamico de trabajo */
  overflow:hidden;
  background-color: #00000030;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index:101;
}

.BlurredPanel_LQ{ /* panel dinamico de trabajo */
  overflow:hidden;
  background-color: #00000030;
  z-index:101;
}

.ScrollPanel{ /* este se debe poner en otro div que especifica la posicion en la pantalla , ej: BlurredPanel */
  scroll-behavior: smooth;
  position:absolute;top:0px;bottom:0px;right:0px;left:0px;
  background-color: #00000000; /* transparente */
  overflow: hidden;
  overflow-y: scroll; /* Add the ability to scroll */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.ScrollPanel::-webkit-scrollbar {display: none;}  /* Hide scrollbar for Chrome, Safari and Opera */

.FixedPanel{ /* este se debe poner en otro div que especifica la posicion en la pantalla , ej: BlurredPanel */
  position:absolute;top:0px;bottom:0px;right:0px;left:0px;
  background-color: #00000000; /* transparente */
  overflow: hidden;
}





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

.center_horizontal{
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.center_vertical{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* no funciona bien este para centrar imagenes */
.center{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* para centrar una div que esta dentro de otro div con clase "scrollright" incluida */
/* si no tiene "scrollright" entonces solo centrará horizontalmente*/
/* creo que esto tiene que ver con la propiedad position:relative*/
.center_div{
  display: block;
  margin: auto auto auto auto;
}

.center-horizontal{
  margin: 0;
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.center-vertical{  /* obsoleto? position relative da problemas */
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

@keyframes dummy {
  from {}
  to {}
}

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

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

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

@-webkit-keyframes opacity_up {
  from {opacity:0 }
  to { opacity:1 }
}

@keyframes opacity_up {
  from{ opacity:0 }
  to{ opacity:1 }
}

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

@-webkit-keyframes opacity_down {
  from {opacity:1 }
  to { opacity:0 }
}

@keyframes opacity_down {
  from{ opacity:1 }
  to{ opacity:0 }
}

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

.icon_refresh{
  -webkit-mask:url("/site/image/refresh.png") center/contain;
          mask:url("/site/image/refresh.png") center/contain;
}
.icon_refresh:hover {background: #FFFFFF;} /* Color on mouse-over */
.icon_refresh:active{background: #00FFFF;}  /* Color on mouse-down */