.brtooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.brtooltip:hover{ z-index:3; }
.brtooltip > span{ display:inline-block; width:15px; height:15px; line-height:15px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; }
.brtooltip .content{ opacity:0; width:200px; background-color:#293B64; color:#F3F3F3;font-family: Tahoma, Geneva, sans-serif;font-size:0.9em; position:absolute; top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none; transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); }
.brtooltip p{ padding:0; }
.brtooltip.down .content{ left:auto; right:0; top:30px; }
.brtooltip:hover .content{ opacity:1; left:36px; }
.brtooltip .content b{ height:0; width:0; border-color:#293B64 #293B64 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
.brtooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #293B64 #293B64 transparent; }
.brtooltip .alert{ float:left; margin:-22px 0 0 25px; padding:3px 10px; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; width:170px; position:absolute; left:-15px; opacity:0; z-index:1; transition:0.15s ease-out; }
.brtooltip .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #CE5454 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; left:-13px; top:1px; }
.brtooltip.bad .alert{ left:0; opacity:1; }
.brtooltip .required{background-color:#FF0000}