/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ============================================================
   TEMA AVALIZA - Variáveis de cor para light/dark mode
   ============================================================ */

/* LIGHT MODE: azul escuro Avaliza */
:root {
  --primary: #12153b;
  --primary-light: #2a2f6b;
  --primary-text: #12153b;
  --primary-bg: #12153b;
}

/* DARK MODE: azul claro para contraste com fundo escuro #161D31 */
.dark-layout {
  --primary: #5867d8;
  --primary-light: #7a87e0;
  --primary-text: #8b97e8;
  --primary-bg: #2a3261;
}

/* DARK MODE - corrige textos/badges/links que ficam invisíveis
   contra o fundo escuro (#161D31). O azul escuro #12153b é
   praticamente igual ao fundo dark, então sobrescrevemos para
   um azul mais claro/médio */
.dark-layout .text-primary,
.dark-layout a.text-primary,
.dark-layout .text-primary:hover,
.dark-layout .text-primary:focus {
  color: var(--primary-text) !important;
}

.dark-layout .badge-primary {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.dark-layout .badge-light-primary {
  background-color: rgba(88, 103, 216, 0.18) !important;
  color: var(--primary-text) !important;
}

.dark-layout .btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.dark-layout .btn-primary:hover,
.dark-layout .btn-primary:focus,
.dark-layout .btn-primary:active {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}

.dark-layout .btn-outline-primary {
  border-color: var(--primary) !important;
  color: var(--primary-text) !important;
}

.dark-layout .btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.dark-layout .bg-primary {
  background-color: var(--primary-bg) !important;
}

.dark-layout .bg-light-primary {
  background-color: rgba(88, 103, 216, 0.12) !important;
}

.dark-layout .border-primary {
  border-color: var(--primary) !important;
}

/* Header em dark mode: usa um azul-marinho mais visível */
.dark-layout .header-navbar.bg-primary {
  background-color: #2a3261 !important;
}

/* Links em dark mode: garantir cor visível */
.dark-layout a:not(.btn):not(.dropdown-item):not(.nav-link) {
  color: var(--primary-text);
}

.dark-layout a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
  color: var(--primary-light);
}

/* Números, percentuais e indicadores que usam .text-primary */
.dark-layout .card .text-primary,
.dark-layout .card h1.text-primary,
.dark-layout .card h2.text-primary,
.dark-layout .card h3.text-primary,
.dark-layout .card h4.text-primary,
.dark-layout .card h5.text-primary,
.dark-layout .card .display-1.text-primary,
.dark-layout .card .display-2.text-primary,
.dark-layout .card .display-3.text-primary {
  color: var(--primary-text) !important;
}

/* Progress bars */
.dark-layout .progress-bar.bg-primary {
  background-color: var(--primary) !important;
}

/* Item de dropdown em hover/focus: sem esta regra herda #12153b do
   tema (colors.min.css), quase idêntico ao fundo escuro do menu.
   Sobrescrevemos para --primary-text, legível nos dois temas. */
.dark-layout .dropdown-menu .dropdown-item:hover,
.dark-layout .dropdown-menu .dropdown-item:focus {
  color: var(--primary-text) !important;
}

/* Aba ativa (nav-tabs/nav-pills): sem esta regra herda #12153b do
   tema sobre fundo #283046, quase ilegível. */
.dark-layout .nav-tabs .nav-item .nav-link.active,
.dark-layout .nav-pills .nav-item .nav-link.active,
.dark-layout .nav-tabs.nav-justified .nav-item .nav-link.active {
  color: var(--primary-text) !important;
}

/* Número de página em hover (paginação DataTables): mesmo problema
   de #12153b herdado do tema. */
.dark-layout .pagination:not([class*="pagination-"]) .page-item .page-link:hover {
  color: var(--primary-text) !important;
}

/* Botão "Visualizar"/ações em tabelas (.btn-flat-primary): não
   existia nenhum override de dark mode em colors.css, então herdava
   #12153b sobre fundo transparente = invisível contra a página
   escura. Cobre os 4 estados definidos em colors.css:588-600. */
.dark-layout .btn-flat-primary {
  color: var(--primary-text) !important;
}

.dark-layout .btn-flat-primary:hover,
.dark-layout .btn-flat-primary:active,
.dark-layout .btn-flat-primary.active,
.dark-layout .btn-flat-primary:focus {
  color: var(--primary-text) !important;
}

/* Linha de tabela destacada (.alert-primary): mesma causa, sem
   override de dark mode em colors.css. Fundo também trocado para o
   tint azul-claro já usado em badge-light-primary (mais visível que
   o rgba(18,21,59,.12) original sobre fundo escuro). */
.dark-layout .alert-primary {
  background: rgba(88, 103, 216, 0.12) !important;
  color: var(--primary-text) !important;
}
/*.brand-logo{
   width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left
}

.brand-text{
    width: 130px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    margin-left: 5px;
}

.menu-light .brand-logo{
	background-image: url(https://avaliza.com/app-home/docs/logo/icone.png);
}
.menu-light .brand-text{
	background-image: url(https://avaliza.com/app-home/docs/logo/avaliza.png);
}*/

.avatar-simple{
   border-radius: 50%;
   overflow: hidden;
   cursor: default;
   position: relative;
   display: inline-flex;
   vertical-align: middle;
}

.text-yellow{color: var(--yellow) !important;}
.text-pink{color: var(--pink) !important;}
.text-blue{color: var(--blue) !important;}

.nav.top-rounded .nav-item {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   overflow: hidden;
}

ul.custom_timeline {
   list-style-type: none;
   position: relative;
}
ul.custom_timeline:has(li):before {
   content: ' ';
   background: var(--gray);
   display: inline-block;
   position: absolute;
   left: 29px;
   width: 2px;
   height: calc(100% - 1px);
   z-index: 10;
}
ul.custom_timeline > li {
   margin: 20px 0;
   padding-left: 20px;
}
ul.custom_timeline > li:before {
   content: ' ';
   background: var(--white);
   display: inline-block;
   position: absolute;
   border-radius: 50%;
   border: 3px solid var(--success);
   left: 20px;
   width: 20px;
   height: 20px;
   z-index: 10;
}

ul.custom_timeline > li.step-success:before {
   border-color: var(--success);
}
ul.custom_timeline > li.step-primary:before {
   border-color: var(--primary);
}
ul.custom_timeline > li.step-warning:before {
   border-color: var(--warning);
}
ul.custom_timeline > li.step-danger:before {
   border-color: var(--danger);
}
ul.custom_timeline > li.step-secondary:before {
   border-color: var(--secondary);
}

.dark-layout ul.custom_timeline > li:before {
   background: #283046;
}

mark[data-markjs]{
   background: rgb(235 248 0 / 41%);
   color: #cbbe39;
   font-weight: bolder;
}

.custom-file-input:lang(pt-br)~.custom-file-label.buscar::after {
   content: 'Buscar' !important;
   height: auto !important;
   display: flex !important;
   align-items: center !important;
   color: white;
   background: var(--secondary);
}

.reflection {
   position: relative;
   overflow: hidden;
}
.reflection::after {
   content: "";
   display: block;
   width: 30px;
   height: 100%;
   position: absolute;
   top: -180px;
   left: 0;
   background-color: #FFF;
   opacity: 0;
   transform: rotate(45deg);
   animation: reflect 5s ease-in-out infinite;
   -webkit-transform: rotate(45deg);
   -webkit-animation: reflect 5s ease-in-out infinite;
}
@keyframes reflect {
   0% { transform: scale(0) rotate(45deg); opacity: 0; }
   80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
   81% { transform: scale(4) rotate(45deg); opacity: 1; }
   100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
   0% { transform: scale(0) rotate(45deg); opacity: 0; }
   80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
   81% { transform: scale(4) rotate(45deg); opacity: 1; }
   100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

[vseparator] {
    height: auto;
    width: 1px;
    background-color: var(--dark);
}

.dark-layout [vseparator] {
    background-color: var(--secondary);
}

.placeholder-glow .placeholder {
    animation: placeholder-glow 2s ease-in-out infinite;
}

.placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: .5;
}

.placeholder-xs {
  min-height: .6em;
}

.placeholder-sm {
  min-height: .8em;
}

.placeholder-lg {
  min-height: 1.2em;
}

@keyframes placeholder-glow {
    50% {
      opacity: .2;
    }
}

label .custom-switch {
    display: flex;
    flex-direction: row;
    align-items: center;
}
label .custom-switch .custom-control-label {
    padding-left: 3rem;
    height: 1.2rem;
}
label .custom-switch .custom-control-input {
    width:0;
    height:0;
}
label .custom-switch .custom-control-label::before {
    height: 1.2rem;
    width: 3rem;
    top: 0;
    left: 0;
}
label .custom-switch .custom-control-input:checked~.custom-control-label::before {
    height: 1.2rem;
    width: 3rem;
}
label .custom-switch .custom-control-label:after {
    height: 0.9rem;
    width: 0.9rem;
    top: 0.15rem;
    left: 0.2rem;
}
label .custom-switch .custom-control-input:checked~.custom-control-label::after {
    height: 0.9rem;
    width: 0.9rem;
    top: 0.15rem;
    left: 0.55rem;
}

.select2-container--default .select2-results__option[aria-disabled=true]::after {
    content: ' [Inativo]';
    color: var(--danger);
    font-weight: bolder;
    font-style: italic;
}

thead td[data-sort],thead th[data-sort]{
    cursor: pointer;
}
thead td[sort]::after,thead th[data-sort]::after{
    font-family: "Font Awesome 5 Free";
    content: '\f0dc';
    margin-left: 5px;
    transition: all ease 5s;
}
thead td[data-sort=desc]::after,thead th[data-sort=desc]::after{
    content: '\f0de';
}
thead td[data-sort=asc]::after,thead th[data-sort=asc]::after{
    content: '\f0dd';
}

.labeled::before {
    content: attr(data-label);
    font-weight: bolder;
    width: 100%;
    background: inherit;
    position: sticky;
    top: 0;
    padding: 2px 0;
    box-shadow: 0 10px 15px -11px #000;
    margin-bottom: 10px;
    border-bottom: 1px solid;
}

input.sem_cobertura, input.sem_cobertura::placeholder{
    font-weight: bolder;
    color: var(--light);
    background-color: var(--secondary) !important;
    text-align: center;
}
.dark-layout input.sem_cobertura, .dark-layout input.sem_cobertura::placeholder{
    color: var(--light);
    background-color: var(--dark) !important;
}

.hover-scale:hover{
    transform: scale(1.3);
}

.hover-scale-102:hover{
    transform: scale(1.02);
}

[boleto-itens] tbody tr.checked,[nao-faturados-itens] tbody tr.checked,
[boleto-itens] tbody tr.checked b[onclick],[nao-faturados-itens] tbody tr.checked b[onclick],
tbody.tr-selectable tr.checked, tbody.tr-selectable tr.checked b[onclick]{
    background: var(--primary);
    color: var(--light) !important;
    font-weight: bolder;
}
[boleto-itens] .table.table-hover tbody tr:hover,
[nao-faturados-itens] .table.table-hover tbody tr:hover,
table.table-hover tbody.tr-selectable tr:hover{
    filter: brightness(0.85);
}
[boleto-itens] .table.table-hover tbody tr.checked:hover,
[nao-faturados-itens] .table.table-hover tbody tr.checked:hover,
table.table-hover tbody.tr-selectable tr.checked:hover{
    background: var(--primary);
    color: var(--light) !important;
}

.btn[data-nota]{
    transition: all .3s ease;
}
.btn[data-nota]:hover{
    transform: scaleY(1.2);
}

.btn-score-seted{
    scale: 1.2 !important;
    z-index: 10 !important;
    outline: 1px solid black !important;
    border-radius: 5px !important;
    transition: all .3s ease;
    background: var(--secondary) !important;
}

.outline-danger{
    outline: 1px solid var(--danger);
}
.outline-2{
    outline-width: 2px;
}
.outline-o2{
    outline-offset: 2px;
}

.dz-error-mark svg g g{
    fill: var(--danger);
}

.dark-layout .form-control[readonly] {
    opacity: .5;
}

.cke{
    border-radius: 5px;
    overflow: hidden;
}

.custom-dropzone .dz-preview{
    background-color: unset !important;
}
.custom-dropzone .dz-preview .dz-progress{
    top: 75% !important;
}

.custom-dropzone:not(.dz-started){
    height: 35px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-dropzone .dz-default.dz-message{
    margin: 0;
    font-weight: bolder;
    color: #AAA;
}

.custom-dropzone{
    border-radius: 5px !important;
    border-style: dashed !important;
    background-color: var(--light);
    min-height: 30px !important;
    padding: 5px !important;
}

[ticket-interacoes] p, [ticket-interacoes] ul, [ticket-interacoes] ol{
    margin-bottom: 0;
}

.flex-auto{
    flex: auto;
}
.flex-1{
    flex: 1;
}
.flex-2{
    flex: 2;
}
.flex-3{
    flex: 3;
}
.nav-item.dropdown.dropdown-notification.show::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: white;
    bottom: -5px;
}

.dataTables_paginate ul.pagination{
    margin: 20px 0 !important;
}
div.dataTables_wrapper .dataTables_info{
    padding-top: 0 !important;
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .dataTables_scrollBody::-webkit-scrollbar-thumb, .custom-scroll::-webkit-scrollbar-thumb{
    background-color: #6664;
    border: 4px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    opacity: 0.5;
    cursor: grab;
}

html::-webkit-scrollbar, body::-webkit-scrollbar, .dataTables_scrollBody::-webkit-scrollbar, .custom-scroll.scroll-y::-webkit-scrollbar{
    width: 16px;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .dataTables_scrollBody::-webkit-scrollbar-thumb:hover, .custom-scroll.scroll-hover::-webkit-scrollbar-thumb:hover{
    border-width: 0;
    cursor: grab;
}
.scroll-y{
    overflow-y: auto;
}
.scroll-x{
    overflow-x: auto;
}

#main-menu-navigation{
    padding-bottom: 50px !important;
}
#msgAuxiliar{
    position: fixed;
    bottom: 0;
    left: 0;
    min-height: 50px;
    z-index: 1000000;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000A5;
    gap: 8px 3px;
}

.gap-2{
    gap: 2px;
}
.gap-3{
    gap: 3px;
}
.gap-10{
    gap: 10px;
}
.gapy-10{
    gap: 0 10px;
}
.gapx-10{
    gap: 10px 0;
}
.gap-2-3{
    gap: 2px 3px;
}
.gap-2-10{
    gap: 2px 10px;
}

.oculto{
    width: 0;
    height: 0;
    opacity: 0;
}

textarea.auto-size{
    padding: 4px 8px !important;
    min-height: 42px;
    max-height: 120px;
    resize: none;
    overflow: hidden;
}

.swal2-timer-progress-bar-container:has(.swal2-timer-progress-bar:visible){
    background-color: var(--gray) !important;
}
.swal2-timer-progress-bar{
    background-color: var(--primary) !important;
}

.spinner_ativo{
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000D0 !important;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    /*backdrop-filter: blur(2px);*/
}

[search_body] tr {
    background-color: #DCDDDF;
}
.dark-layout .brand-logo > img{
    filter: brightness(100);
}
.dark-layout .table-secondary, .dark-layout [search_body] tr{
    background-color: #162440;
}
.menu-dark .brand-logo > img{
	filter: brightness(100);
	/*background-image: url(https://avaliza.com/app-home/docs/logo/icone2.png);*/
}
.menu-dark .brand-text{
	filter: brightness(100);
	/*background-image: url(https://avaliza.com/app-home/docs/logo/avaliza.png);*/
}

.text-linethrough {
    text-decoration: line-through;
}
.dark-layout .text-linethrough {
    color: #D0D2D6;
}

.custom-file-label{
    overflow: hidden;
    font-size: 1rem;
}

.custom-switch.custom-switch.unchecked-slash .custom-control-input:not(:checked) ~ .custom-control-label {
    text-decoration: line-through;
}

/* for sm */
.custom-switch.custom-switch-sm{
    line-height: 1.6rem;
}

.custom-switch.custom-switch-sm .custom-control-label {
    padding-left: 2.4rem;
    padding-bottom: 0 !important;
    line-height: 1.6rem;
}

.custom-switch.custom-switch-sm .custom-control-label::before {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
    top: 0.3rem;
}

.custom-switch.custom-switch-sm .custom-control-label::after {
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    top: 6px !important;
    border-radius: calc(1rem - (1rem / 2));
}

.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1rem - 0.25rem - 3px));
}

/* for md */
.custom-switch.custom-switch-md{
    line-height: 1.3rem;
}

.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 3.3rem;
    line-height: 1.3rem;
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.3rem;
    width: calc(1.9rem + 0.75rem);
    border-radius: 3rem;
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.3rem - 6px);
    height: calc(1.3rem - 6px);
    top: 3px !important;
    border-radius: calc(2rem - (1.5rem / 2));
}

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.6rem - 0.25rem - 2px));
}

/* for lg */

.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem;
    padding-bottom: 2rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: calc(3rem - (2rem / 2));
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2rem - 0.25rem));
}

/* for xl */

.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
    width: calc(2.5rem - 4px);
    height: calc(2.5rem - 4px);
    border-radius: calc(4rem - (2.5rem / 2));
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2.5rem - 0.25rem));
}

.bounce-right{
    right: 2px;;
    animation: bounce-right 5s ease-out infinite;
}
.bounce-right::after{
    right: -0.3em;
    top: 25%;
    border-radius: 1px;
    position: absolute;
    background-color: var(--danger);
    content: "";
    height: 1em;
    vertical-align: middle;
    width: 1em;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@keyframes bounce-right{
    0%      {right: 2px; opacity: 1;}
    10%     {right: 10px;}
    15%     {opacity: 0.5; right: 2px;}
    25%     {right: 10px;}
    30%     {opacity: 1; right: 2px;}
    100%    {right: 2px;}
}

.lds-ring{
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px;
}
.lds-ring span{
    font-size:2em;
    font-weight:bold;
    color:#FFF;
    text-transform:uppercase;
    content:'';
}
.lds-ring span:before{
    content:'Aguarde';
    animation: texto-vivo 10s ease infinite;
}
.lds-ring .loaders{
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
}

.lds-ring .loaders div.principal{
    box-sizing: border-box;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    position: absolute;
    width: 150px;
    height: 150px;
    border: 8px solid #FFF;
    border-radius: 50%;
}
.lds-ring .loaders div.principal img{
    width: 100px;
}
.lds-ring .loaders div:not(.principal){
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    border: 8px solid #62BA46;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #62BA46 transparent transparent transparent;
}
.lds-ring .loaders div:nth-child(2){
    animation-delay: -0.55s;
}
.lds-ring .loaders div:nth-child(3){
    animation-delay: -0.45s;
}
.lds-ring .loaders div:nth-child(4){
    animation-delay: -0.3s;
}
.lds-ring .loaders div:nth-child(5){
    animation-delay: -0.15s;
}
@keyframes lds-ring{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes texto-vivo{
	0%{
		content: 'Aguarde';
		opacity:1;
	}
	5%{
		content: 'Aguarde.';
		opacity:1;
	}
	15%{
		content: 'Aguarde..';
		opacity:1;
	}
	25%{
		content: 'Aguarde...';
		opacity:1;
	}
    28%{
        content:'Aguarde...';
    }
	30%{
		opacity:0;
	}
	35%{
		content: 'Processando';
		opacity:1;
	}
	45%{
		content: 'Processando.';
		opacity:1;
	}
	55%{
		content: 'Processando..';
		opacity:1;
	}
	65%{
		content: 'Processando...';
		opacity:1;
	}
	92%{
		content: 'Processando...';
	}
	95%{
		opacity:0;
	}
}