﻿/* controls.css
   Additional control styles for custody chain */


/* listing styles */

.dynatable-pagination-links, .dynatable-per-page {
  display: block;
  margin: 0;
  padding: 0;
  float: right;
}
.dynatable-per-page
{
  padding: 4px 8px;
}

.dynatable-record-count {
  display: block;
  padding: 5px 0 2pc 0;
}

.dynatable-pagination-links span,
.dynatable-pagination-links li {
  display: inline-block;
}

.dynatable-page-link,
.dynatable-page-break {
  display: block;
  padding: 5px 7px;
}

.dynatable-page-link {
  cursor: pointer;
}

.dynatable-active-page,
.dynatable-disabled-page {
  cursor: text;
}
.dynatable-active-page:hover,
.dynatable-disabled-page:hover {
  text-decoration: none;
}

.dynatable-active-page {

}

.dynatable-active-page .dynatable-page-link {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  min-width: 14px;
  text-align: center;
}

.listTable {
  width: 100%;
  margin-bottom: 20px;
  border-spacing: 0;
  border-collapse: collapse;
}

.listTable TH {
  text-align: left;
  padding-bottom: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
.listTable TR TH:last-child {
  padding-right: 0;
}
.listTable TD {
  padding: 12px 12px 12px 0;
  vertical-align: top;
}
.listTable TR.mainRow TD.iconColumn {
  background-position: 6px 12px;
}
.listTable TR TD:first-child, .listTable TR TD.iconColumn, .unitIcon, .productIcon, .grownIcon, .processIcon, .tradeIcon, .outputIcon, .licenceIcon, .transactionIcon, .approvalIcon, .userIcon, .userPendingIcon, .milestoneIcon {
  background-repeat: no-repeat;
  background-position: 6px center;
  padding-left: 32px;
}

.listTable .existingSupplier {
  color: lightgrey;
}

.existingSupplierRadio {
  background-repeat: no-repeat;
  background-position: 6px center;
  padding-left: 28px;
  margin-left: -6px;
}


.actionsWidget TR TD:first-child {
  padding-left: 6px !important;
}
.actionsWidget TR.subRow TD {
  border-top: none;
}
.listTable TR TD:first-child {
  background-position: 6px 12px;
}
.listTable.selectionList TR TD:first-child {
  padding-left: 8px;
}
.listTable.plainList TR TD:first-child {
  padding-left: 0px;
}
.listTable TH A {
  text-decoration: none;
}
.listTable TD:last-child {
  padding-right: 0;
}
.listTable.selectionList INPUT[type="radio"] {
  margin: 3px 6px 3px 3px;
}

.listTable TR.groupedRow TD {
  padding-top: 9px;
  padding-bottom: 9px;
  background-position: 38px 9px;
}
.listTable TR.groupedRow TD:first-child {
  padding-left: 64px;
}
.listTable TD.summaryHeading {
  text-align: right;
}
.listTable TR.totalRow TD {
  font-weight: bold;
}
.listTable.invoiceList TD, .listTable.paymentList TD {
  width: 25%;
}

.unitList-PostcodeColumn {
  width: 120px;
}
.productList-RatioColumn {
  width: 20%;
}

.listTable .statusIncomplete, .listTable .statusTagged, .listTable .statusApprove, .listTable .statusWait,
.listTable .statusRevise, .listTable .statusConfirmed, .listTable .statusClosed,
.listTable .statusAlert, .listTable .statusValid, .listTable .statusNotValid,
.listTable .statusGrace, .listTable .statusWithdrawn {
  padding: 1px 0 1px 21px;
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 13px;
}
.listTable TR.groupedRowHeader .statusIncomplete, .listTable TR.groupedRowHeader .statusTagged, .listTable TR.groupedRowHeader .statusApprove, .listTable TR.groupedRowHeader .statusWait,
.listTable TR.groupedRowHeader .statusRevise, .listTable TR.groupedRowHeader .statusConfirmed, .listTable TR.groupedRowHeader .statusClosed,
.listTable TR.groupedRowHeader .statusAlert {
  font-size: 15px;
}
.flags .statusIncomplete, .flags .statusTagged, .flags .statusApprove, .flags .statusWait,
.flags .statusRevise, .flags .statusConfirmed, .flags .statusClose,
.flags .statusAlert, .flags .statusValid, .flags .statusNotValid,
.flags .statusGrace, .flags .statusWithdrawn {
  display: inline-block;
  overflow: hidden;
  height: 14px;
  width: 0;
  padding-left: 16px;
}

.taggedLabel {
  margin-right: 8px;
}

.secondaryLabel {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.tag {
  display: inline-block;
  padding-left: 13px;
  background-repeat: no-repeat;
  background-position: left center;
  vertical-align: middle;
  margin: -2px 0 -2px 0; /* left margin was 8px; */
}
.tag SPAN {
  display: table-cell;
  height: 20px;
  padding: 2px 8px 2px 6px;
  border-radius: 0 3px 3px 0;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}

.ratio {
  display: inline-block;
  position: relative;
  left: 0;
  height: 7px;
  margin: 6px 8px 6px 0;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  overflow: hidden;
  vertical-align: top;
}
.ratio { width: 120px; }
TD .ratio { width: 66%; }

.ratio SPAN {
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0;
}

.smallCircleAlert {
  display: inline-block;
  min-width: 18px;
  margin: -3px 2px -3px 0;
  padding: 3px 4px;
  border-radius: 13px;
  color: white;
  text-align: center;
}

.titleLinks {
  float: right;
  margin: 0px 0px 0px 24px;
}

.footerLinks {
  margin: 1pc 0;
  text-align: center;
}

.largeIconLink, .mediumIconLink {
  background-repeat: no-repeat;
  background-position: left center;
}

.footerLinks .largeIconLink {
  display: inline-block;
  margin-left: 24px;
  padding: 24px 0 24px 76px;
  text-align: center;
}
.footerLinks .mediumIconLink {
  display: inline-block;
  margin-left: 12px; margin-right: 12px;
  padding: 12px 0 12px 32px;
  text-align: center;
}
.footerLinks .largeIconLink:first-child
{
  margin-left: 0;
}

.titleLinks .largeIconLink {
  display: table-cell;
  height: 48px;
  padding: 0 12px 2px 76px;
  vertical-align: middle;
}
.titleLinks .largeIconLink:last-child {
  padding-right: 0;
}

.listGrid {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
  margin-left: -12px;
}
.listGrid > DIV, .listGrid LABEL {
  display: table-cell;
  box-sizing: border-box;
  float: left;
  width: 33%;
  height: 240px;
  margin: 0 0 12px 12px;
  padding: 24px 12px;
  text-align: center;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}
DIV.licenceLogoLarge {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
}
DIV.processLogoLarge {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
}

/* search and filtering */

.dynatable-search {
  display: block;
  overflow: hidden;
  padding: 8px 10px 8px 40px;
  margin-bottom: 20px;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: 8px center;
}
.dynatable-search INPUT[type=search], .dynatable-search SELECT, .dynatable-search .ebPicker, .dynatable-search UL.segmentedMenu {
  margin: 2px 8px 2px 4px;
  vertical-align: middle;
}
.dynatable-search INPUT[type=search], .dynatable-search SELECT, .dynatable-search .ebPicker, .chainVisualisation-Toolbar .ebPicker {
  padding: 3px 6px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  width: 192px;
}
.dynatable-search SELECT {
  padding: 2px 6px;
}
.dynatable-search .ebPicker, .chainVisualisation-Toolbar .ebPicker {
  width: 292px;
}
.dynatable-search UL.segmentedMenu{
  float: right;
  padding: 0;
  margin: 6px 0 6px 6px;
}
.dynatable-search .ebPicker A, .chainVisualisation-Toolbar .ebPicker A {
  text-decoration: none;
}
.dynatable-search A.ebPicker-Clear, .chainVisualisation-Toolbar A.ebPicker-Clear {
  padding: 0 0 0 4px;
}
.dynatable-search > DIV, .chainVisualisation-Toolbar .ebPicker > DIV, .dynatable-group > DIV {
  display: inline-block;
  vertical-align: middle;
}
.dynatable-search LABEL {
  padding-right: 3px;
}

.dynatable-search > .dynatable-group {
  display: block;
  clear: both;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
}

/* overview styles */

.overviewStackHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

}

.overviewStack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  top: 0;
  margin: 84px 0 28px 0;
  /* background-color: yellow; */
}

.overviewStack > H2 {
  position: absolute;
  display: table-cell;
  bottom: 100%;
  left: 0;
  right: 10px;
  padding-right: 10px;
  padding-bottom: 2px;
  vertical-align: bottom;
}

.overviewStack .overviewColumn {
  width: 200px;
  text-align: center;
  position: relative;
  top: 0;
}

.overviewColumn A {
  text-decoration: none;
}

.overviewStack H3 {
  padding-top: 104px;
  margin: 0 0 22px 0;
  background-repeat: no-repeat;
  background-position: center top;
}

.overviewCount {
  margin: 0px 20px;
}

.leftFloat {
  float: left;
}

.rightFloat {
  float: right;
  text-align: right;
}

.clearFloat {
  clear: both;
}

.largeCircle, .largeCircleAction, .largeCircleEmpty {
  display: table-cell;
  width: 81px;
  height: 81px;
  padding: 25px 39px 27px 39px;
  border-top-style: solid;
  border-top-width: 1px;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  vertical-align: middle;
  color: white;
}

.calloutHolder {
  position: absolute;
  bottom: 100%;
  margin-bottom: -14px;
}

.overviewCallout, .overviewCalloutAction,
.tradeCallout, .tradeCalloutAction {
  position: relative;
  border-style: solid;
  border-width: 1px;
  padding: 4px 12px;
  z-index: 10;
}

.tradeCalloutStack {
  width: 36%;
  margin: 330px auto 0 auto;
}

.tradeCalloutStack + .timelineList {
  margin-top: -60px;
}

  .tradeCalloutStack > .tradeCalloutAction {
    text-align: center;
  }

.tradeCalloutBoltOn {
  position: relative;
  top: 0;
  border-style: solid;
  border-width: 1px;
  border-top-width: 0;
  padding: 4px 12px;
  text-align: left;
  z-index: 10;
}

.tradeCalloutBoltOn-Logo {
  padding-top: 12px;
  text-align: center;
  font-weight: bold;
}

/* product and relationship overviews */

.metabar {
  overflow: visible;
  margin: 1pc 0 2pc 0;
  padding: 10px 0 0 18px;
  border-top: solid 1px #ccc;
  background-repeat: no-repeat;
  background-position: left 12px;
}
.metabar.pendingProduct { background-image: url(images/icn_clock_pending.gif); }
.metabar.activeProduct { background-image: url(images/icn_clock_active.gif); }
.metabar.inactiveProduct { background-image: url(images/icn_clock_inactive.gif); }

.metabar .rightFloat A { margin-left: 6px; }

.skuReference, .supplierCode {
  display: inline-block;
  position: relative;
  top: -1px;
  padding: 5px 10px 5px 25px;
  border: solid 1px #ccc;
  border-radius: 5px;
  vertical-align: middle;
  text-decoration: none;
  background-position: 10px center;
  background-repeat: no-repeat;
}

.skuReference {
  background-image: url(images/bg_sku_barcode.gif);
}

.supplierCode {
  background-image: url(images/icn_site_20.png);
  background-size: 10px;
}

.skuReference, A.skuReference:link, .supplierCode, A.supplierCode:link {
  color: #666;
}

.skuReference.emptySku, A.skuReference.emptySku:link, .supplierCode.emptyCode, A.supplierCode.emptyCode:link {
  border-style: dashed;
  color: #999;
}

UL.tagList {
  margin: 0 0 1pc 0;
  padding: 0;
}

UL.tagList LI {
  display: inline-block;
  list-style-type: none;
  margin: 2px 3px 2px 0;
  padding-left: 17px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: left center;
}
UL.tagList LI SPAN {
  display: table-cell;
  height: 24px;
  padding: 2px 10px 2px 8px;
  border-width: 1px;
  border-style: solid;
  border-left: none;
  border-radius: 0 5px 5px 0;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}

.tradeDetails, .grownDetails {
  position: relative;
  top: 0;
  margin: 4pc 0 1pc 0;
  text-align:center;
}
.tradeDetails.smaller, .grownDetails.smaller {
  margin: 3pc 0;
  overflow: hidden;
}
.ebSlideout-Inner .tradeDetails {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tradeDetails #tradeBar {
  position: absolute;
  top: 58px;
  left: 15%; right: 15%;
  margin: 0 84px;
  height: 4px;
}
.tradeDetails.smaller #tradeBar {
  top: 29px;
  height: 2px;
  margin: 0 48px;
}

.tradeDetails #buyerInfo, .tradeDetails #supplierInfo, .grownDetails #grownInfo {
  width: 30%;
  padding-top: 138px;
  background-repeat: no-repeat;
  background-position: center top;
}
.tradeDetails.smaller #buyerInfo, .tradeDetails.smaller #supplierInfo {
  padding-top: 72px;
}
.ebSlideout-Inner .tradeDetails #buyerInfo, .ebSlideout-Inner .tradeDetails #supplierInfo {
  width: auto;
}
.grownDetails #grownInfo {
  margin: 0 auto;
}

.tradeDetails #supplierInfo { float: left; }
.tradeDetails #buyerInfo { float: right; }

.tradeDetails #tradeInfo {
  position: absolute;
  left: 50%; top: 10px;
  width: 36%;
  margin: 0 -18%;
  padding-top: 144px;
}
.tradeDetails.smaller #tradeInfo {
  top: 5%;
  padding-top: 54px;
}

.tradeDetails #tradeIcon {
  position: absolute;
  left: 50%; top: 0;
  width: 132px;
  height: 100px;
  margin: 0 -66px;
  background-repeat: no-repeat;
  background-position: center center;
}
.tradeDetails.smaller #tradeIcon {
  width: 72px;
  height: 50px;
  margin: 0 -36px;
}

.tradeDetails #tradeDescription {
  margin: -36px 0 36px 0;
}

.tradeDetails H3, .grownDetails H3 {
  width: 160px;
  margin: 0 auto;
  padding: 0 0 20px 0;
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  white-space: nowrap;
}
.tradeDetails.smaller H3, .grownDetails.smaller H3 {
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.tradeDetails.smaller ADDRESS {
  font-size: 13px;
}

.tradeDetails.smaller H4, .grownDetails.smaller H4 {
  margin: 0 auto;
  font-size: 13px;
  line-height: 21px;
}

.tradeActions {
  text-align: center;
}
.tradeCalloutAction  A.button, .tradeCalloutAction BUTTON, .tradeCalloutAction INPUT[type=button], .tradeCalloutAction INPUT[type=submit] {
  margin: 3px 4px;
}



.processDetails {
  display: table;
  margin: 2pc auto 2pc auto;
  min-height: 120px;
}

.processDetails #ingredientList {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}
.processDetails #ingredientList UL {
  position: relative;
  top: 0;
  padding: 18px 10px 18px 0;
  list-style: none;
  text-align: left;
}
.processDetails #ingredientList LI {
  margin: 12px 0;
  padding: 0;
}
.processDetails #ingredientList UL:before {
  content: "";
  position: absolute;
  right: -20px; top: 50%;
  width: 20px; height: 3px;
  margin-top: -1px;
}
.processDetails #ingredientList UL:after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 20px;
  border-style: solid;
  border-left-style: none;
  border-width: 3px;
}

.processDetails #outputInfo {
  display: table-cell;
  position: relative;
  top: 0;
  vertical-align: middle;
  padding-left: 180px;
  min-height: 120px;
  background-repeat: no-repeat;
  background-position: 40px center;
}
.processDetails #outputInfo #processBar {
  position: absolute;
  top: 50%;
  left: -100px;
  width: 20px;
  height: 3px;
  margin-top: -2px;
}

.processDetails #processBar {
  position: absolute;
  top: 58px;
  left: 15%; right: 15%;
  margin: 0 84px;
  height: 4px;
}
.tradeDetails.smaller #processBar {
  top: 29px;
  height: 2px;
  margin: 0 48px;
}


.statusIcon.statusIncomplete, .statusIcon.statusTagged, .statusIcon.statusApprove, .statusIcon.statusWait,
.statusIcon.statusRevise, .statusIcon.statusConfirmed, .statusIcon.statusClosed {
  margin-bottom: 18px;
  padding: 60px 0 0 0;
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
}

.smaller .statusIcon {
  padding: 40px 0 0 0;
}

.timelineList {
  position: relative;
  top: 0;
  margin: 0;
  padding: 60px 0 0 0;
  clear: both;
}

.timelineList #timelineBar {
  position: absolute;
  left: 50%;
  right: 0;
  top: -20px;
  bottom: 3pc;
}

.timelineList LI {
  position: relative;
  top: 0;
  list-style: none;
  padding: 0;
  margin: 3pc 25%;
  text-align: center;
}

.timelineList LI.supplierAction {
  margin-left: 0;
  margin-right: 50%;
  padding-right: 32px;
  text-align: right;
}

.timelineList LI.buyerAction {
  margin-left: 50%;
  margin-right: 0;
  padding-left: 32px;
  text-align: left;
}

.timelineList LI .timelineIcon {
  position: absolute;
  top: -13px;
  width: 32px;
  height: 50px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center;
}

.timelineList LI.supplierAction .timelineIcon {
  right: -16px;
}
.timelineList LI.buyerAction .timelineIcon {
  left: -16px;
}

.timelineList .eventMessage {
  position: relative;
  display: inline-block;
  top: 0;
  margin: 0.75pc 0 0.25pc 0;
  padding: 6px 12px;
  text-align: left;
}
.timelineList .eventMessage P:first-child { margin-top: 0; }
.timelineList .eventMessage P:last-child { margin-bottom: 0; }

/* other bits not yet polished */

/* form styles */

.alertCallout, .alertbox, .revisebox,
.successbox, .infobox.completed {
  margin: 1pc 0;
  padding: 5px 10px 5px 36px;
  border-style: solid;
  border-width: 1px 1px 2px 1px;
  border-radius: 5px;
  background-position: 11px center;
  background-repeat: no-repeat;
  font-size: 13px;
}

.alertbox P, .revisebox P,
.successbox P, .infobox.completed P {
  margin: 0.5pc 0;
}

.schememarquee, .successmarquee, .alertmarquee {
  margin: 1pc 0;
  padding: 30px 80px;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}
.successmarquee H4, .alertmarquee H4 {
  margin: 0.7pc 0;
}

/* wizard bar and title */

UL.wizardbar {
  overflow: hidden;
  white-space: nowrap;
  list-style-type: none;
  margin: 2pc 0;
  padding: 0px 0px 0px 40px;
  background-position: 8px center;
  background-repeat: no-repeat;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.wizardbar LI {
  display: inline-block;
  position: relative;
  top: 0;
  margin: 0;
  padding: 12px 0px 12px 56px;
  /*background-position: right center;
  background-repeat: no-repeat;*/
}
.wizardbar LI:after {
  content: "";
  position: absolute;
  right: -36px;
  top: 0; bottom: 0;
  width: 36px;
  z-index: 2;
  background-position: right center;
  background-repeat: no-repeat;
}
.wizardbar LI:first-child {
  padding-left: 0;
  z-index: 1;
}
.wizardbar LI:last-child:after {
  background-image: none;
}
.wizardbar LI.finish {
  width: 100%;
  padding-left: 70px;
  background-position: 41px center;
  background-repeat: no-repeat;
}
.wizardbar LI.finish:after {
  display: none;
}

.wizardbar LI.complete, .wizardbar LI.invalid, .wizardbar LI.incomplete, .wizardbar LI.revise, .wizardbar LI.notRequired {
  background-position: 44px center;
  background-repeat: no-repeat;
  padding-left: 66px;
}

.wizardheader {
  display: table;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
  border-style: solid;
  border-bottom-style: none;
  border-width: 1px;
  border-radius: 10px 10px 0 0;
}
.wizardheader+.wizardbar {
  border-radius: 0 0 5px 5px;
  margin-top: 0;
}
.wizardheaderLogo {
  display: table-cell;
  width: 120px;
  padding: 30px;
  text-align: center;
  vertical-align: middle;
}
.wizardheaderText {
  display: table-cell;
  margin-left: 160px;
  padding: 10px 30px 10px 0;
  vertical-align: middle;
  font-size: 17px;
  color: #666;
}
.wizardheaderText :first-child {
  margin-top: 0;
}
.wizardheaderText H1 {
  margin-bottom: 6px;
}
.wizardheaderText :last-child {
  margin-bottom: 0;
}

.shrinkbox > DIV {
  display: inline-block;
}

.shrinkbox {
  margin: 1pc 0;
  text-align: center;
}

/* site selection and progress summary tables */

.siteList, .validationSummary {
  margin: 1pc 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.siteList TH {
  text-align: left;
  color: #377C2B;
}

.siteList TD {
  border-top: solid 1px #B5D6AF;
  padding: 3px 12px 3px 0;
}

.siteList .selected TD {
  background-color: #d4f7cd;
}

.validationSummary TH, .validationSummary TD {
  text-align: left;
  padding: 4px 0;
}

.validationSummaryBar {
  border-spacing: 0;
  border-collapse: collapse;
}

.validationSummaryBar TD {
  padding: 0;
}

.buttons {
  clear: both;
  margin: 1pc 0;
}

.buttons INPUT {
  margin-right: 9px;
}


/* picker styles */

.ebPicker {
  overflow-x: hidden;
}

/* picker styles */

.ebObjectPicker {
  background-color: white;
  border: 1px solid #aaa;
  font: 11px "open sans",tahoma,verdana,arial,helvetica,sans-serif;
  color: Black;
}

.assetreference {
  /*background-image: url(/eblock/newadmin/images/icn_arr_d.gif);*/
  background-position: 99% center;
  background-repeat: no-repeat; }

.picker-inner {
  bottom: 0px; }

.picker-tools {
  height: 28px;
  background-color: #f6f6f6;
  padding-top: 1px;
 }

.ebObjectPicker .picker-button, .ebObjectPicker .picker-button:active  {
  position: initial;
  margin: 4px;
  margin-left: 0px;
  padding: 0px;
  height: 20px; /* 14px for IE5 */
  width: 60px;
  background: #e6e6e6;
  border: 1px solid #ccc;
  border-radius: initial;
  font: 11px "open sans",tahoma,verdana,arial,helvetica,sans-serif;
}
.ebObjectPicker .picker-input {
  margin: 4px;
  padding: 2px 2px 2px 18px;
  height: 14px; /* 14px for IE5 */
  width: 200px;
  background: white url("/glue/images/icn_search_14.gif") no-repeat 2px 2px;
  border: 1px solid #ccc;
  font: 8pt open sans,tahoma,verdana,arial,helvetica,sans-serif;
  vertical-align: top;
}
.ebObjectPicker .picker-input:focus {
  outline: none;
}

.ebObjectPicker .picker-item, .ebObjectPicker .picker-iconitem {
  width: auto; height: 18px;
  padding: 3px 4px 3px 4px;
  border-bottom: 1px solid #f6f6f6;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  font: 9pt/13px open sans,tahoma,verdana,arial,helvetica,sans-serif; }
.picker-count {
  display: inline-block;
  padding: 1px 0px 2px 2px;
  color: #666; }
.picker-iconitem .picker-link {
  display: inline-block;
  padding: 2px 3px 3px 21px;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: 1px 1px; }
.picker-item .picker-link {
  padding: 2px 3px 2px 3px; }
.picker-iconitem A, .picker-item A {
  color: black; }
.picker-iconitem A.highlighted, .picker-item A.highlighted {
  background-color: #ccc; }
.picker-iconitem SPAN.unexpanded, .picker-item SPAN.unexpanded,
.picker-iconitem SPAN.expanded, .picker-item SPAN.expanded,
.picker-iconitem SPAN.empty, .picker-item SPAN.empty {
  width: 2px;
  height: 14px;
  display: inline-block;
  padding-left: 12px;
  margin: 2px 0px 0px 0px;
  background-position:left 1px;
  background-repeat: no-repeat; }
.picker-iconitem SPAN.unexpanded, .picker-item SPAN.unexpanded {
  background-image: url(/glue/images/icn_tree_collapsed.gif); }
.picker-iconitem SPAN.expanded, .picker-item SPAN.expanded {
  background-image: url(/glue/images/icn_tree_expanded.gif); }
.picker-iconitem SPAN.unexpanded, .picker-item SPAN.unexpanded,
.picker-iconitem SPAN.expanded, .picker-item SPAN.expanded {
  cursor: pointer; }
.picker-iconitem SPAN.busy {
  background-image: url(/glue/images/busy.gif) !important; }
.picker-iconitem .disabled {
  color: #888; }

.picker-iconitem .picker-checkbox {
  height: 13px; width: 13px;
  vertical-align: top; }

.asseticon {
  background-image: url(/eblock/newadmin/images/asset_16.gif); }
.usericon {
  background-image: url(/eblock/newadmin/images/entity_16.gif); }
.groupicon {
  background-image: url(/eblock/newadmin/images/entity_group_16.gif); }
.placeholdericon {
  background-image: url(/eblock/newadmin/images/entity_place_16.gif); }
.companyicon {
  background-image: url(/eblock/newadmin/images/entity_comp_16.gif); }
.categoryicon {
  background-image: url(/eblock/newadmin/inline/images/icn_category_16.gif); }
.equivcategoryicon {
  background-image: url(/eblock/newadmin/inline/images/icn_category_equiv_16.gif); }
.narrowcategoryicon {
  background-image: url(/eblock/newadmin/inline/images/icn_category_narrow_16.gif); }
.relatedcategoryicon {
  background-image: url(/eblock/newadmin/inline/images/icn_category_related_16.gif); }

/* tree and list styles */

.pending, .pending A {
  background-color: #eeffee !important; }
.suspended, .suspended A {
  background-color: #ffeeee !important;
  text-decoration: line-through !important; }
.expired, .expired A {
  color: silver !important; }
.old, .old A {
  color: silver !important; }
.old A {
  text-decoration: line-through !important; }

/* spreadsheet import wizards */

.importPreview {
  overflow: hidden;
  border: solid 1px #aaa;
  border-radius: 5px;
}

.importPreview-Toolbar {
  display: table;
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  height: 33px;
  padding: 3px 12px;
  border-bottom: solid 1px #ccc;
}
.importPreview-Toolbar .importPreview-ToolbarInner {
  display: table-cell;
  vertical-align: middle;
}

.importPreview-Body {
  height: 480px;
  padding: 12px;
  background-color: #eee;
  overflow: auto;
}

.importPreview-Body TABLE {
  border-spacing: 0;
  border-collapse: collapse;
  border: solid 1px #ccc;
}

.importPreview-Body TH, .importPreview-Body TD,
.importMatches TH, .importMatches TD {
  background-color: white;
  background-repeat: no-repeat;
  background-position: 6px 3px;
  text-align: left;
  vertical-align: top;
  padding: 2px 6px;
}
.importPreview-Body TH, .importMatches TH {
  white-space: nowrap;
  padding-top: 12px;
}

TABLE.importMatches {
  border-spacing: 0;
  border-collapse: collapse;
}
TABLE.importMatches TD, TABLE.importMatches TH {
  width: 200px;
  padding-left: 0px;
}
TABLE.importMatches TR:last-child TD {
  padding-top: 12px;
}

.tradeDetails TABLE.importMatches {
  margin: 2pc auto 0 auto;
}
.tradeDetails TABLE.importMatches TR:last-child TD {
  padding-top: 2px;
}
.tradeDetails TABLE.importMatches TD {
  width: auto;
  padding-top: 2px;
  padding-bottom: 2px;
}
.tradeDetails TABLE.importMatches TH {
  width: auto;
  padding: 2px 20px 2px 0;
}

.importPreview-Body TD, .importMatches TD {
  white-space: pre;
}
.importPreview-Body TD.importPreview-Action, .importMatches TD.importPreview-Action {
  white-space: normal;
  background-color: #f8f8f8;
}

.importPreview-Body TH {
  border-bottom: solid 1px #ccc;
}

.importPreview-Body TD {
  border-top: solid 1px #eee;
}

.importMatches DIV, .importMatches TD {
  background-color: white;
  background-repeat: no-repeat;
  background-position: center left;
}

.importPreview TD.match, .importPreview TD.verify, .importPreview TD.notmatched, .importPreview TD.diff, .importPreview TD.invalid {
  padding-left: 26px;
}
.importMatches TD.match, .importMatches TD.diff,
.importMatches DIV.match, .importMatches DIV.diff {
  padding-left: 20px;
}

.importPreview TD.match, .importMatches TD.match, .importMatches DIV.match { background-image: url(images/icn_status_confirmed_16.png); }
.importPreview TD.verify { background-image: url(images/icn_status_approve_16.png); }
.importPreview TD.diff, .importMatches TD.diff { background-image: url(images/icn_status_revise_16.png); }
.importPreview TD.invalid, .importPreview TD.notmatched { background-image: url(images/icn_status_notvalid_16.png); }

.importPreview TD.match .importPreview-Status { color: #3E9E49; }
.importPreview TD.verify .importPreview-Status,
.importPreview TD.revise.importPreview-Status { color: #CE7C29; }
.importPreview TD.invalid .importPreview-Status,
.importPreview TD.notmatched .importPreview-Status { color: #A53C3C; }

.importPreview-Match {
  margin-bottom: 6px;
}

.importPreview-Truncated TD {
  border-top: none;
  background-color: #eee;
  padding: 6px 6px 10px 6px;
  font-size: 11px;
}

/* taxonomy picker */

.taxonomyPicker {
  overflow: hidden;
  height: 366px;
  border: solid 1px #aaa;
  border-radius: 5px;
}
.taxonomyPicker-Toolbar {
  background-color: white;
  height: 33px;
  padding: 3px 6px;
  border-bottom: solid 1px #ccc;
}
.taxonomyPicker-Toolbar A {
  display: inline-block;
  padding: 7px 0 7px 28px;
  margin: 0 6px;
  background-position: left 5px;
  background-repeat: no-repeat;
}
.taxonomyPicker-Toolbar A[disabled] {
  pointer-events: none !important;
  cursor: default;
  color: silver;
}

.taxonomyPicker-Root {
  background-color: #eee;
  margin-top: 40px;
  padding: 12px;
  overflow-y: auto;
}

.taxonomyPicker-SearchHolder {
  margin-right: 108px;
}
.taxonomyPicker-Root INPUT, .taxonomyPicker-Root INPUT[type=button] {
  box-sizing: border-box;
  margin: 0;
  padding: 6px 9px;
  border: solid 1px #ccc;
  font-size: 15px;
  background-color: white;
  border-radius: 0 !important;
  background-image: none;
  color: black;
}
.taxonomyPicker-Root INPUT[type=button] {
  background-color: #ddd;
  width: 100px;
}

.taxonomyPicker-Shortcuts, .taxonomyPicker-Index {
  margin: 6px -6px;
  overflow: hidden;
}

.taxonomyPicker-Shortcuts > H5, .taxonomyPicker-Index > H5 {
  margin: 9px 6px 0 6px;
  font-size: 13px;
  font-weight: normal;
  color: #999;
  border: none;
}


.taxonomyPicker-IndexItem {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  padding: 6px;
  float: left;
}
.taxonomyPicker-IndexItem DIV {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border: solid 1px #d4d4d4;
  border-bottom-width: 2px;
  cursor: pointer;
}

.taxonomyPicker-Cards {
  position: absolute;
  display: none;
  margin-top: 40px;
}

.taxonomyPicker-Card {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  border: solid 1px silver;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background-color: white;
}

.taxonomyPicker-CardHeader {
  padding: 9px 9px 9px 24px;
  border-bottom: solid 2px silver;
}
.taxonomyPicker-CardHeader .taxonomyPicker-Buttons {
  float: right;
}

.taxonomyPicker-CardHeader H1 {
  margin: 0;
}
.taxonomyPicker-CardHeader H1.taxonomyPicker-Flagged::after {
  content: "";
  display: inline;
  padding-left: 20px;
  margin-left: 4px;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: baseline;
}
.taxonomyPicker-CardHeader H4 {
  margin: 3px 0 6px 0;
  font-size: 12px;
  font-weight: normal;
  color: #666;
}

.taxonomyPicker-CardHeader UL.tagList {
  margin: 3px 0 0 0;
}
.taxonomyPicker-Shortcuts UL.tagList {
  margin: 6px 6px 0 6px;
  overflow: hidden;
}
.taxonomyPicker-Shortcuts UL.tagList > LI {
  float: left;
  display: inline-block;
}
.taxonomyPicker-CardHeader UL.tagList > LI, .taxonomyPicker-Shortcuts  UL.tagList > LI {
  background-image: url(images/bg_tab_outline_gr_24.png);
  padding-left: 13px;
  margin-right: 4px;
  cursor: pointer;
}

.taxonomyPicker-CardHeader UL.tagList > LI > SPAN, .taxonomyPicker-Shortcuts UL.tagList > LI > SPAN {
  height: 18px;

  font-size: 12px;
  background-color: white;
  border-color: #999;
  color: #999;
}
.taxonomyPicker-Shortcuts UL.tagList > LI > SPAN {
  color: #666;
}

.taxonomyPicker-CardDescription {
  padding: 9px 9px 9px 24px;
  border-bottom: dotted 1px silver;
}
.taxonomyPicker-CardWarning {
  padding: 9px 9px 9px 44px;
  border-bottom: dotted 1px silver;
  background-position: 24px 10px;
  background-repeat: no-repeat;
}

.taxonomyPicker-TermList {
  margin: 0;
  padding: 0;
}

.taxonomyPicker-TermList LI {
  margin: 0;
  list-style: none;
  border-top: dotted 1px silver;
  padding: 4px 24px;
}
.taxonomyPicker-TermList LI:first-child {
  border-top: none;
}
.taxonomyPicker-TermList A.taxonomyPicker-Flagged::after {
  content: "";
  display: inline;
  padding-left: 16px;
  margin-left: 4px;
  background-size: 16px;
  background-repeat: no-repeat;
  vertical-align: baseline;
}

.taxonomyPicker-Chosen {
  display: inline-block;
  padding: 3px 3px 3px 20px;
  background-position: left center;
  background-repeat: no-repeat;
}

/* certificates and claims */

.custodyCertificate {

  padding: 24px;

  border: solid 1px silver;
  border-radius: 5px;
  background-image: url(images/bg_certificate.png);

  overflow: hidden;

}

.custodyCertificate H2 {
  margin: 0;
  padding: 132px 0 16px 0;
  text-align: center;
  color: black;
  border-bottom: solid 1px #aaa;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(images/icn_cert_128.png);
}

.certificateSummary {
  text-align: center;
  margin: 24px 0 48px 0;
  font-size: 13pt;
}
.certificateSummary P {
  font-style: italic;
}
.certificateSummary H3 {
  font-size: 17pt;
}

.certificateDetail {
  padding-top: 20px;
  border-top: solid 1px #aaa;
}

.certificateDetail TABLE {
  margin: 0 auto;
}

.certificateDetail TH {
  text-align: left;
  padding-right: 12px;
}

.pendingClaimStatus, .currentClaimStatus, .graceClaimStatus, .expiredClaimStatus, .suspendedClaimStatus, .withdrawnClaimStatus, .closedClaimStatus,
.validCertificateStatus, .notvalidCertificateStatus, .graceCertificateStatus, .withdrawnCertificateStatus {
  display: inline-block;
  padding: 36px 0px 36px 76px;
  font-weight: bold;
  background-position: left center;
  background-repeat: no-repeat;
}

.pendingClaimStatus, .expiredClaimStatus, .closedClaimStatus { background-image: url(images/icn_cert_status_closed_48.png); color: #A3A3A3; }
.currentClaimStatus, .validCertificateStatus { background-image: url(images/icn_cert_status_valid_48.png); color: #3E9E49; }
.graceClaimStatus, .graceCertificateStatus { background-image: url(images/icn_cert_status_grace_48.png); color: #CE7C29; }
.suspendedClaimStatus { background-image: url(images/icn_cert_status_suspended_48.png); color: #A53C3C; }
.withdrawnClaimStatus, .withdrawnCertificateStatus, .notvalidCertificateStatus { background-image: url(images/icn_cert_status_withdrawn_48.png); color: #A53C3C; }

.smallCircleAlert.validCircle { background-color: #3E9E49; }
.smallCircleAlert.graceCircle { background-color: #CE7C29; }
.smallCircleAlert.notValidCircle { background-color: #A53C3C; }
.smallCircleAlert.notVerifiedCircle { background-color: #A3A3A3; }

UL.evidenceList {
  list-style: none;
  padding: 0;
}
#content > UL.evidenceList {
  margin: 40px 0;
}
#content > UL.evidenceList.centered {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

UL.evidenceList > LI {
  padding: 12px 12px 12px 40px;
  background-position: left 6px;
  background-repeat: no-repeat;
  font-size: 15px;
}
#content > UL.evidenceList > LI {
  margin-bottom: 6px;
}

UL.evidenceList .detail, UL.evidenceList .detail LI {
  font-size: 13px;
}

UL.evidenceList .detail P  {
  margin: 0.7pc 0 0 0;
}
UL.evidenceList .detail LI {
  margin: 0.7pc 0 0 0;
  padding-left: 0.25pc;
  list-style: disc;;
}

/* chain visualisations */

.chainVisualisation {
  position: relative;
  top: 0;
  height: 600px;
  overflow: hidden;
  border: solid 1px silver;
  border-radius: 5px;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.chainVisualisation-Toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 9px 12px;
  border-bottom: solid 1px silver;
  background-color: #eee;
}

.chainVisualisation-Toolbar UL.segmentedMenu {
  float: right;
  margin: 0;
  padding: 4px 0 0 0;
}
.chainVisualisation-Toolbar .ebPicker {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.chainVisualisation-Overlay {
  position: absolute;
  top: 60px;
  right: 12px;
  display: block;
}

.chainVisualisation-Title {
  position: absolute;
  top: 60px;
  left: 12px;
  margin-right: 100px;
  display: block;
}

.chainVisualisation-Overlay > A {
  display: block;
  width: 27px;
  height: 27px;
  margin-bottom: 6px;
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 1px silver;
  border-radius: 3px;
  cursor: pointer;
}

.chainVisualisation-ZoomIn { background-image: url(images/btn_zoomin_21.png); }
.chainVisualisation-ZoomOut { background-image: url(images/btn_zoomout_21.png); }

.chainVisualisation-PopupInner {
  border: solid 1px silver;
  background-color: white;
  padding: 12px;
}
.popupAlignedTop .chainVisualisation-PopupInner { border-bottom-width: 2px; }
.popupAlignedBottom .chainVisualisation-PopupInner { border-top-width: 2px; }
.popupAlignedLeft .chainVisualisation-PopupInner { border-right-width: 2px; }
.popupAlignedRight .chainVisualisation-PopupInner { border-left-width: 2px; }

.chainVisualisation-PopupInner .nodeProductDetails,
.chainVisualisation-PopupInner .nodeSiteDetails {
  padding-left: 27px;
  background-position: left top;
  background-repeat: no-repeat;
}

.chainVisualisation-PopupInner .nodeSiteDetails {
  background-image: url(images/icn_site_20.png);
}

.chainVisualisation-PopupInner .nodeGrownProductDetails {
  background-image: url(images/icn_grown_20.png);
}

.chainVisualisation-PopupInner .nodeManufacturedProductDetails {
  background-image: url(images/icn_process_20.png);
}

.chainVisualisation-PopupInner .nodeOutputProductDetails {
  background-image: url(images/icn_output_20.png);
}

.chainVisualisation-PopupInner .nodePurchasedProductDetails {
  background-image: url(images/icn_product_20.png);
}

.chainVisualisation-PopupInner .nodeSiteName {
  font-size: 15px;
  line-height: 18px;
  font-weight: bold;
}
.chainVisualisation-PopupInner .nodeProductDetails,
.chainVisualisation-PopupInner .nodeSiteDetails {
  padding-bottom: 9px;
  border-bottom: dotted 1px silver;
  margin-bottom: 9px;
}

.nodeClaimDetails .listTable {
  margin: -3px 0;
}
.nodeClaimDetails .listTable TD {
  padding-top: 3px;
  padding-bottom: 3px;
  border: none;
  font-size: 13px;
}
.nodeClaimDetails .listTable.statusList TD:first-child {
  padding-left: 22px;
  background-position: left center;
}

.chainVisualisation-Loading {
  display: inline;
  padding: 9px;
  background-image: url(images/icn_spinner_18.gif);
  background-position: center center;
  background-repeat: no-repeat;
}

.chainVisualisation-PopupInner UL.tagList {
  margin: 3px 0 0 0;
}

.chainVisualisation-PopupInner UL.tagList LI {
  background-image: url(images/bg_tab_outline_gr_24.png);
  padding-left: 13px;
  margin-right: 4px;
  cursor: pointer;
}

.chainVisualisation-PopupInner UL.tagList LI SPAN {
  height: 18px;

  font-size: 12px;
  border-color: #999;
  color: #999;
}

.chainVisualisation-PopupInner UL {
  margin: 0;
  padding: 0;
}

.chainVisualisation-PopupInner LI {
  list-style: none;
  margin: 12px 0;
}

.chainVisualisation-Title,
.chainVisualisation-PopupInner LI A {
  padding: 3px 0 4px 26px;
  background: url(images/icn_cert_24.png) no-repeat;
  background-position: left center;
  cursor: pointer;
}

/* slider control for privacy */

.privacySlider {
  position: relative;
  top: 0;
  width: 60%;
  margin: 0 auto;
  height: 320px;
  overflow: visible;
}
.privacySlider-Track {
  position: absolute;
  top: 160px;
  left: 0;
  right: 0;
  border-top: solid 2px silver;
}
.privacySlider-Thumb {
  position: absolute;
  box-sizing: border-box;
  top: 141px;
  height: 40px;
  width: 20px;
  margin-left: -10px;
  border: solid 2px silver;
  border-radius: 4px;
  background-color: #eee;
}
.privacySlider-LabelAbove, .privacySlider-LabelBelow {
  position: absolute;
  text-align: center;
}
.privacySlider-LabelAbove { top: 120px; }
.privacySlider-LabelAbove > DIV {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 100px;
  margin: 0 -50px;
  background-position: top center;
  background-repeat: no-repeat;
}
.privacySlider-LabelBelow { top: 200px; }
.privacySlider-LabelBelow > DIV {
  position: absolute;
  top: 0;
  width: 300px;
  margin: 0 -150px;
}

/* terms and policy page formatting */

.terms {
  margin: 2pc 0pc;
}

.terms > H1 {
  font-size: 21px;
}

.terms DL {
  margin: 1pc 0;
}

.terms DL DT {
  float: left;
}

.terms DL DD {
  margin: 1pc 0 1pc 3pc
}

.terms DL DT.termsSectionHeading, .terms DL DD.termsSectionHeading {
  font-size: 12pt;
  font-weight: bold;
}

.terms DL DT.termsSectionHeading {
  margin-top: 1pc;
}

.terms DL DT.termsSectionHeading:first-child {
  margin-top: 0pc;
}

.terms DL DD.termsSectionHeading {
  margin-top: 2pc;
  margin-bottom: 1.25pc;
}

.terms DL DT.termsSectionSubheading, .terms DL DD.termsSectionSubheading {
  font-weight: bold;
}

.terms BLOCKQUOTE {
  margin: 0 0 0 3pc;
}

.terms DL DD TABLE.termsDefinitions {
  border: none;
  border-spacing: 0;
}

.terms DL DD TABLE.termsDefinitions TH {
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 1pc;
}

.terms DL DD TABLE.termsDefinitions TD {
  vertical-align: top;
  padding-bottom: 0.5pc;
}

.terms DL OL {
  margin: 1pc 0;
  padding-left: 2.75pc;
}

.terms DL LI {
  margin: 1pc 0;
  padding-left: 0.25pc;
}

/* adjustments for phones and tablets */

@media all and (max-width: 1024px) {

  .dynatable-search INPUT[type=search] { width: 142px; }
  .dynatable-search .ebPicker { width: 192px; }

  .privacySlider {
    width: auto;
    margin: 0 150px;
  }
}

@media all and (max-width: 892px) {
  .dynatable-search INPUT[type=search], .dynatable-search .ebPicker, .dynatable-search UL.segmentedMenu { margin-right: 4px; }
  .dynatable-search LABEL { display: none; }
}
