/*
 * We should use custom properties to define frequently used
 * properties like colours, etc.
 *
 * For colours, we should get into the habit of using HSL instead of RGB or hex
 * colour codes.  It's much easier to make sense of these when trying to find
 * a palette of complementary colours:
 *
 * - The first digit represents the hue (the position on a colour wheel)
 * - The second digit represents the saturation (from white at 0% to fully-
 *   saturated at 100%)
 * - The third digit represent the lightness (at 0%, imagine that you've turned
 *   off all the lights in the room)
 *
 * Here's an example, used in .pageHeader:
 */
:root {
    --main-bg-colour: hsl(207, 47%, 33%);
}

/*
 * Without this setting, an element plus its border and padding can amount to
 * more than 100% of the parent width.  I believe this has been responsible for
 * many alignment issues over the years.
 */
* {
    box-sizing: border-box;
}

/*
 * Colours from Andy's palette:
 *
 * - #E7E7DE = hsl(60, 16%, 89%)
 * - #008891 = hsl(184, 100%, 28%)
 * - #00587A = hsl(197, 100%, 24%)
 * - #0F3057 = hsl(213, 71%, 20%)
 */

/*
 * In order to be able to style the HTML header and footer differently, we
 * first needed to restructure the HTML (align document flow with desired 
 * layout, introduce semantic tags, etc).
 *
 * Now that the HTML is restructured, rewrite the styles for header and footer
 * to look like the old styles.  This includes replacing the old background
 * image in the header with gradient directives.  The simulation is pretty
 * close.
 */
.pageHeader {
	display: flex;
	align-items: center;
	gap: 2em;
	padding: 8px 33px;

	/*
	 * Attempt at simulating legacy gradients.
	 */
	background: linear-gradient(
		hsl(0, 0%, 87%) 0%,
		hsl(0, 0%, 87%) 24%,
		hsl(195, 32%, 27%) 24%,
		hsl(195, 30%, 50%) 25%,
		hsl(195, 42%, 44%) 26%,
		var(--main-bg-colour) 60%,
		hsl(204, 39%, 45%) 100%
	);
}

/*
 * Logo sizing and alignment
 */
.logo {
	max-width: 77.5px;
	max-height: 72px;
	display: block;
}
.logo.customerLogoStyle {
	padding-top: 16px;
}

/*
 * Search form
 */
#findRfqForm {
	margin-left: auto;
	align-self: flex-end;
	display: flex;
	gap: 4px;
	color: white;
}
#findRfqForm a {
	color: white;
}

/*
 * Navigation bar/menu
 */
.topNav {
	padding: 10px 30px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.topNav a {
	text-decoration: none;
	color: #000;
	font-size: 14px;
	background: url('../images/misc/top-nav-arrow.png') no-repeat left center;
	padding-left: 10px;
}

/*
 * Footer
 */
.pageFooter {
	margin-top: 1em;
	min-height: 4em;
	display: flex;
	justify-content: center;
	gap: 2px;
	align-items: center;

	/*
	 * Attempt at simulating legacy gradients.
	 */
	background: linear-gradient(
		hsl(0, 0%, 86%) 0%,
		hsl(0, 0%, 96%) 100%
	);
}

.qlmContent {
	width: 100%;
}

/*
 * Consistent styling for dialog elements.
 *
 * Using nested selectors because they are supported by all browsers
 * nowadays.
 */
dialog {
    & form {
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
        gap: 0.5em;
        
        & a,
        & button {
            border-width: 0;
            border-style: solid;
            &:focus {
                border-width: 2px;
                border-color: black;
            }
        }
    }
}

.tabBackground {
	background: url('../images/sourcing/tabs/tabs-bg.png') repeat-x;
	width: 100%;
}

.tabSecBackground {
	background: url('../images/sourcing/tabs/sec-tab-bg.png') repeat-x;
	width: 100%;
}


/* ***************** */
/* formatting styles */
/* ***************** */

a {
	text-decoration: none;
	color: #4392B0;
}

a[qlmdisabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

a img{
	border: 0;
}

image#rfqStatus {
	vertical-align: middle;
}

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

.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.copyright a{
	color: #4392B0;
	text-decoration: none;
}

.help {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
	color: #092689;
	text-align: left;
}

.normalOff {
	font-size: 11px;
	font-family:  Arial, Helvetica, sans-serif ;
	color: #999999;
	}

.headerOff {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold ;
	color: #999999;
	}

.labelOff {
	font-size: 11px;
	font-style: normal;
	font-weight: bold ;
	font-family:  Arial, Helvetica, sans-serif ;
	width: 100px;
	color: #999999;
	}
.label,
label {
	font-size: 11px;
	font-style: normal;
	font-weight: bold ;
	font-family:  Arial, Helvetica, sans-serif;
	}

.error {
	color: #ff6347
}

.totals {
	font-size: 14px;
	font-style: normal;
	font-weight: bold ;
	font-family:  Arial, Helvetica, sans-serif;
	}
.helpOff {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic ;
	color: #999999;
	}
.required,
[required] {
	font-family:  Arial, Helvetica, sans-serif ;
	font-size: 10px;
	background-color: #FFFFB0;
	border-style: solid;
	border-width: 1px;
	border-color: #002657;
	}
.invalidRequired {
	border: thin #FF0000 solid;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 11px ;
	background-color: #FFFF80;
	}
.errorMessage {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #CC0000;
	}
.invalid {
	border: thin #FF0000 solid;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 11px;
	}
p {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 12px;
}
body {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0px;
	background-color: white;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/*
 * The font size of icons somehow changed as a result of this work, presumably
 * by altering the precedence of some of the CSS rules due to the absence of
 * the nesting tables.
 *
 * It wasn't enough to just style ".fa", but adding the "within a body element"
 * selector seems to have done the trick.
 */
body .fa {
	font-size: 16px;
}

main {
    margin-left: 9px;
    margin-right: 9px;
    flex-grow: 1;
}
.rfqID {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: black;

}
.rfqNotes {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.smallItalics3 {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	color: #002567;
}
.rfqID3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #002567;
}
.rfqNotes3 {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #002567;
}
.search {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #002567;
}
.fieldHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #000000;
}
.field,
input,
select,
textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #002657;
}
select {
    overflow-x: scroll;
}
.smallItalics {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	color: #FFFFFF;
}
.mediumItalics {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	color: #002567;
}

.passwordReminder {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
	color: #003366;
}

.header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
}

.headerLarge {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
}

.headerWeak {
	font-weight: normal;
}

li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #003366;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: black;
	margin-bottom: 0px;
}
.welcomeLabel {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #003366;
}
.normal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.messages {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	color: #FF0000;
}

.batch td {
	padding: 5px;
}

.rfqRegion {
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	padding-bottom: 0px;
}

tr.headerTypeRow td {
  	border-bottom:2pt solid black;
  	padding-top: 10px;
  	padding-bottom: 10px;
}

tr.headerTypeRow span {
  	font-size: 16px;
  	font-weight: bold;
}

/* ********** */
/* lvl3 btns  */
/* ********** */
a#lvl3stg1btn1, a#lvl3stg1btn2, a#lvl3stg1btn3, a#lvl3stg1btn4, a#lvl3stg1btn5,
a#lvl3stg2btn1, a#lvl3stg2btn2, a#lvl3stg2btn3, a#lvl3stg2btn4, a#lvl3stg2btn5,
a#lvl3stg3btn1, a#lvl3stg3btn2, a#lvl3stg3btn3, a#lvl3stg3btn4 ,a#lvl3stg3btn5,
a#lvl3stg4btn1, a#lvl3stg4btn2, a#lvl3stg4btn3, a#lvl3stg4btn4, a#lvl3stg4btn5,
a#lvl3stg5btn1, a#lvl3stg5btn2, a#lvl3stg5btn3, a#lvl3stg5btn4, a#lvl3stg5btn5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	display: block;
	width: 128px;
	height: 26px;
	background-repeat: no-repeat;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
	padding-top: 6px;
	padding-right: 0px;
	padding-left: 0px;
	color: black;
	text-decoration: none;
}

a#lvl3stg1btn1, a#lvl3stg2btn2, a#lvl3stg3btn3, a#lvl3stg4btn4, a#lvl3stg5btn5 {
	background-image:   url(../images/sourcing/tabs/sec-tab-on.jpg);
}

a#lvl3stg1btn2, a#lvl3stg1btn3, a#lvl3stg1btn4, a#lvl3stg1btn5,
a#lvl3stg2btn1, a#lvl3stg2btn3, a#lvl3stg2btn4, a#lvl3stg2btn5,
a#lvl3stg3btn1, a#lvl3stg3btn2, a#lvl3stg3btn4, a#lvl3stg3btn5,
a#lvl3stg4btn1, a#lvl3stg4btn2, a#lvl3stg4btn3, a#lvl3stg4btn5,
a#lvl3stg5btn1, a#lvl3stg5btn2, a#lvl3stg5btn3, a#lvl3stg5btn4 {
	background-image:     url(../images/sourcing/tabs/sec-tab-off.jpg);
}

a#lvl3stg1btn2:hover, a#lvl3stg1btn3:hover, a#lvl3stg1btn4:hover, a#lvl3stg1btn5:hover,
a#lvl3stg2btn1:hover, a#lvl3stg2btn3:hover, a#lvl3stg2btn4:hover, a#lvl3stg2btn5:hover,
a#lvl3stg3btn1:hover, a#lvl3stg3btn2:hover, a#lvl3stg3btn4:hover, a#lvl3stg3btn5:hover,
a#lvl3stg4btn1:hover, a#lvl3stg4btn2:hover, a#lvl3stg4btn3:hover, a#lvl3stg4btn5:hover,
a#lvl3stg5btn1:hover, a#lvl3stg5btn2:hover, a#lvl3stg5btn3:hover, a#lvl3stg5btn4:hover {
	background-image:     url(../images/sourcing/tabs/sec-tab-hover.jpg);
}

/* *********** */
/*   Filters   */
/* *********** */

a#filter1stg1, a#filter1stg2, a#filter1stg3, a#filter1stg4, a#filter1stg5,a#filter1stg6,a#filter1stg7,a#filter1stg8,a#filter1stg9,a#filter1stg10,
a#filter2stg1, a#filter2stg2, a#filter2stg3, a#filter2stg4, a#filter2stg5,a#filter2stg6,a#filter2stg7,a#filter2stg8,a#filter2stg9,a#filter2stg10,
a#filter3stg1, a#filter3stg2, a#filter3stg3, a#filter3stg4, a#filter3stg5,a#filter3stg6,a#filter3stg7,a#filter3stg8,a#filter3stg9,a#filter3stg10,
a#filter4stg1, a#filter4stg2, a#filter4stg3, a#filter4stg4, a#filter4stg5,a#filter4stg6,a#filter4stg7,a#filter4stg8,a#filter4stg9,a#filter4stg10,
a#filter5stg1, a#filter5stg2, a#filter5stg3, a#filter5stg4, a#filter5stg5,a#filter5stg6,a#filter5stg7,a#filter5stg8,a#filter5stg9,a#filter5stg10,
a#filter6stg1, a#filter6stg2, a#filter6stg3, a#filter6stg4, a#filter6stg5,a#filter6stg6,a#filter6stg7,a#filter6stg8,a#filter6stg9,a#filter6stg10,
a#filter7stg1, a#filter7stg2, a#filter7stg3, a#filter7stg4, a#filter7stg5,a#filter7stg6,a#filter7stg7,a#filter7stg8,a#filter7stg9,a#filter7stg10,
a#filter8stg1, a#filter8stg2, a#filter8stg3, a#filter8stg4, a#filter8stg5,a#filter8stg6,a#filter8stg7,a#filter8stg8,a#filter8stg9,a#filter8stg10,
a#filter9stg1, a#filter9stg2, a#filter9stg3, a#filter9stg4, a#filter9stg5,a#filter9stg6,a#filter9stg7,a#filter9stg8,a#filter9stg9,a#filter9stg10,
a#filter10stg1, a#filter10stg2, a#filter10stg3, a#filter10stg4, a#filter10stg5,a#filter10stg6,a#filter10stg7,a#filter10stg8,a#filter10stg9,a#filter10stg10 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #002657;
	display: block;
	width: 138px;
	height: 27px;
	background-repeat: no-repeat;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 8px;
	padding-left: 0px;
	text-decoration: none;
	color: white;
}

                     a#filter1stg2:hover, a#filter1stg3:hover, a#filter1stg4:hover, a#filter1stg5:hover, a#filter1stg6:hover, a#filter1stg7:hover, a#filter1stg8:hover, a#filter1stg9:hover, a#filter1stg10:hover,
a#filter2stg1:hover,                      a#filter2stg3:hover, a#filter2stg4:hover, a#filter2stg5:hover, a#filter2stg6:hover, a#filter2stg7:hover, a#filter2stg8:hover, a#filter2stg9:hover, a#filter2stg10:hover,
a#filter3stg1:hover, a#filter3stg2:hover,                      a#filter3stg4:hover, a#filter3stg5:hover, a#filter3stg6:hover, a#filter3stg7:hover, a#filter3stg8:hover, a#filter3stg9:hover, a#filter3stg10:hover,
a#filter4stg1:hover, a#filter4stg2:hover, a#filter4stg3:hover,                      a#filter4stg5:hover, a#filter4stg6:hover, a#filter4stg7:hover, a#filter4stg8:hover, a#filter4stg9:hover, a#filter4stg10:hover,
a#filter5stg1:hover, a#filter5stg2:hover, a#filter5stg3:hover, a#filter5stg4:hover,                      a#filter5stg6:hover, a#filter5stg7:hover, a#filter5stg8:hover, a#filter5stg9:hover, a#filter5stg10:hover,
a#filter6stg1:hover, a#filter6stg2:hover, a#filter6stg3:hover, a#filter6stg4:hover, a#filter6stg5:hover,                      a#filter6stg7:hover, a#filter6stg8:hover, a#filter6stg9:hover, a#filter6stg10:hover,
a#filter7stg1:hover, a#filter7stg2:hover, a#filter7stg3:hover, a#filter7stg4:hover, a#filter7stg5:hover, a#filter7stg6:hover,                      a#filter7stg8:hover, a#filter7stg9:hover, a#filter7stg10:hover,
a#filter8stg1:hover, a#filter8stg2:hover, a#filter8stg3:hover, a#filter8stg4:hover, a#filter8stg5:hover, a#filter8stg6:hover, a#filter8stg7:hover,                      a#filter8stg9:hover, a#filter8stg10:hover,
a#filter9stg1:hover, a#filter9stg2:hover, a#filter9stg3:hover, a#filter9stg4:hover, a#filter9stg5:hover, a#filter9stg6:hover, a#filter9stg7:hover, a#filter9stg8:hover,                      a#filter9stg10:hover,
a#filter10stg1:hover,a#filter10stg2:hover,a#filter10stg3:hover,a#filter10stg4:hover,a#filter10stg5:hover,a#filter10stg6:hover,a#filter10stg7:hover,a#filter10stg8:hover,a#filter10stg9:hover {
	background-image: url(../images/sourcing/tabs/filter-hover.jpg);
}

               a#filter1stg2, a#filter1stg3, a#filter1stg4, a#filter1stg5, a#filter1stg6, a#filter1stg7, a#filter1stg8, a#filter1stg9, a#filter1stg10,
a#filter2stg1,                a#filter2stg3, a#filter2stg4, a#filter2stg5, a#filter2stg6, a#filter2stg7, a#filter2stg8, a#filter2stg9, a#filter2stg10,
a#filter3stg1, a#filter3stg2,                a#filter3stg4, a#filter3stg5, a#filter3stg6, a#filter3stg7, a#filter3stg8, a#filter3stg9, a#filter3stg10,
a#filter4stg1, a#filter4stg2, a#filter4stg3,                a#filter4stg5, a#filter4stg6, a#filter4stg7, a#filter4stg8, a#filter4stg9, a#filter4stg10,
a#filter5stg1, a#filter5stg2, a#filter5stg3, a#filter5stg4,                a#filter5stg6, a#filter5stg7, a#filter5stg8, a#filter5stg9, a#filter5stg10,
a#filter6stg1, a#filter6stg2, a#filter6stg3, a#filter6stg4, a#filter6stg5,                a#filter6stg7, a#filter6stg8, a#filter6stg9, a#filter6stg10,
a#filter7stg1, a#filter7stg2, a#filter7stg3, a#filter7stg4, a#filter7stg5, a#filter7stg6,                a#filter7stg8, a#filter7stg9, a#filter7stg10,
a#filter8stg1, a#filter8stg2, a#filter8stg3, a#filter8stg4, a#filter8stg5, a#filter8stg6, a#filter8stg7,                a#filter8stg9, a#filter8stg10,
a#filter9stg1, a#filter9stg2, a#filter9stg3, a#filter9stg4, a#filter9stg5, a#filter9stg6, a#filter9stg7, a#filter9stg8,                a#filter9stg10,
a#filter10stg1,a#filter10stg2,a#filter10stg3,a#filter10stg4,a#filter10stg5,a#filter10stg6,a#filter10stg7,a#filter10stg8,a#filter10stg9                  {
	background-image: url(../images/sourcing/tabs/filter-off.jpg);
}

a#filter1stg1, a#filter2stg2, a#filter3stg3, a#filter4stg4, a#filter5stg5, a#filter6stg6, a#filter7stg7, a#filter8stg8, a#filter9stg9, a#filter10stg10 {
	background-image: url(../images/sourcing/tabs/filter-on.jpg);
	color: black;
}

a.quoteCast {
	cursor: hand;
}

.filterBottom1{
	background-image:    url(../images/sourcing/tabs/filtersStg1_08.gif);
}
.filterBottom2{
	background-image:    url(../images/sourcing/tabs/filtersStg2_08.gif);
}
.filterBottom3{
	background-image:    url(../images/sourcing/tabs/filtersStg3_08.gif);
}
.filterBottom4{
	background-image:    url(../images/sourcing/tabs/filtersStg4_08.gif);
}
.filterBottom5{
	background-image:    url(../images/sourcing/tabs/filtersStg5_08.gif);
}
.filterBottom6{
	background-image:    url(../images/sourcing/tabs/filtersStg1_08.gif);
}
.filterBottom7{
	background-image:    url(../images/sourcing/tabs/filtersStg2_08.gif);
}
.filterBottom8{
	background-image:    url(../images/sourcing/tabs/filtersStg3_08.gif);
}
.filterBottom9{
	background-image:    url(../images/sourcing/tabs/filtersStg4_08.gif);
}
.filterBottom10{
	background-image:    url(../images/sourcing/tabs/filtersStg5_08.gif);
}


/* ******************** */
/* communication styles */
/* ******************** */

.issueStyle {
	color: #CC9900;
	font-weight: bold;
}

.issueFailedStyle{
	color: #880000;
	font-weight: bold;
}

.notificationStyle {
	color: #000099;
	font-weight: bold;
}
.notificationReplyStyle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000099;
}

.updateDocStyle {
	color: #82BF8E;
	font-weight: bold;
}

.updateDocFailedStyle{
	color: #880000;
	font-weight: bold;
}

.editQuoteStyle {
	color: #FFA500;
	font-weight: bold;
}

.customerStyle {
	color: #804040;
	font-weight: bold;
}

.cancelStyle{
	color: #CC0000;
	font-weight: bold;
}
.otherStyle{
	color: #CC9922;
	font-weight: bold;
}

.customerQuoteStyle{
	color: #8C489F;
	font-weight: bold;
}

.issueCQStyle{
	color: #8000ff;
	font-weight: bold;
}

.customerQuoteResponseStyle{
	color: #443266;
	font-weight: bold;
}

.notificationReplyBkgd {
	background-color: #CCEBFF;
}
.issueReplyStyle {
	color: #9D7600;
	font-weight: bold;
}
.updateDocReplyStyle {
	color: #57805F;
	font-weight: bold;
}
.purchaseOrderIssuedStyle {
	color: #0AA0A0;
	font-weight: bold;
}
.issueReplyBkgd {
	background-color: #FFE79B;
}
.newFromVendorStyle {
	font-weight: bold;
	color: #006633;
}
.newFromVendorBkgd {
	background-color: #75FFA2;
}
.newFromVendorReplyStyle {
	font-weight: bold;
	color: #006600;
}
.awardStyle {
	font-weight: bold;
	color: #009900;
}
.reviewRequestStyle {
	font-weight: bold;
	color: #0000a0;
}
.portletContainer {
	width: 33.3%;
	height: 100%;
	float: left;
	min-height: 500px;
	padding: 0px;
	margin: 0px;
}
.portlet {
	padding: 0px;
	margin: 5px;
	background-color: white;
	position: relative;
	cursor: auto;
	max-width: inherit;
	display: block;
	visibility: visible;
	overflow: hidden;
}
.portletHeader {
	background-color: white;
	background: url(../images/bkgd/grad_black.gif) no-repeat;
	color: white;
	height: 26px;
	text-align: left;
	font-weight: bold;
	white-space: nowrap;
	position: relative;
	top: 0px;
	left: 0px;
	display: block;
	padding: 0px;
	margin: 0px;
	width: 100%;
	z-index: 1;
	overflow: hidden;
}
.portletTitle {
	white-space: nowrap;
	position: relative;
	width: 90%;
	left: 8px;
	top: 6px;
	display: block;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
.portletHeaderEnding {
	background: url(../images/bkgd/portlet-title-right.gif) no-repeat;
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 0px;
	margin: 0px;
	width: 9px;
	height: 26px;
	z-index: 2;
	overflow: hidden;
}
.portletControls {
	text-align: right;
	width: 70;
	white-space: nowrap;
	cursor: pointer;
	position: absolute;
	right: 12px;
	top: 3px;
	font-size: xx-small;
	display: block;
	padding: 0px;
	margin: 0px;
	z-index: 99;
	overflow: hidden;
}
.portletContents {
	background: url(../images/bkgd/portlet-bg-left.gif) no-repeat bottom left;
	display: block;
	position: relative;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	z-index: 2;
}
.portletContentBody {
	border-right: 1px solid #d0d0d1;
	overflow: hidden;
	position: relative;
	z-index: 4;
}
.portletContentEnding {
	background: url(../images/bkgd/portlet-bg-right.gif) no-repeat bottom right;
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	padding: 0px;
	margin: 0px;
	overflow: visible;
	z-index: 4;
}
.portletContents ul {
	list-style-image: url(../images/icons/bullet.gif);
	list-style-type: circle;
	margin-bottom: 0px;
	margin-top: 5px;
	padding-bottom: 10px;
}
.portletContents li {
}

.portlets li.feed a {
	color: white;
}
.feedTitle {
	text-align: left;
	font-weight: bold;
	font-size: 12px;
	vertical-align: middle;
}
.portlets ul {
	text-align: left;
	margin-left: 0px;
	padding-left: 0px;
}
.portletHover {
	background-color: #EAF5FC;
}
.palette-column {
	position: relative;
	width: 300px;
	margin: 1px;
	border: 1px;
	padding: 1px;
	border: solid;
	border-color: #d0d0d1;
	border-width: thin;
	min-height: 100px;
}

.palette-column .portlet {
	padding: 1px;
	padding-top: 3px;
	padding-left: 3px;
	color: white;
	margin: 1px;
	height: 23px;
	background: #5b5b5b url(../images/bkgd/grad_black.gif);
	position: relative;
	width: 300px;
	cursor: auto;
	visibility: visible;
	overflow: hidden;
	vertical-align:middle;
}

.palette .divider{
	position: relative;
}

.palette .divider img{
	border: medium none;
}

.palette .divider a{
	text-decoration:none;
	color:#008fd4;
}

.insideDivider {
	position: absolute;
	height: 200 px;
	width: 80px;
	align: center;
	vertical-align: middle;
	min-height: 100px;
}

.palette-column .portlet img{
	position:absolute;
	top: 2px;
	right: 5px;
	border: 0px;
	height: 21px;
	width: 21px;
}

.palette {
	text-align:center;
}

.palette table {
	text-align:left;
	margin:auto;
}

ul#batchTransitions li {
	display: inline-block;
	vertical-align: middle;

	/* For IE 7 */
	zoom: 1;
	*display: inline;
}


#category_0_avail, #category_0
{
	width: 200px;
	max-width: 200px;
}


/*
 * Styles for making tables scrollable.  TODO: Pull this out in to individual style
 * sheets for their respective pages.
 */


/***********************************
 *  Vendor Admin Table
 ***********************************/

#vendorAdminTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#vendorAdminTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#vendorAdminTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#vendorNameCell, #vendorNameCellHeader
{
	width:260px;
	min-width:260px;
	max-width:260px;
}

#vendorContactCell, #vendorContactCellHeader
{
	width:131px;
	min-width:131px;
	max-width:131px;
}

#vendorRatingCell, #vendorRatingCellHeader
{
	width:100px;
	min-width:100px;
	max-width:100px;
}

#vendorEnabledCell, #vendorEnabledCellHeader
{
	width:51px;
	min-width:51px;
	max-width:51px;
}

#issuableCell, #issuableCellHeader
{
	width:56px;
	min-width:56px;
	max-width:56px;
}

#selectableCell, #selectableCellHeader
{
	width:68px;
	min-width:68px;
	max-width:68px;
}

#viewVendorCell, #viewVendorCellHeader
{
	width:34px;
	min-width:34px;
	max-width:34px;
}

#editVendorCell, #editVendorCellHeader
{
	width:28px;
	min-width:28px;
	max-width:28px;
}

#quoteCastCell, #quoteCastCellHeader
{
	width:20px;
	min-width:20px;
	max-width:20px;
}

#reportCell, #reportCellHeader
{

}


/***********************************
 *  Customer Admin Table
 ***********************************/

#customerAdminTableWrapper, #vendorAdminTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#customerAdminTheader, #vendorAdminTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#customerAdminTbody, #vendorAdminTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#customerNameCell, #customerNameCellHeader, #vendorNameCell, #vendorNameCellHeader
{
	width:175px;
	min-width:175px;
	max-width:175px;
}

#customerContactCell, #customerContactCellHeader, #vendorContactCell, #vendorContactCellHeader
{
	width:175px;
	min-width:175px;
	max-width:175px;
}

#customerContactEmailCell, #customerContactEmailCellHeader, #vendorContactEmailCell, #vendorContactEmailCellHeader
{
	width:175px;
	min-width:175px;
	max-width:175px;
}

#customerContactPhoneCell, #customerContactPhoneCellHeader, #vendorContactPhoneCell, #vendorContactPhoneCellHeader
{
	width:150px;
	min-width:150px;
	max-width:150px;
}

#viewCustomerCell, #viewCustomerCellHeader, #viewVendorCell, #viewVendorCellHeader
{
	width:47px;
	min-width:47px;
	max-width:47px;
}

#editCustomerCell, #editCustomerCellHeader, #editVendorCell, #editVendorCellHeader
{
	width:40px;
	min-width:40px;
	max-width:40px;
}

#gapCustomerCell, #gapCustomerCellHeader, #gapVendorCell, #gapVendorCellHeader
{

}

/***********************************
 *  Customer Contacts Admin Table
 ***********************************/

#customerContactsTableWrapper, #vendorContactsTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#customerContactsTheader, #vendorContactsTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#customerContactsTbody, #vendorContactsTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#customerContactsNameCell, #customerContactsNameCellHeader, #vendorContactsNameCell, #vendorContactsNameCellHeader
{
	width:250px;
	min-width:250px;
	max-width:250px;
}

#customerContactsEmailCell, #customerContactsEmailCellHeader, #vendorContactsEmailCell, #vendorContactsEmailCellHeader
{
	width:250px;
	min-width:250px;
	max-width:250px;
	word-wrap: break-word;
    overflow-wrap: break-word;
}

#customerContactsPhoneCell, #customerContactsPhoneCellHeader, #vendorContactsPhoneCell, #vendorContactsPhoneCellHeader {
    width: 100px;
    max-width: 100px;
    min-width: 100px;
}


#customerContactsEnabledCell, #customerContactsEnabledCellHeader, #vendorContactsEnabledCell, #vendorContactsEnabledCellHeader
{
	width:50px;
	min-width:50px;
	max-width:50px;
}

#customerContactsMainCell, #customerContactsMainCellHeader, #vendorContactsMainCell, #vendorContactsMainCellHeader
{
	width:42px;
	min-width:42px;
	max-width:42px;
}

#customerContactsIdCell, #customerContactsIdCellHeader, #vendorContactsIdCell, #vendorContactsIdCellHeader
{
	width:42px;
	min-width:42px;
	max-width:42px;
}

#editCustomerContactsCell, #editCustomerContactsCellHeader, #editVendorContactsCell, #editVendorContactsCellHeader
{
	width:42px;
	min-width:42px;
	max-width:42px;
}

#gapCustomerCell, #gapCustomerCellHeader, #gapVendorCell, #gapVendorCellHeader
{

}

/***********************************
 *  View Customer Alternate Contacts Table
 ***********************************/

#alternativeContactsTableWrapper
{
	height: expression( this.scrollHeight > 275 ? "276px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:276px;
	float:left;
	display:block;
	
}

#alternativeContactsTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
 	
 	
}

#alternativeContactsTbody
{
	width:806px;
	height: expression( this.scrollHeight > 250 ? "250px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:250px;
	overflow-y:auto;
	float:left;
	display:block;
}

#alternativeContactNameCell, #alternativeContactNameCellHeader
{
	width:250px;
	min-width:250px;
	max-width:250px;
}

#alternativeContactEmailCell, #alternativeContactEmailCellHeader
{
	width:300px;
	min-width:300px;
	max-width:300px;
	overflow-wrap: break-word;
}

#alternativeContactPhoneCell, #alternativeContactPhoneCellHeader
{
	width: 250px;
	min-width:250px;
	max-width:250px;
	overflow-wrap: break-word;
}


/***********************************
 *  Edit Configuration Tables
 * (used for Supplier Categories, Currencies)
 ***********************************/

#editConfigurationTableWrapper
{
	height: expression( this.scrollHeight > 517 ? "518px" : "auto" ); /* sets max-height for IE */
	min-height:18px;
	max-height:518px;
	float:left;
	display:block;
}

#editConfigurationTheader
{
 	width:806px;
 	height:18px;
 	min-height:18px;
 	max-height:18px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#editConfigurationTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#editConfigurationIdCell, #editConfigurationIdCellHeader
{
	width:110px;
	min-width:110px;
	max-width:110px;
}

#editConfigurationDescriptionCell, #editConfigurationDescriptionCellHeader
{
	width:523px;
	min-width:523px;
	max-width:523px;
}

#editConfigurationEnabledCell, #editConfigurationEnabledCellHeader
{
	width:87px;
	min-width:87px;
	max-width:87px;
}

#editConfigurationEditCell, #editConfigurationEditCellHeader
{
	width:49px;
	min-width:49px;
	max-width:49px;
}

#editConfigurationGapCell, #editConfigurationGapCellHeader
{

}


/***********************************
 *  Lookup Tables Admin Table
 ***********************************/

#lookupTablesAdminTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#lookupTablesAdminTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#lookupTablesAdminTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#lookupTableNameCell, #lookupTableNameCellHeader
{
	width:739px;
	min-width:739px;
	max-width:739px;
}

#editLookupTableCell, #editLookupTableCellHeader
{
	width:38px;
	min-width:38px;
	max-width:38px;
}

#lookupTablesAdminGapCell, #lookupTablesAdminGapCellHeader
{

}


/***********************************
 *  Template Admin Table
 ***********************************/

#templateAdminTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#templateAdminTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#templateAdminTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#templateAdminIdCell, #templateAdminIdCellHeader
{
	width:135px;
	min-width:135px;
	max-width:135px;
}

#templateAdminDescriptionCell, #templateAdminDescriptionCellHeader
{
	width:156px;
	min-width:156px;
	max-width:156px;
}

#templateAdminFormCell, #templateAdminFormCellHeader
{
	width:150px;
	min-width:150px;
	max-width:150px;
}

#templateAdminEnabledCell, #templateAdminEnabledCellHeader
{
	width:101px;
	min-width:101px;
	max-width:101px;
}

#templateAdminSelectableCell, #templateAdminSelectableCellHeader
{
	width:111px;
	min-width:111px;
	max-width:111px;
}

#templateAdminIconsCell, #templateAdminIconsCellHeader
{
	width:102px;
	min-width:102px;
	max-width:102px;
}

#templateAdminGapCell, #templateAdminGapCellHeader
{

}

/***********************************
 *  Quoteflow Definition Table
 ***********************************/

#quoteflowDefinitionTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#quoteflowDefinitionTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#quoteflowDefinitionTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#quoteflowDefinitionIdCell, #quoteflowDefinitionIdCellHeader
{
	width:135px;
	min-width:135px;
	max-width:135px;
}

#quoteflowDefinitionVersionCell, #quoteflowDefinitionVersionCellHeader
{
	width:50px;
	min-width:50px;
	max-width:50px;
}

#quoteflowDefinitionNameCell, #quoteflowDefinitionNameCellHeader
{
	width:350px;
	min-width:350px;
	max-width:350px;
}

#quoteflowDefinitionFormCell, #quoteflowDefinitionFormCellHeader
{
	width:150px;
	min-width:150px;
	max-width:150px;
}

#quoteflowDefinitionEnabledCell, #quoteflowDefinitionEnabledCellHeader
{
	width:50px;
	min-width:50px;
	max-width:50px;
}

#quoteflowDefinitionDefaultCell, #quoteflowDefinitionDefaultCellHeader
{
	width:50px;
	min-width:50px;
	max-width:50px;
}

#quoteflowDefinitionIconsCell, #quoteflowDefinitionIconsCellHeader
{
	width:50px;
	min-width:50px;
	max-width:50px;
}

#quoteflowDefinitionGapCell, #quoteflowDefinitionGapCellHeader
{

}

.quoteflowDefinitionCurrentBackground
{
	font-weight: bold;
}

/***********************************
 *  Country List Table
 ***********************************/

#countryListTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#countryListTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#countryListTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#countryListCodeCell, #countryListCodeCellHeader
{
	width:80px;
	min-width:80px;
	max-width:80px;
}

#countryListCountryCell, #countryListCountryCellHeader
{
	width:531px;
	min-width:531px;
	max-width:531px;
}

#countryListEnabledCell, #countryListEnabledCellHeader
{
	width:76px;
	min-width:76px;
	max-width:76px;
}

#countryListOptionsCell, #countryListOptionsCellHeader
{
	width:76px;
	min-width:76px;
	max-width:76px;
}

#countryListGapCell, #countryListGapCellHeader
{

}



/***********************************
 *  Batch Import History Table
 ***********************************/

#batchDashboardTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#batchDashboardTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#batchDashboardTbody
{
	width:806px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#batchDashboardIdCell, #batchDashboardIdCellHeader
{
	width:46px;
	min-width:46px;
	max-width:46px;
}

#batchDashboardImportDateCell, #batchDashboardImportDateCellHeader
{
	width:150px;
	min-width:150px;
	max-width:150px;
}

#batchDashboardStatusCell, #batchDashboardStatusCellHeader
{
	width:112px;
	min-width:112px;
	max-width:112px;
}

#batchDashboardImportFilenameCell, #batchDashboardImportFilenameCellHeader
{
	width:319px;
	min-width:319px;
	max-width:319px;
}

#batchDashboardNumRFQsCell, #batchDashboardNumRFQsCellHeader
{
	width:144px;
	min-width:144px;
	max-width:144px;
}

#batchDashboardGapCell, #batchDashboardGapCellHeader
{

}

/***********************************
 *  Bulk Import History Table
 ***********************************/

#bulkImportTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#bulkImportTheader
{
 	width:1468px;
 	height:40px;
 	min-height:30px;
 	max-height:30px;
 	overflow:hidden;
 	float:left;
 	display:block;
}

#bulkImportTbody
{
	width:1468px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#bulkImportIdCell, #bulkImportIdCellHeader
{
	width:46px;
	min-width:46px;
	max-width:46px;
}

#bulkImportRfqIdCell, #bulkImportRfqIdCellHeader
{
	width:46px;
	min-width:46px;
	max-width:46px;
}

#bulkImportStatusCell, #bulkImportStatusCellHeader
{
	width:75px;
	min-width:75px;
	max-width:75px;
}

#bulkImportUserIdCell, #bulkImportUserIdCellHeader
{
	width:112px;
	min-width:112px;
	max-width:112px;
}

#bulkImportDateCell, #bulkImportDateCellHeader
{
	width:120px;
	min-width:120px;
	max-width:120px;
}

#bulkImportRfqInImportCell, #bulkImportRfqInImportCellHeader
{
	width:60px;
	min-width:60px;
	max-width:60px;
}

#bulkImportLinesProcessedCell, #bulkImportLinesProcessedCellHeader
{
	width:40px;
	min-width:40px;
	max-width:40px;
}

#bulkImportLinesFailedCell, #bulkImportLinesFailedCellHeader
{
	width:40px;
	min-width:40px;
	max-width:40px;
}

#bulkImportLinesWithWarningsCell, #bulkImportLinesWithWarningsCellHeader
{
	width:60px;
	min-width:40px;
	max-width:40px;
}

#bulkImportFieldWarningsCell, #bulkImportFieldWarningsCellHeader
{
	width:40px;
	min-width:40px;
	max-width:40px;
}

#bulkImportFilenameCell, #bulkImportFilenameCellHeader
{
	width:200px;
	min-width:200px;
	max-width:200px;
}

#bulkImportLogLinkCell, #bulkImportLogLinkCellHeader
{
	width:70px;
	min-width:70px;
	max-width:70px;
}

#bulkImportMatchLogLinkCell, #bulkImportMatchLogLinkCellHeader
{
	width:70px;
	min-width:70px;
	max-width:70px;
}

/*****************************************
 *  Supplier Response Upload History Table
 *****************************************/
#bulkUploadTableWrapper
{
    height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
    min-height:26px;
    max-height:526px;
    float:left;
    display:block;
}

#bulkUploadTheader
{
    width:1200px;
    height:40px;
    min-height:30px;
    max-height:30px;
    overflow:hidden;
    float:left;
    display:block;
}

#bulkUploadTbody
{
    width:1200px;
    height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
    min-height:0px;
    max-height:500px;
    overflow-y:auto;
    float:left;
    display:block;
}

#bulkUploadIdCell, #bulkUploadIdCellHeader
{
    width:46px;
    min-width:46px;
    max-width:46px;
}

#bulkUploadUserIdCell, #bulkUploadUserIdCellHeader
{
    width:120px;
    min-width:120px;
    max-width:120px;
}

#bulkUploadDateCell, #bulkUploadDateCellHeader
{
    width:150px;
    min-width:150px;
    max-width:150px;
}

#bulkUploadRfqsInUploadCell, #bulkUploadRfqsInUploadCellHeader
{
    width:80px;
    min-width:80px;
    max-width:80px;
}

#bulkUploadRfqsProcessedCell, #bulkUploadRfqsProcessedCellHeader
{
    width:80px;
    min-width:80px;
    max-width:80px;
}

#bulkUploadRfqsFailedCell, #bulkUploadRfqsFailedCellHeader
{
    width:80px;
    min-width:80px;
    max-width:80px;
}

#bulkUploadFilenameCell, #bulkUploadFilenameCellHeader
{
    width:350px;
    min-width:350px;
    max-width:350px;
}

#bulkUploadLogLinkCell, #bulkUploadLogLinkCellHeader
{
    width:250px;
    min-width:250px;
    max-width:250px;
}

/***********************************
 *  Bulk Update History Table
 ***********************************/

#bulkUpdateTheader
{
    width:1468px;
    height:30px;
    min-height:30px;
    max-height:50px;
    overflow:hidden;
    float:left;
    display:block;
}

#bulkUpdateTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	float:left;
	display:block;
}

#bulkUpdateTbody
{
	width:1468px;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:overlay;
	float:left;
	display:block;
}

#bulkUpdateIdCell, #bulkUpdateIdCellHeader,
#bulkUpdateLinesProcessedCell, #bulkUpdateLinesProcessedCellHeader,
#bulkUpdateRecordsInsertedCell, #bulkUpdateRecordsInsertedCellHeader,
#bulkUpdateRecordsUpdatedCell, #bulkUpdateRecordsUpdatedCellHeader,
#bulkUpdateLinesFailedCell, #bulkUpdateLinesFailedCellHeader,
#bulkUpdateLinesWithWarningsCell, #bulkUpdateLinesWithWarningsCellHeader,
#bulkUpdateFieldWarningsCell, #bulkUpdateFieldWarningsCellHeader
{
	width:40px;
	min-width:40px;
	max-width:40px;
}

#bulkUpdateEntityCell, #bulkUpdateEntityCellHeader
{
    width:100px;
    min-width:100px;
    max-width:100px;
}

#bulkUpdateStatusCell, #bulkUpdateStatusCellHeader
{
	width:40px;
	min-width:40px;
	max-width:40px;
}

#bulkUpdateUserIdCell, #bulkUpdateUserIdCellHeader
{
	width:112px;
	min-width:112px;
	max-width:112px;
}

#bulkUpdateDateCell, #bulkUpdateDateCellHeader
{
	width:100px;
	min-width:100px;
	max-width:100px;
}

#bulkUpdateFilenameCell, #bulkUpdateFilenameCellHeader
{
	width:270px;
	min-width:270px;
	max-width:270px;
}

#bulkUpdateLogLinkCell, #bulkUpdateLogLinkCellHeader
{
	width:30px;
	min-width:30px;
	max-width:30px;
}

/***********************************
 *  Vendor List Table
 ***********************************/

#vendorListAssignedTableWrapper, #vendorListAvailableTableWrapper
{
	height: expression( this.scrollHeight > 525 ? "526px" : "auto" ); /* sets max-height for IE */
	min-height:26px;
	max-height:526px;
	display:block;
}

#vendorListAssignedTheader, #vendorListAvailableTheader
{
 	width:806px;
 	height:26px;
 	min-height:26px;
 	max-height:26px;
 	overflow:hidden;
 	display:block;
}

#vendorListAssignedTbody, #vendorListAvailableTbody
{
	width:100%;
	height: expression( this.scrollHeight > 499 ? "500px" : "auto" ); /* sets max-height for IE */
	min-height:0px;
	max-height:500px;
	overflow-y:auto;
	float:left;
	display:block;
}

#vendorListSelectCell, #vendorListSelectCellHeader
{
	width:45px;
	min-width:45px;
	max-width:45px;
}

#vendorListNameCell, #vendorListNameCellHeader
{
	width:200px;
	min-width:200px;
	max-width:200px;
}

#vendorListRatingCell, #vendorListRatingCellHeader
{
	width:110px;
	min-width:110px;
	max-width:110px;
}

#vendorListContactNameCell, #vendorListContactNameCellHeader
{
	width:131px;
	min-width:131px;
	max-width:131px;
}

#vendorListPhoneNumberCell, #vendorListPhoneNumberCellHeader
{
	width:91px;
	min-width:91px;
	max-width:91px;
}

#vendorListEnabledCell, #vendorListEnabledCellHeader
{
	width:56px;
	min-width:56px;
	max-width:56px;
}

#vendorListIssuableCell, #vendorListIssuableCellHeader
{
	width:58px;
	min-width:58px;
	max-width:58px;
}

#vendorListSelectableCell, #vendorListSelectableCellHeader
{
	width:68px;
	min-width:68px;
	max-width:68px;
}

#vendorListEditCell, #vendorListEditCellHeader
{
	width:30px;
	min-width:30px;
	max-width:30px;
}

#vendorListGapCell, #vendorListGapCellHeader
{

}

#categoryFilterSelect
{
	width: 300px;
	max-width: 300px;
	text-overflow: ellipsis;
}

/***********************************
 *  Reporting Dashboard
 ***********************************/

.reporting-box {
	border: 1px solid lightgray;
 	border-radius: 10px ;
	-moz-border-radius: 10px ;
	-webkit-border-radius: 10px ;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
}


.reporting-menu ul {
	margin: 0;
	padding: 0;
	width: 100%;
	list-style-type: none;
}

.reporting-menu ul li a {
	text-decoration: none;
	color: white;
	padding: 10.5px 11px;
	background-color: #c0c0c0;
	display:block;
}

.reporting-menu ul li a:visited {
	color: white;
}

.reporting-menu ul li .selected {
	color: white;
	background-color: #386ca1;
}

.reporting-menu ul li a:hover {
	color: white;
	background-color: #2B5684;
}

.reporting-input {
	height: 28px;
	border: 1px solid #aaa;
	border-radius: 4px;
	padding-left: 2px;
	padding-right: 2px;
}

.reporting-filter .datePickerImg {
	vertical-align: middle;
}

.categoryFilterTitle,.categoryTag {
	margin-bottom: 4px;
	padding: 2px 4px;
	display: inline-block;
}

.categoryTag {
	background-color: #386ca1;
	color: white;
	margin-right: 4px;
}

.categoryTag:hover {
	background-color: #2B5684;
}

.categoryTag:hover .categoryTagDelete {
	color: white;
}

.categoryTagDelete {
	color: lightgray;
	font-size: smaller;
}

.helpIcon {
	width: 18px;
	height: 18px;
}

.popupHelp {
}

.popupHelp li {
	font-size: 12px;
	color: white;
}

/* ************************************************************************************ */

#pup {
  position:absolute;
  z-index:200; /* should be on top*/
  padding: 3px;
  margin-left: 10px;
  margin-top: 5px;
  width: 400px;
  border: 1px solid black;
  background-color: #777;
  color: white;
  font-size: 0.95em;
}

/*******************************************************
 * select2
 *******************************************************/

/*
Version: 2.1 Timestamp: Tue Jun 12 19:50:25 PDT 2012
*/
.select2-container {
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;

}

.select2-container,
.select2-drop,
.select2-search,
.select2-container .select2-search input{
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.

    More Info : http://www.quirksmode.org/css/box.html
  */
  -moz-box-sizing: border-box;    /* firefox */
  -ms-box-sizing: border-box;     /* ie */
  -webkit-box-sizing: border-box; /* webkit */
  -khtml-box-sizing: border-box;  /* konqueror */
  box-sizing: border-box;         /* css3 */
}

.select2-container .select2-choice {
    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
    background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
    background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #aaa;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 26px;
    line-height: 26px;
    padding: 0 0 0 8px;
    color: #444;
    text-decoration: none;
}

.select2-container .select2-choice span {
    margin-right: 26px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.select2-container .select2-choice abbr {
  display: block;
  position: absolute;
  right: 26px;
  top: 8px;
  width: 12px;
  height: 12px;
  font-size: 1px;
  background: url(../images/select2/select2.png) right top no-repeat;
  cursor: pointer;
  text-decoration: none;
  border:0;
  outline: 0;
}
.select2-container .select2-choice abbr:hover {
  background-position: right -11px;
  cursor: pointer;
}

.select2-container .select2-drop {
    background: #fff;
    border: 1px solid #aaa;
    border-top: 0;
    position: absolute;
    top: 100%;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    -o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    z-index: 999;
    width:100%;
    margin-top:-1px;

  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

.select2-container .select2-choice div {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: #ccc;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
    background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
    border-left: 1px solid #aaa;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 18px;
}

.select2-container .select2-choice div b {
    background: url('../images/select2/select2.png') no-repeat 0 1px;
    display: block;
    width: 100%;
    height: 100%;
}

.select2-container .select2-search {
  display: inline-block;
    white-space: nowrap;
    z-index: 1010;
  min-height: 26px;
  width: 100%;
  margin: 0;
  padding-left: 4px;
  padding-right: 4px;
}

.select2-container .select2-search-hidden {
  display: block;
  position: absolute;
  left: -10000px;
}

.select2-container .select2-search input {
    background: #fff url('../images/select2/select2.png') no-repeat 100% -22px;
    background: url('../images/select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
    background: url('../images/select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
    background: url('../images/select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
    background: url('../images/select2/select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
    background: url('../images/select2/select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
    background: url('../images/select2/select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
    padding: 4px 20px 4px 5px;
    outline: 0;
    border: 1px solid #aaa;
    font-family: sans-serif;
    font-size: 1em;
    width:100%;
    margin:0;
    height:auto !important;
    min-height: 26px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.select2-container .select2-search input.select2-active {
    background: #fff url('../images/select2/spinner.gif') no-repeat 100%;
    background: url('../images/select2/spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
    background: url('../images/select2/spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
    background: url('../images/select2/spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
    background: url('../images/select2/spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
    background: url('../images/select2/spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
    background: url('../images/select2/spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}


.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
    -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
    -o-box-shadow     : 0 0 5px rgba(0,0,0,.3);
    box-shadow        : 0 0 5px rgba(0,0,0,.3);
    border: 1px solid #5897fb;
    outline: none;
}

.select2-dropdown-open .select2-choice {
  border: 1px solid #aaa;
  border-bottom-color: transparent;
  -webkit-box-shadow: 0 1px 0 #fff inset;
  -moz-box-shadow   : 0 1px 0 #fff inset;
  -o-box-shadow     : 0 1px 0 #fff inset;
  box-shadow        : 0 1px 0 #fff inset;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
  background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
  background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
  background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
  background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
  -webkit-border-bottom-left-radius : 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft : 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-left-radius : 0;
  border-bottom-right-radius: 0;
}

.select2-dropdown-open .select2-choice div {
  background: transparent;
  border-left: none;
}
.select2-dropdown-open .select2-choice div b {
  background-position: -18px 1px;
}

/* results */
.select2-container .select2-results {
  margin: 4px 4px 4px 0;
  padding: 0 0 0 4px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 200px;
}
.select2-container .select2-results li {
  line-height: 80%;
  padding: 7px 7px 8px;
  margin: 0;
  list-style: none;
  cursor: pointer;
  display: list-item;
}

.select2-container .select2-results .select2-highlighted {
  background: #3875d7;
  color: #fff;
}
.select2-container .select2-results li em {
  background: #feffde;
  font-style: normal;
}
.select2-container .select2-results .select2-highlighted em {
  background: transparent;
}
.select2-container .select2-results .select2-no-results {
  background: #f4f4f4;
  display: list-item;
}

/*
disabled look for already selected choices in the results dropdown
.select2-container .select2-results .select2-disabled.select2-highlighted {
    color: #666;
    background: #f4f4f4;
    display: list-item;
    cursor: default;
}
.select2-container .select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}
*/
.select2-container .select2-results .select2-disabled {
    display: none;
}

.select2-more-results.select2-active {
    background: #f4f4f4 url('../images/select2/spinner.gif') no-repeat 100%;
}

.select2-more-results {
  background: #f4f4f4;
  display: list-item;
}

/* disabled styles */

.select2-container.select2-container-disabled .select2-choice {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.select2-container.select2-container-disabled .select2-choice div {
    background-color: #f4f4f4;
    background-image: none;
    border-left: 0;
}


/* multiselect */

.select2-container-multi .select2-choices {
    background-color: #fff;
      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
      background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
      background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
      background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
      background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
      background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
      border: 1px solid #aaa;
      margin: 0;
      padding: 0;
      cursor: text;
      overflow: hidden;
      height: auto !important;
      height: 1%;
      position: relative;
}

.select2-container-multi .select2-drop {
    margin-top:0;
}

.select2-container-multi .select2-choices {
    min-height: 26px;
}

.select2-container-multi.select2-container-active .select2-choices {
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
    -moz-box-shadow   : 0 0 5px rgba(0,0,0,.3);
    -o-box-shadow     : 0 0 5px rgba(0,0,0,.3);
    box-shadow        : 0 0 5px rgba(0,0,0,.3);
    border: 1px solid #5897fb;
    outline: none;
}
.select2-container-multi .select2-choices li {
  float: left;
  list-style: none;
}
.select2-container-multi .select2-choices .select2-search-field {
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.select2-container-multi .select2-choices .select2-search-field input {
  color: #666;
  background: transparent !important;
  font-family: sans-serif;
  font-size: 100%;
  height: 15px;
  padding: 5px;
  margin: 1px 0;
  outline: 0;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow   : none;
  -o-box-shadow     : none;
  box-shadow        : none;
}


.select2-default {
  color: #999 !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
  -webkit-border-radius: 3px;
  -moz-border-radius   : 3px;
  border-radius        : 3px;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  background-color: #e4e4e4;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
  -moz-box-shadow   : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
  box-shadow        : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
  color: #333;
  border: 1px solid #aaaaaa;
  line-height: 13px;
  padding: 3px 5px 3px 18px;
  margin: 3px 0 3px 5px;
  position: relative;
  cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice span {
  cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
  background: #d4d4d4;
}

.select2-search-choice-close {
  display: block;
  position: absolute;
  right: 3px;
  top: 4px;
  width: 12px;
  height: 13px;
  font-size: 1px;
  background: url(../images/select2/select2.png) right top no-repeat;
  outline: none;
}

.select2-container-multi .select2-search-choice-close {
  left: 3px;
}


.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  background-position: right -11px;
}
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
  background-position: right -11px;
}


.select2-container-multi .select2-results {
  margin: -1px 0 0;
  padding: 0;
}

/* disabled styles */

.select2-container-multi.select2-container-disabled .select2-choices{
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
    background-image: none;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 3px 5px 3px 5px;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
    display: none;
}
/* end multiselect */


 /* ***************************************************** */
 /* metricsgraphics.css */

 /*
 a,
a:active,
a:visited {
    color: steelblue;
    text-decoration: none;
}

a:hover {
    color: steelblue;
}
*/

.active_datapoint {
    fill: black;
    font-size: 11px;
    font-weight: 400;
}

.area1-color {
    fill: #0000ff;
}

.area2-color {
    fill: #05b378;
}

.area3-color {
    fill: #db4437;
}

.area4-color {
    fill: #f8b128;
}

.area5-color {
    fill: #5c5c5c;
}

.barplot rect.bar {
    shape-rendering: crispEdges;
        fill: #b6b6fc;

}

.barplot rect.bar.active {
    fill: #9e9efc;
}

.baselines line {
    opacity: 0.2;
    shape-rendering: crispEdges;
    stroke: black;
    stroke-width: 1;
}

.baselines text {
    fill: black;
    font-size: 9px;
    opacity: 0.5;
    stroke: none;
}

/* body { */
/*     background-color: #fff; */
/*     color: #000; */
/*     font-family: 'Open Sans', sans-serif, Arial; */
/* } */

.btn-group {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
}

.btn-group span.which-button {
    font-weight: 300;
    color: darkgray;
}

.btn-group span.title {
    margin-left: 8px;
    margin-right: 8px;
}

.chart_title .popover {
    font-size: 12px;
}

.chart_title .popover-content {
    cursor: auto;
    line-height: 17px;
}

.chart_title .popover.top {
    margin-top: 0;
}

.chart_title {
    cursor: default;
    font-size: 22px;
    padding-top: 8px;
    text-align: center;
}

.chart_title .fa {
    color: #ccc;
    font-size: 14px;
    padding-left: 4px;
    vertical-align: top;
}

.chart_title .fa.warning {
    font-weight: 300;
}

circle {
    /*fill: #0000ff;*/
    opacity: 0.85;
}

.metricsChart #description {
    margin: auto;
    margin-bottom: 50px;
    width: 100%;
}

.metricsChart .divider {
    color: #000000;
    opacity: 0.2;
}

.extended-y-ticks svg .y-axis line {
    opacity: 0.07;
}

.extended-x-ticks svg .x-axis line {
    opacity: 0.1;
}

.histogram .axis path,
.histogram .axis line {
    opacity: 0.7;
    fill: none;
    shape-rendering: crispEdges;
    stroke: #ccc;
}

.histogram .bar rect {
    shape-rendering: crispEdges;
    fill: #b6b6fc;
}

.histogram .bar rect.active {
    fill: #9e9efc;
}

.least-squares-line {
    stroke-width: 1;
    stroke: red;
}

.lowess-line {
    stroke: red;
    fill: none;
}

.line1-color {
    stroke: #4040e8;
}

.line2-color {
    stroke: #05b378;
}

.line3-color {
    stroke: #db4437;
}

.line4-color {
    stroke: #f8b128;
}

.line5-color {
    stroke: #5c5c5c;
}

.line1-legend-color {
    color: #4040e8;
}

.line2-legend-color {
    color: #05b378;
}

.line3-legend-color {
    color: #db4437;
}

.line4-legend-color {
    color: #f8b128;
}

.line5-legend-color {
    color: #5c5c5c;
}

.metricsChart .legend {
    font-size: 11px;
    padding: 25px 0 15px 0;
}

.main-area-solid svg .main-area {
    fill: #ccccff;
    opacity: 1;
}

.markers line {
    opacity: 0.2;
    shape-rendering: crispEdges;
    stroke: black;
    stroke-width: 1;
}

.markers text {
    fill: black;
    font-size: 9px;
    opacity: 0.5;
    stroke: none;
    line-height: 12px;
}

.metricsChart .missing {
    background-image: url(../images/missing-data.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90% 90%;
}

.missing-pane {
    fill: none;
}

.metricsChart p {
     font-family: 'PT Serif', serif;
     font-size: 16px;
     line-height: 24px;
 }

path.main-area {
    opacity: 0.2;
    stroke: none;
}

path.confidence-band {
    fill: #ccc;
    opacity: 0.4;
    stroke: none;
}

path.main-line {
    fill: none;
    opacity: 0.8;
    stroke-width: 1.1px;
}

.points circle {
    fill-opacity: 0.4;
    stroke-opacity: 1;
}

circle.points-mono {
    fill: #0000ff;
    stroke: #0000ff;
}

/* a selected point in a scatterplot */
.points circle.selected {
    fill-opacity: 1;
    stroke-opacity: 1;
}

.metricsChart text {
     fill: black;
     opacity: 0.8;
 }

#torso {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

#torso div {
    display: inline-block;
}

#trunk {
    margin-top: 40px;
}

#trunk h2 {
    font-size: 15px;
}

#trunk h2.trunk-title {
    font-size: 25px;
    font-weight: 300;
    text-transform: uppercase;
}

.trunk-section {
    border-top: 1px solid #ccc;
    padding-bottom: 25px;
    padding-top: 15px;
}

.voronoi path {
    fill: none;
    pointer-events: all;
    stroke: none;
    stroke-opacity: 0.1;
}

.x-rug-mono,
.y-rug-mono {
    stroke: black;
}

.x-axis line,
.y-axis line {
    opacity: 0.3;
    shape-rendering: crispEdges;
    stroke: black;
    stroke-width: 1;
}

.x-axis text,
.y-axis text,
.histogram .axis text {
    fill: black;
    font-size: 11px;
    opacity: 0.5;
}

.x-axis .label,
.y-axis .label,
.axis .label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 400;
}

.x-axis-small text,
.y-axis-small text,
.active-datapoint-small {
    font-size: 8px;
}

.x-axis-small .label,
.y-axis-small .label {
    font-size: 8.5px;
}

.year-marker text {
    fill: black;
    font-size: 9px;
    opacity: 0.5;
}

.year-marker line {
    shape-rendering: crispEdges;
    opacity: 0.2;
    stroke: black;
    stroke-width: 1;
}

.year-marker-small text {
    font-size: 8px;
}

/*
 * Used for anchor tags to give the user a visual clue and prevent operation
 * via mouse clicks.  You can still tab and hit enter, though.
 */
.disabled, [disabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/*
 * Use for the "Save" button on the RFQ details screen when we are in view
 * mode, so that the other icons retain their position.
 */
.hidden {
    visibility: hidden;
}

/*
 * Used for text-based buttons.  Results is a rounded button with white text
 * and a background colour the same as the hyperlink text.
 */
.btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 0.25rem;
    margin: 2px;
  
    color: white;
    background: #4392B0;
}

 /* Copying style text based buttons used on customer and vendor admin pages
 *
 */

.qsDashboardTopBtnBar1 {
	padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.qsBtnOld {
	background-color: #386ca1;
    color: white;
    padding: 0.75em;
    border-radius: 0.3em;
    display: inline-block;
    
    cursor: pointer;
    
	min-width: 1em;
    text-align: center;
    
    font-size: .75rem;
    font-weight: bold;
    border-radius: 0.3rem;
    border:none;
}
.qsBtnOld:hover {
	background-color: #2B5684;
}

.warning {
    background-color: hsl(0, 100%, 40%, 0.6);
}
.warning:hover {
    background-color: hsl(0, 100%, 40%);
}

/* TODO: is there an easier way for inputs in tables? */
#RfqLines-RFQLineList { border-collapse: collapse; }
#RfqLines-RFQLineList td > input {
    width: 100%;
    font-size: 11px;
}

/* Used by section headers with labels and action buttons */
.actionbar {
	display: flex;
	align-items: center;
}
.actionbar > *:first-child {
    flex-grow: 1;
    font-size: 20px;
    font-weight: 700;
}

/* Used around and between PageNavigator components */
.toolbar {
    padding: 0 20px;
}
.toolbar * {
    padding: 0 4px;
}

/*
 * Reduce size of mysterious blank submit button on VendorList.html and
 * AssignVendorsToRfqLine.html: it was using a lot of vertical space.
 */
   
#defaultSubmit {
 height: 0px;
}


/*
 * Generic styling for tables in QLMSourcing 
 */
.qlmTable {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    width: 100%;
    border-collapse: collapse;
}
.qlmTable th {
    font-size: 11px;
    font-weight: bold;
    background-color: lightgrey;
    text-align: left;
    padding-right: 8px;
}
.qlmTable td {
    border-bottom: 4px solid lightgrey;
    padding-right: 8px;
}
.qlmTable tr {
    vertical-align: top;
}
.qlmTable select {
    font-size: 13.33px;
    padding: 2px;
    width: 200px
}
.qlmTable textarea {
    font-family: inherit;
    width: 100%;
}
.qlmTable input {
    width: 100%;
}

.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  _width: 60px;
}

.tabs li {
  display: inline;
}

.searchTable {
	width: 100%;
	table-layout: auto;
	text-align: left;
	padding: 2px;
	border: 2px;
}
.psResultTable{
	margin:0 auto;
}

.psHeader{
	table-layout:fixed;
}

.searchTable thead {
    position: sticky;
    top: 0;
}

.boldFont {
  font-weight: 900;
}
.center {
  margin-left: auto;
  margin-right: auto;
}


.controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25em;
    gap: 0.5em;
}
.controls > div,
.controls > form {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/*
 * Fix styling of 3rd party "palette" component, broken by my introduction
 * of the "controls" class above.
 */
.tapestry-palette {
	.controls {
		display: table-cell;
	}
}

.hideFile {
	display:none;
}