.hidden-block {
	display: none;
	transition: display 0.5s ease-out;
}

.modal-header.bg-danger {
	background-color: #dc3545;
}

.modal-body.text-danger {
	color: #dc3545;
}

.repo-icon {
	margin: 10px 10px 10px 0;
	height: 48px;
}

.repo-icon-rounded-div {
	margin: 10px 10px 10px 0;
	display: inline;
}

.repo-icon-rounded {
	height: 48px;
	border: 1px solid #454956;
	border-radius: 6px;
}

body {
	color: var(--brand-text-color);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

header {
	background-color: var(--header-bg-color);
	position: relative;
	text-align: center;
	overflow: hidden;
	margin-bottom: -5px;
}

header h1 {
	color: var(--headline-color);
	font-size: 50px;
	padding: 50px 0 0 0;
}

header h2 {
	color: black;
	font-size: 20px;
	font-weight: normal;
	padding: 0;
}

select.form-select,
select.form-select option {
	color: var(--brand-text-color);
}

.wave {
	width: 100%;
	height: 5%;
	position: relative;
	overflow: hidden;
	line-height: 0;
	margin-bottom: -1px;
}

.wave svg {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.content-wrapper {
	background-color: white;
	overflow: visible;
}

::placeholder {
	color: #6c757d;
	opacity: 1;
}

.btn-enroll,.btn_launch {
	background-color: var(--brand-text-color);
	color: white;
}

.btn-enroll:hover,.btn_launch:hover {
	background-color: var(--hover-text-color);
	color: white;
}

.img-80 {
	width: 100%;
	max-width: 80%;
}

.form-check-input:checked {
	background-color: var(--brand-text-color);
	border-color: var (--brand-text-color);
}

.form-check-label a {
	color: var(--brand-text-color);
	text-decoration: none;
}

.form-check-label a:hover {
	color: var(--hover-text-color);
}

.was-validated .form-control:invalid,
.was-validated .form-check-input:invalid {
	border-color: #dc3545;
}

.was-validated .form-control:valid,
.was-validated .form-check-input:valid {
	border-color: var(--brand-text-color);
}

.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	margin-top: 20px;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

footer {
	background-color: var(--header-bg-color);
	padding: 20px 0;
}

.footer-logo {
	display: block;
	margin: 0 auto 10px;
	width: 50%;
	max-width: 100px;
}

.footer-text {
	font-size: 0.875rem;
	line-height: 1.2;
	text-align: left;
	color: var(--brand-text-color);
}

.footer-text p {
	margin: 5px 0;
}

.footer-text a {
	color: var(--brand-text-color);
	text-decoration: none;
}

.footer-text a:hover {
	color: var(--hover-text-color);
}

.footer-links a {
	color: var(--brand-text-color);
	text-decoration: none;
	margin: 0 10px;
}

.footer-links a:hover {
	color: var(--hover-text-color);
}

.footer-social-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	max-width: 30%;
	margin: 0 auto;
	overflow: hidden;
	white-space: nowrap;
}

.footer-social-icons a {
	margin: 0 5px;
	color: var(--footer-text-color);
	text-decoration: none;
}

.footer-social-icons a:hover {
	color: var(--hover-text-color);
}

.footer-social-icons i {
	font-size: 24px;
}

.form-frame {
	max-height: var(--form-frame-max-height);
	height: var(--form-frame-height);
	overflow-y: auto;
	overflow-x: hidden;
	border: none;
	padding: 5px;
	box-sizing: border-box;
	position: relative;
}

.spinner-hieght-mode {
	max-height: var(--form-frame-max-height) !important;
	height: var(--form-frame-height) !important;
}

.inner-glow {
	box-shadow: inset 0 -20px 20px -20px rgba(0, 0, 0, 0.125);
}

.spinner-container {
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: white;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	z-index: 10;
}

.spinner-border {
	width: 3rem;
	height: 3rem;
	color: var(--brand-text-color);
}

.loading-text {
	margin-top: 10px;
	animation: fade 2s infinite;
	color: var(--brand-text-color);
}

@keyframes fade {
	0%, 100% {
			opacity: 1;
	}
	50% {
			opacity: 0;
	}
}

.fade-out {
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

.fade-in {
	opacity: 1;
	transition: opacity 0.5s ease-in;
}

.hidden {
	display: none;
}

.card {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease-in-out;
}

.card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.1);
}

@media (max-width: 576px) {
	.form-frame {
			max-height: none;
			height: auto;
			overflow: none;
	}
	.footer-text {
			text-align: center;
	}
}

.content-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.content-container .overview-text {
	order: 1;
	flex: 1;
}

.content-container .signup-form {
	order: 2;
	flex: 1;
}

@media (max-width: 768px) {
	.form-frame {
			max-height: none;
			height: auto;
			overflow: none;
	}
	.content-container {
			flex-direction: column;
	}
	.content-container .overview-text {
			order: 2;
	}
	.content-container .signup-form {
			order: 1;
	}
	.footer-text {
			text-align: center;
	}
}

.credentials-container {
	max-width: 350px;
	margin: 0;
}

@media (max-width: 576px) {
	.credentials-container {
			max-width: 100%;
	}
}