/* General */
body { font-size: 14px; }
* { box-sizing: border-box; font-family: "PT Sans",Arial,Helvetica,sans-serif; }

button { border: 1px solid #224; background-color: #337; padding: 0.1em 0.5em; color: white; border-radius: 0.3rem;}
button:hover { opacity: 0.6; }
button.button-ok { background-color: #373; }
button.button-cancel { background-color: #733; }
button.button-comment { background-color: #444; }
button.button-pendente { background-color: #cfc060;; }
span.icon>svg { height: 1em; }
label.input div.caption { font-size: 0.7em; }
label.input { display: flex; flex-direction: column; align-items: stretch; gap: 0.1rem; }
label.input.checkbox { flex-direction: row-reverse; justify-content: flex-end; }
label.input.checkbox div.caption { font-size: 1em; }
legend { font-family: Acme; }

div.sort-button { cursor: pointer; }
div.sort-button.desc::after { content: "\00a0▼"; }
div.sort-button.asc::after { content: "\00a0▲"; }

div.item-line:not(:hover) .x { visibility: hidden; }
div.item-line .x { color: darkred; cursor: pointer; }

fieldset { border-radius: 0.3rem; padding: 0.7em 0.5em; background: #f8f8ef; }
textarea, label.input input[type="text"], input[type="number"], input[type="date"], input[type="password"] { border-radius: 0.3rem; border: 1px solid gray; padding: 0.1em 0.5em; min-width: 0; box-sizing: border-box; width: 100%; }

.hidden { visibility: hidden; }
.display_none { display: none !important; }
.ellipsis { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; min-height:16px; vertical-align: top; }
.ellipsis>*:not(:first-child) { margin-left: 4px; }
.align-center { text-align: center; }

.light { color: #888; }

.row { display: flex; flex-direction: row; align-items: stretch; gap: 0.5rem; }
.row.wrap { flex-wrap: wrap; }
.column { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.center { align-self: center; }
.start { align-self: start; }
.end { align-self: end; }
.e0   { flex-basis: auto; flex-grow: 0; flex-shrink: 0; }
.e10  { flex-basis: 10%; flex-grow: 10; flex-shrink: 10; }
.e20  { flex-basis: 20%; flex-grow: 10; flex-shrink: 10; }
.e25  { flex-basis: 25%; flex-grow: 10; flex-shrink: 10; }
.e30  { flex-basis: 30%; flex-grow: 10; flex-shrink: 10; }
.e40  { flex-basis: 40%; flex-grow: 10; flex-shrink: 10; }
.e50  { flex-basis: 50%; flex-grow: 10; flex-shrink: 10; }
.e60  { flex-basis: 60%; flex-grow: 10; flex-shrink: 10; }
.e70  { flex-basis: 70%; flex-grow: 10; flex-shrink: 10; }
.e80  { flex-basis: 80%; flex-grow: 10; flex-shrink: 10; }
.e90  { flex-basis: 90%; flex-grow: 10; flex-shrink: 10; }
.e100 { flex-basis:100%; flex-grow: 10; flex-shrink: 10; }

@media (max-width: 800px) {
	.small_e100 { flex-basis: 100%; flex-shrink: 0 }
	.small_wrap { flex-wrap: wrap; }
	.small_order0 { order: 0; }
	.small_order1 { order: 1; }
	.small_order2 { order: 2; }
}

/* Form */
.form-wrap {
	position: fixed;
	top: 0;
	left: 0;
	background: #888d;
	width: 100%;
	height: 100%;
}
.form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	border: 1px solid black;
	min-width: 280px;
	max-height: 95%;
	max-width: 95%;
	display: flex;
	flex-direction: column;
}

.form-header {
	background: #aaf;
	color: white;
	font-size: 1.2em;
	font-weight: bold;
	min-height: 1.1em;
	padding: 5px 10px;
}
.form-content {
	padding: 10px;
	overflow: auto;
	display: flex;
	flex-flow: column;
}
.form-footer {
	padding: 10px;
}

.hover_container:not(:hover) .hover_show { visibility: hidden; }
.subhover_container:not(:hover) .subhover_show { visibility: hidden; }
.overlay_container { position: relative; }
.bottom_overlay { z-index: 1; left: 0; bottom: 0; width: 100%; position: absolute; }

[rel$=".foto"] {   max-width: 100%; align-self: start; object-fit: contain; object-position: top; }

.video_container { display: flex; flex-direction: column; align-items: center; width: 240px; height: 320px; overflow: hidden; }
.video_container>* { height: 100%; }

.header-line { background: #eee; }
.header-line:empty { display: none; }
.header-line>* { padding: 3px }
.static-list>*>* { padding: 3px }

/* List view */
ul.list_view {
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.list_view a {
	cursor: pointer;
	display: block;
}
ul.list_view a>.row>* {
	padding: 3px;
}
ul.list_view li.selected>a {
	background: #ddf;
}
ul.list_view a:hover {
	background: #eef;
}
ul.list_view li + li {
	border-top: 1px solid #d8d8d8;
}

/* Tab view */
.tab-head {
	border-bottom: 1px solid gray;
	margin-bottom: 10px;
}
.tab-head > span {
	padding: 5px;
	display: inline-block;
	font-weight: bold;
	border-bottom: 3px solid transparent;
	cursor: pointer;
}
.tab-head > span:not(.selected):hover {
	border-color: #aaf;
	opacity: 0.5;
}
.tab-head > span + span {
	margin-left: 10px;
}
.tab-head > span.selected {
	border-color: #aaf;
}
.tab-content>*:not(.tab-shown) { display: none; }


.tab-container { display: flex; flex-direction: column; }
.tab-content { display: flex; flex-direction: column; flex-basis: 100%; flex-grow: 10; flex-shrink: 10; }
.tab-content>.tab-shown { flex-basis: 100%; flex-grow: 10; flex-shrink: 10; display: flex; flex-direction: column; }

.tab-container:not(.minified) .minify { display: none; }
.tab-container .minify { line-height: 30px; }
.tab-container.minified { flex-basis: auto; flex-grow: 0; }
.tab-container.minified .tab-head,
.tab-container.minified .tab-content { display: none; }