/* TOOLTIP-BOUNCE */
.tooltip {
    position: relative;
    display: inline-block;
    opacity: unset;
    visibility: visible;
    z-index: 1;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: white;
    color: black;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    border: 1px solid black;
	bottom: 35px;
	left: -60px;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    left: 47px;
    margin-left: -30px;
    border-width: 7px;
    border-style: solid;
    border-color: white transparent transparent transparent;
    z-index: 1;
}

/* TOOLTIP-SHOW*/

.tooltip1 {
    position: relative;
    display: inline-block;
    opacity: unset;
    visibility: visible;
}

.tooltip1 .tooltiptext1 {
    visibility: hidden;
    width: 100px;
	height: 25px;
    background-color: white;
    color: black;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    z-index: 10;
	font-size: 10px;
	
    /* bottom: 100%; */
	top: 30px;
    left: 20px;
    margin-left: -60px;
    border: 1px solid black;
   
}

.tooltip1:hover  .tooltiptext1{
    -webkit-animation-name: appear;
        animation-name: appear;
    -webkit-animation-duration: 1s;
        animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-delay: 0.2s;
                animation-delay: 0.2s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    z-index: 10;
}

.tooltiptext1::after {
    
    content: "";
    position: absolute;
    bottom: 90px;
    left: 47px;
    margin-left: -30px;
    border-width: 7px;
 
    /* border-style: solid; */
    /* border-color: white transparent transparent transparent; */
}



/* =================   ARROWS POINTED DOWN   ================= */

.arrow_box_down {
	position: relative;
	background: #ffffff;
	border: 1px solid #000000;
}
.arrow_box_down:after, .arrow_box_down:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index: -1;
}

.arrow_box_down:after {
	border-color: rgba(171, 171, 171, 0);
	border-top-color: #ffffff;
	border-width: 5px;
	margin-left: -5px;
}
.arrow_box_down:before {
	border-color: rgba(171, 171, 171, 0);
	border-top-color: #000000;
	border-width: 6px;
	margin-left: -6px;
}

/* =================   ARROWS POINTED UP   ================= */
 
.arrow_box_up {
	position: relative;
	background: #88b7d5;
	bottom: 100%;
	border: 4px solid #ffffff;
}
.arrow_box_up:after, .arrow_box_up:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box_up:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #ffffff;
	/* bottom: 100%; */
	border-width: 5px;
	margin-left: -5px;
}
.arrow_box_up:before {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #000000;
	/* bottom: 100%; */
	border-width: 6px;
	margin-left: -6px;
}