/* Dark theme styles */
:root{
  --primary-dark : #141415;
  --secondary-dark : #1D1D1E ;
  --secondary-dark1 : #1e1e1e ;
  --primary-text-color : #EEEEEE;
  --Secondary-text-color : #141415;
  --border: 1px solid #343435;
  --border1: 1px solid #484b4e;
  --card-shadow:box-shadow: 
  0px 3px 8px rgba(0, 0, 0, 0.12),
  0px 3px 1px rgba(0, 0, 0, 0.04);
  --header-shadow: 0 0 10px rgba(255, 255, 255, 0);
}

  .dark-mode {
      background-color: var(--primary-dark) !important;
      color: var(--primary-text-color) !important;
  }
  .dark-mode .main-menu ul li a {
      color: var(--primary-text-color) !important;
  }

  .dark-mode .user-info p {
    opacity: 0.7;
    color: var(--primary-text-color) !important;

  }

  .dark-mode .filter-sidebar{
    background: var(--secondary-dark1);
    border: var(--border);
  }



  .dark-mode .header_background {
    background: #333;
    border-radius: 12px;
    font-size: 18px;
    color: rgb(255, 255, 255);
    font-weight: 500;
  }

  .dark-mode .header_rgb_color {
    background: #333;
    border-radius: 12px;
    color: rgb(255, 255, 255);
    flex-wrap: wrap;
    box-shadow: 0 4px 8px rgba(252, 251, 251, 0.1);
  }

  .dark-mode .header-container {
      background-color: var(--secondary-dark1) !important;
    border: var(--border) !important;
    box-shadow: inset -2px -2px 4px 0 rgba(0, 0, 0, 0.12), inset 1px 1px 8px 0 rgba(255, 255, 255, 0.08) !important;

  }
  .dark-mode .header-container1 {
      background-color: var(--secondary-dark1) !important;
    border: var(--border) !important;
    box-shadow: inset -2px -2px 4px 0 rgba(0, 0, 0, 0.12), inset 1px 1px 8px 0 rgba(255, 255, 255, 0.08) !important;

  }
  .dark-mode .dark-back {
      background-color: var(--secondary-dark1) !important;
      color: var(--primary-text-color) !important;
      border: var(--border);
  }

  .dark-mode .p-card {
    border: 1.2px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(180deg, rgb(57, 57, 57) 0%, rgb(33, 33, 33) 100%) !important;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(255, 255, 255, 0.04), inset 4px 4px 8px rgba(0, 0, 0, 0.25), inset -2px -2px 8px rgba(246, 246, 246, 0.12);
  }

  .p-tabview .p-tabview-nav .p-highlight .p-tabview-nav-link {
    color: #20add0 !important;
}
.dark-mode .p-tabview .p-tabview-nav-content {
  border-bottom: 1px solid #333;
}
  .p-tabview .p-tabview-nav .p-highlight {
    background-color: transparent !important;
    border: none;
    border-bottom: 1px solid #20add0 !important;
    border-radius: 0px !important;
  }
  .dark-mode .pi {
      color: var(--primary-text-color) !important;
  }
  .dark-mode .p-menuitem-icon {
      color: #fff !important;
  }

  .dark-mode a {
      color: var(--primary-text-color) !important;
  }

  .dark-mode .app-header,
  .dark-mode .sub-header {
      background-color: var(--secondary-dark) !important;
      color: var(--primary-text-color) !important;
      box-shadow: var(--header-shadow);
      border: var(--border);
  }

  .dark-mode .header-icons .ui-button-rounded {
      background-color: var(--secondary-dark) !important;
      color: var(--primary-text-color) !important;
      border: var(--border) !important;
  }

  .dark-mode .user-email,
  .dark-mode .user-organization {
      color: var(--primary-text-color) !important;
  }


  .dark-mode .p-datatable .p-datatable-tbody > tr{
    background-color: var(--secondary-dark) !important;
      color: var(--primary-text-color) !important;
      border-bottom: 1px solid #4a454594 !important;
      border-bottom: 1px solid transparent !important;
  }


  .dark-mode .p-datatable .p-datatable-tbody > tr:nth-child(odd) {
    background-color: #282730 !important;
    box-shadow: 0px 1px 5px 0px #F3EFEF1A inset;
  }
  .dark-mode .p-datatable-table .p-datatable-tbody > tr:hover {
    background-color: #505051 !important;
    color: var(--primary-text-color) !important;
}


  .dark-mode .product-table {
    background-color: var(--secondary-dark1) !important;
    border: var(--border) !important;
    box-shadow: 
    inset -2px -2px 4px 0 rgba(0, 0, 0, 0.12),
    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.08) !important;
  }

  .dark-mode .Sync-clss{

  color: var(--primary-text-color) !important;
  }


  .dark-mode .p-paginator{
    background-color: var(--secondary-dark1) !important;
    color: var(--primary-text-color) !important;

  }
  .dark-mode .p-datatable .p-datatable-thead > tr > th {
    color: var(--primary-text-color);
    background: var(--secondary-dark) !important;
  }

  .dark-mode .p-toolbar{
    background-color: #00000000 !important;
    color: var(--primary-text-color) !important;
  }

  .dark-mode .personal-info{
    color: var(--primary-text-color) !important;
    background: linear-gradient(180deg, #242424 100%, #1C1C1C 100%) !important;
    border: 1px solid #444444 !important;
    box-shadow: inset -4px -4px 8px 0 rgba(0, 0, 0, 0.12), inset 2px 2px 10px 0 rgba(255, 255, 255, 0.12) !important;
  }

  .dark-mode .personal-info .form-control{
    background-color: var(--secondary-dark) !important;
    border: var(--border) !important;
  }

  .dark-mode label{
    color: var(--primary-text-color) !important;
  }

  .dark-mode .form-control{
    background-color: var(--primary-dark) !important;
    color: var(--primary-text-color) !important;
    border: var(--border) !important;
  }
  .dark-mode textarea{
    background-color: var(--primary-dark) !important;
    color: var(--primary-text-color) !important;
    border: var(--border) !important;
  }
  .dark-mode .p-dropdown {
    background-color: var(--primary-dark) !important;
    color: var(--primary-text-color) !important;
    border: 1px solid #1F2228 !important;
  }

  .dark-mode .p-inputtext{
    color: var(--primary-text-color) !important;
    
  }
  .dark-mode .p-dropdown-filter-container .p-inputtext{
    background-color: #cfcfcf !important;
    color: var(--primary-dark) !important;
  }
  .dark-mode .p-calendar .p-inputtext{
    background-color: var(--primary-dark) !important;
    color: var(--primary-text-color) !important;
    border: var(--border) !important;
    
  }

  .dark-mode .p-dropdown-panel {
    background: #333;
  }
 
  .dark-mode .p-dropdown-panel .p-dropdown-header{
    background: #333;
    color: var(--primary-text-color) !important;

  }

  .dark-mode .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
    color: var(--primary-text-color) !important;
    background: #494b4c !important;
}



/* popup */

.dark-mode .p-dialog {
  border: none !important;
  background-color: var(--primary-dark) !important;
  box-shadow: 0px 11px 15px -7px rgb(251 249 249 / 6%), 0px 24px 38px 3px rgb(255 255 255 / 12%), 0px 9px 46px 8px rgb(255 255 255 / 7%);
}

  .dark-mode .p-dialog .p-dialog-header{
    color: var(--primary-text-color) !important;
  }

  .dark-mode .p-dialog .p-dialog-content{
    color: var(--primary-text-color) !important;
  }

  .dark-mode .p-dialog .p-dialog-header .p-dialog-header-icon{
    color: var(--primary-text-color) !important;
  }

  .dark-mode .input-group-append button {
    border: none;
    background: var(--secondary-dark) !important;
}

.dark-mode .btn-option{
    background: var(--secondary-dark) !important;
    border: var(--border) !important;
}

.dark-mode .day-btn{
    background: var(--secondary-dark) !important;
    color: var(--primary-text-color) !important;
    border: var(--border) !important;
}


.dark-mode .day-btn.active {
  background-color: #136FB6 !important;
  color: var(--primary-text-color) !important;
  border-color: #136FB6 !important;
  box-shadow: inset 0px 2px 4px 0px rgba(237, 239, 255, 0.57), 0px 4px 5px 0px rgba(0, 0, 0, 0.4) !important;
}
.dark-mode .time-ipt {
  border: var(--border) !important;

}



.dark-mode .card-design{
  background-color: var(--primary-dark) !important;
  color: var(--primary-text-color) !important;
  border: var(--border) !important;
}

.dark-mode .card-design .form-control{
  background-color: var(--primary-dark) !important;

}

.dark-mode .p-menu.p-menu-overlay {
  /* background: #0a0a0a; */
  background: #414141;
}


.dark-mode .email-change-form{
  background-color: #333 !important;
      color: var(--primary-text-color) !important;
}


.set-colr{
  color: #333 !important;
}



.dark-mode ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px transparent;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.dark-mode ::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background:transparent;
  -webkit-box-shadow: inset 0 0 6px transparent
}

.dark-mode ::-webkit-scrollbar-thumb:window-inactive {
  background: transparent
}


.dark-mode .fa-regular,.dark-mode .fa-solid{
  color: var(--primary-text-color) !important;
}

.dark-mode .clear-link{
  color: var(--primary-text-color) !important;

}

.dark-mode .search-container input {
    border: 1px solid #37363e;
    background-color: #37363e !important;
}

.dark-mode .card-search .p-inputtext{
  border: 1px solid #4d4d4d;
  background-color: #333 !important;
}


.dark-mode .section li:hover {
  background-color: #6f6a6a !important;
}
.dark-mode .icon-container{
background-color: var(--secondary-dark) !important;
border: var(--border) !important;
}

.dark-mode ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{
    background: black;
    border-color: #00335559;
    color: var(--primary-text-color);
}


.dark-mode .user-type-label {
  color: rgba(255, 255, 255, 0.5) !important;
  background-color: var(--primary-dark) !important;
  border: 1px solid #1F2228 !important;
}



.dark-mode .product-card{
  background: linear-gradient(180deg, #242424 100%, #1C1C1C 100%) !important;
  border: 1px solid #444444 !important;
  box-shadow: inset -4px -4px 8px 0 rgba(0, 0, 0, 0.12), inset 2px 2px 10px 0 rgba(255, 255, 255, 0.12) !important;
  
}

.dark-mode .product-card .product-info p ,
.dark-mode .product-card .product-info h2 {
  color: var(--primary-text-color) !important;
}
.dark-mode .product-price p ,
.dark-mode .product-price h2 {
  color: var(--primary-text-color) !important;
}
.dark-mode .payment-details .detail-item p {
  color: var(--primary-text-color) !important;
}

.dark-mode .quantity-container input {
  border: var(--border) !important;
  background-color: var(--secondary-dark1) !important;
  color: var(--primary-text-color) !important;
}

.dark-mode .card-righthand{
  border: var(--border) !important;
  background-color: var(--secondary-dark1) !important;
}


.dark-mode .label-summary-size {
  color: var(--primary-text-color) !important;
}

.dark-mode .text-container p{
  color: #9f9f9f !important;
}
.dark-mode .order-summary-section h2 {
  color: #333 !important;
}

.dark-mode  .payment-title{
  color: var(--primary-text-color) !important;
}

.dark-mode .dark-card{
  background: linear-gradient(180deg, #242424 100%, #1C1C1C 100%) !important;
  border: 1px solid #444444 !important;
  box-shadow: inset -4px -4px 8px 0 rgba(0, 0, 0, 0.12), inset 2px 2px 10px 0 rgba(255, 255, 255, 0.12) !important;
  
}



/* user-approval */
.dark-mode .button-group{
  background-color: rgba(120, 120, 128, 0.12) !important;
}

.dark-mode .form-control1{
  border: none !important;
}


.dark-mode .uc-drak{
  background-color: var(--primary-dark) !important;
  border: var(--border) !important;
  background: none !important;
  box-shadow: none !important;
}

.dark-mode .light-apprl-dsng {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0px !important;
  border-radius: 0px !important;
  margin-top: 0px !important;
}

.dark-mode .uploaded-files{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.dark-mode .user-name{
  color: var(--primary-text-color) !important;
}

.dark-mode .p-avatar-text{
  color: #333 !important;
}

.dark-mode .organization-name{
  background-color: #7e7d7dde !important;
  color: var(--primary-text-color) !important;

}


.dark-mode .address-card{
  background-color: #7e7d7dde !important;
}

.dark-mode .address-info ,.dark-mode .address-text{
  color: var(--primary-text-color) !important;

}

.dark-mode .file-item{
  background-color: #333 !important;
  color: var(--primary-text-color) !important;
  background: none !important;
  border: none !important;

}

.dark-mode  .uploaded-files{
border: var(--border) !important;
}



/* user-group */
.dark-mode .cdlabel{
  background-color: #F0E6F3 !important;
  color: var(--primary-dark) !important;
}



/* user-permission */
.dark-mode .Permission .p-dropdown{
  background-color: var(--secondary-dark) !important;
  border: var(--border1) !important;
}
.dark-mode .Permission .form-control{
  background-color: var(--secondary-dark) !important;
  border: var(--border1) !important;
}

.dark-mode .Permission{
  background: #141414 !important;
  border: 1px solid #363636 !important;
  box-shadow: 0px 0px 19.1px 0px #FFFFFF1F !important;
}


/* popup */
.dark-mode .custom-popup {
  background: linear-gradient(180deg, rgb(76 76 76) 0%, rgb(16 16 16) 100%) !important;
  color: hsl(0deg 0% 100%) !important;
  border: 1px solid #444444;
  box-shadow: 0px 0px 40px 0px #FFFFFF29;
}
.dark-mode .custom-popup1 {
  background: linear-gradient(180deg, rgb(76 76 76) 0%, rgb(16 16 16) 100%) !important;
  color: hsl(0deg 0% 100%) !important;
  border: 1px solid #444444;
  box-shadow: 0px 0px 40px 0px #FFFFFF29;
}

.dark-mode .custom-text {
  color: #B4B4B4 !important;

}
.dark-mode .custom-title-success{
  color: #FFFFFF !important;
  }
  
  .dark-mode .custom-title-alert{
    color: #FFFFFF !important;
  }
  
  .dark-mode .custom-title-error{
    color: #FFFFFF !important;
  }
  
  .dark-mode .custom-title-conform{
    color: #FFFFFF !important;
  }

.dark-mode div:where(.swal2-container).swal2-backdrop-show, 
.dark-mode div:where(.swal2-container).swal2-noanimation {
    background: rgb(0 0 0 / 54%) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dark-mode :where(.swal2-container) button:where(.swal2-close) { 
  background: #87878740  !important;
  color: #FFFFFF  !important;
}
/* toaster */
.dark-mode .p-toast .p-toast-message.p-toast-message-success {
  background: var(--primary-dark) !important;
  border-color: var(--border) !important;
  color: #585757 !important;
}

.dark-mode .p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
  color: #a3a3a3 !important;
}

.dark-mode .p-toast .p-toast-message .p-toast-message-content .p-toast-summary{
  color: var(--primary-text-color);
}
/* product  */
.dark-mode .checkbox-card {
  border: var(--border1) !important;
  background-color: #8b898924 !important;
}


.dark-mode .checkmark-card{
  fill: var(--primary-text-color) !important;
}
.dark-mode .card-text{
  color: var(--primary-dark) !important;
  color: var(--primary-text-color) !important;
}

.dark-mode .category-card{
  background: #1A1A1A !important;
}


.dark-mode  .selected-count{
border: var(--border) !important;
}


.dark-mode  .go-button{
  color: var(--primary-text-color) !important;
  border: var(--border1) !important;
  background-color: var(--secondary-dark) !important;

}

.dark-mode  .p-slider .p-slider-handle{
  background : var(--primary-dark) !important;
}

.dark-mode  .slider-wrapper .p-slider {
  background : #555758 !important
}

.dark-mode .bubble{
  background : var(--primary-dark) !important;
  color: #8f8f8f !important;
}

.dark-mode  .price-input{
  background-color: var(--secondary-dark1) !important;
  border: var(--border) !important;
}

.dark-mode .checkmark {

  background-color: var(--secondary-dark1) !important;
  border: var(--border1) !important;
}



.dark-mode .checkbox-container input ~ .checkmark {
  background-color: var(--secondary-dark1) !important;
}

.dark-mode  .checkbox-container input:checked ~ .checkmark {
  background-color: #2196F3; 
}

/* shopping cart  */

.dark-mode .discount{
color: var(--Secondary-text-color) !important;
}

.dark-mode .payment-card .form-control{
  background-color: var(--secondary-dark) !important;
  border: var(--border1) !important;
}

.dark-mode .payment-card-header svg path{
  fill: var(--primary-text-color) !important;
}




::ng-deep .dark-mode .p-sidebar-right {
  background-color: var(--primary-dark) !important
}


.dark-mode .card-header1 label {
  color: rgba(255, 255, 255, 1) !important;
  }










  .dark-mode .apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid #444444 !important;
    background: rgb(40 40 40 / 96%) !important;
  }

  .dark-mode .apexcharts-menu {
    background: #404040 !important;
    border: 1px solid #585353  !important;
  }

  .dark-mode .grid-action-red-btn {
    /* border: 1px solid #a3a3a3 !important; */
    color: #d9d7d7 !important;
  }

  .dark-mode .grid-action-btn {
    /* border: 1px solid #a3a3a3 !important; */
    color: #d9d7d7 !important;
  }
  .dark-mode .green-btn {
    /* border: 1px solid #a3a3a3 !important; */
    color: #d9d7d7 !important;
  }

  .dark-mode .outline-common{
    background-color: #212121 !important;
    border: 1px solid #444444 !important;
    box-shadow: 
    inset -2px -2px 4px 0 rgba(0, 0, 0, 0.12),
    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.08) !important;
}



.dark-mode .card-righthand {
  background: linear-gradient(180deg, #242424 100%, #1C1C1C 100%) !important;
    border: 1px solid #444444 !important;
    box-shadow: inset -4px -4px 8px 0 rgba(0, 0, 0, 0.12), inset 2px 2px 10px 0 rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .address-continer-bg {
  background: none !important;
  background-color: #212121 !important;
    border: 1px solid #292929 !important;
    border-radius: 6px !important;
    box-shadow: inset 1px 1px 4px 0px rgba(255, 255, 255, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .Address-continer-parent{
  background-color: #141414 !important;
    border: 1px solid #363636 !important;
}
.dark-mode .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #ffff;
}

.dark-mode .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content a:hover {
  color: black!important;
  background:transparent;
}

.dark-mode .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon {
  color: black !important;
}

.dark-mode .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
  color: black !important;
}

.dark-mode .days {
  background-color: #141415 !important;
  border:none !important

}


.dark-mode .swal2-cancel {
  color: #ffffff !important;
}


.dark-mode .p-password .p-inputtext{
  background-color: var(--primary-dark) !important;
  color: var(--primary-text-color) !important;
  border: var(--border) !important;
}
.dark-mode .p-inputotp .p-inputtext{
  background-color: var(--primary-dark) !important;
  color: var(--primary-text-color) !important;
  border: var(--border) !important;
}

.dark-mode .option-card{
  border: 1.2px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgb(57, 57, 57) 0%, rgb(33, 33, 33) 100%) !important;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(255, 255, 255, 0.04), inset 4px 4px 8px rgba(0, 0, 0, 0.25), inset -2px -2px 8px rgba(246, 246, 246, 0.12);
}

.dark-mode .register-btn{
  margin-top: 28px !important;
}


.dark-mode .email-reset-form{
  background-color: #212121 !important;
  border: 1px solid #444444 !important;
  box-shadow: 
  inset -2px -2px 4px 0 rgba(0, 0, 0, 0.12),
  inset 1px 1px 8px 0 rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .email-reset-form h3 {
  color: #e3e3e3 !important;
}

.dark-mode .vertical-divider {
  background-color: #434343 !important;

}
.dark-mode .footer-vertical {
  border-right: 1px solid #434343 !important;

}


.dark-mode .login-pg-btn{

background: #0c0c0c;
color: #fff;
padding: 0.5rem 1.5rem;
/* border: none; */
border-radius: 5px;
font-size: 0.8rem;
cursor: pointer;
transition: background 0.2s;
box-shadow: inset 0px 2px 4px 0px rgb(69 69 69 / 57%), 0px 4px 5px 0px rgba(0, 0, 0, 0.4);
font-weight: 600;
color: white;
border: 1px solid #4b4a4a !important;
letter-spacing: 0.5px;
}



.dark-mode .common-btn {
  /* box-shadow: 0px 2px 4px 0px #EDEFFF91 inset, 0px 4px 4px 0px #0000001F; */
  background: #136FB6;
  border: none;
  color: #d9d7d7 !important;

  /* box-shadow: inset 0px 2px 4px 0px rgba(237, 239, 255, 0.57), 0px 4px 5px 0px rgba(0, 0, 0, 0.4); */
}
.dark-mode .delete-btn,
.dark-mode .update-btn
 {
  color: #d9d7d7 !important;

  /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4), inset 0px 2px 4px 0px rgba(237, 239, 255, 0.57) !important; */
}


.dark-mode .success-card-btn {
  /* box-shadow: 2px 2px 8px 0px #00000080 inset,
    -1px -1px 8px 0px #FFFFFF40 inset,
    0px 0px 4px 0px #000000; */
    color: #0bb7af80;
    /* background-color: #2b4645 !important; */
    /* border-color: #2b4645 !important; */
    font-weight: 700;
}

.dark-mode .error-card-btn {
  /* box-shadow: 2px 2px 8px 0px #00000080 inset,
    -1px -1px 8px 0px #FFFFFF40 inset,
    0px 0px 4px 0px #000000; */
    /* background-color: #523338 !important; */
    /* border-color: #523338 !important; */
    color: #f64e60 !important;
}

.dark-mode .Pending-card-btn {
  /* box-shadow: 2px 2px 8px 0px #00000080 inset,
    -1px -1px 8px 0px #FFFFFF40 inset,
    0px 0px 4px 0px #000000; */
    /* background-color: #3c372e !important; */
    /* border-color: #3c372e !important; */
color: #ee9d01 !important;
}
.dark-mode .Decline-card-btn {
  /* box-shadow: 2px 2px 8px 0px #00000080 inset,
    -1px -1px 8px 0px #FFFFFF40 inset,
    0px 0px 4px 0px #000000; */
    /* background-color: #523338 !important; */
    /* border-color: #523338 !important; */
    color: #f64e60 !important;
}
.dark-mode .Counter-card-btn {
  /* box-shadow: 2px 2px 8px 0px #00000080 inset,
    -1px -1px 8px 0px #FFFFFF40 inset,
    0px 0px 4px 0px #000000; */
    /* background-color: #3b2c4b !important; */
    /* border-color: #3b2c4b !important; */
    color: #a24ef6 !important;
}
.dark-mode .gray-button {
  background: #d9d9d9 !important;
  /* box-shadow: 0px 4px 5px 0px #00000066,1px 1px 4px 0px #00000091 inset !important; */
}

.dark-mode svg .svg-icon-path{
  stroke: #ffffff !important;
}
.dark-mode svg .svg-icon-path-fill{
  fill: #ffffff !important;
}


.dark-mode .dd-profile .dropdown-item:focus, 
.dark-mode .dd-profile .dropdown-item:hover{
  stroke: #000000a3 !important;
  fill: #000000a3 !important;

}
.dark-mode .dd-profile .submenu .dropdown-item:focus svg .svg-icon-path-fill, 
.dark-mode .dd-profile .submenu .dropdown-item:hover svg .svg-icon-path-fill{
  fill: #000000a3 !important;

}
.dark-mode .dd-profile .submenu .dropdown-item:focus svg .svg-icon-path, 
.dark-mode .dd-profile .submenu .dropdown-item:hover svg .svg-icon-path{
  stroke: #000000a3 !important;

}

.dark-mode .delete-btn.disabled,
.dark-mode .delete-btn:disabled {
  color: #fff !important;
  background-color: #808080b8 !important;
  border-color: transparent !important;
}

.dark-mode .update-btn.disabled,
.dark-mode .update-btn:disabled {
  color: #fff !important;
  background-color: #808080b8 !important;
  border-color: transparent !important;
}

.dark-mode .common-btn.disabled,
.dark-mode .common-btn:disabled {
  color: #fff !important;
  background-color: #808080b8 !important;
  border-color: transparent !important;
}


/* new product  */
.dark-mode .header-product {
  background-color: var(--secondary-dark) !important;
  color: #fff !important;
}

.dark-mode .sidebar__section-header_active {
  /* background: rgb(85, 85, 85) !important; */
  background: rgb(54 54 54) !important;
  /* background: #282730 !important; */
  /* background: linear-gradient(180deg, rgba(85, 85, 85, 1) 0%, rgba(44, 44, 44, 1) 100%) !important; */
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

.dark-mode .sidebar-product {
  background-color: var(--secondary-dark) !important;
  border-right:none !important
}

.dark-mode .sidebar__section-header_inactive {
  background: #282730 !important;
  /* background: linear-gradient(90deg, rgba(33, 32, 41, 1) 0%, rgba(33, 32, 41, 1) 100%) !important; */
  /* box-shadow: 0px 0px 1px 1px rgb(108 108 108 / 25%) !important; */
  color: #fff !important;
}
.dark-mode .sidebar__list label {
  color: #FFFFFF !important;
}
.dark-mode .dashboard__content {
  background-color: var(--primary-dark) !important;
}

.dark-mode .apexcharts-tooltip.apexcharts-theme-light {
  border: 1px solid #444444 !important;
  background: rgb(40 40 40 / 96%) !important;
}

::ng-deep .dark-mode .p-sidebar-right {
  background-color: var(--secondary-dark) !important;
  border: var(--border) !important;
  box-shadow: inset 0px 1px 1px 0 rgba(237, 239, 255, 0.57), inset 2px 3px 6px 0 rgba(255, 255, 255, 0.16), 1px 1px 9px 0 rgba(0, 0, 0, 0.4);
}

::ng-deep .dark-mode .p-sidebar {
  color: var(--primary-text-color);
}


.dark-mode .sell_Rate_cls {
  border: 1px solid #d57269 !important;
}

.dark-mode .last-trade-fild {
  color: #ffffff !important;
}

.dark-mode .product-details-card {
  border: 1px solid rgb(0 0 0 / 24%) !important;
  background: linear-gradient(0deg, rgba(57, 57, 57, 1) 0%, rgba(33, 33, 33, 1) 100%) !important;
  box-shadow: inset 0px 1px 1px 0 rgba(237, 239, 255, 0.57), inset 3px 3px 10px 0 rgba(255, 255, 255, 0.16), 1px 1px 9px 0 rgba(0, 0, 0, 0.4) !important;
}
.dark-mode .product-details-table-card {
  border: 1px solid rgb(0 0 0 / 24%) !important;
  background: linear-gradient(0deg, rgba(57, 57, 57, 1) 0%, rgba(33, 33, 33, 1) 100%) !important;
  box-shadow: inset 0px 1px 1px 0 rgba(237, 239, 255, 0.57), inset 3px 3px 10px 0 rgba(255, 255, 255, 0.16), 1px 1px 9px 0 rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .card-header1 h3{
  color: rgb(255, 255, 255) !important;
  }
  
  .dark-mode .company-details p{
  color: rgb(255, 255, 255) !important;
  }

  .dark-mode .attribute{
    background: linear-gradient(0deg, rgba(57, 57, 57, 1) 0%, rgba(33, 33, 33, 1) 100%) !important;
    box-shadow: 
    2px 2px 4px 0px rgba(0, 0, 0, 0.2), 
    -2px -2px 4px 0px rgba(255, 255, 255, 0.08),
    inset 1px 1px 2px 0px rgba(0, 0, 0, 0.25),
    inset -1px -1px 4px 0px rgba(255, 255, 255, 0.16) !important;
    color: white !important;
    border: none !important;
  }

  .dark-mode .number-input-container{
    background: #1e1e1e !important;
    border: 1px solid #444 !important;
  }
  .dark-mode .number-input-container .input-field{
    background: #1e1e1e !important;
    color: #FFFFFF !important;
  }

  .dark-mode .btn-shoping-input {
    background: linear-gradient(to bottom, #242424 0%, #1C1C1C 100%) !important;
      color: white !important;
      box-shadow: inset -2px -1px 4px 0px rgba(0, 0, 0, 0.12), inset 1px 1px 8px 0px rgba(255, 255, 255, 0.08) !important;
      border: 1px solid #444444 !important;

  }


 .dark-mode .order-summary-totals .total-line{
  color: #fff !important;
  }


  .dark-mode .order-status{
    border-bottom: 1px solid #4D4D4D !important;
  }

  .dark-mode .status-text {
    color: #333 !important;
    border: 1px solid #20add0;
    padding: 1px 10px;
    border-radius: 20px;
    background-color: #20add0;
  }
  .dark-mode .status-text1 {
    color: #dbdbdb !important;
  }


  .dark-mode .tab-button-myOrder.active {
    background: #F6F6F6 !important;
    color: #000 !important;
    /* background: linear-gradient(180deg, #F6F6F6 0%, #B4B4B4 100%) !important; */
    /* box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.16) !important; */
    /* box-shadow: inset -2px -2px 8px rgba(0, 0, 0, 0.16), 2px 2px 4px rgba(255, 255, 255, 0.16) !important; */
  }

  .dark-mode .tab-button-myOrder {
    border: 1px solid #e6e6e675 !important;
    color: #fff !important;
  }

  .dark-mode .card2 {
    border: 1px solid rgb(0 0 0 / 24%) !important;
    background: linear-gradient(0deg, rgba(57, 57, 57, 1) 0%, rgba(33, 33, 33, 1) 100%) !important;
    box-shadow: inset 0px 1px 1px 0 rgba(237, 239, 255, 0.57), inset 3px 3px 10px 0 rgba(255, 255, 255, 0.16), 1px 1px 9px 0 rgba(0, 0, 0, 0.4) !important;
  }



  .dark-mode .serch_box:hover,
.dark-mode .serch_box:focus-within,
.dark-mode .serch_box.active {
  background: #37363e !important;
}


.dark-mode .arrow-green{
  color: #33ff33 !important;
}

.dark-mode .user-name .cdlabel1{
  color: #ffff !important;
}

.dark-mode .checkbox-group .highlight {
  background-color: #545454 !important;
}

/* .dark-mode .strength-card{
    background: none !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05)!important;
  } */

  .dark-mode .dealEndIn-Color{
    color: #ffa3a3 !important;
  }

  .dark-mode tr  td.seller-dg{
    background: #472D3C !important;
    /* box-shadow: 0px 1px 5px 0px #F3EFEF1A inset !important; */
  }
  .dark-mode tr:nth-child(odd)  td.seller-dg{
    background: #582E46 !important;
    /* box-shadow: 0px 1px 5px 0px #F3EFEF1A inset !important; */
  }
  .dark-mode tr  td.buyer-dg{
    background: #1B2836 !important;
    /* box-shadow: 0px 1px 5px 0px #F3EFEF1A inset !important; */
  }
  .dark-mode tr:nth-child(odd)  td.buyer-dg{
    background: #263F59 !important;
    /* box-shadow: 0px 1px 5px 0px #F3EFEF1A inset !important; */
  }
.dark-mode tr td .pending-seller-dg {
  box-shadow: 0px 4px 4px 0px #00000040 !important;
  /* background: #00640099 !important; */
  background: #00520099 !important;

}
.dark-mode tr td .sd-seller-dg {
  box-shadow: 0px 4px 4px 0px #00000040 !important;
  background: #8B000099 !important;
}
.dark-mode tr td .accept-seller-dg {
  box-shadow: 0px 4px 4px 0px #00000040 !important;
  background: #00666699 !important;
}
.dark-mode tr td .bd-seller-dg {
  box-shadow: 0px 4px 4px 0px #00000040 !important;
  background: #B4282899 !important;
}


.dark-mode .dd-profile{
  background: #414141 !important;
}


.dd-profile .dropdown-item:focus, 
.dd-profile .dropdown-item:hover{
  background-color: #e9ecef !important;
  color: var(--primary-dark) !important;
}

/* .dd-profile .dropdown-item:focus, 
.dd-profile .dropdown-item:hover{
  background-color: #83888d !important;
  color: var(--primary-dark) !important;

} */
/* .dark-mode .dd-profile .dropdown-item:focus, 
.dark-mode .dd-profile .dropdown-item:hover{
  background-color: #e9ecef !important;
  color: var(--primary-dark) !important;
}

.dark-mode .dd-profile .dropdown-item:focus, 
.dark-mode .dd-profile .dropdown-item:hover{
  background-color: #e9ecef !important;
  color: var(--primary-dark) !important;

} */

.dark-mode .p-datatable .p-datatable-tbody > tr.exp-tr-chart{
  background-color: #505051 !important;

}
.dark-mode .p-datatable .p-datatable-tbody > tr:nth-child(odd).exp-tr-chart{
  background-color: #505051 !important;

}

.dark-mode .p-tieredmenu.p-tieredmenu-overlay{
  background: #414141 !important;

}

.dark-mode .p-tieredmenu .p-submenu-list{
  background: #414141!important;
}
.dark-mode .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text,
.dark-mode .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon{
  color: #ffffff !important

}

.dark-mode .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
.dark-mode .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
  color: #333 !important
  }

  .dark-mode .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
  .dark-mode .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text{
  color: #333 !important

}

.dark-mode .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link.p-menuitem-link-active{
  background: gray !important;
  }

.dark-mode .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text{
  color: #fff !important;
}

.dark-mode .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
  /* background: #232323 !important;
  border-color: #3b3b3c !important; */
  background: #e9ecef !important;
  border-color: #e9ecef !important;
  color: #161616 !important;
}
.dark-mode .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action {
  color: black !important;
  background: transparent;
}
.dark-mode .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
  color: black !important;
  background: transparent;
}

.dark-mode .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{
  border: 1px solid #414141 !important;
      color: #495057 !important;
      background: #414141 !important;
}

    .dark-mode .logo .pi .p-button-icon-only .p-button-icon {
      color: #fff !important;
    }
  
  
    .dark-mode .dd-profile .dropdown-item:hover .pi {
      color: #000000a3 !important;
    }
    .dark-mode .dd-profile .dropdown-item:hover .fa-solid {
      color: #000000a3 !important;
    }

    .dark-mode .dd-profile .submenu {
    background: #656464 !important;
    }

    .dark-mode .scrolling-text{
      /* color: #6bff6b !important; */
      color: #FFBF00 !important;

      }


      /* Style for PanelMenu headers */
       .dark-mode .p-panelmenu .p-panelmenu-header {
  background-color: #3a3a3a !important;
  color: white !important;
  font-weight: bold !important;
}
/* Style for PanelMenu content (inside items) */
 .dark-mode .p-panelmenu .p-panelmenu-content {
  background-color: #4a4a4a !important;
  color: white  !important;
  border: none  !important;
}

/* Style for individual menu items (links) */
 .dark-mode .p-panelmenu .p-menuitem-link {
  color: white  !important;
  text-decoration: none  !important;
}

/* Active item styling (optional) */
.dark-mode  .p-panelmenu .p-menuitem-link.router-link-active {
  font-weight: bold  !important;
  color: #ffffff  !important;
  background-color: #5a5a5a  !important;
}

/* Optional - hover effect */
.dark-mode  .p-panelmenu .p-menuitem-link:hover {
  background-color: #555  !important;
}



.dark-mode .toggle-btn-product.active {
  background-color: #FFFFFF !important; 
  color: #050505 !important;

  /* color: #000 !important;
  background: #FFFFFF !important; */
/* box-shadow: 4px 4px 5px 0px #00000066,2px 2px 6px 0px #00000080 inset !important; */
}


.dark-mode .toggle-container {
  /* background: #333333 !important; */
  /* border: 1px solid #444444 !important; */
  /* box-shadow: 0px 0px 16px 0px #00000066,4px 4px 4px 0px #00000066 inset,-2px -2px 8px 0px #00000066 inset !important; */
}

.dark-mode .toggle-btn-product {
  
  /* border: 1px solid white !important; */
  color: white !important;
  /* color: #fff  !important; */
}


.dark-mode .b-active{
  background: #136FB6 !important;
  border: none !important;
}

.dark-mode .s-active{
  background: rgba(255, 42, 66, 0.69) !important;
  border: none !important;
}
/* .dark-mode .toggle-btn-product:not(.active):hover {
  background-color: #222  !important;
} */


.dark-mode .Icon-Background {
  background: #37363e !important;
}

.dark-mode tr td.selected-row{
  background-color: #505051 !important;
}


.dark-mode .b-active{
  background: #136FB6 !important;
  border: none !important;
}

.dark-mode .s-active{
  background: rgba(255, 42, 66, 0.69) !important;
  border: none !important;
}



.dark-mode .close-icon-expend {
  color: #37363e !important;
  background: #ffffff !important;
  border: 1px solid #37363e !important;
}
.dark-mode .close-icon-expend-add {
  color: #37363e !important;
  background: #ffffff !important;
  border: 1px solid #37363e !important;
}
.dark-mode .close-icon-expend-add1 {
  color: #37363e !important;
  background: #ffffff !important;
  border: 1px solid #37363e !important;
}
.dark-mode .close-icon-expend-add1-refresh {
  background: #ffffff !important;
  border: 1px solid #37363e !important;
  color: #37363e !important;
}


.dark-mode .serch_text {
  color: #fff !important;
}

.dark-mode .row-filter-search{
  color: white !important;
}


.dark-mode .contact-sup-footer{
  background: var(--primary-dark) !important;
}






.dark-mode .p-button:not(:disabled):hover{
  color: rgb(255, 255, 255) !important;
}
















.dark-mode .notifications-dropdown {
  background: #414141 !important;
  border: 1px solid #414141 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;


}

.dark-mode .notifications-dropdown .notification-items .notification-item{
  background-color: #272727 !important;
  border: 1px solid #272727 !important;
}


.dark-mode .username-display h6{
  color: #f5f5f5 !important;
}





.dark-mode .toggle-group {
    background: #282828 !important;
    box-shadow: 0 1px 4px rgb(145 145 145 / 27%) !important;
    border: 1px solid #343434 !important;
}


.dark-mode  .spinner_overlay {
  background-color: #0000009e;
}