.small-radj {
	font-size: 0.8rem;
	font-family: 'rajdhani';
}
.icn { 
	cursor: pointer; 
	border:1px solid transparent;
	transition: var(--transition);
	padding:0.2rem;
}
	.icn:hover { 
		color: var(--pal1); 
		border:1px solid var(--pal1); 
		border-radius:var(--radius);
		transition: var(--transition);
	}
.btn { 
	cursor: pointer; 
	border-radius:var(--radius);
	transition: var(--transition);
	background-size: 200% auto;
	padding:0.5rem 0.9rem;
	font-size: 1rem;
} 
	.btn:hover { 
		background-position: right center;
	}
.btn-tbar {
	background-color:var(--whitesmoke); 
}
	.btn-tbar:hover {
		background-color:var(--pal7); 
	}
.btn-std {
	background-image: var(--button-grad-bg); 
	color: var(--white);
}
.btn-save {
	background-image:var(--button-save-grad-bg); 
	color:var(--white);
}
.btn-cancel {
	background-image:var(--button-del-grad-bg); 
	color:var(--white);	
}
.alert-badge{
	border-radius:50%;
	display:inline-block;
	padding-left:.4rem;
	padding-right:.4rem;
	text-align:center;
	font-weight:normal;
	font-size:.8rem;
}
.card {
  box-shadow:0 0.46875rem 2.1875rem rgba(4,9,20,0.03),0 0.9375rem 1.40625rem rgba(4,9,20,0.03),0 0.25rem 0.53125rem rgba(4,9,20,0.05),0 0.125rem 0.1875rem rgba(4,9,20,0.03);
  border-width:0;
  transition:all .2s;
  border-radius: var(--radius);
  background-color: var(--white);
}
.card1 {
	padding: 0.5rem;
	border-width:1;
	border: 1px solid var(--pal7);
	border-radius: var(--radius);
	background-color: var(--white);
}
.hide{display:none;}
.txtc{text-align:center!important}
.pad-t1{padding-top:1rem;}
.mar-t1{margin-top:1rem;}
.pad0{ padding: 0 !important;}
.pad05{padding:0.5rem;}
.pad1{padding:1rem;}
.pad-b05 {padding-bottom: 0.5rem;}
.pad-b1 {padding-bottom: 1rem;}
.mar-b1 {margin-bottom: 1rem;}
.fon05 {font-size:0.5rem;}
.fon08 {font-size: 0.8rem;}
.fonr1 {font-size: 1rem; font-family: 'rajdhani';}
.fonr12 {font-size: 1.2rem; font-family: 'rajdhani';}
.fonr14 {font-size: 1.4rem; font-family: 'rajdhani';}
/*  FLEX */
.flex {
	display: flex;
}
.flex-end {
	display: flex;
	justify-content: flex-end;
}
.flex-center {
	display: flex;
	justify-content: center;
}
.flex-between {
	display: flex;
	justify-content: space-between;
}
.flex-items-center {
	align-items:center;
}
.flex-content-center {
	align-content: center;
}
.gap05 { gap: 0.5rem; }
.gap1 { gap: 1rem; }
.gap15 { gap: 1.5rem; }
.gap2 { gap: 2rem; }
.w50 { width: 50%; }
.h20 { max-height:20rem; overflow:auto; }
.h30 { max-height:30rem; overflow:auto; }
.h40 { max-height:40rem; overflow:auto; }
.input-readonly {
	color: var(--readonly-fg) !important;
	background-color: var(--readonly-bg) !important;
	pointer-events:none;
}
.grid{ display:grid; }
.grid4{ grid-template-columns:repeat(4, 1fr); }

a{
	text-decoration:none;
	color:inherit;
}
@keyframes fade-in2{
	0%{
		margin-top:-50px;
		visibility:hidden;
		opacity:0
	}
	100%{
		margin-top:0;
		visibility:visible;
		opacity:1
	}
}

body {
	min-width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
	font-family: "quicksand", sans-serif;
	color: var(--black);
}
#main-header {
	height: 50px;
	width: 100%;
	position: fixed;
	z-index: 10;
	display: flex;
	align-items: stretch;
	align-content: center;
	transition: var(--transition);
	background-color: var(--header-bgcolor);
	box-shadow: 0 0 0.35rem rgba(0,0,0,.13);
} 
	#logo { 
		font-family:'rajdhani';
		font-size: 1.4rem;
		line-height:50px;	
		width:220px; 
		padding-left:50px;
		color: var(--logo-color);
		background-color: var(--pal3);
		box-shadow: 0 0 0.55rem rgba(0,0,0,.13);
		background-image:url('../img/logo-menu.png');
		background-position:center center;
		background-repeat:no-repeat;
	}
	#header-content {
		display: flex;
		flex:1;
		align-items: center;
		align-content: center;
		padding:0;
		height: 50px;
	} 
		#header-content-left {
			display: flex;
			align-items: center;
			padding-left:0.5rem;
			font-family: 'quicksand';
		} 
		#header-content-center {
			flex:1;
			text-align:center;
			font-size:1.6rem;
			font-family: 'rajdhani';
			color:var(--pal1);
		}
		#header-content-right {
			display: flex;
			align-content: center;
			align-items: center;
			margin-left: auto;
			padding-right:1rem;
			gap:.5rem;
			font-family: 'quicksand';
		}
		#header-content-right>div{
			font-family: 'rajdhani';
		}
			/*
			* Menu msg utente
			*/
			#user-connected-msg{
				position:relative;
			}
				#user-msg-menu{
					position:absolute;
					display:none;
					top: 40px;
					right:0;
					width:200px;
					min-height:100px;
					font-weight:normal;
					color:var(--usermenu-color);
					background-color:var(--usermenu-bg-color);
					z-index:10;
					border: 1px solid var(--user-menu-bordercolor);
					border-radius:var(--radius);
				}
				#user-msg-menu.show {
					display:block;
					animation: fade-in2 .2s cubic-bezier(.39,.575,.565,1) both;
				}
				#user-msg-menu ul,
				#user-msg-menu li{
					list-style:none;
					padding:0px;
				}
				#user-msg-menu ul{
					padding:0.5rem;
				}
				#user-msg-menu li section{
					display:block;
					transition: transform .2s,height 300ms,color 300ms,background-color 300ms,-webkit-transform .2s;
					transition-property: transform, height, color, background-color, transform;
					transition-duration: 0.2s, 300ms, 300ms, 300ms, 0.2s;
					transition-timing-function: ease, ease, ease, ease, ease;
					transition-delay: 0s, 0s, 0s, 0s, 0s;
					padding-bottom:.5rem;
					border-bottom:1px solid #fef4f6;
				}
				#user-msg-menu h3{
					font-family:'rajdhani';
				}
				#user-msg-menu p{
					font-family:'quicksand';
					font-size:0.8rem;
				}
				#user-msg-menu li section:hover{
					color: var(--item-user-menu-fg-hover);
					background: var(--item-user-menu-bg-hover);
				}

			/*
			* Area utente connesso
			*/
			#user-connected-info { 
				display: flex;
				align-content: center;
				align-items: center;
				position:relative;
			}
				#user-login-menu{
					position:absolute;
					display:none;
					top: 40px;
					right:0px;
					width:200px;
					height:100px;
					font-family:'rajdhani';
					color:var(--usermenu-color);
					background-color:var(--usermenu-bg-color);
					z-index:10;
					border: 1px solid var(--user-menu-bordercolor);
					border-radius:var(--radius);
				}
					#user-login-menu.show {
						display:block;
						animation: fade-in2 .2s cubic-bezier(.39,.575,.565,1) both;
					}
					#user-login-menu h4 {
						text-align: center;
						font-weight: 200;
						font-size: 0.8rem;
						padding: 0.2rem 0;
						background-color: var(--pal3);
						color: var(--white);
					}
					#user-login-menu ul,
					#user-login-menu li{
						list-style:none;
						padding:0px;
					}
					#user-login-menu ul{
						padding:0.5rem;
					}
					#user-login-menu li a{
						display:block;
						transition: transform .2s,height 300ms,color 300ms,background-color 300ms,-webkit-transform .2s;
						transition-property: transform, height, color, background-color, transform;
						transition-duration: 0.2s, 300ms, 300ms, 300ms, 0.2s;
						transition-timing-function: ease, ease, ease, ease, ease;
						transition-delay: 0s, 0s, 0s, 0s, 0s;
						line-height: 2rem;
						height: 2rem;
						position: relative;
						border-radius: .25rem;
						color:var(--item-user-menu-fg);
					}
					#user-login-menu li a:hover{
						color: var(--item-user-menu-fg-hover);
						background: var(--item-user-menu-bg-hover);
					}



/*
* AREE CONTENUTO PRINCIPALE 
*/
#main-container { 
	width: 100vw; 
	height: 100vh;
}
	/*
	* MENU PRINCIPALE
	*/
	#container_sx{
		padding-top:50px;
		height: 100vh; 
		width:220px;
		overflow: hidden; 
		position:fixed;
	}
		#menu_bg { 
		  position: absolute;
		  left: 0;
		  top: 0;
		  height: 100%;
		  width: 100%;
		  opacity: .15;
		  background-size: cover;
		  background-image: url('../img/bg-menu.png');
		}
			#menu_sx{ 
				font-family:'rajdhani';
				min-height: calc(100vh - 50px); 
				width: 250px;
				background-image: linear-gradient(to right,var(--menu-bg1),var(--menu-bg2)) !important;
				display: flex; 
				flex-direction: column; 
				overflow-y: scroll; 
				overflow-x: hidden; 
				padding: 0.5rem 0px;
				padding-left: 5px;
			} 
	/*
	* Contenuto body
	*/
	#container_dx {
		padding: 55px 5px 5px 225px;
		height: calc(100vh - 1.8rem);
		overflow:auto;
	}
		#container_dx_inner {
			position:relative;
		}

/*
* Footer pagina
*/
#main-footer {
	bottom:0px;
	height: 1.8rem;
	left:0px;
	right:0px;
	position: fixed;
	display: flex;
	background-color: var(--header-bgcolor);
	box-shadow: 0 0 0.35rem rgba(0,0,0,.13);
	font-size:.95rem;
	font-family: 'rajdhani';
	line-height:1.8rem;
} 
	#main-footer-left { 
		font-family:'rajdhani';	
		width:220px; 
		color: var(--logo-color);
		background-color: var(--pal3);
		box-shadow: 0 0 0.55rem rgba(0,0,0,.13);
		text-align:center;
	}
	#main-footer-right {
		display: flex;
		align-content: center;
		align-items: center;
		gap:1rem;
	}
	
/*
* TOOLBAR FORMS
*/
.tbar-right{
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	padding: 1rem 0.5rem;
}
	.tbar-right h4{
		font-size: 1.8rem;
		font-family: 'rajdhani';
		color: var(--pal2);
		flex: 1;
	}
	.tbar-right div {
		display: flex;
		cursor: pointer;
		gap: 0.5rem;
	}
	.tbar-right h4 i{
		margin-right: 0.5rem;
	}
		.tbar-right div a:hover {
			color: var(--white);
			background-color: var(--pal2);
			border:2px solid var(--pal6);
			border-radius: var(--radius);
		}
		.tbar-right a {
			border-radius: var(--radius);
			transition: var(--transition);
			background-size: 200% auto;
			font-size: 1rem;
			color: var(--pal2);
			border: 2px solid var(--pal2);
			display: flex;
			flex-direction: column;
			align-items: center;
			align-content: center;
			padding: 0.25rem 0.5rem;
		}
			.tbar-right b {
				font-weight: normal;
				font-size: 0.9rem;
			}

/*
* TOOLBAR FILTRI
*/
.tbar-filter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	padding: 1rem 0.5rem;
}
	.tbar-filter h4 {
		font-size: 1.8rem;
		font-family: 'rajdhani';
		color: var(--pal2);
		flex: 1;
	}
		.tbar-filter h4 i {
			margin-right: 0.5rem;
		}
		
.search_items{
	display: flex;
	justify-content: flex-end;
	gap:0.5rem;
}
.search_field {
	display: flex;
	align-items:flex-end;
	gap: 0.5rem;
}

/*
* TABELLE
*/
table
{
	border-spacing: 0.15rem;
	width:100%;
	font-size:0.9rem;
}
	table th,
	table td
	{
		text-align:left;
		padding: 0.35rem;
	}
	table th{
		background-color: var(--pal5);
		border-radius: var(--radius);
		color: var(--white);
		font-weight:100;
	}
	th.nobg{
		background-color: transparent !important;
	}
	table tr:nth-child(even) {
		background-color: var(--pal8);
	}
	tr:hover{
		background-color: var(--pal7)!important;
	}
	td.center{
		text-align: center;
	}
	tr.rowsel > td {
		background-color: var(--pal3) !important;
		color: var(--pal8) !important;
	}
.icn-table{
	font-size: 1.4rem;
	color:var(--pal2);
}

/*
	Elementi FORM INPUT
*/
.input-form{
	padding:20px;
	transition: all .2s;
}
.input-form .form-group {
    margin-bottom: 0.8rem;
}
.form-group label,
.search_item label,
.search_field label {
	color: var(--pal2);
}
.form-group input,
.form-group textarea,
.form-group select,
.search_item input,
.search_item select,
.search_field input {
	display: block;
	margin-top: .3rem;
	padding: .2rem .55rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pal1);
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid var(--pal7);
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
	.form-group input:focus,
	.form-group select:focus,
	.search_item input:focus,
	.search_item select:focus,
	.search_field input:focus {
		border-color: var(--pal5);
		outline: 0;
		box-shadow: 0 0 0 0.1rem var(--pal3);
	}

.form-group input[type=radio], 
.form-group input[type=checkbox] {
	display:inline-block !important;
	accent-color: var(--pal3);
	transform: scale(1.4);
	margin-left:10px;
}
.form-small{
	font-size:0.9rem;
	color:var(--pal5);
}
.form-small > b{
	display:block;
}
.input-100{
	width:100% !important;
}

/* CSS per view savemessage */
.savemsg-ok{
	text-align:center;
	color: var(--pal3); 
	padding:0.5rem 0px;
}
.savemsg-err{
	text-align:center;
	color: var(--red); 
	padding:0.5rem 0px;
}
.savemsg-err-list{
	display:flex;
	color: var(--red); 
	padding:0.5rem 0px;
}
	.savemsg-err-list div{
		padding-right:1rem;
	}




/* Messaggio popup animato*/
.popup-scale {
	opacity: 0;
	transform: scale(2);
	transition: all 0.3s ease-in-out;
}
.visible-section .popup-scale {
	transform: scale(1);
	opacity: 1;
}
#popup-overlay{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 6000;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.popup-active {
	opacity: 0.5 !important;
	display:block !important;
	transition: opacity 0.3s ease-in-out;
}
#popup-box{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
	#popup-content{
		background-color: var(--white);
		border-radius: var(--radius);
		z-index:6100;
		padding: 0.5rem;
		display:flex;
		flex-direction:column;
	}
		#popup-content header{
			text-align:center;
			font-size: 1.4rem;
			font-family: 'rajdhani';
			display:flex;
			justify-content:space-between;
			align-items:center;
		}
			#popup-content header span{
				flex:1;
				text-align:center;
			}
			#popup-content header i{
				cursor:pointer;
			}
		#popup-content section{
			flex:1;
			display:flex;
			padding:0.5rem;
			overflow:auto;
			align-items:center;
			justify-content:center;
		}
	.size1{ width:300px; height:150px;}
	.size2{ width:450px; height:250px;}
	.size3{ width:50%; height:50%;}	
	
legend.leg1{
	font-size: 1.1rem; 
	font-family: 'rajdhani';
	background-color: var(--pal4);
	color: var(--pal8);
	padding: 0.25rem;
	border-radius:var(--radius);
}
/*
 Utilizzati nella gestione della configurazione SMS
*/
ul.ul-tree{
	list-style:none;
	margin:0px;
	padding:0 0 .5rem 0;
}
	ul.ul-tree li {
		list-style: none;
		padding: 0;
		margin-bottom: 0.25rem;
		color: var(--black);
		font-size: 0.9rem;
	}
		ul.ul-tree li.parent,
		ul.ul-tree li.parent-sel {
			color: var(--pal2);
			font-family: 'rajdhani';
			font-size: 1.1rem;
			border-bottom: 1px solid var(--pal7);
		}
			ul.ul-tree li.parent:hover {
				color: var(--pal2);
				background-color: transparent;
				cursor: default;
			}
			ul.ul-tree li.parent-sel:hover {
				cursor: pointer;
			}
		ul.ul-tree li:hover {
			cursor: pointer;
			background-color: var(--pal7);
			transition: var(--transition);
		}
	
#insert_msg textarea{
	width:100%;
}