.dropdown-toggle::after {
  display: none !important;
}

.ng-option:empty,
.ng-option:has(:empty:only-child:not(img)),
.ng-option[style*="display: none"] {
  display: none !important;
}

/* Hide ng-options that contain only whitespace */
.ng-option:has(span:empty) {
  display: none !important;
}

/* Hide options with no visible content */
.ng-option:has(*[hidden]),
.ng-option:has(*[style*="display: none"]:only-child) {
  display: none !important;
}

@keyframes spinner {
    0% {
      transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
  }
  .hide{
display: none;
  }

  .app-header {
    z-index: 100!important;
    position: fixed!important;
    left: 0!important;
    right: 0!important;
    top: 0!important;
}

quill-editor .ql-container.ql-snow{
  height: 80%!important;
}


.user-serach-image{
  border-radius: 50% !important;
  margin-right: .5rem !important;
  height: 50px !important;
  width: 50px !important;
  vertical-align: middle;
  
}
.user-serach-heading{
  color: var(--bs-text-gray-900) ;
  /* transition: color .2s ease; */
  font-weight: 600 !important;
  font-size: 12px;
  font-family: 'Lexend Deca', sans-serif;
}
.user-serach-subheading{
  /* color: var(--bs-text-muted) ; */
  --bs-text-opacity: 1;
  font-weight: 600 !important;
  font-size: 12px;
  font-family: 'Lexend Deca', sans-serif;
  color: #99A1B7;
}

.user-search-text-container:hover * {
  color: var(--bs-link-color);
}
 .app-wrapper {
  margin-top: var(--bs-app-header-height);
}

  /* sidebar icon css */
.chat-icon:hover .badge-light-primary{
  color: var(--bs-white)!important;
  background-color: var(--bs-primary)!important
}

.file-icon:hover .badge-light-primary{
  color: var(--bs-white)!important;
  background-color: var(--bs-primary)!important
  }


.task-icon:hover .badge-light-primary{
  color: var(--bs-white)!important;
  background-color: var(--bs-primary)!important
}
/* sidebar icon css */

/* survey form css */

.sd-body.sd-body--static {
  max-width: initial!important;
}
.sd-question__header--location-top {
  padding-bottom: 0.5rem !important;
}

.sd-element--with-frame {
  padding-bottom: 1.5rem !important;
}
.sd-element__title span {
  margin-bottom: 0.5rem !important; 
  font-size: 1.075rem !important;
  font-weight: 500 !important;
  
}

.sd-input {
  font-family: var(--bs-font-sans-serif) !important;
  box-shadow: none !important;
  font-weight: var(--bs-body-font-weight) !important;
  background-color: var(--bs-gray-100) !important;
  border-color: var(--bs-gray-100) !important;
  color: var(--bs-gray-700) !important;
  transition: color 0.2s ease !important;
  font-size: 1.15rem !important;
}
.sd-dropdown__value {
  font-size: var(--bs-body-font-size) !important;
  font-family: var(--bs-font-sans-serif) !important;
  font-weight: var(--bs-body-font-weight) !important;
}
.sd-title.sd-element__title {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: var(--bs-body-font-size) !important;
  font-weight: var(--bs-body-font-weight) !important;
  color: var(--bs-gray-dark) !important;
}


.sd-body.sd-body--responsive {
  padding: 5px !important;
}
.sd-root--compact .sd-body.sd-body--responsive .sd-body__navigation,
.sd-root--compact .sd-body.sd-body--static .sd-body__navigation {
  padding-top: 2rem !important;
}

.sd-action-bar.sd-footer {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.sd-element--with-frame{
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* survey form css */

  .chatPopover{
    display: inline-table!important;
    width:500px!important;
    }
  .spinner{
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
  }
  .spin::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 10px #cfd0d1;
    border-bottom-color: #2C9AFF;
    border-radius: 50%;
    content: "";
    height: 100px;
    width: 100px; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
  }
  .app-wrapper.sidebar-wrapper{
    padding-right:58px; 
   transition: padding .3s ease!important;
   animation: shrinkPadding .3s ease-in-out;
   transition: all 0.3s ease-in-out;
   }
   .app-wrapper.open{
   padding-right: 500px;
   animation: growPadding .3s ease-in-out;
   transition: all 0.3s ease-in-out;
   }
.m-width-300{
  max-width: 300px;
  }
  .m-width-350{
    max-width: 350px;
    }

    .ellipsis-4 {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4; /* Show 4 lines */
      -webkit-box-orient: vertical;
    }
 
.bottom-90{
bottom: 90px!important;
}
.popover{
  width:300px!important;
  }

    .hide{
    display: none!important;
    }

  .toast-success{
    background-size: 18px!important;
}
.toast-message{
margin-top: 5px;
font-weight: 600!important;
}

.toast-close-button{
top: -2px !important;
}


.m-bottom-0{
  margin-bottom:0px!important;
}

.bs-datepicker-head{
  border: none!important;
    border-radius: 0px!important;
}

.bs-datepicker-body{
  border: none!important;
}

/* Generic class for truncating text to a single line with an ellipsis */
.truncated-description {
  /* display: -webkit-box; */
  -webkit-line-clamp: 1; /* Shows only 1 line by default */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 5.5em;
  /* Consider a fallback max-height if needed, e.g., max-height: 1.5em; */
}

/* Optional: If you want to support more lines, you can create modifiers */
.truncated-description.lines-2 {
  -webkit-line-clamp: 2;
}

.truncated-description.lines-3 {
  -webkit-line-clamp: 3;
}


.truncated-description.lines-4 {
  -webkit-line-clamp: 4;
}

/* Enhanced Toast Styling using existing CSS variables */
.toastr {
  /* Enhanced shadow using existing design system */
  box-shadow: var(--bs-box-shadow-lg) !important;
  /* Better border radius */
  border-radius: var(--bs-border-radius-lg) !important;
  /* Improved padding */
  padding: 1.5rem 1.5rem 1.5rem 5rem !important;
  /* Smooth transitions */
  transition: all 0.3s ease-in-out !important;
  /* Enhanced positioning for left border accent */
  position: relative !important;
  /* Better typography */
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Left border accent for visual hierarchy */
.toastr::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
}

/* Success toast enhancements */
.toastr.toastr-success {
  background-color: var(--bs-success) !important;
  color: var(--bs-success-inverse) !important;
  /* Enhanced shadow with success color tint */
  box-shadow: var(--bs-box-shadow-lg), 0 0 0 1px rgba(var(--bs-success-rgb), 0.1) !important;
}

.toastr.toastr-success::before {
  background-color: var(--bs-success-active, #04B440);
}

/* Error toast enhancements */
.toastr.toastr-error {
  background-color: var(--bs-danger) !important;
  color: var(--bs-danger-inverse) !important;
  /* Enhanced shadow with danger color tint */
  box-shadow: var(--bs-box-shadow-lg), 0 0 0 1px rgba(var(--bs-danger-rgb), 0.1) !important;
}

.toastr.toastr-error::before {
  background-color: var(--bs-danger-active, #D81A48);
}

/* Warning toast enhancements */
.toastr.toastr-warning {
  background-color: var(--bs-warning) !important;
  color: #000000 !important;
  /* Enhanced shadow with warning color tint */
  box-shadow: var(--bs-box-shadow-lg), 0 0 0 1px rgba(var(--bs-warning-rgb), 0.1) !important;
}

.toastr.toastr-warning::before {
  background-color: var(--bs-warning-active, #B45309);
}

/* Info toast enhancements */
.toastr.toastr-info {
  background-color: var(--bs-info) !important;
  color: var(--bs-info-inverse, #ffffff) !important;
  /* Enhanced shadow with info color tint */
  box-shadow: var(--bs-box-shadow-lg), 0 0 0 1px rgba(var(--bs-info-rgb), 0.1) !important;
}

.toastr.toastr-info::before {
  background-color: var(--bs-info-active, #0AA2C0);
}

/* Enhanced close button styling */
.toastr .toastr-close-button {
  outline: none !important;
  font-size: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  transition: all 0.2s ease-in-out !important;
  opacity: 0.8 !important;
}

.toastr .toastr-close-button:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* Enhanced title styling */
.toastr .toastr-title {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* Enhanced message styling */
.toastr .toastr-message {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Hover effects for better interactivity */
.toastr:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--bs-box-shadow-lg), 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Animation for toast entry */
@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animation for toast exit */
@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Apply animations to toast container */
#toastr-container > div {
  animation: toastSlideIn 0.3s ease-out !important;
}

#toastr-container > div.toastr-leaving {
  animation: toastSlideOut 0.3s ease-in forwards !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .toastr {
    padding: 1.25rem 1.25rem 1.25rem 4.5rem !important;
    font-size: 0.95rem !important;
  }
  
  .toastr .toastr-title {
    font-size: 1.1rem !important;
  }
  
  .toastr .toastr-message {
    font-size: 0.95rem !important;
  }
}

/* ng-select custom css */
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{
  background: var(--bs-primary)!important;
   color: var(--bs-white)!important;
  font-size: 1.15rem;
  /* color: var(--bs-gray-600)!important;  */
  /* color: var(--bs-gray-700)!important;  */
  font-weight:500 !important;
  border-radius: var(--bs-border-radius-sm)!important;
  padding: 0.1rem 0.35rem!important;
  margin-right: 0.35rem!important;
  margin-top: 0.1rem!important;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{
  border: 0px!important;
}


.ng-dropdown-panel.ng-select-bottom,.ng-dropdown-panel{
  border: 0!important;;
  box-shadow: var(--bs-dropdown-box-shadow)!important;;
  border-radius: var(--bs-border-radius)!important;;
  padding: 1rem 0!important;;
  background-color: var(--bs-dropdown-bg)!important;;
}
ng-select .ng-select-container .ng-value-container .ng-input>input{
  color: var(--bs-gray-700)!important;  
  font-weight: 500!important;
}
.ng-select.ng-select-multiple .ng-select-container,.ng-select.ng-select-single .ng-select-container{
  background-color: var(--bs-gray-100)!important;
  border-color: var(--bs-gray-100)!important;
  color: var(--bs-gray-700)!important; 
  font-weight: 500!important;
  border: 0px!important;
  transition: color 0.2s ease!important;
  min-height: calc(1.5em + 1.65rem + 2px)!important;
  font-size: 1.15rem;
  border-radius: var(--bs-border-radius-lg)!important;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
  color: inherit!important; /* Sets the color back to its inherited value on hover */
  box-shadow:none!important; 
  background-color:inherit!important; 
}
.ng-select .ng-clear-wrapper:hover .ng-clear{
  color:inherit!important;
}

.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{
  border-color: inherit!important;
  box-shadow:none!important; 
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{
  color: var(--bs-gray-700)!important;
  
}

.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
  top: auto!important;
  padding-left: 10px;
  padding-right: 50px;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{
  background-color: inherit!important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected, .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{
  background-color: var(--bs-component-hover-bg)!important;
    color: var(--bs-component-hover-color)!important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  color: var(--bs-gray-700)!important;
    transition: color .2s ease!important;
    padding: 0.75rem 1.25rem!important;
    margin: 0 0!important;
    -webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
    font-size: 1.15rem;
    font-weight: 500;
    font-family: var(--bs-font-sans-serif)!important;
    font-optical-sizing: auto;
}
/* ng-select custom css */

.app-header{
  --bs-card-box-shadow: var(--bs-root-card-box-shadow)!important;
    --bs-card-border-color: var(--bs-root-card-border-color)!important;
    border: 1px solid var(--bs-card-border-color)!important;
}


/* editor css */
.ql-editor {
  font-family: var(--bs-font-sans-serif);
  font-size: 1.15rem;
  font-weight: 500;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before {
    content: 'Normal';
    font-size: 14px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before {
    content: 'Large';
    font-size: 18px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before {
    content: 'Huge';
    font-size: 16px !important;
}

.pac-container{
  z-index: 10000!important;
}
/* editor css */


/* mention css override */

mention-list.dropup{
  position: absolute;
    left: 0px!important;
    right: 0!important;
}
.mention-menu{
  width:100%!important;
}
.mention-active > a{
  background-color: transparent!important;
}
.mention-dropdown li:hover,.mention-dropdown li.mention-active{
  background-color: #eee;
  cursor: pointer!important;
}
.mention-dropdown li:hover span,.mention-dropdown li.mention-active span{
  color:rgba(var(--bs-link-color-rgb))!important;
}

.mention-item{
  padding: .6em!important;
}

.position-relative {
  position: relative;
}

.position-absolute-top-right {
  position: absolute;
  top: -15px;
  right: 15px;
}


.editor-container ol li.ql-indent-1
 {
  list-style-type: lower-alpha !important;
  margin-left: 1em !important; /* Reduced indentation */
}

.editor-container ol li.ql-indent-2 {
  list-style-type: lower-roman !important;
  margin-left: 2em !important; /* Reduced indentation */
}