Edit File: common-style.css
/* 1. Global Common and Reset CSS 2. Ball Selector 3. Message container 4. Tab 5. Message Editor 6. Message Item - Link Item - Message module Featured products - Order List - Cart List 7. Product Details - Popup Product Details for ShortCode 8. Short Code Overnight 9. App ShortCode 10. Notification 11. Responsive */ /*********************************************************************** 1. Global Common and Reset CSS ************************************************************************/ #wp-chatbot-shortcode-template-container img, #wp-chatbot-chat-container img { max-width: 100%; height: auto; box-shadow: none !important; max-height: 100%; } .clear { clear: both; float: none; } .wp-chatbot-chat-container, .wp-chatbot-shortcode-template-container { font-size: 14px; line-height: 1.8; } .wp-chatbot-chat-container a, .wp-chatbot-shortcode-template-container a { text-decoration: none; border: none; outline: none; color: inherit; background: none; box-shadow: none; } .wp-chatbot-chat-container a:active, .wp-chatbot-chat-container a:hover, .wp-chatbot-shortcode-template-container a:active, .wp-chatbot-shortcode-template-container a:hover { outline: 0; } .wp-chatbot-chat-container p, .wp-chatbot-shortcode-template-container p { background: none; font-weight: normal; line-height: 1.8; letter-spacing: 0; margin: 10px 0; padding: 0; } .wp-chatbot-chat-container h1, .wp-chatbot-chat-container h2, .wp-chatbot-chat-container h3, .wp-chatbot-chat-container h4, .wp-chatbot-chat-container h5, .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h1, .wp-chatbot-shortcode-template-container h2, .wp-chatbot-shortcode-template-container h3, .wp-chatbot-shortcode-template-container h4, .wp-chatbot-shortcode-template-container h5, .wp-chatbot-shortcode-template-container h6 { color: inherit; background: none; font-weight: normal; line-height: 1.1; letter-spacing: 0; padding: 0; } .wp-chatbot-chat-container h1, .wp-chatbot-chat-container h2, .wp-chatbot-chat-container h3, .wp-chatbot-shortcode-template-container h1, .wp-chatbot-shortcode-template-container h2, .wp-chatbot-shortcode-template-container h3 { margin-top: 20px; margin-bottom: 10px; } .wp-chatbot-chat-container h4, .wp-chatbot-chat-container h5, .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h4, .wp-chatbot-shortcode-template-container h5, .wp-chatbot-shortcode-template-container h6 { margin-top: 10px; margin-bottom: 10px; } .wp-chatbot-chat-container h1, .wp-chatbot-shortcode-template-container h1 { font-size: 42px; } .wp-chatbot-chat-container h2, .wp-chatbot-shortcode-template-container h2 { font-size: 28px; } .wp-chatbot-chat-container h3, .wp-chatbot-shortcode-template-container h3 { font-size: 24px; } .wp-chatbot-chat-container h4, .wp-chatbot-shortcode-template-container h4 { font-size: 18px; } .wp-chatbot-chat-container h5, .wp-chatbot-shortcode-template-container h5 { font-size: 14px; } .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h6 { font-size: 12px; } .wp-chatbot-chat-container button, .wp-chatbot-chat-container input, .wp-chatbot-chat-container optgroup, .wp-chatbot-chat-container select, .wp-chatbot-chat-container textarea, .wp-chatbot-shortcode-template-container button, .wp-chatbot-shortcode-template-container input, .wp-chatbot-shortcode-template-container optgroup, .wp-chatbot-shortcode-template-container select, .wp-chatbot-shortcode-template-container textarea { color: inherit; margin: 0; box-shadow: none; border: none; background: inherit; } .wp-chatbot-chat-container button:focus, .wp-chatbot-chat-container input:focus, .wp-chatbot-chat-container optgroup:focus, .wp-chatbot-chat-container select:focus, .wp-chatbot-chat-container textarea:focus, .wp-chatbot-shortcode-template-container button:focus, .wp-chatbot-shortcode-template-container input:focus, .wp-chatbot-shortcode-template-container optgroup:focus, .wp-chatbot-shortcode-template-container select:focus, .wp-chatbot-shortcode-template-container textarea:focus { outline: none; } /************************************************************************** 2. Ball Selector **************************************************************************/ #wp-chatbot-chat-container { position: fixed; z-index: 99999; } .wp-chatbot-ball { float: right; position: relative; cursor: pointer; background: #ffffff; width: 60px; height: 60px; border-radius: 50%; margin-top: 10px; padding: 0px; outline: unset; border: none; box-shadow: #767580 0px 4px 20px; } #wpbot_language { font-size: 14px; } #wp-chatbot-ball .wp-chatbot-ball img { width: 60px !important; height: 60px !important; display: block; border-radius: 50%; padding: 6px; box-sizing: border-box; } .wp-chatbot-ball-animator { position: relative; border-radius: 50%; } .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch { opacity: 1; width: 100%; height: 100%; position: absolute; animation: spin 2s linear infinite; border: 3px solid transparent; border-top-color: #9370DB; } .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:before { content: ""; position: absolute; top: -9px; left: -9px; right: -9px; bottom: -9px; border-radius: 50%; border: 3px solid transparent; border-top-color: #BA55D3; animation: spin 3s linear infinite; } .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:after { content: ""; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FF00FF; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinHide { 0% { opacity: 0; } 100% { opacity: 0; } } /******************************************************************************* 3. Message container *********************************************************************************/ .wp-chatbot-board-container { display: none; height: auto; width: 370px; position: relative; box-sizing: border-box; } .wp-chatbot-board-container.active-chat-board { display: inline-block; vertical-align: top; } .wp-chatbot-header { border-radius: 5px 5px 0 0; margin: 0; box-sizing: border-box; text-align: center; position: relative; height: 35px !important; } .wp-chatbot-header h3 { margin: 0 !important; padding: 0 !important; } .wp-chatbot-content { height: 400px; position: relative; padding: 15px; box-sizing: border-box; display: block; } .bot_voice_wrapper { align-items: center; width: 100%; } .bot_recoding_animation canvas { width: 100%; } .bot_recoding_animation { width: 100%; text-align: center; } #botbtnStop { border-radius: 20px; font-size: 15px; font-weight: bold; color: #252323; background: #fff; padding: 3px 15px; } .wp-chatbot-product-reload.wp-chatbot-product-loading { display: block; position: absolute; background: rgba(255, 255, 255, 0.50); padding: 3px; border-radius: 5px; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; } .wp-chatbot-product-loading img { display: table; left: 50%; top: 50%; position: absolute; margin: -10px -45px; } ul.wp-chatbot-messages-container { padding: 0 !important; margin: 0 !important; overflow: hidden; } @keyframes messageAnim { 0% { transform: translateY(80px) scaleX(0.5); opacity: 0; } 100% { transform: translateY(0) scaleX(1); opacity: 1; } } ul.wp-chatbot-messages-container > li { position: relative; box-sizing: border-box; word-wrap: break-word; list-style: none; display: block; clear: both; line-height: 150%; min-height: 50px; margin: 0 0 10px 0; animation: messageAnim 0.5s; opacity: 1; -ms-word-break: break-all; word-break: break-all; word-break: break-word; } ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph h3 { padding: 0 0 5px !important; margin: 0 !important; font-weight: bold; font-size: 16px; } ul.wp-chatbot-messages-container > li.wp-chatbot-msg::before { left: 19px; } ul.wp-chatbot-messages-container > li.wp-chat-user-msg::before { right: 19px; } ul.wp-chatbot-messages-container > li:before { content: ""; display: block; width: 5px; height: 5px; background: red; top: 19px; z-index: 999; position: absolute; border-radius: 50%; box-shadow: -38px 0 #f35b5c, -28px 8px #88bfc9, -14px 35px #f35b5c, -4px 28px #88bfc9, 30px 32px #f35b5c, 28px 22px #88bfc9, 43px 0px #f35b5c, 35px -5px #88bfc9, 20px -30px #f35b5c, 10px -22px #88bfc9, -18px -30px #f35b5c, -14px -22px #88bfc9; animation: 0.9s bang ease-out backwards, 0.9s linear dothide; opacity: 0; animation-duration: 0.5s, 0.5s; } @keyframes dothide { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes bang { from { box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } } ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-avatar, ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-agent { display: none; overflow: hidden; } ul.wp-chatbot-messages-container > li.wp-chat-user-msg:after, ul.wp-chatbot-messages-container > li .wp-chatbot-products:after { clear: both; display: block; content: ""; height: 1px; } ul.wp-chatbot-messages-container > li .wp-chatbot-agent, .wp-chatbot-agent-profile .wp-chatbot-widget-agent { display: none; } #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img { width: 40px !important; height: 40px; } .wp-chatbot-paragraph audio{ width: 100%; } /********************************************************************************* 4. Tab *********************************************************************************/ .wp-chatbot-footer { border-radius: 5px; } .wp-chatbot-tab-nav { padding: 15px 5px; } .wp-chatbot-tab-nav ul { margin: 0 !important; padding: 0 !important; list-style: none; text-align: center; display: flex; justify-content: space-around; vertical-align: bottom; } .wp-chatbot-tab-nav ul li { display: inline-block; vertical-align: middle; position: relative; transition: 0.2s; margin: 0 !important; padding: 0 !important; } .wp-chatbot-tab-nav ul li a { display: block; width: 24px; height: 24px; margin: 5px; background: url("../images/tab-btn-icon.png") no-repeat; border-radius: 50%; position: relative; border-bottom: none; } .wp-chatbot-tab-nav ul li a:focus { outline: none; } .wp-chatbot-tab-nav ul li a[data-option="recent"] { background-position: -7px -7px; } .wp-chatbot-tab-nav ul li a[data-option="cart"] { background-position: -47px -7px; } .wp-chatbot-tab-nav ul li a[data-option="chat"] { background-position: -82px -2px; width: 35px; height: 35px; margin: 0; } .wp-chatbot-tab-nav ul li a[data-option="help"] { background-position: -129px -7px; } .wp-chatbot-tab-nav ul li a[data-option="support"] { background-position: -128px -127px; } .wp-chatbot-tab-nav ul li a[data-option="live-chat"] { background-position: -169px -47px; } .wp-chatbot-tab-nav ul li:before { /*content: "";*/ display: block; width: 74px; background-size: 200%, 100%; transition: all 0.2s linear; height: 26px; position: absolute; left: 0; top: -25px; margin-left: -20px; border-radius: 50%; } .wp-chatbot-tab-nav ul li a[data-option="chat"]:after { content: ""; position: absolute; border-radius: 50%; border: 3px solid #FFF; left: -9px; right: -9px; ; bottom: -9px; top: -9px; } .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before { content: ""; position: absolute; left: -4px; right: -4px; ; bottom: -4px; top: -4px; border-radius: 50%; border: 3px solid #FFF; transition: 0.2s; } .wp-chatbot-tab-nav ul li:hover:before, .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active:before { background-position: bottom; } .wp-chatbot-tab-nav ul li a span#wp-chatbot-cart-numbers { position: absolute; top: -6px; right: -11px; background: #da165d; color: #fff; display: block; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 16px; } /************************************************************************************* 5. Message Editor ************************************************************************************/ .wp-chatbot-editor-container { border-radius: 0 0 5px 5px; margin: 0; padding: 4px 15px; position: relative; } .wp-chatbot-editor-container input { display: inline-block !important; border: none !important; box-shadow: none; height: 40px; width: 88% !important; background-color: transparent !important; font-size: 14px; margin: 0 !important; padding: 0 !important; outline: none !important; } .wp-chatbot-editor-container input:focus { outline: none; border: none; box-shadow: none; background: none; } .wp-chatbot-editor-container button { display: inline-block; height: 40px; color: #fff !important; width: 12%; cursor: pointer; margin: 0 0 0 -8px; padding: 0; border: none; outline: none; background-color: unset !important; } .wp-chatbot-editor-container button:focus { outline: none; border: none; box-shadow: none; } /***************************************************************************************** 6. Message Item *********************************************************************************************/ /*Load More Product*/ #wp-chatbot-loadmore { display: table; margin: 0 auto; padding: 8px 20px !important; } .wp-chatbot-loadmore, .wp-chatbot-loadmore2, .wp-chatbot-loadmore-saas, .wp-chatbot-fuse-loadmore { display: table; margin: 0 auto; padding: 8px 20px !important; margin-bottom: 10px; } .qcld-chatbot-support-or { text-align: center; font-weight: 700; color: #1f8ceb; } .qcld-chatbot-user-confirmation { color: #494949; } /************Link Item*************/ span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-suggest-phone, span.qcld-chatbot-site-search, span.qcld-chatbot-default, span.qcld-chatbot-custom-intent { /* display: block; margin: 8px auto; padding: 12px 30px; */ display: inline-block; margin: 3px auto; padding: 6px 11px; margin-right: 4px; } .qcld_back_to_start { display: block !important; margin: 8px auto !important; margin-right: 16px !important; } .qcld-chatbot-reset-btn, .qcld-chat-common { display: inline-block; padding: 5px 12px; min-width: 100px; } span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-suggest-phone, span.qcld-chatbot-reset-btn, span.qcld-chat-common, span.qcld-chatbot-site-search, span.qcld-chatbot-default, span.qcld-chatbot-custom-intent, #wp-chatbot-loadmore, .wp-chatbot-loadmore, .wp-chatbot-loadmore2, .wp-chatbot-loadmore-saas, .wp-chatbot-fuse-loadmore { font-weight: bold; cursor: pointer; text-align: center; border-radius: 32px; transition: 0.2s linear; } /******* Message module Featured products *******/ .wp-chatbot-products-area { clear: both; height: auto; margin-bottom: 15px; } .wp-chatbot-products-area ul { margin: 0 !important; padding: 0 !important; font-size: 0; } .wp-chatbot-products-area ul li { position: relative; display: inline-block; width: 48%; margin: 2% 0; box-sizing: border-box; padding: 2px; background-color: #eee; border-radius: 5px; min-height: 144px; } .wp-chatbot-products-area ul li:nth-child(2n+2) { margin-left: 4%; } .wp-chatbot-products-area ul li img { display: block; box-shadow: none; } .wp-chatbot-products-area ul li .wp-chatbot-product-summary { background: rgba(0, 0, 0, 0.51); bottom: 0; left: 0; position: absolute; right: 0; text-align: center; top: 0; z-index: 999; visibility: hidden; font-size: 12px; } .wp-chatbot-products-area ul li:hover .wp-chatbot-product-summary { visibility: visible; } .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table { display: table; height: 100%; width: 100%; } .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table .wp-chatbot-product-table-cell { display: table-cell; vertical-align: middle; } .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title { padding: 0; margin: 0 0 10px 0; font-size: 16px; line-height: 1.2; } .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title { color: #ffffff; text-decoration: none; } .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price, .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price span, .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price ins, .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price del { background-color: transparent !important; color: #ffffff; font-size: 14px; text-align: unset; } /********* Order List and Cart List *******/ .wp-chatbot-orders-container, .wp-chatbot-cart-container { width: 100%; } .wp-chatbot-orders-single, .wp-chatbot-orders-header, .wp-chatbot-cart-header, .wp-chatbot-cart-single { display: block; font-size: 0; } .wp-chatbot-orders-single div, .wp-chatbot-orders-header div, .wp-chatbot-cart-header div, .wp-chatbot-cart-single div { display: inline-block; font-size: 10px; padding: 8px; vertical-align: middle; min-height: 30px; box-sizing: border-box; } .wp-chatbot-cart-header div, .wp-chatbot-cart-single div { width: 20%; } .wp-chatbot-cart-header div:nth-child(1), .wp-chatbot-cart-single div:nth-child(1) { width: 45%; } .wp-chatbot-cart-header div:nth-child(3), .wp-chatbot-cart-single div:nth-child(3) { text-align: right; } .wp-chatbot-cart-header div:nth-child(4), .wp-chatbot-cart-single div:nth-child(4) { width: 15%; text-align: right; } .wp-chatbot-orders-single div, .wp-chatbot-orders-header div { width: 70%; } .wp-chatbot-orders-single div:nth-child(1), .wp-chatbot-orders-header div:nth-child(1) { width: 30%; } .wp-chatbot-orders-single div:nth-child(3), .wp-chatbot-orders-header div:nth-child(3) { width: 35%; } .wp-chatbot-orders-container .order-items p { margin: 2px 0; padding: 0; line-height: 14px; } .wp-chatbot-cart-container h3 { font-size: 12px !important; margin: 0 !important; padding: 0 !important; } .wp-chatbot-cart-container input[type="number"] { width: 100%; height: 20px; padding: 0; margin: 0; text-align: center; } .wp-chatbot-cart-single div:last-child span.wp-chatbot-cart-price, .wp-chatbot-cart-single div:last-child span.wp-chatbot-remove-cart-item { vertical-align: middle; } .wp-chatbot-remove-cart-item { display: inline-block; font-size: 14px; width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: pointer; border-radius: 50%; } .wp-chatbot-remove-cart-item:hover { background-color: red; color: #ffffff; } .wp-chatbot-cart-title, .wp-chatbot-recent-view-title { margin: 0 0 10px; text-align: center; font-size: 18px; } .wp-chatbot-cart-footer { clear: both; font-size: 0; } .wp-chatbot-cart-footer div { display: inline-block; font-size: 14px; width: 50%; min-height: 1px; } .wp-chatbot-cart-footer div a { display: block; text-align: center; font-size: 14px; padding: 8px 20px; } .wp-chatbot-no-cart-item { margin: 10px auto; text-align: center; } /*********************************************************************************************** 7. Product details ************************************************************************************************/ /**********Product Details (Left)******/ .wp-chatbot-product-container { margin-top: 50px; display: none; z-index: 9999999; } .wp-chatbot-product-container.active-chatbot-product-details { display: inline-block; vertical-align: top; } .wp-chatbot-product-details { width: 600px; position: relative; margin: 50px auto; font-size: 0; min-height: 300px; padding: 15px; } .wp-chatbot-product-image-col, .wp-chatbot-product-info-col { display: inline-block; vertical-align: top; width: 50%; font-size: 15px; box-sizing: border-box; padding: 15px; } #wp-chatbot-product-image { text-align: center; } .wp-chatbot-product-image-large:hover a { cursor: zoom-in; } .wp-chatbot-product-image-large a:focus { outline: none; } .wp-chatbot-product-image-thumbs { overflow-x: auto; text-align: left; padding: 5px 0; } .wp-chatbot-product-image-thumbs ul { margin: 0; padding: 0; white-space: nowrap; } .wp-chatbot-product-image-thumbs ul li { list-style: none; display: inline-table; max-width: 80px; margin: 0 2px; background-color: #000; } .wp-chatbot-product-image-thumbs ul li img { display: block; } .wp-chatbot-product-image-thumbs ul li a { display: block; opacity: .5; } .wp-chatbot-product-image-thumbs ul li a:focus { outline: none; } .wp-chatbot-product-image-thumbs ul li.wp-chatbot-product-active-image-thumbs a { opacity: 1; } .wp-chatbot-product-title h2 { margin: 0 0 5px; font-size: 24px; } .wp-chatbot-product-price p { margin: 5px 0 10px; padding: 0; } .wp-chatbot-product-price ins, .wp-chatbot-product-price del { background: transparent; color: inherit; } .wp-chatbot-product-description { max-height: 150px; overflow-x: auto; } .wp-chatbot-product-description, .wp-chatbot-product-description p { font-size: 12px; line-height: 1.8; color: #999999; margin: 5px 0; padding: 0; } .wp-chatbot-product-quantity, .wp-chatbot-product-variable > div { margin: 10px 0; font-size: 0; } .wp-chatbot-product-quantity label, .wp-chatbot-product-variable label { display: inline-block; width: 90px; text-transform: uppercase; font-size: 14px; margin-right: 10px; } .wp-chatbot-product-quantity input, .wp-chatbot-product-variable select { display: inline-block; width: 140px; box-sizing: border-box; padding: 5px 10px; height: 35px; border: 1px solid #eeeeee; margin: 0; font-size: 14px !important; } .wp-chatbot-product-quantity input:focus, .wp-chatbot-product-variable select:focus { outline: none; } .wp-chatbot-product-cart-button input[type="button"] { display: table; padding: 8px 20px; text-transform: uppercase; font-size: 14px; margin: 20px 0 0; } .wp-chatbot-product-cart-button input[type="button"]:focus { box-shadow: none !important; } a.wp-chatbot-product-close { position: absolute; top: 0; right: 0; background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center; width: 30px; height: 30px; cursor: pointer; } .wp-chatbot-board-container { display: none; } @keyframes chatbotProductAnimation { 0% { transform: translate(200px); } 95% { transform: translate(-10px); } 100% { transform: translate(0); } } .active-chatbot-product-details { display: block; position: absolute; right: 100%; animation: 0.5s chatbotProductAnimation; z-index: -1; } /********Popup Product Details for ShortCode***********/ .wp-chatbot-shortcode-template-container .wp-chatbot-product-container { position: fixed; animation: none; right: 0; left: 0; top: 0; border: 0; width: 100%; height: 100%; background-color: rgba(1, 1, 1, 0.79); z-index: 99999999; margin: 0; } /**************************************************************************************************** 8 App ShortCode ****************************************************************************************************/ #wp-chatbot-chat-app-shortcode-container { position: fixed; z-index: 99999999; top: 0; bottom: 0; left: 0; right: 0; background: #FFF; } #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-container { width: 100% !important; } #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container:after { display: none; } #wp-chatbot-chat-app-shortcode-container .wp-chatbot-header, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-footer, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-container { border-radius: 0; } #wp-chatbot-chat-app-shortcode-container .wp-chatbot-header { display: none; } #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product img { margin: 0 auto; } #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-container { margin-top: 0; } #wp-chatbot-chat-app-shortcode-container .active-chatbot-product-details { left: 0; right: 0; top: 0; bottom: 0; z-index: 999999999; background: rgba(0, 0, 0, 0.80); margin: 0; } #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-details { margin: 0 auto; } #wp-chatbot-chat-app-shortcode-container #wp-chatbot-cart-short-code .wp-chatbot-comment-loader, #wp-chatbot-chat-app-shortcode-container #wp-chatbot-checkout-short-code .wp-chatbot-comment-loader { position: absolute; top: 50%; left: 50%; margin-left: -45px; } .wpchatbot-app-order-confirmation .wpchatbot-woocommerce-order, #wp-chatbot-app-checkout-container { font-size: 14px; box-sizing: border-box; ; padding: 15px; position: absolute; left: 0; right: 0; top: 0; z-index: 999999; background: #ffffff; } .wpchatbot-woocommerce-order .woocommerce-notice { padding: 10px; border: 1px solid #cccccc; color: #FFF; } .wpchatbot-woocommerce-order .woocommerce-notice.woocommerce-thankyou-order-received { background: #58a093; } .wpchatbot-woocommerce-order .woocommerce-notice.woocommerce-thankyou-order-failed { background: #db4771; } .wpchatbot-woocommerce-order .woocommerce-order-details, .wpchatbot-woocommerce-order .woocommerce-customer-details { padding: 20px 0; } .wpchatbot-app-order-confirmation #wp-chatbot-chat-container, .wpchatbot-app-checkout #wp-chatbot-chat-container { display: none; } .wpchatbot-woocommerce-order table { width: 100%; } .wpchatbot-woocommerce-order .woocommerce-table.order_details tbody tr td, .wpchatbot-woocommerce-order .woocommerce-table.order_details tfoot tr th, .wpchatbot-woocommerce-order .woocommerce-table.order_details tfoot tr td { text-align: left; } .wpchatbot-app-order-confirmation .woocommerce-thankyou-order-details { margin: 0; padding: 0; } .wpchatbot-app-home-back { display: table; padding: 8px 20px; background: #9a3a87; color: white; font-size: 14px; text-transform: uppercase; border: none; } .wpchatbot-app-order-confirmation .woocommerce-thankyou-order-details li { list-style: none; padding: 5px 0; border-bottom: 1px solid #eaeaea; } .wpchatbot-app-order-confirmation .woocommerce-thankyou-order-details li:last-child { border-bottom: none; } #wp-chatbot-cart-short-code .coupon { width: 100%; max-width: 400px; text-align: left; } #wp-chatbot-cart-short-code .coupon input[type="text"], #wp-chatbot-cart-short-code .coupon input[type="submit"] { width: 45%; height: 50px; box-sizing: border-box; padding: 5px; margin-right: 4%; vertical-align: middle; font-size: 16px; } #wp-chatbot-cart-short-code .cart_totals table, #wp-chatbot-cart-short-code .cart_totals table tr, #wp-chatbot-cart-short-code .cart_totals table td, #wp-chatbot-cart-short-code .cart_totals table th { width: 100%; max-width: 100% !important; margin: 0 !important; } #wp-chatbot-cart-short-code .cross-sells { display: none; } #wp-chatbot-cart-short-code .wc-proceed-to-checkout { margin: 15px 0; } /**************************************************************************************************** 9 ShortCode OverRight ****************************************************************************************************/ .wp-chatbot-shortcode-template-container .wp-chatbot-content { height: 452px; } /************Link Item*************/ .wp-chatbot-shortcode-template-container span.qcld-chatbot-product-category, .wp-chatbot-shortcode-template-container span.qcld-chatbot-support-items, .wp-chatbot-shortcode-template-container span.qcld-chatbot-wildcard, .wp-chatbot-shortcode-template-container span.qcld-chatbot-suggest-email, span.qcld-chatbot-suggest-phone, span.qcld-chatbot-site-search, span.qcld-chatbot-default, span.qcld-chatbot-custom-intent, .wp-chatbot-shortcode-template-container span.qcld-chatbot-reset-btn, .wp-chatbot-shortcode-template-container span.qcld-chat-common, .wp-chatbot-shortcode-template-container #wp-chatbot-loadmore, .wp-chatbot-loadmore, .wp-chatbot-loadmore2, .wp-chatbot-loadmore-saas, .wp-chatbot-fuse-loadmore { color: #000000; background: unset; background-size: 200% auto; background-color: #ffffff7d; box-shadow: unset; border: 1px solid #80808030; } .wp-chatbot-shortcode-template-container span.qcld-chatbot-product-category:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-support-items:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-wildcard:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-suggest-email:hover, span.qcld-chatbot-suggest-phone:hover, span.qcld-chatbot-site-search:hover, span.qcld-chatbot-default:hover, span.qcld-chatbot-custom-intent:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-reset-btn:hover, .wp-chatbot-shortcode-template-container span.qcld-chat-common:hover, .wp-chatbot-shortcode-template-container #wp-chatbot-loadmore:hover, .wp-chatbot-loadmore:hover, .wp-chatbot-loadmore2:hover, .wp-chatbot-loadmore-saas:hover, .wp-chatbot-fuse-loadmore:hover { background-position: right center; box-shadow: none; background-color: #a1c4fd; } span.qcld-chat-common { color: #000000; background-size: 200% auto; box-shadow: unset; border: 1px solid #80808030; background-color: #ffffff7d; } span.qcld-chat-common:hover { background-position: right center; box-shadow: none; background-color: #a1c4fd; } /**************************************************************************************************** 10. Notification ****************************************************************************************************/ .wp-chatbot-notification-container { position: relative; top: 50px; left: 1px; padding: 35px 15px 10px; box-shadow: 0 0 20px #CEBDBD; border-radius: 10px; transition: 0.8s; background-color: #fff; font-size: 14px; line-height: 1.5; animation: floating_bot_anima 2s ease-in-out; animation-delay: 0.2s; width: 320px; } .wp-chatbot-notification-container.wp-chatbot-notification-container-sliding { opacity: 0.9; transform: translateX(0); } .wp-chatbot-notification-container-disable { display: none; } .wp-chatbot-notification-agent-profile { position: absolute; top: -40px; left: 15px; right: 15px; } .wp-chatbot-notification-widget-avatar, .wp-chatbot-notification-welcome { display: inline-block; } .wp-chatbot-notification-widget-avatar { width: 60px; height: 60px; background-color: #fff; border-radius: 50%; overflow: hidden; box-shadow: 0 5px 5px #d5d5d5; } .wp-chatbot-notification-welcome { font-size: 12px; } .wp-chatbot-notification-message { transition: opacity 0.5s; } #wp-chatbot-desktop-close { display: block; position: absolute; right: 9px; padding: 5px; font-size: 21px; line-height: 2px; top: 50%; width: 28px; height: 35px; background-color: transparent; border-radius: 50%; color: #ffffff; cursor: pointer; text-align: center; box-sizing: border-box; transition: 0.2s; transform: translateY(-50%); z-index: 0; } .qcld_back_to_start_menu { height: 35px !important; font-size: 17px; } #wp-chatbot-email-transcript { display: block; position: absolute; right: 42px; padding: 5px; font-size: 17px; line-height: 20px; top: 50%; width: 28px; height: 35px; background-color: transparent; border-radius: 50%; cursor: pointer; text-align: center; box-sizing: border-box; transition: 0.2s; z-index: 0; transform: translateY(-50%); } #wp-chatbot-desktop-reload { display: inline-block; font-size: 17px; line-height: 20px; width: 28px; height: 35px; background-color: transparent; border-radius: 50%; color: #ffffff; cursor: pointer; margin-left: 8px; position: absolute; right: 35px; top: 5px; } .wp-chatbot-notification-close { display: block; position: absolute; right: 0; padding: 5px; font-size: 14px; line-height: 20px; top: -35px; width: 30px; height: 30px; background-color: #7d8999; border-radius: 50%; color: #ffffff; cursor: pointer; text-align: center; box-sizing: border-box; transition: 0.2s; visibility: hidden; transform: translateY(20px); z-index: 999999; } .wp-chatbot-notification-close:hover { background-color: #5f6a76; } .wp-chatbot-notification-container:hover .wp-chatbot-notification-close { visibility: visible; transform: translateY(0px); } .wp-chatbot-ball-cart-items { bottom: -8px; left: -11px; position: absolute; width: 22px; height: 22px; line-height: 22px; font-size: 14px; background-color: #43c0ed; color: #ffffff; display: block; border-radius: 50%; text-align: center; } .wp-chatbot-rtl ul li.wp-chatbot-msg:after, .wp-chatbot-rtl ul li.wp-chat-user-msg:after { content: ""; display: table; clear: both; width: 100%; height: 3px; } .wp-chatbot-rtl .wp-chatbot-notification-close { right: auto; left: 0; } #wp-chatbot-product-title h2 a { color: #2ea3f2; } /** #Integration */ .wp-chatbot-integration-button-container { position: absolute; left: -35px; top: 130px; z-index: -1; } .wp-chatbot-integration-button-container span { cursor: pointer; width: 40px; height: 40px; background-image: url("../images/tab-btn-icon.png"); background-repeat: no-repeat; border-radius: 50%; display: block; } .wp-chatbot-messages-container .wp-chatbot-msg-flat .facebook-messenger-chat { cursor: pointer; width: 40px; height: 40px; background-image: url(../images/tab-btn-icon.png); background-repeat: no-repeat; background-size: auto; border-radius: 50%; display: table; margin: 0 auto; background-position: 0 -80px; border: none !important; box-shadow: none !important; } .facebook-messenger { background-position: 0 -80px; } .intergration-weblink { background-position: -120px -80px; } .intergration-phone { background-position: -81px -80px; } .inetegration-skype-btn { background-position: -162px -80px; } .intergration-whats { background-position: -40px -80px; } .intergration-viber { background-position: 0px -120px; } .fb_dialog { /*right: 85px !important; bottom: 47px !important;*/ visibility: hidden; width: 35px !important; height: 35px !important; background: #017cff url('../images/tab-btn-icon.png') no-repeat -43px -122px !important; top: unset !important; border-radius: 50% !important; position: fixed !important; } .fb_dialog > .fb_dialog_content { opacity: 0.01; } .fb_dialog_content iframe:first-child { margin: unset !important; height: 35px !important; width: 35px !important; z-index: 999999999999999999 !important; } .wpb-quick-reply { /*margin: 4px; padding: 8px 10px; font-weight: normal; font-size: 12px; background-color: #222; border: 0; -webkit-border-radius: 2px; border-radius: 8px; -webkit-box-shadow: none; box-shadow: none; color: #fff; cursor: pointer; display: inline-block; line-height: 1; text-shadow: none; -webkit-transition: background 0.2s; transition: background 0.2s; */ margin-bottom: 5px; } /**************************************************************************************************** 11 Responsive ****************************************************************************************************/ @media screen and (max-width: 1200px) { /******************Product Details Popup*****************/ #wp-chatbot-ball-container .wp-chatbot-product-container { position: absolute; animation: none; right: 0; left: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(1, 1, 1, 0.79); z-index: 9999; margin: 0; } /******product details layout******/ .wp-chatbot-shortcode-template-container .wp-chatbot-product-container { overflow-y: scroll; } .wp-chatbot-products-area .slimScrollDiv, .wp-chatbot-products-area .wp-chatbot-products { height: auto !important; } #wp-chatbot-ball-container .wp-chatbot-product-container { overflow-x: auto; } .wp-chatbot-product-details { width: 100%; box-sizing: border-box; } .wp-chatbot-product-image-col, .wp-chatbot-product-info-col { width: 100%; box-sizing: border-box; } } @media screen and (max-width: 1024px) { .wp-chatbot-header { padding-left: 50px; padding-right: 50px; } .wp-chatbot-mobile-full-screen .wp-chatbot-board-container { width: 100%; } #wp-chatbot-mobile-close { position: absolute; right: 12px; top: 9px; display: table; background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center; width: 30px; height: 30px; cursor: pointer; color: transparent; z-index: 9999; } .wp-chatbot-notification-close { visibility: visible; } .chatbot-sidebar { display: none !important; } } @media screen and (max-width: 480px) { .wp-chatbot-mobile-full-screen { width: 100%; } .wp-chatbot-mobile-full-screen .wp-chatbot-content { max-height: initial; } .wp-chatbot-mobile-full-screen .wpbot_chatopen_iconanimation { display: none !important; } .wp-chatbot-integration-button-container { position: absolute; left: 15px; text-align: center; bottom: 0; top: unset !important; } .qcchatbot-template-05 .wp-chatbot-integration-button-container { top: -40px !important; } .wp-chatbot-integration-button-container a { display: inline-block; } #wpbot_live_chat_floating_btn { width: 40px !important; height: 40px !important; vertical-align: unset !important; display: inline-block !important; } .wp-chatbot-integration-button-container span { display: inline-block !important; } .wbca_float_right_footer { width: max-content !important; padding-right: 60px; } } @media screen and (max-width: 400px) { .wp-chatbot-notification-container { width: 250px; padding-top: 55px; } } #wpbot_tawk_container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ddd; width: 500px; height: 500px; box-shadow: 0 0 5px 0 #222; z-index: 99999; } #wpbot_live_chat_floating_btn { width: 35px; height: 35px; display: flex; justify-content: center; vertical-align: middle; align-items: center; font-size: 32px; color: #92fb86; background-size: 100% 100% !important; border-radius: 50%; } .wpbot_card_wraper { margin-bottom: 10px; margin-top: 10px; } .wpbot_card_wraper a { display: block; padding: 3px 0px; } .wpbot_card_image { position: relative; overflow: hidden; width: 100%; height: 150px; } .wpbot_card_image img { display: block; margin: auto;/* position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; */ } .wpbot_card_caption { position: absolute; bottom: 0; width: 100%; background: rgb(64 64 122 / 74%); padding: 5px; left: 0; border-radius: 5px; } .wpbot_card_caption h2 { font-size: 15px; color: #fff; margin-bottom: 5px; padding: 0px; letter-spacing: 0px; line-height: normal; text-align: left; padding-left: 15px; } .wpbot_card_caption p { font-size: 12px; margin-bottom: 0px; padding: 0px; color: #fff; } @keyframes chatOpenAnim { to { opacity: 1; } from { opacity:0; } } @keyframes chatOpenAnim2 { to { opacity: 1; } from { opacity:0; } } .wpbot_chatopen_iconanimation img { animation: chatOpenAnim 1.5s; } .wpbot_chatclose_iconanimation img { animation: chatOpenAnim2 1.5s; } .wpbot_p_align_center { text-align: center } .wpb-search-result>p { background-color: #eaf1f6; padding: 8px 15px; max-width: 90%; box-shadow: 0 2px 8px #bfbfbf; border-radius: 0 10px 10px 10px; } .wpbot_product_price { text-align: center } .qc_wpbot_chat_link { cursor: pointer; text-decoration: underline; } .wpbot_hide_floating_icon { display: none } .floatingbot_delay { animation: floating_bot_anima 2s ease-in-out; animation-delay: 0.2s; } @keyframes floating_bot_anima { 0% { transform: translatey(0); } 50% { transform: translatey(1rem); } 100% { transform: translatey(0); } } .wpbot_card_image_saas { height: auto !important; } .wpbot_card_caption_saas { position: unset !important; } .wpbot_card_caption_saas h2 { line-height: inherit !important; } .wpbot_card_image_saas a { display: block; background: unset !important; padding: unset !important; line-height: auto !important; padding-left: unset !important; margin-bottom: 5px; } .wpbot_card_image_saas a:before { content: unset !important; } .wpbot_auto_image { width: 100%; margin-top: 10px; } .wp-chatbot-paragraph iframe { margin-top: 10px } .qc_click_to_button { color: #fff; text-decoration: none; background-color: #60a3bc; padding: 5px 10px; border-radius: 8px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .qc_click_to_button:hover { text-shadow: 0px 0px 6px rgba(255, 255, 255, 1); -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; } .qc_order_note { margin-bottom: 15px; } .qc_order_note h2 { font-size: 17px; font-weight: bold; } .qc_order_note p { margin-bottom: 5px; } .wp-chatbot-notification-widget-avatar, #wp-chatbot-notification-container { cursor: pointer } .qcwp_notification_nav, .qc_kbx_custom_buddypress { padding-right: 5px; line-height: 26px; color: #0b0bfd; border-right: 1px solid #8e8e9c; margin-right: 5px; } .wp-chatbot-notification-navigation { padding: 8px 0px; border-top: 1px solid #ddd; margin-top: 8px; } .qcwp_notification_nav:hover, .qc_kbx_custom_buddypress:hover { text-decoration: underline } .qcwp_notification_nav:last-of-type, .qc_kbx_custom_buddypress:last-of-type { border-right: none; } .wpbot_addition_label { display: block; font-size: 12px; line-height: 16px; margin-top: 6px; } span.chatbot_intent_reload { position: absolute; left: 80%; -webkit-transform: translate(-80%, -50%); transform: translate(-80%, -50%); top: 50%; color: #9a9a9a; cursor: pointer; line-height: normal; } /* The Modal (background) */ .qcwpbotmodal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9999999; padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } .wpbot_img_popup { cursor: pointer } /* Modal Content (Image) */ .qcwpbotmodal-content { margin: auto; display: block; width: 80%; max-width: 700px; } @keyframes zoom { from { transform:scale(0) } to { transform:scale(1) } } /* The Close Button */ .qcwpbotclose { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .qcwpbotclose:hover, .qcwpbotclose:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) { .qcwpbotmodal-content { width: 100%; } .wp-chatbot-board-container { width: 310px; } } .wpbot_menu_main_container { border: 1px solid #456068; } .wpbot_menu_header { background: #456068; color: #d4dee1; text-align: center; padding: 10px; } .wpbot_menu_content { padding: 5px; } .wpbot_single_menu_item { display: inline-block; width: 107px; text-align: center; cursor: pointer; } .wpbot_single_menu_item p { color: #000; } span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-reset-btn, #wp-chatbot-loadmore, .wp-chatbot-loadmore { background-color: #ffffff7d; box-shadow: none !important; } span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-reset-btn, #wp-chatbot-loadmore, .wp-chatbot-loadmore { background-color: #ffffff7d; box-shadow: none !important; } span.qcld-chatbot-product-category:hover, span.qcld-chatbot-support-items:hover, span.qcld-chatbot-wildcard:hover, span.qcld-chatbot-suggest-email:hover, span.qcld-chatbot-reset-btn:hover, #wp-chatbot-loadmore:hover, .wp-chatbot-loadmore:hover { background: #a1c4fd; box-shadow: none !important; } span.qcld-chatbot-product-category:hover, span.qcld-chatbot-support-items:hover, span.qcld-chatbot-wildcard:hover, span.qcld-chatbot-suggest-email:hover, span.qcld-chatbot-reset-btn:hover, #wp-chatbot-loadmore:hover, .wp-chatbot-loadmore:hover { background: #a1c4fd; box-shadow: none !important; } .wp-chatbot-orders-single-container { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; } .woo-chatbot-products-bargain ul li .woo-chatbot-product-bargain h3.woo-chatbot-product-title { max-height: 65px; overflow: hidden; } .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title { max-height: 78px; overflow: hidden; } .spinner { background: url(../images/spinner.gif) no-repeat; background-size: 20px 20px; display: inline-block; visibility: hidden; float: right; vertical-align: middle; opacity: .7; filter: alpha(opacity=70); width: 20px; height: 20px; margin: 4px 10px 0; } .spinner.is-active { visibility: visible; } .qcld_continue_shopping { font-size: 14px; display: block !important; margin: 8px auto !important; } #wpbot_language { height: 31px; background: #eee0; color: #2c2c2c; border: none; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); padding: 0px; } /*Style for new start menu interface*/ .wp-chatbot-start-container { display: none; width: 310px; position: relative; background: #fff; border-radius: 5px; box-shadow: 0 5px 31px rgba(0, 0, 0, .30); } .wp-chatbot-start-header-content { position: absolute; top: 0px; left: 0px; right: 0px; padding: 24px 40px 87px; box-sizing: border-box; } .wp-chatbot-start-header { position: relative; min-height: 75px; color: white; transition: height 160ms ease-out 0s; background: linear-gradient(135deg, #7575d9 0%, #0b08d3 100%); height: 255px; border-radius: 5px 5px 0px 0px; } .wp-chatbot-start-header-content h2 { font-size: 25px; margin: 6px 0; padding: 0px; color: #fff; } .wp-chatbot-start-header-content p { color: #fff; margin: 0px; padding: 0px; font-size: 14px; } .wp-chatbot-start-content { flex: 1 1 0%; background-color: white; box-shadow: rgba(0, 0, 0, 0.2) 0px 21px 4px -20px inset; } .wp-chatbot-start-screen { z-index: 2147483002; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow-y: auto; } .wp-chatbot-start-screen-content { display: flex; flex-direction: column; box-sizing: border-box; padding: 0px 16px 55px; min-height: 100%; margin-top: 100px; } .wp-chatbot-start-content-single { margin-bottom: 17px; background-color: rgb(255, 255, 255); border-radius: 5px; font-size: 14px; line-height: 1.4; color: rgb(0, 0, 0); overflow: hidden; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(48, 71, 236, 0.5) 0px 2px 0px 0px inset; padding: 10px; width: 95%; } .wp-chatbot-start-content-single p { margin-bottom: 6px; } .qc-new-conversation-button { height: 40px; font-size: 14px; line-height: 40px; pointer-events: auto; cursor: pointer; border-radius: 40px; text-align: center; padding: 0px 16px; background-color: rgb(255, 255, 255); color: rgb(48, 71, 236); border: 1px solid rgb(48, 71, 236); transition: color 0.3s ease 0s, background-color 0.3s ease 0s; } .qcld-new-conv-button span { padding-left: 10px; white-space: nowrap; font-weight: 600; } .qcld-new-conv-button path { fill: rgb(48, 71, 236); } .qcld-new-conv-button { display: inline-flex; -webkit-box-align: center; align-items: center; } .qcld-start-conv-button-svg { width: 15px; height: 16px; } .qcwp-chatbot-search-article input { width: 100%; height: 40px; padding: 11px 40px 11px 16px !important; box-sizing: border-box; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 3px 0px inset; border: 1px solid rgb(225, 225, 225); color: rgb(0, 0, 0); border-radius: 4px; background: rgb(250, 250, 250); appearance: none; } .qcwp-chatbot-search-article-submit { cursor: pointer; z-index: 1; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 40px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background-color: rgb(48, 71, 236); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; padding: 0; } .qcwpbot-search-button-arrow { position: absolute; height: 15px; width: 10px; top: 12px; right: 14px; stroke: rgb(255, 255, 255); } .qcwp-chatbot-search-article { position: relative; } .wp-chatbot-start-content .slimScrollDiv { z-index: 2147483002; position: absolute !important; top: 0px; left: 0px; right: 0px; bottom: 0px; } .qc-new-conversation-button:hover { background: #fff !important } .wp-chatbot-start-content-single span:hover { background-color: unset !important; } .wp-chatbot-start-content-single span { border: none; margin: 0; width: auto; text-align: left; cursor: pointer; display: block; } .qcld_new_start_button span { border: unset !important; color: #000 !important; background: #fff !important; padding: 8px 0px !important; margin: 0px !important; } .wp-chatbot-start-header .wp-chatbot-start-close { display: block; position: absolute; right: 10px; padding: 5px; font-size: 14px; line-height: 21px; top: 0px; width: 30px; height: 30px; background-color: transparent !important; border-radius: 50%; color: #ffffff; cursor: pointer; text-align: center; box-sizing: border-box; transition: 0.2s; transform: translateY(20px); z-index: 9999999999; left: auto; } .qc_menu_list_container .wp-chatbot-start-content-single { width: 278px; } .start-single-content .post-date { font-size: 12px; } .wp-chatbot-start-content-single .wp-chatbot-integration-button-container { position: unset; text-align: center; } .wp-chatbot-start-content-single .wp-chatbot-integration-button-container span { display: inline-block !important; width: 40px !important; } #start_wpbot_live_chat_floating_btn { width: 40px; height: 40px; display: inline-block; font-size: 34px; color: #92fb86; background-size: 100% 100% !important; border-radius: 50%; } #wpbot_voice_message_floating_btn { width: 35px; height: 35px; display: flex; justify-content: center; vertical-align: middle; align-items: center; font-size: 32px; background-color: #ffffff !important; background-size: 100% 100% !important; border-radius: 50%; } .wp-chatbot-ball:hover, .wp-chatbot-ball:focus { background: #ffffff; } .wp-chatbot-editor-container label { display: none; } .qc_wpbot_floating_main { position: fixed; background-color: #4CAF50; border: none; color: white; cursor: pointer; box-shadow: 2px 5px 15px 5px #0707075e; } .qc_right_position { bottom: 50%; right: 0px; border-radius: 10px 0px 0px 10px; transform: translateY(50%); } .qc_bottom_position { bottom: 0px; right: 50%; border-radius: 10px 10px 0px 0px; transform: translateX(50%); } .qc_right_position .qc_bot_floating_content { width: 35px; height: 200px; position: relative; } .qc_bottom_position .qc_bot_floating_content { width: 200px; height: 35px; position: relative; } .qc_right_position .qc_bot_floating_content img { position: absolute; bottom: 10px; width: 25px; left: 4px; transform: rotate(-90deg); } .qc_bottom_position .qc_bot_floating_content img { position: absolute; position: absolute; bottom: 4px; width: 25px; left: 10px; } .qc_right_position .qc_bot_floating_content p { transform-origin: 0 0; transform: rotate(-90deg); position: absolute; width: 134px; bottom: 32px; margin-right: 0px; margin-bottom: 0px; font-size: 18px; left: 9px; line-height: 20px; } .qc_bottom_position .qc_bot_floating_content p { transform-origin: 0 0; transform-origin: 0 0; position: absolute; width: 134px; bottom: 0px; margin-right: 0px; margin-bottom: 0px; left: 55px; font-size: 18px; top: 50%; transform: translateY(-50%); line-height: 20px; } .qc_floating_right_notification { transform: translateX(0px); position: absolute; right: 74px; opacity: 1; left: -327px; top: 2px; } .qc_floating_bottom_notification { transform: translateX(0px); position: absolute; right: 74px; opacity: 1; left: -121px; top: -77px; } .qc_floating_right_notification .wp-chatbot-notification-message, .qc_floating_right_notification .wp-chatbot-notification-welcome { color: #000; } .qc_floating_bottom_notification .wp-chatbot-notification-message, .qc_floating_bottom_notification .wp-chatbot-notification-welcome { color: #000; } /* The Modal (background) */ .wpbot-giphy-modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .wpbot-giphy-modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; margin-top: 20px; } /* The Close Button */ .wpbot-giphy-close, .wpbot-qcbot-close { color: #aaaaaa; float: right; font-size: 40px; font-weight: bold; } .wpbot-giphy-close:hover, .wpbot-qcbot-close:hover, .wpbot-giphy-close:focus, .wpbot-qcbot-close:focus { color: #000; text-decoration: none; cursor: pointer; } .qc_right_position .qc_bot_floating_content p { width: 165px !important; bottom: 20px !important; font-size: 15px !important; } .wbcaMessage span { font-size: 10px; font-style: italic; } .wp-chatbot-start-screen { margin-top: 64px; } .wp-chatbot-start-header .wp-chatbot-start-close { opacity: 1 !important } li.wp-chatbot-msg.wpbot_voice_addon_container { padding: 0px !important; width: 340px; } .wpbot_google_list { background: #1f8ceb !important; color: #fff; padding: 10px; margin-bottom: 10px; border-radius: 8px; } .wpbot_google_list a { padding: 0px !important; background: unset !important; font-weight: bold; font-size: 15px !important; } .wpbot_google_list p { margin-bottom: 0px; } .wpbot_wiki_list a { background: #fff !important; padding: 11px !important; font-weight: bold; border-radius: 10px; } span.qcwpbot_close_ret { position: absolute; right: 4px; top: 2px; background: #ddd; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; cursor: pointer; color: #656565; } ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph { position: relative; } div#wp-chatbot-shortcode-template-container #wpbot_language { position: absolute; top: 34px; background-color: rgba(255,255,255,.5); padding: 0 10px; right: 0; left: 0; width: auto; margin: 0 auto; transform: revert; z-index: 99999; } /*** stop zoom in iphone /*** iPhone and iOS Form Input Zoom Fixes ***/ /* Fix Input Zoom on devices older than iPhone 5: */ @media screen and (device-aspect-ratio: 2/3) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"] { font-size: 14px; } } /* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */ @media screen and (device-aspect-ratio: 40/71) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"] { font-size: 14px; } } /* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */ @media screen and (device-aspect-ratio: 375/667) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"] { font-size: 14px; } } /* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */ @media screen and (device-aspect-ratio: 9/16) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"] { font-size: 14px; } } /* header animation */ section.wavemain { position: absolute; width: 100%; height: 25vh; overflow: hidden; bottom: 0; } section.wavemain .wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 198px; background: url('../images/wave.svg'); backgroud-size: 1600px 198px; } section.wavemain .wave.wave1 { animation: animate-wave-1 30s linear infinite; z-index: 1000; opacity: 0.6; animation-delay: 0s; bottom: 0; } section.wavemain .wave.wave2 { animation: animate-wave-2 20s linear infinite; z-index: 999; opacity: 0.4; animation-delay: -3s; bottom: 10px; } section.wavemain .wave.wave3 { animation: animate-wave-3 30s linear infinite; z-index: 998; opacity: 0.2; animation-delay: -1s; bottom: 15px; } section.wavemain .wave.wave4 { animation: animate-wave-4 12s linear infinite; z-index: 997; opacity: 0.4; animation-delay: -5s; bottom: 20px; } @keyframes animate-wave-1 { 0% { background-position-x: 0; } 100% { background-position-x: 1600px; } } @keyframes animate-wave-2 { 0% { background-position-x: 0; } 100% { background-position-x: -1600px; } } @keyframes animate-wave-3 { 0% { background-position-x: 0; } 100% { background-position-x: 1600px; } } @keyframes animate-wave-4 { 0% { background-position-x: 0; } 100% { background-position-x: -1600px; } } #bottooltip { z-index: 9999999999 !important; } .qc_bot_floating_content p { color: #000 } .chatbot-theme-shortcode-container { max-width: 400px !important; width: 400px !important; } .wp-chatbot-start-screen { z-index: unset !important; margin-top: 64px; } .wp-chatbot-start-header .wp-chatbot-start-close { opacity: 1 !important } .wp-chatbot-start-screen-content { margin-top: 100px !important } .wp-chatbot-shortcode-template-container .chatbot-shortcode-row { display: inline-block; width: 100%; } #wp-chatbot-shortcode-template-container .wbcaBody { min-height: 350px !important } #wp-chatbot-shortcode-template-container .wbcaBody .wbca_signup_wrap { margin: 0 !important } .hud_design_dark span.qcld-chatbot-custom-intent.ui-draggable.ui-draggable-handle.qc_draggable_item_remove, .hud_design_dark span.qcld-chatbot-wildcard.wpbd_voice_message.ui-draggable.ui-draggable-handle.qc_draggable_item_remove, .hud_design_lite span.qcld-chatbot-custom-intent.ui-draggable.ui-draggable-handle.qc_draggable_item_remove, .hud_design_lite span.qcld-chatbot-wildcard.wpbd_voice_message.ui-draggable.ui-draggable-handle.qc_draggable_item_remove { display: none; } #wpbot_language { max-width: 200px; } .wp-chatbot-editor-container button { background-color: #fff0 !important; } [data-forms='classic'] select:focus, [data-forms='classic'] textarea:focus, [data-forms='classic'] input[type='url']:focus, [data-forms='classic'] input[type='tel']:focus, [data-forms='classic'] input[type='text']:focus, [data-forms='classic'] input[type='date']:focus, [data-forms='classic'] input[type='email']:focus, [data-forms='classic'] input[type='number']:focus, [data-forms='classic'] input[type='search']:focus, [data-forms='classic'] input[type='password']:focus, [data-forms='classic'] span.select2-container--default .select2-selection--single:focus { color: #fff !important; } .wp-chatbot-product-details { margin: 50px 30px 50px auto !important; } .page_design_dark .wp-chatbot-msg .wp-chatbot-paragraph img { max-width: 50% !important; display: inherit; } .hud_design_dark li.wp-chatbot-msg.wp-chatbot-msg-flat { margin: 0 30px 10px 0; } .qcchatbot-template-08 li.wp-chatbot-msg.wp-chatbot-msg-flat { color: #fff; } [data-forms='classic'] select:focus, [data-forms='classic'] textarea:focus, [data-forms='classic'] input[type='url']:focus, [data-forms='classic'] input[type='tel']:focus, [data-forms='classic'] input[type='text']:focus, [data-forms='classic'] input[type='date']:focus, [data-forms='classic'] input[type='email']:focus, [data-forms='classic'] input[type='number']:focus, [data-forms='classic'] input[type='search']:focus, [data-forms='classic'] input[type='password']:focus, [data-forms='classic'] span.select2-container--default .select2-selection--single:focus { color: #000 !important; } .wp-chatbot-paragraph h4 { color: #fff; } .page_design_dark ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph { display: inline-block !important; } .hud_design_dark ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph { border-radius: 0; } .hud_design_dark ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph { display: inline-block; } .hud_design_lite li.wp-chatbot-msg.wp-chatbot-msg-flat { width: calc(100% - 0px); margin: 0 auto; } .wpbot_card_caption { -webkit-transform: skewX( 352deg ); -ms-transform: skewX(352deg); transform: skewX( 352deg ); margin-top: 16px; box-shadow: 0 .25rem .5rem rgba(0,0,0,.075)!important; color: #4d4d4d; } .hud_design_lite .wpb-search-result>p { padding: 8px 15px !important; color: #000 !important; } .wpbot_card_caption { -webkit-transform: skewX( 352deg ); -ms-transform: skewX(352deg); transform: skewX( 352deg ); margin-top: 16px; box-shadow: 0 .25rem .5rem rgba(0,0,0,.075)!important; color: #4d4d4d; color: #ffffff !important; background-color: #2e2e2e !important; word-break: break-word; -webkit-transform: skewX( 352deg ); -ms-transform: skewX(352deg); transform: skewX( 352deg ); } .wp-chatbot-shortcode-template-container h2 { margin-top: 6px; margin-bottom: 10px; } .wpb-search-result>p { padding: 8px 15px; max-width: 90%; box-shadow: 0 2px 3px #2e2e2e; border-radius: 0 10px 10px 10px; } .qcchatbot-template-08 [data-forms='classic'] input[type='text']:focus { color: #fff !important; } .qcchatbot-template-08 .qc-new-conversation-button span { color: #fff !important; } .rl-basicmasonry-gallery .rl-gallery-item img { width: 100%; } .wpbot-saas-live-chat [data-forms='classic'] select:focus, .wpbot-saas-live-chat [data-forms='classic'] textarea:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='url']:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='tel']:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='text']:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='date']:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='email']:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='number']:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='search']:focus, .wpbot-saas-live-chat [data-forms='classic'] input[type='password']:focus, .wpbot-saas-live-chat [data-forms='classic'] span.select2-container--default .select2-selection--single:focus { color: #222 !important; } .page_design_dark .wp-chatbot-msg .wp-chatbot-paragraph img { max-width: 100% !important; display: inherit; } #wp-chatbot-ball button:focus { outline: 0px dotted !important; outline: 0px auto -webkit-focus-ring-color !important; } .wpbot_restapi_list { background: #1f8ceb !important; color: #fff !important; padding: 10px; border-radius: 6px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .qcwp-chatbot-search-article input:focus, .qcwp-chatbot-search-article input { font-size: 14px; } input#wp-chatbot-editor:focus, input#wp-chatbot-editor { font-size: 14px; } } @media screen and (max-width: 480px) { #wp-chatbot-chat-container{ width: 100%; } .wp-chatbot-notification-container{ width: calc(100% - 100px); left: 65px; } @media only screen and (min-height: 300px) and (max-height:400px){ .wbca_signup_wrap { position: absolute; bottom: 3%; } } }
Back