/* @override 
	http://127.0.0.1/SitiPicov/AlunniCachemere/_engine/_global_modules/SiteAdmin/css/forms_layout.css
*/

.elf-form {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 0;
	font-size: 14px;
	font-family1: Arial, Helvetica, sans-serif; 
	overflow1: hidden; /* (oppure auto) FIX SAFARI/FIREFOX su altezza del DIV < contenuto */
	background-color1: #fff;
}

.elf-form hr {
	padding: 0;
	border: 0;
	margin: 0;
	border-top: 1px #ccc solid;
	height: 1px;
}

.elf-form h1,
.elf-form h2,
.elf-form h3:not(.popover-title), /* interferisce col popup di BSConfirmation nel calendario villa*/
.elf-form h4,
.elf-form h5,
.elf-form h6
{
	padding: 0;
	border: 0;
	margin-bottom: 0;
	color: #4377b5;	
	border-bottom1: 1px #ccc solid;
}



/* Box info ed errori */
.elf-form-error-OFF {
	border: 1px red dashed;
	padding: 4px;
	margin: 0px;
	margin-top: 4px;
	margin-bottom: 8px;
	background-color: lightyellow;
}
.elf-form-error-OFF h4 {
	border: 0;
	margin: 0;
	padding: 0;
	padding-bottom: 4px;
	font-size: 12px;
	color: #f10915;
}
.elf-form-error-OFF p {
	border: 0;
	margin: 0;
	padding: 0;
	line-height: normal;
}

.elf-form-message-OFF {
	border: 1px #ccc dashed;
	padding: 8px;
	margin: 1px;
	margin-top: 0px;
	margin-bottom: 18px;
	background-color: lightyellow;
}
.elf-form-message-OFF h4 {
	border: 0;
	margin: 0;
	padding: 0;
	padding-bottom: 4px;
	font-size: 14px;
	color: #1f6d00;
}
.elf-form-message-OFF p {
	border: 0;
	margin: 0;
	padding: 0;
	color: #666;
	line-height: normal;
}


/* @group Layout */
.elf-form-page {
	padding: 0px;
	background-color1: lavender;
}
fieldset.elf-form-fieldset {
	border-top1: 1px #ccc solid;
}
fieldset.elf-form-fieldset p {
	padding-left: 0px;
	padding-right: 0px;
}
legend.elf-form-legend {
	border1: 1px #ccc solid;
	padding: 8px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-bottom: 8px;
	color: #4377b5;
	font-size: 20px;
}
.elf-form-section {
	margin-bottom: 8px;
	background-color1: lightgoldenrodyellow;
}
.elf-form-rows-group {
}
.elf-form-row {
	display: table;
	table-layout: fixed; /* le celle vengono ripartite uniformemente e non in base al loro contenuto -> great!*/
	width: 100%;
	background-color1: lightcoral;
}
.elf-form-row-hidden {
	display: none;
}


.elf-form-column {
	display: table-cell;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0;
	padding-bottom:0;
	vertical-align: top; /* cosi posso visualizzare il processing message dopo il campo ed i campi sulla stessa riga rimangono allineati (oppure metto qui bottom e visualizzo il messaggio prima) */
	box-sizing: border-box; /* Fix per disallineamenti su più righe con campi di larghezze % diverse su Chrome FireFox Opera, Safari sarebbe OK */
	background-color1: lightseagreen;
}


/* Wrapper per ciascun elemento del form */
.elf-form-item {
	margin-bottom: 8px; /* Spaziatura verticale (anche fra i campi di una stessa colonna) */
	color: #333;
/*	
	background-color: #fefefe;
	border-radius: 10px;
	padding: 8px;
	padding-top: 0;	
	border: 1px #ccc solid;
*/
}
/* @end */

.elf-form-item-error {
	display: block;
	padding-left: 4px;
	border-left: 2px red solid;
	padding-bottom: 0;
	color: red;
}
.elf-form-item-warning {
	color: #A80;
	color: #df6e00;
}
.elf-form-item-success {
	color: #0B0;
}
.elf-form-item .elf-processing-message {
	display: block;
	color:  green;
	font-size: 90%;
}
.elf-form-item-error .elf-processing-message {
	color:  red;
}
.elf-form-item-error button.error {
	color:  red;
}


/* Errori label campi form (ELF_JS) */
.elf-form-item.elf-form-item-error  label {
	color: #C00;
}
.elf-form-item.elf-form-item-warning  label {
	color: #A80;
	color: #df6e00;
}
.elf-form-item.elf-form-item-success  label {
	color: #0B0;
}



/* Campo virtuale */
.elf-field-htmlcode {
	display1: block;
	width1: 100%;
	background-color1: lawngreen;
}

/* @group Labels (main and checkbox/radio) */
.elf-form-item  label { /* con la discendenza diretta .elf-form-item > label escluderei le label dei checkbox e radio ma anche quelle degli elementi con div innestati -> ridefinisco gli stili delle label rispetto a questo */
	font-weight: bold;
	color:  #333; /* #4377b5 */
	display1: inline; /*messo per gestire il simbolo mark campo abbligatorio */
	display1: block;
	padding: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin1: 0;
	font-size: 80%;
	font-family1: Arial;
	color1: red;
}

.elf-checkbox-option-wrapper {
	margin: 2px;
	display: block;
	background-color1: lavender;
}
.elf-checkbox-option-wrapper-inline {
	margin: 2px;
	display: inline-block;
	background-color1: lawngreen;
}
label.elf-checkbox-option-label {
	padding: 0; /* Resetto lo stile delle label principali */
	margin:0; /* Resetto lo stile delle label principali */	
	font-weight: normal; /* Resetto lo stile delle label principali */
	font-size: 90%;
	color: #333; /* Resetto lo stile delle label principali */	
	display: inline-block; /* Resetto lo stile delle label principali */	
	
	margin: 2px;
	background-color1: lawngreen;
}
.elf-checkbox-option-wrapper.disabled label.elf-checkbox-option-label {
	color: #999;
}
.elf-radio-option-wrapper {
	margin: 2px;
	display: block;
	background-color1: lemonchiffon;
}
.elf-radio-option-wrapper-inline {
	margin: 2px;
	display: inline-block;
	background-color1: lavenderblush;
}
label.elf-radio-option-label {
	padding: 0; /* Resetto lo stile delle label principali */
	margin:0; /* Resetto lo stile delle label principali */	
	font-weight: normal; /* Resetto lo stile delle label principali */	
	font-size: 90%;
	color: #333; /* Resetto lo stile delle label principali */	
	display: inline-block; /* Resetto lo stile delle label principali */	

	margin: 2px;
	background-color1: lightblue;
}
.elf-radio-option-wrapper.disabled label.elf-radio-option-label {
	color: #999;
}
/* @end */


/* @group Text mode render */
.elf-form-item.elf-form-item-text-mode {
	color:  #6D747B;
	border-bottom: 1px #ddd solid;
}
.elf-form-item.elf-form-item-text-mode label {
	background-color1: white;
	padding-right: 4px;
}
.elf-form-item.elf-form-item div.elf-form-item-value-text-mode {
	color: #009EE0;
	padding-left: 1px;
	padding-bottom: 2px;
	font-family: "Courier New", Courier, mono;
	background-color: white;
}
/* @end */


.elf-form-layout-item-text-bold {
	font-weight: bold;
}

.elf-form-layout-item-text-italic {
	font-style: italic;
}


/* @group Layout items alignment */
.elf-form-layout-item-align-left {
	margin: 0 auto 0 0;
}
.elf-form-layout-item-align-center {
	margin: 0 auto;
}
.elf-form-layout-item-align-right {
	margin: 0 0 0 auto;
}
/* @end */

/* @group Layout items text alignment */
.elf-form-layout-item-text-align-left {
	text-align: left;
}
.elf-form-layout-item-text-align-center {
	text-align: center;
}
.elf-form-layout-item-text-align-right {
	text-align: right;
}
.elf-form-layout-item-text-align-justify {
	text-align: justify;
}
/* @end */


/* Custom columns width */
/* @group Using predefined layout widths */
.elf-form-layout-item-width-100 {
	width: 100%;
}
.elf-form-layout-item-width-95 {
	width: 95%;
}
.elf-form-layout-item-width-90 {
	width: 90%;
}
.elf-form-layout-item-width-85 {
	width: 85%;
}
.elf-form-layout-item-width-80 {
	width: 80%;
}
.elf-form-layout-item-width-75 {
	width: 75%;
}
.elf-form-layout-item-width-70 {
	width: 70%;
}
.elf-form-layout-item-width-66 {
	width: 66.66%;
}
.elf-form-layout-item-width-65 {
	width: 65%;
}
.elf-form-layout-item-width-60 {
	width: 50%;
}
.elf-form-layout-item-width-55 {
	width: 55%;
}
.elf-form-layout-item-width-50 {
	width: 50%;
}
.elf-form-layout-item-width-45 {
	width: 45%;
}
.elf-form-layout-item-width-40 {
	width: 40%;
}
.elf-form-layout-item-width-35 {
	width: 35%;
}
.elf-form-layout-item-width-33 {
	width: 33.33%;
}
.elf-form-layout-item-width-30 {
	width: 30%;
}
.elf-form-layout-item-width-25 {
	width: 25%;
}
.elf-form-layout-item-width-20 {
	width: 20%;
}
.elf-form-layout-item-width-15 {
	width: 15%;
}
.elf-form-layout-item-width-10 {
	width: 10%;
}
.elf-form-layout-item-width-5 {
	width: 5%;
}

.elf-form-layout-item-width-whole {
	width: 100%;
}
.elf-form-layout-item-width-1half {
	width: 50%;
}
.elf-form-layout-item-width-1third {
	width: 33.33%;
}
.elf-form-layout-item-width-2third {
	width: 66.67%;
}
.elf-form-layout-item-width-1quarter {
	width: 25%;
}
.elf-form-layout-item-width-3quarter {
	width: 75%;
}
.elf-form-layout-item-width-1fifth {
	width: 20%;
}
.elf-form-layout-item-width-2fifth {
	width: 40%;
}
.elf-form-layout-item-width-3fifth {
	width: 60%;
}
.elf-form-layout-item-width-4fifth {
	width: 80%;
}
.elf-form-layout-item-width-1sixth {
	width: 16.66%;
}
.elf-form-layout-item-width-5sixth {
	width: 83.34%;
}
.elf-form-layout-item-width-1eighth {
	width: 12.5%;
}
.elf-form-layout-item-width-3eighth {
	width: 37.5%;
}
.elf-form-layout-item-width-5eighth {
	width: 62.5%;
}
.elf-form-layout-item-width-7eighth {
	width: 87.5%;
}
.elf-form-layout-item-width-1tenth {
	width: 10%;
}
.elf-form-layout-item-width-3tenth {
	width: 30%;
}
.elf-form-layout-item-width-7tenth {
	width: 70%;
}
.elf-form-layout-item-width-9tenth {
	width: 90%;
}
.elf-form-layout-item-width-1twentieth {
	width: 5%;
}
.elf-form-layout-item-width-3twentieth {
	width: 15%;
}
.elf-form-layout-item-width-7twentieth {
	width: 35%;
}
.elf-form-layout-item-width-9twentieth {
	width: 45%;
}
.elf-form-layout-item-width-11twentieth {
	width: 55%;
}
.elf-form-layout-item-width-13twentieth {
	width: 65%;
}
.elf-form-layout-item-width-17twentieth {
	width: 85%;
}
.elf-form-layout-item-width-19twentieth {
	width: 95%;
}




/* @end */

/* @group Using layout data  */
.OFF .elf-form-page-1 .elf-form-section-1 .elf-form-row-2 .elf-form-column-1 {
	background-color: lightseagreen;
	width: 50%;
}
.OFF .elf-form-page-1 .elf-form-section-1 .elf-form-row-2  {
	background-color: lightseagreen;
	width: 80%;
}
.OFF .elf-form-section-1 .elf-form-row-2 .elf-form-column-2 {
	background-color: lavenderblush;
	width: 30%;
}
.OFF .elf-form-section-1 .elf-form-row-2 .elf-form-column-2 .elf-form-item {
	background-color: lavenderblush;
	width: 80%;
}
/* @end */

/* @group Using custom classes set in newPage|Section|Row|Column calls */
.OFF .spaziatore {
	background-color: red;
	width: 10%;	
}
.OFF .row-test-class {
	background-color: lavender;
	width: 80%;
}
.OFF .col1-test-class {
	background-color: lawngreen;
}
.OFF .col2-test-class {
	background-color: lightblue;
}
.OFF .col3-test-class {
	background-color: lemonchiffon;
}
/* @end */



.mask {
	background-color: #000;
	opacity: 0.8;
}
.spinner {
	position: absolute;
	opacity: 0.85;
	z-index: 999;
	background-color: #fff;
}
.spinner-msg {
	opacity: 1;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
}
.spinner-img {
	background: url(../images/ajax-spinner_24x24.gif) no-repeat;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}


input.elf-field-file {
	margin: 2px;
}
.elf-file-preview {
	margin: 0px;
	margin-bottom: 16px;
	position: relative;
	display: inline-block; /* la dimensione diventa quella minima=larghezza immagine maschera interna -> posso esprimere il posizionamento in % -> è tutto parametrizzato e si adatta alla mdimensione della maschera -> OK */
	width1: 128px; /* necessario per IE 6*/
	height1: 128px; /* necessario per IE 6*/
}
.elf-file-preview img.elf-image-mask {
	/* width: 100px; se non la imposto viene usata la dimensione del file -> OK */
}
.elf-file-preview img.elf-image-value {
	position: absolute;
	width: 50%;
	height: 50%;
	top: 25%;
	left: 25%;
}

.elf-image-data {
	float: right;
	width: calc(100% - 128px);
}

.elf-image-name {
	font-weight: bold;
	display: block;
	padding-top: 4px;
	padding-bottom: 4px;
}
.elf-image-size {
	display: block;
	font-size: 90%;
}
.elf-image-date {
	display: block;
	font-size: 90%;
}
.elf-image-status {
	display: block;
	font-size: 90%;
}

/* Fix per elementi bootstrap */
/* il tab content attivo viene impostato lo stile active che ha display block -> ripristino il table */
.tab-content > .elf-form-row.active {
	display: table;
}


/* iPhone 4S,5,5S,SE portrait and below */
@media (max-width: 768px) {
.elf-form-column {
	display: block;
}
.elf-form-layout-item-width-95,
.elf-form-layout-item-width-90,
.elf-form-layout-item-width-80,
.elf-form-layout-item-width-75,
.elf-form-layout-item-width-66,
.elf-form-layout-item-width-60,
.elf-form-layout-item-width-50,
.elf-form-layout-item-width-40,
.elf-form-layout-item-width-33,
.elf-form-layout-item-width-30,
.elf-form-layout-item-width-25,
.elf-form-layout-item-width-20,
.elf-form-layout-item-width-15,
.elf-form-layout-item-width-10,
.elf-form-layout-item-width-5 {
	width: 100%;
}

/* Fix per larghezza oltre il limite nei campi del front-end che causa uno scroll orizzontale dell pagina dovuto all'impostazione della width 100% + display block precedente */
.elf-form-column {
	padding-left: 0;
	padding-right: 0;
}


}

/* Stile uunificato per campi read-only che boostrap renderizza troppo grigi */
.elf-form-layout-bgcolor-readonly,
.form-control[readonly] {
  background-color:Ivory;
  background-color:#FAFAFA;
}