/****************************************************
                       General
 ****************************************************/

/****************************************************
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    Verdana, Arial

    hm Green: HEX: 37c79a, RGB: (55,199,154), (25,168,124)
    hm Blue : HEX: 1bbbcd, RGB: R27 G187 B205
 ****************************************************/

BODY {
	margin: 0;
	background-color: white;
}

body, body * {
	font: 12px Calibri, Arial, Helvetica, sans-serif;
	line-height: inherit;
}

TD {
	vertical-align: middle;
}

dl {
	width: 70%;
	overflow: hidden;
	padding: 0;
	margin: 10px 0 0 0;
}

dt {
	float: left;
	width: 20%;
	padding: 0;
	margin: 0 0 5px 0;
}

dd {
	float: left;
	width: 80%;
	padding: 0;
	margin: 0 0 5px 0;
}

input[type=button] {
	outline: none;
}
label,
input[type=checkbox] {
	cursor: pointer;
}


.floatContainer {
	float: left;
}

.hmTable {
	TEXT-DECORATION: none;
	margin: 0;
	color: black;
}

.hmTableGrid {
	TEXT-DECORATION: none;
	margin: 0;
	color: black;
	background-color: rgb(230, 230, 230);
}

.hmTableGrid td {
	background-color: rgb(250, 250, 250);
	padding: 2px;
}

.hmTableGrid td:hover {
	background-color: rgb(250, 250, 250);
	padding: 2px;
}

.hmHeader {
	height: 16px;
	cursor: default;
	padding: 2px;
	color: black;
	background-color: rgb(210, 210, 210);
	text-align: left;
}

.hmLine {
	height: 15px;
	cursor: default;
	background-color: white;
	vertical-align: top;
}

.hmTop {
	border-top: 1px solid #bbb;
}

.hmBottom {
	border-bottom: 1px solid #bbb;
}

.hmLeft {
	border-left: 1px solid #bbb;
}

.hmRight {
	border-right: 1px solid #bbb;
}

.hmTDb {
	vertical-align: top;
}

.hmTDl {
	vertical-align: top;
}

.hmTDr {
	vertical-align: top;
}

.hmURL {
	cursor: pointer;
	padding: 0;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 4px;
	border: 1px solid white;
}

.hmURL:hover {
	cursor: pointer;
	background-color: rgb(230, 230, 230);
	border: 1px solid #ccc;
}

.hmList {
	color: black;
	padding: 1px;
	padding-right: 10px;
}

.hmListSelected {
	color: rgb(0, 120, 0);
	padding: 1px;
	padding-right: 10px;
}

.hmList:hover {
	color: rgb(5, 148, 104);
	background-color: rgb(250, 250, 250);
	padding: 1px;
	padding-right: 10px;
	cursor: pointer;
}

.hmDiv {
	padding: 15px;
	border-radius: 5px 25px;
	background-color: rgb(250, 250, 250);
	border: 2px outset rgb(25, 168, 124);
}

.hmCloseDiv {
	cursor: pointer;
	border-radius: 10px;
	border: 1px outset;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
}

.hmCloseDiv:hover {
	cursor: pointer;
	background-color: rgb(230, 230, 230);
	border-radius: 10px;
}

.hmLabel {
	border-radius: 5px;
	background-color: rgb(25, 168, 124);
	height: 12px;
	padding: 6px;
	color: white;
	font-size: 12px;
}

.hmSuccess {
	padding: 5px;
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: lime;
	color: black;
	border: 1px solid white;
}

.hmError {
	padding: 5px;
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: red;
	color: white;
	border: 1px solid white;
}

input[type=button] {
	cursor: pointer;
}
.hmSimpleButton {
	padding: 5px;
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: rgb(210, 210, 210);
	color: black;
	border: 1px solid white;
}

.hmSimpleButton:hover {
	padding: 5px;
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: rgb(200, 200, 200);
	color: white;
	border: 1px solid white;
	cursor: pointer;
}

.hmSimpleButtonSmall {
	padding: 3px;
	border: 1px solid rgb(180, 180, 180);
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: rgb(210, 210, 210);
	color: black;
}

.hmSimpleButtonSmall:hover {
	color: white;
}

.hmWarning, input.hmWarning {
	padding: 5px;
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: rgb(243, 146, 0);
	color: white;
	border: 1px solid white;
}

/* ********************** Navigation ****************/

.hmNavigationList {
	color: black;
	padding: 1px;
	white-space: nowrap;
	padding-right: 10px;
}

.hmNavigationList:hover {
	color: rgb(0, 128, 84);
	padding: 1px;
	white-space: nowrap;
	padding-right: 10px;
	cursor: pointer;
}

.hmNavigationParent {
	color: black;
	padding: 1px;
	white-space: nowrap;
	padding-right: 10px;
}

.hmNavigationParent:hover {
	color: rgb(0, 128, 84);
	padding: 1px;
	white-space: nowrap;
	padding-right: 10px;
	cursor: pointer;
}

.hmNavigationListMode2 {
	color: rgb(150, 150, 150);
	padding: 1px;
	white-space: nowrap;
	padding-right: 10px;
}

.hmNavigationParentMode2 {
	color: rgb(150, 150, 150);
	padding: 1px;
	white-space: nowrap;
	padding-right: 10px;
}

/* .hmNavigationParentMode2  {color:rgb(55,198,154);  padding:1px; white-space: nowrap; padding-right: 10px; } */

.hmNavigationListMode3 {
	display: none;
}

.hmNavigationParentMode3 {
	display: none;
}

.hmPropertyList {
	color: black;
	padding: 1px;
	padding-right: 10px;
}

.hmPropertyListEmpty {
	display: none;
}

.hmPropertyTable {
	background-color: rgb(240, 240, 240);
	border: 1px solid rgb(210, 210, 210)
}

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

.hmSelectionFilter {
	background-color: rgb(95, 238, 194);
	color: black;
}

.hmPropertyNotMatched {
	color: rgb(200, 200, 200);
	padding: 1px;
	padding-right: 10px;
	text-decoration: line-through;
}

.hmHighlighting {
	background-color: rgb(95, 238, 194);
	color: black;
}

.hmSelection {
	background-color: rgb(95, 238, 194);
	color: black;
	padding: 1px;
}

.hmIndirectEClass {
	background-color: white;
	color: black;
	padding: 1px;
}

.hmDirectEClass {
	background-color: rgb(240, 240, 240);
	color: black;
	padding: 1px;
}

.hmSelectedProperty {
	background-color: rgb(220, 220, 220);
	color: black;
	padding: 1px;
}

.hmProposalIndicator {
	width: 6px;
	height: 6px;
	border: 1px solid rgb(220, 220, 220);
	border-radius: 2px;
}

.hmProposalIndicator:hover {
	border-color: white;
}

/* contract negoation */

#contractUpdateForm #contractClause {
	margin-top: 1em;
	width: 100%;
}

#contractUpdateForm #contractClause textarea {
	width: 100%;
	height: 8em;
}

/******************* Cart ***********************/

.hmCart {
	background-color: rgb(240, 240, 240);
}

.hmCartItem {
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 4px;
	background-color: rgb(220, 220, 220);
	color: rgb(0, 60, 0);
}

.hmCartInput {
	background-color: rgb(95, 238, 194);
	margin: 0;
	border: 0;
	padding: 2px;
	cursor: pointer;
}

.hmCartInputRO {
	background-color: rgb(220, 220, 220);
	margin: 0;
	border: 0;
	padding: 2px;
}

.hmValueChanged {
	background-color: rgb(255, 200, 0);
	margin: 0;
	border: 0;
	padding: 1px;
}

.hmPropertyChanged {
	background-color: rgb(255, 200, 0);
	margin: 0;
	border: 0;
	padding: 1px;
}

.hmCartHeaderContainer {
	margin-bottom: 20px;
}

.hmCartHeader {
	background-color: rgb(25, 168, 124);
	color: white;
	padding: 3px;
	border-radius: 3px;
}

.hmCartSelected {
	background-color: rgb(95, 238, 194);
}

/******************* Proposal ***********************/

.hmProposalTopInfo {
	background-color: rgb(230, 230, 230);
}

.hmProposalTopInfoSelected {
	background-color: rgb(125, 255, 224);
}

#divOverlay {
	display: none;
	background-color: red;
	text-align: center;
	position: absolute;
	z-index: 10000;
	opacity: 0.5;
}

.hmProposalNotIncluded {
	background-color:WhiteSmoke;
	color:Silver;
}

/******************* Supplier ***********************/

.hmFieldChanged {
	color: red;
}

.hmProdList {
	color: black;
	padding: 1px;
}

/* supplier contracs */

#SupplierContractListDiv {
	margin: 0px;
	margin-right: 10px;
	margin-bottom: 20px;
	float: left;
	min-height: 200px;
	min-width: 200px;
	border-radius: 0px 25px 5px 25px;
}

.hmProdList:hover {
	color: rgb(5, 148, 104);
	background-color: rgb(250, 250, 250);
	padding: 1px;
	cursor: pointer;
}

.hmProdSelected {
	background-color: rgb(25, 168, 124);
	color: white;
	padding: 1px;
	border-radius: 3px;
	cursor: pointer;
}

/******************* User ****************** (75,218,174)  *****/

.hmAccessRight {
	background-color: rgb(25, 168, 124);
	color: white;
}

.hmAccessSelection {
	background-color: rgb(95, 238, 194);
	color: black;
}

.hmAccessNone {
	background-color: #e0e0e0;
	color: black;
}

.hmAccessNotSelected {
	color: black;
}

/*-------------- hm blue variant
.hmAccessInput  {background-color : rgb(27,187,205); color: white;}
.hmAccessInputSelection  {background-color:rgb(67,227,245); color: black; }
.hmSelectionIndicator {width:6px; height:6px; border:0; background-color:rgb(67,227,245);}
.hmSelectionIndicatorNone {width:6px; height:6px; border:0; background-color:;}
 ------------*/

/*-------------- hm orange variant ------------*/

.hmAccessInput {
	background-color: rgb(255, 176, 30);
	color: white;
}

.hmAccessInputSelection {
	background-color: rgb(255, 206, 60);
	color: black;
}

.hmSelectionIndicator {
	width: 6px;
	height: 6px;
	border: 0;
	background-color: rgb(255, 206, 60);
}

.hmSelectionIndicatorNone {
	width: 6px;
	height: 6px;
	border: 0;
	background-color: transparent;
}

/*-------------- hm orange variant
.hmUserInput         {background-color : rgb(255,236,90); color: black;}
.hmUserInputChanged  {background-color : rgb(255,206,60); color: black;}
 ------------*/

.hmUserInput {
	background-color: rgb(255, 245, 200);
	color: black;
}

.hmUserInputChanged {
	background-color: rgb(255, 226, 100);
	color: black;
}

.hmMultiSelection {
	padding: 5px;
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: rgb(255, 255, 170);
	color: white;
	border: 1px solid white;
}

.hmSeparator {
	margin: 0;
	border: 0 solid;
	border-bottom: 1px solid rgb(25, 168, 124);
}

.hmSingleSelection {
	padding: 5px;
	border-radius: 6px;
	white-space: nowrap;
	display: inline-block;
	background-color: rgb(25, 168, 124);
	color: white;
	border: 1px solid white;
}

.hmSingleOption {
	color: black;
	padding: 1px;
	padding-right: 10px;
	background-color: white;
}

/* ------------------------------------------------------------- */

.gradient-blue-green {
	height: 100%;
	width: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1bbbcd+0,37c79a+100 */
	background: #1bbbcd;
	/* Old browsers */
	background: -moz-linear-gradient(to top right, #1bbbcd 0%, #37c79a 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(to top right, #1bbbcd 0%, #37c79a 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top right, #1bbbcd 0%, #37c79a 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbbcd', endColorstr='#37c79a', GradientType=1);
	/* IE6-9 fallback on horizontal gradient */
}

.loginInput {
	background: none;
	border: 0;
	font-size: 20px;
	color: #ffffff;
	margin-top: 40px;
	width: 100%;
	outline: none;
	font-family: Calibri, Arial, Helvetica, sans-serif;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
	border: 0 solid red;
	-webkit-text-fill-color: white;
	background-color: -webkit-linear-gradient(to top right, #1bbbcd 0%, #37c79a 100%);
	transition: background-color 5000s ease-in-out 0s;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #e4e4e4;
	opacity: 1;
	/* Firefox */
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #e4e4e4;
}

::-ms-g1023-placeholder {
	/* Microsoft Edge */
	color: #e4e4e4;
}

/* --------------------------- Menu --------------------------- */

.NavButton {
	float: left;
	padding: 8px;
	cursor: pointer;
	font-size: 14px;
	color: white;
	opacity: 0.6;
	padding-bottom: 8px;
	border-bottom: 0 solid grey;
	/* padding:5px; border-radius: 6px; white-space: nowrap; display:inline-block;
	background-color:rgb(230,230,230); color:black; border-bottom: 0 solid white; */
}

.NavButton:hover {
	opacity: 1.0;
	padding-bottom: 7px;
	border-bottom: 1px solid white;
}

.NavSelected, .NavSelected:hover {
	opacity: 1.0;
	padding-bottom: 5px;
	border-bottom: 3px solid white;
}

/**********
.NavButton {
	float: left;
	padding: 8px;
	cursor: pointer;
	font-size: 12px;
	opacity: 0.6;
	padding-bottom: 8px;
	border-bottom: 0 solid grey;
}

.NavButton:hover {
	opacity: 1.0;
	padding-bottom: 7px;
	border-bottom: 1px solid grey;
}

.NavSelected, .NavSelected:hover {
	opacity: 1.0;
	padding-bottom: 5px;
	border-bottom: 3px solid rgb(25,168,124);
}
**********/

/****************************************************************
    hm Green : HEX: 37c79a, RGB: R55 G199 B154  -> 17a77a 25,168,124
    hm Blue  : HEX: 1bbbcd, RGB: R27 G187 B205
    hm Red   : HEX: c40944, RGB: R196 G9 B68
    hm Orange: HEX: f39200, RGB: R243 G146 B0
    hm Black : 100&, 67%, 10%
 ****************************************************************/

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

@keyframes click-wave {
	0% {
		height: 30px;
		width: 30px;
		opacity: 0.35;
		position: relative;
	}
	100% {
		height: 50px;
		width: 50px;
		margin-left: -5px;
		margin-top: -5px;
		opacity: 0;
	}
}

.option-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	top: 0;
	;
	/* 13.33333px; */
	right: 0;
	bottom: 0;
	left: 0;
	height: 30px;
	width: 30px;
	transition: all 0.15s ease-out 0s;
	background: #cbd1d8;
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-right: 0.5rem;
	outline: none;
	position: relative;
	z-index: 1000;
}

.option-input:hover {
	background: #9faab7;
}

.option-input:checked {
	font-family: 'Roboto', sans-serif;
	background: rgb(25, 168, 124);
	/****  #40e0d0;  ***/
}

.option-input:checked::before {
	height: 30px;
	width: 30px;
	position: absolute;
	content: "\2714";
	/** ✔ **/
	display: inline-block;
	font-size: 20px;
	/** 26.66667px; **/
	text-align: center;
	line-height: 30px;
	/**  40px;  ***/
}

.option-input:checked::after {
	-webkit-animation: click-wave 0.65s;
	-moz-animation: click-wave 0.65s;
	animation: click-wave 0.65s;
	background: rgb(25, 168, 124);
	/****  #40e0d0;  ***/
	content: '';
	display: block;
	position: relative;
	z-index: 100;
}

.option-input.radio {
	border-radius: 50%;
}

.option-input.radio::after {
	border-radius: 50%;
}

img.icon {
  margin-top: -1px;
  margin-bottom: -1px;
  vertical-align: middle;
  border: 0;
}

.bundleDetail footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(80px, auto);
	align-items: end;
}
.bundleDetail footer > div {

}
.checked {
	text-align: left;
}
.checked img {
	width: 12px;
    height: 12px;
    background-color: rgb(25,168,124);
    margin-top: 6px;
    cursor: default;
	border-radius: 10px;
    border: 1px outset;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
}
.field-readonly {
  color: gray;
}
button:focus {
	outline: none;
}

#SupplierBidroundContainer {
	max-height: 400px;
	overflow: auto;
}

#BidroundDiv {
	margin-bottom: 20px;
	float: left;
	width: 720px;
}

#SupplierBidroundListDiv {
	margin: 0 10px 5px 0;
	min-height: 300px;
	min-width: 200px;
	border-radius: 0 25px 5px 25px;
}

#SupplierBidroundDiv {
	margin: 0;
	margin-top: 10px;
	padding: 0;
}

.dataTable {
	border-spacing: 0;
	border-collapse: collapse;
}

.dataTable thead {
	height: 16px;
}

.dataTable th, .dataTable td {
	padding: 2px;
	vertical-align: top;
	overflow-wrap: normal;
}

/* Bid Round List Supplier */
#SupplierBidroundListTable tbody tr {
	cursor: pointer;
}
#SupplierBidroundListTable tbody tr:hover td {
	color: rgb(5, 148, 104);
	background-color: rgb(250, 250, 250);
}
#SupplierBidroundListTable .reference {
	text-align: right;
	width: 4em;
}

#SupplierBidroundListTable .startdate,
#SupplierBidroundListTable .enddate {
	text-align: center;
	width: 7em;
}

#SupplierBidroundListTable .productCnt {
	text-align: center;
	width: 9em;
}

#SupplierBidroundListTable .bundleCnt {
	text-align: center;
	width: 9em;
}

/* time span remaining indicator */

.indicator {
	width: 8em;
	text-align: left;
}

.indicator span.progress {
	display: inline-block;
	width: 0;
	height: 4px;
	border-left: 40px solid red;
	background-color: lightgrey;
	margin: 0 5px 0 0;
}

.indicator span.progress.daysLeft-9 {
	width: 36px;
	border-left-width: 4px;
}

.indicator span.progress.daysLeft-8 {
	width: 32px;
	border-left-width: 8px;
}

.indicator span.progress.daysLeft-7 {
	width: 28px;
	border-left-width: 12px;
}

.indicator span.progress.daysLeft-6 {
	width: 24px;
	border-left-width: 16px;
}

.indicator span.progress.daysLeft-5 {
	width: 20px;
	border-left-width: 20px;
}

.indicator span.progress.daysLeft-4 {
	width: 16px;
	border-left-width: 24px;
}

.indicator span.progress.daysLeft-3 {
	width: 12px;
	border-left-width: 28px;
}

.indicator span.progress.daysLeft-2 {
	width: 8px;
	border-left-width: 32px;
}

.indicator span.progress.daysLeft-1 {
	width: 4px;
	border-left-width: 36px;
}

.indicator span.progress.daysLeft-10plus {
	width: 40px;
	border-left-width: 0;
}

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

ul.filter li {
	display: inline-block;
}

ul.filter li span {
	display: inline-block;
	/* border: 1px solid grey; */
	border-radius: 50%;
	text-align: center;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	font-size: 1em;
	margin-left: .5em;
}

.search:before {
	content: '\1F50D';
}

/* Chrome, Firefox, Opera, Safari 10.1+ */

::placeholder,
/* Internet Explorer 10-11 */

:-ms-input-placeholder,
/* Microsoft Edge */

::-ms-input-placeholder {
	color: darkgrey;
	/* Firefox */
	opacity: 1;
}

tr.total td {
	border-top: 1px solid lightgrey;
	padding-top: 4px;
}
#BidroundDiv input[type=text]:disabled {
	color: grey;
}

#BidroundDiv input.BundleName {
	width: 100%;
}

#BidroundDiv .bundleDetailsTable input[type=text] {
	margin-right: 0px;
	padding-left: 4px;
	text-align: right;
	width: 6em;
}

/* Bid Round Detail */

#bidroundDetail header h1 {
	float: left;
	width: 40%;
}

#bidroundDetail header dl {
	float: right;
	width: 50%;
}

/* fix table header on to of list when scrolling */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */

div.SupplierBidroundContainer {
	clear: both;
	height: 285px;
	overflow: auto;
	width: 900px
}

/* Reset overflow value to hidden for all non-IE browsers. */

html>body div.SupplierBidroundContainer {
	overflow: hidden;
	width: 900px
}

/* define width of table. IE browsers only                 */

div.SupplierBidroundContainer table {
	float: left;
	/* width: 740px */
}

table thead tr th {
	white-space: nowrap;
}

table.bundleDetailsTable {
	width: 689px;
}

table tr .NumberOfUnits,
table tr .TotalPrice,
table tr .Percentage,
table tr .UnitPrice,
table tr .BidRoundPrice {
	text-align: right;
}

table tr .NumberOfUnitsRemark {
	font-size: 8px;
	vertical-align: super;
	color: grey;
}

table tr .NumberOfUnits, table tr .NumberOfUnitsRemark {
	cursor: pointer;
}

#SupplierBidroundDetailsTable {
	width: 100%;
}

table tr .ProductName {
	width: 200px;
}

table#SupplierBidroundDetailsTable tr .ProductName {
	width: 300px;
}

table tr .TotalPrice,
table tr .UnitPrice
 {
	width: 120px;
	white-space: nowrap;
}

table tr th.TotalPrice,
table tr th.UnitPrice
 {
	white-space: normal;
}

table tr th.Percentage {
	white-space: normal;
}

table tr .NumberOfUnits {
	width: 60px;
}

table tr th.NumberOfUnits {
	white-space: normal;
}

table tr .BidRoundPrice {
	width: unset;
}

table tr .Bundle {
	width: unset;
}

table#SupplierBidroundDetailsTable tr .BidRoundPrice input {
	width: 80px;
	text-align: right;
}

table#SupplierBidroundDetailsTable tr button[name=saveSingleItemBundle] {
	display: none;
}

/* Bundle detail */

table tr .fixed {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table.bundleDetailsTable tr .ArticleNumber.fixed {
	max-width: 100px;
}

table.bundleDetailsTable tr.BundleTotal {
	border-top: solid 1px grey;
}

#BidroundDiv table.bundleDetailsTable tr td.Percentage input {
	width: 4em;
}
#BidroundDiv table.bundleDetailsTable tr.BundleTotal td.BidRoundPrice input {
	background-color: transparent;
	font-weight: bold;
	color: black;
}

#BidroundDiv footer {
	text-align: right;
}

/* shopping cart bundle */
caption {
	height: 16px;
	cursor: default;
	padding: 2px;
	color: black;
	background-color: rgb(210, 210, 210);
	text-align: left;
}

#ShoppingCartDiv .hmDiv {
	margin-right: 10px;
}

#shoppingCartBundleContainer {
	width: 650px;
	overflow: hidden;
	margin-right: 10px;
}
#shoppingCartBundles {
	overflow-y: scroll;
	height: 400px;
	margin-top: 10px;
}

.shoppingcartbundle {
	width: 100%;
}

.shoppingcartbundle  {
	text-align: center;
}
.shoppingcartbundle.selected button.selectshoppingcartbundle,
.shoppingcartbundle.active button.deselectshoppingcartbundle {
	display: none;
}

.shoppingcartbundle.selected span.hmCartHeader {
	background-color: rgb(125, 255, 224);
	color : black;
}

.shoppingcartbundle button {
    width: 128px;
    height: 2em;
    padding: 0;
    margin: 0;
    line-height: 1em;
	border: 3px solid white;
}
.shoppingcartbundle button.selectshoppingcartbundle:hover {
	background-color: rgb(243,146,0); /* limegreen; */
	color : black;
}

.shoppingcartbundle button.deselectshoppingcartbundle:hover {
	/* background-color: lightcoral; */
	background-color: rgb(243,146,0); /* limegreen; */
	color : black;
}
.shoppingcartbundle button.selectshoppingcartbundle:before,
.shoppingcartbundle button.deselectshoppingcartbundle:before {
	padding-right: 5px;
	font-size: 1.1em;
}
.shoppingcartbundle button.selectshoppingcartbundle:before {
	content: "\2190";
}
.shoppingcartbundle button.deselectshoppingcartbundle:before {
	content: "\2192";
}
.bundleHead button.deselectshoppingcartbundle {
	content: "X";
	width: 20px;
	height: 20px;
	padding: 0;
	line-height: 0;
	overflow: hidden;
	visibility: hidden;

}
.bundleHead button.deselectshoppingcartbundle:before {
	content: "X";
	background-color: grey;
	padding: 4px;
	visibility: visible;
	border-radius: 20px;
}

.shoppingcartbundle table {
	width: 100%;
}
.shoppingcartbundle.selected table caption {

}
.shoppingcartbundle table tr td,
.shoppingcartbundle table tr th
 {
	text-align: left;
	padding: 0;
}

.shoppingcartbundle table tr .marketplacePrice,
.shoppingcartbundle table tr .units,
.shoppingcartbundle table tr .discount
 {
	text-align: right;
	min-width: 60px;
}
.shoppingcartbundle table tr .units,
.shoppingcartbundle table tr .unitsRemark
{
	cursor: pointer;
}

.shoppingcartbundle table tr .marketplacePrice {
	padding-left: 20px;
}
.shoppingcartbundle table tr td.marketplacePrice:after {
	content: "\2192";
	padding-left: 10px;
}
.shoppingcartbundle table tr .Price,
.shoppingcartbundle table tr .UnitPrice {
	text-align: right;
	padding-left: 10px;
}
.shoppingcartbundle table tr .UnitPrice {
	width: 55px;
}
.shoppingcartbundle table tfoot th {
	border-top: 1px solid grey;
}
.shoppingcartbundle table tr .ArticleNumber {
	width:	180px;
}
.shoppingcartbundle table tr .ArticleNumber.fixed {
	max-width: 180px;
}
.shoppingcartbundle table tr .ProductName {
	width: 120px;
}
.shoppingcartbundle table tr .ProductName.fixed {
	max-width: 120px;
}
.shoppingcartbundle table tfoot th {
	font-weight: bold;
	padding-bottom: 10px;
    border-bottom: 2px solid black;
}

#ShoppingCartTable tr.bundleHead.noBundle {
	display: none;
}
#ShoppingCartTable tr.bundleHead td > div {
	background-color: rgb(25,168,124);
	color: white;
	padding: 3px;
	border-radius: 3px;
}
#ShoppingCartTable tr.bundleHead > td {
	background-color: transparent;
	padding: 3px;
	border-radius: 3px;
}

#ShoppingCartTable tr.last > td {
    border-top: 1px solid grey;
    padding-bottom: 10px;
}

td.bundleIndicator {
	width: 30px;
}
tr.previewInBundle td.bundleIndicator:after {
	margin: 0 0 0 10px;
	background-color: transparent;
	content: "\2190";
}
tr.previewInBundle.deselectBundle td.bundleIndicator:after {
	content: "\2192";
}
tr.previewInBundle {
	background-color: rgb(125, 255, 224); /* limegreen; */
	color : black;
}
tr.previewInBundle.deselectBundle {
	background-color: rgb(125, 255, 224); /* lightsalmon; */
	color : black;
}
tr.previewNotInBundle {
	/*background-color: transparent;*/
}

tr.proposalInBundle td:last-child:after {
	/*background-color: aqua;*/
}
tr.proposalNotInBundle {
}
#ShoppingCartTable table.proposalInBundle tr[data-proposalid]:not(.proposalInBundle) {
	display: none;
}
#ShoppingCartTable table.proposalInBundle tr[data-proposalid].previewInBundle {
	display: table-row;
}

#ProposalDetailDiv table.hmTable.proposalInBundle tr:last-child td:nth-child(-n+2) {
	visibility: hidden;
}

/* define width of table. Add 16px to width for scrollbar.           */

/* All other non-IE browsers.                                        */

html>body div.SupplierBidroundContainer table {
	/* width: 756px */
}

/* set table header to a fixed position. WinIE 6.x only                                       */

/* In WinIE 6.x, any element with a position property set to relative and is a child of       */

/* an element that has an overflow property set, the relative value translates into fixed.    */

/* Ex: parent element DIV with a class of SupplierBidroundContainer has an overflow property set to auto */

thead.fixedHeader tr {
	position: relative;
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */

/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

/* make the TH elements pretty */

thead.fixedHeader th {}

html>body tbody.scrollContent {
	display: block;
	height: 350px;
	overflow: auto;
	width: 100%
}

html>body thead.fixedHeader {
	display: table;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */

/* http://www.alistapart.com/articles/zebratables/                             */

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {}

tbody.scrollContent tr.alternateRow td {}

/* table with row counter and group counter */

table.rowcounter, table.groupcounter {
	counter-reset: rowNumber;
}

table.rowcounter tbody tr td.rowCounter, table.groupcounter tbody tr.newgroup td.rowCounter {
	counter-increment: rowNumber;
}

table.rowcounter tbody tr td.rowCounter::before, table.groupcounter tbody tr.newgroup td.rowCounter::before {
	content: counter(rowNumber);
	min-width: 1em;
	margin-right: 0.5em;
}

tr.newgroup {
	border-top: 1px solid grey;
}