.alertWrapperLay {
  padding: 16px 40px 0px 40px;
}

.alertWrapperAll {
  padding: 16px 0 0;
}

.alertWrapperOther {
  padding: 0 0 20px;
}

.alert {
  height: 32px;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 5px 21px;

  :global {
    .easyv-alert-icon {
      animation: amplification 0.3s linear infinite alternate;
      font-size: 14px;
      line-height: 12px;
    }

    .anticon-close {
      padding-top: 8px;
    }

    @keyframes amplification {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }

    .easyv-alert-message {
      font-size: 12px;
      color: #b4b7c1;
      margin-right: 16px;
      max-width: 100%;
      height: 20px;
      line-height: 20px;
      display: block;
    }

    .easyv-alert-close-icon {
      line-height: 22px;
      top: 2px;
    }

    .anticon-close {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

.error {
  .alert {
    background: rgba(235, 81, 90, 0.12);
    border: 1px solid #eb515a;

    :global {
      .easyv-alert-icon {
        color: #eb515a;
      }
    }
  }
}

.info {
  padding: 16px 30px 0px 30px;
  .alert {
    background: rgba(58, 137, 254, 0.12);
    border: 1px solid #3a89fe;

    :global {
      .easyv-alert-icon {
        color: #3a89fe;
        font-size: 16px;
        line-height: 14px;
      }
    }
  }
}
