html, body, .chat, .chat .container{height: 100%}

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}
.nrtickets{
  font-size: 12px;
  background: #8fc53c;
  padding: 4px 7px 3px 6px;
  border-radius: 50px;
  color: #fff;
  }

.alert-warning {
    color: #a06000;
}

.input-group:focus-within {
  box-shadow: none;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #000000;
  background: -webkit-linear-gradient(45deg, #2efff521, #3836ff42) !important;
}

.btn-color{
  background: linear-gradient(118deg, #4947ff, #42d3cc) !important;
  border: 0;
  box-shadow: none;
  color: #fff;
  height: 40px;
  padding-top: 10px;
}

.btn-color:hover{
  color: #fff;  
}

.hand{cursor: pointer}

.errorInput {
  background: #fffee8;
  transition: background 0.5s ease-out; /* Smooth transition */
}
.bx-envelope-open{
  color: #7ed4ff;
}

@keyframes fadeOut {
  0% {
    background: #fffee8;
  }
  100% {
    background: transparent;
  }
}

.fadeOutAnimation {
  animation: fadeOut 5s forwards; /* Trigger fade-out over 5 seconds */
}


.table-responsive .table{table-layout: fixed;}

.table-responsive .btn-sm, .table-responsive .btn-group-sm > .btn {
  padding: 4px 9px 0px;
  font-size: 1rem;
}

.input-error{border: 1px solid #f00;}

.text-right { text-align: right;}
.text-left { text-align: left;}

.user a{color:#ccc}
.user a:hover{color:#fff}

.links { height: 500px; overflow-y: scroll; overflow-x: hidden;}
.chattopicon { font-size: 1.45rem !important; }
.chatbot{
	border: none;
	background: #f1f1f1;
	border-radius: 20px;
  text-align: left;
  max-width: 80%;
  font-size: 15px;
  z-index: 1;
}

.chatbot p a{
  background: #d9d9d9;
  padding: 2px 5px;
  border-radius: 6px;
}

.chatbot h1, h2, h3, h4 {
  font-size: 16px !important;
  font-weight: 700;
}

.chatbot p a:hover{
  text-decoration: underline;
}

.usermessage p, .chatbot p{
  margin-bottom: 0;
}


#generatedWarning{
  position: relative;
  z-index: 0;
}

.chat #question{background: #f0f2f5;}
.onchat-status {
  position: absolute;
  width: 11px;
  height: 11px;
  left: 22px;
  bottom: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #10de00;
}

.user{
  color: #ffffff;
	font-size: 15px;
	border-radius: 20px;
  max-width: 60%
}
.floaticon {
  float: right;
  position: absolute;
  right: 100px;
  bottom: 30px;
}

#ask, #subscribe{border-top-right-radius: 0.5rem!important; border-bottom-right-radius: 0.5rem!important;}
#ask{box-shadow: none!important; }

#closelead{position: absolute;
    top: -25px;
    right: -30px;
    background: #ffffff;
    width: 30px;
    height: 30px;
    display: flex;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    align-items: center;
    justify-content: center;}

.bigcolor{
  font-size: 1.8rem!important;
  background: -webkit-linear-gradient(45deg, #2efff5, #3836ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-detached {
    box-shadow: 0 0 1rem 0.25rem rgba(161, 172, 184, 0.05);
}

.copied {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  color: #71dd37;
}
.copiedgdpr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  color: #71dd37;
}
.delitem i {
  color: #ff0000;
  cursor: pointer;
}

/*.chat-messages {
  height: 65vh;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: inset 0px 11px 8px -10px rgba(0,0,0,0.03), inset 0px -11px 8px -10px rgba(0,0,0,0.03);
  width: 100%;
}*/
.chat-messages img{
  max-width: 60%;
  border-radius: 5px;
}

.messages {
  height: 470px;
  max-height: 470px;
  overflow-y: scroll;
  overflow-x: hidden;
  /*box-shadow: inset 0px 11px 8px -10px rgba(0,0,0,0.03), inset 0px -11px 8px -10px rgba(0,0,0,0.03);*/
  box-shadow: inset 0 -20px 40px 0px rgba(0, 0, 0, 0.03), inset 0px -11px 8px -10px rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 69%;
}
.messages img{
  max-width: 60%;
  border-radius: 5px;
}
.messages ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.messages ul li{
/*  width: 25%;*/
  width: 100%;
  display: inline-block;
  margin: 5px;
  
  background: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
}
.messages ul li img{
  object-fit: cover;
  height: 180px;
  width: 100%;
  max-width: 100%;
  padding: 10px;
  background: #fff;
  border-radius: 20px;
}

.quickprompts ul {
  margin-left: 10px;
  padding: 0;  
}

.quickprompts ul li {
  width: auto;
  list-style: none;
  display: inline-block;
  border: none;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  color: #6d7a8b;
  margin: 5px;
}

.quickprompts ul li:hover {
  background: #f1f1f1;
}

.offline {
  height: 490px;
  max-height: 490px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: inset 0px 11px 8px -10px rgba(0,0,0,0.03), inset 0px -11px 8px -10px rgba(0,0,0,0.03);
}
.avatar i {
  font-size: 2rem !important;
}
#cityStatisticsChart {
  margin-left: auto;
  margin-right: auto;
}
.buttons {
      margin: 5px 0 -10px 0;
    padding: 0 15px !important;
  /*overflow-y: hidden;
  overflow-x: auto;*/
  /*box-shadow: 0px -5px 10px 0px rgba(0,0,0,0.05);*/
}
.buttons ul{
  display: flex!important;
  align-items: center;
}
.buttons ul li a {
  background: #f1f1f1;
  white-space: nowrap;
  border-radius: 15px;
  padding: 5px 15px;
}
.buttons ul li a:hover{
  background: #ddd;
}

.buttons::-webkit-scrollbar, #messages::-webkit-scrollbar {
  width: 0.6em;
  height: 0.6em;
}

.buttons::-webkit-scrollbar-thumb, #messages::-webkit-scrollbar-thumb {
  background: #cccccc;
  outline: 0;
  border-radius: 10px;
}

.buttons::-webkit-scrollbar-thumb:hover, #messages::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}
.passwordbox {
  margin-left: auto !important;
  margin-right: auto !important;
}
#refresh, #close, #getorderstatus, #taktohuman {
  cursor: pointer;
}
/*#powered{font-size: 13px; text-align: right; padding: 8px 0 5px; margin-right: 10px; }*/
#powered {
    font-size: 12px;
    text-align: center;
    padding: 8px 0 5px;
    margin-right: 10px;
}
.productcard { width: 14rem; border: 1px solid #f1f1f1; border-radius: 20px; }
.productcardbody { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;  background-color: #f1f1f1; padding: 15px !important; }


.inputError{border:1px solid #f00}
.integrationimg { width: 32px; }
.integrationimggray { width: 32px; filter: grayscale(100%); }
.platform { line-height: 2;}


.truncate-text {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-app {
  height: 100%;
  min-height: 80vh;
  width: 100%;
}

/*scrollbar formatting*/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc; 
  border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888; 
}
/*scrollbar formatting end*/

#loader{text-align: center}

.chat-app .people-list {
  height: 90%;
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  padding: 0 20px;
  z-index: 7;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 30%;
}

.chat-app iframe {
  margin-left: 30%;
  border-left: 1px solid #eaeaea !important;
  border: none; 
  height: 83vh;
}

.people-list {
  -moz-transition: .5s;
  -o-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s
}

.people-list .chat-list li {
  padding: 10px 15px;
  list-style: none;
  border-radius: 3px
}

.people-list .chat-list li:hover {
  background: #f1f1f1;
  cursor: pointer
}

.people-list .chat-list li.active {
  background: #f1f1f1
}

.people-list .chat-list li a.active {
  background: #f1f1f1
}

.people-list .chat-list li .name {
  font-size: 15px
}

.people-list .chat-list img {
  width: 45px;
  border-radius: 50%
}

.people-list img {
  float: left;
  border-radius: 50%
}

.people-list .about {
  float: left;
  padding-left: 8px
}

.people-list .status {
  color: #999;
  font-size: 13px
}

/*.chat .chat-messages, .chat .chat-history{
  height: calc(100vh - 160px);
}*/

.chat .chat-history {
  height: calc(100vh - 160px);
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: inset 0px 11px 8px -10px rgba(0,0,0,0.03), inset 0px -11px 8px -10px rgba(0,0,0,0.03);
  width: 100%;
}

.chat .chat-header {
  padding: 15px 20px;
  border-bottom: 2px solid #f1f1f1
}

.chat .chat-header img {
  float: left;
  border-radius: 40px;
  width: 40px
}

.chat .chat-header .chat-about {
  float: left;
  padding-left: 10px
}

.chat .chat-history {
/*  padding: 20px;*/
  border-bottom: 2px solid #fff;
/*  height: 70vh;*/
}


.chat .chat-message {
  padding: 20px
}

.online,
.offline,
.me {
  margin-right: 2px;
  font-size: 14px;
  vertical-align: middle
}

.online {
  color: #86c541
}

.offline {
  color: #e47297
}

.me {
  color: #1d8ecd
}

.float-right {
  float: right
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0
}
/* .card{height: 90%} */

.dashboard-bot{bottom: 20px}

@media (min-width: 487px) {
  #backArrow { display: none; }
}

@media (max-width: 768px) {
  .chat-app .people-list {
    height: auto;
    width: 45%;
    padding: 10px;
    overflow-x: auto;
    background: #fff;
  }
  .messages {
    /*max-height: 70vh;*/
    /*height: 290px;*/
    height: 80%;
  }
  .chat-app iframe{
    margin-left: 45%;
  }
  .chat-app .people-list.open {
    left: 0
  }
  .chat-app .chat {
    margin: 0
  }
  .chat-app .chat .chat-header {
    border-radius: 0.55rem 0.55rem 0 0
  }
  .chat-app .chat-history {
    height: 400px;
    overflow-x: auto
  }
  .messages ul li{
/*    width: 40%;*/
    width: 100%;
    margin: 6px;
  }
  .quickprompts ul li {
    width: auto;
  }
  .messages ul li img{
    object-fit: cover;
    height: 120px;
    padding: 5px;
    border-radius: 15px;
  }
  .table-responsive .table{table-layout: auto;}
  .dashboard-bot{bottom: 0; top: -50px;}
  .card-body {
    padding: 1.5rem 1.2rem;
  }
}

@media (max-width: 486px) {
  .chat-app .people-list {
    width: 100%;
    top: 0;
    bottom: 0;
  }
  .chat-app .people-list.toLeft{
    left: -110%;
  }
  .chat-app iframe {
    margin-left: 0;
    border: 0;
  }
  #backArrow{
    display: block;
    position: absolute;
    top: 30px;
    left: 20px;
    font-size: 24px;

  }
  .chat .chat-history {
    height: calc(100vh - 200px);
  }
}

/*
@media only screen and (min-width: 768px) and (max-width: 992px) {
  /*.chat-app .chat-list {
      height: 650px;
      overflow-x: auto
  }* /
  .chat-app .chat-history {
      height: 600px;
      overflow-x: auto
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  /*.chat-app .chat-list {
      height: 70vh; 
      max-height: 70vh;
      overflow-x: auto
  }* /
  .chat-app .chat-history {
      height: calc(100vh - 350px);
      overflow-x: auto
  }
}

*/
.ui-autocomplete {
  display: block;
  position: absolute;
  z-index: 1050;
  width: calc(80% + 2px) !important;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #ddd;
  border-radius: .25rem;
  background-color: #fff;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  margin-left: 0 !important; /* Remove left margin */
}
.ui-menu-item {
  padding: .5rem 1rem;
  cursor: pointer;
}
.ui-menu-item:hover {
  background-color: #f8f9fa;
}
.autocomplete-wrapper {
  position: relative; /* Ensure the autocomplete menu is positioned relative to the input */
}

#hiddenframe { 
  display: none; 
}


/*icons*/

.aspect_ratio input[type="radio"], #style input[type="radio"] {
  display: none; /* Hide the radio button */
}

.aspect_ratio .style-radio{
  min-width: 18%;
}

#imageGenerate .aspect_ratio .style-radio{
  min-width: 24%;
}

.style-radio{
  display: inline-block;  
}

.style-radio label{
  cursor: pointer;
  margin: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #d9dee3;
  transition: background-color 0.3s, border-color 0.3s;
  display: flex;
  align-items: center;
}

#style label:hover, .style-radio input[type="radio"]:checked + label{
  background-color: #eee;
  border: 1px solid #222;
}

.square-icon{
  width: 15px;
  height: 15px;
  border: 2px solid #6e7f91;
}
.portrait-icon{
  width: 10px;
  height: 15px;
  border: 2px solid #6e7f91;
  margin-right: 0.6rem!important;
}
.landscape-icon{
  width: 15px;
  height: 10px;
  border: 2px solid #6e7f91;
}
.bold { font-weight: bold; }

[data-tooltip] {
  position: relative;
  z-index: 100;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -50px;
  padding: 7px;
  width: 100px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #233446;
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #233446;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.success{
	border: none;
	background: #d4edda;
	border-radius: 20px;
  text-align: left;
  max-width: 80%;
  font-size: 15px;
  z-index: 1;
  color: #155724;
  padding: 20px;
}

.success p a{
  background: #155724;
  padding: 2px 5px;
  border-radius: 6px;
}

.error{
	border: none;
	background: #f8d7da;
	border-radius: 20px;
  text-align: left;
  max-width: 80%;
  font-size: 15px;
  z-index: 1;
  color: #721c24;
  padding: 20px;
}

.error p a{
  background: #721c24;
  padding: 2px 5px;
  border-radius: 6px;
}

.offilemessages {
  height: 380px !important;
  max-height: 380px !important;
}
.productlist { margin-top: 20px; margin-bottom: 20px; }
/*.productlist .product { display: block; border}*/
.productlist .product {
    display: block;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.productlist .image { float: left; width:70px; margin-bottom: 10px;}
.product .image img{ object-fit: cover; height: 70px; max-width: 70px; margin-right: 10px;}
.productlist .details { margin-left: 10px; padding-left: 80px;}


.client_name{
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}