/* CLEARING DEFAULT BROWSER STYLES */
div,
input {
	box-sizing: border-box;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
article,
footer,
header {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

/* HTML5 DISPLAY RESET FOR OLDER BROWSERS */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

html {
	height: 100vh;
}

body {
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

ol,
ul {
	list-style: none;
}

a {
	color: var(--color-primary);
	font-size: var(--textstyle-body-fontsize);
	font-weight: var(--textstyle-bodymedium-fontweight);
	text-decoration: none;
}

a:hover {
	cursor: pointer;
	text-decoration: underline;
}

/* STYLING */
body,
body input {
	font-family: var(--textstyle-body2-fontfamily);
	font-size: var(--textstyle-body2-fontsize);
	font-weight: var(--textstyle-body2-fontweight);
	line-height: var(--textstyle-body2-lineheight);
}

button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover {
	cursor: pointer;
}

:focus-visible {
	outline: none !important;
}

.login-pf-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	min-height: unset;
	max-width: unset;
	margin: 0;
	padding: 0;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	overflow: unset;
}

.login-pf body {
	background: #f8f8f8;
}

.background-circle {
	border-radius: 50%;
	background-image: linear-gradient(to left, #f3f3f3, #f8f8f8);
	width: 1024px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.login-pf-page .card-pf {
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5);
	width: 100%;
	max-width: 533px;
	margin: 0 auto;
	padding: var(--spacing-8);
	padding-bottom: var(--spacing-6);
	background: #ffffff;
	border-radius: var(--borderradius-6);
	box-shadow: var(--boxshadow-dp-8);
}

.login-pf-page-header {
	display: none;
}

#kc-back-btn a {
	display: inline-flex;
	align-items: center;
}

#kc-back-btn svg {
	height: var(--iconsize-4);
	width: var(--iconsize-4);
	fill: var(--color-primary);
	margin-right: var(--spacing-4);
}

#kc-page-title {
	color: var(--textstyle-h1-color);
	font-family: var(--textstyle-h1-fontfamily);
	font-size: var(--textstyle-h1-fontsize);
	font-weight: var(--textstyle-h1-fontweight);
	letter-spacing: var(--textstyle-h1-letterspacing);
	text-align: left;
	margin: 0;
	word-break: break-word;
}

#kc-info #kc-info-wrapper {
	margin-bottom: var(--spacing-4);
	color: var(--textstyle-body-color);
	letter-spacing: normal;
}

#kc-content {
	height: 100%;
}

#kc-content-wrapper {
	height: 100%;
}

#kc-form-login {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: var(--spacing-4) 0 0 0;
	padding: 0;
}

#kc-form-options {
	order: 2;
}

#kc-form-options + div {
	order: 1;
}

#kc-form #kc-form-wrapper .form-group:not(.login-pf-settings),
#kc-content #kc-content-wrapper .form-group:not(.login-pf-settings) {
	display: block;
	position: relative;
	padding-top: var(--spacing-5);
}

#kc-form #kc-form-wrapper .form-group.login-pf-settings,
#kc-content #kc-content-wrapper .form-group.login-pf-settings {
	margin-bottom: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#kc-form #kc-form-wrapper .form-group#kc-form-buttons,
#kc-content #kc-content-wrapper .form-group#kc-form-buttons {
	padding-top: 0;

	@media only screen and (min-width: 768px) {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-3);
		justify-content: flex-end;
	}
}

#kc-form #kc-form-wrapper .form-group.login-pf-settings > div,
#kc-content #kc-content-wrapper .form-group.login-pf-settings > div {
	font-size: var(--textstyle-body-fontsize);
	letter-spacing: normal;
}

#kc-form #kc-form-wrapper .form-group > label,
#kc-content #kc-content-wrapper .form-group > label {
	color: var(--color-dark4);
	letter-spacing: normal;
	position: absolute;
	top: 21px;
	left: 0;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
	pointer-events: none;
	background-color: transparent;
}

#kc-form #kc-form-wrapper .form-group.has-focus-or-value > label,
#kc-content #kc-content-wrapper .form-group.has-focus-or-value > label {
	color: var(--color-dark3);
	top: -5px;
}

.pf-c-form-control[type="text"],
.pf-c-form-control[type="password"] {
	color: var(--textstyle-body-color);
	width: 100%;
	height: var(--lineheight-9);
	line-height: var(--lineheight-9);
	margin-bottom: var(--spacing-5);
	padding: var(--spacing-2) 0;
	border: 0;
	border-bottom: 1px solid var(--color-dark4);
	border-radius: 0;
}

.pf-c-form-control[type="text"][aria-invalid="true"],
.pf-c-form-control[type="password"][aria-invalid="true"] {
	border-color: var(--color-danger);
}

#kc-form-buttons .btn,
.login-pf-page .pf-c-button {
	width: -webkit-fill-available;
	min-width: 100%;
	height: 3rem;
	margin-top: var(--spacing-5);
	color: var(--color-primary);
	font-size: var(--textstyle-h5-fontsize);
	font-weight: var(--textstyle-bodybold-fontweight);
	letter-spacing: normal;
	text-transform: unset;
	border-radius: var(--borderradius-4);
	background: #fff;
	border: 1px solid var(--color-primary);
	box-sizing: border-box;

	@media only screen and (min-width: 768px) {
		width: fit-content;
	}
}

#kc-form-buttons .btn:hover,
.login-pf-page .pf-c-button:hover {
	color: var(--color-light);
	background-color: var(--color-primary);
}

.login-pf-page .pf-c-button.pf-m-primary {
	width: 100%;
	background: var(--color-primary);
	border: none;
	color: var(--color-light);

	@media only screen and (min-width: 768px) {
		margin-left: auto;
	}
}

.login-pf-page .pf-c-button.pf-m-primary:hover {
	background-color: color-mix(in oklab, var(--color-primary), black 10%);
}

#kc-form #kc-form-wrapper .form-group #kc-form-links {
	font-size: var(--textstyle-body-fontsize);
	letter-spacing: normal;

	display: flex;
	align-items: center;
	margin-top: var(--spacing-7);

	@media only screen and (min-width: 768px) {
		display: block;
		align-items: unset;
		margin-top: 0;
	}
}

.kc-social-links {
	list-style-position: none;
	padding-left: 0;
}

.kc-social-section .kc-social-item {
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-2);
	font-size: var(--textstyle-body-fontsize);
	font-weight: var(--textstyle-bodymedium-fontweight);
	text-decoration: none;
	height: 3rem;
	line-height: var(--textstyle-body-lineheight);
	color: var(--textstyle-body-color);
	background: var(--main-bg-color);
	border: 1px solid var(--color-dark5);
}

.kc-social-section .kc-social-item > img {
	width: var(--iconsize-7);
	height: var(--iconsize-7);
}

.kc-social-section .kc-social-item > i {
	/* google/facebook icons */
	font-size: var(--iconsize-7);
}

.kc-social-section .kc-social-item > i.bi-google::before {
	/* google icon */
	background:
		conic-gradient(
			from -45deg,
			#ea4335 110deg,
			#4285f4 90deg 180deg,
			#34a853 180deg 270deg,
			#fbbc05 270deg
		)
		73% 55% / 150% 150% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.kc-social-section .kc-social-item > i.bi-facebook::before {
	/*facebook icon */
	color: #3b5998;
}

.logo-footer-pf {
	margin-top: 101px;
	position: absolute;
	top: 79%;

	@media (max-height: 850px) {
		top: 77%;
	}
}

#kc-register-link {
	display: flex;
	justify-content: center;
	margin-top: 3.5rem;
}

.logo-footer-pf img {
	content: var(--logo);
	display: block;
	height: var(--iconsize-10);
	width: auto;
}

#kc-step-title {
	color: var(--textstyle-h3-color);
	font-size: var(--textstyle-h3-fontsize);
	font-weight: var(--textstyle-h3-fontweight);
	line-height: var(--textstyle-h3-lineheight);
	text-align: center;
	margin: 0;
	white-space: pre-line;
	word-break: break-word;
}

.logo-header-pf {
	display: none;
}

/* ALERT AND ERROR MESSAGES */
.alert,
.pf-m-error {
	font-size: var(--textstyle-body-fontsize);
	border-style: solid;
	border-width: 1px;
	border-radius: var(--borderradius-2);
	line-height: var(--textstyle-body-lineheight);
	margin-top: var(--spacing-3);
	padding: var(--spacing-4) var(--spacing-5);
}

.alert-error,
.pf-m-error {
	display: block;
	width: 100%;
	color: var(--color-dark);
	text-align: left;
	background: var(--color-danger6);
	border-color: var(--color-danger);
	box-sizing: border-box;
}

.alert-info {
	background: var(--color-primary6);
	border-color: var(--color-primary);
}

.alert-success {
	background: var(--color-success6);
	border-color: var(--color-success);
}

.alert-warning {
	background: var(--color-warning6);
	border-color: var(--color-warning);
	margin-bottom: var(--spacing-5);
}

/* ERROR PAGE */
#kc-form.error-page #kc-form-buttons {
	width: 100%;
}

#kc-form.error-page #kc-form-buttons .pf-c-button {
	display: block;
	padding: 0 var(--spacing-5);
	line-height: 3rem;
	text-align: center;
}

#kc-form.error-page #kc-form-buttons .pf-c-button:hover {
	text-decoration: none;
}

#kc-form.error-page #kc-form-wrapper p {
	line-height: 1.4;
}

/* PASSWORD RESET PAGE */
form#kc-reset-password-form {
	margin-top: var(--spacing-4);
}

/* PASSWORD TOGGLE BUTTON */
.password-input-wrapper {
	position: relative;
}

.password-toggle-icon {
	position: absolute;
	top: 50%;
	right: var(--spacing-3);
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 50%;
}

.password-toggle-icon img {
	width: var(--iconsize-6);
	height: var(--iconsize-6);
}

::-ms-reveal {
	display: none;
}

/* TWO FACTOR AUTHENTICATION */
#kc-totp-settings {
	list-style: disc;
	padding-left: 20px;
}

/* SMALL DEVICES (landscape phones, less than 800px) */
@media (max-width: 799.98px) {
	body {
		margin: 0;
	}

	.background-circle {
		width: 100%;
	}

	.login-pf-page {
		height: 90%;
	}

	.login-pf-page .card-pf {
		height: 100%;
		width: 100%;
		max-width: none;
		border-radius: unset;
		box-shadow: none;
		padding: var(--spacing-6);
	}

	.logo-footer-pf {
		display: none;
	}

	.logo-header-pf {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 10%;
		background: var(--color-background);
		border-bottom: 1px solid var(--color-dark6);
	}

	.logo-header-pf img {
		content: var(--logo);
		max-height: var(--iconsize-10);
		width: auto;
	}

	#kc-page-title {
		font-size: var(--textstyle-h3-fontsize);
		word-break: break-word;
	}
}