.ui-front
{
    z-index: 20000;
}

html
{
    overflow:hidden;
}

html, body {
    height: 100%;
}

@font-face {
  font-family: 'OpenSans';
  src: url("../styles/fonts/OpenSans-Regular.eot?v=1.1.0");
  src: url("../styles/fonts/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../styles/fonts/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("../styles/fonts/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("../styles/fonts/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("../styles/fonts/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans';
  src: url("../styles/fonts/OpenSans-Semibold.eot?v=1.1.0");
  src: url("../styles/fonts/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../styles/fonts/OpenSans-Semibold.woff2?v=1.1.0") format("woff2"), url("../styles/fonts/OpenSans-Semibold.woff?v=1.1.0") format("woff"), url("../styles/fonts/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"), url("../styles/fonts/OpenSans-Semibold.svg?v=1.1.0#Regular") format("svg");
  font-weight: 600;
  font-style: normal;
}

body
{
    color:#000000;
    background-color:#FFFFFF;
    padding:0px;
    margin:0px;
    overflow:hidden;
}

body, .t-widget, .t-widget .t-input, .t-widget .text-box, .t-button, .ui-widget {
    font-size: 14px;
    font-family:OpenSans;
}

img 
{
    border:0px;
    vertical-align:middle;
    padding:0px;
    margin:0px;
    white-space:nowrap;
}

td>img {
   
    max-width: 70px;
    max-height: 70px;
}

input.input_error {
    background-color: lightpink;
}

a 
{
    color:#000000;
}
a:visited 
{
    color:#000000;
}

.Main
{
    /*overflow:auto;*/
    border:0px;
    overflow:hidden;
    position:relative;
    z-index: 20000;
    display: flex;
    flex-direction: column;
}

#MainContentContainer {
    flex-grow: 1;
    overflow: auto;
}

.Header 
{
    width:100%;
    height:75px;
    background-color:#FFFFFF;
    position: relative;
    z-index: 30000;
}

.Main,
.amphire-layout-column-container,
.amphire-layout-column-container > .innerPane, /*vsplitter*/
.amphire-layout-grid
{
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow: hidden;
}


.amphire-layout-row-container
{
    display: flex;
    flex-flow: row;
    height: 100%;
    overflow: hidden;
}

.amphire-layout-column-container > .amphire-layout-grid,
.amphire-layout-column-container >  .innerPane > .amphire-layout-grid,
.amphire-layout-grid > .t-grid-content, 
.a-layout-container-grow {
    flex: 1;
}

.amphire-layout-column-container >  .innerPane > .amphire-layout-grid,
.amphire-layout-grid > .t-grid-content, 
.a-layout-container-grow {
    overflow: auto;
}

.Header .Brand
{
   float:left;
    padding-left: 15px;
}

.Header .Brand img
{
    padding-top: 10px;
}

.Header .Cart
{  
   float: right;
   
}

.Header .Cart .CartInfo .Total
{
    font-size:medium;
    vertical-align:middle
}

.Header .Cart .CartInfo .CartItems
{
    font-size:small;
    vertical-align:middle
}

.HeaderRowContent
{
    padding:8px 15px 2px 5px;
}

.HeaderRowContent a,
.HeaderRowContent .cartTotal
{
    font-size:14px;
    text-decoration: none;
}

.HeaderRowContent .cartItems
{
    font-size:12px;
}

input.field-validation-error
{
    background-color: rgb(255, 228, 225);
}

textarea.field-validation-error
{
    background-color: rgb(255, 228, 225);
}

.field-validation-error
{
    color: Red;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}


.ui-multiselect-checkboxes{
    height: auto !important;
    max-height: 175px;
}


.ui-autocomplete {
     height: 200px; 
     overflow-y: scroll; 
     overflow-x: hidden;
}

.MessageBox
{
    width:300px; 
    height:100px; 
    position:absolute; 
    top:10px; 
    display:none;  
    background-color: #FFFFFF; 
    z-index:9999; 
    border: solid 1px;    
    color: #000000;
}

.BackLink 
{
    vertical-align:5px;
}

.loadingPanel, .loadingPanelNew {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: white none repeat scroll 0% 0%; 
    z-index: 999998; 
    position: absolute; left: 0; top: 0; 
    opacity: 0.7;
}

.loadingPanel > .loadingImage,
.loadingPanelNew > .loadingImage {
    background: transparent url('../Images/loader.gif');
    height: 32px;
    width: 32px;
}

div.custom-attributehover-styling 
{
    background-color: white;
    z-index: 100000;
    max-width: 500px;
    font-size: 12px;

    border-radius: 0;
    -webkit-border-radius: 0;
	-moz-border-radius: 0;
    border-radius: 0;

    box-shadow: 0px 0px 0px;

    border-style: solid;
    border-width: 1px;
    border-color: black;
}

.table-form-2-column {
    width: 100%;
}

.table-form-2-column td {
    width: 50%;
}

.flex-h-list {
    display: flex;
    justify-content: space-around;
}

/* ---------------------------------------- */
/* UI: bp-validation  */
/* ---------------------------------------- */
.bp-required {
    vertical-align: text-top;
}

    .bp-required-input-color-bar {
        width: 5px;
        background-color:#ffa500;
        vertical-align: text-top
    }

    .bp-required-input-color-bar.bp-validation-disabled {
        display: none !important;
    }

    .bp-required-invalid-input {
        background-color: #ffe4e1;
    }

    .bp-required-input-color-bar-invalid {
        width: 5px;
        background-color:#ff0000;
    }

    .bp-required-input-invalid-message {
        color: #ff0000;
        font-weight: bold;
        display: block;
    }




/* ---------------------------------------- */
/* UI: Toolbars  */
/* ---------------------------------------- */
.RadToolBar
{
    width:100%; 
}

.RadToolBarDropDown .rtbDisabled .rtbWrap img.filterIcon {
	opacity: 0.4;
}

/*Toolbar*/

.RadToolBarDropDown .filterCheckAllContainer .ui-widget-header {
    padding-top:5px;
    padding-bottom: 5px;
}

.RadToolBarDropDown .filterCheckAllContainer ul.ui-helper-reset {
    border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
    text-align: left;
}

.RadToolBarDropDown .filterCheckAllContainer ul.ui-helper-reset li {
    float: left;
    padding: 0 10px 0 0;
}

.RadToolBarDropDown .filterCheckAllContainer ul.ui-helper-reset span.ui-icon {
    float: left;
}

.RadToolBarDropDown .filterCheckAllContainer ul.ui-helper-reset li.ui-multiselect-close {
    float: right;
    padding-right: 0;
    text-align: right;
}

.RadToolBar .rtbMiddle
{
    height: 42px;
}

.RadToolBar .rtbMiddle .rtbInner
{
    padding:3px 0 0 10px;
}

#MainContentContainer .RadToolBar .rtbDropDown span.rtbChoiceArrow {
    background-image: url("../images/dropdownsheet.png");
    height: 5px;
    margin-left: 3px;
    margin-top: -2px;
    width: 11px;
}

.RadToolBar .rtbButton,
.RadToolBar .rtbDropDown,
.RadToolBar .rtbTemplate 
{
    margin-left:10px;
}

.RadToolBar .rtbSeparator 
{
    margin-left:10px;
}

div.reportTitlebar div.RadToolBar .rtbMiddle {
    background-color: #ffffff;
    border-color: #ffffff;
    font-size: 14px;
}

div.reportTitlebar div.RadToolBar .reportTitle {
    padding-top: 7px;
    font-size: 15px;
}

#invalidProductHasBeenReplacedOnOrderGuide {
    padding: 5px 0 5px 0;
}

/* ---------------------------------------- */
/* UI: Toolbars  */
/* ---------------------------------------- */

/*  Dashboard Modules  */

.DashboardModulePane 
{
    -webkit-border-top-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
	-moz-border-radius-topright: 0px;
    border-top-right-radius: 0px;
    border-style: solid;
    border-width: 1px;
    padding: 0px 0px 0px 0px;
}
        
.DashboardModulePane .DashboardPaneTitle
{
    -webkit-border-top-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
	-moz-border-radius-topright: 0px;
    border-top-right-radius: 0px;
    border-style:none;
    border-width:1px;
    border-style:solid;
    height: 38px;
}

.DashboardModulePane .DashboardPaneTitle .dashboardTitle
{
    font-size: 16px;
}

.DashboardModulePane .DashboardPaneTitle .dashboardFind
{
    font-size:small;
}

.DashboardModulePane .DashboardPaneTitle .dashboardFind.UserModule
{
    background-color: white; 
    padding-bottom: 3px; 
    padding-top: 2px;
    margin: 4px 2px 0 0;
}
        
.DashboardModulePane .t-pager > .t-link, .DashboardModulePane .t-pager > .t-state-hover {
    border: 1px solid;
    border-color: #BBB99D;
    margin-left: 3px;
            
    border-radius: 10px;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    border-radius: 10px;
}
        
.DashboardModulePane .t-pager .t-state-active, .DashboardModulePane .t-pager .t-state-hover  {
    border-radius: 10px;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    border-radius: 10px;
    padding: 1px;
}
        
.DashboardModulePane div.t-pager div.t-numeric a.t-link {
    padding: 2px 7px 0px;
}    
    
.DashboardModulePane div.t-pager div.t-numeric span.t-state-active, .DashboardModulePane div.t-pager div.t-numeric a.t-state-hover {
    height: auto!important;
    line-height: 20px !important;
    padding: 0px 6px;
    margin-top: 1px;
}





/*!
 * jQuery contextMenu - Plugin for simple contextMenu handling
 *
 * Version: 1.5.15
 *
 * Authors: Rodney Rehm, Addy Osmani (patches for FF)
 * Web: http://medialize.github.com/jQuery-contextMenu/
 *
 * Licensed under
 *   MIT License http://www.opensource.org/licenses/mit-license
 *   GPL v3 http://opensource.org/licenses/GPL-3.0
 *
 */

.context-menu-list {

    margin:0; 
    padding:0;
    
    min-width: 120px;
    max-width: 250px;
    display: inline-block;
    position: absolute;
    list-style-type: none;
    
    border: 1px solid #DDD;
    background: #EEE;
    
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
         -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    
    font-family: OpenSans;
    font-size: 13px;
    color: #000000;
}

.context-menu-item {
    padding: 2px 10px 2px 24px;
    position: relative;
    -moz-user-select: -moz-none;
    cursor: pointer;
}

.context-menu-separator {
    padding-bottom:0;
    border-bottom: 1px solid #DDD;
}

.context-menu-item > label {
    -moz-user-select: text;
}

.context-menu-item.hover {
    cursor: pointer;
    background-color: #39F;
}

.context-menu-item.disabled {
    color: #666;
}

.context-menu-input.hover,
.context-menu-item.disabled.hover {
    cursor: default;
    background-color: #EEE;
}

.context-menu-submenu:after {
    content: ">";
    color: #666;
    position: absolute;
    top: 0;
    right: 3px;
    z-index: 1;
}

/* icons
    #protip:
    In case you want to use sprites for icons (which I would suggest you do) have a look at
    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
    .context-menu-item.icon:before {}
 */
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }

/* vertically align inside labels */
.context-menu-input > label > * { vertical-align: top; }

/* position checkboxes and radios as icons */
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
    margin-left: -17px;
}
.context-menu-input > label > span {
    margin-left: 5px;
}

.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
    display: block;
    width: 100%;
    
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

.context-menu-input > label > textarea {
    height: 100px;
}
.context-menu-item > .context-menu-list {
    display: none;
    /* re-positioned by js */
    right: -5px;
    top: 5px;
}

.context-menu-item.hover > .context-menu-list {
    display: block;
}

.context-menu-accesskey {
    text-decoration: underline;
}

/*Dashboard*/
.dashboardTitles
{
	border-bottom:1px solid #000000; 
}

.dashboardModuleContainer
{
    float:left;
}

.dashboardModuleContainer .module
{
    font-size: 11px;
	border: 1px solid #828282;
	box-shadow: 2px 2px 6px #828282;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
    border-radius: 15px;
    margin-right:10px;
    background-color: #ffffff;
}

.horizontalDivider
{
	box-shadow: 0px 0px 5px #828282;
	border: solid 1px #828282;
}

/*DistributionCenterAccounts*/
#profile_dcaccounts .red 
{
	color:Red;
}

.dashboardOrderContent ul li a:hover, .itn_navigation a:hover
{
	background-color: #C4E0FC;
}

/* ---------------------------------------- */
/* gritter    (Notification )               */
/* ---------------------------------------- */

#gritter-notice-wrapper {
    z-index: 999999;
    padding: 20px;
}

.gritter-item-wrapper {
    padding: 15px 20px 5px 5px;
}

#gritter-notice-wrapper .gritter-item-wrapper {
    background: #cccccc;
    box-shadow: 0 2px 10px rgba(50, 50, 50, 0.5);
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    border-radius: 10px;
}

#gritter-notice-wrapper .gritter-close  {
    left: auto;  
    right: 3px;
    top: 12px;
}

#gritter-notice-wrapper .gritter-item {
    color: inherit;
    font-size: 14px;
}

#gritter-notice-wrapper .gritter-title {
    text-shadow: none;
}

#gritter-notice-wrapper .gritter-top, #gritter-notice-wrapper .gritter-bottom, #gritter-notice-wrapper .gritter-item {
    background-image: none;
}

#gritter-notice-wrapper .gritter-image {
    width: 24px;
    height: 24px;
}
#gritter-notice-wrapper .gritterCloseTimerMessage {
    font-size: 10px;
    text-align: center;
    padding-top: 8px;
}

/* ---------------------------------------- */
/* UI: Fonts  */
/* ---------------------------------------- */

table#SiteNavigation .t-link{
    font-size: 16px;
    color: #ffffff;
}

div#TitleBar {
    font-size: 15px;
    color: #212121;
}

div#TitleBar .ui-widget {
    font-size: 14px;
    color: #212121;
}

button.ui-button {
    font-size: 14px;
    color: #000000;
}

.primary-button-disabled,
.primary-button-disabled.primary-button,
.primary-button-disabled.secondary-button,
.primary-button-disabled.text-button {
    cursor: default;
}

.primary-button,
.secondary-button,
button.primary-button,
button.secondary-button,
.text-button
{
    font-size: 15px !important;
    font-weight: normal !important;
    font-family:OpenSans !important;
}

.RadToolBar .rtbWrap, 
.RadToolBar .rtbTemplate {
    font-family: OpenSans;
    font-size: 13px;
}

#SiteNavigation > tbody > tr > td.t-header 
{
    width: 270px;
}

#SiteNavigation > tbody > tr > td.t-header.refreshButton 
{
    width: 40px;
}

#searchTextContainer
{
    background-color: white;
    padding-bottom: 5px;
    padding-top: 2px;
    margin-right: 2px;
    white-space: nowrap;
}

#RefreshProductButton 
{
    margin-right: 2px; 
    background-color: white; 
    padding: 2px 5px 5px 5px;
}

/* ---------------------------------------- */
/* UI: jquery ui tabs. */
/* ---------------------------------------- */
.ui-tabs .ui-tabs-nav {
    margin-bottom: 5px;
}

.ui-tabs .ui-tabs-nav li.ui-corner-all, 
.ui-tabs .ui-tabs-nav li.ui-corner-top, 
.ui-tabs .ui-tabs-nav li.ui-corner-right, 
.ui-tabs .ui-tabs-nav li.ui-corner-tr {
    border-top-right-radius: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-corner-all, 
.ui-tabs .ui-tabs-nav li.ui-corner-top, 
.ui-tabs .ui-tabs-nav li.ui-corner-left, 
.ui-tabs .ui-tabs-nav li.ui-corner-tl {
    border-top-left-radius: 0px;
}

/* ---------------------------------------- */
/* UI: jquery ui Select. */
/* ---------------------------------------- */

.ui-selectmenu-menu .ui-menu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Preserve default jQuery UI appearance */
    border: 1px solid #d3d3d3; /* Same as .ui-widget-content */
    padding: 0; /* Matches default */
    background-color: #ffffff; /* Optional: ensure theme consistency */
    box-shadow: none; /* If needed, prevent visual clipping */
}

/* ---------------------------------------- */
/* UI: Title Bar and Buttons  */
/* ---------------------------------------- */

.text-button {
    text-decoration: underline;
    background: none;
    border: none;
}

.primary-button,
.secondary-button,
.text-button 
{
    padding: 7px 15px 8px;
    text-align: center;
    white-space: normal;
    cursor: pointer;
}

div.primary-button,
div.secondary-button
{
    height: 16px;
}

.RadToolBar li a.primary-button,
.RadToolBar li a.secondary-button {
    padding: 0px;
}

button.ui-button
{
    height: 29px;
    border-radius:0;
    text-align: center;
    white-space: normal;
    cursor: pointer;
}

div.primary-button div.right-arrow-text,
div.secondary-button div.right-arrow-text 
{
    float:left;
    line-height: normal;
}

div.primary-button div.right-arrow,
div.secondary-button div.right-arrow 
{
    background-image: url("../images/lrarrowssheet.png");
    height: 13px;
    margin-left: 8px;
    margin-top: 2px;
    width: 7px;
    background-repeat: no-repeat;
    float:left;
    
}

button#rerun .ui-icon 
{
    background-image: url("../images/lrarrowssheet.png");
    height: 13px;
    margin-left: 0;
    margin-top: -7px;
    width: 7px;
}

button#rerun .ui-icon-triangle-1-w {
    background-position: -7px -13px;
    left: 3px;
}


button#select
{
    border-left: solid 1px #bfbfbf;
}

button#select .ui-icon 
{
    background-image: url("../images/dropdownsheet.png");
    height: 5px;
    margin-left: -6px;
    margin-top: -2px;
    width: 11px;
    
}

button#select .ui-icon-triangle-1-s {
    background-position: -10px 0px;
}

/* ---------------------------------------- */
/* UI: Menu  */
/* ---------------------------------------- */

table#SiteNavigation
{
    border:none;
    -moz-box-shadow: 0 5px 5px -5px #000000; /* Menu - Shadow */
    -webkit-box-shadow: 0 5px 5px -5px #000000; /* Menu - Shadow */
    box-shadow: 0 5px 5px -5px #000000; /* Menu - Shadow #000000 35% Opacity 3 px */
    margin-bottom: 5px;
}

.t-menu .t-arrow-down {
    background-image: url("../images/dropdownsheet.png");
    background-position: 0 0;
    height: 5px;
    margin-left: 8px;
    margin-right: 0;
    margin-top: 12px;
    width: 11px;
}



/* ---------------------------------------- */
/* UI: Grids  */
/* ---------------------------------------- */

div.t-grid-header, 
div.t-grid-footer, 
.t-grid-header-wrap
{
    border: none;
}

div.t-grid-header .t-header 
{
    border-width: 0 0 0 0;
}

div.t-grid-header .t-header 
{
    padding-bottom: 8px;
}

.t-grid td 
{
    border-width: 0 0 1px 0;
}

.t-grid tr.t-no-data td 
{
    border-width: 0 0 0 0;
}

.t-grid .t-grouping-header,
div.t-grid div.t-grid-content tr.t-alt
{
    background-color: #ffffff;
}

div.t-grid div.t-grid-header th {
    padding-top:10px;
}

.t-grid .t-grid-pager .t-numeric span.t-state-active
{
    border-radius: 0;
    font-size:11px;
}

.t-grid,
.t-grid .t-grid-pager .t-numeric a,
.t-grid > .t-grid-footer,
.t-grid .t-status-text
{
    font-size:11px;
}


.t-grid-content table tbody tr td
{
    font-size:14px;
    cursor: pointer;
}

.t-grid-header,
.t-grouping-header
{
    font-size: 13px;
}

.catch-weight-icon-special,
.manage-invoice-grid-description-icon{
    float: right;
    margin: 1px 0 0 5px;
}

.manage-invoice-grid-status-icon {
    float: right;
    margin: 3px 0 0 5px;
}

.pack-desc-with-catch-weight,
.status-name-with-icon,
.description-with-icon {
    float: left;
}

/* ---------------------------------------- */
/* UI: Title Bars  */
/* ---------------------------------------- */
div#TitleBar ul.ui-menu {
    border-radius: 0;
    background: #ffffff;
}

div#TitleBar ul.ui-menu li.ui-menu-item a.ui-corner-all{
    border-radius: 0;
}

/* ---------------------------------------- */
/* UI: Trees  */
/* ---------------------------------------- */

.t-treeview .t-in {
    padding: 3px 4px 3px 3px;
}

.t-treeview .t-state-selected, 
.t-treeview .t-state-hover
{
    border-style: solid;
    border-radius: 0;
    padding: 2px 4px 3px 3px;
}

/* Using the telerik Default for all themes because it is neutral and works */
/* with all of our themes.  Otherwise we would have to come up with our own.  */
div.t-treeview span.t-icon,
div.t-grid .t-grid-pager .t-icon {
    background-image: url("../images/default_telerik_sprite.png");
}

div.t-grid .t-grouping-header .t-group-delete 
{
    background-image: url("../images/tag_x_8x8.png");
    background-position: 2px 3px;
}

div.grid-message {
    
    overflow: auto;
    border: 1px solid black;
    padding: 20px;
    background-color: white;
    display: inline-block;
}

div.grid-message>span {
    vertical-align: middle;
}
div.grid-message-overlay {
    background-color: gray;
    background-color: rgba(224, 224, 224 ,0.5);
    position: absolute;
    z-index: 99;
    width: 100%;
}

/* ---------------------------------------- */
/* UI: TitleBar Back Button. */
/* ---------------------------------------- */
.ui-buttonset .ui-corner-all, 
.ui-buttonset .ui-corner-top, 
.ui-buttonset .ui-corner-bottom, 
.ui-buttonset .ui-corner-right, 
.ui-buttonset .ui-corner-left, 
.ui-buttonset .ui-corner-br, 
.ui-buttonset .ui-corner-tr
{
    border-radius: 0px;
}


/* ---------------------------------------- */
/* UI: Dialogs  */
/* ---------------------------------------- */
.ui-dialog.ui-widget, .ui-widget {
    
}

.ui-dialog
{
    background-image:none;
    background-color:#ffffff;
}

.ui-dialog,
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-corner-all
{
    border-radius:0;
}

.ui-dialog .ui-dialog-titlebar button.ui-button
{
    background: url("../images/delete_16x16_light.png") no-repeat;
    border:none;
}

.ui-dialog button.ui-button span.ui-icon
{
    background-image:none;
}

.ui-dialog.no-close .ui-dialog-titlebar-close {display: none }

.primary-font
{
    font-size:16px;
}

.category-font
{
    font-size:14px;
}

.sub-category-font
{
    font-size:13px;
}

#extended-info-prev-button,
#extended-info-next-button {
    background-image: url("../images/UPDWNSprite_20.png");
    background-repeat: no-repeat;
    margin-right: 15px;
    background-color: transparent;
    border: 0;
    width: 20px;
    cursor: pointer;
    margin-top: 3px;
    height: 24px;
}

div.dialog-button-bar {
    float: right;
}

/* ---------------------------------------- */
/* UI: Toolbars  */
/* ---------------------------------------- */

.headerBarToolbar .rtbMiddle
{
    height: 36px;
}

.headerBarToolbar .rtbMiddle span.rtbText
{
    font-size: 16px;
}

div#ImpersonationToolBar .rtbMiddle .rtbInner
{
    padding-left:15px;
}

.RadToolBar .ui-widget-overlay
{
    background:none;
    opacity:0.1;
}

/* ---------------------------------------- */
/* UI: Not Telerik Toolbar Buttons  Hover */
/* ---------------------------------------- */

.primary-button-disabled div.right-arrow
{
    background-position: -21px 0;
}

/* ---------------------------------------- */
/* UI: Telerik Drop Downs */
/* ---------------------------------------- */

.RadToolBarDropDown {
    background-image: none;
    background-color: #ffffff;
    
}

/* ---------------------------------------- */
/* Style Common to all Themes  */
/* ---------------------------------------- */
.form_label {
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    background-color: #f0f0f0;
}

.form_label.right {
    text-align: right;
}

.form_label_blank {
    font-size: 14px;
    font-weight: normal;
    color: #000000;
}

.form_label_header {
    font-size: 16px;
    font-weight: normal;
    color: #000000;
    background-color: silver;
}

.italic_text {
    font-style: italic;
}

div#dashboardModuleContainer div.DashboardSection
{
    background: none;
}

.error-text, .important-text 
{
    background-color: #ffe0b2;
    color: #212121 ;
    padding: 5px;
}

.required-indicator:before {
    content: '* ';
    color: red;
    position: absolute;
    margin-left: -10px;
}

/* ---------------------------------------- */
/* Active Icons in Grids  */
/* ---------------------------------------- */
div.active-grid-icon-container {
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 0 0 3px;
}

div.active-grid-icon-container img.active-grid-icon {
    padding: 0 0 0 0;
}

/* ---------------------------------------- */
/* tool-tipster jquery plugin  */
/* ---------------------------------------- */

.tooltipster-default {
	border-radius: 5px; 
	border: 1px solid #888888;
/*	background: #4c4c4c; */
    background: #eeeeee;
	color: #000;
}

/* ---------------------------------------- */
/* substitution dialog product summary  */
/* ---------------------------------------- */

     div#SubstituteProductsHeader
     {
         overflow: auto;
         padding: 25px 25px 15px 15px;
     }
     
     div#SubstituteProductsHeader>div.source_row,
     div#SubstituteProductsHeader>div.target_row
     {
         clear: both;
         overflow: auto;
         padding: 0 0 10px 0;
     }
    
    div#SubstituteProductsHeader>table
    {
        margin: auto;
        width: 900px;
        border-collapse: collapse;
        
    }
    
    div#SubstituteProductsHeader>table tr.source_row td.data,
    div#SubstituteProductsHeader>table tr.target_row td.data
    {
        border: 1px solid black;
    }
    
    div#SubstituteProductsHeader>table th,
    div#SubstituteProductsHeader>table tr.source_row td,
    div#SubstituteProductsHeader>table tr.target_row td
    {
        padding: 5px;
    }
    
    div#SubstituteProductsHeader>table th.subtitle
    {
        width: 70px;
    }
    
    div#SubstituteProductsHeader>table th.dist
    {
        width: 120px;
        text-align: left;
    }
    
    div#SubstituteProductsHeader>table th.desc
    {
        width: 350px;
        text-align: left;
    }
    
    div#SubstituteProductsHeader>table th.pack
    {
        width: 100px;
        text-align: left;
    }
    
    div#SubstituteProductsHeader>table th.uom
    {
        width: 50px;
        text-align: left;
    }
    
    div#SubstituteProductsHeader>table th.price
    {
        width: 100px;
        text-align: right;
    }
    
    div#SubstituteProductsHeader>table td.subtitle,
    div#SubstituteProductsHeader>table td.price
    {
        text-align: right;
    }
    
    div#SubstituteProductsHeader>div.help
    {
        padding: 5px 0 0 105px;
        font-style: italic;
    }
    
    div#SubstituteProductsFooter
    {
        overflow: auto;
        clear: both;
        padding: 20px 20px 10px;
    }

    div#SubstituteProductsFooter > div.substitutionReason {
        float:left;
    }

    div#SubstituteProductsFooter>div.substitutionReason>div.title {
        float: left;
        padding: 0 5px 0 0;
    }

    div#SubstituteProductsFooter > div.substitutionReason > div.reason {
        float: left;
    }

    div#SubstituteProductsFooter > div.product-substitution-dialog-buttons {
        float: right;
    }

    div#SubstituteProductsError
    {
        color: red;
        height: 20px;
        padding: 0 0 0 10px;
    }

/* ---------------------------------------- */
/* substitution dialog product summary  */
/* ---------------------------------------- */
.ui-datepicker-trigger
{
    cursor: pointer;
}

#ui-datepicker-div
{
    z-index: 99999;
    font-size: 10pt;
    width: 14em;
}
/* ---------------------------------------- */
/* UI: Action Panel  */
/* ---------------------------------------- */

div.action-panel-no-data-message-parent {
    
    -moz-box-shadow: 0px 0px 8px #cccccc;
    -webkit-box-shadow: 0px 0px 8px #cccccc;
    box-shadow: 0px 0px 8px #cccccc;
}

div.action-panel-no-data-message-child {
    color: #58595B;
}

/* ---------------------------------------- */
/* UI: New Grid Picker Pattern   */
/* ---------------------------------------- */

div.RadToolBar div.picker-select-all-items,
div.RadToolBar div.picker-remove-selections {
    cursor: pointer;
}

div.RadToolBar div.picker-select-all-items {
    width: 280px;
    text-align: right;
}

div.RadToolBar div.picker-remove-selections {
    display: none;
    width: 269px;
    text-align: right;
}

div.RadToolBar div.picker-selected-items-div,
div.RadToolBar span.picker-selected-items,
div.RadToolBar div.picker-return-to-items-div {
    text-decoration: underline;
}

div.RadToolBar span.picker-return-to-items-div-icon {
    background-image:  url("../images/LRArrowsSheet.png");
    background-position: 14px 13px;
    display: inline-block;
    height: 13px;
    width: 7px;
}

div.RadToolBar span.picker-return-to-selected-items-text {
    padding: 10px;
}

div#picker-add-items-dialog-grid-content,
div#picker-selected-items-content {
    height: 450px;
}

div.picker-selected-items-content div.picker-selected-items-content-table-content {
    height: 410px;
    overflow-y: scroll;
}

div.RadToolBar div.picker-selected-items-div,
div.RadToolBar div.picker-return-to-items-div {
    width: 200px;
}

div.RadToolBar div.picker-selected-items-div > div,
div.RadToolBar div.picker-return-to-items-div > div {
    display: inline;
    cursor: pointer;
}

div.picker-selected-items-content table.picker-bp-table-simple tr.picker-bp-simple-table-header {
    font-size: 13px;
    color: #837e7e;
    height: 34px;
    text-align: left;
}

div.picker-selected-items-content table.picker-bp-table-simple th {
    padding-top: 2px;
    font-weight: normal;
    text-align: inherit;
}

div.picker-selected-items-content table.picker-bp-table-simple td {
    padding: 3px 7px;
}

div.picker-selected-items-content table.picker-bp-table-simple th.picker-item-1 {
    width: 331px;
    padding-left: 8px;
    padding-right: 7px;
}

div.picker-selected-items-content table.picker-bp-table-simple th.picker-item-2 {
    width: 331px;
    padding-left: 7px;
}

div.picker-selected-items-content table.picker-bp-table-simple th.picker-item-3 {
    width: 101px;
}

div.picker-selected-items-content table.picker-bp-table-simple td.picker-item-1 {
    width: 331px;
    padding-right: 7px;
}

div.picker-selected-items-content table.picker-bp-table-simple td.picker-item-2 {
    width: 331px;
}

div.picker-selected-items-content table.picker-bp-table-simple td.picker-item-3 {
    width: 101px;
}


div.picker-action-buttons {
    margin: 10px 0;
    float: right;
}

/* ------------------------------------------------ */
/* UI: Assign Organization to Order Guides Dialog   */
/* ------------------------------------------------ */

div#picker-unassign-units-grid-content {
    height: 320px;
}

div#assign-organizations-dialog-main-content div.wizard-info {

    width: 95%;
    height: 20px;
    padding: 5px 15px;

}
       
div#assign-organizations-dialog-main-content div.assign-organizations-wiz {

    width: 100%;
    height: 370px;
    overflow:auto;
    margin: 10px 0 10px 0;
}

div#assign-organizations-dialog-main-content div#assign-organizations-dialog-buttons {
    float: right;
}


/* ------------------------------------------------ */
/* UI: Assign Accounts to Order Guides Dialog   */
/* ------------------------------------------------ */

div#picker-assign-accounts-grid-content,
div#picker-selected-accounts-content {
    height: 320px;
}

div#assign-accounts-main-content div#accounts-wizard-info {
    width: 95%;
    height: 20px;
    padding: 5px 15px;
    visibility: hidden;
}

div#assign-accounts-main-content div#grid-area{

    width: 100%;
    height: 370px;
    overflow:auto;
    margin: 10px 0 10px 0;
}

div#assign-accounts-main-content div#assign-accounts-buttons {
    float: right;
}

#assign-order-guide-dialog-content > div#tabs > ul#tabStrip {
    font-size: 14px;
    background-color: transparent;
}

/* ------------------------------------------------ */
/* UI: Unassign Order Guide Dialog                  */
/* ------------------------------------------------ */

#unassign-order-guide-dialog-content > div#tabs > ul#tabStrip {
    font-size: 14px;
    background-color: transparent;
}


/* ------------------------------------------------ */
/* UI: Missing Dist Info Dialog                     */
/* ------------------------------------------------ */

#missing-dist-info-dialog-main-content>div {

    padding: 10px 10px;
}

#missing-dist-info-dialog-buttons>button {
    float: right;
}

/* ------------------------------------------------ */
/* UI: Assigning Products Dialog                    */
/* ------------------------------------------------ */

#assign-products-dialog-content>div {

    padding: 10px 10px;
}

#assign-products-dialog-content>div#tabs {

    height: 480px;
}

#assign-products-dialog-content>div#tabs>ul#tabStrip {

    font-size: 14px;
    background-color: transparent;
    
}

#assign-products-dialog-buttons>button {
    float: right;
}

#assign-products-dialog #createTemplate,
#assign-products-dialog #createOrderGuide {

    padding: 180px 0 0 0;
}

/* ------------------------------------------------ */
/* UI: Distributor Settings                         */
/* ------------------------------------------------ */

#web-services-content #api-settings-container {
    display: flex;
    flex-direction: column;
}

div#distributor-settings-container {
    display: block;
}



#web-services-content .Labels {
    vertical-align: middle;
    height: 16px;
    width: 180px;
    padding: 5px 0 5px 0;
    display: inline-block;
    text-align: right;
    margin-left: 10px;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    border-color: #f0f0f0;
    font-size: 14px;
    color: #000000;
}

#web-services-content .Titles {
    text-align: center;
    white-space: nowrap;
    top: 10px;
    left: 20px;
}

#web-services-content .api-setting {
    margin-bottom: 10px;
    max-width: 1000px;
}

#web-services-content .api-setting-options-table {
    height: 110px;
    width: 100%;
}

#web-services-content .save-cancel-api-settings-buttons {
    padding-top: 2px;
    align-content: center;
    padding: 5px 0 0 12px;
}

/* ------------------------------------------------ */
/* UI: Trading Partner Logon Dialog                 */
/* ------------------------------------------------ */

div#trading-partner-logon-dialog-main-content div#trading-partner-logon-message {

    width: 95%;
    height: 20px;
    padding: 5px 15px;

}

div#trading-partner-logon-dialog-main-content div.trading-partner-unit-wiz {

    width: 100%;
    height: 500px;
    overflow:auto;
    margin: 10px 0 10px 0;
}
      
div#trading-partner-logon-dialog-main-content div#trading-partner-logon-info {

    width: 100%;
    height: 500px;
    overflow:auto;
    margin: 10px 0 10px 0;
}

div#trading-partner-logon-dialog-main-content div#trading-partner-logon-dialog-buttons {
    float: right;
}

div#trading-partner-logon-dialog-main-content table.trading-partner-account-info {
    width: 650px;
}

div#trading-partner-logon-dialog-main-content div#trading-partner-logon-info {
    overflow: auto;
}

div#trading-partner-logon-dialog-main-content td.form_label,
div#trading-partner-logon-dialog-main-content td.form_label_blank {
    width: 40%;
    text-align: right;
}

/* ------------------------------------------------ */
/* UI: Create Order Guide Logon Dialog              */
/* ------------------------------------------------ */

#create-orderguide-dialog-content>div {

    padding: 10px 10px;
}

#create-orderguide-dialog-form {
    width: 620px;
    height: 320px;    
}

#create-orderguide-dialog-form tr td input.form-data {
    width: 325px;
}

#create-orderguide-dialog-form tr td select#create-orderguide-dialog-type{
    width: 325px;
}

#create-orderguide-dialog-form tr td input.inputDate {
    vertical-align:middle;
    width:100px;
    color:gray
}

div#create-orderguide-dialog div#create-orderguide-dialog-buttons {
    float: right;
}

#create-orderguide-dialog-content .form_label
{
    width:260px;
    text-align:right;
    vertical-align: middle;      
}

#create-orderguide-dialog-content .text-after-checkbox
{
    vertical-align: 2px;      
}

#create-orderguide-dialog-content span.required-autocomplete,
#create-orderguide-dialog-content span.required-input {
    height: 24px;
    display: inline-block;
    width: 5px;
    background-color: #ffa500;
    vertical-align: top;
    margin-right: -3px;
}

/* ------------------------------------------------ */
/* UI: Create Order Guide Type Dialog               */
/* ------------------------------------------------ */

#create-orderguide-type-dialog-form {
    width: 330px;
    height: 30px;    
}

#create-orderguide-type-dialog-content>div {

    padding: 10px 10px;
}

#create-orderguide-type-dialog-content .form_label
{
    width:100px;
    text-align:right;
    vertical-align: middle;      
}

#create-orderguide-type-dialog-form tr td input#create-orderguide-type-name {
    width: 200px;
}

/* ------------------------------------------------ */
/* UI: Unassign Units / Account from Order Guides   */
/* ------------------------------------------------ */

div#unassign-organizations-dialog-buttons,
div#unassign-accounts-dialog-buttons,
div#view-deleted-ogs-buttons,
div#logon-dialog-buttons,
div.dialog-buttons-bar {
    padding: 20px 0 0 0;
    float: right;
}

/* ------------------------------------------------ */
/* UI: Organization Images Column in Grids          */
/* ------------------------------------------------ */

div.product-sector-images img {
    border: solid 1px black;
}

div.product-sector-images span.not-orderable img {
    border: solid 1px red;
}

div.product-sector-images span.not-enabled img {
    opacity: .3;
}

div.product-sector-images span.clickable-icon img {
    cursor: pointer;
}

/* ------------------------------------------------ */
/* UI: Sector Order Guides Dialog             */
/* ------------------------------------------------ */

div#sector-orderguide-dialog-content
{
    height: 300px;
    padding-top: 10px;
}

div#sector-orderguide-dialog-content .important-text
{
    height: 38px;
}

div#sector-orderguide-dialog-content>div
{
    margin: 10px;
}

div#sector-orderguide-dialog-buttons {
    float: right;
}

div#sector-orderguide-dialog-content .form_label
{
    width:260px;
    text-align:right;
    vertical-align: middle;      
}

div#sector-orderguide-dialog-content tr td input.form-data {
    width: 325px;
}

div#sector-orderguide-dialog-content tr td input.inputDate {
    vertical-align:middle;
    width:100px;
    color:gray
}

#sector-orderguide-dialog-content span.required-autocomplete {
    height: 24px;
    display: inline-block;
    width: 5px;
    background-color: #ffa500;
    vertical-align: top;
    margin-right: -3px;
}

#sector-orderguide-dialog-content  .text-after-checkbox
{
    vertical-align: 2px;      
}

/* ------------------------------------------------ */
/* UI: Copy Sector Order Guides Dialog        */
/* ------------------------------------------------ */

#copy-sector-orderguide-dialog-content {

    height: 380px;
}

#copy-sector-orderguide-dialog-content div.sector-images-title {

    font-weight: bold;
    padding: 10px 0px;
}

#copy-sector-orderguide-dialog-content>div {

    padding: 10px 10px;
}

#copy-sector-orderguide-dialog-form {
    width: 620px;
    height: 320px;    
}

#copy-sector-orderguide-dialog-content .form_label
{
    width:260px;
    text-align:right;
    vertical-align: middle;      
}

#copy-sector-orderguide-dialog-content .text-after-checkbox
{
    vertical-align: 2px;      
}


/* ------------------------------------------------ */
/* UI: FORM FLEX GRID        */
/* ------------------------------------------------ */

.a-flex-form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 2px;
}

.a-flex-form > .a-form-field {
    display: flex;
}
.a-flex-form > .a-form-field:not(:last-child) {
    margin-bottom:5px;
}

.a-flex-form > .a-form-field > *:first-child {
    text-align: right;
    background-color: #f0f0f0;
    margin-right: 3px;
}

.a-flex-form > .a-form-field > input,
.a-flex-form > .a-form-field > select,
.a-flex-form > .a-form-field > textarea {
    flex: 1;
}

.a-flex-form > .a-form-field > * {
    padding: 1px 0.25em;
}

.a-flex-form.a-form-3-7 > .a-form-field > *:first-child {
    width: 30%;
}
.a-flex-form.a-form-4-6 > .a-form-field > *:first-child {
    width: 40%;
}
.a-flex-form.a-form-5-5 > .a-form-field > *:first-child {
    width: 50%;
}

.a-flex-form > .a-form-field > input::-moz-placeholder,
.a-flex-form > .a-form-field > input::-webkit-input-placeholder,
.a-flex-form > .a-form-field > input:-ms-input-placeholder {
    color: gray;
    font-size: 8pt;
    font-style: italic;
}

.disabled-image:disabled {
    opacity: 0.5; /* Makes the image appear faded */
    cursor: not-allowed; /* Changes the cursor to indicate it's not clickable */
}