/* ===== CSS VARIABLES ===== */
:root {
    /* Original main.css variables */
    --ai_chat_border: #343541;
    --lprime: #ddf8fc;
    --llprime: #edfafc;
    --user_msg: #eff0ff;
    --ai_msg: #edfafc;
    --main-text-secondary: grey;
    --main-text-muted: #b4b7c9;
    --main_background: #ffffff;
    --main_text_grey:#000000;  
    
           
    --sc-primary-purple: #6366f1;   /* existing */
    --sc-primary-purple-rgba:rgba(99,102,241,1);
    --sc-primary-purple-light: #7C7EF4;  /* one step lighter */
    --sc-primary-purple-lighter: #9799F6; /* soft tint */
    --sc-primary-purple-dark: #4B4EF0;   /* one step darker */
    --sc-primary-purple-darker: #383AE0; /* rich accent */
    --sc-secondary-warm-coral: #FF8C7A;   /* existing */
    --sc-secondary-coral-light: #FFA697;  /* one step lighter */
    --sc-secondary-coral-lighter: #FFBFB4; /* soft tint for backgrounds */
    --sc-secondary-coral-dark: #E67664;   /* one step darker */
    --sc-secondary-coral-darker: #CC5F4F; 
    --sc-navy-blue: #1E3A8A; /* Dark navy blue */
    --sc-accent-soft-gold: #F2C94C;
    --sc-neutral-cream: #F5F3ED;
    --sc-utility-stone-gray: #888B8D;
    --sc-sidebar-active-color: #FF8C7A;
    --sc-onboarding-card-background-color:#ECEDFD;

    /* Common color variables to reduce redundancy */
    --text-primary: #333;
    --text-secondary: #6c757d;
    --text-white: #fff;
    --bg-light: #f8f9fa;
    --bg-white: #fff;
    --bg-dark: #333;
    --bg-success: #22c55e;
    --bg-primary: var(--sc-primary-purple);
    --bg-primary-hover: var(--sc-primary-purple-dark);
    --bg-info: #007bff;
    --bg-warning: #fff8e6;
    --bg-danger: #DC3545;
    --border-light: #dee2e6;
    --border-medium: #e9ecef;
    --border-dark: #adb5bd;
    
    /* Additional colors found throughout the file */
    --bg-success-light: #28a745;
    --bg-dark-blue: #0b0f19;
    --text-muted: #9397ad;
    --border-spinner: #b4b7c9;
    --bg-fa: #fafafa;
    --bg-gray: #666;
    --bg-highlight: #fff3cd;
    --bg-dot: #d1d5db;
    --bg-blue: #0066CC;
    --bg-info-light: #e3f2fd;
    --bg-info-border: var(--sc-primary-purple);
    
    /* Logo-specific colors */
    --logo-gmail: #EA4335;
    --logo-google: #34A853;
    --logo-zoom: #2D8CFF;
    --logo-dropbox: #0061FF;
    --logo-redtail: #DC3545;
    --logo-hubspot: #FF7A59;
    
    /* Colors found in HTML templates */
    --bg-overlay: rgba(255,255,255, .06);
    --text-grey: grey;
    --bg-input-group: white;
    
    /* Common spacing variables */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    --spacing-xxxl: 4rem;
    
    /* Common border-radius variables */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-xxl: 16px;
    --radius-circle: 50%;

}

/* ===== BASE STYLES ===== */
.navbar-brand {
    margin-left: 0; /* Remove fixed margin to align with sidebar */
}

.navbar-toggler-icon,.navbar-toggler-icon:after,.navbar-toggler-icon:before {
    background-color: var(--si-navbar-toggler-color);
    height: .125rem;
    position: absolute;
    transition-property: transform .15s ease;
    width: 1.375rem;
    border: none;
}

/* Fix navbar-toggler alignment to center with the overall logo height */
.navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.5rem 0.25rem;
    border: none;
    box-shadow: none;
    margin-left: auto;
}

/* Ensure the navbar container aligns items properly */
@media (max-width: 767px) { /* sm and xs screens */
    .navbar > .container-fluid {
        align-items: center;
        min-height: 60px; /* Match the logo's visual height */
    }
}

@media (min-width: 768px) { /* md and larger screens */
    .navbar > .container-fluid {
        align-items: center;
        min-height: 70px; /* Match the logo's visual height */
    }
    
}

/* Custom offcanvas footer styling */
.offcanvas-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #fff;
}

/* Navbar background styling - transparent initially, white when sticky */
.navbar {
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.navbar.scrolled {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Adjust navbar-brand to center vertically */
.navbar-brand {
    margin-left: 0;
    display: flex;
    align-items: center;
    height: 100%;
}


/* Logo width to match sidebar width */
.navbar_logo {
    max-width: 100%;
    height: auto;
}

/* Responsive logo width to match sidebar */
@media (min-width: 992px) { /* lg screens */
    .navbar_logo {
        width: 180px; /* fixed width that matches sidebar better */
        max-width: 180px;
    }
}

@media (min-width: 768px) and (max-width: 991px) { /* md screens */
    .navbar_logo {
        width: 160px; /* fixed width for medium screens */
        max-width: 160px;
    }
}

@media (max-width: 767px) { /* sm and xs screens */
    .navbar_logo {
        width: 140px; /* smaller fixed width for mobile */
    }
}

a {
    text-decoration: none;
}

/* This is the container that the entire site is wrapped in. */
#overarching_container {        
    padding-bottom: 150px;
    padding-top: 100px;
}

/* ===== SPINNER COMPONENTS ===== */
.spinner-grow,
.spinner-border {
  display: inline-block;
  width: var(--si-spinner-width);
  height: var(--si-spinner-height);
  vertical-align: var(--si-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--si-spinner-animation-speed) linear infinite var(--si-spinner-animation-name);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}

.spinner-border {
  --si-spinner-width: 2rem;
  --si-spinner-height: 2rem;
  --si-spinner-vertical-align: -0.125em;
  --si-spinner-border-width: 0.15em;
  --si-spinner-animation-speed: 0.75s;
  --si-spinner-animation-name: spinner-border;
  border: var(--si-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.spinner-border-sm {
  --si-spinner-width: 1rem;
  --si-spinner-height: 1rem;
  --si-spinner-border-width: 0.1em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

.spinner-grow {
  --si-spinner-width: 2rem;
  --si-spinner-height: 2rem;
  --si-spinner-vertical-align: -0.125em;
  --si-spinner-animation-speed: 0.75s;
  --si-spinner-animation-name: spinner-grow;
  background-color: currentcolor;
  opacity: 0;
}

.spinner-grow-sm {
  --si-spinner-width: 1rem;
  --si-spinner-height: 1rem;
}

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

.base_row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/* ===== CHAT MESSAGE STYLES ===== */
.thread-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: grey;
    font-weight: bold;
    opacity: 0.7;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-size: 10pt;
}

.thread-divider::before,
.thread-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid lightgray;
}

.thread-divider::before {
    margin-right: 0.75em;
}

.thread-divider::after {
    margin-left: 0.75em;
}

.chat_message_text {
    font-size:14px;
    font-weight:500;
}

.system_question_message_text {
    font-size:14px;
    font-weight:600;
}

.system_question_container {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    --si-bg-opacity: 1;
    background-color: var(--bg-warning)!important;
    padding: 1rem!important;
    margin-bottom:1rem!important;
    margin-top:1rem!important;
}

.ai_message_container {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    --si-bg-opacity: 1;
    background-color: var(--bg-light)!important;
    padding: 1rem!important;
    margin-bottom:1rem!important;
    margin-top:1rem!important;
}

.user_message_container {    
    /* background-color: var(--sc-primary-purple-rgba)!important;     */    
    background-color: var(--sc-primary-purple-dark)!important;
    color: var(--text-white)!important;    
    border-top-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    padding: 1rem!important;
    margin-bottom:.25rem!important;
    margin-top:.25rem!important;
}

.objects_created_message_container {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    --si-bg-opacity: 1;
    background-color: rgba(34,197,94,.12)!important;
    padding: 1rem!important;
    margin-bottom:1rem!important;
    margin-top:1rem!important;
    align-items: center;
    color: var(--bg-success)!important;
}


.active-sidebar-item {
    color:var(--sc-sidebar-active-color);    
    
    }


@media (min-width: 576px) {     
  .ai_user_question_input {    
    width:68%;    
    bottom: 0.0%;    
  }

  .suggestion_card_headline {
    font-size:calc(1.275rem + .3vw);
    font-weight:800;
    color:var(--si-heading-color);
  }
  
}


@media (max-width: 375.01px) { 
    .ai_user_question_input {    
        width:95%;    
        left: 2.5%;
        right: 2.5%;
        margin-left: 0!important;
        bottom:50px!important;
        position:fixed;    
      }
    
}

@media (min-width: 375.02px) and (max-width: 575.98px) { 
    .ai_user_question_input {    
        width:95%;    
        left: 2.5%;
        right: 2.5%;
        margin-left: 0!important;
        bottom:50px!important;
        position:fixed;    
      }
    
  
}


@media (max-width: 575.98px) { 
    .initial_welcome_message{
        font-size:0.8rem;
    }
  .suggestions_regenerated_alert {
        font-size:12px!important;
  }

  .ai_user_question_input > .card-body {
      padding:0.5rem!important;
  }

  .send_button {

    padding: 5px 10px !important;
    font-size: 12px!important;
    line-height: 1.5!important;
    border-radius: 3px!important;
  }

  .refresh_suggestions_button {

    padding: 5px 5px !important;
    font-size: 10px!important;
    line-height: 1.0!important;
    border-radius: 3px!important;
  }

  .suggestion_card_headline {
      font-size:0.875rem;
      font-weight:800;
      color:var(--si-heading-color);
  }


}


.object_created_toast {
    width:700px!important;
}

/* ===== FORM AND BUTTON STYLES ===== */
.delete_icon_for_pill {  
    font-size:14px;
    cursor: pointer;    
}

.before_form_connection_phrase, .after_form_connection_phrase {
    font-size:12px;
    font-weight: 600;
}

.small_btn_for_contact_info {
    max-height: 30px;
    max-width:30px;
    align-items: center;
}

.small_btn_for_contact_info_cancel {
    max-height: 30px;
    align-items: center;
}

/* ===== BACK TO TOP BUTTON ===== */
.btn-scroll-top {
  position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    transition: all 0.3s ease;
}

.btn-scroll-top:hover {
    background-color: var(--bg-primary-hover);
    color: white;
    transform: translateY(-2px);
}

.btn-scroll-top-icon {
    font-size: 18px;
}

.btn-scroll-top-tooltip {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-scroll-top:hover .btn-scroll-top-tooltip {
    opacity: 1;
}

/* ===== ROTATING TEXT EFFECT ===== */
.rotating-text {
    transition: opacity 0.3s ease;
    display: inline-block;
    min-width: 200px; /* Adjust based on your longest phrase */
    text-align: left;
}

/* ===== TOUCHPOINT CTA BUTTON STYLES ===== */
.btn-touchpoint-cta {
    background: linear-gradient(135deg, var(--sc-primary-purple-lighter) 0%, var(--sc-primary-purple-light) 100%);
    border: 2px solid var(--sc-navy-blue);
    color: white;
    font-weight: bold;
    border-radius: 8px;
    padding: 12px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 126, 200, 0.3);
}

.btn-touchpoint-cta:hover {
    background: var(--sc-secondary-warm-coral);
    border-color: var(--sc-secondary-warm-coral);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 126, 200, 0.4);
}

.btn-touchpoint-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(139, 126, 200, 0.3);
}

/* ===== PAGE LOADING STYLES ===== */
.page-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s .2s ease-in-out;
    transition: all .4s .2s ease-in-out;
    background-color: var(--bg-white);
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
}

[data-bs-theme="dark"] .page-loading {
    background-color: var(--bg-dark-blue);
}

.page-loading.active {
    opacity: 1;
    visibility: visible;
}

.page-loading-inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    opacity: 0;
}

.page-loading.active > .page-loading-inner {
    opacity: 1;
}

.page-loading-inner > span {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    color: var(--text-muted);
}

[data-bs-theme="dark"] .page-loading-inner > span {
    color: var(--text-white);
    opacity: .6;
}

.page-spinner {
    display: inline-block;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .75rem;
    vertical-align: text-bottom;
    border: .15em solid var(--border-spinner);
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner .75s linear infinite;
    animation: spinner .75s linear infinite;
}

[data-bs-theme="dark"] .page-spinner {
    border-color: rgba(255,255,255,.4);
    border-right-color: transparent;
}

@-webkit-keyframes spinner {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ===== PARALLAX STYLES ===== */
.parallax {
    position: relative;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===== GRADIENT BACKGROUNDS ===== */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--sc-primary-purple) 0%, var(--sc-primary-purple-light) 100%);
}

/* ===== UTILITY CLASSES ===== */
.zindex-2 {
    z-index: 2;
}

/* ===== PRODUCT SECTION STYLES ===== */
.product-headline {
    text-align: center;
    margin-bottom: 3rem;
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.2;
}

.product-headline h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
}

.prompt-boxes-container {
    max-width: 600px;
    margin: 0 auto;
}

.prompt-box {
    background-color: var(--bg-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.prompt-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.prompt-box-checkmark {
    width: 24px;
    height: 24px;
    background-color: var(--bg-success-light);
    border-radius: 6px;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prompt-box-checkmark::after {
    content: "✓";
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.prompt-box-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ===== FEATURES SECTION STYLES ===== */
.features-headline {
    text-align: center;
    margin-bottom: 4rem;
    font-weight: bold;
    color: var(--text-primary);
}

.features-headline h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.feature-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.feature-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.feature-content {
    min-height: 200px;
}

/* ===== INTEGRATIONS SECTION STYLES ===== */
.integrations-headline {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--text-primary);
}

.integrations-headline h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.integrations-subtitle {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1.4;
}

.integrations-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.integration-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.integration-logo:hover {
    background-color: var(--bg-light);
    transform: translateY(-2px);
}

.logo-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: bold;
    color: white;
    font-size: 14px;
}

.logo-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Logo-specific colors */
.logo-gmail {
    background-color: var(--logo-gmail);
}

.logo-calendar {
    background-color: var(--logo-google);
}

.logo-meet {
    background-color: var(--logo-google);
}

.logo-zoom {
    background-color: var(--logo-zoom);
}

.logo-dropbox {
    background-color: var(--logo-dropbox);
}

.logo-box {
    background-color: var(--logo-dropbox);
}

.logo-redtail {
    background-color: var(--logo-redtail);
}

.logo-wealthbox {
    background-color: var(--logo-dropbox);
}

.logo-hubspot {
    background-color: var(--logo-hubspot);
}

/* ===== SECURITY SECTION STYLES ===== */
.security-headline {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--text-primary);
}

.security-headline h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.security-subtitle {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1.4;
}

.security-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.security-card {
    background: var(--bg-fa);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
}

.security-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.security-card-icon {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 12px;
    line-height: 1;
    background-color: var(--text-secondary);
    transform: translateY(-50%);
}

.security-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    margin-left: 3rem;
}

.security-card-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    margin-left: 3rem;
}

/* ===== BRIEFINGS CARD SPECIFIC STYLES ===== */
.briefings-content {
    background-color: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.briefings-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.briefings-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
}

.briefings-item.highlighted {
    background-color: var(--bg-info-light);
    border-left: 3px solid var(--bg-info-border);
}

.briefings-item i {
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.briefings-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ===== VIDEO TRANSCRIPTS CARD SPECIFIC STYLES ===== */
.video-content {
    background-color: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.video-player {
    background-color: var(--text-primary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.video-people {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.video-person {
    width: 24px;
    height: 24px;
    background-color: var(--bg-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.video-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.8rem;
}

.video-transcript {
    background-color: var(--bg-white);
    border-radius: 6px;
    padding: 0.75rem;
}

.transcript-line {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.transcript-time {
    color: var(--text-secondary);
    min-width: 60px;
}

.transcript-speaker {
    color: var(--text-primary);
    font-weight: 500;
    min-width: 100px;
}

.transcript-text {
    color: var(--text-primary);
}

.highlight {
    background-color: var(--bg-highlight);
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
}

/* ===== RECAPS CARD SPECIFIC STYLES ===== */
.recaps-content {
    background-color: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.recaps-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.recaps-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.recaps-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.recaps-button {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-light);
    background-color: var(--bg-white);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recaps-button.active {
    background-color: var(--bg-info);
    color: var(--text-white);
    border-color: var(--bg-info);
}

.recaps-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
}

/* ===== NOTEPAD CARD SPECIFIC STYLES ===== */
.notepad-content {
    background-color: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.notepad-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.notepad-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-medium);
    position: relative;
    padding-left: 1.5rem;
}

.notepad-item::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-secondary);
}

.notepad-item:last-child {
    border-bottom: none;
}

.notepad-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.notepad-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: var(--text-primary);
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.notepad-toolbar {
    display: flex;
    gap: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-medium);
}

.toolbar-button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-light);
    background-color: var(--bg-white);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.toolbar-button:hover {
    background-color: var(--bg-light);
    border-color: var(--border-dark);
}

/* ===== TESTIMONIALS SECTION STYLES ===== */
.testimonials-headline {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--text-primary);
}

.testimonials-headline h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Testimonials carousel styles */
.testimonials-carousel-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.testimonials-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xxl);
    background: var(--bg-white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.testimonial-carousel-card {
    display: none;
    padding: 3rem;
    text-align: center;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
}

.testimonial-carousel-card.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.testimonial-card-content {
    position: relative;
}

.testimonial-quote {
    font-size: 3rem;
    color: var(--sc-primary-purple);
    margin-bottom: 1.5rem;
    opacity: 0.3;
}

.testimonial-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.author-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--sc-primary-purple) 0%, var(--sc-primary-purple-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.author-info {
    text-align: left;
}

.author-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.author-title {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.testimonial-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-circle);
    background-color: var(--bg-dot);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.testimonial-dot:hover {
    background-color: var(--sc-primary-purple);
    transform: scale(1.2);
}

.testimonial-dot.active {
    background-color: var(--sc-primary-purple);
    border-color: var(--sc-primary-purple-light);
    transform: scale(1.2);
}

/* ===== CTA SECTION STYLES ===== */
.cta-section {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--border-medium) 100%);
    padding: 4rem 0;
    text-align: center;
}

.cta-headline {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1.2;
}

.cta-contact {
    margin-top: 2rem;
}

.cta-contact-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.cta-email {
    font-size: 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}

.cta-email:hover {
    color: var(--bg-info);
    text-decoration: underline;
}

/* ===== FAQ SECTION STYLES ===== */
.accordion-button:not(.collapsed) {
    background-color: var(--bg-light) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

.accordion-button:hover {
    background-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    /* Fix form overflow on tablet screens */
    .form-control {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .d-flex.align-items-start.me-3 .ps-3 {
        flex: 1;
        min-width: 0;
        max-width: calc(100% - 60px);
    }
    
    /* Back to top button responsive */
    .btn-scroll-top {
        bottom: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    
    .btn-scroll-top-icon {
        font-size: 16px;
    }
    
    .rotating-text {
        min-width: 150px; /* Smaller min-width for mobile */
    }
    
    .btn-touchpoint-cta {
        padding: 10px 25px;
        font-size: 0.9rem;
    }

    /* Product section responsive */
    .product-headline h1 {
        font-size: 2rem;
    }
    
    .prompt-box {
        padding: 1.25rem;
    }
    
    .prompt-box-text {
        font-size: 0.95rem;
    }

    /* Features section responsive */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .features-headline h2 {
        font-size: 1.8rem;
    }
    
    .feature-card {
        padding: 1.25rem;
    }
    
    .feature-content {
        min-height: 180px;
    }

    /* Integrations section responsive */
    .integrations-headline h2,
    .testimonials-headline h2 {
        font-size: 2rem;
    }
    
    .integrations-logos {
        gap: 1rem;
    }
    
    .integration-logo {
        flex-direction: column;
        text-align: center;
        gap: 0.25rem;
    }
    
    .logo-text {
        font-size: 0.8rem;
    }

    /* Security section responsive */
    .security-headline h2 {
        font-size: 2rem;
    }
    
    .security-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .security-card {
        padding: 1.5rem;
    }
    
    .security-card-icon {
        top: 50%;
        left: 1rem;
        width: 32px;
        height: 32px;
        font-size: 10px;
        background-color: var(--text-secondary);
        transform: translateY(-50%);
    }
    
    .security-card-title {
        margin-left: 2.5rem;
        font-size: 1.2rem;
    }
    
    .security-card-description {
        margin-left: 2.5rem;
        font-size: 0.9rem;
    }

    /* Testimonials responsive */
    .testimonial-carousel-card {
        padding: 2rem 1.5rem;
    }
    
    .testimonial-text {
        font-size: 1rem;
    }
    
    .testimonial-quote {
        font-size: 2rem;
    }
    
    .author-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .author-name {
        font-size: 1rem;
    }
    
    .author-title {
        font-size: 0.8rem;
    }

    /* General responsive adjustments - consolidated */
    .product-headline h1,
    .features-headline h2,
    .integrations-headline h2,
    .security-headline h2,
    .cta-headline {
        font-size: 2rem;
    }
    
    .prompt-boxes-container {
        max-width: 100%;
    }
}



/* ===== OFFCANVAS NAVBAR STYLES ===== */
/* Custom narrower offcanvas for mobile navbar */
.offcanvas.offcanvas-end {
    width: 280px; /* Reduced from Bootstrap's default ~400px */
    max-width: 85vw; /* Ensure it doesn't exceed 85% of viewport width */
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
    .offcanvas.offcanvas-end {
        width: 260px;
        max-width: 90vw;
    }
}

/* ===== TEMPLATE-SPECIFIC STYLES ===== */
/* Company page styles */
.company-subtitle {
    color: var(--text-secondary);
}

.company-subtitle-link {
    color: var(--text-secondary);
}

.company-sidebar {
    width: 80px;
    background: var(--bg-light);
    border-radius: 12px 0 0 12px;
    padding: 20px 10px;
}

.company-search-icon {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.company-search-input {
    border-radius: 20px;
    border: 1px solid var(--border-medium);
}

.company-card {
    border: 1px solid var(--border-medium);
}

.company-section-icon {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.company-overlay {
    background-color: var(--bg-overlay);
}

/* Pricing page styles */
.pricing-faq-headline {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.pricing-accordion-item {
    border: none;
    border-bottom: 1px solid var(--border-medium);
}

.pricing-accordion-button {
    background-color: var(--bg-light);
    border: none;
    color: var(--text-primary);
    font-weight: 600;
    padding: 1.5rem;
}

.pricing-accordion-body {
    background-color: var(--bg-white);
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 1.5rem;
}

/* Form styles */
.input-group-text-white {
    background-color: var(--bg-input-group);
}

.form-text-secondary {
    color: var(--main-text-secondary);
}

/* Chat and message styles */
.chat-timestamp {
    font-size: 12px;
    color: var(--main-text-secondary);
}

/* Link styles */
.link-inherit {
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
}

.link-inherit-size {
    text-decoration: none;
    color: inherit;
    font-size: inherit;
}

/* Text styles */
.text-grey-small {
    font-size: 8pt;
    color: var(--text-grey);
}

.text-grey-medium {
    font-size: 12pt;
    color: var(--main_text_grey);
    text-decoration: none;
}

/* Container styles */
.container-main-bg {
    background-color: var(--main_background);
}

.container-main-border {
    border: solid 1px var(--main_text_grey);
    border-radius: 20px;
}

/* Error message styles */
.payment-error {
    color: var(--bs-danger);
    font-weight: 700;
}


.menu-mobile {

  color: var(--si-list-group-action-color);  
}

.menu-mobile a {

  text-decoration: none;
  font-size: 27px;  
  
}

@media (max-width: 375px) { 
    .super_small_screens {
        display:block;
    }
    .inline_on_super_small_screens_block_on_kinda_small_screens {
        display:inline;
    }
    .inline_on_super_small_screens_inline_on_kinda_small_screens {
        display:inline;
    }
    .hide_on_super_small_screens {
        display:none;
    }
    .flex_on_kinda_small_screens {
        display:none;
    }
    .block_on_kinda_small_screens {
        display:none;
    }
    .hide_on_kinda_small_screens {
        display:block;
    }

    .ai_user_question_input_textarea_rows {
        height: 34px;
    }
}
@media (min-width: 375.1px) { 
    .next-button-container-bottom {
        bottom:40%!important;
    }
    .onboarding_overlay_container_margin_top {
        margin-top:150px!important;
    }
    .reduced_font_size_on_super_small_screens {
        font-size:1rem;
    }
    .event_attribute_list {
        font-size:1rem;
    }

    .fs_xl_on_kinda_small_screens_and_md_on_super_small_screens {

        font-size:1.25rem!important;
    }
    .super_small_screens {
        display:none;
    }
    
    .inline_on_super_small_screens_block_on_kinda_small_screens {
        display:block;
    }
    .none_on_super_small_screens_inline_on_kinda_small_screens_and_larger {
        display:inline!important;

    }
    .inline_on_super_small_screens_inline_on_kinda_small_screens {
        display:inline;
    }

    .ai_user_question_input_textarea_rows {
        /* height: 66.8px; */
        height: 34px;
    }

    .flex_on_kinda_small_screens {
        display:flex;
    }
    
    .block_on_kinda_small_screens {
        display:block;
    }
    .hide_on_super_small_screens {
        display:block;
    }
    .hide_on_kinda_small_screens {
        display:none;
    }
}


@media (min-width: 375.1px) and (max-width: 575.98px) { 
    .reduced_font_size_on_any_small_screens {
        font-size:0.8rem;
    }
    .carousel-inner {    
        
        min-height: 400px !important;
        min-width: 330px!important;
        max-width:380px!important;
    }

    .carousel-inner .slide {
        min-width: 330px!important;
        max-width:380px!important;
        min-height: 400px !important;
        
    }


    .carousel-item .suggestion_card {
        min-height: 400px !important;
        
    }

}

@media (max-width: 375px) { 
    .fs_xl_on_kinda_small_screens_and_md_on_super_small_screens {

        font-size:1rem!important;
    }
    .reduced_font_size_on_super_small_screens {
        font-size:0.8rem;
    }
    .reduced_font_size_on_any_small_screens {
        font-size:0.8rem;
    }
    .event_attribute_list {
        font-size:0.8rem;
    }
    .none_on_super_small_screens_inline_on_kinda_small_screens_and_larger {
        display:none!important;

    }
    .carousel-inner {    
        /* max-height: 310px !important; */
        min-height: 380px !important;
        min-width: 330px!important;
        max-width:380px!important;
    }

    .carousel-inner .slide {
        min-width: 330px!important;
        max-width:380px!important;
        min-height: 380px !important;
        /* max-height: 310px !important; */
    }


    .carousel-item .suggestion_card {
        min-height: 380px !important;
        /* max-height: 310px !important;      */
        overflow-y:auto;   
    }

}




@media (max-width: 575.98px) { 
    /* Prevent horizontal overflow on mobile */
    body {
        overflow-x: hidden;
    }
    
    .container-fluid, .row, [class*="col-"] {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    #overarching_container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .suggestion_card .card-body {
        padding-left:0px;
        padding-right:0px;
    }
    
    .factoid_text {
        font-weight: 600!important;
        font-size: 0.875rem;
    }
    .observation_text {
        font-weight: 600!important;
        font-size: 0.875rem;
    }
    .past_event_text {
        font-weight: 600!important;
        font-size: 0.875rem;
    }

    /* Fix horizontal overflow for form inputs in profile edit mode */
    .form-control {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Ensure form containers don't exceed viewport width */
    form {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Constrain the flex containers for factoid and user info items */
    #factoid_list_item_*,
    #user_info_list_item_* {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Make sure the form and buttons container work together */
    .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
        max-width: 100%;
    }
    
    /* Ensure buttons container doesn't cause overflow */
    .buttons_container {
        flex-shrink: 0;
        min-width: fit-content;
    }
    
    /* Specific fix for factoid and user info edit forms */
    .d-flex.align-items-start.me-3 {
        max-width: 100%;
        overflow: hidden;
    }
    
    .d-flex.align-items-start.me-3 .ps-3 {
        flex: 1;
        min-width: 0; /* Allow flex item to shrink below content size */
        max-width: calc(100% - 60px); /* Account for icon width */
    }
    
    .d-flex.align-items-start.me-3 .ps-3 form {
        width: 100%;
        max-width: 100%;
    }

    .status_message_font_size {
        font-size:14px!important;
    }

    .suggestions_container_bottom_margin {
        margin-bottom:300px!important;
    }

    .question_templates_container_on_user_home_bottom_margin {
        margin-bottom:300px!important;
    }

    /* Mobile carousel card styling for intuitive swiping */
    .suggestion-carousel-item {
        background: var(--bg-white);
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin: 0 4px 0 2px;
        padding: 0;
        transition: all 0.3s ease;
        border: 1px solid var(--border-light);
    }

    .suggestion-carousel-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    /* Ensure the card content fits properly within the carousel item */
    .suggestion-carousel-item .suggestion_card {
        border: none;
        box-shadow: none;
        margin-bottom: 0;
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    /* Add internal padding to prevent text from touching card borders */
    .suggestion-carousel-item .suggestion_card .card-body {
        padding: 1rem !important;
    }

    /* Add top margin to carousel-inner to separate from navigation icons */
    .suggestions_carousel .carousel-inner {
        margin-top: 1rem;
    }

    /* Show hint of next card to indicate swipeable content */
    .suggestions_carousel .carousel-inner {
        overflow: visible;
    }

    .suggestions_carousel .carousel-item {
        width: 92%;
        margin-right: 8%;
        position: relative;
        display: none;
        transition: all 0.3s ease;
    }

    .suggestions_carousel .carousel-item.active {
        width: 92%;
        margin-right: 8%;
        opacity: 1;
        transform: translateX(0);
        display: block;
    }

    /* Show only the next card as a preview */
    .suggestions_carousel .carousel-item.active + .carousel-item {
        opacity: 0.4;
        transform: translateX(0);
        position: absolute;
        top: 0;
        left: 94%;
        width: 92%;
        z-index: -1;
        display: block;
        overflow: hidden;
    }

    .change_password_page_container {
        margin-top: 60px;
    }

    .login_page_container {
        margin-top: 100px;
    }

    
    .mobile-menu-container {
        height: 50px;
        margin-top: -20px !important;        
    }

    .mobile-menu-container-inner {
        position: fixed;
        bottom: -8px;
    }
}

@media (min-width: 576px) { 
    .reduced_font_size_on_any_small_screens {
        font-size:1rem;
    }
    .contacts_for_bright_ideas_form_container {

        margin-top:0px;
        margin-bottom:30px;
    
    }

    .want_to_ask_text {
        font-size: 8pt!important;
        color: grey!important;
    }

    .suggestions_container_bottom_margin {
        margin-bottom:150px!important;
    }

    .question_templates_container_on_user_home_bottom_margin {
        margin-bottom:150px!important;
    }

    .factoid_text {
        font-weight: 600!important;
        font-size: 1rem;
    }
    .observation_text {
        font-weight: 600!important;
        font-size: 1rem;
    }
    .past_event_text {
        font-weight: 600!important;
        font-size: 1rem;
    }

    .status_message_font_size {
        font-size:16px!important;
    }
}


.carousel .carousel-indicators button {
    background-color: var(--sc-primary-purple);
    height:3px;
}


.carousel-control-next, .carousel-control-prev {    
    position: relative!important;
    left:unset!important;
    right:unset!important;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}

.carousel-indicators-container {
    display:flex!important;
    justify-content: center!important;
    align-items: center;
    vertical-align: middle;
}
  

.carousel-indicators {
    position: relative;
    right: 0;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 1rem;
    margin-left: 15%;
}


.carousel-control-next-icon {
    height: 25px;
    width: 35px;
    /* margin-left:70px; */
    outline: black;
    background-size: 70%, 70%;
    border-radius: 50%;
    border: 0px;
    background-image: none;  
  }
  

.carousel-control-prev-icon {
    height: 25px;
    width: 35px;
    outline: black;
    background-size: 70%, 70%;
    border-radius: 50%;
    border: 0px;
    background-image: none;  
    /* margin-right:50px; */
  }


.carousel-control-next-icon:after
{
  content: '>';
  font-size: 25px;
  color: var(--sc-primary-purple);
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 25px;
  color: var(--sc-primary-purple);
}

@media (max-width: 767px) { /* sm and xs screens */
    .navbar-padding {
        padding-top:0px!important;
        padding-bottom:0px!important;
    }
}

.vertical_line_for_bottom_nav {
    border-left: 2px solid var(--sc-utility-stone-gray);
    font-size:25px;
    opacity:60%;
}

.logout_icon_for_bottom_nav {
    color:var(--sc-utility-stone-gray);
}



.go_back_link {
    padding-left:0px!important;
}

.recurring_divider {
    border-left: 2px solid var(--sc-primary-purple);
    font-size:13px;
    margin-right:4px;
    margin-left:4px;
    opacity:60%;   
}

@media (max-width: 575.98px) {  
    .top_of_page_spacing_container_collect_payment {
        margin-top: 170px!important;
    }

    
    .public_page_alert {
        font-size:0.8rem;
    }

    .contacts_for_bright_ideas_form_container {

        margin-top:100px;
        margin-bottom:30px;
    
    }

    .mobile_modal_body {
        font-size:0.8rem!important;
    }
    .want_to_ask_text {        
        vertical-align: middle!important;
        font-size: 7pt!important;
        color: grey!important;
    }

    .navigation_pill {
        font-size:12px!important;
    }

    .sticky_mobile_page_header {
        position: fixed;
        top:60px;
        left: 0;
        right: 0;
        z-index:1030;
        background-color: var(--main_background);
        padding-left: 15px;
        padding-right: 15px;
    }

    .sticky_mobile_page_header h1 {
        margin-bottom: 0;
    }

    .sticky_mobile_suggestion_container {
        position: sticky;
        top:140px;
        z-index:1030;
        background-color: var(--main_background);        
        
    }

    .sticky_mobile_user_home_tab_navs {
        position: fixed;
        top:85px;
        padding-top:10px;
        z-index:1030;
        height:50px!important;
        width:100vw;
        background-color: var(--main_background);
    }

    .sticky_mobile_events_home_tab_navs {
        position: fixed;
        top:85px;
        padding-top:10px;
        z-index:1030;
        height:50px!important;
        width:100vw;
        background-color: var(--main_background);
    }


    .event_details_page_header {
        margin-top: 50px;
    }

    .contact_name_page_headline {
        margin-top: 50px;
    }

    .sticky_mobile_suggestion_button {
        position: fixed;
        top: 135px;
        padding-top:5px;
        z-index: 1030;
        background-color: var(--main_background);
    }

    .suggestions_container {
        margin-top: 120px!important;
    }

    .contacts_container {
        margin-top: 44px;
    }

    .user_settings_page_container {
        margin-top: 60px;
    }

    .billing_home_page_container {
        margin-top: 44px;
    }

    .chat-container {
        margin-top: 94px;
    }

    .upcoming_events_container {
        margin-top: 100px;
    }

    .past_events_container {
        margin-top: 100px;
    }

}

.mobile_suggestion_card_detail_list {
    padding: 0;
    list-style-type: none;
    list-style-position: inside;
    font-size: 13px;
}


.mobile_suggested_date {
    font-weight: 600;
}

.mobile_suggested_field_label {
    font-weight: 700;
}





.event_medium_weight {
    font-weight:700;
    color:var(--text-primary)!important;
}
.event_light_weight {
    font-weight:400;
    color:var(--text-primary)!important;
}
.event_bold_weight {
    font-weight: 800;
    color:var(--text-primary)!important;
}

.text-primary-purple-darker {
    color:var(--sc-primary-purple-darker)!important;
}

.text-secondary-warm-coral {
    color:var(--sc-secondary-warm-coral)!important;
}

.num_ratings_for_suggestion {
    color:var(--main-text-secondary);
}
.rating_star_for_suggestion{
    color:var(--sc-accent-soft-gold);
}

.map_preview_iframe {
    border: 1px solid black;
}


.terms_and_privacy_link_within_sidebar {
    font-size: 8pt;
    color: grey;
    text-decoration: none;
}

.terms_and_privacy_container_within_sidebar {
    position: fixed;
    bottom: 25px;
    margin-left: 25px;
    text-align: center;
}

.sidebar_vertical_divider {
    font-size: 8pt;
    color: grey;
    margin-left:2px;
    margin-right:2px;
}


.terms_and_privacy_container_within_sidebar {
    position: fixed;
    bottom: 25px;
    margin-left: 25px;
    text-align: center;
}

@media (max-width: 375px) { 
    .terms_and_privacy_container_within_user_settings {
        margin-top:90px;
        text-align: center;
    }
    .onboarding_overlay_container_margin_top {
        margin-top:90px!important;
    }
    .next-button-container-bottom {
        bottom:25%!important;
    }
}
@media (min-width: 375.1px) and (max-width: 575.98px) { 
    .terms_and_privacy_container_within_user_settings {
        margin-top:250px;
        text-align: center;
    }    
}

.chat_timestamp_text {
    font-size: 12px!important;
    color: var(--main-text-secondary)!important;
}
.factoid_timestamp_text {
    font-size: 12px!important;
    /* color: var(--main-text-muted)!important; */
    color: var(--main-text-muted)!important;
}


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


#just-before-most-recently-asked-message{
    scroll-margin-top: 120px;
}



.mobile_location_brief_phrase {
    font-style:italic;
}


.ask_button_icon {
    font-size:20px!important;
}


.sms_verify_link_icon {
    vertical-align: middle;
}

.sms_verify_link_emphasize {
    font-weight: 600;
    color: var(--sc-primary-purple-dark)!important;
}



.disabled_message_input {
    background-color: #ECEDFD!important;
    pointer-events: none;
    color: #b4b7c9!important;
}


.disabled_send_button {
    box-shadow: none!important;
    background-color: var(--si-btn-disabled-bg)!important;
    border-color: var(--si-btn-disabled-border-color)!important;
    color: var(--si-btn-disabled-color)!important;
    opacity: var(--si-btn-disabled-opacity)!important;
    pointer-events: none!important;
}



@media (max-width: 575.98px) { 

    .just_completed_onboarding_alert {
        font-size:14px!important;
        
    }
}

.mt125_on_all_screens {
    margin-top: .125rem!important;
}



.onboarding_card {
    border-radius: 30px;
    padding: 20px;
    width: 350px;
    min-height: 300px;

    /* background-color: var(--sc-primary-purple); */
    background-color: var(--sc-onboarding-card-background-color);
    border: solid 1px var(--sc-primary-purple-lighter);
    /* color: white!important; */
    color:var(--sc-primary-purple);
    
    z-index: 1051;
    position: relative; /* required for the ::before layering */
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;            
    text-align: center;  
    font-size:12px;
  }
  
  
  
  .onboarding_next_button {
      color: white;
      background-color: var(--sc-accent-soft-gold);
  }
  
  
  .onboarding_checklist_item_description_text {
      font-size:small;
  }
  
  .onboarding_checklist_item_not_yet_label_small {
      font-size:small;
      color:var(--sc-primary-purple);
  }
  
  .onboarding_checklist_item_not_yet_label_big {
      font-size:small;
      color:var(--sc-primary-purple);
  }
  
  .onboarding_slide_text_first_line {
      font-size: 1rem;
      font-weight: 700!important;
      
  }
  .onboarding_slide_text {
      font-size: 1rem;
      font-weight: 500!important;
  }
  .onboarding_slide_text_last_line {
      font-size: 1rem;
      font-weight: 700!important;
  }
  


  .emphasize_in_onboarding_list {
      /* color:var(--sc-secondary-coral-lighter); */
      color:var(--sc-primary-purple-darker);
      font-weight:700!important;
  }

  .onboarding_title {
    color:var(--sc-secondary-warm-coral);    
    font-size:18px!important;
    font-weight:800!important;
  }