p.error {background:red; color: white; padding:0.5em;}
p.alert {border: 2px solid orange; background: #ffe; padding:0.5em}
p.success {padding:0.5em; background-color: #5CBF60; color: white;}
p.hint {color: green; margin:0px; font-size: 0.9em;}

div.wallet-index {border:1px solid #888; padding: 1em;}
div.cf-wallet-checkout-message {background-color: #eee; padding:1em;}
div.cf-wallet-checkout-message h4 {font-size: 1em; font-weight:bold;}

div.subscription-index, div.wallet-index {border: 1px solid #888; padding: 1em; background-color: #f5f5f5;}
img.refill {max-width:150px !important; border:2px solid black;}

div.subscription-description, div.wallet-description {
  border: 2px solid #666; margin-bottom: 2em;
}
div.subscription-description div.header-section, div.wallet-description div.header-section {
  border: 2px solid #666; background: #9d9; padding: 0.5em;
}
div.subscription-description div.header-section label, div.wallet-description div.header-section label {
  margin-left:1em;
}

div.cf-wallet-product-price {margin-bottom: 2em;}
div.cf-wallet-product-price label {margin-right: 0.5em;}
div.cf-wallet-product-price button.update-price {margin-left: 1em !important;}
input.cf-wallet-product-price {max-width:4em; text-align:right;}

/* Wallet accordions */
.wallet-accordion {
  transition: 0.4s;
}

.wallet-accordion.active, .wallet-accordion:hover {
  background-color: #ccc;
}

.wallet-accordion:after {
  content: '\002B\00a0\00a0\00a0\00a0';
  color: #777;
  font-weight: bold;
  color: white;
  font-size:2em;
  float: right;
  margin-left: 5px;
}

.wallet-accordion.active:after {
  content: "\2212\00a0\00a0\00a0\00a0";
}

.wallet-panel {
  padding: 0 28px;
  margin-left:2em; margin-right: 2em;
  background-color: #f5f5f5;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

tr.grey td {background-color: #ccc;}

a.create-wallet-for-user {float:right;}

table#user-selection-index  form {display: inline-block; margin-right: 1em;}

form.wallet-edit input {width:9em;}

/* Fixes for jquery modals */
.modal {
  max-width:1200px !important;
  margin-top:50px !important;
}

div.wallet-refill-products {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}