@import "/css/colori.css";
@import "/css/fonts.css";

body{
    background-color: var(--ColoreSfondo);
    font-family: "Be Vietnam Pro", sans-serif;
    margin: 0px;
    background-image: var(--ImmagineSfondo);
}

*::selection{
    background: var(--ColoreChiaro);
    color: var(--ColoreScuro);
}

header{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid var(--ColoreBordino);
}

header a{
    height: 40px;
    padding: 0px 15px;
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--ColoreTesto);
    transition: .2s ease;
}

header a:hover{
    transform: scale(1.05);
    cursor: pointer;
}

header div{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#StampaPagina{
    background-color: transparent;
    height: 36px;
    width: 36px;
    border-radius: 18px;
    border: none;
    transition: .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}

#StampaPagina svg{
    fill: var(--ColoreMedio);
    transition: .2s ease;
}

#StampaPagina:hover{
    background-color: var(--ColoreMedio);
    cursor: pointer;
}

#StampaPagina:hover svg{
    fill: var(--ColoreSfondo);
}

header a:last-child{
    font-weight: bold;
    border-radius: 10px;
    background-color: var(--ColoreChiaro);
    color: var(--ColoreScuro);
}

header a:last-child:hover{
    transform: none;
    background-color: var(--ColoreTestoVerde);
    color: var(--ColoreSfondo);
}

header a img{
    height: 100%;
    border-radius: 0px;
    margin-right: 10px;
}

header a b{
    margin-right: 3px;
}

header a svg{
    fill: var(--ColoreScuro);
    transition: .2s ease;
}

header a:hover svg{
    fill: var(--ColoreSfondo);
    transform: translateX(10px);
}

main{
    height: calc(100vh - 57px);  /*57px = 40px di header + 16px di padding header + 1px bordo inferiore header*/
    overflow: auto;
    margin: 0px;
    padding: 0px 20px;
    scroll-behavior: smooth;
}


@media only screen and (min-device-width: 600px) 
{
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--ColoreBordino);
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #939393;
    } 
}

@media only screen and (min-width: 1300px) 
{
    main{
        padding: 0px 200px;
    }
}

#GridContainer{
    display: grid;
    grid-template-columns: 100% 100%;
    overflow-x: hidden;                 /*Scroll tramite javascript*/
    scroll-behavior: smooth;
    scrollbar-width: tiny;
    border-top: 1px solid var(--ColoreBordino);
}

#GuidaTecnica, #IstruzioniCompilazione{
    overflow: hidden;
    background-image: var(--ImmagineSfondo);
    background-color: var(--ColoreSfondo);
}

#GuidaTecnica{
    grid-column: 1;
}

#IstruzioniCompilazione{
    grid-column: 2;
}

h1{
  font-family: "Open Sans", "Be Vietnam Pro", sans-serif;
  font-size: 30px;
  font-variation-settings: 'wght' 700;
}

main a{
    color: var(--ColoreMedio);
}

main a.immagine{
    display: block;
    width: fit-content;
    margin: auto;
}

h3, h4{
    margin-bottom: 0px;
}

a h3{
    color: var(--ColoreTesto);
    text-decoration-color: var(--ColoreTesto);
    text-decoration-line: underline;
}

h4{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

p{
    margin-top: 5px;
}

ul{
    margin-top: 5px;
}

img{
    max-width: 100%;
    border-radius: 15px;
    margin: auto;
    margin-bottom: 30px;
    display: block;
}

img#ImmagineHome {
    /* -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1)); */
    width: 70%;
    /* float: right; */
}

img#ImmagineRegistrazione,
img#ImmagineLogin{
    margin: auto;
    margin-bottom: 30px;
    display: block;
}

table{
    border-collapse: collapse;
    margin: auto;
}

table thead tr th,
table tbody tr td{
    border: 1px solid var(--ColoreBordino);
    padding: 7px 15px;
}

img#ImmagineCommesse{
    max-width: 100%;
    display: block;
    margin: auto;
    margin-bottom: 30px;
}

img#ImmagineCalendarioTablet,
img#ImmagineCalendarioPC{
    max-width: 100%;
}

main svg{
    fill: var(--ColoreMedio);
    vertical-align: bottom;
}

button.bottoneBloccato{
    background-color: lightcoral;
    margin: auto;
    display: block;
    border: 1px solid black;
}

button.bottoneBloccato:hover{
    cursor: pointer;
}

button.bottoneBloccato svg{
    fill: var(--ColoreScuro);
}

span.daStampare{
    display: none;
}


footer{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    background-color: var(--ColoreSfondo);
    z-index: 10;
    padding: 5px;
    border: none;
    border-radius: 21px;
    box-shadow:  5px 5px 10px var(--ColoreOmbraEsternaScuro);
}

footer button{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 3px 10px;
    margin-right: 10px;
    transition: .2s ease;
    color: var(--ColoreTestoVerde);
}

footer button:hover{
    border: 1px solid var(--ColoreBordino);
    cursor: pointer;
}

footer button.attivo{
    background-color: var(--ColoreChiaro);
    color: var(--ColoreScuro);
}

footer button.attivo:hover{
    border-color: var(--ColoreChiaro);
}

footer button:last-child{
    margin: 0px;
}

footer button svg{
    margin-right: 5px;
    fill: var(--ColoreTestoVerde);
    transition: .2s ease;
}

footer button.attivo svg{
    fill: var(--ColoreScuro);
}



/* SEZIONE STAMPA */
@media print{

    /* Nascondo il bottone di stampa */
    #StampaPagina{
        display: none;
    }

    /* Nascondo il bottone 'vai alla home' */
    header a:last-child{
        display: none;
    }

    /* Nascondo il menu per navigare tra una sezione e l'altra della guida */
    footer{
        display: none;
    }

    /* Tolgo l'overflow del main impostandolo alla sua massima altezza */
    main{
        height: 100%;
    }

    /* Rimuovo il display grid */
    #GridContainer{
        display: block;
    }

    /* Aggiungo un bordino sopra al div delle istruzioni */
    #IstruzioniCompilazione{
        border-top: 1px solid var(--ColoreBordino);
        page-break-before: always;
        break-before: always;
        height: 100% !important;  /* Cerco di fare l'override dell'altezza impostata con javascript */
    }

    #GuidaTecnica{
        height: 100% !important;  /* Cerco di fare l'override dell'altezza impostata con javascript */
    }

    /* Mi assicuro che la tabella abbia bordi ben visibili */
    table{
        border-collapse: collapse;
    }

    table th, table td{
        border: 1px solid var(--ColoreBordino);
    }

    /* Evito di spezzare le immagini in più pagine */
    img{
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Mostro le scritte che sono da stampare */
    span.daStampare{
        display: inline;
        font-style: italic;
    }
}