:root{
    --widgetColor:#ffffff;
    --boxshadow:#817e7e50;
    --primaryText:#363636;
    --primaryborder:#dadada61;
} 
.night{
    --widgetColor:#121212;
    --boxshadow:#191919;
    --primaryText:#ffffff;
    --primaryborder:#616060;
}
body{
    background-color: var(--widgetColor)!important;
        width:100vw;
        height:100vh;
        position: fixed;
}
.chartWrapper {
        height: 100%;
        width: 100%;
}
.qouteseCharts .stx_mountain_chart{
    background-color: #00ff4834;
    background-color: #ff190926;
    color: transparent;
    border-top-color: transparent;
    border-top-width: 0.5px;
}
.qouteseCharts.chartContainer{
    height: 100vh!important;
    background: transparent;
    width: 100vw;
position:fixed;
left:0px;
    /* margin-top: 20px; */
}
.chartParent{
    overflow: hidden;
        width: 100vw;
    position: absolute;
    right: 0px;
    height: 100%;
    z-index: 100;
    background: var(--widgetColor);

}
.chartParent.active{
         -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
        width: 0vw;
}
.stx-chart-panel{
    display: none!important;
}

stx-hu-tooltip {

	border-radius: 4px;
	box-shadow: 1px 2px 4px 0 var(--boxshadow);
	background-color: var(--widgetColor);
	color: var(--primaryText);
	border: none;
}
.stx_yaxis{
	color: transparent;
}

.qouteseCharts .stx_grid_border {
	/* Default Grid borders */
	color: var(--primaryborder);
}
.qouteseCharts .stx_grid_borde_y {
	/* Default Grid borders */
	color: red;
}

.periodsList{
	z-index: 15;;
	/* margin: 1rem; */
    width: fit-content;
	border-radius: 4px;
	overflow: hidden;
}

.btn-tabs{
	background: var(--bodybgColor);
	color: var(--fontcolor5);
	width: 65px;
	border-radius: 0;
	box-shadow: none;
	font-size: 12px;
	height: 35px;
  }
  .btn-tabs.active{
	  background: var(--secondaryButton);
	  color: #ffffff;
	  border-radius: 4px;
  }


  .qouteseCharts .stx_chart_controls ,.qouteseCharts .stx_jump_today{
	display: none!important;
  }

 .crossY,
  .stx_crosshair_y {
	  /* Vertical Crosshair line size */
	  height: 0px;
	  border-bottom: dashed #00000080 0px;
	  background-color: transparent;
	  margin-top: -1px !important; /* since we're using border-top to draw the actual line */
  }
 .crossX,
   .stx_crosshair_x {
	  /* Horizontal Crosshair line size */
	  width: 0px;
	  border-left: solid var(--primaryborder) 1px;
	  z-index: -1;
	  background-color: transparent;
  }
.chartExpansion{
	background: transparent;
    border: none;
    margin-left: auto;
    margin: auto;
    margin-right: 3px;
}
.chartExpansion .hoverButtonsIcons{
	width: 16px;	
	height: 16px;
}	
.stx_current_hr_up{
	background-color: var(--greenLtp);
}
.stx_current_hr_up{
	background-color: var(--redLtp);
}
.loaderBG{
	width: calc(100% + 30px);
	height: calc(100% + 20px);
	margin-top: -15px;
	margin-left: -15px;
	background-color: transparent;
}
.spinner-border{
	border: 4px solid var(--greenLtp);
}

.chartLoader{
    position: absolute;
    width: 70px;
    height: 70px;
    left: calc(50% - 35px);
    top: calc(50% - 35px);
    z-index: 3;
    opacity: 0.5;
}
.stx-float-date{
	display: none;
}



.d-none{
	display: none!important;
}
.priceTag{
	display: flex;
	height: 30px;
}
.priceLabel{
	display: block;
    font-weight: 300;
}
.priceValue{
	font-weight: 500;
	font-size: 20px;
}
.timeValue{
	font-size: 12px;
}
stx-hu-tooltip{
	min-width: 100px;
    background-color: var(--widgetColor);
    color: var(--primaryText);
}
stx-hu-tooltip-field-name{
	font-weight: normal;
}