@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.recordtbl{
    font-size: 15px;
    font-weight: bold;
    color : #838691;
    border-bottom:3px solid #9d9d9d;
}

.records{
    border-top:1px solid #9d9d9d;
    font-size: 14px;
    font-weight: bold;
    color : #9c9fa5;
}


.product_image{
    width:50px;
    height: 50px;
    border-radius: 15px;
    border:3px solid #adacac
}

/*.....*/

#app-box{
    border:3px solid #acabab;
    border-radius: 10px;
    width:150px;
    height:150px;
    padding:10px;
}

    #OrderTbl{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    }

    #OrderTbl td{
    padding: 10px;
    }

.moreTd{
    display: none;
}


.createForm{
    width:100%;
}

.createForm td{
    padding-right: 20px;
}


.Product_cls{
    border:0px solid hsl(55, 24%, 91%);
    border-radius: 10px;
    background: #f2f2f2;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;

}


.trackingGraph{
    list-style-type:none;
    padding:0;
    margin:0;
}

.trackingGraph li{
    padding: 10px;
    border-radius: 10px;
    background-color: #3894fc;
    width:150px;
    border-bottom: 1px solid #333;
}


.btn-cust{
    background-color: #86822b;
    color: #ffffff;
}

.btn-cust:hover{
    background-color: #635f10;
    color: #ffffff;
}


.btn-cust2{
    background-color: #91908d;
    color: #ffffff;
}

.btn-cust2:hover{
    background-color: #80807f;
    color: #ffffff;
}


.validation-div{
    height:20px
}

.btn-card-green{
    border: 2px solid #48a758;
    border-radius: 15px;
    padding: 4px;
    width: 80px;
    text-align: center;
    background: #c1e7c7;
    color: #48a758;
    font-weight: bold;
}

.btn-card-red{
    border: 2px solid #a75648;
    border-radius: 15px;
    padding: 4px;
    width: 80px;
    text-align: center;
    background: #e7c9c1;
    color: #a75648;
    font-weight: bold;
}


.ac-menu{
    padding:0;
    margin:0;
    list-style-type: none;
}


.ac-menu li:hover > ul{
    display:block;
    position:absolute;
}

.ac-menu ul li{
    list-style-type: none;
    float: center;

}


.ac-menu ul{
    list-style-type: none;
    float: center;
    display: none;
}

.ac-menu ul li {
    padding: 10px;
    width: 200px;
    background-color: #fff;
    border-bottom:1px solid #333;
}

.ac-menu ul li:hover {
    padding: 10px;
    width: 200px;
    background-color: #aaaeb6;
    border-bottom:1px solid #333;
}


#subtblMore{
    border:0px solid #333;
    width:100%;
}

#subtblMore td{
 border:1px solid #c7c7c7
}

.SubCapt{
    background-color: #f5f4f4;
    font-weight: bold;
    font-size: small;
    color : #818181
}

.SubTx{
    background-color: #ffffff;
}

.order-products-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.order-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f1faff;
    border: 1px solid #d8ecff;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.order-product-name {
    font-weight: 600;
    color: #181c32;
}

.order-product-sku {
    color: #7e8299;
    font-size: 12px;
}

.order-product-qty {
    font-weight: 700;
    color: #1b84ff;
}

.order-products-empty {
    color: #a1a5b7;
    font-style: italic;
    font-size: 13px;
}

.btn-normal{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    border:1px solid #3894fc;
    background-color: #ffffff;
    color :#1b84ff;
    border-radius: 15px;
}


.view_order_tbl{
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    width:500px
}

.view_order_tbl td{
  padding:10px;
  border:1px solid #000
}


.stepsTbl{
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}


.stepsTbl td{
    padding: 0;
    margin: 0;
}

.amunt-css{
    font-size: 22px;
    font-weight: bold;
    color: #1b84ff;
}

.amunt-css td{
    border:0px solid #333;
}


.treeStatus{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    left: 20px;
    width:400px;
}

.treeStatus ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    left: 25px;
}

.treeStatus ul li{
    padding: 10px;
    border-radius: 0;
    border-left:2px dotted #4f4f4f;
}

.treeStatus li{
    padding: 10px;
    border-radius: 10px;
    border-left:2px dotted #4f4f4f;
}

.treeStatus li:last-child{
    padding: 10px;
    border-radius: 10px;
    border-left:2px dotted #fff;
}

.treeStatus li div{
    position: relative;
    top: -23px;
    left: -23px;
}

.treeStatus li ul li div{
    position: relative;
    top: -23px;
    left: -21px;
}


.linecss{
    width: 2px;
    height: 150px;
    border-left:2px solid #e4e6ea;
    position: relative;
    left: 0px;
}


.created-button{
    width: 30px;
    height: 30px;
    background-color:#aaaaaa;
    border:3px solid #4f4f4f;
     border-radius: 15px;
    z-index: 1;
    position: relative;
    left:0px;
    padding:0;
    margin:0
}

.created-button div{
    width: 24px;
    height: 24px;
    background-color:#ffffff;
    border:5px solid #a7a7a7;
    border-radius: 15px;
    z-index: 1;
    position: relative;
    left:0px
}

.status-button{
    width: 15px;
    height: 15px;
    background-color:#048ac9;
    border:2px solid #048ac9;
     border-radius: 10px;
    z-index: 1;
    position: relative;
    left:0px
}

.assign-button{
    width: 25px;
    height: 25px;
    background-color:#e2e60e;
    border:2px solid #048ac9;
     border-radius: 15px;
    z-index: 1;
    position: relative; 
    left:0px
}

.awb{
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color: #048ac9;
    
}

.awbcss{
    font-size: 18px;
    font-weight: bold;
    color: #048ac9;   
}

.str{
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color: #444444;
    color: #4a4a4a;
    
}

.spl{
    width:350px;
    text-align:left;
    padding:10px;
    position:relative;
    top:-45px;
    left:-10px;
    border-radius: 10px;
    box-shadow: 0px 1px 15px -6px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 1px 15px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 15px -6px rgba(0,0,0,0.75);
}

/* White icons inside solid buttons (Keenicons use span.ki-duotone, not i) */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info,
.btn.btn-dark,
.btn.btn-secondary,
.swal2-styled.btn-primary {
    --btn-icon-color: #ffffff;
}

.btn.btn-primary .ki-duotone,
.btn.btn-primary [class*="ki-"],
.btn.btn-primary > i,
.btn.btn-primary .bi,
.btn.btn-primary .svg-icon,
.btn.btn-primary i.fa-solid,
.btn.btn-primary i.fa-regular,
.btn.btn-success .ki-duotone,
.btn.btn-success [class*="ki-"],
.btn.btn-success > i,
.btn.btn-success .bi,
.btn.btn-success .svg-icon,
.btn.btn-success i.fa-solid,
.btn.btn-success i.fa-regular,
.btn.btn-danger .ki-duotone,
.btn.btn-danger [class*="ki-"],
.btn.btn-danger > i,
.btn.btn-danger .bi,
.btn.btn-danger .svg-icon,
.btn.btn-danger i.fa-solid,
.btn.btn-danger i.fa-regular,
.btn.btn-warning .ki-duotone,
.btn.btn-warning [class*="ki-"],
.btn.btn-warning > i,
.btn.btn-warning .bi,
.btn.btn-warning .svg-icon,
.btn.btn-warning i.fa-solid,
.btn.btn-warning i.fa-regular,
.btn.btn-info .ki-duotone,
.btn.btn-info [class*="ki-"],
.btn.btn-info > i,
.btn.btn-info .bi,
.btn.btn-info .svg-icon,
.btn.btn-info i.fa-solid,
.btn.btn-info i.fa-regular,
.btn.btn-dark .ki-duotone,
.btn.btn-dark [class*="ki-"],
.btn.btn-dark > i,
.btn.btn-dark .bi,
.btn.btn-dark .svg-icon,
.btn.btn-dark i.fa-solid,
.btn.btn-dark i.fa-regular,
.btn.btn-secondary .ki-duotone,
.btn.btn-secondary [class*="ki-"],
.btn.btn-secondary > i,
.btn.btn-secondary .bi,
.btn.btn-secondary .svg-icon,
.btn.btn-secondary i.fa-solid,
.btn.btn-secondary i.fa-regular,
.swal2-styled.btn-primary .ki-duotone,
.swal2-styled.btn-primary [class*="ki-"],
.swal2-styled.btn-primary > i,
.swal2-styled.btn-primary .bi,
.swal2-styled.btn-primary .svg-icon,
.swal2-styled.btn-primary i.fa-solid,
.swal2-styled.btn-primary i.fa-regular {
    color: var(--btn-icon-color, #ffffff) !important;
}

.btn.btn-primary .ki-duotone [class^="path"],
.btn.btn-success .ki-duotone [class^="path"],
.btn.btn-danger .ki-duotone [class^="path"],
.btn.btn-warning .ki-duotone [class^="path"],
.btn.btn-info .ki-duotone [class^="path"],
.btn.btn-dark .ki-duotone [class^="path"],
.btn.btn-secondary .ki-duotone [class^="path"],
.swal2-styled.btn-primary .ki-duotone [class^="path"] {
    color: var(--btn-icon-color, #ffffff) !important;
}

/* Sidebar layout: compact top header menu + toolbar spacing */
body[data-kt-app-layout="dark-sidebar"] .app-header {
    z-index: 105;
}

body[data-kt-app-layout="dark-sidebar"] .app-header-menu {
    overflow: visible;
}

body[data-kt-app-layout="dark-sidebar"] #kt_app_header_menu .menu-link {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

body[data-kt-app-layout="dark-sidebar"] #kt_app_toolbar {
    position: relative;
    z-index: 100;
}

body[data-kt-app-layout="dark-sidebar"] #kt_app_header_wrapper {
    align-items: center;
    min-height: 0;
}

/* RTL toolbar shell */
html[lang="ar"] .trakmile-toolbar-shell,
html[lang^="ar-"] .trakmile-toolbar-shell,
html[dir="rtl"] .trakmile-toolbar-shell {
    display: block !important;
    width: 100% !important;
}

html[lang="ar"] #kt_app_toolbar,
html[lang^="ar-"] #kt_app_toolbar,
html[dir="rtl"] #kt_app_toolbar {
    display: block !important;
    width: 100% !important;
}

html[lang="ar"] #kt_app_toolbar_container,
html[lang^="ar-"] #kt_app_toolbar_container,
html[dir="rtl"] #kt_app_toolbar_container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 2.75rem !important;
    direction: ltr !important;
}

html[lang="ar"] #kt_app_toolbar_container .trakmile-page-heading-block,
html[lang^="ar-"] #kt_app_toolbar_container .trakmile-page-heading-block,
html[dir="rtl"] #kt_app_toolbar_container .trakmile-page-heading-block {
    position: absolute !important;
    right: 30px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    direction: rtl !important;
    text-align: right !important;
    align-items: flex-end !important;
    margin: 0 !important;
    width: auto !important;
    max-width: calc(100% - 60px) !important;
}

html[lang="ar"] #kt_app_toolbar_container .page-heading,
html[lang^="ar-"] #kt_app_toolbar_container .page-heading,
html[lang="ar"] #kt_app_toolbar_container .breadcrumb,
html[lang^="ar-"] #kt_app_toolbar_container .breadcrumb,
html[dir="rtl"] #kt_app_toolbar_container .page-heading,
html[dir="rtl"] #kt_app_toolbar_container .breadcrumb {
    text-align: right !important;
}

/* Sidebar menu section dividers */
.app-sidebar .sidebar-menu-divider {
    display: block;
    height: 0;
    margin: 0.65rem 0;
    border: 0;
    border-bottom: 1px dashed #2a2a2e;
}

body[data-kt-app-layout="dark-sidebar"] .app-sidebar .sidebar-menu-divider {
    border-bottom-color: #2a2a2e;
}

/* Sidebar third-level submenu — no tree line, slight indent with bullets */
.app-sidebar .menu-item.menu-sub-indention > .menu-sub.menu-sub-accordion,
.app-sidebar .sidebar-menu-level-3 {
    margin-inline-start: 0.75rem;
    padding-inline-start: 0.5rem;
}

html[dir="rtl"] .app-sidebar .menu-item.menu-sub-indention > .menu-sub.menu-sub-accordion,
html[dir="rtl"] .app-sidebar .sidebar-menu-level-3 {
    margin-inline-start: 0.75rem;
    padding-inline-start: 0.5rem;
}