.mk-dg {
  cursor: pointer; }

.mk-dg-modal {
  background: #333;
  border-radius: 0;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
  color: white;
  display: none;
  opacity: 0;
  padding: 1rem;
  position: absolute;
  margin: 0;
  z-index: 9999; }

.mk-dg-modal.transitions {
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s; }

.mk-dg-modal.transition {
  display: block; }

.mk-dg-modal.out {
  opacity: 0; }

.mk-dg-modal[aria-hidden="false"] {
  display: block;
  opacity: 1; }

.mk-dg-modal.arrow {
  margin: 1rem; }

.mk-dg-modal.arrow:before,
.mk-dg-modal.arrow:after {
  content: '';
  height: 0;
  position: absolute;
  width: 0; }

.mk-dg-modal.top-left:before,
.mk-dg-modal.top-center:before,
.mk-dg-modal.top-right:before,
.mk-dg-modal.top-left:after,
.mk-dg-modal.top-center:after,
.mk-dg-modal.top-right:after {
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.6rem solid #333;
  top: 100%; }

.mk-dg-modal.bottom-left:before,
.mk-dg-modal.bottom-center:before,
.mk-dg-modal.bottom-right:before,
.mk-dg-modal.bottom-left:after,
.mk-dg-modal.bottom-center:after,
.mk-dg-modal.bottom-right:after {
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-bottom: 0.6rem solid #333;
  bottom: 100%; }

.mk-dg-modal.left-top:before,
.mk-dg-modal.left-center:before,
.mk-dg-modal.left-bottom:before,
.mk-dg-modal.left-top:after,
.mk-dg-modal.left-center:after,
.mk-dg-modal.left-bottom:after {
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 0.6rem solid #333;
  left: 100%; }

.mk-dg-modal.right-top:before,
.mk-dg-modal.right-center:before,
.mk-dg-modal.right-bottom:before,
.mk-dg-modal.right-top:after,
.mk-dg-modal.right-center:after,
.mk-dg-modal.right-bottom:after {
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-right: 0.6rem solid #333;
  right: 100%; }

.mk-dg-modal.top-left:before,
.mk-dg-modal.bottom-left:before,
.mk-dg-modal.top-left:after,
.mk-dg-modal.bottom-left:after {
  left: 0.6rem; }

.mk-dg-modal.top-right:before,
.mk-dg-modal.bottom-right:before,
.mk-dg-modal.top-right:after,
.mk-dg-modal.bottom-right:after {
  right: 0.6rem; }

.mk-dg-modal.top-center:before,
.mk-dg-modal.bottom-center:before,
.mk-dg-modal.top-center:after,
.mk-dg-modal.bottom-center:after {
  left: 50%;
  margin-left: -0.6rem; }

.mk-dg-modal.left-top:before,
.mk-dg-modal.right-top:before,
.mk-dg-modal.left-top:after,
.mk-dg-modal.right-top:after {
  top: 0.6rem; }

.mk-dg-modal.left-bottom:before,
.mk-dg-modal.right-bottom:before,
.mk-dg-modal.left-bottom:after,
.mk-dg-modal.right-bottom:after {
  bottom: 0.6rem; }

.mk-dg-modal.left-center:before,
.mk-dg-modal.right-center:before,
.mk-dg-modal.left-center:after,
.mk-dg-modal.right-center:after {
  top: 50%;
  margin-top: -0.6rem; }

.mk-dg-kill {
  position: absolute;
  left: -9999px; }

.mk-dg-kill {
  position: absolute;
  left: -9999px; }
