::-ms-reveal {
	display: none !important;
}

html {
	font-size: 14px;
	position: relative;
	min-height: 100dvh;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.error-box {
	background: #fff67b;
	width: 100%;
	color: #1e1d00 !important;
}

	.error-box ul {
		padding: .4em;
		list-style: none;
	}

	.error-box span {
		padding: .4em;
		list-style-position: inside;
	}


body {
	margin-bottom: 60px;
}

	body::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(rgba(255, 255, 255, 0), #198754ad);
		z-index: -1;
	}


	body.dark {
		margin-bottom: 60px;
	}

		body.dark:before {
			background: #000 url(../img/bg.svg) repeat center center;
			filter: brightness(0.3) hue-rotate(45deg);
			width: 300%;
			height: 300%;
			background-size: var(--zoom, 270%);
			left: -100%;
			top: -100%;
			transform: rotate(var(--rotation, 45deg));
		}


	body.dark label, .text-white, .link-light {
		text-shadow: 0px 1px 2px black;
	}


/* make phone number dropdown full width */
.iti--allow-dropdown {
	width: 100%;
}


.form-control-lg {
	border: 1px solid #d4d4d4;
	transition: 0.3ms ease-in-out;
}

/* INDEX PAGE */
.platform-content {
	display: none
}


.btn.google {
	border: none;
	background: #DB4437;
	color: #fff;
}

	.btn.google:hover {
		background: #e36e64;
		color: #fff;
	}

.dark-linear-gradient {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.3));
}

.dark-radial=gradient {
	background: radial-gradient(circle, rgb(13 1 44 / 42%), rgb(0 0 0 / 0%) 50% );
}

.glassy-background {
	background: rgb(214 245 255 / 40%);
}


.btn.facebook {
	border: none;
	background: #4267B2;
	color: #fff;
}

	.btn.facebook:hover {
		background: #577dcb;
		color: #fff;
	}

.no-shadow {
	text-shadow: none;
}

.btn-gradient {
	background: linear-gradient(to top right, #20c997, #00e5ff);
}

/* ICONS */

.round-button {
	display: flex;
	z-index: 1;
	padding: 0;
	margin: 10px;
	overflow: hidden;
	vertical-align: middle;
	border-radius: 50%;
	width: 47px;
	height: 47px;
	color: #808080;
	border: 1px solid;
	border-color: #808080;
	background: #fff;
	transition: all 0.3s
}

	.round-button:hover {
		color: #4267B2;
		border-color: #4267B2;
	}

		.round-button:hover i {
			color: #4267B2;
		}

	.round-button.google:hover {
		color: #DB4437;
		border-color: #DB4437;
	}


		.round-button.google:hover i {
			color: #DB4437
		}


	.round-button i {
		display: inline-block;
		width: inherit;
		color: #000;
		text-align: center;
		font-size: 1.25rem;
		line-height: 40px;
	}
/* Somewhere the scss mixins are magically hiding so lets just code our own classes */
.boma-rounded-1 {
	border-radius: 1rem;
}

#reveal-content {
	font-weight: bold;
	text-decoration: none;
}

.input-group-blank {
	display: flex;
	align-items: center;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: transparent;
	border-left: none;
	border-radius: .25rem;
}


.separator {
	font-weight: 600;
	opacity: .3;
	display: flex;
	align-items: center;
	text-align: center;
}

	.separator::before,
	.separator::after {
		content: '';
		flex: 1;
		border-bottom: 0.12rem solid #212529;
		top: 2px;
		position: relative;
	}

	.separator:not(:empty)::before {
		margin-right: .25em;
	}

	.separator:not(:empty)::after {
		margin-left: .25em;
	}

.no-border {
	border: none !important;
}


.icon {
	background-image: url('../img/sso-icons.svg');
	background-repeat: no-repeat;
	background-size: auto 101%;
	display: inline-block;
}

	.icon.small {
		height: 1em;
		width: 1em;
	}

	.icon.medium {
		height: 2em;
		width: 2em;
	}

	.icon.large {
		height: 4em;
		width: 4em;
	}




.sso_twitter {
	background-position: 0 0;
}

.sso_google {
	background-position: 25% 0;
}

.sso_facebook {
	background-position: 50% 0;
}

.email {
	background-position: 75% 0;
}

.phone {
	background-position: 101% 0;
}


a {
	color: #71aaff;
	text-decoration: none;
	font-weight: 500;
}

	a:hover {
		color: #b1d1ff;
	}


.readable-line {
	background: rgb(0 0 0 / 20%);
	padding: .2em;
}