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

.jtip.style-12 {
    font-size            : 11px;
    padding              : 4px 11px 7px;
    -moz-border-radius   : 4px; 
    -webkit-border-radius: 4px; 
    border-radius        : 4px;     
}

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

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

.jtip.style-12.top-center:before { margin-left: -6px; left: 50% !important; }

.jtip.style-12.top-right:before { top: auto !important; bottom: -13px !important; left: auto !important; right: 9px !important; }

.jtip.style-12.bottom-left:before { bottom: auto !important; top: -13px !important; }   

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

.jtip.style-12.bottom-right:before { bottom: auto !important; top: -13px !important; left: auto !important; right: 9px !important; }

.jtip.style-12.right-top:before { bottom: auto !important; top: 9px !important; left: -13px !important; right: auto !important; } 

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

.jtip.style-12.right-bottom:before { top: auto !important; bottom: 9px !important; left: -13px !important; right: auto !important; }

.jtip.style-12.left-top:before { bottom: auto !important; top: 9px !important; right: -25px !important; left: auto !important; }

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

.jtip.style-12.left-bottom:before { top: auto !important; bottom: 9px !important; right: -25px !important; left: auto !important; }

/* gray */

.jtip.style-12.gray { border: 1px solid #c4c3cb; color : #737373; }
.jtip.style-12.gray { background:  url(../../assets/ui/tooltips/style-012/gray.png); }

.jtip.style-12.gray:before,
.jtip.style-12.gray.top-left:before,
.jtip.style-12.gray.top-center:before,
.jtip.style-12.gray.top-right:before,
.jtip.style-12.gray.right-top:before,
.jtip.style-12.gray.right-center:before,
.jtip.style-12.gray.right-bottom:before {
    border-color:  #c4c3cb rgba(196,195,203,0) rgba(196,195,203,0) rgba(196,195,203,0);
    border-bottom: 12px solid rgba(196,195,203,0);
    border-right: 12px solid #c4c3cb;
}

.jtip.style-12.gray.bottom-left:before,
.jtip.style-12.gray.bottom-center:before,
.jtip.style-12.gray.bottom-right:before {
    border-color:  #c4c3cb rgba(196,195,203,0) rgba(196,195,203,0) rgba(196,195,203,0);
    border-top: 12px solid rgba(196,195,203,0);
    border-bottom: rgba(196,195,203,0);
    border-right: 12px solid #c4c3cb;
}

.jtip.style-12.gray.left-top:before,
.jtip.style-12.gray.left-center:before,
.jtip.style-12.gray.left-bottom:before {
    border-color:  #c4c3cb rgba(196,195,203,0) rgba(196,195,203,0) rgba(196,195,203,0);
    border-bottom: 12px solid rgba(196,195,203,0);
    border-left: 12px solid #c4c3cb;    
}


/* yellow */
.jtip.style-12.yellow { border: 1px solid #e6c578; color : #744a16; }
.jtip.style-12.yellow { background:  url(../../assets/ui/tooltips/style-012/yellow.png); }

.jtip.style-12.yellow:before,
.jtip.style-12.yellow.top-left:before,
.jtip.style-12.yellow.top-center:before,
.jtip.style-12.yellow.top-right:before,
.jtip.style-12.yellow.right-top:before,
.jtip.style-12.yellow.right-center:before,
.jtip.style-12.yellow.right-bottom:before {
    border-color:  #e6c578 rgba(230,197,120,0) rgba(230,197,120,0) rgba(230,197,120,0);
    border-bottom: 12px solid rgba(230,197,120,0);
    border-right: 12px solid #e6c578;
}

.jtip.style-12.yellow.bottom-left:before,
.jtip.style-12.yellow.bottom-center:before,
.jtip.style-12.yellow.bottom-right:before {
    border-color:  #e6c578 rgba(230,197,120,0) rgba(230,197,120,0) rgba(230,197,120,0);
    border-top: 12px solid rgba(230,197,120,0);
    border-bottom: rgba(230,197,120,0);
    border-right: 12px solid #e6c578;
}

.jtip.style-12.yellow.left-top:before,
.jtip.style-12.yellow.left-center:before,
.jtip.style-12.yellow.left-bottom:before {
    border-color:  #e6c578 rgba(230,197,120,0) rgba(230,197,120,0) rgba(230,197,120,0);
    border-bottom: 12px solid rgba(230,197,120,0);
    border-left: 12px solid #e6c578;    
}


/* blue */
.jtip.style-12.blue { border: 1px solid #5096dc; color : #fff; }
.jtip.style-12.blue { background:  url(../../assets/ui/tooltips/style-012/blue.png); }

.jtip.style-12.blue:before,
.jtip.style-12.blue.top-left:before,
.jtip.style-12.blue.top-center:before,
.jtip.style-12.blue.top-right:before,
.jtip.style-12.blue.right-top:before,
.jtip.style-12.blue.right-center:before,
.jtip.style-12.blue.right-bottom:before {
    border-color:  #5096dc rgba(80,150,220,0) rgba(80,150,220,0) rgba(80,150,220,0);
    border-bottom: 12px solid rgba(80,150,220,0);
    border-right: 12px solid #5096dc;
}

.jtip.style-12.blue.bottom-left:before,
.jtip.style-12.blue.bottom-center:before,
.jtip.style-12.blue.bottom-right:before {
    border-color:  #5096dc rgba(80,150,220,0) rgba(80,150,220,0) rgba(80,150,220,0);
    border-top: 12px solid rgba(80,150,220,0);
    border-bottom: rgba(80,150,220,0);
    border-right: 12px solid #5096dc;
}

.jtip.style-12.blue.left-top:before,
.jtip.style-12.blue.left-center:before,
.jtip.style-12.blue.left-bottom:before {
    border-color:  #5096dc rgba(80,150,220,0) rgba(80,150,220,0) rgba(80,150,220,0);
    border-bottom: 12px solid rgba(80,150,220,0);
    border-left: 12px solid #5096dc;    
}

/* purple */
.jtip.style-12.purple { border: 1px solid #a475d2; color: #fff; }
.jtip.style-12.purple { background:  url(../../assets/ui/tooltips/style-012/purple.png); }

.jtip.style-12.purple:before,
.jtip.style-12.purple.top-left:before,
.jtip.style-12.purple.top-center:before,
.jtip.style-12.purple.top-right:before,
.jtip.style-12.purple.right-top:before,
.jtip.style-12.purple.right-center:before,
.jtip.style-12.purple.right-bottom:before {
    border-color:  #a475d2 rgba(164,117,210,0) rgba(164,117,210,0) rgba(164,117,210,0);
    border-bottom: 12px solid rgba(164,117,210,0);
    border-right: 12px solid #a475d2;
}

.jtip.style-12.purple.bottom-left:before,
.jtip.style-12.purple.bottom-center:before,
.jtip.style-12.purple.bottom-right:before {
    border-color:  #a475d2 rgba(164,117,210,0) rgba(164,117,210,0) rgba(164,117,210,0);
    border-top: 12px solid rgba(164,117,210,0);
    border-bottom: rgba(164,117,210,0);
    border-right: 12px solid #a475d2;
}

.jtip.style-12.purple.left-top:before,
.jtip.style-12.purple.left-center:before,
.jtip.style-12.purple.left-bottom:before {
    border-color:  #a475d2 rgba(164,117,210,0) rgba(164,117,210,0) rgba(164,117,210,0);
    border-bottom: 12px solid rgba(164,117,210,0);
    border-left: 12px solid #a475d2;    
}

/* green */
.jtip.style-12.green { border: 1px solid #7ab61f; color : #fff; }
.jtip.style-12.green { background:  url(../../assets/ui/tooltips/style-012/green.png); }

.jtip.style-12.green:before,
.jtip.style-12.green.top-left:before,
.jtip.style-12.green.top-center:before,
.jtip.style-12.green.top-right:before,
.jtip.style-12.green.right-top:before,
.jtip.style-12.green.right-center:before,
.jtip.style-12.green.right-bottom:before {
    border-color:  #7ab61f rgba(122,182,31,0) rgba(122,182,31,0) rgba(122,182,31,0);
    border-bottom: 12px solid rgba(122,182,31,0);
    border-right: 12px solid #7ab61f;
}

.jtip.style-12.green.bottom-left:before,
.jtip.style-12.green.bottom-center:before,
.jtip.style-12.green.bottom-right:before,
.jtip.style-12.green.bottom-left:before {
    border-color:  #7ab61f rgba(122,182,31,0) rgba(122,182,31,0) rgba(122,182,31,0);
    border-top: 12px solid rgba(122,182,31,0);
    border-bottom: rgba(122,182,31,0);
    border-right: 12px solid #7ab61f;
}

.jtip.style-12.green.left-top:before,
.jtip.style-12.green.left-center:before,
.jtip.style-12.green.left-bottom:before {
    border-color:  #7ab61f rgba(122,182,31,0) rgba(122,182,31,0) rgba(122,182,31,0);
    border-bottom: 12px solid rgba(122,182,31,0);
    border-left: 12px solid #7ab61f;    
}

/* red */
.jtip.style-12.red { border: 1px solid #cb2308; color : #fff; }
.jtip.style-12.red { background:  url(../../assets/ui/tooltips/style-012/red.png); }

.jtip.style-12.red:before,
.jtip.style-12.red.top-left:before,
.jtip.style-12.red.top-center:before,
.jtip.style-12.red.top-right:before,
.jtip.style-12.red.right-top:before,
.jtip.style-12.red.right-center:before,
.jtip.style-12.red.right-bottom:before {
    border-color:  #cb2308 rgba(203,35,8,0) rgba(203,35,8,0) rgba(203,35,8,0);
    border-bottom: 12px solid rgba(203,35,8,0);
    border-right: 12px solid #cb2308;
}

.jtip.style-12.red.bottom-left:before,
.jtip.style-12.red.bottom-center:before,
.jtip.style-12.red.bottom-right:before {
    border-color:  #cb2308 rgba(203,35,8,0) rgba(203,35,8,0) rgba(203,35,8,0);
    border-top: 12px solid rgba(203,35,8,0);
    border-bottom: rgba(203,35,8,0);
    border-right: 12px solid #cb2308;
}

.jtip.style-12.red.left-top:before,
.jtip.style-12.red.left-center:before,
.jtip.style-12.red.left-bottom:before {
    border-color:  #cb2308 rgba(203,35,8,0) rgba(203,35,8,0) rgba(203,35,8,0);
    border-bottom: 12px solid rgba(203,35,8,0);
    border-left: 12px solid #cb2308;    
}