/*
 * The CSS that Bootstrap 4's JavaScript plugins need, now that the
 * Bootstrap stylesheet is gone. Bootstrap JS still drives dropdowns, modals,
 * tabs, collapse, tooltips, popovers, toasts and the NFT carousel; the search
 * autocomplete and DataTables (peers) render Bootstrap markup too. Everything
 * else on the page is Tailwind (styles/tailwind.css).
 */

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- transitions / visibility ------------------------------------------- */
.fade { transition: opacity 0.15s linear; }
.fade:not(.show) { opacity: 0; }
.collapse:not(.show) { display: none; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height 0.3s ease; }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* --- dropdowns (navbar, settings, search autocomplete) ------------------- */
.dropdown, .dropup, .dropleft, .dropright { position: relative; }
.dropdown-toggle { white-space: nowrap; }
.dropdown-toggle::after {
	display: inline-block; margin-left: 0.35em; vertical-align: 0.2em; content: "";
	border-top: 0.3em solid; border-right: 0.3em solid transparent; border-left: 0.3em solid transparent;
	opacity: 0.6;
}
.dropdown-menu {
	position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left;
	min-width: 12rem; padding: 0.375rem; margin: 0.25rem 0 0; list-style: none; text-align: left;
	color: var(--nx-text); font-size: 0.875rem;
	background-color: rgba(9, 9, 11, 0.95);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border: 1px solid var(--nx-border); border-radius: 0.75rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.dropdown-menu.show { display: block; }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-item {
	display: block; width: 100%; padding: 0.5rem 0.75rem; clear: both; white-space: nowrap;
	color: var(--nx-text); text-align: inherit; text-decoration: none;
	background-color: transparent; border: 0; border-radius: 0.5rem;
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
	color: #fff; text-decoration: none; background-color: rgba(255, 255, 255, 0.06);
}
.dropdown-header { display: block; padding: 0.5rem 0.75rem; margin: 0; white-space: nowrap; }
.dropdown-divider { height: 0; margin: 0.375rem 0; overflow: hidden; border-top: 1px solid var(--nx-border); }

/* --- navbar (layout.pug): Bootstrap's collapse toggles .show below lg ----
   Expands at 1024px (Tailwind's lg, which the header's tw:lg:* classes use),
   not Bootstrap's 992px, so the two never disagree in between. */
.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.navbar-nav .dropdown-menu { position: static; float: none; }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.navbar-toggler { cursor: pointer; }
@media (min-width: 1024px) {
	.navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; }
	.navbar-expand-lg .navbar-nav { flex-direction: row; }
	.navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; }
	.navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
	.navbar-expand-lg .navbar-toggler { display: none; }
}

/* --- modals --------------------------------------------------------------- */
.modal-open { overflow: hidden; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal {
	position: fixed; top: 0; left: 0; z-index: 1050; display: none;
	width: 100%; height: 100%; overflow: hidden; outline: 0;
}
.modal-dialog { position: relative; width: auto; margin: 0.75rem; pointer-events: none; }
.modal.fade .modal-dialog { transition: transform 0.25s ease-out; transform: translate(0, -24px); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-scrollable { display: flex; max-height: calc(100% - 1.5rem); }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1.5rem); overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1.5rem); }
.modal-content {
	position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto;
	color: var(--nx-text); background-color: var(--nx-surface); background-clip: padding-box;
	border: 1px solid var(--nx-border); border-radius: 1rem; outline: 0;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.7; }
.modal-header {
	display: flex; align-items: flex-start; justify-content: space-between;
	padding: 1rem 1.25rem; border-bottom: 1px solid var(--nx-border);
}
.modal-title { margin: 0; font-size: 1rem; font-weight: 600; color: #fff; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.25rem; }
.modal-footer {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem;
	padding: 1rem 1.25rem; border-top: 1px solid var(--nx-border);
}
.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }
@media (min-width: 576px) {
	.modal-dialog { max-width: 520px; margin: 1.75rem auto; }
	.modal-dialog-centered { min-height: calc(100% - 3.5rem); }
	.modal-dialog-scrollable { max-height: calc(100% - 3.5rem); }
	.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); }
}
@media (min-width: 992px) {
	.modal-lg, .modal-xl { max-width: 800px; }
}
@media (min-width: 1200px) {
	.modal-xl { max-width: 1140px; }
}
.close {
	float: right; padding: 0; font-size: 1.5rem; font-weight: 400; line-height: 1;
	color: var(--nx-text-muted); background: transparent; border: 0; cursor: pointer; opacity: 0.8;
}
.close:hover { color: #fff; opacity: 1; }
.modal-header .close { margin: -0.25rem -0.25rem -0.25rem auto; padding: 0.25rem; }

/* --- tooltips & popovers (positioned by Popper) --------------------------- */
.tooltip {
	position: absolute; z-index: 1070; display: block; margin: 0;
	font-family: inherit; font-size: 0.75rem; line-height: 1.4; text-align: left;
	word-wrap: break-word; opacity: 0;
}
.tooltip.show { opacity: 1; }
.tooltip .arrow { position: absolute; display: block; width: 0.8rem; height: 0.4rem; }
.tooltip .arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; }
.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] { padding: 0.4rem 0; }
.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow { bottom: 0; }
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { top: 0; border-width: 0.4rem 0.4rem 0; border-top-color: #27272a; }
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] { padding: 0.4rem 0; }
.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow { top: 0; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { bottom: 0; border-width: 0 0.4rem 0.4rem; border-bottom-color: #27272a; }
.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] { padding: 0 0.4rem; }
.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow { left: 0; width: 0.4rem; height: 0.8rem; }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { right: 0; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: #27272a; }
.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] { padding: 0 0.4rem; }
.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow { right: 0; width: 0.4rem; height: 0.8rem; }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { left: 0; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: #27272a; }
.tooltip-inner {
	max-width: 280px; padding: 0.4rem 0.65rem; color: #fff; text-align: center;
	background-color: #27272a; border: 1px solid #3f3f46; border-radius: 0.5rem;
}

.popover {
	position: absolute; top: 0; left: 0; z-index: 1060; display: block; max-width: min(1200px, 92vw);
	font-family: inherit; font-size: 0.8125rem; line-height: 1.5; text-align: left; word-wrap: break-word;
	color: var(--nx-text); background-color: var(--nx-surface); background-clip: padding-box;
	border: 1px solid var(--nx-border-strong); border-radius: 0.75rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.popover .arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; margin: 0 0.5rem; }
.popover .arrow::before, .popover .arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; }
.bs-popover-top, .bs-popover-auto[x-placement^="top"] { margin-bottom: 0.5rem; }
.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow { bottom: calc(-0.5rem - 1px); }
.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: var(--nx-border-strong); }
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; border-top-color: var(--nx-surface); }
.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] { margin-top: 0.5rem; }
.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow { top: calc(-0.5rem - 1px); }
.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { top: 0; border-width: 0 0.5rem 0.5rem; border-bottom-color: var(--nx-border-strong); }
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem; border-bottom-color: var(--nx-elevated); }
.bs-popover-right, .bs-popover-auto[x-placement^="right"] { margin-left: 0.5rem; }
.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.5rem 0; }
.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: var(--nx-border-strong); }
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: var(--nx-surface); }
.bs-popover-left, .bs-popover-auto[x-placement^="left"] { margin-right: 0.5rem; }
.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.5rem 0; }
.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: var(--nx-border-strong); }
.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: var(--nx-surface); }
.popover-header {
	padding: 0.6rem 0.9rem; margin-bottom: 0; font-size: 0.875rem; font-weight: 600; color: #fff;
	background-color: var(--nx-elevated); border-bottom: 1px solid var(--nx-border);
	border-top-left-radius: calc(0.75rem - 1px); border-top-right-radius: calc(0.75rem - 1px);
}
.popover-header:empty { display: none; }
.popover-body { padding: 0.75rem 0.9rem; color: var(--nx-text); }

/* --- toasts (layout.pug user message) ------------------------------------ */
.toast {
	max-width: 520px; overflow: hidden; font-size: 0.875rem; color: var(--nx-text);
	background-clip: padding-box; border: 1px solid var(--nx-border); border-radius: 0.75rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); opacity: 0;
}
.toast.showing { opacity: 1; }
.toast.show { display: block; opacity: 1; }
.toast.hide { display: none; }
.toast-header { display: flex; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--nx-border); }
.toast-body { padding: 0.75rem; }

/* --- carousel (NFT media) ------------------------------------------------- */
.carousel { position: relative; }
.carousel.pointer-event { touch-action: pan-y; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-item {
	position: relative; display: none; float: left; width: 100%; margin-right: -100%;
	-webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.5s ease-in-out;
}
.carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; }
.carousel-item-next:not(.carousel-item-left), .active.carousel-item-right { transform: translateX(100%); }
.carousel-item-prev:not(.carousel-item-right), .active.carousel-item-left { transform: translateX(-100%); }
.carousel-control-prev, .carousel-control-next {
	position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
	width: 15%; color: #fff; text-align: center; opacity: 0.6; transition: opacity 0.15s ease;
}
.carousel-control-prev:hover, .carousel-control-next:hover { color: #fff; text-decoration: none; opacity: 1; }
.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }
.carousel-control-prev-icon, .carousel-control-next-icon {
	display: inline-block; width: 2rem; height: 2rem; background: no-repeat 50% / 50% 50%;
	background-color: rgba(0, 0, 0, 0.5); border-radius: 9999px;
}
.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); }
.carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); }
.carousel-indicators {
	position: absolute; right: 0; bottom: 0; left: 0; z-index: 15; display: flex; justify-content: center;
	padding-left: 0; margin: 0 15% 0.75rem; list-style: none;
}
.carousel-indicators li {
	box-sizing: content-box; flex: 0 1 auto; width: 24px; height: 3px; margin: 0 3px; cursor: pointer;
	background-color: #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; opacity: 0.4;
}
.carousel-indicators .active { opacity: 1; }

/* --- tables --------------------------------------------------------------- */
.table { width: 100%; margin-bottom: 0; color: var(--nx-text); border-collapse: collapse; }
/* Bare element selector, as in Bootstrap: a .table th rule would outrank the
   .text-right / .text-left header classes and leave headers misaligned. */
th { text-align: inherit; }
.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- DataTables (peers page) renders Bootstrap 4 markup ------------------- */
.dataTables_wrapper { font-size: 0.875rem; color: var(--nx-text-muted); }
.dataTables_wrapper .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; margin: 0.75rem 0; }
.dataTables_wrapper .row > [class*="col-"] { flex: 1 1 auto; min-width: 0; padding: 0; }
.dataTables_wrapper .row > .col-sm-12:only-child { flex-basis: 100%; }
.dataTables_wrapper label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 400; }
.dataTables_wrapper .form-control, .dataTables_wrapper select, .dataTables_wrapper input {
	height: 2.25rem; padding: 0 0.6rem; color: var(--nx-text); background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; outline: 0;
}
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .pagination { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; padding: 0; margin: 0; list-style: none; }
.dataTables_wrapper .page-link {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem;
	padding: 0 0.75rem; color: var(--nx-text-muted) !important; text-decoration: none; border-radius: 0.5rem;
}
.dataTables_wrapper .page-link:hover { color: #fff !important; background-color: rgba(255, 255, 255, 0.05); }
.dataTables_wrapper .page-item.active .page-link { color: var(--nx-on-accent) !important; background-color: var(--nx-accent); }
.dataTables_wrapper .page-item.disabled .page-link { pointer-events: none; opacity: 0.4; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; }
table.dataTable thead .sorting_asc::after { content: " \2191"; }
table.dataTable thead .sorting_desc::after { content: " \2193"; }