* {
	-webkit-tap-highlight-color: transparent; /*tira o highlight de hover do chrome mobile*/
}

:not(:defined) {
	display: none;
}

button img {
	pointer-events: none; /*para nao roubar target do click no botao*/
	vertical-align: middle;
}

textarea, pre {
	tab-size: 4;
	/* -moz-tab-size: 4; */
}

.flexbox-line-break {
	width: 100%;
	height: 0px;
}


.botao-bonito {
	display: inline-block; /*para <a> manter margens, pois ele eh inline por padrao*/
	background-color: #08F;
	border-radius: 10px; 
	box-shadow: 0 3px 0 #008;
	font-size: 14px;
	font-family: serif;
	color: #FFF;
	padding: 0.2em 0.8em;
	position: relative;
	text-decoration: none;
	outline: none;
	border: none;
	text-transform: uppercase;
	top: 0px;
	margin-bottom: 10px;
	/* height: 16px; */
	box-sizing: content-box;
	/* line-height: 18px; */
	
	--transition-props: 80ms ease-in-out;
	
	transition: top var(--transition-props),
		box-shadow var(--transition-props);
}

.botao-bonito:hover {
	background-color: #0AF;
	cursor: pointer;
	top: 0px;
}

.botao-bonito:active {
	box-shadow: 0 0px 0 #008;
	top: 3px;
}


dialog.smooth-anim {
	--transition-time: 250ms;
	
	transform: translateY(-40px);
	transition: all var(--transition-time) ease-in-out;
	opacity: 0;
}

dialog.smooth-anim::backdrop {
	transition: background-color var(--transition-time) ease-in-out;
	background-color: #0000;
}

dialog.smooth-anim.showing {
	transform: unset;
	opacity: 1;
}

dialog.smooth-anim.showing::backdrop {
	background-color: #0008;
}

dialog.smooth-anim.fading {
	transform: translateY(40px);
}