:root { --anim-easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275); --cf-anim-time: 0.75s; --cf-breakpoint-1: 769px; --cf-color-green: #1ed97b; --cf-font-weight-bold: 900; --cf-color-black: #222222; --cf-color-black-alpha04: rgba(34, 34, 34, 0.4); --cf-color-black-alpha02: rgba(34, 34, 34, 0.2); --cf-color-grey: #ebebeb; --cf-color-white: white; } #cf-context { width: 45vw; height: 350px; margin: auto; } #form { height: 0px; overflow: hidden; } /* Dark Theme */ .dark-theme .conversational-form { font-style: normal; border:1px solid #efefef; } .dark-theme .conversational-form cf-chat scrollable::-webkit-scrollbar { width: 0px; } .dark-theme .conversational-form cf-chat-response { padding-top: 0px; min-width: 200px; } @media (min-width: var(--cf-breakpoint-1)) { .dark-theme .conversational-form cf-chat-response { max-width: 83%; } } .dark-theme .conversational-form cf-chat-response text { font-weight: var(--cf-font-weight-bold); min-height: 42px; font-size: 13px; } .dark-theme .conversational-form cf-chat-response thumb { height: 42px; width: 42px; } .dark-theme .conversational-form cf-chat-response thumb > p { background-color: var(--cf-color-grey); } .dark-theme .conversational-form cf-chat-response:not(:last-of-type) { margin-bottom: 10px; } .dark-theme .conversational-form cf-chat-response.robot { padding-left: 48px; } .dark-theme .conversational-form cf-chat-response.robot text { color: var(--cf-color-black); } .dark-theme .conversational-form cf-chat-response.robot text > p { border-radius: 4px 20px 20px 20px; background: var(--cf-color-grey); } .dark-theme .conversational-form cf-chat-response.robot text > p:not(:only-child):first-child { border-radius: 20px 20px 20px 4px; } .dark-theme .conversational-form cf-chat-response.robot text > p:not(:only-child):last-child { border-radius: 4px 20px 20px 20px; } .dark-theme .conversational-form cf-chat-response.robot thumb { background-color: var(--cf-color-grey); /*background-size: 20px 20px;*/ background-repeat: no-repeat; } .dark-theme .conversational-form cf-chat-response.user { padding-right: 48px; } .dark-theme .conversational-form cf-chat-response.user text { color: var(--cf-color-white); } .dark-theme .conversational-form cf-chat-response.user text > p { background: #222; border-radius: 20px 4px 20px 20px; } .dark-theme .conversational-form cf-chat-response.user thumb { background-color: #222; background-repeat: no-repeat; /*background-size: 20px 16px; background-position: 11px 12px;*/ } .dark-theme .conversational-form cf-input input, .dark-theme .conversational-form cf-input textarea { border-radius: 40px; min-height: 57px; font-size: 14px; padding: 19px 60px 19px 30px; height: 56px; color: var(--cf-color-black-alpha04); font-weight: var(--cf-font-weight-bold); } @media (min-width: var(--cf-breakpoint-1)) { .dark-theme .conversational-form cf-input input, .dark-theme .conversational-form cf-input textarea { font-size: 16px; } } .dark-theme .conversational-form cf-input input:not(:focus), .dark-theme .conversational-form cf-input textarea:not(:focus) { box-shadow: 0 0 1px rgba(58, 58, 58, 0.5); } .dark-theme .conversational-form cf-input-button { background: var(--cf-color-black); height: 42px; width: 42px; border: none; } .dark-theme .conversational-form cf-input-button.microphone-interface { background: var(--cf-color-white); } .dark-theme .conversational-form cf-input-button .cf-icon-progress { background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTggMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTM3Mi4wMDAwMDAsIC05NDUuMDAwMDAwKSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTEuMDAwMDAwLCA5MjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MjIuMDAwMDAwLCAxOS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4xNDAzNTA4OCwyLjEwOTE4MTE0IEw4LjE0MDM1MDg4LDE2LjA4MDkzODUiIGlkPSJMaW5lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuOTkzODAzLCA4LjA2ODc0NSkgcm90YXRlKC0zMTUuMDAwMDAwKSB0cmFuc2xhdGUoLTcuOTkzODAzLCAtOC4wNjg3NDUpICIgcG9pbnRzPSIyLjYyNTkxMzI4IDEzLjQ4Njk1OCAyLjYyNTkxMzI4IDIuNjUwNTMxMjEgMi42MjU5MTMyOCAyLjY1MDUzMTIxIDEzLjM2MTY5MjEgMi42NTA1MzEyMSI+PC9wb2x5bGluZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-size: 18px 19px; } .dark-theme .conversational-form cf-input-button.loading:after { cf-border: x solid var(--cf-color-green); } .dark-theme .conversational-form cf-input-button .cf-icon-audio { background-image: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAYAAAGpAGuzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtlJREFUeNpiUFJSYgDh////M7AwQMB/ZWVlBiYGJADiqACx/N27dxlByu7AZAACiAFqwCeQATA9vDA9KAb8BzGARv8HcRhBHJBpAAHECDIAZjGMAZJA0Y9u1mcg5kEWhJnLC5UEgf1QehFOOwACCFniKBBPBwouQXb8NiC2AuLFyJaDgCc2V+F0Lk4JkGsuYvMHCBhA6QNAQT8QgwUacCBd94DYAYRhUcKAJMkFFPyObDnM199g9gAEELLPMYIGCpYDTYnC5Y1/WHwUic/fjAwEABMDiYBkDaBg2gXErkCcCQom5BCBJQtYLCCH0h8gZgbiJ0Asi6YBFEvnoWxtFiSbQOA2lmAFgQBg0G7EFg/YFIOTKowNEEDYIi4GiKcB8WUgtgYqxvA0MliGFFFWUBsZ8QVrJLp1wNDZRmo8eJCqgZG+SWMQamBBSg64Ms9FYFzwQIu8L0zYkjIasIQmFxA4hqzBD1rEH0ASk4cWI9Oh/GxQ4tMCMq5CBQyB+AKaDY+BWAaI/wI1s4BsuAYqgqGS56F+2gd13n+oYlASZ0EOpXhQJkEy1RFU1UDZd5DzA3Ly3ggNKU6kfM2Inh+YsJR6yIXAf1jmJzviAAIMWxZFBvxAPAeIQ3DIrwHiFKCzP5JjgSe01iIGeAEt2U6qBa+BWIRIC94ALRAlNTOIkBDUIlTLbTTPzqMW0NWCrySY8xVfEXwLiFWRxDSB+AYQdwJxE5EWdEKrTQ0gdR1J/DbIBzPQFM+F0s1AbAvEH/AYDJKzBWayZjS9MDADlpPXAXEgksRbIDYB4gdIYupArAtlg5oSN6EFM8jlCkDmGSAWRlK/HigXhFxUFANxD5oLfkPbJlOhrSFkAArWbCDOAmJWNLkSoOG92MoiUAHfAcRlZCaaLiCuABr+n5jCjhVaXYYCsTMQs6HJ/wLivUC8GoiXAA39TU59gK/9B+snkV3h/CclbJArVrrmZAB+mc1ty+WBKAAAAABJRU5ErkJggg=="); background-size: 12px 19px; mix-blend-mode: difference; } .dark-theme .conversational-form cf-input-button cf-icon-audio-eq { border-color: var(--cf-color-black); } .dark-theme .conversational-form .cf-button { color: var(--cf-color-black); border-color: #dddddd; transition: opacity var(--cf-anim-time) var(--anim-easeOut), border-color var(--cf-anim-time) var(--anim-easeOut), color var(--cf-anim-time) var(--anim-easeOut); background: none !important; font-weight: var(--cf-font-weight-bold); line-height: 1.2; } .dark-theme .conversational-form .cf-button > div { padding: 14px 24px; } .dark-theme .conversational-form .cf-button cf-radio { background: var(--cf-color-black-alpha02); } .dark-theme .conversational-form .cf-button.highlight, .dark-theme .conversational-form .cf-button:focus, .dark-theme .conversational-form .cf-button:hover, .dark-theme .conversational-form .cf-button[checked="checked"], .dark-theme .conversational-form .cf-button.selected { border-color: #5e5e5e; color: var(--cf-color-black-alpha02); } .dark-theme .conversational-form .cf-button.highlight cf-radio, .dark-theme .conversational-form .cf-button.highlight cf-radio, .dark-theme .conversational-form .cf-button.highlight cf-radio, .dark-theme .conversational-form .cf-button:focus cf-radio, .dark-theme .conversational-form .cf-button:focus cf-radio, .dark-theme .conversational-form .cf-button:focus cf-radio, .dark-theme .conversational-form .cf-button:hover cf-radio, .dark-theme .conversational-form .cf-button:hover cf-radio, .dark-theme .conversational-form .cf-button:hover cf-radio, .dark-theme .conversational-form .cf-button[checked="checked"] cf-radio, .dark-theme .conversational-form .cf-button[checked="checked"] cf-radio, .dark-theme .conversational-form .cf-button[checked="checked"] cf-radio, .dark-theme .conversational-form .cf-button.selected cf-radio, .dark-theme .conversational-form .cf-button.selected cf-radio, .dark-theme .conversational-form .cf-button.selected cf-radio { background: var(--cf-color-black); } .dark-theme .conversational-form cf-list-button:after { background-image: none; background: black; width: 5px; height: 5px; border-radius: 50%; } /* Light Theme */ .light-theme .conversational-form { font-family: Helvetica Neue, Helvetica; font-style: normal; } .light-theme .conversational-form cf-chat scrollable::-webkit-scrollbar { width: 0px; } .light-theme .conversational-form cf-chat-response { padding-top: 0px; min-width: 200px; } @media (min-width: var(--cf-breakpoint-1)) { .light-theme .conversational-form cf-chat-response { max-width: 83%; } } .light-theme .conversational-form cf-chat-response text { font-weight: var(--cf-font-weight-bold); min-height: 42px; font-size: 13px; } .light-theme .conversational-form cf-chat-response thumb { height: 42px; width: 42px; } .light-theme .conversational-form cf-chat-response thumb > p { background-color: var(--cf-color-grey); } .light-theme .conversational-form cf-chat-response:not(:last-of-type) { margin-bottom: 10px; } .light-theme .conversational-form cf-chat-response.robot { padding-left: 48px; } .light-theme .conversational-form cf-chat-response.robot text { color: #acb2b6; } .light-theme .conversational-form cf-chat-response.robot text > p { border-radius: 4px 20px 20px 20px; background: #f7f7f7; } .light-theme .conversational-form cf-chat-response.robot text > p:not(:only-child):first-child { border-radius: 20px 20px 20px 4px; } .light-theme .conversational-form cf-chat-response.robot text > p:not(:only-child):last-child { border-radius: 4px 20px 20px 20px; } .light-theme .conversational-form cf-chat-response.robot thumb { background-color: var(--cf-color-grey); /* background-size: 20px 20px;*/ background-repeat: no-repeat; } .light-theme .conversational-form cf-chat-response.user { padding-right: 48px; } .light-theme .conversational-form cf-chat-response.user text { color: #409dff; } .light-theme .conversational-form cf-chat-response.user text > p { background: #e3f1ff; border-radius: 20px 4px 20px 20px; } .light-theme .conversational-form cf-chat-response.user thumb { background-color: var(--cf-color-black); background-repeat: no-repeat; /*background-size: 20px 16px; background-position: 11px 12px;*/ } .light-theme .conversational-form cf-input input, .light-theme .conversational-form cf-input textarea { border-radius: 40px; min-height: 57px; font-size: 14px; padding: 19px 60px 19px 30px; height: 56px; color: var(--cf-color-black-alpha04); font-weight: var(--cf-font-weight-bold); } @media (min-width: var(--cf-breakpoint-1)) { .light-theme .conversational-form cf-input input, .light-theme .conversational-form cf-input textarea { font-size: 16px; } } .light-theme .conversational-form cf-input input:not(:focus), .light-theme .conversational-form cf-input textarea:not(:focus) { box-shadow: 0 0 1px rgba(58, 58, 58, 0.5); } .light-theme .conversational-form cf-input-button { background: var(--cf-color-black); height: 42px; width: 42px; border: none; } .light-theme .conversational-form cf-input-button.microphone-interface { background: var(--cf-color-white); } .light-theme .conversational-form cf-input-button .cf-icon-progress { background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTggMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTM3Mi4wMDAwMDAsIC05NDUuMDAwMDAwKSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NTEuMDAwMDAwLCA5MjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MjIuMDAwMDAwLCAxOS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4xNDAzNTA4OCwyLjEwOTE4MTE0IEw4LjE0MDM1MDg4LDE2LjA4MDkzODUiIGlkPSJMaW5lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuOTkzODAzLCA4LjA2ODc0NSkgcm90YXRlKC0zMTUuMDAwMDAwKSB0cmFuc2xhdGUoLTcuOTkzODAzLCAtOC4wNjg3NDUpICIgcG9pbnRzPSIyLjYyNTkxMzI4IDEzLjQ4Njk1OCAyLjYyNTkxMzI4IDIuNjUwNTMxMjEgMi42MjU5MTMyOCAyLjY1MDUzMTIxIDEzLjM2MTY5MjEgMi42NTA1MzEyMSI+PC9wb2x5bGluZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"); background-size: 18px 19px; } .light-theme .conversational-form cf-input-button.loading:after { cf-border: x solid var(--cf-color-green); } .light-theme .conversational-form cf-input-button .cf-icon-audio { background-image: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAYAAAGpAGuzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtlJREFUeNpiUFJSYgDh////M7AwQMB/ZWVlBiYGJADiqACx/N27dxlByu7AZAACiAFqwCeQATA9vDA9KAb8BzGARv8HcRhBHJBpAAHECDIAZjGMAZJA0Y9u1mcg5kEWhJnLC5UEgf1QehFOOwACCFniKBBPBwouQXb8NiC2AuLFyJaDgCc2V+F0Lk4JkGsuYvMHCBhA6QNAQT8QgwUacCBd94DYAYRhUcKAJMkFFPyObDnM199g9gAEELLPMYIGCpYDTYnC5Y1/WHwUic/fjAwEABMDiYBkDaBg2gXErkCcCQom5BCBJQtYLCCH0h8gZgbiJ0Asi6YBFEvnoWxtFiSbQOA2lmAFgQBg0G7EFg/YFIOTKowNEEDYIi4GiKcB8WUgtgYqxvA0MliGFFFWUBsZ8QVrJLp1wNDZRmo8eJCqgZG+SWMQamBBSg64Ms9FYFzwQIu8L0zYkjIasIQmFxA4hqzBD1rEH0ASk4cWI9Oh/GxQ4tMCMq5CBQyB+AKaDY+BWAaI/wI1s4BsuAYqgqGS56F+2gd13n+oYlASZ0EOpXhQJkEy1RFU1UDZd5DzA3Ly3ggNKU6kfM2Inh+YsJR6yIXAf1jmJzviAAIMWxZFBvxAPAeIQ3DIrwHiFKCzP5JjgSe01iIGeAEt2U6qBa+BWIRIC94ALRAlNTOIkBDUIlTLbTTPzqMW0NWCrySY8xVfEXwLiFWRxDSB+AYQdwJxE5EWdEKrTQ0gdR1J/DbIBzPQFM+F0s1AbAvEH/AYDJKzBWayZjS9MDADlpPXAXEgksRbIDYB4gdIYupArAtlg5oSN6EFM8jlCkDmGSAWRlK/HigXhFxUFANxD5oLfkPbJlOhrSFkAArWbCDOAmJWNLkSoOG92MoiUAHfAcRlZCaaLiCuABr+n5jCjhVaXYYCsTMQs6HJ/wLivUC8GoiXAA39TU59gK/9B+snkV3h/CclbJArVrrmZAB+mc1ty+WBKAAAAABJRU5ErkJggg=="); background-size: 12px 19px; mix-blend-mode: difference; } .light-theme .conversational-form cf-input-button cf-icon-audio-eq { border-color: var(--cf-color-black); } .light-theme .conversational-form .cf-button { color: var(--cf-color-black); border-color: #dddddd; transition: opacity var(--cf-anim-time) var(--anim-easeOut), border-color var(--cf-anim-time) var(--anim-easeOut), color var(--cf-anim-time) var(--anim-easeOut); background: none !important; font-weight: var(--cf-font-weight-bold); line-height: 1.2; } .light-theme .conversational-form .cf-button > div { padding: 14px 24px; } .light-theme .conversational-form .cf-button cf-radio { background: var(--cf-color-black-alpha02); } .light-theme .conversational-form .cf-button.highlight, .light-theme .conversational-form .cf-button:focus, .light-theme .conversational-form .cf-button:hover, .light-theme .conversational-form .cf-button[checked="checked"], .light-theme .conversational-form .cf-button.selected { border-color: #5e5e5e; color: var(--cf-color-black-alpha02); } .light-theme .conversational-form .cf-button.highlight cf-radio, .light-theme .conversational-form .cf-button.highlight cf-radio, .light-theme .conversational-form .cf-button.highlight cf-radio, .light-theme .conversational-form .cf-button:focus cf-radio, .light-theme .conversational-form .cf-button:focus cf-radio, .light-theme .conversational-form .cf-button:focus cf-radio, .light-theme .conversational-form .cf-button:hover cf-radio, .light-theme .conversational-form .cf-button:hover cf-radio, .light-theme .conversational-form .cf-button:hover cf-radio, .light-theme .conversational-form .cf-button[checked="checked"] cf-radio, .light-theme .conversational-form .cf-button[checked="checked"] cf-radio, .light-theme .conversational-form .cf-button[checked="checked"] cf-radio, .light-theme .conversational-form .cf-button.selected cf-radio, .light-theme .conversational-form .cf-button.selected cf-radio, .light-theme .conversational-form .cf-button.selected cf-radio { background: var(--cf-color-black); } .light-theme .conversational-form cf-list-button:after { background-image: none; background: black; width: 5px; height: 5px; border-radius: 50%; }