/* notification.css Date:2020-01-16 15:15:26 */

.lg-notification-content:after,
.lg-notification-content:before {
  content: "";
  display: block;
  clear: both;
}

.lg-notification-container {
  z-index: 2000;
  position: fixed;
}

.lg-notification-container,
.lg-notification-container *,
.lg-notification-container :after,
.lg-notification-container :before {
  box-sizing: border-box;
}

.lg-notification {
  position: relative;
  width: 460px;
  margin-top: 16px;
  margin-right: 24px;
  padding: 12px 48px 12px 24px;
  min-height: 48px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 500;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  color: #434343;
  background-color: #FFF;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.lg-notification-hascontent {
  padding-top: 4px;
  padding-bottom: 4px;
}

.lg-notification-hascontent.lg-notification-hasicon {
  padding-top: 12px;
  padding-bottom: 12px;
}

.lg-notification-hascontent.lg-notification-hasicon .lg-notification-message {
  margin-left: 64px;
}

.lg-notification-hascontent.lg-notification-hasicon .lg-notification-icon {
  margin-right: 16px;
  font-size: 48px;
}

.lg-notification-hascontent.lg-notification-hasicon .notification-cont {
  margin-top: 16px;
}

.lg-notification-hasicon .lg-notification-message {
  margin-left: 32px;
}

.lg-notification-message {
  float: left;
}

.lg-notification-close {
  position: absolute;
  right: 24px;
  top: 17px;
  font-size: 14px;
  color: #7c7c7c;
}

.lg-notification-close:hover {
  cursor: pointer;
}

.lg-notification-icon {
  position: absolute;
  float: left;
  font-size: 24px;
}

.lg-notification .notification-title {
  line-height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #434343;
}

.lg-notification .notification-cont {
  margin-top: 8px;
  line-height: 1.57;
  font-size: 14px;
  font-weight: 500;
  color: #7c7c7c;
}

.lg-notification-icon.lg-icon-info:before {
  color: #0083ff;
}

.lg-notification-icon.lg-icon-wrong:before {
  color: #e1251b;
}

.lg-notification-icon.lg-icon-success:before {
  color: #3ebf17;
}

.lg-notification-icon.lg-icon-warn:before {
  color: #faa21e;
}

.lg-notification--top-left {
  top: 0;
  left: 0;
}

.lg-notification--top-left .lg-notification {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.lg-notification--top-center {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.lg-notification--top-center .lg-notification {
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.lg-notification--top-right {
  top: 0;
  right: 0;
}

.lg-notification--top-right .lg-notification {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.lg-notification--center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.lg-notification--center .lg-notification {
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.lg-notification--bottom-left {
  bottom: 0;
  left: 0;
}

.lg-notification--bottom-left .lg-notification {
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.lg-notification--bottom-center {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.lg-notification--bottom-center .lg-notification {
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.lg-notification--bottom-right {
  bottom: 0;
  right: 0;
}

.lg-notification--bottom-right .lg-notification {
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

@-webkit-keyframes notificationIn {
  0% {
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
  }

  95% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@keyframes notificationIn {
  0% {
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
  }

  95% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@-webkit-keyframes notificationOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  20% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
}

@keyframes notificationOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  20% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }
}

.notification--out {
  -webkit-animation: notificationOut .4s ease-in-out;
  animation: notificationOut .4s ease-in-out;
}

.notification--in {
  -webkit-animation: notificationIn .4s ease-in-out;
  animation: notificationIn .4s ease-in-out;
}