/******************/
/* 100*16=1600px*/
/******************/
@media (min-width: 100em) {
    .orderPage, .orderList {
        height: 60vh;
    }
}
/******************/
/* 88*16=1400px*/
/******************/
@media (max-width: 88em){
    .recordCloseicon {
        right: 15%;
    }
    .lefticonBox {
        left: 15%;
    }
    .righticonBox {
        right: 15%;
    }
    .recordtableBox {
        width: 100%;
        /* height:90%; */
        overflow-x: scroll;
        /* overflow-y: scroll; */
    }
    /* historyRecord */
    .recordform {
        padding-top: 1rem;
        grid-template-columns: 1fr 1fr;
    }
}
/******************/
/* 72*16=1150px*/
/******************/
@media (max-width: 72em) {
    .recordCloseicon {
        right: 10%;
    }
    .lefticonBox {
        left: 10%;
    }
    .righticonBox {
        right: 10%;
    }
}
/******************/
/* 61*16=970px平板橫式*/
/******************/
@media (max-width: 61em) {
    .selectContainer {
        grid-template-columns: 1fr 1fr;
    }
    .sectionOrder {
        grid-template-columns: 1fr;
    }
    .orderPage {
        /* height:10vh; */
        padding: 1rem 2rem;
    }
    .orderList {
        height: 40vh;
        /* margin-bottom:20rem; */
        padding: 3rem 0;
    }
    .orderBtnBox {
        margin-bottom: 1rem;
    }
    .orderOption {
        font-size: 1.6rem;
    }
    table {
        overflow: scroll;
    }
    .diaFour {
        width: 70%;
    }
    /* historyRecord */
    .recordform {
        padding-top: 1rem;
        grid-template-columns: 1fr 1fr;
    }
    /* popUp */
    .recordCloseicon {
        right: 5%;
    }
    .lefticonBox {
        left: 5%;
    }
    .righticonBox {
        right: 5%;
    }
    .inputNumber {
        font-size: 2.3rem;
    }
}
/******************/
/* 54*16=820px 平板直式*/
/******************/
@media (max-width: 54em) {
    /* login */
    .loginContainer {
        width: 65%;
    }
    /* index */
    table {
        overflow: scroll;
        margin-bottom: 6rem;
    }
    .infoModal {
        width: 70%;
    }
    .paymentBox {
        transform: translateY(-2rem);
        padding: 1rem;
    }
    .diaTwo {
        width: 80%;
    }
    .formBox {
        padding: 2rem 4rem;
    }
    /* shiftListPage */
    .shiftTableBox {
        width: 80%;
    }
    /* historyRecord */
    .recordform {
        grid-template-columns: 1fr;
    }
    .recordform div {
        margin-bottom: 1rem;
    }
    .recordlabel {
        display: block;
        font-size: 1.4rem;
        margin: 0.5rem 0 0.5rem 0;
    }
    select {
        margin: 0;
    }
    .recordtable {
        overflow-x: scroll;
        width: 100vw;
    }
    .recordtable th, .recordtable td {
        padding: 1rem;
        text-align: center;
        font-size: 2.4rem;
    }
    .inputNumber {
        font-size: 2.3rem;
    }
    .recordBtn {
        margin: 2rem 0 7rem 0
    }
    /* popUp */
    .recordPopUpBox {
        width: 100%;
    }
    .tablebox {
        font-size: 1.6rem;
    }
    .diaone {
        left: 50%;
        width: 100%;
    }
    .recordCloseicon {
        right: 0;
    }
    .lefticonBox {
        left: 0;
    }
    .righticonBox {
        right: 0;
    }
    .menuicon {
        width: 5rem;
    }
    .shiftTable td {
        font-size: 2.4rem;
        text-align: left;
    }
}
/******************/
/* 32*16=500px 手機*/
/******************/
@media (max-width: 32em) {
    .loginContainer {
        width: 80%;
    }
    /* index */
    html {
        font-size: 50%;
    }
    .sectionMain {
        padding: 13rem 2rem 5rem 2rem;
        max-height: 100rem;
    }
    .bgImage {
        width: 100%;
    }
    .loginBtn:link, .loginBtn:visited {
        padding: 1.2rem 1.5rem;
        font-size: 2.4rem;
    }
    .formBox {
        padding: 1.5rem 4rem;
    }
    form input {
        width: 100%;
    }

    select {
        width: 100%;
        margin: 0 0 1rem 0;
    }
    /* index */
    .selectContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .orderPage {
        height: 35vh;
    }
    .orderSelect {
        font-size: 2.5rem;
    }
    .orderOption {
        font-size: 2rem;
    }
    .orderList {
        height: 35vh;
        padding: 3rem 0;
        transform: translateY(-4rem);
    }
    .orderBtnBox {
        gap: 1rem;
    }
    .orderBtn {
        padding: 0.5rem;
        font-size: 2.3rem;
    }
    table {
        overflow: scroll;
        margin-bottom: 8rem;
    }
    th {
        padding: 0.5rem 0.8rem;
    }
    th, td {
        font-size: 2.2rem;
    }
    .trodd {
        font-size: 1.8rem;
        color: rgb(255, 78, 78);
        font-weight: 400;
    }
    .checkbox {
        width: 2rem;
    }
    .paymentBox {
        margin-bottom: 6rem;
        padding: 1rem;
    }
    .infoModal {
        width: 90%;
    }
    .menubtn {
        flex-direction: column;
    }
    menuitem {
        font-size: 1rem;
    }
    .checkouttittle {
        font-size: 2.4rem;
    }
    .shiftTitle {
        font-size: 3.3rem;
    }
    .company {
        font-size: 2.4rem;
        margin-bottom: 1.5rem;
    }
    .shiftTableBox {
        margin-bottom: 5rem;
    }
    .shiftTable td {
        font-size: 2.4rem;
        text-align: left;
    }
    .shiftListHeader {
        margin: 1rem 2rem 3rem 2rem;
        gap: 1.2rem;
    }
    .Btn:link, .Btn:visited {
        padding: 1rem 1.8rem;
        font-size: 2rem;
    }
    .mainNavitem {
        font-size: 1.6rem;
    }
    .inputmoney, .inputdiscount {
        width: 50%;
        font-size: 3rem;
        text-align: center;
    }
    .EditBtn {
        font-size: 2.2rem;
        padding: 1.2rem;
    }
    .diaTwolabel, .changetitle {
        margin-top: 0;
        font-size: 2.8rem;
    }
    .amountOfMoney, .totalAmount, .discount, .change {
        font-size: 3rem;
    }
    .recordtableBox {
        width: 100%;
        /* height:20rem; */
        overflow-x: scroll;
        /* overflow-y: scroll; */
    }
   
    .recordtable {
        width: 100vw;
        white-space: nowrap;
    }
    .recordtable th, .recordtable td {
        font-size: 2rem;
    }
    .recordform label {
        font-size: 1.8rem;
    }
    /* popUp */
    .recordCloseicon {
        right: 0;
    }
    .lefticonBox {
        left: -0;
    }
    .righticonBox {
        right: 0;
    }
    .recordBtn {
        margin: 2rem 0 10rem 0
    }
    
    .recordPopContainer {
        width: 70%;
        margin: 3rem auto;
    }
    .shiftselect {
        font-size: 2.2rem;
    }
}
/******************/
/* 24*16=380px 小手機*/
/******************/
@media (max-width: 24em) {
    .mainNavitem {
        /* flex-direction: column; */
        gap: 0.1px;
        font-size: 0.7rem;
    }
    /* index */
    .Btn:link, .Btn:visited {
        padding: 0.8rem 1.5rem;
    }
    .sectionshiftList {
        margin-bottom: 2.8rem;
    }
    .shiftselect option {
        font-size: 1.8rem;
    }
    .sectionOrder {
        column-gap: 0;
    }
    .orderPage {
        height: 25vh;
    }
    .orderList {
        height: 29vh;
        padding: 0;
        margin-bottom: 4rem;
    }
    .EditBtn {
        font-size: 1.8rem;
    }
    /* popUp */
    .recordCloseicon {
        right: -1rem;
    }
    .lefticonBox {
        left: -1rem;
    }
    .righticonBox {
        right: -1rem;
    }
    .recordform input {
        width: 85%;
    }
    .recordtableBox {
        width: 100%;
        overflow-x: scroll;
    }
    .recordform input {
        width: 100%;
    }
}