:root {
	--colore-bordo-celle: lightslategray;
	--colore-sfondo-lista: lightsteelblue;
	--main-color: #00486b;
	--alert-main-color: #0e6692;
	--modal-window-border-radius: 9px;
	--modal-window-padding: 20px;
	--action-buttons-background-color: #4CAF50;
	--owner-card-border-radius: 9px;
	--owner-card-padding: 15px;
	--owner-card-background-color: hsl(56.0, 48.4%, 93.9%);
	--apt-row-hover-background-color: hsl(56.0, 48.4%, 84.9%);
}

* {
	/* font-family: Montserrat; */
	font-family: Inter;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

button {
	cursor: pointer;
}

input[type="number"] {
	width: 50px;
}

#header-title {
	position: fixed;
	display: flex;
	justify-content: right;
	align-items: center;
	color: #666;
	background-color: rgb(230, 218, 59);
	height: 70px;
	top: 20px;
	left: 0;
	right: 0;
	padding-right: 20px;
	gap: 20px;
	z-index: 1000;
}

#header-title>h2 {
	font-size: 1.3em;
}

#header-wrapper {
	filter: drop-shadow(5px -5px 8px gray);
	pointer-events: none;
	width: 100%;
	position: fixed;
	z-index: 1001;
}

#page-header {
	padding: 0 0 0 40px;
	display: flex;
	flex-direction: row;
	background-color: var(--main-color);
	justify-content: space-between;
	padding-right: 25%;
	align-items: center;
	height: 102px;
	color: white;
	text-transform: uppercase;
	/* clip-path: polygon(0 0, 80% 0%, 78% 100%, 0% 100%); */
	clip-path: polygon(0 0, 100% 0%, 100% 20px, 80% 20px, 78% 100%, 0% 100%);
}

#page-header > a.logo {
	display: block;
	height: 50px;
	width: 180px;
	background-image: url(img/everyday-logo-white-70.png);
	background-size: cover;
	cursor: pointer;
}


#page-content {
	/*height: calc(100vh - 102px);*/
	display: flex;
	align-items: center;
	justify-content: center;
	/*flex-direction: row;*/
	padding-top: 120px;
	padding-bottom: 50px;
}

#page-content.vertical {
	flex-direction: column;
}

a#logout {
	background-image: url(img/power-off-32.png);
}

a#configurazione {
	background-image: url(img/cogwheel-32.png);
}

a#riconciliazione {
	background-image: url(img/home-dollar-32.png);
}

/*a#importa-numeri-fatture {*/
/*	background-image: url(img/invoice-32.png);*/
/*}*/

a#tassa-soggiorno {
	background-image: url(img/tax-32.png);
	width: 32px;
}

a.menu {
	background-repeat: no-repeat;
	display: block;
	width: 32px;
	height: 32px;
}

a.menu:hover {
	cursor: pointer;
}

.noselect {
	user-select: none;	/* Standard */
	-webkit-user-select: none;	/* Safari/Chrome */
	-moz-user-select: none;	/* Firefox */
	-ms-user-select: none;	/* IE/Edge */
}

/*.loader {
	width: 40px;
	height: 40px;
	border: 5px solid #ccc;
	border-top-color: #007bff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 100;
	background: transparent;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}*/

.modal-back {	/* Sfondo traslucido */
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 200;
}

.hidden {
	display: none !important;
}

.modal-window {
	padding: 0;
	background-color: white;
	border-radius: var(--modal-window-border-radius);
	padding: var(--modal-window-padding);
}

.modal-title {
	background-color: var(--alert-main-color);
	padding: 15px 20px;
	border-bottom: 1px solid #ddd;
	text-align: left;
	border-top-left-radius: var(--modal-window-border-radius);
	border-top-right-radius: var(--modal-window-border-radius);
	margin-left: calc(-1 * var(--modal-window-padding));
	margin-top: calc(-1 * var(--modal-window-padding));
	margin-right: calc(-1 * var(--modal-window-padding));
	margin-bottom: 20px;
	border-bottom: 1px solid #ddd;
}

.modal-title h2 {
	margin: 0;
	font-size: 110%;
	text-transform: uppercase;
	color: white;
}

.modal-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 10px;
	width: 500px;
}

.modal-content h2 {
	margin: 0;
	font-size: 1.2em;
	font-weight: 600;
	color: var(--main-color);
	margin-top: 0;
    margin-bottom: 0;
}

.modal-content label {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: first baseline;
	width: 100%;
	gap: 10px;
	font-weight: 600;
	white-space: nowrap;
}

.modal-content input {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
}

.modal-actions {
	margin-top: 30px;
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}

.modal-actions button {
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	padding: 4px;
	margin-left: 16px;
	min-width: 120px;
	transition: filter 0.2s;
}

.modal-actions button:hover {
	filter: brightness(85%);
}