html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

.page,
.wrapper,
.main,
.invoice,
.auth-wrapper,
.auth-card,
.card,
.panel,
.table-card,
.layout,
.topbar,
.header,
.top,
.content,
.stats,
.grid,
.totals,
.summary,
.summary-box,
.toolbar,
.actions,
.header-actions,
.submit,
.submit-bar,
.service-footer {
  max-width: 100%;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  max-width: none;
}

td,
th,
.invoice-no,
.client,
.name,
.contact,
.location,
.username,
.metric strong,
.summary-row strong {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page,
  .main {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid.two,
  .totals {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .summary,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .header,
  .top,
  .topbar {
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .page,
  .main {
    width: 100%;
    padding: 18px 12px 34px !important;
  }

  .invoice {
    width: 100% !important;
    padding: 20px 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .wrapper,
  .topbar,
  .header,
  .top,
  .content,
  .layout,
  .totals {
    display: block !important;
  }

  .sidebar {
    display: none !important;
  }

  .header h1,
  .top h1,
  .welcome h1,
  .copy h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  .header p,
  .top p,
  .welcome p {
    margin-top: 6px;
    line-height: 1.45;
  }

  .actions,
  .header-actions,
  .submit,
  .submit-bar,
  .service-footer,
  .topbar > div:last-child,
  .invoice-actions,
  .status-update-form {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-left: 0 !important;
  }

  .btn,
  button.btn,
  .actions a,
  .header-actions a,
  .submit a,
  .submit button,
  .submit-bar a,
  .submit-bar button,
  .row-actions a,
  .action-btn,
  .status-update-form button {
    width: 100%;
    min-height: 42px;
    text-align: center;
  }

  .grid,
  .grid.two,
  .summary,
  .stats,
  .mini-grid,
  .checks,
  .features,
  .benefits {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .grid > *,
  .field,
  .full,
  [style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  .card,
  .panel,
  .table-card,
  .form,
  .preview {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .stat,
  .metric {
    padding: 12px !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    min-height: 44px;
    font-size: 16px;
  }

  textarea {
    min-height: 96px;
  }

  .toolbar {
    display: block !important;
    padding: 12px !important;
  }

  .toolbar input,
  .toolbar select,
  .search,
  .search input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .toolbar select {
    margin-top: 10px;
  }

  .table-wrap {
    width: 100%;
    margin-left: 0;
    border-radius: 8px;
  }

  .table-card > table {
    min-width: 680px;
  }

  table {
    font-size: 13px;
  }

  th,
  td {
    padding: 9px 10px !important;
  }

  .service-table {
    min-width: 680px !important;
  }

  .total,
  .summary-box,
  .summary {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .summary-row,
  .total-row {
    gap: 12px !important;
    font-size: 15px !important;
  }

  .summary-row.grand,
  .total-row.grand {
    font-size: 20px !important;
  }

  .userbox {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 10px;
  }

  .language-form,
  .language-form select {
    width: 100% !important;
  }

  .auth-wrapper {
    width: 100%;
  }

  .right-side {
    padding: 26px 18px !important;
  }

  .form-title {
    font-size: 28px !important;
  }

  .left-side {
    display: none !important;
  }

  .price {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 22px 16px !important;
  }

  .nav {
    display: block !important;
  }

  .navlinks {
    margin-top: 12px;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }
}

@media (max-width: 430px) {
  .page,
  .main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .panel,
  .table-card,
  .form,
  .preview {
    padding: 12px !important;
  }

  .service-table {
    min-width: 620px !important;
  }

  .invoice-meta h2 {
    font-size: 21px !important;
  }
}

@media print {
  html,
  body {
    overflow: visible !important;
    background: #fff !important;
  }

  .invoice-actions,
  .status-update-form,
  .notice,
  .internal-history,
  .no-print {
    display: none !important;
  }

  .invoice {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .top,
  .wrapper,
  .content,
  .layout {
    display: grid !important;
  }

  table {
    page-break-inside: auto;
  }
}
@media (max-width: 900px){
  .wrapper{
    display:block !important;
    width:100% !important;
    min-height:100vh !important;
  }

  .sidebar{
    display:none !important;
  }

  .main{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:14px !important;
    padding-bottom:110px !important;
  }

  .topbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .topbar > div:last-child{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    gap:12px !important;
  }

  .btn,
  .language-form,
  .language-form select,
  .userbox{
    width:100% !important;
    max-width:none !important;
  }

  .stats,
  .content{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .card{
    width:100% !important;
  }

  .list-item{
    position:relative;
    min-height:48px;
    padding-right:82px !important;
  }

  .list-item span[style*="float:right"]{
    position:absolute !important;
    right:0;
    top:50%;
    transform:translateY(-50%);
    float:none !important;
  }
}
@media (max-width: 900px){
  body{margin:0 !important;}
  .main{min-height:100vh !important;}
}
.mobile-menu-btn{
  display:none;
}

@media(max-width:900px){
  .mobile-menu-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:auto;
    min-height:34px;
    padding:6px 10px;
    margin:0 0 4px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-weight:800;
    line-height:1;
    cursor:pointer;
  }

  .sidebar.show-sidebar{
    display:block !important;
    width:100% !important;
    padding:18px !important;
    position:relative !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .sidebar.show-sidebar .brand{
    margin-bottom:18px;
  }

  .sidebar.show-sidebar .menu a{
    margin-bottom:6px;
    padding:12px 14px;
  }
}

@media(max-width:430px){
  .main{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .topbar{
    margin-bottom:18px !important;
  }

  .welcome h1,
  .header h1,
  .top h1,
  .copy h1{
    font-size:25px !important;
  }

  .card h1,
  .metric strong{
    font-size:30px !important;
    line-height:1.15 !important;
  }

  .card h2{
    font-size:22px !important;
    line-height:1.2 !important;
  }
}