#tncBlock li {
    margin-top: 15px
}

#tncBlock *,
#tncBlock :after,
#tncBlock :before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box
}

#tncBlock a {
    color: inherit;
    text-decoration: inherit
}

#tncBlock ol {
    list-style: none;
    margin: 0;
    padding: 0
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.bottom-20 {
    bottom: 100px
}

.flex {
    display: flex
}

.hidden {
    display: none
}

.h-12 {
    height: 48px
}

.h-16 {
    height: 64px
}

.h-18 {
    width: 72px
}

.h-5 {
    height: 20px
}

.h-6 {
    height: 24px
}

.h-7 {
    height: 28px
}

.h-9 {
    height: 36px
}

.h-full {
    height: 100%
}

.max-h-\[704px\] {
    max-height: 704px
}

.min-h-full {
    min-height: 100%
}

.w-10 {
    width: 40px
}

.w-12 {
    width: 48px
}

.w-16 {
    width: 64px
}

.w-24 {
    width: 96px
}

.w-2 {
    width: 8px
}

.w-5 {
    width: 20px
}

.w-6 {
    width: 24px
}

.w-7 {
    width: 28px
}

.w-9 {
    width: 36px
}

.w-16 {
    width: 64px
}

.w-18 {
    width: 72px
}
.w-full {
    width: 100%
}

.min-w-full {
    min-width: 100%
}

.max-w-full {
    max-width: 100%
}

.flex-1 {
    flex: 1 1 0%
}

.-rotate-180 {
    --tw-rotate: -180deg
}

.-rotate-180,
.rotate-0 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-0 {
    --tw-rotate: 0deg
}

.scale-0 {
    --tw-scale-x: 0;
    --tw-scale-y: 0
}

.scale-0,
.scale-100 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.animate-fade-in {
    animation: fade-in .3s ease-out
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.flex-col {
    flex-direction: column
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-center {
    justify-content: center
}

.overflow-hidden {
    overflow: hidden
}

.overflow-y-scroll {
    overflow-y: scroll
}

.scroll-smooth {
    scroll-behavior: smooth
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: 8px
}

.border {
    border-width: 1px
}

.bg-opacity-50 {
    --tw-bg-opacity: 0.5
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: 50%
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.p-4 {
    padding: 16px
}

.px-2 {
    padding-left: 8px;
    padding-right: 8px
}

.px-3 {
    padding-left: 12px;
    padding-right: 12px
}

.px-4 {
    padding-left: 16px;
    padding-right: 16px
}

.pt-10 {
    padding-top: 40px
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-base {
    font-size: 16px;
    line-height: 24px
}

.text-sm {
    font-size: 14px;
    line-height: 20px
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.opacity-0 {
    opacity: 0
}

.opacity-100 {
    opacity: 1
}

.opacity-25 {
    opacity: .25
}

.opacity-75 {
    opacity: .75
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
}

.shadow-md {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.transition {
    transition-duration: .15s;
    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-opacity {
    transition-duration: .15s;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

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

.duration-200 {
    transition-duration: .2s
}

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

:host {
    --chatbot-container-bg-image: none;
    --chatbot-container-bg-color: transparent;
    --chatbot-container-font-family: "Open Sans";
    --chatbot-button-bg-color: #0042da;
    --chatbot-button-color: #fff;
    --chatbot-host-bubble-bg-color: #f7f8ff;
    --chatbot-host-bubble-color: #303235;
    --chatbot-guest-bubble-bg-color: #3b81f6;
    --chatbot-guest-bubble-color: #fff;
    --chatbot-input-bg-color: #fff;
    --chatbot-input-color: #303235;
    --chatbot-input-placeholder-color: #9095a0;
    --chatbot-header-bg-color: #fff;
    --chatbot-header-color: #303235;
    --chatbot-border-radius: 6px;
    --PhoneInputCountryFlag-borderColor: transparent;
    --PhoneInput-color--focus: transparent
}

#tncBlock a {
    color: #16bed7;
    font-weight: 500
}

#tncBlock a:hover {
    text-decoration: underline
}

.scrollable-container::-webkit-scrollbar {
    display: none
}

.scrollable-container {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.text-fade-in {
    transition: opacity .4s ease-in .2s
}

.bubble1,
.bubble2,
.bubble3 {
    background-color: var(--chatbot-host-bubble-color);
    opacity: .5
}

.bubble1,
.bubble2 {
    animation: chatBubbles 1s ease-in-out infinite
}

.bubble2 {
    animation-delay: .3s
}

.bubble3 {
    animation: chatBubbles 1s ease-in-out infinite;
    animation-delay: .5s
}

@keyframes chatBubbles {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    to {
        transform: translateY(0)
    }
}

.chatbot-container {
    background-color: var(--chatbot-container-bg-color);
    background-image: var(--chatbot-container-bg-image);
    font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
}

.chatbot-button {
    background-color: #0042da;
    border: 1px solid #0042da;
    border-radius: var(--chatbot-border-radius);
    color: var(--chatbot-button-color)
}

.chatbot-chat-view {
    max-width: 800px
}

@keyframes loading-gradient {
    0% {
        background-position: -100% 0
    }

    to {
        background-position: 100% 0
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.center {
    flex-direction: column;
    padding: 10px;
    position: relative
}

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

.hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:brightness-90:hover {
    --tw-brightness: brightness(.9);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.active\:brightness-75:active {
    --tw-brightness: brightness(.75);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

@media (min-width:640px) {
    .sm\:right-5 {
        right: 20px
    }

    .sm\:my-8 {
        margin-bottom: 32px;
        margin-top: 32px
    }

    .sm\:w-\[400px\] {
        width: 400px
    }

    .sm\:w-full {
        width: 100%
    }

    .sm\:max-w-lg {
        max-width: 512px
    }

    .sm\:p-0 {
        padding: 0
    }
}

flowise-chatbot {
	border: solid 3px red;
}
flowise-chatbot button{
	border: solid 3px blue;
}
flowise-chatbot button.rounded-full img{
	border: solid 3px yellow;
	width: 64px;
	height: 64px;
}

#bot-root div.justify-start {
	border: solid 2px red;	
}