body{font-family:'Open Sans',sans-serif}#wrapper{width:100%;background:#202020}#page-wrapper{padding:15px;background:#F3F3F3}/* [ALTERAÇÃO] Removido "min-height: 600px;" */#page-inner{width:100%;margin:10px 20px 10px 0;background-color:#fff!important;padding:10px;min-height:1200px}.text-center{text-align:center}.no-boder{border:1px solid #f3f3f3}h2{color:black}h4{padding-top:10px}.square-btn-adjust{border:0 solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}p{font-size:16px;line-height:25px;padding-top:20px}.icon-box-right,.noti-box .icon-box{width:70px;height:70px;line-height:75px;vertical-align:middle;text-align:center;display:block}.panel-back{background-color:#F8F8F8}.noti-box{min-height:100px;padding:20px}.noti-box .icon-box{float:left;margin:0 15px 10px 0;font-size:40px}.text-box p{margin:0 0 3px}.main-text{font-size:25px;font-weight:600}.set-icon{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px}.bg-color-green{background-color:#00CE6F;color:#fff}.bg-color-blue{background-color:#A95DF0;color:#fff}.bg-color-red{background-color:#DB0630;color:#fff}.bg-color-brown{background-color:#B94A00;color:#fff}.icon-box-right{float:right;margin:0 15px 10px 0;font-size:40px}.main-temp-back{background:#8702A8;color:#FFF;font-size:16px;font-weight:300;text-align:center}.main-temp-back .text-temp{font-size:40px}.back-dash{padding:20px;font-size:20px;font-weight:500;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background-color:#2EA7EB;color:#fff}.back-dash p{padding-top:16px;font-size:13px;color:#fff;line-height:25px;text-align:justify}.back-footer-green{background-color:#009B50;border-top:0 solid #fff}.back-footer-red{background-color:#AF0000;border-top:0 solid #fff}.color-bottom-txt{color:#000;font-size:16px;line-height:30px}.chat-panel .panel-body{height:450px;overflow-y:scroll}.chat-box{margin:0;padding:0;list-style:none}.chat-box li{margin-bottom:15px;padding-bottom:5px;border-bottom:1px dotted grey}.chat-box li.left .chat-body{margin-left:90px}.chat-box li .chat-body p{margin:0;color:#8d8888}.chat-img>img{margin-left:20px}.user-image{margin:25px auto;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;max-height:170px;max-width:170px}.navbar-cls-top .navbar-brand{color:#fff;background:#C90000;width:260px;text-align:center;height:60px;font-size:30px;font-weight:700}.active-menu{background-color:#660000!important}.arrow{float:right}.fa.arrow:before{content:"\f104"}.active>a>.fa.arrow:before{content:"\f107"}.nav-second-level li,.nav-third-level li{border-bottom:none!important}.nav-second-level li a{padding-left:37px}.nav-third-level li a{padding-left:55px}.sidebar-collapse,.sidebar-collapse .nav{background:0 0}.sidebar-collapse .nav{padding:0}.sidebar-collapse .nav>li>a{color:#fff;background:#202020;text-shadow:none}.sidebar-collapse>.nav>li>a{padding:15px 10px}.sidebar-collapse>.nav>li{border-bottom:1px solid rgba(107,108,109,.19)}.sidebar-collapse .nav>li>a:focus,.sidebar-collapse .nav>li>a:hover{background:#0A0A0A;outline:0}.nav-second-level>li>a:before,.nav-third-level>li>a:before{content:"";display:block;position:absolute;left:20px;width:15px;height:1px;background:#660000;top:20px}.nav-second-level>li>a:after,.nav-third-level>li>a:after{content:"";display:block;position:absolute;left:20px;width:1px;height:100%;background:green;top:0;z-index:10}.nav-second-level>li:last-child>a:after,.nav-third-level>li:last-child>a:after{height:50%}.nav-third-level>li>a:after,.nav-third-level>li>a:before{left:40px}.navbar-side{border:none;background-color:#202020}.navbar-cls-top{background:#4D4D4D;border-bottom:none}.navbar-cls-top .navbar-brand:hover{background:#C90000;color:#fff}.navbar-default{border:0 solid #000}.navbar-header{background:#202020}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#202020}.navbar-default .navbar-toggle{border-color:#fff}.navbar-default .navbar-toggle .icon-bar{background-color:#FFF}.nav>li>a>i{margin-right:10px}.btn-circle{width:50px;height:50px;padding:6px 0;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;text-align:center;font-size:12px;line-height:1.428571429}@media(min-width:768px){#page-wrapper{margin:0 0 0 260px;padding:15px 30px;}/* [ALTERAÇÃO] Removido "min-height: 1200px;" */.navbar-side{z-index:1;position:absolute;width:260px}.navbar{border-radius:0}}

/* --- Estilos para Popup de Inatividade --- */
.fumê-overlay {
.fumê-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}

/* [NOVO] Para forçar o texto do alerta a ser sempre preto e em negrito */
.alert.alerta-texto-padrao {
color: black !important;
font-weight: bold !important;
}

/* * CSS Customizado: Botão Preto (Padrão) e Branco (Hover) 
* Adicionado para o botão com id="btn-login-preto"
*/

/* 1. ESTADO NORMAL: Fundo Preto, Fonte Branca */
#btn-login-preto {
 background-color: #000000 !important;
 border-color: #000000 !important;
 color: #ffffff !important;
 /* Adiciona uma transição suave para um efeito mais bonito */
 transition: all 0.3s ease;
}

/* 2. ESTADO HOVER: Fundo Verde Escuro, Fonte Branca */
#btn-login-preto:hover {
 background-color: #006400 !important; /* Fundo Verde Escuro no hover (Alterado de azul para verde escuro) */
 border-color: #000000 !important;  /* Borda Preta no hover (Mantido) */
 color: #ffffff !important;   /* Fonte Branca no hover (Mantido) */
}

/* -------------------------------------------------- */
/* --- NOVO: SPINNER E OVERLAY DE CARREGAMENTO (LOADER) --- */
/* -------------------------------------------------- */

/* Estilo para a Div do Loader (O elemento giratório em si) */
.loader {
width: 50px;
aspect-ratio: 1;
display: grid;
border-radius: 50%;
background:
linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
background-repeat: no-repeat;
animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: inherit;
opacity: 0.915;
transform: rotate(30deg);
}
.loader::after {
opacity: 0.83;
transform: rotate(60deg);
}
@keyframes l23 {
100% {transform: rotate(1turn)}
}

/* Estilo para a Div de Conteúdo do Spinner (Overlay de Fundo) */
#loading-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente */
 display: none; /* Inicia oculto */
 z-index: 99999; /* Garante que fique sobre todo o conteúdo */
 
 /* Centralização usando Flexbox para compatibilidade com Bootstrap 3 e modernos */
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 flex-direction: column; /* Para empilhar o spinner e o texto */
}

#loading-overlay p {
 margin-top: 15px;
 font-weight: bold;
 color: #333;
}

/* ==========================================================================
 REGRAS PARA LAYOUT DE ALTURA TOTAL (FLEXBOX)
 ========================================================================== */

/* 1. Define uma base de altura de 100% e impede a rolagem no nível do documento. */
html,
.page-wrapper-body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* [NOVO] Impede a rolagem no corpo da página */
}

/* 2. Transforma o container #wrapper no container Flexbox principal.
   Isso alinhará a sidebar (menu) e a área de conteúdo (#page-wrapper)
   lado a lado e fará com que ambos tenham a mesma altura. */
.layout-wrapper {
  display: flex;
  height: 100%;
}

/* 3. Instrui a área de conteúdo principal a crescer e ocupar todo
   o espaço horizontal restante ao lado do menu. */
.content-main {
  flex: 1; /* Equivalente a flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  overflow-y: auto; /* Adiciona uma barra de rolagem vertical apenas nesta área se o conteúdo for maior que a tela. */
}

/* Estilos para o bloco de informações do usuário no menu lateral */
.user-info-block {
  padding: 10px 15px;
  color: #ccc;
  font-size: 12px;
  border-bottom: 1px solid rgba(107, 108, 109, .19);
}

/* ==========================================================================
 REGRAS DE SOBRESCRITA - Adicionar novas customizações abaixo
 ========================================================================== */

/* Regras antigas de sobrescrita. Foram substituídas pela regra completa abaixo 
 para melhor organização e para resolver conflitos de especificidade.
 Podem ser removidas.
.user-info-block { ... }
.user-info-date-line { ... }
*/

/* [AJUSTE FINAL - 14/10/25] Estilização completa para o bloco de informações do usuário. */
#main-menu > li.user-info-block {
  color: #fff !important;   /* Garante a cor branca para o texto. */
  text-align: center;     /* Garante a centralização de todo o conteúdo. */
  padding-bottom: 15px;    /* Adiciona um espaço extra abaixo. */
}

/* [AJUSTE FINAL - 14/10/25] Adiciona espaçamento entre as linhas de info do usuário. */
#main-menu > li.user-info-block .user-info-line-2 {
  margin-top: 5px;
}

/* ==========================================================================
 ESTILOS PARA BOTÃO "MOSTRAR/OCULTAR SENHA" [v2]
 ========================================================================== */

/* --- Caso 1: Campo de senha simples (sem input-group) --- */
.password-container {
  position: relative;
}
/* Posiciona o ícone dentro de um campo simples */
.password-container .toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Caso 2: Campo de senha dentro de um Bootstrap .input-group --- */
/* Adiciona o cursor de 'mãozinha' ao addon (área cinza) */
.input-group-addon.toggle-password-addon {
    cursor: pointer;
}

/* --- Estilo COMUM para o ícone 'toggle-password' (o "olho") em ambos os casos --- */
.toggle-password {
  cursor: pointer;
  color: #888;
}
.toggle-password:hover {
  color: #333; /* Cor ao passar o mouse */
}