/*fuentes*/
body { font: normal 14px arial, tahoma, helvetica, sans-serif;
	margin:0px;	
	height:100%;
	width:100%;
}
/*body {color:white !important;}*/

a{ display: inline-block; }

/*celda td*/
td,th, .tboton { font: normal 14px arial, tahoma, helvetica, sans-serif; }
/*.colortd{ color:white !important;}*/

/*logo*/
.logo{width:200px; 
	height: auto;
  margin-top: 15px;
	margin-bottom: 30px;
}

/*complementa en style.css*/
.margen0{margin: 0px}
.margen7{margin: 7px;}
.margent7{margin-top: 7px;}
.margenb7{margin-bottom: 7px;}
.margenb10{margin-bottom: 10px;}
.margenb15{margin-bottom: 15px;}
.margent20{margin-top: 20px!important;}
.margent0{margin-top: 0px;}
.margent7{margin-top: 7px;}
.margent-12{margin-top: -12px;}
.margenl9{margin-left: 9px}
.margenr9{margin-right: 9px}

.requerido{color:red; font-weight: bold}

.enlinea {padding: 2px; /*vertical-align: bottom;*/ }
.enlinea, .enlineap{display:inline-block; /*margin: 2px 0px 2px 0px;*/ }
.enlineap{padding: 0px 5px}

.enlineav{display: inline-block; height: 22px; vertical-align: middle;}
.enlineas{display: inline-block; /*height: 30px;*/ vertical-align: super;}

#bloque{width: 30px; height: 30px; vertical-align: bottom}

/*controles*/
select, input[type="text"], textarea, input[type="number"], input[type="password"], input[type="email"], input[type="date"] { 
  border:1px solid rgba(0,0,0,0.2);
  height: 30px;
  background-color: white;
  color:black;
  padding: 3px;
  font-size: 14px;
  border-radius:3px;
  -moz-border-radius: 3px;
  -webkit-border-radius:3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
}

input:focus, select:focus {
  /*box-shadow: 0 0 5px rgba(0,255,0,1);
  border:1px solid rgba(0,255,0,0.8);*/
}

button, input[type="reset"], input[type="button"], input[type="submit"], input[type="image"]{    
  box-shadow: 0 0 5px rgba(255,255,255,1);
  border:1px solid rgba(0,0,255,0.2);
  /*background-color:transparent;*/
  border-radius:3px;
  -moz-border-radius: 3px;
  -webkit-border-radius:3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
}

button:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover,input[type="image"]:hover, .icerrarc:hover{
  box-shadow: 0 0 5px rgba(255,255,0,1);
  border:1px solid rgba(255,255,0,0.8);
}

button:focus, input[type="reset"]:focus, input[type="button"]:focus, input[type="submit"]:focus,input[type="image"]:focus, .icerrarc:focus {
  box-shadow: 0 0 5px rgba(0,255,0,0,1);
  border:1px solid rgba(0,255,0,0.8);
}

input[type="file"] {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	overflow-clip-box: padding-box;
	color: inherit;
	-moz-appearance: none;
	-moz-binding: none;
	cursor: default;
	border: none;
	background-color:#FFF;
	padding: 0;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.oculto{ visibility: hidden;
	display:none;
}

/*password*/
#ojo{
	margin-left: -20px;
	border-radius: 0px 20px 20px 0px;
	/*padding: 5px 9px 15px 0px;
	float: right;
	position: absolute;*/
  right: 0px;
	z-index: 5;
	cursor: pointer;
}

/* FORMULARIOS */
.pagina, .paginab{
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/*box-sizing: border-box;*/
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.contenido{ position:relative;
	/*margin-top:0px;
	margin-left:0px;
	padding-top: 19px;
	top:40px;*/
	width:100%;
	height:96%;
	overflow:auto;
	/*box-sizing: border-box;*/
	z-index:1;
	display: grid;
	justify-content:center;
	align-items:center;
	text-align:center;
	background: transparent !important;
	/*border: 1px solid;*/
}

.contenidob{ position:relative;
	margin:0px;
	/*padding-top: 18px;*/
	width:auto;
	height:100%;
	overflow:auto;
	/*box-sizing: border-box;*/
	z-index:0;
	display: block ruby;
	justify-content:center;
	align-items:center;
	text-align:center;
	background-color: rgba(0,0,0,0.7) !important;
	/*border: 1px solid;*/
}

.formulario, .formulariob { position: relative;
	display: table;
	width: 350px;
  min-width: 350px;
	padding:7px;
	z-index:1;
}

/*.formulario, .formulario_i {background-color:rgba(0,0,0,0.7); }*/
    
.finterior{margin: 20px;
	display: inline-block;
	justify-content:center;
	align-items:center;
	text-align:center;
	width: 300px
}

/*div pequeños*/
.formulario_i{	
	position: absolute;
	overflow: auto;
	padding: 5px;
	border: 1px solid rgba(255,255,255,0.5);
	z-index: 9;
}

.form0b{margin:0px; border: solid 1px white;}
.form0b5{margin:0px; border: solid 1px white; padding: 5px;}
.formpreg{margin-bottom:7px; border: solid 1px white; padding: 5px; overflow: hidden;}

.form_b{
  padding: 5px;
	display: inline-block;
	justify-content:center;
	align-items:center;
	text-align:center;
}

.barramovil{ position: relative; 
	cursor: move; 	
}

.curvas7, .barracd, .barramovil, #msj div, .producto {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	-ms-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
  padding: 3px 0px;
}

/*.barracd, .barramovil{ background-color:#04437b; }*/
.barratx{background-color: white; display: inline-block}
.colorlink{color:blue;}

.curvas3, .formulario_i, .formulario, .formulariob{ 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;	
}

.curvas10, .barrat{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

.bordesf{ border-radius: 10px;
  width: fit-content;
  padding: 5px 7px;
  margin: 5px 0px;
}

.barrat{display: table;
  position: relative;
	width: 100%;
  /*min-width: 350px;*/
  padding: 3px 0px;
	text-align: center;
	font-weight: bold;
}

.fila{ display: flex; flex-wrap: wrap; justify-content: center; }

.colu, .colud{text-align: left;}
.col1{width: 100%; margin: 0px auto; padding: 10px; 
	box-sizing:border-box;
	text-align: left;
}

.producto, .productoc, .productoa, .productop{ margin: 10px; 
	padding: 10px; 
	box-sizing:border-box;
  /*border: 1px solid rgba(13,114,156,1.00);*/
}
/*.productoc{ background-color: rgba(255, 255, 255, 0.8); }
.productoa{ background-color: rgba(233, 174, 0, 0.8); }
.productop{ background-color: rgba(255, 254, 175, 0.8); }*/

.colup{ margin: 0px;
	width: 100px;
  min-width: 65px;
	padding: 5px;
	vertical-align: middle;
}

.detap{display: inline-block; 
	padding-top: 3px; /*7*/
}

.dpreciob{ display: inline-block;
  width: 80px;
  padding: 3px 0px;
  text-align: center}

.bcomprar{height: 27px;
	margin-top: 2px;
	background-color: rgb(225, 189, 82);
	box-shadow: none!important;
	-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out;
}
.bcomprar:hover{background:rgb(255, 240, 18);
color:rgb(0,0,51)}

.bagregar{height: 27px;
	margin-top: 3px;
	background-color: rgb(191 255 127);
	box-shadow: none!important;
	-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out;
}
.bagregar:hover{background:rgb(53 231 9);
color:rgb(0,0,51)}

.bcanjear{height: 27px;
	margin-top: 2px;
	background-color: rgb(199, 0, 255);
	box-shadow: none!important;
	-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out;
}
.bcanjear:hover{background:rgb(255, 240, 18);
color:rgb(0,0,51)}

/*etiqueta ganan, cobro, saldo*/
.cganan{ background-color: rgba(0,249,67,0.4); }

.ccobro{ background-color: rgba(249,0,0,0.4); }

.csaldo{ background-color: rgba(249,139,0,0.4); }

.cetiqueta, .cganan, .ccobro, .csaldo{display: inline-block; 
	padding: 3px;
	box-shadow: none!important;
	-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out;
}

/*botones*/
.boton{width:30px; height:30px; 	 
	font-size: 20px;
	text-align:center;
	display: inline-block;
}
/*.boton{color:#61D2C9 !important;}*/

.bira{height: 27px;
	margin-top: 2px;
	box-shadow: none!important;
	background-color: rgb(225, 255, 255);
	-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out;
}

.bira:hover{background:rgba(108,208,61,1.00);
color:rgb(0,0,51)}

.tboton{color: red;
	top: 14px;
	left: 0px;
	padding: 0 2px;
	position: absolute;
	display: table;		
	font-weight: bold;
  font-size: 14px;
	background-color: rgba(1,2,3,0.9);
	border-radius: 7px;
}

.icerrar{ width: 30px;
	/*height: 30px;*/
	color: red;
	font-weight: bold;
	cursor: pointer;
  display: block;
  text-align: center;
  line-height: 20px;
}

.icerrard{display: inline-block;
right: 5px;
position: absolute;
line-height: 15px;}

.icerrarc{border: solid 1px #bbb;
  border-radius: 15px;
  width: 24px;
  color: red;
  /*line-height: 20px;*/
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  display: block;
  padding: 5px 2px;
  background-color: rgba(75, 17, 122,1.00);
}

.btncircular{
  border: solid 0.5pt;
  border-radius: 100px;
  padding: 10px 10px;
}

.btnrentangular{
  border: solid 0.5pt;
  padding: 10px 10px;
}

/*span tipo boton largo*/
.btsl{font:normal 14px arial, tahoma, helvetica, sans-serif;
  font-size: 14px;
  /*margin-left: 3px;
  margin-top: 3px;*/
  position: relative;
  text-align: center;
  right: -5px;
  width: calc(100% - 25px);
  display: inline-block;
  vertical-align: text-bottom;
}

.btslr{font:normal 14px arial, tahoma, helvetica, sans-serif;
  font-size: 14px;
  display: inline-block;
  margin-left: 22px;
  margin-top: 3px;
  position: relative;
  text-align: center;
  /*width: 80px;*/
}

.btslb{font:normal 18px arial, tahoma, helvetica, sans-serif;
  /*font-size: 14px;*/
  margin-left: 3px;
  /*margin-top: 3px;*/
  position: absolute;
  text-align: center;
  /*width: 80px;*/
}

.btisl{font:normal 14px arial, tahoma, helvetica, sans-serif;
  font-size: 14px;
  left: 10px;
  margin-top: -7px;
  position: absolute;
  text-align: center;
  /*width: 80px;*/
}

.bordesb05{border: 1px solid rgba(255,255,255,0.5);}

#loader{position: absolute; 
	width: 100%; height: 100%; 
	z-index: 1005; 
	text-align: center; 
	font-size: 20px; font-family: Arial; 
	color: #000000; 
	/*overflow: visible; 
	left: 0px; top: 23px;*/
}

#msj{
	position: absolute;	
	display: none;
	visibility: hidden;
	text-align: center;
	top: 40px;
	width: 100%;
}

.divbarra{display: inline-block;
	border: 1px solid rgba(4,89,119,1.00);
	background-color: rgba(255,255,255,1.00);
	color: rgba(0,155,41,1.00);
	font-size: 18px;
	padding: 7px;
	width: 320px;	
}

/*grid - cuadro de dialogo*/
/*.gt-grid-dialog { background-color:rgba(0, 0, 0, 0.80) !important;
	color:black;
}*/

.label_,.label_a,.label_e,.label_i,.label_x,.label_ac,.label_ec,.label_ic,.label_xc {display:block}
.label_a {background-color:rgba(0,255,0,0.8);}
.label_e {background-color:yellow;}
.label_i {background-color:red;}
.label_x {background-color:#1A1A1A;}
.label_ac {background-color:#7320b7;}
.label_ec {background-color:#f9b986;}
.label_ic {background-color:#7c7185;}
.label_xc {background-color:#1A1A1A;}

.txtl_a {color:rgba(0,255,0,0.8);}
.txtl_e {color:yellow;}
.txtl_i {color:red;}
.txtl_x {color:white /*#1A1A1A;*/}
.txtl_ac {color:#7320b7;}
.txtl_ec {color:#f9b986;}
.txtl_ic {color:#7c7185;}
.txtl_xc {color:white /*#1A1A1A;*/}

.video-responsive { overflow: hidden;
  z-index: 1999;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 5%;
left: 0;
width: 100%;
height: 90%;
}

.video-responsiveb iframe,
.video-responsiveb object,
.video-responsiveb embed {
/*position: absolute;
top: 5%;
left: 0;*/
width: 100%;
height: 80%;
}

.barradiag{display: block;
color: black;
padding: 3px;}

select.icon-banderas option {
  background-color: white;
  background-repeat:no-repeat;
  /*background-position:bottom left;*/
  padding-left:1px;
  background-size: 25px;
}

select#pais option.PE{
/*background-image:url(imgs/banderas/1.png) no-repeat;*/
}

/*controles personalizados*/
.select-editable {position:relative/*; border:solid grey 1px; height:18px*/; width:100%}
.select-editable select {position:absolute; top:0px; left:0px; /*border:none; */width:100% !important; margin:0;}
.select-editable input {position:absolute; top:1px; left:0px; border:none; width:95% !important/*; padding:2px*/;}
.select-editable select:focus, .select-editable input:focus {outline:none;}

/*efectos  txt*/

.rainbow-text1 {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text; /* Para navegadores webkit */
  background-clip: text;
  color: transparent;
}

.rainbow-text2 {
  background: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
  -webkit-background-clip: text; /* Para navegadores webkit */
  background-clip: text;
  color: transparent;
}

.rainbow-text3 {
  background: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
  -webkit-background-clip: text; /* Para navegadores webkit */
  background-clip: text;
  color: transparent;
}

.rainbow-text4 {
  background: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
  -webkit-background-clip: text; /* Para navegadores webkit */
  background-clip: text;
  color: transparent;
}

.rainbow-text5 {
  background: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
  -webkit-background-clip: text; /* Para navegadores webkit */
  background-clip: text;
  color: transparent;
}

.rainbow-text6 {
  background: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
  -webkit-background-clip: text; /* Para navegadores webkit */
  background-clip: text;
  color: transparent;
}

.rainbow-text7 {
  background: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
  -webkit-background-clip: text; /* Para navegadores webkit */
  background-clip: text;
  color: transparent;
}


/*animaciones*/
.animar-y {
  transform: translatey(3px);
  box-shadow: none;
}

.animar-y {
  animation: ani-y 0.4s ease-in-out infinite alternate;
}

@keyframes ani-y {
  0% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(5px);
  }
}

.animar-x {
  transform: translatey(3px);
  box-shadow: none;
}

.animar-x {
  animation: ani-x 0.4s ease-in-out infinite alternate;
}

@keyframes ani-x {
  0% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(5px);
  }
}

.notif-i{ animation: notif-i 0.2s ease-in-out infinite; }
@keyframes notif-i{
	/*from{}*/ /*fotograma inicial*/
	0%{
		transform: translatex(2px);
	}
	
	/*segundo fotograma*/
	50%{
		
	}
	/*to{}*/ /*fotograma final*/
	100%{
		transform: translatex(4px);
	}
}

.notif-m{ animation: notif-m 0.2s infinite; }
@keyframes notif-m{
	to{
		transform: translatex(0px);
	}
}

.notif-f{ animation: notif-f 0.2s ease-in-out infinite; }
@keyframes notif-f{
	0%{
		transform: translatex(4px);
	}	
	50%{
		
	}
	100%{
		transform: translatex(6px);
	}
}

.colorgiratxt{ animation: colorgiratxt 1s cubic-bezier(.79,.14,.15,.86) infinite; }
/*1 seg / 7 mseg */
@keyframes colorgiratxt {
  0% {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
		-webkit-background-clip: text; /* Para navegadores webkit */
		background-clip: text;
		color: transparent;
		-webkit-transition: all 0.16s ease-out; -moz-transition: all 0.16s ease-out; -o-transition: all 0.16s ease-out; -ms-transition: all 0.16s ease-out; transition: all 0.16s ease-out;
  }
  16% {
    background: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
		-webkit-background-clip: text; /* Para navegadores webkit */
		background-clip: text;
		color: transparent;
		-webkit-transition: all 0.16s ease-out; -moz-transition: all 0.16s ease-out; -o-transition: all 0.16s ease-out; -ms-transition: all 0.16s ease-out; transition: all 0.16s ease-out;
  }
  32% {
    background: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
		-webkit-background-clip: text; /* Para navegadores webkit */
		background-clip: text;
		color: transparent;
		-webkit-transition: all 0.16s ease-out; -moz-transition: all 0.16s ease-out; -o-transition: all 0.16s ease-out; -ms-transition: all 0.16s ease-out; transition: all 0.16s ease-out;
  }
  48% {
    background: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
		-webkit-background-clip: text; /* Para navegadores webkit */
		background-clip: text;
		color: transparent;
		-webkit-transition: all 0.16s ease-out; -moz-transition: all 0.16s ease-out; -o-transition: all 0.16s ease-out; -ms-transition: all 0.16s ease-out; transition: all 0.16s ease-out;
  }
	64%{
		background: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
		-webkit-background-clip: text; /* Para navegadores webkit */
		background-clip: text;
		color: transparent;
		-webkit-transition: all 0.16s ease-out; -moz-transition: all 0.16s ease-out; -o-transition: all 0.16s ease-out; -ms-transition: all 0.16s ease-out; transition: all 0.16s ease-out;
	}
	80%{
		background: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
		-webkit-background-clip: text; /* Para navegadores webkit */
		background-clip: text;
		color: transparent;
		-webkit-transition: all 0.16s ease-out; -moz-transition: all 0.16s ease-out; -o-transition: all 0.16s ease-out; -ms-transition: all 0.16s ease-out; transition: all 0.16s ease-out;
	}
  100% {
    background: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
		-webkit-background-clip: text; /* Para navegadores webkit */
		background-clip: text;
		color: transparent;
		-webkit-transition: all 0.16s ease-out; -moz-transition: all 0.16s ease-out; -o-transition: all 0.16s ease-out; -ms-transition: all 0.16s ease-out; transition: all 0.16s ease-out;
  }
}

/*borde arcoiris giratorio*/
.bordegiracolor {
  --angle: 0deg; /* Variable para la animación */
  border: 1px solid transparent;
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  animation: 3s rotate linear infinite; /* Animación para el borde */
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}