/* Generated using nucleoapp.com */
/* --------------------------------

Icon colors

-------------------------------- */

.icon {
  display: inline-block;
  /* icon primary color */
  color: #111111;
  height: 1em;
  width: 1em;
}

.icon use {
  /* icon secondary color - fill */
  fill: #7ea6f6;
}

.icon.icon-outline use {
  /* icon secondary color - stroke */
  stroke: #7ea6f6;
}

/* --------------------------------

Change icon size

-------------------------------- */
.icon-xs {
  height: 0.5em;
  width: 0.5em;
}

.icon-sm {
  height: 0.8em;
  width: 0.8em;
}

.icon-lg {
  height: 1.6em;
  width: 1.6em;
}

.icon-xl {
  height: 2em;
  width: 2em;
}

/* -------------------------------- 

Align icon and text 

-------------------------------- */
.icon-text-aligner {
  /* add this class to parent element that contains icon + text */
  display: flex;
  align-items: center;
}

.icon-text-aligner .icon {
  color: inherit;
  margin-right: 0.4em;
}

.icon-text-aligner .icon use {
  color: inherit;
  fill: currentColor;
}

.icon-text-aligner .icon.icon-outline use {
  stroke: currentColor;
}

/* -------------------------------- 

Icon reset values - used to enable color customizations

-------------------------------- */
.icon {
  fill: currentColor;
  stroke: none;
}

.icon.icon-outline {
  fill: none;
  stroke: currentColor;
}

.icon use {
  stroke: none;
}

.icon.icon-outline use {
  fill: none;
}

/* -------------------------------- 

Stroke effects - Nucleo outline icons

- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
- 24px, 32px icons -> up to 2px stroke
- 48px, 64px icons -> up to 4px stroke

-------------------------------- */

.icon-outline.icon-stroke-1 {
  stroke-width: 1px;
}

.icon-outline.icon-stroke-2 {
  stroke-width: 2px;
}

.icon-outline.icon-stroke-3 {
  stroke-width: 3px;
}

.icon-outline.icon-stroke-4 {
  stroke-width: 4px;
}

.icon-outline.icon-stroke-1 use,
.icon-outline.icon-stroke-3 use {
  -webkit-transform: translateX(0.5px) translateY(0.5px);
  -moz-transform: translateX(0.5px) translateY(0.5px);
  -ms-transform: translateX(0.5px) translateY(0.5px);
  -o-transform: translateX(0.5px) translateY(0.5px);
  transform: translateX(0.5px) translateY(0.5px);
}

/* Style the individual buttons */
.buttons-copy,
.buttons-excel,
.buttons-pdf,
.buttons-csv {
  background-color: #34495E !important;
  border-color: #34495E !important;
  font-family: 'Open Sans' !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: white !important;
  margin: 5px !important;
  padding: 5px !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  width: 100px !important;
  cursor: pointer;
  transition: all 0.60s ease;
}

.fa-file-circle-plus {
  color: #34495E !important;
  border-color: #e2e2e2 !important;
}

.buttons-copy:hover,
.buttons-excel:hover,
.buttons-pdf:hover,
.buttons-csv:hover {
  transform: rotateY(2deg) rotateX(1deg) translateY(-2px);

}

.table-responsive .row .col-date {
  float: inline-end !important;
  /* font-size: 14px !important; */
}

input,
select {
  border-radius: 5px;
  border: 1px solid gray;
  /* font-size: 14px; */
}

.datebar {
  align-items: center !important;
  justify-content: end !important;
  float: right !important;
  position: absolute;
  place-content: end;
  width: 100%;
  right: 0;
  top: 0;
  padding: 5px !important;
  margin: 5px !important;
  text-align: end !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  align-content: end;
  justify-items: end;
}

.datebar label {
  font-size: 14px !important;
  font-weight: 700;
  display: block;
  margin-top: 5px;
}

aside .sidebar {
  height: 100vh !important;
  border-color: #111111 1px solid !important;
}

.min-height-300 .bg-primary {
  min-height: 100px !important;
  background-color: #767885 !important;
}

.container-fluid .card {
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
  /* Add a box shadow */
  border-radius: 10px;
}

.cards {
  transition: all 0.3s;
  /* Corrected timing function and added 's' for seconds */
  /* Add other styling properties for your .card class */
}

.cards:hover {
  transform: scale(1.05);
  /* You can also add other styles for the hover state */
}

.sidenav {
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
  /* Add a box shadow */
  background-color: #111111;
}

.form-control {
  border: 1px solid #c0c0c0 !important;
  /* Changed 'groove' to 'solid' for a classic look */

  /* Subtle shadow for depth */
}

.card {

  box-shadow: 10px 1px 10px 1px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid #c0c0c0 !important;
}

#fnav {
  background: none !important;
  color: #111111 !important;
}

#navbar span {
  color: #8f8686 !important;
}

#navbar .fa {
  color: #8f8686 !important;
}

#navbar span {
  color: #8f8686 !important;
  top: 0% !important;
  margin: 0%;
  padding: 0%;
}

#sidenav-main {
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
  /* Add a box shadow */
}

.nav-item .fa {
  color: #ffffff !important;
}

.nav-item span {
  color: #ffffff !important;
}

#iconNavbarSidenav .sidenav-toggler-line {
  color: #8f8686 !important;
  background-color: #8f8686 !important;
}

.navbar-brand-img {
  transition: all 0.3s ease !important;
}

.navbar-brand-img:hover {
  transform: translateX(-10%) scaleX(1.3) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.navbar-brand-img:hover::before {
  content: url("/assets/img/Untitled\ design\ \(11\)-modified.png");
  color: #fff;
  background-color: #111111;
  position: absolute !important;
  left: -25px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.card-plain {
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
}

table thead tr th {
  text-wrap: nowrap !important;
}

table tbody tr td {
  text-align: left !important;
}

.editBtn {
  color: #800080;
}

.deleteBtn {
  color: #ff8800;
}

table thead th {
  text-align: left;
}

th,
td {
  border: 0px solid #dddddd;
  text-align: left;
  padding: 5px;
}

table tbody tr td {
  text-wrap: nowrap !important;
}

#filter-button {
  width: 100px !important;
}

table tbody tr.even {
  background-color: #ffffff !important;
}

table tbody tr.odd {
  background-color: #dadada !important;
}

table tbody tr {
  border: 1px solid #ffffff !important;
  box-sizing: border-box !important;
  padding: 10px !important;
}

.align-right-top label {
  display: inline !important;
  font-size: 16px !important;
}


.dark-version .sidenav.bg-white {
  background-color: #051139 !important;
}

input {
  border: 1px solid #ccc;
  position: relative;
  padding: 5px;
  box-sizing: border-box;
  line-height: 0.3;
}

input::placeholder {
  color: gray;
  position: absolute;
  transition: color 0.3s ease-out, transform 0.3s ease-out;
  transform-origin: right center;
}

input:focus::placeholder,
input:not(:placeholder-shown)::placeholder {
  color: #3498db;
  transform: translateY(-100%) translateY(5px);
}

input:not(:placeholder-shown)::placeholder {
  transform: translateY(-100%) translateY(5px);
}

input::placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: transform 0.3s, font-size 0.3s, color 0.3s;
  color: grey;
  pointer-events: none;
}

input:focus::placeholder {
  transform: translateY(-70%) scale(0.8);
  position: fixed;
  display: block;
  top: 0%;
  margin-top: 10px;
  color: #000000;
  border: 1px solid black;
  padding: 0px;
  background-color: white;
  opacity: 1;
  overflow: auto;
}


.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  padding: 2px;
}

.custom-input-container {
  position: relative;
  margin-bottom: 20px;
}

.custom-inputs-container {
  position: relative;
  margin-bottom: 20px;
}

.custom-input-container label {
  position: absolute !important;
  top: 0%;

  pointer-events: none;
  transition: 0.3s;
  color: #555;
  background-color: #fff;
  transform: translateY(50%);
  align-items: center;
  text-align: center;
}

.custom-input-container input {
  width: 100%;
  padding: 10px;
  align-items: end;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}



.custom-input-container input:not(:focus):not(:placeholder-shown)+label {
  top: 0%;
  color: #555;
}


.dark-version .card {
  color: white !important;
}

.dark-version .custom-input-container input {
  background-color: #051139 !important;
  color: rgba(253, 253, 253, 0.8) !important;
}

.dark-version label {
  color: rgba(253, 253, 253, 0.8) !important;

}

.dark-version .custom-input-container label {
  color: rgba(255, 255, 255, 0.8) !important;
  background-color: #051139 !important;

}

.dark-version .custom-input-container input:focus+label,
.dark-version .custom-input-container input:not(:placeholder-shown)+label {
  top: 0;
  color: #ffffff !important;
}

.dark-version .form-control {
  background-color: #051139;
  color: white;
}

.dark-version table tbody tr.even {
  background-color: #051139 !important;
}

.dark-version table tbody tr.odd {
  background-color: #202e5c !important;
}

.dark-version .btn {
  background-color: #051139;
  border: 1px solid #051139 !important;
}

.dark-version .buttons-copy,
.dark-version .buttons-excel,
.dark-version .buttons-pdf,
.dark-version .buttons-csv {
  background-color: #051139 !important;
  border: 1px solid #051139 !important;
  color: #fff !important;
}

.dark-version .ps .fixed-plugin {
  color: #fff !important;
  background-color: #051139 !important;
}

.dark-version #manufacturerform {
  background-color: #202e5c !important;
}

.dark-version .dataTables_info {
  color: white !important;
}

.dark-version #sidenav-main {
  background-color: #111C44 !important;
  background: #111C44 !important;
}

.custom-inputs-container select {
  width: 100% !important;
  border: 1px solid #ccc !important;
  box-sizing: border-box !important;
  padding: 10px !important;
}

.custom-input-container {
  position: relative !important;
  margin-bottom: 20px !important;

}

.custom-input-container label {
  position: absolute !important;
  top: -20px !important;
  left: 10px !important;
  background-color: #fff;
  padding: 0 5px !important;
}

.custom-input-container input {
  width: 100%;
  border: 1px solid #ccc;
  box-sizing: border-box !important;
  padding: 10px !important;
}

.custom-input-container select {
  width: 100%;
  border: 1px solid #ccc;
  box-sizing: border-box !important;
  padding: 10px !important;
}

.custom-input-container select label {
  position: absolute !important;
}

.dark-version .custom-inputs-container select {
  color: white;
  background-color: #051139;
}


.dark-version .custom-inputs-container label {
  color: white;
  background-color: #051139;
}



.dark-version .modal-content {
  color: white;
  background-color: #051139;
}

.cell {
  width: 200px;
  display: flex;
  align-items: end;
  column-gap: 5px;
  border-color: #051139;
  color: #555;
}

#special-pop {
  width: 100% !important;
}

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

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100% !important;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-body {
  flex: 1;
}

.col .cell {
  padding: 0% !important;
  margin: 0% !important;
  column-gap: 1px !important;
}

label input[type="text"] {
  background-color: none !important;
  background: transparent !important;
}

.dark-version #purchaseFormContainer {
  background-color: #202e5c !important;
}

.dark-version input {
  background-color: #202e5c !important;
  color: white !important;
}

.dark-version .ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
  color: #202e5c;
}

.dark-version .ui-state-default {
  border: 1px solid #c5c5c5;
  background: #202e5c !important;
  font-weight: normal;
  color: #000000;
}

.dark-version #filter-button {
  background: #202e5c !important;
  border-color: rgb(255, 255, 255) !important;
}

.dark-version .fa-heart {
  color: #ae3a94 !important;
}

.fa-heart {
  color: #ae3a94 !important;
}

optgroup {
  font-weight: bold;
  background-color: #f0f0f0;
}

select .dropdown option {

  height: 200px !important;
  overflow-y: scroll !important;
  scroll-behavior: smooth !important;
}

.labels {
  display: flex;
  flex-wrap: wrap;
  align-items: start !important;
  justify-content: space-around;
}

.custom {
  margin: 5px;
  padding: 5px;
  align-items: start !important;
  justify-content: space-evenly;
}

.custom-btn {
  width: 100px !important;
  height: 41px !important;
}

.scrollbtn-container {
  height: 150px;
  overflow-y: auto;
  position: relative;
}

.buttons-wrapper {
  display: flex;
  flex-direction: column;
}

.fixed-buttons {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

#batchDetailsModal table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
}

#batchDetailsModal th,
#batchDetailsModal td {
  padding: 8px;
  border: 1px solid #ddd;
}

#batchDetailsModal th {
  background-color: #f2f2f2;
  font-weight: bold;
}

#batchDetailsModal tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

#batchDetailsModal tbody tr:hover {
  background-color: #ddd;
}

#batchDetailsBody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

#batchDetailsBody tr:nth-child(even) {
  background-color: #ffffff;
}

#batchDetailsBody tr:nth-child(odd):hover {
  background-color: #5785a3 !important;
  color: white !important;
}

#batchDetailsBody tr:nth-child(even):hover {
  background-color: #5785a3 !important;
  color: white !important;
}

tbody tr {

  padding: 0;
}

.dark-version .dt-buttons>.dt-button,
div.dt-buttons>div.dt-button-split .dt-button {
  border-color: #8f8686 !important;
  color: white !important;

}

.dark-version .nav-link-text {
  color: white !important;
}

.form-switch .form-check-input {

  margin: 0px !important;
  padding: 0px !important;
}

.companyTitle {
  align-items: center !important;
  padding: 0%;
  text-align: center;
  justify-content: center;
  font-size: 14px !important;
  color: dimgrey;
  animation: pulse 1s ease infinite alternate;
  /* Apply the animation */
}

@keyframes pulse {
  0% {
    font-size: 14px;
  }

  100% {
    font-size: 16px;
  }
}

.heading {
  margin: 0px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0px !important;
  text-align: start !important;
  animation: fadeOut 1s ease infinite alternate;
  /* Apply the animation */
}

.dark-version .chart-container {
  color: white !important;
  text-emphasis-color: white !important;

}

.dark-version i .fa-print {
  color: #f0f0f0 !important;
}

.dark-version table thead th {
  background: #111C44;
  color: white;
}

.dark-version table tbody tr.odd {
  background-color: #202e5c !important;
}

.dark-version table tbody tr.even {
  background-color: #051139 !important;
}

.dark-version table.dataTable.display tbody tr.odd {
  background-color: #202e5c !important;
}

.dark-version table.dataTable.display tbody tr.even {
  background-color: #051139 !important;
}

.dataTables_scrollBody .dropdown-menu {
  min-width: 200px;
}

.dark-version .active {
  background-color: #34495E !important;
}

.dark-version .sub-menu .active {
  background-color: #34495E !important;
  color: white;
}

.dark-version .sub-menu {
  background-color: #474c5e !important;
  color: white;
}

#logoutIcon {
  cursor: pointer;
}

.loading-line {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #4e54c8, #5e72e4);
  z-index: 9999;
  animation: loading-animation 2s ease-in-out;
}

.dark-version .loading-line {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #f1f1f1, #ffffff);
  z-index: 9999;
  animation: loading-animation 2s ease-in-out;
}

@keyframes loading-animation {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

#navbarBlur {
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5) !important;
  border-radius: 10px !important;
  margin-top: 20px !important;
  align-items: center !important;
  padding: 5px !important;
  justify-content: space-evenly !important;
}

.dark-version #navbarBlur {
  background: #111C44;
}

.text-dark {
  color: #051139 !important;
}

.dark-version .text-dark {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
    gap: 10px;
  }

  .col {
    min-width: 100%;
  }

  .custom-input-container {
    margin-bottom: 5px;
  }

  .custom-input-container input,
  .custom-input-container select {
    padding: 12px;
    font-size: 16px;
  }

  .custom-input-container label {
    font-size: 14px;
  }
}

.div .btn.disabled .updateBtn .btn[disabled] {
  background-color: #4e4e4e !important;
  /* Grey color for disabled state */
  border-color: #afafaf !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  /* Slightly transparent to indicate disabled state */
  color: #000;
  pointer-events: none !important;
}

.new-row {
  display: none;
}

/* General input and select field styling */
/* tr td input.input-field,
tr td select.input-field {
  width:100px !important;
  /* Make input and select fields take the full width of the td */
/* box-sizing: border-box; */
/* Ensure padding and borders are included in the element's width */
/* padding: 5px ; */
/* Add some padding for better appearance */
/* margin: 0; */
/* Remove any default margin */
/* } */
/* General input and select field styling for tbody */

.modal-content {
  border-radius: 8px;
  border: 1px solid #ddd;
}

.modal-header {
  border-bottom: 1px solid #ddd;
}

.modal-footer {
  border-top: 1px solid #ddd;
}

.btn-primary {
  background-color: #34495E !important;
  border-color: #34495E;
}

.btn-primary:hover {
  background-color: #0056b3;
  border-color: #004085;
}

.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

table tbody tr td {
  text-align: left !important;
}

table th {
  background-color: #34495E;
  /* Dark Gray Background */
  color: #ECF0F1;
  /* Light Gray Text */
  padding: 10px;
  text-align: left !important;
  font-weight: bold;
}

.bg-alter {
  background-color: #34495E;
}

.btn.disabled,
.btn[disabled] {
  background-color: #4e4e4e !important;
  /* Grey color for disabled state */
  border-color: #afafaf !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  /* Slightly transparent to indicate disabled state */
  color: #000;
  pointer-events: none !important;
}

.error {
  border: 1px solid red;

}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.1px !important;

}

.bg-ind {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.2));
  width: 100%;
  height: 100%;
}


/* h4,
h5,
h6,
p,
span,
a,
th,
td,
tr,
tbody,label ,input{
  font-weight: 300 !important;
  font-size: small !important;
  

} */

/* h4,h5,h6,p,span,a,th,td,tr,tbody{
  font-weight: 500 !important;
    font-size: small !important;
    font-family: "Poppins",
        sans-serif !important;
  
}
table tbody td{
  font-weight: 500 !important;
    font-size: small !important;


}
#customertable{
  font-weight: 500 !important;
    font-size: small !important;
  
} */
.text-yellow {
  color: rgb(255, 255, 73) !important;
}

/* input[type=text],input[type=number],select{
  line-height: 0.35px !important;
} */

.sidenav {
  font-size: 18px !important;
}

/* General input wrapper styling */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Style for the input field */
input .supplierinvoiceno {
  padding-right: 30px;
  /* Space for validation icon */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

/* Valid state: green border and tick icon */
input.input-valid {
  border-color: green;
}

/* Invalid state: red border and cross icon */
input.input-invalid {
  border-color: red;
}

/* Validation icon positioning and styling */
.validation-icon {
  position: absolute;
  right: 10px;
  font-size: 18px;
  pointer-events: none;
  transition: color 0.3s ease;
}

/* Green tick for valid input */
.validation-icon.input-valid::before {
  content: '✔';
  color: green;
}

/* Red cross for invalid input */
.validation-icon.input-invalid::before {
  content: '✖';
  color: red;
}
/* Style readonly inputs with a greymud background color */
tr td input.input-field:read-only,
tr td input[type="month"].input-field:read-only {
  background-color: #949494;
  /* Greymud color */
  color: #fff;
  /* White text for contrast */
  border: 1px solid #ccc;
  /* Optional border for readonly inputs */
  
}

table.dataTable td {
 
  white-space: normal !important;
  /* Allow wrapping of content */
  word-wrap: break-word;
  /* Break long words if needed */
  max-width: 250px !important;
  width: auto;
  /* Set a reasonable maximum width */
}
table tbody tr td,table thead th{
  font-size: smaller !important;
    line-height: normal !important;
    padding: 2px;
}