@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

body {
	font-family: 'Poppins';
	font-weight: 300;
	background-color: #f8f9fe;
	color: #212529;
}

a {
	color: #1190bc;
	text-decoration: none;
}

strong {
	font-weight: bold;
}

#sidebar {
	background-color: #262c48;
	color: #94a0b0;
	position: fixed;
	top: 0;
	bottom: 0;
	width: 260px;
	overflow-x: hidden;
	overflow-y: auto;
	white-space: nowrap;
	z-index: 10;
	transition: 0.3s;
}

#sidebar a:hover {
	text-decoration: none;
}

.sidebar-toggler,
.navbar-toggler {
	background: unset;
	border: none;
	padding: 15px;
}

.btn-close-sidebar {
	display: none;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	font-size: 28px;
	color: #fff;
}

.btn-close-sidebar i:hover {
	cursor: pointer;
}

ul#menu-list {
	list-style: none;
	padding-left: 0;
}

.dropdown-list {
	color: #8a8a8c;
	padding: 13px 6px 13px 48px;
}

.dropdown-list:hover,
.dropdown-list.active {
	background-color: #3a4657;
}

.dropdown-list .premium-plugin {
	position: absolute;
}

.dropdown-list .premium-plugin i {
	left: -28px;
	position: relative;
}

.li-list {
	color: #94a0b0;
	padding: 6px;
	padding-left: 16px;
	margin: 10px 0 10px 5px;
}

.li-list i {
	margin-right: 10px;
}

.li-list:hover,
.active .li-list {
	color: #19bae0;
	padding: 6px;
	padding-left: 16px;
	margin-left: 0;
}

#menu-list li:hover {
	border-left: 5px solid #19bae0;
	text-decoration: none;
}

#menu-list li.active {
	border-left: 5px solid #19bae0;
}

.dropdown-container {
	display: none;
	background-color: #313755;
}

.dropdown-container.active {
	display: block;
}

.fa-caret-down {
	float: right;
	padding-right: 8px;
}

.tooltip-info {
	font-size: 13px;
	background-color: #6e7bb9;
	padding: 1px 6px;
	border-radius: 20px;
	margin-left: 8px;
	color: #fff;
}

#content {
	padding: 30px 30px;
	margin-left: 260px;
	margin-top: 42px;
	margin-bottom: 40px;
	transition: 0.3s;
}

#content.content_fullwidth {
	max-width: none;
}

#content-bar {
	margin-left: 260px;
	transition: 0.3s;
}

.section {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 30px;
	overflow: hidden;
	box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
}

.section-bottom-link {
	margin-top: 10px;
	padding-bottom: 20px;
}

.section-full {
	padding: 0;
}

.section-title {
	font-size: 1.2rem;
}

.general-wrapper {
	padding: 20px;
}

/* Tables ignore the wrapper's padding and run edge-to-edge like Game List;
   .custom-table's own first/last cell padding keeps the content aligned. */
.general-wrapper .table-responsive {
	margin-left: -20px;
	margin-right: -20px;
	width: auto;
}

/* ...unless it's a table nested in its own box, which keeps its own edges. */
.general-wrapper .card .table-responsive,
.general-wrapper .section .table-responsive,
.general-wrapper .bs-callout .table-responsive {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* --- List-table pages: shared pagination look, used by
   admin-functions.php's render_admin_pagination() and script.js's
   renderPaginationBar() plus the pages that call them. --- */

/* Pagination bar: per-page select + "Showing X to Y of Z" summary on one
   row, Prev/numbers/Next nav (and the jump-to-page input, once there are
   enough pages) centered on its own row underneath. */
.pagination-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* One compact cluster — per-page select, summary text, and the nav below
	   are all meant to read as a single line/unit. Was `justify-content:
	   center`, which (since this is a full-width block) centered that
	   cluster in the dead middle of the page — the owner flagged that as
	   wrong; flex-end reads as "center-right" here since the block still
	   keeps its own left/right padding instead of touching the edge. Only
	   wraps at all if the viewport is too narrow to fit everything. */
	justify-content: flex-end;
	gap: 20px;
	/* Less top padding than bottom — this sits directly under a section
	   title + toolbar row that already has its own mb-2, so full 16px on
	   top of that stacked into a visibly large gap above this row. */
	padding: 4px 20px 16px;
}

/* Shared "pagination on the same line as the list's own header row" layout -
   used by Game List's "Live" table, Categories, Collections (and Pages' new
   bulk-select header) instead of the pagination bar sitting on its own
   full-width row below with a visible gap. The owner asked for this on Game
   List first ("next to Live"), then flagged Categories/Collections as not
   matching yet - same fix, applied to whichever header row wraps the title/
   select-all/bulk-toolbar bits alongside the render_admin_pagination() call.
   justify-content: space-between on the row itself (set per-page, since each
   page's row has different sibling content) already pins this pagination
   bar toward the right; the rules below just drop the padding/gap meant for
   a standalone full-width row (which would look oversized as an inline
   item) and handle the case where the bar is wide enough to wrap onto its
   own line anyway. */
.bulk-actions-bar.d-flex {
	margin-bottom: 8px;
}

/* Inline in the pagination row: no stacking margin, and pagination still
   pins right via its own margin-left:auto. */
.list-inline-pagination-header .bulk-actions-bar.d-flex {
	margin-bottom: 0;
}

.list-inline-pagination-header {
	padding-top: 15px;
	padding-left: 20px;
}

.list-inline-pagination-header .pagination-wrapper {
	padding: 0;
	gap: 12px;
	/* The pagination cluster is often wide enough (per-page select + summary +
	   Prev/numbers/Next + jump-to-page once there are enough pages) that it
	   wraps onto its own line under the header row rather than sharing its
	   line, even though both are children of the same flex row. When that
	   happens, the row's justify-content: space-between has nothing to space
	   out on a line with only one visible child, so it fell back to
	   flex-start (flush left) - directly opposite of the "center-right"
	   asked for. margin-left: auto pushes it to the right edge of whichever
	   line it ends up on regardless of what else shares that line. */
	margin-left: auto;
}

.pagination-wrapper .pagination-per-page {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.pagination-wrapper .pagination-per-page select {
	width: auto;
}

.pagination-wrapper .pagination-summary {
	white-space: nowrap;
}

.pagination-wrapper .pagination-nav-wrap {
	/* Was `flex: 1 1 100%; flex-direction: column`, which forced this whole
	   block (page numbers + jump-to-page) onto its own full-width row below
	   the per-page-select/summary row, however little room either row
	   actually needed — that's what read as a large disconnected gap. Now a
	   normal flex child that sits on the SAME line as the rest of
	   .pagination-wrapper whenever there's room, only wrapping under it if
	   the viewport genuinely can't fit everything. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Click-to-sort column headers (Game List, Users). */
.sortable-th {
	overflow: visible;
	white-space: nowrap;
}

.sortable-th a.sortable-th-link {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.sortable-th a.sortable-th-link:hover {
	text-decoration: underline;
}

.sortable-th-icon {
	position: relative;
	display: inline-block;
	width: 0.8em;
	height: 1em;
	margin-left: 4px;
	vertical-align: middle;
}

.sortable-th-icon i {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.85em;
	opacity: 0.35;
}

.sortable-th-icon.asc .fa-sort-up,
.sortable-th-icon.desc .fa-sort-down {
	opacity: 1;
}

/* Brief dimming while an AJAX page/sort/per-page change is in flight -
   avoids the table looking "stuck" during the fetch without a full spinner
   overlay stealing the old rows from view. */
.ajax-list-loading .table-responsive,
.ajax-list-loading .pagination-wrapper {
	opacity: 0.5;
	pointer-events: none;
}

.admin-menu {
	margin-top: 20px;
}

.main-header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10;
}

.navbar {
	margin-left: 260px;
	height: 55px;
	padding: 0;
	background: #fff;
	box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
	transition: 0.3s;
}

.navbar .quicklinks {
	margin-right: 10px;
}

.navbar a {
	color: #fff;
}

.navbar-brand {
	position: relative;
	display: flex;
	align-items: center;
}

.page-title {
	margin-top: 5px;
	margin-bottom: 20px;
}

button.remove-category {
	margin-left: auto;
}

.category-item span.badge {
	margin-left: 20px;
}

.tag-list span.badge {
	margin-left: 5px;
}

.tag-list span.badge:hover {
	cursor: pointer;
}

span.btn-tag {
	background-color: #a2a9ca !important;
}

.logo {
	margin: 10px;
	padding: 6px;
	height: 50px;
	margin-left: 10px;
}

.install-form,
.login-form,
.register-form {
	max-width: 400px;
	min-width: 320px;
	background-color: #FFF;
	padding: 30px 10px;
	border-radius: 10px;
}

.login-logo {
	margin-bottom: 30px;
}

.install-body,
.login-body {
	background-color: #eee;
}

.install-container,
.login-container,
.register-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
}

.register-container {
	margin-top: 30px;
	margin-bottom: 30px;
}

ul.category-list,
ul.collection-list,
ul.plugin-translations-list {
	margin-bottom: 0;
	padding-left: 0;
}

.category-list .category-item,
.collection-list .collection-item,
.plugin-translations-list .plugin-translation-item {
	padding: 8px 8px 8px 20px;
	border: 1px solid #dcdfe3;
	margin: 15px 10px;
	border-radius: 5px;
}

span.categories {
	color: #d6793a;
}

.has-translation-cur {
	background-color: #95d5b1;
	color: #000000;
}

.has-translation-other {
	background-color: #ddd892;
	color: #000000;
}

.plugin-list .plugin-update-available {
	background-color: #cceece;
}

.dropdown-btn:hover {
	cursor: pointer;
}

/* Quotes */
#quote {
	overflow: hidden;
	opacity: 1;
	transition: all 0.8s cubic-bezier(0.44, 1.13, 0.58, 1);
}

.author {
	font-weight: 600;
	font-style: italic;
	float: right;
	margin-right: 5px;
}

.disabled-list {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}

.btn {
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 7px !important;
}

.btn-primary {
	background-color: #19bae0;
	border-color: #19bae0;
}

.btn-info {
	color: #fff;
}

a.btn-info {
	color: #fff;
}

.bs-callout {
	margin: 20px 0;
	padding: 15px 30px 15px 15px;
	border-left: 5px solid #eee;
}

.bs-callout h4 {
	margin-top: 0;
}

.bs-callout p:last-child {
	margin-bottom: 0;
}

.bs-callout code,
.bs-callout .highlight {
	background-color: #fff;
}

.bs-callout-danger {
	background-color: #fcf2f2;
	border-color: #d9534f;
}

.bs-callout-warning {
	background-color: #fefbed;
	border-color: #f0ad4e;
}

.bs-callout-info {
	background-color: #f0f7fd;
	border-color: #5bc0de;
}

.fetch-games.fade {
	display: none;
}

.fetch-games.show {
	display: block;
}

.official-info {
	margin: 10px;
}

/* Table */

/* table.table a {
	color: #1190bc;
} */

table.table a:hover {
	color: #064c64;
}

/* Search */

.has-search .form-control {
	padding-left: 2.375rem;
}

.has-search .form-control-feedback {
	position: absolute;
	z-index: 1;
	display: block;
	width: 2.375rem;
	height: 2.375rem;
	line-height: 2.375rem;
	text-align: center;
	pointer-events: none;
	color: #aaa;
}

/* Icons */

.fa-thumbs-down {
	color: #ec505d;
	margin-right: 10px;
}

.fa-thumbs-up {
	color: #29badd;
	margin-right: 10px;
}

.fa-plus.circle {
	color: #17af71;
}

.fa-pencil-alt.circle {
	color: #1190bc;
}

.fa-trash.circle {
	color: #e75963;
}

.fa.circle {
	padding: 0.5em 0.57em;
	border: 1px solid;
	border-radius: 50%;
	margin-right: 5px;
}

/* Icon-only triggers swap their icon for a bare spinner - keep it centered. */
a:has(> .spinner-border:only-child),
button:has(> .spinner-border:only-child) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

img.gamelist {
	border-radius: 10px;
	width: 60px;
	height: 60px;
}

.pagination .page-item.disabled .page-link {
	color: #8a93a5 !important;
	background-color: #f1f3f9;
	border-color: #e3e7ef;
}

.badge {
	box-shadow: none;
}

.badge-primary {
	color: #fff !important;
	background-color: #4285f4 !important;
}

.badge-pill {
	padding-right: 0.6em;
	padding-left: 0.6em;
	border-radius: 10rem;
}

.btn {
	border-radius: 10px;
	box-shadow: none;
}

.cms {
	margin-top: 50px;
	margin-bottom: 15px;
}

.login-title {
	text-align: center;
	margin-bottom: 25px;
	font-weight: 400;
	color: #212529;
}

.modal-dialog .modal-content {
	border-radius: 10px;
}

.modal-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	margin: 0;
	padding: 12px;
}

.modal-body {
	max-height: 85vh;
	overflow-y: auto;
}

.popup-widget-items .widget-item {
	margin-bottom: 12px;
}

/* Stats */

canvas {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.chart-container {
	width: 840px;
}

.container-stats {
	margin-top: 30px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.stats-option {
	position: absolute;
	width: 170px;
	right: 30px;
}

.section-stats {
	position: relative;
	overflow: hidden;
}

/* Theme */

.theme {
	float: left;
	margin-right: 30px;
	margin-bottom: 35px;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
}

.theme-id-container {
	padding: 15px;
}

.theme-thumbnail img {
	width: 300px;
	height: 220px;
}

.theme-name {
	font-size: 20px;
	display: inline-block;
}

.theme-action {
	float: right;
}

.theme-action button {
	margin: 0;
}

.theme-info {
	margin-top: 10px;
	margin-bottom: 30px;
}

.theme-author {
	float: left;
}

.theme-version {
	float: right;
}

.plugin-repo-container {
	max-height: 600px;
	overflow-x: auto;
}

.plugin-inactive {
	opacity: 0.5;
}

h4.plugin-title {
	margin-bottom: 15px;
}

.tooltip-doc-plugin {
	font-weight: normal;
	font-size: 16px;
	background-color: #94abbf;
	color: #fff;
	padding: 3px 7px;
	border-radius: 30px;
	float: right;
}

.widget-item {
	cursor: pointer;
	padding: 12px 18px;
	border: 1px solid #dee2e6;
	background-color: #dee2e6;
}

.btn-insert-widget {
	padding: 10px;
	border: 1px solid #68975e;
	text-align: center;
	margin-bottom: 19px;
	color: #91b789;
	cursor: pointer;
}

.popup-widget-item {
	padding: 10px;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}

.popup-widget-item-title {
	font-size: 16px;
	font-weight: bold;
}

.theme-dark .widget-item {
	border-color: #48517d;
	background-color: #333a59;
}

.widget-title {
	position: relative;
}

.widget-form {
	padding: 12px 18px;
	border: 1px solid #dee2e6;
	background-color: #fff;
	border-top: none;
}

.theme-dark .widget-form {
	border-color: #48517d;
	background-color: #2c3351;
}

.widget-description {
	padding: 12px 18px;
}

.panel-default {
	margin: 10px 0 0 0;
	border: 1px solid #dee2e6;
	padding: 0 18px;
}

.theme-dark .panel-default {
	border-color: #48517d;
}

.panel-description {
	margin-bottom: 10px;
}

.panel-body {
	min-height: 128px;
	margin-bottom: 18px;
}

.panel-title {
	position: relative;
	margin: 12px 0;
	cursor: pointer;
}

.panel-title::after,
.panel-body .widget-title::after {
	content: "\f0d7";
	top: -2px;
	right: 0px;
	position: absolute;
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
}

.panel-title[aria-expanded="true"]::after {
	content: "\f0d8";
}

.ui-sortable-placeholder {
	margin-top: 12px;
	border: 2px dashed #ccdfd8;
	height: 50px;
	width: 100%;
	background: #f7fdfa;
}

.theme-dark .ui-sortable-placeholder {
	border-color: #6987b7;
	background: #3e4562;
}

.widget-action-button-area {
	margin-top: 10px;
}

.panel-default .widget-item-sortable {
	margin-top: 12px;
}

.small {
	font-size: 0.85rem;
	font-weight: unset;
}

.delete-widget:hover {
	cursor: pointer;
}

.widget-inactive {
	opacity: 0.5;
}

.theme-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .3s ease;
	background: rgba(0, 0, 0, 0.4);
}

.theme-overlay i {
	color: white;
	font-size: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}

.theme-overlay:hover {
	opacity: 1;
}

.theme-thumbnail {
	position: relative;
}

.theme-update-wrapper {
	position: relative;
	top: -80px;
}

.theme-update-info {
	position: absolute;
	width: 100%;
	border-left: 4px solid #ffb486;
	color: #856404;
	background-color: #fff3cd;
	padding: .85rem 1.25rem;
}

.theme-add {
	width: 300px;
	height: 310px;
	border: 2px dashed #c6d7f0;
}

.theme-add-icon {
	color: #19bae0;
	font-size: 80px;
	margin-left: 50%;
	margin-top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.theme-add:hover {
	cursor: pointer;
}

.label-theme-add {
	position: absolute;
	width: 300px;
	height: 310px;
}

.theme-upload {
	width: 300px;
	height: 310px;
	border: 2px dashed #c6d7f0;
}

.theme-upload-icon {
	color: #19bae0;
	font-size: 80px;
	margin-left: 50%;
	margin-top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.label-theme-upload:hover {
	cursor: pointer;
}

.label-theme-upload {
	position: absolute;
	width: 300px;
	height: 310px;
}

.has-update-icon {
	float: right;
	margin-right: 14px !important;
	color: #f26262;
	margin-top: 4px;
}

.installed-plugin-list .has-update-icon {
	position: absolute;
	right: 0;
}

#available-widgets {
	position: sticky;
	top: 90px;
	max-height: 85vh;
	overflow-y: scroll;
}

.td-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 0;
}

/* TABLE */

.table thead th {
	font-weight: normal;
}

.section-full .section-title {
	padding: 20px;
}

.dashboard-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
}

.dashboard-section-header .section-title {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.dashboard-sort-control {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.custom-table thead th {
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 2px solid;
	border-color: #eee;
}

.custom-table tbody td {
	padding-top: 16px;
	padding-bottom: 16px;
	border-color: #eee;
}

.custom-table thead {
	background-color: #f6f9fc;
}

.custom-table table {
	border: none;
}

.custom-table tr td:first-child,
.custom-table tr th:first-child {
	padding-left: 20px;
}

.custom-table tr td:last-child,
.custom-table tr th:last-child {
	padding-right: 20px;
}

/* BOXES */

.boxes {
	color: #fff;
}

.box {
	padding: 30px 25px;
	border-radius: 7px;
	margin-bottom: 30px;
	box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
}

.box h2.amount {
	font-weight: 600;
}

.box-info {
	font-weight: 500;
}

.box-1 {
	background-color: #ee7586;
}

.box-2 {
	background-color: #4cd29a;
}

.box-3 {
	background-color: #f2b260;
}

.box-4 {
	background-color: #70aaf7;
}

span.input-icon {
	position: absolute;
	top: 7px;
	left: 10px;
}

input[type=text].has-icon {
	padding-left: 35px;
}

.list-group-item {
	color: unset;
}

/* TABS */

.custom-tab {
	background-color: #6e7bb9;
	padding: 20px 20px 0 20px;
}

.custom-tab .nav-link {
	background-color: #acb5e3;
	margin-left: 5px;
	color: rgba(0, 0, 0, 0.51);
}

.custom-tab .nav-link a {
	color: unset;
}

/* Dark Mode */
.theme-dark body {
	background-color: #1c203a;
	color: #adbcce;
}

/* .theme-dark a,
.theme-dark table.table a {
	color: #29badd;
} */

.theme-dark a.btn {
	color: #fff;
}

.theme-dark .quicklinks a {
	color: #fff;
}

.theme-dark .bs-callout {
	color: #262c48;
}

.theme-dark .section {
	background-color: #262c48;
	box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.15);
}

.theme-dark .custom-table thead {
	background-color: #3b4366;
}

.theme-dark .custom-tab {
	background-color: #5e6795;
}

.theme-dark .custom-tab .nav-link {
	background-color: #7780ae;
}

.theme-dark .theme {
	background-color: #262c48;
}

.theme-dark #sidebar {
	background-color: #262c48;
}

.theme-dark .navbar {
	background-color: #262c48;
	box-shadow: none;
}

.theme-dark .li-list {
	color: #adbcce;
}

.theme-dark .li-list:hover,
.active .li-list {
	color: #19bae0;
}

.theme-dark .table {
	color: #adbcce;
}

.theme-dark .table td {
	border-color: #3b4a5e;
}

.theme-dark .table th {
	border-color: #3b4a5e;
}

.theme-dark .table thead th {
	border-color: #3b4a5e;
}

.theme-dark .nav-tabs .nav-item.show .nav-link,
.theme-dark .nav-tabs .nav-link.active,
.theme-dark .nav-tabs .nav-link:focus,
.theme-dark .nav-tabs .nav-link:hover {
	color: #76889f;
	background-color: #212644;
	border-color: #48517d;
	border-bottom: 1px solid #262c48;
}

.theme-dark .nav-tabs {
	border-bottom: 1px solid #48517d;
}

.theme-dark .list-group-item {
	background-color: #262c48;
	border: 1px solid rgba(0, 0, 0, .2);
}

.theme-dark .form-control,
.theme-dark .form-select {
	background-color: #1c203a;
	border: 1px solid #3b4a5e;
	color: unset;
}

.theme-dark .pagination .page-item .page-link {
	color: unset;
}

.theme-dark .modal-content {
	background-color: #262c48;
}

.theme-dark .modal-header {
	border-bottom: 1px solid #48517d;
}

.theme-dark .modal-header .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

.theme-dark .close {
	color: #adbcce;
}

.theme-dark .category-list .category-item,
.theme-dark .collection-list .collection-item,
.theme-dark .plugin-translations-list .plugin-translation-item {
	border: 1px solid #3b4a5e;
}

.theme-dark .dropdown-list:hover,
.theme-dark .dropdown-list.active {
	background-color: #434960;
}

.theme-dark .dropdown-container {
	background-color: #313755;
}

.theme-dark .image-gallery-item {
	border: 1px solid #4d5579;
}

.theme-dark .text-muted {
	color: #778399 !important;
}

.theme-dark .plugin-list .plugin-update-available {
	background-color: #373e62;
}

.theme-dark .card-header {
	background-color: #5e6795;
}

.theme-dark .card {
	background-color: #333a59;
}

.theme-dark .border-bottom {
	border-color: #48517d !important;
}

.theme-dark .bg-light {
	background-color: rgb(38, 44, 72) !important;
}

/* Dark theme pagination styles */
.theme-dark .pagination .page-item .page-link {
	background-color: #262c48;
	border-color: #3b4a5e;
	color: #adbcce;
}

.theme-dark .pagination .page-item.active .page-link {
	background-color: #19bae0;
	border-color: #19bae0;
	color: #fff;
}

.theme-dark .pagination .page-item.disabled .page-link {
	background-color: #1c203a;
	border-color: #3b4a5e;
	color: #566276;
}

.theme-dark .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
	background-color: #3a4156;
	border-color: #4d5579;
	color: #fff;
}

.theme-dark .pagination {
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}

.theme-dark .pagination .page-link:focus {
	box-shadow: 0 0 0 0.2rem rgba(25, 186, 224, 0.25);
}

@media(max-width: 768px) {
	.navbar {
		margin-left: 0;
	}

	.btn-close-sidebar {
		display: block;
	}

	#sidebar {
		width: 0px;
	}

	#content {
		margin-left: 0px;
		padding: 30px 15px;
	}

	#content-bar {
		margin-left: 0px;
	}

	.dashboard-section-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.dashboard-sort-control {
		align-self: flex-end;
	}
}