<!-- Page Version 1.0 -->
<!-- Written by Fabio Cujo Strinna -->
<!-- Last Modify 07-11-2025

*
	{
	box-sizing: border-box;
	}

body
	{
	font-family: Verdana,Tahoma ;
	font-size: 10px;
	background-color:#080710;
	margin: 0px 0px 0px 0px;
	color:Maroon;
	}
	
img
	{
	border: none;
	}

.footer
	{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	}

button
	{
	padding: 4px 10px;
	border: 1px solid transparent;
	background-color: Maroon;
	color: #fff;
	cursor: pointer;
	}

input
	{
	border: 1px solid transparent;
	background-color: #f1f1f1;
	padding: 10px;
	}

input[type=text]
	{
	font-size: 14px;
	color:#707070;
	background-color: #f1f1f1;
	width: 100%;
	}

input[type=button]
	{
	background-color: Maroon;
	color: #fff;
	cursor: pointer;
	}

input[type=submit]
	{
	background-color: Maroon;
	color: #fff;
	cursor: pointer;
	}

/* Add a black background color to the top navigation */
.topnav
	{
	background-color: #707070;
	overflow: hidden;
	z-index:99;
	}

/* Style the links inside the navigation bar */
.topnav a
	{
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;
	font-size: 14px;
	}

/* Change the color of links on hover */
.topnav a:hover
	{
	background-color: #ddd;
	color: black;
	}

/* Add a color to the active/current link */
.topnav a.active
	{
	background-color: #4CAF50;
	color: white;
	}

/* Add a black background color to the top navigation */
.mednav
	{
	background-color: #777;
	overflow: hidden;
	}

/* Style the links inside the navigation bar */
.mednav a
	{
	float: left;
	color: #f2f2ff;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;
	font-size: 14px;
	}

/* Change the color of links on hover */
.mednav a:hover
	{
	background-color: #ddd;
	color: black;
	}

/* Add a color to the active/current link */
.mednav a.active
	{
	background-color: #4CAF50;
	color: white;
	}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky
	{
	position: fixed;
	top: 0;
	width: 100%;
	}

/* Page content */
.content
	{
	padding: 14px;
	}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content
	{
	padding-top: 40px;
	}

.label
	{
	text-align:left;
	padding: 2px 10px 2px 10px;
	background-color: #707070;
	color:#DDD;
	font-size: 14px;
	}

.logogriglia
	{
	width: 300px;
	height: 225px;
	object-fit: scale-down;
	}

.griglia
	{
	font-size: 11px;
	}

.destra
	{
	text-align:right !important;
	}

.centro
	{
	text-align:center;
	}

.sinistra
	{
	text-align:left;
	}

.titolo
	{
	background-color:#707070;
	text-align:center;
	padding: 8px 16px;
	color:Maroon;
	font-size: 24px;
	font-weight: bold;
	}

.istruzioni
	{
	background-color:#707070;
	text-align:center;
	padding: 8px 16px;
	color:white;
	font-size: 18px;
	font-weight: bold;
	}

.dato
	{
	text-align:left;
	color:#707070;
	font-size: 14px;
	padding: 2px 10px 2px 10px;
	background-color: #F1F1F1;
	border: 2px solid Maroon;
	}

/* Stile applicato solo alle tabelle con classe .eventi */
table.eventi
	{
	margin: 20px auto;             /* centra e aggiunge margine esterno */
	border-spacing: 8px 0px;           /* spazio tra le celle */
	width: 88%;                    /* larghezza */
	border: 2px dotted #777;       /* bordo esterno della tabella */
	border-radius: 18px;           /* bordi arrotondati */
	table-layout: fixed; /* colonne con larghezza uniforme */
	}

table.eventi th, table.eventi td
	{
	width: 25%; /* 4 colonne */
	text-align: center;
	padding: 8px;
	}

table.eventi th
	{
	border: 2px dotted #777;       /* bordo di ogni cella */
	border-radius: 18px 8px;            /* angoli arrotondati per le celle */
	background-color: #f0f0f0;
	font-weight: bold;
	font-size: 18px;
	}

/* Prima riga */
table.eventi tr.head-row td
	{
	border-top: 2px dotted #777;
	border-right: 2px dotted #777;
	border-bottom: none;
	border-left: 2px dotted #777;       /* bordo di ogni cella */
	border-radius: 18px 8px 0px 0px;            /* angoli arrotondati per le celle */
	text-align: center;
	}

/* Righe centrali */
table.eventi tr.mid-row td
	{
	border-top: none;
	border-right: 2px dotted #777;
	border-bottom: none;
	border-left: 2px dotted #777;       /* bordo di ogni cella */
	border-radius: 0px;            /* angoli arrotondati per le celle */
	text-align: left;
	font-size: 14px;
	color: white;
	}

/* Ultima riga */
table.eventi tr.btm-row td
	{
	border-top: none;
	border-right: 2px dotted #777;
	border-bottom: 2px dotted #777;
	border-left: 2px dotted #777;       /* bordo di ogni cella */
	border-radius: 0px 0px 18px 8px;            /* angoli arrotondati per le celle */
	text-align: center;
	}

table.eventi img.logo-tabella
	{
	width: 140px;           /* larghezza fissa per tutti i loghi */
	height: 140px;          /* altezza fissa per uniformare la griglia */
	object-fit: contain;    /* ridimensiona senza deformare */
	display: block;         /* evita spazi indesiderati */
	margin: 0 auto;         /* centra il logo nella cella */
	background-color: #fff; /* utile se il logo ha trasparenze */
	border-radius: 8px;     /* per armonizzare con lo stile della tabella */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

/* Al passaggio del mouse */
table.eventi img.logo-tabella:hover
	{
	transform: scale(1.08); /* leggero ingrandimento */
	box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.7); /* alone bianco */
	cursor: pointer; /* cursore “mano” */
	}

/* Pulsante iscrizione */
table.eventi .btn-iscrizione
	{
	background-color: #444;
	color: #fff;
	border: 2px solid #777;
	border-radius: 18px 8px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 1.4em;
	font-weight: 600;                /* leggermente in grassetto */
	transition: all 0.25s ease;
	}

/* Effetto hover luminoso */
table.eventi .btn-iscrizione:hover
	{
	background-color: #fff;
	color: #000;
	box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.8);
	transform: scale(1.05);          /* leggero effetto zoom */
	}

/* Pulsante disattivato */
table.eventi .btn-iscrizione.disabled,
table.eventi .btn-iscrizione:disabled
	{
	background-color: #222;
	color: #999;
	border: 2px solid #555;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	}

/* Tooltip (browser default) */
table.eventi .btn-iscrizione[title]
	{
	position: relative;
	}

/* ============================================================= */
/* HEADER RIUTILIZZABILE – stile base (desktop)                  */
/* ============================================================= */
.page-header {
    text-align: center;
    padding: 10px 20px 30px;
    width: 100%;
    box-sizing: border-box;
}

.main-title,
.sub-title {
    background-color: #707070;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 18px 8px;
    display: block;
    width: fit-content;
    min-width: 380px;
    margin: 0 auto 16px auto;
}

.main-title {
    color: Maroon;
    font-size: 24px;
}

.sub-title {
    color: white;
    font-size: 18px;
    margin-bottom: 0;
}
/* FINE HEADER RIUTILIZZABILE */


.elenco
	{
	text-align:left;
	color:#707070;
	font-size: 14px;
	background-color: #F1F1F1;
	}

.elenco td
	{
	border: 2px solid Maroon;
	}

.elenco a
	{
	color:#707070;
	text-decoration: none;
	}

.elenco:hover
	{
	background-color: #AAA;
	}

.insdato
	{
	text-align:left;
	color:#707070;
	font-size: 14px;
	padding: 4px 10px 4px 10px;
	background-color: #F1F1F1;
	border: 2px solid Maroon;
	}

.inslabel
	{
	text-align:right;
	font-size: 14px;
	padding: 4px 10px 4px 10px;
	color:#DDD;
	border: 2px solid Maroon;
	background-color:#000044;
	}

.intestazione
	{
	background-color:#707070;
	text-align:center;
	padding: 8px 16px;
	color:Maroon;
	font-size: 14px;
	}

.col_label
	{
	background-color:#707070;
	text-align:left;
	padding: 4px;
	color:Maroon;
	font-size: 11px;
	height: 140px;
	white-space: nowrap;
	writing-mode: vertical-rl;
	overflow: hidden;
	text-overflow: ellipsis;
	}

.col_label_2
	{
	background-color:#707070;
	text-align:center;
	color:Maroon;
	font-size: 14px;
	font-weight: bold;
	vertical-align: bottom;
	}

.espandi
	{
	background-color:#707070;
	text-align:left;
	color:Maroon;
	font-size: 14px;
	font-weight: bold;
	vertical-align: center;
	}

.gruppi
	{
	text-align: center;
	color:black;
	font-size: 12px;
	font-weight: bold;
	}

.col_label:hover
	{
	overflow: visible;
	color: white;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0px 0px 10px black;
	}

.row_label
	{
	background-color:#707070;
	text-align:left;
	padding: 4px;
	color:Maroon;
	font-size: 11px;
	max-width: 180px;
	white-space: nowrap;
	writing-mode: horizontal-tb;
	overflow: hidden;
	text-overflow: ellipsis;
	}

.row_label:hover
	{
	overflow: visible;
	color: white;
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0px 0px 10px black;
	}

.row_label_2
	{
	background-color:#555;
	text-align:center;
	padding: 4px;
	color:AliceBlue;
	font-size: 11px;
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

.prospetto
	{
	background-color:#888;
	text-align:center;
	padding: 4px;
	color:DarkBlue;
	font-size: 12px;
	font-weight: bold;
	}

.rounded
	{
	border-radius: 18px 8px;
	}

.left-rounded
	{
	border-radius: 8px 0px 0px 8px;
	}

.right-rounded
	{
	border-radius: 0px 8px 8px 0px;
	}

.both-rounded
	{
	border-radius: 8px;
	}

.nopad
	{
	padding:0px;
	}

.grassetto
	{
	font-weight: bold;
	}

.nolink
	{
	color:Maroon;
	text-decoration:none;
	}
	
#TopBtn
	{
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 14px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: red; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 8px; /* Some padding */
	border-radius: 18px 8px ; /* Rounded corners */
	font-size: 18px; /* Increase font size */
	}
	
#TopBtn:hover
	{
	background-color: #555; /* Add a dark-grey background on hover */
	}

#DwnBtn
	{
	display: block; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 14px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: red; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 8px; /* Some padding */
	border-radius: 8px 18px ; /* Rounded corners */
	font-size: 18px; /* Increase font size */
	}
		
#DwnBtn:hover
	{
	background-color: #555; /* Add a dark-grey background on hover */
	}

/* ========== PROGRESS STEPS – versione corretta ========== */

/* ==================== BASE ==================== */
.progress-steps {
  --primary: #1e90ff;     /* blu (completed) */
  --current: maroon;      /* rosso (current) */
  --muted: #cfcfcf;       /* grigio (upcoming) */
  --circle-size: 26px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0; /* niente spazi */
}

/* STEP */
.progress-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CERCHIO */
.progress-steps .circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: white;
  border: 2px solid var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #444;
  transition: .25s ease;
}

/* LABEL */
.progress-steps .label-steps {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ==================== CONNETTORI ==================== */
.progress-steps .connector,
.progress-steps .no-connector {
  height: 4px;
  flex: 1;                  /* riempie lo spazio */
  margin: 0 -3px;           /* unisce linea al cerchio */
  border-radius: 4px;
  align-self: center;       /* centra verticalmente */
}
.progress-steps .connector {
  background: var(--muted);
}
.progress-steps .no-connector {
  background: black;
}

/* ==================== COMPLETED (blu) ==================== */
.step.completed .circle {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.step.completed .label-steps {
  color: var(--primary);
  font-weight: bold;
}

/* Colora SOLO i connettori che seguono uno step completato */
.step.completed + .connector {
  background: var(--primary);
}

/* ==================== CURRENT (rosso) ==================== */
.step.current .circle {
  background: var(--current);
  border-color: var(--current);
  color: white;
}
.step.current .label-steps {
  color: var(--current);
  font-weight: bold;
}