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

.jtip.style-3 {
    font-size         : 12px;
    padding           : 15px 15px 17px;
    box-shadow        : 0px 0px 1px 0px rgba(0,0,0,0.49), 0px 1px 2px 0px rgba(0,0,0,0.49), inset 0 1px 2px 0 rgba(0,0,0,0.2);
    -moz-box-shadow   : 0px 0px 1px 0px rgba(0,0,0,0.49), 0px 1px 2px 0px rgba(0,0,0,0.49), inset 0 1px 2px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.49), 0px 1px 2px 0px rgba(0,0,0,0.49), inset 0 1px 2px 0 rgba(0,0,0,0.2); 
    border            : 3px solid #fff  
}

.jtip.style-3:before,
.jtip.style-3:after {
    content : '';
    position: absolute;
    left    : 10px; /* horizontal position of the arrow */
    width   : 0; height  : 0;        
}
    
.jtip.style-3:before { border  : solid 14px; bottom  : -12px; }
.jtip.style-3:after  { border  : solid 12px; }

/* general */

.jtip.style-3:before, .jtip.style-3.top-left:before { top: auto !important; bottom: -31px !important; left: 9px !important; }
.jtip.style-3:after, .jtip.style-3.top-left:after   { top: auto !important; bottom: -24px !important; left: 11px !important; }

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

.jtip.style-3.top-right:before { top: auto !important; bottom: -31px !important; left: auto !important; right: 9px !important; }
.jtip.style-3.top-right:after  { top: auto !important; bottom: -24px !important; left: auto !important; right: 11px !important; }

.jtip.style-3.bottom-left:before { bottom: auto !important; top: -31px !important; left: 9px !important; }
.jtip.style-3.bottom-left:after  { bottom: auto !important; top: -24px !important; left: 11px !important; }

.jtip.style-3.bottom-center:before { margin-left: -14px; bottom: auto !important; top: -31px !important; left: 50% !important; }
.jtip.style-3.bottom-center:after  { margin-left: -12px; bottom: auto !important; top: -24px !important; left: 50% !important; }

.jtip.style-3.bottom-right:before { bottom: auto !important; top: -31px !important; left: auto !important; right: 9px !important; }
.jtip.style-3.bottom-right:after  { bottom: auto !important; top: -24px !important; left: auto !important; right: 11px !important; }

.jtip.style-3.right-top:before { bottom: auto !important; top: 9px !important; left: -31px !important; right: auto !important; }
.jtip.style-3.right-top:after  { bottom: auto !important; top: 11px !important; left: -24px !important; right: auto !important; }

.jtip.style-3.right-center:before { margin-top: -14px; top: 50% !important; left: -31px !important; right: auto !important; }
.jtip.style-3.right-center:after  { margin-top: -12px; top: 50% !important; left: -24px !important; right: auto !important; }

.jtip.style-3.right-bottom:before { top: auto !important; bottom: 9px !important; left: -31px !important; right: auto !important; }
.jtip.style-3.right-bottom:after  { top: auto !important; bottom: 11px !important; left: -24px !important; right: auto !important; }

.jtip.style-3.left-top:before { bottom: auto !important; top: 9px !important; right: -31px !important; left: auto !important; }
.jtip.style-3.left-top:after  { bottom: auto !important; top: 11px !important; right: -24px !important; left: auto !important; }

.jtip.style-3.left-bottom:before { top: auto !important; bottom: 9px !important; right: -31px !important; left: auto !important; }
.jtip.style-3.left-bottom:after  { top: auto !important; bottom: 11px !important; right: -24px !important; left: auto !important; }

.jtip.style-3.left-center:before { margin-top: -14px; top: 50% !important; right: -31px !important; left: auto !important; }
.jtip.style-3.left-center:after  { margin-top: -12px; top: 50% !important; right: -24px !important; left: auto !important; }


/* dark */
.jtip.style-3.dark {
    background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNTM1MyIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background : -moz-linear-gradient(top,  rgba(83,83,83,0.9) 0%, rgba(0,0,0,0.9) 100%);
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,83,83,0.9)), color-stop(100%,rgba(0,0,0,0.9)));
    background : -webkit-linear-gradient(top,  rgba(83,83,83,0.9) 0%,rgba(0,0,0,0.9) 100%);
    background : -o-linear-gradient(top,  rgba(83,83,83,0.9) 0%,rgba(0,0,0,0.9) 100%);
    background : -ms-linear-gradient(top,  rgba(83,83,83,0.9) 0%,rgba(0,0,0,0.9) 100%);
    background : linear-gradient(to bottom,  rgba(83,83,83,0.9) 0%,rgba(0,0,0,0.9) 100%);
    filter     : progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6535353', endColorstr='#e6000000',GradientType=0 );
    color      : #fff;
    text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.75);        
}

.jtip.style-3.dark:before,
.jtip.style-3.top-left.dark:before,
.jtip.style-3.top-center.dark:before,
.jtip.style-3.dark.top-right:before { border-color: #fff transparent transparent transparent; }

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

.jtip.style-3.dark.bottom-left:before,
.jtip.style-3.dark.bottom-center:before,
.jtip.style-3.dark.bottom-right:before { border-color:  transparent transparent #fff transparent; }

.jtip.style-3.dark.bottom-left:after,
.jtip.style-3.dark.bottom-center:after,
.jtip.style-3.dark.bottom-right:after { border-color: transparent transparent rgba(83,83,83,0.9) transparent; }

.jtip.style-3.dark.right-top:after  { border-color: transparent rgba(72,72,72,0.9) transparent transparent; }

.jtip.style-3.dark.right-top:before,
.jtip.style-3.dark.right-center:before,
.jtip.style-3.dark.right-bottom:before { border-color: transparent #fff transparent transparent; }
.jtip.style-3.dark.right-center:after  { border-color: transparent rgba(47,47,47,0.9) transparent transparent; }

.jtip.style-3.dark.right-bottom:after  { border-color: transparent rgba(23,23,23,0.9) transparent transparent; }

.jtip.style-3.left-top.dark:before,
.jtip.style-3.left-center.dark:before,
.jtip.style-3.left-bottom.dark:before { border-color: transparent transparent transparent #fff; }

.jtip.style-3.left-top.dark:after    { border-color: transparent transparent transparent rgba(72,72,72,0.9); }
.jtip.style-3.left-center.dark:after { border-color: transparent transparent transparent rgba(47,47,47,0.9); }
.jtip.style-3.left-bottom.dark:after { border-color: transparent transparent transparent rgba(23,23,23,0.9); }


/* light */
.jtip.style-3.light {
    background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmYiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U0ZTRlNCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background : -moz-linear-gradient(top,  rgba(251,251,251,0.9) 0%, rgba(228,228,228,0.9) 100%);
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,0.9)), color-stop(100%,rgba(228,228,228,0.9)));
    background : -webkit-linear-gradient(top,  rgba(251,251,251,0.9) 0%,rgba(228,228,228,0.9) 100%);
    background : -o-linear-gradient(top,  rgba(251,251,251,0.9) 0%,rgba(228,228,228,0.9) 100%);
    background : -ms-linear-gradient(top,  rgba(251,251,251,0.9) 0%,rgba(228,228,228,0.9) 100%);
    background : linear-gradient(to bottom,  rgba(251,251,251,0.9) 0%,rgba(228,228,228,0.9) 100%);
    filter     : progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6fbfbfb', endColorstr='#e6e4e4e4',GradientType=0 );
    color      : #000;
    text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.75);        
}

.jtip.style-3.light:before,
.jtip.style-3.top-left.light:before,
.jtip.style-3.top-center.light:before,
.jtip.style-3.light.top-right:before { border-color: #fff transparent transparent transparent; }

.jtip.style-3.light:after,
.jtip.style-3.top-left.light:after,
.jtip.style-3.top-center.light:after,
.jtip.style-3.light.top-right:after { border-color: #e1e1e1 rgba(225,225,225,0) rgba(225,225,225,0) rgba(225,225,225,0); }

.jtip.style-3.light.bottom-left:before,
.jtip.style-3.light.bottom-right:before,
.jtip.style-3.light.bottom-center:before { border-color:  transparent transparent #fff transparent; }

.jtip.style-3.light.bottom-left:after,
.jtip.style-3.light.bottom-right:after,
.jtip.style-3.light.bottom-center:after { border-color: transparent transparent rgba(248,248,248,0.9) transparent; }

.jtip.style-3.right-top.light:before,
.jtip.style-3.right-center.light:before,
.jtip.style-3.right-bottom.light:before { border-color: transparent #fff transparent transparent; }

.jtip.style-3.right-top.light:after    { border-color: transparent rgba(243,243,243,0.9) transparent transparent; }
.jtip.style-3.right-center.light:after { border-color: transparent rgba(240,240,240,0.9) transparent transparent; }
.jtip.style-3.right-bottom.light:after { border-color: transparent rgba(237,237,237,0.9) transparent transparent; }

.jtip.style-3.left-top.light:before,
.jtip.style-3.left-center.light:before,
.jtip.style-3.left-bottom.light:before { border-color: transparent transparent transparent #fff; }

.jtip.style-3.left-top.light:after    { border-color: transparent transparent transparent rgba(243,243,243,0.9); }
.jtip.style-3.left-center.light:after { border-color: transparent transparent transparent rgba(240,240,240,0.9); }
.jtip.style-3.left-bottom.light:after { border-color: transparent transparent transparent rgba(237,237,237,0.9); }