/*Default CSS */ .lbb-chat-start h1, .lbb-chat-start h2, .lbb-chat-start h3, .lbb-chat-start h4, .lbb-chat-start h5, .lbb-chat-start h6 { margin: 0; padding: 0; color: #0a0a0a; font-weight: 600; line-height: 1.4em; letter-spacing: normal; font-family: inherit; } .lbb-chat-start h1 a, .lbb-chat-start h2 a, .lbb-chat-start h3 a, .lbb-chat-start h4 a, .lbb-chat-start h5 a, .lbb-chat-start h6 a { font-size: inherit; line-height: inherit } .lbb-chat-start h1 { font-size: 36px; line-height: 1.3em } .lbb-chat-start h2 { font-size: 28px; line-height: 1.4em } .lbb-chat-start h2 a { color: #0a0a0a } .lbb-chat-start h3 { font-size: 24px; line-height: 1.4em } .lbb-chat-start h4 { font-size: 20px; line-height: 1.6em } .lbb-chat-start h5 { font-size: 18px; line-height: 1.75em } .lbb-chat-start h6 { font-size: 16px; line-height: 1.75em } .lbb-chat-start p { margin: 0; padding: 5px 0 10px 0 } .lbb-chat-start img { border: 0; height: auto; vertical-align: middle; max-width: 100%; } #lbb-app {-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-box-pack: end;-ms-flex-pack: end;-webkit-text-size-adjust: none;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;height: 100%;justify-content: flex-end;width: 100% } #lbb-app[data-align=left], #lbb-app[data-align=left] .lbb-app-wrapper {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start } #lbb-app[data-align=right], #lbb-app[data-align=right] .lbb-app-wrapper {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end } #lbb-app .lbb-app-wrapper {-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-box-pack: end;-ms-flex-pack: end;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;justify-content: flex-end } #lbb-app .lbb-app-wrapper.lbb-app-responsive {height: 100%;max-height: 100%;max-width: 100%;width: 100% } #lbb-app .lbb-app-wrapper .lbb-avatar {height: 100%;position: relative;width: 100% } #lbb-app .lbb-app-wrapper .lbb-avatar .lbb-avatar-image {border-radius: 100%;-webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, .15);box-shadow: 0 0 7px 0 rgba(0, 0, 0, .15);height: 100%;overflow: hidden;width: 100%; background-color: #fff; } #lbb-app .lbb-app-wrapper .lbb-avatar .lbb-avatar-status {border-radius: 100%;border-style: solid;border-width: 1px;bottom: 7%;display: block;height: 16%;position: absolute;right: 7%;width: 16% } #lbb-app .lbb-app-wrapper .lbb-close-inner {border-radius: 100%;display: -webkit-box;display: -ms-flexbox;display: flex } #lbb-app .lbb-app-wrapper .lbb-close-inner svg {height: 100%;width: 100% } #lbb-app .lbb-app-wrapper .lbb-close-inner svg line { stroke: var(--lbb-chat-heading-text-color); } #lbb-app .lbb-app-wrapper .lbb-close-inner {height: 40px;width: 40px; } #lbb-app .lbb-app-wrapper .lbb-lazy-img .lbb-lazy-img-status {-webkit-box-align: center;-ms-flex-align: center;-webkit-box-pack: center;-ms-flex-pack: center;align-items: center;background-position: 50%;background-repeat: no-repeat;display: -webkit-box;display: -ms-flexbox;display: flex;height: 100%;justify-content: center;width: 100% } #lbb-app .lbb-app-wrapper .lbb-lazy-img .lbb-lazy-img-status img {height: 70px;max-height: 80%;max-width: 80%;-o-object-fit: cover;object-fit: cover;width: 70px } #lbb-app .lbb-app-wrapper .lbb-lazy-img img {background: 0 0 !important;display: block;max-width: 100% } #lbb-app .lbb-app-wrapper img {height: 100%;-o-object-fit: var(--lbb-chat-answer-image-object-fit);object-fit: var(--lbb-chat-answer-image-object-fit);width: 100% } #lbb-app .lbb-app-wrapper .lbb-opened {position: relative } #lbb-app .lbb-app-wrapper .lbb-opened {border-radius: 15px;box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px; height: 500px;margin: 20px 0;max-height: calc(100% - 40px);max-width: 100%;overflow: hidden;width: 100% } #lbb-app .lbb-app-wrapper .lbb-opened { height: var(--lbb-chatbot-height); } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat {-webkit-box-orient: vertical;-webkit-box-direction: normal;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;height: 100%;width: 100%; position: relative; } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part {-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;height: 100px;padding: 0;position: relative;width: 100%;z-index: 3; background-color: var(--lbb-chat-heading-bg-color); } #lbb-app.lbb-no-header .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part { display: none; } #lbb-app.lbb-no-header .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part {display: none;} #lbb-app.lbb-no-header .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-no-header-close { right: 5px; position: absolute; background: #000; border-radius: 100%; top: 5px; cursor: pointer; z-index: 1000; } #lbb-app.lbb-no-header .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-no-header-close .lbb-close-inner { width: 30px; height: 30px; } /*#lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part:after { content: ""; position: absolute; width: calc(100% + 10px); bottom: -8px; left: -5px; border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==); border-image-slice: 0 0 100%; border-image-width: 0 0 15px; border-image-repeat: stretch; border-width: 0px 0px 15px; border-bottom-style: solid; border-color: initial; border-top-style: initial; border-left-style: initial; border-right-style: initial; }*/ .color-change-svg { fill: var(--lbb-chat-heading-bg-color); } .lbb-curved-shape-wrapper { position: absolute; width: calc(100% + 10px); bottom: -8px; /*bottom: -15px; */left: -5px; } .lbb-chattype-inline .lbb-curved-shape-wrapper { display: none; } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-close { position: absolute; right: 10px; top: 10px; cursor: pointer; } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-avatar-outer {height: 50px;margin-right: 10px;width: 50px } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-admin-info-wrapper {-webkit-box-flex: 1;-ms-flex-positive: 1;-ms-flex-negative: 0;flex-grow: 1;flex-shrink: 0;width: 0 } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-admin-info-wrapper .lbb-header {cursor: default;font-size: var(--lbb-chat-heading-font-size);font-weight: var(--lbb-chat-heading-font-weight);line-height: 1.5;overflow: hidden !important;padding-right: 15px;text-overflow: ellipsis;white-space: nowrap; font-family: var(--lbb-chat-heading-font-family); color: var(--lbb-chat-heading-text-color); } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-admin-info-wrapper .lbb-admin-bio {cursor: default;font-size: var(--lbb-chat-sub-heading-font-size); color: var(--lbb-chat-sub-heading-text-color); line-height: 1.3; font-weight: var(--lbb-chat-sub-heading-font-weight); } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing {-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;width: 100%; background: rgb(255, 255, 255); } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing {border-top: 1px solid rgb(234, 234, 234);height: 50px;padding-right: 0px } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing input {-webkit-box-flex: 1;background: 0 0;border: 0;-ms-flex: 1 0 0px;flex: 1 0 0;font-size: 16px;height: 100%;line-height: 20px;padding: 0 20px; outline: none; box-shadow: none; color: #000; } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon {-webkit-box-flex: 0;-webkit-backface-visibility: hidden;cursor: pointer;-ms-flex: 0 0 26px;flex: 0 0 26px;height: 26px;-webkit-transition: all .3s;transition: all .3s;width: 26px } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon svg {height: auto; width: 25px; color: #8c7c7c;} #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon svg path {-webkit-transition: fill .3s;transition: fill .3s } .lbb-conversation {-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-box-flex: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex: 1 0 0px;flex: 1 0 0;-ms-flex-direction: column;flex-direction: column;height: 100%;overflow-x: hidden;overflow-y: auto;overscroll-behavior-y: contain;width: 100%; background: var(--lbb-chat-background-color);} .lbb-conversation:after, .lbb-conversation:before {content: "";height: 20px;width: 100% } .lbb-conversation .lbb-message, .lbb-conversation:after, .lbb-conversation:before {-ms-flex-negative: 0;display: -webkit-box;display: -ms-flexbox;display: flex;flex-shrink: 0 } .lbb-conversation .lbb-message {align-items: flex-start;flex-direction: row;padding: 0 0 10px;position: relative;flex-wrap: wrap;} .chat-user-info-wrapper {width: calc(80%);} /*.chat-user-info-wrapper {width: calc(100% - 25px);}*/ .lbb-conversation .lbb-message[data-sending-error] {opacity: .3 } .lbb-conversation .lbb-message[data-user] {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end } .lbb-conversation .lbb-message .lbb-message-date-wrapper:hover, .lbb-conversation .lbb-message>:first-child:hover~.lbb-message-date-wrapper {opacity: 1 !important;visibility: visible } .lbb-conversation .lbb-message .lbb-message-date-wrapper {bottom: 100%;opacity: 0;padding-bottom: 6px;position: absolute;-webkit-transition: opacity .2s;transition: opacity .2s;visibility: hidden } .lbb-conversation .lbb-message .lbb-message-date-wrapper .lbb-message-date {background: #fff;border-radius: 4px;-webkit-box-shadow: -2px 0 15px 0 rgba(0, 0, 0, .1);box-shadow: -2px 0 15px 0 rgba(0, 0, 0, .1);font-size: 15px;line-height: 19px;padding: 5px } .lbb-conversation .lbb-message .lbb-bot-response.button {border: 1px solid;border-radius: 10px;overflow: hidden;width: 240px } .lbb-conversation .lbb-message .lbb-bot-response.image {border-radius: 10px;overflow: hidden } .lbb-conversation .lbb-message .lbb-bot-response.lbb-quick-replies .lbb-quick-replies-text {word-wrap: break-word;border-radius: 20px;font-size: 16px;line-height: 20px;max-width: 100%;padding: 15px 17px;white-space: pre-wrap } .lbb-conversation .lbb-message .lbb-quick-replies-buttons {-webkit-box-pack: center;-ms-flex-pack: center;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;justify-content: center;margin-top: 15px;width: 100% } .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button, .lbb-conversation .lbb-message a.lbb-start-new-conversation, .lbb-conversation .lbb-message a.lbb-download-pdf-link {-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-backface-visibility: hidden;border: 1px solid;border-radius: var(--lbb-chat-answer-btn-border-radius);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--lbb-chat-answer-btn-font-size);font-weight: var(--lbb-chat-answer-btn-font-weight);height: 32px;line-height: 20px;margin: 4px;max-width: 100%;padding: 0 16px;-webkit-transition: all .3s;transition: all .3s; border-color: var(--lbb-chat-answer-btn-border-color); color: var(--lbb-chat-answer-btn-text-color); background: var(--lbb-chat-answer-btn-background-color); } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button a { color: inherit; font-weight: inherit; font-size: inherit; font-style: inherit; text-decoration: none!important; } .start-new-conversation-div { text-align: center; margin-left: auto; margin-right: auto; margin-top: 10px; } .lbb-conversation .lbb-message.lbb-conversation-end-msg { background: rgb(255 255 255 / 0.82); padding: 10px; border-radius: 5px; } .lbb-conversation .lbb-message.lbb-conversation-end-msg .lbb-anchors.lbb-bot-response.lbb-text { color: #000; } .lbb-conversation .lbb-message .lbb-quick-replies-buttons a.lbb-start-new-conversation:hover, .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button:hover, .lbb-conversation .lbb-message a.lbb-download-pdf-link:hover { transform: scale(1.05);} .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button:active, .lbb-conversation .lbb-message a.lbb-download-pdf-link:active {opacity: .5 !important } .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button:disabled {opacity: .2 } .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button span {display: block;max-width: 100%;overflow: hidden !important; /*text-overflow: ellipsis;white-space: nowrap*/ } .lbb-conversation .lbb-message .lbb-bot-response.lbb-text {font-size: var(--lbb-question-font-size);border-radius: 5px;max-width: 100%;line-height: 1.2; /*white-space: pre-wrap;word-wrap: break-word;*/ padding: 12px 15px; position: relative; font-weight: var(--lbb-question-font-weight); background: var(--lbb-question-background-color); color: var(--lbb-question-text-color); max-width: max-content; } #lbb-chat-main-wrapper .lbb-conversation .lbb-message .lbb-text a.lbb-trained-openai-link { word-wrap: break-word; color: inherit; text-decoration: underline; } .lbb-chattype-inline .lbb-conversation .lbb-message .lbb-bot-response.lbb-text { padding: 17px 25px; border-radius: 1px 12px 12px 12px } .lbb-chattype-inline .lbb-conversation .lbb-message .lbb-bot-response.lbb-text:before { content: ''; display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-chattype-inline .lbb-conversation .lbb-message .lbb-quick-replies-buttons{ margin-left: 40px; } .lbb-conversation .lbb-message a.lbb-download-pdf-link{ margin: 10px 0; padding: 16px; height: auto; text-align: center; font-weight: 600; border-radius: 10px; text-decoration: none; } .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button a { color: var(--lbb-chat-answer-btn-text-color); text-decoration: none; } /*.lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button a:hover { color: var(--lbb-chat-answer-btn-background-color)}*/ .lbb-conversation .lbb-message .lbb-bot-response.lbb-text:before { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 0; border-color: transparent var(--lbb-question-background-color) transparent transparent; top: 0; left: -6px; } .lbb-conversation .lbb-message.lbb-message-user .lbb-bot-response.lbb-text:before { left: auto; right: -6px; border-width: 0px 0 10px 10px; border-color: transparent transparent transparent var(--lbb-question-background-color); } .lbb-conversation .lbb-message.lbb-message-user .lbb-bot-response.lbb-text { margin-left: auto; font-size: var(--lbb-user-answer-font-size); font-weight: var(--lbb-user-answer-font-weight); background: var(--lbb-user-answer-background-color); color: var(--lbb-user-answer-text-color); border-radius: 12px 1px 12px 12px;} .lbb-conversation .lbb-message.lbb-message-user .lbb-bot-response.lbb-text:before { border-color: transparent transparent transparent var(--lbb-user-answer-background-color); } .lbb-conversation .lbb-message.lbb-message-user .chat-user-name { display: none; } .lbb-conversation .lbb-message.lbb-message-user .lbb-avatar-outer { display: none; } #lbb-chat-main-wrapper .lbb-conversation .lbb-message .lbb-bot-response.lbb-text h2 { font-size: 22px; color: #000; font-weight: 700!important; margin-bottom: 20px;} #lbb-chat-main-wrapper .lbb-conversation .lbb-message .lbb-bot-response.lbb-text h3 { font-size: 19px; color: #000; font-weight: 700!important; margin-bottom: 20px;} .lbb-conversation .lbb-chat-first-question-inner .lbb-message.lbb-field-type-welcome { margin-bottom: 10px; } .lbb-reset-conversation { display: flex; margin-right: 10px; cursor: pointer; } .lbb-reset-conversation svg { font-size: 25px; fill: #b9b9b9; } .lbb-reset-conversation:hover svg { fill: #000; } #lbb-chat-main-wrapper a.lbb-skip-message-link { color: #000000; line-height: 1; font-size: 14px; display: block; border: 2px solid var(--lbb-chat-answer-btn-background-color); border-radius: 0; padding: 5px 10px; background: #fff; max-width: max-content; margin-left: auto; margin-right: auto; } #lbb-chat-main-wrapper .lbb-skip-message-button.skip-button-div { text-align: center; margin-left: auto; margin-right: auto; display: block; margin-top: 10px; width: calc(80%); } .chat-user-name {line-height: 1;font-size: 13px;margin-bottom: 5px; font-style: italic; opacity: 0.7;} .lbb-conversation .lbb-message .caption {-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;max-width: 100% } .lbb-conversation .lbb-message .caption span {font-size: 14px;line-height: 18px;overflow: hidden !important;text-overflow: ellipsis;white-space: nowrap } #lbb-app .lbb-app-wrapper .lbb-message .lbb-avatar-outer img {height: var(--lbb-container-image-width);margin-right: 6px;overflow: hidden;width: var(--lbb-container-image-width);margin-top: 0px;} .lbb-conversation .lbb-message .buttons {-webkit-box-orient: vertical;-webkit-box-direction: normal;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;width: 100% } .lbb-conversation .lbb-message .buttons .lbb-single-button {-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-backface-visibility: hidden;border-top: 1px solid;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;font-weight: 600;height: 45px;padding: 0 10px;-webkit-transition: all .3s;transition: all .3s } .lbb-conversation .lbb-message .buttons .lbb-single-button:hover {opacity: .8 !important } .lbb-conversation .lbb-message .buttons .lbb-single-button:active {opacity: .5 !important } .lbb-conversation .lbb-message .buttons .lbb-single-button:disabled {opacity: .2 } .lbb-conversation .lbb-message .buttons .lbb-single-button .lbb-single-button-text {overflow: hidden !important;text-align: center;text-overflow: ellipsis;white-space: nowrap;width: 100% } .lbb-conversation .lbb-message .lbb-input-wrapper {-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column } .lbb-conversation .lbb-message .lbb-input-wrapper .lbb-input-wrapper-text {word-wrap: break-word;border-radius: 20px;font-size: 16px;line-height: 20px;max-width: 100%;padding: 15px 17px;white-space: pre-wrap;word-break: break-word } .lbb-message.lbb-message-user { flex-direction: row-reverse; } .lbb-message.lbb-message-user .chat-user-name { text-align: right; } #lbb-app .lbb-app-wrapper .lbb-message.lbb-message-user .lbb-avatar-outer img { margin-right: 0; margin-left: 6px; } .hide-author .lbb-avatar-outer img{opacity: 0;} .hide-author .chat-user-name{display: none;} #lbb-chat-main-wrapper { bottom: 15px; right: 15px; position: fixed; z-index: 99999; margin: 0; width: var(--lbb-chat-container-width); max-width: 100%; text-align: left; font-family: var(--lbb-chat-content-font-family); } .lbb-chat-icon-inner { background: var(--lbb-chat-icon-background-color); line-height: 1; fill: #fff; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; height: auto; border-radius: var(--lbb-chat-icon-btn-border-radius); padding: var(--lbb-chat-icon-padding); ; width: max-content; margin-left: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .lbb-chat-icon-container { margin-top: 15px; } .lbb-chat-icon-inner svg { width: var(--lbb-chat-icon-btn-box-size); fill: var(--lbb-chat-icon-color); height: var(--lbb-chat-icon-btn-box-size); } .lbb-chat-icon-inner svg * { fill: var(--lbb-chat-icon-color)!important; } .lbb-chat-icon-inner > img { width: var(--lbb-chat-icon-btn-box-size); max-width: 100%; min-width: 35px;} #lbb-chat-main-wrapper.lbb-chattype-inline.inline { width: var(--lbb-chat-container-width); max-width: 100%; } .lbb-chattype-inline .lbb-chat-icon-container{ display: none; } .lbb-chat-icon-inner { position: relative; } .lbb-notification-bell-icon { position: absolute; top: -6px; left: -7px; background: red; width: 30px; height: 30px; border-radius: 100%; padding: 7px; display: none; align-items: center; justify-content: center; align-content: center; } .lbb-notification-bell-icon svg { width: 100%; height: auto; } i.lbb-bell-icon-svg { display: flex; flex-direction: column; justify-content: center; align-items: center; } .lbb-new-message-found .lbb-notification-bell-icon { display: flex; } .quick-reply-buttons.lbb-not-button{ pointer-events: none; } .quick-reply-buttons.lbb-not-button{ display: none; } .lbb-chat-start, .lbb-chat-start *, .lbb-chat-start *::before, .lbb-chat-start *::after { box-sizing: border-box!important; } .lbb-not-button{ display: none!important; } /*Input chat field inside message*/ #lbb-chat-main-wrapper .lbb-inline-input-field { position: relative; margin-top: 15px; white-space: nowrap; word-wrap: unset; width: 350px; max-width: 100%; margin-bottom: 10px; } #lbb-chat-main-wrapper .lbb-inline-send-icon { width: 40px; height: 50px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; cursor: pointer; z-index: 999; justify-content: flex-end; } #lbb-chat-main-wrapper .lbb-inline-send-icon svg { color: var(--lbb-question-input-border-color); opacity: 0.4; width: 20px; height: 20px; } #lbb-chat-main-wrapper .lbb-inline-input-field:hover svg { opacity: 1; } /*#lbb-chat-main-wrapper input.lbb_inline_input { box-shadow: inset 0 0 100px 100px rgba(47, 50, 74, 0.04); height: 40px; padding-right: 35px; border-color: #dcdcdc; outline: none; width: 100%; display: block; color: #111; border: 1px solid #ccc; border-radius: 3px; padding: 10px; margin: 0; line-height: normal; }*/ #lbb-chat-main-wrapper input.lbb_inline_input, #lbb-chat-main-wrapper textarea.lbb_inline_input { min-width: 100%; box-shadow: inset 0 0 100px 100px rgba(47, 50, 74, 0.04); height: 58px; padding-right: 35px; border-color: #dcdcdc; outline: none; width: 100%; display: block; color: #282d58; border: 2px solid var(--lbb-question-input-border-color); border-radius: 3px; padding: 16px 30px 15px 17px; margin: 0; line-height: normal; transition: border-color .2s ease-in-out,border-width .2s ease-in-out,background-color .2s ease-in-out,color 1s ease-in-out; font-size: 16px; } #lbb-chat-main-wrapper textarea.lbb_inline_input { min-height: 80px; } #lbb-chat-main-wrapper .lbb-inline-input-field:hover input.lbb_inline_input, #lbb-chat-main-wrapper .lbb-inline-input-field:hover textarea.lbb_inline_input { border-color: var(--lbb-question-input-border-color); } .lbb-email-terms { display: none; margin-top: 10px; } .lbb-inline-input-field.lbb-show-email-terms .lbb-email-terms { display: block; } .lbb-email-terms input[type=checkbox] { height: 22px; width: 22px; min-width: 22px; margin: 0px 6px 0px 0px; float: left; } .lbb-email-terms > label { display: flex; align-items: center; } #lbb-chat-main-wrapper .lbb-field-type-email .lbb-show-email-terms .lbb-inline-send-icon { transform: unset; top: 3px; } .lbb-email-terms-error { color: red; font-size: 14px; margin-top: 5px; display: block; } /* Inpage Chat*/ #lbb-chat-main-wrapper.lbb-chattype-inline{ width: 100%; } .lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part { display: none; } .lbb-chattype-inline .lbb-conversation { background: transparent!important; display: block; height: auto; flex: unset; } #lbb-chat-main-wrapper.lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened { box-shadow: none; height: auto; } #lbb-chat-main-wrapper.lbb-chattype-inline.lbb-chat-user-input #lbb-app .lbb-app-wrapper .lbb-opened { height: var(--lbb-chatbot-height);} .lbb-chattype-inline .lbb-conversation .lbb-message { padding-left: 0; padding-right: 0; } .lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing { border-top: none; border-radius: 5px; padding-right: 0; background: #f8f8f8!important; justify-content: flex-end; position: relative; } .lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing input {margin-right: 0;} .lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon { background: #008a7c; padding: 10px; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 0 5px 5px 0; } .chat-user-submit-time { font-size: 13px; color: var(--lbb-last-chatted-text-color); font-style: italic; line-height: 1; margin-top: 5px; } .lbb-conversation .lbb-message.lbb-message-user .chat-user-submit-time { text-align: right; } .lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon svg path { fill: #fff; } .lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened{ border-radius: 0; } .lbb-chattype-inline #lbb-app .lbb-typing .lbb-fe-footer-action { position: relative; } .lbb-typing-animation { display: flex; align-items: center; font-size: 24px; } .lbb-dot-container { display: flex; margin-right: 8px; } .lbb-dot { width: 8px; height: 8px; background-color: #333; border-radius: 50%; animation: typing-animation 1.5s infinite; margin-right: 4px; opacity: 0; } .lbb-hide{ display: none!important; } /*.lbb-message .lbb-avatar-outer { display: none; }*/ .lbb-message .chat-user-name { display: none; } /* Notification callout */ .lbb-notification-co { display: none; position: fixed; bottom: calc(var(--lbb-chat-icon-padding) + var(--lbb-chat-icon-btn-box-size) + 55px); right: 20px; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .lbb-notification-co-arrow img { position: fixed; bottom: -27px; right: 66px; width: 19px; -webkit-transform: rotate(35deg); transform: rotate(35deg); border: 0; height: auto; vertical-align: middle; max-width: 100%;} .lbb-notification-co-text { color: var(--lbb-callout-text-color); font-weight: 700; letter-spacing: 0; font-size: var(--lbb-callout-font-size); width: 150px; text-align: center; line-height: 1.3; } .lbb-chat-icon-style-image .lbb-notification-co, .lbb-chat-icon-style-video .lbb-notification-co { bottom: calc(var(--lbb-chat-icon-height) + 50px); } .lbb-chat-align-left .lbb-notification-co { left: 20px; right: auto; transform: rotate(35deg); } @keyframes typing-animation { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /*Userchatboat form*/ #lbb-app .lbb-chat-user-info-nice-form { padding: 20px; background-color: #fff;} #lbb-app .lbb-chat-user-info-form-group { margin-bottom: 15px; } #lbb-app .lbb-chat-user-info-label { display: block; font-weight: bold; margin-bottom: 8px; line-height: 1; } #lbb-app .lbb-chat-user-info-input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; margin: 0; outline: none; box-shadow: none; } #lbb-app .lbb-chat-user-info-button { background-color: #007BFF; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; text-align: center; margin: 20px auto 0; display: block; } #lbb-app .lbb-chat-user-info-button:hover { background-color: #0056b3; } #lbb-app .lbb-user-info-popup { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex: 1 0 0px; flex: 1 0 0; -ms-flex-direction: column; flex-direction: column; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; width: 100%; background: var(--lbb-chat-background-color); justify-content: center; display: none; } .lbb-chat-user-input #lbb-app #chat-messages { display: none; } #lbb-app h2.lbb-chat-user-info-form-title { font-size: 22px; text-align: center; font-weight: 600; margin: 0 0 20px 0; padding: 0; } .lbb-chat-user-input #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing { display: none; } .lbb-chat-user-input #lbb-app .lbb-user-info-popup { display: flex; } /*Chat Popup*/ .lbb-confirmation { background-color: #f3f3f3; box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.2); padding: 20px 10px; margin-bottom: 20px; border-radius: 5px 5px 0 0; text-align: center; position: absolute; bottom: 30px; z-index: 9999; left: 0; right: 0; } .lbb-buttons > button.lbb-btn { padding: 10px 30px; line-height: 1; border-radius: 5px; margin: 0; color: #fff; cursor: pointer; background: #000; font-size: 16px; font-weight: 500; text-decoration: none; border: none; box-shadow: none; outline: none; } .lbb-buttons { display: flex; gap: 10px; align-items: center; justify-content: center; } .lbb-buttons > button.lbb-btn.lbb-btn-no { background: #b1b1b1; color: #000; } .lbb-user-popup { display: none; } .lbb-user-popup.lbb-active { display: block; } #lbb-app .lbb-user-popup .lbb-confirmation p { color: #000!important; } .lbb-example-widget-inner { position: relative; border-radius: 15px; overflow: hidden; width: 100px; width: var(--lbb-chat-icon-width); height: 150px; height:var(--lbb-chat-icon-height); padding: 5px; box-shadow: 0 5px 21px rgba(0, 0, 0, 0.15); transition: all 400ms ease; cursor: default; outline: 5px solid var(--lbb-chat-icon-background-color); margin-left: auto; cursor: pointer; } .lbb-example-widget-background-media-img, .lbb-example-widget-background-media-video { position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; transform: translateX(-50%); transition: opacity 1.2s ease; object-fit: cover; } .lbb-example-widget-inner-transition, .lbb-example-widget-inner-fast-transition, .lbb-example-widget-inner-transition-cf { position: relative; width: 100%; height: 100%; z-index: 2; } #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text { position: absolute; bottom: 15px; width: 100%; font-size: 14px; line-height: 16px; font-weight: 600; text-align: center; color: #fff; color: var(--lbb-chat-icon-color); } #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text, #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text h2, #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text h3, #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text h4, #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text p { color: #fff; color: var(--lbb-chat-icon-color); } #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text p { font-size: 14px; line-height: 16px; font-weight: 600; text-align: center; color: var(--lbb-chat-icon-color); } .lbb-example-widget-background-media { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%; width: 100%; } .lbb-example-widget-background-media:before { content: ''; background: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 1; } #lbb-chat-main-wrapper.lbb-template-image .lbb-conversation, #lbb-chat-main-wrapper.lbb-template-video .lbb-conversation{ background: transparent; } .lbb-chat-popup-opened .lbb-widget-type-video .lbb-chat-video-image-close-event, .lbb-chat-popup-opened .lbb-widget-type-image .lbb-chat-video-image-close-event{ display: flex; } .lbb-chat-popup-opened .lbb-widget-type-video .lbb-example-widget-inner.iconInner, .lbb-chat-popup-opened .lbb-widget-type-image .lbb-example-widget-inner.iconInner{ display: none; } .lbb-chat-popup-opened .lbb-widget-type-video .lbb-chat-video-image-close-event svg, .lbb-chat-popup-opened .lbb-widget-type-image .lbb-chat-video-image-close-event svg { width: 35px; height: 35px; } .lbb-chat-popup-opened .lbb-chat-icon-container.lbb-widget-type-video, .lbb-chat-popup-opened .lbb-chat-icon-container.lbb-widget-type-image{ margin-top: 10px; } .lbb-iframe-start .lbb-chat-icon-container.lbb-widget-type-video, .lbb-iframe-start .lbb-chat-icon-container.lbb-widget-type-image { display: none; } #lbb-chat-main-wrapper img.wp-smiley, #lbb-chat-main-wrapper img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } .lbb-chat-icon-close { width: 50px; height: 50px; margin-left: auto; background-color: var(--lbb-chat-icon-background-color); display: none; border-radius: 100%; color: #fff; fill: #fff; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; } .lbb-chat-icon-close svg { width: 27px; height: 27px; } .lbb-chatboatopen .lbb-example-widget-inner { display: none; } .lbb-chatboatopen .lbb-chat-icon-close { display: flex; } /* Answer Img*/ .lbb-conversation .lbb-message .lbb-quick-replies-buttons.lbb-has-image-buttons .lbb-single-button { height: auto; padding: 0; } .lbb-chat-image {margin-top: 10px;} #lbb-chat-main-wrapper .lbb-app-wrapper .lbb-chat-image > img, #lbb-chat-main-wrapper .lbb-chat-first-question-main .lbb-chat-image > img { max-width: 100%; position: relative; border-radius: 5px; max-height: var(--lbb-question-image-height); object-fit: unset; width: auto; } .quick-reply-buttons.lbb-quick-replies-buttons.lbb-has-image-buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } .quick-reply-buttons.lbb-quick-replies-buttons.lbb-has-image-buttons .lbb-single-button.quick-reply-button { width: calc(var(--lbb-chat-answer-button-row-column) - 10px); margin: 0; border-width: 2px; } #lbb-app .lbb-app-wrapper .quick-reply-image > img { height: 120px; object-fit: cover; width: 100%; } span.quick-reply-text { width: 100%; } #lbb-app .lbb-has-image-buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } #lbb-app .lbb-has-image-buttons .lbb-single-button.quick-reply-button { width: calc(50% - 10px); margin: 0; border-width: 2px; } #lbb-app .lbb-quick-replies-buttons.lbb-has-image-buttons .quick-reply-image > img { height: var(--lbb-chat-answer-image-height); object-fit: var(--lbb-chat-answer-image-object-fit); width: 100%; } #lbb-app .lbb-has-image-buttons span.quick-reply-text { width: 100%; } #lbb-app .lbb-has-image-buttons .quick-reply-spn-text { text-align: center; padding: 10px; word-wrap: anywhere;} /*Wordwrap for cut text on smaller width and word is bigger */ #lbb-app .lbb-message-user.lbb-has-image .lbb-anchors.lbb-bot-response.lbb-text { width: 50%; border-radius: 12px 1px 12px 12px; } #lbb-app .lbb-message-user.lbb-has-image .lbb-anchors.lbb-bot-response.lbb-text .quick-reply-spn-img > img { border-radius: 5px; max-height: var(--lbb-chat-answer-image-height); } #lbb-app .lbb-message-user.lbb-has-image .lbb-anchors.lbb-bot-response.lbb-text .quick-reply-spn-img { margin-top: 5px; } #lbb-chat-main-wrapper.lbb-chattype-inline .quick-reply-spn-text > a { text-decoration: none; padding: 0; font-weight: 600; font-size: 16px; } .lbb-chattype-inline .quick-reply-spn-text > a:hover { color: #fff; } /*.lbb-chattype-inline #lbb-app .lbb-has-image-buttons .lbb-single-button.quick-reply-button:hover * { color: #fff; }*/ .lbb-chattype-inline #lbb-app .lbb-quick-replies-buttons.lbb-has-image-buttons .quick-reply-image > img{ height: var(--lbb-chat-answer-image-height); } .lbb-chattype-inline #lbb-app .lbb-has-image-buttons{ justify-content: flex-start; } #lbb-chat-main-wrapper.lbb-chattype-inline .quick-reply-spn-text > a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #lbb-chat-main-wrapper.lbb-chattype-inline span.quick-reply-text { position: relative; } #lbb-chat-main-wrapper .lbb-single-button span.quick-reply-text { font-weight: var(--lbb-chat-answer-btn-font-weight);font-size: var(--lbb-chat-answer-btn-font-size); } /*Loader*/ .lbb-loading-mian{ display:none;} .lbb-loading-mian.lbb-active{ display:block;} .lbb-loader-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 71%); z-index: 99999; display: flex; align-items: center; justify-content: center; } .lbb-loader-wrapper .lbb-loader { position: absolute; } .lbb-loader-wrapper .lbb-loader span { position: absolute; display: block; background: #ddd; height: 20px; width: 20px; border-radius: 50%; top: -20px; perspective: 100000px; } .lbb-loader-wrapper .lbb-loader span:nth-child(1) { right: 60px; animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite; animation-delay: 0s; background: #ff756f; } .lbb-loader-wrapper .lbb-loader span:nth-child(2) { right: 20px; animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite; animation-delay: .2s; background: #ffde6f; } .lbb-loader-wrapper .lbb-loader span:nth-child(3) { right: -20px; animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite; animation-delay: .4s; background: #01de6f; } .lbb-loader-wrapper .lbb-loader span:nth-child(4) { right: -60px; animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite; animation-delay: .6s; background: #6f75ff; } .lbb-loader-wrapper .lbb-loader-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgb(0 0 0 / 71%); z-index: 99999; display: flex; align-items: center; justify-content: center; } .lbb-is-loading .lbb-max-width-auto { opacity: 0; } .lbb-loader-content { color: #dcdcdc; font-size: 17px; margin-top: 50px; font-weight: 600; } #lbb-chat-main-wrapper.minimized .lbb-made-with-outside-wrapper { display: block; width: 100%; background: #fff; } @keyframes bounce2 { 0%, 6%, 100% { transform: translateY(0px); } 25% { transform: translateY(-30px); } } #lbb-chat-main-wrapper .lbb-video-bg-container{ display: none; } /* Template 1 Inline Style*/ #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app .lbb-app-wrapper .lbb-opened { margin: 0; background: var(--lbb-chat-background-color); padding: 0; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; box-shadow: var(--lbb-shadow-horizontal-length) var(--lbb-shadow-vertical-length) var(--lbb-shadow-blur-radius) var(--lbb-shadow-spread-radius) var(--lbb-shadow-background-color); } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation { height: var(--lbb-chatbot-height); overflow-y: auto; position: relative; z-index: 999; } #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon { background: transparent; display: flex; align-items: center; justify-content: center; opacity: 0.5; width: 10px; flex: 0 0 20px; padding: 0; margin-right: 10px; } #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon svg path {fill: #008a7c;} #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing .lbb-send-icon:hover { opacity: 1; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-reset-conversation { margin-right: 8px; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-reset-conversation svg { font-size: 16px; } /*#lbb-chat-main-wrapper.lbb-chattype-inline.lbb-template-wrapper .lbb-typing.lbb-user-input-hide { display: none !important; }*/ .lbb-fe-footer-action { display: flex; gap: 10px; align-items: center; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-fe-footer-action .lbb-reset-conversation { margin-right: 0; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-restart-conversation svg { transform: scaleX(-1); font-size: 16px; width: 19px; fill: #b9b9b9; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-restart-conversation { display: flex; cursor: pointer; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-restart-conversation svg:hover { fill: #000000; } .lbb-fe-footer-action { display: flex; justify-content: flex-end; width: 70px; padding: 0 10px; } .lbb-reset-restart-conversation { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .lbb-back-conversation { line-height: 1; display: flex; gap: 6px; background: var(--lbb-back-button-background-color); padding: 3px 10px; border-radius: 5px; align-items: center; width: max-content; cursor: pointer; font-weight: var(--lbb-back-button-font-weight); font-size: var(--lbb-back-button-font-size); color: var(--lbb-back-button-text-color); } .lbb-back-conversation svg { fill: var(--lbb-back-button-text-color)!important; height: var(--lbb-back-button-font-size); width: auto; } #lbb-chat-main-wrapper .lbb-reset-conversation.lbb-liveform-reset-conv { text-align: center; display: block; margin-right: 0; margin-top: 10px; } #lbb-chat-main-wrapper .lbb-reset-conversation.lbb-liveform-reset-conv svg { font-size: 20px; } #lbb-chat-main-wrapper.lbb-chat-user-input .lbb-confirmation { bottom: 0; margin-bottom: 0; } .lbb-live-mode .lbb-restart-conversation, .lbb-live-mode .lbb-backbutton-conversation-div { display: none!important; } .lbb-chattype-inline #lbb-app.lbb-ai-mode .lbb-made-with-wrapper, .lbb-chattype-inline #lbb-app.lbb-live-mode .lbb-made-with-wrapper{ display: none;} .lbb-chattype-inline #lbb-app.lbb-ai-mode .lbb-made-with-outside-wrapper, .lbb-chattype-inline #lbb-app.lbb-live-mode .lbb-made-with-outside-wrapper{ display: block; position: relative; top: 0px; margin-top: 0;} #lbb-app.lbb-ai-mode .lbb-made-with-wrapper .lbb-made-with-link, #lbb-app.lbb-live-mode .lbb-made-with-wrapper .lbb-made-with-link{ display: block; margin: auto; } #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide .lbb-fe-footer-action { display: flex; justify-content: flex-end; } /*5363 aligment not showing correctly*/ #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide .lbb-fe-footer-action { display: flex; justify-content: center; } #lbb-app.lbb-live-mode .lbb-made-with-wrapper{ display: none;} #lbb-app .lbb-made-with-wrapper .lbb-made-with-link { background: #fff; font-size: 13px!important; display: block; box-shadow: none; padding: 5px 15px 10px; border-radius: 3px; transition: transform 0.15s ease-in-out 0s; color: rgb(0, 0, 238)!important; text-decoration: none!important; line-height: 1; border: none; width: max-content; text-align: center; text-decoration: underline!important; margin-left: auto; margin-right: auto; } #lbb-app .lbb-made-with-wrapper .lbb-made-with-link:hover { color: #000; text-decoration: none!important;} #lbb-app .lbb-made-with-wrapper .lbb-fe-footer-action > div { min-width: 150px; } .lbb-chattype-inline .lbb-back-conversation { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } .lbb-chattype-inline .lbb-reset-restart-conversation { position: absolute; right: 10px; } .lbb-chattype-inline .lbb-made-with-wrapper { width: 100%; display: block; margin: auto; text-align: center; display: flex; justify-content: center; } .lbb-chattype-inline .lbb-made-with-wrapper a.lbb-made-with-link { width: max-content!important; max-width: 100%; margin: 0 100px; } #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide .lbb-fe-footer-action { width: 100%; } .lbb-made-with-outside-wrapper {text-align: center; margin-left: auto; margin-right: auto; } .lbb-max-width-auto { position: relative; } .lbb-made-with-outside-wrapper a.lbb-made-with-link { background: #fff; font-size: 16px!important; display: block; box-shadow: rgba(47, 48, 72, 0.3) 0px 0px 1px 0px; padding: 5px 15px; border-radius: 3px; transition: transform 0.15s ease-in-out 0s; color: #2f2f47!important; text-decoration: none; } #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing{ border-radius: 0; } #lbb-app.lbb-live-mode .lbb-made-with-outside-wrapper { display: block; background: #fff; width: 100%; } .lbb-chattype-inline #lbb-app .lbb-made-with-outside-wrapper { display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation .lbb-message .lbb-quick-replies-buttons { display: flex; justify-content: flex-start; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button { position: relative; min-width: calc(33.33% - 8px); padding: 16px; height: auto; text-align: center; font-weight: 600; border-radius: 10px; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation .lbb-message .lbb-quick-replies-buttons.lbb-question-answer-column-grid-3 .lbb-single-button { min-width: calc(33.33% - 8px); } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation .lbb-message .lbb-quick-replies-buttons.lbb-question-answer-column-grid-2 .lbb-single-button { min-width: calc(50% - 8px); } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation .lbb-message .lbb-quick-replies-buttons.lbb-question-answer-column-grid-1 .lbb-single-button { min-width: calc(100% - 8px); } #lbb-app .lbb-has-image-buttons.lbb-question-answer-column-grid-3 .lbb-single-button.quick-reply-button { width: calc(33.33% - 10px); } #lbb-app .lbb-has-image-buttons.lbb-question-answer-column-grid-2 .lbb-single-button.quick-reply-button { width: calc(50% - 10px); } #lbb-app .lbb-has-image-buttons.lbb-question-answer-column-grid-1 .lbb-single-button.quick-reply-button { width: calc(100% - 10px); } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation{ padding-left: var(--lbb-chat-container-padding); padding-right: var(--lbb-chat-container-padding); } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide { height: auto; padding-top: 5px; padding-bottom: 5px; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button a:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } #lbb-chat-main-wrapper.lbb-chattype-inline .lbb-single-answer-type-url span.quick-reply-text { position: unset; } .lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide { min-height: 50px; } .lbb-chattype-inline #lbb-app.lbb-trained_ai-mode .lbb-fe-footer-action { display: none; } .lbb-chattype-inline #lbb-app.lbb-trained_ai-mode .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing input { background: inherit; } .lbb-chattype-inline #lbb-app.lbb-trained_ai-mode .lbb-made-with-outside-wrapper { display: flex; } .lbb-chattype-inline #lbb-app.lbb-made-with-wrapper { margin-bottom: 50px; } .lbb-chattype-inline #lbb-app.lbb-live-mode.lbb-made-with-wrapper, .lbb-chattype-inline #lbb-app.lbb-trained_ai-mode.lbb-made-with-wrapper { margin-bottom: 0; } /*Scrollbar list icon*/ #lbb-app .lbb-kb-faq ul::-webkit-scrollbar { width: 6px; height: 4px } #lbb-app .lbb-kb-faq ul::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 5px } #lbb-app .lbb-kb-faq ul::-webkit-scrollbar-thumb { background: #888; border-radius: 5px } #lbb-app .lbb-kb-faq ul { display: flex; gap: 10px; list-style: none; margin: 0; overflow-x: auto; padding: 10px; } #lbb-app .lbb-kb-faq ul li { font-size: var(--lbb-question-font-size); border-radius: 5px; line-height: 1; padding: 10px 15px; position: relative; font-weight: var(--lbb-question-font-weight); background: var(--lbb-question-background-color); color: var(--lbb-question-text-color); white-space: nowrap; cursor: pointer; } #lbb-app .lbb-kb-faq { margin-bottom: 0; } .lbb-kb-faq.lbb-kb-faq-processing { pointer-events: none; } /*Template 2 Inline Style*/ #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-template-image #lbb-app .lbb-app-wrapper .lbb-opened, #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-template-image .lbb-conversation.lbb-chat-first-question-main { background-image: var(--lbb-chat-background-image); background-size: cover; background-position: center;} #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-template-image #lbb-app .lbb-app-wrapper .lbb-opened:before, #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-template-image .lbb-conversation.lbb-chat-first-question-main:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.1); } #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-template-image .lbb-conversation{ background: transparent; } /*Template 3 Inline Style*/ #lbb-chat-main-wrapper.lbb-template-video .lbb-video-bg-container{ display: block; background: #fff; } #lbb-chat-main-wrapper.lbb-template-video .lbb-video-bg-container video { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } /*Idle conversation*/ .lbb-conversation .lbb-message.lbb-conversation-end-msg .lbb-bot-response.lbb-text { background: transparent; color: #000; font-size: 15px; text-align: center; margin-top: 5px; padding: 0; max-width: 100%; } .lbb-conversation .lbb-message.lbb-conversation-end-msg .lbb-bot-response.lbb-text:before { content: none; } .lbb-conversation .lbb-message.lbb-conversation-end-msg .chat-user-info-wrapper { width: 100%; } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide input { display: none; } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide .lbb-send-icon { display: none!important; } .lbb-send-icon .lbb-reset-conversation { align-items: center; } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-typing.lbb-user-input-hide { justify-content: center; } #lbb-app .lbb-app-wrapper img.emojioneemoji { max-width: max-content; } #lbb-app .lbb-app-wrapper .emojionearea.emojionearea-inline>.emojionearea-button { right: 30px; } #lbb-app .lbb-app-wrapper .lbb-chat .lbb-typing.lbb-user-input-hide{ border-bottom: none; } /*File upload*/ .lbb-upload-box { padding: 10px 20px; display: grid; place-items: center; border: 2px dashed var(--lbb-question-text-color); border-radius: 5px; margin-bottom: 5px; cursor: pointer; margin: 0; white-space: normal; min-width: 300px; margin-top: 20px; margin-bottom: 10px; } .lbb-upload-box h4 { margin: 0; line-height: 1; padding: 0; white-space: normal; color: var(--lbb-question-text-color); display: flex; gap: 5px; align-items: center; } .lbb-upload-box h4 svg{ color: var(--lbb-question-text-color); } .lbb-conversation .lbb-message.lbb-question-type-attachment .lbb-bot-response.lbb-text { white-space: normal; } .lbb-download-box { white-space: normal; display: flex; gap: 5px; align-items: center; } .lbb-download-box a { color: var(--lbb-question-text-color); font-weight: 600; border-bottom: 2px solid; text-decoration: none; padding-bottom: 1px; } .lbb-download-box svg { fill: var(--lbb-question-text-color); } /*Recording CSS*/ .lbb-recording-contorl-buttons-container { display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; align-items: center; width: 200px; margin-bottom: 0; background: rgba(0,0,0,.1); padding: 10px 10px; border-radius: 10px; margin-left: auto; margin-right: auto; } .lbb-cancel-recording-button, .lbb-stop-recording-button { width: auto; cursor: pointer; } .lbb-cancel-recording-button svg { fill: red; opacity: 0.5; } .lbb-stop-recording-button svg { fill: #0d6b62; opacity: 1; } .lbb-recording-elapsed-time { display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; align-items: center; } .lbb-red-recording-dot { font-size: 20px; color: red; margin-right: 12px; animation-name: flashing-recording-dot; -webkit-animation-name: flashing-recording-dot; -moz-animation-name: flashing-recording-dot; -o-animation-name: flashing-recording-dot; animation-duration: 2s; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; width: 18px; height: 18px; background: red; border-radius: 100%; } .lbb-elapsed-time { font-size: 25px; margin: 0; } .lbb-field-type-audio .lbb-anchors.lbb-bot-response.lbb-text form { white-space: normal; margin-top: 15px; text-align: center; display: block; margin-left: auto; margin-right: auto; } #startRecording { align-items: center; width: max-content; border: 1px solid; text-decoration: none; border-radius: var(--lbb-chat-answer-btn-border-radius); cursor: pointer; display: flex; font-size: var(--lbb-chat-answer-btn-font-size); font-weight: var(--lbb-chat-answer-btn-font-weight); height: 40px; line-height: 20px; margin: 4px; max-width: 100%; gap: 5px; padding: 0 16px; transition: all .3s; border-color: var(--lbb-chat-answer-btn-border-color); color: var(--lbb-chat-answer-btn-text-color); background: var(--lbb-chat-answer-btn-background-color); justify-content: center; align-content: center; margin-left: auto; margin-right: auto; } .lbb-conversation .lbb-field-type-audio .lbb-anchors.lbb-bot-response.lbb-text { white-space: normal;} #startRecording svg{ fill: var(--lbb-chat-answer-btn-text-color); } /* Left alignment */ #lbb-chat-main-wrapper.lbb-chat-align-left:not(.lbb-chattype-inline) { left: 15px; right: auto; } #lbb-chat-main-wrapper.lbb-chat-align-left:not(.lbb-chattype-inline) .lbb-example-widget-inner { margin-right: auto; margin-left: 0; } .lbb-chat-align-left .lbb-chat-icon-inner { margin-right: auto; margin-left: 0; } /* The animation code */ @keyframes flashing-recording-dot { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes flashing-recording-dot { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes flashing-recording-dot { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes flashing-recording-dot { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /*Emoji Css*/ #lbb-chat-main-wrapper .lbb-inline-input-field .emojionearea { box-shadow: inset 0 0 100px 100px rgba(47, 50, 74, 0.04); padding-right: 35px; border-color: #dcdcdc; outline: none; width: 100%; display: block; color: #111; border: 1px solid #ccc; border-radius: 3px; padding: 10px; margin: 0; line-height: normal; } #lbb-chat-main-wrapper .lbb-inline-input-field .emojionearea:hover { border-color: var(--lbb-question-input-border-color); } #lbb-chat-main-wrapper .emojionearea .emojionearea-picker.emojionearea-picker-position-top { height: 196px; } #lbb-chat-main-wrapper .emojionearea .emojionearea-picker.emojionearea-filters-position-top.emojionearea-search-position-top .emojionearea-scroll-area{ height: 196px; } #lbb-chat-main-wrapper .emojionearea .emojionearea-button.active+.emojionearea-picker-position-top { margin-top: -190px; } #lbb-chat-main-wrapper .emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters { display: none; } #lbb-chat-main-wrapper .emojionearea .emojionearea-picker .emojionearea-wrapper { height: 196px; } #lbb-chat-main-wrapper .emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title { display: none; } #lbb-chat-main-wrapper .lbb-text p, #lbb-chat-main-wrapper .lbb-text h2, #lbb-chat-main-wrapper .lbb-text h3 { margin: 0 0 10px 0; padding: 0; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: 1.3; color: inherit!important;} #lbb-chat-main-wrapper .lbb-text p:last-child, #lbb-chat-main-wrapper .lbb-text h2:last-child #lbb-chat-main-wrapper .lbb-text h3:last-child { margin-bottom: 0; padding-bottom: 0; } #lbb-chat-main-wrapper .lbb-conversation .lbb-message .lbb-bot-response.lbb-text > *:last-child { margin-bottom: 0!important; padding-bottom: 0;} #lbb-chat-main-wrapper .lbb-conversation .lbb-message .lbb-bot-response.lbb-text label.lbb-upload-box { padding: 10px 20px; min-width: max-content; } #lbb-chat-main-wrapper .lbb-conversation .lbb-message .lbb-bot-response.lbb-text .lbb-audio-type audio#audioPlayer { width: 250px; } .lbb-made-with-wrapper { display: none; } /*Admin Busy*/ .lbb-conversation-admin-busy .lbb-avatar-outer, .lbb-conversation-end-msg .lbb-avatar-outer{ display: none; } .lbb-conversation-end-msg .lbb-anchors.lbb-bot-response.lbb-text, .lbb-conversation-admin-busy .lbb-anchors.lbb-bot-response.lbb-text { background: rgb(255 255 255 / 0.82); padding: 10px; text-align: center; font-size: 15px; color: #000; line-height: 1.2; } .lbb-conversation-end-msg .lbb-anchors.lbb-bot-response.lbb-text:before, .lbb-conversation-admin-busy .lbb-anchors.lbb-bot-response.lbb-text:before {display: none;} .lbb-conversation-end-msg .chat-user-submit-time, .lbb-conversation-admin-busy .chat-user-submit-time { display: none; } .lbb-message.lbb-admin-response.lbb-conversation-end-msg, .lbb-message.lbb-admin-response.lbb-conversation-admin-busy { width: 100%; } .lbb-conversation-end-msg .chat-user-info-wrapper, .lbb-conversation-admin-busy .chat-user-info-wrapper { width: 100%; } .lbb-special-messages .chat-user-submit-time { display: none; } /*.lbb-conversation .lbb-special-messages { padding-bottom: 0; }*/ .lbb-agent-error .chat-user-submit-time{ display: none!important; } /*New Header Changes*/ #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part { flex-direction: column; display: flex; height: auto; align-items: unset; flex-wrap: nowrap; padding-top: 0; } .lbb-inline-header-elements { display: flex; margin-bottom: 20px; align-content: center; align-items: center; padding-left: 15px; padding-right: 15px;} .lbb-inline-header-elements { margin-top: 15px; margin-bottom: 25px; } #lbb-app .lbb-admin-document-wrapper { display: none; } #lbb-app .lbb-kb-wrapper { display: none; } #lbb-app .lbb-kb-search-form { display: none; } #lbb-app .lbb-action-btn { display: none; } #lbb-app.lbb-help-desk-active-tab .lbb-admin-info-wrapper { display: none; } #lbb-app.lbb-help-desk-active-tab .lbb-avatar-outer { display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app.lbb-help-desk-active-tab .lbb-conversation { display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app.lbb-help-desk-active-tab .lbb-app-wrapper .lbb-chat .lbb-typing { display: none; } #lbb-app.lbb-document-setting-on .lbb-action-btn { display: flex; gap: 10px; margin: auto; margin-top: 0; margin-bottom: 5px; justify-content: center; padding: 10px; background: var(--lbb-knowledge-background-color); width: 100%; } #lbb-app .lbb-action-btn a.lbb-chat-switch-btn { padding: 7px 20px; text-decoration: none; border-radius: 5px; min-width: 100px; text-align: center; font-weight: 600; font-size: 16px; letter-spacing: 1px; color: var(--lbb-knowledge-text-color); display: flex; align-items: center; gap: 10px; line-height: 1; } #lbb-app .lbb-action-btn a.lbb-chat-switch-btn.lbb-chat-switch-active, #lbb-app .lbb-action-btn a.lbb-chat-switch-btn:hover { background: var(--lbb-knowledge-active-background-color); color: var(--lbb-knowledge-active-color); } #lbb-app .lbb-action-btn a.lbb-chat-switch-btn svg, #lbb-app.lbb-document-setting-on .lbb-app-wrapper .lbb-close-inner svg line { fill: var(--lbb-knowledge-text-color); } #lbb-app .lbb-action-btn a.lbb-chat-switch-btn.lbb-chat-switch-active svg, #lbb-app .lbb-action-btn a.lbb-chat-switch-btn:hover svg { fill: var(--lbb-knowledge-active-color); } #lbb-app.lbb-document-setting-on .lbb-admin-docuemnt-heading { cursor: default; font-size: var(--lbb-chat-heading-font-size); font-weight: var(--lbb-chat-heading-font-weight); line-height: 1.5; overflow: hidden !important; padding-right: 15px; text-overflow: ellipsis; white-space: nowrap; font-family: var(--lbb-chat-heading-font-family); color: var(--lbb-chat-heading-text-color); text-align: center; } #lbb-app.lbb-document-setting-on .lbb-inline-header-elements { justify-content: center; margin-top: 10px; } #lbb-app.lbb-help-desk-active-tab .lbb-admin-document-wrapper { display: block; } #lbb-app.lbb-document-setting-on .lbb-curved-shape-wrapper { display: none; } #lbb-app.lbb-document-setting-on .lbb-inline-header-elements { margin-bottom: 15px; } #lbb-app.lbb-document-setting-on.lbb-help-desk-active-tab .lbb-kb-wrapper { padding-left: 0; padding-right: 0; height: var(--lbb-chatbot-height); overflow-y: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex: 1 0 0px; flex: 1 0 0; -ms-flex-direction: column; flex-direction: column; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; width: 100%; background: var(--lbb-chat-background-color); background: #fff; } .lbb-chattype-inline #lbb-app.lbb-document-setting-on.lbb-help-desk-active-tab .lbb-kb-wrapper { height: var(--lbb-chatbot-height); overflow-y: auto; flex: unset; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list a { color: #000; font-size: 18px; text-decoration: none; } #lbb-app.lbb-document-setting-on ul.lbb-kb-list { list-style-type: none; padding: 0; margin: 0; padding-top: 10px; border-top: 3px solid var(--lbb-chat-heading-bg-color); } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list a span.lbb-kb-heading-list { display: flex; font-size: 14px; font-weight: 800; color: #1c293b; line-height: 1.9; align-content: center; align-items: center; gap: 5px; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list a span.lbb-kb-heading-list strong { font-weight: 600; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; width: 100%; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list a span.lbb-kb-content { font-weight: 400; font-size: 13px; line-height: 1.3; display: block; color: #3F51B5; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list a span.lbb-kb-heading-list span.lbb-kb-content { display: inline; line-height: 2; } #lbb-app.lbb-document-setting-on span.lbb-kb-icon {--mask-image: url( data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE0IiB3aWR0aD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjUzIDBhMi40NyAyLjQ3IDAgMDAtMi40NzEgMi40N3Y4LjIzNmEuODI0LjgyNCAwIDAxLTEuNjQ3IDBWMi40N0EyLjQ3IDIuNDcgMCAwMDQuOTQyIDBILjgyM0EuODI0LjgyNCAwIDAwMCAuODI0djExLjUyOWMwIC40NTUuMzY5LjgyMy44MjQuODIzaDUuOTkyYy4yODUuNDkuODEuODI0IDEuNDIuODI0YTEuNjQgMS42NCAwIDAwMS40MTgtLjgyNGg1Ljk5M2EuODI0LjgyNCAwIDAwLjgyNC0uODIzVi44MjNBLjgyNC44MjQgMCAwMDE1LjY0NyAweiIvPjwvc3ZnPg==)!important; -webkit-mask-image: var(--mask-image)!important; mask-image: var(--mask-image)!important; -webkit-mask-size: contain!important; mask-size: contain!important; -webkit-mask-repeat: no-repeat!important; mask-repeat: no-repeat!important; -webkit-mask-position: center!important; mask-position: center!important; display: inline-block!important; vertical-align: middle!important; width: 16px!important; height: 14px!important; margin-top: -2px!important; margin-right: 3px!important; background-color: var(--lbb-chat-heading-bg-color); } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list li:after { content: ""!important; background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MDIgNkwuMzMgMTAuMDcxYTEuMTMgMS4xMyAwIDAwMS41OTggMS41OThsNC45MTYtNC45MTZhMS4wNjQgMS4wNjQgMCAwMDAtMS41MDZMMS45MjkuMzNBMS4xMyAxLjEzIDAgMDAuMzMxIDEuOTI5eiIgZmlsbD0iI2E4YmFjZCIvPjwvc3ZnPg==)!important; background-size: contain!important; background-repeat: no-repeat!important; background-position: center!important; display: inline-block!important; width: 8px!important; height: 11px!important; position: absolute!important; right: 20px!important; top: 50%!important; transform: translateY(-50%)!important; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list li { position: relative; padding: 10px 30px 10px 20px; border-bottom: 1px solid #fff1f1; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list li:last-child { border: none; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list li:hover { background: #f4f4f4; } #lbb-app.lbb-help-desk-active-tab .lbb-kb-search-form { display: flex; } #lbb-app.lbb-document-setting-on .lbb-kb-search-form { background: #fff; margin-top: -1px; border-top: 1px solid rgb(234, 234, 234); height: 50px; padding: 0px 10px; align-items: center; width: 100%; } #lbb-chat-main-wrapper.lbb-template-wrapper #lbb-app.lbb-document-setting-on .lbb-app-wrapper .lbb-chat .lbb-kb-search-input-text { width: 100%; border: none!important; color: #1c293b!important; background: 0 0!important; border: 0!important; width: calc(100% - 10px)!important; outline: none; box-shadow: none; padding: 10px 12px; font-size: 15px; line-height: 1; font-family: inherit; font-weight: 400; } #lbb-app.lbb-document-setting-on span.lbb-kb-search-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjQzNSAxMC4wNjNoLS43MjNsLS4yNTYtLjI0N2E1LjkyIDUuOTIgMCAwMDEuNDM3LTMuODcgNS45NDYgNS45NDYgMCAxMC01Ljk0NyA1Ljk0NyA1LjkyIDUuOTIgMCAwMDMuODctMS40MzdsLjI0Ny4yNTZ2LjcyM0wxNC42MzcgMTYgMTYgMTQuNjM3em0tNS40ODkgMGMtMi4yNzggMC00LjExNi0xLjgzOS00LjExNi00LjExN1MzLjY2OCAxLjgzIDUuOTQ2IDEuODNzNC4xMTcgMS44MzggNC4xMTcgNC4xMTYtMS44MzkgNC4xMTctNC4xMTcgNC4xMTd6IiBmaWxsPSIjYThiYWNkIi8+PC9zdmc+)!important; background-size: contain!important; background-repeat: no-repeat!important; background-position: center!important; display: inline-block!important; width: 16px!important; height: 16px!important; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list li:hover{ border-radius: 10px; } /*Lbb Inline-popup*/ #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main { margin-right: 0; overflow: unset; margin-left: auto; margin-bottom: 10px; padding: 17px 20px; position: relative; display: block; background-color: rgb(255, 255, 255); background: var(--lbb-chat-background-color); box-shadow: rgba(0, 18, 46, 0.26) 0px 8px 26px 0px; border-radius: 10px 10px 10px 0px; color: rgb(0, 0, 0); box-sizing: border-box; width: 100%; height: auto; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main .lbb-message .lbb-avatar-outer img { height: var(--lbb-container-image-width); margin-right: 6px; overflow: hidden; width: var(--lbb-container-image-width); object-fit: var(--lbb-chat-answer-image-object-fit); } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main .lbb-text p { margin-bottom: 0; } /*#lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main.lbb-conversation .lbb-message .lbb-bot-response.lbb-text { background: transparent; padding: 0; font-size: 18px; width: 100%; } */ #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main .lbb-avatar-outer { display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main .chat-user-submit-time { display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main.lbb-conversation .lbb-message { width: 100%; padding: 0; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main .chat-user-info-wrapper { width: 100%; } /*#lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main.lbb-conversation .lbb-message .lbb-bot-response.lbb-text:before { display: none; } */ #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main.lbb-conversation:after, #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main.lbb-conversation:before { display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main.lbb-conversation .lbb-message .lbb-bot-response.lbb-text p { font-size: 19px; width: 100%; } #lbb-chat-main-wrapper.lbb-template-wrapper .lbb-chat-first-question-main .lbb-close-icon { width: 30px; height: 30px; top: -10px; right: -10px; display: none; z-index: 10; border-radius: 30px; content: ''; display: flex; background-size: auto; cursor: pointer; position: absolute; z-index: 111111; background: #dfdfdf; align-items: center; justify-content: center; } .lbb-chattype-inline #lbb-app.lbb-document-setting-on .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part { display: flex; } .lbb-chattype-inline #lbb-app.lbb-document-setting-on .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-inline-header-elements { display: none; } .lbb-chattype-inline #lbb-app.lbb-document-setting-on.lbb-help-desk-active-tab .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-inline-header-elements { margin-top: 15px; display: flex; } .lbb-chattype-inline #lbb-app.lbb-document-setting-on .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-action-btn { margin-bottom: 0; } #lbb-app .lbb-kb-main p.lbb-helpdesk-search-heading { margin: 0; padding: 10px 20px; position: relative; z-index: 1111; color: #000!important; font-size: 16px; font-weight: 500; line-height: 1.2; background: #fff; } #lbb-app.lbb-document-setting-on .lbb-kb-wrapper ul.lbb-kb-list li:first-child { padding-top: 0; margin-top: 0; } #lbb-app .lbb-kb-main p.lbb-helpdesk-search-heading:before { position: absolute; background: var(--lbb-chat-heading-bg-color); left: -15px; right: -15px; top: 0; bottom: 0; display: block; content: ''; z-index: -1; opacity: 0.1; } /*Bell icon new style*/ span.lbb-notification-bell-icon { left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; border-radius: var(--lbb-chat-icon-btn-border-radius); } span.lbb-notification-bell-icon i { animation: bell-ring 2s infinite; } span.lbb-notification-bell-icon i svg { width: 30px; } div#ui-datepicker-div { z-index: 9999!important; padding: 0; border: none; box-shadow: 0px 0px 20px -7px rgba(0,0,0,0.25); } .ui-datepicker-header { height: 100%; line-height: 50px; background: #8392A7; color: #fff; margin-bottom: 10px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { filter: brightness(0) invert(1); } .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker-header .ui-datepicker-next {background: transparent;border: none;} #lbb-app #contactform-configuration h2.lbb-chat-user-info-form-title { font-size: 22px; text-align: left; font-weight: 700; margin: 0; padding: 0; line-height: 1.2 } #lbb-app #contactform-configuration .lbb-chat-user-info-form-group label {display: block; font-weight: 600; line-height: 1; color: #060606; margin-bottom: 5px; font-size: 17px; } #lbb-app #contactform-configuration button.lbb-chat-user-info-button {background-color: var(--lbb-contact-button-background-color); color: var(--lbb-contact-button-text-color); padding: 15px 20px; border: none; border-radius: 10px; cursor: pointer; text-align: center; margin: 20px auto 0; display: block; width: 100%; font-size: var(--lbb-contact-font-size); font-weight: var(--lbb-contact-font-weight); line-height: 1;} #lbb-app #contactform-configuration .lbb-user-info-popup { height: auto; margin-bottom: 0; width: calc(100% - 0px ); background: #fff; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; padding: 40px 30px; margin-top: 20px; background: #ffffff; position: relative; z-index: 11; } #lbb-app #contactform-configuration .lbb-form-group-checkbox input { opacity: 0; float: left; display: none; } #lbb-app #contactform-configuration .lbb-form-group-checkbox input[type=checkbox] + label { margin: 0 0 0 40px; position: relative; cursor: pointer; font-family: inherit; } #lbb-app #contactform-configuration .lbb-form-group-checkbox input[type=checkbox] + label::before { content: ""; position: absolute; left: -40px; top: 0; width: 25px; height: 25px; display: block; background: #fff; border: 1px solid #A9A9A9; } #lbb-app .lbb-form-group-checkbox input[type=checkbox] + label::after { content: ""; position: absolute; left: -35px; top: 6px; width: 15px; height: 15px; display: block; z-index: 1; -ms-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.3s ease; -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4MS4yIDI3MyAxNyAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxODEuMiAyNzMgMTcgMTYiPjxwYXRoIGQ9Ik0tMzA2LjMgNTEuMmwtMTEzLTExM2MtOC42LTguNi0yNC04LjYtMzQuMyAwbC01MDYuOSA1MDYuOS0yMTIuNC0yMTIuNGMtOC42LTguNi0yNC04LjYtMzQuMyAwbC0xMTMgMTEzYy04LjYgOC42LTguNiAyNCAwIDM0LjNsMjMxLjIgMjMxLjIgMTEzIDExM2M4LjYgOC42IDI0IDguNiAzNC4zIDBsMTEzLTExMyA1MjQtNTI0YzctMTAuMyA3LTI1LjctMS42LTM2eiIvPjxwYXRoIGZpbGw9IiMzNzM3MzciIGQ9Ik0xOTcuNiAyNzcuMmwtMS42LTEuNmMtLjEtLjEtLjMtLjEtLjUgMGwtNy40IDcuNC0zLjEtMy4xYy0uMS0uMS0uMy0uMS0uNSAwbC0xLjYgMS42Yy0uMS4xLS4xLjMgMCAuNWwzLjMgMy4zIDEuNiAxLjZjLjEuMS4zLjEuNSAwbDEuNi0xLjYgNy42LTcuNmMuMy0uMS4zLS4zLjEtLjV6Ii8+PHBhdGggZD0iTTExODcuMSAxNDMuN2wtNTYuNS01Ni41Yy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTI1My41IDI1My41LTEwNi4yLTEwNi4yYy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTU2LjUgNTYuNWMtNS4xIDUuMS01LjEgMTIgMCAxNy4xbDExNC43IDExNC43IDU2LjUgNTYuNWM1LjEgNS4xIDEyIDUuMSAxNy4xIDBsNTYuNS01Ni41IDI2Mi0yNjJjNS4yLTMuNCA1LjItMTIgLjEtMTcuMXpNMTYzNC4xIDE2OS40bC0zNy43LTM3LjdjLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0xNjkuNSAxNjkuNS03MC4yLTcxLjljLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0zNy43IDM3LjdjLTMuNCAzLjQtMy40IDguNiAwIDEybDc3LjEgNzcuMSAzNy43IDM3LjdjMy40IDMuNCA4LjYgMy40IDEyIDBsMzcuNy0zNy43IDE3NC43LTE3Ni40YzEuNi0xLjcgMS42LTYuOS0uMS0xMC4zeiIvPjwvc3ZnPg==) no-repeat center center; } #lbb-app #contactform-configuration .lbb-form-group-checkbox input[type=checkbox]:checked + label::after { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } #lbb-app #contactform-configuration .lbb-chat-user-info-nice-form { padding: 0; } #lbb-app #contactform-configuration .lbb-user-info-popup { box-shadow: none; overflow-y: auto; height: 100%; margin: 0; /*justify-content: flex-start;*/ } #lbb-app #contactform-configuration { overflow: auto; position: absolute; top: 0; height: 100%; } .lbb-contact-form-error { color: red; font-size: 14px; font-weight: 500; } #lbb-app p.lbb-chat-user-info-form-description { line-height: 1.2; color: #000; } #lbb-app .lbb-popup-content { margin-bottom: 10px; } .lbb-listing-dots-click { display: none; position: absolute; bottom: 35px; background: #fff; right: -7px; left: auto; width: 160px; padding: 10px; z-index: 999999; line-height: 1; box-shadow: 0px 0px 16px -7px rgb(0 0 0 / 75%); border-radius: 5px; } .lbb-chattype-inline .lbb-allow-bot-to-trained .lbb-made-with-wrapper { display: none; } a.lbb-click-icon-for-listing { display: flex; justify-content: flex-end; } a.lbb-click-icon-for-listing svg { fill: #000!important; width: 24px; height: 24px; background: #e1e1e1; border-radius: 50px; padding: 2px; } a.lbb-click-icon-for-listing svg:hover { fill: #fff!important; background: #000; } .lbb-sub-listing-show .lbb-listing-dots-click { display: block; } .lbb-listing-dots-click-wrapper { position: relative; display: none; } .lbb-allow-bot-to-trained .lbb-listing-dots-click-wrapper { display: block; } .lbb-listing-dots-click:after { width: 20px; height: 20px; border-left: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid rgba(206, 115, 115, 0); border-bottom: 10px solid #ffffff; content: ''; right: 10px; position: absolute; bottom: -20px; transform: rotate(180deg); } .lbb-back-to-main-menu-conversation { cursor: pointer; } .lbb-chattype-inline #lbb-app.lbb-trained_ai-mode.lbb-allow-bot-to-trained .lbb-fe-footer-action { display: flex; } .lbb-allow-bot-to-trained .lbb-listing-dots-click-wrapper { display: block; } .lbb-chattype-inline #lbb-app.lbb-allow-bot-to-trained .lbb-made-with-outside-wrapper { display: block; background: #fff; } #lbb-app .lbb-made-with-wrapper .lbb-made-with-link { height: 30px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 7px 10px; } #lbb-app .lbb-app-wrapper .lbb-no-header-close.lbb-close .lbb-close-inner { width: 30px; height: 30px; top: -10px; right: -10px; display: none; z-index: 10; border-radius: 30px; content: ''; display: flex; background-size: auto; cursor: pointer; position: absolute; z-index: 111111; background: #dfdfdf; align-items: center; justify-content: center; } #lbb-app .lbb-app-wrapper .lbb-no-header-close.lbb-close .lbb-close-inner svg line { stroke: #000; } @keyframes bell-ring { 0% { transform: rotate(0deg); } 5% { transform: rotate(20deg); } 10% { transform: rotate(-20deg); } 15% { transform: rotate(20deg); } 20% { transform: rotate(-20deg); } 25% { transform: rotate(20deg); } 30% { transform: rotate(-20deg); } 35% { transform: rotate(0deg); } 55% { transform: rotate(20deg); } 60% { transform: rotate(-20deg); } 65% { transform: rotate(20deg); } 70% { transform: rotate(-20deg); } 75% { transform: rotate(20deg); } 80% { transform: rotate(-20deg); } 100% { transform: rotate(0deg); } } @media (max-width: 767px){ #lbb-chat-main-wrapper { max-width: calc(100% - 30px); } .lbb-chat-start:not(.lbb-iframe-start) #lbb-app .lbb-app-wrapper .lbb-opened { max-height: calc(100vh - 160px); } .lbb-chat-start:not(.lbb-iframe-start) #lbb-app .lbb-made-with-wrapper .lbb-made-with-link{ font-size: 13px!important; } .lbb-chat-start:not(.lbb-iframe-start) #lbb-app .lbb-has-image-buttons .lbb-single-button.quick-reply-button { width: 100%;} .lbb-chattype-inline .lbb-made-with-wrapper a.lbb-made-with-link{ margin: 0 60px; } .lbb-mobile-hide-image .quick-reply-image { display: none; } .lbb-mobile-hide-image .quick-reply-spn-img { display: none; } #lbb-chat-main-wrapper.lbb-template-wrapper.lbb-chattype-inline .lbb-conversation .lbb-message .lbb-quick-replies-buttons{ margin-left: 0; } /*Mobile css*/ #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-admin-info-wrapper .lbb-header{ font-size: var(--lbb-mobile-heading-font-size); } #lbb-app .lbb-app-wrapper .lbb-opened .lbb-chat .lbb-chat-header-part .lbb-admin-info-wrapper .lbb-admin-bio{ font-size: var(--lbb-mobile-subheading-font-size); } .lbb-conversation .lbb-message .lbb-bot-response.lbb-text{ font-size: var(--lbb-mobile-question-font-size); } .lbb-conversation .lbb-message .lbb-quick-replies-buttons .lbb-single-button, .lbb-conversation .lbb-message a.lbb-download-pdf-link{ font-size: var(--lbb-mobile-answer-btn-font-size); } .lbb-conversation .lbb-message.lbb-message-user .lbb-bot-response.lbb-text{ font-size: var(--lbb-mobile-answer-font-size); } #lbb-app .lbb-quick-replies-buttons.lbb-has-image-buttons .quick-reply-image > img, #lbb-app .lbb-message-user.lbb-has-image .lbb-anchors.lbb-bot-response.lbb-text .quick-reply-spn-img > img, .lbb-chattype-inline #lbb-app .lbb-quick-replies-buttons.lbb-has-image-buttons .quick-reply-image > img{ height: var(--lbb-mobile-answer-image-height); } .lbb-conversation .lbb-message.lbb-message-user .lbb-bot-response.lbb-text{ font-size: var(--lbb-mobile-selected-answer-font-size); } #lbb-chat-main-wrapper .lbb-example-widget-collapsed-content-text { font-size: var(--lbb-minimized-text-size); } /* In mobile Samsung S22 not showing reset button ticket id: 10889*/ #lbb-chat-main-wrapper.lbb-chattype-inline #lbb-app .lbb-app-wrapper .lbb-opened { height: var(--lbb-chatbot-height); } } @media (max-width: 500px){ }