/***************************************************************/
/**************** PROACTECH LOGIN PAGE STYLES ******************/
/***************************************************************/
/**
 * @author Bari
 * @date 19/02/2026
 * @version 19/02/2026
 */


/************* WEBFONTS *************/
/* Readex Pro & Lato Google Fonts*/
@import url('https://fonts.googleapis.com/css2?&family=Readex+Pro:wght@300;400;500;700&family=Lato:wght@300;400;700&display=swap');


/************* VARS *************/
* {
	--primary-color:            #93278F;
	--primary-color-light:      #DC5ED6;
	--blue-color:               #6484CB;
	--blue-color-light:         #aec4fa;
	--blue-color-dark:          #335EB5;
	
	--text-color:               #EDF0F6;
	--box-color:                #FFFFFF;
	--body-bg:                  #EDF0F6;
	--login-btn-color:          var(--blue-color-dark);
	--shadow:                   0 7px 15px rgba(4,29,68,0.45);
	
	--box-width:                27rem;
	--position-left:            12rem;
	--input-size:               3rem;
}


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

html {
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Readex Pro', Lato, sans-serif;
	/*font-size: 100%;*/
	font-weight: normal;
	color: #FFF;
	background-color: var(--body-bg);
	
	/* Responsive Text Size */
	font-size: calc( 8px + 0.390625vw );
}

#demoSignup {
	visibility: hidden;
	pointer-events: none;
}

/************* MAIN SIZE & POSITION *************/

#container {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	background-image: url(../images/bg.png);
	/*     background-size: 100% 100%; */
	background-repeat: no-repeat;
}

#divHeader {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: max-content;
	pointer-events: none;
	user-select: none;
	padding: 0.5rem 2rem;
	background: rgba(0, 57, 96, 0.25);
	/*backdrop-filter: blur(10px);*/   /*Optional: adds the frosted glass effect */
	border: 1px solid rgba(255, 255, 255, 0.1);
}

#divOptions {
	display: flex;
	justify-content: right;
	align-items: center;
	flex-grow: 1;
	padding-right: var(--position-left);
}

#divLogin {
	width: var(--box-width);
	padding: 4em;
	background: var(--box-color);
	border-radius: 2rem;
	/* 	border: 1px solid #F8FBFF; */
	box-shadow: var(--shadow);
}

#footer {
	margin: auto auto 0 auto;
	
	& * {
		color: var(--text-color) !important;
	}
}


/************* TOP *************/

#divLangs {
	font-size: 1.125em;
	text-transform: uppercase;
	pointer-events: all;
	
	& a {
		display: inline-block;
		color: var(--text-color);
		width: min-content;
		padding: 0 0.25em;
		text-decoration: none;
		transition: all 0.3s ease-in-out;
		
		&:hover, &.current {
			color: var(--blue-color-light);
			border-bottom: 1px solid var(--blue-color);
		}
	}
}

#divLogo {
	& img {
		width: 150px;
		height: 45px;
	}
}


/************* MAIN *************/

#title {
	margin-bottom: 2.5rem;
	
	& #divTitle1 {
		text-align: center;
		font-size : 1.25rem;
		font-weight: bold;
		text-transform : uppercase;
		color : var(--blue-color-dark);
		text-shadow : 0 1px 1px lightgrey;
	}
	
	& #divTitle2 {
		display: none;
	}
}

#loginForm {
	
	& label {
		color: var(--blue-color-dark);
	}
	
	& .inputBox {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		
		& > i {
			position: absolute;
			z-index: 2;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: calc( var(--input-size) - 0.5rem );
			height: calc( var(--input-size) - 0.5rem );
			margin: 0.25rem;
			color: var(--text-color);
			background-color: var(--primary-color-light);
		}
		
		& input {
			width: 100%;
			height: var(--input-size);
			padding-left: calc( var(--input-size) + 0.25rem );
			padding-right: calc( var(--input-size) / 2 );
			background: var(--body-bg);
			border: 1px solid var(--primary-color-light);
			transition: all 0.3s;
			
			&:focus {
				border-color: var(--blue-color-dark);
				box-shadow: var(--shadow);
			}
			
			&::placeholder {
				color: var(--blue-color-dark);
			}
		}
	}
	
	#submit {
		height: var(--input-size);
		font-size : 1.4em;
		font-weight: bold;
		letter-spacing : 7px;
		text-transform : uppercase;
		background: var(--login-btn-color);
		border: none;
		box-shadow: var(--shadow);
		transition: all 0.3s ease-in-out;
		
		&:hover {
			background: var(--blue-color);
		}
	}
	
	& #forgetPassword {
		color: var(--blue-color-dark) !important;
	}
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset !important;
}

/* Hide feedback by default */
.invalid-feedback {
	position: absolute;
	display: none;
	bottom: -20px;
	padding-left: 15px;
}

/* Show feedback only when form is validated and field is invalid */
.was-validated input:invalid ~ .invalid-feedback {
	display: block;
}

/* Red border for invalid inputs */
.was-validated input:invalid {
	border: 2px solid #e91e63 !important;
}


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

html[lang=ar] {
	
	& #container {
		/* background: url('../images/bg-rtl.png');*/
	}
	
	& #divOptions {
		justify-content: left;
		padding-left: var(--position-left);
		
		& .inputBox input {
			padding-left: calc( var(--input-size) / 2 );
			padding-right: calc( var(--input-size) + 0.25rem );
			text-align: right;
		}
		
		& #submit {
			letter-spacing: 0;
		}
	}
}


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

@media only screen
and (max-device-width: 1000px)
and (orientation: portrait) {
	
	body {
		font-size: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	#container {
		background-position: left bottom;
	}
	
	#divHeader {
		flex-direction: column;
		background: none;
		border: none;
		padding: 1rem;
		
		& #divLangs {
			font-size: 95%;
			align-self: flex-end;
			margin-bottom: 1rem;
		}
		
		& #divLogo {
		
		}
	}
	
	#divOptions {
		padding: 2rem !important; /* Fix for Arabic */
		
		& #title {
			display: none;
		}
		
		& #divLogin {
			padding: 2rem;
		}
	}
	
	#footer {
		font-size: small;
		
		& * {
			color: #555 !important;
		}
	}
}