@charset "utf-8";

.snackbar { visibility: hidden; max-width: 90%; width: 100%; background-color: rgb(59, 59, 59); color: rgb(230, 226, 228); text-align: center; padding-right: 16px; position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2147000002; font-size: 16px; height: 40px; border: 2px solid rgb(59, 59, 59); display: flex; align-items: center; justify-content: space-between; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; opacity: 1; transition: opacity 0.5s; }

.snackbar.show { visibility: visible; opacity: 1; }

@media (min-width: 730px) {
  .snackbar { max-width: 730px; border-radius: 4px; font-size: 16px; }
  .snackbar.show { visibility: visible; opacity: 1; }
}

@media (min-width: 481px) and (max-width: 729px) {
  .snackbar { font-size: 16px; padding: 14px; border-radius: 4px; }
  .snackbar.show { visibility: visible; opacity: 1; }
}

@media (max-width: 480px) {
  .snackbar { font-size: 14px; padding: 14px 16px 15px; border-radius: 12px; bottom: 109px; height: 48px; max-width: 98%; }
  .snackbar.show { visibility: visible; opacity: 1; }
}

#snackbar .message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 13px 16px; }

#snackbar .link { margin-left: 20px; white-space: nowrap; text-decoration: underline; }

#snackbar .link a { color: rgb(255, 255, 255); text-decoration: underline; }

#snackbar span { font-family: "Noto Sans"; }