:root {
	--white: #f9f8f8;
	--black: #222222;
	--grey: #e0e0e0;
	--grey--dark: #c0c0c0;
	--red: hsl(359, 71%, 42%);
	--red--dark: hsl(359, 63%, 40%);
	--border-size: 3px;
}

* {
	box-sizing: border-box;
}

input:focus {
	outline: none;
}

body {
	color: var(--black);
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	background-color: var(--white);
}

th.gridjs-th {
	color: var(--white);
	background-color: var(--red);
}

th.gridjs-th:hover,
th.gridjs-th:active,
th.gridjs-th:focus {
	background-color: var(--red--dark);
}

button.gridjs-sort-asc {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 6l-6 8h12z'/%3E%3C/svg%3E");
	background-size: 20px 20px;
}

button.gridjs-sort-desc {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 18l6-8h-12z'/%3E%3C/svg%3E");
	background-size: 20px 20px;
}

[data-type="dir"]::before {
	content: "📁 ";
}

[data-type="file"]::before {
	content: "📄 ";
}

.grid-link {
	color: #007bff;
	text-decoration: none;
	cursor: pointer;
}

.grid-link:hover {
	text-decoration: underline;
}

#grid-wrapper * {
	margin: 0;
	border-radius: 0;
}

.gridjs.gridjs-container {
	overflow: unset;
}

.gridjs .gridjs-wrapper {
	box-shadow: none;
}

.gridjs .gridjs-thead {
	border: var(--border-size) solid var(--red--dark);
}

.gridjs .gridjs-tbody {
	border: var(--border-size) solid var(--grey);
}

.gridjs .gridjs-th,
.gridjs .gridjs-td {
	padding: 0.5rem 0.75rem;
}

.gridjs td,
.gridjs th {
	border-color: var(--grey);
	border-style: solid;
	border-width: var(--border-size);
}

.gridjs th {
	border-color: var(--red--dark);
}

.searchbar-container {
	display: flex;
	justify-content: center;
	margin: 30px 0;
}

.searchbar {
	width: 100%;
	max-width: 1024px;
	padding: 12px 20px;
	font-size: 16px;
	text-align: center;
	border: var(--border-size) solid var(--grey);
}

.searchbar:hover {
	border-color: var(--grey--dark);
}

.searchbar:focus {
	border-color: var(--red);
}