/**/
div.ACTION div.idShower {
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	border: 1px solid var(--color1);
	background-color: rgba(255,255,255,0.4);
	border-radius: 5px 5px 5px 5px;
	padding-left: 2px;
	padding-right: 2px;
	color: var(--color1);
    text-align: center;
}

/** CONTRATTI E RICHIESTA DI ASSUNZIONE **/
/*  angelus.css tiene TUTTE le schede a 1050px (`body div .BOX .TAB`). Per due
    schede fitte come queste, su uno schermo largo, vuol dire etichette che si
    accavallano e tendine tagliate a meta'. Qui si allargano, come si era gia'
    fatto per Preventivi: 94vw per lasciare respiro ai lati, ma non oltre
    1600px, oltre i quali le righe diventano troppo lunghe da leggere.
    Va allargata anche la barra dei bottoni, che angelus.css centra sulla
    stessa misura. */
/*  NIENTE allargamento: queste due schede restano larghe come tutte le altre
    (1050px, da angelus.css). Deciso il 03/09/2026: la leggibilita' si sistema
    distribuendo i campi su piu' righe, non allargando la pagina.
    Se un giorno servisse allargarla, attenzione al selettore: `div.Contratti
    form.TAB` NON basta, perde contro `body div .BOX .TAB` di angelus.css a
    parita' di specificita'. Servirebbe `body div.Contratti div.BOX form.TAB`. */

/*  NIENTE altezza minima sulle etichette. Ce l'avevo messa perche' le etichette
    lunghe, andando a capo, schiacciavano i pallini della riga sotto; ma costava
    quasi venti pixel di vuoto sotto OGNI etichetta corta, ed erano quelli i
    buchi fra etichetta e campo. La scheda Famiglie non ce l'ha, e infatti li'
    il campo sta attaccato alla sua etichetta. Ai pallini basta il loro margine. */
div.Contratti .gs-label,
div.AssunzioniNew .gs-label {
    line-height: 1.2;
    padding-right: 10px;
}
div.Contratti .gs-radio-center,
div.AssunzioniNew .gs-radio-center {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
}
/*  La nota accanto alle scelte bloccate: piccola e in grigio, cosi' si vede
    che e' un chiarimento e non un'altra etichetta. */
div.Contratti .lbl_nota,
div.AssunzioniNew .lbl_nota {
    font-weight: normal;
    font-style: italic;
    opacity: .75;
}

/*  La riga di informazioni in sola lettura (Informazioni contrattuali Angelus).
    Non sono campi da compilare: si leggono e basta, quindi niente cornici da
    modulo ma etichetta piccola sopra e valore in evidenza sotto. */
div.Contratti .riga_info,
div.AssunzioniNew .riga_info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: 12px 0 6px 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(0,0,0,.035);
}
div.Contratti .voce_info,
div.AssunzioniNew .voce_info { min-width: 150px; }
div.Contratti .etichetta_info,
div.AssunzioniNew .etichetta_info {
    display: block;
    font-size: .82em;
    opacity: .7;
    margin-bottom: 2px;
}
div.Contratti .valore_info,
div.AssunzioniNew .valore_info {
    font-weight: 600;
    font-size: 1.05em;
    min-height: 1.3em;
}
div.Contratti .valore_info.numero,
div.AssunzioniNew .valore_info.numero { font-variant-numeric: tabular-nums; }

/*  La settimana degli orari, disegnata come la griglia degli allegati: righe
    alternate, intestazione grigia, bordi sottili. Dentro le celle ci sono i
    campi veri, quindi si legge come una tabella ma si compila come prima. */
div.Contratti table.griglia_orari,
div.AssunzioniNew table.griglia_orari {
    width: 99%;
    margin: 12px auto 4px auto;
    border-collapse: collapse;
    font-size: .95em;
}
div.Contratti table.griglia_orari th,
div.AssunzioniNew table.griglia_orari th {
    text-align: left;
    font-weight: 600;
    padding: 6px 10px;
    background: rgba(0,0,0,.05);
    border-bottom: 2px solid rgba(0,0,0,.12);
    white-space: nowrap;
}
div.Contratti table.griglia_orari td,
div.AssunzioniNew table.griglia_orari td {
    padding: 4px 10px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    vertical-align: middle;
}
div.Contratti table.griglia_orari tbody tr:nth-child(even),
div.AssunzioniNew table.griglia_orari tbody tr:nth-child(even) { background: rgba(0,0,0,.025); }
div.Contratti table.griglia_orari td.giorno,
div.AssunzioniNew table.griglia_orari td.giorno { width: 130px; font-weight: 600; white-space: nowrap; }
div.Contratti table.griglia_orari td.ore,
div.AssunzioniNew table.griglia_orari td.ore { width: 110px; }
div.Contratti table.griglia_orari td.ore input,
div.AssunzioniNew table.griglia_orari td.ore input { width: 90px; text-align: center; }
div.Contratti table.griglia_orari td.orari input,
div.AssunzioniNew table.griglia_orari td.orari input { width: 100%; }

/*  Nel riquadro delle informazioni la voce del collegamento (richiesta o
    contratto) ha il numero e un piccolo «apri»: si legge come le altre voci,
    non come un avviso piantato sopra la scheda. */
div.Contratti .voce_info .lbl_fx,
div.AssunzioniNew .voce_info .lbl_fx {
    font-size: .8em;
    font-weight: normal;
    margin-left: 6px;
    white-space: nowrap;
}

/*  ===== LA SETTIMANA DENTRO LA FINESTRELLA =====
    La finestrella e' la stessa per le due schede, ma il modulo e' duplicato,
    quindi il riquadro si chiama `AssunzioniNew_orari` quando la apre la
    Richiesta e `Contratti_orari` quando la apre il Contratto: vanno nominati
    tutti e due, per intero, su OGNI regola.

    DUE ERRORI DA NON RIFARE, tutti e due miei:
    1. fino al 04/09/2026 queste regole dicevano `div.AssOrari`, una classe che
       nel modulo non c'e' mai stata: erano quindici regole che non vestivano
       niente;
    2. rinominandole ho scritto `div.AssunzioniNew_orari,\n div.Contratti_orari
       table.tab_orari{...}`: cosi' la prima riga e' un selettore a se' e la
       larghezza del 99% e i margini finivano sulla FINESTRELLA INTERA, che si
       e' schiacciata in una colonna stretta con le etichette una sopra
       l'altra. Il nome della tabella va ripetuto in tutte e due le righe.
    E la tabella si chiama `tab_orari`, non `griglia_settimana`. */
div.AssunzioniNew_orari table.tab_orari,
div.Contratti_orari table.tab_orari{
    width: 100%;
    margin: 6px 0px;
    border-collapse: collapse;
}
div.AssunzioniNew_orari table.tab_orari th,
div.Contratti_orari table.tab_orari th{
    font-weight: 600;
    padding: 8px 6px;
    background: rgba(0,0,0,.04);
    border-bottom: 2px solid var(--c3-accent, #009BC4);
    color: var(--c3-accent, #007090);
    text-align: center;
    white-space: nowrap;
}
div.AssunzioniNew_orari table.tab_orari tr.sotto_testata th,
div.Contratti_orari table.tab_orari tr.sotto_testata th{
    font-weight: 400;
    font-size: var(--c3-fs-xs, 12px);
    border-bottom: 1px solid rgba(0,0,0,.12);
    padding-top: 0px;
}
div.AssunzioniNew_orari table.tab_orari td,
div.Contratti_orari table.tab_orari td{
    padding: 6px 5px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    text-align: center;
    vertical-align: middle;
}
/*  La prima colonna: il nome del giorno con la sua spunta, a sinistra. */
div.AssunzioniNew_orari table.tab_orari th.c_gg,
div.Contratti_orari table.tab_orari th.c_gg,
div.AssunzioniNew_orari table.tab_orari td.c_gg,
div.Contratti_orari table.tab_orari td.c_gg{
    text-align: left;
    padding-left: 8px;
    white-space: nowrap;
    font-weight: 600;
    color: #1F2A33;
}
div.AssunzioniNew_orari table.tab_orari td.c_gg input[type=checkbox],
div.Contratti_orari table.tab_orari td.c_gg input[type=checkbox]{
    transform: scale(1.2);
    margin-right: 8px;
    cursor: pointer;
}
div.AssunzioniNew_orari table.tab_orari td.c_ore,
div.Contratti_orari table.tab_orari td.c_ore{
    width: 130px;
    font-weight: 700;
    color: #1F2A33;
    font-variant-numeric: tabular-nums;
}
div.AssunzioniNew_orari table.tab_orari td.c_r,
div.Contratti_orari table.tab_orari td.c_r{ width: 38px; }
div.AssunzioniNew_orari table.tab_orari td.c_r input[type=checkbox],
div.Contratti_orari table.tab_orari td.c_r input[type=checkbox]{ transform: scale(1.25); cursor: pointer; }
div.AssunzioniNew_orari table.tab_orari td.c_dup,
div.Contratti_orari table.tab_orari td.c_dup{ width: 38px; }
div.AssunzioniNew_orari table.tab_orari td.c_dup i,
div.Contratti_orari table.tab_orari td.c_dup i{ cursor: pointer; color: var(--c3-accent, #0095d6); }
/*  Le caselle degli orari: larghe quanto basta a scrivere hh:mm, non di piu'.
    E le colonne degli orari si stringono con loro: lo spazio che avanza se lo
    prende la prima colonna, quella dei giorni, cosi' la tabella resta larga
    quanto la finestrella ma senza vuoti in mezzo (chiesto da lei il
    04/09/2026). */
div.AssunzioniNew_orari table.tab_orari td input[type=text],
div.Contratti_orari table.tab_orari td input[type=text]{
    width: 72px !important;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
div.AssunzioniNew_orari table.tab_orari td.c_f1,
div.Contratti_orari table.tab_orari td.c_f1,
div.AssunzioniNew_orari table.tab_orari td.c_f2,
div.Contratti_orari table.tab_orari td.c_f2{ width: 110px; }
/*  La prima colonna non ha una larghezza sua: si prende quello che resta. */
div.AssunzioniNew_orari table.tab_orari th.c_gg,
div.Contratti_orari table.tab_orari th.c_gg,
div.AssunzioniNew_orari table.tab_orari td.c_gg,
div.Contratti_orari table.tab_orari td.c_gg{ width: auto; }
/*  Le tendine degli orari: ore del giorno, ingressi e uscite. Sono cinque per
    riga, quindi si tengono strette - quanto basta per "08:00" e la freccetta -
    se no la settimana non ci sta nella finestrella. */
div.AssunzioniNew_orari table.tab_orari select,
div.Contratti_orari table.tab_orari select{
    width: 104px !important;
    min-width: 0px;
    display: inline-block;
    padding-left: 4px;
    padding-right: 2px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/*  La tendina delle ore un po' piu' larga delle altre: da vuota ci dev'essere
    scritto "Ore totali" per intero (chiesto da lei il 04/09/2026). */
div.AssunzioniNew_orari table.tab_orari td.c_ore select,
div.Contratti_orari table.tab_orari td.c_ore select{ width: 124px !important; font-weight: 700; }
div.AssunzioniNew_orari table.tab_orari .separatore,
div.Contratti_orari table.tab_orari .separatore{ margin: 0px 6px; opacity: .6; }
/*  Un giorno non spuntato resta in riga ma spento: si vede che c'e' e che e'
    escluso, senza far ballare la tabella. */
div.AssunzioniNew_orari table.tab_orari tr.spenta,
div.Contratti_orari table.tab_orari tr.spenta{ opacity: .45; }
/*  La settimana e' larga: se non ci sta, scorre lei, non la finestrella. */
div.AssunzioniNew_orari div.tab_orari_scroll,
div.Contratti_orari div.tab_orari_scroll{ overflow-x: auto; }
div.AssunzioniNew_orari .riepilogo_orari,
div.Contratti_orari .riepilogo_orari{ border: 1px solid var(--c3-accent, #009BC4); background: transparent; }
div.AssunzioniNew_orari .lbl_fx.carica_predefiniti,
div.Contratti_orari .lbl_fx.carica_predefiniti{ margin-left: 12px; font-size: .85em; }


/** PREVENTIVI **/

div.Preventivi form.TAB {
    max-width: 1200px !important;
}
div.Preventivi div.BOX_ACTION div.ACTION {
    max-width: 1200px !important;
}
div.Preventivi div.BOX form.TAB{
    padding-left: 15px;
}
div.Preventivi div.BOX form.TAB a.fcs_group_checkbox label{
    margin-left: 21px; 
    text-indent: -21px;
}
div.Preventivi div.BOX form.TAB div.sub_title{
    width: calc(100% + 18px);
    margin-left: -14px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;;
    color: #0095d6;
    border-bottom: 6.5px solid #C7E6ED;
}
/** 
div.Preventivi div.BOX form.TAB div.label{
    font-size: 18px;
    font-weight: 700;;
    color: var(--color1);
}
**/
div.Preventivi input.number.pagaccnl.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.pagaccnl.num2_1 {
    width: 120px !important;
}
div.Preventivi input.number.superminimo.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.imp_libero.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.imp_paga_maggiorata.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.imp_paga_maggiorata.num2_1 {
    width: 120px !important;
}
div.Preventivi input.number.tot_paga_maggiorata.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.tot_paga_maggiorata.num2_1 {
    width: 120px !important;
}
div.Preventivi input.number.imp_amministrazione.no_dot {
    width: 150px !important;
    height: 28px !important;
}
div.Preventivi .bt-row.perc-99 {
    justify-content: flex-end;
}
div.Preventivi input.date.data_inizio {
    font-size: 23px !important;
}
div.Preventivi input.date.data_fine {
    font-size: 23px !important;
}
div.Preventivi input.date.data_stampa {
    font-size: 23px !important;
}
div.Preventivi input.number.pagaccnl.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.pagaccnl.num2_1 {
    width: 120px !important;
}
div.Preventivi input.number.superminimo.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.imp_libero.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.imp_paga_maggiorata.no_dot {
    width: 120px !important;
}
div.Preventivi input.number.imp_amministrazione.no_dot {
    width: 160px !important;
}
div.Preventivi input.number.tot_paga_maggiorata.no_dot {
    width: 120px !important;
}
div.Preventivi select.combo.ore_inps {
    font-weight: bold;
}

/** FINE PREVENTIVI **/

/** TUTORIAL **/

div.Tutorial .video-box-wrapper {
    border: 1px solid var(--color1); 
    border-radius: 10px;
    padding: 10px;
    margin-top: 5px;
    position: relative; 
    display: block; 
    text-align: center; 
    overflow: hidden; 
}
div.Tutorial .video-box-wrapper .video-overlay-btn {
    position: absolute; 
    bottom: 5px;        
    left: 50%;           
    transform: translateX(-50%);
    width: 80%; 
    max-width: 150px; 
    z-index: 10; 
    text-align: center;
    margin: 0;
    padding: 0;
}
div.Tutorial .video-box-wrapper .video-placeholder-default {
    width: 100%; 
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.Tutorial .video-box-wrapper .video-placeholder-default img {
    width: 100%; 
    height: auto;
    max-height: 120px; 
    object-fit: cover; 
}
div[f4m_type="GRID"][name="tipologie_tutorial"] {
    position: relative;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    overflow: auto;
    overflow-y: auto;
    overflow-x: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: black; 
    border: 1px solid var(--colore-bordo-neutro);
    background-color: var(--colore-sfondo-pagina); 
    font-size: 14px; 
    border-radius: 6px; 
    
}
div[f4m_type="GRID"][name="tipologie_tutorial"] div.HEAD {
    display: inline-block;
    overflow-y: hidden;
    overflow-x: visible;
    position: sticky;
    top: 0;
    z-index: 2;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 30px; 
    line-height: 30px;
    padding-bottom: 8px; 
    border-bottom: #0095d6 1px solid;
    background: var(--sfondo-leggero-primario) !important; 
    background-color: var(--sfondo-leggero-primario) !important;
    color: black; 
    font-weight: 600; 
    font-size: 15px;
}
div[f4m_type="GRID"][name="tipologie_tutorial"][check_color="true"] table tbody tr[check="true"] {
    background-color: var(--sfondo-selezione-attiva) !important;
}
div[f4m_type="GRID"][name="tipologie_tutorial"] * {
    border-color: #0095d6 !important;
}
div[f4m_type="GRID"][name="tipologie_tutorial"] table tbody tr:hover {
    background-color: var(--sfondo-leggero-primario);
    cursor: pointer; 
}
div[f4m_type="GRID"][name="tipologie_tutorial"] table th, 
div[f4m_type="GRID"][name="tipologie_tutorial"] table td {
    border-bottom: 1px solid var(--colore-bordo-neutro) !important; 
    word-break: break-word; 
    overflow: hidden;
    box-sizing: border-box;
    padding: 7px 5px; 
}

/** FINE TUTORIAL **/

/** FAMIGLIA **/

div.Famiglie .BOX .TAB
{
    background-color: var(--colorbianco);
}
div[f4m_prototype=tab] div.Famiglie .BOX .TAB.no_gap:before
{
    background-color: var(--colorbianco);
}
div.Famiglie div[f4m_type="READONLY"]:not([f4m_aria="NOTE"]) {
    padding: var(--margin0);
    border: 1px solid #c0c0c0;
    border-radius: var(--radius1);
    line-height: 28px;
}


div.Famiglie_new .BOX .TAB
{
    background-color: var(--colorbianco);
}
div[f4m_prototype=tab] div.Famiglie_new .BOX .TAB.no_gap:before
{
    background-color: var(--colorbianco);
}
div.Famiglie_new div[f4m_type="READONLY"]:not([f4m_aria="NOTE"]) {
    padding: var(--margin0);
    border: 1px solid #c0c0c0;
    border-radius: var(--radius1);
    line-height: 28px;
}

/** FINE FAMIGLIA **/

/**OPERATORE**/
div.Operatori div[f4m_type="READONLY"]:not([f4m_aria="NOTE"]) {
    padding: var(--margin0);
    border: 1px solid #c0c0c0;
    border-radius: var(--radius1);
    line-height: 28px;
}

/** SLICK SLIDER **/

.slick-arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	background-color: var(--color1);
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.slick-arrow i {
	color: var(--colorbianco0);
	font-size: 20px;
	line-height: 20px;
}
.slick-prev-arrow {
	left: 5px;
}
.slick-next-arrow {
	right: 5px;
}

/** FINE SLICK SLIDER **/

/* COLLAPSIBLE*/

.collapsible-box {
    background-color: white;
    color: var(--color1);
    border-left: 2px solid var(--color1); 
    padding: 0.75rem 1.25rem;
    font-size: 1.2rem;   
    width: 100%;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.collapsible-content {
    margin-top: 1rem;
}
.collapsible-header {
    background-color: var(--color1);
    color: white;
    padding: 5px;
    cursor: pointer; 
    border-radius: 10px; 
}
.left-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.50rem;
}

/** FINE COLLAPSIBLE **/

/** NOTIFICA TICKET **/

.ticket_notifica {
    background-color: #ff0000; 
    color: #ffffff; 
    border-radius: 50%; 
    padding: 2px 6px; 
    font-size: 12px; 
    font-weight: bold; 
    position: absolute; 
    top: -5px; 
    right: -10px; 
    display: inline-block; 
    min-width: 20px; 
    text-align: center;
}

/** FINE NOTIFICA TICKET **/
        
/** SUPERMIX **/

div.sub_menu div.btn span.button {
    position: relative;
    top: -1px;
    right: -1px;
}

#stateButton {
    background-color: var(--color2);
}
.gs-check-center label {
    font-size: 1.2em !important;
}
.js_hidden {
    display: none;
}
.rotate {
    transition: transform 0.3s ease;
}
.rotate.down {
    transform: rotate(0deg);
}
.rotate.up {
    transform: rotate(180deg);
}
.btn-info.active {
    background-color: #004085 !important; /* Bootstrap dark blue shade */
    border-color: #004085 !important;
}
.form-check-input {
    margin-right: 6px; /* small gap between dot and label text */
}
.question-text {
    font-size: 14px;
    font-style: italic;
    color: #6c757d; /* Bootstrap muted gray */
    line-height: 1.4;
}
.gs-check-center label {
    font-size: 18px !important;
}

.print-groups.error-outline {
    outline: 3px solid rgba(220,53,69,0.95); /* strong red */
    outline-offset: 6px;
    border-radius: 6px;
    /* fallback if outline gets ignored: subtle box shadow */
    box-shadow: 0 0 0 3px rgba(220,53,69,0.12);
}
.print-groups .error-text {
    display: none;
    color: #dc3545;
    margin-top: .5rem;
    font-size: .9rem;
}
.print-groups.error-outline .error-text { display: block; }

.detail-box {
    border-top: 3px solid #00a0e3; /* blue line */
    padding-top: 5px;
    margin-top: 10px;
    font-size: 0.9rem;
    }
.detail-title {
    color: #00a0e3;
    font-weight: bold;
    margin-bottom: 5px;
}
.detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #ccc;
}
.detail-label {
    display: flex;
    align-items: center;
    color: #555;
}
.detail-label::before {
    content: "●";
    color: #00a0e3;
    font-size: 0.7rem;
    margin-right: 6px;
}  
.detail-value {
    font-weight: 500;
}

#stateModal .form-check:hover {
    background-color: #f1f9ff;
    transition: background-color 0.3s ease;
}
#stateModal .form-check-input:checked + .form-check-label {
    font-weight: 600;
}

.image-btn {
    /*width: 80px;
    height: 80px;*/
    width: 40px;
    height: 40px;
    /**/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F54927; /*red*/
    border: 2px solid #00a0e3;    
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    cursor: pointer;
}
.image-btn img {
    width: 85%; 
    height: 85%;
    object-fit: contain;
    
}

.default-style {
    border-color:  #00a0e3 !important; /* Light grey border */
    background-color: #6d6d6d69 !important; /* Very light grey background */
    color: #495057 !important; /* Dark grey text */
    transition: all 0.2s ease-in-out;
}

.clicked-style {
    border-color:  #00a0e3 !important; 
    background-color: #28a745 !important; /* green */
}

.processing-style {
    border-color: #00a0e3  !important; 
    background-color: #ffc107 !important; /* yellow */
    color: #212529 !important; /* Dark text for better contrast on yellow */
    /*cursor: wait; /* Changes cursor to a loading spinner */
    opacity: 0.8;
}

.status-red {
	color: #ff0000 !important;
	font-weight: bold;
}

.status-green {
	color: #008000 !important;
	font-weight: bold;
}

.box_button_delete {
    display: none !important;
}

.sex-disabled {
    pointer-events: none; 
    opacity: 1;           
}

input.date.datanascita {
    font-size: 23px !important;
}
input.date.data_stampa {
    font-size: 23px !important;
}

/** FINE SUPERMIX **/

/*  IL + SULLA TESTATA della sezione degli orari, in TUTTE E DUE le schede
    (fino al 04/09/2026 era scritto solo per la Richiesta, e sul contratto il
    piu' usciva gigante e senza cerchietto). Il core veste quel
    bottoncino solo dentro "div.sub_menu" (e' li' che sta il + degli allegati):
    qui la testata e' di un'altra classe, quindi senza queste regole il piu'
    uscirebbe gigante e senza il suo cerchietto.
    Il bottone e' appoggiato SOPRA la barra (position absolute) e non dentro il
    flusso: se no la barra diventerebbe piu' alta di tutte le altre. */
div.AssunzioniNew div.collapsible-header,
div.Contratti div.collapsible-header{
    position: relative;
}
div.AssunzioniNew div.collapsible-header div.btn,
div.Contratti div.collapsible-header div.btn{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    padding: 0px;
    margin: 0px;
    line-height: 0;
}
div.AssunzioniNew div.collapsible-header span.button.sqr_plus,
div.Contratti div.collapsible-header span.button.sqr_plus{
    background-color: var(--colorbianco0, #ffffff);
    color: var(--color1, #0e7ab5) !important;
    border: 2px solid var(--colorbianco0, #ffffff);
    height: 20px;
    width: 20px;
    min-width: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0px;
    box-shadow: none;
}
div.AssunzioniNew div.collapsible-header span.button.sqr_plus i,
div.Contratti div.collapsible-header span.button.sqr_plus i{
    position: static;
    top: 0px !important;
    left: 0px !important;
    font-size: 12px !important;
    margin: 0px;
}

/*  Negli avvisi: prima la riga che introduce, poi le mancanze a capo,
    una per riga. Devono essere due blocchi, se no finiscono affiancate. */
div.manca_intro{
    display: block;
    text-align: center;
    margin-bottom: 6px;
}
ul.elenco_manca{
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0px auto;
    padding: 0px;
    list-style: none;
    text-align: left;
}
ul.elenco_manca li{
    font-weight: bold;
    padding: 3px 0px 3px 14px;
    position: relative;
}
ul.elenco_manca li:before{
    content: "\2022";
    position: absolute;
    left: 0px;
    color: var(--color1, #0e7ab5);
}

/*  ===== ORARI DI LAVORO =====
    La settimana in sola lettura sulla scheda, e la finestrella che la
    modifica (AssunzioniNew.orari). Stessa tabella per tutti e due, cosi'
    quello che si vede nella finestrella e' quello che resta sulla scheda. */
div.tab_orari_scroll{
    overflow-x: auto;
    margin-top: 10px;
}
table.tab_orari{
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    font-size: 0.95em;
}
table.tab_orari th{
    background: rgba(0,0,0,.04);
    color: var(--c3-ink, #123);
    font-weight: 600;
    text-align: center;
    padding: 6px 8px;
    border: 1px solid var(--c3-line2, #D8E3EC);
    white-space: nowrap;
}
table.tab_orari tr.sotto_testata th{
    font-weight: 400;
    font-style: italic;
    font-size: 0.85em;
    padding: 3px 8px;
}
table.tab_orari td{
    padding: 4px 8px;
    border: 1px solid var(--c3-line2, #D8E3EC);
    text-align: center;
    vertical-align: middle;
    height: 38px;
}
table.tab_orari td.c_gg{
    text-align: left;
    white-space: nowrap;
    width: 170px;
}
table.tab_orari td.c_gg label{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0px;
    cursor: pointer;
    font-weight: 600;
}
table.tab_orari th.c_ore, table.tab_orari td.c_ore{ width: 96px; font-weight: 600; }
table.tab_orari th.c_r,   table.tab_orari td.c_r{   width: 44px; }
table.tab_orari th.c_dup, table.tab_orari td.c_dup{ width: 46px; }
table.tab_orari tbody tr:nth-child(even){ background: rgba(0,0,0,.018); }
table.tab_orari td input[type="text"]{
    width: 78px;
    text-align: center;
    margin: 0px auto;
}

/*  Come nel cloud: sul giorno in cui non si lavora non si vede nessun
    comando, e senza la spunta della seconda fascia il rientro non c'e'. */
table.tab_orari tr.riga_gg.spenta td.c_gg label{ font-weight: 400; color: var(--c3-muted, #8CA3B5); }
table.tab_orari tr.riga_gg.spenta td.c_ore,
table.tab_orari tr.riga_gg.spenta td.c_f1 select,
table.tab_orari tr.riga_gg.spenta td.c_r input,
table.tab_orari tr.riga_gg.spenta td.c_dup i{ visibility: hidden; }
table.tab_orari tr.riga_gg.senza_rientro td.c_f2 select{ visibility: hidden; }

/*  L'iconcina che copia l'orario del giorno sugli altri giorni spuntati:
    e' il "Duplica orari" del vecchio riquadro. */
table.tab_orari td.c_dup i{
    color: var(--color1, #0e7ab5);
    cursor: pointer;
    font-size: 15px;
    opacity: .75;
}
table.tab_orari td.c_dup i:hover{ opacity: 1; }

/*  Sulla scheda si legge soltanto: si modifica dal + o cliccando la riga. */
table.tab_orari.sola_lettura tbody tr{ cursor: pointer; }
table.tab_orari.sola_lettura tbody tr:hover{ background: rgba(0,0,0,.05); }
table.tab_orari.sola_lettura tbody tr.vuota td{ color: var(--c3-muted, #8CA3B5); }
div.nessun_orario{
    margin-top: 12px;
    font-style: italic;
    color: var(--c3-muted, #8CA3B5);
}

/*  ===== LA FINESTRELLA =====
    Larga il giusto per la settimana, non a tutto schermo. Il bordo del BOX
    non serve: la cornice ce l'ha gia' la finestrella, e due bordi uno dentro
    l'altro fanno l'effetto "incollato". */
/*  La finestrella prende tutta la larghezza che il framework le da'.
    Serve dirlo: il core la disegna `inline-block`, e siccome la settimana sta
    dentro un riquadro che scorre (overflow-x:auto), una scatola inline-block si
    stringe sul minimo e il risultato erano 400px con la tabella che sbordava e
    le etichette una sopra l'altra. */
/*  La finestrella e' larga quanto le serve, non quanto lo schermo: la settimana
    con le due fasce sta in circa 780px, e allargarla oltre vorrebbe dire o un
    vuoto a destra o una colonna dei giorni mezza vuota (viste tutte e due il
    04/09/2026). Sotto gli 800px si stringe da sola e la tabella scorre.
    Il `width` serve perche' il core disegna la sottoscheda `inline-block`: senza,
    con la tabella dentro un riquadro che scorre, si stringerebbe sul minimo. */
/*  ANCHE LA FINESTRA SI STRINGE, non solo il suo contenuto: il core disegna
    ogni sottoscheda in un riquadro da 1024px fissi, e per la settimana degli
    orari erano cento pixel di bianco per lato. Si restringe SOLO questa
    finestra, riconoscendola dal contenuto (`:has`), cosi' le altre sottoschede
    del portale (per esempio le Valutazioni sull'Operatore) restano come sono.
    Il centraggio lo fa il margine automatico del core, che si rifa' da solo
    sulla nuova larghezza. */
div.F4M_SUBTAB:has(> div.AssunzioniNew_orari),
div.F4M_SUBTAB:has(> div.Contratti_orari){
    /*  Larga quanto serve alla settimana: con le tendine la tabella e' larga
        circa 800px, e con 1000 ci sta tutta senza scorrere a destra e a
        sinistra (chiesto da lei il 04/09/2026). */
    width: 1000px;
    max-width: 96vw;
    /*  IL FONDO BIANCO VA DETTO. Dietro la sottoscheda c'e' un velo scuro
        (F4M_SUBTAB_BOX, nero al 60%): se il riquadro resta trasparente il velo
        traspare e la finestrella si vede tutta spenta, come se fosse disattivata
        - e' quello che succedeva aprendola dal Contratto (04/09/2026). */
    background: var(--colorbianco0, #ffffff);
}

div.AssunzioniNew_orari,
div.Contratti_orari{
    min-width: 320px;
    width: 100%;
    max-width: 960px;
    margin: 0px auto;
    box-sizing: border-box;
}
div.AssunzioniNew_orari div.BOX,
div.Contratti_orari div.BOX{ padding: 14px 18px 18px 18px; }
div.AssunzioniNew_orari div.BOX,
div.Contratti_orari div.BOX,
div.AssunzioniNew_orari form.TAB,
div.Contratti_orari form.TAB{
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}
div.AssunzioniNew_orari div.tit_orari,
div.Contratti_orari div.tit_orari{
    font-size: 1.15em;
    font-weight: 600;
    color: var(--color1, #0e7ab5);
    margin-bottom: 10px;
}
div.AssunzioniNew_orari div.sotto_tit,
div.Contratti_orari div.sotto_tit{
    font-weight: 600;
    font-style: italic;
    color: var(--color1, #0e7ab5);
    margin: 14px 0px 4px 0px;
}
div.AssunzioniNew_orari div.riga_sotto_tit,
div.Contratti_orari div.riga_sotto_tit{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
}
div.AssunzioniNew_orari div.riga_sotto_tit div.sotto_tit,
div.Contratti_orari div.riga_sotto_tit div.sotto_tit{ margin: 0px; }
div.AssunzioniNew_orari span.bt_standard,
div.Contratti_orari span.bt_standard{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--color1, #0e7ab5);
    color: var(--color1, #0e7ab5);
    background: var(--colorbianco0, #ffffff);
    font-size: 0.88em;
    cursor: pointer;
    white-space: nowrap;
}
div.AssunzioniNew_orari span.bt_standard:hover,
div.Contratti_orari span.bt_standard:hover{
    background: var(--color1, #0e7ab5);
    color: var(--colorbianco0, #ffffff);
}

/*  La striscia con le due persone e il regime. Le regole di div.AssunzioniNew
    non arrivano qui: la finestrella e' un contenitore suo. */
div.AssunzioniNew_orari div.riga_info,
div.Contratti_orari div.riga_info{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: 0px 0px 4px 0px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(0,0,0,.035);
}
div.AssunzioniNew_orari div.voce_info,
div.Contratti_orari div.voce_info{
    display: flex;
    flex-direction: column;
    min-width: 150px;
    max-width: 420px;
}
div.AssunzioniNew_orari div.voce_info span,
div.Contratti_orari div.voce_info span{
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--c3-muted, #8CA3B5);
}
div.AssunzioniNew_orari div.voce_info b,
div.Contratti_orari div.voce_info b{
    font-size: 0.95em;
    color: var(--c3-ink, #123);
    word-break: break-word;
}

div.AssunzioniNew_orari div.riga_totali,
div.Contratti_orari div.riga_totali{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--c3-surface2, #EEF4F9);
    border-radius: var(--radius1, 10px);
}
div.AssunzioniNew_orari div.voce_tot,
div.Contratti_orari div.voce_tot{ display: flex; flex-direction: column; min-width: 170px; }
div.AssunzioniNew_orari div.voce_tot span,
div.Contratti_orari div.voce_tot span{
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--c3-muted, #8CA3B5);
}
div.AssunzioniNew_orari div.voce_tot b,
div.Contratti_orari div.voce_tot b{ font-size: 1.1em; color: var(--c3-ink, #123); }
div.AssunzioniNew_orari div.nota_orari,
div.Contratti_orari div.nota_orari{
    margin-top: 10px;
    font-size: 0.85em;
    font-style: italic;
    color: var(--c3-muted, #8CA3B5);
}

/*  La finestrella si comporta come le altre sottoschede del portale
    (Valutazioni, Allegati): il framework nasconde la scheda e la mette in
    mezzo. Qui si aggiunge solo l'ombra, per staccarla dallo sfondo. */
div.F4M_SUBTAB_BOX:has(div.AssunzioniNew_orari){
    padding: 24px 16px;
}
div.F4M_SUBTAB_BOX:has(div.AssunzioniNew_orari) div.F4M_SUBTAB{
    background: var(--colorbianco0, #ffffff);
    box-shadow: 0px 18px 50px rgba(0,0,0,.35);
}

/*  Negli avvisi: prima la riga che introduce, poi le voci a capo, una per
    riga. Devono essere due blocchi, se no finiscono affiancate. */
div.manca_intro{
    display: block;
    text-align: center;
    margin-bottom: 6px;
}
ul.elenco_manca{
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 0px auto;
    padding: 0px;
    list-style: none;
    text-align: left;
}
ul.elenco_manca li{
    padding: 3px 0px 3px 14px;
    position: relative;
}
ul.elenco_manca li:before{
    content: "\2022";
    position: absolute;
    left: 0px;
    color: var(--color1, #0e7ab5);
}

/*  IMPORTANTE: il tema del portale nasconde le caselle di spunta normali
    (display:none) perche' ne disegna una sua. Qui servono quelle vere, e
    vanno rimesse in vista: senza, la tabella sembra vuota e non si riesce a
    spuntare niente - ne' il giorno, ne' la seconda fascia. */
table.tab_orari input[type="checkbox"]{
    display: inline-block !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    position: static !important;
    width: 17px;
    height: 17px;
    min-width: 17px;
    margin: 0px;
    padding: 0px;
    opacity: 1;
    cursor: pointer;
    accent-color: var(--color1, #0e7ab5);
}

/*  ===== NERO E AZZURRO, NON TUTTO AZZURRO =====
    Nelle strisce in sola lettura e nella settimana degli orari il testo
    ereditava l'azzurro del tema e finiva per essere azzurro dalla prima
    all'ultima parola. Qui si dice chi e' cosa: etichette in grigio, contenuto
    in nero, e l'azzurro tenuto per il dato che conta davvero (le ore) e per
    quello su cui si clicca. */
div.Contratti .etichetta_info,
div.AssunzioniNew .etichetta_info{
    color: var(--color1, #0e7ab5) !important;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: 1;
}
div.Contratti .valore_info,
div.AssunzioniNew .valore_info{
    color: #1F2A33 !important;
}
/*  Quello su cui si clicca resta azzurro: e' l'unico modo per accorgersene. */
div.Contratti .valore_info .lbl_fx,
div.AssunzioniNew .valore_info .lbl_fx,
div.Contratti .valore_info a,
div.AssunzioniNew .valore_info a{ color: var(--color1, #0e7ab5) !important; }

/*  La settimana in sola lettura sulla scheda. */
table.tab_orari th{ color: var(--color1, #0e7ab5); }
table.tab_orari tr.sotto_testata th{ color: var(--color1, #0e7ab5); opacity: .75; }
table.tab_orari td.c_gg{ color: #1F2A33; }
table.tab_orari td.c_f1, table.tab_orari td.c_f2{ color: #1F2A33; }
/*  Nella griglia della scheda le celle degli orari si chiamano v1..v4. */
table.tab_orari.sola_lettura td.c_f1,
table.tab_orari.sola_lettura td.c_f2,
table.tab_orari td.v1, table.tab_orari td.v2,
table.tab_orari td.v3, table.tab_orari td.v4{
    color: #1F2A33;
    font-variant-numeric: tabular-nums;
}
/*  Le ore del giorno sono il numero che si va a cercare: restano nere come
    il resto del contenuto, ma in grassetto, cosi' si fanno trovare lo stesso. */
table.tab_orari td.c_ore{ color: #1F2A33; font-weight: 700; }
table.tab_orari tr.riga_gg.spenta td.c_gg,
table.tab_orari tr.riga_gg.vuota td.c_gg{ color: #9AA5AE; }

/*  ===== RESPIRO E ALLINEAMENTO DELLE DUE SCHEDE =====
    (Richiesta d'assunzione e Contratto di lavoro: stesse regole, sono gemelle)
    Due difetti che si vedevano a occhio:
    - lo spazio fra le righe era scritto a mano su ogni riga (margin-top:15px),
      e con le righe che compaiono solo in certi casi diventava irregolare;
    - ogni tipo di campo aveva la larghezza che gli dava il tema (le date 150px,
      i numeri 197px, il testo tutta la colonna), percio' i bordi destri non
      cadevano mai sulla stessa linea.
    Qui lo spazio lo decide il foglio di stile, e ogni campo riempie la sua
    colonna: sono le colonne a dare il ritmo, come in tutte le altre schede. */
div.AssunzioniNew div.bt-row,
div.Contratti div.bt-row{ margin-top: 24px; }
div.AssunzioniNew div.bt-row:first-child,
div.Contratti div.bt-row:first-child{ margin-top: 0px; }
div.AssunzioniNew div.gs-label,
div.Contratti div.gs-label{ margin-bottom: 2px; }

/*  Serve !important, e non e' un capriccio: i campi numerici e le date se la
    larghezza se la scrivono da soli sull'elemento (style="width:185px"), e uno
    stile scritto li' batte qualunque foglio di stile. */
div.AssunzioniNew div.elem > input,
div.Contratti div.elem > input,
div.AssunzioniNew div.elem > select,
div.Contratti div.elem > select,
div.AssunzioniNew div.elem > textarea,
div.Contratti div.elem > textarea{
    /*  Le stesse misure della scheda Famiglie: il campo riempie la colonna ma
        lascia 3px per lato, se no due campi affiancati si toccano.
        Il box-sizing serve perche' i numerici, senza, sommano l'imbottitura
        alla larghezza e restano piu' larghi degli altri. */
    width: calc(100% - 6px) !important;
    margin: 0px 3px;
    box-sizing: border-box;
}

/*  Le date restano della loro misura: allungarle per riempire la colonna le
    faceva sembrare campi di testo, e una data e' sempre lunga uguale. */
div.AssunzioniNew div.elem > div.f4m_wrap_date,
div.Contratti div.elem > div.f4m_wrap_date{ margin: 0px 3px; }

/*  I gruppi di pallini (convivenza, tabella G) hanno gia' la loro altezza:
    qui basta che non si incollino all'etichetta. */
div.AssunzioniNew div.gs-radio-center,
div.Contratti div.gs-radio-center{ margin-top: 2px; }

/*  I gruppi di pallini occupano l'altezza di un campo (40px) anche quando sono
    una riga sola di "Si / No": e' li' che si formavano i vuoti piu' grossi.
    Qui prendono l'altezza che serve loro. */
div.AssunzioniNew div.elem.gs-radio-center,
div.Contratti div.elem.gs-radio-center{
    min-height: 0px;
    padding: 4px 0px 0px 0px;
    line-height: 22px;
}
div.AssunzioniNew div.elem.gs-radio-center label,
div.Contratti div.elem.gs-radio-center label{ margin: 0px 18px 0px 0px; }

/*  Le sezioni respiravano troppo in fondo, prima della barra successiva. */
div.AssunzioniNew div.collapsible-content,
div.Contratti div.collapsible-content{ padding-bottom: 6px; }
div.AssunzioniNew div.collapsible-box,
div.Contratti div.collapsible-box{ margin-bottom: 10px; }

/*  ===== NIENTE BUCHI A DESTRA (scheda Contratti) =====
    La griglia bootstrap da' alle colonne una larghezza fissa in dodicesimi:
    se una riga non arriva a dodici - perche' un campo si vede solo in certi
    casi, o perche' la riga ne ha tre e non quattro - l'avanzo resta bianco a
    destra. Qui le colonne, oltre alla loro larghezza minima, si prendono
    l'avanzo: la riga finisce sempre sul bordo destro, e quando un campo
    condizionato non si vede gli altri si allargano da soli invece di lasciare
    il vuoto. Il max-width va tolto perche' bootstrap lo cabla insieme alla
    larghezza (flex: 0 0 25%; max-width: 25%) e senza toglierlo non si allarga
    niente.
    Fanno eccezione le colonne delle date (col_data): la data e' sempre lunga
    uguale e allargarle vorrebbe dire spostare il bianco dentro la colonna
    invece di toglierlo. */
div.Contratti div.bt-row > [class*="col-"]:not(.col_data){
    flex-grow: 1;
    max-width: 100%;
}
div.Contratti div.bt-row > .col_data{ min-width: 165px; }

/*  Quando una riga va a capo (schermo stretto, o tutti i campi condizionati
    aperti) fra i due tronconi ci vuole lo stesso spazio che c'e' fra due
    righe: il margine fra righe qui sopra dentro la riga non arriva. */
div.Contratti div.bt-row{ row-gap: 20px; }

/*  I campi di una riga finiscono tutti sulla stessa linea, anche quando
    un'etichetta va a capo e le altre no: la colonna diventa una colonnina in
    verticale, l'etichetta resta in alto e il campo scende in fondo. Senza
    questo, in una riga di cinque campi corti (ferie, preavviso, permesso,
    patrono) i riquadri restavano sfalsati di una riga di testo. */
div.Contratti div.bt-row > [class*="col-"]{
    display: flex;
    flex-direction: column;
}
div.Contratti div.bt-row > [class*="col-"] > div.gs-form-element{
    display: flex;
    flex-direction: column;
    height: 100%;
}
div.Contratti div.bt-row > [class*="col-"] > div.gs-form-element > div.elem,
div.Contratti div.bt-row > [class*="col-"] > div.elem{ margin-top: auto; }

/*  ===== LA SETTIMANA DEGLI ORARI (scheda Contratti) =====
    A sinistra la settimana, di fianco quello che la riassume: i tre totali e i
    due giorni di riposo. Prima la tabella si prendeva tutta la riga e i cinque
    campi stavano sotto, su due righe mezze vuote. */
div.Contratti div.riquadro_settimana,
div.AssunzioniNew div.riquadro_settimana{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0px 24px;
    margin-top: 12px;
}
div.Contratti div.riquadro_settimana > table.griglia_orari,
div.AssunzioniNew div.riquadro_settimana > table.griglia_orari{
    flex: 1 1 540px;
    width: auto;
    margin: 0px;
}
div.Contratti div.fianco_settimana,
div.AssunzioniNew div.fianco_settimana{
    flex: 1 1 290px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*  L'orario della giornata e' un campo di testo libero (in tabella e' un
    varchar da 50), e a video si legge male: cifre di larghezza diversa, testo
    piccolo come un'etichetta e un riquadro largo mezza scheda per scrivere
    "08:00-12:00". Qui si scrive grande, con le cifre tutte della stessa
    larghezza cosi' gli orari di giorni diversi restano incolonnati. */
div.Contratti table.griglia_orari td.orari input,
div.Contratti table.griglia_orari td.ore input{
    font-size: var(--c3-fs-md, 15px);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
/*  Il formato giusto, scritto una volta nell'intestazione: e' un promemoria,
    non un'etichetta, quindi piccolo e in grigio. */
div.Contratti table.griglia_orari th span.esempio_orari,
div.AssunzioniNew table.griglia_orari th span.esempio_orari{
    font-weight: 400;
    font-size: var(--c3-fs-xs, 12px);
    color: var(--c3-muted, #8CA3B5);
    margin-left: 8px;
    white-space: nowrap;
}
/*  Il segnaposto dentro le righe vuote (lo mette Contratti.js) si deve leggere
    come un suggerimento, non come un orario gia' scritto. */
div.Contratti table.griglia_orari td.orari input::placeholder{
    color: var(--c3-muted, #8CA3B5);
    opacity: .8;
    font-style: italic;
}





/*  I tre totali e i due giorni di riposo: si leggono, non si toccano.
    Li scrive la finestrella degli orari. */
/*  I cinque valori in sola lettura su due righe, tre e due, con le colonne
    tutte della stessa larghezza: cosi' stanno incolonnati invece di andare a
    capo dove capita. */
div.AssunzioniNew div.riga_totali_orari{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 24px;
    margin-top: 12px;
}
div.AssunzioniNew div.riga_totali_orari div.voce_info{ min-width: 0px; max-width: none; }
@media (max-width: 700px){
    div.AssunzioniNew div.riga_totali_orari{ grid-template-columns: repeat(2, 1fr); }
}

/*  I bottoni dentro la maschera di stampa. Nelle maschere del cloud erano due
    immagini (./img/print.png, ./img/gear.png) che su questo portale non
    esistono: si vedevano due segnaposti rotti. Ora sono bottoni veri, con la
    stessa icona e lo stesso azzurro di quelli di Ipotesi di spesa e Lettera di
    incarico, ma con l'etichetta accanto perche' qui non stanno nella barra in
    alto e da soli non si capirebbero. */
/*  La finestra sta appesa al corpo della pagina, fuori dalla scheda: le regole
    agganciate a div.AssunzioniNew non ci arrivano, per questo si nomina anche
    lei. */
div.AssunzioniNew .PRINT_BOX .bt_stampa,
div.Contratti .PRINT_BOX .bt_stampa,
#f4m_alert .PRINT_BOX .bt_stampa{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 12px 10px 0px 0px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--color1, #0e7ab5);
    background: var(--color1, #0e7ab5);
    color: var(--colorbianco0, #ffffff);
    font-size: 0.92em;
    cursor: pointer;
    white-space: nowrap;
}
div.AssunzioniNew .PRINT_BOX .bt_stampa:hover,
div.Contratti .PRINT_BOX .bt_stampa:hover,
#f4m_alert .PRINT_BOX .bt_stampa:hover{
    background: var(--colorbianco0, #ffffff);
    color: var(--color1, #0e7ab5);
}
div.AssunzioniNew .PRINT_BOX .bt_stampa i,
div.Contratti .PRINT_BOX .bt_stampa i,
#f4m_alert .PRINT_BOX .bt_stampa i{ font-size: 15px; }
/*  Dentro la finestra: i campi della maschera larghi come il riquadro, le
    etichette come nel resto del portale, e i due bottoni in fondo affiancati. */{ padding: 16px 18px 18px 18px; }
/*  La finestra vestita come quella di Ipotesi di spesa: intestazione azzurra,
    un riquadro con dentro i campi, e i bottoni nel piede. */{
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 18px 50px rgba(0,0,0,.35);
}
/*  I bottoni della maschera, spostati nel piede, prendono l'aria di quelli
    Bootstrap della finestra di Ipotesi di spesa. */{ margin: 0px; }

/*  ===== LA SETTIMANA IN SOLA LETTURA (Richiesta d'assunzione) =====
    Stesse colonne della scheda Contratti, ma qui non si scrive: si legge, e si
    cambia dalla finestrella degli orari (il + sulla testata o il clic su una
    riga). Le celle sono testo, non caselle: percio' vanno rialzate all'altezza
    che avevano i campi, se no la tabella si accartoccia. */
div.AssunzioniNew table.griglia_orari td.v_ore,
div.AssunzioniNew table.griglia_orari td.v_orari{
    height: 34px;
    font-size: var(--c3-fs-md, 15px);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
div.AssunzioniNew table.griglia_orari td.v_ore{ font-weight: 600; }
/*  Le righe si possono cliccare: si deve vedere. */
div.AssunzioniNew table.griglia_orari tbody tr.riga_gg{ cursor: pointer; }
div.AssunzioniNew table.griglia_orari tbody tr.riga_gg:hover{
    background: var(--c3-accent-l, #7ccdf3);
    background: color-mix(in srgb, var(--c3-accent, #0095d6) 12%, transparent);
}
/*  Un giorno non lavorato resta in riga ma spento: si vede che c'e' e che e'
    escluso, senza far ballare la tabella (lo stesso di AssOrari). */
div.AssunzioniNew table.griglia_orari tbody tr.giorno_spento td{ opacity: .45; }

/*  Un campo bloccato deve restare LEGGIBILE: il contratto e' fatto, quei valori
    si consultano ancora. Senza questa regola un campo disabilitato sbiadisce al
    punto che non si legge (nel cloud c'era la classe `disabledBlack` per lo
    stesso motivo). */
div.Contratti .campo_bloccato,
div.Contratti select.campo_bloccato,
div.Contratti input.campo_bloccato,
div.Contratti .campo_bloccato input,
div.Contratti .campo_bloccato select{
    color: var(--c3-text, #193264) !important;
    -webkit-text-fill-color: var(--c3-text, #193264);
    opacity: 1;
    background-color: var(--c3-bg, #f4f8fb);
    cursor: not-allowed;
}

/*  ===== LA FINESTRA DELLE STAMPE (scheda Contratti) =====
    Stessa forma di quella di Ipotesi di spesa: e' un avviso del framework
    (#f4m_alert) con il titolo in azzurro, [ANNULLA] in alto e un bottone
    STAMPA in fondo. Qui si veste solo il contenuto. */
#f4m_alert .tit_stampe{
    color: var(--c3-accent, #0095d6);
    font-weight: 700;
    font-size: var(--c3-fs-md, 15px);
}
/*  La finestra e' larga quanto basta ai campi, non di piu' (04/09/2026): con
    una sola scelta e due caselle corte, quattrocento pixel erano tutti bianchi. */
#f4m_alert .finestra_stampe{
    text-align: left;
    min-width: 400px;
    max-width: 620px;
}
#f4m_alert .finestra_stampe .gs-form-element{ margin-bottom: 12px; }
#f4m_alert .finestra_stampe .gs-label{
    color: var(--c3-accent, #0095d6);
    margin-bottom: 3px;
}
#f4m_alert .finestra_stampe select,
#f4m_alert .finestra_stampe input[type="text"],
#f4m_alert .finestra_stampe textarea{
    width: 100%;
    box-sizing: border-box;
}
/*  La maschera dei parametri del documento scelto: un riquadro, come nella
    finestra di Ipotesi di spesa. */
/*  Niente cornice attorno ai campi: su Ipotesi di spesa i campi stanno nella
    finestra e basta. Resta solo l'aria sopra e il limite d'altezza, per le
    maschere lunghe. */
#f4m_alert .PRINT_BOX:not(:empty){
    margin-top: 0px;
    max-height: 46vh;
    overflow: auto;
}
#f4m_alert .PRINT_BOX .label,
#f4m_alert .PRINT_BOX .gs-label{ color: var(--c3-accent, #0095d6); margin-bottom: 3px; }
/*  I bottoni della maschera che stampano non si vedono: a stampare e' il
    bottone STAMPA della finestra, uno solo, come su Ipotesi di spesa. Resta
    invece il bottone della firma, che stampa non e'. */
#f4m_alert .PRINT_BOX .btnPrintJasper,
#f4m_alert .PRINT_BOX .btnPrintSub{ display: none !important; }

/*  ===== I COLORI DELLA SETTIMANA =====
    In azzurro solo l'intestazione e il nome del giorno: sono le etichette.
    Le ore e gli orari sono il contenuto e vanno in nero, come in tutto il
    resto della scheda (chiesto da lei il 04/09/2026). */
div.Contratti table.griglia_orari th,
div.AssunzioniNew table.griglia_orari th,
div.Contratti table.griglia_orari td.giorno,
div.AssunzioniNew table.griglia_orari td.giorno{
    color: var(--c3-accent, #0095d6);
}
div.Contratti table.griglia_orari td.ore,
div.AssunzioniNew table.griglia_orari td.ore,
div.Contratti table.griglia_orari td.orari,
div.AssunzioniNew table.griglia_orari td.orari,
div.Contratti table.griglia_orari td.v_ore,
div.AssunzioniNew table.griglia_orari td.v_ore,
div.Contratti table.griglia_orari td.v_orari,
div.AssunzioniNew table.griglia_orari td.v_orari{
    color: #1F2A33;
}
/*  Il giorno spento resta grigio, etichetta e trattino insieme. */
div.Contratti table.griglia_orari tbody tr.giorno_spento td,
div.Contratti table.griglia_orari tbody tr.giorno_spento td.giorno,
div.AssunzioniNew table.griglia_orari tbody tr.giorno_spento td,
div.AssunzioniNew table.griglia_orari tbody tr.giorno_spento td.giorno{
    color: #9AA5AE;
    opacity: 1;
}


/*  La colonna di fianco alla griglia adesso e' una striscia di valori da
    leggere (i tre totali), non piu' campi: si mette in verticale e prende
    l'aria della striscia delle informazioni. */
div.Contratti div.fianco_settimana.riga_info,
div.AssunzioniNew div.fianco_settimana.riga_info{
    flex-direction: column;
    gap: 14px 0px;
    margin: 0px;
    align-self: stretch;
}
div.Contratti div.fianco_settimana .voce_info,
div.AssunzioniNew div.fianco_settimana .voce_info{ min-width: 0px; }

/*  ===== DENTRO LA FINESTRA DELLE STAMPE: LA MASCHERA DEL DOCUMENTO =====
    La maschera arriva da Stampe.xml e porta i nomi del cloud (`fakeTable`,
    `fakeTD`, `labelForm`, `imgBtn`): senza i fogli di la' i campi si
    incolonnano tutti e le etichette vanno a capo a meta' parola. Qui si
    rimettono come su Ipotesi di spesa: le voci affiancate, l'etichetta sopra in
    scuro e il campo largo quanto la sua colonna. */
#f4m_alert .PRINT_BOX .subBoxContainerFixed{ min-height: 0px !important; }
/*  Tutte le celle della maschera in un flusso solo: quelle dentro la tabella
    del cloud e quelle create al volo per i campi sciolti. `display: contents`
    fa sparire la tabella dal calcolo delle righe lasciando dentro le sue celle,
    cosi' i campi si dispongono tutti insieme invece che a blocchi separati. */
#f4m_alert .PRINT_BOX .frmSubBoxFixed{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
}
#f4m_alert .PRINT_BOX .fakeTable{ display: contents; }
#f4m_alert .PRINT_BOX .fakeTD{
    box-sizing: border-box;
    /*  Le larghezze del cloud sono scritte sull'elemento (style="width:30%") e
        sono percentuali di una finestra molto piu' larga: qui vanno
        neutralizzate, se no i campi non stanno affiancati. */
    width: auto !important;
    /*  I CAMPI CORTI STANNO IN RIGA, i lunghi si prendono la riga intera
        (04/09/2026): cosi' la data di stampa e i numeretti - le giornate di
        prova, per dirne uno - si affiancano invece di sprecare una riga a testa,
        e il luogo, che e' un testo, resta largo. */
    flex: 0 1 auto;
    min-width: 150px;
    border: none;
    padding: 0px 5px;
}
#f4m_alert .PRINT_BOX .fakeTD:has(input.campo_luogo),
#f4m_alert .PRINT_BOX .fakeTD:has(textarea){
    flex: 1 1 100%;
}
/*  LUOGO A SINISTRA, DATA A DESTRA, come nella finestra di Ipotesi di spesa
    (voluto da lei il 04/09/2026). Nella maschera che arriva da Stampe.xml sono
    nell'ordine opposto - prima la data, poi il luogo - e l'ordine si gira qui,
    senza toccare il modulo, che e' roba del cloud.
    La regola vale SOLO quando le voci sono esattamente due e la prima e' una
    data: nelle maschere piu' lunghe non si sposta niente. */
#f4m_alert .PRINT_BOX .fakeTable > .fakeTD:nth-child(1):nth-last-child(2):has(input.date){
    order: 2;
}
/*  L'etichetta prende dal tema misura e carattere (le arrivano dalla classe
    `label`, che gliela mette la scheda), ma NON il colore: nel portale `label`
    e' azzurra, e nella finestra di Ipotesi di spesa le etichette sono scure.
    Qui si mette il colore giusto e si dice di non andare a capo. */
#f4m_alert .PRINT_BOX .labelForm{
    color: var(--c3-text, #1F2A33);
    white-space: nowrap;
}
/*  NIENTE LARGHEZZE SCRITTE QUI. I campi li veste il core - in `main` quello
    vecchio (css_main/form.css, date/date.css, caricati da tommy.genesisoft.it),
    in `main_new` CORE3 - ed e' esattamente quello che succede nella finestra di
    Ipotesi di spesa. Ogni misura aggiunta qui li allontanava da quella, invece
    di avvicinarli: e' stato l'errore del 04/09/2026 (la data veniva
    schiacciata e i font non tornavano). Alle etichette e ai campi bastano le
    classi `label` e `elem` del tema, che la scheda aggiunge da sola.
/*  La riga che nel cloud separava i campi dai bottoni: qui non serve. */
#f4m_alert .PRINT_BOX .barraVsub{ display: none; }
#f4m_alert .PRINT_BOX .subBoxContainerFixedBottoniera{ margin-top: 12px; }
#f4m_alert .PRINT_BOX .rowUp{ display: none; }
/*  Il titolo sta in mezzo, come su Ipotesi di spesa, e vicino ai campi: prima
    lo staccavano due a capo scritti nel messaggio, e restava una fascia di
    bianco in mezzo (04/09/2026). */
/*  Il titolo e' quello della finestra di stampa della scheda Operatore
    (Operatori.js, `print_util_new`), che e' il modello che ha scelto lei:
    azzurro, grosso, in mezzo, staccato di dieci pixel dai campi. */
#f4m_alert .tit_stampe{
    display: block;
    text-align: center;
    color: var(--c3-accent, #0095d6);
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

/*  Il bottone della FIRMA nel piede della finestra, accanto a STAMPA: e' li'
    che lei se lo aspetta (04/09/2026). Prende l'aria dei bottoni del framework,
    ma resta riconoscibile - bordo azzurro e sfondo bianco, perche' firmare non
    e' stampare. */
div#f4m_alert:has(div.finestra_stampe) #f4m_alert_btn .btnSignSub{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0px 8px 0px 0px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--c3-accent, #0095d6);
    background: var(--colorbianco0, #ffffff);
    color: var(--c3-accent, #0095d6);
    font-size: 0.92em;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
}
div#f4m_alert:has(div.finestra_stampe) #f4m_alert_btn .btnSignSub:hover{
    background: var(--c3-accent, #0095d6);
    color: var(--colorbianco0, #ffffff);
}

/*  I due bottoni del piede larghi uguali e affiancati: firmare e stampare sono
    le due cose che si fanno alla fine, e devono pesare uguale (04/09/2026). */
/*  SOLO NELLA FINESTRA DELLE STAMPE. Questa regola era scritta su tutti gli
    avvisi del portale e il 04/09/2026 ha allargato i bottoni di "Scegli
    Agenzia" e di ogni altra finestra: la finestra si riconosce dal contenuto
    (`:has`), come per la larghezza. Il selettore dev'essere forte quanto quello
    del core, che scrive `div#f4m_alert div#f4m_alert_btn button` (due id e due
    elementi): con uno piu' corto la larghezza non passa. */
div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_btn{
    display: flex;
    justify-content: center;
    gap: 10px;
}
div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_btn button,
div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_btn div.btnSignSub{
    min-width: 130px;
    justify-content: center;
    text-align: center;
    margin: 0px;
}

/*  Un'eccezione sola alle misure del core: la casella della data. Il core la
    scrive con un carattere piu' grande (1.4em) e la tiene stretta, e dentro la
    finestra `__/__/____` ci sta a malapena, appiccicato al calendario. Qui
    prende il respiro che ha nella finestra di Ipotesi di spesa. */
/*  Serve !important: la casella della data la larghezza se la scrive da sola
    sull'elemento (style="width:..."), e uno stile scritto li' batte qualunque
    foglio. E' la stessa trappola gia' vista sulle schede. */
div#f4m_alert div.PRINT_BOX input.date{ width: 126px !important; }

/*  Il luogo di stampa non ha bisogno di tutta la riga: "Lucca" sta in poco.
    Accorciato su sua richiesta il 04/09/2026. Il segnaposto glielo mette la
    scheda (si riconosce dall'etichetta). */
div#f4m_alert div.PRINT_BOX input.campo_luogo{ width: 100% !important; box-sizing: border-box; }

/*  Etichette e caselle a sinistra, come nella finestra della scheda Operatore. */
#f4m_alert .PRINT_BOX .fakeTD{ text-align: left; }
#f4m_alert .PRINT_BOX .fakeTD .labelForm{ display: block; text-align: left; }

/*  LA FINESTRA DELLE STAMPE E' STRETTA. Il riquadro dell'avviso si allarga da
    se' fino a riempire mezzo schermo: con una scelta e due caselle corte erano
    quattrocentosettanta pixel quasi tutti bianchi. Qui gli si da' la misura
    giusta, e SOLO a questa finestra: si riconosce dal contenuto (`:has`), cosi'
    tutti gli altri avvisi del portale restano come sono. */
div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_box{ width: 460px; }

/*  Anche le caselle vanno in mezzo, non solo le etichette: `text-align:center`
    non basta perche' la data sta dentro un riquadro suo (f4m_wrap_date) che e'
    un blocco e resta a sinistra. Con il contenitore in flex si centra qualunque
    cosa ci sia dentro - casella semplice o casella col calendario. */
#f4m_alert .PRINT_BOX .fakeTD .elemForm{ display: block; }

/*  I tre riquadri che avvolgono la maschera arrivano dal cloud
    (`subBoxContainerFixed`, `subBoxFormFixed`, `frmSubBoxFixed`) e portano
    imbottiture pensate per una pagina intera: dentro la finestra erano ottanta
    pixel di bianco fra il titolo e il primo campo. Qui si azzerano. */
#f4m_alert .PRINT_BOX .subBoxContainerFixed,
#f4m_alert .PRINT_BOX .subBoxFormFixed,
#f4m_alert .PRINT_BOX .frmSubBoxFixed{
    padding: 0px !important;
    margin: 0px !important;
    min-height: 0px !important;
    height: auto !important;
    background: none !important;
    border: none !important;
}

/*  Niente riquadro rosso: a segnalare il campo mancante ci pensa il framework,
    con la sua scritta "Specifica questo campo" sotto la casella (04/09/2026). */
#f4m_alert .manca_intro{ margin-bottom: 6px; }
#f4m_alert .elenco_manca{ margin: 0px; padding-left: 18px; text-align: left; }

/*  I titoli della finestrella degli orari: in `main` il tema vecchio li lascia
    in un azzurro chiarissimo, quasi illeggibile su fondo bianco (04/09/2026).
    Qui si mettono nel blu del portale, come i titoli delle sezioni. */
/*  I titoli della finestrella: il blu del portale (#0095d6) su fondo bianco
    resta chiaro e si legge male (04/09/2026). Qui si usa una tinta piu' scura,
    che e' lo stesso blu abbassato: resta di famiglia ma si legge. */
div.AssunzioniNew_orari div.tit_orari,
div.Contratti_orari div.tit_orari{
    color: #0b6ea3 !important;
    font-size: 18px;
    font-weight: 700;
}
div.AssunzioniNew_orari div.sotto_tit,
div.Contratti_orari div.sotto_tit{
    color: #0b6ea3 !important;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid rgba(11,110,163,.2);
    padding-bottom: 3px;
}
/*  Anche l'intestazione della settimana nella tinta scura: quella chiara, su
    fondo grigino, si leggeva a fatica (04/09/2026). */
div.AssunzioniNew_orari table.tab_orari th,
div.Contratti_orari table.tab_orari th{
    color: #0b6ea3 !important;
}
div.AssunzioniNew_orari table.tab_orari tr.sotto_testata th,
div.Contratti_orari table.tab_orari tr.sotto_testata th{
    color: #4a6b80 !important;
}

/*  ===== SCHERMI STRETTI (tablet e telefono) =====
    Le schede nuove - Contratto di lavoro, Richiesta d'assunzione, Altri servizi
    - e le due finestre (orari e stampe). Il portale nasce per lo schermo largo:
    `angelus.css` tiene ogni scheda a 1050px fissi, e le griglie hanno colonne
    con misure scritte a mano. Qui sotto quelle misure si sciolgono, e quello che
    non ci sta scorre da solo invece di sbordare dalla pagina.
    Le colonne dei campi non hanno bisogno di niente: sono `col-12` sotto i
    576px, quindi vanno gia' una sotto l'altra da sole. */
@media (max-width: 1100px){
    /*  La scheda non e' piu' larga dello schermo. Serve un selettore lungo:
        quello di angelus.css e' `body div .BOX .TAB` e a parita' di forza
        vincerebbe lui. */
    body div.Contratti div.BOX form.TAB,
    body div.AssunzioniNew div.BOX form.TAB,
    body div.Servizio div.BOX form.TAB,
    body div.Contratti div.BOX_ACTION div.ACTION,
    body div.AssunzioniNew div.BOX_ACTION div.ACTION,
    body div.Servizio div.BOX_ACTION div.ACTION{
        width: auto !important;
        max-width: 100% !important;
    }
    /*  La settimana ha colonne a misura fissa: sotto una certa larghezza non ci
        sta, e allora scorre lei - la scheda no. */
    div.Contratti div.riquadro_settimana,
    div.AssunzioniNew div.riquadro_settimana{
        overflow-x: auto;
    }
    div.Contratti div.riquadro_settimana > table.griglia_orari,
    div.AssunzioniNew div.riquadro_settimana > table.griglia_orari{
        min-width: 420px;
    }
}
@media (max-width: 780px){
    /*  Sotto i 780 la colonna dei totali va sotto la settimana, non di fianco. */
    div.Contratti div.riquadro_settimana,
    div.AssunzioniNew div.riquadro_settimana{
        display: block;
        overflow-x: visible;
    }
    div.Contratti div.riquadro_settimana > table.griglia_orari,
    div.AssunzioniNew div.riquadro_settimana > table.griglia_orari{
        width: 100%;
        min-width: 0px;
        display: block;
        overflow-x: auto;
    }
    div.Contratti div.fianco_settimana,
    div.AssunzioniNew div.fianco_settimana{
        margin-top: 14px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 28px;
    }
    /*  Le strisce di informazioni: le voci si dispongono su piu' righe. */
    div.Contratti div.riga_info,
    div.AssunzioniNew div.riga_info{ gap: 10px 20px; }
    /*  Le due finestre non devono mai essere piu' larghe dello schermo. */
    div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_box{
        width: 92vw;
        max-width: 92vw;
    }
    #f4m_alert .finestra_stampe{ min-width: 0px; }
    div.AssunzioniNew_orari, div.Contratti_orari{ min-width: 0px; }
}
@media (max-width: 520px){
    /*  Telefono: anche le due caselle del contratto (luogo e data della stampa)
        e i bottoni della finestra vanno una sotto l'altra. */
    div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_btn{
        flex-direction: column;
        align-items: stretch;
    }
    div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_btn button,
    div#f4m_alert:has(div.finestra_stampe) div#f4m_alert_btn div.btnSignSub{
        width: 100%;
        justify-content: center;
    }
    div#f4m_alert div.PRINT_BOX input.campo_luogo{ width: 100% !important; }
}