*{
    box-sizing: border-box;
}

*[hidden]{
	display:none !important;
}

body{
	font-family: var(--normal-font);
	font-size: 12px;	
}

/* Appended by firebase ui when auth is set to emulator when environment is local */
.firebase-emulator-warning{
	display: none;
}

body.twa-mode #ko-fi-link,
body.wrapped-app-mode #ko-fi-link{
	display: none !important;
}

strong{
	font-family: var(--bold-font);
	font-weight: normal; /* safari tries to extra bold the bold */
}

a{
	cursor: pointer;
}

/*

  Form

*/

form{
	margin-bottom: 4px;
	/* text-align:center; */
}

input[type="text"],input[type="text"]:empty,input[type="text"]:focus,
input[type="email"],input[type="email"]:focus,input[type="email"]:active,input[type="email"]:empty,
input[type="password"],input[type="password"]:focus,input[type="password"]:active,input[type="password"]:empty,
textarea,textarea:empty,textarea:focus,
mech-menu{
	background-color:#efefef;
	outline:none;
	/* recess shadow*/
	border-top: 1px solid #ccc;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid transparent;
	padding: 10px 12px 10px 12px;
	width: 100%;
	flex-grow: 1;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
mech-menu:focus,mech-menu:focus-within{	
	outline:2px solid var(--hover-color);
	outline-offset: -2px;
}

/* input[type="text"].accepted,
input[type="email"].accepted,
input[type="password"].accepted{	
	background-color: var(--option-selected-color);	
}
input[type="text"].accepted:focus,
input[type="email"].accepted:focus,
input[type="password"].accepted:focus{	
	background-color:var(--faded-warning);		
} */

input[type="text"].accepted,
input[type="email"].accepted,
input[type="password"].accepted{	
	color: var(--hover-color);	

	font-family:var(--bold-font);
	font-weight: normal;

	background-color:aliceblue
}
/* input[type="text"].accepted:focus,
input[type="email"].accepted:focus,
input[type="password"].accepted:focus{	
	color: black;	
} */

body{
	/** In many situations we need the text in form/header/etc. elements to be padded the same */
	--inner-left-padding:12px;
}

h4,
label:not(.button){
	display: block;
	text-transform: uppercase;

	font-family: var(--bold-font);
	font-weight: normal;

	font-size: 7px;
	color: #aaa;
	letter-spacing: 0.1em;
	padding-left: var(--inner-left-padding);
	margin-bottom: 4px;
	margin-top:32px;
}

button,
label.button
{
	--default-color:#efefef;
	/* background-color: var(--warning-yellow); */	
	background-color:var(--default-color);
	/* color:black; */
	color:#333;
	/* text-transform: uppercase; */
	letter-spacing: 0.05em;
	font-size:12px;
	padding:10px 12px 10px 12px;
	padding-left:var(--inner-left-padding);
	min-width:100px;
	width:100%;
	outline:none;
	text-align: left;	
}

button:hover,
label.button:hover,
button:focus,
label.button:focus{
	outline:2px solid var(--hover-color);
	outline-offset: -2px;
	color:black;
	background-color:var(--default-color);
	/*FOCUS dim  */
	/* background-color: #ddd;
    color: #888; */
}

button.emph,
label.emph{
	--default-color: var(--warning-yellow);	
}

button:active,
label.button:active{
	background-color:var(--hover-color) !important;
	color:white !important;
	outline:0px;
}

button.accepted{	
	background-color: transparent;	
	color:gray;
	outline-color: white;
}

button.invalid{
	background-color: #efefef;
	outline-color:#efefef;
	color:gray;
	pointer-events: none;
}

button:not(.toggled-on)[disabled]{
	background-color: transparent;
	outline: 1px dotted #DDD;
	outline-offset: -1px;
    color: #DDD;
	pointer-events: none;
}

button.toggled-on[disabled]{
	color: mediumseagreen;
	pointer-events: none;
}


/* input[type="text"],
mech-menu{
	font-family:var(--bold-font);
} */



/*

	other stuff

*/

ul{
	list-style-type: none;
	margin:0px;
	padding:0px;
}



a{
	text-decoration: none;
	color:#2196f3;
	border-bottom: 4px solid #2196f31f;
	/*padding-bottom: 4px;*/
}
a:focus{
	outline:2px solid var(--hover-color);	
}
a strong{
	color:#9c27b0
}

/*

*/

h1{
	font-family:var(--bold-font);	
	font-weight: normal; /* safari tries to extra bold the bold */

	padding-left:var(--inner-left-padding);
	font-size: 21px;
	/* margin-bottom:46px; */
}
h1.sticky-header{
	position: sticky;
	top: 12px;
	z-index: 3;
	background-color: #ffffffcc;
	outline: 12px solid #ffffffcc;
}

h2{
	font-family: var(--bold-font);
	font-weight: normal; /* safari tries to extra bold the bold */

	padding-left:var(--inner-left-padding);
	text-transform: uppercase;
	letter-spacing: 0.07em;


	font-size: 14px;
}

h3,h4,h5{
	font-family: var(--bold-font);
	font-weight: normal; /* safari tries to extra bold the bold */
}

/** See <label> in Forms section */
/* h4{	
} */