html,
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-size: 16px;
    overflow: hidden;
}

div {
    box-sizing: border-box;
}

.flex-c {
    display: -ms-flexbox;
    display: flex;
}

#app-container {
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#app-header {
    min-height: 50px;
    flex-shrink: 0;
}

#app-nav {
    min-height: 40px;
}

#app-maincontainer {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
}

#app-footer {
    min-height: 50px;
}

#app-leftbar {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

#app-rightbar {
    min-width: 50px;
    overflow: scroll;
}

#app-content {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    /* z-index: 1050; */
}

#app-data {
    padding: 1rem;
    padding-left: 2rem;
    padding-top: 1rem;
    height: 100%;
    width: 100%;
    overflow: scroll;
}

#IQModTitleTopDiv>span:last-child {
    display: none;
}


/* Para Desktop */

@media screen and (min-width: 1121px) {
    #app-leftbar {
        display: block;
    }
}


/* Para Tablets */

@media screen and (max-width: 1120px) {
    html,
    body {
        font-size: 14px;
    }
    #app-leftbar {
        max-width: inherit;
        overflow: hidden;
        position: absolute;
        top: 9rem;
        z-index: 900;
    }
    body.iqloggedin #IQModTitleTopDiv>span:last-child {
        display: block;
        cursor: pointer;
        font-weight: normal;
    }
    body.iqloggedin #IQModTitleTopDiv>span:last-child:hover {
        color: rgb(43, 32, 88);
    }
    body.iqloggedin #IQModTitleTopDiv>span:first-child {
        display: none;
    }
    #app-data {
        padding: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (max-height: 600px) {
    html,
    body {
        font-size: 13px;
    }
}

@media screen and (max-width: 991px) {
    div#navbarSupportedContent {
        position: absolute;
        width: 90%;
        top: 3rem;
        background-color: #e3e8ec;
        padding: 0.5rem;
        border-radius: 0 0 0.5rem 0.5rem;
    }
    
    div#mainDataOptions {
        z-index: 850;
    }
}

/* Para Fablets */

@media screen and (max-width: 800px) {
    html,
    body {
        font-size: 13px;
    }
    #app-leftbar {
        /* display: none; */
        top: 11.7rem;
    }
}


/* Para Celulares */

@media screen and (max-width: 480px),
       screen and (max-height: 480px)  {
    html,
    body {
        font-size: 13px;
    }
    #app-leftbar {
        /* display: none; */
        top: 7.2rem;
    }
}


/* Clases y opciones para Internet Explorer */