/* parte per tabs  */
/* import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400,600,700&display=swap');
/* import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');


*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
}


h1 {
    padding: 50px 0;
    font-weight: 400;
    text-align: center;
}

p {
    margin: 0 0 20px;
    line-height: 1.5;
}


section {
    display: none;
    padding: 20px 0 0;
    border-top: 1px solid #ddd;
}
/* 2020feb 21 *********** attenzione è questo che fa speritre il pulsante di menu  ma serve per cancellare i radio botton   2020feb 21 ********** */
input {
    display: none;
    color: red;
}

label {
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: lightseagreen;
    background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
    border-radius: 7px;
    border: 1px solid transparent;
}

    label:before {
        font-family: fontawesome;
        font-weight: normal;
        margin-right: 10px;
        color: blue; /*  blue;*/
    }

    label[for*='1_1']:before {
        /* icon: url('icon/1.ico');*/
        content: '\f073 ';
    }

    label[for*='1_2']:before {
        /* content: url('icon/3.ico'); 
        background-image: url('icon/l_red.ico');*/
        content: '\f073 ';
        background-size: 20px 20px;
        display: inline-block;
        width: 20px;
        height: 20px;
        content: "\f091";
    }

    label[for*='1_3']:before {
        content: '\f279';
    }
    /*label[for*='1-3']:after {
         content: url('icon/3.ico'); 
         background-color: p;
        color:indigo;       background-image: url('icon/l_orange.ico');
        background-size: 20px 20px;
        display: inline-block;
        width: 20px;
        height: 20px;
        content: "\f3c5";
    }*/

    label[for*='1_4']:before {
        content: '\f0c0';
    }

    label[for*='1_5']:before {
        content: '\f1a9';
    }

    label[for*='1_6']:before {
        content: '\f1d9';
    }

    /* ******************************** */
    /* parte relativa a calendario free */
    /* ******************************** */

    label[for*='1F_1']:before {
        content: '\f133';
    }

    label[for*='1F_2']:before {
        content: '\f274';
    }

    label[for*='1F_3']:before {
        content: '\f29c'; /*   f073 */
    }

    label[for*='1F_4']:before {
        content: '\f019'; /*   f073 */
    }

    label[for*='1F_5']:before {
        content: '\f274';
    }


#tab1_1:checked ~ #content1_1,
#tab1_2:checked ~ #content1_2,
#tab1_3:checked ~ #content1_3,
#tab1_4:checked ~ #content1_4,
#tab1_5:checked ~ #content1_5,
#tab1_6:checked ~ #content1_6,
#tab1F_1:checked ~ #content1F_1,
#tab1F_2:checked ~ #content1F_2,
#tab1F_3:checked ~ #content1F_3,
#tab1F_4:checked ~ #content1F_4,
#tab1F_5:checked ~ #content1F_5,
#tab1F_6:checked ~ #content1F_6 {
    display: block;
}

.tabsClass {
    background-color: violet;
}

@media screen and (max-width: 650px) {
    label {
        font-size: 0;
    }

        label:before {
            margin: 0;
            font-size: 18px;
        }
}

@media screen and (max-width: 400px) {
    label {
        padding: 15px;
    }

        label:before {
            margin: 0;
            font-size: 18px;
        }
}

/* ---------------- */
/* Lebel calendario */
/* ---------------- */
label[for*='Cal_1']:before {
    content: '\f251';
}

label[for*='Cal_2']:before {
    content: '\f073';
}

label[for*='Cal_3']:before {
    content: '\f252';
}

label[for*='Cal_4']:before {
    content: '\f253';
}

label[for*='Cal_5']:before {
    content: '\f254';
}

#tabCal_1:checked ~ #contentCal_1,
#tabCal_2:checked ~ #contentCal_2,
#tabCal_3:checked ~ #contentCal_3,
#tabCal_4:checked ~ #contentCal_4,
#tabCal_5:checked ~ #contentCal_5 {
    display: block;
}

/* Lebel sport */
label[for*='Spo_1']:before {
    content: '\f251';
}

label[for*='Spo_2']:before {
    content: '\f27d';
}

label[for*='Spo_3']:before {
    content: '\f252';
}

label[for*='Spo_4']:before {
    content: '\f253';
}

label[for*='Spo_5']:before {
    content: '\f254';
}

#tabSpo_1:checked ~ #contentSpo_1,
#tabSpo_2:checked ~ #contentSpo_2,
#tabSpo_3:checked ~ #contentSpo_3,
#tabSpo_4:checked ~ #contentSpo_4,
#tabSpo_5:checked ~ #contentSpo_5 {
    display: block;
}

/* Lebel località */
label[for*='Loc_1']:before {
    content: '\f251';
}

label[for*='Loc_2']:before {
    content: '\f27d';
}

label[for*='Loc_3']:before {
    content: '\f252';
}

label[for*='Loc_4']:before {
    content: '\f253';
}

label[for*='Loc_5']:before {
    content: '\f254';
}

#tabLoc_1:checked ~ #contentLoc_1,
#tabLoc_2:checked ~ #contentLoc_2,
#tabLoc_3:checked ~ #contentLoc_3,
#tabLoc_4:checked ~ #contentLoc_4,
#tabLoc_5:checked ~ #contentLoc_5 {
    display: block;
}


/* Lebel chi */
label[for*='Chi_1']:before {
    content: '\f2c2';
}

label[for*='Chi_2']:before {
    content: '\f279';
}

label[for*='Chi_3']:before {
    content: '\f007';
}

label[for*='Chi_4']:before {
    content: '\f2a7';
}

label[for*='Chi_5']:before {
    content: '\f153';
}

label[for*='Chi_6']:before {
    content: '\f21b';
}

#tabChi_1:checked ~ #contentChi_1,
#tabChi_2:checked ~ #contentChi_2,
#tabChi_3:checked ~ #contentChi_3,
#tabChi_4:checked ~ #contentChi_4,
#tabChi_5:checked ~ #contentChi_5,
#tabChi_6:checked ~ #contentChi_6 {
    display: block;
}

/* label free        */

label[for*='Free_1']:before {
    content: '\f2c7';
}

label[for*='Free_2']:before {
    content: '\f2c8';
}

label[for*='Free_3']:before {
    content: '\f2c9';
}

label[for*='Free_4']:before {
    content: '\f2ca';
}

label[for*='Free_5']:before {
    content: '\f04e';
}

label[for*='Free_6']:before {
    content: '\f050';
}

label[for*='Free_7']:before {
    content: '\f050';
}

label[for*='Free_8']:before {
    content: '\f050';
}

#tabFree_1:checked ~ #contentFree_1,
#tabFree_2:checked ~ #contentFree_2,
#tabFree_3:checked ~ #contentFree_3,
#tabFree_4:checked ~ #contentFree_4,
#tabFree_5:checked ~ #contentFree_5,
#tabFree_6:checked ~ #contentFree_6,
#tabFree_7:checked ~ #contentFree_7,
#tabFree_8:checked ~ #contentFree_8 {
    display: block;
}

/* tab per Liberi da */

label[for*='LDa_1']:before {
    content: '\f254';
}

label[for*='LDa_2']:before {
    content: '\f253';
}

label[for*='LDa_3']:before {
    content: '\f252';
}

label[for*='LDa_4']:before {
    content: '\f251';
}

label[for*='LDa_5']:before {
    content: '\f250';
}

#tabLDa_1:checked ~ #contentLDa_1,
#tabLDa_2:checked ~ #contentLDa_2,
#tabLDa_3:checked ~ #contentLDa_3,
#tabLDa_4:checked ~ #contentLDa_4,
#tabLDa_5:checked ~ #contentLDa_5 {
    display: block;
}


/* tab per Query*/
label[for*='Query_1']:before {
    content: '\f073';
}

#tabQuery_1:checked ~ #contentQuery_1 {
    display: block;
}


/* tab per Download*/
label[for*='Download_1']:before {
    content: '\f019';
}

#tabDownload_1:checked ~ #contentDownload_1 {
    display: block;
}
/* fine tab per calendario free */

/* ------------------------ */
/* tab per elnchi magazzino */
/* ------------------------ */
label[for*='EleMa_1']:before {
    content: '\f2b5';
}

label[for*='EleMa_2']:before {
    content: '\f06e';
}

label[for*='EleMa_3']:before {
    content: '\f02b';
}

label[for*='EleMa_4']:before {
    content: '\f019';
}

#tabEleMa_1:checked ~ #contentEleMa_1,
#tabEleMa_2:checked ~ #contentEleMa_2,
#tabEleMa_3:checked ~ #contentEleMa_3,
#tabEleMa_4:checked ~ #contentEleMa_4 {
    display: block;
}


/* -------------------------- */
/* tab per rubrica telefonica */
/* -------------------------- */
label[for*='EleRubrTel_1']:before {
    content: '\f02d';
}

label[for*='EleRubrTel_2']:before {
    content: '\f019';
}

#tabEleRubrTel_1:checked ~ #contentEleRubrTel_1,
#tabEleRubrTel_2:checked ~ #contentEleRubrTel_2 {
    display: block;
}

/* ------------------------------------------- */
/* tab per pagine generiche                    */
/* senza un carattere avensone specifico       */
/* al momento due gruppi da 4 entrate ciascuna */
/* ------------------------------------------- */

#tabGenericF_1:checked ~ #contentTabGenericF_1,
#tabGenericF_2:checked ~ #contentTabGenericF_2,

#tabGeneric1_1:checked ~ #contentTabGeneric1_1,
#tabGeneric1_2:checked ~ #contentTabGeneric1_2,
#tabGeneric1_3:checked ~ #contentTabGeneric1_3,
#tabGeneric1_4:checked ~ #contentTabGeneric1_4,
#tabGeneric1_5:checked ~ #contentTabGeneric1_5,
#tabGeneric1_6:checked ~ #contentTabGeneric1_6,

#tabGeneric2_1:checked ~ #contentTabGeneric2_1, 
#tabGeneric2_2:checked ~ #contentTabGeneric2_2, 
#tabGeneric2_3:checked ~ #contentTabGeneric2_3,
#tabGeneric2_4:checked ~ #contentTabGeneric2_4,
#tabGeneric2_5:checked ~ #contentTabGeneric2_5,
#tabGeneric2_6:checked ~ #contentTabGeneric2_6 {
    display: block;
}

/* ------------------------------------- */
/* fine tab di utilizzo generico senza   */
/* uno specifico carattere avesone       */
/* ------------------------------------- */

/* ---------------- */
/*test cn tanti tag */
/* ---------------- */
label [for*='-adrcode']:before {
    content: '\f2b9';
}

label[for*='3_2']:before {
    content: '\f011';
}

label[for*='3_3']:before {
    content: '\f012';
}

label[for*='3_4']:before {
    content: '\f013';
}

label[for*='3_5']:before {
    content: '\f014';
}

label[for*='3_6']:before {
    content: '\f015';
}

label[for*='3_7']:before {
    content: '\f016';
}

label[for*='3_8']:before {
    content: '\f017';
}

label[for*='3_9']:before {
    content: '\f018';
}

label[for*='3_10']:before {
    content: '\f019';
}


label[for*='3_10']:before {
    content: '\f019';
}

label:hover {
    color: #888;
    cursor: pointer;
}

input:checked + label {
    color: red;
    border: 1px solid #ddd;
    border-top: 2px solid orange;
    border-bottom: 1px solid #fff;
    background-color: lightgreen;
}


#tab_adrcode:checked ~ #content-adrcode,
#tab3_2:checked ~ #content3_2,
#tab3_3:checked ~ #content3_3,
#tab3_4:checked ~ #content3_4,
#tab3_5:checked ~ #content3_5,
#tab3_6:checked ~ #content3_6,
#tab3_7:checked ~ #content3_7,
#tab3_8:checked ~ #content3_8,
#tab3_9:checked ~ #content3_9,
#tab3_10:checked ~ #content3_10 {
    display: block;
}


/* fine test con tanti tag */


/* test per link preview */

.tiptext {
    color: #069;
    cursor: pointer;
}

.description {
    display: none;
    position: absolute;
    border: 1px solid #000;
    width: 200px;
    height: 200px;
}

/* fine test per link preview */