/* Ensure the html and body take the full viewport height html, */
body {
  height: 100%;
  margin: 0; /* Remove default margin */
}

body {
  font-family: Archivo !important;
  background-color: #fff;
}

.parentContainer {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff !important;
}

/* Green container with 5% margins on left and right */
.subContainer {
  width: 100%;
  height: 100%;
  /* background-color: green; */
}

/* Header menu styling */
.header-menu {
  width: 100%;
  height: 7%;
  background-color: #607799;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 20px;
  box-sizing: border-box;
  color: white;
  box-shadow: 0px 4px 9px #171a1f1c, 0px 0px 2px #171a1f1f;
}

/* Logo and help section styling */
.logo {
  display: flex;
  flex-basis: 50%;
  height: 100%;
  width: 100%;
  align-items: center;
}
.logo img {
  width: 15%;
  margin-right: 3%;
}

.help > span {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: #fff;
  font-family: Archivo !important;
}

.search-bar {
  width: 10%;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

.help {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  flex-basis: 50%;
}

.help i {
  font-size: 1.2rem;
  cursor: pointer;
  width: 24px;
  height: 24px;
  fill: #6f7787ff;
  color: gray;
}

/* Avatar 2 */
.avatar {
  width: 36px;
  height: 36px;
  background: #ced0f8ff;
  overflow: hidden;
  border-radius: 18px;
}
.menuContainer {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between containers */
  margin: 0 auto;
  padding: 1% 0px;
  width: 95%;
}

.step1 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.searchContainer {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Name Container */
.nameContainer,
.graphContainer,
.tableContainer {
  flex: 1; /* Make all sections equal width */
  margin: 0px 0.5%;
}
.nameContainer {
  border-bottom: 1px solid lightgray;
}

/* Styling for titles within each section */
.nameContainer h2,
.graphContainer h2,
.tableContainer h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Specific container heights to fit content */
.graphContainer {
  margin-bottom: 2%;
}

.stats-container {
  display: flex;
  gap: 100px;
}

.trend-icon {
  font-size: 14px;
  width: 73px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-left: 16px;
  border-radius: 18px;
  height: 36px;
}

.up {
  background-color: #e6f5ea;
  color: #28a745;
}

.down {
  background-color: #fbeaea;
  color: #dc3545;
}

.chart {
  width: 100% !important; /* Set the chart width to 100% of its parent */
  height: auto !important; /* Let the height adjust automatically */
  object-fit: contain; /* Ensures the chart scales properly inside the card */
}

.card {
  display: flex;
  overflow: hidden; /* Prevent overflow issues */
  width: 371px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 125px !important;
  flex-direction: row !important;
}

.cardData {
  flex-basis: 50%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  padding: 26px 15px;
  border-bottom: 0 !important;
  flex-direction: column;
}

.card-menu {
  background-color: orange;
  display: flex;
  flex-basis: 50%;
}
.card-value {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

/* .chart-container {
  flex: 1;
  max-width: 100%;
  height: 100%;
} */

.tableContainer {
  height: 400px; /* Adjust as needed for table size */
}

.nav-item {
  display: flex;
  justify-content: center;
  display: flex;
  align-items: center;
  justify-content: start !important;
  color: lightgray;
}

.nav-item > a {
  padding-left: 8px !important;
  color: gray;
}
.nav-link > i {
  font-size: 25px;
  margin-right: 10px;
}

.nav-link.active > i {
  color: blue !important;
}

.nav-justified .nav-item .nav-link {
  width: 100% !important;
  background-color: none !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  border-bottom: 4px solid blue !important;
  color: blue !important;
}

.nav-pills .nav-link {
  background: none !important;
  border: 0 !important;
  border-radius: 0px !important;
}
.nav-item + .active {
  border: 1px solid gray;
}

.transactionHeader {
  width: 100%;
  display: flex;
  margin: 10px 0px;
}

.transactionHeader > div {
  /* flex-basis: 50%; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.transactionHeader > div:last-child {
  /* justify-content: flex-end; */
}

.transactionTable {
  margin-bottom: 3%;
}
/* Textbox 3 */
.textbox {
  opacity: 1;
  position: relative;
}

.textbox input {
  width: 300px;
  height: 36px;
  padding-left: 34px;
  padding-right: 12px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  background: #f3f4f6ff;
  border-radius: 8px;
  border-width: 0px;
  outline: none;
  color: black;
}
.textbox i {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 16px;
  color: gray;
}

/* hover */
.textbox input:hover {
  color: #000;
  background: #f3f4f6ff;
}
.layoutBox {
  opacity: 1;
  position: relative;
  margin: 0px 10px;
}

.layoutBox button {
  width: 150px;
  height: 36px;
  padding-left: 20px;
  padding-right: 5px;
  font-size: 14px;
  line-height: 22px;
  background-color: green; /* Initial background color */
  border-radius: 8px;
  border-width: 0px;
  outline: none;
  color: white; /* Initial text color */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.layoutBox button:hover {
  background-color: #45b945d2; /* Hover background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow effect on hover */
  font-weight: bold;
}

.layoutBox button:active {
  transform: scale(0.9); /* Shrink the button on click */
  background-color: #2e8b2e; /* Active background color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Smaller shadow for pressed effect */
}

.layoutBox i {
  position: absolute;
  top: 10px;
  left: 11px;
  color: gray;
}

.logoutBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoutBox button {
  width: 100px;
  height: 36px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
  background: #008000;
  border-radius: 8px;
  border-width: 0px;
  outline: none;
  color: #fff;
}

.logoutBox button:hover {
  background-color: #45b945; /* Hover background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow effect on hover */
}

.logoutBox button:active {
  transform: scale(0.9); /* Shrink the button on click */
  background-color: #2e8b2e; /* Active background color */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Smaller shadow for pressed effect */
}
.transactionHeader > button {
  margin-left: 25px;
}
:root {
  --primary-color: #0d6efd; /* Example: Bootstrap primary blue */
  --primary-dark: #0b5ed7;
  --primary-light: #72a6ff;

  /* Secondary Colors */
  --secondary-color: #6c757d; /* Example: Bootstrap secondary gray */
  --secondary-dark: #565e64;
  --secondary-light: #adb5bd;

  /* Success Colors */
  --success-color: #198754;
  --success-dark: #146c43;
  --success-light: #63d69f;

  /* Danger Colors */
  --danger-color: #dc3545;
  --danger-dark: #b02a37;
  --danger-light: #f8d7da;

  /* Warning Colors */
  --warning-color: #ffc107;
  --warning-dark: #d39e00;
  --warning-light: #ffecb5;

  /* Info Colors */
  --info-color: #0dcaf0;
  --info-dark: #0b9db7;
  --info-light: #71e8ff;

  /* Light and Dark */
  --light-color: #f8f9fa;
  --dark-color: #212529;

  /* Background Colors */
  --background-light: #f5f5f5;
  --background-dark: #343a40;

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;

  /* Custom Colors */
  --custom-green: #28a745;
  --custom-yellow: #ffc107;
  --custom-blue: #007bff;
  --custom-red: #dc3545;
}

.skeleton-table {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%; /* Adjust width based on your preference */
  max-width: 1500px; /* Optional: max-width for large screens */
  height: 100%;
}

.skeleton-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 25px;
}

.skeleton-cell {
  width: 18%; /* Adjust width to make the skeleton cells fit nicely */
  height: 40px;
  background-color: #f0f0f0;
  margin-right: 10px;
  border-radius: 4px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    background-color: #f0f0f0;
  }
  50% {
    background-color: #e0e0e0;
  }
  100% {
    background-color: #f0f0f0;
  }
}
/*
#myGrid {
  display: none;
} */

/* Calender css */

.dateFields {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.dateFields label {
  font-weight: 600;
  font-size: 15px;
  color: #495057;
  margin: 0px 5px;
}

.dateFields input[type="date"] {
  width: 100%;
  transition: all 0.3s ease;
  color: #495057;
  font-size: 16px;
  padding-left: 24px;
  padding-right: 12px;
  font-size: 14px;
  height: 36px;
  font-weight: 400;
  background: #f3f4f6ff;
  border-radius: 8px;
  border-width: 0px;
  outline: none;
}

.dateFields input[type="date"]:focus {
  border-color: #5cb85c;
  box-shadow: 0px 0px 8px rgba(92, 184, 92, 0.5);
  outline: none;
}

.dateFields .btn-primary {
  background-color: #5cb85c;
  border-color: #5cb85c;
  font-weight: 600;
}

.dateFields .btn-primary:hover {
  background-color: #4cae4c;
  border-color: #4cae4c;
}

/* Swal Css */

.swalPopup {
  /* background-color: red; */
}
.swal_field {
  display: flex;
  align-items: center;
}

.swal_field > div:first-child {
  display: flex;
  align-items: center;
  flex-basis: 25%;
  /* background-color: red; */
}

/* Reduce font size for header */
.ag-header-cell-label {
  font-size: 9px; /* Adjust as needed */
}

.ag-cell {
  font-size: 10px;
  white-space: normal !important; /* Prevent truncation */
  overflow: visible !important;
  text-overflow: unset !important;
}

.bg-light-gray {
  background-color: #27663f45;
}

.bg-light-green {
  background-color: #f7e81153;
}

.bg-light-blue {
  background-color: #e9e9ff;
}

.suppliercontainer {
  margin-bottom: 1%;
}

body > div > div > div.menuContainer > div > div.suppliercontainer > span {
  width: 450px !important;
}

.grand-total-row {
  font-weight: bold;
  background-color: #f8f9fa; /* Light grey for grand total row */
}

.cardsContainer {
  display: flex;
  margin: 10px 0px;
}

.card1 {
  width: 216px;
  height: 100px;
  border: 0.5px solid lightgray;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  font-size: 12px;
  margin-right: 4%;
  background: linear-gradient(155deg, #607799, lightgray);
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}
.remainingAmtCard {
  width: 216px;
  height: 100px;
  border: 0.5px solid lightgray;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-right: 4%;
  background: linear-gradient(155deg, #607799, lightgray);
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.remainingAmtCard1 {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  font-size: 12px;
  padding-bottom: 0px;
}

.remaingAmtFooter {
  display: flex;
  justify-content: flex-end;
  /* align-items: center; */
  /* padding: 5px 11%; */
  padding-bottom: 19px;
  padding-right: 12px;
  background: green;
  border-radius: inherit;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  font-size: 12px;
  color: white;
  font-weight: bold;
  position: absolute;
  bottom: 1px;
  width: 100%;
  height: 14%;
  box-sizing: border-box;
}

.cardHeaders {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* justify-content: space-between; */
}

.card1:hover {
  background: linear-gradient(
    155deg,
    #607799,
    #1bc037
  ); /* Smooth gradient change */
  transform: scale(1.05); /* Zoom-in effect */
}

.remainingAmtCard:hover {
  background: linear-gradient(
    155deg,
    #607799,
    #1bc037
  ); /* Smooth gradient change */
  transform: scale(1.05); /* Zoom-in effect */
}

.cardHeaders span {
  flex-basis: 50%;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 3%;
  color: rgb(255, 255, 255);
}
.cardLogo {
  /* padding: 3% 4%; */
  flex-basis: 30%;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
}
.cardLogo i {
  font-size: 1.4rem;
  transition: color 0.3s ease-in-out; /* Smooth icon color change */
}

.card1:hover .cardLogo i {
  color: white !important; /* Icon color stays white on hover */
}
.card1:hover .cardLogo {
  background-color: #607799; /* Icon color stays white on hover */
}

.remainingAmtCard:hover .cardLogo i {
  color: white !important; /* Icon color stays white on hover */
}
.remainingAmtCard:hover .cardLogo {
  background-color: #607799; /* Icon color stays white on hover */
}

.card1 p {
  font-weight: bold;
  font-size: 15px;
  margin: 0;
}

.remaninigAmtBlock {
  /* display: flex; */
  margin: 0;
  font-weight: bold;
  font-size: 15px;
  margin: 0 !important;
}
.remaninigAmtBlock > p {
  margin-bottom: 0 !important;
}

.updatedBlock {
  display: flex;
  width: 100;
  width: 100%;
  height: 35%;
  justify-content: flex-end;
}

.updateContent {
  /* background: #597e8f; */
  width: 17%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: -1px 29px;
  padding-top: 1px;
  color: #3d6fbc;
  font-size: 14px;
  padding-left: 12px;
  font-weight: bold;
  margin-bottom: 0.2%;
  /* border: 0.5px solid lightgray;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background: linear-gradient(255deg, #3d6fbc, lightgray);
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; */
}