/*
 * Issue Form CSS (通知）
 */

#notification {
  display: none;
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1000;
  background-color: #ffffff;
  color: #af0000;
  border: 2px solid #af0000;
  padding: 12px;
  border-radius: 4px;
  width: calc(100% - 48px);
  box-sizing: border-box;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

#notification-icon {
  float: left;
  vertical-align: middle;
}

#notification-container {
  float: left;
  vertical-align: middle;
  margin-top: -1px;
  padding-left: 5px;
}

#notification-content {
  font-size: 0.8rem;
}

/* notice */
#flash-notice {
  display: none;
  border: 2px solid #0b8749;
  border-radius: 4px;
  padding: 12px;
  z-index: 1000;
  background-color: white;
  width: calc(100% - 48px);
  box-sizing: border-box;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 24px;
  left: 24px;
  pointer-events: none;
}

#flash-notice > img {
  vertical-align: middle;
}

/* fade-out */

.fade-out {
  display: block !important;
  animation: fadeout-keyframes 10s ease 0s 1 forwards;
}

.fade-out-inline {
  display: inline-block !important;
  animation: fadeout-keyframes 2s ease 0s 1 forwards;
}

@keyframes fadeout-keyframes {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  } /* 1秒までは薄くならない */
  100% {
    opacity: 0;
  }
}