.bynder-wrapper {
    position: relative;
}

/* Tooltip */
.bynder-tooltip {
    z-index: 0;
    background: #ccecff;
    font-weight: bold;
    padding: 4px 8px ;
    font-size: 13px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    opacity: 0.9;
    border: #00a1ff 1px solid;
    color: #004066;
    visibility: hidden;
}

.bynder-tooltip[data-show] {
    visibility: visible;
}

.bynder-tooltip:before {
    background-image: url(../png/bynder-logo.png);
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    content: '';
    margin-right: 5px;
}

/* The arrow */
.bynder-tooltip-arrow,
.bynder-tooltip-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  background-color: #ccecff;
  z-index: -1;
}

.bynder-tooltip-arrow {
  visibility: hidden;
}

.bynder-tooltip-arrow::before {
  visibility: hidden;
  content: '';
  transform: rotate(45deg);
}

.bynder-tooltip[data-show] .bynder-tooltip-arrow::before {
  visibility: visible;
}

.bynder-tooltip[data-popper-placement^='top'] > .bynder-tooltip-arrow {
  bottom: -5px;
}

.bynder-tooltip[data-popper-placement^='top'] > .bynder-tooltip-arrow:before {
  border-bottom: #00a1ff 1px solid;
  border-right: #00a1ff 1px solid;
}

.bynder-tooltip[data-popper-placement^='bottom'] > .bynder-tooltip-arrow {
  top: -5px;
}

.bynder-tooltip[data-popper-placement^='bottom'] > .bynder-tooltip-arrow:before {
  border-top: #00a1ff 1px solid;
  border-left: #00a1ff 1px solid;
}