/*header {
    max-width: 800px;
    margin: 0 auto;
}*/

/*body {
    max-width: 800px;
    margin: 0 auto;
}*/

/*這裡必須在css當中額外指定fixed否則，下面的input Lost Focuse Header會不見*/
.mui-focusin > .mii-bar-header-secondary, .mui-focusin > .mui-bar-nav {
    position: fixed;
}

.mui-input-row input{
    font-size:0.9rem;
}

/*卡片圓角加大!*/
.mui-card {
    border-radius: 0.3rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

/*各種標籤標準行高*/
/*p, a, span {
    line-height: 1.6rem;
}*/

/*常用字體*/
.ftPageTitle, .cardTitle {
    padding-left: 0.9rem;
    margin-top: 1.2rem;
    margin-bottom: 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #444;
}

.pageHeader {
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    float: left;
}


/*小圖片，尺寸放大+圓角*/
.mui-table-view .mui-media-object {
    /*line-height: 3.6rem;*/
    max-width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.3rem;
}

.mui-bar-tab .mui-table-view-cell {
    padding: 0.2rem 1rem;
}

.floatR {
    float: right;
}

.floatL {
    float: left;
}


/*圓角標籤的通用型態(配合後續不同背景顏色)*/
.aTag_green, .aTag_blue, .aTag_muiblue, .aTag_purple, .aTag_red, .aTag_pink, .aTag_gray, .aTag_black, .aTag_darkseagreen, .aTag_lightcoral, .aTag_yellow,
.aTag_darkseagreen_s2, .aTag_darkseablue_s2, .aTag_lightcoral_s2, .aTag_gray_s2,
.aFrame_green, .aFrame_red, .aFrame_pink, .aFrame_blue, .aFrame_muiblue, .aFrame_purple, .aFrame_gray, .aFrame_black, .aFrame_darkseagreen, .aFrame_lightcoral, .aFrame_yellow {
    font-size: 0.8rem;
    /*width: 3.6rem;*/
    /*height: 1.4rem;*/
    border-radius: 0.3rem;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    color: white;
    padding: 0 0.6rem;
    cursor: pointer;
}

.b_radi03 {
    border-radius: 0.3rem;
}

.b_radi05 {
    border-radius: 0.5rem;
}

.b_radi07 {
    border-radius: 0.7rem;
}

.b_radi09 {
    border-radius: 0.9rem;
}

/*圓框透明標籤*/
.aFrame_green {
    color: #5a7e5a;
}

.aFrame_blue {
    color: #5691bd;
}

.aFrame_muiblue {
    color: #409EFF;
}

.aFrame_purple {
    color: #cb7ac0;
}

.aFrame_red {
    color: #e15e5e;
}

.aFrame_pink {
    color: #cb7ac0;
}

.aFrame_gray {
    color: #aaaaaa;
}

.aFrame_black {
    color: #555555;
}

.aFrame_darkseagreen {
    color: #8ebb8a;
}

.aFrame_lightcoral {
    color: #ef7e7e;
}

.aFrame_yellow {
    color: #E6A23C;
}

/*圓框白字底色標籤*/
/*綠底標籤(轉採購)*/
.aTag_green {
    background-color: #5c8f5c; /*#5a7e5a;*/
    border-color: #5c8f5c;
}
/*藍底標籤(過帳)*/
.aTag_blue {
    background-color: #5691bd;
    border-color: #5691bd;
}

.aTag_muiblue {
    background-color: #409EFF;
    border-color: #409EFF;
}
/*紫底標籤(審核)*/
.aTag_purple {
    background-color: #cb7ac0;
    border-color: #cb7ac0;
}
/*紅底標籤(鎖單)*/
.aTag_red {
    background-color: #ef7e7e; /*#e15e5e;*/
    border-color: #ef7e7e;
}

.aTag_pink {
    background-color: #cb7ac0;
    border-color: #cb7ac0;
}

.aTag_gray {
    background-color: #aaaaaa;
    border-color: #aaaaaa;
}

.aTag_black {
    background-color: #555555;
    border-color: #555555;
}

.aTag_darkseagreen {
    background-color: #8ebb8a;
    border-color: #8ebb8a;
}

.aTag_lightcoral {
    background-color: #ef7e7e;
    border-color: #ef7e7e;
}

.aTag_yellow {
    background-color: #E6A23C;
    border-color: #E6A23C;
}

/*車，貨的tag*/
.aTag_darkseagreen_s2 {
    background-color: #8ebb8a;
    border-color: #8ebb8a;
    border-width: 1px;
    font-size: 1.2rem;
    padding: 0 0.2rem;
}

.aTag_darkseablue_s2 {
    background-color: #5691bd;
    border-color: #5691bd;
    border-width: 1px;
    font-size: 1.2rem;
    padding: 0 0.2rem;
}


.aTag_lightcoral_s2 {
    background-color: #ef7e7e;
    border-color: #ef7e7e;
    border-width: 1px;
    font-size: 1.2rem;
    padding: 0 0.2rem;
}

.aTag_gray_s2 {
    background-color: #aaaaaa;
    border-color: #aaaaaa;
    border-width: 1px;
    font-size: 1.2rem;
    padding: 0 0.2rem;
}



.ft08_Gray_taR, .liValue {
    color: #aaaaaa;
    font-size: 0.9rem;
    text-align: right;
}

.ft06 {
    font-size: 0.6rem;
}

.ft07 {
    font-size: 0.7rem;
}

.ft08 {
    font-size: 0.8rem;
}

.ft09 {
    font-size: 0.9rem;
}

.ft10 {
    font-size: 1rem;
}

.ft12 {
    font-size: 1.2rem;
}

.ft14 {
    font-size: 1.4rem;
}


.tabSheet_green, .tabSheet_red, .tabSheet_blue, .taSheet_litegreen, .tabSheet_gray, .tabSheet_white, .tabSheet_black, .tabSheet_yellow {
    color: white;
    margin-top: -1rem;
    margin-left: -1.6rem;
    padding: 0.5rem 1rem 0.2rem 1.5rem;
    border-radius: 0.3rem;
}

.tabSheet_green {
    background: #5c8f5c;
}

.tabSheet_red {
    background: #e07676; /*#ef7e7e;*/
}

.tabSheet_blue {
    background: #5691bd;
}

.taSheet_litegreen {
    background: #8ebb8a;
}

.tabSheet_gray {
    background: #aaaaaa;
}

.tabSheet_white {
    background: white;
}

.tabSheet_black {
    background: #888888;
}

.tabSheet_yellow {
    background: #E6A23C;
}

/*反白顯示(用于模版）*/
/*共用屬性*/
.txt_highlight_litegreen, .txt_highlight_yellow, .txt_highlight_gray, .txt_highlight_green, .txt_highlight_red, .txt_highlight_blue {
    color: white;
    padding: 0 0.4rem;
    margin-right: 0.2rem;
    /*margin-top:-1rem;
    margin-left:-1.6rem;
    padding:0.2rem 1rem;*/
}

.txt_highlight_litegreen {
    background: #8ebb8a;
}

.txt_highlight_yellow {
    background: rgb(255, 216, 0);
}


.txt_highlight_gray {
    background: #aaaaaa;
}

.txt_highlight_green {
    background: #5a7e5a;
}

.txt_highlight_red {
    background: #e07676;
}

.txt_highlight_blue {
    background: #5691bd;
}


/*特定字體(含顏色)*/
.ft10r_black {
    font-size: 1rem;
    font-weight: 500;
    color: #555555;
}

/*常用顏色*/
.clr_green {
    color: #5c8f5c;
}

.clr_black {
    color: #555555;
}

.clr_red {
    color: #e15e5e;
}

.clr_blue {
    color: #5691bd;
}

.clr_muiblue {
    color: #409EFF; /*#1A73E8;*/
}

.clr_navy {
    color: #1A1AA8;
}

.clr_purple {
    color: #cb7ac0;
}

.clr_pink {
    color: #cb7ac0;
}

.clr_gray {
    color: #aaaaaa;
}

.clr_darkseagreen {
    color: #8ebb8a;
}

.clr_lightcoral {
    color: #ef7e7e;
}

.clr_cddgreen {
    color: #5a7e5a;
}

.clr_cddred {
    color: #e07676;
}

.clr_white {
    color: white;
}

/*常用背景顏色*/
.bgc_lite_red {
    background-color: #FFF0F0;
}

.bgc_lite_green {
    background-color: #e9ffe9; /*#d8f8d8*/
}

.bgc_lite_orange {
    background-color: #fdefea; /*#fadcc7*/
}

.bgc_lite_gray {
    background-color: #efefef;
}

.bgc_lite_black {
    background-color: #e6e6e6;
}

.bgc_lite_blue {
    background-color: #daf3ff; /*#d5e9f7*/
}

/*货况背景*/
.bgc_lite_pink {
    background-color: #fcebeb;
}

.bgc_lite_yellow {
    background-color: #fff9ea; /*#fbf2c2*/
}

.bgc_cddgreen {
    background-color: #5a7e5a;
}

.bgc_cddred {
    background-color: #e07676;
}

.bgc_muiblue {
    background-color: #409EFF;
}

.bgc_navy {
    background-color: #1A1AA8;
}

.bgc_yellow {
    background-color: #E6A23C;
}

/*頂部輪撥圖片區塊三個div疊層，圖片放在div-a,統計/說明放在div-b*/
.div-parent {
    position: fixed;
    max-width: 800px;
    /*left: 0;*/
    border: none;
    width: 100%;
    /*height: calc(25vw);*/
    /*top: 44px;*/
    /*100vw/800 * 640 圖片規格800x300 */
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 3;
}

.div-a {
    position: absolute;
    left: 0px;
    top: 0px;
    /* background: #F00; */
    width: 100%;
    height: auto;
    /* 100vw/800*300 =37.5vw (圖片規格800x300)*/
}

.div-b {
    position: absolute;
    left: 0px;
    /*top: calc(25vw - 1rem);*/
    /*注意，計算符號兩側必須有空白*/
    /* background: #BFBFBF; */
    /* height: calc(37.5vw - 1rem); */
    margin-top: -1rem;
    width: 100%;
    z-index: 4;
}

/*頂部查詢區塊*/
.queryPanel {
    /*position: absolute;*/
    left: 0rem;
    width: 100%;
    max-width:800px;
    z-index: 2;
    line-height: 2.2rem;
    /*margin: 2rem auto 0 auto;*/
    /*margin:2rem auto;*/
    /*border: none;*/
    /*box-sizing: border-box;*/

}

    .queryPanel .mui-card {
        background: #ffffff; /*cfe7f8*/
    }

/*頂部查詢區塊右邊的刷新按鈕*/
.queryBtn {
    float: right;
    width: 20%;
    padding-top: 0.1rem;
}

.mui-card .b-Tab {
    float: left;
    width: 50%;
    text-align: center;
    padding: 0.4rem 0;
    /*裡面文字請用span*/
}

.mui-card .b-Tab33 {
    float: left;
    width: 33%;
    text-align: center;
    padding: 0.4rem 0;
    /*裡面文字請用span*/
}

.mui-card .b-Tab25 {
    float: left;
    width: 25%;
    text-align: center;
    padding: 0.4rem 0;
    /*裡面文字請用span*/
}
/*eof頂部輪撥區塊*/



/*顶部轮拨区块左上角显示名称*/
.mui-card-inner-tag-top {
    position: absolute;
    margin-left: -6px;
    margin-top: -3px;
    z-index: 2;
}


/*底部導航欄*/
.mui-bar-tab .tab-item {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
    padding-top: 0.1rem;
}

    .mui-bar-tab .tab-item .mui-icon ~ .mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mui-bar-tab .tab-item .mui-icon {
        padding: 0;
    }

    .mui-bar-tab .tab-item .mui-icon-extra ~ .mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mui-bar-tab .tab-item .mui-icon-extra {
        padding: 0;
    }

.mui-bar-tab {
    height: 3.6rem;
}



/*Preview Image 勿動!*/
.mui-preview-image.mui-fullscreen {
    position: fixed;
    z-index: 20;
    background-color: #000;
}

.mui-preview-header,
.mui-preview-footer {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 10;
}

.mui-preview-header {
    height: 44px;
    top: 0;
}

.mui-preview-footer {
    height: 50px;
    bottom: 0px;
}

.mui-preview-header .mui-preview-indicator {
    display: block;
    line-height: 25px;
    color: #fff;
    text-align: center;
    margin: 15px auto 4;
    width: 70px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    font-size: 16px;
}

.mui-preview-image {
    display: none;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .mui-preview-image.mui-preview-in {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }

    .mui-preview-image.mui-preview-out {
        background: none;
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }

        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }

.mui-zoom-scroller {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-backface-visibility: hidden;
}

.mui-zoom {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.mui-slider .mui-slider-group .mui-slider-item img {
    display: inline-block;
    /*width: auto;*/ /*by kero這樣圖片才可以全屏等比例*/
    height: auto;
    max-width: 100%;
    /*max-height: 100%;*/
}

.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
    width: 100%;
}

.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
    display: inline-table;
}

.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
    display: table-cell;
    vertical-align: middle;
}

.mui-preview-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}

    .mui-preview-loading.mui-active {
        display: block;
    }

    .mui-preview-loading .mui-spinner-white {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        height: 50px;
        width: 50px;
    }

.mui-preview-image img.mui-transitioning {
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

p img {
    max-width: 100%;
    height: auto;
}
/*eof Preview Image*/


/*2023-020-22 Kero*/
.ft16 {
    font-size: 1.6rem;
}

.ft18 {
    font-size: 1.8rem;
}

.ft20 {
    font-size: 2rem;
}

.ftWt500, .ftw5 {
    font-weight: 500;
}

.ftWt600, .ftw6 {
    font-weight: 600;
}

.ftWt700, .ftw7 {
    font-weight: 700;
}

.ftWt800, .ftw8 {
    font-weight: 800;
}

.ftWt900, .ftw9 {
    font-weight: 900;
}

.lh_10 {
    line-height: 1rem;
}

.lh_12 {
    line-height: 1.2rem;
}

.lh_14 {
    line-height: 1.4rem;
}

.lh_16 {
    line-height: 1.6rem;
}

.lh_18 {
    line-height: 1.8rem;
}

.lh_20 {
    line-height: 2rem;
}

.lh_22 {
    line-height: 2.2rem;
}

.lh_24 {
    line-height: 2.4rem;
}

.lh_26 {
    line-height: 2.6rem;
}

.lh_28 {
    line-height: 2.8rem;
}

.lh_30 {
    line-height: 3rem;
}

.lh_40 {
    line-height: 4rem;
}