/* here you can put your own css to customize and override the theme */
.feeds li .col2 {
  float: left;
  width: 100px;
  margin-left: -100px;
}

.portlet.light {
  padding: 10px 10px 15px 10px;
}

.badge-lg {
  height: 22px;
  padding: 5px 8px 5px 8px;
  font-size: 12px;
}

.vertical-align {
  display: flex;
  align-items: center;
}

tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { text-decoration: underline; }

#tb_historico_propostas thead th {
  font-weight: bold;
}

#tb_historico_propostas .tr_proposta_usuario {
  background-color: #f3f3f3;
}

#tb_historico_propostas .tr_proposta_aceita,
#tb_historico_propostas .tr_proposta_aceita:hover {
  background-color: #004080;
  color: #fff;
  font-weight: bold;
}

#tb_historico_propostas .tr_proposta_cancelada {
  background-color: #cc0000;
  opacity: 0.4;
  color: #fff;
  font-weight: bold;
  transition: opacity linear 300ms;
}
#tb_historico_propostas .tr_proposta_cancelada:hover {
  background-color: #cc0000;
  opacity: 1;
  color: #fff;
  font-weight: bold;
}

.tr_cancelada {
  background-color: #cc0000!important;
  opacity: 0.4;
  color: #fff;
  font-weight: bold;
  transition: opacity linear 300ms;
}
.tr_cancelada:hover {
  background-color: #cc0000!important;
  opacity: 1;
  color: #fff;
  font-weight: bold;
}

::-webkit-input-placeholder, .font-color-placeholder { /* WebKit, Blink, Edge */
  color: #787878 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #787878 !important;
  opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #787878 !important;
  opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #787878 !important;
}

tr.clickable-row td a {
  color: black;
}


form[name="disputa_filter"] .form-group, form[name="atendimento_filter"] .form-group, form[name="agendamento_filter"] .form-group{
  width: 100%;
}
form[name="disputa_filter"] input,
form[name="disputa_filter"] select,
form[name="atendimento_filter"] input,
form[name="atendimento_filter"] select,
form[name="agendamento_filter"] input,
form[name="agendamento_filter"] select {
  width: 100% !important;
}
.completeSearch, .simpleSearch,
form[name="agendamento_filter"] .vertical-align {
  padding-bottom: 5px;
}
.completeSearch>.col-md-3, .simpleSearch>.col-md-3 {
  padding: 0!important;
}
form[name="disputa_filter"] > .form-group:has(select[style*="display: none"]) {
  display: none;
}

/*
.page-header.navbar .menu-toggler {
  background-image: url(../assets/admin/layout/img/sidebar_toggler_icon_default.png);
}
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler, .page-sidebar .sidebar-toggler {
  background: url(../assets/admin/layout/img/sidebar_inline_toggler_icon_default.jpg);
}
*/

.portlet.sumario {
   margin-bottom: 0px;
}

.portlet.sumario > .portlet-title {
  margin-bottom: 10px;
}

.download-termo-dropdown {
  position: static;
}

.download-termo-dropdown > .dropdown-menu {
  left: 15px;
  right: 15px;
  min-width: 0;
  width: auto;
}

.download-termo-dropdown > .dropdown-menu > li > a {
  white-space: normal;
  overflow-wrap: anywhere;
}


#dashboard-gerencial .portlet-body {
  overflow: hidden;
}


table.fixed-header thead tr th {
  background-color: #FFFFFF;
  position: sticky;
  z-index: 5;
  top: 0;
}

.drag-scrolling.active * {
  cursor: move;
  cursor: grabbing!important;
}

/* estilos para padronizar select2 com bootstrap */
.select2-container--bootstrap .select2-selection, .select2-container .select2-choices {
  border-color: #e5e5e5!important;
}
.select2-container--bootstrap .select2-selection, .select2-container .select2-choice, .typeahead-input-valor {
  border-color: #e5e5e5!important;
  min-height: 34px !important;
}
.select2-container .select2-choice {
  background-image: none!important;
}
.select2-container .select2-choice .select2-arrow {
    background-image: none !important;
  background-color: #FFF!important;
}

.select2-results li.select2-result-with-children > .select2-result-label {
  color: #777777!important;
}
.select2-results .select2-highlighted {
  background-color: #337ab7!important;
}

.select2-search input {
  margin: 0!important;
}
@media (min-width: 768px) {
  .form-inline .select2-container.form-control {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .date-filter-right {
    padding-left: 15px!important;
  }
  .date-filter-left {
    padding-right: 15px!important;
  }
}

.portlet.box.gray {
  border: 1px solid #c1c1c1;
}
.portlet > .portlet-body.gray, .portlet.gray {
  background-color: #c1c1c1;
}
.portlet.box.gray > .portlet-title {
  background-color: #c1c1c1;
}

.task-done {
  text-decoration: line-through;
}
.input-icon.right > i {
  right: 26px;
}
@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}
div.form-group.has-error input, div.form-group.has-error textarea, div.form-group.has-error select {
  animation: shake 0.2s ease-in-out 0s 2;
}


#table-import-queue-report {
 margin-bottom: 8px;
}
#table-import-queue-report tr:nth-child(2) {
  background-color: #fae8e8;
}
#table-import-queue-report td:nth-child(2) {
  font-weight: bold;
}


.typeahead {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}
.twitter-typeahead{
  width: 100%;
}
.typeahead {
  background-color: #fff;
}
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
  color: #999
}
.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}
.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}
.tt-suggestion p {
  margin: 0;
}

.typeahead-input-valor {
  min-height: 20px;
}

.inner-table {
  margin-left: 5px;
  background-color: #e8e8e8 !important;
}
.inner-table thead tr th, .inner-table tbody tr td {
  font-size: 12px;
}
.inner-table>thead>tr>th {
  border: none!important;
}

/* Estilos para botões de ação desabilitados na visualização de disputas */
.btn-action-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.dropdown-menu li.disabled a {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  color: #999 !important;
}

.dropdown-menu li.disabled a:hover {
  background-color: transparent !important;
  color: #999 !important;
}

.deprecated-field {
    opacity: 0.5;
}
.deprecated-field + label {
    opacity: 0.5;
}
.deprecated-field:hover {
    opacity: 1;
}

.w-100 {
    width: 100% !important;
}

/* Movido de themes/brand.css: geometria não entra na pele. */
.page-toolbar > .btn-group {
    margin-bottom: 0;
}

/* Select de campanha da barra (dashboards, relatórios): sem teto ele toma a largura do nome mais
   longo e empurra a barra para uma segunda linha já em 1280px. A lista aberta mostra o nome inteiro. */
.page-toolbar .input-group > select.form-control {
    max-width: 320px;
}

/* Card Não pagos / Pagos do dashboard gerencial: dois valores numa linha. Em 4 colunas (lg) o card
   tem ~225px em 1280px e os 24px quebravam sobre a descrição; a fonte acompanha a largura. */
.dashboard-stat .details .number.valor-duplo {
    font-size: 24px;
}
@media (min-width: 1200px) {
    .dashboard-stat .details .number.valor-duplo {
        font-size: clamp(14px, 1.25vw, 24px);
    }
}

/* Aba da disputa com pendência; a pele troca o vermelho pelo token. */
.nav-tabs > li > a.tab-pendente {
    color: red;
}

/* Sidebar e conteúdo flutuam (layout.css); sem isto o container tem altura zero e a coluna do menu não vai até o rodapé. */
.page-container {
    display: flow-root;
}

/* Estado na listagem. O verde pulsa porque "ativo" é condição em curso — o worker pode
   disparar mensagem na próxima passada —, e o vermelho é estático porque parado não é evento.
   Geometria e animação não entram na pele (BrandSkinTest); as cores vêm dos tokens. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
}
.status-dot-ativo {
    background-color: var(--color-success);
    animation: status-dot-pulso 1.8s ease-out infinite;
}
.status-dot-inativo {
    background-color: var(--color-danger);
}
/* O anel cresce e some; `transparent` no fim evita uma cor literal só para o fade. */
@keyframes status-dot-pulso {
    0% { box-shadow: 0 0 0 0 var(--color-success-ring); }
    70%, 100% { box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .status-dot-ativo { animation: none; }
}

/* O BS3 só liga o overflow da .table-responsive abaixo de 768px (bootstrap.min.css, media
   screen max-width:767px). Entre isso e a largura em que a listagem cabe — 911px, por exemplo —
   não há contêiner de rolagem nenhum: a tabela espreme a célula de ações e o grupo de botões
   quebra no meio, em linhas irregulares. Ligado sempre, a tabela rola dentro do portlet. */
.table-responsive {
    overflow-x: auto;
}

/* O grupo de ações da linha é uma peça só. `inline-flex` também desliga o float que o BS3 põe
   em `.btn-group > .btn`, e era o float que produzia a quebra irregular; com `nowrap` a
   largura mínima da coluna passa a ser o grupo inteiro, e quem rola é a tabela. */
.table > tbody > tr > td > .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
}

/* components-rounded.css:5886 dá 5px de margem à direita de todo `.btn` dentro de tabela.
   Num `.btn-group` isso descola os botões, que existem justamente para parecer uma peça só —
   e é a margem, não o grupo, que sobra na conta da largura da coluna. */
.table .btn-group > .btn {
    margin-right: 0;
}


/* Métrica do item do Metronic (components-rounded.css:2639), não a do Bootstrap puro. */
.dropdown-menu > li > form > .btn-link {
    display: block;
    width: 100%;
    padding: 8px 14px;
    line-height: 18px;
    border: 0;
    border-radius: 0;
    font: inherit;
    text-align: left;
    color: var(--color-text);
}
.dropdown-menu > li > form > .btn-link:hover,
.dropdown-menu > li > form > .btn-link:focus {
    background-color: var(--color-action-tint);
    color: var(--color-text);
    text-decoration: none;
}