#synchro-log-contener
{
	height: 10px;
	background: repeating-linear-gradient(90deg, rgb(188 188 188 / 0.8), rgb(128 128 128 / 0.9) 25%);
	cursor: pointer;
}

#synchro-log.enlarge
{
	--synchro-log-width: 300px;
	--synchro-log-height: 220px;
	
  width: var(--synchro-log-width);
	height: var(--synchro-log-height);
	
  left: calc(50% - var(--synchro-log-width) / 2);
  top: calc(50% - var(--synchro-log-height) / 2);
	
  display: flex;
  flex-direction: column;
	
  position: fixed;
	cursor: default;
	
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.8);
}

#synchro-log .title
{
	background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .9), 70%, rgba(255, 255, 255, .9));
	padding: 2px;
}

#progress-contener
{
	max-height: 50px;
  overflow: auto;
}

#progress-contener progress
{
	width: -webkit-fill-available;
	vertical-align: top; /* surcharge une valeur par défaut du navigateur */
}

#synchro-log.enlarge .progress-bloc
{
	background-color: rgba(0, 0, 0, 0.5);
	padding: 1%;
	margin: 1%;
}

.progress-bloc .stat
{
	display: flex;
	justify-content: space-between;
}

#synchro-log .body
{
	flex-grow: 1;
	
	display: flex;
  flex-direction: column;
	
	color: black;
	padding: 1%;
}

#synchro-log .report
{
	flex-grow: 1;
	border: 1px solid;
	height: 100px;
  overflow: auto;
	
	display: flex;
  flex-direction: column;
  justify-content: center;
}

#synchro-log .report:empty::before
{
	content: "Rien à afficher ici pour l'instant";
	text-align: center;
}

#synchro-log .report table
{
	width: -webkit-fill-available;
	background-color: palevioletred;
  /* margin-top: 20px; */
}

#synchro-log .report table td
{
	border: 1px solid;
}

#synchro-log .version-error-solution
{
	display: none;
}

#synchro-log .version-error-solution.show
{
	display: initial;
}

#synchro-log .button-close
{
	text-align: center;
	margin: 1% 0%;
}

#synchro-log .button-close input
{
	background-color: black;
	color: white;
	padding: 0px 5px;
	cursor: pointer;
}

/*
	Ces règles sont appliquées quand #synchro-log est dans son état 'réduit',
	l'adapte pour que s'il y a un ou plusieurs 'progress', que le premier
	d'entre eux soit visible
*/

#synchro-log:not(.enlarge) .title,
#synchro-log:not(.enlarge) .progress-bloc:first-child .stat,
#synchro-log:not(.enlarge) .progress-bloc:not(:first-child),
#synchro-log:not(.enlarge) .body
{
	display: none;
}

#synchro-log:not(.enlarge) #progress-contener,
#synchro-log:not(.enlarge) .progress-bloc:first-child,
#synchro-log:not(.enlarge),
#synchro-log:not(.enlarge) progress
{
	height: inherit;
}