video[data-v-9c322c14] {
  max-width: 100%;
  max-height: 100%;
}
.scanner-container[data-v-9c322c14] {
  position: relative;
}
.overlay-element[data-v-9c322c14] {
  position: absolute;
  top: 0;
  width: 100%;
  height: 99%;
  background: rgba(30, 30, 30, 0.5);

  -webkit-clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 100%, 100% 100%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 100%, 100% 100%, 100% 0%);
}
.laser[data-v-9c322c14] {
  width: 60%;
  margin-left: 20%;
  background-color: tomato;
  height: 1px;
  position: absolute;
  top: 40%;
  z-index: 2;
  box-shadow: 0 0 4px red;
  animation: scanning-9c322c14 2s infinite;
}
@keyframes scanning-9c322c14 {
50% {
    transform: translateY(75px);
}
}

.check-in[data-v-df2f9c40] {
  padding: 30px;
  box-sizing: border-box;
}
.check-in .camera[data-v-df2f9c40] {
  height: 300px;
  overflow: hidden;
}
.check-in .camera[data-v-df2f9c40] .scanner-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.check-in .result[data-v-df2f9c40] {
  margin: 0px;
  padding: 0px;
}
.check-in .result .class-container .class[data-v-df2f9c40] {
  margin-top: 20px;
  margin-bottom: 5px;
  display: table;
  width: 100%;
}
.check-in .result .class-container .class .class-name[data-v-df2f9c40] {
  vertical-align: bottom;
  display: table-cell;
}
.check-in .result .class-container .class .class-name span[data-v-df2f9c40] {
  color: #333;
  display: block;
}
.check-in .result .class-container .class .class-name .name[data-v-df2f9c40] {
  font-size: 11px;
}
.check-in .result .class-container .class .branch-name[data-v-df2f9c40] {
  vertical-align: bottom;
  display: table-cell;
  text-align: right;
  color: #333;
}
.check-in .result .class-container .student[data-v-df2f9c40] {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: table;
  width: 100%;
}
.check-in .result .class-container .student li[data-v-df2f9c40] {
  background: #f3f3f3;
  margin-bottom: 5px;
  box-sizing: border-box;
  display: table-row;
  width: 100%;
}
.check-in .result .class-container .student li.header[data-v-df2f9c40] {
  background: #ddd;
}
.check-in .result .class-container .student li .customer-number[data-v-df2f9c40] {
  padding: 5px 10px;
  display: table-cell;
  vertical-align: top;
  width: 80px;
}
.check-in .result .class-container .student li .student-name[data-v-df2f9c40] {
  padding: 5px 10px;
  display: table-cell;
  vertical-align: top;
}
.check-in .result .class-container .student li .attendance[data-v-df2f9c40] {
  padding: 5px 10px;
  display: table-cell;
  vertical-align: top;
  text-align: center;
}
.check-in .result .class-container .student li .check-in-time[data-v-df2f9c40] {
  padding: 5px 10px;
  display: table-cell;
  vertical-align: top;
  text-align: right;
}
@media screen and (max-width: 700px) {
.check-in[data-v-df2f9c40] {
    margin-top: 40px;
    margin-bottom: 200px;
    padding: 15px;
}
.check-in .camera[data-v-df2f9c40] .scanner-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.check-in .result .class-container .class h2[data-v-df2f9c40] {
    font-size: 14px;
}
.check-in .result .class-container .student li[data-v-df2f9c40] {
    font-size: 11px;
}
.check-in .result .class-container .student li .customer-number[data-v-df2f9c40] {
    padding: 3px 5px;
    vertical-align: middle;
    width: 55px;
    text-align: center;
}
.check-in .result .class-container .student li .student-name[data-v-df2f9c40] {
    padding: 3px 5px;
    vertical-align: middle;
}
.check-in .result .class-container .student li .attendance[data-v-df2f9c40] {
    padding: 3px 5px;
    vertical-align: middle;
    width: 60px;
}
.check-in .result .class-container .student li .check-in-time[data-v-df2f9c40] {
    padding: 3px 5px;
    width: 70px;
    vertical-align: middle;
    text-align: center;
}
}