html, body {
	margin: 0;
	padding: 0;
	background: #FFCC88;
	height: 100%;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
}

#site-header {
	/*border: 2px solid green;*/
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	color: lightblue;
	font-size: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url('../images/header-background.png');
	/* #161a1d #623320 */
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	transition: background-image 0.5s;
}

.slideshow-container { margin-top: 0.5em; }

/* Stilizza i pallini vuoti */
.dot {
	height: 1em;
	width: 2em;
	margin: 0.7em;
	background-color: gray;
	border-radius: 30%;
	display: inline-block;
	transition: background-color 1.0s ease;
}

/* Quando un'immagine è attiva, colora il pallino */
.active { background-color: white; }

.mySlides {
	display: none;
	border: 4px solid white;
	width: 100%;
	height: auto;
	border-radius: 9px;
	cursor: pointer;
	transition: transform 0.5s ease-in-out;
}
.slidesFB {
	display: none;
	width: 100%;
	height: auto;
	cursor: pointer;
	transition: transform 0.5s ease-in-out;
}

#site-footer {
	/*border: 2px solid green;*/
	padding: 20px;
	height: 80px;
	text-align: center;
	margin-bottom: 0;
	color: lightblue;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url('../images/footer-background.png');
	background-size: auto 120%;
	background-repeat: no-repeat;
	background-position: center center;
}
#site-footer a { margin: 0 1.6%; }

#site-nav_panino {
	/*border: 2px solid red;*/
	display: none;
	background-image: linear-gradient(to right, #161a1d, #623320);
	line-height: 20px;
}
#site-nav {
	/*border: 2px solid red;*/
	position: fixed;
	padding: 0;
	width: 30%;
	max-height: 400px;
	min-width: 13em;
	max-width: 19em;
	left: -30px;
	background: linear-gradient(to top,  rgba(255, 204, 136, 0) 0%, rgba(255, 204, 136, 0.8) 10%, rgba(255, 204, 136, 0.8) 100%);
}
#site-nav ul li {
	list-style-type: none;
	padding: 7px 5px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}
#site-nav ul li a {
	font-weight: bold;
	padding: 0px;
	color: gray;
}
#site-nav a {
	font-weight: bold;
	padding: 5px;
	color: gray;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
}
#site-nav a:hover { color: #EFFFFF; }
#site-nav_panino a {
	/*border: 1px solid blue;*/
	font-weight: bold;
	color: gray;
	margin-right: 1em;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
}
.sidebar_panino {
	/*border: 2px solid red;*/
	display: none;
}
#main {
	/*border: 2px solid black;*/
	display: flex;
	align-items: flex-start;
	font-size: 1.3em;
	margin-left: calc(30% + 10px);
	flex-flow: row wrap;
}
#main header {
	text-align: left;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: gray;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

#main h1 {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.1em;
	color: gray;
}
#main h2 {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	color: gray;
}
#main h3 {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	color: gray;
}
#main h4 {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	color: gray;
}
[id^="evidenziato"] {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	color: gray;
}
#totale {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 150%;
	font-weight: bold;
	color: gray;
}
#main a {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: gray;
}
#main section.content {
	/*border: 2px solid red;*/
	flex: 5;
	order: 1;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom: 25px;
	border-bottom: lpx dashed gray;
	min-width: 20em;
	min-height: 25em;
}
#main section.content, article {
	/*border: 2px solid blue;*/
	margin-bottom: 2px;
	text-align: justify;
}
#main aside.sidebar {
	/*border: 2px solid green;*/
	flex: 1;
	order: 2;
	min-width: 8em;
	max-width: 280px;
	/* max-height: 100%; */
	margin: 0;
	margin-top: 0;
	padding: 9px;
	background: #886644;
	font-family: Arial, Helvetica, sans-serif;
	color: lightgray;

	overflow: hidden;
}
#main aside.sidebar a, #main aside.sidebar p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: lightgray;
}
#main aside.sidebar a { font-size: 60%; }
#main aside.sezione { border-top: 12px solid lightgray; }
#main td:first-child { vertical-align: top; white-space: nowrap; }
#main tr td, tr th { padding: 9px 5px; border-top: 2px solid #ffe5c4; }
#main a:hover { color: #EFFFFF; }
#main aside.sidebar:hover { color: #EFFFFF; }
#main aside.sidebar a:hover { color: #EFFFFF; }

/* Stile per la sezione di codice */
p { padding-bottom: 0.5em; }
.codice {
	background-color: #2e2e2e; /* Colore di sfondo scuro */
	color: #f8f8f2; /* Colore chiaro del testo, come in Sublime */
	font-family: 'Courier', monospace; /* Font in stile monospace */
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin: 20px auto;
	white-space: pre-wrap; /* Consente al testo di andare a capo se necessario */
	overflow-x: auto; /* Scorrimento orizzontale per codice troppo largo */
}
.topCodice {
	background-color: #2e2e2e; /* Colore di sfondo scuro */
	color: #f8f8f2; /* Colore chiaro del testo, come in Sublime */
	font-family: 'Courier', monospace; /* Font in stile monospace */
	white-space: pre-wrap; /* Consente al testo di andare a capo se necessario */
	overflow-x: auto; /* Scorrimento orizzontale per codice troppo largo */
}
.codiceTree {
	background-color: #2e2e2e; /* Colore di sfondo scuro */
	color: #f8f8f2; /* Colore chiaro del testo, come in Sublime */
	font-family: 'Courier', monospace; /* Font in stile monospace */
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin: 20px auto;
	white-space: pre-wrap; /* Consente al testo di andare a capo se necessario */
	overflow-x: auto; /* Scorrimento orizzontale per codice troppo largo */
}

.codice code {
	margin: 0;
	padding: 0;
	line-height: 1.5; /* Per migliorare la leggibilità del codice */
}
.codiceTree code {
	margin: 0;
	padding: 0;
	line-height: 1.2; /* Per migliorare la leggibilità del codice */
}

.no-wrap { white-space: nowrap; }

.header {
	display: flex;
	padding-bottom: 10px;
	justify-content: space-between;
	align-items: center;
	color: #888882;
	font-size: 14px;
	user-select: none; /* Impedisce la selezione del testo */
}

.language { font-size: 80%; }

.copy-btn {
	background-color: transparent;
	color: #888882;
	border: none;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color 0.1s ease;
}

.copy-btn .icon {
	width: 16px;
	height: 16px;
	transition: filter 0.1s ease;
}

.copy-btn:hover { color: #f8f8f2; }
.copy-btn:hover .icon { filter: brightness(2.5); }

.courier { font-family: Courier; }

ul li { margin-bottom: 0.5em; }

.custom-list { line-height: 1.2; }
.custom-list li::marker {
	font-size: 1.2em; /* Aumenta la dimensione dei numeri */
	font-weight: bold; /* Rende i numeri in grassetto */
	color: gray; /* Imposta un colore per i numeri */
}
.custom-list li {
	font-size: 1.2em; /* Rende il testo un po' più grande */
	font-weight: normal; /* Imposta il peso del testo per il contenuto */
}

.centratoGrande { font-size: 50px; text-align: center; }

/* Stile generale per tutte le tabelle */
table {	width: 80%;
		border-collapse: collapse;
		margin: 20px auto;
		font-size: 16px;
		text-align: left;
		background-color: #EEBB77;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		overflow: hidden;
}

/* Stile per celle di intestazione */
th {	background-color: #886644;
		color: #FFEEAA;
		font-weight: bold;
		border: 1px solid lightgrey;
		padding: 12px 8px;
		text-align: center;
}

/* Stile per celle di dati */
td {	border: 1px solid lightgrey;
		padding: 12px 8px;
		text-align: center;
}

/* Alternanza di colori nelle righe */
tr:nth-child(even) { background-color: #FFCC88; }

/* Effetto hover sulle righe */
tr:hover { background-color: #FFDD99; }

.logo-container {
	display: flex;
	align-items: center;
	gap: 15%;
	margin-left: 5%;
	margin-right: 5%;
}

@media (max-width: 768px) {
	.logo-container {
		flex-direction: column;
		margin-top: 5%;
		margin-bottom: 5%;
		gap: 30px;
		align-items: center;
	}
}

.logoImg-container {
	width: 40%;
	max-width: 40%;
	height: auto;
}

@media (max-width: 768px) {
	.logoImg-container {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

.panino { display: none; cursor: pointer; }
.grassetto { font-size: 120%;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
.margine { margin: 1em 0 1em; }

#testoGray {
	font-weight: bold;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5em;
}

.proposte { line-height: 2em; }
.corsi { line-height: 1.5em; text-align: left;}
#listaPopup li { cursor: pointer; }
#listaPopup li:hover { font-size: 120%;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); transition: 0.4s;}
.testo80 { font-size: 70%; }

.fisarmonica {
	border: 2px solid #ffe5c4;
	border-radius: 9px;
	background: #FFCC88;
	width: 100%;
	margin-bottom: 1em;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	color: gray;
	font-weight: bold;
	transition: 0.4s;
}
.fisarmonica img, p { margin: 0 0.7em 0 0.2em ; }
.active, .fisarmonica:hover { background-color: #FFDDAA; }
.symbol { font-size: 50%; float: right; }
.sezioneChiudibile { display: none; }
.sezioneChiudibile a { text-align: left; }
.sezioneChiudibile a img { vertical-align: middle; }
.sezione { padding: 9px 5px; border-top: 2px solid #ffe5c4; }
.sezione a { white-space: nowrap; }
.sezione a img { vertical-align: middle; }
.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 13em));
	padding: 0.5em;
	margin-bottom: 1em;
	grid-gap: 1em;
}
.caso {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #FFDDAA;
	max-width: 15em;
	padding: 0.5em;
	padding-top: 0.3em;
	color: gray;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 9px;
}
#prevButton, #nextButton {
	display: none;
	background: #FFCC88;
	color: gray;
	font-size: 2em;
	padding: 4em 0 4em 0;
	cursor: pointer;
	border: none;
}
#prevButton:hover, #nextButton:hover { color: white; }
.casoImmagine {
	width: 100%;
	max-width: 15em;
	height: auto;
	border-radius: 12px;
}
.casoImmagineCosto {
	padding-top: 9px;
	width: 100%;
	max-width: 15em;
	height: auto;
}
.link-button {
	text-decoration: none;
	display: inline-block;
	background-color: #FFDDAA;
	color: #fff;
	padding: 9px 9px;
	border: none;
	border-radius: 9px;
	cursor: pointer;
}
.link-button:hover { background-color: #886644; transition: 0.4s; }
.sottolineato {	text-decoration: underline; font-weight: bold; }
.centra-immagine {
	height: auto;
	box-sizing: border-box;
	padding: 15px;
	box-sizing: border-box;
	object-fit: contain;
	margin: 9px;
	text-align: center;
	max-width: 95%;
}
.img_stessa_riga {
	padding-top: 9px;
	padding-bottom: 9px;
	display: flex;
	justify-content: center;
}
.social-link { position: relative; }
.tooltip {
	visibility: hidden;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 5px 10px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.2s;
}
.social-link:hover .tooltip {
	visibility: visible;
	opacity: 1;
}
[id^="costo"] {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.1em;
	color: gray;
}
#centra-DAKOTAworkFlow {
	width: 100%;
	max-width: 660px;
	height: auto;
}
#centra-blackBox {
	width: 100%;
	max-width: 819px;
	height: auto;
}
#centra-powderCoating {
	width: 100%;
	max-width: 660px;
	height: auto;
}
#centra-sinventive {
	width: 100%;
	max-width: 780px;
	height: auto;
}

.generic-picture {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.linkList {
	padding: 15px;
	font-size: 1.0em;
	display: inline-block;
	word-wrap: break-word;
	white-space: normal;
}
.linkListTXT { font-size: 1em; }

.logo { margin-right: 0.7em; }

.linkLast {	font-size: 1.5em; }

#logoFB {
	width: 100%;
	max-width: 800px;
	height: auto;
	display: block;
	margin: 2em auto;
}
#logoFBdownload {
	border: 2px solid gray;
	border-radius: 9px;
	padding: 5px;
	height: auto;
}
#foamB_page1 {
	width: 100%;
	max-width: 883px;
	height: auto;
}
#foamB_imgSmall {
	width: 100%;
	max-width: 175px;
	height: auto;
}
#foamB_imgBig {	width: 100%; height: auto; }
.cliccami:hover { cursor: pointer; }
.figure {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	color: gray;
	text-align: center;
	margin: 0.5em 0 0.1em 0;
}
.figure figure { display: inline-block; }

.didascalia {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	color: gray;
	text-align: center;
	margin: 0.5em 0 0.1em 0;
}

#profilepic { margin: 0 0 15px 0; }

#profilepic img { margin: 0 0 15px 0; }

#profilepic figcaption { width: 80%; max-width: 200px; }

option[hidden] { display: none; }

label.formStyle {
	display: block;
	width: 160px;
	text-align: left;
	margin-right: 20px;
}

input.formStyle, select.formStyle, textarea.formStyle { width: 250px; }

input.contactStyle, select.contactStyle, textarea.contactStyle {
	display: block;
	width: 300px;
	text-align: left;
	margin: 1em;
}

input::placeholder, textarea::placeholder { color: lightgray; }

#backToTopBtn {
	border: none;
	display: none;
	position: fixed;
	top: 5%;
	left: 45%;
	font-size: 24px;
	background-color: #886644;
	color: #FFDDAA;
	border-radius: 9px;
	padding: 10px;
	cursor: pointer;
	outline: none;
}
#backToTopBtn:hover { color: white; transition: 0.4s; }

#conferma {
	border: 3px solid #886644;
	border-radius: 7px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 2em;
	width: 50px;
	color: gray;
	background-color: #FFDDAA;
	line-height: 10px;
}
#conferma:hover {
	border: 3px solid gray;
	cursor: pointer;
	color: white;
	background-color: white;
	transition: 0.3s;
}
#checkout {
	border: 3px solid #886644;
	margin-top: 1rem;
	padding: 
	border-radius: 17px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: gray;
	max-width: 100%;
	background-color: #FFDDAA;
	font-size: 1.5em;
	line-height: 1.5em;
}
#checkout:hover {
	border: 3px solid #FFDDAA;
	cursor: pointer;
	color: white;
	background-color: #886644;
	transition: 0.3s;
}
[id^="delTut"] {
	border: 1px solid #886644;
	font-family: Arial, Helvetica,
	sans-serif; font-weight: bold;
	color: gray;
	border-radius: 5px;
	background-color: #FFDDAA;
}
[id^="delTut"]:hover {
	border: 1px solid #FFDDAA;
	cursor: pointer;
	color: white;
	background-color: #886644;
	transition: 0.3s;
}
[id^="popup"] {
	display: none;
	border: 3px solid #886644;
	padding: 0.18em 0.7em 0.2em 0.7em;
	border-radius: 17px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: gray;
	background-color: rgba(255, 221, 170, 0.85);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	z-index: 1000;
}
.bottoni {
	border: 2px solid #886644;
	border-radius: 5px;
	margin: 0.3em;
	width: 0.8em;
	height: 0.8em;
	text-align: center;
	line-height: 0.5em;
}
.bottoni:hover {
	cursor: pointer;
	background-color: white;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transition: 0.3s;
}
.bottoniWhite {
	border: 2px solid white;
	border-radius: 5px;
	background-color: #FFDDAA;
	margin: 0.3em;
	width: 0.8em;
	height: 0.8em;
	color: gray;
	text-align: center;
	line-height: 0.5em;
}
.bottoniWhite:hover {
	border: 2px solid gray;
	cursor: pointer;
	background-color: white;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transition: 0.3s;
}
.label {
	/*border: 3px solid #886644;
	background: #F0F0F0;
	border-radius: 9px;*/
	color: gray;
	padding-bottom: 1.0em;
}
.vai_a {
	/*border: 3px solid #886644;
	background: #F0F0F0;
	border-radius: 9px;*/
	color: gray;
	font-weight: bold;
	padding-bottom: 13px;
}
/*.vai_a:hover { cursor: pointer; }*/
.icone { margin-right: 0.7em; }
#rimuoviTut {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 99;
	transform: translate(-50%, -50%);
	border: 3px solid #886644;
	border-radius: 19px;
	padding: 0.5em;
	width: 300px;
	background-color: rgba(255, 221, 170, 0.85);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#rimuoviTut p {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	color: gray;
}
#yesNo {
	border: 3px solid #886644;
	border-radius: 7px;
	font-family: Arial, Helvetica,
	sans-serif; font-weight: bold;
	color: gray;
	background-color: #FFDDAA;
	width: 3em;
	text-align: center;
	height: 1.3em;
	cursor: pointer;
}
#yesNo:hover {
	border: 3px solid gray;
	font-weight: bold;
	background-color: white;
	transition: 0.3s;
}
#informativa {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 99;
	transform: translate(-50%, -50%);
	border: 3px solid #886644;
	border-radius: 19px;
	width: 60%;
	padding: 0.5em;
	background-color: rgba(255, 221, 170);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

@keyframes blink {
	0%   { opacity: 1; }
	33%  { opacity: 0.2; }
	66%  { opacity: 0.8; }
	75%  { opacity: 0.5; }
	100% { opacity: 1; }
}

@media screen and (max-height: 800px) and (min-width: 600px) {
	#main { position: relative; }
	#site-nav { position: absolute; max-height: 400px; }
	#non-scroller-p { position: relative; /*top: 1220px;*/}
	.sidebar_panino { position: relative; /*top: 1248px;*/}
	#site-footer { position: relative; /*top: 1200px;*/ width: 100%; }
}
/***********************************************
 * media query per schermi a bassa risoluzione *
 ***********************************************/
@media screen and (max-width: 1366px) {
	body { font-size: 0.71em; }
	#site-footer a { margin: 0 1.6%; }
	#main { margin-left: 5px; }
	#site-nav { max-width: 13em; }
	.grid-container {
		padding: 0.5em;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(7em, 13em));
		gap: 1em;
	}
	.caso { max-width: 13em; }
	.link-button { max-width: 13em; }
	#backToTopBtn { font-size: 100%; left: 42%; }
	[class^="bottoni"] {
		margin: 0.4em;
		width: 1em;
		height: 1em;
	}
}
@media (min-width: 308px) { body { overflow-x: hidden; } }
@media screen and (max-width: 800px) {
	#main aside.sidebar { display: none; }
	.sidebar_panino {
		width: 100%;
		overflow-x: auto;
		display: inline-block;
		background: #886644;
		font-family: Arial, Helvetica, sans-serif;
		color: lightgray;
	}
	.aside_panino a { color: lightgray; }
	.sidebar_panino a:hover { color: #EFFFFF; }
	.contenitoreAside_Panino { white-space: nowrap; display: flex; }
	.aside_panino {
		padding: 10px;
		margin: 5px;
		border: 1px solid lightgray;
		line-height: 2.5em;
	}
	.dot { height: 0.7em; width: 1.4em; margin: 0.5em; }
	#non-scroller-p {
		padding-left: 1em;
		margin: 0.3em 0 0 0;
		font-size: 170%;
		white-space: normal;
		width: auto;
	}
}
@media screen and (max-width: 626px) {
	#prevButton, #nextButton { display: block; margin: 0; font-size: 2.5em; }
	.grid-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
@media screen and (max-width: 600px) {
	.dot {
		height: 0.5em;
		width: 1.0em;
		margin: 0.5em;
	}
	#site-nav_panino { display: flex; flex-wrap: wrap; font-size: 120%; }
	#prevButton, #nextButton { margin: 0; font-size: 2.5em; }
	#site-nav_panino a:hover { color: lightgray; }
	#site-nav { display: none; }
	#main section.content { margin-top: 0; }
	#backToTopBtn { font-size: 80%; left: 34%; }
	#informativa { width: 90%; }
}

math {
	font-size: 1000%;  /* Aumenta la dimensione del font al 200% */
	display: block;   /* Assicura che la formula occupi una riga intera */
	text-align: center; /* Centra la formula orizzontalmente */
}

id='checkout'
.content header h1 {
	text-align: center;
	margin-bottom: 1rem;
	font-size: 1.8rem;
	color: #333;
}

.login-intro {
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.6;
}

.login-form {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.login-form label {
	text-align: left;
	font-weight: 600;
}

.login-form input {
	padding: 0.6rem;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1rem;
}

.login-form input:focus {
	outline: none;
	border-color: #0077cc;
	box-shadow: 0 0 4px rgba(0, 119, 204, 0.3);
}

.btn-login {
	background-color: #886644;
	color: #ffeeaa;
	border: none;
	padding: 0.8rem;
	border-radius: 16px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.btn-login:hover {
	background-color: #ffeeaa;
    color: #886644;
    padding: 0.8rem;
    border-radius: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.login-message {
	text-align: center;
	margin-bottom: 1rem;
	padding: 0.5rem;
	border-radius: 9px;
	font-weight: bold;
	border: 0.2em solid red;
}
.login-message.error {
	background-color: #ffe5e5;
	color: #b00000;
}
.login-message.success {
	background-color: #e5ffe5;
	color: #006600;
}

#vtkContainer {
	width: 100%;
	height: calc(100vh - 276px);
	position: relative;
}

@media (max-width: 1366px) {
	#vtkContainer {
		height: calc(100vh - 211px);
	}
}

.row-link {
	text-decoration: none;
	color: inherit;
	display: block;
	width: 100%;
}
.project-table tbody tr:hover {
	background-color: #FFEEAA;
}

.form-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.form-row label {
	width: 180px;
	font-weight: bold;
}

.form-row input {
	flex: 1;
	padding: 5px;
}