/**
 * Form CSS
 *
 * @package Nt/Local/Site/Public/DTools
 * @copyright Gruppo36 from 1999 (All rights reserved)
 * @author Paolo Chiodi
*/


/* Form */
.form-group{		margin-bottom:12px;		/* padding-bottom:12px;  meglio il margin per compensare le scrollbar  */		}
.form-label,
.form-group >	label,
.form-group >	.form-confirm label{	padding:0 0 0 8px;	 font-size:0.8rem;   font-weight:500;    color:var(--bs-shade10);	}
.form-group >	label{                margin:0;  }

/* Form - Input group 
.input-group > .form-control{   flex: 0 1 auto;  }
*/

/* Form - Help */
.form-group label.form-help{    display:flex;    align-items:center;  padding-top:2px; padding-bottom:1px; }
.form-group label.form-help .s-icon{   margin-left:8px;  order:5;	}

/* Form - Data confirm */
.form-group >	.form-confirm{  			padding-top:8px;   }
.form-group >	.form-confirm > label{   margin:0; }



/* Form - Inline */
.form-inline{		display:flex;		flex-flow:row wrap;		align-items:center;	}
.form-inline > .form-group{				padding-right:16px;		}
.form-inline > .form-group > label{		padding:1px 8px 0 0;	}

/* Form -  Group inline */
.group-inline{					display:flex;		flex-flow:row wrap;  align-items:flex-start;	margin-right:-16px;	}
.group-inline	.form-group{	padding-right:16px;		}




/* Form  - Control */
.form-control{					padding:6px 8px;  }
.form-control.form-autoh{   	height:auto !important;	  }

/* Form  - Control Locked */
.form-control.locked-active{	box-shadow:0 0 0 .25rem rgba(37,43,1,0.25);	}


/* Form - Input group */ 
.input-group{    			flex-wrap:nowrap;  		}
.input-group > button{		padding:2px 8px;		}

.input-group > .form-control:not(:last-child){       border-right:0px solid transparent;  }
.input-group > .form-control:not(:first-child){		 border-left:0px solid transparent; 	}

.input-group > button.input-group-text{         	border-left-width:1px;  transition:background-color .3s;   }
.input-group > button.input-group-text:not(.disabled):hover{   	background-color:var(--bs-secondary);  	}
.input-group > button.input-group-text.disabled{   				background-color:var(--bs-shade1);  }


/* Form - Input group Text - Icons */
.input-group-icon.input-group-text{				padding:0 4px;	justify-content:center;		}
button.input-group-icon:not(.disabled):hover{  	text-decoration:none;    }

.input-group-icon			 .s-icon{  					--nt-icon-fill:var(--bs-shade10);  	}
button.input-group-icon:not(.disabled):hover .s-icon{	--nt-icon-fill:var(--bs-shade0); 	}

.input-group > button.input-group-icon.disabled .s-icon{   	opacity:0.35;	 }

/* Form - Feedback */
/*
.has-feedback  > label:not(.form-help)::after,
.has-feedback  > label.form-help > span::after{	content:'*';	}
*/
.has-feedback           .form-control-feedback{    	display:none;  font-size:12px;   color:var(--bs-danger);  }

.has-feedback.has-error{  							padding-bottom:6px;    	}
.has-feedback.has-error .form-control-feedback{    	display:block;   		}
.has-feedback.has-error .form-control,
.has-feedback.has-error .form-select,
.has-feedback.has-error .input-group-text{          box-shadow: 0 0 0 .2rem var(--bs-danger);     }


/* Form - Hidden */
.form-hidden{    visibility:hidden;  overflow:hidden;   height:0;  }


/* Form - Info */
.form-info{                	height:auto; min-height:calc(1.5em + .75rem + 2px); margin:0; 	padding:0;	display:flex;	align-items: center;	   }
.form-info.form-control{   	height:auto; background-color:var(--bs-shade1);	color:var(--bs-shade9)	   }
.form-info .info-icon{		margin:0 0 0 4px;	} 
.form-info .info-text{		padding:6px 8px; 	}


/* Form - Radio + Checkbox + Switch */
.form-switch,
.form-radio, 
.form-checkbox {			display:flex; flex-wrap:wrap; margin-left:-8px;	margin-right:-8px;	}

.switch,
.radio,
.checkbox{					flex:0 1 auto;	margin:0; padding:6px 8px 6px 8px; position:relative;	}

.switch   > input[type="checkbox"],
.radio 	 	> input[type="radio"],
.checkbox > input[type="checkbox"]{		position:absolute !important;	opacity:0;  top:-1px;	left:-1px;  width:1px !important; height:1px !important;		}

.switch 	> label,
.radio 		> label,
.checkbox >	label{	cursor:pointer;	display:flex;	align-items:center;  justify-content:flex-start;	padding:0 8px 0 0;  margin:0;		} 

.switch 	>	label::after,
.switch 	>	label::before,
.radio 		>	label::before,
.checkbox >	label::before{		position:static;	content:'';		width:24px;  height:24px;	  stroke:var(--bs-gray);  
                                background-size:24px 24px;  background-repeat:no-repeat;  background-position:left center;  
}

.radio 		>	label::before,
.checkbox >	label::before{		background-color:var(--bs-shade8);	/* mask-image */	}

.radio 		> label::before{					mask-image:url("../imgs/icon/sprite.svg#radio-bg"); 
												-webkit-mask-image:url("../imgs/icon/sprite.svg#radio-bg"); 
} 
.radio 		> input:checked + label::before{	mask-image:url("../imgs/icon/sprite.svg#radio-check-bg");
												-webkit-mask-image:url("../imgs/icon/sprite.svg#radio-check-bg"); 	   
} 

.checkbox > label::before{						mask-image:url("../imgs/icon/sprite.svg#checkbox-bg");	
												-webkit-mask-image:url("../imgs/icon/sprite.svg#checkbox-bg");	
}
.checkbox > input:checked + label::before{		mask-image:url("../imgs/icon/sprite.svg#checkbox-check-bg");		
												-webkit-mask-image:url("../imgs/icon/sprite.svg#checkbox-check-bg");	
} 

.radio 	>	input + label,
.checkbox >	input + label{						cursor:pointer;			} 


.switch   >	input[disabled] + label,
.radio 	  > input[disabled] + label,
.checkbox >	input[disabled] + label,
.switch   >	input[readonly] + label,
.radio 	  > input[readonly] + label,
.checkbox >	input[readonly] + label{			color:var(--bs-shade5);	cursor:default;		} 

.switch   >	input[disabled] + label::after,
.switch   >	input[disabled] + label::before,
.radio 	  >	input[disabled] + label::before,
.checkbox >	input[disabled] + label::before{	opacity:0.45;		}
.switch   > input[readonly] + label::after,
.switch   >	input[readonly] + label::before,
.radio 	  > input[readonly] + label::before,
.checkbox >	input[readonly] + label::before{	opacity:0.80;		}


.form-switch{	padding-left:0;			}

.switch{		padding-top:8px;		}

.switch	> label{            position:relative;   white-space:nowrap;	height:20px;  }
.switch	> label::after{     flex:0 0 18px;  position:absolute; width:16px;  height:16px; border-radius:50%;  background-color:var(--bs-shade1); top:2px;  left:2px; transition:all .3s;  }
.switch	> label::before{    flex:0 0 36px;  height:20px; background-color:var(--bs-shade3);  border-radius:12px; box-shadow:0 0 6px inset var(--bs-shade6);  margin-right:8px;  transition:all .3s; }
.switch	> input:checked + label::after{  left:18px;    }
.switch	> input:checked + label::before{ background-color:var(--bs-secondary); box-shadow:0 0px 4px var(--bs-secondary); }
.switch:hover > label::after{   background-color:var(--bs-white);   }

.switch .switch-on{                         		display:none;   }
.switch > input:checked + label .switch-off{ display:none;   }
.switch > input:checked + label .switch-on{  display:inline-block;  }

.switch > input[disabled] + label::before,
.switch > input[readonly] + label::before{	background-color:var(--bs-shade1); 	box-shadow:none;	}

.switch > input[disabled] + label::before{	border:1px solid var(--bs-shade4); 	}
.switch > input[disabled] + label::after{	 background-color:var(--bs-shade6);	}

.switch > input[readonly] + label::before{	border:1px dashed var(--bs-shade5);	}
.switch > input[readonly] + label::after{	 background-color:var(--bs-shade6);	}


/* Form - Password */
.password-show{          cursor:pointer;  }
.password-show:not(.show)  .icon-show{   display:none;  }
.password-show.show        .icon-hide{   display:none;  }


/* Form - Hover commands */
.hover-field{			            display:block;  }
.hover-field .hover-effect{		display:flex;  flex-direction:row;  flex-wrap:nowrap;  }
.hover-field .form-control{   display:inline-block;  }
.hover-field .hover-append{		width:24px;  position:relative;  opacity:0;		transition:opacity .3s;  }

.hover-btn{							      position:absolute;  top:-6px;	left:-1px;  display:flex;  flex-direction:column;  }

.hover-btn .btn{							width:28px;  height:24px;  padding:0;	  margin:0;  	min-width:0;  min-height:0;	}
.hover-btn .btn.up{						border-radius:0 4px 0 0; 	}
.hover-btn .btn.down{					border-radius:0 0 4px 0;	}
.hover-btn .btn .s-icon{	    		margin-top:-2px;	  }

.form-hover:not(.disabled):not(.readonly):hover	input{					border-radius:4px 0 0 4px;	  }
.form-hover:not(.disabled):not(.readonly):hover .hover-append{	opacity:1;			              }

/* Form Button */
.form-group.group-btn-inline{		padding-top:20px;	}



/* Form Field - Padding 16, size 9 *n */
.form-group{	flex:0 0 auto;	max-width:100%;	}
.form-control{	max-width:100%;  }

/* Form Field - .form-group .form-control, padding 16, size 0, step di 2 */
.form-group.field-2 .form-control{  width:34px;   }
.form-group.field-4 .form-control{  width:52px;   }
.form-group.field-6 .form-control{  width:70px;   }
.form-group.field-8 .form-control{  width:87px;   }
.form-group.field-10 .form-control{  width:105px;   }
.form-group.field-12 .form-control{  width:123px;   }
.form-group.field-14 .form-control{  width:140px;   }
.form-group.field-16 .form-control{  width:157px;   }
.form-group.field-18 .form-control{  width:175px;   }
.form-group.field-20 .form-control{  width:192px;   }
.form-group.field-22 .form-control{  width:209px;   }
.form-group.field-24 .form-control{  width:226px;   }
.form-group.field-26 .form-control{  width:243px;   }
.form-group.field-28 .form-control{  width:260px;   }
.form-group.field-30 .form-control{  width:277px;   }
.form-group.field-32 .form-control{  width:294px;   }
.form-group.field-34 .form-control{  width:310px;   }
.form-group.field-36 .form-control{  width:327px;   }
.form-group.field-38 .form-control{  width:344px;   }
.form-group.field-40 .form-control{  width:360px;   }

/* Form Field - .form-group .form-control, padding 16, size 0, step di 10 */
.form-group.field-50 .form-control{  width:441px;   }
.form-group.field-60 .form-control{  width:520px;   }
.form-group.field-70 .form-control{  width:597px;   }
.form-group.field-80 .form-control{  width:672px;   }

/* Form Field - .form-group .form-select, padding 16, size 16, step di 2 */
.form-group.field-2 .form-select{  width:50px;   }
.form-group.field-4 .form-select{  width:68px;   }
.form-group.field-6 .form-select{  width:86px;   }
.form-group.field-8 .form-select{  width:103px;   }
.form-group.field-10 .form-select{  width:121px;   }
.form-group.field-12 .form-select{  width:139px;   }
.form-group.field-14 .form-select{  width:156px;   }
.form-group.field-16 .form-select{  width:173px;   }
.form-group.field-18 .form-select{  width:191px;   }
.form-group.field-20 .form-select{  width:208px;   }
.form-group.field-22 .form-select{  width:225px;   }
.form-group.field-24 .form-select{  width:242px;   }
.form-group.field-26 .form-select{  width:259px;   }
.form-group.field-28 .form-select{  width:276px;   }
.form-group.field-30 .form-select{  width:293px;   }
.form-group.field-32 .form-select{  width:310px;   }
.form-group.field-34 .form-select{  width:326px;   }
.form-group.field-36 .form-select{  width:343px;   }
.form-group.field-38 .form-select{  width:360px;   }
.form-group.field-40 .form-select{  width:376px;   }

/* Form Field - .form-group .form-select, padding 16, size 16, step di 10 */
.form-group.field-50 .form-select{  width:457px;   }
.form-group.field-60 .form-select{  width:536px;   }
.form-group.field-70 .form-select{  width:613px;   }
.form-group.field-80 .form-select{  width:688px;   }

/* Form Field - Special */
.form-group.field-wide{  flex:0 0 100%;  }
.form-group.field-wide .form-control,
.form-group.field-wide .form-select{  width:100%;  }
.form-group.field-grow{  flex:1 0 auto;   }



/* Fields Overlay */
.field-overlay{		position:fixed;	top:0;	right:0; bottom:0; left:0;	padding-right: 17px; 	overflow:hidden;	 }
.field-modal{		position:absolute;	max-width:600px;	transform:translate(0, 0);  box-shadow:0 0 5px var(--bs-shade5);		}


/* Form - Disabled */
.form-group.disabled label,
.form-group.disabled .input-group-icon .s-icon{		opacity:0.6;	}


/* Form  - Control Readonly */
.form-group.readonly .form-select,
.form-group.readonly .form-control,
.form-group.readonly .input-group-text{       border-style:dashed;   background-color:var(--bs-shade1);		background-clip:padding-box;    }
.form-group.readonly .input-group-text.input-group-icon:not(.readonly-enable) .s-icon{   opacity:0.35;	    		}
.form-group.readonly button.input-group-text:not(.readonly-enable){								pointer-events: none;	}


/* Form Group Fit */
.form-group.group-fit{					width:100%;		margin:0;	padding:0;	}
.form-group.group-fit .form-control{	border-radius:0px;	}



/* Fieldset */
fieldset{					display:block;	padding:8px 8px 0 8px;	border:1px solid var(--bs-shade1); border-radius:3px;  }

/* Fieldset - Title */
.fieldset-title{			display:flex;   flex-direction:column;   align-items:baseline;    }

.fieldset-title > .title-5,
.fieldset-title > .title-4,
.fieldset-title > .title-3{	flex:0 0 auto;  border:1px solid var(--bs-shade1);  border-bottom:none;   background-color:var(--bs-shade0);
							padding:4px 16px 4px 16px;	border-radius:0 3px 0 0;  z-index:1;
}
.fieldset-title > fieldset{   flex:1 1 auto;   align-self:stretch; 	 background-color:var(--bs-shade0);	 }
.fieldset-title > .title-5 + fieldset,
.fieldset-title > .title-4 + fieldset,
.fieldset-title > .title-3 + fieldset{	margin-top:-1px;	padding-top:16px;		}

/* */
.fieldset-title + .fieldset-title,
fieldset + fieldset,
.fieldset-title + fieldset,
fieldset + .fieldset-title{    margin-top:16px;  }