/* Patternfly CSS places a "bg-login.jpg" as the background on this ".login-pf" class.
This clashes with the "keycloak-bg.png' background defined on the body below.
Therefore the Patternfly background must be set to none. */
.login-pf {
	background: none;
}

@media (min-width: 768px) {
	.login-pf-page .card-pf {
		padding: 20px 35px 30px 35px;
		box-shadow: 3px;
		box-shadow: 5px 5px 15px #0c365c;
	}
}

.login-title {
	font-family: 'Roboto';
	font-weight: 600;
	color: #032741;
	margin-bottom: 1.5rem !important;
	margin-top: 1.5rem !important;
	font-size: 2rem;
	text-align:center;
}

#kc-form-wrapper {
	margin-bottom: 30px;
}


/* Fix the forgot password info box. */
#kc-info {
	margin:0px !important;
}

.login-footer, .disclaimer {
	text-align: center;
	margin-bottom:25px;
	font-size: .8rem !important;
}

.powered-by-footer {
	font-size: .7rem;
	margin-bottom: 0px !important;
}

.login-footer-left {
	font-size: 1rem;
}

@media (max-width: 768px) {
.login-background {
    background-color: white;
    background-image: none;
}
}

.disclaimer {
	font-size: 0.8rem;
}

/* form styling with light blue background behind input elements. */

.form-group .input-flex {
	display: flex;
}

.form-group input:not([type="checkbox"]):not([type="radio"]) {
	background-color: #edf0f6;
	border: 1px solid #ccc;
	width: 100%;
	border-radius: 3px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-left: 0;
	height: 50px;
	color: #022743 !important;
}

.form-group input:focus, .form-group input:focus-visible {
	-webkit-box-shadow: none;
	box-shadow: none;
	border-color: #ccc;
	background-color: #edf0f6;
	outline: none;
}

.form-group input.pf-c-button {
	width: 100%;
	background-color: #045baa !important;
	color: white !important;
	font-size: large;
	border: none;
	border-radius: .25rem;
}

/* No border on the login button; id beats the .form-group input:not(...)
   rule that otherwise gives the submit button a 1px border. */
#kc-login {
	border: 0px;
	border-radius: 3px;
    color: white !important;
}

/* over-ride some KC styles */
.pf-c-form-control:focus {
	border-bottom-width: 1px;
}

.pf-c-form-control[aria-invalid=true] {
	border-bottom-width: 1px;
}

.pf-c-input-group {
	display:inherit;
}

/* Update-password page: the input + show/hide "eye" button live in a bare
   pf-c-input-group (no .input-flex icon-holder). Restore flex so the eye sits
   inline to the right of the field instead of wrapping below it, and give the
   field back its left border/corners since there's no icon-holder beside it. */
#kc-passwd-update-form .pf-c-input-group {
	display: flex;
	align-items: stretch;
}

#kc-passwd-update-form .pf-c-input-group input {
	flex: 1 1 auto;
	width: auto;
	border: 1px solid #ccc;
	border-right: 0;
	border-radius: 3px 0 0 3px;
}

/* Eye button sits flush against the field as one connected control:
   square left corners, rounded right, shared border, matching height/fill. */
#kc-passwd-update-form .pf-c-input-group .pf-c-button {
	margin: 0;
	height: auto;
	border: 1px solid #ccc;
	border-radius: 0 3px 3px 0;
	background-color: #edf0f6;
}

.icon-holder {
	border-top-left-radius: 3px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3px;
	border: 1px solid #ced4da;
	border-right: none;
	background-color: #edf0f6;
	margin: auto;
	margin-right: -1px;
	padding: 14px;
	width: inherit;
}

.lock-icon {
	background-image: url('../img/lock.png');
	background-size: contain;
	padding: 10px;
	margin: auto;
	background-repeat: no-repeat;
}

.user-icon {
	background-image: url('../img/user.png');
	background-size: contain;
	padding: 10px;
	margin: auto;
	background-repeat: no-repeat;
}

.login-pf body {
	background: url("../img/f360_login_bg.jpg") no-repeat center center fixed;
	background-size: cover;
	height: 100%;
	font-family: 'Roboto';
}

html, body.login-pf {
	height: 100%;
}

/* Sticky-footer column: the card centers vertically when there's room and the
   copyright (.info-window, relocated here by footer.ftl) rests at the bottom.
   When the viewport is short or zoomed, the card's auto margins collapse, the
   page grows and scrolls, and the footer stays below the card — never over it.
   justify-content must NOT be center: on overflow that would clip the top of
   the card out of reach. The card's `margin: auto` (see .card-pf) does the
   centering instead, pinning to the top when content no longer fits. */
.login-pf-page {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}


@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-Regular.ttf');
}



.headerlogo {
	background-image: url(../img/logo_semidark.png) !important;
}

/* In normal flow (relocated below the card by footer.ftl), not fixed — so it
   can never collide with the login box. flex: 0 0 auto keeps its natural
   height; the card above it takes the slack via `margin: auto`. */
.info-window {
	flex: 0 0 auto;
	width: 100%;
	padding: 15px;
}

.privacy {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 10px;
	font-size: 0.8rem;
	color: white;
	text-align: center;
}

.privacy a {
	color:white;
}

@media (max-width: 768px) {
.privacy, .privacy a {
	color: #054178;
	text-shadow: none;
	font-size: 0.7rem;
}
}


.headerlogo {
	background-image: url(../img/logo_semidark.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 122px;
	background-position: center;
}

textarea.pf-c-form-control {
	height: auto;
}

.pf-c-alert__title {
	font-size: var(--pf-global--FontSize--xs);
}

p.instruction {
	margin: 5px 0;
}

.pf-c-button.pf-m-control {
	border-color: rgba(230, 230, 230, 0.5);
}

h1#kc-page-title {
	margin-top: 10px;
}

#kc-locale ul {
	background-color: var(--pf-global--BackgroundColor--100);
	display: none;
	top: 20px;
	min-width: 100px;
	padding: 0;
}

#kc-locale-dropdown{
	display: inline-block;
}

#kc-locale-dropdown:hover ul {
	display:block;
}

#kc-locale-dropdown a {
	color: var(--pf-global--Color--200);
	text-align: right;
	font-size: var(--pf-global--FontSize--sm);
}

#kc-locale-dropdown button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--pf-global--Color--200);
	text-align: right;
	font-size: var(--pf-global--FontSize--sm);
}

button#kc-current-locale-link::after {
	content: "\2c5";
	margin-left: var(--pf-global--spacer--xs)
}

.login-pf .container {
	padding-top: 40px;
}

.login-pf a:hover {
	color: #0099d3;
}

#kc-logo {
	width: 100%;
}

div.kc-logo-text {
	background-image: url(../img/keycloak-logo-text.png);
	background-repeat: no-repeat;
	height: 63px;
	width: 300px;
	margin: 0 auto;
}

div.kc-logo-text span {
	display: none;
}

#kc-header {
	color: #ededed;
	overflow: visible;
	white-space: nowrap;
}

#kc-header-wrapper {
	display:none;
}

#kc-content {
	width: 100%;
}

#kc-attempted-username {
	font-size: 20px;
	font-family: inherit;
	font-weight: normal;
	padding-right: 10px;
}

#kc-username {
	text-align: center;
	margin-bottom:-10px;
}

#kc-webauthn-settings-form {
	padding-top: 8px;
}

#kc-form-webauthn .select-auth-box-parent {
	pointer-events: none;
}

#kc-form-webauthn .select-auth-box-desc {
	color: var(--pf-global--palette--black-600);
}

#kc-form-webauthn .select-auth-box-headline {
	color: var(--pf-global--Color--300);
}

#kc-form-webauthn .select-auth-box-icon {
	flex: 0 0 3em;
}

#kc-form-webauthn .select-auth-box-icon-properties {
	margin-top: 10px;
	font-size: 1.8em;
}

#kc-form-webauthn .select-auth-box-icon-properties.unknown-transport-class {
	margin-top: 3px;
}

#kc-form-webauthn .pf-l-stack__item {
	margin: -1px 0;
}

#kc-content-wrapper {
	margin-top: 20px;
}

#kc-form-wrapper {
	margin-top: 10px;
}

#kc-info {
	margin: 20px -40px -30px;
}

#kc-info-wrapper {
	font-size: 13px;
}

#kc-form-options span {
	display: block;
}

#kc-form-options .checkbox {
	margin-top: 0;
	color: #72767b;
}

#kc-terms-text {
	margin-bottom: 20px;
}

#kc-registration-terms-text {
	max-height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 5px;
}

#kc-registration {
	margin-bottom: 0;
}

/* TOTP */

.subtitle {
	text-align: right;
	margin-top: 30px;
	color: #909090;
}

.required {
	color: var(--pf-global--danger-color--200);
}

ol#kc-totp-settings {
	margin: 0;
	padding-left: 20px;
}

ul#kc-totp-supported-apps {
	margin-bottom: 10px;
}

#kc-totp-secret-qr-code {
	max-width:150px;
	max-height:150px;
}

#kc-totp-secret-key {
	background-color: #fff;
	color: #333333;
	font-size: 16px;
	padding: 10px 0;
}

/* OAuth */

#kc-oauth h3 {
	margin-top: 0;
}

#kc-oauth ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#kc-oauth ul li {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12px;
	padding: 10px 0;
}

#kc-oauth ul li:first-of-type {
	border-top: 0;
}

#kc-oauth .kc-role {
	display: inline-block;
	width: 50%;
}

/* Code */
#kc-code textarea {
	width: 100%;
	height: 8em;
}

/* Social */
.kc-social-links {
	margin-top: 20px;
}

.kc-social-links li {
	width: 100%;
}

.kc-social-provider-logo {
	font-size: 23px;
	width: 30px;
	height: 25px;
	float: left;
}

.kc-social-gray {
	color: var(--pf-global--Color--200);
}

.kc-social-gray h2 {
	font-size: 1em;
}

.kc-social-item {
	margin-bottom: var(--pf-global--spacer--sm);
	font-size: 15px;
	text-align: center;
}

.kc-social-provider-name {
	position: relative;
}

.kc-social-icon-text {
	left: -15px;
}

.kc-social-grid {
	display:grid;
	grid-column-gap: 10px;
	grid-row-gap: 5px;
	grid-column-end: span 6;
	--pf-l-grid__item--GridColumnEnd: span 6;
}

.kc-social-grid .kc-social-icon-text {
	left: -10px;
}

.kc-login-tooltip {
	position: relative;
	display: inline-block;
}

.kc-social-section {
	text-align: center;
}

.kc-social-section hr{
	margin-bottom: 10px
}

.kc-login-tooltip .kc-tooltip-text{
	top:-3px;
	left:160%;
	background-color: black;
	visibility: hidden;
	color: #fff;

	min-width:130px;
	text-align: center;
	border-radius: 2px;
	box-shadow:0 1px 8px rgba(0,0,0,0.6);
	padding: 5px;

	position: absolute;
	opacity:0;
	transition:opacity 0.5s;
}

/* Show tooltip */
.kc-login-tooltip:hover .kc-tooltip-text {
	visibility: visible;
	opacity:0.7;
}

/* Arrow for tooltip */
.kc-login-tooltip .kc-tooltip-text::after {
	content: " ";
	position: absolute;
	top: 15px;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent black transparent transparent;
}

@media (min-width: 768px) {
	#kc-container-wrapper {
		position: absolute;
		width: 100%;
	}

	.login-pf .container {
		padding-right: 80px;
	}

	#kc-locale {
		position: relative;
		text-align: right;
		z-index: 9999;
	}
}

@media (max-width: 767px) {

	.login-pf body {
		background: white;
	}

	#kc-header {
		padding-left: 15px;
		padding-right: 15px;
		float: none;
		text-align: left;
	}

	#kc-header-wrapper {
		font-size: 16px;
		font-weight: bold;
		padding: 20px 60px 0 0;
		color: #72767b;
		letter-spacing: 0;
	}

	div.kc-logo-text {
		margin: 0;
		width: 150px;
		height: 32px;
		background-size: 100%;
	}

	#kc-form {
		float: none;
	}

	#kc-info-wrapper {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		background-color: transparent;
	}

	.login-pf .container {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	#kc-locale {
		position: absolute;
		width: 200px;
		top: 20px;
		right: 20px;
		text-align: right;
		z-index: 9999;
	}
}

@media (min-width: 768px) {
	#kc-container-wrapper {
		position: static;
		top: auto;
		bottom: auto;
		padding-top: 0;
	}
}

.card-pf form.form-actions .btn {
	float: right;
	margin-left: 10px;
}

#kc-form-buttons {
	margin-top: 20px;
	position: relative;
}

/* Login-in-progress feedback: the submit script swaps the button label to
   "Please wait..." and reveals this spinner overlaid on the button's right. */
#kc-login-spinner {
	display: none;
}

.login-in-progress #kc-login {
	opacity: .85;
	cursor: wait;
}

.login-in-progress #kc-login-spinner {
	display: block;
	position: absolute;
	top: 50%;
	right: 14px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: kc-login-spin .8s linear infinite;
	pointer-events: none;
}

@keyframes kc-login-spin {
	to { transform: rotate(360deg); }
}

.login-pf-page .login-pf-brand {
	margin-top: 20px;
	max-width: 360px;
	width: 40%;
}

.select-auth-box-arrow{
	display: flex;
	align-items: center;
	margin-right: 2rem;
}

.select-auth-box-icon{
	display: flex;
	flex: 0 0 2em;
	justify-content: center;
	margin-right: 1rem;
	margin-left: 3rem;
}

.select-auth-box-parent{
	border-top: 1px solid var(--pf-global--palette--black-200);
	padding-top: 1rem;
	padding-bottom: 1rem;
	cursor: pointer;
	text-align: left;
	align-items: unset;
	background-color: unset;
	border-right: unset;
	border-bottom: unset;
	border-left: unset;
}

.select-auth-box-parent:hover{
	background-color: #f7f8f8;
}

.select-auth-container {
	padding-bottom: 0px !important;
}

.select-auth-box-headline {
	font-size: var(--pf-global--FontSize--md);
	color: var(--pf-global--primary-color--100);
	font-weight: bold;
}

.select-auth-box-desc {
	font-size: var(--pf-global--FontSize--sm);
}

.select-auth-box-paragraph {
	text-align: center;
	font-size: var(--pf-global--FontSize--md);
	margin-bottom: 5px;
}

.card-pf {
	margin: 0 auto;
	box-shadow: var(--pf-global--BoxShadow--lg);
	padding: 0 20px;
	max-width: 450px;
}

/* Vertical auto-margins center the card in the flex column when it fits and
   collapse to 0 (pinning it to the top, page scrolls) when it doesn't.
   This MUST out-specify PatternFly v3's `.login-pf-page .card-pf{margin-bottom:0}`
   (specificity 0,2,0) — at the plain `.card-pf` level that rule wins and forces
   margin-bottom:0, leaving only margin-top:auto, which drops the card to the
   page bottom. Matching the selector (and loading later) re-asserts both autos. */
.login-pf-page .card-pf {
	margin-top: auto;
	margin-bottom: auto;
}

/*phone*/
@media (max-width: 767px) {
	.login-pf-page .card-pf {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		border-top: 0;
		box-shadow: 0 0;
	}

	.kc-social-grid {
		grid-column-end: 12;
		--pf-l-grid__item--GridColumnEnd: span 12;
	}

	.kc-social-grid .kc-social-icon-text {
		left: -15px;
	}
}

.login-pf-page .login-pf-signup {
	font-size: 15px;
	color: #72767b;
}
#kc-content-wrapper .row {
	margin-left: 0;
	margin-right: 0;
}

.login-pf-page.login-pf-page-accounts {
	margin-left: auto;
	margin-right: auto;
}

.login-pf-page .btn-primary {
	margin-top: 0;
}

.login-pf-page .list-view-pf .list-group-item {
	border-bottom: 1px solid #ededed;
}

.login-pf-page .list-view-pf-description {
	width: 100%;
}

#kc-form-login div.form-group:last-of-type,
#kc-register-form div.form-group:last-of-type,
#kc-update-profile-form div.form-group:last-of-type,
#kc-update-email-form div.form-group:last-of-type{
	margin-bottom: 0px;
}

.no-bottom-margin {
	margin-bottom: 0;
}

#kc-back {
	margin-top: 5px;
}

/* Recovery codes */
.kc-recovery-codes-warning {
	margin-bottom: 32px;
}
.kc-recovery-codes-warning .pf-c-alert__description p {
	font-size: 0.875rem;
}
.kc-recovery-codes-list {
	list-style: none;
	columns: 2;
	margin: 16px 0;
	padding: 16px 16px 8px 16px;
	border: 1px solid #D2D2D2;
}
.kc-recovery-codes-list li {
	margin-bottom: 8px;
	font-size: 11px;
}
.kc-recovery-codes-list li span {
	color: #6A6E73;
	width: 16px;
	text-align: right;
	display: inline-block;
	margin-right: 1px;
}

.kc-recovery-codes-actions {
	margin-bottom: 24px;
}
.kc-recovery-codes-actions button {
	padding-left: 0;
}
.kc-recovery-codes-actions button i {
	margin-right: 8px;
}

.kc-recovery-codes-confirmation {
	align-items: baseline;
	margin-bottom: 16px;
}

#certificate_subjectDN {
	overflow-wrap: break-word
}
/* End Recovery codes */