@font-face {
    font-family: 'digital';
    src: url('../fonts/DS-DIGIB.TTF') format('truetype')
  }

body    { font-family: Graphik,Helvetica,Arial,sans_serif; }

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

.coluna-filtrada {
    background-color: #A4FFFF !important; /* um verdinho leve */
    font-weight: bold;
    display: inline-flex; /* mantém tudo na mesma linha */
    align-items: center;
}

    .coluna-filtrada::after {
        font-family: 'ui-grid'; /* importante */
        content: '\c35f'; /* código do ícone */
        font-size: 14px;
        margin-right: 25px;
        display: inline-block; /* garante que fique ao lado */
        vertical-align: middle;
    }

.menuItem.selected      { font-weight: bold; }
.td-gvp {
    padding: 4px !important;
}
.tableFixHead td {
    line-height: 30px !important;
}
.tableFixHead           { overflow-y: auto; border: solid 1px #e5e5e5; }
.tableFixHead thead th  { position: sticky; top: 0; background-color: #fff; }
.linha_red              { background-color: #f1b8b8 !important; }
.linha_red td           { background-color: #f1b8b8 !important; }
.linha_check            { background-color: red !important; }
.linha_check td         { background-color: red !important; }

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { top: 15px !important; }
.dropdown-menu.inner > .active > a {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #7a878e !important;
}

.note-editor .note-editing-area .note-editable {
    word-break: break-word !important;
}

#fullLoader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100000;
    opacity: 0.5;
}

.forcaShow {
    display: inline-table !important;
}

#navbar {
    z-index: 1001;
}
#mainnav-container { z-index: 1000; }

.highcharts-credits   { display: none !important; }
.highcharts-exporting-group   { display: none !important; }

.selectProdutoOpo:hover { cursor: pointer; }
.cursorPointer { cursor: pointer; }

.navbar-brand{
    background-repeat: no-repeat;
    background-position: center;
}

.mainnav-sm .list-divider
{
    display:none;
}

.mainnav-sm .navbar-brand   { background-repeat: no-repeat; background-position: center; background-size: 50px; }
.mainnav-lg .navbar-brand   { background-repeat: no-repeat; background-position: center; background-size: 90px; }

.tooltip { position: fixed; }

.rowred { background-color: #F0685E !important; color: #fff !important; }
.rowred a:not(.menuItem) { color: #fff !important; }

.rowyellow { background-color: #fffec8  !important; }
.rowgreen { background-color: #c3f1b8 !important; }

blockquote { overflow: auto; }

.chat-body .media-body > div > span, .chat-body .media-body > div > p {
    border-radius: 13px !important;
}

/* Mensagens automaticas do bot: mesmo lado do operador, porem em cinza neutro
   para nao competir visualmente com as falas humanas. */
.chat-body .chat-bot .media-body > div > p,
.chat-body .chat-bot .media-body > div > span {
    background-color: #eceff1 !important;
    color: #5a6a7a !important;
}

.chat-body .chat-bot .media-body > div > p small {
    color: #8b98a5;
}

/* Marcadores de evento da conversa (fila de espera / inicio do atendimento).
   O tema aplica 'background-color:#fff' em .chat-meta-day .badge, por isso o !important. */
.chat-body .chat-meta-day .badge.badge-evento-fila {
    background-color: #f59e0b !important;
    color: #fff !important;
}

.chat-body .chat-meta-day .badge.badge-evento-atendimento {
    background-color: #10b981 !important;
    color: #fff !important;
}

.chat-body .chat-meta-day .badge.badge-evento-fila > i,
.chat-body .chat-meta-day .badge.badge-evento-atendimento > i {
    margin-right: 4px;
}

/* O .badge do Bootstrap 3 vem com white-space:nowrap, o que fazia o marcador
   estourar a largura do painel da conversa. Aqui ele passa a quebrar em varias
   linhas e fica limitado ao espaco disponivel dentro do flex do .chat-meta-day. */
.chat-body .chat-meta-day .badge.badge-evento-fila,
.chat-body .chat-meta-day .badge.badge-evento-atendimento {
    white-space: normal;
    text-align: center;
    line-height: 1.45;
    padding: 5px 12px;
    border-radius: 11px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 85%;
    margin: 0 8px;
}

/* Reduz o respiro vertical padrao (40px) do divisor quando ele carrega um evento. */
.chat-body .chat-meta-day.chat-meta-evento {
    margin: 22px 0;
}

/* -- Horario da mensagem: hover / clique mostra data completa e tempos de resposta -- */
.chat-body .msg-hora {
    cursor: pointer;
    opacity: 1;
    -webkit-user-select: none;
    user-select: none;
}

.chat-body .msg-hora:hover {
    text-decoration: underline;
}

/* Resposta acima do limiar configurado no controller (LIMITE_RESPOSTA_LENTA). */
.chat-body .msg-hora-lenta {
    font-weight: 600;
}

.chat-body .chat-me .msg-hora-lenta {
    color: #ffd75e;
}

.chat-body .chat-user .msg-hora-lenta,
.chat-body .chat-bot .msg-hora-lenta {
    color: #d97706;
}

.chat-body .msg-hora-lenta > i {
    margin-right: 3px;
}

/* Bloco de detalhe aberto no hover ou fixado no clique. */
.chat-body .msg-hora-detalhe {
    font-size: 0.78em !important;
    line-height: 1.45;
    margin-top: 4px !important;
    padding-top: 4px;
    opacity: 0.95 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.chat-body .chat-user .msg-hora-detalhe,
.chat-body .chat-bot .msg-hora-detalhe {
    border-top-color: rgba(0, 0, 0, 0.12);
}

.spanMessage {
    text-align: left;
    display: block;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

#remetenteMessage {
    font-weight: bold;
    margin-bottom: 5px;
    margin-left: 20px;
    color: #555;
}

#contextoMessage {
    margin-left: 20px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e9e9e9;
    border-radius: 5px;
    border-left: 3px solid #ccc;
    font-style: italic;
}

#remetenteMessage, #contextoMessage {
    position: relative;
}

#contextoMessage::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #e9e9e9;
}



/* -- LOADERS -- */

#loaderAction { position: fixed; top: 0; right: 0; width: 300px; height: 300px; background: #ed4e6e; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); transform: translateX(100%) translateY(-100%) rotate(45deg); pointer-events: none; z-index: 10001; }
#loaderAction.la-animate { -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); transform: translateX(50%) translateY(-50%) rotate(45deg); }
#loaderAction::before, #loaderAction::after { position: absolute; bottom: 30px; left: 50%; display: block; border: 5px solid #fff; border-radius: 50%; content: ''; }
#loaderAction::before { margin-left: -40px; width: 80px; height: 80px; border-right-color: #bb344f; border-left-color: #bb344f; -webkit-animation: rotation 3s linear infinite; animation: rotation 3s linear infinite; }
#loaderAction::after { bottom: 50px; margin-left: -20px; width: 40px; height: 40px; border-top-color: #bb344f; border-bottom-color: #bb344f; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; }

@-webkit-keyframes rotation {
    0%      { -webkit-transform: rotate(0deg); }
    50%     { -webkit-transform: rotate(180deg); }
    100%    { -webkit-transform: rotate(360deg); }
}

@keyframes rotation {
    0%      { transform: rotate(0deg); }
    50%     { transform: rotate(180deg); }
    100%    { transform: rotate(360deg); }
}

#loaderAction2 { position: fixed; top: 0; right: 0; width: 300px; height: 300px; background: #ed4e6e; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); transform: translateX(100%) translateY(-100%) rotate(45deg); pointer-events: none; z-index: 10001; }
#loaderAction2.la-animate { -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); transform: translateX(50%) translateY(-50%) rotate(45deg); }
#loaderAction2::before, #loaderAction2::after { position: absolute; bottom: 30px; left: 50%; display: block; border: 5px solid #fff; border-radius: 50%; content: ''; }
#loaderAction2::before { margin-left: -40px; width: 80px; height: 80px; border-right-color: #bb344f; border-left-color: #bb344f; -webkit-animation: rotation 3s linear infinite; animation: rotation 3s linear infinite; }
#loaderAction2::after { bottom: 50px; margin-left: -20px; width: 40px; height: 40px; border-top-color: #bb344f; border-bottom-color: #bb344f; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; }

@-webkit-keyframes rotation {
    0%      { -webkit-transform: rotate(0deg); }
    50%     { -webkit-transform: rotate(180deg); }
    100%    { -webkit-transform: rotate(360deg); }
}

@keyframes rotation {
    0%      { transform: rotate(0deg); }
    50%     { transform: rotate(180deg); }
    100%    { transform: rotate(360deg); }
}

.hidephone
{
    transform: translate(100%, 0px);
}



/* KEYBOARD PHONE CSS */


  #holdCalls
  {
      /* background: url(https://i.redd.it/qwd83nc4xxf41.jpg); */
      transition-duration: 0.5s;
  }
  .phoneCommands
  {
      /*margin-top: 8px;
      width: 56px;
      top: 0px;
      right: 4px;
      position: absolute;*/
      margin-top: 10px;
  }

  .cmd-phone
  {
    color: #FFF;
    width: 45%;
    height: 56px;
    padding-left: 15px;
    border: none;
    padding-right: 17px;
    font-size: 35px;
    padding-top: 0px;
    text-align: center;
    /* border-radius: 5px 5px 5px 5px; */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    cursor: pointer;
  }

  .phone-close
  {
    bottom: -100px;
    left: 0px;
  }
  .cmd-phone.large
  {
      width:92%;
      margin-top: 4px;
      font-size: 1.8em;
  }
  #cancelCall
  {
    color:white;
    padding-top: 6px;
    padding-left: 15px;
    font-size: 1.5em;
    background-color:tomato;
    margin-left: 12px;
  }
  #phoneAwnser
  {
      color:white;
      background-color:green;
      font-size: 1.5em;
      padding-top: 6px;
      padding-left: 15px;

  }
  #phoneReject
  {
    color:white;
      padding-top: 6px;
      padding-left: 15px;
      font-size: 1.5em;
      background-color:tomato;
  }
  #phoneAwnser:hover, #phoneReject:hover
  {
      color:white;
  }

  .calleron
  {
    background-color: #389400;
  }
  .calleroff
  {
    background-color: gray;
  }
  #caller
  {

  }

  #close-phone
  {

    background-color: darkgray;

  }
  #clear-phone
  {

    background-color: gray;

  }

  .tastierino{
    padding: 10px;
    border-radius: 10px;
  }

  .tastierino{
    background-color: transparent;
    position: relative;
    top: 120px;
    width: 100%;
    text-align: center;
    left: 50%;
    height: 235px;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    box-shadow: 10px 10px 20px -2px rgba(0,0,0,0.1);
}
  .tasti{
    text-align: center;
  }
.lblCaller
{
    font-family: digital;
    font-size: 2em;
    color: gray;
    text-align: center;
    margin-left: 10px;
}
  .phone-visor
  {
      font-family: digital;
      margin-top: 20px;
    padding-left: 10px;
    font-size: 3em;
    font-family: 'digital';
    width: 100%;
    height: 40px;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border: 0px solid #B8B8B8;
  }

  .phone-visor2
  {
      font-family: digital;
      margin-top: 20px;
      text-align: center;
    padding-left: 10px;
    font-size: 3em;
    font-family: 'digital';
    width: 100%;
    height: 40px;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border: 0px solid #B8B8B8;
  }
  .num{
    position:relative;
    width: 40px;
    height: 40px;
    display: inline-block;
    background: white;
    color: gray;
    font-family: helvetica;
    margin:5px;
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    border-radius: 5px;
  }

  .num:hover{
    opacity: 0.8;
  }

  .num:active{
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2)
  }

  .num p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    font-size: 25px;
    cursor: pointer;

  }
  .CallerPicture
  {
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    margin-top: 24px;
  }
  .activeCallerInfo
  {
      text-align: center;
  }
.muted{
    background-color: steelblue;
    height: 34px;
    border-radius: 3px;
    width: 52px;
    display: inherit;
    margin-left: 27px;
    margin-top: 8px;
}

  .muted i{
    font-size: 24px;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: -10px;
  }
  .TimerB
  {
    /*font-family: digital;
    font-size: 34px;
    color: greenyellow;
    text-align: center;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    background-color: black;
    padding: 3px;
    width: 80% !important;*/

    border: 1px solid darkslategray;
    font-family: digital;
    font-size: 22px;
    color: greenyellow;
    text-align: center;
    display: block;
    position: relative;
    margin-top: 10px;
    float: right;
    border-radius: 4px;
    background-color: black;
    padding: 0px;
    padding-top: 5px;
    height: 40px;
    width: 48% !important;
  }
  .callcliente
  {
    text-align: center;
    padding-top: 12px;
    color:gray;
    text-transform: uppercase;
  }
  .DigitalTimer
  {
      padding: 20px;
  }
  label{
    /* mix-blend-mode: screen !important; */
  }






 #holdCalls.nav-tabs>li.active>a, #holdCalls.nav-tabs>li.active>a:hover, #holdCalls.nav-tabs>li.active>a:focus {
    color: whitesmoke !important;
    border-color: transparent;
    background-color: black;
    border-radius: 0px;
    cursor:pointer;
    border-bottom: 1px solid gray;
  }


  ul.historicoChamadas
  {
    padding: 0px;
    list-style: none;
  }

  ul.chamadas
  {
    padding: 0px;
    left: 0px;
    list-style: none;
    margin: 0px;
    position: relative;
  }

.call_atendida
{
  color:steelblue;
}
.call_n_atendida
{
  color:tomato;
}

  .lichamadas_major
  {
    min-height: 187px !important;
    /* background-color:red !important; */
  }


  .lichamadas_minor
  {
    /* background-color: green !important; */
    min-height: 144px !important;
  }

  .chamadaTransferida{
    background-color: #230559 !important
  }

ul.chamadas li{
  background-color: black;
    padding: 5px;
    position:relative;
    border-radius: 5px;
    margin-bottom: 2px;
}
.digitalnumber
{
  font-family: 'digital';
    position: absolute;
    font-size: 22px;
    line-height: 24px;
    position:relative;
    top:5px;
    top: 1px;
}
  .phone-cmd
  {
    font-size:30px !important;
    cursor:pointer;
    border: 1px solid darkslategray;
    padding: 4px;
    height:40px;
    text-align: center;
    margin-right: 2px;
    border-radius: 5px;
    float:left;
    width:40px;
    padding-top: 4px
  }
  .digitalBlock .phone-cmd{
    margin-left: 10px !important;

  }
  .hidden
  {
    display:none !important;
  }
  .box-chamadas
  {
    height: 100%;
    overflow-y: scroll;
  }

  .box-chamadas::-webkit-scrollbar {
    width:10px;
}
.box-chamadas::-webkit-scrollbar-track {
    background: white;

  }
.box-chamadas::-webkit-scrollbar-thumb {
    background: #7CB237;
    border-radius: 10px;
  }
.idcaller
{
  background-color: greenyellow;
  height: 25px;
  /* left: 0px; */
  /* padding: 5px; */
  position: absolute;
  /* float: right; */
  right: 0px;
  margin-top: -5px;
  height: 100%;
  padding-left: 9px;
  padding-right: 8px;
  padding-top: 4px;
  width: 25px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  color: black;
}


.greendigital
{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2d2c25+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#52b152+0,83c783+6,2d2c25+11,002400+63,002400+86,008a00+93,005700+99 */
background: #52b152; /* Old browsers */
background: -moz-linear-gradient(top,  #52b152 0%, #83c783 6%, #2d2c25 11%, #002400 63%, #002400 86%, #008a00 93%, #005700 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #52b152 0%,#83c783 6%,#2d2c25 11%,#002400 63%,#002400 86%,#008a00 93%,#005700 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #52b152 0%,#83c783 6%,#2d2c25 11%,#002400 63%,#002400 86%,#008a00 93%,#005700 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52b152', endColorstr='#005700',GradientType=0 ); /* IE6-9 */

}
.digitalBlock
{
  margin-top: 32px;
    position: relative;
}
.historyLi
{
  border: 1px solid darkgray;border-radius: 7px; margin-bottom: 5px;
}

.recall
{
  float: right;
    /* margin-right: -11px; */
    height: 100%;
    top: -6px;
    position: absolute;
    border: none;
    right: 0px;
    color: steelblue;
    cursor: pointer;
}

.forward
{
  font-size: 25px !important;
  cursor: pointer;
  color: steelblue;
  margin-right: 12px;
  padding-top: 7px;
}

.dialogCega {
    background-color: dimgray;
    border-top: 4px solid black;
    position: absolute;
    bottom: 0px;
    padding: 10px;
    z-index: 100;
    height: 350px;
    width: 100%;
    transition-duration: 0.4s;
    transform: translate(0px, 240px);
}
.navfilas a
{
  background-color: transparent !important; color:gray;
}
.navfilas  .navfilas a:active, .nav-tabs.navfilas>li.active>a
{
  background-color: transparent !important; color:black !important;
}

.nav-item.active
{
  background-color: whitesmoke !important; color:black !important;
}

.FilasTab .btn-link.collapsed {
  color:white;
  background-color: gray;
}
.FilasTab .btn-link {
  color:white;
  background-color: black;
}

.ListUsers
{
  list-style: none;
  padding: 0px;
}
.ListUsers li
{
  margin-bottom: 5px;
}
.CardUserShort
{
  min-height: 50px;
  background-color: white;
  padding: 6px;
  border:1px solid steelblue;
  border-radius: 5px;
}
.CardUserShort i
{
  cursor:pointer;
}
.SelectedQueue
{
  background-color: black;
  color:white !important;
  text-decoration: none;
}
.SelectedQueue a
{
  color:white !important;
  text-decoration: none;
}

.toggle-switch:checked+label:before
{
  transition: none !important;
}

.pull-right
{
   /* position:absolute; */
}
.toggle-switch+label:after
{
  /* background-color: #9d6060 !important; */
}
.toggle-switch+label:before{
  /* border-color:#9d6060; */
}

/* 

    .panel-body .col-md-4
    {
      padding-left: 0px;
    }
    .panel-body .col-md-12
    {
      padding-left: 0px !important;
    }
    .panel-body .col-md-6
    {
      padding-left: 0px !important;
    }
    .panel-body .col-md-3
    {
      padding-left: 0px !important;
    }
*/

.audioConfigBox
{
  padding: 10px;
}
.audioConfigBox select
{
  width:100%;
  margin-bottom: 10px;
}

.audioConfigBox .select:before
{
  top:60% !important;
}

.form-control       { border-color: #294F75 !important; }
.chosen-single      { border-color: #294F75 !important; }

.hasRequired        { border: solid 1px red !important; }
.hasRequiredLabel   { color: red !important; }




.rte-wrapper {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    background: #f8f8f8;
    position: relative;
    flex-wrap: wrap;
}

    .rte-toolbar button {
        border: 1px solid #ccc;
        background: #fff;
        padding: 4px 8px;
        cursor: pointer;
        border-radius: 4px;
    }

        .rte-toolbar button:hover {
            background: #f2f2f2;
        }

.rte-editor {
    min-height: 60px;
    padding: 10px;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.rte-emoji-group {
    position: relative;
}

.rte-emoji-panel {
    position: absolute;
    top: 36px;
    left: 0;
    width: 320px;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}

.rte-emoji-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}



.empresa-autocomplete {
    position: relative;
    width: 100%;
}

.empresa-autocomplete-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5f6b7a;
}

.empresa-autocomplete-box {
    position: relative;
    width: 100%;
}

.empresa-autocomplete-input-wrap {
    position: relative;
}

.empresa-autocomplete-input {
    width: 100%;
    height: 38px;
    padding-right: 38px;
    border: 1px solid #cfd6df;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    background: #fff;
}

    .empresa-autocomplete-input:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.10);
        outline: none;
    }

.empresa-autocomplete-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #7b8794;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
}

    .empresa-autocomplete-clear:hover {
        color: #2f3a45;
    }

.empresa-autocomplete-list {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

    .empresa-autocomplete-list.open-up {
        top: auto;
        bottom: calc(100% + 6px);
    }

.empresa-autocomplete-item,
.empresa-autocomplete-empty {
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.35;
}

.empresa-autocomplete-item {
    cursor: pointer;
    color: #334155;
    transition: background .15s ease, color .15s ease;
}

    .empresa-autocomplete-item:hover {
        background: #f8fafc;
        color: #0f172a;
    }

.empresa-autocomplete-item-main {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empresa-autocomplete-empty {
    color: #94a3b8;
    cursor: default;
}

.empresa-autocomplete-add {
    border-top: 1px solid #eef2f7;
    color: #2563eb;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .empresa-autocomplete-add:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

.empresa-autocomplete-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dbeafe;
    font-size: 14px;
    font-weight: 700;
}




.contato-autocomplete {
    position: relative;
    width: 100%;
}

.contato-autocomplete-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5f6b7a;
}

.contato-autocomplete-box {
    position: relative;
    width: 100%;
}

.contato-autocomplete-input-wrap {
    position: relative;
}

.contato-autocomplete-input {
    width: 100%;
    height: 38px;
    padding-right: 38px;
    border: 1px solid #cfd6df;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    background: #fff;
}

    .contato-autocomplete-input:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.10);
        outline: none;
    }

.contato-autocomplete-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #7b8794;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
}

    .contato-autocomplete-clear:hover {
        color: #2f3a45;
    }

.contato-autocomplete-list {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

    .contato-autocomplete-list.open-up {
        top: auto;
        bottom: calc(100% + 6px);
    }

.contato-autocomplete-item,
.contato-autocomplete-empty {
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.35;
}

.contato-autocomplete-item {
    cursor: pointer;
    color: #334155;
    transition: background .15s ease, color .15s ease;
}

    .contato-autocomplete-item:hover {
        background: #f8fafc;
        color: #0f172a;
    }

.contato-autocomplete-item-main {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contato-autocomplete-empty {
    color: #94a3b8;
    cursor: default;
}

.contato-autocomplete-add {
    border-top: 1px solid #eef2f7;
    color: #2563eb;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .contato-autocomplete-add:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

.contato-autocomplete-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dbeafe;
    font-size: 14px;
    font-weight: 700;
}


.date-time-range {
    width: 100%;
}

.date-time-range-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.date-time-range-field {
    flex: 1;
    min-width: 220px;
}

.date-time-range-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5f6b7a;
}

.date-time-range-separator {
    align-self: center;
    color: #7b8794;
    font-size: 13px;
    white-space: nowrap;
}

.date-time-range-error {
    margin-top: 6px;
    font-size: 12px;
    color: #c62828;
}

.date-time-range-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: #5f6b7a;
    cursor: pointer;
}

    .date-time-range-checkbox input {
        margin: 0;
    }