html { font-size: 100%; }
body { margin: 0; font-family: sans-serif; font-size: 100%; background: #fff; }

/* header */
header { height: 44px; display: flex; justify-content: space-between; border-bottom: 1px solid rgb(216, 216, 218); background: rgb(245, 245, 247); }
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 35px; margin-left: 0.5rem; }
.header-icon { }
i {color: rgb(0, 122, 255); }
/* responsive */
section { display: flex; position: relative; overflow: hidden; }
section nav { min-width: 230px; max-width: 230px; background: rgb(251, 251, 253); position: absolute; left: 0; transition: all .5s ease; z-index: 1; }
section.nav-move nav { left: -230px; }
section section { flex-grow: 1; margin-left: 230px; transition: all .5s ease;}
section.nav-move section { margin-left: 0; }
section #nav_2_btn { display: none; }
section.nav-move #nav_2_btn { display: block; }
section section aside { min-width: 380px; max-width: 380px; transition: all .5s ease; }
section section main {flex-grow: 1; background: #fff; }
section section #detail_2_btn { display: none; }

.menu-pane {border-right: 1px solid rgb(216, 216, 218);}
.list-pane {border-right: 1px solid rgb(216, 216, 218);}
@media screen and (max-width: 1120px) {
    section nav { min-width: 333px; max-width: 333px; left: -333px; }
    section.nav-move nav { left: 0; }
    section section { margin-left: 0; }
    section.nav-move section { margin-left: 0; }
    section #nav_2_btn { display: block; }
    section section aside { min-width: 333px; max-width: 333px; }
}
@media screen and (max-width: 666px) {
    section nav { min-width: 100%; max-width: 100%; left: -100%; }
    section.nav-move nav { left: 0; }
    section section aside { min-width: 100%; max-width: 100%; }
    section section main { width: 100%; position: absolute; right: -100%; transition: all .5s ease; z-index: 1;}
    section section.main-move main { right: 0; }
    section section #detail_2_btn { display: block; }

    .menu-pane {border-right: 0px solid rgb(216, 216, 218);}
    .list-pane {border-right: 0px solid rgb(216, 216, 218);}
}
/* pane */
.pane { height: calc(100vh - 45px);box-sizing:border-box; }
    .pane-top { height: 52px; display: flex; justify-content: space-between; position: relative; overflow: hidden;}
        .tool-bar { display: flex; align-items: center; }
            .tool-icon { line-height: 52px; width: 52px;text-align: center;}
            .tool-icon:hover { background: rgba(0,0,0,.08); cursor: pointer;}
            #refresh_list_btn:hover {transform: rotate(360deg) 1s linear;}
        .search-bar { background: #fff; width: 100%; right: -100%; position: absolute; transition: all .5s ease; z-index: 2; }
        .search-bar.active { right: 0; }
            .search-bar .form-drawer { width: calc(100% - 52px); padding-left: 0.5rem; padding-bottom: 0; }
    .pane-body { height: calc(100vh - 97px); overflow-y: auto; }
        .pane-title { margin: 0 1rem; padding: .25rem 0; font-size: 1.3rem; font-weight: 900; }
        .menu-pane-title {}
        .list-pane-title {font-size: 1.6rem;font-weight: 100;}
        .detail-pane-title {font-size: 1.3rem;font-weight: 100;}

.msg-popup { line-height: 20px; margin: 2rem; padding: 1rem; border-radius: 0.5rem; display: none; position: absolute; bottom: 0; right: 0; box-shadow: rgb(216, 216, 218) 0px 3px 10px 0px; background: rgb(52, 199, 89);color: #fff; z-index: 3; }
.msg-popup-title { font-size: 1.3rem; font-weight: 900; }

/* menu */
.menu-item { height: 32px; margin: 0 1rem; padding: 0 .5rem; border-radius: .5rem; display: flex; align-items: center; }
.menu-item:hover { background: rgba(0, 0, 0, 0.08); cursor: pointer; }
.menu-icon { min-width: 28px; line-height: 28px; text-align: center;}
.menu-icon-r {margin-left: auto;}
.menu-text { margin-left: .5rem; font-size: 0.9rem; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
.menu-item.active { background: rgba(0,0,0,.1536); }
/* list */
#shipment_list {position: relative;}
.shipment-item {margin: 0 0.5rem; border-radius: 1rem; }
.shipment-item:hover { background: rgb(228, 228, 230); cursor: pointer; }
.shipment-item .shipment-a {margin: 0 1rem; padding: 1rem 0;border-bottom: .5px solid rgb(228, 228, 230);}
.shipment-item .shipment-t {display: flex; justify-content: space-between;color: rgba(0, 0, 0, 0.88);}
.shipment-item .shipment-tl {font-size: 1.5rem;}
.shipment-item .shipment-tr {white-space: nowrap;}
.shipment-item .shipment-b {display: flex; justify-content: space-between;color: rgba(0, 0, 0, 0.48);}
.shipment-item.active { background: rgb(0, 122, 255); }
.shipment-item.active .shipment-t {color: #fff;}
.shipment-item.active .shipment-b {color: rgb(232, 246, 254);}
/* detail */
.form-container { max-width: 1000px; margin: 1rem 1rem 10rem 1rem; padding: 2rem; border-radius: 0.5rem; box-shadow: rgb(216, 216, 218) 0px 3px 10px 0px; }

.form-drawer,
.form-locker { padding-bottom: 1rem; }
.form-drawer label { margin-bottom: 0.5rem; display: inline-block; font-size: 1.2rem; font-weight: bold; }
.form-drawer label.required::after {content: " *";color: #EB5545;}
.form-drawer input,
.form-drawer textarea { width: 100%; height: 36px; padding: 0.25rem 0.5rem; display: block; border: 1px solid rgba(0,0,0,0.16); border-radius: 0.5rem; box-sizing: border-box; font-size: 1rem; font-family: sans-serif; }
.form-drawer textarea { height: auto; }
.form-drawer span,
.form-locker span,
.form-drawer-btn span { display: block;;color: #EB5545; }
.form-drawer-btn { padding-bottom: .5rem; }
.form-drawer-btn button {width: 100%; height: 36px; border: none; border-radius: 0.5rem; font-size: 1rem; cursor: pointer;}
.form-drawer-btn button.primary { background: rgb(0, 122, 255); color: #fff; }
/* .form-drawer-btn button.primary:hover { background: rgb(0, 113, 235); color: #fff; } */
.form-drawer-btn button.secondary { background: rgba(0,0,0,0.06); color: rgba(0, 122, 255); }
/* .form-drawer-btn button.secondary:hover { background: rgb(245, 245, 247); color: rgba(0, 0, 0, 0.88); } */
.form-drawer-btn button.danger { background: rgba(0,0,0,0.06); color: #EB5545; }
/* .form-drawer-btn button.danger:hover { background: rgb(245, 245, 247); color: rgba(0, 0, 0, 0.88); } */
.form-locker div { display: flex; align-items: center; }
.form-locker div label { margin: 0; display: flex; align-items: center; font-size: 1rem; font-weight: normal; cursor: pointer; }
.form-locker div input { min-width: 1.25rem; min-height: 1.25rem; margin: 0 0.5rem 0 0; border: 1px solid rgba(0,0,0,0.16); border-radius: 0.25rem; display: flex; justify-content: center; align-items: center; background: #fff; cursor: pointer; appearance: none; }
.form-locker div input:checked { background: rgba(0, 122, 255); }
.form-locker input:checked::before { content: "\2713"; font-size: 1rem; color: #fff; }
#captcha_img { height: 36px; margin-left: 1rem; cursor: pointer; }

.loaded-none { line-height: 2rem; text-align: center; }
.loading { margin: auto; width: 80px; height: 80px; }
.loading:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid rgba(0, 122, 255); border-color: rgba(0, 122, 255) transparent rgba(0, 122, 255) transparent; animation: loading 1.2s linear infinite; }
@keyframes loading { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); }
}