body {
    font-family: 'Noto Sans TC', sans-serif;
}
.logo {
    width: 20%;
    max-width: 100px;
}
.user {
    width: 10%;
    max-width: 50px;
}
.product-name {
    width: 20%;
    max-width: 100px;
    font-size: 1.6em;
}
.clndr-content {
    font-size: 2em;
    text-align: center;
}

/********************************
*** Shorthand
********************************/
.pointer { cursor: pointer; }
.center { margin: 0 auto;  }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.smaller { font-size: smaller; }
.xsmall { font-size: x-small; }
.xxsmall { font-size: xx-small; }
.abs { position: absolute; }
.fixed { position: fixed; }
.hidden { visibility: hidden; }
.overflow-y-auto { overflow-y: auto; }
.grid-container { display: grid; }
.grid-content { grid-area: 1/1; }
.h10 { height: 10%; }
.h20 { height: 20%; }
.h40 { height: 40%; }
.h50 { height: 50%; }
.h60 { height: 60%; }
.h80 { height: 80%; }
.h100 { height: 100%; }
.vw4 { width: 4vw; }
.w2 { width: 2%; }
.w4 { width: 4%; }
.w5 { width: 5%; }
.w6 { width: 6%; }
.w8 { width: 8%; }
.w10 { width: 10%; }
.w12 { width: 12%; }
.w16 { width: 16%; }
.w20 { width: 20%; }
.w24 { width: 24%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w32 { width: 32%; }
.w36 { width: 36%; }
.w40 { width: 40%; }
.w48 { width: 48%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w64 { width: 64%; }
.w70 { width: 70%; }
.w72 { width: 72%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w84 { width: 84%; }
.w90 { width: 90%; }
.w96 { width: 96%; }
.w100 { width: 100%; }
.w28 { width: 28%; }
.w56 { width: 56%; }

/*  spinner - START */
.sk-folding-cube {
    margin: auto;
    margin-top: 20vh;
    margin-bottom: 40px;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {

    0%,
    10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%,
    75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%,
    100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {

    0%,
    10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%,
    75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%,
    100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

/*  spinner - END */

/* in-common */
.in-f-s-1 {
    font-size: 1em;
}
.in-f-w-100 {
    font-weight: 100;
}