wallet-core/packages/demobank-ui/src/scss/bank.scss

.navcontainer:not(.default-navcontainer) {
  margin-bottom: 0 !important;
}

.abort-button {
  margin-left: 2px;
  border: 2px solid rgb(0, 120, 231);
  color: rgb(0, 120, 231);
  font-size: 87%;
  margin-top: 1px;
  background: white;
}

div.pages-list {
  margin-top: 15px;
}

.footer {
  margin-left: 2em;
  margin-right: 2em;
}

.qr-div,
.login-div,
.register-div {
  display: block;
  text-align: center;
}

a.page-number {
  color: blue;
}

a.current-page-number {
  color: inherit;
  background-color: inherit;
}

.cancelled {
  text-decoration: line-through;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* This CSS code styles the tab */
.tab {
  overflow: hidden;
}

.top-right {
  float: right;
}
.some-space {
  display: inline-block;
  border: 20px;
  margin-right: 15px;
  margin-top: 15px;
}

.tab button {
  background-color: lightgray;
  color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 18px 19px;
  border: 2px solid #c1c1c1;
  transition: 0.5s;
  font-weight: bold;
}

.tab button:hover {
  background-color: yellow;
  border: 2px solid #c1c1c1;
  color: black;
}

.tab button.active {
  background-color: orange;
  border: 2px solid #c1c1c1;
  color: black;
  font-weight: bold;
}

.tabcontent {
  display: none;
  padding: 8px 16px;
  border: 2px solid #c1c1c1;
  width: min-content;
}

.tabcontent.active {
  display: block;
}

input[type="number"] {
  -moz-appearance: textfield;
}

#transfer-fields {
  display: flex;
  flex-wrap: wrap;
}

#id_amount {
  width: 6em;
  display: inline-block;
  border-radius: 4px 0px 0px 4px;
}

/**
 * Amount without the currency,
 * placed left to a .currency-indicator.
 */
#main .amount {
  width: 6em;
  display: inline-block;
  border-radius: 4px 0px 0px 4px;
}

input {
  background-color: inherit;
}

.large-amount {
  font-weight: bold;
  font-size: xxx-large;
}

.currency {
  font-style: oblique;
}

/*
 * Currency indicator to the right of input fields,
 * with non-rounded corners to the left.
 */
#main .currency-indicator {
  color: black;
  border-radius: 4px 0px 0px 4px;
  position: relative;
}

#main .fieldlabel {
  display: block;
  padding-bottom: 0.5em;
}

#main .fieldbox {
  margin-right: 1em;
  margin-bottom: 0.5em;
}

#logout-button {
  display: block;
  width: fit-content;
}

.register-form > .pure-form,
.login-form > .pure-form {
  background: #4a4a4a;
  color: #ffffff;
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 16px;
  border-radius: 8px;
  width: min-content;
  .formFieldLabel {
    margin: 2px 2px;
  }
  input[type="text"],
  input[type="password"] {
    border: none;
    border-radius: 4px;
    background: #6a6a6a;
    color: #fefefe;
    box-shadow: none;
  }
  input[placeholder="Password"][type="password"] {
    margin-bottom: 8px;
  }
  .btn-register,
  .btn-login {
    float: left;
  }
  .btn-cancel {
    float: right;
  }
  h2 {
    margin-top: 0;
    margin-bottom: 10px;
  }
}

.challenge-div {
  display: block;
  text-align: center;
}

.challenge-form > .pure-form {
  background: #4a4a4a;
  color: #ffffff;
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 16px;
  border-radius: 8px;
  width: min-content;
  .formFieldLabel {
    margin: 2px 2px;
  }
  input[type="text"] {
    border: none;
    border-radius: 4px;
    background: #6a6a6a;
    color: #fefefe;
    box-shadow: none;
  }
  .btn-confirm {
    float: left;
  }
  .btn-cancel {
    float: right;
  }
  h2 {
    margin-top: 0;
    margin-bottom: 10px;
  }
}

.wire-transfer-form > .pure-form,
.payto-form > .pure-form,
.reserve-form > .pure-form {
  background: #4a4a4a;
  color: #ffffff;
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 16px;
  border-radius: 8px;
  width: min-content;
  .formFieldLabel {
    margin: 2px 2px;
  }
  input[type="text"] {
    border: none;
    border-radius: 4px;
    background: #6a6a6a;
    color: #fefefe;
    box-shadow: none;
  }
}

html {
  background: #ffffff;
  color: #2a2a2a;
}

.hint {
  scale: 0.7;
}
h1.nav {
  text-align: center;
}

.pure-form > fieldset > label {
  display: block;
}
.pure-form > fieldset > input[disabled] {
  color: black !important;
}
.pure-form > fieldset > div > input[disabled] {
  color: black !important;
}

.pure-form > fieldset > div.channel > div {
  display: inline-block;
  margin: 1em;
  border: 1px black solid;
  width: fit-content;
  padding: 0.4em;
  cursor: pointer;
}

.button-success {
  background: rgb(28, 184, 65);
  /* this is a green */
}

.button-error {
  background: rgb(202, 60, 60);
  /* this is a maroon */
}

.button-warning {
  background: rgb(223, 117, 20);
  /* this is an orange */
}

.button-secondary {
  background: rgb(66, 184, 221);
  /* this is a light blue */
}

[name=wire-transfer-form] > input {
  margin-bottom: 1em;
  
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid black;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: black transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}