/* jabacus css */
:root {
  --calc-card-size: 150px;
  --calc-card-font-size: 10pt;
}

body {
	font-family: system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		"Noto Sans",
		"Liberation Sans",
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji";
}

:focus {
	outline: 0;
}

.panel {
	margin-bottom: 1rem;
}

.panel-body {
	border-bottom: 1px solid #ccc;
}

.panel-body:last-child {
	border-bottom: none;
}

.panel-body .title {
	font-weight: bold;
}

.panel-body .var-group {
	padding: 0 1rem;
}

.panel-body .var-label {
	font-weight: 600;
}

/* links */
a,
a:link,
a:visited,
a:focus,
a:hover,
a:active {
	color: #0a94d6;
	text-decoration: none;
}

a:focus,
a:hover,
a:active {
	color: #055c85;
}

.text-link {
	cursor: pointer;
	color: #0a94d6;
	text-decoration: none;
	width: fit-content;
	user-select: none;
}

.text-link:hover {
	color: #055c85;
	text-decoration: none;
}

.text-link-delete {
	color: #777;
}

.text-link-delete:hover {
	color: #ff0000;
}

/* google material icons */
.material-icons-outlined {
	display: block;
}
.material-icons-outlined.md-18 { font-size: 18px; }
.material-icons-outlined.md-24 { font-size: 24px; }
.material-icons-outlined.md-36 { font-size: 36px; }
.material-icons-outlined.md-48 { font-size: 48px; }

/* icon links */
.icon-link {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 1rem;
	gap: 0.5rem;
}

/* flex */
.flex-start {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/* hr */
.horizontal-rule {
	background-color: #dddddd;
	height: 2px;
	margin-bottom: 0.5em;
}

/* button */
.btn-jabacus {
	background-color: #fff;
	border-color: #0a94d6;
	color: #0a94d6;
}

.btn-jabacus:hover {
	border-color: #055c85;
	color: #055c85;
}

/* info popup */
.info-popup {
	margin-bottom: 0.5rem;
	width: fit-content;
	cursor: pointer;
}

.info-popup-icon {
	color: #0a94d6;
	user-select: none;
}

.info-popup-icon.open,
.info-popup-icon:hover {
	color: #055c85;
}

.info-popup-content {
	display: none;
}

.info-popup-box {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: #fff;
	border: 2px outset #0a94d6;
	border-radius: 5px;
	padding: 1rem;
	width: max-content;
	min-width: min-content;
	max-width: min(695px, calc(100vw - 2rem));
	box-shadow: 1px 1px 3px #ccc;
	display: none;
}

.info-popup-box > div {
	pointer-events: none;
}

/* page layout */
.jabacus-container,
.jabacus-container-full {
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 200px;
	grid-template-rows: 1fr;
	grid-template-areas:
		"page ad";
}

.jabacus-container-full {
	grid-template-columns: 1fr;
	grid-template-areas:
		"page";
}

/* page */
.jabacus-page {
	grid-area: page;
	overflow-y: auto;
}

/* ad */
.jabacus-ad {
	grid-area: ad;
	padding: 1rem;
	overflow-y: auto;
	border-left: 1px solid #dddddd;
}

/* page content */
.jabacus-page-content {
	height: 100%;
	overflow-y: auto;
	scroll-behavior: smooth;
	display: grid;
	grid-template-columns: minmax(1em, 1fr) minmax(0, 1390px) minmax(1em, 1fr);
	grid-template-rows: 56px 1fr auto;
	grid-template-areas:
		"header header header"
		". main ."
		". footer .";
}

/* page content full width */
.jabacus-page-content-max {
	height: 100%;
	overflow-y: auto;
	scroll-behavior: smooth;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 56px 1fr auto;
	grid-template-areas:
		"header"
		"main"
		"footer";
}

/* page header */
.jabacus-page-header {
	grid-area: header;
	z-index: 2;
	position: sticky;
	top: 0;
	background: #ffffff;
}

.jabacus-page-header.shadow {
	box-shadow: 2px 2px 4px #dddddd;
}

/* page main */
.jabacus-page-main {
	grid-area: main;
	z-index: 1;
}

/* page footer */
.jabacus-page-footer {
	grid-area: footer;
	z-index: 1;
	background-color: #ffffff;
}

.jabacus-page-footer .horizontal-rule {
	margin: 0;
}

/* header */
.jabacus-page-header nav {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow-x: auto;
}

.jabacus-page-header nav > div {
	padding: 0 1rem;
}

.jabacus-page-header nav > div:not(:last-child) {
	flex: 1;
}

.jabacus-page-header nav > div.nav-links {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 2rem;
}

.jabacus-page-header nav > div.nav-links a {
	margin-bottom: 0;
}

.jabacus-page-header nav > div.nav-links .icon-link {
	font-size: large;
}

.jabacus-page-header nav .account-menu-toggle {
	user-select: none;
	margin-bottom: 0;
	font-size: large;
}

@media (max-width: 1390px) {
	.jabacus-page-header nav > div.nav-links span.text {
		display: none;
	}
}

/* footer */
.footer-container {
	padding: 0 1rem;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
	overflow-x: auto;
}

.footer-container > div {
	padding: 0.5rem 0;
}

.footer-container > .footer-links {
	display: flex;
	align-items: center;
}

.footer-container > .footer-links > div:not(:last-child)::after {
	content: "\2022";
	padding: 0 0.5rem;
}

/* calc page footer */
footer.calc-footer .horizontal-rule {
	display: none;
}

/* advert */
.jabacus-ad-close {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	cursor: pointer;
}

.jabacus-ad-close > div {
	border: 1px solid #ccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom: none;
	background: white;
	padding: 0.25em 0.5em;
}
.jabacus-ad-close > div > a > span {
	font-size: 18px;
}

.jabacus-ad-container {
	min-width: 160px;
	min-height: 600px;
	border: 1px solid #dddddd;
	background: white;
}

/* pages */
.page-title {
	font-size: xx-large;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #dddddd;
	margin-bottom: 1.5rem;
}

/* dashboard */
.dashboard-page {
	position: sticky;
	top: 56px;
	z-index: 1;
	padding: 1em;
	min-height: calc(100vh - var(--calc-card-size) - 2em - 56px);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #a8a8a8;
	box-shadow: inset 2px 2px 3px #5a5a5a;
}

.dashboard-calculators {
	position: relative;
	min-height: calc(100vh - 3em - 56px);
	z-index: 2;
	background: #ffffff;
}

.dashboard-calc-pinned {
	min-height: calc(var(--calc-card-size) + 2em);
	z-index: 2;
	padding: 1em;
	margin-bottom: 1em;
	background: #dddddd;
	border-top: 1px solid #a8a8a8;
	border-bottom: 1px solid #a8a8a8;
}

.dashboard-calc-recent {
	padding: 0 1em;
}

/* calculators page */
.calc-menu-container {
	margin: 0 1em;
}

/* calc menu container with announcement panel */
.announcement-calc-menu-container {
	margin: 0 1em;
	display: grid;
	gap: 1em;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas:
		"announce"
		"calc-menu";
}

@media (min-width: 768px) {
	.announcement-calc-menu-container {
		grid-template-columns: minmax(0, 1fr) minmax(300px, min(400px, 25vw));
		grid-template-areas:
			"calc-menu announce";
	}
}

/* calc cards section */
.calc-menu-cards {
	grid-area: calc-menu;
}

/* announcements panel */
.announcement-panel {
	grid-area: announce;
}

.announcement-heading {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: #5a5a5a;
	font-size: x-large;
	margin-bottom: 0.5em;
}

.announcement-container {
	display: flex;
	gap: 1rem;
	flex-direction: column;
	padding: 1rem;
	border: 1px solid #dddddd;
	background-color: #f3f3f3;
	border-radius: 4px;
}

.announcement-container:empty::before {
	content: "No new announcements";
	display: block;
	color: #5a5a5a;
	font-size: medium;
	font-style: italic;
	text-align: center;
}

.announcement-card {
	display: block;
	padding: 0.625rem;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 100%;
}

.announcement-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.625rem;
}

.announcement-title {
	font-size: large;
	font-weight: 600;
}

/* html content */
.announcement-content {
	font-size: medium;
	font-weight: normal;
}

/* contain images within content */
.announcement-content img {
	height: auto !important;
	max-width: 100%;
}

/* icon link */
.announcement-content .h4 a {
	display: flex;
	gap: 0.625rem;
	align-items: center;
}

/* icon image */
.announcement-content .h4 a img {
	height: revert-layer !important;
	max-width: revert-layer;
}

.heading {
	font-size: xx-large;
	margin-bottom: 0.25em;
}

.heading-category {
	font-size: x-large;
	margin-bottom: 0.5em;
}

.heading-subcategory {
	font-size: large;
	margin-bottom: 0.5em;
}

/* collapsible subcategory */
.heading-subcategory[data-subcategory] {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-width: fit-content;
	width: 265px;
	max-width: 100%;
	margin-bottom: 1rem;
	border-bottom: 1px solid transparent;
	user-select: none;
}

.heading-subcategory[data-subcategory]:not(.expand) ~ .card-layout {
	display: none;
}

.heading-subcategory[data-subcategory]:hover {
	border-bottom: 1px solid #055c85;
}

.heading-subcategory[data-subcategory] a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.heading-subcategory[data-subcategory] a span {
	margin-left: 2rem;
	visibility: hidden;
}

.heading-subcategory[data-subcategory]:hover a span {
	visibility: visible;
}

.heading-subcategory[data-subcategory] a:focus:not(:hover) {
	color: #0a94d6;
}

/* subcategory toggle */
.heading-subcategory[data-subcategory]::before,
.heading-subcategory[data-subcategory].expand::before {
	font-family: 'Material Icons Outlined';
	font-size: large;
	color: #0a94d6;
	margin-right: 0.5rem;
}

.heading-subcategory[data-subcategory]::before {
	content: "\e5cf";
}

.heading-subcategory[data-subcategory].expand::before {
	content: "\e5ce";
}

.heading-subcategory[data-subcategory]:hover::before {
	color: #055c85;
}

/* no hover */
@media (hover: none) {
	.heading-subcategory[data-subcategory] {
		border-bottom: 1px solid #0a94d6;
	}
	.heading-subcategory[data-subcategory] a span {
		visibility: visible;
	}
}

/* calculator nav menu */
.calc-quick-menu {
	border: 1px solid #dddddd;
	border-left: none;
	border-right: none;
	background-color: #f3f3f3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75em 1em;
	margin-bottom: 1em;
	position: sticky;
	top: 56px;
	overflow-x: auto;
	white-space: nowrap;
	z-index: 3;
	font-size: medium;
	box-shadow: 1px 1px 3px #dddddd;
}

.calc-quick-menu > div:not(:last-child) {
	margin-right: 2em;
}

.anchor-pad {
	padding-top: 116px;
	margin-top: -116px;
	pointer-events: none;
}

/* calculator page */
.calc-page {
	overflow-y: auto;
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"calcTabs tabMenu calcHead calcHead"
		"calcTabs tabMenu calcMenu ."
		"calcTabs tabMenu calculator saveAs";
}

/* calculator tabs */
.calc-tabs {
	grid-area: calcTabs;
	padding: 1rem;
	background-color: #f3f3f3;
	overflow-y: auto;
	z-index: 5;
}

.calc-tab {
	cursor: pointer;
	user-select: none;
	margin-bottom: 2rem;
	color: #142142;
}

.calc-tab:not(.tab-selected):hover {
	color: #055c85;
}

/* selected calc tab*/
.calc-tab-selected {
	grid-area: tabMenu;
	z-index: 4;
	position: relative;
	background-color: #dddddd;
	min-width: max(10vw, 250px);
	max-width: 30vw;
	width: max(10vw, 250px);
	overflow-y: auto;
	resize: horizontal;
}

.tab-selected {
	color: #0a94d6;
}

/* save calc project */
.calc-save-project {
	grid-area: saveAs;
	position: relative;
	background-color: #dddddd;
	min-width: 250px;
	max-width: 25vw;
	width: 350px;
	overflow-y: auto;
	z-index: 2;
	border-left: 1px solid #a8a8a8;
	padding-top: 0.25rem;
}

/* calc menu header */
.calc-menu-header {
	padding: 0 1rem;
	padding-top: 0.5rem;
	margin-bottom: 0.75rem;
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #ddd;
}

.calc-menu-header-title {
	margin-bottom: 0.25rem;
	font-size: large;
	color: black;
}

.calc-menu-header > .horizontal-rule {
	background-color: #a8a8a8;
}

.calc-menu-header .close-icon {
	cursor: pointer;
	user-select: none;
}

.calc-menu-heading {
	font-weight: bold;
	padding: 0 1rem;
	margin-bottom: 0.5rem;
	user-select: none;
}

/* loading */
@keyframes hr-loading-anim {
	0% {
		left: 0;
		transform: translateX(-100%);
	}
	100% {
		left: 100%;
		transform: translateX(0%);
	}
}

.hr-loading {
	width: 100%;
	height: 2px;
	margin: 2px 0;
	display: block;
	position: relative;
	overflow: hidden;
}

.hr-loading::after {
	background-color: #0a94d6;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	animation: hr-loading-anim 2s linear infinite;
}

/* calc menu panel */
.calc-menu-panel {
	padding: 0 1rem;
	margin: 1rem 0;
	margin-top: 0;
	background-color: #ddd;
}

.calc-menu-panel-inset {
	padding: 1rem;
	margin: 1rem;
	background-color: #ffffff;
	border-radius: 3px;
	box-shadow: 1px 1px 1px inset #5a5a5a;
}

.calc-menu-panel-inset > div:not(:last-child) {
	margin-bottom: 1.5rem;
}

.calc-menu-panel-inset > div > div {
	padding: 0 0.25rem
}

/* calc project header */
.calc-menu-project-header {
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0.5rem 1rem;
	margin-bottom: 1rem;
	background-color: #f8f8f8;
	cursor: pointer;
	user-select: none;
}

.calc-menu-project-header .collapse-project,
.calc-menu-project-header .close-project {
	cursor: pointer;
	user-select: none;
	visibility: hidden;
}

.calc-tab-selected:hover .calc-menu-project-header .collapse-project,
.calc-tab-selected:hover .calc-menu-project-header .close-project {
	visibility: visible;
}

/* calc menu toggle */
.calc-toggle {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 0.5rem 1rem;
	cursor: pointer;
	user-select: none;
}
.calc-toggle.collapse {
	border-radius: 5px;
}
.calc-toggle.collapse + .calc-menu-list {
	display: none;
}

.calc-toggle::after {
	font-family: 'Material Icons Outlined';
	font-size: 18px;
	cursor: pointer;
	align-self: flex-start;
	color: #777;
	visibility: hidden;
}
.calc-toggle::after {
	content: "\e5ce";
}
.calc-toggle.collapse::after {
	content: "\e5cf";
}

.calc-menu-panel:hover .calc-toggle::after {
	visibility: visible;
}

.calc-toggle:only-child {
	border-radius: 5px;
}

.calc-toggle:only-child::after {
	visibility: hidden;
}

/* calc menu list */
.calc-menu-list {
	padding: 0;
	background-color: white;
	border: 1px solid #ccc;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.calc-menu-list:not(:only-child) {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
}

.calc-menu-list > div {
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 1px solid #ccc;
}

.calc-menu-list > div.active {
	border-left-color: #0a94d6;
}

.calc-menu-list > div:last-child {
	border-bottom: none;
}

.calc-menu-list > div:hover {
	color: #055c85;
}

.calc-menu-list > div {
	padding: 0.75rem calc(1rem - 3px);
	padding-right: calc(1rem - 6px);
}

.calc-menu-list > div > a {
	padding: 0.25rem 0;
}

.calc-menu-list > div,
.calc-menu-list > div > a {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.calc-menu-list-filename {
	font-weight: bold;
}

.calc-menu-list-more {
	color: #000000;
}

.calc-menu-list-more-info {
	font-size: small;
	padding: 0 0.5rem;
	padding-top: 1.5rem;
	padding-bottom: 1rem;
}

.calc-menu-list-more-delete {
	gap: 0.25rem;
	cursor: pointer;
	padding-bottom: 1rem;
	font-weight: bold;
	font-size: smaller;
	text-transform: uppercase;
	user-select: none;
}

.deleting-file {
	pointer-events: none;
	user-select: none;
}

.deleting-file .calc-menu-list-filename,
.deleting-file .calc-menu-list-filename-delete {
	text-decoration: line-through;
}

/* icons */
.calc-menu-list > div > a > .icons {
	display: flex;
	align-items: center;
	align-self: flex-start;
	justify-content: flex-end;
	gap: 0.25rem;
	user-select: none;
}

.calc-menu-list > div > a > .icons > .more-icon {
	visibility: hidden;
}

.calc-menu-list > div:hover > a > .icons > .more-icon {
	visibility: visible;
}

.calc-menu-list > div > a > .icons > .active-file-icon ~ .more-icon,
.calc-menu-list > div:hover > a > .icons > .active-file-icon {
	display: none;
}

.calc-menu-list > div:hover > a > .icons > .active-file-icon ~ .more-icon {
	display: block;
}

/* calc page main */
.calc-page-main {
	grid-area: calculator;
	grid-column-end: 5;
	display: grid;
	background-color: #a8a8a8;
	box-shadow: inset 2px 2px 3px #5a5a5a;
	overflow-y: auto;
}

.calc-page-main-header {
	grid-area: calcHead;
	z-index: 4;
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 0.25rem 1rem;
	background: #f3f3f3;
	overflow-x: auto;
}

.calc-page-menu {
	grid-area: calcMenu;
	grid-column-end: 5;
	z-index: 3;
	padding: 0.5rem 1rem;
	box-shadow: 2px 2px 3px #5a5a5a;
	overflow-x: auto;
	background-color: #ddd;
}

.calc-page-menu > div {
	max-width: 1390px;
	margin: 0 auto;
}

.calc-page-main-title {
	flex: 1;
	display: flex;
	gap: 0 1rem;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
	max-width: 1390px;
	margin: 0 auto;
}

.calc-page-logo {
	display: none;
	align-self: center;
}

.calc-page-title {
	font-size: x-large;
	font-weight: normal;
	margin: 0;
}

.calc-page-subtitle {
	font-size: large;
	color: #777;
}

.calc-page-version {
	font-size: small;
}

/* active file */
.active-file-path {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid transparent;
	background-color: #f8f8f8;
	border-radius: 3px;
	padding: 0.25rem 1rem;
}

/* calc buttons */
.calc-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	overflow-x: auto;
	gap: 0.5rem 2rem;
	min-width: fit-content;
	user-select: none;
}

.active-file-path.calc-buttons > div {
	flex: 1;
}

.disable-active-link a:active {
	pointer-events: none;
}

.calc-buttons > div > a {
	text-decoration: none;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.spin {
	animation: spin 1s linear infinite;
}

/* saving */
@keyframes spin-save {
	from {
		transform: rotate(0deg) scaleX(-1);
	}
	to {
		transform: rotate(360deg) scaleX(-1);
	}
}

.save-indicator {
	position: relative;
	overflow: hidden;
}

.save-spinner {
	animation: spin-save 0.8s linear infinite;
	color: #0a94d6;
}

.hide-spinner {
	opacity: 0;
	transition: opacity 0.4s;
}

.show-spinner {
	opacity: 1;
	transition: opacity 0s;
}

.indicator-icon {
	position: absolute;
	z-index: 3;
	top: 0;
}

.hide-icon {
	opacity: 0;
	transition: opacity 0s;
}

.show-icon {
	opacity: 1;
	transition: opacity 0.4s;
}

/* calc container */
.calc-container {
	display: grid;
	overflow-y: auto;
	padding: 0 1rem;
}

/* calc panel */
.calc-panel {
	display: grid;
	grid-template-rows: auto 1fr auto;
	background-color: white;
	width: 100%;
	max-width: 1390px;
	margin: 0 auto;
	overflow-y: auto;
}

/* calc panel header */
.calc-panel-header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap-reverse;
	gap: 1rem;
	padding: 1rem;
}

.calc-panel-header > div {
	flex: 1;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	white-space: nowrap;
}

.calc-panel-header input[type="text"] {
	flex: 1;
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 0 0.5rem;
	font-size: medium;
	background: transparent;
}

/* calc panel content */
.calc-panel-content {
	display: grid;
	align-items: flex-start;
	justify-items: flex-start;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1rem;
	padding: 0 1rem;
}
.calc-panel-content > div[class^="col-md-"] {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* calc panel footer */
.calc-panel-footer {
	padding: 1rem;
	text-align: left;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background-color: #f3f3f3;
	clear: both;
}

/* card grid */
.card-layout {
	display: grid;
	place-items: stretch;
	gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(var(--calc-card-size), 1fr));
	grid-auto-flow: row;
	grid-auto-rows: max-content;
	margin-bottom: 1.5em;
}

.card-layout > div {
	min-width: fit-content;
}

/* jabacus card */
.jabacus-card {
	display: block;
	min-width: var(--calc-card-size);
	min-height: var(--calc-card-size);
	padding: 1em;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 5px;
	transition: box-shadow 200ms;
}

.jabacus-card:hover {
	box-shadow: 2px 2px 3px #dddddd;
	transition: box-shadow 100ms;
}

.jabacus-card-dark {
	box-shadow: 2px 2px 3px #5a5a5a;
	border: 1px solid #5a5a5a;
}

.jabacus-card-dark:hover {
	box-shadow: 2px 2px 3px #5a5a5a;
}

.jabacus-card-dark .horizontal-rule {
	background-color: #a8a8a8;
}

a.jabacus-card,
a:hover.jabacus-card {
	display: block;
	text-decoration: none;
}

.jabacus-card-title {
	font-size: 1.3em;
	margin-bottom: 0.75em;
	color: #142142;
}

.jabacus-card-subtitle {
	font-size: 1.1em;
	margin-bottom: 0.5em;
	color: #142142;
}

/* subscriptions */
.jabacus-subscriptions {
	margin: 0 0 2rem;
	padding: 0 2rem;
	display: flex;
	gap: 2rem;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
}

.jabacus-subscribe-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 300px;
	max-width: 25%;
	padding: 3rem;
}

.jabacus-subscribe-card-highlight {
	background-color: rgba(168, 168, 168, 0.125);
}

.jabacus-subscribe-plan {
	display: flex;
	gap: 1rem;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.jabacus-subscribe-plan-name {
	font-size: x-large;
	flex: 1;
}

.jabacus-subscribe-plan-label {
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	height: fit-content;
	font-size: small;
	font-weight: bold;
	color:#0a94d6;
	background-color: #ffffff;
	border: 1px inset #0a94d6;
	border-radius: 3px;
}

.jabacus-subscribe-pricing {
	display: flex;
	gap: 2rem;
	flex-direction: column;
	align-self: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.jabacus-subscribe-price {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 1rem;
	flex: 1;
	line-height: 1;
}

/* subscribe info */
.jabacus-subscribe-info {
	margin-bottom: 2rem;
}

/* quantity input */
.jabacus-subscribe-quantity {
	width: 60px;
	text-align: center;
	font-size: medium;
}

/* pricing toggle */
.jabacus-pricing-toggle-container {
	position: sticky;
	top: 56px;
	background-color: #fff;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	overflow-x: auto;
}

.jabacus-pricing-toggle-container > div {
	flex: 1;
	margin: 0 auto 1rem;
	padding-bottom: 1rem;
}

.jabacus-pricing-toggle {
	display: flex;
	justify-content: center;
	cursor: pointer;
	width: fit-content;
	user-select: none;
}

.jabacus-pricing-period {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	font-size: medium;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.jabacus-pricing-period:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

.jabacus-pricing-period:last-child {
	gap: 2rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: none;
}

.jabacus-pricing-period.on span.material-icons-outlined {
	color: #0a94d6;
}

.jabacus-pricing-period:first-child.on {
	border: 1px solid #0a94d6;
}

.jabacus-pricing-period:last-child.on {
	border: 1px solid #0a94d6;
}

/* savings label */
.jabacus-pricing-savings {
	color: #0a94d6;
	background-color: rgba(168, 168, 168, 0.125);
	border: 1px solid rgba(168, 168, 168, 0.125);
	border-radius: 4px;
	font-weight: bold;
	font-size: smaller;
	padding: 0.25rem 0.5rem;
}

/* pricing table */
.jabacus-pricing-table {
	margin-bottom: 0;
	width: 100%;
	min-width: 960px;
}

/* hide free sign-up */
.jabacus-pricing-table-hide-free th:nth-child(2),
.jabacus-pricing-table-hide-free td:nth-child(2) {
	display: none;
}

/* cells */
.jabacus-pricing-table tr > th,
.jabacus-pricing-table tr > td {
	text-align: center;
	vertical-align: middle !important;
}

/* body cell */
.jabacus-pricing-table tbody > tr > td {
	font-size: medium;
}

/* first body cell */
.jabacus-pricing-table tbody > tr > td:first-child {
	text-align: left;
	width: max-content;
	vertical-align: top !important;
}

/* calc card */
.calc-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-height: var(--calc-card-size);
	font-size: var(--calc-card-font-size);
	padding: 0.5em 0;
	background-color: #f3f3f3;
	border: 1px solid #dddddd;
	border-radius: 5px;
}

.card-col-2 {
	grid-column: span 2;
}

.calc-card-header {
	padding: 0 0.5em;
	padding-bottom: 0.25em;
}

.calc-card-header .material-icons-outlined {
	display: block;
	font-size: 36px;
}

.calc-card-title {
	font-size: 1.05em;
}

.calc-card-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.25em 0.5em;
}

.calc-card-footer {
	align-items: center;
	padding: 0 0.5em;
	padding-top: 0.25em;
}

.calc-card a,
.calc-card a:hover {
	display: block;
	text-decoration: none;
}

/* pinned */
.card-layout.pinned {
	margin-bottom: 0;
}
.card-layout.pinned .calc-card {
	border: 1px solid #a8a8a8;
}

.card-layout.pinned .calc-card:hover {
	box-shadow: 2px 2px 3px #a8a8a8;
}

/* recent */
.card-layout.recent {
	margin-bottom: 1em;
}

/* dark calc card */
.jabacus-card-dark .calc-card {
	border: 1px solid #a8a8a8;
}

.jabacus-card-dark .calc-card-footer {
	border-top: 1px solid #a8a8a8;
}

/* page layout with menu */
.jabacus-page-layout {
	overflow-y: auto;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"layoutMenu layoutHeader"
		"layoutMenu layoutMain";
}

.jabacus-layout-menu {
	grid-area: layoutMenu;
	overflow-y: auto;
	resize: horizontal;
	width: min-content;
	min-width: 250px;
	max-width: 30vw;
}

.jabacus-layout-header {
	grid-area: layoutHeader;
	overflow-y: auto;
}

.jabacus-layout-main {
	grid-area: layoutMain;
	overflow-y: auto;
}

.jabacus-layout-actions {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.jabacus-layout-actions .icon-link {
	justify-content: center;
	margin-bottom: 0;
	font-size: small;
	background-color: white;
}

/* projects */
.projects-page {
	padding: 0 1.5rem;
	position: relative;
}

.projects-heading {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	font-size: x-large;
	position: sticky;
	top: 0;
	background-color: white;
}

.source-map-color {
	background-color: #fff;
	border-radius: 50%;
	border: 1px solid #777;
	margin: 0;
	margin-top: 4px;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
}

.project-menu-new {
	padding-bottom: 0.5rem;
	position: sticky;
	top: 0;
	background-color: white;
	margin-bottom: 0.5rem;
}

.project-menu-new .icon-link {
	justify-content: center;
	margin-bottom: 0;
	font-size: small;
	background-color: white;
}

.project-menu-items {
	position: relative;
	background-color: white;
}

.project-menu-item {
	margin-bottom: 1.5rem;
	padding: 0 0.5rem;
}

.project-menu-item .icon-link {
	font-size: medium;
	margin-bottom: 0;
	align-items: flex-start;
}

/* folder group */
.folder-group {
	position: relative;
	margin-bottom: 2rem;
}

.folder-group:last-child {
	margin-bottom: 3.5rem;
}

.muted-link {
	color: #777 !important;
}

.muted-link:hover {
	color: #055c85 !important;
}

/* team heading */
.project-team-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: sticky;
	top: 0;
	background-color: white;
	padding: 0.5rem 0;
	margin-bottom: 0.5rem;
	border-bottom: 2px solid transparent;
}

.project-team-heading .project-menu-item {
	margin: 0;
}

.project-team-heading .project-menu-item:last-child:not(:only-child) .icon-link {
	visibility: hidden;
}

.folder-group:hover .project-team-heading {
	border-color: #ddd;
}

.folder-group:hover .project-team-heading .project-menu-item:last-child .icon-link {
	visibility: visible;
}

.project-folder.icon-link {
	margin: 0.75rem 0;
	align-items: flex-end;
	max-width: fit-content;
}

.project-create-form {
	margin: 2rem;
	padding: 2rem;
	border: 1px solid #ddd;
	border-radius: 3px;
	min-width: max-content;
	max-width: 20vw;
}

.project-table {
	position: relative;
}

.project-table thead tr th {
	position: sticky;
	top: 0;
	background-color: #fff;
	z-index: 2;
}

.project-table thead th:after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	bottom: -1px;
	border-bottom: 2px solid #ddd;
}

.project-table th,
.project-table td {
	padding: 0.75rem !important;
}

.project-table th {
	font-weight: bold;
	padding: 1rem 0.75rem !important;
}

.project-table th,
.project-table td {
	border: none !important;
}

.project-table td {
	position: relative;
}

.project-table tr:not(.no-select) a {
	display: block;
	color: #000000;
}

.project-table tr:not(.no-select) a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.project-table tr:not(.no-select) a .icon-link {
	margin: 0;
}

.project-table tr:not(.no-select) a .material-icons-outlined {
	color: #0a94d6;
}

.project-alert {
	background: transparent;
	margin: 1.5rem 0;
	font-size: medium;
	width: fit-content;
	min-width: 25vw;
}

.project-alert-info {
	border-color: #0a94d6;
	color: #055c85;
}

.project-alert-warning {
	border-color: #e42b2b;
	color: #b22222;
}

/* locations */
.locations-page {
	padding: 0 1.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.location-create-container {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
}

.location-create-form {
	margin: 2rem;
	padding: 2rem;
	border: 1px solid #ddd;
	border-radius: 3px;
	min-width: max-content;
	max-width: 512px;
	width: 50vw;
}

.location-create-heading {
	font-size: large;
	margin-bottom: 1.375rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.location-create-type {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.location-create-type > label {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	font-weight: normal;
	cursor: pointer;
	user-select: none;
}

.location-create-type > label > input[type="radio"] {
	margin: 0;
}

.location-create-map-container {
	position: relative;
	min-width: 256px;
	width: 100%;
	height: 100%;
	margin: 2rem;
	margin-left: 0;
}

.location-create-map {
	min-height: 256px;
	height: calc(100% - 4rem);
}

.location-climatic-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	justify-content: flex-start;
	margin: 1rem 0;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 8px;
}

.location-climatic-container-dataset {
	flex: 1 1 33vw;
	display: block;
	height: fit-content;
	min-width: 300px;
	max-width: 400px;
}

.location-climatic-container-dataset-title {
	display: flex;
	justify-content: space-between
}

.location-climatic-dataset-section {
	font-weight: bold;
	margin-bottom: 1rem;
}

.location-climatic-form {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	max-width: 100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 6px 9px;
}

.location-climatic-form-checkbox {
	border: 0px solid #ddd;
	border-radius: 5px;
	padding: 0 1.375rem;
	margin: 0;
	user-select: none;
	width: fit-content;
}

.location-climatic-form-checkbox > label {
	display: block;
}

.location-climatic-h1 {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 1rem;
}

.location-climatic-h2 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 0.625rem;
}

.location-climatic-label {
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.location-climatic-new {
	color: #32cd32;
	font-weight: 600;
	font-size: small;
	padding: 0 4px;
	outline: 1px solid #32cd32;
	border-radius: 4px;
}

.location-climatic-caption {
	color: #222;
	font-size: 1.1em;
	font-weight: bold;
	padding-top: 0;
}

.location-climatic-table {
	margin: 0;
	max-width: 100%;
	border-bottom: 1px solid #ddd;
	table-layout: fixed;
}

.location-climatic-inputs {
	display: grid;
	gap: 1rem;
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* location map overlay */
#locationMapContainer .location-map-overlay {
	visibility: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 10;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* address mapbox geocoder */
.address-inputs .mapboxgl-ctrl-geocoder {
	width: 100%;
	min-width: 100%;
	box-shadow: none;
	border-radius: 0;
}
.address-inputs .mapboxgl-ctrl-geocoder--input {
	width: 100%;
	min-width: 100%;
	height: 30px;
	border: 1px solid #0000FF;
}
.address-inputs .mapboxgl-ctrl-geocoder--input:focus {
	outline: 1px solid blue;
}
.address-inputs .mapboxgl-ctrl-geocoder--button {
	width: auto;
}
.address-inputs .mapboxgl-ctrl-geocoder--icon {
	top: 5px;
}
.address-inputs .mapboxgl-ctrl-geocoder--icon-close {
	margin-top: 0;
}
.address-inputs .mapboxgl-marker {
	pointer-events: none;
}

/* teams */
a.team-member-remove {
	display: flex !important;
	gap: 0.5rem;
	align-items: center;
	width: fit-content;
	color: #aaa !important;
}

a.team-member-remove .material-icons-outlined {
	color: #aaa !important;
}

a.team-member-remove:hover .material-icons-outlined,
a.team-member-remove:hover {
	color: #ff0000 !important;
}

/* user account menu */
.account-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0;
	min-height: 40vh;
	max-height: 100vh;
	overflow-y: auto;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 5px;
	box-shadow: 2px 2px 3px #5a5a5a;
	position: absolute;
	top: calc(1em + 36px);
	right: calc(0.5em + 24px);
	z-index: 10;
	opacity: 0;
	transform: scale(0.25);
	transform-origin: right top;
	pointer-events: none;
	user-select: none;
}

.account-menu.show-menu {
	opacity: 1;
	transform: scale(1);
	transition: opacity 250ms,
		transform 250ms;
	pointer-events: auto;
	user-select: auto;
}

.account-menu:hover {
	box-shadow: 2px 2px 3px #5a5a5a;
}

.account-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0.5em 1em;
	border-bottom: 1px solid #dddddd;
}

.account-menu-header > div {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.account-menu-header > div:first-child {
	margin-right: 2em;
}

.account-menu-header > div > div:not(:last-child) {
	margin-right: 0.6em;
}

.account-menu-header-links a:not(:last-child) {
	margin-right: 0.4em;
}

.account-menu-username {
	font-size: larger;
	line-height: 1.2;
	white-space: nowrap;
}

.account-menu-username small {
	display: block;
	overflow-x: hidden;
	text-overflow: ellipsis;
	max-width: min(200px, 25vw);
}

.account-menu-body {
	flex: 1;
	overflow-y: auto;
	padding: 1em;
}

.account-menu-body .horizontal-rule {
	margin-bottom: 1em;
}

.account-menu-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #dddddd;
	padding: 0.5em 1em;
}

.account-menu-footer a:last-child > span.material-icons-outlined {
	margin-right: 0;
}

.account-menu-body > a:last-child,
.account-menu-footer > a {
	margin-bottom: 0;
}

/* apps menu */
.apps-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0;
	min-height: 20vh;
	max-height: 100vh;
	overflow-y: auto;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 5px;
	box-shadow: 2px 2px 3px #5a5a5a;
	position: absolute;
	top: calc(1em + 36px);
	left: calc(0.5em + 24px);
	z-index: 10;
	opacity: 0;
	transform: scale(0.25);
	transform-origin: left top;
	pointer-events: none;
	user-select: none;
}

.apps-menu.show-menu {
	opacity: 1;
	transform: scale(1);
	transition: opacity 250ms,
		transform 250ms;
	pointer-events: auto;
	user-select: auto;
}

.apps-menu:hover {
	box-shadow: 2px 2px 3px #5a5a5a;
}

.apps-menu-body {
	flex: 1;
	overflow-y: auto;
	padding: 1em;
	padding-top: 2em;
}

.apps-menu-body .horizontal-rule {
	margin-bottom: 1em;
}

.jabacus-page-header nav > div.nav-links .apps-menu-body > a {
	margin-bottom: 1rem;
}

/* jabacus modal */
dialog.jabacus-modal {
	display: flex;
	flex-direction: column;
	background-color: #f8f8f8;
	border: 2px solid #f8f8f8;
	border-radius: 5px;
	padding: 0;
	width: 75vw;
	max-width: 695px;
	max-height: 60vh;
}

dialog.jabacus-modal:not([open]) {
	display: none !important;
}

dialog.jabacus-modal::backdrop {
	backdrop-filter: grayscale(100%) brightness(50%);
}

dialog.jabacus-modal .jabacus-modal-header {
	font-size: x-large;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #eee;
	padding: 1rem;
	border-bottom: 1px solid #ccc;
}

dialog.jabacus-modal .jabacus-modal-header .jabacus-modal-title {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	color: #055c85;
}

dialog.jabacus-modal .jabacus-modal-body {
	overflow-y: auto;
}

dialog.jabacus-modal .jabacus-modal-body > p {
	font-size: medium;
	padding: 0 1rem;
	margin-bottom: 1.5rem;
}

dialog.jabacus-modal .jabacus-modal-footer {
	font-size: large;
	margin: 0;
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	align-items: center;
	background-color: #eee;
	padding: 1rem;
	border-top: 1px solid #ccc;
}

dialog.jabacus-modal .jabacus-modal-footer a {
	color: #fff;
}

/* user profile page */
.profile-header {
	margin-bottom: 1.5rem;
}

.profile-container {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0 1rem;
}

.profile-menu {
	font-size: large;
}

.profile-menu > a {
	margin-bottom: 1.5rem;
}

.profile-columns {
	flex: 1;
	position: relative;
	width: 100%;
	margin-bottom: 1.5rem;
	border-left: 2px solid #ddd;
	padding-left: 1rem;
	min-height: 200px;
}

.profile-columns > div {
	flex: 1;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	min-width: 320px;
	max-width: 500px;
	padding: 0 1rem;
	margin-bottom: 1rem;
}

.profile-form {
	flex: 1;
	margin-bottom: 1rem;
}

.profile-form > h3 {
	margin-top: 0;
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
}

.form-error {
	color: #b22222;
}

.profile-agree-to-terms,
.profile-verify-email,
.profile-error {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #ddd;
}

.profile-error {
	font-size: large;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	padding: 0 0.5rem 1rem;
}

.profile-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	color: #0a94d6;
}

.profile-alert {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	padding: 0 0.5rem;
}

/* user registration */
.register-tos {
	margin: 0;
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	user-select: none;
}

/* admin */
table.admin-subscriptions thead tr > th {
	font-weight: bold;
	padding-top: 0;
}

a.subscription-cancel {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	width: fit-content;
	color: #aaa;
}

a.subscription-cancel:hover {
	color: #ff0000;
}

/* assembly weight calculator */
.container-deadload {
	grid-column-start: 1;
	grid-column-end: 3;
	width: 100%;
}

.panel-deadload {
	overflow-x: auto;
}

.table.table-deadload tbody tr:not(:last-child) td {
	height: 53px;
}

.table.table-deadload th {
	padding: 0.5rem 1rem !important;
	font-weight: bold;
}

.table.table-deadload td {
	padding: 0.75rem 1rem !important;
	vertical-align: middle;
}

.table.table-deadload tbody tr td .remove-material {
	visibility: hidden;
	user-select: none;
}

.table.table-deadload tbody tr:hover td .remove-material {
	visibility: visible;
}

.table.table-deadload thead tr:nth-child(2) th {
	width: 10rem
}

.form-control.category-material {
	min-width: 150px;
}
.form-control.deadload-number {
	min-width: 8rem;
	margin: 0 auto;
}
.form-control.deadload-quantity,
.form-control.deadload-unit {
	min-width: 7rem;
	margin: 0 auto;
}

/* material list */
.container-materials {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 0;
	margin-bottom: 20px;
}

.container-materials > div {
	margin-bottom: 1rem;
}

.container-materials .materials-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0 1rem;
}

.container-materials .materials-search {
	 padding: 0 1rem;
}

.deadload-materials {
	padding: 0 1rem;
}

.table.table-materials thead tr th,
.table.table-materials tbody tr td {
	vertical-align: middle;
}

.table.table-materials thead tr th {
	font-weight: bold;
}

.deadload-materials-row td:nth-child(1) div {
	visibility: hidden;
}

.deadload-materials-row:hover td:nth-child(1) div {
	visibility: visible;
}

/* material added */
@keyframes add-material-to-assembly {
	0% {
		transform: scale(1, 1);
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	100% {
		transform: scale(3, 3);
		opacity: 0;
	}
}

.table.table-materials tbody tr td:first-child {
	position: relative;
}

.table.table-materials tbody tr td:first-child::before {
	font-family: 'Material Icons Outlined';
	font-size: 24px;
	font-weight: bold;
	color: #0a94d6;
	content: "\e876";
	pointer-events: none;
	position: absolute;
	opacity: 0;
}

.table.table-materials tbody tr.added td:first-child::before {
	animation: add-material-to-assembly;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	transform-origin: center;
}