.grades {
	padding: 30px;
	max-width: 100vw;

	display: flex;
	flex-direction: column;

	@include mobile {
		padding: 10px;
	}

	.grades-mobile-heading {
		margin: 10px 0px 5px 10px;
		font-size: 20px;
		font-weight: 500;
	}

	.css-1myhgat-indicatorContainer {
		color: $bt-light-border-grey;
		transition: 0.5s;
		&:hover {
			color: #ababab;
		}
	}

	.btn-primary:disabled {
		cursor: default;
	}

	.css-yk16xz-control:hover {
		cursor: pointer;
	}

	.css-10r6hld-indicatorContainer,
	.css-hu2rzu-indicatorContainer {
		color: $bt-light-border-grey;
		transition: 0.5s;
		&:hover {
			color: #ababab;
		}
	}

	.grades-recharts-container {
		height: 450px;

		.recharts-responsive-container {
			position: absolute;
		}
	}

	.grades-recharts-container-mobile {
		height: 600px;

		.recharts-responsive-container {
			position: absolute;
		}
	}

	.xlabel {
		padding-left: 60px;
		font-weight: bold;
		color: $bt-light-text;
	}

	.disclaimer {
		.info {
			width: 15px;
			margin-bottom: 2px;
		}
		padding-left: 55px;
		padding-top: 5px;

		@include mobile {
			padding: 0px 10px 20px 10px;
			text-align: center;
		}

		p {
			display: inline;
			margin-left: 5px;
			color: $bt-light-grey;
			font-size: 14px;

			a {
				color: $bt-primary;

				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	.grades-search-bar {
		margin-bottom: 0;

		.fast-option-selected {
			color: white;
		}

		// row
		> div {
			// columns
			> div {
				padding-left: 5px;
				padding-right: 5px;

				@include touch {
					padding-top: 10px;

					.btn {
						width: 100%;
					}
				}
			}
		}
	}
}

// GradesGraph
.grades-graph-card {
	box-shadow: none;
	border: none;

	.graph-content {
		.graph {
			padding: 15px 15px 15px 15px;
		}
		.graph-title {
			font-weight: bold;
			font-size: 20px;
		}
	}
}

// GradesInfoCard
.grades-card-info {
	box-shadow: none;

	.content {
		padding: 0px 15px 15px 15px;

		.class-num {
			font-weight: bold;
			font-size: 20px;
			width: fit-content;
		}

		.class-info {
			margin-top: 5px;
			color: #8f8f8f;
		}

		.class-title {
			padding-top: 5px;
			padding-bottom: 10px;
		}

		.class-avgs {
			padding: 0;

			.class-avg-stats {
				padding: 0;
				font-size: 15px;
				font-weight: bold;
				margin-bottom: 3%;
			}

			.class-stats-name {
				color: #8f8f8f;
			}

			.class-grade {
				font-size: 18px;
				font-weight: bold;
			}

			.class-percent {
				color: gray;
				font-size: 18px;
			}
		}
	}
}
