:root {
	--delay: 0.5s;
}

/* Background darken and blur */
.blurred {
	filter: blur(5px) brightness(50%);
}

/* toggles modal popup to be invisible */
.off {
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: scale(0.25);
  transition: var(--delay) transform;
}

/* modal overlay is transparent frame to center popup */
#modalOverlay {
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100vw;
	height: 100vh;
	top:0;
	left: 0;
	Position:fixed;
	margin: 0;
	padding: 0;
	border: none;
	background-color:transparent;
	z-index: 500; 
}

#modalPopup {
  width: 320px;
  height: 360px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #BFBA9E;
  border: 1px solid #ccc;
  box-shadow: 2rem 2rem 2rem rgba(0, 0, 0, 0.6);
  filter: blur(0);
  opacity: 100;
  visibility: visible;  
  transform: scale(1);
  transition: var(--delay) transform;
}

#btnClose {
	background: #777;
	color: white;
	width: 60px;
	height: 30px;
	border-radius:3px;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
	margin-left: 5px;
}

.btnAdd {
	background: #00DF00;
	color: white;
	width: 60px;
	height: 30px;
	border-radius:3px;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.7),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
	margin-right: 5px;
}

.btnRemove {
	background: #DF0000;
	color: white;
	width: 60px;
	height: 30px;
	border-radius:3px;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.7),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
	margin-right: 5px;
}
.btnInop {
	background: #CCC;
	color: #666;
	width: 60px;
	height: 30px;
	border-radius:3px;
    text-shadow: none;
    box-shadow:none;
	margin-right: 5px;
}

@supports (offset-rotate: 0deg) {
  .modal {
    offset-rotate: 0deg;
    offset-path: path("M 250,100 S -300,500 -700,-200");
  }
  .modal.off {
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion) {
  .modal {
    offset-path: none;
  }
}

.modal h2 {
  border-bottom: 1px solid #ccc;
  padding: 1rem;
  margin: 0;
}
.modal .content {
  padding: 1rem;
}
.modal .actions {
  border-top: 1px solid #ccc;
  background: #eee;
  padding: 0.5rem 1rem;
  display: flex;
}
.modal .actions button {
  border: 0;
  background: #78f89f;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  line-height: 1;
  margin: 5px;
}

#centered-toggle-button {
  position: absolute;
}
#punCoasters {
  transition: var(--delay) ease-out;
	filter: blur(0) brightness(100%);
}
#punCoasters.blurred {
  transition: var(--delay) ease-out;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px) brightness(50%);
}


/*# sourceMappingURL=modal.css.map */