/* 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.5rem;
    line-height: 1.5rem;
  }
}

/* Respoonsive Logo Styles */

/* RTL Styles */
[dir="rtl"] {
  &[data-card-style="style2"] {
    .card.custom-card .top-right:before {
      transform: rotate(-45deg);;
    }
    .card.custom-card:before {
      transform: rotate(-45deg);
    }
  }
}

/* RTL 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: rgb(245, 245, 245, 0.1) 0 0.5rem 1.5rem !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;
      }
    }
  }
}

// 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);
      backdrop-filter: blur(30px);
    }

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

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

//toggle open end

/* Responsive Menu Styles */

/* Layout Width Styles */

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

    .page {
      width: 1400px;
      margin: 0 auto;
      position: relative;
      box-shadow: 0 0 1rem $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: $custom-white;
      }

      .card {
        box-shadow: none;
      }
    }

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

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

    &[data-vertical-style="detached"] {
      .page {
        .app-header {
          width: 1400px;
        }

        width: 1400px;
      }

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

      .app-header .main-header-container {
        width: 99%;
        padding-inline: 10px;
      }

      .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;
      backdrop-filter: blur(30px);

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

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

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

    &[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;
        height: 100%;
      }

      .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-vertical-style="overlay"], &[data-vertical-style="default-menu"] {
      .app-header {
        border-bottom: 0;
      }
      .main-header-container {
        border-bottom: 1px solid $default-border;
      }
      .main-sidebar-header {
        border-bottom: 1px solid $default-border;
      }
    }
  }

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

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

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

    .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 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));
          }
        }

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

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

          &[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="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-menu-styles="transparent"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
      &[data-menu-styles="transparent"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"] {
        .app-sidebar .main-sidebar-header {
          background-color: rgb(var(--body-bg-rgb));
        }
      }
    }

    &[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: $custom-white !important;
                }
              }
            }
          }
        }

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

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

                &.child1,
                &.child2,
                &.child3 {
                  background-color: $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: $default-body-color !important;
                }
              }
            }
          }
        }

      }
    }
  }

  &[data-card-style="style9"] .app-sidebar:before {
    transform: rotate(0deg);
    border: 0;
  }

  .app-sidebar:before {
    background-image: linear-gradient(to bottom right, var(--default-body-bg-color) 0%, var(--theme-bg-gradient) 25%, var(--default-body-bg-color) 100%);
    opacity: 0.9;
  }

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

  &[data-vertical-style="doublemenu"] {
    .slide.has-sub .slide-menu {
      background-color: $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: $white;
        background-image: none;
      }
    }

    .app-sidebar {
      position: absolute;
    }
  }

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

    &[data-vertical-style="doublemenu"] {
      // .slide.has-sub .slide-menu {
      //   background: $default-background;
      // }
      .app-sidebar {
        .slide.has-sub {
          .slide-menu {

            &.child1 {
              background-color: $default-background;
            }

            &.child2,
            &.child3 {
              background: transparent !important;
            }
          }
        }
      }
    }

    &[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: $default-background;
        }
      }
    }
  }

  &[data-theme-mode="dark"] {
    &[data-vertical-style="doublemenu"] {
      .slide.has-sub .slide-menu {
        background-color: $default-background;
      }
    }

    &[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="transparent"] {
    &[data-theme-mode="dark"] {
      --menu-prime-color: rgba(255, 255, 255, 0.6);
    }

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

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

    &[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: $default-body-color;
          background-image: none;
        }
      }
    }
  }

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

    .main-sidebar-header {
      background: transparent;
      border-inline-end: 0;
      border-block-end: 1px solid $default-border;
    }

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

  @media (min-width: 991.98px) {
    &[data-nav-layout=horizontal] .app-sidebar {
      border-block: 0 !important;
    }
  }
}

//bg-img1 start
[data-bg-img="bgimg1"][data-theme-mode="dark"] {
  .app-sidebar {
    background-image: url(../images/menu-bg-images/bg-img1.jpg);
  }

  @extend .bg-img;
}

//bg-img1 end

//bg-img2 start
[data-bg-img="bgimg2"][data-theme-mode="dark"] {
  .app-sidebar {
    background-image: url(../images/menu-bg-images/bg-img2.jpg);
  }

  @extend .bg-img;
}

//bg-img2 end

//bg-img3 start
[data-bg-img="bgimg3"][data-theme-mode="dark"] {
  .app-sidebar {
    background-image: url(../images/menu-bg-images/bg-img3.jpg);
  }

  @extend .bg-img;
}

//bg-img3 end

//bg-img4 start
[data-bg-img="bgimg4"][data-theme-mode="dark"] {
  .app-sidebar {
    background-image: url(../images/menu-bg-images/bg-img4.jpg);
  }

  @extend .bg-img;
}

//bg-img4 end

//bg-img5 start
[data-bg-img="bgimg5"][data-theme-mode="dark"] {
  .app-sidebar {
    background-image: url(../images/menu-bg-images/bg-img5.jpg);
  }

  @extend .bg-img;
}

//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 */

// bg-pattern1 start
[data-pattern-img="bgpattern1"] {
  --bg-pattern: url(../images/media/Patterns/p1.png);
}

// bg-pattern1 end

// bg-pattern2 start
[data-pattern-img="bgpattern2"] {
  --bg-pattern: url(../images/media/Patterns/p2.png);
}

// bg-pattern2 end

// bg-pattern3 start
[data-pattern-img="bgpattern3"] {
  --bg-pattern: url(../images/media/Patterns/p3.svg);
}

// bg-pattern3 end

// bg-pattern4 start
[data-pattern-img="bgpattern4"] {
  --bg-pattern: url(../images/media/Patterns/p4.svg);
}

// bg-pattern4 end

// bg-pattern5 start
[data-pattern-img="bgpattern5"] {
  --bg-pattern: url(../images/media/Patterns/p5.png);
}

// bg-pattern5 end

// bg-pattern6 start
[data-pattern-img="bgpattern6"] {
  --bg-pattern: url(../images/media/Patterns/p6.svg);
}

// bg-pattern6 end

// bg-pattern7 start
[data-pattern-img="bgpattern7"] {
  --bg-pattern: url(../images/media/Patterns/p7.png);
}

// bg-pattern7 end

// bg-pattern8 start
[data-pattern-img="bgpattern8"] {
  --bg-pattern: url(../images/media/Patterns/p8.svg);
}

// bg-pattern8 end

// bg-pattern9 start
[data-pattern-img="bgpattern9"] {
  --bg-pattern: url(../images/media/Patterns/p9.png);
}

// bg-pattern9 end

// bg-pattern10 start
[data-pattern-img="bgpattern10"] {
  --bg-pattern: url(../images/media/Patterns/p10.png);
}

// bg-pattern10 end

/* Start:: card styles */
// card-style1 start
[data-card-style="style1"] {

  .app-sidebar,
  .card.custom-card,
  .page-header-breadcrumb {

    .top-left {
      position: absolute;
      top: 0;
      height: 2px;
      inset-inline-start: 0;
      background: rgba(255, 255, 255, 0.1);
      width: 20px;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 100%;
        background: linear-gradient(to right, transparent, $primary);
        inset-inline-end: 0;
      }
    }

    .top-right {
      position: absolute;
      top: 0;
      height: 2px;
      inset-inline-end: 0;
      background: rgba(255, 255, 255, 0.1);
      width: 20px;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 100%;
        background: linear-gradient(to left, transparent, $primary);
        inset-inline-start: 0;
      }
    }

    .bottom-left {
      position: absolute;
      bottom: 0;
      height: 2px;
      inset-inline-start: 0;
      background: rgba(255, 255, 255, 0.1);
      width: 20px;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 100%;
        background: linear-gradient(to right, transparent, $primary);
        inset-inline-end: 0;
      }
    }

    .bottom-right {
      position: absolute;
      bottom: 0;
      height: 2px;
      inset-inline-end: 0;
      background: rgba(255, 255, 255, 0.1);
      width: 20px;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 100%;
        background: linear-gradient(to left, transparent, $primary);
        inset-inline-start: 0;
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border-inline: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}

// card-style1 end

// card-style2 start
[data-card-style="style2"] {

  .app-sidebar,
  .page-header-breadcrumb {
    border: 0;
    background: rgba(var(--primary-rgb), 0.025);

    .top-left {
      position: absolute;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, var(--primary-color), transparent);
      inset-block-start: 0;
      inset-inline-start: 0;

      &:before {
        content: "";
        position: absolute;
        width: 15px;
        height: 3px;
        background-color: var(--primary-color);
        inset-inline-end: 0;
        inset-block-start: 0;
      }
    }

    .top-right {
      position: absolute;
      height: 100%;
      width: 1px;
      background: var(--primary01);
      inset-block-start: 0;
      inset-inline-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 3px;
        height: 15px;
        background-color: var(--primary-color);
        inset-inline-end: 0;
        inset-block-start: 0;
      }
    }

    .bottom-left {
      position: absolute;
      width: 1px;
      height: 100%;
      background: linear-gradient(to bottom, var(--primary-color), transparent);
      inset-block-start: 0;
      inset-inline-start: 0;
    }

    .bottom-right {
      position: absolute;
      width: 100%;
      height: 1px;
      background: var(--primary01);
      inset-block-end: 0;
      inset-inline-start: 0;
    }
  }

  .card.custom-card {
    border: 0;
    background: rgba(var(--primary-rgb), 0.025);

    &:before {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: transparent;
      transform: rotate(45deg);
      inset-inline-end: -14px;
      inset-block-start: -14px;
      border-block-end: 1px solid var(--primary01);
    }

    .top-left {
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      width: 1px;
      height: 100%;
      background: linear-gradient(to top, transparent, var(--primary-color));

      &:before {
        z-index: 1;
        content: "";
        position: absolute;
        height: 15px;
        width: 3px;
        background-color: var(--primary-color);
        inset-inline-start: 0;
        inset-block-end: 0px;
      }
    }

    .top-right {
      position: absolute;
      height: 1px;
      inset-block-start: 0;
      inset-inline-start: 0;
      inset-inline-end: 20px;
      background-color: rgba(var(--primary-rgb), 0.1);

      &:before {
        z-index: 1;
        content: "";
        position: absolute;
        transform: rotate(45deg);
        width: 0;
        height: 0;
        inset-inline-end: -28px;
        inset-block-start: -2px;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid var(--primary-color);
      }
    }

    .bottom-left {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--primary-color));

      &:before {
        content: "";
        position: absolute;
        width: 15px;
        height: 3px;
        background-color: $primary;
        inset-inline-start: 0;
        inset-block-end: 0;
      }
    }

    .bottom-right {
      position: absolute;
      width: 1px;
      top: 20px;
      bottom: 0;
      inset-inline-end: 0;
      background-color: rgba(var(--primary-rgb), 0.1);

      &:before {
        content: "";
        position: absolute;
        height: 2.125rem;
        width: 4px;
        background-color: var(--primary-color);
        inset-inline-end: 0px;
        inset-block-end: 1rem;
        border-start-start-radius: 20px;
        border-start-end-radius: 0px;
        border-end-end-radius: 0px;
        border-end-start-radius: 20px;
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border: 0;
    }
  }
}

// card-style2 end

// card-style3 start
[data-card-style="style3"] {

  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    border: 0;
    border-block: 1px solid rgba(var(--primary-rgb), 0.1);

    &:before {
      content: "";
      position: absolute;
      width: 50px;
      height: 3px;
      background-color: $primary-07;
      inset-block-start: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 0;
    }

    &:after {
      content: "";
      position: absolute;
      width: 50px;
      height: 3px;
      background-color: $primary-07;
      inset-block-end: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 0;
    }

    .top-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: linear-gradient(to right, var(--primary-color), transparent);
        inset-inline-start: 0;
        inset-block-start: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 30px;
        background: linear-gradient(to bottom, var(--primary-color), transparent);
        inset-inline-start: 0;
        inset-block-start: 0;
      }
    }

    .top-right {
      inset-block-start: 0;
      inset-inline-end: 0;
      position: absolute;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: linear-gradient(to left, var(--primary-color), transparent);
        inset-inline-end: 0;
        inset-block-start: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 30px;
        background: linear-gradient(to bottom, var(--primary-color), transparent);
        inset-inline-end: 0;
        inset-block-start: 0;
      }
    }

    .bottom-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: linear-gradient(to right, var(--primary-color), transparent);
        inset-inline-start: 0;
        inset-block-end: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 30px;
        background: linear-gradient(to top, var(--primary-color), transparent);
        inset-inline-start: 0;
        inset-block-end: 0;
      }
    }

    .bottom-right {
      position: absolute;
      inset-inline-end: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: linear-gradient(to left, var(--primary-color), transparent);
        inset-inline-end: 0;
        inset-block-end: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 30px;
        background: linear-gradient(to top, var(--primary-color), transparent);
        inset-inline-end: 0;
        inset-block-end: 0;
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border: 0;
    }
  }
}

// card-style3 end

// card-style4 start
[data-card-style="style4"] {

  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    border: 0;

    .top-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 1px;
        background: $primary;
        inset-inline-start: 3px;
        inset-block-start: 3px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 10px;
        background: $primary;
        inset-inline-start: 3px;
        inset-block-start: 3px;
      }
    }

    .top-right {
      inset-block-start: 0;
      inset-inline-end: 0;
      position: absolute;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 1px;
        background: $primary;
        inset-inline-end: 3px;
        inset-block-start: 3px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 10px;
        background: $primary;
        inset-inline-end: 3px;
        inset-block-start: 3px;
      }
    }

    .bottom-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 1px;
        background: $primary;
        inset-inline-start: 3px;
        inset-block-end: 3px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 10px;
        background: $primary;
        inset-inline-start: 3px;
        inset-block-end: 3px;
      }
    }

    .bottom-right {
      position: absolute;
      inset-inline-end: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 1px;
        background: $primary;
        inset-inline-end: 3px;
        inset-block-end: 3px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 10px;
        background: $primary;
        inset-inline-end: 3px;
        inset-block-end: 3px;
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border: 1px solid $primary-01;
    }
  }
}

// card-style4 end

// card-style5 start
[data-card-style="style5"] {

  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    background: transparent;

    .top-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: $primary-05;
        inset-inline-start: 0;
        inset-block-start: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background: $primary-05;
        inset-inline-start: 30px;
        inset-block-start: -2px;
        border-radius: 50%;
      }
    }

    .top-right {
      inset-block-start: 0;
      inset-inline-end: 0;
      position: absolute;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: $primary-05;
        inset-inline-end: 0;
        inset-block-start: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background: $primary-05;
        inset-inline-end: 30px;
        inset-block-start: -2px;
        border-radius: 50%;
      }
    }

    .bottom-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: $primary-05;
        inset-inline-start: 0;
        inset-block-end: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background: $primary-05;
        inset-inline-start: 30px;
        inset-block-end: -2px;
        border-radius: 50%;
      }
    }

    .bottom-right {
      position: absolute;
      inset-inline-end: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 1px;
        background: $primary-05;
        inset-inline-end: 0;
        inset-block-end: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background: $primary-05;
        inset-inline-end: 30px;
        inset-block-end: -2px;
        border-radius: 50%;
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border-inline: 1px solid $primary-05;
    }
  }
}

// card-style5 end

// card-style6 start
[data-card-style="style6"] {
  body {
    background: rgb(10, 10, 10);
  }

  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    border-inline: 0;
    background: rgba(66, 66, 66, 0.4);
    border: 1px solid rgb(95, 95, 95);

    .top-left {
      position: absolute;
    }

    .top-right {
      position: absolute;
    }

    .bottom-left {
      position: absolute;
    }

    .bottom-right {
      position: absolute;
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border-inline: 0;
      border: 1px solid rgb(95, 95, 95, 0.3);
    }
  }
}

// card-style6 end

// card-style7 start
[data-card-style="style7"] {

  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    background: var(--primary005);

    .top-left {
      position: absolute;
      width: 100%;
      inset-inline-start: 0;
      inset-block-start: 0;

      &:before {
        content: "";
        position: absolute;
        width: 25%;
        height: 1px;
        background: linear-gradient(to right, var(--primary05), transparent);
        inset-inline-start: 0;
        inset-block-start: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 75%;
        height: 1px;
        background: linear-gradient(to left, var(--primary05), transparent);
        inset-inline-end: 0;
        inset-block-start: 0;
      }
    }

    .top-right {
      position: absolute;
      width: 50px;
      inset-inline-start: 15%;
      inset-block-start: 0;

      &:before {
        content: "";
        width: 30px;
        height: 2px;
        inset-inline-start: 25%;
        top: -2px;
        background-color: var(--primary08);
        position: absolute;
      }

      &:after {
        content: "";
        width: 30px;
        height: 2px;
        inset-inline-start: 55%;
        top: 0;
        background-color: var(--primary08);
        position: absolute;
      }
    }

    .bottom-left {
      position: absolute;
      width: 100%;
      inset-inline-start: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 75%;
        height: 1px;
        background: linear-gradient(to right, var(--primary05), transparent);
        inset-inline-start: 0;
        inset-block-end: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 25%;
        height: 1px;
        background: linear-gradient(to left, var(--primary05), transparent);
        inset-inline-end: 0;
        inset-block-end: 0;
      }
    }

    .bottom-right {
      position: absolute;
      width: 50px;
      inset-inline-end: 15%;
      inset-block-end: 0;

      &:before {
        content: "";
        width: 30px;
        height: 2px;
        inset-inline-end: 25%;
        top: -2px;
        background-color: var(--primary08);
        position: absolute;
      }

      &:after {
        content: "";
        width: 30px;
        height: 2px;
        inset-inline-end: 55%;
        top: 0;
        background-color: var(--primary08);
        position: absolute;
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border-inline: 1px solid $primary-05;
    }
  }
}

// card-style7 end

//card-style8 start
[data-card-style="style8"] {
  body {
    background: rgb(10, 10, 10);
  }

  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    background: transparent;

    .top-left {
      width: 100%;
      height: 100%;
      position: absolute;
      inset-inline-start: 0;
      z-index: -1;

      &:before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        width: 5px;
        height: 5px;
        background: rgba(var(--primary-rgb), 0.8);
      }

      &:after {
        content: "";
        position: absolute;
        height: 1px;
        background: rgba(var(--primary-rgb), 0.2);
        inset-block-start: 0;
        inset-inline-end: 10px;
        inset-inline-start: 10px;
      }
    }

    .top-right {
      position: absolute;
      width: 100%;
      height: 100%;
      inset-inline-end: 0;
      z-index: -1;

      &:before {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 0;
        width: 5px;
        height: 5px;
        background: rgba(var(--primary-rgb), 0.8);
      }

      &:after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 10px;
        inset-block-end: 10px;
        width: 1px;
        background: rgba(var(--primary-rgb), 0.2);
      }
    }

    .bottom-left {
      width: 100%;
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      z-index: -1;

      &:before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: 0;
        width: 5px;
        height: 5px;
        background: rgba(var(--primary-rgb), 0.8);
      }

      &:after {
        content: "";
        position: absolute;
        height: 1px;
        background: rgba(var(--primary-rgb), 0.2);
        inset-block-end: 0;
        inset-inline-end: 10px;
        inset-inline-start: 10px;
      }
    }

    .bottom-right {
      position: absolute;
      height: 100%;
      width: 100%;
      inset-inline-end: 0;
      z-index: -1;

      &:before {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        inset-block-end: 0;
        width: 5px;
        height: 5px;
        background: rgba(var(--primary-rgb), 0.8);
      }

      &:after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 10px;
        inset-block-end: 10px;
        width: 1px;
        background: rgba(var(--primary-rgb), 0.2);
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border: 0;
    }
  }
}

//card-style8 end

//card-style9 start
[data-card-style="style9"] {
  // .app-sidebar {
  //   &::before {
  //     display: none;
  //   }
  // }
  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    &:before {
      z-index: 1;
      content: "";
      position: absolute;
      transform: rotate(45deg);
      width: 0;
      height: 0;
      inset-inline-end: -2px;
      inset-block-start: 2px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid rgba(var(--primary-rgb), 0.6);
    }

    &:after {
      z-index: 1;
      content: "";
      position: absolute;
      transform: rotate(225deg);
      width: 0;
      height: 0;
      inset-inline-start: -2px;
      inset-block-end: 2px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid rgba(var(--primary-rgb), 0.6);
    }

    .top-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;

      &:before {
        content: "";
        position: absolute;
        width: 18px;
        height: 2px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-start: -1px;
        inset-block-start: -1px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 2px;
        height: 18px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-start: -1px;
        inset-block-start: -1px;
      }
    }

    .top-right {
      inset-block-start: 0;
      inset-inline-end: 0;
      position: absolute;

      &:before {
        content: "";
        position: absolute;
        width: 18px;
        height: 2px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-end: -1px;
        inset-block-start: -1px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 2px;
        height: 18px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-end: -1px;
        inset-block-start: -1px;
      }
    }

    .bottom-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 18px;
        height: 2px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-start: -1px;
        inset-block-end: -1px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 2px;
        height: 18px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-start: -1px;
        inset-block-end: -1px;
      }
    }

    .bottom-right {
      position: absolute;
      inset-inline-end: 0;
      inset-block-end: 0;

      &:before {
        content: "";
        position: absolute;
        width: 16px;
        height: 2px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-end: -1px;
        inset-block-end: -1px;
      }

      &:after {
        content: "";
        position: absolute;
        width: 2px;
        height: 16px;
        background: rgba(var(--primary-rgb), 0.6);
        inset-inline-end: -1px;
        inset-block-end: -1px;
      }
    }
  }

  &[data-card-background="background1"] {

    .app-sidebar,
    .card.custom-card,
    .page-header-breadcrumb {
      border: 1px solid rgba(var(--primary-rgb), 0.1);
    }
  }

  &[dir="rtl"] {
    .card.custom-card, .app-sidebar, .page-header-breadcrumb {
      &:before {
        transform: rotate(-45deg);
      }

      &:after {
        transform: rotate(-225deg);
      }
    }
  }
}

//card-style9 end

//card-style10 start
[data-card-style="style10"] {

  .card.custom-card,
  .app-sidebar,
  .page-header-breadcrumb {
    border-radius: 0 0 25px 0;

    .top-left {
      position: absolute;
      width: 100%;
      height: 100%;
      inset-inline-start: 0;
      inset-block-start: 0;

      &:before {
        content: "";
        position: absolute;
        height: 4px;
        width: 4px;
        background: $warning;
        inset-inline-start: 0;
        inset-block-start: 0;
      }

      &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: rgba(var(--primary-rgb), 0.2);
        inset-block-start: 4px;
        inset-inline-start: 0;
      }
    }

    .top-right {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 0;

      &:before {
        content: "";
        position: absolute;
        height: 4px;
        width: 4px;
        background: $warning;
        inset-inline-end: 0;
        inset-block-start: 0;
      }
    }

    .bottom-left {
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      height: 100%;

      &:before {
        content: "";
        position: absolute;
        height: 4px;
        width: 4px;
        background: $warning;
        inset-inline-start: 0;
        inset-block-end: 0;
      }

      &:after {
        content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        background: rgba(var(--primary-rgb), 0.2);
        inset-inline-start: 4px;
        inset-block-end: 0;
      }
    }

    .bottom-right {
      position: absolute;
    }
  }
}

//card-style10 end

/* End:: card styles */

/* Start:: card background */

//card background style1 start
[data-card-background="background1"] {
  .card.custom-card {
    background: radial-gradient(circle, var(--default-background) 0%, var(--default-background) 40%, rgba(255, 255, 255, 0.075) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }

  .app-sidebar,
  .page-header-breadcrumb {
    background: radial-gradient(circle, var(--default-background) 0%, rgba(255, 255, 255, 0.075) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style1 end

//card background style2 start
[data-card-background="background2"] {
  --default-background: rgba(var(--primary-rgb), 0.1);

  .card.custom-card {
    background: radial-gradient(circle, var(--default-background) 0%, var(--default-background) 40%, rgba(255, 255, 255, 0.025) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }

  .app-sidebar,
  .page-header-breadcrumb {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.025), var(--default-background) 0%, rgba(255, 255, 255, 0.025) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style2 end

//card background style3 start
[data-card-background="background3"] {
  --default-background: rgba(var(--primary-rgb), 0.1);

  .app-sidebar,
  .page-header-breadcrumb {
    background: linear-gradient(to bottom right, var(--default-background) 0%, rgba(0, 0, 0, 0.1) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }

  .card.custom-card {
    background: linear-gradient(to bottom, var(--default-background) 0%, rgba(0, 0, 0, 0.1) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style3 end

//card background style4 start
[data-card-background="background4"] {

  .app-sidebar,
  .card.custom-card,
  .page-header-breadcrumb {
    box-shadow: inset 0px 0px 4px 2px rgba(var(--primary-rgb), 0.2);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style4 end

//card background style5 start
[data-card-background="background5"] {
  --default-background: rgba(0, 0, 0, 0.05);

  .app-sidebar,
  .page-header-breadcrumb {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05) 80%, var(--default-background) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }

  .card.custom-card {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.05) 80%, var(--default-background) 100%);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style5 end

//card background style6 start
[data-card-background="background6"] {

  .app-sidebar,
  .page-header-breadcrumb {
    background: transparent;
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }

  .card.custom-card {
    box-shadow: inset 0px -80px 150px -40px rgba(var(--primary-rgb), 0.5);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style6 end

//card background style7 start
[data-card-background="background7"] {
  body {
    background: rgb(10, 10, 8);
  }

  .app-sidebar,
  .card.custom-card,
  .page-header-breadcrumb {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0px 0px 2px 5px rgb(10, 10, 8);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style7 end

//card background style8 start
[data-card-background="background8"] {
  body {
    background: rgb(10, 10, 8);
  }

  .app-sidebar,
  .card.custom-card,
  .page-header-breadcrumb {
    background: var(--primary005);
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style8 end

//card background style9 start
[data-card-background="background9"] {
  body {
    background: rgb(10, 10, 8);
  }

  .app-sidebar,
  .card.custom-card,
  .page-header-breadcrumb {
    background: transparent;
    border-inline: 1px solid rgba(255, 255, 255, 0.1);
  }
}

//card background style9 end

/* End:: card background */

/* 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 */

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

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

/* dark header styles */