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

.jtip.style-5 {
    font-size            : 13px;
    -moz-border-radius   : 5px; 
    -webkit-border-radius: 5px; 
    border-radius        : 5px; 
    padding              : 21px 21px 23px;
    box-shadow           : 3px 3px 4px 0px rgba(0,0,0,0.61);
    -moz-box-shadow      : 3px 3px 4px 0px rgba(0,0,0,0.61);
    -webkit-box-shadow   : 3px 3px 4px 0px rgba(0,0,0,0.61);
}  

.jtip.style-5:before,
.jtip.style-5:after {
    content : '';
    position: absolute;
    left    : 10px; 
    width   : 0; height  : 0;        
}

.jtip.style-5:before { border  : solid 11px; bottom  : -12px; }
.jtip.style-5:after  { border  : solid 9px; }

/* general */
.jtip.style-5:before, .jtip.style-5.top-left:before { top: auto !important; bottom: -22px !important; left: 9px !important; }
.jtip.style-5:after, .jtip.style-5.top-left:after   { top: auto !important;  bottom: -18px !important; left: 11px !important; }

.jtip.style-5.top-center:before { margin-left: -11px; left: 50% !important; }
.jtip.style-5.top-center:after  { margin-left: -9px; left: 50% !important; }

.jtip.style-5.top-right:before { top: auto !important; bottom: -22px !important; left: auto !important; right: 9px !important; }
.jtip.style-5.top-right:after  { top: auto !important; bottom: -18px !important; left: auto !important; right: 11px !important; }

.jtip.style-5.bottom-left:before { bottom: auto !important; top: -22px !important; }
.jtip.style-5.bottom-left:after  { bottom: auto !important; top: -18px !important; }

.jtip.style-5.bottom-center:before { margin-left: -11px; bottom: auto !important; top: -22px !important; left: 50% !important; }
.jtip.style-5.bottom-center:after  { margin-left: -9px; bottom: auto !important; top: -18px !important; left: 50% !important; }

.jtip.style-5.bottom-right:before { bottom: auto !important; top: -22px !important; left: auto !important; right: 9px !important; }
.jtip.style-5.bottom-right:after  { bottom: auto !important; top: -18px !important; left: auto !important; right: 11px !important; }

.jtip.style-5.right-top:before { bottom: auto !important; top: 9px !important; left: -22px !important; right: auto !important; }
.jtip.style-5.right-top:after  { bottom: auto !important; top: 11px !important; left: -18px !important; right: auto !important; }

.jtip.style-5.right-center:before { margin-top: -11px; top: 50% !important; left: -22px !important; right: auto !important; }
.jtip.style-5.right-center:after  { margin-top: -9px; top: 50% !important; left: -18px !important; right: auto !important; }

.jtip.style-5.right-bottom:before { top: auto !important; bottom: 9px !important; left: -22px !important; right: auto !important; }
.jtip.style-5.right-bottom:after  { top: auto !important; bottom: 11px !important; left: -18px !important; right: auto !important; }

.jtip.style-5.left-top:before { bottom: auto !important; top: 9px !important; right: -22px !important; left: auto !important; }
.jtip.style-5.left-top:after  { bottom: auto !important; top: 11px !important; right: -18px !important; left: auto !important; }

.jtip.style-5.left-center:before { margin-top: -11px; top: 50% !important; right: -22px !important; left: auto !important; }
.jtip.style-5.left-center:after  { margin-top: -9px; top: 50% !important; right: -18px !important; left: auto !important; }

.jtip.style-5.left-bottom:before { top: auto !important; bottom: 9px !important; right: -22px !important; left: auto !important; }
.jtip.style-5.left-bottom:after  { top: auto !important; bottom: 11px !important; right: -18px !important; left: auto !important; }

/* dark */
.jtip.style-5.dark { background: #303030; color: #c5c5c5; border : 1px solid #eee; }

.jtip.style-5.dark:before,
.jtip.style-5.dark.top-left:before,
.jtip.style-5.dark.top-center:before,
.jtip.style-5.dark.top-right:before { border-color: #fff rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-5.dark:after,
.jtip.style-5.dark.top-left:after,
.jtip.style-5.dark.top-center:after,
.jtip.style-5.dark.top-right:after  { border-color: #303030 transparent transparent transparent; }

.jtip.style-5.dark.bottom-left:before,
.jtip.style-5.dark.bottom-center:before,
.jtip.style-5.dark.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #fff rgba(255,255,255,0); }

.jtip.style-5.dark.bottom-left:after,
.jtip.style-5.dark.bottom-center:after,
.jtip.style-5.dark.bottom-right:after { border-color: transparent transparent #303030 transparent; }

.jtip.style-5.dark.right-top:before,
.jtip.style-5.dark.right-center:before,
.jtip.style-5.dark.right-bottom:before { border-color: rgba(255,255,255,0) #fff rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-5.dark.right-top:after,
.jtip.style-5.dark.right-center:after,
.jtip.style-5.dark.right-bottom:after  { border-color: transparent #303030 transparent transparent; }

.jtip.style-5.dark.left-top:before,
.jtip.style-5.dark.left-center:before,
.jtip.style-5.dark.left-bottom:before  { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #fff; }

.jtip.style-5.dark.left-top:after,
.jtip.style-5.dark.left-center:after,
.jtip.style-5.dark.left-bottom:after  { border-color: transparent transparent transparent #303030; }

/* light */
.jtip.style-5.light { background: #fff; color: #868686; border: 1px solid #d6d6d6; }

.jtip.style-5.light:before,
.jtip.style-5.light.top-left:before,
.jtip.style-5.light.top-center:before,
.jtip.style-5.light.top-right:before { border-color: #d6d6d6 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-5.light:after, 
.jtip.style-5.light.top-left:after,
.jtip.style-5.light.top-center:after,
.jtip.style-5.light.top-right:after { border-color: #fff rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-5.light.bottom-left:before,
.jtip.style-5.light.bottom-center:before,
.jtip.style-5.light.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #d6d6d6 rgba(255,255,255,0); }

.jtip.style-5.light.bottom-left:after,
.jtip.style-5.light.bottom-center:after,
.jtip.style-5.light.bottom-right:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #fff rgba(255,255,255,0); }

.jtip.style-5.light.right-top:before,
.jtip.style-5.light.right-center:before,
.jtip.style-5.light.right-bottom:before { border-color: rgba(255,255,255,0) #d6d6d6 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-5.light.right-top:after,
.jtip.style-5.light.right-center:after,
.jtip.style-5.light.right-bottom:after { border-color: rgba(255,255,255,0) #fff rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-5.light.left-top:before,
.jtip.style-5.light.left-center:before,
.jtip.style-5.light.left-bottom:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #d6d6d6; }

.jtip.style-5.light.left-top:after,
.jtip.style-5.light.left-center:after,
.jtip.style-5.light.left-bottom:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #fff; }