/*顶部消息提醒 start*/
.tui-toptips {
  width: 100%;
  padding: 18rpx 30rpx;
  box-sizing: border-box;
  position: fixed;
  z-index: 9999;
  color: #fff;
  font-size: 30rpx;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
  opacity: 0;
  transform: translateZ(0) translateY(-100%);
  transition: all 0.3s ease-in-out;
}

.tui-top-show {
  transform: translateZ(0) translateY(0);
  opacity: 1;
}

/*顶部消息提醒 end*/

/*toast消息提醒 start*/

/*注意问题：
 1、fixed 元素宽度无法自适应，所以增加了子元素
 2、fixed 和 display冲突导致动画效果消失，暂时使用visibility替代
*/
.tui-toast{
  width: 80%;
  box-sizing: border-box;
  color: #fff;
  font-size: 28rpx;
  position: fixed;
  visibility: hidden;
  opacity: 0;
  left: 50%; 
  transition: all 0.3s ease-in-out;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tui-toast-show {
  visibility: visible;
  opacity: 1;
}
.tui-tips-content{
   word-wrap: break-word;
   word-break: break-all;
   border-radius: 8rpx;
   padding: 18rpx 30rpx;
}
/*底部消息提醒 start*/
.tui-bottomtips {
  bottom: 120rpx;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/*底部消息提醒 end*/

/*居中消息提醒 start*/
.tui-centertips{
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
/*居中消息提醒 end*/

/*toast消息提醒 end*/

/*背景颜色 start*/

.tui-primary {
  background: #5677fc;
}

.tui-green {
  background: #19be6b;
}

.tui-warning {
  background: #ff7900;
}

.tui-danger {
  background: #ed3f14;
}

.tui-translucent {
  background: rgba(0, 0, 0, 0.7);
}

/*背景颜色 end*/

/*消息提醒 end*/