.gray {
  color: #797979;
}

code {
  border: 1px solid white;
  padding: 0 4px;
  border-radius: 1px;
}

.pdx-container {
  display: inline-flex;
  align-items: center;
}

.pdx-text {
  margin: 0;
  padding: 0;
  display: inline-block;
  font-size: 36px;
  padding-bottom: 18px;
}

.pdx-line {
  margin: 0;
  padding: 0;
  display: inline-block;
  box-sizing: border-box;
  height: 2px;
  background: white;
}

.pdx-one {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100px;
}

.pdx-circle {
  margin: 0;
  padding: 0;
  display: inline-block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1.5px solid white;
  border-radius: 6px;
}

.pdx-invisible.pdx-circle {
  border: none;
}

.pdx-filled {
  background: white;
  border-width: 2px;
}

.pdx-label-0::before { position: relative; left: -2px; font-size: 24px; content: "0"; }
.pdx-label-1::before { position: relative; left: -2px; font-size: 24px; content: "1"; }
.pdx-label-2::before { position: relative; left: -2px; font-size: 24px; content: "2"; }
.pdx-label-3::before { position: relative; left: -2px; font-size: 24px; content: "3"; }
.pdx-label-4::before { position: relative; left: -2px; font-size: 24px; content: "4"; }
.pdx-label-5::before { position: relative; left: -2px; font-size: 24px; content: "5"; }

.pdx-boxes {
  display: inline-flex;
  flex-direction: row;
  margin: 16px 0 48px;
}

.pdx-box {
  width: 150px;
  height: 93px;
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid white;
}

.pdx-box-a {
  margin-right: 32px;
  border-left: 2px solid cyan;
}

.pdx-box-b {
  border-left: 2px solid cyan;
  border-right: 2px solid red;
}

.pdx-box-money {
  font-size: 24px;
}

.pdx-selected {
  font-weight: 900;
  color: #00ff00;
}

.pdx-notselected {
  text-decoration: line-through;
  color: #797979;
}