* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	font-family: 'din-regular', 'arial', sans-serif;
	color: rgb(0, 161, 217);
}

body.connexion-info {
	background: #fff;
	color: #000;
}

body.connexion-info .help {
	padding: 10px;
	width: fit-content;
}

button {
	font-family: 'din-cond', 'arial';
	font-size: 1.2em;
	padding: 15px;
	border: 0;
	background-color: rgb(0, 161, 217);
	color: rgb(255, 255, 255);
	cursor: pointer;
	text-transform: uppercase;
	width: 60%;
}

button:hover {
	background-color: rgb(15, 62, 109);
}

.dark {
	color: rgb(15, 62, 109);
}

.form {
	top: 20px;
	height: 600px;
	width: 600px;
	margin: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	background-color: rgb(255, 255, 255);
}

.brand {
	display: inline-block;
	padding-top: 55px;
	padding-bottom: 38px;
}
.brand .title {
	font-family: 'din-bold', 'arial';
	height: 100px;
	font-size: 5.3em;
	font-weight: bold;
	float: left;
	position: relative;
	display: table;
}

.brand .title span {
	display: table-cell;
	vertical-align: bottom;
}

.words {
	width: 100%;
	font-size: 1.10em;
	text-transform: uppercase;
    padding-top:10px;
	text-align: center;
}

.words div {
	display: inline-block;
	margin: 0 15px 0 15px;
}

.login {
	margin-top: 40px;
}

.login > div {
	width: 68%;
	margin: auto;
	margin-bottom: 40px;
}

.login input {
	width: 100%;
	font-family: 'din-regular', 'arial';
	font-size: 1.1em;
	border: 0;
	border-bottom: 1px solid #777;
	color: #777;
	background-color: #fff;
	padding-bottom: 5px;
	outline: none;
}

.footer div {
	padding-top: 15px;
}

.footer .help-link a, 
.footer .help-link a:visited {
	font-family: 'din-regular', 'arial';
	color: #009fdf;
	padding-right: 15px;
}

.footer .help-link a:hover {
	color: #333;
}


.problem a, .problem a:visited {
	font-family: 'din-regular', 'arial';
	color: #009fdf;
	text-decoration: none;
	font-size: 0.8em;
}

.problem a:hover {
	color: #333;
}

.governance {
/*	padding-top: 15px;*/
	font-size: 11.5px;
	line-height:16px;
	color: #000;
	
}

.governance a, .governance a:visited {
	font-family: 'din-regular', 'arial';
	color: #009fdf;
	text-decoration: none;
	
}

.governance a:hover {
	color: #333;
}

#back-button {
 color: #009fdf;
 background:transparent;

}

.links {
	padding-top: 30px;
}

.links a {
	display: inline-block;
	padding: 0 10px 0 10px;
	font-size: 1em;
}

.links a, .links a:visited {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

.links a:hover {
	color: #003c71;
}

.links > div {
	text-align: center;
}

.message {
	width: 100%;
	background-color: #003c71;
	padding: 10px;
	color: #fff;
	z-index: 1000;
	position: relative;
}

.message .title {
	font-weight: bold;
	padding-bottom: 10px;
}

.message p {
	display: inline;
}

.message p span {
	color: #fff!important;
}

.buttons {
	margin-top: 46px;
}

.buttons div {
	margin-bottom: 1em;
}


.buttons div p {
	color: #003c71;
	font-size: 0.8em;
	margin-top: 5px;
}

div#button-div{
    background: #eaebeb;
    margin: 10px 100px;
    padding: 40px 0px 24px 0px;
}

#guest-button a{
    text-decoration:none;
    color: #009fdf;
}
p.hec-courriel{
    color: #003c71;
    padding-bottom: 20px;
}
.separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: gray;
  margin-right:20%;
  margin-left:20%;
}

.guest-button {
  margin-right: 20%;
  margin-left: 20%;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid #d3d3d3;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}