index.scss

@charset "utf-8";

@use "src/bootstrap/scss/bootstrap.scss";

@use "src/components/annotated_number.scss";
@use "src/components/context_menu.scss";
@use "src/components/nav_onesheet_tabs.scss";
@use "src/components/tag.scss";
@use "src/components/progress_bar/ticked.scss";
@use "src/system/dnd5e/components/ability/score.scss";
@use "src/system/dnd5e/components/glyph.scss";

html {
	//height: 100%;
}
body {
	//display: flex;
	//flex-direction: column;
}
.page-root {
	flex-grow: 1;
	> .view-scaler {
		//height: 100%;
		display: flex;
		flex-direction: column;
	}
}

.dropdown-item.disabled, .dropdown-item:disabled {
	color: #adb5bd75;
}
option:disabled {
	color: var(--bs-gray-600);
}

// Scroll Bar
::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
	background-color: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-thumb {
	background-color: rgba(20, 20, 20, 1);
	border-radius: 10px;
}

.text-block {
	white-space: pre-line;
}
.v-visible {
	visibility: visible!important;
}
.v-collapse {
	visibility: collapse!important;
}
.v-hidden {
	visibility: hidden!important;
}

.table-compact > :not(caption) > * > * {
	padding: 3px 3px;
}

.tooltip-inner {
	max-width: fit-content;
}
.attributed-tooltip > span {
	display: block;
	font-size: 12px;
}

.sheet-header {
	> .identity {
		font-weight: 800;
		> .name {
			font-size: 20px;
		}
		> .pronouns {
			font-size: 14px;
			font-weight: var(--bs-body-font-weight);
		}
	}
	> .group {
		font-size: 14px;
	}
	> .level {
		font-size: 14px;
	}
}

.proficiency-section {
	border-style: solid;
	border-color: var(--bs-border-color);
	border-width: 0;
	border-bottom-width: var(--bs-border-width);
	margin-bottom: 0.5rem;
	padding-bottom: 0.25rem;
}
.proficiency-section > h6 {
	font-size: 0.8rem;
	color: var(--bs-card-title-color);
	margin-bottom: 0.15rem;
}
.proficiency-section span.proficiencies {
	font-size: 14px;
}

.border-bottom-theme-muted {
	border-bottom: var(--bs-border-width) var(--bs-border-style) var(--theme-frame-color-muted)!important;
}
.btn-theme {
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #fff;
	
	--bs-btn-bg: var(--theme-frame-color);
	--bs-btn-hover-bg: var(--theme-frame-color-muted);
	--bs-btn-active-bg: var(--theme-frame-color);
	--bs-btn-disabled-bg: var(--theme-frame-color-muted);

	--bs-btn-border-color: var(--theme-frame-color);
	--bs-btn-hover-border-color: var(--theme-frame-color);
	--bs-btn-active-border-color: var(--theme-frame-color);
	--bs-btn-disabled-border-color: var(--theme-frame-color-muted);

	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-outline-theme {
	--bs-btn-color: var(--theme-frame-color);
	--bs-btn-border-color: var(--theme-frame-color);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--theme-frame-color);
	--bs-btn-hover-border-color: var(--theme-frame-color);
	--bs-btn-focus-shadow-rgb: 13,110,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--theme-frame-color);
	--bs-btn-active-border-color: var(--theme-frame-color);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--theme-frame-color);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--theme-frame-color);
	--bs-gradient: none;
}

[data-bs-theme=light] * {
	--theme-healing: #40d250;
}
[data-bs-theme=dark] * {
	--theme-healing: #00c797;
}
[data-bs-theme=light] * {
	--theme-damage: #d24040;
}
[data-bs-theme=dark] * {
	--theme-damage: #c53131;
}

[data-bs-theme=light] label.theme-healing {
	color: #40d250;
}
[data-bs-theme=dark] label.theme-healing {
	color: #00c797;
}
[data-bs-theme=light] input.theme-healing {
	border-color: #40d250;
}
[data-bs-theme=dark] input.theme-healing {
	border-color: #00c797;
}
[data-bs-theme=light] label.theme-damage {
	color: #d24040;
}
[data-bs-theme=dark] label.theme-damage {
	color: #c53131;
}
[data-bs-theme=light] input.theme-damage {
	border-color: #d24040;
}
[data-bs-theme=dark] input.theme-damage {
	border-color: #c53131;
}

.hr {
	display: block;
	width: 100%;
	border-style: solid;
	border-width: 0;
	border-bottom-width: var(--bs-border-width);
	border-color: var(--theme-frame-color-muted);
}

.tags.scroll-content:last-child {
	margin-bottom: 0;
}
.tags.scroll-content .tag {
	margin-bottom: 0;
}
.tag.defense .icon {
	width: 12px;
	height: 12px;
}
.details.defense .defense-section .icon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	margin-bottom: 0.25rem;
}

button.add:before, button.sub:before {
	background-image: url(https://www.dndbeyond.com/Content/Skins/Waterdeep/images/sprites/plus_minus-white.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	display: block;
}
button.add:before {
	background-position: 0 0;
}
button.sub:before {
	background-position: -17px 0;
}

.details.hit-points button.hp-action {
	margin-left: 0.8rem!important;
	margin-right: 0.8rem!important;
	padding-top: 0.7rem!important;
	padding-bottom: 0.7rem!important;
}
.details.hit-points button.hp-action:before {
	height: 16px;
	width: 16px;
}
.details.hit-points .heal {
	color: var(--theme-healing);
}
.details.hit-points .damage {
	color: var(--theme-damage);
}
.details.hit-points .heal .new-hp-header {
	color: var(--theme-healing);
}
.details.hit-points .damage .new-hp-header {
	color: var(--theme-damage);
}

.death-save-icon {
	display: block;
	background-position-x: 3px;
	background-position-y: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	height: 40px;
	width: 40px;
}
[data-bs-theme=light] .death-save-icon {
	background-image: url(https://www.dndbeyond.com/Content/Skins/Waterdeep/images/icons/conditions/unconscious.svg);
}
[data-bs-theme=dark] .death-save-icon {
	background-image: url(https://www.dndbeyond.com/Content/Skins/Waterdeep/images/icons/conditions/white/unconscious.svg);
}
.death-save-label {
	color: var(--bs-heading-color);
	font-weight: 500;
}
.card.hit-points {
	height: 80px;
	
	> .card-body {
		padding: 5px 5px;
	}
}
.card.hit-points .death-saves input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 1px 2px 1px 2px;
	background-size: 16px;
}
.details.hit-points .death-saves input[type="checkbox"] {
	width: 40px;
	height: 40px;
	margin: 1px 0px 1px 0px;
	background-size: 30px;
}
.details.hit-points .death-saves input[type="checkbox"]:not(:last-child) {
	margin-right: 10px;
}
input[type="checkbox"].failure:checked {
	--bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='height: 512px; width: 512px;'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M407.406 22.53c-9.832.353-19.334 5.774-25.03 18C310.03 195.818 206.43 320.097 49.405 373.47c-59.39 20.186-15.982 92.874 47.094 47.092-53.34 55.186 19.308 97.326 42.22 42.22 60.94-146.596 186.387-265.928 332.967-332.97 50.467-23.082 7.442-85.442-40.843-40.843 28.943-35.27 1.69-67.337-23.438-66.44zm-301.094.5c-24.643.51-50.094 31.967-21.78 66.47-48.286-44.598-91.28 17.76-40.813 40.844 63.846 29.2 123.663 68.308 175.905 115.28l25.25-25.25c-44.19-52-80.892-112.838-111.875-179.343-6.013-12.905-16.282-18.214-26.688-18zm188.344 249.032l-24.344 24.344c44.515 49.72 81.008 105.93 106.344 166.875 22.91 55.108 95.56 12.968 42.22-42.217 63.075 45.78 106.485-26.876 47.093-47.063-65.995-22.43-122.55-57.414-171.314-101.938z' fill='%23fff' fill-opacity='1'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	background-color: var(--theme-damage);
	border-color: var(--theme-damage);
}
input[type="checkbox"].success:checked {
	--bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='height: 512px; width: 512px;'%3E%3Cg transform='translate(0,0)'%3E%3Cpath d='M17.47 250.9C88.82 328.1 158 397.6 224.5 485.5c72.3-143.8 146.3-288.1 268.4-444.37L460 26.06C356.9 135.4 276.8 238.9 207.2 361.9c-48.4-43.6-126.62-105.3-174.38-137z' fill='%23fff' fill-opacity='1'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
	background-color: var(--theme-healing);
	border-color: var(--theme-healing);
}

input.slot[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px;
	--slot-color: var(--theme-frame-color);
}
input.slot[type="checkbox"].success {
	--slot-color: #198754;
}
input.slot[type="checkbox"]:checked {
	background-color: transparent;
	border-color: var(--slot-color);
	--bs-form-check-bg-image: "";
}
input.slot[type="checkbox"]:checked:before {
	display: block;
	content: "";
	background-color: var(--slot-color);
	
	width: 10px;
	height: 10px;

	margin: 5px auto 0;
	margin-top: 4px;
}

.pronouns-group .input-group-text:has(> input[type="checkbox"]:checked) {
	background-color: #0a5c13;
}

.selector {
	width: auto;
}
.missing-value {
	--bs-border-color: var(--bs-warning);
	--bs-btn-border-color: var(--bs-border-color);
}
.selector.missing-value {
	input:focus,select:focus {
		border-color: var(--bs-border-color);
		box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
	}
}

.wallet-inline > span:not(:last-child) {
	padding-right: 4px;
}

.accordion-item:not(:has(.accordion-body)) .accordion-button::after {
	visibility: hidden;
}
[data-bs-theme=light] .accordion-button:disabled {
	//background-color: rgba(239, 239, 239, 0.3);
	color: rgba(16, 16, 16, 0.3);
	//border-color: rgba(118, 118, 118, 0.3);
}
[data-bs-theme=dark] .accordion-button:disabled {
	//background-color: rgba(19, 1, 1, 0.3);
	color: rgba(255, 255, 255, 0.3);
	//border-color: rgba(195, 195, 195, 0.3);
}

.card.collapsable:first-of-type {
	border-top-left-radius: var(--bs-border-radius);
	border-top-right-radius: var(--bs-border-radius);
}
.card.collapsable:not(:first-of-type) {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
.card.collapsable:last-of-type {
	border-bottom-right-radius: var(--bs-border-radius);
	border-bottom-left-radius: var(--bs-border-radius);
}
.card.collapsable:not(:last-of-type) {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.card.collapsable:not(:first-of-type) {
	border-top: 0;
}
.card.collapsable:has(.collapse:not(.show):not(.collapsing)) .card-header {
	border-bottom: 0;
}
.card.collapsable .card-header > .arrow[role=button] {
	--bs-collapse-btn-width: 1.25rem;
	--bs-collapse-btn-icon-width: 1.25rem;
	--bs-collapse-btn-icon-transform: rotate(-180deg);
	--bs-collapse-btn-icon-transition: transform 0.2s ease-in-out;
	width: var(--bs-collapse-btn-width);
	height: var(--bs-collapse-btn-width);
	background-image: var(--bs-collapse-btn-icon);
	background-repeat: no-repeat;
	background-size: var(--bs-collapse-btn-icon-width);
	transition: var(--bs-collapse-btn-icon-transition);
	background-color: transparent;
	border: 0;
	padding: 0;
}
.card.collapsable .card-header > .arrow[role=button]:not(.collapsed) {
	background-image: var(--bs-collapse-btn-active-icon);
	transform: var(--bs-collapse-btn-icon-transform);
}
[data-bs-theme=light] .card.collapsable .card-header > .arrow[role=button] {
	--bs-collapse-btn-icon: url(assets/arrow/idle_light.svg);
	--bs-collapse-btn-active-icon: url(assets/arrow/active_light.svg);
}
[data-bs-theme=dark] .card.collapsable .card-header > .arrow[role=button] {
	--bs-collapse-btn-icon: url(assets/arrow/idle_dark.svg);
	--bs-collapse-btn-active-icon: url(assets/arrow/active_dark.svg);
}

.details.spells.browse {
	height: 600px;
	.footer {
		padding: 0.5rem;
		> .alert {
			flex-grow: 1;
			text-align: center;
			--bs-alert-padding-x: 0;
			--bs-alert-padding-y: 0;
		}
		> .alert:not(:last-child) {
			margin-right: 10px;
		}
	}
}
.spell-list > .spell > .header {
	display: inline-flex;
	width: 100%;

	> button.select {
		margin-left: auto;
		width: 85px;
	}

	> button.collapse_trigger > .spell_rank_suffix {
		color: var(--bs-gray-600);
		margin-left: 5px;
	}

	> button.collapse_trigger::before {
		margin-top: 3px;
	}
}
.modal.browse.objects .list > .section > .header {
	display: inline-flex;
	width: 100%;

	> button.collapse_trigger::before {
		margin-top: 3px;
	}

	> button.select {
		margin-left: auto;
		width: 85px;
	}
}
button.collapse_trigger {
	border: 0;
	padding: 0;
	background-color: transparent;
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
	color: var(--bs-body-color);
	display: inline-flex;
}
button.collapse_trigger.arrow_left::before {
	content: "";
	display: inline-block;
	--bs-collapse-btn-width: 1rem;
	--bs-collapse-btn-icon-width: 1rem;
	margin-right: 5px;
}
button.collapse_trigger.arrow_left::before, button.collapse_trigger.arrow_right::after {
	--bs-collapse-btn-width: 1.25rem;
	--bs-collapse-btn-icon-width: 1.25rem;
	--bs-collapse-btn-icon-transform: rotate(-180deg);
	--bs-collapse-btn-icon-transition: transform 0.2s ease-in-out;
	width: var(--bs-collapse-btn-width);
	height: var(--bs-collapse-btn-width);
	background-image: var(--bs-collapse-btn-icon);
	background-repeat: no-repeat;
	background-size: var(--bs-collapse-btn-icon-width);
	transition: var(--bs-collapse-btn-icon-transition);
}
button.collapse_trigger.arrow_left::before {
	background-image: var(--bs-collapse-btn-active-icon);
	transform: var(--bs-collapse-btn-icon-transform);
}
button.collapse_trigger.arrow_left.collapsed::before {
	background-image: var(--bs-collapse-btn-icon);
	transform: none;
}
button.collapse_trigger.arrow_right::after {
	background-image: var(--bs-collapse-btn-active-icon);
	transform: var(--bs-collapse-btn-icon-transform);
}
button.collapse_trigger.arrow_right.collapsed::after {
	background-image: var(--bs-collapse-btn-icon);
	transform: none;
}
[data-bs-theme=light] button.collapse_trigger {
	--bs-collapse-btn-icon: url(assets/arrow/idle_light.svg);
	--bs-collapse-btn-active-icon: url(assets/arrow/active_light.svg);
}
[data-bs-theme=dark] button.collapse_trigger {
	--bs-collapse-btn-icon: url(assets/arrow/idle_dark.svg);
	--bs-collapse-btn-active-icon: url(assets/arrow/active_dark.svg);
}

.btn-xs {
	--bs-btn-padding-y: 0px;
	--bs-btn-font-size: .75rem;
}

.source-path-sm {
	font-size: 10px;
	color: var(--bs-gray-600);
}

.action-budget {
	font-size: 14px;
	min-height: 23px;
}
.feature.short {
	font-size: 12px;
}
.feature.short > .title {
	font-size: 14px;
}
.feature.short > .subtitle {
	display: block;
	color: var(--bs-gray-600);
}
.feature.short .conditions > .title {
	min-width: 110px;
}
.feature.short .conditions > button {
	min-width: 60px;
}
.details.feature {
	font-size: 12px;
	> .description {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
}
.property {
	> strong {
		margin-right: 0.5rem;
	}
}
.feature:not(:last-child) {
	margin-bottom: 0.5rem!important;
	border-bottom: var(--bs-border-width) var(--bs-border-style) var(--theme-frame-color-muted)!important;
}

.item-add-amount {
	> .input-group-text.title {
		font-size: 14px;
		padding: 0.25rem 0.375rem;
		min-width: 115px;
	}
	> .input-group-text.spacer {
		padding: 0;
		width: 10px;
	}
	> input {
		padding: 0;
	}
	> button.dec {
		padding: 0 0.2rem;
	}
	> button.inc {
		padding: 0 0.2rem;
	}
	> .submit {
		font-size: 14px;
		padding: 0 0.375rem;
		width: 100px;
	}
}
.item-quantity-inline {
	display: inline-flex;
	width: 120px;
	
	> * {
		line-height: 15px;
		padding: 0;
	}

	> button {
		padding: 0.1rem 0.2rem;
	}
}

.uses:not(.consumer) {
	button.add, button.sub {
		padding: 0.3rem!important;
	}
	button.add:before, button.sub:before {
		height: 12px;
		width: 12px;
	}
	.deltaform {
		*:not(:last-child) {
			margin-right: 5px;
		}
	}
	.delta {
		margin-left: 10px;
	}
}

.spell-section {
	> .header {
		display: flex!important;
		border-bottom: var(--bs-border-width) var(--bs-border-style) var(--theme-frame-color-muted)!important;
		> .title {
			color: var(--theme-frame-color);
		}
		> .slots {
			margin-left: auto!important;
		}
	}
	> .empty-note {
		font-size: 14px;
	}
	.spell-row {
		display: flex;
		flex-wrap: wrap;

		width: 100%;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		
		border: 0;
		border-bottom-width: var(--bs-border-width);
		border-style: solid;
		border-color: var(--bs-border-color);

		> .cast-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 40px;
		}
		.name-and-source {
			display: flex;
			flex-direction: column;
			margin-left: 0.25rem;
			flex-grow: 1;

			> .source-row {
				max-width: 250px;
				font-size: 10px;
				color: var(--bs-gray-600);
			}
		}
		@media screen and (max-width: 1200px) {
			.name-and-source {
				// in order to have name+src & attributes be inline with each other for large view,
				// but stacked vertically via flex-wrap in small/mobile view,
				// we ensure that the name+src grow to fill the container (pushing attributes to the far right on large view),
				// and have a min-width so that attributes get pushed below on all mobile devices.
				min-width: 70%;
			}
		}
		> .attributes {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;

			--attribute-col-minwidth: 120px;
			--attribute-col-ms: 0.5rem;
			--attribute-col-totalwidth: calc(var(--attribute-col-minwidth) + var(--attribute-col-ms));
			--attribute-per-row: 3;
			max-width: calc(var(--attribute-per-row) * var(--attribute-col-totalwidth));
			
			> .attribute-row {
				display: flex;
				flex-direction: row;
			}

			.attribute {
				margin-left: var(--attribute-col-ms);
				display: flex;
    		align-items: baseline;
				min-width: var(--attribute-col-minwidth);
				font-size: 12px;
				> .label {
					margin-right: 0.25rem;
					font-size: 10px;
					color: var(--bs-gray-600);
				}
			}
		}
	}
	table > thead > tr {
		// Use button
		> th:nth-child(1) {
			width: 40px;
		}
		// Name
		> th:nth-child(2) {
			width: auto;
		}
		// Casting Time
		> th:nth-child(3) {
			width: 50px;
		}
		// Range
		> th:nth-child(4) {
			width: 80px;
		}
		// Hit / DC
		> th:nth-child(5) {
			width: 80px;
		}
		// Effect (text, damage roll, healing roll)
		> th:nth-child(6) {
			width: 60px;
		}
	}
}

.panel.spells > .caster-stats {
	> .names {
		text-align: center!important;
	}
	> .row {
		--bs-gutter-x: 0.5rem;
		margin-top: -5px;
		.stats {
			text-align: center!important;
			font-size: 15px;
		}
		.title {
			text-align: center!important;
			margin-top: -5px;
			font-size: 12px;
			font-weight: 600;
		}
	}
}

.panel.actions > .pane {
	overflow-y: auto;
	border-top: var(--bs-border-width) var(--bs-border-style) var(--theme-frame-color)!important;
}

@media screen and (min-width: 1200px)
{
	.panel.actions > .pane {
		padding-right: 1rem!important;
		height: 455px;
	}

	.panel.spells {
		> .caster-stats {
			margin: 0 8rem;
			height: 55px;
		}
		> .sections {
			padding-right: 1rem!important;
			overflow-y: auto;
			height: 460px;
		}
	}
	.panel.spells:has(> .caster-stats) > .sections {
		height: 400px;
	}

	.panel.inventory {
		display: flex;
		flex-direction: column;

		> .empty-prompt {
			flex-grow: 1;

			display: flex;
			flex-direction: column;
			
			justify-content: center;
			align-items: center;
			
			text-align: center;
		}

		> .sections {
			overflow-y: auto;
			height: 470px;
		}
	}

	.panel.description {
		overflow-y: auto;
		height: 510px;
		padding: 0 12px 5px 5px;
	}
}
@media screen and (max-width: 1200px)
{
	.panel.actions {
		margin-top: 0.5rem;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		> .pane {
			display: flex;
			flex-direction: column;
			flex-grow: 1;

			height: 0;
			padding-right: 0.25rem;
			overflow-y: auto;
		}
	}

	.panel.description {
		margin: 0.5rem!important;
	}
}

.paged-display {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
// All pages are always hidden
.paged-display > .page {
	display: none;
}
// unless the page is selected in the dropdown
$Pages: Abilities, Attributes, Features, Spells, Inventory, Description;
@each $Page in $Pages {
	.paged-display:has(> select > option[value="#{$Page}"][selected="selected"]) > .page##{$Page} {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
}

.spell-container .capacity .progress-ticked {
	--bar-height: 0.5rem;
	--tick-scale-x: 0.75;
	--tick-scale-y: 2.5;
	--bar-color: var(--theme-frame-color);
}

.context-menu .starting-equipment {
	display: flex;
	flex-direction: column;

	> .actions {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	> .body {
		flex-grow: 1;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		> .section-group {
			margin-right: 1.0rem;
			margin-bottom: 1.0rem;
		}
	}
	.section {
		display: flex;
		flex-direction: column;
		margin: 0.5rem 0 0.5rem 0.75rem;

		> .label {
			display: flex;
			flex-direction: row;
			margin-bottom: 0.25rem;
			> input[type="checkbox"] {
				margin-right: 0.5rem;
			}
		}
		
		.group {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: 0 0 0 0.75rem;

			> .section {
				margin: 0 0.25rem 0.25rem 0.25rem;
			}
		}
		.select-item {
			display: flex;
			flex-direction: row;
			> .content {
				display: flex;
				flex-direction: column;
				> select {
					width: auto;
				}
			}
		}

		.wallet > span {
			font-size: 1.25rem;
			> .glyph.currency {
				width: 25px;
				height: 25px;
				margin-bottom: -6px;
			}
		}
		.specific-item {
			display: flex;
		}
	}
}

.card.object-link.disabled {
	background-color: var(--bs-secondary-bg);
}
.card.object-link > .card-body {
	display: flex;
	padding: 0.5rem;
	align-items: center;
	
	.title, .subtitle {
		margin: 0;
	}

	> .btn:has(> .bi-chevron-right) {
		margin-left: 0.5rem;
		min-height: 25px;
	}
}
.card.object-link:hover > .card-body {
	> .btn:has(> .bi-chevron-right) {
		color: var(--bs-btn-hover-color);
		background-color: var(--bs-btn-hover-bg);
		border-color: var(--bs-btn-hover-border-color);
	}
}
.card.object-link:active > .card-body {
	> .btn:has(> .bi-chevron-right) {
		color: var(--bs-btn-active-color);
		background-color: var(--bs-btn-active-bg);
		border-color: var(--bs-btn-active-border-color);
	}
}

.navbar-brand.disabled {
	pointer-events: none;
}

.sync-status {
	.spinner-border {
		--bs-spinner-width: 40px;
    --bs-spinner-height: 40px;
    --bs-spinner-border-width: 0.3em;
    --bs-spinner-animation-speed: 1.75s;
	}
	.progress {
		height: 25px;
	}
	.progress-label-float {
		display: flex;
		justify-content: center;
		margin-top: -28px;
		font-size: 20px;
		color: #fff;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0px 0px 3px black;
	}
}

.card.module {
	.bi.bi-trash {
		color: var(--bs-danger);
	}
	.bi.bi-cloud-download {
		color: var(--bs-success);
	}
}