@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Quicksand:wght@500&family=Space+Grotesk&display=swap');

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 600,
  'GRAD' 200,
  'opsz' 48
}

:root {
  --plblue: #0011AA ;
  --plyellow: #fcbe11;
  --black: #151515;
  --white: #FFF;
  --pureblack: #000;
  --dkgrey: #222;
  --ltgrey: #F0F0F8;
  --ired: #cc2121;
  --accent: #6883BA;
}

@font-face {
    font-family: 'charles_wrightbold';
    src: url('charles-wright.bold-webfont.woff2') format('woff2'),
         url('charles-wright.bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CharlesWright1935';
    font-weight: normal;
	font-style: normal;
    src: url('CharlesWright1935.otf') format('opentype');
}

html {background: var(--ltgrey); padding:0; margin: 0; }
	a {color:var(--plblue); }
	a:hover {color:var(--ired); }
	
header, body {margin: 0; padding: 0; font-family: Inter, sans-serif; }

.mobilebreak {visibility: hidden; display: none;}

h4 {margin-top: 5px;}

.title {height: 50px; background-color: var(--pureblack) ; font-family: charles_wrightbold; color: var(--white);  font-size: 36px; margin: 0; padding: 0 10px 10px 10px; border-bottom: 2px solid var(--plblue);}
.title .version {font-family: sans-serif; text-align: right; font-size: 12px;}
.title .inner {font-family: Inter, sans-serif; font-size: 14px; text-align: right; padding: 5px 10px; float: right; margin-top: 25px;}
.title .inner a {color: var(--plyellow);}
.title .inner a:hover {color: var(--white);}
.main {padding: 10px;}
.leader {font-size: 14px; margin-bottom: 10px;}
.yellow {color: var(--plyellow) ;}

.plate fieldset, .plateresultbox {padding: 0;
				margin: 0;
				border: 0;
				text-align: center;
				vertical-align: middle;}
.plate input, .plateresult {font-family: charles_wrightbold;
				text-transform: uppercase;
				text-align: center;
				border: 2px solid #000;
				margin: 0;
				line-height: 0.85;
				font-size: 100px;
				vertical-align: middle;
				height: 100px;
				width: 465px;
				margin: 0 auto;
}
.plate input {border-right: 0; border-radius: 8px 0 0 8px; background: var(--white); 
				background-image: linear-gradient(to top left, #FFF, #F3F3FA); color: var(--dkgrey); padding: 0 0 16px 0; white-space: pre-wrap;}
.plate input:focus {border-color: var(--plblue);}

.plate button {font-family: 'Source Sans Pro', sans-serif;
				font-size: 35px;
background: var(--plblue);
color: var(--white);
border: 0;
height: 120px;
margin-left: 0;
padding: 8px;
border-radius:  0 8px 8px 0;
text-align: center;
				vertical-align: middle;}
.plate button:hover {background: var(--plyellow); color: var(--black);}
.smlspace {font-size: 70%;}
svg { font-family: arial, sans-serif; }

/*  */
.modern {border-radius: 8px; background: var(--plyellow); color: var(--black); padding: 8px 12px;}
.prefix {border-radius: 8px; background: var(--plyellow); color: var(--black); padding: 8px 12px 0px 12px; font-family: CharlesWright1935; font-size: 92px; line-height: 95%;}
.iom {border-radius: 8px; background-image: url(../images/GBM-flag.svg); background-size: contain; background-position: left; background-repeat: no-repeat; background-color: var(--plyellow); color: var(--black); padding: 16px 0px 0px 55px; font-size: 85px;}
.veteran {font-family: CharlesWright1935; border-radius: 2px; background: var(--black); color: var(--white); padding: 8px 12px; line-height: 95%;}
.vintage {font-family: CharlesWright1935; border-radius: 2px; background: var(--black); background-image: linear-gradient(to top left, #0a0a0a, #4c5a62); color: #EBEBEE; padding: 8px 12px 0px 12px; line-height: 95%;
    font-size: 92px; border-color: #888 #666 #333 #fff; border-width: 4px;
text-shadow:  -2px -1px 1px #9A9AAC, 1px 2px 1px #314167, 
    0 6px 4px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.2), 
    0 3px 5px rgba(0,0,0,.13), 
    0 5px 10px rgba(0,0,0,.18), 
    0 10px 10px rgba(0,0,0,.13), 
    0 15px 15px rgba(0,0,0,.11);}
.classic {font-family: CharlesWright1935; border-radius: 3px; background: var(--plyellow); background-image: linear-gradient(to bottom right, var(--plyellow), #d88000); color: var(--black); padding: 8px 12px 0px 12px; line-height: 95%;
    font-size: 92px;  border-color: #888 #666 #333 #fff; border-width: 4px;
	text-shadow:  -2px -1px 2px #ceba99, 1px 2px 1px #83531c, 
    0 6px 4px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.2), 
    0 3px 5px rgba(0,0,0,.13), 
    0 5px 10px rgba(0,0,0,.18), 
    0 10px 10px rgba(0,0,0,.13), 
    0 15px 15px rgba(0,0,0,.11);
	}
.ireland {font-family: CharlesWright1935; border-radius: 2px; background: var(--ired); background-image: linear-gradient(to bottom right, #e6442b, #bf3623); color: var(--black); padding: 8px 12px; line-height: 95%; border-color: #888 #666 #333 #fff; border-width: 4px;
text-shadow:  -1px -1px 2px #d4a6c1, 1px 2px 1px #563c43, 
    0 6px 4px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.2), 
    0 3px 5px rgba(0,0,0,.13), 
    0 5px 10px rgba(0,0,0,.18), 
    0 10px 10px rgba(0,0,0,.13), 
    0 15px 15px rgba(0,0,0,.11);}
	

.diplomatic {font-family: 'Quicksand', sans-serif; border-radius: 8px; background: var(--plyellow); color: var(--black); padding: 8px 12px; font-size: 103px;}
.diplomatic .diploserial {font-family: 'Space Grotesk', sans-serif;}

.yearletter:hover, .areacode:hover, .letters:hover, .serial:hover, .digits:hover {color: var(--plblue);}
.vintage .yearletter:hover, .vintage .areacode:hover, .vintage .letters:hover, .vintage .serial:hover, .vintage .digits:hover {color: var(--plyellow);}
.veteran .yearletter:hover, .veteran .areacode:hover, .veteran .letters:hover, .veteran .serial:hover, .veteran .digits:hover {color: var(--plyellow);}


/* Tooltip text */
.ttp {  position: relative;}

.ttp .tooltiptext {
  visibility: hidden;
  width: 120px;
	top: 90%;
  left: 50%;
  margin-left: -60px;
  background-color: var(--plblue);
  color: #FFF;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
   opacity: 0;
  transition: opacity 0.5s;
  font-family: Inter, sans-serif;
  font-size: 14px;
  text-transform: none;
  text-shadow: none;
  line-height: 18px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.vintage .ttp .tooltiptext, .veteran .ttp .tooltiptext {background-color: var(--plyellow); color: #000;}

.ttp .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--plblue) transparent;
}

.vintage .ttp .tooltiptext::after, .veteran .ttp .tooltiptext::after {border-color: transparent transparent var(--plyellow) transparent;}

/* Show the tooltip text when you mouse over the tooltip container */
.ttp:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.succdiv {color:#006e07;}
.errordiv {color:#ff0015;}

.button {background-color: var(--plblue) ; padding: 3px 6px; text-decoration:none; color: var(--white);}
.button:hover {background-color: var(--plyellow) ; color: var(--black); }
input.button, button.button {font-size: 16px; border: 0; font-family: Inter, sans-serif;}

.tinyreg {border: 1px solid var(--pureblack); border-radius: 3px; background-color: var(--white); padding: 0px 5px 2px 5px; font-family: charles_wrightbold; line-height:85%;}

.map {margin-bottom: 10px;}

/*alternative text shadow 
text-shadow: 
0 1px 0 #bbb, 
    0 2px 0 #9e9e9e, 
    0 3px 1px #8c8c8c, 
    0 4px 2px #7a7a7a, 
    0 5px 3px #666, 
    0 6px 4px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 
    0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);

*/

@media only screen and (max-width: 600px) {
  .plate input, .plateresult {
	  width:245px;
	  line-height: 0.92;
	height: 200px;
}
.ireland {line-height: 1.02; font-size: 95px;}
.vintage, .classic, .prefix {font-size: 88px; line-height: 1.06;}
.veteran {font-size: 91px; line-height: 1.07;}
.plate button {height: 220px;}
.mobilebreak {visibility: visible; display: inline;}

.plateresult.long {
	height: 280px;
}

.iom {background-image: none; padding: 25px 12px 0px 12px;}
.expand {line-height: 1.02;}

				
}