/* General */
body {
    min-width:500px;
    margin: 10px auto;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    color:#161922;
    font-family: "Overpass", Arial, Tahoma, sans-serif;
}

.hidden_button, .hidden_div, .hidden_fieldset {display:none!important;}
.container { position:relative;}
.logo{ position: absolute; top: 10px; height: 45px; opacity: 0.4; right: 10px;}
#chart_error_message { position: absolute; top: 145px; width: 100%; text-align: center; color: #ccc;}


/* Chart control top */
.chart_control_top { margin: 15px 0; min-height: 20px; display:flex; justify-content:flex-start;}
.chart_control_top .date_range {}
.chart_control_top .right_side {float: right; color: #aaa; font-weight: bold;}

.chart_control_top .right_side div {float: left; margin:0 0 0 20px;}
.date_range { display:flex; }
.date_range, .reset { height: 50px; margin-top:auto;}
.date_range span, .reset span {
    display:block;
    height: 23px; margin-top: auto;
    margin: 0 15px 0 0;
    color:#aaa;
    border-bottom:3px solid #fff;
    padding: 4px;
}

.date_range span, .reset span {  cursor: pointer;}
.reset { padding-left:15px; color:#161922; display:flex; margin-top: auto; }
 #last_updated { display:block; color:#aaa; font-size: 13px;}

.date_range span.active { border-bottom:3px solid  rgba(21, 168, 200, 1); color:#161922; }
.chart_control_top #last_updated span {font-weight: normal;}
.chart_top_right {margin: 0 20px 0 auto; /* Auto left margin to align right */ cursor:default; }

#index_state { text-align: right; margin-bottom: -4px;}
#index_state .index_delta {color:rgb(73, 128, 18); font-size: 14px;}
#index_state .index_delta.negative {color:rgb(135,3,54)}
span.index_value { font-size: 20px; font-weight: 600; padding: 0 4px 0 0;}


/* Chart control bottom */
.chart_control_bottom {display:flex;}
.chart_control_bottom_set {margin-right: 20px;}
.chart_control_bottom fieldset {border-width:0}
.chart_control_bottom fieldset span {display:block; margin: 10px 0 0 0px;}
.chart_control_bottom fieldset label {padding: 0 15px 0 5px; font-weight: 200;}

.chart_control_bottom { margin:30px 0;}
.chart_control_bottom select {width:90%}


.chart_control_bottom_set span { font-weight:bold; text-transform:uppercase; }

span.add_line_btn {
    cursor: pointer;
	border: 2px solid #00C1CF;
	padding: 13px 19px;
	margin-top: 20px;
	color: #333333;
	background: transparent;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	display: block;
    min-width: 165px;
    text-align:center;
}

span.add_line_btn:hover {
	border: 2px solid #00C1CF;
	color: #fff;
	background: #00C1CF;
}