/*
Theme Name:   Zakra Child
Theme URI:    http://strokescanbpm.com/zakra-child/
Description:  tema hijo para Personalizacion del sistema de gestion
Author:       Juan Pablo Iriarte
Author URI:   http://iriarte.com.co
Template:     zakra
Version:      1.0.6
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  zakra-child
*/
/*--------------------------------------------------------------
1.0 Normalize
FORMATOS GENERALES
Ajustes Generales al Tema y a bootstrap
--------------------------------------------------------------*/

@media (min-width: 1400px) {
	.tg-container--boxed .tg-site {
		max-width: 1350px;
	}
	.tg-container {
		max-width: 1380px;
	}
}

body.page-template-page-extra-width .page-extra-width #primary .entry-header {
	clear: both;
	width: 65%;
	padding: 0 1em;
}
body.page-template-page-extra-width .page-extra-width #primary .entry-content {
	margin-left: auto;
	margin-right: auto;
	clear: both;
	width: 100%;
	padding: 0 2em;
	text-align: justify;
}
.derecha {float: right;}
.izquierda {float: left;}
.centro {display:block; margin-left: auto; margin-right: auto; text-align:center;}
.limpia {clear: both;}
.textoizq {text-align: left !important;}
.textoder {text-align: right !important;}
.textojus {text-align: justify !important;}
.textocen {text-align: center !important;}
.textovert {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}
.sinseparar{white-space: nowrap;}
.mostrar-nada{display: none;}
.NOmostrar{display: none;}
a {
	color: #236389;
	text-decoration-line: none !important;
}
a.button {
	display: inline-block;
	height: 30px;
	color: white;
	margin: 0px 0px 5px 5px;
	padding: 0px 10px 0px 10px;
	background: #245263;
	background: -moz-linear-gradient(top, #C8D4D8 0%, #245263 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C8D4D8), color-stop(100%,#245263));
	box-shadow: inset 0px 0px 6px #fff;
	-webkit-box-shadow: inset 0px 0px 6px #fff;
	border: 1px solid #3F6877;
	border-radius: 10px;
}
a.buttonflat {
	display: inline-block;
	height: 2em;
	color: cadetblue;
	margin: 0px 0px 5px 5px;
	padding: 0px 6px 0px 8px;
	border: 1px solid cadetblue;
	border-radius: 5px;
}
a.buttonflat:hover {cursor: pointer; background-color: teal; color: #DFEFEF;}
.Enlace[readonly] {
	cursor: pointer;
}

/*--------------------------------------------------------------
19.0 Media Queries
--------------------------------------------------------------*/
@media screen and (min-width: 48em) {
	body.page-template-page-full-width .page-full-width #primary .entry-header {
		width: 100%;
	}
	body.page-template-page-full-width .page-full-width #primary .entry-content {
		width: 100%;
	}
	body.page-template-page-extra-width .page-extra-width #primary .entry-header {
		clear: both;
		width: 45%;
		padding: 0 5em;
	}
	body.page-template-page-extra-width .page-extra-width #primary .entry-content {
		margin-left: auto;
		margin-right: auto;
		clear: both;
		width: 100%;
		padding: 2em 3em;
		text-align: justify;
	}
	.ancho10 {width: 9%;}
	.ancho15 {width: 14%;}
	.ancho20 {width: 19%;}
	.ancho25 {width: 24%;}
	.ancho30 {width: 29%;}
	.ancho33 {width: 32.5%;}
	.ancho35 {width: 34%;}
	.ancho40 {width: 39%;}
	.ancho45 {width: 44%;}
	.ancho50 {width: 49%;}
	.ancho55 {width: 54%;}
	.ancho60 {width: 59%;}
	.ancho65 {width: 64%}
	.ancho70 {width: 69%}
	.ancho75 {width: 74%;}
	.ancho80 {width: 79%;}
	.ancho85 {width: 84%;}
	.ancho90 {width: 89%;}
	.ancho95 {width: 94%;}
	.ancho100 {width: 100%;}
	.ancho25px {width: 25px;}
	.ancho35px {width: 35px;}
	.ancho50px {width: 50px;}
	.ancho75px {width: 75px;}
	.ancho100px {width: 100px;}
	.ancho125px {width: 125px;}
}
/*--------------------------------------------------------------
0.0 Formatos Generales a utilizar como framework
--------------------------------------------------------------*/
.margen-extendido {
	/* MARGEN EXTENDIDO SUPERA LOS MARGENES DEL TEMA */
	margin-left: -15%;
	margin-right: -15%
}

.marco-simple {
	border: 1px solid cadetblue;
	border-radius: 5px;
	padding: 5px;
}

.marco-rojo {
	border: 1px solid red;
	border-radius: 5px;
	padding: 5px;
}

/*--------------------------------------------------------------
1.0 Formatos de formularios
	Clase	->	<form id="FRMusuario1" class="margen-extendido formulario1" method="post"> en pagina de gestión de usuarios
				class="formulario2" y class="grupo1" formulario moderno
--------------------------------------------------------------*/
.formulario1 label {
	display: inline-block;
	margin-left: 2em;
	margin-right: 1em;
}
.formulario1 input[type = "text"],
.formulario1 input[type = "email"],
.formulario1 input[type = "password"] {
	display: inline;
	width: unset;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.formulario1 .pequeno input,
.formulario1 .pequeno textarea,
.formulario1 .pequeno select {
	line-height: 1.1;
	font-family: Arial;
	font-size: 12px;
	padding: 0.5em 2px!important;
	margin: 0;
}
.formulario1 .pequeno  th {
	line-height: 1.1;
	font-family: Arial;
	font-size: 12px;
}
.formulario1 .pequeno  td {
	padding: 0;
}
.pequeno .pequeno  td {
	line-height: 1.1;
	font-family: Arial;
	font-size: 12px;
}
.formulario1 input[type = "submit"],
.formulario1 [type = "button"],
.formulario1 button {
	display: inline-block;
	height: 3em;
	margin: 0 1em 1em 1em;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color: #8D8D8E!important;
}
#FRMusuario1 {text-align: center;}
.formulario2 {
	padding: 5px 10px;
	text-align: center;
	border-radius: 15px;
	background-color: #BEBEBF;
	/*display: none;*/
	color: rgba(0,0,0,0.5)!important;
	width: 100%;
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
	margin: 0 auto;
}
.formulario2 fieldset {
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 10px;
	background: transparent!important;
}
.formulario2 [type=text],
.formulario2 [type=date] {
	margin: 0 auto;
	border: 0;
	border-bottom: 1px solid rgba(0,0,0,.2);
	height: 45px;
	line-height: 45px;
	/*margin-bottom: 10px;*/
	font-size: 1em;
	/*text-align: center;*/
	background: transparent!important;
	color: rgba(0,0,0,.6)!important;
}
.formulario2 [type=submit], .formulario2 [type=button], .formulario2 button {
  margin-top: 15px;
  /*width: 15%;*/
  border: 0;
  background-color: #8D8D8E!important;
  border-radius: 5px;
  height: 40px;
  color: white;
  font-weight: 400;
  font-size: 0.9em;
  cursor: pointer;
}
.formulario2 [type='text']:focus, .formulario2 > [type=date] {
  outline: none;
  border-color: #53CACE;
  color: rgba(0,0,0,.9)!important;
}
.formulario2 select {
	background: transparent!important;
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.2);
	height: 45px;
	line-height: 45px;
	/*margin-bottom: 10px;*/
	font-size: 0.9em;
	/*width: 50px;*/
	color: rgba(0,0,0,.6)!important;
}
.formulario2 ::-webkit-input-placeholder { color: rgba(112,112,113,.3)!important; }
.formulario2 :-moz-placeholder { /* Firefox 18- */ color: rgba(112,112,113,.3)!important; }
.formulario2 ::-moz-placeholder { /* Firefox 19+ */ color: rgba(112,112,113,.3)!important; }
.formulario2 :-ms-input-placeholder { color: rgba(112,112,113,.3)!important; }
/*grupo1 se usa para agrupar campos y etiquetas por div en formulario2*/
.grupo1 {display: inline-block;}
.grupo1 span {
	font-size: 0.85em;
	text-align: center;
	color: rgba(0,0,0,.4);
}
.formulario3 {
	width: 100%;
	margin: 10px auto;
}
.formulario3 label {
	display: inline-block;
	margin: 0 5px;
	font-size: 1em;
	/*opacity: 0.6;*/
	font-weight: normal;
}
.formulario3 input[type = "text"],
.formulario3 input[type = "email"],
.formulario3 input[type = "password"],
.formulario3 input[type = "number"],
.formulario3 input[type = "date"],
.formulario3 input[type = "datetime-local"],
.formulario3 input[type = "tel"],
.formulario3 input[type = "url"],
.formulario3 input[type = "time"],
.control3 {
	display: inline;
	width: unset;
	margin-top: 0;
	margin-bottom: 5px;
	height: 2em;
	padding: 0.5rem 0.7rem;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid cadetblue;
	border-left: none;
}
.formulario3 select {
	display: inline;
	width: unset;
	margin-top: 0;
	margin-bottom: 5px;
	height: 2em;
	padding: 0;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid cadetblue;
	border-left: none;
}
.formulario3 select:disabled,
.formulario3 input:disabled {
	/*background: #FFF;*/
}
.formulario3 select[text*="Select"] {
	color: #CCC;
}
.formulario3 option {
	color: #16181a;
}
.formulario3 input[type = "submit"],
.formulario3 input[type = "reset"],
.formulario3 [type = "button"],
.formulario3 button {
	display: inline-block;
	height: 3em;
	margin: 2em 2em 2em 2em;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color: #246355;
	
}
.formulario3 textarea {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid cadetblue;
	border-left: none;
	padding: 0rem 1rem;
	background: #F8F9F9;
}

.formulario4 {width: 100%;margin: 10px auto;}
.formulario4 label {display: inline-block; margin: 0 5px; font-size: 1em; font-weight: normal;}
.formulario4 input[type = "text"],
.formulario4 input[type = "email"],
.formulario4 input[type = "password"],
.formulario4 input[type = "number"],
.formulario4 input[type = "date"],
.formulario4 input[type = "datetime-local"],
.formulario4 input[type = "tel"],
.formulario4 input[type = "url"],
.formulario4 input[type = "time"] {display: inline; width: auto; margin-top: 0; height: 2em; padding: 0.5rem 0.7rem; border: none !important;}
.formulario4 select {display: inline; margin-top: 0; height: 2em; padding: 0; border: none !important;}
.formulario4 input[type = "submit"],
.formulario4 input[type = "reset"],
.formulario4 [type = "button"],
.formulario4 button {display: inline-block; height: 3em; margin: 2em 2em 2em 2em; -webkit-border-radius: 10px; border-radius: 10px;}
.formulario4 textarea {border: none !important; padding: 0rem; background: transparent;}
.formulario4 textarea::placeholder {color: #CCC; font-size: small;}
.formulario4 .form3 input, .formulario4 .form3 select {border-bottom: 1px solid cadetblue !important;}

/* ============= INICIO FORMULARIO Y CONTROLES ESTILO MINIMALISTA =============== */
.formSQ1 {
	width: 100%;
	margin: 10px auto;
	align-items: center;
}
.formSQ1 legend {
	width: unset;
	margin-left: 150px;
	padding-left: 25px;
	padding-right: 25px;
	font-size: medium;
	color: #9C9C9C;
}
.formSQ1 fieldset {
	padding: 15px;
	border: 1px solid #919191;
	border-radius: 10px;
}
.lineasubray1 {display: flex;}
.flextype {display: flex;}
.flexleft {justify-content: left;}
.flexright {justify-content: right;}
.flexcenter {justify-content: center;}
.flexaround {justify-content: space-around;}
.flexbetween {justify-content: space-between;}
.flexevenly {justify-content: space-evenly;}
.subray1 {
	border-bottom: 1px solid #9A9A9A;
	padding: 10px 0 0 0;
	margin-right: 10px;
	/*line-height: 30px;*/
	display: grid;
}
.subray1 label {
	color: #919191;
	display: inline;
	font-size: 0.7em;
	/*padding-top: 15px;*/
	padding-right: 8px;
	margin-bottom: unset;
}
.subray1 input, .subray1 textarea, .subray1 select {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	border: none !important;
	padding: 5px 5px 2px 2px;
	background: #FFFFFF;
}
.subray1 input::placeholder {
	color: #CCC;
	font-size: 0.7em;
}
.subray1 input:focus {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	outline: none;
	background: none;
}
@media screen and (max-width: 767px) {
	.lineasubray1 {
		display: flex;
		flex-direction: column;
	}
  }
/* ============= FIN FORMULARIO Y CONTROLES ESTILO MINIMALISTA =============== */
/*--------------------------------------------------------------
2.0 Formatos de tablas
	Clase	->	class="tablajpi1" en pagina de gestión de usuarios
--------------------------------------------------------------*/
.container-tablajpi1 {
	font: normal 12px/150% Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	width: 100%;
	overflow: auto;
}
.tablajpi1 {
	border-collapse: collapse;
	text-align: left;
	margin: 0;
}
.tablajpi1 thead th {
	background-color: #246355;
	color: white;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 2px 5px;
	border: none;
	white-space: nowrap;
}
.tablajpi1 tbody td {
	color: #222;
	font-size: 11px;
	font-weight: normal;
	padding: 0 5px;
}
.tablajpi1 tbody tr:nth-child(even) {background: #C3C3C3;}
.tablajpi1 tbody tr:nth-child(odd) {background: #DADADA;}
.tablajpi1 tbody td {border-left: none;}
.tablajpi1 tbody tr:last-child td {border-bottom: none;}
.tablajpi1 tfoot td div {
	border-top: 1px solid #323131;
	background: #E1E1E1;
	color: #626262!important;
}
.tablajpi1 tfoot td {
	padding: 0;
	font-size: 11px;
	text-align: right;
	background: #c8d8d5;
	color:#404040!important;
}
.tablajpi1 tfoot td div{padding: 2px;}
/*--------------------------------------------------------------
2.0 Formatos de tablas
	Clase	->	class="tablajpi2" Para generar grilla de formato para presentación
	Se establece un máximo de 28 columnas considerando óptimo 25 Columnas
--------------------------------------------------------------*/
.container-tablajpi2 {
	font: normal 12px/100% Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	width: 100%;
	overflow: auto;
}
.tablajpi2 {
	/*border-bottom: black 1px solid;*/
	border-collapse: separate;
	border-spacing: 0 5px;
	margin: 0;
}
.Etiqueta {
	padding: 0 5px 0 0;
	text-align: right;
	font-weight: bold;
	border: none;
	color: #7B8384;
}
.dato1 {
	padding: 0 0.3em 0 0.2em;
	border: #CED7D3 1px solid;
}
.dato2 {
	padding: 0 5px 0 0;
	border: none;
	color: #7B8384;
}
.dato3 {
	font-size: 1.1em;
	padding: 0 0.3em;
	border-bottom: 1.5px solid #246355;
	margin: 5px 10px 5px 5px;
}
.tablajpi2A {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
}
.tablajpi2A thead th {
	padding: 0 0 10px 0;
	text-align: center;
	font-weight: bold;
	border: none;
}
.tablajpi2A tbody td {
	padding: 0;
	border: none;
}
.chartobox {
	/* Estilo para caracteres UNICODE -> 
	Aumenta el tamaño de letra y fija el alto de linea para evitar padding y distancias al borde*/
	font-size: 1.5rem;
	line-height: 1rem;
	text-align: center;
	padding: 0;
	border: none;
}
/*--------------------------------------------------------------
2.0 Formatos de tablas
	Clase	->	class="tablajpi3" en pagina de Time Tracker
--------------------------------------------------------------*/
/* Sub clases para manejo de tablas */
.celdascentro td {text-align: center;}
.tablajpi3 {border-collapse: collapse; background: #fff; text-align: left; /*width: 100%;*/ overflow: auto; margin-right: 10px; margin-left: auto;}
.tablajpi3 thead th {background-color: #DFE4E6; color: #333B3D; font-size: 0.9em; font-weight: normal; text-align: center; padding: 2px 5px; border: none; white-space: nowrap;}
.tablajpi3 tbody td {color: #024457; font-size: 0.85em; /*font-weight: normal;*/ padding: 0 2px; border: 1px solid #D9E4E6;}
.tablajpi3 tbody tr:nth-child(even) {background: #F6F7F8;}
.tablajpi3 tbody tr:nth-child(odd) {background: #E8ECED;}
.tablajpi3 tbody td {border-left: none;}
.tablajpi3 tbody tr:last-child td {border-bottom: none;}
.tablajpi3 tfoot td div {border-top: 1px solid #8BBFC9; background: #DFE4E6; color: #333B3D!important;}
.tablajpi3 tfoot td {padding: 0; font-size: 0.9em; text-align: right; background: #DFE4E6; color:#333B3D!important;}
.tablajpi3 tfoot td div{padding: 2px;}
.tablajpi3 input, .tablajpi3 select { background: inherit; background-color:transparent; font-size: 0.85rem; padding: 0;}

.tablajpi4 {border-collapse: collapse; background: #fff; text-align: left; /*width: 100%;*/ overflow: auto; margin-right: 10px; margin-left: auto; margin-bottom: 0;}
.tablajpi4 thead th {/*background-color: #899CA2; color: white;*/ font-size: 0.9em; font-weight: normal; text-align: center; padding: 0; border: none; white-space: nowrap;}
.tablajpi4 thead tr:nth-child(2) {display: none;}
.tablajpi4 tbody td {color: #024457; font-size: 0.85em; /*font-weight: normal;*/ padding: 0; border: 1px solid #D9E4E6;}
.tablajpi4 tbody tr:nth-child(even) {background: #BBCDCD;}
.tablajpi4 tbody tr:nth-child(odd) {background: #D4E0E0;}
.tablajpi4 tbody td {border-left: none;}
.tablajpi4 tbody tr:last-child td {border-bottom: none;}
.tablajpi4 tfoot td div {border-top: 1px solid #8BBFC9; background: #98A8AE; color: #E2EDF2!important;}
.tablajpi4 tfoot td {padding: 0; font-size: 0.9em; text-align: right; background: #98A8AE; color:#E2EFF1!important;}
.tablajpi4 tfoot td div{padding: 2px;}
.tablajpi4 tfoot {display: none;}
.tablajpi4 input, .tablajpi4 select { background: inherit; background-color:transparent; font-size: 0.85rem; padding: 0;}

.tablajpi5 {border-collapse: collapse; background: #fff; text-align: left; /*width: 100%;*/ overflow: auto; margin-right: 10px; margin-left: auto; margin-bottom: 0;}
.tablajpi5 thead th {/*background-color: #899CA2; color: white;*/ font-size: 0.9em; font-weight: normal; text-align: center; padding: 0; border: none; white-space: nowrap;}
.tablajpi5 tbody td {color: #024457; font-size: 0.8em; /*font-weight: normal;*/ padding: 0; border: 1px solid #D9E4E6;}
.tablajpi5 tbody tr:nth-child(even) {background:  #DFE4E5;}
.tablajpi5 tbody tr:nth-child(odd) {background: #EFF2F2;}
.tablajpi5 tbody td {border-left: none;}
.tablajpi5 tbody tr:last-child td {border-bottom: none;}
.tablajpi5 tfoot {display: none;}
.tablajpi5 input, .tablajpi5 select { background: inherit; background-color:transparent; font-size: 0.85rem; padding: 0;}

.tablajpi6 {border-collapse: collapse; background: #fff; text-align: left; overflow: auto; margin-right: 10px; margin-left: auto; margin-bottom: 0;}
.tablajpi6 thead th { font-size: 0.9em; font-weight: normal; text-align: center; padding: 0; border: none; white-space: nowrap;}
.tablajpi6 tbody td {font-size: 0.8em; text-align: center; padding: 0; border: 1px solid #FBFCFC; border-left: none;}
.tablajpi6 tbody tr:last-child td {border-bottom: none;}
.tablajpi6 tfoot {display: none;}
.tablajpi6 input, .tablajpi6 select { background: inherit; background-color:transparent; font-size: 0.8rem; padding: 5px;}
.tablajpi6 .libre {background: #F7FBFD;}
.tablajpi6 .cabeza {background: #DEE4E8; color: #143544; font-weight: bold;}
.tablajpi6 .cabeza input {background: #E9EDEF; margin-top: 5px; color: #143544; font-weight: normal; width: 65px;}
.tablajpi6 .numero {background: #E9EDEF; color: #143544;}
.tablajpi6 .numero input {background: #F4F6F7; margin-top: 5px; color: #143544; width: 75px;}
.tablajpi6 .total {background: #F4F6F7; color: #143544;}
.tablajpi6 .total input {background: #F7F8F9; color: #143544; margin-top: 5px; width: 90px;}
.tablajpi6 .GranTotal {color: #477778; font-size:medium; text-align: right;  font-weight: bold;}

/* ver https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties */
.tablajpi7 {--Tbl7Color-A: #7dcea0; --Tbl7Color-B: #34495e;}
.tablajpi7 {border-collapse: separate; background: #fff; text-align: left; overflow: auto; margin: auto; margin-bottom: 0;}
.tablajpi7 thead th {text-align: center; padding: 0; border: none;  background: var(--Tbl7Color-A); white-space: nowrap; color: var(--Tbl7Color-B);}
.tablajpi7 thead th:first-child {border: solid 1px var(--Tbl7Color-A); border-top-left-radius: 15px;}
.tablajpi7 thead th:last-child {border: solid 1px var(--Tbl7Color-A); border-top-right-radius: 15px;}
.tablajpi7 .hiddenrow {background-color: #f9e79f;}
.tablajpi7 tbody td {padding: 5px 0 5px 0; border: none; /*border-left: solid 1px #CCC; border-right: solid 1px #CCC;*/}
.tablajpi7 .base1 td {width: 5%; font-size: xx-small; height: 2px; color: transparent; padding: 0;}
.tablajpi7 td:first-child {border-left: solid 1px var(--Tbl7Color-A);}
.tablajpi7 td:last-child {border-right: solid 1px var(--Tbl7Color-A);}
.tablajpi7 .grande {font-size: large; color: var(--Tbl7Color-B);;}
.tablajpi7 tbody tr:last-child td {border-bottom: none;}
.tablajpi7 input, .tablajpi7 select {background: inherit; background-color:transparent; font-size: 0.8rem;}
.tablajpi7 tfoot th {text-align: center; padding: 0; border: none;}
.tablajpi7 tfoot tr th:first-child {border-left: solid 1px var(--Tbl7Color-A);}
.tablajpi7 tfoot tr th:last-child {border-right: solid 1px var(--Tbl7Color-A);}
.tablajpi7 tfoot tr:last-child th {border-bottom: solid 1px var(--Tbl7Color-A);}
.tablajpi7 tfoot tr:last-child th:first-child {border-bottom-left-radius: 15px;}
.tablajpi7 tfoot tr:last-child th:last-child {border-bottom-right-radius: 15px;}

.colsancho42 tbody td {width: 42px;}

/*--------------------------------------------------------------
3.0 Formatos de Menu en forma de tabla
	Clase	->	class="nav-ppal-JPI1"
--------------------------------------------------------------*/
.nav-ppal-JPI1 {
	background: #16945d;
	overflow: hidden;
	/*border: 1px solid #323131;*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border-collapse: collapse;
	margin: 10px, 10px;
}
.nav-ppal-JPI1 table tbody td{
	color: #b5f5ff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 5px 5px;
}
.nav-ppal-JPI1 table tbody tr:nth-child(even) {background: #b5f5ff;}
.nav-ppal-JPI1 table tbody tr:nth-child(odd) {background: #16945d;}
.nav-ppal-JPI1 table tbody td a {
	color: #fff;
	font-size: 0.7em;
}
.nav-button-jpi1 {
	width: 50px;
	display: block;
	margin: auto;
}
.back-alt2,
.back-alt2 td {
	background: #327EAD;
}
/*--------------------------------------------------------------
3.0 Formatos de Menu en forma de etiquetas
	Clase	->	class="nav-ppal-JPI2"
--------------------------------------------------------------*/
.nav-ppal-JPI2 {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	/*margin: auto;*/
	text-align: center;
	padding: 10px 0;
}
.nav-ppal-JPI2 .topmenuSC {
	display: flex;
	width: 100%;
	white-space: nowrap;
	justify-content: flex-end;
}
.nav-itemA-jpi{
	/*display: inline-block;*/
	background: #16945d;
	margin: -1.5px;
}
.nav-itemB-jpi{
	/*display: inline-block;*/
	background: #327EAD;
	margin: -1.5px;
}
.nav-itemA-jpi a,
.nav-itemB-jpi a{
	color:#fff;
	font-size: 8px;
	line-height: 50%;
	padding: 0 5px 0 5px;
}
.nav-button-jpi2 {
	width: 45px;
	/*display: block;*/
	margin: auto;
	padding: 0 10px 0 0;
}
.frmbuscar {
	display: flex;
	align-items: center;
	width: max-content;
	padding: 0 10px;
}

.frmbuscar input {
	height: 2em;
}

.iconojpi2 {
	white-space: nowrap;
	margin-right: 20px;
}
/*--------------------------------------------------------------
4.0 Formatos de Ficha
	Clase	->	class="ficha??"
--------------------------------------------------------------*/
.ficha1 {margin: auto; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; box-shadow: 10px 5px 5px grey;}
.ficha2 {margin: auto; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px;}
/*--------------------------------------------------------------
5.0 Formato para crear t00ltips
	Clase	->	class="t00ltip" - Dependiente -> class="t00ltiptext"
	Ver: https://www.w3schools.com/howto/howto_css_t00ltip.asp
	//2024-02-24 JPI: se reemplaza la clase "tooltip" por "t00ltip" para evitar conflicto con bootsrap ****
--------------------------------------------------------------*/
/* t00ltip container */
.t00ltip {
	position: relative;
	display: inline-block;
	/*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
  
/* t00ltip text */
.t00ltip .t00ltiptext {
	visibility: hidden;
	width: 500px;
	background-color: #555;
	color: #fff;
	text-align: left;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the t00ltip text */
	position: absolute;
	z-index: 1;
	/*bottom: 125%;*/
	left: 100%;
	/*margin-left: -60px;*/

	/* Fade in t00ltip */
	opacity: 0;
	transition: opacity 0.3s;
}
/* t00ltip arrow */
.t00ltip .t00ltiptext::after {
	content: "";
	position: absolute;
	top: 0%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}
/* Show the t00ltip text when you mouse over the t00ltip container */
	.t00ltip:hover .t00ltiptext {
	visibility: visible;
	opacity: 1;
}