/*********************************************************/
/*************** UM6P LOGIN PAGE STYLES ******************/
/*********************************************************/


/************* WEBFONTS *************/


/************* VARS *************/
* {
	
	--blue-color: #253C97;
	--blue-color-light: #5C85C4;
	--orange-color: #D34727;
	--orange-color-light: #EC6740;
	--grey-color: #382E2C;
	--grey-color-light: #5D5D5D;
  --grey-color-lighter: #CCCCCC;
	
	--primary-color: var(--orange-color);
	--primary-color-light: var(--orange-color-light);
	
	--text-color: var(--grey-color);
	--box-color: var(--primary-color);
	--login-btn-color: var(--orange-color);
	--body-bg: #EFEFEF;
	--shadow: 0px 7px 3px rgba(0, 0, 0, 0.19);
	
	--box-width: 25rem;
	--bg-box-size: 20rem;
	--bg-photo-size: 20rem;
	--position-left: 8rem;
	--position-top: auto;
	--spacing: 2rem;
}


/************* GLOBAL *************/

body {
}

#container {
	background-image: url(../images/bg.jpg);
}

#boxes {
	display: none;
	
	& #box {
		width: var(--bg-box-size);
		height: var(--bg-box-size);
		background: var(--primary-color);
	}
	
	& #photo {
		width: calc(var(--bg-photo-size) + 5rem);
		height: var(--bg-photo-size);
		background: url(../images/bg-photo.jpg) no-repeat;
		background-size: cover;
		box-shadow: 16px 16px 16px rgba(0, 0, 0, 0.35);
	}
}


/************* OVERRIDES *************/

#divLogo img {
	width: 100%;
	height: 100%;
}

#divLangs {
	margin: calc(-2 * var(--spacing)) var(--spacing) 0;
	
	& a {
		color: var(--grey-color-light);
		
		&.current {
			color: var(--orange-color);
		}
	}
}

#title {
	
	margin-bottom: 3.5rem;
	
	& #divTitle1 {
		text-shadow: none;
}

	& #divTitle2 {
	display: initial;
	color: var(--grey-color-light);
}
}

#loginForm {
	
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	
	& #loginInput, & #passwordInput, & #submit {
		border-radius: 0;
		outline-color: var(--grey-color-lighter);
		
		& input::placeholder {
			color: var(--grey-color-light);
		}
		
		& span {
			background: var(--orange-color);
			
			& i {
				color: var(--body-bg);
			}
		}
	}
	
	& #submit {
		border-color: var(--orange-color-light);
		
		&:hover {
			background-color: var(--orange-color-light);
			border-color: var(--orange-color);
		}
	}
	
	& #forgetPassword {
		color: var(--grey-color-light) !important;
	}
	
	& #demoSignup {
		visibility: hidden;
		pointer-events: none;
	}
	
}

#footer {
	padding-left: var(--position-left);
	
	& * {
		color: var(--grey-color-light) !important;
		text-align: left;
		padding: 0;
	}
}


/************* RTL *************/

html[lang=ar] {
	
	& body {
		font-family: 'Readex Pro', Lato, sans-serif;
	}
	
	#container {
		background-image: url(../images/bg-rtl.jpg);
	}
	
	& #loginForm {
		
		& #login, & #password {
			border-radius: 0 !important;
		}
	}
	
}


/************* MOBILE *************/

@media only screen
and (max-device-width: 1000px)
and (orientation: portrait) {
	
	& body {
/* 		font-size: 80%; */
	}
	
	#container {
		background-position-x: 10%;
	}
	
	html[lang=ar] #container {
			background-position-x: 90%;
	}
	
	#divHeader {
		
		padding: 1rem 1rem 0;
		flex-direction: column-reverse;
		
		& #divLangs {
			margin: 0 0 1rem;
		}
	}
	
	#divOptions {
		
		& #title {
			display: inherit;
			min-width: 100%;
			text-align: center;
			
			& #divTitle1 {
				min-width: 100%;
				text-wrap: nowrap;
				font-size: 175%;
			}
			
			& #divTitle2 {
				display: none;
			}
		}
		
		& #loginForm {
		}
	}
	
	#footer {
		text-wrap: nowrap;
		padding: 0;
		
		& * {
			text-align: center;
		}
	}
	
	.grecaptcha-badge {
		display: none !important;
	}
	
}