/* [v] 1.1 - 24/02/2024 [/v] */

/* ---------------------------------------------------------- */
/* Elementi */
/* ---------------------------------------------------------- */

a:link,
a:visited {
    color: var(--primario);
}

ul {
    display: inline-block;
}

li > ul {
    display: block;
}

p {
    margin: 0px;
    padding: 0px;
    float: left;
}

span {
    margin: 0px;
    padding: 0px;
}

/* ---------------------------------------------------------- */
/* Override */
/* ---------------------------------------------------------- */

.float-left {
    float: left !important;
}

.float-unset {
    float: unset !important;
}

.float-right {
    float: right !important;
}

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

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

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

.m-0 {
    margin: 0px !important;
}

.m-t-0 {
    margin-top: 0px !important;
}

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

.m-b-0 {
    margin-bottom: 0px !important;
}

.m-l-auto {
    margin-left: auto !important;
}

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

.m-10 {
    margin: 10px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

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

.m-b-10 {
    margin-bottom: 10px !important;
}

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

.m-15 {
    margin: 15px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-r-auto {
    margin-right: auto !important;
}

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

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

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

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

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

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

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

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

.m-50 {
    margin: 50px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

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

.m-b-50 {
    margin-bottom: 50px !important;
}

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

.m-r-5-p {
    margin-right: calc(5% + 15px) !important;
}

.m-r-10-p {
    margin-right: calc(10% + 15px) !important;
}

.m-r-15-p {
    margin-right: calc(15% + 15px) !important;
}

.m-r-20-p {
    margin-right: calc(20% + 15px) !important;
}

.m-r-25-p {
    margin-right: calc(25% + 15px) !important;
}

.m-r-30-p {
    margin-right: calc(30% + 15px) !important;
}

.m-r-33-p {
    margin-right: calc(33.333% + 15px) !important;
}

.m-r-40-p {
    margin-right: calc(40% + 15px) !important;
}

.m-r-50-p {
    margin-right: calc(50% + 15px) !important;
}

.m-r-60-p {
    margin-right: calc(60% + 15px) !important;
}

.m-r-70-p {
    margin-right: calc(70% + 15px) !important;
}

.m-r-80-p {
    margin-right: calc(80% + 15px) !important;
}

.m-r-90-p {
    margin-right: calc(90% + 15px) !important;
}

.m-l-5-p {
    margin-left: calc(5% + 15px) !important;
}

.m-l-10-p {
    margin-left: calc(10% + 15px) !important;
}

.m-l-15-p {
    margin-left: calc(15% + 15px) !important;
}

.m-l-20-p {
    margin-left: calc(20% + 15px) !important;
}

.m-l-25-p {
    margin-left: calc(25% + 15px) !important;
}

.m-l-30-p {
    margin-left: calc(30% + 15px) !important;
}

.m-l-33-p {
    margin-left: calc(33.333% + 15px) !important;
}

.m-l-40-p {
    margin-left: calc(40% + 15px) !important;
}

.m-l-50-p {
    margin-left: calc(50% + 15px) !important;
}

.m-l-60-p {
    margin-left: calc(60% + 15px) !important;
}

.m-l-70-p {
    margin-left: calc(70% + 15px) !important;
}

.m-l-80-p {
    margin-left: calc(80% + 15px) !important;
}

.m-l-90-p {
    margin-left: calc(90% + 15px) !important;
}

.p-0 {
    padding: 0px !important;
}

.p-t-0 {
    padding-top: 0px !important;
}

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

.p-b-0 {
    padding-bottom: 0px !important;
}

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

.p-10 {
    padding: 10px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

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

.p-b-10 {
    padding-bottom: 10px !important;
}

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

.p-15 {
    padding: 15px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

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

.p-b-15 {
    padding-bottom: 15px !important;
}

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

.p-20 {
    padding: 20px !important;
}

.p-t-20 {
    padding-top: 20px !important;
}

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

.p-b-20 {
    padding-bottom: 20px !important;
}

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

.p-50 {
    padding: 50px !important;
}

.p-t-50 {
    padding-top: 50px !important;
}

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

.p-b-50 {
    padding-bottom: 50px !important;
}

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

/* ---------------------------------------------------------- */
/* Notifiche */
/* ---------------------------------------------------------- */

#notifiche_lista {
    height: auto;
    width: auto;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 999999;
    /* Disabilita selezione testo */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

#notifiche_lista[priorita="alta"] {
    background-color: rgba(0, 0, 0, 0.8);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    left: 0 !important;
    bottom: 0 !important;
}

.notifica_container {
    background-color: var(--primario);
    height: auto;
    min-height: 50px;
    width: auto;
    min-width: 100px;
    color: #ffffff;
    border: 1px solid var(--primario);
    border-radius: var(--border_radius);
    padding: 15px 15px 15px 15px;
    margin: 30px 20px 0px 0px;
    opacity: 0;
    clear: both;
    float: right;
    position: relative;
    /* Bordi Interni */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: var(--ombra);
    transition: opacity 0.2s;
}

.notifica_container > i {
    width: 30px;
    height: 30px;
    line-height: 28px;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    color: inherit;
    margin: 0px 0px 0px 0px;
    border-radius: 50%;
    float: left;
}

.notifica_container > i:nth-child(3) {
    cursor: pointer;
}

.notifica_container > h3 {
    width: calc(100% - 100px);
    height: 30px;
    line-height: 26px;
    color: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0px 20px 0px 20px !important;
    float: left;
}

.notifica_container > h3 > span {
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 200;
    color: inherit;
    margin: 0px 0px 0px 15px;
    float: right;
}

.notifica_container > button {
    background-color: transparent;
    width: 100%;
    height: auto;
    color: inherit;
    text-align: left;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    padding: 20px 0px 0px 0px;
    border: none;
    border-top: 1px solid var(--primario_accent);
    clear: both;
    float: left;
    cursor: pointer;
}

.notifica_container > button:disabled {
    cursor: default;
}

/* ---------------------------------------------------------- */
/* Colonne */
/* ---------------------------------------------------------- */

.separatore {
    background-color: var(--input_bordi);
    width: 100%;
    height: 1px;
    margin: calc(var(--riga_margin-bottom) * 2) 0px calc(var(--riga_margin-bottom) * 2) 0px;
    float: left;
}

.clear {
    width: 100%;
    height: 0px;
    float: left;
}

.riga {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-bottom: var(--riga_margin-bottom);
    display: flex; /* TEST */
    align-items: inherit; /* TEST */
    justify-content: center; /* TEST */
    float: left;
}

.riga:last-child {
    margin-bottom: 0px;
}

.colonna {
    margin-left: 15px;
    margin-right: 15px;
    float: left;
}

.col-10 {
    width: calc(10% - 30px) !important;
}

.col-15 {
    width: calc(15% - 30px) !important;
}

.col-20 {
    width: calc(20% - 30px) !important;
}

.col-25 {
    width: calc(25% - 30px) !important;
}

.col-30 {
    width: calc(30% - 30px) !important;
}

.col-33 {
    width: calc(33.333% - 30px) !important;
}

.col-40 {
    width: calc(40% - 30px) !important;
}

.col-50 {
    width: calc(50% - 30px) !important;
}

.col-60 {
    width: calc(60% - 30px) !important;
}

.col-70 {
    width: calc(70% - 30px) !important;
}

.col-80 {
    width: calc(80% - 30px) !important;
}

.col-90 {
    width: calc(90% - 30px) !important;
}

.col-100 {
    width: calc(100% - 30px) !important;
    overflow: unset !important;
}

.w-auto {
    width: auto !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-30 {
    width: 30% !important;
}

.w-33 {
    width: 33.333% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}

/* ---------------------------------------------------------- */
/* Card */
/* ---------------------------------------------------------- */

.card {
    background-color: #ffffff;
    width: 100%;
    height: auto;
    min-height: 30px;
    margin-bottom: 25px;
    padding: 0px;
    border: 1px solid var(--colore_bordi);
    border-radius: var(--border_radius);
    box-shadow: var(--ombra);
    overflow-y: auto;
    display: flex; /* TEST */
    align-items: center; /* TEST */
    flex-direction: column; /* TEST */
    float: left;
}

.card_header {
    width: 100%;
    height: auto;
    color: var(--titolo);
    border-bottom: 1px solid var(--colore_bordi);
    padding: 15px 25px 15px 25px;
    display: flex;
    align-items: center;
    justify-content: left;
    float: left;
}

.card_header > i {
    width: 30px;
    height: auto;
    font-size: 20px;
    text-align: center;
    margin-right: 15px;
    float: left; 
}

.card_header > h2 {
    width: auto;
    height: auto;
    color: inherit;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    margin: 0px;
    float: left; 
}

.card_body {
    width: 100%;
    height: auto;
    padding: 25px 25px 25px 25px;
    float: left;
}

.card_footer {
    width: 100%;
    height: auto;
    border-top: 1px solid var(--colore_bordi);
    padding: 15px 25px 15px 25px;
    text-align: right;
    margin-top: auto; /* TEST */
    float: left;
}

/* ---------------------------------------------------------- */
/* Tabs */
/* ---------------------------------------------------------- */

.card_tabs {
    width: 100%;
    height: auto;
    color: var(--titolo);
    border-bottom: 1px solid var(--colore_bordi);
    padding: 15px 25px 0px 25px;
    margin: 0px;
    list-style-type: none; 
    display: flex;
}

.card_tabs li {
    height: 50px;
    line-height: 50px;
    font-weight: 400;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0px 0px 0px 0px;
    border-bottom: 4px solid transparent;
    flex-grow: 1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.card_tabs li i {
    height: 50px;
    line-height: 50px;
    margin-right: 15px;
}

.card_tabs .tab_selezionata {
    color: var(--primario);
    border-color: var(--primario);
    transition: all 0.3s;
}

.tabs_full {
    border-bottom: none;
}

.tabs_full li {
    border-color: #ffffff;
    border-radius: var(--input_border_radius);
    border: 1px solid transparent;
}

.tabs_full .tab_selezionata {
    background-color: var(--primario);
    color: var(--primario_testo);
    border: 1px solid var(--colore_bordi);
    transition: all 0.3s;
}

.tabs_border li {
    border-color: #ffffff;
    border: 1px solid transparent;
    border-bottom-color: var(--colore_bordi);
    margin-bottom: -1px;
}

.tabs_border .tab_selezionata {
    color: var(--primario);
    border: 1px solid var(--colore_bordi);
    border-bottom-color: #ffffff;
    border-top-right-radius: var(--input_border_radius);
    border-top-left-radius: var(--input_border_radius);
    transition: all 0.3s;
}

.card_tabs_body {
    width: 100%;
    height: auto;
    padding: 25px 25px 25px 25px;
    float: left;
    display: none;
}

.card_tab_selezionata {
    display: inherit;
}

/* ---------------------------------------------------------- */
/* Tabs nascoste */
/* ---------------------------------------------------------- */

.tab_nascosta {
    width: 100%;
    max-height: 0px;
    color: transparent;
    border: 1px solid transparent;
    border-radius: var(--input_border_radius);
    overflow: hidden;
    transition: max-height 0.1s ease-out;
    float: left;
}

.tab_nascosta_visibile {
    background-color: #ffffff;
    color: var(--titolo);
    border-color: var(--input_bordi);
}

.tab_nascosta_visibile[tipo="blu"] {
    background-color: var(--blu_background);
    border-color: var(--blu_bordo);
    color: var(--blu_testo);
}

/* ---------------------------------------------------------- */
/* Accordion */
/* ---------------------------------------------------------- */

.accordion_container {
    background-color: #ffffff;
    width: 100%;
    height: auto;
    min-height: 30px;
    border: 1px solid var(--colore_bordi);
    border-bottom: none;
    border-radius: var(--border_radius);
    margin-bottom: 25px;
    padding: 0px;
    box-shadow: var(--ombra);
    overflow: hidden;
    float: left;
}

.accordion {
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--colore_bordi);
    float: left;
    overflow: hidden;
    position: relative;
}

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

.accordion_header {
    width: 100%;
    font-weight: 400;
    color: var(--titolo);
    padding: 0px var(--pagina_padding_h) 0px var(--pagina_padding_h);
    cursor: pointer;
    float: left;
    user-select: none;
}

.accordion_header::before {
    content: '\f078';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    width: 25px;
    height: 60px;
    line-height: 60px;
    color: var(--titolo);
    float: right;
    transition: rotate 0.15s ease-in-out;
}

.accordion_container[tipo="slim"] .accordion_header, .accordion_container[tipo="slim"] .accordion_header::before {
    height: 50px;
    line-height: 50px;
}

.accordion_container[tipo="medium"] .accordion_header, .accordion_container[tipo="medium"] .accordion_header::before {
    height: 70px;
    line-height: 70px;
}

.accordion_tab {
    background-color: #f9f9f9;
    width: 100%;
    height: auto;
    max-height: 0;
    float: left;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
}

.accordion_visibile .accordion_header::before {
    rotate: 180deg;
}

.accordion_visibile .accordion_tab {
    border-top: 1px solid var(--colore_bordi);
}

.accordion_pulsanti {
    height: 45px !important;
    min-height: unset;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
    margin: 0px;
    top: 12.5px;
    right: calc(calc(25px + calc(var(--pagina_padding_h) * 2)));
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.accordion_pulsanti .pulsante {
    height: 45px;
    line-height: 0;
    padding: 0px 15px 0px 15px;
}

/* ---------------------------------------------------------- */
/* Temi */
/* ---------------------------------------------------------- */

.tema_blu {
    background-color: var(--blu_background) !important;
    color: var(--blu_testo) !important;
    border-color: var(--blu_bordo) !important;
}

.tema_verde {
    background-color: var(--verde_background) !important;
    color: var(--verde_testo) !important;
    border-color: var(--verde_bordo) !important;
}

.tema_arancione {
    background-color: var(--arancione_background) !important;
    color: var(--arancione_testo) !important;
    border-color: var(--arancione_bordo) !important;
}

.tema_rosso{
    background-color: var(--rosso_background) !important;
    color: var(--rosso_testo) !important;
    border-color: var(--rosso_bordo) !important;
}

/* ---------------------------------------------------------- */
/* Widget */
/* ---------------------------------------------------------- */

.widget {
    padding: 25px;
    float: left;
    position: relative;
    overflow: hidden;
}

.widget > div:nth-child(1) {
    width: 100%;    
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    position: relative;
    z-index: 999;
}

.widget > div > div {
    width: 100%;
}

.widget > div:nth-child(2){
    margin-top: 25px;
}

.widget > i {
    position: absolute;
    font-size: 100px;
    top: 0px;
    right: 0px;
    opacity: 0.1;
}

.widget p {
    width: 100%;
    font-weight: 600;
    color: var(--titolo);
    float: left;
}

.widget span {
    width: 100%;
    color: var(--sottotesto);
    float: left;
}

.widget h2 {
    width: 100%;
    height: auto;
    line-height: 1;
    text-align: left;
    font-weight: 600;
    font-size: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0px;
}

.widget h3 {
    width: 100%;
    height: auto;
    line-height: 1;
    text-align: right;
    font-weight: 600;
    font-size: 42px;
    margin: 0px;
}

/*  Colore Testo */
.widget[colore="blu"] h3,
.widget[colore="blu"] h2 {
    color: var(--blu_accent);
}

.widget[colore="verde"] h3,
.widget[colore="verde"] h2 {
    color: var(--verde_accent);
}

.widget[colore="arancione"] h3,
.widget[colore="arancione"] h2 {
    color: var(--arancione_accent);
}

.widget[colore="rosso"] h3,
.widget[colore="rosso"] h2 {
    color: var(--rosso_accent);
}

/* Colore background */
.widget[colore="blu_bg"] {
    background-image: linear-gradient(to top,#106ae0 0%,#54b1f8 100%);
}

.widget[colore="blu_bg"] h3,
.widget[colore="blu_bg"] h2,
.widget[colore="blu_bg"] p,
.widget[colore="blu_bg"] span {
    color: #ffffff;
}

.widget[colore="verde_bg"] {
    background-image: linear-gradient(to top,#0ba360 0%,#3cba92 100%);
}

.widget[colore="verde_bg"] h3,
.widget[colore="verde_bg"] h2,
.widget[colore="verde_bg"] p,
.widget[colore="verde_bg"] span {
    color: #ffffff;
}

.widget[colore="arancione_bg"] {
    background-image: linear-gradient(to top,#e0a810 0%,#f8d754 100%);
}

.widget[colore="arancione_bg"] h3,
.widget[colore="arancione_bg"] h2,
.widget[colore="arancione_bg"] p,
.widget[colore="arancione_bg"] span {
    color: #ffffff;
}

.widget[colore="rosso_bg"] {
    background-image: linear-gradient(to top,rgb(210, 59, 59) 0%,#f85454 100%);
}

.widget[colore="rosso_bg"] h3,
.widget[colore="rosso_bg"] h2,
.widget[colore="rosso_bg"] p,
.widget[colore="rosso_bg"] span {
    color: #ffffff;
}
















/*
.widget {
    background-color: #ffffff;
    width: auto;
    height: auto;
    padding: 25px;
    border: 1px solid var(--colore_bordi);
    border-radius: var(--border_radius);
    box-shadow: var(--ombra);
    position: relative;
    float: left;
}

.widget_icona_lato > i{
    position: absolute;
    right: 0px;
    top: calc(50% - 40px);
    font-size: 80px;
    opacity: 0.2;
}

.widget_icona > i {
    background-color: inherit;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    position: absolute;
    font-size: 30px;
    border-radius: 50%;
    top: -30px;
    left: calc(50% - 30px);
}

.widget[colore="blu"] {
    background: -webkit-gradient(linear,left top,right top,from(#167eaa),to(var(--blu_accent)));
    background: linear-gradient(to right,#167eaa,var(--blu_accent));
}

.widget[colore="verde"] {
    background: -webkit-gradient(linear,left top,right top,from(#21b577),to(var(--verde_accent)));
    background: linear-gradient(to right,#21b577,var(--verde_accent));
}

.widget[colore="arancione"] {
    background: -webkit-gradient(linear,left top,right top,from(#ff753a),to(#fd9163));
    background: linear-gradient(to right,#ff753a, #fd9163);
}

.widget[colore="rosso"] {
    background: -webkit-gradient(linear,left top,right top,from(var(--rosso_accent)),to(#fe5d70));
    background: linear-gradient(to right,var(--rosso_accent),#fe5d70);
}

.widget_icona[colore="blu"] > i {
    background: -webkit-gradient(linear,left top,right top,from(#167eaa),to(var(--blu_accent)));
    background: linear-gradient(to right,#167eaa,var(--blu_accent));
}

.widget_icona[colore="verde"] > i {
    background: -webkit-gradient(linear,left top,right top,from(#21b577),to(var(--verde_accent)));
    background: linear-gradient(to right,#21b577,var(--verde_accent));
}

.widget_icona[colore="arancione"] > i {
    background: -webkit-gradient(linear,left top,right top,from(#ff753a),to(#fd9163));
    background: linear-gradient(to right,#ff753a, #fd9163);
}

.widget_icona[colore="rosso"] > i {
    background: -webkit-gradient(linear,left top,right top,from(var(--rosso_accent)),to(#fe5d70));
    background: linear-gradient(to right,var(--rosso_accent),#fe5d70);
}

.widget > p {
    width: 100%;
    height: auto;
    margin: 0px;
    float: left; 
}

.widget > h3 {
    width: 100%;
    height: auto;
    margin: 20px 0px 20px 0px;
    float: left;
}

.widget > span {
    width: 100%;
    height: auto;
    margin: 0px;
    float: left;
}*/

/* ---------------------------------------------------------- */
/* Progress Bar */
/* ---------------------------------------------------------- */

.progressbar {
    background-color: var(--input_background);
    width: 100%;
    height: auto;
    text-align: center;
    border-radius: var(--border_radius);
    border: 1px solid var(--input_bordi);
    box-shadow: var(--input_ombra);
    overflow: hidden;
    float: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.progressbar > div {
    background-color: var(--primario);
    width: 0%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: var(--primario_testo);
    border: 1px solid var(--primario_accent);
    border-radius: var(--border_radius);
    transition: all 0.3s ease-in-out;
    float: left;
}

.progressbar_secondario > div {
    background-color: var(--secondario_accent);
    color: var(--secondario_testo);
    border-color: var(--secondario_accent);
}

.progressbar_blu > div {
    background-color: var(--blu_accent);
    color: var(--blu_accent_testo);
    border-color: var(--blu_bordo);
}

.progressbar_verde > div {
    background-color: var(--verde_accent);
    color: var(--verde_accent_testo);
    border-color: var(--verde_bordo);
}

.progressbar_arancione > div {
    background-color: var(--arancione_accent);
    color: var(--arancione_accent_testo);
    border-color: var(--arancione_bordo);
}

.progressbar_rosso > div {
    background-color: var(--rosso_accent);
    color: var(--rosso_accent_testo);
    border-color: var(--rosso_bordo);
}

.progressbar[size="S"] > div {
    height: 7px;
    line-height: 7px;
    font-size: 0px;
}

.progressbar[size="L"] > div {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}

.progressbar[animazione="true"] > div {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1rem, #ffffff1e 1rem, #ffffff1e 2rem);
    background-size: 200% 200%;
    animation: progressbar 10s linear infinite;
    font-weight: 700;
}

@keyframes progressbar {
    100% {
        background-position: 100% 100%;
    }
}

/* ---------------------------------------------------------- */
/* Alert */
/* ---------------------------------------------------------- */

.alert {
    background-color: var(--blu_background);
    width: 100%;
    height: auto;
    min-height: 56px;
    color: var(--blu_testo);
    border: 1px solid var(--blu_bordo);
    border-radius: var(--border_radius);
    padding: 15px 15px 15px 75px;
    float: left;
    position: relative;
    opacity: 0;
    display: none;
    transition: all 0.1s;
}

.alert_on {
    opacity: 1;
}

.alert > h4 {
    line-height: 1;
    color: inherit;
    font-weight: 400;
}

.alert .alert_descr {
    width: 100%;
    font-style: italic;
    font-size: 12px;
    margin-top: 5px;
    float: left;
}

.alert a:link, .alert a:visited {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.alert a:hover, .alert a:visited:hover {
    text-decoration: underline;
}

.alert::before {
    content: '';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: inherit;
    position: absolute;
    top: 15px;
    left: 25px;
}

.alert::before {
    content: '\f05a' !important;
}

.alert[tipo="conferma"] {
    background-color: var(--verde_background);
    color: var(--verde_testo);
    border-color: var(--verde_bordo);
}

.alert[tipo="conferma"]::before {
    content: '\f058' !important;
}

.alert[tipo="warning"] {
    background-color: var(--arancione_background);
    color: var(--arancione_testo);
    border-color: var(--arancione_bordo);
}

.alert[tipo="warning"]::before {
    content: '\f071' !important;
}

.alert[tipo="errore"] {
    background-color: var(--rosso_background);
    color: var(--rosso_testo);
    border-color: var(--rosso_bordo);
}

.alert[tipo="errore"]::before {
    content: '\f057' !important;
}

/* ---------------------------------------------------------- */
/* Pulsanti */
/* ---------------------------------------------------------- */

.pulsante {
    background-color: var(--primario);
    width: auto;
    height: auto;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 25px 10px 25px;
    color: var(--primario_testo);
    border: 1px solid var(--primario_accent);
    border-radius: var(--border_radius);
    box-shadow: 1px 1px 2px 1px rgb(71 85 95 / 10%);
    cursor: pointer;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pulsante_touch {
    width: 180px;
    height: 180px;
    margin: 20px;
    padding: 20px;
    position: relative;
    float: left;
}

.pulsante_touch i {
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 28px;
    position: absolute;
    top: 50px;
    left: 25px;
    right: 25px;
}

.pulsante_touch span {
    width: auto;
    margin: 0px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 100px;
    left: 25px;
    right: 25px;
}

.pulsante_touch:active {
    transform: scale(0.97,0.97) !important;
}

.pulsante:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: unset;
}

.pulsante:disabled:hover {
    box-shadow: unset;
}

.pulsante:hover {
    box-shadow: 1px 1px 4px 2px rgb(71 85 95 / 15%);
}

.pulsante:disabled:active, .pulsante_touch:disabled:active {
    opacity: 0.6;
    box-shadow: unset;
    transform: unset !important;
}

.pulsante:active {
    opacity: 0.8;
    box-shadow: none;
    transform: scale(0.98,0.98);
}

.pulsante > span { 
    margin-left: 25px;
    float: right;
}

.pulsante_secondario {
    background-color: var(--secondario);
    color: var(--secondario_testo);
    border-color: var(--secondario);
}

.pulsante_bianco{
    background-color: #ffffff;
    color: var(--secondario);
    border-color: var(--colore_bordi);
}

.pulsante_blu {
    background-color: var(--blu_background);
    color: var(--blu_testo);
    border-color: var(--blu_bordo);
}

.pulsante_verde {
    background-color: var(--verde_background);
    color: var(--verde_testo);
    border-color: var(--verde_bordo);
}

.pulsante_arancione {
    background-color: var(--arancione_background);
    color: var(--arancione_testo);
    border-color: var(--arancione_bordo);
}

.pulsante_rosso {
    background-color: var(--rosso_background);
    color: var(--rosso_testo);
    border-color: var(--rosso_bordo);
}

/* ---------------------------------------------------------- */
/* Lista Tabella */
/* ---------------------------------------------------------- */

.lista_tabella {
    background-color: #ffffff;
    width: 100%;
    height: auto;
    list-style-type: none;
    color: var(--titolo);
    font-weight: 400;
    border: 1px solid var(--colore_bordi);
    border-radius: var(--border_radius);
    padding: 0px;
    float: left;
}

.lista_tabella > li {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid var(--colore_bordi);
    padding: 0px 10px 0px 10px;
    float: left;
}

.lista_tabella[selezione="true"] > li:hover {
    background-color: var(--colore_bordi);
}

.lista_tabella_titolo, .lista_tabella_titolo:hover {
    background-color: var(--secondario_accent);
    color: var(--secondario_testo);
}

.lista_conferma {
    background-color: var(--verde_background);
    color: var(--verde_testo);
}

.lista_warning {
    background-color: var(--arancione_background);
    color: var(--arancione_testo);
}

.lista_errore {
    background-color: var(--rosso_background);
    color: var(--rosso_testo);
}

.lista_tabella > li:first-child {
    border-radius: var(--border_radius) var(--border_radius) 0px 0px;
}

.lista_tabella > li:last-child {
    border-bottom: none;
}

.lista_tabella > li > .badge {
    height: 25px;
    line-height: 23px;
    margin-top: 10px;
    float: right;
}

.lista_tabella > li > .pulsante {
    width: auto;
    height: 35px;
    aspect-ratio: 1/1;
    font-size: 16px;
    line-height: 23px;
    margin: 5px 0px 0px 15px;
    box-shadow: none;
    padding: 0px;
    float: right;
}

.lista_tabella_pulsante {
    background-color: transparent;
    width: calc(100% + 20px);
    height: inherit;
    line-height: inherit;
    text-align: left;
    font-size: inherit;
    color: var(--titolo) !important;
    font-weight: 400;
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 0px 10px 0px 10px;
    margin-left: -10px;
    float: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lista_tabella > li:first-child > .lista_tabella_pulsante {
    border-radius: var(--border_radius) var(--border_radius) 0px 0px;
}

.lista_tabella > li:last-child > .lista_tabella_pulsante {
    border-radius: 0px 0px var(--border_radius) var(--border_radius);
}

.lista_tabella > li > .lista_tabella_pulsante:hover {
    background-color: var(--secondario_accent);
    color: var(--secondario_testo) !important;
}

/* ---------------------------------------------------------- */
/* Tabella */
/* ---------------------------------------------------------- */

.tabella {
    width: 100%;
    height: auto;
    min-height: 30px;
    padding: 0px;
    overflow-y: auto;
    float: left;
    display: table !important;
}

.tabella.v-top .tabella_colonna {
    vertical-align: top;
}

.tabella_riga {
    display: table-row !important;
}

.tabella_titoli * {
    color: var(--titolo);
    text-transform: uppercase;
    font-weight: 600 !important;
    position: relative;
}

.tabella_footer {
    background-color: white;
    width: 100%;
    color: var(--sottotesto);
    font-weight: 300;
    border-top: 1px solid var(--colore_bordi);
    padding: 0px 25px 0px 25px;
    float: left;
}

.tabella_colonna {
    color: var(--sottotesto);
    font-weight: 300;
    border-bottom: 1px solid var(--colore_bordi);
    padding: 15px 25px 15px 25px;
    vertical-align: middle;
    display: table-cell;
}

.tabella_colonna input {
    height: calc(var(--input_altezza) / 1.2) !important;
    font-size: calc(var(--input_font-size) / 1) !important;
    margin: 0px;
}

.tabella_colonna .input_container {
    height: calc(var(--input_altezza) / 1.2) !important;
    font-size: calc(var(--input_font-size) / 1) !important;
    margin: 0px;
}

.tabella_colonna .check_radio {
    margin-top: calc(var(--input_altezza) / 6);
}

.tabella_colonna select {
    background-position-y: calc(calc(var(--input_altezza) / 2) - 16px);
    height: calc(var(--input_altezza) / 1.2) !important;
    font-size: calc(var(--input_font-size) / 1) !important;
    margin: 0px;
}

.tabella_colonna input:read-only {
    color: var(--sottotesto);
}

.tabella_riga:last-child .tabella_colonna {
    border: none;
}

.tabella_riga:nth-child(even) .tabella_colonna {
    /*background-color: var(--colore_bordi);*/
    background-color: inherit;
}

.tabella_colonna > .pulsante {
    width: auto;
    height: 35px;
    aspect-ratio: 1/1;
    font-size: 16px;
    line-height: 23px;
    margin: 0px 0px 0px 15px;
    box-shadow: none;
    padding: 0px;
    float: right;
}

.tabella[selezione="true"] .tabella_riga:hover .tabella_colonna {
    background-color: var(--colore_bordi);
}

.tabella[selezione="true"] .tabella_titoli:hover .tabella_colonna {
    background-color: transparent !important;
}

/* ---------------------------------------------------------- */
/* Paginazione */
/* ---------------------------------------------------------- */

.pagination, .pagination_minimal {
    width: auto;
    list-style-type: none;
    padding: 0px;
    margin: 25px 0px 25px 0px;
    display: inline-block;
}

.pagination_minimal {
    border: 1px solid var(--colore_bordi);
    border-radius: var(--input_border_radius);
}

.pagination li, .pagination_minimal li {
    background-color: #ffffff;
    width: calc(var(--input_altezza) / 1.5);
    height: calc(var(--input_altezza) / 1.5);
    line-height: calc(var(--input_altezza) / 1.5);
    color: var(--titolo);
    text-align: center;
    font-weight: 400;
    padding: 0px;
    margin: 0px 10px 0px 10px;
    cursor: pointer;
    display: inline-block;
    border-radius: calc(var(--input_border_radius) / 1.5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pagination_minimal li {
    background-color: transparent;
    width: var(--input_altezza);
    height: var(--input_altezza);
    line-height: calc(var(--input_altezza) + 2px);
    border-radius: 0px;
    border-right: 1px solid var(--colore_bordi);
    padding: 0px;
    margin: 0px;
}

.pagination_minimal li:last-child {
    border-right: 0px;
    border-top-right-radius: calc(var(--input_border_radius) / 1.5);
    border-bottom-right-radius: calc(var(--input_border_radius) / 1.5);
}

.pagination_minimal li:first-child {
    border-top-left-radius: calc(var(--input_border_radius) / 1.5);
    border-bottom-left-radius: calc(var(--input_border_radius) / 1.5);
}

.pagination li > .fa-ellipsis-h, .pagination_minimal li > .fa-ellipsis-h {
    opacity: 0.7;
}

.pagination li:hover, .pagination_minimal li:hover {
    background-color: var(--primario_accent);
    color: var(--primario_testo) !important;
}

.pagination > .pagination_selezione {
    background-color: var(--primario) !important;
    color: var(--primario_testo) !important;
}

.pagination_minimal > .pagination_selezione {
    background-color: var(--primario) !important;
    color: var(--primario_testo) !important;
}

/* ---------------------------------------------------------- */
/* Badges */
/* ---------------------------------------------------------- */

.badge {
    background-color: var(--input_background);
    width: auto;
    height: 35px;
    line-height: 33px;
    color: var(--titolo);
    text-align: center;
    padding: 0px 15px 0px 15px;
    border-radius: 15px;
    border: 1px solid #d7d9dc;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    float: left;
}

.badge[tipo="primario"] {
    background-color: var(--primario);
    color: var(--primario_testo);
    border-color: var(--primario_accent);
}

.badge[tipo="secondario"] {
    background-color: var(--secondario);
    color: var(--secondario_testo);
    border-color: var(--secondario);
}

.badge[tipo="blu"] {
    background-color: var(--blu_background);
    color: var(--blu_testo);
    border-color: var(--blu_bordo);
}

.badge[tipo="verde"] {
    background-color: var(--verde_background);
    color: var(--verde_testo);
    border-color: var(--verde_bordo);
}

.badge[tipo="arancione"] {
    background-color: var(--arancione_background);
    color: var(--arancione_testo);
    border-color: var(--arancione_bordo);
}

.badge[tipo="rosso"] {
    background-color: var(--rosso_background);
    color: var(--rosso_testo);
    border-color: var(--rosso_bordo);
}

.badge[tipo="grafici_0"] {
    background-color: var(--grafici_0);
    color: #ffffff;
    border-color: var(--grafici_0);
}
.badge[tipo="grafici_1"] {
    background-color: var(--grafici_1);
    color: #ffffff;
    border-color: var(--grafici_1);
}
.badge[tipo="grafici_2"] {
    background-color: var(--grafici_2);
    color: #ffffff;
    border-color: var(--grafici_2);
}
.badge[tipo="grafici_3"] {
    background-color: var(--grafici_3);
    color: #ffffff;
    border-color: var(--grafici_3);
}
.badge[tipo="grafici_4"] {
    background-color: var(--grafici_4);
    color: #ffffff;
    border-color: var(--grafici_4);
}
.badge[tipo="grafici_5"] {
    background-color: var(--grafici_5);
    color: #ffffff;
    border-color: var(--grafici_5);
}
.badge[tipo="grafici_6"] {
    background-color: var(--grafici_6);
    color: #ffffff;
    border-color: var(--grafici_6);
}
.badge[tipo="grafici_7"] {
    background-color: olivedrab;
    color: #ffffff;
    border-color: olivedrab;
}
.badge[tipo="grafici_8"] {
    background-color: navy;
    color: #ffffff;
    border-color: navy;
}
.badge[tipo="grafici_9"] {
    background-color: gray;
    color: #ffffff;
    border-color: gray;
}

/* ---------------------------------------------------------- */
/* Modal */
/* ---------------------------------------------------------- */

#modal {
    background-color: rgba(0, 0, 0, 0.8);
    width: auto;
    height: auto;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 999999;
    display: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.modal_container {
    background-color: #ffffff;
    height: auto;
    border: 1px solid var(--colore_bordi);
    border-radius: var(--border_radius);
    position: relative;
    top: -100%;
    opacity: 0;
    display: inline-block;
    transition: top 0.1s, opacity 0.3s;
}

.modal_container[misura="small"] {
    width: 500px;
    left: calc(50% - 250px);
}

.modal_container[misura="medium"] {
    width: 50%;
    left: 25%;
}

.modal_container[misura="full"] {
    width: 80%;
    height: 90%;
    left: 10%;
    bottom: 5%;
}

.modal_container[misura="full"] #modal_body {
    height: calc(100% - 173px);
    overflow-y: scroll;
}

.modal_on {
    opacity: 1 !important;
}

.modal_on[misura="small"], .modal_on[misura="medium"] {
    top: 10% !important;
}

.modal_on[misura="full"] {
    top: 5% !important;
}

#modal_header {
    width: 100%;
    height: auto;
    color: var(--titolo);
    border-bottom: 1px solid var(--colore_bordi);
    padding: 15px 25px 15px 25px;
    float: left;
}

.modal_avviso_conferma {
    background-color: var(--verde_background) !important;
    color: var(--verde_testo) !important;
    border-color: var(--verde_bordo) !important;
}

.modal_avviso_errore {
    background-color: var(--rosso_background) !important;
    color: var(--rosso_testo) !important;
    border-color: var(--rosso_bordo) !important;
}

#modal_icona {
    width: 30px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    text-align: center;
    margin-right: 15px;
    float: left; 
}

#modal_titolo {
    width: auto;
    height: 25px;
    line-height: 25px;
    color: inherit;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin: 0px;
    float: left; 
}

#modal_body {
    width: 100%;
    height: auto;
    margin: 25px 0px 25px 0px;
    padding: 0px 25px 0px 25px;
    float: left;
}

.modal_footer {
    width: 100%;
    height: auto;
    border-top: 1px solid var(--colore_bordi);
    padding: 15px 25px 15px 25px;
    text-align: right;
    float: left;
}

.modal_footer > .pulsante {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ---------------------------------------------------------- */
/* Form */
/* ---------------------------------------------------------- */

input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=color],
input[type=file],
select,
textarea {
    background-color: var(--input_text_background);
    width: 100%;
    height: var(--input_altezza);
    /*line-height: var(--input_altezza);*/
    text-align: left;
    font-size: var(--input_font-size);
    font-weight: 400;
    color: var(--input_testo);
    border-radius: var(--input_border_radius);
    border: 1px solid var(--input_bordi);
    outline-width: 0;
    outline: none;
    padding: 0px var(--input_padding) 0px var(--input_padding);
    box-shadow: var(--input_ombra);
    transition: all 0.2s ease-in-out;
}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
input[type=date]:disabled,
input[type=time]:disabled,
input[type=color]:disabled,
input[type=file]:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--input_disabled_background);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=color]:focus,
input[type=file]:focus,
select:focus,
textarea:focus {
    border-color: var(--input_focus_bordi);
    box-shadow: var(--input_ombra), var(--input_focus_ombra);
}

input[type=color] {
    padding: 10px;
}

.readonly:read-only,
.readonly:focus {
    background-color: transparent;
    border: none;
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: none !important;
}

select {
    /* Freccia */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 5px);
    background-position-y: calc(calc(var(--input_altezza) / 2) - 12px);
}

textarea {
    height: auto;
    line-height: normal !important;
    resize: vertical;
    padding: var(--input_padding);
    transition: resize 0.0s ease-in-out;
}

input[type=range] {
    background-color: var(--input_background);
    width: 100%;
    height: 10px;
    outline: none;
    margin-top: calc(calc(var(--input_altezza) / 2) - 5px) !important;
    margin-bottom: calc(calc(var(--input_altezza) / 2) - 12px) !important;
    border-radius: 20px;
    border: 1px solid var(--input_bordi);
    -webkit-appearance: none;
    appearance: none;
}

input[type=range]::-webkit-slider-thumb {
    background-color: var(--primario);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: var(--input_ombra);
}

input[type=range]:focus::-webkit-slider-thumb {
    border: 1px solid var(--primario_accent);
    box-shadow: var(--ombra), var(--input_focus_ombra);
}

input[type=range]::-moz-range-thumb {
    background-color: var(--primario);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: var(--input_ombra);
}

input[type=range]:focus::-moz-range-thumb {
    border: 1px solid var(--primario_accent);
    box-shadow: var(--ombra), var(--input_focus_ombra);
}

.input_side_label {
    width: auto !important;
    height: var(--input_altezza);
    line-height: var(--input_altezza);
    margin-bottom: 0px;
}

.range_container {
    padding-top: 40px;
    position: relative;
}

.range_container input {
    width: 100%;
}

.range_container label {
    /*background-color: var(--input_text_background);*/
    background-color: var(--primario);
    width: auto;
    min-width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: var(--input_font-size);
    font-weight: 400;
    /*color: var(--input_testo);*/
    color: var(--primario_testo);
    white-space: nowrap;
    border-radius: var(--input_border_radius);
    /*border: 1px solid var(--input_bordi);*/
    padding: 0px 10px 0px 10px;
    margin-left: 15px;
    box-shadow: var(--input_ombra);
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translateX(calc(-50% + 36.5px));
    pointer-events: none;
    user-select: none;
}

.range_container span {
    width: 20px;
    height: 15px;
    position: absolute;
    top: 35px;
    left: 0px;
}

.range_container span::before {
    content: '\f0d7';
    width: 20px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-size: 30px;
    font-weight: 600;
    color: var(--primario);
    float: left;
}

input[type=file] {
    padding: 0px var(--input_padding) 0px 0px !important;
    overflow: hidden;
    cursor: pointer !important;
}

input::file-selector-button {
    background-color: var(--input_bordi);
    height: calc(100% + 2px);
    font-weight: 400;
    font-size: var(--label_font-size);
    margin-right: 20px;
    padding-left: 15px;
    padding-right: 15px;
    border: none;
    box-shadow: var(--input_ombra);
}

.lista_tag {
    width: 100%;
    height: auto;
    float: left;
}

.lista_tag span {
    background-color: var(--primario);
    width: auto;
    height: 40px;
    line-height: 38px;
    color: var(--primario_testo);
    font-size: 20px;
    font-family: 'Titillium Web', sans-serif;
    margin: 0px 5px 20px 0px;
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--primario_accent);
    border-radius: var(--border_radius);
    cursor: pointer;
    float: left;
    user-select: none;
}

.lista_tag span > i {
    height: 40px;
    line-height: 38px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primario_testo);
    margin-left: 15px;
}

/*
.lista_tag span::after {
    content: '\f00d';
    width: auto;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-size: 18px;
    font-weight: 600;
    color: var(--primario_testo);
    margin-left: 15px;
    float: right;
}*/

.input_container {
    background-color: var(--input_text_background);
    width: 100%;
    height: var(--input_altezza);
    line-height: var(--input_altezza);
    border-radius: var(--input_border_radius);
    border: 1px solid var(--input_bordi);
    box-shadow: var(--input_ombra);
    transition: all 0.2s ease-in-out;
    display: flex;
    overflow: hidden;
}

.input_container label, .input_container button {
    background-color: var(--input_bordi);
    padding: 0px 15px 0px 15px;
    width: auto !important;
    font-weight: 400;
    font-size: var(--label_font-size);
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.input_container label {
    box-shadow: var(--input_ombra);
}

.input_container button {
    background-color: var(--primario);
    color: var(--primario_testo);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.input_container button:hover {
    background-color: var(--primario_accent);
    border: none;
    cursor: pointer;
}

.input_container button:active {
    opacity: 0.6;
}

.input_container input {
    border-radius: 0px;
    border: none;
    /*box-shadow: none;*/
    margin: 0px !important;
    padding: 0px 15px 0px 15px !important;
    width: 100% !important;
    float: unset;
}

.input_container input:focus {
    border: none;
    box-shadow: none;
}

.input_container select {
    border-radius: 0px;
    border: none;
    /*box-shadow: none;*/
    margin: 0px !important;
    padding: 0px 35px 0px 15px !important;
    width: 100% !important;
    float: unset;
}

.input_container select:focus {
    border: none;
    box-shadow: none;
}

.input_container:focus-within {
    border-color: var(--input_focus_bordi);
    box-shadow: var(--input_ombra), var(--input_focus_ombra);
}

.pulsante_mostra_password {
    background-color: var(--input_bordi) !important;
    box-shadow: var(--input_ombra);
    cursor: pointer !important;
}

.pulsante_mostra_password::before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    width: 25px;
    height: var(--input_altezza);
    line-height: var(--input_altezza);
    color: var(--input_testo);
    border-radius: 50%;
    float: left;
}

.pulsante_mostra_password[visibile="false"]::before {
    content: '\f06e';
}

.pulsante_mostra_password[visibile="true"]::before {
    content: '\f070';
}

.form_input_container {
    width: 100%;
    height: auto;
    /*overflow: hidden;*/
    float: left;
}

.form_input_container > label,
.form_input_container > p,
.form_descrizione {
    font-size: var(--label_font-size);
    font-weight: 400;
    color: var(--titolo);
    float: left;
}

.form_input_container > label {
    text-transform: uppercase;
    margin-bottom: 15px;
}

.form_input_container > p,
.form_descrizione {
    margin-top: 5px;
    font-style: italic
}

.check_radio {
    width: 100%;
    height: calc(var(--input_altezza) / 2);
    float: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.check_radio input {
    display: none;
}

.check_radio label {
    cursor: pointer;
    float: left;
}

.check_radio input+label:after {
    content: '';
    background-color: #ffffff;
    width: calc(var(--input_altezza) / 2);
    height: calc(var(--input_altezza) / 2);
    font-size: calc(var(--input_altezza) / 3);
    font-weight: 900;
    text-align: center;
    color: var(--primario_testo);
    border: 4px solid var(--input_bordi);
    margin-right: 18px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    float: left;
}

.check_radio input[type=radio]+label:after {
    border-radius: 50%;
}

.check_radio input[type=radio]:checked+label:after {
    content: '';
    background-color: var(--primario);
    width: calc(var(--input_altezza) / 2);
    height: calc(var(--input_altezza) / 2);
    font-size: calc(var(--input_altezza) / 3);
    border-color: var(--primario);
    float: left;
}

.check_radio input[type=checkbox]:checked+label:after {
    content: '\f00c' !important;
    background-color: var(--primario);
    width: calc(var(--input_altezza) / 2);
    height: calc(var(--input_altezza) / 2);
    line-height: normal;
    font-size: calc(var(--input_altezza) / 3);
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 600;
    color: var(--primario_testo);
    border-color: var(--primario);
    float: left;
}

.check_radio input[type=checkbox]+label:after {
    border-radius: unset;
}

.check_radio input:disabled+label,
.check_radio input:disabled+label::after {
    opacity: 0.5;
    cursor: default;
}

.radio_tab_container {
    width: 100%;
    height: auto;
    float: left;
    display: flex;
}

.radio_tab:first-child {
    border-radius: var(--input_border_radius) 0px 0px var(--input_border_radius);
}

.radio_tab:last-child {
    border-radius: 0px var(--input_border_radius) var(--input_border_radius) 0px;
}

.radio_tab {
    width: auto;
    height: var(--input_altezza);
    line-height: var(--input_altezza); 
    overflow: hidden;
    flex-grow: 1;
    flex-basis: 0;
    user-select: none;
    cursor: default;
}

.radio_tab input {
    display: none;
}

.radio_tab label {
    width: 100%;
    text-align: center;
    padding: 0px var(--input_padding) 0px var(--input_padding);
    box-shadow: var(--input_ombra);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    float: left;
}

.radio_tab input:disabled+label { 
    opacity: 0.5;
    cursor: default;
}

.radio_tab input+label { 
    background-color: var(--input_bordi);
    color: #000000;
}

.radio_tab input:checked+label { 
    background-color: var(--primario);
    color: var(--primario_testo);
}

.check_switch {
    /*display: inline-block;*/
    display: inline-flex;
}

.check_switch > span{
    height: calc(calc(var(--input_altezza) / 1.2) + 4px);
    line-height: calc(calc(var(--input_altezza) / 1.2) + 4px);
    color: var(--titolo);
    font-weight: 300;
    margin-right: 20px;
    flex-grow: 1;
    flex-basis: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check_switch input {
    display: none;
}

.check_switch input+label {
    background-color: var(--input_background);
    width: calc(var(--input_altezza) * 1.6);
    height: calc(calc(var(--input_altezza) / 1.2) + 2px);
    text-align: center;
    border-radius: var(--input_altezza);
    border: 1px solid var(--input_bordi);
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.check_switch input[checkbox-tipo="verde-rosso"]+label {
    background-color: var(--rosso_accent);
    border: 1px solid var(--rosso_accent);
}

.check_switch input+label:before {
    text-align: center;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    margin: 0px 10px 0px 10px;
    overflow: hidden;
    display: block;
    float: right;
}

.check_switch input+label:after {
    content: '';
    background-color: #ffffff;
    width: calc(var(--input_altezza) / 1.2);
    height: calc(var(--input_altezza) / 1.2);
    border-radius: calc(var(--input_altezza) / 1.2);
    box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);
    display: inline-block;
    position: absolute;
    left: 0px;
    transition: all 0.2s ease-in-out;
}

.check_switch input:checked+label {
    background-color: var(--primario);
    border: 1px solid var(--primario_accent);
}

.check_switch input[checkbox-tipo="secondario"]:checked+label {
    background-color: var(--secondario_accent);
    border: 1px solid var(--secondario_accent);
}

.check_switch input[checkbox-tipo="verde"]:checked+label {
    background-color: var(--verde_accent);
    border: 1px solid var(--verde_accent);
}

.check_switch input[checkbox-tipo="arancione"]:checked+label {
    background-color: var(--arancione_accent);
    border: 1px solid var(--arancione_accent);
}

.check_switch input[checkbox-tipo="rosso"]:checked+label {
    background-color: var(--rosso_accent);
    border: 1px solid var(--rosso_accent);
}

.check_switch input[checkbox-tipo="verde-rosso"]:checked+label {
    background-color: var(--verde_accent);
    border: 1px solid var(--verde_accent);
}

.check_switch input+label:before {
    height: calc(var(--input_altezza) / 1.2);
    line-height: calc(var(--input_altezza) / 1.2);
    color: #000000;
}

.check_switch input:checked+label:before {
    float: left;
}

/*
.check_switch input:checked+label:before {
    content: attr(valoreon);
    color: #ffffff;
}

.check_switch input+label:before {
    content: attr(valoreoff);
}
*/

.check_switch input:checked+label:after {
    background-color: #ffffff;
    box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.2);
    display: inline-block;
    position: absolute;
    left: calc(100% - calc(var(--input_altezza) / 1.2));
}

/*
TODO 
.select_container {
    background-color: var(--input_text_background);
    width: calc(100% - var(--input_altezza));
    height: calc(var(--input_altezza) + 2px);
    line-height: var(--input_altezza);
    border-radius: var(--input_border_radius);
    border: 1px solid var(--input_bordi);
    outline-width: 0;
    outline: none;
    padding: 0px;
    box-shadow: var(--input_ombra);
    transition: all 0.2s ease-in-out;
    float: left;
    position: relative;
}

.select_container > i {
    background-color: transparent;
    width: var(--input_altezza);
    height: var(--input_altezza);
    line-height: var(--input_altezza);
    text-align: center;
    border-top-right-radius: var(--border_radius);
    border-bottom-right-radius: var(--border_radius);
    box-shadow: none;
    float: right;
}

.select_container > input { 
    background-color: transparent;
    width: calc(100% - var(--input_altezza));
    text-align: center;
    font-size: var(--input_font-size);
    font-weight: 400;
    color: var(--input_testo);
    border: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding-left: calc(var(--input_padding) + var(--input_altezza));
    box-shadow: none;
    cursor: pointer;
}

.select_container:focus-within {
    border-color: var(--input_focus_bordi);
    box-shadow: var(--input_ombra), var(--input_focus_ombra);
}

.select_container > input:focus {
    border: none;
    box-shadow: unset;
}

.select_container:focus-within ul {
    max-height: 10000px;
    transition: all 0.2s ease-in-out;
}

.select_container ul {
    background-color: red;
    max-height: 0px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: absolute;
    top: calc(var(--input_altezza) + 5px);
    left: 0px;
    right: 0px;
}

.select_container[posizione="top"] ul {
    bottom: calc(var(--input_altezza) + 5px);
}

.select_container[posizione="bottom"] ul {
    top: calc(var(--input_altezza) + 5px);
}

.select_container > ul li {
    background-color: yellow;
    text-align: center;
    margin-bottom: 10px;
}
*/

.checkbox_led_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    user-select: none;
}

.checkbox_led {
    width: auto;
    height: auto;
    margin: 10px 10px 10px 10px;
    float: left;
    cursor: pointer;
}

.checkbox_led>input {
    display: none;
}

.checkbox_led_icona {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: var(--input_border_radius);;
    background: var(--input_background);
}

.checkbox_led_icona i {
    color: var(--input_testo);
    font-size: 24px;
    transition: color 0.3s;
}

.checkbox_led >input:checked+.checkbox_led_icona i {
    color: var(--primario);
}

.checkbox_led[stile="verde"] >input:checked+.checkbox_led_icona i {
    color: var(--verde_accent);
}

.checkbox_led[stile="arancione"] >input:checked+.checkbox_led_icona i {
    color: var(--arancione_accent);
}

.checkbox_led[stile="rosso"] >input:checked+.checkbox_led_icona i {
    color: var(--rosso_accent);
}

.multi_checkbox_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    user-select: none;
}

.multi_checkbox_container>* {
    margin: 10px 10px 10px 10px;
}

.multi_checkbox_input {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.multi_checkbox_input:checked+.multi_checkbox_componenti {
    border-color: var(--primario);
    box-shadow: var(--input_ombra);
    color: var(--primario);
}

.multi_checkbox_input:checked+.multi_checkbox_componenti:before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--primario);
    border-color: var(--primario);
}

.multi_checkbox_input:checked+.multi_checkbox_componenti .multi_checkbox_icona,
.multi_checkbox_input:checked+.multi_checkbox_componenti .multi_checkbox_label {
    color: var(--primario);
}

.multi_checkbox_componenti {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7rem;
    min-height: 7rem;
    border-radius: var(--input_border_radius);
    border: 2px solid var(--input_bordi);
    background-color: #fff;
    box-shadow: var(--input_ombra);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
}

.multi_checkbox_componenti:before {
    content: '\f00c';
    background-color: #fff;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-size: 12px;
    font-weight: 600;
    border: 2px solid var(--input_bordi);
    color: white;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
}

.multi_checkbox_componenti:hover {
    border-color: var(--primario);
}

.multi_checkbox_componenti:hover:before {
    transform: scale(1);
    opacity: 1;
}

.multi_checkbox_icona {
    width: var(--input_altezza);
    height: var(--input_altezza);
    transition: 0.375s ease;
    text-align: center;
    color: var(--titolo);
    margin-bottom: 10px;
}

.multi_checkbox_icona i {
    width: 100%;
    height: var(--input_altezza);
    line-height: var(--input_altezza);
    font-size: calc(var(--input_altezza) - 20px);
    float: left;
}

.multi_checkbox_label {
    color: var(--titolo);
    font-family: inherit;
    transition: 0.375s ease;
    text-align: center;
}

/* ---------------------------------------------------------- */
/* Slideshow */
/* ---------------------------------------------------------- */

.slideshow_container {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    float: left;
}

.slideshow_slide {
    width: 100%;
    height: auto;
    position: relative;
    top: 0px;
    left: 0px;
    float: left;
    display: none;
}

.slideshow_container[tipo="contenuti"] .slideshow_slide {
    padding: 0px 80px 0px 80px;
}

.slideshow_container[animazione="fade"] .slideshow_slide {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.slideshow_container[animazione="fade"] .slideshow_slide.slide_attiva {
    opacity: 1;
}

.slideshow_container[animazione="slide"] .slideshow_slide {
    left: 100%;
    transition: all 0.2s ease-in-out;
}

.slideshow_container[animazione="slide"] .slideshow_slide.slide_attiva {
    left: 0;
}

.slide_counter {
    width: auto;
    height: auto;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99;
    display: none;
}

.slideshow_container[numerazione="true"] > .slide_counter {
    display: inherit;
}

.slideshow_slide > img {
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    float: left;
}

.slideshow_slide > span {
    background-color: #ffffff63;
    width: auto;
    height: auto;
    text-align: center;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    padding: 1% 0px 1% 0px;
    position: absolute;
    bottom: 10%;
    left: 0px;
    right: 0px;
    display: none;
}

.slideshow_container[label="true"] > .slideshow_slide > span {
    display: inherit;
}

.slideshow_container[tipo="contenuti"] > .prev,
.slideshow_container[tipo="contenuti"] > .next {
    background-color: transparent;
    opacity: 0.3;
}

.slideshow_container > .prev, .slideshow_container > .next {
    background-color: #00000017;
    width: 50px;
    height: 60px;
    line-height: 60px;
    font-size: 36px;
    text-align: center;
    color: var(--titolo);
    position: absolute;
    top: calc(50% - 60px);
    cursor: pointer;
}

.slideshow_container > .prev:hover, .slideshow_container > .next:hover {
    background-color: var(--primario);
    color: var(--primario_testo);
}

.slideshow_container[tipo="contenuti"] > .prev:hover,
.slideshow_container[tipo="contenuti"] > .next:hover {
    background-color: transparent;
    color: var(--titolo);
    opacity: 1;
}

.slideshow_container > .prev {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    left: 0px;
}

.slideshow_container > .next {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    right: 0px;
}

.slideshow_container[tipo="contenuti"] .slideshow_dots {
    margin-top: 70px;
}

.slideshow_dots {
    width: 100%;
    height: auto;
    text-align: center;
    list-style-type: none;
    padding: 0px;
    margin: 20px 0px 0px 0px;
    float: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.slideshow_dots li {
    background-color: var(--titolo);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0px 5px 0px 5px;
    display: inline-block;
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.2s ease-in-out;
}

.slideshow_dots li:hover {
    opacity: 0.6;
}

.slideshow_dot.dot_attivo {
    opacity: 1;
}

/* ---------------------------------------------------------- */
/* Grafico Gauge */
/* ---------------------------------------------------------- */

.grafico_gauge {
    width: auto;
    aspect-ratio: 9 / 6;
    height: auto;
    overflow: hidden;
    float: left;
    position: relative;
    /* Disabilita selezione testo */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.grafico_gauge > div {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: relative;
}

.grafico_gauge > div > div:nth-child(1) {
    background: linear-gradient(-0deg, #d3d6d8, #d3d6d8 50%, var(--primario) 50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
    transition: all 0.5s ease-in-out;
}

.grafico_gauge > div > div:nth-child(2) {
    background-color: #ffffff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 12.5%;
    top: 12.5%;
}

.grafico_gauge > div > div:nth-child(2) > span:nth-child(1) {
    height: 60px;
    line-height: 60px;
    font-size: 60px;
    font-family: 'Titillium Web', sans-serif;
    color: #6c757d;
    transform: translateY(-75%);
}

.grafico_gauge > div > div:nth-child(2) > span:nth-child(2) {
    height: 60px;
    line-height: 60px;
    font-size: 30px;
    color: #6c757d;
    transform: translateY(-75%);
}

.grafico_gauge > span {
    height: auto !important;
    line-height: unset !important;
    aspect-ratio: 12 / 2;
    background: #ffffff;
    font-family: 'Titillium Web', sans-serif;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6c757d;
    font-size: 23px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------- */
/* Grafico Gauge Indicatore */
/* ---------------------------------------------------------- */
 
/*
.grafico_gauge_indicatore {
    width: auto;
    aspect-ratio: 9 / 6;
    height: auto;
    overflow: hidden;
    float: left;
    position: relative;
    /* Disabilita selezione testo *
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.grafico_gauge_indicatore > div {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: relative;
}


.grafico_gauge_indicatore > div > div:nth-child(1) {
    background: linear-gradient(-0deg, #d3d6d8, #d3d6d8 50%, var(--primario) 50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
    outline: 1px solid #ffffff;
}


.grafico_gauge_indicatore > div > div:nth-child(2) {
    background: linear-gradient(-0deg, #d3d6d8, #d3d6d8 50%, var(--primario) 50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
    outline: 1px solid #ffffff;
}

.grafico_gauge_indicatore > div > div:nth-child(3) {
    background: linear-gradient(-0deg, #d3d6d8, #d3d6d8 50%, var(--primario) 50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(180deg);
    outline: 1px solid #ffffff;
}


.grafico_gauge_indicatore > div > div:nth-child(4) {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 5%;
    top: 5%;
    z-index: 999999999;
    transition: all 0.5s ease-in-out;
}

.grafico_gauge_indicatore > div > div:nth-child(4) > span {
    background-color: black;
    width: 10px;
    height: 100%;
    position: absolute;
    left: calc(50% 5px);
    top: 0;
    transform: rotate(90deg);
}

.grafico_gauge_indicatore > div > div:nth-child(4) > span::before {
    content: "";
    position: absolute;
    top: -10px;
    margin-top: 0px;
    left: 0px;
    border: solid 5px transparent;
    border-right-color: black;
    z-index: 1;
    transform: rotate(90deg);
}


.grafico_gauge_indicatore > div > div:nth-child(5) {
    background-color: #ffffff;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 7.5%;
    top: 7.5%;
    z-index: 99999999;
}

.grafico_gauge_indicatore > p {
    height: auto !important;
    line-height: unset !important;
    aspect-ratio: 12 / 2;
    background-color: #ffffff;
    font-family: 'Titillium Web', sans-serif;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6c757d;
    font-size: 23px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999999;
}

.grafico_gauge_indicatore > span {
    height: auto !important;
    line-height: unset !important;
    aspect-ratio: 12 / 2;
    background-color: #ffffff;
    font-family: 'Titillium Web', sans-serif;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #6c757d;
    font-size: 23px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999999;
}
*/



.grafico_gauge_indicatore {
    background: #d3d6d8;
    width: auto;
    height: auto;
    border-radius: 50%;
    aspect-ratio: 1/1;
    float: left;
    position: relative;
    overflow: hidden;
    outline: 2px solid #ffffff;
}

.grafico_gauge_indicatore > .maschera_indicatore {
    background: #ffffff;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    margin: 10%;
    float: left;
}


.grafico_gauge_indicatore > .maschera_indicatore > span:nth-child(1) {
    background: #ffffff;
    width: 50%;
    height: 50%;
    top: 65%;
    left: 25%;
    position: absolute;
    transform: rotate(-45deg);
    transform-origin: center;
}

/*
.grafico_gauge_indicatore > .maschera_indicatore::before {
    content: "";
    background-color: green;
    position: absolute;
    left: 50px;
    z-index: 1;
    height: auto;
    width: 10%;
    top: 79%;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.grafico_gauge_indicatore > .maschera_indicatore::after {
    content: "";
    background-color: red;
    position: absolute;
    right: 50px;
    z-index: 1;
    height: auto;
    width: 10%;
    top: 79%;
    aspect-ratio: 1/1;
    border-radius: 50%;
}
*/



.grafico_gauge_indicatore > .indicatore {
    background: transparent;
    width: 90%;
    height: 90%;
    margin: 5%;
    border-radius: 50%;
    float: left;
    position: absolute;
    transition: all 0.5s ease-in-out;
}

.grafico_gauge_indicatore > .indicatore > span {
    background: black;
    width: 85%;
    height: 10px;
    float: left;
    position: relative;
    top: calc(50% - 5px);
    left: 7.5%;
    transform: rotate(-50deg);
}

.grafico_gauge_indicatore > .indicatore > span::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -10px;
    border: solid 5px transparent;
    border-right-color: black;
    z-index: 1;
}

.grafico_gauge_indicatore > .indicatore > span::after {
    content: "";
    background-color: #ffffff;
    position: absolute;
    right: -2px;
    z-index: 1;
    height: 12px;
    width: 50%;
    top: -1px;
}

.grafico_gauge_indicatore > span:nth-child(3) {
    width: 150px;
    height: 40px;
    line-height: 40px;
    font-size: 50px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    color: #6c757d;
    position: absolute;
    bottom: 45px;
    left: calc(50% - 75px);
}

.grafico_gauge_indicatore > span:nth-child(4) {
    width: 150px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    color: #6c757d;
    position: absolute;
    bottom: 15px;
    left: calc(50% - 75px);
}




/* ---------------------------------------------------------- */
/* Grafico Torta */
/* ---------------------------------------------------------- */

:root {
    --grafico_torta: 300px;
}

@keyframes grafico_torta_spin {
    from {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

.grafico_torta {
    overflow: hidden;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Legenda */
.grafico_torta > ul {
    list-style-type: none;
    padding: 0;
    font-family: 'Titillium Web', sans-serif;
    font-size: 23px;
    margin: 0 0 0 70px;
    background: #f9f9f9;
    padding: 15px;
    float: left;
    border: 1px solid var(--colore_bordi);
    border-radius: var(--border_radius);
    box-shadow: var(--ombra);
}

.grafico_torta > ul li {
    width: auto;
    height: 30px;
    line-height: 30px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 30px solid black;
}

.grafico_torta > ul li:last-child {
    margin-bottom: 0px;
}

.grafico_torta > ul em {
    font-style: normal;
    color: var(--titolo);
    float: left;
}

.grafico_torta > ul span {
    margin-left: 30px;
    color: var(--sottotesto);
    float: right;
}

/* Torta */
.grafico_torta > div {
    height: var(--grafico_torta);
    width: var(--grafico_torta);
    position: relative;
    margin: 0px;
    float: left;
}

.grafico_torta > div::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: calc(var(--grafico_torta) / 2);
    height: calc(var(--grafico_torta) / 2);
    background: #ffffff;
    border-radius: 50%;
    top: calc(var(--grafico_torta) / 4);
    left: calc(var(--grafico_torta) / 4);
}

.grafico_torta > div > div {
    position: absolute;
    width: var(--grafico_torta);
    height: var(--grafico_torta);
    clip: rect(0px, var(--grafico_torta), var(--grafico_torta), calc(var(--grafico_torta) / 2));
    animation: grafico_torta_spin 0.5s;
}

.grafico_torta > div > div > span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    width: var(--grafico_torta);
    height: var(--grafico_torta);
    border-radius: 50%;
    clip: rect(0px, var(--grafico_torta), var(--grafico_torta), calc(var(--grafico_torta) / 2));
}

/* ---------------------------------------------------------- */
/* Grafico barre */
/* ---------------------------------------------------------- */

.grafico_barre {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
}

.grafico_barre > h2 {
    width: 35px;
    height: calc(100% - 70px);
    text-align: center;
    font-size: 23px;
    position: absolute;
    margin: 0px;
    right: 0px;
    top: 0;
    left: 0px;
    writing-mode: sideways-lr;
}

.grafico_barre > ul {
    width: auto;
    height: 35px;
    font-size: 20px;
    font-weight: 200;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grafico_barre > ul li {
    border-left: 35px solid #000000;
    margin: 0px 20px 0px 20px;
    padding-left: 15px;
    display: inline;
}

.grafico_barre > div {
    background-color: #f9f9f9;
    width: calc(100% - 35px);
    height: 450px;
    margin-bottom: 70px;
    border-left: 1px solid var(--colore_bordi);
    border-bottom: 1px solid var(--colore_bordi);
    float: right;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.grafico_barre > div > p {
    width: 100%;
    height: 1px;
    margin: 0px 10px 0px 10px;
    position: relative;
    float: left;
    transition: all 0.5s ease-in-out;
}

.grafico_barre > div > p::before {
    content: '' attr(label) '';
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    color: var(--sottotesto);
    font-weight: 400;
    text-align: center;
    text-transform: none;
    width: auto;
    height: 35px;
    line-height: 35px;
    padding: 0px 10px 0px 10px;
    transform: translateX(-50%);
    left: 50%;
    top: 0px;
    z-index: 1;
    position: absolute;
    white-space: nowrap;
}

.grafico_barre > div > p > span {
    width: 100%;
    height: 1px;
    cursor: pointer;
    position: absolute;
    border-radius: 3px 3px 0px 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    transition: height 0.5s ease-in-out;
}

.grafico_barre > div > p > span:hover {
    opacity: 1 !important;
}

.grafico_barre > div:hover > p > span {
    opacity: 0.5;
}

.grafico_barre > div > p > span:before {
    content: '' attr(label) '';
    background-color: #ffffff;
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
    color: var(--sottotesto);
    font-weight: 400;
    text-align: center;
    text-transform: none;
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0px 10px 0px 10px;
    border: 1px solid var(--colore_bordi);
    border-radius: var(--border_radius);
    box-shadow: var(--ombra);
    transform: translateX(-50%);
    left: 50%;
    top: -55px;
    z-index: 1;
    position: absolute;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    display: none;
    z-index: 99999999;
}

.grafico_barre > div > p:first-child > span:before {
    transform: translateX(0%);
    left: 0%;
}

.grafico_barre > div > p:last-child > span:before {
    transform: translateX(0%);
    left: unset;
    right: 0%;
}

.grafico_barre > div > p > span:hover:before {
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
    display: inherit;
}

.grafico_barre[col="1"] > div > p > span {
    width: 100% !important;
}

.grafico_barre[col="1"] > div > p > span:nth-child(1) {
    background-color: var(--grafici_0);
    left: 0px;
    right: unset;
}

.grafico_barre[col="1"] > div > p > span:nth-child(2) {
    display: none;
}

.grafico_barre[col="2"] > div > p > span {
    width: calc(50% - 1px) !important;
}

.grafico_barre[col="2"] > div > p > span:nth-child(1) {
    background-color: var(--grafici_0);
    left: 0px;
    right: unset;
}

.grafico_barre[col="2"] > div > p > span:nth-child(2) {
    background-color: var(--grafici_1);
    left: unset;
    right: 0px;
}

.grafico_barre[col="3"] > div > p > span {
    width: calc(33.33% - 2px) !important;
}

.grafico_barre[col="3"] > div > p > span:nth-child(1) {
    background-color: var(--grafici_0);
    left: 0px;
    right: unset;
}

.grafico_barre[col="3"] > div > p > span:nth-child(2) {
    background-color: var(--grafici_1);
    left: unset;
    right: calc(33.33% + 1px);
}

.grafico_barre[col="3"] > div > p > span:nth-child(3) {
    background-color: var(--grafici_2);
    left: unset;
    right: 0px;
}

/* ---------------------------------------------------------- */
/* Icone stato Header/Footer */
/* ---------------------------------------------------------- */

.icona_stato_hf {
    background-color: var(--input_bordi);
    text-align: center;
    color: var(--input_focus_bordi);
    text-align: center;
    cursor: pointer;
    border-radius: 7px;
    position: relative;
    opacity: 1;
    transition: all 0.2s ease-in-out;
    float: left;
}

.icona_stato_hf:hover {
    background-color: var(--input_focus_bordi);
    color: var(--primario_testo);
}

#footer_notifiche .icona_stato_hf {
    width: var(--footer_altezza);
    height: var(--footer_altezza);
    font-size: 13px;
    margin: var(--footer_padding_v) 15px var(--footer_padding_v) 0px;
}

#header_notifiche .icona_stato_hf {
    width: var(--header_altezza);
    height: var(--header_altezza);
    font-size: 18px;
    margin: 0px 10px 0px 10px;
}

.icona_stato_hf[colore="blu"] {
    background-color: var(--blu_background);
    color: var(--blu_testo);
}

.icona_stato_hf[colore="blu"]:hover {
    background-color: var(--blu_accent);
    color: var(--blu_accent_testo);
}

.icona_stato_hf[colore="verde"] {
    background-color: var(--verde_background);
    color: var(--verde_testo);
}

.icona_stato_hf[colore="verde"]:hover {
    background-color: var(--verde_accent);
    color: var(--verde_accent_testo);
}

.icona_stato_hf[colore="arancione"] {
    background-color: var(--arancione_background);
    color: var(--arancione_testo);
}

.icona_stato_hf[colore="arancione"]:hover {
    background-color: var(--arancione_accent);
    color: var(--arancione_accent_testo);
}

.icona_stato_hf[colore="rosso"] {
    background-color: var(--rosso_background);
    color: var(--rosso_testo);
}

.icona_stato_hf[colore="rosso"]:hover {
    background-color: var(--rosso_accent);
    color: var(--rosso_accent_testo);
}

.icona_stato_hf>i {
    text-align: center;
    margin: 0px;
    cursor: pointer;
    position: relative;
}

#header_notifiche .icona_stato_hf>i {
    height: var(--header_altezza);
    line-height: var(--header_altezza);
}

#footer_notifiche .icona_stato_hf>i {
    height: var(--footer_altezza);
    line-height: var(--footer_altezza);
}

.icona_stato_hf:before {
    content: '' attr(tooltip) '';
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px;
    color: var(--sottotesto);
    font-weight: 400;
    text-align: center;
    width: auto;
    max-width: 300px;
    height: auto !important;
    line-height: auto;
    padding: 10px 20px 10px 20px;
    border: 1px solid var(--colore_bordi);
    border-radius: var(--border_radius);
    box-shadow: var(--ombra);
    left: 0px;
    z-index: 1;
    position: absolute;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    display: none;
}

.icona_stato_hf:hover:before {
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
    display: inherit;
}

#footer_notifiche .icona_stato_hf:before {
    bottom: calc(var(--footer_altezza) + calc(var(--footer_padding_v) + 5px));
    transform: translateX(calc(-50% + calc(var(--footer_altezza) /2)));
}

#header_notifiche .icona_stato_hf:before {
    top: calc(var(--header_altezza) + 10px);
    transform: translateX(calc(-50% + calc(var(--header_altezza) /2)));
}

/* ---------------------------------------------------------- */
/* Liste UL */
/* ---------------------------------------------------------- */

/*
.lista_icone {
    width: 100%;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.lista_icone li {
    margin: 0px 0px 20px 0px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--colore_bordi);
    display: table;
    float: left;
}

.lista_icone li i {
    width: 50px;
    height: 20px;
    text-align: center;
    padding-right: 0px;
    display: table-cell;
    vertical-align: middle;
}

.lista_icone li p {
    width: auto;
    height: auto;
    display: table-cell;
}

.lista_icone li p span {
    width: 100%;
    height: auto;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 5px;
    float: left;
}
*/