/********************************************************************************/
/*                                                                              */
/* Plataforma e-ducativa.  Version 10.07.00-39 - Argentina                      */
/*                                                                              */
/* Copyright (c)  de e-ducativa Educación Virtual S.A.                          */
/*                                                                              */
/********************************************************************************/
/* layout */

.header_nav  	 	{ position: fixed; top: 0; width: 100%; border-bottom: solid 1px #d6d6d6; z-index: 100; box-shadow: 0 0 15px 0 rgba(0,0,0,.4); transition-duration: .4s; }
.header_nav .logo 	{ position: absolute; top: 0; left: 0; overflow: hidden; background-color: #fff; }
.function_bar,
.location_bar   	{ position: relative; height: 2.25em; padding: 0 10px 0 116px; transition: all .4s; }
.location_bar 		{ background-color: rgba(0,0,0,.2); }

/* css reset */
.header_nav button,
.header_nav a  { margin: 0; padding: 0; background: transparent; border: none; text-decoration: none; outline: none; cursor: pointer; }

/* nombre instalacion */
.function_bar .nombre_instalacion {
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	height: 2.25rem;
	max-width: 45%;
	padding: .7em 10px 0;
	color: rgba(255,255,255,0.9);
	font-size: .9rem;
	font-family: 'Roboto Condensed';
	box-sizing: border-box;
	transition: all .4s;
}
.function_bar a.nombre_instalacion:hover 	              { background-color: rgba(255,255,255,.3); color: rgba(255,255,255,1); padding-left: 13px; padding-right: 7px; }
.backend .function_bar .nombre_instalacion				  { color: #fff; }

/* logo */
.header_nav .logo               { z-index: 1; }
.header_nav .logo img 		    { display: block; height: 4.5rem; transition: all .4s; }
.header_nav a.logo:hover img 	{ opacity: .7; transform: scale(1.1); }

/* ubicacion */
.location_bar .ubicacion_frame  {
	display: inline-block;
	vertical-align: middle;
	max-width: 65%;
	height: 2.25rem;
	font-size: 1rem;
	font-weight: 100;
	font-family: 'Roboto Condensed';
	text-decoration: none;
	color: rgba(255,255,255,0.9);
	padding: .5rem 10px 0;
	box-sizing: border-box;
	transition: all .4s;
}
.location_bar a.ubicacion_frame:hover   { background-color: rgba(255,255,255,.3); color: rgba(255,255,255,1); padding-left: 13px; padding-right: 7px; }
.location_bar .ubicacion_separador      { padding: 0 3px; display: inline-block; vertical-align: middle; color: #fff; font-size: .9rem; opacity: .5; }

/* cambio de administraciones */
.btn_change_curso                      { display: inline-block; vertical-align: middle; margin-left: 3px; height: 2.2rem; width: 2.25rem; text-align: center; cursor: pointer; transition-duration: .4s; }
.btn_change_curso .icono       { opacity: .6; height: 2.25rem; width: 1rem; color: #fff;  box-sizing: border-box; transition-duration: .4s; }
.btn_change_curso:hover                { background-color: rgba(255,255,255,.2); }
.btn_change_curso.view_combo_cursos .icono     { transform: rotate(90deg); }

/* combo cursos y combo administraciones */
.comboCursos-Frame select {
	border: solid 1px transparent;
	margin: .24rem 0;
	padding: .15rem 2px;
	opacity: 1;
	cursor: pointer;
	font-size: 1em;
	font-weight: 100;
	font-family: 'Roboto Condensed';
	transition: all .4s;
	box-sizing: border-box;
}
.comboCursos-Frame select:hover,
.comboCursos-Frame select:focus  { outline: none; opacity: 1; }
.comboCursos-Frame select.color_plataforma_back { color: #fff; }

.comboCursos-Frame option 			{ color: #000; background-color: #fff; }
.comboCursos-Frame option.no-activo { background-color: #ccc; }

.function_bar .col_derecha  { position: relative; float: right; height: 100%; padding-right: 48px; }


/* botones (app) */
.function_bar .apps_box             { display: flex; position: relative; margin-right: 5px; }
.function_bar .apps_button          { display: none; height: 2.25rem; width: 2.25rem; text-align: center;  }
.function_bar .apps_button:hover    { background-color: rgba( 255,255,255,.2 ); }
.function_bar .apps_button .icono       { color: #fff; width: 25px; height: 25px; }
.function_bar .apps_button .icono.up    { display: none; }

.function_bar .apps         { display: flex; position: relative; margin-right: 5px; transition-duration: .4s; }
.function_bar .app          { opacity: .9; display: flex; align-items: center;  padding: 0 10px; text-align: center; text-decoration: none; cursor: pointer; transition-duration: .3s; }
.function_bar .app:hover    { opacity: 1; padding: 0 7px 0 13px; background-color: rgba( 255,255,255,0.2 ) }
.function_bar .app .icono   { height: 2.25rem; width: 2.25rem; box-sizing: border-box; padding: 7px; color: #fff; }
.function_bar .app .label   { display: block; color: #fff; text-decoration: none; font-size: .8rem;  }

.mensajes_link	{ position: relative; }
.function_bar .mail_alert 			    { display: none; }
.function_bar.mail_alert_on .mail_alert { display: block; position: absolute; left: 10px; bottom: 4px; width: 9px; height: 9px; border-radius: 100px; border: 2px solid #fff; color: #e0483a; transition-duration: .4s; }


/* animacion notificacion de mail */
.function_bar.mail_alert_on .mail_alert {
   z-index: 2;
   animation-duration: 1.5s;
   animation-name: mailalert-anima;
   animation-iteration-count: 2;
   animation-timing-function: ease-in-out;
   animation-delay: 1.3s;
}
@keyframes mailalert-anima {
	0%, 25%, 50%, 75%, 100%		{ transform: scale(1); }
	12.5%, 37.5%, 62.5%, 87.5%	{ transform: scale(1.2); }
}


/* scrolled */
body:not(.not-logged) .scrolled .header_nav				{ margin-top: -2.25rem; }
body:not(.not-logged) .scrolled .header_nav .logo img 	{ margin-top: 2.25rem; height: 2.25rem; }
body:not(.not-logged) .scrolled .location_bar 			{ padding-left: 60px; }
body:not(.not-logged) .scrolled .menu_usuario_frame		{ margin-top: 2.25rem; }

body:not(.not-logged) .scrolled .mensajes_popup:before,
body:not(.not-logged) .scrolled .mensajes_popup:after           { display: none; }
body:not(.not-logged) .scrolled .mensajes_popup                 { margin-top: 20px; }
body:not(.not-logged) .scrolled .mensajes_function .cerrar_bt   { top: 0; }


/********************************
* **** Codigo QR ***** *
*********************************/


 /**
  * @Objeto: Ventana modal
  */

.modal_overlay   {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0,.7);
}
.modal_overlay.oculto { display: none; }
.modal_container {
    position: relative;
    padding: 10px;
    background-color: #FFF;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.8);
}
.modal_container .modal_close_btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #000;
    transition-duration: .4s;
    cursor: pointer;
}
.modal_container .modal_close_btn .icon {
    width: 30px;
    height: 30px;
    color: #fff;
    transition-duration: .4s;
}
.modal_container .modal_close_btn:hover         { background-color: #fff; }
.modal_container .modal_close_btn:hover .icon   { color: #000; }

body.noscroll { overflow: hidden; }

/**
  * @Objeto: Ventana modal QR
  */

.modal_container.qr { width: 300px; }
.modal_container.qr .desc {
    padding: 10px 0; font-size: .9rem;
}
.qr_data { position: relative; }
.qr_data .qr_overlay {
    margin-left: -3px;
    margin-top: -3px;
    background-image: url(../img/comunes/qr_overlay.png);
    width: 75px;
    height: 89px;
    position: absolute;
    /*top: 50%;
    left: 50%;*/
    top: 145px;
    left: 145px;
    transform: translate(-50%, -50%);
    outline: none;
}
.qr_update {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(50,50,50,.95);
    transition-duration:.4s;
    cursor: pointer;
}
.qr_update .icon { width: 175px; height: 175px; color: rgba(100,100,100,.9); transition-duration: .4; }
.qr_update:hover        { background-color: rgba(0,0,0,0.95); }
.qr_update:hover .icon  { color: rgba(255,255,255,0.8); }

/********************************
* **** Mensajes no leidos ***** *
*********************************/

.mensajes_popup:before { position: absolute;
	z-index: 114;
	bottom: 100%;
	right: 16px;
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 8px 5px;
	border-color: transparent transparent #ffffff transparent;
}
.mensajes_popup:after {
    position: absolute;
    z-index: 113;
    bottom: 100%;
	right: 15px;
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 10px 6px;
	border-color: transparent transparent #c0c0c0 transparent;
}
.mensajes_popup {
	position: absolute;
	top: 100%;
	right: 0;
	width: 500px;
	min-height: 3em;
	border: 1px solid #c0c0c0;
	border-right: none;
	padding: 3px;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	z-index: 112;
    transition-duration: .4s;
}

.Correo-spinner {
    background: #ddd url(../img/comunes/spinner.gif) no-repeat center;
}

.mensajes_function              { position: relative; overflow: hidden;  }
.mensajes_function > header    	{ margin-bottom: 4px; border-bottom: 1px solid #eee; padding: 5px 8px; }
.mensajes_function > header h2 	{ margin: 0; padding: 0; color: #959595; font-family: 'Roboto Condensed'; font-weight: normal; font-size: .8rem; }

.mensajes_function .cerrar_bt       { position: absolute; top: -20px; right: 0; transition-duration: .4s; }
.mensajes_function .cerrar          { opacity: .7;  width: 12px; height: 12px; border-radius: 20px; padding: 4px; color: #fff; background-color: #000; transition-duration: .4s; }
.mensajes_function .cerrar:hover    { opacity: 1; }

.mensajes_function .seccion_vacia { margin: 10px 10px 0; }

.mensajes_function .lista_mensajes {list-style: none; margin: 0; padding: 0; } /* css reset */

.mensajes_function .lista_mensajes li 			{ margin-bottom: 1px; }
.mensajes_function .lista_mensajes li > a 		{ display: block; padding: 12px 10px; color: #969696; text-decoration: none; background-color: #f5f5f5; transition-duration: .4s; }
.mensajes_function .lista_mensajes .adjunto 	{ display:inline-block; width: .9rem; padding-right: 4px; }
.mensajes_function .lista_mensajes .subject		{ color: #000; padding: 3px 0; font-size: .95rem; font-weight: bold; }
.mensajes_function .lista_mensajes .from		{ color: #000; font-size: .85rem; }
.mensajes_function .lista_mensajes .aula		{ font-size: .85rem; }
.mensajes_function .lista_mensajes .date		{ padding-top: 3px; font-size: .75rem; font-weight: 300; }

.mensajes_function .lista_mensajes li > a:hover { padding: 12px 5px 12px 15px; background-color: #fff; }



/*****
	menu desplegable usuario
*****/

.menu_usuario_frame 		 		 { position: absolute; top: .75em; right: 0; z-index: 109; transition-duration: .4s; }
.menu_usuario_frame .usuario 	     { border: solid 3px rgba(0,0,0,.25); border-radius: 23px; width: 40px; height: 40px; overflow: hidden; cursor: pointer; transition: all .3s; }
.menu_usuario_frame .usuario .thumb  { display: inline-block; vertical-align: middle; }
.menu_usuario_frame .nombre_usuario  { padding: 5px 8px; border-bottom: 1px solid #eee; margin-bottom: 4px; font-size: .8rem; font-family: 'Roboto Condensed'; color: #959595; }

.menu_usuario_frame .usuario:not(.activo):hover,
.menu_usuario_frame .usuario.activo  			{ border-color: rgba(255,255,255,1); }

.menu_usuario_frame .usuario.login,
.menu_usuario_frame .usuario.login:not(.activo):hover { background-image: none; }

.menu_usuario_frame .opciones_frame:after   { position: absolute; z-index: 112; bottom: 100%; right: 17px; content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 0 5px 8px 5px; border-color: transparent transparent #ffffff transparent; }
.menu_usuario_frame .opciones_frame:before  { position: absolute; z-index: 111; bottom: 100%; right: 16px; content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 0 6px 10px 6px; border-color: transparent transparent #c0c0c0 transparent; }
.menu_usuario_frame .opciones_frame {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	min-width: 210px;
	width: 130%;
	border: 1px solid #c0c0c0;
	border-right: none;
	padding: 3px;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.5);
	z-index: 110;
}
.menu_usuario_frame .listado_opciones 				{ list-style-type: none; padding: 0; margin: 0; }
.menu_usuario_frame .opcion_menu_usuario a 			{ display: block; padding: 8px; font-size: .9em; text-decoration: none; color: #000; transition: all .4s; }
.menu_usuario_frame .opcion_menu_usuario a:hover  	{ padding: 8px 5px 8px 11px; background-color: #e2e2e2; color: #2766be; }

#scroll-to-top {
    position: fixed;
    background: url('../img/function_bar/scroll-to-top.png') no-repeat;
    cursor: pointer;
    width: 55px;
    height: 55px;
    bottom: 3em;
    right: .6em;
    z-index: 999;
}


/********** no loggeado *************/
.not-logged .header_nav .logo img 		{ height: 2.25rem !important; }
.not-logged .function_bar 				{ padding-left: 60px; }
.not-logged .function_bar .col_derecha 	{ padding-right: 0; }



/********** responsive *************/

@media only screen and (max-width : 1400px) {
    .function_bar .nombre_instalacion   { max-width: 36%; }
}
@media only screen and (max-width : 1200px) {
    /* iconos pierden el texto */
    .function_bar .nombre_instalacion   { max-width: 50%; }
    .function_bar .app              { padding: 0; }
    .function_bar .app:hover        { padding: 0; }
    .function_bar .app:hover .icono { transform: scale(1.1); }
    .function_bar .app .label       { display: none; }
    .function_bar.mail_alert_on .mail_alert { left: 0; }
}

@media only screen and (max-width : 780px) {

    .header_nav .logo               { display: none; }
    .not-logged .function_bar,
    body:not(.not-logged) .scrolled .location_bar,
    .function_bar, .location_bar    { padding-left: 0; }

    /* ventana de mail no leido se reacomoda */
    .mensajes_popup:after,
    .mensajes_popup:before          { display: none; }
    .mensajes_popup                 { position: fixed; width: auto; top: 2.25rem; left: 20px; right: 20px; bottom: 20px; overflow-y: auto; }
    body:not(.not-logged) .scrolled .mensajes_popup     { margin-top: 0; }
    .mensajes_function .cerrar_bt   { top: 0; }

}

@media only screen and (max-width : 540px) {

    /* aparece icono de desplegar apps */

    body:not(.not-logged) .function_bar .apps_button          { display: inline; }
    body:not(.not-logged) .function_bar.show_apps .icono.up   { display: inline; }
    body:not(.not-logged) .function_bar.show_apps .icono.down { display: none; }
    body:not(.not-logged) .function_bar.show_apps .apps_button .mail_alert    { opacity: 0; }

    body:not(.not-logged) .function_bar .apps                 { position: absolute; top: -50px; right: 2.25rem; }
    body:not(.not-logged) .function_bar.show_apps .apps       { top: 0; }

    body:not(.not-logged) .function_bar .nombre_instalacion           { position: absolute; left: 0; top: 0; }
    body:not(.not-logged) .function_bar.show_apps .nombre_instalacion { max-width: 25%; }
}

@media only screen and (max-width : 362px) {
    body:not(.not-logged) .function_bar .nombre_instalacion           { position: absolute; left: 0; top: 0; }
    body:not(.not-logged) .function_bar.show_apps .nombre_instalacion { top: -50px; }
}