/* Font Family */
/* Foregrounds */
/* Primary Color */
/* Secondary Color */
/* Background Secondary */
/* Error */
/* Success */
/* Warning */
/* Accent */
/* Preview color palette */
/* System color */
/* Cuemill Gradient */
/* Color Library */
/* Car profile Library */
/* Devices Color Library */
.dark-100 {
  background-color: #252525;
}

.newly-setup-dark-100 {
  border: 1px solid #252525;
}

.midnight-300 {
  background-color: #1C192F;
}

.newly-setup-midnight-300 {
  border: 1px solid #1C192F;
}

.midnight-200 {
  background-color: #47445B;
}

.newly-setup-midnight-200 {
  border: 1px solid #47445B;
}

.dark-300 {
  background-color: #838383;
}

.newly-setup-dark-300 {
  border: 1px solid #838383;
}

.dark-400 {
  background-color: #B4B4B4;
}

.newly-setup-dark-400 {
  border: 1px solid #B4B4B4;
}

.dark-500 {
  background-color: #F0F0F0;
}

.newly-setup-dark-500 {
  border: 1px solid #F0F0F0;
}

.sky-300 {
  background-color: #2191FB;
}

.newly-setup-sky-300 {
  border: 1px solid #2191FB;
}

.sky-200 {
  background-color: #61B2FE;
}

.newly-setup-sky-200 {
  border: 1px solid #61B2FE;
}

.sky-100 {
  background-color: #A7D1F9;
}

.newly-setup-sky-100 {
  border: 1px solid #A7D1F9;
}

.focus-300 {
  background-color: #05C0DC;
}

.newly-setup-focus-300 {
  border: 1px solid #05C0DC;
}

.focus-200 {
  background-color: #2DE1FC;
}

.newly-setup-focus-200 {
  border: 1px solid #2DE1FC;
}

.focus-100 {
  background-color: #9FF1FD;
}

.newly-setup-focus-100 {
  border: 1px solid #9FF1FD;
}

.purple-300 {
  background-color: #362D99;
}

.newly-setup-purple-300 {
  border: 1px solid #362D99;
}

.purple-200 {
  background-color: #6558F0;
}

.newly-setup-purple-200 {
  border: 1px solid #6558F0;
}

.purple-100 {
  background-color: #B3ACF8;
}

.newly-setup-purple-100 {
  border: 1px solid #B3ACF8;
}

.hot-300 {
  background-color: #F3207B;
}

.newly-setup-hot-300 {
  border: 1px solid #F3207B;
}

.hot-200 {
  background-color: #FF579F;
}

.newly-setup-hot-200 {
  border: 1px solid #FF579F;
}

.hot-100 {
  background-color: #FFAED1;
}

.newly-setup-hot-100 {
  border: 1px solid #FFAED1;
}

.orange-300 {
  background-color: #C95D20;
}

.newly-setup-orange-300 {
  border: 1px solid #C95D20;
}

.orange-200 {
  background-color: #EC7836;
}

.newly-setup-orange-200 {
  border: 1px solid #EC7836;
}

.orange-100 {
  background-color: #E8AE8E;
}

.newly-setup-orange-100 {
  border: 1px solid #E8AE8E;
}

.coral-300 {
  background-color: #EE6565;
}

.newly-setup-coral-300 {
  border: 1px solid #EE6565;
}

.coral-200 {
  background-color: #FF9797;
}

.newly-setup-coral-200 {
  border: 1px solid #FF9797;
}

.coral-100 {
  background-color: #FDCFCF;
}

.newly-setup-coral-100 {
  border: 1px solid #FDCFCF;
}

.skin-900 {
  background-color: #341508;
}

.newly-setup-skin-900 {
  border: 1px solid #341508;
}

.skin-700 {
  background-color: #813414;
}

.newly-setup-skin-700 {
  border: 1px solid #813414;
}

.skin-300 {
  background-color: #FBC5AE;
}

.newly-setup-skin-300 {
  border: 1px solid #FBC5AE;
}

.sunny-300 {
  background-color: #FFD000;
}

.newly-setup-sunny-300 {
  border: 1px solid #FFD000;
}

.sunny-200 {
  background-color: #FFEA24;
}

.newly-setup-sunny-200 {
  border: 1px solid #FFEA24;
}

.sunny-100 {
  background-color: #FEF8C2;
}

.newly-setup-sunny-100 {
  border: 1px solid #FEF8C2;
}

.olive-300 {
  background-color: #59872A;
}

.newly-setup-olive-300 {
  border: 1px solid #59872A;
}

.olive-200 {
  background-color: #98B672;
}

.newly-setup-olive-200 {
  border: 1px solid #98B672;
}

.olive-100 {
  background-color: #CCDAB6;
}

.newly-setup-olive-100 {
  border: 1px solid #CCDAB6;
}

.pista-300 {
  background-color: #7FC791;
}

.newly-setup-pista-300 {
  border: 1px solid #7FC791;
}

.pista-200 {
  background-color: #C1EDCC;
}

.newly-setup-pista-200 {
  border: 1px solid #C1EDCC;
}

.pista-100 {
  background-color: #EAFBEE;
}

.newly-setup-pista-100 {
  border: 1px solid #EAFBEE;
}

.pistachio {
  background-color: #C1EDCC;
}

.newly-setup-pistachio {
  border: 1px solid #C1EDCC;
}

.citrus-yellow {
  background-color: #FFF275;
}

.newly-setup-citrus-yellow {
  border: 1px solid #FFF275;
}

.focus-blue {
  background-color: #2DE1FC;
}

.newly-setup-focus-blue {
  border: 1px solid #2DE1FC;
}

.brand-blue-1 {
  background-color: #6558F0;
}

.newly-setup-brand-blue-1 {
  border: 1px solid #6558F0;
}

.brand-blue-2 {
  background-color: #493FB3;
}

.newly-setup-brand-blue-2 {
  border: 1px solid #493FB3;
}

.lilac {
  background-color: #E7BBE3;
}

.newly-setup-lilac {
  border: 1px solid #E7BBE3;
}

.success-green {
  background-color: #0E8136;
}

.newly-setup-success-green {
  border: 1px solid #0E8136;
}

.violet {
  background-color: #B837B1;
}

.newly-setup-violet {
  border: 1px solid #B837B1;
}

.hot-pink {
  background-color: #FF579F;
}

.newly-setup-hot-pink {
  border: 1px solid #FF579F;
}

.dark-brown {
  background-color: #562B21;
}

.newly-setup-dark-brown {
  border: 1px solid #562B21;
}

.brand-orange {
  background-color: #EC7836;
}

.newly-setup-brand-orange {
  border: 1px solid #EC7836;
}

.tangerine {
  background-color: #F19C79;
}

.newly-setup-tangerine {
  border: 1px solid #F19C79;
}

.gold {
  background-color: #FFD000;
}

.newly-setup-gold {
  border: 1px solid #FFD000;
}

.pearl-white {
  background: #F5F5F5;
}

.solid-black {
  background: #1C1B1B;
}

.estoril-blue {
  background: #3A6EA5;
}

.melbourne-red {
  background: #B40B28;
}

.blu-tour-de-france {
  background: #3A527A;
}

.verde-ithaca {
  background: #A8C539;
}

.arancio-borealis {
  background: #FF5A00;
}

.chalk {
  background: #D7D1C7;
}

.gradient-one {
  background: linear-gradient(to top, #e89bb2, #274171) !important;
}

.gradient-two {
  background: linear-gradient(to bottom right, #ff5f6d, #ffc371) !important;
}

.gradient-three {
  background: linear-gradient(to bottom right, #343A40, #A8C539) !important;
}

.gradient-four {
  background: linear-gradient(to top, #5B5D9E, #274171) !important;
}

@font-face {
  font-family: "Sora";
  src: url("/static/fonts/sora-variablefont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  color: #252525;
}
@font-face {
  font-family: "Indie Flower";
  src: url("/static/fonts/indieflower-regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  color: #252525;
}
body.no-scroll {
  overflow: hidden !important;
}

body.sheet-fullscreen {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-variablefont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  color: #252525;
}
/* Shader Overlay (Word Hunt intro) */
.shader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: fadeIn 200ms ease-out both;
}

.shader-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent !important;
  mix-blend-mode: screen; /* lighten over underlying UI */
  opacity: 1;
  will-change: opacity, transform;
}

.shader-overlay-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 12px 16px;
  animation: fadeInUp 500ms ease both;
}

.shader-overlay-content .overlay-title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.shader-overlay-content .overlay-subtitle {
  opacity: 1;
  margin-top: 4px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* no diagonal sweep mask */
input::placeholder, textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #838383 !important;
  opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #838383 !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #838383 !important;
}

img {
  -webkit-user-drag: none;
}

/* For Capacitor App */
.app-navbar-notch {
  margin-top: 40px;
}

#app-tutorial-section #left-cta-container {
  width: 100%;
}
#app-tutorial-section .tutorial-text-bottom {
  word-break: keep-all;
}

.full-width-input {
  padding: 13px 20px;
  border-radius: 4px;
  border: 1px solid #F2F2F2;
  width: 100%;
}

a:focus {
  outline: none;
  text-decoration: none;
}

a:active, a:focus, a:hover {
  text-decoration: none;
  outline: none;
}

input:focus {
  outline: none;
  text-decoration: none;
}

body {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  height: 100%;
  position: relative;
}

/* CSS variables for frame-perfect keyboard animations */
:root {
  --keyboard-height: 0px;
  --keyboard-transition: 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Safe Area Container - Opt-in wrapper for pages needing safe area support */
.safe-area-container {
  height: 100vh;
  height: 100svh; /* Use small viewport height for better mobile support */
  /* Apply safe area padding only to top - footer will handle bottom - only in Capacitor apps */
  /* Frame-perfect keyboard animations */
  transition: height var(--keyboard-transition);
  /* When keyboard is visible, reduce height instead of transform */
  /* Android with adjustResize: WebView is already resized by the system */
  /* Don't apply keyboard height reduction as it causes double adjustment */
  /* Keep original positioning context - no flexbox that disrupts sticky/absolute */
  position: relative;
  /* Only apply overflow hidden when keyboard is visible to prevent clipping */
  /* Ensure proper box-sizing for height calculations */
  box-sizing: border-box;
}
[data-capacitor=true] .safe-area-container {
  padding-top: env(safe-area-inset-top, var(--capacitor-safe-top, 0px));
}
[data-ios=true] body.keyboard-visible .safe-area-container {
  height: calc(100svh - var(--keyboard-height));
}
[data-android=true] body.keyboard-visible .safe-area-container {
  height: 100vh !important; /* Use viewport height, not percentage */
}
body.keyboard-visible .safe-area-container {
  overflow: hidden;
}

/* Android-specific safe area handling using safe-area-container pattern like iOS */
[data-android=true] .body {
  overflow-y: clip !important;
}

[data-android=true] .safe-area-container {
  /* Prevent body from scrolling on Android */
  overflow: hidden;
}

/* Android-specific padding for account-settings page */
.android-account-settings-padding {
  padding-top: 20px !important;
}

/* Force absolute positioning for navigation footer on Android to prevent scroll issues */
[data-android=true] .navigation-footer-v2 {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Safe area utilities for specific scenarios - only in Capacitor apps */
[data-capacitor=true] .safe-area-top-only {
  padding-top: env(safe-area-inset-top, var(--capacitor-safe-top, 0px));
}

[data-capacitor=true] .safe-area-bottom-only {
  padding-bottom: env(safe-area-inset-bottom, var(--capacitor-safe-bottom, 0px));
}

/* Ensure navigation footer works correctly with safe areas and keyboard */
.navigation-footer,
.navigation-footer-v2 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Default padding for web */
  padding-bottom: 30px;
  /* Add safe area bottom padding to the navigation footer - only in Capacitor apps */
  /* Frame-perfect keyboard animations */
  transition: transform var(--keyboard-transition);
  /* Extend background downward to cover any gaps during animation */
  /* Navigation naturally moves with container resize - no transform needed */
  /* Removed transform to prevent double movement issue */
  /* body.keyboard-visible & {
      transform: translateY(calc(var(--keyboard-height) * -1));
  } */
}
[data-capacitor=true] .navigation-footer,
[data-capacitor=true] .navigation-footer-v2 {
  padding-bottom: calc(30px + env(safe-area-inset-bottom, var(--capacitor-safe-bottom, 0px)));
}
.navigation-footer::after,
.navigation-footer-v2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 500px; /* Extend well below viewport */
  background: inherit;
  z-index: -1;
}

/* When nav is a direct child of hybrid-main-section, make it a flex item
   so the content area shrinks naturally instead of being overlapped */
.hybrid-main-section > .navigation-footer-v2,
.hybrid-main-section > .navigation-footer {
  position: relative !important;
  flex-shrink: 0;
  margin-top: auto;
}

/* Special handling for keyboard visibility */
body.keyboard-visible {
  /* Move fixed bottom elements (chat input) above keyboard on chat page */
  /* Ensure navigation stays above keyboard on pages that have navigation */
  /* Direct-child navigation already rides the shrunken safe-area container. */
  /* Override keyboard transforms for Android - body height handles keyboard space */
  /* Precise chat container layout for keyboard */
  /* Pixel-perfect chat history container - no overlap with input */
  /* Fix chat input positioning */
}
body.keyboard-visible .fixed-bottom {
  transform: translateY(calc(var(--keyboard-height) * -1));
  transition: transform var(--keyboard-transition);
}
body.keyboard-visible .navigation-footer,
body.keyboard-visible .navigation-footer-v2 {
  transform: translateY(calc(var(--keyboard-height) * -1));
  padding-bottom: 1px !important;
}
[data-ios=true] body.keyboard-visible .hybrid-main-section > .navigation-footer,
[data-ios=true] body.keyboard-visible .hybrid-main-section > .navigation-footer-v2 {
  transform: none !important;
}
[data-android=true] body.keyboard-visible .navigation-footer,
[data-android=true] body.keyboard-visible .navigation-footer-v2 {
  transform: none !important;
  padding-bottom: 0 !important;
}
body.keyboard-visible .chat-container {
  /* Use flexbox for proper layout */
  display: flex;
  flex-direction: column;
  /* Set exact container height accounting for keyboard */
  height: calc(100vh - var(--keyboard-height));
  transition: height var(--keyboard-transition);
  /* Remove padding to prevent double spacing */
  padding-bottom: 0;
}
body.keyboard-visible .chat-container .chat-history-container {
  /* Let it flex but set precise boundaries */
  flex: 1;
  min-height: 0; /* Critical for flexbox to allow shrinking */
  /* Exact height calculation for edge-to-edge layout:
     - viewport - keyboard - header(80px) - input(70px) = 150px total
     - No extra gap needed, the containers should be edge-to-edge */
  max-height: calc(100vh - var(--keyboard-height) - 180px) !important;
  height: calc(100vh - var(--keyboard-height) - 180px) !important;
  /* KEEP column-reverse for proper message ordering */
  flex-direction: column-reverse;
  /* Ensure scrolling works properly */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  /* Remove bottom padding to ensure edge-to-edge */
  padding-bottom: 20px !important;
  /* Smooth height transition */
  transition: height var(--keyboard-transition), max-height var(--keyboard-transition);
  /* Remove padding from inner content to ensure edge-to-edge */
}
body.keyboard-visible .chat-container .chat-history-container .chat-section-flex {
  padding-bottom: 0 !important;
}
body.keyboard-visible .chat-container .new-message-container {
  position: fixed;
  bottom: var(--keyboard-height);
  left: 0;
  right: 0;
  z-index: 1001;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Visual separation */
  transition: bottom var(--keyboard-transition);
}

.safe-area-container .web-chats-body {
  /* Chats page specific adjustments - default for web */
  height: calc(100svh - 150px);
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container .web-chats-body {
  height: calc(100svh - 150px - env(safe-area-inset-top, var(--capacitor-safe-top, 0px)));
}

/* Splash screen adjustments */
.safe-area-container .splash-screen {
  /* Splash screen should use full available height - default for web */
  min-height: 100svh;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container .splash-screen {
  min-height: calc(100svh - env(safe-area-inset-top, var(--capacitor-safe-top, 0px)));
}

/* Account settings page adjustments */
.safe-area-container #account-settings-container {
  height: calc(100% - 80px);
}

[data-android=true] .safe-area-container #account-settings-container {
  height: calc(100% - 60px);
}

/* Notifications page adjustments */
.safe-area-container .notification-container {
  /* Notifications container - default for web */
  height: calc(100svh - 220px);
  /* Safe area adjustments only in Capacitor apps */
  /* Android adjustments using injected variables */
}
[data-capacitor=true] .safe-area-container .notification-container {
  height: calc(100svh - 220px - env(safe-area-inset-top, var(--capacitor-safe-top, 0px)));
}

.safe-area-container .notification-container-min {
  /* Notifications container minimal - default for web */
  height: calc(100svh - 180px);
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container .notification-container-min {
  height: calc(100svh - 180px - env(safe-area-inset-top, var(--capacitor-safe-top, 0px)));
}

.safe-area-container #notification-list-container {
  /* Main notifications list wrapper - default for web */
  height: 100%;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container #notification-list-container {
  height: calc(100% - env(safe-area-inset-top, var(--capacitor-safe-top, 0px)));
}

/* Point summary page adjustments */
.safe-area-container .summary-container {
  /* Point summary container - default for web */
  height: calc(100svh - 185px);
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container .summary-container {
  height: calc(100svh - 185px - env(safe-area-inset-top, var(--capacitor-safe-top, 0px)));
}

.safe-area-container .android-point-summary-height {
  /* Android-specific point summary height - default for web */
  height: calc(100svh - 168px) !important;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container .android-point-summary-height {
  height: calc(100svh - 230px) !important;
}

/* Calls new page adjustments */
.safe-area-container .profile-section-accordion {
  /* Profile section accordion in calls-new - default for web */
  height: calc(100svh - 170px);
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container .profile-section-accordion {
  height: calc(100svh - 170px - env(safe-area-inset-top, var(--capacitor-safe-top, 0px)));
}

header {
  background: #FFFFFF;
}

h1 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 0;
}

button {
  border: none;
  background-color: transparent;
}

h2 {
  margin-bottom: 0;
}

label {
  margin-bottom: 0;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1.5px solid #F0F0F0;
  height: 3px;
}

@keyframes delayed-activation-loading {
  from {
    stroke-dashoffset: 251.2;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.delayed-activation-timer-round {
  position: absolute;
  right: 20px;
  bottom: 8rem;
  z-index: 100;
}
.delayed-activation-timer-round #loader {
  stroke-dashoffset: 251.2;
  stroke-dasharray: 251.2;
}
.delayed-activation-timer-round .timer {
  position: relative;
}
.delayed-activation-timer-round .countdown {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 40%);
  color: white;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.no-gap {
  gap: 0px !important;
}

.animated-banner-wrapper {
  width: 100%;
  position: absolute;
  left: 0;
  min-height: 50px;
  height: auto;
  padding: 5px;
  z-index: 6000;
}
.animated-banner-wrapper .inner-content {
  position: relative;
  width: 100%;
}
.animated-banner-wrapper .inner-content .content {
  position: absolute;
  padding: 14px 12px;
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-between;
  align-items: center;
  left: 0;
  top: 0;
}
.animated-banner-wrapper .inner-content .content .cta-container {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 8px;
}
.animated-banner-wrapper span {
  color: white;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.animated-banner-wrapper #rect-loader, .animated-banner-wrapper #wordhunt-rect-loader {
  stroke-dasharray: 443 443;
  stroke-dashoffset: 886;
  animation: delayed-session-activation-loading 5s linear infinite;
}
.animated-banner-wrapper #background, .animated-banner-wrapper #wordhunt-background {
  fill: rgba(37, 37, 37, 0.96);
}
@keyframes delayed-session-activation-loading {
  0% {
    stroke-dashoffset: 886;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Word Hunt banner letters UI (mirrors hint-word-wrapper spacing) */
#word-hunt-banner {
  min-height: 50px;
  height: auto;
}
#word-hunt-banner .inner-content .content {
  flex-direction: column;
  gap: 8px;
}
#word-hunt-banner .wordhunt-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#word-hunt-banner #wordhunt-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}
#word-hunt-banner #wordhunt-letters .hint-word-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#word-hunt-banner #wordhunt-letters .hint-space {
  display: inline-flex;
  align-items: center;
  flex: 0 0 16px;
  width: 16px;
}
#word-hunt-banner #wordhunt-letters .wordhunt-letter-input,
#word-hunt-banner #wordhunt-letters .prefilled-letter {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  text-align: center;
  border-radius: 6px;
}
#word-hunt-banner #wordhunt-letters .wordhunt-letter-input {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
#word-hunt-banner #wordhunt-letters .wordhunt-letter-input:focus {
  border: 1px solid #6558F0;
  box-shadow: 0 0 0 2px rgba(101, 88, 240, 0.2);
  outline: none;
}
#word-hunt-banner #wordhunt-letters .wordhunt-letter-input.error {
  color: #CB2648;
}
#word-hunt-banner #wordhunt-letters .wordhunt-letter-input.active, #word-hunt-banner #wordhunt-letters .wordhunt-letter-input[aria-selected=true] {
  border: 1px solid #6558F0;
  box-shadow: 0 0 0 2px rgba(101, 88, 240, 0.2);
  outline: none;
}
#word-hunt-banner #wordhunt-letters .prefilled-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  max-width: 24px;
  min-width: 24px;
}
#word-hunt-banner #wordhunt-letters .wordhunt-answer-text {
  color: white;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
  display: inline-block;
}
#word-hunt-banner .wordhunt-riddle {
  color: white;
  opacity: 0.9;
  font-size: 14px;
  line-height: 18px;
  margin-top: 6px;
  width: 100%;
}
#word-hunt-banner .wordhunt-success-message {
  color: white;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin-top: 8px;
}

.clear-history {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
  color: #595959;
  white-space: nowrap;
}

.skeleton-loader {
  background-image: linear-gradient(90deg, #F9F9F9 0px, white 40px, #F9F9F9 80px);
  background-size: 200vw;
  animation: shine-lines 2s infinite linear;
}
@keyframes shine-lines {
  0% {
    background-position: -100vw;
  }
  100% {
    background-position: 100vw;
  }
}

/* Google places api */
.pac-container:after {
  background-image: none !important;
  height: auto;
}

.pac-target-input:focus {
  outline: none !important;
  border: 1px solid #838383 !important;
}

.pac-container {
  height: 150px;
  overflow: hidden;
  background-color: #FFF;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  z-index: 5000;
}

.pac-container > .pac-item:first-of-type {
  border-top: initial;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  .pac-container {
    height: 150px;
    overflow: hidden;
  }
  .pac-item {
    padding: 14px 20px;
    border-bottom: 1px solid #F2F2F2;
    height: 50px;
  }
  .pac-item span {
    color: #838383;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }
}
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.pac-item {
  padding: 14px 20px;
  height: 50px;
  line-height: 22px;
}
.pac-item span {
  color: #838383;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.disabled-anchor {
  pointer-events: none;
}

.pac-icon {
  display: none;
}

.container-fluid {
  height: 100%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 20px;
  position: relative;
}

.extra-bottom-padding {
  padding-bottom: 20px;
}

/* Reusable Button Styling */
#navbarbuttonA, #back-button, #close-icon, #group-member-expanded {
  cursor: pointer;
}

.primary-button {
  width: 100%;
  padding: 12px 32px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Buttons/Primary - Action */
  background-color: #5973F8;
  border-style: none;
  border-radius: 48px;
  height: 48px;
  color: white;
  /* Font */
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}
.primary-button span {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  text-align: center;
  text-decoration: none;
  color: white !important;
}

.deactivated-cursor {
  pointer-events: none;
}

.primary-button-disabled {
  background-color: #9EAAF6;
  width: 100%;
  border-radius: 48px;
  height: 48px;
  color: #F2F2F2;
  border: none;
  padding: 12px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  text-align: center;
  text-decoration: none;
  color: white !important;
}
.primary-button-disabled span {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  text-align: center;
  text-decoration: none;
  color: white !important;
}

.primary-button:hover {
  background-color: #4A67F7;
}

.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 32px;
  gap: 10px;
  height: 48px;
  text-decoration: none;
  /* Secondary buttons/Default | Black */
  background-color: #F2F2F2;
  border-style: none;
  border-radius: 48px;
  color: #595959;
  /* Font size */
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.secondary-button label {
  margin-bottom: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.secondary-button span {
  color: #595959 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  text-align: center;
  text-decoration: none;
}

.secondary-button-disabled {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 48px;
  background-color: #F8F8F8 !important;
  border-style: none;
  border-radius: 48px;
  color: #CCCCCC;
  /* Font size */
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.secondary-button-disabled span {
  color: #CCCCCC;
}

.cuemill-button {
  width: 100%;
  padding: 12px 32px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Buttons/Primary - Action */
  background: linear-gradient(269.59deg, #5973F8 -40.09%, #FF8C4B 100%);
  border-style: none;
  border-radius: 48px;
  height: 48px;
  color: black;
  /* Font */
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
}

.tertiary-button {
  display: flex;
  width: 100%;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 48px;
  border: 1px solid #F2F2F2;
  background: #FFF;
}
.tertiary-button span {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #595959;
}

.toggle-element {
  display: flex;
  margin-top: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
  justify-content: space-between;
}
.toggle-element .toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.line-break {
  margin-top: 14px;
}

.warning-button {
  width: 100%;
  padding: 13px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Buttons/Primary - Action */
  background-color: #CE2D4F;
  border-style: none;
  border-radius: 48px;
  height: 48px;
  color: white;
  /* Font */
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
}
.warning-button img {
  color: white;
}

.warning-button-disabled {
  width: 100%;
  padding: 13px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Buttons/Primary - Action */
  background-color: #E28195;
  border-style: none;
  border-radius: 48px;
  height: 48px;
  color: white;
  /* Font */
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
}
.warning-button-disabled img {
  color: white;
}

.search-button {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: #F2F2F2;
}

.activation-button {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  margin: 0 auto;
}

#location-settings-container .settings-container, #notification-settings-container .settings-container {
  padding-left: 0px;
  padding-right: 0px;
}

.individual-button:disabled svg path {
  fill: #FFFFFF;
  stroke: #CCCCCC;
}
.individual-button:disabled svg rect {
  stroke: #CCCCCC;
}

.contact-button-cta:disabled span {
  color: #F2F2F2 !important;
}

.search-button-inactive {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: #F8F8F8;
}

.inactive-text {
  color: #CCCCCC;
}

.button-icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Trix Redesign */
fieldset {
  width: 100%;
}

.trix-input-container {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}

trix-toolbar {
  display: flex;
  align-items: center;
}

.trix-button-group--text-tools,
.trix-button-group--block-tools,
.trix-button-group--history-tools,
.trix-dialogs {
  display: none !important;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0 !important;
}

#chat-trix {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 40px;
  font-size: 16px;
  border: 1px solid #F2F2F2 !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  max-height: 138px !important;
  padding: 13px 20px !important;
  touch-action: manipulation;
}

#chat-trix:focus {
  border: 1px solid #838383 !important;
}

#chat-trix::placeholder {
  font-size: 14px;
  color: #838383;
  font-weight: 400;
  line-height: 22px;
}

.trix-button--icon {
  width: 32px !important;
  height: 32px !important;
}

.trix-button--icon-attach::before {
  background-image: url("/images/assets/camera.png") !important;
  background-size: 32px 32px !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.match-custom-chat-background {
  background-image: url("/images/assets/chat-bubbles-1.png") !important;
  top: 0;
  left: 0;
  background-size: contain;
  background-repeat: repeat;
}

.match-custom-chat-full {
  height: 100% !important;
}

.trix-button-group {
  border: none !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  column-gap: 4px;
  align-items: center;
}

.trix-button-group--file-tools {
  padding-left: 8px;
}

.trix-button {
  border-bottom: 0 !important;
}

#send-button, #forward-message-button {
  padding-right: 0;
}
#send-button img, #forward-message-button img {
  width: 32px !important;
  height: 32px !important;
}

.contact-detail-chip-container {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
.contact-detail-chip-container .chip-button span {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: black;
}
.contact-detail-chip-container .chip-selected {
  background-color: #5973F8;
}
.contact-detail-chip-container .chip-selected span {
  color: white !important;
}

#invite-new-looper .header-profile img, #invite-new-looper .header-profile .skeleton-loader {
  width: 100%;
  max-width: 100%;
  height: 359px;
  border-radius: initial;
}

.header-profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 6px;
}
.header-profile img, .header-profile .skeleton-loader {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: fill;
  aspect-ratio: 1/1;
}
.header-profile .scale-down {
  object-fit: scale-down;
  background-color: black;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.chip-button {
  display: flex;
  width: 100%;
  height: auto;
  padding: 9px 20px;
  align-items: center;
  border-radius: 40px;
  border: 1px solid #F2F2F2;
  justify-content: center;
}
.chip-button #share-text {
  color: #252525;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.chip-selected {
  border: 1px solid #5973F8;
}

.round-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loop-alert-section .round-button svg {
  flex-shrink: 0;
}
#loop-alert-section [data-ios=true] .cta-section {
  padding-bottom: 40px;
}

.round-button-secondary {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F2F2F2;
}

.blue-button {
  background-color: #5973F8;
}

.secondary-background {
  background-color: #F2F2F2;
}

.right-aligned {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.right-aligned button {
  display: flex;
  border-radius: 50%;
  background-color: #F2F2F2;
  padding: 8px;
  flex-shrink: 0;
}

.right-margin {
  margin-right: 20px;
}

/* Media Preview */
/* Header */
.header-text {
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
  color: black;
  text-align: left;
}

.header-body {
  margin-top: 20px;
}

/* Form Validation */
.extra-vertical-padding {
  padding-bottom: 40px;
  padding-top: 30px;
}

#profile-section .form-body label {
  font-size: 14px;
}

.form-body {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.form-body .form-label-with-tooltip {
  display: flex;
  gap: 8px;
}
.form-body label {
  color: #838383;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}
.form-body input, .form-body button {
  border: 1px solid #F2F2F2;
  border-radius: 4px;
  height: 48px;
  padding: 13px 20px;
  outline: none;
  width: 100%;
}
.form-body input:focus, .form-body button:focus {
  border: 1px solid #838383;
}
.form-body button {
  background-color: white;
}

.form-label-header {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.form-label-header span {
  color: #838383;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

/*  ## System Feedback ## 
    - Success
    - Error
    - Info
    - System Modal
*/
.feedback-container {
  display: flex;
  margin-top: 8px;
  gap: 4px;
}
.feedback-container img {
  width: 20px;
  height: 20px;
}
.feedback-container span {
  margin: auto 0;
  font-size: 12px;
  font-weight: 400;
}

.truncate-container {
  display: flex;
  position: relative;
  min-width: 0;
}
.truncate-container .truncate-wrapper {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
}
.truncate-container .truncate-modal-stem {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  top: 100%;
  left: 50%;
  z-index: 50;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}
.truncate-container .truncate-modal {
  position: absolute;
  display: none;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: fit-content;
  width: 100%;
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 50;
  background-color: black;
  color: white;
}

.info-container {
  display: inline-flex;
  position: relative;
  padding-bottom: 2.5px;
}
.info-container .info-wrapper:hover .info-modal {
  display: block;
}
.info-container .info-wrapper:hover .info-modal-stem {
  display: block;
}
.info-container .info-wrapper svg {
  min-width: 10px;
  min-height: 10px;
}
.info-container img {
  vertical-align: text-top;
  width: 16px;
  height: 16px;
}
.info-container .info-modal-stem {
  position: absolute;
  display: none;
  width: 0;
  height: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}
.info-container .info-modal {
  position: absolute;
  display: none;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: 300px;
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 50;
  background-color: black;
  color: white;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-height: none;
  overflow: visible;
}
.info-container .info-modal span {
  color: white !important;
  display: inline;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}
.info-container .info-modal ul {
  white-space: normal;
}
.info-container .info-modal ul li {
  white-space: normal;
  word-wrap: break-word;
}

.image-carousel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100svw;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 5001;
  overflow: hidden;
}
.image-carousel .carousel-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 40px;
  z-index: 12;
}
.image-carousel .carousel-header #image-position {
  color: #FFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.image-carousel .carousel-header #close-carousel {
  cursor: pointer;
}
.image-carousel .carousel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-carousel .carousel .active {
  height: 100svh;
}
.image-carousel .carousel #carousel-image {
  position: absolute;
  top: 50%;
  width: 100%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.image-carousel .carousel.pointer-event {
  touch-action: pan-y pinch-zoom;
}
.image-carousel .carousel-item {
  overflow: hidden;
  width: 100%;
  position: relative;
  transition-duration: 0.3s;
}
.image-carousel .carousel-item img {
  width: auto;
  object-fit: scale-down;
  max-height: 600px;
  z-index: 10;
}
.image-carousel .carousel-item iframe {
  width: 100%;
  aspect-ratio: 16/9;
  z-index: 10;
}
.image-carousel .overlay {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100vh;
}
.image-carousel .carousel-inner {
  margin-bottom: 64px;
}
.image-carousel #carouselNextButton {
  background-color: transparent;
}

.hyb-status-body {
  position: absolute !important;
  top: 10px !important;
}
[data-capacitor=true] .hyb-status-body {
  top: max(10px, env(safe-area-inset-top, 10px)) !important;
}

.status-body, .hyb-status-body {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  position: fixed;
  top: 10px;
  left: 0;
  width: 100%;
  z-index: 8000;
}
.status-body .status-message-container, .hyb-status-body .status-message-container {
  padding: 8px 20px;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  justify-content: flex-start;
}
.status-body .status-message-container svg, .hyb-status-body .status-message-container svg {
  min-width: 24px;
  min-height: 24px;
}
.status-body .status-message-container .modal-icon, .hyb-status-body .status-message-container .modal-icon {
  width: 24px;
  height: 24px;
}
.status-body .status-message-container span, .hyb-status-body .status-message-container span {
  padding-left: 8px;
  padding-right: 8px;
  align-self: center;
}
.status-body .status-message-container .truncate-session-message, .hyb-status-body .status-message-container .truncate-session-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-body .status-message-container .close-icon, .hyb-status-body .status-message-container .close-icon {
  width: 20px;
  height: 20px;
}
.status-body .status-message-container .profile-photo, .hyb-status-body .status-message-container .profile-photo {
  object-fit: cover;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  align-self: center;
}
.status-body .status-message-container .cta-container, .hyb-status-body .status-message-container .cta-container {
  margin-left: auto;
  display: flex;
  gap: 16px;
}
.status-body .status-message-container .cta-container button, .hyb-status-body .status-message-container .cta-container button {
  padding: 6px;
  border-radius: 48px;
  border: 1px solid #F2F2F2;
  background: #FFF;
}
.status-body .status-message-container .button-close, .hyb-status-body .status-message-container .button-close {
  display: flex;
  padding: 0;
  margin-left: auto;
}
.status-body .status-message-container .button-text, .hyb-status-body .status-message-container .button-text {
  width: 64px;
  height: 32px;
  background-color: white;
  border: 1px solid #F2F2F2;
  border-radius: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
}
.status-body .success-toast, .hyb-status-body .success-toast {
  background-color: #14B64D;
}
.status-body .fail-toast, .hyb-status-body .fail-toast {
  background-color: #CE2D4F;
}
.status-body .fail-toast a, .hyb-status-body .fail-toast a {
  color: #fff;
  text-decoration: underline;
}
.status-body .info-toast, .hyb-status-body .info-toast {
  background: linear-gradient(269.59deg, #5973F8 -40.09%, #FF8C4B 100%);
}
.status-body .warning-toast, .hyb-status-body .warning-toast {
  background-color: #FEE440;
}
.status-body .warning-toast strong, .hyb-status-body .warning-toast strong {
  line-height: 2;
}
.status-body .text-primary-button, .hyb-status-body .text-primary-button {
  color: #5973F8;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}

.text-primary-button {
  color: #5973F8;
  font-size: 14px !important;
  line-height: 18px !important;
}

.left-align {
  padding: 0;
  margin-left: auto;
}

.blur-background {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 6499;
}

#typing-container {
  display: inline;
  word-break: keep-all;
  overflow: hidden;
}

.flex-h {
  display: flex;
  align-items: center;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

.margin-left {
  margin-left: auto;
}

button {
  padding: 0;
}

.margin-top-10 {
  margin-top: 10px;
}

.popup-modal, .popup-modal-v2 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 500px;
  transform: translate(-50%, -50%);
  /* Frame-perfect modal positioning with keyboard */
  transition: transform var(--keyboard-transition), max-height var(--keyboard-transition);
  /* When keyboard is visible, adjust modal position */
  background: white;
  z-index: 6500;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  font-family: "Inter";
}
body.keyboard-visible .popup-modal, body.keyboard-visible .popup-modal-v2 {
  /* Just shift up slightly, not the full keyboard height */
  transform: translate(-50%, calc(-50% - min(100px, var(--keyboard-height) * 0.2)));
  max-height: calc(100vh - var(--keyboard-height) - 100px);
  overflow-y: auto;
}
.popup-modal .small-indent, .popup-modal-v2 .small-indent {
  margin-top: -20px;
}
.popup-modal .note-footer, .popup-modal-v2 .note-footer {
  margin-top: 0px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.popup-modal .black-text, .popup-modal-v2 .black-text {
  color: #252525 !important;
}
.popup-modal .font-12, .popup-modal-v2 .font-12 {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.popup-modal .popup-modal-profile-container, .popup-modal-v2 .popup-modal-profile-container {
  display: flex;
  gap: 8px;
}
.popup-modal .popup-modal-profile-container img, .popup-modal-v2 .popup-modal-profile-container img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.popup-modal .popup-modal-profile-container span, .popup-modal-v2 .popup-modal-profile-container span {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.popup-modal .enter-confirm-container, .popup-modal-v2 .enter-confirm-container {
  gap: 8px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.popup-modal .enter-confirm-container h1, .popup-modal-v2 .enter-confirm-container h1 {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #838383;
}
.popup-modal .enter-confirm-container input, .popup-modal-v2 .enter-confirm-container input {
  border: 1px solid #F2F2F2;
  background: white;
  width: 100%;
  padding: 13px 20px;
  gap: 10px;
  border-radius: 4px;
}
.popup-modal textarea, .popup-modal-v2 textarea {
  max-height: 150px;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  gap: 8px;
  border-bottom: 1px solid #F2F2F2;
}
.popup-header div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.popup-header #profile-photo {
  border-radius: 50%;
}
.popup-header #connect-as-persona-container {
  gap: 8px;
}
.popup-header #connect-using-persona {
  font-size: 17px;
}
.popup-header .minimize-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.popup-header .minimize-popup-header span {
  font-size: 17px;
}
.popup-header .minimize-popup-header .span-15 {
  font-size: 15px;
}
.popup-header img {
  width: 24px;
  height: 24px;
  color: black;
}
.popup-header .trash-icon {
  fill: black;
}
.popup-header span {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
}
.popup-header button {
  border: none;
  background-color: transparent;
  padding: 0px;
}

.no-button-styling {
  padding: 0px !important;
  background-color: initial !important;
}

#confirm-cta svg {
  flex-shrink: 0;
}

.active-svg path {
  fill: #838383;
  stroke: white;
}
.active-svg ellipse {
  fill: white;
}
.active-svg rect {
  fill: #838383;
}

.inactive-svg path {
  stroke: #838383;
  fill: white;
}
.inactive-svg rect {
  stroke: #838383;
}

.gap-12 {
  gap: 12px;
}

.hidden {
  display: none !important;
}

.popup-modal-v2 .popup-header-grid {
  display: grid;
  grid-template-columns: fit-content(100%) auto fit-content(100%);
  width: 100%;
  padding: 16px;
  border-bottom: 0px;
  align-items: center;
  gap: 8px;
}
.popup-modal-v2 .popup-header-grid h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  white-space: break-spaces;
}
.popup-modal-v2 .popup-header-grid svg {
  flex-shrink: 0;
}
.popup-modal-v2 .popup-header-grid button {
  margin: 0;
  margin-left: auto;
  padding: 0;
}
.popup-modal-v2 .chip-container-36 {
  padding: 0px !important;
}
.popup-modal-v2 .password-input-container input {
  height: 40px;
}
.popup-modal-v2 .password-input-container .show-password {
  top: 11px !important;
}
.popup-modal-v2 .congrats-body {
  padding: 0px 16px 16px 16px;
  border-bottom: 0px;
  gap: 12px;
}
.popup-modal-v2 .primary-cta-button {
  padding: 16px;
}
.popup-modal-v2 .secondary-cta-button {
  padding: 0px 16px 16px 16px;
}
.popup-modal-v2 section {
  display: flex;
  flex-direction: column;
}
.popup-modal-v2 .add-new-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.popup-modal-v2 .add-new-container .add-new-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #838383;
  text-align: center;
  margin: 0;
}
.popup-modal-v2 .add-new-container .add-new-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.popup-modal-v2 .add-new-container .add-new-buttons .add-new-btn {
  width: 100%;
  padding: 12px 32px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #5973F8;
  border: none;
  border-radius: 48px;
  height: 48px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.popup-modal-v2 .add-new-container .add-new-buttons .add-new-btn:hover {
  background-color: #4A67F7;
}
.popup-modal-v2 .add-new-container .add-new-buttons .add-new-btn:active {
  background-color: #4A67F7;
}
.popup-modal-v2 .add-new-container .add-new-buttons .add-new-btn.secondary {
  background-color: #F2F2F2;
  color: #595959;
}
.popup-modal-v2 .add-new-container .add-new-buttons .add-new-btn.secondary:hover {
  background-color: #E2E2E2;
}
.popup-modal-v2 .add-new-container .add-new-buttons .add-new-btn.secondary:active {
  background-color: #E2E2E2;
}

.popup-header-grid {
  display: grid;
  grid-template-columns: fit-content(100%) auto fit-content(100%);
  width: 100%;
  padding: 18px 20px;
  border-bottom: 1px solid #F2F2F2;
  align-items: center;
  gap: 8px;
}
.popup-header-grid h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
}
.popup-header-grid svg {
  flex-shrink: 0;
}
.popup-header-grid button {
  margin: 0;
  margin-left: auto;
  padding: 0;
}

#report-connection-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#report-connection-container .result-element {
  display: flex;
  align-items: center;
  gap: 8px;
}
#report-connection-container .result-element .forward-check {
  margin-right: 0px;
}
#report-connection-container .result-element .profile-section span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.z-index-1 {
  z-index: 1;
}

.web-height {
  height: 100svh !important;
}

#my-permissions .settings-container, #virtual-group-new .settings-container {
  padding-bottom: 0px !important;
}
#my-permissions .accordion-expanded-no-margin > .expanded-element:first-of-type, #virtual-group-new .accordion-expanded-no-margin > .expanded-element:first-of-type {
  margin-top: 20px;
}

#expanded-chat-section > .expanded-element:first-of-type {
  margin-top: 20px;
}

.no-top-padding {
  padding-top: 0px !important;
}

.no-bottom-padding {
  padding-bottom: 0px !important;
}

.no-top-margin {
  margin-top: 0px !important;
}

.no-bottom-margin {
  margin-bottom: 0px !important;
}

.no-horizontal-padding {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#answer-as-container .info-modal, #contacts-new-container .info-modal {
  transform: translateX(-40%);
}

#suggested-for-you-container {
  padding-bottom: 10px;
}

.additional-report-container {
  display: flex;
  justify-content: space-between;
}
.additional-report-container .header-container {
  display: flex;
  gap: 8px;
  padding-bottom: 0px !important;
}
.additional-report-container .header-container span {
  color: #838383;
  font-weight: 400;
  line-height: 22px;
  font-size: 14px;
}
.additional-report-container span {
  color: #838383;
  font-weight: 400;
  line-height: 20px;
  font-size: 12px;
}

#post-report-container .header-container {
  padding-bottom: 0px;
}

#optional-text {
  color: #838383;
  font-weight: 400;
  line-height: 20px;
  font-size: 12px;
}

#report-group-congrats-body {
  align-items: initial;
}

#loop-config-section .congrats-body, .loop-config .congrats-body {
  align-items: initial;
}

#add-new-loop-radio-container .radio-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  align-items: center;
}
#add-new-loop-radio-container .radio-container img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
#add-new-loop-radio-container .radio-container label {
  margin-bottom: 0;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
#add-new-loop-radio-container .radio-container label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #000;
  background-color: white;
}

.radio-container img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.radio-container label {
  padding-left: 0;
}
.radio-container label::before {
  content: none;
}

.congrats-body {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #F2F2F2;
  padding: 20px;
  gap: 10px;
}
.congrats-body span {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}
.congrats-body input[type=radio]:before {
  width: 24px;
  height: 24px;
}
.congrats-body input[type=radio]:after {
  border-radius: 24px;
  border: 2px solid #F2F2F2;
}
.congrats-body .radio-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  align-items: center;
}
.congrats-body .radio-container label {
  margin-bottom: 0;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.congrats-body .radio-container label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #000;
  background-color: white;
}
.congrats-body .report-radio {
  display: none;
}
.congrats-body .report-radio:checked + label::before {
  background-color: #415FF5;
  border-color: #415FF5;
}
.congrats-body .report-radio:checked + label::after {
  content: "";
  position: absolute;
  top: 43%;
  left: 10px;
  transform: translate(-50%, -50%) rotate(311deg) scaleX(-1);
  width: 11px;
  height: 6px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
}
.congrats-body .radio-container-no-padding {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.congrats-body .radio-container-no-padding label {
  margin-bottom: 0;
}
.congrats-body .device-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.no-gutters {
  height: 100%;
}

.form-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.width-full {
  width: 100%;
}

#share-invitation-congrats-body {
  gap: 20px;
}

.congrats-body > .radio-container:last-child {
  padding-bottom: 0;
}

.modal-input-container {
  display: flex;
}
.modal-input-container input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #F2F2F2;
  padding: 13px 20px;
  border-radius: 4px;
}
.modal-input-container #report-reason-input {
  border: 1px solid #F2F2F2;
  width: 100%;
  border-radius: 4px;
  padding: 13px 20px;
  resize: none;
  outline: none;
}
.modal-input-container #report-reason-input::placeholder {
  display: flex;
  flex: 1;
}

.primary-cta-button {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

#button-inner-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

#navbar-back {
  cursor: pointer;
}

/* Onboarding Device Setup - New Accounts */
.onboarding-modal-header {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #252525 !important;
}

.onboarding-modal-body {
  font-size: 16px !important;
  color: #252525 !important;
}

.onboarding-btn {
  font-weight: bold !important;
}

.deactivated-color-label {
  color: #9EAAF6 !important;
}

/* Dropdown */
.dropdown-container {
  z-index: 100;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  position: absolute;
  width: 100%;
  transform: translateY(-100%);
  overflow: hidden;
  left: 0;
  top: -5px;
  max-height: 150px;
  overflow-y: auto;
}
.dropdown-container .prefill-entry {
  padding-left: 24px;
  color: #838383;
  border-bottom: 1px solid #F8F8F8;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
}
.dropdown-container .prefill-entry .profile-section {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-container .prefill-entry .suggested {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #CCCCCC;
}
.dropdown-container .prefill-entry img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.dropdown-container-bottom {
  z-index: 100;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  position: absolute;
  width: 100%;
  transform: translateY(100%);
  overflow: hidden;
  left: 0;
  bottom: -5px;
  max-height: 150px;
  overflow-y: auto;
}
.dropdown-container-bottom .prefill-entry {
  padding-left: 24px;
  color: #838383;
  border-bottom: 1px solid #F8F8F8;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
}
.dropdown-container-bottom .prefill-entry .profile-section {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-container-bottom .prefill-entry .suggested {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #CCCCCC;
}
.dropdown-container-bottom .prefill-entry img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.highlightText {
  color: #5973F8 !important;
  font-weight: 600 !important;
}

.search-container {
  display: flex;
  width: 100%;
  position: relative;
}
.search-container input {
  padding: 10px 50px 10px 20px;
  border-radius: 40px;
  border: 1px solid #F2F2F2;
  height: 48px;
  width: 100%;
}
.search-container svg {
  position: absolute;
}

.search-result-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.search-result-container .header {
  display: flex;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
  justify-content: space-between;
  align-items: center;
}
.search-result-container .header h1 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #252525;
}
.search-result-container .header span {
  color: #838383;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}
.search-result-container .result-element {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  margin-left: 30px;
  border-bottom: 1px solid #F2F2F2;
}
.search-result-container .result-element .profile-section {
  display: flex;
  gap: 8px;
  align-items: center;
}
.search-result-container .result-element .profile-section img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.search-result-container .result-element .profile-section span {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #252525;
}
.search-result-container .result-element .forward-check {
  margin-right: 0px;
}

.forward-check {
  display: flex;
  margin-right: 20px;
}
.forward-check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #F2F2F2;
  cursor: pointer;
}
.forward-check input[type=checkbox]:checked {
  background-image: url("/images/assets/tick.png");
  background-size: 100% 100%;
  background-color: #5973F8;
  border: none;
}
.forward-check input[type=checkbox]:disabled {
  background-color: #F8F8F8;
}
.forward-check label {
  line-height: 25px;
  margin-left: 8px;
  font-weight: 400;
}

.dropdown-button {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
  padding: 13px 20px;
}
.dropdown-button .placeholder-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 85%;
}
.dropdown-button .placeholder-container span {
  color: #838383;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dropdown-button .placeholder-container img {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.dropdown-button .placeholder-container .black-text {
  color: #252525 !important;
}
.dropdown-button .placeholder-container .secondary-text {
  color: #838383;
}
.dropdown-button .placeholder-container .deactivated-empty-text {
  color: #9EAAF6 !important;
}
.dropdown-button .placeholder-container .empty-text {
  color: #415FF5 !important;
}

.empty-dropdown-container {
  border: 1px solid #415FF5 !important;
}

.vertical-overflow {
  overflow-y: auto;
}

.empty-state-container {
  display: flex;
  height: calc(100% - 100px);
  justify-content: center;
  align-items: center;
}
.empty-state-container .empty-state-text {
  color: #595959;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.empty-state-web {
  height: calc(100svh - 100px) !important;
}

.deactivated-dropdown-button {
  background-color: #F8F8F8 !important;
}

#message-permission-dropdown .dropdown-container-bottom, #audio-call-permission-dropdown .dropdown-container-bottom, #video-call-permission-dropdown .dropdown-container-bottom {
  overflow-y: auto;
}

.half-dropdown-button {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #FFFFFF;
  border: none;
  gap: 8px;
  padding: 0;
  padding-left: 10px;
}
.half-dropdown-button .blue-text {
  color: #5973F8;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  text-transform: capitalize;
}
.half-dropdown-button .gray-text {
  color: #838383;
}
.half-dropdown-button .prefill-entry {
  justify-content: center;
}

.primary-button-text {
  color: #5973F8 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  cursor: pointer;
}

.warning-button-text {
  color: #CE2D4F !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  cursor: pointer;
}

#app-localization-dropdown {
  justify-content: end;
}
#app-localization-dropdown #dropdown-container {
  right: 0;
  left: auto;
  width: fit-content;
}

.primary-button-text-disabled {
  color: #9EAAF6;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  pointer-events: none;
}

.primary-button-text:disabled {
  color: #9EAAF6;
}

.dropdown-header-background {
  background-color: #F2F2F2;
}

.dropdown-header-bold {
  font-weight: 700 !important;
}

/* Password Validation */
.password-element {
  display: flex;
  flex-direction: column;
  padding: 20px 0px 0px 40px;
}
.password-element label {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  padding-bottom: 8px;
  color: #838383;
  text-align: left;
}
.password-element .password-input-container {
  position: relative;
  display: flex;
}
.password-element .password-input-container input {
  flex: 1;
  padding: 13px 50px 13px 50px;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
}
.password-element .password-input-container input:focus {
  border: 1px solid #838383 !important;
}
.password-element .password-input-container .lock {
  position: absolute;
  left: 20px;
  top: 13px;
}
.password-element .password-input-container .show-password-container {
  position: absolute;
  right: 1px;
  border: 0px;
  width: fit-content;
  height: 90%;
  top: 5%;
  padding: 9px 8px;
  display: flex;
}
.password-element .password-input-container .show-password {
  position: absolute;
  right: 20px;
  top: 13px;
}

.password-validation-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 8px;
}
.password-validation-error span {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.backdrop-container {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Color picker */
.color-picker-container {
  position: relative;
  cursor: pointer;
}

#color-picker-preview {
  margin-left: auto;
}

.color-picker-label {
  display: flex;
  justify-content: space-between;
}
.color-picker-label .label-description {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  color: #252525 !important;
}
.color-picker-label .color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-picker-label .selected-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 0px;
  border: 1px solid #252525;
}

.color-picker-modal {
  z-index: 200;
  position: absolute;
  transform: translateY(10px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 24px;
  width: 208px;
  height: 272px;
  background: #FFFFFF;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.color-picker-modal .color-element {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.color-picker-modal-advanced {
  z-index: 200;
  position: absolute;
  transform: translateY(10px);
  display: flex;
  flex-direction: column;
  gap: 12px; /* Space between the two sections */
  right: 0;
  padding: 24px;
  width: 100%;
  max-width: 351px;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  grid-template-columns: repeat(6, 1fr);
}
.color-picker-modal-advanced .color-element {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.color-picker-modal-advanced .color-elements {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 items per row */
  gap: 12px;
  place-items: center;
}
.color-picker-modal-advanced .advanced-colors {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 items per row */
  gap: 12px;
  place-items: center;
}
.color-picker-modal-advanced .advanced-color {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.color-picker-modal-advanced .add-new-texture {
  display: flex;
  width: 60px;
  height: 60px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #415FF5;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
  border: 0px !important;
}
.color-picker-modal-advanced .add-new-texture #next-texture-label {
  margin-bottom: 0px;
}
.color-picker-modal-advanced .add-new-texture svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.color-type-selector {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 16px;
}
.color-type-selector .chip {
  width: 100%;
  height: 20px;
  padding: 0px 4px;
  border: 0px !important;
  border-radius: 4px;
  color: #252525;
  background: #F6F6F6;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}
.color-type-selector .selected-chip {
  background: #C9D1FD;
  color: #415FF5;
}

#color-selector {
  display: none;
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  min-width: 52px;
  min-height: 32px;
  max-width: 52px;
  max-height: 32px;
  /* Rounded sliders */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E1E1E1;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch .slider:disabled {
  background-color: #F3F3F3;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch input:checked + .slider {
  background-color: #0E850A;
}
.switch input:disabled:checked + .slider {
  background-color: #9FD39D;
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.switch .slider.round {
  border-radius: 40px;
}
.switch .slider.round:before {
  border-radius: 50%;
  top: 2px;
}

.size-20 {
  width: 20px;
  height: 20px;
}

/* Spinner Animation */
.position-spinner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  border-radius: 50%;
  z-index: 10000;
}
.position-spinner .spinner {
  animation: rotate 2s linear infinite;
  width: 50px;
  height: 50px;
}
.position-spinner .spinner .path {
  stroke: url(#gradient);
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

#spinner-container {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  padding-top: 20px;
}

#spinner-container-inside {
  display: flex;
  justify-content: center;
}

/* Onboarding Header */
.onboarding-header {
  height: 70px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100%;
  z-index: 50;
}
.onboarding-header nav {
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  justify-content: space-between;
}
.onboarding-header nav a {
  font-weight: 600;
  line-height: 22px;
  color: #5C5440;
  text-decoration: none;
}
.onboarding-header nav img {
  margin-top: 31px;
  margin-bottom: 30px;
  width: 108px;
  height: 8px;
}

#add-new-input {
  padding: 14px 20px 14px 20px;
}

/* Reusable options */
.add-profile-container {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
.add-profile-container .add-profile-button {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.add-profile-container .add-profile-button span {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #5973F8;
}

.optional-container {
  display: flex;
  justify-content: space-between;
}

.optional-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #838383;
}

/* Upload profile */
.web-upload-profile-screen {
  height: 100svh;
}

.upload-profile-screen {
  height: 100%;
  height: 100vh;
  height: 100dvh;
}

.upload-profile-screen, .web-upload-profile-screen {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 4000;
  background-color: #FFFFFF;
  overflow-y: hidden;
}
.upload-profile-screen .upload-inner-screen, .web-upload-profile-screen .upload-inner-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
[data-capacitor=true] .upload-profile-screen .upload-inner-screen, [data-capacitor=true] .web-upload-profile-screen .upload-inner-screen {
  padding-top: env(safe-area-inset-top, 0);
}
.upload-profile-screen .upload-inner-screen .profile-container, .web-upload-profile-screen .upload-inner-screen .profile-container {
  display: flex;
  justify-content: center;
}
.upload-profile-screen .upload-inner-screen .profile-container img, .web-upload-profile-screen .upload-inner-screen .profile-container img {
  max-width: 100%;
  max-height: 500px;
  width: 100%;
}
.upload-profile-screen .upload-inner-screen .cta-container, .web-upload-profile-screen .upload-inner-screen .cta-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10%;
  gap: 20px;
  width: 100%;
}
.upload-profile-screen .upload-inner-screen .cta-container button, .web-upload-profile-screen .upload-inner-screen .cta-container button {
  max-width: 500px;
}

#profile-image-container {
  max-width: 500px;
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}
#profile-image-container #profileimage {
  width: auto;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.status-bar-icon-btn {
  padding: 14px;
  margin: -14px;
}

.status-bar-container-3 {
  grid-template-columns: auto 1fr auto;
  column-gap: 1rem;
  overflow: visible;
}
.status-bar-container-3 .left-cta-container {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.status-bar-container-3 .right-cta-container {
  grid-column: 3;
  grid-row: 1;
  overflow: visible;
  justify-self: end;
  z-index: 1;
  display: flex;
  align-items: center;
}
.status-bar-container-3 h1 {
  grid-column: 1/-1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  max-width: calc(100% - 80px);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 0;
}

#devices-section .status-bar-container-3 {
  /* Default padding for web */
  padding: 20px 5% 8px 5% !important;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] #devices-section .status-bar-container-3 {
  padding: max(0px, 20px - env(safe-area-inset-top, 0px)) 5% 8px 5% !important;
}

.container-fluid .status-bar-container {
  padding: 26px 11px 8px 0px;
}

#device-settings-section .primary-button {
  margin-top: 0px;
}

.status-bar-container {
  display: grid;
  /* Default padding for web */
  padding: 26px 5% 8px 5%;
  align-items: center;
  margin-bottom: 20px;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .status-bar-container {
  padding: max(0px, 26px - env(safe-area-inset-top, 0px)) 5% 8px 5%;
  margin-bottom: 0px !important;
}
.status-bar-container button {
  padding: 0;
}
.status-bar-container .blue-text {
  color: #5973F8;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}
.status-bar-container h1 {
  text-align: center;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  margin: 0 auto;
}
.status-bar-container .left-cta-container {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 24px;
}
.status-bar-container .left-cta-container .left-cta {
  padding: 0;
}
.status-bar-container .left-cta-container .left-cta svg {
  flex-shrink: 0;
}
.status-bar-container .right-cta-container {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}
.status-bar-container .right-cta-container button {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.status-bar-container .right-cta-container span {
  cursor: pointer;
}

.cropper-crop-box, .cropper-view-box {
  border-radius: 50%;
}

.cropper-view-box {
  box-shadow: none;
  outline: 0 !important;
}

.cropper-center, .cropper-dashed {
  display: none !important;
}

.cropper-face {
  background-color: transparent !important;
}

/* Profile */
.profile-selected {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.edit-profile-container {
  position: relative;
  width: 100px;
}
.edit-profile-container svg {
  position: absolute;
  bottom: 0;
  right: 0;
}

.change-profile-container {
  display: flex;
  align-items: center;
  padding: 10px 4px;
  justify-content: space-between;
}
.change-profile-container .profile-container {
  display: flex;
  gap: 8px;
}
.change-profile-container .profile-container img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.change-profile-container .profile-container button {
  background-color: transparent;
  padding: 0;
}
.change-profile-container .profile-container button span {
  color: #5973F8;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.change-profile-container #delete-photo {
  cursor: pointer;
}

.edit-dropdown-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  position: absolute;
  width: 178px;
  overflow: hidden;
  transform: translate(40%, 10px);
  display: none;
  cursor: pointer;
  z-index: 10;
}
.edit-dropdown-container .dropdown-element {
  display: flex;
  gap: 8px;
  padding-left: 24px;
  color: #838383;
  border-bottom: 1px solid #F8F8F8;
  padding: 14px 20px;
}
.edit-dropdown-container .dropdown-element svg {
  position: relative;
  bottom: 0;
  right: 0;
}

.edit-dropdown-container > .dropdown-element:last-child {
  color: #CE2D4F;
}

#my-roles .dropdown-container-bottom {
  width: initial;
  left: initial;
}
#my-roles .placeholder-container {
  width: 100%;
}
#my-roles .placeholder-container #my-roles-label {
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: block;
}

/* Navigation Footer */
.web-footer {
  position: fixed !important;
}

.web-container-body {
  height: 100svh !important;
}

.navigation-footer-v2 {
  padding-top: 6px !important;
  padding-bottom: 24px !important;
}
.navigation-footer-v2 .navigation-items {
  padding: 5px;
}
.navigation-footer-v2 .navigation-items .gradient-circle {
  padding: 2px;
}

.retain-word-break {
  word-break: keep-all;
}

.android-footer {
  padding-bottom: 6px !important;
  position: absolute !important;
}

.no-padding-bottom {
  padding-bottom: 0px !important;
}

.android-home-container {
  height: calc(100% - 130px) !important;
}

.android-chats-container {
  height: calc(100% - 130px) !important;
}

.android-groups-section-height {
  height: calc(100svh - 140px) !important;
}

.android-point-summary-height {
  height: calc(100svh - 155px) !important;
}

.video-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.video-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  pointer-events: none;
  z-index: 2;
}

.navigation-footer, .navigation-footer-v2 {
  /* Keep as fixed positioning to work with keyboard */
  /* position: absolute; - removed conflicting rule */
  bottom: 0;
  left: 0;
  height: auto;
  padding-top: 12px;
  padding-bottom: 30px;
  width: 100%;
  z-index: 50;
  background: #FFFFFF;
  box-shadow: 0px -7px 8px rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 10px;
  padding-right: 10px;
}
.navigation-footer .navigation-items, .navigation-footer-v2 .navigation-items {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.navigation-footer .navigation-items img, .navigation-footer-v2 .navigation-items img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.navigation-footer .navigation-items .selected, .navigation-footer-v2 .navigation-items .selected {
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  color: black;
}
.navigation-footer .navigation-items .unselected, .navigation-footer-v2 .navigation-items .unselected {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  color: black;
}
.navigation-footer .navigation-items svg, .navigation-footer-v2 .navigation-items svg {
  flex-shrink: 0;
}

.search-input-container {
  width: -webkit-fill-available;
  position: relative;
}
.search-input-container img {
  position: absolute;
  top: 0;
  margin: auto;
  right: 20px;
  transform: translateY(50%);
}
.search-input-container .searchbar {
  border-radius: 40px;
  padding: 10px 20px 10px 20px;
}

.safe-area-container .hybrid-reusable-setting-header {
  /* Default padding for web */
  padding: 20px 5% 16px 5%;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .safe-area-container .hybrid-reusable-setting-header {
  padding: max(0px, 20px - env(safe-area-inset-top, 0px)) 5% 16px 5%;
}

.reusable-setting-header, .hybrid-reusable-setting-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #F2F2F2;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  background-color: white;
  z-index: 3000;
}
.reusable-setting-header .label-container, .hybrid-reusable-setting-header .label-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.reusable-setting-header .label-container .setting-header-container, .reusable-setting-header .label-container .setting-header-subheader-container, .hybrid-reusable-setting-header .label-container .setting-header-container, .hybrid-reusable-setting-header .label-container .setting-header-subheader-container {
  display: flex;
  flex-direction: column;
}
.reusable-setting-header .label-container .setting-header-container h1, .reusable-setting-header .label-container .setting-header-subheader-container h1, .hybrid-reusable-setting-header .label-container .setting-header-container h1, .hybrid-reusable-setting-header .label-container .setting-header-subheader-container h1 {
  line-height: 28px;
}
.reusable-setting-header .label-container .setting-header-container h2, .reusable-setting-header .label-container .setting-header-subheader-container h2, .hybrid-reusable-setting-header .label-container .setting-header-container h2, .hybrid-reusable-setting-header .label-container .setting-header-subheader-container h2 {
  color: #838383;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.reusable-setting-header .label-container #back-button, .hybrid-reusable-setting-header .label-container #back-button {
  margin-top: 0px;
}
.reusable-setting-header .label-container .setting-header-subheader-container, .hybrid-reusable-setting-header .label-container .setting-header-subheader-container {
  margin-top: -4px;
}
.reusable-setting-header .label-container .settingIcon, .hybrid-reusable-setting-header .label-container .settingIcon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.reusable-setting-header .label-container #preferences, .hybrid-reusable-setting-header .label-container #preferences {
  margin-top: 3px;
}
.reusable-setting-header .save-settings-button, .hybrid-reusable-setting-header .save-settings-button {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.reusable-setting-header .save-settings-button .save-settings, .hybrid-reusable-setting-header .save-settings-button .save-settings {
  border: none;
  background-color: transparent;
  color: #5973F8;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  padding: 0;
}
.reusable-setting-header .save-settings-button #save-preference, .hybrid-reusable-setting-header .save-settings-button #save-preference {
  padding: 0px;
  height: 20px;
}
.reusable-setting-header .more-options, .hybrid-reusable-setting-header .more-options {
  position: relative;
  margin-left: auto;
  margin-bottom: auto;
  cursor: pointer;
}
.reusable-setting-header .more-options img, .reusable-setting-header .more-options .skeleton-loader, .hybrid-reusable-setting-header .more-options img, .hybrid-reusable-setting-header .more-options .skeleton-loader {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.reusable-setting-header .more-options-dropdown, .hybrid-reusable-setting-header .more-options-dropdown {
  position: absolute;
  display: flex;
  right: 0;
  top: 30px;
  flex-direction: column;
  background-color: #F0F0F0;
  z-index: 500;
  border-radius: var(--Rectangle-edges-Roundest, 12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(17, 17, 17, 0.08);
  transition: box-shadow 120ms ease, backdrop-filter 120ms ease;
}
.reusable-setting-header .more-options-dropdown .dropdown-element, .hybrid-reusable-setting-header .more-options-dropdown .dropdown-element {
  display: flex;
  height: 44px;
  padding: 0px 16px 0px 32px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  border-bottom: 0.5px solid rgba(17, 17, 17, 0.25);
}
.reusable-setting-header .more-options-dropdown .dropdown-element span, .hybrid-reusable-setting-header .more-options-dropdown .dropdown-element span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  text-align: start;
  color: black;
}
.reusable-setting-header .more-options-dropdown .dropdown-element .red-text, .hybrid-reusable-setting-header .more-options-dropdown .dropdown-element .red-text {
  color: #CE2D4F;
}
.reusable-setting-header .more-options-dropdown .dropdown-element svg, .hybrid-reusable-setting-header .more-options-dropdown .dropdown-element svg {
  margin-left: auto;
}
.reusable-setting-header .more-options-dropdown .dropdown-element-with-image, .hybrid-reusable-setting-header .more-options-dropdown .dropdown-element-with-image {
  display: flex;
  height: 44px;
  padding: 0px 16px 0px 32px;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  border-bottom: 0.5px solid rgba(17, 17, 17, 0.25);
}
.reusable-setting-header .more-options-dropdown .dropdown-element-with-image img, .hybrid-reusable-setting-header .more-options-dropdown .dropdown-element-with-image img {
  width: 24px;
  height: 24px;
}
.reusable-setting-header .more-options-dropdown .dropdown-element-with-image span, .hybrid-reusable-setting-header .more-options-dropdown .dropdown-element-with-image span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  text-align: start;
  color: black;
  white-space: nowrap;
}
.reusable-setting-header .more-options-dropdown > .dropdown-element:last-of-type, .reusable-setting-header .dropdown-element-with-image:last-of-type, .hybrid-reusable-setting-header .more-options-dropdown > .dropdown-element:last-of-type, .hybrid-reusable-setting-header .dropdown-element-with-image:last-of-type {
  border-bottom: 0px;
}
.reusable-setting-header .dropdown-backdrop, .hybrid-reusable-setting-header .dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 450;
  pointer-events: auto;
}

.reusable-setting-header {
  padding: 36px 5% 16px 5%;
}

.hybrid-reusable-setting-header {
  /* Default padding for web */
  padding: 20px 5% 16px 5%;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .hybrid-reusable-setting-header {
  padding: max(0px, 20px - env(safe-area-inset-top, 0px)) 5% 16px 5%;
}

.reusable-searchbar-container {
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 40px;
  border: 1px solid #F2F2F2;
  padding: 10px 20px;
  width: 100%;
}
.reusable-searchbar-container input {
  border: none;
  width: 100%;
}
.reusable-searchbar-container svg {
  flex-shrink: 0;
}

.list-element {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 8px;
  border-bottom: 1px solid #F2F2F2;
}
.list-element img {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.list-element span {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.list-element .list-title {
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 26px !important;
}
.list-element .list-description {
  align-self: center;
  margin-left: auto;
  color: #595959;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 22px !important;
}

.account-list-container {
  max-height: 250px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pulse {
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1019607843);
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}
.reply-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  position: relative;
  background-color: white;
  box-shadow: 0px -7px 8px rgba(0, 0, 0, 0.12);
}
.reply-container svg {
  flex-shrink: 0;
}
.reply-container .vertical-line {
  border-left: 2px solid #5973F8;
  height: 40px;
  margin-left: 8px;
  margin-right: 8px;
}
.reply-container img {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  margin-right: 8px;
}
.reply-container .reply-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-width: 40px;
}
.reply-container .reply-section .reply-to {
  color: #5973F8;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}
.reply-container .reply-section .system-text {
  color: #A4A4A4 !important;
}
.reply-container .reply-section .truncate-text {
  color: #252525;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-container #close-button {
  margin-left: auto;
}

.italic {
  font-style: italic;
}

.reply-body-container {
  display: flex;
  flex-direction: column;
}
.reply-body-container .header {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}
.reply-body-container .body {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.rounded-button {
  border-radius: 50%;
  background-color: #F2F2F2;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rounded-button svg {
  flex-shrink: 0;
}

.list-cta-elements {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* Congratulations - reward */
.reward-body {
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.reward-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 15%;
  align-items: center;
  gap: 20px;
  text-align: center;
  z-index: 100;
  overflow-y: none;
}
.reward-container .congrats-img {
  width: 250px;
  height: 250px;
}
.reward-container img {
  width: 32px;
  height: 32px;
}
.reward-container h1 {
  font-weight: 700;
  font-size: 50px;
  line-height: 64px;
}
.reward-container h2 {
  font-weight: 700;
  font-size: 21px;
  line-height: 32px;
}
.reward-container h3 {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
}
.reward-container p {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

/* OTP Form */
.otp-values {
  display: flex;
  gap: 16px;
}
.otp-values input {
  text-align: center;
  padding: 9px 8px;
  height: 40px;
}

.section-divider {
  width: 100%;
  min-height: 8px;
  border-top: 1px solid #F2F2F2;
  border-bottom: 1px solid #F2F2F2;
  background-color: #FBFBFA;
}

.no-margin {
  margin-left: -5%;
  margin-left: -5%;
  margin-top: 20px;
  width: 100vw;
}

.no-margin-vertical {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.no-padding-horizontal {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.no-padding-vertical {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.margin-horizontal {
  margin-left: 5% !important;
  margin-right: 5% !important;
}

.disabled-text {
  color: #CCCCCC;
}

.disabled-primary-text {
  color: #9EAAF6 !important;
}

/* Activation screen */
.cuemill-gradient-full {
  width: 100%;
  height: 100%;
  background: url("/images/assets/cuemill-gradient.png") lightgray -16px 0px/126.4% 100% no-repeat;
  padding-bottom: 20rem;
}

#error-element {
  margin-top: 40px;
}

#login-container {
  margin-top: 20px;
  height: 100svh;
}
#login-container form {
  max-width: 475px;
}
#login-container .header-text {
  text-align: center;
  word-break: keep-all;
}

#change-photo-dropdown label {
  display: flex;
  gap: 8px;
}

.login-container-web {
  height: 100svh !important;
}

.lost-mode-loop .header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tag-device-section {
  padding-left: 5%;
  padding-right: 5%;
  max-height: calc(100% - 160px);
}
.tag-device-section .activation-profile-section {
  margin-bottom: 0px !important;
}
.tag-device-section .tag-device-interface {
  height: 100%;
  overflow-y: auto;
  overflow: hidden;
  justify-content: flex-start !important;
}

.divider-component {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F0F0F0;
}
.divider-component hr {
  width: 100%;
}
.divider-component span {
  padding-left: 12px;
  padding-right: 12px;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}

.bottom-navigation-tab-component {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 6px 5% 18px 5%;
  background-color: #FFF;
  box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.12);
}

#expand-prompt-selection-interface {
  height: 100%;
}

#send-gift-activation-interface {
  height: 100%;
}
#send-gift-activation-interface .status-bar-container {
  margin-bottom: 0px;
  position: fixed;
  top: 0;
  width: 90%;
  z-index: 10;
}
#send-gift-activation-interface .send-gift-action-section {
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 60px;
  position: relative;
  overflow-y: auto;
  height: calc(100svh - 134px);
}
#send-gift-activation-interface .round-image {
  border-radius: 50%;
}
#send-gift-activation-interface .header {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
#send-gift-activation-interface .selected-sticker {
  border: 1.5px solid #415FF5 !important;
}
#send-gift-activation-interface .sticker-section {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 250px);
  justify-content: center;
  width: 100%;
  gap: 16px;
  height: auto;
  padding-bottom: 20px;
}
#send-gift-activation-interface .sticker-section .sticker {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
}
#send-gift-activation-interface .sticker-section .sticker img {
  width: 100%;
  padding: 5px;
  border-radius: 8px 8px 0px 0px;
}
#send-gift-activation-interface .sticker-section .sticker .skeleton-loader {
  padding: 5px;
  border: 1.5px solid #E1E1E1;
  border-radius: 8px 8px 0px 0px;
  min-width: 167.5px;
  min-height: 167.5px;
}
#send-gift-activation-interface .sticker-section .sticker span {
  padding: 8px 15.5px;
  background: #E1E1E1;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
  height: 100%;
  border-radius: 0px 0px 8px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-input-field-component {
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 40px;
  border: 1.5px solid #D6D6D6;
  padding-right: 12px;
}
.avatar-input-field-component img, .avatar-input-field-component .skeleton-loader {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 2px;
}
.avatar-input-field-component span {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  color: #595959;
}

.cuemill-gradient-button {
  background: linear-gradient(90deg, #FF975C 0%, #6558F0 100%);
  width: 100%;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 52px;
  justify-content: center;
}
.cuemill-gradient-button span {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  color: #FFF;
}

.oops-interface {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.oops-interface img {
  max-width: 301px;
  max-height: 334px;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
  align-self: center;
}

.deactivated-profile-container {
  pointer-events: none;
}
.deactivated-profile-container label span {
  color: #9EAAF6 !important;
}

.loop-interface {
  height: 100svh;
  padding-bottom: 0px !important;
  position: relative;
  display: flex;
  flex-direction: column;
}
.loop-interface .header {
  padding-left: 10%;
  padding-right: 10%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loop-interface .header .preview-title {
  margin-top: 20px;
  margin-bottom: 20px;
}
.loop-interface .header img, .loop-interface .header .skeleton-loader {
  width: 100%;
  max-width: 350px;
}
.loop-interface .header .lost-mode-img {
  width: 233.522px;
  height: 305.217px;
}
.loop-interface .header .skeleton-loader {
  width: 225px;
  height: 225px;
  min-width: 225px;
  min-height: 225px;
}
.loop-interface .header .round-image, .loop-interface .header .skeleton-loader {
  border-radius: 50%;
  object-fit: cover;
  max-height: 225px;
  max-width: 225px;
  aspect-ratio: 1/1;
  height: auto;
}
.loop-interface .header .activation-image {
  object-fit: cover;
  max-height: 225px;
  max-width: 225px;
  aspect-ratio: 1/1;
  height: auto;
}
.loop-interface .header #beta-header {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #FFF;
  padding-bottom: 0px;
}
.loop-interface .header h1, .loop-interface .header span {
  text-align: center;
}
.loop-interface .header h1 {
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  overflow-wrap: anywhere;
}
.loop-interface .header span {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}
.loop-interface .tag-device-interface {
  background-color: #F6F6F6;
  padding: 15px;
  border-radius: 12px;
  align-items: center;
  position: relative;
}
.loop-interface .tag-device-interface img {
  margin-bottom: 12px;
}
.loop-interface .tag-device-interface .profile-icon {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-50%, 50%);
}
.loop-interface .tag-device-interface .tag-device-info-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loop-interface .tag-device-interface .profile-name-section {
  display: flex;
  gap: 14px;
}
.loop-interface .tag-device-interface .scrollable-device-profile {
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
.loop-interface .tag-device-interface .tag-device-container {
  position: relative;
  height: auto;
  width: 100%;
  padding-top: 12px;
}
.loop-interface .tag-device-interface .tag-device-container .highlighted-info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  background-color: #D3D3D3;
  border-radius: 8px;
  padding: 8px;
}
.loop-interface .tag-device-interface .tag-device-container .info-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.loop-interface .tag-device-interface .tag-device-container .info-container h4 {
  min-width: 130px;
}
.loop-interface .tag-device-interface .tag-device-container .info-container span {
  flex: 1;
  text-align: left;
}
.loop-interface .tag-device-interface .tag-device-container h4 {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  margin-bottom: 0;
}
.loop-interface .tag-device-interface .tag-device-container span {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.loop-interface .error-description {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.loop-interface .error-description h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.loop-interface .error-description h2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.loop-interface .error-description .cta-description {
  display: flex;
  flex-direction: column;
}
.loop-interface .error-description .cta-description span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #838383;
}
.loop-interface .error-description .cta-description .blue-button {
  padding: 3px 4px;
  border: none;
  color: #5973F8;
  background-color: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.loop-interface .beta-section-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #FFF;
}
.loop-interface .beta-section-container .intro-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loop-interface .beta-section-container .intro-section h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.loop-interface .beta-section-container .intro-section span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.loop-interface .beta-section-container .primary-button-white {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 12px 32px;
  background-color: #FFF;
  border-radius: 48px;
}
.loop-interface .beta-section-container .primary-button-white span {
  color: #5973F8;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.loop-interface .beta-section-container .transparent-button-background {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 12px 32px;
  background-color: transparent;
  border: 1px solid #FFF;
  border-radius: 48px;
}
.loop-interface .beta-section-container .transparent-button-background span {
  color: #FFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.loop-interface .beta-section-container .transparent-button-background #brand-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.loop-interface .beta-section-container .profile-section {
  padding-top: 0px;
}
.loop-interface .beta-section-container .profile-section #logged-in-as {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.loop-interface .beta-section-container .profile-section #login-cta {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.loop-interface .beta-section-container .profile-section #sign-up-button, .loop-interface .beta-section-container .profile-section #log-in-button, .loop-interface .beta-section-container .profile-section #home-button {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #FFF;
}
.loop-interface .cuemill-button-container {
  margin-top: 20px;
}
.loop-interface .ringing span {
  animation: pulse 1s infinite;
}
.loop-interface .ringing span:nth-child(2) {
  animation-delay: 0.2s;
}
.loop-interface .ringing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loop-interface .cuemill-gradient-border-disabled {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background: linear-gradient(269.59deg, #9EAAF6 -40.09%, #F6BE9B 100%);
  margin-top: 20px;
}
.loop-interface .cuemill-gradient-border-disabled .ring-cta-button {
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  padding: 53px 46px;
  z-index: 2;
}
.loop-interface .cuemill-gradient-border-disabled .ring-cta-button svg {
  margin: 0 auto;
}
.loop-interface .cuemill-gradient-border-disabled .ring-cta-button span {
  color: #CCCCCC;
}
.loop-interface .contact-button-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
  position: relative;
}
.loop-interface .contact-button-cta span {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}
.loop-interface .contact-button-cta-end {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.loop-interface .contact-button-cta-end button {
  background-color: #CE2D4F;
}
.loop-interface .contact-button-cta-end span {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}
.loop-interface .individual-button {
  flex: 1;
  width: 100%;
  border-radius: 48px;
  background-color: white;
  padding: 12px 32px;
  border: 1px solid #F2F2F2;
}
.loop-interface .individual-button span {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #595959;
}
.loop-interface .individual-button-disabled {
  flex: 1;
  width: 100%;
  border-radius: 48px;
  background-color: #F8F8F8;
  padding: 12px 32px;
  border: 1px solid #F2F2F2;
}
.loop-interface .individual-button-disabled span {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #CCCCCC;
}
.loop-interface .tertiary-button-inactive {
  background-color: #FFFFFF;
}
.loop-interface .tertiary-button-inactive span {
  color: #CCCCCC;
}
.loop-interface .activation-profile-section {
  gap: 12px;
}
.loop-interface .activation-profile-section .black-text {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.loop-interface .activation-profile-section #countdown {
  font-size: 14px;
  font-weight: 500;
}
.loop-interface .profile-section {
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 20px;
  text-align: center;
  color: #838383;
  display: flex;
  flex-direction: column;
}
.loop-interface .profile-section #countdown {
  font-size: 12px;
  line-height: 20px;
  color: #252525;
}
.loop-interface .profile-section #logged-in-as {
  line-height: 22px;
}
.loop-interface .profile-section #login-cta {
  line-height: 26px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.loop-interface .profile-section #login-cta a {
  color: #5973F8;
  font-size: 14px;
  font-weight: 600;
}
.loop-interface .btn-group {
  justify-content: space-around;
}
.loop-interface .btn-group-column {
  gap: 20px;
}
.loop-interface .device-activation-signup {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 8px;
}
.loop-interface .device-activation-signup span {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}
.loop-interface .device-activation-signup a {
  color: #5973F8;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
}
.loop-interface .bell-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 80%;
}
.loop-interface .bell-section .call-profile {
  border-radius: 50%;
  width: 240px;
  height: 240px;
  margin: 0 auto;
}
.loop-interface .bell-section .bell-border {
  width: 242px;
  height: 242px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background: linear-gradient(269.59deg, #5973F8 -40.09%, #FF8C4B 100%);
}
.loop-interface .bell-section .bell-border .bell-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-color: white;
  border-radius: 50%;
  padding: 95px;
  z-index: 2;
}
.loop-interface .voice-section {
  flex: 0.9;
}
.loop-interface .cta-section {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.loop-interface .cta-section .title-section {
  padding-bottom: 44px;
}
.loop-interface .cta-section .title-section h1 {
  font-weight: 700;
  font-size: 21px;
  line-height: 32px;
  padding-top: 20px;
}
.loop-interface .cta-section button {
  margin-bottom: 40px;
}
.loop-interface .cta-section .call-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loop-interface .cta-section .call-cta #counter {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
.loop-interface .cta-section .call-cta .call-cta-container {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}
.loop-interface .cta-section .call-cta .call-cta-container button {
  margin-bottom: 0px;
}
.loop-interface .cta-section .call-cta .warning-button {
  width: 85svw;
  padding: 0;
  margin-bottom: 40px;
}
.loop-interface .video-call-interface {
  position: absolute;
  bottom: 5%;
  left: 0;
  height: fit-content;
  width: 100%;
  background: transparent;
  border-radius: 12px 12px 0px 0px;
  flex: 0 0 auto;
  z-index: 10;
}
.loop-interface .video-call-interface .call-section-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding-bottom: 20px;
  color: white;
  text-shadow: 1px 0.5px #252525;
}
.loop-interface .video-call-interface .call-section-header .minimize-button {
  margin-top: 40px;
  width: 60px;
  height: 5px;
  background-color: #F2F2F2;
  border-radius: 4px;
}
.loop-interface .video-call-interface .call-section-header h1 {
  width: max-content;
  font-weight: 700;
  font-size: 21px;
  line-height: 32px;
}
.loop-interface .video-call-interface .call-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 1px 0.5px #252525;
}
.loop-interface .video-call-interface .call-cta #counter {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
.loop-interface .video-call-interface .call-cta .call-cta-container {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
.loop-interface .video-call-interface .call-cta .call-cta-container button {
  margin-bottom: 0px;
}
.loop-interface .video-call-interface .call-cta .warning-button {
  width: 85svw;
  padding: 0;
  margin-bottom: 40px;
}
.loop-interface #localVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.loop-interface .voice-container {
  height: 100%;
}
.loop-interface .voice-container .bell-section {
  height: 100%;
}

.authenticate-interface {
  gap: 20px;
}
.authenticate-interface .claim-ownership-header {
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #F2F2F2;
}
.authenticate-interface .claim-ownership-header h1 {
  padding-left: 20px;
}
.authenticate-interface .claim-ownership-header svg {
  margin-right: 20px;
}
.authenticate-interface span {
  font-size: 16px;
}
.authenticate-interface .password-element {
  padding: 0px;
}

.cuemill-gradient-border {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background: linear-gradient(269.59deg, #5973F8 -40.09%, #FF8C4B 100%);
  margin-top: 20px;
}
.cuemill-gradient-border .ring-cta-button {
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  padding: 53px 46px;
  z-index: 2;
}
.cuemill-gradient-border .ring-cta-button svg {
  margin: 0 auto;
}
.cuemill-gradient-border .ring-cta-button span {
  color: #252525;
}
.cuemill-gradient-border .ring-cta-button:disabled span {
  color: #F2F2F2;
}
.cuemill-gradient-border .ring-cta-button:disabled svg path {
  stroke: #CCCCCC;
}

.lost-loop {
  gap: 20px;
  color: white;
  background-color: #CE2D4F;
  padding-left: 10%;
  padding-right: 10%;
}
.lost-loop .header {
  color: white;
  padding-left: 0%;
  padding-right: 0%;
}
.lost-loop .profile-section {
  padding: 0px;
  color: white;
}
.lost-loop .profile-section #login-cta a {
  color: white;
}
.lost-loop .individual-button {
  max-height: 48px;
}

.group-device-activation-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow-x: hidden;
}
.group-device-activation-section .truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-device-activation-section .activation-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: white;
  justify-content: center;
  align-items: center;
}
.group-device-activation-section .activation-header img {
  width: 100%;
  max-width: 500px;
  max-height: 500px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.group-device-activation-section .activation-header .box-shadow {
  border-radius: 8px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
}
.group-device-activation-section .activation-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}
.group-device-activation-section .activation-header span {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.group-device-activation-section .content-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.group-device-activation-section .content-card h1 {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  padding-left: 5%;
  padding-right: 5%;
}
.group-device-activation-section .content-card img {
  max-width: 500px;
  max-height: 500px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.group-device-activation-section .content-card span {
  padding-left: 5%;
  padding-right: 5%;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  overflow-wrap: anywhere;
}
.group-device-activation-section .url-chip {
  display: grid;
  grid-template-columns: fit-content(100%) auto fit-content(100%);
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-radius: 48px;
  margin-left: 5%;
  margin-right: 5%;
  border: 1px solid #F2F2F2;
}
.group-device-activation-section .url-chip svg {
  flex-shrink: 0;
}
.group-device-activation-section .url-chip span {
  padding: 0px;
  color: #5973F8 !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.group-device-activation-section .url-chip button {
  padding: 0px;
  margin: 0px;
}
.group-device-activation-section .cta-section {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  background-color: #5973F8;
  gap: 20px;
  padding-top: 20px;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 25%;
}
.group-device-activation-section .cta-section .location-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.group-device-activation-section .cta-section .location-label h1 {
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}
.group-device-activation-section .cta-section .white-primary-button {
  background-color: #F2F2F2;
  border-radius: 48px;
  border: 1px solid #F2F2F2;
  padding: 12px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.group-device-activation-section .cta-section .white-primary-button span {
  color: #5973F8;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.group-device-activation-section .cta-section .white-primary-button:disabled span {
  color: #9EAAF6;
}
.group-device-activation-section .cta-section .white-primary-button:disabled svg path {
  stroke: #9EAAF6;
}
.group-device-activation-section .cta-section .primary-button {
  background-color: #5973F8;
  border-radius: 48px;
  border: 1px solid #FFF;
  padding: 12px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.group-device-activation-section .cta-section .persona-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.group-device-activation-section .cta-section .persona-section .label-header {
  display: flex;
  position: relative;
  gap: 8px;
}
.group-device-activation-section .cta-section .persona-section .label-header span {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.group-device-activation-section .cta-section .persona-section .label-header .info-modal {
  transform: translateX(-20%);
}
.group-device-activation-section .cta-section .persona-section .label-header .info-icon circle {
  stroke: white;
}
.group-device-activation-section .cta-section .persona-section .label-header .info-icon path {
  fill: white;
}
.group-device-activation-section .cta-section .persona-section .dropdown-button {
  background-color: #5973F8;
  border: 1px solid #FFF;
}
.group-device-activation-section .cta-section .persona-section .dropdown-button .placeholder-container #join-as-dropdown-label {
  color: #FFF !important;
}
.group-device-activation-section .activation-screen-info {
  display: flex;
  flex-direction: column;
}
.group-device-activation-section .activation-screen-info span {
  color: white !important;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.group-device-activation-section .activation-screen-info span button {
  color: white !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  padding: 3px 4px;
}

.expand-call-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 54px;
  background: white;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
}
.expand-call-chip svg {
  margin: 8px;
  cursor: pointer;
}

#voice-call-interface {
  box-shadow: none;
}

#localAudio {
  position: absolute;
  visibility: hidden;
}

#remoteAudio {
  position: absolute;
  visibility: hidden;
}

.text-area-container {
  border: 1px solid #F2F2F2;
  padding: 14px 20px;
  background: #FFFFFF;
  border-radius: 4px;
}

.modal-text-area {
  min-height: 100px;
  max-height: 350px;
  overflow-y: auto;
}
.modal-text-area textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0;
  resize: none;
  box-sizing: border-box;
}

.error-msg {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.error-msg span {
  font-size: 12px;
}

.disabled-search-bar {
  background-color: #F8F8F8;
}
.disabled-search-bar input {
  background-color: transparent;
}
.disabled-search-bar input::placeholder {
  color: #CCCCCC !important;
}

.disabled-for-prod {
  background-color: #F8F8F8;
}

.inactive-dropdown {
  position: relative;
  padding: 13px 20px;
  background: #F8F8F8;
  border-radius: 4px;
}
.inactive-dropdown .inactive-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inactive-dropdown .inactive-header img, .inactive-dropdown .inactive-header .skeleton-loader {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inactive-dropdown .inactive-header span {
  color: #CCCCCC;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.inactive-dropdown svg {
  position: absolute;
  right: 20px;
  top: 13px;
}

#blocked-user-container {
  height: 100%;
  overflow-y: auto;
}
#blocked-user-container .accordion-element .accordion-header img {
  margin-top: 0px;
}
#blocked-user-container .accordion-element .accordion-header span {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
#blocked-user-container .accordion-element button {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #595959;
}

.blocked-users-main-body {
  overflow: hidden;
  height: 100%;
}

.range-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  border-bottom: 1px solid #F2F2F2;
  position: relative;
}
.range-container .tool-tip-container {
  position: absolute;
  top: -40px;
  left: 0;
  display: none;
}

/* Bottom Sheet */
@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes reverseGrowHeightFromTop {
  0% {
    height: auto;
    opacity: 1;
  }
  100% {
    height: 100%;
    opacity: 0;
  }
}
.reverse-growth {
  animation: reverseGrowHeightFromTop 0.5s ease-out forwards;
}

.bottom-sheet {
  z-index: 6000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.bottom-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Same as parent's background */
  z-index: -1; /* Place behind the .bottom-sheet-container */
}

.backdrop-background {
  position: relative;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  transition: opacity 0.3s ease-out;
}
.backdrop-background.dismissing {
  opacity: 0;
}

.web-config {
  height: 100svh !important;
}

.web-owners-device-setup {
  overflow-y: auto;
  height: calc(100svh - 100px) !important;
}

.hyb-owners-device-setup {
  overflow-y: auto;
  height: calc(100% - 80px) !important;
}

.hyb-config {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.not-found {
  align-self: center;
  padding: 20px;
  color: #595959;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

.bottom-sheet-container {
  background-color: #FFF;
  padding: 40px 20px 20px 20px;
  border-radius: 12px 12px 0px 0px;
  width: 100%;
  max-height: 95%;
  margin-bottom: -10px;
  touch-action: pan-y;
  overscroll-behavior: contain;
  margin-top: auto;
  animation: slideInFromBottom 0.5s ease-out forwards;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}
[data-capacitor=true] .bottom-sheet-container {
  margin-bottom: 0px !important;
  padding: 40px 20px 40px 20px !important;
}
.bottom-sheet-container.dismissing {
  transform: translateY(100%);
}
.bottom-sheet-container.fullscreen {
  height: 100vh !important;
  height: 100svh !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
[data-capacitor=true] .bottom-sheet-container.fullscreen {
  padding-top: env(safe-area-inset-top, var(--capacitor-safe-top, 0px));
}
.bottom-sheet-container.fullscreen #bottom-sheet-toggle {
  opacity: 0.3;
}
.bottom-sheet-container .profile-image {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.bottom-sheet-container .bottom-sheet-info {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.bottom-sheet-container .loop-gift-bottom-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.bottom-sheet-container .loop-gift-bottom-sheet img {
  max-width: 322px;
  max-height: 322px;
  width: 100%;
  height: 100%;
}
.bottom-sheet-container .loop-gift-bottom-sheet .skeleton-loader {
  width: 322px;
  height: 322px;
}
.bottom-sheet-container .loop-gift-bottom-sheet #prompt {
  background-color: #5973F8;
  color: white;
}
.bottom-sheet-container .loop-gift-bottom-sheet span {
  width: 100%;
  height: min-content;
  padding: 8px;
  border-radius: 8px;
  background-color: #F6F6F6;
  align-items: center;
  text-align: center;
  font-family: "Indie Flower";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.bottom-sheet-container .loop-gift-bottom-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.bottom-sheet-container .nfc-scan-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
  text-align: center;
}
.bottom-sheet-container .nfc-scan-container .nfc-scan-lottie {
  width: 200px;
  height: 200px;
  margin-bottom: 8px;
}
.bottom-sheet-container .nfc-scan-container .nfc-scan-heading {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  color: #252525;
  margin: 0;
}
.bottom-sheet-container .nfc-scan-container .nfc-scan-instruction {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #595959;
  margin: 0;
  padding: 0 20px;
}
.bottom-sheet-container .nfc-scan-container .nfc-scan-cancel {
  margin-top: 16px;
  min-width: 120px;
}
.bottom-sheet-container #bottom-sheet-toggle {
  display: flex;
  margin: 0 auto;
  width: 60px;
  height: 5px;
  border-radius: 4px;
  background-color: #F2F2F2;
  position: relative;
  cursor: grab;
  touch-action: none;
}
.bottom-sheet-container #bottom-sheet-toggle::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -40px;
  right: -40px;
  bottom: -20px;
}
.bottom-sheet-container .bottom-sheet-v1-body {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  gap: 20px;
  height: 100%;
}
.bottom-sheet-container .bottom-sheet-v1-body .bottom-sheet-header {
  display: flex;
  padding: 11px 16px;
  justify-content: center;
  align-items: center;
}
.bottom-sheet-container .bottom-sheet-v1-body .bottom-sheet-header h1 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  margin-left: auto;
}
.bottom-sheet-container .bottom-sheet-v1-body .bottom-sheet-header #close-icon {
  margin-left: auto;
}
.bottom-sheet-container .bottom-sheet-v1-body .reactions-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 4px;
}
.bottom-sheet-container .bottom-sheet-v1-body .reactions-header .reaction {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-bottom: 8px;
}
.bottom-sheet-container .bottom-sheet-v1-body .reactions-header .reaction h1 {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.bottom-sheet-container .bottom-sheet-v1-body .reactions-header #upvote-reaction, .bottom-sheet-container .bottom-sheet-v1-body .reactions-header #downvote-reaction {
  gap: 0px;
}
.bottom-sheet-container .bottom-sheet-v1-body .reactions-header .header-primary-active {
  border-bottom: 4px solid #5973F8;
  color: #5973F8;
  margin-bottom: -4px;
}
.bottom-sheet-container .bottom-sheet-v1-body .reactions-header .header-error-active {
  border-bottom: 4px solid #CE2D4F;
  color: #CE2D4F;
  margin-bottom: -4px;
}
.bottom-sheet-container .bottom-sheet-v1-body .reactions-header .fadeOutOnScroll {
  opacity: 0.5;
}
.bottom-sheet-container .bottom-sheet-v1-body .carousel-slider {
  display: flex;
  overflow-x: scroll; /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory;
  position: relative;
  scrollbar-width: none; /* For Firefox */
  min-height: 150px;
  /* For Webkit (Chrome, Safari, etc.) */
  -ms-overflow-style: none;
}
.bottom-sheet-container .bottom-sheet-v1-body .carousel-slider::-webkit-scrollbar {
  display: none;
}
.bottom-sheet-container .bottom-sheet-v1-body .members-list-container {
  overflow-y: auto;
  gap: 12px;
  display: flex;
  flex-direction: column;
  flex: 0 0 100%; /* Each child takes 100% of the carousel width */
  scroll-snap-align: start; /* Align to the start of the carousel */
}
.bottom-sheet-container .bottom-sheet-v1-body .members-list-container .member-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0px 4px 0px;
}
.bottom-sheet-container .bottom-sheet-v1-body .members-list-container .member-container img, .bottom-sheet-container .bottom-sheet-v1-body .members-list-container .member-container .skeleton-loader {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.bottom-sheet-container .bottom-sheet-v1-body .members-list-container .member-container span {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}
.bottom-sheet-container .bottom-sheet-body, .bottom-sheet-container .bottom-sheet-body-post {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.bottom-sheet-container .bottom-sheet-body .bottom-sheet-header, .bottom-sheet-container .bottom-sheet-body-post .bottom-sheet-header {
  display: flex;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid #F2F2F2;
  justify-content: space-between;
}
.bottom-sheet-container .bottom-sheet-body .bottom-sheet-header h1, .bottom-sheet-container .bottom-sheet-body-post .bottom-sheet-header h1 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  margin: 0px;
}
.bottom-sheet-container .bottom-sheet-body .bottom-sheet-header-3-elements, .bottom-sheet-container .bottom-sheet-body-post .bottom-sheet-header-3-elements {
  display: flex;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid #F2F2F2;
  gap: 8px;
}
.bottom-sheet-container .bottom-sheet-body .bottom-sheet-header-3-elements span, .bottom-sheet-container .bottom-sheet-body-post .bottom-sheet-header-3-elements span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #838383;
}
.bottom-sheet-container .bottom-sheet-body .bottom-sheet-header-3-elements h1, .bottom-sheet-container .bottom-sheet-body-post .bottom-sheet-header-3-elements h1 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  margin: 0px;
}
.bottom-sheet-container .bottom-sheet-body .bottom-sheet-header-3-elements #close-icon, .bottom-sheet-container .bottom-sheet-body-post .bottom-sheet-header-3-elements #close-icon {
  margin-left: auto;
}
.bottom-sheet-container .bottom-sheet-body textarea, .bottom-sheet-container .bottom-sheet-body-post textarea {
  border-radius: 4px;
  border: 1px solid #F2F2F2;
  padding: 14px 20px;
  outline: none;
  resize: none;
  max-height: 100%;
}
.bottom-sheet-container .bottom-sheet-body textarea:focus, .bottom-sheet-container .bottom-sheet-body-post textarea:focus {
  outline: 1px solid #838383;
}
.bottom-sheet-container .bottom-sheet-body #send-message, .bottom-sheet-container .bottom-sheet-body-post #send-message {
  min-height: 48px;
}
.bottom-sheet-container .bottom-sheet-body .members-list-container, .bottom-sheet-container .bottom-sheet-body-post .members-list-container {
  overflow-y: auto;
  gap: 12px;
  display: flex;
  flex-direction: column;
}
.bottom-sheet-container .bottom-sheet-body .show-min-height, .bottom-sheet-container .bottom-sheet-body-post .show-min-height {
  min-height: 120px;
}
.bottom-sheet-container .bottom-sheet-body .member-container, .bottom-sheet-container .bottom-sheet-body-post .member-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 40px;
  max-height: 104px;
}
.bottom-sheet-container .bottom-sheet-body .member-container .forward-check, .bottom-sheet-container .bottom-sheet-body-post .member-container .forward-check {
  margin-right: 0px;
}
.bottom-sheet-container .bottom-sheet-body .member-container img, .bottom-sheet-container .bottom-sheet-body .member-container .skeleton-loader, .bottom-sheet-container .bottom-sheet-body-post .member-container img, .bottom-sheet-container .bottom-sheet-body-post .member-container .skeleton-loader {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.bottom-sheet-container .bottom-sheet-body .member-container span, .bottom-sheet-container .bottom-sheet-body-post .member-container span {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.bottom-sheet-container .bottom-sheet-body .member-container #send-button, .bottom-sheet-container .bottom-sheet-body .member-container #forward-message-button, .bottom-sheet-container .bottom-sheet-body-post .member-container #send-button, .bottom-sheet-container .bottom-sheet-body-post .member-container #forward-message-button {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
.bottom-sheet-container .bottom-sheet-body .member-container .forward-check, .bottom-sheet-container .bottom-sheet-body-post .member-container .forward-check {
  margin-left: auto;
}
.bottom-sheet-container .bottom-sheet-body .member-container .padding-left, .bottom-sheet-container .bottom-sheet-body-post .member-container .padding-left {
  margin-left: auto;
}
.bottom-sheet-container .bottom-sheet-body .add-comment-body, .bottom-sheet-container .bottom-sheet-body-post .add-comment-body {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.bottom-sheet-container .bottom-sheet-body .add-comment-body textarea, .bottom-sheet-container .bottom-sheet-body-post .add-comment-body textarea {
  width: 100%;
}
.bottom-sheet-container .bottom-sheet-body .add-comment-body svg, .bottom-sheet-container .bottom-sheet-body-post .add-comment-body svg {
  flex-shrink: 0;
}
.bottom-sheet-container .bottom-sheet-body .add-comment-body img, .bottom-sheet-container .bottom-sheet-body-post .add-comment-body img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
}
.bottom-sheet-container .bottom-sheet-body .inner-margin, .bottom-sheet-container .bottom-sheet-body-post .inner-margin {
  margin-left: 20px;
}

#loop-gift-notification-section .divider {
  margin-top: 10px;
  margin-bottom: 16px;
}

#loop-gift-sender-profile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#loop-gift-sender-profile .bottom-sheet-header-3-elements {
  padding: 0px 0px 10px 0px;
}
#loop-gift-sender-profile .bottom-sheet-header-3-elements .header {
  text-align: center;
  width: 100%;
  padding-right: 32px;
  color: #252525;
  font-size: 16px;
  font-weight: 500;
}
#loop-gift-sender-profile .profile-container {
  width: 100%;
  text-align: center;
}
#loop-gift-sender-profile .profile-image, #loop-gift-sender-profile .skeleton-loader {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
#loop-gift-sender-profile .list-container {
  padding: 4px;
  display: flex;
  flex-direction: column;
}
#loop-gift-sender-profile .list-container h2 {
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
}
#loop-gift-sender-profile .list-container span {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}

mark {
  padding: 0px !important;
}

/* Style the range slider */
.range-slider {
  -webkit-appearance: none; /* Remove default styling for WebKit browsers */
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 5px;
  background: #CCCCCC;
  outline: none; /* Remove focus outline */
  position: relative;
  --webkitProgressPercent: 0;
  transition: opacity 0.2s;
  /* Optional: Add a track highlight color as the thumb is dragged */
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remove default styling for WebKit browsers */
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF8C4B;
  position: relative;
  cursor: pointer;
  z-index: 2; /* Ensure thumb is above the track */
  top: 50%; /* Position the thumb at the middle */
  transform: translateY(-50%); /* Center-align the thumb vertically */
  /* Increase the touch area */
  box-sizing: border-box;
  padding: 8px; /* Add padding to increase hit area */
}
.range-slider::-moz-range-thumb {
  width: 12px; /* Same size as webkit thumb */
  height: 12px;
  border-radius: 50%;
  background: #FF8C4B;
  cursor: pointer;
  position: relative;
  z-index: 2;
  top: 50%; /* Position the thumb at the middle */
  transform: translateY(-50%); /* Center-align the thumb vertically */
  /* Increase the touch area */
  box-sizing: border-box;
  padding: 8px; /* Add padding to increase hit area */
}
.range-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #CCCCCC;
  border-radius: 5px;
}
.range-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FF8C4B;
  z-index: 1;
  width: var(--webkitProgressPercent);
}

/* Headline types */
.headline-18 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #252525;
}

.margin-top {
  margin-top: 20px;
}

.swipe-actions-right-container {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  visibility: hidden;
  cursor: pointer;
}
.swipe-actions-right-container .delete-button-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 15px;
  gap: 4px;
  background-color: #CE2D4F;
  width: 74px;
}
.swipe-actions-right-container .delete-button-reveal span {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  color: #FFF;
}
.swipe-actions-right-container .read-actions-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 12.5px;
  gap: 4px;
  width: 74px;
  background-color: #E1E1E1;
}
.swipe-actions-right-container .read-actions-reveal span {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  color: #252525;
}

.slide-out {
  /* Start the slide-out animation */
  animation: slideOut 0.5s forwards;
  /* Transition for sliding effect */
  transition: transform 0.5s linear;
}

@keyframes slideOut {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media screen and (max-width: 500px) {
  .bottom-sheet-container .add-comment-body textarea {
    max-height: 200px;
  }
}
@media screen and (min-width: 600px) {
  .status-message-container {
    align-items: center;
  }
}
@media screen and (min-width: 1000px) {
  .onboarding-header nav {
    padding-left: 15%;
    padding-right: 15%;
  }
  .status-bar-container {
    padding: 26px 15% 8px 15%;
  }
  .chip-container-36 {
    padding: 10px 15% 8px 15% !important;
  }
  .reusable-setting-header {
    padding: 36px 15% 16px 15%;
  }
  .hybrid-reusable-setting-header {
    /* Default padding for web */
    padding: 20px 15% 16px 15%;
    /* Safe area adjustments only in Capacitor apps */
  }
  [data-capacitor=true] .hybrid-reusable-setting-header {
    padding: max(0px, 20px - env(safe-area-inset-top, 0px)) 15% 16px 15%;
  }
  .form-section, .margin-horizontal {
    margin-left: 15% !important;
    margin-right: 15% !important;
  }
  .group-device-activation-section {
    padding-left: 15%;
    padding-right: 15%;
  }
  #invite-new-looper .header-profile img, #invite-new-looper .header-profile .skeleton-loader {
    max-width: 350px;
  }
  .header-text {
    text-align: center;
  }
  .reward-container {
    margin-bottom: 15%;
  }
  .confetti-container {
    height: 55%;
  }
  .upload-inner-screen {
    padding-top: 5%;
  }
  .bottom-sheet-container .add-comment-body {
    padding-right: 15%;
    padding-left: 15%;
  }
  .bottom-sheet-header-3-elements, .loop-gift-bottom-sheet {
    margin-right: 15%;
    margin-left: 15%;
  }
  .loop-gift-bottom-container {
    padding-right: 15%;
    padding-left: 15%;
  }
  .skeleton-loader {
    animation: shine-lines 3s infinite linear;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#invite-new-looper .description-header-with-info {
  gap: 10px;
}

#wordhunt-rect-loader {
  animation: none !important;
}

#word-hunt-banner {
  /* Avoid inline style by relying on safe-area env */
  top: calc(env(safe-area-inset-top, 0px) + 20px);
}

/* Word Hunt more-options toggle (reuse posts dropdown visuals) */
#word-hunt-banner .inner-content .content .cta-container #wordhunt-more-options {
  position: relative;
  margin-left: 8px;
  margin-bottom: auto;
  cursor: pointer;
  background: transparent;
  border: none;
}
#word-hunt-banner .inner-content .content .cta-container #wordhunt-more-options .more-options-dropdown {
  right: 0;
  top: 18px; /* place just below the dots */
}

#wordhunt-check-answer {
  border-radius: 6px;
}

#word-hunt-banner .inner-content .content .wordhunt-check-answer-container .wordhunt-tries-badge {
  position: absolute;
  right: 0;
  top: -14px;
  background: #1C192F;
  color: #FFF;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}

/* Transparent backdrop to block click-through when Word Hunt dropdown is open */
.dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 5999; /* below banner (6000), above page */
}

#word-hunt-banner .wordhunt-riddle:empty {
  display: none;
}

.org-home-content {
  padding: 0 16px 80px;
}

.org-home-period-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.org-home-period-chips::-webkit-scrollbar {
  display: none;
}

.org-home-chip {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: #F6F6F6;
  color: #252525;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.org-home-chip:active {
  background: #EBEBEB;
}
.org-home-chip.selected-chip {
  background: #C9D1FD;
  color: #415FF5;
}

.org-home-occupancy-card {
  background: #F6F6F6;
  border-radius: 8px;
  padding: 20px 16px;
  margin-bottom: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.org-home-occupancy-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.org-home-occupancy-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #EBEBEB;
}

.org-home-occupancy-details--single-column {
  grid-template-columns: 1fr;
}

.org-home-detail-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #595959;
  margin-bottom: 8px;
}

.org-home-card-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  color: #252525;
  margin-bottom: 4px;
}

.org-home-card-label {
  font-size: 13px;
  font-weight: 500;
  color: #595959;
}

.org-home-card-sublabel {
  font-size: 11px;
  color: #595959;
  margin-top: 2px;
  opacity: 0.6;
}

.org-home-occupancy-ring {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.org-home-occupancy-ring svg {
  width: 100%;
  height: 100%;
}

.org-home-occupancy-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
}

.org-home-tenant-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.org-home-tenant-label {
  font-size: 12px;
  font-weight: 500;
  color: #595959;
}

.org-home-tenant-count {
  font-size: 12px;
  font-weight: 600;
  color: #252525;
}

.org-home-space-breakdown {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #EBEBEB;
}

.org-home-space-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.org-home-space-name {
  font-size: 12px;
  font-weight: 500;
  color: #595959;
}

.org-home-space-count {
  font-size: 12px;
  font-weight: 600;
  color: #252525;
}

.org-home-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #595959;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #EBEBEB;
}

.org-home-hero-card {
  background: linear-gradient(90deg, #FF975C 0%, #6558F0 100%);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 16px;
}

.org-home-hero-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
}

.org-home-hero-value {
  font-size: 40px;
  font-weight: 700;
  color: white;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px;
}

.org-home-hero-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 6px;
}

.org-home-expand-hint {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
}

.org-home-breakdown {
  background: #F6F6F6;
  border-radius: 0 0 12px 12px;
  margin-top: -8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.org-home-breakdown-inner {
  padding: 20px;
}

.org-home-breakdown-group {
  margin-bottom: 20px;
}
.org-home-breakdown-group:last-child {
  margin-bottom: 0;
}

.org-home-breakdown-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #595959;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #EBEBEB;
}

.org-home-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.org-home-metric {
  text-align: center;
  padding: 12px 4px;
  border-radius: 8px;
}

.org-home-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: #252525;
  line-height: 1.2;
}

.org-home-metric-label {
  font-size: 11px;
  font-weight: 500;
  color: #595959;
  margin-top: 2px;
}

.org-home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: 24px;
}

.org-home-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #252525;
}

.org-home-manage-link {
  font-size: 14px;
  font-weight: 600;
  color: #595959;
  text-decoration: none;
  cursor: pointer;
}

.org-home-device-list {
  margin-bottom: 24px;
}

.org-home-device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F6F6F6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}
.org-home-device-row:active {
  opacity: 0.7;
}
.org-home-device-row:last-child {
  border-bottom: none;
}

.org-home-device-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.org-home-device-icon--kiosk {
  background: #E0F7FA;
}
.org-home-device-icon--intercom {
  background: #EDE9FE;
}

.org-home-device-info {
  flex: 1;
  min-width: 0;
}

.org-home-device-name {
  font-size: 14px;
  font-weight: 500;
  color: #252525;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-home-device-type {
  font-size: 12px;
  color: #595959;
}

.org-home-device-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.org-home-device-status--active {
  color: #059669;
}
.org-home-device-status--inactive {
  color: #595959;
}

.org-home-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.org-home-status-dot--active {
  background: #059669;
  box-shadow: 0 0 6px rgba(5, 150, 105, 0.4);
}
.org-home-status-dot--inactive {
  background: #D9D9D9;
}

.org-home-view-all {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #415FF5;
  cursor: pointer;
}

.org-home-empty-state {
  text-align: center;
  padding: 48px 24px;
}

.org-home-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #252525;
  margin-top: 16px;
}

.org-home-empty-subtitle {
  font-size: 14px;
  color: #595959;
  margin-top: 4px;
}

.org-home-date-range-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px;
}

.org-home-date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: #F6F6F6;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.org-home-date-field:active {
  background: #EBEBEB;
}

.org-home-date-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #595959;
}

.org-home-date-value {
  font-size: 16px;
  font-weight: 500;
  color: #252525;
}

.org-home-date-input {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: #252525;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.org-home-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.org-home-date-apply {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: #415FF5;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.org-home-date-apply:active {
  background: #3550D4;
}

/*# sourceMappingURL=style.css.map */