/* line 1, app_site/static/scss/app_site/global/messages.scss */
body {
  position: relative; }

/* line 5, app_site/static/scss/app_site/global/messages.scss */
#messages {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  max-width: 95%;
  margin: 0 auto; }
  /* line 13, app_site/static/scss/app_site/global/messages.scss */
  #messages .message {
    position: relative;
    padding: 0 1.3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: var(--bg);
    border: 2px solid var(--border-color);
    opacity: 0;
    transform: translateX(-2rem);
    animation: slideUp 0.4s 0.8s ease-out forwards; }
    /* line 23, app_site/static/scss/app_site/global/messages.scss */
    #messages .message,
    #messages .message * {
      color: var(--fg); }
    /* line 33, app_site/static/scss/app_site/global/messages.scss */
    #messages .message span:last-child {
      cursor: pointer;
      padding: 0.65rem 0.3rem 0.65rem 1rem; }
    /* line 38, app_site/static/scss/app_site/global/messages.scss */
    #messages .message.success {
      --bg: #36A751;
      --fg: white;
      --border-color: #8BC096; }
    /* line 44, app_site/static/scss/app_site/global/messages.scss */
    #messages .message.info {
      --bg: #0098de;
      --fg: white;
      --border-color: #0072a7; }
    /* line 50, app_site/static/scss/app_site/global/messages.scss */
    #messages .message.warning {
      --bg: #ffec4f;
      --fg: black;
      --border-color: #bbaa04; }
    /* line 56, app_site/static/scss/app_site/global/messages.scss */
    #messages .message.error {
      --bg: #c90720;
      --fg: #f3e2e2;
      --border-color: #88182d; }

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateX(0); } }