@import "../lib/animations/dual-ring-animate/dual-ring-animate.css";

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

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);
}

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-around;
	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);
}

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

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

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

.main-menu .module-icon > figure > div:first-child
{
	width: 80px;
	height: 80px;
	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);
}

main div.module-icons-group.task-bar
{
	flex-grow: 0;
	background-color: rgba(0, 0, 0, 0.5);
	flex-wrap: wrap;
}

.task-bar > .module-icon
{
	margin: 5px;
	align-self: flex-start;
  min-width: 100px;
	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;
}

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