/* REFERENCIA DE BREAKPOINTS PRA DEIXAR RESPONSIVO
    // (SM) Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    // (MD) Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // (LG) Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // (XL) Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }

    // (SXL) Extra Extra large devices (large desktops, 1400px and up) (custom)
    @media (min-width: 1400px) { ... }
==================================================*/

.col-sxl-6 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 1500px) {
    .col-sxl-6 { flex: 0 0 50%; max-width: 50%; }
    .mb-sxl-0 { margin-bottom: 0; }
}

/* Para arrumar as sobras horizontais da página */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    height: 100%;
}

/*======================*/

/* Título card conteúdo */
.card-title {
    font-size: 2rem !important;
}

/* Alinha os labels na direita (breakpoint: sm) */
.col-form-label {
    font-weight: 500;
}

@media (min-width: 768px) {
    .col-form-label {
        font-weight: 500;
        text-align: end;
    }
}

/*======================*/

.dragging {
    cursor: grabbing;
}

.w-20 {width: 20%;}

.hover-underline {
    text-decoration:none;
}
.hover-underline:hover {
    text-decoration:underline !important;
}

.hover{
    background-color: rgba(0,0,0,0);
}
.hover:hover{
    background-color: rgba(0,0,0,.075);
}

.semi-white{
    background-color: rgba(255,255,255,0.75);
}

.no-decoration, .no-decoration:hover {
    color: #212529;
    text-decoration:none;
}

.img-gradient {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%,rgba(228, 228, 228, 0.98) 100%);
}

/* Campo upload de arquivos bootstrap */
.custom-file-label {
    text-align: left;
}

.custom-file-label-sm {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

/*======================*/

/* Arredonda botoes da barra */
.btn-round {
    border-radius: 100px !important;
    margin: 2px 0px;
    padding: 0px !important;
    width: 36px;
    height: 36px;
}

.btn-icon {
    border-radius: 100px !important;
    padding: 0px !important;
    width: 20px;
    height: 20px;
    margin-top: -0.5rem;
}

.btn-icon-hover {
    color: initial;
}
.btn-icon-hover:hover {
    color: rgb(211, 211, 211) !important;
}

/*======================*/

/* Aba com item inválido */
.invalid-tab {
    border-color: red !important;
}

/*======================*/

/* Item dropdown fica do tamanho do parent */
.datatable-dropdown-item {
    width: initial !important;
}

/* Ativa quebra de linha no footer do datatable */
.dataTables_info {
    white-space: normal !important;
}

/* Pra nao cortar menulist fora da datatable */
.table-responsive, .dataTables_scrollBody {
    overflow: visible !important;
}

/* .dataTables_wrapper tbody td { */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* overflow: hidden; */
/* max-width: 1px; */
/* } */

.break-word {
    word-wrap: break-word;
}

.cell-w-limit {
    max-width: 20vw;
}
.cell-w-limit-15 {
    max-width: 15vw;
}
.cell-w-limit-30 {
    max-width: 30vw;
}
.cell-small {
    width: 10vw;
}
.cell-min {
    width: 0px;
}

.mw-300px {
    max-width: 300px;
}

.head-select-width {
    width: 100% !important;
}
/* sm */
@media (min-width: 576px) { 
    .head-select-width {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/*======================*/

@keyframes barberpole {
    100% {
        background-position: 100% 100%;
    }
}

/* Carregando genérico */
#carregando_escondido {
    position: absolute;
    z-index: 20000;
    pointer-events: none;
    height: 3rem;
    top: 2rem;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    min-width: 24rem;
}

#carregando_escondido .toast-body{
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    margin-right: 8px;
    border-radius: .375rem;
    background-color: var(--primary);
}

.carregando_icon {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.carregando_texto {
    /* text-transform: uppercase; */
    color: white;
    font-weight: lighter;
    text-align: center;
}

.carregando_pronto .toast-body{
    background-color: var(--success) !important;
}

.carregando_erro .toast-body{
    background-color: var(--danger) !important;
}

/* Arruma bootstrap-select em mobile */
.bootstrap-select .dropdown-menu {
    /* min-width: initial !important; */
    /* width: 100%; */
    max-width: 80vw;
}

/*======================*/

/* Deixa fullscreen se menor que xl */
@media (max-width: 1199px) {
    .modal-xl {
        max-width: 95vw;
    }
}

/* Modal quase fullscreen (maior que modal-xl) */
.modal-fullscreen {
    max-width: 95vw;
}

.modal-auto {
    min-width: auto;
    max-width: fit-content;
}

/*======================*/

/* Transformações de texto */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

/*======================*/
.modal-full-width {
    min-width: 100%;
    margin: 0;
}

.modal-full-width .modal-content {
    min-height: 100vh;
}

/* Arruma bug de scrollbar em modais recursivos */
.modal {
    overflow: auto !important;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-checkbox input[type='checkbox']:not(:disabled) ~ .custom-control-label {
    cursor: pointer;
}

input[type='checkbox'] {
    cursor: pointer;
}

.obrigatorio {
    color: red;
}

.dropdown-item {
    cursor: pointer !important;
}

.w-90-perc {
    width: 90% !important;
}
.w-10-perc {
    width: 10% !important;
}
.w-95-perc {
    width: 95% !important;
}
.w-5-perc {
    width: 5% !important;
}
.font-size-20 {
    font-size: 20px;
}
.font-size-14 {
    font-size: 14px;
}
.font-size-x-small {
    font-size: x-small !important;
}
.font-size-small {
    font-size: small !important;
}

.tab-scroll .nav-tabs {
    overflow-x: auto;
    overflow-y:hidden;
    flex-wrap: nowrap;
}
.tab-scroll .nav-tabs .nav-link {
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

.bg-chat {
    box-shadow: 0 .2rem .2rem rgba(0,0,0,.10)!important;
}

.bg-chat-mine {
    background-color: rgb(220, 248, 198);
}

.mw-none {
    max-width: none !important;
}

.mw-80 {
    max-width: 80%;
}

/* "small" com suporte a breakpoints */
@media (max-width: 576px) {
    .small-sm {
        font-size: 80%;
        font-weight: 400;
    }
}
@media (max-width: 768px) {
    .small-md {
        font-size: 80%;
        font-weight: 400;
    }
}
@media (max-width: 992px) {
    .small-lg {
        font-size: 80%;
        font-weight: 400;
    }
}
@media (max-width: 1200px) {
    .small-xl {
        font-size: 80%;
        font-weight: 400;
    }
}

/* ===== Datatable Select =====*/ 
table.dataTable tbody td.select-checkbox,
table.dataTable thead th.select-checkbox {
  position: relative;
}
/* before/after */
table.dataTable tbody td.select-checkbox:before, 
table.dataTable tbody td.select-checkbox:after,
table.dataTable thead th.select-checkbox:before,
table.dataTable thead th.select-checkbox:after {
    position: absolute;
    top: 1rem;
    left: 50%;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    background-color: #fff;
    border: #adb5bd solid 1px;
    border-radius: .25rem;
}
/* before/after - SM */
table.dataTable tbody td.select-checkbox-sm:before, 
table.dataTable tbody td.select-checkbox-sm:after,
table.dataTable thead th.select-checkbox-sm:before,
table.dataTable thead th.select-checkbox-sm:after {
    top: .5rem;
    left: 1rem;
}
/* Selecionado */
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    background-color: var(--primary);
    border-color: var(--primary);
    margin-top: unset;
    margin-left: unset;
    text-align: unset;
    text-shadow: unset;
}
/* Desabilitado */
tr.disabled td.select-checkbox:before,
tr.disabled td.select-checkbox:after,
tr.disabled th.select-checkbox:before,
tr.disabled th.select-checkbox:after {
    background-color: rgb(163, 163, 163) !important;
}
/* Estado padrao */
table.dataTable tbody td.select-checkbox:before,
table.dataTable thead th.select-checkbox:before {
    content: "";
    margin-top: unset;
    margin-left: unset;
}
/* ========= */

.bg-notif-menu { background-color: #f1f1f1; }
@keyframes blink {
    0% { background-color: white; }
    18% { background-color: #FFBA57; }
    100% { background-color: #FFFCF3; }
}
.notif-blink {
    animation: blink .8s forwards;
}
.notif-item {
    min-width: 20vw;
}

.badge-orange {
    color: #212529;
    background-color: #ff8b07;
}
.badge-obj {
    color: #212529;
    background-color: #acacac66;
}



/* Desativa cor padrao da linha de grupo do datatable */
table.dataTable tr.dtrg-group td { background-color: unset; }

.group-hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    cursor: pointer;
}
.group-hover:hover {
    background-color: rgba(200, 200, 200, 0.1) !important;
}


.w-xs-100 {
    width: 100%;
}
.w-xs-75 {
    width: 75%;
}
.w-xs-70 {
    width: 70%;
}
.w-xs-50 {
    width: 50%;
}
.w-xs-25 {
    width: 25%;
}

/* perc widths com suporte a breakpoints */
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }
    .w-sm-75 {
        width: 75% !important;
    }
    .w-sm-50 {
        width: 50% !important;
    }
    .w-sm-25 {
        width: 25% !important;
    }
}
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }
    .w-md-75 {
        width: 75% !important;
    }
    .w-md-50 {
        width: 50% !important;
    }
    .w-md-25 {
        width: 25% !important;
    }
}
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }
    .w-lg-75 {
        width: 75% !important;
    }
    .w-lg-50 {
        width: 50% !important;
    }
    .w-lg-25 {
        width: 25% !important;
    }
}
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }
    .w-xl-75 {
        width: 75% !important;
    }
    .w-xl-50 {
        width: 50% !important;
    }
    .w-xl-25 {
        width: 25% !important;
    }
}

/* Deixa boostrap-select cinza quando desabilitado */
.dropdown-toggle.disabled {
    background-color: #e9ecef;
}


/* Custom Variables TinyMCE */
.customVariableTag {
    /* color: goldenrod; */
    /* font-weight: bold; */
    border: 1px dashed;
}

.tox-tinymce-inline {
    z-index: 1600 !important;
}

@media print {
    .customVariableTag {
        color: initial;
        border: initial;
    }
    html, body {
        max-width: initial;
        overflow-x: initial;
        height: initial;
    }
    div.page {
        page-break-after: always;
        page-break-inside: avoid;
    }
    .pageMargin {
        padding: 1in;
    }
}

.popover{
    max-width: 100%;
}

a.disabled {
    pointer-events: none;
}

/* JSON EDITOR CUSTOMIZATION */

div.jsoneditor-menu {
    background-color: #6c757d;
    border: thin solid #6c757d;
}

div.jsoneditor {
    border: thin solid #6c757d;
}

div.pico-modal-header {
    background-color: #6c757d !important;
}

.jsoneditor-jmespath-label {
    color: #000 !important;
}

.hideSubtext li small {
    display: none;
}

.jsoneditor-poweredBy {
    display: none;
}

.bg-inativo { background-color: rgba(255,0,0,0.12) !important; }
.bg-inativo:hover { background-color: rgba(255,0,0,0.18) !important; }
.bg-inativo.odd { background-color: rgba(255,0,0,0.16) !important; }
.bg-inativo.odd:hover { background-color: rgba(255,0,0,0.2) !important; }

.bg-essential { background-color: rgba(0, 255, 255, 0.12) !important; }
.bg-essential:hover { background-color: rgba(0, 255, 255,0.18) !important; }
.bg-essential.odd { background-color: rgba(0, 255, 255,0.16) !important; }
.bg-essential.odd:hover { background-color: rgba(0, 255, 255,0.2) !important; }

.bg-automatico { background-color: rgba(0, 255, 64, 0.12) !important; }
.bg-automatico:hover { background-color: rgba(00, 255, 64,0.18) !important; }
.bg-automatico.odd { background-color: rgba(0, 255, 64,0.16) !important; }
.bg-automatico.odd:hover { background-color: rgba(0, 255, 64,0.2) !important; }

.bg-warning2 { background-color: rgba(255, 206, 0, 0.12) !important; }
.bg-warning2:hover { background-color: rgba(255, 206, 0, 0.18) !important; }
.bg-warning2.odd { background-color: rgba(255, 206, 0, 0.16) !important; }
.bg-warning2.odd:hover { background-color: rgba(255, 206, 0, 0,0.2) !important; }

.bg-warning2.selected { color: unset; background-color: rgba(34, 0, 255, 0.12) !important; }
.bg-warning2.selected:hover { color: unset; background-color: rgba(34, 0, 255, 0.18) !important; }
.bg-warning2.odd.selected { color: unset; background-color: rgba(34, 0, 255, 0.16) !important; }
.bg-warning2.odd.selected:hover { color: unset; background-color: rgba(34, 0, 255, 0.2) !important; }

.bg-lightgrey { background-color: #f2f2f2 !important; }

.text-black {color:black;}

.badge-flex-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.badge-button-small {
    padding: 0.15rem;
    font-size: small;
    font-weight: 500;
}

.mini-label {
    font-size: .6rem;
    font-weight: 600;
}

.modal-offset {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: -10px;
    margin-bottom: -10px;
}

/* Fix: borda direita do datatables em caso de header complexo */
/* .table-bordered thead tr:last-child th:last-child {
    border-right: 1px solid #dee2e6
} */

.jstree-default a.jstree-search { 
    color:var(--primary) !important; 
}

/* Theme customization */
@font-face {
    font-family: 'Nunito';
    src: url('/images/Nunito.ttf') format('truetype');
    font-display: swap;
}

body{
    font-family: 'Nunito', sans-serif;
}

.login-bg {
    background-image: linear-gradient(
        120deg, 
        var(--primary) 0%,
        var(--primary) 14%,
        color-mix(in srgb, var(--primary) 60%, white 40%) 22%,
        color-mix(in srgb, var(--primary) 60%, white 40%) 35%,
        var(--primary) 43%,
        var(--primary) 62%,
        color-mix(in srgb, var(--primary) 60%, white 40%) 70%,
        color-mix(in srgb, var(--primary) 60%, white 40%) 85%,
        var(--primary) 92%,
        var(--primary) 100%
    );
}

.alert.alert-float {
    position: absolute;
    top: 2rem;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.fade-flex {
    position: absolute;
    opacity: 0;
    transition: opacity 0.15s linear;
    z-index: 0;
}

.fade-flex.show {
    opacity: 1;
    z-index: 1;
}

/* ====== Navbar ====== */
#menuButton {
    width: 80px;
    cursor: pointer;
    /* background: linear-gradient(225deg, #00569B 40%, #3476AC 100%); */
}

.btn-menu-bg {
    background: linear-gradient(225deg, var(--primary) 40%, color-mix(in srgb, var(--primary) 80%, white 20%) 100%);
}

.navbar-first-bg {
    background: color-mix(in srgb, var(--primary) 80%, white 20%);
}

.navbar-second-bg {
    background: linear-gradient(138deg, var(--primary) 0%, transparent 80%);
}

@media (max-width: 576px) { 
    .navbar-first-bg {
        clip-path: none !important;
        padding-left: 0 !important;
        width: 100%;
    }

    .navbar-second-bg{
        clip-path: none !important;
    }
}
/* ============= */

/* ====== Sidebar ====== */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 298px;
    height: 100%;
    max-width: 100%;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: color-mix(in srgb, var(--primary) 70%, white 30%) !important;
}

#sidebar.show {
    transform: translateX(0);
}

#sidebarContent {
    overflow-y: scroll;
    scrollbar-width: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

#sidebarFooter {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    border-color: color-mix(in srgb, var(--primary) 70%, white 30%) !important;
}

.sidebar-item a {
    text-decoration: none;
}

.sidebar-item a:focus {
    color: var(--light) !important;
}

.sidebar-link:hover:not([aria-expanded=true]){
    color: var(--light) !important;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color .25s ease-in-out;
}

.sidebar-link[aria-expanded=true], .sidebar-link[aria-expanded=true] + ul {
    background-color: rgba(0, 0, 0, 0.2);
}

.sidebar-link[aria-expanded=true] .fa-caret-down, .card-filter[aria-expanded=true] .fa-caret-down {
    transform: rotate(180deg);
    transition: all .2s ease-in-out;
}

.sidebar-link[aria-expanded=false] .fa-caret-down, .card-filter[aria-expanded=false] .fa-caret-down {
    transform: rotate(0deg);
    transition: all .2s ease-in-out;
}

.sidebar-bg {
    background: linear-gradient(60deg, color-mix(in srgb, var(--primary) 80%, white 20%) 40%, var(--primary) 100%);
}
/* ============= */

/* ====== Nav underline ====== */
.nav-underline .nav-link {
  border: none;
  color: var(--gray);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
}

.nav-underline .nav-link:hover {
  border-bottom-color: #dee2e6;
}

.nav-underline .nav-link.active {
  color: var(--primary);
  border-bottom-color: currentColor;
  font-weight: 500;
}
/* ============= */

/* ====== Tabela ====== */
.table-bordered tbody tr:last-child td:first-child {
    border-bottom-left-radius: .5rem;
}

.table-bordered tbody tr:last-child td:last-child {
    border-bottom-right-radius: .5rem;
}

.dataTables_scrollHead .table.table-bordered{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dataTables_wrapper .dataTables_scrollBody .table.table-bordered {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.table-bordered thead tr:first-child th:first-child{
    border-top-left-radius: .5rem;
}

.table-bordered thead tr:last-child th:last-child{
    border-top-right-radius: .5rem;
}

.datatable.table-bordered thead tr:first-child th:first-child {
    border-left: 1px solid #dee2e6;
}
    
.datatable.table-bordered thead tr:last-child th:last-child {
    border-right: 1px solid #dee2e6;
}

.table-bordered {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: .5rem;
}
/* ============= */

/* ====== Widgets fixos ====== */
.bg-success-linear {
    background: linear-gradient(151deg, color-mix(in srgb, var(--success) 80%, white 20%) 0%, var(--success) 50%);
}

.bg-warning-linear {
    background: linear-gradient(151deg, color-mix(in srgb, var(--warning) 80%, white 20%) 0%, var(--warning) 60%);
}

.bg-accent-linear {
    background: linear-gradient(151deg, color-mix(in srgb, var(--accent) 80%, white 20%) 0%, var(--accent) 60%);
}
/* ============= */

/* ====== Background circles widgets fixos ====== */
.widget-bg-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
}

.widget-bg-circle::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;;
    border-radius: 50%; 
}

.widget-bg-circle.circle-success-minor {
    border-color: color-mix(in srgb, var(--success) 80%, white 20%);
}

.widget-bg-circle.circle-success-minor::after {
    background-color: color-mix(in srgb, var(--success) 80%, white 20%);
}

.widget-bg-circle.circle-success-major {
    border-color: color-mix(in srgb, var(--success) 90%, white 10%);
}

.widget-bg-circle.circle-success-major::after{
    background-color: color-mix(in srgb, var(--success) 90%, white 10%);
}

.widget-bg-circle.circle-warning-minor {
    border-color: color-mix(in srgb, var(--warning) 70%, white 30%);
}

.widget-bg-circle.circle-warning-minor::after{
    background-color: color-mix(in srgb, var(--warning) 70%, white 30%);
}

.widget-bg-circle.circle-warning-major {
    border-color: color-mix(in srgb, var(--warning) 80%, white 20%);
}

.widget-bg-circle.circle-warning-major::after{
    background-color: color-mix(in srgb, var(--warning) 80%, white 20%);
}

.widget-bg-circle.circle-accent-minor {
    border-color: color-mix(in srgb, var(--accent) 70%, white 30%);
}

.widget-bg-circle.circle-accent-minor::after{
    background-color: color-mix(in srgb, var(--accent) 70%, white 30%);
}

.widget-bg-circle.circle-accent-major {
    border-color: color-mix(in srgb, var(--accent) 90%, white 10%);
}

.widget-bg-circle.circle-accent-major::after{
    background-color: color-mix(in srgb, var(--accent) 90%, white 10%);
}
/* ============= */