@import 'https://code.highcharts.com/css/highcharts.css';

/* light mode - default */
body {
  --green: #41A69A;
  --red: #FF6B6B;
  --bgcolor: white;
  --textcolor: #252623;
  --gray: #F6F6F6;
}
/* dark mode */
body.darkmode {
  --green: #1ea582;
  --red: #e66060;
  --bgcolor: #0D0D0D;
  --textcolor: #D9D9D9;
  --gray: #1C1C1C;
}
body {
  background: var(--bgcolor);
  font: 1em/1.65em 'Public Sans',"Times New Roman",sans-serif;
  margin: 0px;
  padding: 10px;
}
.highcharts-container  {
  background: var(--bgcolor) url('/images/omnia-highcharts-watermark?4') no-repeat center center;
  /* background: var(--bgcolor); */
}
h1 {
  font-weight: bold;
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.indicatorproperties_parameter_name, .indicatorproperties_style_name {
  float: left;
  width: 150px;
  /* position: relative;
  top: 3px;
  left: 6px; */
}

.indicatorproperties_parameter_value, .indicatorproperties_style_value {
  float: left;
  width: 150px;
}

.indicatorproperties_parameter_value input, .indicatorproperties_style_value input {
  height: 30px;
}

#symbolselector_search, #indicatorselector_search {
  padding: 20px;
  margin-top: -6px;
  border: 0;
  border-radius: 0;
  background: #f1f1f1;
}
a.nav-link {
  color: hsla(84,54%,51%,1);
}
.btn.btn-primary {
  background-color: hsla(84,54%,51%,1) !important;
  border-color: hsla(84,54%,51%,1) !important;
}
.btn.btn-primary:hover {
  background-color: hsla(84,54%,45%,1) !important;;
  border-color: hsla(84,54%,45%,1) !important;;
}
.btn.btn-primary:active {
  background-color: hsla(84,54%,35%,1) !important;
  border-color: hsla(84,54%,35%,1) !important;
}
.btn.btn-secondary {
  background-color: transparent;
  border-color: hsla(84,54%,51%,1);
  color: hsla(84,54%,51%,1);
}
.btn.btn-secondary:hover {
  background-color: transparent;
  border-color: hsla(84,54%,45%,1);
}
.btn.btn-secondary:active:focus {
  background-color: transparent;
  border-color: hsla(84,54%,35%,1);
}

.scroll-menu{
  min-width: 220px;
  max-height: 80vh;
  overflow: auto;
}
.highcharts-label-box {
  fill: var(--bgcolor);
}
#price_container {
  font-weight: bold;
  text-align: right;
  color: var(--textcolor);
}

#priceAt_container {
  position: relative;
  top: -12px;
  font-size: 9px;
  color: var(--textcolor);
}

#priceLocation_container {
  position: relative;
  top: -29px;
  right: 1px;
  font-size: 9px;
  text-align: right;
  color: var(--textcolor);
}
#chart_indicatorstack .badge-pill {
  border-radius: 2px;
}
#chart_indicatorstack .badge-light {
  background-color: white;
  padding: .25em .6em;
}
#chart_indicatorstack .badge-danger {
  margin-right: 10px;
  margin-left: -5px;
}
.highcharts-navigator-mask-inside {
  fill: var(--green);
}
.highcharts-button {
  fill: none;
  stroke: var(--gray);
}
.highcharts-button-pressed {
  stroke: var(--textcolor);
}
.highcharts-button text {
  fill: var(--textcolor);
}
.highcharts-button-pressed text {
  fill: var(--textcolor) !important;
}
.highcharts-range-selector-buttons .highcharts-button {
  stroke-width: 1px;
}
.highcharts-grid-line {
  fill: none;
  stroke: var(--gray);
}
.highcharts-column-series rect.highcharts-point {
  stroke: none;
}
.highcharts-candlestick-series .highcharts-point-up {
  fill: var(--green);
  stroke: var(--green);
}
.highcharts-candlestick-series .highcharts-point-down {
  fill: var(--red);
  stroke: var(--red);
}
#chart-container {
  border: 1px solid var(--gray);
  margin-top: 1em;
}

/* New */
 
.highcharts-color-0 {
  fill: var(--red);
  stroke: var(--red);
}
 
/* Titles */
.highcharts-title {
  fill: var(--bgcolor);
  font-size: 26px;
  font-weight: bold;
}

.highcharts-background {
  fill: none;
}
.highcharts-title, .highcharts-subtitle, .highcharts-caption, .highcharts-label text, .highcharts-legend-item, .highcharts-legend-title {
  font-family: "Roboto";
  /* fill: var(--textcolor) !important; */
}
.highcharts-color-0, .highcharts-color-2 {
  fill: var(--green);
  stroke: var(--green);
}
.highcharts-color-1, .highcharts-color-3 {
  fill: var(--red);
  stroke: var(--red);
}
.highcharts-negative {
  fill: var(--red);
  stroke: var(--red);
}
.highcharts-tooltip-box .highcharts-label-box {
  fill: none;
  fill-opacity: 0.7;
}
.highcharts-tooltip-box .highcharts-label-box {
  stroke: none;
}
.highcharts-tooltip-box text tspan {
  /* fill: var(--textcolor) !important; */
}
.highcharts-tooltip-box text {
  fill: var(--textcolor) !important;
  /*text-shadow: 0 0 3px black;*/
}