/* stylelint-disable selector-class-pattern */
body,
html,
#root {
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
}

/* stylelint-disable-next-line selector-id-pattern */
#NELiveDetection {
  width: 100%;
  height: 100%;
  padding: 90px 0;
}

.timeout__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  display: none;
  width: 100%;
  height: 100%;
}

.timeout__mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 20%);
}

.timeout__box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  background: #fff;
  border-radius: 8px;
  transform: translate(-50%, -50%);
}

.timeout__title {
  width: 100%;
  margin: 18px 0 10px;
  color: #222;
  font-size: 20px;
  text-align: center;
}

.timeout__des {
  width: 100%;
  margin: 0 0 22px;
  color: #888;
  font-size: 18px;
  text-align: center;
}

.timeout__btn-wrapper {
  display: flex;
}

.timeout__restart {
  position: relative;
  width: 100%;
  height: 48px;
  color: #222;
  background: #fff;
  border: none;
  border-top: 1px solid #dcdee3;
  outline: none;
}

.timeout__restart {
  color: #2c6eff;
}

.timeout__restart::before {
  position: absolute;
  top: 0;
  left: -1px;
  z-index: 100;
  width: 1px;
  height: 100%;
  background-color: #dcdee3;
  content: '';
}

.checking__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  display: none;
  width: 100%;
  height: 100%;
}

.checking__mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 20%);
}

.checking__box {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 360px;
  padding: 6px 12px;
  background: #fff;
  border-radius: 8px;
  transform: translate(-50%, -50%);
}

.checking__title {
  width: 100%;
  margin: 18px 0 10px;
  color: #222;
  font-size: 18px;
  text-align: center;
}

.checking__des {
  width: 100%;
  margin: 0 0 22px;
  color: #888;
  font-size: 16px;
  text-align: center;
}