/* ==========================================================================
   Firmao Customer Panel - theme
   Tokens from the Figma file "Firmao - look&feel" (dWD8zYkbhEUO7f2WtigOEG)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');

/* ==========================================================================
   1. Design tokens (Figma Variables)
   ========================================================================== */

:root {
	/* -- text -- */
	--fx-text-heading: #121212;
	--fx-text-primary: #414141;
	--fx-text-secondary: #717171;
	--fx-text-placeholder: #a0a0a0;
	--fx-text-disabled: #b8b8b8;
	--fx-text-inverse: #f9fafc;

	/* -- action -- */
	--fx-action-primary: #1e4ed7;
	--fx-action-primary-hover: #1a44ba;
	--fx-action-primary-active: #163a9e;
	--fx-icon-default: #7895e7;

	/* -- surfaces -- */
	--fx-bg-surface: #ffffff;
	--fx-bg-page: #f9fafc;
	--fx-bg-surface-accent: #f2f6ff;
	--fx-bg-surface-secondary: #f3f3f3;
	--fx-bg-selected: #dae3fb;

	/* -- borders -- */
	--fx-border-default: #e7e7e7;
	--fx-border-light: #f3f3f3;
	--fx-border-strong: #a0a0a0;
	--fx-border-accent: #a5b8ef;
	--fx-border-primary-button: #4b71df;

	/* -- status -- */
	--fx-status-success-text: #267f03;
	--fx-status-success-bg: #e9fbe2;
	--fx-status-error-text: #8a0505;
	--fx-status-error-bg: #ffefef;
	--fx-status-info-text: #0f276c;
	--fx-status-online: #38bc03;
	--fx-status-notification: #f15757;

	/* -- typography -- */
	--fx-font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system,
		BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fx-line-height: 1.3;
	--fx-font-size-heading: 1.5rem;
	--fx-font-size-button: 1rem;
	--fx-font-size-body: 0.875rem;
	--fx-font-size-label: 0.75rem;

	/* -- radius -- */
	--fx-radius: 0.5rem;
	--fx-radius-sm: 0.375rem;
	--fx-radius-pill: 62.5rem;

	/* -- elevation -- */
	--fx-shadow-table: 0 0 24px rgba(0, 29, 114, 0.10), 0 1px 6px rgba(0, 0, 0, 0.12);
	--fx-shadow-dropdown: 0 2px 12px rgba(0, 0, 0, 0.20);
}

/* ==========================================================================
   2. Bootstrap remap
   ========================================================================== */

:root {
	--bs-primary: var(--fx-action-primary);
	--bs-primary-rgb: 30, 78, 215;

	--bs-body-bg: var(--fx-bg-page);
	--bs-body-color: var(--fx-text-primary);
	--bs-body-font-family: var(--fx-font-family);
	--bs-body-font-size: var(--fx-font-size-body);
	--bs-body-line-height: var(--fx-line-height);

	--bs-emphasis-color: var(--fx-text-heading);
	--bs-secondary-color: var(--fx-text-secondary);
	--bs-border-color: var(--fx-border-default);
	--bs-border-radius: var(--fx-radius);
	--bs-border-radius-sm: var(--fx-radius-sm);
	--bs-border-radius-lg: var(--fx-radius);

	--bs-link-color: var(--fx-action-primary);
	--bs-link-color-rgb: 30, 78, 215;
	--bs-link-hover-color: var(--fx-action-primary-hover);
	--bs-link-hover-color-rgb: 26, 68, 186;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body {
	font-family: var(--fx-font-family);
	font-size: var(--fx-font-size-body);
	line-height: var(--fx-line-height);
	color: var(--fx-text-primary);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--fx-text-heading);
	font-weight: 600;
	line-height: var(--fx-line-height);
}

/* ==========================================================================
   4. Chrome — top navigation
   ========================================================================== */

header {
	background-color: var(--fx-bg-surface);
}

header .navbar.bg-dark {
	background-color: var(--fx-bg-surface) !important;
	border-bottom: 1px solid var(--fx-border-default);
	padding-top: 0;
	padding-bottom: 0;
	min-height: 3.5rem;
}

header .navbar .navbar-brand {
	color: var(--fx-text-heading);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.01em;
}

header .navbar .navbar-brand:hover {
	color: var(--fx-text-heading);
}

header .navbar .navbar-brand .brandLogo {
	height: 2.25rem;
	width: auto;
	display: block;
}

header .navbar .nav-link {
	color: var(--fx-text-secondary);
	font-size: var(--fx-font-size-body);
	padding: 1.125rem 0.75rem;
	border-bottom: 2px solid transparent;
}

header .navbar .nav-link:hover,
header .navbar .nav-link:focus {
	color: var(--fx-text-heading);
}

header .navbar .nav-link.active {
	color: var(--fx-action-primary);
	font-weight: 600;
	border-bottom-color: var(--fx-action-primary);
}

header .navbar .navbar-toggler {
	border-color: var(--fx-border-default);
	color: var(--fx-text-primary);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2865, 65, 65, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

header .navbar .dropdown-toggle {
	color: var(--fx-text-primary);
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

footer {
	color: var(--fx-text-primary);
	font-size: var(--fx-font-size-body);
	padding-bottom: 1.5rem;
}

/* ==========================================================================
   6. Card
   ========================================================================== */

.card {
	--bs-card-bg: var(--fx-bg-surface);
	--bs-card-color: var(--fx-text-primary);
	--bs-card-border-color: transparent;
	--bs-card-border-radius: var(--fx-radius);
	--bs-card-inner-border-radius: var(--fx-radius);
	--bs-card-cap-bg: var(--fx-bg-surface);
	--bs-card-cap-color: var(--fx-text-heading);
	--bs-card-spacer-x: 1.5rem;
	--bs-card-spacer-y: 1rem;
	--bs-card-cap-padding-x: 1.5rem;
	--bs-card-cap-padding-y: 1.25rem;
	box-shadow: var(--fx-shadow-table);
}

.card > .card-header {
	border-bottom: 0;
}

.list-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.list-header > *:first-child {
	margin-right: auto;
}

.list-header > .d-flex {
	flex-grow: 1;
}

@media (max-width: 767.98px) {
	.list-header > .d-flex {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
}

.list-header .card-title {
	color: var(--fx-text-heading);
	font-size: var(--fx-font-size-heading);
	font-weight: 600;
	line-height: var(--fx-line-height);

	margin-top: 0;
	margin-bottom: 0;
	height: auto;
	overflow: visible;
	flex-shrink: 0;
}

.card.table-card > .card-body {
	padding: 0;
}

.card.table-card .table > thead tr:first-child > *:first-child {
	border-top-left-radius: var(--fx-radius);
}

.card.table-card .table > thead tr:first-child > *:last-child {
	border-top-right-radius: var(--fx-radius);
}

.table-wrapper.table-wrapper-popout {
	overflow: visible;
}

@media (max-width: 767.98px) {
	.table-wrapper.table-wrapper-popout {
		overflow-x: auto;
	}
}

.card > .card-header .card-title {
	color: var(--fx-text-heading);
	font-size: var(--fx-font-size-heading);
	font-weight: 600;
	line-height: var(--fx-line-height);
	margin-bottom: 0;
}

/* ==========================================================================
   7. Tables
   ========================================================================== */

.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--fx-text-primary);
	--bs-table-border-color: var(--fx-border-default);
	--bs-table-striped-bg: transparent;
	--bs-table-striped-color: var(--fx-text-primary);
	--bs-table-hover-bg: var(--fx-bg-surface-accent);
	--bs-table-hover-color: var(--fx-text-primary);
	font-size: var(--fx-font-size-body);
	vertical-align: middle;
	margin-bottom: 0;
}

.table > thead {
	vertical-align: middle;
}

.table > thead th,
.table > thead td {
	background-color: var(--fx-bg-surface-accent);
	color: var(--fx-text-primary);
	font-size: var(--fx-font-size-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-bottom: 0;
	height: 2.5rem;
	padding: 0 0.5rem;
	white-space: nowrap;
}

.table > tbody td {
	height: 2.5rem;
	padding: 0 0.5rem;

	border-bottom-color: var(--fx-bg-surface-accent);
}

.table > tbody tr:last-child td {
	border-bottom-color: transparent;
}

a.table-header-with-sort {
	color: var(--fx-text-primary) !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--fx-font-size-label);
	letter-spacing: 0.02em;
}

a.table-header-with-sort i {
	width: auto;
	opacity: 0.45;
}

a.table-header-with-sort:hover {
	color: var(--fx-text-heading) !important;
}

a.table-header-with-sort.current,
a.table-header-with-sort.current i {
	color: var(--fx-action-primary) !important;
	opacity: 1;
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.btn {
	--bs-btn-border-radius: var(--fx-radius);
	--bs-btn-font-weight: 600;
}

.btn-sm {
	--bs-btn-font-size: var(--fx-font-size-label);
}

.btn-primary {
	--bs-btn-border-radius: var(--fx-radius-pill);
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--fx-action-primary);
	--bs-btn-border-color: var(--fx-border-primary-button);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--fx-action-primary-hover);
	--bs-btn-hover-border-color: var(--fx-action-primary-hover);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--fx-action-primary-active);
	--bs-btn-active-border-color: var(--fx-action-primary-active);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--fx-border-accent);
	--bs-btn-disabled-border-color: var(--fx-border-accent);
	--bs-btn-focus-shadow-rgb: 30, 78, 215;
}

.btn-outline-primary {
	--bs-btn-color: var(--fx-action-primary);
	--bs-btn-border-color: var(--fx-border-default);
	--bs-btn-hover-color: var(--fx-action-primary);
	--bs-btn-hover-bg: var(--fx-bg-surface-accent);
	--bs-btn-hover-border-color: var(--fx-border-accent);
	--bs-btn-active-color: var(--fx-action-primary);
	--bs-btn-active-bg: var(--fx-bg-selected);
	--bs-btn-active-border-color: var(--fx-border-accent);
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

.form-control,
.form-select {
	background-color: var(--fx-bg-surface);
	border-color: var(--fx-border-default);
	border-radius: var(--fx-radius);
	color: var(--fx-text-primary);
	font-size: var(--fx-font-size-body);
	padding: 0.5rem 0.75rem;
}

.form-control::placeholder {
	color: var(--fx-text-placeholder);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--fx-border-accent);
	box-shadow: 0 0 0 0.2rem rgba(30, 78, 215, 0.12);
}

.form-control:disabled,
.form-select:disabled {
	background-color: var(--fx-bg-surface-secondary);
	color: var(--fx-text-disabled);
}

.form-label,
form .form-label {
	color: var(--fx-text-secondary);
	font-size: var(--fx-font-size-label);
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.form-check-input:checked {
	background-color: var(--fx-action-primary);
	border-color: var(--fx-action-primary);
}

.form-check-input:focus {
	border-color: var(--fx-border-accent);
	box-shadow: 0 0 0 0.2rem rgba(30, 78, 215, 0.12);
}

.input-group-text {
	background-color: var(--fx-bg-surface);
	border-color: var(--fx-border-default);
	color: var(--fx-text-secondary);
	font-size: var(--fx-font-size-body);
}

/* ==========================================================================
   10. Status badge
   ========================================================================== */

.alert.status-badge {
	border: 0;
	border-radius: var(--fx-radius-pill);
	padding: 0.15rem 0.6rem;
	font-size: var(--fx-font-size-label);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.alert.status-badge i {
	font-size: 0.5rem;
	vertical-align: middle;
	margin-right: 0.15rem;
}

.alert.status-badge.alert-success {
	background-color: var(--fx-status-success-bg);
	color: var(--fx-status-success-text);
}

.alert.status-badge.alert-warning {
	background-color: var(--fx-bg-surface-accent);
	color: var(--fx-action-primary);
}

.alert.status-badge.alert-danger {
	background-color: var(--fx-status-error-bg);
	color: var(--fx-status-error-text);
}

.alert.status-badge.alert-secondary {
	background-color: var(--fx-bg-surface-secondary);
	color: var(--fx-text-secondary);
}

.status-pill {
	display: inline-block;
	border-radius: var(--fx-radius-pill);
	padding: 0.15rem 0.6rem;
	font-size: var(--fx-font-size-label);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.status-pill::before {
	content: '';
	display: inline-block;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	margin-right: 0.375rem;
	vertical-align: middle;
	background-color: currentcolor;
}

.status-pill.text-success {
	background-color: var(--fx-status-success-bg);
	color: var(--fx-status-success-text) !important;
}

.status-pill.text-danger {
	background-color: var(--fx-status-error-bg);
	color: var(--fx-status-error-text) !important;
}

/* ==========================================================================
   11. Alerts (the real ones)
   ========================================================================== */

.alert {
	--bs-alert-border-radius: var(--fx-radius);
	border: 0;
	font-size: var(--fx-font-size-body);
}

.alert-success {
	--bs-alert-bg: var(--fx-status-success-bg);
	--bs-alert-color: var(--fx-status-success-text);
}

.alert-danger {
	--bs-alert-bg: var(--fx-status-error-bg);
	--bs-alert-color: var(--fx-status-error-text);
}

/* ==========================================================================
   12. Pagination
   ========================================================================== */

.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--fx-font-size-body);
	color: var(--fx-text-secondary);
}

.pager-input {
	font-weight: 600;
	width: 3.25rem;
	padding: 0.1rem 0.35rem;
	text-align: center;
	font-size: var(--fx-font-size-body);
	color: var(--fx-text-secondary);
	background-color: var(--fx-bg-surface);
	border: 1px solid var(--fx-border-default);
	border-radius: var(--fx-radius-sm);
}

.pager-input:focus {
	outline: none;
	border-color: var(--fx-border-accent);
	box-shadow: 0 0 0 0.2rem rgba(30, 78, 215, 0.12);
}

.pager-total {
	font-weight: 600;
	margin-right: 0.25rem;
}

.pager-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--fx-border-default);
	border-radius: 50%;
	background-color: var(--fx-bg-surface);
	color: var(--fx-text-primary);
	font-size: 0.7rem;
}

.pager-arrow:hover {
	border-color: var(--fx-border-accent);
	background-color: var(--fx-bg-surface-accent);
	color: var(--fx-action-primary);
}

.pager-arrow.disabled {
	color: var(--fx-border-default);
	pointer-events: none;
}

/* ==========================================================================
   13. Dropdown
   ========================================================================== */

.dropdown-menu {
	--bs-dropdown-border-color: var(--fx-border-default);
	--bs-dropdown-border-radius: var(--fx-radius);
	--bs-dropdown-font-size: var(--fx-font-size-body);
	--bs-dropdown-color: var(--fx-text-primary);
	--bs-dropdown-link-color: var(--fx-text-primary);
	--bs-dropdown-link-hover-bg: var(--fx-bg-surface-accent);
	--bs-dropdown-link-hover-color: var(--fx-action-primary);
	--bs-dropdown-link-active-bg: var(--fx-bg-selected);
	--bs-dropdown-link-active-color: var(--fx-action-primary);
	--bs-dropdown-padding-y: 0.375rem;
	box-shadow: var(--fx-shadow-dropdown);
}

/* ==========================================================================
   14. List group (account sidebar)
   ========================================================================== */

.list-group {
	--bs-list-group-border-color: var(--fx-border-default);
	--bs-list-group-border-radius: var(--fx-radius);
	--bs-list-group-color: var(--fx-text-primary);
	--bs-list-group-bg: var(--fx-bg-surface);
	--bs-list-group-action-hover-bg: var(--fx-bg-surface-accent);
	--bs-list-group-active-bg: var(--fx-bg-selected);
	--bs-list-group-active-border-color: var(--fx-border-accent);
	--bs-list-group-active-color: var(--fx-action-primary);
}

/* ==========================================================================
   15. View refinements
   ========================================================================== */

/* -- Search field (products, patients) ------------------------------------ */
.product-search {
	flex: 0 1 17rem;
	min-width: 12rem;
	max-width: 17rem;
}

.product-search .form-control,
.product-search .btn {
	border-radius: var(--fx-radius);
}

.product-search .form-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.product-search .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.product-search .form-control {
	border-color: var(--fx-border-light);
	border-right: 0;
	font-size: var(--fx-font-size-label);
}

.product-search .form-control::placeholder {
	color: var(--fx-text-placeholder);
}

.product-search .btn {
	border: 1px solid var(--fx-border-light);
	border-left: 0;
	background-color: var(--fx-bg-surface);
	color: var(--fx-text-placeholder);
}

.product-search .btn:hover {
	color: var(--fx-action-primary);
}

.product-search .form-control:focus {
	box-shadow: none;
}

.product-search:focus-within .form-control,
.product-search:focus-within .btn {
	border-color: var(--fx-border-accent);
}

.objects-table .product-icon-box {
	margin: 0.375rem 0;
}

.row.main-content {
	position: relative;
}

/* -- Product grid --------------------------------------------------------- */
.row.main-content.product-grid-content {
	justify-content: center;
}

.product-list {
	row-gap: 1.5rem;
	margin-top: 0;
	padding-bottom: 1em;
}

.product-list > * {
	margin-top: 0;
}

.list-header .setting-container {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.list-header .setting-container i {
	padding-right: 0.5rem;
	color: var(--fx-text-secondary);
}

.list-header select.sort {
	min-width: 11rem;
	max-width: 200px;
	font-size: var(--fx-font-size-label);
	border-color: var(--fx-border-light);
}

.product-list .card-title {
	font-size: var(--fx-font-size-body);
	font-weight: 600;
	color: var(--fx-text-heading);
	margin: 0;
	height: 3.6em;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-list .card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--fx-bg-surface);
	border-top: 1px solid var(--fx-border-light);
}

.product-list .card-footer .price {
	font-size: var(--fx-font-size-button);
	font-weight: 600;
	color: var(--fx-text-heading);
	line-height: 1.2;
}

.product-list .card-footer .price-note {
	font-size: var(--fx-font-size-label);
	font-weight: 400;
	color: var(--fx-text-secondary);
}

.product-list .card-footer .btn.add-to-cart {
	padding: 0.35rem 0.75rem;
	font-size: var(--fx-font-size-body);
	flex-shrink: 0;
}

/* -- Product type filter -------------------------------------------------- */
#typesMenu h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--fx-text-heading);
	margin-bottom: 0.75rem;
}

#typesMenu .form-check label {
	font-size: var(--fx-font-size-body);
	color: var(--fx-text-primary);
	cursor: pointer;
}

.objects-table td.qty-cell {
	white-space: nowrap;
}

.objects-table td.qty-cell .quantity,
.objects-table td.qty-cell .btn-add,
.objects-table td.qty-cell .btn-inc,
.objects-table td.qty-cell .btn-dec {
	vertical-align: middle;
}

/* -- Stacked columns on mobile -------------------------------------------- */
@media (max-width: 767.98px) {
	.user-sidebar,
	#typesMenuInlineWrapper {
		margin-bottom: 1rem;
	}
}

@media (max-width: 575.98px) {
	.details > .col-sm {
		margin-bottom: 1rem;
	}
}

/* -- Cart delivery date --------------------------------------------------- */
#order-delivery-date-wrapper {
	margin-top: 1.25rem;
}

/* -- Card footer ---------------------------------------------------------- */
.card > .card-footer {
	background-color: var(--fx-bg-surface);
	border-top: 1px solid var(--fx-border-light);
}

/* -- Ticket detail -------------------------------------------------------- */
.details .card-header .card-title.ticket-ref {
	font-size: var(--fx-font-size-body);
	font-weight: 400;
	color: var(--fx-text-disabled);
	margin-bottom: 0.15rem;
}

.details .card-header .card-title.ticket-ref small {
	font-size: inherit;
}

.details .card-header h5 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--fx-text-primary);
	margin-bottom: 0;
}

/* -- Ticket detail meta panel --------------------------------------------- */
.meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.5rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--fx-border-default);
}

.meta-label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--fx-text-primary);
}

.meta-value {
	font-size: var(--fx-font-size-body);
	color: var(--fx-text-primary);
	text-align: right;
	min-width: 0;
}

.meta-value .attachment-lists,
.meta-value .attachment-list small {
	justify-content: flex-end;
}

.meta-value .status-badge {
	margin: 0;
}

/* -- Comment thread ------------------------------------------------------- */
.comments-container .title {
	color: var(--fx-text-secondary) !important;
	font-size: var(--fx-font-size-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.comments-container .comment .content .card {
	box-shadow: none;
	background-color: var(--fx-bg-surface-secondary);
}

.comments-container .comment.is-own .content .card {
	background-color: var(--fx-bg-surface-accent);
}

.comments-container .comment .content .card-body .meta {
	color: var(--fx-text-secondary) !important;
	font-size: var(--fx-font-size-label);
}

.comments-container .comment .avatar img,
.comments-container .comment .avatar i {
	border-color: var(--fx-border-default);
	background-color: var(--fx-bg-surface-secondary);
	color: var(--fx-text-secondary);
}

/* -- Account sidebar ------------------------------------------------------ */
.current-user-info .user-icon {
	background-color: var(--fx-bg-surface-accent);
	color: var(--fx-action-primary);
}

.current-user-info .card-title {
	color: var(--fx-text-heading);
	font-weight: 600;
}

/* -- Login / registration ------------------------------------------------- */
div.login-container.has-window-color,
div.registration-container {
	border-radius: var(--fx-radius);
	box-shadow: var(--fx-shadow-table);
}

div.login-container form h1 {
	color: var(--fx-text-heading);
	font-size: var(--fx-font-size-heading);
	font-weight: 600;
}

div.login-container form button[type=submit],
div.registration-container button[type=submit] {
	font-size: var(--fx-font-size-button);
	padding: 0.625rem 1rem;
	border-radius: var(--fx-radius);
}

.custom-file-upload {
	background-color: var(--fx-bg-surface);
	border: 1px solid var(--fx-border-default);
	border-radius: var(--fx-radius);
	color: var(--fx-text-primary);
}

.custom-file-upload:not(.btn) {
	padding: 0.375rem 0.75rem;
}

.custom-file-upload:hover {
	background-color: var(--fx-bg-surface-accent);
	border-color: var(--fx-border-accent);
}

.notched-field {
	position: relative;
}

.notched-field > .form-control {
	height: 3rem;
	padding: 0.75rem;
	font-size: var(--fx-font-size-button);
	color: var(--fx-text-heading);
}

.notched-field > label {
	position: absolute;
	top: 0;
	left: 0.75rem;
	transform: translateY(-50%);
	padding: 0 0.25rem;
	background-color: transparent;
	background-image: linear-gradient(
		to bottom,
		transparent 50%,
		var(--fx-bg-surface) 50%
	);
	font-size: var(--fx-font-size-label);
	font-weight: 600;
	line-height: 1;
	color: var(--fx-text-primary);
	pointer-events: none;
}

.notched-field:focus-within > label {
	background-image: linear-gradient(
		to bottom,
		transparent 50%,
		var(--fx-bg-page) 50%
	);
}

.input-group:focus-within .input-group-text {
	border-color: var(--fx-border-accent);
}

.register-btn a {
	color: var(--fx-text-secondary);
	font-weight: 600;
}

/* -- Error page ----------------------------------------------------------- */
body .card h1 {
	color: var(--fx-text-heading);
}

body .card h2,
body .card > div > p {
	color: var(--fx-text-secondary);
}

/* -- Loading mask --------------------------------------------------------- */
#mask .spinner-border {
	color: var(--fx-action-primary);
}