body {
    font-family: 'Roboto', sans-serif;
    /* background-color: ivory; */
}


.hide {
    display: none !important;
}

.container {
    max-width: 1800px;
    width: 100%;
}

.navbar {
    background-color: #16aa2f;
}

.modal-zoom {
    margin-top: 10%;
    width: 90%;
    border: 5px solid #cfc;
    background-color: #cfc;
}

.modal-zoom .table {
    background-color: #cfc;
}

.modal-zoom .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
    background-color: #cff;
}

.modal-zoom .table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: #ffc;
}

#waitModal {
    display: none;
    background-color: ivory;
    border: 5px solid yellowgreen;
    font-size: 4em;
    padding-top: 3em;
    text-align: center;
    animation: fadeInOut 3s ease-in-out;
    height: calc(100% - 41px - 1em);
}

#waitModal.modal.visible {
    display: block;
}


@keyframes fadeInOut {
    0% {
        opacity: 0;
        display: none;
    }

    70% {
        opacity: 0.1;
        display: none;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

.field-label {
    text-align: start;
}

.InfoError {
    background-color: lightcoral;
    border-style: solid;
    border-color: red;
    border-width: medium;
    border-radius: 1em;
    margin: 1em;
    padding: 1em;

}

#panelInfo {
    display: none;
    height: auto;
    position: fixed;
    width: 88%;
    top: 5em;

}
#panelInfo.notifica {
    display: block;
    background-color: lightcoral;
    border-style: solid;
    border-color: red;
    border-width: medium;
    border-radius: 1em;
    margin: 1em;
    padding: 1em;
    z-index: 100;
}

#idBtn8 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .button {
        width: 50%;
    }
}

.panel0 {
    display: flex;
    flex-direction: row;
    width: 100%;

    .button {
        width: 25%;
    }

    .title {
        width: 75%;
        text-align: center;
    }
}

#panel1 {
    display: flex;
    flex-direction: row;

    .button {
        width: calc(50% - 2em);
        margin: .2em 1em;
    }

    #idMenu010 {
        margin: 1em 0;
    }
}

#panel2 {
    .menu {
        width: 100%;

        .button {
            width: calc(50% - 2em);
            margin: .2em 1em;
        }

    }

}

#pnlLog {
    display: flex;
    flex-direction: column;
    width: calc(100% - 1px);
    height: 4em;
    overflow: auto;
    background-color: ivory;
    border: 1px solid #16aa2f;
    font-size: smaller;
    padding: 0 .5em;
    position: fixed;
    bottom: 41px;
    left: 01px;

}

#idBtnA4 {
    .button {
        width: 100%;
    }
}

#mainForm button {
    transition: 0.3s;

    &:hover {
        background-color: #a5f0b2;
        border-radius: 1em ;
        border: .2em solid #16aa2f;
    }

    &:active {
        background-color: #16aa2f;
    }
}

#etichetteForm {
    display: grid;
    grid-template-columns: 40% 40% auto;
    grid-template-rows: 20em auto;
    grid-template-areas:
        'data1 eti_img dataP'
        'data1 data2 dataP';

    #idSLIdata1 {
        grid-area: data1;
    }

    #idSLIdata2 {
        grid-area: data2;
    }

    #idSLIPRN {
        grid-area: dataP;
    }

    #idSLIimg {
        grid-area: eti_img;

        img {
            height: auto;
            width: auto;
            max-width: 100%;
            max-height: 100%;
        }
    }
}

#idLancioOE {
    width: 100%;
    display: grid;
    grid-template-columns: auto 20%;
    grid-template-rows: auto;
    grid-template-areas:
        'data1 act';

    #LancioOE {
        grid-area: data1;
    }

    #LancioOE_ACT {
        grid-area: act;
        display: flex;
        flex-direction: column;

        button {
            width: 100%;
            margin: .2em 0;
        }

        .field {
            margin: 1em 0;
        }
    }

    #OEinfo {
        margin: 2em 0;
        grid-area: data1;
        display: flex;
        flex-direction: column;


        b {
            border-bottom: solid 1px lightgray;
            padding: 0 1em;
        }
    }

    #OE_USNs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .card {
            width: 11em;
            margin: .5em;
            display: flex;
            flex-direction: row;

            &.selected {
                background-color: #a5f0b2;
            }

            .xcard-content {
                padding: .5em;
                width: 90%;
            }

            .xcard-actions {
                padding: .5em;
                align-items: right;
            }
        }

        h4 {
            font-size: 80%;
            background-color: lightgray;
        }
    }
}

#idProduzioneDivingContainer {
    width: 100%;
    display: flex;
    flex-direction: row;

    #idProduzioneDivingForm {
        width: 100%;

        #BAR {
            display: flex;
            flex-direction: row;

            .field-usn {
                width: 20em;
            }

            #curUSN {
                width: 15em;
                font-size: xx-large;
                text-align: center;
            }

            #curSN {
                width: 15em;
                font-size: xx-large;
                text-align: center;
            }

            #curUSN {
                width: 10em;
                font-size: large;
                text-align: center;
            }
        }

        #produzioneDivingInfo {
            margin: 2em 0;
            grid-area: data1;
            display: flex;
            flex-direction: column;

            #infoLotti {

                .lottoOK {
                    background-color: lightgreen;
                }

                .lottoNOK {
                    background-color: lightcoral;
                }
            }
        }

        .field-body {
            width: 15em;

        }
    }

    #ACT {
        width: 7em;

        button {
            width: 100%;
            margin: .2em 0;
        }

        .selected {
            background-color: #ffc400;
        }
    }
}

#dichiarazioniForm {
    width: 100%;
    display: grid;
    grid-template-columns: auto 20%;
    grid-template-rows: auto;
    grid-template-areas:
        'data act';

    #DATA {
        grid-area: data;
        margin-right: 5em;
        margin-top: 1em;
    }

    #ACT {
        grid-area: act;
        display: flex;
        flex-direction: column;

        button {
            width: 100%;
            margin: .2em 0;
        }

        .selected {
            background-color: #ffc400;
        }
    }
}

#idRules {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto 7em;
    grid-template-rows: auto;
    grid-template-areas:
        'inputdata inputdata act'
        'snData docData act'
        'search search search'
        'list list list'
    ;

    .dataInput {
        grid-area: inputdata;
        margin-right: 5em;
        margin-top: 1em;
    }

    .snData {
        grid-area: snData;
        margin-right: 5em;
        margin-top: 1em;
        border: solid 1px lightgray;
        padding: 1em;
    }

    .docData {
        grid-area: docData;
        margin-right: 5em;
        margin-top: 1em;
        border: solid 1px lightgray;
        padding: 1em;
    }

    .search {
        grid-area: search;
        background-color: ivory;
        border: solid 1px lightgray;
        margin: 1em 0;
        display: flex;
        flex-direction: row;

        .label {
            padding: 1em;
        }

        .field {
            margin: .3em 2em;
        }
    }

    .list {
        grid-area: list;
    }

    .act {
        grid-area: act;
        display: flex;
        flex-direction: column;

        button {
            width: 100%;
            margin: .2em 0;
        }
    }
}