/* =========================
   RESET
========================= */
* {
    margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
    font-family: Arial, sans-serif;
}

body {
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =========================
   HEADER
========================= */
header {
	position: relative;
	height: 10vh;
    background: #fff;
    display: flex;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); 	/* ombra inferiore */
    z-index: 10;
}

/* due parti uguali */
.header-left,
.header-right {
    width: 50%;
    display: flex;
    align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}

.header-left img {
    height: 60%;
}

.header-right {
    justify-content: right;
}

/* =========================
   MAIN
========================= */
main {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
	background: #e0e0e0;
}

/* COLONNE */
.col {
    height: 100%;
}

/* SINISTRA */
.left, .right {
    width: 25%;
    overflow: hidden;
}

/* CENTRO */
.center {
    width: 50%;
    overflow: hidden;
}

/* CONTENITORI */
.container {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.contained {
    height: 74%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
	background: #fff;
	padding: 10;
}

/* TABLE */
.table {
    width: 100%;
    border-collapse: collapse;	
}

/* =========================
   FOOTER
========================= */
footer {
    margin: 0;
	height: 15vh;
    background: #0b2540;						/* blu scuro */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.footer-box {
    width: 50%;
    margin-top: 0px;
}

.footer-box input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 0;
    outline: none;
    color: #000;
    background: #fff;
    font-size: 25px;
	font-style: normal;
}

/* Placeholder corsivo compatibile su tutti i browser moderni */
.footer-box input::placeholder {
    font-style: italic;
    color: #999;
}

/* Prefissi WebKit per Chrome, Opera, Edge, Safari */
.footer-box input::-webkit-input-placeholder {
    font-style: italic;
    color: #999;
}

/* Firefox */
.footer-box input::-moz-placeholder {
    font-style: italic;
    color: #999;
}

/* LINK al posto dell'input */
.footer-box .footer-link {
    display: flex;                  /* fondamentale */
    width: 100%;
    padding: 10px;
    background: #fff;
    color: #000;
    font-size: 25px;
    font-style: normal;
    text-decoration: none;

    /* centratura */
    justify-content: center;         /* orizzontale */
    align-items: center;             /* verticale */

    box-sizing: border-box;
}

/* Hover opzionale */
.footer-box .footer-link:hover {
    background: #e0e0e0;
}