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

body {
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	text-rendering: optimizespeed;
	background-color: #f3f6f7;
	min-height: 100vh;
}

img,
svg {
	vertical-align: middle;
	z-index: 1;
}

img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 5px;
}

td img {
	max-width: 1.5em;
	max-height: 2em;
	object-fit: cover;
}

body,
a,
svg,
.layout.current,
.layout.current svg,
.go-up {
	color: #333;
	text-decoration: none;
}

.wrapper {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

header,
.meta {
	padding-left: 5%;
	padding-right: 5%;
}

td a {
	color: #006ed3;
	text-decoration: none;
}

td a:hover {
	color: #0095e4;
}

td a:visited {
	color: #800080;
}

td a:visited:hover {
	color: #b900b9;
}

th:first-child,
td:first-child {
	width: 5%;
}

th:last-child,
td:last-child {
	width: 5%;
}

.size,
.timestamp {
	font-size: 14px;
}

.grid .size {
	font-size: 12px;
	margin-top: .5em;
	color: #496a84;
}

header {
	padding-top: 15px;
	padding-bottom: 15px;
	box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
}

.breadcrumbs {
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
	color: #939393;
	margin-bottom: 5px;
	padding-left: 3px;
}

h1 {
	font-size: 20px;
	font-family: Poppins, system-ui, sans-serif;
	font-weight: normal;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	color: #c5c5c5;
}

h1 a,
th a {
	color: #000;
}

h1 a {
	padding: 0 3px;
	margin: 0 1px;
}

h1 a:hover {
	background: #ffffc4;
}

h1 a:first-child {
	margin: 0;
}

header,
main {
	background-color: white;
}

main {
	margin: 3em auto 0;
	border-radius: 5px;
	box-shadow: 0 2px 5px 1px rgb(0 0 0 / 5%);
}

.meta {
	display: flex;
	gap: 1em;
	font-size: 14px;
	border-bottom: 1px solid #e5e9ea;
	padding-top: 1em;
	padding-bottom: 1em;
}

#summary {
	display: flex;
	gap: 1em;
	align-items: center;
	margin-right: auto;
}

.filter-container {
	position: relative;
	display: inline-block;
	margin-left: 1em;
}

#search-icon {
	color: #777;
	position: absolute;
	height: 1em;
	top: .6em;
	left: .5em;
}

#filter {
	padding: .5em 1em .5em 2.5em;
	border: none;
	border: 1px solid #CCC;
	border-radius: 5px;
	font-family: inherit;
	position: relative;
	z-index: 2;
	background: none;
}

.layout,
.layout svg {
	color: #9a9a9a;
}

table {
	width: 100%;
	border-collapse: collapse;
}

tbody tr,
tbody tr a,
.entry a {
	transition: all .15s;
}

tbody tr:hover,
.grid .entry a:hover {
	background-color: #f4f9fd;
}

th,
td {
	text-align: left;
}

th {
	position: sticky;
	top: 0;
	background: white;
	white-space: nowrap;
	z-index: 2;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	padding: .75em 0;
}

td {
	white-space: nowrap;
}

td:nth-child(2) {
	width: 75%;
}

td:nth-child(2) a {
	padding: 0.1em 0;
	display: block;
}

td:nth-child(3),
th:nth-child(3) {
	padding: 0 20px 0 20px;
	min-width: 150px;
}

td .go-up {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
}

.name,
.go-up {
	word-break: break-all;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

.listing .icon-tabler {
	color: #454545;
}

.listing .icon-tabler-folder-filled {
	color: #ffb900 !important;
}

.sizebar {
	position: relative;
	padding: 0.25rem 0.5rem;
	display: flex;
}

.sizebar-bar {
	background-color: #dbeeff;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: 100%;
	pointer-events: none;
}

.sizebar-text {
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
	gap: 2px;
}

.grid .entry {
	position: relative;
	width: 100%;
}

.grid .entry a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	height: 100%;
}

.grid .entry svg {
	width: 75px;
	height: 75px;
}

.grid .entry img {
	max-height: 200px;
	object-fit: cover;
}

.grid .entry .name {
	margin-top: 1em;
}

footer {
	padding: 40px 20px;
	font-size: 12px;
	text-align: center;
}

.caddy-logo {
	display: inline-block;
	height: 2.5em;
	margin: 0 auto;
}

@media (max-width: 600px) {
	.hideable {
		display: none;
	}

	td:nth-child(2) {
		width: auto;
	}

	th:nth-child(3),
	td:nth-child(3) {
		padding-right: 5%;
		text-align: right;
	}

	h1 {
		color: #000;
	}

	h1 a {
		margin: 0;
	}

	#filter {
		max-width: 100px;
	}

	.grid .entry {
		max-width: initial;
	}
}


@media (prefers-color-scheme: dark) {
	html {
		background: black; /* overscroll */
	}

	body {
		background: linear-gradient(180deg, rgb(34 50 66) 0%, rgb(26 31 38) 100%);
		background-attachment: fixed;
	}

	body,
	a,
	svg,
	.layout.current,
	.layout.current svg,
	.go-up {
		color: #ccc;
	}

	h1 a,
	th a {
		color: white;
	}

	h1 {
		color: white;
	}

	h1 a:hover {
		background: hsl(213deg 100% 73% / 20%);
	}

	header,
	main,
	.grid .entry {
		background-color: #101720;
	}

	tbody tr:hover,
	.grid .entry a:hover {
		background-color: #162030;
		color: #fff;
	}

	th {
		background-color: #18212c;
	}

	td a,
	.listing .icon-tabler {
		color: #abc8e3;
	}

	td a:hover,
	td a:hover .icon-tabler {
		color: white;
	}

	td a:visited {
		color: #cd53cd;
	}

	td a:visited:hover {
		color: #f676f6;
	}

	#search-icon {
		color: #7798c4;
	}

	#filter {
		color: #ffffff;
		border: 1px solid #29435c;
	}

	.meta {
		border-bottom: 1px solid #222e3b;
	}

	.sizebar-bar {
		background-color: #1f3549;
	}

	.grid .entry a {
		background-color: #080b0f;
	}

	#Wordmark path,
	#R path {
		fill: #ccc !important;
	}
	#R circle {
		stroke: #ccc !important;
	}
}