html{
	font-size:16px;
	font-size:clamp(16px, 1.1111111111vw, 22px);
}
body{
	margin:0;
	font-size:1rem;
	line-height:1.45;
}
html, body{
	height:100%;
}
*{
	font-family: 'Bai Jamjuree', sans-serif;
}
.hidden{
	display:none !important;
}
.input label{
	position:absolute;
	left:.6rem;
	top:.7rem;
	pointer-events: none;
	transition:transform 150ms, font-size 150ms, color 150ms;
	display:inline-block;
	padding:0 .4rem;
	background:transparent;
	font-size:0.875rem;
	color:#000;
	line-height:normal;
	color:#8e8d8a;
	background:#fff;
}
.input input:focus~label{
	color:#d1aa66;
}
.input input:focus~label,
.input input:not(:placeholder-shown)~label {
	transform:translate(0, -1.15rem);
	font-size:.7rem;
}
.input input:focus{
	border-color:#a27e31;
}
.input input{
	display:block;
	width:100%;
	padding:.7rem 1rem;
	font-size:.875rem;
	line-height:normal;
	margin:0;
	border:1px solid #a3a19f;
	border-radius:.4rem;
	transition:border-color 150ms;
}
.input{
	position:relative;
	margin:0 0 1rem 0;
}
.main{
	height:100vh;
	overflow:auto;
	display:flex;
	align-items:center;
}
.login-wrapper{
	max-width:20rem;
	margin:0 auto;
	padding:1rem 0;
}
.message.error{
	color:#fff;
	background:#F17979;
}
.message.success{
	color:#fff;
	background:#58D897;
}
.message{
	text-align:left;
	padding:.5rem 2rem;
	text-align:center;
	cursor:pointer;
	font-size:.875rem;
	border-radius:.4rem;
	margin-bottom:1rem;
}
h1{
	margin:1rem 0 .5rem 0;
	padding:0;
	font-weight:500;
	font-size:1.8rem;
}
h2{
	margin:0 0 2rem 0;
	padding:0;
	font-weight:normal;
	font-size:.875rem;
	color:#8e8d8a;
}
.main .container .logo img{
	height:6rem;
}
.main .container .or:before{
	content:'';
	display:block;
	position:absolute;
	left:0;
	top:50%;
	border-top:1px solid #a3a19f;
	width:100%;

}
.main .container .or span{
	display:inline-block;
	position:relative;
	z-index:1;
	padding:0 2rem;
	background:#fff;
	color:#8e8d8a;
	font-size:.875rem;
}
.main .container .or{
	margin:2rem -2rem;
	position:relative;
}
.main .container{
	width:50%;
	text-align:center;
}

.main .bg{
	width:50%;
	background:#fff url(../img/login/bg.jpg) 50% 50% no-repeat;
	background-size:cover;
	height:100%;
}

.btn,
.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .swal2-styled.swal2-confirm{
	-webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
	color:#fff !important;
	border-radius:.4rem !important;
	font-size:.875rem !important;
	background:#d1aa66 !important;
	padding:.7rem 2rem !important;
	font-weight:normal !important;
	line-height:normal !important;
	-webkit-transition:color 300ms, -webkit-box-shadow 150ms, -webkit-transform 150ms !important;
	transition:color 300ms, -webkit-box-shadow 150ms, -webkit-transform 150ms !important;
	-o-transition:box-shadow 150ms, transform 150ms, color 300ms !important;
	transition:box-shadow 150ms, transform 150ms, color 300ms !important;
	transition:box-shadow 150ms, transform 150ms, color 300ms, -webkit-box-shadow 150ms, -webkit-transform 150ms !important;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
	border:0 !important;
	cursor:pointer;
	display:inline-block;
	text-align:center;
}
.btn:hover,
.swal2-popup .swal2-styled.swal2-confirm:hover{
	text-decoration:none;
	background:#d1aa66 !important;
	font-size:16px;
	color:#fff;
	-webkit-box-shadow: 0 8px 10px 0 rgba(1, 1, 2, 0.15) !important;
	        box-shadow: 0 8px 10px 0 rgba(1, 1, 2, 0.15) !important;
}
.alt-btn img{
	height:1.5rem;
}
.alt-btn:hover{
	-webkit-box-shadow: 0 8px 10px 0 rgba(1, 1, 2, 0.15) !important;
	box-shadow: 0 8px 10px 0 rgba(1, 1, 2, 0.15) !important;
}
.alt-logins .alt-btn.active{
	padding-bottom:1.5rem;
	border-bottom:none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow:none !important;
}
.alt-btn{
	display:inline-flex;
	align-items:center;
	gap:1rem;
	flex:1;
	border-radius:.4rem;
	font-size:.875rem;
	background:#fff;
	padding:.5rem 1rem;
	border:1px solid #a3a19f;
	text-align:left;
	line-height:normal;
	cursor:pointer;
	justify-content:space-between;
	transition:box-shadow 150ms, transform 150ms, color 300ms !important;
}
.alt-logins{
	display:flex;
	gap:1rem;
	align-items:flex-start;
	z-index:2;
	position:relative;
}
.alt-form.active{
	display:block;
}
.alt-form{
	padding:1rem;
	border:1px solid #a3a19f;
	margin-top:-1px;
	border-bottom-left-radius: .4rem;
	border-bottom-right-radius: .4rem;
	border-top-right-radius: .4rem;
	display:none;
}
.alt-form:last-child{
	border-top-left-radius: .4rem;
	border-top-right-radius: 0;
}
body.alt-login .users.form{
	display:none;
}
.main-login{
	text-align:center;
	display:none;
}
body.alt-login .main-login{
	display:block;
}

.sweet_loader {
	width: 140px;
	height: 140px;
	margin: 0 auto;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-name: ro;
	transform-origin: 50% 50%;
	transform: rotate(0) translate(0,0);
}
@keyframes ro {
	100% {
		transform: rotate(360deg) translate(0,0);
	}
}

div:where(.swal2-container) button:where(.swal2-close):focus-visible{
	box-shadow:none !important;
}
@media (max-width: 1000px) {
	body *{
		display:none !important;
	}
	body:after{
		content: 'Mobile version is updating';
		text-align:center;
		display:block !important;
		margin-top:5rem;
		
	}
}