/* Main container */
.select2.select2-container.select2-container--default {
    width: 100% !important; /* Use !important to override inline styles if necessary */
    border-radius: 4px;
}

/* Selection area */
.select2-container--default .select2-selection--single {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}


    /* Rendered text/placeholder */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 1.5; /* Matches Bootstrap's line-height */
        color: #495057; /* Bootstrap's default text color */
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #6c757d; /* Bootstrap's placeholder color */
    }

    /* Dropdown arrow */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px; /* Slightly less than the container height */
        right: 5px; /* Adjust as needed */
    }

/* Dropdown wrapper - usually hidden, but included for completeness */
.select2-container--default .dropdown-wrapper {
    /* Add styles if needed */

}

/* When the select is open/active */
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #80bdff; /* Bootstrap's focus color */
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Bootstrap's focus shadow */
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0px !important;
}