@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
* {
    box-sizing: border-box;
}

body {
    background-color: #83c6fd;
    overflow: hidden;
}

#mainUi {
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Rounded Mplus 1c", sans-serif;
    padding: 2em;
}

.contentBody-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
}

.contentBody-list-header {
    flex-grow: 0;
}

.contentBody-list-detail {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    padding: 0.5vh;
    border: 4px solid #83c6fd;
    border-radius: 24px;
    padding: 16px;
    background-color: #d7eafa;
    overflow-x: hidden;
    overflow-y: auto;
    flex-grow: 1;
}

.contentBody-list-footer {
    flex-grow: 0;
}

.contentBody-list-detail>div:nth-child(1) {
    border-top: 0px none;
    margin-top: 0;
}

.item {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: row;
    padding: 8px;
    margin-top: 8px;
    border-top: 1px solid black;
    align-items: stretch;
}

.itemImage {
    display: block;
    object-fit: contain;
    width: 112px;
    height: 112px;
}

.itemInfoArea {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

.itemNameArea {
    height: 40%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 80%;
    padding-left: 12px;
    flex-grow: 1;
}

.itemPriceAreaOuter {
    /* height: 60%; */
    /* max-height: 60%; */
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 26px;
}

.itemPriceArea {
    flex-grow: 1;
}

.itemPrice {
    padding-left: 12px;
    padding-right: 8px;
    color: #0000a0;
}

.itemButtonArea {
    text-align: right;
    flex-grow: 1;
    padding-top: 6px;
}

#content {
    font-family: "Rounded Mplus 1c", sans-serif;
    height: 100%;
    padding: 2em;
    max-height: 100%;
}

.contentPage {
    background-color: #83c6fd;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-content: top;
    gap: .5em;
    min-height: 0;
    height: 100%;
}

.contentTitle {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: #309bf1;
    text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
    flex-grow: 0;
    padding: 0px;
}

.contentBody {
    font-size: 3vh;
    font-weight: 700;
    border-radius: 24px;
    border: 8px solid #56a9ee;
    background-color: #c8e1f5;
    padding: 24px 24px;
    flex-grow: 1;
    min-height: 0;
}

.contentBody-nogrow {
    font-size: 32px;
    font-weight: 700;
    border-radius: 24px;
    border: 8px solid #56a9ee;
    padding: 2vh;
    background-color: #c8e1f5;
    padding: 16px 32px;
}

.contentBody-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contentBody2 {
    font-size: 3vh;
    font-weight: 700;
    border-radius: 24px;
    border: 8px solid #56a9ee;
    padding: 2vh;
    background-color: #c8e1f5;
    padding: 16px;
    flex-grow: 0;
    max-width: 75%;
    text-align: center;
    ;
}

button.btnNormal {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 4vh;
    line-height: 4.5vh;
    font-weight: 700;
    padding: 0.4vh 2vh;
    color: white;
    background-color: #56a9ee;
    border: 8px solid #83c6fd;
    border-radius: 24px;
}

button.btnSmaller {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 3vh;
    line-height: 3.2vh;
    font-weight: 700;
    padding: 0.4vh 2vh;
    color: white;
    background-color: #56a9ee;
    border: 8px solid #83c6fd;
    border-radius: 24px;
}

button.itemRemoveBtn {
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 2vh;
    line-height: 2vh;
    font-weight: 400;
    padding: 0.4vh 2vh;
    color: white;
    background-color: #56a9ee;
    border: 2px solid #83c6fd;
    border-radius: 24px;
}

.smallText {
    font-size: 2vh;
    font-weight: bold;
}

.appTitle {
    text-align: center;
    font-size: 12vh;
}

.appTitle2 {
    margin-top: 2vh;
    text-align: center;
    font-size: 6vh;
}

.moneyArea {
    margin: 2vh;
    text-align: center;
}

#initialAmount {
    font-size: 7vh;
    color: red;
}

#paymentAmount {
    font-size: 7vh;
}

.totalAmount {
    padding-left: 12px;
    padding-right: 8px;
    color: red;
}

.itemCount {
    padding-left: 6px;
    padding-right: 6px;
    color: red;
}

.buttonArea {
    margin-top: 4vh;
    text-align: center;
}

.notice {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
}

#barcodeVideoOuter,
#faceScanVideoOuter {
    position: relative;
    width: 100%;
    height: 100%;
}

#pageBarcodeVideo,
#pageFaceScanVideo {
    width: 100%;
}

#faceScanVideoInput,
#faceScanVideoOverlay {
    position: absolute;
}

#barcodeVideoInput,
#barcodeVideoOverlay {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#scanOuter {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
}

#barcodeGuideOuter,
#faceScanGuideOuter,
#faceScanStatusOuter {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    align-items: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
}

#barcodeGuideOuter,
#faceScanGuideOuter {
    justify-content: space-between;
}

#faceScanStatusOuter {
    justify-content: center;
}

#guidePadding {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
}

#faceScanCompleteString {
    font-size: 10vh;
    color: white;
    display: none;
    max-width: 75%;
}

#faceScanCompleteString img {
    width: 100%;
    object-fit: contain;
}

#scanArea {
    flex-grow: 0;
}

#barcodeResult {
    font-weight: bold;
}

#barcodeArea {
    width: 70%;
    height: 25%;
    border: 4px solid red;
}

#totalAmount2 {
    padding-left: 12px;
    padding-right: 8px;
    font-size: 6vh;
}

#remainAmount2 {
    padding-left: 12px;
    padding-right: 8px;
    font-size: 6vh;
}

.topControl {
    z-index: 9999;
}

#thankyouMessage {
    color: green;
    display: none;
    text-align: center;
}

#insufficientMessage {
    color: red;
    display: none;
}

.vcenter {
    margin-top: auto;
    margin-bottom: auto;
}

.blinking_anim {
    animation: blinker .2s linear 3;
}

@keyframes blinker {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.blinking_anim2 {
    animation: blinker2 .5s linear 1;
}

@keyframes blinker2 {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

.horizontalFlip {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.fade_in_only {
    animation: fadeInOnly 1s ease-out forwards;
}

.slide_out {
    animation: slideOut .3s ease-in forwards;
}

.slide_in {
    animation: slideIn .3s ease-out forwards;
}

.transparent {
    opacity: 0;
}

[data-ruby] {
    position: relative;
}

[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
}

rt {
    transform: translateY(.5em);
    font-size: 50%;
}

@keyframes fadeInOnly {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.zoom_out_fade {
    animation: zoomOutFade 2s ease-out forwards;
}

@keyframes zoomOutFade {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }
    25% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(20%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    100% {
        opacity: 0;
        transform: translateX(-20%);
    }
}