@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap);
#page-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1002;
    background-color: var(--bs-header-bg);
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
.navbar-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    height: 70px;
    padding: 0 calc(24px * .5) 0 0
}
.navbar-header .dropdown .show.header-item {
    background-color: var(--bs-tertiary-bg)
}
.navbar-brand-box {
    padding: 0 1.5rem;
    text-align: center;
    width: 250px
}
.logo {
    line-height: 70px
}
.logo .logo-sm {
    display: none
}
.logo-light {
    display: none
}
.app-search {
    padding: calc(32px * .5) 0
}
.app-search .form-control {
    border: none;
    height: 38px;
    padding-left: 40px;
    padding-right: 20px;
    background-color: var(--bs-topbar-search-bg);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 30px
}
.app-search span {
    position: absolute;
    z-index: 10;
    font-size: 16px;
    line-height: 38px;
    left: 13px;
    top: 0;
    color: var(--bs-secondary-color)
}
.megamenu-list li {
    position: relative;
    padding: 5px 0
}
.megamenu-list li a {
    color: var(--bs-body-color)
}
@media (max-width:992px) {
    .navbar-brand-box {
        width: auto
    }
    .logo span.logo-lg {
        display: none
    }
    .logo span.logo-sm {
        display: inline-block
    }
}
.page-content {
    padding: 15px 24px 24px 24px;
}
.header-item {
    height: 70px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: var(--bs-header-item-color);
    border: 0;
    border-radius: 0
}
.header-item:hover {
    color: var(--bs-header-item-color)
}
.header-profile-user {
    height: 36px;
    width: 36px;
    background-color: var(--bs-tertiary-bg);
    padding: 3px
}
.noti-icon i {
    font-size: 22px;
    color: var(--bs-header-item-color)
}
.noti-icon .badge {
    position: absolute;
    top: 12px;
    right: 4px
}
.notification-item .d-flex {
    padding: .75rem 1rem
}
.notification-item .d-flex:hover {
    background-color: var(--bs-tertiary-bg)
}
.dropdown-icon-item {
    display: block;
    border-radius: 3px;
    line-height: 34px;
    text-align: center;
    padding: 15px 0 9px;
    display: block;
    border: 1px solid transparent;
    color: var(--bs-secondary-color)
}
.dropdown-icon-item img {
    height: 24px
}
.dropdown-icon-item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.dropdown-icon-item:hover {
    border-color: var(--bs-border-color)
}
.fullscreen-enable [data-bs-toggle=fullscreen] .bx-fullscreen::before {
    content: "\ea3f"
}
body[data-topbar=dark] #page-topbar {
    background-color: var(--bs-header-dark-bg)
}
body[data-topbar=dark] .navbar-header .dropdown .show.header-item {
    background-color: rgba(255, 255, 255, .05)
}
body[data-topbar=dark] .navbar-header .waves-effect .waves-ripple {
    background: rgba(255, 255, 255, .4)
}
body[data-topbar=dark] .header-item {
    color: var(--bs-header-dark-item-color)
}
body[data-topbar=dark] .header-item:hover {
    color: var(--bs-header-dark-item-color)
}
body[data-topbar=dark] .header-profile-user {
    background-color: rgba(255, 255, 255, .25)
}
body[data-topbar=dark] .noti-icon i {
    color: var(--bs-header-dark-item-color)
}
body[data-topbar=dark] .logo-dark {
    display: none
}
body[data-topbar=dark] .logo-light {
    display: block
}
body[data-topbar=dark] .app-search .form-control {
    background-color: rgba(var(--bs-topbar-search-bg), .07);
    color: #fff
}
body[data-topbar=dark] .app-search input.form-control::-webkit-input-placeholder, body[data-topbar=dark] .app-search span {
    color: rgba(255, 255, 255, .5)
}
body[data-sidebar=dark] .navbar-brand-box {
    background: #2a3042
}
body[data-sidebar=dark] .logo-dark {
    display: none
}
body[data-sidebar=dark] .logo-light {
    display: block
}
@media (max-width:600px) {
    .navbar-header .dropdown {
        position: static
    }
    .navbar-header .dropdown .dropdown-menu {
        left: 10px !important;
        right: 10px !important
    }
}
@media (max-width:380px) {
    .navbar-brand-box {
        display: none
    }
}
body[data-layout=horizontal] .navbar-brand-box {
    width: auto
}
body[data-layout=horizontal] .page-content {
    margin-top: 70px;
    padding: calc(55px + 24px) calc(24px * .5) 60px calc(24px * .5)
}
@media (max-width:992px) {
    body[data-layout=horizontal] .page-content {
        margin-top: 15px
    }
}
.page-title-box {
    padding-bottom: 24px
}
.page-title-box .breadcrumb {
    background-color: transparent;
    padding: 0
}
.page-title-box h4 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px !important
}
.footer {
    bottom: 0;
    padding: 20px calc(24px * .75);
    position: absolute;
    right: 0;
    color: var(--bs-footer-color);
    left: 250px;
    height: 60px;
    background-color: var(--bs-footer-bg)
}
@media (max-width:991.98px) {
    .footer {
        left: 0
    }
}
.vertical-collpsed .footer {
    left: 70px
}
@media (max-width:991.98px) {
    .vertical-collpsed .footer {
        left: 0
    }
}
body[data-layout=horizontal] .footer {
    left: 0 !important
}
.right-bar {
    background-color: var(--bs-secondary-bg);
    -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02);
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02);
    display: block;
    position: fixed;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    width: 280px;
    z-index: 9999;
    float: right !important;
    right: -290px;
    top: 0;
    bottom: 0
}
.right-bar .right-bar-toggle {
    background-color: var(--bs-dark);
    height: 24px;
    width: 24px;
    line-height: 24px;
    display: block;
    color: var(--bs-gray-200);
    text-align: center;
    border-radius: 50%
}
.right-bar .right-bar-toggle:hover {
    background-color: var(--bs-dark)
}
.rightbar-overlay {
    background-color: rgba(52, 58, 64, .55);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 9998;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out
}
.right-bar-enabled .right-bar {
    right: 0
}
.right-bar-enabled .rightbar-overlay {
    display: block
}
@media (max-width:767.98px) {
    .right-bar {
        overflow: auto
    }
    .right-bar .slimscroll-menu {
        height: auto !important
    }
}
.metismenu {
    margin: 0
}
.metismenu li {
    display: block;
    width: 100%
}
.metismenu .mm-collapse {
    display: none
}
.metismenu .mm-collapse:not(.mm-show) {
    display: none
}
.metismenu .mm-collapse.mm-show {
    display: block
}
.metismenu .mm-collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility
}
.vertical-menu {
    width: 250px;
    z-index: 1001;
    background: var(--bs-sidebar-bg);
    border-right: 1px solid rgba(100, 100, 100, 0.2); /* Tom de cinza leve e transparente */
    height: 100%; /* Garante que a borda cubra toda a altura */
    bottom: 0;
    margin-top: 0;
    position: fixed;
    top: 0px;
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
.main-content {
    margin-left: 250px;
    overflow: visible;
}
.main-content .content {
    padding: 0 15px 10px 15px;
    margin-top: 70px
}
#sidebar-menu {
    padding: 10px 0 30px 0
}
#sidebar-menu .mm-active>.has-arrow:after {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}
#sidebar-menu .has-arrow:after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
    float: right;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    font-size: 0.75rem;
}
#sidebar-menu ul li a {
    display: block;
    padding: .625rem 1.5rem;
    color: var(--bs-sidebar-text-color);
    position: relative;
    font-size: 14px;
    -webkit-transition: all .4s;
    transition: all .4s
}
#sidebar-menu ul li a i {
    display: inline-block;
    min-width: 1.75rem;
    padding-bottom: .125em;
    font-size: 1.25rem;
    line-height: 1.40625rem;
    vertical-align: middle;
    color: var(--bs-sidebar-text-color);
    -webkit-transition: all .4s;
    transition: all .4s
}

.icon-picker-modal {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow);
}

.icon-picker-section {
    margin-bottom: 1.5rem;
}

.icon-picker-title {
    color: var(--bs-body-color);
    font-weight: 600;
    margin-bottom: .75rem;
}

.icon-picker-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: .5rem;
}

.icon-color {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.icon-color.is-active {
    border-color: var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.icon-color.is-active::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--bs-body-bg);
    border-bottom: 2px solid var(--bs-body-bg);
    transform: rotate(-45deg);
    display: block;
}

/* Alça de arraste das linhas para reordenar (SortableJS) */
.cor-drag-handle,
.drag-handle {
    cursor: grab;
    text-align: center;
}

/* Seletor da paleta central de cores (base/color_palette_field.html) */
.cor-paleta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cor-paleta-opcao {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    display: inline-block;
}

.cor-paleta .cor-paleta-opcao.is-active {
    border-color: var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.icon-picker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
      gap: .5rem;
      max-height: 50vh;
      overflow-y: auto;
      padding-right: .25rem;
}
.icon-picker-search {
      margin-bottom: .75rem;
}

.icon-item {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.icon-item i {
    font-size: 1.1rem;
}

.icon-item:hover {
    border-color: var(--bs-primary);
    box-shadow: var(--bs-box-shadow-sm);
    transform: translateY(-1px);
}

.icon-item.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.icon-preview {
    width: 36px;
    height: 36px;
    border-radius: var(--bs-border-radius);
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.icon-preview i {
    font-size: 1.1rem;
}

/* Modificador compacto do .icon-preview (ex.: chips de conta em Movimentos — Caixa).
   Precisa sobrepor o `.icon-preview i { font-size: 1.1rem }` acima, que mira o
   <i> diretamente e ignora um font-size posto no wrapper. */
.icon-preview.icon-preview-sm {
    width: 24px;
    height: 24px;
}

.icon-preview.icon-preview-sm i {
    font-size: .8rem;
}

.icon-preview.icon-preview-sm .icone-svg {
    width: 14px;
    height: 14px;
}

/* Cartões de conta de Movimentos — Caixa: seleção bem visível (borda + anel +
   fundo levemente tingido de primary), acima do simples `border-primary`. */
.conta-chip {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.conta-chip.is-selected {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35);
    background-color: rgba(var(--bs-primary-rgb), .07);
}

.icone-svg {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block;
}

.icon-item-svg img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.icon-item-svg.is-active {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Ícone SVG "sem fundo": preserva as cores originais do arquivo (sem o recolorir
   branco) e o wrapper .icon-preview troca a cor da paleta por fundo branco via :has().
   O !important é necessário porque os consumidores aplicam o fundo por style inline. */
.icone-svg.icone-svg-original,
.icon-item-svg img.icone-svg-original {
    filter: none;
}

.icon-preview:has(> .icone-svg-original) {
    background-color: var(--bs-white) !important;
    border: 1px solid var(--bs-border-color);
}

.icon-item.icon-item-sem-fundo,
.icon-item.icon-item-sem-fundo.is-active {
    background: var(--bs-white) !important;
}

/* Paleta de cor desabilitada quando o ícone selecionado é "sem fundo" */
.icon-picker-colors.is-disabled {
    opacity: .35;
    pointer-events: none;
}

.icon-picker-subtitle {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    margin: .75rem 0 .5rem;
}

.icon-picker-grid-svg {
    margin-bottom: .5rem;
    max-height: 160px;
}

.icon-picker-grid-svg:empty {
    display: none;
}

/* Resultados da BUSCA NA WEB do seletor de ícones (Iconify — core/api/iconify.py).
   Fundo BRANCO nos dois temas: o SVG da Iconify vem com `fill="currentColor"`,
   que dentro de um <img> resolve para preto — sobre o fundo do tema escuro ele
   sumiria. Mesma exceção já documentada do .icon-item-sem-fundo. O resultado
   também NÃO é recolorido pela paleta: ele ainda não é um ícone do sistema. */
.icon-picker-web-grid {
    max-height: 190px;
    margin-bottom: .25rem;
}

.icon-item.icon-web-item,
.icon-item.icon-web-item.is-active {
    background: var(--bs-white);
}

.icon-item.icon-web-item img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.icon-item.icon-web-item.is-active {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

#sidebar-menu ul li a:hover {
    color:  var(--bs-active-menu) !important
}
#sidebar-menu ul li a:hover i {
    color:  var(--bs-active-menu) !important
}
#sidebar-menu ul li .badge {
    margin-top: 4px
}
#sidebar-menu ul li ul.sub-menu {
    padding: 0
}
#sidebar-menu ul li ul.sub-menu li a {
    padding: .4rem 1.5rem .4rem 3.5rem;
    font-size: 14px;
    color: var(--bs-sidebar-text-color);
}
#sidebar-menu ul li ul.sub-menu li a:hover {
    color:  var(--bs-active-menu) !important
}
#sidebar-menu ul li ul.sub-menu li ul.sub-menu {
    padding: 0
}
#sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
    padding: .4rem 1.5rem .4rem 4.5rem;
    font-size: 14px
}
.menu-title {
    padding: 12px 20px !important;
    letter-spacing: .05em;
    pointer-events: none;
    cursor: default;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--bs-sidebar-text-color);
    font-weight: 800
}
.mm-active {
    color:  var(--bs-active-menu) !important
}
.mm-active>a {
    color:  var(--bs-active-menu) !important
}
.mm-active>a i {
    color:  var(--bs-active-menu) !important
}
.mm-active .active {
    color:  var(--bs-active-menu) !important   
}
.mm-active .active i {
    color:  var(--bs-active-menu) !important
}
.mm-active>i {
    color:  var(--bs-active-menu) !important
}
@media (max-width:992px) {
    .vertical-menu {
        display: none
    }
    .main-content {
        margin-left: 0 !important
    }
    body.sidebar-enable .vertical-menu {
        display: block
    }
}
.vertical-collpsed .main-content {
    margin-left: 70px
}
.vertical-collpsed .navbar-brand-box {
    width: 70px !important
}
.vertical-collpsed .logo span.logo-lg {
    display: none
}
.vertical-collpsed .logo span.logo-sm {
    display: block
}
.vertical-collpsed .vertical-menu {
    position: absolute;
    width: 70px !important;
    z-index: 5
}
.vertical-collpsed .vertical-menu .simplebar-content-wrapper, .vertical-collpsed .vertical-menu .simplebar-mask {
    overflow: visible !important
}
.vertical-collpsed .vertical-menu .simplebar-scrollbar {
    display: none !important
}
.vertical-collpsed .vertical-menu .simplebar-offset {
    bottom: 0 !important
}
.vertical-collpsed .vertical-menu #sidebar-menu .badge, .vertical-collpsed .vertical-menu #sidebar-menu .collapse.in, .vertical-collpsed .vertical-menu #sidebar-menu .menu-title {
    display: none !important
}
.vertical-collpsed .vertical-menu #sidebar-menu .nav.collapse {
    height: inherit !important
}
.vertical-collpsed .vertical-menu #sidebar-menu .has-arrow:after {
    display: none
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li {
    position: relative;
    white-space: nowrap
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a {
    padding: 15px 20px;
    min-height: 55px;
    -webkit-transition: none;
    transition: none
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a:active, .vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a:focus, .vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a:hover {
    color: #383c40
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a i {
    font-size: 1.45rem;
    margin-left: 4px
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a span {
    display: none;
    padding-left: 25px
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
    position: relative;
    width: calc(190px + 70px);
    color: #556ee6;
    background-color: #f5f5f5;
    -webkit-transition: none;
    transition: none
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a i {
    color: #556ee6
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a span {
    display: inline
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul {
    display: block;
    left: 70px;
    position: absolute;
    width: 190px;
    height: auto !important;
    -webkit-box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1);
    box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1)
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul ul {
    -webkit-box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1);
    box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1)
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a {
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 8px 20px;
    position: relative;
    width: 190px;
    z-index: 6;
    color: #545a6d
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a:hover {
    color: #383c40
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul ul {
    padding: 5px 0;
    z-index: 9999;
    display: none;
    background-color: #fff
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul ul li:hover>ul {
    display: block;
    left: 190px;
    height: auto !important;
    margin-top: -36px;
    position: absolute;
    width: 190px
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul ul li>a span.pull-right {
    position: absolute;
    right: 20px;
    top: 12px;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}
.vertical-collpsed .vertical-menu #sidebar-menu>ul ul li.active a {
    color: #f8f9fa
}
body[data-sidebar=dark] .vertical-menu {
    background: #262626
}
body[data-sidebar=dark] #sidebar-menu ul li a {
    color: #a6b0cf
}
body[data-sidebar=dark] #sidebar-menu ul li a i {
    color: #6a7187
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover {
    color: #fff
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover i {
    color: #fff
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
    color: #79829c
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #fff
}
body[data-sidebar=dark].vertical-collpsed {
    min-height: 1760px
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
    background: #2e3548;
    color: #fff
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a i {
    color: #fff
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a {
    color: #79829c
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a:hover {
    color: #fff
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu>ul ul {
    background-color: #2a3042
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
    color: #fff !important
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active i {
    color: #fff !important
}
body[data-sidebar=dark] .mm-active {
    color: #fff !important
}
body[data-sidebar=dark] .mm-active>a {
    color: #fd7e14 !important
}
body[data-sidebar=dark] .mm-active>a i {
    color: #fd7e14 !important
}
body[data-sidebar=dark] .mm-active>i {
    color: #fff !important
}
body[data-sidebar=dark] .mm-active .active {
    color: #fd7e14 !important
}
body[data-sidebar=dark] .mm-active .active i {
    color: #fd7e14 !important
}
body[data-sidebar=dark] .menu-title {
    color: #6a7187
}
body[data-layout=horizontal] .main-content {
    margin-left: 0 !important
}
body[data-sidebar-size=small] .navbar-brand-box {
    width: 160px
}
body[data-sidebar-size=small] .vertical-menu {
    width: 160px;
    text-align: center
}
body[data-sidebar-size=small] .vertical-menu .badge, body[data-sidebar-size=small] .vertical-menu .has-arrow:after {
    display: none !important
}
body[data-sidebar-size=small] .main-content {
    margin-left: 160px
}
body[data-sidebar-size=small] .footer {
    left: 160px
}
@media (max-width:991.98px) {
    body[data-sidebar-size=small] .footer {
        left: 0
    }
}
body[data-sidebar-size=small] #sidebar-menu ul li.menu-title {
    background-color: #2e3548
}
body[data-sidebar-size=small] #sidebar-menu ul li a i {
    display: block
}
body[data-sidebar-size=small] #sidebar-menu ul li ul.sub-menu li a {
    padding-left: 1.5rem
}
body[data-sidebar-size=small] #sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
    padding-left: 1.5rem
}
body[data-sidebar-size=small].vertical-collpsed .main-content {
    margin-left: 70px
}
body[data-sidebar-size=small].vertical-collpsed .vertical-menu #sidebar-menu {
    text-align: left
}
body[data-sidebar-size=small].vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a i {
    display: inline-block
}
body[data-sidebar-size=small].vertical-collpsed .footer {
    left: 70px
}
body[data-sidebar=colored] .vertical-menu {
    background-color: #556ee6
}
body[data-sidebar=colored] .navbar-brand-box {
    background-color: #556ee6
}
body[data-sidebar=colored] .navbar-brand-box .logo-dark {
    display: none
}
body[data-sidebar=colored] .navbar-brand-box .logo-light {
    display: block
}
body[data-sidebar=colored] .mm-active {
    color: #fff !important
}
body[data-sidebar=colored] .mm-active>a {
    color: #fff !important
}
body[data-sidebar=colored] .mm-active>a i {
    color: #fff !important
}
body[data-sidebar=colored] .mm-active .active, body[data-sidebar=colored] .mm-active>i {
    color: #fff !important
}
body[data-sidebar=colored] #sidebar-menu ul li.menu-title {
    color: rgba(255, 255, 255, .6)
}
body[data-sidebar=colored] #sidebar-menu ul li a {
    color: rgba(255, 255, 255, .6)
}
body[data-sidebar=colored] #sidebar-menu ul li a i {
    color: rgba(255, 255, 255, .6)
}
body[data-sidebar=colored] #sidebar-menu ul li a.waves-effect .waves-ripple {
    background: rgba(255, 255, 255, .1)
}
body[data-sidebar=colored] #sidebar-menu ul li a:hover {
    color: #fff
}
body[data-sidebar=colored] #sidebar-menu ul li a:hover i {
    color: #fff
}
body[data-sidebar=colored] #sidebar-menu ul li ul.sub-menu li a {
    color: rgba(255, 255, 255, .5)
}
body[data-sidebar=colored] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #fff
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
    background-color: #5e76e7;
    color: #fff
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a i {
    color: #fff
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
    color: #556ee6 !important
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #556ee6
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active {
    color: #556ee6 !important
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active>a {
    color: #556ee6 !important
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active>a i {
    color: #556ee6 !important
}
.topnav {
    background: var(--bs-topnav-bg);
    padding: 0 calc(24px * .5);
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    margin-top: 70px;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100
}
.topnav .topnav-menu {
    margin: 0;
    padding: 0
}
.topnav .navbar-nav .nav-link {
    font-size: 14px;
    position: relative;
    padding: 1rem 1.3rem;
    color: var(--bs-menu-item-color)
}
.topnav .navbar-nav .nav-link i {
    font-size: 15px
}
.topnav .navbar-nav .nav-link:focus, .topnav .navbar-nav .nav-link:hover {
    color: var(--bs-menu-item-active-color);
    background-color: transparent
}
.topnav .navbar-nav .dropdown-item {
    color: var(--bs-menu-item-color)
}
.topnav .navbar-nav .dropdown-item.active, .topnav .navbar-nav .dropdown-item:hover {
    color: var(--bs-menu-item-active-color)
}
.topnav .navbar-nav .nav-item .nav-link.active {
    color: var(--bs-menu-item-active-color)
}
.topnav .navbar-nav .dropdown.active>a {
    color: var(--bs-menu-item-active-color);
    background-color: transparent
}
@media (min-width:1200px) {
    body[data-layout=horizontal] .container-fluid, body[data-layout=horizontal] .navbar-header {
        max-width: 85%
    }
}
@media (min-width:992px) {
    .topnav .navbar-nav .nav-item:first-of-type .nav-link {
        padding-left: 0
    }
    .topnav .dropdown-item {
        padding: .5rem 1.5rem;
        min-width: 180px
    }
    .topnav .dropdown.mega-dropdown .mega-dropdown-menu {
        left: 0;
        right: auto
    }
    .topnav .dropdown .dropdown-menu {
        margin-top: 0;
        border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius)
    }
    .topnav .dropdown .dropdown-menu .arrow-down::after {
        right: 15px;
        -webkit-transform: rotate(-135deg) translateY(-50%);
        transform: rotate(-135deg) translateY(-50%);
        position: absolute
    }
    .topnav .dropdown .dropdown-menu .dropdown .dropdown-menu {
        position: absolute;
        top: 0 !important;
        left: 100%;
        display: none
    }
    .topnav .dropdown:hover>.dropdown-menu {
        display: block
    }
    .topnav .dropdown:hover>.dropdown-menu>.dropdown:hover>.dropdown-menu {
        display: block
    }
    .navbar-toggle {
        display: none
    }
}
.arrow-down {
    display: inline-block
}
.arrow-down:after {
    border-color: initial;
    border-style: solid;
    border-width: 0 0 1px 1px;
    content: "";
    height: .4em;
    display: inline-block;
    right: 5px;
    top: 50%;
    margin-left: 10px;
    -webkit-transform: rotate(-45deg) translateY(-50%);
    transform: rotate(-45deg) translateY(-50%);
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    width: .4em
}
@media (max-width:1199.98px) {
    .topnav-menu .navbar-nav li:last-of-type .dropdown .dropdown-menu {
        right: 100%;
        left: auto
    }
}
@media (max-width:991.98px) {
    .navbar-brand-box .logo-dark {
        display: var(--bs-display-block)
    }
    .navbar-brand-box .logo-dark span.logo-sm {
        display: var(--bs-display-block)
    }
    .navbar-brand-box .logo-light {
        display: var(--bs-display-none)
    }
    .topnav {
        max-height: 360px;
        overflow-y: auto;
        padding: 0
    }
    .topnav .navbar-nav .nav-link {
        padding: .75rem 1.1rem
    }
    .topnav .dropdown .dropdown-menu {
        background-color: transparent;
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-left: 15px
    }
    .topnav .dropdown .dropdown-menu.dropdown-mega-menu-xl {
        width: auto
    }
    .topnav .dropdown .dropdown-menu.dropdown-mega-menu-xl .row {
        margin: 0
    }
    .topnav .dropdown .dropdown-item {
        position: relative;
        background-color: transparent
    }
    .topnav .dropdown .dropdown-item.active, .topnav .dropdown .dropdown-item:active {
        color: #556ee6
    }
    .topnav .arrow-down::after {
        right: 15px;
        position: absolute
    }
}
@media (min-width:992px) {
    body[data-layout=horizontal][data-topbar=light] .navbar-brand-box .logo-dark {
        display: var(--bs-display-block)
    }
    body[data-layout=horizontal][data-topbar=light] .navbar-brand-box .logo-light {
        display: var(--bs-display-none)
    }
    body[data-layout=horizontal][data-topbar=light] .topnav {
        background-color: #556ee6
    }
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link {
        color: rgba(255, 255, 255, .6)
    }
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus, body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover {
        color: rgba(255, 255, 255, .9)
    }
    body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav>.dropdown.active>a {
        color: rgba(255, 255, 255, .9) !important
    }
}
body[data-layout=horizontal][data-topbar=colored] #page-topbar {
    background-color: #556ee6;
    -webkit-box-shadow: none;
    box-shadow: none
}
body[data-layout=horizontal][data-topbar=colored] .logo-dark {
    display: none
}
body[data-layout=horizontal][data-topbar=colored] .logo-light {
    display: block
}
body[data-layout=horizontal][data-topbar=colored] .app-search .form-control {
    background-color: rgba(var(--bs-topbar-search-bg), .07);
    color: #fff
}
body[data-layout=horizontal][data-topbar=colored] .app-search input.form-control::-webkit-input-placeholder, body[data-layout=horizontal][data-topbar=colored] .app-search span {
    color: rgba(255, 255, 255, .5)
}
body[data-layout=horizontal][data-topbar=colored] .header-item {
    color: var(--bs-header-dark-item-color)
}
body[data-layout=horizontal][data-topbar=colored] .header-item:hover {
    color: var(--bs-header-dark-item-color)
}
body[data-layout=horizontal][data-topbar=colored] .navbar-header .dropdown .show.header-item {
    background-color: rgba(255, 255, 255, .1)
}
body[data-layout=horizontal][data-topbar=colored] .navbar-header .waves-effect .waves-ripple {
    background: rgba(255, 255, 255, .4)
}
body[data-layout=horizontal][data-topbar=colored] .noti-icon i {
    color: var(--bs-header-dark-item-color)
}
@media (min-width:992px) {
    body[data-layout=horizontal][data-topbar=colored] .topnav {
        background-color: #556ee6
    }
    body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link {
        color: rgba(255, 255, 255, .6)
    }
    body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link:focus, body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link:hover {
        color: rgba(255, 255, 255, .9)
    }
    body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav>.dropdown.active>a {
        color: rgba(255, 255, 255, .9) !important
    }
}
body[data-layout-size=boxed] {
    background-color: var(--bs-boxed-body-bg)
}
body[data-layout-size=boxed] #layout-wrapper {
    background-color: var(--bs-body-bg);
    max-width: 1300px;
    margin: 0 auto;
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
body[data-layout-size=boxed] #page-topbar {
    max-width: 1300px;
    margin: 0 auto
}
body[data-layout-size=boxed] .footer {
    margin: 0 auto;
    max-width: calc(1300px - 250px)
}
body[data-layout-size=boxed].vertical-collpsed .footer {
    max-width: calc(1300px - 70px)
}
body[data-layout=horizontal][data-layout-size=boxed] #layout-wrapper, body[data-layout=horizontal][data-layout-size=boxed] #page-topbar, body[data-layout=horizontal][data-layout-size=boxed] .footer {
    max-width: 100%
}
body[data-layout=horizontal][data-layout-size=boxed] .container-fluid, body[data-layout=horizontal][data-layout-size=boxed] .navbar-header {
    max-width: 1300px
}
@media (min-width:992px) {
    body[data-layout-scrollable=true] #page-topbar, body[data-layout-scrollable=true] .vertical-menu {
        position: absolute
    }
}
@media (min-width:992px) {
    body[data-layout-scrollable=true][data-layout=horizontal] #page-topbar, body[data-layout-scrollable=true][data-layout=horizontal] .topnav {
        position: absolute
    }
}
/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves
 *
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}
.waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    opacity: 0;
    background: rgba(0, 0, 0, .2);
    background: radial-gradient(rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .5) 60%, rgba(255, 255, 255, 0) 70%);
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    -webkit-transform: scale(0) translate(0, 0);
    transform: scale(0) translate(0, 0);
    pointer-events: none
}
.waves-effect.waves-light .waves-ripple {
    background: rgba(255, 255, 255, .4);
    background: radial-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 70%)
}
.waves-effect.waves-classic .waves-ripple {
    background: rgba(0, 0, 0, .2)
}
.waves-effect.waves-classic.waves-light .waves-ripple {
    background: rgba(255, 255, 255, .4)
}
.waves-notransition {
    -webkit-transition: none !important;
    transition: none !important
}
.waves-button, .waves-circle {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%)
}
.waves-button, .waves-button-input, .waves-button:hover, .waves-button:visited {
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    outline: 0;
    color: inherit;
    background-color: rgba(0, 0, 0, 0);
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    z-index: 1
}
.waves-button {
    padding: .85em 1.1em;
    border-radius: .2em
}
.waves-button-input {
    margin: 0;
    padding: .85em 1.1em
}
.waves-input-wrapper {
    border-radius: .2em;
    vertical-align: bottom
}
.waves-input-wrapper.waves-button {
    padding: 0
}
.waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1
}
.waves-circle {
    text-align: center;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 50%
}
.waves-float {
    -webkit-mask-image: none;
    -webkit-box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12);
    box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, .12);
    -webkit-transition: all .3s;
    transition: all .3s
}
.waves-float:active {
    -webkit-box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3);
    box-shadow: 0 8px 20px 1px rgba(0, 0, 0, .3)
}
.waves-block {
    display: block
}
.waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, .4)
}
.waves-effect.waves-primary .waves-ripple {
    background-color: rgba(85, 110, 230, .4)
}
.waves-effect.waves-success .waves-ripple {
    background-color: rgba(52, 195, 143, .4)
}
.waves-effect.waves-info .waves-ripple {
    background-color: rgba(80, 165, 241, .4)
}
.waves-effect.waves-warning .waves-ripple {
    background-color: rgba(241, 180, 76, .4)
}
.waves-effect.waves-danger .waves-ripple {
    background-color: rgba(244, 106, 106, .4)
}
.avatar-xs {
    height: 2rem;
    width: 2rem
}
.avatar-sm {
    height: 3rem;
    width: 3rem
}
.avatar-md {
    height: 4.5rem;
    width: 4.5rem
}
.avatar-lg {
    height: 6rem;
    width: 6rem
}
.avatar-xl {
    height: 7.5rem;
    width: 7.5rem
}
.avatar-title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #556ee6;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}
.avatar-group {
    padding-left: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.avatar-group .avatar-group-item {
    margin-left: -12px;
    border: 2px solid var(--bs-secondary-bg);
    border-radius: 50%;
    -webkit-transition: all .2s;
    transition: all .2s
}
.avatar-group .avatar-group-item:hover {
    position: relative;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
}
.custom-accordion .accordion-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 7px;
    background-color: var(--bs-tertiary-bg);
    padding: 12px 20px;
    color: var(--bs-body-color);
    font-weight: 600;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}
.custom-accordion .accordion-list.collapsed i.accor-plus-icon:before {
    content: "\f0415"
}
.custom-accordion .accordion-list .accor-plus-icon {
    display: inline-block;
    font-size: 16px;
    height: 24px;
    width: 24px;
    line-height: 22px;
    background-color: var(--bs-secondary-bg);
    text-align: center;
    border-radius: 50%
}
.custom-accordion a.collapsed i.accor-down-icon:before {
    content: "\f0140"
}
.custom-accordion .card-body {
    color: var(--prefixsecondary-color)
}
.font-size-10 {
    font-size: 10px !important
}
.font-size-11 {
    font-size: 11px !important
}
.font-size-12 {
    font-size: 12px !important
}
.font-size-13 {
    font-size: 13px !important
}
.font-size-14 {
    font-size: 14px !important
}
.font-size-15 {
    font-size: 15px !important
}
.font-size-16 {
    font-size: 16px !important
}
.font-size-17 {
    font-size: 17px !important
}
.font-size-18 {
    font-size: 18px !important
}
.font-size-20 {
    font-size: 20px !important
}
.font-size-22 {
    font-size: 22px !important
}
.font-size-24 {
    font-size: 24px !important
}
.social-list-item {
    height: 2rem;
    width: 2rem;
    line-height: calc(2rem - 4px);
    display: block;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    color: #adb5bd;
    text-align: center;
    -webkit-transition: all .4s;
    transition: all .4s
}
.social-list-item:hover {
    color: var(--bs-secondary-color);
    background-color: #eff2f7
}
.w-xs {
    min-width: 80px
}
.w-sm {
    min-width: 95px
}
.w-md {
    min-width: 110px
}
.w-lg {
    min-width: 140px
}
.w-xl {
    min-width: 160px
}
.alert-dismissible .btn-close {
    font-size: 10px;
    padding: 1.05rem 1.25rem
}
.chartjs-chart {
    max-height: 300px
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bs-secondary-bg);
    z-index: 9999
}
#status {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px
}
.spinner-chase {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-animation: spinner-chase 2.5s infinite linear both;
    animation: spinner-chase 2.5s infinite linear both
}
.chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: chase-dot 2s infinite ease-in-out both;
    animation: chase-dot 2s infinite ease-in-out both
}
.chase-dot:before {
    content: "";
    display: block;
    width: 25%;
    height: 25%;
    background-color: #556ee6;
    border-radius: 100%;
    -webkit-animation: chase-dot-before 2s infinite ease-in-out both;
    animation: chase-dot-before 2s infinite ease-in-out both
}
.chase-dot:nth-child(1) {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}
.chase-dot:nth-child(1):before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}
.chase-dot:nth-child(2) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}
.chase-dot:nth-child(2):before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}
.chase-dot:nth-child(3) {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}
.chase-dot:nth-child(3):before {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}
.chase-dot:nth-child(4) {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}
.chase-dot:nth-child(4):before {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}
.chase-dot:nth-child(5) {
    -webkit-animation-delay: -.7s;
    animation-delay: -.7s
}
.chase-dot:nth-child(5):before {
    -webkit-animation-delay: -.7s;
    animation-delay: -.7s
}
.chase-dot:nth-child(6) {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}
.chase-dot:nth-child(6):before {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}
@-webkit-keyframes spinner-chase {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes spinner-chase {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@-webkit-keyframes chase-dot {
    100%, 80% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes chase-dot {
    100%, 80% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@-webkit-keyframes chase-dot-before {
    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }
    0%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes chase-dot-before {
    50% {
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }
    0%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
[type=email]::-webkit-input-placeholder, [type=number]::-webkit-input-placeholder, [type=tel]::-webkit-input-placeholder, [type=url]::-webkit-input-placeholder {
    text-align: left
}
[type=email]::-moz-placeholder, [type=number]::-moz-placeholder, [type=tel]::-moz-placeholder, [type=url]::-moz-placeholder {
    text-align: left
}
[type=email]:-ms-input-placeholder, [type=number]:-ms-input-placeholder, [type=tel]:-ms-input-placeholder, [type=url]:-ms-input-placeholder {
    text-align: left
}
[type=email]::-ms-input-placeholder, [type=number]::-ms-input-placeholder, [type=tel]::-ms-input-placeholder, [type=url]::-ms-input-placeholder {
    text-align: left
}
[type=email]::placeholder, [type=number]::placeholder, [type=tel]::placeholder, [type=url]::placeholder {
    text-align: left
}
.form-check {
    position: relative;
    text-align: left
}
.form-check-right {
    padding-left: 0;
    display: inline-block;
    padding-right: 1.5em
}
.form-check-right .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em
}
.form-check-right .form-check-label {
    display: block
}
.form-checkbox-outline .form-check-input {
    border-width: 2px;
    background-color: var(--bs-secondary-bg)
}
.form-checkbox-outline .form-check-input:active {
    -webkit-filter: none;
    filter: none
}
.form-checkbox-outline .form-check-input:checked {
    background-color: var(--bs-secondary-bg) !important
}
.form-checkbox-outline .form-check-input:checked[type=checkbox] {
    background-image: none
}
.form-checkbox-outline .form-check-input:checked:after {
    position: absolute;
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    top: -4px !important;
    left: 1px;
    font-size: 16px;
    color: var(--bs-body-color)
}
.form-radio-outline .form-check-input {
    background-color: var(--bs-secondary-bg);
    position: relative
}
.form-radio-outline .form-check-input:active {
    -webkit-filter: none;
    filter: none
}
.form-radio-outline .form-check-input:checked {
    background-color: var(--bs-secondary-bg) !important
}
.form-radio-outline .form-check-input:checked[type=checkbox] {
    background-image: none
}
.form-radio-outline .form-check-input:checked:after {
    position: absolute;
    content: "";
    top: 3px !important;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%
}
.form-check-primary .form-check-input:checked {
    background-color: #556ee6;
    border-color: #556ee6
}
.form-radio-primary .form-check-input:checked {
    border-color: #556ee6;
    background-color: #556ee6
}
.form-radio-primary .form-check-input:checked:after {
    background-color: #556ee6
}
.form-check-secondary .form-check-input:checked {
    background-color: #74788d;
    border-color: #74788d
}
.form-radio-secondary .form-check-input:checked {
    border-color: #74788d;
    background-color: #74788d
}
.form-radio-secondary .form-check-input:checked:after {
    background-color: #74788d
}
.form-check-success .form-check-input:checked {
    background-color: #34c38f;
    border-color: #34c38f
}
.form-radio-success .form-check-input:checked {
    border-color: #34c38f;
    background-color: #34c38f
}
.form-radio-success .form-check-input:checked:after {
    background-color: #34c38f
}
.form-check-info .form-check-input:checked {
    background-color: #50a5f1;
    border-color: #50a5f1
}
.form-radio-info .form-check-input:checked {
    border-color: #50a5f1;
    background-color: #50a5f1
}
.form-radio-info .form-check-input:checked:after {
    background-color: #50a5f1
}
.form-check-warning .form-check-input:checked {
    background-color: #f1b44c;
    border-color: #f1b44c
}
.form-radio-warning .form-check-input:checked {
    border-color: #f1b44c;
    background-color: #f1b44c
}
.form-radio-warning .form-check-input:checked:after {
    background-color: #f1b44c
}
.form-check-danger .form-check-input:checked {
    background-color: #f46a6a;
    border-color: #f46a6a
}
.form-radio-danger .form-check-input:checked {
    border-color: #f46a6a;
    background-color: #f46a6a
}
.form-radio-danger .form-check-input:checked:after {
    background-color: #f46a6a
}
.form-check-pink .form-check-input:checked {
    background-color: #e83e8c;
    border-color: #e83e8c
}
.form-radio-pink .form-check-input:checked {
    border-color: #e83e8c;
    background-color: #e83e8c
}
.form-radio-pink .form-check-input:checked:after {
    background-color: #e83e8c
}
.form-check-light .form-check-input:checked {
    background-color: #eff2f7;
    border-color: #eff2f7
}
.form-radio-light .form-check-input:checked {
    border-color: #eff2f7;
    background-color: #eff2f7
}
.form-radio-light .form-check-input:checked:after {
    background-color: #eff2f7
}
.form-check-dark .form-check-input:checked {
    background-color: #343a40;
    border-color: #343a40
}
.form-radio-dark .form-check-input:checked {
    border-color: #343a40;
    background-color: #343a40
}
.form-radio-dark .form-check-input:checked:after {
    background-color: #343a40
}
.form-check, .form-check-input, .form-check-label {
    cursor: pointer;
    margin-bottom: 0
}
.form-switch-md {
    padding-left: 2.5rem;
    min-height: 24px;
    line-height: 24px
}
.form-switch-md .form-check-input {
    width: 40px;
    height: 20px;
    left: -.5rem;
    position: relative
}
.form-switch-md .form-check-label {
    vertical-align: middle
}
.form-switch-lg {
    padding-left: 2.75rem;
    min-height: 28px;
    line-height: 28px
}
.form-switch-lg .form-check-input {
    width: 48px;
    height: 24px;
    left: -.75rem;
    position: relative
}
.input-group-text {
    margin-bottom: 0
}
.mini-stats-wid .mini-stat-icon {
    overflow: hidden;
    position: relative
}
.mini-stats-wid .mini-stat-icon:after, .mini-stats-wid .mini-stat-icon:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 54px;
    background-color: rgba(255, 255, 255, .1);
    left: 16px;
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
    top: -5px;
    -webkit-transition: all .4s;
    transition: all .4s
}
.mini-stats-wid .mini-stat-icon::after {
    left: -12px;
    width: 12px;
    -webkit-transition: all .2s;
    transition: all .2s
}
.mini-stats-wid:hover .mini-stat-icon::after {
    left: 60px
}
.mfp-popup-form {
    max-width: 1140px
}
.mfp-close {
    color: var(--bs-body-color) !important
}
.bs-example-modal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: block
}
[dir=rtl] .modal-open {
    padding-left: 0 !important
}
.icon-demo-content {
    text-align: center;
    color: #adb5bd
}
.icon-demo-content i {
    display: block;
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--prefixsecondary-color);
    -webkit-transition: all .4s;
    transition: all .4s
}
.icon-demo-content .col-lg-4 {
    margin-top: 24px
}
.icon-demo-content .col-lg-4:hover i {
    color: #556ee6;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}
.grid-structure .grid-container {
    background-color: var(--bs-gray-100);
    margin-top: 10px;
    font-size: .8rem;
    font-weight: 500;
    padding: 10px 20px
}
.card-radio {
    background-color: var(--bs-secondary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.card-radio:hover {
    cursor: pointer
}
.card-radio-label {
    display: block
}
.card-radio-input {
    display: none
}
.card-radio-input:checked+.card-radio {
    border-color: #556ee6 !important
}
.navs-carousel .owl-nav {
    margin-top: 16px
}
.navs-carousel .owl-nav button {
    width: 30px;
    height: 30px;
    line-height: 28px !important;
    font-size: 20px !important;
    border-radius: 50% !important;
    background-color: rgba(85, 110, 230, .25) !important;
    color: #556ee6 !important;
    margin: 4px 8px !important
}
@media print {
    .footer, .navbar-header, .page-title-box, .right-bar, .vertical-menu {
        display: none !important
    }
    .card-body, .main-content, .page-content, .right-bar, body {
        padding: 0;
        margin: 0
    }
    .card {
        border: 0
    }
}
[data-simplebar] {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}
.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit
}
.simplebar-mask {
    direction: inherit;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
    z-index: 0
}
.simplebar-offset {
    direction: inherit !important;
    -webkit-box-sizing: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    position: absolute;
    top: 0;
    left: 0 !important;
    bottom: 0;
    right: 0 !important;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch
}
.simplebar-content-wrapper {
    direction: inherit;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    visibility: visible;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
    scrollbar-width: none;
    padding: 0 !important
}
.simplebar-content-wrapper::-webkit-scrollbar, .simplebar-hide-scrollbar::-webkit-scrollbar {
    display: none
}
.simplebar-content:after, .simplebar-content:before {
    content: " ";
    display: table
}
.simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none
}
.simplebar-height-auto-observer-wrapper {
    -webkit-box-sizing: inherit !important;
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    -webkit-box-flex: inherit;
    -ms-flex-positive: inherit;
    flex-grow: inherit;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0
}
.simplebar-height-auto-observer {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}
.simplebar-track {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden
}
[data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none
}
[data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all
}
.simplebar-scrollbar {
    position: absolute;
    right: 2px;
    width: 4px;
    min-height: 10px
}
.simplebar-scrollbar:before {
    position: absolute;
    content: "";
    background: #a2adb7;
    border-radius: 7px;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
}
.simplebar-scrollbar.simplebar-visible:before {
    opacity: .5;
    -webkit-transition: opacity 0s linear;
    transition: opacity 0s linear
}
.simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px
}
.simplebar-track.simplebar-horizontal {
    left: 0;
    height: 11px
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    height: 100%;
    left: 2px;
    right: 2px
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    right: auto;
    left: 0;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto
}
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
    right: auto;
    left: 0
}
.hs-dummy-scrollbar-size {
    direction: rtl;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    height: 500px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: scroll
}
.simplebar-hide-scrollbar {
    position: fixed;
    left: 0;
    visibility: hidden;
    overflow-y: scroll;
    scrollbar-width: none
}
.custom-scroll {
    height: 100%
}
.lnb-calendars-item {
    display: inline-block;
    margin-right: 7px
}
input[type=checkbox].tui-full-calendar-checkbox-round+span {
    margin-right: 4px;
    margin-left: 0
}
.tui-full-calendar-layout, .tui-full-calendar-timegrid-timezone {
    background-color: var(--bs-secondary-bg) !important
}
.tui-full-calendar-dayname-container, .tui-full-calendar-left, .tui-full-calendar-splitter, .tui-full-calendar-time-date, .tui-full-calendar-timegrid-gridline, .tui-full-calendar-timegrid-timezone, .tui-full-calendar-weekday-grid-line {
    border-color: var(--bs-border-color) !important
}
.tui-full-calendar-weekday-exceed-in-week {
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 28px;
    border-radius: 4px;
    background-color: var(--bs-custom-white);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color)
}
.tui-full-calendar-timegrid-hour {
    color: var(--bs-body-color) !important
}
.tui-full-calendar-weekday-schedule-title {
    color: var(--bs-emphasis-color) !important
}
.tui-full-calendar-weekday-schedule-title .tui-full-calendar-time-schedule {
    font-weight: 600
}
.tui-full-calendar-popup-container {
    background-color: var(--bs-custom-white) !important;
    border-color: var(--bs-border-color) !important
}
.tui-full-calendar-dropdown:hover .tui-full-calendar-dropdown-button {
    border-color: var(--bs-border-color)
}
.tui-full-calendar-popup-section-item:focus, .tui-full-calendar-popup-section-item:hover {
    border-color: var(--bs-border-color)
}
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill {
    border-top-color: var(--bs-border-color) !important
}
.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill {
    border-bottom-color: var(--bs-border-color) !important
}
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-borde {
    border-bottom-color: var(--bs-border-color) !important
}
.tui-full-calendar-button {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color)
}
.tui-full-calendar-popup-section-item {
    border-color: var(--bs-border-color)
}
.tui-full-calendar-month-dayname, .tui-full-calendar-weekday-border {
    border-top-color: var(--bs-border-color) !important
}
.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border {
    border-bottom-color: var(--bs-border-color) !important
}
.tui-full-calendar-dropdown-menu {
    border-color: var(--bs-border-color) !important
}
.tui-full-calendar-dropdown-menu, .tui-full-calendar-dropdown-menu-item {
    background-color: var(--bs-secondary-bg) !important
}
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border {
    border-top-color: var(--bs-border-color)
}
.tui-full-calendar-content {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-emphasis-color) !important
}
.tui-full-calendar-confirm {
    background-color: #f46a6a !important;
    color: #fff !important
}
.tui-full-calendar-confirm:hover {
    background-color: #c35555 !important;
    color: #fff !important
}
.tui-full-calendar-month-dayname-item span {
    color: var(--bs-emphasis-color) !important
}
.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day.tui-full-calendar-extra-date .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-grid-date {
    color: var(--bs-secondary-color) !important
}
.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-grid-date {
    color: var(--bs-emphasis-color) !important
}
.fc td, .fc th {
    border: var(--bs-border-width) solid var(--bs-border-color)
}
.fc .fc-toolbar h2 {
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase
}
@media (max-width:767.98px) {
    .fc .fc-toolbar .fc-center, .fc .fc-toolbar .fc-left, .fc .fc-toolbar .fc-right {
        float: none;
        display: block;
        text-align: center;
        clear: both;
        margin: 10px 0
    }
    .fc .fc-toolbar>*>* {
        float: none
    }
    .fc .fc-toolbar .fc-today-button {
        display: none
    }
}
.fc .fc-toolbar .btn {
    text-transform: capitalize
}
.fc .fc-col-header-cell-cushion {
    color: var(--bs-body-color)
}
.fc .fc-daygrid-day-number {
    color: var(--bs-body-color)
}
.fc-daygrid-event-dot {
    display: none
}
.fc-next-button, .fc-prev-button {
    position: relative;
    padding: 6px 8px !important
}
.fc-toolbar-chunk .fc-button-group .fc-button {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    -webkit-box-shadow: none;
    box-shadow: none
}
.fc-toolbar-chunk .fc-button-group .fc-button.active, .fc-toolbar-chunk .fc-button-group .fc-button:hover {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary)
}
.fc-toolbar-chunk .fc-today-button {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important
}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important
}
@media (max-width:575.98px) {
    .fc-toolbar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 16px
    }
}
.fc th.fc-widget-header {
    background: #f6f6f6;
    color: #495057;
    line-height: 20px;
    padding: 10px 0;
    text-transform: uppercase;
    font-weight: 600
}
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
    border-color: #f6f6f6
}
.fc-unthemed td.fc-today {
    background: #f6f8fa
}
.fc-button {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: #495057;
    text-transform: capitalize;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 6px 12px !important;
    height: auto !important
}
.fc-state-active, .fc-state-disabled, .fc-state-down {
    background-color: #556ee6;
    color: #fff;
    text-shadow: none
}
.fc-event {
    border-radius: 2px;
    border: none;
    cursor: move;
    font-size: .8125rem;
    margin: 5px 7px;
    padding: 5px 5px;
    text-align: center;
    color: #fff
}
.fc-event.bg-dark {
    background-color: var(--bs-secondary-color) !important
}
.fc-event.bg-dark .fc-event-time {
    color: var(--bs-secondary-bg) !important
}
.fc-event.bg-dark .fc-event-title {
    color: var(--bs-secondary-bg) !important
}
.fc-event, .fc-event-dot {
    background-color: #556ee6
}
.fc-event .fc-content {
    color: #fff
}
#external-events .external-event {
    text-align: left;
    padding: 8px 16px;
    margin-left: 0;
    margin-right: 0
}
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.bg-dark .fc-content {
    color: #eff2f7
}
[dir=rtl] .fc-header-toolbar {
    direction: ltr !important
}
[dir=rtl] .fc-toolbar>*>:not(:first-child) {
    margin-left: .75em
}
.fc-theme-standard .fc-scrollgrid {
    border-color: var(--bs-border-color)
}
.fc .fc-daygrid-week-number {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color)
}
.fc .fc-daygrid-more-link {
    padding: 5px;
    font-size: 11px;
    font-weight: 600
}
.fc .fc-daygrid-more-link:hover {
    background-color: rgba(var(--bs-primary-rgb), .1)
}
.fc .fc-popover-header {
    padding: 6px 12px
}
.fc-theme-standard .fc-popover-header {
    background: var(--bs-body-bg)
}
.fc-theme-standard .fc-popover {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color)
}
.task-box {
    border: 1px solid var(--bs-border-color)
}
.gu-transit {
    border: 1px dashed var(--bs-border-color) !important;
    background-color: var(--bs-gray-200) !important
}
#session-timeout-dialog .close {
    display: none
}
#session-timeout-dialog .countdown-holder {
    color: #f46a6a;
    font-weight: 500
}
#session-timeout-dialog .btn-default {
    background-color: #fff;
    color: #f46a6a;
    -webkit-box-shadow: none;
    box-shadow: none
}
.irs {
    font-family: var(--bs-font-sans-serif)
}
.irs--square {
    cursor: pointer
}
.irs--square .irs-bar, .irs--square .irs-from, .irs--square .irs-single, .irs--square .irs-to {
    background: #556ee6 !important;
    font-size: 11px
}
.irs--square .irs-from:before, .irs--square .irs-single:before, .irs--square .irs-to:before {
    border-top-color: #556ee6
}
.irs--square .irs-line {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-tertiary-bg)
}
.irs--square .irs-grid-text {
    font-size: 11px;
    color: var(--bs-secondary-color)
}
.irs--square .irs-max, .irs--square .irs-min {
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    font-size: 11px
}
.irs--square .irs-handle {
    border: 2px solid #556ee6;
    width: 12px;
    height: 12px;
    top: 26px;
    background-color: var(--bs-secondary-bg) !important;
    cursor: pointer
}
.irs--square .irs-handle:active {
    cursor: pointer
}
.irs--square .irs-grid-pol {
    background-color: var(--bs-secondary-color)
}
.symbol {
    border-color: var(--bs-secondary-bg)
}
.rating-symbol-background, .rating-symbol-foreground {
    font-size: 24px
}
.symbol-empty {
    background-color: var(--bs-gray-400)
}
.rating-symbol-foreground {
    top: 0
}
.rating-star>span {
    display: inline-block;
    vertical-align: middle
}
.rating-star>span.badge {
    margin-left: 4px
}
.error {
    color: #f46a6a
}
.parsley-error {
    border-color: #f46a6a
}
.parsley-errors-list {
    display: none;
    margin: 0;
    padding: 0
}
.parsley-errors-list.filled {
    display: block
}
.parsley-errors-list>li {
    font-size: 12px;
    list-style: none;
    color: #f46a6a;
    margin-top: 5px
}
.select2-container .select2-selection--single {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color-translucent);
}
.select2-container .select2-selection--single:focus {
    outline: 0
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: .75rem;
    color: var(--bs-secondary-color)
}
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px;
    width: 34px;
    right: 3px
}
.select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bs-gray-500) transparent transparent transparent;
    border-width: 6px 6px 0 6px
}
.select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-body-color)
}
[dir=rtl] .select2-selection__rendered {
    text-align: end
}
.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--bs-gray-500) transparent !important;
    border-width: 0 6px 6px 6px;
}
.select2-container--default .select2-search--dropdown {
    padding: 10px;
    background-color: var(--bs-secondary-bg)
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-border-color-active-translucent);
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    outline: 0
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #556ee6
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bs-light);
    color: var(--bs-emphasis-color)
}
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: #fd7e14;
    color: #fff
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none;
    color: var(--bs-emphasis-color)
}
.select2-results__option {
    padding: 6px 12px
}
.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
    padding-left: .75rem
}
.select2-dropdown {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
.select2-search input {
    border: 1px solid var(--bs-border-color)
}
.select2-container .select2-selection--multiple {
    min-height: 38px;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color-translucent) !important;
    padding: 2px .75rem
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: 2px .75rem
}
.select2-container .select2-selection--multiple .select2-search__field {
    border: 0;
    color: var(--bs-emphasis-color);
    margin: 0;
    margin-top: 7px
}
.select2-container .select2-selection--multiple .select2-search__field::-webkit-input-placeholder {
    color: var(--bs-secondary-color)
}
.select2-container .select2-selection--multiple .select2-search__field::-moz-placeholder {
    color: var(--bs-secondary-color)
}
.select2-container .select2-selection--multiple .select2-search__field:-ms-input-placeholder {
    color: var(--bs-secondary-color)
}
.select2-container .select2-selection--multiple .select2-search__field::-ms-input-placeholder {
    color: var(--bs-secondary-color)
}
.select2-container .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--bs-secondary-color)
}
.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1px;
    padding: 0 7px
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: 0
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--bs-border-color-translucent)
}
.select2-container--default .select2-results__group {
    font-weight: 600
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 16px
}
.select2-result-repository__avatar {
    float: left;
    width: 60px;
    margin-right: 10px
}
.select2-result-repository__avatar img {
    width: 100%;
    height: auto;
    border-radius: 2px
}
.select2-result-repository__statistics {
    margin-top: 7px
}
.select2-result-repository__forks, .select2-result-repository__stargazers, .select2-result-repository__watchers {
    display: inline-block;
    font-size: 11px;
    margin-right: 1em;
    color: var(--bs-secondary-color)
}
.select2-result-repository__forks .fa, .select2-result-repository__stargazers .fa, .select2-result-repository__watchers .fa {
    margin-right: 4px
}
.select2-result-repository__forks .fa.fa-flash::before, .select2-result-repository__stargazers .fa.fa-flash::before, .select2-result-repository__watchers .fa.fa-flash::before {
    content: "\f0e7";
    font-family: "Font Awesome 5 Free"
}
.select2-results__option--highlighted .select2-result-repository__forks, .select2-results__option--highlighted .select2-result-repository__stargazers, .select2-results__option--highlighted .select2-result-repository__watchers {
    color: rgba(255, 255, 255, .8)
}
.select2-result-repository__meta {
    overflow: hidden
}
.img-flag {
    margin-right: 7px;
    height: 15px;
    width: 18px
}
.select2-container--default .select2-results__option--selected {
    /* background-color: var(--bs-tertiary-bg) */
}
input[switch] {
    display: none
}
input[switch]+label {
    font-size: 1em;
    line-height: 1;
    width: 62px;
    height: 30px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    position: relative;
    font-weight: 500;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    top: 1px;
    margin-bottom: 0;
}
input[switch]+label:before {
    color: #343a40;
    content: attr(data-off-label);
    display: block;
    font-family: inherit;
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
    position: absolute;
    right: 2px;
    top: 5px;
    text-align: center;
    min-width: 35px;
    overflow: hidden;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}
input[switch]+label:after {
    content: "";
    position: absolute;
    left: 5px;
    background-color: #eff2f7;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 2rem;
    height: 20px;
    width: 20px;
    top: 5px;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}
input[switch]:checked+label {
    background-color: #556ee6
}
input[switch]:checked+label {
    background-color: #556ee6
}
input[switch]:checked+label:before {
    color: #fff;
    content: attr(data-on-label);
    right: auto;
    left: auto
}
input[switch]:checked+label:after {
    left: 37px;
    background-color: #eff2f7
}
input[switch=bool]+label {
    background-color: #f46a6a
}
input[switch=bool]+label:before, input[switch=bool]:checked+label:before, input[switch=default]:checked+label:before {
    color: #fff
}
input[switch=bool]:checked+label {
    background-color: #34c38f
}
input[switch=default]:checked+label {
    background-color: #a2a2a2
}
input[switch=primary]:checked+label {
    background-color: #556ee6
}
input[switch=success]:checked+label {
    background-color: #34c38f
}
input[switch=info]:checked+label {
    background-color: #50a5f1
}
input[switch=warning]:checked+label {
    background-color: #f1b44c
}
input[switch=danger]:checked+label {
    background-color: #f46a6a
}
input[switch=dark]:checked+label {
    background-color: #343a40
}
input[switch=dark]:checked+label:before {
    color: #eff2f7
}
.square-switch {
    margin-right: 0px;
    height: 30px;
}
.square-switch input[switch]+label, .square-switch input[switch]+label:after {
    border-radius: 4px
}
.sp-container {
    background-color: var(--bs-secondary-bg)
}
.sp-container button {
    padding: .25rem .5rem;
    font-size: .71094rem;
    border-radius: .2rem;
    font-weight: 400;
    color: #343a40
}
.sp-container button.sp-palette-toggle {
    background-color: #eff2f7
}
.sp-container button.sp-choose {
    background-color: #34c38f;
    margin-left: 5px;
    margin-right: 0
}
.sp-palette-container {
    border-right: 1px solid #eff2f7
}
.sp-input {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color-translucent) !important;
    color: var(--bs-emphasis-color)
}
.sp-input:focus {
    outline: 0
}
[dir=rtl] .sp-alpha {
    direction: ltr
}
[dir=rtl] .sp-original-input-container .sp-add-on {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important
}
[dir=rtl] input.spectrum.with-add-on {
    border: 1px solid var(--bs-border-color-translucent);
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius)
}
.bootstrap-timepicker-widget table td a {
    color: var(--bs-emphasis-color)
}
.bootstrap-timepicker-widget table td a:hover {
    background-color: transparent;
    border-color: transparent;
    border-radius: 4px;
    color: #556ee6;
    text-decoration: none
}
.bootstrap-timepicker-widget table td input {
    width: 32px;
    height: 32px;
    border: 0;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg)
}
.bootstrap-timepicker-widget.dropdown-menu:after {
    border-bottom-color: var(--bs-gray-200)
}
.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
    border-top-color: var(--bs-gray-200)
}
.timepicker-orient-top {
    top: calc(1.5em + .94rem + calc(var(--bs-border-width) * 2)) !important
}
.timepicker-orient-bottom {
    top: auto !important;
    bottom: calc(1.5em + .94rem + calc(var(--bs-border-width) * 2)) !important
}
.bootstrap-timepicker-widget {
    left: 0 !important;
    right: auto !important
}
.bootstrap-timepicker-widget.timepicker-orient-left:before {
    left: 6px;
    right: auto
}
.bootstrap-timepicker-widget.timepicker-orient-left::after {
    left: 7px;
    right: auto
}
.datepicker {
    border: 1px solid var(--bs-border-color);
    padding: 8px;
    z-index: 999 !important
}
.datepicker table tr th {
    font-weight: 500
}
.datepicker table tr td .active.disabled, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active, .datepicker table tr td.active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover, .datepicker table tr td.selected, .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected:hover, .datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
    background-color: #556ee6 !important;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff !important
}
.datepicker table tr td span.focused, .datepicker table tr td span:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
    background: var(--bs-light)
}
.datepicker table tr td span.new, .datepicker table tr td span.old, .datepicker table tr td.new, .datepicker table tr td.old {
    color: var(--bs-gray-500);
    opacity: .6
}
.datepicker table tr td.range, .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:hover, .datepicker table tr td.range:hover {
    background-color: var(--bs-tertiary-bg)
}
.table-condensed>tbody>tr>td, .table-condensed>thead>tr>th {
    padding: 7px
}
.bootstrap-datepicker-inline .datepicker-inline {
    width: auto !important;
    display: inline-block
}
.datepicker-container {
    border: 1px solid var(--bs-border-color);
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: var(--bs-secondary-bg)
}
.datepicker-container.datepicker-inline {
    width: 212px
}
.datepicker {
    color: var(--bs-secondary-color)
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background: var(--bs-light)
}
.datepicker-panel>ul>li {
    background-color: var(--bs-secondary-bg);
    border-radius: 4px
}
.datepicker-panel>ul>li.picked, .datepicker-panel>ul>li.picked:hover {
    background-color: rgba(85, 110, 230, .25);
    color: #556ee6
}
.datepicker-panel>ul>li.highlighted, .datepicker-panel>ul>li.highlighted:hover, .datepicker-panel>ul>li:hover {
    background-color: #556ee6;
    color: #fff
}
.datepicker-panel>ul>li.muted, .datepicker-panel>ul>li.muted:hover {
    color: var(--bs-gray-500);
    opacity: .6
}
.datepicker-panel>ul[data-view=week]>li {
    font-weight: 500
}
.datepicker-panel>ul[data-view=week]>li, .datepicker-panel>ul[data-view=week]>li:hover {
    background-color: var(--bs-secondary-bg)
}
.bootstrap-touchspin.input-group>.input-group-prepend>.btn, .bootstrap-touchspin.input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}
.bootstrap-touchspin.input-group>.input-group-append>.btn, .bootstrap-touchspin.input-group>.input-group-append>.input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}
form .tox-tinymce {
    border: 1px solid #ced4da
}
form .tox :not(svg):not(rect) {
    color: #495057
}
form .tox:not(.tox-tinymce-inline) .tox-editor-header {
    -webkit-box-shadow: var(--bs-box-shadow);
    box-shadow: var(--bs-box-shadow)
}
form .tox .tox-mbtn {
    color: #74788d
}
form .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
    background-color: #f8f9fa
}
form .tox .tox-tbtn:hover {
    color: rgba(73, 80, 87, .5);
    background-color: #f8f9fa
}
form .tox .tox-tbtn--disabled svg, form .tox .tox-tbtn--disabled:hover svg, form .tox .tox-tbtn:disabled svg, form .tox .tox-tbtn:disabled:hover svg {
    fill: rgba(73, 80, 87, .5)
}
form .tox .tox-tbtn--bespoke {
    background-color: #f8f9fa
}
.dropzone {
    min-height: 230px;
    border: 2px dashed var(--bs-border-color);
    background: var(--bs-secondary-bg);
    border-radius: 6px
}
.dropzone .dz-message {
    font-size: 24px;
    width: 100%;
    margin: 3rem 0
}
.form-wizard-wrapper label {
    font-size: 14px;
    text-align: right
}
.wizard .steps>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}
@media (max-width:1199.98px) {
    .wizard .steps>ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}
.wizard .steps>ul>a, .wizard .steps>ul>li {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}
.wizard .steps>ul>li {
    width: 100%
}
.wizard .steps>ul>li a {
    display: block;
    padding: .5rem 1rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
    background-color: rgba(85, 110, 230, .1)
}
.wizard .steps>ul .current-info {
    position: absolute;
    left: -999em
}
.wizard .steps .number {
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 34px;
    border: 2px solid #556ee6;
    color: #556ee6;
    text-align: center;
    border-radius: 50%;
    margin-right: .5rem
}
.wizard .steps .current a, .wizard .steps .current a:active, .wizard .steps .current a:hover {
    background-color: rgba(85, 110, 230, .2);
    color: var(--bs-emphasis-color)
}
.wizard .steps .current a .number, .wizard .steps .current a:active .number, .wizard .steps .current a:hover .number {
    background-color: #556ee6;
    color: #fff
}
.wizard>.content {
    background-color: transparent;
    padding: 14px;
    margin-top: 0;
    border-radius: 0;
    min-height: 150px
}
.wizard>.content>.title {
    position: absolute;
    left: -999em
}
.wizard>.content>.body {
    width: 100%;
    height: 100%;
    padding: 14px 0 0;
    position: static
}
.wizard>.actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%
}
.wizard>.actions>ul {
    display: block;
    text-align: right;
    padding-left: 0
}
.wizard>.actions>ul>li {
    display: inline-block;
    margin: 0 .5em
}
.wizard>.actions a, .wizard>.actions a:active, .wizard>.actions a:hover {
    background-color: #556ee6;
    border-radius: 4px;
    padding: 8px 15px;
    color: #fff
}
.wizard>.actions .disabled a, .wizard>.actions .disabled a:active, .wizard>.actions .disabled a:hover {
    opacity: .65;
    background-color: #556ee6;
    color: #fff;
    cursor: not-allowed
}
.wizard.vertical-wizard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.wizard.vertical-wizard .steps>ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}
.wizard.vertical-wizard .steps>ul>li {
    width: 100% !important
}
.wizard.vertical-wizard .actions, .wizard.vertical-wizard .content, .wizard.vertical-wizard .steps {
    width: 100%
}
@media (min-width:1200px) {
    .wizard.vertical-wizard .steps {
        width: 25%
    }
}
.wizard.vertical-wizard .content {
    padding: 24px
}
@media (min-width:1200px) {
    .wizard.vertical-wizard .content {
        width: 75%;
        padding: 12px 24px
    }
}
.wizard.vertical-wizard .content>.body {
    padding: 0
}
/* As regras do DataTables (.dataTables_wrapper, .dtr-*) saíram junto com a
   biblioteca, removida do projeto — nenhuma tela a inicializava. Ordenação de
   tabela é server-side; ver base/th_ordenavel.html e core.utils.apply_ordering. */
.table-rep-plugin .btn-toolbar {
    display: block
}
.table-rep-plugin .table-responsive {
    border: none !important
}
.table-rep-plugin .btn-group .btn-default {
    background-color: #74788d;
    color: #eff2f7;
    border: 1px solid #74788d
}
.table-rep-plugin .btn-group .btn-default.btn-primary {
    background-color: #556ee6;
    border-color: #556ee6;
    color: #fff;
    -webkit-box-shadow: 0 0 0 2px rgba(85, 110, 230, .5);
    box-shadow: 0 0 0 2px rgba(85, 110, 230, .5)
}
.table-rep-plugin .btn-group.pull-right {
    float: right
}
.table-rep-plugin .btn-group.pull-right .dropdown-menu {
    right: 0;
    -webkit-transform: none !important;
    transform: none !important;
    top: 100% !important
}
.table-rep-plugin tbody th {
    font-size: 14px;
    font-weight: 400
}
.table-rep-plugin .checkbox-row {
    padding-left: 40px;
    color: var(--bs-body-color) !important
}
.table-rep-plugin .checkbox-row:hover {
    background-color: #f6f8fa !important
}
.table-rep-plugin .checkbox-row label {
    display: inline-block;
    padding-left: 5px;
    position: relative
}
.table-rep-plugin .checkbox-row label::before {
    -o-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #f6f6f6;
    content: "";
    display: inline-block;
    height: 17px;
    left: 0;
    margin-left: -20px;
    position: absolute;
    transition: .3s ease-in-out;
    width: 17px;
    outline: 0 !important
}
.table-rep-plugin .checkbox-row label::after {
    color: #eff2f7;
    display: inline-block;
    font-size: 11px;
    height: 16px;
    left: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    position: absolute;
    top: -1px;
    width: 16px
}
.table-rep-plugin .checkbox-row input[type=checkbox] {
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    outline: 0 !important
}
.table-rep-plugin .checkbox-row input[type=checkbox]:disabled+label {
    opacity: .65
}
.table-rep-plugin .checkbox-row input[type=checkbox]:focus+label::before {
    outline-offset: -2px;
    outline: 0
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked+label::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900
}
.table-rep-plugin .checkbox-row input[type=checkbox]:disabled+label::before {
    background-color: #f8f9fa;
    cursor: not-allowed
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked+label::before {
    background-color: #556ee6;
    border-color: #556ee6
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked+label::after {
    color: #fff
}
.table-rep-plugin .fixed-solution .sticky-table-header {
    top: 70px !important;
    background-color: #556ee6
}
.table-rep-plugin .fixed-solution .sticky-table-header table {
    color: #fff
}
.table-rep-plugin .sticky-table-header, .table-rep-plugin table.focus-on tbody tr.focused td, .table-rep-plugin table.focus-on tbody tr.focused th {
    background: #556ee6;
    border-color: #556ee6;
    color: #fff
}
.table-rep-plugin .sticky-table-header table, .table-rep-plugin table.focus-on tbody tr.focused td table, .table-rep-plugin table.focus-on tbody tr.focused th table {
    color: #fff
}
.table-rep-plugin table.focus-on tbody tr.unfocused td, .table-rep-plugin table.focus-on tbody tr.unfocused th, .table-rep-plugin table.focus-on tfoot tr.unfocused td, .table-rep-plugin table.focus-on tfoot tr.unfocused th {
    color: var(--bs-body-color)
}
@media (min-width:992px) {
    body[data-layout=horizontal] .fixed-solution .sticky-table-header {
        top: 120px !important
    }
}
.table-edits input, .table-edits select {
    height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
    padding: .25rem .5rem;
    border: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    border-radius: var(--bs-border-radius)
}
.table-edits input:focus, .table-edits select:focus {
    outline: 0;
    border-color: rgb(var(--bs-body-color-rgb), .2)
}
.apex-charts {
    min-height: 10px !important
}
.apex-charts text {
    font-family: var(--bs-font-sans-serif) !important;
    fill: var(--bs-gray-500)
}
.apex-charts .apexcharts-canvas {
    margin: 0 auto
}
.apexcharts-tooltip-text, .apexcharts-tooltip-title {
    font-family: var(--bs-font-sans-serif) !important
}
.apexcharts-legend-series {
    font-weight: 500
}
.apexcharts-gridline {
    pointer-events: none;
    stroke: var(--bs-border-color)
}
.apexcharts-legend-text {
    color: #74788d !important;
    font-family: var(--bs-font-sans-serif) !important;
    font-size: 13px !important
}
.apexcharts-pie-label {
    fill: #fff !important
}
.apexcharts-xaxis text, .apexcharts-yaxis text {
    font-family: var(--bs-font-sans-serif) !important;
    fill: var(--bs-secondary-color)
}
.apexcharts-gridline {
    stroke: var(--bs-border-color)
}
.apexcharts-radialbar-track.apexcharts-track path {
    stroke: var(--bs-border-color)
}
.apexcharts-tooltip {
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid var(--bs-border-color) !important
}
.apexcharts-tooltip .apexcharts-tooltip-title {
    background-color: var(--bs-border-color) !important;
    border-bottom: 1px solid var(--bs-border-color) !important
}
.apexcharts-pie-area {
    stroke: var(--bs-secondary-bg)
}
.apexcharts-grid-borders line {
    stroke: var(--bs-border-color)
}
.apexcharts-pie-label {
    fill: var(--bs-white) !important
}
.apexcharts-xaxis-tick {
    stroke: var(--bs-border-color)
}
.e-charts {
    height: 350px
}
.flot-charts-height {
    height: 320px
}
.flotTip {
    padding: 8px 12px;
    background-color: rgba(52, 58, 64, .9);
    z-index: 100;
    color: #f8f9fa;
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    border-radius: 4px
}
.legendLabel {
    color: #adb5bd
}
.jqstooltip {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: auto !important;
    height: auto !important;
    background-color: #343a40 !important;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
    padding: 5px 10px !important;
    border-radius: 3px;
    border-color: #212529 !important
}
.jqsfield {
    color: #eff2f7 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-family: var(--bs-font-sans-serif) !important;
    font-weight: 500 !important
}
.gmaps, .gmaps-panaroma {
    height: 300px !important;
    background: #f8f9fa;
    border-radius: 3px
}
.gmaps-overlay {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    background: #556ee6;
    border-radius: 4px;
    padding: 10px 20px
}
.gmaps-overlay_arrow {
    left: 50%;
    margin-left: -16px;
    width: 0;
    height: 0;
    position: absolute
}
.gmaps-overlay_arrow.above {
    bottom: -15px;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid #556ee6
}
.gmaps-overlay_arrow.below {
    top: -15px;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #556ee6
}
.jvectormap-label {
    border: none;
    background: #343a40;
    color: #f8f9fa;
    font-family: var(--bs-font-sans-serif);
    font-size: .8125rem;
    padding: 5px 8px
}
.leaflet-map {
    height: 300px
}
.leaflet-map.leaflet-container {
    z-index: 99
}
.home-btn {
    position: absolute;
    top: 15px;
    right: 25px
}
.auth-logo .auth-logo-dark {
    display: var(--bs-display-block)
}
.auth-logo .auth-logo-light {
    display: var(--bs-display-none)
}
.auth-body-bg {
    background-color: var(--bs-secondary-bg)
}
.auth-pass-inputgroup input[type=input]+.btn .mdi-eye-outline:before {
    content: "\f06d1"
}
.auth-full-bg {
    background-color: rgba(85, 110, 230, .25);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
@media (min-width:1200px) {
    .auth-full-bg {
        height: 100vh
    }
}
.auth-full-bg::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%
}
.auth-full-bg .bg-overlay {
    background: url("../images/bg-auth-overlay.025fcdc088bd.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}
.auth-full-page-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
@media (min-width:1200px) {
    .auth-full-page-content {
        min-height: 100vh
    }
}
.auth-review-carousel.owl-theme .owl-dots .owl-dot span {
    background-color: rgba(85, 110, 230, .25)
}
.auth-review-carousel.owl-theme .owl-dots .owl-dot.active span, .auth-review-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #556ee6
}
.search-box .form-control {
    border-radius: 30px;
    padding-left: 40px
}
.search-box .search-icon {
    font-size: 16px;
    position: absolute;
    left: 13px;
    top: 0;
    line-height: 38px
}
.product-list li a {
    display: block;
    padding: 4px 0;
    color: var(--bs-body-color)
}
.product-view-nav.nav-pills .nav-item {
    margin-left: 4px
}
.product-view-nav.nav-pills .nav-link {
    width: 36px;
    height: 36px;
    font-size: 16px;
    padding: 0;
    line-height: 36px;
    text-align: center;
    border-radius: 50%
}
.product-ribbon {
    position: absolute;
    right: 0;
    top: 0
}
.product-detai-imgs .nav .nav-link {
    margin: 7px 0
}
.product-detai-imgs .nav .nav-link.active {
    background-color: var(--bs-tertiary-bg)
}
.product-color a {
    display: inline-block;
    text-align: center;
    color: var(--bs-body-color)
}
.product-color a .product-color-item {
    margin: 7px
}
.product-color a.active, .product-color a:hover {
    color: #556ee6
}
.product-color a.active .product-color-item, .product-color a:hover .product-color-item {
    border-color: #556ee6 !important
}
.visa-card .visa-logo {
    line-height: .5
}
.visa-card .visa-pattern {
    position: absolute;
    font-size: 385px;
    color: rgba(255, 255, 255, .05);
    line-height: .4;
    right: 0;
    bottom: 0
}
.checkout-tabs .nav-pills .nav-link {
    margin-bottom: 24px;
    text-align: center;
    background-color: var(--bs-secondary-bg);
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
.checkout-tabs .nav-pills .nav-link.active {
    background-color: #556ee6
}
.checkout-tabs .nav-pills .nav-link .check-nav-icon {
    font-size: 36px
}
.email-leftbar {
    width: 236px;
    float: left;
    padding: 20px;
    border-radius: 5px
}
.email-rightbar {
    margin-left: 260px
}
.chat-user-box p.user-title {
    color: var(--bs-emphasis-color);
    font-weight: 500
}
.chat-user-box p {
    font-size: 12px
}
@media (max-width:767px) {
    .email-leftbar {
        float: none;
        width: 100%
    }
    .email-rightbar {
        margin: 0
    }
}
.mail-list a {
    display: block;
    color: var(--bs-secondary-color);
    line-height: 24px;
    padding: 8px 5px
}
.mail-list a.active {
    color: #f46a6a;
    font-weight: 500
}
.message-list {
    display: block;
    padding-left: 0
}
.message-list li {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    cursor: default;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}
.message-list li a {
    color: var(--bs-secondary-color)
}
.message-list li:hover {
    background: var(--bs-tertiary-bg);
    -webkit-transition-duration: 50ms;
    transition-duration: 50ms
}
.message-list li .col-mail {
    float: left;
    position: relative
}
.message-list li .col-mail-1 {
    width: 320px
}
.message-list li .col-mail-1 .checkbox-wrapper-mail, .message-list li .col-mail-1 .dot, .message-list li .col-mail-1 .star-toggle {
    display: block;
    float: left
}
.message-list li .col-mail-1 .dot {
    border: 4px solid transparent;
    border-radius: 100px;
    margin: 22px 26px 0;
    height: 0;
    width: 0;
    line-height: 0;
    font-size: 0
}
.message-list li .col-mail-1 .checkbox-wrapper-mail {
    margin: 15px 10px 0 20px
}
.message-list li .col-mail-1 .star-toggle {
    margin-top: 18px;
    margin-left: 5px
}
.message-list li .col-mail-1 .title {
    position: absolute;
    top: 0;
    left: 110px;
    right: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0
}
.message-list li .col-mail-2 {
    position: absolute;
    top: 0;
    left: 320px;
    right: 0;
    bottom: 0
}
.message-list li .col-mail-2 .date, .message-list li .col-mail-2 .subject {
    position: absolute;
    top: 0
}
.message-list li .col-mail-2 .subject {
    left: 0;
    right: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.message-list li .col-mail-2 .date {
    right: 0;
    width: 170px;
    padding-left: 80px
}
.message-list li.active, .message-list li.active:hover {
    -webkit-box-shadow: inset 3px 0 0 #556ee6;
    box-shadow: inset 3px 0 0 #556ee6
}
.message-list li.unread {
    background-color: var(--bs-tertiary-bg);
    font-weight: 500;
    color: var(--bs-body-color)
}
.message-list li.unread a {
    color: var(--bs-body-color);
    font-weight: 500
}
.message-list .checkbox-wrapper-mail {
    cursor: pointer;
    height: 20px;
    width: 20px;
    position: relative;
    display: inline-block;
    background-color: var(--bs-secondary-bg);
    -webkit-box-shadow: inset 0 0 0 1px var(--bs-border-color-translucent);
    box-shadow: inset 0 0 0 1px var(--bs-border-color-translucent);
    border-radius: 1px
}
.message-list .checkbox-wrapper-mail input {
    opacity: 0;
    cursor: pointer
}
.message-list .checkbox-wrapper-mail input:checked~label {
    opacity: 1
}
.message-list .checkbox-wrapper-mail label {
    position: absolute;
    height: 20px;
    width: 20px;
    left: 0;
    cursor: pointer;
    opacity: 0;
    margin-bottom: 0;
    -webkit-transition-duration: 50ms;
    transition-duration: 50ms;
    top: 0
}
.message-list .checkbox-wrapper-mail label:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    top: 0;
    height: 20px;
    color: var(--bs-body-color);
    width: 20px;
    position: absolute;
    margin-top: -16px;
    left: 4px;
    font-size: 13px
}
@media (max-width:575.98px) {
    .message-list li .col-mail-1 {
        width: 200px
    }
}
@media (min-width:1200px) {
    .filemanager-sidebar {
        min-width: 230px;
        max-width: 230px
    }
}
@media (min-width:1366px) {
    .filemanager-sidebar {
        min-width: 280px;
        max-width: 280px
    }
}
.categories-list {
    padding: 4px 0
}
.categories-list li a {
    display: block;
    padding: 8px 12px;
    color: var(--bs-body-color);
    font-weight: 500
}
.categories-list li.active a {
    color: #556ee6
}
.categories-list li ul {
    padding-left: 16px
}
.categories-list li ul li a {
    padding: 4px 12px;
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 400
}
@media (min-width:992px) {
    .chat-leftsidebar {
        min-width: 260px
    }
}
@media (min-width:1200px) {
    .chat-leftsidebar {
        min-width: 380px
    }
}
.chat-leftsidebar .chat-leftsidebar-nav .nav {
    background-color: var(--bs-secondary-bg)
}
.chat-leftsidebar .chat-leftsidebar-nav .tab-content {
    min-height: 488px
}
.chat-noti-dropdown.active:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #f46a6a;
    border-radius: 50%;
    right: 0
}
.chat-noti-dropdown .btn {
    padding: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 20px
}
.chat-search-box .form-control {
    border: 0
}
.chat-list {
    margin: 0
}
.chat-list li.active a {
    background-color: var(--bs-secondary-bg);
    border-color: transparent;
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
.chat-list li a {
    display: block;
    padding: 14px 16px;
    color: var(--bs-secondary-color);
    -webkit-transition: all .4s;
    transition: all .4s;
    border-top: 1px solid var(--bs-border-color);
    border-radius: 4px
}
.chat-list li a:hover {
    background-color: var(--bs-secondary-bg);
    border-color: transparent;
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
.user-chat-nav .dropdown .nav-btn {
    color: var(--bs-body-color);
    height: 40px;
    width: 40px;
    line-height: 42px;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    font-size: 16px;
    background-color: var(--bs-light);
    border-radius: 50%;
    border: none
}
.user-chat-nav .dropdown .dropdown-menu {
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    border: 1px solid var(--bs-border-color)
}
.chat-conversation li {
    clear: both
}
.chat-conversation .chat-day-title {
    position: relative;
    text-align: center;
    margin-bottom: 24px
}
.chat-conversation .chat-day-title .title {
    background-color: var(--bs-secondary-bg);
    position: relative;
    z-index: 1;
    padding: 6px 24px
}
.chat-conversation .chat-day-title:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
    background-color: var(--bs-border-color);
    top: 10px
}
.chat-conversation .chat-day-title .badge {
    font-size: 12px
}
.chat-conversation .conversation-list {
    margin-bottom: 24px;
    display: inline-block;
    position: relative
}
.chat-conversation .conversation-list .ctext-wrap {
    padding: 12px 24px;
    background-color: rgba(85, 110, 230, .1);
    border-radius: 8px 8px 8px 0;
    overflow: hidden
}
.chat-conversation .conversation-list .ctext-wrap .conversation-name {
    font-weight: 600;
    color: #556ee6;
    margin-bottom: 4px
}
.chat-conversation .conversation-list .dropdown {
    float: right
}
.chat-conversation .conversation-list .dropdown .dropdown-toggle {
    font-size: 18px;
    padding: 4px;
    color: var(--bs-secondary-color)
}
@media (max-width:575.98px) {
    .chat-conversation .conversation-list .dropdown .dropdown-toggle {
        display: none
    }
}
.chat-conversation .conversation-list .dropdown .dropdown-menu {
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    border: 1px solid var(--bs-border-color)
}
.chat-conversation .conversation-list .chat-time {
    font-size: 12px
}
.chat-conversation .right .conversation-list {
    float: right
}
.chat-conversation .right .conversation-list .ctext-wrap {
    background-color: var(--bs-light);
    text-align: right;
    border-radius: 8px 8px 0 8px
}
.chat-conversation .right .conversation-list .dropdown {
    float: left
}
.chat-conversation .right .conversation-list.last-chat .conversation-list:before {
    right: 0;
    left: auto
}
.chat-conversation .last-chat .conversation-list:before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    color: #556ee6;
    right: 0;
    bottom: 0;
    font-size: 16px
}
@media (max-width:575.98px) {
    .chat-conversation .last-chat .conversation-list:before {
        display: none
    }
}
.chat-input-section {
    border-top: 1px solid var(--bs-border-color)
}

.input-section {
    border-top: 2px solid #fd7e14;
    margin-left: 5px;
    margin-right: 5px
}

.linha-sidebar-separadora {
    border-top: 1px solid var(--bs-secondary-color);
    margin-left: 55px;
    margin-right: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.input-section-gold {
    border-top: 2px solid #CC8F00;
    margin-left: 5px;
    margin-right: 5px;
}

chat-input {
    border-radius: 30px;
    background-color: #181818 !important;
    border-color: #404040;
    padding-right: 120px
}
.chat-input-links {
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 100%;
}

.chat-input-links:hover {
    background-color: var(--bs-light);
}

.chat-input-links li a {
    font-size: 12px;
    line-height: 24px;
    display: inline-block;
    color: var(--bs-gray-600);
}

.chat-input-links li a:hover {
    color: var(--bs-primary);
}

.chat-input {
    padding-right: 120px;
    padding-left: 12px;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

.chat-input:focus {
    background-color: var(--bs-light);
    border: 1px solid var(--bs-primary);
}

.chat-input:focus{
    color:var(--bs-emphasis-color);
    background-color:var(--bs-secondary-bg);
    border-color: var(--bs-active-menu);
    outline:0;
    -webkit-box-shadow:none;
    box-shadow:none
}
@media (max-width:575.98px) {
    .chat-send {
        min-width: auto
    }
}
.project-list-table {
    border-collapse: separate;
    border-spacing: 0 12px
}
.project-list-table tr {
    background-color: var(--bs-secondary-bg)
}
.contact-links a {
    color: var(--bs-body-color)
}
.profile-user-wid {
    margin-top: -26px
}
@media (min-width:576px) {
    .versus-value {
        position: relative
    }
.versus-value:after {
        content: "\f00d";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 30px;
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 20%;
        text-align: center;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: var(--bs-form-versus-value-color);
        color: #fff;
        z-index: 9;
        right: -34px
    }
}
@media (min-width:576px) {
    .currency-value {
        position: relative
    }
.currency-value:after {
        content: "\f155";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 24px;
        position: absolute;
        width: 45px;
        height: 45px;
        line-height: 45px;
        border-radius: 50%;
        text-align: center;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: #556ee6;
        color: #fff;
        z-index: 9;
        right: -34px
    }
}
.crypto-buy-sell-nav-content {
    border: 2px solid var(--bs-border-color);
    border-top: 0
}
.kyc-doc-verification .dropzone {
    min-height: 180px
}
.kyc-doc-verification .dropzone .dz-message {
    margin: 24px 0
}
.section {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px
}
.section.bg-white {
    background-color: var(--bs-secondary-bg) !important
}
.small-title {
    color: var(--bs-secondary-color);
    margin-bottom: 8px
}
.navigation {
    padding: 0 16px;
    width: 100%;
    z-index: 999;
    margin-bottom: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}
@media (max-width:991.98px) {
    .navigation {
        background-color: var(--bs-topnav-bg)
    }
}
.navigation .navbar-logo {
    line-height: 70px;
    -webkit-transition: all .4s;
    transition: all .4s
}
.navigation .navbar-logo .logo-dark {
    display: none
}
@media (max-width:991.98px) {
    .navigation .navbar-logo .logo-dark {
        display: block
    }
}
.navigation .navbar-logo .logo-light {
    display: block
}
@media (max-width:991.98px) {
    .navigation .navbar-logo .logo-light {
        display: none
    }
}
.navigation .navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, .6);
    line-height: 58px;
    padding: 6px 16px;
    font-weight: 500;
    -webkit-transition: all .4s;
    transition: all .4s
}
@media (max-width:991.98px) {
    .navigation .navbar-nav .nav-item .nav-link {
        color: var(--bs-header-item-color)
    }
}
.navigation .navbar-nav .nav-item .nav-link.active, .navigation .navbar-nav .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, .9)
}
@media (max-width:991.98px) {
    .navigation .navbar-nav .nav-item .nav-link.active, .navigation .navbar-nav .nav-item .nav-link:hover {
        color: #556ee6
    }
}
@media (max-width:991.98px) {
    .navigation .navbar-nav .nav-item .nav-link {
        line-height: 28px !important
    }
}
.navigation.nav-sticky {
    background-color: var(--bs-topnav-bg);
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .03)
}
.navigation.nav-sticky .navbar-logo {
    line-height: 60px
}
.navigation.nav-sticky .navbar-logo .logo-dark {
    display: var(--bs-display-block)
}
.navigation.nav-sticky .navbar-logo .logo-light {
    display: var(--bs-display-none)
}
.navigation.nav-sticky .navbar-nav .nav-item .nav-link {
    line-height: 48px;
    color: var(--bs-header-item-color)
}
.navigation.nav-sticky .navbar-nav .nav-item .nav-link.active, .navigation.nav-sticky .navbar-nav .nav-item .nav-link:hover {
    color: #556ee6
}
.bg-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    opacity: .7;
    background-color: #000
}
.hero-section {
    padding-top: 220px;
    padding-bottom: 190px
}
.hero-section.bg-ico-hero {
    background-image: url("../images/crypto/bg-ico-hero.b5c826fc619e.jpg");
    background-size: cover;
    background-position: top
}
@media (max-width:575.98px) {
    .hero-section {
        padding-top: 140px;
        padding-bottom: 80px
    }
}
.hero-section .hero-title {
    font-size: 42px
}
@media (max-width:575.98px) {
    .hero-section .hero-title {
        font-size: 26px
    }
}
.hero-section .ico-countdown {
    font-size: 22px;
    margin-right: -12px;
    margin-left: -12px
}
@media (max-width:575.98px) {
    .hero-section .ico-countdown {
        display: block
    }
}
.hero-section .ico-countdown .coming-box {
    margin-right: 12px;
    margin-left: 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 8px;
    background-color: var(--bs-secondary-bg)
}
@media (max-width:575.98px) {
    .hero-section .ico-countdown .coming-box {
        display: inline-block;
        width: 40%;
        margin-bottom: 24px
    }
}
.hero-section .ico-countdown .coming-box span {
    background-color: var(--bs-light);
    font-size: 12px;
    padding: 4px;
    margin-top: 8px
}
.hero-section .softcap-progress {
    overflow: visible
}
.hero-section .softcap-progress .progress-bar {
    overflow: visible
}
.hero-section .softcap-progress .progress-label {
    position: relative;
    text-align: right;
    color: var(--bs-body-color);
    bottom: 20px;
    font-size: 12px;
    font-weight: 500
}
.currency-price {
    position: relative;
    bottom: 40px
}
.client-images img {
    max-height: 34px;
    width: auto !important;
    margin: 12px auto;
    opacity: .7;
    -webkit-transition: all .4s;
    transition: all .4s
}
.features-number {
    opacity: .1
}
.team-box .team-social-links a {
    color: var(--bs-body-color);
    font-size: 14px
}
.blog-box .blog-badge {
    position: absolute;
    top: 12px;
    right: 12px
}
.landing-footer {
    padding: 80px 0 40px;
    background-color: #2a3042;
    color: rgba(255, 255, 255, .5)
}
.landing-footer .footer-list-title {
    color: rgba(255, 255, 255, .9)
}
.landing-footer .footer-list-menu li a {
    display: block;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 14px;
    -webkit-transition: all .4s;
    transition: all .4s
}
.landing-footer .footer-list-menu li a:hover {
    color: rgba(255, 255, 255, .8)
}
.landing-footer .blog-post .post {
    display: block;
    color: rgba(255, 255, 255, .5);
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}
.landing-footer .blog-post .post .post-title {
    color: rgba(255, 255, 255, .8);
    font-size: 14px
}
.landing-footer .blog-post .post:first-of-type {
    padding-top: 0
}
.landing-footer .blog-post .post:last-of-type {
    padding-bottom: 0;
    border-bottom: 0
}
.landing-footer .footer-border {
    border-color: rgba(255, 255, 255, .1)
}
.counter-number {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
.counter-number span {
    font-size: 16px;
    font-weight: 400;
    display: block;
    padding-top: 5px
}
.coming-box {
    width: 25%
}
.hori-timeline .events .event-list {
    text-align: center;
    display: block
}
.hori-timeline .events .event-list .event-down-icon {
    position: relative
}
.hori-timeline .events .event-list .event-down-icon::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 16px;
    left: 0;
    right: 0;
    border-bottom: 3px dashed var(--bs-border-color)
}
.hori-timeline .events .event-list .event-down-icon .down-arrow-icon {
    position: relative;
    background-color: var(--bs-secondary-bg);
    padding: 4px
}
.hori-timeline .events .event-list:hover .down-arrow-icon {
    -webkit-animation: fade-down 1.5s infinite linear;
    animation: fade-down 1.5s infinite linear
}
.hori-timeline .events .event-list.active .down-arrow-icon {
    -webkit-animation: fade-down 1.5s infinite linear;
    animation: fade-down 1.5s infinite linear
}
.hori-timeline .events .event-list.active .down-arrow-icon:before {
    content: "\ec4c"
}
.verti-timeline {
    border-left: 3px dashed var(--bs-border-color);
    margin: 0 10px
}
.verti-timeline .event-list {
    position: relative;
    padding: 0 0 40px 30px
}
.verti-timeline .event-list .event-timeline-dot {
    position: absolute;
    left: -9px;
    top: 0;
    z-index: 9;
    font-size: 16px
}
.verti-timeline .event-list .event-content {
    position: relative;
    border: 2px solid var(--bs-border-color);
    border-radius: 7px
}
.verti-timeline .event-list.active .event-timeline-dot {
    color: #556ee6
}
.verti-timeline .event-list:last-child {
    padding-bottom: 0
}
.plan-box .plan-btn {
    position: relative
}
.plan-box .plan-btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--bs-border-color);
    left: 0;
    right: 0;
    top: 12px
}
.blog-play-icon {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto
}
.jobs-categories a {
    color: var(--bs-body-color);
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}
.jobs-categories a:hover {
    color: #556ee6
}
.resultado-pesquisa {
    position: absolute;
    animation-name: DropDownSlide;
    width: 400px; /* Deve ser igual à largura do campo de pesquisa */
    border: 1px solid #fd7e14;
    background-color: #171717;
    max-height: 300px;
    overflow-y: auto;
    display: none; /* Inicialmente oculto */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
    z-index: 1000; /* Garante que o dropdown fique sobre outros conteúdos */
    font-weight: 500;
    color: white;
    border-radius: 0.25rem;
}

.pesquisa-item {
    padding: 6px;
    cursor: pointer;
    border: 1px solid #353535;
}
.pesquisa-item:hover {
    color: black;
    background-color: #fd7e14;
    font-weight: 500;
}

.search-item:hover {
    color: #fd7e14;
}
.search-item:first-child {
    margin-top: 3px; /* Margem no topo para o primeiro item */
}
.search-item:last-child {
    margin-bottom: 3px; /* Margem na base para o último item */
}

.panel-contents {
    background-color: transparent;
    margin: 0 auto;
    max-width: 1360px;
    padding: 0;
    padding-bottom: 60px;
}

/* Variantes de largura — só muda o max-width; base = média (-md, 1360px).
   Uso: class="panel-contents panel-contents-sm|-md|-lg" */
.panel-contents-sm {
    max-width: 900px;
}
.panel-contents-md {
    max-width: 1360px;
}
.panel-contents-lg {
    max-width: 1600px;
}

.errorlist {
    color: red;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card-parametros {
  border: 1px solid #454545;
  border-radius: 5px; /* Valor unificado para border-radius */
  padding: 20px; /* Valor unificado para padding */
  background-color: #242424;
  color: white;
  margin-top: 10px;
  text-align: center;
  transition: border 0.3s ease, box-shadow 0.3s ease; /* Adiciona transição suave para borda e sombra */
}

.card-parametros:hover {
  border-color: #fd7e14; /* Apenas altera a cor da borda */
  cursor: pointer;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.card-parametros .configurar-button {
  background-color: #242424;
  border: 1px solid #454545;
  border-radius: 5px;
  color: white;
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Adiciona transição suave para a cor de fundo, cor da borda e cor do texto */
}

.card-parametros:hover .configurar-button {
  background-color: #fd7e14; /* Altera a cor de fundo para destacar o botão no hover */
  border-color: #fd7e14;
  color: #000; /* Altera a cor do texto para contraste */
}

/* ---- Bottom-bar (rodapé escuro encostado) ---------------------------------
   Cobre a área útil (viewport menos a sidebar), colada na base. Convenção:
   ações (botões) à esquerda; contexto (total, contador, paginação) à direita,
   dentro de .bottom-bar-context — que só existe quando há contexto. */
.bottom-bar {
    position: fixed;
    left: 250px; /* acompanha a margem da sidebar (.main-content) */
    right: 0;
    bottom: 0;
    z-index: 1050;
}

.vertical-collpsed .bottom-bar { left: 70px; }
body[data-sidebar-size=small] .bottom-bar { left: 160px; }
body[data-sidebar-size=small].vertical-collpsed .bottom-bar { left: 70px; }
body[data-layout=horizontal] .bottom-bar { left: 0; }

@media (max-width: 991.98px) {
    .bottom-bar { left: 0; }
}

.bottom-bar-main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: 64px; /* altura fixa — igual em todas as telas, independente do conteúdo */
    padding: 0 24px;
    background-color: #2f333b;
    color: #e2e4e8;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}

/* Wrapper alternado por JS (display block/none) que ocupa a barra inteira —
   ex.: #bottom-bar-acoes / #bottom-bar-paginacao nas listagens. */
.bottom-bar-fill {
    flex: 1 1 auto;
    min-width: 0;
}

/* Botões dentro da barra escura */
.bottom-bar-main-content .btn-outline-secondary,
.bottom-bar-main-content .btn-outline-light {
    color: #e2e4e8;
    border-color: rgba(255, 255, 255, .35);
}
.bottom-bar-main-content .btn-outline-secondary:hover,
.bottom-bar-main-content .btn-outline-light:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
}

/* Contexto — sempre à direita. */
.bottom-bar-context {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    width: max-content;
    text-align: right;
    white-space: nowrap;
}

.bottom-bar-context-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9aa0ab;
    line-height: 1.2;
}

.bottom-bar-context-value {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #7ee2ae;
}

/* Paginação dentro do contexto: compacta e legível no fundo escuro. */
.bottom-bar-context .pagination { margin-bottom: 0; }
.bottom-bar-context .page-link {
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    background-color: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #e2e4e8;
}
.bottom-bar-context .page-link:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}
.bottom-bar-context .page-item.active .page-link {
    background-color: #556ee6;
    border-color: #556ee6;
    color: #fff;
}
.bottom-bar-context .page-item.disabled .page-link {
    color: rgba(255, 255, 255, .35);
    background-color: transparent;
    border-color: rgba(255, 255, 255, .15);
}

.copy-button i {
    transition: color 0.3s ease, transform 0.2s ease;
}

.copy-button i.fa-check {
    transform: scale(1.2); /* Leve aumento no tamanho quando for "check" */
}

.avatar-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #4e73df;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Impede que o avatar seja comprimido */
    overflow: hidden;
}

.avatar-text {
    color: white;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Categorias */
.lista-categorias {
    list-style: none;
    padding-left: 0;
}

.categoria-item {
    transition: background-color 0.2s ease;
}

.categoria-item:hover {
    background-color: #f8f9fa;
}

.filhos {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 2px solid rgb(211, 205, 202);
}

ul.lista-categorias, ul.lista-categorias ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.bg-warning {
    background-color: #fff3cd !important;
    transition: background-color 0.5s ease;
}

.lista-categorias,
.lista-categorias ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

#atributos-existentes {
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    font-size: 0.95rem;
}

#atributos-existentes thead th {
    background-color: #f5f5f5;
    text-align: left;
    padding: 8px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #ddd;
}

#atributos-existentes tbody td {
    padding: 8px;
    vertical-align: middle;
    border-top: 1px solid #eee;
}

#atributos-existentes tbody tr:hover {
    background-color: #f9f9f9;
}

#atributos-existentes .badge {
    font-size: 0.85em;
    padding: 0.35em 0.6em;
    border-radius: 0.3rem;
}

#atributos-existentes .btn-outline-secondary {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

#atributos-existentes .form-check-input {
    transform: scale(1.1);
}

.btn-outline-danger i.fa-ban {
    color: #dc3545;
    font-size: 1rem;
}

.table-row {
    cursor: pointer;
}

.observacao-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.observacao-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background-color: var(--bs-secondary);
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

/* Destaca a linha recém aberta/visitada na tabela.
   --bs-table-bg-state tem prioridade máxima no box-shadow do Bootstrap 5
   (inset 0 0 0 9999px), garantindo visibilidade mesmo em linhas zebradas. */
.table > tbody > tr.recently-opened > * {
    --bs-table-bg-state: rgba(241, 115, 79, 0.45);
    --bs-table-bg-type:  rgba(241, 115, 79, 0.45);
    background-color:    rgba(241, 115, 79, 0.45);
}

/* ===== CABEÇALHO ORDENÁVEL (base/th_ordenavel.html) =====================
   O <th> vira link de ordenação (server-side, ?ordenar=&dir=).

   ⚠️ O realce NÃO usa cor. Medido em 2026-08-06: o <th> das tabelas do projeto
   já é laranja (#ff864d) nos DOIS temas, e no escuro o acento (#fd7e14) fica
   indistinguível dele — a coluna ativa parecia igual às outras. Quem marca o
   estado é o ÍCONE (seta cheia × seta dupla apagada) e o peso da fonte; o hover
   usa sublinhado, que funciona sobre qualquer fundo.

   O ícone da coluna INATIVA fica visível em opacidade baixa — escondê-lo até o
   hover esconderia que a coluna é clicável (e no toque não há hover). */
.th-ordenar {
    display: inline-block;
    position: relative;   /* âncora do ícone — ver abaixo */
    color: inherit;
    text-decoration: none;
}
.th-ordenar:hover {
    color: inherit;
    text-decoration: underline;
}
.th-ordenar.is-ativa {
    font-weight: 700;   /* o <th> do projeto já é 600 */
}

/* ⚠️ O ícone é ABSOLUTO — a ordenação NÃO PODE CUSTAR LARGURA DE COLUNA.
   Medido em 2026-08-06 na tela de Overhead (7 colunas dividindo a linha com o
   card de Faturamento): no fluxo, os ícones somavam ~50px e a tabela passava a
   rolar horizontalmente em 1280px — de 6px de estouro (que já existia) para 55.
   Fora do fluxo, o custo volta a ZERO e o estouro é o mesmo de antes.

   `left: 100%` ancora no fim do PRÓPRIO RÓTULO, não na borda do <th>: preso à
   direita da célula, o ícone de uma coluna de nome curto ia parar ao lado do
   rótulo da coluna SEGUINTE (testado — parecia pertencer a ela). Ele transborda
   para o padding da célula, que nenhum conteúdo ocupa. */
.th-ordenar-icone {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 3px;
    transform: translateY(-50%);
    font-size: 11px;
}
.th-ordenar-icone-inativo {
    opacity: .3;
}
/* No <th> inteiro, não no <a>: o link agora ocupa só o texto, e o ícone está
   fora dele — passar o mouse na célula tem de acender o ícone. */
.th-ordenavel:hover .th-ordenar-icone-inativo {
    opacity: .7;
}

/* Fade suave para o modal de inclusão */
#bottom-modal.fade-in {
    animation: fadeInModal 0.3s ease forwards;
}
#bottom-modal.fade-out {
    animation: fadeOutModal 0.25s ease forwards;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutModal {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

.gtin-input, .gtin-select {
    transition: all 0.2s ease;
}

.card-hover { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Grid universal */
.grid-personalizado {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 16px;
}
.grid-personalizado-1col {
    grid-template-columns: 1fr;
}
@media (max-width: 1200px) {
    .grid-personalizado {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}
@media (max-width: 768px) {
    .grid-personalizado {
        grid-template-columns: repeat(1, minmax(220px, 1fr));
    }
}

/* Cards do grid personalizado */
.grid-personalizado-card {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 16px;
    color: var(--bs-body-color);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--bs-box-shadow-sm);
}
.grid-personalizado-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.grid-personalizado-card-link:hover {
    border-color: var(--bs-orange);
    box-shadow: var(--bs-box-shadow);
}
.grid-personalizado-card.is-inactive {
    opacity: 0.7;
}
.grid-personalizado-card.is-selected {
    border-color: var(--bs-primary);
    box-shadow: var(--bs-box-shadow);
}
.mapa-coluna {
    position: relative;
}
.mapa-coluna-seta {
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--bs-box-shadow-sm);
    z-index: 2;
    pointer-events: none;
}
.grid-personalizado-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}
.grid-personalizado-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bs-body-bg);
    /* border: 1px solid var(--bs-border-color); */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-emphasis-color);
}
.grid-personalizado-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.grid-personalizado-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.grid-personalizado-name {
    font-size: 15px;
    font-weight: 600;
}
.grid-personalizado-sub {
    font-size: 12px;
    color: var(--bs-secondary-color);
}
.grid-personalizado-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.grid-personalizado-link {
    color: var(--bs-orange);
    text-decoration: none;
    font-weight: 600;
}
.grid-personalizado-link:hover {
    color: var(--bs-orange-hover, var(--bs-orange));
}
/* Card com DOIS destinos — o card abre uma tela e um elemento dentro dele abre
   outra (nos Anúncios: a listagem × a listagem já na aba "Sem estoque").
   O card deixa de ser `<a>` e o clique dele passa a ser este overlay, porque
   `<a>` dentro de `<a>` é HTML inválido: o navegador desmonta a marcação e o
   card se parte em links soltos.
   ⚠️ O `position: relative` vem da CLASSE, nunca de um `:has()`: sem suporte, o
   overlay se ancoraria no primeiro ancestral posicionado e viraria um link
   invisível cobrindo meia tela. */
.grid-personalizado-card--overlay {
    position: relative;
}
.grid-personalizado-card-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
}

/* Chip de PENDÊNCIA no rodapé do card (ex.: "4 sem estoque" nos marketplaces da
   tela de Anúncios). A cor e o corpo vêm do `.aba-alerta` — é literalmente o
   mesmo chip que a aba "Sem estoque" da listagem que o card abre exibe, com o
   mesmo número, e uma segunda folha de âmbar já divergiu uma vez neste projeto
   (ver o bloco .aba* no fim deste arquivo). Aqui muda o lugar e o alcance do
   clique: o `.grid-personalizado-actions` alinha à direita e o `auto` empurra o
   chip para a ESQUERDA; o `z-index` o mantém ACIMA do overlay do card, que
   senão engoliria o clique dele. */
.grid-personalizado-alerta {
    margin-right: auto;
    position: relative;
    z-index: 1;
    text-decoration: none;   /* é <a> — o Bootstrap sublinharia */
}
a.grid-personalizado-alerta:hover {
    background: #ffe8cc;
    border-color: #ffcc80;
    color: #7a4f00;
}
/* Badge de CARACTERÍSTICA no canto superior direito do card (ex.: "Apoio" nos
   setores do Mapa de Produção). A cor sai dos utilitários `bg-*-subtle` do
   Bootstrap 5.3, que já acompanham o tema claro/escuro — aqui mora só o LUGAR.
   ⚠️ Cinza NEUTRO, nunca o âmbar do `.aba-alerta`: apoio é um atributo do setor,
   não pendência, e cor de alerta prometeria trabalho a fazer (mesma razão pela
   qual o badge FULL dos anúncios não usa o vermelho nem o âmbar).
   ⚠️ O `position: relative` vem da CLASSE do card, nunca de um `:has()`: sem
   suporte, o badge se ancoraria no primeiro ancestral posicionado e iria parar
   no canto da coluna inteira.
   ⚠️ O `padding-right` no header não é enfeite — sem ele, nome de setor longo
   passa POR BAIXO do badge. */
.grid-personalizado-card--badge {
    position: relative;
}
.grid-personalizado-card--badge .grid-personalizado-header {
    padding-right: 58px;
}
.grid-personalizado-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}
.grid-personalizado-empty {
    border: 1px dashed var(--bs-border-color);
    border-radius: 12px;
    padding: 24px;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* ================= LOADER (Spinner centralizado) ================= */
#loader-overlay,
.loader-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--bs-body-bg-rgb), .65);
    backdrop-filter: blur(2px);
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border-width: 3px;
    color: var(--bs-primary);
}

/* #resultado-pesquisa-ncm {
    display: none;
    margin-top: 15px;
}

#resultado-pesquisa-ncm table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f8f9fa;
}

#resultado-pesquisa-ncm th, #resultado-pesquisa-ncm td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

#resultado-pesquisa-ncm th {
    background-color: #007bff;
    color: white;
}

#resultado-pesquisa-ncm td {
    background-color: #ffffff;
}

#resultado-pesquisa-ncm .btn-success {
    margin-top: 10px;
} */

/* .is-valid {
    border-color: #28a745 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
} */

/* #id_ncm_descricao {
    white-space: pre-wrap;
    font-family: monospace;
} */

/* ================= TOASTR (estilos locais) ================= */
/* O z-index NÃO fica aqui — mora no bloco "CAMADA DE AVISO" no fim deste
   arquivo, junto com o do SweetAlert, porque os dois só fazem sentido lidos
   contra o `.modalright`. */
#toast-container {
    position: fixed;
    pointer-events: none;
}

#toast-container.toast-top-right {
    top: 16px;
    right: 16px;
}

#toast-container .toast {
    min-width: 320px;
    max-width: 520px;
    width: calc(100vw - 32px);
    min-height: 96px;
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 20px 52px 20px 20px;
    margin-bottom: 14px;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white);
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow);
    cursor: auto;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

#toast-container .toast-accent {
    flex: 0 0 10px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-info);
}

#toast-container .toast-success .toast-accent {
    background-color: var(--bs-success);
}

#toast-container .toast-warning .toast-accent {
    background-color: var(--bs-warning);
}

#toast-container .toast-error .toast-accent,
#toast-container .toast-danger .toast-accent {
    background-color: var(--bs-danger);
}

#toast-container .toast-info .toast-accent {
    background-color: var(--bs-info);
}

#toast-container .toast-body {
    padding: 0;
    color: var(--bs-body-color);
}

#toast-container .toast-title {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-info);
}

#toast-container .toast-success .toast-title {
    color: var(--bs-success);
}

#toast-container .toast-warning .toast-title {
    color: var(--bs-warning);
}

#toast-container .toast-error .toast-title,
#toast-container .toast-danger .toast-title {
    color: var(--bs-danger);
}

#toast-container .toast-info .toast-title {
    color: var(--bs-info);
}

#toast-container .toast-message {
    margin-right: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--bs-secondary-color);
    white-space: normal;
}

#toast-container .toast-close-button {
    position: absolute;
    top: 18px;
    right: 20px;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

#toast-container .toast-progress {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--bs-info);
    opacity: 0.35;
    transform-origin: left center;
}

#toast-container .toast-success .toast-progress {
    background-color: var(--bs-success);
}

#toast-container .toast-warning .toast-progress {
    background-color: var(--bs-warning);
}

#toast-container .toast-error .toast-progress,
#toast-container .toast-danger .toast-progress {
    background-color: var(--bs-danger);
}

@keyframes core-toast-progress {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* ================= FILTRO DE DATA ================= */

/* Botão gatilho */
.date-filter-trigger.is-active {
    background: rgba(85, 110, 230, 0.1);
    border-color: rgba(85, 110, 230, 0.35);
    color: var(--bs-primary);
}

/* Casca do menu */
.date-filter-dropdown .date-filter-menu {
    min-width: 360px;
    max-width: calc(100vw - 32px);
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}

/* Abas de campo (só quando há mais de um campo de data) */
.date-filter-tabs {
    display: flex;
    gap: 20px;
    padding: 14px 18px 0;
    border-bottom: 1px solid var(--bs-border-color-translucent, #f1f2f5);
}

.date-filter-tab {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    padding: 0 0 9px;
    font-weight: 600;
}

.date-filter-tab.active {
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-body-color);
}

/* Atalhos rápidos */
.df-quicks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--bs-border-color-translucent, #f1f2f5);
}

.df-chip {
    padding: 7px 13px;
    border: 1px solid #e6e8ee;
    border-radius: 999px;
    background: #fff;
    color: #5b6270;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.df-chip:hover {
    border-color: rgba(85, 110, 230, 0.4);
    color: var(--bs-primary);
}

.df-chip.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

/* Calendário */
.df-cal {
    position: relative;
    padding: 14px 18px 4px;
}

.df-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.df-nav-group {
    display: flex;
    gap: 6px;
}

.df-nav {
    width: 30px;
    height: 30px;
    border: 1px solid #e6e8ee;
    border-radius: 8px;
    background: #fff;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.df-nav:hover {
    border-color: rgba(85, 110, 230, 0.4);
    color: var(--bs-primary);
}

.df-cal-title {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.df-cal-title:hover {
    background: rgba(85, 110, 230, 0.08);
    color: var(--bs-primary);
}

.df-weekdays,
.df-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.df-weekdays > div {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #c2c6cf;
}

.df-day {
    height: 38px;
    border: 0;
    background: transparent;
    border-radius: 9px;
    font-size: 12.5px;
    color: #495057;
    cursor: pointer;
}

.df-day:hover {
    background: rgba(85, 110, 230, 0.08);
}

.df-day.is-outside {
    color: #d3d7de;
}

.df-day.in-range {
    background: rgba(85, 110, 230, 0.12);
    color: var(--bs-primary);
    border-radius: 0;
}

.df-day.is-today {
    box-shadow: inset 0 0 0 1.6px rgba(85, 110, 230, 0.5);
    font-weight: 600;
    color: var(--bs-primary);
}

.df-day.is-start {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 9px 0 0 9px;
}

.df-day.is-end {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 0 9px 9px 0;
}

.df-day.is-start.is-single {
    border-radius: 9px;
}

/* Seletor de mês/ano (sobreposto) */
.df-picker {
    position: absolute;
    inset: 0;
    background: #fff;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
}

.df-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.df-picker-year {
    font-weight: 600;
    color: #495057;
}

.df-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1;
}

.df-month {
    height: 44px;
    border: 1px solid #eceef2;
    border-radius: 10px;
    background: #fff;
    color: #495057;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.df-month:hover {
    border-color: rgba(85, 110, 230, 0.4);
    color: var(--bs-primary);
}

.df-month.is-current {
    border-color: rgba(85, 110, 230, 0.5);
    color: var(--bs-primary);
    font-weight: 600;
}

.df-month.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

/* Popup do seletor de data em calendário (input[data-calendario]).
   Reaproveita o visual .df-cal; position:fixed p/ não sofrer recorte do
   modal-body, z-index acima do modal (~1055). */
.cal-popup {
    position: fixed;
    z-index: 1065;
    width: 340px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17, 20, 24, .16);
}

.cal-popup .df-cal {
    padding: 12px 14px 8px;
}

/* Rodapé */
.df-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid #f1f2f5;
}

.df-foot .df-summary {
    font-size: 12px;
    color: var(--bs-secondary-color);
}

@media (max-width: 420px) {
    .date-filter-dropdown .date-filter-menu {
        min-width: calc(100vw - 32px);
    }
}

/* ================= FILTRO DE CATEGORIA ================= */
/* A lista do Tom Select nasce com 200px (~5 itens): num plano de contas isso é
   rolagem a cada dois cliques. A LARGURA não está aqui — o piso é o `min-width`
   inline do include (padrão de produtos-base) e o JS a alarga pela maior linha
   da lista, que é medida e não cabe em CSS.

   `.categoria-hierarquica` é o mesmo seletor de categoria fora do filtro de
   cabeçalho (modal da linha de overhead): a classe vai no <select> pelo form e
   o Tom Select a copia para o wrapper — é assim que os seletores
   `.ts-wrapper.form-select` abaixo também funcionam. */
.categoria-filter .ts-dropdown-content,
.categoria-hierarquica .ts-dropdown-content {
    max-height: 380px;
}

/* Cada linha em UMA linha só: com a largura seguindo o conteúdo, quebrar seria
   contradizer a medida — o que não couber no teto é cortado com reticências. */
.categoria-filter .ts-dropdown .option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= POPOVER (tema) ================= */
.popover {
    --bs-popover-bg: var(--bs-primary);
    --bs-popover-body-color: var(--bs-white);
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-header-border-color: var(--bs-primary);
    --bs-popover-arrow-border: var(--bs-primary);
    --bs-popover-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    --bs-popover-font-size: 14px !important;
}

/* Selects em foco */
.form-select:focus,
.ts-wrapper.focus .ts-control,
.ts-wrapper:focus-within .ts-control,
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.input-active .ts-control,
.ts-wrapper.dropdown-active .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.multi.input-active .ts-control,
.ts-wrapper.single.dropdown-active .ts-control,
.ts-wrapper.multi.dropdown-active .ts-control {
    border: var(--bs-border-width) solid var(--bs-border-color-active) !important;
    box-shadow: none !important;
}

.ts-wrapper.form-control:not(.disabled).focus .ts-control,
.ts-wrapper.form-control:not(.disabled).input-active .ts-control,
.ts-wrapper.form-control:not(.disabled).dropdown-active .ts-control,
.ts-wrapper.form-select:not(.disabled).focus .ts-control,
.ts-wrapper.form-select:not(.disabled).input-active .ts-control,
.ts-wrapper.form-select:not(.disabled).dropdown-active .ts-control,
.ts-wrapper.form-control:not(.disabled).single.focus .ts-control,
.ts-wrapper.form-control:not(.disabled).single.input-active .ts-control,
.ts-wrapper.form-control:not(.disabled).single.dropdown-active .ts-control,
.ts-wrapper.form-select:not(.disabled).single.focus .ts-control,
.ts-wrapper.form-select:not(.disabled).single.input-active .ts-control,
.ts-wrapper.form-select:not(.disabled).single.dropdown-active .ts-control {
    border: var(--bs-border-width) solid var(--bs-border-color-active) !important;
    box-shadow: none !important;
}

.ts-wrapper.focus,
.ts-wrapper:focus-within,
.ts-wrapper.input-active,
.ts-wrapper.dropdown-active,
.ts-wrapper.form-control:not(.disabled).focus,
.ts-wrapper.form-control:not(.disabled).input-active,
.ts-wrapper.form-control:not(.disabled).dropdown-active,
.ts-wrapper.form-select:not(.disabled).focus,
.ts-wrapper.form-select:not(.disabled).input-active,
.ts-wrapper.form-select:not(.disabled).dropdown-active {
    box-shadow: none !important;
}

/* ================= TOM SELECT (tema) ================= */
/* Remove a borda que o Bootstrap injeta no .ts-wrapper via .form-select */
.ts-wrapper {
    border: none !important;
    padding: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Remove borda do <input> interno */
.ts-wrapper .ts-control input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Controle padrão - borda única cinza */
.ts-wrapper .ts-control,
.ts-wrapper.form-control .ts-control,
.ts-wrapper.form-select .ts-control {
    background-color: var(--bs-white) !important;
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    min-height: calc(1.5em + .94rem + calc(var(--bs-border-width) * 2));
    padding: .47rem .75rem;
    font-size: .8125rem;
    line-height: 1.5;
    box-shadow: none !important;
}

/* Foco */
.ts-wrapper.focus .ts-control,
.ts-wrapper.form-control.focus .ts-control,
.ts-wrapper.form-select.focus .ts-control {
    border-color: var(--bs-border-color-active) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-border-color-translucent-active) !important;
}

/* Dropdown aberto - junção com o dropdown */
.ts-wrapper.dropdown-active .ts-control,
.ts-wrapper.form-control.dropdown-active .ts-control,
.ts-wrapper.form-select.dropdown-active .ts-control {
    border-color: var(--bs-border-color-active) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
}

/* Dropdown */
.ts-dropdown {
    background-color: var(--bs-white) !important;
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color-active) !important;
    border-top: var(--bs-border-width) solid var(--bs-border-color-active) !important;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
    overflow: hidden;
    margin-top: 0 !important;
}

.ts-dropdown .option {
    background: var(--bs-white);
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--bs-border-color-active) !important;
    color: var(--bs-white);
}

/*
 * Override do projeto: largura padrão dos modais.
 * Aumenta apenas os modais "padrão" (sem modificador de tamanho) de 500px -> 700px.
 * modal-sm, modal-lg, modal-xl e modal-fullscreen permanecem com a largura do Bootstrap.
 */
@media (min-width: 576px) {
    .modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-fullscreen) {
        max-width: 700px;
    }
}

/* ---- Cabeçalho padrão da page-content (card 5c) ------------------------- */
/* Flutuante: gruda a 12px do topo ao rolar (não há topbar fixa no layout). */
.page-header {
    position: sticky;
    top: 12px;
    z-index: 1020;
    background-color: var(--bs-secondary-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(17, 20, 24, .08);
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* Linha de pesquisa/filtros — segunda linha do card, largura total */
.page-header-filters {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--bs-border-color);
}

/* Voltar discreto — substitui o btn-primary "Voltar" */
.page-header-back {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #666a6e);
    font-size: 14px;
    cursor: pointer;
}
.page-header-back:hover {
    background: var(--bs-border-color, #dee2e6);
    color: var(--bs-emphasis-color, #2f333b);
}

.page-header-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* Seção/kicker acima do título (ex.: PRODUTOS) */
.page-header-kicker {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #8a8f98);
}

.page-header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-emphasis-color, #2f333b);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ações — sempre à direita */
.page-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Certificado digital A1 (proposta 1c) -------------------------------- */

.cert-banner {
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.cert-banner-lead { display: flex; align-items: center; gap: 16px; }
.cert-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(255, 255, 255, .22);
}
.cert-banner-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .75;
}
.cert-banner-title { font-size: 20px; font-weight: 600; line-height: 1.15; }
.cert-banner-sub { font-size: 13px; opacity: .9; }
.cert-banner-days-num { font-size: 34px; font-weight: 700; line-height: 1; text-align: right; }
.cert-banner-days-label { font-size: 12px; opacity: .85; text-align: right; }

.cert-banner--valido    { background: var(--bs-success); }
.cert-banner--expirando { background: var(--bs-warning); }
.cert-banner--expirado  { background: var(--bs-danger); }
.cert-banner--vazio {
    background: #f1f2f4;
    color: #495057;
    border: 1px solid var(--bs-border-color);
}
.cert-banner--vazio .cert-banner-icon { background: #e4e6ea; color: #74788d; }

.cert-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(17, 20, 24, .05);
}
.cert-card-title { font-size: 14px; font-weight: 600; color: #343a40; margin-bottom: 16px; }

.cert-dropzone {
    border: 1.5px dashed #c5c9d0;
    border-radius: 12px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fafbfc;
    transition: border-color .15s ease, background .15s ease;
}
.cert-dropzone.is-dragover { border-color: var(--bs-primary); background: #eef1fd; }
.cert-dropzone-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eef1fd;
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}
.cert-dropzone-name { font-size: 13px; color: #495057; font-weight: 500; }
.cert-dropzone-hint { font-size: 12px; color: #74788d; }

.cert-details > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #f0f1f3;
    font-size: 12.5px;
}
.cert-details dt { color: #74788d; font-weight: 500; margin: 0; }
.cert-details dd { color: #343a40; margin: 0; text-align: right; }

.cert-empty {
    border: 1px dashed var(--bs-border-color);
    border-radius: 10px;
    padding: 34px 20px;
    text-align: center;
    color: #adb5bd;
    font-size: 13px;
}

/* ============================================================
   Dropdown dentro de contêiner com rolagem (.table-responsive)
   ------------------------------------------------------------
   dropdown-overflow.init.js reposiciona esses menus com Popper
   strategy "fixed" (escapam do recorte do overflow) e marca o
   menu com .dropdown-overflow-fix. O tema (bootstrap.css) força
   top: 100% !important no .show e anima o transform
   (DropDownSlide), o que quebra o posicionamento fixed do Popper
   — o Popper ancora sempre com inset top/left 0 + translate().
   Estas regras neutralizam o tema SÓ nos menus marcados.
   ============================================================ */
.dropdown-menu.dropdown-overflow-fix {
    -webkit-animation: none !important;
    animation: none !important;
    /* Ao virar `position: fixed` o menu deixa de empilhar dentro do conteúdo e
       passa a competir com o cromo fixo da tela: sidebar (1001), page-header
       (1020), bottom-bar (1050) e modal (1055). Com o z-index padrão do tema
       (1000) ele abria ATRÁS da sidebar — aberto, posicionado e invisível.
       Fica acima do cromo e ABAIXO do modal (1055): menu de página nunca deve
       pintar por cima de um diálogo. */
    z-index: 1051;
}
/* Menu DENTRO de um modal precisa vencer o próprio modal. */
.modal .dropdown-menu.dropdown-overflow-fix {
    z-index: 1060;
}

/* As regras abaixo REAFIRMAM a âncora que o Popper escolheu, para neutralizar
   os !important do tema (`.dropdown-menu.show{top:100%}` e
   `.dropdown-menu-end[style]{left:auto;right:0}`) sem trocar o lado da âncora.
   ⚠️ Um `left:0 !important` fixo NÃO serve: em menu `.dropdown-menu-end` o
   Popper ancora pela DIREITA (inset: 0 0 auto auto) e calcula o translate a
   partir dela — reancorar à esquerda jogava o menu para fora da tela (era o
   bug do menu "…" das linhas da lista de notas de entrada). O lado certo vem
   do atributo data-popper-placement, escrito pelo próprio Popper. */
.dropdown-menu.dropdown-overflow-fix.show[data-popper-placement^="bottom"] {
    top: 0 !important;
    bottom: auto !important;
}
.dropdown-menu.dropdown-overflow-fix.show[data-popper-placement^="top"] {
    top: auto !important;
    bottom: 0 !important;
}
.dropdown-menu.dropdown-overflow-fix[style][data-popper-placement$="-end"] {
    right: 0 !important;
    left: auto !important;
}
.dropdown-menu.dropdown-overflow-fix[style][data-popper-placement="bottom"],
.dropdown-menu.dropdown-overflow-fix[style][data-popper-placement="top"],
.dropdown-menu.dropdown-overflow-fix[style][data-popper-placement$="-start"] {
    left: 0 !important;
    right: auto !important;
}

/* ============================================================
   Popover de descrição (ícone "i" — categorias financeiras etc.)
   Preserva as quebras de linha do texto digitado no textarea.
   ============================================================ */
.descricao-popover .popover-body {
    white-space: pre-line;
}

/* ===================================================================
   ABAS PADRÃO DO SISTEMA — "Sublinhado refinado" (opção 1b)
   Cole este bloco no FINAL de static/css/app.css (carregado depois do
   bootstrap.css, então vence por ordem — não precisa !important).
   Aplica-se a TODAS as telas que usam <ul class="nav nav-tabs nav-tabs-custom">.
   =================================================================== */

/* ⚠️ O espaçamento entre as abas é PADDING do link, nunca `gap` do <ul>.
   Com `gap`, o vão fica FORA do item — e a caixa da aba ativa (o fundo branco
   que o Bootstrap dá em `.nav-tabs .nav-link.active`) para na borda do item,
   deixando uma faixa cinza vazia entre uma aba e a vizinha. Como padding, o
   mesmo respiro passa a ser coberto pela caixa: os realces ficam adjacentes e
   o vão vazio some, sem os rótulos se aproximarem. */
/* ⚠️ A margem abaixo da barra mora AQUI, não no `mb-3` do template. O
   utilitário do Bootstrap é `!important` (`.mb-3 { margin-bottom: 1rem
   !important }`), então enquanto ele estiver na tag nenhum valor daqui vale — e
   o projeto já tinha três espaçamentos diferentes convivendo: 22 telas com
   `mb-3`, uma com `mb-4` e nove sem margem alguma (nessas o conteúdo colava no
   trilho). Ao acrescentar aba nova, NÃO repor `mb-*` no <ul>. */
   .nav-tabs-custom {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--bs-border-color);
}

.nav-tabs-custom .nav-item {
    position: relative;
    color: var(--bs-body-color);
}

.nav-tabs-custom .nav-item .nav-link {
    border: none;
    padding: 12px 24px 13px;            /* 24 + 24 = os 48px que eram `gap` */
    color: #71767c;
    font-weight: 500;
    transition: color 200ms ease;
}

.nav-tabs-custom .nav-item .nav-link:hover {
    color: var(--bs-active-menu);
}

/* sublinhado 3px arredondado, animado. O `bottom` acompanha a espessura do
   trilho (2px) — com -1px sobraria uma listra do trilho aparecendo sob o
   sublinhado da aba ativa. */
.nav-tabs-custom .nav-item .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--bs-active-menu);            /* #fd582a */
    transform: scaleX(0);
    transition: transform 250ms ease, background-color 200ms ease;
}

/* dica de sublinhado suave no hover */
.nav-tabs-custom .nav-item .nav-link:hover::after {
    background: #ffcbb9;
    transform: scaleX(1);
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: var(--bs-active-menu);
    font-weight: 600;
}

.nav-tabs-custom .nav-item .nav-link.active::after {
    background: var(--bs-active-menu);
    transform: scaleX(1);
}

/* Variante justificada (nav-justified): os itens já dividem a largura em
   partes iguais e, com `gap: 0`, encostam uns nos outros — o respiro entre os
   rótulos vem da própria largura do item, não do padding. Manter os 24px aqui
   só roubaria espaço do texto e anteciparia a quebra de linha ("Dados
   complementares" quebrava em duas linhas a 1280px). O sublinhado 100%
   acompanha o item, como antes. */
.nav-tabs-custom.nav-justified .nav-item .nav-link {
    padding-left: 8px;
    padding-right: 8px;
}

/* ---- Contador de aba (.aba / .aba-contagem / .aba-alerta) --------------- */
/* Padrão ÚNICO do projeto para aba com contador (Suprimentos, Anúncios,
   Financeiro, Atendimento...). Mora aqui, e não no CSS de um app, porque três
   telas já haviam copiado a mesma ideia com prefixo próprio (.nfe-aba, .pml-aba
   e um `text-muted ms-1` solto) — e as cópias divergiram: gap .4rem × 7px, chip
   #fff3cd × #fff4e5, raio 10px × 5px. Aba nova usa estas classes; não criar a
   quarta cópia.

   A regra visual: a barra de abas tem UMA cor, a da aba ativa. Contador de
   recorte é TEXTO, não objeto. Só eixo de PENDÊNCIA ganha chip âmbar, e só
   quando há o que resolver — cor na barra significa trabalho a fazer.

   Markup pelo include `templates/base/aba_contagem.html` (é ele que decide
   entre chip e texto). Ver CLAUDE.md → Templates → "Abas com contador". */

/* O <a> vira flex para o vão rótulo↔contador vir do `gap` — sobrevive à
   edição/remoção do contador, coisa que a `ms-1` do Bootstrap não faz.

   ⚠️ O seletor PRECISA ser escopado em `.nav-tabs-custom .nav-item`: `.aba`
   sozinho empata em especificidade com `.nav-link { display: block }` do
   Bootstrap, e empate se decide por ordem de carga. Aqui o app.css vem depois
   do bootstrap.css e venceria, mas num CSS de app (que o base.html carrega
   ANTES do bootstrap) o `inline-flex` morre calado — levando junto o `gap` e o
   `align-items`. Foi o que aconteceu com .nfe-aba e .pml-aba. */
.nav-tabs-custom .nav-item .nav-link.aba {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Contador de recorte: mesmo corpo do rótulo, um tom mais claro. Dígitos
   tabulares para os números não dançarem ao trocar de aba. */
.aba-contagem {
    font-size: 12.5px;
    font-weight: 500;
    color: #a2a7ae;
    font-variant-numeric: tabular-nums;
}

/* Zero: presente (a aba existe e é clicável), mas sem pedir atenção. */
.aba-contagem--zero {
    color: #c4c8ce;
}

/* Na aba ativa o contador acompanha o laranja do rótulo — é a única cor da
   barra, e é a que informa onde você está. */
.nav-tabs-custom .nav-item .nav-link.active .aba-contagem {
    color: var(--bs-active-menu);
    font-weight: 600;
}

/* Chip de PENDÊNCIA. Âmbar igual ao do selo "Só cabeçalho" e do "a vincular"
   de Suprimentos — o sistema já ensinou que âmbar = falta resolver, então o
   chip dispensa legenda. Renderizado só com contador > 0.
   O prefixo `.aba-` é histórico: ele é o chip de pendência do projeto e serve
   fora de aba também (ver `.grid-personalizado-alerta`, nos cards de Anúncios).
   Chip novo de pendência REUSA esta classe — não criar outro âmbar. */
.aba-alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;          /* dois dígitos não estreitam o chip */
    padding: 1px 7px;
    border-radius: 5px;
    background: #fff4e5;
    color: #9a6400;
    border: 1px solid #ffe0b2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/*# sourceMappingURL=app.css.map  */

/* ===================================================================
   SELETOR DE TEMA CLARO/ESCURO (sidebar — bloco do usuário)
   Botões [data-theme-opt] geridos por static/js/theme.js.
   =================================================================== */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-secondary-bg);
}

.theme-switch-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.theme-switch-opt i {
    font-size: 12px;
}

.theme-switch-opt:hover {
    color: var(--bs-body-color);
}

.theme-switch-opt.is-active {
    background: var(--bs-active-menu, var(--bs-primary));
    color: #fff;
}

/* ===================================================================
   TEMA ESCURO — sobrescritas do app.css (data-bs-theme=dark)
   ------------------------------------------------------------------
   Aqui ficam SOMENTE as correções de cores fixas escritas para o tema
   claro. Tudo que já usa var(--bs-*) troca sozinho pelas variáveis dos
   blocos [data-bs-theme=dark] do bootstrap.css — não duplicar aqui.
   Novas telas: usar var(--bs-*) em vez de hex fixo; se precisar de hex,
   acrescentar o par escuro nesta seção.
   =================================================================== */

/* ---- Sidebar recolhida (flyout do menu) ---- */
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a:active,
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a:focus,
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul>li>a:hover {
    color: var(--bs-sidebar-text-color);
}
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
    color: var(--bs-active-menu);
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a i {
    color: var(--bs-active-menu);
}
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul ul {
    background-color: var(--bs-secondary-bg);
}
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a {
    color: var(--bs-sidebar-text-color);
}
[data-bs-theme=dark] .vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a:hover {
    color: var(--bs-active-menu);
}

/* ---- Componentes utilitários ---- */
[data-bs-theme=dark] .social-list-item:hover {
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] #session-timeout-dialog .btn-default {
    background-color: var(--bs-secondary-bg);
}
[data-bs-theme=dark] input[switch]+label:before {
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .sp-container button {
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .sp-container button.sp-palette-toggle {
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .sp-palette-container {
    border-right-color: var(--bs-border-color);
}

/* ---- FullCalendar ---- */
[data-bs-theme=dark] .fc th.fc-widget-header {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .fc-unthemed .fc-content,
[data-bs-theme=dark] .fc-unthemed .fc-divider,
[data-bs-theme=dark] .fc-unthemed .fc-list-heading td,
[data-bs-theme=dark] .fc-unthemed .fc-list-view,
[data-bs-theme=dark] .fc-unthemed .fc-popover,
[data-bs-theme=dark] .fc-unthemed .fc-row,
[data-bs-theme=dark] .fc-unthemed tbody,
[data-bs-theme=dark] .fc-unthemed td,
[data-bs-theme=dark] .fc-unthemed th,
[data-bs-theme=dark] .fc-unthemed thead {
    border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .fc-unthemed td.fc-today {
    background: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .fc-button {
    color: var(--bs-body-color);
}

/* ---- Tabelas auxiliares e listas ---- */
[data-bs-theme=dark] .table-rep-plugin .checkbox-row:hover {
    background-color: var(--bs-tertiary-bg) !important;
}
[data-bs-theme=dark] .table-rep-plugin .checkbox-row label::before {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .table-rep-plugin .checkbox-row input[type=checkbox]:disabled+label::before {
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .categoria-item:hover {
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .filhos {
    border-left-color: var(--bs-border-color);
}
[data-bs-theme=dark] .bg-warning {
    background-color: rgba(241, 180, 76, .3) !important;
}
[data-bs-theme=dark] #atributos-existentes {
    background-color: var(--bs-secondary-bg);
}
[data-bs-theme=dark] #atributos-existentes thead th {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-heading-color);
    border-bottom-color: var(--bs-border-color);
}
[data-bs-theme=dark] #atributos-existentes tbody td {
    border-top-color: var(--bs-border-color);
}
[data-bs-theme=dark] #atributos-existentes tbody tr:hover {
    background-color: var(--bs-tertiary-bg);
}

/* ---- Toast (CoreToast) ---- */
[data-bs-theme=dark] #toast-container .toast {
    background-color: var(--bs-secondary-bg);
}

/* ---- Filtro de data / calendário popup ---- */
[data-bs-theme=dark] .df-chip {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .df-chip.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
[data-bs-theme=dark] .df-nav {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .df-cal-title {
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .df-weekdays > div {
    color: var(--bs-gray-500);
}
[data-bs-theme=dark] .df-day {
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .df-day.is-outside {
    color: var(--bs-gray-400);
}
[data-bs-theme=dark] .df-picker {
    background: var(--bs-secondary-bg);
}
[data-bs-theme=dark] .df-picker-year {
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .df-month {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .cal-popup {
    background: var(--bs-secondary-bg);
}
[data-bs-theme=dark] .df-foot {
    border-top-color: var(--bs-border-color);
}

/* ---- Certificado digital A1 ---- */
[data-bs-theme=dark] .cert-banner--vazio {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .cert-banner--vazio .cert-banner-icon {
    background: rgba(255, 255, 255, .08);
    color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .cert-card-title {
    color: var(--bs-heading-color);
}
[data-bs-theme=dark] .cert-dropzone {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .cert-dropzone.is-dragover,
[data-bs-theme=dark] .cert-dropzone-icon {
    background: rgba(85, 110, 230, .18);
}
[data-bs-theme=dark] .cert-dropzone-name {
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .cert-dropzone-hint,
[data-bs-theme=dark] .cert-details dt,
[data-bs-theme=dark] .cert-empty {
    color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .cert-details > div {
    border-bottom-color: var(--bs-border-color);
}
[data-bs-theme=dark] .cert-details dd {
    color: var(--bs-body-color);
}

/* ---- Abas padrão (nav-tabs-custom) ---- */
[data-bs-theme=dark] .nav-tabs-custom {
    border-bottom-color: var(--bs-border-color);
}
[data-bs-theme=dark] .nav-tabs-custom .nav-item .nav-link {
    color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .nav-tabs-custom .nav-item .nav-link:hover {
    color: var(--bs-active-menu);
}
[data-bs-theme=dark] .nav-tabs-custom .nav-item .nav-link:hover::after {
    background: rgba(253, 126, 20, .35);
}
[data-bs-theme=dark] .nav-tabs-custom .nav-item .nav-link.active {
    color: var(--bs-active-menu);
}

/* Contador de aba — ver o bloco .aba* acima. */
[data-bs-theme=dark] .aba-contagem {
    color: #8b929c;
}
[data-bs-theme=dark] .aba-contagem--zero {
    color: #5f666f;
}
/* Mesmo âmbar do .badge-a-vincular de Suprimentos no escuro — dizem o mesmo. */
[data-bs-theme=dark] .aba-alerta {
    background: rgba(253, 126, 20, .12);
    color: #e9a23b;
    border-color: rgba(253, 126, 20, .35);
}
/* Quando o chip é CLICÁVEL (card de marketplace em Anúncios). */
[data-bs-theme=dark] a.grid-personalizado-alerta:hover {
    background: rgba(253, 126, 20, .22);
    border-color: rgba(253, 126, 20, .5);
    color: #f3bb6d;
}

/* ---- Tom Select (campo acompanha o form-control: 1 degrau mais claro) ---- */
[data-bs-theme=dark] .ts-wrapper .ts-control,
[data-bs-theme=dark] .ts-wrapper.form-control .ts-control,
[data-bs-theme=dark] .ts-wrapper.form-select .ts-control {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .ts-dropdown {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .ts-dropdown .option {
    background: var(--bs-secondary-bg);
}
/* O texto DIGITADO na busca sai do <input> interno, e a folha da CDN
 * (tom-select.bootstrap5) o pinta com um #343a40 FIXO — cinza-escuro sobre fundo
 * escuro, ou seja, invisível enquanto se digita. As regras acima só acertam o
 * texto do item já escolhido, que herda a cor do .ts-control. */
[data-bs-theme=dark] .ts-wrapper .ts-control input {
    color: var(--bs-body-color);
}

/* ---- SweetAlert2 ---- */
[data-bs-theme=dark] .swal2-popup {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .swal2-title {
    color: var(--bs-heading-color);
}
[data-bs-theme=dark] .swal2-html-container {
    color: var(--bs-body-color);
}

/* ---- Tagify ---- */
[data-bs-theme=dark] .tagify {
    --tags-border-color: var(--bs-border-color);
    --tag-bg: var(--bs-tertiary-bg);
    --tag-text-color: var(--bs-body-color);
    --tag-hover: var(--bs-gray-300);
    background: var(--bs-secondary-bg);
}

/* ---- jQuery UI (autocomplete/datepicker) ---- */
[data-bs-theme=dark] .ui-widget-content {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .ui-widget-header {
    background: var(--bs-tertiary-bg);
    color: var(--bs-heading-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .ui-state-default,
[data-bs-theme=dark] .ui-widget-content .ui-state-default {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* ---- CKEditor 5 (mínimo utilizável) ---- */
[data-bs-theme=dark] .ck.ck-editor__main > .ck-editor__editable {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .ck.ck-toolbar {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
    border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .ck.ck-button:not(.ck-on):not(:hover),
[data-bs-theme=dark] a.ck.ck-button:not(.ck-on):not(:hover) {
    background: transparent;
    color: var(--bs-body-color);
}

/* ---- Campos de formulario (bootstrap.css fixa var(--bs-white) no fundo) ----
   Um degrau MAIS CLARO que a superficie (card/modal = --bs-secondary-bg), para
   o campo nao se fundir com o fundo dentro de modais e cards. */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select {
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .select2-container .select2-selection--single,
[data-bs-theme=dark] .select2-container .select2-selection--multiple {
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme=dark] .table-edits input,
[data-bs-theme=dark] .table-edits select {
    background-color: var(--bs-tertiary-bg);
}

/* ---- Checkbox / radio / switch ----
   No escuro o quadradinho herdava --bs-form-check-bg: var(--bs-secondary-bg) (a
   MESMA cor do card/modal) e a borda vinha de --bs-border-color-translucent
   (alpha .09): o controle desmarcado praticamente sumia. Sobe o fundo um degrau
   e reforca a borda, como nos demais campos. Marcado ja usa o acento (visivel). */
[data-bs-theme=dark] .form-check-input {
    --bs-form-check-bg: var(--bs-tertiary-bg);
}
/* A borda so e reforcada no estado DESMARCADO: marcado tem borda do acento
   (laranja) vinda do bootstrap.css com a MESMA especificidade — sem o :not()
   esta regra venceria por ordem e apagaria o acento. */
[data-bs-theme=dark] .form-check-input:not(:checked):not(:focus) {
    border-color: rgba(255, 255, 255, .3);
}
[data-bs-theme=dark] .form-check-input:not(:disabled):not(:checked):not(:focus):hover {
    border-color: rgba(255, 255, 255, .45);
}
/* Reafirma o indeterminado (azul). Nao da para excluir por :not(:indeterminate)
   acima: radio sem nenhum marcado no grupo TAMBEM casa com :indeterminate pelo
   HTML, e ficaria sem a borda reforcada. */
[data-bs-theme=dark] .form-check-input[type=checkbox]:indeterminate {
    border-color: var(--bs-primary);
}
[data-bs-theme=dark] .form-checkbox-outline .form-check-input,
[data-bs-theme=dark] .form-checkbox-outline .form-check-input:checked,
[data-bs-theme=dark] .form-radio-outline .form-check-input,
[data-bs-theme=dark] .form-radio-outline .form-check-input:checked {
    background-color: var(--bs-tertiary-bg) !important;
}
/* Bolinha do switch desligado: o branco a .25 do Bootstrap some no fundo escuro */
[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.55%29'/%3e%3c/svg%3e");
}

/* ---- Logomarca da Amazon (texto "amazon" em preto fixo no SVG) ----
   amazon.svg desenha o texto preto sem fill declarado — some no fundo escuro.
   amazon-branco.svg é a mesma marca com o texto em branco. Troca por `content`
   (não por classe): o ícone é renderizado solto em vários templates
   (anúncios, integrações, vendas) sem uma classe em comum; o seletor por
   trecho do `src` cobre todos de uma vez, inclusive com o hash de
   cache-busting do collectstatic (`amazon.<hash>.svg`). */
[data-bs-theme=dark] img[src*="/brands/amazon."] {
    content: url("../images/brands/amazon-branco.98686aab1a07.svg");
}

/* ---- Utilitária .text-black (preto fixo do Bootstrap) ----
   `.text-black` resolve para `rgba(var(--bs-black-rgb), …) !important` — e preto
   é preto nos dois temas, então o texto sumia no fundo escuro (era o label
   "Tipo do produto:" da visualização do produto comercial). O tema claro fica
   como está: PRETO PURO, que é o que a classe promete e o que a tela sempre
   mostrou; aqui só se troca o valor no escuro pela mesma ênfase máxima do tema
   (--bs-emphasis-color = #fff), preservando o contraste alto pretendido.

   Correção GLOBAL, não por tela: a classe é usada com o sentido de "rótulo
   forte", não de "tinta preta". ⚠️ Quem precisar de preto de verdade nos DOIS
   temas — conteúdo sobre superfície branca fixa, como a etiqueta ZPL
   renderizada ou o ícone SVG `sem_fundo` — deve declarar a cor no próprio
   componente, nunca por esta utilitária. */
[data-bs-theme=dark] .text-black {
    color: var(--bs-emphasis-color) !important;
}

/* ---- Ações de anúncio (bloco ".acao-anuncio*", no fim deste arquivo) ---- */
/* As tintas do tema claro escurecem o texto para passar em AA sobre fundo
   branco; no escuro é o contrário — a tinta sobe um pouco e o texto clareia.
   O `--copiado` (verde de confirmação) não aparece aqui: ele é o mesmo nos
   dois temas, como todo verde de sucesso do projeto. */
[data-bs-theme=dark] .acao-anuncio--abrir  { background: rgba(85, 110, 230, .20); color: #9fb0ff; }
[data-bs-theme=dark] .acao-anuncio--copiar { background: rgba(150, 157, 167, .18); color: #c4c9d0; }
[data-bs-theme=dark] .acao-anuncio--editar { background: rgba(241, 180, 76, .20); color: #f5cd8b; }
[data-bs-theme=dark] .acao-anuncio--sysdk  { background: rgba(253, 88, 42, .20); color: #ff9670; }
[data-bs-theme=dark] .acao-anuncio--abrir:hover  { background: #556ee6; color: #fff; }
[data-bs-theme=dark] .acao-anuncio--copiar:hover { background: #74788d; color: #fff; }
[data-bs-theme=dark] .acao-anuncio--editar:hover { background: #f1b44c; color: #1b1d21; }
[data-bs-theme=dark] .acao-anuncio--sysdk:hover  { background: #fd582a; color: #fff; }

/* ===== BADGE DE PENDÊNCIA NO MENU LATERAL ===== */
/* Contadores vêm dos context processors `atendimento.context_processors`
   (pendências de atendimento) e `anuncios.context_processors` (anúncios sem
   estoque); o template só renderiza o badge quando o valor é > 0 (badge "0"
   contradiria a cor). Verde = "tem trabalho esperando", não é erro nem alerta —
   UMA cor para todos os contadores, de propósito: cor por tipo de pendência
   viraria um vocabulário que o usuário teria de decorar.
   O link do menu é `display:block; position:relative`, então o badge se ancora
   nele por posicionamento absoluto — serve igual ao item pai e aos filhos. */
.menu-badge {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #34c38f;
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

/* Menu RECOLHIDO: a regra `#sidebar-menu>ul>li>a span { display:none }` esconde
   o rótulo — e esconderia o badge junto, justo no estado em que ele é a única
   pista de que há trabalho esperando. Aqui ele sobrevive, como um ponto no
   canto do ícone. Precisa da mesma especificidade daquela regra para vencê-la. */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a span.menu-badge {
    display: block;
    top: 10px;
    right: 12px;
    padding: 0 5px;
    transform: none;
}

/* O hover expande o item de volta para 190px e devolve o rótulo: o badge volta
   para a direita, alinhado ao texto. */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span.menu-badge {
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
}

/* =========================================================================
   CAMADA DE AVISO — SweetAlert e toast ficam ACIMA de tudo
   =========================================================================

   O `.modalright` (painel lateral escuro, `static/css/modal_right.css`) é
   `z-index: 10000` — o valor mais alto do projeto. Ele é `position: fixed`
   com z-index, logo abre um STACKING CONTEXT próprio, e é isso que separa os
   dois casos:

     - filho do painel (dropdown 2050, tooltip 1080, modal 1055…) empilha
       DENTRO do contexto dele e aparece normalmente;
     - elemento pendurado no `<body>` — `.swal2-container` (1060) e
       `#toast-container` (9999) são os dois que o projeto usa — vira IRMÃO do
       painel na raiz, é comparado direto contra 10000 e some por baixo.

   O sintoma é traiçoeiro: o diálogo existe no DOM e a Promise fica pendente,
   mas a tela não muda — o clique parece não fazer nada. Foi assim que a
   confirmação "lançar o custo sem o frete?" (Suprimentos → Formação de custo)
   e os avisos do painel do SEFAZ (Cadastros → Cliente/Fornecedor) ficaram
   invisíveis.

   Aviso é a camada mais alta da tela POR NATUREZA: nada que peça uma decisão
   ao usuário pode ser tapado. Por isso a correção sobe os dois acima do
   painel, em vez de rebaixar o `.modalright` — que é o único dono do 10000 e
   está em 9 telas, cada uma com um empilhamento já conferido à mão.

   ⚠️ `body` no seletor não é enfeite. O `app.css` carrega ANTES do
   `sweetalert2.min.css` no `base.html` (linhas 41 e 44), então empate de
   especificidade se PERDE por ordem. Hoje a regra do vendor é
   `div:where(.swal2-container)` — `:where()` zera a especificidade, então até
   `.swal2-container` sozinho venceria; o `body` protege contra uma versão
   futura do SweetAlert que largue o `:where()` e passe a empatar.
   ========================================================================= */
body .swal2-container {
    z-index: 10050;
}

/* Acima do SweetAlert, como sempre esteve (era 9999 × 1060): um toast disparado
   com um diálogo aberto precisa continuar legível. */
body #toast-container {
    z-index: 10060;
}

/* ===================================================================
   AÇÕES DE ANÚNCIO — coluna "Ações" da aba Anúncios do produto comercial
   (templates/produtos/produto_comercial/visualizar.html) e da LISTAGEM de
   anúncios (templates/anuncios/anuncios.html), que usa as mesmas pílulas
   desde 2026-08-13 — uma folha só, senão as duas telas divergem na primeira
   manutenção.

   Substitui os `btn btn-sm btn-outline-*` da coluna. O problema do padrão
   antigo era leitura: três dos quatro botões eram outline-secondary cinza, e
   nada dizia se a ação abria o marketplace ou uma tela do SYSDK. Aqui cada
   ação tem ícone próprio, cor própria e rótulo escrito — o destino vira
   palavra, então o `title` deixa de ser a única pista.

   Cores: tinta a 12–22% da cor da ação como fundo; o texto usa o tom escuro
   da mesma família para passar em contraste AA a 12px (o tom claro sobre
   tinta ficava em 2,5–3,5:1). O hover inverte para a cor cheia.

   ⚠️ O par ESCURO destas regras mora na seção "TEMA ESCURO" deste mesmo
   arquivo, onde o projeto concentra TODO `[data-bs-theme=dark]` (medido: não
   há uma regra dark sequer fora dela). A ordem não importa aqui — os
   seletores de lá têm especificidade maior (atributo + classe).
   =================================================================== */

.acoes-anuncio {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.acao-anuncio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.acao-anuncio:hover { text-decoration: none; }
.acao-anuncio i { font-size: 12px; }

/* Abre o anúncio no marketplace */
.acao-anuncio--abrir  { background: rgba(85, 110, 230, .12); color: #3a4ca8; }
.acao-anuncio--abrir:hover  { background: #556ee6; color: #fff; }

/* Copia o link para a área de transferência */
.acao-anuncio--copiar { background: rgba(116, 120, 141, .14); color: #495057; }
.acao-anuncio--copiar:hover { background: #74788d; color: #fff; }

/* Edita o anúncio no Mercado Livre */
.acao-anuncio--editar { background: rgba(241, 180, 76, .22); color: #7d570f; }
.acao-anuncio--editar:hover { background: #f1b44c; color: #fff; }

/* Abre o anúncio dentro do SYSDK — laranja da marca */
.acao-anuncio--sysdk  { background: rgba(253, 88, 42, .13); color: #b33a13; }
.acao-anuncio--sysdk:hover  { background: #fd582a; color: #fff; }

/* Confirmação de "link copiado" — o JS da tela põe a classe por 800 ms.
   ⚠️ O feedback era a classe `btn-success` do Bootstrap, que só pinta em
   elemento que TAMBÉM tenha `.btn` (é ela quem consome as `--bs-btn-*`). Sem a
   classe base, o verde nunca apareceria e o clique pareceria não ter feito
   nada — a mesma cor num par próprio resolve. O `:hover` entra junto porque o
   ponteiro fica sobre o botão logo depois do clique. */
.acao-anuncio--copiado,
.acao-anuncio--copiado:hover { background: #34c38f; color: #fff; }

/* ---- A mesma coluna na LISTAGEM de anúncios (templates/anuncios/anuncios.html)
   Lá ela também é a ÚLTIMA coluna e também não tem rótulo no <th>, então herda
   o alinhamento à direita e as pílulas COM RÓTULO, iguais às daqui de cima.
   A única diferença é o `nowrap`, e ele existe por um motivo medido:

   ⚠️ Sem ele a linha TRIPLICA de altura. Com o `wrap` herdado, a largura
   mínima do flex é a de UMA pílula, então a tabela — que na listagem divide o
   espaço com outras 9 colunas — conclui que a coluna cabe em ~230px e empilha
   as quatro: medido em 2026-08-13, a linha ia de 57px para 138px. Sem quebra,
   a coluna se dimensiona pelo conteúdo (~590px) e a linha fica nos 57px.

   O custo é rolagem horizontal na tabela — que já existia antes desta coluna
   (a tabela tem 10 colunas) e é só dela, nunca da página. Abaixo de 992px o
   rótulo sai pelo @media do fim deste bloco e sobra o ícone, com o `title`
   respondendo. */
.acoes-anuncio--listagem { flex-wrap: nowrap; }

.acoes-anuncio-vazio { color: #adb5bd; }

/* Telas estreitas: o rótulo sai e sobra o ícone (o `title` volta a responder).
   O breakpoint é o mesmo em que a tabela já rola na horizontal. */
@media (max-width: 991.98px) {
    .acao-anuncio { padding: 0 8px; width: 30px; justify-content: center; }
    .acao-anuncio span { display: none; }
}