/* Sign-in modal styles */
input.auth.hidden.email {
	display: none;
}

/* Registration step-2 username echo: same hidden-echo pattern as
   input.auth.hidden.email above, but this input carries class="hidden" only
   (bare Fomantic .hidden does not hide a bare input), so it rendered as a
   stray empty field above the back-to-email button. */
.modal.login.registration input.hidden[autocomplete="username"] {
	display: none;
}

/* Step-1 password carry field: must stay RENDERED or Chromium/Firefox skip it
   for autofill, so hide visually with opacity/size instead of display:none.
   Kept at viewport origin (not off-screen) because off-screen or zero-size
   fields can land on Chrome's autofill exclusion list.
   NOTE: a site copy at content/account/auth/auth.css shadows this whole file
   (root .htaccess serves it first) — keep this rule in sync there too. */
input.auth-pw-carry {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.auth.ui.primary.button {
	cursor: pointer;
	background-color: #21ba45;
	color: #fff;
}
.auth.ui.primary.button:hover,
.auth.ui.primary.button:active {
	background-color: #16AB39 !important;
}

.auth.ui.modal .ui.button,
.auth.ui.modal .ui.positive.button,
.auth.ui.modal .ui.fluid.button,
.auth.ui.modal .ui.right.labeled.icon.button {
	line-height: 1.4rem !important;
}

.auth.ui.button.sso-login-btn {
	margin: 0.7rem auto;
	cursor: pointer;
}

.auth.ui.button.sso-login-btn.google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ui.button.sso-login-btn.google-btn svg {
	margin-right: 8px;
	position: relative;
	top: 2px;
}

.auth.ui.button.sso-login-btn.google-btn {
	line-height: 1;
}

.auth.ui.modal.second.login.password .content {
	text-align: center;
}

.auth.ui.modal.second.login.password .ui.input {
	max-width: 273px;
	margin: 0 auto;
}

.auth.ui.modal.second.login.registration .ui.checkbox label {
	color: #f1f1f1;
}

.auth.ui.modal.second.login.registration .ui.checkbox label a {
	color: #f1f1f1 !important;
	text-decoration: underline !important;
}

.auth.ui.modal.second.login.registration .ui.checkbox label a:hover {
	color: #1a73e8;
}

.auth.ui.modal.registration .ui.grid .row {
	padding-bottom: 0 !important;
}

.auth.ui.modal.registration .field.captcha label {
	color: #f1f1f1 !important;
	margin-bottom: 0 !important;
}

.auth.ui.modal.registration .field.captcha input[type="text"] {
	margin-left: auto;
}

.auth.ui.modal.registration .ui.grid .eight.wide.column .field.captcha-label {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 2.5em;
}

.auth.ui.modal.registration .ui.grid .eight.wide.column .field.captcha-input input {
	margin-left: 0;
}

.auth.ui.modal.registration .country-dropdown.ui.dropdown {
	max-height: 41.6667px;
}

.auth.ui.modal.registration h2.registration-header {
	padding-bottom: 0;
}

.sign-in-container h2 {
	text-align: center; 
	padding-bottom: 20px; 
	color: #FFFFFF; 
	font-weight: 500;
}

.sign-in-container .or-divider-container {
	margin: 0.8rem auto;
	max-width: 273px;
}

.sign-in-container .or-divider {
	margin-left: -10px;
	margin-right: -10px;
	text-align: center;
	font-weight: bold;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sign-in-container .or-divider::before,
.sign-in-container .or-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #ffffff;
	margin: 0 10px;
}

.sign-in-container input[type="email"],
.sign-in-container input[type="password"] {
	text-align: center;
}

.sign-in-container .email-continue-btn {
	width: 100%;
	margin-bottom: 1em;
	line-height: 1.4rem !important;
	font-weight: 400;
	font-size: 13px;
}

.sign-in-container .ui.form {
	text-align: center;
}

.sign-in-container input,
.sign-in-container .ui.input,
.sign-in-container .button {
	max-width: 273px;
	margin: auto;
	font-weight: 400;
	font-size: 13px;
	height: 44px;
}

.auth.ui.modal.second.login.password .forgot-password {
	text-decoration: underline;
	margin-left: 2rem;
	/* Match the 14px field margin above the link so the Sign in button
	   keeps the same gap below it when it wraps onto its own line.
	   inline-block: vertical margins do not shift layout on inline boxes. */
	display: inline-block;
	margin-bottom: 14px;
	color: #f1f1f1;
}
