.zoop-popper {
	background-color: #fff;
	       
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 4px;
	
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	
	padding: 4px 8px;
	font-size: 13px;
	
	z-index: 9999;
	display: none;
}

.zoop-popper[data-show] {
	display: block;
}

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

.zoop-popper .arrow {
    visibility: hidden;
}

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

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

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

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

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


.zoop-popper[data-popper-placement^='top'] > .arrow::before {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid rgba(0,0,0,.2);
	border-bottom: 1px solid rgba(0,0,0,.2);
}

.zoop-popper[data-popper-placement^='bottom'] > .arrow::before {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-left: 1px solid rgba(0,0,0,.2);
	border-top: 1px solid rgba(0,0,0,.2);
}

.zoop-popper[data-popper-placement^='left'] > .arrow::before {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-top: 1px solid rgba(0,0,0,.2);
	border-right: 1px solid rgba(0,0,0,.2);
}

.zoop-popper[data-popper-placement^='right'] > .arrow::before {
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid rgba(0,0,0,.2);
	border-left: 1px solid rgba(0,0,0,.2);
}