/*var(--default-btcolor);  var(--default-bgcolor);  var(--default-field-bgcolor);*/

   
/*COLORS ****************************************/ 

	chr-red		{color: #b31111; font-weight: 500;}
	chr-green	{color: #00d500; font-weight: 500;}
	chr-yellow	{color: yellow;  font-weight: 500;}
	chr-orange	{color: orange;  font-weight: 500;}
	chr-blue	{color: blue;    font-weight: 500;}
	chr-white	{color: white;   font-weight: 500;}

button, html, [type=button], [type=reset], [type=submit]{
	-webkit-appearance: unset !important;
}
 
right {
	display: flex;
    justify-content: flex-end;
}

	.mobileicon{ height: 100%; }
	.xmobileicon { margin: 4px; 	height: 30px; width: fit-contents;position: relative; display: flex;justify-content: center; }
	.xmobileicon:hover{ animation: jump 0.8s infinite linear; }
	.cmobileicon{}	
		
/*ROOT ****************************************/ 

:root {
  --def-btcolor:		#105b87;
  --def-bgcolor: 		rgb(255,255,255); 
  --def-capcolor: 		rgb(100,100,100);
  --def-field-bgcolor: 	rgb(255,255,255); 
  --def-height: 			3.3em;
  --def-margin-top: 		0px;
  --def-margin-bottom: 	10px;
  --def-font-size: 		12px; 
  --def-caption-font-size: 0.95em; 
  --def-font-weight-bold: 	600;
  --def-font-weight-normal: 	400;
  --def-line-height: 		1.5;
  --def-font-family: sans-serif;
}

*, :after, :before {
    box-sizing: border-box;
}

body { margin: unset; }


	#spinner {
		width: 100vw;
		height: 100vh;
		text-align: left;
		position: fixed;
		z-index: 1999999;
		top: 0;
		left: 0;
		background-color: rgba(255,255,255,0.8);
		align-items: center;
		display: flex;
		justify-content: center;
	}
							
	#paraside
	{ 
		all: unset;
		background-color: var(--def-bgcolor);
		font-family: var(--def-font-family);
		font-size: var(--def-font-size); 
		line-height: var(--def-line-height);
		color: #333;
		display: flex;
		justify-content: center;
		position: relative;
		height: 100%;
		overflow-y: auto;
		/*min-height: 100%;*/
	}

	paraside h1 {font-size: 2em; 	line-height: 1.5em;}
	paraside h2 {font-size: 1.5em; line-height: 1.5em;}
	paraside h3 {font-size: 1.3em; line-height: 1.5em;}
	paraside h4 {font-size: 1em; 	line-height: 1.5em;}
	paraside h5 {font-size: 0.8em;  	line-height: 1.5em;}
	paraside h6 {font-size: 0.7em;  	line-height: 1.5em;}
	paraside hr {border: none; border-top: 1px solid #4b7ed7;}

	paraside select 		{ font-family: unset; font-size: var(--def-font-size); font-weight: var(--def-font-weight-normal); }
	paraside input 		{ font-family: unset; font-size: var(--def-font-size); font-weight: var(--def-font-weight-normal); }
	paraside input[type=time],
	paraside input[type=date] { line-height: unset; font-weight: var(--def-font-weight-normal); }
	paraside textarea 	{ font-family: unset; font-size: var(--def-font-size); font-weight: var(--def-font-weight-normal); }
	paraside table 		{ font-family: unset; font-size: var(--def-font-size); font-weight: var(--def-font-weight-normal); }

	.prsmain 
	{
		width: 100%;
		padding-left: 5px;
		padding-right: 5px;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 20px;
		align-content: flex-start;
		justify-content: center;
		min-height: 97%;
		font-weight: var(--def-font-weight-normal);
		padding-top: 10px;
	}  

/*MESSAGE*************************************************************/
#litemess {
    position: fixed;
    z-index: 99990;
    background-color: red;
    border-radius: 4px;
    top: 15vh;
    color: white;
    padding: 10px 20px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    max-width: 55%;	
	display: none;
	max-height: 80vh;
	overflow-y: scroll;
}
	#litemesstitle{
		font-size: 1.5em;
		width: 100%;
		margin-bottom: 10px;
	}

	#litemessmessage{
		font-size: 1.2em;
		padding: 10px;
		width: calc(100% - 60px);
		margin-left: 20px;
	}
	
	#litemessimage{
		width: 40px;
	}
	
	#litemessbutton{
		display: none;
		width: 100%;
		margin-top: 15px;
	}		
	
	#litemessbuttonaction, 
	#litemessbuttonactionnone{
		background-color: white;
		width: 30%;
		margin-left: 70%;
		color: black;
	}

/*EXECUTION*************************************************************/	
	#execution{
		height: 20px;
		border: solid 1px #909090;
		width: 70%;
		position: absolute;
		top: 35%;
		left: 15%;
		border-radius: 10px;
		display: none;
	}

	#executionbar
	{
		background-color: #4b7ed7;
		height: 100%;
		position: relative;
		width: 30%;
		display: block;
		border-radius: 10px;
	}

/*COMBOBOX*************************************************************/	

	.prsd-comboboxdiv
	{
		padding-left: 8px;
		padding-right: 8px;
		height: var(--def-height);
		margin-bottom:  var(--def-margin-bottom);
	}

		.prsd-combobox-obj
		{
			font-size: 1em;
			border: 1px solid rgb(204, 204, 204);
			text-align: start;
			letter-spacing: normal;
			word-spacing: normal;
			background-color: var(--def-field-bgcolor);
			border-radius: 4px;
			width: 100%;
			padding: 0px 5px 2px 5px;
			color: #434a54;
			height: 28px;
		}


/*SLIDER***********************************************************/
	.prsd-sliderdiv
	{
		padding-left: 8px;
		padding-right: 8px;
		height: var(--def-height);
		display: flex;
		flex-wrap: wrap;
	}
	.prsd-slider-obj{
			height: 0.4em;
			width: 100%;
			background-color: lightgrey;
			border-radius: 8px;
			-webkit-appearance: none;
			outline: none;
			margin-top: 1em;
		}	
		
		.prsd-slidernumber{
			background-color: lightgrey;
			border-radius: 4px;
			padding: 4px;
			margin-left: -3px;
		}	

/*TEXT*************************************************************/	

	.prsd-textdiv
	{
		padding-left: 8px;
		padding-right: 8px;
		height: var(--def-height);
		margin-bottom: var(--def-margin-bottom);
	}

		.prsd-text-obj
		{
			border: 1px solid rgb(204, 204, 204);
			text-align: start;
			letter-spacing: normal;
			word-spacing: normal;
			background-color: var(--def-field-bgcolor);
			border-radius: 4px;
			width: 100%;
			padding: 2px 5px 2px 5px;
			color: #434a54;
			height: 28px;
		}


/*BUTTON*************************************************************/	

	.prsd-buttondiv
	{
		min-height: var(--def-height);		
		height: fit-content;		
		padding-top: 1.25em;
		padding-right: 5px;
		padding-left: 5px;	
		margin-bottom: var(--def-margin-bottom);		
		display: flex;
		justify-content: center;
	}

        .prsd-buttontooltip
		{
			display: none;
			position: absolute;
			width: max-content;
			text-align: center;
			display: none;
			transition: display 0.5s;
			z-index: 9;
			background-color: rgba(255,255,255,0.5);
			padding: 0.1em 1em;
			border-radius: 0.8em;
			bottom: -20px;
		}
		
		.prsd-buttondiv:hover > .prsd-buttontooltip
		{
			display: block;
		}

		.prsd-button-obj
		{
			min-height: 27px;
			height: 100%;
			width: 100%;
			border: none;
			display: flex;
			justify-content: center;
			overflow: hidden;
			text-decoration: none;
			color: white;
			text-align: center;
			cursor: pointer;
			border-radius: 4px;
			margin: 0 auto;
			background-repeat: no-repeat;
			background-position: center left 10px;
			background-size: 1.2em;
			padding: 0px 10px;
			align-items: center;
			background-color: var(--def-btcolor);
			border-radius: 1.5em;
		}
		.prsd-button-obj:hover, .prsd-button-obj:active{opacity: 0.7;}
				

		.prsd-grid-button-obj
		{
			min-height: 27px;
			border: none;
			display: flex;
			justify-content: center;
			overflow: hidden;
			text-decoration: none;
			color: white;
			text-align: center;
			cursor: pointer;
			white-space: nowrap;
			border-radius: 4px;
			background-repeat: no-repeat;
			background-position: center left 10px;
			background-size: 1.2em;
			padding: 0px 10px;
			align-items: center;
			margin: 0 auto;
			background-color: var(--def-btcolor); 
		}
		
/*BUTTON*************************************************************/	

	.prsd-textareadiv
	{
		position: relative;
		padding-left: 8px;
		padding-right: 8px;
		margin-bottom: var(--def-margin-bottom);
	}

		.prsd-textarea-obj
		{
			height: calc( 100% - 20px ); 
			width:  100%; 
			background-color: var(--def-field-bgcolor);
			border: 1px solid rgb(204, 204, 204);
			border-radius: 4px;	
			padding: 5px;
			font-size: 0.95em;
		}

/*BAR*************************************************************/	

		.prsd-bar-obj
		{
			font-size: 1em;
			text-align: center;
			border-bottom: 2px solid #4b7ed7;
			margin: 0 auto;
			margin-top: 10px;
			margin-bottom: 10px;
			
		}


/*CHECK*************************************************************/	
	.prsd-checkdiv {
		padding: 12px 8px 0px 8px;
		min-height: var(--def-height);	
		display: flex;
		align-items: center;	
		height: fit-content;
	}

		.prsd-check-obj { 
			padding: 0px 8px 0px 8px !important;
			margin: 12px 10px 12px 10px !important;
			width: 1em;
			height: 1em;
		}

		.prsd-checkcaption { 
				width: fit-content;
				min-height: 1.5em;
				font-size: 1em;
				//font-weight: var(--def-font-weight-bold);
				//display: flex;
				overflow: hidden;
				color: var(--def-capcolor);
		}


/*TREE*************************************************************/	
	.prsd-treediv{                                    	
		padding-left: 8px;
		padding-right: 8px;		
		margin-bottom: var(--def-margin-bottom);
	}  

		.prsd-treefield{                                    
			overflow: scroll;
			font-size: 1.1em;
			height: calc( 100% - 20px );
			width: 100%;
			border: solid 1px rgb(204,204,204);
			background-color: var(--def-field-bgcolor);
			border-radius: 4px;
		}  

		.prsd-treelabel{
			color: #333;
			padding-top: 0.1em;
		}

		.prsd-treeitem{                                    
			border-left: dotted 1px #d1d1d1;
			padding: 3px 0px; 
			margin-left: 23px; 
			overflow: hidden;
			width: 95%;
			position: relative;
			flex-wrap: wrap;
			cursor: pointer;	
		}  

		.prsd-treeroot{                                    
			padding: 7px;
			margin-left: 10px; 
			overflow: hidden;
			width: 95%;
			position: relative;
			flex-wrap: wrap;
			cursor: pointer;	
		}  
		
			.prsd-treelabel:hover{ 
				background-color: grey;
				color: white;
				border-radius: 4px;
			}

			.prsd-treelabel-selected{ 
				background-color: grey;
				color: white;
				border-radius: 4px;
			}
			
		.prsd-treeminusplus{                                    
			height: 15px;
			width: 15px;
			margin: 0.2em 5px 0px 2px;
		}  


		.prsd-treeline{
				height: 11px;
				width: 15px; 
				border-bottom: 1px dotted #d1d1d1;
		}

		.prsd-treecheck{                                    
			height: 15px;
			margin: 2px 7px 0px 3px;
		}  
		
/*TABLE*************************************************************/	

table {
	unset: all;
}

.prsd-tablediv{
    padding-left: 8px;
    padding-right: 8px;
    font-size:  1em;
    margin-bottom: 5px;
	margin-top: var(--def-margin-bottom);
	height: fit-content;
}

    .prsd-table-obj{
	border: solid 1px #c1c1c1;
    border-radius: 4px;
	border-spacing: 1px;
	border-collapse: separate;
	width: 100%;
	font-size:  1em;
	}
	
		.prsd-table-obj>thead {
			z-index: 2;
			position: sticky;
			top: 0px;
		}
		
			.prsd-table-obj>thead>tr>th {
				top: 0;
				background-color: var(--def-btcolor);
				color: white;
				padding: 6px;
				font-weight: var(--def-font-weight-bold);
				z-index: 2;
			}
			
			.prsd-table-obj>tbody>tr>td {
				 border-top: 0px solid #ddd;
				 vertical-align: middle;
				 padding: 0.7em;
				 cursor: pointer;
				 position: relative;
				 height: 3em;
				 color: black;
			}
	
		.HoverLightCell>tbody>tr>td:hover {
			background-color: var(--def-btcolor) !important;
			color: white;
		}

		.HoverLightRow>tbody>tr:hover{
			background-color: #c2cfe4 !important; 
			color: white;
		}
		
		
	.prsd-table-obj>tbody>tr{background-color: var(--def-field-bgcolor);}
	.prsd-table-obj>tbody>tr:nth-child(even){background-color: #e9e9e9;}

    .prsd-table-obj [firstcol="true"] {
		background-color: var(--def-btcolor);
		color: white;
	}

			#ChryGridEdit{
				z-index: 1;
				overflow: hidden;
				resize: none;
				color: black;
				background-color: transparent;
				width: 100%;
				resize: none;
				box-sizing: border-box;
				padding: 0px;
				border: 0px;
			}

	/*
		.chrystable tr:hover{
			background-color: #c2cfe4 !important;
			color: white;
		}
		
				  

		
		.table>thead:hover {
			  color: red;
		}	
	*/

	.chrystablecontent{
		background-color: transparent;
		height: calc( 100% - 0.85em );
	}


/*COLOR*************************************************************/	

.prsd-colordiv{
	padding-left: 8px;
	padding-right: 8px;
	height: var(--def-height);
	margin-bottom: var(--def-margin-bottom);	
	position: relative;
	display: flex;
    flex-wrap: wrap;
}

.prsd-colorfield{
	text-align: start;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	/*text-shadow: none;*/
	text-rendering: auto;
	-webkit-rtl-ordering: logical;
	cursor: text;
	-webkit-appearance: textfield;
	background-color: var(--def-field-bgcolor);
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px 0px 0px 4px;
	display: block;
	width: calc( 100% - 25px );
	padding: 0px 5px 2px 5px;
	font-size: 1em;
	line-height: 1.42857143;
	color: white;
	border-color: #aab2bd;
	box-shadow: none;
	background-size: cover; 
	height: 28px; 
}

.prsd-colorimg{
	width: 25px;
    padding: 6px;
    border-radius: 0px 4px 4px 0px;
    background-color: #aab2bd;
    cursor: pointer;
    border-color: #aab2bd;
    height: 28px;
}

.form-control {
padding: 2px 5px 2px 5px;
height: 28px;
}



				.buttonicon {
					background-color: #9e9e9e; 
					/* color: black; */
					height: 100px;
					background-size: 3em;
					/* background-position: top center; */
					background-position-x: center;
					background-position-y: 10px;
					justify-content: center;
					display: flex;
					align-items: flex-end;
					padding: 10px;
					width: 100%;
					border: none;
					/* display: inline-block; 
					vertical-align: middle; */
					overflow: hidden;
					text-decoration: none;
					color: white;
					text-align: center;
					cursor: pointer;
					white-space: nowrap;
					border-radius: 4px;
					margin: 0 auto;
					background-repeat: no-repeat;
					padding: 0px 10px;
				}
				.buttonicon:hover, .buttonicon:active{
				opacity: 0.7;
				}

.cke_contents{	
		height: 80%;
}

                           
.dropzone {
    min-height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: white;
    padding: 20px 20px;
    height: 100%;
    border-radius: 20px;
    border-style: dotted;
    color: black;
}

.dz-button {
    background-color: var(--def-btcolor); 
    width: 70%;
}

/* MESSAGE *****************************************************/
	#prsblur{
		width: 100%;
		height: 100%;
		position: fixed;	
		z-index: 9;	
		backdrop-filter: blur(3px);	
		top: 0px;
		left: 0px;
		padding: 40px 10px 10px 10px;
		display: none;
	}


/* MOBILE FRAME *****************************************************/
[prsdtype=MobileFrame]
{ 
	position: sticky;
	z-index: 100;
	background-color: var(--def-bgcolor);
	margin: 0 auto;
	padding: 5px 0px 10px 0px;
	display: flex;
	flex-wrap: wrap;
	border-radius: 0px 0px 4px 4px;
	align-content: flex-start;
	overflow-y: auto;
	height: calc( 100% - 25px);
	border: 1px solid #cccccc;
	padding-top: 5px;
	justify-content: space-between;
}  

	.mfdivcont
	{
		z-index: 101;
		position: fixed;
		box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
		top: 3vh;
		z-index: 99;
		border-radius: 4px;
		overflow: hidden;
	}

	.mfbackground{
		width: 100%;
		height: 100%;
		position: fixed;	
		z-index: 2;	
		backdrop-filter: blur(3px);	
		top: 0px;
		left: 0px;
		padding: 40px 10px 10px 10px;
	}

	.icsclose {
		position: absolute;
		top: 4px;
		color: #4a7dd5;
		margin: 0;
		right: 10px;
		cursor: pointer;
		z-index: 102;
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/close-rounded.svg.php?color=back);
		height: 20px;
		width: 20px;
		background-repeat: no-repeat;
		background-size: contain;
	}
		.icsclose:hover {
			background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/close-rounded.svg.php?color=back);
		}

	.maximize {
		position: absolute;
		top: 6px;
		color: #4a7dd5;
		margin: 0;
		right: 40px;
		cursor: pointer;
		z-index: 102;
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/zoom-out-map-rounded.svg.php?color=back);
		height: 16px;
		width: 18px;
		background-repeat: no-repeat;
		background-size: contain;
	}
		.maximize:hover {
			background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/zoom-out-map-rounded.svg.php?color=back);
		}

	.unmaximize {
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/zoom-in-map-rounded.svg.php?color=back);
	}
		.unmaximize:hover {
			background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/zoom-in-map-rounded.svg.php?color=back);
		}

	.minimize {
		position: absolute;
		top: 5px;
		color: #4a7dd5;
		margin: 0;
		right: 70px;
		cursor: pointer;
		z-index: 102;
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/view-headline-rounded.svg.php?color=back);
		height: 18px;
		width: 18px;
		background-repeat: no-repeat;
		background-size: contain;
	}
		.minimize:hover {
			background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/view-headline-rounded.svg.php?color=back);
		}

	.resizeme {
		position: absolute;
		bottom: -7px;
		color: #4a7dd5;
		margin: 0;
		right: -7px;
		cursor: pointer;
		font-weight: 100;
		z-index: 102;
		/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;*/
		font-family: var(--def-font-family) !important;
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg.php?color=back);
		height: 25px;
		width: 25px;
		background-repeat: no-repeat;
		background-size: contain;
		transform: rotate(-45deg);
		cursor: nwse-resize;
	}
		.resizeme:hover {
			background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg.php?color=back);
		}

	.frameicon{
		background-image: url(https://framework.paraside.cc/logo/paraside.logo.svg);
		background-color: transparent;
		background-repeat: no-repeat;
		background-size: contain;	
		background-position: center;		
		position: absolute;
		top: 0px;
		left: 10px;
		margin: 0;
		right: 70px;
		z-index: 102;
		height: 25px;
		width: 16px;
	}

	.mfcaption {
		position: relative;
		background-color: rgb(204, 204, 204);
		height: 25px;
		width: 100%;
		display: flex;
		padding: 3px 100px 3px 40px;
		color: #105b87;
		z-index: 101;
		font-size: 1.3em;
		overflow: hidden;
	}      

 


[chrytype=Editor]
{ 
	margin: 0 auto;
	left: 10%;
	padding: 10px 10px 10px 10px;
	flex-wrap: wrap;
}  

.row-editor {
	margin-right: 10px;
    margin-left: 10px;
}

button {
	min-height: 27px;
	width: 100%;
	border: none;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: white;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	border-radius: 4px;
	margin: 0 auto;                                
	background-repeat: no-repeat;    
	background-position: center left 10px;
	background-size: 1.2em;
	padding: 0px 10px;
}  	

button:hover, button:active{
	opacity: 0.7;
}

.prsdlabel{
	
	width: 100%;
	min-height: 1.5em;
	font-size: 0.85em;
	font-weight: var(--def-font-weight-bold);
	display: flex;
    overflow: hidden;
    white-space: nowrap;
	color: var(--def-capcolor);
}

[chrytype=FrameOfFrame]
{
	width:100%;
	position: relative;
	margin-top: 15px;
}

[chrytype=Frame]
{
	/*width:100%;*/
	margin: 10px 5px 0px 5px;
	display: flex;
	flex-wrap: wrap; 
	border-radius: 4px; 
	border-bottom: 0 none;
	transition: 0.2s; 
	align-content: flex-start;	
	background-color: transparent;
    padding-bottom: 5px;
	justify-content: space-between;
	
}


/*LIST ****************************************/

	.prsd-listdiv
	{
		padding-left: 8px;
		padding-right: 8px;
		margin-bottom: 5px;
	}

	.prsd-list-obj
	{
		background-color: var(--def-field-bgcolor);
		/*padding: 5px 0px 5px 0px;*/
		height: calc( 100% - 20px );
		cursor: pointer;
		display: flex;
		flex-wrap: wrap;
		width: fit-content;
		align-content: flex-start;
		min-width: 100%;
		/*overflow-y: scroll;*/
	}

	.listvolume{
		background-color: transparent;
		height: calc( 100% - 1.5em );
		overflow: scroll scroll;
		width: 100%;
		background-color: var(--def-field-bgcolor);
		  border-radius: 4px;
		border: 1px solid rgb(204, 204, 204);
	}

		.prsd-listdiv-row
		{
			width: 100%;
			display: block;
			min-width: fit-content;
			padding: 6px 4px 6px 10px;
			background-color: var(--def-bgcolor); 
			/*white-space: nowrap;*/
		}
		
		.prsd-listdiv-row:nth-child(odd) {
			background-color: #ffffff;  /* Azzurro chiaro */
		}

		.prsd-listdiv-row:nth-child(even) {
			background-color: #ededed;  /* Arancio chiaro */
		}

			.prsd-listdiv-row
			{
				background-color: transparent;
			}

			.prsd-listdiv-row:hover
			{
				background-color: #c2cfe4 !important;
				color: white;
			}
		
		.prsd-listselected
		{
			background-color: var(--def-btcolor);
			color: var(--def-btcolor);
		}		


/*PICTURE ****************************************/
.prsd-picture-obj
{
	
}

	.prsd-picturediv:hover > .prsd-picturecaption
	{
		display: block;
	}

	.prsd-picturediv
	{
		position: relative;
		display: flex;
        justify-content: center;
	}

	.prsd-picturecaption
	{
		position: absolute;
		width: fit-content;
		text-align: center;
		display: none;
		transition: display 0.5s;
		z-index: 9;
		background-color: rgba(255,255,255,0.5);
		padding: 0.1em 1em;
		border-radius: 0.8em;
		/*max-width: 400%;*/
		height: fit-content;
		top: 100%;
	}

/*IMAGE ****************************************/

.prsd-image-obj{
	width: 100%; 
	object-fit: contain; 
	height: 100%;
	border-radius: inherit;
}

	.prsd-imagediv{
		padding: 5px; 
		margin: 0 auto; 
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.prsd-imagecaption{
		font-size: 0.8em;
	}
	
/*UPLOADER ****************************************/

.prsd-uploader-obj{
	width: 100%; 
	object-fit: contain; 
	height: 100%;
	border-radius: inherit;
}

	.prsd-uploaderdiv{
		margin: 0px 5px 1.25em 5px;
		height: fit-content;
		margin-bottom: var(--def-margin-bottom);
		height: fit-content;
		border-radius: 4px;
	}

	.prsd-uploadercaption{
		font-size: 0.8em;
	}
	
	.prsd-uploaderbutton{
		text-align: center; 
		padding: 3px;
	}
	
	.prsd-uploadericon{
		height: 100%;
		width: 100%;
	}	
	.prsd-uploaderlogo{
		height: 2em;
		text-align: center;
		cursor: pointer; 
	}

	.prsd-uploaderitem{
			width: fit-content;
			margin: 8px 0 8px 0;
			padding: 1px 10px 1px 10px;
			border-radius: 10px;
			background-color: orange;
			font-size: 0.7em;
			display: flex;
			justify-content: space-between;
	}
	
	
	
/*UPLOADER ****************************************/
/*	[chrytype=Uploader] 
	{
		padding: 26px 8px 26px 8px;
		
		border-radius: 4px; 
		background-color: #ffffff;		
	}

		[chrytype=Uploader] .upload-list-item
		{
			width: fit-content;
			margin: 8px 0 8px 0;
			padding: 1px 10px 1px 10px;
			border-radius: 10px;
			background-color: orange;
			max-height: 1.6em;
			height: 5%;
		}	*/
	
/*ICON ****************************************/

.prsd-icon-obj{
	width: 100%; 
	object-fit: contain; 
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;	
	background-position: center;
	position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;	
}

	.prsd-icondiv{
		padding: 5px; 
		margin: 0 auto; 
	}

	.prsd-iconcaption{
		font-size: 0.8em;
		width: 100%;
		margin-top: 5px;
		word-wrap: break-word;
	}

	.prsd-iconsub
	{ 
		width: 50%;
		height: 60%;    
		background-position: center;
		width: 50%;
		height: 60%;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.prsd-iconreflect
	{ 
		-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,.5)));
	}


/*IFRAME ****************************************/
	.prsd-iframediv{
		padding-left: 8px;
		padding-right: 8px;	
		height: var(--def-height);
		margin-bottom: var(--def-margin-bottom);
	}

	.prsd-webkitdiv{
		padding-left: 8px;
		padding-right: 8px;
		height: fit-content;
		margin-top: 10px;
	}

/*EDITOR******************************************/

.cke_inner { height: 100%; }

.prsd-editordiv{
	padding-left: 8px;
	padding-right: 8px;
	height: fit-content;
	margin-bottom: 10px; 
	/*margin-top: 10px;*/
	padding-bottom: 5%;
}

	.prsd-labelfield-text {
		margin: 8px 0px 3px 0px ;
		text-align: justify;
		display: block;
		width: 100%; 
		padding: 10px;
		color: #434a54;
		box-shadow: none;  
		color: #434a54;
		font-size: 1em;
		/*cursor: context-menu;*/
	}  

/*LABEL******************************************/
.prsd-labelfield{
	margin: 0px 0px 8px 0px ;
	text-align: center;
	letter-spacing: 0.4px;
	display: block;
	width: 100%; 
	padding: 10px;
	font-size: 1.1em;
	line-height: 1.42857143;
	color: #434a54;
	border-color: #aab2bd;
	box-shadow: none;  
	color: white;
	cursor: context-menu;
}

	.prsd-labelfield-icon {
		margin: 8px 0px 3px 0px ;
		text-align: right;
		background-repeat: no-repeat;
		display: flex;
		width: 100%; 
		padding: 10px;
		color: #434a54;
		box-shadow: none;  
		color: #434a54;
		font-size: 1em;
		cursor: context-menu;
		background-size: 20px;
		background-position: 10px center;
		justify-content: flex-end;
		align-items: center;
	}  

	.prsd-labelfield-icon:hover {
		background-color: lightgrey;
	}  

	.prsd-labelfield-caption {
		margin: 8px 0px 3px 0px ;
		text-align: justify;
		display: block;
		width: 100%; 
		padding: 10px;
		font-size: 1em;
		color: white;
		box-shadow: none;  
		background-color: rgb(193,193,193);
		cursor: context-menu;
	}  

	.prsd-labelfield-label {
		margin: 8px 0px 3px 0px ;
		text-align: justify;
		display: block;
		width: 100%; 
		padding: 10px;
		font-size: 1em;
		color: #434a54;
		box-shadow: none;  
		color: #434a54;
		cursor: context-menu;
	}  
    
/* IDE ******************************************/
.prsd-ide-obj{                                    

}  
	.prsd-idediv{                                    
		
	}  
	.prsd-idecaption {

	} 
	
/* CANVASES *************************************/	
	.prsd-canvases-obj{
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	
	.prsd-canvasesdiv{
		display: flex;
		justify-content: space-between;
		border: solid 1px lightgrey;
		border-radius: 4px;	
	}
 
	prsd-canvaseshstrechbar{
		cursor: col-resize;
	}
 
/*FRAME******************************************/
.prsd-framecaption {
	width: fit-content;
	color: black;
	position: absolute;
	left: 15px;
	background-color: var(--def-bgcolor);
	padding: 0px 10px 0px 10px;
	border-radius: 4px;
	margin-left: 5px;
	color: black;
	font-size: 1em;
	z-index: 1;
	height: fit-content;
}  

	.prsd-frameresize {
		width: 10px;
		height: 10px;
		position: absolute;
		bottom: -10px;
		right: -10px;
		background-color: red;
		display: none;
		z-index: 999;
	}

	.prsd-framecaptionbar {
		margin: 0px 5px 0px 5px;
		background-color: lightgrey;
		border-radius: 4px 4px 0px 0px;
		height: 2em;
		padding: 0.25em 0.25em 0.25em 1em;
		color: #4b7ed7;
		font-weight: var(--def-font-weight-bold);
	}

	.prsd-frameshadow {
		position: absolute;
		background-color: lightgrey;
		width: calc( 100% - 6px );
		opacity: 0.2;
		display: none;
		z-index: 3;
		height: calc( 100% - 6px );
		top: 3px;
	}

	.prsd-canvasdiv {
		position: relative;
		border: 1px solid rgb(204, 204, 204);
		margin: 10px 5px 8px 5px;
		background-color: transparent;
		border-radius: 4px;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;
		width: 100%;
		padding-top: 3px;
		background-origin: content-box;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		overflow-y: auto;
	}

	.prsd-canvasspan {	    
		/*
		width: 100%;
		height: 100%;
		display: inherit;
		flex-wrap: inherit;
		justify-content: inherit;
		
		all: inherit;*/
		width: 100%;
		height: 100%;
		display: inherit;
		flex-wrap: inherit;
		justify-content: inherit;
		margin: 0px;
		padding: 0px;
	}

/*DIV*******************************************/
	.prsd-divdiv {
		position: relative;
		background-color: transparent;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;
		width: 100%;
		overflow-y: auto;
	}


/*MENU******************************************/
.prsd-menu-obj{                                    

	position: relative;
	height: var(--def-height);
    z-index: 0;	
	min-height: var(--def-height);
    padding-top: 1.25em;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: var(--def-margin-bottom);;
}  

	.prsd-menuborder{
		position: absolute;
		border: 1px solid rgb(204, 204, 204);
		padding-top: 5px;
		width: calc( 100% - 10px);
		border-radius: 6px;
		z-index: 9;
		background-color: lightgrey;   
		cursor: pointer;                                
	}                                      
	 
	.prsd-menuextended{                                    
		margin-top: 15px;
		margin-bottom: var(--def-margin-bottom);
		margin-right: 5px;
		margin-right: 5px;
		position: relative;
		height: 43px;   
		border-radius: 6px;
		border: solid 1px rgb(75, 126, 215); 
		margin-left: 5px;
		background-color: transparent;                                                            
	} 
	
	.prsd-menupicture{                                    
		height: 1em;
		z-index: 90;
		background-repeat: no-repeat;
		position: absolute;
		left: 11px;
		width: 20px;
		background-size: contain;
		bottom: var(--def-margin-bottom);                                                          
	} 	
																	
	.prsd-menucaption{
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg.php);
		min-height: 27px;
		width: 100%;
		border: none;
		display: flex;
		vertical-align: middle;
		overflow: hidden;
		text-decoration: none;
		/* color: white; */
		text-align: center;
		cursor: pointer;
		white-space: nowrap;
		border-radius: 4px;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center right 10px;
		background-size: 1.2em;
		background-color: var(--def-btcolor);
		justify-content: center;
		align-items: center;
		color: white;
		padding-right: 30px;
	}         

	.prsd-menuextended-caption{
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/keyboard-arrow-down-rounded.svg.php);
		min-height: 28px;
		width: 100%;
		border: none;
		display: flex;
		vertical-align: middle;
		overflow: hidden;
		text-decoration: none;
		text-align: center;
		cursor: pointer;
		white-space: nowrap;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center right 10px;
		background-size: 1.2em;
		justify-content: center;
		align-items: center;
		background-color: var(--def-btcolor);
		color: white;
	}       

	.prsd-menuarrow{
		box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
		background-color: var(--def-bgcolor);  
		border-radius: 5px;
		box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
		height: fit-content;
		width: 97%;
		position: absolute;
		min-width: fit-content;
		display: flex;
		flex-wrap: wrap;
		padding-top: 5px;
	}                           

	.prsd-menuextended-arrow{
		background-color: var(--def-bgcolor);
		border-radius: 5px;
		height: fit-content;
		width: fit-content;
		position: absolute;
		min-width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-top: 5px;
		justify-content: space-between;
	}  

/*IFRAME ****************************************/
.prsd-iframefield{
	border: 1px solid #aab2bd;
	background-color: white;
	border-radius: 4px;
	width: 100%;
    height: calc( 100% - 1.7em );
}

.prsd-iframefield iframe{
	width: 100%;
    height: 100%;
    border-radius: 4px;
    border: solid 1px #aab2bd;
}

/*INPUT ****************************************/
	.prsd-inputdiv{
		padding-left: 8px;
		padding-right: 8px;
		height: var(--def-height);
		margin-bottom: var(--def-margin-bottom);
		position: relative;
	    display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.prsd-inputfield-search {
		background-image: url(https://framework.paraside.cc/img/icons/api.iconify.design/material-symbols/search-rounded.svg.php);
		width: 30px;
		height: 28px;
		background-position: center;
		background-size: contain;
		border-radius: 4px 0px 0px 4px;
		background-repeat: no-repeat;
		background-size: 1.5em;
		cursor: pointer;
		position: absolute;
		right: 1em;
		border-radius: 1em;
	}

	.prsd-inputfield-searchb
	{
		text-align: start;
		letter-spacing: normal;
		word-spacing: normal;
		text-transform: none;
		text-indent: 0px;
		text-shadow: none;
		text-rendering: auto;
		-webkit-rtl-ordering: logical;
		cursor: text;
		-webkit-appearance: textfield;
		background-color: var(--def-field-bgcolor);
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		display: block;
		width: 100%;
		padding: 0px 5px 2px 5px;
		line-height: 1.42857143;
		color: #434a54;
		border-color: #aab2bd;
		box-shadow: none;
		background-size: cover; 
		height: 28px; 
		border-radius: 1em;
		padding: 0em 2.5em 0em 1em;
		border-radius: 1em;
	}

	.prsd-inputfield{
		text-align: start;
		letter-spacing: normal;
		word-spacing: normal;
		text-transform: none;
		text-indent: 0px;
		text-shadow: none;
		text-rendering: auto;
		-webkit-rtl-ordering: logical;
		cursor: text;
		-webkit-appearance: textfield;
		background-color: var(--def-field-bgcolor);
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		display: block;
		width: 100%;
		padding: 0px 5px 0px 5px;
		line-height: 1.42857143;
		color: #434a54;
		border-color: #aab2bd;
		box-shadow: none;
		background-size: cover; 
		height: 28px; 
	}

/*AGGIUNTE ****************************************/
	#pulltoscroll {
		width: 100%;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}  

	.loader {
		border: 7px solid #4b7ed74a;
		border-radius: 50%;
		border-top: 7px solid #4b7ed7;
		width: 80px;
		height: 80px;
		-webkit-animation: spin 2s linear infinite; /* Safari */
		animation: spin 2s linear infinite;
		margin: 0 auto;
		font-family: var(--def-font-family); /*'Vollkorn', serif;*/
		font-size: 40px; 
		text-align: center;
		color: #4b7ed7;
	}

	.prsd-pickericon{
		height: 20px;
	}

@media (max-width:700px) 
{
	
	.principale 
		{
			padding-left: 1px;
			padding-right: 1px;
		}  

	.chrystablecontent{
		overflow-y: unset;
	}

    [chrytype=Frame]
    {
		margin-bottom: 5px;                               
    }
    
    [prsdtype=MobileFrame]
    { 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        border-radius: unset !important;
        overflow-y: auto !important; 
		justify-content: space-between;
		min-width: auto;
		padding-bottom: 50px;
    }  
 
		.mfdivcont
		{
			z-index: 101;
			position: fixed;
			width: 100% !important;
			height: 100% !important;
			top: 0px !important;
			left: 0px !important;
			padding-bottom: 100px !important;
		    z-index: 9999;
		}

		.mfbackground
		{ 
			position: fixed;
			z-index: 100;
		}
 
		.mfcaption 
		{
			border-radius: 0px;
			z-index: 101;
		}        
 
    [prsdleftover="Text"]{
		background-image: unset  !important;
		text-align: center  !important;
		padding-left: 10px !important;
    }

    [prsdleftover="Icon"]{
		color: transparent !important;
		background-position: center !important;
    }
	
    [prsdleftover="Both"]{

    }
    
	.prsd-menucaption{
		justify-content: left;
		padding-left: 5px;
	}  	
	
	#litemess {
		max-width: 98%;
		top: 100px;
		font-size: 0.9em;
		overflow-y: scroll;
	}
	
	#litemessimage{
		width: 20px;
	}

}