/* BEGIN jQuery ARROW BOX */
.arrow_box {
position: relative;
}
.arrow_box.ui-state-error {
background: #FEF1EC;
}
.arrow_box.ui-state-highlight {
background: #FBF9EE;
}
.arrow_box:after, .arrow_box:before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-width: 10px;
}
.arrow_box:before {
border-width: 11px;
}
 
/* left */
.arrow_box.left:after, .arrow_box.left:before {
right: 100%;
}
.arrow_box.left.ui-state-error:after {
border-right-color: #FEF1EC;
top: 50%;
margin-top: -10px;
}
.arrow_box.left.ui-state-error:before {
border-right-color: #cd0a0a;
top: 50%;
margin-top: -11px;
}
.arrow_box.left.ui-state-highlight:after {
border-right-color: #0000FF;
top: 50%;
margin-top: -10px;
}
.arrow_box.left.ui-state-highlight:before {
border-right-color: #FCEFA1;
top: 50%;
margin-top: -11px;
}
 
/* Right */
.arrow_box.right:after, .arrow_box.right:before {
left: 100%;
}
.arrow_box.right.ui-state-error:after {
border-left-color: #FEF1EC;
top: 50%;
margin-top: -10px;
}
.arrow_box.right.ui-state-error:before {
border-left-color: #cd0a0a;
top: 50%;
margin-top: -11px;
}
.arrow_box.right.ui-state-highlight:after {
border-left-color: #FBF9EE;
top: 50%;
margin-top: -10px;
}
.arrow_box.right.ui-state-highlight:before {
border-left-color: #FCEFA1;
top: 50%;
margin-top: -11px;
}
 
/* Top */
.arrow_box.top:after, .arrow_box.top:before {
bottom: 100%;
}
.arrow_box.top.ui-state-error:after {
border-bottom-color: #FEF1EC;
left: 50%;
margin-left: -10px;
}
.arrow_box.top.ui-state-error:before {
border-bottom-color: #cd0a0a;
left: 50%;
margin-left: -11px;
}
.arrow_box.top.ui-state-highlight:after {
border-bottom-color: #0000FF;
left: 50%;
margin-left: -10px;
}
.arrow_box.top.ui-state-highlight:before {
border-bottom-color: #FCEFA1;
left: 50%;
margin-left: -11px;
}
 
/* Bottom */
.arrow_box.bottom:after, .arrow_box.bottom:before {
top: 100%;
}
.arrow_box.bottom.ui-state-error:after {
border-top-color: #FEF1EC;
left: 50%;
margin-left: -10px;
}
.arrow_box.bottom.ui-state-error:before {
border-top-color: #cd0a0a;
left: 50%;
margin-left: -11px;
}
.arrow_box.bottom.ui-state-highlight:after {
border-top-color: #0000FF;
left: 50%;
margin-left: -10px;
}
.arrow_box.bottom.ui-state-highlight:before {
border-top-color: #FCEFA1;
left: 50%;
margin-left: -11px;
}
/* END jQuery ARROW BOX */