#contenido {
	max-height: calc(100vh - 115px);
	overflow: auto;
}

.navbar-brand {
	font-family: 'Uncial Antiqua', sans-serif, cursive;
	font-size: 1.5em;
}
.navbar-brand:hover {
	text-shadow: 0px 0px 5px rgba(255,255,255,0.5);
}
.shadow-r-sm {
	box-shadow: 0.25rem 0 0.25rem rgba(0,0,0,0.075) !important
}
.nav-item.dropdown.active {
    border-bottom: 1px solid var(--primary);
    border-radius: 0.35rem;
	margin-bottom: -1px;
}


.zoomed-list > .list-left-bar {
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.zoomed-list > .list-left-bar:hover {
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
}

.list-left-bar:before {
	content: '';
	/*background-color: #6f42c1;*/
	background-color:  var(--primary);
	width: .3rem;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
}

footer {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100vw;
	padding: .25rem .5rem;
	display: flex;
	justify-content: end;
	text-align: right;
}

@media (min-width: 768px) {
	.full-height {
		/*height: calc(100vh - 3.5rem);*/
		height: calc(100vh - 56px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.full-height.isIframe {
		height: 100vh;
	}
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*to-top*/
#to-top {
	position: fixed;
	display: inline-block;
	bottom: 1rem;
	left: 0.5rem;
	cursor: pointer;
	opacity: 0;
	transition: all 0.5s ease;
}
#to-top.visible {
	opacity: 1;
}
#to-top.bottom {
	bottom: 4.5rem;
}

.bg {
	background: no-repeat center center fixed;
	background-size: cover;
	width: 100vw;
	position: fixed;
	left: 0;
	z-index: -1;
}
.bg-blur {
	-webkit-filter: blur(5px);
	filter: blur(5px);
}

.text-small {
	font-size: 0.85em !important;
}
/**********************************************************************/
/************************ OVERWRITES BOOTSTRAP ************************/
/**********************************************************************/
.custom-file-label::after {
	content: "Buscar";
}

.btn-multiline {
	white-space: normal;
}

.btn-secondary.btn-outline-secondary {
	background-color: transparent;
}
.btn-secondary.btn-outline-secondary:hover {
	background-color: #868e96;
}


.input-group>.form-control-special:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.input-group>.form-control-special:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group>.form-control-special {
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 1%;
	margin-bottom: 0;
}

.font-small-caps {
	font-variant: small-caps;
}

.form-group-special {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-align: stretch;
	align-items: stretch;
	margin-bottom: .25rem;
}

.label-special {
	padding: .375rem .75rem;
	font-size: 1rem;
	margin: 0;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
}
.form-control-special {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: none;
	border-bottom: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control-special:focus, .custom-file-input:focus {
	color: #495057;
	background-color: #fff;
	/*border-color: #6f42c1;*/
	border-color: var(--primary);
	outline: 0;
	box-shadow: 0 0 0 0.1rem rgba(50, 181, 165, .5);
}
.form-control-special:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.form-control-special:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.form-control-special::placeholder {
	font-style: italic;
	color: #ccc;
}

.input-append-special {
	padding: .375rem .75rem;
	font-size: 1rem;
	margin: 0;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
}

.card.card-resalto-title {
	background: transparent;
}
.card.card-resalto-title .card-title {
	transition: all .5s ease;
}
.card.card-resalto-title::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	-webkit-box-shadow: inset 0 0 0.5rem rgba(111,66,193,.25);
	-moz-box-shadow: inset 0 0 0.5rem rgba(111,66,193,.25);
	box-shadow: inset 0 0 0.5rem rgba(111,66,193,.25);
}
.card.card-resalto-title:hover::after {
	opacity: 1;
}
.card.card-resalto-title:hover .card-title {
	/*color: #6f42c1;*/
	color: var(--primary);
}
.card-resalto-title {
	flex-basis: calc(100%) !important;
}
@media (min-width: 576px) {
	.card-resalto-title {
		flex-basis: calc(100% / 2) !important;
	}
}
@media (min-width: 1199px) {
	.card-resalto-title {
		flex-basis: calc(100% / 3) !important;
	}
}

.table-vertical-middle td {
	vertical-align: middle;
}


div.dataTables_wrapper div.dataTables_processing {
	font-size: 1.5em;
	/*border-color: #6f42c1;*/
	/*color: #6f42c1;*/
	border-color: var(--primary);
	color: var(--primary);
	width: 300px;
	margin-left: -150px;
	box-shadow: 0px 0px 10px 0px;
}

/***********************************************************************/
/***************************** JSON SYNTAX *****************************/
/***********************************************************************/
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: #007bff; }
.key.mainKey { color: black; }



/***********************************************************************/
/***************************** ANIMACIONES *****************************/
/***********************************************************************/
.start-from-left {
	transform: translate(-100%,0);
	-webkit-transform: translate(-100%,0);
}
.animated {
	transition: all 1s cubic-bezier(0.45, 0.05, 0.19, 1.43);
	-webkit-transition: all 1s cubic-bezier(0.45, 0.05, 0.19, 1.43);
}


@keyframes blink {
	0% {
		opacity: .2;
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: .2;
	}
}

@-moz-keyframes a { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes a { 100% { -webkit-transform: rotate(360deg); } }
@keyframes a { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@keyframes flash_border {
	/*0% { border-color: #6f42c1; }
	50% { border-color: #d4d4d4; }
	100% { border-color: #6f42c1; }*/
	0% { border-color: var(--primary); }
	50% { border-color: #d4d4d4; }
	100% { border-color: var(--primary); }
}



.custom-file-input ~ .custom-file-label::after {
	content: "Buscar";
}


.navbar.bg-white.shadow-sm .navbar-nav > li.nav-item:hover {
	font-weight: bold;
}


.text-color-verde-sescam {
	color: #009e86 !important;
}
.background-verde-sescam {
	background-color: #009e86 !important;
}

.text-color-hufa {
	color: #147eaa !important;
}
.background-hufa {
	background-color: #147eaa !important;
}


.btn-procesando:before {
	content: "\f110";
	font-family: "Font Awesome 5 Pro";
	animation: fa-spin 2s infinite linear;
	position: absolute;
	left: 0.5rem;
}
.btn-procesando {
	padding-left: 1.75rem;
}
.Borja{
	background-color: #147eaa !important;
}

.text-color-red{
	color:red;
}
.text-color-danger{
	color:#9c1623
}

.text-color-green{
	color:green;
}

.text-color-gray{
	color:#495057;
}

.text-color-black{
	color:#000000;
}

.text-color-white{
	color:#ffff;
}

.text-color-orange{
	color:var(--orange);
}
.text-color-warning{
	color:var(--warning);
}
.text-color-primary{
	color:var(--primary);
}
.text-color-success{
	color:var(--success);
}

.text-align-right{
	text-align: right;
}

.text-align-left{
text-align: left;
}

.leyenda{
	border: 1px solid;
	list-style-type: none;
  	text-align: left;
    margin: 0.25rem;
		
}

.leyenda li {
  display:block;
  font-size: 16px;
  padding: 0.25rem;
}

.leyenda_horizontal {
  border: 1px solid;
  list-style-type: none;
  text-align: center;
  margin: 0.25rem;
  padding: 0.25rem;
}

.leyenda_horizontal li {
  display: inline-block;
  font-size: 16px;
  padding: 0.25rem;
}

/*FONDOS*/
.fondo-beige{
	background-color: beige;
}
.fondo-especial{

	background: 
	repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		beige 10px,
		#fcfbfb 20px
	),
	
	linear-gradient(
		to bottom,
		#eee,
		#fef5b9
	);
}

.fondo-success{
	background-color: var(--success);
}

.fondo-warning{
	background-color: var(--warning);
}

.fondo-danger{
	background-color: var(--danger);
}

.fondo-primary{
	background-color: var(--primary);
}

.fondo-orange{
	background-color: var(--orange);
}

.fondo-gray{
	background-color: gray;
}


.element-clicked {
    background:#d3ecf6;
    color: var(--primary);
}

/*Resaltado de textos encontrados*/
.parte-leida.encontrado {
	border: 1px solid;
}
.parte-leida.encontrado:empty {
    border: none;
    padding: 0;
}
.parte-leida.no-encontrado {
	color: inherit !important;
}
.parte-leida {
	border-radius: .2rem; padding: 0 .2rem;
}
.resaltado {
	box-shadow: inset 0 0 0.3rem 0rem;
}

/*Alertas*/
.alerta-elemento{
	border:1px solid rgba(0, 0, 0, .125);
}

.list-left-bar.urgente:before {
	content: '';	
	background-color:  var(--danger);
	width: .3rem;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
}

.list-left-bar.alta:before {
	content: '';
	background-color:  var(--orange);
	width: .3rem;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
}

.list-left-bar.media:before {
	content: '';
	background-color:  var(--warning);
	width: .3rem;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
}

.list-left-bar.baja:before {
	content: '';
	background-color:  var(--primary);
	width: .3rem;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
}

.accion-alerta{
	color:var(--primary);
}
.accion-alerta:hover{
	color:#007bff;
}

.tooltip-grande .tooltip-inner {	
	max-width: 400px;
	font-size: 1.1rem;
	padding: 12px 16px;
}


/*Modales de explotación de datos*/
.modal-fullscreen {
	max-width: calc(100% - 3rem);
}

#tablaExplotacion th,
#tablaExplotacion td {
    white-space: nowrap;  
}

/*Para que el modal de info. del botón "Copiar" del modal explotación aparezca encima de todo*/
div.dt-button-info {
    z-index: 9000 !important;
}

/*************************/
/*
#tablaExplotacion {
    border-collapse: collapse;
}

#tablaExplotacion th {
    background-color: #f2f2f2;
    border: 1px solid #999;
}

#tablaExplotacion td {
    border: 1px solid #ddd;
}*/
/****************************/

/*Separación entre los botones de DataTables*/
.dt-buttons .btn {
    margin-right: 6px;
    margin-bottom: 4px; /* opcional, por si saltan de línea */
}

/*Simular columna y media de bootstrap*/
.col-1-5 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
    padding-right: 15px; /* Gutters estándar */
    padding-left: 15px;
}


/*Colores agrupaciones*/
.color-grupo1{
	color:#d3e0b1;
}
.color-grupo2{
	color:#e0b1c1;
}
.color-grupo3{
	color:#b1d3e0;
}
.color-grupo4{
	color:#f2e794;
}

/*Colores clases*/
.color-clase1{
	color:#d3e0b1;
}
.color-clase1:hover{
	color:#ecfcc4;
	cursor:help;
}
.color-clase2a{
	color:#e0b1c1;
}
.color-clase2a:hover{
	color:#f9c3d5;
	cursor:help;
}
.color-clase2b{
	color:#933755;
}
.color-clase2b:hover{
	color:#c84772;
	cursor:help;
}
.color-clase3a{
	color:#b1d3e0;
}
.color-clase3a:hover{
	color:#bfe3f1;
	cursor:help;
}
.color-clase3b{
	color:#0a7aaa;
}
.color-clase3b:hover{
	color:#0d93cd;
	cursor:help;
}
.color-clase4a{
	color:#f2e794;
}
.color-clase4a:hover{
	color:#fff5ab;
	cursor:help;
}
.color-clase4b{
	color:#9b8904;
}
.color-clase4b:hover{
	color:#b9a405;
	cursor:help;
}
.color-clase5{
	color:#eba62e;
}
.color-clase5:hover{
	color:#f4b03b;
	cursor:help;
}

.cursor-help{
	cursor:help;
}


/*----Animaciones para iconos--------*/

/*Heartbeat personalizado*/
@keyframes heartbeat {
    0% {
        transform: scale(1)           
    }

    25% {
        transform: scale(1.25)          
    }

    45% {
        transform: scale(1.5)          
    }
} 

.animacion-heartbeat{
	animation: heartbeat 1s infinite;
}

/* Pulse personalizado*/
@keyframes custom-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1);
  }
}
.animacion-zoom-lento {
  /* 2.5s para que sea lento, y el '1' asegura que haga solo un pulso, simulando un zoom*/
  animation: custom-pulse 2.5s 1 ease-in-out;
  display: inline-block; 
}


/****************************************Fuegos artificiales******************************/
@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}

/* @keyframes fireworkPseudo {
  0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}
 */
.firework,
.firework::before,
.firework::after
{
	z-index: 9999;
  --initialSize: 0.5vmin;
  --finalSize: 45vmin;
  --particleSize: 0.2vmin;
  --color1: yellow;
  --color2: rgb(255, 0, 0);
  --color3: white;
  --color4: lime;
  --color5: gold;
  --color6: mediumseagreen;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: firework 2s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--initialSize);
  aspect-ratio: 1;
  background: 
    /*
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
    */
    
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
    
    /* bottom right */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
    
    /* bottom left */
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
    
    /* top left */
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
    radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
    radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
    radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
    radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
    radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
    
    /* top right */
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
    radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
    ;
  background-size: var(--initialSize) var(--initialSize);
  background-repeat: no-repeat;
}

.firework::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
  transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
/*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
  transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/*   animation: fireworkPseudo 2s infinite; */
}

.firework:nth-child(2) {
  --x: 30vmin;
}

.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
  --color1: pink;
  --color2: violet;
  --color3: fuchsia;
  --color4: orchid;
  --color5: plum;
  --color6: lavender;  
  --finalSize: 40vmin;
  left: 30%;
  top: 60%;
  animation-delay: -0.25s;
}

.firework:nth-child(3) {
  --x: -30vmin;
  --y: -50vmin;
}

.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
  --color1: cyan;
  --color2: lightcyan;
  --color3: lightblue;
  --color4: PaleTurquoise;
  --color5: SkyBlue;
  --color6: lavender;
  --finalSize: 35vmin;
  left: 70%;
  top: 60%;
  animation-delay: -0.4s;
}
/**************************************FIN Fuegos artificiales******************************/



