details{
	--border-radius: 5px;
	--radius-offset: 1px;
	border-radius: var(--border-radius);
	border: 1px solid #999999;
}
details > summary {
	border-top-left-radius: calc(var(--border-radius) - var(--radius-offset));
	border-top-right-radius: calc(var(--border-radius) - var(--radius-offset));
	background-color: #015579;
	color: white;
	font-size: 1em;
	padding: 10px;
	list-style: none;

	border-bottom: 1px solid #999999;
	/* non so perchè ma lascia un margine sopra e sotto */
	/*
	margin-top: -1px;
	margin-right: -1px;
	*/
}
details:not([open]) > summary {
	border-bottom-left-radius: calc(var(--border-radius) - var(--radius-offset));
	border-bottom-right-radius: calc(var(--border-radius) - var(--radius-offset));
	border-bottom: 0px;
}

details > summary{
	display: flex;
	align-items: center;
}
/* serve per creare lo spazio in mezzo */
details > summary:not(.WithCommand):before{
	content: '';
	order: 100;
	flex: 1;
}
details > summary:after{
	content: 'expand_more';
	font-family: var(--font-icon) !important;
	font-size: 2em;
	order: 101;
	font-variant: initial;
}
details[open] > summary:after{
	content: 'expand_less';
}


details > div,
details > content{
	padding: 10px;
	display: block;
}

*.WithCommand,
summary.WithCommand{
	display: flex;
	align-items: center;
	padding: 5px;
}
*.WithCommand > *,
summary.WithCommand > *{
	margin: 0px 2px;
}
*.WithCommand .main,
summary.WithCommand .main{
	flex: 1;
}

.WithCommand > .AddButton{
	margin: 0px;
	padding: 0px;
	padding-right: 10px;
	width: auto;
}

details > summary > font-icon{
	margin-right: 10px;
}

details.FixedHeader > summary{
	position: sticky;
	top: -10px;
	z-index: 10;
}