table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.parent {
  overflow: auto;
}

td,
th {
  border: 1px solid var(--light-gray);
  text-align: left;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  /* min-width: 160px; */
}

.header {
  background-color: var(--header-fiat-bg-color);
}

.header th {
  color: #fff;
}

tr:nth-child(even) {
  background-color: var(--light-gray);
}

td {
  font-size: 0.7rem;
}

td .value {
  display: inline;
}
.status-icon {
  vertical-align: middle;
}
.value .change-value {
  padding-right: 2px;
}

th {
  font-size: 0.8rem;
  font-weight: bold;
}

.up {
  color: var(--green);
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

.down {
  color: var(--red);
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

.currency {
  order: 3;
}

.chart a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart svg {
  display: flex;
}

.top-card {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 8px 0 8px;
}

.wrap-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-wrap: wrap;
}

.wrap-col-data {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}

.wrap-col-data span {
  font-size: 0.7rem;
}

.top-card .title-price,
.top-card .changes,
.card .left-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-price .title {
  font-size: 1.2rem;
  font-weight: bold;
}

.right-bottom .min,
.right-bottom .max {
  display: flex;
  gap: 4px;
  align-items: center;
}

.right-card {
  padding: 4px;
}
.bottom-card {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-top: 1px dotted #000;
  align-items: center;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  border-radius: 4px;
  width: 100%;
  margin: 0 auto;
}

.card span {
  font-size: 0.8rem;
  color: var(--dark-red);
  text-align: center;
  color: var(--header-text-color);
}

.title-price .price {
  font-size: 1.2rem;
  font-weight: bold;
}

.up-card span {
  color: #3bf93b;
}

.up-card .value {
  display: flex;
  align-items: center;
  gap: 2px;
}

.down-card span {
  color: #ffbdbd;
}

.down-card .value {
  display: flex;
  align-items: center;
  gap: 2px;
}

.parent-data {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid #eee;
}

.data-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #eee;
  border-radius: 4px;
}

.data-card:nth-child(1) {
  border-right: 1px solid #eee;
}

.data-card .title {
  font-size: 0.8rem;
  font-weight: bold;
  background: var(--header-fiat-bg-color);
  width: 100%;
  padding: 4px;
  color: var(--header-text-color);
}

.data-card .title a {
  color: var(--header-text-color);
  text-decoration: none;
}

.data-card .price {
  font-size: 0.8rem;
  font-weight: bold;
  padding: 8px 0;
}