@CHARSET "UTF-8";

#header {
	text-align: center;
}

img.logo {
	display: inline;
	float: left;
}

.label-grande-responsivo {
    font-size: 16px !important; /* Ou use 1.1rem ou 1.2em */
    font-weight: 600 !important;
    white-space: normal !important; /* Importante para quebra de linha em títulos longos */
}

h1 {
	padding-top: 1em;
}

.ui-menubar {
	background-image: url("http://www.tse.jus.br/temas/img/background-menu-superior.jpg");
	background-repeat: repeat-x;
	padding: 0px;
}

.ui-menuitem-text {
	color: white;
	text-align: left;
}

.ui-menu, .ui-menu .ui-menu-child {
	background: #2D779F;
}

html, body {
	height: 100%;
	width: 100%;
	display: table;
	margin-bottom: 0;
}

#footer {
	font-size: x-small;
	display: table-footer-group;
}

.centralizado {
	text-align: center;
}

.bordless, .bordless tbody, .bordless tbody tr, .bordless tbody tr.ui-widget-content td.ui-panelgrid-cell {
	border: none;
}

.ui-outputlabel {
	margin-right: 0.3em;
}

.userInfo {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: small;
}

.floatRight {
	float: right;
}

.alignmentRight {
	text-align: right !important;
}

.bold {
	font-weight: bold;
}

.ui-messages-error {
	text-align: left !important; 
}

input:read-only, textarea:read-only{
	opacity: .35;
}

.ui-button {
	margin-top: 5px;
	margin-bottom: 5px;
}

.borderless {
 	border: none;
}

.borderless table,
.borderless thead th,
.borderless tbody,
.borderless tbody tr,
.borderless tbody td,
.borderless th.ui-state-default {
    border: none !important;
    background: transparent;
}

.toolbar {
	overflow: auto;
}

.float-right {
	float: right;
}

.buttonPanel {
	overflow: auto;
	border: none;
}

div #logon {
	width: 250px;
}

.ui-panel {
	margin-bottom: 0.5em;
}

.painelCentralizado {
    position: absolute;
    left: 50%;
    top: 30%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#content {
	width: 99%;
}

.rodape {
    font-size: 11px;
    font-family: Arial,Verdana,sans-serif;
}

.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper {
     overflow: auto;
     width: 100%;
     padding-bottom: 5px;
}

.row-verde {
    background-color: #dff0d8 !important; /* Verde claro */
}

.row-vermelho {
    background-color: #f2dede !important; /* Vermelho claro */
}

/* ---------------------------------------------------------------------- */
/* 1. LAYOUT MOBILE-FIRST (PADRÃO: 1 COLUNA) */
/* ---------------------------------------------------------------------- */

.form-responsivo-custom.ui-panelgrid.ui-grid {
    /* Garante que o container se comporte como um grid ou flexbox para os filhos */
    display: flex;
    flex-wrap: wrap; 
}

.form-responsivo-custom.ui-panelgrid.ui-grid .ui-panelgrid-cell {
    /* Por padrão, em telas pequenas (mobile), todos os campos ocupam 100% */
    width: 100% !important;
    padding: 0.5rem; /* Ajuste de padding, se necessário */
}


/* ---------------------------------------------------------------------- */
/* 2. LAYOUT TABLET/DESKTOP (A PARTIR DE 641px) */
/* ---------------------------------------------------------------------- */

@media (min-width: 641px) {
    /* Aplica-se a colunas ímpares (rótulos) */
    .form-responsivo-custom.ui-panelgrid.ui-grid .ui-panelgrid-cell:nth-child(odd) {
        /* Largura para o Rótulo em telas maiores (4/12) */
        width: calc(100% / 3) !important; /* Aproximadamente 33.33% (próximo de 4/12) */
        
        /* Se você quer exatamente 4/12, use 33.333% ou 4 * (100%/12) */
        /* width: 33.333% !important; */
    }
    
    /* Aplica-se a colunas pares (campos de entrada) */
    .form-responsivo-custom.ui-panelgrid.ui-grid .ui-panelgrid-cell:nth-child(even) {
        /* Largura para o Campo em telas maiores (8/12) */
        width: calc(100% * 2 / 3) !important; /* Aproximadamente 66.66% (próximo de 8/12) */
        
        /* Se você quer exatamente 8/12, use 66.666% ou 8 * (100%/12) */
        /* width: 66.666% !important; */
    }
}