﻿/*STILE LAYOUT*/
#headerCont #loghen {
    background-image: url('/images/logo.png');
    background-color: unset;
}

:root {
    --verde_crusc: #2b86a1;
    --verde-light_crusc: rgba(43, 134, 161, 0.25);
    --main_color: #2b86a1;
    --btn3_color: var(--main_color);
    --nav2_color: var(--main_color);
    --btn2_color: rgba(43, 134, 161, 0.1);
    --bgpopup_color: rgba(43, 134, 161, 0.3);
}

.colStyle {
    box-shadow: 0 2px 22px -2px rgba(0,0,0, .2);
}

body {
    background-image: url(/Files/img/gembkgr.jpg);
    background-size: cover;
    background-position: center;
}

body, html {
    border: 0;
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}



*, ::after, ::before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

    *:focus {
        box-shadow: none !important;
        outline: none !important;
    }

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.Contenitore {
    margin-top: 100px;
}

/* Nav Bar */
#headerCont {
    position: fixed;
    z-index: 5;
    left: 0;
    right: 0;
    top: 0;
    background-color: rgba(255, 255, 255, .5);
    min-height: 80px;
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
    backdrop-filter: blur(20px);
    -wekit-backdrop-filter: blur(20px);
}



#loghen { /* Background Image e metti diretto l'immagine*/
    /* background-image: url(); */
    height: 60px;
    width: 216px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: #fefdfd;
}


#navBarra {
    background: #fefdfd;
    margin-left: auto;
    margin-right: 15px;
    border-radius: 11px;
    height: 50px;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.25);
}

#listaNav {
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    height: 100%;
}

.RigaNav {
    display: inline-flex;
    margin: 0 auto;
    cursor: pointer;
    height: 40px;
    border-radius: 3px;
    user-select: none;
    position: relative;
    margin-left: 5px;
    transition: transform 100ms ease-in-out;
}

    .RigaNav.min {
        min-width: 40px;
    }

.RigaNav {
    position: relative;
    display: flex;
    align-items: center;
}

    .RigaNav > a {
        padding: 5px 10px;
        display: flex;
        text-decoration: none;
        color: #363636 !important;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: 500;
    }

    .RigaNav.RigaNavDrop > a {
        margin-right: 30px;
    }

    .RigaNav.spazz {
        cursor: default;
        background-color: rgba(0,0,0,.1) !important;
        min-width: 2px !important;
        width: 2px !important;
    }

    .RigaNav:first-child {
        border-radius: 7px 3px 3px 7px;
        margin-left: 5px;
    }

    .RigaNav:last-child {
        border-radius: 3px 7px 7px 3px;
        margin-right: 5px;
    }

    .RigaNav:not(.RigaNavDrop):not(.spazz):active, .drpDwnMagazz > div.row:active {
        transform: scale(.96);
    }

    .RigaNav > a .fas.fa-chevron-down {
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 16px;
        transition: transform 200ms linear;
    }

    .RigaNav.RigaNavDrop:hover .fas.fa-chevron-down {
        transform: rotate(180deg);
    }


.RigaNavDrop:hover .drpDwnMagazz, .drpDwnMagazz:hover {
    display: flex;
    box-shadow: 0px 4px 28px 8px rgba(0,0,0,0.2);
    border-radius: 7px;
    overflow: hidden;
}

.drpDwnMagazz {
    position: absolute;
    top: 40px;
    background-color: #fefdfd;
    flex-wrap: wrap;
    min-width: 140px;
    width: 100%;
    display: none;
}

    .drpDwnMagazz > div.row {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        margin: 0;
    }

        .drpDwnMagazz > div.row > a {
            margin: 0 auto;
            line-height: 30px;
            text-decoration: none;
            color: #363636;
            font-size: 18px;
            font-weight: 500;
        }

            .drpDwnMagazz > div.row > a:visited {
                color: #363636;
            }

        .drpDwnMagazz > div.row.mezzo:not(:first-child) {
            border-top: 2px solid rgba(0,0,0,.1);
        }

.RigaNav > a:visited {
    color: #363636;
}

.RigaNav > a i:not(.fa-chevron-down) {
    margin-right: 6px;
}


.RigaNav.active:before, .drpDwnMagazz > div.row.active:before, .itemsRicercaSelect::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: "\f111";
    color: var(--main_color);
    margin-left: 5px;
}

#LabBurghe, #Burghe {
    display: none;
}

    #Burghe:checked ~ #navBarra {
        display: block;
    }

.row.mezzo::after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: "\f054";
    color: #363636;
}

.row.mezzo:hover::after {
    animation: Muvet 300ms linear 2;
}

.active {
    border-radius: 0;
}

.btnNuoven:before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: "\f067";
    margin-right: 6px;
}

.btnMainLarge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes Muvet {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}


@media screen and (max-width: 768px) {
    .WrapCampi.WrapRicerca {
        padding-bottom: 16px;
        height: unset !important;
        min-height: 200px;
    }

        .WrapCampi.WrapRicerca .colSelectContent {
            height: unset;
        }

    .RigaNav.RigaNavDrop.active {
        padding-left: 0 !important;
    }

    #headerCont {
        box-shadow: 0 0 20px 10px rgba(0,0,0,.3);
    }

    main {
        padding-top: 0 !important;
    }

    #navBarra {
        margin-left: 15px;
        margin-top: 65px;
        width: 100%;
        height: unset;
        display: none;
    }

    .RigaNavDrop:hover .drpDwnMagazz {
        border: 0;
        padding: 5px;
    }

    .RigaNav > a {
        min-height: 40px;
        justify-content: end;
        width: calc(100% - 60px);
    }

    .drpDwnMagazz > div.row > a {
        width: calc(100% - 60px);
    }

    #listaNav {
        flex-wrap: wrap;
        height: unset;
    }

    .RigaNav {
        width: 100%;
        border-radius: 7px !important;
        height: unset;
    }

        .RigaNav:not(.spazz) {
            margin: 5px !important;
            min-height: 40px;
        }


        .RigaNav.spazz {
            height: 2px;
            width: 100% !important;
        }

    .RigaNavDrop {
        flex-wrap: wrap;
    }

    .drpDwnMagazz > div.row {
        background-color: rgba(43, 134, 161, 0.1);
        color: #363636;
        border-radius: 9px !important;
        border-top: 0 !important;
        border: 0;
        margin-bottom: 10px;
    }

    .RigaNav.RigaNavDrop .drpDwnMagazz > div.row:last-child {
        margin-bottom: 0;
    }

    .drpDwnMagazz > div.row a, .drpDwnMagazz > div.row a:visited {
        color: #363636 !important;
    }


    .drpDwnMagazz {
        position: relative;
        top: 0;
        background-color: transparent;
        box-shadow: none !important;
    }

    #LabBurghe {
        display: block;
        position: absolute;
        height: 50px;
        width: 50px;
        background: #fefdfd;
        color: #363636;
        z-index: 111;
        top: 15px;
        right: 15px;
        border-radius: 9px;
        box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        transition: transform 100ms ease-in-out;
    }

        #LabBurghe:active {
            transform: scale(.9);
        }
}

/* End  */

#nessunVoc {
    font-weight: 500;
}

.opt_load.newu {
    font-size: 18px;
    font-weight: 700;
    display: none;
}

.colAggiungi legend > span {
    width: 100% !important;
    display: block;
    text-align: center;
    color: #f7f7f7;
}

/* Modifiche Nav Bubble */
.contVabb {
    padding: 0 !important;
}

.navs {
    margin: 15px;
    padding: 0 !important;
}

.itemsnav {
    padding: 0 !important;
    margin: 0 !important;
    height: 40px;
    width: 100%;
}

.selecto {
    z-index: -1;
    height: 40px;
    background-color: unset;
}

    .selecto::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border-radius: 16px;
        background-color: var(--main_color);
    }

    .selecto.n-d::after {
        background-color: dimgrey;
    }

@media screen and (max-width: 540px) {
    .itemsnav {
        width: 50%;
    }

        .itemsnav.solo {
            width: 100%;
        }
}

@media screen and (max-width: 768px) {
    .contVabb {
        margin-top: 0 !important;
        padding: 0 !important;
    }
}
/* End */


.m-l-a {
    margin-left: auto !important;
}

.m-r-a {
    margin-right: auto !important;
}

.m-b-16 {
    margin-bottom: 16px !important;
}

.itemsRicerca {
    border-color: rgba(0,0,0, .1);
    transition: all 100ms ease-in-out;
    position: relative;
    padding: 8px 16px;
    max-height: unset;
    height: unset;
    min-height: 52px;
}

.itemsRicercaSelect {
    background-color: #fff !important;
    color: #363636;
    overflow: unset;
    width: calc(100% - 40px)!important;
    margin-left: auto;
    position: relative;
}

    .itemsRicercaSelect::before {
        position: absolute;
        font-size: 22px;
        left: -38px;
    }

@media (hover: hover) and (pointer: fine) {
    .itemsRicerca:hover, .itemsRicerca:focus {
        border: 2px solid rgba(0,0,0, .1);
        width: calc(100% - 40px);
        margin-left: auto;
    }

    .itemsRicerca.itemsRicercaSelect:hover {
        border: 2px solid rgba(0,0,0, .1);
    }

    .itemsRicerca:hover::before {
        font-family: 'Font Awesome 5 Pro';
        font-weight: 900;
        color: var(--main_color);
        margin-left: 5px;
        content: "\f356";
        position: absolute;
        font-size: 22px;
        left: -38px;
    }
}

#NewInfor .Riga {
    margin-bottom: 10px;
}
/*STILE LAYOUT*/



/* STILE LOGIN */
.colLogin {
    height: unset;
    min-height: 370px;
}

    .colLogin .btnMainThin {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        width: unset;
        padding: 0 11px;
    }

        .colLogin .btnMainThin i {
            margin-right: 5px;
        }

.btnMainThin:first-child {
    margin-right: 14px;
}

/*STILE PAGINA AUTORI*/
.WrapFotina {
    position: relative;
    transition: transform 100ms ease-in-out;
    box-shadow: 0px 4px 28px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

    .WrapFotina:active {
        transform: scale(.95);
    }

    .WrapFotina label:not(.deff)::after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f1c5";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(255,255,255,.6);
        opacity: 0;
        transition: opacity 150ms ease-in-out;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 35px;
        color: var(--main_color);
        border-radius: 50%;
    }

    .WrapFotina label:not(.deff):hover::after {
        opacity: 1;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

.descapers {
    min-height: 100px;
}

.Fotinar label {
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

    .Fotinar label.deff {
        background-image: url(/Files/img/nofoto.jpg);
        background-size: 70%;
        background-color: white;
    }

#fotina {
    visibility: hidden;
}

5 {
    display: none;
}

#descreen {
    min-height: 150px;
}


/*PAGINA ARTICOLIIII*/
.contPresenti#contaggo {
    position: relative;
    min-height: 55px;
}

    .contPresenti#contaggo:empty::after {
        content: "Nessuna Voce Presente";
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        top: 0;
        left: 0;
        align-items: center;
        justify-content: center;
    }

.grupAddy {
    display: flex;
}

    .grupAddy .noapperance {
        width: calc(100% - 130px);
        transition: transform 100ms ease-in-out;
    }

    .grupAddy .addy {
        width: 50px;
        display: flex !important;
        margin: 15px 0 0 15px;
        padding: 0 !important;
        justify-content: center !important;
        border-width: 3px;
        font-size: 16px;
        cursor: pointer;
        transition: transform 100ms ease-in-out;
    }

        .grupAddy .addy:active {
            transform: scale(.95);
        }

    .grupAddy .noapperance:active {
        /*transform: scale(.98);
        -moz-transform: scale(.98);*/
    }

    .grupAddy.wrapSelectZ:active {
        transform: unset !important;
    }

    .grupAddy.wrapSelectZ:after {
        right: 148px;
        z-index: 2;
    }

#wert .btnAzio.verde {
    margin-right: unset;
}

.cListRicerca.con4 {
    height: calc(100% - 288px);
}

.colSelectContent .boton {
    margin-right: unset;
    margin-top: 15px;
}

.bottyWrappy {
    display: none;
}

#pulsanti {
    width: 100%;
}

    #pulsanti div {
        display: inline;
        margin-left: 20px;
        border: 1px solid #393939;
        padding: 14px 8px 8px 8px;
        border-radius: 4px;
        width: 100px;
        cursor: pointer;
    }

        #pulsanti div i {
            font-size: 22px;
            font-weight: 300;
        }
/* PAGINA UTENZE */
@media screen and (max-width: 768px) {
    .cListRicerca.con1sibtn {
        height: 200px !important;
    }
}

#editArea {
    width: 100%;
    margin-top: 20px;
}

#pulsanti {
    margin-top: 20px;
}

.qualoKontakt[ql="Telefono"]::before, .qualoKontakt[ql="tel"]::before {
    content: "Tel."
}

.qualoKontakt[ql="cel"]::before {
    content: "Cel."
}

.qualoKontakt[ql="tel"]::after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: "\f879";
    color: var(--main_color);
    margin-left: 5px;
}

.qualoKontakt[ql="Telefono"]::after, .qualoKontakt[ql="cel"]::after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: "\f3cd";
    color: var(--main_color);
    margin-left: 5px;
}

.qualoKontakt[ql="e-Mail"]::before, .qualoKontakt[ql="mail"]::before {
    content: "Mail."
}

.qualoKontakt[ql="e-Mail"]::after, .qualoKontakt[ql="mail"]::after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: "\f0e0";
    color: var(--main_color);
    margin-left: 5px;
}
/*pagina clienti */
.xinen i {
    cursor: pointer;
    transition: transform 100ms ease-in-out;
}

.xinen {
    cursor: pointer;
    transition: transform 200ms ease-in-out;
}

    .xinen i:hover {
        transform: scale(1.2);
    }

    .xinen i:active {
        transform: scale(0.8);
    }

    .xinen .inputmain {
        margin-left: 5px;
        margin-right: 5px;
    }

.vis.Riga:not(.novis) {
    padding-left: 16px;
}

#altronen .contAddVocRic input {
    margin-top: 6px;
    margin-right: 6px;
}

#altronen .contAddVocRic select {
    height: 87%;
}

#altronen .contAddVocRic .wrapSelectZ.w-25 {
    margin-left: 5px;
}

legend {
    color: white;
}

.w-48 {
    width: 48%;
}

#deskone {
    width: 71% !important;
}

.centra {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottona {
    cursor: pointer;
    transition: transform 100ms ease-in-out;
}

    .bottona:active {
        transform: scale(.8);
    }



.kiq {
    position: absolute;
    font-size: 27px;
    font-weight: 900;
    color: #363636;
    /* z-index: 999; */
    right: 17px;
    top: 9px;
    background-color: var(--btn3_color);
    color: #fffdf9;
    border-radius: 20px;
    padding: 5px;
    z-index: 1;
}

    .kiq:after {
        content: "\f541";
        font-size: 25px;
        font-weight: 300;
        margin-right: 3px;
    }

    .kiq:before {
        content: "\f153";
        font-size: 25px;
        font-weight: 300;
        margin-left: 3px;
    }


.AddCurUni .col100_120 {
    padding-right: 0;
}

    .AddCurUni .col100_120 .inputmain {
        border-bottom-right-radius: 0;
        border-right: 0;
    }

    .AddCurUni .col100_120 label {
        border-top-right-radius: 0;
    }

.AddCurUni .fis120 {
    padding-left: 0;
}

    .AddCurUni .fis120 label {
        border-radius: 0 11px 11px 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

        .AddCurUni .fis120 label span {
            display: block;
            width: 50% !important;
        }

.newInputStyle .labelText.ScaPud {
    height: 100%;
    border-radius: 11px 0 0 11px;
}


.ScaPud[cesta="no"]:after {
    content: "Nessun Curriculum";
}

.ScaPud[cesta="ni"]:after {
    content: "Curriculum Caricato";
}


.ScaPud[cesta="si"]:after {
    content: "Curriculum Presente";
    height: 100%;
    width: calc(100% - 75px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.ScaPud[cesta="si"]:before {
    background-image: url(https://smartcontrol.smartsw.biz/immagini/g-pdf.png);
    content: "Scarica";
    height: 100%;
    background-color: #f7f7f7;
    border-radius: 9px;
    width: 75px;
    background-size: 60%;
    background-position: 15px 13px;
    background-repeat: no-repeat;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    padding-bottom: 5px;
    font-weight: 600;
    cursor: pointer;
    color: #397b39;
    font-size: 14px;
}

.masterinnoxer {
    border-bottom: 6px solid var(--btn3_color);
    border-radius: 11px;
    position: relative;
}

    .masterinnoxer ~ div {
        border-top: 6px solid var(--btn3_color);
        border-radius: 11px;
        position: relative;
    }

    .masterinnoxer::before {
        content: " Di cui\f3be";
        position: absolute;
        font-family: 'Font Awesome 5 Pro';
        font-weight: 900;
        bottom: -25px;
        left: calc(50% - 25px);
        background-color: var(--btn3_color);
        color: white;
        padding: 0 3px;
    }

.vewPrev .labelText {
    height: unset;
}

#mailonz::placeholder {
    color: gainsboro;
}

.riPrePa.extra.Costo {
    background-color: #ff6969;
}

.riPrePa.extra.Rientro {
    background-color: #a1e262;
}

#sPaccen .evidenz {
    background-color: cadetblue !important;
}

.famoFamo {
    display: block !important;
    opacity: 1 !important;
}

.Robben {
    padding-top: 30px;
    font-size: 14px;
    letter-spacing: 0.9px;
    color: #4a4747e0;
    position: relative;
}

    .Robben::before, .Robben::after {
        position: absolute;
        top: 0px;
        font-size: 17px;
        left: 26px;
        color: black !important;
    }

    .Robben::before {
        content: attr(cod)"";
        width: 75px;
    }

    .Robben::after {
        content: ' - 'attr(rif);
        left: 120px;
    }

.sitGG {
    height: 35px;
    width: 35px;
    border-radius: 100%;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    position: absolute;
    font-size: 15px;
    background-color: var(--btn1_color);
    color: #363636;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    cursor: pointer;
    top: 9px;
}


/*CSS ROBERT*/
label.v-docs[cesta = "si"]::after {
    content: "Documento Presente" !important;
}

label.v-docs[tipo="pdf"]::before {
    color: #548a90;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQ4MHB0IiB2aWV3Qm94PSItMjQgMCA0ODAgNDgwIiB3aWR0aD0iNDgwcHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTg4IDMyMHYtMTQ0Yy4wMjczNDQtOC44MjQyMTkgNy4xNzU3ODEtMTUuOTcyNjU2IDE2LTE2aDI3MnYtMTM2Yy0uMDI3MzQ0LTguODI0MjE5LTcuMTc1NzgxLTE1Ljk3MjY1Ni0xNi0xNmgtMjQ4djgwYzAgOC44MzU5MzgtNy4xNjQwNjIgMTYtMTYgMTZoLTg4djM1MmMuMDI3MzQ0IDguODI0MjE5IDcuMTc1NzgxIDE1Ljk3MjY1NiAxNiAxNmgzMzZjOC44MjQyMTktLjAyNzM0NCAxNS45NzI2NTYtNy4xNzU3ODEgMTYtMTZ2LTEyMGgtMjcyYy04LjgyNDIxOS0uMDI3MzQ0LTE1Ljk3MjY1Ni03LjE3NTc4MS0xNi0xNnptMCAwIiBmaWxsPSIjOWJjOWZmIi8+PGcgZmlsbD0iIzFlODFjZSI+PHBhdGggZD0ibTQwOCAxNTJoLTI0di0xMjhjMC0xMy4yNTM5MDYtMTAuNzQ2MDk0LTI0LTI0LTI0aC0yNDhjLS4xNjc5NjkgMC0uMzEyNS4wNzgxMjUtLjQ4MDQ2OS4wODk4NDM4LS42NDQ1MzEuMDQyOTY4Mi0xLjI4NTE1Ni4xNjQwNjIyLTEuOTAyMzQzLjM1OTM3NTItLjI1NzgxMy4wNjY0MDYtLjUwNzgxMy4xNDQ1MzEtLjc1MzkwNy4yMzgyODEtLjgzOTg0My4zNDM3NS0xLjYxMzI4MS44MzIwMzEtMi4yODkwNjIgMS40NDE0MDZsLTEwNCA5NmMtLjcxNDg0NC42ODM1OTQtMS4yOTI5NjkgMS40OTYwOTQtMS43MDMxMjUgMi4zOTg0MzgtLjExNzE4OC4yNjE3MTgtLjIxODc1LjUyNzM0NC0uMzA0Njg4LjgwMDc4MS0uMjYxNzE4LjcxODc1LS40MTc5NjggMS40NzY1NjMtLjQ2MDkzNyAyLjIzODI4MSAwIC4xNjc5NjktLjEwNTQ2OS4zMjAzMTMtLjEwNTQ2OS40ODgyODJ2MzUxLjk0NTMxMmMwIDEzLjI1MzkwNiAxMC43NDYwOTQgMjQgMjQgMjRoMzM2YzEzLjI1MzkwNiAwIDI0LTEwLjc0NjA5NCAyNC0yNHYtMTEyaDI0YzEzLjI1MzkwNiAwIDI0LTEwLjc0NjA5NCAyNC0yNHYtMTQ0YzAtMTMuMjUzOTA2LTEwLjc0NjA5NC0yNC0yNC0yNHptLTMwNC0xMjUuNzI2NTYydjYxLjcyNjU2MmMwIDQuNDE3OTY5LTMuNTgyMDMxIDgtOCA4aC02Ny41MzUxNTZ6bTI2NCA0MjkuNzI2NTYyYzAgNC40MTc5NjktMy41ODIwMzEgOC04IDhoLTMzNmMtNC40MTc5NjkgMC04LTMuNTgyMDMxLTgtOHYtMzQ0aDgwYzEzLjI1MzkwNiAwIDI0LTEwLjc0NjA5NCAyNC0yNHYtNzJoMjQwYzQuNDE3OTY5IDAgOCAzLjU4MjAzMSA4IDh2MTI4aC0yNjRjLTEzLjI1MzkwNiAwLTI0IDEwLjc0NjA5NC0yNCAyNHYxNDRjMCAxMy4yNTM5MDYgMTAuNzQ2MDk0IDI0IDI0IDI0aDI2NHptNDgtMTM2YzAgNC40MTc5NjktMy41ODIwMzEgOC04IDhoLTMwNGMtNC40MTc5NjkgMC04LTMuNTgyMDMxLTgtOHYtMTQ0YzAtNC40MTc5NjkgMy41ODIwMzEtOCA4LThoMzA0YzQuNDE3OTY5IDAgOCAzLjU4MjAzMSA4IDh6bTAgMCIvPjxwYXRoIGQ9Im0xNzYgMTkyaC00OGMtNC40MTc5NjkgMC04IDMuNTgyMDMxLTggOHY5NmMwIDQuNDE3OTY5IDMuNTgyMDMxIDggOCA4czgtMy41ODIwMzEgOC04di00MGg0MGMxMy4yNTM5MDYgMCAyNC0xMC43NDYwOTQgMjQtMjR2LTE2YzAtMTMuMjUzOTA2LTEwLjc0NjA5NC0yNC0yNC0yNHptOCA0MGMwIDQuNDE3OTY5LTMuNTgyMDMxIDgtOCA4aC00MHYtMzJoNDBjNC40MTc5NjkgMCA4IDMuNTgyMDMxIDggOHptMCAwIi8+PHBhdGggZD0ibTI1NiAxOTJoLTMyYy00LjQxNzk2OSAwLTggMy41ODIwMzEtOCA4djk2YzAgNC40MTc5NjkgMy41ODIwMzEgOCA4IDhoMzJjMjIuMDgyMDMxLS4wMjczNDQgMzkuOTcyNjU2LTE3LjkxNzk2OSA0MC00MHYtMzJjLS4wMjczNDQtMjIuMDgyMDMxLTE3LjkxNzk2OS0zOS45NzI2NTYtNDAtNDB6bTI0IDcyYzAgMTMuMjUzOTA2LTEwLjc0NjA5NCAyNC0yNCAyNGgtMjR2LTgwaDI0YzEzLjI1MzkwNiAwIDI0IDEwLjc0NjA5NCAyNCAyNHptMCAwIi8+PHBhdGggZD0ibTM4NCAxOTJoLTY0Yy00LjQxNzk2OSAwLTggMy41ODIwMzEtOCA4djk2YzAgNC40MTc5NjkgMy41ODIwMzEgOCA4IDhzOC0zLjU4MjAzMSA4LTh2LTQwaDQwYzQuNDE3OTY5IDAgOC0zLjU4MjAzMSA4LThzLTMuNTgyMDMxLTgtOC04aC00MHYtMzJoNTZjNC40MTc5NjkgMCA4LTMuNTgyMDMxIDgtOHMtMy41ODIwMzEtOC04LTh6bTAgMCIvPjwvZz48L3N2Zz4=)
}

label.v-docs[tipo="jpg"]::before, label.v-docs[tipo="jpeg"]::before, label.v-docs[tipo="png"]::before {
    color: #548a90;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjUxMS45OTk5OXB0IiB2aWV3Qm94PSIxIDEgNTExLjk5OTk5IDUxMS45OTk5OSIgd2lkdGg9IjUxMS45OTk5OXB0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0zNjggMTQ0LTEzNiAxMzYtNTYtNTYtMTYwIDE2MHY0OGMwIDM1LjM0NzY1NiAyOC42NTIzNDQgNjQgNjQgNjRoMzUyYzM1LjM0NzY1NiAwIDY0LTI4LjY1MjM0NCA2NC02NHYtMTYwem0wIDAiIGZpbGw9IiNiZGRiZmYiLz48cGF0aCBkPSJtMjU2IDExMmMwIDE3LjY3MTg3NS0xNC4zMjgxMjUgMzItMzIgMzJzLTMyLTE0LjMyODEyNS0zMi0zMiAxNC4zMjgxMjUtMzIgMzItMzIgMzIgMTQuMzI4MTI1IDMyIDMyem0wIDAiIGZpbGw9IiNiZGRiZmYiLz48ZyBmaWxsPSIjM2Q5YWUyIj48cGF0aCBkPSJtNDMyIDBoLTM1MmMtNDQuMTYwMTU2LjA1MDc4MTItNzkuOTQ5MjE4OCAzNS44Mzk4NDQtODAgODB2MzUyYy4wNTA3ODEyIDQ0LjE2MDE1NiAzNS44Mzk4NDQgNzkuOTQ5MjE5IDgwIDgwaDM1MmM0NC4xNjAxNTYtLjA1MDc4MSA3OS45NDkyMTktMzUuODM5ODQ0IDgwLTgwdi0zNTJjLS4wNTA3ODEtNDQuMTYwMTU2LTM1LjgzOTg0NC03OS45NDkyMTg4LTgwLTgwem0tMzUyIDMyaDM1MmMyNi41MDc4MTIgMCA0OCAyMS40ODgyODEgNDggNDh2MTUzLjM3NWwtMTAwLjY4NzUtMTAwLjY4NzVjLTYuMjUtNi4yNDYwOTQtMTYuMzc1LTYuMjQ2MDk0LTIyLjYyNSAwbC0xMjQuNjg3NSAxMjQuNjg3NS00NC42ODc1LTQ0LjY4NzVjLTYuMjUtNi4yNDYwOTQtMTYuMzc1LTYuMjQ2MDk0LTIyLjYyNSAwbC0xMzIuNjg3NSAxMzIuNjg3NXYtMjY1LjM3NWMwLTI2LjUwNzgxMiAyMS40OTIxODgtNDggNDgtNDh6bTM1MiA0NDhoLTM1MmMtMjYuNTA3ODEyIDAtNDgtMjEuNDg4MjgxLTQ4LTQ4di00MS4zNzVsMTQ0LTE0NCAxNDguNjg3NSAxNDguNjg3NWMzIDMgNy4wNzAzMTIgNC42ODc1IDExLjMxMjUgNC42ODc1aDY0di0zMmgtNTcuMzc1bC04OC04OCAxMTMuMzc1LTExMy4zNzUgMTEyIDExMnYxNTMuMzc1YzAgMjYuNTExNzE5LTIxLjQ4ODI4MSA0OC00OCA0OHptMCAwIi8+PHBhdGggZD0ibTIyNCAxNjBjMjYuNTA3ODEyIDAgNDgtMjEuNDg4MjgxIDQ4LTQ4cy0yMS40ODgyODEtNDgtNDgtNDgtNDggMjEuNDg4MjgxLTQ4IDQ4IDIxLjQ4ODI4MSA0OCA0OCA0OHptMC02NGM4LjgzNTkzOCAwIDE2IDcuMTY0MDYyIDE2IDE2cy03LjE2NDA2MiAxNi0xNiAxNi0xNi03LjE2NDA2Mi0xNi0xNiA3LjE2NDA2Mi0xNiAxNi0xNnptMCAwIi8+PC9nPjwvc3ZnPg==)
}

label.v-docs[cesta = "ni"]::after {
    content: "Documento Caricato" !important;
}

label.v-docs[cesta = "no"]::after {
    content: "Nessun Documento" !important;
}

.v-left {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/*CSS ROBERT*/
.grigino {
    filter: grayscale(100%);
    user-select: none;
    pointer-events: none;
}

.NoIddo input[type=checkbox] {
    display: block !important;
    height: 46px;
    width: 68px;
    position: absolute;
    right: 0px;
    top: 0;
    z-index: 2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}


/*CSS ROBERT 12/03/2021 */
.v-rejime.nascon {
    min-height: 50px;
    padding-top: 9px;
    padding-bottom: 0;
}

    .v-rejime.nascon .WrapCampi.col90,
    .v-rejime.nascon .WrapCampi.col80 {
        display: flex !important;
    }

    .v-rejime.nascon .WrapCampi .labelText,
    .v-rejime.nascon .WrapCampi .inputmain {
        height: 35px;
    }

    .v-rejime.nascon .v-posn .inputmain {
        border-radius: 11px;
    }

    .v-rejime.nascon .v-posn .labelText {
        display: none;
    }

    .v-rejime.nascon .WrapCampi.col90 .inputmain,
    .v-rejime.nascon .WrapCampi.col80 .inputmain {
        border-bottom-left-radius: 0;
        border-top-right-radius: 11px;
    }

    .v-rejime.nascon .WrapCampi.col90 .labelText,
    .v-rejime.nascon .WrapCampi.col80 .labelText
    {
        width: 70px;
        border-bottom-left-radius: 11px;
        border-top-right-radius: 0;
    }



.pippnofunc::-webkit-scrollbar {
    width: 23px;
    height: 18px;
}

.pippnofunc::-webkit-scrollbar-thumb {
    height: 50px;
    border: 5px solid #00000000;
    background-clip: padding-box;
    border-radius: 51px;
    -webkit-border-radius: 51px;
    background-color: #28748ab3;
    -webkit-box-shadow: inset -1px -1px 0px #0000000d, inset 1px 1px 0px #0000000d;
}

.pippnofunc::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

.pippnofunc::-webkit-scrollbar-corner {
    background-color: transparent;
}

.v-rejime {
    border-radius: 11px!important;
}
.v-rejime.nascon .p{
    padding:0!important;
}
.v-rejime .v-r-rejime label{
    display:none!important;
}
.v-rejime .v-r-rejime::after {
    content: "\f1f8";
    font-family: 'Font Awesome 5 Pro';
    color: red;
    text-shadow: 0 0 5px #ff0000c7;
    position: absolute;
    font-size: 20px;
    cursor: pointer;
}

.v-rejime .v-r-rejime {
    display: flex;
    align-items: center;
    width: 50px;
    position: absolute;
    top: 25px;
    right: -25px;
}
.v-rejime .v-apri {
    right: 35px;
    cursor: pointer;
    transition: all .3s linear;
    position: absolute;
    top: 13px;
    width: 33px;
    height: 29px;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}
    .v-rejime .v-apri::after {
        color: #000000;
        font-size: 20px;
    }

    .v-rejime .v-posn{
        display:none;
    }
/*CSS ROBERT 12/03/2021 */


body[solet='true'] #contpers input:not(.inputmain.confa), body[solet='true'] #contpers textarea, body[solet='true'] #contpers select, body[solet='true'] #contpers .tgl-btn,
body[solet='true'] .contBtnAzio .btnAzio.verde, body[solet='true'] #btnMainLargeOnly, body[solet='true'] .Contenitore.selPunto.cotenx .Riga.testina,
body[solet='true'] .colAggiungi, body[solet='true'] .Contenitore.selPunto.cotenx .Riga.boodino, body[solet='true'] #conListPers i,
body[solet='true'] #contpers i:not(.delaMuch), body[solet='true'] #contpers .edittel {
    pointer-events: none !important;
    opacity: .8 !important;
    box-shadow: none !important;
}

.NoIddo input[type=checkbox] {
    display: block !important;
    height: 46px;
    width: 68px;
    position: absolute;
    right: 0px;
    top: 0;
    z-index: 2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
#WrapGogla {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: 100;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000d1;
}
#googlalo {
    width: 90%;
    height: 90%;
    border-radius: 15px;
}
.zgog {
    z-index: 113;
    position: absolute;
    font-size: 55px;
    top: 5.5%;
    right: 5.3%;
    background-color: white;
    padding: 3px;
    border-radius: 100%;
}
.betal::after {
    content: "beta";
    font-size: 13px;
    position: absolute;
    color: yellow;
    bottom: 21px;
    TEXT-SHADOW: black;
    BACKGROUND-COLOR: #363636;
    text-shadow: 0 0 white;
    padding: 0 2px;
    border-radius: 3px;
}



.eWallet .SelctWDescry .inputRicerca {
    text-transform: unset;
    padding-right: 10px;
    width: 158px;
}

.eWallTesta {
    display: flex;
    padding: 15px;
    padding-left: 0;
    flex-wrap: wrap;
    overflow: unset;
    z-index: 1;
}

.SelctWDescry .inputmain.desct {
    font-size: 16px;
    width: 55px;
}

    .SelctWDescry .inputmain.desct span {
        display: flex;
        height: 100%;
        align-items: center;
        padding-top: 2px;
    }

.eWallet #avviaRic {
    margin: 0;
    margin-left: 15px;
    width: 50px;
    cursor: pointer;
    transition: transform 100ms ease-in-out;
}
.eWallet #avviaRic:active {
    transform: scale(.95)
}

.SelctWDescry.Long .inputmain.desct {
    width: 95px;
}

    .SelctWDescry.Long .inputmain.desct span {
        width: 100%;
        padding: 0 10px;
        text-align: center;
        line-height: 1.2;
        font-size: 14px;
        font-weight: 500;
    }

.SelctWDescry.Long .inputmain.desct, .eWallet .SelctWDescry.Long .inputRicerca {
    border-color: rgba(0,0,0,.2);
    box-shadow: none;
    background-color: white;
}
.eWallet .SelctWDescry.Long .inputRicerca {
    width: 189px;
    text-align: center;
    font-size: 18px;
}

.eWallet .wrapSelectZ:after {
    right: 18px;
}

.NomeConsu {
    width: 100%;
    padding-left: 20px;
    margin-bottom: 15px;
    display: flex;
}
.NomeConsu select{
    margin: 0;
}
    .NomeConsu .InputSelect {
        width: 50%;
        margin-left: auto;
    }
    .NomeConsu span {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 22px;
    }
    .NomeConsu span::before {
        content: "eWallet"
    }

/* Input Select */
.InputSelect {
    border: 2px solid var(--main_color);
    height: 50px;
    width: 100%;
    border-radius: 11px;
    background-color: #fff;
    color: #363636;
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 22%);
    font-weight: 500;
    padding: 3px;
    display: flex;
    position: relative;
}
    .InputSelect > i {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 16px;
        transition: transform 250ms ease-in-out;
    }
    .InputSelect input {
        height: 100%;
        width: 100%;
        padding-left: 10px;
        padding-right: 40px;
        border: 0;
        box-shadow: none;
    }
    .InputSelect .QuiRisulta {
        position: absolute;
        top: 45px;
        left: -2px;
        height: 0;
        width: calc(100% + 4px);
        overflow: hidden;
        border: 0;
        background-color: white;
    }
        .InputSelect .QuiRisulta .ElRisulto {
            height: 40px;
            display: flex;
            align-items: center;
            border-top: 2px solid rgba(0,0,0,.1);
            margin: 0 11px;
            cursor: pointer;
            transition: transform 100ms ease-in-out;
        }
        .InputSelect .QuiRisulta .ElRisulto:active {
            transform:scale(.98)
        }

    .InputSelect.Aperol {
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none
    }
        .InputSelect.Aperol .QuiRisulta {
            height: auto;
            max-height: 300px;
            overflow: auto;
            overflow-x: hidden;
            border: 2px solid var(--main_color);
            border-top: 0;
            box-shadow: 0 20px 15px 5px rgb(0 0 0 / 10%);
        }

        .InputSelect.Aperol > i {
            transform: rotate(180deg)
        }
            .InputSelect.Aperol > i::before {
                content: "\f078";
            }
/* End */



.RigaPaghy {
    border-bottom: 2px solid rgba(0,0,0,.2);
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    border-top: 2px solid rgba(0,0,0,.2);
    position: relative;
    background-color: #f7f7f7;
}
    .RigaPaghy:nth-child(even) {
        background-color: rgb(225 236 237);
    }
.CodPra {
    width: 95px;
}
.Topo {
    width: 110px;
}
.NomePra {
    width: calc(100% - 490px);
}
.SmallDe {
    width: calc(100% - 135px);
    border-top: 2px solid rgba(0,0,0,.2);
}
.Rif {
    width: 55px;
}
.RifC {
    width: 95px;
}


    .CodPra:empty, .NomePra:empty, .Rif:empty, .RifC:empty {
        display: none;
    }

.WrapMoney{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}



.RigaPaghy div:not(.v-docu):not(.v-class):not(.approven):not(.Figliocchi):not(.Figlios) {
    border-right: 2px solid rgba(0,0,0,.2);
    padding: 8px 5px;
}



.BigDe {
    display: contents;
}

.RigaPaghy[tipo='0'] .SmallDe, .RigaPaghy[tipo='3'] .SmallDe {
    width: calc(100% - 340px);
    border-top: 0
}
.Impo {
    width: 135px;
    border-right: 0 !important;
}

.RigaPaghy[tipo='1'] .Impo span, .RigaPaghy[tipo='2'] .Impo span {
    position: absolute;
    width: 135px;
    right: 0;
    top: calc(50% - 12px);
}

.SmallDe:empty::after{
    content: "--"
}


.RigaPaghy[tipo='0'] .Topo {
    box-shadow: inset 0 0 0 2px #ff6357;
}
.RigaPaghy[tipo='1'] .Topo {
    box-shadow: inset 0 0 0 2px #97c75f;
}
.RigaPaghy[tipo='2'] .Topo {
    box-shadow: inset 0 0 0 2px #4caf50;
}
.RigaPaghy[tipo='3'] .Topo {
    box-shadow: inset 0 0 0 2px #ff3526;
}

.RigaPaghy[tipo='0'], .RigaPaghy[tipo='1'] {
  width: calc(100% - 136px);
}

.RigaPaghy[tipo='2'] .Impo span, .RigaPaghy[tipo='3'] .Impo span, .RigoToto.RigaPaghy .Impo span {
    font-weight: 600;
    font-size: 18px;
}

.RigaPaghy[tipo='1'] .Impo span, .RigaPaghy[tipo='2'] .Impo span {
    color: #4caf50;
}
.RigaPaghy[tipo='0'] .Impo span, .RigaPaghy[tipo='3'] .Impo span {
    color: #ff3526;
}

.RigaPaghy[tipo='1'] .Impo span::before, .RigaPaghy[tipo='2'] .Impo span::before {
    content: "+ ";
}

.RigaPaghy[tipo='0'] .Impo span::before, .RigaPaghy[tipo='3'] .Impo span::before {
    content: "- ";
}

.unofaso {
    height: calc(100% - 43px);
}

.RigoToto.RigaPaghy .Impo{
    margin-left: auto;
    text-align: center;
}
.RigoToto.RigaPaghy:empty{
   display: none;
}




.RichiediPaghi {
    border: 2px solid #009688;
    height: 50px;
    width: fit-content;
    padding: 0 15px;
    display: flex;
    align-items: center;
    border-radius: 11px;
    margin-left: 15px;
    cursor: pointer;
    transition: transform 100ms ease-in-out;
    font-size: 16px;
}
.RichiediPaghi:active {
    transform: scale(.95)
}
    .RichiediPaghi i {
        font-size: 18px;
        margin-left: 10px;
    }


#Nomesu + .RichiediPaghi{
    margin-left: auto;
}

.WrapManci {
    background-color: white;
    border-bottom: 2px solid #f44336;
    border-top: 2px solid #f44336;
    margin: 0 5px;
    padding: 8px 5px;
    width: 100%;
    margin-bottom: 16px;
}

    .WrapManci .DocManc {
        display: block;
        text-align: center;
        font-size: 20px;
        margin-bottom: 5px;
    }

.ElDocNo {
    font-size: 16px;
}
.ElDocNo i{
    margin-right: 5px;
}

.Figliocchi {
    margin-left: 15px;
}


.RigaPaghy.Figlios {
    background-color: white;
    margin-bottom: 0;
    border-bottom: 0;
    width: 100%;
}
    .RigaPaghy.Figlios:last-child {
        margin-bottom: 15px;
        border-bottom: 2px solid rgba(0,0,0,.2);
    }
    .RigaPaghy.Figlios:first-child {
        margin-top: 15px;
        border-top: 2px solid rgba(0,0,0,.2);
    }

.RigaPaghy.Leila > div:not(.v-docu):not(.v-class):not(.approven):not(.Figliocchi):not(.Figlios) {
    border-bottom: 2px solid rgba(0,0,0,.2);
}
.RigaPaghy.Figlios div:first-child {
    border-left: 2px solid rgba(0,0,0,.2);
}

.RigaPaghy.Leila, .RigaPaghy.Leila * {
    border-color: #7682c5 !important
}

    .RigaPaghy:not(.Leila) .Figliocchi{
        display: none;
    }


.Stato {
    width: 87px;
}

.Dojo, .Chev {
    width: 35px;
}

.Chev {
    border-right: 0 !important
}

    .Chev i {
        cursor: pointer;
        transition: transform 100ms ease-in-out;
    }

    .Stato i, .Dojo i, .Chev i {
        font-size: 20px;
    }

.Cod {
    width: 175px;
}

.Piva {
    width: 115px;
}

.Ibano {
    width: 255px;
}

.Fatt {
    width: 170px;
    text-align: center;
}

.Cons {
    width: calc(100% - 1237px);
    text-align: center;
}

.Leila .Chev i {
    transform: rotate(180deg);
}

#Clusions textarea{
    min-height:150px;
}
.pic{
    height:23px!important;
    font-weight:unset!important;
}
.ripn {
    padding: 8px 15px!important;
    margin-left: -8px;
}
.btnAssResp.perinp{
    height:unset!important;
    width:unset!important;
    margin:unset;
}
.btnAssResp.perinp > i{
    margin-right:10px;
}
.pikkin .WrapCampi.conaft::after {
    top: 29px;
    right:10px;
}
.titel {
    width: 100%;
    background-color: var(--btn3_color);
    color: white;
    margin: 0 30px;
    border-radius: 10px;
    font-size: 20px;
    position:relative;
    z-index:1
}
.contRidon {
    border-bottom: 3px solid var(--btn3_color);
}
.titel.bottona::before {
    content: "";
    height: 2px;
    width: 117%;
    background-color: var(--btn3_color);
    position: absolute;
    top: 13px;
    left: -10%;
    z-index: -1;
}
#Clusions .fas.impod {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 20px;
    z-index:1;
}
.censpa[def='true']::before {
    content: "Default";
    position: absolute;
    /* background-color: red; */
    bottom: 0;
    left: 9px;
    color: var(--btn3_color);
    font-size: 10px;
}

.loadGif {
    width: 60px;
    height: 50px;
    /* background-image: url(../Image/loading.gif); */
    background-image: url(../Image/load.png);
    background-repeat: no-repeat;
    background-size: contain !important;
    background-position: center !important;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 30px);
    display: none;
    animation: rott 1.3s infinite linear;
    filter: grayscale(0.8);
}