.input-field,
.select,
.info-field,
.text-area,
.form-text,
.upload-field {
	display: inline-block;
    font-size: 12px;
    line-height: 1.42857;
}


.input-field,
.select,
.color-field,
.form-text,
.upload-field {
	height: 32px;
}


.select[multiple], .select[size] {
    height: auto;
}


.form-text {
    padding: 6px 3px;
}


.input-field,
.text-area,
.select,
.info-field {
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}


.input-field,
.text-area,
.select {
    background-color: #fff;
    background-image: none;
    color: #555;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}


.text-area {
    padding: 6px 6px;
    vertical-align: top;
}


.color-field {
    padding: 4px;
    width: 42px;
}


.select {
    padding: 4px 2px;
}


/* need to overwrite height: auto; instruction of bootstrap */
.select.vfill {
    height: 100%;
}


.vflex > .select.vfill {
	height: auto;
	flex: 1;
}


.select:invalid,
.select.error {
    border-color: #EE5F5B;
    border-width: 2px;
    padding-left: 1px;
    padding-right: 1px;
}


.select:invalid[size], .select.error[size] {
    padding: 3px 1px;
}


.select option {
	padding: 3px 2px 3px 2px;
	min-height: 21px;
}


.select option:disabled {
	color: #bbb
}


.select option.invalidOption {
	text-decoration: line-through;
	color: #555555;
}


.input-field {
    padding: 1px 6px;
}


.input-field:focus,
.select:focus,
.text-area:focus {
    border-color: #66AFE9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}


.inline-view.error {
	border: 1px solid;
	border-radius: 4px;
}


.inline-view.error,
.input-field:invalid,
.input-field.error,
.text-area:invalid,
.text-area.error,
.info-field.error,
.info-field.required:empty {
    border-color: #EE5F5B;
    color: #B94A48;
    border-width: 2px;
}


.input-field:invalid,
.input-field.error {
    padding: 1px 5px;
}



.info-field.error,
.info-field.required:empty,
.text-area:invalid,
.text-area.error {
	padding: 5px 5px;
}


.inline-view.error:focus,
.input-field:invalid:focus,
.input-field.error:focus,
.select:invalid:focus,
.select.error:focus,
.text-area:invalid:focus,
.text-area.error:focus {
    border-color: #E9322D;
    box-shadow: 0 0 6px #F8B9B7;
}


.input-field:-moz-placeholder  {
    color: #999;
}


.input-field::-moz-placeholder {
    color: #999;
    opacity: 1;
}


.input-field[disabled],
.input-field[readonly],
.text-area[disabled],
.text-area[readonly],
.select[disabled],
fieldset[disabled] .input-field {
    background-color: #eee;
    opacity: 1;
}


.input-field[disabled],
.text-area[disabled],
fieldset[disabled] .input-field {
    cursor: not-allowed;
}


input[type="file"] {
    display: inline;
}


input[type="range"] {
    display: inline-block;
    width: auto;
}


.checkbox,
.radio {
    display: inline-block;
	font-weight: normal;
	margin-bottom: 0px;
	margin-top: 0px;
    padding-left: 20px;
    position: relative;
}


.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    box-sizing: border-box;
	cursor: pointer;
	line-height: normal;
    margin-left: -20px;
    position: absolute;
    opacity: 0;
    padding: 0;
    z-index: 1;
}


.radio-span::before,
.checkbox-span::before {
    background-color: #fff;
    border: 1px solid #999;
    content: "";
	cursor: pointer;
    display: inline-block;
    left: 0;
    margin-left: -20px;
    position: absolute;
 	top: 0px;
    width: 17px;
}


.checkbox-span::before {
    height: 16px;
	transition: border 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
}


.radio-span::before {
    height: 17px;
	border-radius: 50%;
	transition: border 0.15s ease-in-out 0s;
}


.checkbox input[type="checkbox"]:focus + .checkbox-span::before,
.radio input[type="radio"]:focus       + .radio-span::before {
    outline: thin dotted;
    outline-offset: -2px;
}


.checkbox-span::after {
    color: #555555;
    display: inline-block;
    font-size: 9px;
    height: 16px;
    left: 0;
    margin-left: -20px;
    padding-left: 4px;
    padding-top: 1px;
    position: absolute;
    top: 0;
    width: 16px;
}


.radio-span::after {
    background-color: #555;
    border-radius: 50%;
    content: " ";
    display: inline-block;
    height: 7px;
    left: 5px;
    margin-left: -20px;
    position: absolute;
    top: 5px;
    transform: scale(0, 0);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33) 0s;
    width: 7px;
}


.radio-span,
.checkbox-span {
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
    padding-left: 3px;
    position: relative;
    user-select: none;
}


.checkbox input[type="checkbox"]:checked + .checkbox-span::after {
    content: "\e013";
    font-family: "Glyphicons Halflings";
}


.radio input[type="radio"]:checked + .radio-span::after {
    transform: scale(1, 1);
}


.checkbox input[type="checkbox"]:disabled,
.checkbox input[type="checkbox"]:disabled + .checkbox-span,
.checkbox input[type="checkbox"]:disabled + .checkbox-span::before,
.radio    input[type="radio"]:disabled,
.radio    input[type="radio"]:disabled    + .radio-span,
.radio    input[type="radio"]:disabled    + .radio-span::before {
    cursor: not-allowed;
    color: #bbb;
}


.checkbox input[type="checkbox"]:disabled + .checkbox-span::before,
.radio input[type="radio"]:disabled + .radio-span::before {
    background-color: #eeeeee;
}



.radio + .radio, .checkbox + .checkbox {
    margin-left: 12px;
    margin-top: 0;
}


.number-field {
	text-align: right;
}


.upload-field:invalid {
    border-color: #EE5F5B;
    color: #B94A48;
    border-width: 2px;
}


.upload-field:invalid::-ms-value {
	background-color: #EE5F5B;
}


.upload-field::file-selector-button  {
	padding: 6px 12px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}

/* need separate rule */
.upload-field::-webkit-file-upload-button  {
	padding: 6px 12px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}

 
.ig-container {
	display: inline-flex;
}


/* qualify with .ig-container > ... to make rule more special than border-radius directly declared on the item */
.ig-container > .ig-item {
	border-radius: 0;
}


.ig-item {
	flex: 1 1 0px;
}


/* if the container should auto size instead of consider the size of the parent, use this. */
.ig-container.ig-auto > .ig-item {
	flex: 1 1 auto;
}


.ig-item + .ig-item:not(.ig-left) {
	border-left-width: 0;
}


.ig-addon {
	flex: 0 0 auto;
	padding: 6px 12px;
	text-align: center;
	border: 1px solid #ccc;
	white-space: nowrap;
}


input.ig-item {
	min-width:0;
}


label.control {
    cursor: pointer;
    font-weight: 400;
    margin-bottom: 0;
    min-height: 20px;
}


.info-field {
    background-color: #eee;
    min-height: 32px;
    padding: 5px 6px;
}


.info-field:empty:before {
	content: "\a0";  /*   */
}


a.info-field {
  cursor: pointer;
}


.text-area.invalid,
.ig-container.invalid  > .info-field,
.ig-container.error    > .info-field,
.ig-container.required > .info-field:empty {
    border-color: #EE5F5B;
    color: #B94A48;
    border-width: 2px;
}


.text-area.invalid {
    padding: 1px 5px;
}


.table-form {
    margin-bottom: 0;
}


.table-form > thead > tr > th,
.table-form > tbody > tr > th,
.table-form > tfoot > tr > th,
.table-form > thead > tr > td,
.table-form > tbody > tr > td,
.table-form > tfoot > tr > td,
.table-form > tr > th,
.table-form > tr > td  {
	padding-bottom: 3px;
	padding-right: 3px;
}

.table-middle > thead > tr > th,
.table-middle > tbody > tr > th,
.table-middle > tfoot > tr > th,
.table-middle > thead > tr > td,
.table-middle > tbody > tr > td,
.table-middle > tfoot > tr > td,
.table-middle > tr > th,
.table-middle > tr > td,
.table-middle > th,
.table-middle > td {
    vertical-align: middle;
}


.table-editor > tbody > tr > td {
	vertical-align: baseline;
}


.table-editor.required.error {
	border: 2px solid red;
	border-collapse: separate;
}


.form-status {
	padding-left: 20px;
	border-left: 1px solid #E7E7E7;
}

.form-status.form-dirty {
	border-left: 3px dotted  green;
	padding-left: 18px;
}

.form-status.form-error {
	border-left: 3px solid #D9534F;
	padding-left: 18px;
}