/* COLORI */
:root {
   --sfondo-primario: #282c34;
   --sfondo-secondario: #2c313c;
   --colore-campi: #3a3f4b;
   --colore-bottoni: #3f51b5;
   --colore-link: #82abff;
   --colore-testo: #ffffff;
}

/* BODY */
body {
    background-color: var(--sfondo-secondario);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: var(--colore-testo);
}

/* COLONNA RESPONSIVE */
.responsive {
    height: 1px;
}

/* HEADER */
header {
    background-color: var(--sfondo-primario);
    margin-bottom: 15px;
}

/* MODAL */
.w3-modal-content {
    background-color: var(--sfondo-secondario);
    max-width: 500px;
    padding-bottom: 20px;
}

/* BOTTONI */
button {
    background-color: var(--colore-bottoni)!important;
    color: var(--colore-testo)!important;
}

.menu {
    background-color: var(--sfondo-primario)!important;
    color: var(--colore-testo)!important;
    font-size: 20px;
    position: absolute;
    left: 0;
}

.menu:focus, .menu:hover {
    background-color: var(--primary-color)!important;
    color: var(--text-color)!important;
}

.menu i {
    vertical-align: middle;
}

.fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    font-size: 30px;
    padding: 13px;
}

/* LINKS */
a {
    color: var(--colore-link);
    text-decoration: none;
}

/* CAMPI INPUT */
input, select {
    background-color: var(--colore-campi);
    color: var(--colore-testo);
}

input:focus, select:focus, button:focus {
    outline: none;
}

.w3-check {
    width: 22px;
    height: 22px;
    margin: 3px;
}