/* @override 
	http://127.0.0.1/Sites/www.homeinitaly.com/_templates/homeinitaly_template/css/tom-select_skinHII_override.css */


/* uk-tomselect UIKit styles override over standard tom-select.css */


/* Struttura HTML

<select name="subjectNEW" class="elf-field-listbox form-control uk-select uk-select2 uk-tomselect tomselected ts-hidden-accessible" id="tomselect-3" tabindex="-1"><option value="" selected="selected">Choose one…</option>
<option value="users_subject_options_1">I’d like to rent a property</option>
<option value="users_subject_options_2">I need more information on a property</option>
<option value="users_subject_options_3">I need more information on booking procedure</option>
<option value="users_subject_options_4">I need more information on booking conditions</option>
<option value="users_subject_options_5">I’d like to subscribe to the Home In Italy newsletter</option>
<option value="users_subject_options_6">I have a general request</option>
</select>

<div class="ts-wrapper elf-field-listbox form-control uk-select uk-select2 uk-tomselect single plugin-clear_button">
	<div class="ts-control">
		<input type="text" autocomplete="off" size="1" tabindex="0" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="tomselect-3-ts-dropdown" id="tomselect-3-ts-control" placeholder="Choose one…" readonly="readonly" aria-activedescendant="tomselect-3-opt-1">
		<div class="clear-button" title="Remove all selected options">×</div>
	</div>
	<div class="ts-dropdown single plugin-clear_button" style="display: none; visibility: visible;">
		<div role="listbox" tabindex="-1" class="ts-dropdown-content" id="tomselect-3-ts-dropdown">
			<div data-selectable="" data-value="users_subject_options_1" class="option active" role="option" id="tomselect-3-opt-1" aria-selected="true">I’d like to rent a property</div>
			<div data-selectable="" data-value="users_subject_options_2" class="option" role="option" id="tomselect-3-opt-2">I need more information on a property</div>
		</div>							
	</div>
</div>

*/

/*
la classe .uk-tomselect va assegnata sul ts-wrapper esterno
*/


/* NB: E' IMPORTANTE LA PARTE DI OVERRIDE PER TRASPARENZA DEI CAMPI DEI FORM NEL FILE CSS GLOBALE */

#header-search {
	background-color1: rgba(200,0,0,0.2) ;
}

/* Criterio 
- Bordi e sfondo li assegno sul div esterno ts-wrapper
- Sul div interno assegno il padding per gestire l'icona e l'allineamento del testo interno
*/

.uk-tomselect.ts-wrapper {
	padding: 0 !important; /* importante per far coincidere il div interno ts-control alla piena larghezza del ts-wrapper */ 
	background1: none !important; /* NB: se impostato elimina l'icona di uk-select -> usare background-color */
	 /* DA PERSONALIZZARE PER LE VARIANTI */
	border-radius: 0;
	background-color1: rgba(0,0,200,0.5);	
	border1: 0;
}
.uk-tomselect.ts-wrapper.dropdown-active {
	background-color: #fff;
	border: 1px solid var(--accent-color);	
}

.uk-tomselect.ts-wrapper .ts-control {
	display: flex;
	flex-wrap: wrap;
	align-items: center; /* IMP IMP consente l'allineamento verticale non legato al padding -> GREAT */

	padding: 0px 10px 0 10px; /* gestire icona e centratura verticale*/
	border-radius: 0;
	border: 0; /* vanno messi o fuori o dentro -> li metto fuori come lo sfondo che va li obbligatoriamente cosi centralizzo lo stile esterno tutto in un unico elemento */
	background1: none !important; /*se impostato a none copre l'icona di uk-select */
	background-color1: rgba(0,0,200,0.5);	
	background-color: transparent !important ;	/* NB: se impostato ad un colore pieno copre l'icona di uk-select -> impostare il BG sul wrapper e non sul ts-control l'imposratn fa si che il simbolo aggunto da ui-kit rimanga visible anche col menu a discesa aperto -> GREAT */
}

/* NB: eredita anche da uk-inline per il match parziale del nome del selettore CSS */
.uk-inline-with-icon .uk-tomselect.ts-wrapper .ts-control {
	padding-left: 40px !important; /* spazio sx icona */;
}

/* Fix altezza campo singolo */
.uk-tomselect.ts-wrapper.single .ts-control {
	height: 38px !important; /* 40 meno i bordi del contenitore come i campi uikit*/	
}
/* Fix altezza campi multiplo */
.uk-tomselect.ts-wrapper.multi .ts-control  {
	min-height: 38px; /* è il campo input interno r devo tener conto dei bordi esterni top e bottom */
	padding-top: 3px !important; /* centra in verticale tenendo conto del valore del margine solo bottom degli elementi selezionati */
}
.uk-tomselect.ts-wrapper.multi   {
	height: auto !important; /* deve poter crescere in altezza */
}


/* testo */
.uk-tomselect.ts-wrapper .ts-control,
.uk-tomselect.ts-wrapper .ts-control input,
.uk-tomselect.ts-wrapper .ts-dropdown {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: 100%; /* IMP: inherit fa si che il bottone clear occupi tutta l'altezza consentendo il click in tutta la fascia verticale anche quando non è visibile (altrimenti rimane una zona scoperta sopra e sotto il bottone ??!! il problema è che altera l'altezza aumentandola nella versione multi -> metto 100$ e display: none sul bottone clear non attivo  */;
}
.uk-tomselect.ts-wrapper .ts-dropdown {
	line-height: 140%; /* Altrimenti eredita da inherit di prima ed è troppo grande*/
	margin: 0; /* Attaccato al campo */
	margin-top: 0px;
	box-sizing: content-box; /* Altrimenti è più stretto di 1px per lato */
	margin-left: -1px;
	margin-right: -1px;
	border-radius: 0;	
	border: 1px solid var(--accent-color); /* colore accent */
	border-top: 1px solid #ccc;
}


/* Centratura testo opzioni singole */
.uk-tomselect.ts-wrapper.single .ts-control .item {
	line-height: 24px;
	 /* se il testo non entra non lo mando su più righe e lo segno come abbreviato */
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;	
}

/* Opzioni multiple */
.uk-tomselect.ts-wrapper.multi .ts-control .item  {
	cursor: pointer;
	margin: 0 3px 3px 0;
	padding: 1px 6px;
	background: #f2f2f2;
	background: none;
	color: inherit;
	border: 1px solid #ddd;
	
	line-height: 22px;
	/* Valutare il da farsi -> vanno su più righe già neò campo epr cui forse è magio mantenere la leggibilità mandando i valori selezionati su più righe */
	white-space1: nowrap !important;
	overflow1: hidden;
	border-radius1: 16px;
}
.uk-tomselect.ts-wrapper.multi .ts-control .item.active {
  background: #ddd;
  color: #333;
  border: 1px solid #ccc;
}


/* Nel single l'input viene usato per il placeholder quando non ci sono elementi ma da fastidio nel resto dei casi */
.uk-tomselect.ts-wrapper.single.focus.has-items input {
	min-width: 0 !important;
	min-height: 0 !important;
	position: absolute; /* lo esclude dal flex -> great !!! */
}

.uk-form-icon {
	z-index: 2; /* va davanti allo sfondo bianco del campo selezionato */
}

/* FIX: attivo il checkbox per avere il click che deseleziona ma lo nascondo  */
.uk-tomselect .tomselect-checkbox {
	display1: none; /* da decidere */
	margin-right: -14px !important; 
}


/* Bottone di eliminazione generale */
.uk-tomselect.ts-wrapper .ts-control > div.clear-button {
	color: #999;
	font-size: 31px;
	top: 50%;
	right: 20px; /* lascio lo spazio per il simbolo popup dell uk-select  */
	padding: 4px;
	margin: 0;
	border: 0;
	display: none; /*IMP: altrimenti si crea una zona non cliccabile quando il remove non si vede */	
	/* DEBUG */
	background-color1: green !important;
	
}
/* Se attivo lo rendo visibile sempre quando ci sono dei valori senza necessita di hover */
.uk-tomselect.ts-wrapper.plugin-clear_button.focus.has-items .clear-button,
.uk-tomselect.ts-wrapper.plugin-clear_button:not(.disabled).has-items .clear-button {
    opacity: 1;
	display: block;
	/* DEBUG */
	display1: none;
}
/* Se attivo, visto che è sempre visibile gli faccio spazio */
.uk-tomselect.ts-wrapper.plugin-clear_button .ts-control:not(.rtl) {
	padding-right: 40px !important;
}
/* Se non è attivo, recupero lo spazio lasciando solo quello eer il simbolo di uk-select */
.uk-tomselect.ts-wrapper:not(.plugin-clear_button) .ts-control:not(.rtl) {
	padding-right: 20px !important;	
}

/* Bottone di eliminazione degli elementi generale*/
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.1);
}




/* Altezza tendina */
.uk-tomselect.ts-wrapper .ts-dropdown-content {
  max-height: 400px;
  min-height: 200px; /* copre i campi sottostanti sul mobile quando ci sono poche opzioni */
}

/* Opzioni tendina */
.uk-tomselect.ts-wrapper .ts-dropdown .selected {
  background-color: #ddd;
}
.uk-tomselect.ts-wrapper .ts-dropdown .active,
.uk-tomselect.ts-wrapper .ts-dropdown .active.selected {
  background-color: var(--accent-color);
  color: #FFFFFF;
}



/* VARIANTI STILE */
.uk-tomselect.ts-wrapper.elf-accent-borders {
	background-color1: rgba(0,0,200,0.5);	
	border: 1px solid var(--accent-color);
}
.uk-tomselect.ts-wrapper.uk-form-danger {
	border: 1px solid #f0506e !important; /* RIPRISTINO IN TUTTI I CASI IL COLORE UIKIT */
}


/* FIX SAFARI -> scrivendo le opzioni nel campo multi le lettere vengono troncate perchè la larghezza calcolata non è sufficiente -> mando al width a quella disponibile che sembra non creare problemi a meno di non andare ad editare in mezzo alle opzioni che vengono spaziate più del necessario */
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
	flex: auto;
}