/*@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/Inter-VariableFont_opsz,wght.woff2') format('woff2');
	font-style: normal;
	font-display: swap;
}
*/
body,
button,
input,
select,
textarea {
	font-family: 'Inter', sans-serif !important;
}

html,
body,
.logincontainer,
.main-container,
.main-container>.login,
.main-container>.hero-body {
	width: 100%;
	background-color: var(--color-bg);
}

img {
	max-width: 250px !important;
}

img.eye {
	width: 25px;
}

img#logo {
	width: 200px;
	margin-bottom: 50px;
	text-align: center;
}

.logincontainer {
	top: 6rem;
	padding: 0 2rem;
	position: absolute;
	align-content: center;
}

.main-container {
	height: 55%;
	padding-top: 5rem;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.main-container>.login,
.main-container>.hero-body {
	max-width: 400px;
	min-width: 300px;
	height: auto;
}

.login .column {
	text-align: start;
}

.eye {
	cursor: pointer;
	display: block;
}

.eyo {
	display: none;
}

.control.pass {
	display: flex;
	align-items: center;
}

.button.is-rounded {
	border-radius: 10px;
}

.button.is-info,
.button.is-info:hover,
.button.is-info.is-hovered {
	background-color: var(--color-text-main);
}

.column>label {
	font-weight: 700;
}

.title.is-5.has-text-centered.is-uppercase {
	font-size: 30px;
	color: var(--color-text-main);
}

.box.login {
	box-shadow: none;
	max-width: 450px;
	min-width: 330px;
}

.boxshadow {
	position: relative;
	padding: 10px;
	overflow-x: auto;
}

h1.title {
	margin-top: 2rem;
}

/* Loader */
.loader {
	display: none;
	position: absolute;
	width: 50px;
	height: 50px;
	margin-left: 50%;
	border: 16px solid var(--color-bg-card);
	border-radius: 50%;
	border-top: 16px solid grey;
	animation: spin 2s linear infinite;
}

.main-container .loader {
	bottom: 15%;
	margin-left: auto;
}

/* Responsive Loader */
@media (max-width: 1023px) {
	.main-container .loader {
		bottom: 10% !important;
	}
}

@media (max-width: 556px) {
	.logincontainer {
		padding: 0 1rem;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}