:root
{
	/* Main / Misc */
	--main-highlight-color: #3E5F8A;
	--panel-bg-color: #181818;
	--cliplist-bg-color: #101010;
	--contextmenu-server-icon-color: #444E4F;
	--button-color: #BBB1B0;
	--ptzpad-color: #6d6868;
	--ptzpad-disabled-color: #2d2c2c;
	--text-color: #BFBFBF;
	--text-hover-color: #D9DBDF;
	--text-active-color: #FFFFFF;
	--pctext-color: #E8E8E8;
	--pctext-hover-color: #FFFFFF;
	--profile-active-color: #63C35B;
	--profile-pause-color: #E3D246;
	--profile-stop-color: #DC164F;
	--audio-playing-color: #63C35B;
	--audio-loading-color: #F0F000;
	--audio-error-color: #F00000;
	--audio-idle-color: var(--button-color);
	--seek-bar-color: #2C82C9;
	/* Dropdowns, Calendar, SquareButtons */
	--uicontrol-bg-color: #101010;
	--uicontrol-hover-bg-color: #303030;
	--uicontrol-active-bg-color: #505050;
	/* Dropdowns */
	--dropdown-item-bg-color: #000000;
	--dropdown-item-hover-bg-color: #303030;
	--dropdown-item-active-bg-color: #505050;
	--dropdown-item-color: var(--text-color);
	--dropdown-item-hover-color: var(--text-hover-color);
	--dropdown-item-active-color: var(--text-active-color);
	--dropdown-item-blue-color: #618dc7;
	--dropdown-item-blue-hover-color: #7db0f3;
	--dropdown-item-blue-active-color: #8fbefd;
	--dropdown-item-golden-color: #C8B11C;
	--dropdown-item-golden-hover-color: #e6cf35;
	--dropdown-item-golden-active-color: #ffe84e;
	--dropdown-item-red-color: #F09700;
	--dropdown-item-red-hover-color: #ffa919;
	--dropdown-item-red-active-color: #ffb944;
	/* Dialogs */
	--dialog-bg-color: var(--panel-bg-color);
	--dialog-border-color: #404040;
	--dialog-color: #cdcdcd;
	--dialog-titlebar-bg-color: var(--main-highlight-color);
	--dialog-titlebar-bottom-border-color: #2b405d;
	--dialog-titlebar-color: #cdcdcd;
	/* Collapsible headings in dialogs */
	--collapsible-heading-bg-color: var(--panel-bg-color);
	--collapsible-heading-hover-bg-color: #333333;
	--collapsible-heading-active-bg-color: #404040;
	--collapsible-heading-color: #808080;
	--collapsible-heading-expanded-bg-color: #404040;
	--collapsible-heading-expanded-hover-bg-color: #4a4a4a;
	--collapsible-heading-expanded-active-bg-color: #505050;
	--collapsible-heading-expanded-color: #cdcdcd;
	/* Streaming Profile List */
	--streaming-profile-item-bg-color: #272727;
	--streaming-profile-item-hover-bg-color: #404040;
	--streaming-profile-item-ghost-bg-color: rgba(255,255,255,0.1);
	/* Clip List */
	--datetile-bg-color: #383E47;
	--badge-color: var(--main-highlight-color);
	--badge-hover-color: var(--dropdown-item-blue-color);
	--badge-selected-color: #bad8ff;
	--timeline-background-color: #000000;
	/* Context Menus */
	--context-menu-icon-highlight-color: #0097F0;
}

.panel-bg-color
{
	color: var(--panel-bg-color);
}

.ptzpad-color
{
	color: var(--ptzpad-color);
}

.ptzpad-disabled-color
{
	color: var(--ptzpad-disabled-color);
}

.text-hover-color
{
	color: var(--text-hover-color);
}

.text-active-color
{
	color: var(--text-active-color);
}
/* SVG */
svg.icon
{
	fill: currentColor;
	width: 100%;
	height: 100%;
	transform: scaleY(-1);
	pointer-events: none; /* Firefox otherwise fires document.mouseleave when mousing over svg */
}

.noflip svg.icon, svg.noflip
{
	transform: scaleY(1);
}

.invertv svg.icon, svg.invertv
{
	transform: scaleX(-1);
}

.rotate90 svg.icon, svg.rotate90
{
	transform: rotate(90deg);
}

.rotate270 svg.icon, svg.rotate270
{
	transform: rotate(-90deg);
}

svg.stroke
{
	stroke: currentColor;
}
/* Loading */
.loadinglabel
{
	font-size: 15px;
	display: inline-block;
	width: 230px;
	text-align: left;
}

.loadingstatus
{
	font-size: 15px;
	display: inline-block;
	color: #FF9900;
	width: 40px;
}
/* Main */
html
{
	overscroll-behavior: none; /* Prevents overscroll of the entire page on iOS when swiping down in PWA */
}

a[role="button"]
{
	cursor: pointer;
	text-decoration: underline;
}

body
{
	margin: 0px;
	background-color: var(--panel-bg-color);
	overflow: hidden;
	font-family: Arial, Sans-Serif;
	font-size: 0px;
	color: var(--text-color);
}

body, #layouttop, #layoutleft, #layoutbody, #layoutbottom, .unselectable
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

.selectable
{
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	cursor: initial;
}

.takeNoSpace
{
	display: none;
	height: 0px;
	font-size: 0px;
	border: none;
	padding: 0;
	margin: 0;
}

.verticalAlignHelper
{
	vertical-align: middle;
	display: inline-block;
	width: 0px;
	height: 100%;
}

#layouttop
{
	position: absolute;
	width: 100%;
	height: 64px;
	background-color: var(--panel-bg-color);
	overflow: hidden;
	z-index: 100;
	display: flex;
}

.sizeMedium #layouttop
{
	height: 52px;
}

.sizeSmall #layouttop
{
	height: 40px;
}

#layouttopFlasher
{
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #000000;
	top: 0px;
	opacity: 0.5;
	display: none;
}

#layoutleft
{
	position: absolute;
	top: 64px;
	height: 500px;
	width: 256px;
	background-color: var(--panel-bg-color);
}

	#layoutleft.disabledBySetting
	{
		display: none;
	}

.clipExportPanel
{
	width: 256px;
}

#layoutleftLive,
#layoutleftRecordings,
#layoutleftFlasher,
#layoutleftLiveScrollable,
#layoutleftLiveScrollableWrapper,
#layoutleftExport,
#layoutleftExportScrollable,
#layoutleftExportScrollableWrapper
{
	width: 100%;
}

#layoutleftLiveScrollableWrapper,
#layoutleftExportScrollableWrapper
{
	height: 100%;
}

#layoutleftLiveScrollable,
#layoutleftExportScrollable
{
	box-sizing: border-box;
}

#layoutleftFlasher
{
	position: absolute;
	height: 100%;
	background-color: #000000;
	top: 0px;
	opacity: 0.5;
	display: none;
}

#layoutbody
{
	position: absolute;
	top: 64px;
	left: 256px;
	background-color: #000000;
	overflow: hidden;
}

#layoutbottom
{
	position: absolute;
	background-color: var(--panel-bg-color);
	left: 256px;
	bottom: 0px;
	display: block;
}

.sideBarRight #layoutleft
{
	right: 0px;
}

.sideBarRight #layoutbody,
.sideBarRight #layoutbottom
{
	left: 0px;
}

#sidebarPortraitDragbar
{
	display: none;
}

.portrait #sidebarPortraitDragbar
{
	position: absolute;
	top: -15px; /* Coupled: #sidebarPortraitDragbar top and height, #layoutleft margin-top, #statusArea bottom */
	left: 0px;
	width: 100vw;
	height: 15px;
	cursor: ns-resize;
	background: rgb(255,255,255,0.1);
	background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
}

	.portrait #sidebarPortraitDragbar:hover
	{
		background: rgb(255,255,255,0.25);
		background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);
	}

.portrait #layoutleft
{
	margin-top: 15px; /* Coupled: #sidebarPortraitDragbar top and height, #layoutleft margin-top, #statusArea bottom */
}

.portrait .leftBarTopPadding
{
	display: none;
}

/* Top Bar / Tabs */
#layouttop > *
{
	flex: 0 0 auto;
}

#layouttop > #systemnamewrapper
{
	flex: 0 1 auto;
}

#layouttop > .topbar_tab
{
	flex: 0 1 auto;
	min-width: 32px;
}

#layouttop > #topbar_gap
{
	flex: 1 1 auto;
}

@media (min-width: 500px)
{
	#layouttop > .topbar_tab
	{
		flex-shrink: 2;
	}
}

@media (min-width: 600px)
{
	.sizeSmall #layouttop > #systemnamewrapper
	{
		flex-shrink: 0;
	}
}

@media (min-width: 750px)
{
	.sizeMedium #layouttop > #systemnamewrapper
	{
		flex-shrink: 0;
	}
}

@media (min-width: 1000px)
{
	.sizeLarge #layouttop > #systemnamewrapper
	{
		flex-shrink: 0;
	}
}

#systemnamewrapper, .topbar_tab
{
	display: inline-block;
	width: 256px;
	line-height: 56px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}

.sizeMedium #layoutleft, .sizeMedium #systemnamewrapper, .sizeMedium .topbar_tab, .sizeMedium .clipExportPanel
{
	width: 196px;
}

.sizeSmall #layoutleft, .sizeSmall #systemnamewrapper, .sizeSmall .topbar_tab, .sizeSmall .clipExportPanel, .landscape.tabTimeline #layoutleft
{
	width: 146px;
}

.portrait #layoutleft
{
	width: 100vw;
}

.sizeMedium #systemnamewrapper, .sizeMedium .topbar_tab
{
	line-height: 46px;
}

.sizeSmall #systemnamewrapper, .sizeSmall .topbar_tab
{
	line-height: 36px;
}


#systemnamewrapper
{
	height: 100%;
	background-color: var(--main-highlight-color);
	color: var(--text-active-color);
}

	#systemnamewrapper.hot
	{
		cursor: pointer;
	}

.sideBarRight #systemnamewrapper
{
	float: right;
}

.developerMode #systemnamewrapper
{
	background-color: #a35513;
}

#systemnamewrapper
{
	position: relative;
}

	#systemnamewrapper #sidebar_hidden_button
	{
		display: none;
		line-height: 0px;
		font-size: 0px;
		position: absolute;
		left: 0px;
		top: 2px;
		opacity: 0.4;
		/*background-color: rgba(0,0,0,0.4);*/
	}

		#systemnamewrapper #sidebar_hidden_button:hover
		{
			opacity: 0.8;
		}

		#systemnamewrapper #sidebar_hidden_button svg
		{
			width: 32px;
			height: 32px;
		}

		#systemnamewrapper #sidebar_hidden_button.visible
		{
			display: block;
		}

svg .svg_sidebar
{
	opacity: 0.667;
}

.topbar_tab
{
	height: 56px;
	border-bottom: 8px solid transparent;
	cursor: pointer;
}

	.topbar_tab:hover
	{
		color: var(--text-hover-color);
		background-color: rgba(255,255,255,0.2);
	}

	.topbar_tab.selected
	{
		color: var(--text-active-color);
		border-bottom: 8px solid var(--main-highlight-color);
		cursor: default;
	}

		.topbar_tab.selected:hover
		{
			color: var(--text-active-color);
			background-color: rgba(255,255,255,0);
		}

.sizeMedium .topbar_tab
{
	height: 46px;
	border-bottom-width: 6px;
}

.sizeSmall .topbar_tab
{
	height: 36px;
	border-bottom-width: 4px;
}


#systemname, .topbar_tab_label
{
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	font-size: 20px;
	margin: 0px 1px;
}

.sizeMedium #systemname, .sizeMedium .topbar_tab_label
{
	font-size: 18px;
}

.sizeSmall #systemname, .sizeSmall .topbar_tab_label
{
	font-size: 16px;
}

.sizeSmaller #systemname
{
	font-size: 11px;
}

.sizeSmaller .topbar_tab_label
{
	font-size: 14px;
}

#topbar_tab_timeline
{
	position: relative;
}

#btn_main_menu
{
	width: 10px;
	height: 40px;
	padding: 12px 32px;
}

.sizeMedium #btn_main_menu
{
	width: 8.5px;
	height: 34px;
	padding: 9px 24px;
}

.sizeSmall #btn_main_menu
{
	width: 7px;
	height: 28px;
	padding: 6px 16px;
}

.sizeSmaller #btn_main_menu
{
	width: 7px;
	height: 28px;
	padding: 6px 8px;
}

#save_snapshot_btn
{
	display: inline-block;
	width: 30px;
	height: 24px;
	padding: 20px 13px;
}

.sizeMedium #save_snapshot_btn
{
	width: 25px;
	height: 22px;
	padding: 15px 10px;
}

.sizeSmall #save_snapshot_btn
{
	width: 20px;
	height: 20px;
	padding: 10px 8px;
}

#open_alerts_btn
{
	width: 16px;
	height: 36px;
	padding: 14px 28px;
}

.sizeMedium #open_alerts_btn
{
	width: 12px;
	height: 27px;
	padding: 12.5px 22px;
}

.sizeSmall #open_alerts_btn
{
	width: 8px;
	height: 18px;
	padding: 11px 16px;
}

.sizeSmaller #open_alerts_btn
{
	width: 8px;
	height: 18px;
	padding: 11px 8px;
}

#open_all_clips_btn,
#open_alerts_canceled_btn,
#open_alerts_confirmed_btn
{
	width: 24px;
	height: 24px;
	padding: 20px 20px;
}

.sizeMedium #open_all_clips_btn,
.sizeMedium #open_alerts_canceled_btn,
.sizeMedium #open_alerts_confirmed_btn
{
	width: 22px;
	height: 22px;
	padding: 15px 10px;
}

.sizeSmall #open_all_clips_btn,
.sizeSmall #open_alerts_canceled_btn,
.sizeSmall #open_alerts_confirmed_btn
{
	width: 18px;
	height: 18px;
	padding: 11px 8px;
}

.sizeSmaller #open_all_clips_btn,
.sizeSmaller #open_alerts_canceled_btn,
.sizeSmaller #open_alerts_confirmed_btn
{
	width: 18px;
	height: 18px;
	padding: 11px 4px;
}

div.icon, a.icon
{
	position: relative;
	display: inline-block;
	cursor: pointer;
}

	div.icon, div.icon a, .squareButton, .oneByTwoSquareButton, a.icon
	{
		color: var(--button-color);
	}

		div.icon:hover, div.icon:hover a, .squareButton:hover, .oneByTwoSquareButton:hover, a.icon:hover
		{
			color: var(--text-hover-color);
		}

		div.icon:active, div.icon:active a, .squareButton:active, .oneByTwoSquareButton:active, a.icon:active
		{
			color: var(--text-active-color);
		}

.topbar_icon.icon.selected
{
	color: var(--dropdown-item-blue-color);
}

	.topbar_icon.icon.selected:hover
	{
		color: var(--dropdown-item-blue-hover-color);
	}

	.topbar_icon.icon.selected:active
	{
		color: var(--dropdown-item-blue-active-color);
	}

/* Update Available Notification (UPD) */
.updateAvailable
{
	display: none;
	position: absolute;
	color: #63C35B;
	padding: 1px 3px;
	border-radius: 2px;
	bottom: 0px;
	right: 0px;
}

	.updateAvailable .icon
	{
		width: 24px;
		height: 24px;
		margin-bottom: 8px;
		margin-right: 2px;
	}

.sizeMedium .updateAvailable .icon
{
	width: 20px;
	height: 20px;
	margin-bottom: 6px;
	margin-right: 0px;
}

.sizeSmall .updateAvailable .icon
{
	width: 12px;
	height: 12px;
	margin-bottom: 6px;
	margin-right: 0px;
}

.sizeSmaller .updateAvailable .icon
{
	width: 8px;
	height: 8px;
	margin-bottom: 6px;
	margin-right: -2px;
}

.updateAvailable:after
{
	content: 'UPD';
	background-color: #3b8934;
	color: #FFFFFF;
	font-size: 10px;
	padding: 1px 3px;
	border-radius: 2px;
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.sizeMedium .updateAvailable:after
{
	font-size: 9px;
	padding: 1px 2px;
}

.sizeSmall .updateAvailable:after
{
	font-size: 6px;
	padding: 1px 2px;
}

.sizeSmaller .updateAvailable:after
{
	content: 'UP';
}

.updateAvailable.full
{
	top: 0px;
	bottom: 0px;
	right: 0px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

	.updateAvailable.full:after
	{
		content: 'Update Available';
		font-size: 14px;
		position: static;
		flex: 0 0;
		text-align: center;
	}

.sizeMedium .updateAvailable.full:after
{
	font-size: 12px;
}

.sizeSmall .updateAvailable.full:after
{
	font-size: 10px;
}
/* Notification Counters */
.notificationCounter
{
	display: none;
	position: absolute;
	background-color: #FF0000;
	color: #FFFFFF;
	padding: 1px 3px;
	border-radius: 2px;
	top: 6px;
	right: 5px;
	font-size: 12px;
}

.sizeMedium .notificationCounter
{
	top: 4px;
	right: 3px;
	font-size: 11px;
	padding: 1px 2px;
}

.sizeSmall .notificationCounter
{
	top: 2px;
	right: 1px;
	font-size: 10px;
	padding: 0px 1px;
}

/* Left Bar Scrolling */
.layoutleft-track
{
	width: 8px;
	background-color: var(--panel-bg-color);
}

.layoutleft-track-handle
{
	width: 8px;
	background-color: #383E47;
}
/* Left Bar Misc */
.leftBarBox
{
	break-inside: avoid;
}

#ptzControlsBox
{
	break-inside: auto;
	padding-bottom: 0px;
}

.leftBarBox, #statusArea
{
	padding: 0px 30px 15px 31px;
}

.sizeMedium .leftBarBox, .sizeMedium #statusArea
{
	padding: 0px 18px 10px 19px;
}

.sizeSmall .leftBarBox, .sizeSmall #statusArea, .landscape.tabTimeline #statusArea
{
	padding: 0px 7px 5px 8px;
}

#layoutLeftRecordingsControls .leftBarBox
{
	padding-bottom: 7px;
}

.sizeMedium #layoutLeftRecordingsControls .leftBarBox
{
	padding-bottom: 4px;
}

.sizeSmall #layoutLeftRecordingsControls .leftBarBox
{
	padding-bottom: 2px;
}

.portrait #layoutLeftRecordingsControls
{
	width: 50vw;
}

.leftBarInnerBox
{
	padding-top: 15px;
}

.sizeMedium .leftBarInnerBox
{
	padding-top: 10px;
}

.sizeSmall .leftBarInnerBox
{
	padding-top: 5px;
}

.leftBarInvertBox
{
	padding-bottom: 15px;
}

.sizeMedium .leftBarInvertBox
{
	padding-bottom: 10px;
}

.sizeSmall .leftBarInvertBox
{
	padding-bottom: 5px;
}

.leftBarHeading
{
	font-size: 16px;
	height: 18px;
}

.sizeMedium .leftBarHeading
{
	font-size: 14px;
	height: 16px;
}

.sizeSmall .leftBarHeading
{
	font-size: 12px;
	height: 14px;
}

.squareButton, .oneByTwoSquareButton
{
	display: inline-block;
	vertical-align: top;
	border: 1px solid var(--button-color);
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
	background-color: var(--uicontrol-bg-color);
}

	.squareButton:hover, .oneByTwoSquareButton:hover
	{
		background-color: var(--uicontrol-hover-bg-color);
	}

	.squareButton:active, .oneByTwoSquareButton:active
	{
		background-color: var(--uicontrol-active-bg-color);
	}

	.squareButton.disabled, .oneByTwoSquareButton.disabled
	{
		color: #3e4149;
		border-color: #3e4149;
		cursor: not-allowed;
	}

		.squareButton.disabled:hover,
		.squareButton.spacer:hover,
		.oneByTwoSquareButton.disabled:hover
		{
			background-color: var(--uicontrol-bg-color);
		}

		.squareButton.disabled:active,
		.squareButton.spacer:active,
		.oneByTwoSquareButton.disabled:active
		{
			background-color: var(--uicontrol-bg-color);
		}

	.squareButton.spacer
	{
		cursor: default;
		border-color: transparent;
	}

.oneByTwoSquareButton
{
	padding: 19px 0px;
}

.sizeMedium .squareButton, .sizeMedium .oneByTwoSquareButton
{
	font-size: 14px;
	width: 29px;
	height: 29px;
	line-height: 29px;
}

.sizeMedium .oneByTwoSquareButton
{
	padding-top: 15px;
	padding-bottom: 16px;
}

.sizeSmall .squareButton, .sizeSmall .oneByTwoSquareButton
{
	font-size: 12px;
	width: 23px;
	height: 23px;
	line-height: 23px;
}

.sizeSmall .oneByTwoSquareButton
{
	padding-top: 12px;
	padding-bottom: 13px;
}

.squareButtonIcon
{
	display: inline-block;
	vertical-align: top;
	padding: 14%;
	width: 72%;
	height: 72%;
}

.squareButton.noborder
{
	border-color: transparent;
}

#ptzIrBrightnessContrast .dropdownTrigger
{
	position: relative;
}

div.invisibleLabel
{
	display: none;
}

#irButtonText
{
	position: absolute;
	top: 3px;
	left: 12px;
	color: #FFFF00;
	font-style: italic;
	font-weight: bold;
	line-height: normal;
	font-size: 16px;
}

.sizeMedium #irButtonText
{
	top: 1px;
	left: 9px;
	font-size: 14px;
}

.sizeSmall #irButtonText
{
	top: 0px;
	left: 6px;
	font-size: 14px;
}

#ptzHome
{
	display: flex;
	align-items: center;
}

	#ptzHome svg.icon
	{
		width: 48px;
	}

#homeButtonLabel
{
	font-size: 18px;
	flex: 1 0 auto;
	margin: 0px 5px;
}

.squareButton.yellow
{
	color: #FFFF00;
}

.profileControls
{
	display: flex;
}

#schedule_lock_button
{
	flex: 0 0 auto;
	border: 0px solid transparent;
	padding: 8px;
	width: 23px;
	height: 23px;
	background-color: transparent;
	color: var(--profile-active-color);
}

	#schedule_lock_button:hover
	{
		background-color: rgba(255,255,255,0.1)
	}

	#schedule_lock_button:active
	{
		background-color: rgba(255,255,255,0.2)
	}

	#schedule_lock_button.hold
	{
		color: var(--profile-stop-color);
	}

	#schedule_lock_button.temp
	{
		color: var(--profile-pause-color);
	}

	#schedule_lock_button.disabled
	{
		color: #6a6a6a;
	}

.sizeMedium #schedule_lock_button
{
	padding: 6px;
	width: 17px;
	height: 17px;
}

.sizeSmall #schedule_lock_button
{
	padding: 3px;
	width: 13px;
	height: 13px;
}

#schedule_lock_icon
{
	vertical-align: top;
}

.collapsibleTriggerIcon
{
	display: none;
	float: right;
	height: 8px !important;
	width: 13px !important;
	margin: 6px 10px 0px 0px;
}

.sizeMedium .collapsibleTriggerIcon
{
	height: 6.4px !important;
	margin: 5px 8px 0px 0px;
}

.sizeSmall .collapsibleTriggerIcon
{
	height: 5px !important;
	margin: 4px 6px 0px 0px;
}

.collapsibleTrigger
{
	cursor: pointer;
}

	.collapsibleTrigger:hover
	{
		background-color: rgba(255,255,255,0.067);
	}

	.collapsibleTrigger.collapsed .collapsibleTriggerIcon
	{
		display: inline-block;
	}

.fiveByOneButtonSet
{
	height: 38px;
}

.fiveByTwoButtonSet, .fourByTwoButtonSet
{
	height: 76px;
	break-inside: avoid;
}

.standardLeftBarBoxSize
{
	box-sizing: border-box;
}

.fiveByOneButtonSet,
.fiveByTwoButtonSet,
.dropdownBox,
.standardLeftBarBoxSize,
.leftBarBool,
.profileControls,
#clipFilterSearch
{
	width: 190px;
}

.sizeMedium .fiveByOneButtonSet,
.sizeMedium .fiveByTwoButtonSet,
.sizeMedium .dropdownBox,
.sizeMedium .standardLeftBarBoxSize,
.sizeMedium .leftBarBool,
.sizeMedium .profileControls,
.sizeMedium #clipFilterSearch
{
	width: 155px;
}

.sizeSmall .fiveByOneButtonSet,
.sizeSmall .fiveByTwoButtonSet,
.sizeSmall .dropdownBox,
.sizeSmall .standardLeftBarBoxSize,
.sizeSmall .leftBarBool,
.sizeSmall .profileControls,
.sizeSmall #clipFilterSearch
{
	width: 125px;
}

.fourByTwoButtonSet
{
	display: inline-block;
	width: 152px;
}

.sizeMedium .fourByTwoButtonSet
{
	width: 124px;
}

.sizeSmall .fourByTwoButtonSet
{
	width: 100px;
}

.sizeMedium .fiveByOneButtonSet
{
	height: 31px;
}

.sizeSmall .fiveByOneButtonSet
{
	height: 25px;
}

.sizeMedium .fiveByTwoButtonSet, .sizeMedium .fourByTwoButtonSet
{
	height: 62px;
}

.sizeSmall .fiveByTwoButtonSet, .sizeSmall .fourByTwoButtonSet
{
	height: 50px;
}
/* PTZ Buttons */
#layoutleftLiveContent
{
	margin-top: 22px;
}

.sizeMedium #layoutleftLiveContent
{
	margin-top: 14px;
}

.sizeSmall #layoutleftLiveContent
{
	margin-top: 7px;
}

.portrait #layoutleftLiveContent
{
	column-count: 2;
	width: 100vw;
	margin-top: 7px;
}

.portrait.sizeMedium #layoutleftLiveContent,
.portrait.sizeSmall #layoutleftLiveContent
{
	margin-top: 0px;
}

#layoutLeftRecordingsControls .leftBarTopPadding
{
	height: 10px;
}

.sizeMedium #layoutLeftRecordingsControls .leftBarTopPadding
{
	height: 7px;
}

.sizeSmall #layoutLeftRecordingsControls .leftBarTopPadding
{
	height: 4px;
}

#ptzButtonsMain
{
	position: relative;
	width: 190px;
	height: 190px;
}

.sizeMedium #ptzButtonsMain
{
	width: 155px;
	height: 155px;
}

.sizeSmall #ptzButtonsMain
{
	width: 125px;
	height: 125px;
}

#ptzButtonsMain.disabled
{
	cursor: not-allowed;
}

.ptzGraphic
{
	position: absolute;
}

#ptzGraphicWrapper
{
	width: 100%;
	height: 100%;
	position: relative;
}

.ptzGraphicContainer
{
	width: 100%;
	height: 100%;
	position: relative;
}

	.ptzGraphicContainer[uisize="large"]
	{
		display: block;
	}

.sizeMedium .ptzGraphicContainer[uisize="large"]
{
	display: none;
}

.sizeSmall .ptzGraphicContainer[uisize="large"]
{
	display: none;
}

.ptzGraphicContainer[uisize="medium"]
{
	display: none;
}

.sizeMedium .ptzGraphicContainer[uisize="medium"]
{
	display: block;
}

.sizeSmall .ptzGraphicContainer[uisize="medium"]
{
	display: none;
}

.ptzGraphicContainer[uisize="small"]
{
	display: none;
}

.sizeMedium .ptzGraphicContainer[uisize="small"]
{
	display: none;
}

.sizeSmall .ptzGraphicContainer[uisize="small"]
{
	display: block;
}
/* PTZ Presets */
#ptzControlsBox
{
}

#ptzPresetsContent
{
}

.ptzPresets30,
.ptzPresets40
{
	display: none;
}

.ptzpreset
{
	position: relative;
	vertical-align: top;
	overflow: hidden;
}

.presetThumb
{
	max-width: 100%;
	max-height: 100%;
	border-width: 0px;
	vertical-align: middle;
}

#bigThumb
{
	display: none;
	box-sizing: border-box;
	position: absolute;
	border: 4px ridge #888888;
	border-radius: 5px;
	z-index: 9999;
	overflow: hidden;
	font-size: 0px;
	text-align: center;
	background-color: #000000;
}

	#bigThumb img
	{
		max-width: 100%;
		max-height: 100%;
	}

	#bigThumb canvas
	{
		width: 100%;
		height: 100%;
	}

.bigThumbDescription
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 16px;
	text-align: center;
	background-color: #000000;
	padding: 0px 2px;
	max-width: 100%;
	max-height: 20px;
}
/* Relative PTZ / 3D Positioning */
#ptzRelativeToggleSection
{
	text-align: center;
}

#ptzRelativeToggle
{
	font-size: 16px;
}

.sizeMedium #ptzRelativeToggle
{
	font-size: 14px;
}

.sizeSmall #ptzRelativeToggle
{
	font-size: 11px;
}

#relativeptzbox
{
	border: 3px solid Red;
	display: none;
	background-color: transparent;
	position: absolute;
	z-index: 2;
	opacity: 1;
	overflow: visible;
	pointer-events: none;
}

.relativePtzDebugText
{
	position: absolute;
	z-index: 1;
	font-size: 16px;
	background-color: #000000;
	color: var(--text-active-color);
	padding: 3px;
}

/* Progress Bars */
.progressBarOuter
{
	position: relative;
	display: inline-block;
	background-color: #383E47;
	width: 100px;
	height: 16px;
	vertical-align: top;
}

.sizeMedium .progressBarOuter
{
	width: 78px;
	height: 12px;
}

.sizeSmall .progressBarOuter,
.landscape.tabTimeline .progressBarOuter
{
	width: 70px;
	height: 8px;
}

.landscape.tabTimeline .progressBarOuter
{
	height: 12px;
}

.statusTiny .progressBarOuter
{
	width: 100% !important;
	height: 2px !important;
}

.progressBarInner
{
	background-color: #3E5F8A; /* IE hack */
	background-color: var(--main-highlight-color);
	width: 0%;
	height: 100%;
}
/* Date Filters */
#dateRange
{
	margin-top: 4px;
	padding: 6px 7px 6px 10px;
	font-size: 16px;
	border: 1px solid var(--button-color);
	line-height: 17px;
	cursor: pointer;
}

	#dateRange:hover
	{
		color: var(--text-hover-color);
	}

	#dateRange:active
	{
		color: var(--text-active-color);
	}

.sizeMedium #dateRange
{
	margin-top: 3px;
	padding: 5px 6px 5px 6px;
	font-size: 14px;
	line-height: 15px;
}

.sizeSmall #dateRange
{
	margin-top: 2px;
	padding: 1px 5px 1px 3px;
	font-size: 12px;
	line-height: 12px;
}

#dateRangeLabel
{
	white-space: nowrap;
	overflow: hidden;
}

	#dateRangeLabel.oneLine
	{
		line-height: 34px;
	}

.sizeMedium #dateRangeLabel.oneLine
{
	line-height: 30px;
}

.sizeSmall #dateRangeLabel.oneLine
{
	line-height: 24px;
}

.calendarIcon
{
	float: right;
	width: 32px !important;
	height: 34px !important;
	position: relative;
	top: -2px;
}

.sizeMedium .calendarIcon
{
	width: 28px !important;
	height: 30px !important;
	top: -1px;
}

.sizeSmall .calendarIcon
{
	width: 20px !important;
	height: 22px !important;
	top: 1px;
}

/* Status Area */
#statusArea
{
	padding-bottom: 0px;
	position: absolute;
	background-color: var(--panel-bg-color);
	z-index: 50;
	overflow: visible;
	white-space: nowrap;
	border-top: 1px solid #383E47;
	padding-top: 5px !important;
}

.sizeMedium #statusArea
{
	padding-bottom: 3px;
}

.sizeSmall #statusArea,
.landscape.tabTimeline #statusArea
{
	padding-bottom: 4px;
}

.portrait #statusArea
{
	bottom: 15px; /* Coupled: #sidebarPortraitDragbar top and height, #layoutleft margin-top, #statusArea bottom */
}

#statusArea.disabledBySetting
{
	display: none;
}

.serverStatusLabel
{
	display: inline-block;
	padding-bottom: 3px;
	margin-bottom: 12px;
	font-size: 15px;
	line-height: 15px;
	cursor: pointer;
}

	.serverStatusLabel:hover
	{
		background-color: #1F2026;
	}

.sizeMedium .serverStatusLabel
{
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 14px;
}

.sizeSmall .serverStatusLabel,
.landscape.tabTimeline .serverStatusLabel
{
	margin-bottom: 1px;
	font-size: 12px;
	line-height: 12px;
}

.landscape.tabTimeline .serverStatusLabel
{
	margin-bottom: 5px;
}

.serverStatusSmallIcon
{
	display: inline-block;
	opacity: 0;
	padding-left: 5px;
	padding-top: 2px;
	height: 12px;
	width: 20px;
	font-size: 0px;
	vertical-align: top;
}

.sizeMedium .serverStatusSmallIcon
{
	padding-left: 4px;
	padding-top: 1px;
	width: 18px;
}

.sizeSmall .serverStatusSmallIcon,
.landscape.tabTimeline .serverStatusSmallIcon
{
	padding-left: 3px;
	padding-top: 0px;
	width: 16px;
	height: 9px;
	position: relative;
	top: -1px;
}

.landscape.tabTimeline .serverStatusSmallIcon
{
	padding-top: 1px;
}

.serverStatusLabel.collapsed .serverStatusSmallIcon
{
	opacity: 1;
}

#stoplightBtn.disabled
{
	opacity: 0.4;
	cursor: not-allowed;
}

#stoplightBtn div
{
	display: inline-block;
	width: 16px;
	height: 16px;
	opacity: 0.15;
}

.sizeMedium #stoplightBtn div
{
	width: 14px;
	height: 14px;
}

.sizeSmall #stoplightBtn div,
.landscape.tabTimeline #stoplightBtn div
{
	width: 13px;
	height: 13px;
}

#stoplightBtn
{
	float: right;
	cursor: pointer;
}

#stoplightRed
{
	color: rgba(255,0,0,1);
}

#stoplightYellow
{
	color: rgba(255,255,0,1);
	margin-left: 5px;
}

#stoplightGreen
{
	color: rgba(99,195,91,1);
	margin-left: 5px;
}

.statusBar,
#volumeBarCtrl
{
	padding-bottom: 15px;
	font-size: 15px;
	line-height: 15px;
	vertical-align: top;
}

.sizeMedium .statusBar,
.sizeMedium #volumeBarCtrl
{
	padding-bottom: 5px;
	font-size: 13px;
	line-height: 12px;
}

.sizeSmall .statusBar,
.sizeSmall #volumeBarCtrl,
.landscape.tabTimeline .statusBar
{
	padding-bottom: 2px;
	font-size: 10px;
	line-height: 8px;
}

.landscape.tabTimeline .statusBar
{
	padding-bottom: 4px;
	line-height: 12px;
}

.statusBar.statusTiny
{
	padding-bottom: 0px !important;
	font-size: 0px !important;
	line-height: 0px !important;
	height: 3px !important;
}

@media (min-width: 320px)
{
	.sizeSmall.portrait .statusBarsMain
	{
		column-count: 2;
	}
}

@media (min-width: 400px)
{
	.sizeMedium.portrait .statusBarsMain
	{
		column-count: 2;
	}
}

@media (min-width: 480px)
{
	.portrait .statusBarsMain
	{
		column-count: 2;
	}
}

@media (min-width: 600px)
{
	.sizeSmall.portrait .statusBarsMain
	{
		column-count: 4;
	}
}

@media (min-width: 740px)
{
	.sizeMedium.portrait .statusBarsMain
	{
		column-count: 4;
	}
}

@media (min-width: 900px)
{
	.portrait .statusBarsMain
	{
		column-count: 4;
	}
}

.clickableStatusBar
{
	cursor: pointer;
}

.statusBarLabel
{
	display: inline-block;
	width: 50px;
	vertical-align: top;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sizeMedium .statusBarLabel
{
	width: 45px;
}

.sizeSmall .statusBarLabel,
.landscape.tabTimeline .statusBarLabel
{
	width: 35px;
}

.statusBarAmount
{
	padding-left: 5px;
	display: inline-block;
	vertical-align: top;
}
/* Status Bar Drag Handle */
.statusBarDragHandle
{
	position: absolute;
	top: -16.6666%;
	width: 16px;
	height: 133.3333%;
	background-color: transparent;
}

.statusBarDragHandleInner
{
	margin-left: 37.5%;
	width: 25%;
	height: 100%;
	background-color: var(--button-color);
}

.progressBarOuter.withDragHandle
{
	height: 12px;
	margin-top: 2px;
	margin-bottom: 2px;
	cursor: pointer;
}

	.progressBarOuter.withDragHandle.disabled
	{
		cursor: not-allowed;
	}

.progressBarOuter.zeroWidth
{
	width: 0px;
}

.statusBar.textOnly
{
	display: flex;
}

	.statusBar.textOnly .statusBarLabel
	{
		white-space: pre-wrap;
		width: 100%;
	}

	.statusBar.textOnly .statusBarAmount
	{
		white-space: pre-wrap;
		width: 100%;
		text-align: right;
	}
/* Volume Bar */
#volumeBar
{
	display: inline-block;
	vertical-align: top;
	padding: 8px;
	color: var(--audio-idle-color);
}

.sizeMedium #volumeBar
{
	padding: 6px;
}

.sizeSmall #volumeBar
{
	padding: 4px;
}

#volumeBar.playing
{
	color: var(--audio-playing-color);
}

#volumeBar.loading
{
	color: var(--audio-loading-color);
}

#volumeBar.error
{
	color: var(--audio-error-color);
}

#volumeBar.disabled
{
	opacity: 0.333;
}

#volumeBar .statusBarLabel
{
	font-size: 0px;
	width: 26px;
	height: 26px;
	margin-right: 10px;
}

.sizeMedium #volumeBar .statusBarLabel
{
	width: 21px;
	height: 21px;
	margin-right: 8px;
}

.sizeSmall #volumeBar .statusBarLabel
{
	width: 16px;
	height: 16px;
	margin-right: 6px;
}

#volumeBar .progressBarOuter
{
	width: 50px;
	height: 16px;
	margin: 4px 0px;
}

.sizeMedium #volumeBar .progressBarOuter
{
	width: 35px;
	height: 14px;
	margin: 3px 0px;
}

.sizeSmall #volumeBar .progressBarOuter
{
	width: 20px;
	height: 12px;
	margin: 2px 0px;
}

#volumeBar.wide .progressBarOuter
{
	width: 70px;
}

#volumeBar .statusBarDragHandle
{
	width: 24px;
}

.sizeMedium #volumeBar .statusBarDragHandle
{
	width: 20px;
}

.sizeSmall #volumeBar .statusBarDragHandle
{
	width: 16px;
}

#volumeBarCtrl
{
	display: inline-block;
	vertical-align: middle;
	padding-bottom: 0px;
	font-size: 0px;
}

.volumeButton
{
	width: 16px;
	height: 16px;
}

#pcVolume
{
	width: 100%;
	height: 100%;
	cursor: pointer;
}

	#pcVolume svg
	{
		display: none;
	}

	#pcVolume.off svg.off,
	#pcVolume.mute svg.mute,
	#pcVolume.down svg.down,
	#pcVolume.up svg.up
	{
		display: block;
	}
/* Dropdown Boxes */
.dropdownBox
{
	box-sizing: border-box;
	margin-top: 16px;
	border: 1px solid var(--button-color);
	height: 39px;
	padding-left: 10px;
	cursor: pointer;
	overflow: hidden;
	background-color: var(--uicontrol-bg-color);
	display: flex;
	align-items: center;
}

	.dropdownBox.disabled
	{
		cursor: not-allowed;
		border-color: #34363a;
	}

	#stoplightBtn:hover, .dropdownBox:hover, #dateRange:hover
	{
		background-color: var(--uicontrol-hover-bg-color);
	}

	#stoplightBtn:active, .dropdownBox:active, #dateRange:active
	{
		background-color: var(--uicontrol-active-bg-color);
	}

	.dropdownBox.disabled:hover, #dateRange
	{
		background-color: var(--uicontrol-bg-color);
	}

#stoplightBtn, #stoplightBtn.disabled, #stoplightBtn.disabled:hover
{
	background-color: transparent;
}

.sizeMedium .dropdownBox
{
	margin-top: 10px;
	height: 29px;
	padding-left: 6px;
}

.sizeSmall .dropdownBox
{
	margin-top: 5px;
	height: 19px;
	padding-left: 3px;
}

#layoutLeftRecordingsControls .dropdownBox
{
	margin-top: 4px;
}

.sizeMedium #layoutLeftRecordingsControls .dropdownBox
{
	margin-top: 3px;
}

.sizeSmall #layoutLeftRecordingsControls .dropdownBox
{
	margin-top: 2px;
}

.dropdownBox[name="profile"]
{
	margin-top: 0px;
}

.dropdownLabel
{
	flex: 1 1 auto;
	font-size: 16px;
	color: var(--text-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sizeMedium .dropdownLabel
{
	font-size: 15px;
}

.sizeSmall .dropdownLabel
{
	font-size: 13px;
	line-height: 19px;
}

.dropdownBox:hover .dropdownLabel
{
	color: var(--text-hover-color);
}

.dropdownBox:active .dropdownLabel
{
	color: var(--text-active-color);
}

.dropdownBox.disabled .dropdownLabel
{
	color: #666666;
}

.dropdownArrow
{
	flex-shrink: 0;
	display: inline-block;
	float: right;
	padding-right: 11px;
	width: 10px;
	height: 8px;
}

.sizeMedium .dropdownArrow
{
	padding-right: 8px;
	width: 8px;
	height: 6.4px;
}

.sizeSmall .dropdownArrow
{
	padding-right: 4px;
	width: 5px;
	height: 4px;
}

.dropdown_list
{
	font-size: 16px;
	background-color: var(--dropdown-item-bg-color);
	display: inline-block;
	position: absolute;
	border: 1px solid var(--button-color);
	z-index: 9999999; /* Same z-index as playback settings panels. Toasts are at 999999 (one less 9)*/
	color: var(--dropdown-item-color);
	overflow: auto;
	box-shadow: 0px 5px 15px 5px rgba(0,0,0,1);
}

	.dropdown_list > div
	{
		padding: 10px;
		cursor: pointer;
	}

		.dropdown_list > div:hover, .dropdown_list > div.selected
		{
			background-color: var(--dropdown-item-hover-bg-color);
			color: var(--dropdown-item-hover-color);
		}

		.dropdown_list > div:active
		{
			background-color: var(--dropdown-item-active-bg-color);
			color: var(--dropdown-item-active-color);
		}

.sizeMedium .dropdown_list
{
	font-size: 15px;
}

.sizeSmall .dropdown_list
{
	font-size: 13px;
}

.sizeMedium .dropdown_list > div
{
	padding: 8px 6px;
}

.sizeSmall .dropdown_list > div
{
	padding: 6px 3px;
}

.dropdown_list > div.goldenLarger,
.dropdown_list > div.blueLarger,
.dropdown_list > div.redLarger
{
	font-size: 1.25em;
}

.dropdown_list > div.blueLarger
{
	color: var(--dropdown-item-blue-color);
}

	.dropdown_list > div.blueLarger:hover
	{
		background-color: var(--dropdown-item-hover-bg-color);
		color: var(--dropdown-item-blue-hover-color);
	}

	.dropdown_list > div.blueLarger:active
	{
		background-color: var(--dropdown-item-active-bg-color);
		color: var(--dropdown-item-blue-active-color);
	}

.dropdown_list > div.goldenLarger
{
	color: var(--dropdown-item-golden-color);
}

	.dropdown_list > div.goldenLarger:hover
	{
		background-color: var(--dropdown-item-hover-bg-color);
		color: var(--dropdown-item-golden-hover-color);
	}

	.dropdown_list > div.goldenLarger:active
	{
		background-color: var(--dropdown-item-active-bg-color);
		color: var(--dropdown-item-golden-active-color);
	}

.dropdown_list > div.redLarger
{
	color: var(--dropdown-item-red-color);
}

	.dropdown_list > div.redLarger:hover
	{
		background-color: var(--dropdown-item-hover-bg-color);
		color: var(--dropdown-item-red-hover-color);
	}

	.dropdown_list > div.redLarger:active
	{
		background-color: var(--dropdown-item-active-bg-color);
		color: var(--dropdown-item-red-active-color);
	}

.dropdown_list > div.separator
{
	padding: 0px;
	cursor: default;
	height: 1px;
	background-color: var(--dropdown-item-color);
}

.mainMenuIcon
{
	width: 24px;
	height: 24px;
	float: left;
	margin-right: 10px;
	line-height: initial;
}

.sizeMedium .mainMenuIcon
{
	width: 20px;
	height: 20px;
}

.sizeSmall .mainMenuIcon
{
	width: 16px;
	height: 16px;
}

.mainMenuIcon.smallIcon
{
	width: 16px;
	height: 16px;
}

.sizeSmall .mainMenuIcon.smallIcon
{
	width: 14px;
	height: 14px;
}

.sizeMedium .dropdownLabel > .mainMenuIcon.smallIcon
{
	margin-right: 7px;
}

.sizeSmall .dropdownLabel > .mainMenuIcon.smallIcon
{
	margin-right: 4px;
	padding-top: 2px;
}

.orangeIcon
{
	color: #FF5F00;
}

.greenIcon
{
	color: #64C35C;
}

.clipFilterSearchContainer
{
	margin-top: 4px;
}

.sizeMedium .clipFilterSearchContainer
{
	margin-top: 3px;
}

.sizeSmall .clipFilterSearchContainer
{
	margin-top: 2px;
}

.clipFilterSearchContainer
{
	position: relative;
}

	.clipFilterSearchContainer .icon
	{
		position: absolute;
		width: 18px;
		height: 18px;
		top: 11px;
		left: 11px;
	}

.sizeMedium .clipFilterSearchContainer .icon
{
	width: 17px;
	height: 17px;
	top: 6px;
	left: 6px;
}

.sizeSmall .clipFilterSearchContainer .icon
{
	width: 13px;
	height: 13px;
	top: 3px;
	left: 4px;
}

#clipFilterSearch
{
	font-size: 16px;
	box-sizing: border-box;
	border: 1px solid var(--button-color);
	height: 39px;
	padding-left: 36px;
	overflow: hidden;
	background-color: var(--uicontrol-bg-color);
	display: flex;
	align-items: center;
	color: var(--text-color);
}

.sizeMedium #clipFilterSearch
{
	height: 29px;
	font-size: 15px;
	padding-left: 29px;
}

.sizeSmall #clipFilterSearch
{
	height: 19px;
	font-size: 13px;
	padding-left: 21px;
}
/* Left Bar Checkboxes */
.leftBarBool
{
	margin: 5px 0px;
	cursor: pointer;
}

.sizeMedium .leftBarBool
{
	margin: 3px 0px;
}

.sizeSmall .leftBarBool
{
	margin: 1px 0px;
}

.leftBarBool:hover
{
	background-color: rgba(255,255,255,0.1);
}

.leftBarBool label
{
	cursor: pointer;
	font-size: 16px;
	display: inline-block;
	vertical-align: middle;
	padding: 2px;
	box-sizing: border-box;
	width: 100%;
}

.sizeMedium .leftBarBool label
{
	font-size: 14px;
	padding: 1px;
}

.sizeSmall .leftBarBool label
{
	font-size: 12px;
	padding: 1px 0px 0px 0px;
}

.leftBarBool input[type="checkbox"]
{
	cursor: pointer;
	vertical-align: middle;
	margin-right: 8px;
	width: 15px;
	height: 15px;
}

.sizeMedium .leftBarBool input[type="checkbox"]
{
	width: 14px;
	height: 14px;
}

.sizeSmall .leftBarBool input[type="checkbox"]
{
	width: 13px;
	height: 13px;
}

.leftBarBool .smallFlagIcon
{
	float: right;
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	color: var(--badge-color);
	padding-top: 1px;
}

.sizeMedium .leftBarBool .smallFlagIcon
{
	width: 14px;
	height: 14px;
	padding-top: 2px;
}

.sizeSmall .leftBarBool .smallFlagIcon
{
	width: 12px;
	height: 12px;
	padding-top: 3px;
}

.leftBarBool:hover .smallFlagIcon
{
	color: var(--badge-hover-color);
}
/* Calendar */
#datePickerDialog
{
	font-size: 16px;
	background-color: var(--panel-bg-color);
	display: inline-block;
	position: absolute;
	border: 1px solid var(--button-color);
	z-index: 100;
	box-shadow: 0px 0px 80px rgba(0,0,0,0.8);
	padding: 15px;
}

.calendarWrapper
{
	display: inline-block;
	margin: 0px 5px;
}

.calendarTitle
{
	text-align: center;
}

.Zebra_DatePicker
{
	width: 210px;
}

.Zebra_DatePicker
{
	position: static;
	font-size: 16px;
}

	.Zebra_DatePicker table
	{
		width: 100% !important;
	}

	.Zebra_DatePicker td
	{
		padding: 4px 0;
		border: 1px solid #707070 !important;
		position: relative;
	}

.sizeMedium .Zebra_DatePicker
{
	font-size: 14px;
	width: 185px;
}

	.sizeMedium .Zebra_DatePicker td
	{
		padding: 2px 0;
	}

.sizeSmall .Zebra_DatePicker
{
	font-size: 12px;
	width: 150px;
}

	.sizeSmall .Zebra_DatePicker td
	{
		padding: 0px 0;
	}

.Zebra_DatePicker .dp_daypicker td.dateHasClip::before
{
	content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAMElEQVQI123MwQkAIADDwNPZnFqczfoRVDBQ0leEFnqY280+udZLmCgOqRhehl9zAc+PHc8EYIPyAAAAAElFTkSuQmCC");
	position: absolute;
	top: -9px;
	left: 12.5px;
}
/* Camera Name Labels */
#cameraLabelsWrapper
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.cameraNameLabel
{
	position: absolute;
	text-align: center;
	pointer-events: none;
}
/* Camera Overlay Icons */
.cameraOverlayIcons
{
	position: absolute;
	pointer-events: none;
	text-align: right;
}

.cameraOverlayIcon
{
	width: 16px;
	height: 16px;
	display: inline-block;
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.7));
}

.cameraOverlayIcons.extraVisibility .cameraOverlayIcon
{
	background-color: rgba(255,0,0,0.3);
	border: 1px solid rgba(255,0,0,0.5);
	border-radius: 50%;
	padding: 2px;
	margin-left: 2px;
	margin-bottom: 2px;
}

@media all and (min-width: 1000px) and (min-height: 600px)
{
	.cameraOverlayIcons
	{
		margin-top: 2px;
	}

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

@media all and (min-width: 1600px) and (min-height: 1200px)
{
	.cameraOverlayIcon
	{
		width: 30px;
		height: 30px;
	}
}

@media all and (min-width: 1200px) and (min-height: 1600px)
{
	.cameraOverlayIcon
	{
		width: 30px;
		height: 30px;
	}
}
/* Clips */
.clipListText
{
	text-align: center;
	padding: 10px;
	font-size: 16px;
	box-sizing: border-box;
}

.clipListFailed
{
	cursor: pointer;
	border: 1px solid var(--text-color);
	color: var(--text-color);
	background-color: var(--uicontrol-bg-color);
	margin-top: 10px;
}

	.clipListFailed:hover
	{
		color: var(--text-hover-color);
		background-color: var(--uicontrol-hover-bg-color);
	}

	.clipListFailed:active
	{
		color: var(--text-active-color);
		background-color: var(--uicontrol-active-bg-color);
	}

#clipsbody
{
	width: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 0px;
	/*overflow-x: hidden;
	overflow-y: scroll;*/
	white-space: nowrap;
	/*height: 500px;*/
	font-size: 16px; /* Firefox relies on font-size to calculate mousewheel scroll distance */
	background-color: var(--cliplist-bg-color);
}

	#clipsbody.largerThumbs
	{
		font-size: 32px;
	}

.cliptile, .datetile, #clipListHeightSetter
{
	font-size: 0px; /* UI3 relies on 0px font size on most layout elements */
}

#clipsbodyWrapper
{
	height: 500px;
	width: 100%;
}

.portrait #clipsbodyWrapper
{
	position: absolute !important;
	left: 50%;
	width: 50%;
}

.clipListTopDateWrapper
{
	background-color: var(--datetile-bg-color);
}

#clipListTopDate
{
	cursor: pointer;
}

	#clipListTopDate.newData
	{
		color: #00FF00;
	}

.portrait #clipListTopDate
{
	position: absolute !important;
	top: 0px;
	left: 50%;
	width: 50%;
}

.clipIconWrapper
{
	position: absolute;
	z-index: 1;
	bottom: 5px;
	right: 0px;
	width: auto;
	height: 21px;
	color: var(--badge-color);
	text-align: right;
}

	.clipIconWrapper .clipicon
	{
		width: 20px;
		height: 20px;
		padding: 0px 1px 1px 0px;
		display: inline-block;
	}

.clipicon.icon_flag,
.clipicon.icon_protect,
.clipicon.icon_is_new,
.clipicon.icon_trigger_sentry
{
	display: none;
}

.clipIconWrapper.icon_flag .clipicon.icon_flag,
.clipIconWrapper.icon_protect .clipicon.icon_protect,
.clipIconWrapper.icon_is_new .clipicon.icon_is_new,
.clipIconWrapper.icon_trigger_sentry .clipicon.icon_trigger_sentry
{
	display: inline-block;
}

.sizeSmall .clipIconWrapper
{
	bottom: 2px;
	height: 15px;
}

	.sizeSmall .clipIconWrapper .clipicon
	{
		width: 14px;
		height: 14px;
	}

#clipsbody.largerThumbs .clipIconWrapper
{
	bottom: 28px;
	right: 0px;
	width: 16px;
	height: auto;
	white-space: normal;
}

.sizeMedium #clipsbody.largerThumbs .clipIconWrapper
{
	bottom: 0px;
	right: 1px;
	width: auto;
	height: 16px;
}

.sizeSmall #clipsbody.largerThumbs .clipIconWrapper
{
	bottom: 0px;
	right: 0px;
	width: 32px;
	height: 32px;
}

	#clipsbody.largerThumbs .clipIconWrapper .clipicon,
	.sizeMedium #clipsbody.largerThumbs .clipIconWrapper .clipicon,
	.sizeSmall #clipsbody.largerThumbs .clipIconWrapper .clipicon
	{
		width: 14px;
		height: 14px;
	}

.datetile
{
	height: 20px;
	box-sizing: border-box;
	margin: 3px 0px 4px 0px;
	padding: 1px 6px;
	line-height: 18px;
	font-size: 12px;
	color: var(--text-active-color);
	background-color: var(--datetile-bg-color);
}

.cliptile, .datetile, .clipListText
{
	position: absolute;
	overflow: hidden;
	white-space: nowrap;
	left: 15px;
	width: 219px;
}

.clipListText
{
	white-space: normal;
}

.cliptile
{
	height: 53px;
}

	.cliptile.enabled
	{
		cursor: pointer;
	}

	.cliptile.disabled
	{
		opacity: 0.2;
		background-color: #660000;
	}

	.cliptile.enabled:hover
	{
		background-color: #006ec5;
		color: #DDDDDD;
	}

	.cliptile.enabled.selected
	{
		background-color: #2196F3;
		color: #000000;
	}

		.cliptile.enabled.selected:hover
		{
			background-color: #59b3f9;
			color: #000000;
		}

	.cliptile.enabled:hover .clipIconWrapper
	{
		color: var(--badge-hover-color);
	}

	.cliptile.enabled.selected .clipIconWrapper,
	.cliptile.enabled.selected:hover .clipIconWrapper
	{
		color: var(--badge-selected-color);
	}

.sizeMedium .cliptile,
.sizeMedium .datetile,
.sizeMedium .clipListText
{
	left: 2px;
	width: 183px;
}

.sizeSmall .cliptile,
.sizeSmall .datetile,
.sizeSmall .clipListText
{
	left: 1px;
	width: 135px;
}

.sizeSmall .cliptile
{
	height: 40px;
}

.datetile .dayNameShort,
.datetile .dayNameFull
{
	float: right;
	margin-left: 2px;
	display: none;
}

.sizeLarge .datetile .dayNameFull
{
	display: inline;
}

.sizeMedium .datetile .dayNameShort,
.sizeSmall .datetile .dayNameShort
{
	display: inline;
}

#clipsbody.largerThumbs .cliptile
{
	height: 137px;
}

.sizeMedium #clipsbody.largerThumbs .cliptile
{
	height: 130px;
}

.sizeSmall #clipsbody.largerThumbs .cliptile
{
	height: 115px;
}

#clipsbody.largerThumbs .verticalAlignHelper
{
	display: none;
}

.clipimghelper
{
	display: inline-block;
	vertical-align: middle;
	width: 80px;
	margin-left: 16px;
	position: relative;
}

	.clipimghelper img
	{
		max-width: 80px;
		max-height: 45px;
		display: block;
		margin-left: auto;
		/*margin-right: auto;*/
	}

.sizeMedium .clipimghelper
{
	margin-left: 2px;
}

.sizeSmall .clipimghelper
{
	margin-left: 1px;
	width: 48px;
}

	.sizeSmall .clipimghelper img
	{
		max-width: 48px;
		max-height: 36px;
	}

#clipsbody.largerThumbs .clipimghelper
{
	display: block;
	width: 187px;
	height: 106px;
	text-align: center;
	margin: 4px auto 0px auto;
	background-color: #000000;
	margin-top: 4px;
}

.sizeMedium #clipsbody.largerThumbs .clipimghelper
{
	margin-top: 3px;
	width: 179px;
	height: 101px;
}

.sizeSmall #clipsbody.largerThumbs .clipimghelper
{
	margin-top: 2px;
	width: 133px;
	height: 75px;
}

#clipsbody.largerThumbs .clipimghelper img
{
	margin-left: 0px;
	display: inline;
	max-width: 187px;
	max-height: 106px;
}

.sizeMedium #clipsbody.largerThumbs .clipimghelper img
{
	max-width: 179px;
	max-height: 101px;
}

.sizeSmall #clipsbody.largerThumbs .clipimghelper img
{
	max-width: 133px;
	max-height: 75px;
}


.clipdur,
.clipmemo
{
	font-size: 9px;
	color: var(--text-active-color);
	position: absolute;
	bottom: 2px;
	right: 2px;
	padding: 1px 2px;
	background-color: rgba(0,0,0,0.6);
}

.sizeSmall .clipdur
{
	bottom: 0px;
}

/*.cliptile:hover .clipdur
{
	opacity: 0.25;
}*/

.clipmemo
{
	right: auto;
	bottom: auto;
	left: 2px;
	top: 2px;
	max-width: 72px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sizeSmall .clipmemo
{
	top: 0px;
	left: 0px;
	max-width: 42px;
}

#clipsbody.largerThumbs .clipmemo
{
	max-width: 179px;
}

.sizeMedium #clipsbody.largerThumbs .clipmemo
{
	max-width: 171px;
}

.sizeSmall #clipsbody.largerThumbs .clipmemo
{
	top: 2px;
	left: 2px;
	max-width: 124px;
}

.clipcolorbar
{
	display: inline-block;
	vertical-align: middle;
	width: 4px;
	height: 45px;
	margin-left: 4px;
}

.sizeSmall .clipcolorbar
{
	margin-left: 2px;
	width: 3px;
	height: 36px;
}

#clipsbody.largerThumbs .clipcolorbar
{
	display: block;
	vertical-align: auto;
	width: 187px;
	height: 4px;
	margin: 2px auto 2px auto;
}

.sizeMedium #clipsbody.largerThumbs .clipcolorbar
{
	width: 179px;
	height: 3px;
	margin: 2px auto 2px auto;
}

.sizeSmall #clipsbody.largerThumbs .clipcolorbar
{
	width: 133px;
	height: 3px;
	margin: 2px auto 2px auto;
}

.clipdesc
{
	display: inline-block;
	position: relative;
	z-index: 10;
	margin-left: 13px;
	vertical-align: middle;
	font-size: 10px;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 103px;
}

.sizeMedium .clipdesc
{
	margin-left: 4px;
	width: 90px;
}

.sizeSmall .clipdesc
{
	margin-left: 2px;
	width: 80px;
}

.portrait .clipdesc
{
	width: auto;
}

#clipsbody.largerThumbs .clipdesc
{
	display: block;
	vertical-align: auto;
	text-align: right;
	width: auto;
	margin-left: 16px;
	margin-right: 16px;
}

.sizeMedium #clipsbody.largerThumbs .clipdesc
{
	margin-left: 4px;
	margin-right: 4px;
}

.sizeSmall #clipsbody.largerThumbs .clipdesc
{
	margin-left: 2px;
	margin-right: 2px;
	text-align: center;
}

.cliptime
{
	font-size: 14px;
	line-height: 17px;
	color: var(--text-active-color);
}

.sizeSmall .cliptime
{
	font-size: 13px;
	line-height: 16px;
}

#clipsbody.largerThumbs .cliptime
{
	float: left;
	margin-right: 3px;
}

.sizeMedium #clipsbody.largerThumbs .cliptime
{
	float: left;
	margin-right: 2px;
}

.sizeSmall #clipsbody.largerThumbs .cliptime
{
	float: none;
	margin-right: 0px;
}

.clipcam
{
	font-size: 11px;
	padding-left: 1px;
}

.sizeSmall .clipcam
{
	font-size: 10px;
}


#clipsbody.largerThumbs .clipcam
{
	display: inline;
	text-align: right;
}

.sizeMedium #clipsbody.largerThumbs .clipcam
{
	display: inline;
	text-align: right;
}

.sizeSmall #clipsbody.largerThumbs .clipcam
{
	display: block;
	text-align: center;
}
/* Timeline */
#layoutbottomTimeline
{
	height: 96px;
	display: none;
}

.clipTimeline
{
	position: relative;
	width: 100%;
	height: 100%;
}

.timelineLegendBar
{
	height: 16px;
	background-color: var(--datetile-bg-color);
	position: relative;
}

.timelineLegend
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.timelineLabel
{
	position: absolute;
	height: 15px;
	top: 1px;
	background-color: var(--datetile-bg-color);
	color: var(--text-active-color);
	border-left: 1px solid var(--text-active-color);
	padding-left: 2px;
	padding-right: 4px;
	font-size: 12px;
	white-space: nowrap;
	box-shadow: -3px 0px 4px var(--datetile-bg-color);
	z-index: 2;
}

.timelineLabelMinor
{
	z-index: 0;
	color: var(--text-color);
	border-color: var(--text-color);
}

.timelineCurrentTimeWrapper
{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 16px;
}

.timelineCurrentTime
{
	border: 1px solid var(--button-color);
	padding: 0px 4px;
	box-shadow: 0px 0px 9px #000000;
	background-color: rgba(0,0,0,0.8);
	color: var(--text-active-color);
	font-size: 12px;
	z-index: 2;
	height: 30px;
	margin-bottom: 16px;
	box-sizing: border-box;
	overflow: hidden;
	white-space: pre-line;
	text-align: center;
}

.timelineMain
{
	height: 80px;
	background-color: var(--timeline-background-color);
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.timelineButtonBar
{
	position: absolute;
	top: 0px;
	height: 100%;
	right: 0px;
	width: 36px;
	box-sizing: border-box;
	border-top: 1px solid #383E47;
	border-left: 1px solid #383E47;
	padding-top: 1px;
	background-color: var(--panel-bg-color);
	cursor: default;
}

.timelineButton
{
	width: 22px;
	height: 22px;
	padding: 4px 7px 5px 6px;
}

.timelineGoLive svg
{
	transform: rotate(329deg);
	transform-origin: center;
}

.timelineCenterBar
{
	position: absolute;
	top: 0px;
	height: 100%;
	width: 2px;
	background-color: rgba(0,213,255,0.75);
	z-index: 2;
}

.timelineError
{
	font-size: 12px;
	text-shadow: 0px 0px 4px #000000;
	position: absolute;
	top: 0px;
	left: 0px;
}
/* Toasts */
#toast-wrapper
{
	position: fixed;
	max-height: calc(100vh - 64px - 64px);
	bottom: 64px;
	overflow: hidden;
	display: flex;
	flex-direction: column-reverse;
	right: 12px;
	z-index: 999;
}

.uiIsLoading #toast-wrapper
{
	z-index: 999999;
}

.sizeMedium #toast-wrapper
{
	max-height: calc(100vh - 52px - 48px);
	bottom: 48px;
}

.sizeSmall #toast-wrapper
{
	max-height: calc(100vh - 40px - 36px);
	bottom: 36px;
}

#toast-container
{
	position: static;
	font-size: 16px;
	z-index: 0;
}

	#toast-container > .toast-warning > div,
	#toast-container > .toast-warning a
	{
		color: #000000;
	}

	#toast-container > .toast-warning
	{
		background-color: #E0E000;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXElEQVRIx+WVoU7DUBSG/y+ZqEBMTFRMTCAgQUwgKhA8AAKJIMHsERATEyQ8AWoCMYFA8ACTExWTiIqJiQkEAjFRMTFxMYfkUrq2GW1CwkmuuOfk/n/P+c85lf6VAaeSLpskiIGlpKAJ8CtJzs6wbvwAeAPmwAuQSgrrJLgDtsCJpBBYA5O6wHvABrj3yjWQ5ICojto/A4ussMAMmP8W/8xEPc+JHVlm1/uCt4BX4NG7T6z2HctiBLxLOtinNAN73PbcX23a80gTX5+q1gY+rPd90tQIOp4vAjYeaaWvHwNxjn9lBFn/EzCtCh4BW0n9nNjSYll/F0izGe8SNvGEzWvZeEdslKPZDxsC64I1EBbUOgBWwLhsYm8LhE9tgg+LFmLuhANTW8WtkoWXAt0CDWdA8g3HY74o26oVhqpvjTCUJCz1haTAOfdQ07/jRlLonDuWieKaOJVn40/bJ5sEYUYnrJHQAAAAAElFTkSuQmCC) !important
	}

.videoPlayerTroubleshootLink
{
	font-weight: bold;
	font-size: 1.2em;
	display: block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
/* camimg */
#camimg_wrapper
{
	position: absolute;
}

#camimg_store
{
	display: none;
}

.videoCanvas,
#videoElement_wrapper,
#videoElement_wrapper video
{
	width: 100%;
	height: 100%;
}

	#camimg_store .videoCanvas,
	#camimg_store #videoElement_wrapper,
	.videoCanvas.deactivated,
	#videoElement_wrapper.deactivated
	{
		position: absolute;
		top: -50000px;
		left: -50000px;
		opacity: 0;
	}

	#videoElement_wrapper video
	{
		pointer-events: none;
	}

body + div
{
	display: none !important; /* Remove opera's video element overlay */
}

#zoomhint
{
	position: absolute;
	background-color: #000000;
	color: var(--text-active-color);
	padding: 3px;
	opacity: 1;
	margin: 0px 5px 5px 0px;
	font-size: 16px;
	pointer-events: none;
}

.inputRequiredToPlay
{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 500000;
}

	.inputRequiredToPlay div
	{
		font-size: 16pt;
		background-color: rgba(25,0,0,0.75);
		text-align: center;
		padding: 20px;
		margin: 10px;
		border: 3px outset #BB6666;
		border-radius: 5px;
	}

.camimg_loading
{
	visibility: hidden;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	background-color: rgba(0,0,0,0.5);
}

	.camimg_loading.lessIntense
	{
		background-color: rgba(0,0,0,0.1);
	}

.camimg_loading_anim, #camimg_playIcon, #camimg_pauseIcon, #camimg_centerIconBackground
{
	display: none;
	color: #dddddd;
	width: 100px;
	height: 100px;
	position: absolute;
}

.camimg_loading_anim
{
	display: block;
	visibility: hidden;
}

	.camimg_loading_anim svg
	{
		opacity: 0.5;
	}

#camimg_loading.visible,
#camimg_loading_anim.visible,
#camimg_false_loading.visible
{
	visibility: visible;
}

#camimg_loading.hidden,
#camimg_loading_anim.hidden,
#camimg_false_loading.hidden
{
	visibility: hidden;
}

#camimg_loading.disabledBySetting,
#camimg_false_loading.disabledBySetting
{
	background-color: rgba(0,0,0,0);
}

#camimg_loading_anim.disabledBySetting,
#camimg_false_loading_anim.disabledBySetting
{
	visibility: hidden;
}

#camimg_false_loading_anim
{
	display: block;
}

#camimg_playIcon, #camimg_pauseIcon
{
	width: 40px;
	height: 40px;
}

#camimg_centerIconBackground
{
	color: rgba(0,0,0,0.667);
}

#camimg_preview
{
	position: absolute;
	left: 0px;
	top: 0px;
}
/* context menu */
.b-m-mpanel
{
	font-family: Consolas, Arial, sans-serif;
	box-sizing: border-box;
	max-height: 100vh;
	overflow-y: auto;
}

	.b-m-mpanel a
	{
		text-decoration: none;
		color: #000000;
		cursor: default;
	}

	.b-m-mpanel::-webkit-scrollbar-thumb
	{
		background-color: #BBBBBB;
	}

	.b-m-mpanel::-webkit-scrollbar-track
	{
		background-color: #E0E0E0;
	}
/* Playback Controls */
#seekhint
{
	/*background-color: rgba(0,0,0,0.75);*/
	position: absolute;
	width: 160px;
	border: 2px solid #000000;
	border-radius: 2px;
	background-color: rgba(0,0,0,0.80);
}

#seekhint_img
{
	width: 160px;
	display: none;
}

#seekhint_canvas
{
	width: 160px;
	display: none;
}

#seekhint_loading
{
	width: 160px;
	height: 20px;
	top: 0px;
	left: 0px;
	position: absolute;
	background-color: rgba(0,0,0,0.25);
}

	#seekhint.hidden,
	#seekhint_loading.hidden,
	#seekhint.hidden #seekhint_loading
	{
		visibility: hidden;
	}

#seekhint_loading_anim
{
	opacity: 0.5;
	width: 100%;
	height: 100%;
	margin: 0px auto;
}

#seekhint_helper
{
	text-align: center;
	width: 100%;
	font-size: 12px;
	display: none;
}

#seekhint_label
{
	padding: 3px 0px;
	text-align: center;
	width: 100%;
	font-size: 16px;
}

#playbackControls
{
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#bf000000',GradientType=0 ); /* IE6-9 */
	bottom: 0px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	/*pointer-events: none;*/
}

	#playbackControls *
	{
		pointer-events: auto;
	}

#pcButtonContainer
{
	margin-bottom: 6px;
	overflow: hidden;
	white-space: normal;
	padding: 0px 8px;
}

.sizeMedium #pcButtonContainer
{
	margin-bottom: 4px;
}

.sizeSmall #pcButtonContainer
{
	margin-bottom: 2px;
}

.pcText
{
	display: inline-block;
	vertical-align: top;
	color: var(--pctext-color);
	font-size: 16px;
	line-height: 42px;
	padding: 0px 8px;
}

#playbackSpeedText
{
	cursor: pointer;
}

	#playbackSpeedText:hover
	{
		color: var(--pctext-hover-color);
	}

.sizeMedium .pcText
{
	font-size: 14px;
	line-height: 33px;
	padding: 0px 6px;
}

.sizeSmall .pcText
{
	font-size: 12px;
	line-height: 24px;
	padding: 0px 4px;
}

.pcButton
{
	display: inline-block;
	vertical-align: top;
	width: 26px;
	height: 26px;
	padding: 8px;
	color: var(--pctext-color);
	cursor: pointer;
}

	.pcButton:hover
	{
		color: var(--pctext-hover-color);
	}

.rightSide
{
	float: right;
}

.sizeMedium .pcButton
{
	width: 21px;
	height: 21px;
	padding: 6px;
}

.sizeSmall .pcButton
{
	width: 16px;
	height: 16px;
	padding: 4px;
}

.flagged
{
	color: #3d65ff;
}

	.flagged:hover
	{
		color: #5079ff;
	}

.playbackSettings
{
	position: absolute;
	background-color: rgba(0,0,0,0.85);
	color: var(--text-active-color);
	right: 20px;
	bottom: 120px;
	padding: 10px 0px;
	overflow: hidden;
	overflow-y: auto;
	border: 1px solid #666666;
	z-index: 9999999; /* Must be higher than toast messages or else toast messages can get in the way */
}

.playbackSettingsLine
{
	display: block;
	cursor: pointer;
	padding: 10px;
}

	.playbackSettingsLine.alignRight
	{
		text-align: right;
	}

.playbackSettingsLine, .playbackSettingsCheckboxWrapper, .customCheckboxWrapper
{
	font-size: 18.4px;
}

	.playbackSettingsCheckboxWrapper label, .customCheckboxWrapper label
	{
		padding: 13px 10px;
		overflow: hidden;
	}

	.playbackSettingsCheckboxWrapper label
	{
		display: block;
	}

	.customCheckboxWrapper label
	{
		display: inline-block;
	}

	.customCheckboxWrapper .ui
	{
		text-align: left;
	}

	.playbackSettingsLine:hover, .playbackSettingsCheckboxWrapper label:hover, .playbackSettingsLine.selected
	{
		background-color: rgba(255,255,255,0.3);
	}

	.customCheckboxWrapper label:hover
	{
		background-color: rgba(255,255,255,0.1);
	}

	.playbackSettingsCheckboxWrapper input, .customCheckboxWrapper input
	{
		vertical-align: middle;
	}

.sizeSmall .speedPanel .playbackSettingsLine
{
	padding: 5px 10px;
	font-size: 14px;
}

div.warningSymbol
{
	display: inline-block;
	position: relative;
	color: #FF0000;
	background-color: transparent;
	font-size: 0px;
}

	div.warningSymbol .warningSymbolWhiteInterior
	{
		position: absolute;
		background-color: #FFFFFF;
		width: 20%;
		height: 53%;
		top: 32%;
		left: 40%;
	}

	div.warningSymbol svg
	{
		width: 100% !important;
		height: 100% !important;
	}

div.warningSymbol /* Some parent elements need to override these styles */
{
	vertical-align: bottom;
	margin-right: 4px;
	width: 20px;
	height: 20px;
}

.profileListItem div.warningSymbol
{
	width: 18px;
	height: 18px;
}

.sizeMedium .dropdownLabel div.warningSymbol,
.sizeMedium .dropdown_list div.warningSymbol
{
	width: 18px;
	height: 18px;
}

.sizeSmall .dropdownLabel div.warningSymbol,
.sizeSmall .dropdown_list div.warningSymbol
{
	width: 16px;
	height: 16px;
}

#playbackSettingsWarning.warningSymbol
{
	vertical-align: unset;
	margin-right: unset;
}

div.warningSymbol.button
{
	cursor: pointer;
}

	div.warningSymbol.button:hover
	{
		color: #FF6666;
	}

.playbackSettingsSpacer, .customCheckboxSpacer
{
	display: inline-block;
	width: 30px;
	height: 0px;
}

.playbackSettingsFloatRight
{
	float: right;
	line-height: 18.4px;
	margin-left: 10px;
}

	.playbackSettingsFloatRight .dialogOption_item_btn
	{
		padding: 0px;
		margin: -3px 0px 0px 10px;
	}

		.playbackSettingsFloatRight .dialogOption_item_btn input[type="button"]
		{
			margin: 0px;
		}

.playbackSettingsRightArrow
{
	display: inline-block;
	margin: 2px 2px 2px 10px;
	width: 12px;
	height: 12px;
}

.playbackSettingsLeftArrow
{
	display: inline-block;
	margin: 2px 10px 2px 2px;
	width: 12px;
	height: 12px;
}

.playbackSettingsEditProfiles
{
	display: inline-block;
	vertical-align: bottom;
	padding: 1px 2px 3px 2px;
	margin-left: 12px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	color: #BBBB00;
	border: 1px solid #666600;
	border-radius: 4px;
}

	.playbackSettingsEditProfiles:hover
	{
		background-color: rgba(255,255,255,0.25);
		border-color: #BBBB00;
		color: #FFFF00;
	}

.playbackSettingsHeading
{
	border-bottom: 1px solid #666666;
	padding-top: 5px !important;
	padding-bottom: 15px !important;
	margin-bottom: 5px;
}

	.playbackSettingsHeading:hover
	{
		background-color: transparent !important;
	}

.sizeSmall .speedPanel .playbackSettingsHeading
{
	padding: 5px 10px;
	font-size: 14px;
	padding-top: 0px !important;
	padding-bottom: 10px !important;
	margin-bottom: 3px;
}

#playbackSettingsButton
{
	position: relative;
}

#playbackSettingsQualityMark
{
	position: absolute;
	background-color: #FF0000;
	color: #FFFFFF;
	padding: 1px 2px;
	top: 6px;
	right: 5px;
	font-size: 10px;
}

.sizeMedium #playbackSettingsQualityMark
{
	top: 4px;
	right: 3px;
	font-size: 9px;
	padding: 0px 1px;
}

.sizeSmall #playbackSettingsQualityMark
{
	top: 1px;
	right: 0px;
	font-size: 8px;
	padding: 0px 1px;
}

#playbackSettingsWarning
{
	display: none;
	position: absolute;
	bottom: 6px;
	left: 2px;
	width: 24px;
	height: 24px;
}

.sizeMedium #playbackSettingsWarning
{
	bottom: 4px;
	left: 2px;
	width: 20px;
	height: 20px;
}

.sizeSmall #playbackSettingsWarning
{
	bottom: 2px;
	left: 0px;
	width: 16px;
	height: 16px;
}

#pcButtonContainer.extraPadding
{
	margin-top: 8px;
}

.sizeMedium #pcButtonContainer.extraPadding
{
	margin-top: 7px;
}

.sizeSmall #pcButtonContainer.extraPadding
{
	margin-top: 6px;
}

#pcButtonContainer.extraPadding .pcButton,
#pcButtonContainer.extraPadding #volumeBar
{
	padding: 16px;
}

.sizeMedium #pcButtonContainer.extraPadding .pcButton,
.sizeMedium #pcButtonContainer.extraPadding #volumeBar
{
	padding: 14px;
}

.sizeSmall #pcButtonContainer.extraPadding .pcButton,
.sizeSmall #pcButtonContainer.extraPadding #volumeBar
{
	padding: 12px;
}

#pcButtonContainer.extraPadding .pcText
{
	padding: 8px 16px;
}

.sizeMedium #pcButtonContainer.extraPadding .pcText
{
	padding: 7px 14px;
}

.sizeSmall #pcButtonContainer.extraPadding .pcText
{
	padding: 8px 12px;
}

#pcButtonContainer.extraPadding #playbackSettingsQualityMark
{
	top: 22px;
	right: 13px;
}

.sizeMedium #pcButtonContainer.extraPadding #playbackSettingsQualityMark
{
	top: 22px;
	right: 13px;
}

.sizeSmall #pcButtonContainer.extraPadding #playbackSettingsQualityMark
{
	top: 22px;
	right: 13px;
}

.pcButton.hidden
{
	display: none;
}

.stdSkipBtn
{
	color: #CCCCCC;
}

	.stdSkipBtn div.centerText
	{
		text-shadow: 0px 0px 7px #000000;
	}

.skipbtn
{
	position: relative;
	color: #CCCCCC;
}

	.skipbtn div.centerText
	{
		position: absolute;
		bottom: 0px;
		right: 0px;
		font-size: 14px;
		color: var(--pctext-hover-color);
	}

.sizeMedium .skipbtn div.centerText
{
	font-size: 11px;
}

.sizeSmall .skipbtn div.centerText
{
	font-size: 10px;
}

#pcButtonContainer.extraPadding div.centerText
{
	margin: 8px;
}

.sizeMedium #pcButtonContainer.extraPadding div.centerText
{
	margin: 7px;
}

.sizeSmall #pcButtonContainer.extraPadding div.centerText
{
	margin: 6px;
}

.prioritizeTriggeredButton
{
	color: #737373;
}

	.prioritizeTriggeredButton.on
	{
		animation: prioritizeTriggeredButton 2s infinite;
		animation-timing-function: steps(4, end);
	}

@keyframes prioritizeTriggeredButton
{
	0%
	{
		color: #FFFFFF;
	}

	50%
	{
		color: var(--context-menu-icon-highlight-color);
	}

	100%
	{
		color: #FFFFFF;
	}
}

.showOnlyOnTimeline
{
	display: none;
}

.tabTimeline .showOnlyOnTimeline
{
	display: initial;
}

.tabTimeline .hideOnTimeline
{
	display: none;
}
/* Seek Bar */
#seekBarWrapper
{
	position: relative;
	box-sizing: border-box;
	height: 16px;
	margin: 0px 8px;
	padding: 0px 8px;
	cursor: pointer;
}

.sizeSmall #seekBarWrapper
{
	height: 12px;
	padding: 0px 6px;
}

#seekBarMain
{
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 100%;
	height: 4px;
	background-color: #373B46;
	overflow: hidden;
}

.sizeSmall #seekBarMain
{
	height: 3px;
}

#seekBarLeft
{
	display: inline-block;
	width: 0px;
	height: 100%;
	background-color: var(--seek-bar-color);
}

#seekBarHighlight
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 100%;
	background-color: rgba(255,255,255,0.15);
}

#seekBarHandle
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 8px;
	height: 8px;
	border: 4px solid #E8E8E8;
	background-color: #181818;
	opacity: 0;
}

.sizeSmall #seekBarHandle
{
	width: 6px;
	height: 6px;
	border: 3px solid #E8E8E8;
}

#seekBarMain.focus
{
	height: 8px;
	/* As of 2016-9-26, animations here cause minor video distortion in Chrome, so no animations here */
}

.sizeSmall #seekBarMain.focus
{
	height: 6px;
}

#seekBarHandle.focus
{
	opacity: 1;
}
/* Playback Header */
#playbackHeader
{
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	top: 0px;
	height: 64px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #EEEEEE;
	width: 100%;
	display: flex;
}

.sizeSmall #playbackHeader
{
	height: 42px;
}

.sizeMedium #playbackHeader
{
	height: 54px;
}

.sideBarRight #playbackHeader
{
	flex-direction: row-reverse;
}

#closeClipLeft
{
	margin: 12px 16px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}

	#closeClipLeft:hover
	{
		color: #FFCC00;
	}

	#closeClipLeft:active
	{
		color: #FF8800;
	}

.sizeSmall #closeClipLeft
{
	margin: 4px 8px;
	width: 24px;
	height: 24px;
}

.sizeMedium #closeClipLeft
{
	margin: 8px 12px;
	width: 28px;
	height: 28px;
}

#clipNameHeading
{
	flex: 1 1 auto;
	font-size: 24px;
	line-height: 42px;
	text-shadow: 2px 2px 2px rgba(0,0,0,1);
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 20px;
	box-sizing: border-box;
}

.sizeMedium #clipNameHeading
{
	font-size: 18px;
	line-height: 32px;
}

.sizeSmall #clipNameHeading
{
	font-size: 12px;
	line-height: 20px;
}

.sizeSmaller #clipNameHeading
{
	font-size: 10px;
	line-height: 16px;
}

.sideBarRight #clipNameHeading
{
	text-align: right;
}
/* About / Login Dialogs */
.monospace
{
	font-family: Consolas, monospace;
}

#aboutDialog, #loginDialog, #diskUsageDialog
{
	padding: 10px;
	font-size: 16px;
}

	#aboutDialog hr
	{
		border-color: #377ec0;
	}

	#aboutDialog a
	{
		cursor: pointer; /* Somehow necessary for cursor change before panel is clicked */
	}

	#aboutDialog .section, #loginDialog .section
	{
		margin-top: 25px;
	}

	#aboutDialog .lesserSection, #loginDialog .lesserSection
	{
		margin-top: 10px;
	}

#loginDialog
{
	max-width: 350px;
}

.browserIcon
{
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	margin-right: 10px;
}

.about_icon
{
	float: right;
	width: 150.5px;
	height: 48px;
}

#optionalFeaturesNotSupported
{
	display: none;
}
/* jpegSuppressionDialog */
.jpegSuppressionDialog
{
	box-sizing: border-box;
	padding: 10px;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
/* Loading spinner */
.spin075s
{
	-webkit-animation: spin 750ms linear infinite;
	-moz-animation: spin 750ms linear infinite;
	animation: spin 750ms linear infinite;
}

.spin1s
{
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

.spin2s
{
	-webkit-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-moz-keyframes spin
{
	100%
	{
		-moz-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin
{
	100%
	{
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin
{
	100%
	{
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
/* Grab cursor */
.grabcursor
{
	cursor: -moz-grab !important;
	cursor: -webkit-grab !important;
	cursor: grab !important;
}

.grabbingcursor
{
	cursor: -moz-grabbing !important;
	cursor: -webkit-grabbing !important;
	cursor: grabbing !important;
}
/* Corner Status Icons */
#cornerStatusIcons
{
	position: absolute;
	top: 0px;
	right: 0px;
	color: #FFFFFF;
	width: 50%;
}

.cornerStatusIconWrapper
{
	float: right;
	display: inline;
	width: 20px;
	height: 20px;
	padding: 5px 5px;
	margin: 5px;
	border: 1px solid transparent;
	border-radius: 50%;
	display: none;
}

	.cornerStatusIconWrapper.big
	{
		width: 64px;
		height: 64px;
	}

	.cornerStatusIconWrapper svg
	{
		filter: drop-shadow( 0px 0px 2px rgba(0,0,0,1) );
	}

	.cornerStatusIconWrapper.click
	{
		cursor: pointer;
	}

		.cornerStatusIconWrapper.click:hover svg
		{
			filter: drop-shadow( 0px 0px 5px rgba(255,255,255,0.33) );
		}

	.cornerStatusIconWrapper.noClick svg
	{
		pointer-events: none;
	}

@media all and (min-width: 800px) and (min-height: 600px)
{
	.cornerStatusIconWrapper
	{
		width: 30px;
		height: 30px;
	}

		.cornerStatusIconWrapper.big
		{
			width: 96px;
			height: 96px;
		}
}

@media all and (min-width: 600px) and (min-height: 800px)
{
	.cornerStatusIconWrapper
	{
		width: 30px;
		height: 30px;
	}

		.cornerStatusIconWrapper.big
		{
			width: 96px;
			height: 96px;
		}
}

@media all and (min-width: 1600px) and (min-height: 1200px)
{
	.cornerStatusIconWrapper
	{
		width: 40px;
		height: 40px;
	}

		.cornerStatusIconWrapper.big
		{
			width: 128px;
			height: 128px;
		}
}

@media all and (min-width: 1200px) and (min-height: 1600px)
{
	.cornerStatusIconWrapper
	{
		width: 40px;
		height: 40px;
	}

		.cornerStatusIconWrapper.big
		{
			width: 128px;
			height: 128px;
		}
}

/* Question Dialog */
/* Simple text buttons */
.simpleTextButton
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	padding: 5px;
	border: 0px solid transparent;
}

	.simpleTextButton:hover
	{
		box-shadow: 0px 0px 1px 2px rgba(255,255,255,0.5);
	}

	.simpleTextButton.disabled:hover
	{
		box-shadow: none;
	}

.btnBlue
{
	background-color: #B9B9B9;
	color: black;
}

	.btnBlue:hover
	{
		background-color: #9D9DC4;
	}

	.btnBlue:active
	{
		background-color: #9494D8;
	}

.btnBlue2
{
	background-color: #377EC0;
	color: white;
}

	.btnBlue2:hover
	{
		background-color: #75a7d7;
		color: white;
	}

	.btnBlue2:active
	{
		background-color: #b0cde8;
		color: white;
	}

.btnYellow
{
	background-color: #B9B9B9;
	color: black;
}

	.btnYellow:hover
	{
		background-color: #C4C49D;
	}

	.btnYellow:active
	{
		background-color: #E3E34A;
	}

.smallBtnYellow
{
	background-color: #C0C037;
	color: #000000;
	border: 0px;
	padding: 4px 8px;
	cursor: pointer;
	min-width: 120px;
}

	.smallBtnYellow:hover
	{
		background-color: #f0f05a;
	}

	.smallBtnYellow:active
	{
		background-color: #ffff93;
	}

.btnRed
{
	background-color: #B9B9B9;
	color: black;
}

	.btnRed:hover
	{
		background-color: #C49D9D;
	}

	.btnRed:active
	{
		background-color: #D86666;
	}

.btnGreen
{
	background-color: #9DC49D;
	color: black;
}

	.btnGreen:hover
	{
		background-color: #74dd74;
	}

	.btnGreen:active
	{
		background-color: #66D866;
	}

.btnTransparent
{
	background-color: transparent;
	color: var(--text-color);
	border: 1px solid var(--text-color);
}

	.btnTransparent:hover
	{
		background-color: rgba(255,255,255,0.1);
	}

	.btnTransparent.turnedon
	{
		background-color: var(--profile-active-color);
		color: #000000;
	}

.simpleTextButton.disabled
{
	background-color: transparent;
	color: #3e4149;
	border-color: #3e4149;
	cursor: not-allowed;
}
/* Three-state buttons */
.triBtn0,
.triBtn1,
.triBtn2
{
	color: #000000;
	border: 0px;
	padding: 4px 8px;
	cursor: pointer;
	min-width: 120px;
	font-weight: bold;
}

.triBtn0
{
	background-color: #c9c9c9;
}

	.triBtn0:hover
	{
		background-color: #b9b9b9;
	}

	.triBtn0:active
	{
		background-color: #a9a9a9;
	}

.triBtn1
{
	background-color: #ffc6c6;
}

	.triBtn1:hover
	{
		background-color: #ffb6b6;
	}

	.triBtn1:active
	{
		background-color: #ffa6a6;
	}

.triBtn2
{
	background-color: #c6ffc6;
}

	.triBtn2:hover
	{
		background-color: #b6ffb6;
	}

	.triBtn2:active
	{
		background-color: #a6ffa6;
	}

/* Context Menu Icon Classes */
.iconGray
{
	color: rgba(0,0,0,0.1);
}

.iconBlue
{
	color: var(--context-menu-icon-highlight-color);
}
/* Disk Usage Dialog */
.pieLegend
{
	float: right;
	border: 1px solid #999999;
	padding: 5px;
	margin: 5px 10px 5px 5px;
}

.pieLegendItem
{
	margin: 1px 0px;
}

.pieLegendBox
{
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid #999999;
	margin-right: 5px;
	vertical-align: text-bottom;
}

.diskUsageDisk
{
	display: inline-block;
	border: 1px solid #666666;
	background-color: rgba(255,255,255,0.1);
	padding: 5px;
	margin: 5px 10px;
	vertical-align: top;
}

	.diskUsageDisk:hover
	{
		border: 1px solid #777777;
		background-color: rgba(255,255,255,0.15);
	}

.diskName
{
	text-align: center;
	font-size: 1.1em;
	margin-bottom: 5px;
}

.diskInfo
{
	margin: 2px 0px;
	max-width: 200px;
}

.diskStatusOverallocated
{
	color: #FF0000;
	font-weight: bold;
}

.diskStatusNormal
{
	color: #00FF00;
}

/* System Log / System Config dialogs */

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

.logicon
{
	display: inline-block;
	font-size: 0px;
}

#sysconfigdialog.dialog_content
{
	padding: 0px;
}

.listDialogContent, #sysconfigcontent
{
	margin: 10px;
}

	.listDialogContent table, .cameralistcontent table
	{
		border-collapse: collapse;
		width: 100%;
	}

	.listDialogContent td, .cameralistcontent td, .listDialogContent th, .cameralistcontent th
	{
		border-bottom: 1px solid #555555;
		padding: 2px 8px;
	}

	.listDialogContent th
	{
		padding: 2px 15px;
	}

.cameralistcontent td
{
	max-width: 200px;
	word-wrap: break-word;
}

.listDialogContent img
{
	vertical-align: middle;
}

.listDialogContent td.levelcolumn
{
	width: 24px;
}

.listDialogContent td.centercolumn
{
	text-align: center;
}

/* Camera Properties / Camera List / Clip Properties / Convert/Export Queue */

#cameralistdialog, #convertexportlistdialog
{
	max-width: 915px;
}

#convertexportlistdialog
{
	min-width: 240px;
}

#convertexportlistcontent .heading
{
	font-size: 16px;
	text-align: center;
	margin-top: 3px;
}

#convertexportlistcontent .timestamp
{
	text-align: center;
	margin-bottom: 5px;
}

#convertexportlistcontent .clipdur
{
	top: 90px;
	right: 7px;
	bottom: unset;
	left: unset;
}

#convertexportlistcontent .clipsize
{
	top: 90px;
	right: unset;
	bottom: unset;
	left: 7px;
}

#convertexportlistcontent .queuedCancelNotice
{
	display: none;
}

#convertexportlistcontent.hasItemsRemaining .queuedCancelNotice
{
	display: block;
}

.icon16
{
	width: 16px;
	height: 16px;
}

.floatingBadges
{
	float: right;
	filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
	text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
	font-weight: bold;
}

.campropcontent
{
	min-width: 283px;
}

.camlist_item,
.exportlist_item
{
	display: inline-block;
	vertical-align: top;
	font-size: 0px;
}

#convertexportlistcontent .camlist_thumbbox
{
	background-color: #444444;
	position: relative;
}

.camlist_thumbbox
{
	display: inline-block;
	width: 160px;
	padding: 2px;
}

#cameralistdialog .camlist_thumbbox,
#convertexportlistcontent .exportlist_item.linked
{
	cursor: pointer;
}

	#cameralistdialog .camlist_thumbbox:hover,
	#convertexportlistcontent .exportlist_item.linked:hover
	{
		background-color: #CCCCCC !important;
	}

	#cameralistdialog .camlist_thumbbox:active,
	#convertexportlistcontent .exportlist_item.linked:active
	{
		background-color: #FFFFFF !important;
	}

.camlist_label
{
	padding: 1px 3px;
	min-height: 38px;
	line-height: 19px;
	font-size: 16px;
	word-wrap: break-word;
	word-break: break-all;
}

#convertexportlistcontent .camlist_label
{
	background-color: #000000;
	color: #CCCCCC;
	font-size: 14px;
}

#convertexportlistcontent a
{
	text-decoration: none;
}

#convertexportlistcontent .spinOverlay,
#convertexportlistcontent .noLinkOverlay
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#convertexportlistcontent .noLinkOverlay
{
	width: 160px;
	padding: 10px 2px 2px 2px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #CDCDCD;
	text-shadow: 0px 0px 5px #000000;
}

	#convertexportlistcontent .noLinkOverlay.lower
	{
		padding-top: 90px;
	}

#convertexportlistcontent .exportlist_item.active,
#convertexportlistcontent .exportlist_item.active .noLinkOverlay
{
	color: #00FF00;
}

.camlist_thumb
{
	width: 160px;
	max-height: 120px;
	background-color: rgba(0,0,0,0.8);
	vertical-align: middle;
}

.camlist_thumb_img
{
	display: none;
}

.camlist_thumb_img,
#convertexportlistcontent img.thumb
{
	max-width: 160px;
	max-height: 120px;
	margin-left: auto;
	margin-right: auto;
}

.camlist_thumb_aligner
{
	display: inline-block;
	vertical-align: middle;
	width: 0px;
}

#convertexportlistcontent .camlist_thumb_aligner
{
	height: 120px;
}

.camlist_thumb_helper
{
	display: inline-block;
	vertical-align: middle;
	width: 160px;
	text-align: center;
}

	.camlist_thumb_helper span
	{
		line-height: 120px;
		font-size: 18.6px;
	}

.dialogOptionPanel .customCheckboxSpacer
{
	display: none;
}

.dialogOption_item,
.camlist_item,
.exportlist_item
{
	margin: 7px;
}

.dialogOption_item_center,
.camlist_item_center
{
	text-align: center;
	margin: 7px 0px;
}

.camlist_item_indent
{
	margin-left: 10px;
}

.camlist_item_heading
{
	margin: 10px 0px 3px 0px;
}

.dialogOption_item_info,
.dialogOption_item_cb,
.dialogOption_item_ddl,
.dialogOption_item_btn
{
	margin: 0px auto;
}

.dialogOption_item_info,
.dialogOption_item_ddl,
.dialogOption_item_btn
{
	padding: 6px 0px;
}

	.dialogOption_item_info .icon
	{
		width: 16px;
		height: 16px;
		vertical-align: text-top;
	}

.dialogOption_item_btn
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

	.dialogOption_item_btn input[type="button"]
	{
		box-sizing: border-box;
		height: 28px;
		margin: 0px 10px;
		max-width: 35%;
	}

.dialogOption_item_comment
{
	color: #66cd66;
	padding-left: 12px;
	padding-right: 12px;
}

	.dialogOption_item_comment .settingsCommentError,
	.dialogOption_item_comment.settingsCommentError
	{
		color: #FF6666;
	}

.campropcontent .dialogOption_item_info
{
	max-width: 320px;
}

.campropcontent .dialogOption_item_cb,
.campropcontent .dialogOption_item_ddl,
.campropcontent .dialogOption_item_btn
{
	max-width: 340px;
}

.campropcontent .dialogOption_item_range
{
	max-width: 320px;
	margin: 0px auto;
	padding: 5px 10px;
	position: relative;
}

	.campropcontent .dialogOption_item_range:hover
	{
		background-color: rgba(255,255,255,0.1);
	}

	.campropcontent .dialogOption_item_range input
	{
		width: 315px;
		display: block;
	}

#layoutleft .dialogOption_item_cb
{
	padding: 6px 10px;
}

	#layoutleft .dialogOption_item_cb label
	{
		display: block;
		padding-left: 15px;
		text-indent: -15px;
	}

	#layoutleft .dialogOption_item_cb input[type="checkbox"]
	{
		width: 13px;
		height: 13px;
		padding: 0;
		margin: 0;
		vertical-align: bottom;
		position: relative;
		top: -1px;
	}

.sizeLarge #layoutleft .dialogOption_item_cb input[type="checkbox"]
{
	top: -3px;
}

.dialogOption_item.disabled,
.customCheckboxWrapper.disabled label
{
	color: #666666;
}

.dialogOption_item.column_reverse
{
	display: flex;
	flex-direction: column-reverse;
}

	.dialogOption_item.column_reverse .textBasedInput
	{
		max-width: unset;
	}

.dialogOption_label
{
	font-size: 16px;
	vertical-align: top;
	padding: 4px 10px;
}

.settingDesc
{
	font-size: 0.85em;
}

.dialogOptionPanel .customCheckboxWrapper label
{
	display: block;
	font-size: 16px;
	padding-right: 80px;
}

.dialogOptionPanel select,
.dialogOptionPanel input[type="number"],
.dialogOptionPanel .textBasedInput,
#uiSettingsPanel input[type="button"],
#uiSettingsPanel a.input,
#sysconfigdialog input[type="button"]
{
	box-sizing: border-box;
	height: 28px;
	margin: 0px 10px;
	float: right;
	max-width: 35%;
}

	.dialogOptionPanel .textBasedInput input[type="text"],
	.dialogOptionPanel .textBasedInput input[type="color"],
	.dialogOptionPanel .textBasedInput input[type="password"]
	{
		box-sizing: border-box;
		height: 28px;
	}

	.dialogOptionPanel .textBasedInput input[type="text"],
	.dialogOptionPanel .textBasedInput input[type="password"]
	{
		width: 100% !important;
	}

a[role="button"].showPasswordButton
{
	position: relative;
	margin-left: -27px;
	top: -1px;
	text-decoration: none;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: inline-block;
	text-align: center;
	opacity: 0.5;
}

	a[role="button"].showPasswordButton.showingPassword
	{
		opacity: 1;
		background-color: rgba(255,255,0,0.5);
	}

	a[role="button"].showPasswordButton:hover
	{
		background-color: rgba(0,0,0,0.1);
	}

.passwordInput
{
	padding-right: 29px;
}

.clipExportPanel select
{
	height: unset;
	float: none;
	max-width: 90%;
}

.sizeSmall .clipExportPanel select
{
	max-width: 85%;
}

.compact .select
{
	display: block;
}

#uiSettingsPanel a.input
{
	line-height: 28px;
}

.largeTextButton
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	padding: 15px 0px;
	width: 150px;
	margin: 5px;
	text-align: center;
	border: 0px solid transparent;
	font-size: 18px;
}

.largeBtnBlue
{
	background-color: #377EC0;
	color: #FFFFFF;
}

.largeBtnYellow
{
	background-color: #C0C037;
	color: #000000;
}

.largeBtnRed
{
	background-color: #C03737;
	color: #FFFFFF;
}

.largeBtnGreen
{
	background-color: #37C037;
	color: #FFFFFF;
}

.largeBtnDisabled
{
	background-color: #4A4A4A;
	color: #818181;
	cursor: default;
}

.clipPropertiesThumb
{
	display: block;
	margin: 0px auto 20px auto;
	border: 4px ridge #000000;
	border-radius: 4px;
	max-width: 88vw;
	max-height: 88vh;
	box-sizing: border-box;
}

.clipprop_item_info
{
	max-width: 430px;
	margin: 7px auto;
}

	.clipprop_item_info .clipicon,
	.uiSettingsRow .clipicon,
	.dialogOption_item .clipicon
	{
		width: 20px;
		height: 20px;
		display: inline-block;
		padding-right: 10px;
		vertical-align: middle;
	}

.campausedialog .clipprop_item_info
{
	text-align: center;
}
/* Streaming Profiles */
.streamingProfileUiPanel,
.streamingProfileEditorPanel
{
	min-width: 210px;
	max-width: 375px;
}

.streamingProfileUiPanelContent,
.streamingProfileEditorPanelContent
{
	padding: 3px;
}

.profileList
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.profileListItem
{
	min-height: 10px;
	padding: 3px 6px;
	margin: 3px 0px;
	background-color: var(--streaming-profile-item-bg-color);
	border: 1px solid #5f5f5f;
	border-radius: 5px;
	cursor: pointer;
	font-size: 10pt;
	color: #cdcdcd;
}

	.profileListItem:hover
	{
		background-color: var(--streaming-profile-item-hover-bg-color);
	}

	.profileListItem.ghost
	{
		background-color: var(--streaming-profile-item-ghost-bg-color) !important;
		margin: 0px !important;
		display: block !important;
		position: absolute;
		z-index: 999999999;
		box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.35);
		color: #dfdfdf;
	}

	.profileListItem.unsupportedProfile
	{
		background-color: #770000;
	}

		.profileListItem.unsupportedProfile:hover
		{
			background-color: #990000;
		}

	.profileListItem .profileCodec
	{
		float: right;
		opacity: 0.7;
	}
/* Group Layout UI */
.groupLayoutUiPanel
{
	min-width: 210px;
	max-width: 375px;
}

.groupLayoutUiPanelContent
{
	padding: 3px;
}
/* Webkit custom scrollbar for modal dialogs */
div::-webkit-scrollbar
{
	width: 12px;
	height: 12px;
}

div::-webkit-scrollbar-thumb
{
	background-color: #5e5e5e;
	border-left: 0px solid #393939;
}

	div::-webkit-scrollbar-thumb:hover
	{
		background-color: #6c6c6c;
	}

	div::-webkit-scrollbar-thumb:active
	{
		background-color: #7a7a7a;
	}

div::-webkit-scrollbar-track
{
	background-color: var(--panel-bg-color);
}

div::-webkit-scrollbar-corner
{
	background: #222222;
}

#clipsbodyWrapper .layoutleft-track
{
	background-color: var(--cliplist-bg-color);
}
/* For IE */
/*.dialog_content
{
	scrollbar-face-color: #277EAF;
	scrollbar-arrow-color: #000000;
	scrollbar-track-color: #1a557a;
	scrollbar-shadow-color: #277EAF;
	scrollbar-highlight-color: #277EAF;
	scrollbar-3dlight-color: #2A8FCF;
	scrollbar-darkshadow-color: #2A8FCF;
}*/
/* Persistent toast status */
.multi_operation_status_wrapper
{
	font-size: 0px;
	position: relative;
	display: inline-block;
	width: 200px;
	height: 20px;
	border: 1px solid #999999;
	margin: 3px 0px;
	background-color: rgba(0,0,0,0.5);
}

.multi_operation_status_bar
{
	width: 0%;
	height: 100%;
	background-color: var(--main-highlight-color);
}
/* Export Panel */
.clipExportPanel
{
	box-sizing: border-box;
	padding: 3px;
}

	.clipExportPanel,
	.clipExportPanel .dialogOption_label,
	.clipExportPanel .customCheckboxWrapper label
	{
		font-size: 16px;
	}

.sizeMedium .clipExportPanel,
.sizeMedium .clipExportPanel .dialogOption_label,
.sizeMedium .clipExportPanel .customCheckboxWrapper label
{
	font-size: 14px;
}

.sizeSmall .clipExportPanel,
.sizeSmall .clipExportPanel .dialogOption_label,
.sizeSmall .clipExportPanel .customCheckboxWrapper label
{
	font-size: 12px;
}

.clipExportPanel select
{
	font-size: 16px;
	height: auto;
}

.sizeMedium .clipExportPanel select
{
	font-size: 14px;
	height: auto;
}

.sizeSmall .clipExportPanel select
{
	font-size: 12px;
	height: auto;
}

.clipExportPanel .leftBarHeading
{
	line-height: 24px;
	height: auto;
	padding: 0px 5px;
	background-color: var(--dialog-titlebar-bg-color);
}

.clipExportPanel .panel_close
{
	width: 40px;
	height: 24px;
	font-size: 0px;
	float: right;
	color: var(--dialog-titlebar-color);
}

	.clipExportPanel .panel_close:hover
	{
		background-color: #9b0612;
		color: #FFFFFF;
	}

	.clipExportPanel .panel_close:active
	{
		background-color: #F1707A;
		color: #FFFFFF;
	}

.clipExportPanel .panel_close_icon
{
	width: 12px;
	height: 12px;
	margin: 6px auto;
}

	.clipExportPanel .panel_close_icon svg
	{
		stroke: currentColor;
		pointer-events: none;
	}

.sizeSmall .hideInSizeSmall
{
	display: none;
}

.showInSizeSmall
{
	display: none;
}

.sizeSmall .showInSizeSmall
{
	display: initial;
}

.exportStatus .fullDialogLink,
.exportStatus .downloadAutomaticallyOption,
.exportStatus .items_done div
{
	margin: 5px 0px;
}

/* Export Dialog */
.activeExportDialog
{
	padding: 10px;
}
/* Export Offset Selection */
#exportOffsetWrapper
{
	position: relative;
	height: 56px;
	display: none;
}

	#exportOffsetWrapper.hasRealTime
	{
		height: 74px;
	}

#exportOffsetStart,
#exportOffsetEnd
{
	position: absolute;
	bottom: 0px;
	height: 32px;
	width: 32px;
	border-radius: 25%;
	cursor: ew-resize;
}

.sizeSmall #exportOffsetStart,
.sizeSmall #exportOffsetEnd
{
	height: 28px;
	width: 28px;
}

#exportOffsetStart
{
	z-index: 1;
}

#exportOffsetEnd
{
	z-index: 2;
}

.exportOffsetFlagpole
{
	position: absolute;
	bottom: -16px;
	height: 16px;
	width: 1px;
}

.sizeSmall .exportOffsetFlagpole
{
	bottom: -12px;
	height: 12px;
}

#exportOffsetStart,
#exportOffsetStart .exportOffsetFlagpole
{
	background-color: rgba(0,255,0,0.5);
}

	#exportOffsetStart:hover,
	#exportOffsetStart:hover .exportOffsetFlagpole
	{
		background-color: rgba(0,255,0,0.6);
	}

#exportOffsetEnd,
#exportOffsetEnd .exportOffsetFlagpole
{
	background-color: rgba(255,0,0,0.5);
}

	#exportOffsetEnd:hover,
	#exportOffsetEnd:hover .exportOffsetFlagpole
	{
		background-color: rgba(255,0,0,0.6);
	}

.exportOffsetFlagLabel
{
	position: absolute;
	top: -22px;
	font-size: 16px;
	line-height: 16px;
	padding: 2px 5px;
	color: #EEEEEE;
	background-color: rgba(0,0,0,0.75);
	opacity: 1;
	border-radius: 3px;
}

#exportOffsetWrapper.hasRealTime .exportOffsetFlagLabel
{
	top: -38px;
}

.exportOffsetFlagLabel .realTime
{
	white-space: nowrap;
}

.exportOffsetMessage
{
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
	font-size: 24px;
	color: rgba(255,255,255,1);
	text-shadow: 0px 0px 10px rgba(0,0,0,1);
}

.exportControlsExportBtn,
.exportControlsCancelBtn
{
	margin: 2px 4px;
	border: none;
	color: #FFFFFF;
	padding: 3px 6px;
	border-radius: 3px;
	cursor: pointer;
}

.exportControlsExportBtn
{
	background-color: #377EC0;
}

	.exportControlsExportBtn:hover
	{
		color: #FFFFFF;
		background-color: #3992e4;
		box-shadow: 0px 0px 5px rgba(255,255,255,0.5) inset;
	}

.exportControlsCancelBtn
{
	background-color: #C03737;
}

	.exportControlsCancelBtn:hover
	{
		color: #FFFFFF;
		background-color: #EA2D2D;
		box-shadow: 0px 0px 5px rgba(255,255,255,0.5) inset;
	}

.setStartFrame
{
	color: rgba(0,128,0,0.75);
}

.setEndFrame
{
	color: rgba(255,0,0,0.75);
}
/* UIHelp */
.UIHelp
{
	padding: 10px;
	font-size: 1.2em;
	max-width: 400px;
}
/* Stats for nerds */
.statsForNerds
{
	padding-bottom: 6px;
	box-sizing: border-box;
}

.statsRow
{
	width: 320px;
	height: 16px;
	line-height: 16px;
	margin-top: 1px;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
}

.statsName
{
	display: inline-block;
	width: 105px;
	height: 16px;
	margin-right: 8px;
	overflow: hidden;
	text-align: right;
	text-overflow: clip;
}

.statsValue
{
	display: inline-block;
	width: 200px;
	height: 16px;
	overflow: hidden;
}

.statsGraphValue
{
	display: inline-block;
	width: 132px;
	margin-right: 3px;
	height: 16px;
	display: none;
	vertical-align: top;
}

.statsHtmlValue
{
	display: inline-block;
	height: 16px;
	vertical-align: top;
}

.simpleGraph
{
	width: 100%;
	height: 100%;
}
/* Collapsible sections for dialogs */
.collapsible_section_heading
{
	text-align: center;
	font-size: 18.6px;
	margin-top: 8px;
	padding: 7px 0px;
	cursor: pointer;
	background-color: var(--collapsible-heading-bg-color);
	color: var(--collapsible-heading-color);
}

	.collapsible_section_heading:hover
	{
		background-color: var(--collapsible-heading-hover-bg-color);
	}

	.collapsible_section_heading:active
	{
		background-color: var(--collapsible-heading-active-bg-color);
	}

	.collapsible_section_heading.expanded
	{
		background-color: var(--collapsible-heading-expanded-bg-color);
		color: var(--collapsible-heading-expanded-color);
	}

		.collapsible_section_heading.expanded:hover
		{
			background-color: var(--collapsible-heading-expanded-hover-bg-color);
		}

		.collapsible_section_heading.expanded:active
		{
			background-color: var(--collapsible-heading-expanded-active-bg-color);
		}

	.collapsible_section_heading.permanentOpen
	{
		cursor: default;
	}

		.collapsible_section_heading.permanentOpen:hover,
		.collapsible_section_heading.permanentOpen:active
		{
			background-color: var(--collapsible-heading-expanded-bg-color);
			color: var(--collapsible-heading-expanded-color);
		}

.collapsible_section
{
	padding: 7px 0px;
}

.campropdialog .collapsible_section
{
	padding: 7px;
}
/* Settings Dialog */
#uiSettingsPanelContent,
.uiSettingsButtonBar
{
	min-width: 286px;
	max-width: 375px;
}

.uiSettingsButtonBar
{
	display: flex;
	position: sticky;
	top: -2px;
	background-color: var(--dialog-bg-color);
	z-index: 1;
}

	.uiSettingsButtonBar input
	{
		background-color: #111111;
		color: #DDDDDD;
		border: 1px solid #666666;
		border-radius: 2px;
		font-size: 20px;
		padding: 2px 4px;
		flex: 1 1 auto;
		width: 100%;
	}

		.uiSettingsButtonBar input[type="button"]
		{
			flex: 0 0 auto;
			height: auto !important;
			margin: 0px 0px 0px 5px !important;
		}

			.uiSettingsButtonBar input[type="button"]:hover
			{
				background-color: #222222;
			}

.filterTextNoMatch
{
	margin: 20px 10px;
	text-align: center;
	font-size: 16px;
}

.categoryLinks
{
	margin: 0px 0px 6px 12px;
	color: #276AA6;
	font-size: 1.5em;
}

	.categoryLinks a
	{
		color: #377EC0;
		font-weight: bold;
		text-decoration: none;
	}

		.categoryLinks a:hover
		{
			color: #4d9ce4;
		}

		.categoryLinks a:active
		{
			color: #8dc1f1;
		}

#uiSettingsPanel input[type="number"],
.streamingProfileEditorPanel input[type="number"]
{
	width: 80px;
}

#uiSettingsPanel input[type="text"],
.streamingProfileEditorPanel input[type="text"]
{
	width: 169px;
}

#uiSettingsPanel input[type="password"],
.streamingProfileEditorPanel input[type="password"]
{
	width: 169px;
}

#uiSettingsPanel input[type="range"],
.dialogOptionPanel input[type="range"]
{
	width: 90%;
	margin: 0px 5%;
}

.uiSettingsRow,
.profileEditorRow
{
	margin: 1px 0px;
}

	.uiSettingsRow.everyOther,
	.profileEditorRow.everyOther
	{
		background-color: rgba(255,255,255,0.05);
	}

	/*#uiSettingsPanel input[type="button"]
{
	background-color: #C03737;
	color: #FFFFFF;
	border: 0px solid transparent;
	padding-left: 12px;
	padding-right: 12px;
	cursor: pointer;
}*/

	.uiSettingsRow.withDefaultBtn
	{
		display: flex;
		align-items: center;
	}

		.uiSettingsRow.withDefaultBtn > *
		{
			width: 100%;
			flex: 1 1 auto;
		}

		.uiSettingsRow.withDefaultBtn > .uiFormFieldDefaultBtn
		{
			flex: 0 0 auto;
			padding: 10px 4px 10px 2px;
			width: 20px;
			height: 20px;
			cursor: pointer;
			color: var(--text-color);
		}

			.uiSettingsRow.withDefaultBtn > .uiFormFieldDefaultBtn:hover
			{
				color: var(--text-hover-color);
			}

			.uiSettingsRow.withDefaultBtn > .uiFormFieldDefaultBtn:active
			{
				color: var(--text-active-color);
			}

#volumeBar.audioTemporarilyUnavailable,
#volumeBar.audioNoPermission,
.fullscreenButtonHidden,
.maximizeButtonHidden,
.pictureInPictureButtonHidden,
.temporarilyUnavailable,
.permanentlyUnavailable
{
	display: none !important;
}

.nonMatchingNativeRes, .dprTag, .requestedRes
{
	color: #e6e660;
}

ul.extraSpacing li
{
	margin-bottom: 10px;
}

.dialogOption_label ul
{
	margin-top: 0px;
	margin-bottom: 0px;
}

#serverTimeLimits
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 8px;
	white-space: normal;
	word-break: break-word;
}

#sessionLimitClock, #dailyLimitClock
{
	display: none;
	font-weight: bold;
	font-size: 16px;
	line-height: initial;
	background-color: rgba(0,0,0,0.5);
	padding: 0px 3px;
}

#sessionLimitClock
{
	color: #FFFF00;
}

#dailyLimitClock
{
	color: #FF8800;
}

.currentH264PlayerComment
{
	text-align: center;
	font-weight: bold;
	color: #00d900;
}

.ptzSectionComment
{
	text-align: center;
	font-weight: bold;
}
/* Audio Visualizer */
#ui3AudioVisualizerPanel
{
	width: 80vw;
	max-width: 1032px;
}

.audioGraph
{
	width: 100%;
	height: 256px;
}
/* Dialog Theme */
.dialog_wrapper.darkTheme
{
	border-color: var(--dialog-border-color);
	background-color: var(--dialog-bg-color);
	color: var(--dialog-color);
}

	.dialog_wrapper.darkTheme .dialog_titlebar
	{
		border-bottom-color: var(--dialog-titlebar-bottom-border-color);
		background-color: var(--dialog-titlebar-bg-color);
	}

	.dialog_wrapper.darkTheme .dialog_close,
	.dialog_wrapper.darkTheme .dialog_refresh
	{
		background-color: var(--dialog-titlebar-bg-color);
		color: var(--dialog-titlebar-color);
	}

	.dialog_wrapper.darkTheme div::-webkit-scrollbar-track
	{
		background: var(--dialog-bg-color);
	}
/* Gamepad Preview */
#ui3gamepad_preview
{
	width: 350px;
}

.gamepadTestHeading
{
	text-align: center;
	font-weight: bold;
	margin-bottom: 5px;
}

.gamepadTestDescription
{
	margin-bottom: 10px;
}

#ui3gamepadTestOutput
{
	margin-top: 5px;
}

.gamepadBindingsComment
{
	text-align: center;
	font-weight: bold;
}
/* Misc */
.icode
{
	display: inline;
	user-select: all;
	white-space: pre;
	font-family: Consolas, monospace;
	border: 1px solid #808080;
	padding: 0px 2px;
}

.toast-error
{
	white-space: pre-wrap;
}

.clipicon.icon-ai_person,
.clipicon.icon-ai_vehicle,
.clipicon.icon-ai_wildlife
{
	color: #FF5F00;
}