/*
//////////////////////////////////////////////////////////////////////////////////
// 																				//
// COPYRIGHT:  NICK VAN KOLLENBURG							 					//
// nickvankollenburg@gmail.com													//
// 																				//
//////////////////////////////////////////////////////////////////////////////////
*/


/** Checkbox */
div.check-box {
	color: rgb(var(--color-mybms));
	
	opacity: 0.8;
	
	font-family: 'VAGRounded';
	font-size: 13px;
}
div.check-box .check-box-field {
	border: 1px solid rgb(var(--color-primary) / 0.6);
}


/* Build
-------------------------------------------------------------- */
body.mybms-login {
	overflow: hidden;
	background-size: cover;
}

/** Outline & Inline */
div.mybms-login-outline {
	background-image: url(../../images/build/skybot/skybot-1-right.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;

	position: absolute;
	z-index: 0;

	width: 100%;
	height: 100%;
}


/* Header
-------------------------------------------------------------- */
header {
	position: fixed;
	z-index: 10;

	top: 0;
	left: 0;

	width: 100%;
	height: 60px;

	background: rgb(var(--color-mybms-light) / 0.2);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
header .line {
	position: relative;
	top: 9px;
}

header .mybms-logo {
	cursor: pointer;
	height: 50px;

	position: relative;
	top: 5px;
	z-index: 1;
}

div.mybms-login-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	padding-right: 20px;
}
div.mybms-login-header div.mybms-language-select {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
	gap: 10px;
}
div.mybms-login-header div.mybms-language-select img {
	cursor: pointer;
	
	width: 30px;
	
	transition: opacity 0.2s ease-in-out;
}
div.mybms-login-header div.mybms-language-select img:hover {
	opacity: 0.5;
}
div.mybms-login-header div.mybms-language-select p {
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-mybms));
}


/* Content
-------------------------------------------------------------- */
div.mybms-login-content {
	background: var(--color-login-gradient);
	border-radius:  var(--border-radius);
	
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	
	display: flex;
	position: relative;
	
	margin: 0px auto;
}
div.mybms-login-content h1 {
	color: rgb(var(--color-white));
	margin-top: -10px;
	text-shadow: var(--text-shadow);
}

div.mybms-login-box {
	background-color: rgb(var(--color-white) / 0.3);
	border-radius:  var(--border-radius);
	
	width:100%;
	padding: 30px;
}
div.mybms-login-box div.mybms-login-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
div.mybms-login-box div.mybms-login-header span.font-arista {
	font-size: 30px;
}
div.mybms-login-box div.mybms-login-header div.mybms-loader {
	visibility: hidden;
	position: relative;
	top: -3px;
}

div.mybms-login-screen {
	margin-top: 10px;
}
div.mybms-login-screen p {
	font-family: 'VagRounded';
	color: rgb(var(--color-mybms));
	font-size: 15px;
	margin: 10px 0px 5px 0px;
}
div.mybms-login-checkbox {
	width: 100%;
}

div.mybms-login-buttons {
	display: flex;
	flex-wrap: wrap;
	
	justify-content: flex-start;
	align-items: center;

	gap: 10px;
}

/* Footer
-------------------------------------------------------------- */
footer {
	position: fixed;
	z-index: 10;
	bottom: 0px;
	width: 100%;
	background: rgb(var(--color-mybms-light) / 0.2);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

footer .f-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
}
footer .f-text p {
	padding: 5px;
	font-size: 13px;
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.04em;
}


/* Device specific
-------------------------------------------------------------- */
@media screen and (min-width:  0px)  {
	div.mybms-login-outline {
		background-position: 140px 10px;
		background-size: 135%;
	}
	header,
	footer {
		opacity: 0.7;
	}
	div.mybms-login-content {
		top: 175px;
		width: 300px;
		padding: 10px;
	}
	header .mybms-logo {
		top: 10px;
	}
	header .mybms-logo img {
		height: 40px;
	}
	div.mybms-login-box div.mybms-login-header span.font-arista {
		font-size: 33px;
		line-height: 35px;
	}
	div.mybms-login-box div.mybms-login-header span.mybms-login-password-h1 {
		font-size: 25px;
		line-height: 30px;
	}
	span.mybms-login-h1 {
		display: none;
	}
}
@media screen and (min-width:  768px)  {
	div.mybms-login-outline {
		background-position: 200% 10px;
		background-size: 70%;
	}
	div.mybms-login-content {
		top: 175px;
		width: 500px;
		padding: 10px;
	}
	span.mybms-login-h1 {
		display: inline-block;
	}
	div.mybms-login-box div.mybms-login-header span.font-arista,
	div.mybms-login-box div.mybms-login-header span.mybms-login-password-h1 {
		font-size: 30px;
		line-height: auto;
	}
}
@media screen and (min-width:  1024px)  {
	div.mybms-login-outline {
		background-position: 110% 10%;
		background-size: 50%;
	}
	header,
	footer {
		opacity: 1;
	}
	div.mybms-login-content {
		top: 200px;
		width: 500px;
		padding: 10px;
	}
	header .mybms-logo {
		top: 2px;
	}
	header .mybms-logo img {
		height: 50px;
	}
}
@media screen and (min-width:  1700px)  {
	div.mybms-login-outline {
		background-position: 80% 5%;
		background-size: 30%;
	}
	div.mybms-login-content {
		top: 300px;
		width: 500px;
		padding: 10px;
	}
}