/* Old version IE 10 and 11 only */ :root { --main-bg-color: #ffffff; --main-bg-color-hover: rgba(255, 255, 255, 0.9); --main-fg-color: #000000; --main-fg-color-hover: rgba(0, 0, 0, 0.07); --seashell: #e2e2e2; --lighthouse: #f66f48; --focus-lighthouse: #e06542; --hover-lighthouse: #f39c82; } body { margin: 0; font-family: Roboto; overflow: hidden; } * { box-sizing: border-box; outline: none !important; } .hidden { visibility: hidden; height: 0; } .bpw-from-user .bpw-chat-bubble .bpw-chat-bubble-content { background-color: #f3f2f2 !important; border-radius: 20px; border: none !important; padding: 10px !important; color: black; border-bottom-right-radius: 0px !important; } .bpw-from-user a { color: black !important; text-decoration: underline; } .bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content { background-color: #f3f2f2; border-radius: 20px; border: none !important; padding: 10px !important; color: black; border-bottom-left-radius: 0px !important; } .bpw-message-timestamp { margin-top: 12px; color: black; } .bpw-from-bot a { color: white !important; text-decoration: underline; } .bpw-from-bot .bpw-chat-bubble .bpw-chat-bubble-content { background-color: #005d92; color: white; } .bp-emulator-history .bpw-chat-bubble { color: #000000; background: none; border: 0px; display: inline-block; } .bp-emulator-history .bpw-bubble-carousel { display: block; margin-left: 30px; } .bpw-widget-btn { background-color: #000000; } .bpw-message-read-more { color: #00f; cursor: pointer; background: none; border: none; font-size: 15px; line-height: 23px; margin: 5px 0 0; padding: 0; text-align: left; text-decoration: underline; } .bpw-widget-btn:focus, .bpw-widget-btn:hover { background-color: #333; } .bpw-chat-container { background-color: #ffffff; color: #000000; } .bpw-chat-container img { max-width: 100%; } .bpw-layout { position: fixed; bottom: 10px; right: 10px; height: 80vh; width: 420px !important; border: 1px solid #ccc; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 15px 15px 0px 0px; } body::-webkit-scrollbar { width: scrollbarwidthpx; } /* Responsive design rules for devices with width less than or equal to 767px */ @media screen and (max-width: 600px) { .bpw-layout { width: calc(100vw - scrollbarwidthpx) !important; /*width: 100vw !important;*/ height: 100vh; right: 0; bottom: 0; left: 0; border-radius: 0; border: 0; } .bpw-header-container { border-radius: 0px !important; height: 80px !important; } .bpw-header-container>div { margin-top: 45px; } .bpw-header-container>button { padding-top: 28px } .bpw-layout.bpw-chat-container { width: 100% !important; height: 100%; right: 0; top: 0; } } .bpw-layout-fullscreen { visibility: visible; } .bpw-bot-avatar { margin-right: -8px; } .bpw-bot-avatar img, .bpw-bot-avatar svg { border: solid 3px white; border-radius: 50%; background: #ccc; } .bpw-button { border: none; border-radius: 30px !important; background: #005d92 !important; padding: 8px; font-size: 0.7rem !important; cursor: pointer; color: white !important; font-weight: bold !important; background-color: var(--main-bg-color); font-size: 1rem; padding: 0.4rem 0.8rem; min-width: 5rem; min-height: 40px; text-align: center; border: 1px solid currentColor; border-radius: 0px; cursor: pointer; margin: 3px 2px; text-transform: none; overflow: visible; align-items: flex-start; } .bpw-file-button { padding: 0; } .bpw-button-alt { background-color: var(--main-bg-color); font-size: 1rem; padding: 0.4rem 0.8rem; min-width: 5rem; height: 40px; } .bpw-button:hover { background-color: #0071b3 !important; } .bpw-input { height: 30px; border: none; outline: none; background-color: #f8f8f8; border-bottom: 1px solid #bbb; width: 200px; text-align: center; margin: 10px; font-size: 14px; } .bpw-file-message { padding: 0.5rem 0.75rem; } .bpw-message-big-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1rem 0; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-right: 18px; padding-left: 0; } .bpw-message-container { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; display: -webkit-box; display: -ms-flexbox; display: flex; } .bpw-message-username { margin: 0 12px; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 0.3125rem 0; font-size: 12px; color: #9a9a9a; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .bpw-message-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .bpw-message-group> :not(:last-child):not(.hidden) { margin-bottom: 2px; } .bpw-message-timestamp { font-size: 0.6rem; float: right; } .bpw-from-user { padding-right: 0; } .bpw-from-user .bpw-message-container { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .bpw-from-user .bpw-message-group { padding-left: 60px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .bpw-msg-list-loading { position: fixed; top: 50%; left: 50%; width: 50px; height: 50px; border: 3px solid rgba(0, 0, 0, 0.3); border-radius: 50%; border-top-color: rgb(0, 0, 0); animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* */ .bpw-msg-list-container { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 1px; } .bpw-msg-list-scroll-container { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: hidden; -ms-flex-positive: 1; flex-grow: 1; } .bpw-msg-list { padding: 0 0.5rem 0.5rem 0.5rem; } .bpw-msg-list-follow { display: none; } .bpw-date-container { color: #666; text-align: center; font-size: 12px; margin: 40px 0 20px; } .bpw-date-container .bpw-small-line { border-bottom: solid 1px #555; margin: auto; width: 80px; margin-top: 5px; } .bpw-new-messages-indicator { position: absolute; width: 100%; background: whitesmoke; height: 40px; display: flex; flex-grow: 1; margin-left: -8px; align-items: center; justify-content: center; text-decoration: underline; color: #106ba3; cursor: pointer; } /** * Chat Bubble configuration. You can add other classes to match different renderers, * for example .bpw-bubble-text or .bpw-bubble-carousel */ .bpw-chat-bubble { color: rgb(255, 255, 255); white-space: pre-wrap; word-break: break-word; } .bpw-chat-bubble-content { border: 1px solid #f1f1f1; padding: 0.5rem 0.75rem; } .bpw-message-feedback { display: flex; flex-direction: row; justify-content: flex-end; } .bpw-message-feedback button { border: none; padding: 0; margin: 0; background: none; } .bpw-message-feedback i { cursor: pointer; height: 16px; margin: 0 4px; fill: #b3b3b3; } .bpw-message-feedback i:hover { fill: black; } .bpw-message-feedback>div { border-radius: 21px; border: 1px solid #f1f1f1; margin-top: -8px; margin-right: -10px; background-color: white; padding: 8px; display: flex; justify-content: space-evenly; } .bpw-from-bot .bpw-bubble-highlight .bpw-chat-bubble-content { background-color: rgba(255, 192, 114, 0.25); color: white !important; } .bpw-from-user .bpw-bubble-highlight .bpw-chat-bubble-content { background-color: #f3f2f2; } .bpw-bubble-session_reset { border: none; border-top: 1px solid red; border-bottom: 1px solid red; } .bpw-bubble-session_reset .bpw-chat-bubble-content { color: red; background: none !important; padding: 0; margin: 5px 0; } .bpw-bubble-carousel { background: none; margin: 10px 0; width: 100%; } .bpw-bubble-file { padding: 0; } .bpw-bubble-file p { padding: 0.5rem 0.75rem; } .bpw-bubble-file a, .bpw-bubble-image a { cursor: pointer; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .bpw-bubble-image a img, .bpw-bubble-audio audio, .bpw-bubble-video video { max-height: 240px; max-width: 100%; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .bpw-chat-bubble p { margin: 0; } .bpw-chat-bubble:first-of-type { border-top-left-radius: 0px; border-top-right-radius: 0px; } .bpw-chat-bubble:last-of-type { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .bpw-keyboard-quick_reply { background-color: #f3f2f2; padding: 15px 20px; text-align: left; border-top: 1px solid #dcdcdc; display: flex; flex-wrap: wrap; } .bpw-keyboard-quick_reply>button { flex: 0 0 100%; } .bpw-in-message-quick_reply { padding-top: 10px; } .bpw-in-message-quick_reply>button { margin: 2px; width: 100%; } /* CAROUSEL */ .slick-arrow { background-color: #fff !important; border: 1px solid #dddfe2; width: 32px; height: 32px; border-radius: 3px; box-shadow: none; color: #444; z-index: 1; } .slick-arrow:before { color: #444; } .slick-next { right: -23px; } .slick-track { margin: 0px; } /* Default card style */ /* .bpw-card-container { box-sizing: border-box; color: rgba(0, 0, 0, 1); line-height: 1.28em; margin-right: 3px; min-height: 150px; max-height: 410px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; overflow: hidden; } .bpw-card-title { text-overflow: ellipsis; white-space: normal; font-weight: bold; line-height: 1.28em; max-height: 40px; overflow: hidden; } */ /* Custom card style */ .bpw-card-container { /*max-height: 210px;*/ overflow: hidden; background-color: #8eddf9 !important; text-align: left !important; border-radius: 0px 0px 0px 0px !important; border: 0px solid rgba(0, 0, 0, 0.1) !important; font-size: 12px !important; font-weight: normal !important; min-height: 5px !important; padding: 0px !important; color: black !important; user-select: text !important; -webkit-user-select: text; /* Safari fallback only */ -webkit-user-select: text; /* Chrome/Safari */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* IE10+ */ } .bpw-chat-bubble-content:has(.bpw-card-container) { background-color: #8eddf9 !important; border: none !important; margin-bottom: 2px; color: black !important } .bpw-bubble-carousel:has(.bpw-card-container) { background-color: white !important; border: none !important; } .bpw-card-header { padding: 6px 12px 12px 12px; } .bpw-card-title { text-overflow: ellipsis; white-space: normal; font-weight: normal; overflow: hidden; font-family: Roboto !important; font-size: 1.2em !important; max-height: none !important; user-select: text !important; -webkit-user-select: text; /* Safari fallback only */ -webkit-user-select: text; /* Chrome/Safari */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* IE10+ */ } .bpw-card-subtitle { color: rgba(0, 0, 0, 0.4); } .bpw-card-buttons { /** The container of buttons*/ } .bpw-card-action { font-weight: 500; padding: 0 10px; border-top: 1px solid rgba(0, 0, 0, 0.1); display: block; cursor: pointer; text-decoration: none; line-height: 32px; text-align: center; } /* Comment this element to hide the icon indicating an external website */ .bpw-card-external-icon { background: url(/assets/modules/channel-web/images/external_icon.png) no-repeat; width: 16px; height: 16px; display: inline-block; background-size: 100% 100%; } .bpw-card-picture { background-position: 50% 50%; background-size: cover; height: 150px; width: 100%; } /* Custom styling for the login form*/ .bpw-form-container {} .bpw-form-container label { display: block; } /* Highlight special actions, for example displaying the status after using a custom component */ .bpw-special-action { opacity: 0.6; } /* Conversation List */ .bpw-convo-list { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; overflow-y: auto; overflow-x: hidden; } .bpw-convo-add-btn { background: transparent; border: 2px solid; border-radius: 50%; float: right; margin-right: 15px; margin-top: 15px; margin-bottom: 15px; width: 40px; height: 40px; padding: 0; cursor: pointer; } .bpw-convo-add-btn:hover { background-color: rgba(0, 0, 0, 0.03); } .bpw-convo-item { padding-left: 15px; height: 4.7rem; border-bottom: 1px solid #eee; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .bpw-convo-item:hover { background-color: #fafafa; } .bpw-convo-item .bpw-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .bpw-convo-item .bpw-align-right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 1rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; display: -webkit-box; display: -ms-flexbox; display: flex; } .bpw-convo-item .bpw-convo-preview { font-size: 0.875rem; color: #9a9a9a; max-width: 15rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bpw-convo-item .bpw-date { text-align: right; font-size: 0.875rem; color: #9a9a9a; position: absolute; right: 0; } .bpw-keyboard-quick_reply-dropdown { margin: 0.2rem 0.5rem; } .bpw-composer { border-top-width: 1px; /*border-top-style: solid;*/ border-top-color: #aaaaaa; position: relative; padding: 0.5rem 0 0; background: rgba(255, 255, 255, 0.9); transition: border 0.3s ease; outline: none; padding-bottom: 0.5rem; } .bpw-composer-inner { display: flex; padding: 5px; } .bpw-composer-textarea { flex-grow: 2; } .bpw-composer textarea { font: inherit; background-color: transparent; width: 100%; resize: none; line-height: 1.2; height: 49px; border: none; font-size: 1rem; padding: 0.75rem 1rem; background-color: #f3f2f2; border-radius: 30px; padding-top: 15px; border: 1px solid #005d92; } .bpw-composer textarea:focus { color: inherit !important; } .bpw-composer textarea::placeholder { /*color: transparent !important;*/ } /* .bpw-composer-textarea::after { content: "Skriv inn her"; display: initial !important; visibility: visible; position: absolute; left: 0; padding-top: 5px; padding-left: 20px; font-size: 16px; z-index: -1; } */ .ltr .bpw-composer-textarea:after { color: transparent !important; } .bpw-composer-textarea:focus #input-message { visibility: visible; } .bpw-powered { display: none !important; text-align: right; border-top: 1px solid #aaaaaa; padding: 2px 5px 2px 0; } .bpw-send-buttons { display: flex; flex-direction: row; } .bpw-send-button { border: none; border-radius: 30px !important; /*background: #005d92 !important;*/ padding: 8px; font-size: 14px; cursor: pointer; color: white !important; font-weight: bold !important; /*width: 90px !important;*/ border: none; border-radius: 5px; background: #fff; padding: 5px; font-size: 14px; font-weight: 500; cursor: pointer; } .bpw-send-button span { visibility: hidden; } .bpw-send-button:after { content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24' style='fill: none'%3E%3Cpath d='M21 11.9978C21.0008 12.3871 20.7756 12.7415 20.4229 12.9061L5.42286 19.9061C5.01109 20.0983 4.52152 19.9887 4.23102 19.6392C3.94052 19.2898 3.92212 18.7885 4.18624 18.4187L8.77107 11.9999L7.31124 9.95616C6.99023 9.50675 7.09432 8.8822 7.54374 8.56119C7.99315 8.24018 8.6177 8.34427 8.93871 8.79369L10.8137 11.4187C11.0621 11.7664 11.0621 12.2335 10.8137 12.5812L8.02568 16.4844L17.6245 12.0049L6.58092 6.90789C6.07946 6.67645 5.86058 6.08233 6.09201 5.58088C6.32345 5.07942 6.91758 4.86053 7.41903 5.09197L20.419 11.092C20.7725 11.2551 20.9991 11.6085 21 11.9978ZM4.99996 3.99993C5.55224 3.99992 5.99996 4.44763 5.99997 4.99991L5.99997 5.00992C5.99998 5.5622 5.55228 6.00992 4.99999 6.00993C4.44771 6.00994 3.99998 5.56224 3.99997 5.00995L3.99997 4.99995C3.99996 4.44767 4.44767 3.99994 4.99996 3.99993Z' class='' style='fill-rule: evenodd; clip-rule: evenodd; fill: rgb(0, 93, 146)' /%3E%3C/svg%3E"); position: relative; margin-left: -35px; } .bpw-send-button:hover, .bpw-send-button:focus { /*background: #d8d8d8;*/ } /** HEADER STUFF */ .bpw-header-container { border-top: none !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; height: 52px; font-weight: 500; border-top: solid 1px #ccc; border-bottom: 1px solid #ccc; padding: 0 1rem; overflow: hidden; background-color: #005d92 !important; color: white !important; border-radius: 15px 15px 0px 0px; margin: -1px; } .bpw-header-unread { display: none !important; } .bpw-bot-avatar, .bpw-header-icon-convo, .bpw-header-icon-reset { display: none !important; } .bpw-header-icon-download { margin-right: 10px; } .bpw-header-title { font-size: 1.2em; font-weight: bold; } #btn-close { margin-top: -5px; margin-right: 5px; } #btn-close>i { content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24' style='fill: none'%3E%3Cpath d='M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z' class='' style='fill-rule: evenodd; clip-rule: evenodd; fill: rgb(255, 255, 255)' /%3E%3C/svg%3E"); } #btn-download { margin-right: 15px; margin-top: -5px; } #btn-download>i { content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24' style='fill: none'%3E%3Cpath d='M21 16C21 17.6569 19.6569 19 18 19L6 19C4.34314 19 3 17.6569 3 16V9.00001C3 7.34316 4.34315 6.00002 6 6.00002H8C8.55228 6.00002 9 6.44773 9 7.00002C9 7.5523 8.55228 8.00002 8 8.00002H6C5.44771 8.00002 5 8.44773 5 9.00001V16C5 16.5523 5.44771 17 6 17H18C18.5523 17 19 16.5523 19 16V9.00001C19 8.44773 18.5523 8.00002 18 8.00002H16C15.4477 8.00002 15 7.5523 15 7.00002C15 6.44773 15.4477 6.00002 16 6.00002H18C19.6569 6.00002 21 7.34316 21 9.00001V16ZM12 16C11.7348 16 11.4804 15.8947 11.2929 15.7071L7.29289 11.7071C6.90237 11.3166 6.90237 10.6834 7.29289 10.2929C7.68342 9.90239 8.31658 9.90239 8.70711 10.2929L11 12.5858L11 7C11 6.44771 11.4477 6 12 6C12.5523 6 13 6.44771 13 7L13 12.5858L15.2929 10.2929C15.6834 9.90239 16.3166 9.90239 16.7071 10.2929C17.0976 10.6834 17.0976 11.3166 16.7071 11.7071L12.7071 15.7071C12.5196 15.8947 12.2652 16 12 16ZM13 3.99996V4.05333C13 4.60561 12.5523 5.05333 12 5.05333C11.4477 5.05333 11 4.60561 11 4.05333V3.99996C11 3.44767 11.4477 2.99996 12 2.99996C12.5523 2.99996 13 3.44767 13 3.99996Z' class='' style='fill-rule: evenodd; clip-rule: evenodd; fill: rgb(255, 255, 255)' /%3E%3C/svg%3E"); } .bpw-header-name:after { content: " kundeservice"; } .bpw-header-title-flexbox { overflow: hidden; text-overflow: ellipsis; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .bpw-header-title-container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .bpw-header-title { padding-left: 10px; overflow: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; } .bpw-header-subtitle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.75rem; font-weight: 500; color: #9a9a9a; vertical-align: middle; margin-top: 0px; } /* .bpw-header-unread { display: inline-block; width: 20px; height: 20px; margin-left: 5px; text-align: center; vertical-align: top; border-radius: 50%; line-height: 20px; font-size: 12px; color: #fff; background-color: #ff5d5d; } */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .bpw-header-icon { border: none; background: none; padding: 0; margin: 0; color: #bbb; margin-left: 12px; text-align: right; vertical-align: middle; cursor: pointer; fill: #1a1e22; width: 16px; height: 16px; transition: fill 0.3s; } .bpw-header-icon svg, .bpw-header-icon svg path { fill: #ffffff; transition: fill 0.3s; } .bpw-header-icon:hover, .bpw-header-icon:hover svg, .bpw-header-icon:hover svg path { fill: #5c7080; } .bpw-floating-button { float: right; fill: rgb(255, 255, 255); cursor: pointer; outline: none; display: flex; align-items: center; justify-content: center; z-index: 1; width: 55px; height: 55px; cursor: pointer; border-radius: 0px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4); overflow: hidden; background-color: #005d92 !important; padding: 0; border: none; background-clip: padding-box; transition: width 1s, height 1s; border-radius: 50px; } .bpw-floating-button:hover { background-color: #0d234b !important; } .bpw-floating-button i { transition: opacity 0.3s ease; opacity: 1; fill: inherit; stroke: inherit; width: 100%; padding: 0; line-height: 0; } .bpw-floating-button .bpw-floating-button-unread { display: block; position: absolute; right: 2px; bottom: 54px; width: 20px; height: 20px; border-radius: 50%; line-height: 20px; color: #fff; background-color: #ff5d5d; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); } /** BOT INFORMATION PAGE - START */ .bpw-botinfo-container { margin: 0 auto; max-width: 800px; width: 100%; text-align: center; color: #1e1e1e; overflow-y: auto; height: 100%; } .bpw-botinfo-cover-picture-wrapper { overflow: hidden; margin-left: auto; margin-right: auto; max-width: 50%; } .bpw-botinfo-cover-picture { width: 100%; object-fit: cover; } .bpw-botinfo-container button, .bpw-botinfo-container a { font-size: 0.9em; color: rgb(102, 102, 102); text-decoration: none; } .bpw-botinfo-summary { margin-top: -32px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 5px -5px #ccc; } .bpw-botinfo-description { margin-top: 0.4em; margin-bottom: 1em; } .bpw-botinfo-summary h3 { margin: 0; } .bpw-botinfo-links { border-bottom: solid 1px rgba(0, 0, 0, 0.1); } .bpw-botinfo-link { padding-left: 25%; display: flex; margin: 20px 0; } .bpw-botinfo-link i { margin-right: 10px; } .bpw-botinfo-preferred-language { margin: 20px 0; } .bpw-botinfo-preferred-language select { margin-left: 10px; } .bpw-botinfo-terms { padding: 0px 20px; text-align: left; } .bpw-botinfo-terms a { display: inline-block; width: 100%; line-height: 2.5; border-bottom: solid 1px rgba(0, 0, 0, 0.1); } .bpw-botinfo-start-button { font: inherit; color: inherit; background-color: transparent; cursor: pointer; border-radius: 20px; line-height: 24px; padding: 5px 10px; margin-top: 25px; border: 1px solid rgb(100, 100, 100); } .bpw-botinfo-start-button:focus { border: 1px solid black; color: black; } /** BOT INFORMATION PAGE - END */ /** TYPING ANIMATIIONS */ @keyframes typingAnimation { 0% { transform: translateY(0px); } 28% { transform: translateY(-6px); } 44% { transform: translateY(0px); } } .bpw-typing-group { align-items: center; display: flex; height: 17px; } .bpw-typing-bubble { animation: typingAnimation 1s infinite ease-in-out; border-radius: 50%; height: 6px; margin-right: 4px; vertical-align: middle; width: 6px; white-space: pre-wrap; font-size: 16px; direction: ltr; background-color: #ffffff; } .bpw-typing-bubble:nth-child(1) { animation-delay: 200ms; } .bpw-typing-bubble:nth-child(2) { animation-delay: 300ms; } .bpw-typing-bubble:nth-child(3) { animation-delay: 400ms; } /* IE10+ CSS styles go here */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .bpw-typing-bubble { animation: none; } } /**ANIMATIONS */ .bpw-anim-fadeIn { animation-name: slideInRight; animation-duration: 0.3s; animation-fill-mode: both; animation-iteration-count: 1; } .bpw-anim-none { visibility: visible; } @keyframes slideInRight { 0% { visibility: visible; transform: translateX(100%); } 100% { transform: translateX(0); visibility: visible; } } .bpw-anim-fadeOut { animation-name: slideOutRight; animation-duration: 0.3s; animation-fill-mode: both; animation-iteration-count: 1; } @-webkit-keyframes slideOutRight { 0% { transform: translateX(0); visibility: visible; } 100% { visibility: hidden; transform: translateX(100%); } } @keyframes slideOutRight { 0% { transform: translateX(0); visibility: visible; } 100% { visibility: hidden; transform: translateX(100%); } } .bpw-mobx-tools { visibility: hidden; } .bpw-rtl .bpw-chat-bubble { direction: rtl; } .bpw-rtl .bpw-composer-inner { flex-direction: row-reverse; } .bpw-rtl .bpw-composer textarea { direction: rtl; padding: 0.75rem 1rem; padding-left: 60px; } .bpw-rtl.bpw-botinfo-container .bpw-botinfo-terms { text-align: right; } .bpw-rtl .bpw-date-container { direction: rtl; } .bpw-rtl .bpw-card-container { text-align: right; direction: rtl; } .bpw-rtl .bpw-keyboard-quick_reply-dropdown { direction: rtl; } #botpress-tooltip-1, #botpress-tooltip-2, #botpress-tooltip-3, #botpress-tooltip-4, #botpress-tooltip-5, #botpress-tooltip-6, #botpress-tooltip-7, #botpress-tooltip-8, #botpress-tooltip-9, #botpress-tooltip-0 { display: none; }