.dark-mode .main-chat-footer 
{ 
  border-top: 1px solid var(--dark-border) !important; 
  background-color: #585858 !important; 
}

.dark-mode .main-chat-time::before,
.dark-mode .main-chat-time::after {
  background-color: rgb(107 82 251) !important;
  line-height: 20px !important;
}

.dark-mode .main-chat-body .media.flex-row-reverse .main-msg-wrapper {
    background-color: rgb(53 16 255 / 70%) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-mode .selectgroup-input:checked + .selectgroup-button {
  background-color: var(--primary-bg-color) !important;
}

.offcanvas-end {
  width: 650px !important;
}

.offcanvas#offcanvasChat {
    transition-duration: 0.25s;
}
.expandMeFull {
    width: 70% !important;
}
.expandMeLess {
    width: 35% !important;
}

.cut-text 
{ 
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.select2-container { width:100% !important; }

/*.dark-mode .form-select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23d3d3d3' d='M0 0L4 0L2 3z'/%3E%3C/svg%3E") !important; }*/

body.light-mode.card-body { /*background: #ff0 !important;*/ }

/*ul.select2-selection__rendered {
    padding-right: 30px !important;
}

ul.select2-selection__rendered:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}*/
.select2-container--default .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
}

.select2-container--open .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
}

/***************** new classess added ******************/
.dark-mode .offcanvas-custom {
  background-color: #eaeef3 !important;
}
.text-black-custom {
  color: #495057 !important;
}
.chatbot-border {
    border: 1px solid rgb(107 82 251 / 29%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.border-blue-custom {
  border: 1px solid rgb(107 82 251) !important;
}
.border-blue-custom {
  border: 1px solid rgb(107 82 251) !important;
}
.border-blue-custom:focus {
  border: 1px solid rgb(107 82 251) !important;
}
.color-chat-box {
  background: rgb(107 82 251);
}
.purpleGlow {
  color: #ff0000;
  text-shadow: 0 0 3px #6b52fb;
}

.type {
    color:#0000;
    background:
      linear-gradient(-90deg,#000 5px,#0000 0) 10px 0,
      linear-gradient(#000 0 0) 0 0;
    background-size:calc(var(--n)*1ch) 200%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;
    animation: 
        b .7s infinite steps(1),   
        t calc(var(--n)*.02s) steps(var(--n)) forwards;
  }

  @keyframes t{
    from {background-size:0 200%}
  }
  @keyframes b{
    50% {background-position:0 -100%,0 0}
  }

  .customs-scrollbar {
    scrollbar-face-color: #000000;  
scrollbar-shadow-color: #2D2C4D;  
scrollbar-highlight-color:#7D7E94;  
scrollbar-3dlight-color: #7D7E94;  
scrollbar-darkshadow-color: #2D2C4D;  
scrollbar-track-color: #7D7E94;  
scrollbar-arrow-color: #C1C1D1;
  }

  .radius-tlr-20
  {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }

  .radius-blr-20
  {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }

  .select2-container--open { 
    z-index: 99999 !important;
}

.datepicker{ z-index:4000 !important; }

.dark-mode .nav.panel-tabs a.active { background: var(--primary-bg-color) !important; }

.nav.panel-tabs a.active { border-radius: 20px; }

.nav.panel-tabs a { border-radius: 20px; }

.my-hover-border:hover 
{ 
  /*border-color: var(--primary-bg-color) !important;*/ 
  box-shadow: 0px 0px 15px black !important;
  -moz-box-shadow: 0px 0px 15px black !important; 
  -webkit-box-shadow: 0px 0px 15px black !important;
}

.my-hover-border-darkslategray:hover 
{ 
  /*border-color: var(--primary-bg-color) !important;*/ 
  box-shadow: 0px 0px 10px darkslategray !important;
  -moz-box-shadow: 0px 0px 10px darkslategray !important; 
  -webkit-box-shadow: 0px 0px 10px darkslategray !important;
}

.dark-mode .nav.panel-tabs a.active {
  color: #1e2225 !important;
}

/********** add topic popup ******/
.bg-primary-custom-blue {
  background: #1e2225;
}

.bg-primary-custom-white {
  background: #ffffff;
}

.create-popup-width {
  width: 43% !important;
  margin: 0 auto;
  height: 360px;
   
}
@media screen and (min-width: 480px) {
  .create-popup-width {
    width: 90% !important;
   
  }
}

.disable-tab 
{
  pointer-events: none;
}

.bin-buttons {
  display: flex;
  justify-content: flex-end;
  /*margin: 10px 20px;*/
  gap: 8px;
}
.bin-buttons button {
  padding: 6px 12px;
  border: none;
  background: #eee;
  cursor: pointer;
}
.bin-buttons button.active {
  background: #333;
  color: #fff;
}