/* login css starts */
.main-form {
  max-height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
.main-form .login-page-divs {
  height: 100vh;
}
.main-form .login-page-divs.right-side {
  background-image: url('../img/full-login-img.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main-form .login-page-divs.left-side .form-logo {
  margin-bottom: 40px;
}
.main-form .login-page-divs.left-side .form-content {
  gap: 32px;
}
.main-form .login-page-divs.left-side .title {
  line-height: 40.32px;
  color: var(--col-000000);
}
.main-form .login-page-divs.left-side .input-area label {
  font-size: var(--f-12);
  font-weight: var(--fw-400);
  line-height: 14px;
  letter-spacing: -0.01em;
  color: var(--col-4B5564);
  margin-bottom: 8px;
}
.main-form .login-page-divs.left-side .input-area .form-control {
  height: 48px;
  padding: 17px 16px;
  border-radius: 8px;
  border: 1px solid var(--col-DDE4F0);
  font-size: var(--f-14);
  font-weight: var(--fw-500);
  line-height: 14px;
  letter-spacing: -0.01em;
  color: var(--col-4B5564);
}
.main-form .login-page-divs.left-side .input-area .form-control::placeholder {
  font-size: var(--f-14);
  font-weight: var(--fw-500);
  line-height: 14px;
  letter-spacing: -0.01em;
  color: var(--col-DDE4F0);
}
.main-form .login-page-divs.left-side .input-area .form-control:focus {
  box-shadow: none;
  border-color: var(--col-1F80FF);
}
.main-form .login-page-divs.left-side .input-area .form-control.error {
  border-color: var(--col-E02B1D);
}
.main-form .login-page-divs.left-side .input-area .form-text {
  margin-top: 8px;
  color: var(--col-E02B1D);
  font-size: var(--f-12);
  font-weight: var(--fw-400);
  line-height: 14.52px;
  letter-spacing: 0.01em;
}
.main-form .login-page-divs.left-side .login-blue-btn {
  background-color: var(--col-3B77D7);
  border: 1px solid var(--col-3B77D7);
  color: var(--col-FFFFFF);
  font-size: var(--f-16);
  font-weight: var(--fw-600);
  line-height: 20.16px;
  height: 44px;
  border-radius: 16px;
}
.main-form .login-page-divs.left-side .login-bottom-txt {
  color: var(--col-757575);
  font-size: var(--f-16);
  font-weight: var(--fw-500);
  line-height: 20.16px;
}
.main-form .login-page-divs.left-side .login-bottom-txt span {
  color: var(--col-3B77D7);
  cursor: pointer;
}
/* login css ends */

/* dashboard css starts */
.dashboard-block {
  max-height: calc(100vh - 200px);
  overflow: hidden;
}
.dashboard-block .db-container {
  margin-left: -12px !important;
  margin-right: -12px !important;
  max-height: calc(100vh - 250px);
  overflow-x: hidden;
  overflow-y: auto;
}
.dashboard-block .db-container .col-4 {
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin: 12px 0 !important;
}
.dashboard-block .db-container .col-4 .db-box {
  border-radius: 10px;
  padding: 32px 16px;
  gap: 32px;
  cursor: pointer;
}
.dashboard-block .db-container .col-4 .db-box:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
/* dashboard css ends */

/* receipt css starts */
.scroll-div {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
}
.data-content .data-box {
  border-radius: 16px;
  padding: 32px 48px;
  font-size: var(--f-16);
  font-weight: var(--fw-400);
  line-height: 19.36px;
  color: var(--col-4B5564);
}
.data-content .data-box .title {
  font-weight: var(--fw-600);
}
.main-total-container {
  padding: 32px 16px;
  gap: 16px;
  border-radius: 16px;
}
.main-total-container .txt {
  font-size: var(--f-16);
  font-weight: var(--fw-600);
  line-height: 19.36px;
  color: var(--col-4B5564);
  gap: 16px;
}
.main-total-container .txt span {
  font-weight: var(--fw-400);
}
.main-total-container .txt .big-txt {
  font-size: var(--f-19);
}
/* receipt css ends */

/* martix css starts */
.filter-btns-div {
  gap: 16px;
}
.color-label-container {
  margin-left: 4px;
  gap: 2px;
}
.color-label-container .color-box {
  width: 14px;
  height: 13px;
}
.color-label-container span {
  font-size: var(--f-12);
  font-weight: var(--fw-400);
  line-height: 14.52px;
  letter-spacing: 0.01em;
  color: var(--col-000000);
}
.light-green {
  background-color: var(--col-label-light-green) !important;
}
.yellow {
  background-color: var(--col-label-yellow) !important;
}
.bright-orange {
  background-color: var(--col-label-bright-orange) !important;
}
.bright-red {
  background-color: var(--col-label-bright-red) !important;
}
.matrix-box {
  border-radius: 16px;
  max-height: calc(100vh - 300px);
  overflow-x: hidden;
  overflow-y: auto;
}
.matrix-box .tiles {
  box-shadow:
    0px 4px 6px -2px rgba(0, 0, 0, 0.05),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  background-color: var(--col-FFFFF5);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.matrix-box .custom-row {
  margin-left: -12px;
  margin-right: -12px;
}
.matrix-box .custom-row .custom-col {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}
@media screen and (min-width: 1199.8px) {
  .matrix-box .col-xl-2 {
    flex: 0 0 auto;
    width: 20% !important;
  }
}
.matrix-box .tiles .main-container-matrix {
  padding: 8px 16px;
  gap: 8px;
  color: var(--col-4B5564);
}
.matrix-box .tiles .main-container-matrix .lot-num {
  height: 35px;
  border-radius: 8px;
  font-size: var(--f-16);
  font-weight: var(--fw-600);
  line-height: 19.36px;
  letter-spacing: 0.01em;
}
.lot-num.bright-orange {
  color: var(--col-FFFFFF);
}
.lot-num.yellow {
  color: var(--col-6D7073);
}
.lot-num.green {
  color: var(--col-4B5564);
}
.matrix-box .tiles .main-container-matrix .num2 {
  font-size: var(--f-14);
  font-weight: var(--fw-600);
  line-height: 16.94px;
  letter-spacing: 0.01em;
}
.matrix-box .tiles .main-container-matrix .num3 {
  font-size: var(--f-12);
  font-weight: var(--fw-500);
  line-height: 14.52px;
  letter-spacing: 0.01em;
}
.matrix-box .tiles .main-container-matrix .num3 span {
  font-weight: var(--fw-700);
}
.matrix-box .tiles .main-container-matrix .progress-bar-container .progress {
  height: 12px;
  background-color: var(--col-ABABAB);
}

.matrix-box .tiles .label-tag {
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 14.52px;
  letter-spacing: 0.01em;
  height: 16px;
}
.matrix-box .tiles .label-tag img {
  top: 0px;
  right: -12px;
  height: 16px;
  max-height: 16px;
  min-height: 16px;
}
.label-tag .tag {
  max-width: fit-content;
  height: 100%;
  color: var(--col-FFFFFF);
  padding: 0 4px;
}
.label-tag .tag.red {
  background-color: var(--col-F40D0D);
  color: var(--col-FFFFFF);
}
.label-tag .tag.orange {
  background-color: var(--col-FFC794);
  color: var(--col-primary);
}
/* martix css ends */
/* martix inner css starts */
.secondary-scroll-bar {
  max-height: calc(100vh - 280px);
  overflow-x: hidden;
  overflow-y: auto;
}
.info-header {
  border-radius: 16px 16px 0 0;
  padding: 16px 32px;
  background-color: var(--col-D2D2D2);
  gap: 16px;
}
.info-header .info-txt-box {
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--col-4B5564);
  height: 32px;
  padding: 8px 16px;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--col-EEEEEE);
}
.info-header .info-txt-box span:last-child {
  font-weight: var(--fw-700);
}
.info-detail-container {
  padding: 24px 8px;
  max-height: calc(100vh - 280px);
  overflow-x: hidden;
  overflow-y: auto;
}
.table-2 {
  max-height: calc(100vh - 460px);
  overflow: auto;
  position: relative;
}
.table-2 thead {
  color: var(--col-8492A6);
  font-size: var(--f-10);
  font-weight: var(--fw-600);
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--col-FAFAFB);
  position: sticky;
  top: 0px;
}
.table-2 thead th {
  padding: 8px;
  min-width: 90px;
}
.table-2 tbody {
  font-size: var(--f-10);
  font-weight: var(--fw-400);
  line-height: 20px;
  color: var(--col-BBBDBF);
}
.table-2 tbody td {
  border: 1px solid var(--col-EEEEEE);
  padding: 8px;
}
.table-2 tbody span {
  color: var(--col-4B5564);
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 20px;
}
.table-2 tbody .clicked-td {
  background-color: var(--col-727272);
}
.table-2 tbody .clicked-td span {
  background-color: var(--col-727272);
  color: var(--col-FFFFFF);
}

.editing-container .edit-container {
  border: 1px solid var(--col-EEEEEE);
  border-radius: 8px;
}
.editing-container .edit-container h5 {
  font-size: var(--f-18);
  font-weight: var(--fw-600);
  line-height: 20px;
  color: var(--col-4B5564);
}
.editing-container .edit-container .edit-set-box .col-4 {
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 16px;
  letter-spacing: 0.06em;
  color: var(--col-4B5564);
  padding: 10px;
  background-color: var(--col-FFFFFF);
  border: 1px solid var(--col-EEEEEE);
}
.editing-container .edit-container .edit-set-box .col-8 {
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 16px;
  letter-spacing: 0.06em;
  color: var(--col-4B5564);
  padding: 10px;
  background-color: var(--col-EEEEEE);
  border: 1px solid var(--col-EEEEEE);
}
.table-3 {
  max-height: calc(100vh - 500px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.table-3 thead {
  position: sticky;
  top: 0px;
  background-color: var(--col-FAFAFB);
  font-size: var(--f-10);
  font-weight: var(--fw-600);
  line-height: 16px;
  letter-spacing: 0.06em;
  color: var(--col-8492A6);
  border: 1px solid var(--col-FAFAFB);
  text-transform: uppercase;
}
.table-3 thead th {
  padding: 18px 16px;
}
.table-3 tbody {
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 20px;
  color: var(--col-4B5564);
}
.table-3 tbody td {
  padding: 8px 16px;
  border: 1px solid var(--col-EEEEEE);
}
/* martix inner css ends */

/* package css starts */
.package-top-info .top-header-set h4 {
  font-size: var(--f-18);
  font-weight: var(--fw-600);
  line-height: 20px;
  color: var(--col-58616F);
}
.package-top-info .top-header-set .number-count {
  background-color: var(--col-4B5564);
  color: var(--col-FFFFFF);
  padding: 8px 24px;
  border-radius: 8px;
  height: 36px;
  font-size: var(--f-18);
  font-weight: var(--fw-600);
  line-height: 20px;
}
.packing-top-btn-div {
  gap: 16px;
}
.package-titles-info {
  max-height: calc(100vh - 400px);
  overflow-x: hidden;
  overflow-y: auto;
}
.package-titles-info .custom-row {
  margin-left: -8px;
  margin-right: -8px;
}
.package-titles-info .custom-col {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
}
.package-titles-info .custom-col .tiles {
  box-shadow:
    0px 4px 6px -2px rgba(0, 0, 0, 0.05),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.package-titles-info .custom-col .tiles .id-info {
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 14.52px;
  letter-spacing: 0.01em;
  color: var(--col-FFFFFF);
}
.package-titles-info .custom-col .tiles .main-content-box {
  padding: 8px;
  gap: 8px;
}
.package-titles-info .custom-col .tiles .main-content-box .sku-number {
  gap: 8px;
}
.package-titles-info .custom-col .tiles .main-content-box .sku-number h6 {
  font-size: var(--f-14);
  font-weight: var(--fw-600);
  line-height: 16.94px;
  letter-spacing: 0.01em;
  color: var(--col-4B5564);
}
.package-titles-info .custom-col .tiles .main-content-box .sku-number p {
  font-size: var(--f-14);
  font-weight: var(--fw-500);
  line-height: 16.94px;
  letter-spacing: 0.01em;
  color: var(--col-4B5564);
}
@media screen and (min-width: 1199.8px) {
  .package-titles-info .col-xl-2 {
    flex: 0 0 auto;
    width: 20% !important;
  }
}
/* package css ends */

/* blp css starts */
.summary-box {
  border-radius: 8px;
}
.summary-box .col-4 {
  padding: 0px 5px;
  font-size: var(--f-16);
  font-weight: var(--fw-600);
  line-height: 19.36px;
  color: var(--col-4B5564);
  margin-bottom: 24px;
}
.summary-box .col-8 {
  padding: 0px 5px;
  margin-bottom: 24px;
  font-size: var(--f-16);
  font-weight: var(--fw-400);
  line-height: 19.36px;
  color: var(--col-4B5564);
}
.table-new-div {
  border-radius: 8px;
}
.table-new-div h5 {
  font-size: var(--f-18);
  font-weight: var(--fw-600);
  line-height: 20px;
  color: var(--col-4B5564);
}
.table-new-div .table-responsiveness {
  overflow-y: auto;
  min-height: 300px;
  max-height: calc(100vh - 550px);
}
.table-new-div .table-responsiveness thead {
  position: sticky;
  top: 0px;
  background-color: var(--col-FAFAFB);
}
.table-new-div .table-responsiveness thead th {
  padding: 18px 16px;
  color: var(--col-4B5564);
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 16px;
  letter-spacing: 0.06em;
}
.table-new-div .table-responsiveness thead th:first-child {
  min-width: 300px;
}
@media screen and (min-width: 1199.8px) {
  .table-new-div .table-responsiveness thead th:first-child {
    max-width: 426px;
    width: 426px;
    min-width: 426px;
  }
}
.table-new-div .table-responsiveness thead th:nth-child(2) {
  max-width: 116px;
  width: 116px;
  min-width: 116px;
}
.table-new-div .table-responsiveness thead th:nth-child(3) {
  max-width: 116px;
  width: 116px;
  min-width: 116px;
}
.table-new-div .table-responsiveness tbody td {
  color: var(--col-4B5564);
  font-size: var(--f-12);
  font-weight: var(--fw-600);
  line-height: 20px;
  padding: 8px 16px;
  border: 1px solid var(--col-EEEEEE);
  background-color: var(--col-D1D1D1);
}
.table-new-div .table-responsiveness .icons-edit-area {
  gap: 8px;
}
/* blp css ends */

/**** 
*** Receipts Grid View ***
****/
.receipts-card {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
  background-color: #fff;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #dde4f0;
  height: 100%;
}

.receipts-items {
  min-height: 60px;
}

.receipts-items-lg {
  grid-row-start: 1;
  grid-row-end: 3;
}

.receipts-tiles {
  box-shadow:
    0px 4px 6px -2px rgba(0, 0, 0, 0.05),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background-color: #fff;
  height: 100%;
  font-size: 14px;
  padding: 1rem;
  font-weight: 400;
}

.receipts-items-lg .receipts-tiles {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
  color: #fff;
  border-radius: 8px;
}