*,
:before,
:after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

:root {
    --background: 0 0% 100%;
    --foreground: 220 15% 20%;
    --card: 0 0% 100%;
    --card-foreground: 220 15% 20%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 20%;
    --primary: 75 57% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 75 70% 65%;
    --secondary: 47 88% 50%;
    --secondary-foreground: 220 15% 20%;
    --secondary-glow: 47 90% 65%;
    --muted: 75 20% 95%;
    --muted-foreground: 220 10% 45%;
    --accent: 47 88% 50%;
    --accent-foreground: 220 15% 20%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 75 25% 88%;
    --input: 75 25% 88%;
    --ring: 75 57% 50%;
    --radius: .75rem;
    --gradient-hero: linear-gradient(135deg, hsl(75 57% 50%) 0%, hsl(75 70% 65%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(47 88% 50%) 0%, hsl(47 90% 65%) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .7) 100%);
    --shadow-soft: 0 4px 20px -2px hsl(75 57% 50% / .15);
    --shadow-strong: 0 10px 40px -5px hsl(75 57% 50% / .3);
    --shadow-glow: 0 0 30px hsl(75 70% 65% / .4);
    --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1)
}

.dark {
    --background: 220 20% 12%;
    --foreground: 0 0% 98%;
    --card: 220 18% 15%;
    --card-foreground: 0 0% 98%;
    --popover: 220 18% 15%;
    --popover-foreground: 0 0% 98%;
    --primary: 75 57% 50%;
    --primary-foreground: 220 20% 12%;
    --primary-glow: 75 70% 65%;
    --secondary: 47 88% 50%;
    --secondary-foreground: 220 20% 12%;
    --secondary-glow: 47 90% 65%;
    --muted: 220 15% 20%;
    --muted-foreground: 220 10% 65%;
    --accent: 47 88% 50%;
    --accent-foreground: 220 20% 12%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 15% 25%;
    --input: 220 15% 25%;
    --ring: 75 57% 50%
}

button,
[role=button] {
    cursor: pointer;
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

.topics_chat_wrapper {
    position: fixed;
    bottom: 1.5rem;
    /*right: 1.5rem;*/
    right: 1rem;
    z-index: 99999;
    /*max-height: calc(100vh - 90px);*/
}

.topics_chat_card {
    /*width: 380px;*/
    max-width: 380px;
    width: calc(100vw - 40px);
    border-radius: var(--radius);
    border-width: 1px;
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: .3s;
    animation-name: enter;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
    --tw-enter-opacity: 0;
    --tw-enter-translate-y: 1rem;
    animation-duration: .3s;
    overflow-y: auto;
    max-height: calc(100vh - 90px);
}

.topics_chat_header {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background-image: linear-gradient(to right, hsl(75 57% 50%) 0%, hsl(75 70% 65%) 100%);
    /*background-image: linear-gradient(to right, hsl(75 57% 50%), hsl());
    --tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
    --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: hsl(var(--primary) / .8) var(--tw-gradient-to-position);*/
    padding: .4rem 1rem;
    padding-bottom: .2rem;
}
#chat_header_phone {
  margin-left: 5px;
  /*display: block;*/
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.topics_chat_header_flex {
    /*margin-bottom: .75rem;*/
    margin-bottom: .4rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.topics_chat_header_flex_inner {
    display: flex;
    align-items: center;
    gap: .75rem
}

.topics_chat_header_image_wrap {
    position: relative
}

.topics_chat_header_image_wrap_inner {
    position: relative;
    display: flex;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 9999px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
}
.topics_chat_header_image_wrap_inner_fixed {
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  /*--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);*/
    box-shadow: 0 0 1px 3px #9dc436;
    z-index: 9999;
}
@media screen and (max-width: 768px) {
  .topics_chat_header_image_wrap_inner_fixed {
    right: 10px;
  }
}

.topics_chat_header_image {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%
}

.topics_chat_header_image_abs {
    position: absolute;
    bottom: 0;
    right: 0;
    height: .75rem;
    width: .75rem;
    border-radius: 9999px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1))
}

.topics_chat_header_title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.topics_chat_header_caption {
    font-size: .875rem;
    line-height: 1.25rem;
    color: #ffffffe6
}

.topics_chat_header_sign {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    line-height: 1rem;
    color: #fffc
}

.topics_chat_header_sign_inner {
    display: inline-block;
    height: .5rem;
    width: .5rem
}

.topics_chat_header_sign_inner {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1))
}

.topics_chat_header_close {
    border: none;
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-ring-offset-color: hsl(var(--background));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.topics_chat_header_close:hover {
    background-color: #fff3;
    color: hsl(var(--accent-foreground))
}

.topics_chat_header_close:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: hsl(var(--ring));
    --tw-ring-offset-width: 2px
}

.topics_chat_header_close:disabled {
    pointer-events: none;
    opacity: .5
}

.topics_chat_header_close svg {
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}

.topics_chat_body {
    background-color: hsl(var(--background));
    padding: 1rem
}

.topics_chat_body_header {
    margin-bottom: 1rem
}

.topics_chat_body_header_inner {
    border-radius: var(--radius);
    background-color: hsl(var(--muted));
    padding: 1rem
}

.topics_chat_body_header_inner2 {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    color: hsl(var(--foreground))
}

.topics_chat_body_questions>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}

.topics_chat_body_q {
    display: inline-flex;
    height: auto;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    border-radius: calc(var(--radius) - 2px);
    border-width: 1px;
    border-color: hsl(var(--input));
    background-color: hsl(var(--background));
    padding: .75rem 1rem;
    text-align: left;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-ring-offset-color: hsl(var(--background));
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    border: none;
    box-shadow: 0 0 2px 0 #ccc;
}

.topics_chat_body_q:hover {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / .1);
    box-shadow: 0 0 2px 1px hsl(var(--primary));
    color: hsl(var(--accent-foreground))
}

.topics_chat_body_q:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: hsl(var(--ring));
    --tw-ring-offset-width: 2px
}

.topics_chat_body_q:disabled {
    pointer-events: none;
    opacity: .5
}

.topics_chat_body_q svg {
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}

.topics_chat_body_qtext {
    font-size: .875rem;
    line-height: 1.25rem
}
.topics_chat_question {
    margin-left: 2rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background-color: hsl(var(--primary) / .1);
    padding: 1rem
}

.topics_chat_question_text {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    color: hsl(var(--foreground))
}

.topics_chat_typing_wrap {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--radius);
    background-color: hsl(var(--muted));
    padding: 1rem
}

.topics_chat_typing_text {
    font-size: .875rem;
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground))
}

.topics_chat_typing_loader {
    display: flex;
    gap: .25rem
}

.topics_chat_typing_loader_dot {
    height: .5rem;
    width: .5rem
}

.topics_chat_typing_loader_dot {
    animation: bounce 1s infinite;
    border-radius: 9999px;
    background-color: hsl(var(--muted-foreground))
}

.topics_chat_contact>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.75rem * var(--tw-space-y-reverse))
}

.topics_chat_contact_input {
    display: flex;
    height: 2.5rem;
    width: 100%;
    border-radius: calc(var(--radius) - 2px);
    border-width: 1px;
    border-color: hsl(var(--input));
    background-color: hsl(var(--background));
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-ring-offset-color: hsl(var(--background));
    /*width: calc(100% - 40px);*/
    border: none;
    box-shadow: 0 0 2px 1px #ccc;
    box-sizing: border-box;
}

.topics_chat_contact_input::file-selector-button {
    border-width: 0px;
    background-color: transparent;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: hsl(var(--foreground))
}

.topics_chat_contact_input::-moz-placeholder {
    color: hsl(var(--muted-foreground))
}

.topics_chat_contact_input::placeholder {
    color: hsl(var(--muted-foreground))
}

.topics_chat_contact_input:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: hsl(var(--ring));
    --tw-ring-offset-width: 2px
}

.topics_chat_contact_input:disabled {
    cursor: not-allowed;
    opacity: .5
}

@media (min-width: 768px) {
    .topics_chat_contact_input {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

.topics_chat_contact_btn {
    display: inline-flex;
    height: 2.5rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    background-color: hsl(var(--primary));
    padding: .5rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: hsl(var(--primary-foreground));
    --tw-shadow-color: var(--shadow-strong);
    --tw-shadow: var(--tw-shadow-colored);
    --tw-ring-offset-color: hsl(var(--background));
    transition-property: var(--transition-smooth);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    border: none
}
.topics_chat_question_btn {
  margin-bottom: 8px;
}

.topics_chat_contact_btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: hsl(var(--ring));
    --tw-ring-offset-width: 2px
}

.topics_chat_contact_btn:disabled {
    pointer-events: none;
    opacity: .5
}

.topics_chat_contact_btn svg {
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}
.topics_chat_contact_error {
    margin-top: .25rem;
    margin-bottom: .25rem;
    font-size: .75rem;
    line-height: 1rem;
    color: hsl(var(--secondary))
}

/* animations */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.duration-150 {
    transition-duration: .15s
}

.duration-300 {
    transition-duration: .3s
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
    }
}

.animate-in {
    animation-name: enter;
    animation-duration: .15s;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial
}

.fade-in {
    --tw-enter-opacity: 0
}

.slide-in-from-bottom-4 {
    --tw-enter-translate-y: 1rem
}

.duration-150 {
    animation-duration: .15s
}

.duration-300 {
    animation-duration: .3s
}

.ease-in-out {
    animation-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.paused {
    animation-play-state: paused
}
@keyframes bounce {
    0%,
    to {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8, 0, 1, 1)
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, .2, 1)
    }
}

.animate-bounce {
    animation: bounce 1s infinite
}