/**

It's best practice to prefix `part-0x` to your CSS class, so you don't
overwrite others' styling, and your styling won't be overwritten by others.

**/

.part-2--line {
    stroke-width: 5px;
    fill: none;
}


/* .part-02-performance-viz{
	margin:2rem 6%;
} */


.part-2--weighed-filter{

	font-size:0.8rem;
	width:30%;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content: space-between;
	margin-top:8rem;
	margin-bottom:2rem;
	margin-left:2rem;

}

.part-2--weighed-filter input{
	display:none;
}

.part2_chart{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: space-between;
}

header{
	margin-bottom:2rem;
}

.part-02-my-svg{
	width: 60%;
	margin-right:5%;
}

.part-2--checkbox-field{
	margin:0.5rem 0;
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	flex-wrap:wrap;
}

.part-2--checkbox-field label{
    display:inline;
    border-style: solid;
    margin-left: 10px;
    border-radius: 6px;
    padding: 6px;

    cursor: pointer;
    text-transform: capitalize;

    transition: background-color 0.2s, opacity 0.2s;
}
.part-2--checkbox-field label:hover {
    opacity: 0.7;
}
.part-2--checkbox-field.checked label {
    background-color: blueviolet;
}


.part-2--checkbox-field input[type=checkbox] {
  transform: scale(1.5);
}


.height-color--text {
    color: #9E9E9E;
}
.pts-color--text {
    color: #FB582F;
}
.ast-color--text {
    color: #FC9727;
}
.blk-color--text {
    color: #2178CF;
}
.odrm-color--text {
    color: #6744B1;
}

.pts-color--bg {
    background-color: #FB582F;
}
.ast-color--bg {
    background-color: #FC9727;
}
.blk-color--bg {
    background-color: #2178CF;
}
.odrm-color--bg {
    background-color: #6744B1;
}