@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: 'Segoe UI';
  src: url('https://api.knock-knockapp.com/files/Segoe-UI.woff2') format('woff2'),
    url('https://api.knock-knockapp.com/files/Segoe-UI.woff') format('woff');
  font-weight: 400;
  /* Normal weight */
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('https://api.knock-knockapp.com/files/Segoe-UI-Bold.woff2') format('woff2'),
    url('https://api.knock-knockapp.com/files/Segoe-UI-Bold.woff') format('woff');
  font-weight: 700;
  /* Normal weight */
  font-style: normal;
}

.page-wrapper * {
  box-sizing: border-box;
  cursor: auto;
  cursor: initial;
}

.kk-widget-wrapper {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  position: fixed;
  bottom: 0;
  z-index: 99999999999;
  overflow: hidden;
}

.kk-widget-wrapper.kk-widget-wrapper-mini-widget-active {
  width: 165px;
}

.kk-widget-main-screen-content .agents-info ul.user-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center;
}

.kk-widget-main-screen-content .agents-info ul.user-list li .kk-agent-list-number {
  background: #fff;
  display: flex;
  font-size: 8px;
  height: 22px;
  width: 22px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #000 !important;
  font-weight: 500;
}

.kk-widget-main-screen-content .agents-info ul.user-list li {
  margin-right: 10px !important;
  margin-bottom: 0 !important;
  line-height: 0;
  list-style: none;
}

.kk-widget-main-screen-content .agents-info ul.user-list li:last-child {
  margin-right: 0 !important;
}

.kk-small-widget-wrapper {
  width: 186px;
  position: relative;
}

.kk-small-widget video {
  width: 100%;
  height: 261px;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
  pointer-events: none;
  touch-action: none;
  z-index: -1;
  position: relative;
}

.kk-small-widget-content-wrapper {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 44%) 80%);
}

.kk-small-widget-content-wrapper > img {
  align-self: end;
  padding: 10px;
  cursor: pointer;
  transition: all ease 0.4s;
}

.kk-small-widget-content-wrapper > img:hover {
  transform: scale(1.2);
}

.kk-small-widget-content-inner {
  text-align: center;
  padding-bottom: 30px;
}

.kk-small-widget-content-inner p {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 3px;
}

.kk-small-widget-content-inner button {
  font-size: 12px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff;
  background: rgb(255 255 255 / 0%);
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 3px 13px;
  cursor: pointer;
  transition: all ease 0.4s;
  background: transparent !important;
}

.kk-small-widget:hover .kk-small-widget-content-inner button {
  background: rgb(255 255 255 / 20%) !important;
}

.kk-small-widget:hover .kk-small-widget-content-inner img {
  transform: rotate(18deg);
}

.kk-small-widget-content-inner img {
  margin-bottom: 5px;
  transition: all ease 0.4s;
}

.kk-small-widget {
  width: 186px;
  margin: 0 20px 0 auto;
  height: 261px;
}

/* .kk-small-widget:before {
    content: url('https://api.knock-knockapp.com/files/small-widget-bg.png');
    width: 250px;
    height: 163px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 33%;
    transform: translateX(50%);
} */
.kk-widget-no-answer-form-submit img.company_logo {
  margin-bottom: 25px;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
}

/* .kk-mini-widget {
    height: 0;
    transition: all ease 0.4s;
    transform: translateY(100%);
} */

.kk-greetings-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f2f2f;
  border-radius: 30px;
  padding: 6px 10px;
  color: #fff;
  font-size: 18px;
  width: 294px;
  min-height: 36px;
  max-width: 100%;
  position: relative;
  transition: all ease 0.4s;
  cursor: pointer;
  margin: 15px 10px 20px auto;
  z-index: 99;
}

.kk-greetings-wrapper:hover {
  padding: 11px 10px;
  margin-top: 20px;
}

#call-declined-by-user {
  max-width: 80%;
  margin: 0 auto;
  text-align-last: center;
}

.kk-greetings-wrapper video {
  width: 81px;
  height: 82px;
  position: absolute;
  object-fit: cover;
  transition: all ease 0.4s;
  box-shadow: 0px 3px 11px rgb(0 0 0 / 16%);
  border-radius: 50%;
  transform: scale(0.9);
  pointer-events: none;
  touch-action: none;
  z-index: -1;
  border: 2px solid #ff2d2e;
  min-height: 82px;
  min-width: 81px;
  bottom: auto;
  left: 4px;
}

.kk-greetings-wrapper:hover video {
  left: 8px;
  transform: scale(1);
  pointer-events: none;
  touch-action: none;
}

.kk-greetings-wrapper p {
  font-size: 18px;
  font-weight: 600;
  color: #fff !important;
  margin: 0;
  transition: all ease 0.4s;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  line-height: 35px;
  padding-left: 15px;
  padding-bottom: 0px;
}

.kk-greetings-wrapper:hover p {
  padding-left: 25px;
}

.kk-widget-main-screen-wrapper {
  width: 302px;
  max-width: 100%;
  position: relative;
  margin: 10px 20px 10px auto;
  box-shadow: 0 3px 12px rgb(0 0 0 / 16%);
  background: transparent;
  border-radius: 20px;
}

.kk-widget-main-screen-wrapper-inner {
  height: 484px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.kk-widget-main-screen-wrapper .kk-widget-main-screen-wrapper-inner > video {
  width: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  pointer-events: none;
  touch-action: none;
  z-index: -1;
  position: relative;
  /* background: linear-gradient(to bottom, #618ca9 0%, #0e151b 100%); */
  background: linear-gradient(to bottom, #3b8d99 0%, #1b4348 100%);
}

.kk-widget-main-screen-content-wrapper {
  position: absolute;
  top: 0;
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 44%) 80%);
  width: 100%;
  height: calc(100% - 31px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  max-height: 593px;
  transition: all ease 0.4s;
  border-radius: 20px 20px 0 0;
}

.kk-widget-main-screen-content-head {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  align-items: flex-start;
}

.kk-widget-main-screen-content-head-video-sound-control-inner * {
  cursor: pointer;
}

.kk-widget-main-screen-content-head-video-sound-control-inner {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.38);
  padding: 5px 6px;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid #fff;
  transition: all ease 0.4s;
  overflow: hidden;
  position: relative;
}

.kk-widget-main-screen-content-head-video-sound-control-inner:hover {
  background: rgb(255, 255, 255);
}

.kk-widget-main-screen-content-head-video-sound-control-inner-active {
  background: rgb(255, 255, 255);
}

.kk-sound-icon-wrapper {
  position: relative;
  width: 12px;
  height: 12px;
}

.kk-sound-icon-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
  width: 100%;
  height: 100%;
}

.kk-volume-on {
  opacity: 0;
  z-index: 2;
}

.kk-volume-off {
  opacity: 1;
  z-index: 1;
}

.kk-widget-main-screen-content-head-video-sound-control-inner-active .kk-volume-on {
  opacity: 1;
}

.kk-widget-main-screen-content-head-video-sound-control-inner-active .kk-volume-off {
  opacity: 0;
}

/* Text Transition */
.kk-widget-main-screen-content-head-video-sound-control-text {
  font-size: 10px;
  color: #2f2f2f;
  margin-left: 5px;
  max-width: 50px;
  opacity: 1;
  transition: max-width 0.4s ease, opacity 0.4s ease, margin-left 0.4s ease;
  white-space: nowrap;
  overflow: hidden;
}

.kk-widget-main-screen-content-head-video-sound-control-inner-active
  .kk-widget-main-screen-content-head-video-sound-control-text {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.kk-widget-main-screen-content-head .kk-widget-main-screen-content-head-video-sound-control-inner img {
  max-width: 100%;
}

.kk-widget-main-screen-content-head img {
  cursor: pointer;
  transition: all ease 0.4s;
  max-width: 50%;
  width: auto;
}

.kk-widget-main-screen-content-head img:last-child {
  max-width: 20px;
}

.kk-widget-main-screen-content {
  padding: 15px;
}

.kk-controls-btn-wrapper {
  display: flex;
  justify-content: center;
  max-width: 250px;
  margin: 0 auto;
  padding-bottom: 12px;
  position: relative;
  z-index: 9;
}

.kk-widget-main-screen-content > p {
  font-size: 15px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  font-weight: 700;
  margin: 0;
  padding-bottom: 10px;
  text-align: center !important;
  text-align-last: center !important;
}

.kk-controls-btn-wrapper button {
  font-size: 9px !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 62px;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0px 3px 4px rgb(0 0 0 / 16%);
  cursor: pointer;
  position: relative;
  margin-right: 10px !important;
  padding: 0px !important;
  line-height: 13.5px;
}

.kk-controls-btn-wrapper button:last-child {
  margin-right: 0px !important;
}

.kk-controls-btn-wrapper button span.kk-chat-notification {
  background: #cb1a1a;
  font-size: 10px;
  line-height: 0px;
  font-weight: 600;
  border-radius: 50%;
  border: 1px solid #fff;
  position: absolute;
  top: -7px;
  right: 5px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kk-controls-btn-wrapper button svg {
  margin-bottom: 5px;
  max-width: 21px;
}

.kk-controls-btn-wrapper button.kk-audio-btn svg {
  max-width: 11px;
  max-height: 17px;
}

.kk-controls-btn-wrapper button.kk-chat-btn svg {
  max-width: 14px;
  max-height: 14px;
}

.kk-controls-btn-wrapper button.kk-video-btn {
  background-color: #2ea2ff !important;
}

.kk-controls-btn-wrapper button.kk-audio-btn {
  background-color: #2f2f2f !important;
}

.kk-controls-btn-wrapper button.kk-chat-btn {
  background-color: #707070 !important;
}

.kk-widget-main-screen-content .agents-info {
  display: none;
  border-top: 1px solid rgb(255 255 255 / 30%);
  padding-top: 15px;
  align-items: center;
  flex-wrap: nowrap;
}

.kk-widget-main-screen-content .agents-info p {
  margin: 0 25px 0 0;
  font-size: 12px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  padding-bottom: 0;
}

.kk-widget-main-screen-content .agents-info img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 20px;
  object-fit: cover;
}

.kk-widget-main-screen-copyright {
  background: #2f2f2f;
  border-radius: 0 0 20px 20px;
  text-align: center;
  padding: 4px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 31px;
}

.kk-widget-main-screen-copyright > *:nth-child(1):last-child {
  margin: auto;
}

.kk-widget-main-screen-copyright p {
  margin: 0 !important;
  font-size: 8px !important;
  line-height: 8px !important;
  padding: 0 !important;
  color: #838383 !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
}

.kk-widget-main-screen-copyright svg {
  align-self: center;
  padding-left: 5px;
  display: block;
  max-width: 90%;
}

.kk-widget-main-screen-copyright .kk-widget-main-screen-copyright-company-branding img {
  padding-left: 14px;
  height: 14px;
  vertical-align: unset;
}

.kk-widget-main-screen-copyright > *:nth-child(1):last-child {
  margin: auto;
}

.kk-widget-main-screen-copyright-inner {
  display: flex;
  align-items: center;
}

.kk-widget-main-screen-copyright-inner a {
  cursor: pointer;
}

.kk-widget-main-screen-copyright-inner a svg {
  cursor: pointer;
}
.kk-widget-main-screen-copyright-inner a * {
  cursor: pointer;
}
.kk-small-widget video::-webkit-media-controls {
  display: none !important;
}

.kk-small-widget video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

.kk-widget-main-screen-wrapper .kk-widget-main-screen-wrapper-inner > video::-webkit-media-controls {
  display: none !important;
}

.kk-widget-main-screen-wrapper
  .kk-widget-main-screen-wrapper-inner
  > video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

.kk-widget-main-screen-content .agents-info img:last-child {
  margin-right: 0px;
}

.kk-widget-screen {
  transition: all ease 0.5s;
}

.kk-un-active-screen {
  transform: translateY(120%);
  height: 0;
  opacity: 0;
}

.kk-widget-calling-started {
  visibility: hidden;
  height: 0;
  transition: all ease 0.4s;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: calc(100% - 31px);
  align-items: center;
  justify-content: center;
  transition: all ease 0.4s;
}

.kk-widget-calling-started.kk-widget-calling-activated {
  justify-content: flex-center;
}

.kk-widget-calling-started.kk-widget-calling-activated.kk-widget-calling-connect-agent-header-position {
  justify-content: flex-start;
}

.kk-widget-calling-started .kk-widget-calling-started-head {
  display: none;
}

.kk-widget-ai-agent-context-wrapper {
  background: linear-gradient(0deg, #bcf7f4 -27%, rgb(255 255 255) 10%);
  padding: 10px 15px;
  width: 100%;
  height: calc(100% - 60px);
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  transition: all ease 0.4s;
}

.kk-widget-ai-agent-context-wrapper.kk-show-ai-transcript {
  background: linear-gradient(0deg, #bcf7f4 -19%, rgb(255 255 255) 82%);
}

.kk-widget-ai-agent-context-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.kk-widget-ai-agent-context-head-time-wrapper {
  font-size: 10px;
  display: flex;
  color: #163236;
}

.kk-widget-ai-agent-context-head-control-btn {
  font-size: 10px;
  color: #163236;
  border: 1px solid #163236;
  border-radius: 20px;
  padding: 3px 7px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all ease 0.4s;
}

.kk-widget-ai-agent-context-head-control-btn.kk-widget-ai-agent-context-head-control-btn-active {
  color: #fff;
  background: #163236;
}

.kk-widget-ai-agent-context-head-control-btn .kk-icon-default-transcript {
  display: none;
}

.kk-widget-ai-agent-context-head-control-btn img {
  transition: all ease 0.4s;
  padding-left: 3px;
  max-width: 14px;
}

.kk-widget-ai-agent-context-head-control-btn.kk-widget-ai-agent-context-head-control-btn-active
  .kk-icon-default-transcript {
  display: inline-block;
}

.kk-widget-ai-agent-context-head-control-btn.kk-widget-ai-agent-context-head-control-btn-active
  .kk-icon-expand-transcript {
  display: none;
}

.kk-widget-ai-agent-context-summary-footer {
  text-align: end;
}

.kk-widget-ai-agent-context-summary-footer .kk-widget-ai-agent-context-summary-footer-circle {
  font-size: 20px;
  width: 86px;
  height: 83px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
  border: 2px solid #3ee9e1;
  background: linear-gradient(315deg, #9af0eb 14%, rgb(255 255 255) 109%);
  margin: 0 0 0 auto;
  will-change: transform;
}

.kk-widget-ai-agent-context-details-footer-circle {
  font-size: 10px;
  width: 48px;
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
  border: 2px solid #3ee9e1;
  background: linear-gradient(315deg, #9af0eb 14%, rgb(255 255 255) 109%);
  margin: 0 0 0 auto;
  will-change: transform;
}

.kk-widget-ai-agent-context-summary-message-title,
.kk-widget-ai-agent-context-message-title {
  font-size: 12px;
  font-weight: 800;
  color: #2f2f2f;
}

.kk-widget-ai-agent-context-summary-message,
.kk-widget-ai-agent-context-message-text {
  font-size: 14px;
  color: #707070;
}

.kk-widget-ai-agent-context-summary-message-wrapper,
.kk-widget-ai-agent-context-message {
  max-width: 190px;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.kk-widget-ai-agent-context-summary-message-wrapper {
  min-height: 80px;
}

.kk-widget-ai-agent-context-summary-message {
  height: 42px;
  overflow-y: auto;
}

.kk-widget-ai-agent-context-summary-message::-webkit-scrollbar {
  display: none;
}

/* .kk-widget-ai-agent-context-summary-message {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
} */

.kk-widget-ai-agent-context-message.kk-widget-ai-agent-context-message-user {
  margin: 0 0 10px auto;
  background: #163236;
}

.kk-widget-ai-agent-context-message.kk-widget-ai-agent-context-message-user
  .kk-widget-ai-agent-context-summary-message-title {
  color: #ffffff;
}

.kk-widget-ai-agent-context-message.kk-widget-ai-agent-context-message-user .kk-widget-ai-agent-context-message-text,
.kk-widget-ai-agent-context-message.kk-widget-ai-agent-context-message-user .kk-widget-ai-agent-context-message-title {
  color: #ffffff;
}

.kk-widget-ai-agent-context-details-wrapper {
  visibility: hidden;
  height: 0;
  transform: translateY(100%);
  transition: all ease 0.4s;
  overflow: hidden;
}

.kk-widget-calling-ai-activated.kk-widget-calling-started::before {
  display: none;
}

.kk-widget-calling-ai-activated.kk-widget-calling-started {
  justify-content: flex-start;
}

.kk-widget-calling-ai-activated.kk-widget-calling-started .calling-text {
  display: none !important;
}

.kk-widget-calling-ai-activated.kk-widget-calling-started .kk-widget-calling-connection-text-wrapper {
  display: none !important;
}

.kk-widget-calling-ai-activated.kk-widget-calling-started .kk-widget-calling-connection-agent-info-wrapper {
  padding-bottom: 0;
}

.kk-widget-ai-agent-context-video {
  text-align: center;
}

.kk-widget-ai-agent-context-video video {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  transition: all ease 0.4s;
}

.kk-ai-status-listening .kk-widget-ai-agent-context-video video {
  transform: scale(1.1);
}

.kk-ai-status-speaking .kk-widget-ai-agent-context-video video {
  transform: scale(0.8);
}

.kk-widget-ai-agent-context-wrapper.kk-show-ai-transcript .kk-widget-ai-agent-context-summary-wrapper {
  display: none;
}

.kk-widget-ai-agent-context-wrapper.kk-show-ai-transcript .kk-widget-ai-agent-context-details-wrapper {
  visibility: visible;
  height: auto;
  transform: translateY(0%);
}

.kk-widget-ai-agent-context-details-messages {
  height: 300px;
  overflow-y: auto;
  width: 100%;
  margin-bottom: 10px;
}

.kk-widget-ai-agent-context-details-messages::-webkit-scrollbar {
  display: none;
}

.kk-widget-ai-agent-context-details-footer {
  text-align: end;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 55px;
  padding-right: 5px;
}

.kk-ai-agent-mic-status {
  margin-right: 10px;
  font-weight: 800;
  text-transform: capitalize;
}

.kk-widget-ai-agent-context-details-footer img {
  width: 43px;
}

.kk-live-chat-transcript {
  height: 310px;
  overflow-y: auto;
  width: 100%;
}

.kk-live-chat-transcript::-webkit-scrollbar {
  display: none;
}

.kk-widget-calling-started .kk-live-chat-transcript p {
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 10px;
}

.kk-live-chat-transcript-speaker {
  font-size: 15px;
  font-weight: 700;
}

.kk-widget-calling-started.kk-widget-calling-activated .kk-widget-calling-started-head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  z-index: 9;
}

.kk-widget-calling-started.kk-widget-calling-activated .kk-widget-calling-started-head p {
  font-size: 9px;
  font-weight: 400;
  padding-bottom: 0;
  padding: 10px;
}

.kk-widget-calling-started.kk-widget-calling-activated .kk-widget-calling-started-head .kk-mic-btn {
  margin-right: 8px;
  background: rgb(255 255 255 / 40%);
  color: #fff;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 20px;
}

.kk-widget-calling-started.kk-widget-calling-activated .kk-widget-calling-started-head .kk-mic-btn img {
  margin-right: 5px;
}

/* .kk-widget-calling-started.kk-widget-calling-activated .kk-widget-calling-started-head .kk-mic-btn img {
  background: rgb(0 0 0 / 40%);
  padding: 8px 11px;
  border-radius: 50%;
} */

.kk-widget-calling-started.kk-widget-calling-activated p.calling-text {
  display: none;
}

.kk-widget-calling-started p {
  margin: 0;
  font-size: 18px;
  color: #fff !important;
  font-weight: 700;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding-bottom: 30px;
  text-align: center !important;
}

.kk-widget-calling-started p.kk-form-bottom-text {
  font-weight: 300;
}

.kk-widget-calling-controls-wrapper {
  position: absolute;
  bottom: 0px;
  width: 100%;
  /* background-color: #163236;
  padding: 12px;
  border-radius: 0px 0px 20px 20px; */
}

.kk-agent-screen-info-wrapper {
  text-align: right;
  position: relative;
  max-width: 90px;
  margin: 0;
  padding-right: 20px;
  margin: 0 10px 10px auto;
}

.kk-agent-screen-info-wrapper > img,
.kk-agent-screen-info-wrapper > video {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  max-width: 106px;
  pointer-events: none;
  touch-action: none;
}

.kk-agent-mic-btn {
  position: absolute;
  right: 47%;
  bottom: 5px;
  background: rgb(0 0 0 / 39%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.kk-widget-calling-controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 5px;
  background-color: #163236;
  border-radius: 0px;
}

.kk-widget-calling-controls .kk-select-mic-options {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.kk-widget-calling-controls .kk-select-mic-options img {
  cursor: pointer;
  transition: all ease 0.4s;
  transform: scale(0.7);
}

.kk-widget-calling-controls .kk-select-mic-options:hover img {
  transform: scale(1);
}

.kk-control {
  width: 38px;
  height: 38px;
  border-radius: 20px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.kk-control.kk-screen-maximize-btn {
  width: 26px;
  height: 26px;
  background: rgb(255 255 255 / 40%);
}

.kk-control.kk-screen-maximize-btn img {
  max-width: 45%;
}

.kk-control.kk-volume-control-btn img {
  max-width: 45%;
}

.kk-control img {
  width: auto;
  cursor: pointer;
}

.kk-control .unactive-icon {
  display: none;
}

.kk-control.un-active .active-icon {
  display: none;
}

.kk-control.un-active .unactive-icon {
  display: block;
}

/*.kk-control.kk-volume-control-btn.un-active {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    margin-right: 7px;
    margin-left: 7px;
}*/

.kk-control.kk-end-call-control-btn {
  background: #c61c1c;
}

/* .kk-control.kk-end-call-control-btn:not(#kk-end-call-before-start) {
  margin-left: 35px;
  margin-right: 5px;
} */

.kk-volume-control-btn.un-active {
  background: rgba(255, 255, 255, 0.36);
}

.kk-control span.kk-chat-notice {
  background: #cb1a1a;
  line-height: 0px;
  border-radius: 50%;
  border: 1px solid #fff;
  position: absolute;
  top: -14px;
  right: -7px;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.kk-widget-calling-started::before {
  content: '';
  background-image: linear-gradient(to top, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 44%) 80%);
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0px;
  border-radius: 20px;
}

.kk-widget-no-answer-form-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateY(120%);
  transition: all ease 0.4s;
  display: flex;
  align-items: flex-end;
}

.kk-widget-no-answer-form {
  background: #000;
  text-align: right;
  width: 100%;
  margin: 0px;
  border-radius: 20px 20px 0px 0px;
  position: relative;
  overflow: hidden;
  height: 100%;
  z-index: 99;
}

.form-close-btn {
  padding: 10px;
  cursor: pointer;
  transition: all ease 0.4s;
  max-width: 40px;
  filter: invert(1) brightness(10);
  margin-top: 10px;
}

.form-close-btn:hover {
  transform: scale(1.2);
}

.kk-widget-no-answer-form-content {
  margin-top: 20px;
}

.kk-widget-calling-started .kk-form-head-title {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding-bottom: 0px;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  padding-top: 10px;
}

.kk-widget-calling-started .kk-form-head-sub-title {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 16px;
  padding: 5px 0 25px 0;
  text-align: center;
}

.form-item-wrapper {
  padding: 10px 20px;
  text-align: left;
}

.form-item-single {
  margin-bottom: 15px;
}

.form-item-single label {
  display: block;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 12px;
  color: #707070;
}

.form-item-single input {
  display: block;
  width: 318px;
  border: 2px solid #707070 !important;
  background: #707070 !important;
  color: #fff !important;
  padding: 10px;
  border-radius: 5px;
  outline: none !important;
  max-width: 100%;
}

.form-item-single input::-webkit-input-placeholder {
  color: #fff;
}

.form-item-single input::-moz-placeholder {
  color: #fff;
}

.form-item-single input:-ms-input-placeholder {
  color: #fff;
}

.form-item-single input:-moz-placeholder {
  color: #fff;
}

.form-item-single button.form-submit {
  border: none;
  background: #163236 !important;
  background-color: #163236 !important;
  display: block;
  width: 100%;
  padding: 15px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 16px;
  line-height: 14px;
  color: #fff !important;
  font-weight: 600;
}

.form-item-single button.form-submit img {
  transition: all ease 0.4s;
  margin-left: 5px;
  display: none;
}

.kk-form-bottom-text {
  font-size: 16px !important;
  text-align: center;
  padding-bottom: 0 !important;
  padding-top: 15px;
}

.form-item-single button.form-submit:hover img {
  transition: all ease 0.4s;
  transform: translate(5px, -5px);
}

.kk-widget-calling-end {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  max-height: calc(100% - 31px);
  transition: all ease 0.4s;
  transform: translateY(120%);
}

.kk-widget-calling-end-reject {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  transform: translateY(120%);
}

.kk-widget-calling-end-centent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #212121;
  height: 100%;
  border-radius: 20px 20px 0 0;
}

.kk-widget-calling-end-centent .kk-widget-calling-end-title {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  font-size: 25px;
  line-height: 30px;
  font-weight: 600;
  padding-bottom: 10px;
}

.kk-widget-calling-end-centent .kk-widget-calling-end-sub-title {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  font-size: 15px;
  line-height: 30px;
  font-weight: 400;
  padding-bottom: 40px;
  text-align: center !important;
}

.kk-widget-calling-end-centent .kk-widget-calling-duration {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  font-size: 12px;
  line-height: 30px;
  font-weight: 400;
  padding-bottom: 30px;
}

.kk-widget-calling-end-centent button.kk-recall {
  background: transparent !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  cursor: pointer;
  background: transparent !important;
  background-color: transparent !important;
}

.kk-widget-calling-end-centent button.kk-recall img {
  transition: all ease 0.4s;
}

.kk-widget-calling-end-centent button.kk-recall:hover img {
  transform: scale(1.1);
}

.kk-widget-calling-end-centent button.kk-recall img {
  padding: 23px;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 5px;
}

.kk-widget-calling-end-centent button.kk-back-to-home-btn {
  font-size: 12px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: 30px;
  margin-top: 30px;
  cursor: pointer;
  background-color: transparent !important;
}

.kk-widget-calling-chat {
  position: absolute;
  top: -1px;
  width: 100%;
  height: 100%;
  transition: all ease 0.4s;
  transform: translateY(120%);
  z-index: 99;
  max-width: 384px;
}

.kk-widget-calling-chat-centent {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100% - 30px);
  justify-content: space-between;
  border-radius: 15px 15px 0 0;
  padding: 15px 10px;
}

.kk-widget-calling-chat-head {
  display: flex;
  justify-content: space-between;
}

.kk-widget-calling-chat-head button.kk-minimize-chat {
  align-self: baseline;
  border: none;
  background: transparent !important;
  cursor: pointer;
  padding: 0 !important;
}

.kk-calling-screens-wrapper {
  display: flex;
  width: 140px;
  justify-content: space-between;
}

.kk-calling-screens-wrapper .kk-calling-screen-single {
  position: relative;
}

.kk-calling-screens-wrapper .kk-calling-screen-single video {
  width: 64px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  touch-action: none;
}

.kk-calling-screen-single img {
  background: rgb(0 0 0 / 40%);
  padding: 3px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
}

.kk-widget-chat-form-wrapper {
  border: 1px solid #d6d6d6;
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  padding: 2px 0px;
  margin-top: 10px;
  transition: all ease 0.4s;
  align-items: flex-end;
}

.kk-widget-chat-form-wrapper.kk-widget-chat-form-wrapper-hover {
  border: 1px solid #2f2f2f;
}

.kk-widget-chat-form-wrapper.kk-widget-chat-form-wrapper-active .send_message_during_call-btn svg {
  transition: all ease 0.4s;
}

.kk-widget-chat-form-wrapper.kk-widget-chat-form-wrapper-active .send_message_during_call-btn svg circle {
  fill: #2f2f2f;
}

.kk-widget-chat-form-wrapper textarea {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  height: 44px;
  border: none;
  outline: none !important;
  padding: 10px 5px 10px 15px;
  resize: none;
  width: 80%;
  color: #000;
  font-size: 14px;
  border-radius: 0px;
  background: transparent;
  max-height: 100px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  min-height: auto;
}

.kk-widget-chat-form-wrapper button {
  border: none;
  outline: none !important;
  background: transparent !important;
  cursor: pointer;
  transition: all ease 0.4s;
  padding: 2px 3px !important;
  line-height: 0px;
}

.kk-widget-chat-outer {
  height: 400px;
  overflow-y: auto;
  overflow-anchor: auto;
}

.kk-widget-chat-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 12px;
  height: auto;
}

.kk-widget-chat-receiver,
.kk-widget-chat-sender {
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

.kk-widget-chat-receiver img,
.kk-widget-chat-sender img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  margin-right: 5px;
  border-radius: 50%;
}

.kk-widget-chat-sender img {
  margin-right: 0px;
  margin-left: 5px;
  border-radius: 0%;
}

.kk-widget-message {
  background: #e5e5e5;
  padding: 8px 10px;
  color: #000;
  line-height: 18px;
}

.kk-widget-chat-receiver.kk-button-chat-bot .kk-widget-message {
  background: transparent;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  max-width: 98%;
}

.kk-welcome-bot-notes .kk-widget-message {
  margin-left: 32px;
}

.kk-widget-chat-receiver.kk-button-chat-bot > img {
  opacity: 0;
}

.kk-widget-chat-sender {
  flex-direction: row-reverse;
}

.kk-widget-chat-sender .kk-widget-message {
  background-color: #2ea2ff;
  color: #fff;
}

.kk-widget-chat-inner .chat-date {
  margin: 10px auto;
  text-align: center;
  font-size: 10px;
  color: #bebebe;
}

.kk-widget-no-answer-form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 0px;
  color: #000;
  text-align: center;
  transition: all ease 0.4s;
  transform: translateY(100%);
  position: absolute;
  background: #000000;
  bottom: 0;
  min-height: 380px;
}

.kk-widget-no-answer-form-submit img {
  margin-bottom: 25px;
}

.kk-widget-no-answer-form-submit p.form-sent-note {
  font-size: 18px;
  color: #2ea2ff;
  padding-bottom: 0;
}

.kk-widget-no-answer-form-submit p.form-sent-sub-note {
  font-size: 12px;
  color: #707070;
  font-weight: 400;
  padding: 10px 40px 10px 40px;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated {
  width: 100vw;
  margin: 0;
  height: 100vh;

  /*background-color: #2f2f2f;*/
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-main-screen-wrapper-inner {
  overflow: visible;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-main-screen-copyright {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated video {
  height: 100vh;
  border-radius: 0px;
  object-fit: cover;
  pointer-events: none;
  touch-action: none;
  z-index: -1;
  position: relative;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-chat video {
  width: 64px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  touch-action: none;
  z-index: -1;
  position: relative;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-started::before {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-agent-screen-info-wrapper > img,
.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-agent-screen-info-wrapper > video {
  width: 189px;
  height: 184px;
  border-radius: 50%;
  object-fit: cover;
  max-width: 189px;
  pointer-events: none;
  touch-action: none;
  z-index: -1;
  position: relative;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-agent-screen-info-wrapper {
  max-width: 189px;
  margin: 0 20px 200px auto;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-agent-mic-btn {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-started-head-large {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  margin-right: 20px;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-started-head-large p {
  padding-bottom: 0;
  font-size: 12px;
  color: #fff;
  font-weight: 400;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  margin-right: 10px;
}

.kk-head-larger-screen-btn-controls {
  display: flex;
  gap: 10px;
}

.kk-head-larger-screen-btn-controls img {
  width: auto;
}

.kk-head-larger-screen-btn-controls button:first-child {
  margin-right: 5px;
}

.kk-head-larger-screen-btn-controls button.kk-mic-btn {
  width: fit-content !important;
  color: #fff !important;
  font-size: 12px;
  padding: 0px 10px !important;
}

.kk-head-larger-screen-btn-controls button.kk-mic-btn img {
  margin-right: 8px;
}

.kk-head-larger-screen-btn-controls button.kk-active-small-screen-btn img {
  max-width: 50%;
}

.kk-head-larger-screen-btn-controls button {
  background: rgb(255 255 255 / 40%) !important;
  background-color: rgb(249 249 249 / 40%) !important;
  border: none;
  outline: none !important;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  cursor: pointer;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.kk-widget-main-screen-wrapper .kk-widget-calling-started-head-large {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-started-head {
  display: none;
}

.kk-widget-calling-started-large-copy-right {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-started-large-copy-right {
  display: block;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.kk-widget-calling-controls-large-screen.kk-widget-calling-controls {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated
  .kk-widget-calling-controls-large-screen.kk-widget-calling-controls {
  display: flex;
  background: #163236;
  border-radius: 20px;
  padding: 20px 20px;
  max-width: 750px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  width: 100%;
  right: 50%;
  transform: translateX(50%);
  transition: all ease 0.4s;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated
  .kk-widget-calling-controls-large-screen.kk-widget-calling-controls.kk-chat-activated {
  transform: translateX(75%);
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-controls {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-controls-wrapper {
  bottom: 0px;
  background-image: none;
  padding-bottom: 0px;
}

.kk-control.kk-call-duration-wrapper {
  min-width: 60%;
  background: transparent;
}

.kk-control.kk-call-duration-wrapper p {
  font-size: 15px;
  font-weight: 400;
  background: #000000;
  padding: 5px 20px;
  border-radius: 20px;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-chat {
  position: absolute;
  top: auto;
  max-width: 350px;
  max-height: 393px;
  bottom: 0px;
  left: 25px;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated .kk-widget-calling-chat-centent {
  height: auto;
}

/* 

Inter action screen Styles Start 

*/

.kk-widget-wrapper-agent-interaction::before {
  content: '';
  width: 211px;
  height: 163px;
  display: block;
  position: absolute;
  bottom: 20px;
  right: 50%;
  transform: translateX(50%);
  box-shadow: 0 0 20px 1px rgb(0 0 0 / 29%);
  background: transparent;
  border-radius: 0px 0px 20px 20px;
}

.kk-widget-agent-interaction-inner video {
  width: 212px;
  height: 334px;
  object-fit: cover;
  border-radius: 20px;
  pointer-events: none;
  touch-action: none;
  z-index: 2;
  position: relative;
}

.kk-widget-agent-interaction-inner video#brodacast-audio-interaction {
  z-index: -99;
}

.kk-widget-wrapper-agent-interaction {
  width: 260px;
  text-align: center;
  margin: 0 auto 20px auto;
}

.kk-widget-agent-interaction-inner {
  position: relative;
  max-width: 212px;
  margin: 0 auto;
  background-color: #000;
  border-radius: 20px;
  overflow: hidden;
}

.kk-widget-agent-interaction-inner::before {
  content: url('https://knock-knock-be-prod.azurewebsites.net/files/interaction-app-head-bg.png');
  position: absolute;
  top: 0;
  left: -4px;
  z-index: 99;
}

.kk-widget-agent-interaction-content {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  max-height: calc(100% - 24px);
  border-radius: 20px;
}

.kk-widget-agent-interaction-controls {
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 68%) 80%);
  position: relative;
  z-index: 99;
}

.kk-widget-agent-interaction-head {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  position: relative;
  z-index: 999;
}

.kk-widget-agent-interaction-head-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.kk-widget-agent-interaction-head-inner p {
  margin: 0 5px 0px 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  text-shadow: 0 3px 6px rgb(0 0 0 / 16%);
  text-align: left;
}

.kk-widget-agent-interaction-head-inner p span {
  display: block;
  font-size: 8px;
  font-weight: 400;
  color: #fff !important;
}

.kk-widget-agent-interaction-head img {
  cursor: pointer;
}

.kk-widget-agent-interaction-controls p.kk-widget-agent-interaction-title {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 18px;
  color: #fff;
  padding-bottom: 10px;
}

.kk-widget-agent-interaction-controls p.kk-widget-agent-interaction-sub-title {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 8px;
  color: #fff;
  padding-bottom: 5px;
}

.kk-widget-agent-interaction-btn {
  background: #5bda5a !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 12px;
  color: #fff;
  padding: 6px 20px;
  border: none;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px auto 15px auto;
  width: 128px;
  cursor: pointer;
}

.kk-widget-wrapper-agent-interaction-copyright {
  padding: 8px;
}

/* 

Inter action screen Styles End 

*/

/* 


Calling from Agent Screen Styles Start 



*/

.kk-display-none {
  display: none !important;
}

.kk-widget-calling-from-agent-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  max-height: 484px;
  transition: all ease 0.4s;
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 44%) 80%);
}

.kk-widget-calling-from-agent-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
}

.kk-widget-calling-from-agent-head img {
  width: auto;
  transition: all ease 0.4s;
  cursor: pointer;
}

.kk-widget-calling-from-agent-head img:first-child:hover {
  transform: rotate(18deg);
}

.kk-widget-calling-from-agent-content {
  padding-bottom: 50px;
}

.kk-widget-calling-from-agent-content p {
  font-size: 15px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  font-weight: 700;
  padding-bottom: 27px;
  max-width: 240px;
  margin: 0 auto;
  text-align: center !important;
}

.kk-widget-calling-from-agent-content p span {
  font-size: 15px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-weight: 700;
}

.kk-widget-calling-from-agent-controls {
  max-width: 181px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  transition: all ease 0.4s;
}

.kk-widget-calling-from-agent-controls.kk-accept-btn-display {
  justify-content: center;
}

.kk-widget-calling-from-agent-controls.kk-accept-btn-display {
  display: none;
}

.kk-widget-calling-from-agent-controls button {
  background: none;
  border: none;
  font-size: 12px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff !important;
  padding: 0;
  cursor: pointer;
  transition: all ease 0.4s;
  background-color: transparent !important;
  background: transparent !important;
}

.kk-widget-calling-from-agent-controls button .kk-widget-calling-from-agent-btns-image-wrapper {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.kk-widget-calling-from-agent-controls .kk-widget-calling-from-agent-accept-btn:hover {
  color: #5bda5a;
  cursor: pointer;
}

.kk-widget-calling-from-agent-controls
  button.kk-widget-calling-from-agent-decline-btn
  .kk-widget-calling-from-agent-btns-image-wrapper
  img {
  max-width: 32px;
  cursor: pointer;
}

.kk-widget-calling-from-agent-controls
  button.kk-widget-calling-from-agent-accept-btn
  .kk-widget-calling-from-agent-btns-image-wrapper
  img {
  transform: rotate(210deg);
}

.kk-widget-calling-from-agent-controls
  button.kk-widget-calling-from-agent-accept-btn
  .kk-widget-calling-from-agent-btns-image-wrapper {
  background-color: #5bda5a;
  cursor: pointer;
}

.kk-widget-calling-from-agent-controls
  button.kk-widget-calling-from-agent-decline-btn
  .kk-widget-calling-from-agent-btns-image-wrapper {
  background-color: #d7521a;
  cursor: pointer;
}

.kk-widget-calling-from-agent-controls
  button.kk-widget-calling-from-agent-accept-btn
  .kk-widget-calling-from-agent-btns-image-wrapper
  img {
  transition: all ease 0.4s;
  width: auto;
  cursor: pointer;
}

/* 


Calling from Agent Screen Styles End 



*/

/* 

Audio call Styles Start  

*/

.kk-audio-call-activated.kk-widget-main-screen-wrapper .kk-widget-main-screen-content-wrapper {
  display: none;
}

.kk-audio-call-activated.kk-widget-main-screen-wrapper .kk-widget-main-screen-wrapper-inner > video {
  display: none;
  pointer-events: none;
  touch-action: none;
  z-index: -1;
  position: relative;
}

.kk-audio-call-activated.kk-widget-main-screen-wrapper .kk-widget-main-screen-copyright {
  background-color: #535353;
}

.kk-widget-audio-call-wrapper-inner {
  height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  border-radius: 15px 15px 0 0;
  background-color: #2f2f2f;
  background-image: url('https://knock-knock-be-prod.azurewebsites.net/files/mic-bg.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.kk-widget-audio-call-head-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.kk-widget-audio-call-head-inner button {
  width: 44px;
  height: 44px;
  border-radius: 20px;
  background: rgb(0 0 0 / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: none;
  margin-right: 5px;
}

.kk-widget-audio-call-head p {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
}

.kk-widget-audio-call-head-inner p {
  display: none;
  margin: 0;
  font-size: 12px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #707070;
  padding-right: 10px;
}

.kk-widget-audio-call-head-title-wrapper {
  text-align: center;
  color: #fff;
  padding: 20px 0;
}

.kk-widget-audio-call-head-duration {
  display: none;
}

.kk-widget-audio-call-head-title-wrapper p {
  font-size: 12px;
  line-height: 15px;
}

.kk-widget-audio-call-head-title-wrapper p.kk-widget-audio-call-head-title {
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
}

.kk-widget-audio-call-wrapper .kk-control.kk-screen-maximize-btn {
  visibility: hidden;
}

.kk-widget-audio-call-connected .kk-widget-audio-call-head-sub-title {
  display: none;
}

.kk-widget-audio-call-connected .kk-widget-audio-call-head-duration,
.kk-widget-audio-call-connected .kk-widget-audio-call-head-inner p {
  display: block;
}

/* 

Audio call Styles End  

*/

/* responsive csss  */

.kk-widget-calling-chat-head-only-chat {
  display: none;
  justify-content: space-between;
}

.kk-widget-calling-chat-head-agent-info > img {
  width: 35px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
}

.kk-widget-calling-chat-head-agent-info {
  display: flex;
}

.kk-widget-calling-chat-head-name {
  display: flex;
  margin: 0px 10px;
  align-items: center;
}

.kk-widget-calling-chat-head-name p {
  margin-left: 10px !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  line-height: 14px !important;
  color: #000 !important;
  font-weight: 600 !important;
}

.kk-calling-controls-top {
  display: flex;
  align-items: center;
}

.minimze-icon-main-calling-screen {
  width: 29.38px;
  height: 27.88px;
  object-fit: contain;
  margin-right: 10px;
  cursor: pointer;
  display: none;
}

.kk-widget-calling-started.kk-widget-calling-activated .kk-widget-calling-started-head {
  padding: 10px;
}

.kk-call-duration-wraper {
  display: flex;
  align-items: center;
}

button.kk-end-call-control-btn {
  color: #fff !important;
  border: none !important;
  background: #d7521b !important;
  background-color: #d7521b !important;
  border-radius: 20px !important;
  font-size: 9px !important;
  line-height: 10px !important;
  padding: 6px 14px !important;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small {
  width: 186px;
  margin: 0 auto;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-widget-main-screen-wrapper-inner {
  height: 261px;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-widget-calling-controls {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-widget-calling-controls-wrapper {
  padding-bottom: 10px;
  padding-right: 0;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-agent-screen-info-wrapper {
  margin: 0 auto 0px auto;
  padding-right: 0px;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-widget-main-screen-copyright {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-widget-calling-controls-wrapper {
  bottom: 0px;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-call-duration-wraper p {
  position: absolute;
  top: 33%;
  width: 100%;
  text-align: center;
  left: 0px;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-widget-no-answer-form-wrapper {
  display: none !important;
}

.kk-call-duration-wraper .kk-end-call-control-btn {
  display: none;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-call-duration-wraper .kk-end-call-control-btn {
  display: block;
}

.kk-widget-main-screen-wrapper.kk-calling-screen-small .kk-widget-calling-end {
  display: none;
}

@media (max-width: 500px) {
  .kk-control.kk-screen-maximize-btn {
    display: none !important;
  }

  .kk-widget-chat-v2-main-wrapper .chat-screen-arrow-down {
    display: none !important;
  }

  .kk-chat-large-screen-icon-v2 {
    display: none !important;
  }

  /*.kk-widget-main-screen-wrapper {
    margin-right: 10px !important;
    margin-left: 10px;
    max-width: calc(100vw - 20px);
  }*/
  /*.kk-greetings-wrapper {
    margin: 0 auto 20px auto;
  }*/
  .kk-widget-main-screen-wrapper-inner {
    max-height: 75vh;
  }

  .kk-widget-chat-form-wrapper textarea {
    font-size: 16px;
  }

  .kk-widget-chat-outer {
    max-height: 43vh;
  }

  .kk-allow-permission-popup {
    display: none !important;
  }
}

.kk-permission-required {
  max-width: 265px;
  margin: 0px auto auto;
  background: rgb(47 47 47 / 71%);
  text-align: center;
  border-radius: 50px;
  padding: 50px 15px;
}

.kk-widget-calling-started p.kk-permission-required-note {
  font-size: 22px;
  padding-bottom: 0;
}

.kk-widget-calling-started p.kk-permission-required-note span {
  font-size: 12px;
  display: block;
  font-weight: 400;
}

.kk-full-screen-activated .kk-widget-no-answer-form {
  margin: 0px 15px 0px 15px;
  max-width: 360px;
}

.kk-allow-permission-popup {
  background-color: rgba(0, 0, 0, 0.67);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 9999999;
  display: none;
  left: 0;
}

.kk-allow-permission-popup-inner {
  position: relative;
  height: 100%;
}

.kk-allow-permission-popup-inner-content {
  position: absolute;
  top: 50%;
  left: calc(50% - 450px);
  transform: translateY(-50%);
  max-width: 100%;
}

.kk-allow-permission-popup-inner-content svg {
  max-width: 100%;
}

/* 


Agent Interaction Chat Styls Start 


*/
.kk-widget-agent-interaction-inner video {
  height: 350px;
}

.kk-widget-agent-interaction-chat {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  max-height: calc(100% - 24px);
  border-radius: 20px;
  transition: all ease 0.4s;
  transform: translateY(100%);
  z-index: 99;
}

.kk-interaction-with-active-chat {
  transform: translateY(-3%);
}

.kk-agent-interaction-close {
  position: absolute;
  right: 12px;
  top: 16px;
  z-index: 9999;
}

.kk-widget-agent-interaction-chat-inner {
  max-height: 224px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding: 5px;
}

.kk-widget-agent-interaction-chat-head {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #d6d6d6;
}

.kk-widget-agent-interaction-chat-head-title {
  color: #2f2f2f;
  font-size: 8px;
  display: flex;
  align-items: center;
  background: #def0ff;
  border: 1px solid #96d0ff;
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 10px;
  display: none;
}

.kk-widget-agent-interaction-chat-head-title img {
  margin-right: 6px;
}

.kk-widget-agent-interaction-chat-controls {
  display: flex;
}

.kk-widget-agent-interaction-chat-controls button {
  padding: 0 !important;
  border: none !important;
  width: 50% !important;
  height: 28px !important;
  font-size: 8px !important;
  font-weight: 700;
  color: #fff !important;
  border-radius: 5px !important;
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  margin-right: 5px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
}

.kk-widget-agent-interaction-chat-controls button img {
  max-width: 15px;
  max-height: 12px;
  height: 12px;
}

.kk-widget-agent-interaction-chat-controls button.kk-widget-agent-interaction-chat-control-audio-btn {
  margin-right: 0;
}

.kk-widget-agent-interaction-chat-controls button.kk-widget-agent-interaction-chat-control-video-btn {
  background: #2ea2ff !important;
  background-color: #2ea2ff !important;
}

.kk-widget-agent-interaction-chat-form-wrapper {
  border: 1px solid #eaeaea;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  padding: 7px;
  margin-top: 4px;
}

.kk-widget-agent-interaction-chat-form-wrapper textarea {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  height: 36px;
  border: none;
  outline: none !important;
  padding: 4px;
  resize: none;
  width: 80%;
  color: #000;
  font-size: 12px;
  min-height: auto;
}

@media (max-width: 500px) {
  .kk-widget-agent-interaction-chat-form-wrapper textarea {
    font-size: 16px;
  }
}

.kk-widget-agent-interaction-chat-form-wrapper button {
  align-self: center;
  padding: 5px 10px;
  border: none;
  outline: none !important;
  border-radius: 20px 20px 20px 0;
  background: #eaeaea !important;
  cursor: pointer;
  transition: all ease 0.4s;
  background-color: #eaeaea !important;
  line-height: 0px !important;
}

.kk-widget-agent-interaction-chat-form-wrapper button img {
  filter: hue-rotate(219deg) saturate(10%) brightness(34%) contrast(79%);
  max-width: 15px;
}

.kk-widget-agent-interaction-chat-wrapper-inner .kk-widget-message {
  border-radius: 20px;
  padding: 7px 11px;
  line-height: 14px;
  font-size: 11px;
  text-align: left;
}

.kk-widget-agent-interaction-chat-wrapper-inner .kk-widget-chat-receiver img {
  width: 25px;
  height: 24px;
  object-fit: contain;
  margin-right: 5px;
}

.kk-widget-agent-interaction-chat-wrapper-inner .kk-widget-chat-sender img {
  margin-right: 0px;
  margin-left: 5px;
}

.kk-widget-agent-interaction-chat-wrapper-outer {
  height: 80px;
  overflow-y: auto;
  overflow-anchor: auto;
}

.kk-widget-agent-interaction-chat-wrapper-outer::-webkit-scrollbar {
  width: 0.5em;
}

.kk-widget-agent-interaction-chat-wrapper-outer::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.288);
  border-radius: 10px;
}

.kk-widget-agent-interaction-chat-wrapper-outer::-webkit-scrollbar-thumb {
  background-color: #2b2a2a;
  outline: none;
  border-radius: 10px;
}

.kk-widget-agent-interaction-chat-wrapper-inner {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  min-height: 100%;
  height: auto;
}

.kk-widget-agent-interaction-chat-wrapper-inner .kk-widget-chat-receiver,
.kk-widget-agent-interaction-chat-wrapper-inner .kk-widget-chat-sender {
  display: block;
}

.kk-small-widget-message-wrapper {
  background: #fff;
  color: #2f2f2f;
  position: absolute;
  box-shadow: 0px 3px 25px rgb(0 0 0 / 23%);
  transform: translate(-60%, 30%);
  width: 210px;
  border-radius: 30px 30px 0px 30px;
  padding: 18px;
}

p.kk-small-widget-message {
  margin: 0 !important;
  font-size: 12px !important;
  color: #2f2f2f !important;
}

.kk-widget-agent-interaction-chat-inner .kk-widget-chat-sender img,
.kk-widget-agent-interaction-chat-inner .kk-widget-chat-receiver img {
  display: none !important;
}

.kk-widget-wrapper-agent-interaction-with-chat .kk-widget-agent-interaction-inner video {
  height: 200px;
}

.kk-widget-wrapper-agent-interaction-with-chat .kk-widget-wrapper-agent-interaction-copyright {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.kk-widget-wrapper-agent-interaction-with-chat .kk-widget-agent-interaction-inner {
  height: 400px;
}

/* 

Interaction Version 2 Styles Start

*/

.kk-widget-agent-interaction-inner-v2 {
  width: 345px;
  max-width: 100%;
  margin-right: 15px;
  margin-bottom: 5px;
  position: relative;
  z-index: 9999;
}

.kk-widget-interaction-controls-wrapper {
  display: flex;
  justify-content: center;
}

.kk-widget-interaction-controls-wrapper .kk-widget-interaction-control {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  max-width: 52px;
}

.kk-widget-interaction-controls-wrapper .kk-widget-interaction-control.kk-interaction-volume-control {
  max-width: 20px;
  justify-content: flex-start;
  margin-left: -8px;
  padding-right: 2px;
  padding-top: 3px;
}

.kk-widget-interaction-controls-wrapper .kk-widget-interaction-control .kk-widget-agent-interaction-content-v2-head {
  text-align: right;
}

.kk-widget-agent-interaction-content-v2-head img {
  padding: 5px;
  cursor: pointer;
  width: auto;
}

.kk-widget-agent-interaction-content-v2-head {
  text-align: end;
}

.kk-widget-agent-interaction-content-v2 {
  background: #163236;
  color: #fff;
  border-radius: 30px;
  display: flex;
  padding: 12px;
  flex-wrap: wrap;
}

.kk-widget-agent-interaction-content-v2-left {
  margin-right: 20px;
  width: 35%;
}

.kk-widget-agent-interaction-content-v2-right {
  width: 58%;
}

.kk-widget-agent-interaction-content-v2-loading {
  width: 91px;
  height: 91px;
  background: #000;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
}

.kk-widget-agent-interaction-content-v2-loading img {
  align-self: center;
}

.kk-widget-agent-interaction-content-v2-loading-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  text-align: center;
}

.kk-widget-agent-interaction-content-v2-loading-content p {
  margin: 0;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-weight: 400;
}

.kk-widget-agent-interaction-content-v2-loading-content p span {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  opacity: 0.6;
  font-size: 10px;
  font-weight: 400;
}

.kk-widget-agent-interaction-content-v2-title {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 10px;
  color: #fff !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kk-widget-agent-interaction-content-v2-title .kk-interaction-volume-control {
  background: #000000;
  padding: 5px;
  border-radius: 20px;
  max-width: 23px;
}

.kk-widget-agent-interaction-content-v2-title .kk-interaction-volume-control img {
  max-width: 100%;
}

.kk-widget-agent-interaction-content-v2-content-message {
  background: rgba(255, 255, 255, 0.21);
  color: #fff;
  padding: 8px;
  margin-top: 10px;
  border-radius: 10px 10px 10px 0px;
  max-width: 100%;
}

.kk-widget-agent-interaction-content-v2-content-message p {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 12px;
  line-height: 20px;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 40px;
}

.kk-widget-agent-interaction-content-v2-content-message button {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  border: none !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  background: #fff !important;
  background-color: #fff !important;
  margin-top: 10px !important;
  width: 57px !important;
  height: 24px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  color: #2f2f2f !important;
  padding: 0 !important;
}

.dots-wave {
  margin-top: 5px;
}

.dots-wave .calling-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-right: 2px;
  background: #fff;
  animation: wave 1.3s linear infinite;
}

.dots-wave .calling-dot:nth-child(2) {
  animation-delay: -1.1s;
}

.dots-wave .calling-dot:nth-child(3) {
  animation-delay: -0.9s;
}

@keyframes wave {
  0%,
  60%,
  100% {
    transform: initial;
  }

  30% {
    transform: translateY(-10px);
  }
}

.kk-interaction-connection-done .kk-widget-agent-interaction-content-v2-loading {
  display: none;
}

@keyframes quiet {
  25% {
    transform: scaleY(0.3);
  }

  50% {
    transform: scaleY(0.2);
  }

  75% {
    transform: scaleY(0.4);
  }
}

@keyframes normal {
  25% {
    transform: scaleY(0.5);
  }

  50% {
    transform: scaleY(0.2);
  }

  75% {
    transform: scaleY(0.2);
  }
}

@keyframes loud {
  25% {
    transform: scaleY(0.5);
  }

  50% {
    transform: scaleY(0.2);
  }

  75% {
    transform: scaleY(0.6);
  }
}

.waves-container {
  display: flex;
  justify-content: space-between;
  height: 40px;
  --boxSize: 1px;
  --gutter: 3px;
  width: calc((var(--boxSize) + var(--gutter)) * 5);
  max-width: 20px;
  margin: 0 auto;
}

.wave {
  transform: scaleY(0.2);
  height: 100%;
  width: var(--boxSize);
  background: #fff;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  border-radius: 8px;
}

.wave1 {
  animation-name: quiet;
}

.wave2 {
  animation-name: normal;
}

.wave3 {
  animation-name: quiet;
}

.wave4 {
  animation-name: loud;
}

.wave5 {
  animation-name: quiet;
}

.kk-widget-agent-interaction-content-v2-wrapper {
  text-align: center;
}

.kk-widget-agent-interaction-content-v2-wrapper video {
  width: 91px;
  max-width: 91px;
  height: 91px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: -40px;
  animation: scalevideo 1.3s linear infinite;
  border: 2px solid #ff2d2e;
}

@keyframes scalevideo {
  0%,
  60%,
  100% {
    transform: initial;
  }

  30% {
    transform: scale(1.2);
  }
}

.kk-interaction-connection-done .kk-widget-agent-interaction-content-v2-loading {
  display: none;
}

.kk-interaction-connection-done .kk-widget-agent-interaction-content-v2-wrapper {
  display: block;
}

.kk-widget-agent-interaction-content-v2-wrapper {
  display: none;
}

.kk-widget-chat-only .kk-widget-calling-chat-head {
  display: none;
}

.kk-widget-chat-only-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kk-widget-chat-only-head-content {
  display: flex;
  align-items: center;
}

.kk-widget-chat-only-head-content img {
  width: auto;
}

.kk-widget-chat-only-head-content video {
  width: 36px;
  height: 37px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.kk-widget-chat-only-head-content p {
  margin: 0;
  font-size: 14px;
  line-height: 0px;
  font-weight: 600;
  padding-left: 10px;
}

.kk-widget-chat-only-controls-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  border-bottom: 1px solid #d9d9d9;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.kk-widget-chat-only-controls {
  display: flex;
}

.kk-widget-chat-only-controls button {
  width: 65px;
  height: 62px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 15px !important;
  background-color: #2f2f2f !important;
  color: #fff !important;
  font-size: 9px !important;
  cursor: pointer;
  box-shadow: 0 3px 4px rgb(0 0 0 / 16%);
  position: relative;
}

.start-interaction-audio-call-btn {
  width: 65px;
  height: 62px;
  display: flex;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 15px !important;
  background-color: #2f2f2f !important;
  color: #fff !important;
  font-size: 9px !important;
  cursor: pointer;
  box-shadow: 0 3px 4px rgb(0 0 0 / 16%);
  position: relative;
}

.kk-widget-chat-only-controls button img {
  margin-bottom: 5px;
  max-width: 21px;
}

.kk-widget-chat-only-controls button.kk-audio-btn img {
  max-width: 11px;
  max-height: 17px;
}

.kk-widget-chat-only-controls button.kk-video-btn,
.start-interaction-audio-call-btn {
  margin-right: 10px !important;
  background-color: #2ea2ff !important;
}

.kk-widget-chat-outer {
  height: 225px;
}

.audio-call-time {
  display: none;
}

.kk-back-to-call-btn-from-chat {
  margin: 0 10px 0 0px;
  font-size: 12px !important;
  color: #fff !important;

  display: none;
  cursor: pointer;
  background: #5bda5a;
  padding: 3px 10px 3px 9px;
  border-radius: 13px;
}

.kk-back-to-call-btn-from-chat img {
  width: auto;
  margin-right: 5px;
  filter: invert(1);
}

.kk-audio-call-end-btn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  justify-content: center;
  align-items: center;
  background: rgb(0 0 0 / 56%);
  border-radius: 20px;
}

.kk-widget-chat-with-audio-call .kk-widget-chat-only-controls button:hover .kk-audio-call-end-btn {
  display: flex;
}

.kk-widget-chat-with-audio-call .kk-back-to-call-btn-from-chat {
  display: flex;
}

.kk-widget-chat-with-audio-call .kk-widget-chat-only-controls .kk-audio-btn span {
  display: none;
}

.kk-widget-chat-with-audio-call .kk-widget-chat-only-controls button span.audio-call-time {
  display: block;
}

.kk-video-call-duration {
  display: none;
  margin: 0;
  font-size: 12px;
  color: #2f2f2f;
  padding-right: 10px;
}

.kk-widget-chat-only-head-controls {
  display: flex;
  align-items: center;
}

.kk-widget-chat-only-head-controls img {
  cursor: pointer;
}

.kk-widget-chat-with-video-call .kk-back-to-call-btn-from-chat {
  display: flex;
}

.kk-widget-chat-with-video-call .kk-widget-chat-only-head-content video {
  display: none;
}

.kk-widget-chat-with-video-call .kk-widget-chat-only-controls,
.kk-calling-screens-with-chat {
  display: none;
}

.kk-widget-chat-with-video-call .kk-calling-screens-with-chat {
  display: flex;
}

.kk-calling-screens-with-chat video {
  width: 62px;
  height: 60px;
  position: relative;
  object-fit: cover;
  border-radius: 50%;
}

.kk-calling-screens-with-chat .kk-calling-screen-single-with-chat {
  position: relative;
}

.kk-calling-screens-with-chat .kk-calling-screen-single-with-chat.kk-remote-video-div {
  margin-left: 10px;
}

.kk-calling-screens-with-chat .kk-calling-screen-single-with-chat:first-child {
  margin-right: 10px;
}

.kk-calling-screen-single-mic-icon {
  width: 18px;
  height: 17px;
  background: rgb(0 0 0 / 40%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.kk-calling-screen-single-mic-icon img {
  width: auto;
  max-width: 40%;
}

.kk-widget-chat-only {
  transform: translateY(0%);
}

.kk-video-call-end-btn {
  display: none;
}

.kk-widget-chat-with-video-call .kk-video-call-end-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -3px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  transition: all ease 0.4s;
}

.kk-calling-screen-single-with-chat {
  overflow: hidden;
}

.kk-calling-screen-single-with-chat .kk-video-call-end-btn img {
  max-width: 60%;
}

.kk-calling-screen-single-with-chat:hover .kk-video-call-end-btn {
  opacity: 1;
}

.kk-full-screen-activated .kk-widget-chat-only-controls-wrapper {
  display: none !important;
}

.kk-full-screen-activated .kk-widget-chat-outer {
  height: 225px;
}

.kk-full-screen-activated .kk-widget-chat-wrapper {
  padding-top: 20px;
}

.kk-have-tooltip {
  position: relative;
}

.kk-have-tooltip:hover .kk-tooltip {
  visibility: visible;
}

.kk-tooltip {
  position: absolute;
  color: #fff;
  background: #2f2f2f;
  padding: 5px;
  top: -40px;
  border-radius: 5px;
  visibility: hidden;
  font-size: 14px;
  width: 70px;
  text-align: center;
  word-wrap: break-word;
}

.kk-widget-calling-started.kk-widget-calling-activated .kk-widget-calling-started-head .kk-mic-btn img.mic-muted {
  padding: 8px 8px;
  width: 32px;
}

.start-audio-call-from-interaction {
  cursor: pointer;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.kk-widget-agent-interaction-video-v2-wrapper {
  position: relative;
}

.kk-widget-agent-interaction-video-v2-wrapper img {
  position: absolute;
  right: 50%;
  bottom: 5px;
  transform: translate(50%, -100%);
  width: auto;
}

#visualizer {
  width: 60px;
  height: 15px;
  background: transparent;
}

.localVideo {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
}

.kk-greeting-text-after-load {
  display: none;
}

.kk-greetings-wrapper-content {
  width: 80%;
  margin-left: 62px;
  overflow: hidden;
}

.kk-greetings-wrapper-content span {
  width: 80px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 25px;
  transition: all ease 0.4s;
}

.kk-greetings-wrapper:hover .kk-greetings-wrapper-content span {
  width: 80px;
  margin-left: 10px;
}

.kk-greetings-wrapper .kk-greetings-wrapper-content span:first-child {
  width: auto;
  margin-left: 5px;
}

/* .kk-greeting-text-loaded{
  animation: left-to-right-fade-in 2s ease-in;
  -webkit-mask-repeat: no-repeat;
} */
.kk-greeting-text-after-load {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
}

.kk-greeting-text-loaded {
  animation: typing 2s steps(22);
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes left-to-right-fade-in {
  0% {
    -webkit-mask-size: 0%;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  }

  100% {
    -webkit-mask-size: 100%;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  }
}

.kk-call-started-from-agent .kk-widget-main-screen-wrapper .kk-widget-main-screen-wrapper-inner > video {
  width: 125px;
  height: 125px;
  min-width: 125px;
  min-height: 125px;
  border-radius: 50%;
  position: absolute;
  top: 45px;
  right: 50%;
  transform: translateX(50%);
  z-index: 99;
}

.kk-call-started-from-agent
  .kk-widget-main-screen-wrapper
  .kk-widget-main-screen-wrapper-inner
  > .kk_company_main_video_calling-for-audio-call {
  width: 125px;
  height: 125px;
  min-width: 125px;
  min-height: 125px;
  border-radius: 50%;
  position: absolute;
  top: 45px;
  right: 50%;
  transform: translateX(50%);
  z-index: 99;
}

.kk-call-started-from-agent .kk-widget-main-screen-wrapper-inner {
  height: 373px;
  overflow: hidden;
  background: #0a0a0a;
  border-radius: 20px 20px 0 0;
}

.kk-call-started-from-agent .kk-widget-main-screen-wrapper {
  max-width: 270px;
}

.kk-widget-calling-from-agent-content {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding-bottom: 18px;
  background: #000;
  margin-bottom: 30px;
  border-radius: 20px 20px 0 0;
  padding-top: 135px;
}

.kk-call-started-from-agent .kk-widget-calling-from-agent-head img:first-child {
  visibility: hidden !important;
  cursor: none;
}

.kk-call-started-from-agent .kk-widget-calling-from-agent-wrapper {
  background-image: none;
}

.kk-call-started-from-agent .kk-widget-calling-from-agent-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
}

.kk-widget-interaction-disconnected .kk-widget-interaction-controls-wrapper {
  display: none;
}

.kk-widget-interaction-disconnected .start-audio-call-from-interaction {
  display: flex;
}

.kk-widget-interaction-disconnected .start-audio-call-from-interaction img {
  width: auto;
}

.kk-widget-interaction-disconnected .kk-widget-agent-interaction-content-v2-content-message button {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
}

.kk-interaction-connection-done .kk-widget-agent-interaction-inner-v2 {
  width: 345px;
}

.kk-widget-interaction-disconnected .kk-widget-agent-interaction-inner-v2 {
  width: 345px;
}

.kk-widget-interaction-disconnected .kk-widget-agent-interaction-content-v2-wrapper video {
  animation: none;
}

.kk-greeting-live-tag {
  position: absolute;
  left: 27px;
  display: none;
  bottom: 5px;
  transition: all ease 0.4s;
  width: auto;
}

.kk-greetings-wrapper:hover .kk-greeting-live-tag {
  left: 30px;
}

.kk-widget-main-screen-content-live-tag {
  width: 40px;
  margin: 0 auto;
  display: none;
}

.kk-widget-calling-chat-centent-offline .kk-widget-chat-only-controls-wrapper {
  display: none !important;
}

.kk-widget-calling-chat-centent-offline .kk-widget-chat-outer {
  height: 300px;
}

.kk-controls-btn-wrapper-offline button.kk-video-btn,
.kk-controls-btn-wrapper-offline button.kk-audio-btn {
  display: none;
}

.kk-widget_chat_option {
  color: #2f2f2f !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #2f2f2f !important;
  margin: 4px 8px 4px 0px !important;
  border-radius: 8px !important;
  padding: 5px 25px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  text-align: left !important;
  display: block;
  float: left;
  transition: all ease 0.4s;
}

.kk-widget_chat_option:hover {
  color: #ffffff !important;
  background-color: #2f2f2f !important;
  background: #2f2f2f !important;
}

.kk-widget-chat-outer::-webkit-scrollbar {
  width: 5px;
}

.kk-widget-chat-outer::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.kk-widget-chat-outer::-webkit-scrollbar-thumb {
  background: #2f2f2f;
}

.kk-widget-chat-outer::-webkit-scrollbar-thumb:hover {
  background: #000;
}

.kk-widget-chat-inner {
  padding-right: 10px;
}

.kk-widget-message p {
  margin: 0 !important;
  word-wrap: break-word;
}

.kk-widget-message p a {
  word-wrap: break-word;
  text-decoration: underline !important;
  color: #0d6efd !important;
}

.kk-chat-message-loader {
  height: 10px;
  aspect-ratio: 2.5;
  --_g: no-repeat radial-gradient(farthest-side, #000 90%, #0000);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 20% 50%;
  animation: loadingdots 1s infinite linear;
}

@keyframes loadingdots {
  0% {
    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%, calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
  }

  16.67% {
    background-position: calc(0 * 100% / 3) 0, calc(1 * 100% / 3) 50%, calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
  }

  33.33% {
    background-position: calc(0 * 100% / 3) 100%, calc(1 * 100% / 3) 0, calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
  }

  50% {
    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 100%, calc(2 * 100% / 3) 0, calc(3 * 100% / 3) 50%;
  }

  66.67% {
    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%, calc(2 * 100% / 3) 100%, calc(3 * 100% / 3) 0;
  }

  83.33% {
    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%, calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 100%;
  }

  100% {
    background-position: calc(0 * 100% / 3) 50%, calc(1 * 100% / 3) 50%, calc(2 * 100% / 3) 50%, calc(3 * 100% / 3) 50%;
  }
}

.kk-call-transfer-loader {
  display: none;
}

.kk-widget-calling-transfer .kk-call-transfer-loader {
  display: block;
}

.kk-call-transfer-loader {
  width: fit-content;
  font-size: 18px;
  padding: 0 5px 8px 0;
  background: repeating-linear-gradient(90deg, currentColor 0 8%, transparent 0 10%) 200% 100%/200% 3px no-repeat;
  animation: callingloader 2s steps(6) infinite;
  color: #fff;
}

.kk-call-transfer-loader:before {
  content: 'Transferring...';
}

@keyframes callingloader {
  to {
    background-position: 80% 100%;
  }
}

.kk-widget-calling-started.kk-widget-calling-activated.kk-widget-calling-transfer p.calling-text {
  display: block;
  margin-top: 30px;
  margin-bottom: 0px;
  font-size: 13px;
  font-weight: 400;
}

.kk-widget-calling-started.kk-widget-calling-activated.kk-widget-calling-transfer p.calling-text span {
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}

.kk-widget-wrapper-feature-page {
  right: 0px;
  bottom: 50%;
  left: auto !important;
  transform: translateY(50%);
}

.kk-widget-wrapper-feature-page .kk-widget-main-screen-wrapper {
  margin: 0px 0px 0 auto;
  width: 229px;
}

.kk-widget-wrapper-feature-page .kk-widget-main-screen-copyright {
  border-radius: 0 0 0px 20px;
}

.kk-widget-wrapper-feature-page .agents-info {
  display: none !important;
}

.kk-widget-wrapper-feature-page .kk-widget-main-screen-content-head {
  visibility: hidden;
}

.kk-widget-wrapper-feature-page
  .kk-widget-main-screen:not(.kk-call-started-from-agent)
  .kk-widget-main-screen-wrapper
  .kk-widget-main-screen-wrapper-inner
  > video {
  border-radius: 20px 0px 0 0;
}

.kk-widget-wrapper-feature-page .kk-widget-main-screen-content-live-tag {
  display: none !important;
}

.kk-widget-wrapper-feature-page .kk-widget-main-screen-wrapper-inner {
  height: 373px;
}

.kk-widget-wrapper-feature-page .kk-controls-btn-wrapper button,
.kk-widget-wrapper-feature-page .kk-widget-chat-only-controls button {
  font-size: 6px !important;
  width: 44px !important;
  height: 42px !important;
  border-radius: 10px !important;
  padding: 0 !important;
  line-height: 5px;
}

.kk-widget-wrapper-feature-page .kk-controls-btn-wrapper .kk-video-btn,
.kk-widget-wrapper-feature-page .kk-video-btn {
  width: 14px;
  height: 8px;
  object-fit: cover;
}

.kk-widget-wrapper-feature-page .kk-video-btn svg {
  max-width: 14px;
}

.kk-widget-wrapper-feature-page .kk-controls-btn-wrapper button.kk-audio-btn svg {
  max-width: 7px;
  max-height: 11px;
}

.kk-widget-wrapper-feature-page .kk-controls-btn-wrapper button.kk-chat-btn svg {
  max-width: 9px;
  max-height: 9px;
}

.kk-widget-wrapper-feature-page
  .kk-widget-main-screen:not(.kk-call-started-from-agent)
  .kk-widget-main-screen-wrapper
  .kk-widget-main-screen-wrapper-inner
  > video {
  max-height: 195px;
  min-height: 195px;
}

.kk-widget-wrapper-feature-page .kk-widget-main-screen-content-wrapper {
  max-height: 193px;
}

.kk-fearured-widget-content-wrapper {
  display: none;
}

.kk-widget-wrapper-feature-page .kk-fearured-widget-content-wrapper {
  display: block;
}

.kk-widget-wrapper-feature-page .kk-fearured-widget-content-wrapper {
  background: #707070;
  height: 100%;
  max-height: 182px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 193px;
}

.kk-fearured-widget-agent-image {
  background: #2f2f2f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  width: 109px;
  height: 109px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
}

.kk-fearured-widget-agent-image img {
  position: absolute;
  bottom: 10px;
  width: auto;
}

.kk-widget-cross-icon-featured {
  filter: invert(1) brightness(0.5);
  padding: 0px !important;
  cursor: pointer;
  width: auto;
}

.kk-widget-cross-icon-featured-wrapper {
  max-width: 230px;
  margin: 0 0 0 auto;
  position: relative;
  min-height: 23px;
  display: none;
}

.kk-widget-wrapper-feature-page .kk-widget-chat-outer {
  height: 170px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-chat {
  height: calc(100% - 30px);
  transition: all ease 0.4s;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-chat-centent {
  border-radius: 15px 0px 0 0;
  height: 100%;
}

.kk-widget-wrapper-feature-page .kk-widget-chat-only-head-content p {
  font-size: 12px;
}

.kk-widget-wrapper-feature-page .kk-widget-chat-only-controls-wrapper {
  padding: 10px 0;
  width: 100%;
}

.kk-widget-wrapper-feature-page .kk-widget-chat-only-head-controls img {
  max-width: 80%;
}

.kk-widget-wrapper-feature-page .kk-widget-chat-only-controls button.kk-audio-btn img {
  max-width: 11px;
  max-height: 11px;
}

.kk-featured-page-calling .kk-fearured-widget-content-wrapper {
  display: none !important;
}

.kk-widget-wrapper-feature-page
  .kk-widget-main-screen:not(.kk-call-started-from-agent)
  .kk-widget-main-screen-wrapper.kk-featured-page-calling
  .kk-widget-main-screen-wrapper-inner
  > video {
  max-height: 100%;
  min-height: 100%;
}

.kk-widget-wrapper-feature-page .kk-featured-page-calling .kk-widget-main-screen-content-wrapper {
  max-height: 373px;
}

.kk-widget-wrapper-feature-page .kk-permission-required {
  max-width: 175px;
  padding: 40px 10px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-started p.kk-permission-required-note {
  font-size: 18px;
}

.kk-widget-wrapper-feature-page .kk-control {
  width: 33px;
  height: 33px;
}

.kk-widget-wrapper-feature-page .kk-control img {
  width: auto;
  max-width: 55%;
  cursor: pointer;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-started::before {
  border-radius: 20px 0 0 0;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-controls-wrapper {
  width: 100%;
  padding-right: 0px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-end-centent .kk-widget-calling-end-title {
  font-size: 22px;
  padding-bottom: 10px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-end-centent .kk-widget-calling-end-sub-title {
  font-size: 12px;
  padding-bottom: 10px;
  line-height: 18px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-end-centent .kk-widget-calling-duration {
  padding-bottom: 20px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-end-centent button.kk-recall img {
  max-width: 75px;
  padding: 21px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-end-centent {
  border-radius: 15px 0px 0 0;
}

.kk-call-started-from-agent .kk-widget-cross-icon-featured-wrapper {
  display: none !important;
}

.kk-widget-wrapper-feature-page
  .kk-widget-calling-started.kk-widget-calling-activated
  .kk-widget-calling-started-head
  p {
  padding: 20px 10px 20px 10px;
}

.kk-widget-wrapper-feature-page .kk-widget-call-screen-visible .kk-widget-cross-icon-featured-wrapper {
  display: none !important;
}

.kk-widget-wrapper-feature-page .kk-widget-no-answer-form {
  border-radius: 20px 0px 0 0;
}

.kk-widget-wrapper-feature-page .form-item-single input {
  padding: 5px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-started .kk-form-head-title {
  font-size: 14px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-started .kk-form-head-title {
  font-size: 14px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-started .kk-form-head-sub-title {
  font-size: 14px;
  padding: 5px 0 15px 0;
}

.kk-widget-wrapper-feature-page .form-item-single button.form-submit {
  padding: 12px;
}

.kk-widget-wrapper-feature-page .kk-widget-no-answer-form-content {
  margin-top: 12px;
}

.kk-widget-wrapper-feature-page .kk-form-bottom-text {
  font-size: 10px !important;
  padding-top: 0px;
}

.kk-widget-wrapper-feature-page .kk-widget-no-answer-form-submit img.company_logo {
  margin-bottom: 15px;
  width: 70px;
  height: 70px;
}

.kk-widget-wrapper-feature-page .kk-widget-no-answer-form-submit {
  padding: 10px 0px;
  min-height: 325px;
}

.kk-widget-wrapper-feature-page .kk-widget-no-answer-form-submit p.form-sent-sub-note {
  padding: 10px 10px 10px 10px;
}

.kk-widget-mini-mobile {
  z-index: 9999999999;
  position: fixed;
  top: 40%;
  max-width: 100px;
  text-align: center;
  right: 3%;
}

.kk-widget-mini-mobile-video-wrapper {
  position: relative;
}

.kk-widget-mini-mobile-video-wrapper-inner {
  width: 93px;
  height: 93px;
  border: 2px solid #ff2d2e;
  border-radius: 50%;
  overflow: hidden;
  padding: 3px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*animation: scalevideo 2s ease-out infinite;
  -webkit-animation: scalevideo 2s ease-out infinite;*/
}

.kk-widget-mini-mobile-video-wrapper video {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  /*border: 2px solid #FF2D2E;*/
  animation: scalevideo 1s ease-out infinite;
  -webkit-animation: scalevideo 1s ease-out infinite;
}

@keyframes scalevideo {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.1, 1.1);
  }

  100% {
    transform: scale(1, 1);
  }
}

.kk-widget-mini-mobile-video-wrapper img {
  position: absolute;
  bottom: 18px;
  right: 30%;
  animation: scalevideo 1s ease-out infinite;
  -webkit-animation: scalevideo 1s ease-out infinite;
  width: auto;
}

.kk-widget-mini-mobile button {
  background: #2ea2ff;
  background-color: #2ea2ff;
  font-size: 10px !important;
  color: #fff;
  border-radius: 10px !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  padding: 5px 10px !important;
  border: none !important;
  line-height: 16px;
}

.kk-widget-message ol li[data-list='bullet'] {
  list-style: disc !important;
}

/*.kk-widget-mini-mobile-video-wrapper:before,
.kk-widget-mini-mobile-video-wrapper:after {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #FF2D2E;
  border-radius: 50%;
}*/
/*.kk-widget-mini-mobile-video-wrapper:before {
  content: '';
  display: block;
  position: absolute;
  top: -3px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FF2D2E;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.kk-widget-mini-mobile-video-wrapper:before {
  animation: sonarWave 2s linear infinite;
}*/

/*.kk-widget-mini-mobile-video-wrapper:after {
  animation: ripples 2s linear 1s infinite;
}*/

/* ripple effect */
/*@keyframes ripples {
  0% { transform: scale(0.9); }
  50% { transform: scale(1); opacity:1; }
  100% { transform: scale(1.1); opacity:0; }
}*/
@keyframes sonarWave {
  from {
    opacity: 0.4;
  }

  to {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* widget css 2.0 */

.kk-widget-chat-v2-main-wrapper {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999999999999;
  overflow: hidden;
  padding: 20px 20px 5px 20px;
}

.kk-widget-main-screen-wrapper {
  width: 302px;
  max-width: 100%;
  position: relative;
  margin: 10px 20px 10px auto;
  box-shadow: 0 3px 13px 4px rgb(0 0 0 / 17%);
  background: transparent;
  border-radius: 20px;
}

.kk-widget-main-screen-wrapper-with-chat-v2.kk-widget-main-screen-wrapper {
  width: 100vw;
  height: 100vh;
  max-height: min(660px, calc(100vh - 100px));
  max-width: 400px;
  margin: 0;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: #ffffff;
  transition: all ease 0.4s;
}

.kk-widget-main-screen-wrapper-with-chat-v2.kk-widget-main-screen-wrapper.kk-widget-main-screen-extended-wrapper {
  max-width: 660px;
  max-height: min(90vh, calc(100vh - 80px));
}

.kk-widget-main-screen-wrapper-with-chat-v2.kk-widget-main-screen-wrapper::-webkit-scrollbar {
  display: none;
}

.kk-widget-chat-v2-wrapper {
  height: 100%;
}

.kk-widget-chat-v2-wrapper .kk-widget-chat-v2-wrapper-inner {
  height: calc(100% - 63px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* .kk-widget-chat-v2-wrapper .kk-widget-chat-v2-wrapper-inner.kk-widget-chat-v2-header-agent-connected-outer {
  height: 100%;
} */

/*.kk-widget-chat-v2-wrapper
  .kk-widget-chat-v2-wrapper-inner.kk-widget-chat-v2-header-agent-connected-outer.kk-widget-chat-v2-wrapper-inner-scrolled {
  height: calc(100% - 61px);
}*/

.kk-widget-chat-v2-header-controls .kk-chat-close-chat-icon-v2 {
  display: none;
}

.kk-widget-chat-v2-header {
  display: flex;
  padding: 15px 18px;
  justify-content: space-between;
  align-items: flex-start;
  /*min-height: 180px;*/
  box-shadow: 0px 3px 12px rgb(0 0 0 / 4%);
  transition: all ease 0.4s;
}

.kk-company-team-info,
.kk-widget-chat-v2-agents-note {
  display: none;
}

.kk-widget-chat-v2-header-chat-start .kk-company-team-info {
  display: flex;
  align-items: center;
}

.kk-widget-chat-v2-header-chat-start .kk-widget-chat-v2-agents-note {
  display: block;
  width: 100%;
  text-align: center;
}

.kk-widget-chat-v2-header-chat-start .kk-widget-chat-v2-agents-list {
  position: absolute;
  width: 100%;
  top: 60px;
  justify-content: center;
  right: 0;
}

.kk-widget-chat-v2-agents-main-note {
  margin: 15px 0 !important;
  font-size: 30px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  color: #8c4cd1 !important;
}

#send-btn * {
  display: flex;
  cursor: pointer;
}

.kk-widget-chat-v2-agents-main-note p {
  margin: 0 !important;
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #2f2f2f !important;
}

.kk-widget-chat-v2-agents-sub-note {
  display: block;
  font-size: 14px;
  line-height: 12px;
  font-weight: 400;
  color: #707070;
  margin-top: 7px;
}

.kk-company-team-back-icon {
  cursor: pointer;
}

.kk-company-team-info img {
  width: auto;
  margin-right: 10px;
  position: absolute;
  top: 22px;
}

.kk-company-team-info svg {
  width: auto;
  margin-right: 10px;
  position: absolute;
  top: 22px;
}

.kk-widget-chat-v2-header-chat-start .kk-company-logo-wrapper {
  display: none;
}

.kk-widget-chat-v2-header .kk-company-logo-wrapper {
  transition: all ease 0.4s;
}

.kk-widget-chat-v2-header .kk-company-logo-wrapper img {
  width: 121px;
  height: 41px;
  object-fit: contain;
}

.kk-widget-chat-v2-agents-list {
  display: flex;
  flex-wrap: wrap-reverse;
}

.kk-widget-chat-v2-agents-list .kk-widget-chat-v2-agent img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 50%;
}

.kk-widget-chat-v2-agents-list .kk-widget-chat-v2-agent {
  display: inline-block;
  z-index: 1;
}

.kk-widget-chat-v2-agents-list .kk-widget-chat-v2-agent:not(:first-of-type) {
  margin-left: -5px;
}

.kk-widget-chat-v2-agents-list .kk-widget-chat-v2-agent-thumb {
  margin: 0px auto;
  border-radius: 50%;
  vertical-align: middle;
  cursor: default;
  position: relative;
  width: 28px;
  height: 28px;
  line-height: 42px;
  font-size: 16px;
  text-transform: uppercase;
  border: 1px solid #fff;
  color: rgb(255, 255, 255);
  background-color: #919191;
  text-align: center;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  transition: all ease 0.4s;
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-widget-chat-v2-agents-list .kk-widget-chat-v2-agent-thumb {
  /* transform: scale(0.85); */
  margin-top: 4px;
}

.kk-widget-chat-v2-agent-thumb .member-short-name p {
  width: 26px;
  height: 26px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kk-widget-chat-v2-content-intro {
  height: 100%;
  padding: 15px 38px;
  margin-bottom: 30px;
  transition: all ease 0.4s;
  overflow: auto;
}

.kk-widget-chat-v2-content-intro .kk-widget-chat-v2-content-heading {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  color: #838383 !important;
}

.kk-widget-chat-v2-content-intro .kk-widget-chat-v2-content-sub-heading {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  color: #2f2f2f !important;
}

.kk-widget-chat-v2-copyright {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2f2f2f;
  font-size: 10px;
  line-height: 10px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #838383;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
}

.kk-widget-chat-v2-copyright span {
  font-size: 10px;
  font-weight: 400;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #838383;
}

.kk-widget-chat-v2-control-btn {
  background: #fff;
  border: 1px solid #a5a5a5;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
  align-items: center;
  margin-bottom: 15px;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
  cursor: pointer;
  transition: all ease 0.4s;
}

.kk-widget-chat-v2-control-btn:hover {
  color: var(--kk-widget-color);
  border: 1px solid transparent;
}

.kk-widget-chat-v2-control-btn svg {
  transition: all ease 0.4s;
}

.kk-widget-chat-v2-control-btn * {
  cursor: pointer;
}

.kk-widget-chat-v2-control-btn:hover svg {
  transform: rotate(-45deg);
}

.kk-widget-chat-v2-control-btn-text {
  font-size: 14px;
  line-height: 14px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-weight: 400;
  color: #000000;
  transition: all ease 0.4s;
  cursor: pointer;
}

.kk-widget-chat-v2-content-controls-top {
  padding: 20px 0px 50px 0px;
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 15px;
}

.kk-widget-chat-v2-control-btn:hover .kk-widget-chat-v2-control-btn-text {
  color: var(--kk-widget-color);
}

.kk-widget-chat-v2-content-wrapper {
  height: 100%;
}

.kk-widget-chat-v2-content {
  height: 100%;
}

.kk-widget-chat-v2-wrapper-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  transition: all ease 0.4s;
  position: relative;
  padding: 0px 5px 5px 5px;
}

/*.kk-widget-chat-v2-wrapper-main.kk-widget-chat-v2-wrapper-main-agent-connected {
  height: calc(100% - 0px);
}*/
.kk-widget-chat-v2-wrapper-main-agent-connected .kk-widget-chat-v2-form-controls-top-wrapper {
  display: none;
}

.kk-widget-chat-v2-wrapper-main-agent-connected .kk-widget-chat-v2-form-controls-top-wrapper svg * {
  cursor: pointer;
}

.kk-widget-chat-v2-form-controls-top-wrapper {
  padding: 15px 0px;
  display: none;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 12px;
  font-weight: 400;
  color: #2f2f2f;
}

.kk-widget-chat-v2-form-control-top-single {
  margin-left: 10px;
  border-radius: 15px;
  border: 1px solid #d6d6d6;
  width: 50px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all ease 0.4s;
}

.kk-widget-chat-v2-form-control-top-single:hover {
  box-shadow: 0px 3px 14px rgb(0 0 0 / 15%);
  background-color: #fff;
  border: 1px solid transparent;
}

.kk-widget-chat-v2-form-control-top-single svg,
.kk-widget-chat-v2-form-control-top-single svg rect,
.kk-widget-chat-v2-form-control-top-single svg path {
  fill: #2f2f2f !important;
}

.kk-widget-chat-v2-form-wrapper-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border: 1px solid #d6d6d6;
  border-radius: 24px;
  padding: 5px;
  margin: 5px;
  transition: all ease 0.4s;
}

.kk-widget-chat-v2-form-wrapper-inner.kk-widget-chat-v2-form-wrapper-inner-hover {
  border: 1px solid #2f2f2f;
}

.kk-widget-chat-v2-form-wrapper-inner .kk-widget-chat-v2-form-wrapper-controls-wrapper-active svg circle,
.kk-widget-chat-v2-form-wrapper-inner .kk-widget-chat-v2-form-wrapper-controls-wrapper-active svg {
  transition: all ease 0.4s;
}

.kk-widget-chat-v2-form-wrapper-inner.kk-widget-chat-v2-form-wrapper-inner-active
  .kk-widget-chat-v2-form-wrapper-controls-wrapper-active
  #send-btn
  svg
  circle {
  fill: #2f2f2f;
}

.show-emojis-list circle,
.show-emojis-list path {
  transition: all ease 0.4s;
}

.show-emojis-list.kk-emoji-svg-active circle {
  fill: #2f2f2f;
}

.show-emojis-list.kk-emoji-svg-active path {
  fill: #fff;
}

.show-emojis-list.kk-emoji-svg-active circle,
.show-emojis-list.kk-emoji-svg-active path {
  stroke-width: 0.3px;
  stroke: #2f2f2f;
}

.kk-widget-chat-v2-form-wrapper svg {
  cursor: pointer;
}

.kk-widget-chat-v2-form-wrapper-textarea {
  border: none !important;
  font-size: 16px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #000000 !important;
  padding: 10px 15px 10px 15px !important;
  height: 100%;
  background: transparent !important;
  resize: none;
  outline: none !important;
  box-shadow: none;
  width: 85%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  max-height: 40px;
  min-height: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 20px;
  margin-bottom: 0;
}

.kk-widget-chat-v2-form-wrapper-textarea::placeholder {
  color: #d6d6d6;
}

.kk-widget-chat-v2-form-wrapper-textarea::-webkit-scrollbar {
  display: none;
}

.kk-widget-chat-v2-form-wrapper-controls-wrapper {
  width: 17%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 5px;
  max-height: 40px;
}

.kk-widget-chat-v2-form-wrapper-controls-wrapper-active {
  width: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  max-height: 40px;
  max-width: 70px;
}

.kk-widget-chat-v2-outer {
  /*height: 100%;*/
  overflow-y: auto;
  overflow-anchor: auto;
  padding: 10px;
  height: calc(100vh - 280px);
}

.kk-widget-chat-option-talk-to-human .kk-widget-chat-v2-outer {
  height: calc(100vh - 444px);
}

.kk-widget-chat-v2-wrapper-inner-scrolled.kk-widget-chat-option-talk-to-human .kk-widget-chat-v2-outer {
  height: calc(100vh - 450px);
}

.kk-widget-chat-v2-outer::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.kk-widget-chat-v2-outer::-webkit-scrollbar-thumb,
.kk-widget-chat-v2-outer::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 6px;
}

.kk-widget-chat-v2-outer::-webkit-scrollbar-thumb {
  background: rgba(74, 89, 106, 0.05);
}

.kk-widget-chat-v2-outer:hover::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 1);
}

.kk-widget-chat-v2-outer:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.906);
}

.kk-widget-chat-v2-outer:hover::-webkit-scrollbar-track {
  background: rgba(83, 100, 119, 0.132);
}

.kk-widget-v2-chat-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 12px;
}

.kk-widget-chat-receiver,
.kk-widget-chat-sender {
  display: flex;
  align-items: flex-end;
  margin-top: 1px;
  margin-bottom: 1px;
  position: relative;
}

.kk-widget-chat-receiver.kk-widget-chat-receiver-last {
  margin-bottom: 20px;
}

.kk-widget-chat-receiver span {
  display: block;
  font-size: 10px;
  line-height: 14px;
  position: absolute;
  background: #d6d6d6;
  font-weight: 300;
  color: #000;
  padding: 3px 8px;
  border-radius: 5px;
  top: -10px;
  bottom: auto;
  z-index: 99;
  right: -55px;
  opacity: 0;
}

.kk-widget-chat-sender span {
  display: block;
  font-size: 10px;
  line-height: 14px;
  position: absolute;
  background: #d6d6d6;
  font-weight: 300;
  color: #000;
  padding: 3px 8px;
  border-radius: 5px;
  top: -6px;
  z-index: 99;
  left: -34px;
  opacity: 0;
}

.kk-widget-chat-sender span.message-status {
  display: block;
  font-size: 10px;
  line-height: 14px;
  position: absolute;
  background: transparent;
  font-weight: 300;
  color: rgb (115 115 118);
  padding: 1px 6px;
  border-radius: 5px;
  top: auto !important;
  bottom: -17px;
  z-index: 99;
  opacity: 1;
  right: 0px;
  text-align: end;
}

.kk-widget-chat-sender .kk-widget-emoji-only span {
  top: -6px;
}

.kk-widget-chat-sender:hover span {
  opacity: 1;
}

.kk-widget-chat-receiver:hover span {
  opacity: 1;
}

.kk-widget-chat-inner .kk-widget-chat-receiver span {
  right: -35px;
}

.kk-widget-chat-receiver.kk-widget-chat-receiver-last span {
  display: block;
  font-size: 10px;
  position: absolute;
  color: #2f2f2f;
  left: -12px;
  opacity: 1;
  background: transparent;
  bottom: -26px;
  top: auto;
  padding: 0;
}

.kk-widget-chat-receiver.kk-widget-chat-receiver-agent-connected .kk-widget-message svg {
  display: none;
}

.kk-widget-chat-receiver.kk-widget-chat-receiver-agent-connected .kk-widget-message {
  background-color: transparent;
  padding: 0px 0px;
  font-size: 12px;
}

.kk-widget-chat-receiver img,
.kk-widget-chat-sender img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  margin-right: 5px;
  border-radius: 50%;
}

.kk-widget-chat-receiver.kk-chat-bot-message img {
  /*filter: invert(1);*/
  width: 24px;
  height: 24px;
  border-radius: 20px;
}

.kk-widget-message p img {
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 0px;
  padding: 5px 0px;
}

.kk-widget-message ol,
.kk-widget-message ul {
  margin: 0 0px 0px 15px !important;
  padding: 0 !important;
}

.kk-widget-message ol li,
.kk-widget-message ul li {
  padding: 0px 0px 0px 5px !important;
}

.kk-widget-message {
  background: #e5e5e5;
  padding: 12px 20px;
  color: #2f2f2f;
  line-height: 20px;
  font-size: 14px;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  min-width: 50px;
  max-width: 100%;
  position: relative;
  font-weight: 200;
}

.kk-widget-chat-sender .kk-widget-message {
  background-color: #163236 !important;
  color: #fff;
  margin-right: 0px;
  word-wrap: break-word;
  max-width: 90%;
  border-radius: 10px 2px 2px 10px;
  transition: all ease 0.4s;
}

.kk-widget-chat-receiver .kk-widget-message {
  margin-left: 0px;
  border-radius: 10px;
  background: #ebebeb;
  word-wrap: break-word;
  font-weight: 300;
  color: #000;
  max-width: 84%;
  padding: 9px 15px;
  min-width: auto;
}

.kk-widget-chat-receiver .kk-widget-message svg {
  height: 21px;
  width: 21px;
  vertical-align: middle;
  fill: #e5e5e5;
  position: absolute;
  left: -17px;
  top: 0;
}

.kk-widget-chat-sender .kk-widget-message svg {
  transform: scaleX(-1);
  height: 21px;
  width: 21px;
  vertical-align: middle;
  fill: rgb(140 76 209);
  position: absolute;
  right: -17px;
  top: 0;
}

.kk-widget-chat-sender {
  flex-direction: row-reverse;
}

.kk-widget-chat-sender img {
  margin-right: 0px;
  margin-left: 5px;
}

.kk-widget-chat-v2-header-agent-connected .kk-widget-chat-v2-agents-main-note,
.kk-widget-chat-v2-header-agent-connected .kk-widget-chat-v2-agents-list .kk-widget-chat-v2-agent:not(:first-of-type) {
  display: none;
}

.kk-widget-chat-v2-header-agent-connected .kk-widget-chat-v2-agents-list .kk-widget-chat-v2-agent-thumb::after {
  content: '';
  background-color: #109f16;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

.kk-widget-chat-v2-header-agent-connected .kk-widget-chat-v2-agent {
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.kk-widget-chat-v2-agent-name {
  display: none;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  margin-left: 10px;
  color: #000;
  max-width: 190px;
  overflow: hidden;
}

.kk-widget-chat-v2-header-agent-connected .kk-widget-chat-v2-agent-name {
  display: block;
}

.kk-widget-chat-v2-wrapper-inner-scrolled
  .kk-widget-chat-v2-header.kk-widget-chat-v2-header-chat-start
  .kk-widget-chat-v2-agents-list {
  top: 12px;
  justify-content: flex-start;
  left: 35px;
  width: 200px;
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-widget-chat-v2-header-controls {
  position: absolute;
  top: 15px;
  right: 18px;
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-company-team-name {
  display: none;
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-widget-chat-v2-header {
  min-height: 30px;
  align-items: center;
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-widget-chat-v2-outer {
  height: calc(100vh - 268px);
}

.kk-widget-chat-v2-header-controls-calling {
  display: none;
}

.kk-widget-chat-v2-header-controls-calling svg rect,
.kk-widget-chat-v2-header-controls-calling svg path,
.kk-widget-chat-v2-header-controls-calling svg g g path {
  fill: #000;
}

.kk-widget-chat-v2-header-controls-calling svg * {
  align-self: center;
  cursor: pointer;
}

.kk-widget-chat-v2-wrapper-inner-scrolled.kk-widget-chat-v4-header-agent-connected-new-design
  .kk-widget-chat-v2-header-controls-calling {
  display: flex;
  justify-content: space-between;
  width: 55px;
  align-items: center;
  margin-right: 20px;
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-chat-minimize-icon-v2 {
  display: none;
}

.kk-chat-minimize-icon-v2 {
  cursor: pointer;
  padding: 10px 5px;
  margin-left: 5px;
}

.kk-widget-chat-v2-header-controls {
  display: flex;
}

.kk-chat-large-screen-icon-v2 {
  cursor: pointer;
  padding: 5px;
  transition: all ease 0.4s;
  border-radius: 5px;
}

.kk-chat-large-screen-icon-v2:hover,
.kk-chat-back-to-default-icon-v2:hover {
  background: #efefef;
}

.kk-chat-back-to-default-icon-v2 {
  cursor: pointer;
  padding: 5px;
  display: none;
  border-radius: 5px;
  transition: all ease 0.4s;
}

.kk-widget-main-screen-extended-wrapper .kk-chat-back-to-default-icon-v2 {
  display: inline-block;
}

.kk-widget-main-screen-extended-wrapper .kk-chat-large-screen-icon-v2 {
  display: none;
}

@media (max-width: 500px) {
  /*.kk-widget-chat-v2-wrapper-main {
    height: calc(100vh - 90px);
  }*/

  .kk-widget-chat-v2-outer {
    height: calc(100dvh - 170px) !important;
  }

  .kk-widget-chat-option-talk-to-human .kk-widget-chat-v2-outer {
    height: calc(100dvh - 330px) !important;
  }

  .kk-widget-chat-v2-main-wrapper {
    padding: 0;
  }

  .kk-widget-main-screen-wrapper-with-chat-v2.kk-widget-main-screen-wrapper {
    max-width: 100%;
    box-shadow: none;
    border-radius: 0;
    max-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
  }

  .kk-widget-chat-v2-wrapper-main-agent-connected .kk-widget-chat-v2-outer {
    height: calc(100dvh - 125px) !important;
  }

  /*.kk-widget-chat-v2-wrapper-inner-scrolled .kk-widget-chat-v2-wrapper-main-agent-connected  .kk-widget-chat-v2-outer {
      height: calc(100vh - 280px) !important;
  }*/
  .kk-widget-chat-v2-wrapper .kk-widget-chat-v2-wrapper-inner.kk-widget-chat-v2-header-agent-connected-outer {
    height: calc(100% - 0px);
  }

  .kk-widget-chat-v2-wrapper
    .kk-widget-chat-v2-wrapper-inner.kk-widget-chat-v2-header-agent-connected-outer.kk-widget-chat-v2-wrapper-inner-scrolled {
    height: calc(100% - 0px);
  }
}

.kk-widget-chat-v2-agents-offline {
  display: none;
  text-align: center;
}

/*.kk-widget-chat-v2-agents-list.kk-widget-chat-v2-agents-list-offline .kk-widget-chat-v2-agent {
  display: none;
}*/
/*.kk-widget-chat-v2-agents-list.kk-widget-chat-v2-agents-list-offline .kk-widget-chat-v2-agents-offline  {
  display: block;
}*/
.kk-widget-chat-v2-content-controls-top.kk-widget-chat-v2-content-controls-top-offline {
  border-bottom: 0px;
}

.kk-widget-chat-v2-header.kk-widget-chat-v2-header-chat-start.kk-widget-chat-v2-header-agent-connected {
  min-height: 60px;
}

.kk-widget-chat-v2-wrapper-inner-scrolled
  .kk-widget-chat-v2-header.kk-widget-chat-v2-header-chat-start.kk-widget-chat-v2-header-agent-connected {
  min-height: 60px;
}

.kk-widget-chat-v2-wrapper-main-agent-connected .kk-widget-chat-v2-outer {
  height: calc(100vh - 226px);
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-widget-chat-v2-wrapper-main-agent-connected .kk-widget-chat-v2-outer {
  height: calc(100vh - 230px);
}

.kk-scroll-down-to-bottom {
  width: 35px;
  height: 35px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 24px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 27px 0px;
  transition: all 150ms ease 0s;
  color: var(--kk-widget-color) !important;
  background-color: rgb(255, 255, 255) !important;
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  margin: 20px auto;
  opacity: 0;
  display: none;
  cursor: pointer;
}

.kk-scroll-down-to-bottom svg * {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.kk-scroll-down-to-bottom:hover {
  transform: scale(1.1);
}

.kk-widget-chat-v2-header-agent-connected-outer .kk-scroll-down-to-bottom {
  bottom: 60px;
}

.kk-widget-calling-started p.calling-text {
  font-size: 25px;
  font-weight: 400;
  padding-bottom: 0;
  transition: all ease 0.4s;
}

.kk-widget-calling-started span.call_duration,
.kk-widget-calling-end span.call_duration {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 9px;
  font-weight: 400;
}

.kk-full-screen-activated span.call_duration {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 15px;
  font-weight: 400;
}

.kk-widget-calling-connection-text-wrapper {
  width: 100%;
  text-align: center;
  padding-bottom: 30px;
  transition: all ease 0.4s;
}

.kk-widget-calling-connection-text-wrapper p {
  font-size: 25px;
  font-weight: 400;
  padding-bottom: 0;
  word-wrap: break-word;
  line-height: 32px;
}

.kk-widget-calling-connection-text-wrapper .dots-wave .calling-dot {
  width: 5px;
  height: 5px;
}

.kk-widget-calling-connection-text-wrapper .kk-widget-calling-connection-text-company {
  font-weight: 700;
}

.kk-widget-calling-connection-agent-info-wrapper {
  transition: all ease 0.4s;
  padding-bottom: 120px;
  max-width: 275px;
  margin: 0 auto;
  text-align: center;
}

.kk-widget-calling-connection-agent-thumb {
  width: 34px !important;
  height: 33px !important;
  margin: 0 auto 15px auto;
  position: relative !important;
}

.kk-widget-calling-connection-agent-thumb img {
  width: 34px !important;
  height: 33px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.kk-widget-calling-connection-agent-thumb::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background-color: #5bda5a;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  right: 3px;
}

.kk-widget-calling-started p.kk-widget-calling-connection-agent-title {
  font-size: 25px;
  line-height: 35px;
  padding-bottom: 20px;
}

.kk-widget-calling-started p.kk-widget-calling-connection-agent-disconnect-text {
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 15px;
  line-height: 18px;
}

.kk-widget-calling-connection-agent-disconnect-input {
  width: 100% !important;
  max-width: 208px !important;
  color: #2f2f2f !important;
  border: none !important;
  padding: 16px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 13px !important;
  background: #fff !important;
  background-color: #fff !important;
}

input.kk-widget-calling-connection-agent-disconnect-input:focus {
  background-color: #fff !important;
}

.kk-widget-calling-connection-agent-disconnect-btn {
  font-size: 14px;
  color: #2f2f2f;
  font-weight: 700;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  background: #fde8f5;
  max-width: 128px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 7px 10px;
  cursor: pointer;
  transition: all ease 0.4s;
}

.kk-widget-calling-connection-agent-disconnect-btn:hover {
  background: rgba(253, 232, 245, 0.8);
}

.kk-widget-calling-controls-during-calling-wrapper {
  display: flex;
  width: 80%;
  align-items: center;
  position: absolute;
  bottom: 40px;
}

.kk-widget-call-animation {
  background: #ffffff;
  width: 57px;
  height: 55px;
  position: relative;
  margin: 0 auto;
  border-radius: 100px;
  border: solid 5px #ffffff;
  animation: kkCalling 2s ease infinite;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.kk-widget-call-animation video {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  min-height: 100%;
  min-width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@keyframes kkCalling {
  0% {
    transform: scale(1);
  }

  15% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
  }

  25% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 0 0 20px rgba(255, 255, 255, 0.2);
  }

  25% {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(255, 255, 255, 0.2);
  }
}

.kk-widget-calling-started.kk-widget-calling-connection-agent-info-wrapper-active {
  background-image: linear-gradient(to top, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 54%) 100%);
  border-radius: 20px;
}

.kk-widget-message.kk-widget-emoji-only svg {
  display: none !important;
}

.kk-widget-message.kk-widget-emoji-only {
  background: transparent !important;
  padding: 5px 0 15px 0 !important;
  font-size: 62px !important;
  line-height: 62px !important;
}

.kk-widget-chat-sender .kk-widget-message.kk-widget-emoji-only {
  text-align: right !important;
  border-radius: 0px !important;
}

.kk-widget-chat-sender .kk-widget-message.kk-widget-emoji-only img {
  border-radius: 0px !important;
}

.kk-widget-chat-receiver .kk-widget-message.kk-widget-emoji-only {
  border-radius: 0px !important;
}

.kk-widget-chat-receiver .kk-widget-message.kk-widget-emoji-only img {
  border-radius: 0px !important;
}

.kk-d-none {
  display: none !important;
}

.kk-show-options.kk-control {
  width: 10px;
  margin-left: -7px;
  background-color: transparent;
}

.kk-audio-settings-wrapper {
  background: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  max-width: 97%;
  margin: 0 auto 5px auto;
  position: absolute;
  bottom: 62px;
  width: 100%;
  left: 0;
  right: 0;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  z-index: 6;
}

.kk-widget-calling-started p.kk-audio-settings-title {
  margin: 0;
  font-size: 16px;
  color: #163236 !important;
  font-weight: 600;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding-bottom: 20px;
  padding-top: 20px;
  text-align: start !important;
}

.kk-audio-settings-label,
.kk-audio-settings-title {
  margin: 0;
  font-size: 12px;
  color: #163236;
  font-weight: 600;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding-bottom: 8px;
  display: block;
}

.kk-audio-settings-select {
  font-size: 12px;
  color: #fff;
  font-weight: 400;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  background: #2f2f2f;
  border: none;
  padding: 8px;
  margin-bottom: 10px;
  outline: none !important;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  width: 100%;
}

.kk-separator {
  background: #505050;
  height: 1px;
  margin: 15px 0px;
}

.kk-audio-volume-slider {
  display: block;
  width: 100%;
  height: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-color: #3fe9e1;
  border-radius: 5px;
  outline: none;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 0 !important;
}

.kk-audio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #163236;
  cursor: pointer;
}

.kk-audio-settings-wrapper-hide {
  font-size: 12px;
  color: #163236;
  font-weight: 600;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: start;
}

.kk-audio-settings-wrapper-hide * {
  cursor: pointer;
}

.kk-audio-settings-wrapper-hide img {
  margin-right: 5px;
  margin-top: 2px;
}

.kk-audio-settings-mic-dots-wrapper {
  display: flex;
}

.kk-audio-settings-mic-dots-wrapper span {
  background: #dedede;
  width: 22px;
  height: 6px;
  display: block;
  border-radius: 10px;
  margin-right: 5px;
  transition: all ease 0.4s;
}

.kk-audio-settings-mic-dots-wrapper .kk-nic-test-dot-active {
  background: #109f16;
}

.kk-audio-settings-label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.kk-audio-settings-title {
  margin-bottom: 0;
}

.kk-widget-calling-controls .kk-control.un-active {
  background: rgb(255 255 255 / 40%);
}

.kk-widget-chat-v2-during-call-wapper .kk-widget-calling-controls .kk-control.un-active {
  background: rgba(0, 0, 0, 0.4);
}

/* HTML: <div class="loader"></div> */
.loader-video {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side, #ffffff 90%, #ffffff00);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: calc(100% / 3) 100%;
  animation: l7 1s infinite linear;
}

@keyframes l7 {
  33% {
    background-size: calc(100% / 3) 0%, calc(100% / 3) 100%, calc(100% / 3) 100%;
  }

  50% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 0%, calc(100% / 3) 100%;
  }

  66% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 0%;
  }
}

.kk-loader-video {
  display: none;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.kk-loader-video p {
  font-size: 25px;
  font-weight: 400;
  padding-bottom: 10px !important;
}

.kk-widget-main-screen-content > p.kk_online_title_text_second_heading {
  font-size: 12px;
  font-weight: 400;
  padding-bottom: 0;
  width: fit-content;
  margin: 0 auto;
  padding: 0px 5px;
  padding-bottom: 10px;
}

.kk-widget-main-screen-content > p.kk_online_title_text {
  font-size: 19px;
  font-weight: 700;
  line-height: 21px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.kk-widget-chat-v2-agent-inchat {
  padding: 20px 0px;
  text-align: center;
}

.kk-widget-chat-v2-agent-thumb-inchat {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto 5px auto;
}

.kk-widget-chat-v2-agent-thumb-inchat img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  object-fit: cover;
}

.kk-widget-chat-v2-agent-thumb-inchat .member-short-name {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  object-fit: cover;
}

.kk-widget-chat-v2-agent-thumb-inchat::after {
  content: '';
  background-color: #109f16;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

.kk-widget-chat-v2-agent-name-inchat {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 10px;
  padding-bottom: 0;
}

.kk-widget-chat-v2-agent-detail-inchat {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 12px;
  color: #afafaf;
  max-width: 276px;
  margin: 0 auto;
  line-height: 18px;
}

.kk-widget-chat-v2-agent-detail-inchat .kk-widget-chat-v2-agent-details-msg-wrapper {
  display: flex;
  justify-content: center;
}

.kk-widget-chat-v2-agent-detail-inchat .kk-widget-chat-v2-agent-details-msg {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-weight: 400;
  font-size: 12px;
  font-style: italic;
  color: #666;
}

.kk-widget-chat-v2-header-agent-connected .kk-widget-chat-v2-agents-list {
  display: none;
}

.kk-widget-chat-v2-wrapper-inner-scrolled .kk-widget-chat-v2-header-agent-connected .kk-widget-chat-v2-agents-list {
  display: flex;
}

.kk-widget-chat-v2-form-wrapper {
  position: relative;
}

#emoji-list {
  bottom: 70px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

emoji-picker {
  --emoji-font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  width: 350px;
  height: 300px;
  --num-columns: 5;
  --emoji-size: 1.8rem;
  --category-emoji-size: 1.125rem;
  --border-radius: 10px;
}

.search-wrapper .search {
  padding: 5px;
  border-radius: 10px;
  font-size: 16px;
}

emoji-picker .search {
  display: none;
}

html.kk-mobile-full-screen-html {
  overflow: hidden !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 0px !important;
}

body.kk-mobile-full-screen-body {
  overflow: hidden !important;
  position: static !important;
  transform: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 0px !important;
}

.kk-company-team-name {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding-left: 25px;
  font-weight: 400;
  font-size: 14px;
  color: #000;
  line-height: 32px;
}

.kk-widget-chat-v2-agents-list-scrolled {
  animation: widgetFadeAnimation 1s;
}

@keyframes widgetFadeAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.kk-widget-chat-v2-wrapper-inner-scrolled
  .kk-widget-chat-v2-header.kk-widget-chat-v2-header-chat-start.kk-widget-chat-v2-header-agent-connected {
  animation: widgetFadeAnimation 1s;
}

.kk-scroll-down-to-bottom-effect {
  display: flex;
  animation: scaleUpDown 1s ease;
  opacity: 1;
}

.kk-widget-chat-option-talk-to-human .kk-scroll-down-to-bottom-effect {
  display: none;
}

@keyframes scaleUpDown {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.kk_phone_row {
  margin: 0 auto;
  width: 280px;
  clear: both;
  text-align: center;
}

.kk_phone_digit,
.kk_phone_dig {
  float: left;
  padding: 6px 10px;
  width: 75px;
  font-size: 2rem;
  cursor: pointer;
  color: #ffff;
  text-align: center;
  border-radius: 6px;
  min-height: 75px;
  user-select: none;
}

.kk_phone_sub {
  font-size: 0.8rem;
  color: #d8d8d8;
}

.kk_phone_container {
  z-index: 5;
  padding: 0 20px;
  margin-top: 30px;
  text-align: center;
  max-width: 265px;
  background: rgb(0 0 0 / 75%);
  border-radius: 10px;
}

#kk_phone_output {
  display: flex;
  flex-direction: column-reverse;
  font-size: 2rem;
  word-wrap: break-word;
  font-weight: bold;
  color: #ffff;
  height: 80px;
  overflow-y: auto;
  line-height: 1.8rem;
}

#kk_phone_output::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

#kk_phone_output::-webkit-scrollbar-thumb,
#kk_phone_output::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 5px;
}

#kk_phone_output::-webkit-scrollbar-thumb {
  background: rgba(74, 89, 106, 0.05);
}

#kk_phone_output:hover::-webkit-scrollbar-thumb {
  background: rgba(74, 89, 106, 0.15);
}

#kk_phone_output:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(106, 74, 89, 0.989);
}

#kk_phone_output:hover::-webkit-scrollbar-track {
  background: rgba(74, 89, 106, 0.05);
}

.kk_phone_digit:active,
.kk_phone_dig:active {
  background-color: rgb(23 26 62);
}

.kk_phone_dig {
  float: left;
  padding: 10px 20px;
  margin: 10px;
  width: 30px;
  cursor: pointer;
}

.show-emojis-list.kk-emoji-svg-active path#emojiLips {
  stroke-width: 1.3;
  stroke: #fff;
}

.kk-phone-number-required {
  color: #fde8f5 !important;
  display: none;
  font-size: 10px !important;
  font-weight: 400 !important;
  padding-bottom: 5px !important;
  margin-top: -8px !important;
}

.kk-widget-calling-chat-centent .kk-widget-chat-wrapper {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 120px);
  min-height: calc(100% - 120px);
}

.kk-widget-calling-chat-centent .kk-widget-chat-wrapper .kk-widget-chat-outer {
  height: 100%;
  overflow-x: hidden;
}

.kk-full-screen-activated .kk-widget-calling-chat-centent .kk-widget-chat-wrapper .kk-widget-chat-outer {
  height: 262px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-started p.kk-widget-calling-connection-agent-title {
  font-size: 17px;
  line-height: 22px;
  padding-bottom: 5px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-started p.kk-widget-calling-connection-agent-disconnect-text {
  font-size: 12px;
  line-height: 14px;
}

.kk-widget-wrapper-feature-page .kk-widget-calling-connection-text-wrapper p {
  font-size: 20px;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated
  .kk-widget-calling-controls-large-screen.kk-widget-calling-controls
  .kk-speaker-listing {
  display: none;
}

/* 

New Styles Start Here 

*/

.kk-mid-screen-outer {
  width: 310px;
  position: relative;
  z-index: 9999;
  padding-left: 10px;
  margin: 0 auto;
}

.kk-mid-screen-wrapper * {
  box-sizing: border-box;
}

.kk-mid-screen-wrapper {
  background: #000000;
  padding: 15px 10px;
  border-radius: 20px;
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-bottom: 10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.kk-mid-screen-video-wrapper {
  position: relative;
  display: flex;
}

.kk-mid-screen-video-wrapper video {
  width: 152px;
  height: 126px;
  object-fit: cover;
  border-radius: 20px;
  object-position: 0px 25%;
}

.kk-mid-screen-video-content {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 10px 10px 20px 10px;
}

.kk-mid-screen-video-content p {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 0;
  line-height: 15px;
}

.kk-mid-screen-controls-wrapper {
  padding: 0px 0px 0 15px;
}

.kk-mid-screen-controls-wrapper .kk-mid-screen-control {
  width: 108px;
  height: 26px;
  margin-bottom: 5px;
  background: #707070;
  border-radius: 5px;
  color: #ffffff;
  font-size: 9px;
  display: flex;
  align-items: center;
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 16%);
  padding: 5px 8px;
  cursor: pointer;
}

.kk-mid-screen-controls-wrapper .kk-mid-screen-control span {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 9px;
  font-weight: 400;
}

.kk-mid-screen-controls-wrapper .kk-mid-screen-control .icon-wrapper {
  width: 25px;
  margin-left: 5px;
  background-color: transparent;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  color: inherit;
  display: block;
  font-size: 16px;
  height: auto;
  line-height: 16px;
  max-width: 100%;
  position: relative;
  text-align: start;
  vertical-align: middle;
  top: 0px;
  word-spacing: 1px;
}

.kk-mid-screen-controls-wrapper .kk-mid-screen-control.kk-mid-audio-call-btn {
  background: #ffeffe;
  color: #2f2f2f;
}

.kk-mid-screen-controls-wrapper .kk-mid-screen-control.kk-mid-video-call-btn {
  background: #707070;
  color: #ffffff;
}

.kk-mid-screen-controls-wrapper .kk-mid-screen-control.kk-mid-chat-call-btn {
  background: #e7fffc;
  color: #2f2f2f;
  margin-bottom: 0px;
}

.kk-mid-screen-footer {
  margin: 10px 0px;
  text-align: end;
}

.kk-mid-screen-footer img {
  cursor: pointer;
}

.kk-mid-screen-footer-icons {
  background: #2f2f2f;
  padding: 18px;
  border-radius: 0px;
  border-radius: 50%;
  margin: 0 0 0 auto;
}

.kk-mid-screen-footer-icons {
  position: relative;
  width: 28px;
  height: 28px;
  transition: all ease 0.4s;
}

.kk-mid-screen-footer-icons:hover {
  transform: scale(1.1);
}

.kk-mid-screen-footer-icons-active #cross-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

.kk-mid-screen-footer-icons.kk-mid-app-icon-active {
  width: 65px;
  height: 65px;
}

.kk-mid-screen-footer-icons img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.kk-mid-screen-footer-icons-active #app-icon {
  opacity: 1;
  /* Initially visible */
  animation: appToCross 4s forwards;
  /* 3s duration */
}

.kk-mid-screen-footer-icons-active #cross-icon {
  opacity: 0;
  /* Initially hidden */
  animation: crossAppear 3s forwards;
  /* Starts at 3s */
  transition: transform 0.3s ease-in-out;
  z-index: 9999;
}

@keyframes appToCross {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 1;
    /* Fade out knock-knock icon */
  }

  60% {
    opacity: 0;
    /* Fade out knock-knock icon */
  }

  75% {
    opacity: 0;
    /* Fade out knock-knock icon */
  }

  100% {
    opacity: 0;
  }
}

@keyframes crossAppear {
  0% {
    opacity: 0;
  }

  70% {
    opacity: 0;
    /* Hidden while first image fades out */
  }

  100% {
    opacity: 1;
    /* Fade in cross icon */
  }
}

.kk-mid-screen-chat {
  background: #fff;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.kk-mid-screen-chat-header {
  display: flex;
  align-items: center;
  padding: 7px 0;
}

.kk-mid-screen-chat-header img {
  width: 61px;
  height: 61px;
  object-fit: contain;
  border-radius: 50%;
  margin-right: 10px;
}

.kk-mid-screen-chat-agent-meta .kk-mid-screen-chat-agent-name {
  margin: 0;
  color: #171a3e;
  font-size: 11px;
  font-weight: 700;
}

.kk-mid-screen-chat-agent-meta .kk-mid-screen-chat-agent-text {
  margin: 0;
  font-size: 10px;
  line-height: 14px;
  color: #707070;
  font-style: italic;
}

.kk-mid-screen-message-sender-image {
  width: 25px;
  margin-right: 10px;
}

.kk-mid-screen-message {
  display: flex;
  align-items: end;
  margin: 10px 0px;
}

.kk-mid-screen-message-text {
  font-size: 14px;
  color: #2f2f2f;
  background: #ebebeb;
  border-radius: 8px;
  padding: 10px 20px;
}

.kk-mid-screen-message-text p {
  margin: 0 0 10px 0;
}

.kk-mid-screen-message.kk-mid-screen-message-received {
  justify-content: flex-end;
}

.kk-mid-screen-message.kk-mid-screen-message-received .kk-mid-screen-message-text {
  background: #2f2f2f;
  color: #ffffff;
  min-width: 180px;
}

.kk-mid-screen-message-sent.kk-mid-screen-message-thinking .kk-mid-screen-message-text {
  background: #2f2f2f;
  color: #ffffff;
}

.kk-mid-screen-message-sent.kk-mid-screen-message-thinking .kk-mid-screen-message-text img {
  margin-left: 10px;
}

.kk-mid-screen-chat-outer {
  height: 222px;
  overflow-y: auto;
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.kk-mid-screen-chat-outer::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

.kk-mid-screen-message.kk-mid-screen-message-received.kk-mid-screen-end-controls .kk-mid-screen-message-text {
  background: transparent;
  display: flex;
  padding: 10px 0px;
}

.kk-mid-screen-end-controls .kk-mid-screen-message-text .kk-mid-screen-end-control-btn {
  background: #2f2f2f;
  width: 100px;
  display: block;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  margin-right: 10px;
  padding: 5px 0;
}

.kk-mid-screen-end-controls .kk-mid-screen-message-text .kk-mid-screen-end-control-btn:last-child {
  margin-right: 0;
}

.kk-mid-live-tag {
  position: absolute;
  top: 14px;
  right: 17px;
  width: auto;
}

/* 

Mini V2 Styles Start 

*/
.kk-mini-v2-widget {
  cursor: pointer;
  padding-right: 10px;
  padding-top: 15px;
}

.kk-mini-v2-widget .kk-widget-call-animation {
  background: #2f2f2f;
  width: 102px;
  height: 102px;
  border-radius: 100%;
  border: solid 1px #ff0000;
  margin: 0 0 0 auto;
  animation: none;
  cursor: pointer;
}

.kk-mini-v2-widget:hover .kk-widget-call-animation {
  animation: kkCallingRed 2s ease infinite;
}

.kk-mini-v2-widget .kk-widget-call-animation video {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center top;
  cursor: pointer;
}

.kk-greetings-wrapper-v2 {
  background: #2f2f2f;
  border-radius: 60px;
  width: 100px;
  height: 102px;
  margin: 6px 25px 30px auto;
  position: relative;
  transition: all ease 0.4s;
}

.kk-widget-wrapper-left .kk-greetings-wrapper-v2 {
  margin: 6px auto 30px 35px;
}

.kk-greetings-wrapper-v2.kk-greetings-v2-active-short {
  width: 115px;
}

.kk-greetings-wrapper-v2.kk-greetings-v2-active {
  width: 388px;
}

.kk-greetings-wrapper-v2.kk-greetings-v2-active.kk-greetings-v2-unactive {
  width: 100px;
}

.kk-greetings-wrapper-v2.kk-greetings-v2-active .kk-greetings-wrapper-v2-inner {
  opacity: 1;
}

.kk-greetings-wrapper-v2-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 35px;
  font-size: 18px;
  cursor: pointer;
}

.kk-greetings-wrapper-v2-inner svg {
  opacity: 0;
}

.kk-greetings-wrapper-v2-inner span {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 18px;
  font-weight: 700;
  opacity: 0;
}

.kk-greetings-wrapper-v2-inner p {
  margin: 0 !important;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  padding: 0 !important;
  cursor: pointer;
}

.kk-greetings-wrapper-v2-inner p span {
  margin-left: 5px;
  cursor: pointer;
}

.kk-greetings-wrapper-v2-inner p {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  line-height: 21px;
  max-width: 240px;
}

@keyframes kkCallingRed {
  0% {
    transform: scale(1);
  }

  15% {
    box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.4);
  }

  25% {
    box-shadow: 0 0 0 15px rgba(255, 0, 0, 0.4), 0 0 0 30px rgba(255, 0, 0, 0.2);
  }
}

.kk-fade-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.kk-fade-image,
.kk-fade-span {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease-in-out, transform 1s ease-in-out;
}

.kk-fade-container.kk-enter .kk-fade-image {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.kk-fade-container.kk-enter .kk-fade-span {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transition-delay: 0.5s;
}

.kk-fade-container.kk-exit .kk-fade-span {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.kk-fade-container.kk-exit .kk-fade-image {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
  transition-delay: 1s;
}

.kk-fade-container.kk-enter .kk-fade-image,
.kk-fade-container.kk-enter .kk-fade-span {
  visibility: visible;
}

.kk-widget-call-animation img {
  position: absolute;
  right: 50%;
  bottom: 10px;
  z-index: 99;
  transform: translateX(50%);
  width: auto;
}

.kk-mini-v2-widget-cross-icon {
  position: absolute;
  bottom: auto;
  top: -30px;
  right: -5px;
  cursor: pointer;
  transition: all ease 0.4s;
  opacity: 0;
}

.kk-mini-v2-widget:hover .kk-mini-v2-widget-cross-icon {
  opacity: 1;
}

/* 

Mini V2 Styles End 

*/

.kk-widget-chat-controls-inner {
  margin: 10px 0px 10px 35px;
  font-size: 14px;
  color: #2f2f2f;
}

.kk-widget-chat-controls-inner-wrapper {
  display: flex;
  justify-content: flex-start;
  color: #fff;
  margin-top: 10px;
  margin-right: 10px;
}

.kk-widget-chat-controls-inner-wrapper .kk-widget-chat-controls-inner-single {
  background: #ffffff;
  color: #2f2f2f;
  border: 1px solid #2f2f2f;
  border-radius: 8px;
  padding: 6px 22px;
  cursor: pointer;
  transition: all ease 0.4s;
}

.kk-widget-chat-controls-inner-wrapper .kk-widget-chat-controls-inner-single:hover {
  background: #2f2f2f;
  color: #ffffff;
}

.kk-widget-chat-controls-inner-wrapper .kk-widget-chat-controls-inner-single:first-child {
  margin-right: 10px;
}

.kk-widget-wrapper-left .kk-mid-screen-footer-icons {
  margin: auto 0 0 0;
}

.kk-widget-chat-v2-control-btn-end {
  background: #ff0000;
  border: 1px solid #ff0000;
  color: #ffffff !important;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 7px 30px;
  align-items: center;
  margin-bottom: 15px;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 10%);
  cursor: pointer;
  transition: all ease 0.4s;
  margin-left: 10px;
  font-size: 12px;
}

.kk-widget-wrapper-left .kk-mid-screen-outer {
  padding-left: 0;
}

/* 

Mini Chat Styles Start 

*/

.kk-mini-screen-with-chat-messages-outer {
  width: 309px;
  position: relative;
  z-index: 9999;
  padding-left: 15px;
  padding-top: 25px;
}

.kk-mini-screen-with-chat-messages-wrapper {
  background: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(23, 26, 62, 1) 6%,
    rgba(23, 26, 62, 1) 6%,
    rgba(217, 218, 224, 1) 52%,
    rgb(255, 255, 255) 72%
  );
  border-radius: 15px;
  box-shadow: 0 1px 20px rgb(0 0 0 / 18%);
  padding: 15px;
}

.kk-mini-screen-with-chat-messages-head .kk-mini-screen-agent-meta-wrapper {
  display: flex;
  align-items: center;
}

.kk-mini-screen-with-chat-messages-head .kk-mini-screen-agent-image-wrapper {
  margin-right: 10px;
  position: relative;
}

.kk-mini-screen-with-chat-messages-head .kk-mini-screen-agent-image-wrapper:after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #76f235;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: 8px;
  bottom: 1px;
}

.kk-mini-screen-with-chat-messages-head .kk-mini-screen-agent-image-wrapper img {
  width: 61px;
  height: 61px;
  border-radius: 50%;
}

.kk-mini-screen-with-chat-messages-head .kk-mini-screen-agent-meta-wrapper .kk-mini-screen-agent-meta p {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
}

.kk-mini-screen-with-chat-messages-head .kk-mini-screen-agent-meta-wrapper .kk-mini-screen-controls-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 5px;
}

.kk-mini-screen-with-chat-messages-head .kk-mini-screen-agent-meta-wrapper .kk-mini-screen-controls-wrapper img {
  cursor: pointer;
}

.kk-mini-screen-with-chat-messages-head
  .kk-mini-screen-agent-meta-wrapper
  .kk-mini-screen-controls-wrapper
  img:first-child {
  margin-right: 10px;
}

.kk-mini-screen-with-chat-messages .kk-mini-screen-with-chat-messages-footer {
  padding: 10px 0px 10px 10px;
  text-align: right;
}

.kk-mini-screen-with-chat-messages .kk-mini-screen-with-chat-messages-footer img {
  cursor: pointer;
}

.kk-mini-screen-chat-outer {
  padding: 15px 0px 0px 0px;
}

.kk-mini-screen-message {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}

.kk-mini-screen-message-sender-image {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-text {
  font-size: 14px;
  background: #f8f8f8;
  color: #2f2f2f;
  padding: 10px 22px;
  border-radius: 8px;
  transition: all ease 0.4s;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-received {
  justify-content: flex-end;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-received .kk-mini-screen-message-text,
.kk-mini-screen-chat-outer .kk-mini-screen-message-sent.kk-mini-screen-message-thinking .kk-mini-screen-message-text {
  background: #2f2f2f;
  color: #ffffff;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-received .kk-mini-screen-message-text img {
  margin-left: 10px;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-received .kk-mini-screen-message-text.kk-mini-screen-message-link {
  cursor: pointer;
}

.kk-mini-screen-chat-outer
  .kk-mini-screen-message-received
  .kk-mini-screen-message-text.kk-mini-screen-message-link:hover {
  background: #171a3e;
}

.kk-mini-screen-chat-outer
  .kk-mini-screen-message-sent.kk-mini-screen-message-thinking
  .kk-mini-screen-message-text
  img {
  margin-left: 10px;
}

.kk-mini-screen-message-text p {
  margin: 0 0 10px 0;
  font-size: 14px !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  line-height: 19px !important;
  color: #2f2f2f !important;
  font-weight: 400;
}

.kk-mini-screen-message-text p:last-child {
  margin-bottom: 0;
}

.kk-mini-screen-message.kk-mini-screen-message-received.kk-mini-screen-end-controls .kk-mini-screen-message-text {
  background: transparent;
  display: flex;
  padding: 10px 0px;
}

.kk-mini-screen-end-controls .kk-mini-screen-message-text .kk-mini-screen-end-control-btn {
  background: #2f2f2f;
  width: 100px;
  display: block;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  margin-right: 10px;
  padding: 5px 0;
}

.kk-mini-screen-end-controls .kk-mini-screen-message-text .kk-mini-screen-end-control-btn:last-child {
  margin-right: 0;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-received .kk-mini-screen-message-text.kk-mini-screen-option {
  border: 1px solid #2f2f2f;
  background: #ffffff;
  color: #2f2f2f;
  transition: all ease 0.4s;
  padding: 2px 22px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-received .kk-mini-screen-message-text.kk-mini-screen-option:hover {
  box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
  background: #3fe9e1;
  color: #ffffff;
  border: 1px solid transparent;
}

.kk-mini-screen-chat-outer .kk-mini-screen-message-received {
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 30px;
}

.kk-widget-message p {
  font-size: 14px !important;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  line-height: 19px !important;
  color: #2f2f2f !important;
}

@media (max-width: 500px) {
  .kk-mini-screen-with-chat-messages-outer {
    margin: 0 20px 0 auto;
  }
}

.screen-share {
  display: flex;
  right: 30px;
  top: 14px;
}

.screen-share video {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.share-video-screen {
  display: none;
}

.screen-share .share-video-screen {
  display: block;
}

.kk-full-screen-activated .screen-share {
  right: 100px;
}

.kk-full-screen-activated .screen-share video {
  width: 138px;
  height: 134px;
}

.kk-chat-message-seen {
  margin-bottom: 20px;
}

.kk-widget-chat-sender.kk-chat-message-seen span.message-status {
  bottom: -14px;
}

/*
// audio call
*/
.company_main_video_calling.kk-widget-audio-call {
  background-size: cover !important;
}

.kk-widget-audio-calling-connection-agent-info-wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
}

.kk-widget-audio-calling-connection-agent-thumb-inner {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.kk-widget-calling-started
  .kk-widget-audio-calling-connection-agent-thumb
  .kk-widget-audio-calling-connection-agent-thumb-inner
  p {
  padding-bottom: 0;
  margin-top: 0;
}

.kk-widget-calling-started .kk-widget-audio-calling-connection-agent-thumb img.kk-agent-mic {
  width: 15px;
  height: auto;
  margin-left: 10px;
  display: none;
}

.kk-widget-audio-calling-connection-agent-thumb {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.kk-widget-audio-calling-connection-agent-thumb-chat {
  position: absolute;
  top: 64px;
  text-align: center;
}

.kk-widget-audio-calling-connection-agent-thumb-chat-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.kk-widget-audio-calling-connection-agent-thumb-chat-inner img.kk-agent-mic {
  margin-left: 8px;
  width: 15px;
  height: auto;
}

.kk-widget-audio-calling-connection-agent-thumb-chat .kk-widget-audio-calling-connection-agent-thumb-chat-inner p {
  margin-top: 0;
  margin-bottom: 0;
}

.kk-widget-audio-calling-connection-agent-thumb img,
.kk-widget-audio-calling-connection-agent-thumb-chat img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
}

.kk-widget-audio-calling-connection-agent-thumb p,
.kk-widget-audio-calling-connection-agent-thumb-chat p {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-top: 10px;
}

/* 

Chat during call styles start 

*/

.kk-widget-chat-v2-during-call .kk-widget-chat-v2-agents-list {
  display: none;
}

.kk-widget-chat-v2-during-call .kk-widget-chat-v2-wrapper {
  overflow: hidden;
}

.kk-widget-chat-v2-during-call .kk-widget-chat-v2-header {
  min-height: 285px !important;
}

.kk-widget-chat-v2-during-call .kk-widget-chat-v2-wrapper-main {
  height: calc(100% - 0px);
}

.kk-widget-chat-v2-during-call .kk-widget-chat-v2-outer {
  height: calc(100vh - 390px);
}

.kk-widget-chat-v2-during-call-wapper {
  position: absolute;
  top: 60px;
  width: 100%;
  right: 0;
  z-index: 99;
  display: none;
  box-shadow: 0px 3px 12px rgb(0 0 0 / 4%);
}

.kk-widget-chat-v2-during-call-wapper-inner {
  position: relative;
  height: 225px;
  width: 100%;
}

.kk-widget-chat-v2-during-call-wapper-inner > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
}

.kk-widget-chat-v2-during-call-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 10px;
}

.kk-widget-chat-v2-during-call .kk-widget-chat-v2-header-chat-start .kk-widget-chat-v2-during-call-wapper {
  display: block;
}

.kk-widget-chat-v2-during-call-content-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 10px;
  font-size: 10px;
  color: #fff;
}

.kk-widget-chat-v2-during-call-content-head-controls {
  display: flex;
  gap: 10px;
}

.kk-widget-chat-v2-during-call-content-head-controls img {
  width: auto;
}

.kk-widget-main-screen-wrapper:not(.kk-full-screen-activated)
  .kk-widget-chat-v2-during-call-content-head-controls
  .kk-active-small-screen-btn
  img {
  width: 13px;
}

.kk-widget-main-screen-wrapper:not(.kk-full-screen-activated)
  .kk-widget-chat-v2-during-call-content-head-controls
  .kk-active-small-screen-btn {
  width: 30px;
  height: 30px;
}

.kk-widget-chat-v2-during-call-content-head-controls button:first-child {
  margin-right: 5px;
}

.kk-widget-chat-v2-during-call-content-head-controls button.kk-mic-btn {
  width: fit-content;
  height: 30px;
  justify-content: space-between;
  padding: 10px !important;
  color: #fff;
}

.kk-widget-chat-v2-during-call-content-head-controls button.kk-mic-btn img {
  margin-right: 5px;
}

.kk-widget-chat-v2-during-call-content-head-controls button {
  background: rgb(0 0 0 / 40%) !important;
  background-color: rgb(0 0 0 / 40%) !important;
  border: none;
  outline: none !important;
  width: 43px;
  height: 42px;
  border-radius: 20px;
  cursor: pointer;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kk-widget-chat-v2-during-call-wapper .kk-widget-calling-controls {
  align-items: end;
  background-color: transparent;
  justify-content: space-between;
  padding: 12px 10px;
}

.kk-widget-chat-v2-during-call-wapper .kk-widget-calling-controls .kk-widget-calling-controls-left {
  display: flex;
  gap: 15px;
}

.kk-widget-chat-v2-during-call-wapper .kk-widget-calling-controls .kk-widget-calling-controls-right {
  display: flex;
  gap: 15px;
  align-items: end;
}

.kk-widget-chat-v2-during-call-wapper .kk-widget-calling-controls .kk-second-video-wrapper {
  width: 100px;
  border-radius: 15px;
  overflow: hidden;
  margin-left: 80px;
}

.kk-widget-main-screen-extended-wrapper
  .kk-widget-chat-v2-during-call-wapper
  .kk-widget-calling-controls
  .kk-second-video-wrapper {
  width: auto;
  margin-left: 0;
}

.kk-widget-chat-v2-during-call-wapper .kk-widget-calling-controls .kk-second-video-wrapper video {
  width: 100%;
  height: 100%;
  min-height: 126px;
  object-position: center;
  object-fit: cover;
  border-radius: 15px;
}

/* 

Call on hold screen styles start 

*/

.kk-call-on-hold-screen {
  width: 100%;
  height: 484px;
  background-image: url('https://api.knock-knockapp.com/files/call-hold-bg.jpg');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px 20px 0px 0px;
  display: none;
}

.kk-call-on-hold-screen-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.kk-call-on-hold-screen-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  align-items: center;
}

.kk-call-on-hold-screen-content {
  min-height: 79%;
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 44%) 80%);
  width: 100%;
}

.kk-call-on-hold-screen-content-inner {
  background-image: url('https://api.knock-knockapp.com/files/call-hold-bg-image.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 252px;
  height: 225px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 0 auto;
}

.call-on-hold-btn {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  cursor: pointer;
}

.call-on-hold-btn img {
  margin-left: 10px;
  cursor: pointer;
}

.kk-call-on-hold-screen-head .kk-control {
  width: 32px;
  height: 31px;
  background-color: rgba(255, 255, 255, 0.4);
}

.kk-call-on-hold-screen-head .kk-control img {
  cursor: pointer;
}

.kk-call-on-hold-screen-content-title {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  font-size: 16px !important;
  margin: 0 0 15px 0 !important;
  color: #fff !important;
  padding: 0 !important;
  font-weight: 400 !important;
}

.kk-call-on-hold-screen-content-agent-name {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  font-size: 18px !important;
  margin: 10px 0 0 0 !important;
  color: #fff !important;
  padding: 0 !important;
  font-weight: 400 !important;
}

.kk-call-on-hold-screen-content-agent-image {
  width: 110px !important;
  height: 106px !important;
  border-radius: 50% !important;
}

.kk-call-on-hold-screen-content .kk-call-end-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
  cursor: pointer;
  margin-top: 15px;
}

.kk-call-on-hold-screen-content .kk-call-end-btn img {
  margin-bottom: 10px;
  cursor: pointer;
}

/* 

Call on hold screen styles end 

*/

.kk-controls-btn-wrapper button * {
  cursor: pointer;
}

.kk-widget-interaction-control * {
  cursor: pointer;
}

.kk-mid-screen-controls-wrapper * {
  cursor: pointer;
}

.kk-widget-chat-talk-to-human-wrapper {
  padding: 0.1rem 1rem;
  text-align: end;
}

.kk-talk-to-human-btn {
  color: #2f2f2f;
  border: 1px solid #163236;
  border-radius: 8px;
  background: #fff;
  padding: 5px 15px;
  font-size: 14px;
  transition: all ease 0.4s;
}

.kk-talk-to-human-btn.kk-talk-to-human-btn-active {
  background: #163236;
  color: #fff;
  padding: 10px 15px;
}

.kk-talk-to-human-btn:hover {
  background: #163236;
  color: #fff;
}

/* .kk-widget-chat-v2-during-call .kk-widget-chat-v2-wrapper-main.kk-widget-chat-v2-wrapper-main-agent-connected {
  height: calc(100% - 60px);
  padding-top: 226px;
} */

.kk-mini-sticky-v2-widget-content-wrapper {
  background: #163236;
  display: flex;
  justify-content: space-between;
  color: #fff;
  max-width: 285px;
  margin: 0 15px 0 auto;
  padding: 13px 20px;
  border-radius: 20px 20px 0 0;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.kk-mini-sticky-v2-widget * {
  cursor: pointer;
}

.kk-mini-sticky-v2-widget-content-wrapper .kk-mini-sticky-v2-widget-text {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 75%;
}

.kk-mini-sticky-v2-widget-chat-icon {
  position: relative;
  cursor: pointer;
}

.kk-mini-sticky-v2-widget-chat-icon svg {
  cursor: pointer;
  width: 32px;
}

.kk-mini-sticky-v2-widget-chat-icon .kk-sticky-widget-loading-dots {
  cursor: pointer;
  position: absolute;
  top: 7px;
  right: 5px;
  width: 21px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: calc(100% / 3) 50%;
  animation: kk-sticky-widget-loading-dots 1s infinite linear;
}

@keyframes kk-sticky-widget-loading-dots {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }

  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }

  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }

  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}

.kk-down-arrow-main-screen.chat-screen-arrow-down {
  padding-right: 20px;
}

.kk-widget-main-screen-wrapper.kk-full-screen-activated + .kk-down-arrow-main-screen.chat-screen-arrow-down {
  display: none;
}

.chat-screen-arrow-down {
  min-height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}

.chat-screen-arrow-down * {
  cursor: pointer;
}

.chat-screen-arrow-down svg {
  transition: all ease 0.4s;
  width: 50px;
  height: 50px;
  transform: scale(0.95);
}

.chat-screen-arrow-down svg:hover {
  transform: scale(1.05);
}

/* Apply rounded top to the first kk-widget-chat-sender in a group */
.kk-widget-chat-sender:first-child .kk-widget-message,
.kk-widget-chat-sender:not(.kk-widget-chat-sender + .kk-widget-chat-sender):has(+ .kk-widget-chat-sender)
  .kk-widget-message {
  border-radius: 10px 10px 2px 10px;
}

/* Apply rounded bottom to the last kk-widget-chat-sender in a group */
.kk-widget-chat-sender + .kk-widget-chat-sender:not(:has(+ .kk-widget-chat-sender)) .kk-widget-message {
  border-radius: 10px 2px 10px 10px;
  margin-bottom: 10px;
}

/* Ensure single kk-widget-chat-sender elements remain unchanged */
.kk-widget-chat-sender:not(.kk-widget-chat-sender + .kk-widget-chat-sender):not(:has(+ .kk-widget-chat-sender))
  .kk-widget-message {
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Apply rounded top to the first kk-widget-chat-sender in a group */
.kk-widget-chat-receiver:first-child .kk-agent-message-main-wrapper,
.kk-widget-chat-receiver:not(.kk-widget-chat-receiver + .kk-widget-chat-receiver):has(+ .kk-widget-chat-receiver)
  .kk-agent-message-main-wrapper {
  border-radius: 10px 10px 10px 2px;
}

/* Apply rounded bottom to the last kk-widget-chat-sender in a group */
.kk-widget-chat-receiver
  + .kk-widget-chat-receiver:not(:has(+ .kk-widget-chat-receiver))
  .kk-agent-message-main-wrapper {
  border-radius: 2px 10px 10px 10px;
  margin-bottom: 10px;
}

/* Ensure single kk-widget-chat-sender elements remain unchanged */
.kk-widget-chat-receiver:not(.kk-widget-chat-receiver + .kk-widget-chat-receiver):not(:has(+ .kk-widget-chat-receiver))
  .kk-agent-message-main-wrapper {
  border-radius: 10px;
  margin-bottom: 10px;
}

.kk-widget-chat-receiver .kk-widget-message {
  background: transparent;
  padding: 0;
  max-width: 100%;
}

.kk-agent-message-main-wrapper {
  background: #f7f7f7;
  max-width: 84%;
  padding: 9px 15px;
  border: 1px solid #e8e8e8;
  border-radius: 2px 10px 10px 2px;
  transition: all ease 0.4s;
}

.kk-agent-info-chat-wrapper {
  display: flex;
  padding-bottom: 5px;
  align-items: center;
  display: none;
}

.kk-widget-chat-receiver:first-child .kk-agent-message-main-wrapper .kk-agent-info-chat-wrapper,
.kk-widget-chat-receiver:not(.kk-widget-chat-receiver + .kk-widget-chat-receiver):has(+ .kk-widget-chat-receiver)
  .kk-agent-message-main-wrapper
  .kk-agent-info-chat-wrapper {
  display: flex;
}

.kk-widget-chat-receiver:not(.kk-widget-chat-receiver + .kk-widget-chat-receiver):not(:has(+ .kk-widget-chat-receiver))
  .kk-agent-message-main-wrapper
  .kk-agent-info-chat-wrapper {
  display: flex;
}

.kk-agent-info-chat-wrapper p {
  font-size: 10px;
  font-weight: bold;
  color: #2f2f2f;
  margin-bottom: 0;
  padding-bottom: 0;
}

.kk-agent-info-chat-wrapper img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}

.kk-agent-info-chat-wrapper .member-short-name {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}

.kk-widget-chat-receiver .kk-agent-message-main-wrapper .kk-agent-info-chat-wrapper .member-short-name p {
  color: #fff !important;
}

.kk-widget-main-screen-extended-wrapper .kk-agent-message-main-wrapper,
.kk-widget-main-screen-extended-wrapper .kk-widget-chat-sender .kk-widget-message {
  max-width: 371px;
}

.kk-in-chat-connection-request-controls-wrapper {
  max-width: 310px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
  text-align: center;
}

.kk-in-chat-connection-request-controls-head {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  font-size: 18px;
  margin-bottom: 20px;
  display: block;
}

.kk-in-chat-connection-request-control {
  max-width: 175px;
  border: 1px solid #163236;
  border-radius: 8px;
  margin: 0 auto 8px auto;
  text-align: justify;
  padding: 4px 15px;
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all ease 0.4s;
}

.kk-in-chat-connection-request-control:last-child {
  margin-bottom: 0;
}

.kk-in-chat-connection-request-control:hover {
  background-color: #163236;
}

.kk-in-chat-connection-request-control span {
  min-width: 80px;
  margin: 0 auto;
  color: #163236;
  font-size: 14px;
  transition: all ease 0.4s;
}

.kk-in-chat-connection-request-control svg path,
.kk-in-chat-connection-request-control svg rect {
  transition: all ease 0.4s;
}

.kk-in-chat-connection-request-control:hover svg path,
.kk-in-chat-connection-request-control:hover svg rect {
  fill: #ffffff;
}

.kk-in-chat-connection-request-control:hover span {
  color: #ffffff;
}

.kk-in-chat-connection-request-control * {
  cursor: pointer;
}

.kk-widget-chat-v2-ai-title {
  font-size: 14px;
  color: #2f2f2f;
  font-weight: bold;
}

.kk-un-active-screen .kk-mini-v2-widget-cross-icon {
  top: 0px;
}

.kk-mini-sticky-v2-widget-chat-icon svg path {
  fill: '#fff';
}

/* 

Auto Trigger Call Styles Start 

*/

.kk-widget-auto-trigger-call-wrapper {
  position: relative;
  width: 223px;
  padding: 0px 20px 20px 20px;
  margin: 0 0 0 auto;
  padding-bottom: 0;
}

.kk-widget-auto-trigger-call-content {
  border-radius: 10px;
  position: relative;
}

.kk-widget-auto-trigger-call-content video {
  width: 183px;
  height: 245px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 0;
}

.kk-widget-auto-trigger-call-video-wrapper-outer {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
}

.kk-widget-auto-trigger-call-video-wrapper {
  width: 100%;
  height: 103px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  display: flex;
}

.kk-widget-auto-trigger-call-video-wrapper video {
  width: 103px;
  height: 103px;
  border: 2px solid #ff2d2e;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
  background-color: #ff2d2e;
  object-position: 0 20%;
}

.kk-widget-auto-trigger-call-video-wrapper img {
  position: absolute;
  bottom: 10px;
  width: 38px;
  max-width: 38px;
}

.kk-widget-auto-trigger-call-content-inner {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px;
  width: 100%;
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 20%, rgb(0 0 0 / 44%) 80%);
  border-radius: 10px;
}

.kk-widget-auto-trigger-call-content-message-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 2px 10px;
  transition: all ease 0.4s;
}

.kk-widget-auto-trigger-call-content-message-wrapper img {
  position: absolute;
  top: -10px;
  transition: all ease 0.4s;
}

.kk-widget-auto-trigger-call-content-message-wrapper.kk-widget-auto-trigger-call-content-message-wrapper-marquee img {
  top: 5px;
}

.kk-widget-auto-trigger-call-content-message-wrapper .kk-widget-auto-trigger-call-content-message-container {
  background: rgb(0 0 0 / 40%);
  padding: 2px 8px;
  border-radius: 10px;
  transition: margin ease 0.4s;
  max-width: 120px;
}

.kk-widget-auto-trigger-call-content-message-wrapper * {
  cursor: pointer;
}

.kk-widget-auto-trigger-call-content-message-wrapper.kk-widget-auto-trigger-call-content-message-wrapper-marquee
  .kk-widget-auto-trigger-call-content-message-container {
  max-width: 120px;
  margin-left: 25px;
}

.kk-widget-auto-trigger-call-content-message {
  color: #fff;
  font-size: 12px;
  transition: all ease 0.4s;
}

.kk-widget-auto-trigger-call-content-message-wrapper .kk-widget-auto-trigger-call-content-message-container {
  margin-left: 10px;
}

.kk-widget-auto-trigger-call-content-message-inner {
  transition: all ease 0.4s;
}

.kk-widget-auto-trigger-call-content-message-wrapper-marquee .kk-widget-auto-trigger-call-content-message {
  overflow: hidden;
  max-width: 180px;
  white-space: nowrap;
  position: relative;
}

.kk-widget-auto-trigger-call-content-message-wrapper-marquee .kk-widget-auto-trigger-call-content-message-inner {
  display: inline-flex;
  white-space: nowrap;
  position: relative;
  will-change: transform;
}

.kk-widget-auto-trigger-call-content-message-wrapper-marquee
  .kk-widget-auto-trigger-call-content-message-inner.kk-widget-auto-trigger-call-content-message-inner-active-marquee {
  animation: scroll-loop 12s linear infinite;
}

.kk-widget-auto-trigger-call-content-message-wrapper-marquee .kk-widget-auto-trigger-call-content-message-inner::after {
  content: attr(data-text);
  padding-left: 40px;
}

@keyframes scroll-loop {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-70%);
  }
}

.kk-widget-auto-trigger-call-content-inner-head {
  display: flex;
  justify-content: space-between;
}

.kk-widget-auto-trigger-call-content-controls-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
  flex-direction: column;
  gap: 10px;
}

.kk-widget-auto-trigger-cross-icon {
  position: absolute;
  right: -2px;
  top: 2px;
  cursor: pointer;
}

.kk-widget-auto-trigger-cross-icon:hover {
  filter: invert(1);
}

.kk-widget-auto-trigger-live-tag {
  width: 38px;
}

.kk-widget-auto-trigger-call-content-inner-wrapper .kk-widget-auto-trigger-call-content-text:last-child {
  margin-bottom: 0px;
}

.kk-widget-auto-trigger-call-content-text {
  margin: 0;
  margin-bottom: 10px;
  color: #2f2f2f;
  font-size: 14px;
  white-space: pre-line;
}

.kk-widget-auto-trigger-call-content-control {
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  background: #163236;
  border-radius: 5px;
  width: 100%;
  padding: 12px;
}

.kk-widget-auto-trigger-call-content-control img {
  margin-right: 8px;
  margin-top: 2px;
}

.kk-widget-auto-trigger-call-content-control * {
  cursor: pointer;
}

@keyframes scaleBounceIn {
  0% {
    transform: scale(0.4);
    opacity: 0;
    filter: blur(8px);
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
    filter: blur(2px);
  }

  80% {
    transform: scale(0.97);
    filter: blur(0px);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

.kk-widget-auto-trigger-call-wrapper.animate-in .kk-widget-auto-trigger-call-content {
  -webkit-animation-name: widgetHeadShake;
  animation-name: widgetHeadShake;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}

@keyframes widgetHeadShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes widgetHeadShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes kkPulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes kkPulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.kk-widget-ai-agent-context-summary-footer-circle-animate,
.kk-widget-ai-agent-context-details-footer-circle-animate {
  -webkit-animation-name: kkPulse;
  animation-name: kkPulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.kk-widget-auto-trigger-call-initiated-wrapper {
  position: relative;
  width: 403px;
  padding: 35px 20px 0px 20px;
}

.kk-widget-auto-trigger-call-initiated-content {
  background: linear-gradient(0deg, rgba(64, 233, 225, 1) 0%, rgba(210, 249, 248, 1) 100%);
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
  border-radius: 20px;
  padding: 115px 30px 30px 30px;
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kk-widget-auto-trigger-call-initiated-video-wrapper-outer {
  text-align: center;
  position: absolute;
  top: -18px;
  right: 0;
  left: 0;
}

.kk-widget-auto-trigger-call-initiated-video-wrapper {
  width: 103px;
  height: 103px;
  margin: 0 auto 5px auto;
  position: relative;
}

.kk-widget-auto-trigger-call-initiated-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 2px solid #ff2d2e;
  background-color: #ff2d2e;
  object-position: 0 20%;
}

.kk-widget-auto-trigger-call-initiated-video-wrapper img {
  position: absolute;
  bottom: 10px;
  right: 0;
  left: 0;
  width: 38px;
  max-width: 38px;
  margin: 0 auto;
}

.kk-widget-auto-trigger-call-initiated-video-text {
  font-size: 12px;
  color: #2f2f2f;
  width: auto;
  display: inline-block;
  background: #fff;
  border-radius: 20px;
  border: 2px solid #3ee9e1;
  padding: 6px 25px;
}

.kk-widget-auto-trigger-call-initiated-content-inner {
  background: rgb(255 255 255 / 86%);
  text-align: center;
  padding: 30px;
  border-radius: 20px;
  border: 2px solid #3ee9e1;
}

.kk-widget-auto-trigger-call-initiated-content-text {
  font-size: 16px;
  color: #163236;
  margin: 0;
  margin-bottom: 20px;
}

.kk-widget-auto-trigger-call-initiated-content-controls-wrapper
  .kk-widget-auto-trigger-call-initiated-content-control:first-child {
  margin-bottom: 20px;
}

.kk-widget-auto-trigger-call-initiated-content-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #163236;
  max-width: 175px;
  margin: 0 auto;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  color: #163236;
  cursor: pointer;
  transition: all ease 0.4s;
}

.kk-widget-auto-trigger-call-initiated-content-control svg {
  margin-bottom: 5px;
  transition: all ease 0.4s;
}

.kk-widget-auto-trigger-call-initiated-content-control svg path,
.kk-widget-auto-trigger-call-initiated-content-control svg rect {
  transition: all ease 0.4s;
}

.kk-widget-auto-trigger-call-initiated-content-control:hover {
  color: #ffffff;
  background: #163236;
}

.kk-widget-auto-trigger-call-initiated-content-control:hover svg path,
.kk-widget-auto-trigger-call-initiated-content-control:hover svg rect {
  fill: #ffffff;
}

.kk-widget-chat-v2-during-call .kk-widget-chat-v2-wrapper .kk-widget-chat-v2-wrapper-inner {
  height: calc(100% - 285px);
}

.kk-mini-v2-widget-recent-message-wrapper {
  border: 1px solid #b7b7b7;
  padding: 5px 13px;
  width: 100%;
  max-width: 272px;
  margin: 0 25px 10px auto;
  background: #fff;
  border-radius: 8px 8px 2px 8px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
  display: none;
  position: relative;
  z-index: 99999;
}

.kk-mini-v2-widget-recent-message-head {
  text-align: end;
  margin-bottom: -10px;
}

.kk-mini-v2-widget-recent-message-head img {
  cursor: pointer;
}

.kk-mini-v2-widget-recent-message {
  font-size: 14px;
  color: #000;
  max-width: 280px;
  padding-bottom: 5px;
}

@media (max-width: 992px) {
  .kk-widget-calling-controls .kk-control.kk-screen-share {
    visibility: hidden;
    opacity: 0;
  }
}

@media (max-width: 500px) {
  .kk-mini-widget-new-message .kk-mini-v2-widget-recent-message-wrapper {
    display: block;
    max-width: 320px;
  }

  .kk-mini-widget-new-message .kk-mini-v2-widget:hover .kk-greetings-wrapper-v2 .kk-widget-call-animation {
    animation: none !important;
  }

  .kk-mini-widget-new-message .kk-mini-v2-widget:hover .kk-greetings-wrapper-v2 .kk-mini-v2-widget-cross-icon {
    display: none;
  }

  .kk-mini-v2-widget-cross-icon {
    opacity: 1;
  }
}

.blur-video {
  filter: blur(8px);
  border-radius: 20px 20px 0 0;
  transition: filter 0.3s ease;
}

.kk-widget-calling-controls-large-chat.un-active img {
  filter: invert(1) brightness(8);
}

#kk-iframe-container {
  max-height: 100vh;
}

#kk-iframe-container iframe {
  border: none;
  height: 610px;
  max-height: calc(100vh - 7px);
}

.kk-widget-wrapper video {
  visibility: visible;
}

/* 

AI Calling Screens Styles Start 

*/

.kk-ai-calling-screen-content-wrapper {
  width: 333px;
  height: 484px;
  background-color: #163236;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 0px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin-left: auto;
}

.kk-ai-calling-screen-wrapper .kk-widget-down-arrow {
  margin: 0 10px 0px auto;
  display: none;
}

.kk-ai-calling-screen-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 13px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 9999;
}

.kk-ai-calling-screen-head img {
  cursor: pointer;
}

.kk-ai-calling-screen-head-title-wrapper {
  display: flex;
  align-items: center;
}

.kk-ai-calling-screen-head-title-wrapper img {
  width: 23px;
  margin-right: 10px;
}

.kk-ai-calling-screen-head-title {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

.kk-ai-calling-controls-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px 15px 15px 15px;
  border-top: 1px solid #224d53;
}

.kk-ai-calling-controls-wrapper .kk-ai-calling-voice-visualizer {
  padding: 0px 20px;
}

.kk-ai-calling-control,
.kk-ai-calling-control-call-end {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease 0.4s;
}

.kk-ai-calling-control,
.kk-ai-calling-control * {
  cursor: pointer;
}

.kk-ai-calling-control.kk-ai-calling-control-active {
  background: #fff;
}

.kk-ai-calling-control-call-end {
  background: #c61c1c;
  cursor: pointer;
}

.kk-ai-calling-control-call-end * {
  cursor: pointer;
}
.kk-ai-calling-control.kk-ai-calling-control-mic .kk-ai-calling-control-active-icon {
  display: none;
}
.kk-ai-calling-control.kk-ai-calling-control-mic .kk-ai-calling-control-unactive-icon {
  display: block;
}
.kk-ai-calling-control.kk-ai-calling-control-active .kk-ai-calling-control-unactive-icon {
  display: none;
}

.kk-ai-calling-control .kk-ai-calling-control-unactive-icon {
  display: none;
}

.kk-ai-calling-control.kk-ai-calling-control-active .kk-ai-calling-control-active-icon {
  display: block;
}

.kk-ai-calling-screen-content-wrapper {
  display: flex;
  flex-direction: column;
}

.kk-ai-calling-screen-content-inner-wrapper {
  flex: 1;
  overflow: hidden;
}

.kk-ai-calling-screen-content-inner-wrapper .kk-ai-calling-chat-active .kk-ai-calling-ai-voice-visualizer #remoteWave {
  max-width: 40%;
}

.kk-ai-calling-screen-content-inner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  transition: all ease 0.4s;
}

.kk-ai-calling-ai-voice-visualizer {
  width: 160px;
  height: 160px;
  border: 1px solid #3fe8e1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease 0.4s;
}

.kk-ai-calling-form-head {
  font-size: 14px;
  font-weight: bold;
  color: #ffff;
  text-align: center;
  max-width: 240px;
  margin: 0 auto;
  padding-bottom: 10px;
}

.kk-ai-calling-form {
  background: #e7fffc;
  border-radius: 10px;
  padding: 10px;
  max-width: 270px;
  margin: 0 auto;
}

.kk-ai-calling-form-input {
  border: 1px solid #d6d6d6 !important;
  font-size: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  border-radius: 10px !important;
  padding: 9px !important;
  outline: none !important;
  color: #2f2f2f !important;
  transition: all ease 0.4s !important;
}

.kk-ai-calling-form-input:focus {
  border: 1px solid #163237 !important;
}

.kk-ai-calling-form-input::-webkit-input-placeholder {
  color: #707070 !important;
}

.kk-ai-calling-form-input::-moz-placeholder {
  color: #707070 !important;
}

.kk-ai-calling-form-input:-ms-input-placeholder {
  color: #707070 !important;
}

.kk-ai-calling-form-input:-moz-placeholder {
  color: #707070 !important;
}

.kk-ai-calling-form-btn {
  background: #707070;
  border-radius: 10px;
  margin-top: 5px;
  padding: 11px;
  font-size: 12px;
  line-height: 12px;
  color: #d6d6d6;
  text-align: center;
  transition: all ease 0.4s;
  cursor: pointer;
}

.kk-ai-calling-form-input:focus ~ .kk-ai-calling-form-btn {
  background: #163237 !important;
}

.kk-ai-calling-screen-content-inner.kk-ai-calling-screen-content-response {
  justify-content: flex-start;
  padding-top: 20px;
}

.kk-ai-calling-chat-active.kk-ai-calling-screen-content-inner.kk-ai-calling-screen-content-response,
.kk-ai-calling-chat-active.kk-ai-calling-screen-content-inner {
  padding-top: 0;
  justify-content: flex-start;
}

.kk-ai-calling-screen-content-response .kk-ai-calling-ai-voice-visualizer {
  width: 262px;
  height: 58px;
  border-radius: 20px;
  margin-top: 20px;
}

.kk-ai-calling-response {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  box-shadow: none;
  transition: max-height 1s ease, opacity 1s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: max-height, opacity, transform, box-shadow;
}

.kk-ai-calling-response.kk-ai-calling-response-visible {
  margin-top: 50px;
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.kk-ai-calling-product-wrapper {
  position: relative;
  display: flex;
  max-width: 270px;
  background-color: #fff;
  border-radius: 20px;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 15px 10px;
  box-sizing: border-box;
  margin: 0 auto;
  flex-direction: column;
  height: auto;
  max-height: 206px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.kk-ai-calling-product-wrapper img {
  max-width: 63px;
  transition: all ease 0.4s;
}

.kk-ai-calling-product {
  display: flex;
  gap: 20px;
  position: relative;
  width: 100%;
}

.kk-ai-calling-product-link:hover img {
  transform: rotate(30deg);
}

.kk-ai-calling-product-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 19px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #2f2f2f;
  padding-right: 20px;
  max-width: 185px;
}

.kk-ai-calling-product-id {
  font-size: 12px;
  color: #163236;
}

.kk-ai-calling-product-price {
  font-size: 18px;
  font-weight: bold;
  color: #2f2f2f;
  margin-top: 8px;
}

.kk-ai-calling-product-link {
  display: block;
  position: absolute;
  right: 10px;
  bottom: 5px;
  cursor: pointer;
}

.kk-ai-calling-product-link * {
  cursor: pointer;
}

.kk-ai-calling-chat-transcript-wrapper {
  width: 310px;
  background: #fff;
  border-radius: 20px;
  height: 320px;
  padding: 10px;
  box-sizing: border-box;
  transition: all ease 0.4s;
  transform: translateY(110%);
  position: absolute;
  bottom: 5px;
}

.kk-ai-calling-screen-content-inner.kk-ai-calling-chat-active .kk-ai-calling-chat-transcript-wrapper {
  transform: translateY(0%);
}

.kk-ai-calling-chat-transcript-message {
  border-radius: 10px;
  padding: 15px;
  max-width: 80%;
  margin-bottom: 10px;
}

.kk-ai-calling-chat-transcript-message-title {
  font-size: 12px;
  font-weight: bold;
  color: #2f2f2f;
}

.kk-ai-calling-chat-transcript-message-text {
  font-size: 14px;
  color: #707070;
}

.kk-ai-calling-chat-transcript-message.kk-ai-calling-chat-transcript-message-user {
  background: #163237;
  margin: 0 0 10px auto;
}

.kk-ai-calling-chat-transcript-message.kk-ai-calling-chat-transcript-message-user
  .kk-ai-calling-chat-transcript-message-title,
.kk-ai-calling-chat-transcript-message.kk-ai-calling-chat-transcript-message-user
  .kk-ai-calling-chat-transcript-message-text {
  color: #ffffff;
}

.kk-ai-calling-chat-active .kk-ai-calling-response.kk-ai-calling-response-visible,
.kk-ai-calling-chat-active .kk-ai-calling-response-visible {
  margin-top: 0;
}

.kk-ai-calling-screen-content-inner.kk-ai-calling-screen-content-response.kk-ai-calling-chat-active
  .kk-ai-calling-ai-voice-visualizer,
.kk-ai-calling-screen-content-inner.kk-ai-calling-chat-active .kk-ai-calling-ai-voice-visualizer {
  width: 131px;
  height: 27px;
  border-radius: 20px;
  margin: 0 15px 15px auto;
}

.kk-ai-calling-screen-content-inner.kk-ai-calling-chat-active .kk-ai-calling-ai-voice-visualizer img {
  width: 55px;
  margin: 0 auto;
}

.kk-ai-calling-chat-transcript-messages {
  overflow: auto;
  height: 260px;
}

.kk-ai-calling-chat-transcript-form {
  display: flex;
  width: 100%;
  position: relative;
  border: 1px solid #d6d6d6;
  border-radius: 20px;
  padding: 0px 5px;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
  transition: all ease 0.4s;
}

.kk-ai-calling-chat-transcript-form.kk-ai-calling-chat-transcript-form-focused {
  border: 1px solid #2f2f2f;
}

.kk-ai-calling-chat-transcript-form-input {
  width: 100% !important;
  border: none !important;
  padding: 0px 10px !important;
  height: auto !important;
  font-size: 14px !important;
  outline: none !important;
  color: #2f2f2f !important;
}

.kk-ai-calling-chat-transcript-form-btn svg {
  width: 35px;
  transition: all ease 0.4s;
}

.kk-ai-calling-chat-transcript-form-btn svg circle {
  transition: all ease 0.4s;
}

.kk-ai-calling-chat-transcript-form.kk-ai-calling-chat-transcript-form-focused
  .kk-ai-calling-chat-transcript-form-btn
  svg
  circle {
  fill: #2f2f2f;
}

/* 

AI Calling Screens Styles End 

*/

.kk-widget-wrapper.kk-widget-wrapper-left .chat-screen-arrow-down,
.kk-widget-chat-v2-main-wrapper.kk-widget-wrapper-left .chat-screen-arrow-down {
  justify-content: flex-start;
}

.kk-widget-wrapper.kk-widget-wrapper-left .kk-ai-calling-screen-wrapper .kk-widget-down-arrow {
  margin: 0px auto 0px 20px;
}

.kk-widget-wrapper.kk-widget-wrapper-left .kk-mini-sticky-v2-widget-content-wrapper {
  margin: 0 auto 0 15px;
}

.kk-recording-active-wrapper {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  margin-right: 8px;
  padding: 6px;
}

.kk-recording-active-wrapper .kk-recording-active {
  background: #eb423f;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
}

.kk-widget-chat-v2-during-call-content-head-controls .kk-recording-active-wrapper {
  background: rgba(0, 0, 0, 0.4);
}

.kk-head-larger-screen-btn-controls .kk-recording-active-wrapper,
.kk-widget-chat-v2-during-call-content-head-controls .kk-recording-active-wrapper {
  margin-right: 0px;
  width: 30px;
  height: 30px;
  padding: 8px;
}

.kk-chat-bubble-container {
  position: relative;
  display: inline-block;
  background: #163236;
  color: white;
  padding: 9px 25px;
  border-radius: 30px;
  border: 1px solid #3ee9e1;
  font-size: 14px;
  max-width: 260px;
  min-width: 85px;
  text-align: center;
}

.kk-chat-bubble-container::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 34px;
  width: 20px;
  height: 20px;
  background: #163236;
  border-left: 1px solid #3ee9e1;
  border-bottom: 1px solid #3ee9e1;
  transform: rotate(315deg);
  z-index: 1;
}

.kk-chat-bubble-wrapper {
  position: absolute;
  top: 46px;
  left: 27px;
  cursor: pointer;
}

.kk-chat-bubble-wrapper.ai-chat-bubble-wrapper-audio {
  top: -50px;
  left: 38px;
}

.kk-widget-calling-controls-large-screen .kk-chat-bubble-wrapper {
  top: -60px;
  left: 2px;
}

.kk-chat-bubble-wrapper.ai-chat-bubble-wrapper-audio .kk-chat-bubble-container {
  min-width: 132px;
}

.kk-chat-bubble-wrapper.ai-chat-bubble-wrapper-audio .kk-chat-bubble-container::after {
  left: 58px;
}

.kk-chat-bubble-wrapper * {
  cursor: pointer;
}

.kk-chat-bubble-recent-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-trigger-v2-widget-wrapper {
  display: flex;
  gap: 5px;
  width: 425px;
  max-width: 100%;
}

.auto-trigger-v2-widget-wrapper .auto-trigger-v2-widget-video {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}

.auto-trigger-v2-widget-wrapper .auto-trigger-v2-widget-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  object-position: top;
}

.auto-trigger-v2-widget-content-wrapper {
  display: flex;
  background-color: #163236;
  border-radius: 50px;
  padding: 6px 7px 6px 15px;
  align-items: center;
  min-width: 380px;
  max-width: 80%;
  justify-content: space-between;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  border: 1px solid #2feae2;
}

.auto-trigger-v2-widget-content-wrapper .auto-trigger-v2-widget-text {
  color: #2feae2;
  font-size: 12px;
  font-weight: 600;
}

.auto-trigger-v2-widget-content-wrapper .auto-trigger-v2-widget-controls {
  display: flex;
  gap: 5px;
  transition: all ease 0.4s;
  width: 57px;
  overflow: hidden;
}

.auto-trigger-v2-widget-content-wrapper
  .auto-trigger-v2-widget-controls.auto-trigger-v2-widget-controls-active-counter {
  width: auto;
}

.auto-trigger-v2-widget-content-wrapper .auto-trigger-v2-widget-controls img {
  cursor: pointer;
}

.kk-widget-auto-trigger-call-wrapper-outer {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translate(-50%, 100%);
  transition: transform ease 2s;
  opacity: 0;
}

.kk-auto-connect-timer-container {
  position: relative;
  width: 26px;
  height: 26px;
}

.kk-auto-connect-timer-container svg {
  transform: rotate(-90deg);
}

.kk-auto-connect-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 2;
}

.kk-auto-connect-circle-progress {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 75.4;
  stroke-dashoffset: 75.4;
}

.kk-auto-connect-timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #ffffff;
  font-weight: bold;
  user-select: none;
}

.auto-trigger-v2-widget-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #003b3b;
  border-radius: 20px;
  width: max-content;
  transition: all 0.4s ease;
  overflow: hidden;
}

.auto-trigger-v2-widget-controls-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.4s ease;
}

.kk-auto-connect-timer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.4s ease;
}

.auto-trigger-v2-widget-controls.auto-trigger-v2-widget-controls-active-counter .kk-auto-connect-timer-container {
  opacity: 1;
  transform: translateX(0);
}

.kk-bubble-widget-wrapper {
  width: 57px;
  height: 57px;
  background-color: var(--bs-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 0 20px 20px auto;
}

.kk-widget-wrapper-left .kk-bubble-widget-wrapper {
  margin: 0 auto 20px 20px;
}

.kk-widget-wrapper.kk-sticky-widget-wrapper {
  width: 90px;
}

@media (max-width: 500px) {
  .auto-trigger-v2-widget-wrapper {
    width: 325px;
  }

  .auto-trigger-v2-widget-content-wrapper {
    min-width: 280px;
  }
}

.kk-chat-system-message .kk-widget-chat-v2-agent-inchat .kk-widget-chat-v2-agent-detail-inchat p:last-child {
  display: none;
}

.kk-widget-chat-receiver.kk-widget-loader {
  background: #f7f7f7;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  width: 55px;
}

.kk_system_message {
  color: #2f2f2f;
}

.kk-blue-background {
  background-color: #2ea2ff;
}

.kk-purple-background {
  background-color: #972eff;
}

.kk-green-background {
  background-color: #0f4c04;
}

.kk-orange-background {
  background-color: #eb8342;
}

.kk-widget-audio-calling-connection-agent-thumb-image .member-short-name,
.kk-widget-audio-calling-connection-agent-thumb-chat-img .member-short-name {
  width: 65px !important;
  height: 65px !important;
  border-radius: 50%;
}

.kk-widget-audio-calling-connection-agent-thumb-image .member-short-name p,
.kk-widget-audio-calling-connection-agent-thumb-chat-img .member-short-name p {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 20px;
}

.kk-widget-chat-receiver.kk-chat-bot-message .kk-agent-message-main-wrapper {
  background: linear-gradient(325deg, #f2fffd 0%, #ebfeff 24.44%, #fff 100%) !important;
  border: 0.5px solid #3fe8e1;
}

.kk-widget-chat-receiver.kk-chat-bot-message .kk-agent-message-main-wrapper a {
  color: #2f2f2f !important;
}

.kk-ai-response-products-wrapper {
  margin: 22px 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.kk-ai-response-products-carousel {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  cursor: grab;
  position: relative;
}

.kk-ai-response-products-carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.kk-ai-response-products-carousel::-webkit-scrollbar {
  display: none;
}

.kk-ai-response-products-carousel * {
  cursor: grab;
}

.kk-ai-response-products-carousel.kk-ai-response-products-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.kk-ai-response-products-card {
  flex: 0 0 100%;
  max-width: 100%;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
  text-align: center;
}

.kk-ai-response-products-card .kk-ai-response-products-title {
  font-size: 14px;
  color: #2f2f2f;
  margin-top: 5px;
  margin-bottom: 0px;
}

.kk-ai-response-products-card .kk-ai-response-products-price {
  font-size: 14px;
  color: #2f2f2f;
  margin-bottom: 0px;
  font-weight: bold;
}

.kk-ai-response-products-card a {
  display: block;
  color: #fff;
  font-size: 14px;
  background: #163236;
  border-radius: 5px;
  text-decoration: none;
  max-width: 160px;
  margin: 5px auto 15px auto;
  padding: 5px;
  cursor: pointer;
}

.kk-ai-response-products-card img {
  max-width: 210px;
  width: 210px;
  height: 190px;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  user-select: none;
  cursor: default;
}

.kk-ai-response-products-arrow {
  position: absolute;
  top: 0;
  cursor: pointer;
  display: none;
  z-index: 10;
  height: 100%;
  background: linear-gradient(to right, transparent, #ffffff 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 45px;
}

.kk-ai-response-products-arrow.kk-ai-response-products-left {
  left: 0px;
  background: linear-gradient(to left, transparent, #ffffff 80%);
}

.kk-ai-response-products-arrow.kk-ai-response-products-left img {
  transform: rotate(180deg);
}

.kk-ai-response-products-arrow.kk-ai-response-products-right {
  right: 0px;
}

.kk-ai-response-products-carousel.kk-ai-response-products-multiple .kk-ai-response-products-card {
  flex: 0 0 211px;
  max-width: 210px;
  max-height: 280px;
  margin: 0 4px;
}

.kk_company_main_video_calling-for-audio-call .member-short-name {
  width: 125px;
  height: 125px;
  border-radius: 50%;
}

.kk_company_main_video_calling-for-audio-call img {
  width: 125px !important;
  height: 125px !important;
  border-radius: 50% !important;
}

.kk_company_main_video_calling-for-audio-call .member-short-name p {
  font-size: 40px;
}

.kk-local-video-player-wrapper .member-short-name {
  width: 80px;
  height: 80px;
  margin: 13px;
}

.kk-local-video-player-wrapper .member-short-name p {
  padding: 0 !important ;
}

.kk_company_main_video_calling-for-audio-call {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.kk-full-screen-activated .kk_company_main_video_calling-for-audio-call {
  height: 100vh;
}
.kk-full-screen-activated .kk-widget-audio-calling-connection-agent-info-wrapper {
  height: 672px;
}
.kk-full-screen-activated .kk-widget-audio-calling-connection-agent-thumb-image .member-short-name {
  height: 150px !important;
  width: 150px !important;
}

.kk-full-screen-activated .kk-widget-audio-calling-connection-agent-thumb-image .member-short-name p {
  font-size: 50px;
}
.kk-ai-response-products-carousel.kk-ai-response-products-multiple .kk-ai-response-products-card:first-child {
  padding-left: 0;
}

.kk-ai-response-products-carousel.kk-ai-response-products-multiple .kk-ai-response-products-card:last-child {
  padding-right: 0;
}
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message ol li ul,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message ul {
  list-style: none;
}
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message ol li ul li img,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message ul li img,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message a img {
  width: 100%;
  height: auto;
  margin: 10px 0;
}
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message ol li ul li a,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message a[rel~='noreferrer'][rel~='noopener'][rel~='nofollow'] {
  font-weight: bold;
  color: #2f2f2f;
  text-decoration: underline;
  cursor: pointer;
}

.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message h1,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message h2,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message h3,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message h4,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message h5,
.kk-widget-chat-receiver.kk-chat-bot-message .kk-widget-message h6 {
  font-size: 14px;
  font-weight: bold;
}

.kk-widget-chat-v2-audio-call #kk-local-video-with-chat {
  display: none;
}

            .kk-widget-chat-receiver .kk-agent-message-main-wrapper {
              background: #f7f7f7 !important;
            }
              
          .kk-widget-chat-receiver .kk-widget-message{
          color: #2f2f2f !important;
            }
          .kk-widget-chat-receiver .kk-agent-message-main-wrapper .kk-widget-message p{
            color: #2f2f2f !important;
          }

            .kk-widget-chat-receiver .kk-agent-message-main-wrapper .kk-agent-info-chat-wrapper p{
            color: #2f2f2f !important;
          }
            
          .kk-widget-chat-sender .kk-widget-message:not(.kk-widget-emoji-only) {
            background: #163236 !important;
            color: #ffffff !important;
          }
            
          .chat-screen-arrow-down-img rect {
            fill: #163236 !important;
          }
           
            .chat-screen-arrow-down-img g path {
              fill: #ffffff !important;
            }
          
            .kk-mini-sticky-v2-widget-content-wrapper {
              background: #2f2f2f !important;
            }
          
            .kk-mini-sticky-v2-widget-content-wrapper span {
              color: #ffffff !important;
            }

            .kk-mini-sticky-v2-widget-chat-icon svg path {
              fill: #ffffff !important;

            }

            .kk-sticky-widget-loading-dots {
              --_g: no-repeat radial-gradient(circle closest-side, #2f2f2f 90%, #0000) !important;
            }

          
            .kk-widget-calling-connection-agent-disconnect-btn {
              background: #fde8f5 !important;
              color: #2f2f2f !important;
            }
            @keyframes kkCallingRed {
              0% { transform: scale(1); }
              15% { box-shadow: 0 0 0 5px #ff000066; } /* 66 = 40% opacity */
              25% { box-shadow: 0 0 0 15px #ff000066, 0 0 0 30px #ff000033; } /* 33 = 20% opacity */
            }
            .kk-mini-v2-widget .kk-widget-call-animation {
              border: solid 1px #ff0000;
            }
          
            .kk-in-chat-connection-request-control{
              background: #ffffff !important;
            } 
            .kk-in-chat-connection-request-control span{
              color: #163236 !important;
            }
           
            .kk-in-chat-connection-request-control svg path,
            .kk-in-chat-connection-request-control svg rect,
            .kk-in-chat-connection-request-control svg g path,
            .kk-in-chat-connection-request-control svg g g path{
              fill: #163236 !important;
            }


        .kk-widget-main-screen-copyright{
        background: #2f2f2f !important;
        }
        .kk-widget-main-screen-copyright p{
        color: #838383 !important;
        }
        .kk-mid-screen-wrapper {
          background: #000000 !important;
        }
        
        .kk-talk-to-human-btn.kk-talk-to-human-btn-active{
          background: #163236 !important;
          color: undefined !important;
        }
          .kk-talk-to-human-btn:hover{
            background: #163236 !important;
            color: undefined !important;
          }
        .chat-screen-arrow-down{
        
        }

       
          .kk-widget-chat-v2-header{
            background: #fff !important;
          }
           
            .kk-company-team-info svg g,
            .kk-company-team-info svg g path,
            .kk-chat-large-screen-icon-v2 g,
            .kk-chat-large-screen-icon-v2 g path,
            .kk-chat-back-to-default-icon-v2 g g path
            {
              fill: #000
            }
            .kk-company-team-name,
            .kk-widget-chat-v2-agent-name{
              color: #000
            }

            .kk-chat-large-screen-icon-v2:hover, .kk-chat-back-to-default-icon-v2:hover {
              background: #000 !important;
            }

            .kk-chat-large-screen-icon-v2:hover g path, .kk-chat-back-to-default-icon-v2:hover g g path {
              fill: #fff !important;
            }
          .kk-widget-chat-v2-header-controls-calling svg rect,
.kk-widget-chat-v2-header-controls-calling svg path,
.kk-widget-chat-v2-header-controls-calling svg g g path {

  fill: #000;
}