@CHARSET "ISO-8859-1";

.textfieldquery div.sp-replacer {
	float: left;
	margin-top: 12px;
}

.sp-container .sp-palette {
	max-width: 200px;
}

.textfieldquery div.split.input-error.color i {
	right: 80px;
}

.textfieldquery input.color {
	float: left;
	margin-right: 10px;
	width: 327px !important; /* 388px - 10px padding to colorpicker, 51px colorpicker, 56px textfield spacing  */
/* 	width: calc(100% - 117px) !important; 10px padding to colorpicker, 51px colorpicker, 56px textfield spacing  */
}


.textfieldquery .lettercounter {
	margin-right: 5px;
}

.textfieldquery .input-error .error {
	display: flex;
	align-items: center;
	margin-top: 8px;
} 

.textfieldquery .input-error .error i {
	margin: unset;
	margin-right: 5px;
	
	display: inline-block;
	position: relative;
	right: 0;
	bottom: 0;
	width: unset;
	height: unset;
}

@media screen and (min-width: 1203.99px) {
	.textfieldquery .split:not(.odd) .lettercounter {
		margin-right: 35px;
	}
}

@media screen and (max-width: 1204px) {
	.textfieldquery input.color {
		width: calc(100% - 61px) !important; /* 10px padding to colorpicker, 51px colorpicker  */
	}
}

@media screen and (max-width: 767px) {
	.textfieldquery .input-error i {
		display: block;
		pointer-events: none;
		position: static;
		height: auto;
		width: auto;
		margin: auto;
	}
	
	.textfieldquery .input-error i::after {
		float: right;
/* 		display: inline-block; */
		content: attr(title);
/* 		text-align: left; */
		font-family: "Source Sans Pro",sans-serif;
		font-size: 14px;
		font-weight: 600;
		margin-top: 8px;
		margin-right: 5px;
	}

	.textfieldquery .input-error input {
		padding: 12px !important;
	}
}