.icon-select {
    border: 1px solid #ccc;
    position: relative;
    width: 450px; /* Ajuste a largura conforme necessário para acomodar a grade de ícones */
    background-color: #fff; /* Para uniformidade com o dropdown */
}

.icon-select-display {
    padding: 5px 10px; /* Ajuste o padding conforme necessário */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 40px; /* Altura mínima para o componente parecer mais consistente antes de um ícone ser selecionado */
    border-bottom: 1px solid #ccc; /* Para simular a continuidade com o dropdown */
    position: relative; /* Necessário para o posicionamento correto da setinha */
}

    .icon-select-display::after {
        content: '';
        position: absolute;
        right: 5px; /* Posiciona a setinha à direita */
        top: 50%; /* Centraliza verticalmente */
        transform: translateY(-50%); /* Ajuste fino para a centralização vertical */
        border-top: 5px solid black; /* Cor da setinha */
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        display: block;
    }

.icon-select-dropdown {
    display: none; /* Inicialmente escondido, mostrado via JavaScript */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Para cobrir toda a largura do componente .icon-select */
    border: 1px solid #ccc;
    border-top: none; /* Remove a borda superior para se unir visualmente com o .icon-select-display */
    background-color: #fff;
    z-index: 1000;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    max-height: 280px; /* Limita a altura do dropdown */
    overflow-y: auto; /* Habilita a rolagem vertical se o conteúdo exceder a altura máxima */
}

    .icon-select-dropdown div {
        width: calc(100% / 6 - 20px); /* Distribui 6 ícones por linha, ajustando o espaço para margens */
        margin: 10px; /* Espaçamento entre os ícones */
        text-align: center;
        display: inline-flex; /* Permite que o ícone se alinhe corretamente dentro da div */
        justify-content: center;
        align-items: center;
    }

        .icon-select-dropdown div:hover {
            background-color: #e0e0e0; /* Adiciona cor de fundo ao passar o mouse */
            cursor: pointer;
        }

    .icon-select-dropdown i {
        font-size: 48px; /* Tamanho do ícone ajustado para visibilidade */
    }

.icon-select-display .selected-icon {
    font-size: 24px; /* Ajuste para o tamanho desejado, igual ao dos ícones na grade */
    display: inline-block; /* Garante que o ícone seja tratado como um elemento de bloco inline para alinhamento */
    vertical-align: middle; /* Ajuda a alinhar o ícone verticalmente dentro do elemento de exibição */
}

.extra-small-text {
    font-size: 12px; /* Ajuste o valor conforme necessário */
}