/* ---- barra de navegación y su contenedor ---- */
#main-navigation ,
#main-navigation > .container{    
    width: 100% !important;
}

/*barra de navegación*/
#main-navigation {
    border:none;
    max-height: 50px;
}

#main-navigation.nav-transparent-bg > .container > #navbar {
    background-color: rgba(0,0,0,0.0) ;
}

#main-navigation.nav-solid-bg > .container > #navbar {
    background-color: #1f2b52 ;
}

/*fondo transparente de la barra de navegación*/
.nav-transparent-bg{
    transition-duration: 0.4s;
    background-color: #1f2b52 !important;
}

/*fondo sólido de la barra de navegación*/
.nav-solid-bg{
    transition-duration: 0.4s;
    background-color: #1f2b52 !important;
    box-shadow: 0 1px 3px #181818 !important;
}

/** ----   botón de conmutación del sidebar izquierdo y de la cabecera de la barra de navegación  ---- **/
#main-navigation > .container > .navbar-header > a.toggle-bar{
    height: 50px;
    float: left;
    border-radius: 0;
    margin: 0 ;
    padding: 0;                      
    border-right: none;        
    box-shadow: none;        
    width: 50px;
    color:#f9f9f9;
}

#main-navigation > .container > .navbar-header > a.toggle-bar:hover{	    
    background-color: #303C68;
}

/* ----  el icono del botón de conmutación del sidebar izquierdo y de la cabecera de la barra de navegación ---- */
#main-navigation > .container > .navbar-header > a.toggle-bar > i{
    font-size: 26px;
    margin-top: 12px;
}

/* cabecera donde esta el icono y el nombre */
#main-navigation > .container > .navbar-header {
    margin-right: 0px; 
    margin-left: 0px;
    text-align: center;
}

/* texto del nombre en la cabecera */
#main-navigation > .container > .navbar-header > .navbar-brand {     
    transition-duration: 0.4s;
    overflow: hidden;
    width: 200px;
    white-space: nowrap;
    margin-left: 0px;
    color:#f9f9f9;
}

/*botón responsive de bootstrap y botón de conmutación del sidebar izquierdo en hover*/
#main-navigation > .container > .navbar-header .navbar-toggle,
.non-touch #main-navigation > .container > .navbar-header .navbar-toggle.collapsed:hover{
    background-color: #303C68;
    border: solid 1px #192038;
    box-shadow: 0 0 1px 0px #23305B;
}

/*opciones de la barra de navegación*/
#main-navigation > .container > #navbar > ul > li > a{    
    box-shadow: none;
    color:#f9f9f9;
    font-size: 14px;    
    max-height: 50px;
}

/*opciones de la barra de navegación en hover*/
.non-touch #main-navigation > .container > #navbar > ul > li > a:hover{
    transition-duration: 0.4s;
    background-color: #303C68;    
}

/*opciones de la barra de navegación cuando estan seleccionadas*/
#main-navigation > .container > #navbar > ul > li.active > a{
    background-color:transparent;
    border-bottom: solid 4px #e8570e;
}

/*opciones de la barra de navegación cuando tienen un submenu abierto*/
#main-navigation > .container > #navbar > ul > li.open > a{
    background-color: #303C68;
}

/* ---- submenu de las opciones ---- */
#main-navigation .dropdown-menu{
    font-size: 14px;
    border: none;
    box-shadow: 0px 4px 5px 0px #202020;
}

/* ---- cabecera del submenu de opciones ---- */
#main-navigation.dropdown-header{
    color:#f9f9f9;
}

/* ---- separador del submenu de opciones ---- */
#main-navigation .dropdown-menu .divider{
    height: 3px;
    background-color: #262E4D;
    border-top: solid 1px #354272;
    border-bottom: solid 1px #354272;
    border-left: solid 10px #303C68;
    border-right: solid 10px #303C68;
    margin:0 auto;
}

/* ---- opciones o items o submenu de opciones ---- */
.square2 > .dropdown-menu > li > a,
.col-lg-1.square2 .dropdown-menu > li > a,
#main-navigation .dropdown-menu > li > a{
    box-shadow: none;
    color:#f9f9f9;
}

/* ---- opciones o items o submenu de opciones en hover---- */
#main-navigation .dropdown-menu > li > a:focus,
.non-touch #main-navigation .dropdown-menu > li > a:hover{
    background-color: #38477A;
}

/* ---- fondo de opciones o items o submenu de opciones ---- */
.col-lg-1.square2 .dropdown-menu,
.col-lg-1.square2 .dropdown-menu > li > a,
#main-navigation .dropdown-menu,
#main-navigation .dropdown-menu > li > a{
    background-color: #303C68;
}
ul > li > a.iden-anio{
    background-color: #1c2133 !important;
}
/* ---- opcion usuario icono de flecha---- */

#menu-user-logged i{
    font-size:20px;
}

/* ---- opcion usuario icono de usuario---- */
#menu-user-logged .logged-user img{
    margin-top: -8px;    
    margin-right: 6px;
}

/* ---- opciones tarjeta de usuario ---- */
.dropdown-user-card{
	overflow: hidden;
	display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- opciones tarjeta de usuario texto de información de usuario---- */
.dropdown-user-card .user-card-info{
    padding: 15px 15px 0px 15px;
    text-align: center;
    display:inline-block;
    color:white;
}


/* ---- opciones tarjeta de usuario contenedor icono o imagen---- */
.dropdown-user-card .user-card-icon{   
    
    display:inline-block;
}

/* ---- opciones tarjeta de usuario  icono o imagen---- */
.dropdown-user-card .user-card-icon img{    
    margin-top:10px;
    width: 64px;
    height: 64px;
    border-radius: 100%;  
    box-shadow: 0 0 0 4px #fff, 0 0 8px 4px #000;
}

/* ---- opciones tarjeta de usuario pie que contiene subfunciones---- */
.dropdown-menu-footer{
    width:330px;
    overflow: hidden;
}

/* ---- opciones tarjeta de usuario subfuncion administrar---- */
#btn-do-config{
    float:left !important;
    margin-left: 5px;
}


/* ---- opciones tarjeta de usuario subfuncion cerrar sesión---- */
#btn-do-logout{
    float:right !important;
    margin-right: 5px;
}

/* configuraciones comunes de la subfuncion cerrar sesión y administrar*/
#btn-do-logout ,
#btn-do-config {
    font-size: 16px;
    clear: none;
}

#btn-do-logout > span,
#btn-do-config > span{
    font-size: 14px;
    display: inline;
}

/* PROPIEDADES DE LA BARRA DE NAVEGACION GENERALES */
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

.navbar-nav>li {
     float: left;
}
.navbar-header {
    float: left;
}
.navbar-nav {
    float: left;
    margin: 0 !important;
}
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
#main-navigation.sm-active > .container > .navbar-header {
    text-align: left;
}
.navbar-nav .dropdown-menu {
    position: absolute !important;
}
/* mantiene el menu de navegacion a la izquierda */
.navbar-right .dropdown-menu {
    right: 0;
    left: auto;
}
/*    PROPIEDADES RESPONSIVAS PARA EL HOME  */
/* comportamiento de la cabecera de la barra de navegación responsivo en intervalo de tablets*/
@media only screen and (max-width: 1024px) and (min-width: 768px){

    /*cabecera */
    #main-navigation > .container > .navbar-header{
        position: absolute;
        z-index: 3;
        width: 250px !important;
        max-height: 50px;
        overflow: hidden;
        white-space: nowrap;
    }

    /* texto del nombre en la cabecera en menu oculto*/
    #main-navigation.sm-active > .container > .navbar-header > .navbar-brand {
        transition-duration: 0.4s;
        width:0px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* comportamiento responsivo de la cabecera de la barra de navegación en intervalo superior a celulares */
@media only screen and (min-width: 768px){

    /* texto del nombre en la cabecera en menu visible*/
    #main-navigation > .container > .navbar-header {
        background-color: #1f2b52;
    }

    /* texto del nombre en la cabecera en menu oculto*/
    #main-navigation.sm-active > .container > .navbar-header {
        background-color:transparent!important;
    }

    /*barra de navegación sección izquierda*/
    #main-navigation > .container  .navbar-right {
        margin-right: 0px !important;
    }

    /* cabecera de la barra de navegación */
    #main-navigation > .container > .navbar-header{
        padding-left: 0px;
        transition-duration: 0.4s;
        width: 250px;
        box-shadow: 0 2px 1px 0 #181818;
    }

    /* cabecera de la barra de navegación en menó oculto */
    #main-navigation.sm-active > .container > .navbar-header{
        /*text-align: left;*/
        padding-left: 15px;
        padding-top: 4px;
        transition-duration: 0.4s;
        box-shadow:none;
        margin-top: 0.4%;
    }

    /* cabecera de la barra de navegación */
    #main-navigation.nav-solid-bg > .container > .navbar-header{
        box-shadow: none;
    }

    /* contenedor de la barra de navegación */
    #main-navigation > .container{
        padding-left: 0px;
    }

    /*boton de conmutación del sidebar izquierdo y de la cabecera de la barra de navegación en modo visible*/
    #main-navigation > .container > .navbar-header > a.toggle-bar{
        background-color: inherit;
    }
}

/* ---- barra de navegación y submenu de opciones en modo responsive para rango de celulares---- */
@media only screen and (max-width: 767px){

    #logged-item .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        max-height: none;
        opacity: 1;
    }

    .dropdown-menu-footer,
    .dropdown-user-card{
        width:100%;
    }
    
    .dropdown-user-card{
        border-top: 1px solid #23305B;
    }
    
	#btn-go-home,
    #btn-do-config{
        float:none !important;
        margin-left: 0px;
    }

    #btn-do-logout{
        float:none !important;
        margin-right: 0px;
    }

    .non-touch #main-navigation.sm-active > .container > #navbar > ul > li > a:hover,    
    .non-touch #main-navigation > .container > #navbar > ul > li > a:hover{
        transition-duration: 0.4s;
        background-color: #303C68;
    }

	#logged-item > .dropdown-menu, #logged-item >  .dropdown-menu > li > a{        
        background-color: #1f2b52; 
	}
	
	#logged-item > .dropdown-menu .divider {
		margin: 9px 0 0;
    	height: 3px;
    	background-color: #192038;
        border-top: solid 1px #23305B;
        border-bottom: solid 1px #23305B;
        border-left: solid 10px #1f2b52;
        border-right: solid 10px #1f2b52;
	}

    #main-navigation > .container > #navbar > ul > li.open > a,
    #main-navigation > .container > #navbar > ul > li.active > a{
        transition-duration: 0.4s;
        background-color: #1f2b52;
        border-left: solid 1px #8A1A27; 
        border-right: solid 1px #8A1A27;
       /* box-shadow: 0 0 1px 0px #A93341; */
    }

    #main-navigation > .container > .navbar-header > .navbar-brand,
    #main-navigation > .container > #navbar > ul > li.active > a{    
        box-shadow: none;
        color:#f9f9f9;
        border-left: solid 1px #1f2b52; 
        border-right: solid 1px #1f2b52;
    }

    #main-navigation{
        border-color: #303C68;
        border-bottom-color:  #303C68;
        background-color: #1f2b52;
        box-shadow: 0 1px 3px #181818;
    }

    #main-navigation > .container > #navbar > ul > li.active > a{
        border-left: solid 6px #e8570e;
        border-bottom: none;
    }

    #main-navigation .navbar-collapse { 
        
    	margin-top: 0px !important;  
        border-top: solid 1px #192038;
        box-shadow: 0 0 0px 1px #23305B,0 0 0px 1px #23305B inset;
        border-bottom: none;
    }

	#main-navigation > .container > #navbar > ul > li > a{	
    	height: 50px;
    	padding: 15px;
        font-size: 10px;
    }
    
    #navbar.navbar-collapse  .dropdown-menu{        
        box-shadow: none !important;
        border-top: solid 1px #8F2D39 !important;
    	border-bottom: solid 1px #8F2D39 !important;
    	box-shadow: 0px 0px 0 1px #6E151F inset !important;
    	border-radius: 0 !important;
    	padding: 0px !important;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    #navbar.navbar-collapse  .dropdown-menu > li:first-child{
    	margin-top:1px;
    }
    
    #navbar.navbar-collapse  .dropdown-menu > li:last-child{
    	margin-bottom:1px;
    }
    
    #navbar.navbar-collapse  #logged-item .dropdown-menu{  
                
        box-shadow: none !important;
        border-top: solid 1px #23305B !important;
        border-bottom: solid 1px #23305B!important;
        box-shadow:0 0 0px 1px #192038 inset !important;
        border-radius: 0 !important;        
        /*border-left: solid 6px #e8570e !important;*/
        padding: 0px !important;
    }

    #main-navigation > .container > #navbar > .nav{
        text-align: center;
    }

    #main-navigation > .container > #navbar > ul > li > a{
        padding-left: 15px;
    }

    #main-navigation .dropdown-menu > li > a,
    #main-navigation .dropdown-menu > li.dropdown-submenu > li > a{
        padding-left: 10px;
    }
    
    #main-navigation .dropdown-menu > li > a,
    #main-navigation .dropdown-menu > li.dropdown-submenu > ul li{    
        padding-top: 10px !important;
    	padding-bottom: 10px !important;
        /*text-align: center;*/
        font-size: 10px !important;
    }

    #main-navigation > .container > .navbar-header {
        width: 180px;
    }
    /* cabecera de la barra de navegación en menó oculto */
    #main-navigation.sm-active > .container > .navbar-header{
        /*text-align: left;*/
        padding-left: 15px;
        padding-top: 4px;
        transition-duration: 0.4s;
        box-shadow:none;
        margin-top: 0.4%;
    }
}

.carousel-bullets .hide-bullets .thumbnail img {
    /*width: 100px;*/
    max-height: 80px;
}
#ul-list-links {
    max-height: max-content;
}

.dropdown-menu > .dropdown-submenu > .dropdown-menu {
     display: none;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    /*left: 100% !important;*/
    right: 100% !important;
    margin-top: -6px;
    margin-left: -1px;
    /*-webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;*/
    -webkit-border-radius: 6px 0px 6px 6px;
    -moz-border-radius: 6px 0px 6px 6px;
    border-radius: 6px 0px 6px 6px;
    overflow: auto;
}
/* LINKS DE ENLACES, FORMATOS Y MANUALES*/
.col-lg-1.square2:hover > .dropdown-menu  ,
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    position: absolute;

}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}