:root {
  /* RGB24,74,85 */
  --dark-green: rgb(24,74,85);
  /* RGB129,202,195 */
  --green: rgb(129,202,195);
  /* RGB76,138,140 */
  --green2: rgb(76, 138, 140);
  --ans: #0000f0;
  --ok: #080;
  --ng: #800;
  --check-in: #FFCC00;
  --check-out: #FF6600;
}

body {
    font-family: Arial, sans-serif;
    background-color: #F0F0F0;
    /* padding: 0px 10px 0px 10px; */
	
    /* background-image: url('./img_bg_Logo2.png'); */
    background-image: url('./img_bg_Logo3.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
    /* background-size: 100% 100%; */
    background-color: rgb(129,202,195);
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: calc((100vw - 375px) / 2);
    margin-right: calc((100vw - 375px) / 2);
    max-width: 375px;
}
.body-top, .body-top2,
.body-top3, .body-top4 {
    align-items: center;
    text-align: center;
    /* width: 100vw; */
    height: 46px;
    max-width: 375px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: 100% 100%;
    /* background-size: cover; */
}
.body-top {
    background-image: url('./img_top1.png');
}
.body-top2 {
    background-image: url('./img_top2.png');
}
.body-top3 {
    background-image: url('./img_top3.png');
}
.body-top4 {
    background-image: url('./img_top4.png');
}
#api-image {
    align-items: center;
    text-align: center;
    height: 320px;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
}
#body-title {    
    /* background-color: red; */
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 16px 16px 0px 16px;
    color: #3B3838;
}
#body-text {
    /* background-color: green; */
    
    /* text-align: left; */
    text-align: center;
    margin: 0px 16px 0px 16px;
    color: #3B3838;
}
#body-btn {
    /* background-color: blue; */
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    /* margin: 16px 16px 0px 16px; */
    padding: 16px;
}
h1, h2, h3, h4 {
    margin: 8px;
}
h1 {
    margin: 0;
}
.title-unit {
    color: #007f2e;
}

#qr-reader {
    align-items: center;
    margin: 0 auto;
    /* 3:4 */
    /* width: 320px; */
    /* max-width: 280px; */
    /* height: 240px; */
    /* max-height: 40vh; */
    max-width: 60%;
    max-height: 60vh;
    background-color: #F0F0F0;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#qr-reader-results,
#qr-reader-results2,
#check-in-results {
    font-size: 20px;
    font-weight: bold;
    color: var(--ans);
}
#qr-reader-help {
    /* margin-bottom: 20px; */
    font-size: 28px;
    font-weight: bold;
}

#btn-prev-step,
#btn-restart {
    border-radius: 5px;
    
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: var(--green2);
}
#btn-check-in,
#btn-check-out {
    /* width: 75vw; */
    height: 20vh;
    border-radius: 20px;
    
    font-size: 8vh;
    font-weight: bold;
    color: #fff;
}
#btn-check-in {
    background-color: var(--check-in);
}
#btn-check-out {
    background-color: var(--check-out);
}

#api-results,
#api-results-ok,
#api-results-ng {
    font-size: 32px;
    font-weight: bold;
}
#api-results {
    color: var(--dark-green);
}
#api-results-ok {
    color: var(--ok);
}
#api-results-ng {
    color: var(--ng);
}