body {
    /*font-family: Arial, Helvetica, sans-serif; /*background: #3e3e3e;*/
    /*background: #6e6c71;*/
    font-family: Verdana, Arial;
    font-size: 12px;
    background-color: #6e6c71;
    position: relative;
}

h3 {
    margin-bottom: 10px;
}

.wrapper {
    /*background: #333333;*/
    background: #ffffff;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    /*margin: auto;*/
    /*margin-top: 10px;
    width: 900px;*/
    padding: 10px;
    color: black;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(0,0,0,.8);
}

span.btn {
    padding: 10px;
    display: inline-block;
    cursor: pointer;
    font: 12px/14px Arial, Helvetica, sans-serif;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #666666;
    color: #fff;
    box-shadow: inset 0 0 2px rgba(0,0,0,.8);
    border: 1px solid gray;
}

    span.btn:hover {
        background-color: #eee;
        color: #333333;
        box-shadow: 0 0 2px rgba(0,0,0,.8);
    }

.ImmaginiDocumenti {
    width: 40px;
}

.NomeDocumento {
    font-size: x-small;
    font-weight: bold;
    width: 150px;
    padding: 0px;
    margin: 0px;
    display: block;
    height: 50px;
}

img {
    border: none;
}

.DivIntestazione {
    background-color: #f97000;
    text-align: left;
    padding: 8px;
    /*height: 15px;*/
    color: white;
    padding-right: 15 px;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

    .DivIntestazione a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

.sinistra {
    float: left;
    margin-left: 30px;
}

.destra {
    float: right;
    margin-right: 10px;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.center {
    text-align: center !important;
}

button {
    padding: 4px;
    display: inline-block;
    cursor: pointer;
    font: 12px/14px Arial, Helvetica, sans-serif;
    color: #666;
    border: 1px solid #999;
    background-color: #eee;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: #999 2px 0px 3px;
    -webkit-box-shadow: #999 2px 0px 3px;
    margin-bottom: 4px;
}

:focus {
    outline: 0;
}

button:hover {
    color: #aaa;
    background-color: #000;
}

/*.Icone {
    width: 50px;
}*/

.IntestazioniColonneStorico {
    font-weight: bold;
}

p {
    text-align: justify;
}

.nopadding {
    padding: 0px !important;
}

.nomargin {
    margin: 0px !important;
}

.noborder {
    border: 0px !important;
}

.margin-bot-20 {
    margin-bottom: 20px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-bot-15 {
    margin-bottom: 15px !important;
}

.margin-r-15 {
    margin-right: 15px !important;
}

.margin-l-15 {
    margin-left: 15px !important;
}

.margin-top-100 {
    margin-top: 100px !important;
}

.padding-r-15 {
    padding-right: 15px !important;
}

.padding-l-15 {
    padding-left: 15px !important;
}

.ver-oriz-middle > tbody > tr > td, .ver-oriz-middle > thead > tr > th {
    vertical-align: middle !important;
    text-align: center !important;
}

/*---- button-group ----*/

.button-group:after {
    content: '';
    display: block;
    clear: both;
}

.button-group .button {
    float: left;
    border-radius: 0;
    margin-right: 1px;
}

    .button-group .button:first-child {
        border-radius: 0.5em 0 0 0.5em;
    }

    .button-group .button:last-child {
        border-radius: 0 0.5em 0.5em 0;
    }

    .button-group .button:only-child {
        border-radius: 0.5em 0.5em 0.5em 0.5em;
    }

/*Aggiusto icone del validator*/
.btn-group .form-control-feedback {
    top: 0 !important;
    right: -30px !important;
}

.selectContainer .form-control-feedback {
    right: 30px !important;
}

.inputGroupContainer .form-control-feedback {
    right: 55px !important;
}

.select2-selection__clear {
    margin-right: 20px !important;
}


/*.select2 li, input[placeholder] { width: 100% !important; }*/
/* button
------------------------- */

.button {
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 10px;
    background: #EEE;
    border: none;
    border-radius: 7px;
    background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
    color: #222;
    font-weight: 500;
    text-shadow: 0 1px white;
    cursor: pointer;
}

    .button:hover {
        background-color: #8CF;
        text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
        color: #222;
    }

    .button.is-checked,
    .button.active,
    .button.is-selected {
        color: white;
        text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
    }

/* PANEL */
/*dashboard*/
.panel-dashboard {
    border-color: #f97000 !important;
    border: solid 3px;
    color: #f97000 !important;
    border-radius: 20px;
}

.panel-heading-dashboard {
    border-color: #f97000;
}

    .panel-heading-dashboard, .panel-heading-dashboard a {
        color: #f97000;
        text-decoration: none;
        font-weight: bold;
        font-size: large;
    }

.panel-body-dashboard {
    border-color: #f97000 !important;
    color: black;
}


/*dashboard-notifiche*/
.panel-dashboard-notifiche {
    border-color: #f97000 !important;
    border: solid 3px;
    color: white !important;
    background-color: black;
    border-radius: 20px;
}

.panel-heading-dashboard-notifiche {
    border-color: white;
    /*border-color: #6e6c71;*/
    /*background-color: #ddd;*/
}

    .panel-heading-dashboard-notifiche, .panel-heading-dashboard-notifiche a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: large;
    }

.panel-body-dashboard-notifiche {
    border-color: #f97000 !important;
}



.panel-giusto {
    border-color: lightgray !important;
    /*border-color: #6e6c71 !important;*/
}

.panel-heading-giusto {
    border-color: lightgray;
    /*border-color: #6e6c71;*/
    /*background-color: #ddd;*/
}

    .panel-heading-giusto, .panel-heading-giusto a {
        color: black;
        text-decoration: none;
        font-weight: bold;
        font-size: large;
    }


.panel-CWPA {
    border-color: #2e6da4 !important;
}

.panel-heading-CWPA {
    border-color: #2e6da4;
    background-color: #2e6da4 !important;
}

    .panel-heading-CWPA, .panel-heading-CWPA a {
        color: white;
        text-decoration: none;
        padding: 12px 35px 12px 15px;
    }





/* PANEL GIUSTO FILTRO*/
.panel-panel-giustofiltro {
    border-color: black;
    background-color: rgb(110, 108, 113);
}

.panel-heading-giustofiltro {
    border-color: black;
    /*background-color: #ddd;*/
}

    .panel-heading-giustofiltro, .panel-heading-giustofiltro a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: large;
    }


/** panel per macro tipo "giustificativi" **/
.panel-1 {
    border-color: rgb(249, 112, 0) !important;
    border: 3px solid transparent;
}

    .panel-1 .panel-heading {
        border-color: rgb(249, 112, 0) !important;
        color: black;
    }

.panel-verde {
    border-color: #0b8e36 !important;
    border: 1px solid transparent;
}

    .panel-verde .panel-heading {
        background-color: #0b8e36 !important;
        border-color: #0b8e36 !important;
        color: white;
    }



/** panel per macro tipo "sistemi informativi e telematici" **/
.panel-2 {
    border-color: #0b8e36 !important;
    border: 3px solid transparent;
}

    .panel-2 .panel-heading {
        border-color: #0b8e36 !important;
        color: black;
    }

/** panel per macro tipo "economato" **/
.panel-3 {
    border-color: #3f67af !important;
    border: 3px solid transparent;
}

    .panel-3 .panel-heading {
        border-color: #3f67af !important;
        color: black;
    }


/** panel per macro tipo "Personale" **/
.panel-7 {
    border-color: #b03034 !important;
    border: 3px solid transparent;
}

    .panel-7 .panel-heading {
        border-color: #b03034 !important;
        color: black;
    }



/** panel per macro tipo "Personale" **/
.panel-8 {
    border-color: #808080 !important;
    border: 3px solid transparent;
}

    .panel-8 .panel-heading {
        border-color: #808080 !important;
        color: black;
    }


/** panel per macro tipo "Educazione Istruzione" **/
.panel-9 {
    border-color: #7f3e98 !important;
    border: 3px solid transparent;
}

    .panel-9 .panel-heading {
        border-color: #7f3e98 !important;
        color: black;
    }

/** panel per macro tipo "Protezione Civile" **/
.panel-10 {
    border-color: #edc500 !important;
    border: 3px solid transparent;
}

    .panel-10 .panel-heading {
        border-color: #edc500 !important;
        color: black;
    }

/*.panel-5 .panel-heading {
        border-color: #3f67af !important;
        color: black;
    }*/


/** panel per macro tipo "Moduli Regionali" **/
.panel-13 {
    border-color: #00AEEF !important;
    border: 3px solid transparent;
}

    .panel-13 .panel-heading {
        border-color: #00AEEF !important;
        color: black;
    }

/** panel per macro tipo "Moduli Covid" **/
.panel-14 {
    border-color: #00AEEF !important;
    border: 3px solid transparent;
}

    .panel-14 .panel-heading {
        border-color: #00AEEF !important;
        color: black;
    }

/** panel per macro tipo "Moduli ERDIS" **/
.panel-16 {
    border-color: #e51b20 !important;
    border: 3px solid transparent;
}

    .panel-16 .panel-heading {
        border-color: #e51b20 !important;
        color: black;
    }

/** panel per macro tipo "trasporti" **/
.panel-6 {
    border-color: #b24f9e !important;
    border: 3px solid transparent;
}

    .panel-6 .panel-heading {
        border-color: #b24f9e !important;
        color: black;
    }

    /**panel documenti**/
    .panel-1 .panel-heading, .panel-2 .panel-heading, .panel-3 .panel-heading, .panel-5 .panel-heading, .panel-6 .panel-heading, .panel-7 .panel-heading, .panel-8 .panel-heading, .panel-9 .panel-heading, .panel-10 .panel-heading, .panel-13 .panel-heading {
        min-height: 200px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .panel-1 .panel-body, .panel-2 .panel-body, .panel-3 .panel-body, .panel-5 .panel-body, .panel-6 .panel-body, .panel-7 .panel-body, .panel-8 .panel-body, .panel-9 .panel-body, .panel-10 .panel-body, .panel-13 .panel-body {
        padding-right: 10px;
        padding-left: 10px;
        min-height: 160px;
        position: relative;
    }

    .panel-1 .bottone-fondo, .panel-2 .bottone-fondo, .panel-3 .bottone-fondo, .panel-5 .bottone-fondo, .panel-6 .bottone-fondo, .panel-7 .bottone-fondo, .panel-8 .bottone-fondo, .panel-9 .bottone-fondo, .panel-11 .bottone-fondo, .panel-13 .bottone-fondo {
        position: absolute;
        bottom: 15px;
        right: 15px;
    }

/** panel per macro tipo "Progressioni di carriera" **/
.panel-18 {
    border-color: #7d7d7d !important;
    border: 3px solid transparent;
}

    .panel-18 .panel-heading {
        border-color: #7d7d7d !important;
        color: black;
    }

.opaco {
    opacity: 0.7;
}

/*NAVS GIUSTO*/
.navGiusto > li.active > a, .navGiusto > li.active > a:focus, .navGiusto > li.active > a:hover {
    background-color: #ddd;
    color: black;
    border: 1px solid lightgray;
    /*border: 1px solid #6E6C71;*/
}

/*SIDEBAR LATERALE (utilizzato in InfoSviluppo)*/
.affix-top {
    position: relative;
}

.affix {
    top: 60px;
}

.sidebarGiusto > li > a {
    display: block;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #767676;
}

.sidebarGiusto > a {
    display: block;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: 500;
}

.sidebarGiusto > li.active > a, .sidebarGiusto > li.active > a:focus, .sidebarGiusto > li.active > a:hover {
    background-color: rgb(249, 112, 0);
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: rgb(249, 112, 0);
}

.dropdown-menu {
    min-width: auto;
}

/*JUMBOTRON*/
.jumbotron > h1, .jumbotron > h2, .jumbotron > h3, .jumbotron > h4 {
    color: rgb(249, 112, 0);
    text-align: center;
}

.titoloGiusto {
    color: rgb(249, 112, 0);
    text-align: center;
}

/*BLOCCO DI CODICE*/
.indent {
    text-indent: 40px;
}

.btn-CohesionWork {
    background-color: #f97000;
    color: #fff;
    border-color: #f97000;
}

/*BOTTONI BOOTSTRAP CIRCOLARI*/
.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

    .btn-circle.btn-lg {
        width: 50px;
        height: 50px;
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 25px;
    }

    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        font-size: 24px;
        line-height: 1.33;
        border-radius: 35px;
    }

.DocAlertBlack {
    width: 20px;
    padding: 10px;
    border-radius: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*ICONE*/
.size-2x {
    font-size: 2em;
}

.size-3x {
    font-size: 3em;
}

.size-4x {
    font-size: 4em;
}

/*DATEPICKER*/
.ui-datepicker {
    z-index: 99998 !important;
}

/*CHECKBOX*/
.has-warning .cbx-active {
    border-color: #F39C12 !important;
    color: #F39C12 !important;
}

    .has-warning .cbx-active:focus, .has-warning .cbx-active:hover {
        border-color: #F39C12 !important;
    }

/*FIELDSET*/
.fieldset {
    /*border: 1px groove #6E6C71 !important;*/
    border: 1px groove lightgray !important;
    border-radius: 4px;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}

.legend {
    width: inherit; /* Or auto */
    padding: 0 10px; /* To give a bit of padding on the left and right */
    border-bottom: none;
    color: #6E6C71;
}

.divGiallo {
    background-color: #FCF8E3;
    padding: 20px 0px 0px;
    border-color: #F0AD4E;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
}

.DocProgress {
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    text-decoration: none;
    text-align: center;
    color: white;
    border-radius: 50%;
    display: block;
    height: 5px;
    width: 5px;
    line-height: 20px;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid black;
}

/*LIST boootstrap*/
.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-center {
    display: table;
    margin: 0 auto;
}

.list-inline-block > li {
    display: inline-block;
}

.list-horizontal > li,
.list-inline > li {
    float: left;
    margin-right: 10px;
    padding: 0;
    display: block;
}

    .list-horizontal > li:last-child,
    .list-inline > li:last-child {
        margin-right: 0;
    }

.list-horizontal.list-border > li,
.list-inline.list-border > li {
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid rgba(0,0,0,0.13);
}

    .list-horizontal.list-border > li:last-child,
    .list-inline.list-border > li:last-child {
        margin-right: 0;
        padding-right: 0;
        border: none;
    }

.list-horizontal:after,
.list-inline:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.LiRiquadro {
    margin-right: 25px;
    border: 2px solid lightgray;
    /*border: 2px solid #e6e6e6;*/
    text-align: center;
    padding: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

/*delete icon di TIMELINE VIS per passi delle profilature*/
.vis-item .vis-delete {
    background: url(/Immagini/Delete16.png) center no-repeat !important;
    top: 0 !important;
    right: 0 !important;
}

/*Paginazione datatable*/
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: auto !important;
}

.dataTables_processing {
    color: #31708f !important;
    background-color: #d9edf7 !important;
    border-color: #bce8f1 !important;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    z-index: 110;
}

/*VISUALIZZAZIONE SCHERMO PICCOLO*/
@media (max-width: 480px) {
    .container-fluid, #pagina, .panel-body:not(.documento) {
        padding: 0 !important;
    }

    /*#home-banner {
        display: none;
    }*/

    .icona-xs-center {
        text-align: center;
    }
}

.LabelRiepilogoDoc {
    /*font-weight: bold; */
    font-size: medium;
    color: black;
}


.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    font: 32px Arial, sans-serif;
}

.alert-warning-dashboard {
    color: black;
    font-size: large;
    font-weight: bold;
    margin-top: 20px;
}


.alert-danger-dashboard {
    color: white;
    font-size: large;
    font-weight: bold;
    margin-top: 20px;
    background-color: #f00;
    border-color: #f00;
}

/*Accordion*/

/*a:hover, a:focus {
    text-decoration: none;
    outline: none;
}

#accordion {
    border: 2px solid #2C546B;
    border-radius: 20px;
    overflow: hidden;
}

    #accordion .panel {
        border: none;
        border-bottom: 2px solid #2C546B;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
    }

        #accordion .panel:last-child {
            border-bottom: none;
        }

    #accordion .panel-heading {
        padding: 0;
        border: none;
    }

    #accordion .panel-title a {
        display: block;
        padding: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        background: #2C546B;
        text-align: left;
        border: none;
        border-radius: 0;
        position: relative;
        transition: all 0.3s ease 0s;
    }

        #accordion .panel-title a.collapsed {
            background: #fff;
            color: #2C546B;
        }

            #accordion .panel-title a.collapsed:hover {
                background: #2C546B;
                color: #fff;
            }

            #accordion .panel-title a:after,
            #accordion .panel-title a.collapsed:after {
                content: "\f107";
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                font-size: 25px;
                color: #fff;
                position: absolute;
                top: 17px;
                left: 20px;
                transition: all 0.3s ease-in-out 0s;
            }

            #accordion .panel-title a.collapsed:after {
                content: "\f106";
                color: #2C546B;
            }

            #accordion .panel-title a.collapsed:hover:after {
                color: #fff;
            }

    #accordion .panel-body {
        padding: 20px;
        border: none;
        font-size: 14px;
        line-height: 25px;
    }*/

.tooltip-inner {
  max-width: 800px !important; 
  font-size: 12px;             
  padding: 10px;               /* opzionale: più spazio interno */
}