/* Loaded after the legacy and RTL styles on the public home and search pages. */
html { overflow-x: auto; }
body { overflow: visible; }

#Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 24px; padding-right: 24px;
    padding-left: max(24px, calc((100% - 1240px) / 2));
    padding-right: max(24px, calc((100% - 1240px) / 2));
    overflow: visible;
}
#TOP_Logo, #TOP_Menu {
    position: static;
    width: auto;
    margin: 0;
    float: none;
    overflow: visible;
}
#TOP_Logo { flex-shrink: 0; }
#TOP_Logo img { max-width: 100%; height: 72px; object-fit: contain; }
#TOP_Menu { display: flex; align-items: center; height: auto; }
#TOP_Menu div { float: none; margin: 0 12px; height: auto; }
#TOP_Menu .dropdown-container { position: relative; overflow: visible; }
.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 90px);
    max-height: min(420px, calc(100vh - 90px));
    max-height: min(420px, calc(100dvh - 90px));
    height: auto;
    overflow-y: auto;
}
.dropdown-menu li { float: none; }

[class*="Main_Content"], #BodyQuery div.Main_Nav, #Query, #Contact .Contact {
    width: calc(100% - 48px);
    max-width: 1480px;
    min-width: 0;
}
#BodySearch { overflow: visible; }
#BodySearch div.KeysMainDiv {
    width: calc(100% - 48px);
    max-width: 980px;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    overflow: visible;
}
#BodySearch div.KeysMainDiv input.Text {
    box-sizing: border-box;
    flex: 1;
    width: 0;
    min-width: 0;
    height: 65px;
    padding: 15px 48px 15px 20px;
    padding-left: 20px; padding-right: 48px;
}
#BodySearch div.KeysMainDiv input.Submit { flex: 0 0 180px; float: none; }
#BodySearch div.KeysMainDiv i.icon {
    left: auto;
    right: auto;
    right: 200px;
}
#BodySearch div.KeysMainDiv label.Reset {
    left: auto;
    right: auto;
    right: 0;
}
#BodySearch div.KeysMoreDiv {
    width: calc(100% - 228px);
    max-width: 800px;
    left: 24px;
    left: max(24px, calc((100% - 980px) / 2));
    margin-left: 0;
}
#BodySearch .package_no_show { width: auto; max-width: calc(100% - 80px); overflow-wrap: break-word; overflow-wrap: anywhere; }

#BodyQuery { height: auto; }
#BodyQuery div.Main_Nav {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
}
#BodyQuery div.Main_Nav > div {
    flex: 1 0 auto;
    padding-left: 18px; padding-right: 18px;
    box-sizing: border-box;
    overflow: visible;
}
#BodyQuery div.Main_Nav > div:hover { padding-left: 18px; padding-right: 18px; }
#Main, #Query { overflow: visible; }
#QueryNav, #QueryNav.fixed {
    position: static !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 72px;
    width: 100%;
    height: auto;
    /* Below the search focus overlay (188), above ordinary result content. */
    z-index: 100;
}
#Query .Query_Nav, #Query .Query_List ol.Title {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 60px;
}
#Query .Query_Nav { height: 60px; }
#Query .Query_Nav .Icon img { width: 60px; height: 60px; }
#Query .Query_Nav > div, #Query .Query_List ol.Title > div { float: none; min-width: 0; }
#Query div.Icon { flex: 0 0 60px; }
#Query div.Waybill { flex: 0 0 250px; }
#Query .Query_List ol.Title > div[data_type="Icon1"],
#Query .Query_List ol.Title > .Icon.not { order: 4; margin-top: 0; }
#Query .Query_List ol.Title .event { display: flex; flex: 1; min-width: 0; align-items: center; }
#Query div.Item1 { flex: 0 0 110px; }
#Query div.Item2 { flex: 0 0 180px; }
#Query div.Item3 { flex: 1; min-width: 0; max-width: none; }
#Query div.Copy { flex: 0 0 80px; display: flex; justify-content: center; align-items: center; }
#Query .Copy img + img { margin-left: 8px; }
html[dir="rtl"] #Query .Copy img + img { margin-left: 0; margin-right: 8px; }
#Query .Query_List ol.List, #Query .Query_List ol.List dl,
#Query .Query_List ol.List dl dt, #Query .Query_List ol.List dl dd {
    box-sizing: border-box;
    overflow: visible;
}
#Query .Query_List ol.List dl dd { overflow-wrap: break-word; overflow-wrap: anywhere; }
#Query .Query_List ol.List dl dd:nth-of-type(2) { width: 33%; }
#Query .Query_List ol.List dl dd > div { overflow: visible; }
#Query .Query_List ol.List dl.ListOne:before {
    background-image: url(../Images/Transit-chevron.svg?v=202610150015);
    background-size: 18px 18px;
}
#Query .Query_List ol.List.is-delivered dl.ListOne:before {
    background-image: url(../Images/Delivered-check.svg?v=202610150015);
}

#Services .Services, #Logistics .Logistics { width: calc(100% - 48px); max-width: 1290px; }
#Logistics .Logistics { height: auto; }
#Logistics .Logistics img { max-width: 100%; height: auto; }
#Contact, #Contact .Contact, #Footer { height: auto; }
#Footer { box-sizing: border-box; padding-left: 16px; padding-right: 16px; }
#AEarrow .banner-caption { width: calc(100% - 48px); max-width: 980px; }
.pod-confirm-pop_content, .pod-img-content {
    box-sizing: border-box;
    max-width: calc(100% - 32px);
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
}

@media (max-width: 1024px) {
    .floating-image { display: none; }
    #Services .Services { display: flex; flex-wrap: wrap; }
    #Services .Item { width: calc(100% / 3); }
    #QueryNav .Query_Nav { height: 44px; min-height: 44px; justify-content: flex-end; }
    #QueryNav .Query_Nav > div:not(.Copy) { display: none; }
    #QueryNav .Copy { flex: 0 0 80px; line-height: 44px; }
    #QueryNav .Copy img { width: auto; height: 32px; }
    #Query .Query_List ol.Title {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr) 60px;
        padding-top: 12px; padding-bottom: 12px;
        background: #fff;
        border: 1px solid #E5F1FF;
        box-sizing: border-box;
    }
    #Query .Query_List ol.Title > div[data_type="Icon1"],
    #Query .Query_List ol.Title > .Icon.not { grid-column: 3; grid-row: 1; }
    #Query .Query_List ol.Title > .Icon:not([data_type]):not(.not) { grid-column: 1; grid-row: 1; }
    #Query .Query_List ol.Title > .Waybill { grid-column: 2; grid-row: 1; width: auto; }
    #Query div.Waybill div.number { width: auto; white-space: normal; overflow-wrap: break-word; overflow-wrap: anywhere; }
    #Query .Query_List ol.Title .event {
        grid-column: 2 / 4;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-right: 16px;
    }
    #Query ol.Title div.Item1, #Query ol.Title div.Item2, #Query ol.Title div.Item3 {
        width: auto;
        float: none;
        white-space: normal;
        overflow-wrap: break-word; overflow-wrap: anywhere;
        line-height: 24px;
        text-align: start;
    }
    #Query ol.Title div.Item3 { grid-column: 1 / -1; }
    #Query ol.Title div.Item1::before { content: var(--source-label) ": "; color: #666; }
    #Query ol.Title div.Item2::before { content: var(--target-label) ": "; color: #666; }
    #Query ol.Title div.Item3::before { content: var(--event-label) ": "; color: #666; }
    #Query .Query_List ol.List dl { display: grid; grid-template-columns: 30% minmax(0, 1.7fr) minmax(0, 1fr); padding: 16px; }
    #Query .Query_List ol.List dl dt, #Query .Query_List ol.List dl dd:nth-of-type(n) {
        width: auto;
        float: none;
        padding: 0;
        padding-left: 16px;
        text-align: start;
        line-height: 24px;
        min-width: 0;
    }
    #Query .Query_List ol.List dl dt { padding-left: 0; padding-right: 12px; }
    #Query .Query_List ol.List dl dd:nth-of-type(2) { grid-column: 3; grid-row: 1; }
    #Query .Query_List ol.List:after, #Query .Query_List ol.List dl:after,
    #Query .Query_List ol.List dl.ListOne:before { left: calc(30% + 6px); right: auto; }
    html[dir="rtl"] #Query .Query_List ol.List:after,
    html[dir="rtl"] #Query .Query_List ol.List dl:after,
    html[dir="rtl"] #Query .Query_List ol.List dl.ListOne:before { left: auto; right: calc(30% + 6px); }
    #Query .Query_List ol.List:after { top: 70px; }
    #Query .Query_List ol.List dl:after { top: 22px; }
    #Query .Query_List ol.List dl.ListOne:before { top: 22px; }
    #Query .Query_List ol.List dl.ListOne:after { top: 17px; }
    #Query .ListItem-action { display: flex; flex-wrap: wrap; }
    #Query .ListItem-action > div { margin: 0 16px 8px 0; }
    html[dir="rtl"] #Query .ListItem-action > div { margin: 0 0 8px 16px; }
}

@media (max-width: 768px) {
    #Header { padding-left: 16px; padding-right: 16px; }
    #TOP_Logo { max-width: 30%; }
    #TOP_Menu { flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
    #TOP_Menu div { margin-left: 6px; margin-right: 6px; }
    #login { padding-left: 8px; padding-right: 8px; }
    [class*="Main_Content"], #BodyQuery div.Main_Nav, #Query, #Contact .Contact { width: calc(100% - 32px); }
    #TBanner, #TBanner .TBanner, #TBanner ul.AEbg, #TBanner ul.AEbg li img { height: 120px; }
    #ABanner, #AEarrow, #AEarrow ul.AEbg li img { height: 300px; }
    #AEarrow .banner-caption { top: 30px; font-size: 24px; }
    #AEarrow .banner-caption p { font-size: 20px; }
    #BodySearch { height: auto; background: #0332CA; padding-top: 16px; padding-bottom: 16px; }
    #BodySearch div.KeysMainDiv {
        position: relative;
        left: auto;
        transform: none;
        margin: 0 auto;
        width: calc(100% - 32px);
        height: auto;
        flex-wrap: wrap;
    }
    #BodySearch.KeysQueryList div.KeysMainDiv { margin-top: 0; }
    #BodySearch div.KeysMainDiv input.Text { height: 52px; font-size: 16px; }
    #BodySearch div.KeysMainDiv input.Submit { width: auto; flex-basis: auto; max-width: 45%; padding-left: 16px; padding-right: 16px; height: 52px; line-height: 52px; font-size: 16px; }
    #BodySearch div.KeysMainDiv i.icon { right: auto; left: 8px; top: 14px; }
    #BodySearch div.KeysMainDiv input.Text { padding-left: 38px; padding-right: 12px; }
    #BodySearch div.KeysMainDiv label.Reset { position: static; width: 100%; height: 44px; line-height: 44px; font-size: 16px; }
    #BodySearch div.KeysMoreDiv {
        position: relative;
        left: auto;
        margin: 0 auto !important; /* The home template sets its desktop offset inline. */
        width: calc(100% - 32px);
        max-height: 198px;
        height: auto;
    }
    #BodyQuery div.Main_Nav > div { margin-top: 16px; height: 52px; }
    #Query { margin-top: 16px; margin-bottom: 16px; }
    #Query .Query_List ol.Title { grid-template-columns: 50px minmax(0, 1fr) 50px; }
    #Query div.Icon, #Query div.Icon span { width: 50px; }
    #Query .Query_List ol.Title .event { grid-template-columns: minmax(0, 1fr); }
    #Query .Query_List ol.List dl { grid-template-columns: 35% minmax(0, 1fr); }
    #Query .Query_List ol.List dl dd:nth-of-type(2) { grid-column: 2; grid-row: auto; margin-top: 8px; }
    #Query .Query_List ol.List dl.ListItem dd:nth-of-type(2) { display: none; }
    #Query .Query_List ol.List:after, #Query .Query_List ol.List dl:after,
    #Query .Query_List ol.List dl.ListOne:before { left: calc(35% + 5px); }
    html[dir="rtl"] #Query .Query_List ol.List:after,
    html[dir="rtl"] #Query .Query_List ol.List dl:after,
    html[dir="rtl"] #Query .Query_List ol.List dl.ListOne:before { right: calc(35% + 5px); }
    #Services .Services { width: calc(100% - 32px); margin-top: 24px; margin-bottom: 24px; }
    #Services .Item { width: 50%; }
    #Services .Item p, #Services .Item:hover p { font-size: 16px; line-height: 24px; }
    #Logistics { min-height: 0; }
    #Logistics .Logistics { width: calc(100% - 32px); margin-top: 32px; margin-bottom: 32px; }
    #Logistics .logistics-caption { padding: 16px; font-size: 20px; }
    #Contact .Contact { display: flex; flex-direction: column; }
    #Contact .D-Two { width: 100% !important; margin: 0; }
    #Contact .D-Two + .D-Two { margin-top: 24px; }
    #Footer { font-size: 12px; line-height: 22px; }
}

html[dir="rtl"] .dropdown-menu { right: 0; left: auto; }
html[dir="rtl"] #BodySearch div.KeysMainDiv input.Text { padding-left: 48px; padding-right: 20px; }
html[dir="rtl"] #BodySearch div.KeysMainDiv i.icon { right: auto; left: 200px; }
html[dir="rtl"] #BodySearch div.KeysMainDiv label.Reset { right: auto; left: 0; }
@media (max-width: 1024px) {
    html[dir="rtl"] #Query .Query_List ol.Title .event { padding-right: 0; padding-left: 16px; }
    html[dir="rtl"] #Query .Query_List ol.List dl dd:nth-of-type(n) { padding-left: 0; padding-right: 16px; }
    html[dir="rtl"] #Query .Query_List ol.List dl dt { padding-right: 0; padding-left: 12px; }
}
@media (max-width: 768px) {
    html[dir="rtl"] #BodySearch div.KeysMainDiv i.icon { left: auto; right: 8px; }
    html[dir="rtl"] #BodySearch div.KeysMainDiv input.Text { padding-left: 12px; padding-right: 38px; }
}