/* Table of Contents

1. Tab and Page Settings
2. Sliders and Dropdowns
3. Datatable

*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* 1. Tab and Page Settings*/
/*------------------------------------------------------------------------------------------------------------------------------*/


/* Make background grey*/
body {
background-color: #F2F2F2 !important;
}

/* Add a margin to the sides of the page within the tabs*/
.tab-content {
    margin-left: 20px;
}

/* Set tab underline color to orange*/
.nav-tabs {
	--bs-nav-tabs-border-color: #F7931D !important;
}

/* Changes the line that indicates which tab is selected to orange*/
div.tab--selected {
	border-bottom: none;
	/*border-top: 3px solid #F7931D !important;*/
	border-top: none !important;
}

/* Set default color of tabs to black*/
.nav-link {
	color: #000000 !important;
}

/* Changes selected tab to highlight tab text and border in orange*/
.nav-link.active {
    background-color: #f2f2f2 !important;
    border-color: #F7931D #F7931D #f2f2f2 !important;
    color: #000000 !important;
	box-shadow: 2px -2px 5px #F7931D;
}

/* Set an h1 (top heading) style*/
.heading-style, h1 {
	font-size: 5rem;
    text-align: center;
	margin-top: .5rem;
    margin-bottom:  20px;
}

/* Set an h2 (sub-heading) style*/
.heading-style, h2 {
	font-size: 3.25rem;
    text-align: center;
	margin-top: .5rem !important;
    margin-bottom:  20px;
}

/* Adjust the vertical spacing around the headings*/
.heading-style, h3, h4, h5, h6 {
    margin: .5rem 0 0.05rem !important;
}

/*Changing the font to Raleway custom Google font*/
@font-face {
  font-family: 'Raleway' !important;
  font-style: normal;
  src: url("Raleway-VariableFont_wght.ttf") format('truetype');
}
/*  src: url(https://fonts.gstatic.com/s/raleway/v26/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format('woff2');
*/
/*For all things in the body*/
*, html, body {
font-family: “Raleway”, sans-serif !important;
}
/*For all headings*/
.heading-style, h1, h2, h3, h4, h5, h6 {
font-family: “Raleway”, sans-serif !important;
}
/*For all plots*/
.js-plotly-plot .plotly, .js-plotly-plot .plotly div {
font-family: “Raleway”, sans-serif !important;
}

/*------------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------------------*/
/* 2. Sliders and Dropdowns*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/* Changes the default slider tracks to black */
div.rc-slider-track {
  background-color: #333333 !important;
  outline-color: black;
  outline-width: thin;
  outline-style: solid;
}

/* Region specific colors for AMU tab */
/* Changes slider track for Africa to green and adjust font size of label*/
#am-usage-slider-africa div.rc-slider-track {
  background-color: rgb(135,197,95) !important;
}
#am-usage-slider-africa div.value {
  font-size: 15px;
}
#am-price-slider-africa div.rc-slider-track {
  background-color: rgb(135,197,95) !important;
}
#am-price-slider-africa div.value {
  font-size: 15px;
}

/* Changes slider track for Americas to pastel brick red and adjust font size of label */
#am-usage-slider-americas div.rc-slider-track {
  background-color: rgb(248,156,116) !important;
}
#am-usage-slider-americas div.value {
  font-size: 15px;
}
#am-price-slider-americas div.rc-slider-track {
  background-color: rgb(248,156,116) !important;
}
#am-price-slider-americas div.value {
  font-size: 15px;
}

/* Changes slider track for Asia, Far East and Oceania to pastel blue and adjust font size of label */
#am-usage-slider-asia div.rc-slider-track {
  background-color: rgb(102,197,204) !important;
}
#am-usage-slider-asia div.value {
  font-size: 15px;
}
#am-price-slider-asia div.rc-slider-track {
  background-color: rgb(102,197,204) !important;
}
#am-price-slider-asia div.value {
  font-size: 15px;
}

/* Changes slider track for Europe to pastel purple and adjust font size of label*/
#am-usage-slider-europe div.rc-slider-track {
  background-color: rgb(220,176,242) !important;
}
#am-usage-slider-europe div.value {
  font-size: 15px;
}
#am-price-slider-europe div.rc-slider-track {
  background-color: rgb(220,176,242) !important;
}
#am-price-slider-europe div.value {
  font-size: 15px;
}

/* Changes slider track for Middle East to pastel magenta and adjust font size of label*/
#am-usage-slider-mideast div.rc-slider-track {
  background-color: rgb(254,136,177) !important;
}
#am-usage-slider-mideast div.value {
  font-size: 15px;
}
#am-price-slider-mideast div.rc-slider-track {
  background-color: rgb(254,136,177) !important;
}
#am-price-slider-mideast div.value {
  font-size: 15px;
}

/* Changes the box that displays the slider value to have an grey outline*/
div.rc-slider-handle {
	background-color: none;
	border-color: #333333;
	color: black;
}

/* Change the slider handle to grey*/
svg.cEBNup path {
    stroke: #333333 !important;
}

/* Change highlight color for selection to grey*/
.VirtualizedSelectFocusedOption {
    background-color: #F2F2F2;
}

/* Change border color and background color of reset to default button*/
button{
	border-color: #7A7A7A !important;
	background-color: #7A7A7A !important;
	color: #ffffff !important;
}

/*------------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------------------*/
/* 3. Datatable*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/* Change data table selected feature colors (trash/sort) to grey*/
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    --accent: #333333 !important;
}

/* Change selected cell color to grey in data table*/
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
	border-color: #F2F2F2 !important;
    background-color: #F2F2F2 !important;
}

/* Make the text in the tooltip bold and italics*/
.dash-tooltip .dash-table-tooltip{
	font-style: italic; 
	font-weight: bold;
}

/* Currently does not work, trying to move the tooltip above the column header*/
.dash-tooltip.style{
	top: 100 !important;
}

/* Remove the arrow that displays at the top of the tooltip*/
.dash-tooltip[data-attr-anchor='top']:before{
	border-bottom-color: transparent !important;
}
.dash-tooltip[data-attr-anchor='top']:after{
	border-bottom-color: transparent !important;
}

/*------------------------------------------------------------------------------------------------------------------------------*/


/*

Using for comments

Add '!important' to any section that needs to override the default.

Use # to reference a specific id.

*/