@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@font-face {
  font-family: 'S-CoreDream-4Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: rgba(243, 244, 246);
}

#logo {
  position: absolute;
  left: 1vw;
  width: 24vw;
}

#logo img {
  width: 90%;
}

#tips {
  position: absolute;
  padding: 1.2vw;
  right: 0;
}

#tips div, #tips a {
  cursor: pointer;
  display: inline-block;
  margin-right: 1.5vw;
  font-size: 1.2vw;
}

#nano {
  width: 15%;
  height: auto;
  display: inline-block;
  
  position: absolute;
  top: 9.5vw;
  left: 12vw;
}

#nano .indicator {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  line-height: 1vw;

  border-radius: 100%;
  color: red;
  background-color: red;
  border: 1px solid red;

  margin-left: .25vw;
}

#nano .indicator_text {
  display: inline-block;
  font-size: 1.5vw;
  font-weight: bold;
  margin: 0;
}

#nano object {
  transform: rotate();
}

#connect {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: inherit;
  position: absolute;
  cursor: pointer;

  top: 15vw;
  right: 88vw;

  padding: 0.5vw 1vw;
  border-radius: 1vw;
}

.connect {
  font-family: 'Nanum Gothic', sans-serif;
  padding: .2rem .5rem!important;
  border-radius: .5rem!important;
  font-size: .9rem!important;
  box-shadow: none!important;
}

#car {
  width: 20%;
  height: auto;
  display: inline-block;

  position: absolute;
  top: 6.5vw;
  right: 19.5vw;
}

div.measure_container {
  display: inline-block;
  position: absolute;
}

#FL {
  top: 10vw;
  right: 41.5vw;
}

#FL div.weight_value {
  border: 2px solid #ff6384;
}

#FR {
  top: 10vw;
  right: 6vw;
}

#FR div.weight_value {
  border: 2px solid #36a2eb;
}

#RL {
  top: 30vw;
  right: 41.5vw;
}

#RL div.weight_value {
  border: 2px solid #cc65fe;
}

#RR {
  top: 30vw;
  right: 6vw;
}

#RR div.weight_value {
  border: 2px solid #ffce56;
}

#SUM {
  top: 28vw;
  right: 24vw;
  color: white;
}

#SUM div.weight_value {
  background-color: transparent;
}

div.measure_container p {
  font-size: 3.5vw;
  font-weight: bold;
  margin: 0 0 .5rem 0;
  text-align: center;
}

div.weight_value {
  display: inline-block;
  padding: .5vw 2vw;

  background-color: white;
  border-radius: 5px;

  height: 3.5vw;
  line-height: 3.5vw;
  font-size: 2vw;
  font-weight: bold;
}

div.weight_value span.kg {
  display: inline-block;

  text-align: right;
  width: 5vw;
}

#chart {
  position: absolute;
  top: 25vw;
  left: 2vw;
  width: 37vw;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}