.dark {
    --color-dark: rgb(0, 0, 0);
    --color-light: rgb(0, 20, 28);
    --color-highlight: rgb(0, 150, 157);
    --color-text: rgb(255, 255, 255);
  }
  
  .light {
    --color-dark: rgb(255, 255, 255);
    --color-light: rgb(250, 250, 250);
    --color-highlight: rgb(0, 150, 157);
    --color-text: rgb(93, 93, 93);
  }

.main-stat {
  width: 100%;
  margin-left:0%;
}

.r {
  text-align: right;
}

.l {
  justify-content: left !important;
  text-align: left;
}

#wallet-list {
  padding-bottom: var(--padding);
  margin: var(--padding) var(--padding) var(--padding) var(--padding);
  border-radius: var(--h4) var(--h4) var(--h4) var(--h4);
  display: inline-block;
}

#wallet-list > [class*='col-'] {
  padding: calc(var(--padding) * 2) calc(var(--padding) * 2) calc(var(--padding) * 2) calc(var(--padding) * 2);
}

.wallets.active .row,.wallets.active > p  {
  background-color: var(--color-highlight) !important;
}

.wallets.active i  {
  color: var(--color-text) !important;
}

#settings-wallet {
  color: var(--color-text);
}


.wallets > .row  {
  background-color: var(--color-dark);
  margin-left: 0;
  margin-right: 0;
  padding-top: calc(var(--padding) * 4);
}

#wallet-list .wallets i.pe-7s-wallet {
  vertical-align: top;
  color: var(--color-highlight);
  font-size: var(--h0);
  font-weight: 900;
  text-align: left;
  
}

#wallet-list .wallets i.pe-7s-close {
  color: var(--color-highlight);
  font-size: var(--h0);
  font-weight: 900;
  text-align: right;
  width: min-content;
  margin-left: auto;
  margin-right: 0;
}

#wallet-list .wallets p {
  color: var(--nav-icon);
  background-color: var(--color-dark);
  vertical-align: top;
  font-size: var(--h2);
  white-space: nowrap;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  padding-bottom: calc(var(--padding) * 4);
  font-weight: 900;
}

.hidden {
  visibility: hidden;
  height:0;
}

.btn {
  border-radius: var(--h4) var(--h4) var(--h4) var(--h4);
  border: 0.2vh solid var(--color-light);
  background-color: var(--color-dark);
  color:var(--color-text);
  width: 80%;
  font-size: var(--h2);
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.btn:hover {
  border-radius: var(--h4) var(--h4) var(--h4) var(--h4);
  border: 0.2vh solid var(--color-dark);
  background-color: var(--color-highlight);
  color: var(--color-text);
  width: 80%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.form-control {
  height: 80%;
  font-size: var(--h3);
  width:80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#wallet-include {
  height: 80%;
  font-size: var(--h3);
  width:80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#wallet-include:checked {
  height: 80%;
  font-size: var(--h3);
  width:80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  accent-color: var(--color-highlight);
}

.form-control[type="number"]
{
  font-size: var(--h3);
}

.title {
  font-weight: 900;
  color: var(--color-highlight);
}

.heading {
  font-weight: 900;
  color: var(--color-highlight);
}

strong {
  color: var(--color-highlight);
}

input[type='checkbox'] {
    margin-left: auto;
    margin-right: auto;
 }