:root {
  --main-font-family: sans-serif;
  --panel-menu-font-size: 0.8rem;
}

.vs-theme-light {
  --background-color1: #EFECEA;
  --background-color2: #F5F3F2;
  --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;
  --circle-stroke: #635F5D;
}

.vs-theme-dark {
  --background-color1: #151721;
  --background-color2: #1E212F;
  --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;
  --circle-stroke: #635F5D;
}

  /*  Chart Styles */
  body {
    margin: 0px;
    overflow: hidden;
  }


  text {
    font-family: sans-serif;
    font-style: normal;
    font-weight: 400;
  }  


  .vs-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);
  }
  .vs-svg-content-responsive {
    display: inline-block;
    position: absolute;
    /* top: 40px; */
    left: 0;
    width: 100%;
    height: 100%; 
  }
  
  .vs-chart-div{
    display: none;
    width: 25%;
    height: 50vh;  
  }

     
  .vs-loading-text {
    font-size: 0.6em;
    font-style: normal;
    fill: var(--text-main);
  }  

  .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;
  }

  /* rect around axis ticks */
  .domain{
    stroke: var(--tick-line-color);
    opacity: var(--tick-line-opacity);
  }
  
  .title {
    font-size: 2.7em;
    fill: var(--text-main);
  }

  
  .vs-chart-toolbar{
    fill: var(--inside-toolbar-color);
  }

  
  .vs-line-path {
    fill: none;
    stroke-dasharray: 3;
    stroke-width: 0.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    mix-blend-mode: var(--mix-blend-mode);
  }

  .under-vs-line-path {
    /* fill: none;  */
    stroke-width: 0.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    mix-blend-mode: var(--mix-blend-mode);
  }

  .vs-vol-line {
    stroke-dasharray: 0;
  }
  
  
  .axis path,
  .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
  }

  .vs-tooltip-text{    
    font-size: 10px;
  }

/************** Legend Box **********************/


.vs-legend-label{
  fill: var(--text-main);
  font-size: 10px;
}


/************** Control Panel **********************/
* {box-sizing: border-box;}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
  opacity: 1;
}

.vs-panel-container {
  background-color: var(--background-color1);
}

.vs-panel-title {
  color: var(--text-main);
  background-color: var(--background-color2);
  font-size: 0.8rem;
  font-weight: bold;  
  font-family: var(--main-font-family);
  
  /* text-align: center; */
}

.vs-panel-symbol {
  vertical-align: middle;
  /* margin: 10px 0; */
  background-color: var(--background-color2);
  /* background-color: var(--inside-toolbar-color); */
  border: 0.2px solid var(--tick-line-color) ;
  width: 50px;

  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: bold;  
  font-family: var(--main-font-family);
  /* text-align: center; */
}

.vs-panel-svg {
  width: 30px;
  height: 18px;
}

.vs-navbar {
  overflow: hidden;
  background-color: var(--background-color1);
}

.vs-navbar-v {
  float: left;
  background-color: var(--background-color2);
}

.vs-subnav {
  float: left;
  overflow: visible;
}

.vs-subnav .vs-subnavbtn {
  font-size: var(--panel-menu-font-size);  
  border: none;
  outline: none;
  color: var(--text-main);
  /*padding: 14px 16px;*/
  padding: 5px 10px;
  background-color: inherit;
  font-family: var(--main-font-family);
  margin: 0;
  cursor: pointer;
}


.vs-subnav-content {
  display: none;
  position: absolute;
  border: none;
  background-color: var(--background-color2);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color: var(--text-main);
  font-size: var(--panel-menu-font-size);
  font-family: var(--main-font-family);
}

.exp-vs-subnav {
  min-width: 100px;
  overflow-y: scroll;
  height: 300;
  min-height: 100px;
}

.vs-form-inline {  
  display: flex;
  flex-flow: row wrap;
  align-items: left;
  margin: 10;
  flex-direction: column ;
}

.vs-form-inline-h {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin: 5 10 5 10;
}


.vs-form-inline label {
  margin: 0 0 0 0;
  color: var(--text-main);
  font-size: var(--panel-menu-font-size);
  font-family: var(--main-font-family);  
}

.vs-form-inline-h label {
  margin: 5 5 5 5;
  color: var(--text-main);
  font-size: var(--panel-menu-font-size);
  font-family: var(--main-font-family);  
}

.vs-form-inline input {
  vertical-align: middle;
  margin: 2px 0;
  background-color: #fff;
  border: 1px solid #ddd;
}

.vs-form-inline-h input {
  vertical-align: middle;
  margin: 10px 0;
  background-color: #fff;
  border: 1px solid #ddd;
}




@media (max-width: 800px) {
  .vs-form-inline input {
    margin: 10px 0;
  }
  
  .vs-form-inline {
    flex-direction: column ;
    align-items: stretch;
  }
}


/*Custom scrollbars are not supported in Firefox or IE/Edge.*/
/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 1px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--text-main);
  border-radius: 1px;
}