@use "variables";
/* Sidemenu Layout Syles */
@media (max-width: 991.98px) {
  .sidemenu-layout-styles {
    display: none;
  }
}

/* Sidemenu Layout Syles */

/* Respoonsive Logo Styles */
@media (max-width: 991.98px) {
  .app-header .horizontal-logo .header-logo img {
    height: 1.75rem;
    line-height: 1.75rem;
  }
}

/* Respoonsive Logo Styles */

/* Dark Mode */

//dark mode styles start
[data-theme-mode="dark"] {
  .app-sidebar .main-sidebar-header {
    .header-logo {
      .desktop-dark {
        display: block;
      }

      .desktop-logo,
      .toggle-logo,
      .toggle-dark {
        display: none;
      }
    }
  }

  .btn-close {
    filter: invert(1);
  }

  .alert {
    .btn-close {
      filter: unset;
    }
  }

  .dropdown-menu {
    box-shadow: 0 1rem 1.125rem rgba(40, 40, 40, 0.15);
  }

  button.gridjs-sort,
  button.gridjs-sort-desc,
  button.gridjs-sort-asc {
    filter: invert(1);
  }

  .choices__list--dropdown,
  .choices__list[aria-expanded] {
    box-shadow: rgba(10, 10, 10, 0.2) 0 0.5rem 1.5rem !important;
  }

  &[data-menu-styles="light"] {
    .app-sidebar {
      .side-menu__label1 {
        a {
          color: variables.$menu-prime-color;
        }
      }

      .slide.has-sub .slide-menu {
        --menu-prime-color: #61748f;
      }
    }
  }

  &[data-header-styles="light"] {
    .animated-arrow span {
      background: var(--header-prime-color);

      &:before,
      &:after {
        background: var(--header-prime-color);
      }
    }
  }

  &[data-menu-styles="light"] {

    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar {
        .main-sidebar-header .header-logo {
          .toggle-logo {
            display: block !important;
          }

          .desktop-dark,
          .desktop-logo,
          .toggle-dark {
            display: none !important;
          }
        }
      }
    }
  }

}

//dark mode styles end

/* Dark Mode */

/* Responsive Menu Styles */

// responsive header logo styles start
[data-header-styles="dark"],
[data-header-styles="transparent"][data-theme-mode="dark"] {
  @media (max-width: 991.98px) {
    .app-header .horizontal-logo .header-logo {

      .desktop-logo,
      .desktop-dark,
      .toggle-logo {
        display: none;
      }

      .toggle-dark {
        display: block;
      }
    }
  }
}

[data-header-styles="color"],
[data-header-styles="gradient"] {
  @media (max-width: 991.98px) {
    .app-header .horizontal-logo .header-logo {

      .desktop-logo,
      .desktop-dark,
      .toggle-logo {
        display: none;
      }

      .toggle-dark {
        display: block;
      }
    }
  }
}

[data-header-styles="light"],
[data-header-styles="transparent"][data-theme-mode="light"] {
  @media (max-width: 991.98px) {
    .app-header .horizontal-logo .header-logo {
      .toggle-logo {
        display: block;
      }

      .desktop-logo,
      .toggle-dark,
      .desktop-dark {
        display: none;
      }
    }
  }
}

// responsive header logo styles end

// toggle close start
[data-toggled="close"] {
  @media (max-width: 991.98px) {
    .app-sidebar {
      transition: all 300ms ease;
      transform: translateX(-16rem);
    }

    .app-header {
      padding-inline-start: 0rem;

      .horizontal-logo {
        display: block;
      }
    }

    &[dir="rtl"] {
      .app-sidebar {
        transition: all 300ms ease;
        transform: translateX(16rem);
      }
    }
  }
}

// toggle close end

//toggle open start
[data-toggled="open"] {
  @media (max-width: 991.98px) {
    .app-sidebar {
      transition: all 300ms ease;
      transform: translateX(0rem);
    }

    .app-header {
      padding-inline-start: 0rem;

      .horizontal-logo {
        display: block;
      }
    }
  }
}

//toggle open end

/* Responsive Menu Styles */

/* Page Styles */

//regular//
[data-page-style="regular"] {
  --default-border: #eeeff5;

  .card.custom-card {
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05) !important;
  }

  &[data-vertical-style="doublemenu"] {
    .app-sidebar {
      .slide.has-sub .slide-menu {
        border-inline-end: 1px solid var(--menu-border-color) !important;
      }
    }
  }

  &[data-theme-mode="dark"] {
    --default-border: rgba(255, 255, 255, 0.1);
  }
}

// classic start
[data-page-style="classic"] {
  --header-border-color: #eeeff5;
  --menu-border-color: #eeeff5;
  --custom-white: rgb(248 249 253);

  &[data-theme-mode="dark"] {
    --default-border: rgba(255, 255, 255, 0.1);
    --header-border-color: rgba(255, 255, 255, 0.1);
    --menu-border-color: rgba(255, 255, 255, 0.1);
  }

  &[data-vertical-style="doublemenu"] {
    .app-sidebar {
      .slide.has-sub .slide-menu {
        border-inline-end: 1px solid var(--menu-border-color) !important;
      }
    }
  }

  .switcher-style-head {
    background-color: #fff !important;
  }

  body {
    background-color: variables.$default-body-color;
  }


  .card.custom-card {
    box-shadow: none;
    border: 1px solid variables.$default-border;
  }

  .app-sidebar,
  .footer,
  .app-header,
  .app-sidebar .main-sidebar {
    box-shadow: none;
  }

  &[data-nav-layout="horizontal"] {
    .app-sidebar {
      border-block-end: 1px solid variables.$default-border;
    }
  }

  &[data-theme-mode="dark"] {
    --custom-white: var(--default-body-bg-color);

    .switcher-style-head {
      background-color: rgba(255,255,255,0.05) !important;
    }
  }
}

// page styles classic end

// page styles modern start
[data-page-style="modern"] {
  --light-rgb: 255, 255, 255;
  --custom-white: rgb(248 249 253);
  --default-border: #e6ebf1;
  --input-border: var(--black-1);

  .dropdown-menu {
    background-color: rgb(255, 255, 255);
  }

  body {
    background-color: #fff;
  }

  .card.custom-card {
    box-shadow: none;
    background-color: rgb(243, 246, 248);
  }

  &[data-theme-mode="dark"] {
    --light-rgb: 20, 20, 20;
    --custom-white: rgb(var(--body-bg-rgb));
    --default-border: rgb(255, 255, 255, 0.1);

    .card.custom-card {
      box-shadow: none;
      background-color: var(--custom-white);
    }

    .dropdown-menu {
      background-color: variables.$light;
    }

    body {
      background-color: var(--default-body-bg-color);
    }

    .btn-light {
      background-color: rgba(255, 255, 255, 0.1) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;

      &:hover,
      &:focus,
      &:active {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
      }
    }
  }

  .app-sidebar,
  .footer,
  .app-header,
  .app-sidebar .main-sidebar {
    box-shadow: none;
  }
}

// page styles modern end

/* Page Styles */

/* Layout Width Styles */

// default width
[data-width="default"] {
  @media(min-width: 1600px) {
    .main-content {
      padding: 0 10rem;
    }

    &[data-nav-layout=vertical] .app-header .main-header-container {
      padding-inline: 10rem;
    }
  }

  @media (max-width: 1599.98px) and (min-width: 992px) {
    .main-content {
      padding: 0 0.5rem;
    }
  }

  &[data-nav-layout="horizontal"] {
    @media(min-width: 1600px) {

      .app-sidebar,
      .main-header-container {
        padding-inline: 10rem;
      }
    }
  }
}

// default width

// boxed start
[data-width="boxed"] {
  @media (min-width: 1400px) {
    body {
      background-color: #b9bdd7;
    }

    .page {
      width: 1400px;
      margin: 0 auto;
      background-color: variables.$default-body-color;
      position: relative;
      box-shadow: 0 0 1rem variables.$black-1;

      .app-header {
        width: 1400px;
        margin: 0 auto;
      }

      .app-sidebar {
        inset-inline-start: auto;
      }
    }

    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        width: 1400px !important;
      }
    }

    &[data-page-style="classic"] {
      .page {
        background-color: variables.$custom-white;
      }

      .card {
        box-shadow: none;
      }
    }

    &[data-theme-mode="dark"] {

      body {
        background-color: rgba(var(--body-bg-rgb), 0.6);
      }

      .page {
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
      }
    }

    &[data-vertical-style="detached"] {
      .page {
        width: 1400px;
        box-shadow: none;

        .app-header {
          width: 1400px;
        }
      }

      &[data-toggled="detached-close"] {
        .app-content {
          margin-inline-start: 5rem;
        }
      }

      .app-header .main-header-container {
        width: 99%;
      }

      .app-content {
        margin-inline-start: 16rem;
      }
    }

    &[data-vertical-style="doublemenu"] {
      .app-sidebar .main-sidebar {
        height: 100%;
      }

      .app-sidebar .simplebar-content-wrapper {
        position: initial;
      }

      .app-sidebar .simplebar-mask {
        position: inherit;
      }
    }

    .mail-info-body {
      max-height: calc(100vh - 19.3rem);
    }

    #Invoice {
      .list-group-item>a>div {
        display: block !important;
      }
    }

    .leads-source-labels {
      .col {
        flex: 100%;
      }
    }
  }
}

// boxed end

/* Layout Width Styles */

/* Menu Positions Styles */

//scrollable start
[data-menu-position="scrollable"] {
  &[data-nav-layout="vertical"] {
    .app-sidebar {
      position: absolute;

      .main-sidebar-header {
        position: absolute;
      }

      // .main-sidebar {
      //   height: 280vh;
      // }
    }

    // .app-content {
    //   min-height: 280vh;
    // }
  }

  &[data-nav-layout="horizontal"] {
    .app-sidebar {
      position: relative;
      z-index: 102;
    }

    .app-content {
      margin-block-start: 5.5rem;
    }

    &[data-header-position="scrollable"] {
      .app-sidebar {
        position: relative;
      }

      .app-header {
        position: relative;
      }
    }
  }

  @media (max-width: "991.98px") {
    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        position: absolute;
      }

      .main-content {
        margin-block-start: 0;
      }

      .main-sidebar {
        height: 100%;
      }
    }
  }

  @media (min-width: 992px) {
    .app-content {
      min-height: calc(100vh - 2.5rem);
    }
  }
}

//scrollable end

/* Menu Positions Styles*/

/* Header Positions Styles */

//scrollable start
[data-header-position="scrollable"] {
  &[data-nav-layout="vertical"] {
    .app-header {
      position: absolute;
    }
  }

  &[data-nav-layout="horizontal"] {
    .app-sidebar {
      position: relative;
      top: 0;

      &.sticky {
        position: sticky;
        top: 0;
      }
    }

    .app-content {
      margin-block-start: 1.5rem;
    }

    .app-header {
      position: relative;
    }

    &[data-menu-position="scrollable"] {
      .app-sidebar {
        position: relative;
      }

      .app-header {
        position: relative;
      }
    }

    &[data-width="boxed"] {
      .app-header {
        margin: 0;
      }
    }
  }

  @media (max-width: "991.98px") {
    &[data-nav-layout="horizontal"] {
      .app-sidebar {
        position: absolute !important;
        z-index: 102;
      }

      .main-content {
        padding-block-start: 0;
      }

      &[data-menu-position="fixed"] {
        .app-sidebar {
          position: fixed !important;

          .main-sidebar {
            margin-block-start: 3.72rem;
          }

          &.sticky {
            .main-sidebar {
              margin-block-start: 0;
            }
          }
        }
      }
    }

    &[data-nav-layout="vertical"] {
      .app-sidebar.sticky {
        inset-block-start: 0;
      }
    }
  }
}

//scrollable end

/* Header Positions Styles*/

/* Menu Colors Styles*/

//menu-light start
[data-menu-styles="light"] {
  --menu-bg: #fff;
  --menu-prime-color: #61748f;
  --menu-border-color: #eeeff5;

  &[data-theme-mode="dark"] {
    --menu-prime-color: #61748f;
  }

  .app-sidebar .side-menu__icon {
    color: variables.$menu-prime-color;
    fill: variables.$menu-prime-color;
  }

  .app-sidebar .side-menu__item.active .side-menu__icon {
    color: variables.$primary;
    fill: variables.$primary ;
  }

  &[data-nav-layout="vertical"] {
    .app-sidebar .main-sidebar-header .header-logo {
      .desktop-logo {
        display: block;
      }

      .desktop-dark,
      .toggle-dark,
      .toggle-logo {
        display: none;
      }
    }

    &[data-theme-mode="dark"] {
      .main-menu>.slide>.side-menu__item:hover {
        background-color: #f7f8f9;
      }
    }
  }

  .side-menu__label1 a {
    color: variables.$primary;
    font-weight: 500;
  }

  .side-menu__label1 {
    border-block-end: 0px solid #eeeff5 !important;
  }

  @media (min-width: 992px) {
    &[data-vertical-style="doublemenu"] .slide.has-sub .slide-menu {
      border-inline-end: 1px solid #eeeff5;
    }
  }

}

//menu-light end

//menu-dark start
[data-menu-styles="dark"] {
  --menu-bg: #{var(--custom-white)};
  --menu-prime-color: rgba(255, 255, 255, 0.5);
  --menu-border-color: rgba(255, 255, 255, 0.1);

  &[data-nav-layout="vertical"] {

    .main-menu>.slide.active .slide-menu .side-menu__item:hover .side-menu__angle,
    .main-menu>.slide:hover .slide-menu .side-menu__item:hover .side-menu__angle {
      color: variables.$primary !important;
      fill: variables.$primary !important;
    }

    .app-sidebar .main-sidebar-header .header-logo {
      .desktop-dark {
        display: block;
      }

      .desktop-logo,
      .toggle-dark,
      .toggle-logo {
        display: none;
      }
    }

    &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
      .app-sidebar .main-sidebar-header .header-logo {
        .toggle-dark {
          display: block;
        }

        .desktop-logo,
        .desktop-dark,
        .toggle-logo {
          display: none;
        }
      }

      &[data-icon-overlay="open"] {
        .app-sidebar .main-sidebar-header .header-logo {
          .desktop-dark {
            display: block;
          }

          .desktop-logo,
          .toggle-dark,
          .toggle-logo {
            display: none;
          }
        }
      }
    }
  }

  .side-menu__label1 a {
    color: rgba(255, 255, 255);
    font-weight: 500;
  }

  .side-menu__label1 {
    border-block-end: 0px solid rgba(255, 255, 255, 0.1) !important;
  }

  .app-sidebar {
    .side-menu__item {

      &.active,
      &:hover {

        .side-menu__icon,
        .side-menu__label,
        .side-menu__angle {
          color: #fff !important;
          fill: #fff !important;
        }

        &:before {
          color: #fff;
          opacity: 1;
        }
      }
    }

    .side-menu__item:before {
      color: variables.$menu-prime-color;
    }
  }

  .app-sidebar .slide-menu .side-menu__item {

    &.active,
    &:hover {
      .side-menu__angle {
        color: #fff;
      }
    }

    .side-menu__label {
      color: #fff;
    }
  }

  .app-sidebar .slide-menu.child1 .side-menu__item:hover,
  .app-sidebar .slide-menu.child2 .side-menu__item:hover,
  .app-sidebar .slide-menu.child3 .side-menu__item:hover {
    color: variables.$primary;
    background: transparent;
  }

  .app-sidebar .side-menu__item.active,
  .app-sidebar .side-menu__item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
  }

  &[data-theme-mode="light"] {
    --menu-bg: #202025;

    &[data-bg-img="bgimg1"] {
      --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img1.jpg);
    }

    &[data-bg-img="bgimg2"] {
      --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img2.jpg);
    }

    &[data-bg-img="bgimg3"] {
      --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img3.jpg);
    }

    &[data-bg-img="bgimg4"] {
      --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img4.jpg);
    }

    &[data-bg-img="bgimg5"] {
      --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img5.jpg);
    }
  }

  @media (min-width: 992px) {

    &[data-nav-layout="horizontal"] .main-menu-container .slide-left,
    &[data-nav-layout="horizontal"] .main-menu-container .slide-right {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(30px);

      svg {
        fill: #fff;
      }
    }

    &[data-vertical-style="doublemenu"] .slide.has-sub .slide-menu {
      border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  &[data-theme-mode="light"] {
    --menu-bg: #0d0913;
    --menu-prime-color: #aab1c1;
    --menu-icon-color: #aab1c1;

    .main-menu>.slide>.side-menu__item:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .app-sidebar {
      --default-border: #26222b;

      ::-webkit-scrollbar {
        background: rgba(255, 255, 255, 0.2) !important;
      }

      :hover::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4) !important;
      }
    }
  }
}

//menu-dark end

//color and gradient menu color mixin start
@mixin color-gradient($color) {
  color: $color !important;

  .side-menu__icon,
  .side-menu__label,
  .side-menu__angle {
    color: $color !important;
    fill: $color !important;
  }
}

//color and gradient menu color mixin end

//menu-color start
[data-menu-styles="color"] {
  --menu-bg: #{variables.$primary};
  --menu-prime-color: rgba(255, 255, 255, 0.6);
  --menu-icon-color: rgb(255, 255, 255, 0.6);
  --menu-border-color: rgba(255, 255, 255, 0.1);

  &[data-nav-layout="vertical"] {

    .main-menu>.slide.active>.side-menu__item,
    .main-menu>.slide:hover>.side-menu__item {
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .app-sidebar {
      --default-border: rgba(255, 255, 255, 0.1);

      .slide.has-sub .slide-menu {
        --light-rgb: 149, 105, 250;
        --input-border:219, 203, 255;
      }

      .main-sidebar-header .header-logo {
        .desktop-dark {
          display: block;
        }

        .desktop-logo,
        .toggle-dark,
        .toggle-logo {
          display: none;
        }
      }
    }

    .slide-menu.child1 .side-menu__item:hover .side-menu-doublemenu__icon {
      color: #fff !important;
      fill: #fff !important;
    }

    &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
      .animated-arrow span {
        background: variables.$text-muted;

        &:before,
        &:after {
          background: variables.$text-muted;
        }
      }

      .app-sidebar .main-sidebar-header .header-logo {
        .toggle-dark {
          display: block;
        }

        .desktop-logo,
        .desktop-dark,
        .toggle-logo {
          display: none;
        }
      }

      &[data-icon-overlay="open"] {
        .animated-arrow span {
          background: #fff;

          &:before,
          &:after {
            background: #fff;
          }
        }

        .app-sidebar .main-sidebar-header .header-logo {
          .desktop-dark {
            display: block;
          }

          .desktop-logo,
          .toggle-dark,
          .toggle-logo {
            display: none;
          }
        }
      }
    }

    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar .main-sidebar-header .header-logo {
        .toggle-dark {
          display: block !important;
        }

        .desktop-logo,
        .desktop-dark,
        .toggle-logo {
          display: none;
        }
      }
    }
  }

  &[data-nav-layout="vertical"] .main-menu>.slide:hover .slide-menu .side-menu__item:hover .side-menu__angle {
    color: #fff !important;
    fill: #fff !important;
  }

  .side-menu__item {
    &.active {
      @include color-gradient(variables.$white);
    }

    &:hover {
      @include color-gradient(variables.$white);
    }
  }

  .slide-menu {
    --menu-bg: #{variables.$primary};
  }

  .side-menu__label1 a {
    color: rgba(255, 255, 255);
    font-weight: 500;
  }

  .side-menu__label1 {
    border-block-end: 0px solid rgba(255, 255, 255, 0.1) !important;
  }

  .app-sidebar {
    .main-menu>.slide>.side-menu__item {

      &.active,
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }

    .main-menu .slide .side-menu__item:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  @media (min-width: 992px) {

    &[data-nav-layout="horizontal"] .main-menu-container .slide-left,
    &[data-nav-layout="horizontal"] .main-menu-container .slide-right {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(30px);

      svg {
        fill: variables.$primary;
      }
    }

    &[data-vertical-style="doublemenu"] .slide.has-sub .slide-menu {
      border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}

//menu-color end

//menu-gradient start
[data-menu-styles="gradient"] {
  --menu-bg: linear-gradient(to bottom, #{variables.$primary} 0%, #FF3DBB 100%);
  --menu-prime-color: rgba(255, 255, 255, 0.6);
  --menu-icon-color: rgba(255, 255, 255, 0.6);
  --menu-border-color: rgba(255, 255, 255, 0.1);

  &[data-nav-layout="horizontal"] {
    --menu-bg: linear-gradient(to right, #{variables.$primary} 0%, #FF3DBB 100%);
  }

  &[data-nav-layout=vertical] .main-menu>.slide:hover .slide-menu .side-menu__item:hover .side-menu__angle {
    color: #fff !important;
    fill: #fff !important;
  }

  .app-sidebar .main-sidebar-header {
    background: variables.$primary;
  }

  &[data-nav-layout="vertical"] {

    .main-menu>.slide.has-sub.active>.side-menu__item,
    .main-menu>.slide:hover>.side-menu__item {
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .app-sidebar {
      --default-border: rgba(255, 255, 255, 0.1);
      .slide.has-sub .slide-menu {
        --light-rgb: 149, 105, 250;
        --input-border:219, 203, 255;
      }
    }

    .app-sidebar .main-sidebar-header .header-logo {
      .desktop-dark {
        display: block;
      }

      .desktop-logo,
      .toggle-dark,
      .toggle-logo {
        display: none;
      }
    }

    .slide-menu.child1 .side-menu__item:hover .side-menu-doublemenu__icon {
      color: #fff !important;
      fill: #fff !important;
    }

    &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
      .animated-arrow span {
        background: variables.$text-muted;

        &:before,
        &:after {
          background: variables.$text-muted;
        }
      }

      .app-sidebar .main-sidebar-header .header-logo {
        .toggle-dark {
          display: block;
        }

        .desktop-logo,
        .desktop-dark,
        .toggle-logo {
          display: none;
        }
      }

      &[data-icon-overlay="open"] {
        .animated-arrow span {
          background: #fff;

          &:before,
          &:after {
            background: #fff;
          }
        }

        .app-sidebar .main-sidebar-header .header-logo {
          .desktop-dark {
            display: block;
          }

          .desktop-logo,
          .toggle-dark,
          .toggle-logo {
            display: none;
          }
        }
      }
    }

    &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar .main-sidebar-header .header-logo {
        .toggle-dark {
          display: block !important;
        }

        .desktop-logo,
        .desktop-dark,
        .toggle-logo {
          display: none;
        }
      }
    }
  }

  .side-menu__item {
    &.active {
      @include color-gradient(variables.$white);
    }

    &:hover {
      @include color-gradient(variables.$white);
    }
  }

  .slide-menu {
    --menu-bg: #{variables.$primary};
  }

  .side-menu__label1 a {
    color: rgba(255, 255, 255);
    font-weight: 500;
  }

  .side-menu__label1 {
    border-block-end: 0px solid rgba(255, 255, 255, 0.1) !important;
  }

  .app-sidebar {
    .side-menu__item {

      &.active,
      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
    }
  }

  @media (min-width: 992px) {

    &[data-nav-layout="horizontal"] .main-menu-container .slide-left,
    &[data-nav-layout="horizontal"] .main-menu-container .slide-right {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(30px);

      svg {
        fill: variables.$primary;
      }
    }

    &[data-vertical-style="doublemenu"] .slide.has-sub .slide-menu {
      border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}

//menu-gradient end

//menu-transparent start
[data-menu-styles="transparent"] {
  --menu-bg: #{variables.$default-body-color};

  &[data-theme-mode="light"] {
    --menu-border-color: rgba(0, 0, 0, 0.07);
  }

  &[data-nav-layout="vertical"] {
    &[data-theme-mode="dark"] {
      .app-sidebar .main-sidebar-header .header-logo {
        .desktop-dark {
          display: block;
        }

        .desktop-logo,
        .toggle-dark,
        .toggle-logo {
          display: none;
        }
      }

      &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
        .app-sidebar .main-sidebar-header .header-logo {
          .toggle-dark {
            display: block;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-logo {
            display: none;
          }
        }

        &[data-icon-overlay="open"] {
          .app-sidebar .main-sidebar-header .header-logo {
            .desktop-dark {
              display: block;
            }

            .desktop-logo,
            .toggle-dark,
            .toggle-logo {
              display: none;
            }
          }
        }
      }

      &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
        .app-sidebar .main-sidebar-header .header-logo {
          .toggle-dark {
            display: block !important;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-logo {
            display: none;
          }
        }
      }
    }

    &[data-theme-mode="light"] {
      .app-sidebar .main-sidebar-header .header-logo {
        .desktop-logo {
          display: block;
        }

        .desktop-dark,
        .toggle-dark,
        .toggle-logo {
          display: none;
        }
      }

      &[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
        .app-sidebar .main-sidebar-header .header-logo {
          .toggle-logo {
            display: block;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-dark {
            display: none;
          }
        }

        &[data-icon-overlay="open"] {
          .app-sidebar .main-sidebar-header .header-logo {
            .desktop-logo {
              display: block;
            }

            .desktop-dark,
            .toggle-dark,
            .toggle-logo {
              display: none;
            }
          }
        }
      }

      &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
        .app-sidebar .main-sidebar-header .header-logo {
          .toggle-logo {
            display: block !important;
          }

          .desktop-logo,
          .desktop-dark,
          .toggle-logo {
            display: none;
          }
        }
      }
    }
  }

  .app-sidebar {
    .side-menu__item {

      &.active,
      &:hover {
        background-color: variables.$primary-01;
      }
    }

    .main-sidebar {
      box-shadow: none;
    }
  }

  &[data-theme-mode="dark"] {
    --menu-prime-color: rgba(255, 255, 255, 0.7);
    --menu-icon-color: rgba(255, 255, 255, 0.7);
    --menu-border-color: rgba(255, 255, 255, 0.1);
    --menu-bg: rgb(var(--body-bg-rgb2));

    &[icon-overlay="open"] {
      --menu-bg: rgb(var(--body-bg-rgb2));
    }

    .app-sidebar {
      .side-menu__item {

        &.active,
        &:hover {
          background-color: rgba(255, 255, 255, 0.05);
        }
      }
    }

    @media (min-width: 992px) {
      &[data-nav-layout="horizontal"] {

        &[data-nav-style="menu-click"],
        &[data-nav-style="menu-hover"],
        &[data-nav-style="icon-click"],
        &[data-nav-style="icon-hover"] {
          .app-sidebar .slide.has-sub .slide-menu {
            background-color: variables.$custom-white;
          }
        }
      }
    }

    &[data-nav-layout="vertical"] {

      &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
      &[data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
        .app-sidebar .slide.has-sub .slide-menu {
          background-color: variables.$custom-white;
        }
      }
    }
  }

  @media (min-width: 992px) {

    &[data-nav-layout="horizontal"] .main-menu-container .slide-left,
    &[data-nav-layout="horizontal"] .main-menu-container .slide-right {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(30px);

      svg {
        fill: variables.$primary;
      }
    }
  }
}

//menu-transparent end

/* Menu Colors Styles*/

/* Header Colors Styles*/

//header-light start
[data-header-styles="light"] {
  --header-bg: #fff;
  --header-border-color: #eeeff5;
  --header-prime-color: #61748f;

  .app-header {
    .header-search-bar {
      background-color: var(--header-bg) !important;
      border: 1px solid #eff2ff !important;
      color: variables.$header-prime-color !important;

      &::-webkit-input-placeholder {
        color: variables.$header-prime-color !important;
      }

      &:focus {
        border: 1px solid #eff2ff !important;
        color: variables.$header-prime-color !important;
        box-shadow: none !important;
      }
    }
  }

  .app-header {
    .bg-body {
      background-color: #f7f8f9 !important;
    }
  }

  .header-search-icon {
    color: variables.$header-prime-color;

    &:hover {
      color: variables.$header-prime-color;
    }
  }
}

//header-light start

//header-dark start
[data-header-styles="dark"] {
  --header-bg: #{var(--custom-white)};
  --header-border-color: rgba(255, 255, 255, 0.1);
  --header-prime-color: rgba(255, 255, 255, 0.6);
  --header-icon-color: rgba(255, 255, 255, 0.6);

  &[data-theme-mode="light"] {
    .app-header {
      .bg-body {
        background-color: rgb(43, 43, 48) !important;
      }
    }

    .main-header-container .header-link-icon {
      background-color: rgba(255, 255, 255, 0.05) !important;
      border-color: rgba(255, 255, 255, 0.05);
    }

    .header-link {
      &:hover {
        .header-link-icon {
          color: #fff;
          fill: #fff;
        }
      }
    }
  }

  .app-header {
    .header-search-bar {
      background-color: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
      color: variables.$header-prime-color !important;

      &::-webkit-input-placeholder {
        color: variables.$header-prime-color !important;
      }

      &:focus {
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        color: variables.$header-prime-color !important;
        box-shadow: none !important;
      }
    }
  }

  .header-search-icon {
    color: variables.$header-prime-color;

    &:hover {
      color: variables.$header-prime-color;
    }
  }

  &[data-nav-layout="horizontal"] {
    @media (min-width: 992px) {
      .header-element .horizontal-logo .header-logo {
        .desktop-dark {
          display: block;
        }

        .desktop-logo,
        .toggle-dark,
        .toggle-logo {
          display: none;
        }
      }
    }
  }

  .main-header-container {

    .header-link:hover,
    .header-link.show {
      .header-link-icon {
        fill: variables.$white;
      }
    }
  }

  &[data-theme-mode="light"] {
    --header-bg: #202025;
  }
}

//header-dark start

//header-color start
[data-header-styles="color"] {
  --header-bg: #{variables.$primary};
  --header-border-color: rgba(255, 255, 255, 0.1);
  --header-prime-color: rgba(255, 255, 255, 0.6);
  --header-icon-color: rgba(255, 255, 255, 0.6);

  .app-header {
    .bg-body {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
  }

  .main-header-container .header-link-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.05);
  }

  .app-header {
    .header-search-bar {
      background-color: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
      color: variables.$header-prime-color !important;

      &::-webkit-input-placeholder {
        color: variables.$header-prime-color !important;
      }

      &:focus {
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        color: variables.$header-prime-color !important;
        box-shadow: none !important;
      }
    }
  }

  .header-link {
    &:hover {
      .header-link-icon {
        color: #fff !important;
        fill: #fff !important;
      }
    }
  }

  .header-search-icon {
    color: variables.$header-prime-color;

    &:hover {
      color: variables.$header-prime-color;
    }
  }

  &[data-nav-style="menu-click"],
  &[data-nav-style="menu-hover"],
  &[data-nav-style="icon-hover"],
  &[data-nav-style="icon-click"],
  &[data-vertical-style="closed"],
  &[data-vertical-style="icontext"],
  &[data-vertical-style="overlay"],
  &[data-vertical-style="detached"],
  &[data-vertical-style="doublemenu"] {
    .animated-arrow span {
      background: #fff;

      &:before,
      &:after {
        background: #fff;
      }
    }
  }

  &[data-nav-layout="horizontal"] {
    @media (min-width: 992px) {
      .header-element .horizontal-logo .header-logo {
        .desktop-dark {
          display: block;
        }

        .desktop-logo,
        .toggle-dark .toggle-logo {
          display: none;
        }
      }
    }
  }

  .main-header-container {

    .header-link:hover,
    .header-link.show {
      .header-link-icon {
        fill: variables.$white;
      }
    }
  }
}

//header-color start

//header-gradient start
[data-header-styles="gradient"] {
  --header-bg: linear-gradient(to right, #{variables.$primary} 0%, #FF3DBB 100%);
  --header-border-color: rgba(255, 255, 255, 0.1);
  --header-prime-color: rgba(255, 255, 255, 0.6);
  --header-icon-color: rgba(255, 255, 255, 0.8);

  .app-header {
    .bg-body {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
  }

  .main-header-container .header-link-icon {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .app-header {
    .header-search-bar {
      background-color: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
      color: variables.$header-prime-color !important;

      &::-webkit-input-placeholder {
        color: variables.$header-prime-color !important;
      }

      &:focus {
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        color: variables.$header-prime-color !important;
        box-shadow: none !important;
      }
    }
  }

  .header-link {
    &:hover {
      .header-link-icon {
        color: #fff !important;
        fill: #fff !important;
      }
    }
  }

  .header-search-icon {
    color: variables.$header-prime-color;

    &:hover {
      color: variables.$header-prime-color;
    }
  }

  &[data-nav-style="menu-click"],
  &[data-nav-style="menu-hover"],
  &[data-nav-style="icon-hover"],
  &[data-nav-style="icon-click"],
  &[data-vertical-style="closed"],
  &[data-vertical-style="icontext"],
  &[data-vertical-style="overlay"],
  &[data-vertical-style="detached"],
  &[data-vertical-style="doublemenu"] {
    .animated-arrow span {
      background: #fff;

      &:before,
      &:after {
        background: #fff;
      }
    }
  }

  &[data-nav-layout="horizontal"] {
    @media (min-width: 992px) {
      .header-element .horizontal-logo .header-logo {
        .desktop-dark {
          display: block;
        }

        .desktop-logo,
        .toggle-dark,
        .toggle-logo {
          display: none;
        }
      }
    }
  }

  .main-header-container {

    .header-link:hover,
    .header-link.show {
      .header-link-icon {
        fill: variables.$white;
      }
    }
  }
}

//header-gradient start

//header-transparent start
[data-header-styles="transparent"] {
  --header-bg: rgb(var(--body-bg-rgb2));

  .app-header {
    border-bottom: 0;
    box-shadow: none;
  }

  &[data-theme-mode="light"] {
    --header-border-color: rgba(0, 0, 0, 0.07);
    --header-bg: var(--default-body-bg-color);

    .app-header {
      --default-body-bg-color: rgba(0, 0, 0, 0.05);
      --default-background: rgba(0, 0, 0, 0.05);
    }
  }

  &[data-theme-mode="dark"] {
    --header-prime-color: rgba(255, 255, 255, 0.6);
    --header-border-color: rgba(255, 255, 255, 0.1);

    .app-header {
      --default-body-bg-color: rgba(255, 255, 255, 0.1);
      --default-background: rgba(255, 255, 255, 0.1);
    }

    @media (min-width: 992px) {
      .app-header.sticky {
        &.sticky-pin {
          --header-bg: rgb(var(--body-bg-rgb2));
        }
      }
    }
  }

  @media (min-width: 992px) {
    .app-header.sticky {
      &.sticky-pin {
        --header-bg: rgb(var(--body-bg-rgb));
      }
    }
  }

  &[data-nav-layout="horizontal"] {
    @media (min-width: 992px) {
      &[data-theme-mode="light"] {
        .header-element .horizontal-logo .header-logo {

          .desktop-dark,
          .toggle-logo,
          .toggle-dark {
            display: none;
          }

          .desktop-logo {
            display: block;
          }
        }
      }

      &[data-theme-mode="dark"] {
        .header-element .horizontal-logo .header-logo {
          .desktop-dark {
            display: block;
          }

          .desktop-logo,
          .toggle-logo,
          .toggle-dark {
            display: none;
          }
        }
      }
    }
  }
}

//header-gradient start

/* Header Colors Styles*/

/* Menu Background Image Styles */

.bg-img {
  @mixin slide-menu-bg($color) {
    @media (min-width: 992px) {
      &[data-nav-layout="horizontal"] {
        ul.slide-menu {
          background-size: cover !important;
          background-position: center !important;
          background-repeat: no-repeat !important;

          &:before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 0;
            inset-inline-end: 0;
            bottom: 0;
            border-radius: 0 0 0.25rem 0.25rem;
            opacity: 0.9;
            background: rgb(var(--body-bg-rgb));
          }
          &.child2, .child3 {
            &:before {
              border-start-start-radius: 0px;
              border-start-end-radius: 0.25rem;
              border-end-end-radius: 0.25rem;
              border-end-start-radius: 0px;
            }
          }
          
        }

        &[data-menu-styles="color"],
        &[data-menu-styles="dark"],
        &[data-menu-styles="gradient"] {
          ul.slide-menu:before {
            display: none;
          }
        }

        &[data-theme-mode="dark"] {
          &[data-menu-styles="light"] {
            ul.slide-menu:before {
              background: rgb(245, 246, 247);
            }
          }

          &[data-menu-styles="dark"] {
            ul.slide-menu:before {
              display: block;
            }
          }
        }

        &[data-nav-layout="horizontal"][data-menu-styles="dark"][data-theme-mode="light"] {
          .app-sidebar .slide.has-sub .slide-menu {
            background: #202025;
          }
        }
      }
    }

    &[data-nav-layout="vertical"] {

      &[data-menu-styles="color"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-menu-styles="color"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"] {
        .app-sidebar .main-sidebar-header {
          background-color: variables.$primary;
        }
      }

      &[data-menu-styles="gradient"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-menu-styles="gradient"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"] {
        .app-sidebar .main-sidebar-header {
          background: linear-gradient(to right,
              var(--primary-color) 0,
              #FF3DBB 100%);
        }
      }

      &[data-menu-styles="dark"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-menu-styles="dark"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"] {
        .app-sidebar .main-sidebar-header {
          background-color: transparent;
        }
      }
    }

    &[data-theme-mode="dark"] {
      &[data-menu-styles="transparent"] {
        .app-sidebar {
          .slide.has-sub {
            .slide-menu {

              &.child1,
              &.child2,
              &.child3 {
                background-color: transparent;
              }
            }
          }
        }

        &[data-nav-style="menu-click"][data-toggled="menu-click-closed"],
        &[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
        &[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"],
        &[data-nav-style="icon-click"][data-toggled="icon-click-closed"] {
          .app-sidebar {
            .slide.has-sub {
              .slide-menu {

                &.child1,
                &.child2,
                &.child3 {
                  background-color: variables.$custom-white !important;
                }
              }
            }
          }
        }

        @media (min-width:992px) {
          &[data-vertical-style="doublemenu"] {
            .app-sidebar {
              .slide.has-sub {
                .slide-menu {

                  &.child1,
                  &.child2,
                  &.child3 {
                    background-color: variables.$default-body-color !important;
                  }
                }
              }
            }
          }
        }
      }
    }

    &[data-theme-mode="light"] {
      &[data-menu-styles="dark"] {
        .app-sidebar:before {
          background-color: rgba(0, 0, 0, 0.8);
        }
      }

      &[data-menu-styles="transparent"] {
        .app-sidebar {
          .slide.has-sub {
            .slide-menu {

              &.child1,
              &.child2,
              &.child3 {
                background-color: transparent;
              }
            }
          }
        }

        &[data-vertical-style="doublemenu"] {

          .app-sidebar {
            .slide.has-sub {
              .slide-menu {

                &.child1,
                &.child2,
                &.child3 {
                  background-color: variables.$default-body-color !important;
                }
              }
            }
          }
        }

      }
    }
  }

  .app-sidebar:before {
    background-color: rgba(var(--body-bg-rgb), 0.8);
  }

  @include slide-menu-bg(variables.$white);

  @media(min-width: 992px) {
    &[data-vertical-style="doublemenu"] {
      .slide.has-sub .slide-menu {
        background-color: variables.$white;
        background-image: none;
      }
    }
  }

  &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
  &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
  &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
  &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
    .app-sidebar {
      .slide.has-sub .slide-menu {
        background-color: variables.$white;
        background-image: none;
      }
    }

    .app-sidebar {
      position: absolute;
    }
  }

  &[data-menu-styles="light"] {
    .app-sidebar:before {
      background-color: rgba(255, 255, 255, 0.85);
    }

    &[data-vertical-style="doublemenu"] {
      .slide.has-sub .slide-menu {
        background-color: variables.$white !important;
        background-image: none;
      }
    }
  }

  &[data-menu-styles="dark"] {
    @include slide-menu-bg(rgba(0, 0, 0, 0.9));

    @media(min-width: 992px) {
      &[data-vertical-style="doublemenu"] {
        .slide.has-sub .slide-menu {
          background-color: var(--custom-white);
          background-image: none;
        }
      }
    }

    &[data-theme-mode="light"] {
      &[data-vertical-style="doublemenu"] {
        .slide.has-sub .slide-menu {
          background-color: #202025;
        }
      }
    }

    &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar {
        .slide.has-sub .slide-menu {
          background-color: #202025;
          background-image: none;
        }
      }
    }
  }

  &[data-theme-mode="dark"] {
    @media (min-width: 992px) {
      &[data-vertical-style="doublemenu"] {
        .slide.has-sub .slide-menu {
          background-color: rgb(var(--body-bg-rgb));
        }
      }
    }

    &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar {
        .slide.has-sub .slide-menu {
          background-color: var(--custom-white);
          background-image: none;
        }
      }
    }

    &[data-menu-styles="light"] {

      &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
      &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
      &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
        .app-sidebar {
          .slide.has-sub .slide-menu {
            background-color: #fff;
            background-image: none;
          }
        }
      }
    }
  }

  &[data-menu-styles="color"] {
    .app-sidebar:before {
      background-color: variables.$primary;
      opacity: 0.9;
    }

    @media(min-width: 992px) {
      &[data-vertical-style="doublemenu"] {
        .slide.has-sub .slide-menu {
          background-color: variables.$primary;
          background-image: none;
        }
      }
    }

    &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar {
        .slide.has-sub .slide-menu {
          background-color: variables.$primary;
          background-image: none;
        }
      }
    }
  }

  &[data-menu-styles="gradient"] {
    .app-sidebar:before {
      background: linear-gradient(to right, #{variables.$primary} 0%, #FF3DBB 100%);
      opacity: 0.9;
    }

    @media(min-width: 992px) {
      &[data-vertical-style="doublemenu"] {
        .slide.has-sub .slide-menu {
          background-color: variables.$primary;
          background-image: none;
        }
      }
    }

    &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar {
        .slide.has-sub .slide-menu {
          background-color: variables.$primary;
          background-image: none;
        }
      }
    }
  }

  &[data-menu-styles="transparent"] {
    &[data-theme-mode="dark"] {
      --menu-prime-color: rgba(255, 255, 255, 0.6);
    }

    .app-sidebar:before {
      background-color: variables.$default-body-color;
      opacity: 0.9;
    }

    @include slide-menu-bg(variables.$white);

    @media(min-width: 992px) {
      &[data-vertical-style="doublemenu"] {
        .slide.has-sub .slide-menu {
          background-color: transparent;
          background-image: none;
        }
      }
    }

    &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
    &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
      .app-sidebar {
        .slide.has-sub .slide-menu {
          background-color: variables.$default-body-color;
          background-image: none;
        }
      }
    }
  }

  .app-sidebar {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-inline-end: 0;

    .main-sidebar-header {
      background: transparent;
      border-inline-end: 0;
    }

    &:before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  }
}

//bg-img1 start
[data-bg-img="bgimg1"] {
  --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img1.jpg);
  @extend .bg-img;

  &[data-menu-styles="transparent"][data-theme-mode="dark"] {
    --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img1.jpg);
  }
}

//bg-img1 end

//bg-img2 start
[data-bg-img="bgimg2"] {
  --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img2.jpg);
  @extend .bg-img;

  &[data-menu-styles="transparent"][data-theme-mode="dark"] {
    --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img2.jpg);
  }
}

//bg-img2 end

//bg-img3 start
[data-bg-img="bgimg3"] {
  --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img3.jpg);
  @extend .bg-img;

  &[data-menu-styles="transparent"][data-theme-mode="dark"] {
    --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img3.jpg);
  }
}

//bg-img3 end

//bg-img4 start
[data-bg-img="bgimg4"] {
  --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img4.jpg);
  @extend .bg-img;

  &[data-menu-styles="transparent"][data-theme-mode="dark"] {
    --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img4.jpg);
  }
}

//bg-img4 end

//bg-img5 start
[data-bg-img="bgimg5"] {
  --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img5.jpg);
  @extend .bg-img;

  &[data-menu-styles="transparent"][data-theme-mode="dark"] {
    --menu-bg: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/bg-img5.jpg);
  }
}

//bg-img5 end

[data-vertical-style="icontext"] {

  &[data-bg-img="bgimg1"],
  &[data-bg-img="bgimg2"],
  &[data-bg-img="bgimg3"],
  &[data-bg-img="bgimg4"],
  &[data-bg-img="bgimg5"] {
    .app-sidebar {
      &.sticky {
        .main-sidebar-header {
          backdrop-filter: blur(30px);
        }
      }
    }
  }
}

/* Menu Background Image Styles */

/* Loader Styles */
[loader="disable"] {
  #loader {
    display: none;
  }
}

/* Loader Styles */

/* Menu Toggle Button */
[data-toggled=close-menu-close] .animated-arrow span,
[data-toggled=detached-close] .animated-arrow span,
[data-toggled=icon-click-closed] .animated-arrow span,
[data-toggled=icon-hover-closed] .animated-arrow span,
[data-toggled=icon-overlay-close] .animated-arrow span,
[data-toggled=icon-text-close] .animated-arrow span,
[data-toggled=menu-click-closed] .animated-arrow span,
[data-toggled=menu-hover-closed] .animated-arrow span {
  background-color: transparent;
  background: 0 0 !important;
}

[data-toggled=close-menu-close] .animated-arrow span:before,
[data-toggled=detached-close] .animated-arrow span:before,
[data-toggled=icon-click-closed] .animated-arrow span:before,
[data-toggled=icon-hover-closed] .animated-arrow span:before,
[data-toggled=icon-overlay-close] .animated-arrow span:before,
[data-toggled=icon-text-close] .animated-arrow span:before,
[data-toggled=menu-click-closed] .animated-arrow span:before,
[data-toggled=menu-hover-closed] .animated-arrow span:before {
  inset-block-start: -1px;
}

[data-toggled=close-menu-close] .animated-arrow span:after,
[data-toggled=detached-close] .animated-arrow span:after,
[data-toggled=icon-click-closed] .animated-arrow span:after,
[data-toggled=icon-hover-closed] .animated-arrow span:after,
[data-toggled=icon-overlay-close] .animated-arrow span:after,
[data-toggled=icon-text-close] .animated-arrow span:after,
[data-toggled=menu-click-closed] .animated-arrow span:after,
[data-toggled=menu-hover-closed] .animated-arrow span:after {
  width: 1.0625rem;
  inset-block-start: -1px;
}

[data-toggled=close-menu-close] .animated-arrow span:after,
[data-toggled=detached-close] .animated-arrow span:after,
[data-toggled=icon-click-closed] .animated-arrow span:after,
[data-toggled=icon-hover-closed] .animated-arrow span:after,
[data-toggled=icon-overlay-close] .animated-arrow span:after,
[data-toggled=icon-text-close] .animated-arrow span:after,
[data-toggled=menu-click-closed] .animated-arrow span:after,
[data-toggled=menu-hover-closed] .animated-arrow span:after {
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

[data-toggled=close-menu-close] .animated-arrow span:before,
[data-toggled=detached-close] .animated-arrow span:before,
[data-toggled=icon-click-closed] .animated-arrow span:before,
[data-toggled=icon-hover-closed] .animated-arrow span:before,
[data-toggled=icon-overlay-close] .animated-arrow span:before,
[data-toggled=icon-text-close] .animated-arrow span:before,
[data-toggled=menu-click-closed] .animated-arrow span:before,
[data-toggled=menu-hover-closed] .animated-arrow span:before {
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  bottom: 0;
}

/* Menu Toggle Button */

/* transparent menu & header border horizontal*/
[data-nav-layout="horizontal"][data-header-styles="transparent"][data-menu-styles="transparent"] {
  .app-header {
    border-block-end: 1px solid variables.$header-border-color;
  }
}

/* transparent menu & header border horizontal*/

@media(max-width: 992px) {
  .main-content {
    &.app-content {
      padding-inline: 1rem;
    }
  }
}

.theme-colors .switch-select .color-input.color-transparent {
  background-image: url(http://127.0.0.1:8000/build/assets/images/menu-bg-images/transparent.png) !important;
}

[data-theme-mode="dark"][data-menu-styles="light"] {
  .app-sidebar .side-menu__icon {
    color: var(--menu-prime-color) !important;
    fill: var(--menu-prime-color) !important;
  }
  .doublemenu_slide-menu{
    background-color: #fff;
  }
  .app-sidebar{
  .slide-menu{
    --light-rgb: 250, 248, 253;
  }
  }
}

.doublemenu_slide-menu{
  .btn-white{
    background-color: #fff !important;
    color: #000 !important;
  }
}

[data-theme-mode="dark"][data-header-styles="light"]{
  .main-header-container .header-link-icon {
    background-color: rgba(0,0,0,0.05);
    fill: #61748f;
    color: #61748f;
  }
}

[data-page-style="modern"]{
  .app-sidebar{
    .slide.has-sub .slide-menu {
      --light-rgb: 248, 249, 253;
    }
  }
}

@media (min-width: 992px) {
  [data-vertical-style="doublemenu"][data-width="boxed"]{
     .slide.has-sub .slide-menu {
      height: 100% !important;
     }
  }
}

[data-nav-layout=horizontal][data-theme-mode=dark][data-menu-styles=light] .app-sidebar .slide.has-sub .slide-menu {
  box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.1);
}
[data-theme-mode="dark"] {
  &[data-vertical-style="doublemenu"][data-menu-styles="light"] .side-menu-doublemenu__icon {
    color: #6c7e96;
    fill: #6c7e96;
  }
}

[data-theme-mode=dark] .switch-select .form-check-input.color-transparent,
[data-theme-mode=dark] .switch-select .form-check-input.color-gradient {
  border: 0 !important;
}

[data-menu-styles=light][data-theme-mode=dark]{
  &[data-nav-style=icon-click][data-toggled=icon-click-closed],
  &[data-nav-style=icon-hover][data-toggled=icon-hover-closed],
  &[data-nav-style=menu-click][data-toggled=menu-click-closed],
  &[data-nav-style=menu-hover][data-toggled=menu-hover-closed]{
    .app-sidebar .slide.has-sub .slide-menu {
      box-shadow: 0.125rem 0.063rem 0.5rem rgba(0, 0, 0, 0.1);
    }
  }
}

[data-vertical-style=detached] .app-content {
  margin-block-start: 4.5rem !important;
}

[data-theme-mode="dark"][data-menu-styles=light] { 
  .side-menu__label1 {
    border-block-end: 1px solid variables.$menu-border-color !important;
  }
}

@media (min-width: 992px) {
  [data-nav-style="icon-click"], [data-nav-style="icon-hover"] {
  &[data-nav-layout=horizontal] .slide.side-menu__label1 {
      border-block-end: 1px solid variables.$menu-border-color !important;
    }
  }
}

[data-nav-style="menu-click"], [data-nav-style="menu-hover"], [data-nav-style="icon-click"], [data-nav-style="icon-hover"]{
  .app-sidebar .slide-menu.child1 > .slide.active > .side-menu__item.active .side-menu__angle {
    color: variables.$primary;
  }
}

[data-menu-styles="dark"]{
  .app-sidebar .slide-menu.child1 > .slide.active > .side-menu__item.active {
    color: variables.$white;
  }
}

[data-nav-style=icon-click][data-toggled=icon-click-closed], [data-nav-style=icon-hover][data-nav-style="icon-hover"]{
  &[data-menu-styles="dark"],
  &[data-menu-styles="color"],
  &[data-menu-styles="gradient"]{
    .slide.side-menu__label1 {
      border-block-end: 1px solid variables.$menu-border-color !important;
    }
  }
}
[data-theme-mode="dark"][data-menu-styles="transparent"]{
  &[data-bg-img=bgimg1], 
  &[data-bg-img=bgimg2], 
  &[data-bg-img=bgimg3], 
  &[data-bg-img=bgimg4], 
  &[data-bg-img=bgimg5] {
    .app-sidebar .doublemenu_slide-menu {
      background: variables.$default-body-color !important;
    }
  }
}