@charset "utf-8";
@import url(sgstyle.css); /*IMPORTAMOS EL CSS DE LAS FUENTES TIPOGRAFICAS*/

/*GENERALES*/
/*COLORS GRADIENTE*/
.colorMain{background: rgb(0,192,255); background: linear-gradient(45deg, rgba(0,192,255,1) 0%, rgba(66,24,184,1) 75%, rgba(81,0,180,1) 100%); }

/*BORDES DE CLASES*/
.borderDiv{overflow: hidden; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.3);} /*REDONDO Y CON SOMBRA*/

/* GENERAL PARA CUALQUIER DISEÑO DE LA PAGINA */
.classIcon{display: flex; align-items: center; justify-content: center; font-family: softicon; }

.sectionPadding{ padding:3% 5% 0% 5%; width: 90%;}
.sectionMargin{ margin: 7% 5% 0% 5%; }
.sectionMarginSimple{ margin: 7% 0% 0% 0%; }
.sectionMarginInvested{ margin: 0% 5% 0% 5%; width: 90%;}
.sectionMarginPadding{ margin: 7% 0% 0% 0%; padding: 5% 5% 0% 5%;}

/*MAX SCREEN*/
@media only screen and (min-width : 1367px){ 
    .sectionPadding{ padding:3% 9% 0% 9%; width: 82%;}
    .sectionMargin{ margin: 7% 9% 0% 9%;}
    /*.sectionMarginSimple{ margin: 7% 0%; }*/
    .sectionMarginInvested{ margin: 0% 9% 0% 9%; width: 82%;}
    .sectionMarginPadding{ margin: 7% 0% 0% 0%; padding: 3% 9% 0% 9%;}
	}
	
/*NOTIFICACIONES*/
/*._sNotifi0{position:fixed; display:absolute; background:#00AFEF; color:#FFF; width: 100%; padding: 0% 5%; z-index: 100; top: 0px; left: 0px; box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.3);}
	._sTitle{font-family:light; font-size:2em; line-height: 1; display:block; width:100%; float:left; margin-top:20px; opacity:0.5;}
    ._sDetai{font-family:regular; display:block; width:100%; float:left; margin-bottom:30px;}*/

.tooltip{top: 10px; padding: 10px 30px 10px 0px; background-color: var(--color-prim); color: var(--color-white);
		position: absolute;/*position: fixed; width: 50%; height: auto; margin: 1% auto; left: 0; right: 0; */
		display: grid; grid-template-columns: 60px 1fr; /*grid-gap: 10px;*/}
	.tooptipIcon{font-family: softicon; font-size: 2.5em;  grid-row: 1 / 3; }
	.tooptipMessaje{ font-family: light; font-size: 1.1em; align-items: flex-end; line-height: 1; padding-top: 5px;}
	.tooptipDetails{font-size: 0.7em; opacity: 0.5; line-height: 1;}

/*PHONES*/
@media only screen and (max-width : 700px){
	.tooltip{width: 90%;}
	}
	
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ESPESIFICOS////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* LOGIN */
.imgBakground{position: absolute; top: 0px; width: 100%; height: 100%; background: url(../simg/building.jpg) no-repeat center center fixed; opacity: 0.05; /*z-index: -1;*/}

.windowslogin{width:70%; height:80%; /*background: var(--color-white);*/}
	.loginSecA{ /*text-align: center;*/ padding:0% 5%; background: var(--color-white); /*max-width: 300px;*/ width: 500px; height: 100%;}
		.loginMainIcon{color: var(--color-lihgt); font-size: 6em; padding-bottom: 15px;}
		.loginMainTitle{font-family: bold; font-size: 2em; width: 100%; margin-bottom: 20px; line-height: 1; color: var(--color-primDark);}
		.loginMainDetails{display:block; width: 100%; font-size: 0.9em; margin-bottom: 5%;}
		.loginMainInfo{display:block; width: 100%; font-size: 0.7em; border-top: solid #eee 1px; padding-top: 10px; opacity: 0.5;}

	.loginSecB{position: relative; display: flex; flex-wrap: wrap; align-items: center; margin:0% 5%; width: 100%; height: 100%; color: var(--color-white);}
		.loginmessaje{width: 100%; font-family: light; font-size: 5em;  line-height: 1.1;}
		.loginDescription{width: 100%; font-size: 1.3em; padding-top: 10px; opacity: 0.5;}
		.loginOptions{position: absolute; bottom: 10px; left: 0px;}
			.loginOpcSoft{font-size: 2em; padding-right: 10px;}
			.loginOpcSeparator{ padding: 0px 20px;}
			.loginOpcBto{font-size: 0.9em; color: var(--color-white); opacity: 0.5; cursor: pointer; transition:0.2s Ease-in-out;}
			.loginOpcBto:hover{opacity: 1; padding: 0px 10px;}

	/*CUSTOM*/ @media all and (max-width:1341px){ 
		.windowslogin{width:90%;}
		.loginOptions{display:none;}
		}

	/*CUSTOM*/ @media all and (max-width:800px){ 
		.loginSecA{width: 60%; }
		.loginSecB{margin:0% 5%; width: 30%;}
			.loginmessaje{font-size: 3em;}
			.loginDescription{font-size: 1em;}
		}

	/*CUSTOM*/ @media all and (max-height:750px){ 
		.loginMainIcon{display:none;}
		}

	/*PHONES*/ @media all and (max-width:539px){ 
		.windowslogin{width:100%; height:100%; }
			.loginSecA{width: 100%; text-align: center; border-radius: 0%; /*background-color: transparent;*/
				background: rgb(255,255,255);
				background: linear-gradient(350deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 30%);}
			.loginSecB{display:none;}
		}

	
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*PAGINA PRINCIPAL ADMINISTRADOR*/
.regMain{display: block; position: relative; }
	/*fondo de color degradado con imagen*/
	.regBckColor{position:absolute; top:0px; left:0px; width: 100%; height:100%; z-index: -1;}

	.admInfoMain{color: var(--color-white); display: block; /*padding:3% 3% 0% 3%;*/}
		.adminfTxt{font-family: light; font-size: 2.5em; line-height: 1;}
		.adminfTxt:first-child{padding-top:5%;}
		/*ENCABEZADO INFORMACIÓN*/
		.containeradm{width:100%; display: inline-block; position: relative; overflow: hidden; padding: 1% 0%; font-size: 0.85em;}
			#admbarinf{ float: left; width: 100%; margin: 6px 0px;}
				.adminf, #admdate{float: left; margin-left: 10px; padding-left: 10px; border-left: 1px dotted var(--color-white); opacity: 1;}
				.adminf a{color: var(--color-white);}
				.adminf:first-child{ margin-left: 0px; padding-left: 0px; border-left: 0px;}
			#admclose{position:absolute; right: 0px; opacity:0.2; transition:0.2s Ease-in-out; font-size: 2.5em;}
				#admclose a{text-decoration: none; color: var(--color-white);}
				#admclose:hover{position:absolute; right: 0px; opacity:1; }	

		/*PANELES DE OPCIONES*/
		.mainPanelesRegion{display:block; position: relative; overflow: hidden; height: 450px;}
			/*botones del navegador*/
			.mpanelButtl, .mpanelButtr{position:absolute; width:60px; top:45%; z-index:1; transition:0.2s Ease-in-out; cursor:pointer; opacity: 0.3; font-size: 3em; color: var(--color-white);}
				.mpanelButtl{left: 0px;}
				.mpanelButtr{right: 0px;}
				.mpanelButtl:hover, .mpanelButtr:hover{ opacity: 1;}
			/*contenedors de paneneles y paneles*/
			.mpanelContent{position: absolute; /*width:2000px /*porr 6 paneles*/; height: 100%; top: 0px; left:0px; }
				.mPanelOpc{float:left; position: relative; width: 300px; height: 410px; background: var(--color-white); margin:20px 0px 20px 20px; overflow: hidden; transition: 0.2s Ease-in-out; cursor: pointer;
							border-radius: 7px 7px 7px 7px; box-shadow: 0px 0px 20px 0px rgba(50,109,237,1);}
				.mPanelOpc:hover{margin:10px 0px 20px 20px; box-shadow: 0px 5px 20px 0px rgba(50,109,237,1); }
				.mPanelOpc:hover .mPanelBlocInfo h3{ color: var(--color-prim); }

					.mPanelImg{width: 100%; height:70%; overflow: hidden; font-size:5em; background-color: var(--color-prim); color: var(--color-white); transition: 0.2s Ease-in-out;}
						
					.mPanelBlocInfo{ margin: 20px 20px 0px 20px; text-align: center; line-height: 1; overflow: hidden;}
						.mPanelInfo{font-family: bold; font-size: 0.7em; opacity: 0.5;}
						.mPanelTitl{font-family: light; font-size: 1.8em;}
						.mPanelDesc{margin-top: 10px; padding-bottom: 2px; opacity: 0.7; font-size:0.8em; font-family: regular;}
					.mPanelMessaje{ height:35px; width: 35px; background-color:rgb(224, 0, 37); color: var(--color-white); border-radius: 50%; font-family: bold; font-family: 1.1em;
								position: absolute; top: 65%; left: 44%; display: flex; justify-content: center; align-items: center; }

		/*PANELES DE NOTICIAS*/
		.mainSecInf{display: block; color: var(--color-prim); text-align: left; padding:3% 0%;}
			.mainsecDetails{font-size: 0.9em; padding-top: 5px; color: var(--color-lihgt); }

			.mainPanelnewsTitle{padding: 50px 0px 100px 0px; width: 80%;}
			.mainPanelContent{grid-gap: 20px;}

				.mainsecMoreNews{display: block; margin-top:20px; font-size: 0.7em; color: var(--color-gray);}
					.mainsecMoreNews>a{background-color: #eee; color: var(--color-prim); font-family: bold; padding: 3px 10px 5px 10px; margin-left: 10px; border-radius: 5px; transition: 0.2s Ease-in-out;}
					.mainsecMoreNews>a:hover{background-color: var(--color-prim); color: var(--color-white); padding: 3px 10px 5px 10px; border-radius: 5px;}

				.mainPanelNew{ background-color: var(--color-white); margin-bottom: 20px; cursor: pointer; box-shadow: 0px 0px 10px 0px rgba(50,109,237,0.5); transition:0.2s Ease-in-out;}
					.mainPanelNew:hover{transform: scale(1.05); box-shadow: 0px 0px 20px 0px rgba(50,109,237,0.7);}
	
					.mainPanelImg{width: 100%; height: auto; color: var(--color-lihgt); text-align: center;}
					.mainPanelInf{width: 90%; height: auto; padding: 5%;}
						.mainPanelInfClasific{ font-size: 0.7em; opacity: 0.5;}
						.mainPanelInfTitle{font-family: bold; font-size: 1.2em; line-height: 1.1; padding: 15px 0px 5px 0px;}
						.mainPanelInfOptions{border-top: dotted 1px #aaa; margin-top: 20px; padding-top: 10px;}
							.mainPanelInfoOpcButton{margin: 0px 5px; color: var(--color-gray); transition:0.2s Ease-in-out; opacity: 0.7;}
							.mainPanelInfoOpcButton:hover{ padding: 0px 5px; opacity: 1;}
							.mainPanelInfOptions span{font-family: bold; font-size: 0.8em; color: var(--color-lihgt); padding-left: 15px;}


		/* SECCIÓN DE INFORMACIÓN ESTADISTICA */
		.sectionInformation{position: relative; padding-bottom: 50px;}

			.mainInfVisit{padding-bottom: 5%;}
				.mainInfVisitNumber{font-family: light; font-size: 15em; color: var(--color-white);}
				.mainInfVisitText{font-family: light; color: var(--color-white); font-size: 1.5em; padding-left:15px; padding-bottom: 10px; line-height: 1; opacity: 0.5; border-bottom: 2px dotted #fff;}
				.mainInfVisitText span{font-family: softicon;}

			.mainInfPanel{text-align: center; line-height: 1; transition:0.2s Ease-in-out; padding: 20px 10px; background-color: var(--color-white); cursor: pointer;}
				.mainInfPanel:hover{ color: var(--color-white); background-color: var(--color-primDark); transform: scale(1.05);}
				.mainInfPanel:hover .mainInfPanIcon{color: var(--color-white);}
				.mainInfPanel:hover .mainInfPanTitle{color: var(--color-white);}
				.mainInfPanel:hover .mainInfPanDetai{color: var(--color-white);}

				.mainInfPanIcon{font-size: 4em; padding: 20px 0px; color: var(--color-prim); transition:0.2s Ease-in-out; }
				.mainInfPanTitle{font-family: light; font-size: 2em; padding-bottom: 10px; color: var(--color-gray);}
				.mainInfPanDetai{font-family: bold; font-size: 0.8em; opacity: 0.4; color: var(--color-gray);}

		/*INFORMACION GENERAL DE VISITANTES*/
		.sectionInformationVisit{/*display: grid; grid-template-columns: repeat(2, 1fr);*/ padding-bottom: 5%;}

			.mainPanelesInfUser{display:block; position: relative; overflow: hidden; height: 500px; border-left: 2px solid var(--color-gray); border-right: 2px solid var(--color-gray);}
				.mpanelContentInfUser{position: absolute; height: 100%; top: 0px; left:0px; }
					.mPanelOpcInfUser{float:left; position: relative; width:700px; height: 95%; background: var(--color-white); overflow: hidden; transition: 0.1s Ease-in-out;
									margin:0.5% 10px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);}

		/*PIER DE PAGINA*/ 
		.footerPage{position: relative; color: var(--color-white); overflow: hidden;}

			.footerMenu{padding-bottom: 30px; margin-top:90px; border-bottom: 1px solid rgba(255,255,255,0.2); }
				.footerMnu{font-family: bold; font-size: 0.8em; color: var(--color-white); margin:5px; padding: 5px; cursor: pointer; transition:0.2s Ease-in-out; }
				.footerMnu:hover{padding: 5px 15px; background-color: var(--color-white); color: var(--color-primDark);}

			.footerInformation{padding-bottom: 30px; display: grid; grid-template-columns: repeat(3, 1fr);}
				.footerSoftsitesLogo{padding-top: 30px; padding-bottom: 30px;}
					.footerSoftsites{font-size: 4em; padding-right:15px;}
					.footerSoftsitesTxt{font-family: light; font-size: 2.3em; opacity: 0.7;}
				.footerinfoText{display: block; font-family: light; font-size: 0.9em; text-align: center; /*line-height: 1;*/ opacity: 0.5;}
				.footerHeadMessaje{font-family: light; font-size: 2em; text-align: right; padding-top: 30px;}

			.footerbandbottom{padding-top: 15px; padding-bottom: 15px; background-color: var(--color-black); opacity: 0.7;}
				.footerbandbTxt{font-size: 0.9em; /*line-height: 1;*/ font-family: light;}

	/*CUSTOM*/@media all and (max-width:842px){
		/* SECCIÓN DE INFORMACIÓN ESTADISTICA */
		.mainInfVisitNumber{font-size: 6em; }
			.mainInfVisitText{font-size: 1.3em; text-align: center; padding-left:0px;}

		/*PIER DE PAGINA*/ 	
		.footerInformation{grid-template-columns: repeat(1, 1fr);}
			.footerSoftsitesLogo{justify-content: center; align-items: center;}
			.footerHeadMessaje{text-align: center;}
		}

	/*CUSTOM*/@media all and (max-width:780px){
		/*INFORMACION GENERAL DE VISITANTES*/
		.mPanelOpcInfUser{width:300px; }
		}

	/*PHONES*/@media all and (max-width:539px){
		/*PAGINA PRINCIPAL ADMINISTRADOR*/
		.adminf:last-child{display:none;}
		.adminfTxt:first-child{padding-top:30%;}
		}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* NOTICIAS */ 
/*filtros*/
.blocSearchFilter{width: auto; height: 25px; padding: 5px 10px; background-color: var(--color-white); margin:3px; line-height: 1; cursor: pointer; overflow: hidden; transition:0.3s;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.07); border-radius: 5px 5px 5px 5px; }
.blocSearchFilter:hover, .blocSActive{color: var(--color-white); margin: 3px 10px;
				background: rgb(0,46,212); background: linear-gradient(45deg, rgba(0,46,212,1) 0%, rgba(0,140,237,1) 100%);}
.bstitle{font-family: bold; font-size: 0.9em;}
.bsInfo{font-size: 0.6em; opacity: 0.5;}

/*busqueda*/
.newsSearh{/*border-bottom: 1px dotted #bbb;*/ margin-bottom: 10px; padding-bottom: 10px;}
.nSearchInfo{font-size: 0.9em;}
.nSearchBloc{margin: 10px 0px;}
.nSearchBox{width: 0%; background-color: transparent; color: #333; border-bottom:solid 2px #326ded; padding: 5px; font-family: regular; font-size: 1.5em;}
.nSearchBut{font-size:1.5em; color: #326ded; background-color: transparent; padding:8px 11px 5px 10px; cursor: pointer; transition:0.3s;}
.nSearchBut:hover{ background-color: #326ded; color: var(--color-white); transform: scale(1.1);}

/*contenedor de las noticias en la página*/
.newsResultSee{ background-color: transparent; }
.newsBoxLoad{height:300px; width: 100%; display: flex; align-items: center;}

.newsWidtOutR{display: block; width: 100%; text-align: center; color: var(--color-gray); padding: 10% 0%;}
.newsWOIcon{font-size: 10em; color: #ddd;}
.newsWOTitle{font-size: 2.5em; font-family: light;}
.newsWOInfo{font-size: 0.9em;}

.NewsSeeMore{display: block; padding: 13px 1%; font-family: regular; font-size: 0.9em; margin-top: 20px; text-align: center; cursor: pointer; background-color: var(--color-white); color:  #52a5c9; transition:0.3s; width: 98%; 
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50,109,237,0.33); -moz-box-shadow: 0px 0px 10px 0px rgba(149, 183, 255, 0.33); box-shadow: 0px 0px 10px 0px rgba(50,109,237,0.33);}
.NewsSeeMore:hover{background-color: #326ded; color: var(--color-white); letter-spacing:1px;}

/*PAGINA AGREGAR NOTICIA*/
.fshadown{-webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.11);
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.11);}

.fLabel{display: block; padding: 20px 0px 5px 5px; font-family: light; font-size: 1.2em; color:#00afef;}
.fLabelNone{display: none;}
.fLabelBox{padding: 5px 5px 5px 15px; font-family: light; font-size: 1.2em; color:#00afef;}
.fLabelInfo{ width: 100%; padding: 5px 5px 5px 15px; font-family: light; font-size: 1.2em; color:var(--color-lihgt);}
.fLabelEtiqueta{background:#333; padding:3px 10px; margin:3px 5px; color: var(--color-white); transition:0.3s; cursor: pointer;}
.fLabelEtiqueta:hover{margin:3px 10px; background:#ddd; color:#333; }

.fLabel span{background-color: var(--color-gray); color: var(--color-white); font-size: 0.6em; padding: 3px 10px; margin-left:20px; border-radius: 5px;
cursor: pointer; transition:0.2s Ease-in-out;}
.fLabel span:hover{ background-color: var(--color-prim); }

.fselect{display: block; padding: 13px 1%; color: #00afef; font-size: 1em;}
.fselectMargin{display: block; padding: 13px 2%; margin: 0% 1%; width: 32%; font-size: 1em; color: #00afef;}
.fselectMargin:first-child{margin: 0% 1% 0% 0%;}
.fselectMargin:last-child{margin: 0% 0% 0% 1%;}
.fCheckBox{margin: 8px 5px 5px 5px;}
.ftextbox{padding:13px 1%; font-size:1em; font-family: regular; color:#212121; resize:none;}
.fseparator{display: block; margin: 3% 0%; border-bottom: 2px dotted var(--color-lihgt);}

/*IMAGENES / NOTICIAS*/
#Ilistimg{ display: flex; flex-wrap: wrap;}
#Ilistimg li{ list-style: none;}
.Iareaimg, .IareaimgN{width:200px; height:170px; position:relative; overflow:hidden; cursor:pointer; margin:3px; border: 1px solid #eee; background: var(--color-white);}

	#Iimgclick{width:100%; height:100%; font-size: 6em; transition:0.3s; color: #0098da; background: var(--color-white);}
		#Iimgclick:hover{color: var(--color-white); background: #0098da;}

	#Iimgloading{width:100%; height:100%; overflow:hidden;}
		#Iimgloading>img {width: 100%; height: 100%; object-fit: cover;}

	/*variables de la imagen*/ /*oculto por estetica*/
	#Iimgtxt{position:absolute; bottom:0px; left:0px; right:0px; text-align:center; color:var(--color-white); font-size: 0.6em; display: none;}
	/*opciones de la imagen*/
	.IimgDell,.IimgSelect,.IimgSelected{position:absolute; bottom:3px; font-family:softicon; font-size:3em; color:var(--color-white); padding:5px; opacity:0.5; transition:0.3s;}
		.IimgDell{left:3px;}
		.IimgDell:hover{opacity:1; left:9px;}
		.IimgSelect, .IimgSelected{right:3px;}
		.IimgSelect:hover, .IimgSelected:hover{opacity:1; right:9px;}
		.IimgSelected{color:#FEC12C;}
	.imgShadow{position:absolute; top:0; width: 100%; height: 100%; opacity:0.5; transition:0.3s; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 100%);}
		.imgShadow:hover{opacity:1;}
/*mensaje alerta version anterior, conserva el mismo aspecto*/
#dfootareamsg{position:fixed; bottom: 0px; width:100%; background:#F00; color:var(--color-white); text-align:center; padding:10px;opacity:0;
	height:70px; display:flex; align-content: center; justify-content: center;}
.FMiconText{padding-right:20px; font-size:3em; opacity: 0.5;}
.FMText{padding-top:20px; font-size: 1.2em;}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* MENSAJES */ 
.sectionmessaje{height: 90%; overflow: hidden;}

	.MessBandeja{float:left; width:35%; height:100%; background-color: var(--color-white); overflow-y:scroll;}
		
		.MessBanHead{display:block; width: 50%; text-align: center; font-family: bold; font-size: 0.9em; padding:25px 0px; cursor: pointer; margin-bottom: 10px; border-bottom: 1px solid #e5f7fd; color: var(--color-gray);}
			.MessBanHead:hover{opacity: 0.8;}
			.MessBanHead:first-child{background-color: var(--color-primDark); color: var(--color-white);}

		#listMessajes{display: block; width:100%;}
			
		.MessajeRow, .MessajeRowS{list-style:none; overflow:hidden; cursor:pointer; border-bottom: 1px solid #e5f7fd; color: var(--color-gray);}
		.MessajeRowS{border-right: 3px solid var(--color-prim); color: var(--color-primDark); background: rgb(229,247,253); background: linear-gradient(90deg, rgba(229,247,253,1) 50%, rgba(206,243,255,1) 100%);}
			.MessajeRow:hover{ background-color: #e5f7fd;}
				.MessajeCircleU{border-radius:50%; height:30px; width:30px; align-items: center; justify-content: center; display: flex; text-indent:-1px; background-color: var(--color-prim); color: var(--color-white); overflow: hidden; margin: 10px 15px 0px 10px; flex:0 0 auto;}
				.MessajeInfoU{flex:1 1 auto;}
					.MessIDate{font-size: 0.8em; padding-top: 10px; opacity: 0.4; line-height: 1;}
					.MessIName, .MessINameN{font-family: regular; font-size: 1.1em; opacity: 0.8;}
						.MessINameN {font-family: bold; color: var(--color-primDark);}
					.MessICont{font-size:0.9em; padding: 10px 0px; opacity: 0.7;}
				.MessajeMark{flex:0 0 auto; margin:15px; font-size: 1.2em; color: var(--color-prim);}

				.colorA{background-color: #ffab14;} .colorB{background-color: #FEC917;} .colorC{background-color: #FF731B;} .colorD{background-color: #E6522C;} .colorE{background-color: #C22A37;} .colorF{background-color: #992E34;} 
				.colorG{background-color: #402872;} .colorH{background-color: #6A4475;} .colorI{background-color: #8469AC;} .colorJ{background-color: #2C44B0;} .colorK{background-color: #2F3E83;} .colorL{background-color: #014F97;} 
				.colorM{background-color: #005490;} .colorN{background-color: #015CAB;} .colorO{background-color: #006AB4;} .colorP{background-color: #0173BC;} .colorQ{background-color: #008FC9;} .colorR{background-color: #007843;} 
				.colorS{background-color: #018D4E;} .colorT{background-color: #38A031;} .colorU{background-color: #71AB45;} .colorV{background-color: #CF4078;} .colorW{background-color: #FA0060;} .colorX{background-color: #F68DB8;} 
				.colorY{background-color: #FF5900;} .colorZ{background-color: #019FA2;} 
				
				/*termina la lista de los mensajes*/
				#listmore{background:#ddd; color: var(--color-gray); padding:20px 0px; text-align:center; cursor:pointer;}
				#listmore:hover {background-color: var(--color-prim); color: var(--color-white); }

	.MessConten{ float:left; width:65%; height: 100%;}

		#ccontentframe{display:block; width:100%; height:100%; overflow:auto;}
		#returnMessaje{position: absolute; bottom: 20px; right: 20px; background:var(--color-prim); color:var(--color-white); cursor: pointer; border-radius: 50%; width: 60px; height: 60px;
					font-size:2em;	align-items: center; justify-content: center; display: none;} /*circulo para regresar al menu de mensajes*/

	/*para el contenido del mensaje en blanco*/
	.messBackgroud{width: 60%; height: 100%; padding: 0% 20%; text-align: center;}
		.messIconMain{font-size:10em;}
		.messTitleBlank{font-size:2em; color: var(--color-prim);}
		.messDetaiBlank{font-size:0.9em;}
		.messOption{padding: 10% 0% 15% 0%; color: var(--color-lihgt);}
			.messOptionIcon{font-size: 2em; padding-bottom: 10px;}
			.messOptionDesc{font-size: 0.7em;}

	/*para los mensajes recibidos*/
	.messSeeMessaje{width: 94%; padding: 3%; position: relative;}
		.messMarcado{position: absolute; width:60px; height:60px; top:5%; right:3%; color:#FEC12C; font-size:1.2em;}
		.messTitle{font-size:2em; font-family:light; padding-bottom: 20px; border-bottom: 1px solid #ddd; color:#666;}
		.messInfo{padding: 10px 0px; align-items: center;}
			.messInfoUser{border-radius:50%; height:40px; width:40px; background: var(--color-prim); color: var(--color-white); font-size:1.8em; text-indent:-3px; overflow: hidden; flex:0 0 auto;}
			.messInfoblocM{flex:1 1 auto;}
				.messInfobloc{padding:4px 0px 0px 7px; }
					.messInfoName { line-height: 1; font-family: bold;}
					.messInfoMail{font-size: 0.8em; color:#bbb;}
			.messInfoDate{margin: 0px 20px; font-size: 0.9em; color: var(--color-gray); flex:0 0 auto;}
			.messInfoMnu{font-size: 1.3em; padding:10px; color:var(--color-prim); cursor: pointer; transition:0.2s Ease-in-out; flex:0 0 auto;}
				.messInfoMnu:hover{background-color: #ddd;}
		.messMessage{color: var(--color-gray); padding:20px 0px 50px 0px; border-bottom: 1px solid #ddd; font-size: 1.2em;}

	/*TABLET*/@media all and (max-width:898px){
		.MessBandeja, .MessConten{width: 100%;}
			/*#returnMessaje{ display: flex;}*/
		}



/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ARCHIVOS */
/*SECCION FILES*/
.mainfileslasted{display: block;}
	.mfileRow{border-bottom: 1px solid #eee; overflow: hidden; transition:0.3s; margin: 0px;}
	.mfileRow:hover{background: var(--color-white); margin-left: 15px; border-bottom: 1px solid var(--color-white); -webkit-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.21); -moz-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.21); box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.21);}
		.mfileIco{height:50px; width:50px; font-size: 2em; margin: 5px;}
		.mfileInf{width: 90%; margin: 2px 5px; color: #555; overflow: hidden;}
			.mfilerName{font-family: bold; margin-top: 9px;}
			.mfilerDeta{font-size: 0.8em; color: var(--color-lihgt); margin-top:5px;}
				.mfileDaCam{font-size:1.5em; padding-right: 5px; margin-top: -1px;}
				.mfileDaInf{padding-right: 5px; margin-right: 5px; border-right: 1px dotted #ccc;}
				.mfileDaInf:last-child{padding-right: 0px; margin-right: 0px; border-right: 0px;}
		.mfileMnu{height:50px; width:50px; font-size: 1.5em; margin: 5px; cursor: pointer; opacity: 0; color: #999; text-decoration: none;}
			.mfileMnu:hover{background-color: #eee;}

		.mfiEdit{margin-top: 20px; padding: 20px 0px; border-top: 1px dotted var(--color-lihgt); }


	/*COLORS FILES*/
	.colorFdoc{background-color: #2B5797; color: var(--color-white); }
	.colorFxls{background-color: #227547; color: var(--color-white); }
	.colorFpdf{background-color: #ED3237; color: var(--color-white); }
	.colorFzip{background-color: #FEC12C; color: var(--color-white); }
	.colorFtxt, .colorFjpg{background-color: #848688; color: var(--color-white); }
	

.uploadfiles{display: block; width: 100%; height:300px; border: dashed 2px var(--color-lihgt); position: relative; text-align: center; transition: 0.2s; overflow: hidden;}
.uploadfiles:hover { margin: 5px 1%; height: 290px; width: 98%; background: #b6d6fb; border-color: #276cbc; color:#276cbc;}
	.regionfiles{position: absolute; width: 100%; height: 100%; top:0px; left: 0px; outline: none; opacity: 0; cursor: pointer;}
	.upfilTitle{font-family: bold; font-size: 1.3em; margin-top:120px;}
	.upfilDetail{font-family: regular; font-size: 1em;}
	
	.infoDescripcion{padding:30px 0px 10px 0px; font-family: bold; font-size: 0.9em;}

	.fileClasisif{border-top: 2px solid #276cbc; margin-top: 20px; overflow: hidden;}
		/* COMBO BOX----------------------------------------------------------*/
		.ComboSelect{display: block;}	
			#ids{display: none;}
			.rSelect{width: 96%; background-color: #eee; color: #999; padding: 2%; cursor: pointer; transition: 0.3s;
				border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px;}
				.sactive, .rSelect:hover{background-color: #006AB4; color: var(--color-white);}
		/*----------------------------------------------------------*/

	.listFilesUpload{padding:10px 0px;}
		.listFilesUpload li{list-style-type: none; background: var(--color-white); display: block; padding:1%; border-radius: 4px; margin-bottom: 10px; overflow: hidden; -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.22); -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.22); box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.22);
							display: flex; flex-wrap: nowrap;}
			
			.lfsecA{font-size: 5em; width:100px; height:100px;}	
			.lfsecA, .lfsecD{width: 10%; display: flex; justify-content: center; align-items: center; }
			.lfsecB{width: 30%; margin: 0% 2%; display: flex; flex-direction: column; justify-content: center;}
			.lfsecC{width: 60%; display: flex; flex-direction: column; justify-content: center;}
			.lfsecD{width: 60%; font-family: bold; font-size: 1em; color: #4CAF50;;}
			
			.fileType{font-size: 0.9em;}
			.fileName{font-family:bold; font-size: 1.3em; color: #555;}
			.fileMore{display: flex; flex-direction: row;}
				.fileDetails{font-size: 0.9em; color: #0098da; margin-top: 10px; margin-right: 20px;}

			.filButton{cursor: pointer; text-decoration: none; transition: 0.2s; opacity:0.5;}
				.filButton:hover {opacity:1;}

.uploadListClas{border-bottom: 2px solid #276cbc; margin-bottom: 20px;  padding-bottom: 20px; overflow: hidden; width: 100%;}
	.filbtoRefress{padding: 10px; font-size: 3em; color: #0098da; cursor: pointer;  transition: 0.3s;}
		.filbtoRefress:hover{transform: rotate(45deg) scale(0.9);}
		
	/*MODIFICAR ARCHIVOS*/
	.fileBigIcon{width: 100%; height: 400px; font-size: 15em;}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* IMAGENES */ 
.sectionGalleryImg{padding-bottom: 3%; grid-auto-rows: 300px; grid-auto-flow: row dense;}
	.gridViewImage{ height: 100%; background-color: #000; overflow: hidden; cursor: pointer; transition:0.2s Ease-in-out;
					box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);}

	.gridViewImage img{ transition:0.2s Ease-in-out;}
	.gridViewImage:hover{ box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.9); }
	.gridViewImage:hover img{ transform: scale(1.1); opacity:0.7;}

	.gridViewImageMore{background-color: var(--color-prim); color: var(--color-white); font-size: 3em; cursor: pointer; transition:0.2s Ease-in-out;}
	.gridViewImageMore:hover{background-color: var(--color-primDark); font-size: 4em;}

/*TABLET*/ 
@media only screen and (max-width : 898px){
    .sectionGalleryImg{ grid-auto-rows: 200px; }
    }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* INFORMACIÓN */
.informationMargin{margin: 10% 0%;}
.infomationTwo{display: grid; grid-gap: 15px; grid-template-columns: repeat(2, 1fr); }
.infomationTree{display: grid; grid-gap: 15px; grid-template-columns: repeat(3, 1fr); }
	.infoMoreView{display: block; width: 100%; height: 100%; padding: 10px 0px; text-align: center; background-color: var(--color-prim); color:var(--color-white); cursor: pointer; transition:0.2s Ease-in-out;}
	.infoMoreView:hover{ letter-spacing: 3px; background-color: var(--color-primDark); }

/*PHONES*/ @media all and (max-width:539px){
	.infomationTwo, .infomationTree{ grid-template-columns: repeat(1, 1fr);}
	}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*CONFIGURACIÓN*/
.confBlock{ overflow: hidden;}
.confBTitle{ display: block; width: 100%; font-family:light; color: #00AFEF; padding-bottom: 10px; padding-left: 23px; }		
.confBText{width: 100%; font-family: light; font-size: 1.2em; color: var(--color-gray); text-align: left; padding-top: 10px;}
.confBDetails{ width: 100%; color: #ccc; text-align: left;}

#blistusers, #blistclass, #blistclassfil{ width: 100%;}
.iconConf{font-size: 1.2em; cursor: pointer;}
.iconConf:hover{color:#006AB4; }

		
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ERROR 404*/
.e404Main{color: var(--color-white); line-height: 1;}
	.e404back{font-size: 15em; color: var(--color-white); opacity: 0.3;}
	.e404Title{font-family: bold; font-size: 5em; }
	.e404details{padding: 30px 0px 3px 0px; opacity: 0.4; font-size: 0.8em;}
	.e404info{padding: 0px 0px 30px 0px; opacity: 0.7;}