/*
	--color-bg: white;
var(--color-bg)
	--color-bg-var: #f5f5f5;
var(--color-bg-var)
	--color-bg-var2: #ececec;
var(--color-bg-var2)
	--color-text: #bcbcbc;
var(--color-text)
	--color-text-var: #9b9b9b;
var(--color-text-var)
	--color-acc: #35a8df;
var(--color-acc)
	--color-acc-var: #1d6fb8;
var(--color-acc-var)
*/
:root
{
	--color-bg: white;
	--color-bg-var: #dfdfdf;
	--color-bg-var2: #cfcfcf;
	--color-text: #9f9f9f;
	--color-text-var: #9b9b9b;
	--color-acc: #35a8df;
	--color-acc-var: #1d6fb8;
	--color-text-readonly: #555555;
}

body, button
{
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
}
input, textarea, select
{
	font-family: 'Roboto', sans-serif;
	font-size: 1.0em;
}
button
{
	border: none;
	cursor: pointer;
}
:focus
{
	outline: none;
}
button::-moz-focus-inner {/*Enlève les tirets moches entourant le texte sous Firefox*/
  border: 0;
}
::-webkit-scrollbar {/*Scrollbar*/
      width: 5px;
      height: 5px;
}
::-webkit-scrollbar-track {
	border-radius: 5px;
    background-color: var(--color-bg-var2);
}
::-webkit-scrollbar-thumb {
	border-radius: 5px;
    background-color: var(--color-text-var);
}
strong
{
	color: var(--color-acc);
	font-weight: 500;
}
em
{
	color: var(--color-text-var);
	font-weight: 500;
}
canvas
{
	margin: 10px;
	max-height: 300px;
	width: 500px;
	max-width: 500px;
}
h1
{
	flex: 10;
	align-self: center;
	color: var(--color-acc);
	text-align: center;
	font-weight: 500;
	font-size: 3em;
	margin-top: 50px;
	margin-bottom: 50px;
}
h2
{
	color: var(--color-acc);
	font-weight: 500;
	font-size: 1em;
}

#accueil_soustitre
{
	color: var(--color-text);
	font-weight: 100;
	font-size: 1.3em;
}
#box_compte h2
{
	margin-top: 0;
	margin-bottom: 10px;
}

/*Inputs*/
input[type=color]
{
	background-color: transparent;
	border: none;
	width: 50px;
	height: 30px;
	margin: 10px;
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 10px;
}
input[type="color"]::-moz-color-swatch {
	border: none;
	border-radius: 10px;
	width: 45px;
	height: 20px;
}

/*ID*/
#menu
{
	background-color: var(--color-bg-var);
	width: 30%;
	margin:auto;
	padding: 10px;
}
#button_compte
{
	width: 200px;
}
#new_reponse
{
	margin-bottom: 10px;
}
#home
{
	margin-left: 5%;
	height: 60px;
	width: 60px;
	align-self: center;
}
#sauvegarde
{
	margin-bottom: 55px;
	align-self: flex-end;
	margin-right: 5%;
}

#message_sauvegarde
{
	text-align: center;
}

/*Classes*/
.toggle_hide
{
	background-color: var(--color-bg-var2);
	color: var(--color-text-var);
	margin: 0px;
	border-radius: 0px;
	padding: 0;
	border: none;
	cursor: pointer;
	width: 10px;
}

.button
{
	background-color: var(--color-acc);
	text-decoration: none;
	border: none;
	color: var(--color-bg);
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
}
.button:hover 
{
	background-color: var(--color-acc-var);
}
.big_button
{
	padding: 10px 20px;
	font-size: 1em;
}
.tiny_button
{
	padding: 5px 10px;
	font-size: 0.8em;
	
}

.button_menu
{
	color:var(--color-text-var);
	text-decoration: none;
	font-size: 1em;
	cursor: pointer;
	width: 100%;
	background-color: transparent;
	border: none;
	text-align: left;
	/*font-weight: 300;*/
}

.button_image
{
	background-color: transparent;
	margin-right: 10px;
	width: 30px;
	height: 30px;
	padding: 0;
}
.button_image img
{
	width: 30px;
	height: 30px;
}
.tiny_button_image
{
	background-color: transparent;
	margin: 10px;
	width: 30px;
	height: 30px;
	padding: 0;
}
.tiny_button_image img
{
	width: 30px;
	height: 30px;
}
.big_button_image
{
	background-color: transparent;
	margin-left: 10px;
	width: 50px;
	height: 50px;
	padding: 0;
}
.big_button_image img
{
	width: 50px;
	height: 50px;
}

.arrow
{
	margin: 0;
	margin-right: 5px;
	margin-left: 5px;
}
.tiny_button_image.arrow
{
	background-color: transparent;
	margin: 0;
	margin-right: 5px;
	margin-left: 5px;
	width: 20px;
	height: 20px;
	padding: 0;
}
.tiny_button_image.arrow img
{
	width: 20px;
	height: 20px;
}

.delete_corner
{
	position: absolute;
	right: 0px;
	top: 0px;
}
.copy_corner
{
	position: absolute;
	right: 40px;
	top: 0px;
}
.copy_quiz
{
	margin-top: 0px;
	margin-bottom: 0px;
}
.tiny_margin_vertical
{
	margin-top: 10px;
	margin-bottom: 10px;
}

.image_element
{
	width: 20px;
	height: 20px;
	margin-right: 10px;
}





.tiny_image
{
	width: 30px;
	height: 30px;
	margin-right: 10px;
}

.separator
{
	height: 1px;
	width: 100%;
	margin-top: 5px;
	/*margin-bottom: 5px;*/
	background-color: var(--color-acc-var);
}

#stat_selection_periode .separator
{
	margin-bottom: 10px;
}


.horizontal
{
	display: flex;
	flex-direction: row;
}
.horizontal_center
{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.vertical
{
	display: flex;
	flex-direction: column;
}
.vertical_center
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.half
{
	display: flex;
	flex: 1;
}
.edition
{
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}
.collapsed
{
	display: none;
}
.hidden
{
	visibility: hidden;
}
/*override*/
#bloc_display_parent.collapsed, #commandes_display_parent.collapsed, #reponse_edition.collapsed, #reponse_display_parent.collapsed,
#stat_repondant.collapsed, #stat_questionnaire_display.collapsed, .horizontal.collapsed, #stat_tri_croise.collapsed ,
.display_overflow_parent.collapsed,#stat_questionnaire.collapsed
{
	display: none;
}

.legend_circle
{
	margin: 5px;
	min-height: 20px;
	min-width: 20px;
	max-height: 20px;
	max-width: 20px;
	border-radius: 10px;
}
.legend_square
{
	margin: 5px;
	min-height: 20px;
	min-width: 20px;
	max-height: 20px;
	max-width: 20px;
}
.wrap
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}





.display_overflow_parent
{
	border-radius: 10px;
	display: flex;
	justify-content: flex-start;
	overflow: hidden;
}
.display_overflow
{
	display: flex;
	flex-direction: column;
	max-width: 250px;
	min-width: 250px;
	width: 250px;
	padding: 10px;
	background-color: var(--color-bg-var);
}
.display_overflow > *
{
	margin-top: 10px;
}
#commandes_display
{
	max-width: 180px;
	min-width: 180px;
	width: 180px;
}



#reponse_display
{
	display: flex;
	flex-direction: column;
	max-width: 250px;
	padding: 10px;
	background-color: var(--color-bg-var);
}
#reponse_display
{

	width: 30%;
	overflow: auto;
}
#rejoindre_structure
{
	align-self: flex-start;
}


#structure_link
{
	padding-top: 0;
	flex: 0;
	min-height: 50px;
	overflow: hidden;
	background-color: var(--color-bg);
}
#stat_tri_croise
{
	background-color: var(--color-bg);
	display: flex;
	border-radius: 10px;
	padding: 30px;
	margin-left: 30px;
	margin-right: 30px;	
	flex: 1;
	overflow: auto;
}
#stat_questionnaire
{
	overflow: auto;
	display: block;
	scrollbar-color: var(--color-text) var(--color-bg-var);
	scrollbar-width: thin;
}
.dropdown {
	background-color: var(--color-bg-var);
	border-radius: 10px;
	margin:2px 20px;
	position: relative;
	width: 200px;
}
.dropdown.hidden_column
{
	display: none;
}
table
{
	border-collapse: collapse;
	cursor: default;
}
table p
{
	text-align: center;
}
td
{
	width: 200px;
}
td.hidden_column
{
	font-size: 0;
	width: 0px;
}
th
{
	text-align: left;
	color: var(--color-acc);
	font-weight: 500;
	position: relative;
}
tbody
{
	color: var(--color-text);
	text-align: center;
	background-color: var(--color-bg-var);
}
tbody tr
{
	border-bottom: 1px solid var(--color-text);
	height: 30px;
}
.toggle_column
{
	position: absolute;
	right: 0px;
	top: 8px;
	cursor: default;
	font-size: 1.5em;
	background-color: transparent;
	color: var(--color-text-var);
}
.column, .dropdown div
{
	padding-left: 10px;
	height: 40px;
	padding-right: 20px;
}
.column:before
{
	content: '▼';
    position: absolute;
    right: 20px;
}
.multiSelect {
	padding: 10px;
	border-radius: 10px;
    background-color: var(--color-bg);
    display: none;
    position: absolute;
    width: 180px;
    top: 35px;
}

.overflow
{
	overflow: auto;
	scrollbar-color: var(--color-text) var(--color-bg-var);
	scrollbar-width: thin;
}



#bloc_list, #quiz_list
{
	scrollbar-color: var(--color-text-var) var(--color-bg-var2);
	scrollbar-width: thin;
	overflow: auto;
	flex: 10;
}
#form_video
{
	align-items: normal;
}
#form_image
{
	align-items: normal;
	margin-top: 7px;
}
#box_compte
{
	background-color:var(--color-bg-var);
	width: 50%;
	margin:auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#box_compte p
{
	margin: 0;
}
#list_element
{
	max-height: 22%;
	/*overflow: auto;*/
	margin-top: 10px;
	margin-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: var(--color-bg);
}
#list_element ul
{
	margin: 0;
	height: 100%;
	overflow: auto;
	flex: 1;
}
#stat_repondant_display
{
	margin-top: 20px;
	scrollbar-color: var(--color-text-var) var(--color-bg-var2);
	scrollbar-width: thin;
	overflow: auto;
	min-width: 50%;
}
#list_reponse
{
	flex:1;
	scrollbar-color: var(--color-text-var) var(--color-bg-var2);
	scrollbar-width: thin;
	overflow: auto;
}
#list_reponse ul
{
	width: 90%;
	overflow: auto;
}
#list_element li
{
	width: 99%;
	border-bottom: 1px var(--color-text-var) solid;
}
#list_element p
{
	margin-top: 5px;
	margin-bottom: 5px;
}
#list_element .list
{
	margin: 0;
}
#reponse_edition_parent
{
	flex: 10;
	display: flex;
	background-color: var(--color-bg-var);
}
#reponse_edition
{
	display: flex;
	flex-direction: column;
	background-color: white;
	margin: 10px;
	flex: 10;
	padding: 10px;
	position: relative;
}

#reponse_display_parent
{
	display: flex;
	flex-direction: row;
	overflow: auto;
	flex: 1.2;
	padding: 10px;
	margin-top: 20px;
	background-color: var(--color-bg);
}
#reponse_image
{
	margin-left: 20px;
	height: 50px;
}

#edition_element_container
{
	display: flex;
	flex-direction: column;
	flex: 1;
}
#quiz_edition
{
	position: relative;
	padding:15px;
}
#quiz_statistique
{
	padding: 0;
}
#edition_element
{
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	background-color: var(--color-bg);
	display: flex;
	flex-direction: column;
	flex:1;
	position: relative;
}
#edition_element input[type=text],#edition_element select,#reponse_edition input[type=text],#reponse_edition select
{
	background-color: var(--color-bg-var);
}
#stat_repondant
{
	display: flex;
	align-items: center;
	overflow: auto;
}

#stat_repondant input[type=text]
{
	width: 3em;
}
#stat_repondant_selection
{
	align-items: center;
}
#stat_questionnaire_display
{
	display: flex;
	flex-wrap: wrap;
}

#stat_repondant .reponse_repondant input[type=text]
{
	width: 95%;
	background-color: var(--color-bg-var);
}
#delete_logo img
{
	margin-left: 10px;
}

.reponse_repondant
{
	display: flex;
	width: 99%;
	flex-direction: column;
	background-color: var(--color-bg);
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 2px;
}
.reponse_repondant label
{
	margin: 10px;
}
.reponse_repondant p
{
	margin: 2px;
	display: flex;
	flex-direction: row;
}
.reponse_repondant img
{
	height: 50px;
}
.display_image,.display_video
{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
}
.display_image img,.display_video video,.display_video iframe
{
	height: 250px;
	align-self: center;
}

input[type=text].lecture_seule, textarea.lecture_seule, select.lecture_seule, #edition_element input[type=text].lecture_seule, 
#edition_element select.lecture_seule, #reponse_edition input[type=text].lecture_seule, #reponse_edition select.lecture_seule
{
	background-color: var(--color-text);
	color: var(--color-text-readonly);
}


.button_text
{
	margin-right: 10px;
	margin-left: 10px;
	padding: 0;
	background-color: transparent;
	color: var(--color-text);
}
.button_text:hover 
{
	background-color: transparent;

}
.button_text.button_selected
{
	color: var(--color-acc);
}
.edition input[type=text]
{
	text-align: left;
	width: 50%;
}


.header_nav
{
	border-radius: 10px;
	height: 2em;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background-color: var(--color-bg-var);
}
.header_nav button.list
{
	width: 100%;
}
.rectangle
{
  height: 10px;
  width: 50%;
  background-color: black;
}
.center
{
	padding: 1%;
	width: 30%;
	margin: auto;
}
.connexion
{
	color: var(--color-acc);
	font-weight: 500;
	align-self: center;
	margin-top: 10px;
}
.logo
{
	margin-top: 10px;
	height: 100px;
}


.stat_right
{
	margin-left: 20px;
}
.stat_left
{
	margin-right: 20px;
}

.right
{
	float: right;
	margin-right: 10px;
	width: 20px;
	height: 20px;
}
.erreur
{
	text-align: center;
	margin-bottom: 20px;
	color: red;
}
.reussite
{
	text-align: center;
	margin-bottom: 20px;
	color: var(--color-acc);
}
.toggle {
	margin-bottom: 20px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 54px;
	height: 24px;
	display: inline-block;
	position: relative;
	border-radius: 50px;
	top:10px;
	overflow: hidden;
	outline: none;
	border: none;
	cursor: default;
	background-color: var(--color-bg-var2);
	transition: background-color ease 0.3s;
}
.toggle:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	width: 20px;
	height: 20px;
	background: #b1b1b1;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	text-shadow: -1px -1px rgba(0,0,0,0.15);
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.toggle:checked {
	background-color: var(--color-acc);
}
.toggle:checked:before {
	left: 32px;
	background: var(--color-acc-var);
}

.list_parent
{
	overflow: auto;
}
.list
{
	background-color: transparent;
	color: var(--color-text);
	padding: 0;
	text-align: left;
	border-radius: 0px;
	width: 90%;
}
.list:hover
{
	background-color: transparent;
}
.selected
{
	color: var(--color-acc);
	position:relative;
}
.selected button
{
	color: var(--color-acc);
	font-weight: 600;
}
.selected:before
{
	color: var(--color-acc);
	position:absolute;
	left:-1em;
	top:1px;
	content: '\25fc';
}
.element.selected:before
{
	color: transparent;
}
.section_compte
{
	display: flex;
	flex-direction: column;
	flex: 0 40%;
	padding: 5%;
}
.section_compte li
{
	color: var(--color-text);
}
.white
{
	background-color: var(--color-bg);
}





label img
{
	max-width: 50px;
	max-height: 50px;
}
textarea
{
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: justify;
	padding: 10px;
	background-color: var(--color-bg-var);
	color: var(--color-text);
	border: none;
	border-radius: 10px;
	flex: 1;
	scrollbar-color: var(--color-text-var) var(--color-bg-var2);
	scrollbar-width: thin;
	resize: none;
}
select
{
	color: var(--color-text);
	background-color: var(--color-bg);
	height: 30px;
	min-height: 30px;
	border: none;
	border-radius: 10px;
	margin: 5px;
	text-align: center;
}

ul
{
	margin-top: 5px;
	scrollbar-color: var(--color-text-var) var(--color-bg-var2);
	scrollbar-width: thin;
	padding-left: 1em;
	list-style-type: none;
}
li button
{
	font-weight: 500;
}
li p
{
	display: flex;
	align-items: center;
}

input[type=number]
{
	max-width: 30px;
}


input[type=email],input[type=password],input[type=text],input[type=number]
{
	color: var(--color-text);
	background-color: var(--color-bg);
	height: 30px;
	border: none;
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left;
	padding-left: 10px;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--color-bg) inset;
    -webkit-text-fill-color: var(--color-text);
}
form
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
form input[type=email],form input[type=password],form input[type=text]
{
	width: 80%;
}
section
{
	background-color: var(--color-bg-var);
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	flex:1;
	padding: 30px;
	margin-left: 30px;
	margin-right: 30px;
}
header
{
	display: flex;
	justify-content: space-around;
}

header a
{
	margin-left: 100%;
}
header img
{
	height: 60px;
	width: 60px;
}
header nav
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
footer
{
	display: flex;
}
footer a
{
	margin: auto;
	color: var(--color-text);
}
label
{
	font-size: 1.0em;
	color: var(--color-text);
	font-weight: 500;
	margin-right: 5px;
}
p
{
	color: var(--color-text);
	text-align: justify;
}
a
{
	text-decoration: none;
	color: black;
}
a label
{
	cursor: pointer;
}



/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

input[type=number]:-moz-read-only {
  background-color: var(--color-bg-var);
}
input[type=number]:read-only { 
  background-color: var(--color-bg-var);
}

/*Custom checkboxes, radios*/
.checkbox_container, .radio_container {
  display: block;
  position: relative;
  padding-left: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox_container input,  .radio_container input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: var(--color-text-var);
}
.radio_container .checkmark {
	border-radius: 50%;
}
.checkbox_container input:checked ~ .checkmark {
  background-color: var(--color-acc);
}
.radio_container input:checked ~ .checkmark {
  background-color: var(--color-acc);
}


@media screen and (min-height: 500px)
{
	.main
	{
		height: 150vh;
	}
}
@media screen and (min-height: 700px)
{
	.main
	{
		height: 125vh;
	}
}
@media screen and (min-height: 800px)
{
	.main
	{
		height: 100vh;
	}
}
@media screen and (min-height: 900px)
{
	.main
	{
		height: 75vh;
	}
}
@media screen and (max-width: 1024px)
{
	.main_menu
	{
		width: 50%;
	}
	.section_compte
	{
		flex: 90%;
	}
	/*.section_compte:nth-child(1)
	{
		order:1;
	}
	.section_compte:nth-child(2)
	{
		order:3;
	}
	.section_compte:nth-child(3)
	{
		order:2;
	}
	.section_compte:nth-child(4)
	{
		order:4;
	}*/
}