@charset "utf-8";

html,
body {
    overscroll-behavior-y: none;
}
body {
    background-color: #888;
    transition-duration: 0.2s;
}
p {
    line-height: 2.4em;
}
#container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: #666;
}
#box {
    margin: 24px;
}
p {
    margin: 0;
}
#query {
    font-size: clamp(18px, 3vw, 36px);
}
#query_name {
    font-size: clamp(24px, 4vw, 48px);
    color: black;
}
#user {
    font-size: clamp(18px, 3vw, 36px);
}
#user_name {
    font-size: clamp(24px, 4vw, 48px);
    color: black;
}
.textcenter {
    text-align: center;
}
#qrcode {
    display: flex;
    justify-content: center;
    margin: clamp(36px, 6vw, 72px) 0;
}

.loader {
    color: #ffffff;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
            -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
            -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
            -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
            -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
            -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
            -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
            -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
            -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
            -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
            -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
            -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
            -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* icon */
* {
  --iconsize: 20vw;
}
.icon {
  width: var(--iconsize);
  height: var(--iconsize);
  border: calc(var(--iconsize) / 20) solid gray;
  border-radius: 50%;
  margin: calc(var(--iconsize) / 4) auto;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  transform: scale(1);
}
.icon.error {
  border-color: #fff;
}
.icon.error .x-mark {
  position: relative;
  display: block;
}
.icon.error .errorLine {
  position: absolute;
  height: calc(var(--iconsize) / 18);
  width: calc(var(--iconsize) / (80 / 47));
  background-color: #fff;
  display: block;
  top: calc(var(--iconsize) / (80 / 37));
  border-radius: calc(var(--iconsize) / 40);
}
.icon.error .errorLine.left {
  transform: rotate(45deg);
  left: calc(var(--iconsize) / (80 / 17));
}
.icon.error .errorLine.right {
  transform: rotate(-45deg);
  right: calc(var(--iconsize) / (80 / 16));
}
.icon.warning {
  border-color: #fff;
}
.icon.warning .body {
  position: absolute;
  width: calc(var(--iconsize) / (80 / 5));
  height: calc(var(--iconsize) / (80 / 36));
  left: 50%;
  top: calc(var(--iconsize) / (80 / 16));
  border-radius: calc(var(--iconsize) / (80 / 2));
  margin-left: calc(var(--iconsize) / (80 / 2) * -1);
  background-color: #fff;
}
.icon.warning .dot {
  position: absolute;
  width: calc(var(--iconsize) / (80 / 7));
  height: calc(var(--iconsize) / (80 / 7));
  border-radius: 50%;
  margin-left: calc(var(--iconsize) / (80 / 3) * -1);
  left: 50%;
  bottom: calc(var(--iconsize) / (80 / 16));
  background-color: #fff;
}
.icon.success {
  border-color: #fff;
}
.icon.success::after,
.icon.success::before {
  content: "";
  position: absolute;
  width: calc(var(--iconsize) / (80 / 60));
  height: calc(var(--iconsize) / (80 / 120));
  background: transparent;
  transform: rotate(45deg);
}
.icon.success::before {
  border-radius: calc(var(--iconsize) / (80 / 120)) 0 0 calc(var(--iconsize) / (80 / 120));
  top: calc(var(--iconsize) / (80 / 7) * -1);
  left: calc(var(--iconsize) / (80 / 33) * -1);
  transform: rotate(-45deg);
  transform-origin: calc(var(--iconsize) / (80 / 60)) calc(var(--iconsize) / (80 / 60));
}
.icon.success::after {
  border-radius: 0 calc(var(--iconsize) / (80 / 120)) calc(var(--iconsize) / (80 / 120)) 0;
  top: calc(var(--iconsize) / (80 / 11) * -1);
  left: calc(var(--iconsize) / (80 / 30));
  transform: rotate(-45deg);
  transform-origin: 0 calc(var(--iconsize) / (80 / 60));
}
.icon.success .placeholder {
  width: var(--iconsize);
  height: var(--iconsize);
  border: calc(var(--iconsize) / (80 / 4)) solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-sizing: content-box;
  position: absolute;
  left: calc(var(--iconsize) / (80 / 4) * -1);
  top: calc(var(--iconsize) / (80 / 4) * -1);
  z-index: 2;
}
.icon.success .successLine {
  height: calc(var(--iconsize) / (80 / 5));
  background-color: #fff;
  display: block;
  border-radius: calc(var(--iconsize) / (80 / 2));
  position: absolute;
  z-index: 2;
}
.icon.success .successLine.tip {
  width: calc(var(--iconsize) / (80 / 25));
  left: calc(var(--iconsize) / (80 / 14));
  top: calc(var(--iconsize) / (80 / 46));
  transform: rotate(45deg);
}
.icon.success .successLine.long {
  width: calc(var(--iconsize) / (80 / 47));
  right: calc(var(--iconsize) / (80 / 8));
  top: calc(var(--iconsize) / (80 / 38));
  transform: rotate(-45deg);
}