@font-face {
	font-family: "Unbounded";
	font-display: swap;
	font-weight: 100 900;
	src: url("/static/fonts/Unbounded-Variable.woff2") format('woff2-variations');
}

:root {
	--bs-primary: #A78BFA;
	--bs-primary-hsl: 255, 92%, 76%;
	--bs-primary-text-emphasis-hsl: var(--bs-primary-hsl);
	--bs-heading-font-weight: 600;
	--bs-kbd-padding: 0.25rem 0.375rem;
	--bs-kbd-bg: var(--bs-action-bg);
	--bs-kbd-color: var(--bs-body-color);
	--bs-form-focus-border-color: var(--bs-primary);
}

[data-bs-theme=light] {
	/*--bs-primary: #8874C6;*/
	--bs-primary: #765bc9;
	--bs-link-color: color-mix(in srgb, var(--bs-primary) 70%, black);
	--bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 50%, black);
	--bs-basic-btn-hover-bg: color-mix(in srgb, var(--bs-body-bg) 95%, black);
	--bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-body-bg) 90%, black);
	--bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-body-bg) 92%, black);
	--bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-body-bg) 87%, black);
	--bs-border-color: var(--bs-lightgray-500);
	--bs-btn-active-bg: var(--bs-basic-btn-active-bg);
	--bs-primary-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, var(--bs-body-color));
	--bs-primary-active-bg: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color));
	--bs-primary-foreground: var(--bs-body-bg);
	--bs-btn-primary-color: var(--bs-primary-foreground);
	--bs-btn-primary-bg: var(--bs-primary);
}

[data-bs-theme=dark] {
	--bs-btn-primary-bg: #765bc9;
	--bs-btn-primary-color: #fff;
	--bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 70%, white);
	--bs-basic-btn-hover-bg:color-mix(in srgb, var(--bs-body-bg) 95%, white);
	--bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-body-bg) 90%, white);
	--bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-body-bg) 92%, white);
	--bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-body-bg) 87%, white);
	--bs-border-color: var(--bs-dark-600);
	--bs-border-color-dark: hsl(var(--bs-sable-hue), var(--bs-sable-saturation), 19.5%);
	--bs-btn-active-bg: var(--bs-basic-btn-active-bg);
	--bs-primary-hover-bg: color-mix(in srgb, var(--bs-btn-primary-bg) 90%, var(--bs-body-bg));
	--bs-primary-active-bg: color-mix(in srgb, var(--bs-btn-primary-bg) 70%, var(--bs-body-bg));
	--bs-primary-foreground: var(--bs-body-bg);
	/*--bs-body-bg: #181818;*/
}

[data-bs-theme="light"] .list-group {
	--bs-list-group-action-hover-bg: hsla(var(--bs-black-hsl), 0.02);
	--bs-list-group-action-active-bg: hsla(var(--bs-black-hsl), 0.05);
}

[data-bs-theme="dark"] .list-group {
	--bs-list-group-action-hover-bg: hsla(var(--bs-white-hsl), 0.02);
	--bs-list-group-action-active-bg: hsla(var(--bs-white-hsl), 0.05);
}

kbd {
	border: 1px solid var(--bs-border-color);
}

.markdown-content img {
	border-radius: var(--bs-border-radius);
}

.markdown-content .task-list-item-checkbox {
	margin-right: .5em;
}

.markdown-content h1 {
	margin-bottom: 1rem;
}

.form-check-input {
	color: var(--bs-primary-foreground);
}

.no-arrow.dropdown-toggle::after {
	border: none;
	display: none;
}

.w-70 {
	width: 70% !important;
}

.btn-primary {
	--bs-btn-color: var(--bs-btn-primary-color);
	--bs-btn-bg: var(--bs-btn-primary-bg);
	--bs-btn-border-color: transparent !important;
	font-weight: 500;
}

.dropdown-item.active {
	background-color: var(--bs-btn-primary-bg) !important;
	color: #fff !important;
}
.active {
	color: var(--bs-body-color) !important;
}

.ff-default {
	font-family: var(--bs-font-sans-serif) !important;
}

a {
	color: var(--bs-link-color);
}
a:hover {
	--bs-link-color: var(--bs-link-hover-color);
}

pre code.hljs {
	tab-size: 4;
}

button.table {
	width: unset !important;
}

/*.tagify {
	--tags-disabled-bg: var(--bs-secondary-bg);
	--tags-border-color: var(--bs-border-color);
	--tags-hover-border-color: var(--bs-secondary);
	--tags-focus-border-color: var(--bs-primary);
	--tag-border-radius: var(--bs-border-radius);
	--tag-bg: var(--bs-tertiary-bg);
	--tag-hover: var(--bs-gray-bg-subtle);
	--tag-text-color: var(--bs-body-color);
	--tag-text-color--edit: var(--bs-body-color);
	--tag-pad: 0.25em 0.5em;
	--tag-inset-shadow-size: 1.2em;
	--tag-invalid-color: var(--bs-danger-text-emphasis);
	--tag-invalid-bg: var(--bs-danger-bg-subtle);
	--tag--min-width: 1ch;
	--tag--max-width: 100%;
	--tag-hide-transition: 0.3s;
	--tag-remove-bg: var(--bs-danger-bg-subtle);
	--tag-remove-btn-color: var(--bs-danger-text-emphasis);
	--tag-remove-btn-bg: none;
	--tag-remove-btn-bg--hover: var(--bs-danger);
	--tagify-dd-bg-color: var(--bs-tertiary-bg);
	--input-color: var(--bs-body-color);
	--placeholder-color: var(--bs-secondary-color);
	--placeholder-color-focus: var(--bs-tertiary-color);
	--loader-size: 0.8em;
	--readonly-striped: 1;
}*/

.fs-huge {
	font-size: 8.5rem;
}

.nav-tabs-bottom {
	.nav-link {
		transition: .2s;
	}
	.nav-link:hover {
		border-color: transparent;
		background-color: var(--bs-basic-btn-hover-bg);
	}
	.nav-link:focus, .nav-link.active {
		border-color: transparent;
		background-color: var(--bs-basic-btn-active-bg);
	}
	border-color: transparent;
}

.hljs {
	border-radius: var(--bs-border-radius);
	border: 1px solid var(--bs-border-color);
}

.mw-fit {
	max-width: fit-content !important;
}

.tags-look .tagify__dropdown__item {
	display: inline-block;
	border-radius: 3px;
	padding: .3em .5em;
	border: 1px solid #CCC;
	background: #F3F3F3;
	margin: .2em;
	font-size: .85em;
	color: black;
	transition: 0s;
}

.tags-look .tagify__dropdown__item--active {
	color: black;
}

.tags-look .tagify__dropdown__item:hover {
	background: lightyellow;
	border-color: gold;
}

.breadcrumb-arrow {
	--bs-breadcrumb-divider: '\E13A';
	display: flex;
	align-items: center;
}

.breadcrumb-arrow .breadcrumb-item::before {
	font-family: Phosphor;
	display: flex;
	align-items: center;
}

.breadcrumb-arrow {
	.breadcrumb-item {
		--bs-breadcrumb-item-padding-x: 0rem;
		display: flex;
		align-items: center;
	}
	.breadcrumb-item.active::before {
		color: var(--bs-body-color);
	}
}

.folder {
	color: orange !important;
}

.file {
	color: var(--bs-secondary-text-emphasis) !important;
}

.file[class*="image"], .file[class*="book"] {
	color: var(--bs-red-text-emphasis) !important;
}

.file[class*="video"] {
	color: var(--bs-blue-text-emphasis) !important;
}

.file[class*="audio"], .file[class*="music"] {
	color: var(--bs-pink-text-emphasis) !important;
}

.file[class*="archive"], .file[class*="package"] {
	color: var(--bs-amber-text-emphasis) !important;
}

.file[class*="archive tar"], .file[class*="coffee"] {
	color: var(--bs-orange-text-emphasis) !important;
}

.file[class*="brush"], .file[class*="figma"] {
	color: var(--bs-purple-text-emphasis) !important;
}

.file[class*="terminal"] {
	color: var(--bs-success-text-emphasis) !important;
}

tr .btn-basic:hover, tr .btn-basic:focus {
	background-color: var(--bs-basic-btn-hover-bg-strong) !important;
	color: var(--bs-body-color) !important;
}
tr .btn-basic:active {
	background-color: var(--bs-basic-btn-active-bg-strong) !important;
}

.list-group-flush a:hover {
	color: var(--bs-link-color);
}

.accordion {
	--bs-accordion-btn-focus-box-shadow: none;
}

.dropdown-toggle::after {
	content: '\E136';
	font-family: Phosphor;
	font-size: .75rem;
/*	color: var(--bs-body-color);*/
	font-weight: bold;
	vertical-align: unset;
	border: none !important;
}

.dropup .dropdown-toggle::after {
	content: '\E13C' !important;
}

.dropdown-menu {
	--bs-dropdown-min-width: 8.25rem;
	--bs-dropdown-padding-x: .4rem;
	--bs-dropdown-padding-y: .4rem;
	--bs-dropdown-item-padding-x: .5rem;
	/*--bs-dropdown-item-padding-y: .4rem;*/
}

.htmx-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	height: 3px;
	width: 100%;
	border-radius: 2px;
}
.htmx-progress .indeterminate {
	background-color: var(--bs-primary);
}
.htmx-progress .indeterminate:before {
	content: "";
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.htmx-progress .indeterminate:after {
	content: "";
	position: absolute;
	background-color: inherit;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
	infinite;
	animation-delay: 1.15s;
}
.htmx-progress {
	display: none;
}
.htmx-request .htmx-progress {
	display: inline;
}
.htmx-request.htmx-progress {
	display: inline;
}

@keyframes indeterminate {
	0% {
		left: -35%;
		right: 100%;
	}
	60% {
		left: 100%;
		right: -90%;
	}
	100% {
		left: 100%;
		right: -90%;
	}
}

@keyframes indeterminate-short {
	0% {
		left: -200%;
		right: 100%;
	}
	60% {
		left: 107%;
		right: -8%;
	}
	100% {
		left: 107%;
		right: -8%;
	}
}


.alert {
	border-radius: 30px;
	--bs-alert-padding-y: .4rem;
}

footer .icon-link .ph {
	font-size: 24px;
}
footer .icon-link {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-basic {
	color: var(--bs-body-color);
}

.btn-basic:hover, .btn-basic:focus {
	background-color: var(--bs-basic-btn-hover-bg);
}
.btn-basic:active {
	background-color: var(--bs-basic-btn-active-bg) !important;
}
.btn-basic:hover, .btn-basic:focus, .btn-basic:active {
	color: var(--bs-body-color) !important;
	border-color: transparent !important;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active,
.btn[aria-expanded=true] {
	border-color: transparent;
	background-color: var(--bs-btn-active-bg) !important;
}

.btn {
	transition: .2s;
}

.form-control-lg {
	padding: .7em 1em;
	font-size: var(--bs-body-font-size);
}

th[aria-sort] {
	background-color: var(--bs-secondary-bg-subtle);
}

.navbar {
	background-color: var(--bs-content-bg);
	border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);
}

.alert .btn-close {
	margin-right: .25rem;
}

.form-control::placeholder {
	color: hsl(215.1, 21.3%, 48.8%);
}

.form-group-icon label {
	padding: .5em .6em;
	cursor: text;
}

.form-group-icon input {
	padding-inline: 2.5em;
}

input:autofill {
	border-color: transparent;
}
