tr.buy-order-filled td {
  background-color: var(--green);
}

tr.sell-order-filled td {
  background-color: var(--red);
}

tr.order-cancelled td {
  background-color: lightgray;
}

td.buy-order-open {
  background-color: var(--green);
}

td.sell-order-open {
  background-color: var(--red);
}

.amount,
.value,
.price,
.volume {
  text-align: right;
  font-family: monospace;
}

.toast-custom {
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0 0 0.5rem 0;
}

.toast-error {
  border: 1px solid var(--red);
  background-color: rgba(var(--red), 0.8);
}

.toast-warning {
  border: 1px solid var(--yellow);
  background-color: rgba(var(--yellow), 0.8);
}

.toast-success {
  border: 1px solid var(--green);
  background-color: rgba(var(--green), 0.8);
}

.toast-info {
  border: 1px solid var(--blue);
  background-color: rgba(var(--blue), 0.8);
}

table tr.volume-80-100 td {
  background-color: rgba(var(--green), 1) !important;
}
table tr.volume-60-80 td {
  background-color: rgba(var(--green), 0.8) !important;
}
table tr.volume-40-60 td {
  background: rgba(var(--green), 0.6) !important;
}

input,
select {
  margin: 0;
  border: 1px solid #ccc;
  padding: 2px 5px;
}

input.button {
  margin: 0;
  padding: 0.1rem 0.75rem;
  background-color: var(--yellow);
  border-color: var(--red);
}

select option {
  padding: 1px 5px;
}

div.filter-frame-row {
  display: flex;
  flex-direction: row;
  border: 1px solid #dedede;
  margin: 0 0 10px 0;
  padding: 0 10px 5px 10px;
}

div.filter-frame-column {
  display: flex;
  flex-direction: column;
  border: 1px solid #dedede;
  margin: 0 0 10px 0;
  padding: 0 10px 5px 10px;
}

div.filter-content {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
  /* flex-direction: row; */
  min-height: 40px;;
}

div.filter-frame-column > div.filter-content {
  flex-direction: column;
  align-items: left;
}

div.filter-frame-row > div.filter-content {
  flex-direction: row;
  align-items: center;
}

div.filter-input {
    padding: 5px 20px 0 0;
}