@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: Lato;
	src: url(../fonts/Lato-Regular.ttf);
}

@font-face {
	font-family: Lato;
	src: url(../fonts/Lato-Bold.ttf);
	font-weight: bold;
}

@font-face {
	font-family: Lato;
	src: url(../fonts/Lato-Light.ttf);
	font-weight: light;
}

/*******************************************************************************************************************************************
													configuracion de etiquetas - template
*******************************************************************************************************************************************/

html, body {
	font-family: 'Lato', cursive, sans-serif;
	color: #565655;
}

html {
	position: relative;
	min-height: 100%;
	background-color: #f5f5f5;
}

body {
	margin-bottom: 50px;
}

td, th {
	vertical-align: middle !important;
	font-size: 15px;
}

.picker__table td, .picker__table th {
	font-size: 1em;
}

h1, h2, h3, h4, h5, h6, .w3-slim, .w3-wide {
	font-family: 'Lato', cursive, sans-serif;
}

img {
	margin-bottom: 0px;
}

fieldset {
	min-width: 0px;
}

/*******************************************************************************************************************************************
													configuracion de etiquetas - template
*******************************************************************************************************************************************/

/*******************************************************************************************************************************************
													configuracion de clases - template
*******************************************************************************************************************************************/

.w3-input,
.w3-select,
.w3-textarea {
	background-color: #fff;
	border: 2px solid #ededed !important;
	font-weight: bold;
	border-radius: 6px;
	color: #565655;
	font-size: 15px;
}

.w3-textarea {
	max-width: 100%;
    min-width: 100%;
	padding: 8px;
}

.w3-input.ng-valid,
.w3-select.ng-valid,
.w3-textarea.ng-valid,
.w3-input.isOptional-valid,
.w3-select.isOptional-valid,
.w3-textarea.isOptional-valid {
	background-color: transparent;
	border-color: #565655 !important;
}

.w3-input.ng-valid:focus,
.w3-select.ng-valid:focus,
.w3-textarea.ng-valid:focus,
.w3-input.isOptional-valid:focus,
.w3-select.isOptional-valid:focus,
.w3-textarea.isOptional-valid:focus {
	color: #0093d9;
	border-color: #0093d9 !important;
}

.w3-select option[disabled] {
	color: #ccc;
}

.wrpCapitalize {
	text-transform: uppercase;
}

.wrpLowerCase {
	text-transform: lowercase;
}

.wrpCampoError,
.w3-input.isDisabled.wrpCampoError,
.w3-select.isDisabled.wrpCampoError,
.w3-textarea.isDisabled.wrpCampoError {
	background-color: #f6b9ae !important;
}

.wrpCampoConIcono {
	position: relative;
	margin: 0px;
}

.wrpCampoConIcono .w3-input {
	padding-left: 40px;
}

.w3-input.isOptional,
.w3-select.isOptional,
.w3-textarea.isOptional {
	color: #565655;
	border: 2px solid #ededed !important;
	background-color: #fff;
}

.wrpCampoConIcono .iconoCelda {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 5px;
	margin-top: -15px;
	overflow: hidden;
	background: url(../images/iconos-formulario.png) no-repeat 0px 0px / auto 400%;
}

.wrpCampoConIcono .iconoCelda.email {
	background-position-y: 0%;
}

.wrpCampoConIcono .iconoCelda.password {
	background-position-y: 33.33%;
}

.wrpCampoConIcono .iconoCelda.busqueda {
	background-position-y: 66.66%;
}

.wrpCampoConIcono .iconoCelda.calendario {
	background-position-y: 100%;
}

.wrpCampoConIcono.perfiles.valid .iconoCelda {
	background-position-x: 16.66%;
}

.wrpCampoConIcono.obligaciones.valid .iconoCelda {
	background-position-x: 33.32%;
}

.wrpCampoConIcono.clientes.valid .iconoCelda {
	background-position-x: 50%;
}

.wrpCampoConIcono.finanzas.valid .iconoCelda {
	background-position-x: 66.66%;
}

.wrpCampoConIcono.reportes.valid .iconoCelda {
	background-position-x: 83.32%;
}

.wrpCampoConIcono.suscripcion.valid .iconoCelda {
	background-position-x: 100%;
}

.wrpCampoConIcono.valid.dataFullBlur .iconoCelda {
	background-position-x: 100%;
}

.wrpBtnAccion {
	border: 2px solid #0093d9;
	color: #0093d9;
	min-width: 180px;
	background-color: transparent;
	font-weight: bold;
	border-radius: 6px;
	font-size: 16px;
	margin: 0px 16px;
}

.wrpBtnAccion .icono {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 20px;
	height: 20px;
	background: url(../images/iconos-botones-accion.png) no-repeat 0px 0px / 600% auto;
	margin-right: 8px;
	overflow: hidden;
}

.wrpBtnAccion.cancel,
.wrpBtnAccion.return {
	border-color: #e95128;
	color: #e95128;
}

.wrpBtnAccion.upload,
.wrpBtnAccion.next,
.wrpBtnAccion.prev {
	border-color: #7fc9ec;
	color: #7fc9ec;
}

.wrpBtnAccion.download {
	border-color: #8cbf43;
	color: #8cbf43;
}

.wrpBtnAccion.download .icono {
	background-position-x: 20%;
}

.wrpBtnAccion.upload .icono {
	background-position-x: 40%;
}

.wrpBtnAccion.prev .icono {
	background-position-x: 40%;
	transform: rotate(-90deg);
}

.wrpBtnAccion.next .icono {
	background-position-x: 40%;
	transform: rotate(90deg);
}

.wrpBtnAccion.cancel .icono {
	background-position-x: 60%;
}

.wrpBtnAccion.return .icono {
	background-position-x: 80%;
}

.wrpBtnAccion.search .icono {
	background-position-x: 100%;
}

.wrpBtnAccion:hover {
	background-color: #0093d9;
	color: #fff;
}

.wrpBtnAccion:hover .icono {
	background-position-y: 100%;
}

.wrpBtnAccion.cancel:hover,
.wrpBtnAccion.return:hover {
	background-color: #e95128;
}

.wrpBtnAccion.upload:hover,
.wrpBtnAccion.next:hover,
.wrpBtnAccion.prev:hover {
	background-color: #7fc9ec;
}

.wrpBtnAccion.download:hover {
	background-color: #8cbf43;
}

.txtBlue {
	color: #0093d9;
}

.txtBlue.light {
	color: #7fc9ec;
}

.txtBlue.dark {
	color: #00496C;
}

.wrpIcoSolo {
	display: inline-block;
	position: relative;
	width: 25px;
	height: 35px;
	overflow: hidden;
	cursor: pointer;
}

.wrpIcoSolo.forgotPassword {
	background: url(../images/icono-password.png) no-repeat 0px 0px / 200% auto;
}

.wrpIcoSolo.forgotPassword:hover {
	background-position-x: 100%;
}

.wrpMenuModulosContenedor {
	position: relative;
    display: inline-block;
    width: 910px;
}

.wrpMenuModulo,
.wrpMenuModuloObligaciones,
.wrpMenuModuloClientes,
.wrpMenuModuloFinanzas,
.wrpMenuModuloReportes,
.wrpMenuModuloPerfiles,
.wrpMenuModuloSuscripcion,
.wrpElemVisualCircular {
	position: relative;
	display: inline-block !important;
	vertical-align: top;
	overflow: hidden;
	cursor: pointer;
	border-width: 2px;
	border-style: solid;
}

.wrpElemVisualCircular {
	border-color: #7fc9ec;
}

.wrpElemVisualCircular.notEdit {
	border-color: #b2b2b2;
}

.wrpMenuModulo,
.wrpMenuModuloObligaciones,
.wrpMenuModuloClientes,
.wrpMenuModuloFinanzas,
.wrpMenuModuloReportes,
.wrpMenuModuloSuscripcion,
.wrpMenuModuloPerfiles {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.wrpMenuModulo.obligaciones,
.wrpMenuModuloObligaciones,
.wrpElemVisualCircular.obligaciones {
	border-color: #8dd1cd;
}

.wrpMenuModulo.clientes,
.wrpMenuModuloClientes,
.wrpElemVisualCircular.clientes {
	border-color: #bf9259;
}

.wrpMenuModulo.finanzas,
.wrpMenuModuloFinanzas,
.wrpElemVisualCircular.finanzas {
	border-color: #a87db5;
}

.wrpMenuModulo.reportes,
.wrpMenuModuloReportes,
.wrpElemVisualCircular.reportes {
	border-color: #7f7fb4;
}

.wrpMenuModulo.perfiles,
.wrpMenuModuloPerfiles,
.wrpElemVisualCircular.perfiles {
	border-color: #7fc9ec;
}

.wrpMenuModulo.suscripcion,
.wrpMenuModuloSuscripcion,
.wrpElemVisualCircular.suscripcion {
	border-color: #b2b2b2;
}

.wrpElemVisualCircular {
	width: 220px;
	height: 220px;
	border-radius: 50%;
}

.wrpMenuModulo::before,
.wrpMenuModuloObligaciones::before,
.wrpMenuModuloClientes::before,
.wrpMenuModuloFinanzas::before,
.wrpMenuModuloReportes::before,
.wrpMenuModuloPerfiles::before,
.wrpMenuModuloSuscripcion::before,
.wrpElemVisualCircular::before {
	position: absolute;
	content: "";
	left: 25%;
	top: 15%;
	width: 50%;
	height: 50%;
}

.wrpMenuModulo::before {
	background: url(../images/iconos-modulos.png) no-repeat 0px 0px / 300% auto;
}

.wrpMenuModuloObligaciones::before {
	background: url(../images/iconos-modulo-obligaciones.png) no-repeat 0px 0px / 200% auto;
}

.wrpMenuModuloClientes::before {
	background: url(../images/iconos-modulo-clientes.png) no-repeat 0px 0px / 200% auto;
}

.wrpMenuModuloFinanzas::before {
	background: url(../images/iconos-modulo-finanzas.png) no-repeat 0px 0px / 200% auto;
}

.wrpMenuModuloReportes::before {
	background: url(../images/iconos-modulo-reportes.png) no-repeat 0px 0px / 200% auto;
}

.wrpMenuModuloPerfiles::before {
	background: url(../images/iconos-modulo-perfiles.png) no-repeat 0px 0px / 200% auto;
}

.wrpMenuModuloSuscripcion::before {
	background: url(../images/iconos-modulo-suscripcion.png) no-repeat 0px 0px / 200% auto;
}

.wrpElemVisualCircular.perfiles.nuevo::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 0% / 200% auto;
	top: 25%;
}

.wrpElemVisualCircular.perfiles.nuevo:hover::before {
	background-position-x: 100%;
}

.wrpElemVisualCircular.perfiles.carita::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 16.66% / 200% auto;
}

.wrpElemVisualCircular.notEdit {
	border-color: #b2b2b2;
}

.wrpElemVisualCircular.perfiles.notEdit.carita::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 33.32% / 200% auto;
}

.wrpElemVisualCircular.obligaciones.carita::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 50% / 200% auto;
}

.wrpElemVisualCircular.clientes.carita::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 66.66% / 200% auto;
}

.wrpElemVisualCircular.finanzas.carita::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 83.32% / 200% auto;
}

.wrpElemVisualCircular.reportes.carita::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 100% / 200% auto;
}

.wrpElemVisualCircular.suscripcion.carita::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 33.32% / 200% auto;
}

.wrpMenuModulo.obligaciones::before {
	background-position-y: 0%;
}

.wrpMenuModulo.clientes::before {
	background-position-y: 16.66%;
}

.wrpMenuModulo.finanzas::before {
	background-position-y: 33.32%;
}

.wrpMenuModulo.reportes::before {
	background-position-y: 50%;
}

.wrpMenuModulo.perfiles::before {
	background-position-y: 66.66%;
}

.wrpMenuModulo.suscripcion::before {
	background-position-y: 83.32%;
}

.wrpMenuModulo.agregar::before {
	background-position-y: 100%;
}

.wrpMenuModuloObligaciones.obligaciones::before {
	background-position-y: 0%;
}

.wrpMenuModuloObligaciones.agenda::before {
	background-position-y: 33.33%;
}

.wrpMenuModuloObligaciones.permisos::before {
	background-position-y: 66.66%;
}

.wrpMenuModuloObligaciones.ayuda::before {
	background-position-y: 100%;
}

.wrpMenuModuloClientes.clientes::before {
	background-position-y: 0%;
}

.wrpMenuModuloClientes.obligacionesCliente::before {
	background-position-y: 50%;
}

.wrpMenuModuloClientes.ayuda::before {
	background-position-y: 100%;
}

.wrpMenuModuloFinanzas.cajaGrande::before {
	background-position-y: 0%;
}

.wrpMenuModuloFinanzas.cuentasCobrar::before {
	background-position-y: 25%;
}

.wrpMenuModuloFinanzas.cuentasPagar::before {
	background-position-y: 50%;
}

.wrpMenuModuloFinanzas.clavesSat::before {
	background-position-y: 75%;
}

.wrpMenuModuloFinanzas.ayuda::before {
	background-position-y: 100%;
}

.wrpMenuModuloReportes.reporteClientes::before {
	background-position-y: 0%;
}

.wrpMenuModuloReportes.reporteAgendaObligaciones::before {
	background-position-y: 20%;
}

.wrpMenuModuloReportes.reporteCuentasCobrar::before {
	background-position-y: 40%;
}

.wrpMenuModuloReportes.reporteCuentasPagar::before {
	background-position-y: 60%;
}

.wrpMenuModuloReportes.reporteBancos::before {
	background-position-y: 80%;
}

.wrpMenuModuloReportes.ayuda::before {
	background-position-y: 100%;
}

.wrpMenuModuloPerfiles.usuarios::before {
	background-position-y: 0%;
}

.wrpMenuModuloPerfiles.roles::before {
	background-position-y: 14.28%;
}

.wrpMenuModuloPerfiles.sucursales::before {
	background-position-y: 28.56%;
}

.wrpMenuModuloPerfiles.empresa::before {
	background-position-y: 42.84%;
}

.wrpMenuModuloPerfiles.permisos::before {
	background-position-y: 57.12%;
}

.wrpMenuModuloPerfiles.notificaciones::before {
	background-position-y: 71.40%;
}

.wrpMenuModuloPerfiles.historialMovimientos::before {
	background-position-y: 85.68%;
}

.wrpMenuModuloPerfiles.ayuda::before {
	background-position-y: 100%;
}

.wrpMenuModuloSuscripcion.pago::before {
	background-position-y: 0%;
}

.wrpMenuModuloSuscripcion.historial::before {
	background-position-y: 25%;
}

.wrpMenuModuloSuscripcion.datosFacturacion::before {
	background-position-y: 50%;
}

.wrpMenuModuloSuscripcion.tarjeta::before {
	background-position-y: 75%;
}

.wrpMenuModuloSuscripcion.ayuda::before {
	background-position-y: 100%;
}

.wrpMenuModulo .titulo,
.wrpMenuModuloObligaciones .titulo,
.wrpMenuModuloClientes .titulo,
.wrpMenuModuloFinanzas .titulo,
.wrpMenuModuloReportes .titulo,
.wrpMenuModuloPerfiles .titulo,
.wrpMenuModuloSuscripcion .titulo,
.wrpElemVisualCircular .titulo {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 0px;
	font-weight: bold;
}

.wrpMenuModulo .titulo,
.wrpMenuModuloObligaciones .titulo,
.wrpMenuModuloClientes .titulo,
.wrpMenuModuloFinanzas .titulo,
.wrpMenuModuloReportes .titulo,
.wrpMenuModuloPerfiles .titulo,
.wrpMenuModuloSuscripcion .titulo {
	bottom: 2%;
	height: 45px;
	line-height: 20px;
	overflow: hidden;
	padding: 0px 10%;
}

.wrpMenuModulo.obligaciones .titulo,
.wrpMenuModuloObligaciones .titulo,
.wrpElemVisualCircular.obligaciones .titulo,
.txtColor.obligaciones.light {
	color: #8dd1cd;
}

.wrpMenuModulo.clientes .titulo,
.wrpMenuModuloClientes .titulo,
.wrpElemVisualCircular.clientes .titulo,
.txtColor.clientes.light {
	color: #bf9259;
}

.wrpMenuModulo.finanzas .titulo,
.wrpMenuModuloFinanzas .titulo,
.wrpElemVisualCircular.finanzas .titulo,
.txtColor.finanzas.light {
	color: #a87db5;
}

.wrpMenuModulo.reportes .titulo,
.wrpMenuModuloReportes .titulo,
.wrpElemVisualCircular.reportes .titulo,
.txtColor.reportes.light {
	color: #7f7fb4;
}

.wrpMenuModulo.perfiles .titulo,
.wrpMenuModuloPerfiles .titulo,
.wrpElemVisualCircular.perfiles .titulo,
.txtColor.perfiles.light {
	color: #7fc9ec;
}

.wrpMenuModulo.suscripcion .titulo,
.wrpMenuModuloSuscripcion .titulo,
.wrpElemVisualCircular.suscripcion .titulo,
.txtColor.suscripcion.light {
	color: #b2b2b2;
}

.wrpElemVisualCircular .titulo {
	height: 40px;
	font-size: 16px;
	line-height: 20px;
	bottom: 2%;
	overflow: hidden;
	padding: 0px 40px;
}

.wrpElemVisualCircular .titulo.conDegradado {
	margin: 0px;
	padding: 36px 40px 24px;
	height: 100px;
	bottom: 0px;
	background: linear-gradient(to bottom, transparent 0%, #f5f5f5 40%);
}

.wrpElemVisualCircular.notEdit .titulo {
	color: #b2b2b2;
}

.wrpMenuModulo:hover,
.wrpMenuModulo.active,
.wrpMenuModuloObligaciones:hover,
.wrpMenuModuloClientes:hover,
.wrpMenuModuloFinanzas:hover,
.wrpMenuModuloReportes:hover,
.wrpMenuModuloPerfiles:hover,
.wrpMenuModuloSuscripcion:hover,
.wrpElemVisualCircular:hover {
	background-color: #fff;
}

.wrpElemVisualCircular:hover {
	border-color: #0094d9;
}

.wrpMenuModulo.obligaciones:hover,
.wrpMenuModulo.obligaciones.active,
.wrpMenuModuloObligaciones:hover,
.wrpElemVisualCircular.obligaciones:hover {
	border-color: #00a39b;
}

.wrpMenuModulo.clientes:hover,
.wrpMenuModulo.clientes.active,
.wrpMenuModuloClientes:hover,
.wrpElemVisualCircular.clientes:hover {
	border-color: #9d5700;
}

.wrpMenuModulo.finanzas:hover,
.wrpMenuModulo.finanzas.active,
.wrpMenuModuloFinanzas:hover,
.wrpElemVisualCircular.finanzas:hover {
	border-color: #79388d;
}

.wrpMenuModulo.reportes:hover,
.wrpMenuModulo.reportes.active,
.wrpMenuModuloReportes:hover,
.wrpElemVisualCircular.reportes:hover {
	border-color: #3a3b8c;
}

.wrpMenuModulo.perfiles:hover,
.wrpMenuModulo.perfiles.active,
.wrpMenuModuloPerfiles:hover,
.wrpElemVisualCircular.perfiles:hover {
	border-color: #0094d9;
}

.wrpMenuModulo.suscripcion:hover,
.wrpMenuModulo.suscripcion.active,
.wrpMenuModuloSuscripcion:hover,
.wrpElemVisualCircular.suscripcion:hover {
	border-color: #565655;
}

.wrpElemVisualCircular.notEdit:hover {
	border-color: #b2b2b2;
	background-color: transparent;
}

.wrpElemVisualCircular:hover .titulo {
	color: #0094d9;
}

.wrpMenuModulo.obligaciones:hover .titulo,
.wrpMenuModulo.obligaciones.active .titulo,
.wrpMenuModuloObligaciones:hover .titulo,
.txtColor.obligaciones {
	color: #00a39b;
}

.wrpMenuModulo.clientes:hover .titulo,
.wrpMenuModulo.clientes.active .titulo,
.wrpMenuModuloClientes:hover .titulo,
.txtColor.clientes {
	color: #9d5700;
}

.wrpMenuModulo.finanzas:hover .titulo,
.wrpMenuModulo.finanzas.active .titulo,
.wrpMenuModuloFinanzas:hover .titulo,
.txtColor.finanzas {
	color: #79388d;
}

.wrpMenuModulo.reportes:hover .titulo,
.wrpMenuModulo.reportes.active .titulo,
.wrpMenuModuloReportes:hover .titulo,
.txtColor.reportes {
	color: #3a3b8c;
}

.wrpMenuModulo.perfiles:hover .titulo,
.wrpMenuModulo.perfiles.active .titulo,
.wrpMenuModuloPerfiles:hover .titulo,
.txtColor.perfiles {
	color: #0094d9;
}

.wrpMenuModulo.suscripcion:hover .titulo,
.wrpMenuModulo.suscripcion.active .titulo,
.wrpMenuModuloSuscripcion:hover .titulo,
.txtColor.suscripcion {
	color: #565655;
}

.txtColor.default {
	color: #565655;
}

.wrpElemVisualCircular.notEdit:hover .titulo {
	color: #b2b2b2;
}

.wrpMenuModulo:hover::before {
	background-position-x: 50%;
}

.wrpMenuModulo.active::before {
	background-position-x: 100%;
}

.wrpMenuModuloObligaciones:hover::before,
.wrpMenuModuloClientes:hover::before,
.wrpMenuModuloFinanzas:hover::before,
.wrpMenuModuloReportes:hover::before,
.wrpMenuModuloPerfiles:hover::before,
.wrpMenuModuloSuscripcion:hover::before,
.wrpElemVisualCircular:hover::before {
	background-position-x: 100%;
}

.wrpElemVisualCircular.notEdit:hover::before {
	background-position-x: 0%;
}

.wrpElemVisualCircular .mascara {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #fff;
	text-align: center;
	display: none;
}

.wrpElemVisualCircular .mascara .titulo {
	bottom: auto;
	top: 10%;
	color: #565655;
	font-weight: bold;
}

.wrpElemVisualCircular .controles {
	position: absolute;
	width: 100%;
	bottom: 20%;
}

.wrpElemVisualCircular .accion,
.wrpElemVisualLista .accion {
	position: relative;
	color: #0093d9;
	text-decoration: none;
	height: 30px;
	line-height: 35px;
}

.wrpElemVisualLista .accion {
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	margin-right: 5px;
}

.wrpElemVisualCircular .accion .icono,
.wrpElemVisualLista .accion .icono,
.wrpTituloAccion .icono {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 30px;
	height: 30px;
	overflow: hidden;
}

.wrpTituloAccion .icono {
	margin-right: 5px;
}

.wrpElemVisualCircular .accion .icono,
.wrpElemVisualLista .accion .icono {
	background: url(../images/iconos-acciones.png) no-repeat 0px 0px / auto 100%;
}

.wrpElemVisualCircular .accion.view .icono,
.wrpElemVisualLista .accion.view .icono {
	background-position-x: 0%;
}

.wrpElemVisualCircular .accion.edit .icono,
.wrpElemVisualLista .accion.edit .icono {
	background-position-x: 5.2632%;
}

.wrpElemVisualCircular .accion.delete .icono,
.wrpElemVisualLista .accion.delete .icono {
	background-position-x: 10.5264%;
}

.wrpElemVisualCircular .accion.new .icono,
.wrpElemVisualLista .accion.new .icono {
	background-position-x: 15.7896%;
}

.wrpElemVisualCircular .accion.search .icono,
.wrpElemVisualLista .accion.search .icono {
	background-position-x: 21.0528%;
}

.wrpElemVisualCircular .accion.copy .icono,
.wrpElemVisualLista .accion.copy .icono {
	background-position-x: 26.316%;
}

.wrpElemVisualCircular .accion.notification .icono,
.wrpElemVisualLista .accion.notification .icono {
	background-position-x: 31.5792%;
}

.wrpElemVisualCircular .accion.historical .icono,
.wrpElemVisualLista .accion.historical .icono {
	background-position-x: 36.8424%;
}

.wrpElemVisualCircular .accion.viewClose .icono,
.wrpElemVisualLista .accion.viewClose .icono {
	background-position-x: 42.1056%;
}

.wrpElemVisualCircular .accion.upload .icono,
.wrpElemVisualLista .accion.upload .icono {
	background-position-x: 47.3688%;
}

.wrpElemVisualCircular .accion.download .icono,
.wrpElemVisualLista .accion.download .icono {
	background-position-x: 52.632%;
}

.wrpElemVisualCircular .accion.pdf .icono,
.wrpElemVisualLista .accion.pdf .icono {
	background-position-x: 57.8952%;
}

.wrpElemVisualCircular .accion.xls .icono,
.wrpElemVisualLista .accion.xls .icono {
	background-position-x: 63.1584%;
}

.wrpElemVisualCircular .accion.xml .icono,
.wrpElemVisualLista .accion.xml .icono {
	background-position-x: 68.4216%;
}

.wrpElemVisualCircular .accion.imagen .icono,
.wrpElemVisualLista .accion.imagen .icono {
	background-position-x: 73.6848%;
}

.wrpElemVisualCircular .accion.deleteInactive .icono,
.wrpElemVisualLista .accion.deleteInactive .icono {
	background-position-x: 78.948%;
}

.wrpElemVisualCircular .accion.reportes .icono,
.wrpElemVisualLista .accion.reportes .icono {
	background-position-x: 84.2112%;
}

.wrpElemVisualCircular .accion.email .icono,
.wrpElemVisualLista .accion.email .icono {
	background-position-x: 89.4744%;
}

.wrpElemVisualCircular .accion.cxc .icono,
.wrpElemVisualLista .accion.cxc .icono {
	background-position-x: 94.7376%;
}

.wrpElemVisualCircular .accion.cxp .icono,
.wrpElemVisualLista .accion.cxp .icono {
	background-position-x: 94.7376%;
}

.wrpElemVisualCircular .accion.comentarios .icono,
.wrpElemVisualLista .accion.comentarios .icono {
	background-position-x: 100%;
}

.wrpElemVisualCircular .accion.view:hover .icono,
.wrpElemVisualLista .accion.view:hover .icono {
	background: url(../images/icono-ver.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.edit:hover .icono,
.wrpElemVisualLista .accion.edit:hover .icono {
	background: url(../images/icono-modificar.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.delete:hover .icono,
.wrpElemVisualLista .accion.delete:hover .icono {
	background: url(../images/icono-borrar.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.new:hover .icono,
.wrpElemVisualLista .accion.new:hover .icono {
	background: url(../images/icono-nuevo.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.search:hover .icono,
.wrpElemVisualLista .accion.search:hover .icono,
.wrpHeaderNotificaciones .wrpInfo .iconoEvento.search:hover::before {
	background: url(../images/icono-buscar.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.copy:hover .icono,
.wrpElemVisualLista .accion.copy:hover .icono {
	background: url(../images/icono-duplicar.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.notification:hover .icono,
.wrpElemVisualLista .accion.notification:hover .icono {
	background: url(../images/icono-notificacion.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.historical:hover .icono,
.wrpElemVisualLista .accion.historical:hover .icono {
	background: url(../images/icono-historial.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.viewClose:hover .icono,
.wrpElemVisualLista .accion.viewClose:hover .icono,
.wrpHeaderNotificaciones .wrpInfo .iconoEvento.viewClose:hover::before {
	background: url(../images/icono-visto.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.upload:hover .icono,
.wrpElemVisualLista .accion.upload:hover .icono {
	background: url(../images/icono-upload.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.download:hover .icono,
.wrpElemVisualLista .accion.download:hover .icono {
	background: url(../images/icono-download.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.pdf:hover .icono,
.wrpElemVisualLista .accion.pdf:hover .icono {
	background: url(../images/icono-pdf.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.xls:hover .icono,
.wrpElemVisualLista .accion.xls:hover .icono {
	background: url(../images/icono-xls.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.xml:hover .icono,
.wrpElemVisualLista .accion.xml:hover .icono {
	background: url(../images/icono-xml.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.imagen:hover .icono,
.wrpElemVisualLista .accion.imagen:hover .icono {
	background: url(../images/icono-xml.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.reportes:hover .icono,
.wrpElemVisualLista .accion.reportes:hover .icono {
	background: url(../images/icono-reportes.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.email:hover .icono,
.wrpElemVisualLista .accion.email:hover .icono {
	background: url(../images/icono-email.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.cxc:hover .icono,
.wrpElemVisualLista .accion.cxc:hover .icono {
	background: url(../images/icono-cxc.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.cxp:hover .icono,
.wrpElemVisualLista .accion.cxp:hover .icono {
	background: url(../images/icono-cxp.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.comentarios:hover .icono,
.wrpElemVisualLista .accion.comentarios:hover .icono {
	background: url(../images/icono-comentarios.gif) no-repeat 0px 0px / 100% auto;
}

.wrpElemVisualCircular .accion.inactive,
.wrpElemVisualLista .accion.inactive {
	opacity: 0.4;
	cursor: default;
}

.wrpElemVisualCircular:hover .mascara {
	display: block;
}

.wrpElemVisualCircular.notEdit:hover .mascara {
	display: none;
}

.wrpInterfazTitulo {
	text-align: center;
	font-weight: bold;
	line-height: 80px;
	font-size: 26px;
}

.wrpInterfazTitulo.obligaciones,
.wrpInterfazTitulo.moduloObligaciones {
	color: #00a39b;
}

.wrpInterfazTitulo.clientes,
.wrpInterfazTitulo.moduloClientes {
	color: #9d5700;
}

.wrpInterfazTitulo.finanzas,
.wrpInterfazTitulo.moduloFinanzas {
	color: #79388d;
}

.wrpInterfazTitulo.reportes,
.wrpInterfazTitulo.moduloReportes {
	color: #3a3b8c;
}

.wrpInterfazTitulo.perfiles,
.wrpInterfazTitulo.moduloPerfiles {
	color: #0094d9;
}

.wrpInterfazTitulo.suscripcion,
.wrpInterfazTitulo.moduloSuscripcion {
	color: #565655;
}

.wrpInterfazTitulo .wrpInterfazIcono {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 80px;
	height: 80px;
	margin-right: 10px;
	overflow: hidden;
}

.wrpInterfazTitulo.modulos .wrpInterfazIcono {
	background: url(../images/iconos-modulos.png) no-repeat 50% 0px / 300% auto;
}

.wrpInterfazTitulo.moduloObligaciones .wrpInterfazIcono {
	background: url(../images/iconos-modulo-obligaciones.png) no-repeat 100% 0px / 200% auto;
}

.wrpInterfazTitulo.moduloClientes .wrpInterfazIcono {
	background: url(../images/iconos-modulo-clientes.png) no-repeat 100% 0px / 200% auto;
}

.wrpInterfazTitulo.moduloFinanzas .wrpInterfazIcono {
	background: url(../images/iconos-modulo-finanzas.png) no-repeat 100% 0px / 200% auto;
}

.wrpInterfazTitulo.moduloReportes .wrpInterfazIcono {
	background: url(../images/iconos-modulo-reportes.png) no-repeat 100% 0px / 200% auto;
}

.wrpInterfazTitulo.moduloPerfiles .wrpInterfazIcono {
	background: url(../images/iconos-modulo-perfiles.png) no-repeat 100% 0px / 200% auto;
}

.wrpInterfazTitulo.moduloSuscripcion .wrpInterfazIcono {
	background: url(../images/iconos-modulo-suscripcion.png) no-repeat 100% 0px / 200% auto;
}

.wrpInterfazTitulo.iconosPopups .wrpInterfazIcono {
	background: url(../images/iconos-popups.png) no-repeat 0px 0px / 100% auto;
}

.wrpInterfazTitulo.iconosPostIt .wrpInterfazIcono {
	background: url(../images/iconos-postIt.png) no-repeat 0px 0px / 100% auto;
}

.wrpInterfazTitulo.modulos.obligaciones .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.modulos.clientes .wrpInterfazIcono {
	background-position-y: 16.66%;
}

.wrpInterfazTitulo.modulos.finanzas .wrpInterfazIcono {
	background-position-y: 33.32%;
}

.wrpInterfazTitulo.modulos.reportes .wrpInterfazIcono {
	background-position-y: 50%;
}

.wrpInterfazTitulo.modulos.perfiles .wrpInterfazIcono {
	background-position-y: 66.66%;
}

.wrpInterfazTitulo.modulos.suscripcion .wrpInterfazIcono {
	background-position-y: 83.32%;
}

.wrpInterfazTitulo.moduloObligaciones.obligaciones .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.moduloObligaciones.agenda .wrpInterfazIcono {
	background-position-y: 33.33%;
}

.wrpInterfazTitulo.moduloObligaciones.permisos .wrpInterfazIcono {
	background-position-y: 66.66%;
}

.wrpInterfazTitulo.moduloClientes.clientes .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.moduloClientes.obligacionesCliente .wrpInterfazIcono {
	background-position-y: 50%;
}

.wrpInterfazTitulo.moduloReportes.reporteClientes .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.moduloReportes.reporteAgendaObligaciones .wrpInterfazIcono {
	background-position-y: 20%;
}

.wrpInterfazTitulo.moduloReportes.reporteCuentasCobrar .wrpInterfazIcono {
	background-position-y: 40%;
}

.wrpInterfazTitulo.moduloReportes.reporteCuentasPagar .wrpInterfazIcono {
	background-position-y: 60%;
}

.wrpInterfazTitulo.moduloReportes.reporteBancos .wrpInterfazIcono {
	background-position-y: 80%;
}

.wrpInterfazTitulo.moduloFinanzas.cajaGrande .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.moduloFinanzas.cuentasCobrar .wrpInterfazIcono {
	background-position-y: 25%;
}

.wrpInterfazTitulo.moduloFinanzas.cuentasPagar .wrpInterfazIcono {
	background-position-y: 50%;
}

.wrpInterfazTitulo.moduloFinanzas.clavesSat .wrpInterfazIcono {
	background-position-y: 75%;
}

.wrpInterfazTitulo.moduloPerfiles.usuarios .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.moduloPerfiles.roles .wrpInterfazIcono {
	background-position-y: 14.28%;
}

.wrpInterfazTitulo.moduloPerfiles.sucursales .wrpInterfazIcono {
	background-position-y: 28.56%;
}

.wrpInterfazTitulo.moduloPerfiles.empresa .wrpInterfazIcono {
	background-position-y: 42.84%;
}

.wrpInterfazTitulo.moduloPerfiles.permisos .wrpInterfazIcono {
	background-position-y: 57.12%;
}

.wrpInterfazTitulo.moduloPerfiles.notificaciones .wrpInterfazIcono {
	background-position-y: 71.40%;
}

.wrpInterfazTitulo.moduloPerfiles.historialMovimientos .wrpInterfazIcono {
	background-position-y: 85.68%;
}

.wrpInterfazTitulo.moduloSuscripcion.pago .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.moduloSuscripcion.historial .wrpInterfazIcono {
	background-position-y: 25%;
}

.wrpInterfazTitulo.moduloSuscripcion.datosFacturacion .wrpInterfazIcono {
	background-position-y: 50%;
}

.wrpInterfazTitulo.moduloSuscripcion.tarjeta .wrpInterfazIcono {
	background-position-y: 75%;
}

.wrpInterfazTitulo.iconosPopups.recuperar .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpInterfazTitulo.iconosPopups.errorXML .wrpInterfazIcono {
	background-position-y: 20%;
}

.wrpInterfazTitulo.iconosPopups.tiempo .wrpInterfazIcono {
	background-position-y: 40%;
}

.wrpInterfazTitulo.iconosPopups.descargarReportes .wrpInterfazIcono {
	background-position-y: 60%;
}

.wrpInterfazTitulo.iconosPopups.complementarias .wrpInterfazIcono {
	background-position-y: 80%;
}

.wrpInterfazTitulo.iconosPopups.email .wrpInterfazIcono {
	background-position-y: 100%;
}

.wrpInterfazTitulo.iconosPostIt.notas .wrpInterfazIcono {
	background-position-y: 0%;
}

.wrpFiltros {
	width: 500px;
	margin: 0px auto;
}

.wrpVistaContenido {
	position: relative;
	width: 1260px;
	margin: 0px auto;
}

.wrpTituloAccion {
	line-height: 30px;
}

.wrpTituloAccion a {
	text-decoration: none;
	color: #7fc9ec;
}

.wrpTituloAccion .icono {
	background: url(../images/iconosBtn.png) no-repeat 0px 0px / 200% auto;
}

.wrpTituloAccion .icono.new {
	background-position-y: 60%;
}

.wrpTituloAccion a:hover {
	color: #0094d9;
}

.wrpTituloAccion a:hover .icono {
	background-position-x: 100%;
}

.wrpTituloAccion a:hover .icono.new {
	background: url(../images/icono-nuevo.gif) no-repeat 0px 0px / 100% auto;
}

.w3-table tr.w3-border-bottom {
	border-bottom-width: 2px !important;
}

.w3-striped tbody tr:nth-child(2n) {
	background-color: #ebebeb;
}

.wrpCeldaCol {
	padding: 0px 16px;
}

.drop-box,
.bgThumbNail,
.bgThumbNail .circulo {
    width: 100%;
    height: 100%;
}

.drop-box,
.bgThumbNail .circulo {
    border-radius: 50%;
    border: 6px dashed #0093d9;
}

.drop-box {
    position: absolute;
    text-align: center;
    cursor: pointer;
}

.drop-box.acceptClass {
    border: 3px dashed blue;
}

.drop-box.rejectClass {
    border: 3px dashed red;
}

.bgThumbNail {
    position: relative;
    background-size: cover;
}

.bgThumbNail .circulo {
    position: relative;
}

.bgThumbNail .btnCancelImage {
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    right: 5px;
    cursor: pointer;
    overflow: hidden;
    background: url(../images/iconos-acciones.png) no-repeat 10.5264% 0px / auto 100%;
}

.wrpCamposInhabilitados .txtColor,
.wrpCamposInhabilitados .w3-input,
.wrpCamposInhabilitados .w3-select,
.wrpCamposInhabilitados .w3-textarea,
.wrpCamposInhabilitados .w3-radio,
.wrpCamposInhabilitados .w3-check {
	opacity: 0.4;
}

.wrpPaginacion .w3-button {
	display: inline-block;
	margin: 0px;
	padding: 8px 10px;
	text-decoration: none;
	cursor: pointer;
}

.wrpPaginacion .w3-button.active {
	color: #0093D9;
}

.wrpPaginacion .w3-button:hover {
	background-color: #ccc;
}

.wrpPaginacion .w3-button.isDisabled {
	opacity: 0.4;
}

.wrpIconoLabelAyuda {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	background: url(../images/icono-ayuda2.png) no-repeat 0px 0px / 100% auto;
	opacity: 0.6;
}

.wrpIconoLabelAyuda span {
	display: none;
	position: absolute;
	top: 0%;
	left: 100%;
	width: 250px;
	padding: 10px;
	background-color: #fff;
	border: 2px solid #ccc;
	border-radius: 0px 10px 10px;
	font-size: 12px;
	color: #565655;
	z-index: 1;
	margin-left: 15px;
}

.wrpIconoLabelAyuda span::before,
.wrpIconoLabelAyuda span::after {
	content: "";
	position: absolute;
	border-style: solid;
	top: 0px;
	left: 0px;
	border-width: 8px;
}

.wrpIconoLabelAyuda span::before {
	border-color: #ccc #ccc transparent transparent;
	margin-top: -2px;
	margin-left: -17px;
}

.wrpIconoLabelAyuda span::after {
	border-color: #fff #fff transparent transparent;
	margin-left: -12px;
}

.wrpIconoLabelAyuda:hover {
	opacity: 1;
}

.wrpIconoLabelAyuda:hover span {
	display: block;
}

.wrpGroupBorder {
	border: 1px solid #ccc;
}

.wrpGroupBorderCaja {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 8px;
}

.wrpGroupBorderCaja:hover {
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2),0px 6px 20px 0px rgba(0,0,0,0.19)!important;
}

/*******************************************************************************************************************************************
													configuracion de clases - template
*******************************************************************************************************************************************/

/*******************************************************************************************************************************************
												configuracion de las interfaces - template
*******************************************************************************************************************************************/

.template_sideNav {
	width: 100%;
	display: none;
	z-index: 11;
	margin-top: 70px;
	height: auto;
}

.template_sideNav a:hover {
	background-color: transparent;
}

.template_sideNav .nombreUsuario,
.template_sideNav .nombreRol {
	font-size: 18px;
}

.template_sideNav .iconosSistema {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 0px 20px;
	text-align: center;
	color: #7fc9ec;
	padding: 30px 0px 0px;
	cursor: pointer;
}

.template_sideNav .iconosSistema::before {
	position: absolute;
	content: "";
	width: 30px;
	height: 30px;
	top: 0px;
	left: 50%;
	margin-left: -15px;
	overflow: hidden;
	background: url(../images/iconosBtn.png) no-repeat 0px 0px / 200% auto;
}

.template_sideNav .iconosSistema.perfil::before {
	background-position-y: 0%;
}

.template_sideNav .iconosSistema.salir::before {
	background-position-y: 40%;
}

.template_sideNav .iconosSistema:hover {
	color: #0093d9;
}

.template_sideNav .iconosSistema.perfil:hover::before {
	background: url(../images/icono-perfil.gif) no-repeat 0px 0px / 100% auto;
}

.template_sideNav .iconosSistema.salir:hover::before {
	background: url(../images/icono-salir.gif) no-repeat 0px 0px / 100% auto;
}

.template_sideNav .copyright {
	font-size: 12px;
	margin: 32px 0px 0px;
}

.iconosVisualizacion {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 30px;
	height: 30px;
	background: url(../images/iconos-vistas.png) no-repeat 0px 100% / 200% auto;
	overflow: hidden;
	margin: 0px 10px;
	cursor: pointer;
}

.iconosVisualizacion.listas {
	background-position-x: 0%;
}

.iconosVisualizacion.circulos {
	background-position-x: 100%;
}

.iconosVisualizacion:hover,
.wrpBtnsVisualizacion.listas .iconosVisualizacion.listas,
.wrpBtnsVisualizacion.circulos .iconosVisualizacion.circulos {
	background-position-y: 0%;
}

.wrpBtnsVisualizacion .iconoBtn {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50px;
	height: 20px;
	margin-top: 5px;
	border-radius: 10px;
	background-color: #ececec;
	cursor: pointer;
}

.wrpBtnsVisualizacion .iconoBtn::before {
	position: absolute;
	content: "";
	width: 16px;
	height: 16px;
	background-color: #b2b2b2;
	border-radius: 8px;
	top: 2px;
	transition: left 0.2s ease-in-out 0s;
}

.wrpBtnsVisualizacion.listas .iconoBtn::before {
	left: 4px;
}

.wrpBtnsVisualizacion.circulos .iconoBtn::before {
	left: 30px;
}

.template_sideNav .logoNoodsLiteProFit {
	height: 70px;
}

.wrpLicenciaNoods {
	width: 200px;
	border-radius: 50px;
	color: #fff;
	margin: 0px auto;
	font-size: 12px;
	padding: 8px 0px;
	line-height: 16px;
	text-align: center;
}

.wrpLicenciaNoods.completa {
	background-color: #0094D9;
}

.wrpLicenciaNoods.completa .txt {
	color: #CCFFFF;
}

.wrpLicenciaNoods.vigente {
	background-color: #7EC8EB;
}

.wrpLicenciaNoods.vigente .txt {
	color: #CCFFFF;
}

.wrpLicenciaNoods.caduca {
	background-color: #E95128;
}

.wrpLicenciaNoods.caduca .txt {
	color: #FFD2D2;
}

.template_cabecera {
	height: 70px;
	padding: 16px;
	z-index: 11 !important;
}

.btnMenuMovil {
	display: inline-block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 16px;
	margin: -15px 0px 0px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.btnMenuMovil span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #b2b2b2;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.btnMenuMovil span:nth-child(1),
.btnMenuMovil span:nth-child(2),
.btnMenuMovil span:nth-child(3) {
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

.btnMenuMovil span:nth-child(1) {
	top: 6px;
}

.btnMenuMovil span:nth-child(2) {
	top: 14px;
}

.btnMenuMovil span:nth-child(3) {
	top: 22px;
}

.btnMenuMovil.open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 1px;
	left: 5px;
}

.btnMenuMovil.open span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

.btnMenuMovil.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 23px;
	left: 5px;
}

.template_cabecera .template_logo img {
	height: 100%;
}

.template_cabecera .wrpAyuda {
	display: inline-block;
	vertical-align: top;
	position: absolute;
	height: 38px;
	overflow: hidden;
	top: 16px;
	right: 16px;
	font-size: 12px;
	padding-left: 40px;
	background: url(../images/icono-ayuda.png) no-repeat 0px 0px / auto 100%;
	cursor: pointer;
	text-decoration: none;
}

.template_cabecera .btnNotificacionPrincipal {
	position: absolute;
	margin: 0px;
	padding: 0px;
	width: 30px;
	height: 30px;
	top: 50%;
	margin-top: -15px;
	cursor: pointer;
	background: url(../images/iconos-notificaciones.png) no-repeat 0px 0px / 200% auto;
}

.template_cabecera .btnNotificacionPrincipal.modulos {
	left: 136px;
	background-position-y: 0%;
}

.template_cabecera .btnNotificacionPrincipal.notificaciones {
	left: 96px;
	background-position-y: 25%;
}

.template_cabecera .btnNotificacionPrincipal.post-it {
	left: 56px;
	background-position-y: 75%;
}

.template_cabecera .btnNotificacionPrincipal.ayuda {
	right: 16px;
	background-position-y: 100%;
	display: none;
}

.template_cabecera .btnNotificacionPrincipal.active {
	background-position-y: 50%;
}

.template_cabecera .btnNotificacionPrincipal:hover {
	background-position-x: 100%;
}

.template_cabecera .btnNotificacionPrincipal .numero {
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #e95128;
    font-size: 10px;
    color: #fff;
	font-weight: bold;
    text-align: center;
    top: 0%;
	right: -5px;
    line-height: 17px;
}

.btnPrincipalMovil {
	position: absolute;
	margin: -15px 0px 0px -18px;
	padding: 0px;
	width: 36px;
	height: 30px;
	top: 50%;
	left: 50%;
	cursor: pointer;
	background: url(../images/logo-movil.png) no-repeat 0px 0px / 100% auto;
	display: none;
}

.template_cabecera .separador {
	position: absolute;
	top: 50%;
	margin-top: -15px;
	width: 1px;
	height: 30px;
	padding: 0px;
	right: 190px;
	background-color: #b2b2b2;
}

.wrpHeaderNotificaciones {
	position: fixed;
	width: 100%;
	top: -22px;
	background-color: #fff;
	padding: 16px;
	transition: all 0.5s ease-in-out 0s;
	z-index: 10;
	opacity: 0;
}

.wrpHeaderNotificaciones.modulos,
.wrpHeaderNotificaciones.ayuda {
	height: 92px;
}

.wrpHeaderNotificaciones.show {
	top: 70px;
	z-index: 11;
	opacity: 1;
}

.wrpHeaderNotificaciones.show.nivel2 {
	height: 170px;
}

.wrpHeaderNotificaciones .wrpMenuModulo,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones,
.wrpHeaderNotificaciones .wrpMenuModuloClientes,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas,
.wrpHeaderNotificaciones .wrpMenuModuloReportes,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion,
.wrpHeaderNotificaciones .wrpElemVisualCircular {
	width: 60px;
	height: 60px;
	overflow: visible;
}

.wrpHeaderNotificaciones.notificaciones .wrpMenuModulo,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloObligaciones,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloClientes,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloFinanzas,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloReportes,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloPerfiles,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloSuscripcion,
.wrpHeaderNotificaciones.notificaciones .wrpElemVisualCircular {
	margin: 0px 16px 0px 0px;
}

.wrpHeaderNotificaciones.modulos .wrpMenuModulo,
.wrpHeaderNotificaciones.ayuda .wrpMenuModulo,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones,
.wrpHeaderNotificaciones .wrpMenuModuloClientes,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas,
.wrpHeaderNotificaciones .wrpMenuModuloReportes,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion {
	margin: 0px 8px;
}

.wrpHeaderNotificaciones .wrpMenuModulo::before,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones::before,
.wrpHeaderNotificaciones .wrpMenuModuloClientes::before,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas::before,
.wrpHeaderNotificaciones .wrpMenuModuloReportes::before,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles::before,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion::before {
	width: 70%;
	height: 70%;
	top: 15%;
	left: 15%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones::before {
	background: url(../images/iconos-etapas-obligaciones.png) 0px 0px / 200% auto;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones.pos1::before {
	background-position-y: 0%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones.pos2::before {
	background-position-y: 16.66%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones.pos3::before {
	background-position-y: 32.32%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones.pos4::before {
	background-position-y: 50%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones.pos5::before {
	background-position-y: 66.66%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones.pos5::before {
	background-position-y: 83.32%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones.pos5::before {
	background-position-y: 100%;
}

.wrpHeaderNotificaciones .wrpMenuModuloObligaciones.iconosEtapasObligaciones:hover::before {
	background-position-x: 100%;
}

.wrpHeaderNotificaciones .wrpMenuModulo.todos {
	border-color: #b2b2b2;
}

.wrpHeaderNotificaciones .wrpMenuModulo.todos::before {
	width: 50%;
	height: 50%;
	top: 25%;
	left: 25%;
	background: url(../images/iconos-vistas.png) no-repeat 0px 100% / 200% auto;
}

.wrpHeaderNotificaciones .wrpMenuModulo .icono.user,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .icono.user,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .icono.user,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .icono.user,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .icono.user,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .icono.user,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .icono.user {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	bottom: -4px;
	right: -4px;
	background-color: #fff;
}

.wrpHeaderNotificaciones .wrpMenuModulo .icono.user.carita,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .icono.user.carita,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .icono.user.carita,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .icono.user.carita,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .icono.user.carita,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .icono.user.carita,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .icono.user.carita {
	background-image: url(../images/notifi-carita.png);
}

.wrpHeaderNotificaciones .wrpMenuModulo .icono.user.reloj,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .icono.user.reloj,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .icono.user.reloj,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .icono.user.reloj,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .icono.user.reloj,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .icono.user.reloj,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .icono.user.reloj {
	background-image: url(../images/notifi-reloj.png);
}

.wrpHeaderNotificaciones .wrpMenuModulo .icono.user.dinero,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .icono.user.dinero,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .icono.user.dinero,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .icono.user.dinero,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .icono.user.dinero,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .icono.user.dinero,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .icono.user.dinero {
	background-image: url(../images/notifi-dinero.png);
}

.wrpHeaderNotificaciones .wrpMenuModulo .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .wrpInfo,
.wrpElemVisualCircular .accion .wrpInfoLeyenda,
.wrpElemVisualLista .accion .wrpInfoLeyenda {
	position: absolute;
	min-width: 150px;
	display: none;
	z-index: 1;
}

.wrpHeaderNotificaciones.notificaciones .wrpMenuModulo .wrpInfo,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloObligaciones .wrpInfo,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloClientes .wrpInfo,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloFinanzas .wrpInfo,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloReportes .wrpInfo,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloPerfiles .wrpInfo,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloSuscripcion .wrpInfo {
	top: 100%;
	left: 50%;
	padding-top: 16px;
}

.wrpHeaderNotificaciones.notificaciones .wrpInfo .w3-card-8 {
	box-shadow: 0 -8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}

.wrpHeaderNotificaciones .wrpMenuModulo .wrpInfo a,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .wrpInfo a,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .wrpInfo a,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .wrpInfo a,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .wrpInfo a,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .wrpInfo a,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .wrpInfo a {
	text-decoration: none;
}

.wrpElemVisualCircular .accion .wrpInfoLeyenda,
.wrpElemVisualLista .accion .wrpInfoLeyenda {
	line-height: normal;
}

.wrpHeaderNotificaciones .wrpMenuModulo .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .wrpInfo,
.wrpElemVisualCircular .accion .wrpInfoLeyenda,
.wrpElemVisualLista .accion .wrpInfoLeyenda {
	bottom: 100%;
	right: 50%;
	padding-bottom: 16px;
}

.wrpHeaderNotificaciones .wrpMenuModulo:hover .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones:hover .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloClientes:hover .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas:hover .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloReportes:hover .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles:hover .wrpInfo,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion:hover .wrpInfo,
.wrpElemVisualCircular .accion:hover .wrpInfoLeyenda,
.wrpElemVisualLista .accion:hover .wrpInfoLeyenda {
	display: block;
}

.wrpHeaderNotificaciones .wrpMenuModulo .wrpInfo::before,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .wrpInfo::before,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .wrpInfo::before,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .wrpInfo::before,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .wrpInfo::before,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .wrpInfo::before,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .wrpInfo::before,
.wrpElemVisualCircular .accion .wrpInfoLeyenda::before,
.wrpElemVisualLista .accion .wrpInfoLeyenda::before {
	position: absolute;
	content: "";
	border-width: 10px;
	border-style: solid;
}

.wrpHeaderNotificaciones.notificaciones .wrpMenuModulo .wrpInfo::before,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloObligaciones .wrpInfo::before,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloClientes .wrpInfo::before,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloFinanzas .wrpInfo::before,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloReportes .wrpInfo::before,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloPerfiles .wrpInfo::before,
.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloSuscripcion .wrpInfo::before {
	border-color: transparent transparent #fff #fff;
	top: 2px;
	left: 0px;
}

.wrpHeaderNotificaciones.modulos .wrpMenuModulo .wrpInfo::before,
.wrpHeaderNotificaciones.ayuda .wrpMenuModulo .wrpInfo::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloObligaciones .wrpInfo::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloClientes .wrpInfo::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloFinanzas .wrpInfo::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloReportes .wrpInfo::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloPerfiles .wrpInfo::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloSuscripcion .wrpInfo::before,
.wrpElemVisualCircular .accion .wrpInfoLeyenda::before,
.wrpElemVisualLista .accion .wrpInfoLeyenda::before {
	border-color: #fff #fff transparent transparent;
	bottom: 2px;
	right: 0px;
}

.wrpHeaderNotificaciones .wrpInfo p,
.wrpElemVisualCircular .accion .wrpInfoLeyenda p,
.wrpElemVisualLista .accion .wrpInfoLeyenda p,
.wrpHeaderNotificaciones .wrpMenuModulo .wrpInfo p,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones .wrpInfo p,
.wrpHeaderNotificaciones .wrpMenuModuloClientes .wrpInfo p,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas .wrpInfo p,
.wrpHeaderNotificaciones .wrpMenuModuloReportes .wrpInfo p,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles .wrpInfo p,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion .wrpInfo p {
	font-size: 11px;
	color: #b2b2b2;
	font-weight: bold;
}

.wrpElemVisualCircular .accion .wrpInfoLeyenda p,
.wrpElemVisualLista .accion .wrpInfoLeyenda p {
	color: #0093d9;
}

.wrpHeaderNotificaciones .wrpInfo .iconoEvento {
	line-height: 24px;
	padding-left: 24px;
	position: relative;
	text-align: left;
	margin-left: 20px !important;
}

.wrpHeaderNotificaciones .wrpInfo .iconoEvento::before {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	background: url(../images/iconos-acciones.png) no-repeat 0px 0px / auto 100%;
	top: 2px;
	left: 0%;
}

.wrpHeaderNotificaciones .wrpInfo .iconoEvento.search::before {
	background-position-x: 21.0528%;
}

.wrpHeaderNotificaciones .wrpInfo .iconoEvento.viewClose::before {
	background-position-x: 42.1056%;
}

.wrpHeaderNotificaciones .wrpMenuModulo p.receptor {
	max-height: 50px;
}

.wrpHeaderNotificaciones .wrpMenuModulo.obligaciones p.receptor,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones p,
.wrpHeaderNotificaciones .wrpMenuModuloObligaciones p.receptor {
	color: #00a39b;
}

.wrpHeaderNotificaciones .wrpMenuModulo.clientes p.receptor,
.wrpHeaderNotificaciones .wrpMenuModuloClientes p,
.wrpHeaderNotificaciones .wrpMenuModuloClientes p.receptor {
	color: #9d5700;
}

.wrpHeaderNotificaciones .wrpMenuModulo.finanzas p.receptor,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas p,
.wrpHeaderNotificaciones .wrpMenuModuloFinanzas p.receptor {
	color: #79388d;
}

.wrpHeaderNotificaciones .wrpMenuModulo.reportes p.receptor,
.wrpHeaderNotificaciones .wrpMenuModuloReportes p,
.wrpHeaderNotificaciones .wrpMenuModuloReportes p.receptor {
	color: #3a3b8c;
}

.wrpHeaderNotificaciones .wrpMenuModulo.perfiles p.receptor,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles p,
.wrpHeaderNotificaciones .wrpMenuModuloPerfiles p.receptor {
	color: #0094d9;
}

.wrpHeaderNotificaciones .wrpMenuModulo.suscripcion p.receptor,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion p,
.wrpHeaderNotificaciones .wrpMenuModuloSuscripcion p.receptor {
	color: #565655;
}

.wrpHeaderNotificaciones .wrpTodosModulos {
	position: relative;
	background-color: #fff;
	z-index: 2;
}

.wrpHeaderNotificaciones .wrpListaPorModulo {
	position: absolute;
	width: 100%;
	padding-top: 16px;
	top: 0px;
	left: 0px;
	transition: all 1s ease-in-out 0s;
	z-index: 1;
	opacity: 0;
}

.wrpHeaderNotificaciones .wrpListaPorModulo.show {
	top: 76px;
	opacity: 1;
	z-index: 2;
}

.wrpHeaderNotificaciones.modulos .wrpMenuModuloObligaciones.agregar,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloClientes.agregar,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloFinanzas.agregar,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloReportes.agregar,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloPerfiles.agregar,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloSuscripcion.agregar {
    border-color: #7fc9ec;
}

.wrpHeaderNotificaciones.modulos .wrpMenuModuloObligaciones.agregar:hover,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloClientes.agregar:hover,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloFinanzas.agregar:hover,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloReportes.agregar:hover,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloPerfiles.agregar:hover,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloSuscripcion.agregar:hover {
    border-color: #0094d9;
}

.wrpHeaderNotificaciones.modulos .wrpMenuModuloObligaciones.agregar::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloClientes.agregar::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloFinanzas.agregar::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloReportes.agregar::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloPerfiles.agregar::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloSuscripcion.agregar::before {
	background: url(../images/btnModuloAccion.png) no-repeat 0px 0% / 200% auto;
}

.wrpHeaderNotificaciones.modulos .wrpMenuModuloObligaciones.agregar:hover::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloClientes.agregar:hover::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloFinanzas.agregar:hover::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloReportes.agregar:hover::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloPerfiles.agregar:hover::before,
.wrpHeaderNotificaciones.modulos .wrpMenuModuloSuscripcion.agregar:hover::before {
	background-position-x: 100%;
}

.wrpSideBarPostItIndicador {
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	width: 60px;
	height: 100%;
	padding: 90px 10px 20px;
	z-index: 9;
	overflow: hidden;
}

.wrpSideBarPostIt {
	position: fixed;
	display: none;
	width: 500px;
	top: 0px;
	left: 0px;
	height: 100%;
	padding: 90px 10px 20px;
	background-color: rgba(245, 245, 245, 0.88);
	z-index: 9;
}

.wrpSideBarPostIt.show,
.wrpSideBarPostItIndicador.show {
	display: block;
}

.wrpStatusPostIt .leyenda {
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 30px;
    padding: 0px 10px;
    cursor: pointer;
}

.wrpStatusPostIt .iconoBtn {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50px;
	height: 20px;
	margin-top: 5px;
	border-radius: 10px;
	background-color: #ececec;
	cursor: pointer;
}

.wrpStatusPostIt .iconoBtn::before {
	position: absolute;
	content: "";
	width: 16px;
	height: 16px;
	background-color: #b2b2b2;
	border-radius: 8px;
	top: 2px;
	transition: left 0.2s ease-in-out 0s;
}

.wrpStatusPostIt.inactive .iconoBtn::before {
	left: 4px;
}

.wrpStatusPostIt.active .iconoBtn::before {
	left: 30px;
    background-color: #0094d9;
}

.wrpPostItInfoFull {
	position: relative;
	width: 96%;
	margin: 5px 0px;
	padding-left: 50px;
}

.wrpPostItInfoFullAll {
	height: calc(100% - 140px);
	overflow-y: auto;
}

.wrpPostItInfoFullAll:hover .wrpPostItInfoFull {
	opacity: 0.2;
}

.wrpPostItInfoFullAll:hover .wrpPostItInfoFull:hover {
	opacity: 1;
}

.wrpPostItInfoFull .icono,
.wrpSideBarPostItIndicador .icono {
	width: 40px;
	height: 40px;
	background: url(../images/post-it-status.png) no-repeat 0px 0px / 100% auto;
	overflow: hidden;
}

.wrpPostItInfoFull .icono {
	position: absolute;
	top: 0px;
	left: 0px;
}

.wrpSideBarPostItIndicador .icono {
	position: relative;
	display: inline-block;
}

.wrpPostItInfoFull.pri1 .icono,
.wrpSideBarPostItIndicador .icono.pri1 {
	background-position-y: 33.33%;
}

.wrpPostItInfoFull.pri2 .icono,
.wrpSideBarPostItIndicador .icono.pri2 {
	background-position-y: 66.66%;
}

.wrpPostItInfoFull.pri3 .icono,
.wrpSideBarPostItIndicador .icono.pri3 {
	background-position-y: 100%;
}

.wrpSideBarPostItIndicador .icono.noView {
	background-position-y: 0%;
}

.wrpPostItInfoFull .wrpMensaje {
	position: relative;
	width: 100%;
	border: 2px solid #B2B2B2;
	border-radius:10px;
	padding: 5px 5px 5px 50px;
	min-height: 50px;
	font-size: 12px;
	line-height: 18px;
}

.wrpPostItInfoFull.pri1:hover .wrpMensaje {
	border-color: #B2B2B2;
}

.wrpPostItInfoFull.pri2:hover .wrpMensaje {
	border-color: #0093d9;
}

.wrpPostItInfoFull.pri3:hover .wrpMensaje {
	border-color: #E95128;
}

.wrpPostItInfoFull .mensaje {
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.wrpPostItInfoFull:hover .mensaje {
	white-space: normal;
}

.wrpPostItInfoFull .imagen {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 35px;
	height: 35px;
	border-radius: 50px;
	overflow: hidden;
}

.wrpPostItInfoFull .hora,
.wrpPostItInfoFull:hover .verMas {
	display: none;
}

.wrpPostItInfoFull:hover .hora,
.wrpPostItInfoFull:hover .close {
	display: block;
}

.wrpPostItInfoFull .close {
	display: none;
	position: absolute;
	width: 20px;
	height: 20px;
	top: -8px;
	right: -8px;
	overflow: hidden;
	background: url(../images/iconos-acciones.png) no-repeat 42.1056% 0px / auto 100%;
	cursor: pointer;
}

.wrpPostItInfoFull .otros {
	position: relative;
	min-height: 18px;
}

.wrpPostItInfoFull .who {
	position: absolute;
	left: 0px;
	bottom: 0px;
}

.template_contenedorCuerpo {
	margin-top: 80px;
	padding-bottom: 32px;
	transition: margin-top 1s ease-in-out 0s, margin-left .4s ease-in-out 0s;
}

.template_contenedorCuerpo.showNotification {
	margin-top: 172px;
}

.template_contenedorCuerpo.showNotification.nivel2 {
	margin-top: 248px;
}

.template_contenedorCuerpo.showSideBarPostIt {
	margin-left: 500px;
}

footer {
	display: none;
	position: absolute !important;
	padding: 20px  !important;
}

.logoFactory {
	height: 70px;
}

.template_mascaraPrincipal {
	cursor: pointer;
	z-index: 9;
}

.template_mascaraPrincipal.nivel2 {
	z-index: 5;
}

.w3-modal.nivel2 {
	z-index: 6;
}

.w3-modal-content {
	border-radius: 6px;
}

.btnCerrarPopup {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	background: url(../images/btn-cerrar-popup.png) no-repeat 0px 0px / auto 100%;
	margin: 16px;
}

.btnCerrarPopup:hover {
	background-position-x: 100%;
}

#template_modalNewNota,
#template_modalNotaUsuarios {
	z-index: 10;
}

#template_modalNewNota .wrpModalNewNota {
	margin: 0px auto;
}

#template_modalNewNota .w3-input.ng-valid:focus,
#template_modalNewNota .w3-select.ng-valid:focus,
#template_modalNewNota .w3-textarea.ng-valid:focus,
#template_modalNewNota .w3-input.isOptional-valid:focus,
#template_modalNewNota .w3-select.isOptional-valid:focus,
#template_modalNewNota .w3-textarea.isOptional-valid:focus {
	color: #0094d9;
	border-color: #0094d9 !important;
}

#template_modalNewNota .w3-input.isDisabled,
#template_modalNewNota .w3-select.isDisabled,
#template_modalNewNota .w3-textarea.isDisabled {
	background-color: transparent !important;
	border-color: #7fc9ec !important;
}

#template_modalNewNota textarea {
	min-height: 150px;
}

.wrpPostItTodosUsuarios {
	width: 60%;
	max-height: 250px;
	margin: 0px auto;
	overflow-x: auto;
	overflow-y: auto;
	text-align: left;
}

.wrpPostItTodosUsuarios .iconoImagen {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    background: url(../images/icono-carita.png) no-repeat 0px 0px / auto 100%;
    overflow: hidden;
    border-radius: 12px;
	top: 6px;
}

.wrpPostItTodosUsuarios .iconoImagen.conImg {
    background-size: cover;
}

/*******************************************************************************************************************************************
														configuracion de las interfaces - template
*******************************************************************************************************************************************/

/*******************************************************************************************************************************************
														configuracion de las interfaces - responsivo
*******************************************************************************************************************************************/

@media (max-width: 1800px) {
	.template_contenedorCuerpo.showSideBarPostIt {
		margin-left: 0px;
	}
}

@media (max-width: 1320px) {
	.template_contenedorCuerpo .w3-container {
	    padding: 0px;
	}

	.wrpSideBarPostItIndicador {
		display: none !important;
	}
}

@media (max-width: 1300px) {
	.wrpVistaContenido {
		width: 100%;
	}

	.wrpVistaContenido.viewCirculos {
		text-align: center;
	}

	.wrpFiltros {
		width: 100% !important;
	}
}

@media (max-width: 1100px) {
	.wrpElemVisualCircular {
		width: 180px;
		height: 180px;
	}

	.wrpElemVisualCircular .titulo {
		padding: 0px 20px;
		font-size: 14px;
	}

	.wrpInterfazTitulo {
		line-height: 60px;
		font-size: 24px;
	}

	.wrpInterfazTitulo .wrpInterfazIcono {
		width: 60px;
		height: 60px;
		margin-right: 5px;
	}
}

@media (max-width: 1000px) {
	body {
		margin-bottom: 0px;
	}

	.w3-row > .wrpCeldaCol.l2,
	.w3-row > .wrpCeldaCol.l4,
	.w3-row > .wrpCeldaCol.l6,
	.w3-row > .wrpCeldaCol.l8,
	.w3-row > .wrpCeldaCol.l10 {
		padding: 8px;
	}
}

@media (max-width: 800px) {
	.template_cabecera .wrpAyuda {
		width: 38px;
	}

	.wrpElemVisualCircular {
		width: 160px;
		height: 160px;
	}

	.wrpElemVisualCircular .titulo {
		padding: 0px 16px;
		font-size: 12px;
	}

	.wrpInterfazTitulo {
		line-height: 40px;
		font-size: 18px;
	}

	.wrpInterfazTitulo .wrpInterfazIcono {
		width: 40px;
		height: 40px;
	}

	.wrpHeaderNotificaciones.modulos,
	.template_cabecera .btnNotificacionPrincipal.modulos {
		display: none;
	}

	.elemNotificacion:nth-child(1n+6) {
		display: none !important;
	}

	.wrpBtnAccion {
		font-size: 14px;
		min-width: 160px;
	}

	.w3-modal {
		padding-top: 100px;
	}

	.wrpBotonesFinales .w3-section {
		margin: 0px !important;
	}

	.wrpBotonesFinales .wrpBtnAccion {
		margin: 8px;
	}
}

@media (max-width: 600px) {
	.w3-row > .wrpCeldaCol {
		padding: 8px;
	}

	.w3-row > .wrpCeldaCol:only-child {
		padding: 0px 8px;
	}

	.template_cabecera {
		text-align: right !important;
	}

	.template_cabecera.w3-top,
	.template_sideNav.w3-top {
		top: auto;
		bottom: 0px;
	}

	.template_cabecera .wrpAyuda,
	.template_cabecera .template_logo {
		display: none;
	}

	.template_cabecera .btnNotificacionPrincipal.post-it {
		left: 25%;
	}

	.template_cabecera .btnNotificacionPrincipal.notificaciones {
		left: auto;
		right: 25%;
	}

	.btnPrincipalMovil,
	.template_cabecera .btnNotificacionPrincipal.ayuda {
		display: block;
	}

	.template_sideNav {
		margin-top: auto;
		margin-bottom: 70px;
	}

	.template_sideNav.w3-animate-top {
		-webkit-animation: animatebottom 0.4s;
		animation: animatebottom 0.4s;
	}

	.wrpHeaderNotificaciones {
		top: auto;
		bottom: -22px;
	}

	.wrpSideBarPostIt {
		padding: 20px 10px 90px;
	}

	.wrpHeaderNotificaciones.show {
		top: auto;
		bottom: 70px;
	}

	.wrpHeaderNotificaciones.notificaciones .wrpMenuModulo .wrpInfo,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloObligaciones .wrpInfo,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloClientes .wrpInfo,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloFinanzas .wrpInfo,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloReportes .wrpInfo,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloPerfiles .wrpInfo,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloSuscripcion .wrpInfo {
		top: auto;
		bottom: 100%;
	}

	.wrpHeaderNotificaciones.notificaciones .wrpMenuModulo .wrpInfo::before,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloObligaciones .wrpInfo::before,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloClientes .wrpInfo::before,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloFinanzas .wrpInfo::before,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloReportes .wrpInfo::before,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloPerfiles .wrpInfo::before,
	.wrpHeaderNotificaciones.notificaciones .wrpMenuModuloSuscripcion .wrpInfo::before {
		border-color: #fff transparent transparent #fff;
		top: auto;
		bottom: 2px;
	}

	.template_contenedorCuerpo,
	.template_contenedorCuerpo.showNotification {
		margin-top: 0px;
	}

	.template_contenedorCuerpo {
		margin-bottom: 40px;
	}

	.w3-modal {
		padding-top: 40px;
	}

	.w3-modal .w3-container {
		margin-bottom: 100px;
	}
}

@media (max-width: 500px) {
	.infomercial,
	.logoComercial {
		display: none;
	}

	.elemNotificacion:nth-child(1n+4) {
		display: none !important;
	}

	.wrpSideBarPostIt {
		width: 100%;
	}

	.template_sideNav .copyright {
		font-size: 10px;
		margin-top: 16px;
	}
}

@media (max-width: 400px) {
	.elemNotificacion:nth-child(1n+3) {
		display: none !important;
	}

	.template_sideNav .copyright {
		font-size: 8px;
		margin-top: 10px;
	}
}

/*******************************************************************************************************************************************
														configuracion de las interfaces - responsivo
*******************************************************************************************************************************************/