/***** media query *****/
@media screen and (min-width: 640px) {
  .layout .main .header {
  flex-direction: row;
  align-items: center;
      padding: 24px;

}
.layout .main .header .right {
  justify-content: center;
}

.layout .main .header  .active {
  margin-left: auto;
    order: 0;

}

.layout .main .header .left {
  align-items: center;
}
.layout .main .header .left .account .title  {  display: block;

}
.layout .main .header  .active span {
  font-size: 14px;
}
.layout .main .header .left .account {
  padding: 0.5rem 1rem;
}

}
@media screen and (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 5rem auto;
    grid-template-rows: auto auto;
    gap: 0px 0px;
    grid-template-areas:
      "sidbar main"
      "sidbar main";
  }
  .layout .sidbar .nav-btn {
    display: block;
  }

  .layout .sidbar {
    width: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .layout .main {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;

    grid-template-areas:
      "header header header header header header header header header header header header"
      "current-balance current-balance current-balance current-balance income income income income expences expences expences expences"
      "recent-activities recent-activities recent-activities recent-activities recent-activities recent-activities income-expences income-expences income-expences income-expences income-expences income-expences"
      "last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions"
      "monthly-invoice monthly-invoice monthly-invoice monthly-invoice monthly-invoice monthly-invoice account-summary account-summary account-summary account-summary account-summary account-summary"
      "budget-overview budget-overview budget-overview budget-overview budget-overview budget-overview payment-methods payment-methods payment-methods payment-methods payment-methods payment-methods";
  }


}
@media screen and (min-width: 1024px) {
  .layout .main .current-balance p,
  .layout .main .income p,
  .layout .main .expences p {
    font-size: 2.25rem;
  }
}

@media screen and (min-width: 1280px) {
  .layout {
    display: grid;
    grid-template-columns: 15rem auto;
    grid-template-rows: auto auto;
    gap: 0px 0px;
    grid-template-areas:
      "sidbar main"
      "sidbar main";
  }

  .layout .sidbar {
    align-items: start;

    width: 15rem;
  }
  .layout .sidbar .nav-btn + *,
  .layout .sidbar h3 {
    display: block;
  }
  .layout .main {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    gap: 16px 24px;
    grid-template-areas:
      "header header header header header header header header header header header header"
      "current-balance current-balance current-balance current-balance income income income income expences expences expences expences"
      "recent-activities recent-activities recent-activities recent-activities last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions"
      "monthly-invoice monthly-invoice monthly-invoice monthly-invoice last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions last-transactions"
      "budget-overview budget-overview budget-overview budget-overview income-expences income-expences income-expences income-expences payment-methods payment-methods payment-methods payment-methods"
      "budget-overview budget-overview budget-overview budget-overview account-summary account-summary account-summary account-summary payment-methods payment-methods payment-methods payment-methods";
  }
}
@media screen and (min-width: 1536px) {
}