body{
    /*font-family: "titillium" !important;*/
}
#mainContainer{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top:0px;
    left: 0px;
    background-color: #efefef;
    z-index:2000;
}

#mainHeader{
    height: 80px;
    width:100%;
    padding:5px 10px;
    position: fixed;
    top:0px;
    left:0px;
}

#navheader{
    display: block;
    padding-left:80px;
}

#navTools{
    padding-top:5px;
}

#mainContent{
    width: 100%;
    overflow: auto;
    background-color: #EFEFEF;
    margin-top:85px;
    position: relative;
}

#loginBox{
    padding:0px;
    max-width: 85%;
    width:85%;
    min-height:300px;
    background-color: #FFF;
    border-radius: 15px;
}

#loginHeader{
    font-size: 2.5em;
    padding: 10px;
    background-image: url(../images/fondo-logo-login.png);
    background-size: cover; background-position: center;
}

#waitContainer{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 2050;
    left:0px;
    top:0px;
    text-align: center;
    padding: 40px 20px;
    background-image: url(../images/fondo-logo-login.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.msg{
    position: fixed;
    top: 30px;
    right: 20px;
    z-index:999999;
    display:none;
}

.msgBox{
    z-index:999999;
    background-color: rgba(0,0,0,0.75);
}

.form-control{
    margin-top:5px;
}

.contentContainer{
    padding:0px 10px;
    padding-bottom:60px;
    padding-left: 80px;
    overflow-y:auto;
    width: 100%;
    height: 80vh;
}

#dashboard-container{
    margin-left:80px;
    padding:0px 10px;
}

#screen-container{
    margin-left:80px;
    padding:0px 0px;
}

.screen{
    padding:0px 10px;
    margin:0px;
    background-color: #FFF;
    overflow-x:hidden;
}

.screen-header{
    margin-bottom:10px;
    color:#FFF;
    background-image: url(../images/3439.jpg);
    background-size: cover;
    background-position: right bottom;
    background-color: #333333;
    padding:10px 0px;
}

.screen-content{
    overflow-y:auto;
    height:70vh;
    overflow-x:hidden;
    padding-bottom:50px;
}

.preview-image{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding:20px 15px;
    background-color: rgba(0,0,0,0.85);
    z-index:9999999;
    display:none;
}
/*--------------------------------
*| Este es el Breadcum principal |
*-------------------------------*/
 .breadContainer{
     background-color: #CCCCCC !important;
     margin: 0px;
     margin-top:5px;
     margin-left:70px;
     width:100%;
}

#breadMobile{
    display:none;
}

 #customBread{
     display: inline-block;
     padding:0px; margin:0px;
 }

 .breadItem{
     display:inline-block;
     padding:5px 10px;
     padding-right:25px;
     border-right:1px solid #999;
     position:relative;
 }

 .breadItem > .closeButton{
     position: absolute;
     top:2px; right:2px;
     font-size: 10px;
     padding:1px 5px;
     background-color: #333333 !important;
     color:#FFF !important;
     border-radius:50%;
     cursor: pointer;
 }

.breadItem > .closeButton:hover{
    background-color: #d33c43 !important;
}

 .breadItem.active{
     background-color: #AAA;
     color: #003366 !important;
 }

.breadItem.active:hover{
    color: #FFF !important;
}

.breadItem.active:hover a{
    color: #FFF !important;
}

.breadItem.active a{
    color: #003366 !important;
}

.breadItem a{
    text-decoration: none;
}

.breadItem a:hover{
    text-decoration: none;
    color:#FFF !important;
}

.breadItem:hover{
    background-color: #333;
    color:#FFF !important;
}

.breadItem.active > a:hover{
    color:#FFF !important;
}

.toolbar{
    float:right;
}

/*** ATRIBUTOS DEL LOGIN DE LA APP ***/
#loginContainer{
    width: 100%;
    height: 100vh;
    background-color: #CCCCCC;
}

#loginBackground{
    width: 100%;
    height: 100vh;
    position: fixed;
    top:0px; left:0px;
    background-size: cover;
    background-position: right bottom;
}

.input-login{
    border:0;
    border-bottom: 1px solid #8a9296;
    margin:20px 10px;
    max-width: 95% !important;
}

.input-form{
    border:0;
    border-bottom: 1px solid #8a9296;
    padding:3px;
    margin:3px 0px;
    max-width: 99% !important;
}

/*** ATRIBUTOS DEL FOOTER ***/
#footer{
    position: fixed;
    z-index: 9999998;
    bottom:0px;
    left: 0px;
    line-height: 30px;
    padding:5px 15px;
    width: 100%;
    background-color: #CCC;
}
.page-item.active > .page-link{
    background-color: #003399 !important;
    border-color: #003399 !important;
}
/*------------------------------------
***  DISEÑO PERSONALIZADO DE BOTONES *
 -----------------------------------*/
.btn-default{
    background-color: #EFEFEF;
    border:1px solid #CCCCCC;
}

.btn-default:hover{
    background-color: #CCCCCC;
}

.btn-theme{
    background-color: #003399 !important;
    color:white;
}

.btn-theme:hover{
    background-color: #0019FE !important;
    color:white;
}
/*------------------------------------
***  MENU PRINICPAL DEL SISTEMA    ***
 -----------------------------------*/
#wrapper{
    padding-bottom: 120px;
    margin-bottom:0px;
    height:100vh;
    width:80px;
    overflow:auto;
    position: fixed;
    z-index:999999;
    top:0px;
    left:0px;
    background-color: #003399;
    scrollbar-width: thin;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
}

#wrapper::-webkit-scrollbar:vertical {
    width:7px;
}

#wrapper::-webkit-scrollbar-button:increment,#mainMenu::-webkit-scrollbar-button {
    display: none;
}

#wrapper::-webkit-scrollbar:horizontal {
    height: 7px;
}

#wrapper::-webkit-scrollbar-thumb {
    background-color: #003399;
    border-radius: 5px;
    border: 1px solid #0003399;
}

#wrapper::-webkit-scrollbar-track {
    border-radius: 5px;
}

#wrapper.toggle{
    width:230px;
    background-color: #003399;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#wrapper.toggle .menu-icon{
    display:none;
}

#wrapper.toggle .menu-item{
    display:block;
}

#wrapper > ul {
    padding: 0;
    margin:0px;
}

#wrapper ul li {
    list-style: none;
    text-align: center;
}

#wrapper.toggle ul li {
    list-style: none;
    text-align: left;
}

#wrapper ul li a{
    color:white !important;
    text-decoration: none;
    display:block;
    padding:7px;
}

#wrapper ul li a:hover {
    text-decoration: none;
    font-weight: bolder;
}

#wrapper.toggle ul li a {
    padding: 7px;
}

#wrapper.toggle ul li a:hover {
    background-color: #2b579a;
    display:block;
}

#wrapper ul li a .menu-item{
    display:none;
}

#wrapper ul li a .menu-icon {
    font-size: 1.8em;
}
/*** SEGUNDA BARRA DE AYUDA DEL SISTEMA ***/
#wrapper2{
    height:100vh;
    width:95%;
    max-width: 350px;
    overflow:auto;
    position: fixed;
    z-index:999999;
    top:0px;
    right:-100%;
    padding:15px 10px;
    padding-bottom: 120px;
    margin-bottom:0px;
    background-color: #FFF;
    border-left:1px solid #8a9296;
    scrollbar-width: thin;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#wrapper2.toggled{
    right:0px;
}

/*------------------------------
***   SUBMENU REGISTRADOS    ***
 -----------------------------*/
#wrapper ul li ul {
    background-color: rgba(0, 51, 153, 0.852);
    list-style: none;
    margin-left:10px;
    padding:3px;
    padding-left:5px;
}

#wrapper.toggle ul li ul li {
    list-style: none;
    text-align: left;
    padding:0px;
    margin:0px;
}

/*------------------------------------
****    SELECTIONS CLASSES        ****
------------------------------------*/
.selrecord{
    display:block;
    border-bottom:1px solid #ccc;
    padding:5px;
    margin:0px;
    background-color: #efefef;
    line-height: 35px;
}
.selrecord.selected{
    background-color: #CCCCCC;
}
.selrecord:hover{
    background-color: rgba(0,51,153, 0.85);
    color:white;
    font-weight: bold;
}
.cellrecord{
    display:table-cell;
    border-bottom:1px solid #ccc;
    padding:5px;
    margin:0px;
    background-color: #efefef;
    line-height: 35px;
}
.cellrecord.selected{
    background-color: #CCCCCC;
}
.cellrecord:hover{
    background-color: rgba(0,51,153, 0.85);
    color:white;
    font-weight: bold;
}
.cityCell{
    display:block;
    border-bottom:1px solid #ccc;
    padding:5px;
    margin:0px;
    background-color: #efefef;
    line-height: 35px;
}

/***************************************
*** Fomulario para buscar Registros ****
****************************************/

.form-search{
    display:block;
    position: fixed;
    width: 90%;
    max-width: 500px;
    right: -100%;
    top: 180px;
    background-color: #FFF;
    padding:10px;
    border:1px solid #CCC;
    border-radius: 10px;
    z-index:999999;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.form-search.toggled {
    right: 5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.message_box{
    border:1px solid #CCC;
    padding:10px;
    margin:10px 5px;
    overflow:hidden;

}

.message_box:hover{
    background-color: #CCC;
}

#messages-box{
    height: 60vh;
    padding:5px;
    overflow-x: hidden;
    overflow-y: auto;
}

#messages-write{
    padding: 5px;
    border-bottom:1px solid #CCC;
}

table {
    position: relative !important;
    border-collapse: collapse !important;
}

th {
    background-color: #CCC;
    position: sticky !important;
    top: 0; /* Don't forget this, required for the stickiness */
    /*box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);*/
    z-index: 1;
}

.div_sticky{
    position: sticky !important;
    top: 0; /* Don't forget this, required for the stickiness */
    z-index: 1;
}

@media(max-width:468px){
    #wrapper{
        width:0px;
        background-color: #000;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #screen-container{
        margin:0px;
        padding:5px;

    }

    #dashboard-container{
        margin:0px;
        padding:5px;
    }

    #breadContainer{
        display:none;
    }

    .contentContainer{
        padding-left:5px;
    }

    #mainHeader{
        background-image: url(../images/logo_isacar_wide.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    #navheader{
        display: block;
        padding-left:0px;
    }
    #navTools{
        display:none;
    }

    #navTools.toggled{
        display:block;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;

    }

    .breadContainer{
        display:none;
    }

    #breadMobile{
        background-color: #CCCCCC !important;
        display: block;
        position: fixed;
        z-index:9999999;
        top:60px;
        right:-100%;
    }

    #breadMobile #customBread{
        display: block;
        padding:0px; margin:0px;
        border-top:1px solid #333;
    }

    #breadMobile .breadItem > .closeButton{
        position: absolute;
        top:2px; right:2px;
        font-size: 10px;
        padding:1px 5px;
        background-color: #333333 !important;
        color:#FFF !important;
        border-radius:50%;
        cursor: pointer;
    }

    #breadMobile .breadItem{
        display:block;
    }

    #breadMobile.toggled{
        right:10px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

}