/* Served with native-base.css on the home page's prompt variant, in place of
 * styles.css: what the native signup modal takes from it — Bootstrap's modal, the
 * honeypot row, the password toggle's glyph, the loaders — in styles.css order.
 * Rules that would also reach the rest of the page are confined to the modal with
 * :where(), which adds no specificity: they have to lose to the modal's utility
 * classes exactly as they did in styles.css. The error dialog's own stylesheet,
 * sweetalert2.css, loads just before this one, which carries the theme's two
 * overrides of it. */

@font-face {
	font-family: Icons;
	src: url('../fonts/icons.woff2?79') format('woff2');
	font-style: normal;
	font-weight: 400;
}

a:focus:where(#modal-signup, #modal-signup *),
a:hover:where(#modal-signup, #modal-signup *) {
	color: rgb(35, 82, 124);
	text-decoration: underline;
}

fieldset:where(#modal-signup, #modal-signup *) {
	min-width: 0px;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

.fade:where(#modal-signup, #modal-signup *) {
	opacity: 0;
	transition: opacity 0.15s linear;
}

.fade.in:where(#modal-signup, #modal-signup *) {
	opacity: 1;
}

.modal-open {
	overflow: hidden;
}

.modal:where(#modal-signup, #modal-signup *) {
	position: fixed;
	inset: 0px;
	z-index: 1050;
	display: none;
	overflow: hidden;
	outline: 0px;
}

.modal.fade .modal-dialog:where(#modal-signup, #modal-signup *) {
	transition: transform 0.3s ease-out;
	transform: translate(0px, -25%);
}

.modal.in .modal-dialog:where(#modal-signup, #modal-signup *) {
	transform: translate(0px, 0px);
}

.modal-open .modal:where(#modal-signup, #modal-signup *) {
	overflow: hidden auto;
}

.modal-dialog:where(#modal-signup, #modal-signup *) {
	position: relative;
	width: auto;
	margin: 10px;
}

@media (min-width: 768px) {
	.modal-dialog:where(#modal-signup, #modal-signup *) {
		width: 600px;
		margin: 30px auto;
	}
}

.hidden:where(#modal-signup, #modal-signup *) {
	display: none !important;
}

.icon:where(#modal-signup, #modal-signup *)::before {
	display: inline-block;
	font-family: Icons;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	position: relative;
	text-transform: none;
	top: -1px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: normal;
	font-variant: normal;
}

.icon-password-show:where(#modal-signup, #modal-signup *)::before {
	content: '\e9b8';
}

fieldset:where(#modal-signup, #modal-signup *) {
	margin-bottom: 20px;
}

a:hover:where(#modal-signup, #modal-signup *) {
	color: rgb(64, 94, 209);
}

.modal-dialog:where(#modal-signup, #modal-signup *) {
	margin: 110px auto;
}

.dotloader {
	font-size: 20px;
	margin: 0px auto 27px;
	position: relative;
	text-indent: -9999em;
	transform: translateZ(0px);
	animation-delay: -0.25s;
}

.dotloader,
.dotloader::after,
.dotloader::before {
	color: rgb(77, 113, 241);
	border-radius: 50%;
	width: 0.6em;
	height: 0.6em;
	z-index: 1;
	line-height: 33px;
	animation: 2s ease-in-out 0s infinite normal none running dotloader;
}

.dotloader::after,
.dotloader::before {
	content: '';
	position: absolute;
	top: 0px;
}

.dotloader::before {
	left: -1.5em;
	animation-delay: -0.3s;
}

.dotloader::after {
	left: 1.5em;
	animation-delay: 0.3s;
}

.dotloader.white,
.dotloader.white::after,
.dotloader.white::before {
	color: rgb(255, 255, 255) !important;
}

.bar-loader {
	font-size: 5px;
	position: relative;
	transform: translateZ(0px);
	padding: 0.3em 0px;
	width: 4.8em;
	height: 5.5em;
	display: flex;
	align-items: flex-end;
}

.bar-loader .bar {
	background-color: rgb(77, 113, 241);
	display: inline-block;
	width: 1em;
	margin: 0px 0.3em;
	border-radius: 0.4em 0.12em;
}

.bar-loader .bar.bar1 {
	animation: 1.5s ease-in-out 0s infinite normal none running barloader-bar1;
}

.bar-loader .bar.bar2 {
	animation: 1.5s ease-in-out 0s infinite normal none running barloader-bar2;
}

.bar-loader .bar.bar3 {
	animation: 1.5s ease-in-out 0s infinite normal none running barloader-bar3;
}

.bar-loader.size-big {
	font-size: 10px;
}

.bar-loader.theme-grey .bar {
	background-color: rgba(142, 146, 155, 0.8);
}

@media only screen and (max-width: 767px) {
	.modal-dialog:where(#modal-signup, #modal-signup *) {
		margin: 30px 15px;
	}
}

.row-additional-info {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

#modal-signup .modal-dialog {
	margin-top: 13px;
}

#modal-signup .google-oauth2 {
	display: flex;
	justify-content: center;
	padding-top: 10px;
}

.sweet-overlay {
	z-index: 2000;
}

.sweet-alert hr {
	margin: 10px 0;
}

@keyframes dotloader {
	0%,
	80%,
	100% {
		box-shadow: 0 1.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 1.5em 0 0;
	}
}

@keyframes barloader-bar1 {
	0%,
	100% {
		height: 1.8em;
	}
	33% {
		height: 4.9em;
	}
	66% {
		height: 3.7em;
	}
}

@keyframes barloader-bar2 {
	0%,
	100% {
		height: 4.9em;
	}
	33% {
		height: 3.7em;
	}
	66% {
		height: 1.8em;
	}
}

@keyframes barloader-bar3 {
	0%,
	100% {
		height: 3.7em;
	}
	33% {
		height: 1.8em;
	}
	66% {
		height: 4.9em;
	}
}
