#root {
  min-height: 100vh;
  display: flex;
  min-width: 0;
  width: 100%;
  height: 100%;
}

.loader {
  margin: auto;
  width: 50px;
  height: 50px;
}

.circular-loader {
  animation: rotate 2s linear infinite;
}

.loader-path {
  fill: none;
  stroke-width: 3px;
  animation: animate-stroke 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-stroke {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke: #7352c7;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
    stroke: #7352c7;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
    stroke: #7352c7;
  }
}

@media screen and (max-width: 767px) {
  .CmtLayout-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 0 !important;
  }
  .MuiCardContent-root {
    padding: 15px !important;
  }

  .mobile-view-table .MuiTableCell-root {
    border-left: none;
    border-right: none;
  }
  .mobile-view-table .MuiTableCell-body {
    border-bottom: none !important;
    border-left: none !important;
  }
  .mobile-view-table table,
  .mobile-view-table thead,
  .mobile-view-table tbody,
  .mobile-view-table th,
  .mobile-view-table td,
  .mobile-view-table tr,
  .mobile-view-table-1 table,
  .mobile-view-table-1 thead,
  .mobile-view-table-1 tbody,
  .mobile-view-table-1 th,
  .mobile-view-table-1 td,
  .mobile-view-table-1 tr {
    display: block;
    width: 100%;
  }

  .mobile-view-table thead,
  .mobile-view-table-1 thead {
    display: none; /* Hide headers */
  }

  .mobile-view-table tr,
  .mobile-view-table-1 thead {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    padding: 0.5rem;
  }

  .mobile-view-table td,
  .mobile-view-table-1 td {
    text-align: left;
    padding-inline: 20px;
    position: relative;
    min-width: 100%;
    max-width: 100%;
    padding-inline: 0px;
  }
  .mobile-view-table .MuiTableContainer-root,
  .mobile-view-table-1 .MuiTableContainer-root {
    overflow-x: unset;
    box-shadow: none !important;
  }
  .mobile-view-table table,
  .mobile-view-table-1 table {
    min-width: 100%;
  }
  .mobile-view-table {
    border-right: none !important;
  }
  .items-td,
  .weight-td {
    min-width: 50% !important;
    max-width: 50% !important;
  }
  .items-td {
    padding-left: 5px !important;
    float: inline-end;
  }
  .weight-td {
    padding-right: 5px !important;
  }
  .add-btn {
    width: 100%;
  }

  .mobile-view-table-1 td {
    padding-inline: 8px;
  }
  .mobile-view-table-1 .MuiTableCell-root {
    border-left: none !important;
    border-right: none;
    border-bottom: none !important;
  }
  .mobile-view-table-1 {
    border-right: none !important;
  }
  .mobile-view-table-1 .product-invoice-tr {
    border: 1px solid #ccc;
    padding-block: 10px;
    margin-bottom: 15px;
  }
  .table-footer-tr {
    display: flex !important;
    border: 1px solid #ccc;
  }
  .table-footer-tr .first-td {
    display: none !important;
  }
  .table-footer-tr td {
    min-width: 50%;
  }
  .table-footer-tr td:last-child {
    text-align: end;
  }
  .table-footer-tr .gst-td {
    width: 50%;
    text-align: right;
    border: none;
  }
  .table-footer-second-tr {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  .add-btn-section {
    border: 1px solid #ccc;
    margin-top: 15px;
  }
  .gst-value::before {
    content: "Gst Amount"; /* Show the header as a label */
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 0.5rem;
    text-align: left;
    top: 50%;
    transform: translateY(-50%);
  }
  .gst-value {
    padding-left: 50% !important;
    text-align: right !important;
    position: relative;
    padding-block: 10px;
    border: 1px solid #ccc;
    height: 33px;
  }

  .permissions-list {
    padding-top: 0px !important;
  }
}