html, body {
    overflow-x: hidden;
}

body {
    position: relative;
}

div.secaoFormulario #includeContent,
div.secaoFormulario span.titulo,
.input-container,
div.formulario {
    background-color: #fffff9 !important;
}

/*teste*/
input[type="text"], textarea, select, .text, input.text, html\:text {
    padding: 8px !important;
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    transition: border 0.3s ease, box-shadow 0.3s ease !important;
    background-color: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

input.text.mask_date_br {
    max-width: 42% !important;
}
.data_titulo {
    position: relative;
    top: 5px;
    margin-left: 3px;
    margin-right: 7px;
}
/*fin teste*/
.input-container {
    display: flex;
    align-items: stretch;
    max-width: calc(60% - 20px);
    min-width: 400px;
}

/* INPUT */
.input-container input[type="text"],
.input-container textarea {
    flex: 1;
    height: 38px;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem; /* padrão BS5 */
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-sizing: border-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* FOCUS estilo Bootstrap */
.input-container input[type="text"]:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
    outline: 0;
}

/* ÍCONE INTERNO */
.input-icons {
    position: relative;
    margin-left: -4.6rem; /* entra dentro do input */
    display: flex;
    align-items: center;
    z-index: 3;
}
.div-datas .input-icons {
    margin-left: -4.3rem; /* entra dentro do input */
}

.input-icons .separador {
    height: 65%;
    border-left: 1px solid #dadce0;
}

.input-icons .espacador {
    margin-left: 2.3rem;
}


.input-icons .icon-button {
    width: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}


.help-icon {
    position: relative;
    top: -2px;
}

.div-datas {
    display: flex;
    align-items: center;
}

.div-datas-direita {
    margin-left: auto;
}

/* The container */
.container {
    display: inline;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 15px;
    height: 14px;
    width: 14px;

    border-radius: 3px;
    border: solid #123141;
    border-width: 1px 1px 1px 1px;
    background-color: lightgray;


    /*   border-top-width: 0px;
      border-left-width: 0px;
      border-right-width: 1px;
      border-bottom-width: 2px; */

    /*  border-top-color: rgb(18, 49, 65);
     border-top-style: solid;
     border-top-width: 0px;
     border-right-color: rgb(18, 49, 65);
     border-right-style: solid;
     border-right-width: 1px;
     border-bottom-color: rgb(18, 49, 65);
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-left-color: rgb(18, 49, 65);
     border-left-style: solid;
     border-left-width: 0px;
     border-image-source: initial;
     border-image-slice: initial;
     border-image-width: initial;
     border-image-outset: initial;
     border-image-repeat: initial; */


}

/* On mouse-over  */
.container:hover input ~ .checkmark {
    border-color: #415a67;
    background-color: #415a67;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #415a67;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 2px;
    height: 6px;
    border: solid white;
    border-width: 0 2px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Create a custom radio button */
.radiomark {
    position: absolute;
    top: 0;
    left: 15px;
    height: 14px;
    width: 14px;
    border: solid #123141;
    border-width: 1px 1px 1px 1px;
    background-color: lightgray;
    border-radius: 50%;
}

/* On mouse-over, add a blue background color */
.container:hover input ~ .radiomark {
    border-color: #415a67;
    background-color: #415a67;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .radiomark {
    background-color: #415a67;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (white circle) when checked */
.container input:checked ~ .radiomark:after {
    display: block;
}

/* Style the indicator (white circle) */
.container .radiomark:after {
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

.btn-ux-acao {
    border-radius: 7px !important;
}
.btn-baixo {
    height: 50px !important;
    white-space: normal !important;
    width: 150px !important;
    padding: 10px !important;
    border-radius: 7px !important;
    border: none !important;
    cursor: pointer;
    font-size: 14px;
}
.btn-baixo:hover {
    background-color: #7099b1 !important;
}


/* botoes-icones */
.btn-icone-container {
    display:flex;
    padding: 10px;
    padding-top: 40px;
    margin-bottom: 40px;
    position: relative;
    left: 20px;
}
.btn-icone {
    width: 45px;
    height: 45px;
    padding: 4px;
    border: 0px;
    border-radius: 25px;
    background-color: rgb(225,227,225);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease-in-out;
    margin-right: 10px;
}
.btn-icone img {
    width:28px;
    height:28px;
}

.btn-icone:hover {
    transform: scale(1.08);
    transition: transform 0.15s ease-in-out;
    background-color: rgb(18, 49, 65);
}

.btn-icone:hover img {
    filter: brightness(0) invert(1); /* deixa o ícone branco */
}



/* ===============================
   AJAX CALLOUT - Modern Minimal
================================= */

.ajaxCalloutLayout {
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    padding: 0;
    overflow: hidden;
    animation: fadeInCallout 0.15s ease-out;
}

.ajaxCalloutTextLayout {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.ajaxCalloutTextFont {
    color: #212529;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Cabeçalho */
.ajaxCalloutCaptionLayout {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.ajaxCalloutCaptionFont {
    color: #212529;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

/* Botão fechar */
.ajaxCalloutCloseFont {
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s ease;
}

.ajaxCalloutCloseFont:hover {
    color: #000;
}

/* Animação suave */
@keyframes fadeInCallout {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   TABELA DENTRO DO CALLOUT
========================= */
.ajaxCalloutTextLayout table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

/* Cabeçalho */
.ajaxCalloutTextLayout table thead th {
    background: #f8f9fa;
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,.1);
    color: #212529;
}

/* Células */
.ajaxCalloutTextLayout table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    color: #495057;
}

/* Última linha sem borda */
.ajaxCalloutTextLayout table tr:last-child td {
    border-bottom: none;
}

/* Hover discreto */
.ajaxCalloutTextLayout table tbody tr:hover {
    background-color: rgba(13,110,253,.04);
}

#ajaxCalloutHelpClass {
    width: 550px !important;
    max-width: 90vw;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    overflow: hidden;
    font-size: 15px;
    font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
}

.callout-wide #ajaxCalloutHelpClass {
    width: 750px !important;
}

.topoAjuda {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem !important;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-weight: 600;
    color: #212529;
}

.topoAjuda a {
    text-decoration: none;
    font-size: 0.85rem;
    font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all .15s ease-in-out;
}

.topoAjuda a:hover {
    background: rgba(0,0,0,.05);
    color: #000;
}

.topoAjuda a {
    font-weight: 500;
}

.caixaAjuda {
    padding: 1rem;
    color: #495057;
    line-height: 1.5;
}

#ajaxCalloutHelpClass br {
    display: none;
}

#ajaxCalloutHelpClass {
    animation: bsFadeIn .15s ease-out;
}

@keyframes bsFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}


.formulario .container-alerta-cidh {
    display: flex;
    justify-content: center;   /* centraliza horizontal */
    align-items: center;
}
.formulario .texto-alerta-cidh {
    background: #fff5e6;
    color: #7a4b00;
    border: 1px solid #ffe0b2;
    border-radius: .4rem;
    padding: .6rem .75rem;
    margin: .5rem .25rem 0 .25rem;
    font-size: .8rem;
}