/* ==========================================================================
   app.css - estilos próprios do painel B4BID

   1.  Elementos base
   2.  Layout geral
   3.  Header e navbar
   4.  Sidebar
   5.  Footer
   6.  Dropdowns
   7.  Loaders e skeleton
   8.  Formulários e campos
   9.  Botões
   10. Tabelas e DataTables
   11. Painéis e abas
   12. Modais e diálogos (Bootstrap, BootstrapDialog, Bootbox, SweetAlert)
   13. jQuery UI
   14. Labels
   15. Timeline
   16. Telas específicas (planos, aprovar/reprovar, postagens, histórico, extrato)
   17. Cores, textos e utilitários
   18. Responsivo
   ========================================================================== */


/* ==========================================================================
   1. Elementos base
   ========================================================================== */

body {
    background-color: var(--bs-body-bg);
}

fieldset {
    padding: .35em .625em .75em;
    margin: 0 2px;
    border: 1px solid silver;
}

legend {
    display: block;
    /* width: 100%; */
    /* padding: 0; */
    margin-bottom: 5px;
    /* font-size: 21px; */
    line-height: inherit;
    color: #333;
    /* border: 0; */
    /* border-bottom: 1px solid #e5e5e5; */
    font-weight: 700;
    font-size: 12px;
    width: auto;
    border: none;
    padding: 5px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    /* font-weight: 700; */
    color: var(--main-color);
    font-weight: normal !important;
}


/* ==========================================================================
   2. Layout geral
   ========================================================================== */

.content-wrapper main .row {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
}

.conteudo-principal-wrap {
    padding-left: 0px;
    padding-right: 0px;
}

.row.card-row-space {
    margin-top: 1.5rem;
}


/* ==========================================================================
   3. Header e navbar
   ========================================================================== */

/* Customização do template AdminLTE */
.skin-blue .main-header .navbar {
    background-color: var(--main-color)!important;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: #fff !important;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--main-color-hover)!important;
}

.skin-blue .main-header .navbar .nav > li > a {
    color: #fff !important;
}

.skin-blue .main-header .navbar .nav > li > a {
    color: #fff !important;
    font-size: 1.1em !important;
}

.skin-blue .main-header .logo {
    background-color:var(--main-color-hover)!important;
    color: #fff !important;
    border-bottom: 0 solid transparent;
}

/* Marca */
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 0px;
    /* width: 10%; */
    padding: 3px;
    border-right: 5px solid var(--main-color);
}

#navbar-row::before,
#navbar-row::after {
    display: none !important;
}

.navbar-brand > img {
    display: block;
    max-height: 100% !important;
}

.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
    margin-left: -15px;
}

.navbar-nav {
    margin-left: 15px;
}

/* Barra de busca */
.navbar .search-bar .left-btn {
    position: relative;
    bottom: 1px;
}

.navbar .search-bar {
    display: flex;
    align-items: center;
    height: 39px !important;
    padding: 0 8px;
    border-radius: .35rem;
    background: var(--bs-primary-dark);
    cursor: pointer;
    /* border: 1px solid var(--bs-danger); */
}

.navbar .search-bar .form-control {
    background: inherit !important;
    border-radius: 0;
    border: 0;
    color: #fff;
}

.navbar .search-bar .form-control:focus,
.navbar .search-bar .form-control:active,
.navbar .search-bar .form-control:focus-visible
.navbar .search-bar .form-control:hover {
    border-color: var(--bs-danger) !important;
}

.navbar .search-bar .form-control::placeholder {
    color: #e6e6e6;
    opacity: 1;
}

.navbar .search-bar .right-btn {
    display: flex;
    align-items: center;
}

.navbar .search-bar .right-btn .key {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: .75rem;
    text-transform: uppercase;
    background: var(--bs-primary-darker);
    color: #fff;
}

/* Ícones e menu do usuário */
.navbar .nav-icon {
    font-size: 1.15rem;
}

.navbar .user-menu .nav-icon i {
    font-size: 1.65rem;
}

.navbar .user-menu img {
    border-radius: 100%;
}

.navbar .user-menu .dropdown-header {
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
}

.navbar .user-menu .dropdown-header h6 {
    font-size: .75rem;
    font-weight: 700;
    color: var(--bs-header);
    margin-bottom: 0;
    margin-left: auto;
}

.navbar .user-menu .main-icon {
    font-size: 1.95rem;
}


/* ==========================================================================
   4. Sidebar
   ========================================================================== */

/*
 * Menu lateral do Sneat (template/sidebar.php, .bg-menu-theme) com a paleta do root.css.
 * Branco no tema claro e escuro no tema escuro: as cores vêm das variáveis --b4-sidebar-*.
 * O theme-default.css usa !important no fundo do menu e no item ativo, por isso o !important aqui.
 */
.bg-menu-theme {
    background-color: var(--b4-sidebar-fundo) !important;
    color: var(--b4-sidebar-texto);
}

@media (min-width: 1200px) {
    .bg-menu-theme.menu-vertical {
        box-shadow: var(--b4-sidebar-sombra);
    }
}

/* Marca */
.bg-menu-theme .app-brand .menu-text,
.bg-menu-theme .menu-text {
    color: var(--b4-sidebar-marca);
}

/* Links */
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-link .menu-icon {
    color: var(--b4-sidebar-texto);
}

.bg-menu-theme .menu-link:hover,
.bg-menu-theme .menu-link:focus,
.bg-menu-theme .menu-link:hover .menu-icon,
.bg-menu-theme .menu-link:focus .menu-icon {
    color: var(--b4-sidebar-texto-hover);
}

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link {
    background-color: var(--b4-sidebar-fundo-hover);
}

/* Item ativo */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon {
    color: var(--b4-sidebar-ativo-texto);
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
    background-color: var(--b4-sidebar-ativo-fundo) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
    background: var(--b4-sidebar-ativo-marca);
}

/* Submenus */
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link {
    color: var(--b4-sidebar-ativo-texto);
}

.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle {
    background-color: var(--b4-sidebar-fundo-hover);
}

.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
    background-color: var(--b4-sidebar-cabecalho) !important;
}

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
    background-color: var(--b4-azul-destaque) !important;
    border: 3px solid rgba(var(--b4-azul-destaque-rgb), 0.3) !important;
}

/* Cabeçalhos de seção (Movimentos, Cadastros...) */
.bg-menu-theme .menu-header {
    color: var(--b4-sidebar-cabecalho);
}

.bg-menu-theme .menu-header:before {
    background-color: var(--b4-sidebar-cabecalho) !important;
}

/* Sombra do topo ao rolar e barra de rolagem */
.bg-menu-theme .menu-inner-shadow {
    background: linear-gradient(var(--b4-sidebar-fundo) 41%, transparent 95%);
}

.bg-menu-theme .ps__thumb-y,
.bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
    background: rgba(var(--b4-grafite-rgb), 0.2) !important;
}

.dark-style .bg-menu-theme .ps__thumb-y,
.dark-style .bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Botão de recolher o menu */
.app-brand .layout-menu-toggle {
    background-color: var(--b4-azul-destaque);
}

/* Botão de tema claro/escuro na topbar (template/topbar.php, js/tema.js) */
#b4-btn-tema i {
    transition: transform .3s ease;
}

#b4-btn-tema:hover i {
    transform: rotate(20deg);
}

/* Menu antigo do AdminLTE (legado) */
.skin-blue .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    color: #E0E0E0 !important;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: #8aa4af !important;
}

.treeview-menu > li > a {
    font-size: 12px !important;
}


/* ==========================================================================
   5. Footer
   ========================================================================== */

.main-footer img {
    max-width: 70px;
}

.main-footer .links {
    text-align: right;
    padding-top: 10px;
    padding-right: 40px;
}

.main-footer .links a {
    text-decoration: underline;
    padding: 5px;
    color: var(--main-color);
}

.main-footer .logo-brand {
    text-align: left;
}

.btn-go-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 2.5em;
    color: var(--main-color-hover) !important;
    display: none;
}


/* ==========================================================================
   6. Dropdowns
   ========================================================================== */

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #fff;
    text-decoration: none;
    background-color: var(--main-color);
    outline: 0;
    color: #fff !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover > label {
    color: #fff !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:visited, .dropdown-menu > .active > a:visited > label {
    color: #fff !important;
}


/* ==========================================================================
   7. Loaders e skeleton
   ========================================================================== */

/* C-Loader */
.c-loader-box {
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
    text-align: center;
    background-image: url('../img/loader.png');
    background-position: center center;
    background-repeat: no-repeat;
}

.c-loader-box .c-loader {
    animation: is-rotating 1s infinite;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: #E6E6E6;
    height: 80px;
    width: 80px;
    position: relative;
    margin: 0 auto;
}

@keyframes is-rotating {
    to {
        transform: rotate(1turn);
    }
}

/* Skeleton */
.skeleton {
    display: inline-block;
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.skeleton-text {
    width: 80%;
    height: 16px;
    margin-bottom: 10px;
}

.skeleton-image {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.loading-icon {
    color: var(--main-color) !important;
}


/* ==========================================================================
   8. Formulários e campos
   ========================================================================== */

/* Campos de texto e selects (paleta do root.css) */
.form-control,
.form-select {
    color: var(--b4-campo-texto);
    background-color: var(--b4-campo-fundo);
    border-color: var(--b4-campo-borda);
}

.form-control::placeholder {
    color: var(--b4-campo-placeholder);
    opacity: 1;
}

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--b4-cinza-hover);
}

/* O Sneat usa !important no foco, por isso o !important aqui */
.form-control:focus,
.form-select:focus {
    color: var(--b4-campo-texto);
    border-color: var(--b4-campo-borda-foco) !important;
    box-shadow: var(--b4-campo-anel-foco);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--b4-texto-secundario);
    background-color: var(--b4-campo-fundo-desabilitado);
    border-color: var(--b4-campo-borda);
}

.form-label,
.col-form-label {
    color: var(--b4-texto);
}

/* Input group (ícone ou texto colado no campo) */
.input-group-text {
    color: var(--b4-texto-secundario);
    background-color: var(--b4-campo-fundo);
    border-color: var(--b4-campo-borda);
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: var(--b4-campo-borda-foco) !important;
}

.input-group:focus-within {
    box-shadow: var(--b4-campo-anel-foco);
    border-radius: 0.375rem;
}

.input-group:focus-within .form-control:focus {
    box-shadow: none;
}

/* Checkbox, radio e switch */
.form-check-input {
    border-color: var(--b4-cinza);
}

.form-check-input:focus {
    border-color: var(--b4-azul-destaque);
    box-shadow: var(--b4-campo-anel-foco);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--b4-azul-destaque);
    border-color: var(--b4-azul-destaque);
    box-shadow: 0 2px 4px 0 rgba(var(--b4-azul-destaque-rgb), 0.3);
}

.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23007AFF'/%3e%3c/svg%3e");
}

/* Validação: só a cor da borda no foco, o vermelho/verde do Bootstrap continua */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--bs-danger) !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--bs-success) !important;
}

/* Mostrar/ocultar senha no login */
.btnShowLoginPass {
    position: absolute;
    right: 0px;
    top: 28%;
    /* z-index: 2; */
    background: none;
    border: none;
    font-size: 1.1em;
    color: #9F9F9F;
    z-index: 9;
}

.btnShowLoginPass:hover,.btnShowLoginPass:active,.btnShowLoginPass:link, .btnShowLoginPass:visited {
    background: none;
    box-shadow: none !important;
}

/* Radios e checkboxes */
.radio-label {
    display: inline-block;
    position: relative;
    padding-left: 20px; /* Espaço extra para aumentar a área clicável */
    cursor: pointer;
}

.radio-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px; /* Tamanho visual maior */
    height: 20px; /* Tamanho visual maior */
    border-radius: 50%;
    border: 1px solid var(--b4-cinza);
}

.radio-label .radio-indicator {
    display: none;
}

.radio-label .radio-indicator.selected {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    transform: translate(-50%, -50%);
    width: 10px; /* Tamanho da bolinha */
    height: 10px; /* Tamanho da bolinha */
    border-radius: 50%;
    background-color: var(--b4-azul-destaque); /* Cor da bolinha */
}

/* Painel de busca (autocomplete) */
.painel-busca {
    background-color: #fff;
    position: absolute;
    width: 95%;
    border-left: 2px solid var(--main-color);
    padding: 5px;
    box-shadow: 1px 2px 2px #333;
    max-height: 250px;
    overflow: auto;
    /* height: 250px; */
    z-index: 9;
    background-color: #FFFFD8;
    display: none;
}

/* Editor de emojis */
.emojionearea .emojionearea-editor {
    min-height: 20em !important;
    max-height: 20em !important;
}

/* Formulário de filtro */
.ag-form-filtro {

}

.ag-form-filtro input[type='text'],select,label {
    margin-right: 8px !important;
}

/* Caixa de resultados de busca */
.busca-box {
    border: 1px solid #333;
    background-color: #fff;
    position: absolute;
    width: 100%;
    max-height: 400px;
    overflow: auto;
    box-shadow: 0px 2px 5px #ccc;
    display: none;
    z-index: 9;

    background: #fff;
    background-clip: border-box;
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
    background-clip: padding-box;
    border-color: transparent;
    z-index: 1000;
}

/* Flatpickr: botão de limpar data */
.flatpickr-input:placeholder-shown + .flatpickr-clear {
    display: none;
}

.flatpickr-clear {
    position: absolute;
    top: calc(50% - 3px);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    box-shadow: none !important;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .625rem;
    color: #697a8d;
    z-index: 100;
}

/* Datepicker */
.datepicker-container {
    z-index: 1500 !important;
}


/* ==========================================================================
   9. Botões
   ========================================================================== */

/*
 * Paleta do root.css aplicada sobre o Sneat. O theme-default.css marca hover e
 * active com !important, então os mesmos estados aqui também precisam dele.
 *
 *   primary    Azul Principal, ação principal da tela (salvar, confirmar). No tema escuro vira
 *              Azul Destaque, que aparece melhor no fundo escuro (variáveis --b4-primario*)
 *   info       Azul Destaque, ação de destaque (novo, filtrar)
 *   secondary  Cinza com texto Grafite, ação neutra (cancelar, voltar)
 *   dark       Grafite
 */

.btn {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--b4-azul-destaque-rgb), 0.35) !important;
}

/* Primary: Azul Principal (Azul Destaque no tema escuro) */
.btn-primary {
    color: var(--b4-branco);
    background-color: var(--b4-primario);
    border-color: var(--b4-primario);
    box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--b4-primario-rgb), 0.3);
}

.btn-primary:hover {
    color: var(--b4-branco) !important;
    background-color: var(--b4-primario-hover) !important;
    border-color: var(--b4-primario-hover) !important;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    color: var(--b4-branco);
    background-color: var(--b4-primario-hover);
    border-color: var(--b4-primario-hover);
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show.dropdown-toggle,
.show > .btn-primary.dropdown-toggle {
    color: var(--b4-branco) !important;
    background-color: var(--b4-primario-ativo) !important;
    border-color: var(--b4-primario-ativo) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--b4-branco) !important;
    background-color: var(--b4-primario) !important;
    border-color: var(--b4-primario) !important;
    opacity: .55;
}

.btn-outline-primary {
    color: var(--b4-primario);
    border-color: var(--b4-primario);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--b4-branco) !important;
    background-color: var(--b4-primario) !important;
    border-color: var(--b4-primario) !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--b4-primario-rgb), 0.3) !important;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--b4-primario) !important;
    background-color: transparent !important;
    border-color: var(--b4-primario) !important;
    opacity: .55;
}

.btn-label-primary {
    color: var(--b4-primario);
    background: var(--b4-label-fundo);
    border-color: transparent;
}

.btn-label-primary:hover,
.btn-label-primary:active,
.btn-label-primary.active {
    color: var(--b4-branco) !important;
    background: var(--b4-primario) !important;
    border-color: transparent !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--b4-primario-rgb), 0.3) !important;
}

/* Info: Azul Destaque */
.btn-info {
    color: var(--b4-branco);
    background-color: var(--b4-azul-destaque);
    border-color: var(--b4-azul-destaque);
    box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--b4-azul-destaque-rgb), 0.3);
}

.btn-info:hover,
.btn-info:focus {
    color: var(--b4-branco) !important;
    background-color: var(--b4-azul-destaque-hover) !important;
    border-color: var(--b4-azul-destaque-hover) !important;
}

.btn-info:active,
.btn-info.active {
    color: var(--b4-branco) !important;
    background-color: var(--b4-azul-destaque-ativo) !important;
    border-color: var(--b4-azul-destaque-ativo) !important;
}

.btn-info.disabled,
.btn-info:disabled {
    color: var(--b4-branco) !important;
    background-color: var(--b4-azul-destaque) !important;
    border-color: var(--b4-azul-destaque) !important;
    opacity: .55;
}

.btn-outline-info {
    color: var(--b4-azul-destaque);
    border-color: var(--b4-azul-destaque);
    background: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info.active {
    color: var(--b4-branco) !important;
    background-color: var(--b4-azul-destaque) !important;
    border-color: var(--b4-azul-destaque) !important;
}

.btn-label-info {
    color: var(--b4-azul-destaque);
    background: var(--b4-azul-destaque-suave);
    border-color: transparent;
}

.btn-label-info:hover,
.btn-label-info:active,
.btn-label-info.active {
    color: var(--b4-branco) !important;
    background: var(--b4-azul-destaque) !important;
    border-color: transparent !important;
}

/* Secondary: Cinza com texto Grafite */
.btn-secondary {
    color: var(--b4-secundario-texto);
    background-color: var(--b4-secundario-fundo);
    border-color: var(--b4-secundario-fundo);
    box-shadow: none;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--b4-secundario-texto) !important;
    background-color: var(--b4-secundario-hover) !important;
    border-color: var(--b4-secundario-hover) !important;
}

.btn-secondary:active,
.btn-secondary.active {
    color: var(--b4-secundario-texto) !important;
    background-color: var(--b4-secundario-hover) !important;
    border-color: var(--b4-secundario-hover) !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--b4-secundario-texto) !important;
    background-color: var(--b4-secundario-fundo) !important;
    border-color: var(--b4-secundario-fundo) !important;
    opacity: .55;
}

.btn-outline-secondary {
    color: var(--b4-secundario-texto);
    border-color: var(--b4-secundario-fundo);
    background: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--b4-secundario-texto) !important;
    background-color: var(--b4-label-fundo) !important;
    border-color: var(--b4-secundario-hover) !important;
    box-shadow: none !important;
}

.btn-label-secondary {
    color: var(--b4-secundario-texto);
    background: var(--b4-label-fundo);
    border-color: transparent;
}

.btn-label-secondary:hover,
.btn-label-secondary:active,
.btn-label-secondary.active {
    color: var(--b4-secundario-texto) !important;
    background: var(--b4-secundario-fundo) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Dark: Grafite */
.btn-dark {
    color: var(--b4-branco);
    background-color: var(--b4-grafite);
    border-color: var(--b4-grafite);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
    color: var(--b4-branco) !important;
    background-color: var(--b4-azul-principal-ativo) !important;
    border-color: var(--b4-azul-principal-ativo) !important;
}

.btn-default {
    /*background-color: #ECECEC !important;*/
}

.btn-red {
    color: #8B1D28 !important;
}

.btn-red:hover {
    color: #8B1D28 !important;
}


/* ==========================================================================
   10. Tabelas e DataTables
   ========================================================================== */

.table-hover:not(.table-loading) tbody tr {
    cursor: pointer;
}

.table-loading tbody tr {
    cursor: wait !important;
}

.bg-total {
    background-color: #D9D7D7 !important;
    color: #000 !important;
    font-weight: 700 !important;
}

.tr-red {
    background-color: #FFDADA !important;
}

.tr-red > td {
    background-color: #FFDADA !important;
}

.dataTables_wrapper {
    overflow-x: hidden;
}

.dataTables_length > label,
.dataTables_filter > label {
    width: 100%;
}

.dataTables_length > label > select {
    margin-left: .5rem;
}

.dataTables_wrapper > .row > .col-sm-12 {
    padding-left: 0 !important;
}

.table-action-button {
    box-shadow: none !important;
    outline: 0 !important;
    border: 0;
    background: transparent;
    font-size: .75rem;
    margin: 0 .25rem;
}

div.dataTables_wrapper div.dt-row div.col-sm-12 {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
}


/* ==========================================================================
   11. Painéis e abas
   ========================================================================== */

.panel-default > .panel-heading {
    color: #333;
    background-color: #ECECEC;
    border-color: #ddd;
    padding: 8px;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    color: inherit;
    font-weight: 400;
}

.panel-body {
    padding: 10px !important;
    border: 1px solid #ECECEC;
    border-top: none;
}

.tab-content {
    padding: 1.5rem;
    border-radius: 0.375rem;
    padding: 5px;
    padding-top: 10px;
}


/* ==========================================================================
   12. Modais e diálogos
   ========================================================================== */

/* Bootstrap modal */
.modal-footer {
    text-align: center;
}

.modal-footer {
    justify-content: center;
}

.modal-botoes {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.modal-stack {
    z-index: 99 !important;
}

/* Bootbox */
.bootbox-body {
    font-size: 12px;
    text-align: center;
}

/* BootstrapDialog */
.bootstrap-dialog.type-default .modal-header {
    /* background-color: var(--sec-color); */
    border-top: 5px solid var(--main-color);
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.bootstrap-dialog.type-default .bootstrap-dialog-title {
    color: var(--sec-color);
    /* font-size: 14px; */
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height);
    margin-top: 0;
    font-weight: 500;
    color: #566a7f;
    font-size: 1.125rem;
}

.bootstrap-dialog-header {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    /* padding: var(--bs-modal-header-padding); */
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.bootstrap-dialog-header {
    width: 100%;
}

.bootstrap-dialog-close-button button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
    color: #333;
    border: none;
    border-radius: 20%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 20px;
    transition: all ease-in 0.1s;
    margin-top: -1em;
    margin-right: -1em;
    /* font-size: ; */
}

.bootstrap-dialog-close-button button:hover {
    margin-top: -0.7em;
    margin-right: -0.7em;
}

/* SweetAlert */
.swal-text {
    font-size: 16px;
    position: relative;
    float: none;
    line-height: normal;
    vertical-align: top;
    text-align: left;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    font-weight: 400;
    color: rgba(0,0,0,.64);
    max-width: calc(100% - 20px);
    overflow-wrap: break-word;
    box-sizing: border-box;
    text-align: center;
}

.swal-footer {
    text-align: center;
    padding-top: 13px;
    margin-top: 13px;
    padding: 13px 16px;
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.swal-button {
    background-color: var(--red);
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    margin: 0;
    cursor: pointer;
}

.swal-button:hover {
    background-color: #631B22 !important;
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 24px;
    margin: 0;
    cursor: pointer;
}


/* ==========================================================================
   13. jQuery UI
   ========================================================================== */

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid var(--main-color) !important;
    background: var(--main-color) !important;
    font-weight: normal;
    color: #ffffff !important;
}


/* ==========================================================================
   14. Labels
   ========================================================================== */

.label {
    font-size: 90% !important;
}

.label-primary {
    background-color: #F4F4F4 !important;
    color: #333 !important;
    border-left: 5px solid #ddd;
    padding-left: 5px !important;
}

.label-aprovado {
    font-size: 1.1em !important;
    display: block;
    background-color: #81C250;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    font-weight: normal;
    /* font-size: 20px; */
}

.label-reprovado {
    font-size: 1.1em !important;
    display: block;
    background-color: #E97670;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    font-weight: normal;
}


/* ==========================================================================
   15. Timeline
   ========================================================================== */

ul.timeline {
    list-style-type: none;
    position: relative;
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline > li {
    margin: 20px 0;
    padding-left: 50px;
}

ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}


/* ==========================================================================
   16. Telas específicas
   ========================================================================== */

/* Seleção de plano */
.box-tipo-plano {
    /* border: 1px solid red; */
    padding: 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: var(--main-color); */
    font-size: 1.2em;
}

.box-tipo-plano > input {
    /* display: none; */
    margin: 10px;
}

.plano-selecionado {
    background-color: #FDFFE2;
}

/* Moldura de imagem */
.moldura {
    width: 100%;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

.moldura > img {
    max-width: 95%;
    position: relative;
    margin: 0 auto;
    margin-top: 10px;
}

/* Aprovar/Reprovar */
.texto-post {
    width: 100%;
    min-height: 250px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.1em;
}

.row-aprovar-reprovar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.row-aprovar-reprovar > div {
    padding: 8px;
}

.row-aprovar-reprovar > .item {
    font-weight: 700 !important;
}

.botoes-aprovar-reprovar {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px !important;
    align-self: normal;
    border: 1px solid #ddd;
}

.botoes-aprovar-reprovar > a {
    background-color: #fff;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: inherit;
    text-decoration: none;
}

.botoes-aprovar-reprovar > a.aprovar {

}

.botoes-aprovar-reprovar > a.aprovar.selecionado {
    background-color: #98E768 !important;
    color: #000 !important;
    font-weight: 700 !important;
}

.botoes-aprovar-reprovar > a.reprovar {

}

.botoes-aprovar-reprovar > a.reprovar.selecionado {
    background-color: #E04810 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.reprovado-box {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #E79E80;
}

.imagens-cliente {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.imagens-cliente > img {
    max-width: 30%;
    margin-bottom: 10px;
}

/* Postagens */
.posts-programar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.postagem {
    width: 30%;
    margin: 1%;
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 2%;
    box-shadow: 0px 2px 2px #ddd;
    padding: 10px;
}

.postagem > h3 {

}

.postagem > img {
    max-width: 100%;
    margin-bottom: 15px;
}

.postagem > textarea {
    width: 95%;
    background-color: #fff;
    border: none;
}

.postagem > p {
    width: 100%;
    background-color: #fff !important;
    border: none;
    text-align: justify;
}

.reprovada {
    position: relative;
}

.post-reprovado-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(255,255,255,1);
    /* background-color: #fff; */
    /* filter: blur(8px); */
    /* -webkit-filter: blur(8px); */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.post-reprovado-overlay > p {
    background-color: red;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
}

/* Histórico do processo */
.historico-processo {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.historico-item {
    width: 100%;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    box-shadow: 2px 2px 2px #ddd;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.historico-item > .data {
    width: 10%;
    padding: 5px;
    text-align: center;
}

.historico-item > .data > .large {
    font-size: 1.5em;
}

.registro {
    width: 90%;
    /* border: 1px solid red; */
    /* flex-shrink: unset; */
    align-self: normal;
    padding: 10px;
    border-left: 1px solid #ddd;
}

/* Extrato */
.ag-btn-extrato_icone {
    /* border: 1px solid red; */
    padding: 10px;
    text-align: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    background-color: var(--green);
    color: #fff;
}

.ag-btn-extrato_label {
    font-weight: 700;
    margin-left: 10px;
    color: #fff;
    background-color: var(--green);
    padding: 5px;
    border-radius: 8px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 0.9em;
    font-weight: 700;
}


/* ==========================================================================
   17. Cores, textos e utilitários
   ========================================================================== */

.bg-primary {
    color: #1b3548;
    background-color: #e9ecf2;
}

a.bg-primary:hover {
    background-color: #e9ecf2;
}

.bg-success,
.bg-green {
    color: #fff;
    background-color: #8ad919;
}

a.bg-success:hover,
a.bg-green:hover {
    background-color: #8ad919;
}

.bg-success a,
.bg-green a {
    color: rgba(255, 255, 255, 0.75);
}

.alert-warning {
    /* color: #333 !important; */
}

.alert-info {
    color: #333 !important;
}

.text-success {
    color: #2CAD37 !important;
}

.text-danger {
    color: #AD392C !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.p-relative {
    position: relative;
}


/* ==========================================================================
   18. Responsivo
   ========================================================================== */

/* Desktop (a partir de 992px) */
@media screen and (min-width: 992px) {
    .row.card-row-space .card-col-space-start {
        padding-left: 0;
        padding-right: .75rem;
    }

    .row.card-row-space .card-col-space-middle {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .row.card-row-space .card-col-space-end {
        padding-left: .75rem;
        padding-right: 0;
    }
}

/* Até 992px */
@media screen and (max-width: 992px) {
    .row.card-row-space .card-col-space-start {
        padding-left: 0;
        padding-right: 0;
    }

    .row.card-row-space .card-col-space-middle {
        padding-left: 0;
        padding-right: 0;
    }

    .row.card-row-space .card-col-space-end {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Até 998px: DataTables */
@media screen and (max-width: 998px) {
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left !important;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: flex-start !important;
    }

    div.dataTables_wrapper .row:nth-child(1) .col-sm-12.col-md-6:nth-child(2) {
        display: flex;
    }

    div.dataTables_wrapper div.dt-row div.col-sm-12 {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Mobile (até 768px) */
@media screen and (max-width: 768px) {
    /* Navbar */
    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #fff !important;
    }

    .navbar-nav {
        margin-left: 0px;
    }

    /* Footer */
    .main-footer .links {
        text-align: center;
        padding-right: 0px;
    }

    .main-footer .logo-brand {
        text-align: center;
    }

    /* Perfil */
    .box-profile {
        margin-right: -30px;
        width: 100%;
    }

    /* Formulário de filtro */
    .ag-form-filtro input[type='text'],select {
        margin-right: 0px !important;
        margin-bottom: 8px;
    }

    /* Modais */
    .modal .modal-header .btn-close {
        margin: .25rem 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    .modal-fullscreen-md-down {
        margin: 0 !important;
    }

    .modal .modal-dialog:not(.modal-fullscreen) {
        padding: 0px !important;
    }

    /* Extrato */
    .ag-btn-extrato_label {
        padding: 5px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.75em;
    }

    .ag-btn-extrato_icone {
        /* border: 1px solid red; */
        width: 30px;
        height: 30px;
        font-size: 0.9em;
    }

    /* Utilitários */
    .btn-full-mobile {

    }

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