body {
  margin: 0;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

body::selection {
  background-color: #2c50f1;
  color: #fff;
}

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

img {
  width: 100%;
  display: block;
}

:root {
  --border: 0.0625rem solid #e5e7eb;
  --box-shadow: 0 0.0625rem 0.125rem gray;
  --border-radius: 0.75rem;
  direction: rtl;
}

/* parent  */

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* main  */

.main {
  padding: 2rem;
  margin-right: 16rem;
  overflow-y: scroll;
  scrollbar-width: none;
  height: 100vh;
  flex-grow: 1;
  display: grid;
  column-gap: 25px;
  grid-template-areas:
    "header header header header header header header header header header header header"
    "current current current current salary salary salary salary payment payment payment payment"
    "recent recent recent recent table1 table1 table1 table1 table1 table1 table1 table1"
    "invoice invoice invoice invoice table1 table1 table1 table1 table1 table1 table1 table1"
    "public public public public compare compare compare compare methods methods methods methods"
    "public public public public summary summary summary summary methods methods methods methods"
    "public public public public . . . . . . . .";
  grid-template-columns: repeat(12, 1fr);
}

/* NavBar  */

.navbar {
  padding: 1.5rem;
  overflow-y: scroll;
  scrollbar-width: thin;
  height: 100vh;
  box-shadow: -0.125rem 0 0.4375rem rgb(177, 177, 177);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
}

.side-logo .logo {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #2c50f1;
  border-radius: 1.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-logo .logo i {
  font-size: 1.25rem;
}

.side-logo .logo-text h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.side-logo .logo-text p {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5565;
  margin: 0;
}

.side-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
}

.nav > span {
  font-weight: 600;
  color: #4a5565;
  padding: 0.75rem 1rem;
  padding-left: 2.5rem;
  align-self: flex-start;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
  border-radius: var(--border-radius);
}

.nav .info:hover {
  background-color: #fafafa;
}

.nav span i {
  font-size: 0.875rem;
  padding-left: 1.375rem;
}

.nav .home {
  border: 1px solid #dbeafe;
  background-color: #eff6ff;
  color: #2c50f1;
}

.navbar h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #364153;
  padding: 0 0.5rem;
  margin-bottom: 1.5rem;
}

.serv {
  width: fit-content;
  padding: 0.75rem;
  padding-left: 2.5rem;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.serv:hover {
  transform: translateX(0.1875rem);
  background-color: #fafafa;
}

.serv-one {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.serv .send {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #eaf2ff;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}

.serv:hover .send {
  background-color: #dbe8fc;
}

.serv span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.serv .plus {
  background-color: #e6faee;
}

.serv:hover .plus {
  background-color: #d4f3e1;
}

.serv .pay {
  background-color: #f7edff;
}

.serv:hover .pay {
  background-color: #efe0fc;
}

.serv .invest {
  background-color: #fff0e6;
}

.serv:hover .invest {
  background-color: #fbe4d4;
}

/* Header  */

.header {
  grid-area: header;
}

.header .header-content {
  display: flex;
  justify-content: space-between;
  border: var(--border);
  box-shadow: var(--box-shadow);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  margin-bottom: 2.5rem;
  background-image: linear-gradient(to left, #f6f8fc, #fff);
}

.header .right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header .right .active {
  width: 4.6875rem;
  height: 2.0625rem;
  background-color: #f0fdf4;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid #cbf9dc;
}

.header .right .active .animation {
  width: 0.4375rem;
  height: 0.4375rem;
  background-color: #008236;
  border-radius: 50%;
  animation: color 2s infinite;
}

@keyframes color {
  0% {
    background-color: #02c951;
  }
  50% {
    background-color: #74e29f;
  }
  100% {
    background-color: #02c951;
  }
}

.header .right .active span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #008236;
}

.service {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.0625rem solid #e5e7eb;
  border-radius: var(--border-radius);
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service:hover {
  background-color: #f3f4f6;
}

.notify {
  position: relative;
}

.notify .num {
  width: 1rem;
  height: 1rem;
  background-color: #fb2c36;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10%;
  left: 70%;
}

.account {
  border: var(--border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  gap: 0.625rem;
  box-shadow: var(--box-shadow);
  transition: all 0.1s;
  margin-right: 0.3125rem;
}

.account:hover {
  box-shadow: 0 0.125rem 0.1875rem gray;
}

.account .name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #101828;
  margin: 0;
}

.account .type {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
  margin: 0;
}

.account .image {
  width: 2.5rem;
}

.account img {
  border-radius: var(--border-radius);
}

.left {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.left .icon {
  display: flex;
  gap: 0.4375rem;
}

.right .side-logo {
  margin-bottom: 0;
}

/* main info  */
.all-content {
  padding: 2rem;
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
}

.all-content .desc {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6a7282;
  margin: 0;
}

.all-content .number {
  font-size: 2.25rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.all-content .res {
  font-size: 0.875rem;
  font-weight: 600;
  color: #00a63e;
}

.all-content .res-1 {
  color: #e7000b;
}

.current {
  grid-area: current;
}
.salary {
  grid-area: salary;
}
.payment {
  grid-area: payment;
}

@media (max-width: 40rem) {
  .navbar {
    display: none;
  }

  .main {
    grid-template-areas:
      "header header header header header header header header header header header header"
      "current current current current current current current current current current current current"
      "salary salary salary salary salary salary salary salary salary salary salary salary"
      "payment payment payment payment payment payment payment payment payment payment payment payment"
      "recent recent recent recent recent recent recent recent recent recent recent recent"
      "table1 table1 table1 table1 table1 table1 table1 table1 table1 table1 table1 table1"
      "invoice invoice invoice invoice invoice invoice invoice invoice invoice invoice invoice invoice"
      "public public public public public public public public public public public public"
      "compare compare compare compare compare compare compare compare compare compare compare compare"
      "summary summary summary summary summary summary summary summary summary summary summary summary"
      "methods methods methods methods methods methods methods methods methods methods methods methods";
    margin-right: 0;
    gap: 1.25rem;
    padding: 0.9375rem;
  }

  .header .right {
    flex-direction: column;
    align-items: flex-start;
    display: contents;
  }

  .header .left {
    justify-content: space-between;
    order: 2;
    margin-bottom: 15px;
  }

  .header .right .active {
    width: 100%;
    order: 3;
  }

  .header .left .icon {
    font-size: 0.75rem;
  }

  .account {
    padding: 0.5rem 0.625rem;
    gap: 0;
  }

  .account .image {
    width: 30px;
  }

  .right .side-logo {
    order: 1;
    margin-bottom: 0.9375rem;
  }

  .side-logo .logo-text h1 {
    font-size: 1.375rem;
  }

  .side-logo .logo-text p {
    font-size: 0.75rem;
  }

  .account .my-info .name,
  .account .my-info .type {
    display: none;
  }

  .all-content {
    margin-bottom: 0;
  }

  .header .header-content {
    margin-bottom: 0;
    flex-direction: column;
    padding: 1rem;
  }

  .all-content .number {
    font-size: 1.875rem;
  }
}

@media (min-width: 40.0625rem) and (max-width: 56.25rem) {
  .navbar {
    display: none;
  }

  .main {
    grid-template-areas:
      "header header header header header header header header header header header header"
      "current current current current salary salary salary salary payment payment payment payment"
      "recent recent recent recent recent recent compare compare compare compare compare compare"
      "table1 table1 table1 table1 table1 table1 table1 table1 table1 table1 table1 table1"
      "invoice invoice invoice invoice invoice invoice summary summary summary summary summary summary"
      "public public public public public public methods methods methods methods methods methods"
      "public public public public public public . . . . . .";
    gap: 1.25rem;
    margin-right: 0;
    padding: 0.9375rem;
  }

  .header .header-content {
    margin-bottom: 1.5625rem;
  }

  .all-content .number {
    font-size: 1.875rem;
  }
}

/* section 3  */

.recent-activity {
  padding: 1.5rem;
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  grid-area: recent;
  margin-bottom: 0.875rem;
}

.recent-activity h3 {
  margin: 0;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #101828;
}

.recent-activity .acc {
  background-color: #eff6ff;
  border-left: 0.25rem solid #2f81ff;
}

.recent-activity .message {
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: var(--border-radius);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.recent-activity .acc .ico {
  background-color: #dbeafe;
}

.recent-activity .message .ico {
  width: 1.9375rem;
  height: 1.9375rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recent-activity .message .mess-text h4 {
  margin: 0;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #101828;
}

.recent-activity .message .mess-text p {
  margin: 0;
  font-size: .625rem;
  font-weight: 600;
  color: #4a5565;
  margin-bottom: 0.3125rem;
}

.recent-activity .message .mess-text span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
}

.acc > span {
  color: #155dfc;
}

.message > span {
  position: absolute;
  top: 15%;
  left: 5%;
  font-size: 0.75rem;
  font-weight: 500;
}

.recent-activity .credit {
  background-color: #f0fdf4;
  border-left: 0.25rem solid #00c950;
}

.recent-activity .credit .ico {
  background-color: #dbfce7;
}

.credit > span {
  color: #00a63e;
}

.recent-activity hr {
  border: none;
  height: 0.0625rem;
  background-color: #f2f3f5;
}

.recent-activity > p {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1447e6;
  cursor: pointer;
  margin: 0;
  transition: all 0.1s;
}

.recent-activity > p:hover {
  color: #032fca;
}

.invoice {
  padding: 1.5rem;
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  grid-area: invoice;
}

.invoice .tit {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.invoice .tit h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #101828;
  margin: 0;
}

.invoice .tit span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6a7282;
  cursor: pointer;
  transition: all 0.1s;
}

.invoice .tit span:hover {
  color: #101828;
}

.invoice .inspect {
  margin-bottom: 1rem;
}

.invoice .inspect p {
  margin: 0;
  text-align: center;
}

.invoice .inspect .money {
  font-size: 1.875rem;
  font-weight: 700;
  color: #101828;
}

.invoice .inspect .desc {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6a7282;
}

.wi-elc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.wi-elc .item {
  width: calc(50% - 0.3125rem);
  padding: 0.75rem;
  background-color: #f9fafb;
  border: 0.0625rem solid #f2f3f5;
  border-radius: var(--border-radius);
  text-align: center;
}

.wi-elc .item .wi {
  padding: 0.1875rem 0.5rem;
  background-color: #dbeafe;
  width: fit-content;
  border-radius: 0.5rem;
  margin: auto;
}

.wi-elc .item .wi i {
  font-size: 0.75rem;
}

.wi-elc .item p {
  margin: 0;
}

.wi-elc .item .p-1 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
}

.wi-elc .item .p-2 {
  font-size: 1rem;
  font-weight: 600;
  color: #101828;
}
.wi-elc .item .p-3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fb2c36;
}

.wi-elc .item .el {
  width: calc(50% - 0.3125rem);
  background-color: #fef9c2;
}

.wi-elc .item .bg-ov {
  color: #fe6900;
}

.pho-net {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.625rem;
}

.pho-net .item {
  width: calc(50% - 0.3125rem);
  padding: 0.75rem;
  background-color: #f9fafb;
  border: 0.0625rem solid #f2f3f5;
  border-radius: var(--border-radius);
  text-align: center;
}

.pho-net .item .wi {
  padding: 0.1875rem 0.5rem;
  background-color: #dbfce7;
  width: fit-content;
  border-radius: 0.5rem;
  margin: auto;
}

.pho-net .item .wi i {
  font-size: 0.75rem;
}

.pho-net .item p {
  margin: 0;
}

.pho-net .item .p-1 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
}

.pho-net .item .p-2 {
  font-size: 1rem;
  font-weight: 600;
  color: #101828;
}
.pho-net .item .p-3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1bc950;
}

.pho-net .item .el {
  background-color: #ffe2e2;
}

.pho-net .item .bg-ov {
  color: #6a7282;
}

@media (max-width: 40rem) {
  .recent-activity {
    margin-bottom: 0;
  }
}

/* table  */

.table {
  padding: 1.5rem;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  grid-area: table1;
}

.table .table-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.table .table-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #101828;
}

.table .table-title span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6a7282;
  cursor: pointer;
  transition: all 0.1s;
}

.table .table-title span:hover {
  color: #101828;
}

.table table {
  width: 100%;
}

table thead {
  position: relative;
}

table thead::after {
  content: "";
  width: 100%;
  height: 0.0625rem;
  background-color: #f2f3f5;
  position: absolute;
  bottom: 0;
  left: 0;
}

table thead tr th {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
  color: #364153;
  padding: 0.75rem 0.5rem;
}

tbody tr td {
  padding: 1rem 0.5rem;
}

tr td .item1 {
  display: flex;
  gap: 0.625rem;
}

tbody tr td img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

tbody tr td p {
  margin: 0;
}

tbody tr td .p1-td {
  font-size: 0.875rem;
  font-weight: 500;
  color: #101828;
}

tbody tr td .p2-td {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
}

tr td .item2 {
  display: flex;
  font-size: 0.75rem;
  font-weight: 500;
  color: #016630;
  background-color: #dbfce7;
  padding: 0.125rem 0.625rem;
  width: fit-content;
  border-radius: var(--border-radius);
  gap: 0.1875rem;
}

tr td .date {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5565;
}

tr td .count {
  font-size: 0.875rem;
  font-weight: 600;
  color: #00a63e;
}

tr td .uten {
  background-color: #ffedd4;
}

tr td .all {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

tr td .item3 {
  color: #9f2d00;
  background-color: #ffedd4;
}

tr td .count-less {
  font-size: 0.875rem;
  font-weight: 600;
  color: #101828;
}

tr td .shopping {
  background-color: #dbeafe;
}

tr td .item4 {
  color: #193cb8;
  background-color: #dbeafe;
}

tr td .item5 {
  color: #6e11b0;
  background-color: #f3e8ff;
}

tr td .item6 {
  color: #9f0712;
  background-color: #ffe2e2;
}

tr td .shell {
  background-color: #ffe2e2;
}

tr td .remain {
  background-color: #fef9c2;
  color: #894b00;
}

tr td .item7 {
  color: #372aac;
  background-color: #e0e7ff;
}

tr td .netflex {
  background-color: #e0e7ff;
}

tr td .item8 {
  color: #0092b8;
  background-color: #cefafe;
}

tr td .health {
  background-color: #cefafe;
}

tr td .course {
  background-color: #d0fae5;
}

@media (max-width: 40rem) {
  table thead tr th {
    font-size: 0.75rem;
  }

  .table {
    padding: 0.625rem;
  }

  .table .table-title h3 {
    font-size: 1rem;
  }

  tbody tr td,
  table thead tr th {
    padding: 0.3125rem 0.5rem;
  }

  tr .hide {
    display: none;
  }

  tbody tr td .p1-td {
    font-size: 0.6875rem;
  }

  tbody tr td .p2-td,
  tr td .item2 span i {
    font-size: 0.625rem;
  }
}

/* section 4  */

.public-look {
  padding: 1.5rem;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  grid-area: public;
}

.public-look .public-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.public-look .public-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #101828;
}

.public-look .public-title span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6a7282;
  cursor: pointer;
  transition: all 0.1s;
}

.public-look .public-title span:hover {
  color: #101828;
}

.total {
  padding: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  background-color: #eff5ff;
  border: 0.0625rem solid #dbeafe;
  border-radius: var(--border-radius);
  position: relative;
}

.total .p-right p,
.total .p-left p {
  margin: 0;
}

.total .p-left {
  text-align: left;
}

.total .p-right .text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #155dfc;
}

.total .p-right .number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1c398e;
}

.total .p-left .text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6a7282;
  padding-left: 2.5rem;
}

.total .p-left .number {
  font-size: 1.125rem;
  font-weight: 600;
  color: #00a63e;
}

.total .used {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.total .used .text,
.total .used .number {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a5565;
}

.total .percent {
  width: calc(100% - 2rem);
  height: 0.4375rem;
  margin: auto;
  background-color: #e5e7eb;
  position: absolute;
  border-radius: 3.125rem;
}

.total .percent .percent2 {
  width: 82.5%;
  height: 0.4375rem;
  background-color: #3d79ff;
  position: absolute;
  border-radius: 3.125rem;
}

.public-look {
  margin-top: 0.875rem;
}

.card {
  padding: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1rem;
  border: var(--border);
  border-radius: var(--border-radius);
  position: relative;
  transition: all 0.2s;
}

.card:hover {
  background-color: #f5f6f8;
  transform: translateY(-2px);
  box-shadow: 0 2px 2px rgb(215, 213, 213);
}

.card .right {
  display: flex;
  gap: 0.625rem;
}

.card .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .entertain {
  background-color: #ffedd4;
}

.card .title-right p {
  margin: 0;
}

.card .title-right .p-1 {
  font-weight: 500;
  color: #101828;
}

.card .title-right .p-2 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
}

.card .title-left {
  text-align: left;
  margin-bottom: 0.5rem;
}

.card .title-left p {
  font-weight: 600;
  color: #101828;
  margin: 0;
}

.card .title-left .fiften {
  color: #166534;
  background-color: #dcfce7;
}

.card .title-left span {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 3.125rem;
}

.card .percent {
  width: calc(100% - 2rem);
  height: 0.4375rem;
  margin: auto;
  background-color: #e5e7eb;
  position: absolute;
  border-radius: 3.125rem;
}

.card .percent .enter-percent {
  width: 50%;
  background-color: #ff6900;
}

.card .percent .percentage {
  height: 0.4375rem;
  position: absolute;
  border-radius: 3.125rem;
}

.card .invoices {
  background-color: #fee2e2;
}

.card .title-left .hundred {
  color: #fb2c36;
  background-color: #fee2e2;
}

.card .percent .invoice-percent {
  width: 100%;
  background-color: #fb2c36;
}

.card .care {
  background-color: #fce7f3;
}

.card .title-left .twenty {
  color: #a0400e;
  background-color: #fef3c7;
}

.card .percent .care-percent {
  width: 80%;
  background-color: #f6339a;
}

.card .house {
  background-color: #dcfce7;
}

.card .percent .house-percent {
  width: 86%;
  background-color: #00c950;
}

@media (max-width: 40rem) {
  .card-content {
    display: flex;
    justify-content: space-between;
  }

  .public-look {
    margin-top: 0;
  }
}

/* compare  */
.compare {
  padding: 1.5rem;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  margin-top: 0.875rem;
  grid-area: compare;
}

.compare .compare-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.compare-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #101828;
}

.compare-title span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6a7282;
  cursor: pointer;
  transition: all 0.1s;
}

.compare .compare-title span:hover {
  color: #101828;
}

.compare-info {
  display: flex;
  justify-content: center;
  gap: 0.9375rem;
  margin-bottom: 1rem;
}

.compare-info .income div {
  background-color: #10b981;
}

.compare-info .share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compare-info .share div {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.1875rem;
}

.compare-info span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.compare-info .expensive div {
  background-color: #ef4444;
}

.chart {
  display: flex;
  align-items: flex-end;
  gap: 0.125rem;
}

.week {
  margin: 0 0.25rem;
}

.week .size-green {
  height: 5.9375rem;
}

.week .income-green {
  width: 0.9375rem;
  border-top-left-radius: 0.1875rem;
  border-top-right-radius: 0.1875rem;
  background-color: #10b981;
  transition: all 0.2s;
}

.week .income-green:hover {
  background-color: #40c79a;
}

.week .size-red {
  height: 2.625rem;
}

.week .expense-red {
  width: 0.9375rem;
  border-top-left-radius: 0.1875rem;
  border-top-right-radius: 0.1875rem;
  background-color: #ef4444;
  transition: all 0.2s;
}

.week .expense-red:hover {
  background-color: #f26969;
}

.week span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 0.5rem;
}

.week .size-green-2 {
  height: 6.125rem;
}

.week .size-red-2 {
  height: 2.8125rem;
}

.week .size-green-3 {
  height: 5.75rem;
}

.week .size-red-3 {
  height: 2.375rem;
}

.week .size-green-4 {
  height: 6rem;
}

.week .size-red-4 {
  height: 2.8125rem;
}

.full-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.price-summary {
  padding: 1.5rem;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  margin-top: 0.875rem;
  grid-area: summary;
}

.price-summary .price-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.price-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #101828;
}

.price-title span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6a7282;
  cursor: pointer;
  transition: all 0.1s;
}

.price-summary .price-title span:hover {
  color: #101828;
}

.current-account .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9fafb;
  border: var(--border);
  border-radius: 0.625rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.current-account .item .right {
  display: flex;
  gap: 0.625rem;
}

.current-account .item .right .current {
  background-color: #dbeafe;
}

.current-account .item .right .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.current-account .item .right p {
  margin: 0;
}

.current-account .item .p-1 {
  font-weight: 500;
  color: #101828;
}

.current-account .item .right .desc .p-2 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6a7282;
}

.current-account .item .right .invoice-account {
  background-color: #dbfce7;
}

.current-account .item .right .account-card {
  background-color: #f3e8ff;
}

.current-account .item .p-customize {
  color: #e7000b;
}

@media (max-width: 40rem) {
  .compare,
  .price-summary {
    margin-top: 0;
  }
}

.payment-methods {
  padding: 1.5rem;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  margin-top: 0.875rem;
  position: relative;
  grid-area: methods;
}

.payment-methods .payment-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.payment-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #101828;
}

.payment-title span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6a7282;
  cursor: pointer;
  transition: all 0.1s;
}

.payment-methods .payment-title span:hover {
  color: #101828;
}

.card-1 {
  background-color: #372aac;
}

.cards {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 0.625rem;
  position: relative;
  transition: all 0.3s;
  perspective: 1000px;
}

.cards .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 0.125rem;
  margin-bottom: 0.9375rem;
}

.cards .top .parent {
  width: 2.5rem;
  height: 1.5625rem;
  background-color: #5f55bd;
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards .top span i {
  font-size: 1.5625rem;
}

.cards .top .parent .inner {
  width: 1.25rem;
  height: 0.9375rem;
  background-color: #9f99d7;
  border-radius: 0.25rem;
}

.cards .main-1 {
  font-size: 0.625rem;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(0.25rem);
  border-radius: 999px;
  padding: 0.375rem 0.5rem;
  position: absolute;
  top: 0.5rem;
  left: 0.625rem;
  color: white;
}

.cards .code {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  color: white;
}

.card-info {
  display: flex;
  justify-content: space-between;
}

.card-info .card-name {
  display: flex;
  flex-direction: column;
}

.card-info .card-name span {
  font-size: 0.75rem;
  color: white;
}

.card-info .card-name .name {
  font-weight: bold;
}

.card-black {
  padding: 0.625rem;
  margin-bottom: 1rem;
  border-radius: 0.625rem;
  background-color: #0c1421;
  position: absolute;
  top: 9%;
  left: 8%;
  right: 1.5rem;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  transition: all 0.3s;
}

.card-black .gradient {
  height: 2rem;
  background-image: linear-gradient(to right, #000, #292929);
  border-radius: 0.1875rem;
}

.card-black p {
  margin: 0;
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #6a7282;
}

.card-black .white1 {
  height: 1.5625rem;
  background-color: #eef2f6;
  border-radius: 0.1875rem;
  padding: 0.375rem 0.5rem;
  display: flex;
  align-items: center;
  margin-top: 0.625rem;
}

.card-black .white1 .gray1 {
  width: 100%;
  height: 0.625rem;
  background-color: #c8cbcd;
}

.card-black .white1 span {
  font-size: 0.875rem;
  font-weight: 700;
  color: #101828;
}

.card-black .cvv {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 0.75rem;
}

.card-black .cvv span {
  font-size: 0.875rem;
  font-weight: 600;
  color: #d1d5dc;
  padding-left: 2rem;
}

.card-black .cvv div {
  padding: 0.5rem 0.75rem;
  border-radius: 0.3125rem;
  background-color: #ffffff;
}

.main-card:hover .cards {
  transform: rotateY(180deg);
}

.main-card:hover .card-black {
  transform: rotateY(0deg);
}

.card-2 {
  background-color: #c60036;
}

.card-black-2 {
  position: absolute;
  top: 32%;
  left: 8%;
  right: 1.5rem;
}

.cards .top .parent-2 {
  background-color: #d1335e;
}

.cards .top .parent .inner-2 {
  background-color: #e3859e;
}

.card-3 {
  background-color: #193cb8;
}

.card-black-3 {
  position: absolute;
  top: 56%;
  left: 8%;
  right: 1.5rem;
}

.card-info .card-name .name-3 {
  color: #46f084;
}

.card-black .cvv .unique-num {
  padding-left: 50px;
}

@media (max-width: 40rem) {
  .payment-methods {
    margin-top: 0;
  }

  .card-black {
    position: absolute;
    top: 9%;
    left: 5%;
    right: 1.5rem;
  }

  .card-black-2 {
    top: 38%;
  }

  .card-black-3 {
    top: 68%;
  }
}

@media (min-width: 40.0625rem) and (max-width: 56.25rem) {
  .compare,
  .price-summary {
    margin-top: 0;
  }

  .main .recent-activity {
    margin-bottom: 0;
  }
  .card-black {
    position: absolute;
    top: 9%;
    left: 5%;
    right: 1.5rem;
  }

  .card-black-2 {
    top: 38%;
  }

  .card-black-3 {
    top: 68%;
  }
}