@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));
}

/* Licensing Information */
.essay-shop-title {
  display: inline-block;
}
.fsfs-license {
  /* by default, hide it until users interact with it */
  display: none;
  /* when shown, it should stay at a fixed position on screen */
  position: fixed;
  /* Center it on screen */
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  /* Set Minimum Size Requirements */
  min-width: 50vw;
  min-height: 20vh;
  /* Padding */
  padding: 25px 25px;
  /* Border Rounding */
  border-radius: 25px;
  /* Always On-Top */
  z-index: 500000;
  /* Background */
  color: #ffffff;
  background: #1a1a1a66;
  backdrop-filter: blur(8px) brightness(0.5);
  /* Cursor */
  cursor: text;
  /* Interactions */
  pointer-events: visibleStroke;
}
.info-icon::before {
  content: ' ';
  /* Size & Positioning */
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 5px;
  /* Set Icon */
  background-image: url(/static/noun-info-2691045.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(--license-info-icon-filter, invert());
  /* Use Pointer Cursor */
  cursor: pointer;
}
.info-icon:active > .fsfs-license,
.info-icon:focus > .fsfs-license,
.info-icon:focus-within > .fsfs-license,
.fsfs-license:focus,
.fsfs-license:focus-within {
  display: block;
}

/* 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);
}