@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700&display=swap');

html,
body {
	font-family: 'Roboto', sans-serif;
}

body {
	background-color: transparent;
}

html {
	background-image: url(../img/tlo_2.jpg);
	overflow-y: overlay;
}

.page {
	background-color: transparent;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0px 15px 0px;
}

h1:focus {
	outline: none;
}

a,
.btn-link {
	color: #0071c1;
}

.content {
	padding-top: 1.1rem;
}

.valid.modified:not([type='checkbox']) {
	outline: 1px solid #26b050;
	box-shadow: #26b0507a 0px 1px 0px, #26b05054 0px 0px 8px;
}

.personal-data-input:invalid {
	outline: 1px solid #b02626;
	box-shadow: #b026267a 0px 1px 0px, #b0262654 0px 0px 8px;
}

.form-control:focus {
	outline: 1px solid #00acfe !important;
	box-shadow: #00aefe59 0px 1px 0px, #00aefe63 0px 0px 8px;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
			no-repeat 1rem/1.8rem,
		#b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

.blazor-error-boundary::after {
	content: 'An error has occurred.';
}

.module-container {
	border: 1px transparent;
	border-radius: 10px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	padding: 22px 22px;
	background-color: white;
	margin: 10px 0px 10px 0px !important;
}

.module-inactive {
	pointer-events: none;
	opacity: 0.5;
	background-color: #ebebeb;
}

.module-container select:disabled {
	background-color: #efffe8;
	outline: 1px solid #26b050;
	box-shadow: #26b0507a 0px 1px 0px, #26b05054 0px 0px 8px;
	color: #26b050;
	font-weight: 600;
}

.module-inactive .select-time {
	background-color: #d6d6d6 !important;
	color: #959595 !important;
}

.module-inactive button {
	background-color: #d6d6d6 !important;
	color: #959595 !important;
}

.color-dot {
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: #0a58ca;
	padding: 0;
	margin-right: 1rem;
}

.module-name {
	display: inline-block;
	width: auto;
	height: 100%;
	font-weight: 700;
	padding: 0;
	margin: 0;
}

.module-location {
	max-width: 20%;
	width: auto;
	font-weight: 300;
	padding: 0;
	margin: 0;
}

.add-btn {
	padding: 5px 40px;
	font-weight: 700;
}

.tags {
	margin-top: 2rem !important;
}

.tags > .tag {
	display: inline-block;
	padding: 10px 10px;
	background-color: #eaeaea;
	border: 1px solid #dadada;
	border-radius: 50px;
	font-weight: 300;
	font-size: small;
	margin-bottom: 1em;
}

.description > p {
	margin-top: 1rem;
	font-weight: 300;
}

.description > h6 {
	margin-top: 10px;
}

.mr-2 {
	margin-right: 0.5rem !important;
}

.ml-2 {
	margin-left: 0.5rem !important;
}

.hide {
	display: none;
}

.pointer {
	cursor: pointer;
}

option:disabled {
	color: red;
	cursor: not-allowed;
}

.toastify.success {
	background: #26b050;
	color: #fff;
}

.toastify.warning {
	background: #f4a460;
	color: #fff;
}

/**/

header {
	background-color: white;
	display: flex;
	box-shadow: #001d48 0px 30px 90px;
	margin-bottom: 15px;
}

.register-form {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
}

.form-container {
	background-color: white;
	border-radius: 15px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding: 70px 50px 70px 50px;
	margin: auto;
	margin-top: 30px;
}

.form-container .form-control {
	border: none;
	background-color: #f7f7f8;
	border-radius: 12px;
	padding-left: 17px;
}

.form-container .form-control:not(.personal-data-input) {
	padding-top: 15px;
	padding-bottom: 15px;
}

.form-container .form-control:not(.personal-data-input, .search-event) {
	background-image: url(../img/chevron-down.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center;
	background-size: 20px;
}

.personal-data-input {
	padding-top: 30px;
}

.form-container label:not(.checkbox-label) {
	position: absolute;
	transform: translate(17px, 9px);
	font-size: 11pt;
	color: #bdbbb7;
	font-weight: 400;
}

article {
	padding: 0 !important;
}

article.content {
	padding: 0 !important;
}

.step-number {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 15px;
	font-weight: 600;
}

.cart-number {
	background-color: #34aaff;
	color: white;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	padding-top: 2px;
	border-radius: 50%;
	font-weight: 600;
}

.logo-container {
	display: flex;
	align-items: center;
	gap: 25px;
}

.back-button {
	border: none;
	background-color: transparent;
	color: white;
	font-weight: 600;
	display: flex;
	align-content: center;
	align-items: center;
}

.back-button .button-text {
	line-height: 1px;
}

.back-button .button-icon {
	transform: scale(1.1) translateY(-2px);
	margin-right: 10px;
	transition: all 0.2s ease-out;
}

.back-button:hover .button-icon {
	transform: translateX(-5px) translateY(-2px) scale(1.1);
	transition: all 0.2s ease-out;
}

.event-description {
	font-weight: 700;
}

.category-pill {
	border-radius: 50px;
	background-color: hsla(0, 0%, 53%, 0.17);
	font-size: 11pt;
	border: none;
	color: #9b9b9b;
	font-weight: 400;
	padding: 10px 20px;
	transition: background-color 0.5s ease;
}

.categories-container {
	gap: 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.cart-btn {
	background-color: transparent;
	border: none;
}

.back-btn-container {
	min-height: 34px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 91%;
	position: absolute;
	transform: translateY(-35px);
	font-size: 20px;
}

.session-timer-container {
	min-height: 34px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.btn-remove {
	color: red;
	border: 1px red solid !important;
}

.btn-remove:hover {
	background-color: red;
	color: white;
	border: 1px red solid !important;
}

.checkbox-container {
	display: flex;
	align-items: flex-start;
	align-content: center;
	gap: 10px;
	margin-bottom: 20px;
}

.checkbox-container input {
	transform: translateY(5px);
}

.event-time-container {
	display: grid;
	grid-template-columns: clamp(200px, 70%, 600px) 150px;
	gap: 10px;
	justify-content: space-between;
	margin-top: 20px !important;
}

.inner-event-time-container {
	display: flex;
	align-items: center;
	gap: 20px;
}

.add-btn-container {
	float: right;
}

.additional-info {
	cursor: pointer;
	position: relative;
}

/* Tooltip text */
.additional-info .tooltiptext {
	visibility: hidden;
	font-weight: 400;
	font-size: 11pt;
	width: 120px;
	background-color: #00acfe;
	color: rgb(255, 255, 255);
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	transform: translate(20px, -7px);
	position: absolute;
	z-index: 1;
}

.additional-info:hover .tooltiptext {
	visibility: visible;
}

.additional-info .tooltiptext::after {
	content: ' ';
	position: absolute;
	top: 50%;
	right: 100%; /* To the left of the tooltip */
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #00acfe transparent transparent;
}

.additional-info:hover .feather-info {
	stroke: #00acfe;
	transition: stroke 0.5s ease-in-out;
}

.additional-info .tooltiptext {
	opacity: 0;
	transition: opacity 0.2s;
}

.additional-info:hover .tooltiptext {
	opacity: 1;
	transition: opacity 0.2s;
}
.add-btn-container {
	position: relative;
}

.tooltiptext {
	visibility: hidden;
	position: absolute;
}

.add-btn-container .btn-primary:disabled + .tooltiptext {
	visibility: hidden;
	font-weight: 400;
	font-size: 11pt;
	width: 120px;
	background-color: #00acfe;
	color: rgb(255, 255, 255);
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	transform: translate(-15px, -45px);
	position: absolute;
	z-index: 1;
}

.add-btn-container .btn-primary:disabled:hover + .tooltiptext {
	visibility: visible;
}

.add-btn-container .btn-primary:disabled + .tooltiptext::after {
	content: ' ';
	position: absolute;
	top: 100%; /* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #00acfe transparent transparent transparent;
}

.add-btn-container .btn-primary:disabled + .tooltiptext {
	opacity: 0;
	transition: opacity 0.2s;
}

.add-btn-container .btn-primary:disabled:hover + .tooltiptext {
	opacity: 1;
	transition: opacity 0.2s;
}

.feather-info {
	transition: stroke 0.5s ease-in-out;
}

.mobile-event-dropdown {
	display: none;
}

.next-button-container {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: white;
	min-height: 50px;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-content: center;
	padding: 10px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	-webkit-transition: visibility 0s, opacity 0.5s linear;
	transition: visibility 0s, opacity 0.5s linear;
}

@media (max-width: 1200px) {
	.nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}

	.back-btn-container {
		width: 88%;
	}

	.register-again-button {
		width: 350px !important;
	}
}

@media (max-width: 991px) {
	.nav-pills {
		display: none;
	}

	.back-btn-container {
		width: 84%;
	}
}

@media (max-width: 990px) {
	.mobile-event-dropdown {
		display: initial;
	}

	.category-pill {
		display: none;
	}
}

@media (max-width: 768px) {
	.event-time-container {
		grid-template-rows: 1fr 70px !important;
		grid-template-columns: 75% 21% !important;
	}

	.inner-event-time-container {
		display: grid;
		grid-template-columns: 90% 1fr;
		gap: 20px;
	}

	.add-btn-container {
		grid-column: span 2;
	}

	.module-location-container {
		order: -1;
		grid-column: span 2;
	}

	.back-btn-container {
		width: 78%;
	}
}

@media (max-width: 576px) {
	.page {
		padding: 10px;
	}
}

@media (max-width: 500px) {
	.form-container {
		padding: 60px 10px 60px 10px;
	}

	.register-form {
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr;
	}

	.back-btn-container {
		width: 75%;
	}
}

@media (max-width: 370px) {
	.logo-container {
		display: grid;
		align-items: center;
		gap: 10px;
		grid-template-rows: 1fr 1fr;
		text-align: center;
	}

	.back-btn-container {
		width: 67%;
	}

	.register-again-button {
		width: 250px !important;
		font-size: 14px;
	}

	.back-button .button-icon {
		transform: scale(1) translateY(-2px);
		margin-right: 0;
		transition: all 0.2s ease-out;
	}

	.back-button:hover .button-icon {
		transform: translateX(-5px) translateY(-2px) scale(1);
		transition: all 0.2s ease-out;
	}
}

/*bootstrap overwrite*/

.btn {
	border: none;
	border-radius: 7px;
	font-weight: 600;
	padding-top: 13px;
	padding-bottom: 13px;
	padding-left: 30px;
	padding-right: 30px;
}

.btn-primary {
	background-color: #34aaff;
}

.btn-success {
	background-color: #10c700;
}

.btn-primary.disabled,
.btn-primary:disabled {
	cursor: not-allowed;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
	pointer-events: initial;
	opacity: 0.65;
}

.add-btn {
	width: 100%;
}

.nav {
	justify-content: flex-end;
}

.nav-item {
	font-size: 10pt;
	font-weight: 500;
}

.nav-link {
	color: black;
}

.nav-link .step-number {
	background-color: #f7f7f8;
	color: #bdbbb7;
}

.nav-link.disabled .step-number {
	background-color: #f7f7f8;
	color: #bdbbb7;
}

.nav-link.active .step-number {
	background-color: #34aaff;
	color: white;
}

.nav-pills .nav-link.active {
	color: black;
	background-color: transparent !important;
}

.row {
	margin: 0;
}

.btn-primary.disabled,
.btn-primary:disabled {
	color: #9b9b9b;
	background-color: #ebebeb;
}