/*
    Created on : 16-dic-2013, 11:42:45
    Author     : yquinoy@avantio.com
*/
#body {min-width:370px;}
.bigContainer {
    background-image: url("/themes/images/bg-vrms-login-2016.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
#logoPlace {
    float: none!important;
}
#generalHeaderContainer {
    background: none;
    border: none;
}
#logo{
    margin-top:35px;
}

.titulo{
    text-align: center;
    color: #616D73;
    font-size: 18px;
    padding: 10px 0 0 0;
}
#principalLogin .p20b{
    padding-bottom: 20px;
}

#principalLogin .subtitulo{
    font-size: 16px;
    padding: 10px 0;
    color: #616D73;
    text-align: center;
}


.user-login-label{
    color: #666666;
    font-size: 16px;
    margin: 0px 0px 5px 5px;
    display: inline-block;
}
#principalConBannersLogin .user-login-label{
    font-size: 14px;
    padding: 2px 0;
    color: #616D73;
    text-align: center;
}
#principalLogin .body {
    font-size: 12px;
}

#principalLogin {
    margin: 60px auto 35px;
    width: 410px;
    background-color: #F7F9F9;
    border: 1px solid #E1E6E9;
    overflow: hidden;
}

#principalLogin #sinLogos {
    padding: 20px 40px;

}

#principalLogin .labelForm {
    padding-top: 7px;
    font-size: 16px;
    width: 40%;
    float: left;
    color: #89949B;
}

#principalLogin .lost-password{
    text-align: right;
}
#principalLogin .seccion {
    margin: 12px 0;
}
#principalLogin input, #principalLogin select {
    padding: 10px;
    border:1px solid #BDC7CD;
    border-radius:3px;
    font-size: 16px;
    color: #666666;
}
#principalLogin input {
    width: 94%;
}
#principalLogin select {
    width: 100%;
}

#principalLogin input:focus, #principalLogin select:focus {
    outline: none;
    border:1px solid #1AAEE9;
    box-shadow: 0 0 1px #1AAEE9;
}

#principalLogin .pass {
    text-decoration: none !important;
    font-size: 14px;
    color: #3F9FDA !important;
}

#principalLogin #logos {
    color: #616D73;
    padding: 0 15px 25px 0;
}
#principalLogin #logos > span {
    display: table-cell;
    vertical-align: middle;
    padding-right: 5px;
}
#principalLogin #principalLogin #logos #navegadores {
    margin-top: 10px;
}

#principalLogin #logos #navegadores .logoNavegador {
    text-decoration: none;
    padding-left: 10px;
    color: #616d73;
}
#generalBodyContainer{
    padding-bottom: 50px;
}

/*=== Estilos de Validacion ===*/
#principalLogin input:required:valid, #principalLogin select:required:valid{
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
#principalLogin input:focus:invalid, select:focus:invalid {
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input#login_button, input#recovery_button{
    width: 100%;
    border:1px solid #bd4a33; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px; padding: 8px; text-decoration:none; display:inline-block; color: #FFFFFF;
    background-color: #F15F41; background-image: -webkit-gradient(linear, left top, left bottom, from(#F15F41), to(#2CAFE3));
    background-image: -webkit-linear-gradient(top, #F15F41, #d7553a);
    background-image: -moz-linear-gradient(top, #F15F41, #d7553a);
    background-image: -ms-linear-gradient(top, #F15F41, #d7553a);
    background-image: -o-linear-gradient(top, #F15F41, #d7553a);
    background-image: linear-gradient(to bottom, #F15F41, #d7553a);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F15F41, endColorstr=#2CAFE3);
}

input#login_button:hover, input#login_button:focus, input#recovery_button:hover, input#recovery_button:focus{

    border:1px solid #bd4a33;
    background-color: #bd4a33; background-image: -webkit-gradient(linear, left top, left bottom, from(#e55a3e), to(#bd4a33));
    background-image: -webkit-linear-gradient(top, #e55a3e, #bd4a33);
    background-image: -moz-linear-gradient(top, #e55a3e, #bd4a33);
    background-image: -ms-linear-gradient(top, #e55a3e, #bd4a33);
    background-image: -o-linear-gradient(top, #e55a3e, #bd4a33);
    background-image: linear-gradient(to bottom, #e55a3e, #bd4a33);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e55a3e, endColorstr=#bd4a33);
}
#principalLogin .buttonSession {
    padding-top: 5px;
    width: 100%;
}

#principalLogin input#pass{
    width: 106px;
    border:1px solid #BBB; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px; padding: 11px; text-decoration:none; display:inline-block; color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #f0f0f0; /*background-image: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#BBB));
    background-image: -webkit-linear-gradient(top, #DDD, #BBB);
    background-image: -moz-linear-gradient(top, #DDD, #BBB);
    background-image: -ms-linear-gradient(top, #DDD, #BBB);
    background-image: -o-linear-gradient(top, #DDD, #BBB);
    background-image: linear-gradient(to bottom, #DDD, #BBB);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DDD, endColorstr=#BBB);*/
}

/*input#pass:hover, input#pass:focus{
    font-size: 13px;
    border:1px solid #999;
    background-color: #999; background-image: -webkit-gradient(linear, left top, left bottom, from(#BBB), to(#999));
    background-image: -webkit-linear-gradient(top, #BBB, #999);
    background-image: -moz-linear-gradient(top, #BBB, #999);
    background-image: -ms-linear-gradient(top, #BBB, #999);
    background-image: -o-linear-gradient(top, #BBB, #999);
    background-image: linear-gradient(to bottom, #BBB, #999);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#A99, endColorstr=#999);
}*/
#principalLogin .passDiv {
    position: relative;
    margin-top: -28px;
    float: right;
    margin-right: 10px;
}
#generalFooterContainer {
    display:none;
}
#recoverySuccess {
    text-align:left;
}
#recoveryError {
    margin-top: 10px;
}

#loginError {
    margin: 5px auto 15px;
    background-color: #F7F9F9;
    position:relative;
    border-left: 10px solid #fbb116;
}
#loginError:after {
    left: 0%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: #F7F9F9;
    border-left-color: #fbb116;
    border-width: 10px;
    margin-top: -10px;
}
#loginError p {
    padding: 28px;
    font-size: 15px;
    font-weight: bold;
    color: #616D73;
}

#changePassword {
    margin: 30px auto -13px;
    width: 402px;
    background-color: #F7F9F9;
    position:relative;
    border-left: 10px solid #9ccb3c;
    z-index: 999;
}

@media only screen and (max-width: 415px) {
    #changePassword {
        width: auto;
    }
}

#changePassword:after {
    left: 0%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: #F7F9F9;
    border-left-color: #9ccb3c;
    border-width: 10px;
    margin-top: -10px;
}
#changePassword p {
    padding: 28px;
    font-size: 15px;
    font-weight: bold;
    color: #616D73;
    box-shadow: 0px 0px 5px 0px #8e8e8e;
}
label.errorClass {
    color: #fbb116 !important;
}
input.errorClass, input.errorClass:focus {
    border:1px solid #fbb116 !important;
    box-shadow: 0 0 1px #fbb116 !important;
}

#pass{
    color: #616D73 !important;
}
/*LoginConBanners*/
#principalConBannersLogin {
    margin: 0px auto 20px;
    width: 380px;
    background-color: rgb(247, 249, 249);
    border: 1px solid rgb(225, 230, 233);
    overflow: hidden;
    height: 350px;
    float: left;
}

#principalConBannersLogin .titulo{
    text-align: center;
    color: #616D73;
    font-size: 16px;
    padding: 5px 0 0 0;
}

#principalConBannersLogin .p20b{
    padding-bottom: 10px;
}

#principalConBannersLogin .subtitulo{
    font-size: 16px;
    padding: 10px 0;
    color: #616D73;
    text-align: center;
}

.heightLogin{
    height: 31px !important;
}

#principalConBannersLogin #sinLogos {
    padding: 15px 40px;
    padding-top: 5px; padding-bottom: 8px;
}

#principalConBannersLogin .labelForm {
    padding-top: 7px;
    font-size: 16px;
    width: 40%;
    float: left;
    color: #89949B;
}

#principalConBannersLogin .lost-password{
    text-align: right;
}
#principalConBannersLogin .seccion {
    margin: 8px 0;
}
#principalConBannersLogin input, #principalConBannersLogin select {
    padding: 5px;
    border:1px solid #BDC7CD;
    border-radius:3px;
    font-size: 14px;
    color: #666666;
    width: 100%;
}

#principalConBannersLogin input#user_password, #principalConBannersLogin input#user_name {
    width: 96%;
}
#principalConBannersLogin input:focus, #principalConBannersLogin select:focus {
    outline: none;
    border:1px solid #1AAEE9;
    box-shadow: 0 0 1px #1AAEE9;
}

#principalConBannersLogin .pass {
    text-decoration: none !important;
    font-size: 14px;
    color: #3F9FDA !important;
}

#principalConBannersLogin #logos {
    color: #616D73;
    padding: 0 15px 25px 0;
}
#principalConBannersLogin #logos > span {
    display: table-cell;
    vertical-align: middle;
    padding-right: 5px;
}
#principalConBannersLogin #logos #navegadores {
    margin-top: 10px;
}

#principalConBannersLogin #logos #navegadores .logoNavegador {
    text-decoration: none;
    padding-left: 10px;
    color: #616d73;
}

#principalConBannersLogin input#pass{
    width: 88px;
    border:1px solid #BBB; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px; padding: 6px; text-decoration:none; display:inline-block; color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #f0f0f0; /*background-image: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#BBB));
    background-image: -webkit-linear-gradient(top, #DDD, #BBB);
    background-image: -moz-linear-gradient(top, #DDD, #BBB);
    background-image: -ms-linear-gradient(top, #DDD, #BBB);
    background-image: -o-linear-gradient(top, #DDD, #BBB);
    background-image: linear-gradient(to bottom, #DDD, #BBB);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DDD, endColorstr=#BBB);*/
}
#principalConBannersLogin .passDiv {
    position: relative;
    margin-top: -21px;
    float: right;
    margin-right: 10px;
}
.contenedorLoginBannerPrincipal{
    margin: auto;
    width: 700px;
    margin-top:-5px
}

.bannerSecundarios{
    clear: both;
    margin: auto;
    width: 700px;
}

.banner1{
    float: left;
    width: 220px;
    height: 220px;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
}
.banner2{
    float: left;
    width: 220px;
    height: 220px;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
}
.banner3{
    float: left;
    width: 220px;
    height: 220px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
}
.banner1Capa{
    position: absolute;
    width: 220px;
    height: 220px;
    opacity: 0.8;
    border-radius: 2px;
}

.bannerPrincipal{
    float: right;
    width: 300px;
    height: 353px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
}
#bannerPrincipalCapa{
    position: absolute;
    width: 300px;
    height: 353px;
    opacity: 0.5;
    border-radius: 2px;
}

.bannerPrincipalError{
    float: right;
    width: 300px;
    height: 416px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
    margin-top: -64px;
}

#bannerPrincipalCapaError{
    position: absolute;
    width: 300px;
    height: 416px;
    opacity: 0.5;
    border-radius: 2px;
}
.textoBannerPrincipal{
    line-height: 1em;
    margin-left: 30px;
    margin-top: 70px;
    font-size: 35px;
    color: white;
    margin-right: 30px;
    font-weight: bolder;
}
.textoBannerPrincipalError{
    margin-left: 30px;
    margin-top: 70px;
    font-size: 35px;
    color: white;
    margin-right: 30px;
    font-weight: bolder;
}

.descripcionBannerPrincipal{
    line-height: 1.1em;
    margin-top: 8px;
    margin-left: 30px;
    font-size: 20px;
    margin-bottom: 35px;
    color: white;
    margin-right: 30px;
}
.linkBannerPrincipal{
    margin-left: 30px;
    font-size: 15px;
    display: inline;
    padding: 5px 10px;
    text-decoration: none !important;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
}

.textoBannerSecundario{
    line-height: 1em;
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    font-size: 23px;
    font-weight: 600;
}
.descripcionBannerSecundario{
    line-height: 1.2em;
    margin-top: 8px;
    margin-left: 20px;
    font-size: 18px;
    margin-bottom: 20px;
    margin-right: 20px;
}
.linkBannerSecundario{
    margin-left: 20px;
    font-size: 12px;
    display: inline;
    padding: 5px 10px;
    margin-right: 20px;
    text-decoration: none !important;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
}
.capaTextoPrincipal{
    position:absolute;
    width: 300px;
    height: 353px
}
.capaTextoPrincipalError{
    position:absolute;
    width: 300px;
    height: 416px
}
.capaTextoSecundario{
    position:absolute;
    width: 220px;
    height: 220px
}


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

    #login #generalBodyContainer table,#login #generalBodyContainer tbody,#login #generalBodyContainer tr,#login #generalBodyContainer td{
        display:block;
    }

    #login  #configNavigation{
        display: inline-block;
        margin: auto;

    }
    #login .limiteAncho{
        width:100%;
    }

    #login .contenedorLoginBannerPrincipal{
        width:100%;
    }

    #logoPlace{
        width:100% !important;
        text-align: center;
    }


    #loginError{
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 25px !important;
        width: 86% !important;

    }
    #principalConBannersLogin{
        float: none !important;
        margin: auto;
    }
    .linkAvantio{
        display:none;
    }
    .bannerSecundarios{
        width: 100%;
        padding-bottom: 1px;
    }
    .banner1,.banner2,.banner3,.banner1Capa,.banner2Capa,.banner3Capa,.capaTextoSecundario{
        margin:auto;
        width: 86.5%;
        height: 155px;
        float:none;
        margin-bottom: 5%;
    }

    #principalConBannersLogin{
        margin:auto;
        width: 86.5% !important;
        margin-bottom:5% !important;
    }

    .bannerPrincipalError,.bannerPrincipal{
        float:none;
        width:86% !important;
        height: 155px;
        margin:auto;
        margin-top: 0px;
        margin-bottom: 5%;
    }

    #bannerPrincipalCapaError,#bannerPrincipalCapa,.capaTextoPrincipalError,.capaTextoPrincipal{

        width: 86%;
        height: 155px;
        margin-bottom: 5%;
    }
    .textoBannerPrincipalError,.textoBannerPrincipal{
        margin-top: 20px;
        margin-left:20px;
        font-size: 23px;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;

    }
    .descripcionBannerPrincipal{
        margin-left:20px;
        font-size: 18px;
        margin-bottom:22px;
        max-height: 2.2em;
        overflow:hidden;
    }
    .textoBannerSecundario{
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }
    .descripcionBannerSecundario
    {
        max-height: 2.4em;
        overflow:hidden;
    }
    .linkBannerPrincipal{
        margin-left:20px;
    }
    #principalConBannersLogin #sinLogos{
        padding-top: 15px;
    }

}
@media only screen and (max-width: 500px) {
    /* For mobile: */

    #login .limiteAncho{
        width:100%;
    }

    #login .contenedorLoginBannerPrincipal{
        width:100%;
    }
}
/*fin estilos loginConBanners*/