/* Services/Form */

/* forms */

label, input[type=checkbox], input[type=radio], select {
	cursor: pointer;
}

.form-control {
	font-size: @il-standard-form-font-size;
	color: @il-text-color;
	border: 1px solid @il-main-border-dark-color;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: @il-main-dark-bg;
}

.form-horizontal {
	margin-bottom: 20px;
	background: @il-standard-form-bg;
}

form.form-inline {
	margin-bottom: 20px;
}

.form-horizontal .form-group {
	margin: 10px 0;
}

.form-control, .form-control:focus {
	.box-shadow(none);
}

.form-control:focus-visible {
	.box-shadow(none);
	outline: @il-focus-outline-inner;
}

input[type="file"]:focus:focus-visible::after,
input[type="radio"]:focus:focus-visible::after,
input[type="checkbox"]:focus:focus-visible::after {
	content: none;
}

input.btn.btn-default:focus-visible {
	outline: @il-focus-outline-inner;
	outline-offset: @il-focus-outline-inner-width;
}

.btn-file:focus-within, .btn-file:hover:focus-within {
    z-index: 3;
    outline: @il-focus-outline-inner;
    outline-offset: @il-focus-outline-inner-width;
}

textarea.form-control {
	max-width: 100%;
}

select.form-control {
	width: auto;
	max-width:100%;
}

.form-horizontal label {
	color: @il-standard-form-label-color;
	font-size: 100%;
}

.form-control-static {
	//needed until bootstrap set min-heigth and padding...
	//no effect without it!
	display: block;
}

.form-horizontal {
	.control-label {
		//padding-top: 0;
		//line-height: 24px;
		padding-bottom: (@padding-base-vertical + 1);
		min-height: (@line-height-computed + @font-size-base);
		@media only screen and (max-width: @grid-float-breakpoint-max) {
			min-height: auto;
			padding-bottom: 0;
			margin-bottom: 0;
		}
		&.col-sm-3.il_textarea {
			text-align: left;
			width: 100%;
		}
	}
	
	.radio,
	.checkbox,
	.radio-inline,
	.checkbox-inline {
		padding-top: 0;
		line-height: normal;
	}
	div.radio label.radio-inline {
		line-height: @input-height-base;
	}
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
	position: static;
	display: inline-block;
	margin-left: -20px;
	margin-top: 7px;
	min-width: 13px;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		min-width: 16px;
	}
}
.radio input[type="radio"],
.radio-inline input[type="radio"] {
	vertical-align: top;
}

[dir="rtl"] .form-horizontal .control-label {
    text-align: left;
}

label {
	font-weight: normal;
}

td.form-inline > div.form-group {
	display: block;
	padding: 4px 0;
}

input[type="radio"]:focus:focus-visible,
input[type="checkbox"]:focus:focus-visible {
	outline: @il-focus-outline-inner;
	outline-offset: @il-focus-outline-outer-width;
}

input[type="file"].form-control {
	border: none;
	height: auto;
}

.ilFormHeader {
	padding: 15px 0 5px;
	.ilFormCmds {
		margin: 0;
		float: right;
	}
	h3 {
		margin: 0;
	}
}

[dir="rtl"] .ilFormHeader .ilFormCmds {
	float: left;
}

.ilFormHeader, .ilFormFooter {
	color: @il-standard-form-header-color;
	background-color: @il-standard-form-header-bg;
}

.ilSubForm {
	background-color: @il-standard-form-dependant-group-bg;
	padding: 3px 0;
	margin-bottom: 10px;
	.form-group {
		margin: 0;
		@media (max-width: @grid-float-breakpoint-max) {
			margin: @padding-large-vertical 0;
		}
	}
	.col-sm-9.il_textarea {
		width: 100%;
	}
}

.ilFormFooter {
	padding: 3px 0;
}

.ilFormFooter .ilFormCmds {
	text-align: right;
	padding: 0;
}

[dir="rtl"] .ilFormFooter .ilFormCmds {
	text-align: left;
}

/* jQuery ui autocomplete menu */
input.ilHFormHighlighted, .ui-state-focus {
	background-color: #ff9;
}

div.ilFormExternalSetting {
	margin-bottom: 10px;
}

div.ilFormExternalSetting ul {
	margin: 2px 0;
	padding-left: 25px;
}

[dir="rtl"] div.ilFormExternalSetting ul {
	padding-left: 0;
	padding-right: 25px;
}

div.ilFormExternalSetting span {
	color: @il-warning-color;
	/* font-style: italic; */
}

div[id^="ilFormField"] {
	margin-bottom: 10px;
}

/* Hierarchy Form */
div.ilHFormHeader, div.ilHFormFooter {
	color: @il-standard-form-header-color;
	background-color: @il-standard-form-header-bg;
	padding: 4px 0 4px 22px;
}

[dir="rtl"] div.ilHFormHeader, [dir="rtl"] div.ilHFormFooter {
	padding: 4px 22px 4px 0;
}

div.ilHFormContent {
	padding: 20px 10px 20px 0px;
	table {
		width:100%;
	}
}

div.ilHFormItem {
	margin-bottom: 5px;
	display: table-row;
}

div.ilHFormHeader .ilFormCmds, div.ilHFormFooter .ilFormCmds {
	float: right;
}

[dir="rtl"] div.ilHFormHeader .ilFormCmds, [dir="rtl"] div.ilHFormFooter .ilFormCmds {
	float: left;
}

.ilHFormExpIcon, .ilHFormCheckbox, .ilHFormIcon, .ilHFormInput, .ilHFormItemCmd {
}

.ilHFormExpIcon, .ilHFormCheckbox, .ilHFormIcon {
	min-width: 20px;
	padding: 0;
}

.ilHFormItemCmd {
	padding: 0 10px;
}

.ilHFormChilds {

}

.ilHFormExpIcon img, .ilHFormIcon img {
	width: 19px;
	height: 19px;
}

.ilHFormInput, .ilHFormInput input.form-control {
	width: 100%;
}

.ilHFormDropArea {
	margin: 6px 0;
	width: auto;
}

/* deprecated */
div.ilFormInfo {
}


/* experimental: bootstrap'ed file upload */
.btn-file {
	position: relative;
	overflow: hidden;
}
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;
	display: block;
}

.ilFormInnerCol {
	padding: 0;
}

.ilFormInnerCol .form-group {
	margin: 0;
}

input:invalid {
	background-color: #ffebeb;
	border-color: @il-danger-color;
}

.bootstrap-datetimepicker-widget {
	z-index: 2000;
}

/* provisory fix for #0021322  */
div[id$="color-picker-menu"] {
	z-index: 3;
}

/* This is a memento that we should get rid of the legacy UI */
.wzdrow input[type=file]:focus-visible {
	outline: @il-focus-outline-inner;
	outline-offset: 0;
}