@charset "UTF-8";

#notification_container
{
  
  /* font family */
  font-family: monospace;
  
  /* other settings */
  top: 160px; /* keep in sync with translate3d() */
  left: 0;
  margin: auto;
  max-width: 500px;
  position: fixed;
  right: 0;
  text-align: center;
  transform-origin: 50% 50%;
  transition: all 500ms ease-in-out;
  width: 80vw;
  z-index: 999;
}

#notification_container.closed
{
  transform: translate3d(0, calc(-100% - 160px - 10px), 0) scale3d(0.5, 0.5, 1);
  transition: none;
}

#notification
{
  background-color: #f4dfa6;
  border-radius: 12px;
  border: 6px solid #e2b124;
}

#notification_message
{
  background-color: #f4dfa6;
  border-radius: 12px;
  color: hsl(44, 82%, 25%);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 24px 48px 24px 24px;
  text-align: left;
}

#notification_close
{
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='48px' height='48px' viewBox='0 0 960 960'%3E%3Cline x1='96.5' y1='95.5' x2='863.5' y2='863.5' fill='none' stroke='%23765a0c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='120'/%3E%3Cline x1='863.5' y1='95.5' x2='96.5' y2='863.5' fill='none' stroke='%23765a0c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='120'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: contain;
  border: none;
  cursor: pointer;
  height: 20px;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 20px;
}

#notification
{
  /* horizontal offset | vertical offset | blur radius | color (note: no spread or inset available) */
  filter: drop-shadow(-2px 3px 3px rgba(0, 0 , 0, 0.16)) drop-shadow(-2px 3px 3px rgba(0, 0 , 0, 0.23));
}