 <style>

/* Target the Select2 selection box to match your greyish field background */

  .select2-container--default .select2-selection--single {

    background-color: #f8f8f8 !important; /* Adjust this color to match your specific grey */

    border: 1px solid #ccc !important;    /* Adjust border color if needed */

    height: 40px !important;             /* Match the height of your other fields */

  }

  /* Target the text inside to ensure it remains readable */

  .select2-container--default .select2-selection--single .select2-selection__rendered {

    color: #333 !important;

    line-height: 40px !important;

  }

  /* 1. Ensure the container doesn't block clicks */

  .select2-container .select2-selection--single {

    display: flex !important;

    align-items: center !important;

    position: relative !important;

    height: 40px !important;

    cursor: pointer !important;

  }

  /* 2. Remove the internal Select2 arrow but keep it 'clickable' */

  .select2-selection__arrow {

    display: block !important;

    position: absolute !important;

    right: 0 !important;

    top: 0 !important;

    width: 40px !important; /* Larger hit area */

    height: 100% !important;

    pointer-events: auto !important; /* Ensures clicks hit this area */

    opacity: 1 !important;

    z-index: 10 !important;

  }

  /* 3. Hide the visual Select2 arrow icon ONLY (keeps the click area) */

  .select2-selection__arrow b {

    display: none !important;

  }

  

  /* 4. Fix text to ensure it doesn't overlap the click area */

  .select2-selection__rendered {

    pointer-events: none !important; /* Text doesn't block clicks */

    padding-right: 40px !important; 

  }

</style> 