/* EASYPRINT_WEB_CONNECTION_TOAST_R1 */

#ep-connection-toast {
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 12000;

  display: flex;
  align-items: center;
  gap: 13px;

  width: max-content;
  max-width: min(370px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: 15px 18px;

  color: #fff;
  background: #173b59;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  box-shadow: 0 12px 32px rgba(16,45,75,.23);

  font-family: "ABeeZee", Arial, sans-serif;

  animation: ep-connection-enter .22s ease-out;
}

#ep-connection-toast[hidden] {
  display: none !important;
}

#ep-connection-toast .ep-connection-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  border-radius: 10px;

  color: #ffd188;
  background: rgba(255,209,136,.12);
}

#ep-connection-toast .ep-connection-icon svg {
  width: 21px;
  height: 21px;
}

#ep-connection-toast .ep-connection-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#ep-connection-toast .ep-connection-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

#ep-connection-toast .ep-connection-description {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #dae8f1;
}

#ep-connection-toast.ep-connection-restored
.ep-connection-icon {
  color: #80e4ae;
  background: rgba(128,228,174,.12);
}

@keyframes ep-connection-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  #ep-connection-toast {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
    padding: 13px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ep-connection-toast {
    animation: none;
  }
}