/* gives time to mermaid to parse datas */
.modules{
	opacity:0;
	animation:showModule 1s 1s forwards;
	border:solid 1px #B5E61C;
	border-radius:5px;
	box-shadow:1px 1px 5px;
	background:#FFFFF0;
	position:relative;
	z-index:2
}
.modules:has(.admin.modules) {
	padding-bottom:1em;
}
.modules details {
	all:initial;
}
@keyframes showModule{
	50%{
		opacity:0
	}
	100%{
		opacity:1
	}
}
[id^="admin-"].modules {
	position:absolute;
	z-index: 0;
	bottom:0.5rem;
	right:0.5rem;
}
img.adminModule {
	display:block;
	height:1.75em;
	padding:0.2em 0.2em 0;
}
.modules.admin .hidden {
	position:absolute;
}
.modules.admin:has(.hidden) + .formModuleAdmin {
	display:none;
}
.modules.admin:has(.hidden:checked) + .formModuleAdmin {
	display:grid;
	position:fixed;
	inset:1em;
	background:inherit;
	border:inherit;
	border-radius:inherit;
}
.formModuleAdmin {
  padding:1em;
  gap:1em;
  grid-template-rows:auto 1fr;
}
.formModuleAdmin header label {
  background:tomato;
  margin-left: auto!important;
  display: block;
  width:max-content;
  padding:.1rem .5rem;
  border-radius:5px;
  color:white;
}
.formModuleAdmin header label::first-letter {
  font-weight:bold;
  color:crimson;
}

.grid2col {
  display:grid;
  grid-template-columns:auto auto;
  place-content:center;
  gap:0 .5em ;
  padding:1em;
  border:solid 1px;
  border-radius:1em;
}
.grid2col label {
  grid-column:1/-1;
}