body,
input,
select,
button,
h1,
textarea {
    font-family: Arial, Sans-serif, "微軟正黑體", "Microsoft JhengHei";
    outline: 0px;
    border: 0px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

body {
    padding: 0vw;
    margin: 0vw;
    color: #231815;
    position: relative;
    background-color: #393A38;
    font-size: 16px;
}

body * {
    box-sizing: border-box;
}

ul,
li,
ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

button {
    border: 0px;
    padding: 0px;
    margin: 0px;
    outline: 0px;
}

button:hover {
    -webkit-filter: brightness(.95);
}

button:disabled:hover {
    -webkit-filter: none;
}

button:enabled:active {
    -webkit-filter: brightness(.8);
}


/*scrollbar-x外觀*/

::-webkit-scrollbar {
    height: 0vw;
    width: 0vw;
}

::-webkit-scrollbar-track {
    background-color: #d8d8d8;
}

::-webkit-scrollbar-thumb {
    background-color: #62e6e6;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #00FFFF;
}


/*==============reuse=============*/

.hide {
    display: none !important;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

main {
    width: 100%;
    height: 100%;
}

#page_login {
    width: 100vw;
    height: 100vh;
}

.flex_box {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
}

.content_box {
    background-color: #fff;
    padding: 20px;
}

.img_logo {
    width: 250px;
    height: 100px;
    display: block;
    margin: 0px auto;
}

.page_title {
    text-align: center;
    font-size: 24px;
    margin: 20px auto;
    letter-spacing: 1px;
}

.page_title span {
    display: block;
    font-size: 16px;
}

.page_text {
    margin: 20px auto 60px auto;
}

#login_box,
#record_box {
    width: 600px;
    padding: 50px 30px 90px 30px;
    overflow: auto;
}

.login_form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.login_form div {
    width: 100%;
    margin-bottom: 5px;
    display: flex;
}

.login_form label {
    padding: 5px;
}

.login_form input {
    min-width: 1px;
    flex: 1;
    height: 35px;
    margin: 0px 5px;
    padding: auto 10px;
    font-size: 20px;
    text-align: center;
    border-radius: 3px;
    background-color: #dedede;
}

.login_form input:focus,
.login_form select:focus {
    background-color: #333F4E;
    color: #fff;
}

.login_form select {
    min-width: 1px;
    flex: 1;
    height: 35px;
    margin: 0px 5px;
    padding: auto 10px;
    font-size: 20px;
    text-align: center;
    border-radius: 3px;
    background-color: #dedede;
}

.login_form span {
    display: block;
    line-height: 35px;
}

.login_form button {
    width: 50%;
    height: 40px;
    font-size: 16px;
    margin: 20px auto;
    border-radius: 3px;
    background-color: #393A38;
    color: #fff;
    letter-spacing: 1px;
}

.list_record .list_title {
    padding: 2px;
    text-align: center;
    border-top: 1px solid #666;
    border-bottom: 2px solid #666;
    margin-top: 10px;
    margin-bottom: 3px;
}

ul.list_record>li {
    padding: 3px;
}

ul.list_record ul {
    padding: 5px 10px;
}

.list_recipe {
    width: 100%;
}

.list_recipe li {
    width: 100%;
    display: flex;
    padding: 2px 0px;
}

.list_recipe li div {
    flex: 1;
    text-align: center;
}

#qrCode {
    width: 250px;
    height: 250px;
    background-image: url(../image/img_code.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

#page_record .flex_box {
    align-items: none;
    display: flex;
}

#list_buy li {
    overflow: auto;
}

#list_buy li div {
    float: left;
    padding: 0px 10px;
    word-break: break-all;
}

#list_buy li div:nth-child(1) {
    width: 70%;
}

#list_buy li div:nth-child(2) {
    width: 7%;
    text-align: right;
}

#list_buy li div:nth-child(3) {
    width: 23%;
    text-align: right;
}