/**************/
/* CONSTANTES */
/**************/
:root {

	--main-blue: #0569C1;
	--main-yellow: #F7CC47;
	--main-red:#CD3222;
	--main-green: #57B894;
	
	--light-blue:#C8E5FE;
	
	--content-background-color: #fff9e1;
	
	--almost-black: #0C141B;
	--almost-white: #F7F7F7;
}

/*********/
/* FONTS */
/*********/
@font-face {
	font-family: 'title';
	font-style: normal;
	src: url('./fonts/patua-one/PatuaOne-Regular.ttf');
}
@font-face {
	font-family: 'main';
	font-style: normal;
	src: url('./fonts/barlow-semi-condensed/BarlowSemiCondensed-Regular.ttf');
}
@font-face {
	font-family: 'main_semibold';
	font-style: normal;
	src: url('./fonts/barlow-semi-condensed/BarlowSemiCondensed-SemiBold.ttf');
}

@font-face {
	font-family: 'ElegantIcons';
	src:url('./fonts/elegant-icon/ElegantIcons.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/********/
/* BODY */
/********/
body {
	font-family: "main";
	font-size: 1.125rem;
	background: url(../images/backgrounds/background.png);
	padding:0;
	margin: 0.5rem;
}



/*************************/
/* ÉLÉMENTS a GÉNÉRIQUES */
/*************************/

/* conteneurs */
div {
	vertical-align:top;
	box-sizing: border-box;
}

nav {
	display:inline-block;
	margin: 0 1rem;
}

table {
	border-collapse: collapse;
}

td , th{
	padding: 0.25rem 0.5rem;
}

table.search_list tr:hover {
	background-color:var(--main-blue);
	color:var(--almost-white);
	cursor:pointer;
}

table.search_list tr:hover b {
	color:var(--almost-white);
}

table.standard {
	width: 100%;
	text-align: center;
}

table.standard td, table.standard th {
	border: 2px solid var(--main-blue);
}

table.leftLabelRightValue tr td:first-of-type, table.leftLabelRightValue tr th:first-of-type {
	text-align: right;
	font-weight:bold;
}
table.leftLabelRightValue tr td:last-of-type, table.leftLabelRightValue tr th:last-of-type {
	text-align: left;
}

table.leftLabelRightValue td, table.leftLabelRightValue th {
	width:50%;
}

table.clickableRows tr:hover {
	cursor:pointer;
	background-color:var(--light-blue);
}

/* titres */
h1 {
	font-family: "title";
	color: var(--main-blue);
	font-size:200%;
	text-align:center;
	margin-top:1rem;
	margin-bottom:1rem;
}

h1,h2,h3 {
	padding-left:1rem;
	padding-right:1rem;
}

/* paragraphes */
p {
	padding: 0.25rem 1rem;
}

/* liens et boutons */
a, button {
	display: inline-block;
	font-family: "main_semibold";
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	color: var(--almost-white);
	text-decoration: none;
	border:none;
	box-sizing: border-box;
}

a {
	background-color: var(--almost-black);
}

button {
	background-color: var(--main-blue);
	font-size:100%;
}

a:hover, button:hover {
	color: var(--main-yellow);
	cursor: pointer;
}


a.important, button.important {
	background-color: var(--main-red);
}

a.standard {
	background: none;
	color: var(--almost-black);
	text-decoration: underline;
}

button.smallInList {
	padding: 0.25rem 0.5rem;
	margin-left:0.5rem;
	margin-right:0.5rem;
}

b {
	color: var(--main-blue);
}

/* listes */
ul {
	list-style:none;
}
ul li::before {
	content: "\2022";
	color: var(--main-blue);
	font-weight: bold;
	display: inline-block;
	width: 1rem;
	margin-left: -1rem;
}
li {
	margin-top:1rem;
	margin-bottom:1rem;
}

/* labels & inputs */
label {
	font-weight:bold;
	cursor:pointer;
}
label.required:after {
		content:" *";
		color: var(--main-red);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
	height: 2.5rem;
	border:none;
	border-bottom: 2px solid var(--main-blue);
	padding: 0.5em 1em;
	font-size: 110%;
	box-sizing: border-box;
	background:none;
}

input[type="radio"], input[type="checkbox"] {
	display: none;
}



[type="checkbox"] + label:before {
	content:'\56';
	font-family: 'ElegantIcons';
	font-weight: bold;
	font-size: 125%;
	vertical-align: sub;
	margin-right:0.25rem;
	padding-top: 0.125rem;
	cursor:pointer;
}

[type="checkbox"]:checked + label:before {
	content:'\57';
}


input[type="radio"] + label:before {
	content:'\5b';
	font-family: 'ElegantIcons';
	font-weight: bold;
	font-size: 125%;
	vertical-align: top;
	padding-top: 0.125rem;
	cursor:pointer;
	margin-right: 0.25rem;
}

input[type="radio"]:checked + label:before {
	content:'\5c';
}

input[type="date"], input[type="datetime-local"] {
	border-radius: 0.5rem;
	border: 2px solid var(--almost-black);
	padding: 0.25rem 0.5rem;
}


/* range */

input[type=range] {
  margin: 0.25rem 0.5rem;
  padding: 0;
  -webkit-appearance: none;
  height:2rem;
  background-color: transparent;
  vertical-align: middle;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  animate: 0.2s;
  background: #FFD84F;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 0.4rem;
  width: 100%;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--main-blue);
  border: 2px solid white;
  border-radius: 1.5rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 1.5rem;
  margin-top: -0.6rem;
  webkit-appearance: none;
  width: 1.5rem;
}


input[type=range]::-moz-range-track {
  animate: 0.2s;
  background: #FFD84F;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 0.4rem;
  width: 100%;
}

input[type=range]::-moz-range-thumb {
  background: var(--main-blue);
  border: 2px solid white;
  border-radius: 1.5rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
}

input[type=range]::-ms-track {
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
  cursor: pointer;
  height: 0.4rem;
  width: 100%;
}

input[type=range]::-ms-fill-lower {
  background: #FFD84F;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
}

input[type=range]::-ms-fill-upper {
  background: #D5D5D5;
  border: 0px solid #000000;
  border-radius: 0.2rem;
  box-shadow: 0px 0px 0px #000000;
}

input[type=range]::-ms-thumb {
  margin-top:1px;
  background: #0569C1;
  border: 2px solid white;
  border-radius: 1.5rem;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
  height: 1.5rem;
  width: 1.5rem;
}

input[type=range]:focus::-ms-fill-lower {
  background: #FFD84F;
}

input[type=range]:focus::-ms-fill-upper {
  background: #D5D5D5;
}

input[type="range"]::-moz-range-progress {
  background-color: #FFD84F;
}
input[type="range"]::-moz-range-track {
  background-color: #D5D5D5;
}




select {
	height:2rem;
	border:none;
	background-color: var(--main-blue);
	color: var(--almost-white);
	font-size:110%;
	margin-top:0.5rem;
	padding-left:0.5rem;
	border-radius: 0.25rem;
	font-family: "main";
	font-weight: bold;
	overflow: hidden;
	cursor:pointer;
	box-sizing: border-box;
	max-width: 100%;
}

select > option {
	font-family:"main";
}

textarea {
	border:none;
	border-bottom: 2px solid var(--main-blue);
	border-left: 2px solid var(--main-blue);
	border-right: 2px solid var(--main-blue);
	font-size:100%;
	height:10rem;
	padding: 0.25em 1rem;
	box-sizing: border-box;
}


/********/
/* PAGE */
/********/
.page div {
	background-color: var(--content-background-color);
	margin:1rem;
	padding:1rem;
	border-radius:1rem;
}

.page div div {
	background-color:white;
}


/*********************/
/* CLASSES GÉNÉRALES */
/*********************/
.pointer {
	cursor:pointer;
}

.center {
	text-align:center !important;
}

/*********/
/* BLOCS */
/*********/
.w100, .w75, .w50, .w33, .w25 {
	display: inline-block;
	margin-left:1% !important;
	margin-right:0 !important;
}

.w100 {
	width:98%;
}

.w75 {
	width:73.25%;
}
.w50 {
	width:48.5%;
}
.w33 {
	width:32%;
}
.w25 {
	width: 23.75%;
}

.form {
	width:30rem;
	margin:auto !important;
}

.info_block {
	background-color: white;
	text-align:center;
	padding: 1rem;
	border-radius:1rem;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

.maxW1079, .maxW799, .maxW639, .maxW389 {
	display:none;
}

/***********/
/* MODALES */
/***********/
.modal {
	position:fixed;
	display:none;
	height:100vh;
	width:100%;
	padding:25vh 25%;
	text-align:center;
	z-index:100;
	background-color: rgba(255, 255, 255, 0.9);
	top:0;
	left:0;
}

.modal.big {
	padding:5vh 20%;
	z-index:90;
}

.modal .modal_content {
	padding:1rem;
	border-radius:1rem;
}

.modal.big .modal_content {
	background-color:var(--content-background-color);
	overflow-y: scroll;
	max-height: 85vh;
}


#id_error_container {
	//background-color: 
}

/************/
/* Go To Up */
/************/
#id_gototop_div {
	position: fixed;
	right: calc(50% - 44rem);
	bottom: 1rem;
	color: var(--almost-white);
	font-size: 200%;
	cursor: pointer;
	z-index: 9;
	width: 5rem;
	display:none;
}

/*********************/
/* CONTENU PRINCIPAL */
/*********************/
#id_all_contents {
	position: relative;
	max-width: 1600px;
	margin: auto;
	background-color: white;
}

/************/
/* TOP MENU */
/************/
#id_top_menu {
	background-color: var(--content-background-color);
}

#id_top_menu a {
	vertical-align: top;
	margin-top: 3.5rem;
	transform: translateY(-50%);
	margin-left: 1rem;
}

.nav_top_left img.logo {
	width: 7rem;
}

.nav_top_right {
	position: absolute;
	right: 1rem;
	top: 0;
}

/**********/
/* FOOTER */
/**********/
footer {
	background-color: var(--almost-black);
	color: var(--almost-white);
}

footer div {
	padding-left:0.5rem;
	padding-right:0.5rem;
}

footer h3 {
	text-align: center;
	color: var(--main-yellow);
}

/********/
/* INFO */
/********/
.info::before {
	position:relative;
	content:'\e060';
	font-family: 'ElegantIcons';
	font-weight: bold;
	font-size: 150%;
	cursor:pointer;
	margin-left: 0.5rem;
	vertical-align: sub;
	color: var(--main-green);
}

.info div {
	position:absolute;
	display:none;
	border: solid 2px var(--main-green);
}

.info:hover div {
	display:inline-block;
}

/******************/
/* PAGE D'ACCUEIL */
/******************/
.accueil_blobs {
	background: url('../images/backgrounds/bg_blobs.png') no-repeat;
	background-position: center;
	background-size: 37.5rem auto;
	height:52.5rem;
}
.accueil_blobs_inside {
	padding-top: 15rem;
	padding-left: 28.5%;
	padding-right: 27.5%;
}
.accueil_blobs_inside h3 {
	padding-top:1rem;
	padding-bottom:1rem;
}


/********************/
/* PAGE TECHNOLOGIE */
/********************/
.technologie_image {
	width:70%;
	margin-left:15%;
	margin-top:1rem;
}

/*******************/
/* PAGE NOS BILANS */
/*******************/
.nos_bilans_image {
	width:70%;
	margin-left:15%;
	margin-top:1rem;
}

.nos_bilans {
	width:80%;
	margin-left:10%;
	font-size:110%;
	line-height:1.75rem;
}

/*****************/
/* PAGE PLANNING */
/*****************/
.calendar_day {
	position:relative;
	display:none;
	height:39.5rem;
}
.calendar_week {
	position:relative;
	display:block;
	height:40rem; /* 2 + 1.5*24 */
}

.calendar_day .calendar_day_header {
	position:absolute;
	width:87.5%;
	height:3.5rem;
	text-align:center;
}
.calendar_week .calendar_week_header {
	position:absolute;
	width:12.5%;
	height:3.5rem;
	text-align:center;
}

.calendar_day .calendar_day_case {
	position:absolute;
	width:87.5%;
	height:1.5rem;
}
.calendar_week .calendar_week_case {
	position:absolute;
	width:12.5%;
	height:1.5rem;
}

.calendar_week .Hline, .calendar_day .Hline {
	position:absolute;
	height: 2px;
	width:100%;
	margin:0;
	padding:0;
}

.calendar_day .RVBlock {
	position: absolute;
	width: 85%;
	font-size: 80%;
	text-align:center;
	margin:0;
	padding: 0.125rem 0.5rem;
	overflow: scroll;
}
.calendar_week .RVBlock {
	position: absolute;
	width: 10%;
	font-size: 80%;
	text-align:center;
	margin:0;
	padding: 0.125rem 0.5rem;
	overflow: scroll;
}

/*********/
/* TESTS */
/*********/
table.aptitudes_gradient td {
	text-align:left;
	padding:1rem;
}