* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/*

MY OWN TABLER (BETA 19, 20, 21, 22, and v1.1.1, and v1.4.0) FIXES

*/

/* scrollbar styling broke by adding a left margin... see https://github.com/tabler/tabler/issues/2271 -- this might not be the right fix: */
:root {
	margin-left: 0;
}

/* that single-story "a" looks terrible IMO, so disable cv11. See all Inter font features here: https://rsms.me/inter/#features */
body {
	font-feature-settings: "liga" 0, "calt" 1, "cv03", "cv04";
}

/* vertical spacing fix... ? hopefully not bad; ca. Tabler beta 20 */
.row-cards {
	align-content: flex-start;
}

/* override tabler's .navbar-brand:hover style  */
.navbar h1.navbar-brand:hover {
	opacity: 1;
}

/* override tabler's style that removes spacing from before the down-arrow
  because it assumes it is on its own */
.dropdown-toggle-split::after {
	margin-left: 0.4em;
}

/* Tabler's default .input-group styles don't work well for
a textbox that has an icon in it, because it's contained in
a parent div. this takes care of that by removing the >. */
.input-group:not(.has-validation) :not(:last-child) :not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group :not(:first-child) :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* broke in v1.4 (clicking on items in Map view) */
.btn-actions {
	align-items: center;
}

/* broke sometime between Beta 22 and v1.1.1 */
.ts-wrapper.multi .ts-control > div {
	margin: 0;
	font-size: 12px;
	border: none; /* no idea why tabler adds a border... */
}
.ts-control {
	border: none;
	padding: 0;
	gap: 2px;
	line-height: inherit; /* for some reason, their default of 18px makes the multi and single controls different heights */
}
.ts-control input {
	min-width: 4rem;
	font-size: 14px;
}
.ts-control .item {
	margin: 0;
	border-radius: 4px;
}

/* the tabler-defined height of 1.25rem shifts alignment to be off when inputs are in a row - removing it equalizes heights and alignment of form elements */
.dropdown-item-indicator {
	height: inherit;
	margin-left: 0; /* this fixes the -.25rem value that causes images to be cut off */
}










.page::-webkit-scrollbar-track {
	margin-top: 56px !important;
}

.translucent {
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.translucent:not([data-bs-theme=dark]) {
	--tblr-navbar-bg: rgba(255, 255, 255, .75);
}

.container-xl {
	transition: max-width .75s cubic-bezier(0, 0, 0.2, 1); /* modified "ease-out" */
}

#page-content,
.filter-results {
	transition: opacity .2s linear;
}

#page-content.opacity0,
.filter-results.opacity0 {
	opacity: 0;
	pointer-events: none;
}

.thumbhash-container {
	display: grid;
	margin: 0 auto;
	max-height: inherit;
}

.thumbhash-container > * {
	grid-column: 1;
	grid-row: 1;
}

.thumbhash {
	width: 100%;
	background: black; /* when animated with "breathing" (the "radiate" keyframes), Chrome renders strange fade-to-white on bottom and right edges, unless bg is black */
}

/* Used to indicate something is loading/processing */
.breathing {
	animation: 3s ease-in 0s infinite radiate;
}
@keyframes radiate {
	50% { opacity: 0.65; }
}

.thumbhash-container .content {
	object-fit: contain;
	width: 100%;
}

.fade-in {
	animation: fadeIn 1s;
}

.fade-out {
	animation: reverse forwards fadeIn 1s;
	pointer-events: none;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.loader-supercontainer {
	position: relative;
	display: grid;
	height: 100%;
	overflow: hidden; /* mainly for rounded corners, so the sharp corners don't stick out */
	place-items: center;
	object-fit: cover;
}

.loader-supercontainer > * {
	grid-area: 1 / 1; /* the content and the loader are superimposed on each other, without position: absolute -- neat! now the container considers both elements' sizes */
}

.loader-container {
	padding: 1rem;
	place-self: stretch;
}

.loader-container-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: 100%;
}

.loader-container .loader {
	width: 50px;
	height: 50px;
}




.navbar h1.navbar-brand {
	position: relative;
	overflow: hidden;
}



header .logo {
	width: 140px;
	max-height: 1.5em;
}

.logo-dark {
	display: none;
}

[data-bs-theme=dark] .logo-light {
	display: none;
}

[data-bs-theme=dark] .logo-dark {
	display: block;
}

.navbar-minimal {
	background: rgba(233, 239, 244, .6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* TODO: I don't remember having to set this before...
	stolen from the .dark-theme .form-control styles,
	but I don't want to enable dark-theme on this header,
	since that affects dropdowns too - TODO: are these variables? 
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
	background-color: #1a2234;
	border-color: #243049;
}
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] .ts-control {
	color: #f8fafc;
}
.ts-wrapper {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
[data-bs-theme=dark] .ts-control {
	padding-top: inherit;
	padding-bottom: inherit;
	padding-right: inherit;
	padding: inherit inherit inherit 8px;
}
[data-bs-theme=dark] .ts-wrapper {
	width: 100px;
}
*/

/* my own addition to prevent wrapping when it's crucial to not get taller */
.ts-control.single-line {
	flex-wrap: nowrap;
	white-space: nowrap;
}

.ts-wrapper img {
	height: 1.5em;
	max-width: 1.5em;
}

.navbar .ts-wrapper {
	/* prevent tomselects from growing unbounded horizontally */
	width: 250px;
}

.dropdown-menu {
	max-height: 75vh;
	/* TODO: overflow-y: auto is needed here, but that breaks other dropdowns' overflow-x! (like the Timelinize dropdown menu) */
}

form .dropdown-menu {
	max-height: 300px;
	overflow: auto;
}

.dropdown-menu .dropdown-options .dropdown-item {
	min-width: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: small;
	text-align: center;
	display: block;
}

/* necessary after upgrading to Tabler v1.0.0-beta.21 -- not sure why though */
.icon {
	min-width: var(--tblr-icon-size);
}

/* This is needed to make date dropdowns fill the width, for some reason */
.filter .input-icon {
	flex: 1;
}




video {
	max-width: 100%;
}
audio {
	width: 100%;
}

.tl-item-media img,
.tl-item-media video,
.tl-item-media canvas {
	max-height: 250px;
}

.page-num-container {
	display: flex;
}


.avatar-xxs {
	--tblr-avatar-size: 1rem;
	background-color: transparent;
	box-shadow: none;
}

dfn {
	text-decoration: underline dashed;
}



.job-preview .icon {
	--tblr-icon-size: 3rem;
}


.dropdown-menu .recent-jobs-list {
	min-width: 450px;
}

/*
	My own modification to make dropdown toggling smooth and pleasant.
	TODO: This requires some work... it requires that all dropdowns are in a 'position: relative' container, and a few other nuances (like with responsive design, collapsed menubar, etc)
*/
/* .dropdown-menu:not(.ts-dropdown),
.navbar-nav .dropdown-menu {
	position: absolute;
	display: block;
	visibility: hidden;
	transition: all .2s;
	top: 100%;
	left: 0;
	opacity: 0;
	transform: scale(0.75) translateY(-30px);
}
.dropdown-menu-end,
.navbar-nav .dropdown-menu-end {
	right: 0;
	left: auto;
}
.dropdown-menu.show {
	visibility: visible;
	opacity: 1;
	transform: scale(1) translateY(0em);
} */



/* TODO: wish the z-index wasn't a problem */
/* .page-header-overlap::after {
	--wails-draggable: drag;
} */



label.dropdown-item,
.system-file-picker,
.system-folder-picker,
.dropdown-item,
.dropdown-toggle,
.nav-link,
.card-link,
.link-secondary,
a {
	cursor: pointer;
}





.input-group .form-select {
	width: auto;
	padding-left: 1rem;
}

.static-menu .dropdown-menu {
	display: inline-block;
	width: 100%;
	position: relative;
	top: 0;
	box-shadow: none;
	z-index: inherit; /* don't cover actual dropdowns */
}


.static-menu .dropdown-menu .dropdown-header {
	background: inherit;
	top: calc(-1 * var(--tblr-dropdown-padding-y));
	z-index: inherit;
}

.btn-dark {
	--tblr-btn-border-color: #485f7a;
}

.pagination .btn-list {
	align-items: center;
}

/* I think these buttons look better slightly taller */
.pagination .btn-list .btn {
	--tblr-btn-padding-y: .5rem;
}

/* for some reason, the disabled button looks taller next to its
regular, un-disabled counterpart; lightening the border and very
slightly reducing the padding makes a subtle improvement IMO */
.pagination .btn-list .btn.disabled {
	--tblr-btn-padding-y: .45rem;
	--tblr-btn-disabled-border-color: #a6a6a6;
}



/* surprised I have to say this tbh */
a.disabled {
	color: var(--tblr-text-secondary);
	pointer-events: none;
	cursor: default;
}


.emoji {
	font-family: "Twemoji Mozilla",
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji",
		"EmojiOne Color",
		"Android Emoji";
}

.message-reactions {
	margin-top: .5em;
	margin-bottom: -1em;
}

.message-reaction {
	cursor: default;
	background: var(--tblr-card-bg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
	font-size: 85%;
	border-radius: .5rem;
	padding: .5rem;
	margin-right: .25rem;
	line-height: .75;
}

.message-reaction .emoji {
	vertical-align: sub;
	font-size: 1.5em;
}



.file-picker .btn.dropdown-toggle {
	border-bottom-left-radius: 0;
}
.file-picker-path {
	border-bottom-right-radius: 0;
}

/*
File picker styles are designed so that the contents of the table have the vertical
scrollbar when there is an overflow-y. The table header is stickied. The downside
is that the scrollbar goes onto the table header, which is not strictly necessary,
but seeing as scrollbars take up horizontal space on most platforms, this actually
is a good thing since it keeps cells aligned.

To make the table body have the scrollbar, but not the table header, and not need
sticky for the header, enable these styles:

	.file-picker table {
		display: flex;
		flex-flow: column;
		width: 100%;
		height: 100%;
	}
	.file-picker table thead {
		flex: 0 0 auto;
	}
	.file-picker table tbody {
		flex: 1 1 auto;
		display: block;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.file-picker table tr {
		width: 100%;
		display: table;
		table-layout: fixed;
	}

However! Doing things this way will cause cells to be slightly disjoint from
their header cells, since the scrollbar has width which squishes the cells'
widths slightly (but not on touch platforms, presumably). It also causes cells
to stop auto-sizing based on the width of their contents; i.e. all cells are
the same width, which looks dumb and is less useful when one column, such as
filename, almost always need the maximum width possible.

So, for simplicity and the benefits described, I've decided to not use these
styles. But it took hours to figure them out!
*/
#modal-file-picker .modal-body,
#modal-timeline-folder .modal-body {
	min-height: 0;
	display: flex;
}
.file-picker {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.file-picker thead th {
	position: sticky;
	top: 0;
}







.file-picker-table {
	user-select: none;
	background: var(--tblr-bg-forms);
	border: 1px solid var(--tblr-border-color);
	border-top: 0;
}

.file-picker-table tr:hover {
	background: rgba(var(--tblr-primary-rgb), .04);
}

.file-picker-table tr.selected {
	background: var(--tblr-indigo);
	color: var(--tblr-light);
}

.file-picker-table thead th {
	position: sticky;
}

.file-picker-table td {
	word-wrap: anywhere;
}

.file-picker-table td:nth-child(2),
.file-picker-table td:nth-child(3) {
	white-space: nowrap;
}

.file-picker-up {
	cursor: pointer;
}









.content {
	display: block;
}

.rounded {
	overflow: hidden; /* prevent pointy corners from sticking out past the border-radius; IMO tabler should do this, but they use simple background-image */
}

.card-img-top .content, .card-img-bottom .content, /* images */
.card-img-top.content, .card-img-bottom.content { /* videos */
	object-fit: cover;
	width: 100%;
}


/* TODO: still working on this */
.map-container {
	display: flex;
	flex: 1;
}
#map {
	flex: 1;
}

.minidisp-media {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-content: stretch;
}

.minidisp-media > a {
	flex: 1;
}

.minidisp-media > a > * {
	min-width: 180px;
	max-width: 100%;
	width: 100%;
}

.minidisp-media video {
	object-fit: cover;
}

.minidisp-media .thumbhash {
	max-height: inherit;
	height: 100%;
}

.minidisp-media .thumbhash-container {
	margin: 0;
}

.minidisp-media .thumbhash-container .content {
	height: 100%;
	object-fit: cover;
}

.minidisp-media-xl .thumbhash-container,
.minidisp-media-xl .content {
	max-height: 500px;
}
.minidisp-media-xl > a > * {
	width: auto;
}
.minidisp-media-l .thumbhash-container,
.minidisp-media-l .content {
	max-height: 350px;
}
.minidisp-media-m .thumbhash-container,
.minidisp-media-m .content {
	max-height: 250px;
}




/*
	THE FOLLOWING STYLES WERE REMOVED FROM TABLER 1.0 BETA 17.
	THESE ARE TAKEN FROM BETA 16 UNTIL (IF?) WE CAN MOVE TO THE NEW SETUP.
	TRACK THIS ISSUE: https://github.com/tabler/tabler/issues/1462
*/
.list-timeline {
	position: relative;
	padding: 0;
	margin: 0;
	list-style: none;
}

.list-timeline .list-timeline-card-item:not(.list-timeline-date-card) {
	position: relative; /* the sticky time is sticky through the scrolling of the card */
	margin-bottom: 1.5rem;
	z-index: 1; /* above the timeline line thingie, but below the date sticky -- this becomes the sticky time's z-index since this is its relative ancestor */
}

.list-timeline-icon {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: #fff;
	text-align: center;
	background: var(--tblr-muted);
	border-radius: 100rem;
}

.list-timeline-icon .icon {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
}

.list-timeline-content {
	margin-left: 3.5rem;
}

.list-timeline {
	/* See https://github.com/w3c/csswg-drafts/issues/2496 - there doesn't seem to be a way
	to have multiple levels of stickies (not siblings) that don't overlap, but a hack is to
	make sure the first level stickies all have the same height and then set the top of the
	second level stickies to that height */
	--date-height: 60px;
}

.list-timeline-date-anchor {
	position: relative; /* the date sticky scrolls through all the items in this container */
}

.list-timeline-time-container {
	float: right;
	margin-left: 1rem;
	color: var(--tblr-muted);
	height: 100%;
}

/* because the date and time elements are sticky, we have to be careful
what we position relative since the next relative ancestor needs to be
the one that it is stuck to when scrolling */
.list-timeline-date {
	font-size: 110%;
	font-weight: bold;
	padding-top: 10px;
	color: var(--tblr-body-color);
	position: sticky;
	top: 0;
	height: var(--date-height);
	background-color: var(--tblr-body-bg);
	z-index: 2; /* on top of time that should slide underneath it */
}

.list-timeline-time {
	position: sticky;
	top: var(--date-height);
}

@media screen and (min-width: 768px) {
	.list-timeline:not(.list-timeline-simple)::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(7.5rem + 2px);
		z-index: 1;
		display: block;
		width: 2px;
		content: "";
		background-color: var(--tblr-border-color);
	}

	.list-timeline:not(.list-timeline-simple) .list-timeline-card-item {
		min-height: 40px;
	}

	.list-timeline:not(.list-timeline-simple) .list-timeline-date-card {
		min-height: 80px;
	}

	.list-timeline:not(.list-timeline-simple) .list-timeline-icon {
		top: 0;
		left: 6.5rem;
	}

	.list-timeline:not(.list-timeline-simple) .list-timeline-content {
		padding: .625rem 0 0 10rem;
		margin: 0;
	}

	.list-timeline:not(.list-timeline-simple) .list-timeline-time-container {
		position: absolute;
		top: .5rem;
		left: 0;
		width: 5.5rem;
		margin: 0;
		text-align: right;
	}
}
/* END STYLES RESTORED FROM TABLER BETA 16 */


/* when displaying a timeline outside of a card, and instead showing individual items
	within a card, the card creates extra padding/whitespace that we need to account
	for, since it kind of requires elements next to the card to move down a little to
	better align with its content: 1rem down works well
*/
.list-timeline:not(.list-timeline-simple):before {
	top: 1rem;
	width: 3px;
	--tblr-border-color: #c3d3d9;
	left: calc(10.25rem + 2px);
	z-index: 0; /* must be behind the timeline elements */
}

.list-timeline:not(.list-timeline-simple) .list-timeline-card-item .list-timeline-time-container {
	top: 1.75rem;
}

.list-timeline:not(.list-timeline-simple) .list-timeline-card-item .list-timeline-icon {
	top: 1rem;
}


/* we made the timeline icons a bit bigger and gave more space for the time display */
@media screen and (min-width:768px) {
	.list-timeline-icon {
		width: 3rem;
		height: 3rem;
	}
	.list-timeline-icon .icon {
		width: 1.5rem;
		height: 1.5rem;
	}
	.list-timeline:not(.list-timeline-simple) .list-timeline-icon {
		left: 9rem;
	}
	.list-timeline:not(.list-timeline-simple) .list-timeline-content {
		padding: .75rem 0 0 13.5rem;
	}
	.list-timeline:not(.list-timeline-simple) .list-timeline-time-container {
		width: 8rem;
	}
}

.message-content {
	word-break: break-word;
}









.paper {
	background: white;
	padding: 1.5em 2em;
}

.paper-fold {
	position: relative;
	background: linear-gradient(-150deg, transparent 1.5em, #fff 0);
	border-radius: 8px;
	box-shadow: 0 10px 13px -13px rgba(0, 0, 0, 0.25)
}

.paper-fold::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(to left bottom, #fff0 50%, rgb(255, 255, 255) 0, rgb(239, 239, 239)) no-repeat 100% 0;
	box-shadow: -10px 10px 15px -5px rgba(0,0,0,.15);
	width: 1.73em;
	height: 3em;
	transform: translateY(-1.3em) rotate(-30deg);
	transform-origin: bottom right;
	border-bottom-left-radius: inherit;
}

iframe {
	width: 100%;
}





/* a ribbon on the top-left of a card can cover some of the
   card-body, so this class adds a slight margin to avoid that */
.margin-for-ribbon-top-left {
	margin-left: 40px;
}








#app-loader {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	background: rgb(243 243 243);
	backdrop-filter: blur(10px); /* NB: this breaks z-index of dropdowns, esp. when combined with the navbar-overlap layout... */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999; /* gahhh why does bootstrap/tabler use z-index on everything!? */
}

/* From https://cssloaders.github.io/ */
#app-loader .app-loader,
.slow-loader {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: relative;
	margin: 50px auto;
	animation: loaderRotate 1s linear infinite;
}
.modal-body .slow-loader {
	margin: 25px auto;
}
#app-loader .app-loader::before,
#app-loader .app-loader::after,
.slow-loader::before,
.slow-loader::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 5px solid var(--tblr-link-color);
	animation: loaderPrixClipFix 2s linear infinite alternate;
}
#app-loader .app-loader::after,
.slow-loader::after {
	border-color: var(--tblr-tertiary-color);
	animation: loaderPrixClipFix 2s linear infinite alternate, loaderRotate 0.5s linear infinite reverse;
	inset: 6px;
}
@keyframes loaderRotate {
	0%   {transform: rotate(0deg)}
	100% {transform: rotate(360deg)}
}
@keyframes loaderPrixClipFix {
	0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
	25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
	50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
	75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
	100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}



















.air-datepicker {
	/* TODO: this could be a problem if a modal is opened while a separate datepicker is open */
	z-index: 1056; /* one more than --tblr-modal-zindex */
}
.air-datepicker-buttons {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
}
.air-datepicker-button {
	height: auto;
	padding: 10px 5px;
	flex: 1;
	min-width: 45%;
}


.noUi-base,
.noUi-handle {
	cursor: pointer;
}





.page-header .tl-date-picker,
.navbar .tl-date-picker {
	min-width: 300px;
}







#alert-container {
	position: fixed;
	z-index: 1021; /* .sticky-top is 1020... */
	top: 65px;
	right: 0;
	padding-left: 1em;
	padding-right: 1em;
	width: 100%;
	max-width: 400px;
}

.alert-timer-progress-bar-container {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	grid-column: auto !important;
	overflow: hidden;
	border-bottom-right-radius: 8px;
}

.alert-timer-progress-bar {
	display: flex;
	width: 100%;
	height: 3px;
	background: rgba(0, 0, 0, .2);
}

.alert-show {
	animation: alert-toast-show 500ms;
}
.alert-hide {
	animation: alert-toast-hide 250ms forwards;
}

@keyframes alert-toast-show {
	0%   { transform: translateY(-0.625em) rotateZ(2deg); }
	33%  { transform: translateY(0) rotateZ(-2deg); }
	66%  { transform: translateY(0.3125em) rotateZ(2deg); }
	100% { transform: translateY(0) rotateZ(0deg); }
}
@keyframes alert-toast-hide {
	100% {
		transform: scale(.4);
		opacity: 0;
	}
}

/* Tabler 1.1/1.2 changed alert styles, and I don't like it exactly. If
there's no description/message, it expects you to not use .alert-heading
either; i.e. you either use both .alert-heading and .alert-description
or neither, but that makes building dynamic alerts like we do a little
more tedious. Our alerts always have a "heading", but not always a
description. To simplify my code, I'm swapping which tag has the margin.
This way, we only add space below a heading if a description is present.
*/
.alert-heading {
	margin-bottom: 0;
}
.alert-description {
	margin-top: .25rem;
}