/* custom stylesheet for the 'restos' keycloak account theme */ /* ============================================================ */ /* ROOT VARIABLES - ALL GLOBAL DEFINITIONS (MERGED & CORRECTED) */ /* ============================================================ */ /* AJOUT - Cache sur éléments non nécessaires */ /* Header Account */ .pf-m-overflow-menu { display: none; } /* Masquer Selecteur de langue - Onglet 'Informations personnelles' */ .pf-v5-c-form__group:has(#attributes\.locale) { display: none; } /* ============================================================ */ /* USER ACCOUNT - Main navigation */ /* ============================================================ */ .pf-v5-c-nav { --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav--m-light__item--before--BorderColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300); --pf-v5-c-nav--m-light__link--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-nav--m-light__link--active--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300); --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300); --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300); --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300); --pf-v5-c-nav--m-light__link--before--BorderColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-nav--m-light__link--after--BorderColor: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-light__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-light__section-title--Color: var(--pf-v5-global--Color--dark-200); --pf-v5-c-nav--m-light__section-title--BorderBottomColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-nav--m-light--c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100); --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100); --pf-v5-c-nav--m-light__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100); --pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100); --pf-v5-c-nav__list--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__list--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__item--MarginTop: 0; --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400); --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-v5-global--spacer--xl); --pf-v5-c-nav__item__item__toggle--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-nav__item__toggle-icon--Rotate: 0; --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg; --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__item--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav--Transition: var(--pf-v5-global--Transition); --pf-v5-c-nav__link--FontSize: var(--pf-v5-global--FontSize--md); --pf-v5-c-nav__link--FontWeight: var(--pf-v5-global--FontWeight--normal); --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__link--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav__link--focus--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav__link--active--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav__link--hover--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav__link--BackgroundColor: transparent; --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400); --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0; --pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0; --pf-v5-c-nav__link--active--before--BorderBottomWidth: 0; --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: 0; --pf-v5-c-nav__link--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__link--focus--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__link--after--BorderLeftWidth: 0; --pf-v5-c-nav__link--hover--after--BorderLeftWidth: 0; --pf-v5-c-nav__link--focus--after--BorderLeftWidth: 0; --pf-v5-c-nav__link--active--after--BorderLeftWidth: 0; --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-nav--m-horizontal__link--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--m-horizontal__link--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal__link--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--m-horizontal__link--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal__link--lg--PaddingTop: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--m-horizontal__link--lg--PaddingBottom: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--m-horizontal__link--Right: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal__link--Left: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-200); --pf-v5-c-nav--m-horizontal__link--hover--Color: var(--pf-v5-global--active-color--400); --pf-v5-c-nav--m-horizontal__link--focus--Color: var(--pf-v5-global--active-color--400); --pf-v5-c-nav--m-horizontal__link--active--Color: var(--pf-v5-global--active-color--400); --pf-v5-c-nav--m-horizontal__link--m-current--Color: var(--pf-v5-global--active-color--400); --pf-v5-c-nav--m-horizontal__link--BackgroundColor: transparent; --pf-v5-c-nav--m-horizontal__link--hover--BackgroundColor: transparent; --pf-v5-c-nav--m-horizontal__link--focus--BackgroundColor: transparent; --pf-v5-c-nav--m-horizontal__link--active--BackgroundColor: transparent; --pf-v5-c-nav--m-horizontal__link--m-current--BackgroundColor: transparent; --pf-v5-c-nav--m-horizontal__link--before--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav--m-horizontal__link--before--BorderWidth: 0; --pf-v5-c-nav--m-horizontal__link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-horizontal__link--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-horizontal__link--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-horizontal__link--m-current--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-tertiary__link--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--m-tertiary__link--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-tertiary__link--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--m-tertiary__link--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-tertiary__link--Right: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-tertiary__link--Left: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-tertiary__link--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-nav--m-tertiary__link--hover--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__link--focus--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__link--active--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__link--m-current--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__link--BackgroundColor: transparent; --pf-v5-c-nav--m-tertiary__link--hover--BackgroundColor: transparent; --pf-v5-c-nav--m-tertiary__link--focus--BackgroundColor: transparent; --pf-v5-c-nav--m-tertiary__link--active--BackgroundColor: transparent; --pf-v5-c-nav--m-tertiary__link--m-current--BackgroundColor: transparent; --pf-v5-c-nav--m-tertiary__link--before--BorderColor: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__link--before--BorderWidth: 0; --pf-v5-c-nav--m-tertiary__link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-tertiary__link--focus--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-tertiary__link--active--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-tertiary__link--m-current--before--BorderWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--m-tertiary__scroll-button--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-nav--m-tertiary__scroll-button--hover--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__scroll-button--focus--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__scroll-button--active--Color: var(--pf-v5-global--active-color--100); --pf-v5-c-nav--m-tertiary__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--200); --pf-v5-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor: var(--pf-v5-global--disabled-color--300); --pf-v5-c-nav--m-horizontal-subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--m-horizontal-subnav__link--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal-subnav__link--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--m-horizontal-subnav__link--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--m-horizontal-subnav__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--m-horizontal-subnav__link--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-nav--m-horizontal-subnav__link--Color: var(--pf-v5-global--Color--light-200); --pf-v5-c-nav--m-horizontal-subnav__link--hover--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--m-horizontal-subnav__link--focus--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--m-horizontal-subnav__link--active--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--m-horizontal-subnav__link--m-current--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--m-horizontal-subnav__link--BackgroundColor: transparent; --pf-v5-c-nav--m-horizontal-subnav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav--m-horizontal-subnav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav--m-horizontal-subnav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400); --pf-v5-c-nav--m-horizontal-subnav__link--before--BorderColor: transparent; --pf-v5-c-nav--m-horizontal-subnav__link--after--BorderColor: var(--pf-v5-global--palette--black-800); --pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderColor: var(--pf-v5-global--palette--black-800); --pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderColor: var(--pf-v5-global--palette--black-800); --pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor: var(--pf-v5-global--palette--black-800); --pf-v5-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__link--OutlineOffset: calc(var(--pf-v5-global--spacer--xs)*-1); --pf-v5-c-nav__subnav--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__subnav__link--MarginTop: 0; --pf-v5-c-nav__subnav__link--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__subnav__link--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__subnav__link--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__subnav__link--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__subnav__link--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-nav__subnav--xl--PaddingLeft: var(--pf-v5-c-nav__link--PaddingLeft); --pf-v5-c-nav__subnav__link--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__subnav__link--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__subnav__link--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-nav__subnav--MaxHeight: 0; --pf-v5-c-nav__subnav__subnav--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__subnav__subnav__link--FontSize: var(--pf-v5-global--FontSize--xs); --pf-v5-c-nav__item--m-expanded__subnav--MaxHeight: 100%; --pf-v5-c-nav__subnav--c-divider--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__subnav--c-divider--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__section--first-child--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section__item--MarginTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section__link--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__section__link--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section__link--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__section__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__section__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__section__link--FontSize: var(--pf-v5-global--FontSize--md); --pf-v5-c-nav__section__link--before--BorderBottomWidth: 0; --pf-v5-c-nav__section__link--hover--after--BorderColor: transparent; --pf-v5-c-nav__section__link--focus--after--BorderColor: transparent; --pf-v5-c-nav__section__link--active--after--BorderColor: transparent; --pf-v5-c-nav__section__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__section__link--hover--after--BorderWidth: 0; --pf-v5-c-nav__section__link--focus--after--BorderWidth: 0; --pf-v5-c-nav__section__link--active--after--BorderWidth: 0; --pf-v5-c-nav__section__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--xl); --pf-v5-c-nav__section-title--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-nav__section-title--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__section-title--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__scroll-button--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__scroll-button--focus--Color: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__scroll-button--active--Color: var(--pf-v5-global--active-color--400); --pf-v5-c-nav__scroll-button--disabled--Color: var(--pf-v5-global--disabled-color--100); --pf-v5-c-nav__scroll-button--BackgroundColor: transparent; --pf-v5-c-nav__scroll-button--Width: var(--pf-v5-global--target-size--MinWidth); --pf-v5-c-nav__scroll-button--OutlineOffset: calc(-1*var(--pf-v5-global--spacer--xs)); --pf-v5-c-nav__scroll-button--Transition: margin .125s,transform .125s,opacity .125s; --pf-v5-c-nav__scroll-button--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__scroll-button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__scroll-button--before--BorderRightWidth: 0; --pf-v5-c-nav__scroll-button--before--BorderLeftWidth: 0; --pf-v5-c-nav__scroll-button--disabled--before--BorderColor: transparent; --pf-v5-c-nav__toggle--PaddingRight: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__toggle--PaddingLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__toggle--FontSize: var(--pf-v5-global--icon--FontSize--md); --pf-v5-c-nav__toggle-icon--Transition: var(--pf-v5-global--TransitionDuration); --pf-v5-c-nav--c-divider--MarginTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--c-divider--MarginBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--c-divider--PaddingRight: 0; --pf-v5-c-nav--c-divider--PaddingLeft: 0; --pf-v5-c-nav--c-divider--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__list--ScrollSnapTypeAxis: x; --pf-v5-c-nav__list--ScrollSnapTypeStrictness: proximity; --pf-v5-c-nav__list--ScrollSnapType: var(--pf-v5-c-nav__list--ScrollSnapTypeAxis)var(--pf-v5-c-nav__list--ScrollSnapTypeStrictness); --pf-v5-c-nav__item--ScrollSnapAlign: end; --pf-v5-c-nav__item--m-flyout--c-menu--top-offset: 0px; --pf-v5-c-nav__item--m-flyout--c-menu--left-offset: .25rem; --pf-v5-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px; --pf-v5-c-nav__item--m-flyout--c-menu--m-left--right-offset: .25rem; --pf-v5-c-nav__item--m-flyout--MarginTop: 0; --pf-v5-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0; --pf-v5-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0; --pf-v5-c-nav__item--m-flyout--active__link--before--BorderWidth: 0; --pf-v5-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0; --pf-v5-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-v5-c-nav__item--m-flyout--c-menu--top-offset)); --pf-v5-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-v5-c-nav__item--m-flyout--c-menu--Top) - var(--pf-v5-c-nav__item--before--BorderWidth)); --pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0; --pf-v5-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-v5-c-nav__item--m-flyout--c-menu--left-offset)); --pf-v5-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-v5-c-nav__item--m-flyout--c-menu--m-left--right-offset)); --pf-v5-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-v5-c-nav__item--m-flyout--c-menu--m-top--bottom-offset)); --pf-v5-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300); --pf-v5-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-v5-c-nav__link--Color); --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-v5-global--Color--light-200); --pf-v5-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-v5-c-nav__link--OutlineOffset); --pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth: var(--pf-v5-c-nav__item--before--BorderWidth); --pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-v5-c-nav__item--before--BorderColor); --pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1*var(--pf-v5-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth)); --pf-v5-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-v5-c-nav__link--hover--BackgroundColor); --pf-v5-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-c-nav__link--focus--BackgroundColor); --pf-v5-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-v5-c-nav__link--active--BackgroundColor); --pf-v5-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0; --pf-v5-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-v5-global--BoxShadow--lg); --pf-v5-c-nav--c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300); --pf-v5-c-nav--c-menu__list--PaddingTop: 0; --pf-v5-c-nav--c-menu__list--PaddingBottom: 0; --pf-v5-c-nav--c-menu__list-item--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--c-menu__list-item--hover--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--c-menu__list-item--active--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--c-menu__list-item--focus-within--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--lg); --pf-v5-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-v5-global--FontWeight--bold); --pf-v5-c-nav--c-menu__item--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--c-menu__item--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--c-menu__item--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--c-menu__item--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-nav--c-menu__item--xl--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--c-menu__item--xl--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--c-menu__item--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-nav--c-menu__item--OutlineOffset: calc(var(--pf-v5-global--spacer--xs)*-1); --pf-v5-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav--c-menu__item--before--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200); --pf-v5-c-nav--c-menu__item--after--BorderLeftWidth: 0; --pf-v5-c-nav--c-menu__item--after--BorderLeftColor: transparent; --pf-v5-c-nav--c-menu__item--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400); --pf-v5-c-nav--c-menu__item--m-current--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--xl); --pf-v5-c-nav--c-menu__item--m-current--after--BorderColor: var(--pf-v5-global--active-color--400); --pf-v5-c-nav--c-menu__item-description--Color: var(--pf-v5-global--Color--400); --pf-v5-c-nav--c-menu--m-flyout--left-offset: .25rem; --pf-v5-c-nav--c-menu--m-flyout--m-left--right-offset: .25rem; --pf-v5-c-nav--c-menu--m-flyout--Top: 0; --pf-v5-c-nav--c-menu--m-flyout--c-menu--Top: calc(var(--pf-v5-c-nav--c-menu--m-flyout--Top)*-1); --pf-v5-c-nav--c-menu--m-flyout--c-menu--Right: auto; --pf-v5-c-nav--c-menu--m-flyout--c-menu--Bottom: auto; --pf-v5-c-nav--c-menu--m-flyout--c-menu--Left: calc(100% - var(--pf-v5-c-nav--c-menu--m-flyout--left-offset)); --pf-v5-c-nav--c-menu--m-flyout--m-left--Right: calc(100% - var(--pf-v5-c-nav--c-menu--m-flyout--m-left--right-offset)); --pf-v5-c-nav--c-menu--m-flyout--m-top--Bottom: 0; --pf-v5-c-nav--c-menu--m-flyout--BoxShadow: var(--pf-v5-global--BoxShadow--lg); --pf-v5-c-nav--c-menu--m-flyout__item--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--c-menu--m-flyout__item--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--c-menu--m-flyout__item--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-nav--c-menu--m-flyout__item--PaddingLeft: var(--pf-v5-global--spacer--lg); --pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-nav__toggle--m-start--MarginRight: var(--pf-v5-global--spacer--sm); } .pf-v5-c-nav__subnav { --pf-v5-c-nav__list--PaddingTop: 0; --pf-v5-c-nav__list--PaddingBottom: 0; --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-c-nav__subnav__link--PaddingTop); --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-c-nav__subnav__link--PaddingRight); --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-c-nav__subnav__link--PaddingBottom); --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-c-nav__subnav__link--PaddingLeft); --pf-v5-c-nav__link--FontSize: var(--pf-v5-c-nav__subnav__link--FontSize); --pf-v5-c-nav__link--hover--after--BorderColor: var(--pf-v5-c-nav__subnav__link--hover--after--BorderColor); --pf-v5-c-nav__link--focus--after--BorderColor: var(--pf-v5-c-nav__subnav__link--focus--after--BorderColor); --pf-v5-c-nav__link--active--after--BorderColor: var(--pf-v5-c-nav__subnav__link--active--after--BorderColor); --pf-v5-c-nav__link--m-current--after--BorderColor: var(--pf-v5-c-nav__subnav__link--m-current--after--BorderColor); --pf-v5-c-nav__link--hover--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--hover--after--BorderWidth); --pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--focus--after--BorderWidth); --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--active--after--BorderWidth); --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__subnav__link--m-current--after--BorderWidth); --pf-v5-c-nav--c-divider--PaddingRight: var(--pf-v5-c-nav__subnav--c-divider--PaddingRight); --pf-v5-c-nav--c-divider--PaddingLeft: var(--pf-v5-c-nav__subnav--c-divider--PaddingLeft); } .pf-v5-c-nav__link.pf-m-current { color: var(--pf-v5-c-nav__link--m-current--Color); background-color: var(--pf-v5-c-nav__link--m-current--BackgroundColor); } .pf-v5-c-nav__link.pf-m-current::after, .pf-v5-c-nav__link.pf-m-current:hover::after, .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::after { border-color: var(--pf-v5-c-nav__link--m-current--after--BorderColor); border-inline-start-width: var(--pf-v5-c-nav__link--m-current--after--BorderLeftWidth); } /* Classe .kc-logo-text déclaré dans interface Keycloak dans Realm Settings */ div.kc-logo-text { background-image: var(--keycloak-logo-url); height: var(--keycloak-logo-height); width: var(--keycloak-logo-width); background-repeat: no-repeat; background-size: contain; margin: 0 auto; } :where(:root) { --keycloak-logo-url: var(--keycloak-logo-url); --keycloak-bg-logo-url: none !important; --keycloak-card-top-color: var(--pf-v5-global--palette--blue-400); --pf-v5-global--palette--black-100: #fafafa; --pf-v5-global--palette--black-150: #f5f5f5; --pf-v5-global--palette--black-200: #f0f0f0; --pf-v5-global--palette--black-300: #d2d2d2; --pf-v5-global--palette--black-400: #b8bbbe; --pf-v5-global--palette--black-500: #8a8d90; --pf-v5-global--palette--black-600: #6a6e73; --pf-v5-global--palette--black-700: #4f5255; --pf-v5-global--palette--black-800: #3c3f42; --pf-v5-global--palette--black-850: #212427; --pf-v5-global--palette--black-900: #151515; --pf-v5-global--palette--black-1000: #030303; --pf-v5-global--palette--blue-200: #73bcf7; --pf-v5-global--palette--blue-50: #e7f1fa; --pf-v5-global--palette--blue-100: #bee1f4; --pf-v5-global--palette--blue-400: #06c; --pf-v5-global--palette--blue-300: #2b9af3; --pf-v5-global--palette--cyan-50: #f2f9f9; --pf-v5-global--palette--blue-500: #004080; --pf-v5-global--palette--blue-600: #002952; --pf-v5-global--palette--blue-700: #001223; --pf-v5-global--palette--cyan-100: #a2d9d9; --pf-v5-global--palette--cyan-200: #73c5c5; --pf-v5-global--palette--cyan-300: #009596; --pf-v5-global--palette--cyan-400: #005f60; --pf-v5-global--palette--cyan-500: #003737; --pf-v5-global--palette--cyan-600: #002323; --pf-v5-global--palette--cyan-700: #000f0f; --pf-v5-global--palette--gold-300: #f4c145; --pf-v5-global--palette--gold-50: #fdf7e7; --pf-v5-global--palette--gold-100: #f9e0a2; --pf-v5-global--palette--gold-200: #f6d173; --pf-v5-global--palette--gold-500: #c58c00; --pf-v5-global--palette--gold-400: #f0ab00; --pf-v5-global--palette--gold-700: #3d2c00; --pf-v5-global--palette--gold-600: #795600; --pf-v5-global--palette--green-300: #6ec664; --pf-v5-global--palette--green-50: #f3faf2; --pf-v5-global--palette--green-100: #bde5b8; --pf-v5-global--palette--green-200: #95d58e; --pf-v5-global--palette--light-blue-200: #7cdbf3; --pf-v5-global--palette--green-400: #5ba352; --pf-v5-global--palette--green-500: #3e8635; --pf-v5-global--palette--green-600: #1e4f18; --pf-v5-global--palette--green-700: #0f280d; --pf-v5-global--palette--light-blue-100: #beedf9; --pf-v5-global--palette--light-blue-300: #35caed; --pf-v5-global--palette--light-blue-600: #005c73; --pf-v5-global--palette--light-blue-400: #00b9e4; --pf-v5-global--palette--light-blue-500: #008bad; --pf-v5-global--palette--light-green-100: #e4f5bc; --pf-v5-global--palette--light-blue-700: #002d39; --pf-v5-global--palette--light-green-200: #c8eb79; --pf-v5-global--palette--light-green-300: #ace12e; --pf-v5-global--palette--light-green-500: #6ca100; --pf-v5-global--palette--light-green-400: #92d400; --pf-v5-global--palette--orange-50: #fff6ec; --pf-v5-global--palette--light-green-600: #486b00; --pf-v5-global--palette--light-green-700: #253600; --pf-v5-global--palette--orange-300: #ec7a08; --pf-v5-global--palette--orange-100: #f4b678; --pf-v5-global--palette--orange-200: #ef9234; --pf-v5-global--palette--orange-400: #c46100; --pf-v5-global--palette--purple-50: #f2f0fc; --pf-v5-global--palette--orange-500: #8f4700; --pf-v5-global--palette--orange-600: #773d00; --pf-v5-global--palette--orange-700: #3b1f00; --pf-v5-global--palette--purple-100: #cbc1ff; --pf-v5-global--palette--purple-500: #6753ac; --pf-v5-global--palette--purple-200: #b2a3ff; --pf-v5-global--palette--purple-300: #a18fff; --pf-v5-global--palette--purple-400: #8476d1; --pf-v5-global--palette--red-100: #c9190b; --pf-v5-global--palette--purple-600: #40199a; --pf-v5-global--palette--purple-700: #1f0066; --pf-v5-global--palette--red-50: #faeae8; --pf-v5-global--palette--red-500: #2c0000; --pf-v5-global--palette--red-200: #a30000; --pf-v5-global--palette--red-300: #7d1007; --pf-v5-global--palette--red-400: #470000; --pf-v5-global--BackgroundColor--100: #fff; --pf-v5-global--palette--white: #fff; --pf-v5-global--BackgroundColor--150: #fafafa; --pf-v5-global--BackgroundColor--200: #f0f0f0; --pf-v5-global--BackgroundColor--light-100: #fff; --pf-v5-global--BackgroundColor--light-200: #fafafa; --pf-v5-global--BackgroundColor--light-300: #f0f0f0; --pf-v5-global--BackgroundColor--dark-100: #151515; --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(3, 3, 3, 0.62); --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(3, 3, 3, 0.32); --pf-v5-global--primary-color--200: #a8015d; --pf-v5-global--primary-color--100: #e6007e; --pf-v5-global--primary-color--light-100: #73bcf7; --pf-v5-global--primary-color--dark-100: #e6007f; --pf-v5-global--Color--200: #6a6e73; --pf-v5-global--Color--300: #3c3f42; --pf-v5-global--Color--400: #8a8d90; --pf-v5-global--Color--light-200: #f0f0f0; --pf-v5-global--Color--light-300: #d2d2d2; --pf-v5-global--Color--dark-100: #151515; --pf-v5-global--Color--dark-200: #6a6e73; --pf-v5-global--active-color--100: #f03096; /* Hover select component border bottom color - Default value : #06c */ --pf-v5-global--active-color--200: #bee1f4; --pf-v5-global--active-color--300: #f03096; --pf-v5-global--active-color--400: #f6319d; /* Current menu color */ --pf-v5-global--secondary-color--100: #6a6e73; --pf-v5-global--custom-color--100: #73c5c5; --pf-v5-global--custom-color--200: #009596; --pf-v5-global--custom-color--300: #003737; --pf-v5-global--success-color--100: #3e8635; --pf-v5-global--success-color--200: #1e4f18; --pf-v5-global--info-color--100: #2b9af3; --pf-v5-global--info-color--200: #002952; --pf-v5-global--warning-color--100: #f0ab00; --pf-v5-global--warning-color--200: #795600; --pf-v5-global--danger-color--100: #c9190b; --pf-v5-global--danger-color--200: #a30000; --pf-v5-global--danger-color--300: #470000; --pf-v5-global--disabled-color--100: #6a6e73; --pf-v5-global--disabled-color--200: #d2d2d2; --pf-v5-global--disabled-color--300: #f0f0f0; --pf-v5-global--link--Color--hover: #a8015d; --pf-v5-global--link--Color--light: #2b9af3; --pf-v5-global--link--Color--light--hover: #73bcf7; --pf-v5-global--link--Color--dark: #06c; --pf-v5-global--link--Color--dark--hover: #004080; --pf-v5-global--link--Color--visited: #40199a; --pf-v5-global--link--TextDecoration--hover: underline; --pf-v5-global--BorderColor--100: #d2d2d2; --pf-v5-global--BorderColor--200: #8a8d90; --pf-v5-global--BorderColor--300: #f0f0f0; --pf-v5-global--BorderColor--dark-100: #d2d2d2; --pf-v5-global--BorderColor--light-100: #b8bbbe; --pf-v5-global--icon--Color--light: #6a6e73; --pf-v5-global--icon--Color--dark: #151515; --pf-v5-global--icon--Color--light--light: #f0f0f0; --pf-v5-global--BorderWidth--sm: 1px; --pf-v5-global--BorderWidth--md: 2px; --pf-v5-global--BorderWidth--lg: 3px; --pf-v5-global--BorderWidth--xl: 4px; --pf-v5-global--icon--Color--dark--light: #fff; --pf-v5-global--icon--Color--light--dark: #6a6e73; --pf-v5-global--icon--Color--dark--dark: #151515; --pf-v5-global--icon--FontSize--sm: 0.75rem; --pf-v5-global--icon--FontSize--md: 1rem; --pf-v5-global--BorderRadius--sm: 6px; --pf-v5-global--BorderRadius--lg: 30em; --pf-v5-global--icon--FontSize--lg: 1.5rem; --pf-v5-global--icon--FontSize--xl: 3.375rem; --pf-v5-global--FontFamily--heading: "Inter", helvetica, arial, sans-serif; --pf-v5-global--FontFamily--monospace: "IBM Plex Mono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace; --pf-v5-global--FontFamily--text--vf: "Inter var", "Inter", helvetica, arial, sans-serif; --pf-v5-global--FontFamily--heading--vf: "Inter var", "Inter", helvetica, arial, sans-serif; --pf-v5-global--FontFamily--monospace--vf: "IBM Plex Mono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace; --pf-v5-global--spacer--lg: 1.5rem; /* SPACING - Default value 2.5rem*/ --pf-v5-global--spacer--xl: 3rem; --pf-v5-global--spacer--2xl: 3rem; --pf-v5-global--spacer--3xl: 4rem; --pf-v5-global--spacer--4xl: 5rem; --pf-v5-global--spacer--form-element: 0.875rem; --pf-v5-global--ListStyle: disc outside; --pf-v5-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1); --pf-v5-global--fonticon-path: "./assets/pficon"; --pf-v5-global--FontSize--3xl: 1.75rem; --pf-v5-global--FontSize--2xl: 1.5rem; --pf-v5-global--FontSize--xl: 1.25rem; --pf-v5-global--FontSize--lg: 1.125rem; --keycloak-logo-url: url(../img/keycloak-logo-text.svg); --pf-v5-global--FontSize--sm: 0.875rem; --pf-v5-global--FontSize--xs: 0.75rem; --pf-v5-global--BackgroundColor--dark-200: #323537; /* Sidebar item border + Menu item hover state - Default value - #3c3f42 */ --pf-v5-global--FontWeight--bold: 600; --pf-v5-global--LineHeight--sm: 1.3; --pf-v5-global--BackgroundColor--dark-300: #212427; /* Sidebar section - Default value - #212427 */ --pf-v5-global--BackgroundColor--dark-400: #323537; /* Sidebar current Menu item background - Default value - #4f5255 */ --pf-v5-global--Color--100: #151515; --pf-v5-global--Color--light-100: #fff; --pf-v5-global--link--Color: #e6007e; --pf-v5-global--link--TextDecoration: none; --pf-v5-global--FontFamily--text: "Inter", helvetica, arial, sans-serif; --pf-v5-global--FontSize--md: 0.875rem; --pf-v5-global--FontWeight--normal: 400; --pf-v5-global--LineHeight--md: 1.2; --pf-v5-global--gutter: 1rem; --pf-v5-global--gutter--md: 1.5rem; --pf-v5-global--ZIndex--xs: 100; --pf-v5-global--spacer--xs: 0.25rem; --pf-v5-global--ZIndex--md: 300; --pf-v5-global--ZIndex--lg: 400; --pf-v5-global--ZIndex--xl: 500; --pf-v5-global--ZIndex--2xl: 600; --pf-v5-global--breakpoint--xs: 0; --pf-v5-global--breakpoint--sm: 576px; --pf-v5-global--breakpoint--md: 768px; --pf-v5-global--breakpoint--lg: 992px; --pf-v5-global--breakpoint--xl: 1200px; --pf-v5-global--breakpoint--2xl: 1450px; --pf-v5-global--height-breakpoint--sm: 0; --pf-v5-global--height-breakpoint--md: 40rem; --pf-v5-global--height-breakpoint--lg: 48rem; --pf-v5-global--height-breakpoint--xl: 60rem; --pf-v5-global--height-breakpoint--2xl: 80rem; --pf-v5-global--spacer--sm: 0.5rem; --pf-v5-global--spacer--md: 1rem; --pf-v5-global--ZIndex--sm: 200; --pf-v5-global--TransitionDuration: 250ms; --pf-v5-global--arrow--width: 0.9375rem; --pf-v5-global--arrow--width-lg: 1.5625rem; --pf-v5-global--target-size--MinWidth: 44px; --pf-v5-global--target-size--MinHeight: 44px; --pf-v5-global--inverse--multiplier: 1; --pf-v5-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06); --pf-v5-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16); --pf-v5-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16); --pf-v5-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16); --pf-v5-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16); --pf-v5-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(143, 255, 31, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06); --pf-v5-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18); --pf-v5-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18); --pf-v5-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18); --pf-v5-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18); --pf-v5-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08); --pf-v5-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18); --pf-v5-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1); --pf-v5-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18); --pf-v5-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18); --pf-v5-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1); --pf-v5-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.2); --pf-v5-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2); --pf-v5-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.2); --pf-v5-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2); --pf-v5-global--BoxShadow--inset: inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25); --pf-v5-global--font-path: "./assets/fonts"; --pf-v5-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18); } /* ============================================================ */ /* DARK THEME COLORS - Override root variables for dark mode */ /* ============================================================ */ :where(.pf-v5-theme-dark) { --pf-v5-global--palette--black-50: #e0e0e0; --pf-v5-global--palette--black-100: #c6c7c8; --pf-v5-global--palette--black-200: #aaabac; --pf-v5-global--palette--black-300: #868789; --pf-v5-global--palette--black-400: #57585a; --pf-v5-global--palette--black-500: #444548; --pf-v5-global--palette--black-600: #36373a; --pf-v5-global--palette--black-700: #26292d; --pf-v5-global--palette--black-800: #1b1d21; --pf-v5-global--palette--black-900: #0f1214; --pf-v5-global--palette--red-9999: #fe5142; --pf-v5-global--palette--red-8888: #ff7468; --pf-v5-global--palette--blue-300: #1fa7f8; --pf-v5-global--BackgroundColor--100: #1b1d21; --pf-v5-global--BackgroundColor--150: #212427; --pf-v5-global--BackgroundColor--200: #0f1214; --pf-v5-global--BackgroundColor--300: #26292d; --pf-v5-global--BackgroundColor--400: #36373a; --pf-v5-global--BackgroundColor--light-100: #1b1d21; --pf-v5-global--BackgroundColor--light-200: #0f1214; --pf-v5-global--BackgroundColor--light-300: #26292d; --pf-v5-global--BackgroundColor--dark-100: #1b1d21; --pf-v5-global--BackgroundColor--dark-200: #0f1214; --pf-v5-global--BackgroundColor--dark-300: #26292d; --pf-v5-global--BackgroundColor--dark-400: #36373a; --pf-v5-global--BorderColor--100: #444548; --pf-v5-global--BorderColor--200: #444548; --pf-v5-global--primary-color--dark-100: #f03096; /* Hover select component border bottom color - Default value : #1fa7f8; */ --pf-v5-global--BorderColor--400: #aaabac; --pf-v5-global--BorderColor--dark-100: #444548; --pf-v5-global--BorderColor--light-100: #444548; --pf-v5-global--BorderColor--300: #57585a; --pf-v5-global--Color--200: #aaabac; --pf-v5-global--Color--dark-100: #e0e0e0; --pf-v5-global--Color--dark-200: #aaabac; --pf-v5-global--Color--light-100: #e0e0e0; --pf-v5-global--Color--light-200: #aaabac; --pf-v5-global--Color--light-300: #3c3f42; --pf-v5-global--active-color--100: #f03096; /* Hover select component border bottom color - Default value : #06c */ --pf-v5-global--Color--100: #e0e0e0; --pf-v5-global--primary-color--300: #f03096; --pf-v5-global--primary-color--400: #fff; --pf-v5-global--primary-color--light-100: #1fa7f8; --pf-v5-global--primary-color--100: #e6007e; --pf-v5-global--custom-color--200: #73c5c5; --pf-v5-global--success-color--100: #5ba352; --pf-v5-global--warning-color--100: #f0ab00; --pf-v5-global--warning-color--200: #f4c145; --pf-v5-global--danger-color--100: #fe5142; --pf-v5-global--danger-color--200: #ff7468; --pf-v5-global--disabled-color--100: #868789; --pf-v5-global--disabled-color--200: #444548; --pf-v5-global--disabled-color--300: #aaabac; --pf-v5-global--icon--Color--light: #aaabac; --pf-v5-global--icon--Color--dark: #e0e0e0; --pf-v5-global--icon--Color--light--light: #aaabac; --pf-v5-global--icon--Color--dark--light: #e0e0e0; --pf-v5-global--icon--Color--light--dark: #aaabac; --pf-v5-global--icon--Color--dark--dark: #e0e0e0; --pf-v5-global--link--Color: #e6007e; --pf-v5-global--link--Color--hover: #a8015d; --pf-v5-global--link--Color--visited: #a18fff; --pf-v5-global--link--Color--light: #1fa7f8; --pf-v5-global--link--Color--light--hover: #73bcf7; --pf-v5-global--link--Color--dark: #1fa7f8; --pf-v5-global--link--Color--dark--hover: #73bcf7; --pf-v5-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.48), 0 0 0.125rem 0 rgba(3, 3, 3, 0.24); --pf-v5-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64); --pf-v5-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64); --pf-v5-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64); --pf-v5-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64); --pf-v5-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24); --pf-v5-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32); --pf-v5-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72); --pf-v5-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.64), 0 0 0.5rem 0 rgba(3, 3, 3, 0.4); --pf-v5-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.8); --pf-v5-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8); --pf-v5-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.8); --pf-v5-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8); --pf-v5-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303; } /* ============================================================ */ /* BODY STYLING */ /* ============================================================ */ :where(body) { font-family: var(--pf-v5-global--FontFamily--text); font-size: var(--pf-v5-global--FontSize--md); font-weight: var(--pf-v5-global--FontWeight--normal); line-height: var(--pf-v5-global--LineHeight--md); } /* ============================================================ */ /* FORM CONTROLS */ /* ============================================================ */ .pf-v5-c-form-control > :is(input, select, textarea) { background-color: transparent; /* Background color form elements */ border: 1px solid var(--pf-v5-global--BorderColor--200); /* Default: none */ color: var(--pf-v5-c-form-control--Color); grid-column: 1/-1; grid-row: 1/2; padding-block-end: var(--pf-v5-c-form-control--PaddingBottom); padding-block-start: var(--pf-v5-c-form-control--PaddingTop); padding-inline-end: var(--pf-v5-c-form-control--PaddingRight); padding-inline-start: var(--pf-v5-c-form-control--PaddingLeft); border-radius: var(--pf-v5-global--BorderRadius--sm); /* AJOUT */ } :where(.pf-v5-theme-dark) .pf-v5-c-input-group { --pf-v5-c-input-group__item--BorderLeftWidth: 0; /* Default: var(--pf-v5-c-input-group__item--BorderWidth--base) */ } :where(.pf-v5-theme-dark) .pf-v5-c-form-control { --pf-v5-c-form-control--BackgroundColor: 0; /* Background element behind form elements - Default: var(--pf-v5-global--BackgroundColor--400) */ color: var(--pf-v5-global--Color--100); } .pf-v5-c-form-control { --pf-v5-c-form-control--ColumnGap: var(--pf-v5-global--spacer--sm); --pf-v5-c-form-control--Color: var(--pf-v5-global--Color--100); --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md); --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md); --pf-v5-c-form-control--Resize: none; --pf-v5-c-form-control--OutlineOffset: -2px; --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-form-control--before--BorderBottomWidth: 0; --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-form-control--before--BorderTopColor: transparent; --pf-v5-c-form-control--before--BorderRightColor: transparent; --pf-v5-c-form-control--before--BorderBottomColor: transparent; --pf-v5-c-form-control--before--BorderLeftColor: transparent; --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-form-control--after--BorderBottomColor: 0; /* Default: var(--pf-v5-global--BorderColor--200) */ --pf-v5-c-form-control--BackgroundColor: 0; /* Default: var(--pf-v5-global--BackgroundColor--100) */ --pf-v5-c-form-control--Width: 100%; --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm); --pf-v5-c-form-control--PaddingTop: var(--pf-v5-global--spacer--form-element); --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-global--spacer--form-element); --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base); --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base); --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0; --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200); --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100); --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100); --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300); --pf-v5-c-form-control--m-disabled--after--BorderColor: transparent; --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300); --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200); --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent; --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0; --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0; --pf-v5-c-form-control--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100); --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl); --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-form-control--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100); --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl); --pf-v5-c-form-control--m-error--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-form-control--m-error--after--BorderBottomColor: 0; /* Default: var(--pf-v5-global--danger-color--100) */ --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl); --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize); --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer)); --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize); --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm); --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer)); --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-global--spacer--lg); --pf-v5-c-form-control__select--PaddingLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl); --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl); --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl); --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width); --pf-v5-c-form-control--textarea--Height: auto; --pf-v5-c-form-control__icon--PaddingTop: var(--pf-v5-global--spacer--form-element); --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light); --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light); --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100); --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100); --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100); --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm); --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base); --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base); --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-v5-global--spacer--form-element); --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base); --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base); --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100); --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100); align-items: start; background-color: var(--pf-v5-c-form-control--BackgroundColor); color: var(--pf-v5-c-form-control--Color); column-gap: var(--pf-v5-c-form-control--ColumnGap); display: grid; font-size: var(--pf-v5-c-form-control--FontSize); grid-template-columns: 1fr auto; line-height: var(--pf-v5-c-form-control--LineHeight); position: relative; resize: var(--pf-v5-c-form-control--Resize); width: var(--pf-v5-c-form-control--Width); } .pf-v5-c-form-control:hover { --pf-v5-c-form-control--after--BorderBottomColor: 0; /* Default: var(--pf-v5-c-form-control--hover--after--BorderBottomColor) */ } .pf-v5-c-form-control.pf-m-error { --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight); --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-error--after--BorderBottomColor); --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color); --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight); --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-error--after--BorderBottomWidth); } /* ============================================================ */ /* BUTTONS */ /* ============================================================ */ .pf-v5-c-button { --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element); --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element); --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md); --pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal); --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md); --pf-v5-c-button--BackgroundColor: transparent; --pf-v5-c-button--BorderRadius: var(--pf-v5-global--BorderRadius--sm); --pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm); --pf-v5-c-button--after--BorderColor: transparent; --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-button--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-button--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-button--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--100); --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200); --pf-v5-c-button--disabled--after--BorderColor: transparent; --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200); --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200); --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200); --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-secondary--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-global--danger-color--100); --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-v5-global--danger-color--100); --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-v5-global--danger-color--100); --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-v5-global--danger-color--100); --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-v5-global--danger-color--100); --pf-v5-c-button--m-tertiary--BackgroundColor: transparent; --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent; --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent; --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent; --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-global--warning-color--100); --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--palette--gold-500); --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--palette--gold-500); --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--palette--gold-500); --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-global--danger-color--100); --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--Color--light-100); --pf-v5-c-button--m-link--BackgroundColor: transparent; --pf-v5-c-button--m-link--Color: var(--pf-v5-global--link--Color); --pf-v5-c-button--m-link--hover--BackgroundColor: transparent; --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover); --pf-v5-c-button--m-link--focus--BackgroundColor: transparent; --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--link--Color--hover); --pf-v5-c-button--m-link--active--BackgroundColor: transparent; --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--link--Color--hover); --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent; --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100); --pf-v5-c-button--m-link--m-inline--FontSize: inherit; --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover); --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-global--link--Color--hover); --pf-v5-c-button--m-link--m-inline--PaddingTop: 0; --pf-v5-c-button--m-link--m-inline--PaddingRight: 0; --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0; --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0; --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-v5-global--spacer--xs); --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-v5-global--spacer--sm)); --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent; --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-global--danger-color--100); --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent; --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent; --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent; --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-v5-global--danger-color--200); --pf-v5-c-button--m-plain--BackgroundColor: transparent; --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--Color--200); --pf-v5-c-button--m-plain--hover--BackgroundColor: transparent; --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent; --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-plain--active--BackgroundColor: transparent; --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200); --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent; --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); --pf-v5-c-button--m-control--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-control--BorderRadius: 0; --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-button--m-control--after--BorderBottomColor: transparent; /* Default value - var(--pf-v5-global--BorderColor--200) */ --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300); --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); --pf-v5-c-button--m-control--hover--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100); --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); --pf-v5-c-button--m-control--active--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100); --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); --pf-v5-c-button--m-control--focus--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100); --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-v5-global--Color--100); --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md); --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100); --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl); --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-v5-global--spacer--xl); --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-v5-global--FontWeight--bold); --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-v5-global--FontSize--lg); --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-v5-global--spacer--xs); --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-v5-global--spacer--xs); --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm)); --pf-v5-c-button__progress--Opacity: 0; --pf-v5-c-button__progress--TranslateY: -50%; --pf-v5-c-button__progress--TranslateX: 0; --pf-v5-c-button__progress--Top: 50%; --pf-v5-c-button__progress--Left: var(--pf-v5-global--spacer--md); --pf-v5-c-button--m-progress--TransitionProperty: padding; --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration); --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width)/2); --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width)/2); --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width)); --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-global--primary-color--100); --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%; --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%; --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm); --pf-v5-c-button--disabled__c-badge--Color: var(--pf-v5-global--Color--dark-100); --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--BorderColor--300); --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm); border: 0; border-radius: var(--pf-v5-c-button--BorderRadius); display: inline-block; font-size: var(--pf-v5-c-button--FontSize); font-weight: var(--pf-v5-c-button--FontWeight); line-height: var(--pf-v5-c-button--LineHeight); padding-block-end: var(--pf-v5-c-button--PaddingBottom); padding-block-start: var(--pf-v5-c-button--PaddingTop); padding-inline-end: var(--pf-v5-c-button--PaddingRight); padding-inline-start: var(--pf-v5-c-button--PaddingLeft); position: relative; text-align: center; user-select: none; white-space: nowrap; } .pf-v5-c-button.pf-m-primary { background-color: var(--pf-v5-c-button--m-primary--BackgroundColor); color: var(--pf-v5-c-button--m-primary--Color); } .pf-v5-c-button.pf-m-secondary { --pf-v5-c-button--after--BorderColor: #b5b5b5; /* Default: var(--pf-v5-c-button--m-secondary--after--BorderColor) */ background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor); color: var(--pf-v5-c-button--m-secondary--Color); } .pf-v5-c-button.pf-m-control { --pf-v5-c-button--BorderRadius: 8px; /* Border radius control icon button (e.g. password eye icon) - Default: var(--pf-v5-c-button--m-control--BorderRadius) */ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-control--disabled--BackgroundColor); --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--m-control--after--BorderWidth); /* Default: var(--pf-v5-c-button--m-control--after--BorderWidth) */ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-control--after--BorderTopColor) var(--pf-v5-c-button--m-control--after--BorderRightColor) var(--pf-v5-c-button--m-control--after--BorderBottomColor) var(--pf-v5-c-button--m-control--after--BorderLeftColor); background-color: #f0eded; /* Default: var(--pf-v5-c-button--m-control--BackgroundColor) */ color: var(--pf-v5-c-button--m-control--Color); margin-left: 6px; /* Space between input and button */ } .pf-v5-c-button.pf-m-control:hover, .pf-v5-c-button.pf-m-control:focus { --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--hover--Color); --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor); --pf-v5-c-button--m-control--after--BorderBottomColor: transparent; /* Default: var(--pf-v5-c-button--m-control--hover--after--BorderBottomColor) */ } /* ============================================================ */ /* LOGIN CONTAINER & HEADER */ /* ============================================================ */ .pf-v5-c-login__main-header { border-top: 0; /* Decorative line at top of main container - Default: 4px solid var(--keycloak-card-top-color) */ } #kc-header-wrapper { display: block; width: 320px; height: 120px; margin: 0 auto; /* Hide text */ color: transparent !important; text-shadow: none !important; } #kc-header { margin-top: -1rem; margin-bottom: 1rem; } .pf-v5-c-login { --pf-v5-c-login--PaddingTop: var(--pf-v5-global--spacer--lg); --pf-v5-c-login--PaddingBottom: var(--pf-v5-global--spacer--lg); --pf-v5-c-login__container--xl--GridColumnGap: var(--pf-v5-global--spacer--3xl); --pf-v5-c-login__container--MaxWidth: 28rem; /* Max width main container allowing mobile optimization - Default value : 31.25rem */ --pf-v5-c-login__container--xl--MaxWidth: none; --pf-v5-c-login__container--PaddingLeft: 6.125rem; --pf-v5-c-login__container--PaddingRight: 6.125rem; --pf-v5-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem); --pf-v5-c-login__header--MarginBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-login__header--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-login__header--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-login__header--xl--MarginBottom: var(--pf-v5-global--spacer--2xl); --pf-v5-c-login__header--xl--MarginTop: var(--pf-v5-global--spacer--3xl); --pf-v5-c-login__header--c-brand--MarginBottom: var(--pf-v5-global--spacer--lg); --pf-v5-c-login__header--c-brand--xl--MarginBottom: var(--pf-v5-global--spacer--2xl); --pf-v5-c-login__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100); --pf-v5-c-login__main--MarginBottom: var(--pf-v5-global--spacer--lg); --pf-v5-c-login__main--BoxShadow: var(--pf-v5-global--BoxShadow--xl); --pf-v5-c-login__main-header--PaddingTop: var(--pf-v5-global--spacer--2xl); --pf-v5-c-login__main-header--PaddingRight: var(--pf-v5-global--spacer--xl); --pf-v5-c-login__main-header--PaddingBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-header--PaddingLeft: var(--pf-v5-global--spacer--xl); --pf-v5-c-login__main-header--md--PaddingRight: var(--pf-v5-global--spacer--2xl); --pf-v5-c-login__main-header--md--PaddingLeft: var(--pf-v5-global--spacer--2xl); --pf-v5-c-login__main-header--ColumnGap: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-header--RowGap: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-header-desc--MarginBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-login__main-header-desc--md--MarginBottom: 0; --pf-v5-c-login__main-header-desc--FontSize: var(--pf-v5-global--FontSize--sm); --pf-v5-c-login__main-body--PaddingRight: var(--pf-v5-global--spacer--xl); --pf-v5-c-login__main-body--PaddingBottom: var(--pf-v5-global--spacer--xl); --pf-v5-c-login__main-body--PaddingLeft: var(--pf-v5-global--spacer--xl); --pf-v5-c-login__main-body--md--PaddingRight: var(--pf-v5-global--spacer--2xl); --pf-v5-c-login__main-body--md--PaddingLeft: var(--pf-v5-global--spacer--2xl); --pf-v5-c-login__main-footer--PaddingBottom: var(--pf-v5-global--spacer--3xl); --pf-v5-c-login__main-footer--c-title--MarginBottom: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-footer-links--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-login__main-footer-links--PaddingRight: var(--pf-v5-global--spacer--3xl); --pf-v5-c-login__main-footer-links--PaddingBottom: var(--pf-v5-global--spacer--xl); --pf-v5-c-login__main-footer-links--PaddingLeft: var(--pf-v5-global--spacer--3xl); --pf-v5-c-login__main-footer-links-item--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-footer-links-item--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-footer-links-item--MarginBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-login__main-footer-links-item-link-svg--Fill: var(--pf-v5-global--icon--Color--light); --pf-v5-c-login__main-footer-links-item-link-svg--Width: var(--pf-v5-global--icon--FontSize--lg); --pf-v5-c-login__main-footer-links-item-link-svg--Height: var(--pf-v5-global--icon--FontSize--lg); --pf-v5-c-login__main-footer-links-item-link-svg--hover--Fill: var(--pf-v5-global--icon--Color--dark); --pf-v5-c-login__main-footer-band--PaddingTop: var(--pf-v5-global--spacer--lg); --pf-v5-c-login__main-footer-band--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-footer-band--PaddingBottom: var(--pf-v5-global--spacer--lg); --pf-v5-c-login__main-footer-band--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-login__main-footer-band--BorderTopColor: var(--pf-v5-global--BorderColor--100); --pf-v5-c-login__main-footer-band--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm); --pf-v5-c-login__main-footer-band-item--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-login__footer--PaddingLeft: var(--pf-v5-global--spacer--md); --pf-v5-c-login__footer--PaddingRight: var(--pf-v5-global--spacer--md); --pf-v5-c-login__footer--c-list--PaddingTop: var(--pf-v5-global--spacer--md); --pf-v5-c-login__footer--c-list--xl--PaddingTop: var(--pf-v5-global--spacer--2xl); } .pf-v5-c-login__header .pf-v5-c-brand { margin-block-end: var(--pf-v5-c-login__header--c-brand--MarginBottom); } .pf-v5-c-login__main-footer-band { border-block-start: var(--pf-v5-c-login__main-footer-band--BorderTopWidth) solid var(--pf-v5-c-login__main-footer-band--BorderTopColor); padding-block-end: var(--pf-v5-c-login__main-footer-band--PaddingBottom); padding-block-start: var(--pf-v5-c-login__main-footer-band--PaddingTop); padding-inline-end: var(--pf-v5-c-login__main-footer-band--PaddingRight); padding-inline-start: var(--pf-v5-c-login__main-footer-band--PaddingLeft); text-align: center; } /* ============================================================ */ /* BRAND ELEMENT */ /* ============================================================ */ .pf-v5-c-brand { --pf-v5-c-brand--Width: auto; --pf-v5-c-brand--Height: auto; --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width); --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height); height: var(--pf-v5-c-brand--Height--base); width: var(--pf-v5-c-brand--Width--base); } @media (min-width: 576px) { .pf-v5-c-brand { --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height)); --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width)); } } @media (min-width: 768px) { .pf-v5-c-brand { --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height))); --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width))); } } @media (min-width: 992px) { .pf-v5-c-brand { --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-lg, var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height)))); --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-lg, var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width)))); } } @media (min-width: 1200px) { .pf-v5-c-brand { --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-xl, var(--pf-v5-c-brand--Height-on-lg, var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height))))); --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-xl, var(--pf-v5-c-brand--Width-on-lg, var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width))))); } } /* ============================================================ */ /* HEADINGS */ /* ============================================================ */ .pf-v5-c-title { --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading); --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm); --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl); --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal); --pf-v5-c-title--m-3xl--LineHeight: var(--pf-v5-global--LineHeight--sm); --pf-v5-c-title--m-3xl--FontSize: var(--pf-v5-global--FontSize--3xl); --pf-v5-c-title--m-3xl--FontWeight: var(--pf-v5-global--FontWeight--bold); --pf-v5-c-title--m-2xl--LineHeight: var(--pf-v5-global--LineHeight--sm); --pf-v5-c-title--m-2xl--FontSize: var(--pf-v5-global--FontSize--2xl); --pf-v5-c-title--m-2xl--FontWeight: var(--pf-v5-global--FontWeight--bold); /* Main Title - Default value --pf-v5-global--FontWeight--normal */ --pf-v5-c-title--m-xl--LineHeight: var(--pf-v5-global--LineHeight--md); --pf-v5-c-title--m-xl--FontSize: var(--pf-v5-global--FontSize--xl); --pf-v5-c-title--m-xl--FontWeight: var(--pf-v5-global--FontWeight--normal); --pf-v5-c-title--m-lg--LineHeight: var(--pf-v5-global--LineHeight--md); --pf-v5-c-title--m-lg--FontSize: var(--pf-v5-global--FontSize--lg); --pf-v5-c-title--m-lg--FontWeight: var(--pf-v5-global--FontWeight--normal); --pf-v5-c-title--m-md--LineHeight: var(--pf-v5-global--LineHeight--md); --pf-v5-c-title--m-md--FontSize: var(--pf-v5-global--FontSize--md); --pf-v5-c-title--m-md--FontWeight: var(--pf-v5-global--FontWeight--normal); font-family: var(--pf-v5-c-title--FontFamily); word-break: break-word; }