@font-face {
    font-family: 'Fritz';
    src: url('FritzQuadrata-Bold.woff2') format('woff2'),
         url('FritzQuadrata-Bold.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'RHCDots';
    src: url('RHCDots.ttf') format('truetype'),
		 url('RHCDots.woff2') format('woff2'),
         url('RHCDots.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RHCDotsSquare';
    src: url('RHCDotsSquare.ttf') format('truetype'),
		 url('RHCDotsSquare.woff2') format('woff2'),
         url('RHCDotsSquare.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.dropzone-container {
    background-image: none;
}

h3.bookmark {
	visibility: hidden;
	font-size: 0px;
}

.nb {
	font-weight: normal !important;
}

.mb { margin-bottom: 25px;}

.fritz {
	font-family: "Fritz" !important;
}

.serif {
	font-family: serif !important;
}


.dots {
	font-family: "RHCDots" !important;
	font-size: 14px;
}

.dotsSquare {
	font-family: "RHCDotsSquare" !important;
	font-size: 14px;
}

.sheet-section-header {
	position: relative;
	font-weight: bold;
	text-transform: uppercase;
	display: flex;
	margin-bottom: 15px;
}

.sheet-section-header-text {margin-left: 5px; margin-right: 5px; font-size: 21px;}

.sheet-line {
	flex-grow: 1;
	background-color: #222;
	height: 1px;
	margin-top: 15px;
}

html.dark-mode .sheet-line {
	background-color: #bbb;
}

.section-3column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px 15px;
  grid-auto-flow: row;
  margin-bottom: 25px;
}

.section-2column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 15px;
  grid-auto-flow: row;
  margin-bottom: 25px;
}

.section-column {
  display: grid; 
  grid-template-columns: 1fr;
  gap: 5px 5px; 
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  align-items: start;
}

.column-header {
	font-family: "Fritz";
	font-weight: bold;
	text-transform: uppercase;
}

.pst {
display: inline-block;
    text-transform: uppercase;
    border-radius: 2px;
    padding-left: 4px;
    padding-right: 4px;
    line-height: 14px;
    text-align: center;
    background-color: #222;
    color: #bbb;
    font-size: 10px;
    vertical-align: text-top;
}

html.dark-mode .pst {
	background-color: #bbb;
	color: #222;
}

.item {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 5px 5px;
  grid-auto-flow: row;
  font-family: serif;
}

.non-dot .item {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  font-family: serif;
}

.non-dot .item.stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  font-family: serif;
}

.non-dot.expanded .item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  font-family: serif;
}

.item-label {
	display: flex;
}

.non-dot .item-label-text {
	font-family: "Fritz";
	font-weight: bold;
}

.non-dot .item-label-value {
	font-family: serif;
}

.item-label-span {
flex-grow: 1;
height: 15px;
font-size: 10px;
padding-bottom: 0px;
vertical-align: bottom;
line-height: 19px;
text-align: right;
border-bottom: 1px dotted #222;
margin-left: 5px;
}

.header-mf {
  display: grid;
  grid-template-columns: 1fr 90px 70px;
  gap: 5px 5px;
  grid-auto-flow: row;
  font-family: "Fritz";
  font-weight: bold;
}

.header-2c {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 5px 5px;
  grid-auto-flow: row;
  font-family: "Fritz";
  font-weight: bold;
}

.item-mf {
  display: grid;
  grid-template-columns: 1fr 90px 70px;
  gap: 5px 5px;
  grid-auto-flow: row;
  font-family: serif;
}

.item-mf-label, .item-mf-type, .item-mf-cost {
	border-bottom: 1px dotted #222;
}

html.dark-mode .item-mf-label, html.dark-mode .item-mf-type, html.dark-mode .item-mf-cost {
	border-bottom: 1px dotted #bbb;
}

.item-mf-cost, .header-mf-cost {
	text-align: center;
}

html.dark-mode .item-label-span {
	border-bottom: 1px dotted #bbb;
}

.bb-dotted {
	border-bottom: 1px dotted #222;
}

html.dark-mode .bb-dotted {
	border-bottom: 1px dotted #bbb;
}

.box {
	//border: 1px solid rgba(34,2,0,0.25);
	background-color: rgba(34,2,0,0.1);
  padding: 7px;
}

html.dark-mode .box {
	//border: 1px solid rgba(187, 187, 187,0.25);
	background-color: rgba(187, 187, 187,0.1);
}

.section-overview {
  display: grid;
  grid-template-columns: 262px 1fr;
  gap: 15px 15px;
  grid-auto-flow: row;
}

.portrait {
	border: 1px solid rgba(34,2,0,0.25);
	padding: 5px;
}

.portrait-inner {
	background-color: rgba(34,2,0,0.25);
	height: 250px;
	width: 250px;
	overflow: hidden;
}

html.dark-mode .portrait {
	border: 1px solid rgba(187, 187, 187,0.25);
	padding: 5px;
}

html.dark-mode .portrait-inner {
	background-color: rgba(187, 187, 187,0.25);
	height: 250px;
	width: 250px;
}

code.block {
	display: block;
}

@media only screen and (max-width: 680px) {
	.section-3column, .section-2column {
	  grid-template-columns: 1fr;
	}
	
	.section-overview {
	  display: grid;
	  grid-template-columns: 1fr;
	  gap: 25px 25px;
	  grid-auto-flow: row;
	}
	
	.portrait {
		width: 262px;
		margin: 0 auto;
	}
	
	.non-dot.section-3column {
	  gap: 5px 5px;
	}
	
	.non-dot.section-3column.gap {
	  gap: 15px 15px;
	}
}