.campo-busca {
    position: relative;
    display: inline-block;
}

#termoBusca {
    flex: 1;
    font-size: 14px;
    padding: 6px 12px; /* Reduza o valor do padding para diminuir a altura */
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 150px;
    max-width: 100%;
    box-shadow: 0px 0px 5px #ccc;
    outline: none;
    transition: box-shadow 0.2s, width 0.2s; /* Adicione a transição para a largura */
}

    #termoBusca:focus {
        box-shadow: 0px 0px 1px #0077ff;
        width: 300px; /* Aumente a largura quando o campo estiver em foco */
    }

.botao-busca {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: no-repeat center center;
    background-size: 60%;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}


    .botao-busca:hover {
        opacity: 1;
    }

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.btn-hide-custom {
    border: 2px solid gray;
    color: gray;
    background-color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
}

.upload-btn-wrapper input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.sending-message-spinner {
    position: fixed;
    text-align: center;
    z-index: 20;
    display: none;
    width: 64px;
    height: 64px;
    border: 8px solid #B0B0B0;
    border-radius: 50%;
    border-top-color: #000;
    animation: loading .75s linear infinite;
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}

/* Absolute Center Spinner */
.loading {
    position: fixed;
    display: none;
    z-index: 1031;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(41, 40, 40);
}

    /* Transparent Overlay */
    .loading:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(41, 40, 40);
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: rgba(41, 40, 40);
        border: 0;
    }

        .loading:not(:required):after {
            content: '';
            display: block;
            font-size: 20px;
            width: .5em;
            height: .5em;
            background-color: rgba(41, 40, 40);
            margin-top: -0.5em;
            -webkit-animation: spinner 1500ms infinite linear;
            -moz-animation: spinner 1500ms infinite linear;
            -ms-animation: spinner 1500ms infinite linear;
            -o-animation: spinner 1500ms infinite linear;
            animation: spinner 1500ms infinite linear;
            border-radius: 0.5em;
            -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
            box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        }

/* Animation */
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.modal-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.image-container {
    flex: 1;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-big-xs {
    padding: 0.125rem 0.25rem !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    border-radius: 0.15rem !important;
    margin-bottom: 0 !important;
}

.btn-search-home {
    padding: 0.100rem 0.25rem !important;
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    border-radius: 0.12rem !important;
    margin-bottom: 0 !important;
}

.last-column {
    width: 20px; /* Defina o tamanho fixo desejado aqui */
}

.center-align {
    text-align: center;
}

.open-preview {
    margin-bottom: 0; /* Remove o espaçamento inferior */
    /* Outros estilos personalizados que você desejar */
}

.export-button {
    background-color: #5E72E4;
    color: #fff;
    border: none;
}

.legend-dt-custom {
    background-color: #00FF01;
    color: #000;
    border: none;
    pointer-events: none;
    cursor: default;
}

.dataTables_filter {
    position: relative;
    border-radius: 5px;
}

    .dataTables_filter .fa-search {
        position: absolute;
        right: 10px;
        top: 45%;
        transform: translateY(-50%);
        cursor: pointer;
        pointer-events: auto;
    }

    .dataTables_filter input.search-input {
        transition: width 0.3s;
        width: 0;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 7px;
        padding: 5px 10px;
    }

        .dataTables_filter input.search-input.search-focused {
            width: 300px;
        }

.dataTables_length label {
    font-size: 13.5px; /* Defina o tamanho da fonte desejado */
}

.dataTables_info {
    font-size: 13.5px; /* Defina o tamanho de fonte desejado */
}

.na {
    color: gray;
    border-radius: 4px;
    border: 0.5px;
    background-color: lightgray;
    width: 65px;
    /* Outros estilos de botão */
}

.success {
    color: green;
    border-radius: 4px;
    border: 0.5px;
    background-color: lightgreen;
    width: 65px;
    /* Outros estilos de botão */
}

.failure {
    color: red;
    border-radius: 4px;
    border: 0.5px;
    background-color: lightcoral;
    width: 65px;
    /* Outros estilos de botão */
}


.custom-align-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.text-content {
    width: 100%;
    max-width: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    content: 'Procurar arquivo';
    font-weight: bold;
    display: inline-block;
    background: #084cdf;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    border: none;
    border-radius: .25rem;
    border-color: #5e72e4;
    color: #fff;
    padding: 5px 8px;
    outline: none;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: .75rem;
    line-height: 1.5;
    transition: background .1s ease-in-out, transform .1s ease-in-out;
}

.custom-file-input:hover::before {
    border-color: black;
    transform: translateY(-1px);
}

.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
    transform: translateY(1px);
}

@font-face {
    font-family: 'Product Sans';
    src: url('/fonts/google/ProductSans-Bold.woff') format('woff');
    font-weight: 500; /* Defina o peso da fonte como 'Medium' */
    font-style: normal;
}

#titulo-especifico {
    font-family: 'Product Sans', sans-serif;
    font-weight: 500; /* Use 'bold' para negrito */
    font-size: 45px; /* Ajuste o tamanho da fonte conforme necessário */
}

.color-menu {
    position: fixed;
    bottom: 10px;
    right: 0px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.color-title {
    background-color: #f8f9fa;
    padding: 5px 10px;
    border-radius: 5px 0 0 5px;
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
}

.color-options {
    display: none;
    flex-direction: row;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 0 0 5px 5px;
    width: 0;
    transition: width 0.3s ease;
}

.color-menu:hover .color-options {
    width: 100px;
    display: flex;
}

.color-option {
    width: 16px;
    height: 16px;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent; /* Adicione uma borda transparente */
}

    .color-option:hover {
        border-color: #000; /* Mude a cor da borda ao passar o mouse */
    }

.color1 {
    background-color: #5E72E4;
}

.color2 {
    background-color: #2a9d8f;
}

.color3 {
    background-color: #c44536;
}

.color4 {
    background-color: #292828;
}


/* CSS para o efeito de "neon" */
neon-circle {
    width: 32px;
    height: 32px;
    background-color: blue;
    border-radius: 50%;
    box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 30px blue, 0 0 40px blue;
    animation: neon-animation 1.5s ease-in-out infinite alternate;
}

@keyframes neon-animation {
    from {
        opacity: 0.8;
    }

    to {
        opacity: 1;
    }
}

.wps_placeholder {
    color: #E2E6E9; /* Cor desejada para o texto do placeholder */
}

.radio-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-control-radiobox {
    display: flex; /* Para que os elementos dentro do form-control sejam exibidos em linha */
    align-items: center; /* Alinhar verticalmente no centro */
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
    height: calc(1.5em + 1.25rem + 2px);
    padding: .625rem .75rem;
    transition: all .15s cubic-bezier(.68, -.55, .265, 1.55);
    color: #8898aa;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 3px 2px rgba(233, 236, 239, .05);
}

.radio-input {
    display: none;
}

.radio-label {
    display: flex;
    align-items: center;
    margin-top: 8px; /* Adicione um espaçamento superior aqui */
    margin-right: 20px;
    cursor: pointer;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #999;
    margin-right: 10px;
    position: relative;
}

.radio-input:checked + .radio-label .radio-custom {
    border-color: #007bff; /* Cor quando selecionado */
}

    .radio-input:checked + .radio-label .radio-custom::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: #007bff; /* Cor do marcador */
        border-radius: 50%;
        display: none;
    }

    .radio-input:checked + .radio-label .radio-custom::after {
        display: block;
    }

.selectize-dropdown {
    max-height: 180px; /* Defina a altura máxima desejada */
    overflow-y: auto; /* Adiciona uma barra de rolagem se o conteúdo exceder a altura máxima */
}


/* Estilo do conteúdo do avatar com gradiente roxo */
.avatar-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
    /* Estilize o ícone dentro do avatar conforme necessário */
    .avatar-content svg {
        fill: #fff; /* Cor do ícone */
    }


.profile-pic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #FFF;
    outline: 0.5px solid #2DCEBB;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.profile-pic-hv {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #FFF;
    outline: 0.5px solid #8a817c;
    background: #bcb8b1 !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

    .profile-pic-hv:hover {
        border-radius: 50%;
        border: 2px solid #FFF !important;
        outline: 0.5px solid #ce0d0d;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    }

.blocked-text {
    opacity: 0.5; /* Reduz a opacidade para indicar que está bloqueado */
    pointer-events: none; /* Impede interações com o elemento bloqueado */
    text-decoration: line-through; /* Adiciona uma linha através do texto para indicar que está bloqueado */
    color: #888; /* Define a cor do texto como cinza (opcional) */
}


.btn-add-report {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    box-shadow: none;
    height: calc(1.5em + 1.25rem + 2px);
}

    .btn-add-report:hover {
        color: #fff;
        background-color: #218838;
        border-color: #1e7e34
    }

    .btn-add-report.focus, .btn-add-report:focus {
        color: #fff;
        background-color: #218838;
        border-color: #1e7e34;
        box-shadow: 0 0 0 0 rgba(72,180,97,.5)
    }

    .btn-add-report.disabled, .btn-add-report:disabled {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745
    }

    .btn-add-report:not(:disabled):not(.disabled).active, .btn-add-report:not(:disabled):not(.disabled):active, .show > .btn-add-report.dropdown-toggle {
        color: #fff;
        background-color: #1e7e34;
        border-color: #1c7430
    }

        .btn-add-report:not(:disabled):not(.disabled).active:focus, .btn-add-report:not(:disabled):not(.disabled):active:focus, .show > .btn-add-report.dropdown-toggle:focus {
            box-shadow: 0 0 0 0 rgba(72,180,97,.5)
        }

#IDCardReport {
    border-radius: 0px !important;
}

/* Estilos para o botão de fechar */
.fill-fullsize {
    display: flex;
    visibility: hidden;
}

/* Adicione os estilos necessários para os faróis */
#statusIndicator {
    padding-bottom: 10px;
    top: 7px;
    line-height: 30px;
    padding-bottom: 10px;
    border-radius: 5px;
    /* Adicionar fundo preto transparente */
    background-color: rgba(0, 0, 0);
    padding: 10px; /* Adicionar algum preenchimento ao redor do conteúdo */
    color: #fff; /* Adicionar cor branca ao texto */
}

/* Estilos para o botão de fechar */
.farol-btn-close {
    margin-left: 15px;
    background-color: red; /* Cor do fundo circular */
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: white; /* Cor do ícone de fechar */
    border-radius: 15%; /* Transforma o botão em um círculo */
    width: 30px; /* Ajuste o tamanho do botão conforme necessário */
    height: 30px; /* Ajuste o tamanho do botão conforme necessário */
    transition: transform 0.2s ease; /* Efeito de transição */
}
    /* Estilos para o botão de fechar quando o mouse está sobre ele */
    .farol-btn-close:hover {
        transform: scale(1.1); /* Amplia o botão em 10% */
    }

/* Estilos para o botão de expandir para tela cheia */
.farol-btn-expand {
    background-color: blue; /* Cor do fundo circular */
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: white; /* Cor do ícone de expandir */
    border-radius: 15%; /* Transforma o botão em um círculo */
    width: 30px; /* Ajuste o tamanho do botão conforme necessário */
    height: 30px; /* Ajuste o tamanho do botão conforme necessário */
    transition: transform 0.2s ease; /* Efeito de transição */
}

    /* Estilos para o botão de expandir quando o mouse está sobre ele */
    .farol-btn-expand:hover {
        transform: scale(1.1); /* Amplia o botão em 10% */
    }

#farolSemCerca {
    background-color: #6991fd;
}

.mt-h1 {
    margin-top: -.127rem !important;
}