:root
{

	--sc-bg: #ffffff;
	--sc-bg2: #f5f8fc;
	--sc-fg: #1a2b3c;
	--sc-mut: #5a6b7c;
	--sc-line: #d0dae6;
	--sc-blue: #1a73e8;
	--sc-blue2: #0b57d0;
	--sc-blue-soft: #e8f0fe;
	--sc-ok: #137333;
	--sc-bad: #c5221f;

}
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-blue2) !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	background-image: none !important;
	font-weight: 700 !important;

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

	content: "SCREEM" !important;
	color: var(--sc-blue2) !important;
	font-family: Segoe UI, system-ui, sans-serif !important;
	letter-spacing: .08em !important;
	font-weight: 800 !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: 32px 32px !important;
	background-position: center !important;
	background-repeat: no-repeat !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: 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
{

	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
{

	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	min-height: 58px !important;
	padding: 8px 4px !important;
	margin: 2px 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: 10px !important;
	line-height: 1.1 !important;

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

	width: 20px !important;
	height: 20px !important;
	filter: none !important;
	display: block !important;

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

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

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

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

}
.NavigationPanel > .ScreemJsNav.Selected,
.NavigationPanel > .HlNav.Selected
{

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

}
.NavigationPanel > .ScreemJsNav.Selected img,
.NavigationPanel > .HlNav.Selected img
{
 filter: brightness(10) !important; 
}
#screemJsMain,
#screemHlMain
{

	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 30;
	background: var(--sc-bg);

}
#screemJsMain iframe,
#screemHlMain 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 !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: 6px !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: 600 !important;
	text-transform: none !important;

}
button.ghost,
.Button.Secondary
{

	background: #fff !important;
	color: var(--sc-blue2) !important;
	border: 1px solid var(--sc-line) !important;

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

	background: #fff !important;
	color: var(--sc-fg) !important;
	border: 1px solid var(--sc-line) !important;
	border-radius: 6px !important;
	font-family: Segoe UI, system-ui, sans-serif !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(26, 43, 60, 0.08);

}
.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;

}
.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: #fff !important;
	color: var(--sc-fg) !important;
	border: 1px solid var(--sc-line) !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 32px rgba(26, 43, 60, 0.12) !important;

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

	background: var(--sc-bg) !important;
	color: var(--sc-fg) !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: #b8c4d4; border-radius: 4px; 
}