:root {
	--xl-margin: 150px;
	--lg-margin: 80px;
	--md-margin: 0px;
	--sm-margin: 0px;
	--xs-margin: 0px;
	--primary-color: #F24949;
	--title-color: #333;
	--text-color: #666;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background-color: #87AEE1; color: #fff; }
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Fira Sans", sans-serif; color: #333; line-height: 100%; display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
img { width: 100%; max-width: 100%; }
a, a:hover { text-decoration: none; }
.atc:hover { cursor: pointer; }

.container { width: 100%; max-width: 400px; padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto; }
.page-wrapper { display: block; width: 100%; overflow: hidden; padding-bottom: 72px; }

.header-logo { display: block; width: 64px; height: auto; margin: 10px auto; }

h1 { font-size: 32px; font-weight: 900; letter-spacing: 2px; color: #444; text-align: center; line-height: 1; margin: 20px 0; }

.dashboard--image { display: block; width: 150px; height: auto; margin: 20px auto 30px auto; }
.dashboard--no-activity { display: block; width: 100%; font-size: 20px; color: #999; font-weight: 900; line-height: 1.3; text-align: center; margin: 30px 0; }
.dashboard--activity-current { display: block; width: 100%; font-size: 20px; color: #68C39F; font-weight: 400; line-height: 1.3; text-align: center; margin: 15px 0; }
.dashboard--activity-current span { display: block; width: 100%; font-size: 60px; line-height: 70px; text-align: center; font-weight: 900; }
.dashboard--activity-past { display: block; width: 100%; font-size: 20px; color: #666; font-weight: 400; line-height: 1.3; text-align: center; margin: 15px 0; }
.dashboard--activity-past span { font-weight: 900; font-size: 130%; }

.ping-result-image { display: block; width: 200px; height: 200px; margin: 20px auto; }
.ping-result-text { font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center; color: #333; margin: 20px 0; }

.history--header { display: flex; justify-content: space-between; }
.history--header-btn { width: 24%; height: 48px; font-size: 20px; font-weight: 900; text-align: center; line-height: 48px; border-radius: 5px; border: 1px solid #f2f2f2; background: #fafafa; }
.history--header-current { width: 50%; height: 48px; font-size: 18px; font-weight: 700; color: #000; text-align: center; line-height: 48px; border: 1px solid #f2f2f2; } 
.history--header-current span { display: block; clear: both; width: 100%; color: #555; font-size: 14px; }

.history--table { width: 100%; border-collapse: collapse; border: 1px solid #f2f2f2; margin: 30px 0 30px 0; }
.history--row { border-bottom: 1px solid #f2f2f2; }
.history--day { width: 25%; padding: 10px 5px; vertical-align: top; }
.history--day-of-week { display: block; width: 100%; font-size: 12px; font-weight: 400; color: #999; text-align: center; }
.history--day-number { display: block; width: 100%; font-size: 20px; font-weight: 900; color: #999; text-align: center; }
.history--times { width: 75%; padding: 10px 5px; vertical-align: top; }
.history--times p { font-size: 15px; font-weight: 400; color: #333; text-align: left; line-height: 1.5; }

footer { position: fixed; height: 70px; width: 100%; bottom: 0; left: 0; border-top: 1px solid #eee; background: #fff; }
.footer--icons { display: flex; justify-content: space-between; padding-top: 5px; }
.footer--icon { width: 30%; padding-top: 5px; }
.footer--icon img { display: block; width: 32px; height: auto; margin: 0 auto; }
.footer--icon span { display: block; width: 100%; text-align: center; font-size: 11px; line-height: 2; color: #000;  }
.footer--icon__active { background: #f2f2f2; border-radius: 5px; }

.alert { border-radius: 0px; padding: 15px; margin-bottom: 20px; font-size: 14px; }
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

.text { font-size: 14px; color: #333; line-height: 1.3; margin-bottom: 30px; }
.login--recover { display: block; width: 100%; margin: 15px 0; overflow: hidden; text-align: center; }
.login--recover a { color: #DC3709; text-decoration: underline; font-size: 15px; }

/*
 * FORMULAIRES
 */

form { }

.form-box--input { position: relative; margin-bottom: 40px; width: 100%; }
.form-box--label { position: absolute; line-height: 50px; font-size: 24px; transition: 500ms; opacity: 0.5; }
.form-box--field { position: relative; width: 100%; height: 50px; background: transparent; border: none; outline: none; font-size: 24px; border-bottom: 2px solid #E0168A; }
.form-box--text { position: relative; width: 100%; height: 100px; background: transparent; border: none; outline: none; font-size: 24px; border-bottom: 2px solid #E0168A; }

.form-group { display: block; width: 100%; margin: 15px 0; }
.form--label { display: block; width: 100%; font-size: 14px; line-height: 1.3; letter-spacing: 1px; }
.form--input { display: block; width: 100%; border: 1px solid #ccc; border-radius: 5px; outline: none; color: #333; font-size: 16px; padding: 10px 5px;  }
.form--input:disabled { background: #eee; }
.form--btn-submit { display: block; width: 100%; font-size: 15px; font-weight: 700; color: #fff; line-height: 3; letter-spacing: 2px; background: #DC3709; border-radius: 5px; border: none; margin: 20px 0; text-transform: uppercase; }
.btn { display: block; width: 100%; font-size: 15px; font-weight: 700; color: #fff; text-align: center; line-height: 3; letter-spacing: 2px; background: #DC3709; border-radius: 5px; border: none; margin: 20px 0; text-transform: uppercase; }

.form--action-link { display: block; width: 100%; text-align: right; color: #DC3709; text-decoration: underline; font-size: 15px; padding: 10px 0 20px 0; }

/*
 * ERREURS 404
 */

.error-404 { display: flex; align-items: center; justify-content: space-between; }
.error-404--code { width: 50%; font-size: 256px; color: #ccc; font-weight: 900; text-align: center; line-height: 120%; }
.error-404--text { width: 50%; font-size: 24px; font-weight: 700; line-height: 150%; color: #333; text-align: left; }
@media screen and (max-width: 767px) {
	.error-404 { flex-direction: column; }
	.error-404--code {font-size: 150px; }
	.error-404--text { font-size: 20px; }
}
@media screen and (min-width: 768px) {
	.error-404 { flex-direction: row; }
	.error-404--code {font-size: 150px; }
	.error-404--text { font-size: 20px; }
}
@media screen and (min-width: 992px)  {
	.error-404--code {font-size: 200px; }
	.error-404--text { font-size: 24px; }
}
@media screen and (min-width: 1200px) {
	.error-404--code {font-size: 256px; }
	.error-404--text { font-size: 24px; }
}