/* body {
  background-color: #30263d;
  font-family: -apple-system, Helvetica Neue, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Open Sans, sans-serif;
  text-transform: uppercase;
  padding: 100px;
}
 */
 
.popcornView {
  display: inline-block;
  /* width: 134px; */
  /* height: 120px; */
  /* background-image: url('https://popper.js.org/images/popcorn-box.svg'); */
}

.tooltipView[data-show] {
	display: block;
	z-index: 9999;
}
.tooltipView {
	display: none;
	/* display: inline-block; */
	background: #ffffff;
	color: #000;
	padding: 5px 10px;
	font-size: 13px;
	border-radius: 5px;
	border:1px solid #ccc;
	width:300px;
	right:-12px !important;
	box-shadow: -3px 3px 15px -2px rgba(0,0,0,0.49);
    -webkit-box-shadow: -3px 3px 15px -2px rgba(0,0,0,0.49);
    -moz-box-shadow: -3px 3px 15px -2px rgba(0,0,0,0.49);
	z-index: 9999;
}

.arrowView,
.arrowView::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  padding: 1px;
    border: solid #ccc;
    /* border-width: 1px 1px 0px 0px; */
    border-width: 0px 0px 0px 0px;
}

.arrowView {
  visibility: hidden;
}

.arrowView::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.tooltipView[data-popper-placement^='top'] > .arrowView {
  bottom: -4px;
}

.tooltipView[data-popper-placement^='bottom'] > .arrowView {
  top: -4px;
}

.tooltipView[data-popper-placement^='left'] > .arrowView {
  right: -4px;
}

.tooltipView[data-popper-placement^='right'] > .arrowView {
  left: -4px;
}