.notification-area {
  pointer-events: none;
  z-index: 100000;
  position: fixed;
  top: var(--menu-top-height);
  width: 100%;
  height: calc(100% - var(--menu-top-height));
  box-sizing: border-box;
  padding: 10px 30px 10px 30px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.notification-area::-webkit-scrollbar {
  display: none;
}

.notification {
  pointer-events: all;
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
  margin-left: auto;
  max-width: 400px;
}

.notification.success {background-color: #04AA6D;}
.notification.info {background-color: #2196F3;}
.notification.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}