@import url(../../font/iconsmind.css);

.nav.nav-tabs{
  --accent: #266197;              
  --accent-600: #1e517d;
  --text: #334155;               
  --text-strong:#0f172a;          
  --bg:#ffffff;
  --hover:#f3f6fb;               
  --ring: 0 0 0 3px rgba(38,97,151,.18);
}

.btn{
  --border: #b7b8bb;
}



body {
   
  font-family: Inter, trebuchet ms, Verdana, Arial, sans-serif;
  font-size: 12px;
}
html {
  position: relative;
  min-height: 100%;
  /*background: #ebeff2;*/

  background: #eef2f4
}
h1, h2, h3, h4, h5, h6 {

  margin: 10px 0;
  font-family: Inter, trebuchet ms, Verdana, Arial, sans-serif;
  font-weight: 400;
}
p {

  line-height: 1.6;
  margin-bottom: 10px;
}
a:hover, a:focus {
  text-decoration: none;
}
.font-large-2 {
  font-size: 4rem !important;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.col-md-55, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}
ul.bar_tabs {
  overflow: visible;
  /* background: #F5F7FA; 
    height: 70px;
  /*margin: 40px 0 14px;*/
  height: 50px;
  margin: 0px 0 14px;
  padding-left: 14px;
  position: relative;
  z-index: 1;
  width: 100%;
  border-bottom: 1px solid #E6E9ED;
}
.textarea_height{
  height: 50px !important;
}
/*Dropdown + top bar*/
.dropdown-bar{
  font-size: 15px;
}
.custom-dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 12px;
  color: #333;
  text-decoration: none;
}

.custom-dropdown-item i {
  font-size: 16px;
  color: #4ab59e; /* Ajuste para corresponder ao tema */
}

.custom-dropdown-item span {
  flex: 1; /* Para o texto ocupar o espaço restante */
  text-align: left; /* Alinhar o texto à esquerda */
}

.custom-dropdown-item:hover {
  background-color: #f1f1f1; /* Cor de fundo ao passar o mouse */
  color: #000;
}
.user-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #4ab59e;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
/*End*/
/*DataTable & Table Changes*/
table.display {
  margin: 0 auto;
  clear: both;
  width: 100%;
  cursor: pointer;
  border-left: 1px solid #ddd !important;
  border-top: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  border-bottom: 1px solid #ddd !important;
  margin-bottom: 20px !important;
}
table.display thead th {
  padding: 8px 18px 8px 10px;
  border-bottom: 1px solid #f7f7fa !important;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.85em;
  text-transform: uppercase;
}
table.dataTable.display tbody tr.odd{
  background-color: #fff !important;
}
table.dataTable.display tbody td{
  border-top: 1px solid #ddd !important;
}
table.dataTable.display tbody tr.odd>.sorting_1{
  background-color: #fff !important;
}
table.dataTable.display tbody tr.even>.sorting_1{
  background-color: #fff !important;
}
/*End*/
/*FullCalendar Changes*/
.fc-time-grid .fc-slats td {

  height: 2.6em !important;
}
.full-calendar {     
  padding: 0 0px !important;
}
.fc th {  
  text-transform: capitalize !important;
}
.fc-button-primary {
  background-color: #fff !important;
    border-radius: 1px !important;
    color: #000 !important;    
    border-radius: 4px !important;
    margin: 2px !important;
    border: 1px solid #f4f4f4 !important;
    font-weight: 600 !important;
    
}

/*End*/
.bulk-actions {
  display: none;
}

/* Footer */
.footer {
 
  bottom: 0;
  text-align: left !important;
  padding: 20px 30px;
  position: absolute;
  right: 0;
  left: 240px;
  font-size: 13px;
 
}

#wrapper {
  height: 100%;
  overflow: hidden;
  
  width: 100%;
}

body .container.body .right_col
{
  background: #ebeff2 !important;
}
body{
  background: #edf2f5 !important;
  }
/*footer{
  background: #ebeff2;
}*/

.fa-layoutmenu {
  font-size: 20px;
  height: 20px;
  width: 20px;
  display: block;
  margin: 0 auto 2px;
}

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #333333 !important;
  
}
h2 {
  font-size: 20px;
  font-weight: 300;
}
h4{
  font-size: 16px;
}
a {
  color: #333;
  text-decoration: none;
}
a, a:visited, a:focus, a:active, :visited, :focus, :active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
  outline: 0;
}
.page-title {
  width: 100%;
  height: 65px;
 /* padding: 10px 0;*/
}
.page-title .title_left {
  width: 45%;
  float: left;
  display: block;
}
.page-title .title_right {
  width: 55%;
  float: right;
  display: block;
}
.row {
  margin-right: -10px;
  margin-left: -10px;
}
.ln_solid {
  display: none;
}
.btn-filter {
  color: #0585F8 !important;
  background-color: #fff !important;
  border: 1px solid #5fbeaa !important;
}
.btn-info {
  color: #fff;
  background-color: #0585F8;
  border-color: #0585F8;
  
}
.btn-chart {
  height: 40px;
}
.btn {
  border-radius: 4px;
  margin-right: 1px;
  font-size: 12px;
 /*height: 40px;*/
}

.btn-closewo{

  background-color: #d3d3d3;
  border: 1px solid #d3d3d3;
}
.btn-datatables{
    border: 1px solid #cdcdcd;
    background-color: #fff;
    font-size: 11px;
    
}

label {
  color: #000 !important;
  font-weight: 600 !important;
}
.label-text {
  border-bottom: 1px solid #d4edda;
  margin-bottom: 15px;
  margin-top: 15px;
  
}
.form-control {  
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #6b6f80;
  background-color: #fff;
  background-clip: padding-box;
 /*border-bottom: 1px solid rgba(67, 87, 133, .2) !important; */ 
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border: 1px solid #d1d1d1;
  
 
}
.form-control.has-feedback-left {
  padding-left: 45px;
}
.form-horizontal .form-group {
  margin-right: 0;
  margin-left: 0;
}
.form-group {
  margin-bottom: 10px !important;
  margin-top: 10px !important;
}
#username {
  background-position: 10px 10px !important;
}
.form-control-feedback {
  margin-top: 6px;
  height: 23px;
  color: #0585f8;
  line-height: 24px;
  font-size: 15px;
}
.form-control-feedback.left {
  border-right: 1px solid #0585f8;
  left: 13px;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {  
  border: 1px solid #ccc;
  border-radius: 4px;
}
.x_wrraper {    
  position: relative;    
  width: 100%;    
  margin-bottom: 10px;    
  padding: 10px 17px;    
  display: inline-block;  
   background: #eef2f4;
     -webkit-column-break-inside: avoid;    
     -moz-column-break-inside: avoid;        
     opacity: 1;    
     transition: all .2s ease;
     	   
       border: solid 2px #ebeff2;    
       border-radius: 20px;	
      } 

.x_panel{		margin-top: 0;	}
.x_panel {    
  position: relative;    
  width: 100%;    
  margin-bottom: 10px;    
  padding: 10px 17px;    
  display: inline-block;    
  background: #fff;
   /*background: #eef2f4;*/
     -webkit-column-break-inside: avoid;    
     -moz-column-break-inside: avoid;        
     opacity: 1;    
     transition: all .2s ease;	
     	/*box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);           
       box-shadow: 0 0 0 0 rgba(90 113 208 / 11%), 0 4px 16px 0 rgba(167 175 183 / 33%);*/    
       border: solid 2px #ebeff2;    
       border-radius: 20px;	
      }      
      
.x_content {
        padding: 0 5px 6px;
        position: relative;
        width: 100%;
        float: left;
        clear: both;
       
        /* margin-top: 5px; */
    }
.x_title {
      border-bottom: 1px solid #E6E9ED;
      padding: 1px 5px 6px;
      margin-bottom: 20px;
  }
.x_title span {
      color: #333 !important;
  }
.dashboard_graph .x_title {
    padding: 5px 5px 7px;
}
.left {
    float: left;
}

.img-list {
  /* border-radius: 50%; */
  height: 25px;
  width: 25px;
  margin-left: 10px;
}
.product_gallery a {  
   width: 20vh;    
   float: left;    
   margin: 10px;   
  }
.product_gallery a img {    
  width: 100%;    
  margin-top: 15px
}
.card{	    
      margin-bottom: 1.875rem;
      border: none;    
      box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);	    
      position: relative;    
      display: flex;    
      flex-direction: column;    
      min-width: 0;    
      word-wrap: break-word;    
      background-color: #fff;    
      background-clip: border-box;    
      border: 1px solid rgba(0, 0, 0, 0.06);    
      border-radius: 0.27rem;    
      box-shadow: 0 0 0 0 rgb(90 113 208 / 11%), 0 4px 16px 0 rgb(167 175 183 / 33%);    
      border: solid 1px #dde4eb;    
      border-radius: 10px;
    }
  .card-body{	    
        flex: 1 1 auto;    
        padding: 1.5rem;
      }
  .status-card {
        cursor: pointer;
    }

    .select2-container--default .select2-selection--single{
      height: 34px !important;
    }
    .circle-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
  }
  
  .circle {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #007bff;
      color: white;
      font-size: 16px;
      font-weight: bold;
  }
  
  .circle-text {
      color: white;
  }
  .circle-total {
    font-size: 1.5em; /* Ajuste conforme necessário */
}

.login_content {
        background: #fff;
        margin: 0 auto;
        padding: 15px;
        position: relative;
        text-align: center;
        /*text-shadow: 0 1px 0 #fff;*/
        min-width: 280px;
        border-radius: 5px;
        width: 95%;
        margin-top: 2%;
        margin-bottom: 1%;
    }
.login_content form {
     margin: 70px 0;
      position: relative;
  }

.login_content form input[type="text"], .login_content form input[type="email"], .login_content form input[type="password"] {
    box-shadow: none;
    border: 1px solid #c8c8c8;
    color: #777;
    margin: 0 0 20px;
    width: 100%;
    text-align: center !important;
    padding: 1.2rem .75rem;
}
.login_content form div a {
  font-size: 12px;
  margin: 10px 15px 0 0;
}
.login_content a, .login_content .btn-default:hover {
  text-decoration: none;
}
.btn-login {
  width: 100%;
  color: #fff;
  background-color: #0585F8;
  border-color: #0585F8;
  padding: 15px;
}
.btn-login {
  text-shadow: none;
  font-weight: 700;
}
.dataTables_length {
        margin-right: 10px;
        margin-top: 13px;
        font-size: 14px;
        float: left;
    }

.info-number .badge {
      font-size: 10px;
      font-weight: normal;
      line-height: 13px;
      padding: 2px 6px;
      position: absolute;
      right: 2px;
      top: 8px;
  }

  .media {
    display: flex;
    align-items: flex-start;
}

.d-flex {
  display: flex !important;
}
.align-self-center {
  align-self: center !important;
}

.bg-red {
    background: #E74C3C !important;
    border: 1px solid #E74C3C !important;
    color: #fff;
    font-size: 10px;
}
.dtr-control-workorder thead {
  color:#000 !important;
}
.input-group {
  margin-bottom: 10px;
}

/*
Autor: 24Web - Francisco Cascão
Dexcription: Style added / Changes
*/

/*Side Bar*/
.title-sidebar{
    font-size: 24px;
    color: #0585F8;
    text-align: center;
    padding: 0px;
    /*font-family: Stencil Std, Arial, sans-serif;*/
    font-family: goldman;
    margin-top: 8px;
/*    text-transform: uppercase;*/
    font-weight: 400;
    font-size: 26px !important;

}
.title-sidebar-text{
    font-size: 8px;
    color: #0585F8;
    text-align: center;
    margin-top: -4px;
    font-family: goldman;
/*    text-transform: uppercase;*/
    font-weight: 300;
}
/*End Side Bar*/

/*Nav Menu - Header*/
.nav_menu{
    background-color: #0585F8;
    height: 62px;
}
/*End Nav Menu*/

/*Login Page*/
.img-login{
    height:auto;
    width: auto;
}
.btn-login{
    background-color: #0585F8;
}
/*End Login Page*/

/*Data Table */
table.jambo_table thead, table.table-striped thead, table.table-hover thead {
    /*background: #0585F8;
    color: #ECF0F1;*/
    font-size: 0.75em;
    text-transform: uppercase;
}

/*End*/

/*Tab in Pages */
ul.bar_tabs>li{
    margin-left: 0px;
}
/*End*/

/*Page Title Header*/
.page-title .title_right {
    /*width: 100% !important;*/
    margin-top:15px;
    margin-bottom: 15px;
    position: sticky; top: 8px; z-index: 20;
    display:flex; align-items:center; gap:1px; flex-wrap:wrap; justify-content:flex-end;
}
.required
{
    color:red !important;
   
}
.add-address-btn, .add-contact-btn{
    font-size: 11px;
    padding: 10px;
    margin: 10px;
}
.remove-address-btn, .remove-contact-btn{
    font-size: 11px;
    padding: 10px;
    margin: 10px;
}
.btn-default{
  color: #fff !important;
    /*background-color: #0585F8 !important;
    border-color: #0585F8 !important;*/ 
    /*background-color: #4ab59e !important;
    border: 1px solid #4ab59e !important;*/
    
    
}
.btn-default:hover {
    color: #fff;
    background-color: #0069d9 !important;
    border-color: #0062cc !important;
}
/*End*/
/*.ln_solid{
    display:none;
}*/

@media screen and (min-width: 600px) and (max-width: 1024px) {
  /* Hide the breadcrumbs on tablets */
  .breadcrumbs {
    margin-top:60px !important;
  }
  .top_nav .navbar-right{
      width: 95%;
  }
}

.add-address-btn, .add-contact-btn{
    margin-right: 10px !important;
}
.remove-address-btn, .remove-contact-btn{
   background-color: #d9534f !important;
    border-color: #d9534f !important; 
}

/*Daily Report*/
.daily-text{
    font-weight: bold !important;
    margin-right: 20px;
   
}

.daily-header{
    font-weight: 700 !important;
    color:#000;
    background-color: #f5f5f5;    
    margin: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.daily-btn{
    color:#000 !important;
    font-size: 16px;
        
}
.radio label {
  padding: 15px;
}

/*Modal */
.modal-header{
    background-color: #0585F8;
    color: #fff;
}

.notification-header{
    margin-top: -5px;
    font-weight: 600 !important;
    background-color: #0585F8 !important;
    color:#fff !important;
}

.right-bar {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
  
}
.dropdown-ht{
    overflow-y: auto;
    max-height: 450px;
}

.fieldBoder:focus{
border: 2px solid #0097cf;
}
.fc-content {
font-size: 9px !important;
}
.fc-event{
  font-size: 9px !important;
}

.dataTables_length select {
    /* Adicione estilos de largura, altura, cor de fundo, cor do texto, etc. conforme necessário */
    width: 80px;
    height: 30px;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

/* Estilo para os itens do dropdown */
.dataTables_length select option {
    /* Adicione estilos de cor de fundo, cor do texto, espaçamento, etc. conforme necessário */
    background-color: #fff;
    color: #333;
    padding: 5px;
}


  .nav_title{
    background: #0585F8;
    height: 64px; 
  }
  .title-sidebar{
    color:#fff;
    font-size:24px !important;
  }
  .title-sidebar-text{
    color:#fff;
  }
  .nav_menu{
    height:65px;
  }
  .breadcrumbs{
    border-radius: 5px !important; 
  }
  .x_panel{
    border-radius: 20px;
  }
  
  .dashboard_graph{
    border-radius: 5px;
  }
  .card{
    border-radius: 8px;
  }
  .login_content{
    /*border-radius: 20px;*/
  }
  .btn-default:hover {
    color: #fff;
    background-color: #148d75 !important;
    border-color: #148d75 !important;
}

  .nav.nav-tabs > li > a, .nav.tabs-vertical > li > a {
    background-color: transparent;
    border-radius: 0;
    border: none;
    color: #505461 !important;
    cursor: pointer;
    /*padding: 10px 15px;
    letter-spacing: 0.03em;*/
    font-weight: 500;
  }
  .nav-tabs > li.active > a{
    color: #fff !important;
    background-color: #0585f8 !important;
    border-radius: 5px; 
  }

  /* Oculta o texto em dispositivos menores que 768px */
@media (max-width: 767px) {
  .print-text {
    display: none;
  }

  .size-app{
    font-size: 16px;
  }
  .hidden-sm {
    display: none !important;
}
.login_content{
	width: 100% !important;
	border-radius: 0 !important;
	margin-top: 0 !important;
}
.container-fluid{
	padding-left:0 !important;
	padding-right:0 !important;
}
.col-xs-12{
	padding-left:1px !important;
	padding-right:1px !important;
}
.hide-mobile
{
  display: none;
}
.switch-group {
   
  max-width: 100% !important;
}
}

.x_title span{
  color:#333 !important;
}
.card-box{
  position: relative;
    padding: 20px;
    border: 1px solid rgba(54, 64, 74, 0.05);
    border-radius: 5px;
    margin-bottom: 20px;
    background-clip: padding-box;
    background-color: #ffffff;
}
.btn-listes{
  background-color: #34d3eb !important;
    border: 1px solid #34d3eb !important;
    color: #ffffff !important;
}
.dataTables_paginate a{
  background: #fff !important;
  border-color: #dee2e6 !important;
  border-radius: 0.25rem;
  margin-left: 5px;
}
.paginate_button.current{
  border-radius: 0.25rem !important;
  margin-left: 5px; 
  padding: 0.375rem 0.75rem;
  border-color: #dee2e6 !important;
  background-color: #0585F8 !important;    
}


/*changes*/
.topbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  background-color: #0585F8;
  height: 55px;
}
.icon-topbar{
  font-size: 18px;
}

.topbar .topbar-left {
  float: left;
  position: relative;
  width: 240px;
  z-index: 1;
  background-color: #0585F8;
}

.topbar .topbar-left-sm {
  width: 105px;
}

.topbar .topbar-left-sm + .navbar-custom {
  margin-left: 105px;
}


.logo {
  color: #ffffff !important;
  font-size: 20px;
  /*font-weight: 700;*/
  letter-spacing: .05em;
  line-height: 75px;
  /*text-transform: uppercase;*/
  font-family: "Bank Gothic", sans-serif;
}

.logo h1 {
  height: 50px;
  margin: 0 auto;
  text-align: center;
}

.logo i {
  color: #5fbeaa;
}

.logo .icon-c-logo {
  display: none;
}

.navbar-custom {
  /*background-color: #0585F8;*/
  border-radius: 0;
  margin-bottom: 0;
  padding: 0 10px 0 0;
  margin-left: 240px;
  min-height: 55px;
}

.navbar-custom .nav-link {
  padding: 0;
  line-height: 55px;
  color: #fff;
}

.navbar-custom .dropdown-toggle:after {
  content: initial;
}

/*.navbar-custom .menu-left {
  /*overflow: hidden;*/
}*/

.navbar-custom .nav > li > a {
  color: #ffffff !important;
  line-height: 60px;
  padding: 0 15px;
  position: relative;
}

.navbar-custom .nav > li > a i {
  font-size: 16px;
}

.profile img {
  border: 2px solid #edf0f0;
  height: 36px;
  width: 36px;
}

/* Notification */
.notification-list {
  margin-left: 0 !important;
}

.notification-list .noti-title {
  margin-bottom: 0;
  width: auto;
  padding: 12px 20px;
}

.notification-list .noti-title h5 {
  margin: 0;
}

.notification-list .noti-title .label {
  float: right;
}

.notification-list .noti-icon {
  font-size: 18px;
  padding: 0 12px;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.8);
}

.notification-list .noti-icon-badge {
  display: inline-block;
  position: absolute;
  top: 14px;
  right: 8px;
}

.notification-list .notify-item {
  padding: 10px 20px;
}

.notification-list .notify-item .notify-icon {
  float: left;
  height: 36px;
  width: 36px;
  line-height: 36px;
  text-align: center;
  margin-right: 10px;
  border-radius: 50%;
  color: #ffffff;
}

.notification-list .notify-item .notify-icon img {
  margin-top: 4px;
}

.notification-list .notify-item .notify-details {
  margin-bottom: 0;
  overflow: hidden;
  margin-left: 45px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-list .notify-item .notify-details b {
  font-weight: 500;
}

.notification-list .notify-item .notify-details small {
  display: block;
}

.notification-list .notify-item .notify-details span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.notification-list .notify-all {
  border-radius: 0 0 0.25rem 0.25rem;
  margin: 0 0 -5px 0;
  background-color: #eeeeee;
}

.notification-list .profile-dropdown .notify-item {
  padding: 4px 20px;
}

.profile-dropdown {
  width: 170px;
}

.profile-dropdown i {
  font-size: 17px;
  vertical-align: middle;
  margin-right: 5px;
}

.profile-dropdown span {
  vertical-align: middle;
}

.nav-user {
  padding: 0 12px !important;
}

.nav-user img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}

.navbar-nav {
  margin: 0;
}
/* Dropdown */
@-webkit-keyframes dropdownOpen {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes dropdownOpen {
  0% {
    opacity: 0;
    -moz-transform: scale(0);
  }
  100% {
    -moz-transform: scale(1);
  }
}

@-o-keyframes dropdownOpen {
  0% {
    opacity: 0;
    -o-transform: scale(0);
  }
  100% {
    -o-transform: scale(1);
  }
}
/* Dropdown */
.dropdown-menu {
  font-size: inherit;
}

.dropdown-menu > li > a {
  padding: 6px 20px;
}

.dropdown-item.active, .dropdown-item:active, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  background-color: #f2f2f2;
  color: inherit;
}

.dropup .dropdown-menu {
  box-shadow: 0px -1px 5px 0 rgba(0, 0, 0, 0.26);
}

.dropdown-lg {
  width: 260px;
}
.arrow-none:after {
  border: none;
  margin: 0;
  display: none;
}
/* Bootstrap select */
.bootstrap-select.show > .dropdown-menu > .dropdown-menu {
  display: block;
}

.bootstrap-select > .dropdown-menu > .dropdown-menu li.hidden {
  display: none;
}

.bootstrap-select > .dropdown-menu > .dropdown-menu li a {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: 400;
  color: #292b2c;
  text-align: inherit;
  white-space: nowrap;
  background: 0 0;
  border: 0;
}
.navbar-nav .open .dropdown-menu {
  background-color: #ffffff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  left: auto;
  position: absolute;
  right: 0;
}
.open > .dropdown-toggle.btn-primary.btn-custom,
.open > .dropdown-toggle.btn-success.btn-custom,
.open > .dropdown-toggle.btn-info.btn-custom,
.open > .dropdown-toggle.btn-warning.btn-custom,
.open > .dropdown-toggle.btn-danger.btn-custom,
.open > .dropdown-toggle.btn-default.btn-custom {
  border-width: 2px !important;
  color: #ffffff !important;
}

.open > .dropdown-toggle.btn-white.btn-custom {
  border-width: 2px !important;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.side-menu {
  bottom: 0;
  top: 0;
  width: 140px;
  z-index: 2;
}
.side-menu-sm {
  width: 100px;
  text-align: center;
}

.side-menu.left {
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 55px;
}
body.fixed-left .side-menu.left {
  bottom: 50px;
  height: 100%;
  margin-bottom: -70px;
  margin-top: 0;
  padding-bottom: 70px;
  position: fixed;
}
.content-page {
  margin-left: 240px;
  overflow: hidden;
}

.content-page > .content {
  margin-bottom: 60px;
  margin-top: 55px;
  padding: 20px 5px 15px 5px;
  min-height: 300px;
}
.button-menu-mobile {
  border: none;
  color: #ffffff;
  display: inline-block;
  height: 55px;
  width: 60px;
  background-color: #0585F8;
  font-size: 16px;
}
.side-menu-sm + .content-page {
  margin-left: 100px;
}
.sidebar-inner {
  height: 100%;
}
#sidebar-menu, #sidebar-menu ul, #sidebar-menu li, #sidebar-menu a {
  border: 0;
  font-weight: normal;
  line-height: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-decoration: none;
}

#sidebar-menu {
  padding-bottom: 30px;
  padding-top: 30px;
  width: 100%;
}

#sidebar-menu .nav > li > a .badge {
  position: absolute;
  right: 10px;
  top: 12px;
}

#sidebar-menu a {
  line-height: 1.3;
}

#sidebar-menu ul ul {
  display: none;
}

#sidebar-menu ul ul li {
  border-top: 0;
}

#sidebar-menu ul ul li.active a {
  color: #5fbeaa;
}

#sidebar-menu ul ul a {
  color: #75798B;
  display: block;
  padding: 10px 20px 10px 65px;
}

#sidebar-menu ul ul a:hover {
  color: #5fbeaa;
}

#sidebar-menu ul ul a i {
  margin-right: 5px;
}

#sidebar-menu ul ul ul a {
  padding-left: 80px;
}

#sidebar-menu .label {
  margin-top: 2px;
}

#sidebar-menu .subdrop {
  background: #f4f8fb !important;
  border-left: 2px solid #0585F8;
  color: #5fbeaa !important;
}

#sidebar-menu > ul > li > a {
  color: #47404f;
  display: block;
  padding: 12px 20px;
  margin: 4px 0;
  border-left: 3px solid #ffffff;
  font-size: 10px;
  font-weight: 600;
}

#sidebar-menu > ul > li > a:hover {
  color: #0585F8;
  text-decoration: none;
}

#sidebar-menu > ul > li > a > span {
  vertical-align: middle;
}

#sidebar-menu ul li .menu-arrow {
  -webkit-transition: -webkit-transform .15s;
  -o-transition: -o-transform .15s;
  transition: transform .15s;
  position: absolute;
  right: 20px;
  display: inline-block;
  font-family: 'Material Design Iconic Font';
  text-rendering: auto;
  line-height: 24px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  color: #98a6ad;
}

#sidebar-menu ul li .menu-arrow:before {
  content: "\f1b6";
}

#sidebar-menu ul li a.subdrop .menu-arrow {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

#sidebar-menu ul li a i {
  display: inline-block;
  font-size: 16px;
  line-height: 17px;
  margin-left: 3px;
  margin-right: 15px;
  text-align: center;
  vertical-align: middle;
  width: 20px;
}

#sidebar-menu ul li a i.md {
  font-size: 18px;
}

#sidebar-menu > ul > li > a > i.i-right {
  float: right;
  margin: 3px 0 0 0;
}

#sidebar-menu > ul > li > a.active {
  background: #f4f8fb !important;
  border-right: 0px solid #0585F8;
  color: #0585F8 !important;
}
.side-menu-sm #sidebar-menu > ul > li > a > i {
  display: block;
  font-size: 18px;
  line-height: 24px;
  width: 100%;
  margin: 0;
}

.side-menu-sm #sidebar-menu ul ul a {
  padding: 10px 20px 10px 20px;
}

.side-menu-sm + .content-page .footer {
  left: 140px;
}

#wrapper.enlarged .side-menu-sm {
  text-align: left;
}

#wrapper.enlarged .side-menu-sm #sidebar-menu ul li a i {
  display: inline-block;
  font-size: 18px;
  line-height: 17px;
  margin-left: 3px;
  margin-right: 15px;
  vertical-align: middle;
  width: 20px;
}
#wrapper.enlarged .navbar-custom {
  margin-left: 70px;
}

#wrapper.enlarged .menu-title, #wrapper.enlarged .menu-arrow {
  display: none !important;
}

#wrapper.enlarged #sidebar-menu ul ul {
  border: 2px solid #f4f8fb;
  margin-top: -5px;
  padding-top: 5px;
  z-index: 9999;
  background-color: #ffffff;
}

#wrapper.enlarged .left.side-menu {
  width: 70px;
  z-index: 5;
}

#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a {
  padding: 15px 20px;
  min-height: 52px;
}

#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:hover {
  background: #f4f8fb !important;
}

#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:active {
  background: #f4f8fb !important;
}

#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:focus {
  background: #f4f8fb !important;
}

#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a i {
  margin-right: 20px !important;
  font-size: 20px;
}

#wrapper.enlarged .left.side-menu .label {
  position: absolute;
  top: 5px;
  left: 35px;
  text-indent: 0;
  display: block !important;
  padding: .2em .6em .3em !important;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li {
  position: relative;
  white-space: nowrap;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a {
  position: relative;
  width: 260px;
  background: #f4f8fb;
  color: rgb(5, 133, 248);
  border-color: #5fbeaa;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul {
  display: block;
  left: 70px;
  position: absolute;
  width: 190px;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a {
  background: #ffffff;
  box-shadow: none;
  padding-left: 15px;
  position: relative;
  width: 186px;
  z-index: 6;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a:hover {
  color: #5fbeaa;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover a span {
  display: inline;
}

#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul {
  display: block;
  left: 70px;
  position: absolute;
  width: 190px;
}

#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a {
  background: #ffffff;
  box-shadow: none;
  padding-left: 15px;
  position: relative;
  width: 186px;
  z-index: 6;
}

#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a:hover {
  color: #5fbeaa;
}

#wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop {
  color: #5fbeaa !important;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li > ul {
  display: none;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul ul li:hover > ul {
  display: block;
  left: 190px;
  margin-top: -36px;
  position: absolute;
  width: 190px;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul ul li > a span.pull-right {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  position: absolute;
  right: 20px;
  top: 12px;
  transform: rotate(270deg);
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul ul li.active a {
  color: #5fbeaa;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li > a span {
  display: none;
  padding-left: 10px;
}

#wrapper.enlarged .left.side-menu .user-details {
  display: none;
}

#wrapper.enlarged .content-page {
  margin-left: 70px;
}

#wrapper.enlarged .footer {
  left: 70px;
}

#wrapper.enlarged .topbar .topbar-left {
  width: 70px !important;
}

#wrapper.enlarged .topbar .topbar-left .logo span {
  display: none;
  opacity: 0;
}

#wrapper.enlarged .topbar .topbar-left .logo .icon-c-logo {
  display: block;
  line-height: 70px;
}

#wrapper.enlarged #sidebar-menu > ul > li:hover > a.open :after {
  display: none;
}

#wrapper.enlarged #sidebar-menu > ul > li:hover > a.active :after {
  display: none;
}

#wrapper.enlarged .tips-box {
  display: none;
}
.badge {
  text-transform: uppercase;
  padding: 3px 5px;
  margin-top: 1px;
  display: inline-block;
  min-width: 10px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 10px;
  background-color: #5fbeaa;
}

/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 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;
  vertical-align: middle;
  z-index: 1;
  will-change: opacity, transform;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  -ms-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
  background-color: rgba(255, 255, 255, 0.45);
}

.waves-effect.waves-red .waves-ripple {
  background-color: rgba(244, 67, 54, 0.7);
}

.waves-effect.waves-yellow .waves-ripple {
  background-color: rgba(255, 235, 59, 0.7);
}

.waves-effect.waves-orange .waves-ripple {
  background-color: rgba(255, 152, 0, 0.7);
}

.waves-effect.waves-purple .waves-ripple {
  background-color: rgba(156, 39, 176, 0.7);
}

.waves-effect.waves-green .waves-ripple {
  background-color: rgba(76, 175, 80, 0.7);
}

.waves-effect.waves-teal .waves-ripple {
  background-color: rgba(0, 150, 136, 0.7);
}

.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  -webkit-mask-image: none;
}

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.waves-block {
  display: block;
}
.lista thead{
  background: #f6f6f7 !important;
    color: #333 !important;
    border-radius: 4px !important;
}

table.jambo_table thead {
  background: #ebeff2;
  color: #333;
}
.notify-text{
  font-size: 12px;
}


@media (min-width: 768px) and (max-width: 991px) {
  body {
    overflow-x: hidden;
  }
}
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  .app-search {
    display: none;
  }
  .left.side-menu, .sidebar-inner.slimscrollleft {
    overflow: auto !important;
  }
  .enlarged .left.side-menu {
    margin-left: -75px;
  }
  .content-page {
    margin-left: 0px !important;
  }
  .footer {
    left: 0px !important;
  }
  .mobile-sidebar {
    left: 0px;
  }
  .mobile-content {
    left: 250px;
    right: -250px;
  }
  .wrapper-page {
    width: 90%;
  }
  .wizard > .steps > ul > li {
    width: 100%;
  }
  .wizard > .content {
    padding: 0px !important;
  }
  .wizard > .content > .body {
    float: none;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0%;
  }
  .wizard.vertical > .steps {
    display: inline;
    float: none;
    width: 100%;
  }
  .wizard.vertical > .content {
    display: inline;
    float: none;
    margin: 0%;
    width: 100%;
  }
  .navbar-nav .open .dropdown-menu {
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    left: auto;
    position: absolute;
    right: 0;
  }
  .todo-send {
    margin-top: 10px;
    padding-left: 15px;
  }
  .chat-inputbar {
    padding-left: 15px;
  }
  .chat-send {
    margin-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .dataTables_wrapper .col-xs-6 {
    width: 100%;
    text-align: left;
  }
  .product-search {
    margin-bottom: 30px;
  }
  .top-menu-item-xs {
    display: inline-flex !important;
  }
  .dropdown-menu-lg {
    width: 240px !important;
  }
}
@media (max-width: 480px) {
  
  .button-menu-mobile {
    display: block;
  }
  .search-bar {
    display: none !important;
  }
  .ms-container {
    width: 100%;
  }
  #btn-fullscreen {
    display: none;
  }
  .fc-button-group{
    font-size: 10px !important;
  }
  .fc-toolbar h2{
    font-size: 10px !important;
  }
  .fc-today-button{
    display: none !important;
  }
  .fc-day-header{
    font-size: 10px !important;
  }
}
@media (max-width: 419px) {
  .topbar-left {
    width: 70px !important;
  }
  .logo .icon-c-logo {
    display: inline-block !important;
    line-height: 58px !important;
  }
  .logo span {
    display: none !important;
  }
  .content-page {
    margin-left: 70px;
  }
  .forced .side-menu.left {
    box-shadow: 0 12px 12px rgba(0, 0, 0, 0.1);
  }
  .enlarged .side-menu.left {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  }
  .conversation-list .conversation-text, .conversation-list .odd .conversation-text {
    width: 100% !important;
  }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  /* Hide the breadcrumbs on tablets */
  .breadcrumbs {
    margin-top:60px !important;
  }
  .top_nav .navbar-right{
      width: 95%;
  }
  .switch-group {
   
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .hide-phone {
    display: none !important;
  }

  .switch-group {
   
    max-width: 100%;
  }
}

.summernote-style{
  border: 1px solid #ccc; 
  border-radius: 5px;   
  background-color: #f5f5f5;
  padding: 10px;
  
}

.circle-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: pink;
  margin-right: 5px; /* Adjust as needed */
}

.circle-iconred {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  margin-right: 5px; /* Adjust as needed */
}

.circle-icongreen {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
  margin-right: 5px; /* Adjust as needed */
}

.circle-iconyellow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: yellow;
  margin-right: 5px; /* Adjust as needed */
}

.circle-iconblue {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: blue;
  margin-right: 5px; /* Adjust as needed */
}

/** Teste**/
  
.icon-with-tooltip {
  position: relative;
  display: inline-block;
  padding-left: 10px;
}

.icon-with-tooltip .fa-info {
  margin-left: 5px;
  cursor: pointer;
  position: relative;
  background-color: #c9c9c9; /* Circle color */
    color: #fff; /* Icon color */
    border-radius: 50%; /* Make it a circle */
    width: 12px; /* Set a fixed width */
    height: 12px; /* Set a fixed height */
    line-height: 12px; /* Center the icon vertically */
    text-align: center; /* Center the icon horizontally */
    font-size: 8px; /* Adjust font size as needed */
}

.tooltip-content {
  display: none;
    width: 200px; /* Set a fixed width for the tooltip */
    text-align: center; /* Center the text */
}

.icon-with-tooltip .fa-info:hover .tooltip-content {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 125%; /* Position the tooltip above the icon */
  transform: translateX(-50%);
  background-color: #ebeff2;
  color: #333;
  padding: 5px;
  border-radius: 5px;
  white-space: normal;
  font-size: 12px;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.3s;
}

.risk-text{
  background-color: #C00000; 
  color:#fff; 
  text-align: center; 
  padding:5px;
  margin: 5px;
}
.risk-border{
  border: 1px solid #cdcdcd; 
  text-align:center;
}

.risk-table{
  padding: 0px !important;
  margin-top: -9px;
}

.checkbox input[type=checkbox]{
  margin-top: 1px !important;
  height: 15px;
  width: 15px;
}

/* =============
   Portlets
============= */
.portlet {
  background: #ffffff;
  border: 1px solid rgba(67, 87, 133, .2);
  border-radius: 5px;
  margin-bottom: 20px;
  background-clip: padding-box;
}

.portlet .portlet-heading {
  border-radius: 3px 3px 0 0;
  color: #ffffff;
  padding: 12px 20px;
}

.portlet .portlet-heading .portlet-title {
  color: #ffffff;
  float: left;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 5px;
}

.portlet .portlet-heading .portlet-widgets {
  display: inline-block;
  float: right;
  font-size: 15px;
  line-height: 30px;
  padding-left: 15px;
  position: relative;
  text-align: right;
}

.portlet .portlet-heading .portlet-widgets .divider {
  margin: 0 5px;
}

.portlet .portlet-heading .portlet-widgets .collapsed .ion-minus-round:before {
  content: "\f217" !important;
}

.portlet .portlet-heading a {
  color: #999999;
}

.portlet .portlet-body {
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  background: #ffffff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 15px;
}

.portlet-default .portlet-title {
  color: #797979 !important;
}

.portlet .portlet-heading.bg-custom a, .portlet .portlet-heading.bg-purple a, .portlet .portlet-heading.bg-info a, .portlet .portlet-heading.bg-success a, .portlet .portlet-heading.bg-primary a, .portlet .portlet-heading.bg-danger a, .portlet .portlet-heading.bg-warning a, .portlet .portlet-heading.bg-inverse a, .portlet .portlet-heading.bg-pink a {
  color: #333;
}

.panel-disabled {
  background: rgba(243, 242, 241, 0.5);
  bottom: 15px;
  left: 0;
  position: absolute;
  right: -5px;
  top: 0;
}

.loader-1 {
  -moz-animation: loaderAnimate 1000ms linear infinite;
  -o-animation: loaderAnimate 1000ms linear infinite;
  -webkit-animation: loaderAnimate 1000ms linear infinite;
  animation: loaderAnimate 1000ms linear infinite;
  clip: rect(0, 30px, 30px, 15px);
  height: 30px;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
  position: absolute;
  top: 50%;
  width: 30px;
}

.loader-1:after {
  -moz-animation: loaderAnimate2 1000ms ease-in-out infinite;
  -o-animation: loaderAnimate2 1000ms ease-in-out infinite;
  -webkit-animation: loaderAnimate2 1000ms ease-in-out infinite;
  animation: loaderAnimate2 1000ms ease-in-out infinite;
  border-radius: 50%;
  clip: rect(0, 30px, 30px, 15px);
  content: '';
  height: 30px;
  position: absolute;
  width: 30px;
}
.collapse{display:none}.collapse.show{display:block}
/* =============
   END Portlets
============= */

/* =============
   Timeline
============= */
.cd-container {
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}

.cd-container::after {
  content: '';
  display: table;
  clear: both;
}

#cd-timeline {
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 2em 0;
  position: relative;
}

#cd-timeline::before {
  background: #d4d9df;
  content: '';
  height: 100%;
  left: 18px;
  position: absolute;
  top: 0;
  width: 4px;
}

@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-bottom: 3em;
    margin-top: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  margin: 2em 0;
  position: relative;
}

.cd-timeline-block:after {
  clear: both;
  content: "";
  display: table;
}

.cd-timeline-block:first-child {
  margin-top: 0;
}

.cd-timeline-block:last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: #fff;
}

.cd-timeline-img.cd-success {
  background: #81c868;
}

.cd-timeline-img.cd-info {
  background: #34d3eb;
}

.cd-timeline-img.cd-pink {
  background: #fb6d9d;
}

.cd-timeline-img.cd-danger {
  background: #f05050;
}

.cd-timeline-img.cd-primary {
  background: #5d9cec;
}

.cd-timeline-img.cd-warning {
  background: #ffbd4a;
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    line-height: 60px;
    left: 50%;
    margin-left: -30px;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

.cd-timeline-content {
  -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 5px;
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1);
  margin-left: 60px;
  padding: 1em;
  position: relative;
  border: 1px solid #d4d9df;
}

.cd-timeline-content img {
  display: block;
  width: 100%;
}

.cd-timeline-content:after {
  clear: both;
  content: "";
  display: table;
}

.cd-timeline-content h2 {
  margin-top: 0;
}

.cd-timeline-content p {
  color: #666666;
  font-size: 14px;
  margin: 10px 0 10px 0;
}

.cd-timeline-content .cd-read-more {
  background: #acb7c0;
  border-radius: 0.25em;
  color: white;
  display: inline-block;
  float: right;
  font-size: 14px;
  padding: .8em 1em;
}

.cd-timeline-content .cd-date {
  display: inline-block;
  font-size: 14px;
}

.cd-timeline-content h3 {
  font-size: 21px;
  margin: 0;
}

.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #bac4cb;
}

.cd-timeline-content .cd-date {
  float: left;
  padding: .8em 0;
  opacity: .7;
}

.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #d4d9df;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #d4d9df;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
  .cssanimations .cd-timeline-content.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-content.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2 0.6s;
    -moz-animation: cd-bounce-2 0.6s;
    animation: cd-bounce-2 0.6s;
  }
}

@media only screen and (min-width: 1170px) {
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
    -webkit-animation: cd-bounce-2-inverse 0.6s;
    -moz-animation: cd-bounce-2-inverse 0.6s;
    animation: cd-bounce-2-inverse 0.6s;
  }
}

/* Time line 2 */
.timeline-2 {
  border-left: 2px solid #98a6ad;
  position: relative;
}

.timeline-2 .time-item:after {
  background-color: #ffffff;
  border-color: #98a6ad;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  bottom: 0;
  content: '';
  height: 14px;
  left: 0;
  margin-left: -8px;
  position: absolute;
  top: 5px;
  width: 14px;
}

.time-item {
  border-color: #dee5e7;
  padding-bottom: 1px;
  position: relative;
}

.time-item:before {
  content: " ";
  display: table;
}

.time-item:after {
  background-color: #ffffff;
  border-color: #98a6ad;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  bottom: 0;
  content: '';
  height: 14px;
  left: 0;
  margin-left: -8px;
  position: absolute;
  top: 5px;
  width: 14px;
}

.time-item-item:after {
  content: " ";
  display: table;
}

.item-info {
  margin-bottom: 15px;
  margin-left: 15px;
}

.item-info p {
  margin-bottom: 10px !important;
}

/*============
End TimeLine
=============*/

/*============
Select2
=============*/

.select2-selection__choice{
  color: #fff !important;
  /*background: #4ab59e !important;*/
  background: #0ea5e9 !important;
  font-size: 14px !important;
  border-radius: 3px !important;
  /*border: 1px solid #4ab59e !important;*/
  border: 1px solid #0ea5e9 !important;
}
.select2-selection__choice__remove{
  color:#fff !important;
  font-weight: 200 !important;
}
.select2-selection--single{
  border: 1px solid #ced4da !important;
  /*border-top: none !important;
  border-left: none !important;*/
  border-radius: 4px !important;

}

.date-range {
  font-size: 0.65em; /* Adjust the size as needed */
  color: #666; /* Optional: change color to make it visually less prominent */
}

 /* Estilo base para o switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Tamanho reduzido */
  height: 24px; /* Tamanho reduzido */
  vertical-align: middle;
}

/* Ocultar o checkbox real */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Estilo base para o switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Tamanho reduzido */
  height: 24px; /* Tamanho reduzido */
  vertical-align: middle; /* Alinha verticalmente com o texto */
}

/* Ocultar o checkbox real */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Estilo do slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px; /* Ajustado para a nova altura */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px; /* Tamanho da fonte menor */
  color: white;
  user-select: none;
}

/* Pseudo-elemento para o botão do slider */
.slider:before {
  position: absolute;
  content: "";
  height: 16px; /* Reduzido */
  width: 16px;  /* Reduzido */
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Quando o checkbox está marcado */
.switch input:checked + .slider {
  background-color: #26a69a;
}

/* Quando o checkbox está marcado, mover o botão */
.switch input:checked + .slider:before {
  transform: translateX(26px); /* Ajustado para a nova largura */
}

/* Alterar o texto dentro do slider com base no estado */
.switch input:not(:checked) + .slider::after {
  content: "";
  position: absolute;
  right: 8px;
  font-size: 8px;
}

.switch input:checked + .slider::after {
  content: "";
  position: absolute;
  left: 8px;
  font-size: 8px;
}

/* Estilo opcional para labels */
.switch-label {
  margin-left: 10px;
  vertical-align: middle;
  font-size: 12px; /* Tamanho da fonte do label */
}

.switch input:disabled + .slider {
  background-color: #E0E0E0; /* Cinza claro para switches inativos */
  opacity: 0.7;
}

/* Estilo para switches desativados e ativos 
.switch input:disabled:checked + .slider {
  background-color: #A0C4FF; 
  opacity: 1;
}*/

/* Círculo do switch ativo desativado */
.switch input:disabled:checked + .slider:before {
  background-color: #007BFF; /* Azul escuro para o círculo */
  border: 2px solid #007BFF; /* Borda azul para destaque */
  opacity: 1;
}

/* Círculo do switch inativo */
.switch input:disabled + .slider:before {
  background-color: #B0B0B0; /* Cinza para círculo de switch inativo */
  opacity: 0.7;
}

.switch-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Estilo para cada grupo de switches */
.switch-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 33%;
}

.label-text {
  margin-bottom: 10px;
}

.switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
}



/* End Switch*/

/* Estilizar o grupo de opções */
.radio-group {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* Estilizar o radio button como um botão */
.radio-group input[type="radio"] {
  display: none; /* Esconder o radio button original */
}

/* Estilizar os labels */
.radio-group label {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Estilo ao selecionar o radio button */
.radio-group input[type="radio"]:checked + label {
  background-color: #28a745;
  color: #fff;
  border-color: #28a745;
}

/* Hover nos labels para dar efeito */
.radio-group label:hover {
  background-color: #ddd;
}
/* Estilo aprimorado para o rótulo "ASSOCIADO AO CLIENTE" */
.label-associated-client {
  background: linear-gradient(135deg, #4CAF50, #81C784); /* Gradiente de verde mais suave */
  color: #fff;
  border-radius: 25px;
  padding: 8px 20px;
  font-size: 9px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Sombra mais proeminente */
  display: inline-block;
  margin-left: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease; /* Animação para efeitos de hover */
  float: right;
  
}

/* Efeito de hover para o rótulo */
.label-associated-client:hover {
  background: linear-gradient(135deg, #66BB6A, #A5D6A7); /* Alteração de cor no hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Intensificar a sombra */
  transform: scale(1.05); /* Leve aumento no hover */
}

/* Estilo para o badge de stock */
.stock-badge {
  display: inline-block;
  padding: 5px 15px;
  font-size: 12px;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  min-width: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

/* Estilo para diferentes estados de estoque */
.in-stock {
  background-color: #4CAF50; /* Verde para indicar estoque suficiente */
}

.low-stock {
  background-color: #FF9800; /* Laranja para indicar estoque baixo */
}

.out-of-stock {
  background-color: #F44336; /* Vermelho para indicar fora de estoque */
}

/* Ajusta o alinhamento vertical com flexbox */
.d-flex {
  display: flex;
}

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


.work-order-type-container {
  display: flex;
  align-items: center;
  /*font-size: 12px;
  color: #333;*/
  font-weight: 600;
}

.color-box {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 5px;
  border-radius: 4px;
}

/*icon edit workrequestes*/
.position-relative {
    position: relative;
}

.edit-client-icon {
    position: absolute;
    right: 10px; /* ajuste a posição horizontal conforme necessário */
    color: #007bff; /* escolha uma cor que combine com o design */
    font-size: 1rem; /* tamanho pequeno */
    cursor: pointer;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
}

.edit-client-icon:hover {
    color: #0056b3; /* cor ao passar o mouse */
}


.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 4px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Posição acima do botão */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s ease;
  white-space: nowrap; /* Evita quebra de linha */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-5px); /* Animação de subida */
}

.tooltip-btn {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.dataTables_filter input {
  border-radius: 4px !important;
}


.select2-selection--multiple[aria-disabled="true"] {
  background-color: #fff; /* You can replace with any of the colors above */
    color: #999999; 
    border-bottom: 1px solid #ced4da !important; /* A light border to define the field */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    cursor:auto; /* Indicates that the field is not interactable */
    border-radius: 0px;
}

/* Estilo do sidebar */
.sidebarColumns {
  position: fixed;
  top: 0;
  right: -400px; /* Oculto fora da tela */
  width: 400px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 1050; /* Certifique-se de que esteja acima do conteúdo */
}

/* Cabeçalho do sidebar */
.sidebarColumns-header {
  padding: 15px;
  background-color: #007bff;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebarColumns-header h5 {
  margin: 0;
}

.close-sidebarColumns {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Corpo do sidebar */
.sidebarColumns-body {
  padding: 15px;
}

/* Rodapé do sidebar */
.sidebarColumns-footer {
  padding: 15px;
  text-align: right;
}

/* Exibir sidebar */
.sidebarColumns.show {
  right: 0;
}

a[onclick="markAllAsRead()"]:hover {
  transform: scale(1.1);
  background-color: #45a049;
}
#filter-alert {
  margin: 0 auto 15px auto;
  padding: 10px;
  background-color: #e7f3fe; /* Azul claro para destaque */
  border: 1px solid #b3d4fc; /* Azul mais escuro para o contorno */
  color: #31708f;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
  max-width: 350px; /* Define uma largura máxima */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve para destaque */
}

#filter-alert i {
  margin-right: 8px;
}

/*Changes to table*/

table.lista td.notes-column { 
  max-width: 300px !important; /* Define um limite máximo para a largura da coluna */
  overflow: visible !important;
  white-space: normal !important;
 
}

.search-container {
  position: relative;
  width: 300px;
  transition: width 0.3s ease;
  margin-top:6px;
}



.search-container:focus-within .clear-icon {
  display: block;
}

.search-container.cleared .search-input {
  width: 200px;
  transition: width 0.3s ease;
}

.search-container.cleared #searchResults {
  display: none;
}


.search-container:focus-within.cleared {
  width: 200px;
}

.search-input {
  width: 100%;
  padding: 10px 40px 10px 35px; 
  font-size: 14px;
  border: 0px solid #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #4ab59e; /* Destaque verde para foco */
  background-color: #f9f9f9;
}

.clear-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-size: 16px;
  cursor: pointer;
  display: none;
}

.search-container:focus-within .clear-icon {
  display: block;
}

#searchResults {
  position: absolute;
  top: calc(100% + 5px); /* Espaçamento abaixo do campo */
  left: 0%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 40px));
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: none;
  max-height: 420px;
  overflow-y: auto; 
  overflow-x: hidden; 
  animation: fadeIn 0.2s ease-in-out;
}

#searchResults .dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease, transform 0.1s ease;
  white-space: nowrap; /* Impede quebra de linha */
  overflow: hidden; /* Esconde texto que ultrapassar */
  text-overflow: ellipsis; /* Adiciona reticências ao texto longo */
}

#searchResults .dropdown-item:hover {
  background-color: #f0f8f5;
  transform: translateX(5px);
  cursor: pointer;
}

#searchResults h6 {
  margin: 10px 15px;
  font-size: 13px;
  color: #4ab59e;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  overflow: hidden; /* Remove scroll horizontal no título */
  text-overflow: ellipsis;
  white-space: nowrap;
}

#searchResults .icon {
  margin-right: 10px;
  font-size: 16px;
  color: #4ab59e;
}

/* Adiciona uma animação de fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-results-dropdown {
  border: 1px solid #ddd;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 

}

.tab-nav-search {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-nav-search li {
  padding: 10px 15px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  transition: background 0.2s, border-color 0.2s;
  font-size: 12px;
  cursor: pointer;
}

.tab-nav-search li.active {
  border-color: #ddd;
  border-radius: 4px 4px 0 0;
  background: #f9f9f9;
  font-weight: bold;
  font-size: 12px;
}

.tab-content-search {
  padding: 10px;
}

.tab-pane-search {
  display: none;
}

.tab-pane-search.active {
  display: block;
}

#searchResults .dropdown-item {
  white-space: normal;
  overflow-wrap: anywhere;
}

.tab-nav-search {
  flex-wrap: wrap;
}

.tab-nav-search li {
  flex: 1 1 25%;
  min-width: 120px;
  padding: 10px 8px;
  text-align: center;
  white-space: nowrap;
}

.global-search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.global-search-muted {
  color: #888;
  font-size: 12px;
  line-height: 1.35;
}

.global-search-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: #555;
}

.global-search-status {
  background-color: #d4edda;
  color: #155724;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

.global-search-status-block {
  display: inline-block;
  margin-top: 2px;
}

.global-search-nif {
  color: #155724;
  font-size: 12px;
}

#searchResults .serial-search-item {
  display: block;
}

.serial-main-link {
  color: #333;
  display: block;
  text-decoration: none;
}

.serial-main-link:hover {
  color: #333;
  text-decoration: none;
}

.serial-work-orders {
  margin-top: 8px;
}

.serial-work-order-link {
  display: block;
  margin-top: 4px;
  color: #0287f9;
  font-size: 12px;
  text-decoration: none;
}

.serial-work-order-link span {
  color: #777;
  display: block;
  margin-top: 2px;
}

html, body, * {
  scrollbar-width: thin; 
  scrollbar-color: #d4edda #f1f1f1; 
}

html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar {
  width: 8px; 
  height: 8px; 
}

html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 4px;
}

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb {
  background-color: #d4edda; 
  border-radius: 4px; 
  border: 2px solid #f1f1f1; 
}

html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover {
  background-color: #b2d8b6; 
}

html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, *::-webkit-scrollbar-corner {
  background-color: transparent; 
}

/*canvas {
  width: 100% !important;
  height: 300px !important;
}*/

#budgetsPerMonthChart, #budgetStatusChart, #work_order_types_chart, #work_order_statuses_chart, #work_order_month, #work_order_month_values{
  width: 100% !important;
  height: 280px !important;
}

.invalid-field {
    border: 1px solid red !important;
    background-color: #ffe6e6; /* Leve tom vermelho para destacar */
}

.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

table.dataTable tr.selected td.select-checkbox:after {
  content: none !important;
}
table.dataTable tbody tr.selected {
  background-color: transparent !important; 
  color: inherit !important; 
}


table.dataTable tbody tr.selected td {
  background-color: transparent !important;
}

.close{
  opacity: 1 !important;
  color: #fff !important;
}

.close-image{
  opacity: 1 !important;
  color: #000 !important;
  float: right;
    font-size: 19px;
    font-weight: 500;
    line-height: 1;   
    text-shadow: 0 1px 0 #fff;
}

.modal-backdrop {
   
    opacity: 0.85 !important;
}
/* Kanban */
.kanban-board {
  display: flex;
  gap: 20px; /* Espaço entre colunas */
  overflow-x: auto;
  padding: 10px;
}

.kanban-column {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  background: #f4f4f4;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.kanban-items {
  max-height: 570px; /* Define uma altura máxima */
  overflow-y: auto; /* Ativa o scroll vertical quando há muitos registros */
  padding: 5px;
}

/* Cada item do Kanban será um card separado */
.kanban-item {
  background: white;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

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

.kanban-item .budget-price {
  background-color: #4AB59E; /* Fundo verde */
  color: white; /* Texto branco */
  font-weight: bold;
  
  border-radius: 4px; /* Bordas arredondadas */
  border: 4px solid #4AB59E; /* Borda de 4px */
  display: inline-block; /* Para manter o layout correto */
  margin-left: 5px; /* Pequeno espaçamento entre o número e o preço */
  font-size: 10px
}

.contact-highlight {
    background-color: #f4a261; /* Laranja suave */
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
    opacity: 0.7;
}

/*END*/

.custom-error {
  background: #380202 !important; /* Vermelho mais vibrante */
  color: white !important;
  border-left: 5px solid #cc0000 !important;
}

/*Planning TimeLine*/
.slot-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.slot {
  font-size: 12px;
  background: #f8f9fa;
  padding: 2px;
  text-align: center;
  border: 1px solid #ddd;
  cursor: pointer;
}

.slot:hover {
  background: #e0e0e0;
}

.technician-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.technician-initials {
    width: 40px;
    height: 40px;
    background-color: #17a2b8;
    color: white;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 5px;
}

.technician-name {
    font-size: 14px;
    color: #333;
    text-align: center;
}

.event-container {
  position: relative;
  min-height: 40px;
}

.kanban-column h4 {
  cursor: move;
}

table.dataTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  font-size: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


/* Corpo da tabela */
table.dataTable tbody td {
  padding: 16px;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
  color: #444;
}

/* Botões abaixo da tabela */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: #f2f4f8;
  border: none;
  margin: 0 3px;
  padding: 8px 14px;
  border-radius: 8px;
  color: #555;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #4ab59e;
  color: white !important;
  font-weight: bold;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #3ca48d;
  color: #fff !important;
}

/* Input de pesquisa */
.dataTables_filter input {
  border: 1px solid #ddd;
  border-radius: 18px !important;
  padding: 6px 12px;
  font-size: 12px;
  font-style: italic;
  width:300px;
}

/* Select de registros */
.dataTables_length select {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 5px;
}

.btn-toggle{
  border: 1px solid #cdcdcd;
    background-color: #fff;
}

.kanban-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.kanban-summary-card {
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  min-width: 200px;
  max-width: 240px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.kanban-summary-card .title {
  font-size: 15px;
  margin-top: 5px;
  font-weight: 500;
}

.kanban-summary-card .value {
  font-size: 26px;
  font-weight: bold;
  margin-top: 5px;
}

.kanban-summary-card .subvalue {
  font-size: 13px;
  margin-top: 3px;
  font-weight: 400;
  opacity: 0.9;
}

/* Cores */
.bg-won {
  background-color: #28a745;
}

.bg-lost {
  background-color: #dc3545;
}

.bg-conversion {
  background-color: #007bff;
}

.accordion-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2%;
        }

        .accordion-section {
            border: 1px solid #ddd;
            border-radius: 6px;
            margin-bottom: 20px;
            background: #fff;
            flex: 0 0 48%;
        }

        @media (max-width: 768px) {
            .accordion-section {
                flex: 0 0 100%;
            }
        }

        .accordion-header {
            background-color: #f7f7f7;
            padding: 12px 20px;
            font-weight: bold;
            font-size: 16px;
            color: #2c3e50;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .accordion-header:hover {
            background-color: #ececec;
        }

        .accordion-body {
            display: none;
            padding: 15px 20px;
            background-color: #fff;
        }

        .accordion-section.active .accordion-body {
            display: block;
        }

        .btn-permission {
            font-size: 13px;
            padding: 4px 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .permission-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .permission-table th, .permission-table td {
            padding: 10px;
            text-align: center;
        }

        .permission-table th {
            background-color: #f5f5f5;
            font-weight: bold;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch .slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0;
            right: 0; bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        .switch input:checked + .slider {
            background-color: #26a69a;
        }

        .switch input:checked + .slider:before {
            transform: translateX(26px);
        }

        .counter-badge {
            background: #3498db;
            color: #fff;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 8px;
        }

        .counter-label {
            font-size: 11px;
            color: #555;
            margin-left: 6px;
        }
        .extra-perms-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }
      
      .extra-perm-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #f9f9f9;
          border-radius: 6px;
          padding: 8px 12px;
          border: 1px solid #e0e0e0;
          font-size: 14px;
      }

      .employee-summary-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .employee-card {
        flex: 0 1 200px;
        background: #ffffff;
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease;
        border: 1px solid #f0f0f0;
    }
    
    
    .employee-name {
        font-size: 1.2rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 0.4rem;
        text-align: center;
    }
    
    .employee-time {
        background: #4ab59e;
        color: white;
        font-weight: 600;
        padding: 0.4rem 1rem;
        border-radius: 999px;
        font-size: 1.2rem;
        display: inline-block;
    }
    
    .total-summary-card {
        flex: 0 1 200px;
        background: #2b7bff;
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 8px 20px rgba(43, 123, 255, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        transition: transform 0.3s ease;
    }
    
    .total-summary-card:hover {
        transform: translateY(-4px);
    }

    /*** Loader - Processing overlay **/
#centered-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  background: rgba(246, 249, 252, 0.68);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}

#centered-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.loader-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(92vw, 440px);
  min-height: 106px;
  padding: 22px 24px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.94));
  border: 1px solid rgba(38, 97, 151, 0.14);
  box-shadow: 0 22px 55px rgba(18, 47, 76, 0.18), 0 2px 10px rgba(38, 97, 151, 0.08);
}

.loader-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 18%, rgba(38, 97, 151, 0.12), transparent 34%);
}

.loader-orb {
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.loader-orb-core,
.loader-orb-ring,
.loader-orb-dot {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.loader-orb-core {
  inset: 18px;
  background: linear-gradient(135deg, #2b7bff, #39c2ff);
  box-shadow: 0 0 22px rgba(43, 123, 255, 0.48);
  animation: loader-core-pulse 1.6s ease-in-out infinite;
}

.loader-orb-ring {
  inset: 3px;
  border: 1px solid rgba(43, 123, 255, 0.22);
  box-shadow: inset 0 0 18px rgba(57, 194, 255, 0.11);
}

.loader-orb-ring-one {
  animation: loader-ring-pulse 1.8s ease-out infinite;
}

.loader-orb-ring-two {
  inset: 10px;
  border-color: rgba(38, 97, 151, 0.2);
  animation: loader-ring-pulse 1.8s ease-out infinite 0.35s;
}

.loader-orb-dot {
  width: 7px;
  height: 7px;
  background: #2b7bff;
  box-shadow: 0 0 12px rgba(43, 123, 255, 0.5);
}

.loader-orb-dot-one {
  top: 5px;
  left: 25px;
  transform-origin: 4px 24px;
  animation: loader-orbit 1.5s linear infinite;
}

.loader-orb-dot-two {
  right: 7px;
  bottom: 12px;
  width: 5px;
  height: 5px;
  background: #39c2ff;
  transform-origin: -16px -12px;
  animation: loader-orbit 1.9s linear infinite reverse;
}

.loader-text {
  position: relative;
  min-width: 0;
  line-height: 1.25;
}

.loader-title {
  font-size: 16px;
  font-weight: 700;
  color: #12202d;
  letter-spacing: 0;
}

.loader-subtitle {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(18, 32, 45, 0.68);
}

@keyframes loader-core-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.86; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes loader-ring-pulse {
  0% { transform: scale(0.86); opacity: 0.28; }
  55% { opacity: 0.72; }
  100% { transform: scale(1.08); opacity: 0.18; }
}

@keyframes loader-orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .loader-card {
    gap: 14px;
    min-height: 96px;
    padding: 18px;
    border-radius: 16px;
  }

  .loader-orb {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .loader-orb-core {
    inset: 15px;
  }

  .loader-orb-dot-one {
    top: 4px;
    left: 21px;
    transform-origin: 3px 20px;
  }

  .loader-title {
    font-size: 15px;
  }

  .loader-subtitle {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #centered-loader,
  #centered-loader.hidden {
    transition: none;
  }

  .loader-orb-core,
  .loader-orb-ring-one,
  .loader-orb-ring-two,
  .loader-orb-dot-one,
  .loader-orb-dot-two {
    animation: none;
  }
}

    
   /* --- Modern DataTable Look & Feel --- */

/* Table wrapper: light background, card style */


/* Table */
table.dataTable {
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
    font-size: 1.05rem;
}

table.dataTable thead th {
    background: #f4f8fb;
    color: #24416B;
    border-bottom: 2px solid #e8eef4;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 0.02em;
    padding-top: 12px;
    padding-bottom: 12px;
}

table.dataTable tbody td {
    background: #fff;
    /*border-bottom: 1px solid #eef2f7;*/
    color: #333;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.1em;
}

table.dataTable tbody tr {
    transition: background 0.18s;
}
table.dataTable tbody tr:hover {
    background: #f0f7ff !important;
    box-shadow: 0 1px 8px rgba(38, 97, 151, 0.09);
}

table.dataTable thead th, table.dataTable tfoot th {
    border-top: none;
}

/* Action buttons cell */
table.dataTable td .btn, 
table.dataTable td .dt-action {
    border-radius: 8px;
    background: #f4f8fb;
    border: none;
    color: #266197;
    padding: 6px 10px;
    margin-left: 3px;
    margin-right: 3px;
    transition: background 0.15s, color 0.15s;
   
}

table.dataTable td .btn:hover, 
table.dataTable td .dt-action:hover {
    background: #266197;
    color: #fff;
}

/* SVG icons inside buttons */
table.dataTable td .btn svg, 
table.dataTable td .dt-action svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-bottom: 2px;
}

@media (max-width: 900px) {
    /* Smaller font and padding for tablets/small laptops */
    table.dataTable, table.dataTable thead th, table.dataTable tbody td {
        font-size: 0.97rem;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .dataTables_wrapper {
        padding: 12px 6px 6px 6px;
    }
}

/* --- DataTables Controls: search, length, pagination --- */
.dataTables_filter {
    margin-bottom: 20px;
    float: right;
}
.dataTables_filter input {
    border-radius: 8px;
    padding: 7px 14px;
    border: 1px solid #e4ecfa;
    background: #f4f8fb;
    font-size: 1rem;
    transition: border 0.2s;
}
.dataTables_filter input:focus {
    outline: none;
    border: 1.5px solid #266197;
    background: #fff;
}

.dataTables_length label {
    font-weight: 500;
    color: #24416B;
}
.dataTables_length select {
    border-radius: 6px;
    padding: 5px 10px;
    background: #f4f8fb;
    border: 1px solid #e4ecfa;
    font-size: 1rem;
}

/* --- Pagination Modern --- */
.dataTables_paginate {
    margin-top: 18px !important;
    float: right !important;
}

.dataTables_paginate .paginate_button {
    border-radius: 8px;
    border: none !important;
    margin: 0 3px !important;
    background: #f4f8fb !important;
    color: #266197 !important;
    font-weight: 600;
    transition: background 0.14s, color 0.14s;
    padding: 6px 12px !important;
}
.dataTables_paginate .paginate_button.current, 
.dataTables_paginate .paginate_button:hover {
    background: #266197 !important;
    color: #fff !important;
}

/* --- Responsive: Mobile --- */
@media (max-width: 650px) {
    table.dataTable,
    table.dataTable thead,
    table.dataTable tbody,
    table.dataTable th,
    table.dataTable td,
    table.dataTable tr {
        display: block;
        width: 100%;
    }

    table.dataTable thead {
        display: none;
    }

    table.dataTable tbody tr {
        box-shadow: 0 1.5px 8px rgba(31, 61, 104, 0.09);
        margin-bottom: 14px;
        background: #fff;
        border-radius: 14px;
        border: 1px solid #eef2f7;
        padding: 12px 10px;
    }

    table.dataTable td {
        border: none;
        position: relative;
        padding-left: 46%;
        min-height: 32px;
        font-size: 1rem;
        text-align: left;
        background: none;
    }

    table.dataTable td:before {
        /* Add your own header names here */
        content: attr(data-label);
        position: absolute;
        left: 8px;
        top: 8px;
        width: 40%;
        white-space: nowrap;
        font-weight: 700;
        color: #888;
        font-size: 0.96em;
    }
}


/* Timeline Vertical Moderna */
.timeline {
  margin: 32px 0 12px 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 670px;
  /* centraliza a timeline */
  margin-left: auto;
  margin-right: auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 38px; /* de 34px para 38px, acompanha o padding da modal */
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #e4ecfa 60%, #a3c0e5 100%);
  border-radius: 4px;
  z-index: 0;
}

.timeline li {
  display: flex;
  align-items: flex-start;
  position: relative;
  min-height: 62px;
}

.timeline-dot {
  flex: 0 0 42px; /* acompanha o novo left */
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: transparent;
  position: relative;
}

.timeline-dot span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #4ec7b9;
  transition: border-color 0.18s, background 0.18s;
  box-shadow: 0 1px 6px rgba(38,97,151,0.11);
}

.timeline li.active .timeline-dot span {
  border-color: #e98b17;
  background: #e98b17;
}

.timeline-content {
  background: #f8fafc;
  border-radius: 13px;
  box-shadow: 0 1px 8px rgba(38,97,151,0.04);
  margin-bottom: 16px;
  padding: 16px 24px 12px 24px;
  margin-left: 12px;
  min-width: 230px;
  min-height: 45px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeline-content h5,
.timeline-content .timeline-date {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #266197;
  line-height: 1.15;
}

.timeline-content dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
}

.timeline-content dt {
  font-weight: 600;
  color: #444;
  min-width: 110px;
}

.timeline-content dd {
  margin: 0 0 0 0;
  color: #184c80;
  font-weight: 500;
}

/* Última linha (remove margin) */
.timeline li:last-child .timeline-content {
  margin-bottom: 0;
}

/* Responsivo */
@media (max-width: 850px) {
  .timeline {
    max-width: 100%;
  }
  .timeline-content {
    padding: 10px 10px 8px 14px;
    min-width: 180px;
  }
  .timeline-dot {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .timeline-dot span {
    width: 13px;
    height: 13px;
    border-width: 3px;
  }
}

@media (max-width: 570px) {
  .timeline {
    padding-left: 0;
  }
  .timeline-content {
    padding: 7px 5px 7px 9px;
    min-width: 110px;
    font-size: 0.97em;
  }
  .timeline-dot {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .timeline-dot span {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }
}

.timeline-content dl {
    display: block;
}
.timeline-content dt, .timeline-content dd {
    display: block;
    float: none;
    margin: 0 0 3px 0;
}

.progress {
    background-color: #f4f8fb;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}
.progress-bar {
    width: 100%;
    height: 5px;
    background-color: #0585f8;
    animation: progress-anim 1s linear infinite alternate;
}
@keyframes progress-anim {
    0% { opacity: 0.5;}
    100% { opacity: 1;}
}

.fixed-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(38,97,151,0.06);
    border-top: 1px solid #e9ecef;
    padding: 12px 0 12px 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.fixed-action-bar .btn {
    min-width: 120px;
}
@media (max-width: 768px) {
    .fixed-action-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

/*Kanban*/
.kanban-summary-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 220px;
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    flex: 1 1 220px;
    max-width: 300px;
}

.kanban-summary-box .left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.kanban-summary-box .left i {
    font-size: 20px;
}

.kanban-summary-box .right {
    text-align: right;
}

.kanban-summary-box .right div {
    font-size: 20px;
    font-weight: bold;
}

.kanban-summary-box .right small {
    font-size: 13px;
    opacity: 0.9;
}

/* Cores */
.bg-won {
    background-color: #28a745;
}
.bg-lost {
    background-color: #dc3545;
}
.bg-conversion {
    background-color: #007bff;
}

.kanban-filter-bar {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(38,97,151,0.07);
    padding: 18px 28px 18px 28px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.kanban-filter-bar label {
    margin-right: 8px;
    font-weight: 500;
    color: #266197;
}

.kanban-filter-bar select,
.kanban-filter-bar input[type="month"] {
    min-width: 150px;
    border-radius: 5px;
    border: 1px solid #e4ecfa;
    background: #f8fafc;
    font-size: 1em;
    padding: 7px 11px;
    margin-right: 10px;
    transition: border-color 0.2s;
}

.kanban-filter-bar button[type="submit"] {
    border-radius: 5px;
    padding: 7px 22px;
    background: #37bb9b;
    color: #fff;
    font-weight: bold;
    border: none;
    transition: background 0.2s;
    box-shadow: 0 1px 6px rgba(38,97,151,0.10);
}
.kanban-filter-bar button[type="submit"]:hover {
    background: #266197;
}
.bootstrap-tagsinput {
    width: 100% !important;
}
.bootstrap-tagsinput .tag {
  font-size: 1.04em ;
}
.tagsinput-email {
    background: #f5f8fa;
    border-radius: 30px;
    padding: 0.6em 1.2em;
    min-height: 46px;
    font-size: 1.98em;
    border: 1px solid #e3e6ed;
    transition: border .2s;
}
.tagsinput .tag {
    background-color: #266197;
    color: #fff;
    border-radius: 2em;
    padding: 0.35em 0.95em;
    margin-right: 0.25em;
    font-weight: 600;
    font-size: 1.95em !important;
}
.tagsinput .tag .tag-remove {
    color: #fff;
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}
.tagsinput .tag .tag-remove:hover {
    color: #E98B17;
}
.modal-content {
    border-radius: 18px !important;
}
.bootstrap-tagsinput, .tagsinput-email {
    position: relative !important;
    z-index: 1;
}

.tt-menu {
    z-index: 99999 !important;
    position: relative !important;
    min-width: 450px;
    background: #fff !important;
    color: #222 !important;
    border-radius: 8px;
    border: 1px solid #e3e6ed;
    box-shadow: 0 8px 24px #0002;
    padding: 10px;
    font-size: 14px;
}

/* Offcanvas manual para Bootstrap 3 */
body.offcanvas-open {
    overflow: hidden;
}
.offcanvas {
    position: fixed;
    top: 0;
    right: -1100px;
    width: 1100px;         /* ou o tamanho que quiseres */
    max-width: 98vw;
    height: 100%;
    z-index: 1050;
    background: #fff;
    box-shadow: -3px 0 20px #00000020;
    transition: right 0.3s;
    overflow-y: auto;
    display: block; /* garante que aparece */
}
.offcanvas.show {
    right: 0;
}
.offcanvas-header {
    padding: 18px 24px 10px 24px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.offcanvas-title {
    font-size: 19px;
    font-weight: 500;
    margin: 0;
}
.offcanvas .close {
    font-size: 32px;
    font-weight: normal;
    border: none;
    background: none;
    opacity: .5;
    color:#333 !important;
}
.offcanvas .close:hover {
    opacity: 1;
}
.offcanvas-body {
    padding: 24px;
}
@media (max-width: 500px) {
    .offcanvas { width: 100vw; }
}

/* Timeline moderna vertical */
.timelineManu {
    position: relative;
    margin: 32px 0 24px 22px;
    padding-left: 35px;
    list-style: none;
    border-left: 2px solid #e3eaf3;
    min-width: 350px;
    max-width: 600px;
}
.timelineManu li {
    position: relative;
    margin-bottom: 38px;
    padding-left: 18px;
    min-height: 42px;
}

.timelineManu li:last-child {
    margin-bottom: 0;
}

/* Dot do evento */
.timelineManu li::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 4px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 4px solid #3399ff;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 6px #0001;
    transition: border 0.2s;
}

/* Card do evento */
.timelineManu li {
    background: #fafbfc;
    border-radius: 7px;
    padding: 10px 18px 10px 14px;
    box-shadow: 0 2px 8px #e7e7e7;
    border: 1px solid #e8e8e8;
    transition: box-shadow 0.2s;
}
.timelineManu li:hover {
    box-shadow: 0 4px 16px #3399ff25;
    border-color: #b3daff;
}

.timelineManu li strong {
    font-size: 1.06em;
    color: #254f7a;
    font-weight: 600;
}
.timelineManu li small {
    color: #7e8c9a;
    font-size: 0.96em;
    display: block;
    margin-top: 4px;
}
.timelineManu .badge-info {
    background: #6ed8c2;
    color: #fff;
    font-weight: 500;
    border-radius: 12px;
    font-size: 0.92em;
    padding: 4px 12px;
    letter-spacing: 0.5px;
    margin-left: 10px;
}
.timelineManu .badge-info:not(:last-child) {
    margin-right: 7px;
}

.custom-fields-card {
    background: #f8fafc;
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(38, 97, 151, 0.08);
    padding: 22px 30px 18px 30px;
    margin-top: 22px;
}
.custom-fields-header {
    font-weight: 600;
    font-size: 1.1em;
    color: #266197;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}
.custom-value {
    background: #fff;
    border-radius: 6px;
    padding: 7px 12px;
    min-height: 36px;
    font-weight: 500;
    color: #143d5c;
    border: 1px solid #e6ecf5;
    box-shadow: 0 1px 4px #e6ecf5;
}

.event {
    cursor: pointer !important; 
}

.remove-absence-btn {
    position: absolute;
    top: -9px;
    right: 6px;
    font-size: 23px;
    font-weight: 700;
    color: #000 !important;
    cursor: pointer;
    z-index: 99;
    display: none;
}
.fc-event:hover .remove-absence-btn {
    display: inline;
}

.fc-event.absence-event, 
.fc-event-main.absence-event {   
     border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(34, 34, 34, 0.07);
  /*background: linear-gradient(90deg, #ffb347 85%, #fff7e6 100%); /* exemplo para Férias */
  color: #222;
  font-weight: 500;
  font-size: 1em;
  opacity: 0.95;
  padding: 4px 8px;
  transition: box-shadow 0.15s, opacity 0.15s;
}
.fc-event.absence-event::before, 
.fc-event-main.absence-event::before {   
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.7;
}
td.description-col {
    max-width: 250px;       /* ou o tamanho que quiser */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-widget-header{
     border-style: none !important;
    border:0px !important;
    color: #525c69 !important;
    margin-bottom: 10px;
    font-size: 16px;
}
.fc-timeGridDay .fc-day.fc-today,
.fc-timeGridWeek .fc-day.fc-today,
.fc-dayGridMonth .fc-day.fc-today {
    background-color: #eaf8fc !important;
}
.fc .fc-timegrid-col.fc-day-today {
    background-color: #eaf8fc !important;
}
fc-event.fc-event-past::before {
    
    background-color: inherit; /* herda a cor original do evento */
    opacity: 0.8; /* torna o fundo opaco */
    z-index: -1; /* garante que o fundo fique atrás do texto */
   
}

/* Garante que o evento permite posicionamento relativo */

.fc-time-grid .fc-slats .fc-minor td {
    border-top-style: dashed !important;
   
}

.fc-event.event-past {
    opacity: 0.75 !important; /* Deixa o evento mais transparente */
}


.tippy-box[data-theme~='light'] {
    border: 1px solid #ccc;
    font-size: 13px;
    padding: 8px;
    border-radius: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #ffffff !important;          /* cor do texto branco */
    background-color: #e74c3c;           /* vermelho visível */
    border-radius: 50%;                  /* botão redondo */
    font-weight: bold;                   /* texto mais visível */
    padding: 2px 6px;                    /* aumenta tamanho do botão */
    margin-right: 8px;
    margin-top: 5px;                   /* espaço da borda */
    font-size: 14px;                     /* aumenta o tamanho da cruz */
    line-height: 1.2;
    cursor: pointer;
}
.full-calendar {
  margin-bottom: 40px !important;
}

.fc-view-container{
  background-color: #f5fafc !important;
  padding: 20px;
  border-radius: 10px;
  border: 2px #f5fafc solid;
  
}


.fc-today{
  background-color: #0587f811 !important; 

}
.fc-event{
  border-radius: 7px !important;
  padding: 2px !important;
}
.fc-timeGrid-view .fc-day-grid{
  background-color: #f2f3f3 !important;
  
}

.wo-history-toggle{
  position: fixed;
  right: 22px;
  bottom: 52px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: #266197; /* brand blue */
  color:#fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 1050;
}
.wo-history-toggle:hover{ filter: brightness(1.05); }

/* Drawer container */
.wo-history-sidebar{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 420px;
  max-width: 92vw;
  background: #fff;
  box-shadow: -8px 0 24px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .26s ease;
  z-index: 1049;
  display: flex; flex-direction: column;
}

/* Open state */
.wo-history-sidebar.is-open{ transform: translateX(0); }

/* Header */
.wo-history-header{
  position: sticky; top: 0;
  background: #f7f9fc;
  border-bottom: 1px solid #e9edf3;
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.wo-history-title{ display:flex; gap:8px; align-items:center; font-weight:600; }
.wo-history-title i{ color:#266197; }

/* Tools */
.wo-history-tools{ padding: 10px 14px; border-bottom:1px solid #f0f2f7; }
.wo-history-filters{ display:flex; gap:8px; margin-top:8px; flex-wrap: wrap; }
.wo-chip{ cursor:pointer; border-radius:16px; padding:4px 10px; }
.wo-chip.is-active{ background:#266197; color:#fff; }

/* List & items */
.wo-history-list{ overflow:auto; padding: 8px 14px 18px 22px; position:relative; }
.wo-history-item{
  position: relative;
  padding: 12px 12px 12px 18px;
  border: 1px solid #eef1f6;
  border-radius: 12px;
  margin: 12px 0 12px 14px;
  background:#fff;
  transition: box-shadow .2s ease, border-color .2s;
}
.wo-history-item:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.06); border-color:#e3e8f2; }

/* Left vertical rail & dot */
.wo-history-list:before{
  content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#e9edf3;
}
.wo-dot{
  position:absolute; left:-6px; top:18px;
  width:12px; height:12px; border-radius:50%; background:#266197;
  box-shadow:0 0 0 3px #eef4fb;
}

/* Head/body/toggle */
.wo-item-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wo-time{ font-size:12px; color:#6b7280; }
.wo-item-body{ margin-top:8px; display:none; }
.wo-history-item.is-open .wo-item-body{ display:block; }
.wo-item-toggle{
  position:absolute; right:8px; bottom:8px;
  border:none; background:transparent; padding:6px; color:#6b7280;
}

/* Badges */
.wo-badge{ font-size:12px; border-radius:12px; padding:3px 8px; font-weight:600; }
.wo-badge-success{ background:#e8faf0; color:#1b8e47; }
.wo-badge-warning{ background:#fff7e6; color:#a36a00; }
.wo-badge-dark{ background:#e9ecf1; color:#374151; }
.wo-badge-default{ background:#eef2f7; color:#3b82f6; }

/* Lines inside body */
.wo-line, .wo-diff{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#374151; }
.wo-line i, .wo-diff i{ margin-top:2px; }
.wo-diff.muted{ color:#6b7280; }

/* Small screens: full width drawer */
@media (max-width: 992px){
  .wo-history-sidebar{ width: 100vw; }
}

.wo-fab{
  position: fixed;
  right: 22px;
  bottom: 52px;
  z-index: 1060;
}

/* Main round button (same look as history FAB) */
.wo-fab-main{
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: #266197; /* brand blue */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s ease, filter .18s ease;
}
.wo-fab-main:hover{ filter: brightness(1.06); }
.wo-fab-main:active{ transform: scale(.98); }

/* Group container (stacked mini FABs) */
.wo-fab-group{
  position: absolute;
  bottom: 60px; /* sits above main */
  right: 0;
  display: grid;
  gap: 10px;
  pointer-events: none; /* disabled until opened via JS */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Mini FABs (submit buttons) */
.wo-fab-action{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  pointer-events: auto; /* enabled when visible */
}

/* Color variants */
.wo-fab-primary{ background:#266197; }           /* Save */
.wo-fab-success{ background:#2eb872; }           /* Save & Notify */

/* Open state toggled by JS */
.wo-fab.is-open .wo-fab-group{
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.wo-fab-danger{ background:#d9534f; color:#fff; }
.wo-fab-danger:hover{ filter: brightness(1.06); }


    


:root { --topbar-height: 64px; } /* ajuste se sua topbar tiver outra altura */

/* Topbar continua do jeito que está (geralmente fixed) */

.saas-expiry-banner{
  position: absolute;
  top: 55px;      
  z-index: 1030;
  width: 100%;
  padding: 0px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.saas-expiry-banner.saas-warn{background:#FFF6E5;color:#6A4D00;}
.saas-expiry-banner.saas-urgent{background:#FFE8E6;color:#7A1520;}
.saas-expiry-banner.saas-expired{background:#FDE7E7;color:#7A1520;}
.saas-expiry-banner__content{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.saas-expiry-banner__left{display:flex;align-items:center;gap:10px;font-weight:600;}
.saas-expiry-text{font-weight:500;opacity:.9;}
.saas-expiry-dot{width:8px;height:8px;border-radius:50%;background:#E53935;display:inline-block;}
.pulse{animation:pulse 1.4s infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.4);opacity:.4}100%{transform:scale(1);opacity:.8}}
.btn.btn-outline{/*border:1px solid currentColor;*/padding:8px 12px;border-radius:10px;font-weight:600;}
/* badge no sino (se quiser manter) */
.saas-expiry-mini-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:14px;font-size:11px;line-height:18px;text-align:center;color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.saas-expiry-mini-badge.warn{background:#F59E0B;}
.saas-expiry-mini-badge.urgent{background:#EF4444;}
.saas-expiry-mini-badge.expired{background:#B91C1C;}

/* ===== Work Orders: Status Bar (modern chips) ===== */
  .so-statusbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: .75rem;
    overflow-x: auto;
    padding: .25rem .5rem .5rem;
    margin: .25rem 0 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  :root { --chip-accent: #266197; } 

  .so-statusbar{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:.75rem;overflow-x:auto;padding:.25rem .5rem .5rem;margin:.25rem 0 1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .so-statusbar::-webkit-scrollbar{height:6px}
  .so-statusbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:999px}

  .so-chip {
  appearance: none;
  border: 1px solid rgba(38,97,151,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  backdrop-filter: blur(6px);  
  border-radius: 10px;
  padding: .7rem 1.2rem;  
  display: inline-flex;
  align-items: center;
  gap: .7rem;             
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  scroll-snap-align: start;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  font-size: 1rem;        
}
  .so-chip:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .so-chip.is-active{border-color:var(--chip-accent);background:rgba(255,255,255,.8)}
  .so-chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(38,97,151,.25)}

  .so-chip__icon {
  width: 24px; height: 24px;   
  font-size: 14px;             
  flex: 0 0 24px;
}

.so-chip__label {
  font-weight: 600;
  font-size: 1.2rem;      
  color: #1f2937;
}

.so-chip__count {
  font-weight: 800;
  font-size: 1.2rem;    
  background: rgba(0,0,0,.06);
  padding: .25rem .65rem;  
  border-radius: 999px;
  line-height: 1.4;
  color: #000;
}
  @media (prefers-color-scheme: dark){
    .so-chip{background:rgba(30,41,59,.55);border-color:rgba(255,255,255,.12)}
    .so-chip__label{color:#e5e7eb}.so-chip__count{color:#f9fafb;background:rgba(255,255,255,.08)}
  }  

/* Container: lighter, flat, with soft radius */
.nav.nav-tabs{
  /*position: sticky;*/
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: .35rem;                    /* more breathing */
  padding: 10px;
  margin: 0 0 14px 0;
  list-style: none; 
}
.nav.nav-tabs::-webkit-scrollbar{ height:0; }
.nav.nav-tabs > li{ flex:0 0 auto; }

/* Base link: compact/clean */
.nav.nav-tabs > li > a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: 9px 14px;
  border-radius: 10px;           /* full pill */
  color: var(--text);
  background: transparent;
  text-decoration: none !important;
  font-weight: 600;               /* premium weight */
  letter-spacing:.1px;
  border: 1px solid transparent;  /* for smooth hover/active */
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  outline:none;
}

/* Icons */
.nav.nav-tabs > li > a i{ font-size:14px; opacity:.95; }

/* Hover/Focus (ghost pill) */
.nav.nav-tabs > li > a:hover,
.nav.nav-tabs > li > a:focus{
  background: var(--hover);
  color: var(--text-strong);
  border-color: rgba(15,23,42,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Active: solid brand pill (white text) */
.nav.nav-tabs > li.active > a{
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%);
  color:#fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(38,97,151,.25);
  transform: translateY(-1px);
}

/* Remove item dividers to keep it airy */
@media (min-width: 992px){
  .nav.nav-tabs > li + li > a{ box-shadow:none; }
}

/* Keyboard focus ring */
.nav.nav-tabs > li > a:focus-visible{
  outline:none; box-shadow: var(--ring);
}

/* Hide indicator: pill itself is the indicator (optional) */
.nav.nav-tabs .tabs-indicator{ display:none; }

/* Hidden tabs */
.nav.nav-tabs > li.hidden{ display:none !important; }

/* Content spacing */
#tab-content{ margin-top:16px; }


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav.nav-tabs > li > a{ transition:none; }
}

/* Optional dark auto */
@media (prefers-color-scheme: dark){
  .nav.nav-tabs{
    --bg:#0b1220; --text:#cbd5e1; --text-strong:#e2e8f0; --hover:#151c2c;
    border-color:#162036; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  }
  .nav.nav-tabs > li > a:hover,
  .nav.nav-tabs > li > a:focus{ border-color:#1f2a44; }
}
/* ===== Mobile fix: force horizontal pills (wins against other CSS) ===== */
/* Hard reset of Bootstrap/theme rules that stack items */


/* 2) Kill any theme rules that stack or stretch items */
.nav.nav-tabs > li{
  float: none !important;
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
 
}


/* --- Serial search bar --- */
.serial-searchbar {
  position: relative;
  margin: 8px 0 14px 0;
}
.serial-searchbar .serial-input {
  width: 100%;
  height: 42px;
  border: 1px dashed #9d9fa1;
  border-radius: 5px;
  padding: 0 42px 0 42px;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
  background: #fff;
}
.serial-searchbar .serial-input:focus {
  border-color: #266197;
  box-shadow: 0 0 0 3px rgba(38,97,151,.15);
}
.serial-searchbar .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  opacity: .6;
}
.serial-searchbar .clear-btn {
  position: absolute;
  right: 8px;
  top: 30%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
}
.serial-searchbar .clear-btn:hover { background: #f3f4f6; }

.serial-search-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin: 6px 2px 0 2px; font-size:.85rem; color:#6b7280;
}
.serial-search-meta .count-badge{
  background:#eef2ff; color:#374151; padding:2px 8px; border-radius:999px; font-weight:600;
}

/* Smooth hide/show for items */
.work-order-product {
  transition: opacity .15s ease, height .15s ease, margin .15s ease, padding .15s ease;
}
.work-order-product._hidden {
  opacity: 0; height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}

/* Optional: highlight matched text */
mark.serial-hit { background: #fff3bf; padding: 0 2px; border-radius: 3px; }

.form-control{
  border-radius: 10px;
}
.select2-container--default .select2-selection--single {
 border-radius: 10px !important;
}

.select2-selection--multiple{
   border-radius: 10px !important;
}
.btn{
  border-radius: 6px !important;
  margin-right: 5px !important;
}

/* --- Responsive Action Bar with Overflow --- */
.actionbar{
  position: sticky; top: 8px; z-index: 20;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;
  padding:10px;  
  
}
.btn{
  display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px;
  border:1px solid var(--border) ; border-radius:12px; background:#fff; color:#0f172a; font-weight:600;
  transition:.18s; white-space:nowrap;
}
.btn i{font-size:13px}
.btn-default {background:#fff !important;color:#0f172a !important;text-decoration: none !important;}
.btn-primary{background:#fff !important;color:#0f172a !important;}
.btn:hover {color: #266197 !important; background-color: #fff !important;border-color: #204d74 !important;}

.ab-icon{ width:38px; justify-content:center; padding:0 } /* icon-only */

.ab-overflow{ position:relative }
.ab-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:240px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 32px rgba(2,6,23,.15);
  padding:6px; display:none; z-index: 20;
}
.ab-menu.open{ display:block }
.ab-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#0f172a !important; text-decoration:none !important;
}
.ab-item:hover{ background:#f1f5f9 }
.ab-item i{ width:18px; text-align:center }
.ab-kbd{ margin-left:auto; font-size:12px; padding:1px 6px; border:1px solid #e2e8f0; border-radius:6px; background:#f8fafc }

@media (max-width: 1100px) {
  .btn .txt{ display:none }
  .btn{ padding:0 12px }
}
@media print{ .actionbar{ display:none !important } }

/* ---- Command Palette ---- */
.cmdp-mask{ position:fixed; inset:0; background:rgba(2,6,23,.5); display:none; z-index:1000 }
.cmdp{ position:fixed; left:50%; top:12%; transform:translateX(-50%); width:min(800px,92vw);
  background:#fff; border-radius:16px; box-shadow:0 40px 80px rgba(2,6,23,.32); display:none; z-index:1001;
}
.cmdp.open, .cmdp-mask.open{ display:block }
.cmdp input{ width:100%; padding:14px 16px; border:none; border-bottom:1px solid #e5e7eb; outline:none; font-size:16px; border-radius:16px 16px 0 0 }
.cmdp-list{ max-height:60vh; overflow:auto; padding:8px }
.cmdp-item{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:10px; cursor:pointer }
.cmdp-item:hover{ background:#f1f5f9 }

.wo-price__input{ padding:2px 6px; height:auto; }
.btn-xs{ padding:2px 6px; }

:root{
  --kpi-min: 220px;         /* min width per card */
  --kpi-height: 72px;       /* uniform height (was 86px) */
  --kpi-gap: 12px;          /* spacing between cards */
  --kpi-radius: 14px;
  --kpi-pad-y: 10px;        /* vertical padding */
  --kpi-pad-x: 14px;        /* horizontal padding */
}

/* Responsive grid that auto-fits any number of cards */
.top-kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min), 1fr));
  gap: var(--kpi-gap);
  margin: 10px 0 8px;
  align-items: stretch;
}

/* Make it a single row with horizontal scroll on very narrow screens */
@media (max-width: 680px){
  .top-kpis{
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--kpi-min), 1fr);
    overflow-x: auto;
    padding-bottom: 2px; /* space for scrollbar */
  }
}

/* Base card */
.kpi-card{
  height: var(--kpi-height);
  border-radius: var(--kpi-radius);
  padding: var(--kpi-pad-y) var(--kpi-pad-x);
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
  position: relative;
  isolation: isolate; 

}

/* Subtle inner border for definition */
.kpi-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
}

/* Gradient themes (keep your brand look) */
.kpi--request, .kpi--hours, .kpi--resources, .kpi--days{
  background: #0ea5e9;
}


/* Left block: icon + text */
.kpi-left{
  display:flex; align-items:center; gap:10px;
  min-width: 0; /* allow text to truncate */
}

/* Icon container (smaller) */
.kpi-icon{
  width:36px; height:36px; border-radius:10px;
  background: rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
}
.kpi-icon svg{ width:18px; height:18px; opacity:.95 }

/* Texts */
.kpi-info{ line-height:1.05; min-width:0 }
.kpi-label{
  font-size:1.2rem; letter-spacing:.04em; opacity:.92; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kpi-value{
  font-weight:800; font-size:1.22rem; /* was 1.42rem */
  letter-spacing:.01em; font-variant-numeric: tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kpi-sub{ font-size:1.30rem; opacity:.90 }

/* Right-side action (link) */
.kpi-action{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px;
  background: rgba(255,255,255,.16); color:#fff; text-decoration:none;
  transition: transform .08s ease, background .2s ease;
  flex: 0 0 auto;
}
.kpi-action:hover{ background: rgba(255,255,255,.26) }
.kpi-action:active{ transform: translateY(1px) }

/* Optional: denser mode if you add many cards at once */
.top-kpis.is-dense{
  --kpi-min: 200px;
  --kpi-height: 64px;
  --kpi-pad-y: 8px;
  --kpi-pad-x: 12px;
}
.top-kpis.is-dense .kpi-value{ font-size:1.08rem }
.top-kpis.is-dense .kpi-icon{ width:32px; height:32px }
.top-kpis.is-dense .kpi-icon svg{ width:16px; height:16px }

.kpi-card.kpi--consumables {
    background: #00b894; /* escolhe a cor que quiseres */
}

.kpi-card.kpi--services {
    background: linear-gradient(135deg, #5b6ef5, #3aa5f9); /* blue gradient */
    color: #fff;
}

/* optional: tweak icon background for services card (EN) */
.kpi-card.kpi--services .kpi-icon {
    background: rgba(255, 255, 255, 0.12);
}

/* ensure texts/icons inside are white (EN) */
.kpi-card.kpi--services .kpi-label,
.kpi-card.kpi--services .kpi-value,
.kpi-card.kpi--services .kpi-sub,
.kpi-card.kpi--services svg {
    color: #fff;
    stroke: #fff;
}

/* Work order age KPI - OPEN (EN) */
.kpi-card.kpi--age-open {
    background: linear-gradient(135deg, #ff9f43, #ff6b6b); /* warm orange/red */
    color: #fff;
}

/* Work order age KPI - CLOSED (EN) */
.kpi-card.kpi--age-closed {
    background: linear-gradient(135deg, #2ecc71, #1abc9c); /* green/teal */
    color: #fff;
}

/* Common styles for both age cards (EN) */
.kpi-card.kpi--age-open .kpi-icon,
.kpi-card.kpi--age-closed .kpi-icon {
    background: rgba(255, 255, 255, 0.14);
}

.kpi-card.kpi--age-open .kpi-label,
.kpi-card.kpi--age-open .kpi-value,
.kpi-card.kpi--age-open .kpi-sub,
.kpi-card.kpi--age-open svg,
.kpi-card.kpi--age-closed .kpi-label,
.kpi-card.kpi--age-closed .kpi-value,
.kpi-card.kpi--age-closed .kpi-sub,
.kpi-card.kpi--age-closed svg {
    color: #fff;
    stroke: #fff;
}
.kpi-card.kpi--age-open,
.kpi-card.kpi--age-closed {
    min-width: 420px;       /* larger than others */
    flex: 0 0 420px;        /* prevents stretching too much */
}

/* Age badge in list (EN) */
.wo-age-badge {
    display: inline-block;
    width: 50%;          /* largura fixa */
    padding: 4px 0;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
}

/* Open – low age (0-3 days) */
.wo-age-open-low {
    background: linear-gradient(135deg, #3498db, #2980b9);  /* Azul */
}

/* Open – medium age (4-7 days) */
.wo-age-open-mid {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
}

/* Open – high age (>7 days) */
.wo-age-open-high {
    background: linear-gradient(135deg, #e74c3c, #ff6b6b);
}

/* Closed – neutral green */
.wo-age-closed {
    background: linear-gradient(135deg, #4cd137, #44bd32);
    opacity: 0.95;
}

/* EN: Minimal, modern "color chip" styling (kept self-contained to this view) */
.color-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:9999px;
  background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  font-weight:600; font-size:12px; line-height:1;
  white-space:nowrap;
}
.color-chip .chip-dot{
  width:14px; height:14px; border-radius:50%;
  background:var(--chip-color, #e5e7eb);
  border:1px solid rgba(0,0,0,.1);
  display:inline-block;
}
.color-chip .chip-text{ letter-spacing:.2px; }
.color-chip.chip-empty{
  color:#6b7280; /* muted */
  background:#f9fafb; border-color:#e5e7eb;
  font-weight:500;
}

/* --- Layout shell --- */
 :root{
  --menu-w: 248px;        /* largura do sidebar (antes 300px) */
  --menu-gap: 6px;        /* “gutter” entre colunas (antes 0/18px) */
  --menu-pad: 8px;        /* padding interno do sidebar (antes 12px) */
  --pane-pad: 0px;        /* padding do painel da direita (antes 12px) */
}
.settings-layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:18px;
}

/* Sidebar */
 .settings-sidebar {
    position: sticky;
    top: 12px;
    height: calc(100vh - 24px);
    overflow: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: var(--menu-pad);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .04)
  }

.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:700;color:#0f172a;margin-bottom:8px;
}
.sidebar-collapse{
  border:1px solid #e5e7eb;background:#f8fafc;border-radius:8px;padding:4px 8px;cursor:pointer;
}

/* Groups */
.menu-group{border:1px solid #eef2f7;border-radius:10px;margin:8px 0;background:#fff}
.menu-group[open]{box-shadow:0 2px 10px rgba(0,0,0,.03)}
.menu-group__title{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;margin:0;cursor:pointer;font-weight:600;color:#0f172a;
}
.menu-group__title::-webkit-details-marker{display:none}
.menu-group__list{margin:0;padding:6px 8px 10px 8px}
.menu-group__list li{list-style:none;margin:2px 0}
.menu-link{
  display:block;padding:8px 10px;border-radius:8px;color:#334155;text-decoration:none;
}
.menu-link:hover{background:#f3f6fb}
.menu-link.is-active{background:#e9f2ff;color:#0b5ed7;font-weight:600}

/* Content */
.settings-content .x_panel{border-radius:12px}

/* Responsive */
@media (max-width: 1024px){
  .settings-layout{grid-template-columns: 1fr}
  .settings-sidebar{position:static;height:auto}
}
  .settings-pane {
    padding: var(--pane-pad);
  }

  .menu-section {
    border: 1px solid #eef2f7;
    border-radius: 10px;
    margin: 8px 0;
    background: #fff
  }

  .menu-section__title {
    padding: 12px 14px;
    margin: 0;
    font-weight: 600;
    color: #0f172a;
    
  }

  .menu-list {
    padding: 6px 8px 12px 8px;
    margin: 0
  }

  .menu-list li {
    list-style: none;
    margin: 2px 0
  }

  .menu-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: #334155;
    text-decoration: none
  }

  .menu-link:hover {
    background: #f3f6fb
  }

  .menu-link.is-active {
    background: #e9f2ff;
    color: #0b5ed7;
    font-weight: 600
  }

  @media (max-width:1024px) {
    .settings-layout {
      grid-template-columns: 1fr
    }

    .settings-sidebar {
      position: static;
      height: auto
    }
  }
  .menu-section {
  border: 1px solid #eef2f7;
  border-radius: 10px;
  margin: 8px 0;
  background: #fff;
}

/* Summary clicável + seta à direita */
.menu-section__title {
  list-style: none;              /* esconder marcador do summary */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  margin: 0;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
}
.menu-section__title::-webkit-details-marker { display: none; }

/* “seta” minimalista */
.menu-section__title .chev {
  width: 10px; height: 10px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

/* roda seta quando aberto */
.menu-section[open] .menu-section__title .chev {
  transform: rotate(135deg);
}

/* lista interna mantém os teus estilos existentes */
.menu-list { padding: 6px 8px 12px 8px; margin: 0; }
.menu-list li { list-style: none; margin: 2px 0; }
.menu-link { display: block; padding: 8px 10px; border-radius: 8px; color: #334155; text-decoration: none; }
.menu-link:hover { background: #f3f6fb; }
.menu-link.is-active { background: #e9f2ff; color: #0b5ed7; font-weight: 600; }



.fc-event.has-state .state-strip{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;                /* largura da faixa */
  background: var(--state) !important;  /* valor injetado no JS */
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

/* Garante espaço para o texto não colar na faixa */
.fc-time-grid-event.has-state .fc-content,
.fc-day-grid-event.has-state .fc-content{
  /*padding-left: 8px;*/
}

/* O container do evento precisa aceitar posicionamento absoluto da faixa */
.fc-time-grid-event, .fc-day-grid-event{
  position: relative;
}
  
  /* Clean field header with actions */
.field-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.field-title{
  font-weight:600; color:#444; margin-left: 10px;
}
.field-actions{ display:flex; align-items:center; gap:6px; }

/* Icon-only, subtle button */
.btn-icon{
  /* keep it neutral and modern */
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:1px solid #e5e7eb; border-radius:6px;
  background:#34d3eb ; cursor:pointer; color:#fff;margin-right: 12px;
}
.btn-icon:hover{ background:#f8fafc; border-color:#d1d5db; }
.btn-icon:active{ background:#eef2f7; }
.btn-icon i{ font-size:13px; line-height:1; }

/* Utility: hidden when not needed */
.refresh-hidden{ display:none !important; }

table.dataTable tbody a.link-requisition{
  display:inline-block;           /* avoid collapsing */
  color: #337ab7;
  text-decoration: none;
}
table.dataTable tbody a.link-requisition:hover{
  text-decoration: underline;
}

/* Badge base */
.wo-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1.6;
  text-decoration:none;
  vertical-align:middle;
  border:1px solid rgba(0,0,0,.08);
}

/* Child-of (has parent) */
.wo-badge-parent{
  background:#f3f6ff;          /* soft blue */
}

/* Has children */
.wo-badge-children{
  background:#f8f9fb;          /* soft gray */
}

/* Subtile hover */
.wo-badge:hover{
  filter:brightness(0.98);
}

/* Keep the requisition + badges on one line */
.wo-requisition-cell{
  white-space:nowrap;
}
#woChildrenModal .modal-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: 900px;
  width: 90%;
  z-index: 1055; /* EN: above overlays */
}

/* EN: Cosmetic improvements */
#woChildrenModal .modal-content {
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

#woChildrenModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}
/* Drawer à direita – compatível Bootstrap 3, 4 e 5 */
.modal.modal-right .modal-dialog {
  position: fixed !important;
  top: 0;
  right: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  transform: translate3d(100%, 0, 0);     
  transition: transform .28s ease-out;
  pointer-events: auto;
  z-index: 2001;
                           
}

/* BS4/5 quando o modal está aberto */
.modal.modal-right.show .modal-dialog { 
  transform: translate3d(0, 0, 0);
}

/* BS3 quando o modal está aberto */
.modal.modal-right.in .modal-dialog {      
  transform: translate3d(0, 0, 0);
}

.modal.modal-right .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: -10px 0 30px rgba(0,0,0,.18);
  
}

.modal.modal-right .modal-header { border-bottom: 0; padding: 16px 20px 0; }
.modal.modal-right .modal-title  { font-weight: 600; font-size: 16px; }
.modal.modal-right .modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  max-height: calc(100vh - 90px); 
  overscroll-behavior: contain;   
  scrollbar-width: thin;          
}
.modal.modal-right .modal-footer,
.modal.modal-right .p-2.text-right {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e6ebf2;
  padding: 10px 16px;
  z-index: 2;
}
.note-editor.note-airframe .note-editing-area .note-editable[contenteditable=false], .note-editor.note-frame .note-editing-area .note-editable[contenteditable=false] {
    background-color: #f4f8fb !important;
}

/* --- History tab styles (EN): modern, clean, compact --- */
.hist-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.hist-empty {
  padding:14px; border:1px dashed #e5e7eb; border-radius:10px; color:#6b7280;
  background:#fafafa;
}
.hist-list { display:grid; grid-template-columns:1fr; gap:10px; }

.hist-card {
  border:1px solid #e6e9ed; border-radius:12px; background:#fff; padding:0;
  overflow:hidden;
}
.hist-card[open] { box-shadow:0 6px 16px rgba(0,0,0,.06); border-color:#d5dbe1; }

.hist-summary { 
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  cursor:pointer;
}
.hist-summary:hover { background:#f8fafc; }

.hist-badge {
  background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe;
  font-weight:600; font-size:12px; padding:4px 8px; border-radius:999px;
  min-width:72px; text-align:center;
}
.hist-title { font-weight:600; color:#111827; }
.hist-meta { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  background:#f3f4f6; color:#374151; border:1px solid #e5e7eb;
  padding:2px 8px; border-radius:999px; font-size:12px;
}

.hist-body { padding:12px 16px 14px 16px; border-top:1px solid #eef2f7; }
.hist-block { margin-bottom:10px; }
.hist-block-title { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color: #334155;margin-bottom: 4px;font-weight: 600; }
.hist-block-text { white-space:pre-wrap; color:#1f2937; }

.hist-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.btn-outline-primary {
  border:1px solid #3b82f6; color:#1d4ed8; background:#ffffff;
}
.btn-outline-primary:hover {
  background:#eff6ff;
}

.contact-desc {
    display: inline-block;
    max-width: 300px;  /* ajusta conforme o layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
  /* larguras das colunas */
  #contract-periodicity-modal .periodicity-table col.col-date      { width: 18%; }
  #contract-periodicity-modal .periodicity-table col.col-equipment { width: 42%; }
  #contract-periodicity-modal .periodicity-table col.col-visit     { width: 30%; }
  #contract-periodicity-modal .periodicity-table col.col-actions   { width: 10%; }

  /* células mais compactas e alinhadas */
  #contract-periodicity-modal .periodicity-table td.period-cell {
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
  }

  #contract-periodicity-modal .periodicity-table .form-control {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
  }

  #contract-periodicity-modal .periodicity-table .input-group-addon {
    padding: 4px 8px;
  }
  .frequency-card {
    padding: 10px 15px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    background: #fafafa;
    transition: all .2s ease-in-out;
    user-select: none;
}
.frequency-card:hover {
    background: #f0f0f0;
}
.frequency-card.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.freq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.small-label {
    font-size: 11px;
    color: #777;
}
@media (min-width: 992px) {
    .modal-lg {
        width: 990px;
    }
}
/* Container do campo selecionado (EN) */
.select2-awo .select2-selection--single {
    height: 44px;
    border-radius: 999px;
    border: 1px solid #d0d7e2;
    padding-left: 14px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    font-size: 13px;
    background-color: #fff;
}

/* Texto dentro do campo (EN) */
.select2-awo .select2-selection__rendered {
    line-height: 44px;
    padding-left: 0;
}

/* Seta à direita (EN) */
.select2-awo .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
}

/* Dropdown “cartão branco com sombra” (EN) */
.select2-dropdown {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: hidden;
}

/* Linhas das opções (EN) */
.select2-dropdown .select2-results__option {
    padding: 8px 12px;
    margin: 2px 6px;
    border-radius: 8px;
}

/* Hover/selecionado (EN) */
.select2-dropdown .select2-results__option--highlighted {
    background-color: #eef2ff;
    color: #111827;
}
.dow-grid {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .day-card {
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #e1e5eb;
    background: #ffffff;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: all .15s ease-in-out;
  }

  .day-card:hover {
    background: #f5f7fb;
  }

  .day-card.active {
    background: #343a40;
    border-color: #343a40;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  }

  .dashboard-row {
        position: relative;
        min-height: 250px;
    }

    /* EN: Base style for draggable / resizable widget */
    .dashboard-widget {
        position: relative; /* required for jQuery UI resizable */
    }

    /* EN: Placeholder (used later if we add sortable) */
    .dashboard-placeholder {
        border: 2px dashed #ccc;
        background: #f8f8f8;
        min-height: 150px;
        margin-bottom: 15px;
    }

    #btn-contract-periodicity {
        position: relative;
    }

    #contract-periodicity-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        font-size: 10px;
        padding: 2px 5px;
    }

    /* Simple pulse effect when there are pending contracts */
    .contract-badge-pulse-active {
        animation: contract-pulse 1.2s infinite;
    }

    @keyframes contract-pulse {
        0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
        70%  { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
        100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
    }
     
.modal-right-chat .modal-dialog {
    margin: 10px 0 0 auto;          /* encostado à direita */
    height: 93% !important;
    width: 60vw !important;          /* horizontal size of the drawer */
    max-width: 60vw !important;  
    margin-top: 50px !important;         /* largura tipo sidebar Bitrix */
}

.modal-right-chat .contracts-drawer {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 16px rgba(15, 23, 42, 0.25);
}

/* HEADER */
.contracts-drawer__header {
    background: linear-gradient(90deg, #0d74ff, #2196f3);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contracts-drawer__title {
    display: flex;
    flex-direction: column;
}

.contracts-drawer__title-main {
    font-weight: 600;
    font-size: 14px;
}

.contracts-drawer__title-count {
    font-size: 11px;
    opacity: 0.9;
    margin-top: 2px;
}

.contracts-drawer__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

/* BODY */
.contracts-drawer__body {
    flex: 1;
    background: #f4f7fb;
    overflow-y: auto;
    padding: 8px 0;
}

/* LISTA */
.contracts-list {
    margin: 0;
    padding: 0;
}

/* Cada "chat" / contrato */
.contract-item {
    background: #ffffff;
    margin: 4px 8px;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.contract-item:hover {
    background: #f0f4ff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    transform: translateY(-1px);
}

.contract-item__title-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.contract-item__contract {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
}

.contract-item__visits-badge {
    background: #e3f2fd;
    color: #0d47a1;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.contract-item__description {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contract-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

.contract-item__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* "icone" redondo tipo avatar */
.contract-item__avatar-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0d74ff;
}

/* Mensagem vazio */
.contracts-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

/* FOOTER */
.contracts-drawer__footer {
    padding: 8px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    text-align: right;
}
.contract-item__contract {
    display: flex;
    align-items: center;
    gap: 6px;
}
.contract-item__open-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
}

.contract-item__open-btn svg {
    width: 14px;
    height: 14px;
}
.contract-item__actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

/* Botão Gerar OS */
.contract-generate-btn {
    border: none;
    outline: none;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: linear-gradient(135deg, #266197, #1b4a75);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.contract-generate-btn svg {
    width: 14px;
    height: 14px;
}

.contract-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    background: linear-gradient(135deg, #2f77b8, #215a8a);
}

.contract-generate-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.contract-generate-btn.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.contracts-drawer__search {
    padding: 8px 16px 4px;
    background: #f7f9fc;
    border-bottom: 1px solid #e4e8f3;
}

/* Barra de pesquisa “pill” */
.contracts-search-bar {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    border: 1px solid #d4d9e6;
    padding: 4px 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Ícone da lupa */
.contracts-search-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    font-size: 13px;
    color: #6b7280;
}

/* Input */
.contracts-search-bar__input {
    border: none;
    outline: none;
    font-size: 13px;
    width: 100%;
    background: transparent;
    padding: 4px 0;
}

.contracts-search-bar__input::placeholder {
    color: #9ca3af;
    font-size: 12px;
}

/* Botão de limpar “x” */
.contracts-search-bar__clear {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #9ca3af;
    cursor: pointer;
    margin-left: 4px;
    padding: 2px 4px;
    border-radius: 999px;
}

.contracts-search-bar__clear:hover {
    color: #4b5563;
    background: #f3f4f6;
}

/* Foco – borda azul suave */
.contracts-search-bar:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
}

.timeline-no-line:before {
    display: none !important;
}
.timeline-visits {
    max-height: 360px;
    overflow-y: auto;
}
.toggle-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ddd;
    transition: .3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    transition: .3s;
    border-radius: 50%;
}

/* ON state */
.toggle-switch input:checked + .toggle-slider {
    background-color: #26a69a; /* cor semelhante ao teu “Ativo” */
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-text {
    font-size: 0.9em;
}

.floating-save-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050; /* above content */
}

.floating-save-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #1565c0;         /* main blue */
    color: #ffffff;
    font-size: 22px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / focus */
.floating-save-btn:hover,
.floating-save-btn:focus {
    background: #0d47a1;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30);
}

/* Active (click) */
.floating-save-btn:active {
    transform: translateY(1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.20);
}

/* Small screens: aproxima um pouco das bordas */
@media (max-width: 768px) {
    .floating-save-wrapper {
        bottom: 16px;
        right: 16px;
    }
}

.notif-dropdown-modern {
    /* EN: optional, just to avoid a giant dropdown */
    max-height: 70vh;        /* 70% of viewport height */
    padding: 0;
    overflow: hidden;        /* EN: hide overflow outside the inner list */
}

/* EN: Scroll area with the notifications */
.notif-dropdown-modern .notif-list {
    max-height: calc(70vh - 60px); /* EN: header height (~60px) */
    overflow-y: auto;              /* EN: vertical scroll */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* EN: smooth scroll on touch devices */
}

/* (Opcional) reduzir um pouco a altura de cada item para caber mais */
.notif-dropdown-modern .notif-item {
    padding: 8px 14px;
}

.customer-type-wrap{
    background:#fff;
    border:1px solid #eef1f5;
    border-radius:14px;
    padding:16px 16px 6px 16px;
    box-shadow:0 6px 18px rgba(16,24,40,.06);
    margin-bottom:14px;
}

.customer-type-header{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:12px;
}

.customer-type-title{
    font-weight:700;
    font-size:14px;
    color:#1f2937;
}

.customer-type-subtitle{
    font-size:12px;
    color:#6b7280;
}

/* Tiles */
.customer-type-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(240px, 360px));
    gap:12px;
    align-items:stretch;
}

.customer-type-tile{
    position:relative;
    display:flex;
    gap:12px;
    padding:14px 14px;
    border:1px solid #e8ecf3;
    border-radius:14px;
    cursor:pointer;
    transition: all .18s ease;
    background: #fbfcfe;
}

.customer-type-tile:hover{
    transform: translateY(-1px);
    box-shadow:0 10px 22px rgba(16,24,40,.08);
    border-color:#d9e2f2;
    background:#fff;
}

.customer-type-tile input[type="radio"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.customer-type-tile .tile-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f2f6ff;
    color:#266197; /* Matches your brand blue */
    font-size:18px;
    flex:0 0 auto;
}

.customer-type-tile .tile-body{
    flex:1 1 auto;
    min-width:0;
}

.customer-type-tile .tile-title{
    font-weight:700;
    color:#111827;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
}

.customer-type-tile .tile-desc{
    font-size:12px;
    color:#6b7280;
    margin-top:2px;
}

.tile-badge{
    font-size:11px;
    padding:3px 8px;
    border-radius:999px;
    background:#e8f0ff;
    color:#266197;
    border:1px solid #d5e5ff;
    font-weight:700;
}

.customer-type-tile .tile-check{
    color:#266197;
    font-size:18px;
    opacity:0;
    transition: opacity .18s ease;
}

/* Active state */
.customer-type-tile.is-active{
    border-color:#b9d2ff;
    background:#ffffff;
    box-shadow:0 10px 24px rgba(38,97,151,.12);
}

.customer-type-tile.is-active .tile-check{
    opacity:1;
}

/* Make it responsive */
@media (max-width: 991px){
    .customer-type-grid{
        grid-template-columns: 1fr;
    }
}

#toast-container > div {
    opacity: 0.95 !important;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    font-weight: 500;
}

.toast-success { background-color: rgba(40, 167, 69, 0.92) !important; }
.toast-error   { background-color: rgba(220, 53, 69, 0.92) !important; }
.toast-info    { background-color: rgba(23, 162, 184, 0.92) !important; }
.toast-warning { background-color: rgba(255, 193, 7, 0.92) !important; color:#333 !important; }


.signature-pad-body canvas {
  width: 100%;
  height: 160px;
  display: block;
}

.btn-scroll-top{
  position: fixed;
  right: 22px;
  bottom: 108px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: #57d709;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  display: none;              /* começa escondido */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
}

.btn-scroll-top:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.sig-table { width:100%; border-collapse: collapse; }
.sig-table th, .sig-table td { border: 1px solid #ddd; padding: 8px; }

.sig-cell { text-align:center; vertical-align: middle; height: 130px; }

.wo-status-inline{
  font-size: 11px !important;
  border: 1px solid #a7a7cd !important;
}

.label-success, .label-default, .label-danger {
      border-radius: 6px;
    padding: 5px;
}


/* Compact application sidebar */
:root {
  --sidebar-width: 84px;
  --sidebar-desktop-width: var(--sidebar-width);
  --sidebar-tablet-width: var(--sidebar-width);
  --topbar-mobile-logo-width: 64px;
  --sidebar-mobile-width: min(86vw, 320px);
  --sidebar-mobile-min-width: min(280px, 86vw);
  --sidebar-panel-width: 230px;
  --topbar-height: 55px;
  --sidebar-transition-duration: 220ms;
  --sidebar-active-bg: #edf6ff;
  --sidebar-hover-bg: #f5faff;
  --sidebar-border: #dfe5ec;
  --sidebar-text: #374151;
  --sidebar-muted: #64748b;
  --sidebar-accent: #0585F8;
}

body.sidebar-mobile-lock {
  overflow: hidden;
}

#wrapper {
  min-height: 100vh;
  overflow-x: hidden;
}

.topbar .topbar-left,
.topbar .topbar-left-sm {
  box-sizing: border-box;
  width: var(--sidebar-width) !important;
  height: var(--topbar-height);
  background-color: #0585F8;
  transition: width var(--sidebar-transition-duration) ease, transform var(--sidebar-transition-duration) ease;
}

.topbar .topbar-left-sm + .navbar-custom,
.navbar-custom {
  margin-left: var(--sidebar-width) !important;
  min-height: var(--topbar-height);
  transition: margin-left var(--sidebar-transition-duration) ease;
}

.topbar-logo-frame {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--topbar-height);
  padding: 0 8px;
}

.topbar-logo-image {
  display: block;
  width: auto;
  max-width: 68px;
  max-height: 42px;
  object-fit: contain;
}

.button-menu-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  width: 52px;
  height: var(--topbar-height);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease;
}

.button-menu-mobile:hover,
.button-menu-mobile:focus,
.button-menu-mobile:active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.button-menu-mobile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.82), inset 0 0 0 4px rgba(5, 133, 248, 0.35);
}

.button-menu-mobile.is-active {
  background: transparent;
  color: #ffffff;
}

.button-menu-mobile.is-active:hover,
.button-menu-mobile.is-active:focus,
.button-menu-mobile.is-active:active {
  background: rgba(255, 255, 255, 0.12);
}

#wrapper.sidebar-mobile-open .button-menu-mobile.is-active {
  background: rgba(255, 255, 255, 0.16);
}

.side-menu,
.side-menu-sm,
.side-menu.left {
  box-sizing: border-box;
  width: var(--sidebar-width) !important;
}

.side-menu.left {
  top: var(--topbar-height);
  z-index: 990;
  overflow: visible;
  border-right: 1px solid var(--sidebar-border);
  background: #ffffff;
  box-shadow: none;
  transition: width var(--sidebar-transition-duration) ease, transform var(--sidebar-transition-duration) ease;
}

body.fixed-left .side-menu.left {
  bottom: 0;
  height: calc(100vh - var(--topbar-height));
  margin-bottom: 0;
  padding-bottom: 0;
}

.side-menu-sm {
  text-align: center;
}

.sidebar-inner,
.sidebar-nav {
  box-sizing: border-box;
  height: 100%;
}

.sidebar-inner.slimscrollleft {
  overflow: visible !important;
}

.sidebar-nav {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.sidebar-nav:hover {
  scrollbar-color: #c8d3df transparent;
}

.sidebar-nav::-webkit-scrollbar,
.sidebar-inner.slimscrollleft::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.sidebar-nav::-webkit-scrollbar-track,
.sidebar-inner.slimscrollleft::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.sidebar-inner.slimscrollleft::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb,
.sidebar-inner.slimscrollleft:hover::-webkit-scrollbar-thumb {
  background: #c8d3df;
}

.side-menu .slimScrollBar {
  right: 3px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: #c8d3df !important;
  opacity: 0 !important;
}

.side-menu:hover .slimScrollBar {
  opacity: 0.65 !important;
}

#sidebar-menu {
  width: 100%;
  padding: 8px 6px 12px;
}

#sidebar-menu,
#sidebar-menu ul,
#sidebar-menu li,
#sidebar-menu a,
#sidebar-menu button {
  list-style: none;
  margin: 0;
}

#sidebar-menu button {
  font-family: inherit;
}

.sidebar-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.sidebar-item,
#sidebar-menu > ul > li {
  position: relative;
}

.sidebar-link,
#sidebar-menu > ul > li > a.sidebar-link,
#sidebar-menu .sidebar-submenu-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 62px;
  padding: 7px 5px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  text-decoration: none;
  cursor: pointer;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sidebar-link:hover,
.sidebar-link:focus,
#sidebar-menu > ul > li > a.sidebar-link:hover,
#sidebar-menu .sidebar-submenu-toggle:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-accent);
  text-decoration: none;
}

.sidebar-link:focus-visible,
.sidebar-submenu-link:focus-visible,
.sidebar-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 133, 248, 0.24);
}

.sidebar-link.active,
.sidebar-link[aria-current="page"],
.has_sub.active > .sidebar-submenu-toggle,
.has_sub.is-open > .sidebar-submenu-toggle,
#sidebar-menu > ul > li > a.sidebar-link.active {
  background: var(--sidebar-active-bg) !important;
  border-left-color: var(--sidebar-accent);
  color: var(--sidebar-accent) !important;
  font-weight: 700;
}

.sidebar-icon,
#sidebar-menu svg.sidebar-icon {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  color: #435166;
  stroke-width: 1.6;
}

.sidebar-icon *,
#sidebar-menu svg.sidebar-icon * {
  stroke-width: 1.6;
}

.sidebar-link:hover .sidebar-icon,
.sidebar-link:focus .sidebar-icon,
.sidebar-link.active .sidebar-icon,
.sidebar-link[aria-current="page"] .sidebar-icon,
.has_sub.active > .sidebar-submenu-toggle .sidebar-icon,
.has_sub.is-open > .sidebar-submenu-toggle .sidebar-icon {
  color: currentColor;
}

.sidebar-link > span {
  display: -webkit-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.sidebar-menu-arrow {
  position: absolute;
  top: 8px;
  right: 6px;
  color: var(--sidebar-muted);
  font-size: 8px;
  font-weight: 400;
  opacity: 0.68;
  transition: transform 160ms ease, color 160ms ease;
}

.has_sub.is-open > .sidebar-submenu-toggle .sidebar-menu-arrow {
  color: var(--sidebar-accent);
  transform: rotate(90deg);
}

.sidebar-submenu,
#sidebar-menu ul.sidebar-submenu {
  display: none;
  margin: 0;
  padding: 0;
}

.has-empty-submenu .sidebar-menu-arrow {
  display: none;
}

@media (min-width: 992px) {
  #wrapper.sidebar-compact .side-menu.left,
  #wrapper.sidebar-compact .side-menu-sm,
  #wrapper.sidebar-compact .side-menu {
    width: var(--sidebar-width) !important;
  }

  #wrapper.sidebar-hidden .side-menu.left {
    transform: translateX(-100%);
  }

  #wrapper.sidebar-hidden .topbar .topbar-left,
  #wrapper.sidebar-hidden .topbar .topbar-left-sm {
    width: 0 !important;
    overflow: hidden;
  }

  #wrapper.sidebar-hidden .topbar .topbar-left-sm + .navbar-custom,
  #wrapper.sidebar-hidden .navbar-custom,
  #wrapper.sidebar-hidden .content-page,
  #wrapper.sidebar-hidden .side-menu-sm + .content-page {
    margin-left: 0 !important;
  }

  .content-page,
  .side-menu-sm + .content-page {
    margin-left: var(--sidebar-width) !important;
    transition: margin-left var(--sidebar-transition-duration) ease;
  }

  .sidebar-submenu-floating {
    position: fixed;
    top: var(--sidebar-panel-top, calc(var(--topbar-height) + 8px));
    left: var(--sidebar-width);
    z-index: 1200;
    display: block !important;
    width: var(--sidebar-panel-width) !important;
    max-height: calc(100vh - var(--sidebar-panel-top, var(--topbar-height)) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 10px;
    border: 1px solid var(--sidebar-border);
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.13);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  .sidebar-submenu-floating::before {
    content: attr(data-submenu-title);
    display: block;
    padding: 4px 8px 10px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
  }

  .sidebar-submenu-floating.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .sidebar-submenu-link,
  .sidebar-submenu-floating a.sidebar-submenu-link,
  #sidebar-menu ul ul a.sidebar-submenu-link {
    display: block;
    min-height: 40px;
    padding: 10px 12px;
    border-left: 3px solid transparent;
    border-radius: 7px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  }

  .sidebar-submenu-link:hover,
  .sidebar-submenu-link:focus,
  .sidebar-submenu-floating a.sidebar-submenu-link:hover,
  .sidebar-submenu-floating a.sidebar-submenu-link:focus {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-accent);
  }

  .sidebar-submenu-link.active,
  .sidebar-submenu-link[aria-current="page"],
  .sidebar-submenu-floating a.sidebar-submenu-link.active,
  .sidebar-submenu-floating a.sidebar-submenu-link[aria-current="page"],
  #sidebar-menu ul ul li.active a.sidebar-submenu-link {
    background: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-accent);
    color: var(--sidebar-accent);
    font-weight: 700;
  }
}

.sidebar-mobile-header {
  display: none;
}

.sidebar-overlay {
  position: fixed;
  top: var(--topbar-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  visibility: hidden;
  background: rgba(15, 23, 42, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sidebar-transition-duration) ease, visibility var(--sidebar-transition-duration) ease;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .sidebar-link,
  #sidebar-menu > ul > li > a.sidebar-link,
  #sidebar-menu .sidebar-submenu-toggle {
    min-height: 64px;
    font-size: 10.8px;
  }

  .sidebar-icon,
  #sidebar-menu svg.sidebar-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 991px) {
  .topbar .topbar-left,
  .topbar .topbar-left-sm {
    width: var(--sidebar-width) !important;
  }

  .topbar .topbar-left-sm + .navbar-custom,
  .navbar-custom {
    margin-left: var(--sidebar-width) !important;
  }

  .topbar-logo-frame {
    padding: 0 7px;
  }

  .topbar-logo-image {
    max-width: 62px;
    max-height: 40px;
  }

  .side-menu,
  .side-menu-sm,
  .side-menu.left,
  body.fixed-left .side-menu.left {
    width: var(--sidebar-mobile-width) !important;
    min-width: var(--sidebar-mobile-min-width);
    height: calc(100vh - var(--topbar-height));
    transform: translateX(-105%);
    pointer-events: none;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 12px 0 28px rgba(15, 23, 42, 0.18);
  }

  .side-menu.left {
    z-index: 1050;
    background: #ffffff;
  }

  .sidebar-inner.slimscrollleft,
  .sidebar-nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .sidebar-mobile-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--sidebar-border);
    background: #ffffff;
  }

  .sidebar-mobile-logo {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 42px;
    object-fit: contain;
  }

  .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    cursor: pointer;
  }

  .sidebar-close:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-accent);
  }

  #sidebar-menu {
    padding: 10px 10px calc(18px + env(safe-area-inset-bottom));
  }

  .sidebar-menu-list {
    gap: 3px;
  }

  .sidebar-link,
  #sidebar-menu > ul > li > a.sidebar-link,
  #sidebar-menu .sidebar-submenu-toggle {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 50px;
    padding: 11px 12px;
    border-left-width: 3px;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }

  .sidebar-link > span {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: initial;
  }

  .sidebar-icon,
  #sidebar-menu svg.sidebar-icon {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
  }

  .sidebar-menu-arrow {
    top: 50%;
    right: 12px;
    font-size: 10px;
    transform: translateY(-50%);
  }

  .has_sub.is-open > .sidebar-submenu-toggle .sidebar-menu-arrow {
    transform: translateY(-50%) rotate(90deg);
  }

  .sidebar-submenu,
  #sidebar-menu ul.sidebar-submenu {
    display: none;
    margin: 2px 0 6px;
    padding: 0;
    background: transparent;
  }

  .has_sub.is-open > .sidebar-submenu {
    display: block;
  }

  .sidebar-submenu::before {
    display: none;
  }

  .sidebar-submenu-link,
  #sidebar-menu ul ul a.sidebar-submenu-link {
    display: block;
    min-height: 44px;
    padding: 10px 12px 10px 46px;
    border-left: 3px solid transparent;
    border-radius: 7px;
    color: #4b5563;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .sidebar-submenu-link:hover,
  .sidebar-submenu-link:focus,
  .sidebar-submenu-link.active,
  .sidebar-submenu-link[aria-current="page"],
  #sidebar-menu ul ul li.active a.sidebar-submenu-link {
    background: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-accent);
    color: var(--sidebar-accent);
  }

  .content-page,
  .side-menu-sm + .content-page,
  #wrapper.sidebar-compact .content-page,
  #wrapper.sidebar-hidden .content-page {
    margin-left: 0 !important;
  }

  #wrapper.sidebar-mobile-open .content-page {
    position: relative;
    z-index: 0;
  }

  #wrapper.sidebar-mobile-open .side-menu.left {
    transform: translateX(0);
    pointer-events: auto;
  }

  #wrapper.sidebar-mobile-open .side-menu.left a,
  #wrapper.sidebar-mobile-open .side-menu.left button,
  #wrapper.sidebar-mobile-open .side-menu.left [role="button"] {
    pointer-events: auto;
  }

  #wrapper.sidebar-mobile-open .sidebar-overlay {
    visibility: visible;
    left: var(--sidebar-mobile-width);
    opacity: 1;
    z-index: 1040;
    pointer-events: auto;
  }
}

@media (max-width: 430px) {
  .topbar .topbar-left,
  .topbar .topbar-left-sm {
    width: var(--topbar-mobile-logo-width) !important;
  }

  .topbar .topbar-left-sm + .navbar-custom,
  .navbar-custom {
    margin-left: var(--topbar-mobile-logo-width) !important;
  }

  .topbar-logo-image {
    max-width: 50px;
  }

  .button-menu-mobile {
    width: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-menu.left,
  .content-page,
  .navbar-custom,
  .topbar .topbar-left,
  .sidebar-overlay,
  .sidebar-link,
  .sidebar-submenu,
  .sidebar-submenu-link,
  .sidebar-menu-arrow,
  .button-menu-mobile {
    transition: none !important;
  }
}

.sidebar-brand-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 767px) {

    #myTab {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        white-space: nowrap;
        scrollbar-width: none;
    }

    #myTab::-webkit-scrollbar {
        display: none;
    }

    #myTab > li {
        float: none !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }

    #myTab > li > a {
        white-space: nowrap;
    }
}

@media (max-width: 991px) {

    .topbar .topbar-left,
    .topbar .topbar-left-sm {
        width: var(--topbar-mobile-logo-width) !important;
        min-width: var(--topbar-mobile-logo-width) !important;
        max-width: var(--topbar-mobile-logo-width) !important;
    }

    .topbar .topbar-left-sm + .navbar-custom,
    .navbar-custom {
        margin-left: var(--topbar-mobile-logo-width) !important;
        width: calc(100% - var(--topbar-mobile-logo-width)) !important;
    }

    .side-menu,
    .side-menu-sm,
    .side-menu.left,
    body.fixed-left .side-menu.left {
        margin-left: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: var(--sidebar-mobile-width) !important;
        max-width: var(--sidebar-mobile-width) !important;
        transform: translateX(-105%);
    }

    #wrapper.sidebar-mobile-open .side-menu.left {
        margin-left: 0 !important;
        transform: translateX(0);
    }

    .content-page,
    .side-menu-sm + .content-page,
    #wrapper.sidebar-compact .content-page,
    #wrapper.sidebar-hidden .content-page {
        margin-left: 0 !important;
    }
}

@media (max-width: 991px) {

    .side-menu.left,
    body.fixed-left .side-menu.left,
    #wrapper.sidebar-mobile-open .side-menu.left {
        position: fixed !important;
        z-index: 1060 !important;
        pointer-events: auto !important;
    }

    #wrapper.sidebar-mobile-open .sidebar-overlay {
        z-index: 1050 !important;
        left: var(--sidebar-mobile-width) !important;
        pointer-events: auto !important;
    }

    #wrapper.sidebar-mobile-open .sidebar-inner,
    #wrapper.sidebar-mobile-open .sidebar-nav,
    #wrapper.sidebar-mobile-open #sidebar-menu {
        position: relative;
        z-index: 1061;
        pointer-events: auto !important;
    }

    #wrapper.sidebar-mobile-open .sidebar-link,
    #wrapper.sidebar-mobile-open .sidebar-submenu-toggle,
    #wrapper.sidebar-mobile-open .sidebar-submenu-link,
    #wrapper.sidebar-mobile-open .sidebar-close {
        pointer-events: auto !important;
    }
}

@media (max-width: 991px) {

    .sidebar-inner.slimscrollleft,
    .sidebar-nav {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}