html, body { height: 100%; margin: 0; padding: 0; font-family: 'Raleway', sans-serif; }
body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; background-color: #eee; }
body.bgimg { background-image: url('img/fond/waiting_screen_background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; }

.accueil { width: 100%; max-width: 960px; padding: 0; margin: auto; font-size: 32px; }
.accueil h1 { font-size: 3em; }
.page { width: 100%; max-width: 960px; padding: 0; margin: auto; }
.form-signin, .form-crypt { width: 100%; padding: 0; margin: auto; }
.form-signin { max-width: 300px; }
.form-crypt { max-width: 400px; }

.bleuks { color: #1468c0; }
.bg-bleuks { background-color: #1468c0 !important; }
img.blanc { filter: invert(100%) sepia(0%) saturate(7498%) hue-rotate(330deg) brightness(105%) contrast(104%); }
img.gris { filter: invert(20%) sepia(13%) saturate(444%) hue-rotate(169deg) brightness(99%) contrast(93%); }
img.bleuks { filter: invert(28%) sepia(98%) saturate(1134%) hue-rotate(193deg) brightness(93%) contrast(101%); }

img.logo { width: 100%; max-width: 140px; height: auto; }

div.pagecontenu { width: 100%; max-width: 1600px; margin: 0 auto; }

#chatbox { max-width: 600px; margin: auto; }
#message { background-color: #f3f2f7; padding: 0 10px; height: 320px; width: 100%; box-sizing: border-box; border-radius: 5px; overflow-y: scroll; border: 1px solid #cccccc; }
#send { margin-top: 10px; width: 100%; padding: 5px; border-radius: 5px; border: 1px solid #cccccc; box-sizing: border-box; }
.message { border-bottom: 1px solid #cccccc; padding: 10px 0; font-family: Arial; font-size: 0.9em; }
.message img { float: left; margin-top: -5px; margin-right: 5px; }
.button { cursor: pointer; padding: 10px 15px; font-weight: bold; border-radius: 5px; color: #ffffff; border: 0px; background: #3e679b; box-sizing: border-box; text-align: center; text-decoration: none; }
.button-blue:hover { background: #5980B8; }
.clear { clear: both; }