modunawa/resources/css/wallet.css

/*========================================
             WALLET PAGE STYLE
=========================================*/
.my-wallet {
  margin-bottom: 30px;
}

.my-wallet p {
  text-transform: capitalize;
  margin-bottom: 5px;
}

.my-wallet h3 {
  font-size: 35px;
  color: var(--primary);
}

.wallet-card-group {
  display: -ms-grid;
  display: grid;
  grid-gap: 20px;
  -ms-grid-columns: (minmax(200px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  -ms-grid-rows: auto;
      grid-template-rows: auto;
}

.wallet-card {
  padding: 25px;
  border-radius: 8px;
  background: var(--chalk);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.wallet-card:hover {
  background: var(--primary);
}

.wallet-card:hover p,
.wallet-card:hover h3 {
  color: var(--white);
}

.wallet-card p {
  text-transform: capitalize;
  margin-bottom: 5px;
}

.wallet-card p,
.wallet-card h3 {
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.add-wallet p {
  margin-bottom: 10px;
}

.wallet-form input {
  width: 100%;
  padding: 10px 20px;
  border-radius: 6px;
  background: var(--chalk);
  border: 1px solid var(--border);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.wallet-form input:focus-within {
  border-color: var(--primary);
}

.wallet-form button {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 30px;
  border-radius: 6px;
  margin-top: 17px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--primary);
}

.wallet-suggest {
  margin-top: 15px;
  padding: 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.wallet-suggest h6 {
  font-size: 12px;
  font-weight: 500;
  margin-right: 10px;
  text-transform: uppercase;
}

.wallet-suggest ul li {
  margin-right: 5px;
  margin-bottom: 8px;
  display: inline-block;
}

.wallet-suggest ul li a {
  font-size: 14px;
  font-weight: 500;
  padding: 5px 12px;
  line-height: 22px;
  border-radius: 4px;
  color: var(--text);
  background: var(--chalk);
  transition: all linear .3s;
  -webkit-transition: all linear .3s;
  -moz-transition: all linear .3s;
  -ms-transition: all linear .3s;
  -o-transition: all linear .3s;
}

.wallet-suggest ul li a:hover {
  color: var(--white);
  background: var(--primary);
}

.table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--border);
}

.table thead tr {
  background: var(--chalk);
}

.table thead th {
  font-size: 15px;
  line-height: 32px;
  color: var(--heading);
}

.table tbody tr th,
.table tbody tr td {
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  text-align: center;
  text-transform: capitalize;
}

.table tbody tr th {
  border-right: 1px solid var(--border);
}

.table .fw-bold {
  font-weight: 500 !important;
}

.bottom-paginate {
  border-top: none;
}

@media (max-width: 991px) {
  .table {
    width: 900px;
    overflow-x: scroll;
  }
}

@media (max-width: 575px) {
  .wallet-suggest {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .wallet-suggest h6 {
    margin: 0px 0px 10px;
  }
}