/* Overwrite primefaces css */
.ui-growl {
    top: 100px;
    left: 50%;
}

.ui-datatable td, .ui-datatable th {
    white-space: normal;
}

.ui-datatable tbody td.column1 {
    white-space: normal;
    width: 7%;
}

.ui-datatable tbody td.column2 {
    white-space: normal;
    width: 41%;
}

.ui-datatable tbody td.column3 {
    white-space: normal;
    width: 41%;
}

.ui-datatable tbody td.column4 {
    white-space: normal;
    width: 7%;
}

.ui-datatable tbody td.column5 {
    white-space: normal;
    width: 4%;
}

#lu_south {
    top: 250px !important;
    height: auto !important;
    /* piccolo gap tra il box di input della ricerca e il box risultati */
    padding-top: 8px;
}

/* Per togliere l'header dalla tabella delle sottoanalisi dell'arabo, 
altrimenti visualizza una striscia colorata nonostante non ti specifichi lo headerText */
.hide-column-names table thead tr {
    display: none;
}
/* End of overwrite primefaces css */
.normal {
    text-align: inherit;
}

.tableNoBorder tr, .tableNoBorder td {
    border-width: 0px !important;
}

tr.couple td {
    border-bottom: 1px dotted #BBBBBB !important;
}

.couple td.arabic {
    border-left: 1px dotted #BBBBBB !important;
}

.couple td.greek {
    border-right: 1px dotted #BBBBBB !important;
}

div.perica {
    direction: rtl;
    text-align: right;
    font-size: 2em;
}

.arabic {
    direction: rtl;
    text-align: right;
    /*	font-size: 1.3em; */
    font-family: "KacstOne", "Times new roman", Arial !important;
}

.greek {
    direction: ltr;
    text-align: left;
    /*	font-size: 1.2em;*/
    font-family: Arial, "Times new roman" !important;
}

.latin {
    direction: ltr;
    text-align: left;
    font-size: 1.1em !important;
}

.latinText {
    direction: ltr;
    text-align: left;
    font-size: 12px !important;
}

/* per il pericopatore */
.bk_0 {
    background-color: Lavender; /* #E1F5C4; */
    padding: 0 3px;
    margin: 2px 0px;
}

.bk_2 {
    background-color: #E9FFE1;
    padding: 0 3px;
    margin: 2px 0px;
}

.bk_1 {
    background-color: lightyellow;
    padding: 0 3px;
    margin: 2px 0px;
}

.bk_3 {
    background-color: lightblue;
    padding: 0 3px;
    margin: 2px 0px;
}

.bk_7 {
    background-color: cyan;
    padding: 0 3px;
    margin: 2px 0px;
}

.bk_9 {
    background-color: white;
    padding: 0 3px;
    margin: 2px 0px;
}

.bk_grfocused, .bk_arfocused {
    background-color: orange;
    border-bottom: 2px solid red;
    padding: 0 3px;
    margin: 2px 0px;
}

.no-overflow {
    overflow: hidden !important;
}

.login-font {
    font-weight: bold;
    font-size: 1em;
}

.panelGridCenter {
    margin: 20px auto;
}

/* Footer (tfoot) compatto come l'header (riga): prima era molto più alto.
   Login e i pannelli "Greek Search"/"Arabic Search". */
#loginForm tfoot td {
    padding: 5px 16px !important;
}

/* Header (thead) dei pannelli Greek/Arabic Search: meno spazio attorno
   alle scritte (titolo e nomi colonne). */
#gr_form thead td {
    padding: 6px 12px !important;
}
#gr_form tfoot td {
    padding: 2px 16px !important;
}

/* Footer dei risultati di ricerca: blu come l'header, conteggio a sinistra,
   Download a destra. */
#searchResultFormId .ui-datatable-footer,
#searchResultFormId .ui-datatable-scrollable-footer {
    background: #1e88e5 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #1e88e5 !important;
}

/* Cornice continua attorno al box risultati: con poche righe il corpo
   scrollabile restava "aperto" a sinistra/destra/sotto. */
#searchResultFormId .ui-datatable {
    border: 1px solid #c8c8c8;
    box-sizing: border-box;
}
.resultFooter {
    position: relative;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
/* Conteggio centrato nella riga del footer, Download a destra. */
.resultFooter .resultCount {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #ffffff;
}
.resultFooter .ui-button {
    margin-left: auto;
}

a:hover.link_nodecor {
    background-color: #555555;
    color: white;
}

.link_nodecor {
    text-decoration: none;
}

a:hover.sidemenu_link {
    text-decoration: none;
}

.sidemenu_link {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.greekpanel {
    width: 48%;
}

.arabicpanel {
    width: 48%;
    direction: rtl;
}

.selectOneRadioColumn td {
    border: none !important;
}

.highlight {
    background-color: lime;
    color: black;
}

html.progress, html.progress * {
    cursor: progress !important;
}

.centerImage {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon {
    right: -5px !important;
}




div.vis-network div.vis-navigation div.vis-button.vis-up, 
div.vis-network div.vis-navigation div.vis-button.vis-down, 
div.vis-network div.vis-navigation div.vis-button.vis-left, 
div.vis-network div.vis-navigation div.vis-button.vis-right, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomIn, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomOut, 
div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
    background-image: none !important;
}

div.vis-network div.vis-navigation div.vis-button:hover {
    box-shadow: none !important;
}

.vis-button:after {
    font-size: 2em;
    color: gray;
}

.vis-button:hover:after {
    font-size: 2em;
    color: lightgray;
}

.vis-button.vis-up:after {
    content: "▲";
}

.vis-button.vis-down:after {
    content: "▼";
}

.vis-button.vis-left:after {
    content: "◀";
}

.vis-button.vis-right:after {
    content: "▶";
}

.vis-button.vis-zoomIn:after {
    content: "+";
    font-weight: bold;
}

.vis-button.vis-zoomOut:after {
    content: "−";
    font-weight: bold;
}

.vis-button.vis-zoomExtends:after {
    content: "⤧";
}
/* ===================================================================== */
/* Layout a 3 regioni in CSS flexbox (rimpiazza p:layout/p:layoutUnit).  */
/* Vedi templates/threeRegionsLayout.xhtml e center/searchBody.xhtml.    */
/* ===================================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.g2a-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Distacco uniforme tra le regioni incorniciate (north/center/south). */
    gap: 6px;
}
/* Le cornici/colori delle regioni li definisce il tema (classi ui-widget-*). */
.g2a-north {
    flex: 0 0 auto;
    box-sizing: border-box;
}
.g2a-north .g2a-unit-header {
    padding: 11px 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.g2a-north .g2a-unit-header .g2a-unit-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.g2a-north .g2a-unit-header .g2a-build-version-wrap {
    font-weight: 400;
    opacity: .9;
    white-space: nowrap;
}
.g2a-north .g2a-unit-content {
    padding: 5px 8px;
}
.g2a-center {
    flex: 1 1 auto;
    overflow: auto;
    padding: 6px;
    box-sizing: border-box;
}
.g2a-south {
    flex: 0 0 auto;
    height: 80px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Quattro regioni (Home / Comment): sidebar e contenuto restano affiancati. */
.g2a-layout-four { gap: 4px; }
.g2a-layout-four .g2a-north { margin-bottom: 0; }
.g2a-body-row {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
}
.g2a-west {
    flex: 0 0 228px;
    box-sizing: border-box;
    min-width: 0;
    overflow: auto;
    /* Stesso inset-top della hero centrale: niente "scalino". */
    padding: clamp(2px, 0.6vw, 10px) 6px 6px 6px;
    border: 0;
    background: transparent;
}
/* Menu laterale: ogni sezione (Collections/Help/Code) come mini hero-card,
   coerente con la card centrale (barra blu + bordo + ombra). */
/* Wrapper <div> per ogni sezione: clippa l'header blu alla curva della card
   (come la hero). Una <table> da sola non ci riuscirebbe. */
.g2a-side-card,
.g2a-card {
    border: 1px solid #cfe3f7;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(21, 101, 192, .08);
    margin: 0 0 12px 0;
}
/* Card dei pannelli di ricerca: il panelGrid riempie la card e non ha bordo
   proprio (la cornice e' del div, che clippa l'header alla curva). */
#gr_form .g2a-card .ui-panelgrid {
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}
/* Footer dei pannelli di ricerca: barra celeste come il login, cosi' i
   pulsanti (blu) risaltano. */
#gr_form .g2a-card .ui-panelgrid tfoot,
#gr_form .g2a-card .ui-panelgrid tfoot td {
    background: #f7fbff !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid #e3f2fd !important;
    color: #1e88e5 !important;
}

/* La tabella contenitore dei 3 pannelli non deve mostrare cornice né divisori:
   le cornici sono le card. Card allineate in alto. */
#gr_form\:search_pg,
#gr_form\:search_pg > tbody > tr > td {
    border: 0 !important;
    background: transparent !important;
    vertical-align: top;
}
.g2a-west .ui-panelgrid {
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.g2a-west .ui-panelgrid thead th,
.g2a-west .ui-panelgrid thead td {
    background: #1e88e5 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700;
    text-align: center;
    border: 0 !important;
    padding: 10px 12px !important;
}
.g2a-west .ui-panelgrid tbody td.ui-panelgrid-cell {
    border: 0 !important;
    background: #ffffff;
    padding: 0 !important;
}
.g2a-west .sidemenu_column {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
}
/* Hover sulle voci del menu di sinistra (il tema non lo rende visibile). */
.g2a-west .sidemenu_column:hover,
.g2a-west .sidemenu_column.ui-state-hover {
    background: #e3f2fd !important;
}
.g2a-west .sidemenu_column .sidemenu_link {
    display: block;
    padding: 8px 12px;
    border-radius: 0;
}
.g2a-west .sidemenu_column:hover .sidemenu_link,
.g2a-west .sidemenu_column.ui-state-hover .sidemenu_link {
    color: #0d47a1 !important;
}
.g2a-layout-four .g2a-center {
    min-width: 0;
    min-height: 0;
    padding-top: 0;
}
.g2a-layout-four .g2a-south {
    flex: 0 0 80px;
    box-sizing: border-box;
    padding: 6px;
}

/* Commenti: regole circoscritte, senza cambiare Home o gli altri editor. */
.g2a-comments-layout .g2a-west {
    flex-basis: clamp(260px, 22vw, 320px);
}
#commentlistform .ui-paginator {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
}
#commentlistform .ui-paginator > .ui-paginator-current,
#commentlistform .ui-paginator > .ui-paginator-prev,
#commentlistform .ui-paginator > .ui-paginator-next,
#commentlistform .ui-paginator > .ui-paginator-rpp-options {
    flex: 0 0 auto;
    margin: 0;
}
#commentlistform .ui-datalist-data { margin: 0; padding: 0; }
#commentlistform .g2a-comment-link {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 4px;
    border-bottom: 1px solid #dddddd;
    line-height: 1.3;
    text-decoration: none;
}
#commentlistform .g2a-comment-link img { flex: 0 0 auto; margin-top: 2px; }
#commentlistform .g2a-comment-preview { min-width: 0; overflow-wrap: anywhere; }
#commentlistform .g2a-comment-link:hover,
#commentlistform .g2a-comment-link-selected { background: #eef3f6; }
#commentlistform .g2a-comment-link-selected { box-shadow: inset 3px 0 var(--primary-color, #db4865); }
#commentlistform .g2a-comment-link:focus-visible { outline: 2px solid var(--primary-color, #db4865); }

/* CLEditor usava un iframe: Quill eredita invece colore e font dal tema.
   Ripristina il testo base Arial 10pt nero, senza sovrascrivere la formattazione
   esplicita dei singoli span (grassetto, corsivo, colori, greco/arabo). */
#commentEditorForm .g2a-comment-editor .ql-editor {
    font-family: Arial, Verdana, sans-serif;
    font-size: 10pt;
    color: #000000;
    background: #ffffff;
    line-height: normal;
    padding: 4px;
    text-align: left;
}
#commentEditorForm .g2a-comment-editor .ql-toolbar {
    background: #eeeeee;
    color: #222222;
    padding: 4px;
    text-align: left;
}
#commentEditorForm .g2a-comment-editor .ql-toolbar .ql-formats { margin-right: 10px; }

/* Selezione riga nelle viste Pericopes by...: PF14 seleziona la riga solo se il
   click colpisce un td o uno span (rowSelectorForRowClick). Il testo delle
   pericopi e' avvolto in un div.ui-outputpanel (block): cliccando lo spazio
   vuoto di quel div la riga non veniva selezionata. Rendo il wrapper
   trasparente ai click; lo span interno resta cliccabile (e selezionabile per
   copia). */
#parallelViewFormId .ui-outputpanel { pointer-events: none; }
#parallelViewFormId .ui-outputpanel span { pointer-events: auto; }
#searchResultFormId .ui-outputpanel { pointer-events: none; }
#searchResultFormId .ui-outputpanel span { pointer-events: auto; }

/* Sotto-layout della ricerca (ex global_layout: lu_center / lu_south) */
.g2a-sublayout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.g2a-sub-center { flex: 0 0 auto; }
.g2a-sub-south {
    flex: 1 1 auto;
    overflow: auto;
    border: none;
}

/* ===================================================================== */
/* Ricerca responsive: scale-to-fit via JS (zoom) in searchBody.xhtml.    */
/* Il form resta una tabella a 3 pannelli in fila; se piu' largo del      */
/* viewport viene rimpicciolito in blocco (g2aFitSearch).                 */
/* Centratura orizzontale del form.                                      */
/* ===================================================================== */
#gr_form\:search_pg {
    margin: 0 auto;
    /* Usa lo spazio orizzontale disponibile; su schermi stretti il
       min-content resta piu' largo del contenitore e lo zoom riduce. */
    width: 100%;
}

/* ===================================================================== */
/* Voce di menu SELEZIONATA (classe custom: PF non mantiene              */
/* ui-state-active sul menuitem). Usa l'accento del tema.                 */
/* ===================================================================== */
#menuForm .ui-menuitem-link.g2a-menu-selected,
#menuForm .ui-menuitem-link.g2a-menu-selected:hover,
#menuForm .ui-menuitem-link.g2a-menu-selected.ui-state-hover {
    background: var(--primary-color, #db4865) !important;
    color: var(--primary-color-text, #ffffff) !important;
    border-color: transparent !important;
}

/* Le regole del layout report Plotino (.g2a-report-*) sono in ontoView.css,
   che e' il foglio di stile caricato da onto/graphicalView.xhtml. */

/* ===================================================================== */
/* Tema moderno (nova-colored) senza lo sprite jQuery UI: le vecchie     */
/* classi ui-icon-* usate nel markup vengono mappate sulle PrimeIcons,   */
/* cosi' le icone esistenti continuano a vedersi.                        */
/* ===================================================================== */
.ui-icon {
    font-family: 'primeicons' !important;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    width: auto;
    height: auto;
    text-indent: 0;
    overflow: visible;
    background: none !important;
    line-height: 1;
    display: inline-block;
}
.ui-icon-search::before { content: "\e908"; }
.ui-icon-document::before { content: "\e958"; }
.ui-icon-help::before { content: "\e959"; }
.ui-icon-star::before { content: "\e937"; }
.ui-icon-circle-arrow-w::before { content: "\e91a"; }
.ui-icon-circle-arrow-e::before { content: "\e91b"; }
.ui-icon-check::before { content: "\e909"; }
.ui-icon-refresh::before,
.ui-icon-arrowrefresh-1-w::before { content: "\e938"; }
.ui-icon-newwin::before,
.ui-icon-extlink::before { content: "\e93c"; }
.ui-icon-disk::before { content: "\e95b"; }
.ui-icon-close::before { content: "\e90b"; }
.ui-icon-circle-plus::before,
.ui-icon-plus::before { content: "\e90d"; }
.ui-icon-circle-minus::before { content: "\e910"; }
.ui-icon-circle-check::before { content: "\e90a"; }
.ui-icon-print::before { content: "\e94b"; }
.ui-icon-video::before { content: "\e962"; }
.ui-icon-person::before { content: "\e939"; }
.ui-icon-image::before { content: "\e972"; }
.ui-icon-folder-open::before { content: "\e964"; }
.ui-icon-folder-collapsed::before { content: "\e963"; }
.ui-icon-circle-close::before { content: "\e90c"; }
.ui-icon-arrowthick-1-s::before { content: "\e956"; }

/* ===================================================================== */
/* Ritocchi nova-colored                                                 */
/* ===================================================================== */
/* Testo bianco sulla voce di menu selezionata (sfondo azzurro del tema). */
#menuForm .ui-menuitem-link.g2a-menu-selected,
#menuForm .ui-menuitem-link.g2a-menu-selected:hover,
#menuForm .ui-menuitem-link.g2a-menu-selected.ui-state-hover,
#menuForm .ui-menuitem-link.g2a-menu-selected .ui-menuitem-text {
    color: #ffffff !important;
}

/* Palette: azzurro pieno #1e88e5, chiaro #e3f2fd, tenue #cfe6fb,
   blu profondo #1565c0. */

/* Barra del titolo: blu profondo con testo bianco (via il bianco/nero). */
.g2a-north .g2a-unit-header.ui-widget-header {
    background: #1565c0 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Intestazioni tabelle: stesso blu della voce di menu selezionata. */
.ui-datatable thead th {
    background: #1e88e5 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
}
.ui-datatable thead th .ui-column-title {
    color: #ffffff !important;
}

/* Evidenza riga selezionata: azzurro tenue invece del rosa. */
#parallelViewFormId .ui-datatable .ui-state-highlight,
#searchResultFormId .ui-datatable .ui-state-highlight {
    background: #cfe6fb !important;
    color: #17324d !important;
    border-color: #a9d2f0 !important;
}
#parallelViewFormId .ui-datatable .ui-state-highlight td,
#searchResultFormId .ui-datatable .ui-state-highlight td {
    color: #17324d !important;
}

/* Paginatore: via il grigio, sfondo azzurro chiarissimo e altezza ridotta. */
.ui-paginator {
    background: #eef6fd !important;
    border-color: #cfe3f7 !important;
    padding: 1px 6px !important;
}
.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    min-width: 1.9em;
    padding: 2px 6px !important;
    line-height: 1.3;
}
.ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background: #1e88e5 !important;
    color: #ffffff !important;
    border-color: #1e88e5 !important;
}

/* Menubar: voci e opzioni (utente/Logout) sulla stessa riga, centrate
   verticalmente. Con nova-colored le opzioni andavano a capo. */
#menuForm .ui-menubar {
    position: relative;
    font-size: 0.9em;
}
#menuForm .ui-menubar .ui-menu-list {
    /* Spazio riservato a username/Logout a destra (le opzioni sono ~168px):
       meno padding = meno spazio vuoto e piu' voci per riga. */
    padding-right: 180px;
}
#menuForm .ui-menubar .ui-menuitem-link {
    padding: 4px 8px !important;
}
/* Utente/Logout a destra, centrati verticalmente nel menubar qualunque sia
   l'altezza (il tema li mandava a capo sotto le voci, non centrati). */
#menuForm .ui-menubar .ui-menubar-options {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    float: none;
}

/* ===================================================================== */
/* Home: hero card (stile A1a), centrata; footer nascosto solo in home.   */
/* ===================================================================== */
.g2a-hidden { display: none !important; }

.g2a-home-block {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.g2a-hero-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(2px, 0.6vw, 10px);
}
.g2a-hero-card {
    width: 100%;
    max-width: 1600px;
    min-height: min(72vh, 660px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #cfe3f7;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(21, 101, 192, .10);
}
.g2a-hero-bar {
    background: #1e88e5;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    padding: clamp(10px, 1vw, 16px) 16px;
    font-size: clamp(14px, 1.05vw, 19px);
}
.g2a-hero-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: center;
    background: #ffffff;
}
.g2a-hero-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(26px, 3.4vw, 64px) clamp(18px, 4vw, 72px);
    background: linear-gradient(#ffffff, #f7fbff);
}
.g2a-hero-title {
    margin: 0;
    font-size: clamp(28px, 3vw, 54px);
    font-weight: 700;
    color: #1565c0;
    letter-spacing: .3px;
}
.g2a-hero-sub {
    margin: clamp(6px, 0.8vw, 12px) 0 0;
    font-size: clamp(16px, 1.6vw, 28px);
    font-style: italic;
    color: #1e88e5;
}
.g2a-hero-rule {
    height: 2px;
    width: min(70%, 620px);
    background: #e3f2fd;
    border: 0;
    margin: clamp(16px, 2vw, 30px) auto;
}
.g2a-hero-app {
    margin: 0;
    font-size: clamp(11px, 0.85vw, 15px);
    letter-spacing: clamp(1.6px, 0.18vw, 3.2px);
    text-transform: uppercase;
    color: #607d8b;
}
.g2a-hero-logos {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(48px, 8vw, 180px);
    flex-wrap: wrap;
    margin-top: 0;
    padding: clamp(18px, 2.2vw, 36px) clamp(18px, 4vw, 72px);
    border-top: 1px solid #e3f2fd;
    background: #f7fbff;
}
.g2a-hero-logos a { display: block; line-height: 0; }
.g2a-logo-ilc { height: clamp(46px, 4.6vw, 82px); }
.g2a-logo-cnr { height: clamp(36px, 3.6vw, 64px); }
.g2a-logo-erc { height: clamp(58px, 5.6vw, 100px); }

/* ===================================================================== */
/* Pagine delle collezioni: titolo uniformato alla hero.                 */
/* ===================================================================== */
.g2a-collection-title {
    text-align: center;
    color: #1565c0;
    font-size: clamp(24px, 2.4vw, 40px);
    font-weight: 700;
    margin: 6px 0 14px;
}

/* ===================================================================== */
/* Card di login: stile hero (barra blu, corpo bianco, footer chiaro).    */
/* ===================================================================== */
.g2a-login-card {
    max-width: 520px;
    margin: 20px auto;
    border: 1px solid #cfe3f7;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(21, 101, 192, .10);
}
.g2a-login-card .ui-panelgrid,
.g2a-login-card .panelGridCenter {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.g2a-login-card .ui-panelgrid thead th,
.g2a-login-card .ui-panelgrid thead td {
    background: #1e88e5 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 700;
    text-align: center;
    border: 0 !important;
    padding: 12px 16px !important;
}
.g2a-login-card .ui-panelgrid tbody td.ui-panelgrid-cell {
    border: 0 !important;
    background: #ffffff !important;
}
.g2a-login-card .ui-panelgrid tfoot,
.g2a-login-card .ui-panelgrid tfoot td {
    background: #f7fbff !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid #e3f2fd !important;
    color: #1e88e5 !important;
}