@import "colors.css";
@import "fonts.css";

body {
    background-color: var(--alt_background_color);
}

h1 {
    color: var(--h1_color);
    margin-top: 50px;
	text-align: center;
	font: var(--h1_font);
}

h2 {
	display: inline-block;
	margin: 0px;
	font: var(--label_font);
}

.graph-text {
    font: var(--input_font);
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
}

mark {
  background-color: transparent;
  color: var(--highlight_red_color);
}

select {
	font: var(--filter_font);
}

.text_box {
  background-color: var(--background_body_color);
  padding: 20px 150px;
  margin-top: 50px;
}

.text_box p{
  font: var(--textbox_font);
  text-align: center;
}

.bbr_container {
    height: 22px;
	text-align: center;
}

.bbr_container input[type="radio"]+label {
  color: var(--inactive_bbr_blue);
  text-decoration: None;
  transition: all .2s ease-in-out;
}

.bbr_container input[type="radio"]:checked+label, .bbr_container input[type="radio"]+label:hover {
  font: var(--selected_bbr_font);
  color: black;
  margin: 0 60px;
}

.bbr_container input[type="radio"]:checked+.a140 {
    margin-left: 172px;
}

.bbr_container input[type="radio"]:checked+.a321 {
    margin-right: 161px;
}

.bbr_line {
    border: 2px solid black;
    border-radius: 50%;
    width: 700px;
    margin-bottom: 20px;
}

.type_container{
	background-color: var(--front_page_graph_background);
	width: 800px;
	height: 24px;
	padding: 10px 0px;
}

.type_filter {
	float: right;
	margin-right: 5px;
}

.filter_container {
    height: 22px;
	width: 550px;
	margin: 20px auto 0px auto;
}

label {
	font: var(--filter_font);
}

.c1 {
	float: left;
	width: 250px;
}

.c2 {
	float: left;
	width: 125px;
	text-align: left;
}

.c3 {
	float: left;
	width: 125px;
	margin-left: 50px;
	text-align: left;
}

.filter_container .c1, .filter_container .c2, .filter_container .c3 {
    color: var(--filter_text_color);
}

.chart {
	width: 800px;
	position: relative;
	margin: auto;
}

#filters {
    display: flex;
    flex-direction: column;
	width: 800px;
	position: relative;
	margin: 10px auto;
	margin-bottom: 0px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	background-color: var(--filter_background_color);
}

.change_filters_btn {
    display: block;
	background-color: var(--filter_button_color);
	font: var(--button_font);
	color: var(--filter_text_color);
	box-shadow: 3px 4px var(--shadow);
	cursor: pointer;
    margin: 15px auto;
}