/* 共用 */
body{
    font-family: "微軟正黑體",sans-serif;
    background: #F1F6F9;
    letter-spacing: 2px;
}
body label{
    font-weight: bold;
    color: #3F6696;
    font-size: 18px;
}
.header{
    display: none;
}
.scrolltop {
    opacity: 0;
}
.scrolltop a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: #354C7A;
    border-radius: 88px;
    z-index: 2;
    position: fixed;
    top: 88%;
    right: 15px;
    border: 2px solid #fff;
}
.scrolltop .fa-solid {
    padding: 30% 35%;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
    font-size: 14px;
    line-height: 20px;
}
.fa-solid{
    font-size: 14px;
}
.bgcolor{
    margin-top: 180px;
    padding: 0;
    border-radius: 30px;
    box-shadow: 4px 6px 10px rgba(173, 173, 173, 0.2);
}
.headerTop{
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.headerTop a{
    height: 50px;
    width: 50%;
    line-height: 30px;
    font-size: 18px;
    text-align: center;
    background: #DADADA;
    color: #5C5C5C;
    border-bottom: 5px solid transparent;
}
.headerTop a.active{
    background: #608BC1;
    color: #fff;
    border-bottom: 5px solid #3F6696;
}
.headerTop a:nth-child(1){
    border-top-left-radius: 30px;
}
.headerTop a:nth-child(2){
    border-top-right-radius: 30px;
}
.content {
    margin: 30px 0 0 0;
    border: none;
    width: 100%;
}
.header .menu a.gray, .content a.gray, .content li.gray{
    color: #bdbdbd;
    cursor: not-allowed;      /* 游標變一般箭頭 */
}
.content li.gray:hover{
    background: transparent;
}
.content li.gray:hover a, .header .menu li a.gray:hover{
    color: #bdbdbd;
}
a{
    color: #5C5C5C;
    position: relative;
    padding-bottom: 0.3rem;
    transition: 0.3s;
    font-size: 20px;
    font-weight: bold;
}
a:hover{
    text-decoration: none;
    color: #608BC1;
}

/* 表頭固定頂端 */
thead tr{
    position: sticky;
    top: -1;
    z-index: 2;
}
.form-control {
    padding: 8px 12px;
    height: 45px;
    transition: 0.5s;
}
.choose, .choose2{
    background:#D2E9FF; /*背景顏色為灰色*/
}
.buttons{
    margin: 0px 0px 10px 0px;
    color: #9D9D9D;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buttons .btn_blue, .btn_blue{
    color: #3F6696;
    background: #F1F6F9;
    border: 1px solid transparent;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    font-size: 18px;
    letter-spacing: 2px;
}
.btn_blue + .btn_blue{
    margin-left: 3%;
}
button img{
    width: 20px;
    margin-right: 6px;
}
button img.pdf_icon{
    width: 32%;
}
.btn_blue.add,#add,#add_m,#add_d{
    color: #fff;
    background: #F9915C;
}
.btn_blue.delete,#delete,#delete_m,#delete_d,.delete{
    color: #fff;
    background: #EE4E4E;
}
.btn_blue.modify,#modify,#modify_m,#modify_d{
    color: #fff;
    background: #8AC6D1;
}
#print, #print_pay, #print_list, #report{
    color: #0B60B0;
}
.btn_blue.goHomePage,#goHomePage{
    color: #B67352;
    border: 2px solid #B67352;
}
.btn_blue.search{
    background: #F9915C;
    color: #fff;
}
.btn_blue.read{
    background: #3F6696;
    color: #fff;
}
#remove {
    color: #6196A6;
    background: #fff;
    border: 1px solid #6196A6;
}
#excelfile{
    color: #408E68;
}
#summary, #calculate, #statistics{
    color: #86469C;
    border: 1px solid #86469C;
}
#postal_label{
    color: #007F73;
}
#first, #pre, #first_m, #pre_m,#first_d, #pre_d, #save, #save_m, #save_d, #cancel, #cancel_m, #cancel_d{
    color: #7B7B7B;
}
#next, #last,#next_m, #last_m, #next_d, #last_d{
    color: #003D79;
}
.state{
    color: #2967a3;
    background: #deeefd;
    font-size: 24px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #6a9dcf;
    display: inline-block;
}
/* 新增 */
.addNews{
    display: none;
    color: #FF8000;
    background: #FFEEDD;
    border: 1px solid #fca34a;
}
/* 修改 */
.modifyNews{
    display: none;
    color: #EA0000;
    background: #FFD2D2;
    border: 1px solid #f74c4c;
}
.table{
    table-layout: fixed;
}
.table thead th {
    padding: 6px 12px;
    background: #dee2e6;
    color: #5C5C5C;
    border-bottom: 1px solid #9D9D9D;
    position:sticky;
    top: -1;
}
.table td, .table th{
    vertical-align: middle;
}
.form-radio-input {
    cursor: pointer;
    width: 15px;
    height: 15px;
}
label{
    margin-top: 8px;
}
input{
    outline: 0; 
} 
.btn.focus, .btn:focus,input:focus{ 
    border-color: none; 
    box-shadow: none;
}
.form-row{
    display: flex;
}
.form-check-inline{
    margin-bottom: 15px;
}
.showtext_d{
    display: none;
}
.form-control:focus{
    box-shadow: none;
    border-color: #74A9D0;
}
/* 工作提示 */
.point {
    position: relative;
    display: inline-block;
}
.point .tooltiptext {
    visibility: hidden;
    width: 65px;
    background-color: #7B7B7B;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 14px;
    
    /* 定位 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 80%;
    margin-left: -60px;
}
.point:hover .tooltiptext {
    visibility: visible;
}
.mbStatus{
    background: #F0F0F0;
    padding: 5px 15px 5px 15px;
    width: 120px;
    height: 150px;
    margin-right: 10px;
}
.mbStatus label, .identity label{
    margin-top: 0px;
}
.mbStatus .form-check, .identity .form-check{
    margin-bottom: 10px;
}
.identity{
    background: #F0F0F0;
    padding: 5px 15px 5px 15px;
    width: 100px;
    height: 150px;
}
ul {
    /* 取消ul預設的內縮及樣式 */
    margin: 0;
    padding: 0;
    display: flex;
}
ul,li{
    list-style: none;
}
.bg{
    background: url("../img/bg.webp") center center/cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    padding-top: 40px;
}

.go_to{
    display: flex;
    flex-direction: column;
}
.go_to a{
    font-size: 16px;
    font-weight: normal;
    color: #4E709D;
    display: flex;
    align-items: center;
}
.go_to a:hover{
    color: #4E709D;
}

.form-control.red, .form-control.red:disabled{
    background: #FFC3C2;
}
.form-control.orange, .form-control.orange:disabled{
    background: #ffba5a;
}
.form-control.green, .form-control.green:disabled, .green{
    background: #A5E6C9;
}
p.green{
    border-radius: 5px;
}
.form-control.yellow, .form-control.yellow:disabled, .yellow{
    background: #FFEB9D;
}
.form-control.blue, .form-control.blue:disabled, .blue{
    background: #B6E2FF;
}
.form-control.darkgreen, .form-control.darkgreen:disabled{
    background: #F1F6F9;
}
.form-control:disabled, .form-control[readonly] {
    background-color: #F1F6F9;
}
/* maintenance.php, restock.php */
.brown{
    color: #AD5A5A;
}
.logout{
    position: absolute;
    top: 8.9%;
    right: 10%;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #58A399;
    border: 1px solid #58A399;
    padding: 8px 15px;
    border-radius: 10px;
    z-index: 5;
    transition: 0.3s;
}
.logout:hover{
    background: #58A399;
    color: #fff;
}
.logout .fa-solid{
    font-size: 14px;
    margin-left: 10px;
}
p{
    margin-bottom: 0;
}
.btn-primary, .btn-primary:hover{
    background-color: #1A65A9;
    border-color: #1A65A9;
}
.btn-secondary, .btn-secondary:hover{
    background-color: #b9bcbe;
    border-color: #b9bcbe;
}
.clicked{
	background: #CFE8DC;
    color: #048548;
}

/* factory.php, product.php, combination.php, zipcode.php, bank.php */
.lightyellow{
    background: #FFFF93;
}
.status_display{
    position: absolute;
    top: 8%;
    right: 17%;
}
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.footer .container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    color: #5C5C5C;
}
.footer h4{
    font-weight: bold;
}
.white-preview .footer h4{
    color: #E84545;
}
.dark-preview .footer h4{
    color: #FDD36A;
}
.footer ul{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.footer li{
    font-size: 14px;
}
.footer li+ li{
    margin-top: 3%;
}
.footer h4{
    width: 100%;
    margin: 3% 0;
    font-size: 20px;
}
@media (min-width: 500px) {
    .content{
        width: auto;
    }
    .go_to{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .footer .container{
        align-items: start;
    }
    .footer ul{
        flex-direction: row;
        width: auto;
    }
    .footer li{
        font-size: 16px;
    }
    .footer li+ li{
        margin: 0 0 0 20px;
    }
    .footer h4{
        width: auto;
        margin: 2% 0;
        font-size: 22px;
    }
}
@media (min-width: 1200px) {
    body{
        overflow: hidden;
        height: 100vh;
    }
    .header{
        display: block;
    }
    .header .menu{
        background: #fff;
        width: 18%;
        height: 100%;
        padding: 20px;
        position: absolute;
        top: 0;
        box-shadow: 0 4px 6px rgba(173, 173, 173, 0.5);
        margin-right: 0;
        transition: all 0.4s ease;
    }
    .header .menu > ul{
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 1.5%;
        top: 40%;
        width: 16%;
        height: 650px;
        overflow-y: scroll;
    }
    .header .menu li{
        list-style: none;
        line-height: 1.7;
        width: 95%;
    }
    .small_menu{
        display: flex;
        flex-direction: column;
    }
    .header .menu span{
        margin-right: -1.35em;
        transition: 0.3s;
    }
    .header .menu a{
        color: #5C5C5C;
        text-decoration: none;
        font-size: 19px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: flex;
        align-items: center;
        background: transparent;
        transition: 0.3s;
        padding: 16px;
        position: relative;
    }
    .header .menu a:active{
        background: transparent;
    }
    .header .menu > ul li + li{
        margin-top: 8%;
    }
    .header .menu li a:hover{
        color: #608BC1;
    }
    .header .menu li a.active{
        color: #fff;
        background: #608BC1;
        border-radius: 10px;
    }
    .header .menu li.disabled a{
        color: #ADC4CE;
        cursor: not-allowed;
    }
    .area_box{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 35%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .area_box label{
        font-size: 26px;
    }
    .area_box label,.area_box h2, .area_box h4, .area_box p{
        color: #fff;
        font-weight: bold;
        margin: 0;
    }
    .area_box .box{
        background: #608BC1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .area_box .total{
        background: #3F6696;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .area_box .total p{
        display: flex;
        align-items: center;
    }
    .header .menu span.boy_icon, .header .menu span.girl_icon{
        font-size: 28px;
        font-weight: bold;
        margin: 0 5px 5px 0;
        transition: none;
    }

    .fa-solid{
        font-size: 20px;
    }
    .container {    
        margin: 0 auto 0 20%;
        max-width: 1400px;
    }
    .bgcolor{
        margin-top: 3%;
        padding: 3.5% 2.5%;
        box-shadow: 4px 6px 10px rgba(173, 173, 173, 0.2);
    }
    .headerTop{
        display: block;
        height: auto;
        width: auto;
        border-radius: 0;
    }
    .headerTop a{
        height: 50px;
        width: auto;
        line-height: inherit;
        font-size: 20px;
        background: transparent;
        color: #5C5C5C;
        border-bottom: 5px solid transparent;
    }
    .headerTop a:hover{
        color: #608BC1;
    }
    .headerTop a.active{
        color: #3F6696;
        background: transparent;
        border-bottom: none;
    }
    .headerTop a.active:after{
        position: absolute;
        content: "";
        left: 7px;
        bottom: -5px;
        width: 90%;
        height: 5px;
        background: #688FBF;
    }
    .headerTop a:nth-child(1){
        border-top-left-radius: 0;
    }
    .headerTop a:nth-child(2){
        border-top-right-radius: 0;
    }

    .footer{
        margin: 0.8% 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .footer .container{
        flex-direction: row;
    }
    .footer ul{
        flex-direction: row;
        width: auto;
    }
    .footer li{
        font-size: 16px;
    }
    .footer li+ li{
        margin: 0 0 0 20px;
    }
    .footer h4{
        width: auto;
        margin: 0;
        font-size: 24px;
    }
}