/**

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.

**/
h4{
	margin-top:1.2rem;
	margin-bottom:0;
}

.filter1 h4{
	margin-top:1rem;
}

.part-03-rect {
    fill: red;
}

.radarChart {
    height: 500px;
    width: 500px;
}

/* .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
  } */

.grid-item {
    margin: 2%;
    font-size: 30px;
    text-align: center;
}



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

.part3-intro{
	width:45%;
	/* margin-left:5%; */
}

.part3-select{
	width:45%;
	padding-left:5%;
	/* margin-left:5%; */
}

.part3-outputs{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top:1rem;
}

.part3-filters{
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	margin-left:5%;
	/* border:1px solid #262626; */
	border-radius: 15px;
}

.part3-filters h4{
	padding-left:15px;

}

/* .part-03-nba-player-model{
	margin:2rem 6%;
} */

.positionfilter,.heightfilter, .weightfilter {
    list-style-type:none;
    margin:0;
    padding-left:15px;
	display:flex;
	flex-direction:row;
	justify-content: space-between;
}



.positionfilter li, .heightfilter li, .weightfilter li{
    float:left;
    margin:6px;
	margin-left:0;
	margin-top:0;
}


.positionfilter label, .heightfilter label, .weightfilter label {
	font-size: 1.2rem;
	padding: 5px;
	padding-left:0px;
	margin: 10px;
	margin-left:0;
	border-radius: 4px;
	border: 1px solid #AEADB0;
	color: #AEADB0;
	background-color: transparent;
	line-height: 1;
	box-sizing: border-box;
	cursor: pointer;
	white-space: nowrap;
	/* background-image: url(https://raw.githubusercontent.com/flowuhh/image-host/master/splatoonWave.png); */
	background-repeat: repeat-x;
	background-position: 0 -100%;
	transition: 0.35s ease;
	&:hover {
		border: 1px solid #F9D04D;
		color: #F9D04D;
	};
}

.positionfilter label:hover, .heightfilter label:hover, .weightfilter label:hover {
	border: 1px solid #F9D04D;
    background:#F9D04D;
	color:#0e1822;
}

.positionfilter input, .heightfilter input, .weightfilter input {
	display:none;
}

.positionfilter input[type=radio]:checked + label, .weightfilter input[type=radio]:checked + label, .heightfilter input[type=radio]:checked + label {
  border: 1px solid #F9D04D;
  background:#F9D04D;
  color:#0e1822;
}



#part3filterbtn {
	margin-left:60%;
	width:180px;
    font-size: 14px;
    font-weight: bold;
    padding: 15px;
    /* background-color: aquamarine; */
    border-radius: 30px;
    margin-top: 12px;
	border:1px solid white;
	background-repeat: repeat-x;
	background-position: 0 -100%;
	transition: 0.35s ease;
}

#part3filterbtn:hover{
	background-color:#F9D04D;
	cursor:pointer;
	border:1px solid #F9D04D;
}


label {
    display: block;
    text-align: center;
    width: 120px;
}

.player-image {
    object-fit: cover;
    box-shadow:
        0px 1px 10px 1px rgba(0, 0, 0, 0.08),
        0 12px 26px 0px rgba(0,0,0, 0.2)
    ;
}

.part3-outputs {
    box-sizing: border-box;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 50px;

    display: none;
}

.avatar--error-msg {
    display: none;
    height: 400px;
}