:root{
	--ease-anticipate: cubic-bezier(0.8, -0.4, 0.5, 1);
	--ease-bounce: linear(0, 0.417 25.5%, 0.867 49.4%, 1 57.7%, 0.925 65.1%, 0.908 68.6%, 0.902 72.2%, 0.916 78.2%, 0.988 92.1%, 1);
	--ease-overshoot: linear(0, 0.361 8.2%, 0.645 16.9%, 0.854 26.1%, 0.932 31%, 0.993 36.1%, 1.031 40.6%, 1.058 45.3%, 1.074 50.3%, 1.08 55.8%, 1.069 65.5%, 1.01 88.7%, 1);

	/* --card-max-width: 28rem; */
	--card-max-width: 80rem;
	--main-menu-size: 3rem;

	--backdrop: radial-gradient( rgba(255,255,255,0.15), rgba(255,255,255,0.05) );

	--z-index-pages: 1000;
	--z-index-side-menu: 2000;
	--z-index-bottom-menu: 3000;
	--z-index-notif: 5000;
	--z-index-alert: 10000;
}

@view-transition{
	navigation: auto;
}
  

body{
	background: var(--surface);
}
#app::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translate(-50%, -50%);
	width: 200vw;
	height: 200vw;
	border-radius: 50%;
	background: var(--background);
	z-index: -1;
	pointer-events: none;
}

#app_pagesArea{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: var(--z-index-pages);
}
.app_page{
	--back-btn-size: 2rem;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: calc( ( var(--index,0) + 1 ) * 100 );
	background: transparent;
	/* padding-top: calc( var(--back-btn-size) * 2 ); */
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 1.75rem;
}
#app:has(#app_mainMenu) #app_pagesArea{
	height: calc( 100% - var(--main-menu-size) );
}

.app_page:not(.active){
	overflow: hidden;
	contain: strict;
	pointer-events: none;
	opacity: 0;
}
.app_page.active{
	overflow-x: hidden;
	overflow-y: auto;

}
.app_page.active .page_card{
	animation-name: app_page_active;
	animation-duration: 0.5s;
	animation-timing-function: var(--ease-overshoot);
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes app_page_active{
	from{
		
		opacity: 0;
		transform: translateY(25%);
	}
	to{

	}
}

.page_content{
	position: relative;
	display: flex;
	/* justify-content: center	; */
	flex-direction: column;
	align-items: center;
	/* row-gap: 2rem; */
	row-gap: 1rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	width: 100%;
	min-height: 100%;
	color: var(--text-secondary);
}

label:has(input[type="text"]),
label:has(input[type="number"]),
label:has(input[type="search"]),
label:has(input[type="password"]),
label:has(input[type="email"]),
label:has(input[type="tel"]),
label:has(input[type="date"]),
label:has(input[type="datetime-local"]),
label:has(input[type="month"]),
label:has(input[type="week"]),
label:has(input[type="time"]),
label:has(input[type="file"]),
label:has(textarea){
	position: relative;
}

.page_card{
	position: relative;
	display: block;
	margin-bottom: 1.15rem;
	padding: 1rem;
	border-radius: 1rem;
	border: 0.0625rem solid var(--background);
	box-shadow: 0 0.0625rem 0.0625rem rgba(0,0,0,0.1),
				0 0.125rem 0.125rem rgba(0,0,0,0.1),
				0 0.25rem 0.25rem rgba(0,0,0,0.1),
				0 0.5rem 0.5rem rgba(0,0,0,0.1);
	background: var(--surface-alt);
	color: var(--text-primary);
	overflow: hidden;
	width: 100%;
	max-width: var(--card-max-width);

	form{
		display: grid;

		legend{
			white-space: nowrap;
		}
	}
	label:has(input[type="text"]),
	label:has(input[type="number"]),
	label:has(input[type="search"]),
	label:has(input[type="password"]),
	label:has(input[type="email"]),
	label:has(input[type="tel"]),
	label:has(input[type="date"]),
	label:has(input[type="datetime-local"]),
	label:has(input[type="month"]),
	label:has(input[type="week"]),
	label:has(input[type="time"]),
	label:has(input[type="file"]),
	label:has(textarea){
		.label{
			width: fit-content;
			background: var(--surface-alt);
			transform: translateY(0.5rem);
			text-transform: uppercase;
			font-size: 0.8rem;
			margin-left: 0.8rem;
			padding: 0 0.2rem;
		}
	}

	label:has(input[type="email"]):not(:focus-within)::after,
	label:has(input[type="tel"]):not(:focus-within)::after,
	label:has(input[type="search"]):not(:focus-within)::after{
		content: "";
		font-family: "remixicon";
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: absolute;
		width: 2rem;
		height: 2rem;
		background-color: transparent;
		right: 0.25rem;
		top: 1.5rem;
		font-size: 1.667rem;
		opacity: 0.15;
		pointer-events: none;
		overflow: hidden;
		contain: strict;
	}
	label:has(input[type="email"]):not(:focus-within)::after{
		content: "\eef6";
	}
	label:has(input[type="tel"]):not(:focus-within)::after{
		content: "\f15a";
	}
	label:has(input[type="search"]):not(:focus-within)::after{
		content: "\f0d1";
	}

	input[type="checkbox"],
	input[type="radio"]{
		appearance: none;
		background: var(--surface-alt);
		border:  0.15rem solid var(--text-muted);
	}
	input[type="checkbox"]:checked,
	input[type="radio"]:checked{
		border-color: var(--primary);
	}
	/* input[type="checkbox"]:checked::before, */
	input[type="radio"]:checked::before{
		content: "";
		display: block;
		width: 80%;
		height: 80%;
		margin: 10%;
		background: var(--primary);
	}
	/*input[type="checkbox"]{
		border-radius: 0.25rem;
		&:checked::before{
			content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23161C27" stroke="%23161C27" stroke-width="2" d="M8.5 17.5l-4-4 1.5-1.5 2.5 2.5L18 7l1.5 1.5z"/></svg>');              
			border-radius: 0.15rem;
		}
	}*/
	input[type="radio"]{
		border-radius: 50%;
		&:checked::before{
			border-radius: 50%;
		}
	}

	details[open] summary + *{
		margin-top: 1rem;
		padding: 1rem 0.5rem;
		background: var(--surface);
		border-radius: 0.5rem;
	}
	summary,
	.likeDetails{
		border-radius: 0.25rem;
		user-select: none;
		text-transform: uppercase;
		cursor: pointer;
	}
	summary{
		transition: 0.25s background var(--ease-overshoot);
	}
	summary:active{
		background: linear-gradient( 90deg, var(--surface), transparent );
	}
	/* .likeDetails{
		text-indent: 1rem;
	} */
	&:first-child{
		margin-top: 2rem;
	}
}
.card_title{
	display: block;
	color: var(--primary);
	letter-spacing: 0.03125rem;
	padding-bottom: 1rem;
	user-select: none;
	cursor: default;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.card_content{
	position: relative;
}

.card_buttonList{
	display: grid;
	row-gap: 0.667rem;
	padding: 1rem 0
}

.card_buttonList button[disabled],
.card_buttonList .button[disabled]{
	opacity: 0.3;
}

.card_textBox{
	font-family: 'Courier New', Courier, monospace;
	font-size: 85%;
	margin: 0.5rem;
	background: var(--surface);
	border-radius: 0.667rem;
	padding: 0.75rem;
}



#app_notificationArea{
	position: fixed;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	contain: strict;
	z-index: var(--z-index-notif);
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	gap: 1rem;
	padding-bottom: calc( var(--main-menu-size) + 2rem );
	pointer-events:none;
}
#app_notificationArea:empty{
	display: none;
}
.app_notification{
	--innerbar-size:0.25rem;
	position: relative;
	display: block;
	width: 90%;
	max-width: 20rem;
	padding: 0.5rem 1rem;
	border-radius: 1.05rem;
	overflow: hidden;
	border: 0.0625rem solid rgba(0,0,0,0.25);
	box-shadow: 0 0.0625rem 0.0625rem rgba(0,0,0,0.1),
				0 0.125rem 0.125rem rgba(0,0,0,0.1),
				0 0.25rem 0.25rem rgba(0,0,0,0.1),
				0 0.5rem 0.5rem rgba(0,0,0,0.1);
	text-wrap: pretty;
	contain: layout style paint;
	cursor: default;
	user-select: none;
	transition: 0.5s opacity ease;
	pointer-events: initial;
	animation-name: app_notification;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes app_notification{
	from{
		opacity: 0;
		transform: translateY(-50%);
	}
}
.app_notification.default{
	background: var(--text-muted);
	color: var(--background);
	text-shadow: 0 0.0625rem 0.0625rem rgba(0,0,0,0.1);
}
.app_notification.success{
	background: var(--success);
	color: var(--text-secondary);
	text-shadow: 0 0.0625rem 0.0625rem rgba(0,0,0,0.4);
}
.app_notification.failure{
	background: var(--error);
	color: var(--text-secondary);
}
.app_notification::after{
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: var(--innerbar-size);
	background: currentcolor;
	border-top-left-radius: 0.25rem;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
	animation-name: app_notification_after;
	animation-timing-function: var(--ease-overshoot);
	animation-duration: var(--duration,3000ms);
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes app_notification_after{
	to{
		width: 0%;
	}
}



#app_alertArea{
	position: fixed;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	contain: strict;
	z-index: var(--z-index-alert);
	background: transparent;
	display:none;
}
#app_alertArea:has(.app_alert){
	display: block;
	background-image: var(--backdrop);
	backdrop-filter: blur(1px);
}
.app_alert{
	/* --width: calc( var(--card-max-width) * 2 / 3 ); */
	--width: 96vw;
	position: absolute;
	left: calc( 50% - var(--width) / 2 );
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	grid-template-rows: max-content 1fr max-content;
	row-gap: 0.5rem;
	width: var(--width);
	/* max-height: calc( var(--card-max-width) * 2 / 3 ); */
	max-height: 80vh;
	border-radius: 1rem;
	padding: 1rem 0;
	background: var(--surface);
	color: var(--text-primary);
	border: 0.0625rem solid rgba(0,0,0,0.25);
	border-top: 0.5rem solid var(--primary-light);
	box-shadow: 0 0.0625rem 0.0625rem rgba(0,0,0,0.1),
				0 0.125rem 0.125rem rgba(0,0,0,0.1),
				0 0.25rem 0.25rem rgba(0,0,0,0.1),
				0 0.5rem 0.5rem rgba(0,0,0,0.1),
				0 1rem 1rem rgba(0,0,0,0.1);
	transition: 0.25s margin-top var(--ease-overshoot);
	overflow: hidden;
	contain: layout paint style;
	animation-name: app_alert;
	animation-duration: 0.25s;
	animation-timing-function: var(--ease-overshoot);
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes app_alert{
	from{
		opacity: 0;
		transform: translateY(-25%);
	}
}
#app_alertArea:has(.app_alert:nth-child(2)) .app_alert:nth-child(1){
	margin-top: -2em;
}
#app_alertArea:has(.app_alert:nth-child(3)) .app_alert:nth-child(1){
	margin-top: -4em;
}
#app_alertArea:has(.app_alert:nth-child(3)) .app_alert:nth-child(2){
	margin-top: -2em;
}
.app_alertTitle{
	padding: 0 1em;
	font-size: 70%;
	opacity: 0.7;
	letter-spacing: 0.03125rem;
	text-transform: uppercase;
	cursor: default;
	user-select: none;
}
.app_alertText{
	padding: 0.5em 1em;
	/* background: var(--surface-alt); */
	word-break: break-word;
	white-space: pre-line;
	overflow-y: auto;
}
.app_alert_btns{

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 1rem;
	padding: 0 0.5rem;
	justify-content:space-evenly
}





#app_mainMenu{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--main-menu-size);
	z-index: var(--z-index-bottom-menu);
	/* background: var(--surface); */
	background: var(--background);
	border-top: 1px solid var(--surface);
	color: var(--text-primary);
	display: grid;
	grid-template-columns: repeat(5,1fr);
	justify-items: center;
	user-select: none;
}
.app_mainMenuBtn{
	position: relative;
	display: block;
	height: var(--main-menu-size);
	display: flex;
	justify-content: center;
	align-items:center;
	line-height: 1;
	font-size: calc( var(--main-menu-size) * 0.667 );
	cursor: pointer;
}
.app_mainMenuBtn:nth-child(3){
	height: calc( var(--main-menu-size) * 1.25 );
	width: calc( var(--main-menu-size) * 1.25 );
	background: var(--primary);
	border-radius: 50%;
	margin-top: calc( var(--main-menu-size) * -0.5 );
	outline: 0.125rem solid var(--surface);
	box-shadow: 0 -0.125rem 0.5rem var(--background);
	text-shadow: 0 0.0625rem 0 rgba(0,0,0,0.25);
	transition: 0.125s background ease,
				0.5s margin-top var(--ease-overshoot),
				0.25s border-radius ease,
				0.125s color ease;
}
.app_mainMenuBtn:not(:nth-child(3)){
	transition: 0.125s background ease;
	width: 100%;
	&:active{
		background: var(--primary);
	}
	&:nth-child(1),
	&:nth-child(4){
		border-right: 0.0625rem solid var(--surface);
	}
}
#app:not([data-uuid]) #appMainMenu_add{
	/* background: rgba(0,0,0,0.33); */
	background-color: var(--background);
	text-shadow: none;
	pointer-events: none;
}
#appMainMenu_add i{
	transition: 0.5s transform var(--ease-overshoot);
}
#app:not([data-uuid]) #appMainMenu_add i{
	color: transparent;
	transform: scale(0.5);
}
.app_mainMenuBtn[data-title]::before{
	content: attr(data-title);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: -2rem;
	background: var(--text-muted);
	color: var(--text-main);
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.667rem;
	letter-spacing: 0.03125rem;
	line-height: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.33rem 1rem;
	border-radius: 0.7rem;
	box-shadow: 0 0.0625rem 0.0625rem rgba(0,0,0,0.2);
	overflow: hidden;
	contain: layout paint style;
	user-select: none;
	pointer-events: none;
}
.app_mainMenuBtn[data-title]:not(:active)::before{
	opacity: 0;
}


#app_sideMenu_cnt{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: calc( 100% - var(--main-menu-size) );
	z-index: var(--z-index-side-menu);
	background: var(--backdrop);
	overflow: hidden;

}
#app_sideMenu{
	--margin-b: 1rem;
	--margin-r: 0.75rem;
	position: absolute;
	right: var(--margin-r);
	bottom: var(--margin-b);
	display: grid;
	align-items: start;
	overflow-y: auto;
	/* width: min(60vw,250px); */
	width: calc( 100% - 2 * var(--margin-r) );
	max-width: 13rem;
	height: fit-content;
	max-height: calc( 100% - var(--main-menu-size) - var(--margin-b) );
	padding: 1rem 0;
	row-gap: 0.15rem;
	background: var(--surface);
	border: 0.0625rem solid rgba(255,255,255,0.1);
	border-radius: 1rem;
	box-shadow: -0.0625rem 0 0.0625rem rgba(0,0,0,0.1),
				-0.125rem 0 0.125rem rgba(0,0,0,0.1),
				-0.25rem 0 0.25rem rgba(0,0,0,0.1),
				-0.5rem 0 0.5rem rgba(0,0,0,0.1);
	animation-name: app_sideMenu;
	animation-duration: 0.125s;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes app_sideMenu{
	from{
		transform: translate(25%,25%);
		background: var(--text-muted);
	}
}
@keyframes app_sideMenu_leftie{
	from{
		transform: translate(-25%,25%);
		background: var(--text-muted);
	}
}
.app_sideMenuBtn{
	position: relative;
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.5rem;
	background: var(--surface-alt);
	color: var(--text-primary);
	font-size: 1.333rem;
	text-transform:capitalize;
	padding: 0.85rem;
	overflow: hidden;
	contain: layout paint style;
	user-select: none;
	cursor: pointer;
	transition: 0.125s background-color ease;
}
/* .app_sideMenuBtn:not(:first-child){
	border-top: 0.1rem solid var(--surface);
} */
.app_sideMenuBtn:active{
	background-color: transparent;
}
.workInProgress{
	opacity: 0.5;
	pointer-events: none;
}
.workInProgress::after{
	content: "work in progress";
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.6rem;
	letter-spacing: 1px;
	position: absolute;
	right: 0.25rem;
	bottom: 0.25rem;
	opacity: 0.3;
}

#app_sideMenu_info{
	padding: 0.25rem 2vw;
	/* width: 56vw; */
	width: 100%;
	color: var(--text-muted);
	font-family: system-ui;
	font-size: 0.75rem;
	text-align:right;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	user-select: all;
	cursor: text;
	font-weight: lighter;
	background: var(--shadow);
}


#homeMultiSel_bg{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: calc( 100% - var(--main-menu-size) );
	z-index: var(--z-index-side-menu);
	background: var(--backdrop);
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	padding-bottom: 3.5rem;
}
.homeMultiSel_btn{
	background: var(--text-muted);
	color: var(--background);
	padding: 0rem 2rem 0rem 1rem;
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
	column-gap: 0.75rem;
	line-height: 1;
	border-radius: 1.05rem;
	font-size: 1.1rem;
	text-transform: uppercase;
	box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1), 
				0 0.125rem 0.125rem rgba(0, 0, 0, 0.1), 
				0 0.25rem 0.25rem rgba(0, 0, 0, 0.1), 
				0 0.5rem 0.5rem rgba(0, 0, 0, 0.1), 
				0 1rem 1rem rgba(0, 0, 0, 0.1);
	border: 0.0625rem solid rgba(0, 0, 0, 0.1);
	animation-name: homeMultiSel_btn;
	animation-duration: 0.5s;
	animation-timing-function: var(--ease-overshoot);
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes homeMultiSel_btn{
	from{
		opacity: 0;
		transform: translateY(50%);
	}
}
.homeMultiSel_btnOuter{
	padding: 0.667rem;
	user-select: none;
	cursor: pointer;
}
.homeMultiSel_btnOuter:active .homeMultiSel_btn{
	background: var(--primary);
	color: var(--text-secondary);
}
.homeMultiSel_btnCat{
	font-size: 2.1rem;
	line-height: 1;
	font-weight: bold;
	opacity: 0.5;
	transition: 0.125s opacity ease;
}
.homeMultiSel_btnCat[data-cat="1"]{
	/* color: #044704; */
	color:var(--sale-symbol);
}
.homeMultiSel_btnCat[data-cat="2"]{
	/* color: #a1001e; */
	color: var(--purchase-symbol)
}
.homeMultiSel_btnOuter:active .homeMultiSel_btnCat{
	opacity: 1;
}
#homeMultiSel_bg.left{
	align-items: start;
}
#homeMultiSel_bg.right{
	align-items: end;
}
#homeMultiSel_bg.left .homeMultiSel_btnOuter,
#homeMultiSel_bg.right .homeMultiSel_btnOuter{
	min-width: 50%;
}


.formExtLink{
	margin-top: 1rem;
	padding: 0.5rem;
	display: grid;
	row-gap: 0.5rem;
}
.formExtLink a{
	padding: 0.33rem 0;
}






.addDoc_form{
    width: 100%;
}
.addDoc_form{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	display: content;
}
.addDoc_form>fieldset[name="allFields"][disabled] button,
.addDoc_form>fieldset[name="allFields"][disabled] .button{
	pointer-events: none;
}

#addDoc_topArea{
    display: grid;
    grid-template-columns: 1fr max-content;
    padding: 0.5rem 1rem;
    column-gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
}
#addDoc_typeLabel{
	min-width: 1rem;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    line-height: 1;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.0.3125rem;
	color: var(--text-muted);
}
.addDoc_form[data-category="1"] #addDoc_typeLabel{
    color: var(--good-number);
}
.addDoc_form[data-category="2"] #addDoc_typeLabel{
    color: var(--bad-number);
}
#addDoc_docDate label{
    position: relative;
}
#addDoc_docDate label input{
	max-width: 10rem;
}

#addDoc_confirm{
    padding: 0.5rem 2rem;
}
#addDoc_righe,
#addDoc_metPags{
	display: grid;
	row-gap: 0.5rem;
}
.addDoc_riga,
.addDoc_metPag{
	--row-h: 2.625rem;
	display: grid;
	column-gap: 0.333rem;
	outline: 0.1667rem solid transparent;
	outline-offset: 0.1875rem;
    border-radius: 0.375rem;
	align-items: center;
	overflow: hidden;
	transition: 0.125s outline-color ease;
}
/* .addDoc_riga>*,
.addDoc_metPag>*{
	display: none;
} */
.addDoc_riga{
	grid-template-columns: max-content 1fr max-content max-content;
}
.addDoc_metPag{
	grid-template-columns: 1fr 1fr 1fr max-content;
}
.addDoc_riga label,
.addDoc_metPag label{
	padding: 0;
}
.addDoc_riga_quant input{
	text-align: center;
	width: 3rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.addDoc_riga_voce input,
.addDoc_metPag_metodo select{
	width: 100%;
}
.addDoc_riga_prezzo input,
.addDoc_metPag_totale input{
	text-align: right;
	width: 6rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.addDoc_riga_rem,
.addDoc_metPag_rem{
	width: calc( var(--row-h) * 0.667 );
	height: var(--row-h);
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	cursor: pointer;
	transition: 0.125s opacity ease,
				0.25s width ease;
}
#addDoc_righe:has(.addDoc_riga:nth-child(1)):not(:has(.addDoc_riga:nth-child(2))) .addDoc_riga_rem,
#addDoc_metPags:has(.addDoc_metPag:nth-child(1)):not(:has(.addDoc_metPag:nth-child(2))) .addDoc_metPag_rem{
	width: 1px;
	opacity: 0 !important;
	pointer-events: none !important;
}
.page_card:has(#addDoc_righe),
.page_card:has(#addDoc_metPags){
	padding-right: 0.5rem;
}

.addDoc_riga:focus-within,
.addDoc_riga:has(:active),
.addDoc_metPag:focus-within,
.addDoc_metPag:has(:active){
    outline-color: rgba(255, 255, 255, 0.1);

}

#addDoc_righeAdd,
#addDoc_metPagsAdd{
	display: flex;
	justify-content: center;
	padding-top: 1rem;
}

.addDoc_metPag input[type="date"]{
	max-width: 180px
}
.addDoc_metPag input[type="date"]::after{
	display: none;
}
#addDoc_metPags:not(:has(.addDoc_metPag:nth-child(2))) .addDoc_metPag{
	grid-template-columns: 1fr max-content max-content;
}
#addDoc_metPags:not(:has(.addDoc_metPag:nth-child(2))) .addDoc_metPag .addDoc_metPag_totale{
	display: none;
}
#addDoc_metPags:has(.addDoc_metPag:nth-child(2)) .addDoc_metPag select[name="metodo_pagamento"]{
	background-image: none;
	padding-left:2px;
	padding-right: 2px;
	min-width: 5rem;
}
#addDoc_metPags:has(.addDoc_metPag:nth-child(2)) .addDoc_metPag_totale input[name="totale_metpag"]{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
	font-size: 85%;
	width: 4rem;
}
#addDoc_metPags:has(.addDoc_metPag:nth-child(2)) .addDoc_metPag_data input[name="totale_data"]{
	font-size: 85%;
	width: 6rem;
	padding-left: 4px;
	padding-right: 0px;
}
.addDoc_metPag_data input{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	height: var(--row-h);
}


.archive_listTitle{
	width: 100%;
	font-weight: bold;
	text-align: center;
	padding: 1rem;
	color: var(--primary-light);
	letter-spacing: 0.5px;
	text-transform: capitalize;
	user-select: none;
}
.archive_list{
	--size: 3rem;
	width: 100%;
	display: grid;
	align-items: start;
	border: 1px solid var(--surface-alt);
	border-radius: 1em;
	overflow: hidden;
}
.archive_listEl{
	display: grid;
	width: 100%;
	position: relative;
	grid-template-columns: 1fr max-content;
	background: var(--background);
	color: var(--text-primary);
	height: var(--size);
	border-bottom: 1px solid var(--shadow);
	padding-left: 0.5rem;
	user-select: none;
}
.archive_listElDesc{
	display: grid;
	cursor: pointer;
	line-height: 1;
    align-content: center;
    gap: 0.25rem;
}
.archive_listElName{
	font-weight: bold;
}
.archive_listElDataCar{
	font-size: 0.75rem;
	font-style: italic;
	opacity: 0.5;
	text-indent: 0.5rem;
}
.archive_listElBtns{
	display: flex;
	flex-wrap: nowrap;
}
.archive_listElBtn{
	width: var(--size);
	height: var(--size);
	display: flex;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--size) * 0.5);
}
.archive_listElBtn:not(:last-child){
	border-right: 1px solid var(--shadow);
}
.archive_listElBtn *{
	pointer-events: none;
}
.archive_listElBtn:active,
.archive_listElDesc:active + .archive_listElBtns .archive_listElBtn[data-q="mod"]{
	background: var(--surface-alt);
}

.archive_disclaimer{
	display: flex;
	justify-content: center;
	color: var(--primary-dark)
}


.archive_modForm{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:grid;
	grid-template-rows: 1fr max-content max-content;
	row-gap: 1rem;
	padding:0.5rem;
}
.archive_modForm>div:first-child{
	overflow-y: auto;
}


.addDoc_riga,
.addDoc_metPag{
	gap: 0;
}
.addDoc_riga_quant,
.addDoc_riga_voce,
.addDoc_riga_prezzo,
.addDoc_metPag_metodo,
.addDoc_metPag_totale{
	position: relative;
}
.addDoc_riga_quant [name="quantity"]{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right:0;
}
.addDoc_riga_quant::after{
	content: "\eb99";
	font-family: "remixicon";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	left: 2rem;
	top: 0.75rem;
	font-size: 1.25rem;
	color: inherit;
}
.addDoc_riga_prezzo::after,
.addDoc_metPag_totale::after{
	content: "\f31e";
	font-family: "remixicon";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	right: 95%;
	top: 0.75rem;
	font-size: 1.25rem;
	color: inherit;
}
.addDoc_riga_voce [name="voce"]{
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}
.addDoc_riga_prezzo [name="totale"]{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 0;
}
.addDoc_metPag_metodo [name="metodo_pagamento"]{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.addDoc_metPag_totale [name="totale_metpag"]{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 0;
}

.addDoc_riga_voce.invalid input{
	border-color: var(--error);
}
.addDoc_riga_voce.invalid input::placeholder{
	color: var(--error-light);
}

.addDoc_form_thenAgain{
	justify-self: center;
}
.addDoc_form_thenAgain input[type="checkbox"]{
	background: transparent;
	margin:1rem 0
}


input.campoAutoCambiato{
	animation-name: inputCambiato;
	animation-timing-function: var(--ease-overshoot);
	animation-duration: 500ms;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes inputCambiato{
	from{
		transform: scale(1.25);
	}
}


.textButton{
	color: var(--accent);
	cursor: pointer;
}






#homeTotal{
    position: relative;
    user-select: none;
}
#home_textTotal{
    --h: calc( 2rem + 0.3rem * (3 - min(var(--nc,0),6) ) ); /* 0=2.9rem, 1=2.6rem, 2=2.3rem, 3=2rem, 4=1.7rem, 5=1.4rem, 6>=1.1rem */
    display: inline-block;
    position: absolute;
    /* background: var(--surface-alt); */
    top: calc( 50% - var(--h) / 2 );
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.5rem;
    line-height: 1;
    padding: 0 0.25rem;
    text-align: center;
    font-size: var(--h);
    height: var(--h);
    contain: layout paint style;
    animation-name: home_textTotal;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-play-state: running;
}
@keyframes home_textTotal{
    from{
        background-color: transparent;
    }
}

.page_card:has(#homeTotal){
    transition: 0.25s opacity ease;
}
.page_card:has(#homeTotal:empty){
    opacity: 0;
}


#statsTotal{
    display: grid;
    row-gap: 0.5rem;
}
.statsTotal_row{
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: 0.2rem;
}
.statsTotal_rowTxt{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: capitalize;
}
.statsTotal_rowNum{
    font-variant-numeric: tabular-nums;
}
.statsTotal_row[data-cat="1"] .statsTotal_rowNum{
    color: var(--good-number);
}
.statsTotal_row[data-cat="2"] .statsTotal_rowNum{
    color: var(--bad-number);
}


.archive_card details>summary{
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    list-style: none;
}
.archive_card details>summary>i{
    transition: 0.25s color ease;
}
.archive_card details>summary:active>i{
    color: var(--accent);
}
.archive_card_content:empty{
    display: none;
}

#homeTotal.nienteDati{
    text-align: center;
    display: grid;
    row-gap: 1rem;
}

.archive_modForm [name="lastval"]{
	text-align: right;
}


.docArchivio_title{
	width: 100%;
	font-weight: bold;
	text-align: center;
	padding: 1rem;
	color: var(--text-muted);
	letter-spacing: 0.5px;
	text-transform: capitalize;
	user-select: none;
}
.docArchivio_title[data-cat="1"]{
	color: var(--bad-number);
}
.docArchivio_title[data-cat="2"]{
	color: var(--good-number);
}
.docArchivio_list{
	--size: 3rem;
	width: 100%;
    display: grid;
    align-items: start;
}
.docArchivio_el{
	display: grid;
	width: 100%;
	position: relative;
	grid-template-columns: 1fr max-content;
	background: var(--background);
	color: var(--text-primary);
	height: var(--size);
	border-bottom: 1px solid var(--shadow);
	padding-left: 0.5rem;
	user-select: none;
}
.docArchivio_elDesc{
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.5rem;
	cursor: pointer;
	line-height: 1;
	align-content: center;
	gap: 0.25rem;
}
.docArchivio_elId{
	font-family: monospace
}
.docArchivio_elData,
.docArchivio_elVal{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.docArchivio_elVal{
	text-align:right;
}
.docArchivio_elBtns{
	display: flex;
	flex-wrap: nowrap;
}
.docArchivio_elBtn{
	width: var(--size);
	height: var(--size);
	display: flex;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--size) * 0.5);
}
.docArchivio_elBtn:not(:last-child){
	border-right: 1px solid var(--shadow);
}

#app:has(.app_page.active form.addDoc_form) #appMainMenu_add{
	margin-top: 0;
	border-radius: 2px;
	background: var(--background-alt)
}
.addDoc_form.editing{
	padding-bottom: 2rem;
}
.addDoc_form_editingBanner{
	position: fixed;
	left: 0;
	bottom: var(--main-menu-size);
	width: 100%;
	background: var(--primary-dark);
	height: 1.75rem;
}
.addDoc_form_editingBanner::before{
	content: "EDITING";
	color: rgba(255,255,255,0.75);
	text-transform: uppercase;
	line-height: 1;
	font-size: 0.85rem;
	letter-spacing: 1px;
	position: absolute;
	left: 0.3rem;
	top: calc( 50% - 0.425rem );
}
.addDoc_form_editingBackBtn{
	position: absolute;
	top: calc( 50% - 0.625rem );
	right: 0.3rem;
	height: 1.25rem;
	font-size: 0.85rem;
	width: 5rem;
	padding: 0;
	
}

.dblink_qrCode{
	border: 1rem solid white;
	border-radius: 1rem;
}
.dblink_shareArea{
	display: grid;
	row-gap: 1rem
}
.dblink_qrCodeCnt{
	display: flex;
	justify-content: center;
	align-items: center;
}
.dblink_qrCodeUrl{
	word-break: break-word;
	max-width: 256px;
	margin: 0 auto;
	font-family: monospace;
	letter-spacing: 0px;
	user-select: all;
	font-size: 0.9rem;
    background: var(--surface);
    line-height: 1;
    padding: 8px;
    border-radius: 0.5rem;
}
.dblink_qrCodeBtns{
	display: flex;
	justify-content: space-evenly;
}
/*.dblink_qrCodeBtn{
	--size: 42px;
	width: var(--size);
	height: var(--size);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--size);
	gap: 0.5rem;
}*/

.dblink_requestAuth{
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	row-gap:1rem
}

.dblink_delQrCodeArea{
	display:flex;
	flex-direction: column;
	row-gap: 1rem;
	justify-content: center;
}
.dblink_delQrCodeText{
	text-align: center;
	font-size: 90%;
}




.userSetting_list{
	display: grid;
}
.userSetting_list>div:not(:last-child){
	border-bottom: 1px solid var(--surface);
}
.userSetting_radioGroup{
	display: flex;
	column-gap: 1rem;
	flex-wrap: wrap;
}
.userSetting_checkbox label,
.userSetting_radioGroup label{
	padding-bottom: 1rem;
	padding-top: 1rem;
}
@media screen and (hover:hover) and (pointer:fine){
	.userSetting_checkbox label:hover [type="checkbox"],
	.userSetting_radioGroup label:hover [type="radio"]{
		border-color: var(--accent)
	}
}





body[data-leftie="1"]{
	#app_mainMenu{
		direction: rtl;
	}
	#app_sideMenu{
		right: unset;
		left: var(--margin-r);
		animation-name: app_sideMenu_leftie;
	}
}


#dblink_connUsrList{
	display: grid;
	align-items: start;
}
.dblink_connUsrEl{
	display: grid;
	grid-template-columns: 1fr max-content;
	column-gap: 0.2rem;
	border-bottom: 1px solid var(--surface);
	align-items: center;
}
.dblink_connUsrElNome{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	user-select: none;
	cursor: default;
}
.dblink_connUsrElData{
	font-size: 66%;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.66;
	line-height: 1;
	padding: 4px 0 8px 0px;
	user-select: none;
	cursor: default;
}
.dblink_connUsrElRem{
	grid-row-end: span 2;
    grid-row-start: 1;
    grid-column-end: 3;
}

#priv_backupFormatCnt{
	display: grid;
}

.stats_reportEl{
    padding: 0.5rem;
	border-bottom: 1px solid transparent;
	user-select: none;
	cursor: pointer;
}
.stats_reportEl:not(:last-child){
	border-bottom-color: var(--surface);
}
.stats_reportEl_nome{

}
.stats_reportEl_desc{
	/* font-style: italic; */
	font-weight: lighter;
	font-size: 75%;
	font-family: system-ui;
	letter-spacing: 0.25px;
}

/* responsive container rules */
/* :root{
	container-name: root;
	container-type: inline-size;
} */
@media (max-width:200px){
	html{
		font-size: 12px;
	}
}
@media (min-width:275px){
	html{
		font-size: 20px;
	}
}
@media (min-width:666px){
	html{
		font-size: 24px;
	}
}