//****************************   main.css   ****************************/

/*****************************   LAYOUT   ****************************/

#appLayout {
	height: 100%;
}

#leftPanel {
	width: 14em;
}

.demoLayout .centerPanel {

}

.demoLayout .edgePanel {

}

#logo {
	width: 300px;
	height: 200px;
}

#trabajadores {
	width: 400px;
	height: 600px;
}

html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

/***************************** TIPOGRAFIA ****************************/
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #000FFF;
}
@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	src: url(fonts/PTSans/PTSans.woff2);
	/* For IE6-8 */
	src: local('PT Sans'), local('PTSans-Regular'),
		url(fonts/PTSans/PTSans.woff2) format('woff2');
}
.PT-Sans {
	font-family: 'PT Sans';
	font-weight: normal;
	font-style: normal;
	font-size: 18px; /* Preferred icon size */
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	/* All WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Safari and Chrome. */
	text-rendering: optimizeLegibility;
	/* Firefox. */
	-moz-osx-font-smoothing: grayscale;
	/* IE. */
	font-feature-settings: 'liga';
}

/***************************** FUENTE GOOGLE: Material Icons ****************************/
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(icons-Google/iconfont/MaterialIcons-Regular.eot);
	/* For IE6-8 */
	src: local('Material Icons'), local('MaterialIcons-Regular'),
		url(icons-Google/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
		/*Relativa al servidor es decir que es afectada si el aplicativo corre en url diferente a la raiz */

       url(icons-Google/iconfont/MaterialIcons-Regular.woff)
		format('woff'), url(icons-Google/iconfont/MaterialIcons-Regular.ttf)
		format('truetype');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 18px; /* Preferred icon size */
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	/* All WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Safari and Chrome. */
	text-rendering: optimizeLegibility;
	/* Firefox. */
	-moz-osx-font-smoothing: grayscale;
	/* IE. */
	font-feature-settings: 'liga';
}

.bpicons {
	font-family: 'bpicons';
}

.material-icons.t-12 {
	font-size: 12px;
}

.material-icons.t-18 {
	font-size: 18px;
}

.material-icons.t-24 {
	font-size: 24px;
}

.material-icons.t-32 {
	font-size: 32px;
}

.material-icons.t-36 {
	font-size: 36px;
}

.material-icons.t-48 {
	font-size: 48px;
}

.material-icons.t-77 {
	font-size: 77px;
}

.material-icons.t14em {
	font-size: 14em;
}

.material-icons.va-b {
	vertical-align: bottom;
}

.material-icons.va-s {
	vertical-align: sub;
}

.material-icons.va-m {
	vertical-align: middle;
}

.material-icons.va-mm {
	vertical-align: -moz-middle-with-baseline;
}

.material-icons.mr-5 {
	margin-right: 5px;
}

/* Rules for using icons as black on a light background. */
.material-icons.negro {
	color: rgba(0, 0, 0, 1);
}

.material-icons.n-54 {
	color: rgba(0, 0, 0, 0.54);
}

.material-icons.n-54.i-inactive {
	color: rgba(0, 0, 0, 0.26);
}

.material-icons.b-100 {
	color: rgba(255, 255, 255, 1);
}

.material-icons.b-60 {
	color: rgba(255, 255, 255, 0.6);
}

.material-icons.b-80 {
	color: rgba(255, 255, 255, 0.8);
}

.material-icons.b.i-inactive {
	color: rgba(255, 255, 255, 0.3);
}

.material-icons.rojo {
	color: #8C153E;
}

.material-icons.rojoCorazon {
	color: #de2565;
}

.material-icons.rojoAviso {
	color: red;
}
/* Para no quitar el favorito, cuando ya se inscribió */
.material-icons.rojoinactive {
	color: rgba(140, 21, 62, 0.3);
}
/* De la triada de Royal blue: #002366 */
.material-icons.verde {
	color: #3E8C15;
}

.material-icons.vinotinto {
	color: #B94364;
}

.material-icons.azulClaro {
	color: #65a9e4;
}

.material-icons.azulOscuro {
	color: #003D71;
}
/* Para los warning*/
.material-icons.amarillo {
	color: #ffd93b;
}

/* De la triada de Malachita: #0B6DB0 */
.material-icons.formulario {
	color: #FC9D5C;
}

.material-icons.puntero {
	cursor: pointer;
}

.material-icons.pl-12 {
	padding-left: 12px;
}

/*****************************   PÁGINA   ****************************/
/* Contiene fondo gris */
.fondoHumo {
	margin: -8px;
	padding: 0px 0px 190px 0px;
	background-color: rgba(200, 200, 200, 0.2);
}

.fondoHumo.logoSIMO {
	background: url(./images/LogoSIMO_h1405png) no-repeat;
	background-position: bottom center;
}

.sombraPagina, .tituloPagina {
	width: 93%; /* width: 86%; */
	margin: 0px auto;
}
/* Efecto de sombra marginal del formulario */
.sombraPagina {
	position: relative;
	background-color: white;
	box-shadow: 0px 3px 13px 5px rgba(0, 0, 0, 0.3);
	padding: 0px 25px 25px 25px;
}
.sombraPagina.pb265 {
	padding-bottom: 225px;
}

/******************** POP-UP ********************/
/* Ventana de diálogo */
.ventanaD {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
}
/* Formulario login */
.ventanaD .loginFormDialogo {
	margin-top: -15px;
	margin-left: 0px;
	background-color: transparent;
}
/* Unificación de campos */
.campoUsuario {
	width: 340px;
	height: 27px;
	margin-left: 28px;
	margin-top: 21px;
	border: none;
	background-color: transparent;
	font-size: 120%;
	text-align: left;
}

.dimensionVentana {
	width: 640px;
	/*	height: 740px; */
	overflow: auto;
}

.dimensionVentana.w800 {
	height: 800px;
}

.dimensionVentana.w730 {
	width: 730px;
	overflow: auto;
}
/* Visualizar factura */
.dimensionVentana.w730 {
	width: 730px !important;
}

.dimensionVentana.w700 {
	width: 700px !important;
}

.dimensionVentana.w610 {
	width: 610px;
}

.dimensionVentana.w560 {
	width: 560px;
}

.dimensionVentana.h900 {
	height: 900px !important;
}

.dimensionVentana.h800 {
	height: 800px;
}
.dimensionVentana.h740 {
	height: 740px;
}
.dimensionVentana.h710 {
	height: 710px;
}

.dimensionVentana.h660 {
	height: 660px;
}

.dimensionVentana.h600 {
	height: 600px;
}

.dimensionVentana.h568 {
	height: 568px !important;
	overflow: scroll;
}

.dimensionVentana.h550 {
	height: 550px;
}

.dimensionVentana.h520 {
	height: 520px;
}

.dimensionVentana.h480 {
	height: 480px;
}

.dimensionVentana.h470 {
	height: 470px;
}

.dimensionVentana.h450 {
	height: 450px;
}

.dimensionVentana.h400 {
	height: 400px;
}

.dimensionVentana.h370 {
	height: 370px;
}

.dimensionVentana.h320 {
	height: 320px;
}

.dimensionVentana.h200 {
	height: 200px;
}

/* quita autofocus */
*:focus {
	outline: none;
}



/*****************************   VISOR PDF   ****************************/
/* Tamaño para el visor de PDF, reporte Pre-Inscripcion */
.dimensionVisorPDF {
	width: 690px;
	height: 520px;
}

@media all and (max-width: 800px) , ( min-device-width : 768px) and
	(max-device-width: 1024px) {
	.dimensionVisorPDF {
		width: 650px;
		height: 520px;
	}
}

.visorPDFincrustado {
	visibility: visible;
	width: 800px;
	height: 800px;
	background-color: red;
	color: white;
	background: url(./images/visorPDFnavegador.jpg) no-repeat top left;
}

.cargando {
	position: relative;
	width: 100%;
	height: 100%;
	background: url(./images/cargando.gif) top no-repeat;
}

/* Contenedor del formulario */
.dialogoPSE {
	width: 1024px;
	height: 768px;
	overflow: auto;
}

.loginBody,
.loginBodyScroll {
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: whitesmoke;
}
.loginBody {
	margin: -14px -15px -15px -14px;
	padding: 48px 62px 23px 68px;
}
.loginBodyScroll {
    margin-bottom: 40px;
}

.loginBody.transparente {
	background-color: transparent;
	margin-top: -1%;
}

/******************** HOME SIMO ********************/
.nombreSIMO {
	width: 100%;
	color: white;
	background-color: rgba(0, 0, 0, 0.3);
	text-align: center;
	margin: 1px auto;
	background: url("./images/LogoSIMO_h140_ovalo.png") top center no-repeat;
}

.fondoLogin, .homeSIMO {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #23b6e4;
}

.fondoLogin.entrada {
	background: url("./images/texturaTejido.jpg");
}

.cargandoHome {
	text-align: center;
	background: url("./images/cargadorHome.gif") no-repeat 50% 34%;
	width: 100%;
	height: 1000px;
	background-color: aliceblue;
}

/***************************** DASHBOARD ****************************/
/* Zona gris */
.dashOPEC, .dashCiudadano {
	background-color: #f3f3f3;
}

.dashOPEC h3, .dashCiudadano h3 {
	padding: 8px 0px;
	text-align: center;
	font-weight: normal;
	color: white;
}

/******************** LOGIN  ********************/
/* Sombra interna de los campos login y contraseña */
.loginBody .bordeInterno {
	display: flex;
	justify-content: space-between;
	width: 404px;
	height: 34px;
	margin: auto 0px;
	padding-bottom: 3px;
	text-align: right;
	background-color: white;
	-webkit-box-shadow: inset 0px 0px 4px 2px rgba(128, 125, 128, 0.6);
	-moz-box-shadow: inset 0px 0px 4px 2px rgba(128, 125, 128, 0.6);
	box-shadow: inset 0px 0px 4px 2px rgba(128, 125, 128, 0.6);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px
}

/* Recuadro de los íconos de login y contraseña */
.iconoLogin {
	position: relative;
	width: 45px;
	height: 36px;
	rigth: 9px;
	line-height: 34px;
	text-align: center;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.iconoLogin.grande {
	background-color: transparent;
	margin-left: 150px;
	top: 3px;
}

/* Para convocatorias OPEC */
.convo {
	width: 100vw;
	height: 84vh;
}

.fondoLogin {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #23b6e4;
}

.fondoLoginOPEC {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: url("./images/LogoSIMO_h140_ovalo.png") top center no-repeat;
	background-position: 50% 0%;
	background-size: 155px;
	background-color: seashell;
}

h3.login {
	color: white;
	margin-top: 12px;
	text-align: center;
}

.loginScreen {
	/*  position: fixed; */
	margin-top: -100px;
	/* 	width: auto; */
	/* 	height: 100%;  */
	/* 	padding: 5px; */
}

.loginForm, .loginFormDialogo {
	margin-left: 450px;
	width: 547px;
	height: 361px;
	background: url("./images/ventanaLogin.png") no-repeat;
	padding: 10px 0;
}

/* Pantalla de inicio de Login OPEC */
.loginFormCiud, .registrese, .loginOPECcaja, .registroHome {
	position: relative;
	opacity: 0.97 !important;
	display: flex;
	flex-direction: column;
	width: 650px;
	margin: 5% auto;
	background-color: whitesmoke;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	box-shadow: -1px 4px 8px 4px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: -1px 4px 8px 4px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: -1px 4px 8px 4px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: -1px 4px 8px 4px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.loginOPECcaja {
	margin: 48% 0%;
	width: 100%;
}

.loginFormCiud.entrada {
	margin: 21% 34%;
	background-color: rgba(255, 255, 255, 0.35) important!;
}


/*****************************   BARRAS DE VENTANA  ****************************/
.barra, .barraAmarilloOscura {
	position: relative;
	z-index: 100;
	margin: 0px -26px 15px -26px;
	line-height: 30px;
	text-align: center;
	color: white;
	font-size: 125%;
}

/* Hoja de vida convocatoria, en home ciudadano */
.barra.hojaVida {
	margin-top: -20px !important;
	margin-bottom: -89px;
}
/* Para que se alinee arriba dentro de los reacuadros, como en Convocatoria */
.barra.dentroArriba {
	margin-top: -20px !important;
}
.barra.dentroArriba.mt30 {
	margin-top: 30px !important;
}
/* Recuadro de búsquedas */
.recuadro {
	position: relative;
	z-index: 900;
	display: flex;
	flex-direction: column;
	margin-top: 22px;
	margin-bottom: 37px;
	padding: 20px;
	border: #bbb thin solid;
	background-color: white;
	border-bottom-left-radius: 12px;
	-moz-border-bottom-left-radius: 12px;
	-webkit-border-bottom-left-radius: 12px;
	-ms-border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	-webkit-border-bottom-right-radius: 12px;
	-moz-border-bottom-right-radius: 12px;
	-ms-border-bottom-right-radius: 12px;
	overflow: hidden;
}
/* Bajar tabs desde un CRUD: crear */
.recuadro.mb17 {
	margin-bottom: 17px !important;
}
/* Separa los recuadros hacia abajo */
.recuadro.mb30 {
    margin-bottom: 30px;
}
.recuadro.mb60 {
    margin-bottom: 60px;
}
.recuadro.mt57 {
	margin-top: 46px;
	margin-bottom: 10px;
	border-top: none;
}

.bold {
	font-weight: bold;
}

/***************************** REGISTRO ****************************/
.fRegistro h2,
.fRegistro label,
.fRegistroOpec label {
	font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode",
		sans-serif;
}
/* Fondo ventanas emergentes */
.fRegistro.fondoGris {
	margin: -14px;
	padding: 40px 40px;
	background-color: whitesmoke;
}
/* tooltip de cada campo */
.form_hint, .required_notification {
	font-size: 11px;
}
/* El diseño de los campos es manejado como una lista */
.fRegistro ul,
.nuevoPasswd,
.fFormacion ul,
.fPreinscripcion ul,
.fRegistroOpec ul,
.fDistribucion ul {
	width: 530px !important; /* controla el ancho del formulario */
	list-style-type: none;
	list-style-position: outside;
	margin: 0px auto;
	padding: 0px;
	text-align: left;
}
.fRegistro ul.vh67 {
	height: 67vh;
}
.fDistribucion ul {
	width: 95% !important;
	margin-top: 20px;
}
.fPreinscripcion ul {
	width: 95% !important;
	margin-left: 10px;
}

/* Quita la línea inferior final a los campos de contraseña y verificar contraseña */
.fRegistro .sinLinea li:last-child,
.fRegistro .sinLinea,
.fFormacion .sinLinea li:last-child,
.fFormacion .sinLinea,
.fRegistroOpec .sinLinea li:last-child,
.fRegistroOpec .sinLinea {
	border-bottom: none;
	height: 40px;
}
/* Color de la línea de separación */
.fRegistro li,
.fRegistroOpec li,
.fFormacion li {
	padding: 7px 7px 7px 0px;
	position: relative;
}
/* Controla separación entre campos */
.fRegistro label,
.fRegistroOpec label,
.fFormacion label {
	display: inline-block;
	width: 180px;
	margin-top: 3px;
	float: left;
	padding: 3px;
}
/* Aplica para todos los campos tipo input */
.fRegistro input,
.fRegistroOpec input,
.fFormacion input {
	height: 20px;
	width: 220px;
	padding: 5px 8px;
}
/* Para alinear elemento que no son inputs */
.fRegistro .alinearCampo,
.fRegistroOpec .alinearCampo {
	display: inline-block;
	width: 310px;
	padding: 5px 8px 5px 0px;
}

.fRegistro .alinearCheck,
.fRegistroOpec .alinearCampo,
.fFormacion .alinearCheck
	{
	display: inline-block;
	padding: 5px 8px 5px 0px;
	text-align: justify;
	font-size: 80%;
	line-height: 190%;
}
/* Efecto para los campos tipo input */
.fRegistro input,
.fRegistro div div div input,
.fRegistroOpec input,
.fRegistroOpec div div div input,
.fFormacion input,
.fFormacion div div div input {
	border-radius: 2px;
	padding-right: 30px;
	-moz-transition: padding .25s;
	-webkit-transition: padding .25s;
	-o-transition: padding .25s;
	transition: padding .25s;
}

.fRegistro input:focus,
.fRegistroOpec input:focus {
	background: #fff;
	padding-right: 70px;
}

/* Cambia la altura de la fila */
.sinLinea.h70 {
	height: 70px;
}
/* Margen inferior para contraseña y verificación */
.margenAbajo {
	margin-bottom: -14px;
}

/* Para texto de aviso de campo obligatorio */
.campoRequerido, .cRequerido {
	color: #dc4f39;
	margin: -10px 70px 0px 0px;
	display: inline;
	float: right;
	text-align: right;
}

.campoRequerido.sinMargen {
	margin: 0px;
}

/* Tooltip de advertencia */
.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left: 8px;
	padding: 1px 6px;
	z-index: 999; /* El globito flota sobre todos los elementos */
	position: absolute; /* permite que funcione en dos líneas */
	display: none;
}

/* Es la punta de flecha que apunta al campo en referencia, desde el tooltip */
.form_hint::before {
	content: "\25C0";
	color: #d45252;
	position: absolute;
	top: 1px;
	left: -6px;
}
/* Personalización del tamaño */
.camposLogin.t250,
.camposLogin.w250 {
	width: 250px;
}
.pasosRegistro {
	font-weight: bold;
	font-size:120%;
	color: black;
}
.mensajeCedula {
	width: 542px;
	font-size: 70%;
	text-align: justify;
}


.redondeado {
	padding: 5px;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	color: black;
	font-style: normal;
	font-weight: 100;
	font-size: 100%;
	text-decoration: none;
	border: thin solid white;
	text-align: center;
	z-index:100;
}

/*****************************   CONTRASEÑA   ****************************/
/* Olvido contraseña */
.botonCentrado {
	text-align: center;
	margin: 10px auto;
}
/* Para el ampliar espacio en un list-item de Cambiar contraseña */
.altura40 {
	height: 40px;
}
/* Fijar altura de la ventana cambiar contraseña */
.loginBody.h240 {
	height: 240px;
}
/* Para evitar que quede ancho y alto en 0px como en Nueva contraseña */
.fRegistro .altura {
	height: 320px !important;
}
.centradoF150p {
	font-size:150%;
	text-align:center;
}


/*****************************   MENSAJES DE CONFIRMACIÓN: Ventana emergente   ****************************/
.textoMensajeConfirmacion {
	display: block;
	margin-bottom: 30px;
	color: black;
	font-size: 115%
}

/* Personalización del tamaño */
.camposLogin.t220, .camposLogin.w220 {
	width: 220px;
	background-color: white !important;
}

.cRequerido {
	margin: 0px;
}
/* Barras de desplazamiento para cuando la ventana se reduzca */
.overflowA {
	overflow: auto;
}

.registrese .barra, .registroHome .barra {
	height: 50px;
}

.loginFormCiud .loginBody {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0px;
	padding: 43px 0px -1px;
}

.loginFormDialogo {
	margin-left: 0px;
	background-color: transparent;
}

.loginForm table.login {
	margin-top: 50px;
	font-size: 100%;
	text-align: center;
	padding-left: 0px;
}

.loginForm td.alinearIzquierda {
	text-align: left;
}
/* Mensajes de error, con en el rojo CNSC */
.loginFallido, .sigecaStatusViewer {
	font-size: 100%;
	color: #DC4F39;
	vertical-align: middle;
}

.sigecaStatusViewer {
	width: 90% !important;
}


/* Mensajes de error, basado en el rojo CNSC (#DC4F39) */
.loginFallido.verde {
	color: #14B62A;
}


/******************** HOME CIUDADANO ********************/
.todo {
	margin: 0 auto;
}

.banner, .avisos, .empleos, .footer {

}

.row {

}

.banner {
	position: relative;
	/* 	background: url(./images/texturaRayadaTrans.png) repeat-y; */
	background-color: #81d7ea;
	text-align: center;
}

.cifras {

}
.ayudaVideo {
	clear:left;
	font-size: 80%;
}

.estadisticas {
	display: inline-table;
	margin-right: 1%;
	padding-top: 2px;
	height: 21px;
	border-left: #EEE 2px solid;
	border-bottom: #EEE 1px solid;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	opacity: 0.9;
	filter: alpha(opacity = 90); /* For IE8 and earlier */
	font-weight: normal;
}

.valorEstadistica {
	margin: auto 14px;
	padding-top: 6px;
}

.valorTotal {
	padding: 3px;
	background-color: rgba(0, 0, 0, 0.3);
	color: rgba(255, 255, 255, 0.9);
	font-size: 90%;
	font-weight: bold;
	text-align: right;
}

.logoCNSC {
	position: absolute;
	width: 300px;
	height: 150px;
	top: 14%;
	left: 2%;
	background: url(./images/LogoIK.png) no-repeat center;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	-ms-border-radius: 6px;
	opacity: 0.95;
	filter: alpha(opacity = 95);
	box-shadow: -8px 5px 8px 0px rgba(0, 0, 0, 0.35);
}
.mensajesHome {
	height: 21vh;
	font-size: 1.1em;
	color: black;
	margin: 11% 2% 3% 2%;
	position: absolute;
	text-align: justify;
}
.mensajesHome, .mensaje {
	width: 57vw;
	margin-bottom: 7%;
	padding-right: 20px;
}


@media all and (max-width:1366px) {
	.mensajesHome {
	    font-size: 1.1em;
	    color: black;
	    margin: 15% 2% 3% 2%;
	    position: absolute;
	    text-align: justify;
	    height: 30vh;
	    overflow: scroll;
	}
	.mensajesHome, .mensaje {
		width: 54vw;
		margin-top: 11%;
	}
}
@media all and (max-width:1280px) {
	.mensajesHome {
	    font-size: 1.1em;
	    color: black;
	    margin: 15% 2% 3% 2%;
	    position: absolute;
	    text-align: justify;
	    height: 30vh;
	    overflow: scroll;
	}
	.mensajesHome, .mensaje {
		width: 49vw;
		margin-top: 11%;
	}
}
@media all and (max-width:980px) {
	.mensajesHome {
	    font-size: 1.1em;
	    color: black;
	    margin: 18% 2% 3% 2% !important;
	    position: absolute;
	    text-align: justify;
	    height: 14.5vh !important;
	    overflow: scroll;
	}
	.mensajesHome, .mensaje {
		width: 47vw !important;
		margin-bottom: 7%;
		padding-right: 20px;
	}
}
@media all and (max-width:800px), (min-device-width: 768px) and (max-device-width: 800px){
	.mensajesHome {
		font-size: 1.1em;
		color: black;
		margin: 22% 2% 3% 2% !important;
		position: absolute;
		text-align: left;
		overflow: scroll;
		height: 18vh !important;
	}
	.mensajesHome, .mensaje {
		width: 43vw !important;
		margin-bottom: 7%;
		padding-right: 20px;
	}
}

.filtrosHomeCiudadano {
	display: inline-table;
	/* 	border: #969696 thin solid; */
	width: 317px;
	height: 371px;
	margin: 1% -41% 1% 0%;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: white;
	-webkit-box-shadow: inset -2px 1px 15px 7px rgba(117, 117, 117, 0.82);
	-moz-box-shadow: inset -2px 1px 15px 7px rgba(117, 117, 117, 0.82);
	box-shadow: inset -2px 1px 15px 7px rgba(117, 117, 117, 0.82);
	text-align: center;
	visibility: visible !important;
}

.fraseBusqueda {
	color: #4263b7;
	font-size: 140%;
	font-weight: 300;
	text-align: center;
	font-stretch: extra-condensed;
}

.criterioBusq {
	width: 263px;
	height: 28px;
	margin-bottom: 16px;
	padding-left: 12px;
	padding-top: 5px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-ms-border-radius: 6px;
	font-size: 123%;
}

.filtrosBusq {
	margin-top: 40px;
}

.buscarHome {
	margin-top: 30px;
	font-size: 156%;
	letter-spacing: 1px;
	font-weight: bold;
	font-stretch: extra-condensed;
}

.redes {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0.5%;
	margin: -19% -90% 2% 90%;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	background: white;
	box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
	-o-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
	-MS-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
}

@media all and (max-width:800px), (min-device-width: 768px) and (max-device-width: 800px){
	.redes {
		position: fixed;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0.5%;
		margin: -35% -90% 2% 90%;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
		background: white;
		box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
		-webkit-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
		-moz-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
		-o-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
		-MS-box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.7);
	}
}


.icon-fb, .icon-tw, .icon-yt, .icon-fk, .icon-cn {
	width: 35px;
	height: 35px;
	margin-bottom: 6px;
}

.icon-fb {
	background: url(./images/icon-facebook.png) no-repeat;
}

.icon-tw {
	background: url(./images/icon-twitter.png) no-repeat;
}

.icon-yt {
	background: url(./images/icon-youtube.png) no-repeat;
}

.icon-fk {
	background: url(./images/icon-flickr.png) no-repeat;
}

.icon-cn {
	background: url(./images/icon-cnsc.png) no-repeat;
}

.avisos {
	height: 245px;
	background: url(./images/bannerDinamico.jpg) no-repeat;
	background-size: cover;
}

.footer {
	clear: both;
	padding: 10px 0;
	background-color: black;
	height: 195px;
	color: #2c91d5;
	padding-bottom: 50px;
}

.footer .centrarPie {
	display: flex;
	justify-content: center;
	font-size: 80%;
	color: #769dc0;
}

.footer .centrarPie div {
	padding: 15px;
	max-width: 250px;
	margin: 5px;
	overflow: hidden;
}

.footer a:active, .footer a:link {
	color: #498ddf;
}

.footer a:visited {
	color: #4364b9;
}

.footer li {
	margin-left: -25px;
	list-style: none;
}

.footer h4 {
	line-height: 30px;
}

/*****************************  OFERTA EMPLEO ****************************/
/* Para los íconos */
.celdaIcono {
	width: 28px;
	height: 28px;
	/* margin: 13px 8px 8px 8px; */
	padding: 4px 1px 0px 2px; /* 8px 8px 6px 8px;*/
	background-color: white;
	text-align: center;
	border-radius: 22px;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	-ms-border-radius: 22px;
	cursor: pointer;
	border: rgb(216, 217, 218) thin solid;
}

.itemEmpleo:hover, .celdaIcono:hover {
	background-color: #ffeb93;
}

.cuadroEstadistica {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-right: 30px;
}

.empleo, .empleoFin {
	display: inline-block;
	vertical-align: text-top;
	color: #4b67ae;
	background-color: white;
	padding: 20px;
	width: 29%;
	border-radius: 15px;
	margin: 21px auto;
	box-shadow: 7px 7px 6px 4px rgba(0, 0, 0, 0.1);
}

.empleoFin {
	margin-right: 0px;
}

.empleo .textoDelgado, .empleoFin .textoDelgado {
	font-weight: 100;
	color: #4b67ae;
}

.empleo h2, .empleoFin h2 {
	margin-top: 0px;
}

.clear {
	clear: both;
}

.oculto {
	display: none;
}

.collapsed .expando {
	display: none;
}

.expando {
	margin-top: -35px;
	padding-bottom: 2px;
}
/* Para los expando de empleos (ej. requisitos minimos)  */
.expando .cumpleCon {
	margin-right: 7%;
	text-align: justify;
}
.OPHeaderEmpleo {
	width: 90%
}

th.OPHeaderEmpleo {
	width: 0px !important;
	background-color: transparent !important;
	color: transparent !important;
}

/*****************************  REGISTRO  ****************************/
.loginBodyRegistro {
	display: flex;
	flex-direction: column;
	padding: 0px 0px 13px 10px;
}

.distribuirLinksCentro {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0px;
}

.registrarse, .salidaUsuario {
	padding: 8px 30px;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	-ms-border-radius: 18px;
	opacity: 0.9;
	cursor: pointer;
	color: whitesmoke;
}

.salidaUsuario:hover {
	border: whitesmoke thin solid;
	background-image: linear-gradient(to bottom, gray, black);
}

/*********************** ANCHOS DE COLUMNA  ****************************/




/*********************** FORMULARIOS ****************************/
/* Formatea campos tipo input */
.camposLogin,
.camposLista,
.ingreso,
.camposLogin350 {
	width: 250px; /* 160px */
	height: 28px;
	padding: 5px 10px 4px 10px;
	background-color: white;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	-ms-border-radius: 18px;
	font-size: 123%;
}
.camposLogin.w150 {
	width: 150px;
}

.ml7p {
	margin-left: 7%;
}
.ingreso {
	width: 60% !important;
}

.camposLista {
	height: auto !important;
	border-radius: 10px;
}
/* Personalización de estilo para campo tipo TextArea */
.camposLogin.tArea,
.camposLogin.tArea270,
.camposLogin.tAreaOff,
.camposLogin.tAreaH150,
.camposLogin.tAreaResultados,
.camposLogin.tArea91p,
.camposLogin.tAreaBorde {
	width: 90%;
	height: 150px;
	padding: 15px;
	font-family: inherit !important;
	font-size: 120%;
	background-color: whitesmoke;
}

.camposLogin.tArea {
	height: 100px !important;
}
.camposLogin.tArea91p {
	width: 91%;
}
.camposLogin.tArea95p {
	width: 95%;
	background-color: white !important;
}
.camposLogin.tArea.blanco {
	background-color: white !important;
}

.camposLogin.tArea270 {
	width: 270px;
}
.camposLogin.tArea270.blanco {
	background-color: white !important;
}
.camposLogin.tAreaOff {
	border: none !important;
}
.camposLogin.tAreaBorde {

}
.camposLogin.tAreaOff.blanco {
	background-color: white !important;
}
.camposLogin.tAreaResultados {
	font-size: 100%;
	margin-left: 40px;
}
/* Reclamaciones */
.reduceEspacioGrid-tabAgregar .tabAgregar	{
	margin-bottom: -43px;
}


/*********************** BOTONES, TABS ****************************/
.boton, .botonMediano, .botonGrande, .botonGrandeOpec, .tabGrande {
	margin: 0.2em;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	color: #f00fff !important;
	font-style: normal;
	font-weight: 100;
	text-decoration: none;
	border: none;
}

.boton {
	padding: 10px 18px;
}

.botonMediano {
	padding: 8px 70px;
	font-size: 160%;
}

.botonGrande, .botonGrandeOpec {
	padding: 8px 70px;
	font-size: 200%;
}

.boton.w290 {
	display: flex;
	width: 290px;
	margin-left: 20px;
}

.boton.w350 {
	width: 350px;
}

.tabGrandeBeige {
	border-bottom-left-radius: 28px;
	border-bottom-right-radius: 28px;
	box-shadow: -3px 5px 6px 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: -3px 5px 6px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: -3px 5px 6px 4px rgba(0, 0, 0, 0.3);
	-ms-box-shadow: -3px 5px 6px 4px rgba(0, 0, 0, 0.3);
}

.tabGrandeBeige:hover {
	background: whitesmoke !important;
	text-decoration: underline;
}

.tabGrandeBeigeBorde {
	background: #0fffff;
	background-image: linear-gradient(to bottom, #fff, #fff);
}

.tabGrandeBeige.centro {
	color: black;
	padding: 40px 30px 20px 20px;
	/* para que no se vea blanco en parte superior */
}

/* Alinear botón crear */
.tabAgregar {
	text-align: right;
	padding-bottom: 56px;
	height: 64px;
	margin-top: -10px;
}
.tabAgregar.mt-144 {
    margin-top: -144px;
}
.tabAgregar.nuevo {
	margin-top: -27px;
}

.tabAgregar.mt-90 {
	margin-top: -90px;
}

.tabAgregar.mt-61 {
	margin-top: -61px;
}

/* Posicionar tab crear en Convocatorias.html */
.tabAgregar.posicionarTab {
	margin-top: -43px;
	margin-bottom: 20px;
}

.campoContrasena {
	width: 220px;
	height: 29px;
	padding: 3px 10px 0px 10px;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	-ms-border-radius: 18px;
	font-size: 123%;
}

/*********************** MENU LATERAL ****************************/
.fotoUsuario, .menuPpal {
	width: 230px;
	height: 863px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.fotoUsuario {
	height: 191px;
	padding-top: 35px;
}

.fotoUsuario .foto {
	width: 100px;
	height: 100px;
	margin: 0px auto;
	text-align: center;
	-webkit-border-radius: 57px;
	-moz-border-radius: 57px;
	border-radius: 57px;
	border: 4px solid white;
	overflow: hidden;
}

.fotoUsuario .nombreCiudadano {
	margin-top: 10px;
	font-size: 100%;
	font-weight: 500;
	text-transform: capitalize;
	color: white;
	text-align: center;
}

.menuPpal {
	height: 900px;
	width: 209px;
	padding-top: 21px;
	padding-left: 21px;
}

.menuPpal .opcionMenu, .menuPpal .subMenu {
	margin-bottom: 3px;
	font-weight: 300;
	line-height: 100%;
	cursor: pointer;
}

.menuPpal .opcionMenu {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 120%;
	color: black;
}

.menuPpal .opcionMenu:hover {
	color: #f4f4f4; /*whitesmoke*/
}

.menuPpal .subMenu {
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 85%;
	color: whitesmoke;
}

.menuPpal .subMenu:hover {
	color: #f4f4f4; /*whitesmoke*/
	-webkit-border-top-left-radius: 22px;
	-webkit-border-bottom-left-radius: 22px;
	-moz-border-radius-topleft: 22px;
	-moz-border-radius-bottomleft: 24px;
	border-top-left-radius: 22px;
	border-bottom-left-radius: 22px;
}

/* Fondo redondo para íconos */
.menuPpal .subMenu .iconoRedondo, .datosBasicos .iconoRedondo,
	.datosBasicos .iconoFondoOscuro, .formPreinscripcion .iconoRedondo,
	.iconoFondoGris {
	display: inline-block;
	width: -moz-fit-content;
	margin: auto 8px;
	padding: 4px;
	vertical-align: middle;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	opacity: 0.8;
	filter: alpha(opacity = 80);
}

/* Distribuye enlaces dentro de un DIV */
.distribuirLinks {
	margin-top: 20px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/* para boton: Escoja archivo */
.boton.w250 {
	display: flex;
	width: 250px;
}


/**************** BARRAS DE VENTANAS ****************/
/* Amplía o reduce espacio entre barras de título y dataGrids */
.barra.ampliaEspacioTab {
	margin-bottom: 46px;
}

.barra.reduceEspacioTab17 {
	margin-bottom: 17px;
}

.barra.reduceEspacio {
	margin-bottom: -46px;
}
.barra.mT46 {
	margin-top: 46px !important;
}
/* Se envuelve al dataGrid (crud) */
.reduceEspacioGrid-166 {
	margin-top: -166px;
}
.reduceEspacioGrid {
	margin-top: -156px;
}
.reduceEspacioGrid-140 {
	margin-top: -140px;
}
.reduceEspacioGrid-126 {
	margin-top: -126px;
}

.reduceEspacioGrid-106 {
	margin-top: -106px;
}
.reduceEspacioGrid-96 {
	margin-top: -96px;
}
/* Utilizado en calificación requisitos mínimos */
.reduceEspacioGrid-86 {
	margin-top: -86px;
}
.reduceEspacioGrid-86.mb40 {
	margin-top: -86px;
	margin-bottom: 40px;
}
.reduceEspacioGrid-48 {
	margin-top: -48px;
}
.reduceEspacioGrid-30 {
	margin-top: -30px;
}
.w97p {
	width: 97%;
}

/* Reclamaciones */
.reduceEspacioGridBotonCrear-40 .dgrid {
	margin-top: -0px;
}


/**************** CARGADOR ****************/
.cargador, .cargadorOculto {
	width: 100%;
	text-align: center;
}

.cargador {
	display: inline-block;
}

.cargador img {
	vertical-align: middle;
}

.cargador label, .cargadorOculto label {
	width: 100%;
	text-align: center;
}


/*********************** BARRA: TITULOS  ***********************/
.dijitDialogTitleBar {
	border-top: none;
	text-align: center;
	padding: 5px 7px 16px 7px;
}

/* Como en el caso del home ciudadano con el login (login.js) */
.mensajePopUp,
.mensaje100,
.mensajePopUp800 {
	width: 300px;
	margin: -30px 0px 20px;
	text-align: center;
	line-height: 1.5;
}
/* Mensajes del formulario de registro */
.mensaje100 {
	width: 100% !important;
}
.mensajePopUp800 {
	width: 800px !important;
}


/************************* UPLOADER ***************/
.mensajeAdjuntos {
	color: white;
	font-size: 80%;
	max-width: 330px;
	text-align: center;
	margin: 0px auto;
	margin-top: 10px;
}
/* Para qdar margen interna dentro del uploader */
.distribuirLinks.sinTop {
	margin: 0px 0px -10px 0px;
}

.distribuirFilas {
	margin-bottom: 6px;
	flex-direction: column;
	align-items: center;
}
.mt20 {
	margin-top: 20px;
}
.botoneraUpload {
	border-radius: 38px;
	max-width: 336px;
	padding-left: 14px;
}

.botoneraUpload.mL185 {
	margin-left: 185px;
}
/* Botones uploader */
.boton.bordeBlanco {
	border: thin solid white;
	padding: 0px;
}

/************************* VIDEO MANUALES ***************/
.linkSinCambio a:visited, .linkSinCambio a:active {
	color: white;
}

.linkSinCambio a:hover {
	color: #06F;
}

/*****************************   ESCOGER ARCHIVO   ****************************/
.escogerArchivo {
	display: flex;
	align-items: center;
}

.iconoArchivo {
	padding: 2px;
	border-radius: 50%;
	border: thin solid #FFF;
	background-color: rgba(0, 0, 0, 0.2);
	margin: -22px auto;
}

.iconoArchivo.fondoVerde {
	background-color: #4b67ae !important;
}

/************************* ACRONIMO ***************/
acronym {
	cursor: help;
}


/*************** BREADCRUMB ***********************************/
.breadCrumb { /*componente*/
	background-color: #ddd;
	padding: 10px;
	border-bottom: 3px solid white;
	margin-top: 0px;
}

.breadCrumb a { /*paginas anteriores*/
	display: inline;
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.breadCrumb.div { /*pagina actual*/
	display: inline;
	color: #ddd;
}


/*************** TABLA DATOS ***********************************/
.tablaDatos td, .tFormacion td, .tablaDatosRegistro td {
	padding: 8px;
	vertical-align: top;
}

/* Efecto de mouse-over */
.tablaDatos tr:hover, .tablaDatosRegistro tr:hover {
	background-color: #E1E9FF;
}
/* Color alterno de fila en la tabla (efecto cebra) */
.tablaDatos tr.color, .tablaDatosRegistro tr.color {
	background-color: #fbfbfb;
}
/* para centrar el botón */
.tablaDatos .botonGuardar, .tablaDatosRegistro .botonGuardar {
	text-align: center;
	padding: 30px 0px;
}
/* Alinear botones a la derecha */
.alinearDerecha {
	text-align: right;
}

/* Icono de bote de basura para borrar, usado en la ventana emergente */
.advertencia {
	width: 24px;
	border-radius: 24px;
	padding: 10px;
	background-color: #dc4f39;
	margin: 0px auto;
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-ms-border-radius: 24px;
}


/*****************************   OPEC: USUARIOS CNSC: ventana emergente   ****************************/
.camposLogin.f100 {
	font-size: 100%;
}
/* Personaliza el alto de la ventana */
.loginBody.h640,
.loginBodyScroll.h640 {
	height: 640px;
}

.loginBody.h310 {
	height: 310px;
}

.loginBody.h400 {
	height: 400px;
}

/* Estilo azul para botones upload */
.ponerBotonAzul .dijitButtonNode {
	background: #4161b4;
}


/***************************** inscripciones asignadas  ****************************/
.empleos {
	display: flex;
	flex-direction: column;
	background-color: whitesmoke;
	overflow: hidden;
	margin-top: 30px;
}
/* Req. Min: Evaluación de formación, experiencia, otros docs */


/***************************** Requisitos mínimos: inscripciones en trámite  ****************************/
.ordenXfilas {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 28px;
}
.derecha {
	text-align: right;
	margin-right: 23px;
}


/***************************** Grillas con CSS  ****************************/
.videos .table-layout {
  display: table;
  width: 100%;
}
.videos .table-layout .table-cell {
    display: table-cell;

    vertical-align: top;
  }
.videos .table-layout .fixed-width {
    width: 200px;
  }
.videos .row {

}
.videos .column-1 {
    width: 200px;
}
.videos .column-5 {
    width: 100%;
    color: steelblue;
}
.videos [class*='column-'] {
    float: left;
    position: relative;
    min-height: 1px;
}
.videos .descripcionVideo {
 color: black;
	font-style: normal;
	margin-top: 7px;
}
.videos .grid-item {
	padding: 1em;
  font-size: 1em;
  font-style: italic;
  text-align: center;
  background: whitesmoke;
  border: 1px solid #fff;
}