.footer {
    background: var(--xui-topbar);
	background-size: auto;
	animation: none;
}

@keyframes ftgradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Default probe table — used by stream_view / api.php / edit pages.
   List pages wrap probes in .stream-info-probe for content-width below. */
.table-data {
    font-size: 12px;
    table-layout: fixed;
    width: 180px;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    background-color: transparent !important;
}

/* Streams / movies / radios / episodes / created_channels list cells only. */
.stream-info-probe {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    overflow: visible;
}

.stream-info-probe .table-data {
    table-layout: auto;
    width: auto !important;
    max-width: 100%;
}

.table-data-90 {
    width: 90px !important;
}

.table-data-120 {
    width: 120px !important;
}

.stream-info-probe .table-data-90,
.stream-info-probe .table-data-120 {
    width: auto !important;
}

.table-data td {
    width: 30px;
    padding: 1px 6px !important;
    border-top: 0 !important;
    text-align: center;
    vertical-align: middle;
    line-height: 1.3;
    background-color: transparent !important;
}

.stream-info-probe .table-data td {
    width: auto;
    white-space: nowrap;
    overflow: visible;
}

.table-data td.double {
    width: 60px !important;
}

.stream-info-probe .table-data td.double,
.stream-info-probe .table-data td[colspan] {
    width: auto !important;
}

.table-data tr,
.table-striped .table-data tr,
.table-striped .table-data tr:nth-of-type(odd),
.table-hover .table-data tr:hover {
    background-color: transparent !important;
}

/* Same size as the live connections table. The clients modal on streams,
   movies, episodes, radios, and channel pages has no page stylesheet of its own. */
.lc-output-icon,
.lc-quality-icon {
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;
	vertical-align: middle;
}

.jvectormap-label {
    display: none;
}

.bg-map-dark-1 {
    background-color: var(--xui-text-muted) !important;
}

.bg-map-dark-2 {
    background-color: color-mix(in srgb, var(--xui-text-muted) 82%, black) !important;
}

.bg-map-dark-3 {
    background-color: color-mix(in srgb, var(--xui-text-muted) 64%, black) !important;
}

.bg-map-dark-4 {
    background-color: color-mix(in srgb, var(--xui-text-muted) 48%, black) !important;
}

.bg-map-dark-5 {
    background-color: color-mix(in srgb, var(--xui-text-muted) 32%, black) !important;
}

.bg-map-dark-6 {
    background-color: color-mix(in srgb, var(--xui-text-muted) 18%, black) !important;
}

.bg-map-1 {
    background-color: var(--xui-accent) !important;
}

.bg-map-2 {
    background-color: color-mix(in srgb, var(--xui-accent) 82%, black) !important;
}

.bg-map-3 {
    background-color: color-mix(in srgb, var(--xui-accent) 64%, black) !important;
}

.bg-map-4 {
    background-color: color-mix(in srgb, var(--xui-accent) 48%, black) !important;
}

.bg-map-5 {
    background-color: color-mix(in srgb, var(--xui-accent) 32%, black) !important;
}

.bg-map-6 {
    background-color: color-mix(in srgb, var(--xui-accent) 18%, black) !important;
}

.grayscale {
    filter: grayscale(100%);
}

.whiteout {
    filter: brightness(0) invert(1);
}

#login_button {
    height: 50px;
    text-transform: uppercase;
}

img.mfp-img {
    background-clip: content-box;
    background: var(--xui-bg-card);
    margin: 0 !important;
    padding: 0 !important;
}

.mfp-figure {
    margin-right: -10px;
}

.btn-fixed {
    min-width: 100px !important;
}

.btn-fixed-xl {
    min-width: 132px !important;
}

/* Toast notifications — colors from tokens.css (--xui-toast-*) */
.jq-toast-wrap {
    z-index: 1065 !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    width: max-content !important;
    max-width: min(420px, calc(100vw - 32px)) !important;
}

.jq-toast-single {
    /* Override legacy app.css #5089de default; jquery-toast bgColor/textColor still win via inline */
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--xui-toast-bg);
    background-color: var(--xui-toast-bg);
    background-image: none !important;
    color: var(--xui-toast-text);
    border: 1px solid var(--xui-toast-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--xui-toast-shadow), inset 3px 0 0 var(--xui-toast-accent) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: break-word;
    min-height: 56px;
    width: max-content !important;
    min-width: 320px;
    max-width: min(420px, calc(100vw - 32px));
    box-sizing: border-box !important;
    padding: 14px 32px 16px 16px !important;
}

.jq-toast-single h2,
.jq-toast-single .jq-toast-heading {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
    color: inherit;
}

.jq-toast-single.jq-has-icon {
    background-image: none !important;
    padding: 14px 32px 16px 58px !important;
}

.jq-toast-single.jq-has-icon::before,
.jq-toast-single.jq-has-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.jq-toast-single.jq-has-icon::before {
    left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.jq-toast-single.jq-has-icon::after {
    left: 21px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--xui-toast-glyph) center / contain no-repeat;
    mask: var(--xui-toast-glyph) center / contain no-repeat;
}

.jq-toast-single a {
    color: var(--xui-toast-link) !important;
    border-bottom-color: var(--xui-toast-link) !important;
}

.close-jq-toast-single {
    position: absolute !important;
    z-index: 2;
    top: 8px !important;
    right: 8px !important;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 14px !important;
    line-height: 1 !important;
    color: var(--xui-toast-close) !important;
    background: var(--xui-toast-close-bg);
    opacity: 0.9;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.close-jq-toast-single:hover {
    color: var(--xui-toast-close-hover) !important;
    background: var(--xui-toast-close-bg-hover);
    opacity: 1;
}

.jq-toast-loader {
    /* no !important on color — jquery-toast sets loaderBg as inline background-color */
    position: absolute !important;
    background-color: var(--xui-toast-accent);
    border-radius: 0 !important;
    height: 2px !important;
    top: auto !important;
    bottom: 0 !important;
}

.jq-icon-success {
    --xui-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 16.6 4.8 12.2 3.4 13.6 9.2 19.4 20.6 8 19.2 6.6z'/%3E%3C/svg%3E");
    background-color: var(--xui-toast-success-bg) !important;
    color: var(--xui-toast-success-text) !important;
    border-color: var(--xui-toast-success-border) !important;
    box-shadow: var(--xui-toast-shadow), inset 3px 0 0 var(--xui-toast-success-text) !important;
}

.jq-icon-info {
    --xui-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 18h4v-7h-4v7zm0-9h4V6h-4v3z'/%3E%3C/svg%3E");
    background-color: var(--xui-toast-info-bg) !important;
    color: var(--xui-toast-info-text) !important;
    border-color: var(--xui-toast-info-border) !important;
    box-shadow: var(--xui-toast-shadow), inset 3px 0 0 var(--xui-toast-info-text) !important;
}

.jq-icon-warning {
    --xui-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v9h-2V5zm0 11h2v2h-2v-2z'/%3E%3C/svg%3E");
    background-color: var(--xui-toast-warning-bg) !important;
    color: var(--xui-toast-warning-text) !important;
    border-color: var(--xui-toast-warning-border) !important;
    box-shadow: var(--xui-toast-shadow), inset 3px 0 0 var(--xui-toast-warning-text) !important;
}

.jq-icon-error {
    --xui-toast-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.7 12 12l-6.3-6.3-1.4 1.4L10.6 13.4 4.3 19.7l1.4 1.4L12 14.8l6.3 6.3 1.4-1.4-6.3-6.3 6.3-6.3z'/%3E%3C/svg%3E");
    background-color: var(--xui-toast-error-bg) !important;
    color: var(--xui-toast-error-text) !important;
    border-color: var(--xui-toast-error-border) !important;
    box-shadow: var(--xui-toast-shadow), inset 3px 0 0 var(--xui-toast-error-text) !important;
}

.btn-fixed-min {
    min-width: 40px !important;
}

.btn-fixed-xs {
    width: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.btn-fixed-sm {
    width: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.card-footer {
    padding: 0;
    background: var(--xui-bg-card);
    margin-bottom: 30px;
}

.no-margin-bottom {
    margin-bottom: -20px;
    height: 200px;
}

.light-grey {
    background: var(--xui-bg-card);
}

.btn-pointer {
    cursor: pointer;
    color: var(--xui-on-dark-fill, #ffffff) !important;
}

.stream-probe-from-item {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.35rem;
}
.stream-probe-from-item label {
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--xui-text-muted);
}
.stream-probe-from-item {
    width: 220px;
    flex: 0 0 220px;
}
.stream-probe-from-item .select2-container {
    width: 100% !important;
}

.gap {
    padding-left: 10px;
}

.select2-container {
    width: 100% !important;
}

/* The open menu is its own .select2-container, usually on <body>.
   width:100% makes that box the viewport wide, so the page shifts and a
   search field paints under the closed select. Size it to the field.
   Header search (.bigdrop) keeps its own width. */
.select2-container--open:has(> .select2-dropdown):not(:has(> .bigdrop)) {
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
}

.select2-dropdown:not(.bigdrop) .select2-search--dropdown .select2-search__field {
    background: var(--xui-dropdown-bg) !important;
    box-shadow: none !important;
}

.select2-dropdown:not(.bigdrop) .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ct-accent) !important;
    box-shadow: none !important;
}

.loading-results {
    display: none;
}

@media (min-width: 768px) {
    .pro-user-name-mob {
        display: none;
    }
}

li.parsley-required {
    display: none;
}

.scrollToTop{
    position:fixed;
    bottom: 60px;
    right: 20px;
    display: none;
}

#pwindicator, #unindicator {
    margin-top: 4px;
    margin-bottom: -25px;
    width: 100%;
}

.bar {
    height: 2px;
}

.pw-very-weak .bar {
    background: var(--xui-danger);
    width: 5%;
}

.pw-very-weak .label {
    color: var(--xui-danger);
}

.pw-weak .bar {
    background: var(--xui-danger);
    width: 25%;
}

.pw-weak .label {
    color: var(--xui-danger);
}

.pw-mediocre .bar {
    background: var(--xui-warning);
    width: 50%;
}

.pw-mediocre .label {
    color: var(--xui-warning);
}

.pw-strong .bar {
    background: var(--xui-btn-warning-hover);
    width: 75%;
}

.pw-strong .label {
    color: var(--xui-btn-warning-hover);
}

.pw-very-strong .bar {
    background: var(--xui-success);
    width: 100%;
}

.pw-very-strong .label {
    color: var(--xui-success);
}

#datatable-groups_wrapper, #datatable-addon_wrapper, #datatable-packages_wrapper, #datatable-epg_wrapper, #datatable-sources_wrapper, #datatable-epg, #datatable-sources, #datatable-active-servers, #datatable-active-servers_wrapper, #datatable-adaptive_wrapper, #datatable-archive_wrapper, #datatable-errors_wrapper, #datatable_wrapper {
    width: 100% !important;
}

.source-current-badge {
    display: inline-block;
    margin-top: 4px;
    max-width: 220px;
    padding: 2px 8px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    background: var(--xui-btn-secondary);
    color: var(--xui-on-dark-fill, #ffffff);
}
.source-current-badge.is-playing {
    background: var(--xui-success);
    color: var(--xui-on-success);
}

/* Stream Sources: full URL wraps inside the cell; scrollX is disabled in JS
   because global DataTables defaults otherwise clone the URL into a ghost layer. */
#datatable-sources.stream-sources-table {
    table-layout: fixed;
    width: 100% !important;
}
#datatable-sources.stream-sources-table th.stream-source-cell,
#datatable-sources.stream-sources-table td.stream-source-cell {
    width: 100%;
    max-width: 0;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: hidden;
    vertical-align: middle;
}
#datatable-sources.stream-sources-table .stream-source-url {
    display: block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.stream-view-sources-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.stream-view-sources-header .header-title {
    line-height: calc(1.5em + 0.75rem + 2px);
    margin-right: auto;
    white-space: nowrap;
}
.stream-view-sources-header > label {
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--xui-text-muted);
}
.stream-view-sources-header .stream-probe-from-item {
    width: 260px;
    flex: 0 0 260px;
}
.stream-view-sources-header .stream-probe-from-item .select2-container {
    width: 100% !important;
}
.stream-view-sources-header > .btn {
    height: 38px;
    line-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* .bg-animate-pink {
    background: linear-gradient(315deg, #f984ef, #fb607f);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-purple {
    background: linear-gradient(315deg, #9400d3, #9678b6);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-success {
    background: linear-gradient(315deg, #8bbe1b, #138808);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-info {
    background: linear-gradient(315deg, #007fbf, #80daeb);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-danger {
    background: linear-gradient(315deg, #da614e, #dc143c);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-primary {
    background: linear-gradient(315deg, #417dc1, #000080);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-warning {
    background: linear-gradient(315deg, #ffb74d, #fb8c00);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-dark {
    background: linear-gradient(315deg, #454d5d, #5c6371);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}

.bg-animate-secondary {
    background: linear-gradient(315deg, #888f94, #a8b1b6);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
} */

.navbar-custom {
    background-image: url(../images/pattern.png);
    background-size: cover;
}

.body-full {
    padding: 0 !important;
    width: 100%;
    height:100%;
    position:absolute;
}

@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.progress-w-left {
    min-height: 20px;
    margin-bottom: 20px;
}

.progress-w-left .progress-value {
    width: 25%;
    float: left;
    text-align: left;
    line-height: 20px;
}

.progress-w-left .progress {
    width: 75%;
    float: right;
    margin-top: 4px;
}

.nowrap {
    white-space: nowrap !important;
}

.pd-left {
    padding-left: 10px !important;
}

.pd-right {
    padding-right: 10px !important;
}

.no-border {
    border: 0 !important;
}

.big_checkbox {
    height: 24px;
    width: 24px;
}

.app-search {
	width: 150px;
	max-width: 600px !important;
}

.header-search {
	border: 0 !important;
}

.header-search span {
	/* color: #fff !important; */
}

.header-search b {
	/* border-color: #fff transparent transparent !important; */
}

.bigdrop {
	border: 0;
	width: 600px !important;
}

.bigdrop .card {
	margin-bottom: 0 !important;
}

.bigdrop .select2-results__options {
	max-height: 600px !important;
}

.adaptive-link-dropdown .select2-results__options {
	max-height: 400px !important;
	overflow-y: auto !important;
}

.bigdrop .select2-results__option {
	padding: 0 !important;
	border: 0 !important;
	cursor: default;
}

.float-right {
	float: right;
}

.search-icon {
	width: 96px;
	display: inline-block;
	height: 100%;
}

.search-icon-xl {
	width: 120px;
	display: inline-block;
	height: 100%;
}

.select2-results__message {
	display: none;
}

.text-uppercase {
	text-transform: uppercase;
}

.align-center {
	display: flex;
	justify-content: center;
}

.card-search .card-body {
	padding: 20px 10px 20px 20px;
}

.card-search .card-body.action-block {
	padding: 10px 0px 5px 0px;
}

/* Search result action row. Header chrome was painting these buttons, and the
   icon group kept a solid info-blue fill behind them. */
.bigdrop .text-white,
.bigdrop .text-lighter {
	color: var(--xui-dropdown-text) !important;
}
.bigdrop .select2-results__option:nth-of-type(n) {
	background-color: var(--xui-dropdown-bg) !important;
}
.bigdrop .select2-results__option:nth-of-type(n).select2-results__option--highlighted {
	background-color: var(--xui-dropdown-hover) !important;
}
.bigdrop .select2-results__option:nth-of-type(n) .card-search .action-block,
.bigdrop .select2-results__option:nth-of-type(n).select2-results__option--highlighted .card-search .action-block {
	background: transparent !important;
}
.bigdrop .card-search .action-block .btn-group {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}
.bigdrop .card-search .action-block .btn-group .btn {
	background: var(--xui-bg-card) !important;
	background-image: none !important;
	border: 1px solid var(--xui-border) !important;
	color: var(--xui-text) !important;
	box-shadow: none !important;
}
.bigdrop .card-search .action-block .btn-group .btn:hover,
.bigdrop .card-search .action-block .btn-group .btn:focus {
	background: var(--xui-accent-soft) !important;
	border-color: var(--xui-accent) !important;
	color: var(--xui-accent-hover) !important;
}
.bigdrop .card-search .action-block .btn[class*="bg-animate"] {
	color: var(--xui-on-accent) !important;
	border-color: transparent !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-info:hover,
.bigdrop .card-search .action-block .btn.bg-animate-info:focus {
	background: var(--xui-btn-info-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-pink:hover,
.bigdrop .card-search .action-block .btn.bg-animate-pink:focus {
	background: var(--xui-btn-pink-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-warning:hover,
.bigdrop .card-search .action-block .btn.bg-animate-warning:focus {
	background: var(--xui-btn-warning-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-purple:hover,
.bigdrop .card-search .action-block .btn.bg-animate-purple:focus {
	background: var(--xui-btn-purple-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-success:hover,
.bigdrop .card-search .action-block .btn.bg-animate-success:focus {
	background: var(--xui-btn-success-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-danger:hover,
.bigdrop .card-search .action-block .btn.bg-animate-danger:focus {
	background: var(--xui-btn-danger-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-primary:hover,
.bigdrop .card-search .action-block .btn.bg-animate-primary:focus {
	background: var(--xui-btn-primary-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-secondary:hover,
.bigdrop .card-search .action-block .btn.bg-animate-secondary:focus {
	background: var(--xui-btn-secondary-hover) !important;
	color: var(--xui-on-accent) !important;
}
.bigdrop .card-search .action-block .btn.bg-animate-dark:hover,
.bigdrop .card-search .action-block .btn.bg-animate-dark:focus {
	background: var(--xui-btn-dark-hover) !important;
	color: var(--xui-on-accent) !important;
}

.search-fade {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.25;
	overflow: hidden;
}

.search-image {
	background-size: 100% !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	height: 130%;
	filter: blur(3px);
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
    margin: -30px -30px -30px -30px;
}

.search-type {
	float: right;
	padding-top: 10px;
	padding-right: 10px;
	color: var(--xui-on-dark-fill, #ffffff);
}

.card-search {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
}

.select2-search--inline {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.select2-selection__choice__remove {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

.pad-15 {
	padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (max-width: 991px) {
	#topnav-search {
		display: none !important;
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	#topnav-search.active {
		display: block !important;
	}
	#topnav-search .app-search {
		width: 100% !important;
		max-width: 100% !important;
		height: 38px !important;
	}
	.app-search {
		max-width: 100% !important;
	}
	/* Select2 appends the real input in a second box on <body>. width:100%
	   plus that box's left offset ran past the viewport and covered the page.
	   Park it in the header field; only the results list hangs below. */
	.select2-container--open:has(> .bigdrop) {
		top: 56px !important;
		left: 10px !important;
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
		right: auto !important;
	}
	.bigdrop {
		width: 100% !important;
		max-width: 100% !important;
		left: 0 !important;
		box-sizing: border-box !important;
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		overflow: visible !important;
	}
	.bigdrop .select2-search--dropdown {
		padding: 0 !important;
		background: transparent !important;
	}
	.bigdrop .select2-search--dropdown .select2-search__field {
		width: 100% !important;
		height: 38px !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	#topnav-search.active .select2-container--open .select2-selection {
		visibility: hidden !important;
	}
	.bigdrop .select2-results:not(:has(.select2-results__option:not(.select2-results__message))) {
		display: none !important;
	}
	.bigdrop .select2-results {
		margin-top: 6px;
		background: var(--xui-dropdown-bg) !important;
		border: 1px solid var(--xui-dropdown-divider) !important;
		border-radius: var(--ct-field-radius, 4px) !important;
		box-shadow: var(--xui-shadow-dropdown) !important;
		overflow: hidden;
	}
	body:not(.sl-admin):not(.sl-modal):has(#topnav-search.active) .wrapper {
		padding-top: 66px !important;
	}
	body.sl-admin:not(.sl-modal):has(#topnav-search.active) .wrapper {
		top: calc(var(--sl-top-h, 50px) + 56px) !important;
	}
	.card-search .pro-user-name {
		display: block !important;
	}
	.action-block {
		font-size: 80%;
		zoom: 0.75;
		-moz-transform: scale(0.75);
	}
	.action-block .btn-xs {
		font-size: .65rem !important;
	}
	.pd-left {
		padding-left: 5px !important;
	}
	.pd-right {
		padding-right: 5px !important;
	}
	.action-block .btn-fixed-xl {
		min-width: 96px !important;
	}
}

.btn-copy-hostval--inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 2px;
	margin: 0 0 0 2px;
	border: none;
	background: transparent;
	color: inherit;
	opacity: 0.65;
	vertical-align: middle;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
}
.btn-copy-hostval--inline:hover,
.btn-copy-hostval--inline:focus {
	opacity: 1;
	outline: none;
}

.line-client-cell {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}
.line-last-meta__row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	gap: 2px;
	line-height: 1.5;
	white-space: nowrap;
}
.line-last-meta__row--host {
	line-height: 18px;
}
.line-last-meta__host {
	display: block;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 18px;
}
.line-client-cell .btn-copy-hostval--inline {
	margin: 0;
}

.table-trunc-copy-cell {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	vertical-align: middle;
	box-sizing: border-box;
}

.table-trunc-copy-cell--center {
	justify-content: center;
}

.table-trunc-copy-cell__text {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table-trunc-copy-cell .btn-copy-hostval--inline {
	flex: 0 0 16px;
	width: 16px;
	flex-shrink: 0;
}

.table-trunc-copy-cell__link {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	display: block;
	color: inherit;
	text-decoration: none;
}

.table-trunc-copy-cell__link:hover,
.table-trunc-copy-cell__link:focus {
	color: inherit;
	text-decoration: underline;
}

/* Clip trunc+copy cells so the copy icon never spills into the next column (e.g. Image). */
table.dataTable tbody td:has(> .table-trunc-copy-cell),
table.dataTable tbody td:has(> .btn-copy-hostval--inline),
table.dataTable tbody td:has(> a + .btn-copy-hostval--inline) {
	overflow: hidden;
	vertical-align: middle;
}

/* Name row: title+copy on first line; category / meta stay below */
table.dataTable tbody td > .table-trunc-copy-cell {
	width: 100%;
	max-width: 100%;
}

/* ID column: room for digits + copy without crowding Image.
   Direct children of the main DataTable only — never nested .table-data. */
#datatable-streampage > thead > tr > th:first-child,
#datatable-streampage > tbody > tr > td:first-child,
#datatable-streampage_wrapper .dataTables_scrollHead > .dataTables_scrollHeadInner > table > thead > tr > th:first-child,
#datatable-streampage_wrapper .dataTables_scrollBody > table > tbody > tr > td:first-child {
	min-width: 92px;
	max-width: 110px;
}

.table-lc-overflow-cell {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	max-width: 100%;
}
.dataTables_empty,
table.dataTable tbody td.dataTables_empty {
	padding: 12px !important;
	text-align: center !important;
	vertical-align: middle !important;
}
div.dataTables_scrollBody {
	min-height: 2.75rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	min-height: 1.75rem;
}

/* Global update availability banner (above #topnav) */
.xui-update-banner {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
	height: 40px;
	background: var(--xui-update-banner-bg, #eff6ff);
	color: var(--xui-update-banner-text, #1e3a8a);
	border-bottom: 1px solid var(--xui-update-banner-border, #bfdbfe);
	box-shadow: var(--xui-update-banner-shadow, 0 1px 0 rgba(15, 23, 42, 0.04));
}
html.xui-update-banner-visible .xui-update-banner {
	display: block;
}
html.xui-update-banner-visible #topnav {
	top: 40px;
}
html.xui-update-banner-visible .wrapper {
	padding-top: 130px;
}
/* Classic layout: banner adds 40px on top of the normal 90px header offset.
   Sidebar layout (desktop): same 40px on top of its slimmer 50px header —
   needs higher specificity than sidebar-layout.css's own !important top. */
html.xui-update-banner-visible body:not(.sl-admin):not(.sl-modal) .wrapper {
	top: 130px;
	padding-top: 12px !important;
}
html.xui-update-banner-visible body.sl-admin:not(.sl-modal) .wrapper {
	top: 90px !important;
	padding-top: 12px !important;
}
/* Sidebar layout (desktop): the header bar, logo box, and sidebar nav are
   pinned to top:0 with their own !important + higher z-index than the
   banner, so without this they paint over it and hide it entirely. */
@media (min-width: 992px) {
	html.xui-update-banner-visible body.sl-admin:not(.sl-modal) #topnav .navbar-custom,
	html.xui-update-banner-visible body.sl-admin:not(.sl-modal) #topnav .logo-box {
		top: 40px !important;
	}
	html.xui-update-banner-visible body.sl-admin:not(.sl-modal) #topnav .topbar-menu {
		top: calc(var(--sl-top-h) + 40px) !important;
	}
	/* #navigation's min-height fills .topbar-menu exactly in the normal case;
	   without shrinking it here too, it stays 40px taller than the now-shorter
	   .topbar-menu and forces an unwanted scrollbar even for a short menu. */
	html.xui-update-banner-visible body.sl-admin:not(.sl-modal) #topnav #navigation {
		min-height: calc(100vh - var(--sl-top-h) - 40px) !important;
	}
}
@media (max-width: 991px) {
	/* Both layouts collapse to the classic mobile header at this width. */
	html.xui-update-banner-visible .wrapper {
		padding-top: 90px !important;
	}
	html.xui-update-banner-visible body:not(.sl-modal) .wrapper {
		top: 90px !important;
		padding-top: 12px !important;
	}
}
.xui-update-banner__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 10px;
	height: 100%;
	padding: 0 44px 0 16px;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
}
.xui-update-banner__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--xui-update-banner-icon, #2563eb);
	font-size: 16px;
	line-height: 1;
}
.xui-update-banner__text {
	color: var(--xui-update-banner-text, #1e3a8a);
	font-weight: 500;
	white-space: nowrap;
}
.xui-update-banner__version {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--xui-update-banner-version-bg, #dbeafe);
	color: var(--xui-update-banner-version-text, #1e40af);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.xui-update-banner__link.btn,
a.xui-update-banner__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-inline-start: 4px;
	padding: 3px 12px;
	min-height: 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--xui-update-banner-cta-bg, #0f172a) !important;
	border-color: var(--xui-update-banner-cta-bg, #0f172a) !important;
	color: var(--xui-update-banner-cta-text, #ffffff) !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none !important;
	box-shadow: none !important;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.xui-update-banner__link.btn:hover,
.xui-update-banner__link.btn:focus,
a.xui-update-banner__link:hover,
a.xui-update-banner__link:focus {
	background: var(--xui-update-banner-cta-hover, #1e293b) !important;
	border-color: var(--xui-update-banner-cta-hover, #1e293b) !important;
	color: var(--xui-update-banner-cta-text, #ffffff) !important;
	text-decoration: none !important;
	outline: none;
	box-shadow: none !important;
}
.xui-update-banner__dismiss {
	position: absolute;
	inset-inline-end: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--xui-update-banner-dismiss, #64748b);
	font-size: 18px;
	line-height: 1;
	width: 28px;
	height: 28px;
	padding: 0;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.xui-update-banner__dismiss:hover,
.xui-update-banner__dismiss:focus {
	color: var(--xui-update-banner-dismiss-hover, #0f172a);
	background: var(--xui-update-banner-dismiss-bg-hover, rgba(15, 23, 42, 0.06));
	outline: none;
}
@media (max-width: 575.98px) {
	.xui-update-banner__inner {
		gap: 8px;
		justify-content: flex-start;
		padding-inline-start: 12px;
		font-size: 12px;
	}
	.xui-update-banner__text {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* From modals.php — provider streams toolbar / logo font picker */
.provider-streams-toolbar-field .provider-streams-toolbar-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--xui-text-muted);
	line-height: 1.2;
}
.provider-streams-toolbar-field .form-control,
.provider-streams-toolbar-field .select2-container--default .select2-selection--single {
	height: calc(1.5em + 0.75rem + 2px);
	min-height: 38px;
	font-size: 0.875rem;
	border-color: var(--xui-input-border);
	border-radius: 0.2rem;
}
.provider-streams-toolbar-field .select2-container {
	width: 100% !important;
}
.provider-streams-toolbar-field .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: calc(1.5em + 0.75rem);
	padding-left: 0.75rem;
	color: var(--xui-text-muted);
}
.provider-streams-toolbar-field .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: calc(1.5em + 0.75rem);
}
/* Keep Provider / Show / Search on one baseline. The shared page-length rules
   collapse the Show column and vertically center the row, which drops Search. */
.provider-streams-toolbar.row {
	align-items: flex-end;
}
.provider-streams-toolbar.row > .provider-streams-toolbar-field {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
}
.provider-streams-toolbar #provider_streams_dt_filter,
.provider-streams-toolbar #provider_movies_dt_filter {
	width: 100%;
}
.provider-streams-toolbar #provider_streams_dt_filter input,
.provider-streams-toolbar #provider_movies_dt_filter input {
	display: block;
	width: 100%;
	height: 38px;
	min-height: 38px;
	margin: 0;
}
.provider-streams-toolbar .xui-page-length {
	height: 38px;
	align-items: center;
}
.provider-streams-toolbar .xui-page-length .select2-container .select2-selection--single {
	height: 38px !important;
}
.provider-streams-toolbar .xui-page-length .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 36px !important;
}
.provider-streams-toolbar .xui-page-length .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 36px !important;
}
@media (min-width: 768px) {
	.provider-streams-toolbar.row {
		flex-wrap: nowrap;
	}
	.provider-streams-toolbar.row > .provider-streams-toolbar-field {
		flex: 0 0 33.333333%;
		width: 33.333333%;
		max-width: 33.333333%;
	}
}
.bs-provider-streams-modal-center .provider-stream-check-cell,
.bs-provider-movies-modal-center .provider-stream-check-cell {
	width: 42px;
	vertical-align: middle;
}
.bs-provider-streams-modal-center .provider-stream-check-cell .checkbox,
.bs-provider-movies-modal-center .provider-stream-check-cell .checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 18px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
.bs-provider-streams-modal-center .provider-stream-check-cell .checkbox label,
.bs-provider-movies-modal-center .provider-stream-check-cell .checkbox label {
	padding-left: 0;
	margin: 0;
}
.provider-streams-btn-row {
	flex-wrap: nowrap;
}
.provider-streams-btn-row > [class*="col-"] {
	min-width: 0;
}
.provider-streams-btn-row .provider-streams-btn {
	white-space: nowrap;
	padding-left: 0.35rem;
	padding-right: 0.35rem;
}
.provider-streams-btn:disabled {
	background-color: var(--xui-border) !important;
	border-color: var(--xui-border) !important;
	color: var(--xui-text-muted) !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}
.provider-streams-btn.btn-info:not(:disabled):not(.is-disabled) {
	background-color: var(--xui-accent) !important;
	border-color: var(--xui-accent) !important;
	color: var(--xui-on-accent) !important;
}
.provider-streams-btn.btn-primary:not(:disabled):not(.is-disabled) {
	background-color: var(--xui-btn-primary) !important;
	border-color: var(--xui-btn-primary) !important;
	color: var(--xui-on-dark-fill, #ffffff) !important;
}
.provider-streams-btn.btn-secondary:not(:disabled):not(.is-disabled) {
	background-color: var(--xui-text-muted) !important;
	border-color: var(--xui-text-muted) !important;
	color: var(--xui-on-dark-fill, #ffffff) !important;
}
.logo-font-item {
	display: block;
	width: 100%;
	padding: 7px 10px;
	border: 0;
	background: var(--xui-bg-card);
	color: var(--xui-text);
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}
.logo-font-item:hover {
	background: var(--xui-bg-page);
	color: var(--xui-text);
}
.logo-font-item.active {
	background: var(--xui-accent-soft);
	color: var(--xui-accent-hover);
}

/* Lock parent-page scroll while a modal is open. */
html.xui-modal-open,
html.xui-modal-open body {
	overflow: hidden !important;
	/* height: 100%; */
	min-height: 100vh;
	overscroll-behavior: none;
}
html.xui-modal-open #topnav,
html.xui-modal-open #topnav .topbar-menu,
html.xui-modal-open #navigation,
html.xui-modal-open .footer {
	overflow: hidden !important;
}
/* .wrapper is the real scroll container in every layout now (see app.css) —
   deliberately not touched here. Any overflow/scrollbar-visibility change on
   modal open reflows the content box (confirmed: hiding a shown scrollbar
   always frees its layout space, gutter reservation or not). Leaving it
   alone keeps its scrollbar exactly as it was, so nothing shifts.
   Background scroll is already blocked by the backdrop + wheel/touch/key
   listeners in xuiLockPageScroll. */
/* Scroll lock uses position:fixed + scrollbar-gutter; Bootstrap/jBox padding is not needed. */
body.modal-open,
html.xui-modal-open body.unscrollable {
	padding-right: 0 !important;
	overflow: hidden !important;
}

/* Post-login advertise modal */
.xui-ad-modal {
	overflow: auto;
	padding-right: 0 !important;
}
.xui-ad-modal .modal-dialog {
	width: auto;
	max-width: none;
	margin: 0.75rem auto;
}
.xui-ad-modal__panel {
	border: 0 !important;
	border-radius: 0 !important;
	overflow: hidden;
	box-shadow: none !important;
	background: transparent !important;
	width: auto !important;
	display: inline-block;
	position: relative;
}
.xui-ad-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--xui-btn-dark) 72%, transparent);
	color: var(--xui-on-dark-fill, #ffffff);
	font-size: 22px;
	line-height: 30px;
	cursor: pointer;
	opacity: 0.92;
}
.xui-ad-modal__close:hover,
.xui-ad-modal__close:focus {
	opacity: 1;
	background: color-mix(in srgb, var(--xui-btn-dark) 92%, transparent);
	outline: none;
}
.xui-ad-modal__frame {
	display: block;
	width: 0;
	height: 0;
	border: 0;
	background: transparent;
	vertical-align: top;
}
.xui-ad-modal__html {
	display: none !important;
}
@media (max-width: 575.98px) {
	.xui-ad-modal .modal-dialog {
		margin: 0.5rem;
	}
}

/* Page-level horizontal pan (iPhone / iOS): content already fits the device,
   but overflow:auto on full-width ancestors still rubber-bands the viewport.
   Inner scrollers (DataTables scrollX, listings, dashboard tabs) are unchanged. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}
body:not(.sl-modal) .wrapper {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	padding-top: 0px;
}
/* iOS only. overscroll-behavior-x:none on the document also kills vertical
   touch-scroll on the Z Fold. -webkit-touch-callout exists only in Safari. */
@supports (-webkit-touch-callout: none) {
	html, body,
	body:not(.sl-modal) .wrapper {
		overscroll-behavior-x: none;
	}
}
#topnav,
#topnav .navbar-custom {
	max-width: 100%;
}

/* Phone: a label and its switch were stacking, and the switch sat in from
   the left. Keep the label on the left and the switch on the right. Two
   pairs in one row become two rows. A date, select, or notes field that
   shares the row stays full width underneath its own label. */
@media (max-width: 767.98px) {
	.form-group.row:has(> [class*="col-"] > .js-switch) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 1rem;
		row-gap: 0.85rem;
		align-items: center;
		margin-left: 0;
		margin-right: 0;
	}

	.form-group.row:has(> [class*="col-"] > .js-switch) > label.col-form-label,
	.form-group.row:has(> [class*="col-"] > .js-switch) > [class*="col-"] {
		width: auto;
		max-width: none;
		flex: none;
		margin-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.form-group.row:has(> [class*="col-"] > .js-switch) > label.col-form-label {
		padding-top: 0;
		padding-bottom: 0;
	}

	.form-group.row:has(> [class*="col-"] > .js-switch) > [class*="col-"]:has(> .js-switch) {
		justify-self: end;
	}

	.form-group.row:has(> [class*="col-"] > .js-switch) > [class*="col-"]:has(> .form-control):not(:has(> select)):not(:has(> textarea)):not(:has(> .form-control.date)) {
		width: 7.5rem;
		justify-self: end;
	}

	.form-group.row:has(> [class*="col-"] > .js-switch) > label.col-form-label:has(+ [class*="col-"] > .form-control.date),
	.form-group.row:has(> [class*="col-"] > .js-switch) > label.col-form-label:has(+ [class*="col-"] > select),
	.form-group.row:has(> [class*="col-"] > .js-switch) > label.col-form-label:has(+ [class*="col-"] > textarea),
	.form-group.row:has(> [class*="col-"] > .js-switch) > label.col-form-label:has(+ [class*="col-"].input-group),
	.form-group.row:has(> [class*="col-"] > .js-switch) > [class*="col-"]:has(> .form-control.date),
	.form-group.row:has(> [class*="col-"] > .js-switch) > [class*="col-"]:has(> select),
	.form-group.row:has(> [class*="col-"] > .js-switch) > [class*="col-"]:has(> textarea),
	.form-group.row:has(> [class*="col-"] > .js-switch) > [class*="col-"].input-group,
	.form-group.row:has(> [class*="col-"] > .js-switch) > table,
	.form-group.row:has(> [class*="col-"] > .js-switch) > .dataTables_wrapper,
	.form-group.row:has(> [class*="col-"] > .js-switch) > p {
		grid-column: 1 / -1;
		width: 100%;
		max-width: none;
		justify-self: stretch;
	}

	.form-group.row:has(> .checkbox):has(> [class*="col-"] > .js-switch) {
		grid-template-columns: 1.35rem minmax(0, 1fr) auto;
	}

	.form-group.row:has(> .checkbox):has(> [class*="col-"] > .js-switch) > .checkbox {
		grid-column: 1;
		width: auto;
		margin: 0;
		padding: 0;
	}

	.form-group.row:has(> .checkbox):has(> [class*="col-"] > .js-switch) > label.col-form-label {
		grid-column: 2;
	}

	.form-group.row:has(> .checkbox):has(> [class*="col-"] > .js-switch) > [class*="col-"]:has(> .js-switch) {
		grid-column: 3;
		justify-self: end;
	}
}

/* DataTables "Show N entries" is a short field inside the sentence.
   extra.css width:100% would stretch that Select2 across the row. */
div.dataTables_wrapper div.dataTables_length label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0;
}

div.dataTables_wrapper div.dataTables_length label > .mdi {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--xui-text-muted);
	flex-shrink: 0;
}

.dataTables_length .select2-container {
	width: 5.5rem !important;
	min-width: 5.5rem;
	vertical-align: middle;
}

.dataTables_length .select2-container .select2-selection--single {
	height: 2rem !important;
}

.dataTables_length .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.9rem !important;
	padding-left: 0.65rem !important;
	padding-right: 1.6rem !important;
	font-size: 0.875rem !important;
}

.dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 1.85rem !important;
	width: 1.5rem !important;
}

.xui-page-length {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: auto;
	max-width: 100%;
	min-width: 0;
	flex: 0 1 auto;
	margin-bottom: 0;
}

.xui-page-length > .mdi {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--xui-text-muted);
	flex-shrink: 0;
}

.xui-page-length .select2-container {
	width: 5.5rem !important;
	min-width: 0 !important;
	max-width: min(5.5rem, 100%) !important;
	flex: 0 1 5.5rem !important;
}

.xui-page-length > select.form-control {
	width: 5.5rem !important;
	min-width: 0 !important;
	max-width: min(5.5rem, 100%) !important;
	flex: 0 1 5.5rem;
	height: 2rem;
	padding-top: 0;
	padding-bottom: 0;
	border: 1px solid var(--xui-border);
	border-radius: 6px;
	background: var(--xui-input-bg, var(--xui-bg-card));
	color: var(--xui-text);
	box-shadow: none;
}

.xui-page-length > select.form-control:focus {
	border-color: var(--xui-accent);
	box-shadow: 0 0 0 3px var(--xui-input-focus-ring);
}

.xui-page-length .select2-container .select2-selection--single {
	height: 2rem !important;
}

.xui-page-length .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.9rem !important;
}

.xui-page-length .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 1.85rem !important;
}

/* Page-size control stays on the filter row. Sibling filters shrink so the
   control does not drop onto a second line when the sidebar narrows the page.
   Match only the row that owns those columns. A broader :has() also hits the
   page card row (the control sits inside the card) and max-width:100% there
   clamps Bootstrap's negative margins, so the card ends short on the right. */
.row:has(> [class*="col-"] > .xui-page-length),
.row:has(> .um-filter-actions > [class*="col-"] > .xui-page-length) {
	min-width: 0;
}

.row:has(> [class*="col-"] > .xui-page-length) > [class*="col-"],
.row:has(> .um-filter-actions > [class*="col-"] > .xui-page-length) > [class*="col-"],
.row > .um-filter-actions:has([class*="col-"] > .xui-page-length) > [class*="col-"] {
	min-width: 0;
	flex-shrink: 1;
}

.row:not(.provider-streams-toolbar) [class*="col-"]:has(> .xui-page-length) {
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
}

@media (min-width: 768px) {
	.row:not(.provider-streams-toolbar):has(> [class*="col-"] > .xui-page-length),
	.row:has(> .um-filter-actions > [class*="col-"] > .xui-page-length) {
		flex-wrap: nowrap;
		align-items: center;
	}

	.row:not(.provider-streams-toolbar):has(> [class*="col-"] > .xui-page-length) > [class*="col-"]:has(> .xui-page-length),
	.row:has(> [class*="col-"] > .xui-page-length) > label.col-form-label,
	.row > .um-filter-actions > [class*="col-"]:has(> .xui-page-length),
	.row > .um-filter-actions > [class*="col-"]:has(> .btn) {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}

	.row:has(> [class*="col-"] > .xui-page-length) > label.col-form-label {
		padding-top: 0;
		padding-bottom: 0;
		white-space: nowrap;
	}

	/* These bars are built to wrap onto a second row. */
	#sc-filters.row,
	#cf-table-filters.row {
		flex-wrap: wrap;
		align-items: flex-start;
	}
}

body > .select2-container--open:has(> .dt-length-select2-dropdown) {
	z-index: 2000;
}

div.dataTables_wrapper div.dataTables_filter label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0;
}

div.dataTables_wrapper div.dataTables_filter label > .mdi {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--xui-text-muted);
}

div.dataTables_wrapper div.dataTables_filter input {
	height: 2rem;
	min-width: 10rem;
	margin-left: 0 !important;
	border: 1px solid var(--xui-border) !important;
	border-radius: 6px;
	background: var(--xui-input-bg, var(--xui-bg-card)) !important;
	color: var(--xui-text) !important;
	box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
	border-color: var(--xui-accent) !important;
	box-shadow: 0 0 0 3px var(--xui-input-focus-ring) !important;
}

/* Same 10px gap as #collapse_filters. Hidden toolbars (display:none) add no space.
   Specificity stays below page toolbars that zero their own margin. */
@media (min-width: 768px) {
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter {
		margin-bottom: 10px;
	}
}

.xui-table-search {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	margin-bottom: 0;
}

.xui-table-search > .mdi {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--xui-text-muted);
	flex-shrink: 0;
}

.xui-table-search > .form-control {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 38px;
	margin-left: 0;
	border: 1px solid var(--xui-border) !important;
	border-radius: 6px;
	background: var(--xui-input-bg, var(--xui-bg-card)) !important;
	color: var(--xui-text) !important;
	box-shadow: none !important;
}

.xui-table-search > .form-control:focus {
	border-color: var(--xui-accent) !important;
	box-shadow: 0 0 0 3px var(--xui-input-focus-ring) !important;
}

.xui-table-search > .form-control.form-control-sm {
	height: calc(1.5em + 0.5rem + 2px);
}

@media (max-width: 767.98px) {
	div.dataTables_wrapper div.dataTables_length,
	div.dataTables_wrapper div.dataTables_filter {
		text-align: left;
		float: none;
		width: 100%;
	}

	div.dataTables_wrapper div.dataTables_length label,
	div.dataTables_wrapper div.dataTables_filter label {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		width: 100%;
		margin-bottom: 0.75rem;
		white-space: nowrap;
	}

	.dataTables_length .select2-container,
	.dataTables_length .select2-container .select2-selection--single {
		height: 38px !important;
	}

	.dataTables_length .select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 36px !important;
	}

	.dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 36px !important;
	}

	div.dataTables_wrapper div.dataTables_filter input {
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
		height: 38px;
		margin-left: 0 !important;
		border: 1px solid var(--ct-field-border) !important;
		border-radius: var(--ct-field-radius, 6px) !important;
		background: var(--ct-field-bg) !important;
		color: var(--ct-field-text) !important;
		box-shadow: none;
	}

	div.dataTables_wrapper div.dataTables_filter input:focus {
		border-color: var(--ct-accent) !important;
		box-shadow: 0 0 0 3px var(--ct-field-focus-ring) !important;
	}
}

@media (min-width: 768px) {
	.mass-expiry-inline {
		display: contents;
	}
}

@media (max-width: 767.98px) {
	.mass-expiry-inline {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		width: 100%;
		min-width: 0;
	}

	.mass-expiry-inline > [class*="col-"] {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.mass-expiry-inline > .col-md-3 {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mass-expiry-inline > .col-md-1 {
		flex: 0 0 auto;
	}

	.mass-expiry-inline .custom-control {
		margin: 0;
		min-height: 0;
		white-space: nowrap;
	}
}

#header-check-update.is-busy {
	pointer-events: none;
	opacity: 0.65;
}

/* RO VIEW header sizing: scoped to the restored branding asset. */
#topnav .logo-box img[src*="logo-topbar-denistrist"],
#topnav .logo-box img[src*="ro-view"] {
    height: 44px !important;
    width: auto !important;
    max-height: 44px !important;
    object-fit: contain;
    vertical-align: middle;
}

/* RO VIEW login branding, adapted for XUI 1.7. */
body.bg-animate .auth-brand img[src$="/logo.png"],
body.bg-animate .account-pages .text-center img[src$="/logo.png"] {
  width: 180px !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  filter: none !important;
  opacity: 1 !important;
}