/******************************************************************************
 * FORM FIELD ERRORS
 *****************************************************************************/
form input[data-error],
form select[data-error] {
	box-shadow: 0 0 3px #ce3643 !important;
    transition: box-shadow 200ms;
}
.field-error {
	overflow: visible;
	position: relative;
	/*display: inline-block;*/ /* Don't set this, it can mess up formatting */
}
.field-error .tooltip {
	display: block;
	position: absolute;
	color: #ce3643;
	background-color: #fcf2f5;
	border: 1px solid #ce3643;
	border-radius: 5px;
	padding: 0.25em 0.5em;
	z-index: 1;
	box-sizing: border-box;
	cursor: default;
	font-size: 9px;
    white-space: nowrap;
}
.field-error .tooltip:after { /* Arrow for the tooltip */
	content: " ";
	position: absolute;
	border-width: 5px;
	border-style: solid;
}

/* Tooltip on top */
.field-error.field-error-top .tooltip {
    bottom: calc(100% + 5px);
    left: -1em;
    top: auto;
    right: auto;
    box-shadow: 1px -1px 3px #6d1f25;
}
.field-error.field-error-top .tooltip:after {
    top: 100%;
    left: 20%;
    bottom: auto;
    right: auto;
    margin-left: -5px;
    border-color: #ce3643 transparent transparent transparent;
}

/* Tooltip on bottom */
.field-error .tooltip,
.field-error.field-error-bottom .tooltip {
    top: calc(100% + 5px);
    left: -1em;
    bottom: auto;
    right: auto;
    box-shadow: 1px 1px 3px #6d1f25;
}
.field-error .tooltip:after,
.field-error.field-error-bottom .tooltip:after {
    bottom: 100%;
    left: 20%;
    top: auto;
    right: auto;
    margin-left: -5px;
    border-color: transparent transparent #ce3643 transparent;
}

/* Tooltip on right */
.field-error.field-error-right .tooltip {
    top: 0;
    left: 100%;
    bottom: auto;
    right: auto;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #6d1f25;
}
.field-error.field-error-right .tooltip:after {
    top: 50%;
    right: 100%;
    bottom: auto;
    left: auto;
    margin-top: -5px;
    margin-left: 0;
    border-color: transparent #ce3643 transparent transparent;
}

/* Tooltip on left */
.field-error.field-error-left .tooltip {
    top: 0;
    right: 100%;
    bottom: auto;
    left: auto;
    box-shadow: -1px 1px 3px #6d1f25;
    white-space: nowrap;
}
.field-error.field-error-left .tooltip:after {
    top: 50%;
    left: 100%;
    bottom: auto;
    right: auto;
    margin-top: -5px;
    margin-left: 0;
    border-color: transparent transparent transparent #ce3643;
}