* {
  font-family: Montserrat !important;
  src: url("./assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
}

@import "../src/assets/css/style.css";

@import "./assets/iconfonts/RemixIcons/fonts/remixicon.css";
@import "./assets/iconfonts/tabler-icons/webfont/tabler-icons.css";
@import "~@ng-select/ng-select/themes/default.theme.css";
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

@import "../node_modules/leaflet/dist/leaflet.css";
@import "../node_modules/@angular/cdk/overlay-prebuilt.css";
@import "../node_modules/ngx-toastr/toastr.css";
@import "../node_modules/lightgallery/scss/lightgallery";

@import "swiper/scss";
@import "swiper/scss/navigation";
@import "swiper/scss/pagination";

// ngx bar rating
@import "../node_modules/ngx-bar-rating/themes/br-default-theme.scss";
@import "../node_modules/ngx-bar-rating/themes/br-horizontal-theme.scss";
@import "../node_modules/ngx-bar-rating/themes/br-vertical-theme.scss";
@import "../node_modules/ngx-bar-rating/themes/br-movie-theme.scss";
@import "../node_modules/ngx-bar-rating/themes/br-square-theme.scss";
@import "../node_modules/ngx-bar-rating/themes/br-stars-theme.scss";
@import "../node_modules/angular-calendar/scss/angular-calendar.scss";
@import "../node_modules/angular-calendar/scss/angular-calendar.scss";

@import "../node_modules/keen-slider/keen-slider.min.css";
@import "../node_modules/lightgallery/scss/lightgallery";

// dark styles start

@media (min-width: 992px) {
  [data-nav-layout="horizontal"][dir="rtl"] .main-menu-container {
    .slide-right {
      @apply left-[3%];
    }
    .slide-left {
      @apply right-[3%];
    }
  }
}

@media (min-width: 992px) {
  [data-nav-layout="horizontal"][dir="ltr"] .main-menu-container {
    .slide-left {
      @apply left-[3%];
    }

    .slide-right {
      @apply right-[3%];
    }
  }
}

@media (min-width: 992px) {
  [data-nav-layout="horizontal"] .app-sidebar .main-sidebar {
    overflow: hidden !important;
  }
}

@media (min-width: 992px) {
  [data-nav-style="icon-click"][toggled="icon-click-closed"]:not([data-nav-layout="horizontal"]) .main-menu {
    @apply ltr:ps-[2rem] ltr:pe-[1.219rem] rtl:pe-[2rem] rtl:ps-[1.219rem];
  }
}

// Angular Mat date picker module start

.light {
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: white !important;
  }
  mat-label {
    font-size: 0.875rem !important;
  }
  .mat-mdc-form-field-focus-overlay {
    background-color: rgba(0, 0, 0, 0);
  }
  .mdc-text-field--filled .mdc-line-ripple::after {
    border-bottom-color: #ffffff;
  }
  .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #293549 !important;
  }
}

[data-nav-layout="horizontal"] {
  &[data-header-styles="light"] {
    @media (max-width="992px") {
      .landing-body .responsive-logo {
        .responsive-logo-light {
          display: block #{!important};
        }
        .responsive-logo-dark {
          display: none #{!important};
        }
      }
    }
  }
}
[data-nav-layout="horizontal"] {
  @media (max-width: 991px) {
    .landing-body .responsive-logo .responsive-logo-dark {
      display: none !important;
    }
    .landing-body .responsive-logo .responsive-logo-light {
      display: block !important;
    }
  }
}

.toast-container .ngx-toastr {
  @apply rtl:dir-ltr;
}

@media (max-width: 480px) {
  #buy-style-1 {
    .ti-form-select {
      @apply border-t-[0px] w-[100%] #{!important};
    }
    .ng-select.ng-select-single .ng-select-container {
      @apply border-t-[0px] #{!important};
    }
  }
}

[data-width="boxed"] {
  @media (min-width: 1400px) {
    .xxxl\:col-span-3,
    .xxxl\:col-span-4,
    .xxxl\:col-span-6,
    .xxxl\:col-span-8 {
      @apply col-span-12;
    }
  }
  .mat-mdc-form-field-infix {
    width: 90px;
  }
  .timepicker .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
    margin-inline-start: 10px;
  }
}
@media (min-width: 1800px) {
  .xxxl\:col-span-9 {
    @apply col-span-9;
  }
}

.dark {
  ::-webkit-scrollbar {
    @apply w-[0px] bg-black/30 #{!important};
  }
  .input-date-picker .dp-input-container input::placeholder {
    @apply text-white/50;
  }
  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
    @apply bg-black/30;
  }
  .ng-select .ng-select-container {
    @apply border-white/10 #{!important};
  }
  .mat-calendar-table-header th {
    color: rgb(255 255 255 / 0.6) !important;
  }
}

[dir="rtl"] {
  .apexcharts-title-text,
  .apexcharts-subtitle-text {
    text-anchor: end;
  }
  .apexcharts-xaxis,
  .apexcharts-yaxis {
    text {
      direction: ltr;
    }
  }
  .apexcharts-legend-text {
    // padding-right: 18px;
    // margin-right: -15px;
    @apply pr-[18px] pl-[0px] mr-[-15px] ml-[0px];
  }
  .mat-datepicker-content {
    direction: ltr;
  }
  .mat-calendar-previous-button,
  .mat-calendar-next-button {
    transform: rotate(0deg) !important;
  }

  .example-tree .mat-nested-tree-node div[role="group"] {
    padding-right: 40px;
    padding-left: 0px;
  }

  .mat-tree .mat-tree-node {
    button {
      margin: 10px 0px 10px 10px !important;
    }
  }
}

.ti-dropdown-toggle {
  svg {
    @apply shrink-0;
  }
}
.apexcharts-legend .apexcharts-legend-text {
  @apply dark:text-white #{!important};
}
.mat-calendar-controls {
  @apply m-0  #{!important};
}
.mat-datepicker-content {
  @apply transform-none #{!important};
}
#todo-compose {
  .ng-select-container {
    width: 100% !important;
  }
}
ngx-dropzone {
  @apply border-gray-200 dark:border-white/10 h-20 #{!important};
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
  @apply bg-primary;
}

/* custom styles */

/* custom styles */

@media (min-width: 992px) {
  [data-nav-style="icon-hover"],
  [data-nav-style="menu-hover"] {
    .app-sidebar {
      .slide.has-sub {
        .child1 > .sub-slide:hover > .child2 {
          @apply block -mt-[30px] #{!important};
        }
      }
    }
  }
}
/* advanced forms */
.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
  --mdc-filled-text-field-focus-active-indicator-color: transparent;
}
/* advanced forms */

.ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
  @apply shadow-none;
}

::-webkit-calendar-picker-indicator {
  @apply opacity-50;
}

/* dark */
.dark {
  ::-webkit-calendar-picker-indicator {
    @apply invert;
  }
  .ae-font .ae-picker-label {
    @apply bg-bodybg border-white/10;
  }
  .ae-font .ae-picker-options {
    @apply bg-bodybg;
  }
  .ae-font.ae-picker {
    @apply text-white;
  }
  .ae-font .ae-picker-label:before {
    @apply bg-none;
  }
  .ae-font .ae-picker-label:hover {
    @apply bg-bodybg;
  }
  .ae-font .ae-picker-label svg .ae-stroke {
    @apply stroke-[#fff];
  }
  .ae-font .ae-picker-label:hover:before {
    background: linear-gradient(to right, #293549 100%, #293549 100%);
  }
  .ae-font.ae-expanded .ae-picker-options {
    @apply border-white/10;
  }
  .swal2-input {
    @apply bg-bgdark #{!important};
  }
  .angular-editor-toolbar {
    @apply bg-bodybg border border-white/10 #{!important};
  }
  .angular-editor-button {
    @apply bg-bgdark border border-white/10 #{!important};
  }
  .angular-editor-textarea {
    @apply border border-white/10 #{!important};
  }
  .clock-face {
    @apply bg-bodybg #{!important};
  }
  .mat-mdc-dialog-container .mdc-dialog__content {
    // color: var(--mdc-dialog-supporting-text-color, rgba(0, 0, 0, 0.6));
    --mdc-dialog-supporting-text-color: #fff;
  }
}
/* dark */
/* tasks */
@media (width <= 23.75rem) {
  .add-new-tasks {
    .ng-select.ng-select-single .ng-select-container {
      @apply w-[13.125rem];
    }
  }
}
/* tasks */

/* advanced forms */
@media screen and (max-width: 320px) {
  ngx-mat-timepicker-face .clock-face {
    @apply w-[14.375rem] h-[14.375rem] #{!important};
  }
  ngx-mat-timepicker-face .clock-face__number--outer {
    @apply h-[7.375rem] #{!important};
  }

  ngx-mat-timepicker-face .clock-face__number {
    @apply top-[calc(50%-120px)] #{!important};
  }
}
/* advanced forms */
/* colorpicker */
.color-picker {
  .left {
    @apply py-[5px] #{!important};
  }
  .selected-color {
    @apply top-[5px] #{!important};
  }
}
/* colorpicker */


.bg-card-white {
  background-color: #ffffff;
  height: 100vh;
  position: fixed;
  z-index: -1;
  width: 100vw;
  right: 1.5rem;
}
.block-main-content {
  background: white;
  margin-left: -1.5rem;
}
@media (min-width: 480px) {
  .bg-card-white {
    background-color: #ffffff;
    height: 100vh;
    position: fixed;
    z-index: -1;
    width: 100vw;
    right: 1.75rem;
  }
  .block-main-content {
    background: white;
    margin-left: -1.75rem;
  }
}