/* ---------- Global Styling ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  outline: none;

}

/* .App{
  width: 100vw;
  height: 100vh;
  padding: 1%;
} */

/* login-form */

/* ---------- Background Pattern ---------- */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e8f1fa;
  /* background-image: url("../public/img/bg.jpg") */
  opacity: 0.7;
  background-size: cover;
  background-repeat: no-repeat; 
  
}

/* ---------- Centered Box ---------- */
.contain {
  display: flex;
  flex-direction: row-reverse; /* switched positions */
  width: 900px; 
  height: 550px;
  background-color: #f5efef;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin-inline: auto;
}

.contain h4{
  font-weight: 400;
  margin-bottom: 10px;
  color: #000;
  font-size: 18px;
}

/* ---------- Right Image Section ---------- */
.login-image {
  flex: 1 1;
  position: relative;
  background: #f4f5f7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-left: 1px solid #ddd; /* flipped border */
}

/* ---------- Left Login Form Section ---------- */
.login-form {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 60px;
  background-color: #fff;
  text-align: left;
}

/* ---------- Heading ---------- */
.login-form h2 {
  font-size: 64px;
  font-weight: 700;
  text-align: center;
  font-style: bold;
  margin-top: 60px;
  margin-bottom: 30px;
  color: #000;
}

/* ---------- Inputs ---------- */
.login-form input {
  width: 90%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid #131212;
  border-radius: 5px;
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
}

.login-form input:focus {
  border-color: #4b4038;
}

/* ---------- Password Field with Icon ---------- */
.password-input-container {
  position: relative;
}

.eye-icon {
  position: absolute;
  right: 45px;
  top: 58%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
}

/* ---------- Login Button ---------- */
.login-form button {
  width: 90%;
  padding: 12px;
  background-color: #59514B;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s ease;
}


.remember-me-group {
  display: flex;
  align-items: center;
  margin-top: 1px;
  margin-bottom: 5px; /* Adjust spacing */
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #574b42;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
}

.custom-checkbox.checked {
  background-color: #d4cbc2;
  border-color: #d3ccc6;
}

.remember-me-label {
  margin-left: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.login-form button:hover {
  background-color: #3a3029;
}

/* ---------- Error Message ---------- */
.error-text {
  color: red;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}

/* ---------- Footer Text ---------- */
.login-form p.footer-text {
  text-align: center;
  font-size: 12px;
  color: #0e0d0d;
  margin-top: 80px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contain {
    flex-direction: column;
    height: auto;
    width: 90%;
  }

  .login-image {
    height: 250px;
    border-left: none;
  }

  .login-form {
    padding: 30px;
  }
}

/* sidebar */

/* General Layout and Reset */


/* --- App Structure --- */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar Component Styling --- */

/* Sidebar Container */
.sidebar-container {
  width: 163px; /* Fixed width as seen in the image */
  background-color: #E8F2FA; /* White background */
  padding: 0px ;
  margin: 8px;
  margin-top: 15px;
  position: fixed; /* Fixed position for sidebar */
  border-radius: 15px;
  /* height: 1360px; */
  overflow-y: auto;
  transition: transform 0.3s ease-in-out;
  z-index: 100;
  height: 100vh;           /* full screen height */
  overflow-y: auto;        /* allow vertical scroll */
  overflow-x: hidden;
  scrollbar-width: thin;   /* Firefox scrollbar visible */
  scrollbar-color: #E8F2FA #E8F2FA;
}
.sidebar-container::-webkit-scrollbar {
  width: 6px;
}

.sidebar-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 1px;
}

.sidebar-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Sidebar Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 9px;
  height: 70px; /* Aligns with navbar height */
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

.logo-img {
  height: 30px; /* Adjust size as needed */
  width: auto;
}

/* Sidebar Menu */
.sidebar-menu {
  list-style: none;
  margin-left: 10px;
  
}

.sidebar-menu li {
  margin-bottom: 5px;
}

/* Sidebar Links (including dropdown buttons) */
.sidebar-link, .dropdown-btn {
  display: flex;
  align-items: center;
  padding: 8px ;
  /* margin: 0 10px; */
  border-radius: 8px;
  color: #000; /* Default text color */
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  width: calc(100% - 20px);
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}

.sidebar-link span{
  margin-left: 5px;
}

.sidebar-link:hover, .dropdown-btn:hover {
  background-color: #f0f0f0;
}

.sidebar-link svg {
  margin-right: 10px;
  color: #000;
}

/* Active Link Styling (Dashboard in image is selected) */
.sidebar-link.active {
  background-color: #c44f32; /* Light blue background */
  /* margin-left: 12px; */
  padding: 11px 13px;
  color: #ffffff; 
  font-weight: bold;
}

.submenu-link.active {
  background-color: #F3D3B3; /* Light blue background */
  padding-right: 2px;
  color: #111010; /* Blue text color */
  font-weight: bold;
}

.sidebar-link.active img {
  color: #f5f7f8;
}


/* .dropdown-btn {
  justify-content: space-between;
} */


.submenu {
  list-style: disc;
  padding: 2px;
  margin-left: 1px;
  padding-left: 25px; 
}

.submenu-link {
  margin-right: 7px;
  margin-top: 5px;
  display: block;
  padding: 9px 7px;
  color: #000;
  text-decoration: none;
  font-size: 11.5px;
  border-radius: 4px;
}

.submenu-link:hover {
  background-color: #F3D3B3;
  color: #090a0a;
}

.sidebar-table {
  width: 15px;
  
}

.export-table {
  width: auto;
  
}

.able{
  width: 35px;
}

.active-parent {
  background-color: #c44f32 !important;
  color: white !important;
}

.active-parent svg {
  stroke: white !important;
}

.customer-form-container{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}


/* --- Navbar Component Styling --- */
.navbar-outer {
  padding-top: 8px;
  position: fixed;
  left: 148px; 
  right: 10px;
  height: 86px;
  width: auto;
  background-color: #fff;
  z-index: 50;
  -webkit-padding-after: 20px;
          padding-block-end: 20px;
  transition: left 0.3s ease-in-out;
}
.navbar {
  margin-top: 8px;
  position: fixed;
  left: 182px; /* Starts after the sidebar */
  border-radius: 15px;
  right: 10px;
  width: auto;
  height: 58px;
  background-color: #E8F2FA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  transition: left 0.3s ease-in-out;
  z-index: 50;
}

/* Profile Section */
.user-section {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 5px 10px;
  border-radius: 5px;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #fff;
  
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  margin-left: 10px;
  font-weight: 600;
  color: #333;
}
.user-email {
  margin-left: 10px;
  font-weight: 500;
  font-size: 15px;
  color: #A4A1A1;
}

.users {
  display: grid;
  margin-left: 10px;
  font-weight: 500;
  color: #333;
}

/* Profile Popup */
.profile-popup {
  position: absolute;
  top: 100%;
  right: 0;
  width: 250px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  z-index: 1000;
}

.popup-header {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.popup-header .avatar.small {
  width: 40px;
  height: 40px;
  font-size: 16px;
  margin-right: 10px;
}

.popup-header h6 {
  margin: 0;
  font-size: 15px;
  color: #333;
}

.popup-header small {
  display: block;
  color: #6c757d;
  font-size: 12px;
}

.profile-popup hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid #eee;
}

.popup-btn {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  border: none;
  background: none;
  text-align: left;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.popup-btn:hover {
  background-color: #f0f0f0;
}

.popup-btn.logout {
  color: #dc3545;
}

/* Sidebar Toggle Button */
.toggle-arrow {
  background: #E8F2FA;
  border: white;
  font-size: 24px;
  cursor: pointer;
 
  color: #0e0c0c;
}
/* --- Dashboard Component Styling (The Main Content Area) --- */

.right-main{
  padding: 18px;
  border-radius: 14px;
  
  background-color: #E8F2FA;
}

.right-main1{
  padding-bottom: 10px;
  border-radius: 14px;
  background-color: #E8F2FA;
}

.right_col {
  background-color: #fff;
  margin-left: 173px; /* Offset for sidebar */
  padding: 10px;
  flex-grow: 1;
  transition: margin-left 0.3s ease-in-out;
  padding-top: 86px; /* Space for fixed navbar */
  width: auto;
  /* overflow-y: scroll; */
  height: auto;
  /* position: fixed; */
  box-sizing: border-box;
}



/* Dashboard Header */
.dashboard-container {
  min-height: 100vh;
  background-color: #f9fafb; /* gray-50 */
  padding: 1.5rem; /* p-6 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.header-title {
  font-size: 1.875rem; /* 3xl */
  font-weight: 600;
  color: #1f2937; /* gray-800 */
  margin-bottom: 2rem;
}

.stats-grid {
  
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: 15px;
  gap: 15px; /* gap-6 */
  margin-bottom: 20px; /* mb-10 */
}
@media (min-width: 640px) { /* sm breakpoint */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { /* lg breakpoint */
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stats-grid1 {
  padding-left: 20px;
  padding-right: 20px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: 15px;
  gap: 15px; /* gap-6 */
  margin-bottom: 20px; /* mb-10 */
}
@media (min-width: 640px) { /* sm breakpoint */
  .stats-grid1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { /* lg breakpoint */
  .stats-grid1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-card {
  /* width: 300px; */
  height: 100px; 
  /* padding: 0px 0px; */
  background-color: white;
  line-height: 0.5;
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 200px;
  border: 2px solid;
  transition: box-shadow 0.3s ease-in-out;
  cursor: pointer;
}
.stat-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.stat-content{
  margin-bottom: 28px;
}

.stat-card h3{
  font-size: 20px;
  margin-left: 8px;
}

.stat-card p {
  font-size: 30px; /* text-3xl */
  font-weight: 700;
  color: #1f2937; /* gray-800 */
 margin-left: 63px;

}

.stat-icon {
  padding: 0.75rem; /* p-3 */
  border-radius: 0.75rem; /* rounded-xl */
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.stat-icon svg {
  width: 2rem; 
  height: 2rem; 
}

/* Specific Stat Card Colors */
.stat-blue { 
  display: grid;
  border-color: #0093FF; 
  background-color: #E3F2FD;
}
.stat-blue:hover { 
  border-color: #0093FF; 
  background-color: #dbecf8;
}

.stat-blue h3{
  
  color: #3B82F6;
 }

.stat-blue .stat-icon svg { color: #3B82F6; }

.stat-green { 
  display: grid;
  border-color: #7EDF9A;
  background-color: #EBFFF0;
 }

 .stat-green:hover { 
  border-color: #7EDF9A;
  background-color: #e4ffeb;
 }

 .stat-green h3{
  color: #34D399;
 }

.stat-green .stat-icon svg { color: #34D399; }

.stat-yellow { 
  display: grid;
  border-color: #EFB800; 
  background-color: #FFF9E5;
}

.stat-yellow:hover { 
  border-color: #EFB800; 
  background-color: #f8f0d5;
}

.stat-yellow h3{
  color: #F59E0B;
 }

.stat-yellow .stat-icon svg { color: #F59E0B; }

.stat-red { 
  display: grid;
  border-color: #FF6E1C;
  background-color: #FFEFE6;
 }

 .stat-red:hover { 
  border-color: #FF6E1C;
  background-color: #f8e6db;
 }

 .stat-red h3{
  color: #FF6E1C;
 }

/* .stat-red .stat-icon { background-color: #F87171; } */
.stat-red .stat-icon svg { color: #FF6E1C; }


.chart-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 1024px) { /* lg breakpoint */
  .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.chart-box {
  background-color: #F9F9FA;
  padding: 20px; 
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.chart-box-sales {
  background-color: #F9F9FA;
  padding: 1.5rem; /* p-6 */
  width: auto;
  /* height: 105%; */
  margin-left: -53.5%;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.chart-box h2 {
  font-size: 1.25rem; /* xl */
  font-weight: 600;
  margin-bottom: 1rem;
  color: #374151; /* gray-700 */
}

.chart-legend {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: 100%;
  max-width: 50%;
}
.chart-legend li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem; /* text-sm */
  color: #4b5563; /* gray-600 */
  padding-right: 1rem;
  margin-bottom: 0.5rem;
}
.chart-legend span:last-child {
  font-weight: 600;
  color: #1f2937; /* gray-800 */
}
.legend-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px; /* rounded-full */
  margin-right: 0.5rem;
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bottom-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: 25px;
  gap: 25px;
  /* margin-bottom: 2rem; */
}
@media (min-width: 768px) { /* md breakpoint */
  .bottom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.activity-box {
  background-color: white;
  width: 73%;
  height: auto;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.activity-box h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #374151;
}
.activity-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-box li {
  margin-top: 25px;
  display: flex;
  color: #4b5563;

  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  
}

.activity-box li p span{
  color: #7E6F6F;
  /* padding-bottom: 0.5rem; */
  font-weight: 400;
  font-size: 12px;
}

.activity-box li span{
  color: #000;
  font-weight: 400;

  font-size: 16px;
  margin-left: 14px;
  margin-bottom: 10px;
}

.able-image{
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 5px;
}

.activity-info {
  background-color: white;
  padding: 1.5rem;
  width: 78%;
  /* height: 105%; */
  margin-left: -30%;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.activity-info h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #374151;
}
.activity-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-info li {
  display: flex;
  justify-content: space-between;
  color: #050505;
  font-size: 14px;
  font-weight: 400;

  padding-top: 30px;
  
}
.activity-info li:last-child {
    border-bottom: none;
    
}
.activity-info li span:last-child {
  font-size: 14px;
  color: #000; 
  font-weight: 400;
}
/* .activity-info .status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    display: inline-block;
} */

.order-status {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
}

.order-status li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0;
}

.status-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #000; /* outer circle color */
  border-radius: 50%;
  margin-right: 10px;
}

.status-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #000; /* inner circle color */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.count {
  margin-left: auto;
  font-weight: 500;
}


/* order css */

/* Header */
.top-sec-heading {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 25px; */
}

.top-sec-heading h3 {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.top-sec-heading img {
  width: 24px;
  margin-right: 10px;
}

.date-range select {
  border: 1px solid #fff;
  border-radius: 8px;
  /* padding: 6px 10px; */
  width: 230px;
  height: 40px;
  font-size: 14px;
  color: #6B7280;
}

/* Summary Boxes */
.summary-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 30px;
}

.summary-box {
  border-radius: 12px;
  padding: 38px;
  color: #333;
  text-align: center;
  font-weight: 500;
}

.summary-box h2 {
  font-size: 26px;
  margin: 0;
}

.summary-box p {
  font-size: 14px;
}

.summary-box.total { background: #e0ecff; }
.summary-box.new { background: #d8fddc; }
.summary-box.production { background: #fff2cd; }
.summary-box.quality { background: #ffd6b8; }
.summary-box.dispatch { background: #ffe4e4; }
.summary-box.shipped { background: #d8f5ff; }
.summary-box.cancel { background: #f3e6ff; }
.summary-box.delivered { background: #dbf4ff; }


/* 8-boxes css */

.stat-pink { 
  display: grid;
  border-color: #FD71EB; 
  background-color: #F2DBEC;
}

.stat-pink h3{
 
  color: #FD71EB;
 }

.stat-sky { 
  display: grid;
  border-color: #81CEE2; 
  background-color: #D2EDF4;
}

.stat-sky h3{
 
  color: #81CEE2;
}

.stat-purple { 
  display: grid;
  border-color: #CC9FF5; 
  background-color: #F3E8FD;
}

.stat-purple h3{
 
  color: #CC9FF5;
}

/* Styling for the table cell and the container within it */
.orders-table .payment-td {
  /* Set a fixed width for the payment column for consistency */
  width: 150px; 
}

/* The main container for the progress bar and percentage text */
.payment-row {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between the bar and the percentage text */
  width: 100%;
}

/* The full track background of the progress bar */
.payment-track {
  flex-grow: 1; /* Allows the track to take up available space */
  height: 8px; /* Height of the bar */
  background-color: #e0e0e0; /* Light gray background */
  border-radius: 4px;
  overflow: hidden; /* Ensures the fill stays within the track's radius */
}

/* The colored, dynamic part of the progress bar */
.payment-fill {
  height: 100%;
  transition: width 0.3s ease; /* Smooth transition for visual effect (optional) */
  /* The background-color is set dynamically by the getColor function in React */
}

/* The percentage text next to the bar */
.payment-percentage-text {
  font-size: 12px;
  font-weight: 500;
  color: #333; /* Darker text color */
  width: 30px; /* Ensures all percentages are aligned correctly */
  text-align: right;
}

/* Filters */
.filter-section {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  /* margin-bottom: 19px; */
  flex-wrap: wrap;
}

.tabs button {
  background: #e4e3e3;
  border: 1px solid #e4e3e3;
  border-right: 1px solid #9B9292;
  color: #080000;
  padding: 5px 7px;
  cursor: pointer;
  transition: 0.2s;
}

.tabs button:hover {
  border-radius: 10px;
  border: 3px solid #e4e3e3;
  background: #B86F32;
  color: #fff;
}

.tabs .active-tab {
  background-color: #B86F32;
  color: white;
  border-radius: 6px;
}

.sidebar-container.closed {
  transform: translateX(-100%);
  width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Update navbar position when sidebar is closed */
.app-shell .navbar {
  transition: left 0.3s ease-in-out;
}

.app-shell .sidebar-container.closed ~ .main-area .navbar {
  left: 10px;
}

/* Update main content area when sidebar is closed */
.app-shell .sidebar-container.closed ~ .main-area .right_col {
  margin-left: 10px !important;
}


.sidebar-container.closed .sidebar-menu span {
  display: none;
}

.sidebar-container.closed .submenu {
  display: none;
}

.sidebar-container.closed img.logo-img {
  width: 50px;
}




.search-export {
  display: flex;
  gap: 10px;
}

.search-export input {
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 12px 10px;
  width: 220px;
  height: 35px;
  font-size: 11px;
}

.search-export input:focus,
.search-export button:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.search-export input:hover {
  
  color: #070707;
  background-color: #fffdfd;
}


.export-btn {
  background: #2DCB6C;
  color: #fff;
  border: 1px solid #2DCB6C;
  border-radius: 10px;
  padding: 9px 26px;
  Width: 130px;
  Height: 35px;
  display: flex;
  
  gap: 5px;
  cursor: pointer;
}

.export-btn:hover {
  background: #34db77;

}

/* Table */
.orders-table table {
  width: 100%;
  border-collapse: collapse;

  /* overflow: hidden; */
}

.orders-table th {
  background: #B86F32;
  
  text-align: left;
  font-weight: 400;
  color: #fff;
}

.orders-table td {
  padding: 10px;
  font-size: 12px;
}

.payment-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #fff;
}

.role-badge {
  padding: 10px 20px;
 
  font-size: 14px;
  font-weight: 500;
  display: inline-block;

}

.bg-purple { background-color: #E8F2FA; color: #4F42E1; }
.bg-pink { background-color: #E8F2FA; color: #8B2C55;}

.payment-badge.ready { background: #4ade80; }
.payment-badge.custom { background: #fbbf24; }

.status-badge {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.status-dropdown {
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 500;
  border: 1px solid #ccc;
}

.status-dropdown.new {
  background-color: #DEE8FF;
  color: #407BFF;
  border-color: #407BFF;
}

.status-dropdown.in-production {
  background-color: #FFE4CE;
  color: #B86F32;
  border-color: #B86F32;
}

.status-dropdown.quality-check {
  background-color: #CEFFE2;
  color: #4E9F3D;
  border-color: #4E9F3D;
}

.status-dropdown.shipped {
  background-color: #FFE2CD;
  color: #874719;
  border-color: #874719;
}

.status-dropdown.delivered {
  background-color: #CEFFE2;
  color: #4E9F3D;
  border-color: #4E9F3D;
}

.status-dropdown.unfulfilment {
  background-color: #CEFFE2;
  color: #4E9F3D;
  border-color: #4E9F3D;
}

.status-dropdown.ready-for-dispatch {
  background-color: #CEFFE2;
  color: #4E9F3D;
  border-color: #4E9F3D;
}

.status-dropdown.fulfilment {
  background-color: #e9fcc5;
  color: #c4f148;
  border-color: #c4f148;
}

.status-dropdown.cancel-orders {
  background-color: #fae5e5 !important;
  color: #f54343 !important;
  border-color: #f54343;
  font-weight: bold;
}



/* Action Menu */
.action-cell {
  position: relative;
}

.action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
}

.action-menu {
  position: absolute;
  margin-left: -47px;
  top: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10;
  min-width: 120px;
}

.action-menu button {
  padding: 8px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  color: #ffffff;
}

.action-menu a {
  padding: 8px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  color: #ffffff;
}

.action-menu2 {
  position: absolute;
  margin-left: -50px;
  top: 5px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10;
  min-width: 120px;
}

.action-menu2 a {
  padding: 8px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
}

.action-menu3 {
  position: absolute;
  margin-left: -47px;
  /* top: 19px; */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10;
  min-width: 120px;
}

.action-menu3 button {
  padding: 8px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
}


.action-menu .close-btn {
  padding: 8px 40px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  background: #fdfcfc;
  color: #000;
  border-bottom: 1px solid #ddd;
}

.action-menu2 .close-btn {
  padding: 8px 40px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  background: #fdfcfc;
  color: #000;
  border-bottom: 1px solid #ddd;
}

.action-menu3 .close-btn {
  padding: 8px 40px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  background: #fdfcfc;
  color: #000;
  border-bottom: 1px solid #ddd;
}



.action-menu1 {
  position: absolute;
  right: 0px;

  top: 25px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 10;
  min-width: 120px;
}

.action-menu1 button {
  padding: 8px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  color: #fdfafa;
}
.edit1 { 
  background: #699836;
 }
.cancel1 { 
  background: #FF3333;
 }

 .edit2{background: #407BFF;}

 .view2{background: #2DCB6C;}


.add-payment { background: #FFBB5F; }
.shipment { background: #25CCFF; }
.edit { background: #25FF7C; }
.view { background: #2CADFF; }
.cancel { background: #FF3232; }

.add-payment:hover { background: #FFBB5F; }
.shipment:hover { background: #25CCFF; }
.edit:hover { background: #25FF7C; }
.view:hover { background: #2CADFF; }
.cancel:hover { background: #FF3232; }

/* pop up of each option in order page  */

.close-modal-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #0c0c0c;
}

.submit-btn, .save-close-btn {
  padding: 10px 20px;
  background-color: #4A90E2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.form-row {
  display: flex;
  gap: 20px;
  
}

.form-group2 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.form-group2 label {
  font-size: 16px;
  color: #080707;
  margin-bottom: 5px;
  font-weight: 600;
}

.form-group2 input,
.form-group2 select,
.form-group2 textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.form-group3 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

.form-group3 label {
  font-size: 16px;
  color: #080707;
  margin-top: 7px;
  margin-bottom: 5px;
  font-weight: 600;
}

.form-group3 input,
.form-group3 select,
.form-group3 textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  width: 48.8%;
  margin-bottom: 10px;
}

.form-group2 textarea {
  resize: vertical;
  min-height: 80px;
}

/* --- Shipment Modal Specifics --- */

.form-group9 {
  padding-top: 10px;
}

.form-group9 input[type="email"],
.form-group9 textarea,
.form-group9 select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 5px;
  font-size: 14px;
  color: #333;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  transition: border-color 0.2s;
  width: 300px;
  box-sizing: border-box; /* Crucial for padding/border not affecting width */
}

.form-group9 input[type="text"],
.form-group9 textarea,
.form-group9 select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 5px;
  font-size: 14px;
  color: #333;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  transition: border-color 0.2s;
  width: 300px;
  box-sizing: border-box; /* Crucial for padding/border not affecting width */
}

.form-groups input[type="text"],
.form-groups textarea,
.form-groups select {
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #646363;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  transition: border-color 0.2s;
  width: 620px;
  box-sizing: border-box; /* Crucial for padding/border not affecting width */
}

.form-group9 input:focus,
.form-group9 select:focus,
.form-group9 textarea:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 1px #3b82f6;
}

.shipment-modal {
  width: 500px;
}

.shipment-modal .form-row {
  margin-bottom: 15px;
}

.upload-group .file-input-display {
  display: flex;
  margin-top: 5px;
  margin-bottom: 10px;
  width: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.upload-group .choose-file-btn {
  background-color: #eee;
  border: none;
  padding: 8px 12px;
  margin-left: -10px;
  cursor: pointer;
  color: #696666;
  font-size: 14px;

}

.upload-group .file-name {
  padding: 8px 12px;
  background-color: white;
  flex-grow: 1;
  font-size: 14px;
  color: #9e9494;
  line-height: 20px;
}

.uploaded-images-preview {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.uploaded-images-preview img {
  width: 10%;
  height: 100%;
  object-fit: cover;
}

/* --- Add Payment Modal Specifics --- */
.payment-modal {
  width: 450px;
}

.payment-summary {
  border-radius: 4px;
  margin-bottom: 20px;
  
}

.payment-summary p {
  margin: 5px 0;
  font-size: 14px;
  color: #555;
}

.payment-summary span {
  font-weight: bold;
  color: #333;
  float: right;
  margin-right: 55%;
}


/* --- Edit Order Modal Specifics --- */
.edit-modal {
  width: 600px;
}
.edit-modal textarea {
  min-height: 80px;
}
.save-close-btn {
  background-color: #4A90E2;
}

/* --- View Order Modal Specifics --- */
.modal-overlay1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content1 {
  /* background-color: var(--white); */
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 700px;
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
  background-color: #F0F3FF;
}

.modal-header1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #8C8FA7;
}

.order-header-info {
  display: flex;
  justify-content: space-between;
  
}

.order-no{
  display: flex;
  justify-content: flex-start;
  background-color: #F9FAFF;
  padding: 10px 10px;
  width: 48%;
  border-radius: 4px;
  margin-bottom: 20px;
}

.transportation{
  display: flex;
  justify-content: flex-start;
  background-color: #F9FAFF;
  padding: 10px 10px;
  width: 48%;
  border-radius: 4px;
  margin-bottom: 20px;
}

.order-header-info label {
  font-weight: bold;
  
  color: #333;
} 

.order-header-info span {
  font-weight: 500;
  color: #232859;
}

.info-section {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #F9FAFF;
  border: 1px solid #faf8f8;
  border-radius: 4px;
}

.info-section h5 {
  color: #232859;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px dashed #4a90e233;
  padding-bottom: 5px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px 20px;
  gap: 20px 20px;
}

.info-item {
  font-size: 14px;
}

.info-item label {
  font-weight: 500;
  color: #666;
  display: block;
  margin-bottom: 10px;
}

.info-item span {
  color: #333;
}

.payment-grid {
  grid-template-columns: repeat(3, 1fr);
}



.image-info {
  display: flex;
  gap: 107px;
  border: none;
  padding: 10px 0;
}

.image-info img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 5px;
}

/* --- Cancel Modal Specifics --- */

.modal-content4{
  background-color: #ffffff;
  background-color: var(--white);
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px; /* Standard modal width */
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
}

.modal-header4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #8C8FA7;
  border-width: 100%;
}

.cancel-modal {
  width: 350px;
  text-align: center;
  padding: 0;
}

.cancel-header {
  margin-bottom: 20px;
  justify-content: center;
  padding: 20px 0 0;
}

.cancel-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #f05454;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fef0f0;
  margin-bottom: 20px;
}

.cancel-body {
  padding: 10px 20px 20px;
}

.cancel-body h4 {
  font-size: 18px;
  margin-bottom: 5px;
}

.cancel-body p {
  font-size: 14px;
  color: #777;
  margin: 0;
}

.cancel-footer {
  border-top: none;
  justify-content: center;
  gap: 15px;
  padding: 0 20px 20px;
}

.no-btn {
  padding: 10px 55px;
  background-color: white;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  margin-right: 10px;
}

.no-btn:hover{
  background-color: #ece5e5;
}

.yes-btn:hover{
  background-color: #e90606;
}

.yes-btn {
  padding: 10px 55px;
  background-color: #f05454; /* Red color for Yes/Cancel */
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
}


/* subcategory */


/* --- Sub Category Page Specific Styles --- */


.sub-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sub-category-header h3 {
  margin: 0;
  font-size: 24px;
  color: #333;
}





.breadcrumbs span {
  font-weight: bold;
  color: #333;
}

.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding: 20px;
}

.search-box1 input {
  padding: 10px 5px;
  background-color: #EBEBEB;
  border-left: 1px solid #EBEBEB;
  border: 1px solid #EBEBEB;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 250px;
  font-size: 14px;
}

.search-box2 input {
  border: 1px solid #7E6F6F;
  border-radius: 12px;
  padding: 7px 10px;
  flex-grow: 1;
  font-weight: 300;
  font-size: 20px;
  outline: none;
  background-color: #E8F2FA;
}

.sea{
  background: #EBEBEB;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-bottom: 11px;
  padding-top: 8px;
  padding-left: 9px;
  cursor: pointer;
  color: #000;
}

.action-buttons .btn {
  /* padding: 10px 40px; */
  width: 162px;
  height: 40px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
  transition: background-color 0.2s;
}

.action-buttons .btn-primary {
  background-color: #007bff;
  color: white;
}

.action-buttons .btn-primary:hover {
  background-color: #0056b3;
}

.action-buttons .btn-secondary {
  background-color: #5dc43e;
  color: white;
}

.action-buttons .btn-secondary:hover {
  background-color: #5dc43e;
}

.table-responsive {
  /* overflow-x: auto; */
  background-color: #E8F2FA;
  /* border-radius: 10px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.sub-category-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #E8F2FA;
  /* border-radius: 10px; */
  /* overflow: hidden;  */
}

.sub-category-table th,
.sub-category-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #333;
}

.sub-category-table thead th {
  background-color: #B86F32; /* Brownish-orange from image */
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.sub-category-table tbody tr:nth-child(even) {
  background-color: #E3ECFF; /* Light grey for even rows */
}

.sub-category-table tbody tr:hover {
  background-color: #E3ECFF;
}

.table-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
}

/* Status Toggle Switch */


.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white; /* White background for the main track */
    transition: 0.4s;
    border: 1px solid #ccc;
}

.slider:before {
  position: absolute;
    content: "";
    height: 19px; /* Slightly smaller than the track height */
    width: 19px;
    left: -1px;
    bottom: 2px;
    background-color: #dc3545; /* Red color for OFF state (Requirement 3) */
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
  background-color: white; /* Track remains white */
    border-color: #28a745;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
  width: 40px;
}

.slider.round:before {
  border-radius: 50%;
}


/* Action Dropdown Styling */
.action-column {
  position: relative;
}

.action-dropdown-container {
  position: relative;
  display: inline-block;
}

.action-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.action-button:hover {
  background-color: #f0f0f0;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  min-width: 120px;
  z-index: 1000;
  top: 100%; /* Position below the button */
  margin-top: 5px; /* Small gap */
  overflow: hidden; /* Ensures rounded corners apply to content */
}

.dropdown-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 15px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
}

.dropdown-menu button svg {
  margin-right: 8px;
  color: #6c757d;
}

.dropdown-menu button:hover {
  background-color: #f5f5f5;
}


/* Pagination Styling */
.pagination {
  display: flex;
  justify-content: center; /* Align to right as in image */
  align-items: center;
  margin-top: 20px;

  gap: 5px;
}

.pagination button {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: #333;
  transition: all 0.2s;
}

.pagination button:hover:not(.active) {
  background-color: #f0f0f0;
}

.pagination button.active {
  background-color: #aa6c43; /* Matching header brown */
  color: white;
  border-color: #d6b59f;
}

.pagination span {
  padding: 8px 10px;
  color: #6c757d;
}

/* --- Modal Styling (General) --- */


.modal-header h4 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

/* .close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6c757d;
} */

/* .modal-body {
  padding: 20px;
} */

.modal-body h3{
  margin-bottom: 10px;
}


.modal-footer.justify-content-center {
  justify-content: center;
}

/* --- Edit Sub Category Modal Specific --- */
.large-modal {
  width: 600px; /* Adjust width as per image */
  max-width: 90%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns */
  grid-gap: 1px 20px;
  gap: 1px 20px;
  margin-bottom: 1px;
}

.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    gap: 20px;
  
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 13px;
  color: #6c757d;
  padding-bottom: 5px;
  font-weight: 500;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
}

.file-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f8f8f8;
}

.file-input-hidden {
  display: none;
}

.file-input-button {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-right: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  flex-shrink: 0;
}

.file-name {
  padding: 10px;
  font-size: 14px;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

/* .image-preview-container {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px dashed #ddd;
  padding: 10px;
  border-radius: 5px;
} */

.image-preview {
  max-width: 150px; /* As seen in image */
  max-height: 100px;
  height: auto;
  object-fit: contain;
  display: block;

}

.form-group.full-width {
  grid-column: span 2;
}

.btn-save-close {
  background-color: #007bff;
  color: white;
  padding: 10px 50px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-save-close:hover {
  background-color: #0056b3;
}


/* --- Delete Confirmation Modal Specific --- */
.small-modal {
  width: 400px; /* Adjust width as per image */
  max-width: 90%;
  text-align: center;
}


.delete-icon::before {
  color: #000;
  font-weight: bold;
  font-size: 1rem;
}

.delete-icon {
  background-color: #F44336;
  background-color: var(--danger-color);
  color: #ffffff;
  color: var(--white);
}



.delete-icon-container {
  margin-bottom: 15px;
  margin-left: 145px;
  width: 69px;
  border-radius: 100px;
  border: 12px solid #FEF3F2;
}

.delete-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #FEE4E2; /* Light red background */
  color: #D92D20; /* Darker red for the '!' */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;

}

.delete-icon::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%; 
}

@keyframes pulse {
  0% {
      transform: scale(0.8);
      opacity: 1;
  }
  100% {
      transform: scale(1.2);
      opacity: 0;
  }
}


.small-modal h4 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.small-modal p {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 20px;
}

.btn-cancel {
  background-color: #f0f0f0;
  color: #333;
  padding: 10px 38px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
  transition: background-color 0.2s;
}

.btn-cancel:hover {
  background-color: #e0e0e0;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
  padding: 10px 38px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-delete:hover {
  background-color: #c82333;
  color: white;
}

/* add-subcategory */

/* --- Add New Sub-category Page Styles --- */

.page-header-container {
  /* Style for "Add New Sub-category" and breadcrumbs */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 10px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.breadcrumbs {
  font-size: 17x;
  color: #407BFF;
}

.breadcrumbs .current-page-link {
  font-weight: bold;
  color: #333;
}

/* Main Container Box */
.add-sub-category-form-box {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  position: relative; /* Needed for positioning Category List button */
  margin-top: 50px;
}

/* Category List Button */
.category-list-btn {
  position: absolute;
  width: 165px;
  height: 46px;
  right: 60px;
  background-color: #007bff; /* Blue color */
  color: white;
  padding: 8px 25px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}


.category-list-btn:hover {
  background-color: #0056b3;
}


/* .new-sub-category-form {
  margin-top: 20px;
} */

/* Row of 3 items (Image, Name, Category) */
.form-group-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  /* margin-bottom: 20px; */
}

/* Form Group Styling (reused from previous response, but adjusted for this layout) */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.form-group1-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

/* Form Group Styling (reused from previous response, but adjusted for this layout) */
.form-group1 {
  display: flex;
  flex-direction: column;
}

.form-group1 input,
.form-group1 select,
.form-group1 textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  background-color: #E8F2FA;
}


.description-group {
  grid-column: span 3; 
  margin-bottom: 20px;
}

/* File Input Styling for Upload Image button */
.file-input-control {
  display: flex;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.file-input-button.upload-btn {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s;
  text-align: center;
}

.file-input-button.upload-btn:hover {
  background-color: #e0e0e0;
}


/* Save/Cancel Buttons at the bottom */
.form-actions-bottom {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  /* Aligned to the left as per the image */
}

.btn-save-brown1 {
  background-color: #B86F32; /* Brownish color from table header */
  color: white;
  /* padding: 60px 50px; */
  width: 150px;
  height: 46px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}



.btn-cancel-white1 {
  background-color: white;
  color: #6c757d;
  width: 150px;
  height: 46px;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

.btn-cancel-white:hover {
  background-color: #f8f8f8;
}

/* Re-use full-width class for form groups that span all columns if needed */
.full-width {
  width: 100%;
}

/* Product Management */

/* --- Product Management Page Specific Styles --- */
.product-management-header {
  /* Reuses .page-header-container styling if applied to it */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 10px;
}

.product-management-header h3 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

/* Table Controls (Search and Filters) */
.product-controls {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 15px; /* Gap between search/filters and buttons */
}





.search-and-filters {
  padding-left: 20px;
  display: flex;
  gap: 10px; /* Gap between search and filter dropdowns */
  flex-wrap: wrap;
  align-items: center;
}




/* Product Management Table Styling */
.product-management-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #E8F2FA;
  /* border-radius: 10px; */
  /* overflow: hidden; */
}

.product-management-table th,
.product-management-table td {
  padding: 12px 10px; /* Slightly less padding for more columns */
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 13px; /* Slightly smaller font for more data */
  color: #333;
}

.product-management-table thead th {
  background-color: #B86F32; /* Brownish-orange from image */
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.product-management-table tbody tr:nth-child(even) {
  background-color: #E3ECFF;
}

.product-management-table tbody tr:hover {
  background-color:#E3ECFF;
}

/* --- Edit Product Modal Specific Styles --- */
.product-form-grid {
  grid-template-columns: repeat(2, 1fr); 
}

.product-list-btn {
  position: absolute;

  right: 60px;
  background-color: #007bff; /* Blue color */
  color: white;
  padding: 8px 25px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-product-form-box {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  
  padding: 30px;
  position: relative;
}




.new-product-form textarea {
  width: 100%;
  box-sizing: border-box;
}


/* Staff Management-css */

/* --- Staff Management Table Styles --- */
.staff-management-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.table-head{
  background-color: #0056b3;
}



/* Inherits most styles from .sub-category-table, only adding role badge */
.staff-role-badge {
  padding: 10px 20px;
  color: white;
  background-color: #D06A03;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;

}

.bg-blue { background-color: #0380D0; padding: 8px 13px;}
.bg-red { background-color: #C83E3E; padding: 8px 30px;}
.bg-orange { background-color: #D06A03; padding: 8px 17px;} /* Sub-Admin has dark text */
.bg-green {  padding: 8px 17px;} 

.staff-controls {
  align-items: flex-end; /* Align filter boxes and buttons to the bottom */
}

.staff-filters {
  gap: 15px;
  align-items: flex-end;
}

.staff-search-box {
  display: flex;
  align-items: center;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  padding-right: 10px;
}

.staff-search-box input {
  border: none;
  padding: 10px 15px;
  width: 280px; /* Wider search box */
  box-sizing: border-box;
}



/* --- Edit Staff Modal Styles --- */
.medium-modal {
  width: 550px; 
  max-width: 90%;
}

.staff-edit-grid {
  grid-template-columns: 50% 50%;
  gap: 20px;
}

/* --- Add New Staff Page Styles --- */

.add-staff-form-box {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-top: 5px solid #007bff;
  padding: 30px;
  position: relative;
}

.new-staff-form{
  margin-top: 65px;
}


.staff-list-btn {
  position: absolute;
  width: 160px;
  margin-top: 40px;
  height: 40px;
  right: 30px;
  background-color: #007bff; /* Blue color */
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}



.staff-list-btn:hover {
  background-color: #3c7ad9;
}

.staff-add-grid.three-cols {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.permissions-status-section {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.permissions-box {
  flex-grow: 1;
}

.permissions-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 15px;
}



.permission-checkbox {
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.status-group {
  width: 250px; 
  flex-shrink: 0;
}

/* Staff Save/Cancel Buttons */
.form-actions-bottom.staff-buttons {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  text-align: left;
  gap: 10px;
}

.btn-save-blue {
  background-color: #4a7dff; /* Blue from image */
  color: white;
  padding: 10px 40px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

.btn-cancel-grey {
  background-color: #ccc; /* Grey from image */
  color: #333;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

.staff-management-table thead th {
  background-color: #d6b59f; /* Brownish-orange from image */
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.staff-management-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.staff-management-table tbody tr:hover {
  background-color: #f0f0f0;
}

.staff-management-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.staff-management-table th,
.staff-management-table td {
  padding: 12px 10px; /* Slightly less padding for more columns */
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 13px; /* Slightly smaller font for more data */
  color: #333;
}


/* Customer-list-css */

.table-heading{
  background-color: #F3D3B3;
}

.page-container {
  padding-top: 20px;
}

/* Header & Breadcrumb */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.breadcrumb {
  color: #007bff; /* Blue color for links/breadcrumbs */
  font-size: 20px;
}

.breadcrumb .current-page {
  color: #333;
  font-weight: bold;
}


/* Top Row (Search & Buttons) */
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
  padding-left: 10px;
  padding-bottom: 15px;

}
.top-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;

}

/* Search Box */
.search-box1 {
  display: flex;
  width: 290x;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: #007bff;
}

.search-box1 input {
  border: none;
  padding: 10px 15px;
  flex-grow: 1;
  font-size: 14px;
  outline: none;
  background-color: #EBEBEB;
}

.search-btn {
  background-color: #F3D3B3;
  border: none;
  border-radius: 2px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
}

/* Action Buttons */
.action-buttons button {
  margin-left: 10px;
  padding-left: 35px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}

.action-buttons .icon {
  margin-right: 5px;
  font-size: 16px;
  line-height: 1;
}

.btn-primary {

  background-color: #007bff; /* Blue */
  color: white;
}

.btn-success {
  background-color: #2DCB6C; /* Green */
  color: white;
}

/* Data Table */
/* .data-table-container {
  overflow-x: auto;
} */

table {
  width: 100%;
  border-collapse: collapse;
  overflow-y: scroll; 
}

table th, table td {
  font-size: 12px;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #beb7b7;
}





/* Actions Column & Dropdown */
.actions-cell {
  width: 100px;
  text-align: center;
  position: relative;
}

.action-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0 5px;
}

.action-btn:hover {
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #D9D9D9;
  border-radius: 100px;
}

.action-btn1 {
  background: none;
  border: none;
  
  cursor: pointer;
  padding: 0 5px;
}

.action-button:hover {
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #D9D9D9;
  border-radius: 100px;
}

.action-dropdown1:hover {
  padding-top: 2px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #D9D9D9;
  border-radius: 100px;
}

.action-dropdown1 {
  display: inline-block;
}

.action-dropdown {
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  right: 20px;
  top: 35px;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  z-index: 10;
  min-width: 100px;
  padding: 5px 0;
}

.dropdown-menu a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  color: #000;
  cursor: pointer;
  font-size: 14px;
}




/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  padding: 20px ;
  margin-top: 20px;
}

.pagination a {
  color: #333;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  margin: 0 4px;
  border-radius: 4px;
  cursor: pointer;
}

.pagination a.active {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
}

.pagination a:not(.active):hover {
  background-color: #f1f1f1;
}

.pagination span {
  padding: 8px 0;
  margin: 0 4px;
  color: #999;
}

/* Form Group Layout (Used by both Modal and Add Page) */
.form-row {
  display: flex;
  gap: 20px;
 
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-group.half {
  flex: 1 1;
}

.form-group.full {
  width: 100%;
}


.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%; /* Make input fill the flex container */
  box-sizing: border-box; /* Include padding/border in element's total width/height */
}

.form-group textarea {
  resize: vertical;
}

/* Add New Customer Page specific footer */
.form-footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 20px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

/* New add customer css */


/* --- Modal Styles (Edit Customer) --- */





.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #8C8FA7;
  border-width: 100%;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #161616;
}

/* .modal-body {
  padding: 10px 0;
} */

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid #8C8FA7;
 
}

.modal-footer.justify-content-center {
  justify-content: center;
}

.btn-save {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: left;
    gap: 10px;
  }
  
  .btn-save-page{
    background-color: #ac6a44; /* Blue from image */
    color: white;
    padding: 10px 30px;
    border: none;
    margin-right: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
  }
  

/* Style for the Address field in the modal to match the image */
.modal-content .form-group textarea {
  min-height: 80px; /* Adjust height to match the image */
}

/* Top-selling-product-css */

/* --- Sales Page Specific Styles --- */

.sales-title {
  /* Ensures the SALES title is smaller and aligned like in the image */
  font-size: 27px; 
  font-weight: 600;
  
}

.sales-top-row {
  display: flex;
  padding: 20px;

  justify-content: space-between;
  align-items: flex-start; /* Align export button to the top right */
  margin-bottom: 20px;
}

.sales-filters {
  display: flex;
  flex-direction: column;
}

.sales-subtitle {
  
  font-weight: 600;
  color: #444;
  margin-bottom: 15px;
}

.sales-subtitle span{
  
  font-weight: 100;
  color: #444;
  margin-bottom: 15px;
}

.filter-buttons-group {
  display: flex;
  gap: 10px;
}

.btn-filter, .btn-report {
  padding-left: 35px;
  border: 1px solid #4FA9F0;
  border-radius: 10px;
  background-color: #E8F2FA;
  color: #333;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 160px;
  height: 40px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}

.btn-report {
  background-color: #8BCBFF; /* Blue background for Run Report button */
  color: black;
  border-color: #4FA9F0;
}

.btn-report .icon{
  margin-right: 10px;
}

.export-btn {
  /* Overrides the existing .btn-success margin from .action-buttons */
  margin-left: 0; 
}

.btn-data-range{
  padding: 10px 20px;
  border: 1px solid #4FA9F0;
  border-radius: 4px;
  background-color: #f8f8f8;
  color: #333;
  font-weight: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Data Range Dropdown Specific Styling */
.data-range-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle .arrow-down {
  margin-left: 5px;
  font-size: 10px;
}

.dropdown-menu.range-menu {
  /* Position the dropdown directly below the button */
  top: 100%; 
  left: 0;
  min-width: 140px;
  text-align: left;
}

/* Sales Table Specific Styles */
.sales-table th {
  /* Header background color from the image (dark orange/brown) */
  background-color: #B86F32; 
  color: white;
  font-weight: 500;
  text-transform: none;
  font-size: 14px;
}

.sales-table tbody tr {
  /* Default row background color */
  background-color: #fff; 
}

.sales-table tbody tr:nth-child(odd) {
  /* Lighter blue background for odd rows to create the stripe */
  background-color: #E8F2FA; 
}

.sales-table tbody tr:nth-child(even) {
  /* White background for even rows */
  background-color: #E3ECFF; 
}

.sales-table .total-row {
  /* Style for the "Total" row to make it distinct */
  font-weight: bold;
  background-color: #E3ECFF !important; /* A noticeable color for the total row */
  border-top: 2px solid #a0522d;
}

/* staff-management */


/* TOP BAR CONTROLS */
.staff-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.left-controls {
  display: flex;
  align-items: center;
}

.right-controls {
  display: flex;
  align-items: center;
  gap: 17px;
}

/* SEARCH */
.staff-search-box {
  display: flex;
  border: 1px solid #fdfcfc;
  border-radius: 4px;
}

.staff-search-box input {
  padding: 8px;
  border: none;
  outline: none;
  width: 250px;
}

.search-icon-btn {
  background: #F3D3B3;
  border: none;
  border-radius: 5px;
  margin: 6px;
  padding: 8px 10px;
  cursor: pointer;
  color: #000;
}



/* SELECT ROLE DROPDOWN */
.staff-role-dropdown {
  margin-bottom: 15px;
  margin-right: 15px;
  padding: 10px 20px;
  border: 1px solid #6B7280;
  border-radius: 4px;
  width: 200px;
  height: 40px;
  font-size: 18px;
  color: #6B7280;
}


/* ADD NEW BUTTON */
.add-new-btn {
  margin-right: 20px;
  background: #3478f6;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  width: 150px;
  height: 37px;
  font-size: 18px;
}

.add-new-btn:hover {
  background: #2567d6;
}


/* TOGGLE SWITCH */
/* EXACT SAME TOGGLE DESIGN */
.switch {
  position: relative;
  display: inline-block;
  width: 42px; /* Track width */
  height: 13px; /* Track height */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider (track) */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white; /* Track is always white */
  transition: 0.4s;
  border-radius: 34px;
  /* Default OFF state: Red Border */
  border: 1.5px solid #ef4444; /* Red */
}

/* The slider circle (thumb) */
.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Thumb size (height - 2*padding) */
  width: 20px;
  left: -1px;
  bottom: -4px;
  background-color: #ef4444; /* Default OFF state: Red circle */
  transition: 0.4s;
  border-radius: 50%;
}

/* When checked (ON state) */
input:checked + .slider {
  /* ON state: Green Border */
  border: 1.5px solid #22c55e; /* Green */
}

/* Move and change color of thumb when checked */
input:checked + .slider:before {
  /* ON state: Green circle */
  background-color: #22c55e;
  transform: translateX(20px); /* Move thumb to the right */
}

/* FOOTER */
.page-footer {
  border-radius: 15px;
  height: 70px;
  background-color: #E8F2FA;
  display: flex;
  align-items: center;
  padding: 20px;
  margin-top: 15px;
  justify-content: space-between;
}

/* .page-footer p{
  align-item
} */

/* Product page  */



/* src/components/AddProductPage.css */

/* --- Base Layout & Containers --- */

/* --- Buttons --- */



.btn-primary.product-list-btn {
  background-color: #3b82f6; /* Blue button from the image */
  color: white;
  border-color: #3b82f6;
  width: 170px;
  height: 40px;
}

.btn-primary.product-list-btn:hover {
  background-color: #2563eb;
}

.btn-save-brown {
  background-color: #bc8d59; /* Brown color from the Save button */
  color: white;
  border-color: #bc8d59;
  margin-right: 10px;
  width: 10%;
}

.btn-save-brown:hover {
  background-color: #a37a4c;
}

.btn-cancel-white {
  background-color: #ffffff;
  color: #333;
  border-color: #ccc;
  width: 10%;
}

.btn-cancel-white:hover {
  background-color: #f0f0f0;
}

.btn-add-more-image {
  background: none;
  border: 1px solid #007bff;
  color: #3b82f6;
  cursor: pointer;
  font-weight: 500;
  padding: 8px 18px;
  padding-right: 18px;
  text-align: left;
}

/* --- Form Grids & Grouping --- */

.new-product-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-group label {
  font-weight: 500;
  color: #555;
  margin-bottom: 5px;
}

/* 2-column grid for basic input rows */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

/* 5-column grid for product specification row */
.form-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

/* 3-column grid for checkbox row */
.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

/* Specific styling for the image and description row */
.image-desc-row {
  display: flex;
  gap: 20px;
  align-items: start; /* Align items to the start of their grid cells */
}




/* Inputs, Selects, and Textareas */



/* --- Checkbox Groups --- */

.system span{
  font-size: 14px;
  margin-bottom: 20px;
}

.checkbox-group-container {
  margin-top: 10px;
  /* border: 1px solid #ddd; */
  
  
}

.checkbox-group-title {
  font-size: 15px;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 10px !important;
}

.checkbox-options-grid {
  padding-left: 15px;
  padding-top: 3px;
  border-radius: 4px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  background-color: #fcfcfc;
}

.checkbox-option {
  
  display: flex;
  align-items: center;
}

.checkbox-option input[type="checkbox"] {
  margin-right: 8px;
  width: auto;
  cursor: pointer;
}

.checkbox-option label {
  margin: 0;
  font-weight: 400;
  color: #555;
  cursor: pointer;
}

.select-all-option {
  padding-top: 1px;
  margin-top: 4px;
  
}

.select-all-option label{
  margin-left: 6px;
  
}

/* .status-group{
  width: 300px;
  display: grid;
} */



/* --- Image Upload & Description --- */

.product-image-upload-group {
  /* Ensures the label, input, and button are correctly stacked */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align contents to the left */
  width: 32.4%;
}

.image-upload-area {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  width: 100%; /* Take full width of its column */
  height: 40px; /* Match height of other inputs */
  margin-bottom: 5px; /* Space between input and '+ Add More Image' button */
}

.file-input-hidden {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.file-input-button.upload-btn {
  background-color: #ddd;
  
  color: #333;
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  font-weight: 500;
  transition: background-color 0.2s;
  flex-shrink: 0;
  line-height: 1; /* Adjust line height to fit button */
  height: 100%; /* Fill the height of the container */
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-input-button1.upload-btn {
  background-color: #ddd;
  color: #333;
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  font-weight: 500;
  transition: background-color 0.2s;
  flex-shrink: 0;
  line-height: 1; /* Adjust line height to fit button */
  height: 110%; /* Fill the height of the container */
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-input-button.upload-btn:hover {
  background-color: #ccc;
}

.file-input-display {
  padding: 0 10px;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1; /* Allow display text to take available space */
}

.product-image-upload-group .btn-add-more-image {
  font-size: 14px;
  margin-top: 5px; /* Adjust spacing as needed */
  padding-left: 0; /* Remove default button padding */
}

.form-group2.description-group textarea {
  min-height: 100%; /* Retain min-height for description */
  width: 100%;
  resize: vertical;
}

.form-group.description-group textarea {
  min-height: 100%; /* Retain min-height for description */
  width: 100%;
  resize: vertical;
}
/* --- Bottom Row and Actions --- */

.bottom-row-grid {
  grid-template-columns: 1fr 2fr;
  align-items: flex-start;
}

.form-actions-bottom {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  grid-column: 2 / 3;
}

/* .status-group {
  max-width: 300px;
  grid-column: 1 / 2;
} */


/* General cleanup to ensure form elements fit */
.form-group input, .form-group select, .form-group textarea {
  height: 40px; /* Standard height for most fields */
}
.form-group textarea {
  height: auto; /* Override for textarea */
}

/* setting css */

/* --- Variables & Global Styles --- */
:root {
  --primary-color: #A0522D; /* Sienna/Brown for headers/buttons */
  --light-bg: #f4f7fa; /* Light blue/grey background */
  --white: #ffffff;
  --text-color: #333;
  --border-color: #e0e0e0;
  --success-color: #4CAF50;
  --danger-color: #F44336;
  --admin-color: #E57373; /* Reddish for Admin */
  --super-admin-color: #64B5F6; /* Bluish for Super Admin */
  --sub-admin-color: #FFB74D; /* Orange for Sub-Admin */
  --modal-bg: rgba(0, 0, 0, 0.5); /* Overlay for modals */
}


/* --- Header Section (SETTINGS / Dashboard) --- */
.header-settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #ffffff;
  background-color: var(--white);
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); */
}

.settings-title {
  font-weight: 600;
  font-size: 24px;
}

.dashboard-link {
  font-size: 24px;
  color: #666;
  font-weight: 500;
}

.dashboard-link a {
  color: #407BFF;
  text-decoration: none;
}

/* --- Main Settings Container --- */
.settings-container {
  margin: 30px auto;
  background-color: #ffffff;
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- Tab Navigation --- */
.tabs1 {
  display: flex;
  background-color: #EBEBEB; /* Light background for the tab row */
  border-radius: 8px;
  width: -webkit-fit-content;
  width: fit-content;

}

.tab-button1 {
  font-weight: bold;
  background-color: transparent;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  color: #333;
  color: var(--text-color);
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}



.tab-button1.active {
  font-weight: bold;
  background-color: #ffffff;
  background-color: var(--white); /* White background for the active tab content */
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  margin: 4px; /* To overlap the bottom border */
  border-radius: 8px;
  
}


/* --- Tab Content Styling --- */
.tab-content-container {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--border-color); /* To match the border of the active tab */
  margin-top: -1px; /* To hide the tabs container bottom border */
  height: auto;
}

.tab-content h2 {
  padding-left: 20px;
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 20px;
}

.tab-content h1 {
  padding-left: 10px;
  font-size: 1.5em;
  margin-top: 0;
  
}

/* --- Form and Add Buttons --- */
.add-new-btn1 {
  background-color: #4A90E2; /* Blue button for Add New */
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: 0.9em;
  transition: background-color 0.2s;
  margin-bottom: 20px; /* Space below button */
}

.add-new-btn1:hover {
  background-color: #3A7CD6;
}

.add-form {
  display: flex;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.short{
  margin-bottom: 50px;
 
}

.add-form .small-label {
  font-size: 16px;
  color: #677788;
  padding-bottom: 14px;
  font-weight:600 ;
  margin-right: 10px;
  min-width: 100px; /* Give labels consistent width */
}

.add-form input[type="text"] {
  margin-top: 13px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  flex-grow: 1; /* Allow input to take available space */
  max-width: 350px;
  margin-left: -149px;
  margin-right: 10px;
  font-size: 0.9em;
}

.add-btn {
  margin-top: 8px;
  background-color: #A0522D;
  background-color: var(--primary-color);
  color: #ffffff;
  color: var(--white);
  border: none;
  width: 12%;
  align-items: center;
  height: 40px;
  /* padding: 10px 50px; */
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s;
}

.add-btn:hover {
  background-color: #8B4513; /* Darker brown */
}

/* --- Order Number Specific Styles --- */
.order-number-form {
  display: flex;
  gap: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.order-number-form .form-group {
  flex: 1 1;
  min-width: 200px; /* Ensure inputs don't get too small */
  display: flex;
  flex-direction: column;
}

.order-number-form label {
  font-size: 16px;
  font-weight: 500;
  color: #677788;
  margin-bottom: 5px;
}

.order-number-form input {
  padding: 8px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.9em;
}

.save-btn {
  margin-left: 20px;
  background-color: #B86F32;
  color: #ffffff;
  color: var(--white);
  border: none;
  padding: 10px 50px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s;
}

.save-btn:hover {
  background-color: #8B4513;
}

/* --- Table Styling --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  
}

.data-table thead tr {
  background-color: #B86F32;
  color: #ffffff;
  color: var(--white);
  text-align: left;
}

.data-table th, .data-table td {
  padding: 12px 15px;
  vertical-align: middle; 
}



/* Flag Icon for Country Table */
.flag-icon {
  width: 50px;
  height: auto;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Status Toggle/Switch Component */
.status-toggle {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.status-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  background-color: var(--white);
  border-radius: 50%;
  transition: 0.2s;
}

.status-toggle.active {
  background-color: #4CAF50;
  background-color: var(--success-color);
}

.status-toggle.active::after {
  transform: translateX(20px);
}

/* Action Icons */
.action-icon {
  width: 34px;
  height: 34px;
  text-align: center;
  line-height: 24px;
  border-radius: 50%;
  cursor: pointer;
}



.delete-icon1 {
  background-color: #F44336;
  background-color: var(--danger-color);
  color: #ffffff;
  color: var(--white);
}
.delete-icon1::before {
  color: #000;
  font-weight: bold;
  font-size: 1rem;
}


.delete-icon1 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #F44336;
  background-color: var(--danger-color); /* Light red background */
  color: #fff; /* Darker red for the '!' */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  border: 2px solid #dc3545; /* Red border */
}

.delete-icon1::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%; 
}

/* Role Management Tags */
.role-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  color: #ffffff;
  color: var(--white);
  font-weight: bold;
  font-size: 0.85em;
  min-width: 80px; /* Give tags a consistent minimum width */
  text-align: center;
}

.role-tag.admin { background-color: #E57373; background-color: var(--admin-color); }
.role-tag.super-admin { background-color: #64B5F6; background-color: var(--super-admin-color); }
.role-tag.sub-admin { background-color: #FFB74D; background-color: var(--sub-admin-color); }

/* Color Management Dots */
.color-dot-blue-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid #407BFF; /* Add border to make custom dots visible */
  background-color: #407BFF;
}

.color-dot-gold-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid #D3B334; /* Add border to make custom dots visible */
  background-color: #D3B334;
}


/* Dynamic color dots for new entries - Example, adjust as needed */
.color-dot.dot-random { background-color: #260644; /* BlueViolet */ }
/* Add more classes for specific colors if you have a predefined palette */


/* --- MODAL STYLES --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: var(--modal-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #ffffff;
  background-color: var(--white);
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 670px; /* Standard modal width */
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
}

.modal-content2 {
  background-color: #ffffff;
  background-color: var(--white);
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px; /* Standard modal width */
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
}

.modal-overlay3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: var(--modal-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content3 {
  background-color: #ffffff;
  background-color: var(--white);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 590px; /* Standard modal width */
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
}

.modal-content3 h3 {
  margin-top: 0;
  /* margin-bottom: 20px; */
  font-size: 1.3em;
  color: #333;
  color: var(--text-color);
}

.modal-content3 p {
  margin-bottom: 25px;
  line-height: 0.5;
  color: #050505;
}

.modal-body3 h3{
  margin-bottom: 10px;
}

.modal-header3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #8C8FA7;
}

.form-group11 {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.form-group11 label {
  font-size: 13px;
  color: #6c757d;
  padding-bottom: 5px;
  font-weight: 500;
}

.form-group11 input[type="text"],
.form-group11 select,
.form-group11 textarea {
  padding: 7px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.form-group11 textarea {
  resize: vertical;
}



.modal-content h3 {
  margin-top: 0;
  /* margin-bottom: 20px; */
  font-size: 1.3em;
  color: #333;
  color: var(--text-color);
}

.modal-content p {
  margin-bottom: 25px;
  line-height: 0.5;
  color: #050505;
}

.modal-actions {
  display: flex;
  justify-content: flex-end; /* Align buttons to the right */
  gap: 10px;
  margin-top: 20px; /* Space above buttons */
}

.modal-cancel-btn, .modal-delete-btn {
  padding: 10px 40px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s ease;
}

.modal-cancel-btn {
  background-color: #e0e0e0;
  color: #333;
  color: var(--text-color);
}

.modal-cancel-btn:hover {
  background-color: #ccc;
}

.modal-delete-btn {
  background-color: #F44336;
  background-color: var(--danger-color);
  color: #ffffff;
  color: var(--white);
  margin-left: 10px;
}

.modal-delete-btn:hover {
  background-color: #d32f2f;
}

/* --- Add Country Modal Specific Styles --- */
.add-country-modal .form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.add-country-modal .form-group label {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 5px;
}

.add-country-modal .form-group input[type="text"],
.add-country-modal .form-group select {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 0.95em;
  width: 100%; /* Full width within modal */
  box-sizing: border-box; /* Include padding/border in width */
}

.file-upload-control {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background-color: #f9f9f9;
  overflow: hidden;
}

.choose-file-btn {
  background-color: #e0e0e0;
  color: #333;
  color: var(--text-color);
  padding: 10px 15px;
  border: none;
  border-right: 1px solid #e0e0e0;
  border-right: 1px solid var(--border-color);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.9em;
  transition: background-color 0.2s;
}

.choose-file-btn:hover {
  background-color: #d0d0d0;
}

.file-name-display {
  flex-grow: 1;
  padding: 10px 10px;
  font-size: 0.9em;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-preview {
  margin-top: 15px;
  width: 100px; /* Fixed size for preview */
  height: 100px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #f0f0f0;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Placeholder for image preview */
.image-preview:empty::before {
  content: "📷"; /* or similar icon */
  font-size: 2em;
  color: #bbb;
}

.add-country-modal .save-btn {
  width: 100%; /* Make save button full width in modal */
  padding: 12px;
  margin-top: 20px;
}

.add-form1 {
  display: flex;
  
  align-items: center;
  margin-bottom: 40px;
}

.add-form1 .small-label {
  font-size: 16px;
  color: #677788;

  font-weight:600 ;
  margin-right: 10px;
  min-width: 100px; /* Give labels consistent width */
}

.add-form1 input[type="text"] {
  margin-top: 13px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  flex-grow: 1; /* Allow input to take available space */
  max-width: 350px;
  margin-left: -115px;
  margin-right: 10px;
  font-size: 0.9em;
}

.add-form2 {
  display: flex;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.add-form2 .small-label {
  padding-bottom: 10px;
  font-size: 16px;
  color: #677788;
  font-weight:600 ;
  margin-right: 10px;
  min-width: 100px; /* Give labels consistent width */
}

.add-form2 input[type="text"] {
  margin-top: 13px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  flex-grow: 1; /* Allow input to take available space */
  max-width: 350px;
  margin-left: -120px;
  margin-right: 10px;
  font-size: 0.9em;
}

.btn {
  
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
  border: none;
 
}

.btn1 {
  font-size: 16px;
  /* padding: 8px 40px; */
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s;
  border: none;
  border-radius: 10px;
}

.status-group select {
  width: 365px;
  padding: 10px;
  margin-top: 8px;
  /* margin-bottom: 78px; */
  height: 37px;
  border: 1px solid #bcc0c5;
  border-radius: 6px;
  background-color: #E8F2FA;
  /* margin-left: -65px;*/
} 



.status-group1 select {
  width: 353px;
  padding: 10px;
  border: 1px solid #bcc0c5;
  border-radius: 6px;
  
  
}

/* Upload Image Box */
 .upload-image-box {
  display: flex;
  flex-direction: column;
  /* margin-top: 10px; */
}

.upload-image-box label {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
  /* margin-left: -452px; */
}


.upload-dropzone {
  width: 365px;
  height: 40px;
  /* margin-left: -452px; */
  border: 2px dashed #2D88FF;
  border-radius: 8px;
  background-color: #D7E6FF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

/* Hidden Input */
.upload-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Text in center */
.upload-text {
  color: #2D88FF;
  font-size: 14px;
  pointer-events: none;
}


.status-group1 {
  width: 250px; /* Give status a fixed width */
  flex-shrink: 0;
}

.required {
  color: rgb(8, 6, 6);
  font-weight: bold;
}

.imggg{
  width: 10%;
  height: 10%;
} */

/* add new- customer css edit version */

/* Section Styling */
.customer-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.customer-section h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 25px;
  margin-top: 20px;
  color: #2f3b52;
  /* no bottom border */
}

/* Grid Layout */
.customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 30px;
  gap: 30px;
  margin-top: 10px;
}

.customer-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.customer-group label {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.full-width {
  grid-column: 1 / -1;
}

/* Inputs */
.customer-input,
.customer-name-input,
.customer-title-dropdown {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  /* outline: none; */
}

.customer-input:focus,
.customer-name-input:focus {
  border-color: #2563eb;
}

/* Customer Name Dropdown + Input Combo */
.customer-name-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.customer-title-dropdown {
  background-color: #b86b35;
  color: white;
  border: 1px solid #b86b35;
  border-radius: 6px 0 0 6px;
  padding: 8px;
  font-size: 14px;
  height: 40px;
  width: 70px;
}

.customer-name-input {
  flex: 1 1;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 8px 10px;
  height: 40px;
}

.large-input {
  height: 60px; /* Taller flat/house no. field */
}

/* Buttons */
.customer-button-row {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 15px;
}

.customer-save-btn {
  background-color: #d88c49;
  color: white;
  border: none;
  padding: 10px 38px;
  border-radius: 6px;
  cursor: pointer;
}

.customer-cancel-btn {
  background-color: #ccc;
  color: #333;
  border: none;
  padding: 10px 38px;
  border-radius: 6px;
  cursor: pointer;
}

/* add new-staff css edit version */

.staff-page-container {
  background-color: #f2f8ff;
  padding: 25px 30px;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
}

.staff-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.staff-page-title {
  font-size: 20px;
  font-weight: 600;
  color: #2a2a2a;
}



/* Form Styling */
.staff-form-container {
  background: #e9f1fb;
  border-radius: 8px;
  padding: 25px 30px;
}

.staff-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 18px 22px;
  gap: 18px 22px;
  margin-bottom: 20px;
}

.staff-form-grid.two-cols {
  grid-template-columns: repeat(2, 1fr);
}

.staff-form-group {
  display: flex;
  flex-direction: column;
}

.staff-form-group label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #222;
}

.staff-form-group input,
.staff-form-group select {
  border: 1px solid #cfd8e3;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
  outline: none;
  background: white;
}

.staff-form-group input:focus,
.staff-form-group select:focus {
  border-color: #4b91f1;
}

.form-group1 label{
  margin-bottom: 5px;
}

.staff-form-group1 {
  display: flex;
  flex-direction: column;
}

.staff-form-group1 label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #222;
}

.staff-form-group1 input,
.staff-form-group1 select {
  border: 1px solid #cfd8e3;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
  outline: none;
  background: white;
}

.staff-form-group1 input:focus,
.staff-form-group1 select:focus {
  border-color: #4b91f1;
}



/* Permissions Section */
.staff-permissions-section {
  margin: 25px 0;
}

.permissions-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px 100px;
  gap: 10px 100px;
  margin-top: 8px;
  width: 50%;
}

.permissions-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.permissions-item input {
  display: none;
}

.custom-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid #9ca3af;
  border-radius: 4px;
  background: white;
  position: relative;
  transition: 0.3s;
}

.permissions-item input:checked + .custom-checkbox {
  background-color: #22c55e;
  border-color: #22c55e;
}

.permissions-item input:checked + .custom-checkbox::after {
  content: "✔";
  position: absolute;
  color: white;
  font-size: 12px;
  left: 2px;
  top: -2px;
}

.permission-text {
  font-size: 14px;
  color: #333;
}

/* Buttons */
.staff-btn-row {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.staff-btn-save {
  background-color: #234ab7;
  color: white;
  border: none;
  padding: 8px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.staff-btn-cancel {
  background-color: #c7cad1;
  color: #222;
  border: none;
  padding: 8px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}


/* Add category modal pop up page css  */

.header-category{
  margin-top: 20px;
  font-size: 20px;
  margin-bottom: 20px;
}

.add-category-modal {
  background: #fff;
  width: 600px;
  padding: 20px;
  border-radius: 10px;
}

.category-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.category-table th {
  background: #a8682a;
  color: #fff;
  padding: 8px;
}

.category-table td {
  border: 1px solid #ddd;
  text-align: center;
  padding: 6px;
}

.btn-edit {
  background-color: white;
  color: #487CEF;
  border: 1px solid #487CEF;
  padding: 4px 10px;
  margin-right: 6px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit:hover{
  background-color: #0093FF;
  color: white;
}

.btn-delete {
  background-color: white;
  color: #FF0000;
  border: 1px solid #FF0000;
  padding: 8px 34px;
  border-radius: 4px;
}

.btn-delete1 {
  background-color: #fff;
  color: red;
  padding: 4px 8px;
  border: 1px solid #FF0000;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-delete1:hover {
  background-color: #c82333;
  color: white;
}



.button-group{
  float: right;
  display: flex;
  align-items: center;
  gap: 17px;
}

.add-btn-category{
  padding: 14px 35px;
  cursor: pointer;
  color: #fff;
  background-color: #595959;
  margin-bottom: 20px;
  border: 1px solid #595959;
  border-radius: 10px;
}

.sub-category-btn2{
  padding: 14px 35px;
  color: #fff;
  border: 1px solid #407BFF;
  margin-bottom: 20px;
  
  background-color: #407BFF;
  border-radius: 10px;
}

.sub-category-btn{
  padding: 14px 35px;
  color: #fff;
  border: 1px solid #407BFF;
  margin-bottom: 20px;
  margin-top: 10px;
  background-color: #407BFF;
  border-radius: 10px;
}

.sub-category-btn1{
  /* padding: 14px 35px; */
  width: 30%;
  font-size: 14px;
  height: 43px;
  margin-top: 10px;
  justify-content: center;
  color: #fff;
  border: 1px solid #407BFF;
  margin-bottom: 20px;
  background-color: #407BFF;
  border-radius: 10px;
}

.form-row1 {
  display: flex;
  gap: 20px;
  /* margin-bottom: 15px; */
}

.form-group6 {
  display: flex;
  flex-direction: column;
}

.form-group6 label {
  font-size: 13px;
  color: #6c757d;
  padding-bottom: 5px;
  font-weight: 500;
}


.form-group6 input[type="text"],
.form-group6 select,
.form-group6 textarea {
  padding: 10px;
  width: 257px;
  height: 42px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}


/* profilepage css */

.profile-page {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  min-height: 100vh;
  padding: 20px;
}

.header {
  padding: 10px 0;
  text-align: right;
  font-size: 14px;
  margin-bottom: 20px;
}

.dashboard-link {
  color: #000;
  text-decoration: none;
}

.profile-link {
  color: #555;
}

.profile-container {
  background-color: #F9FAFF;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 75px;
  max-width:1450px;
  margin-left: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-picture-section {
  position: absolute;
  top: -70px; /* Adjust to move it above the card */
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* background-color: #8C8FA7;  */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-picture {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 9px solid #8C8FA7;
}

.edit-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #699836;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-wrapper {
  margin-top: 55px; /* Space for the profile picture */
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 30px; /* Space between the two cards */
}

.card {
  flex: 1 1;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  font-weight: normal;
  border-bottom: 2px solid #D5D6DD;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box; /* Include padding in width */
}

.form-group input::placeholder {
  color: #aaa;
}

.save-button {
  background-color: #4c8bf5; /* Blue color */
  color: white;
  padding: 13px 10px;
  width: 30%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 15px;
  transition: background-color 0.3s ease;
}

.save-button:hover {
  background-color: #357ae8;
}

/* Specific styles for the links */
.header .dashboard-link,
.header .profile-link {
  color: #007bff;
  text-decoration: none;
}

.header .profile-link {
  color: #6c757d; /* Lighter grey for the current page */
}

.cancel-btn{
  /* padding: 14px 35px; */
  width: 20%;
  height: 43px;
  justify-content: center;
  color: #000;
  border: 1px solid #407BFF;
  margin-bottom: 20px;
  margin-left: 2%;
  background-color: #fff;
  border-radius: 10px;
}


.filter-dropdown {
  width: 180px;
  height: 38px;
  padding: 8px 35px 8px 12px;   /* More padding-right for the arrow */
  border: 1px solid #2F2E2E;
  border-radius: 6px;
  background-color: #fff;
  margin-bottom: 2%;
  font-size: 16px;
  font-style: medium;
  font-weight: 500;
  color: #000;
  appearance: none;            /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  /* background-image: url("/icons/arrow-down.svg") */
  background-repeat: no-repeat;
  background-position: right 10px center; /* moves icon close to the border */
  background-size: 14px;
}

/* Hover */
.filter-dropdown:hover {
  border-color: #a9b4bf;
}

/* Container spacing */
.search-and-filters {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}


/* Wrapper */
.phone-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Country Code Dropdown */
.country-code-dropdown {
  width: 80px;
  padding: 8px;
  border: 1px solid #cfd6de;
  border-radius: 6px;
  background-color: #f5f9fc;
  font-size: 14px;
  outline: none;
}

/* Phone Input */
.phone-input {
  flex: 1 1;
  padding: 8px;
  border: 1px solid #cfd6de;
  border-radius: 6px;
  font-size: 14px;
}


/* role-management css */

.new-header{
  display: flex;
  justify-content: space-between;
}


/* customer edit css */

.edit-customer-modal {
  width: 600px;
  border-radius: 12px;
  padding: 15px;
  background: #fff;
}

.edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 18px;
  gap: 18px;
}

.form-group10 {
  display: flex;
  flex-direction: column;
}

.address-group {
  grid-column: span 2;
}

.form-group10 label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.form-group10 input,
.form-group10 select,
.form-group10 textarea {
  padding: 10px 12px;
  /* border-radius: 6px; */
  border: 1px solid #dcdcdc;
  font-size: 14px;
}

textarea {
  resize: none;
}

.phone-field {
  display: flex;
  border: 1px solid #dcdcdc;
  /* border-radius: 8px; */
  overflow: hidden;
  background: #fff;
}

.phone-code-box select {
  background: #b26b35;
  color: white;
  padding: 10px 12px;
  border: none;
  outline: none;
  font-weight: 600;
  cursor: pointer;
}

.phone-input-box {
  flex: 1 1;
  border: none;
  outline: none;
  padding: 12px;
  font-size: 14px;
}

.save-btn {
  background: #B86F32;
  color: white;
  padding: 10px 50px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 15px;
}

.preview-container {
  margin-top: 10px;
  width: 120px;
  height: 120px;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 8px;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.permission-modal {
  width: 500px;
  background: white;
  padding: 20px;
  border-radius: 10px;
}

.permissions-grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px 14px;
  gap: 12px 14px;
  padding: 15px 0;
}

.permission-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
}

.save-btn {
  background: #1a73e8;
  color: white;
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
}

.permission1{
  background-color: #007bff;
}




.permission-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: var(--modal-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.permission-modal {
  background-color: #ffffff;
  background-color: var(--white);
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 600px; /* Standard modal width */
  position: relative;
  max-height: 100vh;
  overflow-y: auto;
}

.permission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding-bottom: 10px;
  border-bottom: 1px solid #8C8FA7;
  border-width: 100%;
}

.permissions-grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px 45px;
  gap: 12px 45px;
  padding: 15px 0;
}

.permission-header h3{
  color: #000;
  margin-bottom: 1px;
}

.permission-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
}

.save-btn-per {
  background: #1a73e8;
  color: white;
  padding: 10px 48px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.permission1{
  background-color: #007bff;
}

.close-btn-per {
  padding: 3px 12px;
  background-color: #fff;
 
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}


:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: -webkit-fit-content;
  width: fit-content;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: 320px;
  width: var(--toastify-toast-width);
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 14px;
  padding: var(--toastify-toast-padding);
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  box-shadow: var(--toastify-toast-shadow);
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: 320px;
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: auto;
  right: initial;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}