:root { --ifx-font-family: "Source Sans 3"; font-family: var(--ifx-font-family, sans-serif); } .ifx-multiselect-container { background-color: #FFFFFF; position: relative; box-sizing: border-box; font-family: var(--ifx-font-family); } .ifx-multiselect-container.small-select { height: 36px; } .ifx-multiselect-container.medium-select { height: 40px; } .ifx-multiselect-container:hover { cursor: pointer; } .ifx-multiselect-container .ifx-label-wrapper { font-size: 1rem; line-height: 1.5rem; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; } .ifx-multiselect-container .ifx-error-message-wrapper { color: #CD002F; font-size: 0.75rem; line-height: 1rem; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; } .ifx-multiselect-container .ifx-multiselect-wrapper { box-sizing: border-box; position: relative; display: flex; align-items: center; border: 1px solid #8D8786; border-radius: 1px; width: 100%; font-weight: 400; font-style: normal; } .ifx-multiselect-container .ifx-multiselect-wrapper.small-select { height: 36px; padding: 8px 12px; font-size: 0.875rem; line-height: 1.25rem; } .ifx-multiselect-container .ifx-multiselect-wrapper.medium-select { height: 40px; padding: 8px 16px; font-size: 1rem; line-height: 1.5rem; } .ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible { outline: none; } .ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active) { outline: none; } .ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before { content: ""; position: absolute; width: calc(100% + 4px); height: calc(100% + 4px); top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid #0A8276; border-radius: 2px; } .ifx-multiselect-container .ifx-multiselect-wrapper.disabled { background: #EEEDED; color: #575352; border-color: #575352; cursor: not-allowed; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ifx-multiselect-container .ifx-multiselect-wrapper.error { border-color: #CD002F; } .ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus, :focus) { border-color: #575352; } .ifx-multiselect-container .ifx-multiselect-wrapper.active { border-color: #0A8276 !important; } .ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up { display: flex; align-items: center; justify-content: center; padding-left: 8px; } .ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down { display: none; } .ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up { display: none; } .ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down { display: flex; align-items: center; justify-content: center; padding-left: 8px; } .ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu { top: auto; bottom: 100%; } .ifx-multiselect-container .ifx-multiselect-input { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ifx-multiselect-container .ifx-multiselect-input.placeholder { opacity: 0.5; } .ifx-multiselect-container .ifx-multiselect-icon-container { margin-left: auto; align-items: center; display: flex; } .ifx-multiselect-container .ifx-clear-button { margin-right: 8px; display: flex; } .ifx-multiselect-container .ifx-multiselect-dropdown-menu { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 2px; background-color: #fff; box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1); max-height: 300px; /* Adjust based on your design */ overflow-y: auto; z-index: var(--dynamic-z-index, 1); } .ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input { width: 100%; padding: 8px 16px; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; box-sizing: border-box; background-color: #FFFFFF; border: none; border-bottom: 1px solid #8D8786; } .ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus { outline: none; border: 1px solid #0A8276; } .ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder { color: #999; } .ifx-multiselect-container .option { position: relative; padding: 8px 16px; gap: 8px; align-items: center; display: flex; font-style: normal; font-weight: 400; } .ifx-multiselect-container .option.small-select { font-size: 0.875rem; line-height: 1.25rem; } .ifx-multiselect-container .option.medium-select { font-size: 1rem; line-height: 1.5rem; } .ifx-multiselect-container .option:hover { background-color: #EEEDED; } .ifx-multiselect-container .option:focus { background-color: #BFBBBB; outline: none; } .ifx-multiselect-container .option.is-highlighted { background-color: #EEEDED; } .ifx-multiselect-container .option.sub-option { padding-left: 30px; /* or however much indentation you want */ }