:root
{
	--ui-primary-colour:			black;
	--ui-secondary-colour:			#231e19;
	--ui-nav-colour:				#4D0067;
	--ui-link-colour:				#D755D7;
	--ui-nav-disabled-colour:		gray;
	--ui-nav-selected-colour:		#231E19;
	--ui-nav-selected-background-colour:	#D755D7;
	--ui-btn-colour:				#231E19;
	--ui-btn-background-colour:		#D755D7;
	--ui-input-colour:				black;
	--ui-input-background-colour:	white;
	--ui-input-border-colour:		#231e19;
	
	--ui-th-colour:					#d755d7;
	--ui-th-background-colour:		#231E19;
	--ui-table-border-colour:		black;
	--ui-tr-colour-1:				#231E19;
	--ui-tr-colour-2:				#231E19;
	
	--ui-price-change-up-colour:		green;
	--ui-price-change-down-colour:		red;
	--ui-price-change-static-colour:	green;
	
	--chart-main-instrument-colour:	#4D0067;
	--chart-peer-colour-1:			#4287F5;
	--chart-peer-colour-2:			#42F566;
	--chart-peer-colour-3:			#D59042;
	--chart-peer-colour-4:			#F54E42;
	--volume-chart-colour:			#2D2823;
	/*--chart-back-colour-1:		#44FFFF;*/
	/*--chart-back-colour-2:		#0F7EC2;*/
	
	--chart-overlay-colour:			var(--ui-primary-colour);
	--chart-overlay-back-colour:	#FFFD;
	--chart-overlay-border-colour:	black;
	
	--chart-anno-colour:			#4D0067;
	--chart-anno-back-colour:		whitesmoke;
	--chart-anno-hover-colour:		white;
	--chart-anno-border-colour:		#AAA;
	
	--news-flags-colour:			#4D0067;
	--dividend-flags-colour:		#000000;
	--chart-label-colour:			#555;
	--chart-grid-colour:			#DDD;
	--chart-border-colour:			#BBB;
	--zero-line-anno-colour:		#555;
	--hilo-line-anno-colour:		#AAA;
	
	color:		var(--ui-primary-colour);
}

/*************************************************
 * SThree font
 *************************************************/

@font-face {
  font-family: "CircularXX";
  src:	url("../../../fonts/webwidgets/SThree/CircularXX-Regular.woff2") format("woff2"),
		url("../../../fonts/webwidgets/SThree/CircularXX-Regular.woff") format("woff");
  font-weight: regular;
  font-style: normal;
}

@font-face {
  font-family: "CircularXX";
  src:	url("../../../fonts/webwidgets/SThree/CircularXX-Bold.woff2") format("woff2"),
		url("../../../fonts/webwidgets/SThree/CircularXX-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

/*************************************************
 * General
 *************************************************/

*
{
	font-family:		"CircularXX", Arial, sans-serif;
	font-size:			14px;
}

body
{
	padding:			10px;
}

a
{
	text-decoration:	none;
}

form#search-form
{
	/*margin-bottom:		10px;*/
}

.layout-row
{
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	margin-bottom:		10px;
}

.search-params-container
{

}

.search-params-group
{
	display:			inline-block;
	vertical-align:		top;
}

.search-param-wrapper
{
	padding:			5px;
}

.search-param-wrapper > label
{
	color:				var(--ui-secondary-colour);
	padding:			0 10px;
}

.search-param-wrapper.inline > label
{
	display:			inline-block;
	width:				70px;
}

.search-param-wrapper.block > label
{
	display:			block;
	padding:			5px 10px;
}

.search-param-wrapper > input,
.search-param-wrapper > select
{
	height:				40px;
	width:				200px;
	color:				var(--ui-input-colour);
	background-color:	var(--ui-input-background-colour);
	box-sizing:			border-box;
	border: 			1px solid var(--ui-input-border-colour);
	border-radius:		20px;
	padding: 			9px;
}

input[type="date"]
{
	font-family:		inherit;
}

input[type="submit"],
button
{
	color:				var(--ui-btn-colour);
	background-color:	var(--ui-btn-background-colour);
	border-radius:		30px;
	border-style:		none;
	cursor:				pointer;
	width:				150px;
	padding:			9px;
}

button.export-button
{
	color:				#231e19;
	border:				1px solid #231e19;
	background-color:	transparent;
	padding:			7px;
}

div.no-results
{
	font-weight:		bold;
	font-size:			16px;
	padding:			50px;
	text-align:			center;
	border:				1px solid #231e19;
}

div.result-info
{
	padding:			5px;
	text-align:			right;
}

div.page-nav
{
	color:			var(--ui-nav-colour);
	text-align:		center;
	user-select:	none;
}

div.page-nav-wrapper
{
	display:	inline-block;
	padding:	5px 20px;
	border:		1px solid #231e19;
	border-radius:	20px;
}

div.page-nav span
{
	display:		inline-block;
	color:			var(--ui-nav-colour);
	cursor:			pointer;
	padding:		8px;
	width:			24px;
}

div.page-nav span.page-step
{
	width:				auto;
}

div.page-nav span.page-step.prev
{
	margin-right:		20px;
}

div.page-nav span.page-step.next
{
	margin-left:		20px;
}

div.page-nav span.page-step.disabled
{
	color:				var(--ui-nav-disabled-colour);
	cursor:				not-allowed;
}

div.page-nav span.active
{
	color:				var(--ui-nav-selected-colour);
	border-radius:		15px;
	background-color:	var(--ui-nav-selected-background-colour);
	cursor:				default;
}

div.copyright-notice
{
	font-size:			12px;
	color:				gray;
	text-align:			right;
	padding-top:		2px;
}
div.copyright-notice img
{
	position: relative;
	top: 5px;
}

/*************************************************
 * Generic table
 *************************************************/

table.results-table
{
	width:				100%;
	border-spacing:		0;
}

div.results-table-wrapper
{
	border-radius:		13px;
	overflow:			hidden;
}

div.results-table-scroll-wrapper
{
	max-height:			500px;
	overflow-y:			auto;
	scrollbar-color:	#231E19 #555;
}

table.results-table tr:nth-child(even)
{
	background-color:	var(--ui-tr-colour-1);
}

table.results-table tr:nth-child(odd)
{
	background-color:	var(--ui-tr-colour-2);
}

table.results-table th
{
	color:				var(--ui-th-colour);
	background-color:	var(--ui-th-background-colour);
	text-align:			left;
	padding:			20px;
	font-weight:		bold;
}

table.results-table td
{
	color:				#fff;
	text-align:			left;
	padding:			20px;
	font-weight:		600;
}

table.results-table td:first-child
{
	width:				200px;
}

/*************************************************
 * News table
 *************************************************/

table.results-table.news td:nth-child(2) > a
{
	color:				var(--ui-link-colour);
	font-weight:		bold;
	cursor:				pointer;
}

table.results-table.news td:nth-child(2) > a:hover
{
	text-decoration:	underline;
}

table.results-table.news td:nth-child(3)
{
	font-style:		italic;
	width:			300px;
}

/*************************************************
 * Historical Prices table
 *************************************************/

table.results-table.prices th
{
	position:			sticky;
	top:				0px;
}

table.results-table.prices td:nth-child(1)
{
	font-weight:	bold;
	width:			15%;
}

table.results-table.prices td:nth-child(6)
{
	width:			15%;
}

.download-control
{
	display:			inline-flex;
	align-items:		center;
	color:				var(--ui-nav-colour);
	height:				20px;
	padding:			4px 0;
	cursor:				pointer;
}

.download-control:hover
{
	text-decoration:	underline;
}

/*************************************************
 * Share information - price line
 *************************************************/

body.share-info.mini
{
	padding:			0px;
	background-color:	#231e19;
}

table.share-info-price-table.mini td
{
	padding-bottom:		10px;
}

table.share-info-price-table span.latest-price-currency
{
	font-size:			35px;
	color:				var(--ui-secondary-colour);
}
table.share-info-price-table.mini span.latest-price-currency
{
	color:				#d1d1d1;
}

table.share-info-price-table span.latest-price
{
	font-size:			30px;
	font-weight:		normal;
	padding-right:		15px;
	color:				var(--ui-primary-colour);
}

table.share-info-price-table.mini span.latest-price
{
	padding-right:		0px;
	color:				white;
	font-size:			35px;
}

table.share-info-price-table span.price-change
{
	color:				var(--ui-price-change-static-colour);
	font-size:			24px;
	padding-right:		15px;
}

table.share-info-price-table.mini span.price-change
{
	padding-right:		0px;
	font-weight:		normal;
}

table.share-info-price-table span.price-change.up
{
	color:				var(--ui-price-change-up-colour);
}

table.share-info-price-table.mini span.price-change.up
{
	color:				#44DF44;
}

table.share-info-price-table span.price-change.down
{
	color:				var(--ui-price-change-down-colour);
}

table.share-info-price-table.mini span.price-change.down
{
	color:				#FF6F6F;
}

table.share-info-price-table span.exchange
{
	font-size:			12px;
	color:				var(--ui-secondary-colour);
	padding-right:		8px;
}

table.share-info-price-table.mini span.exchange
{
	padding-right:		0px;
}

table.share-info-price-table span.market-status
{
	color:				white;
	padding:			3px;
	padding-left:		8px;
	padding-right:		8px;
	border-radius:		10px;
	font-size:			12px;
}

table.share-info-price-table.mini span.market-status
{
	padding-left:		0px;
	padding-right:		0px;
}

table.share-info-price-table span.last-update
{
	padding-left:		8px;
	font-size:			12px;
	color:				var(--ui-secondary-colour);
}

table.share-info-price-table.mini span.last-update
{
	padding-left:		0px;
	color: #d1d1d1;
}

table.share-info-price-table span.market-status.open
{
	background-color:	green;
}

table.share-info-price-table span.market-status.closed
{
	background-color:	grey;
}

/*************************************************
 * Share information - main chunk
 *************************************************/

table.share-info-main-table
{
	width:				100%;
	padding:			5px;
	border:				1px solid #dddad6;
}

table.share-info-main-table td
{
	font-size:			14px;
	width:				25%;
}

table.share-info-main-table td:nth-child(odd)
{
	font-weight:		bold;
}

/*************************************************
 * Performance table
 *************************************************/

table.performance-table tr.name td
{
	background-color:	#504641;
	font-weight:		bold;
	color:				white;
}

table.performance-table td
{
	/*padding: 5px;*/
}

table.performance-table tr:not(:last-child) td
{
	border-bottom:		0px;
}

table.performance-table tr.info td:first-child
{
	font-style:			italic;
	padding-left:		40px;
}

table.performance-table td:nth-child(1)
{
	width:				25%;
}

table.performance-table td:nth-child(n+2)
{
	width:				15%;
}

table.performance-table span.price-change
{
	color:				var(--ui-price-change-static-colour);
}

table.performance-table span.price-change.up
{
	color:				#44DF44;
}

table.performance-table span.price-change.down
{
	color:				#FF6F6F;
}

/*************************************************
 * Chart
 *************************************************/

ul.legend
{
	display:			flex;
	flex-direction:		row;
	margin:				0;
	user-select:		none;
}

ul.legend > li
{
	display:			flex;
	align-items:		center;
	font-size:			14px;
	margin:				0 3px;
}

ul.legend span
{
	cursor:				default;
}

ul.legend > li span.indicator
{
	height:				2px;
	width:				20px;
	flex-shrink:		0;
	margin:				0 3px;
}

ul.legend > li span.label
{
	font-size:			inherit;
}

ul.legend > li span.price-change
{
	color:				var(--ui-price-change-static-colour);
	font-size:			inherit;
	margin:				0 5px;
}

ul.legend > li span.price-change.up
{
	color:				var(--ui-price-change-up-colour);
}

ul.legend > li span.price-change.down
{
	color:				var(--ui-price-change-down-colour);
}

ul.legend > li.data-type
{
	color:				var(--ui-secondary-colour);
	font-style:			italic;
}

div.canvas-container
{
	position:			relative;
}

div.canvas-container.no-data canvas
{
	visibility:			hidden;
}

div.canvas-container.price.no-data::after
{
	display:			flex;
	align-items:		center;
	justify-content:	center;
	position:			absolute;
	top:				0;
	left:				0;
	height:				100%;
	width:				100%;
	font-size:			30px;
	color:				#777;
	content:			'No data';
}

div.chart-control-area
{
	display:		flex;
	margin:			0 20px;
	font-size:		18px;
	font-weight:	bold;
	color:			var(--ui-nav-colour);
	user-select:	none;
}

div.chart-control-area > div
{
	flex:			1;
	margin:			5px;
}

div.chart-control-area .top-control-group
{
	
}

div.chart-control-area .top-control-group > .horizon-preset
{
	padding:			10px;
	cursor:				pointer;
	text-align:			center;
	border-radius:		20px;
}

div.chart-control-area .top-control-group > .horizon-preset.selected
{
	color:				var(--ui-nav-selected-colour);
	background-color:	var(--ui-nav-selected-background-colour);
}

div.chart-control-area .top-control-group > .price-change
{
	font-weight:	normal;
	text-align:		center;
	padding:		5px;
	margin:			5px 15px;
	color:			var(--ui-price-change-static-colour);
	border-top:		1px solid var(--ui-nav-colour);
}

div.chart-control-area .top-control-group > .price-change.up
{
	color:			var(--ui-price-change-up-colour);
}

div.chart-control-area .top-control-group > .price-change.down
{
	color:			var(--ui-price-change-down-colour);
}

.annotation-info
{
	display:			none;
	pointer-events:		none;
	position:			absolute;
	top:				40px;
	left:				50px;
	width:				200px;
	color:				var(--chart-overlay-colour);
	border:				1px solid var(--chart-overlay-border-colour);
	border-radius:		8px;
	padding:			5px;
	background-color:	var(--chart-overlay-back-colour);
	font-size:			10pt;
}

div.settings-container
{
	align-self:			flex-start;
}

span.settings-toggle
{
	display:			flex;
	align-items:		center;
	font-weight:		bold;
	cursor:				pointer;
	padding:			10px;
}

div.settings-container span.settings-toggle::after
{
	content:		'\25bc';
	font-size:		10px;
	margin-left:	8px;
}

div.settings-container.visible span.settings-toggle::after
{
	content:	'\25b2';
}

div.settings-area
{
	position:			absolute;
	user-select:		none;
	background-color:	var(--ui-input-background-colour);
	padding:			4px 12px;
	display:			none;
	border:				1px solid var(--ui-input-border-colour);
	font-weight:		normal;
	text-align:			left;
	margin-top:			10px;
	cursor:				initial;
	z-index:			1;
}

div.settings-container.visible div.settings-area
{
	display:			block;
}

div.settings-area > div.settings-section
{
	display:			inline-block;
	vertical-align:		top;
	padding:			2px 15px;
}

div.settings-area > div.settings-section > div.settings-sub-section
{
	display:			block;
	margin-top:			4px;
}

div.settings-area > div.settings-section label,
.clickable-row
{
	display:			flex;
	align-items:		center;
	height:				20px;
	padding:			4px 0;
	cursor:				pointer;
}

div.settings-area > div.settings-section .control-sub-group
{
	margin-left:		20px;
}

div.settings-area > div.settings-section input[type="checkbox"]
{
	margin-right:		10px;
}

div.settings-area > div.settings-section input[type="radio"]
{
	margin:				0 10px 0 0;
}

.clickable-row.disabled
{
	color:				var(--ui-nav-disabled-colour);
	cursor:				not-allowed;
}

.clickable-row:not(.disabled):hover
{
	text-decoration:	underline;
}

div.control-sub-group.disabled label,
div.settings-area label.disabled
{
	color:				var(--ui-nav-disabled-colour) !important;
}

div.control-sub-group.disabled label,
div.settings-area label.disabled,
input[type="checkbox"][disabled]
{
	cursor:				not-allowed !important;
}

span.settings-heading
{
	display:			block;
	font-size:			16px;
	margin-bottom:		5px;
	color:				var(--ui-primary-colour);
}

div.price-chart-date-picker
{
	display:			inline-block;
	padding:			10px 5px;	
}

div.price-chart-date-picker > label
{
	display:			block;
	color:				var(--ui-secondary-colour);
	padding:			5px 10px;
}

div.price-chart-date-picker > input
{
	font-family:		inherit;
	width:				150px;
	color:				var(--ui-input-colour);
	background-color:	var(--ui-input-background-colour);
	box-sizing:			border-box;
	border: 			1px solid var(--ui-input-border-colour);
	border-radius:		20px;
	padding: 			9px;
}

/********************************
 * Investment Return Calculator	*
 ********************************/

p.error-notification
{
	font-size:			14px;
	font-style:			italic;
	color:				red;
	margin:				10px;
}

p.inv-calc-description
{
	margin:				5px 0;
}

.inv-calc-fields
{
	flex-shrink:		0;
	margin-right:		50px;
}

.inv-calc-fields .search-param-wrapper > label
{
	width:				180px;
}

.inv-calc-result-table-container
{
	flex:				1 0 250px;
	color:				var(--ui-secondary-colour);
}

.inv-calc-result-table-container table
{
	border-collapse:	collapse;
	height:				100%;
}

.inv-calc-result-table-container table tr
{
	
}

.inv-calc-result-table-container table td
{
	padding:			14px;
}

.inv-calc-result-table-container table tr:not(:last-child) td
{
	border-bottom:		1px solid #ddd;
}

.inv-calc-result-table-container table td.result-field-desc
{
	font-weight:		bold;
}

/******************************************************************
 * Patch in a tiny bit of bootstrap 3 for cogwheel
 * (references main engine fonts)
 ******************************************************************/

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../../../fonts/glyphicons-halflings-regular.eot');
  src: url('../../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-cog:before {
  content: "\e019";
}

.glyphicon-export:before {
    content: "\e170";
}

.glyphicon-cloud-download:before {
    content: "\e197";
}