:root {
  --mu88-error: #e44438;
  --mu88-toast-bg: rgba(0, 0, 0, 0.78);
  --mu88-toast-text: #fff;
  --mu88-placeholder: rgba(62, 69, 88, 0.6);
}

.toast {
  position: fixed;
  bottom: 20%;
  left: 50%;
  z-index: 100000;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--mu88-toast-text);
  background: var(--mu88-toast-bg);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 8px, 0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast--visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.field-error {
  margin: 4px 0 0;
  padding: 0 22px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mu88-error);
}

.js-slider {
  touch-action: pan-y;
  user-select: none;
}

/* The captured stylesheet sets display on #quick-desktop, so the id is needed to win */
#quick-desktop.is-closed {
  display: none;
}

.js-soon,
.js-tab,
.js-back,
.js-eye,
.js-slider-dot,
.js-quick-close,
.card,
.top-banner,
.about-btn,
.qe-card,
.qe-col {
  cursor: pointer;
}

.login-btn.js-submit {
  cursor: pointer;
}

.login-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* The login page lacks the register scoped rules that size the +84 flag, so mirror them here */
.login-box .input-item.phone-number .input-warpper .left .flex {
  padding: 0 6px 0 14px;
}

.login-box .input-item.phone-number .input-warpper .left .flex img {
  position: static;
  width: 24px;
  height: 16px;
  margin: 0;
  transform: none;
}

.login-box .input-item.phone-number .input-warpper .input::placeholder {
  font-size: calc(0.822003rem);
  color: var(--mu88-placeholder);
}