@charset "UTF-8";
@import url(/static/theme.css);

.notice {
  border-radius: 1em;
  background: var(--quote-background-colour);
  border-left: 0.3em solid var(--demo-common-dark-blue);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-top: 2em;
  margin-bottom: 2em;
  position: relative;
  left: 0;
}

#main a:link,
#main a:visited,
#main a:hover,
#main a:active {
  color: var(--link-colour, var(--default-link-colour, black));
}

/* Pay Icon */
.payLink > .icon::before {
  content: '​'; /* Blank = CSS Won't render, which is why we put a Zero-Width-Space */
  /* Size & Positioning */
  display: inline-block;
  width: 1.2em;
  margin-right: 5px;
  /* Set Icon */
  background-image: url(/static/noun-shopping-cart-5195508.svg);
  /* Ensure Icon is rendered correctly */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  /* Invert it by default unless otherwise specified */
  filter: var(--paylink-icon-filter, invert());
}
/* Pay Button */
.payLink {
  /* Variables */
  --link-colour: var(--button-confirm-foreground);
  --background: var(--button-confirm-background);
  --bottom-line: 6px;
  /* General */
  display: block;
  border-radius: 10px;
  color: var(--link-colour);
  background: var(--background);
  text-decoration: none;
  /* Size */
  max-width: max-content;
  padding: 10px 10px;
  /* Positioning */
  margin-top: 10px;
  margin-bottom: 0;
  /* Transitions */
  transition: background 1s, box-shadow 1s, transform 1s;
  /* Border */
  box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue);
  -webkit-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue);
  -moz-box-shadow: 0px var(--bottom-line) 0px 0 var(--demo-common-dark-blue);
  /* Transformations */
  transform: none;
}

/* Hover */
.payLink:hover {
  --background: var(--button-confirm-hovering-background);
  --link-colour: var(--button-confirm-hovering-foreground);
  --bottom-line: 0;
  transform: translateY(6px);
}

/* Active */
.payLink:active,
.payLink:focus,
.payLink:focus-within,
.payLink:focus-visible {
  --background: var(--button-confirm-active-background);
  --link-colour: var(--button-confirm-active-foreground);
}