/* Table of Contents
--------------------------------------------------------------------------------------------
- 1) Color Variables
- 2) Elements
- 3) Page Layout Elements
- 4) Table Elements
- 5) Navigation
- 6) Buttons
- 7) Messages
- 8) Classes
- 9) Reports
- 10) ID Specific
- 11) Media Queries
----------------------------------------------------------------------------------------- */

/* 1) Color Variables
----------------------------------------------------------------------------------------- */
:root {
	--basecamp-beige: #f5efe6;
	--black-default: #333;
	--border-default: #e9eaeb;
	--disabled: #dcdcdc;
	--link-default: #007ac1;
	--off-white-default: #f5f5f5;
	--search-background: #f3f5f6;
	--white-default: #fff;
	--green-default: #2da562;
	--dark-gold: #FFD700;
}

/* 2) Elements.
----------------------------------------------------------------------------------------- */

body {
  background: var(--off-white-default);
  background-image: url(../images/fancy_deboss.png);
  font-family: 'Montserrat', sans-serif;
}
a {
	font-weight: normal;
	color: var(--link-default);
}
a i.fa {
  margin-left: .5rem;
}
a .fa-step-backward,
a .fa-step-forward,
a .fa-fast-backward,
a .fa-fast-forward {
  color: var(--link-default);
  padding: 0 .5rem;
  text-decoration: none;
}
a .fa-fast-forward {
  margin-right: 2rem;
}
a.aspNetDisabled i {
  color: var(--disabled);
}
div.left {
	text-align: left;
}
div.center {
	text-align: center;
}
div.right {
	text-align: right;
}
div.left, section.left {
	float: left;
}
div.right, section.right {
	float: right;
}
section.left-half {
	box-sizing: border-box;
	float: left;
	width: 49%;
	/*outline: solid 1px red;*/
}
section.right-half {
	box-sizing: border-box;
	float: right;
	width: 49%;
	/*outline: solid 1px red;*/
}
div.margin-left, section.margin-left {
	margin-left: 4rem;
}
div.margin-right, section.margin-right {
	margin-right: 4rem;
}
div.text-center, section.text-center {
	text-align: center;
}
div.text-left {
  text-align: left;
}
div.text-right {
  text-align: right;
}
header.page-header {
	background: #007abe;
	color: var(--off-white-default);
}
header.page-header .container {
  padding: 1.5rem;
}
header.page-header h1 {
	cursor: pointer;
}
footer.page-footer {
	/*border-top: dotted 1px #696969;*/
	color: #696969;
	font-size: 1rem;
	padding: 1rem 0;
	text-align: center;
}
h1 {
	font-size: 2.5rem;
	font-weight: bold;
	letter-spacing: .5px;
	margin: 0;
	margin-bottom: 1rem;
	text-align: center;
}
h2 {
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 2rem 0;
	text-align: center;
	text-transform: uppercase;
}
h2.page-header {
	margin-top: 0;
}
h2.left {
	text-align: left;
}
h2.right {
	text-align: right;
}
h3 {
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 0;
	margin: .75rem 0 1.75rem 0;
}
h4 {
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 0;
}
label.refund {
	color: red;
}
p {
	margin: 1rem 0;
}
p.center {
	text-align: center;
}
select[disabled=disabled] {
	background-color: var(--disabled);
}
textarea:disabled, input:disabled {
	background-color: var(--disabled);
}
input[readonly], textarea[readonly] {
	background-color: var(--disabled);
}

ul li h3 {
	display: inline-block;
}

/* 3) Page Layout Elements.
----------------------------------------------------------------------------------------- */
.container {
	min-width: 1200px; /* We need to prevent "squishing"... the horizontal scroll bar will take over. */
}
main.row {
	background: var(--white-default);
	box-sizing: border-box;
	padding: 1rem;
	min-width: 1100px;
}
h1.page-heading {
	float: left;
	margin: 0;
	text-align: left;
}
.page-heading-testing-info {
	background: red;
	border: solid 3px var(--off-white-default);
	color: var(--off-white-default);
	float: left;
	font-weight: bold;
	letter-spacing: .5px;
	margin-left: 4rem;
	margin-top: -.25rem;
	padding: .5rem 2rem;
	text-transform: uppercase;
}
.page-heading-testing-info .date-info {
	letter-spacing: 2px;
}
.row {
	box-sizing: border-box;
}

/* 4) Table Elements.
----------------------------------------------------------------------------------------- */

table.list-layout {
	border-bottom: solid 1px var(--black-default);
	border-collapse: collapse;
	border-spacing: 0;
	font-family: 'Droid Sans', sans-serif;
	font-size: 1.4rem;
	table-layout: auto;
	width: 100%;
}
table.list-layout.no-border-bottom {
  border-bottom: none;
}
table.list-layout th {
	padding: 2px 0;
	vertical-align: top;
}
table.list-layout th.bottom {
	vertical-align: bottom;
}
table.list-layout td {
	padding: 2px 0;
	vertical-align: top;
}
table.list-layout td div {
	padding: 4px 2px;
}
table.list-layout.stripped tr:nth-child(even) {
  background: var(--basecamp-beige);
}
table.center {
	margin: 0 auto;
}
table td.debug,
table th.debug {
	display: none;
	color: red;
	font-weight: bold;
}
th {
  border-bottom: solid 1px var(--black-default);
}
td, th {
	text-align: center;
}
td.center, th.center {
	text-align: center;
}
td.left, th.left {
	text-align: left;
}
th.right,
td.right {
	text-align: right;
}

/* 5) Navigation.
# https://www.w3schools.com/howto/howto_css_dropdown.asp
# https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
----------------------------------------------------------------------------------------- */

nav {
	font-weight: 700;
  letter-spacing: .25px;
}
nav .nav-main-link {
  color: var(--black-default);
  font-weight: 700;
  font-size: 16px;
}
nav a {
  float: left;
  font-weight: 500;
  padding: 1.5rem;
  text-decoration: none;
}
nav a.not-active {
	color: #c0c0c0;
	font-weight: normal;
}
.dropdown {
	float: left;
	overflow: hidden;
}
.dropdown.right {
	float: right;
}
.dropdown .dropbtn {
	font-size: 16px;
	border: none;
	outline: none;
	/*color: white;*/
	padding: 14px 16px;
	background-color: inherit;
}
nav a:hover, .dropdown:hover .dropbtn {
	color: var(--link-default);
	cursor: pointer;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}
.dropdown-content.multi-col {
	padding-right: 2rem;
}
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}
.dropdown-content a:hover {
	background-color: #ddd;
}
.dropdown:hover .dropdown-content {
	display: block;
}

/* 6) Buttons.
----------------------------------------------------------------------------------------- */

.add-item-button {
	background-color: #2da562;
	border: none;
	border-radius: 2rem;
	color: var(--off-white-default);
	cursor: pointer;
	display: inline-block;
	letter-spacing: 1px;
	outline: none;
  padding: 1rem 1.5rem;
	-webkit-transition: background 0.3s ease, color 0.3s linear;
	-moz-transition: background 0.3s ease, color 0.3s linear;
	-o-transition: background 0.3s ease, color 0.3s linear;
	transition: background 0.3s ease, color 0.3s linear;
}
.add-item-button:hover {
	background-color: #1F793A;
}

.download-button-info,
.download-for-import-button-info {
	position: absolute;
	top: 66px;
	left: 360px;
/*	background: red;*/
	font-weight: bold;
	overflow: hidden;
	z-index: 10000;
	display: none;
}

#btnDownload:hover + .download-button-info {
	display: block;
}

#btnDownloadForImport:hover + .download-for-import-button-info {
	display: block;
}


.submit-button {
	background-color: #2da562;
	border: solid 2px #2da562;
	border-radius: 2rem;
	color: #f5f5f5;
	cursor: pointer;
	font-weight: 500;
	letter-spacing: .5px;
	outline: none;
	padding-bottom: 1rem;
	padding-top: 1rem;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	text-decoration: none;
	/*	text-transform: uppercase;*/
	-webkit-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
	-moz-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
	-o-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
	transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}
a.submit-button {
	padding: .5rem 1.5rem;
}
.submit-button:hover {
	background-color: #1F793A;
	border: solid 2px #1F793A;
}
.submit-button.delete {
	background-color: #8B0000;
	border: solid 2px #8B0000;
}
.submit-button.delete:hover {
	background-color: #5C020E;
	border: solid 2px #5C020E;
}
.submit-button.cancel {
	background-color: var(--white-default);
	border: solid 2px #2da562;
	color: #2da562; 
}
.submit-button.cancel:hover {
	background-color: var(--off-white-default);
	border: solid 2px #1F793A;
	color: #1F793A;
}
.submit-button.link {
	background-color: var(--link-default);
	border: solid 2px var(--link-default);
  color: #f5f5f5;
  text-decoration: none;
}
.submit-button.link:hover {
	background-color: #002BAF;
	border: solid 2px #002BAF;
}
.close-button {
	color: darkred;
	cursor: pointer;
	font-size: 2.5rem;
}
.reset-button {
  color: red;
}

/* 7) Messages.
----------------------------------------------------------------------------------------- */

.messages {
	text-align: center;
	color: #FF3300;
}
.messages.shopify {
	color: darkgreen;
}
.message-error {
  background-color: #fce2db;
  background-image: url('../images/message-red-x.png');
  background-position: 8px 8px;
  background-repeat: no-repeat;
  background-size: 24px;
  border: solid 2px #bc0717;
  color: #bc0717;
  display: block;
  margin: 1rem 0;
  padding: 8px 8px 8px 40px;
}
.message-success {
  background-color: #E2F9E3;
  background-image: url('../images/message-green-check.png');
  background-position: 8px 8px;
  background-repeat: no-repeat;
  background-size: 24px;
  border: solid 1px #006400;
  color: #006400;
  display: block;
  margin: 1rem 0;
  padding: 8px 8px 8px 40px;
}

/* 8) Classes.
----------------------------------------------------------------------------------------- */
.add-box {
	background: #f5efe6; /* Basecamp Beige */
	border: solid 4px #109121;
	margin: 2rem 0;
	padding: 1rem;
}
.add-box h3 {
	display: inline-block;
}
.add-box .close-button {
	margin-top: -1rem;
}
.add-box .form-data label {
	display: inline-block;
	margin-right: 1rem;
	min-width: 25%;
	text-align: right;
}
.add-box .search-box {
	margin: 1rem 0;
}
.add-box .fixed-height {
	width: 100%;
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}
.add-box div.right label {
	min-width: unset;
	width: auto;
}

/* Add (box) items list used on Build Pendant/Earring */
.add-item-box {
	background: var(--off-white-default);
	box-sizing: border-box;
	border: solid 1px #109121;
	margin:.5rem;
	padding: 1rem;
	width: 160px;
	text-align: center;
}
.add-item {
  background: var(--basecamp-beige);
  box-sizing: border-box;
  border: solid 2px var(--green-default);
  padding: 1rem !important;
}

.add-item-link {
	border: solid 4px var(--white-default);
}
.add-item-link h3 {
	border-bottom: solid 2px;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	transition: border-bottom .2s ease-in-out;
}
.add-item-link h3:hover {
	border-bottom: solid 2px #fff;
}

.add-items-list {
	display: flex;
	flex-wrap: wrap;
	max-height: 600px;
	overflow-y: auto;
}
.add-items-list label.auto-width {
	width: 100%;
}
.add-items-list .add-box.parcel {
	width: 180px;
}
.add-items-list .add-item-box h4 {
	font-size: 1.5rem;
}
.add-items-list .add-item-box input[type=text] {
	margin-left: .5rem;
	width: 40px;
}
.add-items-list .add-item-box p {
	margin: .25rem;
}
.add-items-list .add-item-box .add-button {
	margin-top: 1rem;
}
.add-items-search {
	margin: 0 .5rem;
}
.add-items-search .search-box {
	width: 91% !important;
}
.add-item-links {
	display: flex;
}
.add-item-links > div.add-item-link {
	margin-right: 1.5rem;
}

.add-link {
	color: var(--link-default);
	border: solid 4px var(--white-default);
	display: inline-block;
	margin: .5rem 0;
	padding: .5rem 0;
}
.add-link h3 {
	border-bottom: solid 2px;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	transition: border-bottom .2s ease-in-out;
}
.add-link h3:hover {
	border-bottom: solid 2px var(--white-default);
}
.add-table-data {
	box-sizing: border-box;
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	width: 100%;
}
.admin-setting {
  background-color: var(--off-white-default);
  border: 1px solid #C0C0C0;
  padding: 16px;
  margin-bottom: 16px;
}
.admin-setting:last-child {
  margin-bottom: 0;
}
.admin-setting .header {
  border-bottom: dotted 1px #c0c0c0;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.admin-setting .header h3 {
  margin: 0;
  text-align: center;
}
.assembly-tab {
  display: flex;
  margin-top: 3rem;
}
.assembly-tab div {
  flex-grow: 1;
}
/*.assembly-tab div:first-child {
  margin-right: 1rem;
}*/
.assembly-tab table {
  width: 100%;
  border-collapse: collapse;
	border-spacing: 0;
}
.buttons {
	box-sizing: border-box;
	padding: 1rem;
	text-align: center;
}
.button-group .submit-button {
	margin-left: 1.5rem;
}
.button-margin {
	margin: 0 1rem;
}
.clear-fix {
	clear: both;
}
.clear-right {
	clear: right;
}
.data-item {
	font-weight: bold;
	text-align: left;
}
.detail-page-content {
	padding: 1rem;
}
.detail-page-content label {
	display: inline-block;
	margin-right: 1rem;
	width: 120px;
	text-align: right;
}
.detail-page-content.larger-labels p {
	display: flex;
}
.detail-page-content.larger-labels label {
	width: 200px;
}
.detail-page-content.larger-labels input[type=text],
.detail-page-content.larger-labels textarea {
	width: 800px;
}
.detail-page-content label.auto-width {
	width: auto;
	text-align: center;
}
.detail-page-content label.top {
	vertical-align: top;
}
.detail-page-content .validation-error-message {
  color: red;
}
.detail-page-header {
	position: relative;
}
.detail-page-header.with-flex {
	align-items: center;
	display: flex;
	justify-content: center;
}
.detail-page-header.with-flex a {
	display: inline-block;
	padding: .5rem;
	/*outline: solid 1px red;*/
}
.detail-page-header.with-flex > div {
	flex: 1;
/*	outline: solid 1px red;*/
}
/* Aligning elements left, center and right in flexbox:
   https://stackoverflow.com/questions/43211390/aligning-elements-left-center-and-right-in-flexbox */
.detail-page-header.with-flex .back-to-list {
	flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.detail-page-header.with-flex .heading {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.detail-page-header.with-flex .top-right-action {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.detail-page-header.with-flex .top-right-action .submit-button {
	margin-right: 1rem;
}
.detail-page-header .back-link {
	position: absolute;
	top: 0;
	left: 0;
}
.detail-page-wrapper {
	display: flex;
	margin-bottom: 2rem;
}
.edit-box {
  border: solid 1px #111;
  margin-right: 3rem;
  padding: 1rem;
}
.edit-box:last-child {
  margin-right: 0;
}
.edit-box label {
  display: inline-block;
  margin-right: .5rem;
  min-width: 120px;
  text-align: right;
}
.fa-shopify.pending {
	color: var(--dark-gold);
}
.fa-shopify.synced {
	color: var(--green-default);
}
.file-import {
	border: solid 1px #ccc;
	padding: 4px;
}
.filter-box {
	background: #f6f2ef; /* Basecamp Beige */
	border: solid 4px #e4e0dd /* Basecamp Project Border */;
	margin: 1rem 0;
	padding: 1rem;
}
.filter-box label {
	font-weight: bold;
}
.filter-actions {
	float: left;
	margin-top: -4.5rem;
}
.filters {
	background: #f5f5da;
	display: flex;
	margin-bottom: 1rem;
	padding: 2rem;
}
.filter-item {
	border-bottom: dotted 1px #808080;
	padding: 0 1rem 1.5rem 1rem;
	margin-bottom: 1.5rem;
}
.filter-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.filter-item .to-label {
	margin-left: 2rem;
}
.filter-item h3 {
	margin-bottom: .5rem;
}
.filter-item input[type='checkbox'],
.filter-item label {
  margin-right: .5rem;
}
.filter-pane {
	border-right: solid 1px #696969;
	margin: 0;
	padding: 1rem 4rem;
	/*outline: solid 1px red;*/
}
.filter-pane:first-child {
	padding-left: 2rem;
}
.filter-pane:last-child {
	border-right: none;
}
.form-entry label {
	display: inline-block;
	margin-bottom: 0;
	margin-right: 1rem;
	text-align: right;
	min-width: 200px;
}
.form-entry label.for-textarea {
	margin-top: 4px;
	vertical-align: top;
}
.form-container {
	background-color: #f0f8ff;
	box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
	margin-top: 4rem;
	padding: 1rem;
}
.form-container h3 {
	text-align: center;
}
.form-container table {
	width: 100%;
}
.form-container table td.text-right {
	width: 25%;
	text-align: right;
}
.form-container .text-right {
	font-weight: bold;
}
.information-boxes {
	display: flex;
}
.information-boxes > section {
	/*outline: solid 1px red;*/
	width: calc(50% - 1rem);
}
.information-box {
	box-sizing: border-box;
	background: #f5f5da;
	padding: 2rem;
}
.information-box:first-child {
	margin-left: 0;
}
.information-box:last-child {
	margin-right: 0;
}
.information-box .data-value a,
.information-box .data-value,
.edit-box .data-value {
	display: inline-block;
	font-weight: bold;
  margin-left: .25rem;
	margin-right: .25rem;
}
.information-box h3 {
	margin-top: 0;
}
.items-list {
	background: var(--off-white-default);
	box-sizing: border-box;
	padding: 1rem;
}
/*.items-list:first-of-type {
	outline: solid 1px red;
	margin-top: 0;
}*/
.items-list h3 {
	/*outline: solid 1px red;*/
	margin-bottom: 1.5rem !important;
}
.items-list table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.item-row {
	background: #f6f2ef;
	border-bottom: solid 1px #e4e0dd;
	border-top: solid 1px #e4e0dd;
	margin-top: 1rem;
}
.item-row input[type=submit] {
	margin: 0 0 .5rem 1rem;
}
.link-area {
  color: #0066cc;
  cursor: pointer;
  margin-bottom: 1rem;
  text-decoration: underline;
}
.link-area.button {
  font-weight: bold;
}
.link-area.cancel,
.link-area.cancel i {
  color: #990000;
}
.link-area i {
  color: var(--black-default);
  cursor: pointer;
}
.link-area.save i {
  color: #006400;
}
.link-area:hover {
  text-decoration: none;
}
.login-box {
  background: var(--white-default);
  border: solid 2px #e7eef0;
  margin-top: 2rem;
  padding: 2rem;
}
.login-box h1 {
  border-bottom: solid 1px;
  color: var(--link-default);
  margin-bottom: 2rem;
  padding-bottom: .5rem;
  text-align: center;
 }
.login-box table {
  border-spacing: 0; /* cellspacing */
  width: 100%;
}
.login-box tr td {
  padding: 1rem .5rem;
  text-align: left;
}
.multi-check-list {
	margin-top: -2rem;
	max-height: 21rem;
	overflow-y: scroll;
}
.multi-check-list > div {
	margin: .25rem 0;
}
.multi-check-list > div > input[type='checkbox'] {
	margin-right: .25rem;
}
.notifications {
	background: #fffae5 !important;
	border: solid 2px #edd069;
	padding: 1rem;
}
.notification {
	display: flex;
	justify-content: space-between;
	margin: .5rem 0;
}
.notification-list-item {
	border-bottom: solid 1px #edd069;
	padding-bottom: .5rem;
}
.notification-list-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.remote-buttons {
  margin-top: 1rem;
}
.reset-or-text {
  margin-left: 1rem;
  margin-right: 1rem;
}
.recent-sales-title {
  display: flex;
  align-items: center;
}
.recent-sales-title h2 {
  margin: 0 .5em 0 0;
  padding: 0;
}
.recent-sales-title p {
  margin-right: 1em;
}
.recent-sales-chart {
  padding: 2em 0 1em 0;
}
.recent-sales-chart canvas {
  margin: 0 auto;
  max-width: 800px;
}
.search {
	background: var(--search-background);
	border-bottom: solid 1px var(--border-default);
	padding: 1rem;
}
.search-box {
  font-family: FontAwesome, 'Open Sans', sans-serif;
  margin-right: 1rem;
  min-width: 200px;
  padding: .8rem 1rem;
}
.search-box.wide {
  min-width: 240px;
}
.search-box.wider {
  min-width: 260px;
}
.search-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.textbox {
	border: solid 1px #ccc;
	display: inline-block;
	padding: 4px;
	width: auto;
}
select.textbox {
	padding: 2px;
}
.textbox.bold {
	font-weight: bold;
}
.textbox.full-width {
	box-sizing: border-box;
	width: 70%;
}
.textbox.wider {
	box-sizing: border-box;
	width: 85%;
}
.textbox.width-100pct {
	box-sizing: border-box;
	width: 100%;
}
.login-box .textbox.full-width {
  width: 100%;
}
.textbox.small {
	width: 40px;
}
.textbox.medium {
	width: 100px;
}
.textbox.number {
	text-align: right;
}
.textbox.textarea {
	margin-right: 1.75rem;
	min-width: 290px;
}
.textbox.top-margin {
	margin-top: 1rem;
}
.unpublished-draft {
	background: #ffdb4d;
	border-radius: 1rem;
	padding: .5rem 2rem;
	text-align: center;
}
.unpublished-draft span {
	font-weight: bold;
}
.validation-message {
  color: #990000;
  font-weight: bold;
  letter-spacing: .5px;
}
.waiting-message {
  color: var(--black-default);
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

/* 9) Reports.
----------------------------------------------------------------------------------------- */

h3.report-criteria {
	font-weight: normal;
	text-align: center;
}
table {
  width: 100%;
}
table.report-layout {
	font-size: 1.25rem;
	width: 100%;
}
table.report-layout.auto-width {
	width: auto;
}
table.report-layout.normal-font {
	font-size: 1.5rem;
}
table.report-layout td div {
	padding: 4px 2px;
}
table.report-layout td div.buttons-cell {
	margin-top: 2px;
}
table.report-layout tr.report-header th {
	border-bottom: solid 1px var(--black-default);
}
table.report-layout tr.report-footer td {
	border-top: solid 1px var(--black-default);
}
table.report-layout tr.add-new td div.add-new-table-field {
  margin-top: 1rem;
}
table.report-layout h2 {
	text-transform: capitalize;
}
table.report-layout td.grand-total {
	border-top: double 3px var(--black-default);
	font-weight: bold;
}
table.report-layout td.sub-total {
	border-top: solid 1px var(--black-default);
}
table.report-layout {
	border-collapse: separate;
	border-spacing: 5px;
}
table.report-layout {
	border-collapse: collapse;
	border-spacing: 0;
}
table.report-layout th {
	padding: .25rem .5rem;
	vertical-align: bottom;
}
table.report-layout td {
	padding: .25rem .5rem;
	vertical-align: top;
}
table.report-layout th.left, table.report-layout td.left, table.report-layout th.right, table.report-layout td.right {
	padding-left: 0;
}
.memo-invoice-line-items {
	max-height: 260px;
	overflow-y: scroll;
}
.report-filters {
	margin-bottom: 1rem;
}
.report-filters h3 {
	border-bottom: solid 1px var(--black-default);
}
.report-filters.grid-container .grid-col-4 {
	display: flex;
}
.report-filters.grid-container .grid-col-4 > div {
	box-sizing: border-box;
	display: inline-block;
}
.report-filters.grid-container .grid-col-4 > div:first-child {
	padding-right: 1rem;
	text-align: right;
	width: 30%;
}
.report-filters.grid-container .grid-col-4 > div:last-child {
	font-weight: bold;
	width: 68%;
}
/* 10) ID Specific.
----------------------------------------------------------------------------------------- */
#action-row {
  margin-bottom: 2rem;
}
#dashboard p.buttons {
  padding-top: 1.5em;
}
#dashboard section {
  background: var(--basecamp-beige);
  padding: 0 1em 1em 1em;
}
#dashboard section h2 {
  margin-bottom: .5rem;
  padding-bottom: 0;
  text-align: left;
}
#divBusySaving {
	text-align: center;
}
#divBusySaving img {
	display: block;
	margin: 0 auto;
}
#lnkSignOut, .account-info a {
	color: var(--off-white-default);
	margin-left: .75rem;
}
#additionalReceiptInfo .textbox,
#receiptTotals .textbox {
	width: 180px;
}
#metalList,
#metalTransfer {
  margin: 2rem 8rem 1rem 8rem;
}
#metalList table.list-layout th,
#metalList table.list-layout td {
  padding: .5rem;
}
#salesInformation {
  padding-top: 1em;
}
#updateJewelry {
  border: solid 2px var(--green-default);
  display: flex;
  justify-content: center;
  align-items: center;
}
#welcomeMessage {
	line-height: 2.5rem;
}

/* 11) Media Queries
----------------------------------------------------------------------------------------- */

@media print {
	@page {
		width: 100%;
		height: 100%;
		/*margin: 0% 0% 0% 0%; */
		size: landscape;
		/*filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);*/
	}
	body {
		font-size: 1em;
		/* currently ems cause chrome bug misinterpreting rems on body element */
		line-height: 1.5em;
		padding: 0;
		margin: 0;
	}
	header {
		display: none;
	}
	nav {
		display: none;
	}
	main {
		padding: 0;
	}
	main.row {
		margin-top: 0;
		padding: 0;
	}
	footer {
		display: none;
	}
	.messages {
		display: none;
	}
	.submit-button {
		display: none;
	}
	#reportSelection {
		display: none;
	}
	.container {
		max-width: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		/*outline: solid 2px red;*/
	}
	.filter-actions {
		display: none;
	}
	.filters {
		display: none;
	}
}