/* ----------------------
TOM SELECT
---------------------- */
/* TomSelect wrapper as a Bootstrap select */
.ts-wrapper {
    width: 100% !important;
}

ts-control > *, .ts-dropdown-content, .ts-control .item {
	font-size: 1rem!important;
	font-weight: 500!important;
}

.ts-control {
    width: 100% !important;
    min-height: 31px; /* match your form-control-sm height */
	display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
	border-radius: .375rem;
	white-space: normal;
}

.ts-control input {
    width: 100% !important;
	flex: 1 1 auto !important;
    min-width: 20 !important;
    height: auto !important;
}

/* Prevent the selected item from forcing a wrap */
.ts-control .item {
    white-space: nowrap !important;
}

.ts-dropdown {
    width: auto !important;
    min-width: 250px; /* adjust as needed */
    max-width: 500px; /* optional cap */
    white-space: normal;
}

.ts-dropdown .option {
	padding: 8px!important;
	white-space: normal;
}

.ts-wrapper .ts-control {
    position: relative;
	padding: .375rem 2.25rem .375rem .75rem !important;
    line-height: 1.5;
	border-color: #dee2e6;
}

.ts-wrapper .ts-control::after {
    content: "\f078"; /* FontAwesome down arrow */
    font-family: "Font Awesome 6 Free"; /* or your FA version */
    font-weight: 900;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #495057; /* match Bootstrap text color */
	font-size: 12px;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
    cursor: pointer;
    font-size: 1rem;
	color: #212529;
}

.ts-control {
    width: 100% !important;      /* Make it full width of its container */
    min-width: 0 !important;     /* Prevent shrinking below container */
    box-sizing: border-box;
}

.optgroup-header {
    color: #999999 !important;
    background-color: #FAFAFA !important;
}



/* MH SELECT SMALL */
.mh-select-sm input {
	font-size: 14px!important;
}

ts-control > *, .mh-select-sm .ts-dropdown-content, .mh-select-sm .ts-control .item {
	font-size: 14px!important;
}

.mh-select-sm .ts-dropdown .option {
	font-size: 14px!important;
}

.mh-select-sm .ts-control {
	padding: 4px 30px 4px 8px!important;
}
/* Tom Select arrow for desktop & mobile */
.ts-control .ts-dropdown {
    background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.293l3.71-4.06a.75.75 0 111.08 1.04l-4.25 4.65a.75.75 0 01-1.08 0l-4.25-4.65a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}