body {font:11px/1.6 "arial", sans-serif; color:#5f5c5c;}
a {color:#000;font-size:11px;text-decoration:none; cursor:pointer;}
a:hover, a:active, a:focus {color:#005acb;font-size:11px;text-decoration:underline; cursor:pointer;}

/* --- Maquetación --- */

#main {width:100%;height:100%;}

#header 
{
	position:relative; 
	height:30px; 
	overflow:hidden;
	background:url("../images/bg_header.gif") 0 0 repeat-x;
}
#header #logo {
	position:relative; 
	width:78px; 
	height:30px; 
	overflow:hidden; 
	margin:0; 
	padding:0;
	background:url("../images/logo_sup.png") 0 6px no-repeat;
	background-color:#0d2939;
}
#header #userbar {
	position:relative; 
	height:30px;
	margin:0; 
	padding:0;
}

#header #userbar #breadcrumb {
	position:relative;
	width:180px;
	margin:0; 
	padding:5px 0 0 10px;
}

#header #userbar #user {
	position:relative;
	margin:0; 
	padding:0;
}

#userBar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#user a {
	display:block;
	float:left;
	height:30px;
	padding: 5px 0 0 35px;
	margin-right:30px;
}
.a_user {
	background:url("../images/usuario.png") 0 0 no-repeat;
}
.a_messages {
	background:url("../images/messages.png") 0 0 no-repeat;
}
.a_favorites {
	background:url("../images/favorites.png") 0 0 no-repeat;
}
.a_logout {
	background:url("../images/logout.png") 0 0 no-repeat;
}

#content {
	/*padding-top:5px;*/ /* Maquetacion Google */
	float:left;
	width:100%;
	height:100%;
}

/*#footer {
	clear:both;
	height:150px;
	border-top: 1px solid #8598a4;
	background:url("../images/bg_footer.gif") 0 0 repeat-x;
	/*added*/
	/*float:left;
	width:100%;
	display:none;
}*/

#footer #footer_cont {
	height:150px;
	/*background:url("../images/m_agua_footer.png") bottom right no-repeat;*/
}

#foot_1{
	height:115px;
	width:155px;
	/*background:url("../images/logo_footer.png") 5px 15px no-repeat;*/
}

#foot_2 {
	font-size:10px;
}

#foot_2 a {
	font-size:10px;
}

#menu {
	position:relative;
	width:100%;
	height:40px;
	overflow:hidden; 
	margin:0; 
	padding:0;
	background:url("../images/bg_menu.png") 0 0 no-repeat;
	background-color: #41494d;
}

#menu #nav {
	margin:0;
	padding:0; 
	list-style-type:none;
}

#menu #nav li {
	margin:0; 
	padding:0;
	display:inline;
}

#menu #nav a {
	margin:0 0 0 15px; 
	padding:0; 
	display:block;
	height:40px;
	background:none;
	float:left;
	text-decoration:none;
}

#menu #nav span {
	margin:0; 
	padding:10px 5px 0 45px;
	display:block;
	height:40px;
	float:left;
	color:#FFFFFF;
	font:12px Century Gothic, "arial",sans-serif;
	font-weight: bold;
	background:none;
}

#menu #nav .home {
	background:url("../images/d_home.png") 10px 5px no-repeat;
	/*width:86px;*/
}

#menu #nav .gestion {
	/*background:url("../images/d_gestion.png") 10px 5px  no-repeat;*/
	/*width:104px;*/
	/*TEMP*/
	background:url("../images/l_gestion.png") 10px 5px  no-repeat;
	color: #000000;
	/*/TEMP*/
}

/*TEMP*/
#menu #nav #l_gestion 
{
    background:url("../images/bg_selected_l_gestion.png") left bottom  no-repeat;
}
/*/TEMP*/

#menu #nav .comunicacion {
	background:url("../images/d_comunicacion.png") 10px 5px  no-repeat;
	/*width:167px;*/
}

#menu #nav .calidad {
	background:url("../images/d_calidad.png") 10px 5px  no-repeat;
	/*width:109px;*/
}

#menu #nav .contenidos {
	background:url("../images/d_contenidos.png") 10px 5px  no-repeat;
	/*width:138px;*/
}

#menu #nav .finanzas {
	background:url("../images/d_finanzas.png") 10px 5px  no-repeat;
	/*width:110px;*/
}

#menu #nav .lopd {
	background:url("../images/d_lopd.png") 10px 5px  no-repeat;
	/*width:110px;*/
}

#menu #nav .ayuda {
	background:url("../images/d_ayuda.png") 10px 5px  no-repeat;
	/*width:90px;*/
}

.rgEditForm .rgHeader div 
{
    width:auto; /*Paginacion*/
}
.rgPagerCell div 
{
    width:auto;
}

/* ----------------------------------*/
/* ------- MAQUETACION GOOGLE ------ */
/* ----------------------------------*/

#headerG
{
	position:relative; 
	height:35px;     
	/*overflow:hidden;*/
	background:url("../images/bgHeaderG.png") 0 0 repeat-x;    
}

#headerG #logoE {
	position:relative; 
	width:128px; 
	height:35px; 
	overflow:hidden; 
	margin:0; 
	padding:0;
    z-index: 400;
	/*background:url("../images/logoE.png") 0 0 no-repeat;*/
}

#headerG #headerGRight {
	position:relative; 
	height:35px;
	margin:0; 
	padding:0;
    /*padding-left: 130px;*/
}

/*#headerG #headerGRight #aplicBarG {
	position:relative;
	margin:0; 
	padding:0 0 0 20px;
	/*NEW*//*
	z-index:4;
}*/

#headerG #headerGRight #userBar {
	position:relative;
	margin:0; 
	padding:0px 0 0 0;
	width: 255px;
}

#headerG #headerGRight #soporteTecnico {
	position:relative;
	margin:0; 
	padding:0 30px 0 0;
	background:url("../images/soporteTecnico.png") center right no-repeat;
	height:35px;
}

#soporteTecnico a {
	margin:5px 0 0 0; 
	padding:0; 
	height:35px;
	cursor:pointer;
	color:#4d4a4a;
	font: 13px/27px Arial,sans-serif;
}


#aplic {
	position:relative;
	width:100%;
	height:35px;
	overflow:hidden; 
	margin:0; 
	padding:0;
	/*z-index:1000;*/
}

/*#aplic #aplicList {
	margin:0;
	padding:0; 
	list-style:none outside none;
	display:block;
	/*NEW*/
	/*z-index:1000;
	float:left;
}*/

/*#aplic #aplicList li {
	margin:0; 
	padding:0;
	display:inline-block;
	line-height:35px;
	position:relative;
	vertical-align:top;
}*/

/*#aplic #aplicList a {
	margin:0; 
	padding:0; 
	display:block;    
	height:35px;
	text-decoration:none;
	cursor:pointer;
	color:#4d4a4a;
	font: 13px/27px Arial,sans-serif;
}*/

.layerMas
{
    background:none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #BEBEBE;
    position:absolute;
    text-align:left;
    top:-999px;
    visibility:hidden;
    z-index:999;
    left:0;
    float:left;
}

.lAplicListMas
{
    background:none repeat scroll 0 0 #FFFFFF;
    padding:10px 0;
    position:relative;
    z-index:2;
}

.aplicListMas {
	margin:0;
	padding:0; 
	list-style:none outside none;
	display:none;
	/*NEW*/
	float:left;
	left:0;
	position:absolute;
	top:100%;
	z-index:200;
	width:200px;
	background-color:#FFFFFF;
}

.itemListMas
{
    line-height:27px;
    margin:0;
    padding:0;
    /*NEW*/
    float:none;
    position:relative;
    z-index:300;
}

.linkAplicMas, .linkAplicMas:visited, .linkAplicMas:active, .linkAplicMas:link
{
    padding: 0 20px;
    display:block;
	text-decoration:none;
	cursor:pointer;
	color:#4d4a4a;
	font: 13px/27px Arial,sans-serif;    
}

.linkAplicMas:hover
{
    padding: 0 20px;
    display:block;
	text-decoration:none;
	cursor:pointer;
	color:#4d4a4a;
	font: 13px/27px Arial,sans-serif;    
    background-color:#F1F1F1;
}

.aplicLinkTop
{
    display:block;
    border-top: 2px solid transparent;
}

.aplicLinkText
{
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    display:block;
    padding: 0 5px;
    position:relative;
    z-index:1000;
	font-size:medium;
}

.aplicLinkTextMas
{
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    display:block;
    padding: 0 8px 0 5px;
    position:relative;
    z-index:1000;
    background:url("../images/arrowDown.png") center right no-repeat;   
}

/* Finanzas - Multiempresa */
.bdListFinanzas {
	margin:0;
	padding:0; 
	list-style:none outside none;
	display:none;
	/*NEW*/
	float:left;
	left:0;
	position:absolute;
	top:100%;
	z-index:200;
	width:200px;
	background-color:#FFFFFF;
}

.itemListBdFinanzas
{
    line-height:30px;
    margin:0;
    padding:0;
    /*NEW*/
    float:none;
    position:relative;
    z-index:300;
}

.linkBdListFinanzas, .linkBdListFinanzas:visited, .linkBdListFinanzas:active, .linkBdListFinanzas:link
{
    padding: 0 20px;
    display:block;
	text-decoration:none;
	cursor:pointer;
	color:#4d4a4a;
	font: 13px/30px Arial,sans-serif;    
}

.linkBdListFinanzas:hover
{
    padding: 0 20px;
    display:block;
	text-decoration:none;
	cursor:pointer;
	color:#4d4a4a;
	font: 13px/30px Arial,sans-serif;    
    background-color:#F1F1F1;
}
/************************/

/* Inicio */
.aplicSelecInicio .aplicLinkTop
{
    /*border-top-color:#9ef3e7 !important;*/
    border-top-color:#51bfdb !important;
}

.aplicSelecInicio .aplicLinkText
{
    color:#000000;
    font-weight:bold;
}


/* Gestión */
.aplicSelec .aplicLinkTop
{
    border-top-color:#42697e !important;
}

.aplicSelec .aplicLinkText
{
    color:#000000;
    font-weight:bold;
}

/* Facturación */
.aplicSelecFact .aplicLinkTop
{
    border-top-color:#86cfa9 !important;
}

.aplicSelecFact .aplicLinkText
{
    color:#000000;
    font-weight:bold;
}

/* Proteccion Datos */
.aplicSelecData .aplicLinkTop
{
    border-top-color:#03979f !important;
}

.aplicSelecData .aplicLinkText
{
    color:#000000;
    font-weight:bold;
}

/* Calidad */
.aplicSelecCalidad .aplicLinkTop
{
    /*border-top-color:#8d6598 !important;*/
    border-top-color:#a877b5 !important;
}

.aplicSelecCalidad .aplicLinkText
{
    color:#000000;
    font-weight:bold;
}

#aplicHeader
{
    position:relative;
    height:30px;
    background:url("../images/bgEdu.png") 0 0 repeat-x;   
	overflow:hidden; 
	margin:0; 
	padding:0;
}

#aplicHeader #searchBar
{
	position:relative;
	margin:0; 
	padding:0;
	/*width:250px;*/
}

#titleAplic
{
    position:relative;
	margin:0; 
	padding:3px 0 0 10px;
	/*padding:5px 0 0 85px;*/
	/*background:url("../images/txtEdu.png") 15px 10px no-repeat;*/
	font-family:Century Gothic;
	color:White;
	font-weight:bold;
	font-size:15px;
}

#userBar .buttonLogout {
	display:block;
	float:left;
	height:21px;
	padding: 0 0 0 25px;
	margin-right:30px;
	font-weight:bold;
	color:#4d4a4a;
	background:url("../images/buttonLogout.png") 0 0 no-repeat;
}

#userBar .btnLogout
{
    width:32px;
    height:32px;
    display:block;
    margin-right:6px;
    float:left;
    border:0;
	background:url("../images/btnLogout.png") 0 0 no-repeat;
}

#userBar .saludo
{
    color: #4d4a4a;
    float: left;
    overflow: hidden;
    padding-right: 10px;
    padding-top: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
    font: 11px/1.6 "arial", sans-serif;
}

#userBar .saludo:hover
{
    color:#4d4a4a;
}

.treeview
{
    padding-left:5px;
    color: #446070;
}

input[type="submit"].btnTab, input[type="button"].btnTab
{
    background:url("../images/bgTabBtn.png") 0 0 no-repeat;
    width:82px;
    height:32px;
	font-family:Arial;
	/*color:#56788c;*/
	color:#446070;
	font-weight:normal;
	font-size:10px;
	border:0;
	margin:0;
	padding:0;
	cursor:pointer;
	white-space:normal;
	float:left;
	text-align:center;
}
input[type="submit"].btnTab:hover, input[type="button"].btnTab:hover
{
    background-position: 0 -31px;
    color:White;
}

input[type="submit"].btnTabSelected, input[type="button"].btnTabSelected
{
    background:url("../images/bgTabBtn.png") 0 0 no-repeat;    
    width:82px;
    height:32px;
	font-family:Arial;
	color:White;
	font-weight:normal;
	font-size:10px;
	border:0;
	margin:0;
	padding:0;
	cursor:pointer;
	white-space:normal;
	float:left;
	text-align:center;
	background-position: 0 -31px;
}

#btnAplicContent
{
    /*background-color:#DADADA;*/
    background-color:#DFF1F5;
    width:100%;
    float:left;
    margin-bottom:5px; /* Dentro del Panel del Splitter*/
}

#btnAplicContent div
{
	width:98%;
    float:left;
    padding-left:5px;
    padding-right:5px;
}

#btnAplic
{
    width:100%;
    float:left;
    padding-left:5px;
    padding-right:5px;
}


span.topBtnAplicContent, span.bottomBtnAplicContent{
   width:100%;
   height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
   display:block;
}
span.topBtnAplicContent {
   /*background:url(../images/lcRightPanel.png) top left no-repeat;*/
   background:url(../images/lcLeftPanel.png) top left no-repeat; 
}
span.bottomBtnAplicContent{
   /*background:url(../images/lcRightPanel.png) bottom left no-repeat;*/
   background:url(../images/lcLeftPanel.png) bottom left no-repeat;
   float:left;
}
span.topBtnAplicContent span, span.bottomBtnAplicContent span{
   width:6px; /* De acuerdo al tamaño de la imagen GIF */
   height:6px; /*De acuerdo al tamaño de la imagen GIF */
   float:right;
   font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este  */
}
span.topBtnAplicContent span{
   /*background:url(../images/rcRightPanel.png) top right no-repeat;*/
   background:url(../images/rcLeftPanel.png) top right no-repeat;
}
span.bottomBtnAplicContent span{
   /*background:url(../images/rcRightPanel.png) bottom right no-repeat;*/
   background:url(../images/rcLeftPanel.png) bottom right no-repeat;
}

#nombreCentro
{
    position:relative;
    float:left;
    background:url("../images/bgNombreCentro.png") 0 0 no-repeat;
    width:211px;
    height:56px;
	overflow:hidden; 
	margin:0; 
	padding:0;    
}
#nombreCentroCont
{
    float:left;
	padding:10px 40px 10px 10px;
	font-weight:bold;
	color:#FFFFFF;
}

div.rightPanel
{
    /*background-color:#dadada;*/
    background-color:#f1f1f1;
    float:left;
}

#cursosLectivos
{
    padding:5px;
}

#cursosLectivos a
{
    color:White;
    font-weight:bold;
    background: transparent url(../images/arrowDownWhite.png) center right no-repeat;
}

#cursosLectivos a:hover, #cursosLectivos a:link
{
    color:White !important;
    outline: 1px solid transparent; /* prevent the link from being outlined */
}

#divCabecera
{
    /*background-color:#F1F1F1;*/
    background-color:#dadada;
    float:left;
    /*width: 99%;
    margin-left:5px;*/
    width:100%;
    margin-bottom:5px;
}

#divCabeceraContent
{
	width:99%;
    float:left;
    padding-left:5px;
    padding-right:5px;
}

span.topDivCabeceraContent, span.bottomDivCabeceraContent{
   width:100%;
   height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
   display:block;
}
span.topDivCabeceraContent {
   /*background:url(../images/lcCabVista.png) top left no-repeat;*/
   background:url(../images/lcCabVista_new2.png) top left no-repeat;
}
span.bottomDivCabeceraContent{
   /*background:url(../images/lcCabVista.png) bottom left no-repeat;*/
   background:#f1f1f1 url(../images/lcCabVista_new2.png) bottom left no-repeat;
   float:left;
}
span.topDivCabeceraContent span, span.bottomDivCabeceraContent span{
   width:6px; /* De acuerdo al tamaño de la imagen GIF */
   height:6px; /*De acuerdo al tamaño de la imagen GIF */
   float:right;
   font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este  */
}
span.topDivCabeceraContent span{
   /*background:url(../images/rcCabVista.png) top right no-repeat;*/
   background:url(../images/rcCabVista_new2.png) top right no-repeat;
}
span.bottomDivCabeceraContent span{
   /*background:url(../images/rcCabVista.png) bottom right no-repeat;*/
   background:#f1f1f1 url(../images/rcCabVista_new2.png) bottom right no-repeat;
}

.divCabeceraTittle
{
    font-weight:bold;
    font-size:14px;
    font-family:Century Gothic;
    padding:2px 2px 2px 8px;
    /*background:url(../images/arrowTittle.png) center left no-repeat;*/
    /*color:#4d4a4a;*/
    color:#5f5c5c;
}

.divCabeceraTittle span
{
    /*background:url(../images/bgTittle.png) bottom left repeat-x;*/
}

/* ----------------------------------*/
/* ----- MAQUETACION PIXELARTE ----- */
/* ----------------------------------*/

#headerPlataforma
{
	position:relative; 
	height:73px; 
	overflow:hidden;
	background:url("../images/bgHeader.png") 0 0 repeat-x;    
}
#headerPlataforma #logoPlataforma {
	position:relative; 
	width:175px; 
	height:73px; 
	overflow:hidden; 
	margin:0; 
	padding:0;
	background:url("../images/logoEsemtia.png") 0 0 no-repeat;
}
#headerPlataforma #headerPlataformaRight {
	position:relative; 
	height:73px;
	margin:0; 
	padding:0;
}

#headerPlataforma #headerPlataformaRight #modulos {
	position:relative;
	/*width:180px;*/
	margin:0; 
	padding:15px 0 0 140px;
}

#headerPlataforma #headerPlataformaRight #userInfo {
	position:relative;
	margin:0; 
	padding:15px 0 0 0;
	/*width:375px;*/ /* Tamaño real en relacion con el diseño */
	width:250px;
}

#menuModulos {
	position:relative;
	width:100%;
	height:73px;
	overflow:hidden; 
	margin:0; 
	padding:0;
}

#menuModulos #navList {
	margin:0;
	padding:0; 
	list-style-type:none;
}

#menuModulos #navList li {
	margin:0; 
	padding:0;
	display:inline;
}

#menuModulos #navList a {
	margin:0 10px 0 0; 
	padding:0; 
	display:block;
	height:53px;
	background:none;
	float:left;
	text-decoration:none;
}

/* ICONOS INICIALES */
/*
#menuModulos #navList .modHome {
	background:url("../images/modHome.png") top left no-repeat;
	width:40px;
	height:53px;
}

#menuModulos #navList .modEdu {
	background:url("../images/modEdu.png") top left no-repeat;
	width:40px;
	height:53px;
}

#menuModulos #navList .modEfi {
	background:url("../images/modEfi.png") top left no-repeat;
	width:40px;
	height:53px;
	display:block;
}

#menuModulos #navList .modEcom {
	background:url("../images/modEcom.png") top left no-repeat;
	width:40px;
	height:53px;
	display:block;
}

#menuModulos #navList .modEqua {
	background:url("../images/modEqua.png") top left no-repeat;
	width:40px;
	height:53px;
	display:block;
}

#menuModulos #navList .modElearn {
	background:url("../images/modElearn.png") top left no-repeat;
	width:40px;
	height:53px;
	display:block;
}

#menuModulos #navList .modEdata {
	background:url("../images/modEdata.png") top left no-repeat;
	width:40px;
	height:53px;
	display:block;
}
*/
/* ICONOS NUEVOS */
#menuModulos #navList .modHome {
	background:url("../images/modInicio.png") top left no-repeat;
	width:34px;
	height:41px;
}

#menuModulos #navList .modEdu {
	background:url("../images/modEdu.png") top left no-repeat;
	width:27px;
	height:42px;
}

#menuModulos #navList .modEcom {
	background:url("../images/modEcom.png") top left no-repeat;
	width:37px;
	height:41px;
	display:block;
}

#menuModulos #navList .modEfac {
	background:url("../images/modEfac.png") top left no-repeat;
	width:29px;
	height:44px;
	display:block;
}

#menuModulos #navList .modEdata {
	background:url("../images/modEdata.png") top left no-repeat;
	width:38px;
	height:42px;
	display:block;
}

#menuModulos #navList .modEdoc {
	background:url("../images/modEdoc.png") top left no-repeat;
	width:31px;
	height:41px;
	display:block;
}

#menuModulos #navList .modEncuesta {
	background:url("../images/modEncuesta.png") top left no-repeat;
	width:58px;
	height:42px;
	display:block;
}

#menuModulos #navList .modElib {
	background:url("../images/modElib.png") top left no-repeat;
	width:27px;
	height:42px;
	display:block;
}

#menuModulos #navList .modEconta {
	background:url("../images/modEconta.png") top left no-repeat;
	width:44px;
	height:41px;
	display:block;
}

#menuModulos #navList .modMas {
	background:url("../images/modMas.png") top left no-repeat;
	width:28px;
	height:27px;
	display:block;
}

/* FIN ICONOS */

#aplicBar
{
    position:relative;
    height:35px;
    background:url("../images/bgEdu.png") 0 0 repeat-x;   
	overflow:hidden; 
	margin:0; 
	padding:0;
}

#aplicBar #userBar
{
	position:relative;
	margin:0; 
	padding:8px 0 0 0;
	/*width:250px;*/
}

#titleBar
{
    position:relative;
	margin:0; 
	padding:6px 0 0 85px;
	background:url("../images/txtEdu.png") 15px 10px no-repeat;
	font-family:Century Gothic;
	color:White;
	font-weight:bold;
	font-size:15px;
}

.saludo
{
    color:white;
    float:left;
    padding-right:5px;
}

.saludo:hover
{
    color:White;
}

.numMail
{
	background:url("../images/buttonNumMails.png") top left no-repeat;
	padding-left:5px;
	color:White;
	font-weight:bold;
	display:block;
	float:left;
	width:18px;
	height:18px;
}
.centroMensajes
{
    background:url("../images/icoSobre.png") top left no-repeat;
	width:27px;
	height:18px;
	display:block;
	float:left;
}
.idioma
{
    color:black;
    float:left;
    padding:0 5px;
}
.buttonLogout {
	display:block;
	float:left;
	height:21px;
	padding: 0 0 0 25px;
	margin-right:30px;
	font-weight:bold;
	color:white;
	background:url("../images/buttonLogout.png") 0 0 no-repeat;
}

.buttonLogout:hover
{
    color:White;
}

#footer
{
    clear:both;
    width:100%;    
    z-index:-1; 
}

/* Este es el contenedor al que le pondremos bordes redondos */
div.footerPlataforma
{
    color:White;
    background:url("../images/bgFooter.png") 0 0 repeat-x;
}
/* En este contenedor va todo lo que queremos mostrar. No le damos margen vertical puesto ese lo generarán los span del borde */
div.footerContenido{ 
   /*margin:0 5px;*/
   background:url(../images/logoFooter.png) 10px 0 no-repeat; 
   padding-left:65px;
   padding-top:2px;
}
/* Generamos los estilos de las span, los cuales contendrán las imágenes GIF */
span.topFooter, span.bottomFooter{
   width:100%;
   height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
   display:block;
}
/* A continuación viene el verdadero truco, la posición de las imágenes de fondo es importante*/
span.topFooter {
   background:url(../images/lc.png) top left no-repeat; 
}
span.bottomFooter {
	background: url(../images/lc.png) bottom left no-repeat;
	background-color: #26c4e1;
}
span.topFooter span, span.bottomFooter span{
   width:6px; /* De acuerdo al tamaño de la imagen GIF */
   height:6px; /*De acuerdo al tamaño de la imagen GIF */
   float:right;
   font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este  */
}
span.topFooter span{
   background:url(../images/rc.png) top right no-repeat;
}
span.bottomFooter span{
   background:url(../images/rc.png) bottom right no-repeat;
}

/* Panel Izquierdo del Splitter */

div.leftPanel
{
    background-color:#dff1f5;
    float:left;
}
span.topLeftPanel, span.bottomLeftPanel{
   width:100%;
   height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
   display:block;
}
span.topLeftPanel {
   background:url(../images/lcLeftPanel.png) top left no-repeat; 
}
span.bottomLeftPanel{
   background:url(../images/lcLeftPanel.png) bottom left no-repeat;
   float:left;
}
span.topLeftPanel span, span.bottomLeftPanel span{
   width:6px; /* De acuerdo al tamaño de la imagen GIF */
   height:6px; /*De acuerdo al tamaño de la imagen GIF */
   float:right;
   font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este  */
}
span.topLeftPanel span{
   background:url(../images/rcLeftPanel.png) top right no-repeat;
}
span.bottomLeftPanel span{
   background:url(../images/rcLeftPanel.png) bottom right no-repeat;
}

/* Panel Derecho del Splitter */

span.topRightPanel, span.bottomRightPanel{
   width:100%;
   height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
   display:block;
}
span.topRightPanel {
   /*background:url(../images/lcRightPanel.png) top left no-repeat;*/
   background:url(../images/lcRightPanel_new.png) top left no-repeat; 
}
span.bottomRightPanel{
   /*background:url(../images/lcRightPanel.png) bottom left no-repeat;*/
   background:url(../images/lcRightPanel_new.png) bottom left no-repeat;
   float:left;
}
span.topRightPanel span, span.bottomRightPanel span{
   width:6px; /* De acuerdo al tamaño de la imagen GIF */
   height:6px; /*De acuerdo al tamaño de la imagen GIF */
   float:right;
   font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este  */
}
span.topRightPanel span{
   /*background:url(../images/rcRightPanel.png) top right no-repeat;*/
   background:url(../images/rcRightPanel_new.png) top right no-repeat;
}
span.bottomRightPanel span{
   /*background:url(../images/rcRightPanel.png) bottom right no-repeat;*/
   background:url(../images/rcRightPanel_new.png) bottom right no-repeat;
}

/*********************************************************/
/************************ SEARCH *************************/
#searchwrapper {
    width:234px; /*follow your image's size*/
    height:30px;/*follow your image's size*/
    background-image:url('/images/bgSearch.png');
    background-position: 0 0;
    background-repeat:no-repeat; /*important*/
    padding:0px;
    margin:0px;
    position:relative; /*important*/
    /*display:inline;*/
}
.searchbox {
    border:0px; /*important*/
    background-color:transparent; /*important*/
    background:none!important;
    position:absolute; /*important*/
    top:4px;
    left:15px;
    width:195px;
    height:25px;
    border:0!important;
    padding:0!important;
}
.searchbox_submit {
    border:0px; /*important*/
    background-color:transparent; /*important*/
    position:absolute; /*important*/
    top:4px;
    left:205px;
    width:30px;
    height:30px;
}
/*********************************************************/

/* Subcabecera */
#divSubcabecera
{
    background-color:#dadada;
    float:left;
    /*width: 99%;
    margin-left:5px;*/
    width:100%;
    margin-bottom:5px;
}

#divSubcabeceraContent
{
	width:99%;
    float:left;
    padding-left:5px;
    padding-right:5px;
}

span.topSubcabecera, span.bottomSubcabecera{
   width:100%;
   height:6px; /* El alto debe ser la mitad de alto de la imagen GIF */
   display:block;
}
span.topSubcabecera {
   background:url(../images/lcSubcabecera.png) top left no-repeat; 
}
span.bottomSubcabecera{
   background:url(../images/lcSubcabecera.png) bottom left no-repeat;
   float:left;
}
span.topSubcabecera span, span.bottomSubcabecera span{
   width:6px; /* De acuerdo al tamaño de la imagen GIF */
   height:6px; /*De acuerdo al tamaño de la imagen GIF */
   float:right;
   font-size:6px; /* Esto es para IE6, que no respeta el height del span si el tamaño de letra es mayor a este  */
}
span.topSubcabecera span{
   background:url(../images/rcSubcabecera.png) top right no-repeat;
}
span.bottomSubcabecera span{
   background:url(../images/rcSubcabecera.png) bottom right no-repeat;
}


/* ----------------------------------*/
/* ---- MAQUETACION LOGIN AVANT  --- */
/* ----------------------------------*/

#headerLogin
{
	position:relative; 
	height:50px; 
	overflow:hidden;
}

#headerLogin #logoEsemtiaLogin {
	position:relative; 
	width:145px; 
	height:39px; 
	overflow:hidden; 
	margin:0; 
	padding:0;
}

#headerLogin #txtDisponibleDispMoviles {
	position:relative; 
	width:407px; 
	height:39px; 
	overflow:hidden; 
	margin:0; 
	padding:0;
}

#layerLeftLogin
{
    width:560px;
    float:left;
    margin:20px 0 0 0;
    padding:0 0 0 50px;
}

#layerRightLogin {
    width: 410px;
    height: 768px;
    float: right;
    margin: 20px 0 0 0;
    padding: 0;
    /*background:url(../images/loginCaja.png) 0 0 no-repeat;*/

}

#loginBox {
    background-color: #f8f8f8;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    background-position: 0 0;
}

#mobileLogin {
    float: left;
    width: 560px;
    /*height:90px;*/
    margin: 100px 0 0 0;
    padding: 0;
}

#eFamilias
{
    width:275px;
    margin:0;
    padding:0;
}

#eAula
{
    width:275px;
    margin:0;
    padding:0;
}

#txtDescargate
{
    width:410px;
    margin:10px 0 0 0;
    padding:0;
}

.txtLogin
{
    font-size:12px;
}

.tituloLogin
{
    font-size:17px;
}

.colorEsemtia
{
    color:#26c4e1;
}

.colorVerdeEsemtia
{
    color:#4cc85e;
}

#listaLogin
{
    width:550px;  
    margin:0;
    padding:0;    
}

.listImage
{
    list-style-image:url('../images/listImage.png');
    list-style-position:inside;
    font-size:13px;
    color:#7f7c7c;
}

#videosContactoLogin
{
    width:550px;  
    margin:10px 0 0 0;
    padding:0;    
}

#contentVideoTutorialContacto
{
    width:256px;
    margin:105px 0 0 0;
    padding:0 88px 0 70px;
    font-size:12px;
}

#videoTutorial
{
    width:100px;
    margin:0;
    padding:0;
}

#contacto
{
    width:125px;
    margin:0;
    padding:0;    
}

.txtInfoLogin
{
    width:334px;
    height:60px;
    margin:20px 0 0 0;
    padding:0 45px 0 35px;    
    font-size:13px;    
    color:#7f7c7c;
    text-align:justify;
}

#logoEsemtiaHeader {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    text-align:center;
}

#formLogin
{
    width:256px;
    height:200px;
    margin:20px 0 0 0;
    padding:0 88px 0 70px;        
}

#formRecuperarPassWord
{
    width:256px;
    height:152px;
    margin:20px 0 0 0;
    padding:0 88px 0 70px;        
}

#notifActualizacionLogin
{
    width:256px;
    height:200px;
    margin:20px 0 0 0;
    padding:0 88px 0 70px;
}

input[type="text"].txtBoxLogin, input[type="password"].txtBoxLogin
{
    width:250px;
    border:solid 1px #26c4e1 !important;
    height:30px !important;
	-webkit-border-radius: 0 !important; /* Firefox */
	-moz-border-radius: 0 !important; /* Safari, Chrome */
	-khtml-border-radius: 0 !important; /* KHTML */
	border-radius: 0 !important; /* CSS3 */    
}

.txtSmallLogin
{
    font-size:9px;
    color:#7f7c7c; 
}

.linkRemenberLogin, .linkRemenberLogin:hover {
	font-size:9px;
	color:#26c4e1; 
	text-decoration:none;
}

.linkBtnAccederLogin, .linkBtnAccederLogin:hover
{
   font-size:13px;
   color:#7f7c7c;
   text-decoration:none;
}

.lnkRecuperar {
    background: url(../images/loginEdu/icoCandado.png) 0 0 no-repeat;
    padding-left: 20px;
}

.lnkRecuperar a:hover {
    text-decoration: none;
}

#txtPrivacidadLogin {
    width: 329px;
    height: 60px;
    margin: 280px 0 0 0;
    padding: 0 50px 0 35px;
    font-size: 9px;
    color: #26c4e1;
    text-align: justify;
}

#logosProdatFooter {
    width: 100%;
    height: 50px;
    margin: 30px 0 0 0;
    padding: 0;
    text-align: center;
}

#enlacesPoliticaPrivacidadFooter {
	height: 50px;
	margin: 25px 50px 0px 35px;
	padding: 0;
	width: 329px;
	font-size: 9px;
}

.enlacesPoliticaPrivacidadFooterAvisoLegal {
	float: left;
	color: #26c4e1;
}

.enlacesPoliticaPrivacidadFooterPoliticaPrivacidad {
	float: right;
	color: #26c4e1;
}

.enlacesPoliticaPrivacidadFooterPoliticaCookies {
	color: #26c4e1;
	padding-left: 40px;
}

.footerAvisoLegal {
	color: white !important;
}

.footerPoliticaCookies {
	color: white !important;
}

.footerPoliticaPrivacidad {
	color: white !important;
}

#mainRecuperarUsu {
	width: 1024px;
	height: 768px;
	margin: 0 auto;
	background: url(../images/recuperarUsu_bg.png) center center no-repeat;
}

#formRecuperarUsu
{
	position:relative;
	/*height:150px;*/
	overflow:hidden;
	margin: 170px 0 0 0;
	padding:0 0 0 265px;
	float:left;
	font-size:13px;
	color:#7f7c7c;
    text-align:justify;
}

#txtPrivacidadRecuperar
{
    position:relative;
    width:550px;
    height:40px;
    margin:240px 0 0 0;
    padding:0 0 0 230px;
	float:left;    
    font-size:9px;
	color:#26c4e1;
	text-align:justify;
}

#contactoRecuperar
{
    position:relative;
    width:550px;
    margin:30px 0 0 0;
    padding:0 0 0 230px;
	float:left;    
    font-size:9px;
	color:#26c4e1;
	text-align:justify;
}

#recuperarUsuOK
{
	position:relative;
	width:530px;
	overflow:hidden;
	margin: 170px 0 0 0;
	padding:0 0 0 265px;
	float:left;
	font-size:13px;
	color:#7f7c7c;
    text-align:justify;
}

#recuperarUsuNOK
{
	position:relative;
	width:530px;
	overflow:hidden;
	margin: 170px 0 0 0;
	padding:0 0 0 265px;
	float:left;
	font-size:13px;
	color:#7f7c7c;
    text-align:justify;
}

.VideoEsemtia
{
    position:absolute;
    z-index: 3000;
    width:800px;
    height:600px;
    background-color:White;
    padding:10px;
    -webkit-border-radius: 8px; /* Firefox */
    -moz-border-radius: 8px; /* Safari, Chrome */
    -khtml-border-radius: 8px; /* KHTML */
    border-radius: 8px; /* CSS3 */
    display:none;
    z-index: 100000001;
}

.ContentVideoEsemtia
{
    margin-top:20px;
    padding: 0 20px 0 20px;
}

.tituloVideoEsemtia
{
    font-family:Century Gothic;
    font-size:16px;
    color:#446070;
    text-align:center;
    font-weight:bold;
}

.VideoTutorialEsemtia
{
    position:absolute;
    z-index: 3000;
    top:0;
    width:800px;
    height:600px;
    background:url(../images/bgVideoTutorial.png) center center no-repeat;
    padding:0;
    display:none;
    z-index: 100000001;
}

.tituloVideoTutorialEsemtia
{
    font-family:Century Gothic;
    font-size:35px;
    color:White;
    text-align:center;
    font-weight:bold;
}

#tooltipFamilias
{
    width:422px;
    height:346px;
    background:url(../images/tooltipEFamilias.png) center center no-repeat;
    position:absolute;
    top:150px;
    left:15%;
    display:none;
}

#tooltipAula
{
    width:422px;
    height:346px;
    background:url(../images/tooltipEAula.png) center center no-repeat;
    position:absolute;
    top:150px;
    left:30%;
    display:none;
}

/* INICIO ALUMNO */

#formInicioAlumno {
    width: 256px;
    height: 150px;
    margin: 20px 0 0 0;
    padding: 0 88px 0 70px;
}

.btnContentAcceso {
    width: auto;
    border: solid 1px #4f4f4f;
    background: #c1c1c1; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MxYzFjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWYxZjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #c1c1c1 0%, #f1f1f1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c1c1c1 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c1c1c1 0%,#f1f1f1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c1c1c1 0%,#f1f1f1 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c1c1c1 0%,#f1f1f1 100%); /* W3C */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-8 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}

.btnImgAcceso {
    background: none repeat scroll 0 0 #fff;
    border-radius: 20px;
    cursor: pointer;
    height: 35px;
    margin-top: 10px;
    padding: 0;
    width: 35px;
    /*box-shadow: 3px 3px 2px #888888;*/
}

.linkBtnAccesoAlumno, .linkBtnAccesoAlumno:hover, .linkBtnAccesoAlumno:visited, .linkBtnAccesoAlumno:active {
    font-size: 15px;
    color: #545252;
    text-decoration: none;
    font-weight: 700;
    width: 100%;
    display: block;
}


/* SPLITTER */

.splitter
{
    margin-top:5px !important; /* Maquetación Google */
}

.splitter div
{
    /*width:100%;*/
    float:left;
}

.DivSpliterLeftPanelEast
{
    height:100%;
    position:relative !important; /*Horarios*/
    /*background-color:#dadada;*/ /* PIXELARTE */
}
.DivSpliterLeftPanelEast div
{
    width:100%;
    float:none;
}

.ui-layout-toggler-west-open
{
    background:url("/images/closeSplitter.png") no-repeat scroll right center transparent;
}

.ui-layout-toggler-west-closed
{
    background:url("/images/openSplitter.png") no-repeat scroll right center transparent;
}

.ui-layout-resizer-dragging {
	background:			#BBB !important; /* need higher specificity */
}
/*
.ui-layout-resizer
{
    width: 15px !important;
}
*/

/************** Responsive Menu **************/

/* Remove margins and padding from the list, and add a black background color */
ul.aplicListnav {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 150px;
	max-width: 960px;
	min-width: 200px;
	position: absolute;
	z-index: 300;
}

	/* Float the list items side by side */
	ul.aplicListnav > li {
		float: left;
	}

		/* Style the links inside the list items */
		ul.aplicListnav > li > a {
			display: inline-block;
			text-align: center;
			padding: 0;
			height: 35px;
			text-decoration: none;
			cursor: pointer;
			color: #4d4a4a;
			font: 13px/27px Arial, sans-serif;
		}

			/* Change background color of links on hover */
			ul.aplicListnav > li > a:hover {
				background-color: #FAFAFA;
			}

		/* Hide the list item that contains the link that should open and close the aplicListnav on small screens */
		ul.aplicListnav > li.icon {
			display: none;
		}

		ul.aplicListnav > li.iconMenu {
			display: none;
		}

/* Sticky los encabezados de las tablas */
.sticky {
	overflow-y: scroll;
	height: 150px;
}

	.sticky th {
		position: sticky;
		top: 0;
	}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the aplicListnav (li.icon) */
@media screen and (max-width:1200px) {
	ul.aplicListnav li:not(:first-child) {
		display: none;
	}

	ul.aplicListnav li.icon {
		position: absolute;
		left: 130px;
		top: 0;
		display: inline-block;
	}

	ul.aplicListnav li.iconMenu {
		float: left;
		display: inline-block;
	}

	ul.aplicListnav {
		margin: 5px;
	}

		ul.aplicListnav.responsive li a:hover {
			background-color: #FAFAFA;
		}
}

/* The "responsive" class is added to the aplicListnav with JavaScript when the user clicks on the icon. This class makes the aplicListnav look good on small screens */
@media screen and (max-width:1200px) {
	ul.aplicListnav.responsive {
		position: absolute;
		padding: 0 0 0 150px;
	}

		ul.aplicListnav.responsive li.icon {
			position: absolute;
			left: 130px;
		}

		ul.aplicListnav.responsive li {
			float: none;
			display: inline;
		}

			ul.aplicListnav.responsive li a {
				display: block;
				text-align: left;
				background: whitesmoke;
			}

				ul.aplicListnav.responsive li a:hover {
					background-color: #FAFAFA;
				}

	span.aplicLinkTop {
		display: none
	}

	#headerG #headerGRight #userBar {
		width: 245px;
	}

	#userBar .saludo {
		width: 150px;
	}
}

/* General styling for the dropdown container */
ul.subMenuAplicLink {
	list-style-type: none;
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	border: 1px solid #aaa;
	background-color: #fff;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Styling for each dropdown item */
ul.subMenuAplicLink li {
	display: block;
	padding: 5px 20px;
	cursor: pointer;
	list-style-type: none;
	background-color: #f7f7f7; /* light gray background for each item */
	min-width: 150px;
	white-space: nowrap;
}

/* Styling for each dropdown item on hover */
ul.subMenuAplicLink li:hover {
	background-color: #e0e0e0; /* slightly darker background on hover */
}

/* Styling for links inside dropdown */
ul.subMenuAplicLink li > a {
	text-decoration: none;
	color: inherit;
	display: block;
	font-size: medium;
}

.subMenuListItem {
	display: block;
	padding: 5px 20px;
	cursor: pointer;
	list-style-type: none;
	background-color: #f7f7f7; /* light gray background */
}

.subMenuListItem:hover {
	background-color: #e0e0e0; /* slightly darker background on hover */
}

.subMenuListItem > a {
	text-decoration: none;
	color: inherit;
	display: block;
	font-size: medium;
}

ul.subMenuAplicLink li.empty, /* Si vacios, ocultar los elementos*/
.subMenuListItem.empty {
	display: none;
}

/* LOGIN (Javi) Ticket 8772 26/08/2021 */
.input-eye-icon {
	float: right;
	margin-right: .6rem;
	margin-top: -1.9rem;
	position: relative;
	z-index: 2;
}

/* LOGIN (Javi) Microsoft 02/09/2021 */
.separator {
	display: flex;
	align-items: center;
	text-align: center;
}
.separator::before,
.separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
	margin-right: .25em;
}

.separator:not(:empty)::after {
	margin-left: .25em;
}

.buttonMicrosoft {
	display: block;
	color: white;
	padding: 1rem;
	text-decoration: none;
	margin: 1rem 0;
	transition: all 0.3s ease;
	background-color: #00bcf2;
	font-size: medium;
}

.buttonMicrosoft:hover {
	background-color: #0094bf;
	font-size: medium;
	color:white;
	text-decoration: none;
}

.buttonMicrosoft:focus-within {
	font-size: medium;
	color: white;
	text-decoration: none;
}

.buttonMicrosoft:before {
	content: '\f17a';
	font-family: 'FontAwesome';
	padding-right: 1rem;
	text-decoration: none;
}


.buttonLogoutMicrosoft {
	display: block;
	color: white;
	padding: 1rem;
	text-decoration: none;
	margin: 1rem 0;
	transition: all 0.3s ease;
	background-color: #e32b2b;
	font-size: medium;
}

.buttonLogoutMicrosoft:hover {
	background-color: #a61c1c;
	font-size: medium;
	color: white;
	text-decoration: none;
}

.buttonLogoutMicrosoft:focus-within {
	font-size: medium;
	color: white;
	text-decoration: none;
}

.buttonLogoutMicrosoft:before {
	content: '\f08b';
	font-family: 'FontAwesome';
	padding-right: 1rem;
	text-decoration: none;
}

#formLoginWithMicrosoft {
	width: 256px;
	height: 200px;
	margin: 20px 0 0 0;
	padding: 0 88px 0 70px;
}

/* LOGIN (Javi) Google 02/09/2021 */

.buttonGoogle {
	display: block;
	color: white;
	padding: 1rem;
	text-decoration: none;
	margin: 1rem 0;
	transition: all 0.3s ease;
	background-color: #dd4b39;
	font-size: medium;
}

.buttonGoogle:hover {
	background-color: #c23321;
	font-size: medium;
	color: white;
	text-decoration: none;
}

.buttonGoogle:focus-within {
	font-size: medium;
	color: white;
	text-decoration: none;
}

.buttonGoogle:before {
	content: '\f1a0';
	font-family: 'FontAwesome';
	padding-right: 1rem;
	text-decoration: none;
}

#formLoginWithGoogle {
	width: 256px;
	height: 200px;
	margin: 20px 0 0 0;
	padding: 0 88px 0 70px;
}

.disabled {
	background-color: #ddd;
	color: #666;
}