:root
{

	--sc-bg: #0a1220;
	--sc-bg2: #0f1a2f;
	--sc-card: #111d33;
	--sc-fg: #e8eef8;
	--sc-mut: #9db0c9;
	--sc-line: #274066;
	--sc-blue: #3b82f6;
	--sc-blue2: #60a5fa;
	--sc-blue-soft: #163056;
	--sc-ok: #38bdf8;
	--sc-bad: #f87171;
	--sc-warn: #fbbf24;
	--sc-ok-bg: rgba(56, 189, 248, .14);
	--sc-bad-bg: rgba(248, 113, 113, .14);
	--sc-warn-bg: #3a2e14;
	--sc-radius: 10px;
	--sc-radius-sm: 6px;
	--sc-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 18px rgba(59, 130, 246, .12);

}
html,
body,
.OuterPanel,
.MainPanel,
.Page,
.Host,
.Main,
.MasterPanel,
.ContentPanel,
.DetailPanel,
.MainDetailPanel,
.SubDetailPanel,
.MainDetailHeaderPanel,
.AdministrationPanel,
.AdministrationContentPanel,
.InfoPanel,
.ActionPanel,
.WelcomePanel,
.SessionPanel,
.GroupPanel,
.FilterPanel
{

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;
	font-family: Segoe UI, system-ui, -apple-system, sans-serif !important;

}
html,
body
{
 background-image: none !important; 
}
a
{
 color: var(--sc-blue) !important; 
}
a:hover
{
 color: var(--sc-blue2) !important; 
}
.HeaderPanel,
.GlobalBar,
.NavigationPanel,
.TrayPanel,
.TrayIconPanel,
.CommandPanel,
.UserMenuButton,
.StartButton
{

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;
	border-color: var(--sc-line) !important;
	box-shadow: none !important;

}
.HeaderPanel
{
 border-bottom: 1px solid var(--sc-line) !important; 
}
.NavigationPanel
{
 border-right: 1px solid var(--sc-line) !important; background: var(--sc-bg2) !important; 
}
.GlobalBar
{
 border-bottom: 1px solid var(--sc-line) !important; background: var(--sc-bg2) !important; 
}
.LogoPanel,
h1.LogoPanel
{

	color: var(--sc-fg, #e8eef8) !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	background-image: none !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;

}
.LogoHeadingVisible .LogoPanel:after,
html.LogoHeadingVisible .LogoPanel:after
{

	content: "SCREEM" !important;
	color: var(--sc-blue2, #60a5fa) !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	letter-spacing: .1em !important;
	font-weight: 800 !important;
	text-shadow: none !important;
	font-size: 18px !important;
	line-height: 1 !important;

}
.LogoIconLink,
html.LogoIconVisible .LogoIconLink,
.LogoIconVisible .HeaderPanel .LogoIconLink,
.HeaderPanel .LogoIconLink,
.LoginPage .LogoIconLink,
.GuestPage .LogoIconLink,
.ChangePasswordPage .LogoIconLink
{

	background-color: transparent !important;
	background-image: url("screem-icon.png?v=face4") !important;
	background-size: 36px 36px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	width: 52px !important;
	min-width: 52px !important;
	min-height: 48px !important;
	opacity: 1 !important;
	filter: none !important;
	visibility: visible !important;
	flex: 0 0 52px !important;

}
html.LogoImageVisible .LogoPanel,
.LogoImageVisible .LogoPanel
{

	background-image: none !important;
	padding-left: 0 !important;

}
.HeaderPanel .LogoIconLink img.screemFaceLogo,
.LogoIconLink img.screemFaceLogo
{

	display: block !important;
	width: 36px !important;
	height: 36px !important;
	margin: 6px auto !important;
	object-fit: contain !important;
	border-radius: 8px !important;

}
.LoginPage .ContentPanel,
.ChangePasswordPage .ContentPanel,
.GuestPage .ContentPanel,
.LoginPage .ContentPanel.Authentication
{

	background-image: none !important;
	background: var(--sc-bg) !important;

}
.FinishImage,
.WelcomeImage,
img[src*="LicenseIcon"],
img[src*="WelcomeImage"],
img[src*="FinishImage"]
{
 display: none !important; 
}
.GuestPage .WelcomePanel
{
 background-image: none !important; 
}
.NavigationPanel > div
{

	color: var(--sc-fg) !important;
	cursor: pointer;
	border-left: 3px solid transparent;
	background: transparent !important;

}
.NavigationPanel > div img
{
 filter: none !important; opacity: .85; 
}
.NavigationPanel > div.Selected,
.NavigationPanel > .ScreemJsNav:hover,
.NavigationPanel > .HlNav:hover,
.ScreemJsNav.Selected,
.HlNav.Selected,
.SettingsNav.Selected
{

	background: var(--sc-blue-soft) !important;
	color: var(--sc-blue2) !important;
	border-left-color: var(--sc-blue) !important;

}
.NavigationPanel > div.Selected img,
.ScreemJsNav.Selected img,
.HlNav.Selected img
{
 filter: none !important; opacity: 1; 
}
.NavigationPanel > .ScreemJsNav,
.NavigationPanel > .HlNav,
.NavigationPanel > .SettingsNav
{

	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	min-height: 46px !important;
	padding: 5px 3px !important;
	margin: 1px 0 !important;
	color: var(--sc-fg) !important;
	cursor: pointer !important;
	border-left: 3px solid transparent !important;
	background: transparent !important;
	opacity: 1 !important;
	visibility: visible !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	font-weight: 700 !important;
	font-size: 9px !important;
	line-height: 1.1 !important;

}
.NavigationPanel > .ScreemJsNav img,
.NavigationPanel > .HlNav img,
.NavigationPanel > .SettingsNav img,
.NavigationPanel > div.ScreemJsNav img,
.NavigationPanel > div.HlNav img,
.NavigationPanel > div.SettingsNav img
{

	width: 24px !important;
	height: 24px !important;
	margin: 2px !important;
	filter: none !important;
	opacity: .9 !important;
	display: block !important;
	object-fit: contain !important;

}
.NavigationPanel > div img[src*="NavigationScreem"],
.NavigationPanel > div img[src*="NavigationHookLogs"],
.NavigationPanel > div img[src*="NavigationAccess"],
.NavigationPanel > div img[src*="NavigationSupport"],
.NavigationPanel > div img[src*="NavigationMeeting"],
.NavigationPanel > div img[src*="NavigationAdministration"],
.NavigationPanel > div img[src*="NavigationSettings"]
{

	width: 24px !important;
	height: 24px !important;
	margin: 2px !important;

}
.NavigationPanel > .ScreemJsNav .ScreemNavLabel,
.NavigationPanel > .HlNav .ScreemNavLabel,
.NavigationPanel > .SettingsNav .ScreemNavLabel
{

	display: block !important;
	color: inherit !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 9px !important;
	white-space: nowrap !important;

}
.NavigationPanel > .ScreemJsNav:hover,
.NavigationPanel > .HlNav:hover,
.NavigationPanel > .SettingsNav:hover
{

	background: var(--sc-blue-soft) !important;
	border-left-color: var(--sc-blue) !important;

}
.NavigationPanel > .ScreemJsNav.Selected,
.NavigationPanel > .HlNav.Selected,
.NavigationPanel > .SettingsNav.Selected,
.NavigationPanel > .ScreemJsNav[aria-current="page"],
.NavigationPanel > .HlNav[aria-current="page"],
.NavigationPanel > .SettingsNav[aria-current="page"]
{

	background: var(--sc-blue) !important;
	color: #fff !important;
	border-left-color: var(--sc-blue2) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);

}
.NavigationPanel > .ScreemJsNav.Selected .ScreemNavLabel,
.NavigationPanel > .HlNav.Selected .ScreemNavLabel,
.NavigationPanel > .SettingsNav.Selected .ScreemNavLabel,
.NavigationPanel > .ScreemJsNav[aria-current="page"] .ScreemNavLabel,
.NavigationPanel > .HlNav[aria-current="page"] .ScreemNavLabel,
.NavigationPanel > .SettingsNav[aria-current="page"] .ScreemNavLabel
{

	color: #fff !important;
	font-weight: 800 !important;

}
.NavigationPanel > .ScreemJsNav.Selected img,
.NavigationPanel > .HlNav.Selected img,
.NavigationPanel > .SettingsNav.Selected img,
.NavigationPanel > .ScreemJsNav[aria-current="page"] img,
.NavigationPanel > .HlNav[aria-current="page"] img,
.NavigationPanel > .SettingsNav[aria-current="page"] img
{

	filter: none !important;
	opacity: 1 !important;

}
#screemJsMain,
#screemHlMain
{

	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	
	z-index: 200;
	background: var(--sc-bg) !important;
	opacity: 1;

}
body:has(#screemJsMain:not([style*="display: none"])) .ResizeHandleBar,
body:has(#screemHlMain:not([style*="display: none"])) .ResizeHandleBar
{

	pointer-events: none !important;

}
#screemJsMain iframe,
#screemHlMain iframe
{

	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--sc-bg) !important;
	opacity: 1;

}
.MainPanel
{
 position: relative !important; 
}
.screem-banner
{
 display: none !important; 
}
.JoinButtonPanel
{

	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;

}
input.ScreemAddScope[type=button],
.JoinButtonPanel .HlAddScopeBtn,
.JoinButtonPanel .ScreemAddScope
{

	background: var(--sc-blue) !important;
	color: #fff !important;
	border: 1px solid var(--sc-blue2) !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: 7px 12px !important;
	border-radius: 6px !important;
	cursor: pointer !important;

}
.JoinButtonPanel .HlAddScopeBtn:hover,
input.ScreemAddScope[type=button]:hover
{

	background: var(--sc-blue2) !important;

}
button,
.Button,
input[type=button],
input[type=submit],
.CommandButton,
a.Button
{

	border-radius: var(--sc-radius-sm) !important;
	background: var(--sc-blue) !important;
	color: #fff !important;
	border: 1px solid var(--sc-blue2) !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	font-weight: 700 !important;
	text-transform: none !important;
	padding: 8px 14px !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.08) inset !important;

}
button:hover,
.Button:hover,
input[type=button]:hover,
input[type=submit]:hover,
.CommandButton:hover,
a.Button:hover
{

	background: var(--sc-blue2) !important;
	border-color: #93c5fd !important;

}
button.ghost,
.Button.Secondary
{

	background: var(--sc-card) !important;
	color: var(--sc-blue2) !important;
	border: 1px solid var(--sc-line) !important;
	box-shadow: none !important;

}
button.ghost:hover,
.Button.Secondary:hover
{

	background: var(--sc-blue-soft) !important;
	border-color: var(--sc-blue) !important;

}
input[type=text],
input[type=password],
input[type=email],
textarea,
select,
.AnimatedInput,
.TextBox
{

	background: var(--sc-card) !important;
	color: var(--sc-fg) !important;
	border: 1px solid var(--sc-line) !important;
	border-radius: var(--sc-radius-sm) !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	padding: 8px 11px !important;

}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
textarea:focus,
select:focus,
.AnimatedInput:focus,
.TextBox:focus
{

	outline: none !important;
	border-color: var(--sc-blue) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .22) !important;

}
.LoginPage .ContentPanel > div,
.ChangePasswordPage .ContentPanel > div,
.GuestPage .ContentPanel > div:first-child,
.Authentication
{

	background: var(--sc-bg) !important;
	border: 1px solid var(--sc-line);
	border-radius: 10px;
	padding: 28px 32px;
	max-width: 420px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

}
.LoginPage h1,
.ChangePasswordPage h1,
.GuestPage h1,
.LoginPage h2,
.GuestPage h2
{

	font-family: Segoe UI, system-ui, sans-serif !important;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--sc-blue2) !important;
	font-weight: 700 !important;

}
.AnimatedGroup label,
.LoginPage label
{

	color: var(--sc-mut) !important;
	text-transform: none;
	font-size: 12px;

}
.SessionListPanel,
.SessionGroupPanel,
.DataGrid,
table
{

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;
	border-color: var(--sc-line) !important;

}
tr.Selected,
.SelectedRow,
.SessionListPanel .Selected,
tr.Selected td,
tr.Selected th,
.DetailTable tr.Selected,
.DetailTable tr.Selected *
{

	background: var(--sc-blue-soft) !important;
	color: var(--sc-fg) !important;

}
.HlScopeStar
{

	display: inline-block;
	margin-left: 8px;
	color: var(--sc-blue) !important;
	font-size: 14px;
	line-height: 1;
	vertical-align: middle;
	text-shadow: none;

}
.HlGeo
{

	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	border: 1px solid var(--sc-line);
	border-radius: 4px;
	font-size: 10px;
	color: var(--sc-blue2) !important;
	background: var(--sc-blue-soft);
	vertical-align: middle;
	white-space: nowrap;
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;

}
.DetailTableContainer table td:first-child,
.DetailTableContainer table th:first-child,
td.ScreemIdCell
{

	min-width: 300px !important;
	width: 320px !important;
	max-width: 480px !important;
	overflow: visible !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;

}
.HlId
{

	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-width: 220px;
	vertical-align: middle;
	line-height: 1.25;
	visibility: visible !important;
	opacity: 1 !important;

}
.HlIdBadge
{

	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .05em;
	line-height: 1.35;
	text-transform: uppercase;
	white-space: nowrap;
	box-sizing: border-box;

}
.HlIdBadge.real
{

	background: rgba(56,189,248,.16) !important;
	color: var(--sc-ok) !important;
	border: 1px solid var(--sc-ok) !important;

}
.HlIdBadge.bot
{

	background: rgba(248,113,113,.16) !important;
	color: var(--sc-bad) !important;
	border: 1px solid var(--sc-bad) !important;

}
.HlIdName
{

	flex: 1 1 auto;
	min-width: 72px;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	font-size: 13px;
	color: var(--sc-fg) !important;

}
.HlIdMem
{

	flex: 0 0 auto;
	display: inline-block !important;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	background: var(--sc-blue-soft) !important;
	color: var(--sc-mut) !important;
	border: 1px solid var(--sc-line) !important;

}
.HlIdMem.bot
{

	background: rgba(248,113,113,.16) !important;
	color: var(--sc-bad) !important;
	border-color: var(--sc-bad) !important;

}
.HlDeviceTags
{

	flex: 0 0 auto;
	display: inline-block !important;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: var(--sc-blue-soft) !important;
	color: var(--sc-blue2) !important;
	border: 1px solid var(--sc-line) !important;

}
.DetailTableContainer table tr.HlIsBot td:first-child
{

	box-shadow: inset 4px 0 0 var(--sc-bad) !important;
	background: linear-gradient(90deg, rgba(248,113,113,.12), transparent 48%) !important;

}
.DetailTableContainer table tr.HlIsReal td:first-child
{

	box-shadow: inset 4px 0 0 var(--sc-ok) !important;
	background: linear-gradient(90deg, rgba(56,189,248,.12), transparent 48%) !important;

}
.DetailTableContainer table tr.HlIsBot.Selected td:first-child,
.DetailTableContainer table tr.HlIsReal.Selected td:first-child
{

	background: var(--sc-blue-soft) !important;

}
.ScreemIdCell > *:not(.HlId):not(.HlGeo):not(.HlScopeStar)
{
 display: none !important; 
}
.HlKind,
.HlKindName,
.HlKindMem,
.HlKindWarn
{
 display: none !important; 
}
.ScreemAccessLegendMount
{

	display: block !important;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 10px 0 !important;
	margin: 0 !important;
	position: relative;
	z-index: 8;
	min-height: 44px;
	visibility: visible !important;
	opacity: 1 !important;

}
.ScreemAccessLegend
{

	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 14px !important;
	margin: 0 !important;
	background: linear-gradient(180deg, #152844 0%, var(--sc-bg2) 100%) !important;
	border: 1px solid var(--sc-line) !important;
	border-left: 4px solid var(--sc-blue) !important;
	border-radius: 8px !important;
	color: var(--sc-fg) !important;
	font: 600 12px Segoe UI, system-ui, sans-serif !important;
	box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(59,130,246,.12) !important;
	visibility: visible !important;
	opacity: 1 !important;
	will-change: auto;
	pointer-events: auto !important;

}
.ScreemDeleteBotsBtn:disabled
{

	opacity: .45;
	cursor: not-allowed !important;

}
.DetailTableContainer table tr
{

	content-visibility: auto;
	contain-intrinsic-size: auto 36px;

}
.DetailTableContainer table tr.Selected
{

	content-visibility: visible;

}
@media (max-width: 720px)
{
.ScreemAccessLegend
{

		gap: 6px;
		padding: 8px !important;
		font-size: 11px !important;
	
}
.ScreemAccessLegendHint
{
 display: none !important; 
}
.HlIdName
{
 max-width: 120px !important; 
}
}
.ScreemAccessLegendTitle
{

	font-weight: 800;
	letter-spacing: .08em;
	font-size: 10px;
	color: var(--sc-mut) !important;
	margin-right: 4px;

}
.ScreemAccessLegendNum
{

	font-weight: 800;
	min-width: 1.5em;
	color: var(--sc-fg) !important;

}
.ScreemAccessLegendHint
{

	color: var(--sc-mut) !important;
	font-weight: 500;
	font-size: 11px;
	margin-left: 6px;

}
.ScreemAccessLegendMem
{

	margin-left: auto;
	color: var(--sc-blue2) !important;
	font-size: 11px;
	font-weight: 700;

}
.ScreemDeleteBotsBtn
{

	margin-left: 8px;
	padding: 4px 10px !important;
	border-radius: 6px !important;
	border: 1px solid var(--sc-bad) !important;
	background: var(--sc-bad) !important;
	color: #fff !important;
	font: 700 11px Segoe UI, system-ui, sans-serif !important;
	cursor: pointer !important;
	letter-spacing: .02em;

}
.ScreemDeleteBotsBtn:hover
{

	background: #ef4444 !important;
	border-color: #ef4444 !important;

}
.ScreemDeleteBotsHint
{

	margin-left: 8px;
	color: var(--sc-mut) !important;
	font-size: 11px;
	font-weight: 600;

}
.FilterPanel,
.DetailTableHeaderPanel,
.DetailSelectionPanel
{

	background: var(--sc-bg2) !important;
	border-color: var(--sc-line) !important;
	color: var(--sc-fg) !important;

}
.DetailTable th
{

	background: var(--sc-bg2) !important;
	color: var(--sc-mut) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	border-bottom: 1px solid var(--sc-line) !important;
	padding: 8px 10px !important;

}
.DetailTable td
{

	border-bottom: 1px solid var(--sc-line) !important;
	padding: 6px 10px !important;
	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;

}
.DetailTable tr:hover td
{

	background: var(--sc-blue-soft) !important;

}
.MainDetailHeaderPanel
{

	border-bottom: 1px solid var(--sc-line) !important;
	padding-bottom: 6px !important;

}
.CommandPanel button,
.CommandPanel .Button,
.JoinButtonPanel button,
.JoinButtonPanel input[type=button],
.HlAddScopeBtn,
.ScreemDeepTest
{

	border-radius: 6px !important;

}
.MainDetailHeaderPanel h2,
.AdministrationPage h2,
.MasterPanel h2
{

	font-family: Segoe UI, system-ui, sans-serif !important;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sc-fg) !important;
	font-weight: 700 !important;

}
.MasterPanel > div,
.AdministrationPage .MasterPanel a,
.AdministrationPage .MasterPanel div
{
 color: var(--sc-fg) !important; 
}
.MasterPanel .Selected,
.AdministrationPage .MasterPanel .Selected
{

	background: var(--sc-blue-soft) !important;
	color: var(--sc-blue2) !important;

}
.DialogPanel,
.ModalPanel,
.PopoutPanel,
.ExtrasPopout,
.ApplicationsPopout,
.HelpPopoutPanel,
.UserPopoutPanel,
.ToolboxPanel
{

	background: var(--sc-bg2) !important;
	color: var(--sc-fg) !important;
	border: 1px solid var(--sc-line) !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;

}
.DetailTable,
.DetailTable tr,
.DetailTable td,
.MasterListContainer,
.MasterPanel ul,
.MasterPanel li,
.EmptyPanel,
.NotificationPanel,
.DetailTabList,
.DetailTabContent,
.SingleSelectionPanel,
.MultiSelectionPanel,
.SubDetailHeaderPanel,
.SubDetailPanel,
.EntryHistoryPanel,
.HistoryPanel,
.ListPanel
{

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;

}
.DetailTable th
{

	background: var(--sc-bg2) !important;
	color: var(--sc-mut) !important;

}
.CommandPanel a,
.HeaderPanel a,
.GlobalBar a,
.MainDetailHeaderPanel a,
.TrayPanel a,
.StartButton
{

	color: var(--sc-fg) !important;
	background: transparent !important;

}
.HeaderPanel img,
.GlobalBar img,
.TrayIconPanel img
{

	filter: none !important;

}
*::-webkit-scrollbar
{
 width: 8px; height: 8px; 
}
*::-webkit-scrollbar-track
{
 background: var(--sc-bg2); 
}
*::-webkit-scrollbar-thumb
{
 background: #35598a; border-radius: 4px; 
}
*::-webkit-scrollbar-thumb:hover
{
 background: var(--sc-blue); 
}
*
{
 scrollbar-color: #35598a var(--sc-bg2); 
}
@media (prefers-color-scheme: dark), (prefers-color-scheme: light)
{
:root
{

		--sc-bg: #0a1220;
		--sc-bg2: #0f1a2f;
		--sc-card: #111d33;
		--sc-fg: #e8eef8;
		--sc-mut: #9db0c9;
		--sc-line: #274066;
		--sc-blue: #3b82f6;
		--sc-blue2: #60a5fa;
		--sc-blue-soft: #163056;
		--sc-ok: #38bdf8;
		--sc-bad: #f87171;
		--sc-warn: #fbbf24;
	
}
html,
body,
.OuterPanel,
.MainPanel,
.Page,
.Host,
.Main,
.MasterPanel,
.ContentPanel,
.DetailPanel,
.MainDetailPanel,
.FilterPanel,
.HeaderPanel,
.NavigationPanel,
.GlobalBar
{

		background: var(--sc-bg) !important;
		color: var(--sc-fg) !important;
	
}
.NavigationPanel,
.GlobalBar,
.FilterPanel
{
 background: var(--sc-bg2) !important; 
}
#screemJsMain,
#screemHlMain,
#screemJsMain iframe,
#screemHlMain iframe
{

		background: var(--sc-bg) !important;
	
}
}
#screemJsMain.screem-iframe-loading::after,
#screemHlMain.screem-iframe-loading::after
{

	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid var(--sc-line);
	border-top-color: var(--sc-blue);
	border-radius: 50%;
	z-index: 3;
	pointer-events: none;
	animation: screemSpin .7s linear infinite;

}
#screemJsMain.screem-iframe-loading::before,
#screemHlMain.screem-iframe-loading::before
{

	content: '';
	position: absolute;
	inset: 0;
	background: rgba(11, 18, 32, .72);
	z-index: 2;
	pointer-events: none;

}
@keyframes screemSpin
{


to
{
 transform: rotate(360deg); 
}
}
@media (prefers-reduced-motion: reduce)
{
#screemJsMain.screem-iframe-loading::after,
#screemHlMain.screem-iframe-loading::after
{

		animation: none;
		border-top-color: var(--sc-blue);
		opacity: .85;
	
}
}
#screemJsMain,
#screemHlMain
{

	background: var(--sc-bg) !important;
	box-shadow: inset 0 0 0 1px var(--sc-line);

}
#screemJsMain iframe,
#screemHlMain iframe
{

	background: var(--sc-bg) !important;

}
.DetailTabList
{

	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 8px 0 10px !important;
	border-bottom: 1px solid var(--sc-line) !important;
	background: var(--sc-bg2) !important;

}
.DetailTabList > *,
.DetailTab
{

	border-radius: 999px !important;
	padding: 7px 12px !important;
	border: 1px solid var(--sc-line) !important;
	background: var(--sc-card) !important;
	color: var(--sc-mut) !important;
	font: 700 10px Segoe UI, system-ui, sans-serif !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;

}
.DetailTabList > .Selected,
.DetailTab.Selected,
.DetailTab[aria-selected="true"]
{

	background: var(--sc-blue) !important;
	color: #fff !important;
	border-color: var(--sc-blue2) !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, .28) !important;

}
.tabs
{

	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 6px !important;
	border-bottom: 1px solid var(--sc-line) !important;
	margin: 0 0 12px !important;
	padding: 8px 0 10px !important;
	position: sticky !important;
	top: 0 !important;
	background: rgba(10, 18, 32, .94) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 30 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin !important;

}
.tab
{

	flex: 0 0 auto !important;
	position: relative !important;
	padding: 9px 14px !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
	font: 700 10px/1.1 Segoe UI, system-ui, sans-serif !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	letter-spacing: .05em !important;
	user-select: none !important;
	white-space: nowrap !important;
	background: var(--sc-card) !important;
	color: var(--sc-mut) !important;
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s !important;

}
.tab:hover
{

	background: var(--sc-blue-soft) !important;
	color: var(--sc-blue2) !important;
	border-color: var(--sc-blue) !important;

}
.tab.on,
.tab[aria-selected="true"]
{

	background: var(--sc-blue) !important;
	color: #e8eef8 !important;
	border-color: var(--sc-blue2) !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, .28) !important;

}
.tab.tab-antibot,
.tab.tab-bots
{

	border-color: var(--sc-blue) !important;
	color: var(--sc-blue2) !important;
	font-weight: 800 !important;

}
.tab.tab-antibot.on,
.tab.tab-bots.on
{

	color: #e8eef8 !important;
	border-color: var(--sc-blue2) !important;
	background: var(--sc-blue) !important;

}
.tab.hasBadge
{
 padding-right: 28px !important; 
}
.tab .tabBadge
{

	position: absolute !important;
	top: 3px !important;
	right: 6px !important;
	min-width: 16px !important;
	padding: 0 5px !important;
	border-radius: 999px !important;
	font: 800 9px/15px Segoe UI, system-ui, sans-serif !important;
	text-align: center !important;
	background: var(--sc-bg2) !important;
	color: var(--sc-blue2) !important;
	border: 1px solid var(--sc-line) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;

}
.tab.on .tabBadge
{

	background: rgba(232, 238, 248, .22) !important;
	color: #e8eef8 !important;
	border-color: rgba(232, 238, 248, .4) !important;

}
.tab .tabBadge.warn
{

	background: var(--sc-bad-bg) !important;
	color: var(--sc-bad) !important;
	border-color: var(--sc-bad) !important;

}
.card,
.lcard
{

	border: 1px solid var(--sc-line) !important;
	border-radius: var(--sc-radius) !important;
	padding: 16px 18px !important;
	background: var(--sc-card) !important;
	box-shadow: var(--sc-shadow) !important;
	color: var(--sc-fg) !important;

}
.pane
{
 display: none !important; 
}
.pane.on
{
 display: grid !important; gap: 14px !important; 
}
.sysbar,
.opsStrip,
.healthStrip,
.chips
{

	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	align-items: center !important;

}
.syschip,
.chip,
.pill,
.badge,
.dev .badge,
.botActionChip,
.kindChip
{

	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	border: 1px solid var(--sc-line) !important;
	border-radius: 999px !important;
	padding: 4px 10px !important;
	font: 700 10px Segoe UI, system-ui, sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	background: var(--sc-card) !important;
	color: var(--sc-mut) !important;
	white-space: nowrap !important;

}
.syschip.ok,
.chip.on,
.chip.real,
.pill.ok,
.badge.on,
.badge.real,
.kindChip.real,
.kindChip.human
{

	border-color: var(--sc-ok) !important;
	color: var(--sc-ok) !important;
	background: var(--sc-ok-bg) !important;

}
.syschip.bad,
.chip.off,
.chip.bot,
.pill.err,
.badge.off,
.badge.bot,
.kindChip.bot,
.botActionChip.blocked
{

	border-color: var(--sc-bad) !important;
	color: var(--sc-bad) !important;
	background: var(--sc-bad-bg) !important;

}
.syschip.warn,
.chip.warn,
.badge.stale,
.kindChip.canary
{

	border-color: #f5c542 !important;
	color: var(--sc-warn) !important;
	background: var(--sc-warn-bg) !important;

}
.syschip.blue,
.chip.blue,
.botActionChip.watch
{

	border-color: var(--sc-blue) !important;
	color: var(--sc-blue2) !important;
	background: var(--sc-blue-soft) !important;

}
.row,
.presets,
.check,
.filterRow,
.botHit .hitActs,
.botProfIps,
.profChips,
.reasonChips
{

	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;

}
.row
{
 margin-top: 12px !important; 
}
.check label
{

	display: inline-flex !important;
	gap: 6px !important;
	align-items: center !important;
	margin: 0 !important;
	color: var(--sc-fg) !important;
	text-transform: none !important;
	font: 500 12px Segoe UI, system-ui, sans-serif !important;
	letter-spacing: 0 !important;

}
.card > label,
.pane label:not(.check label)
{

	display: block !important;
	margin: 10px 0 4px !important;
	color: var(--sc-mut) !important;
	font: 700 10px Segoe UI, system-ui, sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;

}
.card input:not([type=checkbox]):not([type=radio]),
.card select,
.card textarea,
.pane input:not([type=checkbox]):not([type=radio]),
.pane select,
.pane textarea
{

	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;

}
.opsStrip
{

	padding: 12px !important;
	border: 1px solid var(--sc-blue) !important;
	border-radius: var(--sc-radius-sm) !important;
	background: var(--sc-blue-soft) !important;
	margin: 0 0 10px !important;
	box-shadow: inset 3px 0 0 var(--sc-blue) !important;

}
.healthStrip
{

	padding: 12px !important;
	border: 1px solid var(--sc-line) !important;
	border-radius: var(--sc-radius-sm) !important;
	background: var(--sc-blue-soft) !important;

}
.hint
{

	color: var(--sc-mut) !important;
	font-size: 11px !important;
	line-height: 1.5 !important;
	margin-top: 8px !important;

}
#paneMirrors .row,
#paneAntibot .row,
#paneSettings .row,
#paneBots .row
{

	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;

}
#paneMirrors .row > button,
#paneAntibot .row > button,
#paneSettings .row > button,
#paneBots .row > button
{

	flex: 0 1 auto !important;
	min-height: 34px !important;

}
@media (max-width: 900px)
{
.NavigationPanel > .ScreemJsNav,
.NavigationPanel > .HlNav
{

		min-height: 42px !important;
		font-size: 8px !important;
		padding: 4px 2px !important;
	
}
.ScreemAccessLegend
{
 gap: 6px; padding: 8px !important; font-size: 11px !important; 
}
.JoinButtonPanel
{
 gap: 6px; 
}
.DetailTabList
{
 gap: 4px !important; 
}
.card,
.lcard
{
 padding: 14px !important; 
}
.tabs
{
 padding: 6px 0 8px !important; 
}
.tab
{
 padding: 8px 12px !important; 
}
.row,
.presets,
.sysbar,
.opsStrip,
.check,
.healthStrip
{
 gap: 6px !important; 
}
}
@media (max-width: 720px)
{
.HlIdName
{
 max-width: 120px !important; 
}
.DetailTableContainer table td:first-child,
.DetailTableContainer table th:first-child,
td.ScreemIdCell
{

		min-width: 200px !important;
		width: auto !important;
	
}
#paneMirrors .row > button,
#paneAntibot .row > button
{

		flex: 1 1 calc(50% - 8px) !important;
	
}
}
.DetailTabContent .Capture,
.DetailTabContent .ScreemCaptureTab,
.ScreemCapturePanel
{

	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	color: var(--sc-fg) !important;
	background: var(--sc-bg) !important;
	min-height: 280px;
	height: 100%;
	gap: 0;

}
.ScreemCaptureHead
{

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sc-line);
	flex: 0 0 auto;

}
.ScreemCaptureTitle
{

	font: 800 14px Segoe UI, system-ui, sans-serif;
	color: var(--sc-fg);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	letter-spacing: .02em;

}
.ScreemCaptureMeta
{

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font: 600 11px Segoe UI, system-ui, sans-serif;
	color: var(--sc-mut);

}
.ScreemCaptureMeta span
{

	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid var(--sc-line);
	background: var(--sc-blue-soft);
	color: var(--sc-blue2);

}
.ScreemCaptureActions,
.ScreemCaptureToolbar
{

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;

}
.ScreemCaptureToolbar button,
.ScreemCaptureActions button,
.ScreemCaptureRefresh,
.ScreemCaptureToolbar .ScreemCaptureRefresh,
.ScreemCaptureToolbar .ScreemCaptureSaveAll,
.ScreemCaptureToolbar .ScreemCaptureStarredOnly,
button.ScreemCaptureRefresh,
button.ScreemCaptureSaveAll,
button.ScreemCaptureStarredOnly
{

	padding: 5px 12px !important;
	border-radius: 6px !important;
	border: 1px solid var(--sc-line) !important;
	background: var(--sc-card) !important;
	color: var(--sc-fg) !important;
	font: 700 11px Segoe UI, system-ui, sans-serif !important;
	cursor: pointer !important;
	letter-spacing: .02em;
	transition: background .12s, border-color .12s, color .12s, filter .12s;

}
.ScreemCaptureToolbar button:hover,
.ScreemCaptureActions button:hover,
.ScreemCaptureRefresh:hover,
.ScreemCaptureSaveAll:hover,
.ScreemCaptureStarredOnly:hover
{

	filter: brightness(1.08);
	border-color: var(--sc-blue) !important;
	color: var(--sc-blue2) !important;
	background: var(--sc-blue-soft) !important;

}
.ScreemCaptureToolbar .ScreemCaptureRefresh,
button.ScreemCaptureRefresh
{

	border-color: var(--sc-blue) !important;
	background: var(--sc-blue) !important;
	color: #fff !important;

}
.ScreemCaptureToolbar .ScreemCaptureRefresh:hover,
button.ScreemCaptureRefresh:hover
{

	background: var(--sc-blue2) !important;
	color: #0a1220 !important;
	filter: none;

}
.ScreemCaptureToolbar .ScreemCaptureSaveAll,
button.ScreemCaptureSaveAll
{

	border-color: var(--sc-ok) !important;
	color: var(--sc-ok) !important;
	background: var(--sc-ok-bg) !important;

}
.ScreemCaptureToolbar .ScreemCaptureStarredOnly,
button.ScreemCaptureStarredOnly,
.ScreemCaptureStarredOnly.on,
.ScreemCaptureStarredOnly[aria-pressed="true"]
{

	border-color: var(--sc-warn) !important;
	color: var(--sc-warn) !important;
	background: var(--sc-warn-bg) !important;

}
.ScreemCaptureList
{

	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-height: 180px;
	max-height: min(62vh, 560px);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 2px 8px 0;
	scrollbar-width: thin;
	scrollbar-color: #35598a var(--sc-bg2);

}
.ScreemCaptureItem
{

	display: grid;
	grid-template-columns: 72px 1fr auto;
	grid-template-areas:
		"ts text star"
		"ts meta star";
	gap: 2px 10px;
	align-items: start;
	padding: 10px 12px;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-card);
	box-shadow: 0 1px 2px rgba(0,0,0,.18);
	transition: border-color .12s, background .12s, box-shadow .12s;

}
.ScreemCaptureItem:hover
{

	border-color: var(--sc-blue);
	background: #132239;

}
.ScreemCaptureItem.starred
{

	border-color: var(--sc-warn) !important;
	background: linear-gradient(90deg, rgba(251,191,36,.12), var(--sc-card) 42%) !important;
	box-shadow: inset 3px 0 0 var(--sc-warn), 0 1px 3px rgba(0,0,0,.2) !important;

}
.ScreemCaptureTs
{

	grid-area: ts;
	font: 600 11px/1.35 Consolas, ui-monospace, monospace;
	color: var(--sc-mut);
	white-space: nowrap;
	padding-top: 2px;

}
.ScreemCaptureText
{

	grid-area: text;
	font: 13px/1.45 Segoe UI, system-ui, sans-serif;
	color: var(--sc-fg);
	word-break: break-word;
	white-space: pre-wrap;

}
.ScreemCaptureItemMeta
{

	grid-area: meta;
	font: 500 10px/1.35 Segoe UI, system-ui, sans-serif;
	color: var(--sc-mut);
	letter-spacing: .02em;

}
.ScreemCaptureStar
{

	grid-area: star;
	align-self: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border-radius: 8px !important;
	border: 1px solid var(--sc-line) !important;
	background: var(--sc-bg2) !important;
	color: var(--sc-mut) !important;
	font: 700 16px/1 Segoe UI, system-ui, sans-serif !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

}
.ScreemCaptureStar:hover
{

	border-color: var(--sc-warn) !important;
	color: var(--sc-warn) !important;
	background: var(--sc-warn-bg) !important;

}
.ScreemCaptureItem.starred .ScreemCaptureStar,
.ScreemCaptureStar[aria-pressed="true"],
.ScreemCaptureStar.on
{

	color: var(--sc-warn) !important;
	border-color: var(--sc-warn) !important;
	background: var(--sc-warn-bg) !important;

}
.ScreemCaptureEmpty
{

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 160px;
	padding: 28px 16px;
	text-align: center;
	border: 1px dashed var(--sc-line);
	border-radius: var(--sc-radius);
	background: var(--sc-bg2);
	color: var(--sc-mut);
	font: 500 13px/1.5 Segoe UI, system-ui, sans-serif;

}
.ScreemCaptureEmpty strong
{

	color: var(--sc-blue2);
	font-weight: 800;

}
.ScreemCaptureGrid
{

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;

}
@media (max-width: 900px)
{
.ScreemCaptureGrid
{
 grid-template-columns: 1fr; 
}
.ScreemCaptureItem
{

		grid-template-columns: 64px 1fr auto;
	
}
}
.ScreemCaptureCard
{

	background: var(--sc-card) !important;
	border: 1px solid var(--sc-line) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	min-height: 140px;
	max-height: 320px;
	overflow: auto;

}
.ScreemCaptureCard h3
{

	margin: 0 0 8px 0 !important;
	font: 800 11px Segoe UI, system-ui, sans-serif !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sc-blue2) !important;

}
.ScreemCapturePre
{

	margin: 0 !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	font: 12px/1.45 Consolas, ui-monospace, monospace !important;
	color: var(--sc-fg) !important;
	background: transparent !important;
	border: 0 !important;

}
.ScreemCaptureHint
{

	margin: 12px 0 0 !important;
	color: var(--sc-mut) !important;
	font: 500 11px/1.5 Segoe UI, system-ui, sans-serif !important;

}
.DetailTabList [data-command-argument="Capture"],
.DetailTabList div[_commandArgument="Capture"]
{

	

}
.DetailTabList > .Selected,
.DetailTab.Selected,
.DetailTab[aria-selected="true"]
{

	background: var(--sc-blue) !important;
	color: #fff !important;
	border-color: var(--sc-blue2) !important;
	box-shadow: 0 2px 8px rgba(59, 130, 246, .28) !important;

}
#screemSettingsMain,
#screemSettingsMain iframe
{

	background: var(--sc-bg) !important;

}
.NavigationPanel > .SettingsNav:hover
{

	background: var(--sc-blue-soft) !important;
	border-left-color: var(--sc-blue) !important;

}
.FleetNav.Selected
{

	background: var(--sc-blue-soft) !important;
	color: var(--sc-blue2) !important;
	border-left-color: var(--sc-blue) !important;

}
.NavigationPanel > .FleetNav
{

	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	min-height: 46px !important;
	padding: 5px 3px !important;
	margin: 1px 0 !important;
	color: var(--sc-fg) !important;
	cursor: pointer !important;
	border-left: 3px solid transparent !important;
	background: transparent !important;
	opacity: 1 !important;
	visibility: visible !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	font-weight: 700 !important;
	font-size: 9px !important;
	line-height: 1.1 !important;

}
.NavigationPanel > .FleetNav img,
.NavigationPanel > div.FleetNav img
{

	width: 24px !important;
	height: 24px !important;
	margin: 2px !important;
	filter: none !important;
	opacity: .9 !important;
	display: block !important;
	object-fit: contain !important;

}
.NavigationPanel > div img[src*="NavigationFleet"]
{

	width: 24px !important;
	height: 24px !important;
	margin: 2px !important;

}
.NavigationPanel > .FleetNav .ScreemNavLabel
{

	display: block !important;
	color: inherit !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 9px !important;
	white-space: nowrap !important;

}
.NavigationPanel > .FleetNav:hover
{

	background: var(--sc-blue-soft) !important;
	border-left-color: var(--sc-blue) !important;

}
.NavigationPanel > .FleetNav.Selected,
.NavigationPanel > .FleetNav[aria-current="page"]
{

	background: var(--sc-blue) !important;
	color: #fff !important;
	border-left-color: var(--sc-blue2) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);

}
.NavigationPanel > .FleetNav.Selected .ScreemNavLabel,
.NavigationPanel > .FleetNav[aria-current="page"] .ScreemNavLabel
{

	color: #fff !important;
	font-weight: 800 !important;

}
.NavigationPanel > .FleetNav.Selected img,
.NavigationPanel > .FleetNav[aria-current="page"] img
{

	filter: none !important;
	opacity: 1 !important;

}
#screemFleetMain,
#screemFleetMain iframe
{

	background: var(--sc-bg) !important;

}