/* DEFAULTS
----------------------------------------------------------*/

body {
    background: url("images/gradient_body.png") repeat-x scroll 0 0 #137FA1;
    font-size: 12px;
    font-family: 'Segoe UI',Verdana,Arial, Helvetica, Verdana;
    margin: 0px;
    padding: 0px;
    color: #000000;
    height: 100%;
}

.controlbody {
    background-image: none;
    background-color: White;
    height: 100%;
}

input, select, textarea {
    font-size: 12px;
    font-family: 'Segoe UI',Verdana,Arial, Helvetica, Verdana;
}

th.header {
    height: auto;
    text-align: left;
    cursor: pointer;
    color: #fff;
}

th.headerSortDown {
    padding-right: 20px;
    background: url(images/desc.gif) no-repeat center right;
}

th.headerSortUp {
    padding-right: 20px;
    background: url(images/asc.gif) no-repeat center right;
}

tbody td.edit {
    height: 20px;
}

    tbody td.edit input, tbody td.edit select {
        width: 99%;
    }

/* ---- Page Layout --*/
.pgloading {
    margin: auto;
    background: white url("images/pgloading.gif") no-repeat center center;
    width: 320px;
    height: 320px;
}

.page {
    min-width: 950px;
    /*width: 98%;*/
    margin: auto;
}

/* ---- Header and Logo --*/
.header {
    clear: both;
    height: 50px;
}

.logo {
    background: transparent url("images/DSG_PVX_Logo_Blue_Text_Crop.png") no-repeat;
    background-size: 174px;
    width: 300px;
    height: 50px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
}

.headerRight {
    width: 600px;
    height: 50px;
    float: right;
    text-align: right;
    padding-top: 10px;
}

    .headerRight a {
        text-decoration: none;
        color: Black;
        padding-left: 20px;
    }

    .headerRight span {
        color: Black;
        padding-left: 20px;
    }

    .headerRight a:hover {
        text-decoration: underline;
    }

/* ---- Tabs --*/
.tab td {
    white-space: nowrap;
}

    .tab td div {
        color: #4B4B57;
        max-height: 15px;
        padding: 7px 10px;
    }

.tab a {
    color: #353535;
    text-decoration: none;
}

.tabber {
    border-bottom: 3px solid #18294A;
    clear: both;
}

/* ---- Selected Tab --*/
.currentTab {
    background-color: #18294A;
    border: 2px solid #18294A;
    border-bottom: none;
}

    .currentTab a {
        color: #fff;
    }

/* ---- Main Contents --*/
.main {
    clear: both;
    height: 100%;
    position: relative;
    background: white;
}

/* --- Footer ------ */
.footer {
    margin-top: 15px;
    margin-right: 10px;
    color: White;
    font-size: 11px;
    text-align: right;
}

    .footer .left {
        float: left;
    }

.clear {
    clear: both;
}

.clearsplit {
    clear: both;
    height: 10px;
}

.workarea {
    clear: both;
    position: relative;
}

.asyncLoading, .ajaxLoading {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    line-height: 100%;
    vertical-align: middle;
    text-align: center;
    opacity: 0.7;
    filter: alpha(opacity=70);
    background: white url("images/loading.gif") no-repeat center center;
}


.asyncCircleLoading {
    background: white url("images/loading.gif") no-repeat center center;
    width: 200px;
    height: 100px;
    vertical-align: middle;
    text-align: center;
    opacity: 0.7;
}

.controlbody .asyncLoading, .ajaxLoading {
    position: fixed;
}

.confirmList {
    width: 100%;
    height: 120px;
    overflow: auto;
}

/***** Page - Split ******/
.SplitPage {
    clear: both;
}

.SplitLeft {
    width: 48%;
    float: left;
}

.SplitRight {
    border-left: 1px solid gray;
    width: 49.5%;
    float: right;
}

/***** Form Fields ****/
.loginForm {
    margin-left: 20px;
}

/*
extraNotification -> anything other than required validation
*/
.failureNotification, .validationNotes, .extraNotification {
    font-size: 11px;
    color: Red;
}

fieldset {
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

    fieldset p {
        margin: 2px 12px 10px 10px;
    }

    fieldset label {
        display: block;
    }

        fieldset label.inline {
            display: inline;
        }

legend {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry {
    width: 320px;
    border: 1px solid #ccc;
}


input.passwordEntry {
    width: 320px;
    border: 1px solid #ccc;
}

.submitButton {
    text-align: right;
    padding-right: 10px;
}

/********* search control ******/
.searchArea, .kittingSearchArea {
    float: left;
    width: 200px;
    margin-top: 6px;
    overflow: auto;
    height: 100%;
}

.searchAreaHidden {
    width: 0px;
}

.searchFirstTab {
    margin-left: 6px;
}

.searchTab {
    cursor: pointer;
    margin-top: 4px;
    padding: 6px;
    font-size: 11px;
    border: 1px solid #137FA1;
    margin-right: 2px;
    /*-moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
    border-bottom: none;
    float: left;
    background: #E8E8E8; /*url("images/header.png") repeat-x top left;*/
    zoom: 1;
}

.searchSelectedTab {
    background-color: #137FA1;
    font-weight: bold;
    color: #fff;
}

.search, .editTab {
    position: relative;
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
    border-top: 3px solid #137FA1;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    padding: 3px;
    margin-left: 3px;
    margin-right: 5px;
    margin-top: 0px;
    zoom: 1;
}

    .search h5 {
        background: #137FA1; /*url("images/header.png") repeat-x top left*/
        color: #fff;
        margin: -3px;
        margin-bottom: 5px;
        padding: 3px;
        height: 16px;
    }

.searchArea .search label {
    display: block;
}

.searchArea label.placeHolderLabel {
    display: none;
}

.searchArea .search .inline label {
    display: inline;
}

.search input[type='text'], .search select {
    width: 96%;
}

.searchArea .search .inline {
    padding-top: 10px;
    padding-bottom: 10px; /*padding-right:10px;*/
    text-align: right;
}

.inline *, .search .inline * {
    display: inline;
}

.searchArea .search .small, .searchArea .search .small input[type='button'] {
    font-size: 10px;
}

.searchArea .search .inputAndButton input[type='text'] {
    width: 75%;
}

.searchArea .search .inputAndButton input[type='button'] {
    width: 18%;
}

.searchBuilderArea .inline {
    display: block;
    text-align: right;
}

.searchBuilderArea .searchList {
    width: 99%;
    height: 250px;
}

.searchBuilderArea .searchPart {
    display: block;
    float: left;
    width: 33%;
}

.searchBuilderArea .placeHolderLabel {
    display: block;
}

.savedMenuItem, .recentMenuItem {
    padding-left: 5px;
    zoom: 1;
}

    .savedMenuItem li, .recentMenuItem li {
        list-style: none;
        margin-bottom: 3px;
        background: transparent url("images/list_style.gif") no-repeat left center;
        padding-left: 20px;
        line-height: 20px;
        vertical-align: middle;
        cursor: pointer;
    }

        .recentMenuItem li a, .savedMenuItem li a {
            color: Black;
            text-decoration: none;
        }

        .savedMenuItem li:hover, .recentMenuItem li:hover {
            text-decoration: underline;
        }

        .savedMenuItem li .savedSearchItem, .rptTreeNode span .savedSearchItem {
            float: right;
            width: 14px;
            height: 14px;
            background: transparent url("images/close_icon.png") no-repeat center center;
            display: none;
        }

        .savedMenuItem li:hover .savedSearchItem, .rptTreeNode span:hover .savedSearchItem {
            display: block;
        }

.rptTreeNode span:hover a {
    text-decoration: underline;
}
/******* Error Screens *********/
.maintenance {
    position: relative;
    background: #FFA319; /*url("images/header.png") repeat-x top left;*/
    /*border: 2px outset #FF5F32;*/
    padding-top: 10px;
    padding-left: 10px;
    color: white;
    margin: auto;
    width: 99%;
    z-index: 999999;
    font: bold;
    text-align: center;
}

.redAlert .ui-dialog-content {
    background: #FF5F32;
    font-weight: bold;
    color: white;
}

.errorDisplay {
    position: relative;
    background: #FF5F32; /*url("images/header.png") repeat-x top left;*/
    /*border: 2px outset #FF5F32;*/
    padding-top: 10px;
    padding-left: 10px;
    color: white;
    margin: auto;
    width: 99%;
    z-index: 999999;
    top: 0px;
    left: 0px;
    width: 99%;
    max-height: 80px;
    overflow: auto;
    /*-moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;
    border-radius-bottomright: 10px;*/
}

.pageErrorDisplay {
    background: #EFEFEF; /*url("images/header.png") repeat-x top left;*/
    /*border: 2px outset #EFEFEF;*/
    text-align: center;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    width: 500px;
    margin: auto;
}

.errorTitle {
    margin: 0px;
    font-weight: bold;
    font-size: 14px;
}

.errorMessage {
    font-weight: bold;
}

.errorDesc {
    font-size: small;
}

.errorButtons {
    position: absolute;
    right: 5px;
    top: 5px;
}

.pageErrorButtons {
    float: right;
    margin: 5px;
}

/******** Dashboard Area *******/

.dashboardArea {
    float: left;
    width: 94%;
    overflow: auto;
    height: 100%;
}

/******** Grid Area *******/
.gridArea {
    float: left;
    width: 500px;
    overflow: auto;
    height: 100%;
    padding-left: 5px;
}

.rptArea {
    float: left;
    width: 1084px;
}

.grid {
    border: 1px solid #EAEAEA;
    width: 100%;
    border-collapse: collapse;
}

    .grid td, .grid th {
        border: 1px solid #EAEAEA;
        vertical-align: middle;
    }

.gridTitle {
    /*TODO: convince jonny to have icons*/ /*background:white url("images/heart.png") no-repeat left center;     padding-left: 40px;*/
    height: 32px;
    padding-left: 5px;
    line-height: 32px;
    vertical-align: middle;
    margin-bottom: 5px;
    clear: both;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.gridTitle h2 {
    margin: 0px;
    white-space: nowrap;
}

.girdCommands {
    float: right;
}

.gridTitle .girdCommands {
    float: none;
}

.gridTitle .girdCommands,
.gridTitle .girdCommands > div,
.gridTitle .girdCommands > div > span,
.gridTitle .girdCommands > span {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
}

.gridTitle .girdCommands > div > span > label {
    white-space: nowrap;
}

.girdCommands .exporter, .reportFilterButton, .swapButton {
    font-size: 9px;
    margin: 0;
    padding: 0;
}

.gridContainer {
    position: relative;
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
    border-top: 3px solid #029ddd;
    /*-moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;*/
}

.gridArea .gridContainer {
}

.gridContainer h4 {
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 3px;
}

.gridHeader {
    /*background: #137FA1; /*url("images/header.png") repeat-x top left;*/
    background-color: #137FA1 !important;
    font-size: 12px;
    font-weight: bold;
    color: white;
    height: 28px;
}

.gridHeaderColor {
    background-color: #137FA1;
}

.grid tbody tr {
    font-size: 12px;
    background-color: White;
    cursor: pointer;
    color: WindowText;
}

    .grid tbody tr:nth-child(even) {
        background-color: #E5F5FB;
        color: WindowText;
    }

    .grid tbody tr:hover {
        background-color: #18294A;
        color: #fff;
    }

        .grid tbody tr:hover input[type=text], .grid tbody tr:hover textarea {
            background-color: transparent;
            color: #fff;
        }

.gridFooter {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #EAEAEA;
    /*background: transparent url("images/header.png") repeat-x top left;*/
    height: 25px;
}

    .gridFooter select {
        font-size: 11px;
        border: 1px solid #EAEAEA;
        background-color: transparent;
        width: 100px;
    }

    .gridFooter input[type='button'] {
        font-size: 11px;
    }

/******** editing *****/
.editArea {
    /*float:left; */
    width: 500px;
    margin-left: 5px;
    display: none;
}

.editAreaVisible {
    width: 500px;
    margin-left: 5px;
    display: block;
}

.bottomSeparatorField {
    padding-bottom: 10px;
}

.editTitle {
    /*TODO: convince jonny to have icons*/ /*background:white url("images/edit.png") no-repeat left center;     padding-left: 40px;*/
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    margin-bottom: 5px;
}

    .editTitle h2 {
        margin: 0px;
        float: left;
    }

    .editTitle .editCommands {
        float: right;
    }

.editContainer {
    position: relative;
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
    /*border-top: 3px solid #029ddd;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;*/
}

    .editContainer h5 {
        background: #029ddd; /*url("images/header.png") repeat-x top left;*/
        margin: -5px;
        margin-bottom: 5px;
        padding: 3px;
        height: 16px;
    }

.readonly h5 a {
    display: none;
}

.fields {
    clear: both;
    font-size: 12px;
    font-family: 'Segoe UI',Verdana,Arial, Helvetica, Verdana;
}

    .fields div {
        /*clear:both;*/
        margin-top: 5px;
        margin-bottom: 2px;
    }

    .fields label {
        float: left;
        width: 120px;
        height: 18px;
        text-align: right;
    }

    .fields.wider label {
        width: 130px;
        padding-right: 5px;
    }

.closeButton {
    position: absolute;
    right: 0px;
    top: 0px;
}

.fields input[type='text'], .fields input[type='password'], .fields textarea, .controlContainer {
    width: 350px;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-family: 'Segoe UI',Verdana,Arial, Helvetica, Verdana;
}

.fields input[type='text'], .fields input[type='password'] {
    height: 18px;
}

.fields .textWithButton input[type='text'] {
    width: 245px;
}

.fields .textWithButton .hideOnDisable[disabled] {
    display: none;
}

.fields .textWithButton input[type='button'] {
    width: 100px;
    font-size: 11px;
    margin-left: 5px;
}

.fields .nextLineButton input[type='button'] {
    font-size: 11px;
    margin-left: 120px;
    display: block;
}


.fields input[readonly] {
    border: none;
    color: Gray;
}

.fields .notesEntry {
    width: 470px;
}

.fields div.Bigger {
    height: 40px;
}

    .fields div.Bigger input {
        margin-top: 15px;
    }

/****Small fields ****/
.smallfields label {
    float: left;
    width: 110px;
    height: 18px;
    text-align: right;
}

.smallfields input[type='text'], .smallfields input[type='password'], .smallfields textarea {
    width: 190px;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-family: 'Segoe UI',Verdana,Arial, Helvetica, Verdana;
}

.smallfields input[type='text'], .smallfields input[type='password'] {
    height: 18px;
}

.smallfields .textWithButton input[type='text'] {
    width: 115px;
}

.smallfields .textWithButton input[type='button'] {
    width: 70px;
    font-size: 11px;
    margin-left: 5px;
}

.smallfields .nextLineButton input[type='button'] {
    font-size: 11px;
    margin-left: 110px;
    display: block;
}
/****end of small fields ****/

.controlContainer {
    background-color: white;
    position: relative;
    height: 200px;
    margin-left: 100px;
    overflow: auto;
    border: 1px solid gray;
}

    .controlContainer label {
        float: none;
    }

.buttonPanel, .wizardPage .wpageBottom {
    padding-top: -5px;
    border-top: 1px solid #EAEAEA;
    /*background: transparent url("images/header.png") repeat-x top left;*/
    text-align: right;
}

.wizardPage .buttonPanel {
    margin-left: -12px;
}

.wizardPage .hideInWizard {
    display: none;
}

.buttonPanelLeftFloat {
    float: left;
}

.readonly input[disabled], .readonly select, .readonly textarea {
    border: none;
    background-color: transparent;
    color: Black;
}

.readonly .savePanel {
    display: none;
}

.hidden {
    display: none; /*stupid IE fix*/
}

input[type=submit].hidden {
    display: none; /*stupid IE fix*/
    height: 0;
    border: none;
    width: 0;
    padding: 0;
    margin: 0;
}

.modalBackground {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: white;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

/******** buttons ****/
.smallButton, .deleteButton, .addButton, .headerButton {
    padding: 0;
    line-height: 16px;
    margin: 0;
    text-align: center;
    vertical-align: top;
    width: 30px; /*height:16px;*/
    font-weight: bolder;
    font-size: 11px;
}

.deleteButton {
    color: Red;
    position: absolute;
    right: 0px;
    top: 0px;
}

    .deleteButton[disabled] {
        display: none;
    }

.addButton, .headerButton {
    float: right;
    width: 100px;
}

    .addButton[disabled] {
        display: none;
    }



/******** Addredd Entry Control ******/
.addressEntry, .addressEntryLarge, .locationEntry {
    position: relative;
    padding-top: 25px;
    margin-left: 5px;
    margin-bottom: 8px; /*float:left;     width:210px;*/
    width: 450px;
    background-color: #FeFeFe;
    border: 1px solid #EAEAEA;
    border-top: 2px solid #D9D9D9;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
}

.addressEntryLarge {
    /*border:1px solid #4DA3F9;*/
}

    .addressEntry label, .addressEntryLarge label {
        font-size: 12px;
        float: left;
        width: 120px;
        text-align: right;
        height: 18px;
    }

    .addressEntryLarge label {
        margin-left: 5px;
    }

    .addressEntry input[type='text'], .addressEntry select, .addressEntryLarge input[type='text'], .addressEntryLarge select {
        font-size: 12px;
        width: 300px;
        height: 18px;
        margin: 0;
        padding: 0;
    }

/*********** wizard *********/

.wizard {
    /*background-color:#FeFeFe;     border:2px solid orange;     -moz-border-radius:5px;     border-radius:5px;     padding:10px;     width:500px;*/
}

.wizardLabels {
    float: left;
    width: 130px;
}

.wizardSmallLabels {
    float: left;
    width: 60px;
    font-size: 11px;
}

.wlabel {
    /*-moz-border-radius-bottomleft: 15px;
    -moz-border-radius-topleft: 15px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;*/
    border: 1px solid #4DA3F9;
    border-right: none;
    background-color: #137FA1;
    color: #fff;
    height: 30px;
    line-height: 19px;
    padding-left: 15px;
    margin-bottom: 2px;
}

.wcomplete {
    background-image: url("images/tick.png");
    background-position: right center;
    background-repeat: no-repeat;
}

.wselected {
    position: relative;
    background-color: #D1E8FF;
    color: #000;
    right: -1px;
    z-index: 1;
}

.wizardContent, .wizardLargeContent {
    float: left;
    width: 500px;
    border: 1px solid #4DA3F9;
    background-color: #D1E8FF;
    position: relative;
}

.wizardLargeContent {
    height: 480px;
    width: 900px;
}

.wizardPage {
    background-color: #D1E8FF;
    display: none;
    padding-left: 12px;
}

    .wizardPage h4 {
        margin: 0;
        margin-bottom: 10px;
    }

.scrollableContainer {
    height: 195px;
    overflow: auto;
    position: relative;
}

.wizardPage .wpageBottom {
    position: absolute;
    bottom: 0px;
    width: 99%;
    right: 0px;
    margin: 5px;
}

/********* tree view ******/
.treeArea {
    border: 1px solid #EAEAEA;
}

    .treeArea .gridHeader {
        padding-left: 5px;
        padding-top: 5px;
        height: 23px;
    }

.treeNodeSelected {
    /*background: #137FA1 url("images/header.png") repeat-x top left;*/
    background-color: #137FA1;
    padding-left: 3px;
}

.treeNode {
    clear: both;
}

.rptTreeNode {
    width: 100%;
}

    .rptTreeNode span {
        display: block;
        width: 100%;
    }

.pBar {
    margin-left: 10px;
    width: 100px;
    float: right;
    position: relative;
    border: 1px solid #18294A;
    height: 20px;
}

.pStatBar {
    height: 100%;
    background: url("start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
}

.pBar .barText {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
}

.treeNode a, .rptTreeNode a {
    color: Black;
    text-decoration: none;
}

    .treeNode a:hover, .rptTreeNode a:hover {
        text-decoration: underline;
    }

.newLocationGrid {
    width: 810px;
    border: 1px solid gray;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    padding: 10px;
}

    .newLocationGrid tbody td input[type='text'] {
        width: 190px;
    }

.locationColumn {
    width: 210px;
    display: inline-block;
}

.newLocationGrid tr th {
    text-align: left;
}

.buttonColumn .deleteButton {
    position: static;
}


/**** Item Type Group Tree *****/
.ItemTypeGroupTabContainer {
    width: 320px;
}

.carrierintegration .searchPart.text {
    height: 50px;
}

.nav {
    padding: 2px;
    text-decoration: none;
    color: Black;
}

.groupTree span, .DTree span {
    text-decoration: underline;
    color: Black;
}

    .groupTree span.selectedNav, .DTree span.selectedNav {
        background-color: Blue;
        color: White;
    }

.treeMoveContainer {
    height: 200px;
    overflow: auto;
    border-bottom: solid 1px gray;
}

.reportScrollerContainer {
    height: 72px;
    overflow: auto;
    border: solid 1px #DCDCDC;
    margin-bottom: 10px;
}

.treeContainer {
    height: 250px;
    overflow: auto;
    zoom: 1;
}

.groupActionButtons input {
    width: 120px;
    margin: 5px;
}

/****** Kittings popup ****/
.kittingSearchArea {
    width: 230px;
    height: 350px;
    overflow: auto;
}

.kittingSourceGrid, .kittingSelectedGrid, .uomSourceGrid, .uomAvailableGrid, .poSourceGrid, .poSelectedGrid {
    margin-top: 35px;
    float: left;
    width: 260px;
    font-size: 12px;
    height: 350px;
    overflow: auto;
    position: relative;
}


.rightColumn .kittingSelectedGrid, .rightColumn .kittingSourceGrid {
    width: 40%;
}

.poSourceGrid {
    width: 350px;
    margin-top: 10px;
}

.poSelectedGrid {
    width: 180px;
    margin-top: 10px;
}

.uomSourceGrid, .uomAvailableGrid {
    width: 350px;
    margin-top: 0px;
}

.kittingButtonColumn, .uomButtonColumn {
    float: left;
    width: 90px;
    margin-top: 60px;
    text-align: center;
}

    .kittingButtonColumn input[type='button'], .uomButtonColumn input[type='button'] {
        margin-top: 10px;
        font-size: 10px;
        width: 80px;
    }

.kittingSelectedGrid input[type='text'] {
    width: 50px;
    text-align: right;
}

.kittingSelectedGrid select {
    width: 50px;
}

.Blinker {
    background-color: #FF5F32;
}

.rightAligned, .grid .NumericTxt, .grid .DecimalTxt, .grid .hasDatepicker {
    text-align: right;
    max-width: 100px;
}

/**** three column divs *****/
.column1of3 {
    width: 310px;
    float: left;
    margin: 5px;
}

    .column1of3 .fields input[type='text'], .column1of3 .fields textarea, .column1of3 .fields select {
        width: 165px;
    }

    .column1of3 .fields .textWithButton input[type='text'] {
        width: 125px;
    }

    .column1of3 .addressEntry {
        width: 285px;
        padding-top: 5px;
    }

        .column1of3 .addressEntry .Bigger {
            height: 30px;
        }

        .column1of3 .addressEntry label {
            width: 100px;
        }

        .column1of3 .addressEntry input[type='text'], .column1of3 .addressEntry select {
            width: 165px;
        }

        .column1of3 .addressEntry .Bigger input[type='text'], .column1of3 .addressEntry .Bigger select {
            margin-top: 10px;
        }

.conversion input[type='text'] {
    width: 100px;
}

.newUomPopup label {
    width: 90px;
}

.newUomPopup input[type='text'] {
    width: 200px;
}

/***** supplier item control ****/
.SupplierItem {
    /*float:left;*/
    width: 300px;
    margin: 5px;
}

.SupplierDetail {
    font-size: 10px; /*height:30px;     overflow:hidden;*/
}

    .SupplierDetail h4 {
        padding: 0px;
        margin: 0px;
        display: inline;
    }

.SupplierItem label {
    font-size: 11px;
    width: 200px;
}

.SupplierItem input[type='text'], .SupplierItem select {
    font-size: 11px;
    width: 60px;
}

.UnselectedSuppliers, .SelectedSuppliers {
    width: 345px;
    float: left;
    position: relative;
}

.SelectedSuppliers {
    position: static;
    margin-left: 10px;
}

    .SelectedSuppliers input[type='button'], .UnselectedSuppliers input[type='button'] {
        font-size: 11px;
    }

.supplierSearch {
    width: 320px;
    height: 50px;
}

    .supplierSearch h5 {
        padding: 0px;
        margin: 0px;
    }

    .supplierSearch label {
        font-size: 11px;
        width: 50px;
    }

    .supplierSearch input[type='text'] {
        font-size: 11px;
        width: 200px;
    }

    .supplierSearch input[type='button'] {
        font-size: 11px;
        width: 30px;
    }

.itemSupplierName {
    clear: both;
}

    .itemSupplierName .selector {
        width: 65px;
        float: right;
        margin: 0px;
        height: 20px;
    }

    .itemSupplierName .supplierId {
        border-right: 1px solid gray;
        float: left;
        width: 50px;
    }

    .itemSupplierName .supplierName {
        padding-left: 5px;
        float: left;
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
    }

.ItemListBox {
    height: 300px;
    overflow: auto;
}

.movingPlaceholder {
    border: 2px dotted #137FA1;
    color: #fff;
    background-color: #137FA1;
    opacity: 0.15;
    filter: alpha(opacity=15);
    position: absolute;
}

    .movingPlaceholder input {
        position: absolute;
        bottom: 0px;
    }

.movingFrame {
    border: 2px dotted green;
    background-color: #137FA1;
    color: #fff;
    opacity: 0.3;
    filter: alpha(opacity=30);
    position: absolute;
    width: 0px;
    height: 0px;
}

.itemListArea {
    position: relative;
    clear: both;
    min-height: 50px;
}

/******** supplier wizartd page ****/
.supplierWizardPage {
    min-height: 250px;
}

/******** sales order popup checkbox  inline separator ****/
.checkboxSeparator {
    display: inline-block;
}

/******* purchase order button panel ***/
.buttonSeperator {
    margin-right: 40px;
}

.poItemsGridButton {
    margin-left: 110px;
    font-size: 10px;
}

.poItemsGrid {
    vertical-align: top;
    height: 222px;
    overflow: auto;
    width: 950px;
}

.holderItemsGrid {
    vertical-align: top;
    height: 260px;
    width: 485px;
    overflow: auto;
}

.searchScrollContainer {
    vertical-align: top;
    height: 375px;
    overflow: auto;
}

/******* reports *******/
span.expand, span.collapse {
    float: right;
    background: transparent url("images/expand.png") no-repeat center right;
    display: block;
    width: 35px;
    height: 15px;
    cursor: pointer;
}

.SupplierItem span.expand, .SupplierItem span.collapse {
    width: 15px;
}

span.collapse {
    background: transparent url("images/collapse.png") no-repeat center right;
}

.reportFrame {
    background-color: darkgray;
    padding: 10px;
    overflow: auto;
    width: 99%;
    /*min-height:300px;*/
}

.reportContent {
    background-color: white;
    margin: auto;
    width: 1200px;
    padding: 20px;
    min-height: 1700px;
    clear: both;
}

    .reportContent table {
        width: 100%;
    }

.reportFilterContents {
    font-size: 11px;
}

.reportFilterColumn {
    float: left;
    width: 210px;
    padding: 5px;
}

    .reportFilterColumn select, .reportFilterColumn input[type='text'] {
        font-size: 11px;
        width: 200px;
    }

        .reportFilterColumn select.minDdl, .reportFilterColumn select.hourDdl {
            font-size: 11px;
            width: 40px;
        }

.whereClauseColumn, .customiseColumn, .summariseColumn {
    width: 700px;
    float: left;
}

.SplitPage input[type='text'], .SplitPage input[type='password'] {
    width: 47%;
}

.SplitPage h1 {
    margin-left: 5px;
}

.reportFilterHeader {
    position: relative;
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
    border-top: 3px solid #137FA1;
    /*-moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; /*border-bottom: none;*/
    padding: 3px; /*margin-left:3px;     margin-right:5px;     margin-top:0px;*/
    padding-bottom: 10px;
    height: 150px;
    overflow: auto;
}

.reportButtonPanel {
    text-align: right;
}

.reportWizard {
    width: 600px;
    height: 450px;
    overflow: auto;
}

.reportFormat input {
    width: 20px;
    float: left;
    height: 120px;
    margin: 0;
    padding: 0;
}

.reportFormat .rfItem {
    width: 100px;
    height: 120px;
    margin: 0;
    padding: 0;
}

.rfLine {
    background: transparent url(images/report_line.png) no-repeat bottom right;
}

.rfBar {
    background: transparent url(images/report_bar.png) no-repeat bottom right;
}

.rfPie {
    background: transparent url(images/report_pie.png) no-repeat bottom right;
}

.rfTabular {
    background: transparent url(images/report_tabular.png) no-repeat bottom right;
}

.reportHeader {
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-color: #ececec;
}

.reportCell {
    padding-left: 10px;
}

.reportTable {
    border: 1px solid #d0d0d0;
}

.reportRow {
}

.reportCellNoSub {
    border-bottom: 1px solid #d0d0d0;
}

.subReportCell {
    padding-left: 45px;
    border-bottom: 1px solid #d0d0d0;
}

.importReportItemsContainer {
    background-color: white;
    position: relative;
    height: 100px;
    width: 440px;
    margin-left: 0px;
    margin-top: 20px;
    overflow: auto;
    border: 1px solid gray;
}

.rowWithTextButton {
    width: 300px;
}

    .rowWithTextButton input[type="text"] {
        width: 200px;
    }

    .rowWithTextButton input[type="button"] {
        width: 70px;
    }

.PagerLink {
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
    border: 1px solid #adadad;
    /*background: url("images/header.png") repeat-x scroll left top #137FA1;*/
    background-color: #e1e1e1;
    color: #000;
    width: 50px;
    margin: 0px 10px 10px 10px;
    text-align: center;
}

.PagerSmallComponent {
    width: 50px;
}

.PagerPanel {
    float: left;
}

.SelectedPagerLink {
    border: 1px solid #029ddd;
    background: url("images/header.png") repeat-x scroll left top #029ddd;
    color: #000;
}

.PagerRightPanel {
    float: right;
    margin-right: 10px;
    font-size: 11px;
    text-align: right;
}

    .PagerRightPanel input, .PagerRightPanel select {
        width: 50px;
        font-size: 11px;
    }

.DeleteConfirmGrid {
    min-width: 350px;
    border-color: #EAEAEA;
    border-collapse: collapse;
    background-color: #E5F5FB;
}

.MarginRightSmall {
    margin-right: 5px;
}

select._LocationType {
    width: 150px;
    max-width: 150px;
}

.POI_BuyPrice, .POI_ExtPrice, .SOI_SalePrice, .SOI_RetailExtPrice, .SOI_WholesaleExtPrice {
    text-align: right;
}

.POI_Total {
    margin-left: 615px;
    font-weight: bold;
}

.SOI_Total {
    margin-left: 720px;
    font-weight: bold;
}

.despachDetails {
    height: 400px;
    overflow-y: scroll;
    position: relative;
}

.despatchDetails table {
    width: 100%;
}

    .despatchDetails table th.customer {
        width: 100px;
    }

    .despatchDetails table th.address {
        width: 200px;
    }

    .despatchDetails table th.noContainer {
        width: 100px;
    }

    .despatchDetails table th.trackingNumber, .fields input.TrackingNumber {
        width: 150px;
    }

    .despatchDetails table .kitting {
        /*background: url("images/header.png") repeat-x scroll left top #137FA1;*/
        background-color: #137FA1;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        height: 28px;
    }

div.selectSO {
    float: left;
    width: 400px;
}

    div.selectSO table th.header {
        padding-right: 0;
    }

div.selectSOButtons {
    float: left;
    width: 1px;
}

div.selectedSO {
    float: right;
    width: 200px;
}

div.color_picker {
    height: 16px;
    width: 16px;
    padding: 0 !important;
    border: 1px solid #ccc;
    background: url(images/arrow.gif) no-repeat top right;
    cursor: pointer;
    line-height: 16px;
    float: left;
}

div#color_selector {
    width: 110px;
    position: absolute;
    border: 1px solid #598FEF;
    background-color: #EFEFEF;
    padding: 2px;
}

div#color_custom {
    width: 100%;
    float: left;
}

    div#color_custom label {
        font-size: 95%;
        color: #2F2F2F;
        margin: 5px 2px;
        width: 25%;
    }

    div#color_custom input {
        margin: 5px 2px;
        padding: 0;
        font-size: 95%;
        border: 1px solid #000;
        width: 65%;
    }

div.color_swatch {
    height: 12px;
    width: 12px;
    border: 1px solid #000;
    margin: 2px;
    float: left;
    cursor: pointer;
    line-height: 12px;
}


#filterSummary {
    background-color: #EAEAEA;
    padding: 5px;
    overflow: hidden;
}

.filterSummary {
    height: 70px;
}

.searchControlWrapper {
    height: 300px;
    overflow: auto;
}

#quickDespatch #despatchTree {
    width: 300px;
    height: 300px;
    overflow: auto;
    float: left;
}

.despatchStep_3 #despatchTree {
    width: 320px;
    float: left;
    font-size: 12px;
}

.despatchStep_4 #despatchSummary {
    width: 300px;
    float: left;
    font-size: 12px;
}

.despatchStep_3 .packages {
    height: 300px;
    overflow: auto;
}

.despatchStep_4 .packages {
    height: 300px;
    overflow: auto;
}

#quickDespatch #despatchInfos {
    width: 500px;
    overflow: auto;
    float: left;
}

.despatchStep_3 #despatchInfos {
    width: 610px;
    overflow: auto;
    float: left;
}

.despatchStep_4 #despatchInfos {
    width: 610px;
    float: left;
}

#quickDespatch div {
    margin: 5px 0;
}

#quickDespatch .carrierInfo, .despatchStep_3 .carrierInfo {
    margin: 5px;
    border: 1px solid #000;
}

#quickDespatch label {
    display: inline-block;
    text-align: right;
    width: 150px;
}

/*.despatchStep_3 label {
    display: inline-block;
    text-align: right;
    width: 250px;
}*/

#quickDespatch .DecimalTxt {
    width: 40px;
}

div.despatchStep_1 {
    width: 295px;
    margin: 0 auto;
    padding-top: 220px;
}

.despatchStep_3 #noPackagesTxt {
    width: 100px;
}

.despatchStep_4 #noPackagesTxt {
    width: 100px;
}

/*ENABLE THIS FOR TOUCH SCREENS*/

/*.blindDiv label, .blindDiv input[type='text'], .blindDiv select, 
.blindDiv input[type='button'], .blindDiv input[type='submit'] {
    font-size: 25px;
}

.blindDiv .gridHeader, .blindDiv .grid tbody tr {
	font-size:18px;
}

.blindDiv .smallfields label, .blindDiv .smallfields input[type='text']{
	height:30px;
	width:250px;
}

.blindDiv .smallfields .textWithButton input[type='button']{
	font-size: 25px;
}

.blindDiv input:focus, .blindDiv select:focus {
    outline: 3px solid #F4A83D;
}*/


.despatchStep_3 .DecimalTxt {
    width: 60px;
}

.despatchStep_4 .DecimalTxt {
    width: 60px;
}

/*** ePos design    ***/

.eposArea {
    float: left;
    width: 100%;
    font-size: large;
}

.ePosTitle {
    padding: 20px;
    width: 95%;
}

.eposHeader {
    float: left;
}

.eposLocation {
    font-size: small;
    float: right;
}

.eposContainer {
    background-color: #FDFDFD;
    border-top: 3px solid #029ddd;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    padding: 10px;
}

.leftArea {
    height: 400px;
    width: 70%;
    display: block;
    border: 1px solid #D2D2D2;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    float: left;
    background-color: #F8F8F8;
}

.rightArea {
    height: 400px;
    width: 28%;
    display: block;
    border: 1px solid #D2D2D2;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    float: right;
    background-color: #F8F8F8;
}

.gridScroll {
    height: 350px;
    overflow: auto;
}

.eposControls {
    padding-bottom: 10px;
    margin: 0 auto;
    text-align: left;
}

.eposQty {
    text-align: right;
    width: 50px;
    height: 25px;
    font-size: medium;
}

.eposBtn {
    height: 30px;
    width: auto;
    font-size: medium;
}

.eposTxt {
    height: 25px;
    font-size: medium;
}

.eposDisTxt {
    text-align: right;
    height: 25px;
    font-size: medium;
}

.eposSummary {
    padding: 10px;
}

    .eposSummary label {
        text-align: right;
        width: 100px;
    }

.eposTotal {
    padding: 0;
    margin: 0 auto;
    text-align: right;
}

.eposGridItem, .eposGridAltItem {
    background-color: White;
    cursor: pointer;
}

.eposGridAltItem {
    background-color: #E5F5FB;
}

    .eposGridItem:hover, .eposGridAltItem:hover {
        background-color: #137FA1;
        color: #fff;
    }
/***** checkout control ****/
.checkoutTop {
    position: relative;
    background-color: #FDFDFD;
    border: 1px solid #EAEAEA;
    border-top: 3px solid #029ddd;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    padding: 20px;
    overflow: hidden;
}

.checkoutLeftArea {
    height: 125px;
    display: block;
    width: 40%;
    border: 1px solid #F2F0F0;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    float: left;
    background-color: #F8F8F8;
    font-size: medium;
}

.checkoutRightArea {
    height: 125px;
    width: 45%;
    display: block;
    border: 1px solid #F2F0F0;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    float: right;
    background-color: #F8F8F8;
    font-size: medium;
}

.checkoutBottom {
    position: relative;
    background-color: #FDFDFD;
    border: 1px solid #EAEAEA;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
    padding: 20px;
    overflow: hidden;
}

.clearPayBtn {
    height: 40px;
    width: auto;
    font-size: large;
    padding-left: 20px;
}

.checkoutBtn {
    height: 40px;
    width: 100px;
    font-size: large;
    padding-left: 20px;
}

.buttonTable {
    vertical-align: middle;
    text-align: center;
    padding-left: 60px;
    float: right;
}

.divfinish {
    float: right;
}

.cashTenderDiv {
    display: block;
    font-size: x-large;
}

.hide {
    visibility: hidden;
    background-color: #2191C0;
}

.chkTxt {
    height: 24px;
    font-size: x-large;
    width: 80px;
    text-align: right;
}

.onSelect {
    background-color: #2191C0;
}

#extenderUl {
    background: #fff;
    position: absolute;
    display: block;
    z-index: 999;
    padding: 3px;
    border: 2px solid #18294A;
}

    #extenderUl li {
        list-style: none;
        display: block;
        margin: 5px;
    }

#extenderTd a {
    display: block;
    height: 15px;
    width: 15px;
    background: transparent url("images/expand.png") no-repeat center center;
}

#extenderTd.currentTab a {
    background: transparent url("images/collapse.png") no-repeat center center;
}

.menu {
    padding-right: 25px;
    background: transparent url("images/asc.gif") no-repeat right center;
    text-decoration: none;
    position: relative;
    border: 1px solid transparent;
    cursor: pointer;
}

    .menu.selected {
        border: 1px solid black;
        /*border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;*/
    }

    .menu:hover {
        text-decoration: underline;
    }


.menudrop {
    position: absolute;
    background: white;
    border: 1px solid black;
    width: 250px;
    display: none;
    z-index: 999;
    font-size: 11px;
    -webkit-box-shadow: 1px 6px 8px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 6px 8px rgba(0,0,0,0.5);
    box-shadow: 1px 6px 8px rgba(0,0,0,0.5);
    /*border-radius: 5px 0px 5px 5px;
    -moz-border-radius: 5px 0px 5px 5px; /*padding-bottom:5px;*/
}

    .menudrop ul {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0;
    }

        .menudrop ul li {
            text-align: left;
            padding: 0;
            margin: 0;
            padding-left: 5px;
            padding-top: 5px;
        }

            .menudrop ul li[onclick], .menudrop ul li > input {
                line-height: 30px;
                cursor: pointer; /*width:100%;*/
            }

                .menudrop ul li[onclick]:hover, .menudrop ul li input:hover {
                    text-decoration: underline;
                    background: #137FA1;
                    color: #fff;
                }

            .menudrop ul li input[disabled] {
                /*text-decoration:line-through;*/
            }

            .menudrop ul li input {
                background: none;
                border: none;
                padding: 0;
                margin: 0;
                display: block;
                width: 100%;
                font-size: 11px;
                text-align: left;
            }

.menufooter > .footerul {
    color: Black;
    background: #DCEEF4 url("images/header.png") repeat-x top left;
    /*border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;*/
}

.menudrop .footerul {
    margin-top: 10px;
    border-top: 1px solid gray;
    -moz-box-shadow: 0 0 2px #888;
    -webkit-box-shadow: 0 0 2px #888;
    box-shadow: 0 0 2px #888;
}

.settingsButton {
    padding-right: 2px;
    display: block;
    width: 40px;
    height: 24px;
    background: url(images/buttons.png) no-repeat center center;
}

/* Splitbar styles; these are the default class names and required styles */
.splitbarV {
    float: left;
    width: 4px;
    height: 100%;
    line-height: 0px;
    font-size: 0px;
    border-left: solid 1px #18294A;
    border-right: solid 1px #18294A;
    background-color: #18294A;
    /*background: #cbe1fb url(images/panev.gif) 0% 50%;*/
}

.splitbarH {
    height: 6px;
    text-align: left;
    line-height: 0px;
    font-size: 0px;
    border-top: solid 1px #18294A;
    border-bottom: solid 1px #18294A;
    background-color: #18294A;
    /*background: #cbe1fb url(images/paneh.gif) 50% 0%;*/
}

.splitbuttonV {
    margin-top: -34px;
    margin-left: -2px;
    top: 50%;
    position: relative;
    height: 35px;
    width: 8px;
    background-color: #137FA1;
    /*background: transparent url(images/panevc.gif) 10px 50%;*/
}

    .splitbuttonV.invert {
        margin-left: 0px;
        /*background: transparent url(images/panevc.gif) 0px 50%;*/
        background-color: #137FA1;
    }

.splitbuttonH {
    margin-left: -41px;
    left: 50%;
    position: relative;
    height: 10px !important;
    width: 83px;
    /*background: transparent url(images/panehc.gif) 50% 0px;*/
    background-color: #137FA1;
}

    .splitbuttonH.invert {
        margin-top: -4px;
        /*background: transparent url(images/panehc.gif) 50% -10px;*/
        background-color: #137FA1;
    }

    .splitbarV.working, .splitbarH.working, .splitbuttonV.working, .splitbuttonH.working {
        -moz-opacity: .50;
        filter: alpha(opacity=50);
        opacity: .50;
    }

label.textEntryLeft {
    text-align: left;
}

#progress-update-area {
    padding: 15px;
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
}

#actions-msg-box {
    padding: 5px;
    font-size: 14px;
    float: left;
}

.orange-box {
    background-color: antiquewhite;
}

.editorsBoxSized {
    width: 94%;
    box-sizing: border-box;
}

.itemTypeUnits h2, .itemTypeUnits h3 {
    padding: 2px 0;
    margin: 0;
}

.itemTypeUnits h3 {
    font-size: 12px;
}

.itemTypeUnits-left {
    width: 40%;
    float: left;
}

.itemTypeUnits-center {
    width: 20%;
    float: left;
    text-align: center;
}

.itemTypeUnits-right {
    width: 40%;
    float: left;
}

.fields .itemTypeUnits-buttons-panel {
    margin-top: 25px;
}

    .fields .itemTypeUnits-buttons-panel input {
        margin-bottom: 4px;
    }

.error-msg {
    color: red;
}

.popup-button-sort {
    cursor: pointer;
}

div.widgetLinkContainer {
    width: 300px;
    position: absolute;
    bottom: 15px;
    left: 0;
}

a.descartesLogo {
    background: transparent url("images/descartes_logo-121x15.png") no-repeat;
    background-size: 121px 15px;
    background-position-x: 5px;
    padding: 0 0 0 130px;
    height: 15px;
    float: left;
    margin: 0 5px 0 5px;
    position: relative;
    background-color: white;
    text-decoration: none;
    border-radius: 5px;
}

    a.descartesLogo span {
        color: #5E5E5F;
        font-size: 11px;
        font-style: normal;
        height: 13px;
        vertical-align: 4px;
        padding: 0 5px 0 0;
    }

.mdlpLoginButtonArea {
    text-align: left;
    padding-left: 10px;
}

.mdlpLoginButton {
    font-size: 14px;
    font-weight: 500;
    padding: 7px 6px 6px 6px;
    border-width: 0;
    border-radius: 4px;
    background-color: #007DC0;
    color: #FFFFFF;
    letter-spacing: 1px;
    line-height: 19px;
    min-width: 100px;
    height: 36px;
    padding: 0px 20px;
    background-position: center;
    box-shadow: 0px 8px 8px rgb(0 0 0 / 20%);
}

    .mdlpLoginButton:hover {
        background-color: #1487C5;
        cursor: pointer;
    }

    .mdlpLoginButton:active {
        box-shadow: none;
        cursor: pointer;
    }