/* .sm-main */
.sm-main {
  width: 100%;
  position: relative;
  background: #d8d8d8;
  white-space: nowrap;
  border-bottom: 1px solid #e3e3e3;
}

.sm-main .fixed {
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 100%;
}

.sm-main .fixed div {
  height: 30px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
}

.sm-main .fixed div:first-child {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 90px;
  color: #fff;
  background: #434343;
  border-right: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}

.sm-main .fixed div span {
  width: 50px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  height: 45px;
  line-height: 45px;
}

.sm-main .fixed div:first-child span {
  width: 50px;
  margin: 0;
  padding: 0;
  height: 20px;
  line-height: 20px;
}

.sm-main .fixed div:first-child span svg {
  margin: 1px 0;
}

.sm-main .fixed .correct_rate {
  line-height: 30px;
  font-size: 14px;
  color: red;
  font-weight: 600;
}

.sm-main .fixed .id_name {
  line-height: 30px;
  font-size: 14px;
  color: #333333;
  font-weight: 600;
}

.sm-main .no_fixed {
  font-size: 0;
  width: 100%;
  padding-left: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}

.sm-main .no_fixed .column {
  display: inline-block;
  width: auto;
  background: #fff;
}

.sm-main .no_fixed .column div {
  width: auto;
  margin: 0;
  padding: 0;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
}

.sm-main .no_fixed .column div:first-child {
  color: #fff;
  background: #434343;
  border-bottom: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
}

.sm-main .no_fixed .column div:nth-child(2) {
  color: #fff;
  background: #b41220 !important;
  border-bottom: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
}

.sm-main .no_fixed .column div:nth-child(2) span,
.sm-main .no_fixed .column div:nth-child(3) span {
  font-size: 14px;
}

.sm-main .no_fixed .column span {
  margin: 0;
  padding: 0;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  float: left;
  border-bottom: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
}

.sm-main .no_fixed .column div span:first-child {
  padding: 0 10px;
  background: #f7f7f7;
}

.sm-main .no_fixed .column div span:last-child {
  background: #fff;
}

.sm-main .no_fixed .column:first-child span:first-child {
  background: #ffeece;
}

/* issue */
.sm-main .no_fixed .column div.issue {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  padding: 0 10px;
}

/* look */
.sm-main .no_fixed .column div.look {
  min-width: 100%;
  padding: 0 10px;
}

.sm-main .no_fixed .column div.look span {
  display: block;
  width: 100% !important;
  position: relative;
  background: #b41220 !important;
  color: #fff;
  border-right: 0 !important;
  padding: 0 16px 0 0 !important;
}

.sm-main .no_fixed .column div.look span::after {
  content: '';
  top: 8px;
  right: 4px;
  bottom: 0;
  position: absolute;
  height: 6px;
  width: 6px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.sm-main .no_fixed .column div {
  display: flex;
}

.sm-main .no_fixed .column div span:first-child {
  flex: 1;
  min-width: 40px;
}

.sm-main .no_fixed .column div span:nth-child(2) {
  width: 40px;
  height: 100%;
}

.sm-main .no_fixed .column div span.prediction_value i {
  font-style: normal;
}

.sm-main .no_fixed .column div span.error {
  padding: 0 5px;
}

.sm-main .no_fixed .column div span.error i {
  display: inline-block;
  padding: 2px 4px;
  color: #ffffff;
  background: #fe755d;
  border-radius: 5px;
}

/* correct | incorrect */
.correct {
  color: #ff0000 !important;
}

.correct:before {
  content: '\2713\fe0e';
  color: #ff0000 !important;
  font-size: 16px;
}

.incorrect {
  color: #24ac55 !important;
}

.incorrect:before {
  content: '\2715\fe0e';
  color: #24ac55 !important;
  font-size: 14px;
}

/* .optional */
.optional {
  position: relative;
}

.optional::after {
  z-index: 2;
  content: '\2713\fe0e';
  width: 20px;
  height: 20px;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  bottom: -4px;
  right: -4px;
  line-height: 18px;
}

.optional::before {
  z-index: 1;
  content: '';
  right: -11px;
  bottom: -3px;
  position: absolute;
  transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  border-bottom: 16px solid #d2d2d2;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
}

.choice::before {
  border-bottom: 16px solid #ff0000 !important;
}

.layer-box {
  max-width: none !important;
}