.idle-spinner-container[data-v-0bd0d714] {
  margin: -20% auto 30px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
}
.idle-text-container[data-v-0bd0d714] {
  margin: -20% auto 30px auto;
  text-align: center;
  max-width: 80%;
  line-height: 1.4;
}
.idle-button-container[data-v-0bd0d714] {
  margin: -20% auto 30px auto;
  display: block;
}

/* Ensure proper spacing on mobile */
@media (max-width: 768px) {
.idle-spinner-container[data-v-0bd0d714] {
    margin: -60% auto 30px auto;
}
.idle-text-container[data-v-0bd0d714] {
    margin: -60% auto 30px auto;
}
.idle-button-container[data-v-0bd0d714] {
    margin: -60% auto 30px auto;
}
}


.invitingPhraseDiv[data-v-742b56f6] {
  margin: -10px auto 30px auto;
  max-width: 80%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invitingPhrase[data-v-742b56f6] {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ion-color-medium);
  text-align: center;
  line-height: 1.4;
  opacity: 0.9;
  transition: opacity 0.5s ease-in-out;
}
.invitingPhrase[data-v-742b56f6]:hover {
  opacity: 1;
  color: white;
}


/* Message link styling - more specific to override any other styles */
.chatBubbleSubtitle .message-link[data-v-0dab33fc],
ion-card-subtitle .message-link[data-v-0dab33fc],
.chatBubbleSubtitle a[data-v-0dab33fc],
ion-card-subtitle a[data-v-0dab33fc] {
  color: white !important;
  text-decoration: underline;
  word-break: break-all;
}
.chatBubbleSubtitle .message-link[data-v-0dab33fc]:hover,
ion-card-subtitle .message-link[data-v-0dab33fc]:hover,
.chatBubbleSubtitle a[data-v-0dab33fc]:hover,
ion-card-subtitle a[data-v-0dab33fc]:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
}

/* Additional specificity for any remaining blue links */
.chatBubbleSubtitle a[href][data-v-0dab33fc],
ion-card-subtitle a[href][data-v-0dab33fc] {
  color: white !important;
}

/* Force white color for all links in chat bubbles - ULTRA AGGRESSIVE */
.chatBubble a[data-v-0dab33fc],
.chatBubbleRecipient a[data-v-0dab33fc],
.chatBubbleImage a[data-v-0dab33fc],
.chatBubbleVideo a[data-v-0dab33fc],
.chatBubbleRecipientImage a[data-v-0dab33fc],
.chatBubbleRecipientVideo a[data-v-0dab33fc],
.chatBubbleSubtitle a[data-v-0dab33fc],
ion-card-subtitle a[data-v-0dab33fc],
.chatBubbleSubtitle .message-link[data-v-0dab33fc],
ion-card-subtitle .message-link[data-v-0dab33fc],
.chatBubble a[href][data-v-0dab33fc],
.chatBubbleRecipient a[href][data-v-0dab33fc],
.chatBubbleImage a[href][data-v-0dab33fc],
.chatBubbleVideo a[href][data-v-0dab33fc],
.chatBubbleRecipientImage a[href][data-v-0dab33fc],
.chatBubbleRecipientVideo a[href][data-v-0dab33fc],
.chatBubbleSubtitle a[href][data-v-0dab33fc],
ion-card-subtitle a[href][data-v-0dab33fc],
.chatBubbleSubtitle .message-link[href][data-v-0dab33fc],
ion-card-subtitle .message-link[href][data-v-0dab33fc],
.chatBubble * a[data-v-0dab33fc],
.chatBubbleRecipient * a[data-v-0dab33fc],
.chatBubbleImage * a[data-v-0dab33fc],
.chatBubbleVideo * a[data-v-0dab33fc],
.chatBubbleRecipientImage * a[data-v-0dab33fc],
.chatBubbleRecipientVideo * a[data-v-0dab33fc] {
  color: white !important;
  text-decoration: underline !important;
}
.chatBubble a[data-v-0dab33fc]:hover,
.chatBubbleRecipient a[data-v-0dab33fc]:hover,
.chatBubbleImage a[data-v-0dab33fc]:hover,
.chatBubbleVideo a[data-v-0dab33fc]:hover,
.chatBubbleRecipientImage a[data-v-0dab33fc]:hover,
.chatBubbleRecipientVideo a[data-v-0dab33fc]:hover,
.chatBubbleSubtitle a[data-v-0dab33fc]:hover,
ion-card-subtitle a[data-v-0dab33fc]:hover,
.chatBubbleSubtitle .message-link[data-v-0dab33fc]:hover,
ion-card-subtitle .message-link[data-v-0dab33fc]:hover,
.chatBubble a[href][data-v-0dab33fc]:hover,
.chatBubbleRecipient a[href][data-v-0dab33fc]:hover,
.chatBubbleImage a[href][data-v-0dab33fc]:hover,
.chatBubbleVideo a[href][data-v-0dab33fc]:hover,
.chatBubbleRecipientImage a[href][data-v-0dab33fc]:hover,
.chatBubbleRecipientVideo a[href][data-v-0dab33fc]:hover,
.chatBubbleSubtitle a[href][data-v-0dab33fc]:hover,
ion-card-subtitle a[href][data-v-0dab33fc]:hover,
.chatBubbleSubtitle .message-link[href][data-v-0dab33fc]:hover,
ion-card-subtitle .message-link[href][data-v-0dab33fc]:hover,
.chatBubble * a[data-v-0dab33fc]:hover,
.chatBubbleRecipient * a[data-v-0dab33fc]:hover,
.chatBubbleImage * a[data-v-0dab33fc]:hover,
.chatBubbleVideo * a[data-v-0dab33fc]:hover,
.chatBubbleRecipientImage * a[data-v-0dab33fc]:hover,
.chatBubbleRecipientVideo * a[data-v-0dab33fc]:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

/* Make timestamp clickable for unread messages */
.chatBubbleTimeRecipient[data-v-0dab33fc] {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.chatBubbleTimeRecipient[data-v-0dab33fc]:hover {
  opacity: 0.8;
}

/* Make sender timestamp clickable for unsend functionality */
.chatBubbleTimeSender[data-v-0dab33fc] {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.chatBubbleTimeSender[data-v-0dab33fc]:hover {
  opacity: 0.8;
}

/* NUCLEAR OPTION - Override ALL links in this component */
[data-v-0dab33fc] a {
  color: white !important;
}
[data-v-0dab33fc] .chatBubble a,[data-v-0dab33fc] .chatBubbleRecipient a,[data-v-0dab33fc] .chatBubbleImage a,[data-v-0dab33fc] .chatBubbleVideo a,[data-v-0dab33fc] .chatBubbleRecipientImage a,[data-v-0dab33fc] .chatBubbleRecipientVideo a {
  color: white !important;
  text-decoration: underline !important;
}
[data-v-0dab33fc] .chatBubble a:hover,[data-v-0dab33fc] .chatBubbleRecipient a:hover,[data-v-0dab33fc] .chatBubbleImage a:hover,[data-v-0dab33fc] .chatBubbleVideo a:hover,[data-v-0dab33fc] .chatBubbleRecipientImage a:hover,[data-v-0dab33fc] .chatBubbleRecipientVideo a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}


.sketchpad[data-v-3e9f07c8] {
  background-color: transparent;
  border-radius: 12px;
}


.activity-grid {
  padding: 5px 20px 20px 20px;
  background: linear-gradient(162deg, rgba(255, 255, 255, 0.3) 70%, rgba(191, 191, 191, 0.2) 100%);
  color: rgb(255, 255, 255);
  border-radius: 16px;
  margin: 0 auto;
  margin-top: 8px;
  margin-bottom: 18px;
  max-width: 100%; /* Ensure the container stays within the parent width */
}
.grid-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grid-squares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr)); /* Make squares wrap when needed */
  gap: 4px;
  max-width: 600px; /* Set a maximum width for the grid container */
}
.activity-square {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}
@keyframes pulse {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.6;
}
}
@keyframes spotlightAnim {
0% {
    background-position: 0% 0%;
    opacity: 0.1;
}
50% {
    background-position: 100% 100%;
    opacity: 1;
}
100% {
    background-position: 0% 0%;
    opacity: 0.1;
}
}
.activity-square {
  width: 10px;
  height: 10px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.activity-square:empty::before {
  animation: none;
}

/* Spotlight effect on each activity square */
.activity-square::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.25) 100%);
  mix-blend-mode: multiply;
  animation: spotlightAnim 2s infinite ease-in-out;
  pointer-events: none;
  border-radius: 6px;
}

/* Green shades for Moments */
.level-1 {
  background-color: #9be9a8;
  animation: pulse 2s ease-in-out infinite;
}
.level-2 {
  background-color: #40c463;
  animation: pulse 1.8s ease-in-out infinite;
}
.level-3 {
  background-color: #30a14e;
  animation: pulse 1.6s ease-in-out infinite;
}
.level-4 {
  background-color: #216e39;
  animation: pulse 1.4s ease-in-out infinite;
}

/* Blue shades for Events */
.event-level-1 {
  background-color: #c7d8ff;
  animation: pulse 2.2s ease-in-out infinite;
}
.event-level-2 {
  background-color: #9bb0ff;
  animation: pulse 2s ease-in-out infinite;
}
.event-level-3 {
  background-color: #7097ff;
  animation: pulse 1.8s ease-in-out infinite;
}
.event-level-4 {
  background-color: #2e57cc;
  animation: pulse 1.6s ease-in-out infinite;
}

/* Yellow shades for Tasks */
.task-level-1 {
  background-color: #fff6b0;
  animation: pulse 2.4s ease-in-out infinite;
}
.task-level-2 {
  background-color: #ffec80;
  animation: pulse 2.2s ease-in-out infinite;
}
.task-level-3 {
  background-color: #ffdd40;
  animation: pulse 2s ease-in-out infinite;
}
.task-level-4 {
  background-color: #ffcc00;
  animation: pulse 1.8s ease-in-out infinite;
}

/* Purple shades for Drops */
.drop-level-1 {
  background-color: #e6c7ff;
  animation: pulse 2s ease-in-out infinite;
}
.drop-level-2 {
  background-color: #daadff;
  animation: pulse 2s ease-in-out infinite;
}
.drop-level-3 {
  background-color: #cb8cfe;
  animation: pulse 2s ease-in-out infinite;
}
.drop-level-4 {
  background-color: #9353c7;
  animation: pulse 2s ease-in-out infinite;
}

/* Orange shades for Paintings */
.painting-level-1 {
  background-color: #ffe4b3;
  animation: pulse 2.2s ease-in-out infinite;
}
.painting-level-2 {
  background-color: #ffc966;
  animation: pulse 2s ease-in-out infinite;
}
.painting-level-3 {
  background-color: #ffb347;
  animation: pulse 1.8s ease-in-out infinite;
}
.painting-level-4 {
  background-color: #e68a00;
  animation: pulse 1.6s ease-in-out infinite;
}
.grid-legend {
  display: flex;
  align-items: center;
  margin-top: 8px;
  gap: 8px;
  font-size: 14px;
}
.legend-squares {
  display: flex;
  gap: 3px;
}
.grid-myth {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  justify-content: flex-end;
}


.sketchpad[data-v-366dadae] {
  border: none;
  position: relative;
  height: calc(580px);
  width: calc(100%);
  background-color: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 16px; /* Add spacing below the canvas */
  display: block; /* Ensure it's a block element */
}
.comments-section[data-v-366dadae] {
  margin-top: 16px;
  margin-bottom: 16px;
  width: 100%;
}
.comments-section ion-col[data-v-366dadae] {
  margin-bottom: 8px; /* Add spacing between individual comments */
}


.sketchpad[data-v-5efeac52] {
  background-color: transparent;
  border-radius: 12px;
}


ion-segment-button {
  height: 48px;
}
ion-segment-button::part(indicator-background) {
  background: #3dc2ff;
}


.chipTextMin {
  font-size: 12px !important;
}
.chipTextMax {
  font-size: 14px !important;
}
.eventChipMobile {
  margin-top: -36px;
}


.sketchpad[data-v-8ffc924a] {
  border: none;
  height: calc(580px);
  width: calc(100% - 15px);
  background-color: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.controls[data-v-8ffc924a] {
  margin-bottom: 20px;
}


.chatMessage {
  font-size: 18px;
  font-style: italic;
}


.menuAdjust[data-v-5a13c6f8] {
    margin-left: -1.5%;
}


.menuAdjust[data-v-197c8a6c] {
    margin-left: -2%;
}


.store-prompt-content[data-v-36bcd172] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  margin-top: -18% !important;
  padding: 20px;
}
.store-buttons[data-v-36bcd172] {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 5% !important;
}
.store-prompt-text[data-v-36bcd172] {
  opacity: 0.85;
  line-height: 1.5em;
  margin: 15% auto 5% auto;
  max-width: 80%;
}


.scrolling-text-wrapper[data-v-fedf4662] {
  position: relative;
  width: 100%;
  height: 800px; /* Set a fixed height for the effect */
  overflow: hidden;
  perspective: 600px;
  margin-top: -16px;
}
.scrolling-text[data-v-fedf4662] {
  position: absolute;
  bottom: -50px;
  width: 100%;
  transform-origin: 50% 100%;
  font-size: 2.3rem;
  line-height: 2.5;
  text-align: center;
  color: #fff; /* Text color */
  animation: scroll-text-fedf4662 linear infinite;
  transition: opacity 0.3s ease;
}
.scrolling-text.text-paused[data-v-fedf4662] {
  opacity: 0.6;
}
.pause-indicator[data-v-fedf4662] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}

/* Animation for scrolling and fading out */
@keyframes scroll-text-fedf4662 {
0% {
    transform: rotateX(20deg) translateY(100%);
    opacity: 1;
}
80% {
    opacity: 1;
}
100% {
    transform: rotateX(20deg) translateY(-180%);
    opacity: 0;
}
}
.control-bar-top[data-v-fedf4662] {
  margin-top: 8px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 0;
}
.control-bar-item[data-v-fedf4662] {
  display: flex;
  align-items: center;
  width: 100%;
  --background: transparent;
  --inner-padding-end: 0;
  --inner-padding-start: 0;
  --min-height: 48px;
  padding: 0 !important;
  margin: 0 !important;
}
.control-bar-top .ion-button[data-v-fedf4662], .control-bar-top ion-button[data-v-fedf4662] {
  margin-left: 0 !important;
}
.control-bar-item > ion-button[data-v-fedf4662]:first-child, .control-bar-item > .ion-button[data-v-fedf4662]:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.control-bar-label[data-v-fedf4662] {
  min-width: 60px;
  flex-shrink: 0;
}
.control-bar-range[data-v-fedf4662] {
  flex: 1 1 0%;
  min-width: 150px;
  margin: 0 32px 0 0;
}

/* Custom styling for better range control visibility */
.control-bar-range ion-range[data-v-fedf4662] {
  --bar-background: rgba(255, 255, 255, 0.2);
  --bar-background-active: rgba(255, 255, 255, 0.4);
  --knob-background: #fff;
  --knob-size: 20px;
  --pin-background: rgba(0, 0, 0, 0.8);
  --pin-color: #fff;
}

/* Async loading indicator */
.async-loading-indicator[data-v-fedf4662] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


.flowsGrid[data-v-16803c02] {
  margin-top: 8px;
}
.flowsGridMargin[data-v-16803c02] {
  margin-top: 16px;
}
.flowsGridMobileMargin[data-v-16803c02] {
  margin-top: 8px;
}

/* Zodiac Insight Styles */
.zodiac-insight-card[data-v-16803c02] {
  display: block;
  border: 0 !important;
  border-radius: 16px;
  background: linear-gradient(162deg, rgba(255, 215, 0, 0.15) 40%, rgba(255, 165, 0, 0.15) 100%);
  color: rgb(255, 255, 255);
  margin: 0 auto;
  margin-top: 8px;
  margin-bottom: 8px;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  border-left: 4px solid #FFD700;
}
.zodiac-insight-card ion-card-title[data-v-16803c02] {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
  text-align: center;
}
.zodiac-insight-card ion-card-subtitle[data-v-16803c02] {
  color: rgba(255, 255, 255, 0.8) !important;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
.zodiac-insight-card ion-card-header[data-v-16803c02] {
  text-align: center;
  padding: 16px 16px 8px 16px;
}
.zodiac-content[data-v-16803c02] {
  padding: 8px 0;
}
.zodiac-message[data-v-16803c02] {
  text-align: center;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.zodiac-message p[data-v-16803c02] {
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  font-style: italic;
}
.zodiac-details[data-v-16803c02] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zodiac-item[data-v-16803c02] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.zodiac-item ion-icon[data-v-16803c02] {
  min-width: 20px;
  font-size: 1.2em;
}
.zodiac-item span[data-v-16803c02] {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.9);
}

/* Flow Insights Styles */
.flow-insights-card[data-v-16803c02] {
  display: block;
  border: 0 !important;
  border-radius: 16px;
  background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
  color: rgb(255, 255, 255);
  margin: 0 auto;
  margin-top: 8px;
  margin-bottom: 16px;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
}
.flow-insights-card ion-card-title[data-v-16803c02] {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
  text-align: center;
}
.flow-insights-card ion-card-subtitle[data-v-16803c02] {
  color: rgba(255, 255, 255, 0.8) !important;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
.flow-insights-card ion-card-header[data-v-16803c02] {
  text-align: center;
  padding: 16px 16px 8px 16px;
}
.productivity-score[data-v-16803c02] {
  text-align: center;
  padding: 8px 0 8px 0;
}
.score-circle[data-v-16803c02] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: white;
  font-weight: bold;
}
.score-number[data-v-16803c02] {
  font-size: 24px;
  font-weight: bold;
}
.score-feedback[data-v-16803c02] {
  margin: 0 0 20px 0;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
}
.score-breakdown[data-v-16803c02] {
  margin-bottom: 4px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.breakdown-item[data-v-16803c02] {
  margin-bottom: 12px;
  text-align: left;
}
.breakdown-item[data-v-16803c02]:last-child {
  margin-bottom: 0;
}
.breakdown-label[data-v-16803c02] {
  display: block;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}
.breakdown-value[data-v-16803c02] {
  display: block;
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  text-align: right;
}
.conflicts-section[data-v-16803c02] {
  margin: 16px 0;
  padding: 16px;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 8px;
  border-left: 4px solid #f44336;
}
.conflicts-section h3[data-v-16803c02] {
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1em;
  font-weight: 600;
}
.conflicts-list[data-v-16803c02] {
  margin-top: 8px;
}
.conflict-item[data-v-16803c02] {
  margin-bottom: 8px;
  border-radius: 8px;
  --padding-start: 16px;
  --padding-end: 16px;
  background: rgba(255, 255, 255, 0.05);
}
.conflict-item ion-icon[data-v-16803c02] {
  margin-right: 12px;
  min-width: 20px;
}
.conflict-item h3[data-v-16803c02] {
  margin: 0 0 4px 0;
  font-size: 0.9em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}
.conflict-item p[data-v-16803c02] {
  margin: 0 0 8px 0;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.7);
}
.conflict-items[data-v-16803c02] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.flow-summary[data-v-16803c02] {
  margin: 8px 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.flow-summary p[data-v-16803c02] {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.insights-list[data-v-16803c02] {
  margin: 16px 0;
}
.insights-list h3[data-v-16803c02] {
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1em;
  font-weight: 600;
}
.insight-item[data-v-16803c02] {
  margin-bottom: 8px;
  border-radius: 8px;
  --padding-start: 16px;
  --padding-end: 16px;
}
.insight-item ion-icon[data-v-16803c02] {
  margin-right: 12px;
  min-width: 20px;
}
.insight-item h3[data-v-16803c02] {
  margin: 0 0 4px 0;
  font-size: 0.9em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}
.insight-item p[data-v-16803c02] {
  margin: 0 0 8px 0;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.7);
}
.insight-metadata[data-v-16803c02] {
  margin-top: 8px;
}
.loading-container[data-v-16803c02] {
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
}
.loading-container p[data-v-16803c02] {
  margin-top: 8px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8);
}


.tap-hint {
    position: absolute;
    bottom: 20%;
    font-size: 40px;
    color: var(--ion-color-medium);
    z-index: 100;
    pointer-events: none;
}
.left {
    left: 25%;
    animation: swipe-left 1.5s infinite ease-in-out;
}
.right {
    right: 25%;
    animation: swipe-right 1.5s infinite ease-in-out;
}
.up {
    top: 10%;
    right: 5%;
    animation: swipe-up 1.5s infinite ease-in-out;
}
.down {
    top: 10%;
    right: 8%;
    animation: swipe-down 1.5s infinite ease-in-out;
}
.idle {
    position: absolute;
    top: -15px !important;
    left: 50%;
    transform: translateX(-50%);
    animation: idle-blink 1.5s infinite ease-in-out;
}
.tap {
    top: 2%;
    right: 5%;
    animation: idle-blink 1.5s infinite ease-in-out;
}
.lone {
    top: 2%;
    right: 10%;
    animation: idle-blink 1.5s infinite ease-in-out;
}
@keyframes swipe-left {
0%, 100% {
        transform: translateX(0);
        opacity: 0.5;
}
50% {
        transform: translateX(-20px);
        opacity: 1.0;
}
}
@keyframes swipe-right {
0%, 100% {
        transform: translateX(0);
        opacity: 0.5;
}
50% {
        transform: translateX(20px);
        opacity: 1.0;
}
}
@keyframes swipe-up {
0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
}
50% {
        transform: translateY(-20px);
        opacity: 1.0;
}
}
@keyframes swipe-down {
0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
}
50% {
        transform: translateY(20px);
        opacity: 1.0;
}
}
@keyframes idle-blink {
0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
}
50% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.5;
}
}


/* Interests Card Styles - matching flow-insights-card */
.interestsCard[data-v-2d1077a8] {
  display: block;
  border: 0 !important;
  border-radius: 16px;
  background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 40%, rgba(50, 50, 50, 0.4) 100%);
  color: rgb(255, 255, 255);
  margin: 0 auto;
  margin-top: 8px;
  margin-bottom: 8px;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
}
.interestsCard ion-card-header[data-v-2d1077a8] {
  text-align: center;
  padding: 16px 16px 8px 16px;
}
.interestsCard ion-card-content[data-v-2d1077a8] {
  padding: 8px 16px 16px 16px;
  text-align: center;
}
.interestsCard ion-chip[data-v-2d1077a8] {
  margin: 4px;
}


.tabBar {
  --background: linear-gradient(162deg, rgba(79, 79, 79, 0.6) 20%, rgba(191, 191, 191, 0.8) 100%);
}
.hybridHeight {
  height: 65px;
}
.mobileHeight {
  height: 48px;
}
.mobileHeightAndroid {
  height: 48px;
  padding-bottom: 24px !important;
}
.mobileHeightTablet {
  height: 48px;
  padding-top: 10px !important;
}
.tabBtn {
  --background: transparent;
  color: #ffffff !important;
  --color-selected: #3dc2ff !important;
}
.btnHybrid {
  padding-top: 8px;
  padding-bottom: 8px;
}
.btnMobile {
  padding-bottom: 0;
}
.btnMobileIPad {
  padding-top: 4px;
  padding-bottom: 4px;
}
ion-tab-bar {
  display: flex;
  justify-content: space-evenly; /* Ensures the buttons are evenly spaced */
  align-items: center; /* Centers the icons vertically */
  border: 0 !important;
  height: 90px; /* Apply a fixed height for uniformity */
}
ion-tab-button {
  --background: transparent;
  color: white;
  padding-top: 8px; /* Consistent padding on top */
  padding-bottom: 8px; /* Consistent padding on bottom */
  position: relative;
}
ion-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto; /* Centers the icon within the button */
}

/* Tyme Plus badge for non-subscribers */
.tyme-plus-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  z-index: 100;
  background-image: url(/img/tyme-plus.f16da9d8.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

/* Adjust badge position for different button types */
.btnHybrid .badge-indicator {
  top: 6px;
  right: 6px;
}
.btnMobile .badge-indicator {
  top: 4px;
  right: 4px;
}
.btnMobileIPad .badge-indicator {
  top: 6px;
  right: 6px;
}

/* Adjust Tyme Plus badge position for different button types */
.btnHybrid .tyme-plus-badge {
  top: 2px;
  right: 2px;
}
.btnMobile .tyme-plus-badge {
  top: 0px;
  right: 0px;
}
.btnMobileIPad .tyme-plus-badge {
  top: 2px;
  right: 2px;
}

/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */

/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;

  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;

  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;

  /** danger **/
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;

  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;

  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}

:root[data-theme="dark"] {
  /*
   * Dark Colors
   * -------------------------------------------
   */

  body {
    --ion-color-primary: #428cff;
    --ion-color-primary-rgb: 66,140,255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255,255,255;
    --ion-color-primary-shade: #3a7be0;
    --ion-color-primary-tint: #5598ff;

    --ion-color-secondary: #50c8ff;
    --ion-color-secondary-rgb: 80,200,255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255,255,255;
    --ion-color-secondary-shade: #46b0e0;
    --ion-color-secondary-tint: #62ceff;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106,100,255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255,255,255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;

    --ion-color-success: #2fdf75;
    --ion-color-success-rgb: 47,223,117;
    --ion-color-success-contrast: #000000;
    --ion-color-success-contrast-rgb: 0,0,0;
    --ion-color-success-shade: #29c467;
    --ion-color-success-tint: #44e283;

    --ion-color-warning: #ffd534;
    --ion-color-warning-rgb: 255,213,52;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0,0,0;
    --ion-color-warning-shade: #e0bb2e;
    --ion-color-warning-tint: #ffd948;

    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255,73,97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255,255,255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;

    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244,245,248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0,0,0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152,154,162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0,0,0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-light: #222428;
    --ion-color-light-rgb: 34,36,40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255,255,255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;
  }

  /*
   * iOS Dark Theme
   * -------------------------------------------
   */

  .ios body {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0,0,0;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255,255,255;

    --ion-color-step-50: #0d0d0d;
    --ion-color-step-100: #1a1a1a;
    --ion-color-step-150: #262626;
    --ion-color-step-200: #333333;
    --ion-color-step-250: #404040;
    --ion-color-step-300: #4d4d4d;
    --ion-color-step-350: #595959;
    --ion-color-step-400: #666666;
    --ion-color-step-450: #737373;
    --ion-color-step-500: #808080;
    --ion-color-step-550: #8c8c8c;
    --ion-color-step-600: #999999;
    --ion-color-step-650: #a6a6a6;
    --ion-color-step-700: #b3b3b3;
    --ion-color-step-750: #bfbfbf;
    --ion-color-step-800: #cccccc;
    --ion-color-step-850: #d9d9d9;
    --ion-color-step-900: #e6e6e6;
    --ion-color-step-950: #f2f2f2;

    --ion-item-background: #000000;
    --ion-card-background: #1c1c1d;
  }

  .ios ion-modal {
    --ion-background-color: var(--ion-color-step-100);
    --ion-toolbar-background: var(--ion-color-step-150);
    --ion-toolbar-border-color: var(--ion-color-step-250);
  }

  .ios ion-refresher {
    background-color: transparent !important; /* Use transparent for mobile */
    --color: var(--ion-color-dark); /* Use a light color for the text/icons */
  }

  .iosPlatform {
    background-color: transparent !important; /* Use transparent for mobile */
    --icon-color: var(--ion-color-dark); /* Customize the icon color */
    --text-color: var(--ion-color-dark); /* Customize the text color */
  }

  .miscPlatform {
    background-color: #1a1a1a !important; /* Use a dark color for the background on desktop */
    --icon-color: var(--ion-color-dark); /* Customize the icon color */
    --text-color: var(--ion-color-dark); /* Customize the text color */
  }

  /*
   * Material Design Dark Theme
   * -------------------------------------------
   */

  .md body {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18,18,18;
    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255,255,255;
    --ion-border-color: #222222;
    --ion-item-background: #1e1e1e;
    --ion-toolbar-background: #1f1f1f;
    --ion-tab-bar-background: #1f1f1f;
    --ion-card-background: #1e1e1e;
    --ion-accordion-background-color: #1e1e1e;

    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;
  }
}
body {
    background-color: transparent;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

.mapboxgl-ctrl-logo {
    visibility: hidden !important;
}

.mapboxgl-ctrl-attrib {
    visibility: hidden !important;
}

.billyJean {
    position: relative;
    overflow: hidden;
  }
  
.billyJean::before {
    content: "";
    position: absolute;
    border: 0 !important;
    border-radius: 6px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.75) 100%);
    mix-blend-mode: multiply;
    animation: spotlightAnim 2s infinite ease-in-out;
    pointer-events: none;
  }
  
@keyframes spotlightAnim {
    0% {
      background-position: 0% 0%;
      opacity: 0.1;
    }
    50% {
      background-position: 100% 100%;
      opacity: 1;
    }
    100% {
      background-position: 0% 0%;
      opacity: 0.1;
    }
}

p {
    /* Enable text selection */
    user-select: text;
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* Internet Explorer/Edge */
}

.noScroll {
    --overflow: hidden;
}

.no-interact {
    pointer-events: none;
}

.no-media {
    --mediaSrc: none !important;
}

.noSelect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ /* Firefox */ /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.selectable {
    -webkit-touch-callout: default; /* iOS Safari */
    -webkit-user-select: text; /* Safari */ /* Konqueror HTML */ /* Firefox */ /* Internet Explorer/Edge */
    user-select: text; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.no-padding-content {
    --padding-start: 0;
    --padding-end: 0;
    --padding-top: 0;
    --padding-bottom: 0;
}

.no-padding-grid {
    --ion-grid-padding: 0;
    padding: 0;
}
  
.no-padding-grid > ion-row {
    margin: 0;
}

.no-padding-col {
    padding: 0;
    margin: 0;
}

.searchBarToolbar {
    margin-top: 4px;
    margin-left: 4px;
    margin-bottom: -8px;
}

.searchBarToolbarMobile {
    margin-top: 4px;
    margin-left: -2px;
    margin-bottom: -8px;
}

img {
    pointer-events: none;
}

ion-header.modal {
    --border-radius: 16px !important;
}

ion-fab {
    z-index: 1000;
  }

ion-fab-button {
    z-index: 1000;
}

ion-footer,
ion-toolbar {
  overflow: hidden;
}

.headerHeightLogoExtended {
    margin-top: 16px;
}

.headerHeightExtended {
    margin-top: 18px;
}

.headerHeightAvatarExtended {
    margin-top: 12px;
}

.headerHeightAvatarV2Extended {
    margin-top: 10px;
}

.headerHeightTitleExtended {
    margin-top: 12px;
}

ion-title {
    color: white !important;
}

ion-text.emojiReaction {
    margin-top: 3px; 
    font-size: 2.5em;
}

ion-text.emojiReactionMobile {
    margin-top: 2px;
    margin-left: 2px; 
    font-size: 2.5em;
}

ion-modal.fullscreen {
    --width: 100%;
    --height: 100%;
}

ion-button.btnSpacer {
    margin: 0px;
}

ion-button.btnSpacerV2 {
    margin-left: 8px;
    margin-right: 8px;
}

ion-button.btnSpacerMobile {
    margin-top: 2px;
    margin-left: 4px;
}

ion-button.btnSpacerV2Toolbar {
    margin-left: 16px;
}

ion-button.btnSpacerEnd {
    margin-left: 8px;
    margin-right: 16px;
}

ion-button.btnSpacerEndMobile {
    margin: 0px;
}

ion-button.btnSpacerEndToolbar {
    padding-top: 8px;
    margin-right: -3px;
}

ion-button.btnSpacerEndV2Toolbar {
    margin-right: 8px;
}

ion-button.btnSpacerEndIcon {
    padding-top: 8px;
    margin-right: -8px;
}

ion-button.btnSpacerEndIconMobile {
    padding-top: 16px;
    margin-right: -8px;
}

ion-button.btnSpacerEndMobileToolbar {
    margin-right: 4px;
}

ion-button.btnSpacerV2EndMobileToolbar {
    margin-right: -20px;
}

ion-button.btnSpacerV3EndMobileToolbar {
    margin-right: 4px;
    margin-top: 16px;
}

ion-button.upVote {
    position: relative; 
    left: -70px; 
    top: 6px;
}

ion-button.upVoteMobile {
    position: relative;
    left: -70px;
    top: -5px;
}

ion-button.downVote {
    position: relative; 
    left: -70px; 
    top: 6px;
}

ion-button.downVoteMobile {
    position: relative; 
    left: -70px; 
    top: -5px;
}

ion-button.tyme {
    margin-left: 10px;
}

.silentDisable {
    cursor: not-allowed;
    pointer-events: none;
}

ion-icon.tymeIcon {
    --background-hover: transparent;
}

ion-icon.tymeLogo {
    width: 200px;
    height: 200px;
}

ion-icon.seal {
    width: 18px;
    height: 18px;
}

h1.calendarMonth {
    padding-left: 21px;
    color: white !important;
}

h1.profileName {
    color: white !important;
    margin-top: 16px;
    margin-bottom: 20px;
}

h1.profileNameMobile {
    color: white !important;
    margin-top: 16px;
    margin-bottom: -14px;
}

h3.dayModalDay {
    color: white !important;
    padding-left: 10px;
    padding-bottom: 8px;
}

h3.momentModalDay {
    color: white !important;
    margin-top: 4px;
    padding-left: 10px;
    padding-bottom: 6px;
}

.passportQR {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto !important;
    margin-top: 10% !important;
    margin-bottom: 8px !important;
    border-radius: 36px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
}

ion-content {
    --background: linear-gradient(162deg, rgba(57, 57, 57, 0.6) 40%, rgba(20, 20, 20, 0.7) 100%), var(--url) center/cover fixed no-repeat;
    color: white !important;
    border: 0 !important;
    border-style: none !important;
    border-width: 0 !important;
}

ion-content::part(scroll)::-webkit-scrollbar {
    display: none;
}
    
ion-content::part(scroll) {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

ion-content::part(scroll)::-webkit-scrollbar-horizontal {
    display: none;
}

ion-content::part(scroll) {
    overflow-x: hidden;
}

ion-content.calendarContent {
    --ion-background-color: rgb(29, 29, 29);
    --background: linear-gradient(162deg, rgba(57, 57, 57, 0.6) 40%, rgba(20, 20, 20, 0.7) 100%), var(--url) center/cover fixed no-repeat;
}

ion-content.calendarContent::part(scroll) {
    top: var(--top-offset)
}

/* Traditional */
ion-content.traditional {
    width: calc(100% + 15px);
}

ion-content.traditional::part(scroll) {
    padding-bottom: 25%;
    padding-right: 15px;
}

ion-infinite-scroll {
    padding-bottom: 4%;
}

ion-grid.daysGrid {
    display: flex;
    flex-wrap: wrap;
    column-count: 3;
}

ion-grid.useLargeDesktop {
    width: calc(100vw - 1%); /* removes unwanted padding from edge of larger displays */
}

ion-grid.circlePeerGrid {
    display: grid;
    flex-wrap: wrap;
    column-count: 2;
}

ion-grid.circlePeerGridMargin {
    margin-top: -15px;
}

ion-grid.circlePeerGridMobileMargin {
    margin-top: -1.25%;
    margin-left: -0.5%; /* adds addition padding to edge of smaller displays */
}

ion-grid.digestGrid {
    display: flex;
    flex-wrap: wrap;
    column-count: 2;
}

ion-grid.digestGridMargin {
    margin-top: -8px;
}

ion-grid.digestGridMobileMargin {
    margin-top: -0.5%;
}

ion-grid.eventsGridMargin {
    margin-top: -0px;
}

ion-grid.eventsMobileMargin {
    margin-top: -0.5%;
}

ion-grid.tasksGrid {
    display: grid;
    flex-wrap: wrap;
    column-count: 2;
}

ion-grid.tasksGridMargin {
    margin-top: -6px;
}

ion-grid.tasksGridMobileMargin {
    margin-top: -1.5%;
}

ion-grid.cratesGrid {
    display: grid;
    flex-wrap: wrap;
    column-count: 2;
}

ion-grid.cratesGrid Margin {
    margin-top: -6px;
}

ion-grid.cratesGridMobileMargin {
    margin-top: -1.5%;
}

ion-card, .card-ios, .card-md {
    border-radius: 8px;
    border-style: solid !important;
}

ion-card.scrollGuideTile {
    display: hidden;
    margin: 0 auto !important;
    width: 100% !important;
    height: 0% !important;
    border: 0 !important;
}

ion-card.scrollTileIOS {
    display: hidden;
    margin: 0 auto !important;
    width: 100% !important;
    height: 0% !important;
    border: 0 !important;
}

ion-card.scrollGuideTileBrowser {
    display: hidden;
    margin: 0 auto !important;
    width: 100% !important;
    height: 0% !important;
    border: 0 !important;
}

ion-card.aboutTile {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(153, 153, 153, 0.6) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(194, 160, 160);
    height: 200px !important;
    margin: 0 auto;
    margin-bottom: 16px;
    justify-content: center;
}

/* CSS for the glassy skeleton effect */
.skeleton {
    position: relative;
    background: linear-gradient(162deg, rgba(135, 135, 135, 0.2) 20%, rgba(191, 191, 191, 0.5) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); /* Adds the glassy, frosted effect */
    border: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;   /* Full width */
}
  
/* Shimmer effect */
.skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150px; /* Starts outside the container */
    height: 100%;
    width: 150px; /* Width of the shimmer */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    animation: loading 1.5s infinite;
}
  
@keyframes loading {
    0% {
        left: -150px;
    }
    100% {
        left: 100%;
    }
}

/* Moonwalk effect */
.moonwalk {
    position: relativxe;
    background: linear-gradient(162deg, rgba(135, 135, 135, 0.2) 5%, rgba(191, 191, 191, 0.5) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    height: 100px;
    width: 100%;
}

.moonwalk::before {
    content: '';
    position: absolute;
    top: 0;
    right: -150px; /* Starts outside the container on the right */
    height: 100%;
    width: 150px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    animation: moonwalking 1.5s infinite;
}

@keyframes moonwalking {
    0% {
        right: -150px;
    }
    100% {
        right: 100%;
    }
}

/* Waterfall effect */
.waterfall {
    position: relative;
    background: linear-gradient(162deg, rgba(135, 135, 135, 0.2) 5%, rgba(191, 191, 191, 0.5) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

.waterfall::before {
    content: '';
    position: absolute;
    top: -150px; /* Starts above the container */
    left: 0;
    width: 100%;
    height: 100%; /* Height of the shimmer */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    animation: loading-waterfall 1.5s infinite;
}

@keyframes loading-waterfall {
    0% {
        top: -150px;
    }
    100% {
        top: 100%;
    }
}
  
/* Hide skeleton when mediaSrc is selected */
.media-loaded {
    background: var(--mediaSrc) center/cover fixed no-repeat;
    -webkit-backdrop-filter: none;
    backdrop-filter: none; /* Remove frosted glass effect when media is loaded */
}  

ion-card.dayTile {
    display: inline-block;
    border: 0 !important;
    background: linear-gradient(162deg, rgba(135, 135, 135, 0.2) 20%, rgba(191, 191, 191, 0.5) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: auto;
    margin: 0 auto !important;
}

ion-card.dayTileMobile {
    display: inline-block;
    border: 0 !important;
    background: linear-gradient(162deg, rgba(135, 135, 135, 0.2) 20%, rgba(191, 191, 191, 0.5) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: auto;
    margin: 0 auto !important;
}

.dayTileMax {
    width: 99.85% !important;
    margin: 0 auto !important;
}

.dayTileMin {
    width: 99.85% !important;
    margin: 0 auto !important;
}

ion-card.dayCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 116px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.dayCardMedia {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(153, 153, 153, 0.6) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 136px !important;
    margin: 0 auto;
    margin-bottom: 8px;
}

ion-card.plusSubMedia {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(55, 55, 55, 0.6) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 200px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 24px;
}

ion-card.plusPlanCard {
    display: inline-flex;
    border: 0px !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(171, 171, 171, 0.3) 70%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

ion-card.plusPlanSelectedCard {
    display: inline-flex;
    border-radius: 16px;
    border: 3.25px !important;
    border-style: solid !important;
    border-color: #3dc2ff !important;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.3) 70%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

ion-card.productCard {
    display: inline-flex;
    border: 0px !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(171, 171, 171, 0.3) 70%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

ion-card.productSelectionCard {
    display: inline-flex;
    border-radius: 16px;
    border: 3.25px !important;
    border-style: solid !important;
    border-color: #3dc2ff !important;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.3) 70%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

ion-card.forecastCardMedia {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(153, 153, 153, 0.6) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

.dayCardMax {
    width: calc(100%) !important;
    padding-top: 0;
}

.dayCardMin {
    width: calc(100%) !important;
    padding-top: 8px;
}

ion-card.assistantVirtualCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%), var(--assistant) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 200px !important;
    margin: 0 auto;
    margin-top: 8px;
}

.assistantVirtualCardMax {
    width: calc(100%) !important;
    padding-top: 0;
}

.assistantVirtualCardMin {
    width: calc(100%) !important;
    padding-top: 8px;
}

ion-card.todayCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%), var(--today) top/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 350px !important;
    margin: 0 auto;
    margin-top: 8px;
}

ion-card.funnelCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.6) 100%), var(--url) top/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 300px !important;
    margin: 0 auto;
    margin-top: 8px;
}

.funnelCardMax {
    width: calc(100%) !important;
    padding-top: 0;
}

.funnelCardMin {
    width: calc(100%) !important;
    padding-top: 8px;
}

ion-card.videoCard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 16px;
    box-shadow: none;
    background: transparent;
    color: rgb(255, 255, 255);
    height: 480px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

ion-card.audioCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    box-shadow: none;
    background: transparent;
    color: rgb(255, 255, 255);
    height: 40px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

audio::-webkit-media-controls-panel {
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0.2) 100%);
}

ion-card.momentCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    /* Enable text selection */
    -webkit-user-select: text; /* Safari */ /* Firefox */
    user-select: text; /* Internet Explorer/Edge */
}

ion-card.momentImageCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.15) 70%, rgba(54, 54, 54, 0.8) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 420px !important;
    margin: 8px auto !important;
    margin-left: -4px !important;
    margin-right: 2px !important;
    padding-top: 0 !important;

    /* Enable text selection */
    -webkit-user-select: text; /* Safari */ /* Firefox */
    user-select: text; /* Internet Explorer/Edge */
}

ion-card.momentProfileImageCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.45) 80%, rgba(54, 54, 54, 0.8) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin: 8px auto !important;
    margin-left: -4px !important;
    margin-right: 9px !important;
    margin-bottom: 8px;

    /* Enable text selection */
    -webkit-user-select: text; /* Safari */ /* Firefox */
    user-select: text; /* Internet Explorer/Edge */
}

ion-card.momentVideoCard {
    display: inline-flex;
    justify-content: center;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.45) 80%, rgba(54, 54, 54, 0.8) 100%), var(--url) bottom/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: calc(250px) !important;
    margin: 8px auto !important;
    margin-left: -2px !important;
    margin-right: 8px !important;
    padding-top: 0 !important;
}

ion-card.momentVideoCardAdjust {
    display: inline-flex;
    justify-content: center;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.45) 80%, rgba(54, 54, 54, 0.8) 100%), var(--url) bottom/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: calc(250px) !important;
    margin: 8px auto !important;
    margin-left: 0px !important;
    margin-right: 8px !important;
    padding-top: 0 !important;
}

.adjustVideo {
    left: -2px !important;
}

ion-card.momentPaintingCard {
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 300px !important; /* Increase height to fit the canvas */
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Enable text selection */
    -webkit-user-select: text; /* Safari */ /* Firefox */
    user-select: text; /* Internet Explorer/Edge */
}

.momentPaintingCard canvas {
    display: block;
    border-radius: 16px;
    width: 140px;
    height: 190px;
    margin: 0 auto;
    margin-top: 9px;
}

ion-card.momentPaintCard {
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 300px !important; /* Increase height to fit the canvas */
    margin: 0 auto;
    margin-left: -4px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Enable text selection */
    user-select: text;
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* Internet Explorer/Edge */
}

.momentPaintCard canvas {
    border-radius: 16px;
    width: 160px;
    height: 260px;
}

ion-card.momentProfileCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-left: -4px !important;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.momentPeerProfileCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.momentCommentCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-left: -4px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.momentModalCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.45) 80%, rgba(54, 54, 54, 0.8) 100%), var(--url) bottom/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 150px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.5em;
}

ion-card.momentModalMedCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.45) 80%, rgba(54, 54, 54, 0.8) 100%), var(--url) bottom/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 250px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

ion-card.momentModalLgCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.45) 80%, rgba(54, 54, 54, 0.8) 100%), var(--url) bottom/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 320px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

.momentCardMax {
    width: calc(100%) !important;
}

.momentCardMin {
    width: calc(100%) !important;
    padding-top: 8px;
}

.momentCardMaxAdjust {
    width: calc(100% - 8px) !important;
}

.momentCardMinAdjust {
    width: calc(100% - 8px) !important;
    padding-top: 8px;
}

ion-card.momentLiveCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.14) 70%, rgba(255, 255, 255, 0.2) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 512px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

.momentLiveCardMax {
    width: calc(100%) !important;
    padding-top: 0px;
}

.momentLiveCardMin {
    width: calc(100%) !important;
    padding-top: 16x;
}

ion-card.momentNewCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.45) 80%, rgba(54, 54, 54, 0.8) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 400px !important;
    margin: 0 auto;
    margin-top: 8px;
}

ion-card.alertMsgTile {
    position: relative;
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 135px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.alertTile {
    position: relative;
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin: 0 auto;
    margin-top: 6px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.alertTileMax {
    width: calc(100% - 10px) !important;
    padding-top: 8px;
}

.alertTileMin {
    width: calc(100% - 10px) !important;
    padding-top: 8px;
}

ion-card.alertEventTile {
    position: relative;
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin: 0 auto !important;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.alertTaskTile {
    position: relative;
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.circlePeerTile {
    --cardColor: rgba(214, 214, 214, 0.4);
    position: relative;
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) 20%, rgba(94, 94, 94, 0.8) 100%);
    color: rgb(255, 255, 255);
    height: 200px !important;
    margin: 0 auto !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    width: calc(100%) !important;
}

ion-card.circlePeerTileMenu {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) 20%, rgba(94, 94, 94, 0.8) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin-top: 8px;
    margin-bottom: 8px;
}

.circlePeerTileMenuMax {
    width: calc(100%) !important;
    padding-top: 0;
}

.circlePeerTileMenu {
    width: calc(100%) !important;
    padding-top: 8px;
}

ion-card.miscTileMobile {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) 20%, rgba(94, 94, 94, 0.8) 100%);
    color: rgb(255, 255, 255);
    height: 100px !important;
    margin: 0 auto;
    margin-left: -1.5%;
    margin-top: 8px;
    margin-bottom: 8px;
}

.miscTileMobileMax {
    width: calc(100%) !important;
    padding-top: 0;
}

.miscTileMobileMin {
    width: calc(100%) !important;
    padding-top: 8px;
}

ion-card.peerMessageTile {
    position: relative;
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.peerMessageInTile {
    position: relative;
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, #007AFF 70%, #228dff 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 8px;
}

ion-card.peerMessageGreen {
    background: linear-gradient(162deg, #28a745 20%, #34d058 100%);
}

ion-card.peerMessageRed {
    background: linear-gradient(162deg, #dc3545 20%, #ff6f61 100%);
}

ion-card.peerMessageYellow {
    background: linear-gradient(162deg, #ffc107 20%, #ffdd57 100%);
}

ion-card.peerMessagePurple {
    background: linear-gradient(162deg, #6f42c1 20%, #a371f7 100%);
}

ion-card.peerMessagePink {
    background: linear-gradient(162deg, #e83e8c 20%, #ff79c6 100%);
}

ion-card.peerMessageOrange {
    background: linear-gradient(162deg, #fd7e14 20%, #ff9f43 100%);
}

.peerMessageTileMax {
    width: calc(100% - 10px) !important;
    padding-top: 8px;
}

.peerMessageTileMin {
    width: calc(100% - 10px) !important;
    padding-top: 8px;
}

ion-card.chatBubble {
    background: linear-gradient(162deg, #909090 20%, #a9a9a9 100%);
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-left: 25%;
    margin-right: -10%;
    margin-bottom: 2%;
    border: 0; /* Remove the border */
    border-style: none !important;
    border-radius: 24px;
    line-height: 1.5em;

    /* Enable text selection */
    -webkit-user-select: text; /* Safari */ /* Firefox */
    user-select: text; /* Internet Explorer/Edge */
}

ion-card.chatBubbleRecipient {
    background: linear-gradient(162deg, #007AFF 20%, #228dff 100%);
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-left: 2.5%;
    margin-bottom: 2%;
    border: 0; /* Remove the border */
    border-style: none !important;
    border-radius: 24px;
    line-height: 1.5em;

    /* Enable text selection */
    -webkit-user-select: text; /* Safari */ /* Firefox */
    user-select: text; /* Internet Explorer/Edge */
}

ion-card.chatBubbleImage {
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.1) 80%, rgba(153, 153, 153, 0.6) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    height: 400px;
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-left: 24%;
    margin-bottom: 10%;
    border: 0; /* Remove the border */
    border-style: none !important;
    border-radius: 24px;
}

ion-card.chatBubbleRecipientImage {
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.1) 80%, rgba(153, 153, 153, 0.6) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    height: 300px;
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-right: 24%;
    margin-bottom: 10%;
    border: 0; /* Remove the border */
    border-style: none !important;
    border-radius: 24px;
}

ion-card.chatBubbleVideo {
    justify-content: center;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.1) 80%, rgba(153, 153, 153, 0.6) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    height: 400px;
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%;
    margin-left: 24%;
    margin-bottom: 10%;
    border: 0;
    border-style: none !important;
    border-radius: 24px;
}

ion-card.chatBubbleRecipientVideo {
    justify-content: center;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.1) 80%, rgba(153, 153, 153, 0.6) 100%), var(--mediaSrc) center/cover fixed no-repeat;
    height: 300px;
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%;
    margin-right: 24%;
    margin-bottom: 10%;
    border: 0;
    border-style: none !important;
    border-radius: 24px;
}

.chatBubblePaint {
    justify-content: center;
    background: linear-gradient(162deg, #909090 20%, #a9a9a9 100%);
    height: 350px;
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%;
    margin-left: 24%;
    margin-top: 7%;
    margin-bottom: 7%;
    border: 0;
    border-style: none !important;
    border-radius: 24px;
}

.chatBubbleRecipientPaint {
    justify-content: center;
    background: linear-gradient(162deg, #007AFF 20%, #228dff 100%);
    height: 350px;
    padding: 0 !important;
    border-radius: 20px;
    max-width: 75%;
    margin-right: 24%;
    margin-top: 7%;
    margin-bottom: 7%;
    border: 0;
    border-style: none !important;
    border-radius: 24px;
}

ion-card-title.chatBubbleTitle {
    font-size: 36px !important;
    color: white !important;
    margin-left: -4px;
}

ion-card-subtitle.chatBubbleSubtitle {
    font-size: 16px !important;
    font-weight: 444 !important;
    text-transform: none;
    color: white !important;
}

ion-card.chatBubbleRecipientGreen {
    background: linear-gradient(162deg, #28a745 20%, #34d058 100%);
}

ion-card.chatBubbleRecipientRed {
    background: linear-gradient(162deg, #dc3545 20%, #ff6f61 100%);
}

ion-card.chatBubbleRecipientYellow {
    background: linear-gradient(162deg, #ffc107 20%, #ffdd57 100%);
}

ion-card.chatBubbleRecipientPurple {
    background: linear-gradient(162deg, #6f42c1 20%, #a371f7 100%);
}

ion-card.chatBubbleRecipientPink {
    background: linear-gradient(162deg, #e83e8c 20%, #ff79c6 100%);
}

ion-card.chatBubbleRecipientOrange {
    background: linear-gradient(162deg, #fd7e14 20%, #ff9f43 100%);
}

ion-card.digestTile {
    display: inline-block;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.4) 50%, rgba(153, 153, 153, 0.6) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 100px;
    padding-top: 8px;
    margin: 0 auto !important;
}

.digestTileMax {
    width: 100% !important;
}

.digestTileMin {
    margin: 14px;
    width: 100% !important;
}

.digestTileMobileIPad {
    margin: 14px;
    height: 250px !important;
    width: 100% !important;
}

ion-card.digestImageTile {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.6) 20%, rgba(255, 255, 255, 0.4) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 275px !important;
    margin: 0 auto;
    margin-bottom: 16px;
}

.digestImageTileMax {
    width: calc(100%) !important;
    padding-top: 8px;
}

.digestImageTileMin {
    width: calc(100%) !important;
    padding-top: 8px;
}

ion-card.eventDayTile {
    display: flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.6) 20%, rgba(255, 255, 255, 0.4) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 136px !important;
    margin: 0 auto;
}

ion-card.taskDayTile {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) 50%, rgba(109, 109, 109, 0.1) 100%);
    color: rgb(255, 255, 255);
    height: 136px !important;
    margin: 0 auto;
}

ion-card.taskDayTileComplete {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) -150%, rgba(94, 94, 94, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 136px !important;
    margin: 0 auto;
}

.taskDayTileMax {
    width: calc(100%) !important;
}

.taskDayTileMin {
    width: calc(100%) !important;
}

ion-card.dropTile {
    display: flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 116px !important;
    margin: 0 auto;
    margin-left: 0px;
    margin-top: 1%;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.dropTileTimeBlock {
    display: inline-flexbox;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    margin: 0 auto;
    margin-left: 0px;
    margin-top: 1%;
    margin-bottom: -4px;
    height: 125px !important;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.dropTileReminder {
    display: inline-flexbox;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(255, 255, 255, 0.2) 40%, rgba(191, 191, 191, 0.2) 100%);
    color: rgb(255, 255, 255);
    margin: 0 auto;
    margin-left: 0px;
    margin-top: 1%;
    margin-bottom: -4px;
    height: 125px !important;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

ion-card.dropTileMemory {
    display: inline-flexbox;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(71, 71, 71, 0.1) 70%, rgba(255, 255, 255, 0.2) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 512px !important;
    margin: 0 auto;
    margin-left: 0px;
}

ion-card.dropTileQuote {
    display: inline-flexbox;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(55, 55, 55, 0.6) 70%, rgba(98, 98, 98, 0.2) 100%), var(--url) bottom/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 225px !important;
    margin: 0 auto;
    margin-left: 0px;
    margin-top: 1%;
}

ion-card.eventImageTile {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.6) 20%, rgba(255, 255, 255, 0.4) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 200px !important;
    margin: 0 auto;
    margin-bottom: 8px !important;
}

.eventImageTileMax {
    width: calc(100%) !important;
    padding-top: 8px;
}

.eventImageTileMin {
    width: calc(100%) !important;
    padding-top: 8px;
}

ion-card.taskTile {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) 50%, rgba(109, 109, 109, 0.8) 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    padding-top: 8px;
    transition: transform 0.3s;
    margin: 0 auto !important;
}

ion-card.taskTileComplete {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) -150%, rgba(94, 94, 94, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    padding-top: 8px;
    margin: 0 auto !important;
}

.taskTileMax {
    width: 100% !important;
}

.taskTileMin {
    width: 100% !important; /* 33.33% */
}

.taskTileMobileIpad {
    width: 100% !important;
}

ion-card.taskItemCard {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(101, 168, 255, 0.8) 60%, rgba(255, 255, 255, 0.2) 100%);
    height: 75px !important;
    margin: 0 auto;
    margin-left: -1px;
    margin-top: 8px;
    margin-bottom: 8px;
    line-height: 1.5em;
}

ion-card.taskItemCardComplete {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(194, 194, 194, 0.8) 20%, rgba(255, 255, 255, 0.3) 100%), url(/img/load-lines.4eca725d.gif) center/cover fixed repeat;
    height: 25px !important;
    margin: 0 auto;
    margin-left: -1px;
    margin-top: 8px;
    margin-bottom: -2px;
    line-height: 1.5em;
}

ion-card.eventTile {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.6) 20%, rgba(255, 255, 255, 0.3) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 400px !important;
    margin: 0 auto;
    margin-bottom: 16px;
    transition: transform 0.3s;
}

ion-card.eventTileComplete {
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.8) 100%, rgba(255, 255, 255, 0.2) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 400px !important;
    margin: 0 auto;
    margin-bottom: 16px;
}

.eventTileMax {
    width: calc(100% - 10px) !important;
    padding-top: 8px;
}

.eventTileMin {
    width: calc(100% - 10px) !important;
    padding-top: 8px;
}

ion-card.crateTile {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) 50%, rgba(109, 109, 109, 0.8) 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    padding-top: 8px;
    transition: transform 0.3s;
    margin-bottom: 16px !important;
    margin: 0 auto;
}

ion-card.crateTileComplete {
    --cardColor: rgba(214, 214, 214, 0.4);
    display: inline-flex;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--cardColor) -150%, rgba(94, 94, 94, 0.2) 100%);
    color: rgb(255, 255, 255);
    height: 140px !important;
    margin-bottom: 16px !important;
    margin: 0 auto;
}

.crateTileMax {
    width: 93% !important;
}

.crateTileMin {
    width: 93% !important;
}

.crateMobileIpad {
    width: 93% !important;
}

ion-card-title.crateCardTile {
    font-size: 20px !important;
    color: white !important;
    bottom: 8px;
    margin-left: -4px;
}

ion-card-subtitle.crateCardSubtitle {
    text-transform: none;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: white !important;
    top: 90px;
    margin-left: -4px;
}

ion-card.peerTile {
    display: flexbox;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.6) 20%, rgba(255, 255, 255, 0.3) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 400px !important;
    margin-bottom: 15px;
    padding-top: 8px;
}

.peerTileMax {
    width: calc(100% - 32px) !important;
    margin-top: -8px;
}

.peerTileMin {
    width: calc(100% - 40px) !important;
    margin-top: 8px;
}

ion-card.funnelTile {
    display: flexbox;
    border: 0 !important;
    border-radius: 16px;
    background: linear-gradient(162deg, rgba(0, 0, 0, 0.6) 20%, rgba(255, 255, 255, 0.3) 100%), var(--url) center/cover fixed no-repeat;
    color: rgb(255, 255, 255);
    height: 400px !important;
    margin-bottom: 15px;
    padding-top: 8px;
}

.funnelTileMax {
    width: calc(100% - 36px) !important;
    margin-top: -8px;
}

.funnelTileMin {
    width: calc(100% - 36px) !important;
    margin-top: 8px;
}

ion-card-header {
    width: 100% !important;
    height: 50% !important;
}

ion-card-title.tileDayDate {
    color: white !important;
    margin-left: -4px;
    transition: font-size 0.2s ease-in-out;
}

ion-card-subtitle.tileDaySubtitle {
    font-weight: 450 !important;
    color: white !important;
    margin-left: -8px;
    transition: font-size 0.2s ease-in-out;
}

ion-card-content.tileDay {
    padding-left: 8px;
    padding-top: 20px;
    transition: font-size 0.2s ease-in-out, height 0.2s ease-in-out;
}

ion-card-title.dayCardTitle {
    font-size: 24px !important;
    font-weight: 500;
    color: white !important;
    top: 1.25px;
}

ion-card-subtitle.dayCardSubtitle {
    line-height: 1.5em;
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -85px;
}

ion-card-subtitle.dayCardSubtitleV2 {
    line-height: 1.5em;
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -95px;
}

ion-card-title.dayCardMediaTitle {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: white !important;
}

ion-card-subtitle.dayCardMediaSubtitle {
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -86px;
}

ion-card-subtitle.assistantCardSubtitle {
    position: absolute;
    top: 148%;
    width: calc(100% - 42px);
    height: calc(205px);
    line-height: 1.65em;
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

ion-card-subtitle.todayCardSubtitle {
    position: absolute;
    top: 116px;
    width: calc(100% - 42px);
    height: calc(205px);
    line-height: 1.65em;
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -86px;
    overflow: hidden;
    text-overflow: ellipsis;
}

ion-card-title.miscCardTitle {
    font-size: 24px !important;
    color: white !important;
    top: 4px;
}

ion-card-subtitle.miscCardSubtitle {
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -74px;
}

ion-card-title.forecastMediaTitle {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: white !important;
    top: -4px;
}

ion-card-subtitle.forecastMediaSubtitle {
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -86px;
}

ion-card-title.plusSubMediaTitle {
    font-style: italic;
    font-size: 24px !important;
    color: white !important;
    margin-bottom: 34px;
}

ion-card-subtitle.plusSubMediaSubtitle {
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -148px;
    line-height: 1.5em;
}

ion-card-title.momentCardTitle {
    font-size: 20px !important;
    font-weight: 500;
    color: white !important;
    margin-bottom: -18px;
}

ion-card-subtitle.momentCardSubtitle {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -55px;
    line-height: 1.5em;
}

ion-card-title.momentModalCardTitle {
    font-size: 24px !important;
    color: white !important;
    margin-bottom: -2px;
}

ion-card-subtitle.momentModalCardSubtitle {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -65px;
    line-height: 1.5em;
}

ion-card-title.momentModalMedCardTitle {
    font-size: 24px !important;
    color: white !important;
    margin-bottom: 44px;
}

ion-card-subtitle.momentModalMedCardSubtitle {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -152px;
    line-height: 1.5em;
}

ion-card-title.dropTileTitle {
    font-size: 24px !important;
    color: white !important;
    margin-bottom: 2px;
}

ion-card-subtitle.dropTileSubtitle {
    text-transform: none;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -80px;
    line-height: 1.5em;
}

ion-card-subtitle.taskItemCardSubtitle {
    font-size: 16px !important;
    font-weight: 450 !important;
    color: white !important;
    top: 25px;
    margin-left: 8px;
    margin-bottom: 0px;
}

ion-card-title.alertTileTitle {
    font-size: 20px !important;
    font-weight: 500;
    color: white !important;
    top: 14px;
}

ion-card-subtitle.alertTileSubtitle {
    text-transform: none;
    font-size: 14px !important;
    color: white !important;
    margin-bottom: -8px; 
}

ion-card-title.alertTileSender {
    font-size: 24px !important;
    color: white !important;
    top: 7px;
}

ion-card-subtitle.alertTileMsg {
    font-size: 18px !important;
    font-style: italic !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -90px;
    text-transform: none !important;
}

ion-avatar.alertMsgAvatar {
    position: absolute;
    top: -74px;
    right: 20px;
    width: 75px;
    height: 75px;
    margin-top: 32px;
}

ion-avatar.alertTileAvatar {
    position: absolute;
    top: -74px;
    right: 20px;
    width: 100px;
    height: 100px;
    margin-top: 19px;
}

ion-avatar.momentAvatar {
    position: absolute;
    top: -17.5px;
    right: 20px;
    width: 70px;
    height: 70px;
    margin-top: 32px;
}

ion-avatar.momentAvatarMobile {
    position: absolute;
    top: -25px;
    right: 20px;
    width: 70px;
    height: 70px;
    margin-top: 32px;
}

ion-avatar.peerAvatar {
    background-color: rgb(45, 45, 45);
    border: 1.5px !important;
    border-style: solid !important;
    border-color: white !important;
}

.circlePeerAvatar {
    margin-left: -10px;
    width: 50px; 
    height: 50px;
}

.attrDiv {
    margin-top: 8px !important;
}

.messageRowMobile {
    padding-bottom: 8px;
}

.message-image-button {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
  
.message-input {
    flex: 1;
    margin: 0;
    margin-left: -8px !important;
    padding: 0 1px;
}
  
.messageButton {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: right;
    margin-left: auto; /* Pushes the button to the rightmost edge */
    margin-right: -16px; /* Adjust this to create space between input and button */
}

.androidAdjustInput {
    margin-bottom: 24px !important;
}
  
/* Ensure toolbar items are centered and aligned properly */
ion-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
  
/* Flexbox layout for ion-col */
.message-button-col {
    display: flex;
    align-items: center;
}
  
.spacer-button {
    margin: 0 auto !important;
}
  
.message-button-col ion-input {
    margin-left: 0;
}
  
.message-button-col .message-image-button {
    margin-left: -16px !important;
    margin-right: 0px;
}
  
.messageButtonMobile {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: right;
    margin-left: auto; /* Pushes the button to the rightmost edge */
    margin-right: -16px;
}
  
.messageButtonMobileIPad {
    margin-right: -16px;
}

.chatBubbleTimeSender {
    margin-top: 4px; /* Adds some spacing from the element above */
    margin-bottom: 4px; /* Adds some spacing from the element below */
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-left: 25%;
    font-size: 14px;
    opacity: 0.5;
}

.chatBubbleTimeSenderExtended {
    margin-top: 4px; /* Adds some spacing from the element above */
    margin-bottom: 4px; /* Adds some spacing from the element below */
    padding: 10px;
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-left: 58%;
    font-size: 14px;
    opacity: 0.5;
}

.chatBubbleTimeRecipient {
    margin-top: 4px; /* Adds some spacing from the element above */
    margin-bottom: 4px; /* Adds some spacing from the element below */
    padding: 10px;
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-left: 2.5%;
    font-size: 14px;
    opacity: 0.5;
}

.chatBubbleTimeRecipientExtended {
    margin-top: 4px; /* Adds some spacing from the element above */
    margin-bottom: 4px; /* Adds some spacing from the element below */
    padding: 10px;
    border-radius: 20px;
    max-width: 75%; /* Adjust the width as needed */
    margin-left: 58%;
    font-size: 14px;
    opacity: 0.5;
}

ion-card-title.circlePeerTileTitle {
    font-size: 20px !important;
    font-weight: 500;
    color: white !important;
    width: 110px;
    height: 100%;
    margin-left: -6px;
    margin-bottom: 36px;
}

ion-card-subtitle.circlePeerTileSubtitle {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: -6px;
    top: 65.5px;
}

ion-avatar.circlePeerTileAvatar {
    position: absolute;
    top: 30px;
    right: -2px;
    width: 70px; 
    height: 70px;
}

ion-avatar.circlePeerTileAvatarMobile {
    position: absolute;
    top: -30px;
    right: -2px;
    width: 70px; 
    height: 70px;
}

ion-avatar.eventTileHostAvatar {
    position: absolute;
    top: -200px;
    right: 8px;
    width: 70px; 
    height: 70px;
}

ion-avatar.eventTilePeerAvatar {
    position: inherit;
    background-color: rgb(45, 45, 45);
    background-image: url(/img/avatar.40abadf0.png);
    background-size: cover !important;
    background-position: center !important;
    border: 1.75px !important;
    border-style: solid !important;
    border-color: white !important;
    top: -30px;
    margin-left: -4px;
    width: 50px; 
    height: 50px;
}

ion-avatar.eventTilePeerAvatarMobile {
    position: inherit;
    background-color: rgb(45, 45, 45);
    background-image: url(/img/avatar.40abadf0.png);
    background-size: cover !important;
    background-position: center !important; 
    border: 1.75px !important;
    border-style: solid !important;
    border-color: white !important;
    top: -32px;
    width: 50px; 
    height: 50px;
}

.title-small {
    font-size: 16px;
}

.title-medium {
    font-size: 18px;
}

.title-large {
    font-size: 20px;
}

.subtitle-small {
    font-size: 14px;
}

.subtitle-medium {
    font-size: 16px;
}

.subtitle-large {
    font-size: 20px;
}

ion-card-title.circlePeerTileTitle {
    font-size: 20px !important;
    font-weight: 500;
    color: white !important;
    top: 4px;
    margin-left: -4px;
}

ion-card-title.digestImageTileTitle {
    font-size: 22px !important;
    font-weight: 500;
    color: white !important;
    bottom: 60px;
    margin-left: -4px;
}

ion-card-subtitle.digestImageTileSubtitle {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.8em;
    color: white !important;
    top: 136px;
    margin-left: -4px;
}

ion-card-title.digestTileTitle {
    font-size: 16px;
    font-weight: 500;
    color: white !important;
    top: 4px;
    margin-left: -4px;
}

ion-card-subtitle.digestTileSubtitle {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: white !important;
    top: 68px;
    margin-left: -4px;
}

ion-card-title.taskTileTitle {
    font-size: 18px !important;
    font-weight: 500;
    color: white !important;
    bottom: 8px;
    margin-left: -4px;
}

ion-card-subtitle.taskTileSubtitle {
    text-transform: none;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: white !important;
    top: 90px;
    margin-left: -4px;
}

ion-card-title.eventTileTitle {
    font-size: 28px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
}

ion-card-title.eventTileTitleMobile {
    font-size: 28px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-top: 16px;
}

ion-card-subtitle.eventTileSubtitle {
    text-transform: none;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-bottom: 55px;
}

ion-card-subtitle.eventTileSubtitleMobile {
    text-transform: none;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-top: -8px;
}

ion-card-subtitle.eventTilePeers {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: white !important;
    top: 125%;
}

ion-card-subtitle.eventTileDate {
    text-transform: none;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-bottom: -320px;
}

ion-card-title.peerTileTitle {
    font-size: 36px !important;
    color: white !important;
    margin-left: 8px;
}

ion-card-subtitle.peerTileSubtitle {
    text-transform: none;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-bottom: 60px;
}

ion-card-subtitle.peerTileSubSubtitle {
    text-transform: none;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-bottom: -300px;
}

ion-avatar.peerTileAvatar {
    position: absolute;
    top: -205px;
    right: 20px;
    width: 65px; 
    height: 65px;
}

ion-card-title.funnelTileTitle {
    font-size: 36px !important;
    color: white !important;
    margin-left: 8px;
}

ion-card-subtitle.funnelTileSubtitle {
    text-transform: none;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-bottom: 45px;
    line-height: 1.75em;
    width: 60%;
}

ion-card-subtitle.funnelTileSubSubtitle {
    text-transform: none;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-left: 8px;
    margin-bottom: -330px;
}

ion-avatar.funnelTileAvatar {
    position: absolute;
    top: -205px;
    right: 20px;
    width: 65px; 
    height: 65px;
}

ion-card-title.eventImageTitle {
    font-size: 28px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-top: 4px;
}

ion-card-subtitle.eventImageSubtitle {
    font-weight: 500 !important;
    color: white !important;
}

ion-card-subtitle.eventImageSubSubtitle {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: white !important;
    margin-bottom: -150px;
}

ion-card.mediaTile {
    border: 2.25px !important;
    border-style: solid !important;
    border-color: rgb(155, 155, 155) !important;
    background-size: cover;
}

ion-card.dayMediaTile {
    border: 2.25px !important;
    border-style: solid !important;
    border-color: rgb(155, 155, 155) !important;
    background-size: cover;
}

ion-card.tileMediaMissing {
    border: 0x !important;
    border-style: none !important;
}

ion-card.forecastToday {
    border: 2.5px !important;
    border-style: solid !important;
    border-color: white !important;
}

ion-card.forecastActive {
    border: 2.5px !important;
    border-style: solid !important;
    border-color: #36abe0 !important;
}

ion-avatar.userAvatar {
    background-color: rgb(45, 45, 45);
    border: 2.25px solid white !important;
}

ion-img {
    -webkit-user-drag: none; /* Prevents dragging the image */
    pointer-events: none; /* Disables interaction with the image */
}

ion-avatar.tinkerZeroAvatar {
    background-color: rgb(45, 45, 45);
    border: 2.25px !important;
    border-style: solid !important;
    border-color: #eb445a !important;
}

ion-avatar.tinkerUnoAvatar {
    background-color: rgb(45, 45, 45);
    border: 2.25px !important;
    border-style: solid !important;
    border-color: #3dc2ff !important;
}

ion-avatar.tinkerDosAvatar {
    background-color: rgb(45, 45, 45);
    border: 2.25px !important;
    border-style: solid !important;
    border-color: #ff4f00 !important;
}

ion-avatar.merchantAvatar {
    background-color: rgb(45, 45, 45);
    border: 2.25px !important;
    border-style: solid !important;
    border-color: #34e165 !important;
}

ion-avatar.pressAvatar {
    background-color: rgb(45, 45, 45);
    border: 2.25px !important;
    border-style: solid !important;
    border-color: #bf67ff !important;
}

ion-avatar.angelAvatar {
    background-color: rgb(45, 45, 45);
    border: 2.25px !important;
    border-style: solid !important;
    border-color: #ffc409 !important;
}

ion-list-header.listHeader {
    height: 60px;
}

ion-label.listHeader {
    margin-bottom: 16px;
}

ion-accordion::part(content) {
    background-color: #121212 !important;
}

.blur {
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: -99;
    -webkit-backdrop-filter: blur(1.25px);
    backdrop-filter: blur(1.25px);
    top: 0;
    left: 0;
    border-radius: 0;
}

.setupDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 45%;
    margin: 0 auto !important;
    margin-top: 2% !important;
    margin-bottom: -10px !important;
}

.signInDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 25%;
}

.idleDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 95%;
}

.logoDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 90%;
}

.joinAvatarDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding-top: 25px;
}

.addAvatarDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: -50px;
    margin-left: 200px;
    margin-bottom: 50px;
}

.profileAvatarDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 18%;
    margin: 0 auto !important;
    margin-top: 5% !important;
    margin-bottom: 10% !important;
}

.online-indicator {
    margin-left: 16px;
    width: 12px; /* Adjust the size as needed */
    height: 12px; /* Adjust the size as needed */
    background-color: #2dd36f;
    border-radius: 50%; /* Makes it a circle */
    animation: blink 1s infinite; /* Animation duration and repeat */
}

.online-indicator-span {
    display: inline-block;
    margin-left: 5px;
    /*margin-bottom: 2.5px;*/
    margin-bottom: calc(0.75%);
    width: 10px; /* Adjust the size as needed */
    height: 10px; /* Adjust the size as needed */
    background-color: #2dd36f;
    border-radius: 50%; /* Makes it a circle */
    animation: blink 1s infinite; /* Animation duration and repeat */
}

.recording-indicator-span {
    display: inline-block;
    margin-left: 5px;
    /*margin-bottom: 2.5px;*/
    margin-bottom: calc(0.75%);
    width: 10px; /* Adjust the size as needed */
    height: 10px; /* Adjust the size as needed */
    background-color: #ff3434;
    border-radius: 50%; /* Makes it a circle */
    animation: blink 1s infinite; /* Animation duration and repeat */
}

.funnel-indicator-span {
    display: inline-block;
    margin-left: 5px;
    /*margin-bottom: 2.5px;*/
    margin-bottom: calc(0.75%);
    width: 10px; /* Adjust the size as needed */
    height: 10px; /* Adjust the size as needed */
    background-color: #3dc2ff;
    border-radius: 50%; /* Makes it a circle */
    animation: blink 1s infinite; /* Animation duration and repeat */
}

@keyframes blink {
0%, 100% {
    opacity: 0; /* Invisible */
}
50% {
    opacity: 1; /* Visible */
}
}

.footerDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 4%;
    margin: 0 auto !important;
    margin-bottom: 32px !important;
    color: white;
}

.attrFooterDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 4%;
    margin: 0 auto !important;
    margin-bottom: 64px !important;
    color: white;
}

.tinyFooterDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 4%;
    margin: 0 auto !important;
    color: white;
}

.modalContentDiv {
    display: absolute;
    justify-content: left;
    align-content: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: -4px;
    line-height: 1.8em;
}

.digestContentDiv {
    display: absolute;
    justify-content: left;
    align-content: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 5%;
    line-height: 1.8em;
}

.digestButtonDiv {
    display: absolute;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.digestInnerDiv {
    display: absolute;
    margin-top: 48px;
    padding-bottom: 2%;
}

.supportContentDiv {
    display: absolute;
    justify-content: left;
    align-content: center;
    align-items: center;
    padding-top: 36px;
    padding-bottom: 5%;
    line-height: 1.8em;
}

.profileInnerDiv {
    display: absolute;
    margin-top: 24px;
    padding-bottom: 2%;
}

.subDiv {
    display: absolute;
    margin-top: -20%;
    padding-bottom: 10%;
}

.innerDiv {
    display: absolute;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom: 2%;
}

.contextDiv {
    display: absolute;
    margin-top: 40px;
    margin-left: 8px;
}

.peerAvatarsDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5%;
    width: 100%;
}

.centerButtonDiv {
    display: absolute;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.momentContentDiv {
    display: absolute;
    justify-content: left;
    align-content: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 16px;
    line-height: 1.5em;
}

.assistantContentDiv {
    display: absolute;
    justify-content: left;
    align-content: center;
    align-items: center;
}

.emptyElementsDiv {
    display: flex;
    justify-content: left;
    align-content: center;
    align-items: center;
    height: 75px;
    margin-left: 16px !important;
    padding-bottom: 5%;
}

.plusSubDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 75px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: -8px;
}

.menuSubDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 75px;
    margin-top: -16px;
    margin-bottom: 16px;
    margin-left: -8px;
}

.subscribeDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: 32px;
    margin-bottom: 32px;
}

.subSkipDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: -8px;
    margin-bottom: -8px !important;
}

.miscFooterDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: 13%;
    margin-bottom: 10%;
    margin-left: -16px;
}

.settingsFooterDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: -8px;
    margin-bottom: 32px;
}

.profileOptionsFooterDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: -16px;
}

.circleSubDiv {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-top: -4px;
    margin-bottom: 8px;
    margin-left: -8px;
}

.desktopDisplay {
    max-width: 600px; /* Adjust this value to your desired max width */
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto !important; /* Center the content */
}

.desktopDisplayIDExtend {
    max-width: 600px;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto;
}

.tabletDisplay {
    max-width: 600px; /* Adjust this value to your desired max width */
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 0 auto; /* Center the content */
}

.player {
    margin-top: 8px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.video {
    left: 0;
    top: 0;
    opacity: 1;
}

.bounce {
    animation: bounce 0.5s;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}


.wiggle {
    animation: wiggleAnimation 0.3s ease-in-out;
}

@keyframes wiggleAnimation {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}