.rowi {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5vh;
}

.row {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5vh;
}

.column {
  display: table-cell;
  flex-direction: column;
  /* vertical-align: middle; */
  /* width: 25%; */
  padding-right: 10px;
  width: 20%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  /* clear: both; */
}

.block {
  display: block;
  width: 25%;
  border: none;
  background-color: #4CAF50;
  color: white;
  padding: 14px 28px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
}

.block:hover {
  background-color: #ddd;
  color: black;
}

.header {
  font-size: 2vw;
  text-align: center;
}

.header-input {
  /* width: 280px; */
  width: 100%;
  font-size:30px;
}

.header-result {
  /* width: 280px; */
  width: 100%;
  font-size:30px;
}

.input-img {
  width: 100%;
}


span.blueText {
  color: #6196C9;
  font-weight: bold;
}

span.redText {
  color: #e6729a;
  font-weight: bold;
}

/* for interactive results */
#card {
  display: flex;
  flex-direction: column;  
  /* width: 600px; */
  /*border-radius: 6px;*/
  /*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);*/
  overflow: hidden;
  border: 2px rgb(185, 185, 185) solid;
  width: 100%;
  height: 97.5%;
}

model-viewer {
  width: 100%;
  /* height: calc(19.2vw * 3 / 4);; */
  height: 100%;
  background-color: #ffffff;
}

.view1 {
  border:2px solid #8cc2e8;
}


.view2 {
  border:4px solid #e6729a;
}