/* Tooltips helpers */
.field .tooltipVentas {
	float: left !important; 
	top: 2px !important; 
	left: 7px !important; 
	position: relative !important; 
	z-index: 2 !important; 
}

	.field .tooltipVentas:hover {
		z-index: 3 !important; 
	}

	.field .tooltipVentas > span {
		display: inline-block !important;
		width: 15px !important;
		height: 15px !important;
		line-height: 15px !important;
		font-size: 0.9em !important;
		font-weight: bold !important;
		text-align: center !important;
		color: #FFF !important;
		cursor: help !important;
		background-color: #00AEEF !important;
		position: relative !important;
		border-radius: 10px !important;
	}

	.field .tooltipVentas .content {
		opacity: 0 !important; 
		width: 130px !important; 
		background-color: #333 !important; 
		color: #FFF !important; 
		font-size: 0.9em !important; 
		position: absolute !important; 
		top: 0 !important; 
		left: 20px !important; 
		padding: 8px !important; 
		border-radius: 6px !important; 
		pointer-events: none !important; 
		transition: 0.2s cubic-bezier(0.1, 0.1, 0.25, 2) !important; 
		-webkit-transition: 0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2) !important; 
		-moz-transition: 0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2) !important; 
	}

	.field .tooltipVentas p {
		padding: 0 !important; 
	}

	.field .tooltipVentas.down .content {
		left: auto !important; 
		right: 0 !important; 
		top: 30px !important; 
	}

	.field .tooltipVentas:hover .content {
		opacity: 1 !important; 
		left: 36px !important; 
	}

	.field .tooltipVentas .content b {
		height: 0 !important; 
		width: 0 !important; 
		border-color: #333 #333 transparent transparent !important; 
		border-style: solid !important; 
		border-width: 9px 7px !important; 
		position: absolute !important; 
		left: -14px !important; 
		top: 8px !important; 
	}

	.field .tooltipVentas.down .content b {
		left: auto !important; 
		right: 6px !important; 
		top: -10px !important; 
		border-width: 5px !important; 
		border-color: transparent #333 #333 transparent !important; 
	}

/* alerts (when validation fails) */
.field .alert {
	float: left !important; 
	margin: -2px 0 0 20px !important; 
	padding: 3px 10px !important; 
	color: #FFF !important; 
	border-radius: 3px 4px 4px 3px !important; 
	background-color: #CE5454 !important; 
	max-width: 170px !important; 
	white-space: pre !important; 
	position: relative !important; 
	left: -15px !important; 
	opacity: 0 !important; 
	z-index: 1 !important; 
	transition: 0.15s ease-out !important; 
}

	.field .alert::after {
		content: '' !important; 
		display: block !important; 
		height: 0 !important; 
		width: 0 !important; 
		border-color: transparent #CE5454 transparent transparent !important; 
		border-style: solid !important; 
		border-width: 11px 7px !important; 
		position: absolute !important; 
		left: -13px !important; 
		top: 1px !important; 
	}

.field.bad .alert {
	left: 0 !important; 
	opacity: 1 !important; 
}


@keyframes shake {
	15% {
		transform: translateX(-5px) !important; 
	}

	30% {
		transform: translateX(5px) !important; 
	}

	45% {
		transform: translateX(-3px) !important; 
	}

	60% {
		transform: translateX(3px) !important; 
	}

	75% {
		transform: translateX(2px) !important; 
	}

	100% {
		transform: none !important; 
	}
}

@-webkit-keyframes shake {
	25% {
		-webkit-transform: translateX(-6px) !important; 
	}

	75% {
		-webkit-transform: translateX(6px) !important; 
	}
}

form fieldset {
	clear: both !important; 
	margin: 0 0 10px 0 !important; 
}

/*form .field {
	padding: 0px 0 !important; 
	position: relative !important; 
	height: 2em !important; 
}*/

	/*form .field.fields {
		height: auto !important; 
	}*/

.field label, .field .label {
	cursor: pointer !important; 
}

	.field label > span:first-child, .field .label {
		float: left !important; 
		width: 160px !important; 
		text-transform: capitalize !important; 
		line-height: 2em !important; 
	}

/*.field input, .field textarea {
	float: left !important; 
	padding: 3px 4px !important;*/ 
	/*width: 200px; */
	/*-webkit-transition: 0.2s !important; 
	-moz-transition: 0.2s !important; 
	transition: 0.2s !important;*/ 
}

	.field input[type=checkbox] {
		width: auto !important; 
	}

.label ~ label {
	vertical-align: middle !important; 
	margin: 0.3em 1.2em 0 0 !important; 
}

.field input.short {
	width: 90px !important; 
}

.field input:focus:not([type="checkbox"]), .field textarea:focus {
	box-shadow: 0 0 4px #00AEEF !important; 
	border: 1px solid #00AEEF !important; 
}

.field textarea {
}

.field select {
	float: left !important; 
	width: 220px !important; 
	padding: 2px 0 !important; 
	margin: 0 !important; 
	border: 1px solid #CCC !important; 
	text-transform: capitalize !important; 
}

	.field select option {
		padding: 1px !important; 
	}

.field > .extra {
	float: left !important; 
	font-size: 0.9em !important; 
	color: #999 !important; 
	line-height: 2em !important; 
	margin-left: 13px !important; 
}

.field.multi .input {
	float: left !important; 
}

.field.multi input {
	float: left !important; 
	margin-right: 5px !important; 
	width: 35px !important; 
	text-align: center !important; 
}

form .field.multi input:nth-last-child(-n+2) {
	margin: 0 !important; 
}

.field.fields input {
	border-top: 5px solid #E1E1E1 !important; 
	margin: 0 0 0 160px !important; 
}

.bad input,
.bad select,
.bad textarea {
	border: 1px solid #CE5454 !important; 
	box-shadow: 0 0 4px -2px #CE5454 !important; 
	position: relative !important; 
	left: 0 !important; 
	-moz-animation: .4s 1 shake ease !important; 
	-webkit-animation: 0.4s 1 shake ease !important; 
}


/* mode2 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------- */
.mode2 .field {
	float: left !important; 
	clear: left !important; 
	margin-bottom: 30px !important; 
	height: auto !important; 
	padding: 0 !important; 
	zoom: 1 !important; 
}

	.mode2 .field.bad {
		margin-bottom: 8px !important; 
	}

	.mode2 .field::before, .mode2 .field::after {
		content: '' !important; 
		display: table !important; 
	}

	.mode2 .field::after {
		clear: both !important; 
	}

	.mode2 .field label {
	}

		.mode2 .field label span {
			float: none !important; 
			display: block !important; 
			line-height: inherit !important; 
		}

	.mode2 .field input:not(type="checkbox"), .field textarea {
		width: 250px !important; 
		margin: 0 !important; 
	}

	.mode2 .field textarea {
		width: 350px !important; 
		margin: 0 !important; 
	}

	.mode2 .field select {
		width: 260px !important; 
		float: none !important; 
	}

	.mode2 .field.multi label {
		float: none !important; 
	}

	.mode2 .field.multi input {
		float: left !important; 
		margin-right: 5px !important; 
		width: 35px !important; 
		text-align: center !important; 
	}

	.mode2 .field .tooltip {
		left: auto !important; 
		position: absolute !important; 
		right: -22px !important; 
		top: 19px !important; 
	}

	.mode2 .field .alert::after {
		display: none !important; 
	}

	.mode2 .field .alert {
		float: none !important; 
		clear: left !important; 
		margin: 0 !important; 
		padding: 0 5px !important; 
		border-radius: 0 0 3px 3px !important; 
		max-width: 100% !important; 
		height: 22px !important; 
		line-height: 1.8em !important; 
	}

	.mode2 .field > .extra {
		position: absolute !important; 
		right: 0 !important; 
	}