.ºtextbox{
	display: flex;
	position: relative;
	min-width: var(--size-8);
	height: var(--control-height-2);
	background: var(--control-background);
	border: 1px solid var(--control-border-color);
	border-radius:  var(--control-border-radius);
	line-height: var(--control-height);
	transition: 
		background-color .3s ease-in,
		border-color .3s ease-in,
		box-shadow .3s ease-in;
}
	.ºtextbox input, .ºtextbox textarea{
		box-sizing: border-box;
		padding: 0 var(--size-2);
		width: 100%;
		height: 100%;
		background: transparent;
		color: var(--color-text);
		border: 0;
	}
		.ºtextbox input[type=number]{
			padding: 0 var(--size-1) 0 var(--size-2);
		}

	.ºtextbox:hover{
		border-color: var(--color-border-hover);
	}		
	.ºtextbox.focus{
		border-color: var(--color-border-focus);
		box-shadow: 0 0 0 3px var(--control-border-hover);
	}
	.ºtextbox.no-editable, .no-editable .ºtextbox{
		border: 0;
		box-shadow: none;
	}
	.ºtextbox .button{
		display: flex;
		align-items: center;
		padding: 0 9px;
		height: inherit;
		color: var(--color-text-2);
		font-size: 16px;
		cursor: pointer;
		transition: color .3s ease-in;
	}
		.ºtextbox .button:hover{
			color: var(--color-5);
		}

.ºtextbox.password input::-ms-reveal{
	display: none;
}

.ºtextbox.number input{
	padding: 0 var(--size-1) 0 var(--size-2);
}

.ºtextbox.error{
	border-color: var(--control-error-color);
}
	.ºtextbox.error.focus{
		box-shadow: 0 0 0 3px var(--control-error-focus);
	}
	.ºtextbox.error .button{
		color: var(--control-error);
		opacity: .7
	}
		.ºtextbox.error .button:hover{
			opacity: 1;
		}
		
	.ºtextbox .button + .show-error .icon{
		right: var(--size-2);
	}
	
.ºtextbox.textarea{
	height: auto;
}
	.ºtextbox textarea{
		min-height: 150px;
		padding: var(--size-1) var(--size-2);
		resize: none;
	}
	.ºtextbox.size-2 textarea{
		min-height: 256px;
	}
	
.ºtextbox.disabled,
.disabled .ºtextbox{
	background: var(--control-disable-bg) !important;
}

.ºtextbox.green{
	background: #e4f1d4;
	border-color: #bcdd93;
}
	.ºtextbox.green input{
		color: #070;
	}
	.ºtextbox.green.focus{
		border-color: #79bc28;
		box-shadow: 0 0 0 3px #d6eabe;
	}
	.ºtextbox.green:hover{
		border-color: #79bc28;
	}	
	
.ºtextbox.red{
	background: #FFCBCB;
	border-color: #c88484;
}
	.ºtextbox.red input{
		color: #700;
	}
	.ºtextbox.red.focus{
		border-color: #B86060;
		box-shadow: 0 0 0 3px #FFE6E6;
	}
	.ºtextbox.red:hover{
		border-color: #B86060;
	}		

.ºtextbox.search input::-webkit-search-cancel-button{
	-webkit-appearance: none;
	position: relative;
	right: -22px;
	width: var(--size-4);
	height: var(--size-4);
	background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/light/times.svg) no-repeat;
	opacity: .35;
	cursor: pointer;
}