/* ******* ALBASOFT GENERAL ******* */


/* GENERAL CLASSES */

.notVisible{
    position:absolute;
    left:-1000000px;
}
.inline-block{
    display:inline-block;
    width:auto;
}
.display-block{
    display:block;
}
.ellipsis{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.btn-2x{
    padding:16px 25px;
}

.as{
    display: inline-block;
    font-size: 1.15em;
    text-rendering: auto;
    position: relative;
    top: 1px;
}
.as.fa-2x{
    font-size:2em;
}
.as.fa-3x{
    font-size:3em;
}
.as.fa-4x{
    font-size:4em;
}
.as.fa-5x{
    font-size:5em;
}

/* Margins */

.push-40-t{
    margin-top:40px !important;
}
.push-40-r{
    margin-right:40px !important;
}
.push-40-l{
    margin-left:40px !important;
}
.push-40{
    margin-bottom:40px !important;
}

@media screen and (min-width: 768px) {
    .remove-margin-sm{
        margin:0 !important;
    }
    .remove-margin-t-sm{
        margin-top:0 !important;
    }
    .remove-margin-r-sm{
        margin-right:0 !important;
    }
    .remove-margin-l-sm{
        margin-left:0 !important;
    }

    .push-10-t-sm{
        margin-top:10px !important;
    }
    .push-10-r-sm{
        margin-right:10px !important;
    }
    .push-10-l-sm{
        margin-left:10px !important;
    }
    .push-10-sm{
        margin-bottom:10px !important;
    }

    .push-15-t-sm{
        margin-top:15px !important;
    }
    .push-15-r-sm{
        margin-right:15px !important;
    }
    .push-15-l-sm{
        margin-left:15px !important;
    }
    .push-15-sm{
        margin-bottom:15px !important;
    }

    .push-40-t-sm{
        margin-top:40px !important;
    }
    .push-40-r-sm{
        margin-right:40px !important;
    }
    .push-40-l-sm{
        margin-left:40px !important;
    }
    .push-40-sm{
        margin-bottom:40px !important;
    }
}

/* Text aligns */

@media screen and (min-width: 768px) {
    .text-right-sm{
        text-align: right;
    }
    .text-left-sm{
        text-align: left;
    }
    .text-center-sm{
        text-align: center;
    }
}




/* COLS */

@media screen and (min-width: 1650px) {
    .custom-cols [class*="col-xlg-"]{
        float:left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .custom-cols .col-xlg-1{
        width:8.33333333%;
    }
    .custom-cols .col-xlg-2{
        width:16.66666667%;
    }
    .custom-cols .col-xlg-3{
        width:25%;
    }
    .custom-cols .col-xlg-4{
        width:33.33333333%;
    }
    .custom-cols .col-xlg-5{
        width:41.66666667%;
    }
    .custom-cols .col-xlg-6{
        width:50%;
    }
    .custom-cols .col-xlg-7{
        width:58.33333333%;
    }
    .custom-cols .col-xlg-8{
        width:66.66666667%;
    }
    .custom-cols .col-xlg-9{
        width:75%;
    }
    .custom-cols .col-xlg-10{
        width:83.33333333%;
    }
    .custom-cols .col-xlg-11{
        width:91.66666667%;
    }
    .custom-cols .col-xlg-12{
        width:100%;
    }
}


/* FIXES */

select.form-control{
    height:34px;
    line-height:34px;
}
.input-daterange input.text-left{
    text-align: left;
}
label .help-block{
    display:inline-block;
}
@media screen and (min-width: 1200px) {
    .general-narrow{
        padding-left: 10%;
        padding-right: 10%;
    }
}


/* Data Tables */
div.dataTables_length select,
div.dataTables_filter input{
    width:100%;
}
table.dataTable{
    margin:0 !important;
}
.dataTables_wrapper .table-responsive{
    padding:0 !important;
}


/* CHARTS */

.chart .chart-viewport{
    display:block;
    margin:0 auto;
}
.chart .chart-container{
    width:100%;
    height:0;
    position:relative;
}
.chart .chart-container canvas{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;    
}
.chart .caption{
    padding-top:10px;
}
.chart .caption .chart-item .color{
    display:inline-block;
    vertical-align: middle;
    width:22px;
    height:22px;
    border:1px solid rgba(0,0,0,.1);
    position:relative;
    top:-1px;
}

/* Pie */
.chart.pie .chart-viewport{
    max-width:380px;
    padding:20px;
}
.chart.pie .chart-container{
    padding-bottom:100%;
}

/* Lines */

.chart.lines .chart-container{
    padding-bottom:70%;
}
@media screen and (min-width: 768px) {
    .chart.lines .chart-container{
        padding-bottom:50%;
    }
}
@media screen and (min-width: 992px) {
    .chart.lines .chart-container{
        padding-bottom:50%;
    }
}
@media screen and (min-width: 1600px) {
    .chart.lines .chart-container{
        padding-bottom:30%;
    }
}


/* SIDE OVERLAY */

#side-overlay .side-header .btn-default{
    color: #fff;
    background-color: rgba(0,0,0,.2);
    border-color: rgba(0,0,0,.05);
}
#side-overlay .side-header .btn-default:hover{
    background-color: rgba(0,0,0,.3);
}

#side-overlay .block-title .fa{
    font-size:15px;
}
#side-overlay .block-title .fa.fa-home{
    font-size:17px;
}

#side-overlay .breadcrumb{
    font-size: inherit;
}
#side-overlay .breadcrumb li{
    text-transform: none;
}


/* LOGOS */

.logo{
    display:inline-block;
    width:100%;
}
.logo span{
    display:block;
    width:100%;
    height:0;
    background:url(../img/logo/logo.svg) no-repeat left center;
    background-size:contain;
}
.logo strong{
    position:absolute;
    left:-1000000px;
}

/* Albasoft */

.logo.albasoft span{
    padding-bottom:20.147%;
}
.logo.albasoft .iso{
    width:26.648%;
    background-image:url(../img/logo/iso.svg);
}
.logo.albasoft .tipo{
    width:73.352%;
    background-image:url(../img/logo/tipo.svg);
}


/* Solis */

.logo.solis{
    /* Logo verical */
    width:70px;
    /* Logo horizontal */
    width:135px;
}
.logo.solis span{
    /* Logo verical */
    padding-bottom:54.43%;
    background-image:url(../img/clientes/solis.svg);
    /* Logo horizontalv */
    padding-bottom:22.942%;
    background-image:url(../img/clientes/solis2.svg);
}



/* SIDEBAR */

#sidebar .side-header{
    padding-left:18px;
    padding-right:15px;
}
#sidebar .logo.albasoft{
    width:115px;
    margin-top:5px;
}
#sidebar .close-btn{
    margin-right:-3px;
}

#sidebar #module-change{
    display:block;
    width:100%;
    text-align: left;
    font-size:16px;
    color:#fff;
    padding:14px 20px 14px 17px;
}
#sidebar #module-change:hover,
#sidebar #module-change:focus{
    background-color:rgba(255,255,255,0.25);
}
#sidebar #module-change .btn{
    padding:0 2px 0 0;
    font-size:12px;
    color: inherit !important;
}

#sidebar .nav-main a > i{
    display:inline-block;
    width:14px;
    text-align: center;
}



/* HEADER NAVBAR */

#header-navbar .nav-header .dropdown-menu{
    padding-top:8px;
    min-width: 210px;
}

#header-navbar .logo.albasoft{
    display:block;
    width:115px;
    margin:7px auto 0;
}

#header-navbar .btn.custom{
    color: #246288;
    background-color: transparent;
    border-color: transparent;
    padding: 6px 7px;
    font-size: 20px;
    line-height: 20px;
}



/* LOGIN */

#login-bg{
    background-color: #2c343f;
    padding:25px 25px 30px !important;
}
#login .logo-container{
    background-color:#333c4b;
    padding:30px 0;
}
#login .logo-container .logo{
    display:block;
    width:122px;
    height:60px;
    margin:0 auto;
    text-indent:-1000000px;
    background:url(../img/logo/logo-v.svg) no-repeat center/contain;
}
#login .form-material>.form-control{
    box-shadow:
        inset 0px 0px 0px 50px #fff,
        0 1px 0 #e6e6e6;
}
#login .form-material>.form-control:focus{
    box-shadow:
        inset 0px 0px 0px 50px #fff,
        0 2px 0 #646464;
}
#login .form-material.form-material-primary>.form-control:focus{
    box-shadow:
        inset 0px 0px 0px 50px #fff,
        0 2px 0 #5c90d2;
}

@media only screen and (min-width:768px){
    #login-bg{
        padding:0 100px !important;
    }
    #login .logo-container .logo{
        width:144px;
        height:70px;
    }
}
@media only screen and (min-width:992px){
    #login-bg{
        padding:0 150px !important;
    }
    #login{
        margin:0 auto;
        max-width:730px;
    }
    #login .logo-container .logo{
        width:144px;
        height:70px;
    }
}


@media only screen and (max-width:991px){
    #login.pulldown,
    #login.pulldown ~ .pulldown{
        top:100px;
    }
}
@media only screen and (max-width:767px){
    .show-login body{
        background-color:#2c343f;
    }

    #login.pulldown,
    #login.pulldown ~ .pulldown{
        top:0;
    }
}