/* sm */
@media screen and (min-width: 640px) {
  .w-sm-100 {
    width: 100%;
  }

  .w-sm-50 {
    width: 50%;
  }

  .w-sm-33 {
    width: 33.3333%;
  }

  .w-sm-25 {
    width: 25%;
  }

  .w-sm-20 {
    width: 20%;
  }
  /* START HEADER */

  .header {
    display: flex;
  }

  .online {
    display: flex;
  }

  /* END HEADER */

  /* table */
  table {
    min-width: 100%;
  }
  /* table */
}

/* md */
@media screen and (min-width: 768px) {
  .w-md-100 {
    width: 100%;
  }

  .w-md-50 {
    width: 50%;
  }

  .w-md-33 {
    width: 33.3333%;
  }

  .w-md-25 {
    width: 25%;
  }

  .w-md-20 {
    width: 20%;
  }

  /* START moneys-section */

  .moneys-section {
    flex-direction: row;
  }

  /* END moneys-section */

  /* grid */

  .dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6875rem;
  }

  .income-versus-expenses {
    grid-column-start: 2;
    grid-row-start: 1;
  }

  .modern-activities {
    grid-column-start: 1;
    grid-row-start: 1;
  }

  .recent-transactions {
    grid-column: span 2 / span 2;
  }

  .sammary-account {
    grid-column-start: 2;
    grid-row-start: 3;
  }

  .monthly-bills {
    grid-column-start: 1;
    grid-row-start: 3;
  }

  .payment-methods {
    grid-column-start: 2;
    grid-row-start: 4;
  }

  .overview-budget {
    grid-column-start: 1;
    grid-row-start: 4;
  }

  .income-versus-expenses,
  .modern-activities,
  .monthly-bills,
  .recent-transactions,
  .sammary-account {
    margin-bottom: 0;
  }

  /* NAVVV */

  .navbar {
    display: block;
    width: 6.25rem;
  }

  .main-content {
    margin-right: 6.25rem;
  }

  /* NAVVV */
}

/* large */
@media screen and (min-width: 992px) {
  .w-l-100 {
    width: 100%;
  }

  .w-l-50 {
    width: 50%;
  }

  .w-l-33 {
    width: 33.3333%;
  }

  .w-l-25 {
    width: 25%;
  }

  .w-l-20 {
    width: 20%;
  }
}

@media screen and (min-width: 1024px) {
  .moneys-section .mony .p-2 {
    font-size: 2.5rem;
  }
}

/* Xl */
@media screen and (min-width: 1280px) {
  .w-xl-100 {
    width: 100%;
  }

  .w-xl-50 {
    width: 50%;
  }

  .w-xl-33 {
    width: 33.3333%;
  }

  .w-xl-25 {
    width: 25%;
  }

  .w-xl-20 {
    width: 20%;
  }

  .overview-budget .content {
    flex-direction: column;
  }

  .overview-budget .right {
    margin-right: auto;
  }

  .dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 0.6875rem;
  }

  .modern-activities {
    grid-row: span 1 / span 1;
  }

  .monthly-bills {
    grid-column-start: 1;
    grid-row-start: 2;
  }

  .recent-transactions {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
  }

  .overview-budget {
    grid-row: span 2 / span 2;
    grid-row-start: 3;
  }

  .income-versus-expenses {
    grid-row-start: 3;
  }

  .sammary-account {
    grid-column-start: 2;
    grid-row-start: 4;
  }

  .payment-methods {
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
  }

  .income-versus-expenses,
  .modern-activities,
  .monthly-bills,
  .recent-transactions {
    margin-bottom: 0;
  }

  .sammary-account,
  .payment-methods {
    height: fit-content;
  }

  /* NAVVVV */

  .nav-content-logo {
    display: block;
  }

  .nav-main {
    margin-bottom: 2rem;
  }

  .nav-main li {
    width: 100%;
  }

  .nav-main .hiddin-home {
    display: block;
  }

  .nav-quick button {
    margin-bottom: 0.75rem;
  }

  .nav-quick button .btn-txt {
    display: block;
  }

  .nav-quick h3 {
    display: block;
  }

  .navbar {
    display: block;
    width: 15rem;
    overflow-y: scroll;
  }

  .main-content {
    margin-right: 15rem;
  }
  /* NAVVVV */
}

/* XXL */
@media screen and (min-width: 1636px) {
  .w-xxl-100 {
    width: 100%;
  }

  .w-xxl-50 {
    width: 50%;
  }

  .w-xxl-33 {
    width: 33.3333%;
  }

  .w-xxl-25 {
    width: 25%;
  }

  .w-xxl-20 {
    width: 20%;
  }
}