:root {
    --main-font-family: sans-serif;
  }
  
  .theme-light {
    --underpx-color: #A0B700;
    --probsel-color: #5C8100;
    --crosshair-color:gray;
    --background-color1: #EFECEA;
    --background-color2: #F5F3F2;
    --background-color3: #E5E2E0;
    --inside-toolbar-color: #EFECEA;
    --text-main: #635F5D;
    --text-light: #8E8883;
    --tick-line-color:  #C0C0BB;
    --tick-line-opacity:  0.3;
    --sep-color: #F5F3F2;
    /* --mix-blend-mode: multiply; */
    --mix-blend-mode: normal;
    --underpx-label-opacity: 0.8;
    --sigma-shadow-color: #cecbca;
  }
  
  .theme-dark {
    --underpx-color: #A0B700;
    --probsel-color: #5C8100;
    --crosshair-color:gray;
    --background-color1: #151721;
    --background-color2: #1E212F;
    --background-color3: #151721;
    --inside-toolbar-color: #151721;
    --text-main: #635F5D;
    --text-light: #8E8883;
    --tick-line-color:  #C0C0BB;
    --tick-line-opacity:  0.1;
    --sep-color:  rgb(100, 100, 98);
    --mix-blend-mode: screen;
    --underpx-label-opacity: 0.3;
    --sigma-shadow-color: #635F5D;
  }
  
    /*  Chart Styles */
    body {
      margin: 0px;
      overflow: hidden;
    }
  
  
    text {
      font-family: sans-serif;
      font-style: normal;
      font-weight: 400;
    }
    
    
    .svg-container {
      display: inline-block;
      position: relative;
      width: 100%;
      height: 100%;
      vertical-align: top;
      overflow: hidden;
      border: groove;
      border-color: var(--background-color2);
      background-color: var(--background-color1);
    }
    .svg-content-responsive {
      display: inline-block;
      position: absolute;
      /* top: 40px; */
      left: 0;
      width: 100%;
      height: 100%; 
    }
    .chart-div{
      display: none;
      width: 25%;
      height: 50vh;  
    }
  
   
    #leg-line {
      fill: none;
      stroke-dasharray: 3;
      stroke-width: 1;
      stroke-linejoin: round;
      stroke-linecap: round;
      mix-blend-mode: var(--mix-blend-mode);
    }
    
    #strategy-exp-line {
      fill: none;
      stroke: #E25A42;
      stroke-width: 3.5;
      stroke-linejoin: round;
      stroke-linecap: round;
      mix-blend-mode: var(--mix-blend-mode);
    }
  
    #strategy-cur-line {
      fill: none;
      stroke: #F2DA57;
      stroke-width: 2.5;
      stroke-linejoin: round;
      stroke-linecap: round;
      mix-blend-mode: var(--mix-blend-mode);
    }
  
    #strategy-teo-line {
      fill: none;
      stroke-dasharray: 0;
      stroke: #688BAB;
      stroke-width: 2;
      stroke-linejoin: round;
      stroke-linecap: round;
      mix-blend-mode: var(--mix-blend-mode);
    }  
  
    #strategy-sim-line {
      fill: none;
      stroke-dasharray: 3;
      stroke: #F2DA57;
      stroke-width: 4;
      stroke-linejoin: round;
      stroke-linecap: round;
      mix-blend-mode: var(--mix-blend-mode);
    }    
    
  
    .tick text {
      font-size: 1.0em;
      fill: var(--text-main);
    }
    
    .tick line {
      stroke: var(--tick-line-color);
      opacity: var(--tick-line-opacity);
    }
    
    .axis-label {
      font-size: 1.0em;
      fill: #8E8883;
    }
    
    .title {
      font-size: 2.7em;
      fill: var(--text-main);
    }
    
    .cross-hair-line {
      stroke-dasharray: 5;
      stroke: var(--crosshair-color);
      stroke-width: 2;
      opacity: 0.5;
    }
    .cross-h-hair-line {
      stroke-dasharray: 5;
      stroke: var(--crosshair-color);
      stroke-width: 2;
    }
  
    .chart-label{
      font-size: 0.7rem;
      fill: var(--crosshair-color);
    }
    
    .prob-sel-line {
      stroke-dasharray: 7;
      stroke: var(--probsel-color);
      stroke-width: 2;
      stroke-opacity: 0.5;
    }
  
    .underpx-line {
      stroke: var(--underpx-color);
      stroke-width: 1;
      stroke-opacity: var(--underpx-label-opacity);
    }
  
    .zero-line {
      stroke: rgb(65, 65, 63);
      stroke-width: 1;
      stroke-opacity: 1.0;
    }
  
    .prob-sel-rect {
      fill: yellow;
      opacity: 0.01;
      stroke: none;
    }
  
    .prob-profit-label {
      font-size: 0.7rem;
      fill:var(--text-main);
      fill: var(--probsel-color);
    }
  
    .prob-px-label {
      font-size: 0.6rem;
      fill: var(--probsel-color);   
    }
  
    .chart-label-lime {
      font-size: 0.7rem;
      fill: var(--underpx-color);
      opacity: 1.0; 
    }
    .sigma-shadow {
      fill: var(--sigma-shadow-color);
      opacity: 0.2;
      stroke: black;
      stroke-opacity: 0.1;
    }
  
  
    .chart-toolbar{
      fill: var(--inside-toolbar-color);
    }
  
  /************** Legend Box **********************/
  #legend-box {
    fill:var(--background-color1);
    opacity: 0.6;
    stroke: none;
  }  
  
  .legend-label{
    fill: var(--text-main);
    font-size: 10px;
    font-weight: bold;
  }
  
  
  /************** Control Panel **********************/
  * {box-sizing: border-box;}
  
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button {  
    opacity: 1;
  }
  
  
  .navbar {
    overflow: hidden;
    background-color: var(--background-color1);
  }
  
  
  .subnav {
    float: left;
    overflow: visible;
  }
  
  .subnav .subnavbtn {
    font-size: 0.8rem;  
    border: none;
    outline: none;
    color: var(--text-main);
    padding: 14px 16px;
    background-color: inherit;
    font-family: var(--main-font-family);
    margin: 0;
    cursor: pointer;
  }
  
  /*.navbar a:hover, .subnav:hover .subnavbtn {
    background-color: var(--menu-btn-hover-color);
  }*/
  
  .subnav-content {
    display: none;
    position: absolute;
    border: none;
    background-color: var(--background-color2);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: var(--text-main);
    font-size: 0.8rem;
    font-family: var(--main-font-family);
  }
  
  /*.subnav:hover .subnav-content {
    display: block;
  }*/
  
  
  .form-inline {  
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  
  .form-inline label {
    margin: 5px 10px 5px 0;
    color: var(--text-main);
  }
  
  
  .form-inline input {
    vertical-align: middle;
    margin: 5px 10px 5px 0;
  
    background-color: #fff;
    border: 1px solid #ddd;
  
  }
  
  
  @media (max-width: 800px) {
    .form-inline input {
      margin: 10px 0;
    }
    
    .form-inline {
      flex-direction: column;
      align-items: stretch;
    }
  }
  
  
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }