/* standard.css
   stylesheet for generic custody chain website */

BODY, HTML {
  margin: 0;
  padding: 0;
}

#pageStack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

#pageStack > header {
  flex: none;
  height: 86px;
  border-bottom: solid 1px #D9D9D9;
  transition: height 0.2s ease-out;
}
#pageStack.sticky > header {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 99;
}
#pageStack.shrunk > header {
  height: 56px;
  transition: height 0.2s ease-out;

}

#stackBody {
  flex: 1 1 auto;
  padding-top: 2pc;
}

#pageStack.sticky > #stackBody {
  margin-top: 129px;
}

#pageStack > header, #pageStack > footer, #pageStack > section {
  padding-left: 80px;
  padding-right: 80px;
}

#pageStack > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#headerButtons {
  padding: 3px 0px 3px 25px;
  font-size: 14px;
}

#headerLinks {
  font-size: 14px;
}

#actionsLink, #basketLink {
  padding: 5px 0 7px 34px;
  background-size: 29px;
  background-position: left center;
  background-repeat: no-repeat;
}

#headerLinks #userAccount, #headerLinks #helpLink {
  padding: 3px 0px 3px 25px;
  background-repeat: no-repeat;
  background-position: left center;
}

#headerLinks > A {
  margin-left: 12px;
}
#headerLinks > A:first-child {
  margin-left: 0;
}

#basketLink .smallCircleAlert {
  margin-left: 0.3pc;
}

.actionPopupOuter {
  border-style: solid;
  border-width: 1px;
  padding: 12px;
  border-top-width: 2px;
}

.actionIcon, .helpIcon, .ebLogout A {
  background-repeat: no-repeat;
  background-position: left 7px;
  padding: 6px 0px 6px 27px;
  display: inline-block;
}

/* navigation styles */

#stackCrumbs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: none;
  height: 42px;
  border-bottom: dotted 1px #e8e8e8;
}
#stackCrumbs :only-child {
  text-align: right;
  width: 100%;
}

#pageStack.sticky > #stackCrumbs {
  position: fixed;
  top: 87px; left: 0px; right: 0px;
  z-index: 98;
  transition: top 0.2s ease-out;
}
#pageStack.sticky.shrunk > #stackCrumbs {
  top: 57px;
  transition: top 0.2s ease-out;
}

#pageStack > footer {
  flex: none;
  height: 108px;
  padding-top: 12px;
  background: url(images/bg_footer.png) repeat-x #eee;
  border-top: solid 1px #ccc;
}
#pageStack > #stackBanner + footer {
  height: 120px;
}

UL.segmentedMenu {
  /*margin-left: -50%;*/
  padding: 12px 0 0 0;
  width: 100%;
  text-align: center;
}
.dynatable-search UL.segmentedMenu, .chainVisualisation-Toolbar UL.segmentedMenu {
  display: inline-block;
  width: auto;
  text-align: left;
}

UL.segmentedMenu LI {
  display: inline-block;
}
UL.segmentedMenu LI A {
  font-family: Signika,"Trebuchet MS",arial,helvetica,sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-decoration: none;
  padding: 5px 12px 4px 12px;
  border: solid 1px;
  border-left-style: none;
}

UL.segmentedMenu LI:first-child A {
  border-left-style: solid;
  border-radius: 4px 0 0 4px;
}
UL.segmentedMenu LI:last-child A {
  border-radius: 0 4px 4px 0;
}

UL.tabbedMenu {
  margin: 1.5pc -18px;
  padding: 1px 18px 12px 18px;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: bottom;
}
UL.tabbedMenu LI {
  display: block;
  float: left;
}
UL.tabbedMenu LI A {
  display: block;
  padding: 7px 12px 6px 12px;
  font-family: Signika,"Trebuchet MS",arial,helvetica,sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  border-left-style: none;
  border-bottom-style: none;
  border-radius: 6px 6px 0 0;
  background-repeat: repeat-x;
  background-position: bottom;
}
UL.tabbedMenu LI:first-child A {
  border-left-style: solid;
}
UL.tabbedMenu LI A.selected {
  margin-bottom: -1px;
  padding-bottom: 7px;
  border-top-width: 3px;
  padding-top: 5px;
  background-repeat: repeat-x;
  background-position: bottom;
}
UL.tabbedMenu .smallCircleAlert {
  position: relative;
  top: -1px;
  margin-right: -2px;
  margin-left: 4px;
  min-width: 16px;
  padding: 3px;
  font-size: 14px;
}

#crumbsBackNavigation A {
  padding: 2px 0px 4px 20px;
  background-size: 16px;
  background-position: left center;
  background-image: url(images/icn_link_back.svg);
  background-repeat: no-repeat;
}

#stackBackNavigation {
  flex: none;
  margin-top: 2pc;
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: dotted 1px #e8e8e8;
}

#stackBackNavigation UL {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#stackBackNavigation UL LI {
  margin-right: 18px;
  padding: 4px 0px 6px 28px;
  background-size: 22px;
  background-position: left center;
  background-image: url(images/icn_link_back.svg);
  background-repeat: no-repeat;
  font-size: 15px;
}

#stackBanner {
  position: fixed;
  bottom: 0px; left: 0px; right: 0px;
  height: 86px;
  z-index: 98;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
#stackBanner > .bannerGuidance {

}
#stackBanner > .bannerLink {
  margin-left: 20px;
  text-align: right;
  white-space: nowrap;
}
#stackBanner > .bannerLink > IMG {
  height: 48px;
  margin-right: 12px;
  vertical-align: middle;
}

#pageStack > footer UL {
  display: block;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
#pageStack > footer UL LI {
  display: inline-block;
  margin: 0 0 0 0 ;
  padding: 0;
}
#pageStack > footer LI A {
  color: #666;
  text-shadow: 0 1px 0px #f8f8f8;
}
#pageStack > footer LI:after {
  content: "|";
  color: #ccc;
  padding: 0 12px;
}
#pageStack > footer LI.last:after {
  content: "";
}

#footerLogos {
  clear: left;
  float: left;
}

#footerLogos IMG {
  margin-right: 12px;
  border: none;
}

#footerText {
  float: right;
  text-align: right;
  color: #999;
}

/* content styles */

BODY, TD {
  text-rendering: optimizeLegibility;
  font: 13px "Open Sans",verdana,arial,helvetica,sans-serif;
}

H1, H2, H3 {
  font-family: Signika,"Trebuchet MS",arial,helvetica,sans-serif;
  font-weight: 600;
}

H1 {
  font-size: 32px;
  color: #333;
}

H2 {
  margin-bottom: 1.5pc;
  font-size: 21px;
  border-bottom: solid 1px;
  border-bottom-color: #B05DB6;
}

H4 {
  font-size: 17px;
}
H5 {
  font-size: 15px;
  font-weight: normal;
}

BIG, .big {
  font-size: 15px;
}

ADDRESS {
  font-style: normal;
  font-size: 17px;
}

INPUT, TEXTAREA, SELECT, BUTTON {
  font: 13px "Open Sans",verdana,arial,helvetica,sans-serif;
  text-rendering: optimizeLegibility;
}

/* home page */

#pageStrap {
  position: relative;
  min-height: 400px;
  margin-bottom: 48px;
  padding-top: 24px;
  background-position: center top;
  background-repeat: repeat-x;
  text-align: center;
}

#pageStrap > * {
  position: relative;
  top: 0;
}

#pageStrap .strapInner {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0;
  height: 400px;
}

.strapBox {
  margin: 0 auto;
  padding: 24px 0;
  width: 400px;
  background-color: white;
  border-radius: 11px;
  box-shadow: rgba(128, 128, 128, 0.3) 0px 2px 6px;
  text-align: left;
}
.strapBox.registrationBox {
  padding: 24px 48px;
  width: 600px;
}

.strapBox #strapLogo {
  display: block;
  margin: 24px auto 36px auto;
}

.strapBox .ebLogin {
  width: 200px;
  margin: 0 auto;
}
.strapBox .ebForgotPassword {
  width: 300px;
  margin: 0 auto;
}

/* buttons */

.tradeCalloutAction .text, .tradeCalloutAction .longtext {
  border: solid 1px;
}

.buttons {
  overflow: hidden;
  margin: 12px 0;
  padding-top: 12px;
  border-top: solid 1px #ccc;
}

.leftButtonGroup {
  float: left;
  margin-right: 12px;
}

.rightButtonGroup {
  text-align: right;
}

.largeButtonGroup {
  margin: 24px 0;
  text-align: center;
}

.buttons A.link {
  display: inline-block;
  padding: 2px 0;
}

A.button {
  display: inline-block;
  white-space: nowrap;
}

A.button, BUTTON, INPUT[type=button], INPUT[type=submit] {
  min-width: 72px;
  margin: 0 4px 0 0;
  padding: 3px 18px 3px 18px;
  border-style: solid;
  border-width: 0 0 2px 0;
  border-radius: 14px 14px 16px 16px;
  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 1px;
  text-decoration: none;
  text-align: center;
}
A.button.disabled, BUTTON.disabled, INPUT[type=button].disabled, INPUT[type=submit].disabled,
A.button:disabled, BUTTON:disabled, INPUT[type=button]:disabled, INPUT[type=submit]:disabled {
  outline: none;
}
A.button.outline, BUTTON.outline, INPUT[type=button].outline, INPUT[type=submit].outline {
  padding-left: 17px;
  padding-right: 17px;
  border-width: 1px;
  border-radius: 14px;
}

.ebUseBusyIndicator {
  color: transparent !important;
  text-shadow: none;
}

.ebUseBusyIndicator::after {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: url(images/spinner_18_white.svg);
  background-size: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  animation: spin360 linear infinite 2s;
}

@keyframes spin360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.guardedButtonIndicator {
  display: inline;
  position: relative;
  top: 1px;
  padding: 12px;
  background-image: url(images/icn_spinner_18.gif);
  background-position: center center;
  background-repeat: no-repeat;
}

BUTTON.mfp-close, BUTTON.mfp-close:enabled:focus, BUTTON.mfp-close:enabled:active, BUTTON.mfp-close:enabled:active:focus {
  min-width: 0;
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  outline: none;
}

.largeButtonGroup A.button, .largeButtonGroup BUTTON, .largeButtonGroup INPUT[type=button], .largeButtonGroup INPUT[type=submit] {
  min-width: 120px;
  font-size: 17px;
  padding: 6px 21px;
  border-radius: 18px 18px 20px 20px;
}

BUTTON:focus, INPUT[type=button]:focus, INPUT[type=submit]:focus {
  position: relative;
  top: 0;
  left: 0;
}
A.button:enabled:active, BUTTON:enabled:active, INPUT[type=button]:enabled:active, INPUT[type=submit]:enabled:active {
  position: relative;
  top: 2px;
  margin-bottom: 2px;
  border-radius: 14px;
  border-width: 0 !important;
}
A.button:enabled:active:focus, BUTTON:enabled:active:focus, INPUT[type=button]:enabled:active:focus, INPUT[type=submit]:enabled:active:focus {
  position: relative;
  top: 2px;
  left: 0;
  outline: none;
}
A.button.outline:active, BUTTON.outline:active, INPUT[type=button].outline:active, INPUT[type=submit].outline:active {
  position: relative;
  top: 0;
  margin-bottom: 0;
  border-radius: 14px;
  border-width: 1px !important;
}

.button .statusIncomplete, .button .statusApprove, .button .statusWait, .button .statusRevise,
.button .statusConfirmed, .button .statusClosed, .button .statusAlert {
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;
}

/* public */

BODY.withBackground {
  background-repeat: no-repeat;
  background-position: center top; /* 87px; */
}

BODY.withBackground #pageStack > header {
  background-color: transparent;
  border-bottom-color: white;
  border-bottom-color: rgba(255,255,255,0.4);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

BODY.withBackground #stackBody {
  padding-top: 60px;
}

.imageBand {
  position: relative;
  top: 0;
  height: 280px;
  margin: 40px -80px 30px -80px;
  background-color: #eeeeee;
  background-position: center;
  background-repeat: no-repeat;
}
.imageBand #bandOverlayTop, .imageBand #bandOverlayBottom  {
  position: absolute;
  width: 100%;
}
.imageBand #bandOverlayTop { top: 0 }
.imageBand #bandOverlayBottom  { bottom: 0; }

/* forms */

.field,
.ebFieldPanel {
  text-align: left;
}

.field .title,
.ebFieldPanel .title,
.ebLogin LABEL,
.ebForgotPassword LABEL {
  font-weight: bold;
  font-size: 13px;
  padding-bottom: 2px;
  color: #333;
}
.ebLogin LABEL,
.ebForgotPassword LABEL {
  display: inline-block;
  font-weight: normal;
  padding-bottom: 3px;
}

.field .title .required,
.ebFieldPanel .title .required {
  padding-left: 4px;
  color: red;
}

.field .text, .field .longtext, .field .select, .field .selectlist, .field .multipleselect, .field .readonly,
.ebFieldPanel .text, .ebFieldPanel .longtext, .ebFieldPanel .selectlist, .ebFieldPanel .multipleselect, .ebFieldPanel .readonly,
.datalist .datafield INPUT.text, .datalist .datafield TEXTAREA.memo, .datalist .datafield SELECT.select,
.datalist .datafield SELECT.multipleselect, .datalist .datafield TABLE.checkboxlist, .datalist .datafield TABLE.radiolist,
.datalist .datafield .ebPicker, .datalist .datafield .ebMultiplePicker,
.datalist .datafield .printertext, .datalist .datafield .printerfile, .datalist .datafield .printermemo, .datalist .datafield .printeroption
.ebLogin .text, .ebForgotPassword .text {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

.field .longtext,
.ebFieldPanel .longtext,
.datalist .datafield TEXTAREA.memo {
  height: 6pc;
}

.field .text, .field .longtext, .field .readonly, .field .select, .field .selectlist, .field .multipleselect,
.ebFieldPanel .text, .ebFieldPanel .longtext, .ebFieldPanel .readonly, .ebFieldPanel .selectlist, .ebFieldPanel .multipleselect,
.ebLogin .text, .ebForgotPassword .text, .ebRegistration SELECT, .datalist .datafield INPUT.text, .datalist .datafield TEXTAREA.memo,
.datalist .datafield SELECT.select, .datalist .datafield SELECT.multipleselect,
.datalist .datafield .printertext, .datalist .datafield .printerfile, .datalist .datafield .printermemo, .datalist .datafield .printeroption {
  padding: 6px;
}
.datalist .datafield .ebPicker, .datalist .datafield .ebMultiplePicker {
  padding: 3px 6px;
  text-align: left;
}
.field .text, .field .longtext, .field .ebObjectPicker, .field .readonly, .field .select, .field .selectlist, .field .multipleselect,
.ebFieldPanel .text, .ebFieldPanel .longtext, .ebFieldPanel .ebObjectPicker, .ebFieldPanel .readonly, .ebFieldPanel .selectlist, .ebFieldPanel .multipleselect,
.datalist .datafield INPUT.text, .datalist .datafield TEXTAREA.memo, .datalist .datafield SELECT.select, .datalist .datafield SELECT.multipleselect,
.datalist .datafield .ebPicker, .datalist .datafield .ebMultiplePicker,
.datalist .datafield .printertext, .datalist .datafield .printerfile, .datalist .datafield .printermemo, .datalist .datafield .printeroption,
.ebLogin .text, .ebForgotPassword .text, .ebRegistration SELECT {
  border: solid 1px #aaa;
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.1) 0 0 4px inset;
  transition-property: border-color, box-shadow;
  transition-duration: 0.3s;
}

.fieldcol .title {
  font-size: 13px;
  padding-bottom: 0;
}
.fieldcol .title LABEL {
  vertical-align: top;
}
.field INPUT[type=checkbox],
.ebFieldPanel INPUT[type=checkbox],
.datalist .datafield INPUT[type=checkbox],
.ebLogin INPUT[type=checkbox] {
  margin-right: 6px;
}
.ebLogin INPUT[type=checkbox] {
  vertical-align: top;
}

TABLE#invitesubscheme_list, TABLE#invitesubscheme_selected {
  background-color: white;
  border-radius: 11px;
  box-shadow: rgba(128, 128, 128, 0.3) 0px 2px 6px;
  width: 100%;
  padding-left: 15px;
}

TABLE#invitesubscheme_selected  { height: 70px; }
TABLE#invitesubscheme_list TR TD:first-child, TABLE#invitesubscheme_selected TR TD:first-child { width: 70px; }
TABLE#invitesubscheme_list TR TD:last-child, TABLE#invitesubscheme_selected TR TD:last-child { width: auto !important; }
TABLE#invitesubscheme_list TR TD, TABLE#invitesubscheme_selected TR TD { padding-bottom: 0; }
TABLE#invitesubscheme_list TR:last-child TD { padding-bottom: 15px;}

.field .readonly,
.ebFieldPanel .readonly,
.datalist .datafield .printertext, .datalist .datafield .printerfile, .datalist .datafield .printermemo, .datalist .datafield .printeroption {
  border-style: dotted;
  color: #666;
}
.field .text:focus, .field .longtext:focus, .field .ebObjectPicker:focus, .field .select:focus, .field .selectlist:focus, .field .multipleselect:focus,
.ebFieldPanel .text:focus, .ebFieldPanel .longtext:focus, .ebFieldPanel .ebObjectPicker:focus, .ebFieldPanel .selectlist:focus, .ebFieldPanel .multipleselect:focus,
.datalist .datafield INPUT.text:focus, .datalist .datafield TEXTAREA.memo:focus, .datalist .datafield SELECT.select:focus,
.datalist .datafield SELECT.multipleselect:focus, .datalist .datafield .ebPicker:focus, .datalist .datafield .ebMultiplePicker:focus,
.ebLogin .text:focus, .ebRegistration SELECT:focus {
  outline:none;
  transition-property: border-color, box-shadow;
  transition-duration: 0.3s;
}

.field.important .text, .field.important .longtext, .field.important .select, .field.important .selectlist, .field.important .multipleselect, .field.important .readonly {
  font-weight: bold;
}

.field DIV.fieldpart + DIV.fieldpart {
  margin-top: 6px;
}

.field SPAN.withUnits {
  position: relative;
  top: 0;
}
.field SPAN.withUnits INPUT {
  padding-right: 60px;
}

.field SPAN.withUnits .unitLabel {
  display: table-cell;
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  vertical-align: middle;
  color: #666;
}

.datafield .ebPicker-Value SPAN, .datafield .printerfile SPAN {
  background-position: left 3px;
}

.field .alert,
.ebFieldPanel .alert,
.ebLogin .error, .ebForgotPassword .error, .ebRegistration .error {
  overflow: hidden;
}
.field .alert,
.ebFieldPanel .alert {
  margin-top: 4px;
}
.field .alertinner,
.ebFieldPanel .alertinner {
  float: left;
}
.ebLogin .error, .ebForgotPassword .error, .ebRegistration .error {
  display: inline-block;
  text-align: center;
  margin: 6px 0;
}
.field .alertinner,
.ebFieldPanel .alertinner,
.ebLogin .error, .ebForgotPassword .error, .ebRegistration .error, .ebContactForm .error {
  padding: 1px 8px;
  border-radius: 10px;
}
.field .captioninner,
.ebFieldPanel .captioninner {
  padding: 1px 0;
}

TABLE.fieldgrid {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 1pc 0;
}

TABLE.fieldgrid TR.field TD {
  padding: 18px 0 15px 0;
  border-bottom: solid 1px;
}
TABLE.fieldgrid TR.field:first-child TD {
  padding-top: 0;
}
TABLE.fieldgrid TR.field:last-child TD {
  border-bottom: none;
}

TABLE.fieldgrid TD.titlecol {
  width: 20%;
  vertical-align: top;
}
TABLE.fieldgrid TD.titlecol .title {
  padding: 6px 18px 0 0;
  font-size: 15px;
  font-weight: normal;
}
TABLE.fieldgrid TR.important TD.titlecol .title, TABLE.fieldgrid TR.important TD.titlecol .caption {
  font-weight: bold;
}
TABLE.fieldgrid TD.fieldcol {
  width: 80%;
  vertical-align: top;
}
TABLE.fieldgrid TD.fieldcol .caption, TABLE.fieldgrid TD.fieldcol .alert,
TABLE.fieldgrid TD.titlecol .caption, TABLE.fieldgrid TD.titlecol .alert {
  margin-top: 4px;
}

DIV.fieldgrid .ebFieldPanel {
  padding-bottom: 15px;
}
DIV.fieldgrid .title {
  padding-bottom: 6px;
}
DIV.fieldgrid .caption, DIV.fieldgrid .alert {
  margin-top: 4px;
}

.ebRegistration TD TD,
.ebContactDetails TD TD {
  padding: 0 8px 0 0;
}
.ebRegistration TD TD:last-child,
.ebContactDetails TD TD:last-child {
  padding-right: 0;
}
.ebRegistration TD.fieldcol,
.ebContactDetails TD.fieldcol {
  padding-bottom: 8px;
}
.ebRegistration TABLE, .ebRegistration TABLE TABLE,
.ebContactDetails TABLE {
  border-spacing: 0;
  border-collapse: collapse;
}
.ebRegistration TEXTAREA,
.ebContactDetails TEXTAREA {
  height: 4pc;
}
.ebRegistration TD.titlecol,
.ebContactDetails TD.titlecol {
  vertical-align: top;
  padding-right: 6px;
  width: 124px;
}
.ebRegistration TD.titlecol .title {
  font-size: 15px;
  font-weight: normal;
}
.ebRegistration TD TD .title {
  font-weight: normal;
  padding-bottom: 5px;
}

.ebRegistration SELECT {
  box-sizing: border-box;
  padding: 5px;
  margin: 0;
}

/* eblock popup */

.ebSlideout-Outer {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: white;
  box-shadow: rgba(0,0,0,0.25) 0 0 4px;
}
.ebSlideout-Outer.panelAlignedRight {
  border-left: solid 1px #ccc;
}

.ebSlideout-Outer > .ebSlideout-Header,
.ebSlideout-Outer > .ebSlideout-Footer {
    flex: 0 0 auto;
}
.ebSlideout-Outer > .ebSlideout-Inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ebSlideout-Inner > div {
  flex: 1 1 auto;
  padding: 10px 20px;
  border-top: solid 1px #eee;
}
.ebSlideout-Inner > div.fixed,
.ebSlideout-Inner > div.ebSlideout-Header,
.ebSlideout-Inner > div.ebSlideout-Buttons {
  flex: 0 0 auto;
}
.ebSlideout-Outer > .ebSlideout-Header,
.ebSlideout-Inner > div.ebSlideout-Header {
  height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: solid 2px #eee;
}
.ebSlideout-Inner > div.ebSlideout-Header + div {
  border-top: none;
}

.ebSlideout-Outer > .ebSlideout-Footer {
  padding: 0 20px;
  border-top: solid 1px #eee;
}

.ebSlideout-Inner > div.padded,
.ebSlideout-Inner > div.ebSlideout-Buttons {
  padding: 20px 20px;
}

.ebSlideout-Inner div.fill-centered {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.ebSlideout-Header H2 {
  margin: 0;
  border: none;
}
.ebSlideout-Inner > div > :first-child {
  margin-top: 0;
}
.ebSlideout-Inner > div > :last-child {
  margin-bottom: 0;
}
.ebSlideout-Outer > .ebSlideout-Buttons {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

.panelLoaderOverlay {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-image: url(images/icn_panel_loader.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
}

/* magnific popup */

.my-mfp-slide-bottom.mfp-ready.mfp-bg {
  opacity: 0.5;
}

.form-popup {
  padding: 12px 24px 12px 24px;
  background-color: white;
  border-radius: 12px;
  box-shadow: rgba(0,0,0,0.25) 0 0 4px;
  max-width: 600px;
  margin: 1pc auto;
}

.form-popup .listTable TD {
  font-size: 13px;
  padding: 6px 6px 6px 0;
}
.form-popup .listTable TR TD:first-child {
  background-position: 6px 6px;
}
.form-popup .listTable .tag {
  margin: -2px 0 -2px 0;
}

.form-popup .listTable.selectionList INPUT[type="radio"] {
  position: relative;
  top: 1px;
}

.form-popup .taxonomyPicker {
  height: 360px;
}

.wide-popup {
  max-width: 800px;
}

/* custom control styles */

/* action popup */

UL.actionList {
  font-size: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

UL.actionList LI {
  margin: 1pc 0;
  padding: 12px;
  border: 1px solid #ddd;
}

.actionIcon, .ebLogout A,
.actionPopupInner UL.actionList {
  font-size: 14px;
}

.actionPopupInner UL.actionList {
  padding: 0 6px;
}

.actionPopupInner UL.actionList > LI {
  margin: 6px 0;
  padding: 0;
  border: none;
}

.actionPopupInner UL.actionList > LI + LI.actionList-DividerBefore {
  margin-top: 9px;
  padding-top: 6px;
  border-top: 1px solid #ddd;
}

/* listings */


.dynatable-disabled-page {
  background: none;
}

.listTable TH {
  font-weight: 700;
}
.listTable TD {
  border-top: solid 1px;
  font-size: 15px;
}
.listTable TFOOT TR:first-child TD,
.listTable TR.groupedRowHeader TD {
  border-top-width: 2px;
}
.listTable TR.groupedRow TD {
  font-size: 13px;
}
.listTable TR.groupedRow:last-child TD {
  padding-bottom: 36px;
}
.listTable TD .detail {
  font-size: 13px;
}
.listTable TD .detail P:last-child {
  margin-bottom: 0;
}


.flags {
  float: right;
  margin: 1px 6px 3px 9px;
  overflow: hidden;
}

.tag SPAN {
  font-size: 11px;
  line-height: 13px;
  font-weight: normal;
}


.smallCircleAlert {
  font-family: Signika,"Trebuchet MS",arial,helvetica,sans-serif;
  font-weight: 400;
  font-size: 16px;
}

.largeIconLink, .mediumIconLink {
  font-size: 15px;
}

.listEmpty {
  padding: 40px 10px;
  margin: 1pc 0;
  border: dotted 1px #ccc;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
  color: #666;
}

.listGrid > DIV, .listGrid LABEL {
  border-color: #aaa;
}
.listGrid INPUT + LABEL {
  box-shadow: rgba(0, 0, 0, 0) 0 0 6px inset;
  transition-property: border-color, box-shadow;
  transition-duration: 0.3s;
  cursor: pointer;
}
.listGrid INPUT:checked + LABEL {
  transition-property: border-color, box-shadow;
  transition-duration: 0.3s;
}

/* search and filtering */

.dynatable-search {
  min-height: 24px;
}

.dynatable-search INPUT[type=search], .dynatable-search .ebPicker, .chainVisualisation-Toolbar .ebPicker {
  padding-left: 24px;
  background-repeat: no-repeat;
  background-position: 5px center;
}

.dynatable-search UL.segmentedMenu LI A, .chainVisualisation-Toolbar UL.segmentedMenu LI A {
  font-family: open sans,verdna,tahoma,arial,helvetica,sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 3px 12px 3px 12px;
}

/* site overview */

.siteDetails H1, .productDetails H1 {
  margin-bottom: 6px;
}
.siteDetails, .productDetails {
  margin-bottom: 2pc;
}

.siteDetails {
  overflow: visible;
}
.siteDetails-Icons {
  float: right;
}
.siteDetails-Icons .siteDetailsLink, .siteDetails-Icons .sitePrivacyLink, .siteDetails-Icons .siteSubscriptionsLink{
  display: inline-block;
  position: relative;
  top: -4px;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 50px 0 0 0;
  margin-left: 15px;
}

.overviewStack H3 {
  font-size: 17px;
  font-weight: 400;
}

.largeCircle, .largeCircleAction, .largeCircleEmpty {
  font-weight: 600;
  font-size: 32px;
}
.largeCircleEmpty {
  font-weight: 600;
  font-size: 18px;
}

.overviewCallout, .overviewCalloutAction {
  margin-bottom: 11px;
  border-bottom-width: 2px;
}

.overviewCallout-Mark {
  position: absolute;
  left: 50%; bottom: -13px;
  width: 26px; height: 13px;
  margin-left: -13px;
  background-repeat: no-repeat;
  background-position: center;
}
.tradeCallout, .tradeCalloutAction {
  margin-top: 11px;
  border-top-width: 2px;
}
.tradeCallout-Mark {
  position: absolute;
  left: 50%; top: -13px;
  width: 26px; height: 13px;
  margin-left: -13px;
  background-repeat: no-repeat;
  background-position: center;
}


/* product and relationship overviews */

.skuReference, .skuReference:link, .supplierCode, .supplierCode:link {
  font-family: "open sans",tahoma,verdana,arial,helvetica,sans serf;
  font-weight: normal;
  font-size: 13px;
}

UL.tagList LI SPAN {
  font-size: 14px;
}

.tradeDetails H3 {
  font-size: 17px;
  font-weight: 400;
  border-bottom: solid 1px;
}

.tradeDetails.smaller #tradeInfo .statusIcon {
  margin-top: 20px;
}

.tradeDetails #tradeDescription {
  font-size: 15px;
}

.statusIcon.statusIncomplete, .statusIcon.statusTagged, .statusIcon.statusApprove, .statusIcon.statusWait,
.statusIcon.statusRevise, .statusIcon.statusConfirmed, .statusIcon.statusClosed {
  font-size: 19px;
}
.smaller .statusIcon {
  font-size: 15px;
}

.timelineList #timelineBar {
  border-left: dotted 1px;
}

.timelineList H5 {
  margin: 0;
  font-size: 17px;
  font-weight: normal;
}


.timelineList .eventMessage { border: solid 1px; }
.timelineList .eventMessage P:first-child { margin-top: 0; }
.timelineList .eventMessage P:last-child { margin-bottom: 0; }

.timelineList .eventMessage-Mark {
  position: absolute;
  right: 12px; top: -6px;
  width: 12px; height: 6px;
  background-repeat: no-repeat;
}
.timelineList .buyerAction .eventMessage-Mark {
left: 12px;
}

/* dashboard gauges */

.gaugeList {
  overflow: hidden;
  padding: 15px 12px;
  border: solid 1px #ddd;
  border-radius: 5px;
}
.gaugeList-Panel {
  width: 33%;
  box-sizing: border-box;
  display: table;
  vertical-align: middle;
  float: left;
}
.gaugeList-Icon {
  width: 1px;
  padding-right: 48px;
  height: 36px;
  display: table-cell;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
}
.gaugeList-Gauge {
  display: table-cell;
  vertical-align: middle;
}
.gaugeList-Caption {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  padding-left: 12px;
}
.gaugeList HR {
  margin: 12px 0;
  border: none;
  border-bottom: dotted 1px #ddd;
}

.invitebox {
  margin: 1pc 0;
  padding: 5px 10px 5px 88px;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
}

/* data sharing */

.siteSchemes {
  padding: 10px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-radius: 8px 8px 0 0;
}
.siteSchemes > IMG {
  margin-right: 20px;
}

.sharingItem {
  overflow: hidden;
}
.sharingLogo {
  float: left;
  width: 120px;
  margin-bottom: 20px;
}
.sharingDetails {
  margin-left: 140px;
  margin-right: 220px;
}

.sharingTerms, .sharingTerms-Short {
  overflow-y: scroll;
  max-height: 400px;
}
.sharingTerms-Short {
  max-height: 200px;
}
.sharingTerms :first-child, .sharingTerms-Short :first-child {
  margin-top: 0;
}

.sharingCallout, .sharingCalloutAction {
  position: relative;
  float: right;
  top: 0;
  width: 160px;
  padding: 18px;
  border-style: solid;
  border-width: 1px 1px 1px 2px;
}
.sharingCallout-Mark, .sharingCalloutAction-Mark {
  position: absolute;
  top: 15px; left: -13px;
  width: 13px; height: 26px;
  background-repeat: no-repeat;
  background-position: center;
}
.sharingCallout::after, .sharingCalloutAction::after {
  clear: both;
  display: block;
  content: "";
}

.sharingCallout DL, .sharingCalloutAction DL {
  margin: 0;
}
.sharingCallout DT, .sharingCalloutAction DT {
  font-weight: bold;
}
.sharingCallout DD, .sharingCalloutAction DD {
  margin-left: 0;
  margin-bottom: 1pc;
  font-size: 15px;
}

/* subscriptions, offers and purchases */

.subscriptionStatus {
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: left center;
}

.offerDetails {
  margin-right: 340px;
}

.offerDetails .offerContent {
  float: left;
  width: 100%;
}

.offerDetails .offerCallout {
  position: relative;
  float: right;
  top: 0;
  width: 268px;
  margin-top: 16px;
  margin-right: -340px;
  padding: 18px;
  border-style: solid;
  border-width: 1px 1px 1px 2px;
}
.offerCallout-Mark {
  position: absolute;
  top: 15px; left: -13px;
  width: 13px; height: 26px;
  background-repeat: no-repeat;
  background-position: center;
}

.offerDetails::after {
  clear: both;
  display: block;
  content: "";
}

.offerDetails .offerCallout :first-child { margin-top: 0; }
.offerDetails .offerCallout :last-child { margin-bottom: 0; }

UL.tierList {
  padding: 0;
}

UL.tierList LI {
  list-style-type: none;
  margin: 0 0 0.5pc 0;
  padding: 0;
}

UL.tierList INPUT {
  position: relative;
  top: 3px;
  float: left;
}

UL.tierList LABEL {
  display: block;
  margin-left: 26px;
}

.tierList-Pricing {
  font-style: italic;
}

.basketEdit {
  margin-top: 12px;
}
.basketEdit INPUT, .basketEdit SELECT {
  vertical-align: middle;
}

.worldpaybox {
  overflow: hidden;
  margin: 2pc 0;
  padding: 5px 10px 20px 60px;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
}

.worldpayform {
  float: left;
  border-right: solid 1px;
}

.worldpaybox .paymentAdvice {
  margin-left: 376px;
  padding: 16px 52px;
}

.pdfLink {
  background-image: url(images/icn_pdf_32.png);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 8px 0px 8px 40px;
}

/* audit panel */

#stackBody TD.guidance {
  position: relative;
  top: 0;
  padding: 4px 12px;
  border: solid 1px;
  border-left-width: 2px;
}

#stackBody TD.guidance:after {
  content: "";
  position: absolute;
  left: -13px; top: 10px;
  width: 13px; height: 26px;
  background-repeat: no-repeat;
}

#stackBody TD.guidance H4:first-child {
  margin-top: 9px;
}

#stackBody TABLE.question {
  padding-right: 33px;
}

/* desktop audit portal controls */

TABLE.detailTable {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 1pc 0;
}

TABLE.detailTable TD, TABLE.detailTable TH {
  padding: 8px 0;
  border-bottom: solid 1px;
  vertical-align: top;
  text-align: left;
}
TABLE.detailTable TR:first-child TD, TABLE.detailTable TR:first-child TH {
  padding-top: 0;
}

TABLE.detailTable TH {
  width: 20%;
}

TABLE.portalTable, TABLE.groupedTable {

}

TABLE.portalTable TD, TABLE.groupedTable TD,
TABLE.portalTable TH, TABLE.groupedTable TH {

}

TABLE.portalTable TH, TABLE.portalTable TD.portalTableHeader {

}

/* spreadsheet import wizard */

.spreadsheetImport-DropZone {
  margin: 0 auto !important;
  max-width: 320px;
  cursor: pointer;
}


/* adjustments for phones and tablets */

@media all and (max-width: 1024px) {

  #stackCrumbs {
    justify-content: flex-end;
  }
  #crumbsNavigation {
    display: none;
  }

  .gaugeList-Icon {
    display: none;
  }

  .offerDetails {
    margin-right: 280px;
  }
  .offerDetails .offerCallout {
    width: 208px;
    margin-right: -280px;
  }

}

@media all and (max-width: 768px) {

  #pageStack > header, #pageStack > footer, #pageStack > section {
    padding-left: 24px;
    padding-right: 24px;
  }

  #headerLinks A > SPAN {
    display: none;
  }

  UL.tabbedMenu {
    margin-left: -9px;
    margin-right: -9px;
    padding-left: 9px;
    padding-right: 9px;
  }

  #pageStrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .strapBox.registrationBox {
    box-sizing: border-box;
    width: 100%;
  }

  .offerDetails {
    margin-right: 0;
  }
  .offerDetails .offerContent {
    float: none;
  }
  .offerDetails .offerCallout {
    float: none;
    width: auto;
    margin-right: 0;
    margin-top: 30px;
    border-width: 2px 1px 1px 1px;
  }
  .offerCallout-Mark {
    left: 50%; top: -13px;
    width: 26px; height: 13px;
    margin-left: -13px;
  }

}

@media all and (max-width: 640px) {

  #stackBody {
    padding-top: 1pc;
    margin-bottom: 1pc;
  }

  #pageStack > header, #pageStack > footer, #pageStack > section {
    padding-left: 12px;
    padding-right: 12px;
  }

  #pageStack > header UL.ebMenu {
    margin-top: 36px;
    margin-left: -75%;
    width: 150%;
  }

  #pageStack > header UL.ebMenu LI {
    padding: 4px 10px 3px 10px;
    font-size: 14px;
  }

  #serviceLogo {
    top: 9px;
    width: 51px;
    height: 26.5px;
  }

  #stackBanner > .bannerGuidance {
    display: none;
  }

  #pageStack > footer UL {
    margin-bottom: 9px;
  }
  #footerLogos {
    display: none;
  }
  #footerText {
    float: none;
    clear: left;
    text-align: left;
  }

  H1 {
    font-size: 25px;
  }

  ADDRESS {
    font-size: 15px;
  }

  /* list adjustments for single column display on phone */

  .titleLinks {
    display: none;
  }

  UL.tabbedMenu {
    margin-bottom: 12px;
  }

  .listTable TD {
    font-size: 13px;
  }

  .dynatable-search {
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 10px;
    background-image: none;
    text-align: center;
  }

  .dynatable-search UL.segmentedMenu, .chainVisualisation-Toolbar UL.segmentedMenu {
    display: table;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .dynatable-search UL.segmentedMenu LI, .chainVisualisation-Toolbar UL.segmentedMenu LI {
    display: table-cell;
    width: auto;
  }

  .dynatable-search UL.segmentedMenu LI A, .chainVisualisation-Toolbar UL.segmentedMenu LI A {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .dynatable-search > DIV {
    display: block;
  }

  .dynatable-search INPUT[type=search], .dynatable-search SELECT, .dynatable-search .ebPicker, .chainVisualisation-Toolbar .ebPicker {
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 0 0;
    text-align: left;
  }

  .dynatable-pagination-links {
    float: right;
    padding-bottom: 1pc;
  }
  .dynatable-pagination-links LI:last-child A {
    padding-right: 0;
  }

  .dynatable-per-page {
    clear: right;
    float: none;
    padding: 0;
  }

  .dynatable-record-count {
    clear: right;
    padding: 2px 0;
  }

  .dynatable-per-page, .dynatable-per-page SELECT, .dynatable-record-count {
    font-size: 11px;
  }

  .skuReference {
    font-size: 13px;
    padding: 3px 6px 3px 21px;
    background-position: 6px center;
  }

  .metabar .rightFloat {
    float: none;
    text-align: left;
    margin-top: 6px;
  }
  .metabar .rightFloat A {
    margin-left: 0;
    margin-right: 6px;
  }

  UL.tabbedMenu {
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 6px;
    padding-right: 6px;
  }

  UL.tabbedMenu LI A {
    padding: 7px 9px 6px 9px;
    font-size: 15px;
  }

  UL.tabbedMenu .smallCircleAlert {
    padding: 1px;
    font-size: 13px;
    min-width: 17px;
  }

  UL.tagList LI {
    margin-left: 2px;
    padding-left: 13px;
    background-repeat: no-repeat;
    background-position: left center;
  }

  UL.tagList LI SPAN {
    height: 20px;
    padding: 1px 8px 1px 6px;
    border: 1px solid;
    border-left: none;
    border-radius: 0 3px 3px 0;
    font-size: 11px;
  }

  .siteDetails-Icons .siteDetailsLink, .siteDetails-Icons .sitePrivacyLink {
    width: 50px;
    height: 0px;
    overflow: hidden;
  }

  /* form adjustments to display as single column */

  TABLE.fieldgrid, TABLE.fieldgrid > TBODY, TABLE.fieldgrid TR.field, TABLE.fieldgrid TR.field > TD {
    display: block;
  }
  TABLE.fieldgrid TR.field TD.titlecol {
    width: auto;
    padding-bottom: 0;
    border-bottom: none;
    }
  TABLE.fieldgrid TR.field TD.titlecol .title {
    padding: 0 0 6px 0;
    font-size: 15px;
    font-weight: normal;
  }
  TABLE.fieldgrid TR.field TD.fieldcol {
    width: auto;
    border-top: none;
    padding-top: 0;
  }

  #pageStrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  .strapBox.registrationBox {
    padding-left: 24px;
    padding-right: 24px;
  }

  .ebRegistration TD.fieldcol,.ebRegistration TD.fieldcol TD, .ebRegistration .field { width: 100%; }
  .ebRegistration TD INPUT, TD .ebContactDetails INPUT,
  .ebRegistration TD SELECT, TD .ebContactDetails SELECT,
  .ebRegistration TD TEXTAREA, TD .ebContactDetails TEXTAREA {
  box-sizing: border-box; /* css3 rec */
  -moz-box-sizing: border-box; /* ff2 */
  -ms-box-sizing: border-box; /* ie8 */
  -webkit-box-sizing: border-box; /* safari3 */
  -khtml-box-sizing: border-box; /* konqueror */
  width: 100%;
  }

  .ebRegistration TD.titlecol, .ebContactDetails TD.titlecol {
    padding-right: 12px;
  }

  .ebRegistration TD TABLE, .ebRegistration TD TBODY, .ebRegistration TD TR {
    display: block;
  }

  .ebRegistration TD TD,
  .ebContactDetails TD TD {
    display: block;
    padding: 0 0 4px 0;
  }
  .ebRegistration TD TD:last-child,
  .ebContactDetails TD TD:last-child {
    padding-bottom: 12px;
  }

  /* trade detail adjustments */

  .tradeDetails, .tradeDetails.smaller {
    position: inherit;
    text-align: left;
    margin: 1pc 0;
  }

  .tradeDetails #tradeBar {
    display: none;
  }

  .tradeDetails #supplierInfo, .tradeDetails #buyerInfo,
  .tradeDetails.smaller #supplierInfo, .tradeDetails.smaller #buyerInfo {
    float: none;
    width: auto;
    margin-bottom: 2pc;
    padding-top: 0;
    background: none !important;
  }

  .tradeDetails #tradeIcon {
    display: none;
  }

  .tradeDetails #tradeInfo, .tradeDetails.smaller #tradeInfo {
    position: initial;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .tradeDetails H3 {
    width: auto;
    margin: 0 0 1pc 0;
    padding: 0 0 6px 0;
    text-align: left;
  }

  .tradeCalloutStack {
    width: auto;
    margin: 0;
  }

  /* audit panel styling */

  #stackBody TABLE.question {
    margin-bottom: 21px;
  }

  #stackBody TD.guidance {
    padding: 4px 12px;
    border-left-width: 1px;
    border-top-width: 2px;
  }

  #stackBody TD.guidance:after {
    left: 50%; top: -13px;
    width: 26px; height: 13px;
    margin-left: -13px;
  }

}