@font-face {
  font-family: 'UKNumberPlate';
  src: url('fonts/UKNumberPlate.ttf');
}

:root {
--button-color : #28af62;
--message-text-color : #28af62;
--message-color : #ddd;
}


.message-text {
	color : var(--message-text-color);
}

@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-VariableFont_wght.ttf');
}


#contain {
	text-align : center;
	font-family : "Mulish";
	background-color : #eee!important;
	border-radius : 10px;
	padding-top : 2vw;
}


#regWidgetContent {
	padding-left : 0.5vw;
	padding-right: 0.5vw;
	
}


#plateInput {
	background-color : yellow;
	width : 45vw;
	font-family : "UKNumberPlate";
	font-size : 8vw;
	height : 100%;
	text-align : center;
	border-radius : 1vw;
	background-image : url(uk_plate_sticker.png);
	background-size : contain;
	background-repeat : no-repeat;
}




.goButton {
  	align-items: center;
  	text-align : center;
  	justify-content: space-around;
	min-width : 25%;
	cursor : pointer;
	background-color : var(--button-color);
	color : white;
	font-size : 2em;
	border-radius : 5px;
	border : 4px solid var(--button-color);
	box-shadow: inset 0 0 0 2px white;
	padding : 0.5em;
}

#goSearch {
	border-radius : 50%;
	min-width : 10vw;
	width : 10vw;
	height : 10vw;
	font-size : 2.5vw;
	padding-top : 0.5vw;
	vertical-align : bottom;
}

.boxesContainer {
	padding : 1em;
	margin-left : auto;
	margin-right : auto;
}

.boxesContainer label {
		font-weight : bold;
		text-align: right;
		font-size : 0.8em;
		margin-right : 2vw;
		display : inline-block;
		white-space : nowrap;
		width : 35%;

		
}

.boxesContainer select {
	font-family : "Mulish";
	width : 50%;
	padding-top : 0.5em;
	padding-bottom : 0.5em;
	
}

.boxesContainer input {
	font-family : "Mulish";
	width : 50%;
}

.result {
	text-align : center;
	width : 60%;
	font-size : 3vw;
	background-color : var(--message-color);
	color : var(--message-text-color);
	font-size : 2em;
	border-radius : 5px;
	border : 1px solid gray;
	margin-left : auto;
	margin-right : auto;
	margin-top : 4vh;
	margin-bottom: 4vh;
	padding : 1vw;
}

#ajaxloadergb {
	width : 100px;
	height : 100px;
	z-index : 99;
	text-align : center;
	position : absolute;
	display : none;
}


#thanks {
	width : 60%;
	font-size : 4vw;
	background-color : var(--message-color);
	color : var(--message-text-color);
	font-size : 2em;
	border-radius : 5px;
	border : 1px solid gray;
	margin-left : auto;
	margin-right : auto;
	margin-top : 10vh;
	padding : 1vw;
}

.explainHover {
	cursor : pointer;
	color : var(--message-text-color);
	padding-left : 0.5em;
}


#explaination {
	min-height : 5em;
		color : var(--message-text-color);
}

.error {
	color : red;
}