// grid js
.no-border-gridjs {
  .gridjs.gridjs-container{
    .gridjs-wrapper{
      @apply border-0
    }
  }
}
.custom-gridjs{
  .gridjs-table{
    .gridjs-thead{
    .gridjs-tr {
    .gridjs-th:hover {
         @apply bg-bodybg
      }
    }
  }
  }
  th.gridjs-th-sort:focus, th.gridjs-th-sort:hover{
     @apply  bg-bodybg;
  }
}
#grid-header-fixed{
  .custom-gridjs{
  .gridjs.gridjs-container{
    .gridjs-wrapper {
      @apply border-0
    }

  }
  }
}
.gridjs-pagination .gridjs-pages button:last-child {
  @apply dark:border-defaultborder/10
}





input{
 @apply focus-visible:outline-none!;
}

 input[type="radio"] {
   @apply w-4 h-4 cursor-pointer relative bg-white dark:bg-transparent border border-inputborder p-0.5 rounded-[50%] checked:bg-primary checked:after:content-[""] checked:after:absolute checked:after:w-[6px] checked:after:h-[6px] checked:after:bg-white checked:after:-translate-x-2/4 checked:after:-translate-y-2/4 checked:after:rounded-[50%] checked:after:left-2/4 checked:after:top-2/4 disabled:opacity-50 disabled:cursor-not-allowed;
 }

input[type="checkbox"].form-check-input {
  @apply w-4 h-4 cursor-pointer relative bg-white dark:bg-transparent dark:border dark:border-defaultborder/10 p-0.5 rounded-sm
  checked:bg-primary checked:after:content-['\EB7B'] checked:after:font-[remixicon] checked:after:absolute checked:after:text-white checked:after:text-[0.65rem]
  checked:after:font-bold checked:after:-translate-x-2/4 checked:after:-translate-y-2/4 checked:after:left-2/4 checked:after:top-2/4
  disabled:opacity-50 disabled:cursor-not-allowed;
}

.dark {
  input[type="date"].calenderColor::-webkit-calendar-picker-indicator ,
  input[type="week"].calenderColor::-webkit-calendar-picker-indicator ,
  input[type="month"].calenderColor::-webkit-calendar-picker-indicator,
  input[type="time"].calenderColor::-webkit-calendar-picker-indicator ,
  input[type="datetime-local"].calenderColor::-webkit-calendar-picker-indicator {
    filter: invert(1);
    /* flips dark icon to light */
    /* optional: adds white background */
    color: white;
    /* sets icon color to white */
    opacity: 1;
    /* ensures it's visible */
  }
}


.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23808080' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-size: 1.25rem 0.8rem !important;
    @apply bg-no-repeat bg-[calc(100%_-_0.35rem)_center] pr-10 appearance-none;
  }
[dir=rtl] .custom-select {
    background-position: .35rem center;
}


.apexcharts-svg,
.apexcharts-canvas {
  @apply w-full! focus:!outline-none;

}

.ng-select .ng-select-container {
    @apply min-h-[40px]!;
}
.form-control.angualr-search {
    @apply w-[250px]!
}

 .mat-mdc-header-row {
    @apply z-[10] relative;
  }




.swiper {

  &::part(button-prev),
  &::part(button-next) {
    @apply h-[1.2rem] w-[1.2rem]! p-[5px]! rounded-[0.5rem] bg-[#0000004d] text-[#fffafa];

  }

  &::part(bullet-active){
    @apply bg-white w-5 h-1 rounded-md  text-black;
  }
  &::part(bullet){
     @apply bg-[rgba(255,_255,_255,_0.6)] text-black  opacity-[0.5] w-5 h-1 rounded-md ;
  }

}

.landing-body{
.swiper.pagination-dynamic {


  &::part(bullet-active){
    @apply bg-primary w-5 h-1 rounded-md  text-black;
  }
  &::part(bullet){
     @apply bg-[rgba(0,_0,_0,_0.3)] dark:bg-[rgba(255,_255,_255,_0.6)] text-black  opacity-[0.5] w-5 h-1 rounded-md ;
  }

}
}

.swiper.custom-pagination{
  &::part(bullet-active){
    @apply bg-white w-5 h-5 rounded-md  text-black;
  }
   &::part(bullet){
      @apply bg-[rgba(255,_255,_255,_0.6)] text-black  opacity-[0.5] w-5 h-5 rounded-md ;
  }
}


// .hs-overlay-backdrop{
//  @apply hs-overlay-backdrop-open:bg-[#32325180] dark:hs-overlay-backdrop-open:!bg-[#323251cc];
// }
// .iconclick {
//   @apply  z-[-1] relative ;
// }
.iconclick {
    position: relative;
    color: inherit;
    display: inline-flex;
    pointer-events: none;
}

.pickr {
  .color-picker {
    @apply visible;
    visibility: visible !important;
    left: 0px !important;
  }
}

.color-picker.open {
    .hex-text,
    .hsla-text,
    .rgba-text{
      .box{
        @apply   border border-defaultborder dark:border-defaultborder/10 dark:!text-white mb-[2px] p-[2px];
        input{
          @apply border-0 dark:!text-white;
        }
         div{
          @apply dark:!text-white;
        }
      }
    }

}
#stocks-marketcap{
 @apply w-full!
}


@media (max-width:440px) {
    #stepline-chart,
    #crm-revenue-analytics,
    #treemap-colorranges,
    #treemap-multi,
    #treemap-basic,
    #treemap-distributed,
    #boxplot-basic,
    #boxplot-scatter,
    #boxplot-horizontal,
    #candlestick-basic,
    #candlestick-line,
    #candlestick-categoryx,
    #column-rotated-labels,
    #area-stacked,
    #zoom-chart,
    #annotation-chart,
    #bar-negative,
    #timeline-advanced,
    #timeline-multi,
    #bubble-simple,
    #bubble-3d,
    #rangearea-basic,
    #rangearea-combo,
    #mixed-linecolumn,
    #mixed-multiple-y,
    #area-negative,
    #candlestick-categoryx,
    #heatmap-multiseries,
    #chart-months {
        .apexcharts-toolbar {
            display: none !important;
        }
    }
}
 #bar-categories {
  .apexcharts-datalabels {
    @apply translate-x-[20px];
  }
}


.apexcharts-legend-marker {
    stroke: none;
}

.mat-mdc-paginator-range-actions {
  @apply flex-wrap;

}
@media (max-width:360px) {
  .mat-mdc-paginator-range-label{
    @apply hidden!;
  }
}


 #project-descriptioin-editor .ql-container {
   @apply h-[200px] overflow-auto;
 }



[data-nav-layout="horizontal"][data-menu-styles="light"][data-page-style="modern"]{
   &[data-header-styles="light"],
   &[data-header-styles="dark"]{
     .app-sidebar{
       @apply border-b border-b-[var(--color-defaultborder)]! ;
      }
  }
}




@media (min-width: 622px) {
  .companies-search-input{
    .ng-select-container{
      border-radius: 0px !important;
    }
  }
}

@media (max-width: 622px) {
  .companies-search-input{
    input.form-control{
      @apply border border-defaultborder! dark:!border-defaultborder/10 rounded-e-sm!;
    }
  }
}

@media (min-width: 992px) {
    [data-vertical-style=doublemenu] .app-sidebar .main-sidebar-header {

       @apply border-e-0!;
    }
}

.ng-select.custom-invoice-currency{
  .ng-select-container{
    @apply bg-[var(--color-light)]!;
  }
}

.search-company-cart-star .br-units .br-unit{
  @apply text-[1.25rem]!;
}

.custom-close-ngselect.ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{
  @apply hidden!;
}



.ti-pagination li:not(:first-child) {
  .page-link {
  @apply border-s-[0px]!;

}
}



select{
  @apply focus-visible:outline-none;
}


//range sliders
.ngx-slider .ngx-slider-pointer {
  @apply focus-visible:outline-none;
}

.ngx-slider .ngx-slider-bar {
    @apply dark:bg-[var(--color-bodybg2)];
}

.ngx-slider .ngx-slider-bar:not(.ngx-slider-selection) {
    @apply dark:bg-[var(--color-gray)]!;
}

.ngx-slider {
  .ngx-slider-pointer.ngx-slider-active:after {
    @apply bg-[#fff]!;
  }
}
.cusotm-ngx-slider {
  .ngx-slider {
    @apply z-0
  }
  .ngx-slider .ngx-slider-pointer {
    @apply bg-[var(--color-primary)];
  }
}

#secondary-colored-slider{
  .ngx-slider .ngx-slider-pointer {
    @apply bg-[var(--color-secondary)];
  }
}
#warning-colored-slider{
  .ngx-slider .ngx-slider-pointer {
    @apply bg-[var(--color-warning)];
  }
}
#info-colored-slider{
  .ngx-slider .ngx-slider-pointer {
    @apply bg-[var(--color-info)];
  }
}
#success-colored-slider{
  .ngx-slider .ngx-slider-pointer {
    @apply bg-[var(--color-success)];
  }
}
#danger-colored-slider{
  .ngx-slider .ngx-slider-pointer {
    @apply bg-[var(--color-danger)];
  }
}
#slider-toggle{
 .ngx-slider.vertical .ngx-slider-pointer {
    @apply rtl:!left-[-3px];
  }
}
#merging-tooltips-slider{
  .noUi-tooltip{
    @apply dark:bg-[var(--color-bodybg)/10] dark:border-[var(--color-defaultborder)/10] dark:text-white;
  }
}

 #red {
  @apply accent-[#ff383c] dark:accent-[#ff4a4e];
}
#green {
  @apply accent-[#189777] dark:accent-[#32ffcb];
}
#blue {
  @apply accent-[#757cd9] dark:accent-[#979eff];
}

 #result {
   @apply  border-[1px] border-defaultborder dark:!border-defaultborder/10;
 }

:host ::ng-deep #red {
   @apply accent-[#ff383c] dark:accent-[#ff4a4e];

}
:host ::ng-deep #green {
  @apply accent-[#189777] dark:accent-[#32ffcb];
}
:host ::ng-deep #blue {
   @apply accent-[#757cd9] dark:accent-[#979eff];
}




#choices-text-email-filter{
  .ng-trigger{
    @apply bg-[var(--color-primary)]
  }
  .ng2-tag-input{
    @apply border-0 p-0! ;
  }
}



.pickr-container{
  .example-form2{
    .mat-mdc-form-field-flex{
      @apply border border-defaultborder dark:border-defaultborder/10 px-[15px] rounded-[6px];
    }
    .mdc-line-ripple::before,
      .mdc-line-ripple.mdc-line-ripple--active:after{
      @apply border-0;
    }


  }
}





.AjaxloaderSweetalertInputClass {
  @apply shadow-none;
}

#chart-line,
#chart-line2,
#chart-area,
#sessionsByDevice {
  .apexcharts-marker {
    @apply stroke-none;
  }
}

[data-menu-styles=gradient][data-vertical-style="doublemenu"][data-nav-layout="vertical"] {
  .app-sidebar {
    .main-sidebar-header {
      @apply border-gray-500!
    }

    .main-menu .slide.has-sub .slide-menu.child1 .slide {
      @apply my-0!;
    }
  }
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mat-mdc-notch-piece {
  border-width: 1px !important;
}

// .hs-overlay-backdrop {
//   @apply z-[102];
// }


/* Start:: Create NFT Item Styles */
.create-nft-item {
  .filepond--root {
    @apply w-full h-[15.08rem] mx-auto text-center rounded-sm;

    @media screen and (min-width: 1660px) {
      @apply h-[14.75rem] w-[20.25rem] m-0;
    }

    // 1. Center the file item container itself
    .filepond--file {
      @apply m-0!; // Removes default margins that cause shifting
    }
    .filepond--list{
      .filepond--item{
        @apply me-[0.8rem]
      }
    }
    // 2. Fix the preview wrapper alignment
    .filepond--image-preview-wrapper {
      @apply h-full! !w-full rounded-[0.3rem] !m-0;
    }

    .filepond--image-preview {
      @apply h-full! !bg-transparent; // Transparent bg prevents weird color blocks

      canvas {
        /* Object-contain is better here if you want to see the whole image without cropping */
        @apply max-h-full! !w-full object-cover !left-0 !right-0 mx-auto;
      }
    }

    // 3. Keep the label centered behind/below
    .filepond--drop-label {
      @apply flex justify-center items-center h-auto min-h-full bottom-0 cursor-pointer;

      label {
        @apply p-[2em] text-xs text-primary font-semibold;
      }
    }
  }

  // Dashed border panel
  .filepond--panel-root {
    @apply border-defaultborder dark:border-defaultborder/10 border-2 border-dashed bg-light dark:bg-bodybg;
  }

  .filepond--list-scroller[data-state="overflow"] {
    @apply overflow-y-hidden!;
  }
}





/* Start:: Create NFT Item Styles */
// .create-nft-item {
//   .filepond--root {
//     @apply w-full h-[15.08rem] mx-auto text-center rounded-sm;

//     @media screen and (min-width: 1660px) {
//       @apply h-[14.75rem] w-[20.25rem] m-0;
//     }

//     // This ensures the actual input is always clickable
//     .filepond--browser {
//       @apply z-[10]! cursor-pointer! ;
//     }

//     .filepond--list-scroller {
//       @apply flex items-center justify-center h-full;
//       /* Disable pointer events on the preview so clicks "pass through" to the input */
//       pointer-events: none;

//       &[data-state="overflow"] {
//         @apply overflow-y-hidden!;
//       }
//     }

//     // Re-enable pointer events for the "Remove" button specifically
//     .filepond--item {
//       @apply me-[0.8rem]! h-full! ;
//       pointer-events: all;
//     }

//     .filepond--list {
//       @apply  w-full! h-full! ;
//     }

//     .filepond--file {
//       @apply m-0! h-full! ;
//     }

//     .filepond--image-preview-wrapper {
//       @apply h-full! w-full! rounded-[0.3rem]! m-0! ;
//     }

//     .filepond--image-preview {
//       @apply h-full! bg-transparent! ;

//       canvas {
//         @apply h-full! w-full! object-cover! left-0! right-0! mx-auto! ;
//       }
//     }

//     .filepond--drop-label {
//       @apply flex justify-center items-center h-auto min-h-full bottom-0 cursor-pointer;
//       /* Ensure label is clickable */
//       z-index: 1;

//       label {
//         @apply p-[2em] text-xs text-primary font-semibold;
//       }
//     }
//   }

//   .filepond--panel-root {
//     @apply border-defaultborder dark:border-defaultborder/10 border-2 border-dashed bg-light dark:bg-bodybg;
//     /* Ensure the panel doesn't block clicks */
//     pointer-events: none;
//   }
// }












/* End:: Create NFT Item Styles */
.filepond--root .filepond--drop-label {
    min-height: 4.75em;
}


[data-nav-layout=vertical][data-vertical-style="doublemenu"] .main-menu .slide.has-sub .slide-menu.child1 .slide.side-menu__label1 {
    @apply my-0!;
}


#stars-hover{
  .br.br-default{
    @apply flex items-center;
  }
  .br-text {
  @apply bg-[#26bf941a] text-[#26bf94] align-middle text-[0.75em] font-semibold rounded px-[0.45rem] py-[0.25rem] ms-4;
  }

}

[dir="rtl"] .br.br-default .br-units .br-unit .br-unit-inner.br-fraction::after {
  --tw-content: "\2605"; /* star symbol */
  @apply left-[11px];    /* Tailwind utility for positioning */
  content: var(--tw-content); /* raw CSS for content */
}

@media (max-width: 991.98px) {
  [data-toggled="open"] #responsive-overlay {
    @apply visible;
  }
}

#slider-toggle{
 .ngx-slider.vertical .ngx-slider-pointer {
    @apply rtl:!left-[-3px];
  }
}

[dir="rtl"]{
  .ql-editor li > .ql-ui:before{
  @apply mr-[-0.7em]!;
}
}



#blog-category-select{
  .ng-placeholder{
    @apply text-[0.775rem]!;
  }
}



.ngx-colors-overlay{
  ngx-colors-panel{
    .opened {
      @apply bg-bodybg rtl:left-[10px];
      .g-input{
        @apply border-defaultborder dark:!border-defaultborder/10;

      }

     .manual-input-wrapper{
       .g-input {
        input{
          @apply dark:text-white!;
        }
       }
     }
    }
  }
}


[data-nav-layout="horizontal"] .app-sidebar .side-menu__item{
  @apply my-0;
}



@media (min-width: 992px) {

 [data-nav-style="icon-click"] .iconclick .side-menu__item {
    @apply z-[1];
  }
  [data-vertical-style="doublemenu"] {
    .iconclick {
      @apply mx-auto! inline-block! relative!;
    }
  }
}


@media (min-width: 992px) {
[data-menu-position="scrollable"][data-nav-layout="horizontal"] .app-sidebar {
  @apply relative! !z-[49];
}
}

.fslightbox-source{
  @apply rounded-md;
}

.highlight.clip-widget {
  markdown {
    pre {
      @apply bg-transparent m-[1rem]!  rounded-[10px]!  max-h-[400px]! p-0
      border-defaultborder dark:!border-defaultborder/10;
    }

    pre>code {
      @apply bg-[var(--color-light)] rounded-[10px]! border-defaultborder dark:!border-defaultborder/10;
    }

  }
}