.enrollment {
	padding: 30px;
	max-width: 100vw;
	display: flex;
	flex-direction: column;

	@include mobile {
		padding: 10px;
	}

	.enrollment-mobile-heading {
		margin: 30px 0px 30px 20px;
		font-size: 20px;
		font-weight: 500;
	}

	.recharts-surface {
		@include desktop {
			height: 410px;
		}
	}

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

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

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

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

	.graph {
		margin-top: 20px;
	}

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

	.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;
				}
			}
		}
	}

	g.recharts-layer.recharts-cartesian-axis.recharts-xAxis.xAxis,
	g.recharts-layer.recharts-cartesian-axis.recharts-yAxis.yAxis {
		opacity: 0.5;
	}
	.recharts-default-tooltip {
		border-radius: 4px;
		border: 1px solid rgb(225, 225, 225);
	}

	.enrollment-search-bar {
		.fast-option-selected {
			color: white;
		}

		> div > div {
			padding-left: 5px;
			padding-right: 5px;

			@include touch {
				padding-top: 10px;

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

// EnrollmentGraph

.enrollment-graph {
	margin-top: 20px;

	@include mobile {
		overflow-x: scroll;
		margin: 0px 10px 0px 10px;

		.recharts-legend-wrapper {
			left: 65px !important;
		}
	}

	.enrollment-content {
	}
}

// .enrollment-graph-card {
//   box-shadow: none;
//   border: none;
//
//   .enrollment-graph {
//     margin-top: 20px;
//     padding: 15px 15px 0px 35px;
//     min-height: 500px;
//
//     @include mobile {
//       padding: 0px 10px 0px 10px;
//       text-align: center;
//       overflow-x: scroll;
//     }
//
//     .enrollment-content {
//
//       @include mobile {
//         width: 500px;
//         //ResponsiveContainer already sets height to 500px
//         min-height: 510px;
//       }
//
//       .graph {
//         height: 400px;
//         padding: 15px 15px 15px 15px;
//       }
//       .graph-title {
//           font-weight: bold;
//           font-size: 20px;
//       }
//     }
//   }
// }

// EnrollmentInfoCard
.card.enrollment-card-info {
	box-shadow: none;
	border: none;

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

		.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-stats {
			padding-bottom: 5px;
		}

		.class-stat-type {
			font-size: 15px;
		}

		.class-adjustment-percent {
			color: #ffa414;
			font-size: 15px;
		}

		.class-stats-left-col {
			padding-left: 0px;
		}

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