.ng-select.select-custom.ng-invalid>.ng-select-container {
    border-color: red;
}

.ng-select.select-custom.ng-select-focused.ng-invalid>.ng-select-container {
    border-color: red;
}

.ng-select.select-custom.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
    box-shadow: none;
    border-color: #26baee;
}

.ng-select.select-custom.ng-select-focused.ng-invalid:not(.ng-select-opened)>.ng-select-container {
    border-color: red;
}

.ng-select.select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
  /*  background-color: #337ab7;*/
    border: solid white;
    border-width: 1px 3px;
}

/*.ng-select.select-custom.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
   background-color: white;
} */

.ng-select.select-custom .ng-select-container,
.ng-select.select-custom.ng-select-single .ng-select-container {
    height: 35px;
}

.ng-select.select-custom.fixed-size .ng-dropdown-panel .scroll-host {
    height: 242px;
}

/* ---------------------------------------------------------------------------
   Multi-seleção em campo de altura fixa (os 35px logo acima).

   O .ng-value-container do ng-select é `flex-wrap: wrap`, pensado para um campo
   que cresce em altura conforme os chips. Com altura travada em 35px e
   `overflow: hidden` no .ng-select-container, qualquer quebra de linha vira
   defeito — e com rótulo longo (nome de paciente ou profissional) ela acontece:

   - o conteúdo da segunda linha fica cortado, porque o .ng-select-container tem
     align-items:center e corta o excedente em cima e embaixo;
   - ao abrir a lista, o .ng-input (que foi para a segunda linha) recebe foco e o
     navegador rola o .ng-select-container para revelá-lo — overflow:hidden ainda
     é um contêiner rolável. O rótulo da primeira linha sai de vista;
   - sem `min-width: 0`, o `min-width: auto` dos flex items trava o
     .ng-value-container no mínimo de conteúdo e empurra .ng-clear-wrapper e
     .ng-arrow-wrapper para fora do campo: o "x" de limpar some.

   Daí: uma linha só, itens encolhíveis, e uma faixa mínima reservada para o
   campo de busca. O `flex-basis: 0` original do .ng-input o deixava sumir por
   completo quando o rótulo era largo.

   O rótulo montado com ng-multi-label-tmp precisa ainda de nowrap/ellipsis
   próprios: o ng-select renderiza esse template direto no .ng-value-container,
   sem envolver em .ng-value, que é onde o tema põe o `white-space: nowrap`.
   Vale para todas as telas que usam ng-multi-label-tmp (agenda, atendimento,
   comissão, histórico do paciente, receita, formulário).

   Fica de fora quem já cresce em altura e portanto quer a quebra de linha
   (.daai-section__copy-select, que redefine height:auto mais abaixo).
   --------------------------------------------------------------------------- */
.ng-select.select-custom.ng-select-multiple:not(.daai-section__copy-select) .ng-select-container .ng-value-container {
    flex-wrap: nowrap;
    /* Sem isto o mínimo de conteúdo (o rótulo inteiro, que agora é nowrap) sobe pela cadeia de
       flex e alarga o campo — e, como `min-width` vence `max-width`, alarga a própria coluna.
       Quem estiver colocando este select dentro de outro flex precisa do mesmo na coluna. */
    min-width: 0;
}

.ng-select.select-custom.ng-select-multiple:not(.daai-section__copy-select) .ng-select-container .ng-value-container > * {
    min-width: 0;
}

.ng-select.select-custom.ng-select-multiple:not(.daai-section__copy-select) .ng-select-container .ng-value-container .ng-input {
    flex: 1 0 24px;
}

/* O :not(.ng-value) restringe ao rótulo do template: o chip padrão do ng-select já vem
   com nowrap do tema e com o label inline ao lado do ícone de remover. */
.ng-select.select-custom.ng-select-multiple:not(.daai-section__copy-select) .ng-select-container .ng-value-container > :not(.ng-value) .ng-value-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .ng-select.select-custom */

.ng-select.select-custom.ng-select-single.ng-select-filtered:not(.ng-select-opened) 
.ng-select-container.ng-has-value 
.ng-value-container 
.ng-value {
    visibility: visible;
    
}

/* .ng-select.auto-grow -- periodo-selector componente */ 
/* daai-section copy-select: expande verticalmente com múltiplas seleções */
.ng-select.select-custom.daai-section__copy-select .ng-select-container {
    height: auto;
    min-height: 35px;
}

/* trunca labels maiores que ~50 chars com ellipsis */
.ng-select.select-custom.daai-section__copy-select .ng-value-label {
    display: inline-block;
    max-width: 35ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ng-select.auto-grow {
  display: flex;
  margin-bottom: 1rem;
}

.ng-select.auto-grow .ng-dropdown-panel {
    width: 428px;
    z-index: 1001;
}

.ng-select.auto-grow .inner-ng-select-container {
    position: relative;
    z-index: 1000;
    padding: 8px;
    background: white;
}

.ng-select.auto-grow .inner-ng-select-container .ng-dropdown-panel {
    width: 396px !important;
}

.ng-select.auto-grow .inner-ng-select-container ng-select {
    width: 100%;
}
/* ---------------------------------------------------------------------------
   Opção de profissional em ng-select: área profissional em uma linha menor
   acima do nome, sem reduzir o tamanho do nome. Usado com ng-option-tmp:

   <ng-template ng-option-tmp let-item="item">
     <div class="opcao-profissional">
       <span class="opcao-profissional-area" *ngIf="item?.areaProfissional">
         {{AreaProfissional.descricao(item.areaProfissional)}}</span>
       <span class="opcao-profissional-nome">{{item.nome}}</span>
     </div>
   </ng-template>
   --------------------------------------------------------------------------- */
.opcao-profissional {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.opcao-profissional-area {
    font-size: 11px !important;
    font-weight: normal !important;
    color: #838383 !important;
}

/* O nome mantém o tamanho herdado do ng-select (não reduzir). */
.opcao-profissional-nome {
    overflow: hidden;
    text-overflow: ellipsis;
}