@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --body-bg: #F0F0F0;
  --brand-color: #24063b;
  --text-300: #626466;
  --text-400: #1C2039;
  --text-500: #070100;
  --text-800: #25262A;
  --blue-900: #010717;
  --orange-400: #D94F70;
  --orange-700: #c23860;
  --purple-100: #fdf2f5;
  --purple-400: #D94F70;
  --purple-700: #c23860;
  --yellow-400: #FFC257;
  --green-400: #13BB76;
  --blue-400: #325CFE;
  --sky-400: #47C2FE;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--body-bg);
  /* font-size: 13px; /* Changed 04-MAY-2026 14px; */
  display: flex;
  flex-wrap: wrap;
}

.btn, .btn:active, .btn:focus {
  border: 0px solid #000000;
  outline: 0px;
}

.btn-orange-outlined {
  height: 42px;
  font-size: 16px;
  line-height: 19px;
  background-color: #FFFFFF !important;
  border: 1px solid var(--orange-400) !important;
  color: var(--brand-color) !important;
}
.btn-orange-outlined:hover {
  background-color: var(--orange-400) !important;
  border-color: var(--orange-400) !important;
  color: #FFFFFF !important;
}
@media (min-resolution: 1.5dppx) {
  .btn-orange-outlined {
    height: 38px;
    font-size: 13px;
    line-height: 16px;
  }
}



/* MATCHING STARTS */

/* Filter Section Action Buttons (Apply Filters & Reset) using theme pink color and compact Go Back height */
.btn-orange-filled {
  height: 42px;
  font-size: 16px;
  line-height: 19px;
  background-color: var(--orange-400) !important;
  border-color: var(--orange-400) !important;
  color: #FFFFFF !important;
}
.btn-orange-filled:hover {
  background-color: var(--orange-700) !important;
  border-color: var(--orange-700) !important;
}
@media (min-resolution: 1.5dppx) {
  .btn-orange-filled {
    height: 38px;
    font-size: 14px;
    line-height: 17px;
  }
}





/*
ORANGE BUTTON DONE
*/



.text-300 {
  color: var(--text-300);
}

.text-400 {
  color: var(--text-400);
}

.text-500 {
  color: var(--text-500);
}

.text-purple-400 {
  color: var(--purple-400) !important;
}

p {
  margin-bottom: 0;
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

.text-1 {
  font-size: 24px;
  line-height: 28px;
}
@media screen and (max-width: 991px) {
  .text-1 {
    font-size: 21px;
    line-height: 25px;
  }
}
@media (min-resolution: 1.5dppx) {
  .text-1 {
    font-size: 21px;
    line-height: 25px;
  }
}
@media screen and (min-resolution: 1.5dppx) and (max-width: 575px) {
  .text-1 {
    font-size: 18px;
    line-height: 21px;
  }
}

.text-2 {
  font-size: 20px;
  line-height: 24px;
}
@media screen and (max-width: 991px) {
  .text-2 {
    font-size: 18px;
    line-height: 21px;
  }
}
@media (min-resolution: 1.5dppx) {
  .text-2 {
    font-size: 18px;
    line-height: 21px;
  }
}
@media screen and (min-resolution: 1.5dppx) and (max-width: 575px) {
  .text-2 {
    font-size: 16px;
    line-height: 19px;
  }
}

.text-3 {
  font-size: 18px;
  line-height: 21px;
}
@media screen and (max-width: 575px) {
  .text-3 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media (min-resolution: 1.5dppx) {
  .text-3 {
    font-size: 16px;
    line-height: 19px;
  }
}
@media screen and (min-resolution: 1.5dppx) and (max-width: 575px) {
  .text-3 {
    font-size: 14px;
    line-height: 17px;
  }
}

.text-4 {
  font-size: 16px;
  line-height: 19px;
}
@media screen and (max-width: 991px) {
  .text-4 {
    font-size: 14px;
    line-height: 17px;
  }
}
@media (min-resolution: 1.5dppx) {
  .text-4 {
    font-size: 14px;
    line-height: 17px;
  }
}

.mb-5px {
  margin-bottom: 5px;
}

.mb-10px {
  margin-bottom: 10px;
}

.mb-15px {
  margin-bottom: 15px;
}

.mb-20px {
  margin-bottom: 20px;
}

.dropdown-menu-sec {
   /* START Changed By Harsha on 16-09-26 for text is going out of box so max-content is auto fits no more overflow text Def_988 And Def_990*/
  /*width: 215px;*/
  width: max-content;
  background: #FFFFFF;
  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin-top: 7px !important;
  border: 0px solid #000000;
  padding: 10px;
}
.dropdown-menu-sec .dropdown-item {
  padding: 10px;
  font-size: 15px;
  line-height: 20px;
  color: #4F4F4F;
  white-space: normal;
}
.dropdown-menu-sec .dropdown-item:active, .dropdown-menu-sec .dropdown-item:focus, .dropdown-menu-sec .dropdown-item.active {
  font-weight: 500;
  color: #000002;
  background: transparent;
}

u, .text-decoration-underline {
  text-underline-offset: 4px;
}

.form-item {
  gap: 3px;
}
.form-item > label {
  font-size: 13px;
  line-height: 20px;
  color: var(--text-300);
}
.form-item .form-control, .form-item .form-select {
  min-height: 30px; /* Changed 04-AUG-2026 40px; */
}
.form-item .input-group .form-control {
  border-right: 0px solid #000000;
}
.form-item .input-group .input-group-text {
  padding: 0 7px;
  background: #FFFFFF;
}
.form-item.form-item-text > p {
  min-height: 30px; /* Changed 04-AUG-2026 40px; */
  font-size: 1rem;
  color: var(--bs-body-color);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.form-item .form-suggest p {
  font-size: 13px;
  line-height: 18px;
}
.form-item .form-suggest span {
  padding-left: 28px;
  font-size: 13px;
  line-height: 16px;
}
.form-item .form-suggest span > img {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
}

.product-status {
  padding: 3px 10px 4px;
  height: 28px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.product-status.product-status-created {
  background-color: #0033A9;
}
.product-status.product-status-confirmed {
  background-color: var(--green-400);
}
.product-status.product-status-running {
  background-color: var(--orange-400);
}
.product-status.product-status-completed {
  background-color: #02BBAE;
}
.product-status.product-status-cancelled {
  background-color: #A4A7AE;
}

.pagination-info {
  gap: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.pagination-info .form-select {
  height: 36px;
  width: 70px;
  padding: 0px 6px;
}
@media screen and (max-width: 349px) {
  .pagination-info {
    flex-wrap: wrap;
    gap: 5px;
    width: 120px;
  }
  .pagination-info > span {
    width: 100%;
  }
}

.goto-page-sec {
  gap: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.goto-page-sec > .form-control {
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 5px;
  padding: 2px 3px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.goto-page-sec > .btn {
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 349px) {
  .goto-page-sec {
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    width: 50px;
  }
  .goto-page-sec > span {
    width: 100%;
    text-align: right;
  }
}

.pagination-nav {
  gap: 5px;
  margin-bottom: 0;
}
.pagination-nav li {
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: #717680;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.pagination-nav li:hover, .pagination-nav li.active {
  background: #FFFFFF;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #000000;
}
.pagination-nav li.page-icon {
  background: #FFFFFF;
  border: 1px solid #D5D7DA;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
}
.pagination-nav li.disabled {
  cursor: no-drop;
}
.pagination-nav li.disabled > img {
  opacity: 0.6;
}
@media screen and (max-width: 991px) {
  .pagination-nav {
    width: 100%;
    order: -1;
    justify-content: center;
  }
}

.page-top-pagination-sec {
  gap: 28px;
}
@media screen and (max-width: 575px) {
  .page-top-pagination-sec {
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }
}

.page-bottom-pagination-sec {
  gap: 15px;
  justify-content: space-between;
}
@media screen and (max-width: 991px) {
  .page-bottom-pagination-sec {
    flex-wrap: wrap;
  }
}

.heading-pagination-sec {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.heading-pagination-sec > h5 {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-transform: capitalize;
  color: #000000;
  margin-bottom: 0;
}
@media screen and (max-width: 575px) {
  .heading-pagination-sec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .heading-pagination-sec > h5 {
    margin-bottom: 10px;
  }
}

.header-sec {
  padding: 6px 0;
  background-color: var(--body-bg);
  top: 0;
  z-index: 999;
}

.logo-sec {
  width: 70px;
  height: 48px;
}

.menu-icon path {
  stroke: var(--text-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.3s ease;
}
.menu-icon path.line2 {
  width: 70%;
}

/* Default state (Hamburger visible) */
.cross {
  opacity: 0;
  transform: scale(0);
}

/* When menu is open */
.navbar-toggler[aria-expanded=true] .line1 {
  transform: translateY(6px) rotate(45deg);
}
.navbar-toggler[aria-expanded=true] .line2 {
  opacity: 0;
}
.navbar-toggler[aria-expanded=true] .line3 {
  transform: translateY(-6px) rotate(-45deg);
}
.navbar-toggler[aria-expanded=true] .cross {
  opacity: 1;
  transform: scale(1);
}
.navbar-toggler[aria-expanded=true] .line {
  opacity: 0;
}

.navbar {
  width: calc(100% - 194px);
  padding: 0;
  margin: 0px 20px;
}
.navbar ul.nav {
  gap: 4px;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
.navbar .navbar-collapse {
  width: 100%;
  min-height: 48px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0 12px;
  border-radius: 50px;
}
.navbar .nav-link {
  padding: 7px 8px 8px;
  color: var(--text-500);
  font-weight: 500;
  border-radius: 40px;
  white-space: nowrap;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
  background-color: var(--brand-color);
  color: #FFFFFF;
}
@media screen and (max-width: 991px) {
  .navbar {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 48px;
    left: 0;
  }
  .navbar .navbar-collapse {
    height: auto;
    border-radius: 10px;
    padding: 12px 5px;
  }
  .navbar .navbar-collapse > ul {
    flex-direction: column;
  }
}

.notify-profile-sec {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.notify-profile-sec .navbar-toggler {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0px solid #000000;
}

.btn-notification {
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0;
  border: 0px solid #000000;
}
.btn-notification .notify-badge {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 25px;
  top: 11px;
  background: var(--orange-400);
  border-radius: 10px;
}
.btn-notification:hover {
  background-color: rgba(255, 255, 255, 0.631372549);
}

.user-dropdown .btn-user {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0px solid #000000;
  overflow: hidden;
}
.user-dropdown .btn-user.dropdown-toggle::after {
  content: none;
}
.user-dropdown .btn-user > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.login-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 20px 30px;
  min-height: 100dvh;
  gap: 30px;
  background-color: #FFFFFF;
  background-image: url("/yantra/images/img-login-bg-pattern.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1199px) {
  .login-container {
    padding: 15px 20px;
  }
}
@media screen and (max-width: 767px) {
  .login-container {
    padding: 15px 15px;
    grid-template-columns: repeat(1, 1fr);
  }
}

.beyond-erp-sec {
  width: 100%;
  height: 100%;
  background: linear-gradient(119.65deg, #D94F70 -8.52%, #c23860 32.54%, #a82e50 56.99%, #D94F70 99.21%, #e76b88 130.75%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .beyond-erp-sec {
    order: 1;
  }
}

.beyond-img-grp {
  width: 100%;
  padding: 5px 15px 20px;
  max-width: 380px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.beyond-img-grp > img {
  width: 100%;
}

.beyond-txt-grp {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.beyond-txt-grp h1 {
  font-weight: 700;
  font-size: 36px;
  line-height: 38px;
  color: #FFFFFF;
}
.beyond-txt-grp p {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #FFFFFF;
}
@media screen and (max-width: 575px) {
  .beyond-txt-grp h1 {
    font-size: 24px;
    line-height: 38px;
    margin-bottom: 0;
  }
  .beyond-txt-grp p {
    font-size: 14px;
    line-height: 20px;
  }
}

.login-form-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.login-form-sec .logo-industryX {
  width: 170px;
}
.login-form-sec .txt-sub-title {
  font-weight: 600;
  font-size: 28px;
  line-height: 38px;
  color: #000000;
  text-align: center;
  margin: 40px 0 10px;  /*Changed from 50 0 30 to 40 0 10 by Ajinkya on 13-Aug-2026*/
}
.login-form-sec .txt-no-acc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-300);
  margin-top: 30px;
}
.login-form-sec .txt-no-acc .txt-sign-up {
  color: var(--purple-400);
  font-weight: 600;
  cursor: pointer;
  text-underline-offset: 4px;
  text-decoration: none;
}
.login-form-sec .txt-no-acc .txt-sign-up:hover {
  color: var(--purple-700);
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .login-form-sec {
    padding: 12px 0 0;
  }
  .login-form-sec .txt-sub-title {
    margin: 25px 0 10px;
  }
}
@media screen and (max-width: 575px) {
  .login-form-sec .logo-industryX {
    width: 120px;
  }
  .login-form-sec .txt-sub-title {
    font-size: 20px;
    line-height: 38px;
  }
  .login-form-sec .txt-no-acc {
    margin-top: 15px;
  }
}

.login-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.login-form .form-item label {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-300);
}
.login-form .form-item .form-control {
  font-size: 16px;
  line-height: 24px;
  height: 44px;
}
.login-form .txt-forgot-password {
  color: var(--purple-400);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  text-underline-offset: 4px;
  text-decoration: none;
}
.login-form .txt-forgot-password:hover {
  color: var(--purple-700);
  text-decoration: underline;
}
@media screen and (max-width: 575px) {
  .login-form {
    gap: 10px;
  }
}

footer {
  position: sticky;
  bottom: -1px;
  background-color: var(--body-bg);
  z-index: 99;
}
@media screen and (max-width: 767px) {
  footer {
    position: static;
  }
}

.footer-copy-text {
  text-align: center;
  padding: 10px 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 150%;
  color: #000002;
}
.footer-copy-text a {
  color: var(--purple-400);
  text-underline-offset: 4px;
}
.footer-copy-text a:hover {
  color: var(--purple-700);
}

.page-nav {
  top: 72px;
  width: 94px;
  height: calc(100dvh - 112px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.page-nav .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;        /* changed from 20 to 10 */
  background-color: var(--brand-color);
  gap: 10px;           /* changed from 26 to 10 */
  overflow-x: hidden;
  max-height: calc(100dvh - 145px); /* Changed by Shraddha from 115 to 145 */
  overflow-y: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.7) transparent;
  padding-bottom: 25px; /* Added by Shraddha */
  
}
.page-nav .nav::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.page-nav .nav::-webkit-scrollbar-track {
  background: transparent;
}
.page-nav .nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
}
.page-nav .nav .nav-link {
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
  opacity: 0.7; /* Changed on 01-JUN-2026 0.6; */
}
.page-nav .nav .nav-link > img {
  width: 30px; /* Changed from 20 to 40 to 30 by Shraddha */

}

.page-nav .nav .nav-link > span {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-nav .nav .nav-link:hover, .page-nav .nav .nav-link.active {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .page-nav {
    order: 3;
    top: auto;
    bottom: 5px;
    width: 100%;
    height: 70px;
    z-index: 999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .page-nav .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 6px 25px;
    gap: 15px;
  }
  .page-nav .nav .nav-link > span {
    min-height: 28px;
  }
}

.page-content {
  width: calc(100% - 94px);
  min-height: calc(100dvh - 100px);
}
@media screen and (max-width: 767px) {
  .page-content {
    width: 100%;
    min-height: 100dvh;
  }
}

.breadcrumb-heading-sec {
  margin-top: 5px;
}

.breadcrumb-sec {
  margin-bottom: 3px;
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.666672 8.66666L4.66667 4.66666L0.666672 0.666664' fill='none' stroke='%23939FB2' stroke-opacity='0.8' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.breadcrumb-sec .breadcrumb-item > a {
  color: #85898B;
  text-decoration: none;
}
.breadcrumb-sec .breadcrumb-item.active {
  color: var(--text-800);
  font-weight: 500;
}
.breadcrumb-sec .breadcrumb-item + .breadcrumb-item {
  position: relative;
  padding-left: 24px;
}
.breadcrumb-sec .breadcrumb-item + .breadcrumb-item::before {
  content: "";
  background-image: var(--bs-breadcrumb-divider);
  height: 10px;
  background-repeat: no-repeat;
  position: absolute;
  top: calc(50% - 6px);
  left: 10px;
}


/*  OKKKKKKK 222222222222222 */


.action-sec {
  gap: 10px;
}
.action-sec .btn {
  gap: 10px;
  padding: 0 12px;
  height: 40px;
  font-size: 14px;
  line-height: 14px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  color: #000000;
  white-space: nowrap;
}
.action-sec .btn > img {
  filter: grayscale(1);
  width: 22px;
}
.action-sec .btn.btn-rounded {
  padding: 0;
  width: 40px;
}
.action-sec .btn.dropdown-toggle::after {
  display: none;
}
.action-sec .btn:hover {
  background-color: rgba(255, 255, 255, 0.631372549);
}
.action-sec .btn:hover > img {
  filter: grayscale(0);
}
@media screen and (max-width: 991px) {
  .action-sec {
    flex-wrap: wrap !important;
  }
}
@media screen and (max-width: 767px) {
  .action-sec {
    margin-top: 15px;
  }
}
@media screen and (max-width: 449px) {
  .action-sec {
    gap: 7px;
  }
}


/*  OKKKKKKK1111111 */
/*  OKKKKKKK */




.customer-details-content {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  margin-top: 10px;
}

.company-info-sec {
  background: linear-gradient(203.02deg, #D94F70 11.22%, #a82e50 81.82%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  padding: 14px 15px 22px 0;
}
.company-info-sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("/yantra/images/img-pattern-2.png");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 110% 110%;
}
.company-info-sec .year-text {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: var(--brand-color);
  padding: 6px 0 6px 20px;
  width: calc(100% - 20px);
  max-width: fit-content;
  background-color: var(--yellow-400);
}
.company-info-sec .year-text > img {
  right: -20px;
  height: calc(100% + 1px);
}
.company-info-sec .comp-info-content {
  margin-top: 17px;
  padding-left: 20px;
}
.company-info-sec .comp-info-content .company-icon {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.25);
}
.company-info-sec .comp-info-content .company-name {
  width: calc(100% - 50px);
  padding-left: 17px;
}
.company-info-sec .comp-info-content .company-name > p {
  font-size: 18px;
  line-height: 24px;
}

.comp-other-info {
  padding: 20px 15px;
}
.comp-other-info .text-email {
  margin-top: 4px;
}
.comp-other-info > div {
  margin-top: 6px;
  gap: 10px;
}
.comp-other-info > div.text-acc-no {
  margin-top: 22px;
}


/*
ADDRESS SECTION
*/


.address-sec {
  gap: 4px;
  padding: 10px 15px 30px;
}

.address-content {
  padding: 18px 15px;
  background-color: var(--purple-100);
}
.address-content:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.address-content:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.address-content .addr-icon {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
}
.address-content .addr-icon-text {
  width: calc(100% - 38px);
  padding-left: 15px;
}
.address-content .text-addr-name {
  margin-top: 10px;
  margin-bottom: 10px;
}
.address-content .text-addr {
  margin-top: 10px;
}
.address-content .text-gstn {
  margin-top: 15px;
  gap: 10px;
}

.pinned-notes-sec {
  margin-top: 20px;
}

.pinned-content {
  background-color: #FFEBD1;
  padding: 18px 35px 25px 20px;
  border-radius: 12px;
  border-bottom-right-radius: 24px;
  margin-top: 10px;
}
.pinned-content > .btn {
  width: 20px;
  height: 20px;
  top: 10px;
  right: 10px;
}
.pinned-content p {
  line-height: 20px;
  color: #A25B0A;
}

/* Condensed Yantra Overview Section: 2-Column CSS Grid */
/* 

!important removed 17-AUG-2026: it beat the max-width:1199px/767px/575px rules
   directly below, so this grid stayed 2-column on tablets and phones instead of
   collapsing to one. The declarations no longer need !important now that
   override.css's legacy display rules are scoped off the new screens.
   minmax(0,...) is kept in place of yantra's minmax(410px,...) so the column can
   shrink rather than force horizontal overflow on narrow viewports. 
   
   .overview-sec {
	  display: grid !important;
	  grid-template-columns: minmax(0, 45%) 1fr !important;
	  gap: 12px !important;
	}
   
   */
.overview-sec {
  display: grid;
  grid-template-columns: minmax(0, 45%) 1fr;
  gap: 12px;
}
.overview-sec.job-shop-overview-sec {
  grid-template-columns: minmax(50%, 765px) 1fr;
}
@media screen and (max-width: 1199px) {
  .overview-sec {
    grid-template-columns: repeat(1, 1fr);
  }
  .overview-sec.job-shop-overview-sec {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .overview-sec {
    gap: 10px;
  }
}
@media screen and (max-width: 575px) {
  .overview-sec {
    gap: 8px;
  }
}

.page-nav-tabs {
  gap: 40px;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.page-nav-tabs::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.page-nav-tabs::-webkit-scrollbar-track {
  background: transparent;
}
.page-nav-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.page-nav-tabs .nav-item .nav-link {
  color: var(--text-300);
  font-weight: 500;
  padding: 5px 0 10px;
  position: relative;
  border: 0px solid #000000;
  white-space: nowrap;
}
.page-nav-tabs .nav-item .nav-link.active {
  color: #000000;
  background: transparent;
  border: 0px;
}
.page-nav-tabs .nav-item .nav-link.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--orange-400);
  border-radius: 5px;
}

/**** ADDED BY ADITYA Khaparde STARTS 23-JUN-2026 for Invoice SUB TABS */
.page-nav-tabs > .tab-bar ul li ul li a {
  color: var(--text-300);
  font-weight: 500;
  padding: 5px 0 10px;
  position: relative;
  border: 0px solid #000000;
  white-space: nowrap;
  background-color: transparent;
}
.page-nav-tabs > .tab-bar ul li ul li a.selected {
  color: #000000;
  background: transparent;
  border: 0px;
}
.page-nav-tabs > .tab-bar ul li ul li a.selected::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--orange-400);
  border-radius: 5px;
}

/**** ADDED BY ADITYA Khaparde ENDS 23-JUN-2026 */
/*
ORDER INFO SECTION
*/

.order-info-sec {
  background-image: url("/yantra/images/img-pattern-1.png"); /* original was "../images/img-pattern-1.png" */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 110% 110%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  grid-row: span 2 !important;
}
.order-info-sec .order-top-sec {
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid rgba(28, 32, 57, 0.2);
}
.order-info-sec .order-bottom-sec {
  padding: 20px;
}
@media screen and (max-width: 1199px) {
  .order-info-sec {
    grid-row: span 1;
  }
  .order-info-sec .order-top-sec {
    gap: 12px;
    padding: 15px 15px 10px;
  }
  .order-info-sec .order-bottom-sec {
    padding: 10px 15px 15px;
  }
  .order-info-sec .date-person-sec {
    gap: 5px;
  }
}

/*
ORDER INFO SECTION ENDS
*/



.status-dropdown .btn-status {
  padding: 0px 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  line-height: 26px;
}
.status-dropdown .btn-status:active {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}
.status-dropdown .btn-status:hover {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.order-status {
  background: var(--green-400);
  padding: 3px 10px 4px;
  height: 28px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.order-info .order-no {
  font-size: 20px;
  line-height: 19px;
  letter-spacing: 0.4px;
}
.order-info .order-type {
  margin-top: 8px;
  padding: 5px 10px 6px;
  background: rgba(32, 32, 24, 0.3);
  border-radius: 6px;
  line-height: 17px;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.order-money-type {
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
}

.order-details {
  font-size: 16px;
  line-height: 19px;
  margin-top: 11px;
  cursor: pointer;
}
.order-details svg {
  margin-right: -5px;
}
.order-details:hover {
  opacity: 0.85;
}

.date-person-sec {
  gap: 5px;
}
.date-person-sec label {
  opacity: 0.8;
}
.date-person-sec p {
  cursor: pointer;
  font-size: 16px;
}
.date-person-sec p svg {
  margin-left: 15px;
}
.date-person-sec p:hover {
  opacity: 0.85;
}

.warehouse-unit-sec {
  display: grid;
  grid-template-columns: minmax(130px, 30%) 1fr;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 18px;
}
.warehouse-unit-sec label {
  font-size: 15px;
  line-height: 18px;
}
.warehouse-unit-sec p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--text-800);
  margin-top: 5px;
}
@media screen and (max-width: 991px) {
  .warehouse-unit-sec {
    gap: 5px;
    padding: 10px;
  }
}

/*
ORDER ITEMS CONTENT
*/


.order-items-content-sec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px;
}
.order-items-content-sec.order-columns-items {
  grid-template-columns: repeat(1, 1fr);
}
.order-items-content-sec > div {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  overflow: hidden;
}
.order-items-content-sec > div .top-content {
  padding: 10px 20px;
  overflow: hidden;
}
.order-items-content-sec > div .top-content > p {
  max-width: 105px;
  line-height: 17px;
  min-height: 34px;
  position: relative;
  z-index: 1;
}
.order-items-content-sec > div .top-content::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  right: 80px;
  top: -15px;
  border-radius: 51%;
  z-index: 1;
}
.order-items-content-sec > div .top-content::after {
  content: "";
  position: absolute;
  width: 126px;
  height: 126px;
  right: -23px;
  top: -23px;
  border-radius: 51%;
}
.order-items-content-sec > div .bottom-content {
  padding: 14px 20px;
  z-index: 1;
}
.order-items-content-sec > div .bottom-content > p {
  font-size: 24px;
  line-height: 24px;
}
.order-items-content-sec > div.order-val-sec .top-content {
  background-color: #FFF5EC;
}
.order-items-content-sec > div.order-val-sec .top-content::before {
  opacity: 0.5;
  background-color: #FFCC9D;
}
.order-items-content-sec > div.order-val-sec .top-content::after {
  opacity: 0.3;
  background-color: #FFC28A;
}
.order-items-content-sec > div.order-items-sec .top-content {
  background-color: #fdf2f5;
}
.order-items-content-sec > div.order-items-sec .top-content::before {
  opacity: 0.2;
  background-color: #f5a0b8;
}
.order-items-content-sec > div.order-items-sec .top-content::after {
  background-color: #fce4ec;
}
.order-items-content-sec > div.order-rejected-sec .top-content {
  background-color: #FFEFEC;
}
.order-items-content-sec > div.order-rejected-sec .top-content::before {
  opacity: 0.5;
  background-color: #FF8C8A;
}
.order-items-content-sec > div.order-rejected-sec .top-content::after {
  opacity: 0.3;
  background-color: #FF8C8A;
}
@media screen and (max-width: 767px) {
  .order-items-content-sec {
    gap: 10px;
  }
}
@media screen and (max-width: 575px) {
  .order-items-content-sec {
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
  }
}


/* Middle Section: Timeline Container & Crystal Clear Step Icons */
/* #newtimeline_col added 27-AUG-2026, corrected same day - only the "_col" id
   belongs here, not #newtimeline. <screenlet id="newtimeline"> renders as:
     <div id="newtimeline" class="screenlet">          <- title-bar + body, OUTER box
       <div class="screenlet-title-bar">Timeline</div>
       <div id="newtimeline_col" class="screenlet-body">...icons...</div>  <- INNER box
     </div>
   (collapsibleAreaId = screenlet id + "_col", MacroScreenRenderer.java). This
   whole block, including the ::before/::after connector below, used to apply
   only to .stepper-info (the new-UI wrapper div), so old-UI screens never got
   a connector at all. Adding #newtimeline here first (now removed) fixed
   that but also drew a second copy of the line off the OUTER box, measured
   from the top of the visible navy "Timeline" title bar rather than the top
   of the icon row - #newtimeline_col is the .screenlet-body itself once the
   flex fix in override.css ("#newtimeline .screenlet-body") turns it into a
   row, so it's the correct (and only) anchor, matching .stepper-info's own
   role on the new-UI page. */
.stepper-info, #newtimeline_col {
  position: relative;
  /* padding-top only (not the old "20px 15px") - the connector's "top: 42px"
     below is measured from this box's own top edge, but a matching
     padding-bottom is not needed for that and only added a dead empty band
     below the labels on the screenlet-wrapped #newtimeline_col box. Left/right
     are moot on #newtimeline_col regardless: .screenlet's own rules zero them. */
  padding-top: 20px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.stepper-info::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.stepper-info::-webkit-scrollbar-track {
  background: transparent;
}
.stepper-info::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.stepper-info::before, .stepper-info::after,
#newtimeline_col::before, #newtimeline_col::after {
  content: "";
  position: absolute;
  top: 42px;
  left: 45px;
  right: 45px;
  height: 2px;
  z-index: 0;
}
.stepper-info::before, #newtimeline_col::before {
  width: calc(100% - 90px);
  background: repeating-linear-gradient(to right, #cfcfd3 0, #cfcfd3 6px, transparent 6px, transparent 12px);
  background-size: 24px 2px;
  animation: moveLine 1s linear infinite;
}
@keyframes moveLine {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 24px 0;
  }
}
.stepper-info::after, #newtimeline_col::after {
  /* Fixed 27-AUG-2026, porting the fix already made in yantra's style.css
     (17-AUG-2026): "calc(var(--complete-step, 0px) - 90px)" could never be
     right for a partial bar - script.js (setStepperProgress) sets
     --complete-step-ratio (a 0..1 fraction of steps completed), not
     --complete-step, so this var always fell back to its 0px default and the
     bar's width came out negative (i.e. invisible) on every page regardless
     of real status. */
  width: calc((100% - 90px) * var(--complete-step-ratio, 0));
  background-color: var(--purple-400);
  transition: all 0.2s ease-in-out 0s;
}

.stepper-item {
  z-index: 1;
  text-align: center;
}
@media screen and (max-width: 1199px) {
  .stepper-item {
    min-width: 110px;
  }
}
.stepper-item .item-icon {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(98, 100, 102, 0.4);
  background-color: #FFFFFF;
  position: relative;
  z-index: 1;
}
.stepper-item .item-icon > img {
  width: 24px;
  filter: grayscale(1);
  opacity: 0.7;
}
.stepper-item .item-icon::before {
  content: "";
  position: absolute;
  top: -11px;
  left: -11px;
  border: 10px solid #FFFFFF;
  width: calc(100% + 22px);
  height: calc(100% + 22px);
  z-index: -1;
}
.stepper-item .item-status {
  color: var(--text-300);
  margin-top: 16px;
  padding: 3px 10px 0;
  height: 34px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.stepper-item .item-date {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-300);
  margin-top: 5px;
}
.stepper-item .item-status-updatedBy {
  font-size: 12px;
  line-height: 15px;
  color: var(--text-300);
  margin-top: 5px;
}
.stepper-item.active .item-icon, .stepper-item.complete .item-icon {
  border-color: var(--purple-400) !important;
}
.stepper-item.active .item-icon > img, .stepper-item.complete .item-icon > img {
  filter: grayscale(0);
  opacity: 1;
}
.stepper-item.active .item-status, .stepper-item.complete .item-status {
  color: #000000;
}
.stepper-item.complete .item-icon {
  background-color: var(--purple-400);
}
.stepper-item.complete .item-icon > img {
  filter: brightness(10) grayscale(0);
  opacity: 1;
}
.stepper-item .item-text-marquee {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}
.stepper-item .item-text-marquee p {
  display: inline-block;
  white-space: nowrap;
}
.stepper-item .item-text-marquee.is-marquee p {
  padding-left: 100%;
  animation: marquee-text 10s linear infinite;
}
@keyframes marquee-text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Iconic Buttons in Tab Section (Prominent borders ) */
.nav-content-details {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  gap: 44px;
  margin-top: 8px;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  width: 100%; /* Added by Shraddha 04-MAY-2026 */
}
.nav-content-details::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.nav-content-details::-webkit-scrollbar-track {
  background: transparent;
}
.nav-content-details::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}





.nav-content-details .nav-item .nav-link {
  padding: 11px 0px;
  border: 0px solid #000000;
  border-radius: 0;
  color: var(--text-300);
  white-space: nowrap;
}
.nav-content-details .nav-item .nav-link img {
  width: 24px;
  filter: grayscale(1);
}
.nav-content-details .nav-item .nav-link.active {
  font-weight: 600;
  color: #000000;
  background: transparent;
}
.nav-content-details .nav-item .nav-link.active img {
  filter: grayscale(0);
}
@media screen and (max-width: 991px) {
  .nav-content-details {
    position: sticky;
    top: 60px;
    z-index: 9;
  }
}


.tab-content-sec {
  margin: 10px 0 25px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 15px;
  background-color: #FFFFFF;
}
@media screen and (max-width: 991px) {
  .tab-content-sec {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    border-radius: 0px;
    padding: 0px;
    background-color: transparent;
  }
}

.tab-content-table {
  min-width: max-content;
}
.tab-content-table thead tr {
  background-color: #D6D6D7;
}
.tab-content-table thead tr th {
  text-transform: uppercase;
  background: transparent;
  vertical-align: middle;
  min-height: 40px;
  padding: 8px 5px;
}
.tab-content-table thead tr th:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: 18px;
}
@media screen and (max-width: 991px) {
  .tab-content-table thead tr th:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
.tab-content-table thead tr th:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
@media screen and (max-width: 991px) {
  .tab-content-table thead tr th:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.tab-content-table td {
  font-weight: 500;
  vertical-align: middle;
  padding: 8px 5px;
  text-align: center;
}
.tab-content-table td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-left: 18px;
  text-align: left;
}
.tab-content-table td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.tab-content-table .td-action {
  width: 88px;
}
.tab-content-table .table-actions {
  width: 82px;
  gap: 5px;
}
.tab-content-table .table-actions .btn {
  padding: 0;
  width: 24px;
  height: 24px;
}
.tab-content-table .table-actions .btn > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.tab-content-table .table-actions .btn:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.tab-content-table .badge {
  border-radius: 50px;
  min-width: 35px;
  height: 24px;
  padding: 0 6px;
  max-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab-content-table .badge.badge-green {
  background-color: #E9FFDC;
  color: var(--green-400);
}
.tab-content-table .badge.badge-red {
  background-color: #FFD4E2;
  color: #FF206A;
}
.tab-content-table .badge.badge-orange {
  background-color: #FFE4D9;
  color: #FA662B;
}
.tab-content-table .badge.badge-blue {
  background-color: #D7ECFF;
  color: #2B9BFF;
}
.tab-content-table .badge.badge-gray {
  background-color: #DFDFDF;
  color: var(--text-300);
}
.tab-content-table .td-invoice {
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0.01em;
  text-decoration-line: underline;
  text-underline-offset: 4px;
  color: var(--purple-400);
}
.tab-content-table .td-status .badge {
  min-width: 85px;
  height: 32px;
  border: 1px solid var(--text-300);
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tab-content-table .td-status .badge.badge-green {
  border-color: #C8F1B0;
}
.tab-content-table .td-status .badge.badge-red {
  border-color: #fab9cf;
}
.tab-content-table .td-status .badge.badge-orange {
  border-color: #FFC6AF;
}
.tab-content-table .td-status .badge.badge-blue {
  border-color: #95CDFF;
}
.tab-content-table .td-status .badge.badge-gray {
  border-color: #AEAEAE;
}
.tab-content-table .tr-hidden-row {
  display: none;
}
.tab-content-table .tr-expand-row:hover > td {
  --bs-table-bg-state: #F0F0F0;
}
.tab-content-table .tr-expand-row td {
  padding: 20px;
  border-top: 1px solid rgba(90, 99, 106, 0.3);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #F0F0F0;
  text-align: left;
}
.tab-content-table .tr-parent-row:hover > td {
  --bs-table-bg-state: #F0F0F0;
}
.tab-content-table .tr-parent-row > td {
  background-color: #F0F0F0;
}
.tab-content-table .tr-parent-row > td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 0;
}
.tab-content-table .tr-parent-row > td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
}
.tab-content-table .tr-parent-row .btn-arrow-down {
  transform: rotate(180deg);
}
.tab-content-table tbody tr:nth-child(even) > td {
  background-color: #F0F0F0;
}
@media screen and (max-width: 991px) {
  .tab-content-table {
    display: block;
    width: 100%;
  }
  .tab-content-table thead {
    display: none;
  }
  .tab-content-table tbody, .tab-content-table th, .tab-content-table td, .tab-content-table tr {
    display: block;
    width: 100%;
  }
  .tab-content-table tr {
    background: #FFFFFF;
    margin-bottom: 12px;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
  }
  .tab-content-table tr:hover > * {
    --bs-table-bg-state: #FFFFFF!important;
  }
  .tab-content-table tr td {
    text-align: left;
    padding: 0 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #000002;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .tab-content-table tr td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--text-300);
    margin-bottom: 3px;
  }
  .tab-content-table tr td:first-child {
    padding: 0 5px;
  }
  .tab-content-table tr td.td-action {
    width: 100%;
    grid-column: span 2;
    border-top: 1px solid #E2E8F0;
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .tab-content-table tr td.td-action::before {
    display: none;
  }
  .tab-content-table .tr-expand-row {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: -20px;
    padding: 10px;
  }
  .tab-content-table .tr-expand-row:hover > td {
    --bs-table-bg-state: #F0F0F0;
    background-color: #F0F0F0;
    box-shadow: none;
  }
  .tab-content-table .tr-expand-row td {
    padding: 12px !important;
    border-top: 0px solid rgba(90, 99, 106, 0.3);
    text-align: left;
    background-color: #F0F0F0 !important;
    border-radius: 8px !important;
  }
  .tab-content-table .tr-parent-row > td {
    background-color: #FFFFFF;
  }
  .tab-content-table tbody tr:nth-child(even) > td {
    background-color: #FFFFFF;
  }
}

@media screen and (max-width: 991px) {
  .table-responsive-fixed {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    padding: 10px;
    background-color: #FFFFFF;
  }
}

.tab-content-table-fixed tr th {
  text-transform: uppercase;
  background-color: #D6D6D7 !important;
  vertical-align: middle;
  min-height: 40px;
  border-bottom: 0px solid #000000 !important;
}
.tab-content-table-fixed tr th:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: 18px !important;
}
.tab-content-table-fixed tr th:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.tab-content-table-fixed tr td {
  text-align: center;
}
.tab-content-table-fixed tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-left: 18px !important;
  text-align: left;
}
.tab-content-table-fixed tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.tab-content-table-fixed tr td.td-action {
  width: 50px;
}
.tab-content-table-fixed tr td.td-action .table-actions {
  width: 50px;
  gap: 5px;
}
.tab-content-table-fixed tr td.td-action .table-actions .btn {
  padding: 0;
  width: 24px;
  height: 24px;
}
.tab-content-table-fixed tr td.td-action .table-actions .btn > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.tab-content-table-fixed tr td.td-action .table-actions .btn:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.tab-content-table-fixed tbody tr:nth-child(even) > td {
  background-color: #F0F0F0;
}

.dt-scroll-body {
  border-bottom: 0px solid #000000 !important;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.dt-scroll-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.dt-scroll-body::-webkit-scrollbar-track {
  background: transparent;
}
.dt-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.no-record-found-sec {
  min-height: 350px;
}
.no-record-found-sec > h6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  color: #000002;
  margin-top: 5px;
  margin-bottom: 3px;
}
.no-record-found-sec > p {
  font-size: 15px;
  line-height: 150%;
  color: var(--text-300);
}

.order-items-table {
  padding: 0 0 20px;
  border-bottom: 1px solid #D3DAE3;
  margin-bottom: 5px;
}
.order-items-table tbody tr:nth-child(4n+3) > td {
  background-color: #F0F0F0;
}
@media screen and (max-width: 991px) {
  .order-items-table tr td.td-name {
    grid-column: span 2;
    order: -1;
    font-size: 16px;
  }
  .order-items-table tr td.td-name::before {
    display: none;
  }
  .order-items-table tr td.td-hsn {
    grid-column: span 2;
    width: 100%;
    gap: 7px;
    order: -1;
    margin-top: -6px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .order-items-table tr td.td-hsn::before {
    content: attr(data-label);
    margin-bottom: 0;
  }
  .order-items-table tr td.td-tax {
    grid-column: span 2;
  }
  .order-items-table tr td.td-price-total {
    border-top: 1px solid #E2E8F0;
    padding-top: 12px;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #000002;
  }
  .order-items-table tr td.td-action {
    grid-column: span 1;
    padding-top: 12px;
  }
  .order-items-table tbody tr:nth-child(4n+3) > td {
    background-color: #FFFFFF;
  }
}

.add-order-detail-info {
  padding: 15px 0 10px;
}
.add-order-detail-info .btn-add-item {
  width: 135px;
  letter-spacing: 0.01em;
}

.order-detail-table {
  width: 320px;
  --bs-table-bg: transparent;
}
@media screen and (max-width: 575px) {
  .order-detail-table {
    width: 100%;
    margin-top: 15px;
  }
}
.order-detail-table td {
  color: #7E8492;
  padding: 4px 5px;
  vertical-align: middle;
}
.order-detail-table td:first-child {
  font-size: 14px;
  line-height: 125%;
}
.order-detail-table td:last-child {
  font-size: 16px;
  line-height: 125%;
}
.order-detail-table tr:last-child td {
  padding: 4px 5px 13px;
}
.order-detail-table tfoot th {
  padding: 13px 5px 4px;
  vertical-align: middle;
  font-size: 18px;
  line-height: 125%;
}
.order-detail-table tfoot th:last-child {
  color: #1B1B1B;
}
.order-detail-table tfoot tr:first-child {
  border-top: 1px dashed rgba(126, 132, 146, 0.4);
}
.order-detail-table tfoot tr:last-child th {
  font-weight: 400;
  font-size: 14px;
  line-height: 135%;
  padding-top: 5px;
}

.expand-row-summary {
  grid-template-columns: 1fr minmax(358px, 35%) 1fr;
  gap: 20px;
}
@media screen and (max-width: 1199px) {
  .expand-row-summary {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 991px) {
  .expand-row-summary {
    gap: 10px;
  }
}

.card-item {
  padding: 20px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.card-item > h5 {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 20px;
}

.card-inventory-summary > div {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 20px;
  gap: 5px;
}
.card-inventory-summary > div:last-child {
  margin-bottom: 0;
}

.card-quantity-content {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 5px;
  column-gap: 40px;
}
.card-quantity-content > div {
  gap: 5px;
}
.card-quantity-content > div > p {
  font-size: 16px;
}

.card-gst-nature > div:first-child {
  padding: 0 10px;
}
.card-gst-nature > div:first-child > label {
  line-height: 125%;
  color: #7E8492;
}
.card-gst-nature > div:first-child > p {
  line-height: 125%;
  color: var(--text-800);
}

.card-gst-nature-content {
  padding: 10px;
  gap: 10px;
  background: #FFFFDC;
  border-radius: 5px;
  margin-top: 10px;
}
.card-gst-nature-content .text-tax-breakup {
  font-size: 13px;
  line-height: 125%;
  color: #1B1B1B;
}
.card-gst-nature-content .text-tax-amt {
  gap: 5px;
  line-height: 125%;
  color: #7E8492;
  margin: 12px 0 15px;
}
.card-gst-nature-content .text-tax-price {
  font-size: 16px;
  line-height: 125%;
}

.expand-row-addr-form {
  grid-template-columns: 335px 1fr;
  gap: 20px;
  margin-top: 15px;
  margin-bottom: 30px;
  padding: 10px 10px 20px;
  border-bottom: 1px solid rgba(98, 100, 102, 0.4);
}
@media screen and (max-width: 1199px) {
  .expand-row-addr-form {
    grid-template-columns: 1fr;
  }
}

.sale-ship-addr {
  font-size: 15px;
  line-height: 20px;
  gap: 25px;
}
.sale-ship-addr > div {
  gap: 5px;
}

.sale-ship-form-grp {
  gap: 15px;
}
.sale-ship-form-grp .form-control {
  max-width: 290px;
  min-height: 42px;
}
.sale-ship-form-grp .form-select {
  max-width: 85px;
  min-height: 42px;
}
.sale-ship-form-grp .btn {
  width: 120px;
  height: 42px;
  background: #000000;
  border: 1px solid #24063b;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.expand-row-shipment {
  grid-template-columns: minmax(330px, 35%) 1fr 1fr;
  gap: 60px;
}
.expand-row-shipment > div > h5 {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1199px) {
  .expand-row-shipment {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 991px) {
  .expand-row-shipment {
    gap: 0;
  }
}

.card-inventory > div {
  margin-bottom: 20px;
}
.card-inventory > div:last-child {
  margin-bottom: 0;
}
.card-inventory .item-inventory-heading {
  grid-template-columns: 1fr 90px;
  gap: 10px;
  background: #fdf2f5;
  border-radius: 5px;
  font-size: 16px;
  line-height: 19px;
  padding: 8px 15px;
}
.card-inventory .item-inventory-heading > div {
  gap: 15px;
}
.card-inventory .item-inventory-heading > div .btn {
  padding: 0;
  width: 24px;
  height: 24px;
}
.card-inventory .item-inventory-heading > div .btn > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.card-inventory .item-inventory-heading > div .btn:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.card-inventory .item-inventory-body {
  grid-template-columns: 1fr 90px;
  gap: 10px;
  padding: 10px 15px 0;
}
.card-inventory .item-inventory-body > div {
  gap: 5px;
}

.card-shipment-item::before, .card-planned-shipment::before {
  content: "";
  position: absolute;
  top: 0;
  left: -29px;
  background-color: var(--text-300);
  opacity: 0.4;
  width: 1px;
  height: 100%;
}
.card-shipment-item > div, .card-planned-shipment > div {
  margin-bottom: 20px;
  gap: 5px;
  letter-spacing: 0.01em;
}
.card-shipment-item > div:last-child, .card-planned-shipment > div:last-child {
  margin-bottom: 0;
}
.card-shipment-item > div > div:first-child, .card-planned-shipment > div > div:first-child {
  font-size: 16px;
  line-height: 20px;
}
@media screen and (max-width: 1199px) {
  .card-shipment-item::before, .card-planned-shipment::before {
    top: -29px;
    left: 0;
    width: 100%;
    height: 1px;
  }
}
@media screen and (max-width: 991px) {
  .card-shipment-item, .card-planned-shipment {
    border-top: 1px solid rgba(98, 100, 102, 0.4);
    margin-top: 20px;
    padding-top: 20px;
  }
  .card-shipment-item::before, .card-planned-shipment::before {
    display: none;
  }
}

.order-id-item {
  margin-bottom: 30px;
}
.order-id-item .item-icon {
  width: 67px;
  height: 67px;
  background: var(--purple-100);
}
.order-id-item .item-content {
  width: calc(100% - 67px);
  padding-left: 20px;
}
.order-id-item .item-content > label {
  font-size: 15px;
  line-height: 18px;
}
.order-id-item .item-content > h6 {
  font-size: 20px;
  line-height: 20px;
  margin-top: 7px;
  letter-spacing: 0.4px;
}
.order-id-item .item-content > p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 18px;
  opacity: 0.8;
  max-width: fit-content;
  padding-right: 35px;
}
.order-id-item .item-content > p .btn-edit {
  width: 24px;
  height: 24px;
  top: -3px;
}
.order-id-item .item-content > p .btn-edit > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.order-id-item .item-content > p .btn-edit:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
@media screen and (max-width: 991px) {
  .order-id-item {
    margin: 10px 0 20px;
  }
}

.img-truck {
  margin: 0 20px;
}

.shipping-addr-sec {
  background: #F0F0F0;
  border-radius: 8px;
  padding: 20px 30px 30px;
}
.shipping-addr-sec .text-shipping-addr {
  font-size: 16px;
  line-height: 19px;
}
@media screen and (max-width: 1199px) {
  .shipping-addr-sec {
    padding: 15px 20px 20px;
  }
}
@media screen and (max-width: 991px) {
  .shipping-addr-sec {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    background-color: #FFFFFF;
  }
}

.addr-select-list {
  margin-top: 17px;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
  column-gap: 80px;
}
@media screen and (max-width: 1199px) {
  .addr-select-list {
    row-gap: 20px;
    column-gap: 40px;
  }
}
@media screen and (max-width: 767px) {
  .addr-select-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.addr-selected-item {
  padding-left: 35px;
  padding-right: 80px;
}
.addr-selected-item:nth-child(even)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -38px;
  width: 1px;
  height: 100%;
  background-color: rgba(98, 100, 102, 0.3019607843);
}
.addr-selected-item .form-check-input {
  width: 20px;
  height: 20px;
  border-color: rgba(98, 100, 102, 0.4);
  background-color: #F0F0F0;
}
.addr-selected-item .form-check-input:checked {
  background-color: #F0F0F0;
  border-color: var(--purple-400);
}
.addr-selected-item .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23D94F70'/%3e%3c/svg%3e");
}
.addr-selected-item .form-check-input:focus {
  border-color: var(--purple-400);
  outline: 0;
  box-shadow: 0 0 0 0 rgba(217, 79, 112, 0.25);
}
.addr-selected-item .form-check-label {
  cursor: pointer;
  z-index: 1;
}
.addr-selected-item .text-addr-name {
  font-size: 16px;
  line-height: 20px;
}
.addr-selected-item .text-addr {
  line-height: 20px;
  margin-top: 10px;
}
.addr-selected-item .addr-type {
  width: 70px;
  height: 35px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 17px;
  background-color: #FFFFFF;
}
@media screen and (max-width: 1199px) {
  .addr-selected-item:nth-child(even)::before {
    left: -24px;
  }
}
@media screen and (max-width: 991px) {
  .addr-selected-item .addr-type {
    background-color: #d9d9d9;
  }
}
@media screen and (max-width: 767px) {
  .addr-selected-item:nth-child(even)::before {
    display: none;
  }
}

.add-new-addr {
  padding-left: 23px;
  margin-top: 11px;
}
.add-new-addr .btn-add-new-addr {
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: var(--purple-400);
  text-underline-offset: 4px;
}
.add-new-addr .btn-add-new-addr:hover {
  text-decoration: underline;
}

.btn-addr-save {
  width: 98px;
  height: 42px;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
}
.btn-addr-save:hover {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

.shipping-intro-sec {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px;
  padding: 30px;
  border-bottom: 1px solid rgba(98, 100, 102, 0.3);
}
@media screen and (max-width: 1199px) {
  .shipping-intro-sec {
    column-gap: 50px;
    padding: 20px 10px;
  }
}
@media screen and (max-width: 767px) {
  .shipping-intro-sec {
    grid-template-columns: repeat(1, 1fr);
    padding: 25px 0 0;
    border-bottom: 0px solid #000000;
  }
}

.shipping-intro-item:nth-child(even)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -38px;
  width: 1px;
  height: 100%;
  background-color: rgba(98, 100, 102, 0.3019607843);
}
.shipping-intro-item h6 {
  font-size: 16px;
  line-height: 20px;
}
.shipping-intro-item p {
  line-height: 20px;
  color: var(--text-300);
  margin-top: 10px;
}
.shipping-intro-item .btn {
  top: calc(50% - 21px);
  letter-spacing: 0.01em;
}
.shipping-intro-item:first-child {
  padding-right: 140px;
}
.shipping-intro-item:first-child .btn {
  width: 112px;
}
.shipping-intro-item:last-child {
  padding-right: 170px;
}
.shipping-intro-item:last-child .btn {
  width: 140px;
}
@media screen and (max-width: 1199px) {
  .shipping-intro-item:nth-child(even)::before {
    left: -24px;
  }
  .shipping-intro-item:first-child {
    padding-right: 120px;
  }
  .shipping-intro-item:last-child {
    padding-right: 150px;
  }
}
@media screen and (max-width: 767px) {
  .shipping-intro-item:nth-child(even)::before {
    display: none;
  }
  .shipping-intro-item:first-child, .shipping-intro-item:last-child {
    padding-right: 120px;
  }
  .shipping-intro-item:last-child {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(98, 100, 102, 0.3019607843);
  }
  .shipping-intro-item:last-child .btn {
    top: calc(35% + 25px - 21px);
  }
  .shipping-intro-item .btn {
    width: 110px !important;
  }
}

.heading-shipment-details-sec {
  margin-top: 30px;
  margin-bottom: 13px;
}

.text-shipment-detail {
  font-size: 16px;
  line-height: 20px;
}

.btn-pack-ship {
  letter-spacing: 0.01em;
}

.payment-sec {
  margin: 0 0 30px;
  background: #F0F0F0;
  border-radius: 8px;
  padding: 25px 150px 25px 25px;
  min-height: 102px;
  overflow: hidden;
}
.payment-sec .img-payment {
  top: 6px;
  right: 30px;
}
@media screen and (max-width: 1399px) {
  .payment-sec {
    padding: 25px 110px 25px 15px;
  }
  .payment-sec .img-payment {
    right: 10px;
  }
}
@media screen and (max-width: 1199px) {
  .payment-sec .img-payment {
    top: auto;
    bottom: -10px;
  }
}
@media screen and (max-width: 991px) {
  .payment-sec {
    padding: 10px 0 25px;
    margin: 0;
    min-height: 10px;
  }
  .payment-sec .img-payment {
    display: none;
  }
}

.payment-block {
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}
@media screen and (max-width: 1399px) {
  .payment-block {
    gap: 10px;
  }
}
@media screen and (max-width: 1199px) {
  .payment-block {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 991px) {
  .payment-block {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 575px) {
  .payment-block {
    grid-template-columns: repeat(1, 1fr);
  }
}

.payment-item .item-icon {
  width: 50px;
  height: 50px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.payment-item .item-content {
  width: calc(100% - 50px);
  padding-left: 18px;
}
.payment-item .item-content > label {
  font-size: 15px;
  line-height: 18px;
}
.payment-item .item-content > p {
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-top: 8px;
}
@media screen and (max-width: 1399px) {
  .payment-item .item-content {
    padding-left: 10px;
  }
  .payment-item .item-content > label {
    font-size: 13px;
    line-height: 15px;
  }
  .payment-item .item-content > p {
    font-size: 17px;
    line-height: 17px;
  }
}

.doc-drop-sec {
  padding: 55px 0;
}
.doc-drop-sec > h5 {
  font-size: 16px;
  line-height: 150%;
  margin-top: 20px;
}
.doc-drop-sec > p {
  line-height: 150%;
  color: var(--text-300);
  margin-top: 4px;
}
.doc-drop-sec > .btn-upload {
  padding: 0;
  width: 148px;
  letter-spacing: 0.01em;
  margin-top: 25px;
}
.doc-drop-sec > .btn-upload > input {
  opacity: 0;
  z-index: -1;
}

.note-tab-content-sec {
  padding: 15px 5px;
}
.note-tab-content-sec .btn-add-note {
  width: 193px;
  letter-spacing: 0.01em;
  margin: 0 15px;
}

.note-item {
  padding: 20px 25px;
  border-radius: 14px 14px 30px 14px;
  margin-bottom: 20px;
}
.note-item > h6 {
  font-size: 16px;
  line-height: 22px;
}
.note-item > .note-date-time {
  gap: 17px;
}
.note-item > hr {
  margin: 20px 0 16px;
  opacity: 0.5;
}
.note-item > label {
  margin-bottom: 10px;
}
.note-item .comment-sec {
  grid-template-columns: 1fr 130px;
  gap: 15px;
}
.note-item .comment-sec .btn {
  padding: 0;
  width: 130px;
  height: 36px !important;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.01em;
}
.note-item .comment-item {
  grid-template-columns: 45px 1fr;
  gap: 15px;
}
.note-item .comment-item > img {
  width: 45px;
  height: 45px;
  border-radius: 51%;
  object-fit: cover;
}
.note-item .comment-content > p {
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
}
.note-item .comment-content > span {
  line-height: 17px;
  letter-spacing: 0.01em;
}
.note-item.note-private {
  background-color: rgba(186, 234, 255, 0.3);
}
.note-item.note-private > h6 {
  color: #0A506E;
}
.note-item.note-private > hr {
  border-color: #82c7e5;
}
.note-item.note-public {
  background-color: rgba(179, 255, 224, 0.3);
}
.note-item.note-public > h6 {
  color: #0D9C61;
}
.note-item.note-public > hr {
  border-color: var(--green-400);
}

.offcanvas.offcanvas-end {
  --bs-offcanvas-width: 473px;
}
.offcanvas.offcanvas-end .offcanvas-header {
  padding: 17px 20px;
  border-bottom: 1px solid rgba(224, 224, 224, 0.8);
}
.offcanvas.offcanvas-end .offcanvas-title {
  font-size: 24px;
  line-height: 23px;
}

.offcanvas-content-sec {
  padding: 20px;
}
@media screen and (max-width: 575px) {
  .offcanvas-content-sec {
    padding: 10px;
  }
}

.offcanvas-content-item .offcanvas-content-heading {
  background: rgba(224, 224, 224, 0.5);
  border-radius: 8px;
  font-size: 16px;
  line-height: 19px;
  color: var(--blue-900);
  height: 40px;
  padding: 0 20px;
}
.offcanvas-content-item .offcanvas-content-body {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
  column-gap: 25px;
  padding: 20px 20px 40px;
}
@media screen and (max-width: 575px) {
  .offcanvas-content-item .offcanvas-content-heading {
    padding: 0 10px;
  }
  .offcanvas-content-item .offcanvas-content-body {
    row-gap: 20px;
    column-gap: 15px;
    padding: 15px 10px 25px;
  }
}
@media screen and (max-width: 349px) {
  .offcanvas-content-item .offcanvas-content-body {
    grid-template-columns: repeat(1, 1fr);
  }
}

.offcanvas-content-body .text-item > label {
  font-size: 15px;
  line-height: 18px;
  color: var(--text-300);
  margin-bottom: 7px;
}
.offcanvas-content-body .text-item > p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--blue-900);
  padding-right: 30px;
  width: fit-content;
}
.offcanvas-content-body .text-item > p .btn-edit {
  padding: 0;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
}
.offcanvas-content-body .text-item > p .btn-edit > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.offcanvas-content-body .text-item > p .btn-edit:hover > img {
  filter: grayscale(0);
  opacity: 1;
}

/* ==================================
invoice info section
================================== */

.invoice-info-sec {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  grid-row: span 2 !important;
}

.invoice-top-sec {
  padding: 20px;
}

.text-no {
  font-size: 20px;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: var(--text-400);
}

.text-type {
  width: 84px;
  height: 28px;
  border-radius: 6px;
  margin-top: 11px;
}

.invoice-status {
  background: #0848DE;
  padding: 3px 10px 4px;
  height: 28px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.text-details {
  font-size: 16px;
  line-height: 19px;
  margin-top: 11px;
  cursor: pointer;
}
.text-details svg {
  margin-right: -5px;
}
.text-details:hover {
  opacity: 0.85;
}

/* Price Section Banner with  Theme Color Gradient & White Text Visibility */
.price-sec {
  background-image: url("/yantra/images/img-pattern-1.png"); /* original was "../images/img-pattern-1.png" */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 110% 110%;
  padding: 16px 20px 20px;
  gap: 10px;
}
.price-sec .date-sec {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.price-sec .price-item > p {
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.01em;
  margin-top: 5px;
}
.price-sec .date-item > label {
  font-size: 15px;
  line-height: 18px;
}
.price-sec .date-item > p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-top: 5px;
}


/* Bottom Business Unit Section */
.spot-unit-sec {
  padding: 16px 20px 20px;
  gap: 10px;
}
.spot-unit-sec label {
  font-size: 15px;
  line-height: 18px;
  color: var(--text-300);
}
.spot-unit-sec p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.table-invoice-btn-sec {
  gap: 15px;
  margin-bottom: 10px;
}
.table-invoice-btn-sec .btn {
  padding: 0;
  height: 42px;
  font-size: 16px;
  letter-spacing: 0.01em;
}
.table-invoice-btn-sec .btn-add-tax {
  width: 187px;
}
.table-invoice-btn-sec .btn-update-menu {
  width: 130px;
  border-color: var(--orange-400) !important;
  gap: 12px;
  padding-left: 10px;
}
.table-invoice-btn-sec .btn-update-menu > img {
  transition: all 0.1s ease-in-out;
}
.table-invoice-btn-sec .btn-update-menu::after {
  display: none;
}
.table-invoice-btn-sec .btn-update-menu.show > img {
  transform: rotate(180deg);
}
.table-invoice-btn-sec .btn-show-invoice, .table-invoice-btn-sec .btn-map-purchase {
  width: 42px;
  height: 42px;
  border-color: rgba(98, 100, 102, 0.6) !important;
}
.table-invoice-btn-sec .btn-show-invoice > img, .table-invoice-btn-sec .btn-map-purchase > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.table-invoice-btn-sec .btn-show-invoice:hover > img, .table-invoice-btn-sec .btn-map-purchase:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
@media screen and (max-width: 575px) {
  .table-invoice-btn-sec {
    gap: 7px;
  }
  .table-invoice-btn-sec .btn {
    padding: 0;
    height: 40px;
    font-size: 14px;
  }
  .table-invoice-btn-sec .btn-add-tax {
    width: 150px;
  }
  .table-invoice-btn-sec .btn-update-menu {
    width: 110px;
    line-height: 14px;
  }
  .table-invoice-btn-sec .btn-update-menu > img {
    width: 20px;
  }
  .table-invoice-btn-sec .btn-show-invoice, .table-invoice-btn-sec .btn-map-purchase {
    width: 40px;
    height: 40px;
  }
  .table-invoice-btn-sec .btn-show-invoice > img, .table-invoice-btn-sec .btn-map-purchase > img {
    width: 21px;
  }
}

.invoice-item-content-table .td-type {
  text-align: left;
}
.invoice-item-content-table .td-disc {
  text-align: left;
}
.invoice-item-content-table .td-parent-seq {
  text-align: center !important;
}
@media screen and (max-width: 991px) {
  .invoice-item-content-table .td-seq {
    order: 0 !important;
    gap: 7px;
    margin-top: -6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px !important;
    grid-column: span 2;
  }
  .invoice-item-content-table .td-seq::before {
    display: inline-flex !important;
    margin-bottom: 0;
  }
  .invoice-item-content-table .td-type {
    padding: 0 5px;
    grid-column: span 2;
    order: -1;
    font-size: 16px;
    line-height: 19px;
  }
  .invoice-item-content-table .td-type::before {
    display: none;
  }
  .invoice-item-content-table .td-parent-seq {
    text-align: left !important;
  }
  .invoice-item-content-table .td-unit-price, .invoice-item-content-table .td-line-price {
    border-top: 1px solid #E2E8F0;
    padding-top: 12px;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #000002;
    order: 1;
  }
}

.job-shop-info-sec {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  grid-row: span 3;
  overflow: hidden;
}
@media screen and (max-width: 575px) {
  .job-shop-info-sec .job-shop-info {
    width: 100%;
    margin-bottom: 10px;
  }
}

.job-shop-top-sec {
  background-image: url("/yantra/images/img-pattern-1.png"); /* original was "../images/img-pattern-1.png" */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 110% 110%;
  padding: 16px 20px 20px;
  gap: 10px;
}
.job-shop-top-sec .btn {
  padding: 0;
  width: 42px;
  height: 42px;
  border-radius: 42px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.job-shop-top-sec .btn > img {
  filter: grayscale(1);
  width: 22px;
}
.job-shop-top-sec .btn:hover > img {
  filter: grayscale(0);
}
.job-shop-top-sec .btn.btn-view {
  margin: 0 15px;
}
.job-shop-top-sec .product-sec {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media screen and (max-width: 1199px) {
  .job-shop-top-sec .product-sec {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 399px) {
  .job-shop-top-sec .product-sec {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
}
@media screen and (max-width: 399px) {
  .job-shop-top-sec .btn {
    width: 32px;
    height: 32px;
  }
  .job-shop-top-sec .btn > img {
    width: 16px;
  }
  .job-shop-top-sec .btn.btn-view {
    margin: 0 10px;
  }
}

.job-shop-status {
  padding: 3px 10px 4px;
  height: 28px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.job-shop-status.job-shop-created {
  background-color: #0033A9;
}
.job-shop-status.job-shop-confirmed {
  background-color: var(--green-400);
}
.job-shop-status.job-shop-running {
  background-color: var(--orange-400);
}
.job-shop-status.job-shop-completed {
  background-color: #02BBAE;
}
.job-shop-status.job-shop-cancelled {
  background-color: #A4A7AE;
}

.job-shop-middle-sec {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  flex-grow: 1;
  align-items: flex-start;
}
.job-shop-middle-sec .text-item > label {
  font-size: 15px;
  line-height: 18px;
  color: var(--text-300);
  margin-bottom: 7px;
}
.job-shop-middle-sec .text-item > p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--blue-900);
  padding-right: 30px;
  width: fit-content;
}
.job-shop-middle-sec .text-item > p .btn-edit {
  padding: 0;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
}
.job-shop-middle-sec .text-item > p .btn-edit > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.job-shop-middle-sec .text-item > p .btn-edit:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.job-shop-middle-sec .text-item > .btn-update {
  width: 100px;
  margin: 20px 0 10px;
}
.job-shop-middle-sec .text-item.desc-text-item {
  grid-column: span 3;
}
@media screen and (max-width: 575px) {
  .job-shop-middle-sec {
    grid-template-columns: repeat(2, 1fr);
  }
  .job-shop-middle-sec .text-item.desc-text-item {
    grid-column: span 2;
  }
}
@media screen and (max-width: 399px) {
  .job-shop-middle-sec {
    grid-template-columns: repeat(1, 1fr);
  }
  .job-shop-middle-sec .text-item.desc-text-item {
    grid-column: span 1;
  }
}

.job-shop-bottom-sec {
  padding: 10px 20px 20px;
  border-top: 1px solid rgba(98, 100, 102, 0.3);
  gap: 15px;
}
.job-shop-bottom-sec .link-item {
  line-height: 17px;
  letter-spacing: 0.01em;
  text-decoration-line: underline;
  text-underline-offset: 4px;
  color: var(--purple-400);
  padding: 3px 5px;
}
.job-shop-bottom-sec .link-item:hover {
  color: var(--purple-700);
}

.lot-warehouse-sec {
  padding: 20px 15px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  gap: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 575px) {
  .lot-warehouse-sec {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }
}

.lot-ro-sec {
  gap: 15px;
  width: 240px;
}
.lot-ro-sec .btn {
  width: 105px;
  pointer-events: none;
  opacity: 0.4;
  color: var(--text-300);
  border-color: var(--text-300) !important;
}
.lot-ro-sec .form-control:not(:placeholder-shown) + .btn {
  pointer-events: auto;
  opacity: 1;
  color: #000000;
  border-color: var(--orange-400) !important;
}
@media screen and (max-width: 575px) {
  .lot-ro-sec {
    width: 100%;
  }
}

.btn-filter {
  width: 106px;
  height: 32px;
  border: 1px solid rgba(98, 100, 102, 0.4);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.01em;
  color: var(--text-300);
  position: absolute;
  top: -40px;
  right: 12px;
}
.btn-filter:hover, .btn-filter:focus, .btn-filter:active {
  outline: 0;
  border: 1px solid rgba(98, 100, 102, 0.4);
  color: var(--text-300);
}
@media screen and (max-width: 991px) {
  .btn-filter {
    position: static;
    margin-left: auto;
    margin-bottom: 10px;
  }
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
DASHBOARD OVERVIEW SECTION
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */



/* Dashboard Overview Top Filter Card Container (White rectangular card) */
.dashboard-overview-sec {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 0 15px;
}

.overview-filter-sec {
  padding-right: 200px;
  border-bottom: 1px solid rgba(98, 100, 102, 0.2);
  padding-top: 13px;
}
.overview-filter-sec .form-group {
  padding: 0 0 13px;
}
.overview-filter-sec .form-group .form-label {
  font-size: 13px;
  line-height: 20px;
  color: var(--text-300);
  margin-bottom: 2px;
}
.overview-filter-sec .form-group .form-select {
  min-height: 42px;
}
.overview-filter-sec .form-btn-group {
  grid-template-columns: minmax(125px, 150px) 1fr;
  gap: 10px;
  max-width: 265px;
  margin-bottom: 13px;
}
.overview-filter-sec .img-filter {
  position: absolute;
  bottom: 0;
  right: 15px;
}
@media screen and (max-width: 767px) {
  .overview-filter-sec {
    padding-right: 0;
  }
  .overview-filter-sec .img-filter {
    display: none;
  }
}

.overview-graph-item {
  padding: 10px 0 12px;
}
.overview-graph-item .item-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 0px;
  top: calc(50% - 20px);
  background: var(--text-300);
  border-radius: 8px;
}
.overview-graph-item .item-icon > img {
  width: 24px;
}
.overview-graph-item .item-icon.item-icon-purple {
  background-color: var(--purple-400);
}
.overview-graph-item .item-icon.item-icon-orange {
  background-color: var(--orange-400);
}
.overview-graph-item .item-icon.item-icon-green {
  background-color: var(--green-400);
}
.overview-graph-item .item-icon.item-icon-yellow {
  background-color: var(--yellow-400);
}
.overview-graph-item .item-content {
  /*padding: 0 95px 0 50px;*/
  /* Commented above and added below as static graphs has been removed from overview sec. : Ajinkya */
  padding: 0 25px 0 50px;
  position: relative; /*Added for dashboard overview sec. visibility issue : Ajinkya*/
  z-index: 2; /*Added for dashboard overview sec. visibility issue : Ajinkya*/
}
.overview-graph-item .item-content > label {
  line-height: 20px;
  margin-bottom: 2px;
  white-space: nowrap;
}
.overview-graph-item .item-content .content-text {
  gap: 10px;
}
.overview-graph-item .item-content .content-text > h6 {
  font-size: 20px;
  line-height: 20px;
  color: #181D27;
}
.overview-graph-item .item-content .content-text .text-profit {
  gap: 4px;
}
.overview-graph-item .item-content .content-text .text-profit > img {
  width: 16px;  /*Changed from 12 to 16 for dashboard overview sec. image size : Ajinkya*/
}
.overview-graph-item .item-graph {
  position: absolute;
  width: 85px;
  right: 0px;
  top: calc(50% - 20px);
  z-index: 1; /*Added for dashboard overview sec. visibility issue : Ajinkya*/
}

/* Dashboard Symmetrical Rectangular Cards (White containers for all graph cards) */
.dashboard-card {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  margin-top: 12px;
  height: calc(100% - 12px);
  overflow: hidden;
}
.dashboard-card .dashboard-heading {
  font-size: 16px;
  line-height: 19px;
  padding: 12px 16px;
}
.dashboard-card .dashboard-body {
  padding: 0 16px 20px;
  min-height: 230px;
}

.card-revenue-weekly-chart {
  width: 100%;
  height: 230px;
  overflow-x: auto;
  overflow-y: hidden;
}
.card-revenue-weekly-chart canvas {
  width: max-content !important;
}

/* Multi Ring Chart Center Text & Number Positioning (Number centered above text) */
.card-multi-ring-chart {
  width: 100%;
  max-height: 230px;
  position: relative;
}

/* commented as not present inlatest version on 16-AUG-2026
.card-multi-ring-chart .chart-center,
.chart-center {
  position: absolute !important;
  top: 40% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #181d27 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  z-index: 10 !important;
}

.card-multi-ring-chart .chart-center-label,
.chart-center-label {
  position: absolute !important;
  top: 56% !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #667085 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-align: center !important;
  margin: 0 !important;
  z-index: 10 !important;
}
*/
/* Added one below as per latest version on 16-AUG-2026 */
.card-multi-ring-chart .chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  line-height: 38px;
  color: #181D27;
}

/* Top Customer Card Styling: Businessman Image, Dark Gradient Overlay & Crisp White Text */

.dashboard-card-product-customer {
  padding-top: 10px;
}
.dashboard-card-product-customer .dashboard-card-tabs {
  gap: 0;
}
.dashboard-card-product-customer .tab-content {
  height: 230px;
  overflow: auto;
}
.dashboard-card-product-customer .card-product-item, .dashboard-card-product-customer .card-customer-item {
  margin: 5px 0;
  min-height: 35px;
  padding: 5px 10px 5px 20px;
}
.dashboard-card-product-customer .card-product-item p, .dashboard-card-product-customer .card-customer-item p {
  line-height: 17px;
  letter-spacing: 0.01em;
  width: calc(100% - 35px);
  margin-right: 10px;
}
.dashboard-card-product-customer .card-product-item .btn, .dashboard-card-product-customer .card-customer-item .btn {
  width: 25px;
  height: 25px;
  padding: 0;
}
.dashboard-card-product-customer .card-product-item .btn > img, .dashboard-card-product-customer .card-customer-item .btn > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.dashboard-card-product-customer .card-product-item .btn:hover > img, .dashboard-card-product-customer .card-customer-item .btn:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.dashboard-card-product-customer .card-product-item:nth-child(even), .dashboard-card-product-customer .card-customer-item:nth-child(even) {
  background-color: #F0F0F0;
}
.dashboard-card-product-customer .card-product-item:hover, .dashboard-card-product-customer .card-customer-item:hover {
  background-color: #dbdbdb;
}

.dashboard-card-sales-country .dashboard-heading .content-text {
  gap: 10px;
  margin-top: 6px;
}
.dashboard-card-sales-country .dashboard-heading .content-text > h6 {
  font-size: 20px;
  line-height: 20px;
  color: #181D27;
}
.dashboard-card-sales-country .dashboard-heading .content-text .text-profit {
  gap: 4px;
}
.dashboard-card-sales-country .dashboard-heading .content-text .text-profit > img {
  width: 12px;
}
.dashboard-card-sales-country .dashboard-body {
  max-height: 230px;
  overflow-y: auto;
  overflow-x: hidden;
}
.dashboard-card-sales-country .chart-country-bar {
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 1;
  padding: 8px 0 16px;
  height: 54px;   /*Changed from 34 to 54 for tooltip visibility issue : Ajinkya*/
  width: calc(100% + 8px);
  /* height: 30px; /* Changed from 10px to 30px for tooltip visibility issues */

  /* margin: 8px 0 16px -4px; /* Commented and kept /added left margin below */
  /* border-top: 1px solid rgba(98, 100, 102, 0.3019607843); commented this line */
  margin-left: -4px;
  border-bottom: 1px solid rgba(98, 100, 102, 0.3019607843);
}





/* commented as not present inlatest version
.table-country {
  border-top: 1px solid rgba(98, 100, 102, 0.3019607843);
}
*/

.table-country th, .table-country td {
  padding: 6px 3px;
  font-weight: 500;
}
.table-country th:first-child, .table-country td:first-child {
  padding-left: 0;
}
.table-country th:last-child, .table-country td:last-child {
  padding-right: 0;
}
.table-country th {
  padding-top: 15px;
  padding-bottom: 10px;
}
.table-country td:first-child img {
  width: 24px;
  height: 24px;
  border-radius: 51%;
}
.table-country td:first-child span {
  display: inline-block;
  line-height: 20px;
  margin-left: 10px;
  vertical-align: middle;
}
.table-country td .text-matrics {
  position: relative;
  padding-left: 20px;
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
  line-height: 18px;
  color: #2E2E30;
}
.table-country td .text-matrics::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 6px;
  left: 0;
  top: calc(50% - 3px);
  border-radius: 10px;
}
.table-country td .text-matrics.text-matrics-purple::before {
  background: var(--purple-400);
}
.table-country td .text-matrics.text-matrics-orange::before {
  background: var(--orange-400);
}
.table-country td .text-matrics.text-matrics-blue::before {
  background: var(--blue-400);
}
.table-country td .text-matrics.text-matrics-sky::before {
  background: var(--sky-400);
}
.table-country td .text-profit {
  gap: 4px;
}
.table-country td .text-profit > img {
  width: 12px;
}
.table-country td:last-child {
  width: 65px;
}

.card-bubble-chart {
  width: 100%;
  height: 150px;
  position: relative;
  line-height: 0;
}

.card-bubble-chart-legend {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20px;
  column-gap: 10px;
  margin-top: 20px;
  max-height: 110px;
  overflow-y: auto;
  overflow-x: hidden;
}
.card-bubble-chart-legend .legend-item {
  position: relative;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.card-bubble-chart-legend .legend-item::before {
  content: "";
  position: absolute;
  width: 8.01px;
  height: 8.01px;
  left: 0;
  top: 5px;
  border-radius: 52%;
}
.card-bubble-chart-legend .legend-item > label {
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
}
.card-bubble-chart-legend .legend-item > p {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  text-transform: capitalize;
  color: #000000;
}
.card-bubble-chart-legend .legend-item.legend-item-purple::before {
  background-color: var(--purple-400);
}
.card-bubble-chart-legend .legend-item.legend-item-purple > label {
  color: var(--purple-400);
}
.card-bubble-chart-legend .legend-item.legend-item-orange::before {
  background-color: var(--orange-400);
}
.card-bubble-chart-legend .legend-item.legend-item-orange > label {
  color: var(--orange-400);
}
.card-bubble-chart-legend .legend-item.legend-item-green::before {
  background-color: var(--green-400);
}
.card-bubble-chart-legend .legend-item.legend-item-green > label {
  color: var(--green-400);
}
.card-bubble-chart-legend .legend-item.legend-item-blue::before {
  background-color: var(--blue-400);
}
.card-bubble-chart-legend .legend-item.legend-item-blue > label {
  color: var(--blue-400);
}

.dashboard-card-revenue-marketing .dashboard-body {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 10px;
}
.dashboard-card-revenue-marketing .campaign-item {
  margin-top: 20px;
}
.dashboard-card-revenue-marketing .campaign-item .item-progress {
  height: 8px;
  margin-top: 10px;
  position: relative;
}
.dashboard-card-revenue-marketing .campaign-item .item-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progess-width);
  border-radius: 10px;
}
.dashboard-card-revenue-marketing .campaign-item .item-progress.item-progress-purple::before {
  background-color: var(--purple-400);
}
.dashboard-card-revenue-marketing .campaign-item .item-progress.item-progress-orange::before {
  background-color: var(--orange-400);
}
.dashboard-card-revenue-marketing .campaign-item .item-progress.item-progress-blue::before {
  background-color: var(--blue-400);
}
.dashboard-card-revenue-marketing .campaign-item .item-progress.item-progress-sky::before {
  background-color: var(--sky-400);
}

.dashboard-card-sales-manager .dashboard-body {
  height: 100%;
}
.dashboard-card-sales-manager .dashboard-body::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(360deg, rgba(0, 0, 2, 0.8) 4.89%, rgba(0, 0, 2, 0) 71.26%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.dashboard-card-sales-manager .dashboard-body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: var(--manager-img, url('/yantra/images/img-sales-manager.png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* commented as not present inlatest version on 16-AUG-2026 z-index: 1; */
}

/* commented as not present inlatest version on 16-AUG-2026
.dashboard-card-sales-manager .dashboard-body::after {
  z-index: 2;
  background: linear-gradient(360deg, rgba(0, 0, 2, 0.85) 0%, rgba(0, 0, 2, 0.35) 50%, rgba(0, 0, 2, 0) 100%) !important;
}

.dashboard-card-sales-manager .manager-text-content {
  position: relative !important;
  z-index: 10 !important;
}

.dashboard-card-sales-manager .manager-text-content h5,
.dashboard-card-sales-manager .manager-text-content p {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
*/

.dashboard-card-key-insights .dashboard-heading {
  padding-bottom: 10px !important;
}
.dashboard-card-key-insights .dashboard-body {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 10px;
}
.dashboard-card-key-insights .insight-item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(98, 100, 102, 0.3);
}
.dashboard-card-key-insights .insight-item .item-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(98, 100, 102, 0.3);
  border-radius: 8px;
  position: absolute;
  top: calc(50% - 20px);
  left: 0;
}
.dashboard-card-key-insights .insight-item .item-content {
  padding-left: 60px;
  min-height: 30px; /* Changed 04-AUG-2026 40px; */
}
.dashboard-card-key-insights .insight-item:last-child {
  border-bottom: 0px solid rgba(98, 100, 102, 0.3);
}

.card-revenue-tracking-chart {
  width: 100%;
  height: 230px;
  overflow-x: auto;
  overflow-y: hidden;
}
.card-revenue-tracking-chart canvas {
  width: max-content !important;
}

.card-revenue-representative-chart {
  width: 100%;
  height: 230px;
  overflow-x: auto;
  overflow-y: hidden;
}
.card-revenue-representative-chart canvas {
  width: max-content !important;
}

.supplier-overview-sec {
  display: grid;
  grid-template-columns: 1fr 255px 1fr;
  gap: 12px;
}
@media screen and (max-width: 1199px) {
  .supplier-overview-sec {
    grid-template-columns: 1fr 165px 1fr;
    gap: 10px;
  }
}
@media screen and (max-width: 1023px) {
  .supplier-overview-sec {
    grid-template-columns: 165px 1fr 1fr;
    gap: 10px;
  }
}
@media screen and (max-width: 575px) {
  .supplier-overview-sec {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.supplier-info-sec {
  background-image: url("/yantra/images/img-pattern-1.png"); /* original was "../images/img-pattern-1.png" */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 110% 110%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  grid-row: span 1;
}
.supplier-info-sec .supplier-top-sec {
  gap: 10px;
  padding: 20px;
  border-bottom: 1px solid rgba(28, 32, 57, 0.2);
}
.supplier-info-sec .supplier-bottom-sec {
  padding: 20px;
}
@media screen and (max-width: 1199px) {
  .supplier-info-sec .supplier-top-sec {
    gap: 12px;
    padding: 15px 15px 10px;
  }
  .supplier-info-sec .supplier-bottom-sec {
    padding: 10px 15px 15px;
  }
  .supplier-info-sec .supplier-sec {
    gap: 5px;
  }
}
@media screen and (max-width: 1023px) {
  .supplier-info-sec {
    grid-column: span 3;
  }
}
@media screen and (max-width: 575px) {
  .supplier-info-sec {
    grid-column: span 1;
  }
}

.supplier-info-content .supplier-no {
  font-size: 20px;
  line-height: 19px;
  letter-spacing: 0.4px;
}
.supplier-info-content .supplier-created-date {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-top: 6px;
}
.supplier-info-content .supplier-created-date span {
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  opacity: 0.8;
  margin-right: 10px;
}

.supplier-money-type {
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
}

.supplier-details {
  font-size: 16px;
  line-height: 19px;
  cursor: pointer;
}
.supplier-details svg {
  margin-right: -5px;
}
.supplier-details:hover {
  opacity: 0.85;
}

.supplier-sec {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.supplier-sec .supplier-item > label {
  font-size: 15px;
  line-height: 18px;
  opacity: 0.8;
}
.supplier-sec .supplier-item > p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-top: 5px;
}

.gst-unit-sec {
  display: grid;
  grid-template-columns: minmax(130px, 30%) 1fr;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 18px;
}
.gst-unit-sec label {
  font-size: 15px;
  line-height: 18px;
}
.gst-unit-sec p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--text-800);
  margin-top: 5px;
}
@media screen and (max-width: 991px) {
  .gst-unit-sec {
    gap: 5px;
    padding: 10px;
  }
}

.user-name-sec {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
}
.user-name-sec .user-name-heading {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(98, 100, 102, 0.3);
}
.user-name-sec .user-name-body {
  padding: 20px;
}
.user-name-sec .user-name-body .img-login-auth {
  max-width: 120px;
  max-height: 160px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
@media screen and (max-width: 1023px) {
  .user-name-sec {
    grid-column: span 2;
  }
}
@media screen and (max-width: 575px) {
  .user-name-sec {
    grid-column: span 1;
  }
  .user-name-sec .user-name-body .img-login-auth {
    display: none;
  }
}

.user-name-item-list {
  padding-right: 130px;
  gap: 30px;
}
@media screen and (max-width: 575px) {
  .user-name-item-list {
    padding-right: 0;
  }
}

.user-name-item {
  padding-left: 65px;
}
.user-name-item .item-icon {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  top: 0;
  background: #F0F0F0;
}
.user-name-item .item-icon > img {
  width: 24px;
  height: 24px;
}
.user-name-item .item-content p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.01em;
  padding-right: 30px;
  width: fit-content;
  margin-bottom: 10px;
}
.user-name-item .item-content p > .btn-edit {
  padding: 0;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
}
.user-name-item .item-content p > .btn-edit > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.user-name-item .item-content p > .btn-edit:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.user-name-item .item-content .link-item {
  line-height: 17px;
  letter-spacing: 0.01em;
  text-decoration-line: underline;
  text-underline-offset: 4px;
  color: var(--purple-400);
  padding: 3px 5px;
  margin-left: 15px;
}
.user-name-item .item-content .link-item:hover {
  color: var(--purple-700);
}

.card-payment-method {
  background: var(--purple-100);
  border-radius: 8px;
  padding: 20px;
  margin-top: 15px;
}
.card-payment-method .txt-tight {
  font-size: 16px;
  line-height: 20px;
}
.card-payment-method .card-payment-content {
  padding-left: 60px;
  gap: 5px;
  margin-top: 15px;
}
.card-payment-method .card-payment-content > p {
  line-height: 17px;
}
.card-payment-method .card-payment-content > .card-icon {
  position: absolute;
  width: 45px;
  height: 45px;
  left: 0;
  top: 0;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1019607843);
}
.card-payment-method .card-payment-content > .card-icon > img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.card-payment-method .card-payment-content .text-bank-addr {
  margin-bottom: 10px;
}
.card-payment-method .card-payment-content .text-bank-trans-type {
  margin: 10px 0 5px;
}
.card-payment-method .card-payment-content .card-btn-grp {
  gap: 15px;
  margin-top: 20px;
}
.card-payment-method .card-payment-content .card-btn-grp > .btn {
  background-color: transparent !important;
  padding: 0;
  width: 105px;
  height: 36px;
}
.card-payment-method .card-payment-content .card-btn-grp > .btn:hover {
  background-color: var(--orange-400) !important;
}
@media screen and (max-width: 991px) {
  .card-payment-method {
    background-color: #FFFFFF;
  }
}

.card-point-contact {
  background: var(--purple-100);
  border-radius: 8px;
  padding: 20px;
  margin-top: 15px;
}
.card-point-contact .txt-tight {
  font-size: 16px;
  line-height: 20px;
}
.card-point-contact > a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
  color: var(--purple-400);
  width: fit-content;
}
.card-point-contact > a:hover {
  color: var(--purple-700);
}
.card-point-contact .card-contact-content {
  padding-left: 60px;
  gap: 5px;
  margin-top: 15px;
}
.card-point-contact .card-contact-content > p {
  line-height: 17px;
}
.card-point-contact .card-contact-content > .card-icon {
  position: absolute;
  width: 45px;
  height: 45px;
  left: 0;
  top: 0;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1019607843);
}
.card-point-contact .card-contact-content > .card-icon > img {
  width: 24px;
  height: 24px;
  filter: grayscale(1);
  opacity: 0.85;
}
.card-point-contact .card-contact-content .text-contact-email {
  margin-bottom: 15px;
}
.card-point-contact .card-contact-content .contact-item {
  margin-top: 5px;
  max-width: 280px;
}
@media screen and (max-width: 991px) {
  .card-point-contact {
    background-color: #FFFFFF;
  }
}

.supplier-info-tab-sec {
  background: var(--purple-100);
  border-radius: 8px;
  padding: 20px 0;
  grid-template-columns: repeat(2, 1fr);
}
.supplier-info-tab-sec .txt-tight {
  font-size: 16px;
  line-height: 20px;
}
.supplier-info-tab-sec .card-btn-grp {
  gap: 15px;
  margin-top: 20px;
}
.supplier-info-tab-sec .card-btn-grp > .btn {
  background-color: transparent !important;
  padding: 0;
  width: 105px;
  height: 36px;
}
.supplier-info-tab-sec .card-btn-grp > .btn:hover {
  background-color: var(--orange-400) !important;
}
.supplier-info-tab-sec li {
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.supplier-info-tab-sec li:first-child {
  padding: 0 40px 0 20px;
}
.supplier-info-tab-sec li:last-child {
  padding: 0 20px 0 40px;
  border-left: 1px solid rgba(98, 100, 102, 0.3019607843);
}
.supplier-info-tab-sec .supplier-info-item {
  grid-template-columns: 200px 1fr;
  gap: 20px;
}
.supplier-info-tab-sec .supplier-info-item .supplier-heading-content {
  padding-left: 60px;
  gap: 3px;
}
.supplier-info-tab-sec .supplier-info-item .supplier-heading-content .heading-icon {
  position: absolute;
  width: 45px;
  height: 45px;
  left: 0;
  top: 0;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1019607843);
}
.supplier-info-tab-sec .supplier-info-item .supplier-heading-content .heading-icon > img {
  width: 24px;
  height: 24px;
  filter: grayscale(1);
  opacity: 0.85;
}
.supplier-info-tab-sec .supplier-info-item .supplier-heading-content a {
  text-decoration-line: underline;
  text-underline-offset: 4px;
  color: var(--purple-400);
  width: fit-content;
}
.supplier-info-tab-sec .supplier-info-item .supplier-heading-content a:hover {
  color: var(--purple-700);
}
.supplier-info-tab-sec .supplier-info-item .supplier-body-content {
  gap: 5px;
}
@media screen and (max-width: 1199px) {
  .supplier-info-tab-sec li {
    gap: 35px;
  }
  .supplier-info-tab-sec li:first-child, .supplier-info-tab-sec li:last-child {
    padding: 0 20px;
  }
  .supplier-info-tab-sec .supplier-info-item {
    grid-template-columns: 180px 1fr;
    gap: 10px;
  }
}
@media screen and (max-width: 1023px) {
  .supplier-info-tab-sec {
    grid-template-columns: repeat(1, 1fr);
    gap: 35px;
  }
  .supplier-info-tab-sec li:last-child {
    border-left: 0px solid #000000;
  }
  .supplier-info-tab-sec .supplier-info-item {
    grid-template-columns: 180px 1fr;
    gap: 10px;
  }
}
@media screen and (max-width: 991px) {
  .supplier-info-tab-sec {
    background-color: transparent;
  }
  .supplier-info-tab-sec li {
    padding: 0 !important;
  }
  .supplier-info-tab-sec .supplier-info-item {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 12px;
  }
  .supplier-info-tab-sec .supplier-info-item .supplier-heading-content .heading-icon {
    background-color: var(--purple-100) !important;
  }
}
@media screen and (max-width: 575px) {
  .supplier-info-tab-sec {
    gap: 20px;
  }
  .supplier-info-tab-sec li {
    gap: 20px;
  }
  .supplier-info-tab-sec .supplier-info-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px;
  }
  .supplier-info-tab-sec .supplier-info-item .supplier-heading-content {
    background: var(--purple-100);
    padding: 10px 10px 12px 70px;
    border-radius: 10px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1019607843);
  }
  .supplier-info-tab-sec .supplier-info-item .supplier-heading-content .heading-icon {
    background-color: #FFFFFF !important;
    left: 10px;
    top: 10px;
  }
  .supplier-info-tab-sec .supplier-info-item .supplier-body-content {
    padding: 15px 15px 10px;
  }
}

.doc-list-sec {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.doc-list-sec .doc-item {
  padding: 10px;
  border: 1px solid rgba(98, 100, 102, 0.3);
  border-radius: 8px;
}
.doc-list-sec .doc-item .doc-preview {
  background: #F0F0F0;
  border-radius: 5px;
  aspect-ratio: 1.2;
  max-height: 180px;
  overflow: hidden;
  margin-bottom: 10px;
}
.doc-list-sec .doc-item .doc-preview .btn-view {
  padding: 0;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 10px;
  top: 10px;
  background: #FFFFFF;
}
.doc-list-sec .doc-item .doc-preview .btn-view > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.doc-list-sec .doc-item .doc-preview .btn-view:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.doc-list-sec .doc-item .doc-preview .btn-view > img {
  width: 21px;
}
.doc-list-sec .doc-item .doc-preview > .preview-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  aspect-ratio: 1.2;
}
.doc-list-sec .doc-item .doc-preview > .preview-pdf-icon {
  width: 68px;
  height: 68px;
}
.doc-list-sec .doc-item .doc-item-btn-grp {
  gap: 10px;
  margin-top: 15px;
}
.doc-list-sec .doc-item .doc-item-btn-grp .btn {
  padding: 0;
  width: 25px;
  height: 25px;
}
.doc-list-sec .doc-item .doc-item-btn-grp .btn > img {
  filter: grayscale(1);
  opacity: 0.8;
}
.doc-list-sec .doc-item .doc-item-btn-grp .btn:hover > img {
  filter: grayscale(0);
  opacity: 1;
}
.doc-list-sec .doc-item.doc-drop-sec {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.doc-list-sec .doc-item.doc-drop-sec > img {
  max-height: 110px;
}
@media screen and (max-width: 1199px) {
  .doc-list-sec {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
  .doc-list-sec .doc-item.doc-drop-sec {
    order: -1;
  }
}
@media screen and (max-width: 991px) {
  .doc-list-sec {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  .doc-list-sec .doc-item {
    background-color: #FFFFFF;
  }
}
@media screen and (max-width: 575px) {
  .doc-list-sec {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .doc-list-sec .doc-item.doc-drop-sec {
    grid-column: span 2;
  }
}

.igt-overview-sec {
  display: grid;
  grid-template-columns: minmax(410px, 40%) 1fr;
  gap: 12px;
}
@media screen and (max-width: 1199px) {
  .igt-overview-sec {
    grid-template-columns: repeat(1, 1fr);
  }
  .igt-overview-sec.job-shop-overview-sec {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .igt-overview-sec {
    gap: 10px;
  }
}
@media screen and (max-width: 575px) {
  .igt-overview-sec {
    gap: 8px;
  }
}

.igt-info-sec {
  background-image: url("/yantra/images/img-pattern-1.png"); /* original was "../images/img-pattern-1.png" */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 110% 110%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  grid-row: span 2;
}
.igt-info-sec .igt-top-sec {
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid rgba(28, 32, 57, 0.2);
}
.igt-info-sec .igt-bottom-sec {
  padding: 20px;
}
@media screen and (max-width: 1199px) {
  .igt-info-sec {
    grid-row: span 1;
  }
  .igt-info-sec .igt-top-sec {
    gap: 12px;
    padding: 15px 15px 10px;
  }
  .igt-info-sec .igt-bottom-sec {
    padding: 10px 15px 15px;
  }
}

.igt-status {
  background: var(--green-400);
  padding: 3px 10px 4px;
  height: 28px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.igt-info .igt-no {
  font-size: 20px;
  line-height: 19px;
  letter-spacing: 0.4px;
}
.igt-info .igt-type {
  margin-top: 8px;
  padding: 5px 10px 6px;
  background: rgba(32, 32, 24, 0.3);
  border-radius: 6px;
  line-height: 17px;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.igt-details {
  font-size: 16px;
  line-height: 19px;
  margin-top: 11px;
  cursor: pointer;
}
.igt-details svg {
  margin-right: -5px;
}
.igt-details:hover {
  opacity: 0.85;
}

.igt-sec {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.igt-sec .igt-item > label {
  font-size: 15px;
  line-height: 18px;
  opacity: 0.8;
}
.igt-sec .igt-item > p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-top: 5px;
}

.origin-sec {
  display: grid;
  grid-template-columns: minmax(240px, 40%) 1fr;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 18px;
}
.origin-sec label {
  font-size: 15px;
  line-height: 18px;
}
.origin-sec p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--text-800);
  margin-top: 5px;
}
@media screen and (max-width: 991px) {
  .origin-sec {
    gap: 5px;
    padding: 10px;
  }
}

.igt-right-overview-sec {
  display: grid;
  grid-template-columns: minmax(255px, 30%) 1fr;
  gap: 12px;
}
@media screen and (max-width: 991px) {
  .igt-right-overview-sec {
    grid-template-columns: minmax(200px, 30%) 1fr;
  }
}
@media screen and (max-width: 575px) {
  .igt-right-overview-sec {
    grid-template-columns: 1fr;
  }
}

.igt-form-sec {
  grid-column: span 2 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 20px;
  gap: 20px;
}
.igt-form-sec .igt-form-btn {
  grid-column: span 4 !important;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}
.igt-form-sec .igt-form-btn .btn-prod-trafr {
  height: 42px;
  padding: 0 20px;
  background: #000000;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 991px) {
  .igt-form-sec {
    grid-template-columns: repeat(2, 1fr);
  }
  .igt-form-sec .igt-form-btn {
    grid-column: span 2 !important;
  }
}
@media screen and (max-width: 575px) {
  .igt-form-sec {
    grid-column: span 1 !important;
    grid-template-columns: repeat(1, 1fr);
  }
  .igt-form-sec .igt-form-btn {
    grid-column: span 1 !important;
  }
}

.igt-products-content-table .td-destination-loc {
  text-align: left;
}
@media screen and (max-width: 991px) {
  .igt-products-content-table td.td-seq {
    grid-column: span 1 !important;
    font-size: 14px !important;
  }
  .igt-products-content-table td.td-seq::before {
    display: inline-flex !important;
  }
}

.followup-overview-sec {
  display: grid;
  grid-template-columns: minmax(410px, 45%) 1fr;
  gap: 12px;
}
.followup-overview-sec.job-shop-overview-sec {
  grid-template-columns: minmax(50%, 765px) 1fr;
}
@media screen and (max-width: 1199px) {
  .followup-overview-sec {
    grid-template-columns: repeat(1, 1fr);
  }
  .followup-overview-sec.job-shop-overview-sec {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .followup-overview-sec {
    gap: 10px;
  }
}
@media screen and (max-width: 575px) {
  .followup-overview-sec {
    gap: 8px;
  }
}

.followup-info-sec {
  background-image: url("/yantra/images/img-pattern-1.png"); /* original was "../images/img-pattern-1.png" */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 110% 110%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  overflow: hidden;
}
.followup-info-sec .followup-top-sec {
  gap: 20px;
  padding: 20px;
}
.followup-info-sec .followup-bottom-sec {
  padding: 20px;
  background-color: #FFFFFF;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.followup-info-sec .followup-bottom-sec .form-item-message, .followup-info-sec .followup-bottom-sec .followup-form-btn {
  grid-column: span 2;
}
.followup-info-sec .followup-bottom-sec .followup-form-btn .btn-followup-submit {
  width: 100px;
  height: 36px;
  background: var(--orange-400);
  border: 1px solid var(--orange-400);
  border-radius: 50px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
}
.followup-info-sec .followup-bottom-sec .followup-form-btn .btn-followup-submit:hover {
  background: var(--orange-700);
  border-color: var(--orange-700);
}
@media screen and (max-width: 1199px) {
  .followup-info-sec {
    grid-row: span 1;
  }
  .followup-info-sec .followup-top-sec {
    gap: 12px;
    padding: 15px 15px 10px;
  }
  .followup-info-sec .followup-bottom-sec {
    padding: 10px 15px 15px;
  }
}
@media screen and (max-width: 575px) {
  .followup-info-sec .followup-bottom-sec {
    padding: 15px;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  .followup-info-sec .followup-bottom-sec .form-item-message, .followup-info-sec .followup-bottom-sec .followup-form-btn {
    grid-column: span 1;
  }
}

.status-dropdown .btn-status {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 3px 10px 4px;
  height: 28px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.status-dropdown .btn-status:active {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}
.status-dropdown .btn-status:hover {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.followup-status {
  background: var(--green-400);
  padding: 3px 10px 4px;
  height: 28px;
  line-height: 19px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.followup-info .followup-no {
  font-size: 20px;
  line-height: 19px;
  letter-spacing: 0.4px;
}
.followup-info .followup-type {
  margin-top: 8px;
  padding: 5px 10px 6px;
  background: rgba(32, 32, 24, 0.3);
  border-radius: 6px;
  line-height: 17px;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.followup-money-type {
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
}

.party-details {
  font-size: 16px;
  line-height: 19px;
  margin-top: 11px;
  cursor: pointer;
}
.party-details svg {
  margin-right: -5px;
}
.party-details:hover {
  opacity: 0.85;
}

.action-log-history-sec {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.action-log-history-sec > h3 {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-transform: capitalize;
  color: #000002;
  margin-bottom: 20px;
}
.action-log-history-sec .history-table-sec {
  flex-grow: 1;
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .action-log-history-sec {
    background: transparent;
    padding: 0;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .action-log-history-sec > h3 {
    margin-bottom: 10px;
  }
  .action-log-history-sec .history-table-sec {
    margin-bottom: 5px;
  }
}

.receipt-overview-sec {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 10px;
}
@media screen and (max-width: 991px) {
  .receipt-overview-sec {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
}

.receipt-overview-card {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
}
.receipt-overview-card .receipt-overview-card-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(98, 100, 102, 0.3019607843);
}
.receipt-overview-card .receipt-overview-card-header > h4 {
  font-size: 18px;
  line-height: 22px;
  text-transform: capitalize;
}
.receipt-overview-card .receipt-overview-card-body {
  padding: 20px;
}
.receipt-overview-card .receipt-overview-card-body .receipt-text-list {
  gap: 10px;
}
.receipt-overview-card .receipt-overview-card-body .receipt-text-list .receipt-text-item {
  gap: 20px;
}
.receipt-overview-card .receipt-overview-card-body .receipt-text-list .receipt-text-item > p {
  font-size: 16px;
  line-height: 20px;
  text-align: right;
  letter-spacing: 0.01em;
}

.receipt-info-sec {
  margin-bottom: 25px;
  position: relative;
}
.receipt-info-sec::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 36px;
  left: 0;
  bottom: -15px;
  background-image: url("/yantra/images/img-receipt-pattern.png"); /* original was "../images/..." */
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 102% 100%;
}
.receipt-info-sec.offcanvas-receipt-info-sec {
  margin-bottom: 0;
}
.receipt-info-sec.offcanvas-receipt-info-sec::before {
  display: none;
}

.receipt-top-sec {
  gap: 15px;
  padding: 20px;
  position: relative;
}
.receipt-top-sec::before {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  height: 1px;
  width: 100%;
  background: repeating-linear-gradient(to right, rgba(98, 100, 102, 0.5019607843) 0, rgba(98, 100, 102, 0.5019607843) 6px, transparent 6px, transparent 12px);
  background-size: 10px 1px;
}
.receipt-top-sec .receipt-info {
  gap: 8px;
}

.receipt-from-to-sec {
  padding: 16px 20px 20px;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.receipt-from-to-sec label {
  font-size: 14px;
  line-height: 19px;
  color: var(--text-300);
  margin-bottom: 5px;
}
.receipt-from-to-sec p {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.01em;
}

.receipt-price-sec {
  background-image: url("/yantra/images/img-pattern-1.png"); /* original was "../images/img-pattern-1.png" */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 110% 110%;
  padding: 16px 19px 20px;
  gap: 10px;
}
.receipt-price-sec .date-sec {
  grid-template-columns: 150px 1fr;
  gap: 10px;
}
.receipt-price-sec .price-item > p {
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.01em;
  margin-top: 5px;
}
.receipt-price-sec .date-sec {
  margin-top: 5px;
}
.receipt-price-sec .date-item > label {
  font-size: 15px;
  line-height: 18px;
}
.receipt-price-sec .date-item > p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-top: 5px;
}

.receipt-text-details-sec {
  padding: 15px;
}

.financial-account-top-sec {
  margin-bottom: 20px;
}
.financial-account-top-sec .text-no {
  color: var(--purple-400);
}
.financial-account-top-sec .fin-acc-status {
  padding: 0 10px;
  min-width: 90px;
  height: 28px;
  background: #0848DE;
  line-height: 19px;
}

.financial-account-img-sec {
  margin-top: 35px;
}

.payment-summery-content-table .td-invoice-id, .payment-summery-content-table .td-payment-id {
  color: var(--purple-400);
}
.payment-summery-content-table .td-invoice-id::before, .payment-summery-content-table .td-payment-id::before {
  text-decoration: none !important;
}

.page-form-sec {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
}
.page-form-sec > .btn-page-form {
  background-color: #FFFFFF;
  padding: 17px 54px 15px 20px;
  position: relative;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-transform: capitalize;
  color: #000000;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.page-form-sec > .btn-page-form .collapse-icon {
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  right: 20px;
  display: none;
}
.page-form-sec > .btn-page-form .collapse-icon.collapse-icon-collapse {
  display: flex;
}
.page-form-sec > .btn-page-form.collapsed .collapse-icon.collapse-icon-collapse {
  display: none;
}
.page-form-sec > .btn-page-form.collapsed .collapse-icon.collapse-icon-expand {
  display: flex;
}

.page-form-body {
  /* border-top: 1px solid rgba(98, 100, 102, 0.3019607843); commented by Shraddha on 16-JUN-2026 as this created a top line */
  /* grid-template-columns: 328px 1fr; Commented this and added both below to make the columns of equal size */
  grid-template-columns: 1fr 1fr; /* Added 19-MAY-2026 */
  gap: 1.5rem; /* Added 19-MAY-2026 */
}

.page-form-body .btn-add-invoice-form {
  min-width: 100px;
  margin: 10px 0 15px;
}
@media screen and (max-width: 991px) {
  .page-form-body {
    grid-template-columns: 1fr;
  }
}

.form-category-list {
  padding: 10px; /* Changed tp 10px from 20px on 22-JUN-2026 */
  position: relative;
}
@media screen and (max-width: 991px) {
  .form-category-list {
    display: none;
  }
}


/* STARTS ADDED by SHRADDHA on 01-JUN-2026 */
@media screen and (min-width: 576px) {
	.page-form-body {
  		grid-template-columns: repeat(2, 1fr); /*  Creates 3 equal-width columns */
	}
}


@media screen and (min-width: 992px) {
	.page-form-body {
  		grid-template-columns: repeat(3, 1fr); /*  Creates 4 equal-width columns */
	}
}


@media screen and (min-width: 1200px) {
	.page-form-body {
  		grid-template-columns: repeat(4, 1fr); /*  Creates 4 equal-width columns */
	}
}

/* ENDS ADDED by SHRADDHA on 01-JUN-2026 */



.form-category-list ul {
  gap: 15px;
  background: #F0F0F0;
  border-radius: 8px;
  padding: 5px 0 5px 0; /* Changed on 22-JUN-2026 Original was padding: 15px 0;*/
  position: absolute;
  width: calc(100% - 40px) !important;
  will-change: transform;
}
.form-category-list ul li {
  width: 100%;
  position: relative;
  cursor: pointer;
}
.form-category-list ul li .form-category-icon {
  position: absolute;
  width: 45px;
  height: 45px;
  left: 20px;
  top: 5px;
  border: 1px solid rgba(98, 100, 102, 0.3019607843);
}
.form-category-list ul li .form-category-icon > img {
  filter: grayscale(1);
}
.form-category-list ul li .form-category-content {
  min-height: 35px; /* Changed on 21-JUN-2026, original was 55px; */
  padding: 5px 10px 5px 20px; /* Changed on 21-JUN-2026, original was padding: 5px 20px 5px 80px; */
  font-weight: 500;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.01em;
}
.form-category-list ul li.active {
  background-color: #E6D4FF;
}
.form-category-list ul li.active .form-category-icon {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid #FFFFFF;
}
.form-category-list ul li.active .form-category-icon > img {
  filter: grayscale(0);
}
.form-category-list ul li.active .form-category-content {
  font-weight: 600;
}
.form-category-list ul li.active::before {
  content: "";
  position: absolute;
  right: -11px;
  top: calc(50% - 12px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #E6D4FF;
}

.page-form-data {
  padding: 10px 20px 10px 10px;
  gap: 15px;
}
@media screen and (max-width: 991px) {
  .page-form-data {
    padding: 10px 20px;
  }
}
.page-form-data .form-data-item .form-data-heading {
  padding: 12px 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  text-transform: capitalize;
  color: #000000;
}
.page-form-data .form-data-item .form-data-body {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-form-data .form-data-item .form-data-body .form-item.form-item-message {
  grid-column: span 2;
}
@media screen and (max-width: 991px) {
  .page-form-data .form-data-item .form-data-body {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media screen and (max-width: 575px) {
  .page-form-data .form-data-item .form-data-body {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  .page-form-data .form-data-item .form-data-body .form-item.form-item-message {
    grid-column: span 1;
  }
}

.invoice-item-details-body {
  margin: 15px 0 20px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 10px;
}
@media screen and (max-width: 991px) {
  .invoice-item-details-body {
    padding: 0;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
  }
}

.table-invoice-item-detail .form-control, .table-invoice-item-detail .form-select {
  min-height: 30px;
  height: 30px !important;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}
.table-invoice-item-detail .small-text {
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  line-height: 18px;
  color: var(--text-300);
  text-align: left;
  width: 100%;
  white-space: break-spaces;
  margin-top: 3px;
}
.table-invoice-item-detail tbody .td-item-no {
  padding-top: 10px !important;
}
.table-invoice-item-detail tbody .td-type .form-select {
  min-width: 130px;
}
.table-invoice-item-detail tbody .td-qty .form-control {
  min-width: 60px;
}
.table-invoice-item-detail tbody .td-unit-price .form-control {
  min-width: 75px;
}
.table-invoice-item-detail tbody .td-product .input-group {
  max-width: 155px;
  min-width: 140px;
}
.table-invoice-item-detail tbody .td-desc {
  min-width: 200px;
}
.table-invoice-item-detail tbody .td-desc > p {
  white-space: break-spaces;
  text-align: left;
}
.table-invoice-item-detail tbody .td-override-org-party .input-group {
  max-width: 155px;
  min-width: 140px;
}
.table-invoice-item-detail tbody .td-override-acct .input-group {
  max-width: 155px;
  min-width: 140px;
}
.table-invoice-item-detail tbody .td-override-acct .small-text {
  min-width: 160px;
}
.table-invoice-item-detail tbody .td-tds-app .form-select {
  min-width: 115px;
}
.table-invoice-item-detail tbody .td-tds-section .form-select {
  min-width: 245px;
}
.table-invoice-item-detail tbody .td-seq-id .form-control {
  min-width: 90px;
}
.table-invoice-item-detail tbody .td-total {
  padding-top: 10px !important;
}
@media screen and (max-width: 767px) {
  .table-invoice-item-detail tbody td {
    padding: 8px 5px !important;
  }
}

.find-job-search-sec {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  overflow: hidden;
}
.find-job-search-sec .form-control, .find-job-search-sec .form-select {
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 0.01em;
}

.job-search-top-sec {
  padding: 24px 300px 24px 30px;
  gap: 10px;
  background: linear-gradient(113.36deg, #D94F70 0.16%, #c23860 33.92%, #a82e50 54.02%, #D94F70 88.74%, #e76b88 114.66%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.job-search-top-sec .img-find-job {
  max-width: 250px;
  position: absolute;
  right: 30px;
  bottom: 0;
}
@media screen and (max-width: 1399px) {
  .job-search-top-sec {
    padding: 20px 300px 20px 20px;
  }
}
@media screen and (max-width: 1199px) {
  .job-search-top-sec {
    padding: 15px 300px 15px 10px;
  }
}
@media screen and (max-width: 991px) {
  .job-search-top-sec {
    padding: 15px 10px;
  }
  .job-search-top-sec .img-find-job {
    display: none;
  }
}

.search-by-sec {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-by-sec > span {
  width: 90px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  opacity: 0.7;
}
.search-by-sec > ul.nav {
  border: 1px solid rgba(255, 255, 255, 0.3019607843);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  padding: 3px;
}
.search-by-sec > ul.nav .nav-link {
  height: 30px;
  border-radius: 50px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  padding: 0 15px;
}
.search-by-sec > ul.nav .nav-link.active {
  background: #000000;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 575px) {
  .search-by-sec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .search-by-sec > span {
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 399px) {
  .search-by-sec > ul.nav .nav-link {
    padding: 0 10px;
  }
}

.search-sec {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.search-sec .inp-search {
  position: relative;
  flex-grow: 1;
}
.search-sec .inp-search .icon-search {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 24px;
  top: calc(50% - 12px);
}
.search-sec .inp-search .form-control {
  padding: 2px 140px 2px 60px;
  height: 45px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
}
.search-sec .inp-search .btn-search {
  width: 120px;
  height: 41px;
  position: absolute;
  right: 2px;
  top: 2px;
}
.search-sec .form-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  /* Added below by SHraddha on 25-JUN-2026 */
  white-space: nowrap;
}
.search-sec .form-check .form-check-input {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5019607843);
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.search-sec .form-check .form-check-input:focus {
  border-color: rgba(255, 255, 255, 0.5019607843);
  outline: 0;
  box-shadow: 0 0 0 0 #000000;
}
.search-sec .form-check .form-check-input:checked {
  border-color: #000000;
  background-color: #000000;
}
.search-sec .form-check .form-check-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  cursor: pointer;
  /* Added below by SHraddha on 25-JUN-2026 */
  white-space: nowrap;
}
@media screen and (max-width: 575px) {
  .search-sec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .search-sec .inp-search {
    width: 100%;
  }
  .search-sec .inp-search .icon-search {
    left: 13px;
  }
  .search-sec .inp-search .form-control {
    padding: 2px 80px 2px 46px;
  }
  .search-sec .inp-search .btn-search {
    width: 75px;
  }
  .search-sec .form-check {
    margin-left: 10px;
  }
  .search-sec .form-check .form-check-input {
    margin: 0;
  }
}

.job-search-bottom-sec {
  grid-template-columns: repeat(4, 1fr);
  padding: 20px 0;
}
@media screen and (max-width: 991px) {
  .job-search-bottom-sec {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .job-search-bottom-sec {
    grid-template-columns: repeat(1, 1fr);
    padding: 0;
  }
}

.job-search-status {
  padding: 0 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px; /* Changed 04-AUG-2026 10px; */
  height: fit-content;
}
.job-search-status > .txt-title {
  width: 100%;
  grid-column: span 2;
}
.job-search-status .form-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 0;
  padding-left: 33px; /* 40px; was original, changed on 25-JUN-2026 */
  padding-right: 10px; /* 15px; was original, changed on 25-JUN-2026 */
  border: 1px solid rgba(98, 100, 102, 0.3019607843);
  border-radius: 50px;
  position: relative;
  /* Added below by SHraddha on 25-JUN-2026 */
  white-space: nowrap;
  padding-top: 0.221rem;
  padding-bottom: 0.219rem;
  padding-top: 4px;
  padding-bottom: 3px;
  border: none;
  background-color: rgba(98,100,102,0.08);
}
.job-search-status .form-check .form-check-input {
  background-color: #FFFFFF;
  border: 1px solid rgba(98, 100, 102, 0.3019607843);
  width: 26px;
  height: 26px;
  border-radius: 51%;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 13px);
  margin: 0;
  left: -2px; /* 3px; was original, changed on 25-JUN-2026 */
}
.job-search-status .form-check .form-check-input:focus {
  border-color: rgba(98, 100, 102, 0.3019607843);
  outline: 0;
  box-shadow: 0 0 0 0 #000000;
}
.job-search-status .form-check .form-check-input:checked {
  border-color: #000000;
  background-color: #000000;
}
.job-search-status .form-check .form-check-label {
  font-size: 14px;
  line-height: 34px;
  letter-spacing: 0.01em;
  color: var(--text-300);
  cursor: pointer;
}
.job-search-status .form-check .form-check-input:checked + .form-check-label {
  color: #000000;
  font-weight: 500;
}
@media screen and (max-width: 1399px) {
  .job-search-status {
    padding: 0 20px;
  }
}
@media screen and (max-width: 1199px) {
  .job-search-status {
    padding: 0 10px;
  }
}
@media screen and (max-width: 991px) {
  .job-search-status {
    padding: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .job-search-status {
    padding: 20px;
  }
}

.job-search-other {
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid rgba(98, 100, 102, 0.3019607843);
  border-right: 1px solid rgba(98, 100, 102, 0.3019607843);
}
@media screen and (max-width: 1399px) {
  .job-search-other {
    padding: 0 20px;
  }
}
@media screen and (max-width: 1199px) {
  .job-search-other {
    padding: 0 10px;
  }
}
@media screen and (max-width: 991px) {
  .job-search-other {
    padding: 0 20px;
    border-right: 0px solid rgba(98, 100, 102, 0.3019607843);
  }
}
@media screen and (max-width: 991px) {
  .job-search-other {
    padding: 0 20px;
    border-right: 0px solid rgba(98, 100, 102, 0.3019607843);
  }
}
@media screen and (max-width: 767px) {
  .job-search-other {
    padding: 20px;
    border-right: 0px solid rgba(98, 100, 102, 0.3019607843);
    border-left: 0px solid rgba(98, 100, 102, 0.3019607843);
    border-top: 1px solid rgba(98, 100, 102, 0.3019607843);
    border-bottom: 1px solid rgba(98, 100, 102, 0.3019607843);
  }
}

.job-search-date {
  padding: 0 30px;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.job-search-date .inp-date-sec {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr 2fr;
  gap: 20px;
}
.job-search-date > div label {
  margin-bottom: 3px;
}
@media screen and (max-width: 1399px) {
  .job-search-date {
    padding: 0 20px;
  }
}
@media screen and (max-width: 1199px) {
  .job-search-date {
    padding: 0 10px;
  }
}
@media screen and (max-width: 991px) {
  .job-search-date {
    padding: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .job-search-date {
    grid-column: span 1;
    padding: 20px;
  }
}
@media screen and (max-width: 575px) {
  .job-search-date .inp-date-sec {
    grid-template-columns: 3fr 2fr;
    gap: 10px;
  }
}

.job-result-list {
  gap: 10px;
  margin: 10px 0 22px;
}

.job-result-item {
  background: #FFFFFF;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 18px;
}

.job-top-item {
  margin: 15px 0 0;
}
.job-top-item .ribbon-sec {
  line-height: 17px;
  letter-spacing: 0.01em;
  color: var(--brand-color);
  padding: 6px 0 6px 20px;
  width: calc(100% - 20px);
  max-width: fit-content;
  background-color: var(--yellow-400);
  position: absolute;
  left: 0px;
  top: 0;
}
.job-top-item .ribbon-sec > img {
  right: -20px;
  height: calc(100% + 1px);
}
.job-top-item .ribbon-sec > span {
  display: inline-block;
  width: 100%;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-top-item .job-status {
  padding: 4px 10px;
  position: absolute;
  height: 32px;
  right: 20px;
  top: 0;
  border-radius: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.job-top-item .job-status.status-completed {
  background: #E9FFDC;
  border: 1px solid #C8F1B0;
  color: var(--green-400);
}

.job-item-header {
  width: 100%;
  padding: 0 135px 0 145px;
}
.job-item-header > h3 {
  font-size: 16px;
  line-height: 19px;
  margin-bottom: 8px;
}
.job-item-header > ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.job-item-header > ul li {
  gap: 15px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.job-item-header > ul li label {
  white-space: nowrap;
}
.job-item-header > ul li p {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.01em;
}
.job-item-header > ul li:last-child {
  border-left: 1px solid rgba(0, 0, 0, 0.3019607843);
  padding-left: 15px;
  margin-left: 15px;
}
@media screen and (max-width: 991px) {
  .job-item-header {
    padding: 45px 15px 0 15px;
  }
  .job-item-header > ul li {
    gap: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 575px) {
  .job-item-header > ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .job-item-header > ul li:last-child {
    border-left: 0px solid rgba(0, 0, 0, 0.3019607843);
    padding-left: 0px;
    margin-left: 0px;
    margin-top: 10px;
  }
}
@media screen and (max-width: 399px) {
  .job-item-header {
    padding: 45px 10px 0 10px;
  }
}

.job-bottom-item {
  padding: 15px 20px;
  gap: 15px;
}
.job-bottom-item p {
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--text-800);
}
.job-bottom-item .product-info-sec {
  background: var(--purple-100);
  border-radius: 6px;
  padding: 10px 5px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.job-bottom-item .product-info-sec li {
  gap: 15px;
  border-right: 1px solid rgba(0, 0, 0, 0.3019607843);
  padding: 0 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.job-bottom-item .product-info-sec li p {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.01em;
}
.job-bottom-item .product-info-sec li:last-child {
  border-right: 0px solid rgba(0, 0, 0, 0.3019607843);
  padding-right: 0;
  margin-right: 0;
}
.job-bottom-item .other-info-sec {
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.job-bottom-item .other-info-sec > li:last-child {
  grid-column: span 2;
}
@media screen and (max-width: 1199px) {
  .job-bottom-item .product-info-sec li {
    gap: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 991px) {
  .job-bottom-item .product-info-sec {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 10px;
  }
  .job-bottom-item .product-info-sec li:nth-child(3) {
    border-right: 0px solid rgba(0, 0, 0, 0.3019607843);
  }
  .job-bottom-item .other-info-sec {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}
@media screen and (max-width: 575px) {
  .job-bottom-item .product-info-sec {
    grid-template-columns: repeat(2, 1fr);
  }
  .job-bottom-item .product-info-sec li:nth-child(3) {
    border-right: 1px solid rgba(0, 0, 0, 0.3019607843);
  }
  .job-bottom-item .product-info-sec li:nth-child(2n) {
    border-right: 0px solid rgba(0, 0, 0, 0.3019607843);
  }
  .job-bottom-item .other-info-sec {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 399px) {
  .job-bottom-item {
    padding: 15px 10px;
  }
  .job-bottom-item .product-info-sec {
    padding: 10px 0;
  }
  .job-bottom-item .product-info-sec li {
    padding: 0 10px;
  }
  .job-bottom-item .other-info-sec {
    grid-template-columns: repeat(1, 1fr);
  }
  .job-bottom-item .other-info-sec > li:last-child {
    grid-column: span 1;
  }
}

.shipment-form-date-section {
  grid-column: span 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .shipment-form-date-section {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 399px) {
  .shipment-form-date-section {
    grid-template-columns: repeat(1, 1fr);
  }
}

.module-content-sec {
  border-radius: 18px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1019607843);
}
.module-content-sec .module-content-header {
  padding: 20px;
  border-bottom: 1px solid rgba(98, 100, 102, 0.3019607843);
}
.module-content-sec .module-content-body {
  padding: 20px;
}
.module-content-sec .module-content-body .module-model-card {
  padding: 20px 25px;
  border-radius: 15px;
}
.module-content-sec .module-content-body .module-model-card label {
  font-size: 15px;
  line-height: 18px;
  margin-bottom: 5px;
}
.module-content-sec .module-content-body .module-model-card p {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.01em;
}

.module-sec-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  text-transform: capitalize;
  color: #000002;
  margin: 20px 0 12px;
}

.overview-models, .prod-job-cycle-sec {
  background: var(--purple-100);
  border-radius: 6px;
  padding: 24px;
  gap: 20px;
}
@media screen and (max-width: 1199px) {
  .overview-models, .prod-job-cycle-sec {
    padding: 20px;
  }
}

.overview-grids-sec {
  grid-template-columns: repeat(5, minmax(120px, 200px));
  justify-content: space-between;
  gap: 10px;
}
.overview-grids-sec .grid-item-chip {
  padding: 9px 10px;
  gap: 12px;
  font-size: 16px;
  line-height: 19px;
}
.overview-grids-sec .grid-item-chip .grid-item-icon {
  width: 40px;
  height: 40px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.13);
}
.overview-grids-sec .grid-item-chip .grid-item-icon > img {
  width: 20px;
}
.overview-grids-sec .grid-item-list {
  padding: 14px 10px 10px 20px;
  gap: 10px;
  position: relative;
}
.overview-grids-sec .grid-item-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  height: calc(100% - 18px);
  width: 2px;
  z-index: 0;
  background: repeating-linear-gradient(to top, #cfcfd3 0, #cfcfd3 6px, transparent 6px, transparent 12px);
  background-size: 2px 24px;
  animation: moveLine1 1s linear infinite;
}
@keyframes moveLine1 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 24px;
  }
}
.overview-grids-sec .grid-item-list p {
  font-size: 15px;
  line-height: 18px;
  padding-left: 45px;
  position: relative;
}
.overview-grids-sec .grid-item-list p::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0;
  top: 5px;
  border-radius: 51%;
}
.overview-grids-sec .grid-item-sky .grid-item-chip {
  background-color: #1D9BF0;
}
.overview-grids-sec .grid-item-sky .grid-item-list p::before {
  background-color: #1D9BF0;
}
.overview-grids-sec .grid-item-blue .grid-item-chip {
  background-color: #0033A9;
}
.overview-grids-sec .grid-item-blue .grid-item-list p::before {
  background-color: #0033A9;
}
.overview-grids-sec .grid-item-orange .grid-item-chip {
  background-color: #D94F70;
}
.overview-grids-sec .grid-item-orange .grid-item-list p::before {
  background-color: #D94F70;
}
.overview-grids-sec .grid-item-yellow .grid-item-chip {
  background-color: #FFB218;
}
.overview-grids-sec .grid-item-yellow .grid-item-list p::before {
  background-color: #FFB218;
}
.overview-grids-sec .grid-item-green .grid-item-chip {
  background-color: #00A964;
}
.overview-grids-sec .grid-item-green .grid-item-list p::before {
  background-color: #00A964;
}
@media screen and (max-width: 1023px) {
  .overview-grids-sec {
    grid-template-columns: repeat(3, minmax(120px, 200px));
    row-gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .overview-grids-sec {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 575px) {
  .overview-grids-sec {
    grid-template-columns: repeat(1, 1fr);
  }
}

.overview-prod-sec {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media screen and (max-width: 1199px) {
  .overview-prod-sec {
    gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .overview-prod-sec {
    grid-template-columns: repeat(1, 1fr);
  }
}

.job-cycle-grids-sec {
  grid-template-columns: repeat(8, minmax(100px, 150px));
  justify-content: space-between;
  gap: 10px;
  margin-top: 25px;
}
.job-cycle-grids-sec .grids-item {
  width: 100%;
  background-color: #FBFFFE;
  border-radius: 15px;
  position: relative;
  padding: 0px 10px 18px;
  text-align: center;
}
.job-cycle-grids-sec .grids-item .grid-item-icon {
  width: 64px;
  height: 64px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.13);
  margin: -25px auto 10px;
}
.job-cycle-grids-sec .grids-item .grid-item-icon > img {
  width: 32px;
  filter: brightness(0) invert(1);
}
.job-cycle-grids-sec .grids-item p {
  font-size: 16px;
  line-height: 20px;
  min-height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.job-cycle-grids-sec .grids-item.grids-item-blue {
  background-color: #D3E0FF;
}
.job-cycle-grids-sec .grids-item.grids-item-blue .grid-item-icon {
  background-color: #0033A9;
}
.job-cycle-grids-sec .grids-item.grids-item-orange {
  background-color: #FFE9E0;
}
.job-cycle-grids-sec .grids-item.grids-item-orange .grid-item-icon {
  background-color: #D94F70;
}
.job-cycle-grids-sec .grids-item.grids-item-green {
  background-color: #FBFFFE;
}
.job-cycle-grids-sec .grids-item.grids-item-green .grid-item-icon {
  background-color: #00A964;
}
.job-cycle-grids-sec .grids-item.grids-item-yellow {
  background-color: #FFF5E0;
}
.job-cycle-grids-sec .grids-item.grids-item-yellow .grid-item-icon {
  background-color: #FFB218;
}
.job-cycle-grids-sec .grids-item.grids-item-teal {
  background-color: #CBF1EF;
}
.job-cycle-grids-sec .grids-item.grids-item-teal .grid-item-icon {
  background-color: #02BBAE;
}
.job-cycle-grids-sec .grids-item.grids-item-gray {
  background-color: #E3E4E8;
}
.job-cycle-grids-sec .grids-item.grids-item-gray .grid-item-icon {
  background-color: #A4A7AE;
}
.job-cycle-grids-sec .grids-item.grids-item-purple {
  background-color: #E9DAFF;
}
.job-cycle-grids-sec .grids-item.grids-item-purple .grid-item-icon {
  background-color: #6D0AFB;
}
@media screen and (max-width: 1023px) {
  .job-cycle-grids-sec {
    grid-template-columns: repeat(4, minmax(100px, 150px));
    row-gap: 40px;
  }
}
@media screen and (max-width: 767px) {
  .job-cycle-grids-sec {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 399px) {
  .job-cycle-grids-sec {
    grid-template-columns: repeat(1, 1fr);
  }
}

.job-prod-sec {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 20px;
}
@media screen and (max-width: 1199px) {
  .job-prod-sec {
    gap: 20px;
  }
}
@media screen and (max-width: 991px) {
  .job-prod-sec {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 575px) {
  .job-prod-sec {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*# sourceMappingURL=style.css.map */


/* ============================================================
   MOI4E CHROME INTEGRATION FOR THE YANTRA NEW SCREENS
   (rewritten 17-AUG-2026)

   What this replaces
   ------------------
   This slot used to hold a long list of "display: flex !important" rules whose
   only job was to undo override.css's ".d-flex{display:block!important}" and
   ".row{display:inherit!important}". Those legacy rules are now scoped to
   "body:not(.newui)" in override.css, so the new screens get untouched
   Bootstrap 5 behaviour - identical to yantra - and the counter-layer is gone.
   That matters for devices: the old counter-rules were unconditional !important
   declarations, so they also beat Bootstrap's responsive utilities
   (d-lg-none, flex-lg-nowrap, ...) and yantra's own breakpoints, which is why
   the pages did not reflow correctly at any screen size.

   What is left here
   -----------------
   Only the genuine difference between the two themes: the page chrome.

     yantra  - left rail is .page-nav, 94px, in normal flow;
               header .header-sec is position-sticky, so it occupies flow space.
     moi4e   - left rail is .sidebar, position:fixed, 60px at >=992px and
               off-canvas at <=991px; top bar #main-navigation-bar is
               position:fixed, height 60px.

   Because both of moi4e's bars are position:fixed they reserve no space, and the
   new-UI wrapper .page-container carries no offset of its own (.container-wide,
   which normally does that for old screens, is not emitted on the new-UI path).
   So the offsets have to be supplied here, per breakpoint.
   ============================================================ */

/* --- Offset the content for moi4e's two fixed bars ----------------------
   IMPORTANT: these offsets must go on .page-content, NOT on .page-container.
   #main-navigation-bar declares "position:fixed" but no top/left, so it is
   painted at its STATIC position - which means any padding on .page-container
   (its parent) physically moves the top bar itself. Padding there pushed the
   bar down by 60px and right by 60px, dropping the app menu out above it and
   making its width:100% overflow into a horizontal scrollbar.
   .page-content comes after both fixed bars in the DOM, so margins here shift
   only the content and leave the bars anchored where they were.

   top    : clears the fixed 60px #main-navigation-bar
   left   : clears the fixed .sidebar - 60px at >=992px, off-canvas (so no
            offset) at <=991px, 70px when pinned open via .is-expand, which
            next-sidebar.js toggles on body.app

   The top offset uses padding, not margin, on purpose: both fixed bars are out
   of flow, which makes .page-content the first IN-FLOW child of .page-container,
   and a top margin on a first in-flow child collapses through its parent. That
   would move .page-container itself - and with it the statically-positioned top
   bar - reintroducing the very bug this block is fixing. Padding cannot collapse.
   Horizontal margins never collapse, so margin-left is safe below. */
body.newui .page-content {
  padding-top: 60px;
  width: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
}

@media screen and (min-width: 992px) {
  body.newui .page-content {
    margin-left: 60px;
    width: calc(100% - 60px);
  }
  body.newui.is-expand .page-content {
    margin-left: 70px;
    width: calc(100% - 70px);
  }
}

/* --- Neutralise the legacy .contentarea padding on new screens ----------
   moi4e-main-theme.less sets ".contentarea{padding:2rem}" (20px at moi4e's
   10px root font-size). The new-UI wrapper carries both .page-content and
   .contentarea, so that 20px was added on top of yantra's own spacing on
   every new screen. yantra has no .contentarea rule at all. */
body.newui .page-content.contentarea {
  padding: 0;

  margin-bottom: 2.5rem; /* Added by SHraddha on 25-AUG-2026 */
}

/* --- Gutters ------------------------------------------------------------
   override.css zeroed .container-fluid padding for old screens; that is now
   scoped off the new screens, so Bootstrap's own responsive gutter applies
   and only needs a small tightening on the narrowest devices. */
body.newui .container-fluid {
  max-width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 575px) {
  body.newui .container-fluid {
    --bs-gutter-x: 0.75rem;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
}

/* --- Overflow -----------------------------------------------------------
   Contain the page horizontally at the wrapper rather than with
   "body{overflow-x:hidden}". Hiding overflow on body also silently clipped
   the wide data tables instead of letting them scroll in their own container,
   and it suppressed the symptom of the width bug fixed above rather than the
   cause. Wide children (tables, tab strips) keep their own overflow-x:auto,
   which yantra's rules already give them. */
body.newui .page-content,
body.newui #content-main-section {
  max-width: 100%;
  box-sizing: border-box;
}

/* Dropdown menus in the action bar must still escape their container.
   overflow-x:clip (not hidden/auto) keeps overflow-y visible so the
   "Update"/"More" popups are not cut off. */
body.newui #content-main-section {
  overflow-x: clip;
  overflow-y: visible;
}

/* --- Stepper connector lines -------------------------------------------
   Drawn per-item rather than as one full-width line across .stepper-info, so
   the track cannot run past the last icon when the steps wrap on small
   screens. Uses the moi4e accent (--purple-400 is remapped to the moi4e pink
   in :root at the top of this file), so no colour is hard-coded here. */
body.newui .stepper-info::before,
body.newui .stepper-info::after {
  display: none;
}

body.newui .stepper-wrapper {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  width: 100%;
  max-width: 440px;
  position: relative;
}

body.newui .stepper-item {
  position: relative;
  flex: 1;
  min-width: 0; /* allow the step to shrink instead of forcing overflow */
}

body.newui .stepper-item .item-icon {
  position: relative;
  z-index: 2; /* stand above the connector line */
}

body.newui .stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px; /* centred on the 36px icon */
  left: 50%;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(to right, #cbd5e1 0, #cbd5e1 4px, transparent 4px, transparent 8px);
  z-index: 1;
}

body.newui .stepper-item.complete:not(:last-child)::after {
  background: var(--purple-400);
}

body.newui .stepper-item.active .item-icon,
body.newui .stepper-item.complete .item-icon {
  border-color: var(--purple-400);
}

body.newui .stepper-item.complete .item-icon {
  background-color: var(--purple-400);
}

/* ------------------------------------------------------------
   Tab strip <-> panel relationship (added 17-AUG-2026)

   The tab strip and the panel under it read as two unrelated floating cards in
   moi4e. The spacing comes from three stacked sources, only the last of which is
   the theme's:
     1. common-theme/template/tabs/start-tabs.ftl carries its own inline <style>:
        .tab-menu adds padding:5px + margin-bottom:5px + border-radius:20px, and
        .tab-content / .tab-contentqq each add padding:1px 5px + border-radius:15px.
        (Its background/border there resolve to nothing - they use var(--glass) and
        var(--glass-border), which are defined in neither theme - but the padding
        and margins still apply.)
     2. .nav-content-details - the white pill bar itself.
     3. .tab-content-sec - the panel.
   Yantra absorbs (1) because its own scale is larger (nav padding 0 20px, gap 44px,
   panel padding 15px); moi4e's compact scale (0 14px / 28px / 10px) is smaller than
   the wrapper insets, so the panel ends up both detached from and narrower than the
   strip above it, and the tab labels no longer line up with the panel content.

   Fix: zero the shared wrapper's insets, then give the strip and the panel the same
   horizontal padding so the active tab sits directly above the content it belongs to.
   ------------------------------------------------------------ */
body.newui .tab-menu {
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
}

body.newui .content-wrapper.tab-contentqq,
body.newui .tab-content {
  padding: 0;
  border-radius: 0;
}

/* Same left/right padding as the panel below, so "Invoice Items" lines up with
   the panel's content rather than floating inset from it. */
body.newui .nav-content-details {
  padding: 0 16px !important;
  margin-top: 8px !important;
}

body.newui .tab-content-sec {
  margin-top: 4px !important;
  padding: 12px 16px !important;
}

/* ============================================================
   MOI4E CHROME FIXES THAT APPLY TO **BOTH** GENERATIONS
   (added 17-AUG-2026)

   These correct two yantra-layout assumptions that this file inherited wholesale
   and that were silently leaking onto moi4e's ordinary (old) screens as well -
   the login page included, since it renders through the same wrapper chain
   (.page-container > .contentarea.d-flex.flex-column.page-content > .container-fluid).
   ============================================================ */

/* 1. body is "display:flex; flex-wrap:wrap" near the top of this file, because in
      yantra body's children ARE the layout: the 94px .page-nav rail and .page-content
      sit side by side as flex items. moi4e has no such rail - body's only child is
      .page-container - and a flex item does not grow by default (flex-grow:0), so
      .page-container was collapsing to its max-content width. That is what left the
      grey band down the right of the ordinary screens and pushed the login card off
      to the left instead of letting it centre. Making it fill the line is correct
      whether body ends up flex or block. */
.page-container {
  width: 100%;
  box-sizing: border-box;
}

/* 2. ".page-content{width:calc(100% - 94px)}" earlier in this file reserves space for
      yantra's 94px IN-FLOW rail. moi4e has no in-flow rail - its .sidebar is fixed and
      is compensated for separately (see the body.newui rules above) - so on the old
      screens that 94px was simply a dead right-hand gutter. New screens already
      override this above; this covers the old ones. */
body:not(.newui) .page-content {
  width: 100%;
}

/* ============================================================
   MOI4E COMPACT SIZING OVERRIDES
   Match moi4e theme's tighter fonts, padding, spacing, and
   smaller button sizing throughout the new screens.
   ============================================================ */

/* --- GLOBAL FONT SIZE --- */
body {
  font-size: 13px !important;
}

/* --- HEADINGS (Purchase Voucher View, Details, etc.) --- */
.breadcrumb-heading-sec h4,
.breadcrumb-heading-sec h3,
.breadcrumb-heading-sec .text-1 {
  font-size: 18px !important;
  line-height: 22px !important;
}

.text-1 {
  font-size: 18px !important;
  line-height: 22px !important;
}

.text-2 {
  font-size: 16px !important;
  line-height: 20px !important;
}

.text-3 {
  font-size: 14px !important;
  line-height: 18px !important;
}

.text-4 {
  font-size: 13px !important;
  line-height: 17px !important;
}

/* --- ACTION BUTTONS (Update Header, AddGstTax, etc.) --- */
.action-sec .btn {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}

.action-sec .btn.btn-rounded {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

.action-sec .btn > img {
  width: 18px !important;
}

/* --- ORANGE/PINK FILLED & OUTLINED BUTTONS --- */
.btn-orange-filled {
  height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  border-radius: 20px !important;
}

.btn-orange-outlined {
  height: 30px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  border-radius: 20px !important;
}

/* --- TABLE INVOICE BUTTONS (+ Add Tax Section, Update dropdown) --- */
.table-invoice-btn-sec .btn {
  height: 32px !important;
  font-size: 12px !important;
  border-radius: 20px !important;
}

.table-invoice-btn-sec .btn-add-tax {
  width: auto !important;
  padding: 0 14px !important;
}

.table-invoice-btn-sec .btn-update-menu {
  width: auto !important;
  padding: 0 10px !important;
  gap: 8px !important;
}

.table-invoice-btn-sec .btn-show-invoice,
.table-invoice-btn-sec .btn-map-purchase {
  width: 32px !important;
  height: 32px !important;
}

/* --- INVOICE LEFT CARD (Compact padding) --- */
.invoice-top-sec {
  padding: 12px 14px !important;
}

.text-no {
  font-size: 16px !important;
  line-height: 18px !important;
}

.text-type {
  width: auto !important;
  height: 22px !important;
  font-size: 11px !important;
  margin-top: 6px !important;
}

.invoice-status,
.order-status {
  height: 22px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  line-height: 16px !important;
  border-radius: 12px !important;
}

.text-details,
.order-details {
  font-size: 13px !important;
  margin-top: 6px !important;
}

/* --- PRICE SECTION (Compact) --- */
.price-sec {
  padding: 10px 14px 12px !important;
  gap: 6px !important;
}

.price-sec .price-item > p {
  font-size: 22px !important;
  line-height: 24px !important;
  margin-top: 3px !important;
}

.price-sec .date-sec {
  gap: 6px !important;
}

.price-sec .date-item > label {
  font-size: 11px !important;
  line-height: 14px !important;
}

.price-sec .date-item > p {
  font-size: 12px !important;
  line-height: 16px !important;
  margin-top: 2px !important;
}

/* --- SPOT/UNIT SECTION (Business Unit, Exchange Rate) --- */
.spot-unit-sec {
  padding: 10px 14px !important;
  gap: 6px !important;
}

.spot-unit-sec label {
  font-size: 12px !important;
  line-height: 16px !important;
}

.spot-unit-sec p {
  font-size: 13px !important;
  line-height: 17px !important;
}

/* --- STEPPER (Compact timeline) --- */
.stepper-info {
  padding: 12px 10px !important;
  border-radius: 14px !important;
  gap: 6px !important;
}

.stepper-item .item-icon {
  width: 36px !important;
  height: 36px !important;
}

.stepper-item .item-icon > img {
  width: 18px !important;
}

.stepper-item .item-icon::before {
  border-width: 8px !important;
  top: -9px !important;
  left: -9px !important;
  width: calc(100% + 18px) !important;
  height: calc(100% + 18px) !important;
}

/* #newtimeline_col added 27-AUG-2026, corrected same day (dropped
   #newtimeline - see the base block above for why): the .item-icon compact
   sizing above (36px, unscoped) already applies to old-UI screenlets too, so
   the connector on those needs this same 34px/35px compact offset - not the
   42px/45px from the base block further up, which was tuned for the larger
   46px icon this block shrinks down.

   padding-top on .stepper-info/#newtimeline_col is still the base block's
   20px, which centred the line on the original 46px icon (top:42px = 20px
   padding + 22px, half the icon). This block never adjusted that padding to
   match its own smaller 36px icon, so the compact line (top:34px) sat above
   the compact icon's true centre (20px padding + 18px = 38px) by 4px - the
   "line not centred" gap. Corrected here to 16px (34px - 18px) so the two
   stay in sync. */
.stepper-info, #newtimeline_col {
  padding-top: 16px !important;
}

.stepper-info::before, .stepper-info::after,
#newtimeline_col::before, #newtimeline_col::after {
  top: 34px !important;
  left: 35px !important;
  right: 35px !important;
}

.stepper-info::before, #newtimeline_col::before {
  width: calc(100% - 70px) !important;
}

/* ============== MATCHER 0000005435 */

.stepper-item .item-status {
  margin-top: 8px !important;
  padding: 2px 6px 0 !important;
  height: 26px !important;
  font-size: 12px !important;
  line-height: 15px !important;
}

/* ============== MATCHER 0000005445 */
.stepper-item .item-date {
  font-size: 10px !important;
  line-height: 13px !important;
  margin-top: 2px !important;
}

.stepper-item .item-status-updatedBy {
  font-size: 10px !important;
  line-height: 13px !important;
  margin-top: 2px !important;
}

/* ============== THE END OF YANTRA THEME NOW */

/* --- ORDER ITEMS CARDS (Total Bill Value, Total Items) --- */
.order-items-content-sec > div .top-content {
  padding: 8px 14px !important;
}

.order-items-content-sec > div .top-content > p {
  font-size: 12px !important;
  line-height: 14px !important;
  min-height: 28px !important;
}

.order-items-content-sec > div .bottom-content {
  padding: 10px 14px !important;
}

.order-items-content-sec > div .bottom-content > p {
  font-size: 18px !important;
  line-height: 20px !important;
}

/* --- ORDER INFO SEC (Left card compact) --- */
.order-info-sec .order-top-sec {
  gap: 12px !important;
  padding: 12px 14px !important;
}

.order-info-sec .order-bottom-sec {
  padding: 10px 14px !important;
}

.order-info .order-no {
  font-size: 16px !important;
  line-height: 18px !important;
}

.order-info .order-type {
  margin-top: 4px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

.order-money-type {
  font-size: 13px !important;
  line-height: 16px !important;
}

/* --- WAREHOUSE/UNIT SEC --- */
.warehouse-unit-sec {
  padding: 8px 14px !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.warehouse-unit-sec label {
  font-size: 12px !important;
  line-height: 16px !important;
}

.warehouse-unit-sec p {
  font-size: 13px !important;
  line-height: 17px !important;
  margin-top: 3px !important;
}

/* --- RIGHT SIDEBAR (Supplier Details) --- */
.customer-details-content {
  border-radius: 14px !important;
  margin-top: 6px !important;
}

.company-info-sec {
  padding: 10px 12px 14px 0 !important;
}

.company-info-sec .year-text {
  font-size: 11px !important;
  line-height: 14px !important;
  padding: 3px 0 3px 12px !important;
}

.company-info-sec .comp-info-content {
  margin-top: 10px !important;
  padding-left: 12px !important;
}

.company-info-sec .comp-info-content .company-icon {
  width: 36px !important;
  height: 36px !important;
}

.company-info-sec .comp-info-content .company-name {
  width: calc(100% - 36px) !important;
  padding-left: 10px !important;
}

.company-info-sec .comp-info-content .company-name > p {
  font-size: 14px !important;
  line-height: 18px !important;
}

.comp-other-info {
  padding: 12px !important;
}

.comp-other-info > div {
  margin-top: 4px !important;
  gap: 6px !important;
  font-size: 12px !important;
}

.comp-other-info > div.text-acc-no {
  margin-top: 12px !important;
}

/* --- ADDRESS SECTION --- */
.address-sec {
  gap: 3px !important;
  padding: 8px 12px 16px !important;
}

.address-content {
  padding: 10px 12px !important;
}

.address-content .addr-icon {
  width: 30px !important;
  height: 30px !important;
}

.address-content .addr-icon-text {
  width: calc(100% - 30px) !important;
  padding-left: 10px !important;
  font-size: 12px !important;
}

.address-content .text-addr-name {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
}

.address-content .text-addr {
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.address-content .text-gstn {
  margin-top: 8px !important;
  gap: 6px !important;
  font-size: 12px !important;
}

/* --- NAV CONTENT DETAILS TABS (Bill Items, Transactions, etc.) --- */
.nav-content-details {
  padding: 0 14px !important;
  gap: 28px !important;
  margin-top: 4px !important;
}

.nav-content-details .nav-item .nav-link {
  padding: 8px 0 !important;
  font-size: 12px !important;
}

.nav-content-details .nav-item .nav-link img {
  width: 18px !important;
}

/* --- PAGE NAV TABS (Overview, Related Shipment, etc.) --- */
.page-nav-tabs {
  gap: 24px !important;
}

.page-nav-tabs .nav-item .nav-link {
  font-size: 12px !important;
  padding: 4px 0 6px !important;
}

/* --- TAB CONTENT / TABLE AREA --- */
.tab-content-sec {
  margin: 6px 0 16px !important;
  padding: 10px !important;
  border-radius: 14px !important;
}

.tab-content-table thead tr th {
  font-size: 11px !important;
  padding: 6px 4px !important;
  min-height: 30px !important;
}

.tab-content-table td {
  font-size: 12px !important;
  padding: 6px 4px !important;
}

/* --- BREADCRUMB --- */
.breadcrumb-sec {
  font-size: 12px !important;
}

.breadcrumb-heading-sec {
  margin-top: 3px !important;
}

/* --- CARD SECTIONS --- */
.card-item {
  padding: 12px !important;
  border-radius: 6px !important;
}

.card-item > h5 {
  font-size: 12px !important;
  margin-bottom: 12px !important;
}

/* --- PINNED NOTES --- */
.pinned-content {
  padding: 12px 24px 16px 14px !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
}

.pinned-content p {
  font-size: 12px !important;
  line-height: 16px !important;
}

/* --- DETAILS TEXT (h5 Details heading) --- */
h5 {
  font-size: 16px !important;
  line-height: 20px !important;
}

/* --- FORM ITEMS (tighter) --- */
.form-item > label {
  font-size: 12px !important;
  line-height: 16px !important;
}

.form-item .form-control,
.form-item .form-select {
  min-height: 28px !important;
  font-size: 12px !important;
}

/* --- DATE PERSON SEC (stepper below text) --- */
.date-person-sec label {
  font-size: 11px !important;
}

.date-person-sec p {
  font-size: 12px !important;
}

/* --- LEFT PAGE NAV (sidebar icons) --- */
.page-nav .nav .nav-link > img {
  width: 24px !important;
}

.page-nav .nav .nav-link > span {
  font-size: 10px !important;
  line-height: 12px !important;
}

.page-nav .nav {
  gap: 6px !important;
  padding: 6px 0 !important;
}

/* --- GENERAL BORDER RADIUS (match moi4e rounded look) --- */
.overview-sec > div,
.invoice-info-sec,
.order-info-sec,
.stepper-info,
.order-items-content-sec > div,
.tab-content-sec {
  border-radius: 14px !important;
}

/* --- DROPDOWN MENUS (must appear on top) --- */
.action-sec .dropdown-menu,
.action-sec .dropdown-menu-sec,
.table-invoice-btn-sec .dropdown-menu,
.dropdown-menu {
  z-index: 1050 !important;
  position: absolute !important;
  overflow: visible !important;
}

.action-sec .dropdown,
.action-sec .btn-group,
.table-invoice-btn-sec .dropdown {
  position: relative !important;
  z-index: 10 !important;
  overflow: visible !important;
}

/* Ensure parent containers don't clip dropdown popups */
.breadcrumb-heading-sec {
  overflow: visible !important;
}

/* #content-main-section overflow is set in the MOI4E CHROME INTEGRATION block
   above (scoped to body.newui); the duplicate that stood here was removed
   17-AUG-2026. */

/* --- MOI4E DROPDOWN MENU & ITEM STYLING --- */
.dropdown-menu,
.dropdown-menu-sec {
  background: #ffffff !important;
  border: 1px solid rgba(36, 6, 59, 0.15) !important;
  box-shadow: 0px 4px 12px rgba(36, 6, 59, 0.1) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  min-width: 180px !important;
  margin-top: 6px !important;
}

.dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu-sec .dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: 6px 12px !important;
  clear: both !important;
  font-weight: 400 !important;
  color: #24063b !important; /* Brand dark purple */
  text-align: inherit !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  border: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border-radius: 6px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  font-family: "Inter", sans-serif !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu-sec .dropdown-item:hover,
.dropdown-menu-sec .dropdown-item:focus {
  color: #D94F70 !important; /* Accent pink */
  background-color: #fdf2f5 !important; /* Light pink background */
  text-decoration: none !important;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu-sec .dropdown-item:active {
  color: #ffffff !important;
  background-color: #D94F70 !important;
}

/* The former "STEPPER / TIMELINE OVERFLOW & MULTIPLE LINES FIXES" block that stood
   here was folded into the MOI4E CHROME INTEGRATION block above on 17-AUG-2026,
   where it is scoped to body.newui and no longer needs !important. */