@font-face {
    font-family: 'entypo';
    src: url("/CertiForense/peritos/javax.faces.resource/fonts/Entypo-webfont.eot");
    src: url("#iefix") format('embedded-opentype'),
         url("/CertiForense/peritos/javax.faces.resource/fonts/Entypo-webfont.woff") format('woff'),
         url("/CertiForense/peritos/javax.faces.resource/fonts/Entypo-webfont.ttf") format('truetype'),
         url("/CertiForense/peritos/javax.faces.resource/fonts/Entypo-webfont.svg#WebSymbolsRegular") format('svg');
    font-weight: normal;
    font-style: normal;    
}
a{
    text-decoration: none !important;
}

body{
    background: #EBF1F5;
    color: #222;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    text-align: center;
    top: -3px !important;
}

fieldset{
    background:  #E7FBFF !important;
}
label{
    margin-left: 0.8em;
}
legend{
    background: #BDECFE !important;
    font-family: 'Open Sans', sans-serif !important;
    text-shadow: 0px 1px 1px rgba(100, 76, 111, 0.74) !important;
    font-size: 1.1em !important;
}

main{
    font-family: 'Open Sans', sans-serif !important;
}

.label-form{
    color: #00317A;
}

/* Clases */
.alto_caja{
    height: 80% !important;
}

.amarillo_claro{
    background: rgb(251, 241, 69) none repeat scroll 0% 0% !important;
    color: rgb(34, 34, 34) !important;
    text-shadow: 1px 1px 1px rgb(255, 255, 255) !important;
    transition: background 150ms !important;
}
.amarillo_claro:hover, .amarillo_claro:active{
    background-color: #FCFFE6 !important;
    text-shadow: none !important;
}
.ui-wizard-nav-next, .ui-wizard-nav-back, .azul_rey{
    background: #0064FF !important;
    color: #EEFFF0  !important;
    text-shadow: 1px 1px 1px #222 !important;
    transition: all 500ms ease-out !important;
}
.ui-wizard-nav-next:hover, .ui-wizard-nav-back:hover, .azul_rey:hover, .azul_rey:active{
    background: #A4EFCD !important;
    color: #333 !important;
}

.ui-selectoneradio label{
    border: #aeacac solid 1px;
    background: #fff  !important;
    margin: 1em 0;
    padding: 0.5em;
}

.ui-radiobutton{
    
    margin: 3px !important;
}

.ui-radiobutton-box{
    background: #fff !important;
}

.azul_claro{
    background-color: #BDECFE;
    color: #333;
}
.azul_claro:hover, .azul_claro:active{
    background-color: #AABDFF;
    color: #222;
}

.bloque-izq{
    /*display: block;*/
    text-align: left;
    font-family: Open Sans !important;
}
.bordes_red{
    border-radius: 0.5em;
}

.boton{
    border: 0;
    font-weight: bold;
    font-size: large;
    margin: 0.5em auto 1em auto !important;
    padding: 0.3em 1.4em;
}
.box_detalle_examen{
    background-color: #BDECFE;
    display: inline-block;
    padding: 1.2em;
    border-radius: 1em;
    box-shadow: 0px 0px 5px #919196;
    margin: 1em auto;
}
.boton_letras, .ui-wizard-nav-next, .ui-wizard-nav-back{
    box-shadow: 0 2px 3px #3F4402, 0 1px 2px rgba(0,0,0,0.24) !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.15em !important;
    margin-bottom: 0.5em !important;
    transition: 300ms ease-out !important;
}
.boton_letras:hover, .boton_letras:active, .ui-wizard-nav-next:hover, .ui-wizard-nav-back{
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    text-shadow: none !important;
    transform: scale(1.05,1.05) !important;
    transition: 300ms ease-out !important;
    /*padding: 0.3em;*/
}
.boton_letras:hover{
    transform: translate(2px, 2px) !important;
}

.boton_menu{
    display: block;
    float: left;
}
.boton_menu_derecha{
    position: absolute;
    top: 3em;
    right: 0.5em;
}
.boton_menu_izq{
    background-color: #fff;
    border-radius: 60px 10px;
    box-shadow: 6px 8px 2px 0px rgba(233, 233, 233, 0.51);
    display: inline-block;
}
.boton-perfil-salir {
    border: 0;
    border-radius: 1em !important;
    display: inline-block;
    font-family: 'entypo' !important;
    font-size: 3.5em !important;
    line-height: 0.8em; 
    padding: 0 5.66px;
}

.caja_centrada{
    margin: 0 auto;
    width: 85%;
}
.caja_texto{
    border-radius: 0.5em !important;
    padding: 0.5em !important;
    color: #222 !important;
}
.caja_texto:focus{
    background-color: #FBFAC4;
    /*font-weight: bold;*/
}
.col_4em{
    width: 4em !important;
}
.col_6em{
    width: 6em !important;
}
.col_7em{
    width: 7em !important;
}
.col_9em{
    width: 9em !important;
}
.col_10em{
    width: 10em !important;
}
.col_14em{
    width: 14em !important;
}
.col_16em{
    width: 16em !important;
}
.columnResponsive{
    width: 5em;
}
.detalle{
    color: #6355E7;
    font-size: 1.08em;
    text-transform: none !important;
}
.detalle_footer{
    color: #4237a4;
    font-size: 14px;
    text-transform: none !important;
    margin: 1em 0;
    text-align: right;
}

.enfasis_boton{
    border: 2px solid #FFF !important;
    padding: 0 8px !important;
}

.ui-growl-item-container{
    background: #b03520;
    opacity: 0.9;
}
.inline-top{
    display: inline-block;
    vertical-align: top;
}
.inline-middle{
    display: inline-block;
    vertical-align: middle;
}
.margen_der{
    margin-right: 1.5em !important;
}
.margen_der_min{
    margin-right: .5em !important;
}
.morado_claro{
    background: #5168FF !important;
    color: #EEFFF0  !important;
    text-shadow: 1px 1px 1px #222 !important;
}
.morado_claro:hover, .morado_claro:active{
    background: #BDECFE !important;
    color: #222  !important;
    text-shadow: none !important;
}
.msj_error{
    color: #daa;
    list-style: none;
    padding: 0;
    text-align: left;
}

.naranja_claro{
    background: #e7cfc6;
}

.verde_claro{
    background: #97d789;
}

.div_margin{
    margin: 1em auto;
}
.rojo_claro{
    background: rgb(177,85,85) none repeat scroll 0% 0% !important;
    color: #EEFFF0  !important;
    text-shadow: 1px 1px 1px #222 !important;
    transition: background 150ms !important;
}

.rojo_claro:hover, .rojo_claro:active{
    background-color: #E8D5D5 !important;
    color: #222  !important;
    text-shadow: none !important;
}

.sombra_caja{
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.6) !important;
}
.text_left{
    text-align: left;
}
.ui-column-title{
    font-size: 1.1em !important;
    font-weight: bold !important;
}
.ui-menuitem-text:before{
    /*content: "";
    display: block;
    background: url("./images/vineta.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;*/
}

.ui-helper-reset > li > a > .ui-menuitem-text:before{
    /*content: "";
    display: block;
    background: url("./images/icono_menu.png") no-repeat;
    width: 47px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;*/
}
.ui-slider-handle{
    background: #4F82D2  !important;
}
.ui-spinner-button{
    margin-top: 0 !important;
}
.ui-wizard-nav-next{
    
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item{
    white-space: normal !important;
    padding: 0.5em !important;
}

#menu-lateral .ui-helper-reset > li > a > span{
    color: #eef !important;
}
.ui-picklist-list{
    height: auto  !important;
    max-height: 450px;
}
.ui-picklist-list li:nth-child(odd){
    background-color: #F0EFD2;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget {
    font-family: 'Open Sans', sans-serif;
}

.ui-datatable-tablewrapper tbody td, .ui-picklist-list tbody td{
    font-size: 13px;
}
.ui-datatable-tablewrapper thead th, .ui-datatable thead th, .ui-carousel-header{
    background: #A7CAFF !important;
}
.ui-panelgrid-header > .ui-widget-header > td{
    background-color: rgb(194, 238, 252) !important;
}

.ui-selectonebutton .ui-state-active{
    background: #0064FF !important;
    color: white;
}

#menu-lateral .ui-helper-reset > li:nth-child(odd){
    background: #004B83 !important;
}

#menu-lateral .ui-helper-reset > li:nth-child(even){
    background: #001D7E !important;
}

/* Identificadores */

#contenido{
    box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.4) !important;
    padding: 1em 0.2em 2.5em 0.2em;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: all .2s ease-out;
    transform: translateX(0);
    transform: translateZ(0px);
    width: 80%;
    z-index: 9;
}
#contenido.resize, #footer.resize{
    /*margin-left: 160px;*/
    transform: translateX(270px);
    overflow-x: hidden;
    /*z-index: -10;*/
}
#div_logo_foot{
    text-align: center;
}

#footer{
    background-color: #001D7E;
    color:#919196;
    font-family: Open Sans !important;
    margin: 3.5em 0 1em 0 ;
    padding: 1em 2.5em 0 3.5em;
    text-align: left;
    transition: all .2s ease-out;
}
#footer #texto_foot{
    font-size: 0.8em;
    padding-left: 1.5em;
}
#footer a{
    color: #C09D49;
    font-size: 0.9em;
    text-decoration: underline;
}
#encabezado{
    /*Multiples fondos por capas
	mas cercano primero, mas lejano ultimo*/
	background-color: #497BD3;
	background-size: 200px, 100px 100px;
	margin: 0;
	padding: 0.5em 0;
        text-align: center;
	width: 100%;
}
#encabezado h1{
    color: #EEFFF0  !important;
    display: inline-block;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.8em;
    /*padding: 0.67em 0 0 1em;*/
    vertical-align: top;
    text-align: center;
    text-shadow: 1px -2px 4px #222;
    width: 350px;
}

#growl_container .ui-growl-title{
    font-family: 'Lato', sans-serif !important;
    font-size: 1.8em !important;
    font-weight: normal !important;
}

#icon-cambiar-perfil{
    background-color: #FCFFE6;
    border: 0;
    border-radius: 1em;
    font-family: 'entypo' !important;
    font-size: 3.5em;
    line-height: 0.8em;
}

#icon-cambiar-perfil::before{
    content: ',';
}

#boton-menu-letras{
    background-color: #F8FDDD;
    border: 0;
    border-radius: 0.3em;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.8em !important;
    left: 0.1em;
    padding: 0 10.66px;
    position: absolute;
    top: 1.6em;
}

#icon-menu{
    background-color: #F8FDDD;
    border: 0;
    font-family: 'entypo' !important;
    font-size: 3.7em !important;
    line-height: 0.8;
    border-radius: 1em;
    padding: 0 10.66px;
    position: absolute;
    top: 0.8em;
    left: 0.1em;
}
#form_botones #boton_salir{
    background-color: #eee;
    border: 0;
    border-radius: 1em;
    color: #232;
    font-family: 'entypo' !important;
    font-size: 3.5em;
    line-height: 0.8em;
    margin-left: 0.3em;
}


#icon-menu:active, #icon-menu.active, #boton-menu-letras:active, #boton-menu-letras.active{
    background-color: #222;
    color: #eef;
}
#icon-menu::after{
    content: 'i';
}
.seccion{
    display: block;
    padding: 1em;
    margin: 0 auto;
    width: 15em;
    display: inline-block;
    vertical-align: top;
    margin: 1em;
}
#login_sec, #invita_convocatoria_sec {
    background-color: #00317A;
    color: #eef;
    /*display: block;*/
    padding: 1em;
    margin: 0 auto;
    width: 15em;
    display: inline-block;
    vertical-align: top;
    margin: 1em;
}
#login_sec input{
    /*width: 100%;*/
    display: block;
    border: 0;
}

#logo{
    padding: 0.2em 0 0 0.5em;
    /*background-color: #FFF;*/
    margin: 1.2em 1em;
}
#logo_foot{
    background-color: #fff;
    border-radius: 40px 8px;
    box-shadow: 6px 8px 1px 0px rgba(255, 255, 255, 0.16);
    margin-right: 1em;
    padding: 0.8em;
}

#menu-lateral{
    background: #499AD3;
    color: #fff;
    font-weight: 300;
    height: 100%;
    opacity: 0;
    position: fixed;
    transform: translateX(-270px);
    transition: all .2s ease-out;
    z-index: 0;
    width: 270px;
    position: absolute;
}
#menu-lateral span{
    color: #0E193A !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.2em !important;
    white-space: normal !important;
}
#menu-lateral a:hover span{
    color: #FCFFDD !important;
    transition: 350ms !important;
}

#menu-lateral.active{
    height: 100%;
    opacity: 1;
    transform: translateX(0);
    z-index: 100;
}
#menu-lateral ul{
    /*height: 100%;*/
}
#menu-lateral ul li{
    /*border-bottom: 1px solid #90a9b4;*/
    width: 98%;
    margin: 0;
    box-shadow: 0px 2px 3px rgba(34, 34, 34, 0.5);
    transition: 350ms !important;
}
#menu-lateral ul li:nth-child(odd){
    background: #BDECFE;
}
#menu-lateral ul li:nth-child(even){
    background: #73a6b9;
}

#menu-lateral>form> div{    
    border-radius: 0;
    padding: 0 0 0.5em 0 !important;
    /*height: 50%;*/
    background: transparent;
    border: 0;
}

#Register_Form{
    background-color: #18578D;
    color: #eef;
    display: block;
    padding: 2em;
    margin: 0 auto;
    width: 80%;
}
#Register_Form input{
    width: 100%;
}

.ui-slidemenu-wrapper , .ui-slidemenu-content{
    height: calc(100% - 25.2px) !important;
}
.ui-slidemenu-backward{
    background: #A0E1B7 !important;
    color: #222 !important;
    border: 0;
}
.ui-slidemenu-backward:hover{
    background: #609B75 !important;
    color: #eef !important;
} 
.ui-slidemenu-content{   
    height: calc(300px - 25.2px) !important;
}
.ui-slidemenu-wrapper{  
    height: 400px !important;
}

.ui-wizard-navbar{
    width: 88% !important;
    margin: 0 auto;
}
/*


#menu-lateral > ul > li:hover{
    background-color: #901a11;
}
#menu-lateral>ul>li a {
    transition: 0.2s;
    display: block;
    padding: 1em;
    line-height: 1em;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border: 0;
    
}
#menu-lateral > ul > li > ul{
    padding: 0;
    position: absolute;
    top: -1px;
    display: block;
    transform: translateX(-200px);
    list-style: none;
    height: 100%;
    background: #373737;
    transition: transform .35s ease-out;
    z-index: 1;
}
#menu-lateral>ul>li>ul.active{
    display: block;
    transform: translateY(2.875em);
}
#menu-lateral>ul>li>ul li {
  background: #373737;
  border-bottom: 1px solid #2b2b2b;
  border-top: 1px solid #4b4b4b;
  transition: background-image .35s ease-in,box-shadow .35s ease-in;
  display: inline-block;
  width: 200px;
}   
#menu-lateral>ul>li>ul li:hover, #menu-lateral>ul>li>ul li.active {
    background-image: linear-gradient(#2a2a2a,#373737);
    box-shadow: inset 0 -.175em .5em .175em #2f2f2f,inset 0 .175em .5em .175em #2f2f2f;
}*/

#principal{
    font-size: 16px !important;
    border: none;
    padding: 0;
}

/* Media Queries*/

@media(max-width: 1024px){
    #contenido{
        width: 95%;
    }
}

@media (max-width: 788px) {
    .boton_menu_derecha{
        top: 4.5em;
    }
}

@media (max-width: 745px) {
    #encabezado{
        text-align: left;
    }
    #encabezado h1{
        margin: 0;
    }
    .boton_menu_derecha{
        top: 5.5em;
        margin-right: 5em;
    }
    #logo{
        padding-left: 2.5em;
    }
    #icon-menu{
        font-size: 3em !important;
        padding: 0 8.16px;
        top: 1.15em;
    }
    
    #boton-menu-letras{
        font-size: 1em !important;
        padding: 0 8.16px;
        top: 4em;
    }
}


@media (max-width: 656px) {
    #encabezado{
        text-align: left;
    }
    #encabezado h1{
        font-size: 1.5em;
        margin-left: 1em;
        width: 280px;
    }
    #form_botones a{
        font-size: 3em !important;
    }
    #icon-menu{
        font-size: 3em !important;
        padding: 0 8.16px;
    }
    #div_logo_foot{
        display: block;
    }
}


@media (max-width: 610px) {
    
    .boton_menu_derecha{
        top: 5.5em;
    }
    #encabezado h1{
        font-size: 1.2em;
        margin-left: 0.5em;
        margin-top: 1em;
        /*text-align: left;*/
        width: 220px;
    }
    #form_botones a{
        font-size: 2.5em !important;
    }
    #icon-menu{
        font-size: 2.5em !important;
        padding: 0 7.16px;
        top: 1.48em;
    }
    #logo{
        padding-left: 2.0em;
    }
}

@media (max-width: 525px) {
    .boton_menu_derecha{
        top: 4.5em;
    }
    #logo{
        width: 150px;
    }
    #icon-menu{
        top: 1.2em;
    }
    #encabezado h1{
        font-size: 1em;
        margin-left: 0.1em;
        /*text-align: left;*/
        width: 180px;
    }
        
}
@media (max-width: 428px) {
    .boton_menu_derecha{
        position: static;
        display: block;
        margin: 0.5em auto;
    }
    #encabezado{
        text-align: center;
    }
    #encabezado h1{
        margin: 0.5em auto;
        display: block;
    }
    #logo{
        padding-left: 0.5em;
    }
    #div_logo_foot{
        display: block;
    }
}

@media(max-width: 640px){
    .columnResponsive{
        width: 100% !important;
    }
}