/********** FOGLIO DI STILI BASE UTILIZZABILE PER I PROGETTI OSPITATI SUL NAS ***********/

/********** CLASSI SELETTORI ***********/

body, input, textarea, select, button {
    font-family: 'Roboto', 'Open Sans', helvetica, arial, verdana, sans-serif;
    font-size: 100%;
    color: black;
}

body {
	text-align: left;
    line-height: 1.4em;
    margin: 0;
    padding: 0;
}

input, textarea, select, button {
    margin: 0.3em 0.3em 0.3em 0;
    padding: 0.3em;
    border: 1px solid gray;
    /* --- AGGIUNTA TRANSIZIONE --- */
    transition: all 0.2s ease-in-out;
}

textarea {
    width: 97%;
}

input[type='checkbox'].nomargpad {
    margin: 0;
    padding: 0;
}

input[type='button'], input[type='submit'], input[type='reset'], button {
    background-color: #DCDCDC;
}

input[disabled], input[readonly], textarea[disabled], select[disabled], button[disabled] {
    color: #696969;
    cursor: default;
}

/********** AGGIORNAMENTO STATO HOVER PULSANTI ***********/
/* Applichiamo l'effetto a tutti i tipi di pulsante, incluso il tag <button> */
input[type='button']:hover, 
input[type='submit']:hover, 
input[type='reset']:hover, 
button:hover {

    cursor: pointer;
    
    /* --- AGGIUNTA EFFETTO FADING --- */
    /* Scurisce leggermente il pulsante (90% della luminosità originale) */
    filter: brightness(0.9); 
    
    /* In alternativa, se preferisci un'opacità (più brusco sul testo):
       opacity: 0.85; 
    */

}

input[type='button']:active, input[type='submit']:active, input[type='reset']:active, button:active {
    position: relative;
    top: 1px;
}

input[type='radio']:checked + label,
input[type='checkbox']:checked + label {
    color: #8B0000;
    font-weight: bold;
}

optgroup {
    font-style: italic;
}

option {
    font-style: normal;
}

acronym {
    text-decoration: underline dotted;
    cursor: default;
}

fieldset {
    border: 1px solid gray;
    padding: 0.6em;
    margin: 1em 0 1em 0;
    background-color: #F5F5F5;
}

fieldset label {
    margin: 0.3em 0.3em 0.3em 0;
}

fieldset h4 {
	margin: 1em 0 2em 0;
}

legend {
    /*font-weight: bold;*/
    font-style: italic;
    padding: 0.3em;
}

fieldset, input, textarea, select, button, p.errore, p.msg, p.bordato {
    border-radius: 6px;
}

/* Classe specifica per la disabilitazione dei pulsanti di submit nei form */
input.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
  background-color: #ccc;
  transition: all 0.5s ease;  
}

b {
    font-weight: bold;
}

u {
    text-decoration: underline;
}

i {
    font-style: italic;
}

p {
    margin-bottom: 1em;
}

p.errore, p.msg {
    padding: 0.3em;
    font-style: italic;
    text-align: center;
    border: 1px solid gray;
    color: white;
}

p.errore {
    background-color: #8B0000;
}

p.msg {
    background-color: #006400;
}

p.separatore {
    margin-bottom: 0.2em;
}

p.legenda {
    margin-bottom: 0.3em;
    text-align: right;
    font-size: 90%;
}

p.nomarginbottom {
    margin-bottom: 0;
}

sup {
    vertical-align: super;
    font-size: 80%;
}

em {
    font-style: italic;
}

img {
    border: 0;
}

h1, h2, h3, h4 {
    margin-bottom: 0.3em;
}

h1 {
    font-size: 180%;
}

h2 {
    font-size: 160%;
}

h3 {
    font-size: 140%;
}

h4 {
    font-size: 110%;
}

h1.titoloapp {
    background-color: #F5F5F5;
    font-size: 250%;
    text-align: center;
    margin-bottom: 0.5em;
    font-weight: normal;
    line-height: 1.5em;
}

h3.pageheader {
    font-size: 210%;
    margin-bottom: 1em;
    font-weight: normal;
    line-height: 1.2em;
}

h4.separatore {
    margin-bottom: 1em;
    font-style: italic;
}

ul, ol {
    margin: 0;
    padding: 0;
}

ul li, ol li {
    margin: 0 0 1em 2.5em;
}

ul li {
    list-style: square;
}

ol li {
    list-style: decimal;
}

a {
    color: black;
    text-decoration: underline;
}

a:hover, a:focus {
    text-decoration: none;
}

table {
	background-color: transparent;
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    border: 0;
}

table td, table th {
    margin: 0;
    border: 1px solid #141316;
    vertical-align: middle;
}

table td {
	padding: 0.3em;
}

table th {
    background-color: #141316;
    text-align: center;
	color: white;
	padding: 0.5em;
}

table tbody tr:nth-child(odd) {
    background-color: #F5F5F5;
}

table tbody.noalternati tr {
    background-color: transparent;
}

table tbody tr:hover {
	background-color: #AFEEEE;
}

table.nobordo td, table.nobordo th {
    border: 0;
}

td.bgred, .bgred {
    background-color: #8B0000;
    color: white;
}

td.bggreen, .bggreen {
    background-color: #006400;
    color: white;
}

form {
    width: 60%;
    margin: 0 auto;
    text-align: left;
}

form.small {
    width: 45%;
}

form.medium {
    width: 75%;
}

form.full {
    width: 100%;
}

form.nomarginall fieldset {
	margin: 0;
}

span.annotazione, p.annotazione {
    font-size: 90%;
}

span.annotazione {
    font-style: italic;
}

div.box {
	border: 1px solid gray;
	padding: 0.7em;
	margin-bottom: 1em;
	background-color: #F5F5F5;
	border-radius: 6px;
}

div.box h4, h4.subheader {
	font-size: 120%;
	margin-bottom: 1em;
	font-weight: bold;
}

div.menu a {
	display: block;
	border-left: 5px solid gray;
	padding: 0 0 0 0.6em;
	margin-bottom: 1em;
}

/********** CLASSI LAYOUT ***********/

#container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#header {
	background-color: #F5F5F5;
	padding: 0.7em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid gray;
}

#navbar {
	background-color: black;
	text-align: center;
	margin: 1em 0 2em 0;
	padding: 0.5em;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

#navbar a {
	color: white;
	padding: 0 0.3em 0 0.3em;
}

#content {
    margin: 0;
    padding: 0.5em 0.5em 3em 0.5em;
}

#sx {
    width: 300px;
    margin: 0;
    padding-bottom: 2em;
    float: left;
    overflow: auto;
}

#dx {
    margin-left: 310px;
    padding-bottom: 2em;
}

/* Responsive per tablet (es. iPad) */
@media (max-width: 1024px) {

	#dx {
		overflow-x: scroll;
	}

}

/* Responsive per smartphone */
@media (max-width: 600px) {

	#dx {
		overflow-x: scroll;
	}

}

#footer {
    clear: both;
	background-color: black;
	padding: 0.7em;
	text-align: center;
}

#footer, #footer a {
	color: white;
}

#datiutente {
	margin: 1em 0 0.5em 0;
	text-align: center;
}

/********** CLASSI GENERICHE ***********/

.fullwidth {
	width: 100%;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.nomargin {
    margin: 0;
}

.nopadding {
    padding: 0;
}

.noborder {
	border: none;
}

.smallfont {
    font-size: 90%;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.linknounderline a {
    text-decoration: none;
}

.flat {
    margin: 0;
    padding: 0;
}

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

.clearboth {
    clear: both;
}

.fontgreen {
    color: #006400;
}

.fontred {
    color: #8B0000;
}

.barrato {
	text-decoration: line-through;
}

.draggable {
    cursor: move; 
}