body {
	margin: 0px;
	height: 100%;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.header {
	position: fixed; /* Fissa la navbar in alto */
    top: 0;
    left: 0;
    width: 100%; /* Assicura che occupi tutta la larghezza */
    background-color: #333; /* Mantiene il colore di sfondo */
    padding: 15px;
    z-index: 1000; /* Impedisce che venga coperta da altri elementi */
}

.content {
	position: relative;
	top: 0px;
	left: 0px;
	padding: 15px;

	/*
	margin-top: 10px;
	margin-bottom: 10px;
	height: 100%;
	padding: 0px;
	*/
}

.footer {
	position: relative;
	padding: 15px;
}

.status-green{
	background-color: green;
	color: black;
}

.status-yellow{
	background-color: yellow;
	color: black;
}

.status-red{
	background-color: red;
	color: black;
}

h1{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
.Nav{
	color: white; 
    font-size: clamp(4vw, 6vw, 50px);
    margin-bottom: 15px; /* Spazio tra il titolo e i link */
}
.topnav {
	display: flex;
    flex-direction: column; /* Mette gli elementi in colonna */
    align-items: center; /* Li centra orizzontalmente */
    justify-content: center;
    background-color: #333;
    padding: 20px 0;
    text-align: center;
}
.links {
    display: flex;
    gap: 15px; /* Distanza tra i link */
    flex-wrap: wrap; /* Se lo schermo è piccolo, i link vanno a capo */
    justify-content: center; /* Centra i link */
}
.topnav a {
    color: #f2f2f2;
    text-align: center;
    padding: 1vw 2vw; /* Padding che si riduce col viewport */
    text-decoration: none;
    font-size: clamp(3vw, 4vw, 40px); /* Il testo diventa più piccolo con la finestra */
    position: relative;
}
.links a:hover {
	background-color: #ddd;
	color: black;
}

 
* {
	box-sizing: border-box;
}

 


/* Full-width input fields */
/* input[type=text], input[type=password] { */

.input-textarea {
    resize: none;
    font-family: 'Adwaita Sans', 'Arial Narrow', Arial, sans-serif;
}

.inputform {
    font-size: 14px;
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	display: inline-block;
	border: none;
	background: #f1f1f1;
}

/* input[type=text]:focus, input[type=password]:focus { */
.inputform:focus {
    background-color: #e9f7f1;
    border-left: 4px solid #04AA6D;
	outline: none;
}

.checkbox-form {
    width: 18px;
    height: 18px;
}

/* Overwrite default styles of hr */
hr {
	border: 1px solid #f1f1f1;
	margin-bottom: 25px;
}
  
/* Set a style for the submit button */
.outline_md_btn {
	background-color: #04AA6D;
	color: white;
	padding: 16px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	opacity: 0.9;
}
  
.outline_md_btn:hover {
	opacity: 2;
}

/* Add a blue text color to links */
a {
	color: dodgerblue;
}
form{
	position: relative;
	border-style: outset;
	border-radius: 10px ;
	border-width: 6px;
	padding: 5px;
}
.alert{
	position: absolute;
	right: 0;
	background-color: #D35C62;
	color: #FFFFFF;
	/* max-width: 500px; */
	/* height: 50px; */
	border-radius: 10px;
	padding: 15px;
	display: flex;
	/* grid-row: 1;
	grid-column: 2; */
	/* padding-left: 17px;
	padding-right: 0px;
	padding-top: 15px;
	padding-bottom: 15px; */
}
.alert-error{
	background-color: #D35C62;
}
.alert-success{
	background-color: #41be4b;
}
.alert-text{
	padding: 0px;
	margin: 0px;
	margin-right: 10px;
}
.close {
	position: relative;
	right: 0px;
	margin-left: auto;
	opacity: 1;
	size: 20px;
	/* background-color: #D35C62; */
	background-color: #00000000;
	border-width: 0px;
	color: #FFFFFF;
}
.close:hover{
	opacity: 0.8;
	background-color: #33333340;
}
.alert{
	opacity: 1; 
	Transition: opacity .5s ease-in-out; 
}

/* .sub{
	width: 150px;
	height: 50px;
	border-radius: 10px;
	background-color: white;
	color:#04AA6D;
	border-color: #04AA6D;
	border-width: 3px;
} */
.info{
	padding-bottom: 20px;
}
.corsi{
	border-style: solid;
	border-radius: 10px;
	border-width: 2px;
	border-color: #04AA6D;
	overflow: scroll;
	overflow-x: hidden;
	padding-top: 20px;
	padding-bottom: 10px;
}
.spazio{
	text-align: right;
	border-bottom: 1px solid #04AA6D; /* Linea sotto ogni elemento */
    padding: 10px; 
	margin-right: 1vw;
}
.pagine{
	padding: 1vw;
	color:#04AA6D;
	font-size: clamp(2vw, 3vw, 4vw);
}
.primo{
	padding: 1vw;
	font-size: clamp(4vw, 5vw, 6vw);
	border-style:solid;
	border-radius: 5px;
	border-width:2px;
	display: inline-block; /* Permette di usare padding e centrare contenuto */
    text-align: center; /* Centra il testo */
	color:#04AA6D
}
.dettagli{
	float: right; 
	padding-left: 3px;
	padding-right: 3px;
	margin-right:1.5vw ;
	border-style:solid;
	border-radius: 5px;
	border-width:2px;
	display: inline-block; /* Permette di usare padding e centrare contenuto */
    text-align: center; /* Centra il testo */
	color:#04AA6D
}
.iscriviti{
	color:#04AA6D;
	text-decoration: none;
}


table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}
.table-container {
    width: 100%;
    overflow-x: auto; /* Abilita lo scroll orizzontale */
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: middle;
}

.fasce{
    background-color: #999;
    color: white;
    font-weight: bold;
}

tr:nth-child(odd) {
    background-color: #ccc;
}

tr:nth-child(even) {
    background-color: #eee;
}

td:last-child a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}
tr.ids{
	background-color: #999;
    color: white;
    font-weight: bold;
}
.flashed-messages{
	position: sticky;
	top: 20px;
	right: 20px;
	z-index: 1000;
}
.title{
	color: #fff;
	font-size: clamp(3vw, 6vw, 40px);
}
.home1 {
    display: flex;
    flex-direction: column; /* Organizza gli elementi in colonna */
    align-items: center; /* Centra orizzontalmente */
    justify-content: space-between; /* Distribuisce gli elementi equamente */
    height: 100vh; /* Occupa tutta l'altezza dello schermo */
    background-color: #333;
    text-align: center;
    padding: 20px 0;
	font-size: clamp(3vw, 6vw, 40px);
	gap: 20px; /* Aggiunge uno spazio tra il testo e l'immagine */
}
.home{
    color: white;
    font-size: clamp(3vw, 6vw, 40px);
    flex-grow: 1; /* Permette al titolo di occupare spazio */
    display: flex;
    align-items: center; /* Centra verticalmente il titolo */
    justify-content: center; /* Centra il testo */
    width: 100%;
}
.home:hover {
    background-color: #ddd;
    color: black;
}
a{
	text-decoration: none;
}

.Nav a {
    display: flex;
    align-items: center; /* Allinea verticalmente il testo e l'immagine */
    gap: 20px; /* Aggiunge uno spazio tra il testo e l'immagine */
}
.logo {
    width: auto; /* Usa una dimensione relativa per adattare l'immagine al testo */
    height: 1.5em; /* Mantiene le proporzioni */
}


h3 {
    font-size: clamp(3vw, 4vw, 35px);
    color: #04AA6D;
    text-align: center;
    margin-top: 30px;
}

.table-container {
    margin-top: 30px;
    border: 2px solid #04AA6D;
    border-radius: 10px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.lista-appello {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(2.5vw, 2vw, 18px);
}

.lista-appello {
    color: black;
    text-align: center;
    padding: 12px;
}

.ids tr {
	color: white;
}


.lista-appello td, .lista-appello th {
    border: 1px solid #ddd;
    padding: 12px;
}

/* Righe alternate */
.lista-appello tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* 
#lista-appello tr:hover {
    background-color: #f1f1f1;
} */

.appello-checkbox {
    border: none;
    font-size: 20px;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

tr:nth-child(odd) .app-gray {
    background-color: #f9f9f9;
}

.appello-checkbox:hover {
    transform: scale(1.05);
}

/* Colori coerenti */
.app-gray {
    background-color: #ccc;
    color: black;
}

.app-green {
    background-color: #04AA6D;
    color: white;
}

.app-red {
    background-color: #D35C62;
    color: white;
}

.sub {
    padding: 12px 24px;
    font-size: 18px;
    background-color: #04AA6D;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sub:hover {
    background-color: #03895a;
}

.sub-presenze {
	margin-top: 15px;
    padding: 12px 24px;
    font-size: 28px;
    background-color: #04AA6D;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sub-presenze:hover {
    background-color: #03895a;
}

.very-hidden {
    visibility: hidden;
    size: 0;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
}

.students-list {
    padding: 0px;
    align-items: center;
}

.students-list-el {
    width: 90%;
    padding: 0px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

.students-list-el:hover {
    background-color: #ddd;
    outline: none;
}

.search-bar {
    display: grid;
}

#autocomplete-wrapper {
    position: relative;
}
#autocomplete-wrapper p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

#autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 220px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    z-index: 100;
}

.autocomplete-item {
    padding: 12px;
    cursor: pointer;
    background: #f1f1f1;
}

.autocomplete-item:hover {
    background: #ddd;
}

#selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.student-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: #ddd;
    border-radius: 20px;
    font-size: 14px;
}

.student-chip button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
}
#section-fasce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}
.student-chip:hover {
    background-color: #ccc;
}
.autocomplete-item {
    transition: background-color 0.2s ease;
}
form {
    max-width: 800px;
}
.checkbox-form {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-form + label {
    position: relative;
    padding-left: 36px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    line-height: 22px;
    margin-bottom: 10px;
    font-size: 16px;
    color: black;
}

.checkbox-form + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: #f1f1f1;
    box-shadow: inset 0 0 0 2px #04AA6D;
    transition: background-color 0.2s ease;
}

.checkbox-form + label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: #04AA6D;
    transition: transform 0.2s ease;
}

.checkbox-form:checked + label::after {
    transform: translateY(-50%) scale(1);
}

.checkbox-form + label:hover::before {
    background-color: #e9f7f1;
}

.checkbox-form:focus + label::before {
    outline: 2px solid #04AA6D;
}

.cmd_line {
    background-color: #a0a0a0;
}