/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* variables */
:root
{
	/* number plate field */
	--component-numberplate-width: 					180px;		/* numberplate field input field width */
	--component-numberplate-padding:				10px 15px 10px 15px;/* numberplate field input padding */
	--component-numberplate-font:					"NumberPlate",sans-serif;/* numberplate field input font family */
	--component-numberplate-font-size:				18px;		/* numberplate field input font size */
	--component-numberplate-font-weight:			normal;		/* numberplate field font weight */
	--component-numberplate-font-style:				normal;		/* numberplate field font style */
	--component-numberplate-line-height: 			1;			/* numberplate field line height */
	--component-numberplate-text-color: 			black;	/* numberplate field text color */
	--component-numberplate-background-color:		white;	/* numberplate field background color */
	--component-numberplate-border-radius:			4px;		/* numberplate field border radius */
	--component-numberplate-border-size:			2px;		/* numberplate field border size */
	--component-numberplate-border-color:			black;		/* numberplate field border color */

	--component-numberplate-addon-padding:			0 0 0 0;	/* numberplate field addon padding */
	--component-numberplate-addon-offset: 			6px;		/* numberplate field addon bottom offset */
	--component-numberplate-addon-width:			20px;		/* numberplate field addon width */
	--component-numberplate-addon-font:				"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;/* numberplate field addon font family */
	--component-numberplate-addon-font-size:		10px;		/* numberplate field addon font size */
	--component-numberplate-addon-font-weight:		bold;		/* numberplate field addon font weight */
	--component-numberplate-addon-font-style:		normal;		/* numberplate field addon font style */
	--component-numberplate-addon-line-height: 		1;			/* numberplate field addon line height */
	--component-numberplate-addon-text-color: 		black;		/* numberplate field addon text color */
	--component-numberplate-addon-background-color:	white;		/* numberplate field addon background color */

	--component-numberplate-city-font:				"Open Sans";/* number plate city text font */
	--component-numberplate-city-font-size:			8px;		/* number plate city text font size */
	--component-numberplate-city-font-weight:		normal;		/* number plate city text font weight */
	--component-numberplate-city-font-style:		normal;		/* number plate city text font style */
	--component-numberplate-city-text-color:		#aaaaaa; /* number plate city text color*/
	--component-numberplate-city-bottom:			3px;		/* number plate city text offset from bottom */
	--component-numberplate-city-left:				35px;		/* number plate city text offset from left */

	/* disabled */
	--component-numberplate-disabled-font-size:		var(--component-numberplate-font-size);		/* numberplate field input font size */
	--component-numberplate-disabled-font-weight:	var(--component-numberplate-font-weight);		/* numberplate field font weight */
	--component-numberplate-disabled-font-style:	var(--component-numberplate-font-style);		/* numberplate field font style */
	--component-numberplate-disabled-text-color: 	#888888;		/* numberplate field text color */
	--component-numberplate-disabled-background-color: #dddddd;		/* numberplate field background color */
	--component-numberplate-disabled-border-size:	var(--component-numberplate-border-size);		/* numberplate field border size */
	--component-numberplate-disabled-border-color:	#666666;		/* numberplate field border color */

	/* mini */
	--component-numberplate-mini-width:				120px;
	--component-numberplate-mini-margin:			-4px 0 0 0;
	--component-numberplate-mini-padding:			4px 5px 4px 5px;
	--component-numberplate-mini-font-size:			16px;
	--component-numberplate-mini-line-height:		1;
	--component-numberplate-mini-border-size:		1px;

	--component-numberplate-mini-addon-padding:		0 0 0 0;
	--component-numberplate-mini-addon-font-size:	6px;
	--component-numberplate-mini-addon-line-height:	1;
	--component-numberplate-mini-addon-width:		12px;
	--component-numberplate-mini-addon-offset:		2px;
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* number plate field:

number-plate-field.number-plate-field
|
+--div.number-plate-country
|  |
|  +--span
|
+--input
|
+--span.number-plate-city-name
*/

.number-plate-field { display: flex; position: relative;  }
.number-plate-field input { vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; min-width: 1px;
							box-shadow: none; resize: none; margin: 0; }
.number-plate-field input:active, .number-plate-field input:focus { outline: none; text-decoration: none; }
.number-plate-field input:focus { box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(83,175,49,0.6); border-color: var(--main-color); }
.number-plate-field  { width: var(--component-numberplate-width); max-width: var(--component-numberplate-width); margin: 0; }
.number-plate-field .number-plate-city-name { font-family: var(--component-numberplate-city-font); max-width: 100%; white-space: nowrap;
					font-size: var(--component-numberplate-city-font-size); font-weight: var(--component-numberplate-city-font-weight);
					font-style: var(--component-numberplate-city-font-style); color: var(--component-numberplate-city-text-color);
					position: absolute; bottom: var(--component-numberplate-city-bottom); left: var(--component-numberplate-city-left); }

.number-plate-field input, .number-plate-field.ng-invalid input.ng-untouched, .number-plate-field input.ng-invalid.ng-untouched {
					 font-family: var(--component-numberplate-font); font-size: var(--component-numberplate-font-size);
					 font-weight: var(--component-numberplate-font-weight); font-style: var(--component-numberplate-font-style);
					 line-height: var(--component-numberplate-line-height); color: var(--component-numberplate-text-color);
					 background-color: var(--component-numberplate-background-color); box-shadow: var(--component-numberplate-shadow);
					 border-radius: var(--component-numberplate-border-radius); border-bottom-left-radius: 0; border-top-left-radius: 0;
					 border: var(--component-numberplate-border-size) solid var(--component-numberplate-border-color);
					 padding: var(--component-numberplate-padding); }

.number-plate-field[disabled] input {
					font-weight: var(--component-numberplate-disabled-font-weight); font-style: var(--component-numberplate-disabled-font-style);
					color: var(--component-numberplate-disabled-text-color); background-color: var(--component-numberplate-disabled-background-color);
					box-shadow: var(--component-numberplate-disabled-shadow);
					border: var(--component-numberplate-disabled-border-size) solid var(--component-numberplate-disabled-border-color); }

/* left addon with country name */
.number-plate-field .number-plate-country {
		text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block;
		padding: var(--component-numberplate-addon-padding); font-family: var(--component-numberplate-addon-font);
		font-size: var(--component-numberplate-addon-font-size); font-weight: var(--component-numberplate-addon-font-weight);
		font-style: var(--component-numberplate-addon-font-style); line-height: var(--component-numberplate-addon-line-height);
		color: var(--component-numberplate-addon-text-color); background-color: var(--component-numberplate-addon-background-color);
		min-width: var(--component-numberplate-addon-width);
		border: var(--component-numberplate-border-size) solid var(--component-numberplate-border-color); }

.number-plate-field .number-plate-country, .number-plate-field.important .number-plate-country, .number-plate-field[required] .number-plate-country,
	.number-plate-field.empty .number-plate-country, .number-plate-field.invalid .number-plate-country, .number-plate-field.focus .number-plate-country
	.number-plate-field[disabled] .number-plate-country {
		border-right: none; border-top-left-radius: var(--component-numberplate-border-radius);
		border-bottom-left-radius: var(--component-numberplate-border-radius); }
.number-plate-field input { border-top-left-radius: 0; border-bottom-left-radius: 0;  width: 100%; }


.number-plate-field .number-plate-country { position: relative; }
.number-plate-field .number-plate-country span { position: absolute; left: 0; text-align: center; width: 100%;
												   bottom: var(--component-numberplate-addon-offset); }
.number-plate-field.format-type-eu .number-plate-country {
	background-image: url(number_plate_eu.svg); background-repeat: no-repeat; background-size: auto 100%; color: white; }
.number-plate-field.format-type-eu input { border-left: none; }

.number-plate-field.country-nl .number-plate-country,
	.number-plate-field.country-nl input { background-color: #fad20e; }
.number-plate-field.country-lu .number-plate-country,
	.number-plate-field.country-lu input { background-color: #fad20e; }
.number-plate-field.country-gb .number-plate-country,
	.number-plate-field.country-gb input { background-color: #fad20e; }

.number-plate-field.country-xs .number-plate-country,
.number-plate-field.country-me .number-plate-country,
.number-plate-field.country-xk .number-plate-country,
.number-plate-field.country-al .number-plate-country { color: white; background-color: #2142a4; }


/* mini */
.number-plate-field.number-plate-mini { width: var(--component-numberplate-mini-width); max-width: 100%;
									    margin: var(--component-numberplate-mini-margin); overflow: hidden; }
.number-plate-field.number-plate-mini .number-plate-text { white-space: nowrap;
					 vertical-align: middle;
					 font-family: var(--component-numberplate-font); font-size: var(--component-numberplate-mini-font-size);
					 font-weight: var(--component-numberplate-font-weight); font-style: var(--component-numberplate-font-style);
					 line-height: var(--component-numberplate-mini-line-height); color: var(--component-numberplate-text-color);
					 background-color: var(--component-numberplate-background-color); box-shadow: var(--component-numberplate-shadow);
					 border-radius: var(--component-numberplate-border-radius); border-bottom-left-radius: 0; border-top-left-radius: 0;
					 border: var(--component-numberplate-mini-border-size) solid var(--component-numberplate-border-color);
					 padding: var(--component-numberplate-mini-padding);  width: 100%; }

.number-plate-field.number-plate-mini .number-plate-country {
		text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block;
		padding: var(--component-numberplate-mini-addon-padding);
		font-size: var(--component-numberplate-mini-addon-font-size);
		line-height: var(--component-numberplate-mini-addon-line-height);
		min-width: var(--component-numberplate-mini-addon-width);
		border-width: var(--component-numberplate-mini-border-size)}

.number-plate-field.number-plate-mini .number-plate-country span { bottom: var(--component-numberplate-mini-addon-offset); }
.number-plate-field.format-type-eu .number-plate-country { background-size: auto 100%; }