html {
  background: transparent;
  margin: 0; /* this affects the margin on the html before sending to printer */
  -webkit-print-color-adjust: exact;
  height: -moz-available;
  height: -webkit-fill-available;
  height: stretch;
}

body {
  margin: 0;
  padding: 0;
  -webkit-print-color-adjust: exact;
  font-family: display;
  font-weight: bold;
  height: -moz-available;
  height: -webkit-fill-available;
  height: stretch;
}

#root,
#dropzone {
  height: -moz-available;
  height: -webkit-fill-available;
  height: stretch;
}

p {
  font-weight: normal;
}

.tokens {
  position: relative;
  margin: 2em auto;
  page-break-inside: avoid;
}

.background {
  height: 10.25in;
  width: 8in;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.background .text {
  width: 165%;
  height: 170%;
  position: absolute;
  top: -5.25in;
  left: -4in;
  transform: rotate(-30deg);
}

.background span {
  display: block;
  float: left;
  margin: 0 0.0625in 0 0;
  color: #fff;
  opacity: 0.2;
}

svg {
  overflow: visible;
}

.map {
  position: relative;
}

.map svg {
  display: block;
}

.tileSheet div.row {
  clear: left;
  page-break-inside: avoid;
  margin: 0 auto;
  overflow: visible;
}

.tileSheet--die {
  width: 8in;
  margin: auto;
}

.tileSheet--die div.row {
  overflow: hidden;
}

.tileSheet--offset div.row:nth-child(even) {
  padding-left: 1.73205in;
}

.tileSheet svg {
  float: left;
  position: relative;
}

.tileSheet--individual div.row svg {
  margin: 0 0.125in 0.125in 0;
}

.tileSheet--die div.row svg {
  margin: 0 0.05in 0 0;
}

.tileSheet--individual div.row svg:last-child {
  margin: 0 0 0.125in;
}

.tileSheet--die div.row:first-child,
.tileSheet--die div.row:last-child {
  overflow: visible;
}

.tileSheet--die div.row svg:last-child {
  margin: 0;
}

a {
  text-decoration: none;
}

.charters {
  position: relative;
  overflow: auto;
}

.charter {
  box-sizing: border-box;
  page-break-inside: avoid;
  font-family: display;
  position: relative;
  background-color: white;
  float: left;
}

.charter__bleed {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.charter__body {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}

.charter--minor {
  height: 3in;
}

.charter--half {
  width: 3.5in;
}

.charter__hr {
  height: 0.0625in;
  position: absolute;
  top: 1.125in;
  width: 100%;
}

.charter--half .charter__hr,
.charter--minor .charter__hr {
  top: 0.875in;
}

.charter--color .charter__hr {
  top: 0;
}

.charter--color.charter--minor .charter__hr {
  height: 0.875in;
}

.charter__name {
  position: relative;
  padding: 0.125in;
  height: 1.0625in;
  font-size: 0.25in;
  line-height: 0.3in;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.charter--half .charter__name {
  font-size: 0.18in;
  line-height: 0.22in;
}

.charter--color .charter__name {
  padding-left: 1in;
}

.charter--minor .charter__name,
.charter--carth.charter--half .charter__name {
  height: 0.875in;
}

.charter--minor.charter--color .charter__name {
  padding-left: 0.875in;
}

.charter__logo {
  height: 0.75in;
  width: 0.75in;
  padding-top: 0.125in;
  padding-left: 0.125in;
  position: absolute;
  top: 0;
  left: 0;
}

.charter__logo > svg {
  height: 0.75in;
  width: 0.75in;
  position: relative;
}

.charter--minor .charter__logo {
  height: 0.625in;
  width: 0.625in;
}

.charter--minor .charter__logo > svg {
  height: 0.625in;
  width: 0.66in;
}

.charter__trains {
  text-align: left;
  position: absolute;
  height: calc(100% - 1.0625in);
  bottom: 0;
  left: 0;
  width: 50%;
  padding: 0.125in;
  border-width: 0 1px 0 0;
  border-color: #666;
  border-style: dashed;
  box-sizing: border-box;
}

.charter--carth .charter__trains {
  height: calc(100% - 1.1875in);
}

.charter--minor .charter__trains {
  height: calc(100% - 0.875in);
}

.charter--minor.charter--carth .charter__trains {
  height: calc(100% - 0.9375in);
}

.charter__assets {
  text-align: left;
  position: absolute;
  height: calc(100% - 1.0625in);
  bottom: 0;
  left: 0;
  margin-left: 1in;
  width: calc(100% - 1in);
  padding: 0.125in;
  box-sizing: border-box;
  border-width: 0 0 0 1px;
  border-color: #666;
  border-style: dashed;
}

.charter--minor .charter__assets {
  height: calc(100% - 0.875in);
}

.charter--carth .charter__assets {
  height: calc(100% - 0.9375in);
}

.charter__game {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.12in;
  text-align: left;
  position: absolute;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  bottom: 0;
  width: 100%;
  left: calc(100% - 0.25in);
  margin: 0.125in;
  padding: 0.125in;
  box-sizing: border-box;
}

.charter__treasury {
  text-align: left;
  position: absolute;
  height: calc(100% - 1.0625in);
  bottom: 0;
  right: 0;
  width: 50%;
  padding: 0.125in;
  box-sizing: border-box;
}

.charter--carth .charter__treasury {
  height: calc(100% - 1.1875in);
}

.charter--minor .charter__treasury {
  height: calc(100% - 0.875in);
}

.charter--minor.charter--carth .charter__treasury {
  height: calc(100% - 0.9375in);
}

.charter__capital {
  font-size: 0.25in;
}

.charter__phase {
  position: absolute;
  bottom: 0;
  padding: 0.125in;
  box-sizing: border-box;
  width: 100%;
  left: 0;
}

.charter__phase table {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.09in;
  border-collapse: collapse;
  width: 100%;
}

.charter__phase th {
  padding: 0 0.05in;
  font-family: display;
  text-align: center;
}

.charter__phase th.phase__notes {
  text-align: left;
}

.charter__phase td {
  padding: 0.03in;
  border: 1px solid black;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}

.charter__phase td.phase__list {
  padding: 0;
}

.charter__phase td.phase__list ul {
  padding: 0.03in;
}

.charter__phase td.phase__notes {
  text-align: left;
  white-space: normal;
}

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

.charter dl {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  padding: 0.125in;
  width: 100%;
  box-sizing: border-box;
}

.charter--half dl {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0.125in;
  width: 100%;
}

.charter dt {
  margin: 0.125in 0 0;
  font-size: 0.13in;
}

.charter dd {
  margin: 0;
  font-size: 0.12in;
  font-family: sans-serif;
  font-weight: normal;
}

.charter ul {
  list-style-type: disc;
  list-style-position: outside;
  padding: 0;
  padding-left: 3px;
  margin: 0 0 0 0.15in;
}

.charter ul li span {
  position: relative;
  left: -3px;
}

.charter ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding: 0;
  margin: 0 0 0 0.15in;
}

.charter__tokens {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.26in 0.125in 0.125in;
  height: 1in;
  box-sizing: border-box;
  line-height: normal;
}

.charter--minor .charter__tokens {
  padding-top: 0.135in;
  height: 0.875in;
}

.charter__tokens svg {
  width: 0.5in;
  height: 0.7in;
  padding: 0 0 0 0.15in;
}

.charter--half .charter__tokens {
  top: 1.0625in;
  height: calc(100% - 1.0625in);
  width: 1in;
  padding: 0.125in;
  left: 0;
  right: auto;
}

.charter--minor.charter--half .charter__tokens {
  top: 0.875in;
  height: calc(100% - 0.875in);
}

.charter--carth.charter--half .charter__tokens {
  top: 0.9375in;
  height: calc(100% - 0.9375in);
}

.charter--half .charter__tokens svg {
  height: 0.5in;
  padding: 0.05in 0 0;
}

.prices {
  position: relative;
  overflow: hidden;
  page-break-inside: avoid;
  height: 8in;
}

.stock {
  position: relative;
  margin: 0.25in;
}

.stock table {
  border-collapse: collapse;
}

.stock td {
  line-height: 0.15in;
  font-size: 0.15in;
  border: 1px solid black;
  padding: 0.05in;
  box-sizing: border-box;
  vertical-align: top;
  text-align: left;
  position: relative;
}

.stock .market {
  position: relative;
}

.stock td.empty {
  border: none;
}

.stock table.diag td.double {
  width: 1in;
}

.stock table.diag td.start {
  border-width: 1px 0 1px 1px;
  width: 1in;
}

.stock table.diag td.start-half {
  border-width: 1px 1px 1px 0;
  width: 0.5in;
}

.stock table.diag td.end {
  border-width: 1px 1px 1px 0;
  width: 1in;
}

.stock table.diag td.end-half {
  border-width: 1px 0 1px 1px;
  width: 0.5in;
}

.legend {
  position: absolute;
  bottom: -0.125in;
  right: 3.1in;
  width: 3in;
  padding-left: 0.35in;
}

ul.notes {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-end;
  flex-direction: column;
  padding-left: 0.125in;
}

ul.notes li {
  margin-bottom: 0.125in;
  text-align: left;
  position: relative;
  font-size: 0.15in;
  line-height: 0.2in;
}

ul.notes li i {
  font-size: 0.15in;
  line-height: 0.25in;
  height: 0.25in;
  width: 0.25in;
  display: inline-block;
  margin-right: 0.1in;
  text-align: center;
  border-radius: 0.125in;
}

ul.notes li span {
  display: inline-block;
  font-size: 0.1in;
  line-height: 0.24in;
  height: 0.15in;
  width: 0.15in;
  border-radius: 0.075in;
  text-align: center;
  position: absolute;
  left: -0.2in;
  top: 0.01in;
}

.cutlines {
  position: relative;
  overflow: hidden;
  float: left;
  padding: 0.25in;
  page-break-inside: avoid;
  box-sizing: border-box;
}

.cutlines__page {
  font-family: sans-serif;
  font-size: 0.15in;
  position: absolute;
  width: 100%;
  height: 0.25in;
  line-height: 1;
  top: -0.25in;
  left: 0;
  text-align: center;
  box-sizing: border-box;
}

.cutlines-inner {
  position: relative;
}

.cutlines::before {
  content: "";
  width: 0.25in;
  height: calc(100% - 0.75in);
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  left: 0;
  top: 0.375in;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.cutlines::after {
  content: "";
  width: 0.25in;
  height: calc(100% - 0.75in);
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  right: 0;
  top: 0.375in;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.cutlines > div::before {
  content: "";
  width: calc(100% - 0.25in);
  height: 0.25in;
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  top: -0.25in;
  left: 0.125in;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.cutlines > div::after {
  content: "";
  width: calc(100% - 0.25in);
  height: 0.25in;
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  bottom: -0.25in;
  left: 0.125in;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.cards--dtgDie .cutlines::before,
.cards--dtgDie .cutlines::after,
.cards--dtgDie .cutlines > div::before,
.cards--dtgDie .cutlines > div::after {
  border: 0;
}

footer {
  width: 800px;
  margin: 0 auto;
  font-weight: normal;
  font-family: sans-serif;
  font-size: 0.8em;
}

footer a {
  font-weight: bold;
  text-decoration: underline;
  color: black;
}

footer a:hover {
  color: rgb(95 35 132);
}

.LegalNotes {
  background-color: #a00;
  border-bottom: 2px solid #900;
  color: #fff;
  font-family: sans-serif;
}

.LegalNotes strong {
  font-weight: bold;
}

.WIP {
  background-color: #ffa;
  border-bottom: 2px solid #dda;
  font-family: sans-serif;
  font-weight: normal;
}

.PrintNotes {
  background-color: #ddd;
  border-bottom: 2px solid #bbb;
  font-family: sans-serif;
  font-weight: normal;
}

.WIP > div,
.LegalNotes > div,
.PrintNotes > div {
  width: 800px;
  margin: 0 auto;
  padding: 0 0 2px;
}

.PrintNotes h3 {
  display: inline-block;
  font-size: 0.8em;
}

.PrintNotes .select,
.PrintNotes > div > h3 {
  display: inline-block;
  margin-right: 2em;
}

.PrintNotes label {
  display: inline-block;
  margin-right: 1em;
}

.WIP p,
.LegalNotes p,
.PrintNotes p {
  margin: 0.5em 0 0.4em;
  display: inline-block;
}

.PrintNotes b {
  font-weight: bold;
}

.PrintNotes ul {
  padding: 0;
  list-style: none;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 0;
}

.PrintNotes li a {
  color: black;
}

.PrintNotes li a.active {
  font-weight: bold;
}

@media print {
  nav,
  footer,
  .LegalNotes,
  .PrintNotes,
  .MuiAppBar-root,
  .MuiDrawer-root,
  .MuiSnackbar-root,
  .MuiFab-root,
  .MuiTooltip-popper,
  .WIP {
    display: none !important;
  }

  .MuiBox-root {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  .map {
    padding: 0;
  }

  .stock {
    margin: 0;
  }

  .tokens {
    margin: 0;
  }

  .TileManifest {
    margin: 0 auto;
  }

  .b18 .tiles {
    margin: 0;
  }
}

.paginated__page {
  position: relative;
}

.paginated__page svg {
  overflow: hidden;
  display: block;
}

.paginated-svg {
  position: absolute;
  top: 0;
  left: 0;
}

.tiles {
  margin: 0.25in;
}

.tiles label {
  display: block;
}
