div#auth0.alert.alert-info {
	display: flex;

	max-width: 80%;
	margin: 0 10%;
	padding: 0.75rem 2rem 1.5rem 3rem;
	overflow: auto;

	/* square edged top corners */
	border-radius: 0 0 0.25rem 0.25rem;
	box-shadow: 0 0.25rem 0.5rem hsla(210, 50%, 20%, 0.75);
}
div#auth0.alert.alert-info h1 {
	align-self: flex-start;
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}
div#auth0.alert.alert-info i {
	font-size: 1rem;
	position: absolute;
	top: 1.15rem;
	left: 1rem;
}

div#auth0.alert.alert-info p {
	align-self: safe;
	font-size: 1rem;
	margin-bottom: 0;
}

div#auth0.alert.alert-info a {
	color: #06c;
	font-weight: 600;
}
div#auth0.alert.alert-info a:hover {
	color: #036;
}

.alert-dismissible .close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.25rem 0.75rem;
	color: inherit;
}

p sup {
	line-height: 1;
	font-size: 0.66rem;
}

/* body background grad. + antialised font smoothing on html */
html {
	-webkit-font-smoothing: antialiased;
}
body {
	font-family: "segoe ui", sans-serif;
	/***  CSS Gradient  ***/
	/*  Chrome 1-9 and Safari 4-5.0  */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgb(6, 63, 152)),
		color-stop(1, rgb(0, 102, 204))
	);

	/*  Chrome 10+ Safari 5.1+ Mobile Safari  */
	background-image: -webkit-linear-gradient(
		top,
		rgb(6, 63, 152),
		rgb(0, 102, 204)
	);

	/*  Firefox 3.6+  */
	background-image: -moz-linear-gradient(top, rgb(6, 63, 152), rgb(0, 102, 204));

	/*  IE 10+  */
	background-image: -ms-linear-gradient(top, rgb(6, 63, 152), rgb(0, 102, 204));

	/*  Opera 11.10+  */
	background-image: -o-linear-gradient(top, rgb(6, 63, 152), rgb(0, 102, 204));

	/*  W3C  */
	background-image: linear-gradient(top, rgb(6, 63, 152), rgb(0, 102, 204));
	background-repeat: no-repeat;
	height: 100vh;
}

#refresh.btn {
	margin: 0 auto;
	max-width: 15rem;
	text-align: center;
	font-weight: 600;
}
#refresh.btn:hover {
	color: #06c;
}

/* for my old iPhone 5S ;) */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
	div#auth0.alert.alert-info {
		font-size: 75% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}
	body {
		padding-bottom: 2rem;
		min-height: 100vh;
		/* mobile viewport bug fix */
		min-height: -webkit-fill-available;
	}
	html {
		height: -webkit-fill-available;
	}
}