@import '../GlobalStyles/colors.scss';

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.bottomPaddingElement {
	padding-bottom: 120px;
}

.submitButton,
.cancelButton {
	display: inline-block !important;
	background-color: var(--primary-color) !important;
	padding: 0;
	border-radius: 10px !important;
	line-height: inherit !important;
	// margin-top: 78px;
	white-space: nowrap;
	border-radius: 10px;
	font-size: 18px;
	border: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
	will-change: transform;
	transform-origin: center;

	a,
	span {
		display: block;
		border-radius: 10px;
		width: 100%;
		padding: 15px 60px;
		// background-color: var(--primary-color);
		font-size: 18px;
		color: white;
		text-decoration: none;
	}

	&.submitting {
		a,
		span {
			color: gray;
		}
	}

	&:hover {
		background-color: var(--primary-color-dark) !important;
		color: #fff !important;

		a {
			color: #fff !important;
		}
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none !important;

		a,
		span {
			color: #fff !important;
		}
	}
}

.cancelButton {
	background-color: transparent !important;

	a,
	span {
		color: $grey-button;
	}

	&:hover {
		background-color: $font-light-grey !important;

		a,
		span {
			color: #fff !important;
		}
	}
}

.settingsContentWrapper {
	width: 980px;
	padding: 0 60px;

	@media (max-width: 1350px) {
		max-width: 980px;
		padding: 0 60px;
	}
}

.title {
	color: var(--primary-color);
	text-align: center;
	font-size: 1.25rem !important;
}

.subtitle {
	color: var(--primary-color);
	text-align: center;
	font-size: 1.25rem !important;
	font-weight: 400;
}

.chartTitle {
	color: var(--primary-color);
	text-align: center;
	font-size: 1.25rem !important;
	text-transform: none;
}