/* (c) Innings2, generated by Mathigon Studio */
x-relation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 680px;
  margin: 1.5em auto;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
x-relation .item {
  background: #f5f5f6;
  border: 1px solid #ccc;
  padding: 3px 12px;
  margin: 6px 0;
  border-radius: 4px;
}
x-relation .item.active {
  background: #e1e1e1;
}
x-relation .item img, x-relation .item svg, x-relation .item object {
  width: 100%;
  pointer-events: none;
}
x-relation .domain, x-relation .range {
  width: 33.333%;
}
x-relation .domain .item {
  cursor: pointer;
}
x-relation svg.connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
x-relation .connections line {
  stroke: #656073;
  stroke-width: 4px;
  stroke-linecap: round;
}
x-relation .line_red {
  stroke: #cd0e66 !important;
  stroke-width: 4px;
  stroke-linecap: round;
}
x-relation .line_green {
  stroke: #22ab24 !important;
  stroke-width: 4px;
  stroke-linecap: round;
}

.ten {
  display: block;
  width: 70px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 2px solid black;
  border-radius: 85px;
  display: flex;
  color: #000;
  margin-bottom: 2px;
}
.ten:after {
  content: "||||||||||";
}

.seven {
  display: block;
  width: 80px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border-radius: 85px;
  display: flex;
  color: #000;
}
.seven:after {
  content: "|||||||";
}

.three {
  display: flex;
  width: 80px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border-radius: 85px;
  display: flex;
  color: #000;
}
.three:after {
  content: "|||";
}

.one {
  display: flex;
  width: 80px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border-radius: 85px;
  display: flex;
  color: #000;
}
.one:after {
  content: "|";
}

.two {
  display: flex;
  width: 80px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border-radius: 85px;
  display: flex;
  color: #000;
}
.two:after {
  content: "||";
}

.four {
  display: flex;
  width: 80px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border-radius: 85px;
  display: flex;
  color: #000;
}
.four:after {
  content: "||||";
}

.five {
  display: block;
  width: 70px;
  height: 30px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 2px solid black;
  border-radius: 85px;
  display: flex;
  color: #000;
  margin-bottom: 2px;
}
.five:after {
  content: "|||||";
}

.five-diagonal-cross {
  position: relative;
  width: 50px;
  font-size: 24px;
  height: 50px;
  background: linear-gradient(to bottom right, transparent 46%, black 46%, black 55%, transparent 55%);
}
.five-diagonal-cross:after {
  content: "||||";
}

.input-container {
  background-color: aliceblue;
  text-align: center;
  max-width: 150px;
}

.input-container-small {
  background-color: rgb(224, 237, 182);
  margin: 10px 10px 10px 25px;
  text-align: center;
  max-width: 100px;
  border-radius: 15px;
}