:root
{

	--sc-bg: #050505;
	--sc-fg: #f4f4f4;
	--sc-mut: #9a9a9a;
	--sc-line: #f4f4f4;
	--sc-ok: #b8ff5a;
	--sc-bad: #ff4d4d;

}
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: "IBM Plex Mono", Consolas, monospace !important;

}
html,
body
{

	background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.03) 3px) !important;

}
a
{
 color: #f4f4f4 !important; 
}
a:hover
{
 color: #b8ff5a !important; 
}
.HeaderPanel,
.GlobalBar,
.NavigationPanel,
.TrayPanel,
.TrayIconPanel,
.CommandPanel,
.UserMenuButton,
.StartButton
{

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;
	border-color: var(--sc-fg) !important;
	box-shadow: none !important;

}
.HeaderPanel
{

	border-bottom: 2px solid var(--sc-fg) !important;

}
.NavigationPanel
{

	border-right: 2px solid var(--sc-fg) !important;

}
.GlobalBar
{

	border-bottom: 1px solid var(--sc-fg) !important;

}
.LogoPanel,
h1.LogoPanel
{

	color: #ffffff !important;
	font-family: "Archivo Black", Impact, sans-serif !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	background-image: none !important;

}
.LogoHeadingVisible .LogoPanel:after,
html.LogoHeadingVisible .LogoPanel:after
{

	content: "SCREEM" !important;
	color: #ffffff !important;
	font-family: "Archivo Black", Impact, sans-serif !important;
	letter-spacing: .12em !important;

}
.LogoIconLink,
html.LogoIconVisible .LogoIconLink,
.LogoIconVisible .HeaderPanel .LogoIconLink
{

	background-color: var(--sc-bg) !important;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJTQ1JFRU0iPgogIDxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iIzA1MDUwNSIvPgogIDxyZWN0IHg9IjMuNSIgeT0iMy41IiB3aWR0aD0iNTciIGhlaWdodD0iNTciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Y0ZjRmNCIgc3Ryb2tlLXdpZHRoPSIzIi8+CiAgPHRleHQgeD0iMzIiIHk9IjQ3IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iQXJpYWwgQmxhY2ssIEltcGFjdCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI0MCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iI2Y0ZjRmNCI+UzwvdGV4dD4KPC9zdmc+Cg==) !important;
	background-size: 36px 36px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-origin: content-box !important;

}
html.LogoImageVisible .LogoPanel
{

	background-image: none !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: 2px solid transparent;
	background: transparent !important;

}
.NavigationPanel > div img
{

	filter: invert(1) brightness(2) !important;

}
.NavigationPanel > div.Selected,
.NavigationPanel > .ScreemJsNav:hover,
.NavigationPanel > .HlNav:hover,
.ScreemJsNav.Selected,
.HlNav.Selected
{

	background: var(--sc-fg) !important;
	color: var(--sc-bg) !important;

}
.NavigationPanel > div.Selected img,
.ScreemJsNav.Selected img,
.HlNav.Selected img
{

	filter: none !important;

}
.ScreemJsNav,
.HlNav
{

	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 6px !important;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	min-height: 56px;
	width: 100%;
	cursor: pointer !important;
	pointer-events: auto !important;
	position: relative;
	z-index: 6;
	box-sizing: border-box;
	border-top: 1px solid var(--sc-fg) !important;

}
.ScreemJsNav span,
.HlNav span
{
 pointer-events: none; display: block; 
}
#screemJsMain
{

	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 30;
	background: var(--sc-bg);

}
#screemJsMain iframe
{

	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--sc-bg);

}
.MainPanel
{
 position: relative !important; 
}
.screem-banner
{
 display: none !important; 
}
.JoinButtonPanel
{
 display: flex; gap: 8px; flex-wrap: wrap; align-items: center; 
}
input.ScreemAddScope[type=button]
{

	background: transparent !important;
	color: var(--sc-fg) !important;
	border: 2px solid var(--sc-fg) !important;

}
button,
.Button,
input[type=button],
input[type=submit],
.CommandButton,
a.Button
{

	border-radius: 0 !important;
	background: var(--sc-fg) !important;
	color: var(--sc-bg) !important;
	border: 2px solid var(--sc-fg) !important;
	font-family: "IBM Plex Mono", Consolas, monospace !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em;

}
button.ghost,
.Button.Secondary
{

	background: transparent !important;
	color: var(--sc-fg) !important;

}
input[type=text],
input[type=password],
input[type=email],
textarea,
select,
.AnimatedInput,
.TextBox
{

	background: #111 !important;
	color: var(--sc-fg) !important;
	border: 1px solid var(--sc-fg) !important;
	border-radius: 0 !important;
	font-family: "IBM Plex Mono", Consolas, monospace !important;

}
.LoginPage .ContentPanel > div,
.ChangePasswordPage .ContentPanel > div,
.GuestPage .ContentPanel > div:first-child,
.Authentication
{

	background: var(--sc-bg) !important;
	border: 2px solid var(--sc-fg);
	padding: 28px 32px;
	max-width: 420px;

}
.LoginPage h1,
.ChangePasswordPage h1,
.GuestPage h1,
.LoginPage h2,
.GuestPage h2
{

	font-family: "Archivo Black", Impact, sans-serif !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff !important;

}
.AnimatedGroup label,
.LoginPage label
{

	color: var(--sc-mut) !important;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .08em;

}
.SessionListPanel,
.SessionGroupPanel,
.DataGrid,
table
{

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;
	border-color: var(--sc-fg) !important;

}
tr.Selected,
.SelectedRow,
.SessionListPanel .Selected
{

	background: var(--sc-fg) !important;
	color: var(--sc-bg) !important;

}
.HlScopeStar
{

	display: inline-block;
	margin-left: 8px;
	color: #b8ff5a !important;
	font-size: 16px;
	line-height: 1;
	vertical-align: middle;
	text-shadow: 0 0 8px #b8ff5a;

}
tr.Selected .HlScopeStar
{

	color: #2a6b00 !important;
	text-shadow: none;

}
.HlGeo
{

	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	border: 1px solid #f4f4f4;
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #b8ff5a !important;
	vertical-align: middle;
	white-space: nowrap;
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;

}
tr.Selected .HlGeo
{

	border-color: #050505;
	color: #050505 !important;

}
.JoinButtonPanel
{

	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;

}
.JoinButtonPanel .HlAddScopeBtn
{

	background: #050505 !important;
	color: #b8ff5a !important;
	border: 2px solid #b8ff5a !important;
	font-family: "IBM Plex Mono", Consolas, monospace !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 8px 12px;
	cursor: pointer;

}
.JoinButtonPanel .HlAddScopeBtn:hover
{

	background: #b8ff5a !important;
	color: #050505 !important;

}
.MainDetailHeaderPanel h2,
.AdministrationPage h2,
.MasterPanel h2
{

	font-family: "Archivo Black", Impact, sans-serif !important;
	letter-spacing: .08em;
	text-transform: uppercase;

}
.MasterPanel > div,
.AdministrationPage .MasterPanel a,
.AdministrationPage .MasterPanel div
{

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

	background: var(--sc-fg) !important;
	color: var(--sc-bg) !important;

}
.DialogPanel,
.ModalPanel,
.PopoutPanel,
.ExtrasPopout,
.ApplicationsPopout,
.HelpPopoutPanel,
.UserPopoutPanel,
.ToolboxPanel
{

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !important;
	border: 2px solid var(--sc-fg) !important;
	border-radius: 0 !important;

}
*::-webkit-scrollbar
{
 width: 10px; height: 10px; 
}
*::-webkit-scrollbar-track
{
 background: #050505; 
}
*::-webkit-scrollbar-thumb
{
 background: #f4f4f4; 
}
.HeaderPanel img,
.GlobalBar img,
.TrayIconPanel img
{

	filter: invert(1) brightness(2) !important;

}
.DetailTable,
.DetailTable tr,
.DetailTable td,
.DetailTable th,
.MasterListContainer,
.MasterPanel ul,
.MasterPanel li,
.EmptyPanel,
.NotificationPanel,
.DetailTableHeaderPanel,
.DetailSelectionPanel,
.DetailTabList,
.DetailTabContent,
.SingleSelectionPanel,
.MultiSelectionPanel,
.SubDetailHeaderPanel
{

	background: #050505 !important;
	color: #f4f4f4 !important;

}
.CommandPanel a,
.HeaderPanel a,
.GlobalBar a,
.MainDetailHeaderPanel a,
.TrayPanel a,
.StartButton,
.CommandPanel span,
.MainDetailHeaderPanel .CommandPanel *
{

	color: #f4f4f4 !important;
	background: transparent !important;

}
input[type=button],
input[type=submit],
button:not(.ghost):not(.HlAddScopeBtn):not(.ScreemAddScope),
.Button:not(.Secondary)
{

	background: #f4f4f4 !important;
	color: #050505 !important;
	border: 2px solid #f4f4f4 !important;

}
input[type=button],
input[type=submit],
button:not(.ghost)
{

	color: #050505 !important;

}
input[type=button] *,
button:not(.ghost) *
{

	color: #050505 !important;

}
tr.Selected,
tr.Selected td,
tr.Selected th,
tr.Selected a,
tr.Selected span,
tr.Selected div,
tr.Selected *,
.SelectedRow,
.SelectedRow *,
.DetailTable tr.Selected,
.DetailTable tr.Selected *,
.MasterPanel .Selected,
.MasterPanel .Selected *,
.MasterPanel li.Selected,
.MasterPanel li.Selected *,
.NavigationPanel > div.Selected,
.NavigationPanel > div.Selected *,
.ScreemJsNav.Selected,
.ScreemJsNav.Selected *,
.HlNav.Selected,
.HlNav.Selected *,
.DetailTabList .Selected,
.DetailTabList .Selected *
{

	background: #f4f4f4 !important;
	color: #050505 !important;

}
.DialogPanel,
.ModalPanel,
.PopoutPanel,
.ExtrasPopout,
.ApplicationsPopout,
.HelpPopoutPanel,
.UserPopoutPanel,
.ToolboxPanel,
.DialogPanel *,
.PopoutPanel *
{

	background: #050505 !important;
	color: #f4f4f4 !important;

}
.DialogPanel input[type=button],
.DialogPanel button,
.PopoutPanel input[type=button],
.PopoutPanel a
{

	background: #f4f4f4 !important;
	color: #050505 !important;

}
input.ScreemAddScope[type=button],
.JoinButtonPanel .HlAddScopeBtn,
.JoinButtonPanel .ScreemAddScope
{

	background: #050505 !important;
	color: #b8ff5a !important;
	border: 2px solid #b8ff5a !important;

}
.SubDetailPanel,
.SubDetailHeaderPanel,
.DetailTabContent,
.DetailTabContent .Commands,
.DetailTabContent .Notes,
.DetailTabContent .Messages,
.DetailTabContent .Timeline,
.EntryHistoryPanel,
.EntryHistoryPanel .HistoryPanel,
.EntryHistoryPanel .ListPanel,
.EntryHistoryPanel .ListPanel > div,
.EntryHistoryPanel .EntryPanel,
.EntryHistoryPanel p,
.EntryHistoryPanel p.Data,
.HistoryPanel,
.ListPanel,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Commands .EntryHistoryPanel,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Commands .EntryHistoryPanel:not(.Empty) .HistoryPanel,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Commands .EntryHistoryPanel:not(.Empty) .HistoryPanel .ListPanel,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Commands .EntryHistoryPanel:not(.Empty) .HistoryPanel .ListPanel > div,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Notes .EntryHistoryPanel .HistoryPanel,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Messages .EntryHistoryPanel .HistoryPanel
{

	background: #050505 !important;
	background-color: #050505 !important;
	color: #f4f4f4 !important;
	border-color: #444 !important;

}
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Commands .EntryHistoryPanel:not(.Empty) .HistoryPanel .ListPanel > div p,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Commands .EntryHistoryPanel:not(.Empty) .HistoryPanel .ListPanel > div p.Data,
.OuterPanel .MainPanel .SubDetailPanel .DetailTabContent .Commands .EntryHistoryPanel .EntryPanel,
.EntryHistoryPanel textarea,
.Commands textarea,
.Notes textarea,
.Messages textarea
{

	background: #111 !important;
	background-color: #111 !important;
	color: #f4f4f4 !important;
	caret-color: #f4f4f4 !important;
	border: 1px solid #f4f4f4 !important;

}
.EntryHistoryPanel input[type=button]
{

	background: #f4f4f4 !important;
	color: #050505 !important;

}
@media (max-width: 800px)
{
.LoginPage .ContentPanel > div,
.GuestPage .ContentPanel > div:first-child
{

		max-width: 100%;
		border-left: 0;
		border-right: 0;
	
}
}
