/* ----- Checkout Page Styles ------*/

.bnomics-order-info {
  display: flex;
}

.bnomics-order-info > div {
  padding-top: 5px;
  padding-bottom: 0;
}

.bnomics-order-info .bnomics-bitcoin-pane {
  flex: 2;
}

.bnomics-bitcoin-pane .bnomics-btc-info {
  display: flex;
  text-align: center;
}

.bnomics-btc-info .bnomics-qr-code {
  flex: 1;
  padding-top: 1em;
}

.bnomics-btc-info .bnomics-amount {
  flex: 2;
}

.bnomics-qr-code {
  display: none;
}

.no-js .bnomics-qr-code {
  display: block;
}

.bnomics-qr-code-hint {
  text-align: center;
  display: block;
}

.bnomics-order-number {
  text-transform: uppercase;
}

.bnomics-bg {
  min-height: 180px;
  padding-top: 5px;
}

.bnomics-qr {
  text-align: center !important;
  padding: 10px 10px 5px 10px;
  width:180px;
  margin: 0 auto;
  text-align: left;
}

.bnomics-amount-input, .bnomics-address-input {
  padding: 2px 4px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid #DDD;
  box-shadow: none;
  text-align: center;
  padding:7px;
  cursor: pointer;
  margin-left: 0;
}

.bnomics-amount-input li, .bnomics-address-input li {
  display: inline-block;
  list-style: none;
  margin-left: 5px;
  word-break: break-all;
}

.bnomics-grey {
  color:grey;
}

.bnomics-address, .bnomics-amount{
  margin-top: 10px;
}

.bnomics-display-error {
  animation: errorAnimation 0s 3s forwards;
  height: 0; 
  width: 0;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

@keyframes errorAnimation {
  to   { width:auto;height: auto; }
}
/* Style for QR Code in NoJS mode */
svg {
  width: 160px;
  margin: auto;
}
/* Mobile */
@media screen and (max-width: 800px) {
  .bnomics-btc-info {
    display: block !important;
  }

  .bnomics-order-container {
    text-align: center;
  }

  .bnomics-order-info {
    display: block;
  }
}

/* ----- Select Crypto Styles ------*/
@font-face {
  font-family: 'cryptos';
  src:  url('../fonts/cryptos.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="bnomics-icon-"], [class*=" bnomics-icon-"] {
  font-family: 'cryptos' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 2em;
  width: 15%;
  min-width: 40px;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: left;
}

.bnomics-icon-bch:before {
  content: "\e900";
}
.bnomics-icon-btc:before {
  content: "\e901";
}
.bnomics-icon-usdt:before {
  content: "\e902";
}

.bnomics-select-options {
  cursor:pointer;
  width:100%;
  display: block;
  height: 4.2em;
  margin-bottom: 10px !important;
  box-shadow: 0 4px 8px 0;
  transition: 0.3s;
  text-align: center !important;
  word-break: break-word;
}

.bnomics-select-options:hover {
  box-shadow: 0 8px 16px 0;
}

.bnomics-select-container {
/*padding-top is the space above crypto options on the select crypto page*/
  padding-top: 10vh;
  text-align:center;
  max-width:400px;
  margin:auto;
}

.bnomics-select-container table{
  border-collapse: separate;
  border-spacing: 10px 0px;
  border: none;
}

.vertical-line {
  border-left: 2px solid ;
  height: 2em;
  display: flex;
  padding-left: 5%;
  align-items: center;
}

/* ---- Spinner ---- */
.bnomics-spinner-wrapper {
  width: 100%;
  text-align: center;
  padding: 20px;
  animation: errorAnimationSync 0s 3s forwards;
  -webkit-animation: errorAnimationSync 0s 3s forwards;
}

.bnomics-spinner {
  display: inline-block;
  width: 70px;
  height: 70px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #000;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@keyframes errorAnimationSync {
  to { height: 0; width: 0; overflow: hidden; padding: 0; }
}
@-webkit-keyframes errorAnimationSync {
  to { height: 0; width: 0; overflow: hidden; padding: 0; }
}
/** Hide Panels by Default **/

#blockonomics_checkout:not(.no-js) .bnomics-order-container .bnomics-order-panel,
#blockonomics_checkout:not(.no-js) .bnomics-order-container .bnomics-copy-amount-text,
#blockonomics_checkout:not(.no-js) .bnomics-order-container .bnomics-copy-address-text {
  display: none;
}

/* ----- Blockonomics Font Icons ----*/

@font-face {
  font-family: 'blockonomics-icons';
  src: url('../fonts/blockonomics-icons.woff?6m1shn') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="blockonomics-icon-"], [class*=" blockonomics-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'blockonomics-icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin-left: 2px;
  margin-right: 2px;
  font-size: 1.5em;
}

[class^="blockonomics-icon-"].spin::before, [class*=" blockonomics-icon-"].spin::before {
  display: inline-block;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.blockonomics-icon-cart::before {
  content: "\e900";
}

.blockonomics-icon-qr::before {
  content: "\e901";
}

.blockonomics-icon-copy::before {
  content: "\e902";
}

.blockonomics-icon-refresh::before {
  content: "\e903";
}

.blockonomics-icon-copy,
.blockonomics-icon-qr,
.blockonomics-icon-refresh {
  cursor: pointer;
}

/* - Blockonomics Font Icons Ends -- */

#bnomics-amount-copy, #bnomics-address-copy {
  padding-left: 5px;
  padding-right: 5px;
}

#bnomics-show-qr, #bnomics-refresh {
  padding-left: 5px;
}

#blockonomics_checkout,
#blockonomics_checkout h5,
#blockonomics_checkout table {
  margin-left: auto;
  margin-right: auto;
}

#blockonomics_checkout h5,
#blockonomics_checkout table {
  width: 100%;
  max-width: 400px;
}

#blockonomics_checkout h5 {
  text-align: left;
}

#blockonomics_checkout table {
  margin-top: 1em;
  margin-bottom: 1em;
  border-collapse: separate;
  border-spacing: 0 0.5em;
}

#bnomics-refresh {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.bnomics-copy-container {
  display:flex;
  align-items: center;
  position: relative;
}

.bnomics-copy-container input {
  flex-grow: 1;
}

.bnomics-copy-container-animation-rectangle {
  position: absolute;
  width: 100%;
  transition: width 300ms ease-in-out, left 300ms ease-in-out;
  content: '';
  background-color: #fff;
}

#blockonomics_checkout button {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

#blockonomics_checkout button img {
  margin-right: 5px;
  height: 1rem;
  width: auto;
}

#blockonomics_checkout .blockonomics-icon {
  padding-left: 5px;
  padding-right: 5px;
}

#blockonomics_checkout .bnomics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bnomics-header div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bnomics-crypto-price-timer {
  display: block;
  text-align: center;
  transition: 300ms all ease-in-out;
}

#web3-payment {
  --primary-color: #40c381 !important;
  --text-color: #000000 !important;
  --error-color: #cf3310 !important;
  --disabled-color: #768b80 !important;
  --border-color: #e0e0e0 !important;
  --highlight-color: #b7ecd1 !important;
  --warning-color: #f1760f !important;
}