/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

#Contents.EconItemStyleContents
{
	margin: 0px;
	padding: 0px;
	width: 350px;
	flow-children: down;
	border: 2px solid black;
	box-shadow: none;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #000 ), to( #222 ) );
	border: 0px;
	box-shadow: fill #00000077 2px 0px 4px 4px;
}

#Header
{
	flow-children: right;
	background-color: black;
	width: 100%;
}

.Title
{
	color: #ccc;
	padding: 6px 8px 4px 8px;
	text-transform: uppercase;
}

#DynamicStylesTitle,#DynamicStylesInfoIcon,.HasAutoStyles #StylesTitle
{
	visibility: collapse;
}

.HasAutoStyles #DynamicStylesTitle,.HasAutoStyles #DynamicStylesInfoIcon
{
	visibility: visible;
}

#DynamicStylesInfoIcon
{
	wash-color: #ccc;
	margin-right: 8px;
	tooltip-position: top;
}

#StylesList
{
	margin-top: 8px;
	flow-children: down;
	overflow: squish scroll;
	max-height: 300px;
	margin-bottom: 8px;
	width: 100%;
}

RadioButton
{
	width: 284px;
}

.StyleEntry
{
	flow-children: right;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 12px;
	padding-right: 12px;
	width: 100%;
	transition-property: background-color;
	transition-duration: 0.2s;
}

.StyleEntry:hover
{
	background-color: #222;
}

.StyleEntry:active
{
	background-color: #333;
}

.StyleEntryIcon
{
	width: 18px;
	height: 18px;
	margin-right: 4px;
}

.StyleEntry.Available .StyleEntryIcon,.StyleEntry.Selected .StyleEntryIcon
{
	border-radius: 50%;
	background-color: gradient( radial, 50% 50%, 0% 0%, 10% 10%, from( #000000 ), to( #000000 ) );
	border: 2px solid #5e686966;
	box-shadow: #00000055 0px 0px 1px 3px ;
	transition-property: background-color, box-shadow, color, border;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

.StyleEntry.Selected .StyleEntryIcon
{
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #e7f6f5 ), to( #333399 ) );
	border: 3px solid #000000;
	box-shadow: #5b62bf77 0px 0px 6px 0px ;
}

.StyleEntry.Locked .StyleEntryIcon
{
	background-image: url("s2r://panorama/images/control_icons/lock_small_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
}

.StyleEntry.AutoStyle .StyleEntryIcon
{
	background-image: url("s2r://panorama/images/control_icons/icon_auto_style_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: #ccc;
}

.StyleLabels
{
	flow-children: down;
	margin-left: 6px;
}

.StyleName
{
	font-size: 16px;
	color: #ccc;
}

RadioButton:hover
{
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #282b3d00 ), to( #282b3dff ) );
}

.StyleUnlock
{
	font-size: 14px;
	color: #999999;
	visibility: collapse;
	width: 298px;
}

.Locked .StyleUnlock
{
	visibility: visible;
}

.AutoStyleReason
{
	font-size: 14px;
	color: #999999;
	visibility: collapse;
}

.StyleEntry.AutoStyle.HasReason .AutoStyleReason
{
	visibility: visible;
}

#UnlockAllStylesButton
{
	vertical-align: middle;
	margin-right: 4px;
	padding: 3px 12px 0px 12px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d4f86 ), to( #1b355e ) );
	border-top: 1px solid #ffffff22;
	border-left: 1px solid #ffffff11;
	border-right: 1px solid #00000044;
	border-bottom: 1px solid #00000088;
	visibility: collapse;
}

.MainBranch .HasLockedStyles #UnlockAllStylesButton
{
	visibility: visible;
}

#UnlockAllStylesButton:hover
{
	brightness: 2.0;
}

#UnlockAllStylesButton:active
{
	brightness: 1.5;
}

#UnlockAllStylesButton > Label
{
	color: white;
	text-transform: uppercase;
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
}