/*
 *      12/08/2016          Original
 */

                                                /* base */
body{
    box-sizing: border-box;
    color: rgba( 0 , 0 , 0 , 0.87 );
    font-family: Roboto, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    /*min-height: 100vh;*/
    min-width: 1024px;
    overflow-x: hidden;
    padding: 0;
    padding-top: calc( 64px + 18px );
    position: relative;
    width: 100%;
    z-index: 0;
}
body.compacto{
    padding-top: 48px
}
body.estendido{
    padding-top: calc( 64px + 72px + 48px )
}
body.oculto{
    padding-top: 0;
}

body.overlay_aberto{
    overflow: hidden
}
h1,
h2,
h3{
    box-sizing: border-box;
    clear: both;
    display: block;
    font-weight: 400;
    letter-spacing: -1px;
    position: relative;
}
h1{
    color: rgba( 255 , 255 , 255 , 1 ) ;
    font-size: 34px;
    line-height: 40px;
    margin: 0;
    padding: 0;
}
h2{
    font-size: 24px;
    line-height: 32px;
    margin: 16px 0;
    padding-left: 48px
}
h3{
    font-size: 20px;
    line-height: 32px;
    padding-left: 48px;
}
h3.centralizado{
    padding-left: 0;
    text-align: center;
    width: 100%;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline
}
a.anexo{
    background-image: url(../icone/anexo_preto_18.png);
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 24px
}
b{
    font-weight: 500
}
div{
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0;
    position: relative
}
input{
    border: none;
    box-sizing: border-box;
    font-family: Roboto, arial, sans-serif;
    outline: none;
}
label{
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    outline: none;
    text-align: center;
}
p{
    line-height: 24px;
    margin: 8px 0;
}
span{
    box-sizing: border-box;
}
textarea{
    border: none;
    box-sizing: border-box;
    font-family: Roboto, arial, sans-serif;
    height: 26px;
    min-height: 26px;
    outline: none;
    overflow-y: auto;
    resize: none;
}
                                                /* correções do jquery ui */
.ui-widget-content {
	background: #eeeeee;
}
.ui-widget-header {
	background: #f6a828;
}
/*.ui-state-default,*/
/*.ui-widget-content .ui-state-default,*/
.ui-widget-header .ui-state-default {
	background: #f6f6f6;
}
                                                /* aba */
#aba{
    box-shadow: 0 3px 6px rgba( 0 , 0 , 0 , 0.16 ), 0 3px 6px rgba( 0 , 0 , 0 , 0.23 );
    height: 48px;
    left: 0;
    min-width: 160px;
    padding-left: 56px;
    position: fixed;
    top: 64px;
    width: 100%;
    z-index: 4
}
.compacto > #aba{
    top: 0;
}
.estendido > #aba{
    top: calc( 64px + 72px );
}
.oculto > #aba{
	display:none;
}
#aba.imagem{
    background-color: transparent
}
    #aba > input[type="radio"]{
        display: none
    }
    #aba > label{
        background-color: transparent;
        border-bottom: 2px solid transparent;
        box-sizing: border-box;
        color: rgba( 255 , 255 , 255 , 0.7 );
        cursor: pointer;
        display: inline-block;
        /*font-weight: 500;*/
        height: 100%;
        line-height: 48px;
        overflow: hidden;
        padding-bottom: 20px;
        padding-left: 24px;
        padding-right: 24px;
        text-transform: uppercase;
    }
    #aba > label.oculto{
        display: none
    }
    #aba > label:active{
        -moz-transition: background-color 150ms;
        -ms-transition: background-color 150ms;
        -o-transition: background-color 150ms;
        -webkit-transition: background-color 150ms;
        transition: background-color 150ms;
        background-color: rgba( 0 , 0 , 0 , 0.12 );
    }
    #aba > input:checked + label,
    #aba > input:disabled:checked + label{
        border-bottom: 2px solid #FFF;
        color: #FFF;
    }
    #aba > input:disabled + label{
        color: rgba( 255 , 255 , 255 , 0.5 );
    }
                                                /* controle */
#abre_controle{
    background-image: url(../icone/opcao_vertical_branco.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    float: right;
    /*opacity: 0.26;*/
    opacity: 1;
    height: 48px;
    width: 48px;
}
#controle{
    background-color: #EEE;
    border-left: 1px solid #E0E0E0;
    box-shadow: 0 14px 28px rgba( 0 , 0 , 0 , 0.25 ), 0 10px 10px rgba( 0 , 0 , 0 , 0.22 );
    display: none;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 24px;
    position: fixed;
    right: -342px;
    top: 0;
    width: 342px;
    z-index: 8;
}
#controle.controle_aberto{
    display: block;
    right: 0;
}
    #controle > .ferramenta_controle{
        box-sizing: border-box;
        padding: 16px;
        width: 100%;
    }
    #controle > .ferramenta_controle:not(.oculto){
        margin-top: 64px;
    }
    #controle > .ferramenta_controle.oculto{
        display: none
    }
    #controle > .ferramenta_controle:not(.oculto) ~ .ferramenta_controle {
        border-top: 1px solid #E0E0E0;
        margin-top: 0;
    }
        #controle > .ferramenta > .elemento{
            margin: 0
        }
    #ferramenta_controle{
        height: 56px;
        padding: 4px;
        width: 100%;
    }
        #fecha_controle{
            background-image: url(../icone/fecha_preto.png);
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
            float: right;
            height: 48px;
            opacity: 0.26;
            width: 48px;
        }
        #fecha_controle:hover{
            opacity: 0.54
        }
                                               /* jquery.ui datepicker */
                                                /* diálogo */
#dialogo{
    background-color: #FAFAFA;
    border: 1px solid rgba(  0 , 0 , 0 , 0.12 );
    border-radius: 2px;
    box-shadow: 0 19px 38px rgba( 0 , 0 , 0 , 0.30 ), 0 15px 12px rgba( 0 , 0 , 0 , 0.22 );
    color: rgba( 0 , 0 , 0 , 0.54 );
    font-size: 16px;
    height: calc( 56px * 6 );
    left: 0;
    line-height: 24px; 
    min-height: calc( 56px * 6 );
    min-width: calc( 56px * 5 ); /* múltiplos de 56px, mínimo 5 */
    /*overflow: hidden;    */
    position: absolute;
    top: 0;
    width: calc( 56px * 8 );
    z-index: 24;
}
#overlay ~ #dialogo{
    background-color: #FFF;
    border: none;
}
    #dialogo > .loading_conteudo ~ * {
        display: none
    }
    #titulo_dialogo{
        box-sizing: border-box;
        color: rgba( 0 , 0 , 0 , 0.87 );
        font-size: 20px;
        font-weight: 500;
        left: 0;
        margin: 24px 24px 20px 24px;
        position: absolute;
        top: 0;
        width: calc( 100% - 48px )
    }
    #conteudo_dialogo{
        box-sizing: border-box;
        left: 0;
        /*overflow: hidden;*/
        padding: 24px 24px 24px 24px;
        position: absolute;
        width: 100%
    }
    #titulo_dialogo + #conteudo_dialogo{
        padding-top: 0;
        top: 68px
    }
    #conteudo_dialogo.ps-container{
        border-top: 1px solid #EAEAEA;
        padding-top: 24px !important
    }
    #conteudo_dialogo .ps-scrollbar-y-rail{
        opacity: 0.6 !important;
    }
    #dialogo > .barra{
        bottom: 0;
        left: 0;
        margin: 0;
        position: absolute;
    }
    #conteudo_dialogo.ps-container + .barra{
        border-top: 1px solid #EAEAEA
    }
    #dialogo label.botao:last-child{
        margin-right: 0
    }
                                                /* ferramentas */
#ferramenta{
    height: 64px;
    left: 0;
    padding: 8px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5
}
#ferramenta.imagem{
    background-color: transparent
}
.compacto > #ferramenta,
.oculto > #ferramenta{
    display: none
}
    #ferramenta > * {
        margin-left: 1px
    }
                                                /* botão flutuante */
.flutuante{
    border-radius: 50%;
    bottom: 48px;
    box-shadow: 0 10px 20px rgba( 0 , 0 , 0 , 0.19 ) , 0 6px 6px rgba( 0 , 0 , 0 , 0.23 );
    cursor: pointer;
    height: 56px;
    right: 48px;
    position: fixed;
    width: 56px;
    z-index: 12
}
.flutuante:hover:not(.velocity-animating){
    -o-transition: all 100ms;
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    box-shadow: 0 14px 28px rgba( 0 , 0 , 0 , 0.25 ) , 0 10px 10px rgba( 0 , 0 , 0 , 0.22 );
}
#controle.controle_aberto ~ .conteudo > .flutuante,
#controle.velocity-animating ~ .conteudo > .flutuante{
    display: none
}
    .icone_flutuante{
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
    }
    .icone_flutuante.adiciona{
        background-image: url(../icone/adiciona_branco.png);
    }
    .icone_flutuante.cancela{
        background-image: url(../icone/cancela_branco.png);
    }
    .icone_flutuante.edita{
        background-image: url(../icone/edita_branco.png);
    }
    .icone_flutuante.exclui{
        background-image: url(../icone/exclui_branco.png);
    }
    .icone_flutuante.grafico{
        background-image: url(../icone/grafico_branco.png);
    }
    .icone_flutuante.mapa{
        background-image: url(../icone/mapa_branco.png);
    }
                                                /* imagem de fundo do topo */
#imagem{
    background-color: #FFF;
    background-position: center;
    background-repeat: no-repeat;
    /*height: calc( 64px + 72px + 48px );*/
    height: calc( 64px + 48px );
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
    #degrade_imagem{
        background: rgba( 0 , 0 , 0 , 0.2 ) ;
        background: -webkit-linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
        background: -o-linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
        background: -moz-linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
        background: linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
        height: 100%;
        width: 100%
    }
                                                /* lateral */
#abre_navegador{
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    background-image: url(../icone/menu_branco.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    float: left;
    /*opacity: 0.26;*/
    opacity: 1;
    height: 48px;
    width: 48px;
}
#navegador{
    background-color: #FFF;
    box-shadow: 0 19px 38px rgba( 0 , 0 , 0 , 0.30 ) , 0 15px 12px rgba( 0 , 0 , 0 , 0.22 );
    display: none;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 24px;
    position: fixed;
    left: -320px;
    top: 0;
    width: 320px;
    z-index: 24;
}
#navegador.navegador_aberto{
    display: block;
    left: 0;
}
    #subtitulo_navegador{
        color: #FFF;
        font-size: 14px;
        height: 160px;
        width: 100%;
    }
        #subtitulo_navegador > .foto{
            background-color: rgba( 255 , 255 , 255 , 0.3 );
            background-image: url(../icone/pessoa_branco_48.png);
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 50%;
            height: 64px;
            left: 16px;
            opacity: 0.54;
            position: absolute;
            top: 24px;
            width: 64px;        
        }
        #subtitulo_navegador > .expande{
            background-image: url(../icone/seta_baixo_branco.png);
            background-position: center;
            background-repeat: no-repeat;
            bottom: 12px;
            cursor: pointer;
            height: 48px;
            opacity: 1;
            position: absolute;
            right: 4px;
            width: 48px;
        }
        #subtitulo_navegador > .expande.exibido{
            background-image: url(../icone/seta_cima_branco.png);
        }
        #subtitulo_navegador > .login{
            bottom: 20px;
            left: 16px;
            position: absolute;
        }
        #subtitulo_navegador > .nome{
            bottom: 40px;
            font-weight: 500;
            left: 16px;
            position: absolute;
        }
    #sessao,
    #usuario{
        display:none;
        padding: 8px 0;
        width: 100%
    }
    #usuario{
        border-top: 1px solid rgba( 0 , 0 , 0 , 0.12 )
    }
    #sessao.exibido,
    #usuario.exibido{
        display:block
    }
    #navegador.pesquisado > #sessao.exibido ~ *,
    #navegador > #sessao.exibido ~ .item.subitem.expandido,
    #sessao.exibido ~ *:not( #usuario ) {
        display: none
    }
        #sessao > span,
        #usuario > span{
            background-position: left 24px top 12px;
            background-repeat: no-repeat;
            display: block;
            font-weight: 500;
            line-height: 20px;
            opacity: 0.54;
            padding: 14px 24px 14px 72px;
            min-height: 48px;
            width: 100%;
        }
        #sessao > .computador{
            background-image: url(../icone/computador_preto.png);
        }
        #sessao > .ip{
            background-image: url(../icone/digital_preto.png);
        }
        #sessao > .matricula{
            background-image: url(../icone/identidade_preto.png);
        }
        #usuario > .acesso{
            background-image: url(../icone/chave_preto.png);
        }
        #usuario > .administrador{
            background-image: url(../icone/administrador_preto.png);
        }
        #usuario > .anonimo{
            background-image: url(../icone/publico_preto.png);
        }
        #usuario > .gestor{
            background-image: url(../icone/gestor_preto.png);
        }
        #usuario > .usuario{
            background-image: url(../icone/usuario_preto.png);
        }
    #navegador .divisoria{
        padding: 8px 0
    }
    #navegador .divisoria + .divisoria {
        border-top: 1px solid rgba( 0 , 0 , 0 , 0.12 )
    }
    #ajuda_navegador,
    #configura_navegador,
    #pesquisa_navega,
    #comentario_navegador{
        -moz-transition: all 0.1s ease;
        -ms-transition: all 0.1s ease;
        -o-transition: all 0.1s ease;
        -webkit-transition: all 0.1s ease;
        transition: all 0.1s ease;
        cursor: default;
        height: 48px;
        font-weight: 500;
        line-height: 48px;
        padding-left: 72px;
        width: 100%;
    }
    .lista_navegador{
        background-color: #FFF;
        box-sizing: border-box;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }
        .lista_navegador > li{
            box-sizing: border-box;
            display: block;
            font-size: 13px;
            line-height: 48px;
            overflow: hidden;
            padding-left: 72px;
            position: relative;
            width: 100%;
        }
        .lista_navegador .expande{
            background-color: #FFF;
            cursor: pointer;
            font-weight: 500;
            height: 48px;
            padding-left: 72px;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            -webkit-font-smoothing: antialiased;
        }
        .lista_navegador .expande.ativo{
            -moz-transition: all 0.1s ease;
            -ms-transition: all 0.1s ease;
            -o-transition: all 0.1s ease;
            -webkit-transition: all 0.1s ease;
            transition: all 0.1s ease;
            background-color: #EEE;
        }
            .lista_navegador > li > .lista_navegador{
                display: none;
                margin-left: -72px;
                padding-left: 24px;
            }
                .lista_navegador > li > .lista_navegador > li{
                    padding-left: 72px;
                }
            .lista_navegador > li.expandido > .lista_navegador{
                display: block
            }
            .lista_navegador .icone{
                -moz-transition: all 0.1s ease;
                -ms-transition: all 0.1s ease;
                -o-transition: all 0.1s ease;
                -webkit-transition: all 0.1s ease;
                transition: all 0.1s ease;
                background-position: center;
                background-repeat: no-repeat;
                height: 40px;
                left: 8px;
                opacity: 0.87;
                position: absolute;
                top: 4px;
                width: 40px
            }
    .pesquisado .lista_navegador{
        display: block !important
    }
    .pesquisado .pesquisa_negativa{
        display: none
    }
    #ajuda_navegador,
    #configura_navegador,
    #pesquisa_navega,
    #comentario_navegador{
        background-position: left 16px center;
        background-repeat: no-repeat;
        cursor: pointer;
        opacity: 0.87;
        padding-left: 72px;
    }
    #ajuda_navegador.desabilitado,
    #configura_navegador.desabilitado,
    #comentario_navegador.desabilitado{
        cursor: default;
        opacity: 0.26
    }
    #ajuda_navegador.desabilitado:hover,
    #configura_navegador.desabilitado:hover,
    #comentario_navegador.desabilitado:hover{
        opacity: 0.26
    }
    #ajuda_navegador{
        background-image: url(../icone/ajuda_preto.png);
    }
    #configura_navegador{
        background-image: url(../icone/configuracoes_preto.png);
    }
    #pesquisa_navega{
        background-image: url(../icone/pesquisa_preto.png);
        cursor: default;
        margin-bottom: 8px;
    }
    #comentario_navegador{
        background-image: url(../icone/sugestao_preto.png);
    }
    #pesquisa_navega:focus{
        opacity: 0.87
    }
                                                /* notificação */
#notificacao{
    background-color: #EEEEEE;
    color: rgba( 0 , 0 , 0 , 0.38 );
    font-weight: 500;
    height: 48px;
    line-height: 48px;
    padding-left: 72px;
    width: 100%;
}
    #icone_notificacao{
        background-position: center;
        background-repeat: no-repeat;
        height: 48px;
        left: 24px;
        opacity: 0.26;
        position: absolute;
        top: 0;
        width: 48px;
    }
    .atualizacao > #icone_notificacao{
        background-image: url(../icone/atualiza_preto.png)
    }
    .backup > #icone_notificacao{
        background-image: url(../icone/backup_preto.png)
    }
    .desenvolvimento > #icone_notificacao{
        background-image: url(../icone/cria_preto.png)
    }
    .manutencao > #icone_notificacao{
        background-image: url(../icone/manutencao_preto.png)
    }
    #notificacao > .botao{
        background-color: transparent;
        height: 36px;
        position: absolute;
        right: 8px;
        top: 6px;
        width: 36px;
    }
                                                /* opcao */
#opcao{
    background-color: #FFF;
    box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 0.12 ) , 0 1px 2px rgba( 0 , 0 , 0 , 0.24 );
    left: 0;
    padding: 16px 0;
    position: fixed;
    top: 0;
    z-index: 2
}
#opcao.comprimento_1{
    width: 64px
}
#opcao.comprimento_2{
    width: 128px
}
#opcao.comprimento_3{
    width: 192px
}
#opcao.comprimento_4{
    width: 256px
}
    #opcao > .divisoria_opcao{
        border-top: 1px solid #E6E6E6;
        height: 0;
        margin: 8px 0;
        width: 100%;
    }
    #opcao > .item_opcao{
        -moz-transition: background-color 0.1s ease;
        -ms-transition: background-color 0.1s ease;
        -o-transition: background-color 0.1s ease;
        -webkit-transition: background-color 0.1s ease;
        transition: background-color 0.1s ease;
        font-size: 15px;
        height: 32px;
        width: 100%;
    }
    #opcao > .item_opcao:hover,
    #opcao > .item_opcao:active,
    #opcao > .item_opcao:focus{
        background-color: #EEE;
    }
        #opcao input{
            display: none
        }
        #opcao .item_icone{
            background-position: center;
            background-repeat: no-repeat;
            height: 32px;
            left: 17px;
            opacity: 0.54;
            position: absolute;
            width: 32px;
            z-index: 0
        }
        #opcao .item_icone.editar{
            background-image: url(../icone/edita_preto_18.png)
        }
        #opcao .item_icone.excluir{
            background-image: url(../icone/exclui_preto_18.png)
        }
        #opcao input:disabled ~ .item_icone{
            opacity: 0.38;
        }
        #opcao label{
            color: rgba( 0 , 0 , 0 , 0.87 );
            cursor: pointer;
            display: block;
            float: left;
            height: 100%;
            padding: 7px 24px;
            position: absolute;
            text-align: left;
            width: 100%;
            z-index: 1
        }
        #opcao .item_icone + label{
            padding-left: 66px
        }
        #opcao input:disabled ~ label{
            color: rgba( 0 , 0 , 0 , 0.38 )
        }
                                                /* overlay */
#overlay{
    background-color: rgba( 0 , 0 , 0 , 0.4 );
    display: table;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 23;
}

#icone_sair{
    background-image: url(../Imagens/sair_branco_sm.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    float: right;
    /*opacity: 0.26;*/
    opacity: 1;
    height: 48px;
    width: 48px;
}

#icone_senha{
    background-image: url(../Imagens/senha_branco_sm.png);
    background-position: center;
    background-repeat: no-repeat;
	margin-right:100px;
    cursor: pointer;
    float: right;
    /*opacity: 0.26;*/
    opacity: 1;
    height: 48px;
    width: 48px;
}                                                /* pesquisa */

#icone_sistema{
    background-image: url(../Imagens/web/add_1x.png);
    background-position: center;
    background-repeat: no-repeat;
	margin-right:100px;	
    cursor: pointer;
    float: right;
    /*opacity: 0.26;*/
    opacity: 1;
    height: 48px;
    width: 48px;
}   

#pesquisa{
    border-radius: 2px;
    display: none;
    height: 48px;
    overflow: visible;
    position: absolute;
    right: 48px;
    top: 8px;
    width: 48px;
    z-index: 3
}
#pesquisa.autocomplete_aberto{
    border-radius: 2px 2px 0 0;
}
    #texto_pesquisa{
        color: rgba( 0 , 0 , 0 , 0.38 );
        font-size: 20px;
        height: 100%;
        left: 48px;
        line-height: 48px;
        position: absolute;
        top: 0;
    }
    #abre_pesquisa,
    #icone_pesquisa,
    #fecha_pesquisa{
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        height: 48px;
        opacity: 0.26;
        top: 0;
        width: 48px;
    }
    #abre_pesquisa{
        background-image: url(../../aplicacao/icone/pesquisa_branco.png);
        float: right;
        opacity: 1;
    }
    #icone_pesquisa{
        background-image: url(../../aplicacao/icone/pesquisa_preto.png);
        cursor: default;
        left: 0;
        position: absolute;
    }
    #fecha_pesquisa{
        background-image: url(../../aplicacao/icone/fecha_preto.png);
        display: none;
        position: absolute;
        right: 0;
    }
    #fecha_pesquisa:hover{
        -moz-transition: all 100ms;
        -ms-transition: all 100ms;
        -o-transition: all 100ms;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        opacity: 0.54;
    }
    #input_pesquisa{
        background-color: transparent;
        border: 0;
        color: rgba( 0 , 0 , 0 , 0.87 );
        display: none;
        font-size: 20px;
        font-weight: 400;
        height: 100%;
        left: 48px;
        line-height: 24px;
        position: absolute;
        top: 0;
        width: calc( 100% - 48px - 48px );
    }
    #pesquisa > .ui-autocomplete{
        background-color: rgba( 255 , 255 , 255 , 1 );
        border: none;
        border-radius: 0 0 2px 2px;
        box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 0.12 ), 0 1px 2px rgba( 0 , 0 , 0 , 0.24 );
        padding-bottom: 8px;
        padding-top: 8px;
        margin-bottom: 4px;
        max-height: calc( 100vh - 48px - 16px );
        overflow: hidden;
        position: relative;
        width: calc( 100% - 1px );
        z-index: 3;
    }
        #pesquisa > .ui-autocomplete > li {
            border: 0 !important;
            box-sizing: border-box;
            height: 72px;
            padding: 20px;
            position: relative;
        }
        #pesquisa > .ui-autocomplete > .ui-state-focus{
            color: rgba( 0 , 0 , 0 , 0.54 ) !important;
        }
        #pesquisa .ps-scrollbar-y-rail{
            opacity: 0.6 !important;
        }
        .pesquisa_label{
            color: rgba( 0 , 0 , 0 , 0.87 );
            font-size: 15px;
            left: 20px;
            line-height: 16px;
            position: absolute;
            top: 20px;
        }
        .pesquisa_complemento{
            bottom: 20px;
            color: rgba( 0 , 0 , 0 , 0.54 );
            font-size: 13px;
            font-weight: 500;
            left: 20px;
            line-height: 14px;
            position: absolute;
        }
#pesquisa.expandido{
    background-color: rgba( 255 , 255 , 255 , 1 );
    box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 0.12 ), 0 1px 2px rgba( 0 , 0 , 0 , 0.24 );
    display: block;
    left: 8px;
    width: calc( 100% - 16px );
    z-index: 24;
}
    #pesquisa.expandido > #fecha_pesquisa,
    #pesquisa.expandido > #input_pesquisa{
        display: block
    }
                                                /* titulo */
#titulo{
    font-size: 24px;
    font-weight: 400;
    height: 64px;
    left: 80px;
    line-height: 64px;
    position: fixed;
    top: 0;
    z-index: 5
}
.compacto > #titulo,
.oculto > #titulo{
    display: none
}
.estendido > #titulo{
    font-size: 34px;
    height: 72px;
    left: auto;
    line-height: 72px;
    padding-left: 72px;
    top: 64px;
    width: 100%;
}
#titulo.imagem{
    background-color: transparent
}
                                                /* alternador */
.alternador{
    padding: 8px 0;
}
td > .alternador{
    padding: 0
}
.alternador_base{
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    background-color: rgba( 0 , 0 , 0 , 0.38 );
    border-radius: 7px;
    height: 14px;
    overflow: hidden;
    position: absolute;
    right: 12px;
    top: 11px;
    width: 32px;
}
.alternador_input:checked ~ .alternador_titulo > .alternador_base{
    background-color: #FFF;
}
    .alternador_base_preenchimento{
        -moz-transition: all 100ms;
        -ms-transition: all 100ms;
        -o-transition: all 100ms;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        border-radius: 8px;
        height: 100%;
        opacity: 0.54;
        position: absolute;
        width: 0;
    }
    .alternador_input:checked ~ .alternador_titulo > .alternador_base > .alternador_base_preenchimento{
        width: 100%;
    }
    .alternador.desabilitado .alternador_base{
        background-color: rgba( 0 , 0 , 0 , 0.12 ) !important
    }
    .alternador.desabilitado .alternador_base_preenchimento{
        display: none
    }
.alternador_botao{
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    background: none;
    background-color: #FAFAFA;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 0.12 ), 0 1px 2px rgba( 0 , 0 , 0 , 0.24 );
    height: 20px;
    outline: none;
    position: absolute;
    right: 29px;
    top: 8px;
    width: 20px;
    z-index: 2;
}
.alternador.desabilitado .alternador_botao{
    background-color: #BDBDBD !important
}
.alternador_input:checked ~ .alternador_titulo > .alternador_botao{
    box-shadow: 0 3px 6px rgba( 0 , 0 , 0 , 0.16 ), 0 3px 6px rgba( 0 , 0 , 0 , 0.23 );
    right: 7px;
}
.alternador_input{
    display: none
}
.alternador_titulo{
    color: rgba( 0 , 0 , 0 , 0.54 );
    display: block;
    height: 36px;
    line-height: 36px;
    text-align: left;
    width: 100%;
}
                                                /* anexo */
.anexo:not(input){
    cursor: pointer;
    height: 48px;
    line-height: 18px;
    margin-left: 72px;
    padding-top: 6px;
}
.email .anexo{
    cursor: default
}
    .detalhes_anexo{
        /*color: rgba( 0 , 0 , 0 , 0.54 );*/
        color: #757575;
        display: block;
        margin-left: 48px;
        width: calc( 100% - 48px );
    }
    .icone_anexo{
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(../icone/arquivo_preto.png);
        height: 48px;
        left: 0;
        opacity: 0.54;
        position: absolute;
        top: 0;
        width: 48px;
    }
    .email .icone_anexo{
        background-image: url(http://www.pinhais.pr.gov.br/aplicacao/icone/arquivo_preto.png);
    }
    .titulo_anexo{
        display: block;
        font-weight: 500;
        margin-left: 48px;
        width: calc( 100% - 48px );
    }
                                                /* arquiva */
.arquiva{
    background-image: url(../icone/arquiva_preto.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    float: left;
    height: 48px;
    opacity: 0.26;
    width: 48px;
}
.arquiva:hover{
    opacity: 0.54;
}
.arquiva.oculto{
    display: none
}
                                                /* atualiza */
.atualiza{
    -moz-transition: background-color 100ms;
    -ms-transition: background-color 100ms;
    -o-transition: background-color 100ms;
    -webkit-transition: background-color 100ms;
    transition: background-color 100ms;
    background-image: url(../icone/atualiza_preto.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    float: left;
    height: 48px;
    opacity: 0.26;
    width: 48px;
}
.atualiza:hover{
    opacity: 0.54;
}
.atualiza.oculto{
    display: none
}

    svg.tempo_circulo{
        height: 100%;
        width: 100%;
    }
        svg.tempo_circulo > circle{
            cx: 50%;
            cy: 50%;
            fill: none;
            r: 16;
            stroke: rgba( 0 , 0 , 0 , 1 );
            stroke-dasharray: 100.48;
            /*stroke-dasharray: calc( 3.14 * 16 * 2 );*/
            /*stroke-dashoffset: 0;*/
            stroke-miterlimit: 10;
            stroke-width: 2;
        }
                                                /* autocomplete */
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-widget-content {
	background-image: none;
}
.ui-autocomplete{
    box-shadow: 0 3px 6px rgba( 0 , 0 , 0 , 0.16 ), 0 3px 6px rgba( 0 , 0 , 0 , 0.23 );
    box-sizing: border-box;
    width: 100%;
}
.ui-autocomplete .ui-menu-item{
    -moz-transition: background-color 100ms;
    -ms-transition: background-color 100ms;
    -o-transition: background-color 100ms;
    -webkit-transition: background-color 100ms;
    transition: background-color 100ms;
    background-color: #FFF !important;
    border: 1px solid transparent;
    box-sizing: border-box !important;
    color: rgba( 0 , 0 , 0 , 0.54 ) !important;
    font-family: Roboto, arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 22px !important;
    min-height: 36px;
    padding: 5px 10px;
}
.ui-autocomplete .ui-state-focus{
    background-color: rgba( 238 , 238 , 238 , 1 ) !important;
    border: 1px solid transparent !important;
    color: rgba( 0 , 0 , 0 , 0.87 ) !important;
    font-weight: normal !important;
    margin: 0;
}
.ui-autocomplete.navegador{
    max-height: 216px;
    overflow: hidden
}
.elemento .ui-autocomplete{
    max-height: 280px;
    overflow: hidden
}
.ui-autocomplete.navegador .ps-scrollbar-y-rail,
.elemento .ui-autocomplete .ps-scrollbar-y-rail{
    opacity: 0.6 !important;
    right: 0
}
                                                /* barra de botões */
.barra:not(.grafico){
    height: 52px;
    margin-top: 24px;
    padding: 8px;
    text-align: right;
    width:  100%;
}
.tabela ~ .barra{
    margin-top: 0
}
.email .barra{
    display: none
}
    .barra input[type=checkbox]{
        display: none
    }
                                                /* botao , botao_elevado , botao_icone , checkbox */
.botao_checkbox{
    display: none
}
.botao,
.botao_elevado,
.checkbox,
.radio{
    color: rgba( 0 , 0 , 0 , 0.54 );
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    /*margin: 0 8px;*/
    margin: 0;
    padding: 0 16px;
}
.botao,
.botao_elevado{
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    border-radius: 2px;
    font-weight: 500;
/*    min-width: 88px;*/
    text-transform: uppercase;
}
#controle .botao,
#controle .botao_elevado,
#controle .checkbox{
    font-size: 13px;
    height: 32px;
    line-height: 32px;
}
#controle .botao_elevado,
#controle .checkbox{
    min-width: 64px;    
}
.botao:active,
.botao:hover{
    /*background-color: rgba( 3 , 169 , 244 , 0.26 )*/
    background-color: rgba( 0 ,  0 ,  0 , 0.05 )
}
:disabled + .botao{
    color: rgba( 0 , 0 , 0 , 0.26 );
    background-color: transparent
}
.botao_elevado{
    color: #FFF;
}
.botao_elevado:active{
    box-shadow: 0 10px 20px rgba( 0 , 0 , 0 , 0.19 ), 0 6px 6px rgba( 0 , 0 , 0 , 0.23 ) !important;
}
.botao_elevado:hover{
    box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 0.12 ), 0 1px 2px rgba( 0 , 0 , 0 , 0.24 );
}
:disabled + .botao_elevado{
    color: rgba( 0 , 0 , 0 , 0.26 );
    background-color: rgba( 0 , 0 , 0 , 0.12 )
}
:disabled + .botao_elevado:active,
:disabled + .botao_elevado:hover{
    box-shadow: none !important
}
.botao + [type=checkbox] + .botao,
.botao + [type=checkbox] + .botao_elevado,
.botao + [type=checkbox] + .checkbox,
.botao + [type=radio] + .radio,
.botao_elevado + [type=checkbox] + .botao,
.botao_elevado + [type=checkbox] + .botao_elevado,
.botao_elevado + [type=checkbox] + .checkbox,
.botao_elevado + [type=radio] + .radio,
.checkbox + [type=checkbox]:not(.exibe_coluna) + .checkbox,
.checkbox + [type=radio]:not(.exibe_coluna) + .radio,
.checkbox + [type=checkbox] + .botao,
.checkbox + [type=checkbox] + .botao_elevado{
    /*margin-left: 0px;*/
    margin-left: 8px;
    margin-top: 1px;
}
.botao_icone{
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    -webkit-transition: all 100ms;
    transition: all 100ms;
	border-radius: 50%;
    cursor: pointer;
    height: 48px;
    min-width: auto;
    opacity: 0.26;
	padding: 0;
    width: 48px;
}
.botao_icone:active,
.botao_icone:hover{
    opacity: 0.54;
}
.botao_icone.cancela2{
    background-image: url(../icone/cancela2_preto_18.png)
}
.botao_icone.estrela{
    background-image: url(../icone/estrela_preto.png)
}
.botao_icone.mapa{
    background-image: url(../icone/mapa_preto.png)
}
.botao_icone.upload{
    background-image: url(../icone/upload_branco.png)
}
.botao_icone.visualiza{
    background-image: url(../icone/visualiza_preto.png)
}
:checked + .botao_icone.estrela{
    background-image: url(../icone/estrela_ativo_preto.png)
}
:checked + .botao_icone.visualiza{
    background-image: url(../icone/visualiza_ativo_preto.png)
}
.botao_icone.coluna{
    background-image: url(../icone/coluna_preto.png)
}
.botao_icone.linha{
    background-image: url(../icone/linha_preto.png)
}
.botao_icone.modulo{
    background-image: url(../icone/modulo_preto.png)
}
.botao_grupo,
.botao_grupo.botao_icone{
    border-radius: 0;
    height: 100%;
}
:checked + .botao_grupo,
:checked + .botao_grupo.botao_icone{
    background-color: rgba( 0 , 0 , 0 , 0.26 );
    opacity: 0.54;
}
.checkbox,
.radio{
    line-height: 36px !important;
    padding-left: 48px;
}
.checkbox > .icone_opcao,
.radio > .icone_opcao{
    background-image: url(../../aplicacao/icone/unchecked_preto.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    height: 48px;
    /*left: -6px;*/
    left: 0;
    opacity: 0.54;
    position: absolute;
    top: -6px;
    width: 48px;
}
.radio > .icone_opcao{
    background-image: url(../../aplicacao/icone/unchecked_radio_preto.png);
}
.selecionado .radio > .icone_opcao{
    background-image: url(../../aplicacao/icone/unchecked_radio_branco.png);
    opacity: 1
}
.checkbox:active > .icone_opcao,
.radio:active > .icone_opcao{
    background-color: rgba( 0 , 0 , 0 , 0.12 );
}
:checked + .checkbox{
    color: rgba( 0 , 0 , 0 , 0.87 )
}
:checked + label > .icone_opcao{
    opacity: 1;
}
:checked + .checkbox:active > .icone_opcao,
:checked + .radio:active > .icone_opcao{
    background-color: rgba( 3 , 169 , 244 , 0.12 );
}
:disabled + .checkbox > .icone_opcao,
:disabled + .radio > .icone_opcao{
    background-image: url(../../aplicacao/icone/checked_preto.png);
    opacity: 0.26
}
:disabled + .radio > .icone_opcao{
    background-image: url(../../aplicacao/icone/checked_radio_preto.png);
}
                                                /* cabeçalho */
.cabecalho{
    background-position: center;
    background-repeat: no-repeat;
    display: table;
    height: 128px;
    text-align: center;
    width: 100%;
}
.redacao > .cabecalho{
    margin-top: -16px;
}
.degrade_cabecalho{
    background: rgba( 0 , 0 , 0 , 0.2 ) ;
    background: -moz-linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
    background: -ms-linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
    background: -o-linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
    background: -webkit-linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
    background: linear-gradient( rgba( 0 , 0 , 0 , 0 ) 0% , rgba( 0 , 0 , 0 , 0.2 ) 70% , rgba( 0 , 0 , 0 , 0.4 ) 100% );
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1
}
.imagem_cabecalho{
    display: inline-block;
}
.imagem_cabecalho > img{
    max-height: 128px
}
.texto_cabecalho{
    bottom: 0;
    color: #FFF;
    font-size: 24px;
    left: 0;
    padding: 0 0 16px 16px;
    position: absolute;
    z-index: 2
}
.email .cabecalho{
    background-image: none;
    height: 56px;
}
.email .texto_cabecalho{
    color: rgba( 0 , 0 , 0 , 0.87 );
    padding: 0 0 16px 24px
}
                                                /* cartao */
.cartao{
    -o-transition: all 100ms;
    -webkit-transition: all 100ms;
    -ms-transition: all 100ms;
    -moz-transition: all 100ms;
    transition: all 100ms;
    border-radius: 2px;
    display: inline-block;
    height: 170px;
    margin: 4px;
    padding: 24px;
    width: calc( 178px - 8px )
}
.cartao.conteudo{
    background-color: #FFF;
    margin: 0 64px 0 64px;
    max-width: calc( 100% - 128px );
    min-height: 0;
    padding: 0;
}
.cartao.conteudo + .cartao.conteudo{
    margin-top: 8px;
}
.cartao:hover{
    box-shadow: 0 14px 28px rgba( 0 , 0 , 0 , 0.25 ) , 0 10px 10px rgba( 0 , 0 , 0 , 0.22 );
}
.cartao.elevado{
    box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 0.12 ), 0 1px 2px rgba( 0 , 0 , 0 , 0.24 );
}
.cartao.elevado:not( .background-color_500 , .conteudo ){
    background-color: #FAFAFA;
}
.cartao.tamanho_2{
    height: auto;
    width: calc( ( 178px * 2 ) - 8px )
}
.cartao.unico{
    display: block;
    margin: auto;
}
.painel > .controle > .cartao{
    margin: 11px;
}
    .cartao > .icone_cartao{
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
    }
    .cartao.conteudo > .icone_cartao{
        border-radius: 50%;
        height: 40px;
        left: 16px;
        position: absolute;
        top: 16px;
        width: 40px
    }
    .cartao > .icone_cartao.apresentacao{
        background-image: url(../icone/rosto_branco_48.png)
    }
    .cartao > .icone_cartao.aula{
        background-image: url(../icone/escola_branco_48.png)
    }
    .cartao > .icone_cartao.comunicacao{
        background-image: url(../icone/conversa_branco_48.png)
    }
    .cartao > .icone_cartao.escola{
        background-image: url(../icone/escola_branco.png)
    }
    .cartao > .icone_cartao.identidade{
        background-image: url(../icone/identidade_branco.png)
    }
    .cartao > .icone_cartao.oficina{
        background-image: url(../icone/pincel_branco_48.png)
    }
    .cartao > .icone_cartao.palestra{
        background-image: url(../icone/microfone_branco_48.png)
    }
    .cartao > .titulo_cartao{
        bottom: 16px;
        font-size: 20px;
        left: 16px;
        position: absolute;
    }
    .cartao > .titulo_cartao:not(.color_500){
        color: #FFF;
    }
    .cartao > .titulo_cartao.subtitulo{
        font-size: 15px
    }
    .cartao.conteudo > .titulo_cartao{
        border-bottom: 1px solid rgba( 0 , 0 , 0 , 0.12 );
        bottom: auto;
        height: 64px;
        left: auto;
        line-height: 32px;
        padding: 16px 14px 16px 24px ;
        position: relative;
        width: 100%
    }
    .cartao.conteudo > .titulo_cartao:not(.color_500){
        color: rgba( 0 , 0 , 0 , 0.87 );
    }
    .cartao.conteudo > .titulo_cartao > .filtro{
        left: 8px;
        position: absolute;
        top: 8px;
        width: calc( 100% - 96px - 16px);
        z-index: 1
    }
    .cartao.conteudo > .icone_cartao + .titulo_cartao{
        color: rgba( 0 , 0 , 0 , 0.87 );
        font-size: 14px;
        font-weight: 500;
        height: 72px;
        left: 0;
        padding: 16px 16px 16px 72px;
        top: 0;
        width: 100%
    }
    .cartao > .botao_cartao{
        -o-transition: all 100ms;
        -webkit-transition: all 100ms;
        -ms-transition: all 100ms;
        -moz-transition: all 100ms;
        transition: all 100ms;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        height: 24px;
        right: 16px;
        opacity: 0.54;
        position: absolute;
        top: 20px;
        width: 24px
    }
    .cartao > .botao_cartao:not(.oculto) ~ .botao_cartao:not(.oculto){
        right: 64px
    }
    .cartao > .botao_cartao.adiciona{
        background-image: url(../icone/adiciona2_preto.png?)
    }
    .cartao > .botao_cartao.exclui{
        background-image: url(../icone/exclui_preto.png?);
    }
    .cartao > .botao_cartao.filtra{
        background-image: url(../icone/filtro_preto.png)
    }
    .cartao > .botao_cartao.oculto{
        display: none
    }
    .conteudo.boleto > .cartao{
        width: 180px
    }
                                                /* checkbox */
.input_checkbox{
    display: none;
}
                                                /* checklist */
.checklist.rola{
    max-height: 200px;
    padding-bottom: 8px
}
.checklist.expandido{
    max-height: none;
}
.checklist > label.checkbox{
    display: none;
    margin-left: 0 !important;
    overflow: hidden;
    padding-bottom: 8px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.checklist > input:checked + label.checkbox,
.checklist.expandido > label.checkbox{
    display: inline-block
}
.checklist.ps-container > .ps-scrollbar-y-rail{
    opacity: 0.26
}
.checklist.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y{
    width: 4px !important
}
                                                /* combo */
.texto_combo{
    display: block;
    font-size: 15px;
    text-align: center
}
.texto_combo.erro{
    color: #F44336;
    font-weight: 500
}
                                                /* configurações */
.configuracao{
    background-color: #FAFAFA;
    min-height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 25
}
/*.configuracao.exibido ~ *:not( #dialogo ):not( #ui-datepicker-div ) {
    display: none !important
}*/
.conteudo_configuracao{
    margin-bottom: 24px;
}
.fecha_configuracao{
    background-image: url(../icone/retorna_branco.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 48px;
    left: 8px;
    opacity: 1;
    position: absolute;
    top: 8px;
    width: 48px;
}
.titulo_configuracao{
    color: #FFF;
    font-size: 20px;
    height: 64px;
    line-height: 32px;
    padding: 16px  16px 16px 72px;
    width: 100%;
}
    .conteudo_configuracao > .cartao.conteudo{
        margin-top: 24px;
    }
    .conteudo_configuracao > .cartao + .cartao{
        margin-top: 8px
    }
    .conteudo_configuracao > .item{
        -moz-transition: all 100ms;
        -ms-transition: all 100ms;
        -o-transition: all 100ms;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        border-bottom: 1px solid rgba( 0 , 0 , 0 , 0.12 );
        color: rgba( 0 , 0 , 0 , 0.54 );
        font-size: 14px;.
        font-weight: 500;
        line-height: 56px;
        padding-left: 72px;
        position: relative;
        width: 100%;
    }
    .conteudo_configuracao > .item.link:hover{
        background-color: #EEE
    }
    .conteudo_configuracao > .item.link{
        cursor: pointer;
        height: 56px;
    }
    .conteudo_configuracao > .item > .icone{
        background-position: center;
        background-repeat: no-repeat;
        height: 48px;
        left: 8px;
        opacity: 0.54;
        position: absolute;
        top: 4px;
        width: 48px;
    }
    .conteudo_configuracao .conteudo_item{
        padding-bottom: 24px
    }
                                                /* conteudo */
.conteudo{
    display: inline-block;
    height: calc( 100% - 72px - 56px - 48px );
    min-height: calc( 100vh - 64px - 48px );
    padding-top: 0px;       /* para considerar a margin interna */
    vertical-align: top;
    width: 100%;
}
.oculto .conteudo{
	height: 100vh;
	min-height: 100vh;
}
#notificacao ~.conteudo{
    min-height: calc( 100vh - 64px - 48px - 48px );
}
.conteudo:after{            /* remove float do último elemento */
    clear: both;
    content: "."; 
    display: block; 
    font-size: 0;
    height: 0; 
    visibility: hidden; 
}
.conteudo.boleto{
    padding-top: 16px
}
.conteudo.falso{
    background-color: #F5F5F5;
    bottom: 0;
    height: 100% !important;
    left: 0;
    position: absolute;
    width: 192px;
    z-index: -2
}
.conteudo.oculto{
    display: none !important
}
.conteudo.organograma{
    min-width: 100vw
}
.conteudo.tabela{
    overflow-x: auto
}
.conteudo.width_100{
    width: 100%
}
.possui_abas > .conteudo + .conteudo{
    margin-top: 0
}
                                                /* elementos de form: input, select, etc */
.elemento{
    display: inline-block;
    margin-left: 8px;
    min-height: 72px;
    padding: 0;
    vertical-align: top
}
.elemento.tamanho_05{
    width: 88px
}
.elemento.tamanho_0{
    display: none !important;
}
.elemento.tamanho_s{
    width: 100px
}
.elemento.tamanho_1{
    width: 180px
}
.elemento.tamanho_2{
    width: 374px
}
.elemento.tamanho_3{
    width: 568px
}
.elemento.tamanho_4{
    width: 760px
}

fieldset.grupo .elemento {
		float:  left;
		margin-right: 1em;
}

.cartao .elemento{
    width: calc( 100% - 8px )
}
.configuracao .conteudo_item .elemento{
    margin-left: 0;
    width: 100%
}
    .elemento > label:not( .botao_icone ){
        transition: all 0.2s ease;
        color: rgba( 0 , 0 , 0 , 0.54 ); 
        display: block;
        font-size: 15px;
        font-weight: 400;
        left: 0;
        line-height: 16px;
        /*pointer-events: none;*/
        position: absolute;
        top: 36px;
        z-index: -1;
    }
    .elemento > label.checkbox{
        z-index: 0
    }
    .elemento > label.label_tabela{
        top: 8px
    }
    .elemento > input[ type = 'text' ],
    .elemento > select,
    .elemento > textarea{
        background-color: transparent;
        border: none;
        border-bottom: 1px solid rgba( 0 , 0 , 0 , 0.87 );
        box-sizing: border-box;
        color: rgba( 0 , 0 , 0 , 0.87 );
        display: block;
        font-size: 15px;
        left: 0;
        margin: 0;
        padding: 0 24px 7px 0;
        position: absolute;
        top: 36px;
        width: 100%;
        /*z-index: 1;*/
    }
    .elemento > input[ type = 'text' ]:disabled,
    .elemento > select:disabled{
        color: rgba( 0 , 0 , 0 , 0.54 );
        border-bottom: 1px dotted rgba( 0 , 0 , 0 , 0.30 )
    }
    .elemento > iframe,
    .elemento > input[ type = 'checkbox' ]{
        display: none
    }
    .elemento > input[ type = 'checkbox' ] + label + input[ type = 'text' ]{
        left: 48px;
        width: calc( 100% - 48px);
    }
    .elemento > input[ type = 'checkbox' ] + label + input[ type = 'text' ] + label{
        left: 48px
    }
    .elemento > .botao_elevado.botao_icone{
        background-color: #03A9F4;
        position: absolute;
        top: 28px;
    }
        .elemento > select ~ .icone{
            display: none;
            right: 0;
            top: 24px;
        }
        .elemento > select:disabled ~ .icone{
            display: block;
            background-image: url(../icone/cadeado_preto_18.png)
        }
    .elemento > input[ type = 'text']:focus,
    .elemento > select:focus,
    .elemento > textarea:focus{
        border-bottom: 2px solid;
        outline: none;
        padding-bottom: 6px !important;
    }
    .elemento > select:focus{
        padding-bottom: 4px !important
    }
    .elemento > input[ type = 'text']:focus ~ label,
    .elemento > select:focus ~ label,
    .elemento > textarea:focus ~ label,
    .elemento > input[ type = 'text'].preenchido ~ label,
    .elemento > select.preenchido ~ label,
    .elemento > textarea.preenchido ~ label,
    .elemento > .tabela_formulario ~ label,
    .elemento > label.reduzido{
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;
        font-size: 12px;
        line-height: 12px;
        top: 16px;
    }
    .elemento > input:read-only{
        padding-right: 24px
    }
    .elemento > input:read-only,
    .elemento > input:read-only:focus,
    .elemento > textarea:read-only,
    .elemento > textarea:read-only:focus{
        border-bottom-color: rgba( 0 , 0 , 0 , 0.30 ) !important;
        border-bottom-style: dotted;
        color: rgba( 0 , 0 , 0 , 0.70 );
    }
    .elemento > input:read-only:focus + label,
    .elemento > textarea:read-only:focus + label{
        color: rgba( 0 , 0 , 0 , 0.54 ) !important
    }
    .elemento > select{
        padding: 0 0 6px 0;
    }
    .elemento > textarea.somente_leitura{
        padding-right: 24px
    }
    .elemento > .icone{
        background-position: center;
        background-repeat: no-repeat;    
        box-sizing: border-box;
        display: block;
        height: 18px;
        opacity: 0.37;
        position: absolute;
        right: 0px;
        top: 36px;
        width: 18px;
    }
    #controle .elemento > .icone{
        top: 24px
    }
    .elemento > input.somente_leitura ~ .icone,
    .elemento > textarea.somente_leitura ~ .icone{
        background-image: url(../icone/cadeado_preto_18.png)
    }
    .elemento > .icone.limpa{
        background-image: url(../icone/fecha_preto_18.png);
        display: none;
        z-index: 1
    }
    .elemento > .icone.limpa:hover{
        opacity: 0.87
    }
    .elemento > .preenchido ~ .icone.limpa{
        display: block
    }
    .elemento > .calendario_icone{
        background-image: url(../icone/calendario_preto.png);
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        height: 24px;
        opacity: 0.26;
        position: absolute;
        right: 0;
        top: 36px;
        width: 24px;
        z-index: 1;
    }
    .elemento > .calendario_exibido + .calendario_icone{
        opacity: 0.54;
    }
    #controle .elemento > .calendario_icone{
        top: 24px
    }
    #controle input.somente_leitura ~ .icone{
        top: 24px
    }
    #controle .elemento{
        display: block;
        margin: 0;
        min-height: 60px;
        width: 100%;
    }
    #controle .elemento > label{
        font-size: 13px;
        top: 29px;
    }
    #controle .elemento > input[ type = 'text'],
    #controle .elemento > select{
        font-size: 13px;
        top: 29px;
    }
    #controle .elemento > select{
        padding: 0 0 3px 0;
    }
        #controle .elemento > select:disabled ~ .icone {
            right: 1px;
            top: 13px;
        }
    #controle .elemento > input[ type = 'text']:focus ~ label,
    #controle .elemento > select:focus ~ label,
    #controle .elemento > input[ type = 'text'].preenchido ~ label,
    #controle .elemento > select.preenchido ~ label{
        font-size: 13px;
        top: 12px;
    }
                                                /* ferramentas do controle */
.ferramenta{
    padding: 16px;
    width: 100%;
}
.ferramenta:not(.oculto) ~ .ferramenta {
    margin-top: 0;
    border-top: 1px solid #E0E0E0
}
.ferramenta.oculto{
    display: none
}
                                                /* file */
.elemento > .botao_elevado.file{
    border-radius: 2px;
    opacity: 1;
    top: 15px
}
.uploadinput{
    left: 72px !important;
    width: calc( 100% - 72px ) !important
}
.uploadinput + label{
    left: 72px !important
}
                                                /* filtro */
.filtro{
    background-color: #FFF;
    box-shadow: 0 1px 3px rgba( 0 , 0 , 0 , 0.12 ), 0 1px 2px rgba( 0 , 0 , 0 , 0.24 );
    font-size: 13px;
    margin: 0;
    min-height: 48px;
    padding: 8px 48px 4px 48px;
    width: 100%;
}
.cartao > .filtro{
    border-bottom: 1px solid rgba( 0 , 0 , 0 , 0.12);
    border-radius: 2px 2px 0 0;
    box-shadow: none;
    height: 64px;
    left: 0;
    position: absolute;
    top:0;
    z-index: 1
}
    .fecha_filtro,
    .limpa_filtro{
        background-image: url(../icone/fecha_preto.png);
        background-position: center;
        background-repeat: no-repeat;
        display: none;
        height: 24px;
        min-width: auto;
        padding: 0;
        position: absolute;
        opacity: 0.54;
        right: 12px;
        top: 12px;
        width: 24px;
    }
    .fecha_filtro{
        cursor: pointer;
        display: block;
        right: 16px;
        top: 20px
    }
    .cartao > .filtro > .limpa_filtro{
        display: none
    }
    .etiqueta_filtro ~ .limpa_filtro{
        display: block
    }
    .limpa_filtro:active{
        background-color: transparent
    }
    .limpa_filtro:hover{
        opacity: 0.87;
    }
    .etiqueta_filtro{
        -moz-transition: all 100ms;
        -ms-transition: all 100ms;
        -o-transition: all 100ms;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        background-color: #E0E0E0;
        border-radius: 16px;
        display: inline-block;
        color: rgba( 0 , 0 , 0 , 0.87 );
        cursor: default;
        height: 32px;
        line-height: 32px;
        margin-bottom: 4px;
        margin-right: 4px;
        padding: 0 32px 0 12px;
        position: relative;
        white-space: nowrap;
    }
    .etiqueta_filtro:hover{
        background-color: #767577;
        color:  #FFF
    }
    .cartao > .filtro > .etiqueta_filtro{
        margin-left: 24px
    }
    .cartao > .filtro > .etiqueta_filtro ~ .etiqueta_filtro{
        margin-left: 4px;
    }
        .etiqueta_filtro > .icone{
            -moz-transition: all 100ms;
            -ms-transition: all 100ms;
            -o-transition: all 100ms;
            -webkit-transition: all 100ms;
            transition: all 100ms;
            background-image: url(../icone/cancela2_preto_18.png);
            background-position: center;
            background-repeat: no-repeat;
            height: 24px;
            margin: 4px;
            opacity: 0.54;
            position: absolute;
            right: 0;
            top: 0;
            width: 24px;
        }
        .etiqueta_filtro:hover > .icone{
            background-image: url(../icone/cancela2_branco_18.png);
            opacity: 1;
        }
    .icone_filtro{
        background-image: url(../icone/filtro_preto.png);
        background-position: center center;
        background-repeat: no-repeat;
        height: 36px;
        left: 6px;
        opacity: 0.54;
        position: absolute;
        top: 6px;
        width: 36px;
    }
    .cartao > .filtro > .icone_filtro{
        height: 24px;
        left: 24px;
        top: 20px;
        width: 24px;
    }
    .input_filtro{
        display: inline-block;
        height: 32px;
        line-height: 32px;
        margin-bottom: 4px;
        width: 100%
    }
    .cartao > .filtro > .input_filtro{
        margin: 8px 0 0 8px;
        min-width: 256px;
        width: auto
    }
    .cartao > .filtro > .input_filtro{
        margin-left: 24px
    }
    .cartao > .filtro > .etiqueta_filtro + .input_filtro{
        margin-left: 8px
    }
                                                /* indice */
.indice > input{
    display: none
}
    .chave_indice{
        -moz-transition: all 100ms;
        -ms-transition: all 100ms;
        -o-transition: all 100ms;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        border-radius: 50%;
        height: 36px;
        line-height: 36px;
        margin: 4px;
        width: 36px;
    }
    input:checked + .chave_indice{
        color: #FFF;
        font-weight: 500
    }
    .indice_titulo{
        clear: both;
        color: rgba( 0 , 0 , 0 , 0.54 );
        display: block;
        height: 24px;
        line-height: 24px;
        width: 100%;
    }
                                                        /* intervalo - jquery slider */
/*.ui-widget-header{
    background: none !important
}*/
.ui-slider{
    background-color: rgba( 0 , 0 , 0 , 0.26 );
    border: none !important;
    height: 2px !important;
    left: 0;
    position: absolute;
    top: 48px;
    width: 100%;
}
    .ui-slider-handle{
        background: none;;
        border: none !important;
        border-radius: 50% !important;
        height: 12px !important;
        margin-left: -6px !important;
        margin-top: -1px !important;
        outline: none !important;
        width: 12px !important;
        z-index: 1;
    }
.ui-slider + label{
    top: 8px !important
}
.ui-slider + label + .elemento{
    position: absolute;
    top: 64px
}
.ui-slider + label + .elemento + .elemento{
    position: absolute;
    top: 124px
}
                                                /* loading circular indeterminado */
/* fonte:  http://david.ingledow.co.uk/blog/google-material-designs-animated-loading-spinner-svg-and-css/ */
.loading_conteudo {
    align-items: center;
    display: flex;
    /*height: calc( 100vh - 135px - 48px );*/
    height: 100%;
    justify-content: center;
    width: 100%;
}
    .circular{
        animation: rotate 2s linear infinite;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation:
            dash 1.5s ease-in-out infinite,
            color 6s ease-in-out infinite;
        stroke-linecap: round;
    }
@keyframes rotate{
    100%{
        transform: rotate(360deg);
    }
}
@keyframes dash{
    0%{
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}
/*
@keyframes color{
    100%, 0%{
        stroke: #d62d20;
    }
    40%{
        stroke: #0057e7;
    }
    66%{
        stroke: #008744;
    }
    80%, 90%{
        stroke: #ffa700;
    }
}
*/
                                                /* mensagem */
.mensagem{
    color: rgba( 0 , 0 , 0 , 0.54 );
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 56px;
    text-align: center;
    width: 100%;
}
.mensagem ~ * {
    display: none
}
                                                /* mensagem do input:text */
.elemento > .mensagem_input{
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    margin-top: 64px;
    position: absolute;
    white-space: nowrap
}
#dialogo .mensagem_input {
    margin-top: 64px
}
.elemento > .mensagem_input.erro{
    color: #EF5350
}
                                                /* paginação */
.pagina_oculta{
	display: none
}
.paginador{
    color: rgba( 0 , 0 , 0 , 0.54 );
    height: 24px;
    line-height: 24px;
    text-align: right
}
	.itens_paginador{
		background-color: transparent;
		border: none;
		color: rgba( 0 , 0 , 0 , 0.54 );
		font-family: Roboto, Arial, sans-serif;
		font-size: 12sp;		
		margin-right: 32px;
		outline: none;
		text-align: right;
        width: 40px;
	}
	.itens_paginador:focus{
		color: rgba( 0 , 0 , 0 , 0.87 );
	}
	.total_paginador{
		margin-right: 118px
	}
	.anterior_paginador,
    .posterior_paginador{
		background-position: center;
		background-repeat: no-repeat;
		height: 24px;
		position: absolute;
		top: 0px;
		width: 24px;
	}
	.anterior_paginador{
		background-image: url(../icone/seta_esquerda.png);
		opacity: 0.26;
		right: 62px;
	}
	.posterior_paginador{
		background-image: url(../icone/seta_direita.png);
		opacity: 0.26;
		right: 14px;
	}
	.anterior_paginador:hover,
    .posterior_paginador:hover{
		opacity: 0.54
	}
                                                /* perfect scrollbar */
.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-y-rail{
    z-index: 99
}
.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x,
.ps-container > .ps-scrollbar-y-rail,
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y{
    border-radius: 0;
}
.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x{
    height: 10px
}
.ps-container > .ps-scrollbar-y-rail,
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y{
    width: 10px
}
                                                /* tooltips de gráficos e outros */
.tooltip{
    background-color: #616161;
    border-radius: 2px;
    color: rgba( 255 , 255 , 255 , 0.9 );
    font-size: 10px;
    font-weight: 500;
    height: 22px;
    line-height: 22px !important;
    margin-top: 24px;
    opacity: 0;
    padding: 0 8px;
    position: fixed;
    white-space: nowrap;
    z-index: -1
}
.subtitulo{
    color: rgba( 0 , 0 , 0 , 0.54 );
    font-size: 15px;
    font-weight: 500;
    line-height: 48px;
    padding-left: 16px;
    height: 48px;
    width: 100%
}