body
{
	width: 100vw;
	height: 100vh;
}

/*
	Ce procédé permet d'afficher une banderole en bas de la page
*/
body:not(.admin) .admin-section
{
	padding: 2%;
}

body:not(.admin) .admin-section > *
{
	display: none;
}

main
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	box-shadow: inset 0 0 100px black;
	max-width: none;
}

main > div
{
	flex-grow: 1;
	display: flex;
  flex-direction: column;
	
	/* Annule des règles de 'iframe.css' */
	max-width: revert !important;
	max-height: revert !important;
}

main > div > div
{
	margin: 2px;
	flex-grow: 1;
	max-width: 1000px;
	width: 98%;
  align-self: center;
	display: flex;
  flex-direction: column;
	background-color: rgba(0, 0, 0, 0.2);
	
  /* background-size: 15%; */
  /* background-position: center; */
  /* background-repeat: no-repeat; */
  /* background-blend-mode: darken; */
}

main div.tools
{
	display: flex;
	flex-direction: column;
  justify-content: flex-end;
}

#organization-name
{
	text-align: center;
	font-variant: small-caps;
	font-size: larger;
	font-weight: bold;
	background: linear-gradient(90deg, rgb(255 235 59 / 61%), black, rgb(255 235 59 / 61%));
}

#upload-change
{
	display: flex;
  justify-content: center;
  align-items: center;
	margin: 0% 1%;
}

#upload-change:not(.show)
{
	display: none;
}

#nb-changes
{
	position: absolute;
  color: white;
	cursor: pointer;
}

#profile svg
{
  fill: white;
  align-self: flex-end;
}

#profile.connected svg
{
	fill: lime;
}

#profile.disconnected svg
{
	fill: red;
}

#profile.offline svg
{
	fill: orange;
}

#icons-bar
{
	display: flex;
  justify-content: space-between;
	padding: 2px;
	background-color: rgba(0, 0, 0, 0.5);
}

#icons-bar svg, #icons-bar img
{
	height: 24px;
	width: 24px;
	cursor: pointer;
  vertical-align: bottom;
}

main div.module-icons-group
{
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}

main::-webkit-scrollbar
{
	display: none;
}

div.module-icon
{
	margin: 2%;
	cursor: pointer;
  padding: 10px;
  border-radius: 5px;
}

div.module-icon:hover
{
	filter: brightness(1.2);
}

#students-module.hide,
#grades-module.hide,
#fund-module.hide,
#teachers-module.hide,
#courses-module /* .hide Masque pour tout le monde le module cours vu qu'il n'est pas prêt */
{
	/* opacity: 0.3; */
	/* pointer-events: none; */
	display: none;
}

a
{
	text-decoration: none;
	text-align: center;
}

figure
{
	margin: 0px;
	display: flex;
  flex-direction: column;
  align-items: center;
}

.main-menu .module-icon img
{
	width: 100%;
	height: 100%;
}

.main-menu .module-icon > figure > div:first-child
{
	width: 60px;
	height: 60px;
	padding: 10px;
	margin: 5px;
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0px 0px 5px 0px black;
  border-radius: 50%;
}

.main-menu .module-icon > figure > div:first-child:hover
{
	background-color: rgba(255, 255, 255, 0.2);
	/* box-shadow: 0px 0px 8px 2px yellow; */
}

.admin-section .module-icon img
{
	/* padding: 5px; */
	/* background-color: rgba(255, 255, 255, 0.1); */
	/* box-shadow: 0px 0px 5px 0px black; */
  /* border-radius: 10px; */
}

main div.module-icons-group.task-bar
{
	flex-grow: 0;
	background-color: rgba(0, 0, 0, 0.5);
	flex-wrap: revert;
  overflow: auto;
	justify-content: space-between;
}

.task-bar > .module-icon
{
	margin: 5px;
	align-self: flex-start;
  min-width: 90px;
	border: 2px solid gray;
}

.task-bar > .module-icon:hover
{
	background-color: black;
}

.task-bar > .module-icon figcaption
{
	white-space: pre;
}

.task-bar img
{
	 height: 24px;
	 width: 24px;
}

/*
body:not(.backdrop).theme-default main > div
{
	background: linear-gradient(-45deg, #ffc107, #154a74, #23a6d5, rgba(0, 0, 0, .9));
  background-size: 400% 400%;
  animation: gradient-background 80s ease infinite;
}

@keyframes gradient-background
{
	0%
	{
		background-position: 0% 50%;
	}
	50%
	{
		background-position: 100% 50%;
	}
	100%
	{
		background-position: 0% 50%;
	}
}
*/

@media screen and (max-width: 500px)
{
	.main-menu .module-icon > figure > div:first-child
	{
		width: 50px;
		height: 50px;
		margin: 10px 1%;
	}
	
	div.module-icon
	{
		margin: 10px;
		padding: 2px;
	}
}