@charset "UTF-8";
/*smaller header min-height because we use a smaller logo*/
div#header {
	max-height: 95px;
}
h1#logo a img {
	max-height: 55px;
}

/* login box wallonie connect */

@mixin before-icon($iconpath) {
	content: url($iconpath);
	width: 50px;
	height: 50px;
	position: absolute;
	display: inline-block;
	left: -25px;
	top: 50%;
	transform: translateY(-50%);
}

#wca-login-box {
	text-align: center;
}
#wca-login-box ul li {
	list-style-type: none;
}
#wca-login-img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#agent-connect-button:before {
	@include before-icon("images/logo-agent.svg");
}
#user-connect-button:before {
	@include before-icon("images/logo-usager.svg");
}
#agent-connect-button,
#user-connect-button {
	background: linear-gradient(
		90deg,
		$primary-color 0%,
		rgba(227, 16, 73, 1) 100%
	);
	padding: 10px 45px 10px 45px;
	font-size: 18px;
	text-decoration: none;
	color: #fff;
	position: relative;
	background-repeat: no-repeat;
	background-position: left center;
	display: inline-block;
	vertical-align: middle;
	margin-left: 50px;
	margin-bottom: 20px;
	&:after {
		content: url("images/arrow.svg");
		width: 8px;
		height: auto;
		position: absolute;
		display: inline-block;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
}

#user-connect-button {
	visibility: hidden;
}
