.select2-container--default .select2-selection--multiple {
    background-color: var(--cor-input)!important;
    border-radius: 10px !important;
    min-height: 35px !important;
    padding: 10px !important;
    border: 1px solid var(--cor-borda) !important;
}

/* Remove bordas retas nos cantos das tags */
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background-color: var(--cor-principal) !important;
    color: white !important;
    border-radius: 10px !important;
    margin: 2px !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
   
}



/* Define o estilo geral do selectpicker para parecer um input */
.bootstrap-select .dropdown-toggle {
    background-color: var(--cor-input) !important;
    border: 1px solid var(--cor-borda) !important; /* Borda padrão semelhante ao input */
    border-radius: 10px !important; /* Arredondamento suave */
    color: var(--cor-texto) !important; /* Texto semelhante ao input */
  
    text-align: left !important; /* Alinha o texto à esquerda */
    width: 100% !important; /* Garante que ocupe o espaço completo */
    height: 40px !important;
    align-items: center !important;
    text-align: center !important;
}

/* Estilo do dropdown ao abrir */
.bootstrap-select .dropdown-menu {
    border-radius: 5px !important; /* Arredondamento do dropdown */
    max-height: 300px !important; /* Altura máxima com rolagem */
    overflow-y: auto !important; /* Adiciona rolagem se necessário */
    background-color: #ffffff !important; /* Fundo branco */

  
}

/* Estilo das opções no dropdown */
.bootstrap-select .dropdown-menu li a {
    color: var(--cor-texto) !important; /* Cor do texto */
    padding: 8px 15px !important; /* Espaçamento interno */
    transition: background-color 0.2s !important; /* Transição para hover */
  
}

/* Hover para as opções */
.bootstrap-select .dropdown-menu li a:hover {
    background-color: var(--cor-hover) !important; /* Fundo ao passar o mouse */
    color: black !important; /* Cor do texto ao passar o mouse */
  
}

/* Opção selecionada */
.bootstrap-select .dropdown-menu li.active > a {
    background-color: var(
        --cor-hover-sideba
    ) !important; /* Fundo azul para item selecionado */
    color: gray !important; /* Texto branco */
  
}

/* Ícones nas opções */
.bootstrap-select .dropdown-menu li a .fa {
    margin-right: 10px !important; /* Espaçamento entre o ícone e o texto */
  
}

/* Ajustes no tamanho do dropdown */
.bootstrap-select {
    width: 100% !important; /* Garante que ocupa a largura completa */
  
}

/* Remove a seta padrão e adiciona estilo customizado */
.bootstrap-select .dropdown-toggle:after {
    /*content: '\f0d7'; Ícone de seta usando Font Awesome */
   
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: #000000 !important; /* Cor da seta */
}