:root
{
	--cav-navy-blue:				#00263E;
	--cav-navy-blue-transp:			#00263EDD;
	--cav-blue:						#1D418A;
	--cav-electric-blue:			#5685FC;
	
	--cav-dove-blue:				#7DA1C3;
	--cav-dove-blue-75:				#9DB8D3;
	
	--cav-arctic-blue:				#98CBD0;
	--cav-arctic-blue-75:			#B5D8DC;
	--cav-arctic-blue-50:			#D0E6E8;
	--cav-arctic-blue-25:			#E8F2F4;
	
	--cav-graphite:					#3C3834;
	--cav-graphite-75:				#6E6A68;
	--cav-graphite-50:				#9E9B9A;
	--cav-graphite-25:				#CFCDCD;
	
	--cav-tangerine:				#F68D2E;
	
	--cav-off-white:				#F0F1F2;
	
	--ui-primary-colour:			black;
	--ui-secondary-colour:			var(--cav-graphite);
	--ui-nav-colour:				var(--cav-graphite);
	--ui-nav-disabled-colour:		var(--cav-graphite-50);
	--ui-nav-selected-colour:		var(--cav-electric-blue);
	--ui-nav-selected-background-colour:	var(--cav-electric-blue);
	--ui-btn-colour:				var(--cav-tangerine);
	--ui-btn-background-colour:		white;
	--ui-input-colour:				black;
	--ui-input-background-colour:	white;
	--ui-input-border-colour:		var(--cav-graphite-25);
	
	--ui-th-background-colour:		var(--cav-dove-blue-75);
	--ui-table-border-colour:		var(--cav-graphite-25);
	--ui-tr-colour-1:				transparent;
	--ui-tr-colour-2:				var(--cav-off-white);
	
	--ui-price-change-up-colour:		var(--cav-electric-blue);
	--ui-price-change-down-colour:		red;
	--ui-price-change-static-colour:	var(--cav-graphite-75);
	
	--chart-main-instrument-colour:	var(--cav-electric-blue);
	--chart-peer-colour-1:			#4287F5;
	--chart-peer-colour-2:			#42F566;
	--chart-peer-colour-3:			#D59042;
	--chart-peer-colour-4:			#F54E42;
	--volume-chart-colour:			var(--cav-electric-blue);
	--chart-back-colour-1:			var(--cav-arctic-blue-50);
	--chart-back-colour-2:			white;
	
	--chart-overlay-colour:			var(--ui-primary-colour);
	--chart-overlay-back-colour:	#FFFD;
	--chart-overlay-border-colour:	var(--cav-graphite);
	
	--chart-anno-colour:			var(--cav-electric-blue);
	--chart-anno-back-colour:		white;
	--chart-anno-hover-colour:		var(--cav-graphite-25);
	--chart-anno-border-colour:		var(--cav-graphite-25);
	
	--news-flags-colour:			var(--cav-electric-blue);
	--dividend-flags-colour:		var(--cav-electric-blue);
	--chart-label-colour:			var(--cav-graphite);
	--chart-grid-colour:			var(--cav-graphite-25);
	--chart-border-colour:			var(--cav-graphite-25);
	--zero-line-anno-colour:		var(--cav-electric-blue);
	--hilo-line-anno-colour:		var(--cav-electric-blue);
	
	color:		var(--ui-primary-colour);
}

/*************************************************
 * Cavendish font
 *************************************************/

@font-face {
  font-family: "Montserrat";
  src:	url("../../../fonts/webwidgets/Cavendish/Montserrat-Regular.ttf") format("truetype");
  font-weight: regular;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src:	url("../../../fonts/webwidgets/Cavendish/Montserrat-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src:	url("../../../fonts/webwidgets/Cavendish/Montserrat-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

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

*
{
	font-family:		"Montserrat", Arial, sans-serif;
	font-size:			13px;
}

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
{
	display:			inline-block;
	color:				var(--ui-secondary-colour);
	padding:			0 10px;
	width:				70px;
}

.search-param-wrapper > input,
.search-param-wrapper > select
{
	height:				auto;
	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);
	padding: 			9px;
}

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

input[type="submit"],
button
{
	color:				var(--ui-btn-colour);
	background-color:	var(--ui-btn-background-colour);
	border-radius:		3px;
	border:				2px solid var(--ui-btn-colour);
	cursor:				pointer;
	width:				150px;
	padding:			9px;
	transition:			0.3s background-color, 0.3s color;
}

input[type="submit"]:hover,
button:hover
{
	color:				var(--ui-btn-background-colour);
	background-color:	var(--ui-btn-colour);
}

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
{
	justify-content:	center;
	text-align:			center;
	color:				var(--ui-nav-colour);
	user-select:		none;
}

div.page-nav b
{
	display:		inline-block;
	color:			var(--ui-nav-colour);
	border:			1px solid transparent;
	cursor:			pointer;
	padding:		8px;
	width:			24px;
	border-radius:	3px;
}

div.page-nav b.page-step
{
	border:				1px solid var(--ui-nav-colour);
}

div.page-nav b.page-step.disabled
{
	border:				1px solid var(--ui-nav-disabled-colour);
	color:				var(--ui-nav-disabled-colour);
	cursor:				not-allowed;
}

div.page-nav b.active
{
	color:				var(--ui-nav-selected-colour);
	/*background-color:	var(--ui-nav-selected-background-colour);*/
	border:				1px solid var(--ui-nav-selected-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;
}

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-primary-colour);
	background-color:	var(--ui-th-background-colour);
	text-align:			left;
	padding:			10px;
	font-weight:		bold;
}

table.results-table td
{
	text-align:			left;
	border-top:		1px solid var(--ui-table-border-colour);
	/*border-right:		1px solid var(--ui-table-border-colour);*/
	
	padding:			10px;
}

table.results-table td:first-child
{
	/*border-left:		1px solid var(--ui-table-border-colour);*/
	width:				200px;
}

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

table.results-table.news td:nth-child(2) > a
{
	color:				var(--ui-nav-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:			25%;
}

.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:	#343434;
}

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

table.share-info-price-table span.latest-price-currency
{
	font-size:			30px;
	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:		bold;
	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:		bold;
}

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:				var(--ui-price-change-up-colour);
}

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:		3px;
	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:	var(--cav-electric-blue);
}

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
{
	background-color:	#231e19;
	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:				var(--ui-price-change-up-colour);
}

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

/*************************************************
 * 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-bottom:		5px solid var(--cav-graphite-25);
}

div.chart-control-area .top-control-group > .horizon-preset.selected
{
	color:				var(--ui-nav-selected-colour);
	/*background-color:	var(--ui-nav-selected-background-colour);*/
	border-bottom:		5px solid var(--ui-nav-selected-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:		3px;
	padding:			5px;
	background-color:	var(--chart-overlay-back-colour);
	font-size:			10pt;
}

div.settings-container
{
	display:			inline-block;
}

span.settings-toggle
{
	display:			flex;
	align-items:		center;
	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:			inline-block;
	color:				var(--ui-secondary-colour);
	padding:			0 10px;
	width:				30px;
}

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);
	padding: 			9px;
}

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

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

p.inv-calc-description
{
	font-style:			italic;
	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";
}