@layer components {
  body {
    &.dark-only {
      @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)];
      .text-white {
        @apply !text-[rgba(255,255,255,1)];
      }
      .\!bg-white {
        @apply !bg-[rgba(var(--dark-card-background),1)];
      }
      .card {
        --tw-card-title-color: rgba(var(--body-font-color), 1);
        --tw-card-subtitle-color: rgba(var(--body-font-color), 1);
        --tw-card-cap-color: rgba(var(--body-font-color), 1);
        --tw-card-color: rgba(var(--body-font-color), 1);
        --tw-body-color: rgba(var(--body-font-color), 1);
      }
      .frame-box {
        .frame-image {
          @apply border-[rgba(var(--recent-border),1)_rgba(var(--dark-card-background),1)_rgba(var(--dark-card-background),1)_rgba(var(--recent-border),1)];
        }
      }
      .card.full-card {
        @apply !border-[rgba(var(--dark-card-border),1)];
      }
      .recent-order {
        .frame-box {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .grid-showcase {
        .grid-wrapper {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
        span {
          @apply border-[rgba(var(--dark-card-border),1)];
        }
      }
      .grid-vertical {
        @apply text-[rgba(var(--hite),0.8)];
      }
      .customers {
        ul {
          li {
            img {
              @apply border-[rgba(var(--dark-card-background),1)];
            }
          }
        }
      }
      .category-box {
        h6 {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .arrow-round {
        .swiper-button-next,
        .swiper-button-prev {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .tagify__dropdown__wrapper {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .page-wrapper {
        .page-header {
          .header-wrapper {
            .nav-right {
              .flip-card {
                .flip-card-inner {
                  .back {
                    .flip-back-content {
                      input {
                        @apply bg-[rgba(var(--dark-body-background),1)];
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .rating-system3 {
        input:checked ~ label {
          @apply shadow-[6px_0_rgba(var(--danger-color),1),3px_1px_0_7px_rgba(var(--dark-card-background),1),3px_1px_0_9px_rgba(var(--danger-color),1)];
        }
      }
      .left-sidebar-wrapper,
      .right-sidebar-chat {
        @apply border-[rgba(var(--dark-border-color),1)];
      }
      .basic-floating {
        .form-floating {
          label {
            @apply text-[rgba(var(--white),0.3)];
          }
        }
      }
      .sidebar-left-wrapper {
        .sidebar-left-icons {
          .nav-item {
            .tab-link {
              .product-icons {
                svg {
                  @apply stroke-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
          }
        }
      }
      [data-bs-toggle="tooltip"] {
        .absolute {
          @apply !bg-[rgba(var(--dark-body-background),1)];
          div {
            @apply !bg-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .text-black {
        @apply text-[rgba(var(--white),0.8)];
      }
      .contacts-tabs {
        .tab-links {
          .tab-link + .tab-link {
            @apply border-[rgba(var(--dark-card-border),0.5)];
          }
        }
      }
      .contacts-tabs {
        .tab-links {
          @apply border-[rgba(var(--dark-card-border),0.5)];
        }
      }
      .market-tabs {
        .border-tab.tab-links {
          .tab-link {
            &.active {
              @apply !bg-[rgba(var(--dark-card-background),1)];
            }
          }
        }
      }
      .form-control-plaintext {
        @apply bg-transparent;
      }
      .kanban-board {
        .kanban-drag {
          .kanban-box {
            h6 {
              @apply text-[rgba(var(--white),0.7)];
            }
          }
        }
      }
      .recent-table {
        table {
          thead {
            @apply !bg-[rgba(var(--light2),1)];
          }
        }
      }
      .tabs {
        .tab-link {
          @apply text-[rgba(var(--secondary-color),1)];
        }
      }
      .bg-navbar {
        .tab-links {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .simple-wrapper {
        &.tab-links {
          .tab-link {
            &.active {
              @apply bg-transparent;
            }
          }
        }
      }
      .tab-links {
        @apply border-b-[rgba(var(--dark-card-border),1)];
      }
      .search-items {
        .common-flex {
          .button-light-secondary {
            @apply text-[rgba(var(--white),0.8)];
          }
        }
      }
      .dropdown .dropdown-menu,
      .btn-group .dropdown-menu {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .modal {
        --bs-modal-color: rgba(var(--white), 0.4);
        --bs-modal-footer-bg: rgba(var(--dark-card-background), 1);
      }
      .form-check-input[type="radio"] {
        &::after {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .form-control {
        @apply bg-[rgba(var(--dark-card-background),1)] border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--white),0.8)];
        &::placeholder {
          @apply !text-[rgba(var(--white),0.3)];
        }
      }
      .c-light {
        @apply text-[rgba(var(--dark-small-font-color),1)];
      }
      .c-o-light {
        @apply text-[rgba(255,255,255,0.5)];
      }
      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(var(--dark-all-font-color), 1);
      }
      input[type="file"] {
        &::file-selector-button {
          @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-card-background),1)];

          &:hover {
            @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .apexcharts-tooltip.light {
        .apexcharts-tooltip-title {
          @apply text-[rgba(var(--white),1)] bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .apexcharts-tooltip.apexcharts-theme-light {
        @apply border border-[rgba(var(--dark-card-border),1)] border-solid bg-[rgba(var(--dark-body-background),1)];
      }
      .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
        @apply border border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid bg-[rgba(var(--dark-body-background),1)];
      }
      .apexcharts-tooltip-series-group {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .apexcharts-yaxistooltip,
      .apexcharts-xaxistooltip {
        @apply text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-card-border),1)] border-solid bg-[rgba(var(--dark-body-background),1)];
      }
      .apexcharts-yaxistooltip-left {
        &::before,
        &::after {
          @apply border-l-[rgba(var(--dark-card-border),1)];
        }
      }
      .apexcharts-xaxistooltip-bottom {
        &::before,
        &::after {
          @apply border-b-[rgba(var(--dark-card-border),1)];
        }
      }
      .bottom-content {
        .apexcharts-canvas {
          span {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .main-setting {
        .tab-links {
          .tab-link {
            @apply bg-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .apexcharts-canvas {
        .apexcharts-tooltip {
          @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
          .apexcharts-tooltip-title {
            @apply mb-0;
          }
          .apexcharts-tooltip-series-group {
            @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .apexcharts-yaxis {
          text {
            @apply fill-[rgba(var(--dark-small-font-color),1)];
          }
        }
      }
      .apexcharts-xaxistooltip {
        @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
      }
      .apexcharts-xaxistooltip-bottom:before {
        @apply border-b-[rgba(var(--dark-card-border),1)];
      }
      .apexcharts-xaxistooltip-bottom:after {
        @apply border-b-[rgba(var(--dark-card-border),1)];
      }
      .apexcharts-tooltip.apexcharts-theme-light {
        @apply border border-[rgba(var(--dark-card-border),1)] border-solid bg-[rgba(var(--dark-body-background),1)];

        .apexcharts-tooltip-text {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
        .apexcharts-tooltip-title {
          @apply border-b-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-small-font-color),1)] bg-[rgba(var(--dark-card-background),1)] border-b border-solid;
        }
      }
      .apexcharts-yaxis {
        text {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .theme-form input[type="text"] {
        @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
      }
      .theme-form textarea {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .selectpicker {
        ~ .custom-dropdown {
          .dropdown-toggle {
            @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)];
          }
          .dropdown-menu {
            @apply bg-[rgba(var(--dark-body-background),1)];
            input {
              @apply bg-[rgba(var(--transparent-color),1)] border-[rgba(var(--white),0.08)];
            }
          }
        }
      }
      .page-body {
        .bg-light {
          @apply !bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .basic-wizard {
        .stepper-horizontal {
          .step {
            .step-circle {
              @apply border-[rgba(var(--dark-card-inbox),1)];
            }

            .step-bar-left {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
          }
        }
      }
      .wizard-4 {
        .step-container {
          @applyborder- [rgba(var(--dark-card-border),1)];
          background: rgba(var(--dark-card-background), 1);
        }

        .login-card {
          .login-main {
            @apply bg-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .total-balance {
        @apply bg-blend-overlay;
      }
      .progress {
        background: rgba(var(--light-all-font-color), 1);
      }
      .icon-state {
        .switch-state {
          &:after {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .breadcrumb-item {
        + .breadcrumb-item {
          &::before {
            @apply text-[rgba(var(--white),0.6)];
          }
        }
      }
      .social-widget {
        .social-icons {
          @apply shadow-[0px_42.1092px_27.8569px_rgba(var(--dark-body-background),1),0px_8.90772px_7.12618px_rgba(var(--dark-body-background),1),0px_2.02448px_3.44162px_rgba(var(--dark-body-background),1)];
        }
      }
      .calendar-basic {
        .md-sidebar-aside {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
        #external-events {
          @apply border-[rgba(var(--dark-card-border),1)];
        }
        .calendar-default {
          .fc {
            .fc-daygrid-day-number,
            .fc-col-header-cell-cushion {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .clockpicker-popover {
        .popover-title {
          @apply bg-[rgba(var(--dark-card-background),1)] border-b-[rgba(var(--dark-card-background),1)];
        }
        &.bottom {
          > .arrow {
            @apply border-b-[rgba(var(--dark-body-background),1)] after:border-b-[rgba(var(--dark-card-background),1)];
          }
        }
        &.top {
          > .arrow {
            @apply border-t-[rgba(var(--dark-body-background),1)] after:border-t-[rgba(var(--dark-card-background),1)];
          }
        }
        &.left {
          > .arrow {
            @apply border-l-[rgba(var(--dark-body-background),1)] after:border-l-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .fc-theme-standard {
        .fc-scrollgrid,
        .fc-list {
          @apply border-[rgba(var(--dark-card-border),1)];
        }
        .fc-list-day-cushion {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .fc {
        .fc-list-event {
          &:hover {
            td {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .currency-widget {
        div[class*="bg-light-"] {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .btn {
        &.badge-light-primary {
          &:hover {
            @apply text-[rgba(var(--white),0.6)];
          }
        }
      }
      .portfolio-chart-container {
        .apexcharts-canvas {
          .apexcharts-radialbar {
            image {
              @apply hidden;
            }
          }
        }
      }
      svg.f-light {
        @apply fill-[rgba(var(--white),0.6)] opacity-100;
      }
      .course-widget {
        .btn-light {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .schedule-list {
        > li {
          @apply shadow-[4px_7px_17px_5px_rgba(var(--dark-body-background),0.3)];
        }
      }
      .upcoming-event-wrap {
        .apexcharts-canvas {
          .apexcharts-data-labels {
            rect {
              @apply fill-none stroke-none;
            }
          }
        }
      }
      .page-wrapper {
        &.material-type {
          &.compact-wrapper {
            .page-header {
              &.close_icon {
                .header-wrapper {
                  @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
                }
              }
            }
          }
        }

        &.advance-layout {
          .page-header {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }

          .page-body-wrapper {
            .sidebar-wrapper {
              @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
            }
          }

          .card {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }

        &.only-body {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .balance-card {
        .svg-box {
          @apply shadow-none bg-[rgba(var(--dark-card-background),1)];

          svg {
            @apply fill-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .f-light {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .apexcharts-tooltip.light {
        .apexcharts-tooltip-title {
          @apply text-[rgba(var(--white),1)] bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .card {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .ecommerce-widget {
        @apply border !border-[rgba(var(--dark-card-border),1)] border-solid;
      }
      .btn-light {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .form-select {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .knowledgebase-search {
        @apply text-[rgba(var(--theme-body-font-color),1)];

        .form-control-plaintext {
          @apply text-[rgba(var(--dark-all-font-color),0.4)];
        }
      }
      .layout-color {
        span,
        h6 {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .toast {
        @apply border border-[rgba(var(--dark-card-border),1)] shadow-[0_0.5rem_1rem_rgb(38_41_50_/_50%)] border-solid;
        -webkit-box-shadow: 0 0.5rem 1rem rgb(38 41 50 / 50%);
        .toast-header {
          @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-b-[rgba(var(--dark-card-border),1)];
        }
        .toast-dark {
          @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .animated-toast {
        .toast {
          @apply bg-[rgba(var(--transparent-color),1)];

          .toast-header {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
          .toast-body {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .toast-container {
        .toast {
          @apply bg-[rgba(var(--transparent-color),1)];
        }
      }
      .default-toasts {
        .card-body {
          &.toast-rtl {
            .toast {
              @apply bg-[rgba(var(--transparent-color),1)];
            }
          }
        }
      }
      .btn-close {
        @apply brightness-[0.8] invert-[1];
      }
      .product-price {
        del {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
      }
      .ProfileCard {
        @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
      }
      .form-control-plaintext {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .form-select {
        @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
      }
      .box-layout {
        @apply bg-[rgba(var(--dark-body-background),1)];

        .page-wrapper,
        &.page-wrapper {
          .page-body-wrapper {
            @apply bg-[rgba(var(--transparent-color),1)];
          }

          .page-header {
            .header-wrapper {
              @apply border border-[rgba(var(--dark-border-color),1)] border-solid;
            }
          }

          &.only-body {
            .page-header {
              .header-wrapper {
                @apply border-[unset];
              }
            }
          }
        }
      }
      .form-check-input {
        @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)];
      }
      .common-toasts {
        .toast {
          @apply border border-[rgba(var(--dark-card-border),1)] border-solid;

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

        .toast-body {
          @apply text-[rgba(var(--dark-editor-document),1)];
        }
      }
      .dt-button-collection {
        @apply bg-[rgba(var(--dark-body-background),1)];

        .dropdown-item {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .dt-autofill-list {
        &.dtaf-popover-closeable {
          @apply bg-[rgba(var(--dark-card-background),1)];

          .dt-autofill-list-items {
            button {
              @apply bg-[rgba(var(--dark-card-inbox),1)] text-[rgba(var(--dark-all-font-color),1)] hover:bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .form-floating {
        .form-control,
        .form-select {
          &:not(:placeholder-shown) {
            ~ label {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];

              &::after {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }

          &:focus {
            ~ label {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];

              &::after {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
      }
      .radio,
      .checkbox {
        label {
          &::before {
            @apply bg-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .checkbox-wrapper,
      .radio-wrapper {
        li {
          .form-check-input {
            @apply bg-transparent;
          }
        }
      }
      .switch-state {
        &:before {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .main-radio-toggle {
        label {
          @apply text-[rgba(var(--dark-all-font-color),1)] hover:text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .main-icon-checkbox {
        .checkbox-wrapper {
          label {
            &::before {
              @apply bg-[rgba(var(--transparent-color),1)];
            }
          }
        }
      }
      .dropdown {
        &.custom-dropdown {
          .dropdown-menu {
            .dropdown-item {
              &:hover {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
            }
          }
        }
      }
      .tooltip {
        &[data-popper-placement="left"] {
          .tooltip-arrow {
            &::before {
              @apply border-l-[rgba(var(--dark-card-inbox),1)];
            }
          }
        }

        &[data-popper-placement="right"] {
          .tooltip-arrow {
            &::before {
              @apply border-r-[rgba(var(--dark-card-inbox),1)];
            }
          }
        }

        &[data-popper-placement="top"] {
          .tooltip-arrow {
            &::before {
              @apply border-t-[rgba(var(--dark-card-inbox),1)];
            }
          }
        }

        &[data-popper-placement="bottom"] {
          .tooltip-arrow {
            &::before {
              @apply border-b-[rgba(var(--dark-card-inbox),1)];
            }
          }
        }

        &.bs-tooltip-top {
          .tooltip-arrow {
            &:before {
              @apply border-t-[rgba(var(--dark-card-inbox),1)];
            }
          }
        }

        &.bs-tooltip-bottom {
          .tooltip-arrow {
            &:before {
              @apply border-b-[rgba(var(--dark-card-inbox),1)] border-t-[rgba(var(--transparent-color),1)];
            }
          }
        }

        &.bs-tooltip-start {
          .tooltip-arrow {
            &:before {
              @apply border-l-[rgba(var(--dark-card-inbox),1)] border-t-[rgba(var(--transparent-color),1)];
            }
          }
        }

        &.bs-tooltip-end {
          .tooltip-arrow {
            &:before {
              @apply border-r-[rgba(var(--dark-card-inbox),1)] border-t-[rgba(var(--transparent-color),1)];
            }
          }
        }

        .tooltip-inner {
          @apply !bg-[rgba(var(--dark-card-inbox),1)] !text-[rgba(var(--white),1)];
        }

        .tooltip-arrow {
          &:before {
            @apply border-t-[rgba(var(--dark-card-inbox),1)];
          }
        }
      }
      .svg-tooltip {
        .common-flex {
          [class*="bg-light-"] {
            border: var(--transparent-color);
          }
        }
      }
      .page-wrapper {
        &.only-body {
          .page-body-wrapper {
            .page-title {
              > .grid {
                .col-span-6 {
                  &:first-child {
                    h6 {
                      @apply text-[rgba(var(--dark-all-font-color),0.5)];
                    }
                  }
                }
              }
            }
          }

          .page-header {
            .header-wrapper {
              .search-full {
                .form-group {
                  .Typeahead {
                    .u-posRelative {
                      @apply bg-[rgba(var(--dark-card-background),1)];
                    }
                  }
                }
              }
            }
          }
          .page-header {
            .header-wrapper {
              .nav-right {
                .notification-dropdown {
                  ul {
                    li {
                      .btn-close {
                        @apply brightness-[0.8] invert-[1];
                      }
                    }
                  }
                }

                .profile-dropdown li span {
                  @apply !text-[rgba(var(--white),1)];
                }

                .flip-card .flip-card-inner {
                  .back {
                    @apply bg-[rgba(var(--dark-body-background),1)];

                    .flip-back-content {
                      input {
                        @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
                      }
                    }

                    li {
                      &:last-child {
                        @apply border-t-[rgba(var(--dark-card-border),1)] border-t border-solid;
                      }
                    }
                  }

                  .front {
                    @apply !bg-[#1d1e26];

                    svg {
                      @apply stroke-[rgba(var(--white),1)];
                    }
                  }
                }

                .cart-dropdown {
                  .total {
                    @apply bg-[rgba(var(--dark-card-background),1)];
                  }

                  .qty-box {
                    .input-group {
                      .btn {
                        @apply text-[rgba(var(--white),0.4)] border-[rgba(var(--dark-card-background),1)] bg-[rgba(var(--dark-card-background),1)];
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .page-header {
          .header-wrapper {
            .nav-right {
              .profile-dropdown {
                li {
                  span {
                    @apply text-[rgba(var(--white),1)];
                  }
                }
              }
            }
          }
        }
      }
      .qty-box {
        input {
          @apply text-[rgba(var(--white),0.5)];
        }
      }
      .customizer-contain {
        @apply text-[rgba(var(--dark-body-background),1)];

        .customizer-header {
          p {
            @apply text-[rgba(var(--dark-editor-document),1)];
          }
        }

        .customizer-body {
          .main-layout {
            .box-layout {
              @apply bg-[rgba(var(--white),1)];
            }
          }
        }
      }
      .login-dark {
        @apply bg-[rgba(var(--dark-card-background),1)] bg-blend-overlay;

        .login-main {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
        }

        &.login-card {
          .login-main {
            .text-muted {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
      }
      .login-card {
        .btn-showcase .btn {
          @apply !bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--white),1)] !border-[rgba(var(--dark-card-background),1)];
        }

        .login-main {
          @apply shadow-[0_0_37px_rgba(var(--white),0.05)];

          .theme-form {
            input {
              @apply !bg-[rgba(var(--dark-card-background),1)];
            }

            .or {
              &:before {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
            }

            .checkbox label::before {
              @apply bg-[rgba(var(--dark-card-background),1)] border-[rgba(var(--dark-card-background),1)];
            }
          }
        }
      }
      .wizard-4 {
        .action-bar {
          .buttonDisabled {
            @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .H_ui {
        ~ div {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .swal-icon--success:after,
      .swal-icon--success:before {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .swal-icon--success__hide-corners {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .note-editor.note-frame {
        .note-status-output {
          @apply border-t-[rgba(var(--dark-card-background),1)] border-t border-solid;
        }

        .note-statusbar {
          @apply border-t-[rgba(var(--dark-card-background),1)] border-t border-solid;

          .note-resizebar {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .page-link {
        @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
      }
      .b-r-light {
        @apply border-r-[rgba(var(--dark-card-border),1)] border-r border-solid;
      }
      .history-details {
        .flex {
          @apply border-t-[rgba(var(--dark-card-border),1)] border-t border-solid;
        }

        > div {
          i {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .modal-header {
        @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
      }
      .placeholder-light {
        @apply bg-[rgba(var(--white),1)];
      }
      #right-history {
        @apply bg-[rgba(var(--dark-card-background),1)] shadow-[0_0_9px_rgba(var(--dark-body-background),1)];

        h6 {
          span {
            a {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .setting-sidebar,
      .layout-sidebar {
        @apply shadow-[0_0_10px_1px_rgba(var(--dark-card-inbox),1)];

        .customizer-body {
          .bg-light {
            @apply !bg-[rgba(var(--dark-body-background),1)];
          }

          h6 {
            @apply text-[rgba(var(--dark-all-font-color),0.7)];
          }

          .main-layout {
            > li {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
          }

          .layout-grid {
            &.customizer-mix {
              .color-layout {
                @apply border-[rgba(var(--dark-card-border),1)];
              }
            }
          }

          .layout-grid:not(.customizer-color) {
            li {
              > .body {
                ul {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }
              }
            }
          }

          .layout-link {
            li {
              @apply bg-[rgba(var(--dark-body-background),1)];

              a {
                @apply text-[rgba(var(--dark-all-font-color),1)];

                i {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }

        .sidebar-type,
        .sidebar-setting {
          > li {
            @apply border-[rgba(var(--dark-card-border),1)];

            a,
            i {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .customizer-contain {
        @apply text-[rgba(var(--dark-body-background),1)];

        .customizer-header {
          p {
            @apply text-[rgba(var(--dark-editor-document),1)];
          }
        }
        .customizer-body {
          .main-layout {
            .box-layout {
              @apply bg-[rgba(var(--white),1)];
            }
          }
        }
      }
      .ProfileCard {
        &:hover {
          @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .translate_wrapper.active .more_lang {
        &:before {
          @apply border-b-[rgba(var(--dark-card-background),1)] border-b-[7px] border-solid;
        }
        .lang {
          @apply border-b-[rgba(var(--dark-body-background),1)] border-b border-solid;
          &:hover {
            @apply !bg-[rgba(var(--theme-default),1)];
          }
        }
      }
      .toggle-sidebar {
        svg {
          @apply stroke-[rgba(var(--theme-default),1)];
        }
      }
      .page-wrapper {
        .page-body-wrapper {
          @apply bg-[rgba(var(--dark-body-background),1)];
          .page-title {
            @apply bg-[rgba(var(--dark-card-background),1)] shadow-[rgba(0,0,0,0.07)_0px_4px_40px];
          }
          div.sidebar-wrapper {
            .sidebar-main {
              .sidebar-links {
                .simplebar-wrapper {
                  .simplebar-mask {
                    .simplebar-content-wrapper {
                      .simplebar-content {
                        > li {
                          a {
                            svg {
                              &.stroke-icon {
                                @apply stroke-[rgba(var(--white),1)];
                              }

                              &.fill-icon {
                                @apply fill-[rgba(var(--white),0.5)] stroke-transparent;
                              }
                            }

                            &.active {
                              svg {
                                &.stroke-icon {
                                  @apply stroke-[rgba(var(--theme-default),1)];
                                }

                                &.fill-icon {
                                  @apply fill-[rgba(var(--theme-default),1)] stroke-transparent;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .sidebar-main {
            .sidebar-links {
              .sidebar-link.active {
                svg {
                  &.stroke-icon {
                    @apply stroke-[rgba(var(--theme-default),1)];
                  }
                }
              }

              li {
                a {
                  span {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }

              .simplebar-wrapper {
                .simplebar-mask {
                  .simplebar-content-wrapper {
                    .simplebar-content {
                      > li {
                        .sidebar-link {
                          &.active {
                            @apply bg-[rgba(var(--primary-color),0.2)];
                          }
                        }

                        .sidebar-submenu {
                          li {
                            a {
                              @apply text-[rgba(var(--dark-all-font-color),1)];

                              &.active {
                                @apply text-[rgba(var(--theme-default),1)];
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }

              .sidebar-list {
                ul.sidebar-submenu {
                  li {
                    a {
                      span {
                        @apply text-[rgba(var(--dark-all-font-color),1)];
                      }

                      &.active {
                        @apply text-[rgba(var(--theme-default),1)];
                      }
                    }
                  }
                }
              }
            }
          }
          .page-body {
            .animate-wrapper {
              .card {
                box-shadow: 1px 1px 2px 1px rgba(var(--dark-body-background), 0.9) !important;
              }
            }
          }
        }
        .page-header {
          @apply shadow-[0px_3px_28px_rgb(50_56_70)];
        }
        .badge-b-light {
          @apply border-[rgba(var(--white),0.4)];

          &.txt-dark {
            @apply !text-[rgba(var(--white),0.6)];
          }
        }
        .badge-b-dark {
          @apply border-[rgba(var(--dark-all-font-color),1)];

          &.txt-dark {
            @apply !text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        &.modern-type {
          .page-body-wrapper {
            &.default-menu {
              @apply bg-[rgba(var(--dark-body-background),1)];

              .page-title {
                @apply bg-transparent border-[none];
              }
            }

            .page-body {
              .page-title {
                @apply bg-[unset];
              }
            }
          }
        }
        .sidebar-main-title {
          p {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        &.compact-wrapper {
          .page-body-wrapper {
            div.sidebar-wrapper {
              @apply bg-[rgba(var(--dark-card-background),1)];

              .sidebar-main {
                .sidebar-links {
                  .sidebar-link.active {
                    svg {
                      @apply stroke-[rgba(var(--theme-default),1)];
                    }
                  }

                  li {
                    a {
                      span {
                        @apply text-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                  }

                  .simplebar-wrapper {
                    .simplebar-mask {
                      .simplebar-content-wrapper {
                        .simplebar-content {
                          > li {
                            .sidebar-link {
                              &.active {
                                @apply bg-[rgba(var(--primary-color),0.2)];
                              }
                            }

                            .sidebar-submenu {
                              li {
                                a {
                                  @apply text-[rgba(var(--dark-all-font-color),1)];

                                  &.active {
                                    @apply text-[rgba(var(--theme-default),1)];
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }

                  .sidebar-list {
                    ul.sidebar-submenu {
                      li {
                        a {
                          span {
                            @apply text-[rgba(var(--dark-all-font-color),1)];
                          }

                          &.active {
                            @apply text-[rgba(var(--theme-default),1)];
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            .according-menu {
              i {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
        &.horizontal-wrapper {
          .page-body-wrapper {
            .sidebar-wrapper {
              @apply border-t-[rgba(var(--dark-card-border),1)] shadow-[0px_9px_24px_rgb(50,56,70)] bg-[rgba(var(--dark-card-background),1)] border-t border-solid;
              .sidebar-main {
                .sidebar-links {
                  .simplebar-wrapper {
                    .simplebar-mask {
                      .simplebar-content-wrapper {
                        .simplebar-content {
                          > li {
                            > a {
                              @apply text-[rgba(var(--dark-all-font-color),1)];
                            }

                            .sidebar-submenu {
                              @apply bg-[rgba(var(--dark-card-background),1)];

                              li {
                                a {
                                  @apply text-[rgba(var(--dark-all-font-color),1)];

                                  &.active,
                                  &:hover {
                                    @apply text-[rgba(var(--theme-default),1)];
                                  }
                                }

                                .sidebar-submenu {
                                  @apply bg-[rgba(var(--dark-card-background),1)];
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }

                .left-arrow,
                .right-arrow {
                  @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
        &.compact-sidebar {
          .page-body-wrapper {
            div {
              &.sidebar-wrapper {
                > div {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }

                .sidebar-main {
                  .sidebar-links {
                    li {
                      .sidebar-title {
                        @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
                      }

                      a {
                        span {
                          @apply text-[rgba(var(--dark-all-font-color),1)];
                        }

                        svg {
                          @apply stroke-[rgba(var(--dark-all-font-color),1)];
                        }
                      }

                      .sidebar-submenu {
                        @apply bg-[rgba(var(--dark-card-background),1)];

                        li {
                          a {
                            @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
                          }
                        }
                      }
                    }

                    .simplebar-wrapper {
                      .simplebar-mask {
                        .simplebar-content-wrapper {
                          .simplebar-content {
                            > li {
                              .sidebar-link {
                                &.active {
                                  @apply bg-[rgba(var(--theme-default),0.2)];

                                  span {
                                    @apply text-[rgba(var(--theme-default),1)];
                                  }

                                  svg {
                                    @apply text-[rgba(var(--theme-default),1)] stroke-[rgba(var(--theme-default),1)];
                                  }
                                }
                              }

                              .sidebar-submenu {
                                li {
                                  a {
                                    @apply text-[rgba(var(--dark-all-font-color),1)];
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }

                    .sidebar-list {
                      ul.sidebar-submenu {
                        li {
                          a {
                            span {
                              @apply text-[rgba(var(--dark-all-font-color),1)];
                            }

                            &.active {
                              @apply text-[rgba(var(--theme-default),1)];
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            .according-menu {
              i {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
        &.compact-small {
          &.material-icon {
            .page-header {
              @apply shadow-[unset];
            }
          }
        }
        &.material-type {
          .page-header {
            .header-wrapper {
              @apply rounded-[15px_15px_0_0];
            }
          }
        }
        &.material-icon {
          .page-header {
            .header-wrapper {
              @apply bg-[rgba(var(--transparent-color),1)];

              .nav-right {
                .language-nav {
                  .more_lang {
                    @apply text-[rgba(var(--white),1)];
                  }
                }

                .onhover-show-div {
                  @apply text-[rgba(var(--white),1)];
                }

                .flip-card {
                  .flip-card-inner {
                    .back {
                      .flip-back-content {
                        input {
                          @apply border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--white),1)] bg-[rgba(var(--dark-body-background),1)] border-solid;
                        }
                      }
                    }
                  }
                }
              }
            }

            .header-logo-wrapper {
              @apply bg-[rgba(var(--transparent-color),1)];
            }
          }

          .page-body-wrapper {
            .page-body {
              @apply bg-[rgba(var(--transparent-color),1)];
            }
          }
        }
        &.advance-layout {
          @apply bg-[rgba(var(--dark-body-background),1)];

          .page-header {
            .header-wrapper {
              @apply bg-[rgba(var(--transparent-color),1)];

              .header-logo-wrapper {
                @apply bg-[rgba(var(--transparent-color),1)];
              }
            }
          }

          .page-body-wrapper {
            @apply bg-[rgba(var(--transparent-color),1)];

            .page-body {
              @apply bg-[rgba(var(--transparent-color),1)];
            }
          }
        }

        &.material-icon {
          .page-body-wrapper {
            .page-title {
              @apply bg-transparent shadow-none border-[none];
            }
          }
        }

        .page-header {
          .header-wrapper {
            .search-full {
              @apply bg-[rgba(var(--dark-card-background),1)];

              input {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }
      ::-webkit-calendar-picker-indicator {
        @apply contrast-[0.2];
      }
      .kanban-item {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .kanban-board-header {
        @apply bg-[rgba(var(--dark-body-background),1)] border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
      }
      .kanban-board .kanban-drag {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .kanban-container {
        .kanban-board {
          @apply bg-[rgba(var(--dark-body-background),1)];

          .kanban-item {
            .kanban-box {
              .date {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
          }

          footer {
            .btn {
              @apply bg-[rgba(var(--dark-card-inbox),1)] hover:bg-[rgba(var(--dark-card-inbox),0.8)];
            }
          }
        }
      }
      .project-box {
        @apply border border-[rgba(var(--theme-default),0.15)] bg-[rgba(var(--dark-body-background),1)] border-solid;
      }
      .file-content {
        .form-inline {
          @apply border border-[rgba(var(--dark-body-background),1)] border-solid;
        }
        .folder .folder-box {
          @apply border border-[rgba(var(--theme-default),0.15)] bg-[rgba(var(--dark-body-background),1)] border-solid;
        }
      }
      .file-sidebar {
        .pricing-plan {
          @apply border border-[rgba(var(--theme-default),0.15)] border-solid;
        }
        .btn-light {
          @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--theme-default),0.15)] border-solid;
        }
      }
      #lnb {
        @apply border-r-[rgba(var(--dark-card-border),1)] border-r border-solid;
      }
      .lnb-new-schedule,
      .lnb-calendars > div {
        @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
      }
      #menu .sidebar-list .btn-default {
        @apply text-[rgba(var(--dark-all-font-color),0.2)];
      }
      .tui-full-calendar-timegrid-hour {
        @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--white),1)];
      }
      .tui-full-calendar-timegrid-gridline {
        @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
      }
      .tui-full-calendar-time-date,
      .tui-full-calendar-weekday-grid-line,
      .tui-full-calendar-left,
      .tui-full-calendar-timegrid-timezone {
        @apply border-r-[rgba(var(--dark-card-border),1)];
      }
      .tui-full-calendar-popup {
        @apply text-[rgba(var(--theme-body-font-color),1)];
      }
      #menu {
        .btn-default {
          @apply text-[rgba(var(--dark-all-font-color),1)] hover:text-[rgba(var(--theme-body-font-color),1)];
        }
        .dropdown-menu {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .tui-full-calendar-dayname-container,
      .tui-full-calendar-splitter {
        @apply border-t-[rgba(var(--dark-card-border),1)] border-b-[rgba(var(--dark-card-border),1)];
      }
      span.tui-full-calendar-dayname-date-area {
        @apply text-[rgba(var(--white),1)];
      }
      .tui-full-calendar-layout {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .blockquote {
        @apply border-l-[rgba(var(--dark-card-border),1)] border-l-4 border-solid;
      }
      .figure {
        &.text-end {
          blockquote {
            @apply border-r-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .contacts-tabs {
        .nav-pills {
          @apply border-r-[rgba(var(--dark-card-border),1)] border-r border-solid;

          .nav-link {
            + .nav-link {
              @apply border-t-[rgba(var(--dark-card-border),1)] border-t border-solid;
            }
          }
        }
      }
      .product-wrapper {
        &.sidebaron {
          .product-sidebar {
            .filter-section {
              .card {
                .left-filter {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }
              }
            }
          }
        }
      }
      .apexcharts-gridline {
        @apply stroke-[rgba(var(--dark-border-color),1)];
      }
      .apexcharts-tooltip-title,
      .apexcharts-tooltip-series-group,
      .apexcharts-tooltip.light,
      .apexcharts-menu-item {
        @apply text-[rgba(var(--black),1)];
      }
      .apexcharts-toolbar {
        .apexcharts-menu-open {
          @apply border-[rgba(var(--dark-card-inbox),1)] bg-[rgba(var(--dark-card-inbox),1)];

          .apexcharts-menu-item {
            @apply opacity-90 text-[rgba(var(--dark-all-font-color),1)];

            &:hover {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .small-donut,
      .donut-peity2,
      .pie-peity {
        ~ svg,
        svg {
          path {
            &:nth-child(even) {
              @apply fill-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .appointment-table {
        table {
          tr {
            td {
              &.img-content-box {
                .font-roboto {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .notification {
        .card {
          .flex {
            .w-full {
              p {
                span {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }

              span {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }
      .datepicker {
        @apply bg-[rgba(var(--dark-card-inbox),1)] text-[rgba(var(--dark-all-font-color),1)];

        .datepicker--cell.-current- {
          @apply text-[rgba(var(--white),1)];
        }

        .datepicker--cell.-current-.-focus- {
          @apply text-[rgba(var(--white),1)];
        }

        .datepicker--cell-day.-other-month-,
        .datepicker--cell-year.-other-decade- {
          @apply text-[rgba(var(--white),0.4)];
        }

        .datepicker--nav {
          @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
        }

        .datepicker--pointer {
          @apply border-t-[rgba(var(--dark-card-inbox),1)] border-r-[rgba(var(--dark-card-inbox),1)] bg-[rgba(var(--dark-card-inbox),1)];
        }
      }
      [class*="activity-dot-"] {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .sm-progress-bar {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .alert-addition-content {
        .alert {
          &[class*="bg-light-"] {
            p {
              @apply text-[rgba(var(--white),0.6)];
            }
          }
        }
      }
      .options {
        > div {
          @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
        }
      }
      .was-validated {
        .custom-control-input {
          &:invalid {
            ~ .custom-control-label {
              &::before {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
      }
      .pricing-simple {
        box-shadow: 1px 1px 2px 1px rgba(var(--dark-body-background), 1) !important;
      }
      .pricing-block {
        @apply shadow-[0_0_10px_5px_rgba(var(--theme-default),0.05)];
      }
      .search-page {
        .nav {
          &.nav-tabs {
            @apply border-b-[unset];
          }
        }

        ul {
          &.search-info {
            li {
              @apply text-[rgba(var(--dark-small-font-color),1)];

              + li {
                @apply border-l-[rgba(var(--light-all-font-color),1)] border-l border-solid;
              }
            }
          }
        }

        .info-block {
          @apply border-[rgba(var(--dark-card-border),1)];

          a {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }

        p:not(.blog-details p) {
          @apply text-[rgba(var(--dark-all-font-color),0.4)];
        }

        .audio-card {
          .audio-content {
            span {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
        .audio-wrapper {
          table {
            &.audio-table {
              &.table-hover {
                thead,
                tbody {
                  tr {
                    &:hover {
                      @apply bg-[rgba(var(--dark-datatable-sorting-even),1)];
                    }
                  }
                }
              }
            }
          }
        }
      }
      .browse {
        .browse-articles {
          h6 {
            @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
          }
        }
      }
      .job-search {
        .job-description {
          ul:not(.job-apply-wrapper .job-search .job-description ul) {
            li {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
          .theme-form {
            .grid {
              div[class^="col-"] {
                .input-group {
                  .datepicker-here {
                    @apply border border-[rgba(var(--dark-body-background),1)] border-solid;
                  }
                }
              }
            }
          }
          ul {
            li {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
      }
      .calendar-wrap {
        .fc-unthemed {
          td,
          th {
            @apply border-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .mega-inline,
      .mega-horizontal,
      .mega-vertical {
        --bs-body-color: rgba(255, 255, 255, 0.6);

        .card {
          @apply !shadow-[1px_1px_7px_0_rgba(var(--dark-card-border),0.5)] border-[rgba(var(--dark-card-border),1)];
        }
        &.plain-style,
        &.border-style,
        &.offer-style {
          .card {
            @apply shadow-none;
          }
        }
        &.border-style {
          .card {
            @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
          }
        }

        &.offer-style {
          .card {
            @apply border border-[rgba(var(--dark-card-border),1)] border-dashed;
          }
        }
      }
      .setting-dot {
        .setting-bg {
          @apply bg-[rgba(var(--theme-secondary),1)];
        }
      }
      .bookmark.pull-right {
        @apply border-[none];
      }
      .popover {
        @apply bg-[rgba(var(--dark-body-background),1)];
        --bs-popover-header-bg: unset;

        &.bs-popover-bottom {
          .popover-arrow {
            &:after {
              @apply border-b-[rgba(var(--dark-body-background),1)] border-r-[rgba(var(--transparent-color),1)];
            }
          }
        }

        &.bs-popover-top {
          .popover-arrow {
            &:after {
              @apply border-r-[rgba(var(--transparent-color),1)] border-t-[rgba(var(--dark-body-background),1)];
            }
          }
        }

        &.bs-popover-start {
          .popover-arrow {
            &:after {
              @apply border-l-[rgba(var(--dark-body-background),1)];
            }
          }
        }

        &[data-popper-placement="left"] {
          .popover-arrow {
            &:after {
              @apply border-l-[rgba(var(--dark-body-background),1)];
            }
          }
        }

        &[data-popper-placement="right"] {
          .popover-arrow {
            &:after {
              @apply border-r-[rgba(var(--dark-body-background),1)];
            }
          }
        }

        &[data-popper-placement="top"] {
          .popover-arrow {
            &:after {
              @apply border-t-[rgba(var(--dark-body-background),1)];
            }
          }
        }

        &[data-popper-placement="bottom"] {
          .popover-arrow {
            &:after {
              @apply border-b-[rgba(var(--dark-body-background),1)];
            }
          }
        }

        .popover-header {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }

        .popover-body {
          @apply text-[rgba(255,255,255,0.6)];
        }

        code {
          @apply bg-[unset];
        }
      }
      .apex-chart-container {
        .apexcharts-legend {
          .apexcharts-legend-series {
            span {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .order-container {
        .apexcharts-canvas {
          .apexcharts-marker {
            @apply stroke-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .apexcharts-canvas {
        svg {
          .apexcharts-title-text {
            @apply fill-[rgba(var(--white),1)];
          }

          .apexcharts-subtitle-text {
            @apply fill-[rgba(var(--white),1)];
          }

          .apexcharts-yaxis {
            .apexcharts-yaxis-texts-g {
              .apexcharts-yaxis-label {
                @apply fill-[rgba(var(--white),1)];
              }
            }
          }

          .apexcharts-xaxis {
            .apexcharts-xaxis-texts-g {
              .apexcharts-xaxis-label {
                @apply fill-[rgba(var(--white),1)];
              }
            }
          }

          .apexcharts-legend-series {
            span {
              @apply !text-[rgba(var(--dark-all-font-color),1)];
            }
          }

          .apexcharts-datalabels-group {
            .apexcharts-datalabel-label {
              @apply fill-[rgba(var(--white),1)];
            }

            .apexcharts-datalabel-value {
              @apply fill-[rgba(var(--white),1)];
            }
          }
        }
      }
      .our-product-wrapper {
        .our-product-content {
          .btn {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .Typeahead-menu {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .ecommerce-widget {
        @apply border border-[rgba(var(--dark-border-color),1)] border-solid;
      }
      .bookmark {
        ul {
          li {
            .search-form {
              .form-control-search {
                input {
                  @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
                }

                &:before {
                  @apply bg-[rgba(var(--dark-border-color),1)];
                }
              }
            }
          }
        }
      }
      .cart {
        .qty-box {
          .input-group {
            .btn {
              @apply bg-[#2e3648] border-[rgba(var(--dark-card-border),1)];
            }
          }
        }
      }
      .shopping-checkout-option {
        .checkbox_animated {
          &:after {
            @apply border-[rgba(var(--dark-card-background),1)] border-2 border-solid;
          }
        }
      }
      .animate-chk {
        .radio_animated {
          &:after {
            @apply border-[rgba(var(--dark-border-color),1)] border-2 border-solid;
          }
        }
      }
      .custom-scrollbar {
        &::-webkit-scrollbar-thumb {
          @apply bg-[rgba(41,50,64,0.52)];
        }
      }
      .product-box {
        .product-img {
          .product-hover {
            ul {
              li {
                .btn {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }

                &:hover {
                  .btn {
                    @apply text-[rgba(var(--white),1)];
                  }
                }
              }

              li:not(.product-wrapper-grid .product-box .product-hover li) {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }

              i {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }
      .radio_animated,
      .checkbox_animated {
        &:after {
          @apply border-[rgba(var(--dark-body-background),1)] border-2 border-solid bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .slider-product {
        @apply border-t-[rgba(var(--dark-border-color),1)] border-b-[rgba(var(--dark-border-color),1)] border-t border-solid border-b;
      }
      .square-product-setting {
        .icon-grid {
          @apply bg-[rgba(var(--dark-card-background),1)];

          svg {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .active-order-table,
      .market-table {
        table {
          thead {
            tr {
              th {
                @apply border-t-[none];
              }
            }
          }

          tbody {
            tr {
              td {
                @apply border-b-[rgba(var(--dark-border-color),1)] border-b border-solid;
              }

              &:last-child {
                td {
                  @apply border-b-[none];
                }
              }
            }
          }
        }
      }
      .pricing-card-design-2 {
        .pricing-block {
          .pricing-inner {
            ul {
              li {
                @apply border-b-[rgba(var(--dark-border-color),1)] border-b border-solid;
              }
            }
          }
        }
      }
      .flot-chart-container {
        .legend {
          .table {
            tbody {
              @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--white),1)];

              .legendLabel {
                @apply pl-[5px];
              }
            }
          }
        }
      }
      .google-visualization-tooltip {
        text {
          @apply fill-[rgba(0,0,0,0.7)];
        }
      }
      .nav-dark,
      .nav-pills.nav-dark {
        .nav-link {
          @apply text-[rgba(var(--white),1)];
        }
      }
      .loader-wrapper {
        @apply bg-[rgba(var(--dark-body-background),1)];

        .loader {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .page-wrapper {
        .sidebar-main-title {
          h6 {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .page-header {
          .translate_wrapper {
            .active {
              .more_lang {
                @apply !bg-[rgba(var(--dark-body-background),1)];
              }

              .lang {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
            }
          }
          form {
            @apply bg-[rgba(var(--dark-body-background),1)];
          }
          .header-wrapper {
            @apply bg-[rgba(var(--dark-card-background),1)];
            li {
              i {
                @apply text-[rgba(var(--light-color),1)];
              }
            }
            .nav-right {
              > ul {
                > li {
                  svg {
                    @apply stroke-[rgba(var(--white),1)];
                  }

                  .mode {
                    svg {
                      @apply fill-[rgba(var(--white),1)];
                    }
                  }
                }
              }
              &.right-header {
                > ul {
                  > li {
                    .profile-media {
                      .grow {
                        p {
                          @apply text-[rgba(var(--dark-all-font-color),1)];
                        }
                      }
                      .profile-content {
                        p {
                          @apply text-[rgba(var(--white),0.6)];
                        }
                      }
                    }
                  }
                }
              }
              .nav-menus {
                li {
                  .flex {
                    .grow {
                      .txt-dark {
                        @apply text-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                  }
                  .onhover-show-div {
                    @apply bg-[rgba(var(--dark-body-background),1)] shadow-[0_0_14px_rgba(var(--dark-body-background),1)] before:border-b-[rgba(var(--dark-body-background),1)] before:border-b-[7px] before:border-solid after:border-b-[rgba(var(--dark-body-background),1)] after:border-b-[7px] after:border-solid;
                    li {
                      @apply border-[rgba(var(--dark-card-background),1)];
                    }
                    p {
                      @apply text-[rgba(var(--dark-all-font-color),1)];
                    }
                  }
                  .notification-dropdown.onhover-show-div {
                    li {
                      @apply bg-[rgba(var(--dark-card-background),1)];

                      span {
                        @apply text-[rgba(var(--dark-small-font-color),1)];
                      }
                    }
                    .bg-light {
                      @apply bg-[#282e38] text-[rgba(var(--dark-all-font-color),1)];
                    }
                  }
                }
              }
              .profile-dropdown {
                li {
                  a {
                    @apply text-[rgba(var(--dark-all-font-color),1)] hover:text-[rgba(var(--theme-default),1)];
                    svg {
                      path,
                      line,
                      circle {
                        @apply text-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                    &:hover {
                      svg {
                        line,
                        path,
                        circle {
                          @apply text-[rgba(var(--theme-default),1)];
                        }
                      }
                    }
                  }
                }
              }
              > ul {
                > li {
                  .flex {
                    .grow {
                      .txt-dark {
                        @apply text-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                  }
                  .onhover-show-div {
                    @apply bg-[rgba(var(--dark-body-background),1)] shadow-[0_0_2px_2px_rgba(var(--dark-card-background),1)] before:border-b-[rgba(var(--dark-body-background),1)] before:border-b-[7px] before:border-solid after:border-b-[rgba(var(--dark-body-background),1)] after:border-b-[7px] after:border-solid;
                  }
                }
              }
              .bookmark-flip {
                .bookmark-dropdown {
                  .bookmark-content {
                    .bookmark-icon {
                      @apply bg-[rgba(var(--dark-card-background),1)];
                    }
                  }
                }
              }
            }
          }
          .header-logo-wrapper {
            @apply bg-[rgba(var(--dark-card-background),1)];

            .logo-wrapper {
              a {
                .image-dark {
                  @apply hidden;
                }

                .image-light {
                  @apply block;
                }
              }
            }
          }
        }
        .page-body-wrapper {
          .page-body {
            .topper-lists {
              table {
                tbody {
                  tr {
                    td {
                      p {
                        @apply text-[rgba(var(--dark-small-font-color),1)];
                      }
                    }
                  }
                }
              }
            }

            .header-small {
              @apply text-[rgba(var(--dark-small-font-color),1)];
            }

            .statistics {
              p {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
            }

            .feather-main,
            .professor-table {
              .grow,
              .professor-block {
                p {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }

            .logs-element {
              span {
                + span {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }

            .progress-block {
              .progress-title {
                span {
                  + span {
                    @apply text-[rgba(var(--dark-small-font-color),1)];
                  }
                }
              }
            }
            .ecommerce-icons {
              div {
                span {
                  color: rgba(var(--dark-small-font-color), 1);
                }
              }
            }

            .new-users,
            .progress-media {
              .flex {
                .grow {
                  span {
                    color: rgba(var(--dark-small-font-color), 1);
                  }
                }
              }

              .progress-change {
                span {
                  color: rgba(var(--dark-small-font-color), 1);
                }
              }
            }

            .topper-lists {
              table {
                tbody {
                  tr {
                    td {
                      @apply border-b-[rgba(var(--dark-card-border),1)] border-t-[none] border-b border-solid;
                    }

                    &:last-child {
                      td {
                        @apply border-b-[none];
                      }
                    }
                  }
                }
              }
            }

            .notifiaction-media {
              .flex {
                .grow {
                  .circle-left {
                    @apply border-[5px] border-solid border-[#334154];
                  }
                }
              }
            }
            .upcoming-event {
              .upcoming-innner {
                @apply border-b-[rgba(var(--dark-border-color),1)] border-b border-solid last:border-b-[none];
              }
            }

            .professor-table {
              table {
                tbody {
                  tr {
                    td {
                      @apply border-t-[none];
                    }
                  }
                }
              }
            }
            .number-widgets {
              .flex {
                .grow {
                  h6 {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
            }

            .activity {
              .flex {
                .grow {
                  h6 {
                    span {
                      @apply text-[rgba(var(--dark-small-font-color),1)];
                    }
                  }
                }
              }
            }

            .card.custom-card {
              .card-header {
                @apply border-b-[none];
              }
            }
          }
          .custom-card .card-header img {
            @apply bg-[rgba(var(--black),1)] opacity-80;
          }
          .page-title {
            .grid {
              h3 {
                @apply text-[rtgba(var(--dark-all-font-color),1)];

                small {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
            .breadcrumb {
              li {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              .breadcrumb-item {
                a {
                  svg {
                    @apply stroke-[rgba(var(--dark-all-font-color),1)];
                  }
                }
                & + .breadcrumb-item {
                  &:before {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
            }
          }
          .page-body {
            @apply bg-[rgba(var(--dark-body-background),1)];
            .card:not(.email-body) {
              box-shadow: 1px 1px 2px 1px rgba(29, 28, 28, 0.08);
              &.widget-1 {
                @apply bg-blend-color-burn;

                .widget-round {
                  .bg-round {
                    @apply shadow-[1px_2px_21px_-2px_rgba(14,14,16,0.83)];

                    .half-circle {
                      @apply bg-[rgba(49,53,66,0)];
                    }
                  }
                }
              }
              &.social-profile {
                @apply bg-blend-overlay bg-[rgba(var(--dark-body-background),1)];
              }
              .table {
                &.table-light {
                  tr {
                    th,
                    td {
                      @apply text-[rgba(var(--theme-body-font-color),1)];
                    }
                  }
                }
                th,
                td {
                  @apply !text-[rgba(var(--dark-all-font-color),1)];
                }
              }
              table {
                thead {
                  .border-bottom-light {
                    th {
                      &:not(.border-bottom-table thead .border-bottom-light th) {
                        @apply !border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
                      }
                    }
                  }
                }

                tbody {
                  .border-bottom-light {
                    td {
                      &:not(.border-bottom-table tbody .border-bottom-light td) {
                        @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
                      }
                    }
                  }
                }
              }
              &.trending-card {
                @apply bg-[#010314];
              }
              &.explore-card {
                @apply bg-[rgba(var(--dark-card-background),1)] bg-blend-overlay;
              }
              &.balance-box {
                @apply bg-blend-overlay bg-[#16171c] border-transparent;
              }
              .chart-block {
                #bar-chart2 {
                  svg {
                    > rect {
                      @apply fill-[rgba(var(--dark-card-background),1)];
                    }

                    > g {
                      text {
                        @apply fill-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                  }
                }

                .word-tree {
                  svg {
                    > g {
                      > rect {
                        @apply fill-[rgba(var(--dark-card-background),1)];
                      }

                      > text {
                        @apply fill-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                  }
                }
              }
              .card-header {
                @apply bg-[rgba(var(--transparent-color),1)] border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;

                > span {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }

                p {
                  @apply text-[rgba(var(--dark-all-font-color),0.4)];
                }

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }

                .card-header-right {
                  @apply bg-[rgba(var(--dark-card-background),1)];

                  i {
                    @apply text-[rgba(var(--dark-all-font-color),1)];

                    &.fa-cog {
                      @apply text-[rgba(var(--theme-default),1)];
                    }
                  }
                }

                &.note-toolbar {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }
              }
              .alert-dark {
                @apply text-[rgba(var(--dark-small-font-color),1)];

                a {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
              .alert-primary {
                @apply !bg-[rgba(var(--theme-default),0.8)] text-white !border-[rgba(var(--theme-default),0.9)];
                &.inverse {
                  @apply text-[rgba(var(--white),0.6)] border border-solid border-[rgba(var(--theme-default),1)];
                  background-color: transparent !important;
                }
              }
              .alert-light.outline,
              .alert-light.outline-2x,
              .alert-light.inverse {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              #animation-box {
                .animate-widget {
                  p {
                    @apply text-[rgba(var(--dark-small-font-color),1)];
                  }
                }
              }
              .grid-item {
                img {
                  @apply bg-[rgba(var(--dark-card-background),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
                }
              }
              .line {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              thead,
              tbody,
              tfoot,
              tr,
              td,
              th {
                @apply border-[rgba(var(--dark-card-border),1)];
              }
              .table {
                th,
                td {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }

                thead {
                  th {
                    @apply border-b-[rgba(var(--dark-card-border),1)];
                  }

                  .border-bottom-primary {
                    th {
                      @apply border-b-[color:var(--theme-default)];
                    }
                  }
                }

                .table-primary,
                .table-secondary,
                .table-success,
                .table-info,
                .table-warning,
                .table-light,
                .table-danger {
                  th,
                  td {
                    @apply text-[rgba(var(--dark-card-background),1)];
                  }
                }

                .bg-primary,
                .bg-secondary,
                .bg-success,
                .bg-info,
                .bg-warning,
                .bg-danger {
                  @apply text-[rgba(var(--white),1)];
                }

                .bg-light {
                  @apply text-[rgba(var(--black),1)];
                }

                .thead-light {
                  th {
                    @apply text-[rgba(var(--black),1)];
                  }
                }

                tbody {
                  .border-bottom-primary {
                    th,
                    td {
                      @apply border-b-[rgba(var(--theme-default),1)] border-b border-solid;
                    }
                  }
                }
              }
              .table[class*="bg-"] {
                th,
                td {
                  @apply text-[rgba(var(--white),1)];
                }
              }
              .table-striped {
                tbody {
                  tr {
                    &:nth-of-type(odd) {
                      --bs-table-accent-bg: rgba(0, 0, 0, 0.05);

                      &:hover {
                        th,
                        td {
                          @apply text-[rgba(var(--white),1)];
                        }
                      }
                    }
                  }
                }
              }
              .table-double,
              .table-dotted,
              .table-dashed {
                @apply border-l-[rgba(var(--dark-card-border),1)] border-r-[rgba(var(--dark-card-border),1)];
              }
              .table-bordered {
                @apply border-[rgba(var(--dark-card-border),1)];

                td,
                th {
                  @apply border-[rgba(var(--dark-card-border),1)];
                }
              }
              .project-tabs{
                .tab-links{
                  border-bottom: unset !important;
                }
              }
              .table-inverse {
                tbody {
                  tr {
                    &:nth-of-type(odd) {
                      &:hover {
                        td {
                          @apply text-[rgba(var(--dark-all-font-color),1)];
                        }
                      }
                    }
                  }
                }
              }
              .table-border-vertical {
                tr,
                th,
                td {
                  @apply border-r-[rgba(var(--dark-border-color),1)] border-r border-solid;
                }
              }
              .table-styling {
                thead,
                tbody {
                  th,
                  td {
                    @apply text-[rgba(var(--white),1)];
                  }
                }
              }
              .card-footer {
                @apply bg-[rgba(var(--dark-card-background),1)] border-t-[rgba(var(--dark-card-border),1)] border-t border-solid;
              }
              .switch {
                .switch-state {
                  @apply bg-[rgba(var(--dark-body-background),1)];
                }

                input {
                  &:checked {
                    + .switch-state {
                      @apply bg-[rgba(var(--theme-default),1)];
                    }
                  }
                }
              }
              .bg-white {
                @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--white),0.6)];
              }
              .ct-grid {
                @apply stroke-[rgba(var(--dark-border-color),1)];
              }
              .ct-label {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
              hr {
                @apply border-t-[rgba(var(--dark-card-inbox),0.8)] !border-t border-solid;

                &.dropdown-divider {
                  @apply border-[rgba(var(--dark-border-color),1)];
                }
              }
              .text-muted {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              .btn-outline-light,
              .btn-outline-dark,
              .btn-outline-light-2x {
                @apply text-[rgba(var(--white),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
              }
              .btn-outline-light,
              .btn-outline-light-2x {
                &:hover,
                &:active {
                  @apply !text-[rgba(var(--black),1)];
                }
              }
              .border-right {
                @apply border-r-[rgba(var(--dark-card-border),1)] border-r border-solid;
              }
              .flot-chart-placeholder {
                .flot-text {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }

                svg {
                  text {
                    @apply fill-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
              .dark-alert {
                &.alert-addition-content {
                  .alert {
                    hr {
                      @apply border-t-[rgba(var(--dark-card-border),1)] border-t border-solid;
                    }
                  }
                }
              }
              .chart-overflow {
                &#gantt_chart {
                  svg {
                    g {
                      rect {
                        &:first-child {
                          @apply fill-[rgba(var(--dark-body-background),1)];
                        }
                      }
                    }
                  }

                  rect {
                    &:nth-child(6) {
                      @apply fill-[rgba(var(--dark-body-background),1)];
                    }
                  }
                }

                &#line-chart,
                &#column-chart1,
                &#column-chart2 {
                  rect {
                    @apply fill-[rgba(var(--dark-card-background),1)];
                  }
                }

                svg {
                  > rect {
                    @apply fill-[rgba(var(--dark-card-background),1)];
                  }

                  > g {
                    > g {
                      > g {
                        text {
                          @apply fill-[rgb(177,177,178)];
                        }
                      }
                    }

                    > text {
                      @apply fill-[rgba(var(--dark-all-font-color),1)];
                    }
                  }
                }
              }
              .radial-bar {
                &:after {
                  @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
                }
              }
              .bar-chart-widget {
                .bottom-content {
                  .num {
                    @apply text-[rgba(var(--dark-all-font-color),1)];

                    .color-bottom {
                      @apply text-[rgba(var(--dark-all-font-color),1)];
                    }
                  }
                }
              }
              .chart-container {
                .live-products,
                .turnover,
                .monthly,
                .uses {
                  .ct-labels {
                    .ct-label {
                      @apply text-[rgba(var(--white),1)];
                    }
                  }

                  .ct-grid {
                    @apply stroke-[rgba(var(--white),1)];
                  }
                }

                #browser-uses-chart,
                #website-visiter-chart {
                  svg {
                    text {
                      @apply fill-[rgba(var(--dark-all-font-color),1)];
                    }
                  }
                }
              }
              .status-details {
                h4 {
                  @apply text-[rgba(var(--dark-all-font-color),1)];

                  span {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }

                span {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
              .clipboaard-container {
                .form-control {
                  @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-small-font-color),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
                }
              }
              .img-thumbnail {
                @apply bg-[rgba(var(--white-bg),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
              }
              .dataTables_wrapper {
                button {
                  @apply text-[rgba(var(--black),1)];
                }

                &.no-footer {
                  .dataTables_scrollBody {
                    @apply border-b-[rgba(var(--dark-body-background),1)] border-b border-solid;
                  }
                }

                .btn-danger,
                .btn-success,
                .btn-primary {
                  @apply text-[rgba(var(--white),1)];
                }

                .dataTables_length {
                  select {
                    @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
                  }
                }

                .dataTables_length,
                .dataTables_filter,
                .dataTables_info,
                .dataTables_processing,
                .dataTables_paginate {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }

                .dataTables_paginate {
                  @apply border border-[rgba(var(--dark-border-color),1)] border-solid;
                }

                .dataTables_filter {
                  input[type="search"] {
                    @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
                  }
                }

                table.dataTable.display,
                table.dataTable.order-column.stripe {
                  tbody {
                    tr {
                      @apply bg-[rgba(var(--dark-card-background),1)];

                      &:hover {
                        > .sorting_1 {
                          @apply bg-[rgba(var(--dark-datatable-sorting),1)];
                        }
                      }
                    }

                    tr.odd {
                      @apply bg-[rgba(var(--dark-datatable-odd),1)];

                      > .sorting_1 {
                        @apply bg-[rgba(var(--dark-datatable-sorting),1)];
                      }
                    }

                    tr.even {
                      > .sorting_1 {
                        @apply bg-[rgba(var(--dark-datatable-sorting-even),1)];
                      }
                    }
                  }
                }

                table.dataTable {
                  @apply border border-[rgba(var(--dark-border-color),1)] border-solid;

                  thead {
                    th,
                    td {
                      @apply border-b-[rgba(var(--dark-border-color),1)] border-b-2 border-solid;
                    }
                  }

                  input,
                  select {
                    @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
                  }

                  tbody {
                    tr {
                      @apply bg-[rgba(var(--dark-card-background),1)];
                    }

                    td.select-checkbox,
                    th.select-checkbox {
                      &:before {
                        @apply border border-[rgba(var(--dark-small-font-color),1)] border-solid;
                      }
                    }
                  }
                }

                .table-striped {
                  tbody {
                    tr {
                      &:nth-of-type(odd) {
                        --bs-table-accent-bg: #1d1e26;
                      }
                    }
                  }
                }

                .dataTables_paginate {
                  .paginate_button {
                    @apply text-[rgba(var(--dark-all-font-color),1)];

                    &.current,
                    &:active {
                      @apply border-[rgba(var(--theme-default),1)];
                    }
                  }

                  .paginate_button.disabled {
                    @apply text-[rgba(var(--dark-small-font-color),1)];

                    &:hover,
                    :active {
                      @apply text-[rgba(var(--dark-small-font-color),1)];
                    }
                  }
                }

                table.dataTable.row-border,
                table.dataTable.display {
                  tbody {
                    th,
                    td {
                      @apply border-t-[rgba(var(--dark-border-color),1)] border-t border-solid;
                    }
                  }
                }

                table.dataTable.display,
                table.dataTable.order-column.hover {
                  tbody {
                    tr.even {
                      &:hover {
                        > .sorting_1 {
                          @apply bg-[rgba(var(--dark-even-hover-sorting),1)];
                        }
                      }
                    }
                  }
                }

                table.dataTable.hover,
                table.dataTable.display {
                  tbody {
                    tr {
                      &:hover {
                        @apply bg-[rgba(var(--dark-datatable-sorting),1)];
                      }
                    }
                  }
                }

                table.dataTable.cell-border {
                  th,
                  td {
                    @apply border-t-[rgba(var(--dark-border-color),1)] border-r-[rgba(var(--dark-border-color),1)] border-t border-solid border-r;

                    &:first-child {
                      @apply border-l-[rgba(var(--dark-border-color),1)] border-l border-solid;
                    }
                  }
                }

                table.dataTable.order-column,
                table.dataTable.display {
                  tbody {
                    tr {
                      > .sorting_1,
                      > .sorting_2,
                      > .sorting_3 {
                        @apply bg-[rgba(var(--dark-body-background),1)];
                      }
                    }
                  }
                }
              }
              #example-style-3_wrapper {
                #example-style-3 {
                  tfoot {
                    @apply border-t-[rgba(var(--dark-border-color),1)] border-t-2 border-solid;
                  }
                }
              }
              .page-link {
                @apply border !border-[rgba(var(--dark-card-border),1)] border-solid text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-card-background),1)];
              }
              .page-item.disabled {
                .page-link {
                  @apply bg-[rgba(var(--dark-card-background),1)] border-[rgba(var(--dark-border-color),1)];
                }
              }
              .page-item {
                &:hover {
                  .page-link {
                    @apply bg-[rgba(var(--dark-body-background),1)];
                  }
                }
              }
              .page-item.active {
                .page-link {
                  @apply bg-[rgba(var(--dark-body-background),1)];
                }
              }
              .ecommerce-widget {
                .icon {
                  @apply text-[rgba(var(--dark-body-background),1)];
                }
                .total-num {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                  span {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
                span {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
              .flot-chart-container-small {
                @apply bg-[rgba(var(--dark-card-background),1)] border-t-[rgba(var(--dark-border-color),1)] border-t border-solid;
              }
              .product-table {
                #API-2_wrapper {
                  #API-2 {
                    tbody {
                      td {
                        span,
                        p {
                          @apply text-[rgba(var(--dark-small-font-color),1)];
                        }
                      }
                    }
                  }
                }
                h6 {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
              .border-tab {
                &.tab-links {
                  border-bottom: 1px solid #1d1e26;
                  .tab-link {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
                .tab-link {
                  &.active,
                  &:focus,
                  &:hover {
                    @apply !text-[rgba(var(--theme-default),1)];
                  }
                }
              }
              .project-tabs {
                .nav-tabs {
                  @apply border-b-[unset];
                }
              }
              .br-theme-bars-1to10,
              .br-theme-bars-movie,
              .br-theme-bars-pill,
              .br-theme-bars-reversed,
              .br-theme-bars-horizontal {
                .br-widget {
                  a {
                    @apply bg-[rgba(var(--dark-border-color),1)];

                    &.br-active,
                    &.br-selected {
                      @apply bg-[rgba(var(--theme-default),1)];
                    }
                  }
                }
              }
              .br-theme-bars-square {
                .br-widget {
                  a {
                    @apply border-[rgba(var(--dark-border-color),1)] bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-2 border-solid;

                    &.br-active,
                    &.br-selected {
                      @apply border-[rgba(var(--theme-default),1)] text-[rgba(var(--theme-default),1)] border-2 border-solid;
                    }
                  }
                }
              }
              .br-theme-fontawesome-stars,
              .br-theme-fontawesome-stars-o {
                .br-widget {
                  a {
                    &.br-selected,
                    &.br-active {
                      &:after {
                        @apply text-[rgba(var(--theme-default),1)];
                      }
                    }
                  }
                }
              }
              .scroll-demo {
                @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
              }
              .vertical-scroll {
                &.scroll-demo {
                  &:not(.default-scroll) {
                    border: unset;
                  }

                  .list-group {
                    .list-group-item {
                      &:hover {
                        @apply z-0;
                      }
                    }
                  }
                }
              }
              .search-form {
                input {
                  @apply border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)] border-solid;
                }
                .form-group {
                  &:before {
                    @apply bg-[rgba(var(--dark-card-background),1)];
                  }
                }
              }
              .breadcrumb {
                &.bg-white {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }
              }
              #donut-color-chart-morris-daily,
              #donut-color-chart-morris,
              #browser-uses-chart,
              #website-visiter-chart {
                svg {
                  @apply opacity-50;
                }
              }
            }
            .collapse-horizontal {
              .card {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
            .collapse-accordion {
              .btn-dark {
                &.show {
                  .dark-accordion {
                    @apply bg-[rgba(var(--dark-body-background),1)];
                  }
                }
              }
            }
            .social-app-profile1 {
              .social-app-profile {
                .common-user-image {
                  @apply bg-[rgba(var(--dark-body-background),1)];
                }
              }
            }
            .modal-bookmark {
              .modal-content {
                .modal-body {
                  .search-picker {
                    .dropdown-menu {
                      .dropdown-item {
                        @apply border-[rgba(var(--dark-card-border),1)];
                      }
                    }
                  }
                }
              }
            }
            .main-bookmark {
              .email-right-aside {
                .card-body {
                  .details-bookmark {
                    .bookmark-card {
                      @apply bg-[rgba(var(--dark-body-background),1)];
                    }
                  }
                }
              }
            }
            .email-wrap {
              .grow {
                h6 {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
            .bookmark-wrap {
              .main-bookmark {
                .bootstrap-select {
                  .dropdown-toggle {
                    @apply border-[rgba(var(--dark-card-border),1)];
                  }
                  .dropdown-menu {
                    li {
                      @apply bg-[rgba(var(--dark-body-background),1)] hover:bg-[rgba(var(--dark-card-inbox),1)];
                      &:hover {
                        .dropdown-item {
                          @apply text-[rgba(var(--dark-all-font-color),1)];
                        }
                      }
                    }
                  }
                }
              }
            }
            .contact-editform {
              .more-data {
                .bootstrap-select {
                  .dropdown-toggle {
                    @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--transparent-color),1)];

                    .filter-option {
                      @apply text-[rgba(var(--light-all-font-color),1)];
                    }
                  }
                }
              }
            }
            .social-user-cards {
              .card {
                &.social-profile {
                  @apply bg-blend-overlay;
                  .social-details {
                    .social-follow {
                      li {
                        + li {
                          &::before {
                            @apply bg-[rgba(var(--light-all-font-color),1)];
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .user-profile {
              .list-inline {
                .border-right {
                  @apply border-r-[rgba(var(--dark-card-border),1)];
                }
              }
              .common-user-image {
                .user-image {
                  .avatar {
                    .common-align {
                      > div {
                        .icon-wrapper {
                          &#cancelButton {
                            i {
                              @apply text-[rgba(var(--dark-all-font-color),1)];
                            }
                          }
                        }
                      }
                    }
                    .follow {
                      > div {
                        + div {
                          @apply border-l-[rgba(var(--dark-card-border),1)];
                        }
                      }
                    }
                  }
                }
              }
              .social-media {
                a {
                  @apply text-[rgba(var(--white),0.8)];
                }
              }
              .setting-wrapper {
                .common-flex {
                  .btn {
                    @apply !text-[rgba(var(--white),0.6)];
                  }
                }
              }
            }
            .user-profile-wrapper {
              &.scope-bottom-wrapper {
                .sidebar-left-icons {
                  .tab-link {
                    &.active {
                      .product-icons {
                        i {
                          @apply text-[rgba(var(--white),0.8)];
                        }
                      }
                    }
                    .product-icons {
                      i {
                        @apply text-[rgba(var(--dark-all-font-color),0.4)];
                      }
                    }
                  }
                }
                .user-notifications {
                  ul {
                    li {
                      > div {
                        p {
                          span {
                            @apply text-[rgba(var(--dark-all-font-color),0.3)];
                          }
                        }
                        span {
                          @apply text-[rgba(var(--dark-all-font-color),0.4)];
                        }
                      }
                    }
                  }
                }
                .setting-wrapper {
                  .form-label {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
            }
            .product-sidebar {
              .filter-section {
                .card {
                  @apply border-[unset];
                  .card-header {
                    @apply bg-[rgba(var(--dark-card-background),1)] border-b-0;
                  }
                }
              }
            }
            #viewhtml {
              .render {
                @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-[rgba(var(--dark-border-color),1)];
              }
            }
            .wizard-4 {
              ul.anchor {
                li {
                  a.disabled {
                    @apply text-[rgba(var(--dark-body-background),1)];
                  }
                }
              }
            }
            .gallery-with-description {
              h4 {
                @apply text-[rgba(var(--white),0.8)];
              }
              a {
                > div {
                  @apply !border !border-[rgba(var(--dark-card-border),1)] !border-solid;
                  border-top: none !important;
                }
              }
              p {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
            .jsgrid-grid-header {
              @apply bg-[rgba(var(--dark-card-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
            }
            .jsgrid-header-row,
            .jsgrid-filter-row,
            .jsgrid-insert-row {
              > .jsgrid-header-cell,
              > .jsgrid-cell {
                @apply border border-[rgba(var(--dark-border-color),1)] border-solid bg-[rgba(var(--dark-card-background),1)];
                input:not(.jsgrid-button) {
                  @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)];
                  &:focus {
                    outline: none;
                  }
                }
              }
              select {
                @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)];
              }
            }
            .jsgrid-insert-row {
              > .jsgrid-cell {
                input:not(.jsgrid-button) {
                  @apply border border-[rgba(var(--dark-border-color),1)] border-solid;
                }
                .jsgrid-button {
                  @apply bg-[unset];
                }
              }
            }
            .jsgrid-row {
              > .jsgrid-cell {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
            }
            .jsgrid-alt-row {
              > .jsgrid-cell {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
            .jsgrid-cell,
            .jsgrid-grid-body {
              @apply border border-[rgba(var(--dark-border-color),1)] border-solid;
            }
            .jsgrid-selected-row {
              > .jsgrid-cell {
                @apply bg-[rgba(var(--dark-datatable-sorting),1)];
              }
            }
            .jsgrid {
              .jsgrid-pager {
                [class*="jsgrid-pager"] {
                  @apply border border-[rgba(var(--dark-border-color),1)] border-solid;
                }
                .jsgrid-pager-page {
                  a {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
            }
            .jsgrid-pager-current-page {
              @apply text-[rgba(var(--dark-all-font-color),1)] font-bold;
            }
            .sub-title {
              @apply border-b-[rgba(var(--white),0.1)] border-b border-solid;
            }
            .card {
              .sub-title {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
            .navs-icon {
              li {
                a {
                  @apply text-[rgba(var(--dark-all-font-color),1)] hover:text-[rgba(var(--theme-default),1)];
                }
              }
              .separator {
                @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
              }
            }
            .default-according {
              li {
                .text-muted {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
            .navs-icon.default-according.style-1 {
              li {
                button {
                  &:hover {
                    @apply text-[rgba(var(--theme-default),1)];
                  }
                }
              }
            }
            .nav-list {
              .nav-list-disc {
                li {
                  a {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                  &:hover {
                    @apply text-[rgba(var(--theme-default),1)];
                    a {
                      @apply text-[rgba(var(--theme-default),1)];
                    }
                  }
                }
              }
            }
            .navs-dropdown {
              .onhover-show-div {
                @apply bg-[rgba(var(--dark-body-background),1)] shadow-[0_0_14px_0_rgba(var(--dark-body-background),1)];
                .navs-icon {
                  li {
                    p {
                      @apply text-[rgba(var(--white),1)];
                    }
                    a {
                      svg {
                        path,
                        line,
                        polyline,
                        polygon,
                        rect {
                          @apply text-[rgba(var(--dark-all-font-color),1)];
                        }
                      }
                      &:hover {
                        svg {
                          path,
                          line,
                          polyline,
                          polygon,
                          rect {
                            @apply text-[rgba(var(--theme-default),1)];
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .onhover-dropdown {
              &:hover {
                .onhover-show-div {
                  &:before {
                    @apply border-b-[rgba(var(--dark-body-background),1)] border-b-[7px] border-solid;
                  }
                }
              }
            }
            .default-according {
              .card {
                .btn-link {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
                .card-body {
                  @apply text-[rgba(var(--dark-small-font-color),1)] border-[rgba(var(--dark-card-border),1)];
                }
              }
            }
            .absolute {
              border: none;
            }
            .fill-wrapper {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
            .border-wrapper {
              @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
            }
            .custom-border {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
            .custom-border-t {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
            .custom-border-l {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
            .custom-border-b {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
            .custom-border-r {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
            .border-1 {
              @apply border-[rgba(var(--dark-body-background),1)];
            }
            .border-3 {
              @apply border-[rgba(var(--dark-card-background),1)] !border-[3px];
            }
            .effective-card {
              .common-hover {
                .card-header {
                  &.border-3 {
                    @apply !border-b;
                  }
                }
              }
            }
            .subtract-border {
              &.border-wrapper {
                .helper-common-box {
                  .basic_table {
                    .table {
                      thead,
                      tbody {
                        tr {
                          &[class*="table-"] {
                            th,
                            td {
                              @apply text-[rgba(var(--dark-all-font-color),1)];
                            }
                          }
                        }
                      }
                    }
                  }
                  .border-opacity-wrapper {
                    .border {
                      @apply border-[rgba(_var(--theme-default),var(--bs-border-opacity)_)];
                    }
                  }

                  .bg-opacity-wrapper {
                    .text-dark {
                      @apply text-[rgba(var(--dark-all-font-color),1)];
                    }
                  }

                  .animate-wrapper {
                    .card {
                      @apply shadow-[1px_1px_2px_1px_rgba(var(--dark-body-background),0.9)];
                    }
                  }
                }
              }
            }
          }
          .sitemap-wrapper {
            .default-sitemap {
              .common-flex {
                a {
                  @apply text-[rgba(var(--dark-all-font-color),0.4)];
                }
              }

              .sub-title {
                @apply border-b-[rgba(var(--dark-card-inbox),1)] border-b-[thick] border-solid;
              }
            }
            .horizontal-sitemap {
              .main-site {
                li {
                  > a {
                    @apply bg-[rgba(var(--dark-body-background),0.29)] text-[rgba(var(--dark-all-font-color),1)];
                  }

                  .main-root {
                    @apply bg-[rgba(var(--dark-body-background),1)] after:border-[rgba(var(--dark-card-border),1)];
                  }
                }
              }

              .tier-1 {
                @apply border-[rgba(var(--dark-card-border),1)] before:bg-[rgba(var(--dark-body-background),1)];

                li {
                  > a:not(.tier-2 li a) {
                    &:first-child {
                      @apply bg-[rgba(var(--dark-body-background),0.6)];

                      &::before {
                        @apply text-[rgba(var(--dark-card-border),1)];
                      }
                    }
                  }
                }

                .tier-2 {
                  @apply border-[rgba(var(--dark-card-border),1)];

                  li {
                    > a {
                      &::before {
                        @apply text-[rgba(var(--dark-card-border),1)];
                      }
                    }

                    &:last-child {
                      &::after {
                        @apply bg-[rgba(var(--dark-body-background),1)];
                      }
                    }
                  }

                  .tier-3 {
                    @apply border-[rgba(var(--dark-card-border),1)];
                  }
                }
              }
            }
          }
          .footer {
            @apply bg-[rgba(var(--dark-card-background),1)];

            p,
            span {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }

          .custom-select,
          .custom-file-label {
            @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)];
          }

          .footer-fix {
            @apply bg-[rgba(var(--dark-card-background),1)] border-t-[rgba(var(--dark-border-color),1)] border-t border-solid;
          }
        }
        .note {
          textarea {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .dt-button-info {
          @apply bg-[rgba(var(--dark-card-background),1)] border border-[rgba(var(--dark-small-font-color),1)] border-solid;
          h2 {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
        pre {
          @apply bg-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
        .scorlled {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
        .input-group-air {
          @apply shadow-[0_3px_20px_0_rgba(var(--dark-border-color),1)];
        }
        .input-group-text {
          @apply bg-[rgba(var(--dark-card-background),1)] border border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--white),0.6)] border-solid;
          i {
            @apply text-[rgba(var(--white),0.6)];
          }
        }
        .input-group-solid {
          .input-group-text,
          .form-control {
            @apply border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid bg-[rgba(var(--dark-body-background),1)];
          }
        }
        .semilight-bg-color,
        .header-bg-color {
          @apply bg-[rgba(var(--white),1)];
        }
        .list-group-item {
          @apply bg-[rgba(var(--dark-card-background),1)] border text-[rgba(var(--dark-all-font-color),1)] border-solid border-[rgba(var(--white),0.3)];

          + .list-group-item {
            @apply border-t-0;
          }
          &.active {
            @apply !bg-[rgba(var(--theme-default),1)] border-[rgba(var(--theme-default),1)] text-[rgba(var(--white),1)];
          }
          &:hover,
          &:focus {
            @apply z-[1] no-underline;
          }
        }
        .list-group-flush {
          .list-group-item {
            &:first-child {
              border-top: var(--transparent-color);
            }
            &:last-child {
              border-bottom: var(--transparent-color);
            }
          }
        }
        .list-group-item-action {
          &:hover:not(.active),
          &:focus {
            @apply bg-[rgba(var(--dark-body-background),1)];
          }
        }
        .contextual-wrapper {
          .list-group-item-action {
            &:hover {
              @apply text-[rgba(var(--white),0.6)];
            }
          }
        }
        .list-group-flush {
          .list-group-item {
            @apply rounded-none border-x-0;
          }
        }
        .dark-list {
          .list-group {
            .border-left-primary {
              @apply border-l-[rgba(var(--theme-default),1)] border-l-4 border-solid;
            }
            .border-left-secondary {
              @apply border-l-[rgba(var(--theme-secondary),1)] border-l-4 border-solid;
            }
            .border-left-warning {
              @apply border-l-[rgba(var(--warning-color),1)] border-l-4 border-solid;
            }
            .border-left-success {
              @apply border-l-[rgba(var(--success-color),1)] border-l-4 border-solid;
            }
            .border-left-info {
              @apply border-l-[rgba(var(--info-color),1)] border-l-4 border-solid;
            }
            [dir="rtl"] & {
              [class*="border-left-"] {
                @apply border-l-[none];
              }
            }
          }
        }
        .list-group-item-primary {
          @apply text-[#004085] bg-[#b8daff];
        }
        .list-group-item-secondary {
          @apply text-[#383d41] bg-[#d6d8db];
        }
        .list-group-item-success {
          @apply text-[#155724] bg-[#c3e6cb];
        }
        .list-group-item-danger {
          @apply text-[#721c24] bg-[#f5c6cb];
        }
        .list-group-item-warning {
          @apply text-[#856404] bg-[#ffeeba];
        }
        .list-group-item-info {
          @apply text-[#0c5460] bg-[#bee5eb];
        }
        .list-group-item-light {
          @apply text-[#818182] bg-[#fdfdfe];
        }
        .list-group-item-dark {
          @apply text-[#1b1e21] bg-[#c6c8ca];
        }
        .auth-bg {
          @apply bg-blend-overlay bg-[rgba(54,64,74,0.9)];
          .authentication-box {
            .card {
              @apply bg-[rgba(var(--dark-card-background),1)];
              .theme-form {
                .form-group {
                  input {
                    @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
                  }
                  label {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
                .checkbox {
                  label {
                    @apply text-[rgba(var(--dark-all-font-color),1)] before:bg-[rgba(var(--dark-body-background),1)] before:border before:border-[rgba(var(--dark-border-color),1)] before:border-solid;
                  }
                }
              }
            }
            h3,
            h4,
            h6 {
              @apply text-[rgba(var(--white),1)];
            }
          }
        }
        .auth-bg-video {
          @apply bg-blend-overlay bg-[rgba(54,64,74,0.7)];
          .authentication-box {
            h4,
            h3 {
              @apply text-[rgba(var(--white),1)];
            }
            h6 {
              @apply text-[rgba(var(--dark-small-font-color),1)];
            }
            .card {
              @apply bg-[rgba(var(--dark-card-background),1)];
              .theme-form {
                .form-group {
                  input[type="text"],
                  input[type="password"] {
                    @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
                  }
                }
                .checkbox {
                  label {
                    &::before {
                      @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
                    }
                  }
                }
              }
            }
          }
        }
        .error-wrapper {
          .maintenance-icons {
            li {
              i {
                @apply text-[rgba(var(--dark-border-color),1)];
              }
              &:nth-child(3) {
                i {
                  @apply text-[rgba(var(--dark-border-color),1)];
                }
              }
            }
          }
        }
        .modal-content {
          @apply bg-[rgba(var(--dark-card-background),1)];
          .modal-header {
            @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
            .close {
              @apply text-[rgba(var(--dark-small-font-color),1)];
            }
          }
          .modal-footer {
            @apply border-t-[rgba(var(--dark-card-border),1)] border-t border-solid;
          }
        }
        .comingsoon {
          @apply bg-blend-overlay bg-[rgba(54,64,74,0.9)];
          .comingsoon-inner {
            h5 {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
            .countdown {
              @apply border-[rgba(var(--dark-card-border),1)];
              .title {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
            .coming-soon-bottom-link {
              a {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
        .theme-form {
          .login-divider {
            @apply border-t-[rgba(var(--dark-border-color),1)] border-t border-solid before:text-[rgba(var(--dark-all-font-color),1)] before:bg-[rgba(var(--dark-border-color),1)];
          }
        }
        .authentication-main {
          @apply bg-[rgba(var(--dark-border-color),1)];
          .auth-innerright {
            .reset-password-box {
              .card {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
              .reset-password-link {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
              .theme-form {
                .form-group {
                  label {
                    @apply text-[rgba(var(--dark-small-font-color),1)];
                  }
                  .form-control {
                    @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-[rgba(var(--dark-border-color),1)];
                  }
                }
                .opt-box {
                  @apply bg-[rgba(var(--dark-border-color),1)];
                }
              }
            }
            .authentication-box {
              h4 {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              h6 {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
              h3 {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              .card {
                @apply bg-[rgba(var(--dark-card-background),1)];
                .theme-form {
                  .form-group {
                    input[type="text"],
                    input[type="password"] {
                      @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
                    }
                  }
                  .checkbox {
                    label {
                      &::before {
                        @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .vertical-menu-main {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
        .mega-menu {
          .title {
            @apply text-[rgba(var(--dark-all-font-color),1)] border-b-[rgba(var(--dark-border-color),1)] border-b border-solid;
          }
          .list-unstyled {
            div {
              a {
                &:hover {
                  @apply text-[rgba(var(--theme-default),1)];
                }
              }
            }
          }
        }
        .default-according {
          .card {
            @apply bg-[rgba(var(--dark-card-background),1)];

            .btn-link {
              @apply bg-[rgba(var(--dark-card-background),1)] border-[1px] border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--white),1)] border-solid;
              border-bottom: none;
            }
            .text-muted {
              @apply text-[rgba(var(--dark-small-font-color),1)];
            }
          }
          .bg-primary {
            .btn-link {
              @apply bg-[rgba(var(--theme-default),1)] border border-[rgba(var(--theme-default),1)] border-solid;
            }
          }
          .bg-secondary {
            .btn-link {
              @apply bg-[rgba(var(--theme-secondary),1)] border border-[rgba(var(--theme-secondary),1)] border-solid;
            }
          }
        }
        .collapse {
          .card-body {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
        .balance-widget.card-body {
          @apply bg-[rgba(var(--dark-card-background),1)] bg-blend-overlay;
        }
      }
      .lg-backdrop {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .lg-outer {
        .lg-thumb-outer {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .drag {
        @apply bg-[rgba(var(--dark-card-background),1)];
        form {
          @apply shadow-[0_0_30px_rgba(var(--dark-border-color),1)] border border-[rgba(var(--dark-border-color),1)] border-dotted bg-[rgba(var(--dark-card-background),1)];
          input {
            @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
          }
          .help-block {
            @apply capitalize text-[rgba(var(--dark-small-font-color),1)];
          }
        }
      }
      .draggable {
        input {
          @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
        }
        p {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
        select {
          @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
        }
        .radio,
        .checkbox {
          label {
            &::before {
              @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
            }
          }
        }
      }
      .select2-container--default {
        .select2-results__option[aria-selected="true"] {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
        }
        .select2-selection--multiple,
        .select2-selection--single {
          @apply bg-[rgba(var(--dark-body-background),1)] border !border-[rgba(var(--dark-border-color),1)] border-solid;
        }
        .select2-search--inline {
          .select2-search__field {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .select2-selection--single {
          .select2-selection__rendered {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .select2-search--dropdown {
          .select2-search__field {
            @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
          }
        }
        .select2-results__option--highlighted[aria-selected] {
          @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .select2-dropdown {
        @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
      }
      .select2-container--default.select2-container--disabled {
        .select2-selection--single {
          @apply bg-[rgba(var(--dark-border-color),1)];
        }
      }
      .theme-form {
        .form-group {
          select.form-control:not([size]):not([multiple]) {
            @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-[rgba(var(--dark-border-color),1)];
          }
          input[type="text"],
          input[type="email"],
          input[type="search"],
          input[type="password"],
          input[type="number"],
          input[type="tel"],
          input[type="date"],
          input[type="datetime-local"],
          input[type="time"],
          input[type="datetime-local"],
          input[type="month"],
          input[type="week"],
          input[type="url"],
          input[type="file"],
          select {
            @apply border-[rgba(var(--dark-border-color),1)] bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
            &::-webkit-input-placeholder {
              @apply text-[rgba(var(--dark-small-font-color),1)];
            }
          }
          .form-control {
            @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
          textarea {
            @apply border-[rgba(var(--dark-border-color),1)];
          }
        }
      }
      .CodeMirror {
        @apply border border-[rgba(var(--dark-small-font-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid bg-[rgba(var(--dark-card-background),1)];
        .CodeMirror-code {
          pre {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .editor-toolbar {
        @apply border-t-[rgba(var(--dark-small-font-color),1)] border-l-[rgba(var(--dark-small-font-color),1)] border-r-[rgba(var(--dark-small-font-color),1)] border-t border-solid border-l border-r;
        a {
          @apply text-[rgba(var(--dark-all-font-color),1)];
          &:hover,
          &.active {
            @apply bg-[rgba(var(--dark-border-color),1)];
          }
        }
        i.separator {
          @apply border-l-[rgba(var(--dark-small-font-color),1)] border-r-[rgba(var(--dark-small-font-color),1)] border-l border-solid border-r;
        }
        &.fullscreen {
          &::before {
            background: linear-gradient(to right, rgba(var(--dark-body-background), 1) 0, rgba(var(--black), 0) 100%);
          }
          &::after {
            background: linear-gradient(to right, rgba(var(--black), 0) 0, rgba(var(--dark-body-background), 1) 100%);
          }
        }
      }
      .editor-toolbar.disabled-for-preview {
        a {
          &:not(.no-disable) {
            @apply bg-[rgba(var(--dark-border-color),1)];
          }
        }
      }
      .editor-preview {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .editor-toolbar.fullscreen,
      .editor-preview-side {
        @apply border border-[rgba(var(--dark-small-font-color),1)] border-solid bg-[rgba(var(--dark-card-background),1)];
      }
      .u-step {
        @apply bg-[rgba(var(--dark-border-color),1)];
        &.active,
        &.current {
          @apply text-[rgba(var(--white),1)] bg-[rgba(var(--theme-default),1)];
        }
      }
      .u-step-title,
      .u-pearl-title {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .u-step-number {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .u-pearl {
        &:before {
          @apply bg-[rgba(var(--dark-border-color),1)];
        }
      }
      .u-pearl-number,
      .u-pearl-icon {
        @apply border-[rgba(var(--dark-body-background),1)] border-2 border-solid bg-[rgba(var(--dark-body-background),1)];
      }
      .u-pearl.disabled {
        .u-pearl-icon,
        .u-pearl-number {
          @apply border-[rgba(var(--dark-border-color),1)] border-2 border-solid bg-[rgba(var(--dark-border-color),1)];
        }
        &:after {
          @apply bg-[#334053];
        }
      }
      .u-pearl.error {
        &:after {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .note-editor.note-frame {
        @apply border-[rgba(var(--dark-border-color),1)];
        .note-editing-area {
          .note-editable {
            @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .swal-modal {
        @apply bg-[rgba(var(--dark-card-background),1)];
        .swal-title {
          @apply text-[rgba(var(--dark-all-font-color).1)];
        }
        .swal-text {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
        .swal-content__input {
          @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .html-expert-table {
        .dt-container {
          .dt-search {
            input {
              @apply bg-transparent;
            }
          }
        }
      }
      .search-list {
        &.tab-links {
          li {
            @apply text-[rgba(var(--white),0.3)];
          }
        }
      }
      .tab-links {
        .tab-link {
          @apply text-[rgba(var(--dark-all-font-color),1)];
          &.active {
            @apply text-[rgba(var(--dark-all-font-color),1)];
            border-color: #374558 #374558 #262932;
          }
        }
        .nav-item.show {
          .nav-link {
            @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-[rgba(var(--dark-border-color),1)_rgba(var(--dark-border-color),1)_rgba(var(--dark-card-background),1)];
          }
        }
      }
      .nav-primary {
        .nav-link {
          &.active {
            @apply bg-[rgba(var(--theme-default),1)];
          }
        }
        .nav-item.show {
          .nav-link {
            @apply bg-[rgba(var(--theme-default),1)];
          }
        }
      }
      .custom-tab {
        &.nav-tabs {
          @apply border-b-[none];
        }
      }
      .bg-navbar {
        .nav {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .nav-tabs.nav-bottom {
        .tab-link {
          &.active,
          &.focus,
          &.hover {
            @apply border-[rgba(var(--dark-card-background),1)_rgba(var(--dark-border-color),1)_rgba(var(--dark-border-color),1)];
          }
        }
      }
      .border-tab {
        .tab-link {
          &.active {
            @apply !bg-transparent;
          }
        }
        .show {
          > .tab-link {
            @apply bg-transparent;
          }
        }
      }
      .border-tab.nav-left,
      .border-tab.nav-right {
        .tab-link {
          @apply text-[rgba(var(--dark-all-font-color),1)];

          &.active {
            @apply text-[rgba(var(--theme-default),1)];
          }
        }
        .show {
          > .tab-link {
            @apply text-[rgba(var(--theme-default),1)];
          }
        }
      }
      .border-tab.nav-left.nav-secondary {
        .tab-link {
          &.active,
          &:focus,
          &:hover {
            @apply border-l-[rgba(var(--theme-secondary),1)] text-[rgba(var(--theme-secondary),1)];
          }
        }
        .show > .nav-link {
          @apply border-l-[rgba(var(--theme-secondary),1)] text-[rgba(var(--theme-secondary),1)];
        }
        .nav-item.show {
          @apply text-[rgba(var(--theme-secondary),1)] border-l-[rgba(var(--theme-secondary),1)];
        }
      }
      .border-tab.nav-left.nav-success {
        .nav-link {
          &.active,
          &:focus,
          &:hover {
            @apply text-[rgba(var(--success-color),1)];
          }
        }
        .show > .nav-link {
          @apply border-l-[rgba(var(--success-color),1)] text-[rgba(var(--success-color),1)];
        }
        .nav-item.show {
          @apply text-[rgba(var(--success-color),1)] border-l-[rgba(var(--success-color),1)];
        }
      }
      .border-tab.nav-right.nav-info {
        .nav-link {
          &.active,
          &:focus,
          &:hover {
            @apply text-[rgba(var(--info-color),1)];
          }
        }
        .show > .nav-link {
          @apply border-l-[rgba(var(--info-color),1)] text-[rgba(var(--info-color),1)];
        }
        .nav-item.show {
          @apply text-[rgba(var(--info-color),1)] border-l-[rgba(var(--info-color),1)];
        }
      }
      .border-tab.nav-secondary {
        .nav-link {
          &.active,
          &:focus,
          &:hover {
            @apply text-[rgba(var(--theme-secondary),1)];
          }
        }
        .nav-item {
          &.show {
            @apply text-[rgba(var(--theme-secondary),1)];
          }
        }
      }
      .border-tab.nav-success {
        .nav-link {
          &.active,
          &:focus,
          &:hover {
            @apply text-[rgba(var(--success-color),1)];
          }
        }
        .nav-item {
          &.show {
            @apply text-[rgba(var(--success-color),1)];
          }
        }
      }
      .dropdown-divider {
        @apply border-t-[rgba(var(--dark-border-color),1)] border-t border-solid;
      }
      .icon-hover-bottom {
        @apply bg-[rgba(var(--dark-card-background),1)] shadow-[0px_0px_1px_1px_rgba(var(--dark-card-border),1)];
        .icon-title {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        span {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
        .form-group {
          input {
            @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
          }
        }
        .icon-first {
          i {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
        }
      }
      .horizontal-icons-tab {
        .nav-tabs {
          .nav-item {
            .nav-link {
              @apply bg-[linear-gradient(_90deg,transparent_70%,rgba(255,255,255,0.08)_100%_)];
            }
          }
        }
      }
      .arrow-tabs {
        &.bg-navbar {
          i {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .bottom-navbar {
        .tab-content {
          .tab-paragraph {
            i {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      ul,
      ol,
      dl,
      p {
        @apply text-[rgba(var(--dark-all-font-color),1)];
        li,
        dt,
        dd {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      #cd-timeline {
        &::before {
          @apply bg-[rgba(var(--dark-border-color),1)];
        }
      }
      .timeliny {
        @apply border-t-[rgba(var(--dark-border-color),1)] border-b-[rgba(var(--dark-border-color),1)] border-t border-solid border-b before:bg-[rgba(var(--white),1)];
        .timeliny-dot {
          @apply bg-[rgba(var(--dark-card-background),1)] border border-solid border-[rgba(var(--white),1)] before:text-[rgba(var(--dark-all-font-color),1)];
        }
        .timeliny-timeline {
          .timeliny-timeblock {
            &.active {
              .timeliny-dot {
                &::before {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
                &::after {
                  @apply bg-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-[none];
                }
              }
            }
            &:not(.inactive):not(.active) {
              .timeliny-dot {
                &:hover {
                  @apply bg-[rgba(var(--white),1)];
                  &::before {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
            }
            .timeliny-dot {
              &:hover {
                &::after {
                  @apply bg-[rgba(var(--dark-card-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] border-solid;
                }
              }
            }
          }
        }
      }
      .stroke-dark {
        @apply stroke-[rgba(var(--dark-all-font-color),1)];
      }
      .taskadd {
        table {
          tr {
            td {
              .task_title_0 {
                @apply text-[rgba(var(--white),0.8)];
              }
            }
          }
        }
      }
      .task-sidebar {
        .form-control {
          @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-body-background),1)];
        }
      }
      .todo-wrap {
        &.email-wrap {
          .todo-tasks {
            li {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .user-profile {
        .ttl-info {
          h6 {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
          span {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .hovercard {
          .info {
            .title {
              a {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
          .user-image {
            .avatar {
              img {
                @apply border-[rgba(var(--dark-card-background),1)];
              }
            }
            .icon-wrapper {
              @apply bg-[rgba(var(--dark-card-background),1)];
            }
          }
          .tabs-social {
            @apply border-b-[none];
          }
        }
        .follow {
          .follow-num {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .profile-img-style {
          .user-name {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          p {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
        }
      }
      .introjs-helperLayer {
        @apply bg-[rgba(54,64,74,0.9)] border-[rgba(var(--white),0.5)];
      }
      .jstree-default {
        .jstree-node,
        .jstree-icon {
          @apply text-[#455869];
        }
        .jstree-anchor {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
        .jstree-clicked {
          @apply text-[rgba(var(--white),1)] bg-[rgba(var(--transparent-color),1)];
        }
        .jstree-hovered {
          @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;
        }
      }
      span.twitter-typeahead {
        .tt-menu {
          @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
        .tt-suggestion {
          @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)] border-t-[rgba(var(--dark-card-border),1)] border-t border-solid;
          &:hover,
          &:focus {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .typography {
        small {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .code-box-copy {
        pre {
          @apply bg-[rgba(var(--dark-body-background),1)];

          code {
            @apply bg-[rgba(var(--dark-body-background),1)];
          }
        }
        pre[class*="language-"],
        code[class*="language-"] {
          @apply border border-[rgba(var(--dark-border-color),1)] border-solid text-[rgba(var(--white),1)];
        }
        .code-box-copy__btn {
          @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-border-color),1)] text-[rgba(var(--white),1)] border-solid;
        }
      }
      table.fixedHeader-floating {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .note {
        textarea {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .dt-button-info {
        @apply bg-[rgba(var(--dark-card-background),1)] border border-[rgba(var(--dark-border-color),1)] border-solid;

        h2 {
          @apply bg-[rgba(var(--dark-card-background),1)] border-b-[rgba(var(--dark-border-color),1)] border-b border-solid;
        }
      }
      pre {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      #keytable_wrapper .dataTables_paginate,
      #column-selector_wrapper .dataTables_paginate,
      #auto-fill_wrapper .dataTables_paginate,
      #custom-button_wrapper .dataTables_paginate,
      #class-button_wrapper .dataTables_paginate,
      #keyboard-btn_wrapper .dataTables_paginate,
      #multilevel-btn_wrapper .dataTables_paginate,
      #pagelength-btn_wrapper .dataTables_paginate,
      #basic-colreorder_wrapper .dataTables_paginate,
      #state-saving_wrapper .dataTables_paginate,
      #real-time_wrapper .dataTables_paginate,
      #basic-fixed-header_wrapper .dataTables_paginate,
      #fixed-header-footer_wrapper .dataTables_paginate,
      #export-button_wrapper .dataTables_paginate,
      #excel-cust-bolder_wrapper .dataTables_paginate,
      #cust-json_wrapper .dataTables_paginate,
      #basic-key-table_wrapper .dataTables_paginate,
      #focus-cell_wrapper .dataTables_paginate,
      #responsive_wrapper .dataTables_paginate,
      #new-cons_wrapper .dataTables_paginate,
      #show-hidden-row_wrapper .dataTables_paginate,
      #basic-row-reorder_wrapper .dataTables_paginate,
      #full-row_wrapper .dataTables_paginate,
      #rest-column_wrapper .dataTables_paginate {
        @apply border-[none];
      }
      #example-style-8_wrapper {
        table.dataTable.stripe,
        table.dataTable.display {
          tbody {
            tr.odd {
              @apply bg-[rgba(var(--dark-border-color),1)];
            }
          }
        }
      }
      .error-wrapper {
        @apply bg-[rgba(54,64,74,0.8)];
        .sub-content {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .b-light {
        @apply border border-[rgba(var(--dark-border-color),1)] border-solid;
      }
      .modal-content {
        @apply bg-[rgba(var(--dark-card-background),1)];
        .modal-header {
          @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
          .close {
            @apply text-[rgba(var(--dark-all-font-color),1)] font-normal;
          }
        }
        .ui-front {
          .form-control {
            @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)] border border-[rgba(var(--dark-card-border),1)] border-solid;
          }
        }
      }
      .modal {
        .theme-close {
          @apply text-[rgba(var(--light-all-font-color),1)];
        }
      }
      .token.atrule,
      .token.attr-value,
      .token.keyword {
        @apply text-[rgba(var(--info-color),1)];
      }
      .token {
        &.boolean,
        &.constant,
        &.deleted,
        &.number,
        &.property,
        &.symbol,
        &.tag {
          @apply text-[rgba(var(--danger-color),1)];
        }
      }
      .loader-box {
        &.card-loader {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .my-gallery {
        &.gallery-with-description {
          img {
            border: 1px solid rgba(var(--dark-card-border), 1) !important;
            border-bottom: none !important;
          }
        }
      }
      .alert-theme {
        span {
          + span {
            + span {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
        i {
          @apply mr-5 p-5;
        }
      }
      .user-card {
        .user-deatils {
          h6 {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
        }
        .card-footer {
          > div {
            &:first-child {
              @apply border-r-[rgba(var(--dark-border-color),1)] border-r border-solid;
            }
          }
          .user-footer {
            h6 {
              @apply text-[rgba(var(--dark-small-font-color),1)];
            }
            svg {
              path,
              rect {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
            }
          }
        }
      }
      .navigation-option {
        ul {
          li {
            a {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
            &:hover {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .product-box {
        .product-details {
          h6 {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          > a {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          span {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
        }
        .product-img {
          .product-hover {
            ul {
              li {
                @apply bg-[rgba(var(--dark-card-background),1)] hover:bg-[rgba(var(--black),1)] hover:text-[rgba(var(--white),1)];
              }
            }
          }
        }
      }
      .browse {
        .browse-articles {
          ul {
            li {
              a {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              &:hover {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
      }
      .bootstrap-datetimepicker-widget {
        ul {
          li {
            @apply text-[rgba(var(--dark-all-font-color),1)] border-b-[rgba(var(--dark-border-color),1)] border-b border-solid;
          }
        }
        tr {
          th,
          td {
            &:hover {
              @apply bg-[rgba(var(--dark-card-background),1)];
            }
            span {
              &:hover {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
            }
            &.prev,
            &.next {
              &:hover {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
            }
          }
          &:first-child {
            th {
              &:hover {
                @apply bg-[rgba(var(--dark-card-background),1)];
              }
            }
          }
        }
      }
      .btn-transparent {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      #cal-basic {
        .fc-toolbar {
          .fc-left,
          .fc-right {
            .fc-next-button {
              .fc-icon-right-single-arrow {
                &:after {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
            .fc-prev-button {
              .fc-icon-left-single-arrow {
                &:after {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
          }
          .fc-left {
            .fc-button-group {
              .fc-month-button {
                @apply text-[rgba(var(--white),1)];
              }
            }
          }
        }
      }
      .fc-button-group {
        .fc-basicWeek-button,
        .fc-basicDay-button,
        .fc-agendaWeek-button,
        .fc-agendaDay-button {
          @apply text-[rgba(var(--black),1)];
        }
        .fc-month-button {
          @apply text-[rgba(var(--white),1)];
        }
      }
      .visual-button {
        .button-light-secondary,
        .button-light-warning,
        .button-light-success {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .mix-hover-btn {
        .txt-dark {
          @apply text-[rgba(var(--white),0.6)];
        }
      }
      .btn-light {
        &:not([disabled]):not(.disabled).active.active {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
        &.disabled,
        &:disabled {
          @apply text-[rgba(var(--theme-body-font-color),0.5)];
        }
      }
      #cal-agenda-view {
        .fc-toolbar {
          .fc-right {
            .fc-button-group {
              .fc-month-button,
              .btn-light {
                @apply text-[rgba(var(--black),1)];
              }
              .fc-agendaWeek-button {
                @apply text-[rgba(var(--white),1)] hover:text-[rgba(var(--black),1)];
                &:hover {
                  @apply text-[rgba(var(--black),1)];
                }
              }
            }
          }
        }
      }
      .basic-calendar,
      #cal-bg-events,
      #cal-event-colors {
        .fc-toolbar {
          .fc-right {
            .fc-button-group {
              .fc-basicWeek-button,
              .btn-light {
                @apply text-[rgba(var(--black),1)];
              }
              .fc-month-button {
                @apply text-[rgba(var(--white),1)];
                &:hover {
                  @apply text-[rgba(var(--black),1)];
                }
              }
            }
          }
        }
      }
      .categories {
        ul {
          li {
            a {
              @apply text-[rgba(var(--dark-small-font-color),1)];
            }
            &:hover {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .socialprofile {
        .badge {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
        .likes-profile {
          h5 {
            span {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
        span {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
      }
      .social-status {
        .flex {
          .grow {
            span {
              + span {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
            p,
            .light-span {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
      }
      .filter-cards-view,
      .timeline-content {
        p {
          @apply text-[rgba(var(--dark-all-font-color),0.4)];
        }
        .comment-number {
          i {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
        }
        .comments-box {
          .input-group {
            @apply bg-[rgba(var(--dark-body-background),1)];
            .form-control {
              border: none;
            }
            .input-group-append {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
            .input-txt-bx {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .social-chat {
        .grow {
          @apply border border-[rgba(var(--dark-card-border),1)] border-solid after:border-r-[rgba(var(--dark-card-background),1)] after:border-r-[7px] after:border-solid;
        }
        span {
          span {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .details-about {
        .your-details {
          p {
            @apply text-[rgba(var(--white),0.4)];
          }
        }
      }
      .activity-log {
        .my-activity {
          p {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .bookmark {
        ul {
          li {
            a {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .email-wrap {
        .grow {
          p {
            @apply text-[rgba(var(--dark-all-font-color),0.3)];
          }
        }
      }
      .apexcharts-tooltip.light {
        @apply border-[rgba(var(--dark-card-border),1)] bg-[rgba(var(--dark-body-background),1)];
        .apexcharts-tooltip-title {
          @apply border-[rgba(var(--dark-card-border),1)];
        }
        .apexcharts-tooltip-text-label,
        .apexcharts-tooltip-text-value {
          @apply text-[rgba(var(--white),1)];
        }
      }
      .faq-accordion {
        &.default-according {
          .card {
            .faq-header {
              @apply border-0;
            }
          }
        }
      }
      .seller-order-table {
        .recent-table {
          div.dt-container {
            .table {
              thead,
              tbody {
                tr {
                  th,
                  td {
                    a {
                      @apply text-[rgba(var(--dark-all-font-color),0.4)];
                    }
                    &:nth-child(4) {
                      a {
                        @apply text-[rgba(var(--dark-all-font-color),0.4)];
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .seller-details-table {
        .recent-table {
          .table {
            thead,
            tbody {
              tr {
                th,
                td {
                  .product-action {
                    .square-white {
                      @apply shadow-[unset] bg-[rgba(var(--dark-body-background),1)];
                      svg {
                        @apply fill-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .review-box {
        .seller-profile {
          .accordion-button {
            @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
          .accordion-item {
            .accordion-body {
              @apply bg-[rgba(var(--dark-card-inbox),1)];
              li {
                > div {
                  h6,
                  i:not(.fill) {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
              .policies-wrapper {
                li {
                  label {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
              .notification-wrapper {
                .form-check-label {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
              .checkbox-wrapper {
                li {
                  .form-check-label {
                    i {
                      @apply text-[rgba(var(--dark-all-font-color),1)];
                    }
                  }
                }
              }
            }
          }
        }
        .review-people {
          .review-list {
            li {
              .people-box {
                .people-comment {
                  h6 {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                  .date-time {
                    h6 {
                      @apply text-[rgba(var(--dark-all-font-color),0.4)];
                    }
                  }
                }
              }
            }
          }
        }
      }
      .seller-details-wrapper {
        .review-box {
          .seller-profile {
            .accordion-item {
              @apply bg-[rgba(var(--dark-card-background),1)];
              .accordion-header {
                .accordion-button {
                  &::after {
                    @apply invert-[1];
                  }
                }
              }
            }
          }
          .md-sidebar {
            .email-left-aside {
              .card {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
        .seller-order-table {
          tr {
            td {
              .square-white {
                @apply bg-[unset];
              }
            }
          }
        }
      }
      #radarchart {
        .apexcharts-canvas {
          .apexcharts-graphical {
            .apexcharts-plot-series {
              polygon {
                @apply fill-[rgba(var(--dark-body-background),1)] stroke-[rgba(var(--bg-dark-color),1)];

                &:nth-child(odd) {
                  @apply fill-[rgba(var(--dark-card-inbox),1)];
                }
              }
              line {
                @apply stroke-[rgba(var(--bg-dark-color),1)];
              }
            }
          }
        }
      }
      .apexcharts-radialbar-track {
        &.apexcharts-track {
          path {
            @apply stroke-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .collection-filter-block {
        h6 {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        ul {
          &.pro-services {
            li {
              span {
                @apply text-[rgba(var(--dark-all-font-color),0.3)];
              }
            }
          }
        }
      }
      .rating-box {
        ul {
          li {
            .rating-list {
              .progress {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
      }
      .product-rating-box {
        .review-title-2 {
          p {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .seller-wrapper {
        .form-check {
          .form-check-input {
            &:valid {
              ~ .form-check-label {
                @apply text-[rgba(var(--dark-all-font-color),0.3)];
              }
            }
          }
        }
      }
      .megaoption-space {
        span:not(.pull-right) {
          &:last-child {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .main-upgrade {
        .variation-box {
          .selection-box {
            .flex {
              @apply text-[rgba(var(--bg-dark-color),1)];
            }
          }
        }
      }
      .dark-alert {
        .alert {
          p {
            @apply text-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .dark-alert-msg {
        .alert {
          &[class*="alert-bg-"] {
            p {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
          &[class*="alert-bg-"] {
            .btn-close {
              @apply invert-[1];
            }
          }
        }
      }
      .dark-txt {
        p {
          strong {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .live-dark {
        .btn-close {
          filter: initial;
        }
      }
      .alert-light {
        @apply text-[rgba(var(--dark-body-background),1)];
      }
      .heart-rating {
        .rating-text {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .main-animate {
        a {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
        }
        svg {
          @apply stroke-[rgba(var(--dark-all-font-color),1)];
          &.fill-icon,
          &.fill-secondary {
            @apply stroke-none fill-[rgba(var(--dark-all-font-color),1)];
          }
        }
        i {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        &.heartbeat-wrapper {
          svg {
            @apply stroke-[rgba(var(--danger-color),1)];
          }
          i {
            @apply text-[rgba(var(--danger-color),1)];
          }
        }
        &.border-pulse-wrapper {
          a {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .pulse-wrapper {
        svg,
        i {
          animation: pulse-animate-dark 1s infinite ease;
        }
      }
      .mobile-app-card {
        &.social-empower,
        &.upgrade-plan {
          background: rgba(var(--dark-card-background), 1);
        }
      }
      .campaign-table {
        .badge-light-light {
          &.disabled {
            @apply text-[rgba(var(--dark-editor-document),1)];
          }
        }
        .twitter {
          > div {
            @apply border-[rgba(var(--dark-all-font-color),1)];
          }
          .social-circle {
            @apply bg-[rgba(var(--light-all-font-color),1)] border-[rgba(var(--dark-all-font-color),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .live-auction-wrapper {
        .product-nft-content {
          > div {
            p {
              span {
                &.text-black {
                  @apply !text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .nft-collection {
        .nft-user-info {
          .user-desc {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .currency-table {
        &.task-table {
          .table {
            .main-task-wrapper {
              tr {
                td {
                  .form-check-label {
                    &::before {
                      @apply bg-[rgba(var(--dark-body-background),1)];
                    }
                  }
                }
                .icons-box {
                  .square-white {
                    i {
                      @apply text-[rgba(var(--dark-all-font-color),0.4)];
                    }
                  }
                }
              }
              .square-white {
                i {
                  @apply text-[rgba(var(--dark-all-font-color),0.4)];
                }
              }
            }
          }
        }
      }
      .hovercard {
        .info {
          .follow {
            .border-end {
              @apply border-[rgba(var(--light-all-font-color),1)];
            }
          }
        }
      }
      .tour-email {
        span {
          @apply text-[rgba(var(--dark-small-font-color),1)];
        }
      }
      .dropdown-menu {
        li {
          &:first-child {
            .dropdown-item {
              border-top: var(--transparent-color);
            }
          }
        }
        .dropdown-item {
          @apply border-t-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),1)] opacity-90 hover:bg-[rgba(var(--dark-card-inbox),1)];
        }
      }
      .split-dropdown {
        .dropdown-basic {
          .btn-group {
            .dropdown-menu {
              .dropdown-item {
                a {
                  @apply border-t-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] opacity-90 hover:bg-[rgba(var(--dark-card-inbox),1)];
                }
              }
            }
          }
        }
      }
      .dropdown-basic {
        .dropdown {
          .dropdown-content {
            a {
              @apply border-t-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] opacity-90 hover:bg-[rgba(var(--dark-card-inbox),1)];
            }
          }
        }
      }
      .dark-input-type {
        .input-group {
          .input-group-text {
            @apply border-[unset] bg-[rgba(var(--transparent-color),1)];
          }
        }
      }
      .heading-dropdown {
        .dropdown-menu {
          > li {
            &:first-child {
              > a {
                @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }
      btn-group {
        .dropdown-wrapper {
          .input-group {
            @apply border-t-[rgba(var(--dark-border-color),1)] text-[rgba(var(--dark-all-font-color),1)] opacity-90 hover:bg-[rgba(var(--dark-card-inbox),1)];
          }
        }
      }
      .helper-cards {
        .dropdown-block {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
          li {
            h6 {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
            .dropdown-item {
              @apply bg-[rgba(var(--transparent-color),1)];
            }
          }
        }
      }
      .dark-dropdown-box {
        .btn-group {
          .dropdown-toggle {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .form-wrapper {
        &.dark-form,
        &.show {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .dark-accordion {
        .accordion-item {
          @apply border border-[rgba(var(--dark-card-border),1)] bg-[rgba(var(--transparent-color),1)] border-solid;
          .accordion-collapse {
            p {
              @apply text-[rgba(var(--dark-body-background),1)];
            }
            .accordion-body {
              @apply bg-[rgba(var(--dark-card-background),1)];
              h6 {
                @apply border-0;
              }
            }
          }
        }
        .collapse-wrapper {
          @apply text-[rgba(var(--dark-body-background),1)];
        }
        &.card {
          @apply rounded-[unset];
          &.card-body {
            &.mb-0 {
              @apply rounded-[15px];
            }
          }
        }
      }
      .accordion {
        &.dark-accordion {
          .accordion-item {
            .accordion-collapse {
              .accordion-body {
                .accordions-content {
                  li {
                    @apply text-[rgba(var(--dark-small-font-color),1)];
                  }
                }
              }
              p {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
            }
          }
        }
      }
      .accordions-content {
        li {
          @apply text-[rgba(var(--dark-card-background),1)];
        }
      }
      .dark-list {
        .list-group {
          .list-group-item {
            + .list-group-item {
              @apply border-t;
            }
            .form-check-input {
              @apply border border-[rgba(var(--dark-all-font-color),1)] bg-transparent border-solid;
            }
          }
        }
        .list-light-dark {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .card-wrapper {
        .sub-title {
          border-bottom: unset !important;
        }
      }
      .figure {
        &.dark-blockquote {
          .blockquote {
            @apply border-l-[rgba(var(--theme-default,1))] border-r-[rgba(var(--theme-default,1))];
            p {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .typography-list {
        .card-wrapper {
          dl {
            dt {
              @apply text-[rgba(var(--dark-all-font-color),0.8)];
            }
          }
        }
      }
      .datatable-init,
      .datatable-advance-wrapper,
      .datatable-api-wrapper,
      .data-source-wrapper,
      .autofill-data-tables,
      .support-ticket-table {
        div.dt-container {
          table {
            tbody {
              tr {
                td {
                  @apply !text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .basic_table {
        .card-block {
          .table {
            &.light-card {
              @apply bg-[rgba(var(--dark-card-inbox),1)];
            }
          }
          table.table-light {
            --bs-table-bg: #22262f;
            thead,
            tbody {
              tr {
                th,
                td {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
            tbody {
              tr {
                td {
                  @apply !bg-[rgba(var(--dark-card-inbox),1)];
                }
              }
            }
          }
        }
      }
      .dark-sign-up {
        .modal-body {
          form {
            .form-label {
              @apply text-[rgba(var(--bg-dark-color),1)];
            }
            .form-check {
              .form-check-label {
                @apply text-[rgba(var(--bg-dark-color),1)];
              }
            }
            .form-control {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }

        &.social-profile {
          @apply bg-[rgba(var(--dark-body-background),1)];
          background-image: unset !important;
          .modal-body {
            form {
              .form-check {
                .form-check-label {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
            .form-label {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .modal-dialog {
        .modal-content {
          .dark-modal {
            .large-modal-header {
              svg {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              h6 {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
            .large-modal-body {
              svg {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              p {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }
      .modal-toggle-wrapper {
        .dark-toggle-btn {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .social-profile {
        @apply bg-fixed;
        .social-details {
          h5 {
            a {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .md-sidebar {
        .job-sidebar {
          @apply shadow-[0px_9px_20px_rgba(var(--dark-body-background),0.7)];
        }
      }
      .job-sidebar {
        .job-accordion {
          .card-body {
            &.animate-chk:not(.filter-cards-view) {
              .form-check {
                .form-check-label {
                  .number {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
              }
            }
          }
        }
      }
      .popover {
        .popover-arrow {
          @apply bg-[rgba(var(--dark-border-color),1)];
        }
      }
      .main-file-sidebar {
        .md-sidebar {
          .md-sidebar-aside {
            .common-sort-card {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .file-manager-grid {
        .freeze-ui {
          @apply bg-[rgba(var(--dark-body-background),0.8)];
        }
        .doc-icon {
          @apply text-[rgba(var(--dark-body-background),1)];
          &::after {
            @apply border-[rgba(var(--dark-body-background),1)] border-b-[#323846] border-l-[#323846];
          }
        }
        .file {
          &:hover {
            .doc-icon {
              &::after {
                @apply border-[rgba(var(--dark-body-background),1)] border-b-[#323846] border-l-[#323846];
              }
            }
          }
        }
        .item-selected {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
          &.file {
            .doc-icon {
              &::after {
                @apply border-[rgba(var(--dark-body-background),1)] border-b-[rgba(var(--dark-light-color),1)] border-l-[rgba(var(--dark-light-color),1)];
              }
            }
          }
          &:hover {
            @apply bg-[rgba(var(--dark-card-inbox),1)];
          }
        }
      }
      .common-file-manager {
        .filemanger {
          .top-menu {
            @apply bg-[rgba(var(--dark-body-background),1)];

            button {
              @apply bg-[rgba(var(--dark-card-inbox),1)] text-[rgba(var(--dark-all-font-color),1)];
            }
          }
          .top-folder-path {
            @apply bg-[rgba(var(--dark-card-background),1)];
            .path-action-btns {
              button {
                @apply bg-[rgba(var(--dark-card-background),1)];
                &:disabled {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }
              }
            }
            .folder-path-write {
              @apply bg-[rgba(var(--dark-body-background),1)];
              button {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
              input {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
          }
        }
        .popup {
          .popup-content {
            @apply bg-[rgba(var(--bg-dark-color),1)];
            form {
              input {
                @apply bg-[rgba(var(--dark-card-inbox),1)] text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
        .folderEmpty {
          @apply bg-[rgba(var(--dark-body-background),0.4)];
        }
      }
      .bootstrap-select {
        .dropdown-toggle {
          @apply text-[rgba(var(--dark-gray),1)] bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--transparent-color),1)];
        }
        .bs-searchbox {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
        }
        .no-results {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
        .dropdown-menu {
          .dropdown-header {
            @apply bg-[rgba(var(--dark-body-background),1)];
          }
          .dropdown-item {
            @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)] hover:bg-[rgba(var(--dark-body-background),1)];
          }
          .form-control {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .discount-options {
        .nav-link {
          @apply text-[rgba(var(--dark-all-font-color),0.4)];
        }
      }
      .filepond--drop-label {
        &.filepond--drop-label {
          label {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .filepond--root {
        .filepond--panel-root {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .dropzone {
        &.dropzone-secondary {
          i {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .dz-preview {
          &.dz-file-preview {
            .dz-image {
              background: linear-gradient(to bottom, rgba(var(--dark-card-inbox), 1), rgba(var(--dark-body-background), 1));
            }
          }
          &.dz-image-preview {
            @apply bg-[rgba(var(--transparent-color),1)];
          }
          .dz-details {
            .dz-size,
            .dz-filename {
              span {
                @apply bg-[rgba(var(--transparent-color),1)] text-[rgba(var(--dark-all-font-color),0.3)];
              }
            }
          }
        }
      }
      .warning-alert {
        p {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        .btn-close {
          @apply invert-[1];
        }
      }
      .dark-helper {
        @apply bg-[rgba(var(--dark-body-background),0.4)];
        h6,
        span {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        .text-muted {
          @apply text-[rgba(var(--dark-card-background),1)];
        }
      }
      .font-dark {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .helper-common-box {
        .border-common-box {
          @apply border-[rgba(var(--dark-card-border),1)];
        }
        .radius-wrapper {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .irs-min,
      .irs-max {
        @apply text-[rgba(var(--dark-small-font-color),1)] bg-[rgba(var(--dark-card-inbox),1)];
      }
      .irs--flat,
      .irs--square,
      .irs--round {
        .irs-line {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .irs--big,
      .irs--modern {
        .irs-line {
          @apply border-[rgba(var(--dark-card-border),1)];
          background: rgba(var(--dark-body-background),1);
        }
      }
      .irs--sharp {
        .irs-line {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .jvectormap-container {
        .jvectormap-zoomin,
        .jvectormap-zoomout {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
        }
      }
      .linear-divider {
        h6 {
          @apply text-[rgba(var(--white),0.5)];
        }
      }
      .main-divider {
        .vertical-divider {
          .divider-dark-icon {
            @apply stroke-[rgba(var(--white),0.5)];
          }
          .vertical-line {
            @apply text-[rgba(var(--dark-card-background),1)];
            &.bg-dark {
              @apply !bg-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
        .divider-h-line,
        .vr {
          &.bg-dark {
            @apply !bg-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .animated-divider {
        &.animated-line {
          &:before {
            background: linear-gradient(90deg, rgba(var(--dark-card-background), 1) 0%, rgba(var(--dark-card-background), 1) 5%, rgba(var(--transparent-color), 1) 5%, rgba(var(--transparent-color), 1) 10%, rgba(var(--dark-card-background), 1) 10%, rgba(var(--dark-card-background), 1) 15%, rgba(var(--transparent-color), 1) 15%, rgba(var(--transparent-color), 1) 20%, rgba(var(--dark-card-background), 1) 20%, rgba(var(--dark-card-background), 1) 25%, rgba(var(--transparent-color), 1) 25%, rgba(var(--transparent-color), 1) 30%, rgba(var(--dark-card-background), 1) 30%, rgba(var(--dark-card-background), 1) 35%, rgba(var(--transparent-color), 1) 35%, rgba(var(--transparent-color), 1) 40%, rgba(var(--dark-card-background), 1) 40%, rgba(var(--dark-card-background), 1) 45%, rgba(var(--transparent-color), 1) 45%, rgba(var(--transparent-color), 1) 50%, rgba(var(--dark-card-background), 1) 50%, rgba(var(--dark-card-background), 1) 55%, rgba(var(--transparent-color), 1) 55%, rgba(var(--transparent-color), 1) 60%, rgba(var(--dark-card-background), 1) 60%, rgba(var(--dark-card-background), 1) 65%, rgba(var(--transparent-color), 1) 65%, rgba(var(--transparent-color), 1) 70%, rgba(var(--dark-card-background), 1) 70%, rgba(var(--dark-card-background), 1) 75%, rgba(var(--transparent-color), 1) 75%, rgba(var(--transparent-color), 1) 80%, rgba(var(--dark-card-background), 1) 80%, rgba(var(--dark-card-background), 1) 85%, rgba(var(--transparent-color), 1) 85%, rgba(var(--transparent-color), 1) 90%, rgba(var(--dark-card-background), 1) 90%, rgba(var(--dark-card-background), 1) 95%, rgba(var(--transparent-color), 1) 95%, rgba(var(--transparent-color), 1) 100%);
            background-size: 150px;
          }
        }
      }
      .ribbon-wrapper,
      .ribbon-wrapper-bottom,
      .ribbon-vertical-left-wrapper,
      .ribbon-wrapper-right,
      .ribbon-vertical-right-wrapper {
        &.alert-light-light {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
        }
      }
      button {
        &.progress-btn {
          @apply bg-[rgba(var(--dark-card-inbox),1)] border-[rgba(var(--dark-card-inbox),1)];
        }
      }
      .pagination {
        .page-item {
          .page-link {
            &.rounded-full {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
          &.disabled {
            .page-link {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
          }
        }
      }
      .dark-timeline {
        .date-content {
          @apply !text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .animated-timeline {
        .timeline-block {
          .title {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          &::before {
            @apply border border-[rgba(var(--dark-card-border),1)] border-dashed;
          }
          .timeline-event {
            @apply bg-[rgba(var(--dark-body-background),1)] border border-[rgba(var(--dark-card-border),1)] border-dashed before:bg-[rgba(var(--dark-card-border),1)];
            .timeline-desc {
              h6 {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              span {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
            &.non-focus {
              @apply bg-[rgba(var(--dark-body-background),0.4)] border border-[rgba(var(--dark-card-border),0.4)] border-dashed;
              .timeline-desc {
                h6 {
                  @apply text-[rgba(var(--dark-all-font-color),0.4)];
                }
                span {
                  @apply text-[rgba(var(--light-all-font-color),0.4)];
                }
              }
            }
          }
        }
      }
      .timeline-list {
        &.timeline-border {
          @apply border-b-[rgba(var(--dark-card-border),1)];
        }
      }
      .activity-log {
        &.main-timeline {
          &.notification {
            .basic-timeline {
              ul {
                li {
                  .date-content {
                    @apply bg-[rgba(var(--transparent-color),1)];
                  }
                }
              }
            }
          }
        }
      }
      .student-leader-wrapper {
        .student-leader-content {
          @apply border-b-[rgba(var(--dark-card-border),1)];
        }
      }
      .attendance-card {
        .left-overview-content {
          .svg-box {
            @apply shadow-[unset] border border-[rgba(var(--dark-card-border),1)] border-solid;
          }
        }
      }
      .task-table {
        .main-task-wrapper {
          .square-white {
            @apply shadow-[unset] border bg-[rgba(var(--dark-body-background),1)] border-solid border-transparent;
          }
        }
      }
      .income-wrapper {
        ul {
          li {
            + li {
              @apply border-l-[rgba(var(--dark-card-border),1)] border-l border-dashed;
            }
          }
        }
      }
      .icons-box-2 {
        .open-options {
          .dropdown-menu {
            @apply bg-[rgba(var(--dark-body-background),1)];
            .dropdown-item {
              &:hover {
                @apply bg-[rgba(var(--dark-card-inbox),1)];
              }
            }
          }
        }
      }
      .main-product-wrapper {
        .product-body {
          .product-search {
            &.input-group {
              > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
              .input-group-text {
                @apply border border-[rgba(var(--dark-card-border),1)] border-solid border-r-[0px];
              }
              .form-control {
                @apply border border-[rgba(var(--dark-card-border),1)] border-l-[0px] bg-[rgba(var(--dark-card-background),1)] border-l-[unset] border-solid;
                [dir="rtl"] & {
                  @apply border border-[rgba(var(--dark-card-border),1)] border-r-[unset] border-solid;
                }
              }
            }
          }
        }
      }
      .shop-category-slider {
        .swiper-wrapper {
          .category-title {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .our-product-wrapper {
        @apply shadow-[0px_3px_17px_rgb(113_113_137_/_18%)];
      }
      .order-details {
        .search-items {
          .input-group-text {
            @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
          }
        }
        .common-search {
          .input-group-text {
            @apply border border-[rgba(var(--dark-card-border),1)] border-solid border-r-[0px];
          }
          &.input-group {
            .form-control {
              &:focus {
                @apply !border-[rgba(var(--dark-card-border),1)];
              }
            }
          }
        }
      }
      .create-customers {
        .modal-body {
          .dark-sign-up {
            form {
              .form-label {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              .form-control {
                @apply text-[rgba(var(--light-all-font-color),1)];
                &::placeholder {
                  @apply text-[rgba(var(--light-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .customer-sticky {
        .border-bottom {
          @apply border-b-[rgba(var(--dark-card-border),1)];
        }
      }
      .compare-order {
        .card-body {
          .progress {
            background: rgba(var(--dark-body-background), 1);
          }
          .user-text {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
        .compare-icon {
          &[class*="shadow-"] {
            @apply !shadow-[0px_10.511241px_12.4089927673px_0px_rgba(var(--dark-card-inbox),1)];
          }
        }
      }
      .pipeline-data {
        .common-flex {
          span {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .crm-todo-list {
        li {
          span {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .analytics-widget {
        @apply bg-[rgba(var(--dark-card-background),1)] bg-blend-darken;
      }
      .grid-showcase {
        span {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .ribbon-wrapper,
      .ribbon-wrapper-bottom,
      .ribbon-vertical-left-wrapper,
      .ribbon-wrapper-right,
      .ribbon-vertical-right-wrapper {
        &.alert-light-light {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .main-session-devices {
        .progress {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .widget-11 {
        @apply bg-blend-color-burn;
      }
      .project-finish-card {
        .project-left-content {
          .progress {
            background: linear-gradient(180.36deg, rgba(var(--dark-card-border), 1) -32.82%, rgba(var(--dark-body-background), 1) 99.69%);
          }
        }
      }
      .employee-list-table {
        &.recent-table {
          table {
            tbody {
              .square-white {
                @apply shadow-[unset];
                svg {
                  @apply fill-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .dashboard-12 {
        .tasks-card {
          .arrow-group {
            .next,
            .prev {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
          .task-box {
            .progress {
              background: rgba(var(--light-all-font-color), 1);
            }
            .swiper-wrapper {
              .swiper-slide {
                + .swiper-slide {
                  @apply border-[rgba(var(--dark-card-border),1)];
                }
              }
            }
          }
        }
        .task-card {
          .common-space {
            &:nth-child(2),
            &:nth-child(3) {
              @apply text-[rgba(var(--dark-all-font-color),0.3)];
            }
          }
        }
        .small-stats {
          .task-box {
            p,
            a {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
      }
      .dashboard-13 {
        .widget-13 {
          @apply bg-blend-color-burn;
        }
        .shipping-details {
          .simple-timeline {
            ul {
              li {
                .shipment-details {
                  p {
                    &:last-child {
                      @apply border-b-[rgba(var(--dark-card-border),0.5)];
                    }
                  }
                }
                .dots {
                  @apply border-[rgba(var(--dark-body-background),1)] shadow-[0px_6px_18px_0px_rgba(var(--dark-small-font-color),0.19)];
                }
              }
            }
          }
        }
      }
      input[type="file"]::file-selector-button {
        @apply text-[rgba(var(--white),0.6)];
      }
      .main-setting {
        .tab-content {
          @apply border-[rgba(var(--dark-card-border),1)];
          .advance-options {
            .tab-link {
              @apply bg-[rgba(var(--transparent-color),1)];
            }
          }
        }
        .tab-link {
          @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),0.4)];
          svg {
            @apply stroke-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
        .form-label {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        .form-control {
          @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .multiple-selects {
        select {
          option {
            &:checked {
              @apply bg-[rgba(var(--dark-card-inbox),1)] text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .autosize-textarea {
        .textarea {
          @apply border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)];
        }
        .textarea[contenteditable]:empty::before {
          @apply text-[rgba(var(--dark-all-font-color),0.2)];
        }
      }
      .square-timeline {
        &::before {
          @apply border-[rgba(var(--dark-card-border),1)];
        }

        .timeline-event {
          .timeline-event-wrapper {
            .timeline-thumbnail {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }

          &:hover {
            .timeline-event-wrapper {
              .timeline-thumbnail {
                @apply text-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
      }
      .rounded-timeline {
        .container {
          &::before {
            @apply bg-[rgba(var(--dark-card-border),1)];
          }
          &::after {
            @apply border-[rgba(var(--dark-card-border),1)] bg-[rgba(var(--bg-dark-color),1)];
          }
        }
        .timeline {
          &::after {
            @apply bg-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      audio::-webkit-media-controls-play-button,
      audio::-webkit-media-controls-panel {
        @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
      }
      audio::-webkit-media-controls-current-time-display,
      audio::-webkit-media-controls-time-remaining-display {
        text-shadow: unset;
      }
      audio::-webkit-media-controls-enclosure {
        background: unset;
      }
      .project-cards {
        .project-list {
          .main-card-box {
            .cost-right-data {
              ul {
                li {
                  &:first-child {
                    @apply border-[rgba(var(--dark-all-font-color),0.3)];
                  }
                  span {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
              }
            }
            > .common-space {
              @apply border-[rgba(var(--dark-all-font-color),0.3)];
            }
          }
        }
        .projects-wrapper {
          .list-box {
            .project-body {
              .progress {
                @apply bg-[rgba(var(--light-all-font-color),1)];
              }
            }
          }
        }
      }
      .gallery-description-skeleton {
        .skeleton-wrapper {
          @apply border-[rgba(var(--dark-card-border),1)];
        }
      }
      .job-accordion {
        .location-checkbox {
          label {
            span {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
        span:not(.number) {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        .filter-cards-view,
        .animate-chk {
          .form-check {
            .form-check-label {
              .number {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
          }
        }
      }
      .job-apply-wrapper {
        .job-description {
          input[type="text"] {
            @apply border border-[transparent] border-solid;
          }
        }
      }
      .social-app-profile {
        .tab-pane {
          .job-accordion {
            .filter-cards-view {
              p {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
          }
        }
      }
      .social-app-profile1 {
        .social-app-profile {
          .social-friends {
            .social-profile {
              .card-social {
                &::before {
                  @apply border-t-[rgba(var(--dark-card-border),1)];
                }
              }
            }
            .social-follow {
              li {
                + li {
                  &::before {
                    @apply bg-[rgba(var(--light-all-font-color),1)];
                  }
                }
              }
            }
          }
          .gallery-with-description {
            .caption {
              ul {
                li {
                  + li {
                    @apply border-l-[rgba(var(--dark-card-border),1)];
                  }
                }
              }
            }
          }
          .common-user-image {
            .tabs-social {
              .nav-item {
                .nav-link {
                  &.active {
                    @apply bg-[rgba(var(--dark-card-background),1)];
                  }
                }
              }
            }
          }
        }
      }
      .main-vertical-tab {
        .nav-link {
          .badge {
            @apply bg-[rgba(var(--white),0.9)];
          }
        }
      }
      .main-scope-project {
        .progress-project-box {
          .project-body {
            .progress {
              @apply bg-[rgba(var(--light-all-font-color),1)];
            }
          }
        }
      }
      .create-project-form {
        .bootstrap-select {
          .dropdown-toggle {
            @apply border-[rgba(var(--dark-body-background),1)] bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--light-all-font-color),1)];
          }
          .dropdown-menu {
            .bs-searchbox {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
          .inner {
            @apply bg-[rgba(var(--dark-body-background),1)];
            .dropdown-menu {
              .no-results {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
        .form-control {
          &::-webkit-input-placeholder {
            @apply text-[rgba(var(--white),0.15)];
          }
        }
      }
      .projects-wrapper {
        .project-body {
          .project-bottom {
            p {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .budget-card {
        &.widget-2 {
          @apply bg-blend-color-burn;
        }
      }
      .filter-header {
        .btn-group {
          .dropdown-toggle {
            @apply border-[rgba(var(--dark-card-border),0.4)] text-[rgba(var(--dark-all-font-color),1)];
          }
          .dropdown-menu {
            li {
              .dropdown-item {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }
      .project-timeline {
        .notification {
          ul {
            li {
              span {
                @apply text-[rgba(var(--dark-all-font-color),1)];
                .activity-profile {
                  @apply border-[rgba(var(--dark-card-border),1)];
                }
              }
              .upload-doc {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
              .flowchart-wrapper {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
              .project-task-note {
                @apply border-[rgba(var(--dark-card-border),1)];
              }
            }
          }
        }
      }
      .attach-files-wrapper {
        .upload-files-wrapper {
          > div {
            @apply bg-[rgba(var(--dark-body-background),1)];
            background: rgba(var(--dark-body-background),1);
            .common-space {
              p,
              span {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
            .progress {
              background: rgba(var(--dark-card-inbox),1);
            }
          }
        }
      }
      .project-budget-wrapper {
        .form-check-input,
        .form-control {
          &:focus {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }
        .touchspin-wrapper {
          @apply bg-[rgba(var(--dark-body-background),0.8)];
        }
      }
      .common-searchbox {
        .input-group-text {
          @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
          border-right: none;
        }
        .form-control {
          &:focus {
            @apply border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .progress-project {
        @apply border-[rgba(var(--dark-card-inbox),1)];
        .common-space {
          .common-align {
            .badge {
              @apply bg-[rgba(var(--bg-dark-color),1)];
            }
          }
        }
      }
      .summary-chart-box {
        @apply bg-[rgba(var(--dark-body-background),1)];
        .apexcharts-graphical {
          .apexcharts-radial-series {
            .apexcharts-text {
              @apply fill-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .scope-bottom-wrapper {
        .sidebar-left-icons {
          .tab-link {
            .nav-rounded {
              .product-icons {
                svg {
                  @apply fill-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
          }
          .nav-item{
            &:nth-child(4) {
              .tab-link{
                .product-icons{
                  svg {
                    @apply stroke-[#98a6ad];
                  }
                }
              }
            }
          }
        }
      }
      .common-project-header {
        .common-align {
          &:last-child {
            .common-align {
              li {
                span {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
                svg {
                  @apply stroke-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
          }
        }
      }
      .project-pending-table {
        &.recent-table {
          table {
            thead,
            tbody {
              tr {
                th,
                td {
                  @apply !text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .activity-wrapper {
        .schedule-wrapper {
          @apply border-b-[unset];
        }
        .tab-content {
          .activity-update {
            > li {
              @apply border-l-[rgba(var(--dark-card-border),1)];
            }
          }
        }
      }
      .invite-member {
        ul {
          li {
            svg {
              @apply stroke-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .main-team-box {
        > div {
          @apply bg-[rgba(var(--dark-card-inbox),1)];
        }
      }
      .team-box {
        &-content {
          .common-space {
            > span {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
        &-footer {
          @apply border-t-[rgba(var(--dark-border-color),1)];
        }
      }
      .cmt-box {
        .form-control {
          @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .main-scrollspy {
        .experience-section {
          h6 {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
        .navbar-scrollspy {
          .nav-pills {
            .nav-item {
              &.dropdown {
                .dropdown-menu {
                  li {
                    .dropdown-item {
                      &.active,
                      &:hover {
                        @apply bg-[rgba(var(--dark-body-background),1)];
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .blog-box {
        .blog-details {
          p {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          .blog-social {
            li {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
          .single-blog-content-top {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }
        .blog-date {
          @apply text-[rgba(var(--dark-all-font-color),0.8)];
        }
        .blog-details-main {
          .blog-social {
            li {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
          .blog-bottom-details {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .blog-list {
        .blog-details {
          h6 {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .comment-box {
        .flex {
          img {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
          h6 {
            span {
              @apply text-[rgba(var(--dark-all-font-color),0.3)];
            }
          }
        }
        .comment-social {
          li {
            @apply text-[rgba(var(--dark-all-font-color),0.2)] first:border-r-[rgba(var(--dark-card-border),1)];
            &:first-child {
              [dir="rtl"] & {
                @apply border-l-[rgba(var(--dark-card-border),1)] border-r-[unset];
              }
            }
          }
        }
      }
      .blog-single {
        .blog-details {
          .single-blog-content-top {
            p {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
        .comment-box {
          p {
            @apply text-[rgba(rgba(var(--dark-all-font-color),1),0.4)];
          }
        }
      }
      .user-profile {
        .freeze-ui4,
        .freeze-ui7 {
          @apply bg-[rgba(var(--dark-body-background),0.8)];
        }
        .block-main-wrapper {
          .block-wrapper {
            .freeze-ui {
              @apply bg-[rgba(var(--dark-body-background),0.8)];
            }
          }
        }
        .overlay-bg {
          @apply !bg-[rgba(var(--dark-body-background),0.1)] opacity-30;
        }
      }
      .form-main-wrapper {
        .form-block-wrapper {
          .form-control {
            &::placeholder {
              @apply text-[rgba(var(--light-all-font-color),1)];
            }
          }
        }
      }
      div:where(.swal2-container) input:where(.swal2-input) {
        @apply border-[rgba(var(--dark-card-border),1)];
      }
      .swal2-container {
        .swal2-popup {
          @apply bg-[rgba(var(--dark-body-background),1)];
          .swal2-title {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          .swal2-checkbox {
            @apply bg-[rgba(var(--transparent-color),1)];
          }
          .form-label,
          label {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          .form-control {
            @apply text-[rgba(var(--light-all-font-color),1)];
          }
          .swal2-html-container {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
        .swal2-wrapper {
          .form-control,
          .form-select {
            @apply border-[rgba(var(--dark-card-border),1)] bg-[rgba(var(--dark-card-background),1)];
          }
        }
        .swal2-timer-progress-bar-container {
          .swal2-timer-progress-bar {
            @apply bg-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .main-offcanvas-wrapper {
        .card-body {
          [class*="offcanvas-"] {
            .offcanvas-body {
              .input-group-text {
                @apply border-[rgba(var(--dark-card-border),1)];
              }
              .form-select,
              .form-control {
                @apply !text-[rgba(var(--white),0.3)];
              }
              .form-label {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }
      .form-control[type="file"]:not(:disabled):not([readonly]) {
        @apply text-[rgba(var(--light-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)];
      }
      .custom-input {
        .form-control,
        .form-select {
          @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .vertical-main-wizard {
        .header-vertical-wizard {
          .nav-link {
            .vertical-wizard {
              .stroke-icon-wizard {
                @apply border-[rgba(var(--dark-card-border),1)];
                i {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
            &:active,
            &.active {
              .vertical-wizard {
                .vertical-wizard-content {
                  h6 {
                    @apply text-[rgba(var(--dark-small-font-color),1)];
                  }
                }
              }
            }
          }
        }
        .accordion {
          .accordion-item {
            .accordion-button {
              &.collapsed {
                @apply bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
        }
      }
      .dashboard-4 {
        .transaction-card {
          .active {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .default-dashboard,
      .dashboard-2,
      .dashboard-3,
      .dashboard-4,
      .dashboard-5,
      .dashboard-6,
      .dashboard-7,
      .dashboard-09,
      .dashboard-10,
      .dashboard-11,
      .dashboard-12,
      .dashboard-13,
      .main-scope-project,
      .e-category,
      .list-product-view,
      .seller-details-wrapper,
      .common-order-history,
      .common-cart,
      .role-permission-wrapper,
      .user-list-wrapper,
      .manage-review-wrapper,
      .candidate-wrapper,
      .product-report-wrapper,
      .sale-report-wrapper,
      .sale-return-wrapper,
      .customer-order-wrapper,
      .main-tasks,
      .subscribed-user,
      .api-manage {
        div.dt-container {
          .dt-layout-row {
            thead {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
            .dt-length {
              .dt-input {
                @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-[rgba(var(--dark-card-border),1)];
              }
              .dt-input {
                &:focus-visible {
                  outline: transparent;
                }
              }
            }
            .dataTable {
              input {
                &.dt-select-checkbox {
                  &:indeterminate::after {
                    @apply bg-[rgba(var(--white),0.8)];
                  }
                }
              }
            }
            tr {
              &.selected {
                td {
                  @apply shadow-[inset_0_0_0_9999px_rgba(var(--dark-card-inbox),1)];
                }
                a {
                  @apply text-[rgba(var(--dark-all-font-color),0.4)];
                }
              }
            }
            .dt-layout-cell {
              .dt-info {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
            .dt-search {
              label {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
              .dt-input {
                @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
                outline: unset;
              }
            }
            .dt-paging {
              .dt-paging-button {
                @apply bg-[rgba(var(--dark-body-background),1)];
                &.current {
                  @apply bg-[rgba(var(--theme-default),1)];
                }
                &.disabled {
                  @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
        table {
          tbody {
            tr {
              td {
                .square-white {
                  @apply shadow-[unset] bg-[rgba(var(--dark-body-background),1)];
                  svg {
                    @apply fill-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
              }
            }
          }
        }
      }
      .product-report-wrapper,
      .sale-report-wrapper,
      .sale-return-wrapper,
      .customer-order-wrapper {
        .flatpickr-input {
          span {
            @apply border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
          #rangeButtons {
            @apply shadow-[0px_0px_28px_6px_rgba(var(--dark-body-background),1)];
            button {
              @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),0.4)];
              &:hover {
                @apply text-[rgba(var(--theme-default),1)];
              }
              &.active {
                @apply bg-[rgba(var(--theme-default),1)] text-[rgba(var(--white),1)];
              }
            }
          }
        }
      }
      .cke {
        .cke_top {
          @apply border-[rgba(var(--dark-card-border),1)] bg-[rgba(var(--dark-body-background),1)];
        }
        .cke_button {
          .cke_button_icon {
            @apply invert-[1];
          }
          &:hover {
            .cke_button_icon {
              @apply hue-rotate-[45deg];
            }
          }
        }
        .cke_combo_button {
          .cke_combo_text {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          .cke_combo_arrow {
            @apply border-t-[rgba(var(--dark-all-font-color),1)];
          }
          &:hover {
            .cke_combo_text {
              @apply text-[rgba(var(--dark-body-background),1)];
            }
            .cke_combo_arrow {
              @apply border-t-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .customer-order-wrapper {
        .customer-order-report {
          .recent-table {
            table {
              thead,
              tbody {
                tr {
                  th,
                  td {
                    .customer-details {
                      a {
                        @apply text-[rgba(var(--dark-all-font-color),1)];
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .subscribed-user-wrapper {
        .recent-table {
          table {
            thead,
            tbody {
              tr {
                th,
                td {
                  .square-white {
                    @apply shadow-[0px_0px_28px_6px_rgba(var(--dark-body-background),1)];
                    i {
                      @apply text-[rgba(var(--dark-all-font-color),1)];
                    }
                  }
                }
              }
            }
          }
        }
      }
      .api-management {
        .recent-table {
          table {
            thead,
            tbody {
              tr {
                th,
                td {
                  .square-l-white {
                    @apply bg-[rgba(var(--dark-body-background),1)];
                    i {
                      @apply text-[rgba(var(--light-all-font-color),1)];
                    }
                  }
                }
              }
            }
          }
        }
      }
      .role-permission-wrapper {
        .permission-form {
          ul {
            li {
              .form-check {
                .form-check-input {
                  &:valid ~ .form-check-label {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
              }
            }
          }
        }
      }
      .user-list-wrapper {
        .user-list-table {
          a {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .manage-review-wrapper {
        .bootstrap-select {
          .dropdown-toggle {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
        .manage-review {
          .recent-table {
            table {
              thead,
              tbody {
                tr {
                  th,
                  td {
                    .common-f-start {
                      .user-details {
                        p {
                          @apply text-[rgba(var(--dark-all-font-color),0.4)];
                        }
                      }
                    }
                    .customer-review {
                      span {
                        @apply text-[rgba(var(--dark-all-font-color),0.4)];
                      }
                    }
                    [class*="square-"] {
                      @apply shadow-[0px_0px_28px_6px_rgba(var(--dark-body-background),1)];
                    }
                  }

                  &.dt-hasChild {
                    ~ {
                      tr[data-dt-row] {
                        tbody {
                          @apply bg-[rgba(var(--dark-body-background),1)];
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      td.highlight {
        @apply bg-[rgba(var(--dark-datatable-odd),1)];
      }
      .basic_table {
        &.jsgrid {
          .jsgrid-table {
            .jsgrid-edit-row {
              .jsgrid-cell {
                @apply bg-[rgba(var(--dark-editor-document),1)];
                input {
                  @apply bg-[rgba(var(--dark-datatable-sorting),1)] text-[rgba(var(--white),1)] border-[rgba(var(--transparent-color),1)];
                  &:focus,
                  &:focus-visible {
                    @apply outline-[rgba(var(--dark-card-border),1)];
                  }
                }
              }
            }
          }
        }
      }
      .card-wrapper,
      .dark-field {
        .form-control {
          @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-all-font-color),1)];
          &::placeholder {
            @apply text-[rgba(var(--darl-all-font-color),1)];
          }
        }
      }
      .dt-input {
        @apply !bg-[rgba(var(--dark-body-background),1)] !border-[rgba(var(--dark-card-border),1)];
      }
      .dark-inputs {
        .form-control {
          &.btn-square {
            @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)];
          }
          &.btn-pill {
            @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)];
          }
          &.input-air-primary {
            @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .horizontal-wizard-wrapper {
        .main-horizontal-header {
          .horizontal-options {
            .nav-link {
              .horizontal-wizard {
                .stroke-icon-wizard {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .default-inline-calender {
        .main-inline-calender {
          .form-control {
            @apply hidden;
          }
          .flatpickr-calendar {
            @apply shadow-[unset];
            .flatpickr-months {
              .flatpickr-monthDropdown-months {
                option {
                  @apply bg-[rgba(var(--dark-body-background),1)];
                }
              }
            }
          }
        }
      }
      .touchspin-wrapper,
      .pre-post-touchspin {
        input[type="number"] {
          &.input-touchspin {
            @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .variation-box {
        .selection-box {
          input {
            &[type="checkbox"]:checked ~ div {
              @apply text-[rgba(var(--bg-dark-color),1)];
            }
          }
        }
      }
      .flatpickr-calendar {
        box-shadow: unset;
        &.arrowTop {
          &::before {
            @apply border-b-[rgba(var(--dark-body-background),1)];
          }
          &::after {
            @apply border-b-[rgba(var(--dark-body-background),1)];
          }
        }
        &.arrowBottom {
          &::before {
            @apply border-t-[rgba(var(--dark-body-background),1)];
          }
          &::after {
            @apply border-t-[rgba(var(--dark-body-background),1)];
          }
        }
        &.animate {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
        .flatpickr-months {
          .flatpickr-prev-month,
          .flatpickr-next-month {
            @apply fill-[rgba(var(--dark-all-font-color),1)];
          }
          .flatpickr-monthDropdown-months {
            @apply text-[rgba(var(--dark-all-font-color),1)];
            .flatpickr-monthDropdown-month {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
          .flatpickr-current-month {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        .flatpickr-innerContainer {
          .flatpickr-days {
            .flatpickr-day {
              &.inRange {
                @apply border-[rgba(var(--dark-card-inbox),1)] shadow-[-5px_0_0_rgba(var(--dark-card-inbox),1),5px_0_0_rgba(var(--dark-card-inbox),1)] bg-[rgba(var(--dark-card-inbox),1)];
              }
            }
          }
        }
        .flatpickr-weekday {
          @apply text-[rgba(var(--dark-all-font-color),0.7)];
        }
        .flatpickr-day {
          @apply text-[rgba(var(--dark-all-font-color),1)];
          &.prevMonthDay {
            @apply text-[rgba(var(--light-all-font-color),1)];
          }
          &.nextMonthDay {
            @apply text-[rgba(var(--light-all-font-color),1)];
          }
          &:hover {
            @apply bg-[rgba(var(--dark-card-inbox),1)];
          }
        }
        .flatpickr-time {
          @apply border-t-[rgba(var(--dark-card-border),1)];
          input {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          .flatpickr-am-pm {
            @apply text-[rgba(var(--light-all-font-color),1)] hover:text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .flatpickr-time {
        @apply border border-[rgba(var(--dark-card-inbox),1)] border-solid;
        input {
          @apply bg-[rgba(var(--dark-datatable-sorting-even),1)];
        }
      }
      .main-inline-calender {
        &.input-group {
          .flatpickr-rContainer {
            .flatpickr-days {
              .dayContainer {
                .flatpickr-day {
                  &:hover {
                    @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
            }
          }
        }
      }
      .tagify__dropdown__item--active {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .tagify__input {
        @apply text-[rgba(var(--dark-small-font-color),1)] before:text-[rgba(var(--dark-small-font-color),1)] focus:empty:before:text-[rgba(var(--light-all-font-color),1)];
        &::before {
          content: attr(data-placeholder);
        }
      }
      .tagify {
        @apply border-[rgba(var(--dark-card-border),1)];
        --tags-focus-border-color: #374558;
        .tagify__tag__removeBtn {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .tagify__tag {
        --tag-bg: var(--light-bg);
        --tag-hover: var(--light-bg);
        background: rgba(var(--dark-body-background), 1);
        > div {
          @apply !text-[rgba(var(--dark-all-font-color),1)];
        }
        &:hover {
          --tag-hover: var(--light-bg);
        }
      }
      .international-num {
        input {
          @apply border-[rgba(var(--dark-card-border),1)] bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
          &::placeholder {
            @apply !text-[rgba(var(--white),0.4)];
          }
        }
        .results {
          ul {
            @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
          }
        }
        .iti--allow-dropdown,
        input {
          &:focus {
            @apply outline-[unset];
          }
        }
      }
      .selected-box {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .iti__country-list {
        @apply bg-[rgba(var(--dark-card-background),1)];
      }
      .select-box {
        .selection-option {
          &:hover {
            @apply bg-[rgba(var(--dark-datatable-sorting-even),1)];
          }
        }
        .options-container {
          &.active {
            ~ .search-box input {
              @apply bg-[rgba(var(--dark-card-background),1)];
            }
          }
        }
      }
      .list-product-view {
        .list-product {
          .recent-table {
            table {
              thead,
              tbody {
                tr {
                  th,
                  td {
                    .product-action {
                      .square-white {
                        @apply shadow-[unset] bg-[rgba(var(--dark-body-background),1)];
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .product-filter {
        .checkbox-animated {
          .form-check {
            .form-check-label {
              .number {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
          }
        }
      }
      .feature-products {
        .filter-toggle {
          @apply bg-[rgba(var(--dark-card-background),1)];
        }
      }
      .product-wrapper {
        .product-grid {
          .form-select {
            @apply bg-[rgba(var(--dark-card-background),1)] bg-blend-screen;
          }
          .product-wrapper-grid {
            .product-box {
              &:hover {
                ul {
                  li {
                    @apply bg-[rgba(var(--transparent-color),1)];
                  }
                }
              }
            }
            .modal {
              .modal-header {
                .product-box {
                  .product-details {
                    .product-size {
                      ul {
                        li {
                          @apply bg-[rgba(var(--theme-default),0.1)];
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .common-order-history {
        .order-history-wrapper {
          .recent-table {
            table {
              tbody {
                .square-white {
                  @apply shadow-[unset] bg-[rgba(var(--dark-body-background),1)];
                  svg {
                    @apply fill-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
            }
          }
        }
      }
      .track-order-details {
        #order-status-timeline {
          .main-status-line {
            ul {
              li {
                .order-process {
                  @apply text-[rgba(var(--dark-all-font-color),0.4)] border-[rgba(var(--dark-card-border),1)];
                  &.active {
                    @apply text-[rgba(var(--dark-all-font-color),0.8)];
                  }
                }
                h6 {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
      }
      .tracking-total {
        li {
          h6,
          span {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          &:last-child {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .order-details-product {
        table {
          tbody {
            ul {
              li {
                &:last-child {
                  p,
                  span {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
              }
            }
          }
        }
      }
      .customer-details {
        h6 {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        span {
          @apply text-[rgba(var(--dark-all-font-color),0.4)];
        }
      }
      .pricingtable {
        box-shadow: 0 0 40px rgba(var(--dark-body-background), 1) !important;
      }
      .pricing-simple {
        .pricing-content {
          li {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .checkout {
        .checkout-cart {
          form {
            .form-control {
              &::placeholder {
                @apply text-[rgba(var(--white),0.4)];
              }
            }
          }
        }
      }
      .shipping-form {
        .checkout-cart {
          .basic-wizard {
            .shipping-wizard {
              .shipping-address {
                span {
                  strong {
                    @apply text-[rgba(var(--dark-all-font-color),1)];
                  }
                }
              }
              .form-select {
                @apply border-[unset];
              }
            }
          }
        }
      }
      .summery-contain {
        @apply border-b-[rgba(var(--dark-card-border),1)];
        li {
          @apply border-b-[rgba(var(--light-all-font-color),1)];
          h6 {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
        }
      }
      .summary-total {
        li {
          h6 {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
          &:last-child {
            @apply border-t-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .wishlist-box {
        .wishlist-footer {
          .brand-name {
            @apply text-[rgba(var(--dark-all-font-color),0.4)];
          }
          .price {
            del {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
        }
        .wishlist-image {
          .wishlist-close-btn {
            .btn {
              @apply !shadow-[0_3px_3px_rgba(var(--light-all-font-color),0.1)];
            }
          }
        }
      }
      .candidate-wrapper {
        .candidates-box {
          .candidate-desc {
            li {
              p {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
              span {
                @apply text-[rgba(var(--dark-small-font-color),1)];
              }
            }
          }
          .common-f-start {
            .attachment {
              @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
          .educations {
            p {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
          }
          .candidate-skill {
            p {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
            }
            span:not(.badge) {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      [class*="button-light-"] {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      [class*="dark-"] .for-dark {
        @apply inline-block;
      }
      .button--winona {
        &:hover {
          @apply bg-[rgba(var(--light-primary),0.08)];
        }
      }
      .cart-buttons {
        li {
          .btn {
            &.btn-hover-effect {
              @apply bg-[rgba(var(--dark-card-inbox),1)] text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .shopping-cart-table {
        .recent-table {
          div {
            &.dt-container {
              .table {
                thead,
                tbody {
                  tr,
                  td {
                    .product-names {
                      p,
                      span {
                        @apply text-[rgba(var(--dark-all-font-color),0.4)];
                      }
                    }
                    .product-action {
                      .square-white {
                        @apply shadow-[unset] bg-[rgba(var(--dark-body-background),1)];
                        &:first-child {
                          svg {
                            @apply opacity-30;
                          }
                        }
                      }
                    }
                  }
                }
                thead {
                  tr {
                    th {
                      &:last-child {
                        span {
                          svg {
                            @apply fill-[rgba(var(--dark-small-font-color),1)];
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .table-hover {
        > tbody {
          > tr {
            &:hover {
              --bs-table-accent-bg: #1d1e26;
            }
          }
        }
      }
      .main-qr-code {
        .modal-toggle-wrapper {
          .modal-img {
            .qr-content {
              .alert {
                @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-inbox),1)];
                i {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
                div {
                  @apply text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
          form {
            .form-control {
              @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-inbox),1)];
            }
          }
        }
      }
      .authentication-options {
        .radio-wrapper {
          li {
            .form-check-label {
              span {
                > span {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
          }
        }
      }
      .typeahead-wrapper {
        .theme-form {
          .form-control {
            @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .email-main-wrapper {
        .email-right-aside {
          .freeze-ui {
            @apply bg-[rgba(var(--dark-body-background),0.8)];
          }
        }
        .email-app-sidebar {
          .nav-pills {
            .nav-item {
              ul {
                li {
                  a {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
              }
            }
            .nav-link {
              @apply text-[rgba(var(--dark-all-font-color),0.4)];
              &.active,
              &:active {
                svg {
                  @apply stroke-[rgba(var(--dark-all-font-color),1)];
                }
              }
              svg {
                @apply stroke-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
          }
        }
      }
      .compose-modal {
        form {
          .form-control {
            @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--dark-small-font-color),1)];
          }
        }
      }
      .toolbar-box {
        @apply border-[rgba(var(--dark-card-border),1)];
        .ql-snow {
          .ql-stroke {
            @apply stroke-[rgba(var(--dark-small-font-color),1)];
          }
          .ql-tooltip {
            @apply bg-[rgba(var(--dark-body-background),1)] shadow-[unset] border-0;
            &.ql-editing {
              input[type="text"] {
                @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-small-font-color),1)] border-0;
              }
            }
          }
          a {
            @apply text-[rgba(var(--light-all-font-color),1)];
          }
        }
        .ql-editor {
          &.ql-blank {
            &::before {
              @apply text-[rgba(var(--light-all-font-color),1)];
            }
          }
        }
      }
      .email-body {
        .mail-body-wrapper {
          ul {
            li {
              .inbox-message {
                .email-data {
                  span {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
                .email-options {
                  i {
                    @apply text-[rgba(var(--dark-all-font-color),0.4)];
                  }
                }
              }
            }
          }
          .important-mail {
            @apply stroke-[rgba(var(--dark-all-font-color),0.4)];
          }
          .user-mail-wrapper {
            .user-title {
              .inbox-options {
                svg {
                  @apply stroke-[rgba(var(--dark-all-font-color),0.4)];
                }
              }
              .inbox-security {
                p {
                  @apply text-[rgba(var(--dark-all-font-color),0.4)];
                }
              }
            }
          }
          .mail-body {
            .mail-search {
              .form-control {
                @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] border-0;
                &::placeholder {
                  @apply text-[rgba(var(--light-all-font-color),1)];
                }
              }
              i {
                @apply text-[rgba(var(--light-all-font-color),1)];
              }
            }
            .dropdown-menu {
              .dropdown-item {
                @apply opacity-100 text-[rgba(var(--dark-all-font-color),1)] border-0 hover:bg-[rgba(var(--dark-card-background),1)] bg-[rgba(var(--dark-body-background),1)];
              }
            }
          }
          .mail-body1 {
            svg {
              @apply stroke-[rgba(var(--dark-all-font-color),0.6)];
            }
          }
        }
        .mail-header-wrapper {
          .mail-body {
            .dropdown-menu {
              .dropdown-item {
                background: rgba(var(--light2), 1);
                @apply border-[0] text-[rgba(var(--white),0.6)];
                &:hover {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }
              }
            }
          }
        }
      }
      .inbox-options {
        .light-square {
          &.btn-group {
            .dropdown-menu {
              @apply bg-[rgba(var(--dark-editor-document),1)];
              .dropdown-item {
                &:hover {
                  @apply bg-[rgba(var(--light-all-font-color),1)] text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
          }
        }
      }
      .mail-filters {
        svg {
          @apply stroke-[rgba(var(--dark-all-font-color),0.4)];
        }
      }
      .inbox-security {
        @apply bg-[rgba(var(--dark-body-background),1)];
      }
      .flatpicker-calender {
        @apply shadow-[unset];
        &.product-date {
          .form-control {
            &.flatpickr-input {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .price-wrapper {
        .radio-wrapper {
          li {
            .form-check-input {
              @apply border border-[rgba(var(--dark-card-border),1)] border-solid;
              ~ .form-check-label {
                span {
                  @apply text-[rgba(var(--dark-small-font-color),1)];
                }
              }
            }
          }
        }
      }
      .product-buttons {
        .btn {
          &:hover,
          &:active {
            @apply text-[rgba(var(--dark-all-font-color),0.8)];
          }
          svg {
            @apply stroke-[rgba(var(--dark-all-font-color),0.8)];
          }
        }
      }
      .ql-formats {
        .ql-picker-label {
          &::before {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
      }
      .e-category {
        .form-label {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
        .form-control {
          &::placeholder {
            @apply text-[rgba(var(--light-all-font-color),1)];
          }
        }
        .main-divider {
          .divider-body {
            h6 {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
            &::before {
              @apply border-[rgba(var(--dark-card-border),1)];
            }
          }
        }
      }
      .sidebar-left-wrapper {
        .sidebar-left-icons {
          .nav-item {
            .nav-link {
              .nav-rounded {
                @apply shadow-[inset_0px_9px_20px_0px_rgba(var(--dark-all-font-color),0.1)];
              }
              .product-icons {
                svg {
                  @apply stroke-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
            &::before {
              @apply border-[rgba(var(--dark-all-font-color),0.15)];
            }
          }
        }
      }
      .common-form {
        .product-buttons {
          .btn {
            @apply border-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .list-product {
        &.list-category {
          .square-white {
            svg {
              @apply fill-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
        .datatable-pagination {
          .datatable-active {
            .datatable-pagination-list-item-link {
              @apply bg-[rgba(var(--theme-default),1)] text-[rgba(var(--white),1)];
            }
          }
          .datatable-pagination-list-item-link {
            @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-small-font-color),1)];
          }
        }
        .datatable-input {
          &:focus {
            outline: unset;
          }
        }
        .datatable-selector {
          @apply text-[rgba(var(--dark-all-font-color),1)] bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .table {
        --bs-table-bg: trasparnt;
        caption {
          @apply text-[rgba(var(--dark-all-font-color),0.4)];
        }
        &.table-inverse {
          @apply bg-[rgba(var(--bg-dark-color),1)];
        }
      }
      .grid-footer {
        table {
          tbody {
            tr {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .tree-view {
        .light-background {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
        .list-light-primary {
          @apply bg-[rgba(var(--theme-default),0.2)];
        }
        .nested-1 {
          @apply bg-[rgba(var(--theme-default),0.03)];
        }
        .nested-2 {
          @apply bg-[rgba(var(--theme-default),0.05)];
        }
        .nested-3 {
          @apply bg-[rgba(var(--theme-default),0.07)];
        }
        .nested-4 {
          @apply bg-[rgba(var(--theme-default),0.09)];
        }
      }
      .contact-edit {
        svg {
          @apply stroke-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .left-sidebar-wrapper {
        .left-sidebar-chat {
          .input-group {
            .input-group-text {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
            .form-control {
              @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)];
              border: unset;
              &::placeholder {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
        .advance-options {
          .chats-user {
            span {
              @apply text-[rgba(var(--dark-all-font-color),1)];
            }
          }
        }
      }
      .search-contacts {
        .form-control {
          @apply bg-[rgba(var(--dark-body-background),1)] border-[rgba(var(--dark-card-border),1)] text-[rgba(var(--light-all-font-color),1)];
          &::placeholder {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
        }
      }
      .right-sidebar-title {
        span {
          @apply text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .msger-inputarea {
        .chat-icon {
          div {
            @apply bg-[rgba(var(--dark-body-background),1)] opacity-100;
          }
        }
      }
      .right-sidebar-Chats {
        .msger-inputarea {
          background: rgba(var(--dark-card-background), 1);
          .msger-input {
            @apply !bg-[rgba(var(--dark-body-background),1)];
          }
        }
      }
      .left-msg {
        .msg-bubble {
          @apply bg-[rgba(var(--dark-body-background),1)];
        }
      }
      .fg-emoji-picker-search {
        input,
        .fg-emoji-picker-search-icon {
          @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
        }
      }
      .fg-emoji-picker-category-title {
        @apply bg-[rgba(var(--dark-body-background),1)] border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
      }
      .fg-emoji-container {
        .fg-emoji-nav {
          @apply bg-[rgba(var(--dark-body-background),1)];
          ul {
            @apply border-b-[rgba(var(--dark-card-border),1)];
          }
          li {
            &.emoji-picker-nav-active,
            &:hover {
              a {
                @apply bg-[rgba(var(--dark-card-inbox),1)];
                svg {
                  @apply fill-[rgba(var(--white),1)];
                }
              }
            }
          }
        }
        .fg-emoji-list {
          @apply bg-[rgba(var(--dark-body-background),1)];
          li {
            a {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .main-companies {
        .filter-companies {
          .accordion-item {
            @apply bg-[unset];
            .product-filter {
              label {
                @apply text-[rgba(var(--dark-all-font-color),0.4)];
              }
            }
            .accordion-header {
              .accordion-button {
                &.collapsed {
                  @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--dark-all-font-color),1)] transition-all duration-[0.4s] ease-[ease];
                }
              }
            }
          }
          .accordion-body {
            @apply bg-[rgba(var(--dark-card-background),1)];
          }
        }
      }
      .company-box {
        .company-name {
          .company-desc {
            @apply border-t-[rgba(var(--dark-card-border),1)];
          }
        }
      }
      .dt-container {
        .dt-layout-row {
          .dt-input {
            @apply !bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--white),1)];
          }
        }
      }
      .add-post {
        form {
          label,
          .col-form-label {
            @apply text-[rgba(var(--dark-small-font-color),1)];
          }
          .form-control {
            @apply bg-[rgba(var(--dark-body-background),1)] text-[rgba(var(--light-all-font-color),1)] border-[unset];
            &::placeholder {
              @apply text-[rgba(var(--light-all-font-color),1)];
            }
          }
        }
      }
      .ql-container {
        &.ql-snow {
          .ql-editor {
            @apply text-[rgba(var(--light-all-font-color),1)];
          }
        }
      }
      .box-layout {
        .page-wrapper {
          .page-header {
            @apply bg-[rgba(var(--transparent-color),1)];
            .header-wrapper {
              @apply border border-[rgba(var(--dark-card-background),1)] border-solid;
            }
          }
          .page-body-wrapper {
            @apply bg-[rgba(var(--transparent-color),1)] shadow-[4px_11px_25px_rgba(var(--dark-card-inbox),1)];
          }
          &.modern-type {
            .page-body-wrapper {
              @apply bg-[rgba(var(--dark-body-background),1)];
            }
          }
        }
      }
      .dropdown-menu {
        .dropdown-item {
          @apply bg-[rgba(50,54,62,1)];
        }
      }
      .dashboard-2,
      .dashboard-3,
      .dashboard-11 {
        .seller-table,
        .t-top-mentor,
        .completed-course-table,
        .leave-request-table {
          div {
            &.dt-container {
              .dt-layout-row {
                thead {
                  background: rgba(var(--light2), 1);
                }
              }
            }
          }
        }
        .dashboard-3 {
          .seller-table,
          .t-top-mentor,
          .completed-course-table {
            div {
              &.dt-container {
                .dt-layout-row {
                  thead {
                    background: rgba(var(--light2), 1);
                  }
                }
              }
            }
          }
          .overall-card {
            .order-container {
              .apexcharts-canvas {
                .apexcharts-marker {
                  stroke: #262932;
                }
              }
            }
          }
        }
        .dashboard-3,
        .dashboard-11 {
          .learning-wrap,
          .sales-report {
            .apexcharts-series-markers-wrap {
              .apexcharts-marker {
                @apply stroke-[#262932];
              }
            }
          }
        }
        .dashboard-3 {
          .learning-wrap {
            .apexcharts-marker {
              @apply stroke-[#2C2B40];
            }
          }
        }
        .dashboard-5,
        .dashboard-7,
        .dashboard-10,
        .dashboard-2 {
          .subscriber-chart-container,
          .school-performance-wrap,
          .main-income-chart,
          .analytics-tread-card,
          .learning-wrap {
            .apexcharts-marker {
              .dashboard-7 {
                .subscriber-chart-container,
                .school-performance-wrap {
                  .apexcharts-marker {
                    @apply stroke-[#262932];
                  }
                }
              }
              .dashboard-11 {
                .schedule-calender {
                  .schedule-wrapper {
                    border-bottom: 1px solid rgba(var(--dark-card-border), 1);
                  }
                }
              }
            }
          }
        }
      }
      @keyframes pulse-animate-dark {
        0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.4);
        }

        100% {
          box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
        }
      }
      .text-muted {
        @apply text-[rgba(var(--dark-all-font-color),1)];
      }
      .alert-primary {
        &.inverse {
          background-color: transparent !important;
        }
      }
      .for-dark {
        @apply !inline-block;
      }

      .for-light {
        @apply hidden;
      }
      &.box-layout {
        .page-wrapper {
          .page-header {
            .header-wrapper {
              @apply border border-solid border-[rgba(var(--off-white),1)];
            }
          }
        }
      }
      @screen lg{
        .product-wrapper{
          .product-grid{
            .product-wrapper-grid{
              .modal{
                .modal-header{
                  .btn-close{
                    filter: unset;
                  }
                }
              }
            }
          }
        }
      }
      .starter-main {
        .alert {
          @apply !bg-[rgba(68,102,242,0.2)];
        }
      }
    }
    &.dark-sidebar {
      .toggle-sidebar {
        svg {
          @apply stroke-[rgba(var(--theme-default),1)];
        }
      }
      .page-wrapper {
        .sidebar-main-title {
          p {
            @apply text-[rgba(var(--dark-all-font-color),1)];
          }
        }
        &.compact-wrapper {
          .page-body-wrapper {
            div {
              &.sidebar-wrapper {
                @apply bg-[rgba(var(--dark-card-background),1)];
                .sidebar-main {
                  .sidebar-links {
                    li {
                      a {
                        span {
                          @apply text-[rgba(var(--dark-all-font-color),1)];
                        }
                        svg {
                          @apply stroke-[rgba(var(--dark-all-font-color),1)];
                        }
                      }
                    }
                    .simplebar-wrapper {
                      .simplebar-mask {
                        .simplebar-content-wrapper {
                          .simplebar-content {
                            > li {
                              .sidebar-links {
                                &.active {
                                  @apply bg-[rgba(var(--theme-default),0.2)];
                                  svg {
                                    @apply text-[rgba(var(--theme-default),1)] stroke-[rgba(var(--theme-default),1)];
                                  }
                                }
                                .sidebar-list {
                                  ul {
                                    &.sidebar-submenu {
                                      li {
                                        a {
                                          span {
                                            @apply text-[rgba(var(--dark-all-font-color),1)];
                                          }
                                        }
                                        &.active {
                                          @apply text-[rgba(var(--theme-default),1)];
                                        }
                                      }
                                    }
                                  }
                                }
                              }
                              .sidebar-submenu {
                                li {
                                  a {
                                    @apply text-[rgba(var(--dark-all-font-color),1)];
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .according-menu {
              i {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
        &.horizontal-wrapper {
          .page-body-wrapper {
            .sidebar-wrapper {
              @apply bg-[rgba(var(--dark-card-background),1)];
              .sidebar-main {
                @apply bg-[rgba(var(--dark-card-background),1)];
                .sidebar-links {
                  .simplebar-wrapper {
                    .simplebar-mask {
                      .simplebar-content-wrapper {
                        .simplebar-content {
                          > li {
                            > a {
                              @apply text-[rgba(var(--dark-all-font-color),1)];
                            }
                            .sidebar-submenu {
                              @apply bg-[rgba(var(--dark-card-background),1)];
                              li {
                                a {
                                  @apply text-[rgba(var(--dark-all-font-color),1)];
                                  &.active,
                                  &:hover {
                                    @apply text-[rgba(var(--theme-default),1)];
                                  }
                                }
                                .sidebar-submenu {
                                  @apply bg-[rgba(var(--dark-card-background),1)];
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
                .left-arrow,
                .right-arrow {
                  @apply bg-[rgba(var(--dark-card-background),1)] text-[rgba(var(--dark-all-font-color),1)];
                }
              }
            }
          }
        }
        &.compact-sidebar {
          .page-body-wrapper {
            div {
              &.sidebar-wrapper {
                > div {
                  @apply bg-[rgba(var(--dark-card-background),1)];
                }
                .sidebar-main {
                  .sidebar-links {
                    li {
                      .sidebar-title {
                        @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
                      }
                      a {
                        span {
                          @apply text-[rgba(var(--dark-all-font-color),1)];
                        }
                        svg {
                          @apply stroke-[rgba(var(--dark-all-font-color),1)];
                        }
                      }
                      .sidebar-submenu {
                        @apply bg-[rgba(var(--dark-card-background),1)];
                        li {
                          a {
                            @apply border-b-[rgba(var(--dark-card-border),1)] border-b border-solid;
                          }
                        }
                      }
                    }
                    .simplebar-wrapper {
                      .simplebar-mask {
                        .simplebar-content-wrapper {
                          .simplebar-content {
                            > li {
                              .sidebar-link {
                                &.active {
                                  @apply bg-[rgba(var(--theme-default),0.2)];
                                  span {
                                    @apply text-[rgba(var(--theme-default),1)];
                                  }
                                  svg {
                                    @apply text-[rgba(var(--theme-default),1)] stroke-[rgba(var(--theme-default),1)];
                                  }
                                }
                              }
                              .sidebar-submenu {
                                li {
                                  a {
                                    @apply text-[rgba(var(--dark-all-font-color),1)];
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                    .sidebar-list {
                      ul {
                        &.sidebar-submenu {
                          li {
                            a {
                              span {
                                @apply text-[rgba(var(--dark-all-font-color),1)];
                              }
                              &.active {
                                @apply text-[rgba(var(--theme-default),1)];
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .according-menu {
              i {
                @apply text-[rgba(var(--dark-all-font-color),1)];
              }
            }
          }
        }
      }

      .for-light {
        @apply !inline-block;
      }
      .for-dark {
        @apply !hidden;
      }
    }
    &[class*="dark-"] {
      .for-dark {
        @apply inline-block;
      }

      .for-light {
        @apply hidden;
      }
    }
  }
}