/*
:root
{
	--nav-height: 96px;
	--button-text-font-size: 14px;
	--button-text-small-font-size: 12px;
	--blank-background: rgb(64, 64, 64);
	--blank-background-semi-transparent: rgba(64, 64, 64, 0.5);
	--screen-background: black;
	--screen-backgroundlowlight: #202020;
	--screen-backgroundhighlight: #404040;
	--neonblue: #6060FF;
	--neonred: #FF4040;
	--neongreen: #00FF00;
	--neonmagenta: #F000F0;
	--neonyellow: #F0F000;
}
*/

body
{
	margin: 0;
	font-family: 'Raleway', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 12pt;
}

input[type="text"], input[type="email"], input[type="password"] { padding: 1px; padding-bottom: 3px; /* padding for consistency, otherwise it's 1px for Firefox but 0px for Chrome */ border: none; border-bottom: solid 1px white; border-radius: initial; background: black/*var(--screen-background)*/; color: white; font-family: 'Raleway', sans-serif; font-style: normal; font-weight: normal; font-size: 18px; }
input[type="text"].invalid, input[type="email"].invalid, input[type="password"].invalid { border-bottom-color: #FF4040/*var(--neonred)*/; }
input[type="text"].lowlight, input[type="email"].lowlight, input[type="password"].lowlight { background: #202020/*var(--screen-backgroundlowlight)*/; }
input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder { color: #C0C0C0; }

textarea { padding: 3px 6px 3px 6px; border: solid 1px white; border-radius: 0; background: black/*var(--screen-background)*/; color: white; font-family: 'Raleway', sans-serif; font-style: normal; font-weight: normal; font-size: 18px; }
textarea.invalid { border-color: #FF4040/*var(--neonred)*/; }

select { padding: 4px; border: solid 1px white; border-radius: 6px; font-size: 14px; background: black; color: white; }
select.invalid { border-color: #FF4040/*var(--neonred)*/; }

*:focus { outline: none; }  /* avoid nasty outlines, e.g. around text inputs, e.g. in Chrome */
* { box-shadow: none; }  /* avoid nasty shadows, e.g. around text inputs, e.g. in Firefox */

.neonblue { color: #6060FF/*var(--neonblue)*/; }
.neonred { color: #FF4040/*var(--neonred)*/; }
.neonmagenta { color: #F000F0/*var(--neonmagenta)*/; }
.neonyellow { color: #F0F000/*var(--neonyellow)*/; }

.button { display: inline-block; position: relative; height: 92px; margin: 0 24px; text-align: center; cursor: pointer; }
.button.close { margin: 0 8px; }
.button.disabled { cursor: inherit; }
.buttonicon { display: inline-block; position: relative; width: 72px; height: 72px; }
.buttoniconsvg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.buttontext { position: absolute; left: 0; bottom: 0; width: 100%; font-size: 14px/*var(--button-text-font-size)*/; }

.button.small { height: 54px; padding-left: 6px; padding-right: 6px; margin: 0 18px 0 18px; cursor: pointer; }
.button.small .buttonicon { display: inline-block; position: relative; width: 36px; height: 36px; }
.button.small .buttoniconsvg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.button.small .buttontext { position: absolute; left: 0; bottom: 0; width: 48px /* same as .buttonicon.small width + .button.small padding-left + .button.small padding-right */; font-size: 12px/*var(--button-text-small-font-size)*/; }

@media all and (max-width: 470px)
{
	.button.reactive { height: 85px; margin: 0 18px; }
	.button.close.reactive { margin: 0 6px; }
	.button.reactive .buttonicon { width: 66px; height: 66px; }
	.button.reactive .buttontext { font-size: 13px; }
}
@media all and (max-width: 410px)
{
	.button.reactive { height: 78px; margin: 0 12px; }
	.button.close.reactive { margin: 0 4px; }
	.button.reactive .buttonicon { width: 60px; height: 60px; }
	.button.reactive .buttontext { font-size: 12px; }
}
@media all and (max-width: 360px)
{
	.button.reactive { height: 71px; margin: 0 9px; }
	.button.close.reactive { margin: 0 3px; }
	.button.reactive .buttonicon { width: 54px; height: 54px; }
	.button.reactive .buttontext { font-size: 11px; }
}
@media all and (max-width: 320px)
{
	.button.reactive { height: 64px; margin: 0 6px; }
	.button.close.reactive { margin: 0 2px; }
	.button.reactive .buttonicon { width: 48px; height: 48px; }
	.button.reactive .buttontext { font-size: 10px; }
}
@media all and (max-width: 280px)
{
	.button.reactive { height: 57px; margin: 0 3px; }
	.button.close.reactive { margin: 0 1px; }
	.button.reactive .buttonicon { width: 42px; height: 42px; }
	.button.reactive .buttontext { font-size: 9px; }
}

.inlinebuttons { display: table; height: 54px /* same as .button.small height */; padding-left: 6px; padding-right: 6px; }
.inlinebuttons.wide { padding-left: 0; padding-right: 0; }  /* remove padding to allow wide inline buttons to line up with regular inline buttons */
.inlinebutton { display: table-cell; position: relative; padding-left: 6px; padding-right: 6px; margin: 0; cursor: pointer; }
.inlinebutton.wide { padding-left: 12px; padding-right: 12px; }
.inlinebuttonicon { position: relative; width: 36px /* same as .buttonicon.small width */; height: 36px; /* same as .buttonicon.small height */ }
.inlinebuttoniconsvg { top: 0; left: 0; width: 100%; height: 100%; }
.inlinebuttontext { position: absolute; left: 0; bottom: 1px; width: 48px /* same as .inlinebuttonicon width + .inlinebutton padding-left + .inlinebutton padding-right */; text-align: center; font-size: 12px/*var(--button-text-small-font-size)*/; padding-bottom: 0; overflow: hidden; }
.inlinebuttontext.wide { width: 60px /* same as .inlinebuttonicon width + .inlinebutton.wide padding-left + .inlinebutton.wide padding-right */; }
.inlinebuttontext.tiny { font-size: 10px; }

.kookoomaps { font-family: 'Bellefair', serif; font-style: normal; font-weight: normal; }
.kookoomapsinline { font-size: 160%; }
.kookoomapsproduct { font-variant: small-caps; font-size: 80%; }

.spinner { position: absolute; top: 30% /* formerly vh */; width: 100%; text-align: center; }
@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }.uil-default-css > div:nth-of-type(1){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -1s;animation-delay: -1s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(2){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.9166666666666666s;animation-delay: -0.9166666666666666s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(3){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.8333333333333334s;animation-delay: -0.8333333333333334s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(4){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.75s;animation-delay: -0.75s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(5){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.6666666666666666s;animation-delay: -0.6666666666666666s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(6){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5833333333333334s;animation-delay: -0.5833333333333334s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(7){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(8){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.4166666666666667s;animation-delay: -0.4166666666666667s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(9){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.3333333333333333s;animation-delay: -0.3333333333333333s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(10){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.25s;animation-delay: -0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(11){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.16666666666666666s;animation-delay: -0.16666666666666666s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(12){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.08333333333333333s;animation-delay: -0.08333333333333333s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}