@CHARSET "ISO-8859-1";

@import url("font-awesome-pro-6/css/all.css");
@import url("font-awesome-pro-6/css/v4-shims.css");

/* mobile first */

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
  
#home {
	background-size: cover;
	background-position-x: 20%;
/* 	background-image: url("images/mobilebackground.png"); */
	background-image: url("images/backgroundimage1920.jpg");
	color: #000000;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;  
	height: 100vh;
}

.container-lg {
	padding-left: 0;
    padding-right: 0;
}

.metawareLogo {
	display:none;	
}

.mobileFooter  {
	position: fixed;
    bottom: 5px;
    display: block;
    text-align: center;   
  	width: 100%;  	
   color: white; 
   font:  18px Merriweather Sans; 
   padding: 10px; 
}

.resetPasswordMessage {
	opacity: 0.7;
	background-color: white;
	color: black;
	padding: 0.375rem 0.75rem;
 	border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;	
}

.twoFAMessage {
	opacity: 0.8;
	background-color: white;
	color: black;
	padding: 0.375rem 0.75rem;
	margin: 0.1rem 0.75rem;
 	border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.desktopFooter  {		
    display:none;
}
.forgotPasswordDesktop {
	display:none;
}

.forgotPasswordMobile {
	display:block;
	margin-bottom:20px;
	font:  12px Merriweather Sans;
	color: white; 
}

.loginError, .loginSucces {	
	background-color: white;
	color: black;
	padding: 0.375rem 0.75rem;
 	border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.errorBox {
	position: fixed;
    bottom: 60px;
	width: 100%;
	background-color: white;
	color: black;
	padding: 0.375rem 0.75rem;
 	border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.loginBox {
 	position: fixed;
    bottom: 60px;
	width: 100%;
	border: 0;
	background-color: transparent !important;	
}	

.loginMessage {
	margin-top:5px;
	margin-bottom:5px;
}

.loginSucces {
	display: block;
	color: green;
	
}

.loginError {
	display: block;
	color: red;	
}

.rememberMeCheck { 
	/*display: block; even tijdelijk uit*/
	display: none;
	line-height: 1.5;
	padding: 0.375rem 0.75rem;
	margin-top: 15px;
    width:100%;
	background-image: none !important;
    background-color: white !important;
    color: fieldtext !important;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;		
}

#rememberMe {
	margin-left: 0px;
}

.rememberMe {
	color:rgb(33, 37, 41);
	font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-weight: 400;
    line-height: 1.5;
	font-size: 1rem;
	margin-left: 10px;
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
	.loginBox {	
		width: 50%;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
	.rememberMeCheck { 
		display: none;
	}
	
	.container-lg {
	    padding-right: var(--bs-gutter-x, 0.75rem);
	    padding-left: var(--bs-gutter-x, 0.75rem);
	}
	
	#home {
		background-size: cover;
		background-image: url("images/backgroundimage1920.jpg");
		color: #000000;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;  
		height: 100vh;
	}	
	
	.loginMessage {
		min-height: 20px;
	}
	
	.metawareLogo {
		display:block;	
	}
	
	.desktopFooter  {		
	    display: block;
	    text-align: center;   
	  	width: 100%;
	  	color:#696969;
	    font:  18px Merriweather Sans; 
	}
	
	.forgotPasswordDesktop {
		display:block;
		color:#696969;
		margin-bottom:10px;
		font:  12px Merriweather Sans;
	}
			
	.loginBox {
		position:relative;
		top:300px;
		width:450px;
		--bs-bg-opacity: 1;
    	background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
    	border: 1px solid rgba(0, 0, 0, 0.125);
    	border-radius: 0.25rem;
	}		
		
	.loginError, .loginSucces, .resetPasswordMessage {
		background-color: transparent;			
	 	border: none;
	}
	
	.twoFAMessage {
		background-color: transparent;
	 	border: none;
	}
	
	@media (max-height: 700px) {
		.loginBox {
			top:100px;
		}
	}
	
		
}