@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  background-color: #e7e7e7;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  color: #333;
  line-height: 1.6;
}

.info {
  text-align: center;
  margin-bottom: 2em;
  max-width: 800px;
}

.info img {
  width: 100%;
  height: auto;
}

.info h2 {
  font-size: 2.5em;
  margin: 1em 0;
}

.info p {
  font-size: 1.1em;
  color: #666;
}

.bpw-floating-button {
    /* Aligns the button to the right side of the container */
    float: right;
    /* Sets the fill color of the button icon */
    fill: rgb(128, 0, 0);
    /* Changes the cursor to a pointer when hovering over the button */
    cursor: pointer;
    /* Removes the outline around the button when clicked */
    outline: none;
 
    /* Centers the icon inside the button element */
    display: flex;
    align-items: center;
    justify-content: center;
 
    /* Sets the z-index to ensure the button is on top of other elements */
    z-index: 1;
    /* Sets the width and height of the button */
    width: 500px !important;
    height: 500px !important;
    /* Changes the cursor to a pointer when hovering over the button */
    cursor: pointer;
    /* Rounds the corners of the button */
    border-radius: 50%;
    /* Adds a shadow effect to the button */
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
    /* Clips any content that overflows the button */
    overflow: hidden;
 
    /* Removes padding and borders from the button */
    padding: 0;
    border: none;
    background-clip: padding-box;
 
    /* Adds a transition effect to the button when its size changes */
    transition: width 1s, height 1s;
}
.bpw-widget-btn {
    background-color: #800000;
    border-radius: 50%;
    box-shadow: none;
}
.bpw-floating-button i {
    /* Adds a transition effect to the icon when its opacity changes */
    transition: opacity 0.3s ease;
    /* Sets the opacity of the icon to fully visible */
    opacity: 1;
    /* Inherit the fill and stroke color from the parent button element */
    fill: inherit;
    stroke: inherit;
    /* Sets the width of the icon to 100% of the parent button element */
    width: 100%;
    /* Removes padding and sets line-height to 0 to center the icon */
    padding: 0;
    line-height: 0;
}
.bpw-floating-button .bpw-floating-button-unread {
    /* Displays the notification badge */
    display: block;
    /* Positions the badge to the top right of the button */
    position: absolute;
    right: 2px;
    bottom: 54px;
    /* Sets the width and height of the badge */
    width: 20px;
    height: 20px;
    /* Rounds the corners of the badge to make it circular */
    border-radius: 50%;
    /* Centers the text inside the badge */
    line-height: 20px;
 
    /* Sets the color of the text inside the badge */
    color: #fff;
    /* Sets the background color of the badge */
    background-color: #ff5d5d;
    /* Adds a shadow effect to the badge */
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
}
 
/_ Styling for the bot summary section _/
.bpw-botinfo-summary {
margin-top: -32px; /_ Move the section up by 32px _/
border-bottom: solid 1px rgba(0, 0, 0, 0.1); /_ Add a 1px solid border to the bottom _/
box-shadow: 0px 4px 5px -5px var(--gray); /_ Add a box shadow effect _/
text-align: center; /_ Center align the text _/
}
 
/_ Styling for the bot avatar _/
.bpw-botinfo-summary .bpw-bot-avatar.default {
margin: 0 auto var(--spacing-medium); /_ Center the avatar image and add some margin at the bottom _/
}
 
/_ Styling for the bot information container _/
.bpw-botinfo-container {
margin: 0 auto; /_ Center the container _/
max-width: 800px; /_ Set a maximum width of 800px _/
width: 80%; /_ Set the width to 100% _/
text-align: center; /_ Center align the text _/
color: #1e1e1e; /_ Set the font color to a dark gray _/
overflow-y: auto; /_ Add a vertical scroll bar if the content overflows _/
height: 100%; /_ Set the height to 100% _/
}
 
/_ Styling for the bot cover picture wrapper _/
.bpw-botinfo-cover-picture-wrapper {
height: 50%; /_ Set the height to 50% _/
overflow: hidden; /_ Hide any content that overflows the container _/
}
 
/_ Styling for the bot cover picture _/
.bpw-botinfo-cover-picture {
width: 100%; /_ Set the width to 100% _/
object-fit: cover; /_ Scale the image to fit the container and maintain its aspect ratio _/
}
 
/_ Styling for buttons and links _/
.bpw-botinfo-container button,
.bpw-botinfo-container a {
font-size: 0.9em; /_ Set the font size to 0.9em _/
color: rgb(102, 102, 102); /_ Set the font color to a light gray _/
text-decoration: none; /_ Remove any text decoration _/
}
 
/_ Styling for the bot description section _/
.bpw-botinfo-description {
margin-top: 0.4em; /_ Add some margin at the top _/
margin-bottom: 1em; /_ Add some margin at the bottom _/
}
 
/_ Styling for the bot summary header _/
.bpw-botinfo-summary h3 {
margin: 0; /_ Remove any margin _/
}
 
/_ Styling for the bot links section _/
.bpw-botinfo-links {
border-bottom: solid 1px rgba(0, 0, 0, 0.1); /_ Add a 1px solid border to the bottom _/
}
 
/_ Styling for each bot link _/
.bpw-botinfo-link {
padding-left: 25%; /_ Add some padding to the left _/
display: flex; /_ Use flexbox to align the content _/
margin: 20px 0; /_ Add some margin at the top and bottom _/
}
 
/_ Styling for the bot link icon _/
.bpw-botinfo-link i {
margin-right: 10px; /_ Add some margin to the right _/
}
 
/_ Styling for the preferred language section _/
.bpw-botinfo-preferred-language {
margin: 20px 0; /_ Add some margin at the top and bottom _/
}
/_ This section defines the styling for the user's preferred language dropdown select box _/
.bpw-botinfo-preferred-language select {
/_ Adds 10 pixels of margin to the left of the select element _/
margin-left: 10px;
}
 
/_ This section defines the styling for the terms and conditions link _/
.bpw-botinfo-terms {
/_ Adds 0 pixels of padding to the top and bottom, and 20 pixels of padding to the left and right _/
padding: 0px 20px;
/_ Aligns the text to the left _/
text-align: left;
}
 
.bpw-botinfo-terms a {
/_ Makes the anchor element a block-level element that is inline with the rest of the text _/
display: inline-block;
/_ Sets the width of the anchor element to 100% _/
width: 100%;
/_ Sets the height of each line of text within the anchor element to 2.5 times the font size _/
line-height: 2.5;
/_ Adds a solid 1 pixel border to the bottom of the anchor element with a slightly transparent black color _/
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
 
/_ This section defines the styling for the start button _/
.bpw-botinfo-start-button {
/_ Sets the font of the element to inherit from the parent element _/
font: inherit;
/_ Sets the text color of the element to inherit from the parent element _/
color: inherit;
/_ Sets the background color of the element to be transparent _/
background-color: transparent;
/_ Changes the mouse cursor to a pointer when hovering over the element _/
cursor: pointer;
/_ Adds a 20 pixel border radius to the corners of the element _/
border-radius: 20px;
/_ Sets the height of each line of text within the element to 24 pixels _/
line-height: 24px;
/_ Adds 5 pixels of padding to the top and bottom, and 10 pixels of padding to the left and right of the element _/
padding: 5px 10px;
/_ Adds 25 pixels of margin to the top of the element _/
margin-top: 25px;
/_ Adds a solid 1 pixel border to the element with a gray color _/
border: 1px solid rgb(100, 100, 100);
}
 
/_ This section defines the styling for the start button when it has focus _/
.bpw-botinfo-start-button:focus {
/_ Changes the border color of the element to black when it has focus _/
border: 1px solid black;
/_ Changes the text color of the element to black when it has focus _/
color: black;
}

/* Style for the composer section */
.bpw-composer {
  padding: 0; /* Remove any padding */
  position: relative; /* Set the position to relative */
  outline: none; /* Remove any outline */
  border: none; /* Remove any border */
}
 
/* Style for the composer inner section */
.bpw-composer-inner {
  padding: 0; /* Remove any padding */
  line-height: 0; /* Remove any line-height */
  position: relative; /* Set the position to relative */
 
  /* Set the display property for different browsers */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 
  justify-content: space-between; /* Align items to the start and end of the container */
}
 
/* Style for the composer textarea */
.bpw-composer-textarea {
  flex-grow: 2; /* Allow the textarea to grow to fill the available space */
}
 
/* Styles for the textarea element in the composer */
.bpw-composer textarea {
  /* Sets the background color to a variable named "--white" */
  background: var(--white);
  /* Sets the border to a 1-pixel solid line using a variable named "--zinc-200" */
  border: 1px solid var(--zinc-200);
  /* Sets the border radius to a variable named "--spacing-medium" to make the edges rounded */
  border-radius: var(--spacing-medium);
  /* Sets the text color to a variable named "--zinc-900" */
  color: var(--zinc-900);
  /* Inherits the font family from the parent element */
  font-family: inherit;
  /* Sets the font size to 12 pixels */
  font-size: 12px;
  /* Sets the height of the textarea to 54 pixels */
  height: 54px;
  /* Sets the padding on the top to 19 pixels, and on the right and left to a variable named "--spacing-large" */
  padding: 19px var(--spacing-large) var(--spacing-large);
  /* Disables the ability to resize the textarea */
  resize: none;
  /* Adds a 0.2-second transition effect to the border when the focus changes */
  transition: border 0.2s;
  /* Sets the width of the textarea to 100% */
  width: 100%;
  /* Sets the margin on the right side to a variable named "--spacing-small" */
  margin-right: var(--spacing-small);
}
 
/* Styles for the textarea element when it is in focus */
.bpw-composer textarea:focus {
  /* Changes the border color to a variable named "--zinc-300" */
  border-color: var(--zinc-300);
}
 
/* Styles for the textarea element when it is in right-to-left mode */
.bpw-composer.rtl .bpw-composer-inner textarea {
  /* Sets the text direction to right-to-left */
  direction: rtl;
}
 
/* Styles for the textarea element when it is in left-to-right mode */
.bpw-composer.ltr .bpw-composer-inner textarea {
  /* Sets the text direction to left-to-right */
  direction: ltr;
}
 
/* Styles for the quick reply dropdown menu */
.bpw-keyboard-quick_reply-dropdown {
  /* Sets a margin of 0.2rem on the top and bottom and 0.5rem on the right and left */
  margin: 0.2rem 0.5rem;
}
 
/* Styles for the send button when it is disabled */
.bpw-send-button:disabled,
.bpw-send-button:disabled:hover {
  /* Sets the opacity to 0.4 to make the button appear slightly transparent */
  opacity: 0.4;
  /* Sets the background color to a variable named "--theme-primary" */
  background-color: var(--theme-primary);
  /* Changes the cursor to the default cursor */
  cursor: pointer;
}
 
/* Styles for the container holding the send buttons */
.bpw-send-buttons {
  /* Sets the display mode to flex and the direction to horizontal */
  display: flex;
  flex-direction: row;
  /* Aligns the items to the center */
  align-items: center;
}
/* This is the CSS style for the button that sends a message */
 
.bpw-send-button {
  display: flex; /* Set the button to be arranged using flexible layout */
  justify-content: center; /* Center the button's content horizontally */
  align-items: center; /* Center the button's content vertically */
  border-radius: var(
    --spacing-medium
  ); /* Make the corners of the button slightly rounded */
  background-color: var(
    --theme-primary
  ); /* Give the button a primary color background */
  padding: 20px; /* Add some extra space around the button's content */
  width: 24px; /* Set the button's width to be 24 pixels */
  height: 24px; /* Set the button's height to be 24 pixels */
  color: transparent; /* Hide any text that might appear inside the button */
  cursor: pointer; /* Show the pointer cursor when the button is hovered over */
  background-image: url(https://w7.pngwing.com/pngs/993/404/png-transparent-computer-icons-email-send-email-button-miscellaneous-angle-rectangle-thumbnail.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; /* Hinzufügen dieser Zeile */
  transition: background-color 0.2s;
} 
/* This is the CSS style for the button that sends a message when it's not disabled and is being hovered over */
.bpw-chat-bubble {
  max-width: 80%;
  color: rgb(255, 255, 255);

  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;

  white-space: pre-wrap;
  word-break: break-word;
}

.bpw-message-feedback {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.bpw-message-feedback button {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
}

.bpw-message-feedback i {
  cursor: pointer;
  height: 16px;

  margin: 0 4px;
  fill: #b3b3b3;
}

.bpw-message-feedback i:hover {
  fill: black;
}

.bpw-message-feedback > div {
  border-radius: 21px;
  border: 1px solid #f1f1f1;
  margin-top: -8px;
  margin-right: -10px;
  background-color: white;
  padding: 8px;

  display: flex;
  justify-content: space-evenly;
}

.bpw-bubble-carousel {
  width: 480px;
  background: none;
  border: 0px;
  padding: 0px;
  margin: 10px 0;
  text-align: left;
}

.bpw-bubble-carousel .bpw-chat-bubble-content {
  padding: 0;
}

.bpw-bubble-file {
  padding: 0;
}
.bpw-bubble-file p {
  padding: 0.5rem 0.75rem;
}

.bpw-bubble-file a,
.bpw-bubble-image a {
  cursor: pointer;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
  color: var(--ocean-light);
  text-decoration: none;
}
.bpw-bubble-file a:hover,
.bpw-bubble-image a:hover {
  color: var(--ocean);
}

.bpw-bubble-image a img,
.bpw-bubble-audio audio,
.bpw-bubble-video video {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.bpw-chat-bubble p {
  margin: 0;
}

.bpw-chat-bubble:first-of-type {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.bpw-chat-bubble:last-of-type {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.bpw-keyboard-quick_reply {
  overflow-y: auto;
  background-color: var(--bg);
  padding: var(--spacing-large) var(--spacing-medium);
  text-align: left;
  border-radius: 3px;
  margin: var(--spacing-large);
  margin-bottom: 0;
}

.bpw-keyboard-single-choice {
  border: none;
  background-color: var(--bg);
  padding: 0;
}

.bpw-quick_reply-buttons-container {
  width: 100%;
  white-space: nowrap;
}

/* CAROUSEL  */
.slick-arrow {
  background-color: #fff !important;
  border: 1px solid var(--zinc-200);
  width: 32px;
  height: 32px;
  border-radius: 3px;
  box-shadow: none;
  z-index: 1;
}

.slick-prev::before {
  content: url('data:image/svg+xml,%3Csvg%20fill%3D%22%23a1a1aa%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12.79%205.23a.75.75%200%2001-.02%201.06L8.832%2010l3.938%203.71a.75.75%200%2011-1.04%201.08l-4.5-4.25a.75.75%200%20010-1.08l4.5-4.25a.75.75%200%20011.06.02z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

.slick-next::before {
  content: url('data:image/svg+xml,%3Csvg%20fill%3D%22%23a1a1aa%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-hidden%3D%22true%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7.21%2014.77a.75.75%200%2001.02-1.06L11.168%2010%207.23%206.29a.75.75%200%20111.04-1.08l4.5%204.25a.75.75%200%20010%201.08l-4.5%204.25a.75.75%200%2001-1.06-.02z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

.slick-track {
  margin: 0px;
}

.bpw-card-container {
  box-sizing: border-box;
  color: white;
  margin: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  border: none;
}

.bpw-card-header {
  padding: 6px 12px 12px 12px;
}

.bpw-card-title {
  text-overflow: ellipsis;
  font-weight: 500;
  line-height: 1.28em;
  max-height: 40px;
  overflow: hidden;
}

.bpw-card-subtitle {
  font-weight: 400;
  color: white;
}

 
/* This is the CSS style for the voice recorder */
 
.bpw-voice-recorder {
  display: flex; /* Set the voice recorder to be arranged using flexible layout */
  flex-direction: row; /* Arrange the voice recorder's content horizontally */
  align-items: center; /* Center the voice recorder's content vertically */
}

#login-button {
  display: block;
  width: 100%;
  height: 60px;
  margin: 1em auto;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  text-align: center;
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: 1px;
  transition: background-color 0.3s;
}

#login-button:hover {
  background-color: #444;
}


.bpw-floating-button {
    width: 500px !important;
    height: 500px !important;
    border-radius: 50% !important;
    animation: blinker 5s linear infinite;
}

@keyframes blinker {
    0%, 10%, 15%, 25%, 30%, 100% { opacity: 1; }
    11%, 14%, 26%, 29% { opacity: 0; }
}
.sc-lbxAil.kgqEEG {
    display: none !important;
}