/* =====================================================================
* Vitu overrides for the keycloak.v2 (PatternFly 5) login theme.
*
* Goal: reproduce, on the keycloak.v2 (PatternFly 5) base, the look of
* the previous keycloak (PatternFly 4) "master-styles.css" theme.
*
* Target design (from the old theme):
* - Small Vitu wordmark pinned to the top-left of the page.
* - Plain white page (no dark card, no shadow, no rounded chrome).
* - Big centered teal "Welcome back" heading (72px, weight 300).
* - Narrow centered form column (~380px).
* - White inputs, 5px radius, faint gray border with a slightly darker
* bottom edge; cyan focus ring/glow.
* - Thin (weight 100) gray field labels.
* - Full-width cyan "Sign In" button (18px/30px Roboto, 5px radius).
* - Gray, underlined helper/links (Forgot?, Back to Login, footer).
* - Outlined secondary buttons for identity providers.
*
* Palette:
* Primary cyan: #21BAE7
* Primary cyan hover: #2787a4
* Heading teal: #013d4f
* Vitu logo dark: #0A3F4D
* Border gray: #D5D5D5
* Focus glow: #bceaf8
* Muted gray text: #B5B5B5
* Danger red: #a94543
* ===================================================================== */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap");
/* ---- Global font & PF5 token overrides ----------------------------- */
:root,
:where(html) {
--pf-v5-global--primary-color--100: #21BAE7;
--pf-v5-global--primary-color--200: #2787a4;
--pf-v5-global--link--Color: #B5B5B5;
--pf-v5-global--link--Color--hover: rgba(0, 0, 0, 0.5);
--pf-v5-global--active-color--100: #21BAE7;
--pf-v5-global--BackgroundColor--100: #ffffff;
--pf-v5-global--Color--100: #333333;
--pf-v5-global--danger-color--100: #a94543;
--pf-v5-global--FontFamily--sans-serif: Roboto, "Helvetica Neue", Arial, sans-serif;
--pf-v5-global--FontFamily--text: Roboto, "Helvetica Neue", Arial, sans-serif;
--pf-v5-global--FontFamily--heading--sans-serif: Roboto, "Helvetica Neue", Arial, sans-serif;
/* Width of the centered content column (body text, forms, footer).
* Wider than the 380px login form so longer titles/text don't wrap
* awkwardly; the login form keeps its own narrower cap below. */
--vitu-content-width: 480px;
}
html,
body,
.pf-v5-c-login,
.pf-v5-c-login__container,
.pf-v5-c-login__main,
.pf-v5-c-login__header,
.pf-v5-c-login__footer {
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
color: #333;
background: #fff !important;
}
/* Kill the stock v2 background image / gradient. */
.pf-v5-c-background-image,
.pf-v5-c-background-image::before,
.pf-v5-c-background-image::after {
background: none !important;
display: none !important;
}
/* ---- Page layout: logo top-left, centered form column -------------- *
* v2 wraps everything in `.pf-v5-c-login` -> `.pf-v5-c-login__container`
* -> `.pf-v5-c-login__header` + `.pf-v5-c-login__main` + footer. Turn
* the outer container into a plain vertical stack, repurpose the
* header as a Vitu logo strip at top-left, and center the main content
* below. */
/* Old theme's `.login-pf-page`: a full-height flex column with 36px 50px
* padding — logo pinned at the top, form vertically centered below it.
* The stock v2 `.pf-v5-c-login` centers everything with flex center/center,
* which pushes the logo down; override it to a top-aligned column. */
.pf-v5-c-login {
display: flex !important;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
min-height: 100vh;
padding: 36px 50px;
}
.pf-v5-c-login__container {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
grid-template-columns: none;
grid-template-areas: none;
}
/* Vitu wordmark, top-left of the page. */
.pf-v5-c-login__header {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 0 0 auto;
padding: 0;
margin: 0;
}
.pf-v5-c-login__header::before {
content: "";
display: block;
width: 99px;
height: 43px;
background: url("data:image/svg+xml,%3Csvg width='99' height='43' viewBox='0 0 99 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96.095 35.0791V12.8097C96.095 12.5381 95.868 12.3118 95.5955 12.3118H87.9201C87.6476 12.3118 87.4205 12.5381 87.4205 12.8097V20.0518V33.7212C87.4205 33.9023 87.2843 34.1286 87.1026 34.1739C85.0135 35.0339 83.6056 35.4412 82.1068 35.4412H80.2902C78.8823 35.4412 78.6098 35.1244 78.1556 34.6718C77.7469 34.1739 77.4289 33.4044 77.4289 31.956V12.8097C77.4289 12.5381 77.2019 12.3118 76.9294 12.3118H68.8453C68.5728 12.3118 68.3457 12.5381 68.3457 12.8097V32.997C68.3457 37.8854 68.8907 39.6054 70.2986 41.0086C71.5703 42.276 73.3415 42.9096 76.2935 42.9096H79.6089C82.4702 42.9096 83.0152 42.3212 86.603 39.1528C86.921 38.8812 87.4205 39.1075 87.4205 39.5149V42.3212C87.4205 42.5928 87.6476 42.8191 87.9201 42.8191H97.5938C97.8663 42.8191 98.0933 42.5928 98.0933 42.3212V36.0749C98.0933 35.8033 97.8663 35.577 97.5938 35.577H96.5946C96.3221 35.577 96.095 35.3507 96.095 35.0791Z' fill='%230A3F4D'/%3E%3Cpath d='M31.9676 12.3118H30.6959H26.0635C26.0181 12.3118 26.0181 12.3118 25.9726 12.3118H23.4293H23.3839H21.976C21.7035 12.3118 21.4764 12.5381 21.4764 12.8097L15.9811 33.4496L15.9357 33.5402H15.2544L15.209 33.4496L12.8474 24.5781L9.71363 12.8097C9.71363 12.5381 9.48655 12.3118 9.21405 12.3118H0.494126C0.130796 12.3118 -0.0962852 12.6739 0.0399635 12.9907L9.16863 40.6012C9.84988 42.3665 10.5311 42.7738 12.3478 42.7738H12.8474H18.2973H18.7969C20.6135 42.7738 21.2948 42.3665 21.976 40.6012L28.743 20.1876L28.8793 19.7802C28.9701 19.5539 29.1518 19.4181 29.3335 19.4181H29.833C30.1055 19.4181 30.2418 19.1918 30.3326 18.9202L32.4218 12.8549C32.5126 12.5381 32.2401 12.3118 31.9676 12.3118Z' fill='%230A3F4D'/%3E%3Cpath d='M31.6494 42.1854V35.9391C31.6494 35.6675 31.8765 35.4412 32.149 35.4412H35.8277C36.1002 35.4412 36.3273 35.2149 36.3273 34.9433V19.9612C36.3273 19.6897 36.1002 19.4633 35.8277 19.4633H32.8302C32.5577 19.4633 32.2398 19.237 32.3307 18.9654L34.4198 12.8097C34.5106 12.4928 34.7831 12.3118 35.0556 12.3118H45.0018C45.2743 12.3118 45.5014 12.5381 45.5014 12.8097V35.0338C45.5014 35.3054 45.7285 35.5317 46.001 35.5317H48.5443C48.8168 35.5317 49.0438 35.7581 49.0438 36.0296V42.1854C49.0438 42.457 48.8168 42.6833 48.5443 42.6833H32.149C31.8765 42.6833 31.6494 42.457 31.6494 42.1854Z' fill='%230A3F4D'/%3E%3Cpath d='M65.4849 35.5767H63.2595C61.7153 35.5767 60.9887 35.4409 60.7616 35.2146C60.3983 34.8525 60.262 34.3546 60.262 32.9062V19.9609C60.262 19.6894 60.4891 19.463 60.7616 19.463H65.8028C66.0753 19.463 66.3024 19.2367 66.3024 18.9651V12.8094C66.3024 12.5378 66.0753 12.3115 65.8028 12.3115H60.7616C60.4891 12.3115 60.262 12.0852 60.262 11.8136V8.50936C60.262 8.23778 60.0349 8.01148 59.7624 8.01148H51.6783C51.4058 8.01148 51.1788 8.23778 51.1788 8.50936V11.7683C51.1788 12.0399 50.9517 12.2662 50.6792 12.2662H48.7717H47.7271C47.4546 12.2662 47.2275 12.4925 47.2275 12.7641V18.9199C47.2275 19.1915 47.4546 19.4178 47.7271 19.4178H50.6792C50.9517 19.4178 51.1788 19.6441 51.1788 19.9157V35.1693C51.1788 38.5641 51.5875 40.103 52.7229 41.1893C53.9037 42.3662 55.4479 42.9999 58.627 42.9999C59.4899 42.9999 61.9424 42.5925 63.3957 42.2304L66.484 41.5062C66.7111 41.4609 66.8474 41.2346 66.8474 41.0083L66.0299 35.9841C65.9845 35.803 65.8028 35.5767 65.4849 35.5767Z' fill='%230A3F4D'/%3E%3Cpath d='M44.3209 0H37.463C36.8726 0 36.373 0.497892 36.373 1.08631V6.97052C36.373 7.55894 36.8726 8.05683 37.463 8.05683H44.3209C44.9113 8.05683 45.4109 7.55894 45.4109 6.97052V1.08631C45.3655 0.497892 44.9113 0 44.3209 0Z' fill='%2355C7E9'/%3E%3C/svg%3E%0A") left center no-repeat;
background-size: contain;
}
.pf-v5-c-login__header .pf-v5-c-brand,
.pf-v5-c-login__header #kc-header-wrapper {
display: none !important;
}
/* ---- Main content column ------------------------------------------- *
* Plain white column, no card chrome. Centered on the page. The heading
* gets a little extra width so the big "Welcome back" stays on one line,
* while the form itself stays narrow (~380px) like the old theme. */
.pf-v5-c-login__main {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.pf-v5-c-login__main-header {
width: 100%;
padding: 0 0 32px;
text-align: center;
background: transparent !important;
}
/* Content column: like the old theme, body/footer content lives in a
* centered column with side gutters — not stretched full-bleed across the
* page. `.pf-v5-c-login__main` itself stays full width so the big heading
* can center over the page. */
.pf-v5-c-login__main-body {
width: 100%;
max-width: var(--vitu-content-width);
margin-left: auto;
margin-right: auto;
padding: 0;
background: transparent !important;
}
.pf-v5-c-login__main-footer,
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-links {
width: 100%;
max-width: var(--vitu-content-width);
margin-left: auto;
margin-right: auto;
background: transparent !important;
padding: 0;
border: none !important;
}
/* Loose body text that isn't wrapped in a form (terms text, generic
* instructions) — center it within the content column instead of letting
* it run flush-left across the full width of the page. */
#kc-terms-text,
#kc-terms-text p {
text-align: center;
color: #333;
}
#kc-terms-text {
margin-bottom: 1.25rem;
}
/* Big teal centered heading (old: 72px / 88px, weight 300). */
.pf-v5-c-login__main-header-desc,
.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
font-weight: 300;
letter-spacing: -0.03em;
color: #013d4f;
font-size: 72px;
line-height: 1.1;
margin: 0;
text-align: center;
white-space: nowrap;
}
/* ---- Form controls ------------------------------------------------- *
* White inputs, 5px radius, faint gray border with a slightly darker
* bottom edge; cyan glow on focus. In PF5 `.pf-v5-c-form-control` is a
* wrapper element around the real , so style the wrapper and let
* the inner input be transparent. */
.pf-v5-c-form,
#kc-form,
#kc-form-login {
width: 100%;
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
.pf-v5-c-form__group {
margin-bottom: 1.25rem;
}
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
label {
color: #B5B5B5;
font-weight: 400;
font-size: 1.125rem;
line-height: 1.25rem;
margin-bottom: 6px;
}
.pf-v5-c-form-control,
input.pf-v5-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
--pf-v5-c-form-control--BackgroundColor: #ffffff;
--pf-v5-c-form-control--BorderColor: #D5D5D5;
--pf-v5-c-form-control--BorderTopColor: #D5D5D5;
--pf-v5-c-form-control--BorderRightColor: #D5D5D5;
--pf-v5-c-form-control--BorderLeftColor: #D5D5D5;
--pf-v5-c-form-control--BorderBottomColor: #D5D5D5;
--pf-v5-c-form-control--hover--BorderBottomColor: #D5D5D5;
--pf-v5-c-form-control--BorderRadius: 5px;
display: flex;
align-items: center;
background-color: #ffffff;
border: 1px solid #D5D5D5;
border-radius: 5px;
padding: 0.75rem 0.875rem;
height: auto;
min-height: 60px;
font-size: 1.125rem;
color: #333;
box-shadow: none;
}
/* Neutralize PF5's ::after underline accent so we control the border. */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
border: none !important;
box-shadow: none !important;
}
/* The real inside the PF5 form-control wrapper is transparent and
provides no sizing of its own (the wrapper handles padding/height). */
.pf-v5-c-form-control > input,
.pf-v5-c-form-control input {
flex: 1 1 auto;
align-self: stretch; /* fill the wrapper's height */
width: calc(100% + 1.75rem); /* 2 x 0.875rem horizontal padding */
box-sizing: border-box;
min-height: 0;
height: auto;
/* Pull the input out over the wrapper's padding, then re-apply that same
padding here so the text stays put but the input's own box (and thus
the browser's autofill background) fills the span's border. */
margin: -0.75rem -0.875rem;
padding: 0.75rem 0.875rem;
background-color: transparent;
border: none;
outline: none;
box-shadow: none;
font-size: 1.125rem;
color: #333;
}
/* Autofill: the UA paints the input's background (input:-internal-autofill-
selected) tight around the text and shrinks the text until the field is
focused. Painting a solid inset box-shadow lets us control that background
color and, now that the input fills the wrapper, it fills the border. The
long transition stops Chrome from animating its own color back in. */
.pf-v5-c-form-control > input:-webkit-autofill,
.pf-v5-c-form-control input:-webkit-autofill,
.pf-v5-c-form-control > input:-webkit-autofill:hover,
.pf-v5-c-form-control > input:-webkit-autofill:focus,
.pf-v5-c-form-control > input:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px rgb(232, 240, 254) inset !important;
box-shadow: 0 0 0 1000px rgb(232, 240, 254) inset !important;
-webkit-text-fill-color: #333 !important;
caret-color: #333;
font-size: 1.125rem !important; /* match normally-entered text */
transition: background-color 9999s ease-in-out 0s;
}
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
input.pf-v5-c-form-control:focus {
outline: none;
border-color: #21BAE7;
box-shadow: 0 0 3px 2px #bceaf8;
--pf-v5-c-form-control--BorderBottomColor: #21BAE7;
--pf-v5-c-form-control--focus--BorderBottomColor: #21BAE7;
}
/* Invalid state -> red border. */
.pf-v5-c-form-control[aria-invalid="true"],
.pf-v5-c-form-control.pf-m-error,
input[aria-invalid="true"] {
border-color: #a94543;
--pf-v5-c-form-control--BorderBottomColor: #a94543;
--pf-v5-c-form-control--BorderTopColor: #a94543;
--pf-v5-c-form-control--BorderLeftColor: #a94543;
--pf-v5-c-form-control--BorderRightColor: #a94543;
}
/* Password show/hide toggle: transparent button inside the input, gray. */
.pf-v5-c-input-group,
.pf-v5-c-form-control.pf-m-icon {
position: relative;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control,
.pf-v5-c-form-control > button,
button[aria-label="Show password"],
button[aria-label="Hide password"] {
position: absolute;
top: 0;
right: 0;
height: 100%;
min-height: 60px;
width: 42px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none !important;
background: transparent !important;
color: #999;
box-shadow: none !important;
cursor: pointer;
z-index: 2;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::before,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
border: none !important;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-form-control > button:hover {
color: rgba(0, 0, 0, 0.5);
}
/* ---- Sign In button: full-width cyan (old: 18px/30px, 5px radius) --- */
#kc-form-buttons {
margin-top: 1.25rem;
width: 100%;
}
#kc-form-buttons .pf-v5-c-button,
.pf-v5-c-button.pf-m-primary.pf-m-block,
input.pf-v5-c-button.pf-m-primary[type="submit"],
button.pf-v5-c-button.pf-m-primary[type="submit"] {
--pf-v5-c-button--m-primary--BackgroundColor: #21BAE7;
--pf-v5-c-button--m-primary--hover--BackgroundColor: #2787a4;
--pf-v5-c-button--m-primary--focus--BackgroundColor: #2787a4;
--pf-v5-c-button--m-primary--active--BackgroundColor: #2787a4;
width: 100%;
padding: 1.25rem;
background-color: #21BAE7;
color: #fff;
font: 18px/30px Roboto, sans-serif;
border-radius: 5px;
border: none;
cursor: pointer;
}
#kc-form-buttons .pf-v5-c-button::before,
#kc-form-buttons .pf-v5-c-button::after {
border: none !important;
}
#kc-form-buttons .pf-v5-c-button:hover,
#kc-form-buttons .pf-v5-c-button:focus,
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
background-color: #2787a4;
color: #fff;
}
/* ---- Links: gray, underlined (old --anchor-gray) ------------------- */
a {
color: #B5B5B5;
text-decoration: underline;
text-decoration-color: #B5B5B5;
cursor: pointer;
}
a:hover,
a:focus {
color: rgba(0, 0, 0, 0.5);
text-decoration-color: rgba(0, 0, 0, 0.5);
}
#kc-form-options a,
#kc-info a,
.login-pf-page a.link {
color: #B5B5B5;
text-decoration: underline;
font-size: 15px;
}
#kc-form-options a:hover,
#kc-info a:hover {
color: rgba(0, 0, 0, 0.5);
}
#kc-form-options {
margin-top: 8px;
}
/* "Forgot?" link pinned to the right of the password field (old theme's
* `.form-action_right--forgot`). On the login form the only helper-text is
* the forgot link, so scope to #kc-form-login and anchor it in the empty
* space to the right of the 380px field, vertically centered on it. */
#kc-form-login .pf-v5-c-form__group {
position: relative;
}
#kc-form-login .pf-v5-c-form__helper-text {
position: absolute;
top: 28px; /* field's offset within its group */
left: 100%;
margin-left: 16px;
height: 60px; /* match the field height, so it centers on it */
display: flex;
align-items: center;
padding: 0;
white-space: nowrap;
}
#kc-form-login .pf-v5-c-form__helper-text .pf-v5-c-helper-text__item,
#kc-form-login .pf-v5-c-form__helper-text .pf-v5-c-helper-text__item-text {
color: #B5B5B5;
padding: 0;
margin: 0;
}
#kc-form-login .pf-v5-c-form__helper-text a {
color: #B5B5B5;
text-decoration: underline;
font-size: 15px;
}
#kc-form-login .pf-v5-c-form__helper-text a:hover {
color: rgba(0, 0, 0, 0.5);
}
/* ---- Identity providers: outlined secondary buttons ---------------- *
* The old theme rendered IdP/social buttons as bordered, 5px-radius
* secondary buttons (transparent, cyan-on-hover). Reproduce that rather
* than an "Or sign in with" ruled divider. */
#kc-social-providers {
margin-top: 1.5rem;
width: 100%;
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
#kc-social-providers > h2,
#kc-social-providers > h4,
.kc-social-section-header {
text-align: center;
color: #B5B5B5;
font: 500 13px/15px Roboto;
text-transform: uppercase;
margin: 0 0 1rem;
}
#kc-social-providers ul,
#kc-social-providers .pf-v5-l-stack {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
#kc-social-providers li,
#kc-social-providers .pf-v5-l-stack__item {
width: 100%;
}
#kc-social-providers a,
#kc-social-providers .pf-v5-c-button {
--pf-v5-c-button--m-secondary--BorderRadius: 5px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.75rem 1.25rem;
border: 2px solid #D5D5D5;
border-radius: 5px;
background: transparent;
color: #333;
text-decoration: none;
font-size: 16px;
line-height: 19px;
transition: 0.2s;
}
#kc-social-providers a::before,
#kc-social-providers a::after,
#kc-social-providers .pf-v5-c-button::before,
#kc-social-providers .pf-v5-c-button::after {
border: none !important;
}
#kc-social-providers a:hover,
#kc-social-providers .pf-v5-c-button:hover {
background: #21BAE7;
border-color: #21BAE7;
color: #fff;
}
#kc-social-providers a span,
#kc-social-providers .pf-v5-c-button span {
text-decoration: none;
color: inherit;
}
/* Hide the identity provider's icon (e.g. the oversized broker SVG on the
"Vitu Identity Provider" button) — show the label only. */
#kc-social-providers a svg,
#kc-social-providers a img,
#kc-social-providers a i,
#kc-social-providers .pf-v5-c-button svg,
#kc-social-providers .pf-v5-c-button img,
#kc-social-providers .pf-v5-c-button i {
display: none !important;
}
/* ---- Info / reset-password / footer -------------------------------- */
#kc-reset-password-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
}
#kc-info,
#kc-info-message {
text-align: center;
color: #666;
font-size: 15px;
line-height: 20px;
margin-top: 1.25rem;
}
#kc-info-message p,
#kc-info p {
margin-bottom: 15px;
}
#footer,
#kc-footer {
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 43px;
font: 15px/20px Roboto;
color: #B5B5B5;
}
/* ---- Alerts (old rounded, thin-border style) ----------------------- */
.pf-v5-c-alert {
border-radius: 5px;
margin-bottom: 20px;
border-width: 1px;
border-style: solid;
}
.pf-v5-c-alert.pf-m-danger {
--pf-v5-c-alert--m-danger--BorderTopColor: #a94543;
border-color: #ebccd1;
}
.pf-v5-c-alert.pf-m-warning {
--pf-v5-c-alert--BorderTopColor: var(--pf-v5-global--Color--dark-100);
}
.pf-v5-c-alert__title {
font: 15px/20px Roboto;
}
/* ---- Small screens -------------------------------------------------- *
* The 72px single-line heading and the right-anchored "Forgot?" link
* both need room to the sides. On narrow viewports, let the heading
* shrink and wrap, and drop "Forgot?" back to its normal spot under the
* password field. */
@media (max-width: 560px) {
.pf-v5-c-login {
padding: 24px 20px;
}
.pf-v5-c-login__main-header-desc,
.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
font-size: 44px;
line-height: 1.1;
white-space: normal;
}
#kc-form-login .pf-v5-c-form__helper-text {
position: static;
display: block;
height: auto;
margin-left: 0;
margin-top: 6px;
padding: 0;
}
}