/* Définition des variables */

:root {
	--bgMainColor: #eee;
	--bgMainBoxColor: #ddd;
	--bgMyNavBar: #95aab6;
	--textMainColor: #000;

	--bgBlueDark: #2c3e53;		--bgBlue: #425c8b;		--bgBlueHigh: #5b83d4;
	--bgGreenDark: #335824;	--bgGreen: #2c9628;	--bgGreenHigh: #1ace14;
	--bgGreyDark: #444;		--bgGrey: #888;		--bgGreyHigh: #aaa;
	--bgMagentaDark: #5f2661;	--bgMagenta: #862699;	--bgMagentaHigh: #cb04e6;
	--bgOrangeDark: #7e4f1a;	--bgOrange: #b66921;	--bgOrangeHigh: #ff7b00;
	--bgRedDark: #661f1f;		--bgRed: #a71d1d;		--bgRedHigh: #f00303;
	--bgBlack: #000000;		--bgWhite: #ffffff;

	--bgBtnCancel: #bbbbbb;	--bgBtnCancelOver: #777777;
	--bgBtnClose: #396772;		--bgBtnCloseOver: #2794af;
	--bgBtnOk: #165816;		--bgBtnOkOver: #319e22;
	--bgBtnYes: #165816;		--bgBtnYesOver: #319e22;
	--bgBtnNo: #6e2020;		--bgBtnNoOver: #b91515;

	--bgTitle: #4f6386;

    --fontSizeBigX: 3em;		--fontSizeBig: 2em;		--fontSizeXXXXX: 1.5em;		--fontSizeXXXX: 1.4em;
    --fontSizeXXX: 1.3em;		--fontSizeXX: 1.2em;	--fontSizeX: 1.1em;			--fontSizeNormal: 1em;
    --fontSizeSmall: 0.9em;	--fontSizeSmallx: 0.8em;	--fontSizeSmallxx: 0.7em;	--fontSizeSmallxxx: 0.6em;
    --fontSizeSmallxxxx: 0.5em;

    --menuTopFontSize: 1em;
    --menuTopPadding: 10px 40px 10px 44px;

    --box800: 800px;
    --box600: 600px;
    --box500: 500px;
    --box400: 400px;
    --boxPlain: 100%;

    --siteWidth: 1200px;
    --borderRadius: 5px;
	--menuTopPadding: 10px 40px 10px 44px;

}

* {
	color: var(--textMainColor);
	transition: all 0.5s;
    outline: none;
    background: transparent;
	border: 0;
}

html {
	padding: 0px;
	background-color: var(--bgMainColor);
	overflow: auto;
	height: 100%;
}

body {
	margin: auto;
	height: 100%;
	font-family: Aptos, Calibri, Helvetica, Verdana, Arial, sans-serif;
	min-width: 300px;
	background-image: url("images/GradientPage.png");
	background-repeat: no-repeat;
	background-size: 100% 50%;
	background-position: bottom;
	background-attachment: fixed;
}

header {
	position: fixed;
	top: 0px;
	margin: auto;
	width: 100%;
	height: 65px;
	min-width: 360px;
	overflow: hidden;
	z-index: 2;
	background-color: #000;
}

#headerHome {
	padding: 50px 50% 50px 50px;
	background-image: url("../medias/sliders/Tablette.png");
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center right;

}

.navbar {
	position: static;
	overflow: hidden;
}

.navbar a {
	float: left;
	text-transform: uppercase;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 24px 20px 20px;
	text-decoration: none;
	transition: background-color .5s;
}

#myNavBar {
	position: fixed;
	top: 65px;
	background-image: url("images/iconHome.png");
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: top 1px left 5px;
	width: calc(100% - 2px);
	padding: 0px 2px 0px 0px;
	margin: 0px;
	height: 20px;
	background-color: var(--bgMyNavBar);
	font-size: var(--fontSizeSmall);
	overflow: hidden;
}

#myNavBar a {
	float: left;
	text-transform: uppercase;
	color: black;
	text-align: center;
	padding: 0px 0px 0px 25px;
	text-decoration: none;
	transition: background-color .5s, color .5s;
	font-weight: bold;
}

#myNavBar a:hover {	color: #777;	transition: color .5s; }
.myNavStart {		padding: 2px 0px 1px 0px;	}

.myNavSub {
	padding: 0px 0px 0px 30px;
	background-image: url("images/MyNavBarBg.png");
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: center left;
}

.dropdown {
	float: left;
	color: white;
	overflow: hidden;
}

.dropdown .dropbtn {
	text-transform: uppercase;
	font-size: 16px;
	border: none;
	outline: none;
	color: white;
	height: 64px;
	padding: 22px 16px 20px;
	background-color: inherit;
	font-family: inherit;
	margin: 0px;
	transition: background-color .5s;
}

.user {
	padding: 0px;
	margin: 0px;
	background-color: #1c2025;
}

.navbar a:hover,
.dropdown:hover .dropbtn {	background-color: var(--bgBlue); }

.dropdown-content {
	text-transform: uppercase;
	display: none;
	position: fixed;
	background-color: #2a414d;
	width: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content a {
	float: none;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {	background-color: #2c5163;	}
.dropdown:hover .dropdown-content {	display: block;	}

.iconMenu {
	float: left;
	width: 20px;
	height: 25px;
	margin: 0px 10px 0px 0px;
	vertical-align: middle;
}

.icon12 {	vertical-align: middle;		width: 12px;	height: 12px;	}
.icon16 {	vertical-align: middle;		width: 16px;	height: 16px;	}
.icon20 {	vertical-align: middle;		width: 20px;	height: 20px;	}
.icon24 {	vertical-align: middle;		width: 24px;	height: 24px;	}
.icon32 {	vertical-align: middle;		width: 32px;	height: 32px;	}
.icon40 {	vertical-align: middle;		width: 40px;	height: 40px;	}
.icon48 {	vertical-align: middle;		width: 48px;	height: 48px;	}
.icon64 {	vertical-align: middle;		width: 64px;	height: 64px;	}
.icon96 {	vertical-align: middle;		width: 96px;	height: 96px;	}
.icon128 {	vertical-align: middle;		width: 128px;	height: 128px;	}
.icon256 {	vertical-align: middle;		width: 256px;	height: 256px;	}
.icon512 {	vertical-align: middle;		width: 512px;	height: 512px;	}

#pageDownIndicator {
	z-index: 10;
	opacity: 1;
	position: fixed;
	bottom: 50px;
	right: 10px;
	width: 48px;
	height: 48px;
	background-color: transparent;
	background-image: url("images/downPage.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	overflow: hidden;

}

#logo {
	float: left;
	text-align: center;
	top: 0px;
	padding: 10px 50px 0px 20px;
	height: 48px;
}

.menuTop {
	float: left;
	color: #fff;
	font-size: 0.5em;
	text-align: center;
	text-transform: uppercase;
}

.menuTop:hover {
	background-color: #2c5163;
}

.activate {
	background-color: var(--bgGreenDark);
}

#account {
	display: none;
	position: fixed;
	top: 60px;
	right: 0px;
	min-width: 60px;
	margin: 0px;
	padding: 0px 10px 0px 10px;
	height: 60px;
	overflow: hidden;
	color: #fff;
	background-color: #234236;
}

#accountMenu {
	overflow: auto;
	margin: 0 0 10px 0;
	padding: 10px;
}

.iconAccount {
	height: 22px;
	transition: background-color .25s;
	padding: 0px 10px 0px 0px;
	margin: 0px;
}

#accountUserName {
	float: left;
	font-weight: bold;
	text-align: left;
	padding: 2px 5px 0;
	color: #fff;
	height: 30px;
	overflow: hidden;
}

#accountUserName:hover {
	background-color: #444;
}

#accountAvatar {
	float: left;
	margin: 0 0 0 5px;
	width: 72px;
}

#accountAvatarSmall {
	float: left;
	margin: 0px 10px 0 0;
	height: 22px;
	width: 22px;
	border-radius: 4px;
}

footer {
	position: fixed;
	z-index: 0;
	bottom: 0px;
	padding: 0px;
	height: 30px;
	width: 100%;
	overflow: hidden;
	z-index: 2000;
	background-color: #ddd;
	border-top: 2px solid #ccc;
}

main {
	margin: 85px auto 0 0;
	min-height: 100%;
	overflow: auto;
}

article {
	margin: 0 auto;
	overflow: auto;
}

#content {
	margin: 0 auto;
	min-height: 100%;
	padding: 50px;
	overflow: auto;
}

#contentFull {
	width: auto;
	overflow: auto;
	min-height: 100%;
}

li {
	padding: 0 0 0 30px;
	list-style-position: inside;
}

.panelLine {
	margin: 1px 0 0 0;
	color: #fff;
	font-size: 16px;
	overflow: hidden;
	padding: 5px;
	text-align: left;
	background-color: #222;
	overflow: hidden;
}

#box_navigation {
	position: absolute;
	height: 50px;
	width: 100%;
}

.globalMsg {
    position: fixed;
    padding: 10px;
    top: 50px;
    left: 50%;
    margin-left: -550px;
    min-height: 100px;
    max-height: 1000px;
    width: 1000px;
    color: #000;
    background-color: #ccc;
    border: 2px #444 solid;
    border-radius: var(--borderRadius);
    font-size: 1em;
    text-align: left;
    box-shadow: 0px 0px 20px #000;
    z-index: 50;
    overflow: auto;
}

.globalTop {
	background-color: #3f5c6e;
	width: calc(100% - 50px);
	border-radius: 5px;
	height: 40px;
	align-content: center;
}

.globalTopTitle {
	margin: 1px;
	padding: 0px 5px 0px 30px;
	font-size: 24px;
	background-image: url(images/iconCircledWhite.png);
	background-position: center left 5px;
	background-size: 16px;
	background-repeat: no-repeat;
	color: #fff;
}

.globalClose {
	padding: 4px;
	background-color: #a16565;
	border-radius: 5px;
	cursor: pointer;
}

.globalClose:hover {
	background-color: #d61313;
}

#accountBoxInfosUser {
	float: right;
	padding: 10px;
	background-color: #eee;
	border-radius: 5px;
	color: #eee;
	margin: 0 0 20px 20px;
}

#menuPanel {
	position: absolute;
	top: 50px;
	bottom: 50px;
	left: -300px;
	width: 300px;
	color: #fff;
	font-size: 12px;
	background-color: #222;
	text-align: left;
	overflow: hidden;
	z-index: 2500;
}

.menuLine {
	padding: 10px;
	width: 280px;
	color: #fff;
	font-size: 18px;
	background-color: #222;
	text-align: left;
	overflow: hidden;
	cursor: pointer;
}

.menuLine:hover {
	background-color: #333;
}

#warningTop {
	float: right;
	margin: 40px;
	height: 140px;
}

#accountOff {
	float: right;
	margin: 0px 20px;
	height: 125px;
	width: 270px;
	overflow: hidden;
}

#accountDelete {
	padding: 10px 10px 10px 70px;
	border-radius: 5px;
	background-color: #aa7e05;
	background-image: url("images/account_delete.png");
	background-position: 10px 3px;
	background-repeat: no-repeat;
	background-size: 48px;
}

#alertsBox {
	float: left;
	height: 20px;
	width: 600px;
	padding: 3px 5px 0px 25px;
	margin: 0px 0px 0px 5px;
	text-align: left;
	line-height: 16px;
	font-weight: bold;
	color: #ccc;
	background-color: #333;
	background-image: url("images/icon_alert.png");
	background-position: 3px 1px;
	background-size: 20px;
	background-repeat: no-repeat;
	border: 1px solid #444;
	border-radius: 5px;
	overflow: hidden;
}

.footerBloc {
	float: left;
	width: auto;
	padding: 5px;
	overflow: hidden;
	font-size: var(--fontSizeSmall);
}

#footerInfos {
	padding: 5px;
	padding: 20px 20px 10px 20px;
	height: 240px;
	font-size: 10px;
	color: #fff;
	overflow: hidden;

}

#footerLegals {
	padding: 5px;
	height: 40px;
	font-size: 9px;
	color: #aaa;
	text-align: center;
	overflow: hidden;
	background-color: #333;

}

.locked {
	background-color: #c9aeae;
	background-image: url("images/iconLocked.png");
	background-position: center right 10px;
	background-repeat: no-repeat;
	background-size: 16px;
}

.required {
	padding-right: 0px;
	background-color: #c0a7a7;
	background-image: url("images/CSS-InputRequired.png");
	background-position: center right;
	background-size: 38px 38px;
	background-repeat: no-repeat;
}

.requiredList {
	border: 1px solid #e0bc86;
	border-radius: 4px;
	padding: 10px;
	background-color: #c9aeae;
	background-image: url("images/icon_input_required_list.png");
	background-position: center right;
	background-repeat: no-repeat;
	color: #000;
}

select {
	width: calc(100% - 20px);
	background-color: #eee;
	border-radius: 4px;
	padding: 5px 10px 5px 10px;
	margin: 5px 0px 5px 0;
	height: 29px;
	cursor: pointer;
}

textarea {
	width: calc(100% - 20px);
	background-color: #eee;
	border-radius: 4px;
	padding: 10px;
	margin: 5px 0px 0 0;
	min-height: 50px;
}

input {
	width: calc(100% - 20px);
	border: 0px;
	border-radius: 5px;
	padding: 2px 10px 2px 10px;
	margin: 5px 0px 5px 0px;
	background-color: #ddd;
	height: 25px;
	overflow: auto;
	text-decoration: none;
}

input.loginBox {
	float: left;
	margin: 0px;
	width: calc(100% - 55px);
	padding: 10px 5px 10px 5px;
	height: 12px;
	color: #000;
	background-color: #eeeeee;
}

img {
	border: 0;
	vertical-align: text-top
}

label {
	float: left;
	width: calc(100% - 20px);
	padding: 5px 0px 0px 10px;
	margin: 5px 0px 0px 0px;
	font-weight: bold;
	font-size: var(--fontSizeNormal);
	overflow: auto;
}

label.labelDown:hover {
	background-image: url(images/link_arrow_over.png);
}

label.labelDown {
	background-image: url(images/link_arrow_down.png);
	background-repeat: no-repeat;
	background-position: center left;
	padding: 0 0 0 20px;
	font-weight: bold;
}

label.labelUp:hover {
	background-image: url(images/link_arrow_over_up.png);
}

label.labelUp {
	background-image: url(images/link_arrow_up.png);
	background-repeat: no-repeat;
	background-position: center left;
	padding: 0 0 0 20px;
	font-weight: bold;
}

h1 {
	background-image: url(images/CSS-BaliseH1.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 64px 64px;
	font-size: 1.7em;
	margin: 0 30px 30px 0;
	padding: 32px 0px 33px 20px;
	font-weight: bold;
}

h1.InBloc {
	font-size: 1.2em;
	line-height: 1.3em;
}

h2 {
	background-image: url(images/bgh2.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 40%;
	font-size: 1.2em;
	margin: 0 20px 30px 0;
	padding: 10px 0px 25px 10px;
	font-weight: bold;
}

h3 {
	background-image: url(images/bgh3.png);
	background-repeat: repeat-y;
	background-position: left;
	background-size: 50%;
	font-size: 1em;
	margin: 0 0 10px 0;
	padding: 5px 0 2px 10px;
	font-weight: bold;
	border-radius: 10px 0 0 10px;
}

h4 {
	margin: 5px 0 5px 0;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
}

h5 {
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	color: #000;
}

.bigTitle {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	font-size: 28px;
	color: #000;
}

hr {
	margin: 2px 0 2px 0;
	border: 2px solid #555;
}

p {
	padding: 20px;
	overflow: auto;
	font-size: 1.1em;

}

div.InBloc {
	margin: 0px 0px 10px 0px;
	padding: 0px;
	height: 210px;
	overflow: hidden;
}

.link {
	color: #398691;
	cursor: pointer;
}

.link:hover {
	color: #339faf;
}

a {
	text-decoration: none;
}

a:link,
a:visited,
a:active {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a.linkInfos {
	clear: both;
	float: right;
	display: block;
	position: static;
	bottom: 10px;
	padding: 10px 30px 10px 20px;
	margin: 40px 20px 20px 0;
	background-color: #070;
	background-image: url("images/iconListRightWhite.png");
	background-position: right 8px center;
	background-size: 20px;
	background-repeat: no-repeat;
	color: #fff;
	border-radius: 5px;
}

a.linkInfos:hover {
	background-color: rgb(4, 160, 4);
}

h1 a:link,
h1 a:visited,
h1 a:active {
	text-decoration: none;
	font-size: 16px;
}

h1 a:hover {
	text-decoration: none;
	font-size: 16px;
}

a.arrow:link,
a.arrow:visited,
a.arrow:active {
	background-image: url(images/link-list-small-off.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding: 0 0 0 10px;
	text-decoration: none;
	font-size: 12px;
}

a.arrow:hover {
	background-image: url(images/link-list-small-on.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding: 0 0 0 10px;
	text-decoration: none;
	font-size: 12px;
}

a.arrowW:link,
a.arrowW:visited,
a.arrowW:active {
	background-image: url(images/link_arrow_down.png);
	background-repeat: no-repeat;
	background-position: left;
	padding: 0 0 0 15px;
	text-decoration: none;
	font-size: 12px;
}

a.arrowW:hover {
	background-image: url(images/link_arrow_over.png);
	background-repeat: no-repeat;
	background-position: left;
	padding: 0 0 0 15px;
	text-decoration: none;
	font-size: 12px;
}

a.tip:link,
a.tip:visited,
a.tip:active {
	text-decoration: none;
	font-weight: bold;
}

a.tip:hover {
	text-decoration: none;
	font-weight: bold;
}

a.icon {
	color: #fff;
	width: 80px;
	height: 80px;
	float: left;
	margin: 0 10px 0 0;
	padding: 5px;
	font-size: 9px;
	text-align: center;
	background-color: #333;
	border-radius: 10px;
	overflow: hidden;
}

a.icon:hover {
	width: 80px;
	float: left;
	margin: 0 10px 0 0;
	padding: 5px;
	font-size: 9px;
	text-align: center;
	background-color: #444;
	border-radius: 10px;
}

a.footer:link,
a.footer:visited,
a.footer:active {
	background-image: url(images/link-list-small-off.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding: 0 0 0 10px;
	text-decoration: none;
	color: #fff;
	font-size: 11px;
}

a.footer:hover {
	background-image: url(images/link-list-small-on.gif);
	background-repeat: no-repeat;
	background-position: left;
	padding: 0 0 0 10px;
	text-decoration: none;
	color: #eee;
	font-size: 11px;
}

a.blackLink:link,
a.blackLink:visited,
a.blackLink:active {
	color: #000;
	font-size: 11px;
	text-decoration: none;
}

a.blackLink:hover {
	color: #555;
	font-size: 11px;
	text-decoration: none;
}

table {		margin: 0px;		padding: 0px;	}
thead {		margin: 0 0 0 4px;	padding: 0px;	}
tbody {		margin: 0px;		padding: 0px;	}

th {
	padding: 1px 2px 1px 2px;
	text-align: center;
	font-weight: bold;
	background-color: rgb(92, 92, 92);
	border-radius: 3px;
	font-size: 12px;
	border: 1px solid #444;
}

tr:hover {	background-color: #999;	}

td {		vertical-align: middle;		}

td.lineEven {
	height: 18px;
	padding: 1px 2px 1px 2px;
	border-radius: 3px;
	background-color: #555;
	color: #fff;
	font-size: 13px;
	opacity: 0.8;
}

td.lineOdd {
	height: 18px;
	padding: 1px 2px 1px 2px;
	border-radius: 3px;
	background-color: #444;
	color: #fff;
	font-size: 13px;
	opacity: 0.8;
}

td.lineEven:hover {	background-color: #777;	}
td.lineOdd:hover {	background-color: #666;	}

td.line_select {
	height: 18px;
	padding: 1px 2px 1px 2px;
	border-radius: 3px;
	background-color: #999;
	color: #000;
	font-size: 13px;
	opacity: 0.8;
}

.course {
	height: 18px;
	margin: 0px 0px 0px 4px;
	padding: 1px 2px 1px 2px;
	border-radius: 3px;
	background-color: #070;
	text-align: center;
	border: #000 solid 1px;
}

.courseOff {
	height: 18px;
	margin: 0px 0px 0px 4px;
	padding: 1px 2px 1px 2px;
	border-radius: 3px;
	background-color: rgb(37, 37, 37);
	text-align: center;
	border: #000 solid 1px;
}

.courseCertification {
	height: 18px;
	margin: 0px 0px 0px 4px;
	padding: 1px 2px 1px 2px;
	border-radius: 3px;
	background-color: rgb(179, 3, 3);
	text-align: center;
	border: #000 solid 1px;
}

.coursePae {
	height: 18px;
	margin: 0px 0px 0px 4px;
	padding: 1px 2px 1px 2px;
	border-radius: 3px;
	background-color: rgb(53, 134, 158);
	text-align: center;
	border: #000 solid 1px;
}

#contentLogin {
	overflow: auto;
	min-height: 300px;
	background-image: url(images/bckgrnd-top-login.jpg), url(images/bckgrnd-home-login.jpg);
	background-repeat: no-repeat, repeat-y;
	background-size: 100%;
	background-position: top left, top left;
}

#contentMain {
	padding: 0px 0px 60px 0px;
	width: 1100px;
	overflow: auto;
	background-image: url(images/bckgrnd-home-top.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top left;
}

#contentSuggestions {
	background-color: #202022;
	min-height: 100%;
	overflow: auto;
	padding: 0 5px 0 0;
}

#content_logout {
	margin: 50px 0 30px 0;
	padding: 0 20px 0 0;
	line-height: 20px;
	background-image: url(images/bckgrnd-home-logout.jpg);
	background-repeat: no-repeat;
	width: 980px;
	border: 4px solid #eee;
	background-color: #f7f7f7;
	overflow: auto;
	min-height: 400px;
}

.formError {
	background-image: url(images/iconWarningWhite.png);
	background-repeat: no-repeat;
	background-position: left 5px top 10px;
	background-size: 40px;
	width: auto;
	min-height: 40px;
	margin: 0 0 5px 0;
	padding: 10px 10px 10px 60px;
	background-color: rgb(141, 22, 22);
	border-radius: 5px;
	color: white;
	overflow: auto;
}

.notificationOk {
	margin: 50px 0 50px 0;
	padding: 10px;
	background-color: rgb(123, 165, 123);
	background-image: url('images/iconCheckedWhite.png');
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 25%;
	border-radius: 20px;
}

.warningForm {
	background-image: url('images/iconPriorityWhite.png');
	background-position: top left;
	background-position-x: 10px;
	background-position-y: 10px;
	background-repeat: no-repeat;
	background-size: 40px;
	padding: 10px 10px 10px 60px;
	margin: 0px 0px 10px 0px;
	background-color: var(--bgOrange);
	border-radius: 4px;
	width: calc(100% - 70px);
	text-align: justify;
	color: white;

}

.warningForm50 {
	float: right;
	width: calc(50% - 70px)
}

.formLine {
	width: calc(100% - 20px);
	margin: 0 0 4px 0;
	padding: 10px;
	background-color: var(--bgMainBoxColor);
	overflow: auto;
	border-radius: 4px;
}

.paddingNo {	padding: 0px;	}
.padding5 {		padding: 5px;	}
.padding10 {	padding: 10px;	}
.padding15 {	padding: 15px;	}
.padding20 {	padding: 20px;	}
.padding25 {	padding: 25px;	}
.padding50 {	padding: 50px;	}

.left, .gauche { 	float: left;	}
.left5 {	float: left;	width: calc(5% - 15px);		padding: 5px 10px 5px 5px;	}
.left10 {	float: left;	width: calc(10% - 15px);	padding: 5px 10px 5px 5px;	}
.left25 {	float: left;	width: calc(25% - 15px);	padding: 5px 10px 5px 5px;	}
.left33 {	float: left;	width: calc(33.3% - 15px);	padding: 5px 10px 5px 5px;	}
.left50 {	float: left;	width: calc(50% - 15px);	padding: 5px 10px 5px 5px;	}
.left66 {	float: left;	width: calc(66% - 15px);	padding: 5px 10px 5px 5px;	}
.left75 {	float: left;	width: calc(75% - 15px);	padding: 5px 10px 5px 5px;	}
.left90 {	float: left;	width: calc(90% - 15px);	padding: 5px 10px 5px 5px;	}
.left100 { 	float: left;	width: 100%; }

.right, .droite { 	float: right;	}
.right5 {	float: right;	width: calc(5% - 15px);		padding: 5px 5px 5px 10px;	}
.right10 {	float: right;	width: calc(10% - 15px);	padding: 5px 5px 5px 10px;	}
.right25 {	float: right;	width: calc(25% - 15px);	padding: 5px 5px 5px 10px;	}
.right33 {	float: right;	width: calc(33.3% - 15px);	padding: 5px 5px 5px 10px;	}
.right50 {	float: right;	width: calc(50% - 15px);	padding: 5px 5px 5px 10px;	}
.right66 {	float: right;	width: calc(66% - 15px);	padding: 5px 5px 5px 10px;	}
.right75 {	float: right;	width: calc(75% - 15px);	padding: 5px 5px 5px 10px;	}
.right90 {	float: right;	width: calc(90% - 15px);	padding: 5px 5px 5px 10px;	}
.right100 {	float: right;	width: 100%; }

.textCenter {	text-align: center;	}
.textLeft {		text-align: left;	}
.textRight {	text-align: right;	}
.textJustify {	text-align: justify;}

.italic {		font-style: italic;	}
.bold {			font-weight: bold;	}
.underline {	text-decoration: underline;	}
.strike {		text-decoration: line-through;	}
.pointer {		cursor: pointer; }

.black {	color: #000;	}
.blue {		color: #135ac5;}
.green {	color: #070;	}
.red {		color: #b81a1a;}
.white {	color: #fff;	}

.small {	font-size: var(--fontSizeSmall);	}
.smallx {	font-size: var(--fontSizeSmallx);	}
.smallxx {	font-size: var(--fontSizeSmallxx);	}

.round {	border-radius: 5px;		}
.round10 {	border-radius: 10px;	}
.round20 {	border-radius: 20px;	}
.round50 {	border-radius: 50px;	}

.shadowBox {	box-shadow: 0px 0px 10px #000;		}
.shadowText {	text-shadow: 0px 0px 10px #000;	}

.autowidth {	width: auto;	overflow: auto;	}

.select {
	border-bottom: 10px solid #f73;
	border-radius: 5px;
}

.linkIcon {
	font-weight: bold;
	padding: 5px;
	cursor: pointer;
	text-align: center;
	transition: background-color .5s;
}

.linkIconSelect {
	padding: 5px;
	font-weight: bold;
	background-color: #346156;
	background-image: url('images/iconCheckedWhite.png');
	background-position: right 4px center;
	background-repeat: no-repeat;
	background-size: 16px;
}

.linkIcon:hover {
	color: #fff;
	background-color: #4e6479;
}

/**************************************************************/
/*************************************************************************/
/************************************************************************************/
/* Les boutons																		*/
/************************************************************************************/
/*************************************************************************/
/**************************************************************/

.yes {
	background-image: url(images/iconCheckmarkCircle.png);
	background-repeat: no-repeat;
	background-position: left 4px center;
	background-size: 18px;
	background-color: var(--bgBtnYes);
	text-align: center;
	padding: 15px;
	margin: 0 5px 0 5px;
	min-height: 25px;
	text-decoration: none;
}

.yes:hover {	background-color: var(--bgBtnYesOver);	}

.no {
	background-image: url(images/iconCloseCircle.png);
	background-repeat: no-repeat;
	background-position: left 4px center;
	background-size: 18px;
	background-color: var(--bgRedDark);
	text-align: center;
	padding: 10px 20px 5px 20px;
	margin: 0 5px 0 5px;
	min-height: 25px;
	text-decoration: none;
}

.no:hover {	background-color: var(--bgRedHigh);	}

.buttonGo {
	background-image: url(images/iconGoCircleWhite.png);
	background-repeat: no-repeat;
	background-position: left 4px center;
	background-size: 18px;
	background-color: var(--bgBlue);
	padding: 2px 10px 5px 30px;
	margin: 5px 5px 0 5px;
	min-height: 30px;
	text-decoration: none;
	cursor: pointer;
	border-radius: 5px;
	color: var(--bgWhite);
}

.buttonGo:hover {	background-color: var(--bgBlueHigh);	}

.cancel {
	background-image: url(images/iconCancel.png);
	background-repeat: no-repeat;
	background-position: left 4px center;
	background-size: 18px;
	background-color:  var(--bgGrey);
	margin: 2px 0 5px 0;
	padding: 4px 8px 4px 28px;
	text-decoration: none;
}

.cancel:hover {	background-color: var(--bgGreyHigh);	}

.buttonAdd {
	background-image: url(images/iconPlusCircle.png);
	background-repeat: no-repeat;
	background-position: left 4px center;
	background-size: 18px;
	background-color: #e7e7e7;
	margin: 5px;
	padding: 4px 8px 4px 28px;
	text-decoration: none;
	border: #ddd solid 1px;
	border-radius: 5px;
	cursor: pointer;
}

.buttonAdd:hover {	background-color: #d7d7d7;	}

.buttonSend {
	background-image: url(images/iconSendCircle.png);
	background-repeat: no-repeat;
	background-position: left 4px center;
	background-size: 18px;
	background-color: #e7e7e7;
	margin: 2px 0 5px 0;
	padding: 4px 4px 4px 25px;
	text-decoration: none;
	color: #000;
	font-size: 12px;
	border: #ddd solid 1px;
	cursor: pointer;
}

.buttonSend:hover {
	background-color: #d7d7d7;
}

.tip {
	margin: 10px 0 0 0;
	padding: 5px 10px 5px 50px;
	min-height: 50px;
	color: black;
	background-image: url(images/tip.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 45px;
	box-shadow: 0px 0px 5px #000;
	border-radius: 10px;
	border: 1px solid #000;
	background-color: #e6d7c5;
}

.imgLink {
	cursor: pointer;
	opacity: 0.8;
}

.imgLink:hover {
	opacity: 1;
}

.autocomplete {
	max-height: 200px;
	width: 200px;
	color: #000;
	border-radius: 5px;
	background-color: #eee;
	z-index: 5000;
	overflow: auto;
}

#tos {
	margin: 20px auto 20px;
	width: 80%;
	padding: 20px;
	border: #3e5b66 solid 5px;
	border-radius: 20px;
	background-color: #222;
}

#formRegister {
	margin: 20px auto 20px;
	width: 80%;
	padding: 20px;
	border-radius: 5px;
	background-color: var(--bgMainBoxColor);
}

.tosInformations {
	margin: 0 0 20px 0;
	float: left;
	width: calc(100% - 50px);
	padding: 25px;
	height: 600px;
	overflow: auto;
	border-radius: 10px;
}

.tosPicture {
	float: right;
	width: 35%;
	height: 600px;
	overflow: hidden;
}

.stateBox {
	padding: 10px;
	margin: 0px 0px 10px 0px;
	background-color: #ddd;
	border-radius: 10px;
	background-image: url(images/checkOff.png);
	background-position: top 10px right 10px;
	background-repeat: no-repeat;
	background-size: 50px;
}

.stateBoxEnded {
	padding: 10px;
	margin: 0px 0px 10px 0px;
	background-color: #c6d8c0;
	border-radius: 10px;
	background-image: url(images/checkOn.png);
	background-position: top 10px right 10px;
	background-repeat: no-repeat;
	background-size: 50px;
}

.stateProgress {
	width: auto;
	margin: 5px 0px 5px 0px;
	height: 15px;
	font-size: var(--fontSizeSmallx);
	text-align: center;
	background-image: url(images/barPercent.jpg);
	background-size: 45% 100%;
	background-color: #ff7e27;
	background-repeat: no-repeat;
	background-position: left;
	border-radius: 5px;
	color:#ffffff;
}

.tile {
	width: 300px;
	box-shadow: #000 ;
	border: 1px solid #000;
	padding: 5px;
}


/**************************************************************/
/*************************************************************************/
/************************************************************************************/
/* Media management - Résolution des écrans											*/
/************************************************************************************/
/*************************************************************************/
/**************************************************************/


.lowScreenHide {	display: block;	}
.lowScreenShow {	display: none;	}
.hidden {	display: none;	}
.show 	{	display: block;	}

#rgpd {
	position: fixed;
	bottom: 0px;
	height: 100px;
	background-color: #eee;
}

@media all and (min-width: 850px) and (max-width: 1200px) {
	.lowScreenHide {
		display: none;
	}

	.lowScreenShow {
		display: block;
	}

	.warningForm,
	.formLine {
		float: none;
		width: auto;
	}

	#content {
		padding: 20px 50px 50px 50px;
	}

	#tos,
	.tosInformations {
		border: none;
		width: auto;
	}
}

@media all and (max-width: 850px) {

	.lowScreenHide {
		display: none;
	}

	.lowScreenShow {
		display: block;
	}

	#tos,
	.tosInformations,
	#formRegister {
		border: none;
		padding: 2px;
		width: auto;
		margin: 10px 5px 10px 5px;
	}

	#content {
		padding: 10px;
	}

	p {
		padding: 10px 0 25px 0;
	}

	#pageDownIndicator {
		right: 10px;
		bottom: 10px;
		width: 24px;
		height: 24px;

	}

	.warningForm,
	.formLine {
		float: none;
		width: auto;
	}

	#logo {
		float: left;
		text-align: center;
		top: 0px;
		padding: 10px 20px 0px 20px;
		height: 32px;
	}

	header,
	.navbar a,
	.dropdown,
	.dropbtn {
		font-size: 11px;
	}

	h2 {
		background-size: 60% 15px;
		font-size: 1em;
		margin: 0 30px 30px 0;
		padding: 10px 0px 20px 10px;
		font-weight: bold;
	}

	li {
		padding: 0 0px 10px 5px;
	}

	a.linkInfos {
		padding: 5px 30px 5px 20px;
		margin: 20px 20px 20px 0;
	}

	.boxInfos {
		margin: 50px 0 50px;
	}

	.boxForm {
		margin: 25px 0 25px;
	}

	.footerBloc {
		float: none;
		height: auto;
		margin: 0 45px 0 0;
		width: auto;
	}

	footer {
		height: auto;
	}


}