@font-face {
	font-family: customFont;
	src: url('./font/RedHatText-Regular.ttf');
}

@font-face {
	font-family: fixedFont;
	src: url('./font/LiberationMono-Regular.ttf');
}

/* colors */

:root {
  --color-control-bkg:    #87de9b;
  --color-important-text: #888C8F;
  --color-menu-container: #d7f4de;
  --color-menu-item:      #666666;
  --color-separator-line: #E0E0E0;
  --color-header:         #333333;
  --color-button-text:    #FAFAFA;
  --color-button-bkg:     #207736;
  --color-logo:           #207736;
  --color-menu-button:    #106726;
  --color-bordi-griglia:  #AAAAAA;
  --color-riga-nuova:     #DDFFFF;
  --color-riga-alternata: #EEEEEE;
}

/* general */

body {
    font-family: customFont;
}

.button {
    border-radius: 8px;
    font-size: 25px;
    padding: 6px 20px 6px 20px;
    color: var(--color-button-text);
    background-color: var(--color-button-bkg);
}

input, select {
    font-family: customFont;
}

.label-titolo {
    font-size:40px;
    display:block;
}

/* login */

.login-field, .login-label {
    font-size: 25px;
    color: var(--color-logo-big);
}

.login-field {
    border-radius: 6px;
    border-color: var(--color-logo-big);
}

/* menu */

.menu td {
    background-color: var(--color-menu-button);
    text-align:center;
    padding: 10px;
    min-width:130px;
}

    .menu td a {
        color: white;
        text-decoration:none;
        font-weight:bold;
        font-size:1.6em;
    }

.menu td.tabCorrente {
    background-color: white;
}

    .menu td.tabCorrente a {
        color: black;
    }

/* giornale */

.tabella-filtri {
    margin-left: auto;
    margin-right: auto;
}

.tabella-filtri tr td input,
.tabella-filtri tr td select,
.date-picker {
    width:100%;
    font-size:20px;
    padding:10px 0px 10px 10px;
    margin-top:15px;
    border:none;
    background-color: var(--color-control-bkg);
}

    .tabella-filtri tr td span {
        text-align:right;
        vertical-align:baseline;
        font-weight:bold;
    }

    /*.date-picker::-webkit-calendar-picker-indicator {
        padding:0px;
    }*/

.intestazione {
    font-size:22px;
    font-weight:bold;
    padding:5px;
    margin-top:18px;
    display:block;
    flex:2;
}

.utente {
    font-size:16px;
    flex:3;
    margin-top:35px;
    padding-right:5px;
    text-align:right;
}

.tblGiornale, .tblGiornale td, .tblGiornale th {
    border: 1px solid var(--color-bordi-griglia);
}

.tblGiornale {
    border-collapse: collapse;
    border:none;
    margin-top:10px;
}

    .tblGiornale tr:nth-child(2n+3) td:not(:first-child) {
        background-color: var(--color-riga-alternata);
    }

.tblGiornale tr:first-child td {
    border:none;
    font-weight: bold;
    padding:4px;
}

.tblGiornale td {
    text-align: center;
    width:10px;
}

    .tblGiornale td:first-child {
        border:none;
        background-color:transparent;
    }

.tblGiornale td input[type="text"], .tblGiornale td select {
    border: none;
    text-align:center;
    background-color:transparent;
}

.tblGiornale td input[type="text"] {
    width: 90%;
}

tr.nuova td select {
    margin: 10px;
}

.tblGiornale tr.nuova td:nth-child(2) {
    /*background-color: var(--color-riga-nuova);*/
    background-color: transparent;
    border:none;
}

    .tblGiornale tr.nuova td:nth-child(2) select {
        background-color: #dff;
        padding:5px;
        border-color:#ccc;
        border-style:solid;
        border-width:1px;
    }

tr.nuova td:nth-child(n+3),
tr.nuova:nth-child(2n+3) td:nth-child(n+3) {
    border: none;
    background-color: transparent;
}

.cmdRiga {
    width:25px;
    margin:5px;
}

.label-stato {
    font-size:0.8em;
    color: #f55;
    text-align:right;
}

.v-flex-container {
    display: inline-flex;
    flex-direction: column;
}

.h-flex-container {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
}

.whole-row {
    flex: 0 0 100%;
}

.left-filler {
    min-height:50px;
}

.right-cell {
    text-align:right;
}

/* tabella ultimi */

.tblUltimi, .tblUltimi td, .tblUltimi th {
    border: 1px solid var(--color-bordi-griglia);
}

.tblUltimi {
    border-collapse: collapse;
    border:none;
    margin-top:30px;
    margin-left: auto;
    margin-right: auto;
}

    .tblUltimi tr:nth-child(2n+3) {
        background-color: var(--color-riga-alternata);
    }