/* ----------------------------------------------------- */
/* This CSS file is used for the Flat Grey visual theme. */
/* ----------------------------------------------------- */

/* This theme uses a scalable, floating layout - so most
   sizes are expressed in EMs. PX sizes are used only for
   drop shadows and positioning around graphic images. */

/* -------------------------------------- */
/*      Resets/Browser Normalization      */
/* -------------------------------------- */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

:root {
  --primary-btn-color: #0c7fa4;
  
  --custom-dropbtn-padding: 6px 8px;
  --custom-dropbtn-dropdown-content-left: -14px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: middle;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ------------------------------ */
/*      Basic Element Styles      */
/* ------------------------------ */
html {
    background-color:#EEEEEE;
    /* used to prevent the centered page from jumping when the scroll bar appears. Now the scroll bar will always be there */
    overflow-y: scroll;
}

body, textarea, input, select {
    font-family: arial,helvetica,clean,sans-serif;
}

body {
    min-width: 960px;
    width:expression(document.body.clientWidth < 962? "960px" : "auto");
    position: relative;
    
    
    color: #000000;
    margin: 0;
    
    font-size:12px;
    line-height:1.231;
    
    background-color:#EEEEEE;
    padding-top: 10px;
    padding-bottom: 10px;
}


a, a:visited {
    /*TODO*/
color: #000;
font-weight: normal;
/*
text-decoration: underline;*/
}

a:hover, a:active {
text-decoration: underline;
}

/*TODO*/
.disabled {
color: #333366;
text-decoration: none;
}


ol.numbers {
list-style: decimal; 
padding-left: 20px;
}

ul.dots {
list-style: circle; 
padding-left: 20px;
}





hr {
    background-color: #ccc;
    color: #ccc;
    border-bottom: #fafafa 0.1em solid;
    border-right: #fafafa 0.2em solid;
    border-left: #d9d9d9 0.2em solid;
    border-top: #d9d9d9 0.1em solid;
    margin: 0.5em 0 0.5em 0;
}

h1, .h1, 
h2, .h2,
h3, .h3, 
h4,h5,h6,strong {
    /*bringing boldness back to headers and the strong element*/
    font-weight:bold; 
}


h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a,
h4, h5, h6 {
    font-weight:normal;
}


/*TODO check proper sizing*/
h1, .h1 {
    font-size: 1.6em;
}

h2, .h2 {
    font-size: 1.3em;
}

h3, .h3 {
    font-size: 1.1em;
}

/* IE7 fix */
table {
/*font-size: 1em;*/
}

/* IE7 fix */
/*table input {
border: #999999 solid 0.1em;
}
*/

textarea {
/*background-color: #ffffff;
border: #999999 solid 0.1em;
font-size: 1.1em;
*/
}

th, th a {
/*color: #000000;
font-weight: bold;
*/
}

/* -------------------------- */
/*     Float Clear/Reset      */
/* -------------------------- */

.clear {
clear: both;
height: 0;
visibility: hidden;
}

.no-clear .clear {
/* Used in container elements to override
 the clear class in contained elements. */
clear: none;
}

/* ------------------------------- */
/*      Single Element Styles      */
/* ------------------------------- */

.alert {
/* Used for alert text */
color: #ff0000;
}


.hidden {
height: 0;
visibility: hidden;
}

.label {
/* Used for <input> element labels */
font-weight: bold;
height: 1.2em; /* Same as <input> height */
/*padding-right: 1.1em;*/
padding-left:1em !important;

text-align: right;
white-space: nowrap;
width: 1%;
vertical-align: top;
}

.required, input.required {
/* required style for <input> elements */
background-color: #ffffdd;
}

.requiredFieldMarker {
    color:red;  
}

.formInputExample {
    color:gray; 
    
}

.tooltip {
color: #557996;
font-style: italic;
margin: 0.4em;
}

.visible {
height: auto;
visibility: visible;
}

td.actions .action,
th.actions .action {
    margin-right:1em;
    vertical-align:middle;
}

.page-container {

    /* Structure */
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom:10px;
    
    background-color:rgb(12,127,164);
    
    /* Theme */
    padding:5px 5px;
    
        -moz-border-radius:                 .75em /*{global-radii-blocks}*/;
    -webkit-border-radius:              .75em /*{global-radii-blocks}*/;
    border-radius:                      .75em /*{global-radii-blocks}*/;
    
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 10px #888;
}

.align-float {
float: right;
}

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

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

.align-text-left {
    text-align: left;
}

.align-top {
vertical-align: top;
}

.centered {
text-align: center;
}

.page-title {
color:#557996;
margin-bottom:0.5em;
font-size:1.6em;
font-weight:bold;
}

.page-title-aligned {
	color: #557996;
    font-size: 1.6em;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 3px;
}

.contentarea {
    min-height:450px;
    background-color:#FFFFFF;
    
        -moz-border-radius-bottomleft: .5em;
    -webkit-border-bottom-left-radius: .5em;
    border-bottom-left-radius: .5em;
    
    -moz-border-radius-bottomright: .5em;
    -webkit-border-bottom-right-radius: .5em;
    border-bottom-right-radius: .5em;
}

/* ------------------------ */
/*      Masthead Style      */
/* ------------------------ */

#masthead {
    background:#fff;
    /*border-bottom:2px solid #105a10;*/
    
    color: #000;
    font-size: 1em;
    font-weight: normal;
    min-height: 20px; /* Setting must be in px */
    height: auto;
    overflow: auto;
    

        -moz-border-radius-topleft: .5em;
    -webkit-border-top-left-radius: .5em;
    border-top-left-radius: .5em;
    
    -moz-border-radius-topright: .5em;
    -webkit-border-top-right-radius: .5em;
    border-top-right-radius: .5em;
    /* width: 20%;
    float: right; */
}

#masthead ul li {
    float: left;
    padding: 0.5em 0.8em 0.5em 0;
}

#masthead ul li a {
    color: black;
    font-weight: normal;
}

.last-system-msg{
    color: #000000;
    font-size: 0.9em;
    padding-left:10px;
}

.preference-area{
    float: right !important;
    padding: 0px !important;
}

#masthead ul .logo-area {
    padding: 0.1em 0.8em;
}

#masthead ul .logo-area img {
    width: 100px;
}

#masthead ul .org-logo-area {
    padding: 0.1em 0.8em;
}

#masthead ul .org-logo-area img{
    width: 100%;
    height:100%;
}

#masthead ul a:focus {
    text-decoration: underline;
}

/* ---------------------- */
/*      Footer Style      */
/* ---------------------- */

#footer {
    background-color:rgb(12,127,164);
    
    /*border-top: 0.1em inset #000;*/
    padding: 0.5em 0 0.5em 0.5em;
    
    -moz-border-radius:                 .5em /*{global-radii-blocks}*/;
    -webkit-border-radius:              .5em /*{global-radii-blocks}*/;
    border-radius:                      .5em /*{global-radii-blocks}*/;
}

#footer a {
    color:#FFFFFF;
    font-weight: normal;
}

#footer ul {
    float: left;
    display: inline
}

#footer ul li {
    border-left: 0.1em solid #444;
    border-right: 0.1em solid #222;
    float: left;
    display: inline; 
    color:#FFFFFF;
    font-weight: normal;
    padding: 0.5em;
}

#footer ul .first {
    border-left: none;
}

#footer ul .last {
    border-right: none;
}

#footer ul li a {
    color:#FFFFFF;
    font-weight: normal;
}

#footer p {
    clear: left;
    color:#FFFFFF;
    font-weight: normal;
    padding: 0.5em;
}

#footer a:focus {
    text-decoration: underline;
}

/* ------------------------------- */
/*      Main Navigation Style      */
/* ------------------------------- */

#main-navigation {
    clear: both;
    /*background-color: #DFEADD;*/
    background-color: #FFFFFF;
    /*color:#042C2C;*/
    font-size: 1.1em;
    
    /*height: 5.2em;*/
    overflow: auto;
    
    /*border-bottom: 0.2em solid #457445;*/
    padding: 0.5em 0 0.1em 0;
    
    margin-bottom:.25em;
    
    -moz-border-radius-bottomleft: .5em;
    -webkit-border-bottom-left-radius: .5em;
    border-bottom-left-radius: .5em;
    
    -moz-border-radius-bottomright: .5em;
    -webkit-border-bottom-right-radius: .5em;
    border-bottom-right-radius: .5em;
    /* width: 80%;
    padding-top: 0px !important;
        float: left;
        margin-top: -34px; 
    float: left;
    width: 80%;
     */
}

#main-navigation ul li {
    float: left;
    display: inline;
    /*height: 4.85em;*/
    padding: 0 1em 0 0.5em;
    /*border-left: 0.1em solid #457445;*/
    border-right: 0.1em solid #457445;
    margin-bottom:.25em;
}

/*todo*/
#main-navigation ul .disabled {
    color: #D4D0C8;
}

#main-navigation ul .first {
    border-left: none;
}

#main-navigation ul .last {
    border-right: none;
}

#main-navigation ul a {
    color: #000000 !important;
    display: block;
    padding: 0 0.6em 0 0.6em;
    font-size: 0.9em;
    font-weight:normal;
    text-transform:uppercase;
    /* Uncomment next line for main-nav drop shadows */
    /*text-shadow: 0px 1px 1px #22323f;*/
}

/*todo*/
#main-navigation ul a:hover,
#main-navigation ul .selected {
    color: #F9924B !important;
    
    
}

#main-navigation ul a:hover {
    text-decoration: none;
}

#main-navigation ul .selected,
#main-navigation ul a.selected:hover {
    text-decoration: underline;
}

#main-navigation ul a:focus {
    text-decoration: underline;
}

/* -------------------------------------- */
/*      Application Navigation Style      */
/* -------------------------------------- */

#app-navigation {
/*background-color:#F5f9f5;*/
background-color:rgb(215,225,229);
border-top: 0.1em solid #3E5A71;
border-bottom: 0.1em solid #fff;
height: 1%; /* IE fix */
margin: 0;
padding: 0.5em;

    -moz-border-radius-topleft: .5em;
    -webkit-border-top-left-radius: .5em;
    border-top-left-radius: .5em;
    
    -moz-border-radius-topright: .5em;
    -webkit-border-top-right-radius: .5em;
    border-top-right-radius: .5em;
    /* width:99%; 
    float: left;  */
}

#app-navigation h1,
#app-navigation h2,
#app-navigation h3 {
color: #000000;
margin: 0.4em 0 0.4em 0;
text-transform:uppercase;
text-shadow: 1px 1px 0 #fff; /* Setting must be in px */
}

#app-navigation ul {
    display: inline; /* IE Fix */
}

#app-navigation ul li ul li {
background-color: #f5f9f5;

border-top: 0.1em solid rgba(12,127,164,1);
border-right: 0.1em solid rgba(12,127,164,1);
border-bottom: 0.1em solid rgba(12,127,164,1);
border-left: 0.1em solid rgba(12,127,164,1);

padding: 0.5em;
float: left;
display: inline;
margin: 0.1em 0.3em 0.1em 0;

    -moz-border-radius:                 .5em /*{global-radii-blocks}*/;
    -webkit-border-radius:              .5em /*{global-radii-blocks}*/;
    border-radius:                      .5em /*{global-radii-blocks}*/;

}

#app-navigation ul .disabled {
    color: #D4D0C8;
}



#app-navigation ul a {
    color: #000;
    display: block;
    text-underline-offset: 1px;
    font-weight: normal;
    padding: 0.1em 0.3em 0.1em 0.3em;
}

#app-navigation ul .selected {
    background-color: rgb(12,127,164);
        
    -moz-box-shadow: 2px 2px 2px #888;
    -webkit-box-shadow: 2px 2px 2px #888;
    box-shadow: 2px 2px 2px #888;
}

#app-navigation ul .selected a {
    color: #FFF;
    /*padding: 0.1em 0.3em 0 0.3em;*/
    
}

#app-navigation ul li:hover {
    -moz-box-shadow: 2px 2px 2px #888;
    -webkit-box-shadow: 2px 2px 2px #888;
    box-shadow: 2px 2px 2px #888;
}

#app-navigation ul a:hover {
    text-decoration: none;
}

#app-navigation ul a:focus {
    text-decoration: underline;
}

/* ------------------------- */
/*      Screenlet Style      */
/* ------------------------- */

.screenlet {
    
    background-color: #FFFFFF;
    /*
    border-right: 0.1em solid #ccc;
    border-bottom: 0.2em solid #ccc;
    border-left: 0.1em solid #ccc;
    */
    
    height: auto !important;
    height: 1%;
    margin-bottom: 1em;
    overflow: auto;
}

.screenlet-body {
    background-color: #FFFFFF;
    border-left:1px solid #CCC;
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
    
    height: auto !important;
    height: 1%;
    padding: 0.5em;
    
    -moz-border-radius-bottomleft: .25em;
    -webkit-border-bottom-left-radius: .25em;
    border-bottom-left-radius: .25em;
    
    -moz-border-radius-bottomright: .25em;
    -webkit-border-bottom-right-radius: .25em;
    border-bottom-right-radius: .25em;
}

/*TODO*/
.screenlet-body div,
.screenlet-body p {
    /*margin: 0.8em 0.1em*/
    /* margin-bottom:1em; */
}

/* Special Screenlet style for locale and timezone window 
.lists.screenlet {
margin-left: 25%;
margin-right: 25%;
margin-top: 1em;
}

.lists.screenlet .basic-table tr td {
text-align: center;
}

.lists.screenlet .basic-table tr td a {
display: block;
}
*/

/* No padding screenlet decorator */
.no-padding {
padding: 0;
border: none;
}

.no-padding .h1,
.no-padding .h2,
.no-padding .h3,
.no-paddingr h1,
.no-padding h2,
.no-padding h3 {
padding: 0.7em;
}

/* ----------------------------------- */
/*      Screenlet Title Bar Style      */
/* ----------------------------------- */

.screenlet-title-bar {
    color:rgb(12,127,164);
    background-color: rgba(75,121,135,0.22);
    border:1px solid rgb(12,127,164);
    
    height: 1%; /* IE fix */
    min-height: 1.5em;
    padding:0.8em 0.2em;
    
    -moz-border-radius-topleft: .25em;
    -webkit-border-top-left-radius: .25em;
    border-top-left-radius: .25em;
    
    -moz-border-radius-topright: .25em;
    -webkit-border-top-right-radius: .25em;
    border-top-right-radius: .25em;
}

.screenlet-title-bar .h1,
.screenlet-title-bar .h2,
.screenlet-title-bar .h3,
.screenlet-title-bar h1,
.screenlet-title-bar h2,
.screenlet-title-bar h3 {
    background: none;
    color:rgba(12,127,164,1);
}

.screenlet-title-bar ul {
    display: inline; /* IE Fix */
}

.screenlet-title-bar ul li {
    background: none;
    border-left: 0.1em solid #dedede;
    color: #222;
    float: right;
    font-size: 1em;
    font-weight: bold;
    padding: 0.1em 0.5em 0.2em 0.5em;
}

.screenlet-title-bar ul .h1,
.screenlet-title-bar ul .h2,
.screenlet-title-bar ul .h3 {
    border-left: none;
    float: left;
}

.screenlet-title-bar h1,
.screenlet-title-bar .h1 {
    font-size: 1.6em;
}

.screenlet-title-bar h2,
.screenlet-title-bar .h2 {
    font-size: 1.3em;
}

.screenlet-title-bar h3,
.screenlet-title-bar .h3 {
    font-size: 1.1em;
}

.screenlet-title-bar .h3 a {
    color: #222;
    display: inline;
}

.screenlet-title-bar ul a {
    color: #222;
    display: block;
}

.screenlet-title-bar ul a:visited {
    color: #222;
}

.screenlet-title-bar ul a:hover {
    color: #ffffff;
    text-decoration: none;
}

.screenlet-title-bar ul .disabled {
    color: #CCCCCC;
}

.screenlet-title-bar ul .collapsed,
.screenlet-title-bar ul .collapsed:hover {
    background: url(/images/expand.gif) no-repeat center center;
    min-height: 1.1em;
    min-width: 1.1em;
}

.screenlet-title-bar ul .expanded,
.screenlet-title-bar ul .expanded:hover {
    background: url(/images/collapse.gif) no-repeat center center;
    min-height: 1.1em;
    min-width: 1.1em;
}

.screenlet-title-bar ul .collapsed a,
.screenlet-title-bar ul .expanded a {
    /* IE fix */
    cursor: default;
}

/* login screenlet decorator */
.login-screenlet {
    min-width: 32em;
    width: 25%;
}

.login-screenlet .screenlet-title-bar {
    text-align: center;
}

/* ------------------------------------------------ */
/*      Basic Navigation (Vertical Menu) Style      */
/* ------------------------------------------------ */

.basic-nav {
/* indent menu - helpful for widgets */
padding-left: 1em;
}

.basic-nav ul a {
color: #333;
font-size: 1.1em;
}

.basic-nav ul .selected,
.basic-nav ul .selected a {
color: #0000ff;
}

.basic-nav ul a:hover {
color: #0000ff;
}

.basic-nav ul .disabled,
.basic-nav ul .disabled a {
color: #D4D0C8;
}

/* ------------------------------------- */
/*      Button Bar Navigation Style      */
/* ------------------------------------- */

.button-bar {
    margin-bottom: 1.0em;
    width: 100%;
}

.button-bar ul {
    display: inline; /* IE Fix */
}

.button-bar ul li ul li {
    float: left;
    font-weight: bold;
}

.button-bar ul .opposed {
    float: right;
}

.button-bar ul a {
    display: block;
}

.button-bar .opposed,
.button-bar .opposed li,
.button-bar ul .opposed {
    float: right;
}

/* ------------------------------- */
/*      Button Bar Decorators      */
/* ------------------------------- */

.button-style-1 {
    display: table;
}

.button-style-1 ul li ul li {
margin-right: 0.5em;
margin-bottom: 0.25em;
}

.button-style-2 {
    display: table;
}

.button-style-2 ul li ul li {
    margin-right: 0.5em;
    margin-bottom: 0.25em;
}

.button-style-2 {
    display: table;
}

.tool-bar {
    padding: 0.2em;
}

.tool-bar ul li {
    padding: 0.1em;
}

.tab-bar {
    display: table;
    margin:0;
    padding:0.5em 0.5em 0 0.5em;
}

.tab-bar ul li ul li {
    margin-right: 0.5em;
    margin-bottom: 0em;
    background: #fff;
    border-top: 0.1em solid #ccc;
    border-right: 0.1em solid #ccc;
    border-bottom: 0.1em solid #ccc;
    border-left: 0.1em solid #ccc;
    
    padding: 0.5em;
    white-space: nowrap;
    
    
    -moz-border-radius:                 .5em /*{global-radii-blocks}*/;
    -webkit-border-radius:              .5em /*{global-radii-blocks}*/;
    border-radius:                      .5em /*{global-radii-blocks}*/;
}

.tab-bar ul a,
.tab-bar ul a:visited {
    color: #000;
}

.tab-bar ul 
.tab-bar ul .selected,
.tab-bar ul .selected a,
.tab-bar ul .selected  {
    color: #fff;
    text-decoration: underline;
    background-color: rgb(52, 159, 194);
    border-bottom-width: 0.1em solid;
    border-right-width: 0.1em solid;
    border-top-width: 0.1em solid;
    border-left-width: 0.1em solid;
    margin-bottom: 0px;
    font-weight: normal;
}

.tab-bar ul li.selected,
.tab-bar ul li:hover {
    -moz-box-shadow: 2px 2px 2px #888;
    -webkit-box-shadow: 2px 2px 2px #888;
    box-shadow: 2px 2px 2px #888;
}

.tab-bar ul a:focus {
    text-decoration: underline;
}

.tab-bar ul .disabled,
.tab-bar ul li.disabled:hover {
    color: #ccc;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ---------------------- */
/*      Table Styles      */
/* ---------------------- */

.basic-table {
    background-color: #ffffff;
    color: #000000;
    margin-bottom: 1em;
    width:100%;

}

form table,
form .basic-table,
.screenlet-body .basic-table {
    /*
    background: transparent;
    margin-bottom: 0;
    */
}

.basic-table tr td,
.basic-table tr th {
    /* Style for all cells */
    padding:.5em .25em .5em .25em;
    vertical-align: top;
}

.basic-table tr td.nested td {
    padding:0;
    padding-right:.5em;
}

.basic-table tr .align-middle,
.basic-table td .align-middle {
    vertical-align: middle;
}

.basic-table tr .align-bottom,
.basic-table td .align-bottom  {
    vertical-align: bottom;
}

.basic-table tr .align-top,
.basic-table td .align-top {
    vertical-align: top;
}

.basic-table tr .label,
.basic-table tr .group-label {
    /* field labels for forms */
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/*TODO*/
.basic-table tr .group-label {
/* "header" for field label groups */
font-size: 1.2em;
padding: 2em 1.5em 0 0;
}

.basic-table tr th,
.basic-table .header-row {
    font-weight: bold;
    text-align: left;
}

.basic-table .header-row td,
.basic-table .header-row th {
    border-bottom: 0.1em solid #000000;
}

/*TODO*/
.basic-table .header-row td a {
color: #000000;
}

/*TODO*/
.basic-table .alternate-row {
/* Alternating row style */
background-color: #eeeeee;
}
/*TODO*/
.basic-table .selected {
background: #FFFCCF;
}
/*TODO*/
.basic-table .alternate-rowSelected {
background: #FFF55F;
}
/*TODO*/
.basic-table .Validate {
/*Style use by alt-row-style on list*/
background: #A0D5F7;
}
/*TODO*/
.basic-table .alternate-rowValidate {
/*Style use by alt-row-style on list*/
background: #72A8F2;
}
/*TODO*/
.basic-table .Warn {
/*Style use by alt-row-style on list*/
background: #f55C5C;
}
/*TODO*/
.basic-table .alternate-rowWarn {
/*Style use by alt-row-style on list*/
background: #FC7455;
}
/*TODO*/
.basic-table tr .button-col {
/* button column style - for the small
collection of buttons used in lists */
vertical-align: top;
}
/*TODO*/
.basic-table .collapsed {
visibility: collapse;
}

/*TODO*/
/*      Alternate table header style      */
.basic-table .header-row-2 th,
.basic-table .header-row-2 td {
background-color: #dcdcdc;
/*border-bottom: 0;
border-left: 0.1em solid #aaa;
border-right: 0.1em solid #888;*/
color: #000000;
font-weight: bold;
text-align: center;
}
/*TODO*/
/*      Sort field style      */
.basic-table .header-row-2 th .sort-order-asc,
.basic-table .header-row-2 td .sort-order-asc{
background: url(/images/arrow-gr-up.png) no-repeat right;
padding-right: 20px; /* Setting must be in px */
}
/*TODO*/
.basic-table .header-row-2 th .sort-order-desc,
.basic-table .header-row-2 td .sort-order-desc{
background: url(/images/arrow-gr-dw.png) no-repeat right;
padding-right: 20px; /* Setting must be in px */
}
/*TODO*/
.basic-table .header-row-2 th .sort-order,
.basic-table .header-row-2 td .sort-order{
background: url(/images/arrow-gr.png) no-repeat right;
padding-left: 0.5em;
padding-right: 20px; /* Setting must be in px */
color:#fff
}

/* ------------------------------------- */
/*      Table decorator - Hover bar      */
/* ------------------------------------- */
/*TODO*/
.hover-bar tr:hover {
background-color: #cccccc;
cursor: default;
}
/*TODO*/
.hover-bar .header-row-1:hover,
.hover-bar tr th:hover {
background-color: #ffffff;
color: #000000;
}

/* -------------------------------- */
/*      Table decorator - Grid      */
/* -------------------------------- */

.dark-grid {
    /*border-right: 0.1em solid #000000;
    border-top: 0.1em solid #000000;
    */
}

.dark-grid td,
.dark-grid .header-row-2 th,
.dark-grid .header-row-2 td {
    border: 0.1em solid #000000;
    /*
    border-bottom: 0.1em solid #000000;
    border-left: 0.1em solid #000000;
    */
}

.light-grid {
    /*
    border-right: 0.1em solid #cccccc;
    border-top: 0.1em solid #cccccc;
    */
}

.light-grid td,
.light-grid th,
.light-grid .header-row th,
.light-grid .header-row td{
    border: 0.1em solid #cccccc;
    /*
    border-bottom: 0.1em solid #cccccc;
    border-left: 0.1em solid #cccccc;
    */
}

.basic-form table.optical-grid,
table.optical-grid {
    width:1%;
    margin-bottom:1em;
}

table.optical-grid tr.header-row th {
    text-align:center;
    vertical-align:bottom;
    white-space: nowrap;
}

table.optical-grid tr td {
    padding-left:.75em;
    padding-right:.75em;
}

table.light-grid.optical-grid tr th {
    
    /*border:0;*/
}

table.light-grid  td.empty,
table.light-grid th.empty,
table.light-grid  td.empty {
    border:0;
}



/* ------------------------------------ */
/*      Table decorator - Calendar      */
/* ------------------------------------ */

.calendar {
border-right: 0.1em solid #cccccc;
}

.calendar tr td {
border-bottom: 0.1em solid #cccccc;
border-left: 0.1em solid #cccccc;
vertical-align: top;
padding: 0.5em;
}

.calendar .header-row td {
background-color: #47637c;
border-bottom: 0.1em solid #cccccc;
border-left: 0.1em solid #cccccc;
color: #ffffff;
height: auto;
text-align: center;
}

.calendar tr td .add-new {
float: right;
}

.calendar tr td .h1 {
color: #333;
float: left;
}

.calendar .current-period {
background-color: #ffffcc;
}

.calendar .active-period {
background-color: #eeeeee;
}

/*     ================== */
/*      Tree Styles      */
/*     ================== */

.basic-tree {
/* placeholder */
}

.basic-tree ul {
padding-left: 1em;
}

.basic-tree li {
padding-left: 1em;
white-space: nowrap;
}

.basic-tree li .expanded {
background: url(/images/collapse.gif) no-repeat left center;
padding-right: 1em;
}

.basic-tree li .collapsed {
background: url(/images/expand.gif) no-repeat left center;
padding-right: 1em;
}

.basic-tree li .leafnode {
background: url(/images/expand-collapse-placeholder.gif) no-repeat left center;
padding-right: 1em;
pointer-events: none;
}

.basic-tree li .treeitem {
/* treeitem is deprecated */
border-style: none;
color: #333;
font-size: 1em;
}

.basic-tree li a:hover {
color: #0000ff;
}

/* --------------------- */
/*      Form Styles      */
/* --------------------- */

.basic-form, .custom_report {
    margin-bottom: 1em;
}

.basic-form table, .custom_report table {
    /*TODO*/
    width: 100%;
}

.basic-form table .header-row:hover {
    /*background-color: #ffffff;*/
    color: #000000;
}

.basic-form table tr th,
.basic-form table tr td, .custom_report table tr td {
    padding:.5em .25em .5em .25em;
    vertical-align: top;
}

.basic-form td.nested table, .custom_report td.nested table{
    border:0;
    margin:0;
    padding:0;
    width:auto;
}

.basic-form  td.nested table td,
.basic-form  td.nested table th, .custom_report td.nested table td{
    border:0;
    margin:0;
    padding:0 .5em 0 0;
    white-space: nowrap;
    vertical-align: top;
}

.basic-form table tr .label,
.basic-form table tr .group-label, 
.custom_report table tr .label, 
.custom_report table tr .group-label {
    /* field labels for forms */
    font-weight: bold;
    text-align: right;
    width: 1%;
}

/*TODO*/
.basic-form table tr .group-label, .custom_report table tr .group-label {
/* "header" for field label groups */
font-size: 1.2em;
padding: 2em 1.5em 0 0;
}

.basic-form table tr th,
.basic-form table .header-row, .custom_report table .header-row {
    font-weight: bold;
    text-align: left;
}

.basic-form table .header-row:hover,
.basic-form table tr th:hover, .custom_report table .header-row:hover {
/*background-color: #ffffff;*/
/*color: #000000;*/
}

.basic-form table .header-row th,
.basic-form table .header-row td, .custom_report table .header-row td {
    border-bottom: 0.1em solid #999999;
}

.basic-form table .alternate-row, .custom_report table .alternate-row {
/* Alternating row style */
/*background-color: #eeeeee;*/
}

.basic-form table tr td .disabled, .custom_report table tr td .disabled {
/*background-color: #cccccc;*/
color: #333366;
text-decoration: none;
}

.custom_report table tr td.label {
    width: 10%;
}

/*      Form decorator - Form Widget      */

.form-widget table tr .label,
.form-widget-table tr .label {
/* Added for backward compatibility */
width: 20%;
}

.form-widget table,
.form-widget-table {
width: auto;
}

.form-widget-table {
margin-bottom: 1em;
}

/* ------------------------------- */
/*      List Navigation Style      */
/* ------------------------------- */

.nav-pager {
background-color: #333;
color: #ffffff;
font-weight: bold;
line-height: 2.5em;
height: 2.5em;
/* margin: 0.5em 0 0.5em 0; */
}

.nav-pager ul {
display: inline; /* IE Fix */
}

.nav-pager ul li {
border-right: solid #222 0.1em;
border-left: solid #444 0.1em;
float:left;
vertical-align: center;
}

.nav-pager ul li a {
display: block;
}

.nav-pager ul a {
color: #ffffff;
padding: 0 1em 0 1em;
text-decoration: none;
}

.nav-pager ul a:hover {
background-color: #999;
}

.nav-pager ul .nav-pagesize,
.nav-pager ul .nav-page-select,
.nav-pager ul .nav-displaying {
padding: 0 1em 0 1em;
}

.nav-pager ul .nav-first-disabled,
.nav-pager ul .nav-previous-disabled,
.nav-pager ul .nav-next-disabled,
.nav-pager ul .nav-last-disabled {
color: #D4D0C8;
padding: 0 1em 0 1em;
}

.nav-pager ul .nav-displaying {
border-right: none;
}

/* ------------------------------- */
/*      Visual Embellishments      */
/* ------------------------------- */

.field-lookup a {
background: url(/images/fieldlookup.gif) no-repeat 0 0;
display: inline-block;
vertical-align: top;
margin-top: 0.3em;
width: 16px; /* Setting must be in px */
height: 16px; /* Setting must be in px */
}


/* --------------------------- */
/*      FieldGroup Styles      */
/* --------------------------- */

.fieldgroup-title-bar {
    /* border-top: 0.1em solid #DADADA;*/
    font-size: 1em;
    font-weight: bold;
    /* padding: 0.1em 0.5em 0.2em 0.5em;*/
}

.fieldgroup-title-bar ul .collapsed,
.fieldgroup-title-bar ul .collapsed:hover {
background: url(/images/expand.gif) no-repeat left center;
min-height: 1.1em;
min-width: 1.1em;
}

.fieldgroup-title-bar ul .expanded,
.fieldgroup-title-bar ul .expanded:hover {
background: url(/images/collapse.gif) no-repeat left center;
min-height: 1.1em;
min-width: 1.1em;
}

.fieldgroup-title-bar a {
cursor: pointer;
text-decoration: none;
padding-left: 10px; /* Setting must be in px */
color: #000000;
}

/* ----------------------------------------- */
/*      Portlet configuration screenlet      */
/* ----------------------------------------- */

.portlet-config {
  background-color: #D4D0C8;
  border: 0.2em solid #D4D0C8;
  margin-bottom: 0.5em;
}

.portlet-config-title-bar .title {
color: #555555;
font-size: 1.2em;
float: left;
}

.portlet-config-title-bar ul {
display: inline; /* IE Fix */
}

.portlet-config-title-bar ul li {
float: right;
font-size: 1em;
font-weight: bold;
padding: 0.1em 0.5em 0.2em 0.5em;
}

.portlet-config-title-bar ul li.move-up {
background: url(/images/arrow-single-up-green.png) no-repeat center center;
}
.portlet-config-title-bar ul li.move-down {
background: url(/images/arrow-single-down-green.png) no-repeat center center;
}
.portlet-config-title-bar ul li.move-left {
background: url(/images/arrow-single-left-green.png) no-repeat center center;
}
.portlet-config-title-bar ul li.move-right {
background: url(/images/arrow-single-right-green.png) no-repeat center center;
}
.portlet-config-title-bar ul li.move-top {
background: url(/images/arrow-end-up-green.png) no-repeat center center;
}
.portlet-config-title-bar ul li.move-bottom {
background: url(/images/arrow-end-down-green.png) no-repeat center center;
}
.portlet-config-title-bar ul li.remove {
background: url(/images/mini-trash.png) no-repeat center center;
}
.portlet-config-title-bar ul li.edit {
background: url(/images/mini-edit.png) no-repeat center center;
}


/* == Portal Manager Toolbar == */

#manage-portal-toolbar {
background-color:#D4D0C8;
margin-bottom: 0.5em;
}

#manage-portal-toolbar ul li {
float: left;
padding: 0.1em 0.5em 0.2em 0.5em;
}

#manage-portal-toolbar #config-on-off,
#manage-portal-toolbar #manage-portal-page,
#manage-portal-toolbar #add-column {
float: right;
}

#manage-portal-toolbar #portal-page-name {
font-size: 1.5em;
font-weight: bold;
}

.manage-portal-column-toolbar #add-portlet,
.manage-portal-column-toolbar #delete-column,
.manage-portal-column-toolbar #column-width {
float: right;

}

/*=================== For the quickadd page =================================*/

.quickaddall{
float:right;
padding-bottom:1em;
padding-top:1em;
}

.quickaddtable{
display:inline-block;
clear:both;
}

.quickaddtable span {
display:inline;
float:left;
border-right:0.1em solid #999999;
border-top:0.1em solid #999999;
margin:0;
padding:0.3em;
}

.quickaddtable p {
clear:left;
height:100% !important; height:1em;
}

.quickaddtable span.pid {
width:10%;
}

.quickaddtable span.name {
width:50%;
text-align:left;
}

.quickaddtable span.listPrice {
width:10%
}

.quickaddtable span.totalPrice {
width:10%
}

.quickaddtable span.qty {
width:10%
}

/* `Widths
----------------------------------------------------------------------------------------------------*/

.input_tiny {
    width: 50px;
}

.input_small {
    width: 100px !important;
}

.input_medium {
    width: 150px !important;
}

.input_large {
    width: 200px;
}

.input_xlarge {
    width: 250px;
}

.input_xxlarge {
    width: 300px;
}

.input_full {
    width: 100%;
}

/*
    Added via JS to <textarea> and class="input_full".
    Applies to IE6, IE7. Other browsers don't need it.
*/
.input_full_wrap {
    display: block;
    padding-right: 8px;
}



/* ------------------------------- */
/*      Browse Category Style      */
/* ------------------------------- */

.browsecategorylist {
margin-left: 1em;
}

.browsecategorytext {
color: #333;
font-weight: bold;
padding-left: 10px; /* Setting must be in px */
background:url(/images/bg_bullet_full_2.gif) no-repeat 0px 0.5em;
}

A.browsecategorybutton {
color: #333;
}

.browsecategorybuttondisabled {
color: #333333;
font-weight: bold;
}

/* ----------------------------------- */
/*      Event/Error Message Style      */
/* ----------------------------------- */
#global-message {
    padding:0.5em;
    margin: 0.5em 0.5em 0.5em 0.5em;
    background:#fbe3e4;
    
    border-color:#fbc2c4;
    border-style:solid;
    border-width:1px;
    
    font-weight: bold;
    font-size: 1em;
    
    color:#8a1f11;
    
    text-align:center;
    
    -moz-border-radius:                 .5em /*{global-radii-blocks}*/;
    -webkit-border-radius:              .5em /*{global-radii-blocks}*/;
    border-radius:                      .5em /*{global-radii-blocks}*/;
}

.content-messages {
    background-color:#FFFFFF;
    padding:.5em;
    
}


.contentarea .content-messages{
    padding-left:0;
    padding-right:0;
    padding-top:0;
}


.content-messages .content {
    padding:0.5em;

    border:1px solid #ddd;
    
    -moz-border-radius:                 .5em /*{global-radii-blocks}*/;
    -webkit-border-radius:              .5em /*{global-radii-blocks}*/;
    border-radius:                      .5em /*{global-radii-blocks}*/;
}

.content-messages  .content p {
    font-weight: bold;
    margin-bottom:.25em;
    font-size: 1em;
    
    margin: 0.5em 0 0.5em 0;
}

.content-messages  .content ul {
    /* Empty */
}

.content-messages  .content ul li {
    /* Empty */
}


.eventMessage  .content {
    background:#D5EDF8;
    color:#205791;
    border-color:#92CAE4;
}

.errorMessage  .content {
    background:#fbe3e4;
    color:#8a1f11;
    border-color:#fbc2c4;
}

.successMessage  .content {
    background:#C6EFCE;
    color:#264409;
    border-color:#00B050;
}

.noticeMessage  .content {
    background:#fff6bf;
    color:#514721;
    border-color:#ffd324;
}

.infoMessage  .content {
    background:#D5EDF8;
    color:#205791;
    border-color:#92CAE4;
}

/* ------------------------ */
/*      Product Styles      */
/* ------------------------ */

.basePrice {
color: #000000;
}

.normalPrice {
color: #008000;
}

.salePrice {
color: #ff0000;
}
.product-prevnext {
text-align: right;
}

.productsummary-container {
border-top: #999 solid 0.1em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.productsummary {
border-bottom: #999 solid 0.1em;
/* using min-height as an alternative to clear: both; because that, in some browsers, will clear the top-level columns and not just in this div (Mozilla based, namely) */
min-height: 6em;
overflow: visible;
padding: 0.5em;
position: relative;
}

.productsummary .smallimage {
float: left;
/* position: absolute; top: 5px; left: 5px; */
margin: 0 0.5em 0.5em 0;
}
.productsummary .smallimage img {
border: #CCC solid 0.1em;
height: 5em;
}

.productsummary .productbuy {
float: right;
margin: 0.5em;
text-align: right;
width: 13em;
}

.productsummary .productinfo {
/* margin-left: 60px; */
text-align: left;
}

#productdetail #long-description {
border-top: #999 solid 0.1em;
margin-top: 1em;
padding-top: 0.5em;
}

#productdetail #reviews {
border-top: #999 solid 0.1em;
margin-top: 1em;
padding-top: 0.5em;
}

#productdetail #associated-products {
border-top: #999 solid 0.1em;
margin-top: 1em;
padding-top: 0.5em;
}

.treeWrapper {
background-color: #ffffff;
border-top: 0.1em solid #000000;
border-left: 0.1em solid #000000;
color: #000000;
font-size: 1.6em;
font-weight: normal;
margin-left: 1.2em;
margin-top: 0.2em;
text-decoration: none;
}

/* ------------------------- */
/*      HTML Log Styles      */
/* ------------------------- */

.DEBUG {
color: #808080;
}

.WARN {
color: #0000ff;
font-weight: bold;
}

.INFO{
color: #008000;
}

.ERROR {
border: 0.2em solid #ff0000;
color: #ff0000;
font-weight: bold;
}

/* ---------------------------- */
/*     Multi-Column Styles      */
/* ---------------------------- */

#column-container {
margin: auto;
padding: .5em;
}

#column-container h1,
#column-container .h1,
#column-container h2,
#column-container .h2 {
margin-bottom: 0.5em;
}

#column-container h1,
#column-container .h1 {
color: #557996;
}

#column-container .left {
float: left;
/* alt: position: absolute; top: 0px; left: 0px; */
width: 22em;
margin-right: 1em;
}

#column-container .left-larger {
float: left;
/* alt: position: absolute; top: 0px; left: 0px; */
width: 25em;
margin-right: 1em;
}

.lefthalf {
float: left;
height: 1%;
left: 0;
margin: 0% 1% 1% 0%;
width: 49%;
}

.righthalf {
float: right;
height: 1%;
margin: 0 0 1% 1%;
right: 0;
width: 49%;
}

#column-container .right {
float: right;
margin-left: 1em;
width: 22em;
}

#column-container .leftonly {
margin-left: 23em;
width: auto;
}

#column-container .leftonly-larger {
margin-left: 26em;
width: auto;
}

#column-container .rightonly {
margin-right: 23em;
width: auto;
}

#column-container .center {
margin-left: 23em;
margin-right: 23em;
width: auto;
}

#column-container .nocolumns {
width: auto;
}

#column-container .centeronly {
margin-left: 40em;
margin-right: 40em;
width: auto;
}


#column-container .centerSave {
margin-left: 56.5em;
margin-right: 0em;
width: auto;
}

#column-container .centerupload {
margin-left: 49.9em;
margin-right: 0em;

width: auto;
}













/*Formalize CSS - http://formalize.me */
.input_tiny {
  width: 50px;
}

.input_small {
  width: 100px;
}

.input_medium {
  width: 150px;
}

.input_large {
  width: 200px;
}

.input_xlarge {
  width: 250px;
}

.input_xxlarge {
  width: 300px;
}

.input_full {
  width: 100%;
}

.input_full_wrap {
  display: block;
  padding-right: 8px;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

input:invalid,
button:invalid,
a.button:invalid,
select:invalid,
textarea:invalid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
input:focus,
button:focus,
a.button:focus,
select:focus,
textarea:focus {
  -webkit-box-shadow: #0066ff 0 0 5px 0;
  -moz-box-shadow: #0066ff 0 0 5px 0;
  box-shadow: #0066ff 0 0 5px 0;
  z-index: 1;
}

input[type="file"]:focus, input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

button,
a.button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
  -webkit-appearance: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  background: #dddddd url('../images/button.png?1298351022') repeat-x;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -webkit-linear-gradient(#ffffff, #dddddd);
  background-image: -moz-linear-gradient(#ffffff, #dddddd);
  background-image: -o-linear-gradient(#ffffff, #dddddd);
  background-image: linear-gradient(#ffffff, #dddddd);
  border: 1px solid;
  border-color: #dddddd #bbbbbb #999999;
  cursor: pointer;
  color: #333333;
  display: inline-block;
  font: bold 12px/1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
  outline: 0;
  overflow: visible;
  margin: 0;
  padding: 3px 10px;
  text-shadow: white 0 1px 1px;
  text-decoration: none;
  vertical-align: top;
  width: auto;
  *padding-top: 2px;
  *padding-bottom: 0;
}
button:hover,
a.button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(1px, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
  background-image: -moz-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
  background-image: -o-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
  background-image: linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
  text-decoration: none;
}
button:active,
a.button:active,
input[type="reset"]:active,
input[type="submit"]:active,
input[type="button"]:active {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(#dddddd, #eeeeee);
  background-image: -moz-linear-gradient(#dddddd, #eeeeee);
  background-image: -o-linear-gradient(#dddddd, #eeeeee);
  background-image: linear-gradient(#dddddd, #eeeeee);
  -webkit-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
  -moz-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
  box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
  border-color: #999999 #bbbbbb #dddddd;
}
button::-moz-focus-inner,
a.button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

a.button {
  *padding-bottom: 3px;
}

button {
  *padding-top: 1px;
  *padding-bottom: 1px;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  background-color: white;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: black;
  outline: 0;
  margin: 0;
  padding: 2px 3px;
  text-align: left;
  font-size: 12px;
  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
  height: 1.8em;
  vertical-align: top;
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}
textarea[disabled],
select[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
  background-color: #eeeeee;
}

button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
a.button_disabled {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  color: #888888;
  cursor: default;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #888888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888888;
}

input.placeholder_text,
textarea.placeholder_text {
  color: #888888;
}

textarea,
select[size],
select[multiple] {
  height: auto;
}

select[size="0"],
select[size="1"] {
  height: 1.8em;
  *height: auto;
}

@media (-webkit-min-device-pixel-ratio: 0) {
  select[size],
  select[multiple],
  select[multiple][size] {
    background-image: none;
    padding-right: 3px;
  }

  select,
  select[size="0"],
  select[size="1"] {
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
  }

  ::-webkit-validation-bubble-message {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
    border: 0;
    color: white;
    font: 13px/17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
    overflow: hidden;
    padding: 15px 15px 17px;
    text-shadow: black 0 0 1px;
    min-height: 16px;
  }

  ::-webkit-validation-bubble-arrow,
  ::-webkit-validation-bubble-top-outer-arrow,
  ::-webkit-validation-bubble-top-inner-arrow {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #666666;
    border-color: #666666;
  }
}
textarea {
  min-height: 40px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  color: black;
  font-style: normal;
  font-weight: normal;
  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
}
optgroup::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ie6_button,
* html button,
* html a.button {
  background: #dddddd url('../images/button.png?1298351022') repeat-x;
  border: 1px solid;
  border-color: #dddddd #bbbbbb #999999;
  cursor: pointer;
  color: #333333;
  font: bold 12px/1.2 Arial, sans-serif;
  padding: 2px 10px 0;
  text-decoration: none;
  overflow: visible;
  vertical-align: top;
  width: auto;
}

* html a.button {
  position: relative;
  top: 3px;
  padding-bottom: 2px;
}

* html button {
  padding-top: 1px;
  padding-bottom: 1px;
}

.ie6_input,
* html textarea,
* html select {
  background: white;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: black;
  padding: 2px 3px 1px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  vertical-align: top;
}

* html select {
  margin-top: 1px;
}

.placeholder_text,
.ie6_input_disabled,
.ie6_button_disabled {
  color: #888888;
}

.ie6_input_disabled {
  background: #eeeeee;
}


.underlined {
    text-decoration:underline;
}

.italic {
    font-style:italic;
}

.bold {
    font-weight:bold;
}
.break-word{
    word-break: break-word;
}
.lookup_td .field-lookup div {
    margin-bottom : 0px;
}
.back_button {
    margin-left: 1em; 
    vertical-align: -webkit-baseline-middle;
}
.inner-tooltip {
    padding-top:10px;
    margin-bottom: 0px !important;
}
.light-grid td > form, .light-grid th:has(form), .light-grid .header-row th:has(form), .light-grid .header-row td:has(form) {
    border: none !important;
}
.align-link {
    vertical-align: middle !important;
    padding-right: 50em !important;
}

td span.alert{
    color : black;
}


/* ---------------------------- */
/*     Progress Tracker         */
/* ---------------------------- */
#progress-tracker-container {
    /*margin-bottom:1em;*/
    padding:1em .5em .5em .5em;
}
#progress-tracker-container::after {
    content: "\A\A\A";
    white-space: pre;
    display: block;
}
.progress-tracker {
    /* Empty */
}

.progress-tracker ol.steps {
    padding: 0;
    margin: 0;
    list-style-position: inside;
    list-style-type: none;
}


.progress-tracker ol.steps li {
    list-style-position: inside;
    list-style-type: none;
    
    float:left;
    
    margin-right:10px;
    
    font-size:115%;
    
    color:#666;

    border-bottom-width:4px;
    border-bottom-style:solid;
    border-bottom-color:#dfeadd;
    
}

.progress-tracker ol.steps li .content {
    padding-top:5px;
    padding-bottom:5px;
    float:left;
}


.progress-tracker ol.steps li .step {
    color: #FFFFFF;
    background: #dfeadd;
    width:26px;
    display: inline-block;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 13px;
    height: 26px;
    border:0;
    margin-right:5px;
}


.progress-tracker ol.steps li.current .step {
    background: #457445;
}

.progress-tracker ol.steps li.first {
    /* Empty */
}

.progress-tracker ol.steps li.last {
    margin-right:0;
}

.progress-tracker ol.steps li.current {
    color:#000;
    border-bottom-color:#457445;
    font-weight:bold;
}
#progress-tracker-container.order-entry-with-charges .progress-tracker ol.steps li {
    width:19%;  /*this takes into account the base margins */
}
#progress-tracker-container.order-entry .progress-tracker ol.steps li {
    width:24%;  /*this takes into account the base margins */
}
.menu-link{
    margin-bottom: 1em;
}
.inner-table tr td,tr.ignore-border td {
    border: 0px !important;
}
select.select-small {
    width: 100px !important;
}
select.select-small + .select2-container {
     min-width: 170px;
}
select.select-large {
    width: 300px !important;
}
select.select-large + .select2-container {
     min-width: 370px;
}
.headerdialog {
    border: 0px;
    background: #eeeeee;
}
.buttondialog {
    border: 0px #79b7e7;
    background: #eeeeee;
    font-weight: bold;
    color: #0d0e0e;
}
.buttonsdialog {
    border: 0px solid #79b7e7; 
    background: #eeeeee; 
    font-weight: bold; 
    color: #0d0e0e; 
}

.quickhiredialog {
    background: #f6f6f6;
    color: #222222;  
}

.dialogfont {
    font-family: arial,helvetica,clean,sans-serif;
    font-size: 12px;
}

.closebutton {
    display: block;
}

.scrollbar {
    height: 100px;
    overflow: auto;
}
.select2-selection__rendered{
  overflow: hidden !important;
}
tr.advanceSearchRow.rowHide {
    display: none !important;
}
tr.advanceSearchRow.rowShow {
    display: table-row !important;
}

select.select-tiny + .select2-container {
     min-width: 70px !important;
}

select.select-tiny1 + .select2-container {
     min-width: 90px !important;
}

li.nav-page-select select,li.nav-pagesize select {
    margin-top: 0.1cm;
}
#acctgTransDetailReportPdfID {
        margin-top: 0.1cm;
}
.nested-buttontext:not(:first-of-type) {
    border-left: 0.1em solid #dedede;
    padding: 0em 0em 0em 0.5em;
    margin-left: 0.2em;
}

img#profile-image {
    max-width: 630px;
}
img.cssImgXLarge {
    /*border: 1px black solid;*/
    max-width: 200px;
    max-height: 150px;
}

img.cssImgLarge {
    /*border: 1px black solid;*/
    max-width: 100px;
    max-height: 75px;
}

img.cssImgStandard {
    /*border: 1px black solid;*/
    max-width: 70px;
    max-height: 52px;
}

img.cssImgSmall {
    /*border: 1px black solid;*/
    max-width: 50px;
    max-height: 37px;
}


ul.tree, ul.tree * {
    list-style-type: none;
    margin: 0;
    padding: 0 0 5px 0;
}
ul.tree img.arrow {
    padding: 2px 0 0 0;
    border: 0;
    width: 20px;
}
ul.tree li {
    padding: 5px 0 0 0;
}
ul.tree li ul {
    padding: 0 0 0 20px;
    margin: 0;
}
ul.tree label {
    cursor: pointer;
    padding: 0 0 5px 0;
    margin: 0;
    vertical-align: -webkit-baseline-middle;
}
p {
    margin: 5px 15px;
}
ul {
    margin-top: 5px;
    margin-bottom: 5px;
}
ul.tree li .arrow {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    float: left;
    background: transparent no-repeat 0 4px;
}
ul.tree li .collapsed {
    background-image: url(images/collapsed.gif);
}
ul.tree li .expanded {
    background-image: url(images/expanded.gif);
}

ul.tree li .checkbox {
    width: 20px;
    height: 18px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    float: left;
    background: url(images/check0.gif) no-repeat 0 0px;
}
ul.tree li .checked {
    background-image: url(images/check2.gif);
}
ul.tree li .half_checked {
    background-image: url(images/check1.gif);
}

.basic-table  .arrow.collapsed {
    visibility: visible;
}
.child {
    display: none;
   /*  padding-left:15px; */
    color: blue;
}

.expand {
    cursor:pointer;
    vertical-align:top
}
/* Overall background to set transparent */
.modalLoader {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: transparent; /* Black w/ opacity */
}
/* added image for a div */
#loading-spinner-image {
    height: 45px;
    width: 45px;
    top:50%;
    left:50%;
    position:fixed;
    background-repeat: no-repeat;
    background-image: url(/images/spinner.gif);
}
td.portal-column:first-child,td#portalColumn_00001 {
    border-spacing: 10px;
    margin: 100px;
    padding-right: 10px;
}

.no-sort::after { display: none!important; }

.screenlet-title-bar ul .modify a:hover{
    color: #000;    
}

.screenlet-title-bar ul a:hover {
    color: #222;
    display: block;
    text-decoration: underline; 
}
.mainAction{
    background: #0c7fa4 !important;
    color: white !important;
    text-shadow: #ffffff00 0 1px 1px !important;
    border-color: #0c7fa4 #0c7fa4 #0c7fa4 !important;
    margin-right: 0.5em !important;
}
.mainActionEnable{
    background: #0c7fa4 !important;
    color: white !important;
    text-shadow: #ffffff00 0 1px 1px !important;
    border-color: #0c7fa4 #0c7fa4 #0c7fa4 !important;
}

input[type="text"], input[type="password"]{
        width: 300px;

}
td.nested table .date_tiny{
  	width: 146px !important;
}
.input_tiny {
    width: 11% !important;
} 
.date-tiny{
    width: 146px !important;
}
::placeholder {
    font-size: 11px;
}
.input_editable_tiny{
    width: 98% !important;
    text-align: right !important;
}
.input_medium_tiny{
    width: 98% !important;
}
.input_editable{
    width: 98% !important;
}
.alternate-row {
/* Alternating row style */
background-color: #eeeeee !important;
}

.tooltip {
    position: relative;
    display: inline-block;
     margin:0px;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    padding: 2px;
    border: 1px solid #000;
    word-wrap: break-word;
       background-color: #fcfce4;
    color: black;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.image--cover {
  width: 30px;
  height: 30px;
  border-radius: 50%;

  object-fit: cover;
  object-position: center right;
}

.toggle,
[id^=drop] {
    display: none;
}

/* Sub Menus */
.nav li ul {
  position: absolute;
  display: none;
  width: 180px;
  padding: 4px;
  background:#D5EDF8;
  border: 1px solid rgb(12,127,164);
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  
}
.nav ul li ul li a{
    padding: 20px !important;
}
.nav li:hover ul {
  display: block;
}

.nav li ul li {
  display: block;
}

.note-info {
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b;
    padding: 4px 16px;
}

#highlight-on-focus a {
    color: #008000;
    font-weight: bold;
}

table.portletTable tr td {
    
    padding-right: 4px;
    border-collapse: inherit !impotant;
    border: none !important;
    border-spacing : 0;
}

.portal-column{
    
    padding-right: 4px;
    border-collapse: inherit !impotant;
    border: none !important;
    border-spacing : 0;
}

.biChart {
    height: 350px !important; 
    min-width: 310px;
    margin: 0 auto;
}
.highcharts-menu-item {
    padding : 0px;
}

a.buttontext.disabled {
    cursor: no-drop;
    text-decoration: none;
}
select.select-small130 + .select2-container {
     min-width: 130px;
     max-width: 130px;
}
select.select-small90 + .select2-container {
     min-width: 90px;
     max-width: 90px;
}
select.select-small110 + .select2-container {
     min-width: 110px;
     max-width: 110px;
}
select.select-small140 + .select2-container {
     min-width: 140px;
     max-width: 140px;
}
div.actionDivStyle {
    margin: 0.4em 0.1em;
}
a.buttonPaddingStyle{
    margin: 0.4em 0.05em; !important
}
.main-panel #column-container #content-main-section .createNoteRemoveButton{ /*Quote>Select a Quote>Quote Items>Quote Note>remove button*/
    background: transparent;
    text-decoration: underline;
    border: none;
    color: #333;
    font-size: 11px;
    border-left: 0.1em solid #dedede;
    vertical-align: middle;
    position: relative;
    top: -22px;
    right: -60px;
    border-radius: 0px;
}
#content-main-section .shipGroupScreenlet-title-bar{
    margin-left: -15px;
    margin-right: -15px;
}
.close{
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
/*Below three classes are used in HR>View Public Holiday screen*/
.publicHolidayTitle{
    flex-grow: 1; 
    margin-left: 10px; 
    margin-top: 6px;
}
.publicHolidayBranchName{
    margin-right: 6px;
}
.publicHolidaySelectedYear{
    margin-right: 45px;
}
.crm-margin-right{
    margin-right: 50px;
}
.crm-margin-top{
    margin-top: 6px;
}
.crm-margin-top2{
    margin-top: -5px;
}
div.dt-buttons{
    margin-top: -40px !important;
}

/* The CRM modal Close Button */
.crm-modal-close {
    color: black;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position:absolute;
    top:104px;
    right:104px;
    opacity:0.5;
}

.crm-modal-close:hover,
.crm-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    opacity:2;
}

.crm-modal-close-custom {
    color: black;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position:absolute;
    top:104px;
    right:104px;
    opacity:0.5;
}

.crm-modal-close-custom:hover,
.crm-modal-close-custom:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    opacity:2;
}

.export-to-excel-custom-helpdesk{
    background:none !important;
    border:none !important;
    padding:0 !important;
    font-family:arial,sans-serif !important; 
    text-decoration:underline !important;
    cursor:pointer !important;
}
.width-289px{
    width: 289px !important;
}

.checkbox-label{
	display: inline-block;
	margin-right: 0.6rem;
	vertical-align: top;
}

.checkbox-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.checkbox-container input[type="checkbox"] {
    margin: 0;
}

.inner-toggle-link-visibility{
	display:none;
}

.advanced-search-header td.screenlet-title-bar{
	background-color: #4B798738;
    color: #0C7FA4;
}

div#ui-datepicker-div{
	margin-top: 4px;
}
.custom-hr{
	border-bottom: 0.1px solid #d3d3d3;
}
.close-task {
    color: #000000;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position:absolute;
	top:0%;
	right:8.2%;    
}

/** ofbiz 24 changes **/
.nav-pager input.pagination-control{
	width: 150px;
	vertical-align: middle;
}

/* Double scrollbar issue in lookup pagination fix */
[id$="_lookupId"] .screenlet {
  overflow: hidden;
}
.radio-up {
    position: relative;
    top: -3px;
}
.label-up {
    position: relative;
    top: -3px;
}
.addUl{
	text-decoration: underline !important;
}
/* Dropdown Button */
.dropbtn {
  background: #0c7fa4 !important;
   color: white !important;
   text-shadow: #ffffff00 0 1px 1px !important;
   border-color: #0c7fa4 #0c7fa4 #0c7fa4 !important;
  padding: 2px 4px;
  font-size: 13px;
  cursor: pointer;
  display: inline-block;
  min-width: 142px;
  border-radius: 4px;
}
.dropdown-btn-group {
	position: relative;
	top: -7px;
}
/* Select All Header Row */
.basic-table thead .selectAll{
	display: block;
    margin-left: auto;
    margin-right: auto;
}
/* openSingleActionSelect macro div */
.single-action-select-macro{
	display: inline-block;
}
img.small-img {
    /*border: 1px black solid;*/
    max-width: 50px;
    max-height: 37px;
    margin-top: 8px;
}
/* Check box center alignment */
.center-checkbox-cell {
    text-align: center;
    vertical-align: middle !important;
}

.center-checkbox-cell input[type="checkbox"] {
    display: block;
    margin: auto;
}

/* Note info font size */
.note-data p {
	margin: 0px;
}
/* Note info editor padding */
.trumbowyg-editor {
	padding: 10px;
	padding-left: 0px;
}
/* Hide sorting icon in selectAll checkbox(in Table Header)*/
.no-sort::after{
    background-image: none !important;
}
.modalCost {       
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 630px;
    margin-top:-80px;
    top: 200px;
    width: 30%; 
    height: 30%; 
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* Black w/ opacity */
}
.modalCost .modal-contentCost .screenlet #eftContainer {
	overflow-y: auto;
	max-height: 160px !important;
}
.closeCost {
	cursor: pointer;
}
.dimension-tooltip-icon {
  height: 13px;
  width: 13px;
  border-radius: 0%;
  cursor: pointer;
  display: inline;
  margin-top: -2px;
  margin-right:8px;
}
.dimension-tooltip-icon {
  z-index: 9999 !important;
}
.tooltip-inner .dimension-tooltip-body {
  text-align: left !important;
}
.tooltip-inner .dimension-tooltip-heading {
  text-align: center;
  font-weight: bold;
}
.tooltip-inner .dimension-tooltip-divider {
  margin: 4px 0;
}
* Report Screem Layout */
.screenlet-columns {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
/* Report item */
.report-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.report-item:last-child {
    border-bottom: none;
}
.report-icon {
    margin-right: 8px;
    font-size: 16px;
    color: #2a4a7b;
    flex-shrink: 0;
}
.report-item a {
    font-weight: normal; 
   	color: #333333;
    text-decoration: none;
}
.report-item a:hover {
    text-decoration: underline;
}
.report-item a.disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.5;
}
.report-tooltip {
    position: relative;
    display: inline-block;
    margin: 0px;
    cursor: pointer;
}

.icon-tooltip::before {
    content: '';
    -webkit-mask: url('/crest/int/crest-theme-purple/images/info_icon.svg') no-repeat center;
    mask: url('/crest/int/crest-theme-purple/images/info_icon.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: 16px 12px !important;
    background-color: black;  
    width: 30px;
    height: 12px;
    margin-top: 5px;
    display: inline-block;
}

.report-tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    background: #333;       
    color: #fff;            
    padding: 4px 8px;
    font-size: var(--fs-base);
    border-radius: 4px;
    pointer-events: none;
    white-space: normal;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
	width: max-content;
	min-width: 5ch;
	max-width: 70ch;
	overflow-wrap: anywhere;

    /* position above the icon by default */
    bottom: 100%;
    left: 0;
}

/* Arrow at the bottom of the tooltip */
.report-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%; 
    left: 10px; 
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent  transparent;
}
/* Show tooltip on hover */
.report-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); 
}
.tooltip-overlay {
    overflow: visible;
}