/*Impostazioni generali del documento: suddivido la pagina in 4 aree, la testa, il lato, il corpo e la fine pagina(footer)*/
/*qualcosa tipo
Titolo
*/
@import "Colori.css";
/*Elementi html*/
html, body {
height: 100%;
}
body {
background: var(--ColSfondo);
padding: 0;
margin: 0;
/* font-family: Arial, sans-serif;*/
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
font-size: 20px;
-webkit-font-smoothing: antialiased;
}
input {
font-size: 20px;
border-radius:.3em;
border: 1px solid var(--ColBordoRicerca);
}
.Obbligatorio::after {
content: "*";
margin: 0 0 0 0.1em;
color: #f00;
font-size: 75%;
}
select {border-radius:.3em;
background-color: var(--ColSfondoSelect);
margin: 2px;
}
ul {
list-style: none;
margin: 0;
padding-inline-start: 0px;
}
.Button {
display:inline-block;
border: 1px solid #999;
border-radius: .3em;
color: var(--ColTestoPulsanti);
background: var(--ColSfondoPulsanti);
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
cursor:pointer;
/* vertical-align:middle;*/
max-width: 300px;
text-align: center;
/* margin: 15px 2px 0 0;*/
min-width: 80px;
/* font-size: 14px;
height: 1.1em;*/
text-decoration: none;
margin: 8px 8px;
padding: 3px 6px 15px;
height: 0.4em;
}
.Button:hover {
transform: scale(1.08);
}
/*footer#FinePagina {
padding-bottom: 1em;
}*/
#Pagina {
/* width: 60em;
padding-left: 3%;
padding-right: 3%;
height: 100%; */
margin: auto;
padding: 1% 2%;
font-family: "Lato", sans-serif;
}
/*#Contenitore {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 280px auto 40px;
grid-template-areas:
"h"
"m"
"f";
}
#Testa {
grid-area: h;
}
#LatoS {
grid-area: s;
}
#Corpo {
grid-area: m;
}
#FinePagina {
grid-area: f;
}*/
.Contenitore {
/* margin-left: auto;
margin-right: auto;
width: 60em;*/
}
/*#Contenitore {
height: 910px;
}*/
.Intestazione {
height: 120px;
/* display: inline;
float: left; */
}
.GrigliaS {
display: inline;
float: left;
margin: 20px 0px 0 20px;
}
.GrigliaC {
display: inline;
float: left;
margin: 20px 0 0 100px;
}
.GrigliaC img{
max-width: 400px;
max-height: 80px;
margin: 10Px 10% 0PX 10%;
}
.GrigliaD {
display: inline;
float: right;
/* margin: 20px 0px;*/
margin: 0px 0px;
}
.Logo {
/* margin: 0px 20px;
text-align: left;
direction: ltr; */
display: block;
width: 210px;
}
.Logo2 img{
width: 150px;
margin: 0 0 0 25px;
padding-top: 10px;
}
.Logo2{
width: 150px;
margin: 0 0 0 25px;
padding-top: 10px;
}
.Bandiere img{
height: 14px;
width: 20px;
vertical-align: bottom;
}
.MenuBandiere {
text-align: right;
margin-top: 25px;
height: 16px;
}
.DivRicerca1{
margin-top: 12px;
float: right;
}
td.TDL {text-align: left;}
td.TDC {text-align: center;}
td.TDR {text-align: right;padding-right: 4px;}
.Ricerca{
background: url('/Immagini/LenteRicerca.png') no-repeat scroll 100% 50%;
background-size: 29px;
float: right;
width: 29px;
height: 29px;
border: none;
border-radius: 0 5px 5px 0;
padding: 0 0 0 0;
margin: 0px;
}
.DivRicerca{
float: left;
}
#Ricerca{
float: left;
background-color: var(--ColSfondoRicerca);
border: 1px solid var(--ColBordoRicerca);
margin: 0 0 0;
width: 12em;
border-radius: 5px 0 0 5px;
line-height: 25px;
font-size: large;
}
/* display: inline;
margin-top: 6px;
margin-left: 100px; */
/* .MenuPrincipale {
text-align: center;
} */
.Corpo {
/* margin: 5em 1em 1em;
height: 600px;*/
}
.SfondoSfumato {
padding: 1em;
border-radius:4px;
background-image: linear-gradient(top, rgb(245, 245, 245) 0%, rgb(220, 220, 220) 100%);
background-image: -webkit-linear-gradient(top, rgb(245, 245, 245) 0%, rgb(220, 220, 220) 100%);
background-image: -moz-linear-gradient(top, rgb(245, 245, 245) 0%, rgb(220, 220, 220) 100%);
background-image: -o-linear-gradient(top, rgb(245, 245, 245) 0%, rgb(220, 220, 220) 100%);
}
.ofuscato { /*rende una scritta non leggibile (ma analizzandola si legge)*/
text-shadow: 0 0 8px rgba(0,0,0,0.8);
color: transparent !important;
user-select: none;
pointer-events: none;
}
.DatiFondo ul {
color: rgb(72, 90, 99);
float:left;
width: 60em;
list-style-type: none;
padding: 0px;
}
.DatiFondo ul li {
float: left;
position: relative;
width: 33%;
font-size: 10px;
/* margin: 4px 2em 4px 4px; */
/* width: 12em;
padding: 0 10;
background-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(196, 9, 42) 100%); */
}
#FaiLogin div{
text-align: center;
margin-top: 100px;
}
/*img#TornaIndietro {
width: 2em;
}*/
/*Footer
#DatiFondo {
margin-top: 10px;
width: 60em;
margin-left: auto;
margin-right: auto;
}
#DatiFondo .Sinistra {
display: inline;
float: left;
width: 32%;
text-align: left;
margin-left: 20px;
}
#DatiFondo .Sinistra Img{
max-height: 30px;
}
#DatiFondo .Centro {
display: inline;
float: left;
width: 32%;
text-align: center;
line-height: 45px;
}
#DatiFondo .Destra {
display: inline;
float: left;
width: 32%;
font-family: Arial;
font-size: 60%;
font-style: italic;
color: rgb(0,0,0);
text-align: right;
line-height: 45px;
}
*/
.Selezionabile {
cursor: pointer;
}
.Disabilitato {
pointer-events: none;
background-color: var(--ColInattivo);
}
.Numeri{
text-align: right;
}
.Errore {
background: var(--ColErrore);
border-color: rgb(255,0,0);
padding-top: 4em;
padding: 1em;
}
.Flex {
display: flex;
}
.Nascosto {
display: none !important;
}
.RigaPari {
background: var(--ColRigaPari);
}
.RigaDispari {
background: var(--ColRigaDispari);
}
#Attenzione{
/* display: flex; Inizialmente nascosto, usare questa dichiarazione per renderlo visibile*/
justify-content: center;
align-items: center;
position: fixed;
z-index: 100;
background: rgba(255,255,255, 0.9);
top: 0px;
left: 0px;
width: 100%;
height: 100%;
/* width: calc(100% - 2em);
height: calc(100% - 2em);
margin: 1em;*/
}
#Attenzione > div { /*> indica solo i div che sono subito sotto #Attenzione*/
max-height: 100%;
max-width: 100%;
border-radius: .3em;
border: 1px solid #999;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
background: white;
padding: 1em;
margin: 1em;
}
/*Modulo input dati con Ul/Li*/
.InputDati label {
vertical-align: top;
display: inline-block;
width: 17em;
text-align: right;
padding: 2px 7px 0px 0px;
}
.InputDati li select {
border-radius: 0.3em;
background-color: var(--ColSfondoSelect);
padding: 1px 0px;
margin: -2px 0px 0px;
font-size: 14px;
box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 20%);
}
.InputDati li {
padding: 3px;
display: flex;
flex-direction: row;
align-items: center;
}
.InputDati li input {
padding: 2px;
}
.InputDati li textarea {
padding: 2px;
}
/*Altro*/
#DatiLogin {
text-align: center;
}
#DatiLogin ul{
padding-right: 8em;
}
#DatiLogin li{
display: block;
}
[role="button"] {
cursor: pointer;
}
/*Lista che compare con una RicercaConScelte*/
.RicercaConScelte label{
/* vertical-align: top;*/
display: inline-block;
/* width: 14em*/;
text-align: right;
padding: 2px 7px 0px 0px;
}
.RicercaConScelte input {
padding: 2px;
height: 15px;
margin-left: 5px;
width: 13em;
}
.RicercaConScelte ul {
position: absolute;
background: white;
left: 20em;
margin-top: 20px;
width: 11em;
border: 1px solid var(--ColBordoRicerca);
border-top: 0px;
border-radius: 0px 0px .3em .3em;
padding: 2px;
}
.RicercaConScelte a {
margin: 0px;
}
.RicercaConScelte div {
padding-bottom: .3em;
display: flex;
}
#RicercaConScelte{
top: 71px;
position: absolute;
margin-left: 420px;
border: 1px solid black;
border-radius: 3px;
background: white;
overflow: auto;
text-align: left;
width: 580px;
padding: 5px;
}
#RicercaConScelte label {
width: 290px;
}
#RicercaConScelte ul{
position: relative;
overflow: hidden;
padding: 0px;
}
/*.RicercaLista{ /*sposta la lista nel punto che serve
margin-left: 293px;
}
*/
.RicercaLista p{
margin: 0px;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
/* width: 260px;*/
}
.RicercaLista:hover p{
background: var(--ColBordoRicerca);
}
.RicercaConScelteLista {
display: inline-block;
}
#RicercaConScelteLista {
padding-left: 0em;
border: 2px solid var(--ColBordoRicerca);
margin: 0 0 0 13em;
width: 10em;
}
/*Menu a scomparsa*/
/*Menu a scomparsa*/
/*Tasti del browser*/
.TastiBrowser { height:40px;display: inline-flex;}
.TastiBrowser div { width: 30px; border-radius:30px; margin-right: 10px;}
.TastiBrowser div :hover{ width: 36px;
background-color: var(--ColRigaDispari);
border-radius: 20px;
padding: 5px;
margin-left: -7px;
margin-top: -5px;
}
.TastiBrowser div .FrecNo{ stroke: var(--ColInattivo);}
.TastiBrowser div svg{
stroke-linejoin: round;
stroke-linecap: round;
stroke: var(--ColSfondoPulsanti);
stroke-width: 17%;
fill: none;
height: 100%;
width: 100%;
}
.Indietro{
transform: scale(-1, 1);
}
/*Tasti del browser fine*/
/*Freccia per tornare alla pagina precedente*/
.TornaIndietro { display: block; width:2em}
#Torna{
stroke-width: 1;
fill: var(--ColSfondoPulsanti);
}
/*Tooltip, testo che compare se ci si ferma sopra col mouse o se si clicca sull'icona info*/
.tooltip {
position: relative;
display: inline-block;
top: -6px;
left: -6px;
margin-right: -6px;
}
.tooltip .tooltiptext {
background-color: var(--ColoreSfondoTooltip);
color: var(--ColoreTestoTooltip);
text-align: center;
border-radius: 6px;
/* padding: 5px 0;*/
position: absolute;
z-index: 100;
bottom: 125%; /*Distanza dal testo sotto*/
padding: .3em;
/* min-width: 10em; non utilizzabile, poi si sposta la freccia
max-width: 15em;*/
}
.tooltipNo {
visibility: hidden;
opacity: 0;
transition: opacity .7s; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
}
.tooltip img {
width: .5em;
vertical-align: top;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 47%; /*Posizione della freccia*/
border-width: 8px;
border-style: solid;
border-color: var(--ColoreSfondoTooltip) transparent transparent transparent; /*la freccia punta nella direzione opposta al lato che non รจ trasparente*/
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltipSi { /*Attivo se clicco*/
visibility: visible;
opacity: 1;
}
/*Aggiunta documenti con icone*/
[role="button"] {
cursor: pointer;
}
#FormIcone {
position: relative;
top: -350px;
left: 200px;
width: 600px;
height: 250px;
}
.ContIcone {
display:flex;
justify-content:flex-end;
/* padding: 15px;*/
}
.ContIconeEsistenti {
display:flex;
padding-bottom: 6px;
margin-right:8px;
}
.ContIconaEsistente {
opacity: 1;
display: block;
transform-origin: 50% 50% 0px;
transform: scaleX(1) scaleY(1);
width: 78px;
height: 78px;
margin-right:3px;
}
.ContIconaEsistente:last-child {
margin-right:0;
}
.ContIconaEsistente:hover .Icona {
opacity:1;
}
.ContIconaEsistente:hover {
background-color: white;
}
.ContIconaEsistente:hover .Icona::before {
opacity:1
}
.ContIconaEsistente:hover .ContIconaModifica {
opacity:1;
}
.ContIconaEsistente .Icona {
top: 3px;
left: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
}
.Icona{
/* background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position-y: center;
position: relative;
top:0;
z-index:2;
width:100%;
height:100%;
transition:transform 75ms ease-out;
}
.Icona:before {
position:absolute;
top:0;
width:100%;
height:60px;
opacity:0;
transition:opacity .1s ease-out;
content:"";
right: 0;
background: linear-gradient(0deg,transparent,transparent 45%,rgba(0,0,0,.78) 75%,rgba(0,0,0,.4));
}
.ContIconaModifica {
position:absolute;
z-index:100;
color:#FFFFFF;
opacity:0;
top:4px;
font-size: x-large;
width: 70px;
text-align: right;
transition:right 75ms ease-out,top 75ms ease-out;
}
.ContIconaNuovo div{
background-color: rgb(255, 255, 255);
height: 78px;
color: rgb(0, 165, 244);
max-width: 78px;
text-align: center;
text-transform: uppercase;
font-size: 11px;
border: 0px;
}
.ContIconaNuovo div:hover {
font-size: 13px;
}
.Piu {
font-size: xx-large;
font-weight: 1000;
margin: 0px;
}
.TestoNormale {
margin: 0px;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/*Modifica descrizione delle immagini*/
#ContIconaDescrizione {
padding: 1em;
border: 1px solid #ccc;
border-radius: 0.5em;
text-align: left;
}