.tooltip {
	display: inline-block;
	position: relative;
	opacity: 1;
	/*z-index: 999;*/
}

/* Trigger text */

.tooltip-item {
	/*text-decoration: underline;*/
	cursor: pointer;
}
/*.tooltip-item:hover {
	text-decoration: none;
}*/
.tooltip:hover .tooltip-item::after {
	pointer-events: auto;
}

/* Tooltip */

.tooltip-content {
	position: absolute;
    z-index: 9999;
    width: 246px;
    left: 46px;
    bottom: 20%;
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: rgba(14, 14, 14, 0.5) 0px 5px 10px;
    opacity: 0;
    cursor: default;
    pointer-events: none;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    white-space: normal;
    color: #181a84;
    margin: 0px 0px 20px -165px;
    background: rgb(255, 255, 250);
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
	text-shadow: initial;
}
.arr {
    left: 50%;
    margin-left: -11px;
    bottom: -11px;
    position: absolute;
    display: block;
    border-width: 11px;
    border-color: transparent;
    border-style: solid;
}

.arr::after {
    content: "";
    top: 100%;
    left: 50%;
    position: absolute;
    margin-left: -10px;
    border-color: rgb(248, 248, 248) transparent transparent;
    border-width: 10px;
    border-style: solid;
}

.tooltip-effect-1 .tooltip-content {
	-webkit-transform: translate3d(0,-15px,0);
	transform: translate3d(0,-15px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltip-effect-2 .tooltip-content {
	-webkit-transform-origin: 50% calc(100% + 10px);
	transform-origin: 50% calc(100% + 10px);
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,45deg);
	transform: perspective(1000px) rotate3d(1,0,0,45deg);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
}

.tooltip-effect-3 .tooltip-content {
	-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg);
	transform: translate3d(0,10px,0) rotate3d(1,1,0,25deg);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltip-effect-4 .tooltip-content {
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: scale3d(0.7,0.3,1);
	transform: scale3d(0.7,0.3,1);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
}

.tooltip-effect-5 .tooltip-content {
	width: 180px;
	margin-left: -90px;
	-webkit-transform-origin: 50% calc(100% + 6em);
	transform-origin: 50% calc(100% + 6em);
	-webkit-transform: rotate3d(0,0,1,15deg);
	transform: rotate3d(0,0,1,15deg);
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
	-webkit-transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);
	transition-timing-function: ease, cubic-bezier(.17,.67,.4,1.39);
}

.tooltip:hover .tooltip-content {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0);
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

.tooltip.tooltip-effect-2:hover .tooltip-content {
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,0deg);
	transform: perspective(1000px) rotate3d(1,0,0,0deg);
}

/* Arrow */


/* Tooltip content*/

.tooltip-content img {
	position: relative;
	height: 170px;
	display: block;
	float: left;
	margin-right: 1em;
}

.tooltip-text {
}

.tooltip-effect-5 .tooltip-text {
	padding: 1.4em;
}

/* tooltip bottom */
.tooltip-bottom .tooltip-content {
    position: absolute;
    z-index: 9999;
    width: initial;
    left: initial;
    bottom: initial;
    margin: 0 0 0;
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: rgba(14, 14, 14, 0.5) 0px 5px 10px;
    opacity: 0;
    cursor: default;
    pointer-events: none;
    white-space: normal;
    color: #1d1d3a;
    background: rgb(255, 246, 202);
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    text-shadow: initial;
	font-weight: initial;
}
.tooltip-bottom .tooltip-content a {
	color: blue;
}
.tooltip-bottom .arr {
    left: 5%;
    margin-left: 0;
    top: -11px;
    bottom: initial;
    position: absolute;
    display: block;
    border-width: 11px;
    border-color: transparent;
    border-style: solid;
}

.tooltip-bottom .arr::after {
    content: "";
    top: -20px;
    left: 50%;
    position: absolute;
    margin-left: -10px;
    border-color: transparent transparent rgb(178, 173, 211);
    border-width: 10px;
    border-style: solid;
}