.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
	visibility: hidden;
}

[role="tooltip"] {
  visibility: hidden;
  position: absolute;
  border: 1px solid #c5c5c5;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  background: #fff;
  color: #333;
  z-index: 255;
  padding: 8px;
  -webkit-box-shadow: 0px 0px 10px #858788 !important;
  box-shadow: 0px 0px 10px #858788 !important;
}

[role="tooltip"] ul {
	margin-bottom: 0;
}

.jab-tooltip-right[role="tooltip"] {
	left: 100%;
}

.jab-tooltip-top[role="tooltip"] {
	bottom: 100%;
	left:0;
}

.jab-tooltip-bottom[role="tooltip"] {
	top: calc(100% + +8px);
	left:0;
}

[role="tooltip"]:before {
	color: var(--jab-main-background);
    position: absolute;
    content: "";
}

/*left arrow*/
.jab-tooltip-right[role="tooltip"]:before {

    left: -8px;
    top: calc(50% - 8px);
    border-left: 0;
    border-bottom: 0.5rem solid transparent;
    border-right: 0.5rem solid;
    border-top: 0.5rem solid transparent;
}

/*top arrow*/
.jab-tooltip-bottom[role="tooltip"]:before {
    top: -8px;
    left: calc(50% - 8px);
    border-top: 0;
    border-left: 0.5rem solid transparent;
    border-bottom: 0.5rem solid;
    border-right: 0.5rem solid transparent;
}

/*bottom arrow*/
.jab-tooltip-top[role="tooltip"]:before {
    bottom: -8px;
    left: calc(50% - 8px);
    border-bottom: 0;
    border-right: 0.5rem solid transparent;
    border-top: 0.5rem solid;
    border-left: 0.5rem solid transparent;
}

[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover ~ [role="tooltip"],
[aria-describedby]:focus ~ [role="tooltip"]{
  visibility: visible;
}

[role="tooltip"]:hover {
	visibility: visible;
}