BODY {
    font-size: 12px;
    margin: 2px 10px 2px 0px;
    color: #000000;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background-color: #ffffff;
    /* Modern browser compatibility */
    text-size-adjust: 100%;
}

/* Modern cursor styling for all clickable elements */
A:link, A:visited, A:hover, A:active {
    cursor: pointer;
}

INPUT {
    font-size: 12px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    /* Modern browser compatibility */
    box-sizing: border-box;
}

    /* Radio button specific styling for modern browsers */
    INPUT[type="radio"] {
        appearance: radio !important;
        -webkit-appearance: radio !important;
        -moz-appearance: radio !important;
        width: 13px !important;
        height: 13px !important;
        margin: 0 5px 0 0 !important;
        vertical-align: middle !important;
        display: inline-block !important;
        cursor: pointer !important;
    }

    /* Text input styling — do not apply appearance:none to search (hides native clear X) */
    INPUT[type="text"], INPUT[type="email"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    INPUT[type="search"] {
        /* Keep default searchfield appearance so the clear (X) remains visible */
        -webkit-appearance: searchfield;
        appearance: auto;
    }

TEXTAREA {
    font-size: 12px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    /* Modern browser compatibility */
    box-sizing: border-box;
    resize: vertical;
}

SELECT {
    font-size: 12px;
    color: #000000;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    /* Modern browser compatibility */
    box-sizing: border-box;
}

TABLE {
    border: 0px;
    font-size: 12px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    /* Modern browser compatibility */
    border-collapse: collapse;
    border-spacing: 0;
}

    TABLE.dettbl TH {
        BACKGROUND: #ffffff;
        BORDER-TOP: #1b0e44 1px solid;
        BORDER-BOTTOM: #1b0e44 1px solid;
        FONT-WEIGHT: bold;
        FONT-SIZE: 13px;
        COLOR: #074290;
        FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
        TEXT-DECORATION: none
    }

    TABLE.dettbl_no_border TH {
        BACKGROUND: #ffffff;
        FONT-WEIGHT: bold;
        FONT-SIZE: 13px;
        COLOR: #074290;
        FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
        TEXT-DECORATION: none
    }

    TABLE.dettbl TD {
        BACKGROUND: #ffffff;
        COLOR: #1b0e44;
    }

        TABLE.dettbl TD.label, TABLE.edittbl TD.label, TABLE.viewtbl TD.label {
            text-align: right;
        }

        TABLE.dettbl TD.value, TABLE.edittbl TD.value, TABLE.viewtbl TD.value {
            text-align: left;
            font-weight: bold;
        }

    TABLE.lsttbl TH {
        BACKGROUND: #1b0e44;
        TEXT-ALIGN: left;
        VERTICAL-ALIGN: top;
        FONT-WEIGHT: bold;
        FONT-SIZE: 12px;
        COLOR: #ffffff;
        FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
        TEXT-DECORATION: none
    }

    TABLE.lsttbl TD {
        TEXT-ALIGN: left;
        VERTICAL-ALIGN: top;
        BORDER-BOTTOM: #dedddd 1px solid
    }

    TABLE.lstvtbl TH {
        BACKGROUND: #990000;
        TEXT-ALIGN: left;
        VERTICAL-ALIGN: top;
        FONT-WEIGHT: bold;
        FONT-SIZE: 12px;
        COLOR: white;
        FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
        TEXT-DECORATION: none
    }

    TABLE.lstvtbl TD {
        VERTICAL-ALIGN: top;
        BORDER-BOTTOM: #dedddd 1px solid
    }

    TABLE.rpttbl TH {
        TEXT-ALIGN: left;
        VERTICAL-ALIGN: top;
        BORDER-TOP: #1b0e44 1px solid;
        BORDER-BOTTOM: #1b0e44 1px solid;
        FONT-WEIGHT: bold;
        FONT-SIZE: 12px;
        COLOR: #1b0e44;
        FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
        TEXT-DECORATION: none
    }

    TABLE.rpttbl TD {
        VERTICAL-ALIGN: top;
        BORDER-BOTTOM: #dedddd 1px solid
    }

    /* Added by Don to support supplier and equipment search tables that do not use DataIsland.asp. */

    table.supplier_search_table, table.match_contacted_table {
        border: 0; /* This turns out to be useless because ASP.NET always sets the border directly on a GridView control. */
        border-width: 0; /* Same as above. Just here for insurance. */
        width: 100%;
        font-size: 12px;
        font-family: "Segoe UI", Tahoma, Arial, sans-serif;
        vertical-align: top;
        text-align: left;
    }

        table.supplier_search_table th {
            padding: 2px;
            border-bottom: #dedddd 1px solid;
            background: #074290;
            font-weight: bold; /* Header rows are always bold anyway. */
            color: White;
            cursor: default;
        }

    table.load_note_table th {
        padding: 2px;
        border-bottom: #dedddd 1px solid;
        background: #1B0E44;
        font-weight: bold; /* Header rows are always bold anyway. */
        color: White;
        cursor: default;
    }

    table.match_contacted_table th {
        padding: 2px;
        border-bottom: #dedddd 1px solid;
        background: #5D7B9D;
        font-weight: bold; /* Header rows are always bold anyway. */
        color: White;
        cursor: default;
    }

        table.supplier_search_table th a, table.match_contacted_table th a, table.load_note_table th a {
            color: White;
            text-decoration: none;
        }

    table.supplier_search_table td, table.match_contacted_table td, table.load_note_table td {
        padding: 2px;
        border-bottom: #dedddd 1px solid
    }

    table.supplier_search_table th.sortable_mouseover, table.match_contacted_table th.sortable_mouseover {
        background-color: #1B0E44;
        cursor: pointer;
    }

    table.load_note_table th.sortable_mouseover {
        background-color: #074290;
        cursor: pointer;
    }

    table.supplier_search_table th.sorted_by_column_ascending, table.match_contacted_table th.sorted_by_column_ascending, table.load_note_table th.sorted_by_column_ascending {
        background: url(../images/ascending.gif) no-repeat center right;
        padding-right: 14px;
        background-color: #7F99CC;
        cursor: pointer;
    }

        table.supplier_search_table th.sorted_by_column_ascending a, table.match_contacted_table th.sorted_by_column_ascending a, table.load_note_table th.sorted_by_column_ascending a {
            color: Black;
        }

    table.supplier_search_table th.sorted_by_column_descending, table.match_contacted_table th.sorted_by_column_descending, table.load_note_table th.sorted_by_column_descending {
        background: url(../images/descending.gif) no-repeat center right;
        padding-right: 14px;
        background-color: #7F99CC;
        cursor: pointer;
    }

        table.supplier_search_table th.sorted_by_column_descending a, table.match_contacted_table th.sorted_by_column_descending a, table.load_note_table th.sorted_by_column_descending a {
            color: Black;
        }

    table.supplier_search_table td a.recent_supplier, table.match_contacted_table td a.recent_supplier, table.load_note_table td a.recent_supplier {
        color: #ff3399;
    }


    table.location_history_table th {
        padding: 2px;
        border-bottom: #dedddd 1px solid;
        background: #1b0e44;
        font-weight: bold; /* Header rows are always bold anyway. */
        color: White;
    }

    table.ToolTip {
        background-color: #fafafa;
        border: 1px #000000 solid;
        border-bottom: 1px #000000 solid;
        border-collapse: collapse;
        border-spacing: 0px;
    }


td.ToolTipHeader {
    background-color: #074290;
    border: 1px #000000 solid;
    font-family: Verdana;
    font-weight: bold;
    font-size: 12px;
    color: White;
}

td.ToolTipEmptyRow {
    height: 15px;
    border: 1px;
}

td.ToolTipData {
    border: 1px;
    text-align: left;
    font-family: Verdana, sans-serif, Arial;
    font-weight: normal;
    background-color: #fafafa;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 0px;
}


.hdrSection, .hdrSectionRef {
    background-color: #1b0e44;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: White;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none;
    BORDER-BOTTOM: 1px #074290 solid;
}

.hdrSectionRef {
    BORDER-RIGHT: 1px #074290 solid;
}

.hdrRefFontLeft {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: White;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none;
}

.hdrRefFontRight {
    FONT-WEIGHT: bold;
    FONT-SIZE: 9px;
    COLOR: White;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: underline;
    cursor: pointer;
}

.hdrSectionItem, .hdrSectionItemTab, .hdrSectionItemRefLink {
    background-color: #F8F8AD;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: Black;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none;
    BORDER-BOTTOM: 1px #074290 solid;
    BORDER-TOP: 1px #074290 solid;
}

.hdrSectionItem {
    BORDER-RIGHT: 1px #074290 solid;
}

.hdrSectionRefLink, .hdrSectionButtons {
    FONT-WEIGHT: bold;
    FONT-SIZE: 9px;
    COLOR: Black;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none;
    BORDER-RIGHT: 1px #074290 solid;
    BORDER-TOP: 1px #074290 solid;
}

.hdrSectionRefLink {
    background-color: #F8F8AD;
    BORDER-BOTTOM: 1px #074290 solid;
    cursor: pointer;
}

.hdrSectionButtons {
    background-color: #f5f5f5;
}

.hdrSectionButtonsMiddle, .hdrSectionButtonsLeft {
    background-color: #f5f5f5;
    FONT-WEIGHT: bold;
    FONT-SIZE: 9px;
    COLOR: Black;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none;
    BORDER-TOP: 1px #074290 solid;
}

.hdrSectionButtonsLeft {
    BORDER-LEFT: 1px #074290 solid;
}

.hdrBody, .hdrBodyComplete, .hdrHalfBody {
    background-color: #f5f5f5;
    BORDER-LEFT: 1px #074290 solid;
    BORDER-RIGHT: 1px #074290 solid;
}

.hdrBody {
    BORDER-BOTTOM: 1px #074290 solid;
}

.hdrBodyComplete {
    BORDER-BOTTOM: 1px #074290 solid;
    BORDER-TOP: 1px #074290 solid;
}





A {
    COLOR: #000099;
    CURSOR: pointer;
}

.bttnHand {
    FONT: bttntext;
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #a9a9a8 1px solid;
    FONT-SIZE: 11px;
    BORDER-LEFT: #a9a9a8 1px solid;
    CURSOR: pointer;
    COLOR: #000000;
    BORDER-BOTTOM: #000000 1px solid;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    HEIGHT: 19px;
    TEXT-DECORATION: none;

}

.bttn {
    FONT: bttntext;
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #a9a9a8 1px solid;
    FONT-SIZE: 11px;
    BACKGROUND: #dedddd;
    BORDER-LEFT: #a9a9a8 1px solid;
    CURSOR: pointer;
    COLOR: #000000;
    BORDER-BOTTOM: #000000 1px solid;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    HEIGHT: 19px;
    TEXT-DECORATION: none
}

/* ShipmentDetail.asp - top-right action buttons (outside tabs)
   Keep this scoped so we don't change buttons globally or buttons inside tabs. */
table.shipmentNavTopButtons {
    /* Prevent the header row from growing/shrinking when buttons appear/disappear */
    height: 30px;
}

table.shipmentNavTopButtons tr {
    height: 30px;
}

table.shipmentNavTopButtons td {
    vertical-align: middle;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
}

table.shipmentNavTopButtons input.bttn {
    font-size: 8px;
    height: 8px;
    line-height: 8px;
    padding: 0 2px;
    margin: 0;
    min-height: 0;
    box-sizing: border-box;
}

table.shipmentNavTopButtons b {
    font-size: 9px;
}

table.shipmentNavTopButtons b.shipmentNavTasksLabel {
    font-size: 11px;
}

.smallbttn {
    FONT: bttntext;
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #a9a9a8 1px solid;
    FONT-SIZE: 9px;
    BACKGROUND: #dedddd;
    BORDER-LEFT: #a9a9a8 1px solid;
    CURSOR: pointer;
    COLOR: #000000;
    BORDER-BOTTOM: #000000 1px solid;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    HEIGHT: 15px;
    TEXT-DECORATION: none
}

.drpdwn {
    FONT-SIZE: 11px;
    COLOR: #000000;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    BACKGROUND-COLOR: #dedddd
}

.HighlightedButton {
    FONT-WEIGHT: normal;
    FONT-SIZE: 11px;
    COLOR: Black;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fn1db {
    FONT-SIZE: 9px;
    COLOR: #1b0e44;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fn2b {
    FONT-SIZE: 10px;
    COLOR: #074290;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb2g {
    FONT-WEIGHT: bold;
    FONT-SIZE: 10px;
    COLOR: #dedddd;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fn3b {
    FONT-SIZE: 11px;
    COLOR: #074290;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fn3db {
    FONT-SIZE: 12px;
    COLOR: #1b0e44;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none;
    vertical-align: middle;
}

.fn3dr {
    FONT-WEIGHT: normal;
    FONT-SIZE: 11px;
    COLOR: #990000;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fn3dg {
    FONT-SIZE: 11px;
    COLOR: #9E9E9D;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb3b {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #074290;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb3db {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #1b0e44;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb3dr {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #990000;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb3w {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #ffffff;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb4b {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #074290;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb4db {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #1b0e44;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb4w {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #ffffff;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fb5db {
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
    COLOR: #1b0e44;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.fmsg {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #990000;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none
}

.uhr {
    FONT-SIZE: 11px;
    COLOR: #1b0e44;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-ALIGN: center;
    WIDTH: 30px;
    TEXT-DECORATION: none
}



/*
.messageline
{
	height: 25px;
	background: #f5f5f5;
	border-top: solid 1px #e9e9e1;
	border-bottom: solid 1px #e9e9e1;
}

*/




/* NEW */
.footer {
    border-top: solid 1px #1C4882;
}

HR {
    color: #1C4882;
    height: 1px;
}

.menuBorder {
    border-right: solid 1px #1C4882;
    /* Slightly wider to prevent long menu items (e.g. "CS Shipments To Book") from being cut off */
    width: 140px !important;
}

/* Adjust content area width to match reduced navigation width */
td[style*="calc(100% - 200px)"] {
    width: calc(100% - 140px) !important;
}

.menu {
    height: auto;
    padding-left: 10px;
    border-spacing: 0px;
    /* Match container width to avoid clipping */
    width: 100%;
    box-sizing: border-box;
    color: Black;
}

    .menu TR {
        height: 22px;
    }


    .menu A:link {
        COLOR: Black;
        TEXT-DECORATION: none;
        cursor: pointer;
    }

    .menu A:visited {
        COLOR: Black;
        TEXT-DECORATION: none;
        cursor: pointer;
    }

.menu_active {
    background-color: #1769A6;
    background: linear-gradient(to bottom, #1769A6 0%, #829FCA 100%);
    TEXT-DECORATION: none;
    font-weight: bold;
}

    .menu_active A:link {
        COLOR: white;
        TEXT-DECORATION: none;
        font-weight: bold;
        cursor: pointer;
    }

    .menu_active A:visited {
        COLOR: white;
        TEXT-DECORATION: none;
        font-weight: bold;
        cursor: pointer;
    }



.submenu {
    background-color: #F1E7D9;
    border-right: none;
    /*FILTER: PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=0, STARTCOLORSTR='#F1E7D9', ENDCOLORSTR='#9F6E20'); */
}

.submenu_active A:link {
    COLOR: Black;
    TEXT-DECORATION: none;
    font-weight: bold;
    text-indent: 0px;
    cursor: pointer;
}

.submenu_active A:visited {
    COLOR: Black;
    TEXT-DECORATION: none;
    font-weight: bold;
    text-indent: 0px;
    cursor: pointer;
}


.message_gradient {
    background: linear-gradient(to bottom, #FFFFFF 0%, #829FCA 100%);
}

.message_gradient_edge {
    background: linear-gradient(to top, #96acd4 0%, #ffffff 100%);
}
/*******************************************************************************/
/* FOR EXPANDER JS USED IN ~/ACCOUNTRECEIVABLE/COMPANYDETAILSMAIN.ASPX
/*******************************************************************************/

.expander {
    /*width:190px;*/
    /*padding:0; */
    /*margin:0px; */
    /*list-style-type:none;*/
}

a.expander {
    /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
    /*font-size: 80%;*/
    /*margin-left:5px;*/
    /*padding-left:5px;*/
    /*padding-top:1px;*/
    /*padding-bottom: 1px;*/
    /*display:block;*/
    text-decoration: none;
    /*color: orange;*/
    /*height: 18px;*/
}

    a.expander:hover {
        color: red;
    }

.expanderSub {
    /*display: block;*/
    /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
    /*font-size: 75%;*/
    /*height: 19px;*/
    /*margin-left: 15px;*/
    /*padding-top: 2px;*/
    /*padding-left: 3px;*/
    /*color: #333333;*/
}

a.expanderSub:hover {
    color: blue;
}

.hide {
    display: none;
}

.show {
    /*display: block;*/
}

.showinline {
    display: inline;
}

.ListSearchExtenderPrompt {
    font-style: italic;
    color: Gray;
    background-color: white;
}

.warning_label {
    color: Red;
    text-align: center;
}

.PnlExtraInfoTABLE {
    border: #060F40 2px solid;
    color: #060F40;
    background: #ffffcc;
}

.AlignTextBoxRight {
    text-align: right;
}

/*
Rollback the code for autocomplete style to use IE 9,10 Compatbility Mode on (FTM 2929)
When we are going to remove Compatbility Mode then use this code for the autocomplete:

.autocomplete_completionListElement 
{ 
width : auto!important ;
visibility : hidden;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : Gray;
border-width : 2px;
border-style : solid;
cursor : 'default';
overflow : auto;
text-align : left; 
list-style-type : none;
padding : 0px!important
}
*/

.autocomplete_completionListElement {
    width: 260px !important;
    visibility: hidden;
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: Gray;
    border-width: 2px;
    border-style: solid;
    cursor: "default";
    overflow: auto; /*height : 150px;*/
    text-align: left;
    list-style-type: none;
    padding: 0px !important;
}

.autocomplete_completionListElementCity {
    width: 270px !important;
    visibility: hidden;
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: auto;
    width: 500px;
    text-align: left;
    list-style-type: none;
    padding: 0px !important
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem {
    /*background-color: #ffff99;*/
    background-color: #074290;
    color: White;
    padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem {
    background-color: window;
    color: windowtext;
    padding: 1px;
}

a.VistedLink:visited {
    color: #800080;
}

a.VistedLink:link {
    COLOR: #074290;
}

#dhtmltooltip {
    position: absolute;
    left: -300px;
    width: 350px;
    border: 1px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
}

#dhtmlpointer {
    position: absolute;
    left: -300px;
    z-index: 101;
    visibility: hidden;
}

div#SpinnerContainer {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    z-index: 1000; /* Important to set this */
}

div#Spinner {
    position: absolute;
    display: none;
    width: 50px;
    height: 50px;
    top: 48%;
    left: 48%;
    background: url(../images/tt_spinner.gif) no-repeat center #fff;
    z-index: 1001;
    overflow: auto;
}

div.SectionHeader {
    background-color: #1b0e44;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: White;
    FONT-FAMILY: "Segoe UI", Tahoma, Arial, sans-serif;
    TEXT-DECORATION: none;
    BORDER-LEFT: 1px #074290 solid;
    BORDER-RIGHT: 1px #074290 solid;
    padding: 5px;
    width: 100%;
}

div.SectionBody {
    background-color: #f5f5f5;
    BORDER-LEFT: 1px #074290 solid;
    BORDER-RIGHT: 1px #074290 solid;
    BORDER-BOTTOM: 1px #074290 solid;
    padding: 5px;
    width: 100%;
}

.LeftFloat {
    float: left;
}

.RightFloat {
    float: right;
}

div.SearchHeader {
    background-color: #f5f5f5;
    padding: 5px 0px 5px 0px;
    width: 100%;
}

table.SearchCondition {
    border-collapse: separate;
    border-spacing: 2px;
}

    table.SearchCondition td {
        padding: 2px 5px 2px 5px;
    }

div.mainContentBody {
    padding: 5px;
}

div.editBody {
    background-color: #f5f5f5;
}

table.tabContainer {
    border-bottom: #1b0e44 3px solid;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
}

    table.tabContainer td {
        padding: 0px;
    }

        table.tabContainer td.activeTab {
            background-color: #1F0645;
            color: white;
            cursor: auto;
            font-weight: 700;
        }

        table.tabContainer td.inactiveTab {
            background-color: #E4E4E4;
            color: #1F0645;
            cursor: pointer;
            font-weight: 700;
        }

        table.tabContainer td img {
            display: block;
        }

/* Rectangular shipment tab strip (Output.aspx, ShipmentDetail tabs, etc.) */
div.shipmentTabStripCell {
    vertical-align: bottom;
    padding: 6px 8px 0 8px;
    background: #ffffff;
    border-bottom: 3px solid #1b0e44;
}

table.shipmentTabStrip {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0;
    height: 28px;
}

table.shipmentTabStrip td.shipmentTab {
    height: 28px;
    max-height: 28px;
    line-height: 28px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
    font-size: 11px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    letter-spacing: 0.01em;
    padding: 0 14px;
    box-sizing: border-box;
    border-top: 1px solid #c5c5ce;
    border-right: 1px solid #c5c5ce;
    border-bottom: none;
    border-left: none;
    border-radius: 0 !important;
    background-color: #ececf1;
    color: #1F0645;
    transition: background-color 0.12s ease, color 0.12s ease;
}

table.shipmentTabStrip td.shipmentTab:first-child {
    border-left: 1px solid #c5c5ce;
    border-radius: 0 !important;
}

table.shipmentTabStrip td.shipmentTabInactive {
    cursor: pointer;
}

table.shipmentTabStrip td.shipmentTabInactive:hover {
    background-color: #dddde6;
    color: #1F0645;
}

table.shipmentTabStrip td.shipmentTabActive {
    background-color: #1F0645;
    color: #ffffff;
    border-top-color: #1F0645;
    border-right-color: #1F0645;
    cursor: default;
}

table.shipmentTabStrip td.shipmentTabActive:first-child {
    border-left-color: #1F0645;
}

table.shipmentTabStrip td.shipmentTab span {
    display: inline-block;
    max-height: 28px;
    line-height: 28px;
    color: inherit;
    font-weight: inherit;
    vertical-align: middle;
}

table.shipmentTabStrip td.shipmentTabSpacer {
    width: 100%;
    height: 28px;
    border: none;
    padding: 0;
    background: transparent;
}

/* ========================================
   MASTER PAGE LAYOUT FIX
   Full-page content by default (MasterPage2 #masterMainContent).
   Shipments/Bookings still pin height via their page JS when needed.
   Do not force overflow-x:hidden here — at browser zoom > 100% the page
   should be allowed to show a horizontal scrollbar.
   ======================================== */

table[style*="table-layout: fixed"] td[style*="calc(100% - 140px)"],
table[style*="table-layout: fixed"] td[style*="calc(100% - 200px)"] {
    min-height: calc(100vh - 140px);
    height: auto;
    overflow: visible;
}

table[style*="table-layout: fixed"] td[style*="calc(100% - 140px)"] > div,
table[style*="table-layout: fixed"] td[style*="calc(100% - 200px)"] > div,
#masterMainContent {
    min-height: calc(100vh - 140px);
    height: auto;
    overflow: visible;
}

/* ========================================
   MODERN BUTTON AND TEXT BOX STYLING
   Site-wide consistent styling from Companies.asp
   ======================================== */

/* Modern input styling - applies to all text inputs site-wide */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"] {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
    transition: border-color 0.2s ease !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
}

    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus {
        border-color: #4A90E2 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2) !important;
    }

/* Legacy IE/Edge support */
input[type="text"]::-ms-clear,
input[type="email"]::-ms-clear,
input[type="password"]::-ms-clear,
input[type="search"]::-ms-clear {
    display: block !important;
}

/* Chrome/Edge: keep native clear (X) on search inputs; hide magnifying-glass decoration */
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    display: block;
    cursor: pointer;
}

/* Modern textarea styling - applies to all textareas site-wide */
textarea {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 8px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
    resize: vertical !important;
    transition: border-color 0.2s ease !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 60px !important;
}

    textarea:focus {
        border-color: #4A90E2 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2) !important;
    }

/* Modern select styling - applies to all dropdowns site-wide */
select {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
    background-color: white !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

    select:focus {
        border-color: #4A90E2 !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2) !important;
    }

/* Force option elements to use same font - modern browser compatibility */
select option {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
}

/* Higher specificity for select elements to override browser defaults */
body select {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
}

/* Modern button styling - applies to all buttons site-wide */
input[type="submit"], input[type="button"], .bttn {
    background-color: #dedddd !important;
    border: 1px solid #a9a9a8 !important;
    color: #000000 !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    /* display: inline-block !important; -- REMOVED: This was overriding server-side display:none styles and preventing conditional button visibility */
    min-width: 60px !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    text-decoration: none !important;
}

    input[type="submit"]:hover, input[type="button"]:hover, .bttn:hover {
        background-color: #c8c8c8 !important;
        border-color: #999999 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    input[type="submit"]:active, input[type="button"]:active, .bttn:active {
        background-color: #b8b8b8 !important;
        border-color: #888888 !important;
        transform: translateY(0) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    /* Disabled button styling - applies site-wide */
    input[type="submit"]:disabled, input[type="button"]:disabled, .bttn:disabled {
        background-color: #f5f5f5 !important;
        border-color: #cccccc !important;
        color: #999999 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
        transform: none !important;
        box-shadow: none !important;
    }

        input[type="submit"]:disabled:hover, input[type="button"]:disabled:hover, .bttn:disabled:hover {
            background-color: #f5f5f5 !important;
            border-color: #cccccc !important;
            color: #999999 !important;
            cursor: not-allowed !important;
            transform: none !important;
            box-shadow: none !important;
        }

/* Modern checkbox styling - grey style consistent with modern browser layout (applies site-wide) */
input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 13px !important;
    height: 13px !important;
    border: 1px solid #ccc !important;
    background-color: #fff !important;
    border-radius: 2px !important;
    position: relative !important;
    cursor: pointer !important;
    outline: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

input[type="checkbox"]:checked {
    background-color: #666 !important;
    border-color: #666 !important;
}

input[type="checkbox"]:checked::before {
    content: '\2713' !important;
    position: absolute !important;
    left: 1px !important;
    top: -2px !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
}

input[type="checkbox"]:hover:not(:disabled) {
    border-color: #999 !important;
}

input[type="checkbox"]:focus:not(:disabled) {
    border-color: #999 !important;
    box-shadow: 0 0 3px rgba(153, 153, 153, 0.3) !important;
}

/* Disabled checkbox state - greyed out and obvious to users */
input[type="checkbox"]:disabled,
input[type="checkbox"][disabled] {
    opacity: 0.75 !important;
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
}

input[type="checkbox"]:disabled:checked,
input[type="checkbox"][disabled]:checked {
    background-color: #bbb !important;
    border-color: #aaa !important;
    opacity: 0.75 !important;
}

input[type="checkbox"]:disabled:checked::before,
input[type="checkbox"][disabled]:checked::before {
    color: #fff !important;
    opacity: 0.9 !important;
}

/* Ensure no conflicting styles from other frameworks */
input[type="checkbox"]:not(:checked)::before,
input[type="checkbox"]:not(:checked)::after {
    display: none !important;
}

/* Modern radio button styling - applies site-wide */
input[type="radio"] {
    margin-right: 5px !important;
    transform: scale(1.1) !important;
    cursor: pointer !important;
}

/* Modern label styling - applies site-wide */
label {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 12px !important;
    color: #333 !important;
    margin-bottom: 2px !important;
    display: inline-block !important;
    cursor: pointer !important;
}

/* Bootstrap radio-inline / checkbox-inline: do not flatten their layout */
label.radio-inline,
.radio-inline,
label.checkbox-inline,
.checkbox-inline {
    display: inline-block !important;
    position: relative !important;
    padding-left: 20px !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
.radio-inline input[type="radio"],
label.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"],
label.checkbox-inline input[type="checkbox"] {
    position: absolute !important;
    margin: 4px 0 0 -20px !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
}

/* ============================================================================
   Bootstrap CSS Conflict Fixes for ui-grid
   ============================================================================
   Issue: When Bootstrap CSS loads after tt_2.css, it overrides ui-grid filter
   input styling, causing filter boxes to become too wide and misaligned.
   
   Solution: Add high-specificity selectors to ensure ui-grid filter inputs
   maintain their compact styling regardless of Bootstrap's global input styles.
   
   Affected pages: Any page using both Bootstrap and ui-grid (Carriers.aspx,
   Quotes.aspx, CreditQueue.aspx, Users.aspx, ShipmentTasks.aspx, etc.)
   ============================================================================ */

/* Fix Bootstrap input[type="text"] override on ui-grid filter inputs */
.ui-grid-filter-container input[type="text"],
.ui-grid-filter-container input,
.ui-grid-filter-input,
input.ui-grid-filter-input {
    /* Ensure filter inputs stay compact and fit within grid columns */
    width: 100% !important;
    height: 26px !important;
    padding: 2px 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Focus state for filter inputs - maintains accessibility */
.ui-grid-filter-container input[type="text"]:focus,
.ui-grid-filter-container input:focus,
.ui-grid-filter-input:focus,
input.ui-grid-filter-input:focus {
    border-color: #66afe9 !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6) !important;
}

/* Ensure filter container doesn't get Bootstrap padding/margins */
.ui-grid-filter-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Prevent Bootstrap from adding extra spacing to filter select dropdowns */
.ui-grid-filter-container select,
.ui-grid-filter-select {
    height: 26px !important;
    padding: 2px 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Fix Bootstrap button styling conflicts in ui-grid cells */
.ui-grid-cell-contents button.btn,
.ui-grid-cell button.btn {
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 1px !important;
    min-width: auto !important;
}

/* Ensure ui-grid doesn't inherit Bootstrap's form-control class side effects */
.ui-grid .form-control {
    height: auto !important;
    padding: inherit !important;
}

/* ============================================================================
   Bootstrap CSS Conflict Fixes for Navigation Menu
   ============================================================================
   Issue: When Bootstrap CSS loads on ASPX pages, it adds extra line-height,
   padding, and margins to menu items, causing visible spacing between rows.
   
   Solution: Override Bootstrap's global styles specifically for the navigation
   menu to maintain the original compact 22px row height.
   
   Affected pages: ASPX pages using MasterPage2.master with Bootstrap
   ============================================================================ */

/* Override Bootstrap's line-height and padding on menu table cells */
.menu td,
.menu TR td,
table.menu td {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 22px !important;
    vertical-align: middle !important;
    border: 0 !important;
}

/* Override Bootstrap's link styling in navigation menu */
.menu a,
.menu A,
table.menu a {
    line-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    white-space: nowrap !important;
}

/* Ensure menu rows maintain fixed height regardless of Bootstrap */
.menu tr,
.menu TR,
table.menu tr {
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 22px !important;
}

/* Override Bootstrap's image styling in menu */
.menu img,
.menu IMG,
table.menu img {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    display: inline !important;
}

/* Ensure the menu table itself isn't affected by Bootstrap.
   height:auto (not 100%) so Edge does not stretch rows to fill the page. */
table.menu {
    margin: 0 !important;
    line-height: normal !important;
    height: auto !important;
    border-spacing: 0px !important;
}