#topo{display:block; height:150px; width:100%; text-align:center;}
#topo img{margin-top:20px;}

/* Layout outer com flexbox.
   nowrap (não quebra linha) + #header_info posicionado absoluto fora do flex.
   gap removido pra evitar somar largura extra que causava wrap em telas 992-1024px. */
#content{
    display:flex;
    flex-wrap:nowrap;
    max-width:1400px;
    margin:15px auto 0;
    padding:0 15px;
    min-height:400px;
    box-sizing:border-box;
    position:relative;
}
#header_info{
    /* Tira do flex flow — fica posicionado no canto superior direito. */
    position:absolute;
    top:-50px;
    right:15px;
    font-size:9px;
    text-align:right;
    margin:0;
    padding:0;
    width:auto;
}
#menu{
    box-sizing: content-box;
    border-radius:0 0 10px 10px;
    background-color:#0A5753 !important;
    padding:8px 12px 20px;
}
@media (min-width: 992px) {
    #menu {
        flex: 0 0 auto;
        width: 220px;
        min-width: 0;
        min-height: 400px;
        align-self: flex-start;
        visibility: visible !important;
    }
}
/* Botão de colapsar (#menu_minimizar): no desktop é toggle pra encolher o menu
   (mostra só ícones); no mobile é escondido (Bootstrap offcanvas resolve abrir/fechar). */
@media (max-width: 991.98px) { #menu_minimizar { display: none !important; } }
@media (min-width: 992px) {
    /* Botão de abrir/fechar segue o mesmo formato de .bt_padrao:
       200px largura, borda, border-radius, hover branco. Quando o menu colapsa,
       herda automaticamente o tratamento de "#menu.menu-collapsed .bt_padrao"
       definido abaixo via seletor agrupado, virando 42×42. */
    #menu_minimizar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        /* content-box + width/padding/border idênticos a .bt_padrao → mesmo outer width.
           Centralização: align-items:center do flex parent (#menu), sem margin auto
           pra não introduzir cálculos divergentes do que align-items faz nos .bt_padrao. */
        box-sizing: content-box !important;
        width: 200px !important;
        height: 42px;
        margin: 12px 0 0 0 !important;
        padding: 0 5px !important;
        text-align: center !important;
        border: 1px solid #fff !important;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color .15s ease,
                    width .28s cubic-bezier(.4,0,.2,1),
                    height .28s cubic-bezier(.4,0,.2,1);
    }
    #menu_minimizar:hover { background-color: #fff; }
    #menu_minimizar:hover span { color: #0A5753; }
    #menu_minimizar { position: relative; }
    /* Glifo posicionado em absoluto no centro do retângulo — independente de
       side-bearings da fonte, padding, rotação, ou layout interno do span. */
    #menu_minimizar span {
        color: #fff;
        font-size: 18px;
        line-height: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        transition: transform .25s ease, color .15s ease;
    }
    /* flaticon.css tem margin-left:10px (e flaticon3.css tem 20px) GLOBAL no ::before
       de todo ícone — deslocava o glifo. Zera aqui pra centralizar de fato. */
    #menu_minimizar span:before { margin-left: 0 !important; }
    #menu.menu-collapsed #menu_minimizar { width: 42px !important; padding: 0 !important; border-color: transparent !important; }
    #menu.menu-collapsed #menu_minimizar span { transform: translate(-50%, -50%) rotate(180deg); }

    /* Animações: width do menu/botões + opacidade/max-height pros elementos que somem.
       cubic-bezier dá um feel mais suave que o linear/ease padrão. */
    #menu {
        transition: width .28s cubic-bezier(.4,0,.2,1);
    }
    #menu .bt_padrao {
        transition: width .28s cubic-bezier(.4,0,.2,1),
                    padding .28s cubic-bezier(.4,0,.2,1),
                    border-color .2s ease,
                    font-size .15s ease;
    }
    #menu .menu_esconder {
        overflow: hidden;
        max-height: 600px;
        opacity: 1;
        transition: opacity .2s ease, max-height .3s cubic-bezier(.4,0,.2,1), margin .3s cubic-bezier(.4,0,.2,1);
    }
    #menu .bt_padrao .icon {
        transition: margin .28s cubic-bezier(.4,0,.2,1);
    }

    /* Estado encolhido — botão 42×42 + ícone centralizado via flex. */
    #menu.menu-collapsed { width: 58px !important; }
    #menu.menu-collapsed .menu_esconder {
        opacity: 0;
        max-height: 0;
        margin: 0 !important;
        pointer-events: none;
    }
    #menu.menu-collapsed .bt_padrao {
        width: 42px !important;
        height: 42px;
        padding: 0 !important;
        border-color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    #menu.menu-collapsed .bt_padrao .icon {
        margin: 0 !important;
        padding: 0 !important;
        width: 42px !important;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #menu.menu-collapsed .bt_padrao .icon:before { font-size: 20px !important; }
    #menu.menu-collapsed .menu_avisos { padding: 3px !important; }
    #menu.menu-collapsed .bt_padrao .badge,
    #menu.menu-collapsed .menu_badge { display: none !important; }
}
/* .bt_padrao usa content-box pra manter 200px de ÁREA ÚTIL (compatível com layout
   CI 2 original). Outer fica 212px (200 + padding 10 + border 2). Texto "PAINEL DE
   CONTROLE" precisa ~137px e cabe nos ~140px restantes após o ícone. */
#menu .bt_padrao {
    box-sizing: content-box !important;
    width: 200px !important;
    max-width: calc(100% - 20px) !important;
    margin: 0;
    line-height: 1.2;
}
/* Ícone tinha margin-left:-5 e margin-top:-5 (style.css) pra "vazar" pro padding
   do botão no layout antigo (content-box). Esses negativos puxavam o ícone
   PRA FORA do botão. Zera. vertical-align:middle alinha o centro do ícone com
   o centro do texto (default baseline deixa o texto caído no rodapé do ícone). */
#menu .bt_padrao .icon {
    margin-left: 0 !important;
    margin-top: 0 !important;
    vertical-align: middle;
}
#menu .bt_padrao { vertical-align: middle; }
/* Mobile: texto pode quebrar em 2 linhas (fonte maior 15px + padding maior do
   responsive.css). Flex força quebra AO LADO do ícone (não embaixo). E
   overflow:visible mostra a 2ª linha em vez de cortar via overflow:hidden. */
@media (max-width: 991.98px) {
    #menu .bt_padrao {
        display: flex;
        align-items: center;
        overflow: visible !important;
        white-space: normal !important;
    }
    #menu .bt_padrao .icon { flex: 0 0 auto; }
}
/* <br> no markup criam gaps inconsistentes — esconde, espaçamento via flex gap. */
#menu > br { display: none; }
/* Spacing uniforme entre itens — substitui margin individual + <br>.
   6px confortável sem ficar esparso. Seções (.menu_esconder, divs) ganham um pouco mais. */
#menu { gap: 6px; }
#menu > .menu_esconder { width: 100%; margin-top: 8px; }
/* Logo do menu tem margin-left:20px inline (layout antigo) — zera pra alinhar com
   flex centering. max-width 100% pra não vazar do menu de 200px. */
#menu > img.menu_esconder { margin-left: 0 !important; max-width: 100%; height: auto; }
#main{
    flex:1 1 auto;
    min-width:0;
    background-color:#fff;
    min-height:400px;
    box-sizing:border-box;
}
#main .recipt:first-child div h4{margin-top:40px !important; }
#footer{display:block; height:40px; text-align:right; padding-right:30px; color:#fff; position:fixed; bottom:0; background-color:black; width:100%;}
#footer a{float:right; margin-top:15px; margin-left:5px; margin-right:20%; font-size:9px; font-weight:bold; color:#aaa; text-decoration:none;}
#footer a:hover{color:#fff;}
#footer img{float:right; margin-top:5px;}

#filtros{display:block; float:right; cursor:pointer; width:100%;}
#filtros span:before{margin-left:0 !important; margin-right:10px;}
#filtros span{float:right;}

#filtros_content{display:block; width:100%;}

#jobs{}
#desdobramentos{display:none; margin-top:35px;}
.td_sub_desdob{display:none;}

input[type='text'], textarea, select { 
	border: solid 1px #999;
}
input[type='text'].focus, textarea.focus, select.focus { 
	border-color: #000 !important; 
}
input[type='text'].invalid, textarea.invalid, select.invalid { 
	border-color: red;
}
input[type='text'].inactive, textarea.inactive, select.inactive, option.inactive { 
	color: #999;
	font-style: italic;
}
input[type='text'].required, textarea.required { 
	background: url(required-input.png) right 5px no-repeat;
}

/* CSS TELA DE LOGIN teste */
#login_fundo{top:0; left:0; width:100%; height:100%; display:block; position:fixed; z-index:0; background-position:center; background-attachment:fixed; background-size:cover;}
#login_padrao{top:0; left:0; width:100%; height:100%; display:block; position:absolute; z-index:2; background-position:top left; background-repeat:no-repeat;}
#login_content{position:absolute; z-index:5;}
#login_content #logo{top:90px; left:30px; position:absolute;}
#login_table{}
#login_table tr td{color:#fff; font-size:10px;}
#login_form{position:absolute; top:260px; left:30px; z-index:10;}

#avaliacao_form{
  background-color:rgba(255,255,255,0.98);
  width:600px;
  display:block;
  position:absolute;
  top:20 !important;
  left:-300px !important;
  margin-left:50% !important;
  border-radius:5px;
  padding:10px;
}