.chat-input {
display: flex;
gap: 8px;
padding: 8px 16px;
background-color: #f8fafb;
box-shadow: 0 -2px 5px rgba(29, 51, 63, 0.1490196078);
}
.chat-input textarea:focus {
border: 1px solid #737373;
outline: none;
}
.chat-input textarea::-webkit-scrollbar {
display: none; }
.chat-input button {
padding: 8px 16px;
background: #eb1e0f;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
} .spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulseglow {
from {
box-shadow: 0 0 0 transparent;
}
50% {
box-shadow: 0 0 30px #eb1e0f;
}
to {
box-shadow: 0 0 0 transparent;
}
}
.dah-chatbot-frontend {
font-weight: 300;
font-family: adelle-sans, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.dah-chatbot-frontend * {
font-family: adelle-sans, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.dah-chatbot-frontend .dah-chat-invite-wrap {
position: absolute;
bottom: 85px;
right: -19px;
pointer-events: none;
z-index: 2;
color: #333;
filter: drop-shadow(0 2px 3px rgba(50, 50, 0, 0.2));
}
@media screen and (max-width: 480px) {
.dah-chatbot-frontend .dah-chat-invite-wrap {
display: none;
}
}
.dah-chatbot-frontend .dah-chat-invite-wrap:after {
content: "";
position: absolute;
bottom: 20px;
right: 40px;
width: 0;
height: 0;
border: 13px solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -6.5px;
margin-bottom: -13px;
z-index: 2;
transform: scale(-1, 1);
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.dah-chatbot-frontend .dah-chat-invite {
user-select: none;
pointer-events: none;
position: relative;
bottom: 20px;
right: 24px;
width: 160px;
min-width: 30px;
font-size: 14px;
max-width: min(160px, 70vw);
font-weight: 300;
opacity: 0;
z-index: 2;
transform: scale(0.95);
background-color: #ffffff;
backdrop-filter: blur(8px);
border-radius: 7px;
outline: solid 1px rgba(255, 255, 255, 0.2);
border: solid 1px rgba(255, 255, 255, 0.2);
border-left-color: rgba(255, 255, 255, 0.1);
border-top-color: rgba(255, 255, 255, 0.1);
overflow: hidden;
padding: 7px 13px;
line-height: 20px;
transition: width 0.25s, transform 0.25s, opacity 0.25s, padding 0.25s;
}
.dah-chatbot-frontend .dah-chat-invite.active {
transform: scale(1);
padding: 7px 13px;
opacity: 1;
}
.dah-chatbot-frontend .dah-chat-avatar-container {
position: absolute;
top: 0;
left: 0;
transform: translate(-45px, -45px);
width: 90px;
height: 90px;
border-radius: 100px;
overflow: hidden;
transition: transform 1s, bottom 1.2s ease-in-out, opacity 0.6s ease-in-out, transform 0.15s ease-in-out, box-shadow 1s ease-in-out;
}
.dah-chatbot-frontend .dah-chat-avatar-container.processing {
animation: pulseglow 4s infinite;
}
.dah-chatbot-frontend .dah-chat-avatar-container .dah-chat-avatar-container {
width: 90px;
height: 90px;
border-radius: 100px;
overflow: hidden;
}
.dah-chatbot-frontend .chat-activator {
position: fixed;
bottom: 40px;
right: 20px;
z-index: 100;
border-radius: 50px;
user-select: none;
}
@media screen and (max-width: 480px) {
.dah-chatbot-frontend .chat-activator {
bottom: 20px;
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container {
transform: translate(0, 0) scale(0.92);
bottom: 0;
right: 0;
top: auto;
left: auto;
cursor: pointer;
box-shadow: 0 0 0 transparent;
pointer-events: none;
opacity: 0;
bottom: -100px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container.active {
opacity: 1;
bottom: 0;
pointer-events: all;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover { transform: translate(0, 0) scale(1);
box-shadow: 0 0 30px #eb1e0f;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .chat-input {
display: flex;
gap: 8px;
padding: 8px 8px;
background-color: #f8fafb;
box-shadow: 0 -2px 5px rgba(29, 51, 63, 0.1490196078);
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .chat-input textarea:focus {
border: 1px solid #aaa;
outline: none;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .chat-input textarea::-webkit-scrollbar {
display: none; }
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .chat-input button {
padding: 8px 16px;
background: #eb1e0f;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulseglow {
from {
box-shadow: 0 0 0 transparent;
}
50% {
box-shadow: 0 0 40px #eb1e0f;
}
to {
box-shadow: 0 0 0 transparent;
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend {
font-weight: 300;
font-family: adelle-sans, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend * {
font-family: adelle-sans, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-invite {
user-select: none;
pointer-events: none;
position: absolute;
bottom: 74px;
right: 24px;
width: 160px;
min-width: 30px;
font-size: 14px;
max-width: min(160px, 70vw);
font-weight: 300;
opacity: 0;
z-index: 2;
transform: scale(0.95);
background-color: rgba(248, 250, 251, 0.75);
backdrop-filter: blur(8px);
border-radius: 7px;
outline: solid 1px rgba(255, 255, 255, 0.2);
border: solid 1px rgba(255, 255, 255, 0.2);
border-left-color: rgba(255, 255, 255, 0.1);
border-top-color: rgba(255, 255, 255, 0.1);
overflow: hidden;
padding: 7px 13px;
line-height: 20px;
transition: width 0.25s, transform 0.25s, opacity 0.25s, padding 0.25s;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-invite.active {
transform: scale(1);
padding: 7px 13px;
opacity: 1;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-avatar-container {
position: absolute;
top: 0;
left: 0;
transform: translate(-45px, -45px);
width: 90px;
height: 90px;
border-radius: 100px;
overflow: hidden;
transition: transform 0.15s ease-in-out, box-shadow 1s ease-in-out;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-avatar-container.processing {
animation: pulseglow 4s infinite;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-avatar-container .dah-chat-avatar-container {
width: 90px;
height: 90px;
border-radius: 100px;
overflow: hidden;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-activator {
position: fixed;
bottom: 40px;
right: 20px;
z-index: 100;
border-radius: 50px;
user-select: none;
}
@media screen and (max-width: 480px) {
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-activator {
bottom: 20px;
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container {
transform: translate(0, 0) scale(0.92);
bottom: 0;
right: 0;
top: auto;
left: auto;
cursor: pointer;
box-shadow: 0 0 0 transparent;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover {
transform: translate(0, 0) scale(1);
box-shadow: 0 0 30px #eb1e0f;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-avatar-static {
width: 90px;
height: 90px;
pointer-events: none;
user-select: none;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container {
display: flex;
pointer-events: none;
user-select: none;
justify-content: flex-end;
align-items: flex-end;
width: 100dvw;
height: 100dvh;
position: fixed;
z-index: 200;
top: 0;
left: 0;
box-sizing: border-box;
padding: 0 25px 20px 0;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
transition: opacity 0.2s, background-color 0.2s;
}
@media screen and (max-width: 480px) {
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container {
justify-content: center;
padding: 0 0 20px 0;
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container.active {
z-index: 101;
opacity: 1;
pointer-events: all;
background-color: rgba(0, 0, 0, 0.2);
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window {
width: calc(100% - 55px);
max-height: min(644px, 100dvh - 120px);
height: 100dvh;
background-color: white;
padding: 0;
border-radius: 10px;
overflow: hidden;
position: relative;
box-sizing: border-box;
max-width: 360px;
display: flex;
flex-direction: column;
align-items: stretch;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03), 0 8px 15px rgba(0, 0, 0, 0.04);
}
@media screen and (max-width: 480px) {
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window {
width: calc(100% - 33px);
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container {
display: flex;
width: 100%;
position: relative;
border-radius: 8px;
justify-content: stretch;
align-items: stretch;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont {
width: auto;
padding: 0 8px 0 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
flex: 0 0 auto;
transition: padding 0.25s, width 0.25s, opacity 0.25s;
cursor: pointer;
overflow: hidden;
opacity: 1;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont.inactive {
padding: 0 0;
width: 0;
opacity: 0;
pointer-events: none;
cursor: default;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont .dah-icons-sendh {
font-size: 22px;
color: #001051;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont .dah-icons-sendh:hover {
color: #0048CF;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-user-input {
font-family: inherit;
transition: width 0.25s;
border: solid 1px rgba(165, 165, 165, 0.82);
font-size: 16px;
outline: none;
width: 100%;
box-sizing: border-box;
background: white;
color: #333333;
font-weight: 300;
flex: 1;
height: auto;
min-height: calc(2em + 1rem); max-height: calc(4.5em + 1rem); overflow-y: auto;
resize: none;
line-height: 1.2;
padding: 9px 11px; scrollbar-width: none; -ms-overflow-style: none; border-radius: 4px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-user-input::placeholder {
font-size: 15px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-user-input::-webkit-scrollbar {
display: none;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tl, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tr, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-bl, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-br {
position: absolute;
height: 20px;
background-repeat: no-repeat;
background-size: 250px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tl {
top: 0;
left: 0;
width: 60%;
background-position: top left;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tr {
top: 0;
right: 0;
width: 30%;
background-position: top right;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-bl {
bottom: 0;
left: 0;
width: 30%;
background-position: bottom left;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-br {
bottom: 0;
right: 0;
width: 60%;
background-position: bottom right;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-ask-session-close, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .dah-chat-container .dah-disclaimer {
overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
margin-bottom: 0;
padding: 25px 25px 20px 25px;
font-size: 16px;
justify-content: space-between;
display: flex;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history { overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
margin-bottom: 0;
padding: 0 20px 20px 16px;
position: relative;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .chat-message {
display: flex;
flex-direction: column;
margin-bottom: 12px;
width: 100%;
width: 100%;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .message-datetime {
text-align: right;
padding-top: 0;
font-size: 13px;
opacity: 0.8;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .chat-message.user {
margin-right: 24px;
margin-left: auto;
align-items: flex-end;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .chat-message.assistant {
align-items: stretch;
width: auto;
flex: 0 1 100%;
position: relative;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .chat-message.assistant:before {
position: absolute;
display: block;
content: "";
background-image: url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/img/avatar_icon.png);
background-size: contain;
background-repeat: no-repeat;
top: calc(100% - 19px);
width: 20px;
height: 20px;
animation: pulsate-avatar 20s infinite linear;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .message-content {
padding: 11px 16px;
max-width: 100%;
word-wrap: break-word;
user-select: text;
position: relative;
font-size: 14px;
line-height: 20px;
border-radius: 10px;
background-repeat: no-repeat;
background-position: top left;
background-size: 200px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .message-content .message-content-inner {
max-width: 297px;
overflow-x: auto;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .message-content strong {
font-weight: bold;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .message-content p:only-child {
margin: 0;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .message-content table {
border-collapse: collapse;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .message-content table tr td {
border: solid 1px lightgray;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .chat-message.user .message-content {
background-image: none !important;
background-color: rgba(0, 72, 207, 0.92);
color: #ffffff;
border-radius: 15px 15px 0 15px;
max-width: 243px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .chat-message.user .message-content p {
white-space: preserve-breaks;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chatbot-frontend .chat-history .chat-message.assistant .message-content {
max-width: 256px;
background-color: rgba(238, 243, 246, 0.76);
color: #333333;
margin-left: 30px;
border-bottom-left-radius: 0;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .chat-introductory {
padding: 30px 20px 20px 20px;
font-size: 13px;
text-align: center;
color: #515151;
display: flex;
justify-content: center;
align-items: center;
gap: 11px;
opacity: 0;
animation: fastfadeup 0.5s forwards;
animation-iteration-count: 1;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .chat-introductory .dah-icons-link {
color: #a0a0a0;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-disclaimer {
margin: 0 auto;
padding: 40px 20px 50px 20px;
height: 100%;
flex: 1 1 auto;
box-sizing: border-box;
width: 100%;
font-size: 13px;
right: 10px;
background-color: #fff;
color: #333;
display: flex;
flex-direction: column;
gap: 23px;
overflow-y: auto;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-disclaimer .dah-disclaimer-formatting {
white-space: preserve-breaks;
display: flex;
justify-content: center;
flex-direction: column;
flex: 1 1 auto;
font-size: 15px;
line-height: 19px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-button-group-vertical {
display: flex;
flex-direction: column;
gap: 8px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-ask-session-close {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 50px 20px;
gap: 25px;
height: 100%;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-ask-session-close .dah-stretch {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-close-button, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-cancel-button {
display: inline-flex;
font-weight: 400;
gap: 15px;
cursor: pointer;
width: 100%;
color: white;
background-color: #dd333d;
margin: 0 auto;
align-self: center;
padding: 11px 20px;
border-radius: 6px;
font-size: 16px;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-close-button:hover, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-cancel-button:hover {
background-color: #c43137;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-cancel-button {
background-color: #cacaca;
color: #333;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-cancel-button:hover {
background-color: #F2F2F2;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-cancel-button:active, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-cancel-button:focus {
background-color: #F8F8F8;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header {
display: flex;
width: 100%;
height: 65px;
padding: 0 20px 0 0;
position: relative;
justify-content: stretch;
align-items: center;
background-color: #F8FAFB;
box-shadow: 0 2px 5px rgba(29, 51, 63, 0.15);
color: #001051;
gap: 5px;
}
@media screen and (max-width: 768px) {
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header {
gap: 3px;
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-header-flex {
flex: 1 1 auto;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-header-action {
cursor: pointer;
font-size: 28px;
margin: 0 5px;
flex: 0 0 26px;
color: #0048CF;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.4s, color 0.4s;
border-radius: 5px; }
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-header-action.dah-icons-close {
font-size: 21px;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-header-action:hover {
background-color: #056adb;
color: #fff;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-avatar {
width: 65px;
height: 65px;
background-size: contain;
background-repeat: no-repeat;
box-sizing: border-box;
flex: 0 0 auto;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-chat-label {
font-size: 22px;
font-weight: 300;
color: #0048CF;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-ai-disclaimer {
padding: 2px 13px 2px 13px;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
border: solid 1px #0048CF;
border-radius: 6px;
white-space: nowrap;
font-size: 14px;
cursor: pointer;
color: #0048CF;
box-shadow: 0 0 0 transparent;
background-color: transparent;
transition: border 0.5s, color 0.5s, background-color 1s, box-shadow 2s;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-chat-header .dah-ai-disclaimer:hover {
background-color: rgba(0, 72, 207, 0.06);
box-shadow: 0 0 20px #0048CF;
border: solid 1px #0048CF;
color: #0048CF;
}
@keyframes pulsate-avatar {
from {
opacity: 0.9;
transform: rotate(0deg);
}
50% {
opacity: 1;
}
to {
transform: rotate(360deg);
opacity: 0.9;
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-inner-containment {
position: relative;
width: 100%;
height: 100%;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading {
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
left: 50%;
bottom: 50px;
transition: transform 0.25s ease-in-out;
transform: translate(-50%, 0) scale(55);
}
@media screen and (max-width: 1280px) {
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading {
transform: translate(-50%, -50%) scale(53);
}
}
@media screen and (max-width: 768px) {
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading {
transform: translate(-50%, -50%) scale(53);
}
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading .loading-inner-1, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading .loading-inner-2, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading .loading-inner-3 {
width: 30px;
position: absolute;
top: 0;
left: 0;
height: 30px;
border-radius: 30px;
border: solid 1px transparent;
animation: dahspinner 5s infinite linear;
filter: blur(1px);
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading .loading-inner-1 {
transform: rotate(45deg) scale(0.95);
border-left: solid 0 #005293;
border-bottom: solid 4px #57b3fd;
border-top: solid 2px #12b7ff;
animation-delay: -2.15s;
filter: blur(1.5px);
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading .loading-inner-2 {
transform: rotate(-65deg) scale(0.95);
border-left: solid 1px rgba(255, 47, 0, 0.3);
border-top: solid 4px #ff2f00;
border-right: solid 2px rgba(255, 47, 0, 0.71);
animation-duration: 12.25s;
animation-name: dahspinnerreverse;
filter: blur(1.5px);
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading .loading-inner-3 {
transform: rotate(-65deg) scale(0.95);
border-left: solid 1px rgba(227, 70, 0, 0.3);
border-top: solid 4px #aedbff;
border-right: solid 0 rgba(10, 190, 255, 0.71);
animation-duration: 14.31s;
animation-delay: -8.115s;
animation-name: dahspinnerreverse;
filter: blur(2px);
mix-blend-mode: overlay;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.small {
position: relative;
margin: 0 auto;
z-index: 1000;
height: auto;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.small .dah-loading {
bottom: 0;
transform: scale(1) !important;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.small .dah-loading .loading-inner-1, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.small .dah-loading .loading-inner-2, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.small .dah-loading .loading-inner-3 {
filter: blur(1px) !important;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.medium {
position: relative;
margin: 0 auto;
z-index: 1000;
height: auto;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.medium .dah-loading {
bottom: 0;
transform: scale(5) !important;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.medium .dah-loading .loading-inner-1, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.medium .dah-loading .loading-inner-2, .dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.medium .dah-loading .loading-inner-3 {
filter: blur(3px) !important;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0;
height: 0;
padding: 0;
margin-left: -20px;
opacity: 0;
pointer-events: none;
user-select: none;
transition: opacity 4s ease-in-out;
transition-delay: 0s;
}
.dah-chatbot-frontend .chat-activator .dah-chat-avatar-container:hover .dah-loading-containment.loading {
opacity: 1;
transition: opacity 1.5s ease-in-out;
transition-delay: 0s;
}
@keyframes dahspinner {
from {
transform: rotate(0deg) scale(0.98);
}
50% {
transform: rotate(180deg) scale(1.01);
}
to {
transform: rotate(360deg) scale(0.98);
}
}
@keyframes dahspinnerreverse {
from {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.01);
}
to {
transform: rotate(-360deg) scale(1);
}
}
@keyframes fastfadeup {
from {
transform: translate(0, -30px);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
.dah-chatbot-frontend .dah-chat-avatar-static {
width: 90px;
height: 90px;
pointer-events: none;
user-select: none;
}
.dah-chatbot-frontend .dah-chat-container {
display: flex;
pointer-events: none;
user-select: none;
justify-content: flex-end;
align-items: flex-end;
width: 100dvw;
height: 100dvh;
position: fixed;
z-index: 200;
top: 0;
left: 0;
box-sizing: border-box;
padding: 0 25px 20px 0;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
transition: opacity 0.2s, background-color 0.2s;
}
@media screen and (max-width: 480px) {
.dah-chatbot-frontend .dah-chat-container {
justify-content: center;
padding: 0 0 20px 0;
}
}
.dah-chatbot-frontend .dah-chat-container.active {
z-index: 101;
opacity: 1;
pointer-events: all;
background-color: rgba(0, 0, 0, 0.2);
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window {
width: calc(100% - 55px);
max-height: min(644px, 100dvh - 120px);
height: 100dvh;
background-color: white;
padding: 0;
border-radius: 10px;
overflow: hidden;
position: relative;
box-sizing: border-box;
max-width: 360px;
display: flex;
flex-direction: column;
align-items: stretch;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03), 0 8px 15px rgba(0, 0, 0, 0.04);
}
@media screen and (max-width: 480px) {
.dah-chatbot-frontend .dah-chat-container .dah-chat-window {
width: calc(100% - 33px);
}
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container {
display: flex;
width: 100%;
position: relative;
border-radius: 8px;
justify-content: stretch;
align-items: stretch;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont {
width: auto;
padding: 0 0 0 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
flex: 0 0 auto;
transition: padding 0.25s, width 0.25s, opacity 0.25s;
cursor: pointer;
overflow: hidden;
opacity: 1;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont.inactive {
padding: 0 0;
width: 0;
opacity: 0;
pointer-events: none;
cursor: default;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont .dah-icons-sendh {
font-size: 22px;
color: #001051;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .chat-input-container .chat-send-icon-cont .dah-icons-sendh:hover {
color: #0048CF;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-user-input {
font-family: inherit;
transition: width 0.25s;
border: solid 1px rgba(165, 165, 165, 0.74);
font-size: 16px;
outline: none;
width: 100%;
box-sizing: border-box;
background: white;
color: #333333;
font-weight: 300;
flex: 1;
height: auto;
min-height: calc(2em + 1rem); max-height: calc(4.5em + 1rem); overflow-y: auto;
resize: none;
line-height: 1.2;
padding: 9px 11px; scrollbar-width: none; -ms-overflow-style: none; border-radius: 4px;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-user-input::placeholder {
font-size: 15px;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-user-input::-webkit-scrollbar {
display: none;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tl, .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tr, .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-bl, .dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-br {
position: absolute;
height: 20px;
background-repeat: no-repeat;
background-size: 250px;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tl {
top: 0;
left: 0;
width: 60%;
background-position: top left;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-tr {
top: 0;
right: 0;
width: 30%;
background-position: top right;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-bl {
bottom: 0;
left: 0;
width: 30%;
background-position: bottom left;
}
.dah-chatbot-frontend .dah-chat-container .dah-chat-window .dah-chat-frame-br {
bottom: 0;
right: 0;
width: 60%;
background-position: bottom right;
}
.dah-chatbot-frontend .dah-chat-container .dah-ask-session-close, .dah-chatbot-frontend .dah-chat-container .dah-disclaimer {
overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
margin-bottom: 0;
padding: 25px 25px 20px 25px;
font-size: 16px;
justify-content: space-between;
display: flex;
}
.dah-chatbot-frontend .chat-history { overflow-y: auto;
overflow-x: hidden;
flex: 1 1 auto;
margin-bottom: 0;
padding: 0 20px 20px 16px;
position: relative;
}
.dah-chatbot-frontend .chat-history .chat-message {
display: flex;
flex-direction: column;
margin-bottom: 12px;
width: 100%;
width: 100%;
}
.dah-chatbot-frontend .chat-history .message-datetime {
text-align: right;
padding-top: 0;
font-size: 13px;
opacity: 0.8;
}
.dah-chatbot-frontend .chat-history .chat-message.user {
margin-right: 24px;
margin-left: auto;
align-items: flex-end;
}
.dah-chatbot-frontend .chat-history .chat-message.assistant {
align-items: stretch;
width: auto;
flex: 0 1 100%;
position: relative;
}
.dah-chatbot-frontend .chat-history .chat-message.assistant:before {
position: absolute;
display: block;
content: "";
background-image: url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/img/avatar_icon.png);
background-size: contain;
background-repeat: no-repeat;
top: calc(100% - 19px);
width: 20px;
height: 20px;
animation: pulsate-avatar 20s infinite linear;
}
.dah-chatbot-frontend .chat-history .message-content {
padding: 11px 16px;
max-width: 100%;
word-wrap: break-word;
user-select: text;
position: relative;
font-size: 14px;
line-height: 20px;
border-radius: 10px;
background-repeat: no-repeat;
background-position: top left;
background-size: 200px;
}
.dah-chatbot-frontend .chat-history .message-content .message-content-inner {
max-width: 297px;
overflow-x: auto;
}
.dah-chatbot-frontend .chat-history .message-content .message-content-inner a {
color: #0072C5;
}
.dah-chatbot-frontend .chat-history .message-content strong {
font-weight: bold;
}
.dah-chatbot-frontend .chat-history .message-content p:only-child {
margin: 0;
}
.dah-chatbot-frontend .chat-history .message-content table {
border-collapse: collapse;
}
.dah-chatbot-frontend .chat-history .message-content table tr td {
border: solid 1px lightgray;
}
.dah-chatbot-frontend .chat-history .chat-message.user .message-content {
background-image: none !important;
background-color: rgba(0, 72, 207, 0.92);
color: #ffffff;
border-radius: 15px 15px 0 15px;
max-width: 243px;
}
.dah-chatbot-frontend .chat-history .chat-message.user .message-content p {
white-space: preserve-breaks;
}
.dah-chatbot-frontend .chat-history .chat-message.assistant .message-content {
max-width: 256px;
background-color: rgba(247, 249, 255, 0.92);
color: #333333;
margin-left: 30px;
border-bottom-left-radius: 0;
}
.chat-introductory {
padding: 30px 20px 20px 20px;
font-size: 13px;
text-align: center;
color: #515151;
display: flex;
justify-content: center;
align-items: center;
gap: 11px;
opacity: 0;
animation: fastfadeup 0.5s forwards;
animation-iteration-count: 1;
}
.chat-introductory .dah-icons-link {
color: #a0a0a0;
}
.dah-disclaimer {
margin: 0 auto;
padding: 40px 20px 50px 20px;
height: 100%;
flex: 1 1 auto;
box-sizing: border-box;
width: 100%;
overflow-y: auto;
font-size: 13px;
right: 10px;
background-color: #fff;
color: #333;
display: flex;
flex-direction: column;
gap: 23px;
overflow-y: auto;
}
.dah-disclaimer .dah-disclaimer-formatting {
white-space: preserve-breaks;
display: flex;
justify-content: center;
flex-direction: column;
flex: 1 1 auto;
font-size: 15px;
line-height: 19px;
}
.dah-button-group-vertical {
display: flex;
flex-direction: column;
gap: 8px;
}
.dah-ask-session-close {
display: flex;
flex-direction: column;
justify-content: stretch;
text-align: center;
padding: 50px 20px;
gap: 25px;
height: 100%;
}
.dah-ask-session-close .dah-close-combiner {
display: flex;
flex: 1 1 auto;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 17px;
}
.dah-ask-session-close .dah-stretch {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.dah-ask-session-close .dah-stretch.dah-taller {
flex: 1 1 auto;
display: flex;
}
.dah-ask-session-close .dah-stretch.dah-close-top {
flex: 1 1 auto;
justify-content: flex-start;
}
.dah-ask-session-close .dah-stretch.dah-close-video-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
flex: 1 1 auto;
}
.dah-ask-session-close .dah-stretch.top-align {
justify-content: flex-start;
}
.dah-close-button, .dah-cancel-button {
display: inline-flex;
gap: 15px;
cursor: pointer;
width: 100%;
color: white;
background-color: #dd333d;
margin: 0 auto;
align-self: center;
box-sizing: border-box;
padding: 13px 20px;
border-radius: 6px;
font-size: 16px;
align-items: center;
justify-content: center;
white-space: nowrap;
font-weight: 400;
}
.dah-close-button:hover, .dah-cancel-button:hover {
background-color: #c43137;
}
.dah-cancel-button {
background-color: transparent;
border: solid 1px #d3d3d3;
color: #333;
padding: 12px 20px;
}
.dah-cancel-button:hover {
background-color: #F2F2F2;
}
.dah-cancel-button:active, .dah-cancel-button:focus {
background-color: #F8F8F8;
}
.dah-chat-header {
display: flex;
width: 100%;
height: 65px;
padding: 0 20px 0 0;
position: relative;
justify-content: stretch;
align-items: center;
background-color: #F8FAFB;
box-shadow: 0 2px 5px rgba(29, 51, 63, 0.15);
color: #001051;
gap: 5px;
}
@media screen and (max-width: 768px) {
.dah-chat-header {
gap: 3px;
}
}
.dah-chat-header .dah-header-flex {
flex: 1 1 auto;
}
.dah-chat-header .dah-header-action {
cursor: pointer;
font-size: 28px;
margin: 0 5px;
flex: 0 0 26px;
color: #0048CF;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.4s, color 0.4s;
border-radius: 5px; }
.dah-chat-header .dah-header-action.dah-icons-close {
font-size: 21px;
}
.dah-chat-header .dah-header-action:hover {
background-color: #056adb;
color: #fff;
}
.dah-chat-header .dah-video-container {
mix-blend-mode: multiply;
object-fit: contain;
width: 114px;
height: 65px;
background-size: contain;
background-repeat: no-repeat;
box-sizing: border-box;
flex: 0 0 auto;
}
.dah-chat-header .dah-video-container .dah-video-element-cover {
width: 114px;
height: 65px;
}
.dah-chat-header .dah-avatar {
width: 65px;
height: 65px;
background-size: contain;
background-repeat: no-repeat;
box-sizing: border-box;
flex: 0 0 auto;
}
.dah-chat-header .dah-chat-label {
font-size: 22px;
font-weight: 300;
color: #0048CF;
}
.dah-chat-header .dah-ai-disclaimer {
padding: 2px 13px 2px 13px;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
border: solid 1px #0048CF;
border-radius: 6px;
white-space: nowrap;
font-size: 14px;
cursor: pointer;
color: #0048CF;
box-shadow: 0 0 0 transparent;
background-color: transparent;
transition: border 0.5s, color 0.5s, background-color 1s, box-shadow 2s;
}
.dah-chat-header .dah-ai-disclaimer:hover {
background-color: rgba(0, 72, 207, 0.06);
box-shadow: 0 0 20px #0048CF;
border: solid 1px #0048CF;
color: #0048CF;
}
@keyframes pulsate-avatar {
from {
opacity: 0.9;
transform: rotate(0deg);
}
50% {
opacity: 1;
}
to {
transform: rotate(360deg);
opacity: 0.9;
}
}
.dah-loading-inner-containment {
position: relative;
width: 100%;
height: 100%;
}
.dah-disclaimer-formatting a {
color: #0072C5;
}
.dah-loading {
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
left: 50%;
bottom: 50px;
transition: transform 0.25s ease-in-out;
transform: translate(-50%, 0) scale(55);
}
@media screen and (max-width: 1280px) {
.dah-loading {
transform: translate(-50%, -50%) scale(53);
}
}
@media screen and (max-width: 768px) {
.dah-loading {
transform: translate(-50%, -50%) scale(53);
}
}
.dah-loading .loading-inner-1, .dah-loading .loading-inner-2, .dah-loading .loading-inner-3 {
width: 30px;
position: absolute;
top: 0;
left: 0;
height: 30px;
border-radius: 30px;
border: solid 1px transparent;
animation: dahspinner 5s infinite linear;
filter: blur(1px);
}
.dah-loading .loading-inner-1 {
transform: rotate(45deg) scale(0.95);
border-left: solid 0 #005293;
border-bottom: solid 4px #57b3fd;
border-top: solid 2px #12b7ff;
animation-delay: -2.15s;
filter: blur(1.5px);
}
.dah-loading .loading-inner-2 {
transform: rotate(-65deg) scale(0.95);
border-left: solid 1px rgba(255, 47, 0, 0.3);
border-top: solid 4px #ff2f00;
border-right: solid 2px rgba(255, 47, 0, 0.71);
animation-duration: 12.25s;
animation-name: dahspinnerreverse;
filter: blur(1.5px);
}
.dah-loading .loading-inner-3 {
transform: rotate(-65deg) scale(0.95);
border-left: solid 1px rgba(227, 70, 0, 0.3);
border-top: solid 4px #aedbff;
border-right: solid 0 rgba(10, 190, 255, 0.71);
animation-duration: 14.31s;
animation-delay: -8.115s;
animation-name: dahspinnerreverse;
filter: blur(2px);
mix-blend-mode: overlay;
}
.dah-loading-containment.small {
position: relative;
margin: 0 auto;
z-index: 1000;
height: auto;
}
.dah-loading-containment.small .dah-loading {
bottom: 0;
transform: scale(1) !important;
}
.dah-loading-containment.small .dah-loading .loading-inner-1, .dah-loading-containment.small .dah-loading .loading-inner-2, .dah-loading-containment.small .dah-loading .loading-inner-3 {
filter: blur(1px) !important;
}
.dah-loading-containment.noblur div.dah-loading {
left: -13px;
}
.dah-loading-containment.noblur {
filter: none !important;
}
.dah-loading-containment.noblur .dah-loading div.loading-inner-1, .dah-loading-containment.noblur .dah-loading div.loading-inner-2, .dah-loading-containment.noblur .dah-loading div.loading-inner-3 {
filter: none !important;
}
.dah-loading-containment.noblur * {
filter: none !important;
}
.dah-loading-containment.noblur * * {
filter: none !important;
}
.dah-loading-containment.noblur * * * {
filter: none !important;
}
.dah-audio-input-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.dah-audio-input-container.active {
width: 100%;
}
.dah-audio-input-container .dah-buffer-preview {
position: absolute;
width: 100%;
top: -20px;
transform: translate(0, -100%);
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border-radius: 10px;
background-image: none !important;
background-color: rgba(0, 72, 207, 0.9215686275);
color: #fff;
padding: 11px 16px;
border-radius: 15px 15px 0;
opacity: 0;
max-width: 243px;
}
.dah-audio-input-container .dah-buffer-preview.active {
opacity: 0.9;
transition: opacity 0.8s;
}
.dah-audio-input-container .start-recording-icon {
width: 0;
flex: 0 0 auto;
overflow: hidden;
color: #698cb3;
border: none;
display: flex;
justify-content: center;
align-items: center;
}
.dah-audio-input-container .start-recording-icon .dah-icons-microphone {
font-size: 24px;
}
.dah-audio-input-container .start-recording-icon.active {
cursor: pointer;
border: solid 1px #698cb3;
margin: 0 10px;
border-radius: 30px;
width: 36px;
height: 36px;
flex: 0 0 auto;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.dah-audio-input-container .start-recording-icon.active:hover {
border: solid 2px #eb1e0f;
color: #eb1e0f;
box-shadow: 0 0 6px rgba(235, 30, 15, 0.2), inset 0 0 6px rgba(235, 30, 15, 0.2);
}
.dah-audio-input-container .recording-progress-area {
width: 0;
max-width: 0;
overflow: hidden;
flex: 0 0 auto;
}
.dah-audio-input-container .recording-progress-area.active {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
max-width: inherit;
flex: 1 1 auto;
}
.video-preclose {
width: 140px;
max-width: 100%;
margin: 0 auto;
aspect-ratio: 1;
flex: 1 1 auto;
object-position: bottom;
pointer-events: none;
user-select: none;
}
.dah-loading-containment.medium {
position: relative;
margin: 0 auto;
z-index: 1000;
height: auto;
}
.dah-loading-containment.medium .dah-loading {
bottom: 0;
transform: scale(5) !important;
}
.dah-loading-containment.medium .dah-loading .loading-inner-1, .dah-loading-containment.medium .dah-loading .loading-inner-2, .dah-loading-containment.medium .dah-loading .loading-inner-3 {
filter: blur(3px) !important;
}
.dah-loading-containment {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0;
height: 0;
padding: 0;
margin-left: -20px;
opacity: 0;
pointer-events: none;
user-select: none;
transition: opacity 4s ease-in-out;
transition-delay: 0s;
}
.dah-loading-containment.loading {
opacity: 1;
transition: opacity 1.5s ease-in-out;
transition-delay: 0s;
}
.dah-fs15 {
font-size: 15px;
color: #333;
}
@keyframes dahspinner {
from {
transform: rotate(0deg) scale(0.98);
}
50% {
transform: rotate(180deg) scale(1.01);
}
to {
transform: rotate(360deg) scale(0.98);
}
}
@keyframes dahspinnerreverse {
from {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.01);
}
to {
transform: rotate(-360deg) scale(1);
}
}
@keyframes fastfadeup {
from {
transform: translate(0, -30px);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}@font-face {
font-family: "dah-icons";
src: url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/icons/dah-icons.eot?t=1758296722888); src: url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/icons/dah-icons.eot?t=1758296722888#iefix) format('embedded-opentype'), url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/icons/dah-icons.woff2?t=1758296722888) format("woff2"),
url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/icons/dah-icons.woff?t=1758296722888) format("woff"),
url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/icons/dah-icons.ttf?t=1758296722888) format('truetype'), url(//payrollplus.ch/wp-content/plugins/detail-ai-hub/dist/icons/dah-icons.svg?t=1758296722888#dah-icons) format('svg'); }
[class^="dah-icons-"], [class*=" dah-icons-"] {
font-family: 'dah-icons' !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dah-icons-ai-bot-icon:before { content: "\ea01"; }
.dah-icons-ai-hub:before { content: "\ea02"; }
.dah-icons-chat_close_cw:before { content: "\ea03"; }
.dah-icons-chatbot-link-icon:before { content: "\ea04"; }
.dah-icons-chevron_down_cw:before { content: "\ea05"; }
.dah-icons-collapse:before { content: "\ea06"; }
.dah-icons-eye:before { content: "\ea07"; }
.dah-icons-faq:before { content: "\ea08"; }
.dah-icons-knowledge:before { content: "\ea09"; }
.dah-icons-link:before { content: "\ea0a"; }
.dah-icons-logout:before { content: "\ea0b"; }
.dah-icons-logs:before { content: "\ea0c"; }
.dah-icons-microphone:before { content: "\ea0d"; }
.dah-icons-play-solid-full:before { content: "\ea0e"; }
.dah-icons-send:before { content: "\ea0f"; }
.dah-icons-sendh:before { content: "\ea10"; }
.dah-icons-settings:before { content: "\ea11"; }
.dah-icons-statistics:before { content: "\ea12"; }
.dah-icons-stop-audio:before { content: "\ea13"; }
.dah-icons-user-single:before { content: "\ea14"; }
.dah-icons-waveform:before { content: "\ea15"; }