/**
 * Definições para responsividade do painel
 */
body{
    /*font-size: 62.5%;*/
}

img.responsivo,
picture,
embed,
object,
video {
    max-width: 100%;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 
.clearfix:after {
    clear: both;
}
 
.clearfix {
    *zoom: 1;
}

#geral,.wrapper{
    min-width: 100px;
}

/* FIXA a largura para tela maior que 1280px */
@media screen and (min-width: 1280px) {
    #geral {
        max-width: 1280px;
    }
    .wrapper {
        max-width: 1280px;
	min-width: 950px;
    }
}

/* FIXA a largura para tela menor que 280px */
@media screen and (max-width: 280px) {
    #geral,.wrapper {
        min-width: 280px;
    }
}

@media screen and (min-width: 801px) {
    .no-lg{
        display: none;
    }
}

@media screen and (min-width: 620px) {
    .no-md{
        display: none;
    }
    table.responsiva .lbl{display: none}
}

@media screen and (min-width: 727px) {
    .no-desktop{
        display: none;
    }
}

/* OCULTA O UTILITARIO DE USUÁRIO DO HEADER */
@media screen and (max-width: 950px) {

    #foto-usuario-header{
        border: none;
    }
    
    #utilidades-usuario{
        display: none;
    }    
}

/* TELAS MÉDIAS */
@media screen and (max-width: 800px) {
    
    /* FORMEE */
    .grid-1-12,.grid-2-12,.grid-3-12 {width: 22%;}
    .grid-4-12,.grid-5-12,.grid-6-12 {width: 47%;}
    .grid-7-12,.grid-8-12,.grid-9-12 {width: 72%;}
    .grid-10-12,.grid-11-12,.grid-12-12 {width: 97%;}
    
    /* GRID */
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6{width: 48.333333333333%;}
    .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{width: 98.333333333333%;}    
    
    /* TABELAS EM SCROOL */
    table{display:block; width:auto; overflow-x: auto;}
    
    #utilidades-usuario,
    .no-md{
        display: none;
    }    
}
/* ATIVAÇÃO MOBILE */
@media screen and (max-width: 726px) {
    #geral{
        padding-top: 45px; 
    }
    #tp{
        min-height: 45px;
        height: 45px;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0 2px 2px #000;
        z-index: 3;
    }
    #tp .logotipo{
        height:  45px;
	margin: 0;	
    }
    #foto-usuario-header{
        display: none
    }
    #logotipo-painel-header{

    }
    .menu-utilitario{
        margin: 3px 3px;
    }
    .menu-utilitario a{
        margin-left: 0.4em;
        padding: 0.2em;        
    }
    .menu-utilitario a i{
        font-size: 2.1em;
    }
    
    h1{
        font-size: 1.2em;
        padding: 0.3em 0.5em 0.3em 1.3em;
    }
    
    #bt-menu-mobile{
        display: block;
	font-size: 2.2em;
	color: #fff;
	float: left;
	margin: 10px 5px 0 5px; 
    }
    
    .sidebar{
        padding-left: 15px !important;
    }
    
    #menu_sidebar{
        z-index: 2;
        position: fixed;
        top: 40px;
        max-height: 90%;
        overflow-y: auto;
        padding-bottom: 50px;
        box-sizing: border-box;
    }
    
    ul.menu-gd{
        margin: 0;
        padding: 0;
    }
    ul.menu-gd li{
        display: block;
        float: none;
        clear: both;
    }
    ul.menu-gd li a{
        display: block;
        width: auto;
        height: 48px;
        position: relative;
    }
    ul.menu-gd li a div.menu-gd-ico{
        position: absolute;
        left: 8px;
        top: 4px;
        font-size: 12px;
        padding: 0;
        margin: 0;
    }
    ul.menu-gd li a div.menu-gd-label{
        position: absolute;
        left: 48px;
        top: 14px;
        font-size: 1em;
        padding: 0;
        margin: 0;
    }    
    .no-mobile{
        display: none;
    }
    .avisos-container{
        width: auto !important;
    }
    
}

/* TELAS PEQUENAS */
@media screen and (max-width:620px){
    
    /* FORMEE */
    .grid-1-12,.grid-2-12,.grid-3-12,.grid-4-12,.grid-5-12,.grid-6-12 {width: 47%;}
    .grid-7-12,.grid-8-12,.grid-9-12,.grid-10-12,.grid-11-12,.grid-12-12 {width: 97%;}

    /* GRID */
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
    .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{width: 98.333333333333%;}
    
    /* TABELAS RESPONSIVAS */
    table.responsiva .tabela1 td {
        display: none;
    }

    table.responsiva tbody.tabela2 tr, table.responsiva tr.tabela2 {
        border-bottom: 1px solid #dddddd;
    }
    table.responsiva .tabela2 td {
        border: 0;
    }

    table.responsiva .tabela2 td:not(.no-block) {
        display: block;
    }
    .no-sm{
        display: none;
    }
}