/* Layout condiviso ...

ci stanno:
	colori & fonts base
	titolone & altre intestazioni & menu (dx ?)
		TOLGO le icone correnti :-)
	bottoneria nav/invio/reset
	layout input pages (via fieldset?)
	layout dettaglio output generico
	liste 
il certificato/attestato ROSSO lo metto in file dedicato
i colori INPS sono una scelta minima per *funzionare*
*/

:root{
    /*il mio 37d*/
    --inps-bluette:#2F6DD5;
    /*intermedio, non TROPPO scuro*/
    --inps-blu:#249;
    /*the dark side - 026 should work*/
    --inps-darkblu:#002460;
    /*decisamente scuro .. ok per i testi?*/
    --inps-grey:#5B6772;
    /*variante chiara BAH  anche piu' chiaro: dde*/
    --inps-lightgrey:#bbc;
--inps-alert:#AA224F; /*red, sullo scuro*/
--inps-warn:#F97C1D;/*orange , tendente al mattone*/
}
/*** font non gestito intranet ****/
#mainDiv *{
    font-family: Verdana, Arial, sans-serif;
    font-size: small;
}
/*titolo principale, blue ?*/
h1{
        text-align: center;
    	color: var(--inps-blu);
	line-height: 30px;
	border-bottom: 1px solid var(--inps-bluette);
}
/*titolo specifico pagina, bluette*/
/*sottotitolo di spiega: potrebbe esserci !!!!!'*/
h2, h3{
        text-align: center;
    	color: var(--inps-bluette);
}
/*utente loggato, sotto il titolo ... se c'e' sono tre item: pos/nomePos/idUtente oppure UNO (id)*/
#userInfo{
    border : 2px solid var(--inps-bluette);;
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
   text-align: center;
   font-weight: bolder;
}

.messaggio{
    text-align: center;
    font-weight: bold;
}
/*MSG bloccante*/
.alert{
    color:var(--inps-alert);
}
/*MSG NON bloccante!*/
.warning {
    color:var(--inps-warn);
}
/* input container*/
label{font-weight:bold;}

.inForm {
    display: grid;
    border: solid lightgrey 1px;
    width: fit-content;
    margin: 2em auto ;
    gap: 1px;
    background: lightgrey;
}

.inForm > div{
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: #fff;
}
.inForm > .rigaComandi{
    grid-column: 1/-1;
    text-align: right;
    display: block;
}

.rigaIntera{
    grid-column: 1/-1;
}
/**************per num colonne **************/

.grid2{
     grid-template-columns:auto auto;
}
.grid3{
     grid-template-columns:auto auto auto;
}
.grid4{
     grid-template-columns:auto auto auto auto;
}

/*INVIO! */
a.bottone, button ,input[type=submit] {
	font-size: small;
	background-color: var(--inps-bluette);
	color:#fff;
	padding:3px 12px;
	border:0;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}

/*secondobottone forse! */
.bottone2,input[type=reset]{
	font-size: small;
	background-color: darkgray;
	color:#fff;
	padding:3px 12px;
	border:0;
        text-decoration: none;
        display: inline-block;
        line-height: 1.5;
}
/*terzo forse! */
.bottone3{
	font-size: small;
	color:var(--inps-bluette);
	padding:3px 12px;
	border: 1px solid var(--inps-bluette);
        text-decoration: none;
        display: inline-block;
        line-height: 1.5;
}
/*darker*/
input[type=submit]:hover, .bottone:hover {
	background-color: var(--inps-blu);
}
/*sortable da definire ma e' una tabella SICURA'*/
/*dettaglio DA RIVEDERE

*/
.sortable , .dettaglio{
	margin: 1em auto;

}
.sortable, .sortable td, .sortable th {
	border: solid 1px var(--inps-grey);
}

.sortable th, .dettaglio th {
	background-color: var(--inps-bluette);
	background: linear-gradient(0deg, #249, var(--inps-bluette));
	color:#fff;
	font-weight: bold;
	text-align: center;
}

.dettaglio, .dettaglio td,.dettaglio th {
	border: solid 1px var(--inps-grey);
	border-spacing: 2px;
}

.sortable td , .dettaglio td,.sezione {
	text-align: center;
}
/*333? */
.dettaglio caption , .sortable caption{
	color: var(--inps-bluette);
        font-size: larger;
	padding: 3px;
	font-weight: bold;
}
/* presente in dettaglio */
.sezione {
	font-size: larger;
	padding: 5px;
	font-weight: bold;
	background-color: #eee;
}

/*main con menu
PER ORA TENGO I FLOAT 
meglio una grid 2 o 3 cols?*/
/*menu spalla sx*/
/*PROVA MENU - NAV e' gia' usato :SOB: */
#menuSx{
width: 150px;
position: absolute;
}
#bodyDx{
    text-align: center;
  position: relative;
  left: 150px;
  max-width: 90%;
}
/* nei listoni, per gli overflow ??? lo aggiungo a sortable?*/
.lista{
    overflow-y: scroll;
    max-height: calc(100vh - 300px);
}
/*********menu items  - prima ipotesi **********/
#menuSx a, #menuSx a:visited,   #menuSx a:hover,   #menuSx a:link  {
	color: var(--inps-bluette);
        text-decoration: none;
	display: block;
	line-height:1.5;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}
#menuSx dd{
    margin-left: 20px;
}
#menuSx dl{
    font-weight: bold;
    margin-top: 10px;
}

dt.off ~ dd{
display: none;
}
dt.on ~ dd{
display: block;
}