.custom_alert_popup_bg {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(10px); /* Adjust the blur amount as needed */
    -webkit-backdrop-filter: blur(10px); /* Adjust the blur amount as needed */
    background-color: rgba(255, 255, 255, 0.3);

    display: none;
}

.custom_alert_popup_ui {
    margin: auto;
    /* width: fit-content; */
    height: fit-content;
    width: 300px;

    background-color: white;
    border-radius: 30px;
    padding: 20px 10px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -60px;
    box-shadow: 1px 1px 4px 1px rgba(91,91,91,0.41);
    text-align: center;
    color: #2386C6;
}

.custom_alert_popup_ui h3 {
    font-size: 28px;
    color: #2386C6;
    line-height: 34px;

    color: #4E5A67;
    font-size: 23px;
    font-weight: 600;
}

.custom_alert_popup_ui p {
    margin: auto;
    width: 96%;
    font-size: 18px;
    line-height: 24px;
    color: #2386C6;

    color: #4E5A67;
    color: #5f6973;
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
}

.custom_alert_popup_ui button {
    margin: auto;
    margin-top: 20px;
    font-size: 17px;
    /* width: 120px; */
    width: 130px;
    height: 34px;
    line-height: 13px;

    /* background-color: #818181; */
}

#customer_details_view_bookings {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#customer_details_view_bookings::-webkit-scrollbar {
  display: none;
}

/* Banner */
/* Banner container – offscreen by default */
/* ——— Banner Base Styles ——— */

#top-gradient-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* height of gradient effect */
  pointer-events: none; /* so it doesn’t block clicks */
  z-index: 9990; /* just behind the #banner */

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),  /* dark at top */
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0)       /* transparent at bottom */
  );
}

    #banner {
      position: fixed;
      top: -100px;                /* start off-screen */
      left: 50%;
      transform: translateX(-50%);
      /* width: 340px; */
      width: fit-content;
      max-width: 340px;
      /* height: 60px; */
      height: fit-content;
      /* padding: 0 25px; */
      padding: 10px 25px;
      /* background: rgba(66, 66, 66, 0.68); */
      /* backdrop-filter: blur(5px); */
      /* -webkit-backdrop-filter: blur(5px); */
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      border-radius: 20px;
      /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); */
      z-index: 9999;
      /* no transition here; we use keyframe animations */

      background-color: rgba(162, 162, 162, 0.208);
      background-color: rgba(80, 80, 80, 0.522);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);

      border: 1px solid rgba(219, 219, 219, 0.2);

      box-shadow: 
          0 10px 30px rgba(0, 0, 0, 0.2),
          inset 0 0 0.5px rgba(255, 255, 255, 0.6);
      box-shadow:
          0 10px 30px rgba(0, 0, 0, 0.2),
          inset 0 0 30px rgba(255, 255, 255, 0.05),
          inset 0 0 1px rgba(255, 255, 255, 0.4);
    }

    /* ——— “Visible” State ——— */
    #banner.visible {
      animation: slideInBounce 0.25s ease-out forwards;
    }

    /* ——— “Hiding” State ——— */
    #banner.hiding {
      animation: slideOut 0.3s ease-in forwards;
    }

    /* ——— Keyframes ——— */
    @keyframes slideInBounce {
      0%   { top: -100px; }
      /* 70%  { top:  15px; } */
      /* 90%  { top:  15px; } */
      100% { top: 30px; }
    }

    @keyframes slideOut {
      0%   { top: 30px; }
      100% { top: -100px; }
    }
    
#top-gradient-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 9990;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0)
  );

  /* backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%); */
}

/* Fade in */
#top-gradient-overlay.visible {
  animation: fadeInGradient 0.25s ease-out forwards;
}

/* Fade out */
#top-gradient-overlay.hiding {
  animation: fadeOutGradient 0.3s ease-in forwards;
}

/* Keyframes for overlay */
@keyframes fadeInGradient {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOutGradient {
  from { opacity: 1; }
  to { opacity: 0; }
}