/* ========================================
   CSS - FORMULÁRIOS
   ======================================== */

/* Para migrar para os ícones do FontAwesome, utilizado no Padrão Digital do Governo, sem precisar alterar todos os lugares
   onde a classe botaoIcone já está sendo usada foi ajustado o CSS da classe para exibir o ícone do FontAwesome via pseudo-elemento (::before),
   aproveitando a estrutura já existente. 
   Assim para usar icones do FontAwesome, utilize o código Unicode do ícone na propriedade content do css (ex.: content: "\f002";) 
   Pesquise o código no site do FontAwesome: https://fontawesome.com/v5/search . O design system GOV.BR usa somente os estilos Solid e Brand.
   Documentação da Iconografia do GOV.BR: https://www.gov.br/ds/fundamentos-visuais/iconografia 
*/

/*name: Botão
description:
  Botões comuns e com ícones podem ser feitos com tag "button"
  modifiers:
  :active: Clicado
  :hover: Com o cursor em cima
  :disabled: Desabilitado
markup:
  <button class='botao'>Botão</button>
*/
.botao,
.botaoIcone {
    background-color:#1351b4; /* Cor de fundo */
    color: white; /* Cor do texto */
    padding: 5px 14px; /* Espaçamento interno */
    border: 1px solid #1351b4; /* Borda */
    border-radius: 25px; /* Bordas arredondadas */
    cursor: pointer; /* Cursor de mãozinha */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: 900; /* fica igual do link a, mais forte */
    box-sizing: border-box;
    display: inline-block;
}

/*.icone,*/
.botaoIcone {
    position: relative; /* Importante para alinhar o ícone */
    padding-left: 2em; /* Espaço para o ícone à esquerda */
}

.icone {
    display: inline-block; /* Permite aplicar padding corretamente */
}

.icone:hover,
.icone:hover a {
    color: #1351b4; /* Cor do texto do ao passar o mouse */
}
.icone:hover::before {
    color: #1351b4; /* Nova cor do ícone no hover */
    transform: translateY(-50%) scale(1.1); /* Aumenta um pouco o ícone no hover */
}

.botao:hover,
.botaoIcone:hover {
    border: 1px solid #1351b4; /* Borda */
    background-color: #edf5ff; /* Cor de fundo ao passar o mouse */
    color: #1351b4; /* Cor do texto ao passar o mouse */
    text-decoration: none; /* Remove o sublinhado do link */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.botao:active,
.botaoIcone:active {
    background-color: #E7E6E6; /* Cor de fundo */
}

.botao:disabled,
.botaoIcone:disabled {
    color: #CCC;
    border: 1px solid #DDD;
    background-color: #F7F6F6;
}

/* Propriedades comuns para todos os ícones e ícones dos botões */
.icone::before,
.botaoIcone::before {
    font-family: "Font Awesome 5 Free"; /* Fonte dos ícones FontAwesome */
    font-weight: 900; /* Necessário para ícones sólidos */
    font-style: normal; /* Estilo normal */
}
.botaoIcone::before {
    position: absolute; /* Posiciona o ícone em relação ao botão */
    left: 0.8em; /* Distância da borda esquerda */
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%); /* Ajusta para centralizar exatamente */
    font-size: 1em; /* Tamanho do ícone */
    pointer-events: none; /* Ícone não interfere no clique */
}

/* 
name: Link botão
description: Link personalizado como um botão
markup: <a class='botao'>Link botão</a>
*/
a.botao,
a.botaoIcone {
    text-decoration: none;
    color: #fff;
}

/* 
name: Botão sem texto
description: Botão sem valor ou vazio que exibe somente o ícone
*/
input.botaoIcone[value=""],
input.botaoIcone:not([value]),
button.botaoIcone:empty {
    padding-left: 16px;
    background-position: center center;
    width: 28px;
}





/* 
name: Botão mais
description: Botão com ícone de "mais"
markup: <button class='botaoIcone botaoMais'>Botão</button>*/
.icone.mais::before,
.botaoIcone.mais::before,
.icone.iconeMais::before,
.botaoIcone.botaoMais::before {
    content: "\f055"; /* Código unicode do ícone 'plus-circle' */
}

/* 
name: Botão menos
description: Botão com ícone de "menos"
markup: <button class='botaoIcone botaoMenos'>Botão</button>*/
.icone.menos::before,
.botaoIcone.menos::before,
.icone.iconeMenos::before,
.botaoIcone.botaoMenos::before {
    content: "\f056"; /* Código unicode do ícone 'minus-circle' */
}

/* 
name: Botão cadastrar usuário
description: Botão com ícone de "user-plus"
markup: <button class='botaoIcone botaoCadastrarUsuario'>Botão</button>*/
.icone.cadastrarUsuario::before,
.botaoIcone.cadastrarUsuario::before,
.icone.iconeCadastrarUsuario::before,
.botaoIcone.botaoCadastrarUsuario::before {
    content: "\f234"; /* Código unicode do ícone 'user-plus' */
}

/* 
name: Botão usuário
description: Botão com ícone de "user"
markup: <button class='botaoIcone botaoUsuario'>Botão</button>*/
.icone.usuario::before,
.botaoIcone.usuario::before,
.icone.iconeUsuario::before,
.botaoIcone.botaoUsuario::before {
    content: "\f007"; /* Código unicode do ícone 'user' */
}

/* 
name: Botão limpar
description: Botão com ícone de "limpar"
markup: <button class='botaoIcone botaoLimpar'>Botão</button>*/
.icone.limpar::before,
.botaoIcone.limpar::before,
.icone.iconeLimpar::before,
.botaoIcone.botaoLimpar::before {
    content: "\f12d"; /* Código unicode do ícone 'eraser' */
}

/* 
name: Botão buscar
description: Botão com ícone de "buscar"
markup: <button class='botaoIcone botaoBuscar'>Botão</button>*/
.icone.buscar::before,
.botaoIcone.buscar::before,
.icone.iconeBuscar::before,
.botaoIcone.botaoBuscar::before {
    content: "\f002"; /* Código unicode do ícone 'search' */
}

/* 
name: Botão download
description: Botão com ícone de "download"
markup: <button class='botaoIcone botaoDownload'>Botão</button>*/
.icone.download::before,
.botaoIcone.download::before,
.icone.iconeDownload::before,
.botaoIcone.botaoDownload::before {
    content: "\f019"; /* Código unicode do ícone 'download' */
}

/* 
name: Botão confirmar
description: Botão com ícone de "confirmar"
markup: <button class='botaoIcone botaoConfirmar'>Botão</button>*/
.icone.confirmar::before,
.botaoIcone.confirmar::before,
.icone.iconeConfirmar::before,
.botaoIcone.botaoConfirmar::before {
    content: "\f00c"; /* Código unicode do ícone 'check' */
}

/* 
name: Botão cancelar
description: Botão com ícone de "cancelar"
markup: <button class='botaoIcone botaoCancelar'>Botão</button>*/
.icone.cancelar::before,
.botaoIcone.cancelar::before,
.icone.iconeCancelar::before,
.botaoIcone.botaoCancelar::before {
    content: "\f05e"; /* Código unicode do ícone 'ban' */
}
.botaoIcone.cancelar,
.botaoIcone.botaoCancelar,
.botao.secundario, 
.botaoIcone.secundario, 
.botaoSecundario {
    background-color: ghostwhite; 
    color: #1351b4;
    font-weight: 400;
}

/* 
name: Botão apagar
description: Botão com ícone de "apagar"
markup: <button class='botaoIcone botaoApagar'>Botão</button>*/
.icone.excluir::before,
.botaoIcone.excluir::before,
.icone.iconeExcluir::before,
.icone.iconeApagar::before,
.botaoIcone.botaoExcluir::before,
.botaoIcone.botaoApagar::before {
    content: "\f1f8"; /* Código unicode do ícone 'trash' */
}

/* 
name: Botão configuração
description: Botão com ícone de "configuração"
markup: <button class='botaoIcone botaoConfiguracao'>Botão</button>*/
.icone.configurar::before,
.botaoIcone.configurar::before,
.icone.iconeConfiguracao::before,
.botaoIcone.botaoConfiguracao::before {
    content: "\f0ad"; /* Código unicode do ícone 'wrench' */
}

/* 
name: Botão editar
description: Botão com ícone de "editar"
markup: <button class='botaoIcone botaoEditar'>Botão</button>*/
.icone.editar::before,
.botaoIcone.editar::before,
.icone.iconeEditar::before,
.botaoIcone.botaoEditar::before {
    content: "\f304"; /* Código unicode do ícone 'pencil' */
}

/* 
name: Botão imprimir
description: Botão com ícone de "imprimir"
markup: <button class='botaoIcone botaoImprimir'>Botão</button>*/
.icone.imprimir::before,
.botaoIcone.imprimir::before,
.icone.iconeImprimir::before,
.botaoIcone.botaoImprimir::before {
    content: "\f02f"; /* Código unicode do ícone 'print' */
}

/*
name: Botão finalizado
description: Botão com ícone de "finalizado"
markup: <button class='botaoIcone botaoFinalizado'>Botão</button>*/
.icone.finalizado::before,
.botaoIcone.finalizado::before,
.icone.iconeFinalizado::before,
.botaoIcone.botaoFinalizado::before {
    content: "\f560"; /* Código unicode do ícone 'check-double' */
}

/* 
name: Botão finalizado parcialmente
description: Botão com ícone de "finalizado parcialmente"
markup: <button class='botaoIcone botaoParcialmente'>Botão</button>*/
.icone.parcialmente::before,
.botaoIcone.parcialmente::before,
.icone.iconeParcialmente::before,
.botaoIcone.botaoParcialmente::before {
    content: "\f560"; /* Código unicode do ícone 'check-double' PROCURAR ICONE*/
}

/*
name: Botão calendário
description: Botão com ícone de "calendário"
markup: <button class='botaoIcone botaoCalendario'>Botão</button>*/
.icone.calendario::before,
.botaoIcone.calendario::before,
.icone.iconeCalendario::before,
.botaoIcone.botaoCalendario::before {
    content: "\f073"; /* Código unicode do ícone 'calendar-alt' */
}
.icone.calendario::before,
.botaoIcone.calendario::before,
.icone.iconeCalendario:empty,
.botaoIcone.botaoCalendario:empty {
    margin-left: 3px;
}
.botaoIcone.calendario::before,
.botaoIcone.botaoCalendario:empty {
    padding-top: 15px;
    padding-bottom: 13px;
    padding-left: 20px;
    padding-right: 20px;
}

/*
name: Botão informação
description: Botão com ícone de "informação"
markup: <button class='botaoIcone botaoInfo'>Botão</button>*/
.icone.informacao::before,
.botaoIcone.informacao::before,
.icone.informacao::before,
.botaoIcone.botaoInformacao::before,
.icone.info::before,
.botaoIcone.info::before,
.icone.iconeInfo::before,
.botaoIcone.botaoInfo::before {
    content: "\f129"; /* Código unicode do ícone 'info' */
}

/* 
name: Botão responder
description: Botão com ícone de "responder"
markup: <button class='botaoIcone botaoResponder'>Botão</button>*/
.icone.responder::before,
.botaoIcone.responder::before,
.icone.iconeResponder::before,
.botaoIcone.botaoResponder::before {
    content: "\f086"; /* Código unicode do ícone 'comments' */
}

/*
name: Botão anexo
description: Botão com ícone de "clip de papel"
markup: <button class='botaoIcone botaoAnexo'>Botão</button>*/
.icone.anexo::before,
.botaoIcone.anexo::before,
.icone.botaoAnexo::before,
.botaoIcone.botaoAnexo::before {
    content: "\f0c6"; /* Código unicode do ícone 'paperclip' */
}

/* 
name: Botão PDF
description: Botão com ícone de "PDF"
markup: <button class='botaoIcone botaoPDF'>Botão</button>*/
.icone.pdf::before,
.botaoIcone.pdf::before,
.icone.iconePDF::before,
.botaoIcone.botaoPDF::before {
    content: "\f1c1"; /* Código unicode do ícone 'file-pdf' */
}

/*
name: Botão documento
description: Botão com ícone de "documento"
markup: <button class='botaoIcone botaoDocumento'>Botão</button>*/
.icone.documento::before,
.botaoIcone.documento::before,
.icone.iconeDocumento::before,
.botaoIcone.botaoDocumento::before {
    content: "\f1c2"; /* Código unicode do ícone 'file-word' */
}

/* 
name: Botão planilha
description: Botão com ícone de "planilha"
markup: <button class='botaoIcone botaoPlanilha'>Botão</button>*/
.icone.planilha::before,
.botaoIcone.planilha::before,
.icone.iconePlanilha::before,
.botaoIcone.botaoPlanilha::before {
    content: "\f1c3"; /* Código unicode do ícone 'file-excel' */
}

/* 
name: Botão CSV
description: Botão com ícone de "CSV"
markup: <button class='botaoIcone botaoCSV'>Botão</button>*/
.icone.csv::before,
.botaoIcone.csv::before,
.icone.iconeCSV::before,
.botaoIcone.botaoCSV::before {
    content: "\f6dd"; /* Código unicode do ícone 'file-csv' */
}

/* 
name: Botão Relatório
description: Botão com ícone de "Relatorio"
markup: <button class='botaoIcone botaoRelatorio'>Botão</button>*/
.icone.relatorio::before,
.botaoIcone.relatorio::before,
.icone.iconeRelatorio::before,
.botaoIcone.botaoRelatorio::before {
    content: "\f15b"; /* Código unicode do ícone 'file' */
}

/* 
name: Botão atualizar
description: Botão com ícone de "atualizar"
markup: <button class='botaoIcone botaoAtualizar'>Botão</button>*/
.icone.atualizar::before,
.botaoIcone.atualizar::before,
.icone.iconeAtualizar::before,
.botaoIcone.botaoAtualizar::before {
    content: "\f021"; /* Código unicode do ícone 'sync' */
}

/* 
name: Botão próximo
description: Botão com ícone de "próximo"
markup: <button class='botaoIcone botaoProximo'>Botão</button>*/
.icone.proximo::before,
.botaoIcone.proximo::before,
.icone.iconeProximo::before,
.botaoIcone.botaoProximo::before {
    content: "\f061"; /* Código unicode do ícone 'arrow-right' */
}
.icone.proximo::before,
.botaoIcone.proximo::before,
button.botaoProximo:empty,
input.botaoProximo[value=""] {
    padding-right: 4px;
}

/*
name: Botão anterior
description: Botão com ícone de "anterior"
markup: <button class='botaoIcone botaoAnterior'>Botão</button>*/
.icone.anterior::before,
.botaoIcone.anterior::before,
.icone.iconeAnterior::before,
.botaoIcone.botaoAnterior::before {
    content: "\f060"; /* Código unicode do ícone 'arrow-left' */
}

/*
name: Botão pagamento
description: Botão com ícone de "cifrão"
markup: <button class='botaoIcone botaoPagamento'>Botão</button>*/
.icone.pagamento::before,
.botaoIcone.pagamento::before,
.icone.iconePagamento::before,
.botaoIcone.botaoPagamento::before {
    content: "\f155"; /* Código unicode do ícone 'dollar-sign' */
}

/*
name: Botão ajuda
description: Botão com ícone de "interrogação"
markup: <button class='botaoIcone botaoAjuda'>Botão</button>*/
.icone.ajuda::before,
.botaoIcone.ajuda::before,
.icone.iconeAjuda::before,
.botaoIcone.botaoAjuda::before {
    content: "\f059"; /* Código unicode do ícone '' */
}


/*--------------------------------------------------------------------------*/

input.botaoLogonGovBr {
    --button-radius: 100em;
    --button-xsmall: 24px;
    --button-small: 32px;
    --button-medium: 40px;
    --button-large: 48px;
    --button-size: var(--button-medium);
    align-items: center;
    border: 0;
    border-radius: var(--button-radius);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-scale-up-01);
    font-weight: var(--font-weight-semi-bold);
    height: var(--button-size);
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    --background: #1351B4;
    --sign-in-img: 20px;
    background-color: var(--background);

}

.conteudoUgPagTesouro {
    background-color: #155BCB;
    width: 220px;
    height: 100px;
    display: inline-block;
    margin-left: 8px;
    margin-top: 35px;
    padding-top: 25px;
    vertical-align: middle;
    text-align: center;
    border-radius: 10px;

}

#conteudoFormulariocadastro{
    width: 100%;
    margin-bottom: 10px;

}

#conteudoListaServicos{
    width: 100%;
    margin-bottom: 10px;

}

.formColunaPagSeguro{
    min-width: 50%;
    height: 70px;
    display: inline-block;
    margin-left: -5px;
    padding-top: -15px;
    vertical-align: middle;
    border-radius: 10px;
    font-weight: bold;


}

.formColunaPagSeguroVencimento{
    max-width: 50%;
    height: 70px;
    display: inline-block;
    margin-left: -5px;
    padding-top: -15px;
    vertical-align: middle;
    border-radius: 10px;
    font-weight: bold;


}

a.linkUgPagTesouro:link, a.linkUgPagTesouro:visited {
    text-decoration: inherit;
    color: white;
    font-size: 14px;
}

button.linkUgPagTesouro{
    margin-top: -22px;
    text-decoration: inherit;
    background-color:#155BCB;
    border-style: none;
    border-color:#155BCB;
    color: white;
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-radius: 10px;
    width: 220px;
    height: 100px;
}

button.linkUgPagTesouro:hover {
    background-color: blue;
    color:white;
    transform: scale(1.05);
    transition: all 0.5s;
}

input.inputFormPagSeguro, select.inputFormPagSeguro{
    height: 30px;
    width: 80%;
}

/*------------------------------------------------------------------------*/

input[type=text], input[type=password], textarea, select{
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
    margin-top: 4px;
    margin-bottom: 4px;
    background: #FDFDFD !important;
}

textarea {
    resize: both;
}

input[type=text].campoNaoEditavel{
    border: 1px solid #AAA !important;
    padding: 3px;
    background: #E8D2FF !important;
    margin: 1.2px;
}


select:not(.datepick-month-year) {
    border: 1px solid #CCC;
    padding-left: 3px;
    background: #F2F2F2;
}

select:not(.datepick-month-year):hover {
    border: 1px solid #AAA;
}


input.campo {
    font-size: 100%;
    vertical-align: middle;
}

input.campo,
input.campoPequeno,
textarea.campo {
    border: 1px solid #ccc;
    padding: 2px;
    background: #F2F2F2;
}

.obrigatorio:after {
    content: "*";
    margin: 0 2px;
    color: red;
}

input.campoPequeno {
    width: 60px;
    height: 19px;
    vertical-align: middle;
}

input.campo:hover,
textarea.campo:hover,
input.campo:focus,
textarea.campo:focus,
input.campo:active,
textarea.campo:active {
    border: 1px solid #aaa;
}


.campoData {
    width: 95px;
}

.campoDataSemCalendario {
    width: 95px;
}

.campoHora {
    width: 55px;
}

.campoCPF {
    width: 130px;
}

.linhaFormulario {
    margin: 7px 0;
    clear: both;
    min-height: 25px;
}

.datepick-popup {
    font-size: 16px;
}

.datepick {
    font-size: auto;
    width: auto !important;
}

/*-------------------------------------------------------------------------*/

/*Elementos de Formulários*/

.formLogon{
    background: #eee;
    padding: 2%;
    border-radius: 10px;
}

.formLogon input[type=text]{
    width: 100% !important;
}

.formLogon p{
    text-align: center;
    font-size: 120%;
    background: #00aeee;
}

.formLogon button[type=submit]{
    width: 100%;
    margin-top: 10px;
}

.formGroup {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    gap: 8px; /* Espaço entre label e input */
}

.formGroup label {
    flex: 0 0 200px; /* largura fixa para as labels, ajuste conforme necessário */
    font-weight: 500; /* Medium */
    text-align: right; /* Alinha o texto do label à direita */
    min-width: 80px; /* Largura mínima para alinhar todos */
}

.formGroup input,
.formGroup select {
    flex: 0 0 auto;
    text-align: left;
}


fieldset {
    padding: 10px 30px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

fieldset legend {
    font-weight: bold;
    font-size: 1.4em;
    float: none;
    width: auto;
}


.formBusca {
    background: #f8fafc;
    margin-left: auto; /* Centraliza o elemento */
    margin-right: auto; /* Centraliza o elemento */
    width: fit-content; /* Faz a largura se ajustar ao conteúdo */
}

.formBusca legend {
    color: #888;
    padding: 0 8px;
}

.formBusca label, th {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(60, 62, 64);
    --bs-text-opacity: 1;
    color: rgb(60, 62, 64);
    text-align: right;
    padding-right: 10px;
}

.formBusca label:not([class*="col-sm-"]) {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.formBusca div:not([class*="col-sm-"]):not(.linha):not(.filtrosAvancados) {
    flex: 0 0 auto;
    width: 66.66666666%;
}

.formBusca div:not(.linha):not(.filtrosAvancados) {
    /*display: inline-table;*/
}

.formBusca div.linha{
    /*width: 100%;*/
    display: flex;
    margin-bottom: 0.10rem !important;
    align-items: center !important;
}
.formBusca .filtrosAvancados {
    width: 100% !important;
}

.formBusca tr {
    display: block;
}

.formBusca input,
.formBusca select,
.formBusca textarea {
    max-width: 100%;/* Adiciona uma largura de fallback, se necessário */
}

@media (max-width: 768px){
    .formBusca .linha {
        display: block !important;
    }
    .formBusca label {
        width: 100% !important;
        text-align: left;
        margin-left: 0px;
    }
    .formBusca div {
        width: 100% !important;
    }
    .naoquebralinha{
        width: auto;
    }
}
.form-control{
    width: auto;
    max-width: 100%;
}








.formButton {
    text-align: center;
    margin-top: 10px;
}

/* Classe para textos de descrição/ajuda */
.formHelpText {
    color: #6c757d;
    font-size: 0.875rem;
    font-style: italic;
    margin-top: 4px;
}

/* Classe para campos readonly */
.formReadOnly {
    font-weight: 600;
    color: #1351b4;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Classe para textos de intervalo (de/até) */
.formRangeText {
    color: #6c757d;
    font-size: 0.875rem;
    margin: 0;
}

.formRangeText + input {
    margin-left: 8px;
}

/* Responsividade para .formGroup */
@media (max-width: 768px) {
    .formGroup {
        flex-direction: column;
        align-items: stretch;
    }
    .formGroup label {
        text-align: left;
        flex: unset;
        min-width: 0;
        width: 100%;
        margin-bottom: 4px;
    }
    .formGroup input,
    .formGroup select {
        width: 100%;
        flex: unset;
    }
    .formHelpText {
        margin-bottom: 8px;
    }
}
/*Fim elementos de Formulários*/