/********* 4K ***************/
@media (min-width: 1921px) and (max-width: 4096px) {
	.mivare-login-screen {
		background-position: center center;
	}

	.mivare-login-stage {
		width: min(100%, 1120px);
	}

	.mivare-login-card {
		width: min(100%, 640px);
	}
}


/********* HD ***************/
@media (min-width: 1500px) and (max-width: 1920px) {
	.mivare-login-screen {
		background-position: center center;
	}
}


/********* Laptops ***************/
@media (min-width: 1365px) and (max-width: 1499px) {
	.mivare-login-stage {
		min-height: min(690px, calc(100vh - 42px));
	}

	.mivare-login-card {
		width: min(100%, 560px);
	}

	.mivare-login-card-body {
		padding: 44px 58px 32px;
	}
}


/********* Medium Laptops ***************/
@media (min-width: 1200px) and (max-width: 1365px) {
	.mivare-login-screen {
		padding: 34px;
		background-position: center center;
	}

	.mivare-login-stage {
		min-height: min(650px, calc(100vh - 34px));
	}

	.mivare-login-card {
		width: min(100%, 540px);
	}

	.mivare-login-card-body {
		padding: 40px 52px 30px;
	}

	.mivare-login-logo-img {
		width: min(260px, 72%);
	}
}


/********* Tablets ***************/
@media (min-width: 992px) and (max-width: 1199px) {
	.mivare-login-screen {
		padding: 32px;
		background-position: center center;
	}

	.mivare-login-stage {
		width: min(100%, 820px);
		min-height: calc(100vh - 64px);
	}

	.mivare-login-stage::before {
		left: 11%;
		width: 380px;
		height: 560px;
	}

	.mivare-login-card {
		width: min(100%, 540px);
	}
}


/********* Small Tablets and Mobiles ***************/
@media (max-width: 991px) {
	.mivare-login-screen {
		align-items: center;
		padding: 28px 20px;
		min-height: 100svh;
		background-position: center center;
	}

	.mivare-login-screen-overlay {
		background:
			radial-gradient(circle at 50% 28%, rgba(213, 156, 70, 0.13), rgba(0, 0, 0, 0.30) 38%, rgba(0, 0, 0, 0.76) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.74));
	}

	.mivare-login-stage {
		width: 100%;
		min-height: calc(100svh - 56px);
	}

	.mivare-login-stage::before {
		left: 50%;
		top: 49%;
		width: min(78vw, 410px);
		height: min(62vh, 560px);
		transform: translate(-50%, -50%);
		opacity: 0.62;
	}

	.mivare-login-stage::after,
	.mivare-login-stage-frame {
		display: none;
	}

	.mivare-login-card {
		width: min(100%, 560px);
	}

	.mivare-login-card-body {
		padding: 38px 36px 30px;
	}
}


/********* Small Mobiles ***************/
@media (max-width: 650px) {
	.mivare-login-screen {
		padding: 18px;
		background-position: center center;
	}

	.mivare-login-stage {
		min-height: calc(100svh - 36px);
	}

	.mivare-login-card {
		border-radius: 16px;
	}

	.mivare-login-card-body {
		padding: 32px 24px 26px;
	}

	.mivare-login-logo {
		margin-bottom: 20px !important;
	}

	.mivare-login-logo-img {
		width: min(236px, 78%);
	}

	.mivare-login-intro {
		margin-bottom: 24px;
	}

	.mivare-login-field {
		margin-bottom: 14px;
	}

	.mivare-login-input.form-control,
	.mivare-login-input.form-control:focus {
		height: 54px;
		padding-left: 58px;
		padding-right: 54px;
	}

	.mivare-login-field-icon {
		left: 20px;
	}

	.mivare-login-remember {
		margin: 18px 0 20px;
	}

	.mivare-login-submit.btn {
		height: 54px;
	}

	.mivare-login-help {
		margin-top: 24px;
	}

	.mivare-login-language {
		margin-top: 28px;
		padding-top: 22px;
	}
}


/********* Very Small Mobiles ***************/
@media (max-width: 480px) {
	.mivare-login-screen {
		padding: 14px;
		background-position: center center;
	}

	.mivare-login-card-body {
		padding: 28px 18px 24px;
	}

	.mivare-login-logo-img {
		width: min(220px, 82%);
	}

	.mivare-login-title {
		font-size: 1.24rem;
	}

	.mivare-login-subtitle {
		font-size: 0.86rem;
	}

	.mivare-login-input.form-control,
	.mivare-login-input.form-control:focus {
		font-size: 0.9rem;
	}

	.mivare-login-help,
	.mivare-login-help-link,
	.mivare-login-language-button,
	.mivare-login-remember .form-check-label {
		font-size: 0.88rem;
	}
}


/********* Extra Small Mobiles ***************/
@media (max-width: 380px) {
	.mivare-login-screen {
		padding: 10px;
	}

	.mivare-login-card-body {
		padding: 24px 15px 22px;
	}

	.mivare-login-input.form-control,
	.mivare-login-input.form-control:focus {
		height: 51px;
		padding-left: 52px;
		padding-right: 48px;
	}

	.mivare-login-field-icon {
		left: 17px;
		font-size: 1rem;
	}

	.mivare-login-password-toggle {
		right: 8px;
	}

	.mivare-login-submit.btn {
		height: 51px;
	}
}