﻿:root {
    /* Animazioni pressione Tasti */
    --sc_active: scale(0.95);
    --an_active: transform 100ms ease-in-out;
    /*--n_cv: 3;*/
    /* Style SmartBiz Blu */
    /*--nome_piatta: 'Smart Control';
    --sfondo: url(../Image/sfondone.jpg);
    --logo_main: url(../Image/SmartBiz.png);
    --main_color: #0071bc;
    --seco_color: #b8daff;
    --nav1_color: #3396ff;
    --nav2_color: #99d6ff;
    --btn1_color: #d8d8ff;
    --btn2_color: rgba(136, 194, 232, 0.4);
    --bglight_color: rgb(249, 253, 255);
    --btn3_color: rgb(0, 113, 188);
    --offcel_color: #99c2ff;
    --bgpopup_color: #b2e4ff;*/
    /* Style HR Arancio */
    --nome_piatta: 'Smart HR';
    --sfondo: url(../Image/sfondone2.png);
    --logo_main: url(../Image/logo.png);
    --main_color: #d26902;
    --seco_color: #ffb73e;
    --nav1_color: #ef7905;
    --nav2_color: #fabd03;
    --btn1_color: #fff0d8;
    --btn2_color: rgba(232, 212, 136, 0.4);
    --bglight_color: rgb(255, 253, 249);
    --btn3_color: rgb(188, 74, 0);
    --offcel_color: #ffde99;
    --bgpopup_color: #ffe9b2;
    --str_footer: "Gestione dipendenti SmartHR sviluppato da Smart Biz srls - Tel: 0692936182";
    --comply_2: #f6ff39;
    --comply_3: #5edb7b;
    /* Style AC Blu Rosso Tim 
    --nome_piatta: 'Smart AC';
    --sfondo: url(../Image/sfondone.jpg);
    --logo_main: url(../Image/marchioac.png);
    --main_color: #0071bc;
    --seco_color: #b8daff;
    --nav1_color: #3396ff;
    --nav2_color: #99d6ff;
    --btn1_color: #d8d8ff;
    --btn2_color: rgba(136, 194, 232, 0.4);
    --bglight_color: rgb(249, 253, 255);
    --btn3_color: rgb(0, 113, 188);
    --offcel_color: #99c2ff;
    --bgpopup_color: #b2e4ff;*/
    /*--bgdark_color: rgba(63, 63, 63, 0.9);*/
}


*, ::after, ::before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

    *:focus {
        box-shadow: none !important;
        outline: none !important;
    }

.ListRicerca #listap, .ListRicerca #listat, .ListRicerca #listaaa {
    padding: 0;
    margin: 0;
}


.wrapInp {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    width: 100%;
}

    .wrapInp .inputRicerca {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-right: 0;
        width: calc(100% - 50px);
    }

.m-r-16{
    margin-right: 16px;
}
.m-l-16{
    margin-left: 16px;
}
.m-b-8 {
    margin-bottom: 8px;
}
.m-b-16 {
    margin-bottom: 16px !important;
}
.m-b-10 {
    margin-bottom: 10px !important;
}
.sshow {
   display: block !important;
}
.cicc {
    display: block;
    text-align: center;
    font-size: 16px;
}

/* Li Ricerca*/
.itemsRicerca, .itemsNotif {
    width: 100%;
    color: #363636;
    font-weight: 500;
    padding: 1.50em 1.25em;
    margin-bottom: -2px;
    background-color: #fff;
    border: 2px solid var(--nav2_color);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 11px;
    margin-top: 5px;
    height: 52px;
    max-height: 52px;
    transition: var(--an_active), padding 150ms ease-in-out;
}

    .itemsRicerca:last-child {
        margin-bottom: 0;
    }

    .itemsRicerca:active {
        transform: var(--sc_active);
    }

    .itemsRicerca.d-none {
        display: none !important;
    }

.itemsRicercaSelect {
    background-color: var(--main_color) !important;
    color: #fff;
    border: 2px solid var(--nav2_color);
}

.itemsRicerca.Bossli {
    background-color: #495057;
    color: gold;
    border: 2px solid gold;
}

    .itemsRicerca.Bossli:hover, .itemsRicerca.Bossli:focus {
        color: black;
        text-decoration: none;
        background-color: gold;
        border: 2px solid black;
    }

.itemsRicerca.clonu span {
    height: 100%;
    display: flex;
    width: calc(100% - 50px);
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    text-align: center;
}

.itemsRicerca.clonu {
    padding: 0;
}
    .itemsRicerca.clonu.spanCento span {
        width: 100% !important;
        justify-content: left;
    }

.bttnTimbbPop.clonexu {
    margin-right: 6px;
    margin-left: auto;
    background-color: #b29e86
}


/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    .itemsRicerca:hover, .itemsRicerca:focus {
        border: 2px dashed brown;
        cursor: pointer;
    }

    .itemsRicerca.itemsRicercaSelect:hover {
        border: 2px dashed var(--bglight_color);
        cursor: pointer;
    }

    .ListRicerca #listap, .ListRicerca #listat, .ListRicerca #listaaa {
        padding-bottom: 80px;
    }
}
/* End */

.m-l-auto{
    margin-left: auto !important;
}

/*ALERTZZZZZZ*/
.boxAlerz {
    position: fixed;
    width: 500px;
    left: calc(50% - 250px);
    z-index: 1200;
    display: none;
}

    .boxAlerz i,#burgubudanu {
        position: absolute;
        font-size: 35px;
        top: 4px;
        right: 5px;
        height: 35px;
        width: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: var(--an_active);
    }

        .boxAlerz i:active, #burgubudanu:active {
            transform: var(--sc_active);
        }
        #burgubudanu{
            z-index:2;
        }
        #attenzione {
            background-color: #ff4d4d;
            border: 6px solid #800000;
        }

            #attenzione .boxImgAlerz {
                /*border-right: 6px solid #800000;*/
            }

    #attenzione .boxTitAlerz span, #attenzione .boxTxtAlerz span {
        color: #800000;
    }

#conferma {
    background-color: #70db70;
    border: 6px solid #196619;
}

    #conferma .boxImgAlerz {
        /*border-right: 6px solid #196619;*/
    }

    #conferma .boxTitAlerz span, #conferma .boxTxtAlerz span {
        color: #196619;
    }

#oops {
    background-color: #ffdb4d;
    border: 6px solid #997a00;
}

    #oops .boxImgAlerz {
        /*border-right: 6px solid #997a00;*/
    }

    #oops .boxTitAlerz span, #oops .boxTxtAlerz span {
        color: #997a00;
    }

.boxImgAlerz {
    min-height: 150px;
    width: 156px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .boxImgAlerz img {
        height: 130px;
        width: 130px;
    }

.contTxtAlerz {
    min-height: 150px;
    display: flex;
    flex-wrap: wrap;
    /* Mod 7 Maggio 2020 */
    width: calc(100% - 156px);
}

.boxTitAlerz {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .boxTitAlerz span {
        font-size: 40px;
        font-weight: 900;
        padding-bottom: 2px;
    }

.boxTxtAlerz {
    height: calc(100% - 60px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

    .boxTxtAlerz span {
        font-weight: 600;
        font-size: 20px;
        text-align: center;

        /* Mod 7 Maggio 2020 */
        width: 100%;
        display: block;
    }


#com {
    background-color: #88c2e8;
    border: 6px solid #095f98;
}


    #com .contTxtAlerz {
        width:100%
    }

#Poly .boxImgAlerz {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 16px;
    padding: 0;
    width: 100%;
}

#Poly .boxTitAlerz span {
    font-size: 20px;
}

#Poly boxTxtAlerz span {
    font-size: 16px;
}

#Poly .boxTxtAlerz {
    padding: 16px;
    padding-top: 6px;
}

.conBtnDelegato, .conBtnStep, .conBtnMultiSce {
    display: flex;
    padding: 8px;
    width: 100%;
}
.conBtnMultiSce {
   flex-flow: column;
}

    .conBtnDelegato div:first-child {
        margin-right: 10px;
    }

    .conBtnDelegato div, .conBtnStep div, .conBtnMultiSce div {
        position: relative;
        display: flex;
        padding: 0 10px;
        height: 40px;
        align-items: center;
        background-color: #f7f7f7;
        width: 100%;
        justify-content: center;
        border-radius: 9px;
        font-size: 18px;
        transition: transform 100ms ease-in-out;
        cursor: pointer;
    }

        .conBtnDelegato div:active, .conBtnStep div:active, .conBtnMultiSce div:active {
            transform: scale(.95);
        }
.conBtnMultiSce div {
    margin-bottom: 8px;
    background-color: #efefef;
}

    .conBtnMultiSce div i {
        font-size: 22px;
        top: 2px;
        left: 2px;
    }
.conBtnMultiSce div:last-child {
    margin-bottom: 0;
}

.YesSir i, .NoSir i {
    font-size: 20px;
    right: 10px;
    height: unset;
    width: unset;
    top: 10px;
}
.hide_ {
    display: none !important;
}

#conferma, #attenzione, #oops, #com, #Poly {
    flex-wrap: wrap;
}

/* Deprecata */
.closeX {
    position: absolute;
    right: -5px;
    top: -10px;
    width: 50px;
    height: 50px;
    font-size: 45px !important;
    outline: none !important;
}



@media screen and (max-width: 560px) {
    .boxAlerz {
        flex-wrap: wrap;
        width: 300px;
        left: calc(50% - 150px);
    }

    .boxImgAlerz {
        border: 0 !important;
        width: 100%;
    }

    #com .boxTitAlerz {
        height: 45px;
    }

        #com .boxTitAlerz span {
            font-size: 25px;
        }
    .contTxtAlerz {
        width: unset;
    }
}
/* End */



/* Contenutore Righe e Colonne */
.Contenitore {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    margin-top: 25px;
}

.Riga {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -16px;
    margin-right: -16px;
}
.Riga.noWrap {
    flex-wrap: unset;
}

    .Riga:last-child, .Riga:only-child {
        margin-bottom: 0;
    }

.WrapCampi {
    position: relative;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

    .WrapCampi:not(.noCentro):only-child {
        margin: 0 auto;
    }

    .WrapCampi.col100 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .WrapCampi.col80 {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    } 
    
    .WrapCampi.col95 {
        -ms-flex: 0 0 95%;
        flex: 0 0 95%;
        max-width: 95%;
    }
    .WrapCampi.col90 {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }
    .WrapCampi.col10 {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .WrapCampi.col50 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .WrapCampi.col55 {
        -ms-flex: 0 0 55%;
        flex: 0 0 55%;
        max-width: 55%;
    }.WrapCampi.col45 {
        -ms-flex: 0 0 45%;
        flex: 0 0 45%;
        max-width: 45%;
    }

    .WrapCampi.col60 {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
    }

    .WrapCampi.col66 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    .WrapCampi.col75 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }
    .WrapCampi.col70{
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }
    .WrapCampi.col33 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .WrapCampi.col25 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .WrapCampi.col16 {
        -ms-flex: 0 0 16.666666%;
        flex: 0 0 16.666666%;
        max-width: 16.666666%;
    }
    .WrapCampi.col40 {
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }
    .WrapCampi.col20 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .WrapCampi.col15{
        -ms-flex: 0 0 15%;
        flex: 0 0 15%;
        max-width: 15%;
    }
    .WrapCampi.col35 {
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 35%;
    }
    .WrapCampi.col30 {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    /* Fissi */
    .WrapCampi.col100_50 {
        -ms-flex: 0 0 calc(100% - 66px) !important;
        flex: 0 0 calc(100% - 66px) !important;
        max-width: calc(100% - 66px) !important;
    }
    .WrapCampi.fis50 {
        width: 66px;
        height: 50px;
    }
    .WrapCampi.col100_120 {
        -ms-flex: 0 0 calc(100% - 120px) !important;
        flex: 0 0 calc(100% - 120px) !important;
        max-width: calc(100% - 120px) !important;
    }

    .WrapCampi.fis120 {
        width: 120px;
        height: 50px;
    }
    .WrapCampi.fis120.bigu {
        height: 100px;
    }

    .WrapCampi.col100_50 .inputmain, .WrapCampi.col100_120 .inputmain {
        margin: 0 !important;
        padding-left: 14px !important;
    }
    .WrapCampi.fis50 .btnMain, .WrapCampi.fis120 .btnMain {
        height: 100%;
        width: 100%;
        font-size: 15px;
        margin: 0 !important;
    }
    .WrapCampi.fis120.bigu .btnMain {
       font-weight: 500;
    }
        .WrapCampi.fis120.bigu .btnMain i {
            font-size: 26px;
            margin: 0 10px;
        }

    .colFis520 {
        width: 100%;
        max-width: 530px;
        min-width: 530px;
        margin: 0 auto !important;
        position: relative;
        height: 710px;
    }

    /* Colonna Ricerca */
    .WrapCampi.WrapRicerca {
        padding: 0 15px;
    }

.colSelectContent .wrapSelectZ:after, #boxI .wrapSelectZ:after {
    top: 28px;
    right: 18px;
}
/*.WrapCampi.WrapRicerca .wrapSelectZ:after {
            top: 28px;
            right: 18px;
        }*/
.WrapCampi.WrapRicerca .colSelectContent {
    height: 100%;
}

.cListRicerca.con3 {
    height: calc(100% - 223px);
}
.cListRicerca.con2 {
    height: calc(100% - 166px);
}
.cListRicerca.con1{
    height: calc(100% - 65px) !important;
    border-radius: 10px !important;
}
.cListRicerca.con2nobtn {
    height: calc(100% - 130px) !important;
    border-radius: 10px;
}
.cListRicerca.con1sibtn {
    height: calc(100% - 158px) !important;
    border-radius: 10px;
}
.cListRicerca.stat250 {
    height: 250px;
    border-width: 2px;
    border-radius: 10px;
}
.towfas {
    height: calc(100% - 135px);
}

.unofas {
    height: calc(100% - 60px);
}



@media screen and (max-width: 768px) {
    .towfas, .unofas {
        height: unset;
    }
}


/* Colonna Ricerca */
.WrapCampi.WrapRisultati {
    padding: 0 15px 15px 15px;
    min-height: 200px;
}


.WrapCampi.WrapRisultati, .WrapCampi.WrapRicerca {
    height: 650px;
}
    .WrapCampi.WrapRisultati.h-auto, .WrapCampi.WrapRicerca.h-auto {
        height: unset;
    }

    .WrapCampi.WrapRisultati.med, .WrapCampi.WrapRicerca.med {
        height: 750px;
    }

.wrapTab{
    background-color: #e5eaff;
    border-radius: 16px;
}.wrapTab .Riga {
    margin-bottom: 0;
}
div[class^="WrapCampi col"].tab {
    height: 46px;
    border-right: 2px solid #363636;
    border-bottom: 2px solid #363636;
}
div[class^="WrapCampi col"].tab:last-child{
    border-right: 0;
}
.finMign {
    border-bottom: 2px solid #363636;
}
div[class^="WrapCampi col"].tab span {
    display: flex;
    text-align: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    align-items: center;
    line-height: 16px;
    font-size: 14px;
    font-weight: 600;
}
.wrapTab .Riga:last-child div[class^="WrapCampi col"].tab {
    border-bottom: 0;
}

.insy {
    padding: 5px;
}
.insy .inputmain {
    margin: 0;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    font-size: 15px;
}
    .insy .wrapSelectZ {
        height: 100%;
        width: 100%;
    }
        .insy .wrapSelectZ:after {
            top: 8px;
            right: 10px;
            font-size: 14px;
        }
    .insy .cancy {
        height: 100%;
        display: inline-flex;
        width: 20px;
        margin-right: 5px;
        align-items: center;
        justify-content: center;
        transition: var(--an_active);
        cursor: pointer;
    }
    .insy .cancy:active {
        transform: var(--sc_active);
    }

.RigaLang .cancy ~ .inputmain {
    width: calc(100% - 25px);
}

@media screen and (max-width: 768px) {
    /*.WrapCampi.col33:not(.phone):not(.tablet), .WrapCampi.col66:not(.phone):not(.tablet), .WrapCampi.col50:not(.phone):not(.tablet) {*/
    div[class^="WrapCampi col"]:not(.phone):not(.tablet):not(.colFis520) {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 16px;
    } div[class^="WrapCampi col"]:not(.phone):not(.tablet):last-child {
            margin-bottom: 0;
        } .WrapCampi.WrapRicerca .colSelectContent {
        height: calc(100% - 50px);
    } .WrapCampi.WrapRisultati {
        height: unset !important;
        padding-bottom: 0;
    } .WrapCampi.WrapRicerca {
        height: 480px !important;
    }
}


@media screen and (max-width: 540px) {
    div[class^="WrapCampi col"]:not(.phone).tablet {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 16px;
    }

        div[class^="WrapCampi col"]:not(.phone).tablet:last-child {
            margin-bottom: 0;
        }

    div[class^="WrapCampi col"].phone.tab span {
        font-size: 10px;
    }
    .insy .wrapSelectZ:after {
        top: 12px;
        font-size: 10px;
        right: 10px;
    }

    .colFis520 {
        max-width: unset;
        min-width: unset;
    }
}
/* End */


/* Nav Personal */
.contVabb {
    padding: 15px;
    overflow: hidden;
    background-color: var(--bgpopup_color);
    width: calc(100% + 30px);
    left: -15px;
    position: relative;
    transition: opacity 100ms ease-in-out;
    opacity: 0;
}

    .contVabb.sow {
        opacity: 1;
    }

.navs {
    background-color: var(--bglight_color);
    border-radius: 50px;
    padding: 4px;
    display: flex;
    align-items: center;
    position: relative;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    overflow: hidden;
    border: 2px solid var(--main_color);
}

.itemsnav {
    height: 34px;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    margin-right: 4px;
}

    .itemsnav:last-child {
        margin-right: 0;
    }

    .itemsnav span {
        user-select: none;
        color: #363636;
        font-weight: 600;
        font-size: 16px;
    }

        .itemsnav span.slx {
            color: var(--bglight_color);
        }

.selecto {
    height: 34px;
    background-color: var(--main_color);
    -webkit-backdrop-filter: contrast(2);
    backdrop-filter: contrast(2);
    border-radius: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: absolute;
    width: var(--wid);
    transition: margin-left 200ms ease-in-out, top 200ms ease-in-out;
}

    .selecto.move {
        -webkit-animation: rubberBand 500ms linear;
        animation: rubberBand 500ms linear;
    }

@media screen and (max-width: 768px) {
    .contVabb {
        margin-top: 15px;
    }
}

@media screen and (max-width: 540px) {
    .contVabb {
        padding: 5px;
    }

    .navs {
        flex-wrap: wrap;
        padding-right: 0;
        padding-bottom: 0;
        border-radius: 22px;
    }

    .itemsnav {
        margin-bottom: 4px;
        width: calc(50% - 4px);
    }
}
/* End */



/* New Btn Salva Elimina*/
.contBtnAzio {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 80px;
}

.btnAzio {
    height: 44px;
    min-width: 185px;
    padding: 0px 12px;
    transition: var(--an_active);
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding-bottom: 2px;
    border-radius: 11px;
    cursor: pointer;
    color: var(--bglight_color);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-color: rgba(255, 255, 255,0.3);
    font-weight: 400;
}
    .btnAzio:after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        color: var(--bglight_color);
        position: relative;
        margin-left: 5px;
        margin-top: 2px;
    }

    .btnAzio:active {
        transform: var(--sc_active);
    }

    .btnAzio.rosso {
        background-color: rgb(215, 48, 64);
        margin-right: auto;
    }
        .btnAzio.rosso:after {
            content: "\f1f8";
        }

    .btnAzio.verde {
        background-color: rgb(40, 167, 69);
        margin-left: auto;
        margin-right: 20px;
    }
        .btnAzio.verde:after {
            content: "\f00c";
        }

    .btnAzio.blu {
        background-color: #4e8fff;
    }
        .btnAzio.blu:after {
            content: "\f067";
        }

    .btnAzio.giall {
        background-color: #ffa000;
    }

        .btnAzio.giall:after {
            content: "\f303";
        }
    .btnAzio.cerca {
        background-color: #5e8ddb;
    }

        .btnAzio.cerca:after {
            content: "\f002";
        }
    .btnAzio:only-child {
        margin: 0 auto !important;
    }

    .btnAzio.invia {
        background-color: #cde9ff;
        color: #363636;
        border-color: rgba(0,0,0,.2);
    }
        .btnAzio.invia:after {
            content: "\f1d8";
            color: #363636;
        }

.bottyWrappy {
    background-color: var(--bgpopup_color);
    position: relative;
    height: 75px;
    width: calc(100% + 30px);
    left: -15px;
    padding-top: 15px;
    opacity: 1;
    transition: opacity 100ms ease-in-out;
}

    .bottyWrappy:empty {
        opacity: 0;
    }

    .bottyWrappy .contBtnAzio {
        margin: 0 !important;
    }

.coltur .contBtnAzio {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .contBtnAzio {
        margin-bottom: 10px;
    }

    .colturnMobile .contBtnAzio {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 540px) {
    .bottyWrappy .contBtnAzio {
        padding: 0 15px !important;
    }

    .btnAzio.verde {
        margin-right: 15px;
    }

    .btnAzio {
        font-size: 14px;
        min-width: 90px;
    }
}
/* End */

/* Box Aggiungi Boxini Manuali */

.contAddVocRic {
    display: flex;
    background-color: var(--offcel_color);
    padding: 5px;
    width: calc(100% - 66px);
    border-radius: 11px;
    border: 2px solid var(--main_color);
}

    .contAddVocRic input {
        margin: 0;
        text-align: center;
        width: 95px;
        margin-left: 5px;
        border-radius: 7px;
        border: 0;
        height: 41px;
    }

        .contAddVocRic input:first-child {
            width: 100%;
            margin-left: 0;
        }

    .contAddVocRic ~ .sprendy {
        background-color: var(--bglight_color);
        margin-left: 16px;
        border: 2px solid var(--main_color);
        border-radius: 11px;
    }

.contPresenti {
    padding: 10px;
    padding-bottom: 0;
    background-color: var(--bgpopup_color);
    border-radius: 11px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    min-height: 52px; /* Mod 24 Aprile 2020 */
}



.contScelty {
    background-color: var(--bglight_color);
    display: flex;
    border-radius: 11px;
    padding: 5px 0;
    margin-bottom: 10px;
    margin-right: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.22);
}

    .contScelty div {
        padding: 0 5px;
        border-right: 2px solid var(--main_color);
        display: flex;
        align-items: center;
    }

        .contScelty div:last-child {
            border-right: 0;
        }

        .contScelty div:first-child {
            padding: 0 10px;
        }

    .contScelty span {
        display: block;
        color: #363636;
        font-weight: 600;
        width: unset !important;
    }

    .contScelty strong {
        background-color: var(--nav2_color);
        color: #363636;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 9px;
    }

    .contScelty i {
        font-size: 25px;
        color: rgb(215, 48, 64);
        cursor: pointer;
        transition: var(--an_active);
    }

        .contScelty i:active {
            transform: var(--sc_active);
        }



/* FieldSet */
.Riga fieldset.colAggiungi {
    margin-right: 16px;
    margin-left: 16px;
    padding: 16px;
    margin: 0 9px 0 9px;
    width: 100%;
}

    .Riga fieldset.colAggiungi legend {
        margin-bottom: 0;
    }

.divvoFields {
    height: 2px;
    background-color: #b29e86;
    margin: 16px;
}

fieldset.fieldMaster {
    padding: 15px;
    padding-bottom: 15px;
}

.fieldMaster fieldset.colAggiungi {
    border-color: #b29e86;
    margin: 0 0 16px 0;
    border-radius: 11px;
}

.fieldMaster fieldset:last-child {
    margin-bottom: 0;
}

.fieldMaster legend {
    margin-bottom: 0;
}

.fieldMaster fieldset legend {
    border-color: var(--bgpopup_color);
    color: var(--bglight_color);
    background-color: #b29e86;
}
/* End */

.scrollPoint {
    position: absolute;
    height: 40px;
    width: 20px;
    left: -100px;
    top: 5px;
    transition: left 100ms ease-in-out;
    background-color: #b29e86;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

    .scrollPoint.show {
        left: 5px;
    }
/* End */



/* Card Curriculum */
.CardCul {
    position: relative;
    width: 320px;
    background-color: var(--bglight_color);
    border-radius: 18px;
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 10px -4px rgba(0,0,0,.25);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: all 200ms linear;
    display: inline-block;
    vertical-align: baseline;
}
    .CardCul:last-child{
       margin-bottom: 80px !important;
    }
    .CardCul.flippy {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

        .CardCul.flippy .front {
           z-index: -1;
        }
        .CardCul.flippy .back {
            z-index: 2;
        }

    .CardCul .back, .CardCul .front {
        width: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .CardCul .back {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        background-color: var(--bgpopup_color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
    }
    .CardCul .front {
        position: relative;
        padding: 10px;
    }
        .CardCul .front .ope {
            height: 30px;
            width: 30px;
            background-color: rgb(232, 230, 227);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: -5px;
            top: -5px;
            cursor: pointer;
            transition: var(--an_active);
        }.CardCul .front .ope:active {
            transform: var(--sc_active);
        }


.RigaCul {
    background-color: rgba(0,0,0,0.09);
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
}.RigaCul.posRelat {
    overflow: unset;
}

    .RigaCul:last-child {
        margin-bottom: 0;
    }




    .RigaCul span {
        margin-right: auto;
        margin-left: 8px;
    }

.CardCul .Foto {
    border-radius: 6px;
    height: 80px;
    width: 80px;
    background-color: var(--bglight_color);
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
    /*.CardCul .Foto:before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f110";
        position: absolute;
        height: 30px;
        width: 30px;
        left: calc(50% - 15px);
        top: calc(50% - 15px);
        animation: spin 800ms linear infinite;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }*/

.CardCul .Foto img {
    border-radius: 6px;
    height: 100%;
    background-image: url(/Image/nofoto.jpg);
}
        .CardCul .Foto img:not([src='Image/nofoto.jpg']) {
            transform: scale(1.2);
        }
    .CardCul .Foto ~ .RigaCul {
        width: calc(100% - 85px);
        margin-right: 5px;
        flex-wrap: wrap;
        background-color: transparent;
        height: 100%;
        margin-bottom: 0;
    }
        .CardCul .Foto ~ .RigaCul strong {
            width: 100%;
            text-align: center;
        }

        /*.CardCul .Foto ~ .RigaCul strong:last-child {
            color: #6d6d6d;
            font-weight: normal;
            margin-top: 5px;
            line-height: 18px;
            text-align: center;
        }*/

.badge8 {
    background-color: var(--bglight_color);
    padding: 4px 8px;
    font-size: 15px;
    border-radius: 7px;
    margin-left: 5px;
}
.RigaCul .badge8 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contOpzy {
    height: 200px;
    width: 200px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    transition: all 200ms ease-in-out;
}
.Opzy {
    background-color: var(--bglight_color);
    width: 90px;
    border-radius: 100%;
    transition: var(--an_active);
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 15px;
    color: #363636;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}
.Opzy.clox {
        height: 60px;
        width: 60px;
        padding: 0;
        transition: transform 200ms ease-in-out;
    }
 
    .Opzy:active {
        transform: var(--sc_active);
    } 

    .Opzy i {
        font-size: 30px;
    }

    .Opzy:last-child {
        margin-bottom: 0 !important;
    }


.CardCul .prewi, .CardCul .comply {
    transition: transform 200ms ease-in-out;
}

#contCulInt .contOpzy {
    height: 146px;
    width: 146px;
    background-color: var(--bgpopup_color);
    padding: 3px;
    border-radius: 25px;
}
#contCulInt .Opzy {
    width: 100%;
    margin-bottom: 3px;
    height: 44px;
    border-radius: 44px;
    padding: 0;
}
    #contCulInt .Opzy i {
        margin-right: 6px;
    }

/*.contPresenti, .contFamy {
    min-height: 57px;
}*/


#nessunVoc {
    display: none;
    font-weight: 600;
    font-size: 18px;
    position: absolute;
    height: 28px;
    width: 250px;
    text-align: center;
    top: calc(50% - 14px);
    left: calc(50% - 125px);
    color: #363636;
}

.contPresenti:empty ~ #nessunVoc, .contFamy:empty ~ #nessunVoc {
    display: block;
}


/* End */
#contpers.contBig {
    /*-moz-column-count: var(--n_cv);
    -webkit-column-count: var(--n_cv);
    column-count: var(--n_cv);
    vertical-align: baseline;
    column-gap: 0;*/
}

.toggleAccaval .WrapToggleLin {
    height: 50px;
    padding-left: 15px;
}
    .toggleAccaval .WrapToggleLin:first-child {
        border-radius: 11px 11px 0 0;
        border-bottom: 1px solid var(--main_color);
    }
    .toggleAccaval .WrapToggleLin:last-child {
        border-radius: 0 0 11px 11px;
        border-top: 1px solid var(--main_color);
    }



.file-upload {
    display: block;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}

    .file-upload .file-select {
        display: block;
        border: 2px solid #dce4ec;
        color: #34495e;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: left;
        background: #FFFFFF;
        overflow: hidden;
        position: relative;
    }

        .file-upload .file-select .file-select-button {
            background: #dce4ec;
            padding: 0 10px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
        }

        .file-upload .file-select .file-select-name {
            line-height: 40px;
            display: inline-block;
            padding: 0 10px;
        }

        .file-upload .file-select:hover {
            border-color: #34495e;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

            .file-upload .file-select:hover .file-select-button {
                background: #34495e;
                color: #FFFFFF;
                transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-in-out;
                -webkit-transition: all .2s ease-in-out;
                -o-transition: all .2s ease-in-out;
            }

    .file-upload.active .file-select {
        border-color: #3fa46a;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }

        .file-upload.active .file-select .file-select-button {
            background: #3fa46a;
            color: #FFFFFF;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

    .file-upload .file-select input[type=file] {
        z-index: 100;
        cursor: pointer;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .file-upload .file-select.file-select-disabled {
        opacity: 0.65;
    }

        .file-upload .file-select.file-select-disabled:hover {
            cursor: default;
            display: block;
            border: 2px solid #dce4ec;
            color: #34495e;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            margin-top: 5px;
            text-align: left;
            background: #FFFFFF;
            overflow: hidden;
            position: relative;
        }

            .file-upload .file-select.file-select-disabled:hover .file-select-button {
                background: #dce4ec;
                color: #666666;
                padding: 0 10px;
                display: inline-block;
                height: 40px;
                line-height: 40px;
            }

            .file-upload .file-select.file-select-disabled:hover .file-select-name {
                line-height: 40px;
                display: inline-block;
                padding: 0 10px;
            }




.loadTabelClass {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 97;
    background-color: var(--bglight_color);
    display: none;
    border-radius: 20px;
}
    .loadTabelClass .loadGif{
       display: block;
    }


.inputmain.switchDescry {
    margin: 0 !important;
    display: flex !important;
    /*width: 325px;*/
    transition: var(--an_active);
}
.switchDescry:active{
   transform:var(--sc_active);
}
.switchDescry span {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #c5c5c5;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fefdfd;
    user-select: none;
    -webkit-user-select: none;
}
.switchDescry span i{
    font-size: 24px; 
}
    .switchDescry span:first-child {
        border-bottom-left-radius: 7px;
        border-top-left-radius: 7px;
        background-color: #81D981;
        margin-right: 3px;
    }
    .switchDescry span:last-child {
        border-bottom-right-radius: 7px;
        border-top-right-radius: 7px;
    }

.switchDescry.diff span:first-child {
    background-color: #c5c5c5;
}
    .switchDescry.diff span:last-child {
        background-color: #81D981;
    }




/* New Modal Info */
#NewInfor {
    position: fixed;
    width: 350px;
    padding: 5px;
    min-height: 200px;
    z-index: 101;
    display: none;
    transition: left 100ms ease-in-out, top 100ms ease-in-out, height 100ms ease-in-out
}
    #NewInfor .comandiZ {
        display: flex;
    }
    #NewInfor .comandiZ span{
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 500;
        margin: 0 auto;
    }
        #NewInfor .comandiZ i {
            font-size: 25px;
            height: 35px;
            width: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: var(--an_active);
            /*background-color: rgba(70, 81, 175, 0.1);*/
            border-radius: 100%;
        }
        #NewInfor .comandiZ i:active {
            transform: var(--sc_active);
        }
            #NewInfor .comandiZ i#backu {
                visibility: hidden;
            }
    #NewInfor #wert {
        padding: 5px;
    }


.Pepr{
    height: 150px;
    width: 150px;
    position: absolute;
    zoom: 70%;
}

.Pepr:after {
    content: attr(perc)"%";
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content:center;
    font-size: 40px;
    font-weight: 500;
}

    .Pepr.Fat:after {
        font-size: 35px;
    }
    .Pepr svg {
        position: relative;
        height: 100%;
        width: 100%;
        z-index: 8;
        transform: rotate(-90deg);
    }
    .Pepr svg circle{
        height: 100%;
        width: 100%;
        fill: none;
        stroke: #191919;
        stroke-width: 10;
        stroke-linecap: unset;
        transform: translate(5px, 5px);
    }
        .Pepr.Tond svg circle {
            stroke-linecap:round;
        }
    .Pepr.Fat svg circle {
        stroke-width: 30;
        transform: translate(15px, 15px) scale(.85);
    }
    .Pepr svg circle:nth-child(2) {
        stroke-dasharray: 440;
        stroke-dashoffset: 440;
        stroke: #ca4b42
    }

    .Pepr[perc='0'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 0) / 100);
    }

    .Pepr[perc='1'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 1) / 100);
    }

    .Pepr[perc='2'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 2) / 100);
    }

    .Pepr[perc='3'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 3) / 100);
    }

    .Pepr[perc='4'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 4) / 100);
    }

    .Pepr[perc='5'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 5) / 100);
    }

    .Pepr[perc='6'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 6) / 100);
    }

    .Pepr[perc='7'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 7) / 100);
    }

    .Pepr[perc='8'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 8) / 100);
    }

    .Pepr[perc='9'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 9) / 100);
    }

    .Pepr[perc='10'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 10) / 100);
    }

    .Pepr[perc='11'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 11) / 100);
    }

    .Pepr[perc='12'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 12) / 100);
    }

    .Pepr[perc='13'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 13) / 100);
    }

    .Pepr[perc='14'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 14) / 100);
    }

    .Pepr[perc='15'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 15) / 100);
    }

    .Pepr[perc='16'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 16) / 100);
    }

    .Pepr[perc='17'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 17) / 100);
    }

    .Pepr[perc='18'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 18) / 100);
    }

    .Pepr[perc='19'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 19) / 100);
    }

    .Pepr[perc='20'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 20) / 100);
    }

    .Pepr[perc='21'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 21) / 100);
    }

    .Pepr[perc='22'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 22) / 100);
    }

    .Pepr[perc='23'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 23) / 100);
    }

    .Pepr[perc='24'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 24) / 100);
    }

    .Pepr[perc='25'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 25) / 100);
    }

    .Pepr[perc='26'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 26) / 100);
    }

    .Pepr[perc='27'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 27) / 100);
    }

    .Pepr[perc='28'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 28) / 100);
    }

    .Pepr[perc='29'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 29) / 100);
    }

    .Pepr[perc='30'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 30) / 100);
    }

    .Pepr[perc='31'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 31) / 100);
    }

    .Pepr[perc='32'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 32) / 100);
    }

    .Pepr[perc='33'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 33) / 100);
    }

    .Pepr[perc='34'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 34) / 100);
    }

    .Pepr[perc='35'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 35) / 100);
    }

    .Pepr[perc='36'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 36) / 100);
    }

    .Pepr[perc='37'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 37) / 100);
    }

    .Pepr[perc='38'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 38) / 100);
    }

    .Pepr[perc='39'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 39) / 100);
    }

    .Pepr[perc='40'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 40) / 100);
    }

    .Pepr[perc='41'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 41) / 100);
    }

    .Pepr[perc='42'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 42) / 100);
    }

    .Pepr[perc='43'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 43) / 100);
    }

    .Pepr[perc='44'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 44) / 100);
    }

    .Pepr[perc='45'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 45) / 100);
    }

    .Pepr[perc='46'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 46) / 100);
    }

    .Pepr[perc='47'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 47) / 100);
    }

    .Pepr[perc='48'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 48) / 100);
    }

    .Pepr[perc='49'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 49) / 100);
    }

    .Pepr[perc='50'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 50) / 100);
    }

    .Pepr[perc='51'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 51) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='52'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 52) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='53'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 53) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='54'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 54) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='55'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 55) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='56'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 56) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='57'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 57) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='58'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 58) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='59'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 59) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='60'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 60) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='61'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 61) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='62'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 62) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='63'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 63) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='64'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 64) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='65'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 65) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='66'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 66) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='67'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 67) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='68'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 68) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='69'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 69) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='70'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 70) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='71'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 71) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='72'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 72) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='73'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 73) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='74'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 74) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='75'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 75) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='76'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 76) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='77'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 77) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='78'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 78) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='79'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 79) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='80'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 80) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='81'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 81) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='82'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 82) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='83'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 83) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='84'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 84) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='85'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 85) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='86'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 86) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='87'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 87) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='88'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 88) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='89'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 89) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='90'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 90) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='91'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 91) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='92'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 92) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='93'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 93) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='94'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 94) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='95'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 95) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='96'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 96) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='97'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 97) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='98'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 98) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='99'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 99) / 100);
        stroke: var(--comply_2);
    }

    .Pepr[perc='100'] svg circle:nth-child(2) {
        stroke-dashoffset: calc(440 - (440 * 100) / 100);
        stroke: var(--comply_3);
    }
.errorInsert {
    background-color: rgba(255,17,17,.73)!important;
    color: white!important;
}


.AggCartella {
    position: absolute;
    background-color: white;
    height: 60px;
    width: 60px;
    font-size: 22px;
    bottom: 20px;
    right: 10px;
    border-radius: 100%;
    box-shadow: 0 0 30px 0 rgba(0,0,0,.2);
    cursor: pointer;
    transition: transform 100ms ease-in-out;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 95;
}
.AggCartella:active {
    transform: scale(.95)
}


.btnMainLarge.BtnLabel {
    border: 2px solid #c3e1ff;
    color: #4e76a8;
    background-color: #e7f3ff;
    width: 100%;
    font-weight: 400;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.1);
    line-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    margin: 0 !important;
    position: relative;
}
.btnMainLarge.BtnLabel:last-child {
    margin-top: 0 !important;
}

    .btnMainLarge.BtnLabel i {
        font-size: 22px;
        position: absolute;
        right: 12px;
        top: 10px;
    }


.WrapTimbro{
    display: flex;
}
    .WrapTimbro .labelText {
        border-radius: 11px 0 0 11px !important;
        height: 100% !important;
        width: 75px;
    }
.WrapTimbro input{
    display: none;
}
    .WrapTimbro label[for='Timbrow'] {
        margin: 0;
        display: flex;
        background-color: white;
        height: 100%;
        width: calc(100% - 75px);
        border-radius: 0 11px 11px 0;
        border: 2px solid var(--main_color);
        cursor: pointer;
        transition: transform 100ms ease-in-out;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .WrapTimbro label[for='Timbrow']:active {
        transform: scale(.95);
    }

#FirmaDigitalCanvas {
    border: 2px dashed #b9b9b9;
    border-radius: 15px;
    cursor: crosshair;
    background-color: white;
}



.MostraSu {
}

.colTabSopra {
    z-index: 1;
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

.colTabSotto {
    z-index: 2;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

    .colTabSotto, .colTabSopra {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }


.MostraSu .colTabSopra {
    z-index: 2;
    opacity: 1;
    transform: translateY(0);
}
.MostraSu .colTabSotto {
    z-index: 1;
    transform: translateY(-40px) scale(.95);
}

.contBtnAzio.FisBottom {
    margin: 0;
    position: sticky;
    left: 0;
    margin-bottom: 80px;
}

.btnMainLarge.Light {
    margin-top: 0 !important;
    line-height: normal;
    font-size: 18px;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: white;
    justify-content: center;
    border-width: 2px;
    color: #363636;
    width: fit-content;
    border-color: rgba(0,0,0,.2);
    margin-right: 16px;
}
    .btnMainLarge.Light i {
        margin-left: 8px;
    }
    .btnMainLarge.Light:last-child {
        margin-top: 0 !important;
        margin-right: auto;
    }.btnMainLarge.Light:first-child {
    margin-left: auto;
}
    .btnMainLarge.Light.Cele {
        background-color: #cde9ff;
    }
    .btnMainLarge.Light.Bloc {
        background-color: #ffd7b4;
    }
    .btnMainLarge.Light.Sbloc {
        background-color: #dfffb9;
    }
    .btnMainLarge.Light.Bozz {
        background-color: #dfffb9;
    }

    .btnMainLarge.Light.Bloc::before {
      content: "Blocca";
    }
    .btnMainLarge.Light.Bloc.Sbloc::before {
      content: "Sblocca";
    }
    .btnMainLarge.Light.Bozz::before {
        content: "Salva Bozza";
    }
    .btnMainLarge.Light.Bloc.Sbloc i::before {
        content: "\f3c2";
    }


    .btnMainLarge.Light.Viol {
        background-color: #efe4ff;
    }

    .btnMainLarge.Light.Gial {
        background-color: #fdf7c6;
    }


.btnMainLight {
    height: 50px;
    width: fit-content;
    padding: 0 15px;
    background-color: #dbeaf4;
    margin: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
}
    .btnMainLight i {
        font-size: 24px;
        margin-left: 6px;
    }

.Prem {
    transition: transform 100ms ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

    .Prem:active {
        transform: scale(.95);
    }


.WrapCampi .labelText ~ .BoxRadioSel {
    padding: 0 !important;
    width: 100%;
    height: 50px;
    border-radius: 0;
}
    .WrapCampi .labelText ~ .BoxRadioSel .RadioSelM {
        color: #363636
    }

        .WrapCampi .labelText ~ .BoxRadioSel .RadioSelM:last-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
        .WrapCampi .labelText ~ .BoxRadioSel .RadioSelM:nth-child(2) {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

    .WrapCampi .labelText ~ .BoxRadioSel:last-child .RadioSelM:last-child {
        border-top: 0;
        border-bottom-right-radius: 11px;
    }

    .WrapCampi .labelText ~ .BoxRadioSel:last-child .RadioSelM:nth-child(2) {
        border-top: 0;
        border-bottom-left-radius: 11px;
    }
    .WrapCampi .labelText ~ .BoxRadioSel input[type=radio]:checked + label {
        background-color: unset;
        color: #363636
    }

        .WrapCampi .labelText ~ .BoxRadioSel input[type=radio]:checked + label:before {
            content: "";
            height: 20px;
            width: 20px;
            background-color: var(--main_color);
            border-radius: 10px;
            margin-right: 10px;
        }