/* general stuff */
@import url('https://fonts.cdnfonts.com/css/trade-gothic-lt-std');
[data-webchat-root] {
/* placement and size */
--base-width: 420px;
--base-height: 640px;
--button-bottom: 70px;
--button-right: 70px;
--widget-bottom: 20px;
--widget-right: 90px;
--chatwindow-height: 462px;
/* fonts and colours */
--base-color: rgba(255, 255, 255, 1);
--brand-color: rgba(176, 146, 92, 1);
--brand-color-light: rgba(244, 240, 237, 1);
--base-background-color: var(--brand-color-light);
--base-black: rgba(22, 22, 22, 1);
--base-color-link : rgba(22, 22, 22, 1);
--font-family: 'Trade Gothic LT Std Regular', sans-serif;
--font-size-base: 14px;
--font-color-base: rgba(159, 129, 112, 1);
--font-color-link: var(--font-color-base);
--font-weight-base: 400;
--border-color: rgba(220, 220, 220, 1);
--bot-box-background-color: rgba(236, 236, 236, 1);
/* header */
--chat-header-background-color: var(--base-color);
--chat-header-text-color: var(--font-color-base);
--chat-header-close-icon-color: var(--font-color-base);
/* chat body */
--message-box-width: 100%;
--bot-message-max-width: 340px;
--bot-message-background: rgba(255, 255, 255, 0.7);
--bot-message-font-color: rgba(83, 86, 90, 1);
--bot-message-choice-font-color: rgba(159, 129, 112, 1);
--user-message-background: rgba(232, 224, 218, 1);
--user-message-font-color: rgba(83, 86, 90, 1);
/* misc */
--engagement-message-font-color: var(--base-black);
--engagement-message-background-color: rgba(232, 224, 218, 1);
--footer-font-color: rgba(83, 86, 90, 1);
--footer-background-color: var(--base-color);
}
[data-webchat-root] #loading {
fill: var(--brand-color);
align-self: flex-start;
}
/* general tag styles for webchat */
[data-webchat-root] *, [data-webchat-root] ::before {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: 120%;
color: var(--font-color-base);
box-sizing: border-box;
}
[data-webchat-root] a {
color: var(--font-color-link);
text-decoration: underline;
font-weight: 500;
}
[data-webchat-root] #window {
border-top: 1px solid var(--base-black);
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
overflow: hidden;
background: var(--base-background-color);
z-index: 80;
}
[data-webchat-root] .window {
position: fixed;
height: 100%;
width: 100%;
bottom: 0;
right: 0;
display: none;
}
[data-webchat-root] #chatWindow {
height: calc(100% - 176px);
position: relative;
display: flex;
flex-direction: column;
padding: 8px 10px;
align-items: flex-end;
z-index: 8;
scrollbar-width: none;
}
[data-webchat-root] #chatWindow::-webkit-scrollbar {
display: none;
}
[data-webchat-root] #chatbot-footer {
height: 30px;
position: relative;
}
@media (min-width: 578px) {
[data-webchat-root] #window {
border-top: none;
}
[data-webchat-root] .window {
height: var(--base-height);
width: var(--base-width);
bottom: var(--widget-bottom);
right: var(--widget-right);
}
}
@media (min-width: 1180px) {
[data-webchat-root] .window {
bottom: var(--widget-bottom);
right: var(--widget-right);
}
[data-webchat-root] .window.expandedWindow {
width: 90vw;
height: 95vh;
}
[data-webchat-root] #expand {
display: block;
}
}
@keyframes popIn {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes popOut {
0% { display: block; }
100% { transform: scale(0); opacitiy: 0; display: none }
}
[data-webchat-root] .chatBot-display-on {
animation: 0.6s cubic-bezier(0.37, 0, 0.63, 1) both popIn;
display: block;
}
[data-webchat-root] .chatBot-display-off {
animation: 0.6s cubic-bezier(0.37, 0, 0.63, 1) both popOut;
}
[data-webchat-root] #expand {
display: none;
}
[data-webchat-root] .expanded {
height: 80vh;
}
[data-webchat-root] .hide {
display: none;
}
[data-webchat-root] .not-allowed {
cursor: not-allowed;
}
[data-webchat-root] .small-text {
font-size: 0.75rem;
padding-left: 3%;
}
[data-webchat-root] .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
[data-webchat-root] .close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
[data-webchat-root] #chatbotContainer {
position: relative;
width: 100%;
height: 100vh;
}
/* header */
[data-webchat-root] #banner {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 8px 4px;
height: 45px;
border-bottom: 1px solid;
border-bottom-color: var(--border-color);
}
[data-webchat-root] .header-root {
background-color: var(--chat-header-background-color);
border-radius: 0 0 16px 16px;
box-shadow: 0px 4px 16px 0px rgba(199, 162, 112, 0.15);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px)
}
[data-webchat-root] .reset-container {
margin: 0 0.5rem;
width: 10%;
background-color: var(--chat-header-background-color);
}
[data-webchat-root] .reset-button {
border: none;
box-shadow: none;
background-color: var(--chat-header-background-color);
color: var(--brand-color);
font-size: 0.75rem;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
[data-webchat-root] .header-content-container {
flex-grow: 4;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.5rem;
}
[data-webchat-root] .header-content-title-before {
content: url('data:image/svg+xml,');
width: 1.5rem;
height: 1.5rem;
padding: 0px 0px 4px 0px;
}
[data-webchat-root] .header-content-title {
background-image: url('data:image/svg+xml,');
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
width: 200px;
margin: 0 0rem 0 0rem;
}
@media (max-width: 577px) {
[data-webchat-root] .header-content-title {
width: 180px;
}
}
[data-webchat-root] .header-content-title b {
font-weight: 600;
}
[data-webchat-root] .header-content-title .dark {
color: var(--base-black);
}
[data-webchat-root] .header-content-title .dark b {
color: var(--base-black);
}
[data-webchat-root] .header-content-title-after {
margin-left: 0.0rem;
margin-bottom: 0.5rem;
padding: 2px 4px 1px 4px;
border-radius: 16px;
text-align: left;
font-size: 0.5rem;
font-weight: 500;
line-height: 0.5rem;
background: var(--bot-box-background-color);
}
[data-webchat-root] .icon-container {
display: flex;
width: 10%;
margin: 0 0.5rem;
}
[data-webchat-root] #chevronDown {
width: 30px;
height: 30px;
margin: 0px;
cursor: pointer;
border: 0px;
border-radius: 50%;
box-shadow: 0px 0px 10px 1px rgba(198, 178, 163, 0.5);
background-color: transparent;
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
}
[data-webchat-root] #expand svg,
[data-webchat-root] #chevronDown svg {
display: none;
}
[data-webchat-root] #chevronDown svg path {
color: var(--chat-header-close-icon-color);
}
/* something other */
[data-webchat-root] #send-svg {
height: 1.5rem;
}
[data-webchat-root] #chatWindow {
overflow-y: auto;
scroll-behavior: smooth;
overflow-x: hidden;
background-color: var(--base-background-color);
}
[data-webchat-root] #start {
align-self: center;
width: 100%;
}
[data-webchat-root] .start-container {
margin-top: 0.5rem;
margin-left: 1rem;
margin-right: 1rem;
}
[data-webchat-root] #start div.start-container:nth-child(2) {
display: none;
}
/* greeting message styling */
[data-webchat-root] .greeting-msg {
text-align: center;
font-size: 1.3rem;
font-style: normal;
font-weight: 700;
line-height: 120%;
padding-bottom: 16px;
margin-right: 24px;
}
[data-webchat-root] .beginning-text {
color: var(--bot-message-font-color);
font-size: var(--font-size-base);
font-weight: 700;
line-height: 120%;
padding: 12px;
background: var(--bot-message-background);
border-radius: 16px 16px 0px 0px;
}
[data-webchat-root] .question-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items:flex-start;
gap: 4px;
flex: 0 0 0;
align-self: stretch;
margin: 0rem 1rem 1rem 2rem;
max-width: var(--bot-message-max-width);
padding: 12px;
background: var(--bot-message-background);
border-radius: 0px 0px 16px 0px;
}
[data-webchat-root] #start .question-container {
margin: 0rem 1rem 1rem 1rem;
border-radius: 0px 0px 16px 0px;
max-width: var(--message-box-width);
}
@media (max-width: 577px) {
[data-webchat-root] .beginning-text {
margin: 0rem -0.6rem 0rem 0.5rem;
}
[data-webchat-root] #start .question-container {
margin: 0rem 0.4rem 1rem 1.5rem;
}
[data-webchat-root] .question-container {
margin: 0rem 0.4rem 0rem 1.5rem;
}
}
[data-webchat-root] .question {
color: var(--brand-color);
font-size: 12px;
font-weight: 700;
text-align: center;
background-color: var(--base-color);
border-radius: 100px;
padding: 8px 12px;
box-shadow: 0px 4px 12px 0px rgba(199, 162, 112, 0.25);
margin: 2px 0;
max-width: 260px;
transition: background-color 0.15s ease;
}
[data-webchat-root] .question:hover {
background-color: var(--brand-color);
color: var(--base-color);
border: 0px solid var(--brand-color);
cursor: pointer;
}
/* no notice in the start containers */
[data-webchat-root] #notice {
display: none;
}
/* //bot and user message styling */
[data-webchat-root] .message-wrapper {
margin: 0.5rem 1rem 0.5rem 0rem;
overflow-wrap: break-word;
}
@media (max-width: 577px) {
[data-webchat-root] .message-wrapper {
margin: 0.5rem 0.2rem 0.5rem 0.8rem;
}
}
[data-webchat-root] .message-wrapper.bot {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: flex-start;
width: 400px;
}
[data-webchat-root] .message {
font-size: 12px;
padding: 8px 24px;
text-wrap: wrap;
animation: popIn 0.15s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
[data-webchat-root] .message a, .message strong {
font-size: 12px;
}
/* bot messages */
[data-webchat-root] .message-avatar {
display: inline-flex;
margin: 0.5rem 0.5rem 0 1rem;
}
@media (max-width: 577px) {
[data-webchat-root] .message-avatar {
margin: 0.5rem 0.5rem 0 1.5rem;
}
}
[data-webchat-root] .message-avatar.bot .icon {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
width: 1.5rem;
height: 1.5rem;
margin-block: 0px;
}
[data-webchat-root] .message-avatar.bot .text {
display: none;
}
[data-webchat-root] .message.bot {
color: var(--bot-message-font-color);
line-height: 16px;
width: var(--bot-message-max-width);
padding: 12px;
background: var(--bot-message-background);
border-radius: 16px 16px 16px 0px;
}
/* if no avatar is rendered ... */
[data-webchat-root] div.message-wrapper.bot :first-child.message.bot {
margin-left: 32px;
}
/* user messages */
[data-webchat-root] .message.user {
color: var(--user-message-font-color);
line-height: 14.4px;
align-self: flex-end;
margin-left: 36px;
background: var(--user-message-background);
border-radius: 16px 16px 0px 16px;
}
[data-webchat-root] .feedback-btn-container {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin: 5px 5px 5px 3rem;
}
@media (max-width: 577px) {
[data-webchat-root] .feedback-btn-container {
margin: 5px 5px 5px 3.5rem;
}
}
[data-webchat-root] .thumbs-icon {
width: 28px;
height: 20px;
padding: 4px 8px;
border-radius: 100px;
box-shadow: 0px 4px 12px 0px rgba(199, 162, 112, 0.25);
background-color: var(--base-color);
background-repeat: no-repeat;
background-position: center;
}
/* Thumbs-up default */
[data-webchat-root] .thumbs-up-default {
background-image: url('data:image/svg+xml,');
}
/* Thumbs-up active */
[data-webchat-root] .thumbs-up-active {
background-image: url('data:image/svg+xml,');
background-color: var(--brand-color);
}
/* Thumbs-down default */
[data-webchat-root] .thumbs-down-default {
background-image: url('data:image/svg+xml,');
}
/* Thumbs-down active */
[data-webchat-root] .thumbs-down-active {
background-image: url('data:image/svg+xml,');
background-color: var(--brand-color);
}
/** choices **/
[data-webchat-root] .choices-container {
max-width: var(--bot-message-max-width);
}
[data-webchat-root] .choices-header {
color: var(--bot-message-font-color);
font-size: 12px;
font-weight: 700;
margin: 0 0 14px;
}
[data-webchat-root] .choices-element-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 10px 10px;
}
[data-webchat-root] .choices-element {
color: var(--brand-color);
font-size: 12px;
line-height: 14.4px;
font-weight: 700;
text-align: center;
background-color: var(--base-color);
border-radius: 100px;
box-shadow: 0px 4px 12px 0px rgba(199, 162, 112, 0.25);
padding: 8px 12px;
min-width: 20px;
max-width: 260px;
min-height: 48px;
transition: background-color 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
[data-webchat-root] .choices-element:hover, .choices-element:visited {
background-color: var(--brand-color);
}
[data-webchat-root] .choices-element:hover span {
color: var(--base-color);
}
[data-webchat-root] .choice-label {
font-size: 12px;
}
[data-webchat-root] .choice-img {
width: 32px;
height: 32px;
border-radius: 50%;
margin-left: -4px;
}
/** product cards **/
[data-webchat-root] .productcard-root {
color: var(--bot-message-font-color);
pointer-events: all;
height: auto;
flex-shrink: 0;
}
/* top part */
[data-webchat-root] .productcard-main-container {
height: auto;
flex-shrink: 0 ;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
margin: 0px 0px 16px;
}
/* packshot */
[data-webchat-root] .productcard-packshot {
display: inline-block;
height: 112px;
}
[data-webchat-root] .productcard-packshot > img {
height: 100%;
width: 112px;
border-radius: 8px;
}
/* text container */
[data-webchat-root] .productcard-info-container {
display: inline-block;
}
/* header styling */
[data-webchat-root] .productcard-header {
color: var(--bot-message-font-color);
}
[data-webchat-root] .productcard-title {
color: var(--bot-message-font-color);
font-weight: 700;
font-size: 14px;
line-height: 16px;
margin: 0px 0px 8px 0px;
max-width: 175px;
}
[data-webchat-root] .productcard-subtitle {
color: var(--bot-message-font-color);
font-weight: 400;
font-size: 12px;
line-height: 16px;
margin: 0px 0px 8px 0px;
max-width: 175px;
}
/* productcard body styling */
[data-webchat-root] .productcard-body {
display: flex;
align-items: center;
justify-content: center;
}
[data-webchat-root] .productcard-shade {
height: 48px;
}
[data-webchat-root] .productcard-shade > img {
width: 48px;
height: 100%;
border-radius: 50%;
}
[data-webchat-root] .productcard-disclaimer {
font-size: 10px;
line-height: 12px;
font-weight: 400;
color: var(--bot-message-font-color);
padding-left: 8px;
}
[data-webchat-root] .productcard-disclaimer a {
font-size: 10px;
}
/** summary styling */
[data-webchat-root] details > summary {
display: inline;
}
[data-webchat-root] .productcard-summary::marker, .productcard-summary::-webkit-details-marker {
display: none;
}
[data-webchat-root] .productcard-summary {
display: flex;
flex-direction: flex-start;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 16px;
cursor: pointer;
}
[data-webchat-root] .productcard-vto-link {
flex-grow: 1;
text-align: center;
background-color: var(--brand-color);
border-radius: 100px;
padding: 8px 12px 8px 4px;
box-shadow: 0px 4px 16px 0px rgba(199, 162, 112, 0.15);
width: 55%;
background-repeat: no-repeat;
background-position: right 14px center;
background-image: url('data:image/svg+xml,')
}
[data-webchat-root] .productcard-vto-link a {
color: var(--base-color);
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
[data-webchat-root] .productcard-more-button {
flex-grow: 2;
text-align: center;
background-color: var(--bot-message-background);
width: 40%;
font-size: 12px;
padding-right: 8px;
background-repeat: no-repeat;
background-position: right;
background-image: url('data:image/svg+xml,');
}
[data-webchat-root] .productcard-details[open] .productcard-more-button {
background-image: url('data:image/svg+xml,')
}
/** details styling */
[data-webchat-root] .productcard-detail-container {
margin: 10px 0px 0px 0px;
display: flex;
flex-direction: column;
}
[data-webchat-root] .productcard-detail-text {
color: var(--bot-message-font-color);
font-size: 12px;
font-weight: 400;
padding: 4px;
}
[data-webchat-root] .productcard-detail-container ul {
padding: 0px;
}
[data-webchat-root] .productcard-details-shades-container {
padding: 10px;
margin: 8px 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 4px;
border-radius: 8px;
background: rgba(209, 197, 182, 1);
}
[data-webchat-root] figure.pc-shade {
vertical-align: top;
display: inline-block;
text-align: center;
width: 100px;
padding: 0px 8px;
margin: 0px;
}
[data-webchat-root] .pc-shade-image {
height: 72px;
width: 72px;
border-radius: 50%;
}
[data-webchat-root] .pc-shade-caption {
display: block;
font-size: 10px;
font-weight: 400;
color: var(--bot-message-font-color);
}
/* cta list */
[data-webchat-root] .pc-ctas-list {
margin: 0px 0px;
list-style: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
}
[data-webchat-root] .pc-cta {
display: inline-block;
text-align: center;
background-color: var(--brand-color);
box-shadow: 0px 4px 16px 0px rgba(199, 162, 112, 0.15);
border-radius: 100px;
padding: 8px 12px 8px 6px;
background-repeat: no-repeat;
background-position: right 4px center;
background-image: url('data:image/svg+xml,');
}
[data-webchat-root] .pc-cta a {
color: var(--base-color);
font-size: 12px;
font-weight: 700;
text-decoration: none;
padding-right: 4px;
}
/** productcard carousel */
[data-webchat-root] [data-webchat-product-carousel] .product-carousel-root {
height: 100%;
min-height: 180px;
flex-shrink: 0;
display: inline-block;
}
[data-webchat-root] [data-webchat-product-carousel] .product-carousel {
width: 100%;
height: 100%;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
align-items: center;
justify-items: center;
}
/* index button navigation */
[data-webchat-root] [data-webchat-product-carousel] .carousel-radiobutton {
order: 10;
top: 20rem;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(227, 217, 209, 1);
transform: translateY(-0.075em);
}
[data-webchat-root] [data-webchat-product-carousel] .carousel-radiobutton:checked {
background-color: var(--brand-color);
}
@media (max-width: 577px) {
[data-webchat-root] [data-webchat-product-carousel] .carousel-radiobutton {
width: 12px;
height: 12px;
}
}
/* prev/next navigation */
[data-webchat-root] [data-webchat-product-carousel] .carousel-navigate {
position: relative;
top: 0px;
z-index: 40;
width: 40px;
height: 40px;
border: 0px solid var(--base-color);
border-radius: 50%;
box-shadow: 0px 0px 10px 1px var(--brand-color-light);
box-shadow: 0px 0px 10px 1px rgba(198, 178, 163, 0.5);
pointer-events: all;
background-color: var(--base-color);
background-position: center;
background-repeat: no-repeat;
--button-offset: -132px;
}
[data-webchat-root] [data-webchat-product-carousel] .carousel-navigate.hidden {
visibility: hidden;
}
[data-webchat-root] [data-webchat-product-carousel] .carousel-prev {
left: var(--button-offset);
background-image: url('data:image/svg+xml,');
}
[data-webchat-root] [data-webchat-product-carousel] .carousel-next {
right: var(--button-offset);
background-image: url('data:image/svg+xml,');
}
/* product cards in carousel */
[data-webchat-root] [data-webchat-product-carousel] div.carousel-pages {
pointer-events: none;
width: 100%;
min-height: 260px;
flex-grow: 2;
flex-shrink: 0;
flex-basis: auto;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
--carousel-items: 16;
--position: 1;
pointer-events: none;
}
[data-webchat-root] [data-webchat-product-carousel] div.carousel-pages[class*="debu"] {
height: 478px;
}
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item {
display: block;
position: absolute;
width: 100%;
height: fit-content;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: translateX(calc(-330px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(1) { --offset: 1; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(2) { --offset: 2; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(3) { --offset: 3; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(4) { --offset: 4; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(5) { --offset: 5; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(6) { --offset: 6; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(7) { --offset: 7; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(8) { --offset: 8; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(9) { --offset: 9; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(10) { --offset: 10; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(11) { --offset: 11; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(12) { --offset: 12; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(13) { --offset: 13; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(14) { --offset: 14; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(15) { --offset: 15; }
[data-webchat-root] [data-webchat-product-carousel] div.carousel-item:nth-of-type(16) { --offset: 16; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(1):checked ~ div.carousel-pages { --position: 1; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(2):checked ~ div.carousel-pages { --position: 2; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(3):checked ~ div.carousel-pages { --position: 3; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(4):checked ~ div.carousel-pages { --position: 4; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(5):checked ~ div.carousel-pages { --position: 5; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(6):checked ~ div.carousel-pages { --position: 6; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(7):checked ~ div.carousel-pages { --position: 7; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(8):checked ~ div.carousel-pages { --position: 8; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(9):checked ~ div.carousel-pages { --position: 9; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(10):checked ~ div.carousel-pages { --position: 10; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(11):checked ~ div.carousel-pages { --position: 11; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(12):checked ~ div.carousel-pages { --position: 12; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(13):checked ~ div.carousel-pages { --position: 13; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(14):checked ~ div.carousel-pages { --position: 14; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(15):checked ~ div.carousel-pages { --position: 15; }
[data-webchat-root] [data-webchat-product-carousel] input:nth-of-type(16):checked ~ div.carousel-pages { --position: 16; }
/** ----------------------- **/
/** footer area **/
/** ----------------------- **/
[data-webchat-root] .input-area {
position: relative;
padding: 8px 12px 0px 12px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 16px;
margin: 0 8px 8px 8px;
}
/* input row with form field and send button */
[data-webchat-root] .input-container {
background-color: var(--base-color);
border-radius: 100px;
border: 1px solid var(--base-color);
display: flex;
align-items: center;
}
/* input field */
[data-webchat-root] #message-input {
color: var(--footer-font-color);
padding: 4px 4px 4px 40px;
display: flex;
align-self: stretch;
align-items: center;
max-width: 100%;
width: 100%;
border: 0px;
border-radius: 1000px;
outline: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: left;
}
@media (max-width: 577px) {
[data-webchat-root] #message-input {
font-size: 16px;
}
}
[data-webchat-root] #message-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
[data-webchat-root] #message-input::placeholder {
color: var(--user-message-font-color);
}
[data-webchat-root] #send-button {
cursor: pointer;
width: 40px;
height: 40px;
border: none;
margin: 3px;
border-radius: 32px;
box-shadow: 0px 0px 10px 1px rgba(198, 178, 163, 0.3);
background: var(--base-color);
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml,');
}
[data-webchat-root] #send-button:disabled {
cursor: not-allowed;
opacity: 0.5;
}
[data-webchat-root] .inputDisclaimer {
color: var(--footer-font-color);
letter-spacing: -0.132px;
font-size: 0.68rem;
text-align: center;
padding: 4px 14px;
}
[data-webchat-root] .input-limitation-container {
display: none;
}
/* ----------- COLORS -----------*/
[data-webchat-root] .bg-red-700 {
background-color: rgb(185 28 28);
}
[data-webchat-root] .bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
[data-webchat-root] .bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
/** footer row */
[data-webchat-root] .footer {
color: var(--footer-font-color);
font-size: 0.68rem;
letter-spacing: -0.132px;
text-align: center;
padding: 5px 24px;
background: var(--footer-background-color);
box-shadow: 0px 8px var(--footer-background-color);
}
/* special changes for vertically impeded screens */
@media (max-height: 640px) {
[data-webchat-root] #chatWindow {
height: 400px;
}
[data-webchat-root] .window {
height: 570px;
bottom: 0;
}
[data-webchat-root] .header-content-title {
font-weight: 700;
font-size: 0.8rem;
}
[data-webchat-root] .footer {
padding: 7px 24px 8px 24px;
background: var(--footer-background-color);
box-shadow: 0px 8px var(--footer-background-color);
}
[data-webchat-root] .inputDisclaimer {
color: var(--footer-font-color);
letter-spacing: -0.132px;
font-size: 0.68rem;
text-align: center;
padding: 0px 0px;
}
}
@media (max-height: 600px) {
[data-webchat-root] #chatWindow {
height: 380px;
}
[data-webchat-root] .window {
height: 550px;
}
}
/** open/close button styling */
[data-webchat-root] .open-btn {
position: fixed;
width: 56px;
height: 56px;
border: none;
border-radius: 50%;
box-shadow: none;
background-color: var(--base-color);
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml,');
transition-duration: 0.6s;
transition-timing-function: ease-out;
}
[data-webchat-root] .dynamic-icon.open .open-btn {
background-image: url('data:image/svg+xml,');
transition-duration: 0.6s;
transition-timing-function: ease-in;
}
[data-webchat-root] .dynamic-image-container {
position: absolute;
display: inline-block;
bottom: 10px;
right: 10px;
}
[data-webchat-root] .dynamic-icon {
position: fixed;
bottom: var(--button-bottom);
right: var(--button-right);
text-decoration: none;
z-index: 6;
}
[data-webchat-root] .dynamic-icon.inactive {
display: none;
}
[data-webchat-root] .dynamic-icon-text {
font-size: 100px;
}
[data-webchat-root] .msg-display-on {
display: block;
}
[data-webchat-root] .msg-display-off {
display: none;
}
[data-webchat-root] .widget-position {
z-index: 7;
}
/* Engagement message box */
[data-webchat-root] .engagement-message {
position: fixed;
bottom: 90px;
right: 20px;
width: 229px;
padding: 0px 12px 0px 12px;
z-index: 6;
background-color: var(--engagement-message-background-color);
border-radius: 16px 16px 0px 16px;
box-shadow: 0px 0px 10px 1px rgba(198, 178, 163, 0.5);
}
[data-webchat-root] .engagement-message p {
color: var(--engagement-message-font-color);
font-weight: 400;
line-height: 120%;
letter-spacing: -0.154px;
}
/* Close button for the engagement message */
[data-webchat-root] .close-engagement-message {
position: absolute;
top: 9px;
right: 9px;
cursor: pointer;
font-weight: 400;
color: var(--engagement-message-font-color);
}
/** adjustments for mobile devices **/
/* iPhone 16 */
@media (min-width: 380px) {
[data-webchat-root] div.message-wrapper.bot :first-child.message.bot {
margin-left: 56px;
}
}
/* iPhone 16 Pro */
@media (min-width: 402px) {
[data-webchat-root] .beginning-text {
margin: 0rem -0.6rem 0rem 1rem;
}
[data-webchat-root] #start .question-container {
margin: 0rem 0.4rem 1rem 32px;
}
[data-webchat-root] .question-container {
margin: 0rem 0.4rem 0rem 35px;
}
[data-webchat-root] .message-wrapper {
margin: 0.5rem 0.2rem 0.5rem 0.8rem;
}
[data-webchat-root] .message-avatar {
margin: 0.5rem 0.5rem 0 1.5rem;
}
[data-webchat-root] div.message-wrapper.bot :first-child.message.bot {
margin-left: 56px;
}
[data-webchat-root] .feedback-btn-container {
margin: 5px 5px 5px 3.5rem;
}
}
/* iPhone 16 Plus, 15 Plus, 15 Pro Max */
@media (min-width: 430px) {
[data-webchat-root] .greeting-msg {
margin-left: 16px;
}
[data-webchat-root] .beginning-text {
margin: 0rem -0.6rem 0rem 1.5rem;
}
[data-webchat-root] #start .question-container {
margin: 0rem 0.4rem 1rem 2.5rem;
}
[data-webchat-root] .question-container {
margin: 0rem 0.4rem 0rem 2.5rem;
}
[data-webchat-root] .message-wrapper {
margin: 0.5rem 0.2rem 0.5rem 0.8rem;
}
[data-webchat-root] .message-avatar {
margin: 0.5rem 0.5rem 0 0rem;
}
[data-webchat-root] div.message-wrapper.bot :first-child.message.bot {
margin-left: 32px;
}
[data-webchat-root] .feedback-btn-container {
margin: 5px 5px 5px 2rem;
}
}
/* iPhone 16 Pro Max */
@media (min-width: 440px) {
[data-webchat-root] .greeting-msg {
margin-left: 24px;
}
[data-webchat-root] .beginning-text {
margin: 0rem -0.6rem 0rem 32px;
}
[data-webchat-root] #start .question-container {
margin: 0rem 0.4rem 1rem 48px;
}
[data-webchat-root] .question-container {
margin: 0rem 0.4rem 0rem 48px;
}
[data-webchat-root] .message-wrapper.bot {
margin: 0.5rem 0.2rem 0.5rem -16px;
}
[data-webchat-root] .message-avatar {
margin: 0.5rem 0.5rem 0 0;
}
[data-webchat-root] div.message-wrapper.bot :first-child.message.bot {
margin-left: 32px;
}
[data-webchat-root] .feedback-btn-container {
margin: 5px 5px 5px 32px;
}
}
@media (min-width: 578px) {
[data-webchat-root] .greeting-msg {
margin-left: 12px;
}
[data-webchat-root] .beginning-text {
margin: 0rem 0rem 0rem 14px;
}
[data-webchat-root] #start .question-container {
margin: 0rem 1rem 1rem 30px;
}
[data-webchat-root] .question-container {
margin: 0rem 1rem 1rem 28px;
}
}