/*
    Jumpeye framework    
	Version: 1.0.0
	www.jumpeye.com
	
	Created by Jumpeye Components
 
 
    Tooltip style-9
*/

.jtip.style-9 { font-size: 14px; padding: 4px 19px 6px; }  

.jtip.style-9:before{
    content : '';
    position: absolute;
    width   : 0; 
    height  : 0;  
}

/* general for all colors */
.jtip.style-9:before, .jtip.style-9.top-left:before { top: auto !important; bottom: -12px !important; left: 0 !important; }

.jtip.style-9.top-center:before    { margin-left: -6px; left: 50% !important; }
.jtip.style-9.top-right:before     { top: auto !important; bottom: -12px !important; left: auto !important; right: 0 !important; }
.jtip.style-9.bottom-left:before   { bottom: auto !important; top: -12px !important; }   
.jtip.style-9.bottom-center:before { margin-left: -6px; bottom: auto !important; top: -12px !important; left: 50% !important; }
.jtip.style-9.bottom-right:before  { bottom: auto !important; top: -12px !important; left: auto !important; right: 0 !important; }
.jtip.style-9.right-top:before     { bottom: auto !important; top: 0 !important; left: -24px !important; right: auto !important; } 
.jtip.style-9.right-center:before  { margin-top: -6px; top: 50% !important; left: -24px !important; right: auto !important; }
.jtip.style-9.right-bottom:before  { top: auto !important; bottom: 0 !important; left: -24px !important; right: auto !important; }
.jtip.style-9.left-top:before      { bottom: auto !important; top: 0 !important; right: -12px !important; left: auto !important; }
.jtip.style-9.left-center:before   { margin-top: -6px; top: 50% !important; right: -12px !important; left: auto !important; }
.jtip.style-9.left-bottom:before   { top: auto !important; bottom: 0 !important; right: -12px !important; left: auto !important; }

/* corners (border-radius: top-left, top-right, bottom-right, bottom-left) */
.jtip.style-9,
.jtip.style-9.top-left { -moz-border-radius: 6px 6px 6px 0; -webkit-border-radius: 6px 6px 6px 0; border-radius: 6px 6px 6px 0; }

.jtip.style-9.top-center,
.jtip.style-9.bottom-center,
.jtip.style-9.left-center,
.jtip.style-9.right-center { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }

.jtip.style-9.left-bottom,
.jtip.style-9.top-right { -moz-border-radius: 6px 6px 0 6px; -webkit-border-radius: 6px 6px 0 6px;  border-radius: 6px 6px 0 6px; }

.jtip.style-9.right-top,
.jtip.style-9.bottom-left { -moz-border-radius: 0 6px 6px 6px;  -webkit-border-radius: 0 6px 6px 6px;  border-radius: 0 6px 6px 6px; }

.jtip.style-9.left-top,
.jtip.style-9.bottom-right { -moz-border-radius: 6px 0 6px 6px; -webkit-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }


/* gray */
.jtip.style-9.gray { background: #999; color: #fff; }

.jtip.style-9.gray:before,
.jtip.style-9.gray.top-left:before {
    border-color:  #999 rgba(153,153,153,0) rgba(153,153,153,0) rgba(153,153,153,0);
    border-bottom: 12px solid rgba(153,153,153,0);
    border-left: 12px solid #999;
}

.jtip.style-9.gray.right-top:before,
.jtip.style-9.gray.right-center:before,
.jtip.style-9.gray.top-right:before {
    border-color:  #999 rgba(153,153,153,0) rgba(153,153,153,0) rgba(153,153,153,0);
    border-bottom: 12px solid rgba(153,153,153,0);
    border-right: 12px solid #999;
}

.jtip.style-9.gray.left-bottom:before,
.jtip.style-9.gray.bottom-left:before,
.jtip.style-9.gray.bottom-center:before {
    border-top: 12px solid rgba(153,153,153,0);
    border-bottom: rgba(153,153,153,0);
    border-left: 12px solid #999;
}

.jtip.style-9.gray.right-bottom:before,
.jtip.style-9.gray.bottom-right:before {
    border-color:  #999 rgba(153,153,153,0) rgba(153,153,153,0) rgba(153,153,153,0);
    border-top: 12px solid rgba(153,153,153,0);
    border-bottom: rgba(153,153,153,0);
    border-right: 12px solid #999;
}


/* yellow */
.jtip.style-9.yellow { background: #fff5cc; color: #393838; }

.jtip.style-9.yellow:before,
.jtip.style-9.yellow.top-left:before {
    border-color:  #fff5cc rgba(255,245,204,0) rgba(255,245,204,0) rgba(255,245,204,0);
    border-bottom: 12px solid rgba(255,245,204,0);
    border-left: 12px solid #fff5cc;
}

.jtip.style-9.yellow.top-right:before {
    border-color:  #fff5cc rgba(255,245,204,0) rgba(255,245,204,0) rgba(255,245,204,0);
    border-bottom: 12px solid rgba(255,245,204,0);
    border-right: 12px solid #fff5cc;
}

.jtip.style-9.yellow.left-bottom:before,
.jtip.style-9.yellow.bottom-left:before,
.jtip.style-9.yellow.bottom-center:before {
    border-top: 12px solid rgba(255,245,204,0);
    border-bottom: rgba(255,245,204,0);
    border-left: 12px solid #fff5cc;
}

.jtip.style-9.yellow.right-bottom:before,
.jtip.style-9.yellow.bottom-right:before {
    border-color:  #fff5cc rgba(255,245,204,0) rgba(255,245,204,0) rgba(255,245,204,0);
    border-top: 12px solid rgba(255,245,204,0);
    border-bottom: rgba(255,245,204,0);
    border-right: 12px solid #fff5cc;
}

.jtip.style-9.yellow.right-top:before,
.jtip.style-9.yellow.right-center:before {
    border-color:  #fff5cc rgba(255,245,204,0) rgba(255,245,204,0) rgba(255,245,204,0);
    border-bottom: 12px solid rgba(255,245,204,0);
    border-right: 12px solid #fff5cc;
}


/* blue */
.jtip.style-9.blue { background: #eff6fb; color: #393838; }

.jtip.style-9.blue:before,
.jtip.style-9.blue.top-left:before {
    border-color:  #eff6fb rgba(239,246,251,0) rgba(239,246,251,0) rgba(239,246,251,0);
    border-bottom: 12px solid rgba(239,246,251,0);
    border-left: 12px solid #eff6fb;
}

.jtip.style-9.blue.top-right:before {
    border-color:  #eff6fb rgba(239,246,251,0) rgba(239,246,251,0) rgba(239,246,251,0);
    border-bottom: 12px solid rgba(239,246,251,0);
    border-right: 12px solid #eff6fb;
}

.jtip.style-9.blue.left-bottom:before,
.jtip.style-9.blue.bottom-left:before,
.jtip.style-9.blue.bottom-center:before {
    border-top: 12px solid rgba(239,246,251,0);
    border-bottom: rgba(239,246,251,0);
    border-left: 12px solid #eff6fb;
}

.jtip.style-9.blue.right-bottom:before,
.jtip.style-9.blue.bottom-right:before {
    border-color:  #eff6fb rgba(239,246,251,0) rgba(239,246,251,0) rgba(239,246,251,0);
    border-top: 12px solid rgba(239,246,251,0);
    border-bottom: rgba(239,246,251,0);
    border-right: 12px solid #eff6fb;
}

.jtip.style-9.blue.right-top:before,
.jtip.style-9.blue.right-center:before {
    border-color:  #eff6fb rgba(239,246,251,0) rgba(239,246,251,0) rgba(239,246,251,0);
    border-bottom: 12px solid rgba(239,246,251,0);
    border-right: 12px solid #eff6fb;
}


/* purple */
.jtip.style-9.purple { background: #dbcbed; color: #393838; }

.jtip.style-9.purple:before,
.jtip.style-9.purple.top-left:before {
    border-color:  #dbcbed rgba(219,203,237,0) rgba(219,203,237,0) rgba(219,203,237,0);
    border-bottom: 12px solid rgba(219,203,237,0);
    border-left: 12px solid #dbcbed;
}

.jtip.style-9.purple.top-right:before {
    border-color:  #dbcbed rgba(219,203,237,0) rgba(219,203,237,0) rgba(219,203,237,0);
    border-bottom: 12px solid rgba(219,203,237,0);
    border-right: 12px solid #dbcbed;
}

.jtip.style-9.purple.left-bottom:before,
.jtip.style-9.purple.bottom-left:before,
.jtip.style-9.purple.bottom-center:before {
    border-top: 12px solid rgba(219,203,237,0);
    border-bottom: rgba(219,203,237,0);
    border-left: 12px solid #dbcbed;
}

.jtip.style-9.purple.right-bottom:before,
.jtip.style-9.purple.bottom-right:before {
    border-color:  #dbcbed rgba(219,203,237,0) rgba(219,203,237,0) rgba(219,203,237,0);
    border-top: 12px solid rgba(219,203,237,0);
    border-bottom: rgba(219,203,237,0);
    border-right: 12px solid #dbcbed;
}

.jtip.style-9.purple.right-top:before,
.jtip.style-9.purple.right-center:before {
    border-color:  #dbcbed rgba(219,203,237,0) rgba(219,203,237,0) rgba(219,203,237,0);
    border-bottom: 12px solid rgba(219,203,237,0);
    border-right: 12px solid #dbcbed;
}


/* green */
.jtip.style-9.green { background: #cfe6ae; color: #393838; }

.jtip.style-9.green:before,
.jtip.style-9.green.top-left:before {
    border-color:  #cfe6ae rgba(207,230,174,0) rgba(207,230,174,0) rgba(207,230,174,0);
    border-bottom: 12px solid rgba(207,230,174,0);
    border-left: 12px solid #cfe6ae;
}

.jtip.style-9.green.top-right:before {
    border-color:  #cfe6ae rgba(207,230,174,0) rgba(207,230,174,0) rgba(207,230,174,0);
    border-bottom: 12px solid rgba(207,230,174,0);
    border-right: 12px solid #cfe6ae;
}

.jtip.style-9.green.left-bottom:before,
.jtip.style-9.green.bottom-left:before,
.jtip.style-9.green.bottom-center:before {
    border-top: 12px solid rgba(207,230,174,0);
    border-bottom: rgba(207,230,174,0);
    border-left: 12px solid #cfe6ae;
}

.jtip.style-9.green.right-bottom:before,
.jtip.style-9.green.bottom-right:before {
    border-color:  #cfe6ae rgba(207,230,174,0) rgba(207,230,174,0) rgba(207,230,174,0);
    border-top: 12px solid rgba(207,230,174,0);
    border-bottom: rgba(207,230,174,0);
    border-right: 12px solid #cfe6ae;
}

.jtip.style-9.green.right-top:before,
.jtip.style-9.green.right-center:before {
    border-color:  #cfe6ae rgba(207,230,174,0) rgba(207,230,174,0) rgba(207,230,174,0);
    border-bottom: 12px solid rgba(207,230,174,0);
    border-right: 12px solid #cfe6ae;
}


/* red */
.jtip.style-9.red { background: #f0a1a1; color: #393838; }

.jtip.style-9.red:before,
.jtip.style-9.red.top-left:before {
    border-color:  #f0a1a1 rgba(240,161,161,0) rgba(240,161,161,0) rgba(240,161,161,0);
    border-bottom: 12px solid rgba(240,161,161,0);
    border-left: 12px solid #f0a1a1;
}

.jtip.style-9.red.top-right:before {
    border-color:  #f0a1a1 rgba(240,161,161,0) rgba(240,161,161,0) rgba(240,161,161,0);
    border-bottom: 12px solid rgba(240,161,161,0);
    border-right: 12px solid #f0a1a1;
}

.jtip.style-9.red.left-bottom:before,
.jtip.style-9.red.bottom-left:before,
.jtip.style-9.red.bottom-center:before {
    border-top: 12px solid rgba(240,161,161,0);
    border-bottom: rgba(240,161,161,0);
    border-left: 12px solid #f0a1a1;
}

.jtip.style-9.red.right-bottom:before,
.jtip.style-9.red.bottom-right:before {
    border-color:  #f0a1a1 rgba(240,161,161,0) rgba(240,161,161,0) rgba(240,161,161,0);
    border-top: 12px solid rgba(240,161,161,0);
    border-bottom: rgba(240,161,161,0);
    border-right: 12px solid #f0a1a1;
}

.jtip.style-9.red.right-top:before,
.jtip.style-9.red.right-center:before {
    border-color:  #f0a1a1 rgba(240,161,161,0) rgba(240,161,161,0) rgba(240,161,161,0);
    border-bottom: 12px solid rgba(240,161,161,0);
    border-right: 12px solid #f0a1a1;
}