/* CSS campi form */

/* campi input normali */
.input												{ position: relative; width: 100%; height: 4rem; box-sizing: border-box; }
.input--grid										{ display: grid; grid-template-columns: auto auto; gap: 1rem; place-items: center; }
input[type=text],
input[type=search],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=date],
input[type=time],
textarea											{ font-size: 1.2rem; color: var(--dark); background: var(--light); outline: none; transition: .3s;
													  height: 100%; width: 100%; padding: 1rem; border: .2rem solid var(--dark-grey); border-radius: .5rem; }
input.error											{ border-color: var(--rosso) !important; }
input.error	~ span									{ color: var(--rosso) !important; }
input[type=text]:focus,
input[type=search]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=time]:focus,
textarea:focus										{ border-color: var(--primary); }

/* label */
.input label										{ position: absolute; font-size: 1rem; color: var(--dark); background: var(--light); left: .5rem; top: -1rem;
													  padding: 0 1rem; border-left: .2rem solid var(--dark-grey); border-right: .2rem solid var(--dark-grey);
													  text-transform: uppercase; }
input.error	~ label									{ border-color: var(--rosso) !important; }
input[type=text]:focus ~ label,
input[type=email]:focus ~ label,
input[type=password]:focus ~ label,
input[type=tel]:focus ~ label,
input[type=number]:focus ~ label,
input[type=date]:focus ~ label,
input[type=time]:focus ~ label,
textarea:focus ~ label								{ border-left: .2rem solid var(--primary); border-right: .2rem solid var(--primary); }

/* campi disabilitati */
.disabled input, .disabled input ~ label			{ background: var(--grey); }
.disabled input:focus, .disabled input:focus ~ label{ background: var(--grey); border-color: var(--dark-grey); }

/* textarea */
textarea											{ resize: none; height: 12rem; }
textarea.resizeX									{ resize: horizontal; }
textarea.resizeY									{ resize: vertical; }
textarea.resizeXY									{ resize: both; }

/* campi input date e time */
body.dark ::-webkit-calendar-picker-indicator		{ filter: invert(1); } /* icona calendario colore invertito */
input[type=time]									{ font-size: 2rem; }

/* campi input prezzo */
.input.prezzo										{ position: relative; }
.input.prezzo input									{ padding-left: 4rem; }
.input.prezzo .currency								{ position: absolute; top: 1rem; left: 1rem; color: var(--dark); }

/* radio button */
.input-radio										{ position: relative; width: 100%; height: 4rem; margin: .5rem; box-sizing: border-box; }
input[type=radio]									{ display: none; }
input[type=radio] ~ i								{ color: var(--dark-grey); font-size: 2.5rem; cursor: pointer; }
input[type=radio]:checked ~ i.bx-male-sign			{ color: #005CFF; }
input[type=radio]:checked ~ i.bx-female-sign		{ color: #FF60B9; }
input[type=radio]:checked ~ i.bxs-check-circle		{ color: #388E3C; }
input[type=radio]:checked ~ i.bxs-x-circle			{ color: #A90002; }
.input-radio span									{ font-size: 1rem; color: var(--dark); background: var(--light); position: absolute; left: .5rem; top: -1rem;
													  text-transform: uppercase; pointer-events: none; }

/* checkbox */
.input-check										{ position: relative; width: 100%; height: auto; margin: .5rem; box-sizing: border-box; }
.input-check > label								{ display: inline-block; margin: 0 1rem; }
input[type=checkbox]								{ display: none; }
input[type=checkbox] ~ span							{ color: var(--dark-grey); font-size: 2rem; font-weight: 600; cursor: pointer; transition: all .3s ease; }
input[type=checkbox] ~ span:hover					{ color: var(--dark); }
input[type=checkbox]:checked ~ span					{ color: var(--primary); }
input[type=checkbox] ~ img							{ filter: grayscale(100%); cursor: pointer; transition: all .3s ease; }
input[type=checkbox]:checked ~ img					{ filter: grayscale(0%); }
.input-check > span									{ font-size: 1rem; color: var(--dark); background: var(--light); position: absolute; left: .5rem; top: -1.5rem;
													  text-transform: uppercase; pointer-events: none; }

/* select */
.custom-select								{ display: block; position: relative; font-size: 1.2rem; color: var(--dark); line-height: 1rem; text-align: left;
											  width: 100%; max-width: 100%; padding: .8rem .5rem; margin: 0;
											  border: .1rem solid var(--dark); border-radius: .5rem; box-sizing: border-box;
											  -moz-appearance: none; -webkit-appearance: none; appearance: none;
											  background-color: var(--light); background-repeat: no-repeat, repeat; background-position: right .7rem top 50%, 0 0; background-size: .65rem auto, 100%;
											  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
											}
.custom-select:hover						{ border-color: var(--primary); }
.custom-select select						{ display: none; /* hide original SELECT element */ }
.select-selected							{ width: 100%; background-color: var(--light); }
.select-selected:after						{ position: absolute; content: ""; top: 2rem; right: 1rem; width: 0; height: 0;
											  border: .6rem solid transparent; border-color: var(--dark) transparent transparent transparent; }
.select-selected.select-arrow-active:after	{ border-color: transparent transparent var(--dark) transparent; top: 1.5rem; }
.select-items								{ position: absolute; background-color: var(--light); border: .1rem solid var(--dark-grey); border-radius: .5rem;
											  top: 100%; left: 0; right: 0; height: 20rem; overflow-y: auto; z-index: 99; }
.select-items div, .select-selected			{ color: var(--dark); padding: 8px 1.6rem; border: .1rem solid transparent;
											  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; }
.select-hide								{ display: none; }
.select-items div:hover, .same-as-selected	{ background-color: var(--primary); color: var(--white); }
.custom-select label						{ position: absolute; font-size: 1rem; color: var(--dark); background: var(--light); left: .5rem; top: -.8rem;
											  padding: 0 1rem; border-left: .2rem solid var(--dark-grey); border-right: .2rem solid var(--dark-grey);
											  text-transform: uppercase; }
.custom-select:hover label					{ border-color: var(--primary); }
/* select con search integrato */
.select-search								{ position: relative; width: 100%; height: 4rem; box-sizing: border-box; }
.select-search-content						{ display: flex; align-items: center; justify-content: space-between;
											  height: 100%; width: 100%; padding: 1rem; border: .2rem solid var(--dark-grey); border-radius: .5rem; box-sizing: border-box;
											  font-size: 1.2rem; color: var(--dark); background: var(--light); cursor: pointer; }
.select-search:hover .select-search-content	{ border-color: var(--primary); }
.select-search-content i					{ font-size: 1.8rem; transition: transform .3s linear; }
.select-search.active .select-search-content i { transform: rotate(180deg); }
.select-search-list							{ display: none; position: absolute; width: 100%; padding: 2rem; margin-top: -.1rem;
											  color: var(--dark); background: var(--grey); border: .1rem solid var(--dark-grey); border-radius: .7rem; z-index: 5000; }
.select-search.active .select-search-list	{ display: block; }
.select-search-list .search					{ position: relative; }
.select-search-list .search input			{ font-size: 1.2rem; height: 3rem; width: 100%; padding: 0 1.5rem 0 3.2rem;
											  background: var(--grey); border: .1rem solid var(--dark-grey); border-radius: .5rem; outline: none; }
.select-search-list .search i				{ position: absolute; font-size: 1.5rem; color: var(--dark); line-height: 3rem; left: 1.2rem; }
.select-search-list .options				{ margin-top: 1rem; max-height: 20rem; overflow-y: auto; z-index: 99; }
.select-search-list .options li,
.select-search-list .options span			{ display: grid; grid-template-columns: 1fr; align-items: center;
											  font-size: 1.2rem; height: auto; padding: 0 1rem; border-radius: .5rem; cursor: pointer; }
.select-search-list .options li span		{ font-size: .7em; }
.select-search-list .options li:hover		{ background: var(--primary); color: var(--white); }
.select-search label						{ position: absolute; font-size: 1rem; color: var(--dark); background: var(--light); left: .5rem; top: -.8rem;
											  padding: 0 1rem; border-left: .2rem solid var(--dark-grey); border-right: .2rem solid var(--dark-grey);
											  text-transform: uppercase; }
.select-search:hover label					{ border-color: var(--primary); }
/* select disabilitata */
.select-search.disabled .select-search-content,
.select-search.disabled	label				{ background: var(--grey); cursor: default; }
.select-search.disabled:hover .select-search-content,
.select-search.disabled:hover label 		{ background: var(--grey); border-color: var(--dark-grey); }

/* search */
.searchbox 									{ position: relative; background: var(--light); width: 4rem; max-width: 90%; height: 4rem; overflow: hidden;
											  border-radius: 4rem; box-sizing: border-box; transition: .5s; }
.searchbox.active							{ width: 25rem; box-shadow: 0 0 0 .2rem var(--dark); }
.searchbox i								{ position: absolute; font-size: 3rem; background: var(--light); color: var(--dark); line-height: 4rem;
											  top: 0; left: 0; width: 4rem; height: 4rem; border-radius: 4rem;
											  display: flex; align-content: center; justify-content: center; cursor: pointer; z-index: 999; }
.searchbox .campo							{ position: relative; display: flex; align-content: center; justify-content: start; width: 25rem; height: 4rem; left: 4rem; }
.searchbox .campo input						{ position: absolute; top: 0; width: 20rem; height: 100%; border: none; }
@media only screen and ( max-width: 900px) {
	.searchbox								{ position: absolute; right: 4rem; }
}