/* .select2-selection__choice{
    padding: 0 !important;
} */
/* Add space to the left of the text so it doesn't sit under the X */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding-left: 25px !important; /* Adjust this value based on your needs */
    position: relative;
}

/* Ensure the remove button stays on the far left */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20px;
    margin: 0;
    border-right: 1px solid #aaa; /* Optional: adds a divider line */
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: red;
}

/*  Vertical alignment for the text */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 5px;
    display: inline-block;
}

/* Make multiple select same height as single */
.select2-container--default .select2-selection--multiple {
    min-height: 38px;   /* match your single select height */
    height: 38px;
    overflow-y: auto;   /* scroll instead of expanding */
    display: flex;
    align-items: center;
}

/* Keep tags aligned nicely */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: nowrap;   /* prevent wrapping to new lines */
    overflow-x: auto;    /* horizontal scroll if many items */
}