/**
 * Proyecto: Indicadores Graficos
 * Autor: Ariel Rivera <arielrivera@technicalar.com.ar>
 * Empresa: Technical AR
 * Año de desarrollo: 2018-2025
 *
 * Descripción:
 * Este software fue creado y es mantenido por Technical AR.
 * Todos los derechos reservados. Uso interno y distribución
 * restringida a la empresa salvo autorización expresa del autor.
 *
 * Nota: La modificación de este archivo debe preservar esta cabecera.
 */

@charset "utf-8";
@import url("../fonts/OpenSans/stylesheet.css");

body {
	min-width: 1360px;
	min-height: 100vh;
	background-repeat: repeat;
	background-color: rgba(240, 255, 248, 0.15);
	margin: 0 auto;
	display: block;
	background-position: center 0%;
	-webkit-box-shadow: 0px 0px;
	box-shadow: 0px 0px;
	background-image: url(../img/back_index.jpg);
	font-family: "OpenSans-Bold";
	overflow-x: hidden;
}

header {
	width: 100%;
	height: 40px;
	background-color: #4760a7;
	display: inline-block;
}

header img {
	margin: 5px 0 0 50px;
}

.cabecera {
	margin: 0;
	float: left;
}

.contenedor {
	width: 1260px;
	margin: auto;
}

.contenedor a {
	margin: auto 5px;
}

.titulo_login {
	width: auto;
	height: auto;
	margin: 5% 0 0 5%;
	float: left;
}

.titulo_login h1 {
	color: #000066;
	font-size: 48px;
	font-family: "OpenSans-Bold";
	text-decoration: underline;
	font-weight: bold;
}

.formulariologin {
	width: 400px;
	height: auto;
	display: inline-block;
	position: relative;
	padding: 10px 20px;
	margin: 20% 0 0 5%;
}

.formulariologin h3 {
	color: #000066;
	font-family: "OpenSans-Bold";
	/* font-style: normal; */
	font-weight: bold;
	text-align: center;
	font-size: large;
	margin: 2px auto;
}

.formulariologin form {
	width: 100%;
	height: 220px;
	position: relative;
	margin: 20px auto;
	background-color: #EEEEEE;
	border-radius: 5px;
	border: 2px solid #34CC01;
}

.form_row {
	width: 100%;
	height: 75px;
	margin: auto;
}

.contenedor_msg {
	width: 80%;
	height: 75px;
	float: left;
}

.contenedor_msg p {
	margin: 10px;
}

.contenedor_button__login {
	width: 20%;
	height: 75px;
	float: left;
}

.button {
	width: 100px;
	height: 40px;
	margin: 15px 15px 20px 267px;
	color: #FFFFFF;
	font-family: "OpenSans-Bold";
	font-size: 14px;
	border-radius: 5px;
	border: 2px solid #229ABB;
	background-color: #0CAD56;
}

.button:hover {
	border: 2px solid #A6F8CC;
}

.button__login {
	width: 80px;
	height: 35px;
	float: right;
	margin-left: auto;
}

.button__generar {
	margin: 60px 5px 5px 5px;
}

.button__logout {
	background-color: #eeeeee;
	border: 2px solid #0AC986;
}

.titulo_input {
	color: #000066;
	font-family: "OpenSans-Bold";
	/* font-style: normal; */
	font-weight: bold;
	text-align: left;
	font-size: large;
	float: left;
	width: 28%;
	height: 30px;
	margin: 20px 15px;
	padding-top: 5px;
}

input[type="text"],
input[type="password"] {
	width: 50%;
	height: 30px;
	margin: 20px 15px;
	outline: none;
	border: 2px solid #ddd;
	border-radius: 5px;
	font-size: 16px;
	font-family: "OpenSans-Regular";
	color: gray;
}

.fa {
	position: relative;
	right: 36px;
	top: 2px;
	font-size: 20px;
	color: gray;
}

input[type="text"]:focus,
input[type="password"]:focus {
	border: 2px solid #0AC986;
}

.nav1 {
	width: 100%;
	height: 40px;
	line-height: 30px;
	margin: 0;
	padding: 0;
}

.contenedor_anuncios,
.contenedor_usuario {
	height: 40px;
	float: left;
}

.contenedor_anuncios {
	width: 70%;
}

.contenedor_usuario {
	width: 20%;
	margin-right: 5px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.contenedor_boton_logout {
	float: left;
	width: 9%;
	height: 30px;
	padding: 6px 0 0 0;
}

.contenedor_usuarios_nombredeusuario {
	float: left;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	height: 40px;
}

.contenedor_usuarios_nombredeusuario ul {
	margin: 0;
	font-weight: 300;
	font-style: normal;
	font-size: 14px;
	padding: 0;
}

.contenedor_usuario li {
	float: left;
	margin: 0 5px 0 0;
	list-style: none;
	padding: 6px 0 0 0;
}

.contenedor_boton_logout a {
	display: block;
	color: black;
	height: 30px;
	text-decoration: none;
	text-align: center;
}

.anuncios {
	margin-left: 5px;
	padding: 5px;
	background-color: #cce5ff;
	color: #004085;
}

.error-msg {
	font-size: 16px;
	font-family: "OpenSans-Regular";
	color: red;
	margin-top: 50px;
	display: none;
}

.error {
	position: relative;
	animation: shake 0.2s;
}

/* borde rojo para inputs con error de fecha */
.error-fecha {
	border: 2px solid red !important;
	background-color: #fff7f7;
	/* opcional */
}

.alertaFecha p {
	line-height: 24px;
}

@-webkit-keyframes shake {

	0%,
	100% {
		left: 0px;
	}

	20%,
	80% {
		left: -15px;
	}

	40%,
	60% {
		left: 15px;
	}
}

@-o-keyframes shake {

	0%,
	100% {
		left: 0px;
	}

	20%,
	80% {
		left: -15px;
	}

	40%,
	60% {
		left: 15px;
	}
}

@-moz-keyframes shake {

	0%,
	100% {
		left: 0px;
	}

	20%,
	80% {
		left: -15px;
	}

	40%,
	60% {
		left: 15px;
	}
}

@keyframes shake {

	0%,
	100% {
		left: 0px;
	}

	20%,
	80% {
		left: -15px;
	}

	40%,
	60% {
		left: 15px;
	}
}

.selectores {
	width: 1006px;
	height: 90px;
	background-color: #eeeeee;
	border: 2px solid #34cc01;
	float: left;
	margin-top: 5px;
	margin-left: 5px;
	border-radius: 5px;
}

.indicadores {
	width: 610px;
	height: auto;
	float: left;
	margin-left: 5px;
}

.indicadores p {
	font-family: "OpenSans-Bold";
	font-weight: 550;
	font-size: 16px;
	margin: 0 auto;
}

.bloque_select {
	width: 610px;
}

.ui-selectmenu-button.ui-button {
	width: 500px !important;
}

.overflow {
	height: 300px;
}

.rango_fecha {
	float: left;
	width: 290px;
}

.rango_fecha ul {
	font-family: "OpenSans-Bold";
	font-weight: 250;
	font-size: 16px;
	margin: 0 auto;
	list-style: none;
	width: 290px;
	padding: 0;
}

.sel_fecha {
	float: left;
	width: 130px;
	margin-right: 10px;
}

.rango_fecha input {
	width: 130px;
	margin: 0 0 0 10px;
}

.atajos {
	float: left;
}

.titulo_atajos,
.titulo_orientacion {
	font-size: 16px;
	font-family: "OpenSans-Bold";
	font-weight: 400;
	color: black;
	margin: 0 auto;
	padding: 3px 5px 0 5px;
}

.titulo_atajos {
	text-align: left;
}

.titulo_orientacion {
	padding-bottom: 27px;
	text-align: center;
}

.orientacion {
	float: left;
	margin: 5px;
	background-color: #eeeeee;
	border: 2px solid #34cc01;
	border-radius: 5px;
	height: 90px;
}

.orientacion img {
	margin: 0 3px 2px 1px;
}

.nro_selectores {
	font-size: 38px;
	font-family: "OpenSans-Regular";
	font-weight: 400;
	color: white;
	padding: 0 5px;
}

#graficos {
	border: 2px solid #34cc01;
	background-color: #eeeeee;
	border-radius: 5px;
	display: block;
	float: left;
}

.graficos_v,
.tabla_v {
	width: 615px;
	height: 438px;
	margin-top: 5px;
}

.tabla_v td,
th {
	text-align: center;
	vertical-align: middle;
}

.tabla_h td,
th {
	text-align: center;
	vertical-align: middle;
}


.graficos_v {
	margin: 5px 5px 0 5px;
}

.graficos_h,
.tabla_h {
	width: 1240px;
	height: 530px;
	margin-top: 5px;
	margin-left: 5px;
	float: left;
	border: 2px solid #34cc01;
	background-color: #eeeeee;
	border-radius: 5px;
	display: block;
}

.tabla_h {
	margin-right: 10px;
	margin-bottom: 5px;
}

.contenedor_grafico_simple,
.contenedor_grafico_con_opciones {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
}

.canvas {
	width: 98%;
	height: 98%;
	margin: auto;
}

.ListaIndicadoresEncuesta,
.ListaFechaEncuestaRecomendacion {
	width: 96px;
	height: 96%;
	padding: 10px 0 0 5px;
}

.ListaIndicadoresEncuesta label,
.ListaFechaEncuestaRecomendacion label {
	font-size: 12px;
}

.ListaIndicadoresEncuesta ul,
.ListaFechaEncuestaRecomendacion ul {
	list-style: none;
	margin-left: 10px;
	display: inline;
	font-size: 10px;
	float: left;
	padding-inline-start: 0;
}

.canvasEncuesta,
.canvasEncuestaRecomendacion {
	width: 90%;
	height: 98%;
}

#plot .jqplot-point-label {
	font-size: 9px;
	color: #444444;
	font-family: "OpenSans-Regular";
}

.jqplot-title {
	font-size: 1.1em;
	margin-bottom: 0.3em;
}

.tabla {
	font-family: "OpenSans-Regular";
	border: 2px solid #34cc01;
	background-color: #eeeeee;
	border-radius: 5px;
	display: block;
	float: left;
}

.tabla_h .tabla_titulo {
	font-size: 18px;
	color: #444444;
}

.tabla_h .tabla_titulo h3 {
	margin: 1px 5px;
}

.tabla_h .tabla_fecha_desde,
.tabla_h .tabla_fecha_hasta {
	border: none;
	font-size: 18px;
	color: #444444;
	float: left
}

.tabla_h .tabla_valor_deseado {
	border: none;
	font-size: 18px;
	color: #444444;
	float: right;
}

.tabla_h .tabla_datos_titulo,
.tabla_h .tabla_datos_titulo2 {
	font-size: 14px;
	text-align: center;
	font-family: "OpenSans-Bold";
	color: #444444;
	border: 2px solid #999999;
	border-bottom: none;
	margin: 27px 3px 0px 3px;
}

.tabla_h .tabla_datos_titulo table,
.tabla_h .tabla_datos_titulo2 table {
	border-collapse: collapse;
	border: 2px solid #cccccc;
	margin: 3px;
}

.tabla_h .tabla_datos_titulo tr,
.tabla_h .tabla_datos_titulo2 tr {
	border-bottom: 1px solid #cccccc;
	height: 27px;
}

.tabla_h .tabla_datos_titulo td,
.tabla_h .tabla_datos_titulo tr th,
.tabla_h .tabla_datos_titulo2 td,
.tabla_h .tabla_datos_titulo2 tr th {
	border-right: 1px solid white;
}

.tabla_h .tabla_datos_titulo td {
	width: 153px;
	text-align: center;
}

.tabla_h .tabla_datos_titulo2 td {
	width: 150px;
	text-align: center;
}

.tabla_h .tabla_datos_valores,
.tabla_h .tabla_datos_valores2 {
	font-size: 14px;
	font-family: "OpenSans-Bold";
	text-align: center;
	color: #444444;
	border: 2px solid #999999;
	border-top: none;
	margin: -1px 3px 1px 3px;
}

.tabla_h .tabla_datos_valores table,
.tabla_h .tabla_datos_valores2 table {
	border-collapse: collapse;
	margin: 1px;
}

.tabla_h .tabla_datos_valores tr,
.tabla_h .tabla_datos_valores2 tr {
	border-bottom: 1px solid #cccccc;
	height: 25px;
}

.tabla_h .tabla_datos_valores td {
	width: 153px;
	border-right: 1px solid white;
	text-align: center;
}

.tabla_h .tabla_datos_valores2 td {
	width: 140px;
	border-right: 1px solid white;
	text-align: center;
}

.tabla_v .tabla_datos_valores2 tr td,
.tabla_datos_valores tr th {
	border-right: 1px solid white;
}

.tabla_v {
	font-family: "OpenSans-Regular";
	border: 2px solid #34cc01;
	background-color: #eeeeee;
	border-radius: 5px;
	display: block;
	float: left;
}

.tabla_v .tabla_titulo {
	font-size: 12px;
	color: #444444;
}

.tabla_v .tabla_titulo h3 {
	margin: 2px 5px;
}

.tabla_v .tabla_fecha_desde,
.tabla_v .tabla_fecha_hasta {
	border: none;
	font-size: 14px;
	color: #444444;
	float: left
}

.tabla_v .tabla_valor_deseado {
	border: none;
	font-size: 14px;
	color: #444444;
	float: right;
}

.tabla_v .tabla_datos_titulo,
.tabla_v .tabla_datos_titulo2 {
	font-size: 9px;
	font-family: "OpenSans-Bold";
	text-align: center;
	color: #444444;
	border: 2px solid #999999;
	border-bottom: none;
	margin-top: 26px;
	margin-right: 3px;
	margin-left: 3px;
	margin-bottom: 0;
}

.tabla_v .tabla_datos_titulo table,
.tabla_v .tabla_datos_titulo2 table {
	border-collapse: collapse;
	border: 1px solid #cccccc;
	margin: 1px;
}

.tabla_v .tabla_datos_titulo tr,
.tabla_v .tabla_datos_titulo2 tr {
	border-bottom: 1px solid #cccccc;
	height: 24px;
}

.tabla_v .tabla_datos_titulo td {
	width: 73px;
	border-right: 1px solid white;
	text-align: center;
}

.tabla_v .tabla_datos_titulo tr td,
.tabla_v .tabla_datos_titulo tr th,
.tabla_v .tabla_datos_titulo2 tr td,
.tabla_v .tabla_datos_titulo2 tr th {
	border-right: 1px solid white;
}

.tabla_v .tabla_datos_titulo2 td {
	width: 50px;
	text-align: center;
}

.tabla_v .tabla_datos_valores,
.tabla_v .tabla_datos_valores2 {
	font-size: 9px;
	font-family: "OpenSans-Bold";
	text-align: center;
	color: #444444;
	border: 2px solid #999999;
	border-top: none;
	margin: -1px 3px 1px 3px;
}

.tabla_v .tabla_datos_valores table,
.tabla_v .tabla_datos_valores2 table {
	border-collapse: collapse;
	margin: 1px;
}

.tabla_v .tabla_datos_valores tr {
	border-bottom: 1px solid #cccccc;
	height: 23px;
}

.tabla_v .tabla_datos_valores td {
	width: 73px;
	border-right: 1px solid white;
	text-align: center;
}

.tabla_v .tabla_datos_valores2 tr {
	border-bottom: 1px solid #cccccc;
	height: 22px;
}

.tabla_v .tabla_datos_valores2 td {
	width: 50px;
	border-right: 1px solid white;
	text-align: center;
}

.tabla_v .tabla_datos_valores tr td,
.tabla_datos_valores tr th {
	border-right: 1px solid white;
}

#dialog {
	display: none;
}

.gif-ajax img {
	display: none;
	z-index: 1;
	position: absolute;
	width: 40px;
	height: 40px;
	margin: 10px 0 0 35px;
}


.fuera-rango {
	background-color: #ffdddd;
}

/*
* Utilizado en la barra de anuncios
*/
.anuncios {
	padding: 5px 20px;
	border-radius: 6px;
	margin-bottom: 10px;
	font-weight: 400;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


/*
* Utilizado en las ventanas modales
*/
/* Modal base */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1050;
}

.modal.hidden {
	display: none;
}

.modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(3px);
	z-index: 1040;
}

.modal-dialog {
	position: relative;
	z-index: 1055;
	max-width: 500px;
	width: 90%;
}

.modal-content {
	background: #fff;
	border-radius: .3rem;
	box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .75rem 1rem;
	border-bottom: 1px solid #dee2e6;
	color: #fff;
}

.modal-title {
	margin: 0;
	font-size: 1.25rem;
}

.close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #fff;
}

.modal-body {
	padding: 1rem;
	font-size: 1rem;
}

/* Estilos de alerta */
.alert-success {
	background-color: #28a745;
}

.alert-error {
	background-color: #dc3545;
}

.alert-warning {
	background-color: #ffc107;
	color: #000;
}

.alert-info {
	background-color: #17a2b8;
}