body {
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

.form-section {
  display: flex;
  justify-content: center;
  background: #f9f9f9;
  padding: 50px 0;
}
.form-section .container {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 8px;
}
.form-section .container .row .col-md-6 h2 {
  font-family: "Noto Nastaliq Urdu", serif;
  margin-bottom: 30px;
  text-align: center;
  font-size: 50px;
}
.form-section .container .row .col-md-6 form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 20px;
}
.form-section .container .row .col-md-6 form .form-group {
  margin-bottom: 15px;
}
.form-section .container .row .col-md-6 form .form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 25px;
}
.form-section .container .row .col-md-6 form .form-group input[type=text],
.form-section .container .row .col-md-6 form .form-group input[type=number],
.form-section .container .row .col-md-6 form .form-group input[type=date],
.form-section .container .row .col-md-6 form .form-group input[type=checkbox],
.form-section .container .row .col-md-6 form .form-group select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.form-section .container .row .col-md-6 form .form-group {
  /* Style for the checkbox container and alignment */
}
.form-section .container .row .col-md-6 form .form-group .clear-amount {
  display: flex;
  align-items: center;
  margin-top: 40px;
}
.form-section .container .row .col-md-6 form .form-group input[type=checkbox] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.5rem;
  border: 0.25rem solid #D2AF2D;
  border-radius: 0.25rem;
  cursor: pointer;
  position: relative;
}
.form-section .container .row .col-md-6 form .form-group input[type=checkbox]:checked {
  background-color: #D2AF2D; /* Add background fill color when checked */
}
.form-section .container .row .col-md-6 form .form-group input[type=checkbox]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  clip-path: polygon(14% 44%, 0% 55%, 36% 100%, 100% 10%, 84% 0%, 33% 75%);
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.form-section .container .row .col-md-6 form .form-group input[type=checkbox]:checked::before {
  background-color: #333;
  transform: translate(-50%, -50%) scale(1);
}
.form-section .container .row .col-md-6 form .form-group input[type=checkbox]:hover {
  border-color: #D2AF2D;
}
.form-section .container .row .col-md-6 form .form-group .error-message {
  color: red;
  font-size: 12px;
  margin: 10px 0;
}
.form-section .container .row .col-md-6 form .form-group #date-error, .form-section .container .row .col-md-6 form .form-group #quantity-error, .form-section .container .row .col-md-6 form .form-group #phone-error, .form-section .container .row .col-md-6 form .form-group #worker-name-error, .form-section .container .row .col-md-6 form .form-group #brand-name-error, .form-section .container .row .col-md-6 form .form-group #lot-number-error, .form-section .container .row .col-md-6 form .form-group #category-error, .form-section .container .row .col-md-6 form .form-group #machine-error {
  display: none;
}
.form-section .container .row .col-md-6 form .urduBtn {
  font-family: "Noto Nastaliq Urdu", serif !important;
  font-size: 20px;
}
.form-section .container .row .col-md-6 form button {
  background-color: #333;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.form-section .container .row .col-md-6 form button:hover {
  background-color: #C8B12F;
}
.form-section .container .row .col-md-6 form .selected-sizes-container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.form-section .container .row .col-md-6 form .size-tag {
  background-color: #e9e9e9;
  padding: 5px 10px;
  border-radius: 20px;
  margin: 5px;
  display: inline-block;
  font-size: 14px;
  position: relative;
}
.form-section .container .row .col-md-6 form .remove-size {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
  color: red;
}

/* Basic Styles */
.navbar-custom {
  width: 100%;
  background-color: #343a40;
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.col-logo {
  flex: 1;
}

.col-hamburger {
  display: none;
  flex: 0;
  text-align: right;
}

.col-nav {
  display: flex;
  flex: 2;
  justify-content: flex-end;
}

.nav-menu {
  display: flex;
  gap: 15px;
}

.nav-link {
  text-decoration: none;
  color: #fff !important;
  font-size: 16px;
  padding: 10px 15px !important;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: black;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .col-hamburger {
    display: block;
    cursor: pointer;
    flex: 1;
  }
  /* Initially hide the menu */
  .col-nav {
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #343a40;
    padding: 20px;
    position: absolute;
    top: 70px; /* Adjust to your header height */
    left: 0;
    z-index: 999;
    transition: all 3s ease, padding 3s ease; /* Smooth transition */
  }
  /* When 'show' is toggled, display the menu */
  .col-nav.show {
    display: flex; /* Show the menu */
  }
  .hamburger-menu {
    font-size: 24px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
  }
}
.client_bill {
  background: #f9f9f9;
  padding: 50px 0;
}
.client_bill .container {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 8px;
}
.client_bill .container .row .col-md-6 h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
  font-family: "Arial", sans-serif;
  font-weight: 700;
}
.client_bill .container .row .col-md-6 form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: "Arial", sans-serif;
}
.client_bill .container .row .col-md-6 form label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #555;
}
.client_bill .container .row .col-md-6 form input[type=text],
.client_bill .container .row .col-md-6 form input[type=date],
.client_bill .container .row .col-md-6 form input[type=number], .client_bill .container .row .col-md-6 form select {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f4f4f4;
  transition: all 0.3s ease;
}
.client_bill .container .row .col-md-6 form input[type=text]:focus,
.client_bill .container .row .col-md-6 form input[type=date]:focus,
.client_bill .container .row .col-md-6 form input[type=number]:focus, .client_bill .container .row .col-md-6 form select:focus {
  border-color: #C8B12F;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  background-color: #fff;
}
.client_bill .container .row .col-md-6 form .button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.client_bill .container .row .col-md-6 form .button-row button {
  width: 45%;
  padding: 10px 20px;
  font-size: 16px;
}
.client_bill .container .row .col-md-6 form .addnew-btn .add-new {
  width: 100%;
  margin-top: 20px;
}
.client_bill .container .row .col-md-6 .selected-sizes-container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.client_bill .container .row .col-md-6 .size-tag {
  background-color: #e9e9e9;
  padding: 5px 10px;
  border-radius: 20px;
  margin: 5px;
  display: inline-block;
  font-size: 14px;
  position: relative;
}
.client_bill .container .row .col-md-6 .remove-size {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
  color: red;
}

#invoice {
  position: relative;
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 30px;
  background-color: #f9f9f9;
}
#invoice .deer-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.05;
}

.employee_bill tr td, .employee_bill tr th {
  font-size: 35px;
}

.invoice-header {
  padding: 20px;
}
.invoice-header .invoice-logo {
  text-align: center;
}
.invoice-header .invoice-logo img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.invoice-header .phone-num {
  text-align: center;
}
.invoice-header .phone-num p {
  font-family: "Arial", sans-serif;
  font-size: 30px !important;
  color: black;
  margin-bottom: 0 !important;
  font-weight: 700;
}
.invoice-header .phone-num p .ph {
  color: black;
  font-weight: 500;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
table th, table td, table tr {
  border: 1px solid #333;
}
table th, table td, table tr {
  text-align: left;
  font-size: 20px;
}
table th {
  background-color: #f2f2f2 !important;
  font-weight: bold;
}
table td {
  background-color: #fff;
}

.invoice-details .bold {
  font-weight: 600 !important;
}
.invoice-details .bold span {
  font-size: 25px !important;
}

h4 {
  text-align: right;
  margin-top: 20px;
  font-weight: bold;
}

/* Payments Section Styling */
.payments-section {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 10px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.payments, .paid {
  width: 48%; /* Make both payments and paid sections take equal space */
}

.payments h5, .paid h5 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #333;
}

.payments h5 span, .paid h5 span {
  font-weight: bold;
}

.payments-section h5 {
  display: flex;
  justify-content: space-between;
}

.payments-section h5 span {
  min-width: 100px;
  text-align: right;
}

button {
  font-family: "Arial", sans-serif;
  background-color: #343A40;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}
button:hover {
  background-color: #C8B12F;
}

.date-bill {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.billTotal {
  font-size: 70px !important;
}

.date-bill .date {
  text-align: left; /* Keep the date aligned to the left */
}

.date-bill .bill-number {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Center the bill number */
  text-align: center;
}

@media print {
  /* Ensure the background color of the logo is visible when printing */
  /* Set the page size to 6 inches by 8 inches */
  @page {
    size: 6in 8in; /* Set the size to 6 inches by 8 inches */
    margin: 10px; /* Remove any default margin */
  }
  /* Style the invoice container for print */
  #invoice {
    width: 6in;
    height: 8in;
    padding: 10px;
    box-sizing: border-box;
  }
  .invoice-details .bold {
    font-size: 25px !important;
    font-weight: 600 !important;
  }
  .invoice-details .bold span {
    font-size: 25px !important;
  }
  body {
    margin: 0; /* Remove body margin */
    padding: 0; /* Remove body padding */
    overflow: hidden; /* Prevent overflow */
  }
  .employee_invoice {
    font-weight: normal;
    font-style: normal;
  }
  .employee_invoice .employee_bill #invoiceBody tr td, .employee_invoice .employee_bill #invoiceBody tr th {
    font-size: 45px !important;
  }
  .client_invoice .client_bill #invoiceBody tr td {
    font-size: 40px !important;
    font-weight: 800;
  }
  .deer-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.05;
  }
  /* Set the page size for printing */
  .print-header p {
    margin-bottom: 8px !important;
  }
  .shop-address {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    border-radius: 50px;
  }
  .shop-address .address {
    font-family: "Poppins", sans-serif !important;
    margin: 0 auto;
    color: black;
    font-weight: 500 !important;
    padding: 8px;
    font-size: 25px;
  }
  /* Include background color in the print */
  * {
    -webkit-print-color-adjust: exact; /* For Chrome/Safari */
    print-color-adjust: exact; /* For other browsers */
  }
  a[href]:after {
    content: none !important;
  }
  /* Optionally, hide the footer and other parts not necessary for print */
  footer, .no-print {
    display: none !important;
  }
  /* Other specific styles for print, such as hiding elements */
  button {
    display: none; /* Hide buttons during print */
  }
}
@media only screen and (max-width: 480px) {
  .client_bill .container .row .col-md-6 form .button-row {
    flex-direction: column;
  }
  .client_bill .container .row .col-md-6 form .button-row button {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 560px) {
  .client_bill .container .row .col-md-6 form .button-row {
    flex-direction: column;
  }
  .client_bill .container .row .col-md-6 form .button-row button {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .client_bill .container .row .col-md-6 form .button-row {
    flex-direction: column;
  }
  .client_bill .container .row .col-md-6 form .button-row button {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media only screen and (max-width: 990px) {
  .client_bill .container .row .col-md-6 form .button-row {
    flex-direction: column;
  }
  .client_bill .container .row .col-md-6 form .button-row button {
    width: 100%;
    margin-bottom: 10px;
  }
}
.col-md-6 #invoice .shop-address {
  margin: 0 auto;
  text-align: center !important;
  width: 100%;
}
.col-md-6 #invoice .shop-address .address {
  padding: 8px;
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  color: black;
  border-radius: 50px;
  font-size: 30px;
}

@media only screen and (max-width: 480px) {
  #invoice .row .col-md-12 .shop-address {
    width: 100%;
  }
  #invoice .row .col-md-12 .shop-address p {
    font-size: 12px;
  }
}
@media only screen and (max-width: 560px) {
  #invoice .row .col-md-12 .shop-address {
    width: 100%;
  }
  #invoice .row .col-md-12 .shop-address p {
    font-size: 12px;
  }
}
@media only screen and (max-width: 767px) {
  #invoice .row .col-md-12 .shop-address {
    width: 100%;
  }
  #invoice .row .col-md-12 .shop-address p {
    font-size: 12px;
  }
}
@media only screen and (max-width: 990px) {
  #invoice .row .col-md-12 .shop-address {
    width: 100%;
  }
  #invoice .row .col-md-12 .shop-address p {
    font-size: 12px;
  }
}
.client_history {
  margin-top: 30px;
}
.client_history .container .row .col-md-12 h2 {
  font-family: "Poppins", sans-serif;
  text-align: center;
  margin-bottom: 30px;
}
.client_history .container .row .col-md-12 .search-bar {
  font-family: "Poppins", sans-serif;
  margin-bottom: 10px;
}
.client_history .container .row .col-md-12 .search-bar label {
  font-weight: 600;
  display: inline !important;
}
.client_history .container .row .col-md-12 .search-bar input {
  width: 30%;
  display: inline !important;
}
.client_history .container .row .col-md-12 .table {
  font-family: "Poppins", sans-serif;
}
.client_history .container .row .col-md-12 .table thead tr th {
  background-color: #C8B12F !important;
}
.client_history .container .row .col-md-12 .table tbody .machine {
  font-family: "Noto Nastaliq Urdu", serif;
}
.client_history .container .row .col-md-12 .table tbody .machine tr td .edit {
  background-color: #333 !important;
  border: none !important;
}
.client_history .container .row .col-md-12 .table tbody .machine tr td .edit:hover {
  background-color: #C8B12F !important;
}
.client_history .container .row .col-md-12 .load-morebtn {
  text-align: center;
  margin-bottom: 30px;
}

@media only screen and (max-width: 480px) {
  .client_history .container .row .col-md-12 .search-bar input {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .client_history .container .row .col-md-12 .search-bar input {
    width: 100%;
  }
}
body {
  font-family: "Poppins", sans-serif !important;
}

.login-form .container-login100 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #f2f2f2;
}
.login-form .wrap-login100 {
  width: 100%;
  max-width: 400px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 50px 40px;
}
.login-form .login100-form .login100-form-title {
  display: block;
  font-size: 30px;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}
.login-form .login100-form .wrap-input100 {
  position: relative;
  margin-bottom: 25px;
}
.login-form .login100-form .wrap-input100 .input100 {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #f7f7f7;
}
.login-form .login100-form .wrap-input100 .input100:focus {
  outline: #D0B02A auto;
  background-color: white;
}
.login-form .login100-form .wrap-input100 .focus-input100 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease;
}
.login-form .login100-form .wrap-input100.validate-input:focus-within .focus-input100 {
  visibility: visible;
  transform: scaleX(1);
}
.login-form .login100-form .container-login100-form-btn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.login-form .login100-form .container-login100-form-btn .login100-form-btn {
  width: 100%;
  padding: 15px;
  background-color: #343A40;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.login-form .login100-form .container-login100-form-btn .login100-form-btn:hover {
  background-color: #D0B02A;
}

.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper .input100 {
  width: 100%;
  padding-right: 40px; /* Add space for the toggle button */
}

.password-toggle {
  position: absolute;
  top: 45%;
  right: 0; /* Position from the right */
  background: transparent !important;
  border: none;
  cursor: pointer;
}

.password-toggle i {
  font-size: 16px;
  color: #888; /* Adjust color as needed */
}

.container .add-worker {
  text-align: center;
  margin: 30px 0;
}
.container #workerForm {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: "Poppins", sans-serif;
}
.container #workerForm label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #555;
}
.container #workerForm select {
  font-family: "Noto Nastaliq Urdu", serif;
}
.container #workerForm .machine {
  font-family: "Noto Nastaliq Urdu", serif;
}
.container #workerForm input[type=text],
.container #workerForm input[type=tel], .container #workerForm select {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f4f4f4;
  transition: all 0.3s ease;
}
.container #workerForm input[type=text]:focus,
.container #workerForm input[type=tel]:focus, .container #workerForm select:focus {
  border-color: #C8B12F;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  background-color: #fff;
}
.container #workerForm .button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.container #workerForm .button-row button {
  width: 45%;
  padding: 10px 20px;
  font-size: 16px;
}
.container .workers-list {
  text-align: center;
  margin: 30px 0;
}
.container .search-bar {
  font-family: "Poppins", sans-serif;
  margin-bottom: 10px;
}
.container .search-bar label {
  font-weight: 600;
  display: inline !important;
}
.container .search-bar input {
  width: 30%;
  display: inline !important;
}
.container .workers-table {
  padding-bottom: 50px;
}
.container .workers-table table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px !important;
}
.container .workers-table table thead tr th {
  background-color: #C8B12F !important;
  padding: 10px;
}
.container .workers-table table th, .container .workers-table table td, .container .workers-table table tr {
  border: 1px solid #333;
}
.container .workers-table table th, .container .workers-table table td, .container .workers-table table tr {
  text-align: left;
}
.container .workers-table table td {
  background-color: #fff;
  padding: 10px;
}
.container .machine {
  font-family: "Noto Nastaliq Urdu", serif;
}

.stock-overview .container .row .col-md-4 .stock-block, .stock-overview .container .row .col-md-6 .stock-block {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin: 10px 0;
  background-color: #C8B12F;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.stock-overview .container .row .col-md-4 .stock-block h3, .stock-overview .container .row .col-md-6 .stock-block h3 {
  margin-bottom: 10px;
  color: white;
}
.stock-overview .container .row .col-md-4 .stock-block p, .stock-overview .container .row .col-md-6 .stock-block p {
  font-size: 20px;
  font-weight: 600 !important;
  color: white;
}
.stock-overview .container .row .col-md-4 .stock-block .stock-logo, .stock-overview .container .row .col-md-6 .stock-block .stock-logo {
  max-width: 100px;
  height: auto;
  margin-bottom: 15px;
}
.stock-overview .container .row .col-md-4 .purple, .stock-overview .container .row .col-md-6 .purple {
  background-color: #B68097;
}
.stock-overview .container .row .col-md-4 .orange, .stock-overview .container .row .col-md-6 .orange {
  background-color: #FF8359;
}
.stock-overview .container .row .col-md-4 .blue, .stock-overview .container .row .col-md-6 .blue {
  background-color: #7789EE;
}
.stock-overview .container .row .col-md-4 .green, .stock-overview .container .row .col-md-6 .green {
  background-color: #A0BE6F;
}
.stock-overview .container .row .col-md-4 .zinc, .stock-overview .container .row .col-md-6 .zinc {
  background-color: #2BBECC;
}
.stock-overview .container .row .col-md-4 .red, .stock-overview .container .row .col-md-6 .red {
  background-color: #E72546;
}
.stock-overview .container .row .col-md-4 .skyblue, .stock-overview .container .row .col-md-6 .skyblue {
  background-color: #1270E3;
}
.stock-overview .container .row .col-md-4 .yellow, .stock-overview .container .row .col-md-6 .yellow {
  background-color: #F7B832;
}

#editStockModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.edit {
  background-color: #333 !important;
  border: none !important;
}
.edit:hover {
  background-color: #C8B12F !important;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: unfold 1.5s ease forwards; /* Use unfolding animation */
  transform: scale(0); /* Start scaled down */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
}

#editStockForm {
  display: flex;
  flex-direction: column;
}
#editStockForm label {
  margin-bottom: 5px;
  font-weight: bold;
}
#editStockForm input {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
#editStockForm button {
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
#editStockForm button:hover {
  background-color: #C8B12F;
}

/* Unfolding animation */
@keyframes unfold {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.05); /* Slightly enlarge to create a 'bounce' effect */
    opacity: 0.5; /* Intermediate opacity for a smooth effect */
  }
  100% {
    transform: scale(1); /* Final size */
    opacity: 1; /* Fully opaque */
  }
}
#editWorkerModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease;
  animation: unfold 1.5s ease forwards; /* Use unfolding animation */
  transform: scale(0); /* Start scaled down */
}

.edit {
  background-color: #333 !important;
  border: none !important;
}
.edit:hover {
  background-color: #C8B12F !important;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
}

#editWorkerForm {
  display: flex;
  flex-direction: column;
}
#editWorkerForm label {
  margin-bottom: 5px;
  font-weight: bold;
}
#editWorkerForm input {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
#editWorkerForm button {
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
#editWorkerForm button:hover {
  background-color: #C8B12F;
}

/* Unfolding animation */
@keyframes unfold {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.05); /* Slightly enlarge to create a 'bounce' effect */
    opacity: 0.5; /* Intermediate opacity for a smooth effect */
  }
  100% {
    transform: scale(1); /* Final size */
    opacity: 1; /* Fully opaque */
  }
}
/* Modal Styles */
#editPartyModal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* High z-index to overlay other content */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scrolling if needed */
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for the background */
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* Vertically center the modal */
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px; /* Rounded corners for a modern look */
  width: 80%; /* Set the width to 80% for responsiveness */
  max-width: 500px; /* Maximum width to prevent it from being too large on wide screens */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  animation: unfold 1.5s ease forwards; /* Use unfolding animation */
  transform: scale(0); /* Start scaled down */
}

/* Close button styles */
.close {
  color: #aaa;
  float: right;
  right: 0;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
}

/* Modal Form Styles */
#editPartyForm {
  display: flex;
  flex-direction: column;
}
#editPartyForm label {
  margin-bottom: 5px;
  font-weight: bold;
}
#editPartyForm input {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
#editPartyForm button {
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
#editPartyForm button:hover {
  background-color: #C8B12F;
}

/* Unfolding animation */
@keyframes unfold {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.05); /* Slightly enlarge to create a 'bounce' effect */
    opacity: 0.5; /* Intermediate opacity for a smooth effect */
  }
  100% {
    transform: scale(1); /* Final size */
    opacity: 1; /* Fully opaque */
  }
}
.stock_out_bill {
  background: #f9f9f9;
  padding: 50px 0;
}
.stock_out_bill .container {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 8px;
}
.stock_out_bill .container .row .col-md-6 h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
  font-family: "Noto Nastaliq Urdu", serif;
}
.stock_out_bill .container .row .col-md-6 form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: "Noto Nastaliq Urdu", serif;
}
.stock_out_bill .container .row .col-md-6 form label {
  display: block;
  margin-bottom: 10px;
  font-size: 25px;
  font-weight: bold;
  color: #555;
}
.stock_out_bill .container .row .col-md-6 form input[type=text],
.stock_out_bill .container .row .col-md-6 form input[type=date],
.stock_out_bill .container .row .col-md-6 form input[type=number], .stock_out_bill .container .row .col-md-6 form select {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f4f4f4;
  transition: all 0.3s ease;
}
.stock_out_bill .container .row .col-md-6 form input[type=text]:focus,
.stock_out_bill .container .row .col-md-6 form input[type=date]:focus,
.stock_out_bill .container .row .col-md-6 form input[type=number]:focus, .stock_out_bill .container .row .col-md-6 form select:focus {
  border-color: #C8B12F;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  background-color: #fff;
}
.stock_out_bill .container .row .col-md-6 form {
  /* Hide the real input */
}
.stock_out_bill .container .row .col-md-6 form #product-image {
  display: none;
}
.stock_out_bill .container .row .col-md-6 form {
  /* Style the custom button */
}
.stock_out_bill .container .row .col-md-6 form .custom-file-upload {
  display: inline-block;
  padding: 10px 20px;
  background-color: #C8B12F;
  color: white;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.stock_out_bill .container .row .col-md-6 form .custom-file-upload:hover {
  background-color: #C8B12F;
}
.stock_out_bill .container .row .col-md-6 form .button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.stock_out_bill .container .row .col-md-6 form .button-row button {
  width: 45%;
  padding: 10px 20px;
  font-size: 16px;
  font-family: "Poppins", sans-serif !important;
}
.stock_out_bill .container .row .col-md-6 form .addnew-btn .add-new {
  width: 100%;
  margin-top: 20px;
}
.stock_out_bill .container .row .col-md-6 .selected-sizes-container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.stock_out_bill .container .row .col-md-6 .size-tag {
  background-color: #e9e9e9;
  padding: 5px 10px;
  border-radius: 20px;
  margin: 5px;
  display: inline-block;
  font-size: 14px;
  position: relative;
}
.stock_out_bill .container .row .col-md-6 .remove-size {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
  color: red;
}

.shop-address {
  margin: 0 auto;
  text-align: center !important;
  width: 100%;
}
.shop-address .address {
  padding: 8px;
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  color: black;
  border-radius: 50px;
  font-size: 30px;
}

#editStockOutModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.edit {
  background-color: #333 !important;
  border: none !important;
}
.edit:hover {
  background-color: #C8B12F !important;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: unfold 1.5s ease forwards; /* Use unfolding animation */
  transform: scale(0); /* Start scaled down */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
}

#editStockOutForm {
  display: flex;
  flex-direction: column;
}
#editStockOutForm label {
  margin-bottom: 5px;
  font-weight: bold;
}
#editStockOutForm input {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
#editStockOutForm button {
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
#editStockOutForm button:hover {
  background-color: #C8B12F;
}

/* Unfolding animation */
@keyframes unfold {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.05); /* Slightly enlarge to create a 'bounce' effect */
    opacity: 0.5; /* Intermediate opacity for a smooth effect */
  }
  100% {
    transform: scale(1); /* Final size */
    opacity: 1; /* Fully opaque */
  }
}
.advance-manage {
  display: flex;
  justify-content: center;
  background: #f9f9f9;
  padding: 50px 0;
}
.advance-manage .container {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 8px;
}
.advance-manage .container .row .col-md-12 h2 {
  font-family: "Noto Nastaliq Urdu", serif;
  margin-bottom: 30px;
  text-align: center;
  font-size: 50px;
}
.advance-manage .container .row .col-md-12 form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 20px;
}
.advance-manage .container .row .col-md-12 form .form-group {
  margin-bottom: 15px;
}
.advance-manage .container .row .col-md-12 form .form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 25px;
}
.advance-manage .container .row .col-md-12 form .form-group input[type=text],
.advance-manage .container .row .col-md-12 form .form-group input[type=number],
.advance-manage .container .row .col-md-12 form .form-group input[type=date],
.advance-manage .container .row .col-md-12 form .form-group input[type=checkbox],
.advance-manage .container .row .col-md-12 form .form-group select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.advance-manage .container .row .col-md-12 form .form-group input[type=checkbox] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.5rem;
  border: 0.25rem solid #D2AF2D;
  border-radius: 0.25rem;
  cursor: pointer;
  position: relative;
}
.advance-manage .container .row .col-md-12 form .form-group input[type=checkbox]:checked {
  background-color: #D2AF2D; /* Add background fill color when checked */
}
.advance-manage .container .row .col-md-12 form .form-group input[type=checkbox]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  clip-path: polygon(14% 44%, 0% 55%, 36% 100%, 100% 10%, 84% 0%, 33% 75%);
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}
.advance-manage .container .row .col-md-12 form .form-group input[type=checkbox]:checked::before {
  background-color: #333;
  transform: translate(-50%, -50%) scale(1);
}
.advance-manage .container .row .col-md-12 form .form-group input[type=checkbox]:hover {
  border-color: #D2AF2D;
}
.advance-manage .container .row .col-md-12 form .form-group .error-message {
  color: red;
  font-size: 12px;
  margin: 10px 0;
}
.advance-manage .container .row .col-md-12 form .form-group #date-error, .advance-manage .container .row .col-md-12 form .form-group #quantity-error, .advance-manage .container .row .col-md-12 form .form-group #phone-error, .advance-manage .container .row .col-md-12 form .form-group #worker-name-error, .advance-manage .container .row .col-md-12 form .form-group #brand-name-error, .advance-manage .container .row .col-md-12 form .form-group #lot-number-error, .advance-manage .container .row .col-md-12 form .form-group #category-error, .advance-manage .container .row .col-md-12 form .form-group #machine-error {
  display: none;
}
.advance-manage .container .row .col-md-12 form .urduBtn {
  font-family: "Noto Nastaliq Urdu", serif !important;
  font-size: 20px;
}
.advance-manage .container .row .col-md-12 form button {
  background-color: #333;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.advance-manage .container .row .col-md-12 form button:hover {
  background-color: #C8B12F;
}

#editWorkerAdvanceModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease;
  animation: unfold 1.5s ease forwards; /* Use unfolding animation */
  transform: scale(0); /* Start scaled down */
}

.edit {
  background-color: #333 !important;
  border: none !important;
}
.edit:hover {
  background-color: #C8B12F !important;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
}

#editWorkerAdvanceForm {
  display: flex;
  flex-direction: column;
}
#editWorkerAdvanceForm label {
  margin-bottom: 5px;
  font-weight: bold;
}
#editWorkerAdvanceForm input {
  margin-bottom: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
#editWorkerAdvanceForm button {
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
#editWorkerAdvanceForm button:hover {
  background-color: #C8B12F;
}

/* Unfolding animation */
@keyframes unfold {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.05); /* Slightly enlarge to create a 'bounce' effect */
    opacity: 0.5; /* Intermediate opacity for a smooth effect */
  }
  100% {
    transform: scale(1); /* Final size */
    opacity: 1; /* Fully opaque */
  }
}
@media print {
  .print-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px;
  }
  .print-row .print-col-left {
    width: 65% !important;
  }
  .print-row .print-col-right {
    width: 30% !important;
  }
  /* Optional: Prevent page break inside invoice */
  #invoice {
    page-break-inside: avoid;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #f4f6fb;
  color: #1a1d2e;
  -webkit-font-smoothing: antialiased;
}

.dashboard {
  padding: 36px 48px;
}
@media (max-width: 1024px) {
  .dashboard {
    padding: 24px 30px;
  }
}
@media (max-width: 640px) {
  .dashboard {
    padding: 18px 18px;
  }
}

.sales-overview {
  max-width: 1280px;
  margin: 0 auto;
}
.sales-overview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}
@media (max-width: 640px) {
  .sales-overview__header {
    flex-direction: column;
    align-items: flex-start;
  }
}
.sales-overview__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sales-overview__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a1d2e;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.sales-overview__subtitle {
  font-size: 0.825rem;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0.01em;
}
.sales-overview__tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
@media (max-width: 640px) {
  .sales-overview__tabs {
    width: 100%;
    justify-content: stretch;
  }
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.tab svg {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6;
}
.tab:hover:not(.tab--active) {
  background: #f3f4f6;
  color: #1a1d2e;
}
.tab:hover:not(.tab--active) svg {
  opacity: 1;
}
.tab--active {
  background: #4f6ef7;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 110, 247, 0.35);
}
.tab--active svg {
  opacity: 1;
  stroke: #ffffff;
}
.tab--active:hover {
  background: rgb(54.6086956522, 89.9048913043, 245.8913043478);
}
@media (max-width: 640px) {
  .tab {
    flex: 1;
    justify-content: center;
    padding: 7px 8px;
  }
}
@media (max-width: 420px) {
  .tab {
    font-size: 0.75rem;
    padding: 6px 6px;
  }
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media (max-width: 640px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.card {
  position: relative;
  border-radius: 16px;
  padding: 21px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: default;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
  transform: translateY(-3px);
}
.card:hover::before {
  opacity: 1;
}
.card:hover .card__icon-wrap {
  transform: scale(1.08);
}
.card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card__icon-wrap svg {
  display: block;
  flex-shrink: 0;
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.card__value {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.card__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.01em;
}
.card__footer {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
}
.card__trend svg {
  flex-shrink: 0;
}
.card__trend--up {
  color: #16a34a;
}
.card__trend--up svg {
  stroke: #16a34a;
  transform: rotate(0deg);
}
.card__trend--down {
  color: #dc2626;
}
.card__trend--down svg {
  stroke: #dc2626;
  transform: rotate(180deg);
}
.card__trend--neutral {
  color: #9ca3af;
}
.card__trend--neutral svg {
  stroke: #9ca3af;
}

.card--amber {
  background-color: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.12);
}
.card--amber .card__icon-wrap {
  background-color: #fef3c7;
  color: #d97706;
}
.card--amber .card__value {
  color: #1a1d2e;
}
.card--amber:hover {
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(245, 158, 11, 0.08);
}
.card--amber::before {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}

.card__icon-wrap--amber {
  background-color: #fef3c7;
  color: #d97706;
}

.card--blue {
  background-color: #eff6ff;
  border: 1px solid rgba(59, 130, 246, 0.12);
}
.card--blue .card__icon-wrap {
  background-color: #dbeafe;
  color: #2563eb;
}
.card--blue .card__value {
  color: #1a1d2e;
}
.card--blue:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(59, 130, 246, 0.08);
}
.card--blue::before {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.card__icon-wrap--blue {
  background-color: #dbeafe;
  color: #2563eb;
}

.card--green {
  background-color: #f0fdf4;
  border: 1px solid rgba(34, 197, 94, 0.12);
}
.card--green .card__icon-wrap {
  background-color: #dcfce7;
  color: #16a34a;
}
.card--green .card__value {
  color: #1a1d2e;
}
.card--green:hover {
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(34, 197, 94, 0.08);
}
.card--green::before {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.card__icon-wrap--green {
  background-color: #dcfce7;
  color: #16a34a;
}

.card--teal {
  background-color: #f0fdfa;
  border: 1px solid rgba(20, 184, 166, 0.12);
}
.card--teal .card__icon-wrap {
  background-color: #ccfbf1;
  color: #0d9488;
}
.card--teal .card__value {
  color: #1a1d2e;
}
.card--teal:hover {
  border-color: rgba(20, 184, 166, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(20, 184, 166, 0.08);
}
.card--teal::before {
  background: linear-gradient(90deg, #0d9488, #14b8a6);
}

.card__icon-wrap--teal {
  background-color: #ccfbf1;
  color: #0d9488;
}

.card--indigo {
  background-color: #eef2ff;
  border: 1px solid rgba(99, 102, 241, 0.12);
}
.card--indigo .card__icon-wrap {
  background-color: #e0e7ff;
  color: #4338ca;
}
.card--indigo .card__value {
  color: #1a1d2e;
}
.card--indigo:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.08);
}
.card--indigo::before {
  background: linear-gradient(90deg, #4338ca, #6366f1);
}

.card__icon-wrap--indigo {
  background-color: #e0e7ff;
  color: #4338ca;
}

.card--emerald {
  background-color: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.12);
}
.card--emerald .card__icon-wrap {
  background-color: #d1fae5;
  color: #059669;
}
.card--emerald .card__value {
  color: #1a1d2e;
}
.card--emerald:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.08);
}
.card--emerald::before {
  background: linear-gradient(90deg, #059669, #10b981);
}

.card__icon-wrap--emerald {
  background-color: #d1fae5;
  color: #059669;
}

.card--rose {
  background-color: #fff1f2;
  border: 1px solid rgba(244, 63, 94, 0.12);
}
.card--rose .card__icon-wrap {
  background-color: #ffe4e6;
  color: #e11d48;
}
.card--rose .card__value {
  color: #1a1d2e;
}
.card--rose:hover {
  border-color: rgba(244, 63, 94, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(244, 63, 94, 0.08);
}
.card--rose::before {
  background: linear-gradient(90deg, #e11d48, #f43f5e);
}

.card__icon-wrap--rose {
  background-color: #ffe4e6;
  color: #e11d48;
}

.card--sky {
  background-color: #f0f9ff;
  border: 1px solid rgba(14, 165, 233, 0.12);
}
.card--sky .card__icon-wrap {
  background-color: #e0f2fe;
  color: #0284c7;
}
.card--sky .card__value {
  color: #1a1d2e;
}
.card--sky:hover {
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(14, 165, 233, 0.08);
}
.card--sky::before {
  background: linear-gradient(90deg, #0284c7, #0ea5e9);
}

.card__icon-wrap--sky {
  background-color: #e0f2fe;
  color: #0284c7;
}/*# sourceMappingURL=main.css.map */