#notifications {
    opacity: 0;
    position: fixed;
    top: -100%;
    min-height: 5px;
    background: white;
    font-size: 100%;
    max-width: 480px;
    width: 100%;
    left: auto;
    right: 50px;
    z-index: 666666666;
    transition: all 1s ease-in-out;
    margin: 0 auto;
}

#notifications.active .line {
    position: relative;
    top: 0;
    width: 100%;
    /* height: 5px; */
    cursor: pointer;
    background: #fff;
    background: linear-gradient(-225deg, rgb(34, 225, 255) 0%, rgb(29, 143, 225) 48%, rgb(98, 94, 177) 100%);
    background-size: 200% 200%;
    animation: gradientLineAnimation 4s cubic-bezier(.4,0,1,1) infinite;
    display: block;
    left: 0;
    right: 0;
    padding: 10px;
    overflow: hidden;
}

@keyframes gradientLineAnimation { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

#notifications .close-notification {position: absolute;right: 20px;top: 20%;color: #212121;}

#notifications.active {
    top: 50px;
    opacity: 1;
}

#notifications.active .content::before {

}

#notifications .message {
    margin: 15px;
    position: relative;
    width: 100%;
}

#notifications .message::before {
    content: ">";
    color: #999;
    position: relative;
    left: -10px;
    top: 2px;
}

#notifications .message:nth-child(1)::before {
    content: "";
}

#notifications .message.warning {
    border-bottom: 2px solid orange;
}

#notifications .message.error {
    border-bottom: 2px solid red;
}

#notifications .message.success {
    border-bottom: 2px solid green;
}

#notifications .content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* margin: 5px; */
    background: white;
}


/**
 * ==============================================
 * Dot Floating
 * ==============================================
 */
#notifications .dot-floating:only-child {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: notificationDotFloating 4s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
  top: 25%;
}

#notifications .dot-floating::before, #notifications .dot-floating::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

#notifications .dot-floating::before {
  left: -12px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: notificationDotFloatingBefore 3s infinite ease-in-out;
}

#notifications .dot-floating::after {
  left: -24px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #ffffff;
  animation: notificationDotFloatingAfter 3s infinite ease-in-out;
}

@keyframes notificationDotFloating {
  0% {
    left: calc(-50% - 5px);
  }
  75% {
    left: calc(50% + 105px);
  }
  100% {
    left: calc(50% + 205px);
  }
}

@keyframes notificationDotFloatingBefore {
  0% {
    left: -50px;
  }
  50% {
    left: -12px;
  }
  75% {
    left: -50px;
  }
  100% {
    left: -50px;
  }
}

@keyframes notificationDotFloatingAfter {
  0% {
    left: -100px;
  }
  50% {
    left: -24px;
  }
  75% {
    left: -100px;
  }
  100% {
    left: -100px;
  }
}