/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26-sep-2016, 17:48:49
    Author     : fpascual
*/

/*--------------------------------------------------------------- transform --*/
.toggler:after, .go_up, .go_up span{
    transition: all .3s ease;
}
.loading_cover{
    transition: opacity 1s ease;
}
    
#main_nav, .nav_toggler, .paginator a{
    transition: all .15s ease;
}

/*------------------------------------------------------------------- fonts --*/
html, body, input, select, textarea, button{
    font-family: 'Open Sans', sans-serif;
}
#main_nav, #main_header, h1, h2, h3, h4, h5, h6{
    font-family: 'Dosis', sans-serif;
    font-weight: 300;
}
.section_content{
    font-size: .8em;
}
/*----------------------------------------------------------------- cosetes --*/
hr{ 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,.05), rgba(0,0,0,.25), rgba(0,0,0,.05));
  background-image: -moz-linear-gradient(left, rgba(0,0,0,.05), rgba(0,0,0,.25), rgba(0,0,0,.05));
  background-image: -ms-linear-gradient(left, rgba(0,0,0,.05), rgba(0,0,0,.25), rgba(0,0,0,.05));
  background-image: -o-linear-gradient(left, rgba(0,0,0,.05), rgba(0,0,0,.55), rgba(0,0,0,.05)); 
}
.loading_cover{
    /*display: none;*/
    opacity: 0;
    position: fixed;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0,0,0,.7);
    background-image: url(images/evo-loading.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.site_loading .loading_cover{
    display: block;
    opacity: 1;
    width: 100%;
    height: 100vh;
}
/*-------------------------------------------------------------------- main --*/
.main_content{
    display: flex;
    z-index: 10;
    min-height: calc(100vh - 2.5em);
    box-sizing: border-box;
}
#main_header{
    height: 2.5em;
}
#main_nav{
    max-width: 16em;
    width: 100%;
}
.minified #main_nav{
    width: 6em;
}
main{
    width: 100%;
}
.wrap{
    max-width: 100%;
    padding: 0 2em;
}
article{
    margin-bottom: 1.5em;
}
/*-------------------------------------------------------------- background --*/
#wrapper{
    background-image: url(images/bg/blur-1.jpg);
    background-position: top center;
    background-size: cover;
    background-color: gray;
}
main{
    background-color: rgba(255,255,255,.55)
}
#main_header, #main_nav, #main_nav ul ul{
    background-color: rgba(0,0,0,.55);
}
#main_nav a, #main_nav p,
#main_header a, #main_header{
    color: rgba(255,255,255,.85);

}
/*--------------------------------------------------------------------- nav --*/
#main_nav{
    padding: 2em 0;
    border: none;
    box-sizing: border-box;
}
#main_nav li{
    display: block;
}
#main_nav li:hover > ul{
    display: none;
}
#main_nav ul ul{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}
#main_nav .toggler{
    cursor: pointer;
}
#main_nav ul ul{
    padding: 0;
}
#main_nav ul ul li{
    background-color: transparent;
    padding: 0 0 0 .25em;
}
#main_nav ul ul::after{
    display: none;
}
#main_nav a, #main_nav p{
    padding: .75em 1em;
}

#main_nav li:hover > a, #main_nav li:hover > p{
    background-color: #568270;
}
#main_nav ul ul li:hover > a, #main_nav ul ul li:hover > p{
    background-color: transparent;
}
.nav ul ul p::after, .nav ul ul a.dropdown::after {
    color: #FFFFFF;
}
#main_nav ul ul a, #main_nav ul ul p{
    font-size: .9em;
    white-space: normal;
}
#main_nav ul ul > li:first-child{
    box-shadow: 0 4px 0 0 rgba(0,0,0,.2) inset;
}
#main_nav ul ul > li:last-child{
    box-shadow: 0 -4px 0 0 rgba(0,0,0,.2) inset;
}
#main_nav .first_ul > li .toggler:after{
    content: "▸";
    display: block;
    width: 1em;
    line-height: 1em;
    position: absolute;
    right: 1em;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
#main_nav .first_ul > li .toggler.toggled:after{
    transform: translate(1px, -50%) rotate(90deg);
}

.nav_toggler{
    background: rgba(255,255,255,.55);
    border:none;
    padding: .25em 1.15em .5em .5em;
    color: #333333;
    line-height: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /*position: absolute;*/
    /*top: calc(100vh - 6em);*/
    left: calc(100% - 2em);
    top: 2em;
}
.nav_toggler span{
    font-size: 1em;
    line-height: 1;
}
.nav_toggler:hover{
    background: rgba(255,255,255,.55);
    padding: .25em 2em .5em .5em;
    left: calc(100% - 2.85em)
}
.nav_toggler:after{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: -6px;
    width: 0; 
    height: 0; 
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(255,255,255,.25);
    transform: rotate(-45deg);
}
.minified #main_nav .nav_toggler{
    transform: rotate(180deg);
    left: 100%;
    background: rgba(0,0,0,.55);
    color: #FFFFFF;
    padding: .25em .5em .5em .5em;
}
.minified #main_nav .nav_toggler:after{
    display: none;
}


.minified #main_nav .first_ul > li:not(:first-child){
    display: none;
}
.minified #main_nav ul ul a, .minified #main_nav ul ul p{
    font-size: .7em;
    padding: .5em;
}
.minified #main_nav  .first_ul > li .toggler::after {
    right: .25em;
}

#main_nav .active{
    background-color: rgba(86,130,112,.25);   
    border-bottom: solid 1px rgba(255,255,255,.15);
}
#main_nav .active:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background-color: #568270;
    box-shadow: 5px 0 0 0 rgba(255,255,255,.65);
}

/*------------------------------------------------------------------ header --*/
#main_header{
    padding: .5em 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px;
    box-sizing: border-box;
}
#main_header h1, .user_area{
    display: flex;
    align-items: center;
}
.userName{
    margin-right: .25em;
}
#main_header img{
    width: auto;
    max-height: 1em; 
    margin-right: .25em;
}
#titulo_sistema{
    font-size: 1.5em;
    font-weight: 700;
}
/*----------------------------------------------------------------- content --*/
main{
    margin: 0 1em 0 1em;
    background: none;
}
h1{
    font-weight: 200;
    font-size: 1.6em;
    color: #333333;
    padding: .25em .5em .25em 0;
}
.section_content{
    padding: 1.5em;
    background-color: rgba(255,255,255,.8);
    box-shadow: 0 0 1em 0 rgba(0,0,0,.15)
}
.single_width{
    display: inline-block;
    width: auto;
}
.section_content_group .section_content{
    margin-bottom: 2em;
}
.section_content_group .outer_header{
    margin-bottom: .75em;
}
.minified main{
    width: calc(100% - 6em);
    box-sizing: border-box;
}

/*------------------------------------------------------------------ header --*/
.hgroup{
    display: flex;
}
.hgroup a, .hgroup .button, .hgroup .button, .breadcrumber a, .breadcrumber .button, .breadcrumber .button{
    margin-right: 1em;
    background: transparent;
    border: none;
    border-right: solid 1px rgba(0,0,0,.25);
    border-radius: 0;
    
}
.hgroup [class*="icon-"], .breadcrumber [class*="icon-"]{
    display: flex;
    align-items: center;
    opacity: .5;
}
.hgroup [class*="icon-"]:hover, .breadcrumber [class*="icon-"]:hover{
    opacity: 1;
}
.go_back, .go_back:hover{
    position: absolute;
    height: 100%;
    transform: translateX(-125%) !important;
    box-shadow: none !important;
}
.breadcrumbs{
    border: none;
    margin:0;
    padding: 0;
}
.breadcrumbs a, .breadcrumbs .button, .breadcrumbs .button{
    border: none;
    font-size: .8em;
    color: rgba(0,0,0,.35);
    margin: 0;
}

/*------------------------------------------------------------------- lists --*/
ul[class*="icon-f6t-"] li p{
    margin: 0;
}
.file_list a strong{
    color: #333333;
}
/*------------------------------------------------------------------ tables --*/
table{
    background-color: #FFFFFF;
}
table thead th{
    background: none;
    font-weight: 400;
}
table thead {
    background-color: #568270;
    color: #FFFFFF;
}
table .texto{
    line-height: 1.5;
}
.table_shorter_control{
    top: -10px;
}
.table_shorter{
    font-size: .8em;
}
/*------------------------------------------------------------------- forms --*/
label{
    color: #555555;
    padding-left: .15em;
}
form p{
    margin-bottom: 1.25em;
}
.checkbox label{
    background-color: #eaeaea;
    border: solid 1px #DDDDDD;
    padding: .5em .75em .5em 2.25em;
    color: #555555;
    z-index: 0;
    cursor: pointer;
}
.checkbox input{
    position: absolute;
    left: .75em;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.checkbox:hover label{
    background-color: #f9f9f9;
    border-color: rgba(102,189,206,.8);
    color: #3AA1B5;
}
fieldset.styled{
    background-color: #FFFFFF;
}
.no_bottom{
    padding-bottom: 0 !important;
}
/*----------------------------------------------------------------- buttons --*/
.btn_group *{
    margin-right: 1.5em;
    display: inline-block;
    vertical-align: middle !important;
}
[class*="_btn"]{
    border: none !important;
    padding: .75em 2.5em 1em !important;
    text-transform: uppercase;
    box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2), 0 3px 3px 2px rgba(0,0,0,.2);
}
[class*="_btn"]:hover{
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.4), 0 3px 3px 2px rgba(0,0,0,.1);
}
[class*="_btn"]:active{
    transform: translateY(4px);
    box-shadow: inset -12px 0 6px 0 rgba(255,255,255, 0.2), inset 12px 0 6px 0 rgba(255,255,255, 0.2), 0 3px 3px 2px rgba(0,0,0,.1)
}
.primary_btn {
    color: #FFFFFF !important;
    background: #0088cc !important;
}
.secondary_btn {
    color: #FFFFFF !important;
    background: #5bb75b !important;
}
.tertiary_btn {
    color: #333333 !important;
    background: #f6f6f6 !important;
}
.danger_btn {
    color: #FFFFFF !important;
    background: darkred !important;
}
.go_up{
    position: fixed;
    bottom: 3em;
    right: .5em;
    padding: 0;
    box-shadow: none;
    width: 2em;
    line-height: 2em;
    text-align: center;
    color: rgba(255,255,255,.25);
    border: solid 1px rgba(0,0,0,.05);
    background: rgba(0,0,0,.25);
    z-index: 999;
}
.go_up:hover{
    color: rgba(255,255,255,.55)!important;
    transform: none !important;
    border: solid 1px rgba(0,0,0,.25);
    background: rgba(0,0,0,.55);
}
.go_up:hover span{
    display: block;
    transform: translateY(-15%);
}

.button_list button, .button_list .button{
    margin: 0 0 1em 0;
}
/*--------------------------------------------------------------- paginator --*/
.paginator{
    display: flex;
    flex-wrap: wrap;
    margin: 1.5em 1em 0 .75em
}
.paginator a{
    display: block;
    width: 2em;
    line-height: 2em;
    border-radius: .25em;
    background-color: #999999;
    color: #FFFFFF;
    text-align: center;
    margin: .25em
}
.paginator a:not(.active):hover{
    border-radius: 100%;
    background-color: #777777;
    text-decoration: none;
}
.paginator a.active{
    background-color: #568270;
}


/*-------------------------------------------------------------- login form --*/
.sec_security_login_form #main_nav, .sec_security_login_form #main_header{
    display: none;
}

.login-wrap{
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
.login-form{
    width: 320px;
    border-radius: 3px;
    padding: 2em 3em .5em;
    
    background: rgba(255,255,255,0);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    animation-name: emerge;
    animation-delay: .2s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
#submitlogin {
    display: inline-block;
    background: #568270;
    box-shadow: 0 -4px 0 0 rgba(0,0,0,.2) inset;
    padding: 1em 3em 1.5em;
    color: #ffffff;
    border:none;
    font-size: .8em;
}
.login-form #username, .login-form #password{
    font-size: .8em;
    padding: 1.5em 1.25em;
}

.login-form #username:focus, .login-form #password:focus{
    border-color: #568270;
}
#submitlogin:hover {
    top: 2px;
    box-shadow: 0 -2px 0 0 rgba(0,0,0,.2) inset;
}
.login-form .alert{
    font-size: .8em;
    margin-bottom: 2em;
}
.login-figure{
    max-width: 110px;
    margin: 0 auto 2em;
}
.login-figure img{
    opacity: 0;
    animation-name: fadeIn;
    animation-delay: .2s;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes emerge {
    0%{
        background: rgba(255,255,255,0);
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
    100%{
        background: rgba(255,255,255,.35);
        box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
    }
}

/* CSS para cosas específicas, cambia estilo normal */
/*---------------------------------------------------------------- fotopepi --*/
.pop-up_envio_mail fieldset.styled {
    padding-bottom: 0;
    margin-bottom: 12px;
}