html {
  font-size: clamp(100%, calc(100% + 0.25vw), 112.5%);
}

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

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

main,
section,
article,
form,
.services-container,
.services-sidebar,
.main-content,
.account-panel,
.page-content,
.content-wrapper,
.box,
.account-card {
  min-width: 0;
  max-width: 100%;
}

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

table {
  max-width: 100%;
}

th,
td {
  overflow-wrap: anywhere;
}

.account-table-wrap,
.table-responsive,
.box-body {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.services-container {
  width: 100%;
  padding: clamp(0.5rem, 2vw, 1.25rem);
  gap: clamp(0.5rem, 2vw, 1.25rem);
}

.services-sidebar {
  flex: 0 0 min(20rem, 30vw);
}

.main-content {
  flex: 1 1 0;
}

.countries-grid,
.account-grid,
.row-grid,
.overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

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

.account-service-tabs,
.topup-heading,
.rental-sms-heading,
.crypto-payment-header {
  flex-wrap: wrap;
}

.support-launcher,
.support-widget {
  right: clamp(0.5rem, 2vw, 1.25rem);
}

@media (max-width: 900px) {
  .services-container {
    flex-direction: column;
  }

  .services-sidebar {
    position: static;
    width: 100%;
    height: auto;
    max-height: 45vh;
    flex-basis: auto;
  }

  .services-list {
    min-height: 5rem;
    max-height: 30vh;
  }
}

@media (max-width: 600px) {
  .services-container {
    padding: 0.5rem;
  }

  .services-sidebar,
  .account-card,
  .box-body {
    padding: clamp(0.5rem, 3vw, 0.875rem);
  }

  .monitor-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .topup-stepper {
    flex-wrap: wrap;
  }

  .topup-review-row {
    flex-wrap: wrap;
  }

  .account-service-tabs {
    gap: 0.375rem;
  }

  .account-service-tabs a {
    padding: 0.5rem 0.625rem;
  }
}