/* Custom popover styling */

.custom-popover-wrapper {
  position: relative;
}

.custom-popover {
  min-width: 250px;
  max-width: 320px;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border: 1px solid #e3e3e3;
  padding: 1rem;
  z-index: 1050;
  transition: opacity 0.2s;
}
.custom-popover[data-placement="bottom"] {
  margin-top: 12px;
}
.custom-popover[data-placement="top"] {
  /* move by 30px to top */
  margin-bottom: 30px;
}

.custom-popover-arrow, .custom-popover-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.custom-popover-arrow {
  visibility: hidden;
}

.custom-popover-arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.custom-popover[data-popper-placement="bottom"] .custom-popover-arrow {
  top: -4px;
  /* left: calc(50% - 4px); */
}

.custom-popover[data-popper-placement="top"] .custom-popover-arrow {
  bottom: -4px;
  /* left: calc(50% - 4px); */
}

.custom-popover[data-popper-placement="left"] .custom-popover-arrow {
  right: -4px;
  /* top: calc(50% - 4px); */
}

.custom-popover[data-popper-placement="right"] .custom-popover-arrow {
  left: -4px;
  /* top: calc(50% - 4px); */
}

.custom-popover-blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.01);
  backdrop-filter: blur(2px);
  z-index: 1040; /* less than popover */
  display: none; /* hidden by default */
}



/* #tooltip[data-popper-placement^='top'] > #arrow {
  bottom: -4px;
}

#tooltip[data-popper-placement^='bottom'] > #arrow {
  top: -4px;
}

#tooltip[data-popper-placement^='left'] > #arrow {
  right: -4px;
}

#tooltip[data-popper-placement^='right'] > #arrow {
  left: -4px;
} */