/* Minification failed. Returning unminified contents.
(2957,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2958,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2969,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2994,29): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(2995,37): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(2996,34): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
 */
* {
    margin: 0;
    padding: 0;
}

html, body, div, span, applet, embed, object, iframe, frameset,
p, q, blockquote, sub, sup, a, abbr, acronym, font, img, small, center,
h1, h2, h3, h4, h5, h6, b, strong, big, u, ins,
i, cite, em, var, dfn, address, s, strike, del,
dl, dt, dd, ol, ul, li, pre, code, kbd, samp, tt,
fieldset, legend, form, label, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0;
    background: none;
}

html {
    background: #ffffff;
}

body {
    color: #161616;
    font: 12px/1.4 Arial, Helvetica, sans-serif;
    background: url(/NewTheme/images/bg-body.png) repeat-x;
    text-shadow: 0 1px #fff;
}

a {
    text-decoration: underline;
    color: #7f879a;
}

    a:hover {
        text-decoration: none;
    }

input, textarea, select {
    font: 100% arial,sans-serif;
    vertical-align: middle;
    color: #000;
    overflow: auto;
    outline: none;
}

    select option:nth-child(even) {
        background: #F5F5F5;
    }

label {
    vertical-align: middle;
}

button, input {
    width: auto;
    overflow: visible;
}

h1, h2, h3, h4, h5, h6, b, strong, th {
    font-weight: bold;
}

h1 {
    font-size: 200%;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 120%;
}

h4 {
    font-size: 110%;
}

h5 {
    font-size: 100%;
}

h6 {
    font-size: 90%;
}

i, cite, em, var, dfn, address {
    font-style: italic;
}

u, ins {
    text-decoration: underline;
}

s, strike, del {
    text-decoration: line-through;
}

blockquote, blockquote:before, blockquote:after, q, q:before, q:after {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
    }

table, caption, tbody, tfoot, thead, tr, th, td {
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    border: 1px solid #ccc;
    padding: 3px 7px;
    text-align: left;
    vertical-align: top;
}

th {
    border-color: #999;
    text-align: center;
    vertical-align: middle;
}

ul li, ol li {
    list-style-position: inside;
}

ul li {
    list-style-type: none;
}

#wrapper {
    width: 1033px;
    margin: 0 auto;
}
/* header */
#header {
    /*overflow:hidden; */
    padding: 10px 3px 0 6px;
    min-height: 39px;
}

.logo {
    text-indent: -9999px;
    overflow: hidden;
    /*background:url(/NewTheme/images/logo.png) no-repeat;*/
    width: 118px;
    height: 30px;
    margin: -2px 0 0;
    float: left;
}

.logoAxxess {
    text-indent: -9999px;
    overflow: hidden;
    background: url(/NewTheme/images/AxxessLogo.png) no-repeat;
    width: 140px;
    height: auto;
    margin: 0px;
    padding-right: 10px;
    float: left;
}

.logoBay {
    text-indent: -9999px;
    overflow: hidden;
    width: 200px;
    height: auto;
    margin: 0px;
    padding-right: 10px;
    float: left;
}

.logo a {
    display: block;
    height: 100%;
}

.user-box {
    float: right;
    padding-top: 5px;
}

    .user-box span {
        float: left;
        background: url(/NewTheme/images/bg-user-box.png) no-repeat 100% 50%;
    }

    .user-box .logout {
        text-indent: -9999px;
        float: right;
        width: 21px;
        height: 17px;
        overflow: hidden;
        background: url(/NewTheme/images/bg-user-icons.png) no-repeat -25px 0;
        margin-left: 10px;
    }

        .user-box .logout:hover {
            background-position: -25px -23px;
        }

        .user-box .logout.pressed {
            background-position: -25px -43px;
        }

.user {
    text-indent: -9999px;
    float: right;
    width: 15px;
    height: 17px;
    overflow: hidden;
    background: url(/NewTheme/images/bg-user-icons.png) no-repeat;
}

.user-box .user { /*margin-left:22px;*/
}

.user:hover {
    background-position: 0 -23px;
}

.user.pressed {
    background-position: 0 -43px;
}

.user-box span a {
    color: #0d89cf;
    text-decoration: none;
}

    .user-box span a:hover {
        text-decoration: underline;
    }
/* navigation */
#nav {
    height: 1%;
    overflow: hidden;
    padding: 1px 1px 1px 54px;
    margin: 0;
    list-style: none;
}

    #nav li {
        float: left;
        padding: 1px 15px 5px 14px;
        margin-left: 10px;
    }

    #nav a {
        display: block;
        font-weight: bold;
        font-size: 13px;
        color: #4c566c;
        text-decoration: none;
        margin: 2px 1px 4px;
    }

        #nav a:hover {
            color: #26a3e9;
        }

    #nav li.pressed, #nav li.active {
        background: url(/NewTheme/images/bg-nav-active.png) no-repeat 50% 0;
        padding: 1px 0 6px;
    }

    #nav .pressed a, #nav .active a {
        margin: 0 -1px;
        padding: 2px 16px 3px 15px;
        border: solid #99a0a7;
        border-width: 0 1px;
    }
/* main */
#main {
    /*width:973px;
	margin:0 auto;
	overflow:hidden;*/
    padding: 25px 16px;
}

.holder {
    height: 1%;
}

    .holder:after {
        content: "";
        display: block;
        clear: both;
    }

.content .holder {
    padding-bottom: 5px;
}

.account-form {
    float: right;
    line-height: 24px;
}

    .account-form label {
        font-weight: bold;
        color: #e4eefa;
        float: left;
        text-shadow: 0 1px #495969;
    }

    .account-form .select-area {
        border-color: #545d67;
        height: 22px;
        margin: 0 0 0 9px;
        border-radius: 2px;
        background: #fff url(/NewTheme/images/bg-select-area2.gif) repeat-x;
    }

        .account-form .select-area .center {
            line-height: 16px;
        }

        .account-form .select-area .select-opener {
            background: #818daa url(/NewTheme/images/btn-select-opener2.gif) no-repeat;
            height: 20px;
            width: 25px;
        }

        .account-form .select-area:hover, .account-form .select-focus {
            border-color: #4c5a6c;
        }

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

    .tabnav li {
        float: left;
        margin-right: 5px;
    }

    .tabnav a {
        display: block;
        background: url(/NewTheme/images/bg-tabnav.gif) repeat-x;
        padding: 5px 10px;
        min-width: 68px;
        text-align: center;
        color: #fff;
        text-shadow: 0 1px #495969;
        text-decoration: none;
        border: 1px solid #4c5661;
        border-radius: 5px 5px 0 0;
    }

        .tabnav a:hover {
            background-position: 0 -32px;
        }

        .tabnav a.pressed, .tabnav a.active {
            background: #e5e6eb;
            border-color: #e4e7ed;
            color: #353535;
            text-shadow: 0 0;
        }

.content {
    background: #e5e6eb;
    border-radius: 0px 5px 5px 5px;
    box-shadow: 0px 1px 2px 1px #4b535d;
    border: 1px solid #e4e7ed;
    padding: 19px 19px 4px;
    padding-bottom: 48px
}

.alignright {
    float: right;
}

.search-form {
    float: left;
    margin: 0 0 0 20px;
}

body .holder .btn {
    margin-bottom: 15px;
}

.search-form fieldset {
    width: 167px;
    height: 22px;
    background: url(/NewTheme/images/bg-search-form.png) no-repeat;
    float: left;
    padding-top: 4px;
}

.search-form:hover fieldset {
    background-position: 0 -26px;
}

.search-form.pressed fieldset, .search-form .parent-focus {
    background-position: 0 -52px !important;
}

.search-form input[type="text"], .search-form input[type="search"] {
    border: 0;
    background: none;
    width: 130px;
    padding: 0 4px 0 8px;
    color: #6e6e6e;
}

.search-form input[type="submit"] {
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    background: none;
    border: 0;
    margin-top: 2px;
    background: url(/NewTheme/images/btn-search.gif) no-repeat;
}

.search-form:hover input[type="submit"] {
    background-position: 0 -26px;
}

.search-form.pressed input[type="submit"], .search-form .parent-focus input[type="submit"] {
    background-position: 0 -52px;
}

.search-form.pressed input[type="text"], .search-form.pressed input[type="search"], .search-form input[type="text"].focus, .search-form input[type="search"].focus {
    color: #2f3842;
}

.btn {
    float: left;
    background: #2095e6 url(/NewTheme/images/bg-btn.gif) repeat-x;
    line-height: 18px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    /*text-shadow:0 1px #1485cd;*/
    border: 1px solid #1480d1;
    border-top: 1px solid #158dda;
    border-bottom: 1px solid #1371c8;
    margin: 0 20px 0 0;
    padding: 3px 13px 2px;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(140, 147, 183, 0.69);
    -moz-box-shadow: 0px 1px 2px rgba(140, 147, 183, 0.69);
    -webkit-box-shadow: 0px 1px 1px rgba(140, 147, 183, 0.69);
    text-shadow: none
}

input[type="submit"], input[type="button"], input[type="reset"] {
    cursor: pointer;
}

.alignright .btn {
    margin: 0 0 0 20px;
}

.btn:hover {
    background-position: 0 -87px;
    background-color: #0083e2;
}

.btn.pressed {
    background-position: 0 -167px;
    background-color: #00a3ea;
}

.date-block {
    padding-top: 5px;
}

    .date-block dl, .date-block dt, .date-block dd {
        float: left;
        font-size: 13px;
        color: #4b4b4b;
        line-height: 16px;
    }

    .date-block dl {
        margin-right: 18px;
    }

    .date-block dt {
        font-weight: bold;
        margin-right: 3px;
    }

.ico-calendar {
    float: right;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(/NewTheme/images/ico-calendar.png) no-repeat;
    margin-left: 5px;
}

    .ico-calendar:hover {
        background-position: 0 -16px;
    }

    .ico-calendar.pressed {
        background-position: 0 -32px;
    }

.block {
    background: #fff;
    -moz-box-shadow: 0 1px 1px rgba(140, 147, 183, 0.49);
    -webkit-box-shadow: 0 1px 1px rgba(140, 147, 183, 0.49);
    box-shadow: 0 1px 1px rgba(140, 147, 183, 0.49);
    border-radius: 3px;
    padding: 16px 20px 10px;
}

.data {
    width: 100%;
    border-collapse: separate;
    margin: 0 0 10px;
}

.holder .data {
    margin-bottom: 15px;
}

.data th, .data td {
    border: 0;
    padding: 0;
    vertical-align: middle;
}

.data th {
    font-size: 11px;
    color: #7f879a;
    font-weight: normal;
    text-align: center;
    padding: 0 15px 5px 0;
}

.data .col {
    width: 178px;
}

.data .col1 {
    width: 58px;
}

.data td {
    background: url(/NewTheme/images/divider.png) no-repeat 0 50%;
    padding: 9px 15px;
}

.data tr {
    border-radius: 3px;
}

.data td:first-child {
    background-image: none;
    border-radius: 3px 0 0 3px;
}

.data td:last-child {
    border-radius: 0 3px 3px 0;
}

.data tr:nth-child(2n) {
    background-color: #f6f8fa;
}

.data tr:hover td {
    border-top: 1px solid #e7e9ef;
    border-bottom: 1px solid #dbdde4;
    padding: 8px 15px;
    box-shadow: 0 1px 0 #eff1f3;
    -moz-box-shadow: 0 1px 0 #eff1f3;
    -webkit-box-shadow: 0 1px 0 #eff1f3;
    position: relative;
    /*z-index:2;*/
}

    .data tr:hover td:first-child {
        border-left: 1px solid #e7e9ef;
        padding-left: 14px;
    }

    .data tr:hover td:last-child {
        border-right: 1px solid #e7e9ef;
        padding-right: 14px;
    }

.data .user {
    float: left;
}

.pen, .add, .print, .mark, .calc, .flag, .del {
    text-indent: -9999px;
    float: left;
    width: 15px;
    height: 17px;
    overflow: hidden;
    background: url(/NewTheme/images/bg-user-icons.png) no-repeat;
    margin-right: 10px;
}

.pen {
    background-position: -49px 0;
}

    .pen:hover {
        background-position: -49px -23px;
    }

    .pen.pressed {
        background-position: -49px -42px;
    }

.add {
    background-position: -76px 0;
}

    .add:hover {
        background-position: -76px -23px;
    }

    .add.pressed {
        background-position: -76px -42px;
    }

.print {
    background-position: -101px 0;
}

    .print:hover {
        background-position: -101px -23px;
    }

    .print.pressed {
        background-position: -101px -42px;
    }

.mark {
    background-position: -126px 0;
}

    .mark:hover {
        background-position: -126px -23px;
    }

    .mark.pressed {
        background-position: -126px -42px;
    }

.calc {
    background-position: -154px 0;
}

    .calc:hover {
        background-position: -154px -23px;
    }

    .calc.pressed {
        background-position: -154px -42px;
    }

.flag {
    background-position: -180px 0;
}

    .flag:hover {
        background-position: -180px -23px;
    }

    .flag.pressed {
        background-position: -180px -42px;
    }

.del {
    background-position: -200px 0;
    margin: 0;
}

    .del:hover {
        background-position: -200px -23px;
    }

    .del.pressed {
        background-position: -200px -42px;
    }

.data th span {
    float: left;
}

.sort {
    text-indent: -9999px;
    float: left;
    width: 5px;
    height: 8px;
    overflow: hidden;
    background: url(/NewTheme/images/bg-sort.gif) no-repeat;
    margin: 4px 0 0 4px;
}

    .sort.up {
        background-position: 0 -8px;
    }

    .sort.down {
        background-position: 0 -16px;
    }

.show-form {
    line-height: 25px;
    margin-bottom: 10px;
}

    .show-form label {
        float: left;
    }

    .show-form select, .show-form .select-area {
        width: 60px;
        margin: 0 8px;
    }

.pager {
    float: right;
    line-height: 21px;
    margin-top: 2px;
}

    .pager .next, .pager .prev {
        float: right;
        width: 20px;
        height: 21px;
        text-indent: -9999px;
        background: url(/NewTheme/images/bg-pager-controls.png) no-repeat;
        margin-left: 5px;
    }

    .pager .next {
        background-position: -25px 0;
    }

        .pager .next.disabled {
            background-position: -25px -21px;
        }

        .pager .next.pressed {
            background-position: -25px -42px;
        }

    .pager .prev.disabled {
        background-position: 0 -21px;
    }

    .pager .prev.pressed {
        background-position: 0 -42px;
    }

h2 {
    font-size: 16px;
    color: #4b4b4b;
    margin: 0 0 13px;
}

.icon-group {
    float: left;
    padding: 0 8px 0 0;
    margin: 0 7px 0 0;
    background: url(/NewTheme/images/divider2.gif) no-repeat 100% 50%;
}

a[class*="icon"] {
    float: left;
    width: 36px;
    height: 39px;
    background: url(/NewTheme/images/icons.png) no-repeat;
    margin: 0 0 0 3px;
}

.holder:first-child .icon-group {
    background-position: 100% 30%;
}

.holder:first-child a[class*="icon"] {
    margin: -7px 0 0 3px;
}

a.icon1:hover {
    background-position: 0 -42px;
}

a.icon1.pressed {
    background-position: 0 -84px;
}

a.icon1.disabled {
    background-position: 0 -124px;
}

a.icon2 {
    background-position: -39px 0;
}

    a.icon2:hover {
        background-position: -39px -42px;
    }

    a.icon2.pressed {
        background-position: -39px -84px;
    }

    a.icon2.disabled {
        background-position: -39px -124px;
    }

a.icon3 {
    background-position: -78px 0;
}

    a.icon3:hover {
        background-position: -78px -42px;
    }

    a.icon3.disabled {
        background-position: -78px -124px;
    }

    a.icon3.pressed {
        background-position: -78px -84px;
    }

a.icon4 {
    background-position: -117px 0;
}

    a.icon4:hover {
        background-position: -117px -42px;
    }

    a.icon4.pressed {
        background-position: -117px -84px;
    }

    a.icon4.disabled {
        background-position: -117px -124px;
    }

a.icon5 {
    background-position: -168px 0;
}

    a.icon5:hover {
        background-position: -168px -42px;
    }

    a.icon5.pressed {
        background-position: -168px -84px;
    }

a.icon1.disabled {
    background-position: -168px -124px;
}

a.icon6 {
    background-position: -207px 0;
}

    a.icon6:hover {
        background-position: -207px -42px;
    }

    a.icon6.pressed {
        background-position: -207px -84px;
    }

    a.icon6.disabled {
        background-position: -207px -124px;
    }

a.icon7 {
    background-position: -246px 0;
}

    a.icon7:hover {
        background-position: -246px -42px;
    }

    a.icon7.pressed {
        background-position: -246px -84px;
    }

    a.icon7.disabled {
        background-position: -264px -124px;
    }

a.icon8 {
    background-position: -297px 0;
}

    a.icon8:hover {
        background-position: -297px -42px;
    }

    a.icon8.pressed {
        background-position: -297px -84px;
    }

    a.icon8.disabled {
        background-position: -297px -124px;
    }

a.icon9 {
    background-position: -336px 0;
}

    a.icon9:hover {
        background-position: -336px -42px;
    }

    a.icon9.pressed {
        background-position: -336px -84px;
    }

    a.icon9.disabled {
        background-position: -336px -124px;
    }

a.icon10 {
    background-position: -375px 0;
}

    a.icon10:hover {
        background-position: -375px -42px;
    }

    a.icon10.pressed {
        background-position: -375px -84px;
    }

    a.icon10.disabled {
        background-position: -375px -124px;
    }

a.icon11 {
    background-position: -414px 0;
}

    a.icon11:hover {
        background-position: -414px -42px;
    }

    a.icon11.pressed {
        background-position: -414px -84px;
    }

    a.icon11.disabled {
        background-position: -414px -124px;
    }

a.icon12 {
    background-position: -465px 0;
}

    a.icon12:hover {
        background-position: -465px -42px;
    }

    a.icon12.pressed {
        background-position: -465px -84px;
    }

    a.icon12.disabled {
        background-position: -465px -124px;
    }

a[class*="v2_ico"] {
    float: left;
    width: 36px;
    height: 39px;
    background: url(/NewTheme/images/icons_022119.png) no-repeat;
    margin: 0 0 0 3px;
}

a.v2_ico14 {
    background-position: -922px 0;
}

    a.v2_ico14:hover {
        background-position: -922px -42px;
    }

    a.v2_ico14.pressed {
        background-position: -922px -84px;
    }

    a.v2_ico14.disabled {
        background-position: -922px -124px;
    }

.column {
    float: right;
    width: 434px;
    padding: 10px 0 8px;
}

    .column:first-child {
        float: left;
        width: 413px;
    }

.row {
    height: 1%;
    overflow: hidden;
    margin: 0 0 7px;
}

.column .row label {
    float: left;
    width: 142px;
    margin: 3px 12px 0 0;
    word-spacing: -1px;
}

    .column .row label a, .box .column a {
        font-size: 11px;
    }

.column:first-child .row label {
    width: 130px;
    margin: 0 3px 0 0;
}

.column .row select {
    width: 276px;
}

select {
    width: 233px;
}

input[type="text"], input[type="search"], .row textarea, input[type="password"], input[type="number"] {
    border: 1px solid #cfd3dd;
    background: #fff;
    padding: 0;
    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    padding: 4px 9px;
    border-radius: 3px;
    color: #4c566c;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input[type="text"]:disabled {
    background: #f0f0f0;
}

.column .row input[type="text"], .column .row input[type="search"], .column .row input[type="number"], .column .row textarea {
    float: left;
    width: 234px;
}

input[type="text"], input[type="search"], input[type="number"], .column .row textarea {
    float: left;
    width: 234px;
}

.column .row textarea {
    height: 45px;
}

textarea {
    height: 45px;
}

.row input[type="text"]:hover, .row input[type="search"]:hover, .row textarea:hover {
    border-color: #adb4c6;
}

input[type="text"]:hover, input[type="search"]:hover, .row textarea:hover {
    border-color: #adb4c6;
}

.row input[type="text"].pressed, .row input[type="search"].pressed, .row textarea.pressed, .row input[type="text"].focus, .row textarea.focus, .row input[type="password"].focus {
    border-color: #26a3e9;
}

input[type="text"].pressed, input[type="search"].pressed, .row textarea.pressed, .row input[type="text"].focus, .row textarea.focus, .row input[type="password"].focus {
    border-color: #26a3e9;
}

input[type="text"], input[type="search"], input[type="password"], input[type="number"] {
    height: 25px
}

.box {
    border-radius: 3px;
    background: #e5e7ed url(/NewTheme/images/bg-box.gif) repeat-x;
    border: 1px solid #dcdfe6;
    border-top-color: #c2c7d0;
    padding: 4px;
    margin: 0 0 10px;
    margin-top: 10px
}

    .box .inner {
        border-radius: 4px;
        height: 1%;
        overflow: hidden;
        border: 1px solid #dcdee4;
        border-bottom-color: #ccced3;
        background: #fff;
        padding: 13px 20px 0;
        box-shadow: 0 1px 0px rgba(140, 147, 183, 0.10);
        padding-bottom: 10px;
        padding-top: 20px
    }

p {
    margin: 0 0 6px;
}

.box .column {
    width: 414px;
}

    .box .column:first-child {
        width: 389px;
    }

        .box .column:first-child .row label {
            width: 104px;
        }

h3 {
    font-size: 16px;
    color: #4b4b4b;
    margin: 0 0 1px;
}

h4 {
    font-size: 12px;
    margin: 0 0 6px;
}

.box h4 {
    text-transform: uppercase;
}

.box address {
    font-style: normal;
    margin: 0 0 11px;
}

    .box address span {
        display: block;
    }

input.valid {
    /*background: url(/NewTheme/images/ico-valid.gif) no-repeat 100% 50% !important;
	padding-right:22px !important;*/
}

input.invalid {
    /*background: url(/NewTheme/images/ico-invalid.gif) no-repeat 100% 50% !important;
	padding-right:22px !important;*/
}

.column .row.optional select {
    width: 218px;
}

.column .row.optional input[type="text"], .column .row.optional input[type="search"], .column .row.optional textarea {
    width: 190px;
}

.column .row.optional a.alignright {
    font-size: 11px;
    margin: 5px 3px 0 0;
}

.separator {
    height: 12px;
    margin: 21px auto 13px;
    background: url(/NewTheme/images/bg-separator.gif) repeat-x;
}

.login-page {
    background: none;
    overflow-y: hidden;
}

.info td {
    padding: 0 35px;
    font-size: 14px;
    font-weight: bold;
    color: #697584;
    border: 0;
    text-align: center;
    vertical-align: middle;
}

.info p {
    margin: 0 0 28px;
}

.login-page .content {
    border-radius: 5px;
}

.login-page .logo {
    width: 216px;
    height: 80px;
    /*background: url(/NewTheme/images/logo2.png) no-repeat;*/
    margin: 0;
}

.header {
    background: url(/NewTheme/images/border.png) no-repeat 50% 100%;
    height: 1%;
    overflow: hidden;
    padding: 14px 16px 32px 25px;
    margin: 0 0 29px;
}

.visual {
    padding: 0 0 36px;
    background: url(/NewTheme/images/border.png) no-repeat 50% 100%;
    margin: 0 0 31px;
}

    .visual img {
        display: block;
        margin: 0 auto;
    }

.login-form {
    padding-left: 101px;
}

    .login-form .row {
        float: left;
        margin: 0 0 0 15px;
        color: #c1c1c1;
        text-align: center;
    }

    .login-form p {
        margin: 0 0 10px;
    }

    .login-form .row:first-child {
        text-align: left;
    }

    .login-form input[type="text"], .login-form input[type="password"] {
        font-weight: bold;
        padding: 0 15px;
        height: 43px;
        line-height: 44px;
        overflow: hidden;
        width: 368px;
        float: none;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #767676;
        border-radius: 4px;
        opacity: 1;
    }

    .login-form input.btn {
        font-size: 16px;
        line-height: 22px;
        padding: 10px 24px 8px;
        float: right;
        display: block;
        margin: 0 0 10px;
        background: #2A6ECB 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
    }

    .login-form input[type="checkbox"] {
        margin-right: 6px;
    }

.pass {
    padding: 0 0 0 19px;
    color: #2A6ECB;
    float: right;
}

    .pass:hover {
        background-position: 0 -19px;
        color: #7f879a;
        text-decoration: underline;
    }

.sign-up {
    color: #26a3e9;
}

    .sign-up:hover {
        color: #008bd9;
        text-decoration: underline;
    }

.footer {
    background: #f1f2f6;
    padding: 8px 0;
    margin: 0 -20px -10px;
    border-radius: 0 0 3px 3px;
}

    .footer ul {
        list-style: none;
        text-align: center;
    }

        .footer ul li {
            display: inline;
            font-weight: bold;
            margin: 0 43px;
        }

    .footer a {
        color: #cdcdd7;
        text-decoration: none;
    }

        .footer a:hover {
            color: #697584;
        }
/* footer */
#footer {
    background: url(/NewTheme/images/bg-footer3.png) no-repeat 50% 0;
    width: 100%;
    color: #9fabba;
    text-shadow: 0 1px #495969;
    overflow: hidden;
    text-align: center;
    padding: 39px 0;
}

    #footer .nav {
        list-style: none;
        margin: 0 0 11px;
        padding: 0;
    }

        #footer .nav li {
            display: inline;
            margin: 0 8px;
            font-size: 13px;
        }

    #footer a {
        color: #e4eefa;
        text-decoration: none;
    }

        #footer a:hover {
            color: #9fabba;
        }

    #footer p {
        margin: 0;
        font-size: 11px;
    }
/* hide original element */
.jcf-hidden {
    display: block !important;
    position: absolute !important;
    left: -9999px !important;
}
/* custom select styles */
.select-area {
    border: 1px solid #9ba1b3;
    position: relative;
    cursor: default;
    height: 23px;
    float: left;
    background: #d5d7de url(/NewTheme/images/bg-select-area.gif) repeat-x;
    border-radius: 3px;
}

    .select-area:hover, .select-focus {
        border-color: #7d808c;
    }

    .select-area .center {
        float: left;
        padding: 3px 9px;
        line-height: 17px;
        color: #4c566c;
    }

.select-disabled {
    background: #eee;
}

.select-area .select-opener {
    position: absolute;
    background: #818daa url(/NewTheme/images/btn-select-opener.gif) no-repeat;
    height: 21px;
    width: 21px;
    right: 0;
    top: 1px;
}

.select-area:hover .select-opener, .select-focus .select-opener {
    background-position: 0 -26px !important;
}

.select-focus .center {
    color: #161616;
}

.select-options {
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
    border: 1px solid #7d808c;
    border-radius: 3px;
}

    .select-options .drop-holder {
        background: #fff;
        overflow: hidden;
        height: 1%;
        border-radius: 3px;
    }

    .select-options ul {
        list-style: none;
        overflow: hidden;
        width: 100%;
        padding: 0;
        margin: 0;
    }

        .select-options ul li {
            width: 100%;
            float: left;
        }

        .select-options ul a {
            text-decoration: none;
            padding: 3px 9px;
            display: block;
            cursor: default;
            color: #4c566c;
            height: 1%;
        }

    .select-options .item-selected a {
        text-decoration: none;
        background: #f6f8fa;
        color: #4c566c;
    }

@-moz-document url-prefix() {
    .data tr:nth-child(2n) {
        background-color: transparent;
    }

        .data tr:nth-child(2n) td {
            background-color: #f6f8fa;
        }

    .login-form input[type="text"], .login-form input[type="password"] {
        padding: 1px 15px 0;
    }
}

@media \0screen {
    .login-form input[type="text"], .login-form input[type="password"] {
        line-height: 40px;
    }
}

.tblLogin {
    position: relative;
    top: 25em;
    transform: translate(0, -50%);
    padding: 10px;
    padding-left: 104px;
}

.watermark {
    color: #999
}

.inBondLeftCol {
    float: left;
    width: 402px;
}

.inBondRightCol {
    float: right;
    width: auto;
}

    .inBondRightCol label {
        float: left;
        word-spacing: -1px;
    }

.account-form select {
    width: 238px;
    margin: 0 0 0 9px;
    color: #4c566c;
}

.dataTables_filter input[type="text"], .dataTables_filter input[type="search"] {
    width: 150px
}

.dataTables_length select {
    width: 50px;
    float: none
}

p {
    margin-top: 12px;
}

br {
    clear: both;
}

legend {
    font-weight: bold;
    font-size: 150%
}

.data-row {
    width: 420px
}

#invoice-toolbar,
#Inbond-toolbar,
#invoice-toolbar-bottom,
#Inbond-bottom-toolbar,
#isf-toolbar {
    float: left;
    height: 36px;
    margin: -1px 0;
    margin-top: 10px;
}

#isf-toolbar {
    width: 966px
}

.invoice-toolbar-list-left {
    float: left;
    padding-left: 11px;
}

.invoice-toolbar-list-middle {
    float: left;
}

.invoice-toolbar-list {
    list-style-type: none;
    float: right;
    list-style-type: none;
}

    .invoice-toolbar-list li,
    .invoice-toolbar-list-left li,
    .invoice-toolbar-list-middle li {
        float: left;
    }

.invoice-toolbar-list-middle li {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 0px;
}

.invoice-toolbar-list-left li a img {
    padding: 3px 0 0 0l
}

.invoice-toolbar-list li.push_info_down,
.invoice-toolbar-list-middle li.push_info_down {
    margin-top: 2px
}

.invoice-toolbar-list li.load_push,
.invoice-toolbar-list-middle li.load_push {
    padding-top: 3px
}

.invoice-toolbar-list li.push_load_left,
.invoice-toolbar-list-middle li.push_load_left {
    margin-right: 18px
}

.invoice-toolbar-list li.last-item,
.invoice-toolbar-list-middle li.last-item {
    background: none
}

.tipsy {
    font-size: 10px;
    position: absolute;
    z-index: 100000;
    padding: 5px;
    text-shadow: none
}

.tipsy-inner {
    background-color: #000;
    color: #FFF;
    max-width: 200px;
    text-align: left;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 5px 8px 4px;
}

.tipsy-arrow {
    position: absolute;
    background: url('/images/tipsy.gif') no-repeat top left;
    width: 9px;
    height: 5px;
}

.tipsy-n .tipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -4px;
}

.tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px;
}

.tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px;
}

.tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    background-position: bottom left;
}

.tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    background-position: bottom left;
}

.tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    background-position: bottom left;
}

.tipsy-e .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    right: 0;
    width: 5px;
    height: 9px;
    background-position: top right;
}

.tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    left: 0;
    width: 5px;
    height: 9px;
}
.tip {
    resize: none;
}

input.req {
    border: 1px solid #CC3300;
}

select::-ms-expand {
    display: none;
}

select {
    -webkit-appearance: none;
    height: 21px;
    border-radius: 4px;
    overflow: hidden;
    /*background: url(/newtheme/images/btn-select-opener.gif) no-repeat right #ddd;*/
    background: url(/newtheme/images/btn-select-opener.gif) no-repeat right rgb(233, 233, 233);
    background-position: top right;
    border: 1px solid #9ba1b3;
    padding-right: 20px;
}

.account-form select {
    -webkit-appearance: none;
    height: 20px;
    overflow: hidden;
    background: #818daa url(/NewTheme/images/btn-select-opener2.gif) no-repeat;
    background-color: #fff;
    height: 20px;
    background-position: top right;
    border: 1px solid #9ba1b3;
    radius: none;
    padding-right: 23px;
}

.txtArea {
    -webkit-appearance: none;
    overflow: hidden;
    border-color: #adb4c6;
    border-radius: 4px;
    background: none;
    height: 50px
}

th, td {
    border: none;
}

.inner .dataTables_filter input[type="text"], .inner .dataTables_filter input[type="search"] {
    width: 150px !important;
    right: 80px;
    position: absolute
}

.dataTables_paginate {
    width: 50px;
    float: none;
    right: -1px;
    position: absolute
}

input[type="text"], input[type="search"], input[type="number"] {
    width: 175px
}

select {
    width: 175px;
    padding-left: 3px;
}

.ui-button {
    float: left;
    /*background:#2095e6 url(/NewTheme/images/bg-btn.gif) repeat-x;*/
    line-height: 18px;
    /*color:#fff;*/
    font-size: 13px;
    /*font-weight:bold;*/
    /*text-shadow:0 1px #1485cd;*/
    border: 1px solid #1480d1;
    border-top: 1px solid #158dda;
    border-bottom: 1px solid #1371c8;
    margin: 0 20px 0 0;
    padding: 3px 13px 2px;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(140, 147, 183, 0.69);
    -moz-box-shadow: 0px 1px 2px rgba(140, 147, 183, 0.69);
    -webkit-box-shadow: 0px 1px 1px rgba(140, 147, 183, 0.69);
    border-left: 1px solid #c5dbec;
    border-right: 1px solid #c5dbec;
    border-bottom: 1px solid #c5dbec;
    background: #dfeffc url(/Images/ui/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #2e6e9e;
}

.ui-button-Isf {
    float: left;
    line-height: 18px;
    font-size: 13px;
    border: 1px solid #1480d1;
    border-top: 1px solid #158dda;
    border-bottom: 1px solid #1371c8;
    margin: 0 0 0 0;
    padding: 3px 13px 2px;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(140, 147, 183, 0.69);
    -moz-box-shadow: 0px 1px 2px rgba(140, 147, 183, 0.69);
    -webkit-box-shadow: 0px 1px 1px rgba(140, 147, 183, 0.69);
    border-left: 1px solid #c5dbec;
    border-right: 1px solid #c5dbec;
    border-bottom: 1px solid #c5dbec;
    background: #dfeffc url(/Images/ui/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #2e6e9e;
}

.inline-form-link {
    float: left;
    padding-top: 7px;
    padding-left: 5px;
}

.line_item_col_right {
    float: left;
    margin-left: 5px;
    margin-right: 5px
}

.line_item_col_left {
    float: left;
}

.nav1 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav1 > li {
    float: left;
}

.nav1 li:hover a {
    color: #fff;
}

.nav1 a {
    display: block;
    padding: 0 2px;
    text-decoration: none;
    line-height: 20px;
    white-space: pre;
}

.nav1 {
    zoom: 1; /* ie hasLayout fix */
}

    .nav1 li {
        position: relative;
    }

        .nav1 li ul {
            display: none;
            position: absolute;
            top: 100%;
        }

            .nav1 li ul li:hover a {
                background-color: #777;
            }

        .nav1 li:hover ul {
            display: block;
        }

        /* #20217: the column-chooser pencil opens on click via DashboardMenus, which toggles
           display inline, so its panel must not answer to hover. The rule above still serves
           the other .nav1 menus (My Profile on the Surety master), which stay hover-only. */
        .mpopup .nav1 li:hover ul {
            display: none;
        }

        /* #20217: an option row (checkbox + label) is one unit — one arrow-key stop, one
           highlight, and a click anywhere in the row toggles the column. */
        .mpopup .nav1 li ul li {
            cursor: pointer;
        }

            /* Right-column rows carry width:130px inline; the left ones shrink-wrapped their
               label, so highlight and ring stopped mid-column. 162px = the left column
               (4px margin -> the 170px where the right column starts) minus a 4px gutter.
               min-width, not width: min-width would override the inline 130px on the right
               rows, and a label wider than the column must still grow instead of spilling. */
            .mpopup .nav1 li ul li.showHideColLeft {
                min-width: 162px;
            }

            .mpopup .nav1 li ul li:hover,
            .mpopup .nav1 li ul li:focus-visible {
                background-color: #777;
            }

            .mpopup .nav1 li ul li:focus-visible {
                outline: 2px solid #63bbeb;
                outline-offset: -2px;
            }

    /* Clearfix */

    .nav1:before, .nav1:after {
        display: table;
        content: "";
    }

    .nav1:after {
        clear: both;
    }




.nav2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav2 > li {
    float: left;
}

.nav2 li:hover a {
    background-color: Gray;
    color: #fff;
}

.nav2 a {
    display: block;
    padding: 0 2px;
    text-decoration: none;
    line-height: 20px;
    padding-top: 2px;
    margin-top: -2px;
}

.nav2 {
    zoom: 1; /* ie hasLayout fix */
}

    .nav2 li {
        position: relative;
    }

        /*.nav2 li ul {
            display: none;
            position: absolute;
            top: 100%;
        }*/

            .nav2 li ul li:hover a {
                background-color: gray;
            }

        /*.nav2 li:hover ul {
            display: block;
        }*/

    /* Clearfix */

    .nav2:before, .nav2:after {
        display: table;
        content: "";
    }

    .nav2:after {
        clear: both;
    }

    /* #20217: row/flag popups open on click (DashboardMenus), not on :hover; display is
       toggled by the module, so no opacity/visibility transition games. */
    .nav2 li ul {
        display: none;
        position: absolute;
        top: 100%;
    }

    /* #20217: visible keyboard focus on the row/flag trigger and its action items */
    .nav2 > li:focus-visible {
        outline: 2px solid #63bbeb;
        outline-offset: -2px;
    }

    /* the focusable anchor only wraps the icon; the whole 100px cell (icon + label div)
       is clickable, so highlight the cell and mute the anchor's own ring */
    .nav2 div.thumbn:focus-within {
        outline: 2px solid #63bbeb;
        outline-offset: -2px;
    }

    .nav2 .thumbn a:focus-visible {
        outline: none;
    }

    /* #20219: tablet — the row/flag trigger is ~20px tall; extend its hit area toward
       44px with a pseudo-element so grid row height doesn't change. Horizontal reach
       stays tight to avoid stealing taps from the adjacent status cells. */
    @media (pointer: coarse) {
        .nav2 > li {
            position: relative;
        }

        .nav2 > li::after {
            content: '';
            position: absolute;
            top: -12px;
            bottom: -12px;
            left: -6px;
            right: -6px;
        }

        /* the floating grid-scroll arrows and the bottom back-to-top button are mouse
           aids; on touch the grid pans directly with the finger. !important: something
           in the window-plugin init calls .show() on them, inlining display. Section321
           still clicks #scrollContainerUp programmatically — that works while hidden. */
        #scrollContainerUpRight,
        #scrollContainerDownRight,
        #scrollContainerUp {
            display: none !important;
        }
    }




.ui-button-Filter {
    float: left;
    background: #fff url(/NewTheme/images/Filter-Grey.png) no-repeat;
    margin: 0 20px 0 0;
    padding: 3px 13px 2px;
    width: 144px;
    height: 33px;
    border: none;
}

.ui-button-Filter-hover {
    float: left;
    background: #fff url(/NewTheme/images/Filter.png) no-repeat;
    margin: 0 20px 0 0;
    padding: 3px 13px 2px;
    width: 144px;
    height: 33px;
    border: none;
}

.ui-button-Filter-Cancel {
    float: left;
    background: #fff url(/NewTheme/images/Cancel-Filter-Grey.png) no-repeat;
    margin: 0 20px 0 0;
    padding: 3px 13px 2px;
    width: 144px;
    height: 34px;
    border: none;
}

.ui-button-Filter-Cancel-hover {
    float: left;
    background: #fff url(/NewTheme/images/Cancel-Filter.png) no-repeat;
    margin: 0 20px 0 0;
    padding: 3px 13px 2px;
    width: 144px;
    height: 34px;
    border: none;
}

.ui-button-Invoices {
    /*float:left;
	background:#fff url(/NewTheme/images/Invoices-Grey.png) no-repeat;
	padding:3px 13px 2px;
	width:96px;
	height:33px;
	border:none;*/
    background: #fff url(/Images/icons-new.png);
    width: 109px;
    height: 33px;
    background-position: -1236px -43px;
    border: none;
}

.ui-button-Invoices-hover {
    /*float:left;
	background:#fff url(/NewTheme/images/Invoices.png) no-repeat;
	padding:3px 13px 2px;
	width:96px;
	height:33px;
	border:none;*/
    background: #fff url(/Images/icons-new.png);
    width: 109px;
    height: 33px;
    background-position: -1236px -1px;
    border: none;
}

.ui-button-EM {
    /*float:left;
	background:#fff url(/NewTheme/images/Invoices-Grey.png) no-repeat;
	padding:3px 13px 2px;
	width:96px;
	height:33px;
	border:none;*/
    background: #fff url(/Images/icons-new.png);
    width: 126px;
    height: 33px;
    background-position: -1103px -43px;
    border: none;
}

.ui-button-EM-hover {
    /*float:left;
	background:#fff url(/NewTheme/images/Invoices.png) no-repeat;
	padding:3px 13px 2px;
	width:96px;
	height:33px;
	border:none;*/
    background: #fff url(/Images/icons-new.png);
    width: 126px;
    height: 33px;
    background-position: -1103px -1px;
    border: none;
}

.ui-button-ACEAE {
    background: #fff url(/Images/icons.png);
    width: 144px;
    height: 33px;
    background-position: -583px -43px;
    border: none;
}

.ui-button-ACEAE-hover {
    background: #fff url(/Images/icons.png);
    width: 144px;
    height: 33px;
    background-position: -583px -1px;
    border: none;
}

.ui-button-ACESE {
    background: #fff url(/Images/icons.png);
    width: 144px;
    height: 33px;
    /*background-position: -679px -43px;*/
    background-position: -433px 117px;
    border: none;
}

.ui-button-ACESE-hover {
    background: #fff url(/Images/icons.png);
    width: 144px;
    height: 33px;
    /*background-position: -679px -1px;*/
    background-position: -433px 159px;
    border: none;
}

.invoiceFlag {
    background-image: url(/Images/icons.png);
    width: 34px;
    height: 35px;
    background-position: -1818px -42px;
    border: none;
}

.invoiceFlag-hover {
    background-image: url(/Images/icons.png);
    width: 34px;
    height: 35px;
    background-position: -1818px 0px;
    border: none;
}

.ui-button-3461 {
    float: left;
    background: #fff url(/NewTheme/images/3461-Grey.png) no-repeat;
    padding: 3px 13px 2px;
    width: 72px;
    height: 33px;
    border: none;
}

.ui-button-3461-hover {
    float: left;
    background: #fff url(/NewTheme/images/3461.png) no-repeat;
    padding: 3px 13px 2px;
    width: 72px;
    height: 33px;
    border: none;
}

.ui-button-border-3461 {
    background: #fff url(/Images/icons.png);
    width: 72px;
    height: 33px;
    background-position: -782px -43px;
    border: none;
}

.ui-button-border-3461-hover {
    background: #fff url(/Images/icons.png);
    width: 72px;
    height: 33px;
    background-position: -782px -1px;
    border: none;
}

.ui-button-7501 {
    float: left;
    background: #fff url(/NewTheme/images/7501-Grey.png) no-repeat;
    padding: 3px 13px 2px;
    width: 72px;
    height: 33px;
    border: none;
}

.ui-button-7501-hover {
    float: left;
    background: #fff url(/NewTheme/images/7501.png) no-repeat;
    padding: 3px 13px 2px;
    width: 72px;
    height: 33px;
    border: none;
}

.mediumSelectBox {
    width: 318px;
}

/*
.otherProperties
{
    display:none;
}
*/

.checkboxLabel {
    margin: 4px 0px 0px 15px;
}

.ndc_table td, .dc_table td {
    text-align: center;
}

.ui-dialog-title {
    color: Gray;
}

#NaftaPartsTable td {
    text-align: center;
}

.push_line_items .line_item_col_left, .push_line_items .line_item_col_right {
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}

    .push_line_items .line_item_col_left input[type="text"], .push_line_items .line_item_col_right input[type="text"] {
        width: 130px;
    }

    .push_line_items .line_item_col_left label, .push_line_items .line_item_col_right label {
        width: 120px;
    }

    .push_line_items .line_item_col_left .error, .push_line_items .line_item_col_right .error {
        /*width:20px !important;*/
        width: 20px;
    }

.bolDataRow {
    width: 145px;
    float: left;
}

.bolDataRow2 {
    width: 110px;
    float: left;
}

.bolDataRow3 {
    width: 40px;
    float: left;
}

.bolDataRow input[type="text"] {
    width: 110px;
}

.bolDataRow2 input[type="text"], .bolDataRow2 input[type="text"] {
    width: 80px;
}

.bolDataRow3 input[type="checkbox"] {
    margin: 12px 0px 0px 15px;
}

.bolDataRow select {
    width: 120px;
}

.bolSectionHeader {
    font-weight: bold;
}

.itSectionHeader {
    font-weight: bold;
}

.itDataRow {
    float: left;
    width: 180px;
}

    .itDataRow input {
        width: 150px;
    }

    .itDataRow select {
    }

.action-buttons {
    float: right;
}

.innerTable label {
    width: 110px !important;
}

.ImporterAccount {
    display: none;
}

.popup {
    cursor: pointer;
}

#line_item_table tr {
    cursor: pointer !important;
}

.displayResponseLinkDiv {
    text-align: center;
}

.ChildInvoiceRow {
    background-color: #D3E1EB !important;
}

.MonthlyStatement, .finalMonthlyStatement {
    background-color: #E5F0F8 !important;
}

textarea {
    border-radius: 5px 5px 5px 5px;
    border-color: #adb4c6;
}

.jqpopup {
    text-shadow: none;
    font-size: 12px;
    z-index: 10000;
    width: 300px !important
}

.wordwrap {
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap; /* Opera <7 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* IE */
    font: 11px Arial;
    margin-top: 5px;
}

.marg {
    margin-top: 5px;
    font: 11px Arial;
}

.enableFields {
    margin-top: 10px !important;
    margin-left: 4px !important;
}

.filersInvoiceDefault input[disabled="disabled"], input.disabledField {
    background-color: #F3F0F0;
}

.filersInvoiceDefault select[disabled="disabled"], select.disabledField {
    color: grey;
}

.automationCntChk {
    margin-left: 10px;
    margin-top: 4px;
}

.autocontrols {
    margin-top: 5px !important;
}

.queriestab {
    padding: 5px 9px !important;
}

.morecontent span {
    display: none;
}

.LICss {
    position: absolute;
    margin-left: 600px;
}

.LICO {
    position: absolute;
    margin-left: -285px;
    margin-top: 60px;
}

.LICE {
}

.LITV {
    margin-top: 90px;
    margin-bottom: 270px;
}

.LIGW {
}

.LIC {
    position: absolute;
    margin-left: -560px;
    margin-top: 120px;
}

.LIUC {
}

.LIM {
    position: absolute;
    margin-top: 30px;
    margin-left: 285px;
}
/* Image style */
#scrollUp {
    background-image: url("/NewTheme/images/top.png");
    bottom: 20px;
    right: 20px;
    width: 38px; /* Width of image */
    height: 38px; /* Height of image */
}

#scrollContainerUp {
    background-image: url("/NewTheme/images/top.png");
    bottom: 2px;
    right: 50%;
    left: 50%;
    width: 38px; /* Width of image */
    height: 38px; /* Height of image */
}

.tabnav a.yellow {
    background: #ffaf4b; /* Old browsers */
    background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */
}

.tabnav a.green {
    background: #b4ddb4; /* Old browsers */
    background: -moz-linear-gradient(top, #b4ddb4 0%, #83c783 0%, #52b152 11%, #008a00 67%, #005700 98%, #005700 100%, #002400 100%, #005700 101%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(0%,#83c783), color-stop(11%,#52b152), color-stop(67%,#008a00), color-stop(98%,#005700), color-stop(100%,#005700), color-stop(100%,#002400), color-stop(101%,#005700)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b4ddb4 0%,#83c783 0%,#52b152 11%,#008a00 67%,#005700 98%,#005700 100%,#002400 100%,#005700 101%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b4ddb4 0%,#83c783 0%,#52b152 11%,#008a00 67%,#005700 98%,#005700 100%,#002400 100%,#005700 101%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b4ddb4 0%,#83c783 0%,#52b152 11%,#008a00 67%,#005700 98%,#005700 100%,#002400 100%,#005700 101%); /* IE10+ */
    background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 0%,#52b152 11%,#008a00 67%,#005700 98%,#005700 100%,#002400 100%,#005700 101%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#005700',GradientType=0 ); /* IE6-9 */
}

.tabnav a.activ {
    border-color: #e4e7ed;
}

.invoiceFilter {
    padding: 5px 30px 5px 10px;
    border: none !importa;
}

.removeInvoice {
    cursor: pointer;
    margin-top: 5px;
    margin-right: 3px;
    font-size: 11px;
    font-weight: 900;
    border: solid 1px white;
    color: #000;
    background-color: #fff;
    float: right;
    border-radius: 12px;
    width: 12px;
    padding-left: 3px;
    box-sizing: initial;
}

.ui-autocomplete {
    z-index: 9999999999 !important;
}

.editInvoiceNumber {
    cursor: pointer;
    float: left;
    margin: 5px 0px 0px 6px;
}

.tabnav a.redGradient {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
    background: #ff3019; /* Old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}

.toggle_contentHolder {
    cursor: pointer;
}

#panel_PGA .contentHolder {
    display: none;
}

.strike {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2NgYGD4DwABBAEAcCBlCwAAAABJRU5ErkJggg==');
    background-repeat: repeat-x;
    background-position: 50% 50%;
}

#backupDiv::-webkit-scrollbar {
    width: 5px;
}

.dropdownbtn {
    background-color: #03c2fc;
    color: white;
    padding: 7px;
    font-size: 16px;
    border: none;
    border-radius: 5px 5px 5px 5px;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 200px;
    margin-top: -20px;
    margin-bottom: -20px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        white-space: nowrap;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #02afe3;
}

table.tablesorter tr.even.row_selected td {
    background-color: #dee5f3;
}

table.tablesorter tr.odd.row_selected td {
    background-color: #cfdbf5;
}

.divScrollBar {
    height: 400px;
    overflow-y: scroll;
}

    .divScrollBar::-webkit-scrollbar {
        width: 12px;
    }

    .divScrollBar::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.actionGridIcon {
    padding-left: 2.5px;
}

.content-parent {
    width: 100%;
    margin: auto;
    display: flex;
}

.left-content {
    top: 0px;
    left: 0px;
    width: 1144px;
    /*height: 1080px;
	background-color: aliceblue;*/
    display: inline-block;
}

.right-content {
    top: 0px;
    left: 1344px;
    width: 576px;
    /*height: 1080px;*/
    /* UI Properties */
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    display: inline-block;
}

.login-title {
    padding-left: 104px;
    height: 44px;
    /* UI Properties */
    color: #0846A6;
    text-align: left;
    font: normal normal bold 36px/44px Montserrat;
    letter-spacing: 0px;
    opacity: 1;
}

.subTitle {
    height: 29px;
    /* UI Properties */
    text-align: left;
    font: normal normal bold 24px/29px Montserrat;
    letter-spacing: 0px;
    color: #0846A6;
    opacity: 1;
}

.sign-in {
    position: relative;
    top: 1.5em;
    padding-left: 104px;
    width: 269px;
    height: 52px;
    /* UI Properties */
    text-align: left;
    font: normal normal bold 39px/45px Roboto;
    letter-spacing: 0px;
    color: #1D1F1F;
    opacity: 1;
}

    .sign-in label {
        text-align: left;
        font: normal normal normal 16px/21px Roboto;
        letter-spacing: 0px;
        color: #919191;
        opacity: 1;
    }

    .sign-in div {
        margin: 5px 0;
    }

.login-row {
    width: 368px;
    height: 79px;
    /* UI Properties */
    opacity: 1;
    font: normal normal normal 16px/21px Roboto;
}

    .login-row label {
        text-align: left;
        font: normal normal bold 16px/21px Roboto;
        letter-spacing: 0.06px;
        color: #1D1F1F;
        opacity: 1;
    }

.login-child-row {
    display: inline-block;
    width: 50%;
    float: left;
    text-align: left;
    letter-spacing: 0.06px;
    color: #1D1F1F;
    opacity: 1;
}

.r-wrapper {
    position: absolute;
    top: 38%;
    transform: translate(0, -50%);
    padding: 10px;
}

.failure-container {
    position: relative;
    top: 80%;
    padding-left: 104px;
}

.responsive {
    width: 100%;
    max-width: 1344px;
    max-height: 1080px;
}

@media screen and (min-width: 1600px) {
    .left-content {
        width: 1344px;
    }
}

.dashboardData {
    position: relative;
    bottom: 7px;
    margin-right: 10px;
    padding: 2px 0 0 10px;
}

.dashboard-top-filters {
    top: 28px;
    position: absolute;
    right: 40px;
    left: 179px;
    min-width: 785px;
    margin-left: 10px;
}

.transaction-date-filters {
    margin-left: 520px;
    clear: none;
}

@media screen and (max-width: 1030px) {
    .radio-filters {
        clear: both;
    }
}

@media screen and (max-width: 1200px) {
    .transaction-date-filters {
        margin-left: 149px;
        clear: both;
        padding-top: 38px;
    }

    .radio-filters {
        top: 33px !important;
    }

    .select-container {
        clear: both !important;
    }
}

@media screen and (max-width: 1600px) {
    .login-form {
        padding-left: 3em;
    }

    .sign-in {
        padding-left: 1em;
    }

    .login-title {
        padding-left: 1em;
    }

    .failure-container {
        padding-left: 3em;
    }
}

.radio-filters {
    left: 149px;
    position: relative;
    top: 24px;
    width: 368px !important;
}

.entry_type_ac {
    margin-left: 8px !important;
    position: relative;
    bottom: 5px;
    height: 21px !important;
}

.select-container {
    clear: none;
}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

#manifest-filters {
    position: relative;
    margin-left: 165px;
    top: 42px;
    margin-bottom: 44px;
}

    #manifest-filters input[type=radio], a.filter {
        margin: 0 10px;
    }

.linkButton {
    text-decoration: blink;
}

a.tooltip {
    position: relative;
}

    a.tooltip span {
        display: none;
    }

    a.tooltip:hover span, a.tooltip:focus span {
        display: block;
        position: absolute;
        top: 1.6em;
        left: 1.5em;
        padding: 0.2em 0.6em;
        border: 1px solid #996633;
        background-color: #FFFF66;
        color: #000;
        z-index: 2;
    }

.icon-position {
    position: relative;
    z-index: 1;
}



.showDashboardOption {
    display: none
}

.hideDashboardOption {
    display: none
}

.airManifestNotesTable td {
    border: 1px solid #ccc !important;
}

@media (max-width: 1189px) {
    #dvCreateImpTallyImpLevel {
        margin-left: 543px !important;
    }
}

@media (min-width: 1190px) and (max-width: 1459px) {
    #dvCreateImpTallyImpLevel {
        margin-left: 760px !important;
    }
}

@media (min-width: 1460px) and (max-width: 1880px) {
    #dvCreateImpTallyImpLevel {
        margin-left: 760px !important;
        margin-top: 68px !important;
    }
}

@media (max-width: 1459px) {
    #dvCreateImpTallyImpLevel {
        margin-top: 68px !important;
    }
}

@media (max-width: 1190px) {
    .pre-assigned-it-container {
        margin-left: 46px !important;
    }
}

@media (max-width: 1080px) {
    .pre-assigned-it-container {
        margin-left: 0 !important;
    }

    .order-date-container {
        margin-left: 46px !important;
    }

    #dvCreateImpTallyLintItemToGrid {
        margin-left: 543px;
    }

    .tallyTypeSelection {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 999px) {
    #dvCreateImpTallyLintItemToGrid {
        margin-left: 416px !important;
        margin-top: 82px !important;
    }
}

.ag-theme-balham {
    --ag-font-size: 14px !important;
    --ag-font-family: 'Open Sans', sans-serif !important;
    text-shadow: none !important;
}

#myGrid .ag-root.ag-unselectable.ag-layout-normal {
    padding-bottom: 10px !important;
}

/* Compliance Validation dialog box style */
/* Effect 1: Brackets */
:root {
	--transition-speed: 0.3s;
}

.cl-effect-1 {
	position: relative;
	display: inline-block;
	margin: 10px;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
	font-size: 1.00rem; /* Responsive font size */
}

.cl-effect-1:hover,
.cl-effect-1:focus {
	outline: none;
}

.cl-effect-1::before,
.cl-effect-1::after {
	display: inline-block;
	opacity: 0;
	transition: transform var(--transition-speed), opacity 0.2s;
	-webkit-transition: transform var(--transition-speed), opacity 0.2s;
	-moz-transition: transform var(--transition-speed), opacity 0.2s;
}

.cl-effect-1::before {
	margin-right: 10px;
	content: '[';
	transform: translateX(20px);
}

.cl-effect-1::after {
	margin-left: 10px;
	content: ']';
	transform: translateX(-20px);
}

.cl-effect-1:hover::before,
.cl-effect-1:hover::after,
.cl-effect-1:focus::before,
.cl-effect-1:focus::after {
	opacity: 1;
	transform: translateX(0px);
}

.cl-effect-1:focus {
	outline: 2px dashed #007acc; /* Accessibility focus */
}
.accordion-container {
	height: auto !important;
	min-height: 50px;
}
/* PGA Modal Styles */

.pga-modal-header,.pga-modal-footer {
    background-color: #f9f9f9;
    /*padding: 1px;*/
}

.pga-modal-header h2 {
    font-size: 1.25rem;
    /*padding-left: 5px;*/
}

.pga-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.pga-modal {
    position: fixed;  
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); 
    display: none;  
    justify-content: center;
    align-items: center;
    z-index: 50;  
}

    .pga-modal:not(.hidden) {
        display: flex;
    }

.pga-modal-content {
    background-color: #fff;
    border-radius: 0.5rem; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);  
    max-height: 90vh;
    overflow-y: auto;
    width: 90%;  
    /*max-width: 850px;  */
}
.merchandizeZone {
    display: none;
}
.NewEntityDialog label {
    margin: 0 !important;
}
.parts-search-button {
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    margin-right: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.parts-search-button:hover {
    background-color: #f0f0f0;
}

#BulkSteelAluminumUpdateDialog label{
    width: 200px !important;
}

.linkWalkMeSpacer {
    margin-left: 20px;
}
.field-error {
    border: 2px solid #e74c3c !important;
    background-color: #fdf2f2 !important;
}
/* ============================================================================
   #20384 - Flag menu: vertical action list
   ----------------------------------------------------------------------------
   The panel is the <ul> that DashboardMenus resolves through the 'flag-menu'
   registration (panel: function ($trigger) { return $trigger.children('ul'); }).
   `display` belongs to the module: `.nav2 li ul` starts it as none and
   fadeIn()/hide() toggle it inline, so NOTHING here may set display on
   .flagMenuPanel. `top`/`bottom` belong to PositionRowMenuPanel, which flips the
   panel above the trigger when it would overflow the viewport bottom - so this
   block only sets `right` for horizontal anchoring.

   Every action row is `div.thumbn.flagMenuRow` wrapping an <a> and a sibling
   <div>, both carrying the legacy behavior class. That shape is required by
   Init.js/DesktopEvents.js selectors and by items: '.thumbn a' /
   closeOnSelect: '.thumbn'; see BuildTransactionStatusMenu in DashboardHub.cs.
   ============================================================================ */

.nav2 .flagMenuPanel {
    width: 320px;
    right: -8px;
    margin: 8px 0 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(20, 40, 80, .18);
    font-family: 'Open Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
    color: #1f2733;
    text-align: left;
    overflow: visible;
}

.nav2 .flagMenuPanel .flagMenuCaret {
    position: absolute;
    top: -7px;
    right: 19px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-left: 1px solid #e3e8ef;
    border-top: 1px solid #e3e8ef;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* #20385: added by PositionFlagMenuPanel when the panel opens ABOVE its trigger, moving the caret
   to the bottom edge to point down. Its horizontal position is set inline there. */
.nav2 .flagMenuPanel.flagMenuPanelFlipped .flagMenuCaret {
    top: auto;
    bottom: -7px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid #e3e8ef;
    border-bottom: 1px solid #e3e8ef;
}

/* Side-anchored panel (the row menu): the caret sits on the LEFT edge pointing at the
   trigger beside it. left/top are set inline by PositionFlagMenuPanel; only the border
   pair changes here - left+bottom is the pair that forms the left-pointing tip once the
   square is rotated 45deg. */
.nav2 .flagMenuPanel.flagMenuPanelSide .flagMenuCaret {
    border-top: 0;
    border-right: 0;
    border-left: 1px solid #e3e8ef;
    border-bottom: 1px solid #e3e8ef;
}

/* ----------------------------------------------------------------------------
   #20385 - Flag menu header: status pill + transaction reference

   The <li> trigger carries an inline `color:#fff` that inherits in, so every
   piece of header text sets its own colour. `gap` is avoided (no flexbox-gap in
   the older browsers this still runs on); spacing is margin. The reference is
   the only shrinkable item - the pill is 0 0 auto and the reference gets
   min-width:0 so the ellipsis engages instead of widening the 320px panel.
   ---------------------------------------------------------------------------- */

.nav2 .flagMenuPanel .flagMenuHeader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 13px 14px;
    border-bottom: 1px solid #eef1f6;
}

.nav2 .flagMenuPanel .flagMenuStatusPill {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
}

.nav2 .flagMenuPanel .flagMenuStatusDot {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
}

.nav2 .flagMenuPanel .flagMenuStatusLabel {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    white-space: nowrap;
}

.nav2 .flagMenuPanel .flagMenuStatusAccepted {
    background: #e7f6ee;
    color: #0f7a3d;
}

.nav2 .flagMenuPanel .flagMenuStatusAccepted .flagMenuStatusDot {
    background: #1f9d57;
    box-shadow: 0 0 0 3px rgba(31, 157, 87, .18);
}

.nav2 .flagMenuPanel .flagMenuStatusRejected {
    background: #fdeaea;
    color: #b23333;
}

.nav2 .flagMenuPanel .flagMenuStatusRejected .flagMenuStatusDot {
    background: #d64949;
    box-shadow: 0 0 0 3px rgba(214, 73, 73, .18);
}

.nav2 .flagMenuPanel .flagMenuStatusPending {
    background: #fdf3e0;
    color: #9a6a15;
}

.nav2 .flagMenuPanel .flagMenuStatusPending .flagMenuStatusDot {
    background: #e0a325;
    box-shadow: 0 0 0 3px rgba(224, 163, 37, .20);
}

/* Fifth state: blue-status.png, not covered by the ticket's four. Labelled "Delivery Set" - blue
   is the Update Flag colour carrying a Delivery Date, though the persisted value is the string
   CANCELLED. See FlagMenuHeader. Tokens from the design's blue swatch.
   #20386 decoupled the pill from the flag colour, so no CBP status reaches this state any more and
   nothing emits this class today. It survives as the guard described on FlagMenuHeader's blue case
   and should be deleted together with it, not on its own. */
.nav2 .flagMenuPanel .flagMenuStatusDelivery {
    background: #eaf1fc;
    color: #1c5aa8;
}

.nav2 .flagMenuPanel .flagMenuStatusDelivery .flagMenuStatusDot {
    background: #2f6fd0;
    box-shadow: 0 0 0 3px rgba(47, 111, 208, .18);
}

.nav2 .flagMenuPanel .flagMenuStatusNotSubmitted {
    background: #eef1f6;
    color: #5c6a7a;
}

.nav2 .flagMenuPanel .flagMenuStatusNotSubmitted .flagMenuStatusDot {
    background: #c2ccd8;
    box-shadow: 0 0 0 3px rgba(140, 150, 165, .18);
}

.nav2 .flagMenuPanel .flagMenuTransRef {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    color: #9aa5b3;
}

.nav2 .flagMenuPanel .flagMenu {
    padding: 5px;
}

/* float:none / width:auto undo the floated 100px tile the pre-20384 markup used;
   min-height is the 44px touch target #20219 established for dashboard menus. */
.nav2 .flagMenuPanel .flagMenuRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    float: none;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 8px;
    cursor: pointer;
}

.nav2 .flagMenuPanel .flagMenuRow:hover {
    background: #f2f6fc;
}

/* `.nav2 li:hover a { background-color: Gray; color: #fff }` predates this menu and
   would grey out every glyph while the trigger is hovered - which is always, since
   the panel lives inside the trigger. These two selectors outrank it. */
.nav2 .flagMenuPanel .flagMenuGlyph,
.nav2 li:hover .flagMenuPanel .flagMenuGlyph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0 0 0 9px;
    padding: 0;
    border-radius: 6px;
    background-color: #eaf1fc;
    color: #1e6fd6;
    line-height: 0;
    text-decoration: none;
}

/* The body carries the row's legacy behavior class, and some of those are styled as
   grid links elsewhere (`.shipment-row` in Desktop.Master is blue + underlined). The
   pre-20384 markup killed that with an inline style; text-decoration propagates from
   this box and cannot be undone by .flagMenuLabel, so it has to be reset here. */
.nav2 .flagMenuPanel .flagMenuBody {
    /* #20386: flex so Update Flag's chevron can sit at the right edge INSIDE the body. The
       chevron has to be a child of the body rather than a third child of the row, because the
       body is the element carrying the row's behavior class - see FlagMenuRow. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    padding: 5px 10px;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
}

.nav2 .flagMenuPanel .flagMenuLabel {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2733;
    line-height: 1.25;
}

/* Group rules are pseudo-elements, not sibling divs: on the Removed dashboard Init.js hides
   the Remove row with visibility:hidden, and a separate element would survive that and leave
   a divider with nothing under it. A ::before inherits the hidden visibility. The action
   descriptions are the row's `title` (hover tooltip) since the design feedback on Cert, so
   there is no .flagMenuDesc rule any more. */
.nav2 .flagMenuPanel .flagMenuRowGroupStart {
    position: relative;
    margin-top: 11px;
}

.nav2 .flagMenuPanel .flagMenuRowGroupStart::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 9px;
    right: 9px;
    height: 1px;
    background: #eef1f6;
}

.nav2 .flagMenuPanel .flagMenuRowDestructive:hover {
    background: #fdeeee;
}

.nav2 .flagMenuPanel .flagMenuRowDestructive .flagMenuGlyph,
.nav2 li:hover .flagMenuPanel .flagMenuRowDestructive .flagMenuGlyph {
    background-color: #fdeaea;
    color: #d64949;
}

.nav2 .flagMenuPanel .flagMenuRowDestructive .flagMenuLabel {
    color: #c0392b;
}

/* The focus ring from #20217 (.nav2 div.thumbn:focus-within) lands on the row;
   match the row's corner radius so it traces the highlight. */
.nav2 .flagMenuPanel .flagMenuRow:focus-within {
    border-radius: 8px;
}

/* ===================================================================
   #20386 - Update Flag inline colour picker.

   The panel's markup is built in Init.js (BuildFlagColorPanel) and injected on first expand,
   NOT emitted by DashboardHub like the rest of this menu: it is ~1.5KB of identical markup and
   the dashboard renders up to six flag menus per grid row, so shipping it per cell would add
   hundreds of KB and thousands of hidden buttons to a grid that already carries 3-5KB of menu
   per cell. Only the current colour ships from the server, as data-flag-color on the row.
   =================================================================== */
.nav2 .flagMenuPanel .flagMenuChevron {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 8px;
    color: #b6bfcb;
    line-height: 0;
}

/* Rotating the chevron is safe here even though a transform on any ancestor of the panel would
   break its position:fixed (see PositionFlagMenuPanel) - this one is on a descendant. */
.nav2 .flagMenuPanel .flagMenuRowExpanded .flagMenuChevron {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.nav2 .flagMenuPanel .flagMenuColorPanel {
    margin: 2px 6px 6px;
    padding: 10px;
    background: #f7f9fc;
    border: 1px solid #eef1f6;
    border-radius: 9px;
}

.nav2 .flagMenuPanel .flagMenuColorTitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #8a95a3;
    margin-bottom: 3px;
}

.nav2 .flagMenuPanel .flagMenuColorHint {
    font-size: 11px;
    color: #8a95a3;
    line-height: 1.35;
    margin-bottom: 9px;
}

/* Two columns via flex-wrap + calc, not `display:grid`: this sheet still ships -ms-flexbox
   prefixes for IE11 / old Edge, where CSS grid is only the 2011 -ms- syntax and the swatches
   would stack into a single column. */
.nav2 .flagMenuPanel .flagMenuColorGrid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -3px;
}

.nav2 .flagMenuPanel .flagMenuSwatch {
    /* all.css has no global border-box, so without this the two calc(50%) columns overflow the
       panel by their own padding and border. */
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(50% - 6px);
    min-height: 44px; /* the #20219 dashboard touch target, same as the action rows */
    margin: 3px;
    padding: 6px 9px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.nav2 .flagMenuPanel .flagMenuSwatch:hover {
    border-color: #cfe0f8;
}

/* Selected = the colour currently on the flag. Pending = blue clicked but not yet confirmed,
   because blue needs its delivery date first. */
.nav2 .flagMenuPanel .flagMenuSwatchSelected,
.nav2 .flagMenuPanel .flagMenuSwatchPending {
    border-color: #1e6fd6;
}

.nav2 .flagMenuPanel .flagMenuSwatchPending {
    box-shadow: 0 0 0 2px rgba(30, 111, 214, .12);
}

.nav2 .flagMenuPanel .flagMenuSwatchDot {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.nav2 .flagMenuPanel .flagMenuSwatchLabel {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #3a4656;
}

.nav2 .flagMenuPanel .flagMenuSwatchCheck {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    color: #1e6fd6;
    line-height: 0;
}

/* Blue is the only colour that carries data with it: it is the flag that reveals a Delivery
   Date (setDeliveryDateVisibility in the pre-20386 dialog -> ImportsObj.SetDeliveryDate), and
   no other screen in the app sets one. So blue confirms through this row instead of applying
   on the first click like the other four. */
.nav2 .flagMenuPanel .flagMenuDeliveryRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* Explicit nowrap: label, field and Apply stay on ONE line, always. The label is the only
       item allowed to give (flex-shrink on it, fixed widths on the other two), so a wider font
       or a longer translation ellipsises the label instead of dropping Apply to a second line
       or pushing it outside the panel. */
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eef1f6;
}

.nav2 .flagMenuPanel .flagMenuDeliveryLabel {
    /* The one item that shrinks, and the only one without a fixed width. width:auto and the
       margin/padding reset are deliberate: this <label> sits inside .nav2, where legacy form
       rules are free to give labels a width, and one of them was padding this out and forcing
       the row to wrap. */
    -webkit-box-flex: 1;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 700;
    color: #8a95a3;
}

.nav2 .flagMenuPanel input.flagMenuDeliveryDate {
    box-sizing: border-box;
    /* Fixed, not `flex: 1 1 auto`: stretching the input to fill the row pushed Apply past the
       panel's edge. 92px is mm/dd/yyyy plus its padding, and the slack is left after Apply. */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 92px;
    min-height: 34px;
    margin: 0 6px 0 8px;
    padding: 4px 7px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    font-size: 12px;
    color: #3a4656;
}

.nav2 .flagMenuPanel .flagMenuDeliveryApply {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 5px 10px;
    white-space: nowrap;
    background: #1e6fd6;
    border: 1px solid #1e6fd6;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.nav2 .flagMenuPanel .flagMenuDeliveryApply:hover {
    background: #1a62bd;
}

/* ===================================================================
   #20387 - Row menu (the hamburger cell), rebuilt on the flag menu's classes.
   The panel IS a .flagMenuPanel - that class routes it through
   PositionFlagMenuPanel and the #20384 row styling. Only the deltas live here.
   =================================================================== */

.nav2 .flagMenuPanel.rowMenuPanel {
    width: 248px;
}

/* The header holds only the invoice reference, left-aligned (the "Shipment Actions"
   title was dropped by design). The base .flagMenuTransRef margin-left spaced it off
   the flag menu's status pill; alone, it would just indent the text. */
.nav2 .rowMenuPanel .flagMenuTransRef {
    margin-left: 0;
}

/* Show/Hide keep the legacy reveal (ApplyRowSettings strips the class). The bare global
   .showDashboardOption { display:none } loses to .flagMenuRow { display:flex } on
   specificity, so the hiding is restated at row specificity. */
.nav2 .flagMenuPanel .flagMenuRow.showDashboardOption,
.nav2 .flagMenuPanel .flagMenuRow.hideDashboardOption {
    display: none;
}

/* Archived rows disable the ANCHOR (Desktop.Master); the body dims with it, and the click
   forwarder in Init.js refuses disabled anchors so it is inert too. */
.transactionMenuHTMLContainer .flagMenuRow a.disabled + .flagMenuBody,
.transactionMenuHTMLContainer .flagMenuRow a.archived-disabled + .flagMenuBody {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ===================================================================
   #20388 - contextual availability. An option that cannot succeed in the
   row's current state stays in place but renders disabled. The class sits
   on the ROW - emitted by DashboardHub (flag menu, at render) or toggled
   by ApplyRowMenuAvailability (row menu, at open). pointer-events dies on
   the anchor and the body, so a real click lands on the row itself, which
   carries no behavior class and is excluded from closeOnSelect: the click
   does nothing and the menu stays open. Keyboard activation is refused by
   DashboardMenus' aria-disabled guard, so the anchor stays focusable and
   arrow-reachable - the row's title (the reason) and the anchor's
   aria-label are how "why not" reaches hover and AT respectively.
   =================================================================== */
.nav2 .flagMenuPanel .flagMenuRowUnavailable,
.nav2 .flagMenuPanel .flagMenuRowUnavailable:hover {
    background: none;
    cursor: not-allowed;
}

.nav2 .flagMenuPanel .flagMenuRowUnavailable .flagMenuGlyph,
.nav2 li:hover .flagMenuPanel .flagMenuRowUnavailable .flagMenuGlyph,
.nav2 .flagMenuPanel .flagMenuRowUnavailable .flagMenuBody {
    pointer-events: none;
    opacity: 0.45;
}

/* Muted icon and label. The destructive red must not survive disabling either -
   a red "Remove" that cannot act reads as a live warning, not a dead action -
   so the destructive compounds are restated here at higher specificity. */
.nav2 .flagMenuPanel .flagMenuRowUnavailable .flagMenuGlyph,
.nav2 li:hover .flagMenuPanel .flagMenuRowUnavailable .flagMenuGlyph,
.nav2 .flagMenuPanel .flagMenuRowDestructive.flagMenuRowUnavailable .flagMenuGlyph,
.nav2 li:hover .flagMenuPanel .flagMenuRowDestructive.flagMenuRowUnavailable .flagMenuGlyph {
    background-color: #eef1f5;
    color: #8a94a3;
}

.nav2 .flagMenuPanel .flagMenuRowUnavailable .flagMenuLabel,
.nav2 .flagMenuPanel .flagMenuRowDestructive.flagMenuRowUnavailable .flagMenuLabel {
    color: #8a94a3;
}

/* The design's trailing "unavailable" text. Inside the body so it dims with it. */
.nav2 .flagMenuPanel .flagMenuUnavailableTag {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 8px;
    color: #9aa5b3;
    font-size: 10.5px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.4;
    white-space: nowrap;
}

/* ===================================================================
   Menu compaction + scroll region (design update, shipped with #20387
   instead of its own PBI). The compaction applies to BOTH redesigned menus
   (flag + row) - same specificity as the base rules above, later in the
   file, so source order decides. Note: 32px rows supersede the 44px touch
   target #20387's AC originally asked for, per the design update.
   =================================================================== */

.nav2 .flagMenuPanel .flagMenuRow {
    min-height: 32px;
}

.nav2 .flagMenuPanel .flagMenuGlyph,
.nav2 li:hover .flagMenuPanel .flagMenuGlyph {
    width: 22px;
    height: 22px;
}

.nav2 .flagMenuPanel .flagMenuBody {
    padding: 3px 10px;
}

.nav2 .flagMenuPanel .flagMenuHeader {
    padding: 9px 14px;
}

.nav2 .flagMenuPanel .flagMenuRowGroupStart {
    margin-top: 7px;
}

.nav2 .flagMenuPanel .flagMenuRowGroupStart::before {
    top: -4px;
}

/* Static cap so long FLAG menus scroll even on tall viewports; the header sits
   outside .flagMenu, so it stays pinned and only the actions scroll. Deliberately
   NOT applied to the row menu: compacted it stands ~460px tall, so a 380px cap
   would make it scroll always, everywhere - its approved design shows the full
   list, and short screens are handled by PositionFlagMenuPanel's dynamic clamp.
   Composes with that clamp: it writes an INLINE max-height, which outranks this
   when the screen is shorter than the cap, and its reset only clears inline
   styles, so the cap survives reopen. Double max-height because IE11 has no
   min(); it takes the 380px line and skips the next. */
.transactionMenuStatusHTMLContainer .nav2 .flagMenuPanel .flagMenu {
    max-height: 380px;
    max-height: min(58vh, 380px);
    overflow-y: auto;
}

/* Desktop.Master hides every webkit scrollbar on the page (::-webkit-scrollbar
   { width: 0 }), which is why a clamped menu was unusable without a wheel.
   Restore a visible, drag-friendly bar for BOTH menus: 11px wide, thumb at
   least 36px. Inert while nothing overflows; the row menu grows one when the
   dynamic clamp kicks in on short screens.
   No scrollbar-color/scrollbar-width alongside these: in Chromium >= 121 a
   non-auto scrollbar-color disables ::-webkit-scrollbar-* styling entirely.
   Firefox (unaffected by the global width:0) keeps its default scrollbar. */
.nav2 .flagMenuPanel .flagMenu::-webkit-scrollbar {
    width: 11px;
}

.nav2 .flagMenuPanel .flagMenu::-webkit-scrollbar-track {
    /* display:block because Desktop.Master's global ::-webkit-scrollbar-track is display:none */
    display: block;
    background: #f1f4f8;
    border-radius: 8px;
}

.nav2 .flagMenuPanel .flagMenu::-webkit-scrollbar-thumb {
    background: #c2ccd8;
    border-radius: 8px;
    min-height: 36px;
    border: 2px solid #f1f4f8;
}

.nav2 .flagMenuPanel .flagMenu::-webkit-scrollbar-thumb:hover {
    background: #9aa5b3;
}