@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css')

/*#region GENERAL*/

.show {
    visibility: visible !important;
}

.hidden {
    display: none !important;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    color: rgba(255, 255, 255, .75);
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
    color: var(--secondary);
}

.nav-underline .nav-link:hover {
    color: var(--blue);
}

.nav-underline .active {
    font-weight: 500;
    color: var(--gray-dark);
}


/*imposto il css delle due classi */
.card_scegli_cliente {
    background-color: #AED9E2 !important;
    color: #007992 !important;
}

.card_btn_blu {
    color: #fff !important;
    background-color: #007992 !important;
    border-color: #007992 !important;
}

/*quando card_scegli_clienti è hover allora cambia css di card_scegli_clienti e card_btn_blu*/
.card_scegli_cliente:hover .card_btn_blu {
    color: #007992 !important;
    background-color: #fff !important;
    border-color: #007992 !important;
}

/*cambio ancora il css quando è in hover*/
.card_scegli_cliente:hover {
    background-color: #007992 !important;
    color: #fff !important;
}


.lista_small {
    font-size: 13px !important;
}

/*colore 1 blu:  #007992*/
/*colore 2 azzurro:  #AED9E2*/
/*colore 3 bianco : #fff */
/*colore 4: verde scuro #305028*/
/*colore 5: verde chiaro #66af54*/


/*colore 1 blu:  #007992*/

.bg-colore1 {
    background-color: #007992 !important;
}

.text-colore1 {
    color: #007992 !important;
}

.btn-colore1 {
    color: #fff !important;
    background-color: #007992 !important;
    border-color: #007992 !important;
}

.btn-colore1:hover {
    color: #007992 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.btn-colore1-outline {
    color: #fff !important;
    background-color: #007992 !important;
    border-color: #007992 !important;
}

.btn-colore1-outline:hover {
    color: #007992 !important;
    border-color: #007992 !important;
    background-color: #fff !important;
}

.btn-colore1_text_colore3 {
    color: white !important;
    background-color: #007992 !important;
    border-color: #007992 !important;
}

.btn-colore1_text_colore3:hover {
    color: #007992 !important;
    background-color: white !important;
    border-color: white !important;
}

/*--------------------*/


/*colore 2 azzurro:  #AED9E2*/
.bg-colore2 {
    background-color: #AED9E2 !important;
}

.text-colore2 {
    color: #AED9E2 !important;
}

.btn-colore2 {
    color: #fff !important;
    background-color: #AED9E2 !important;
    border-color: #AED9E2 !important;
}

.btn-colore2:hover {
    color: #AED9E2 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.btn-colore2_text_colore1 {
    color: #007992 !important;
    background-color: #AED9E2 !important;
    border-color: #AED9E2 !important;
}

.btn-colore2_text_colore1:hover {
    color: #fff !important;
    background-color: #007992 !important;
    border-color: #007992 !important;
}

.btn-outline-colore2 {
    color: #AED9E2 !important;
    border-color: #AED9E2 !important;
}

.btn-outline-colore2:hover {
    color: #fff !important;
    background-color: #AED9E2 !important;
    border-color: #AED9E2 !important;
}

.btn-colore3_text_colore1 {
    color: #007992 !important;
    background-color: #AED9E2 !important;
    border-color: #AED9E2 !important;
}

.btn-colore3_text_colore1:hover {
    color: #007992 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

/*----------------------*/

/*colore 3 bianco : #fff */

.text-colore3 {
    color: #fff !important;
}

.bg-colore3 {
    background-color: #fff !important;
}

.btn-colore3 {
    color: #007992 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.btn-colore3:hover {
    color: #007992 !important;
    background-color: #AED9E2 !important;
    border-color: #AED9E2 !important;
}

/*---------------------*/


/*colore 4: verde #305028*/
.bg-colore4 {
    background-color: #305028 !important;
}

.text-colore4 {
    color: #305028 !important;
}

.btn-colore4 {
    background-color: #81b374d0 !important;
    color: white !important;
}

.btn-colore4:hover {
    color: #305028 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

/*--------------*/

/*colore 5: verde #305028*/
.bg-colore5 {
    background-color: #66af54 !important;
}

.text-colore5 {
    color: #66af54 !important;
}

.btn-colore5 {
    background-color: #66af54 !important;
    color: #305028 !important;
}

.btn-colore5:hover {
    color: #305028 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

/*--------------*/

/*colore 6: verde #305028*/
.text-colore6 {
    color: #7d8f19 !important;
}

/*colore 7: giallo chiaro #f2f2c391*/
.bg-colore7 {
    background-color: #f2f2c391 !important;
}

/*--------------*/

/*colore 8: verde #5ebd46*/
.btn-colore8 {
    color: #fff !important;
    background-color: #239107 !important;
}

/*--------------*/

/*colore 9: arancione #faa25d7d*/

.text-colore9 {
    color: #faa25d7d !important;
}

.bg-colore9 {
    color: #000 !important;
    background-color: #faa25d7d !important;
}

.btn-colore9 {
    color: #fff !important;
    background-color: #faa25d7d !important;
}

/*--------------*/
/*colore 10: rosso #faa25d7d*/
.btn-colore10 {
    color: #fff !important;
    background-color: #9c2525fb !important;
}

/*--------------*/
/*colore 11: arancione #eab58d*/
.btn-colore11 {
    color: #fff !important;
    background-color: #eab78f !important;
}
.bg-colore11 {
    background-color: #eab78f !important;
}

/*--------------*/
/*colore 112: verde #14be3e*/
.btn-colore12 {
    color: #fff !important;
    background-color: #14be3e !important;
}

.text-colore13 {
    color: #faa25dc7 !important;
}
.bg-colore13 {
    background-color: #faa25dc7 !important;
}

.btn-colore13 {
    color: #fff !important;
    background-color: #faa25dc7 !important;
}

.btn-colore13:hover {
    color: #faa25dc7 !important;
    background-color: #fff !important;
}

.text-colore14 {
    color: #699424a4 !important;
}

.btn-colore14 {
    color: #fff !important;
    background-color: #699424a4 !important;
}

.btn-colore14:hover {
    color: #699424a4 !important;
    background-color: #fff !important;
}

.bg-colore15 {
    background-color: #227441c5 !important;
}

.text-colore15 {
    color: #227441c5 !important;
}

.bg-colore15 {
    background-color: #227441c5 !important;
}

.btn-colore15 {
    color: #fff !important;
    background-color: #227441c5 !important;
}

.btn-colore15:hover {
    color: #227441c5 !important;
    background-color: #fff !important;
}

.text-colore16 {
    color: #9c2525fb !important;
}

.bg-colore16 {
    color: #fff !important;
    background-color: #9c2525fb !important;
}
.text-colore16 {
    background-color: #fff !important;
    color: #9c2525fb !important;
}

.btn-colore16 {
    color: #fff !important;
    background-color: #9c2525fb !important;
}

.btn-colore16:hover {
    color: #9c2525fb !important;
    background-color: #fff !important;
}

.text-colore17 {
    color: #65a9b8 !important;
}

.bg-colore17 {
    color: #fff !important;
    background-color: #65a9b8 !important;
}

.btn-colore17 {
    color: #fff !important;
    background-color: #65a9b8 !important;
}

.btn-colore17:hover {
    color: #65a9b8 !important;
    background-color: #fff !important;
}

.bg-colore18 {
    background-color: #eab78f36 !important;
}

.btn-colore19 {
    color: #fff !important;
    background-color: #c57c7c !important;
}

.bg-colore20 {
    background-color: #21a17b !important;
}

.btn-colore20 {
    background-color: #21a17b !important;
    color: #fff !important;
}

.bg-colore21 {
    background-color: #e6ce8d !important;
}

.text-colore21 {
    color: #e6ce8d !important;
}

.btn-colore22 {
    background-color: #eb8903 !important;
    color: #fff !important;
}

.btn-colore22:hover {
    background-color: #fff !important;
    color: #eb8903 !important;
}

.bg-colore23 {
    background-color: #81b374d0 !important;
    color: #305028 !important;
}

.btn-colore24 {
    background-color: #63b393 !important;
    color: #fff !important;
}

/* colore x venduto_anno_prec COLONNA in dashboard*/
.bg-colore25 {
    background-color: #ebebeb !important;
	border: 1px solid #fff !important;
}

/* colore x le RIGHE che hanno SOLOvenduto_anno_prec in dashboard*/
.bg-colore26 {
    background-color: #fff !important;
	 border: 1px solid #fff !important;
}

.bg-colore27 {
    background-color: #fff;
}
.bg-colore30 {
    background-color: #9add8863!important;
}

.btn-tracking {
    background-color: #fdf911 !important;
    color: #000000 !important;
}

.btn-tracking:hover {
    background-color: #000000 !important;
    color: #fdf911 !important;
}

.table_dashboard_hover tbody tr:hover {
    /*color: #5e6e82 !important;*/
    background-color: rgba(0, 0, 0, 0.075) !important;
}

/*se selezionato*/
.btn-dashboard-totale{
    background-color: #185e9c !important;
    color: #fff !important;
	border-radius: 0px 10px 10px 0px !important;
}

.btn-outline-dashboard-totale{
    background-color: #ebebeb !important;
    color: #fff !important;
    border-color: #ebebeb !important;
	border-radius: 0px 10px 10px 0px !important;
}

.btn-outline-dashboard-totale:hover{
    background-color: #185e9c !important;
    color: #fff !important;
    border-color: #185e9c !important;
	border-radius: 0px 10px 10px 0px !important;
}


.btn-dashboard-ytd{
    background-color: #185e9c !important;
    color: #fff !important;
	border-radius:10px 0px 0px 10px !important;
}

.btn-outline-dashboard-ytd{
    color: #fff !important;
    background-color: #ebebeb !important;
    border-color: #ebebeb !important;
	border-radius:10px 0px 0px 10px !important;
}

.btn-outline-dashboard-ytd:hover{
    color: #fff !important;
    background-color: #185e9c !important;
    border-color: #185e9c !important;
	border-radius:10px 0px 0px 10px !important;
}


/*colori in base allo stato offerta*/
.bg-stato_B {
    color: #fff !important;
    background-color: #8dd5e6 !important;
    color: #305028 !important;
}

.bg-stato_A {
    color: #fff !important;
    background-color: #2a8797e8 !important;
}

.bg-stato_C {
    color: #fff !important;
    background-color: #8b7c7a !important;
}

.bg-stato_Z {
    color: #fff !important;
    background-color: #8d9ae6 !important;
}

.bg-stato_P {
    color: #fff !important;
    background-color: #e6978d !important;
}

.bg-stato_W {
    color: #fff !important;
    background-color: #e6ce8d !important;
}

.bg-stato_I {
    color: #fff !important;
    background-color: #21a17b !important;
}

.bg-stato_O {
    color: #fff !important;
    background-color: #4c6d4c !important;
}

.bg-stato_R {
    color: #fff !important;
    background-color: #a1213d !important;
}

.bg_progetto {
    color: #153674 !important;
    background-color: #AED9E2 !important;
}

.bg-card-info{
	max-width: 260px !important; 
	min-width: 260px !important;
	background-color: #81b37466 !important;
    color: #496b48 !important;
}
.bg-card-info:hover{
	max-width: 260px !important; 
	min-width: 260px !important;
	background-color: #699d5cc2 !important;
    color: #496b48 !important;
}

.bg_kit {
    /* color: #790101 !important;*/
    color: #00166a !important;
    background-color: #d4d3d4 !important;
    /* background-color: #915b66c4 !important; */
}

.bg_progressivo {
    /* color: #016e25 !important;*/
    color: #00166a !important;
    background-color: #d4d3d4 !important;
    /*  background-color: #5b9173c4 !important; */
}

.bg_standard {
    /*  color: #00166a !important;*/
    color: #00166a !important;
    background-color: #d4d3d4 !important;
    /*background-color: #917c5bc4 !important; */
}

/*--------------*/


.bg-card {
    background-color: #AED9E2 !important;
}

.bg-card:hover {
    background-color: #fefeff !important;
}

.bg-card3 {
    background-color: #aad3a0 !important;
    -webkit-transition: padding .35s ease-in-out;
    transition: padding .35s ease-in-out;
}

.bg-card3:hover {
    background-color: #74a568d7 !important;
    padding-left: -5%;
}

.bg-card2 {
    background-color: #305028 !important;
}

.text-card {
    color: #1c6875 !important;
}

.text-card:hover {
    color: #b8e2ae !important;
}

.bg-testata {
    background-color: #006692d3 !important;
}

.bg-logo-navbar {
    background: #cbe9ef !important;
    -webkit-box-shadow: inset 0px 1px 39px -9px #FFFFFF;
    -moz-box-shadow: inset 0px 1px 39px -9px #FFFFFF;
    -o-box-shadow: inset 0px 1px 39px -9px #FFFFFF;
    box-shadow: inset 0px 1px 39px -9px #298c99;
    border-color: #298c99 !important;
    margin-left: -5px !important;
}

.icon_home {
    width: 50px !important;
    height: 50px !important;
    margin: 10px;
    align-self: center;
}


.img_top {
    width: 250px;
}

.input_prezzi_articolo {
    width: 100%;
    display: block;
    border-radius: 5px;
    border: 1px solid #d8e2ef;
    padding-left: 4px;
    margin-bottom: 3px !important;
}

.input_prezzi_articolo:focus {
    color: #344050;
    background-color: #fff;
    border-color: #9ec2f3;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgb(44 123 229 / 25%);
    box-shadow: 0 0 0 0.2rem rgb(44 123 229 / 25%);
}

.btn-danger:hover {
    color: #e63757 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}


/*CSS GAUGE*/
.gauge_col {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    background: #efefef !important;
}

.padding_checkbox {
    padding-left: 10%;
}

.padding_checkbox2 {
    padding-left: 5%;
}

.bg_card_table_testata {
    background-color: #55a288f5 !important;
}


.bg_card_table_mese {
    background-color: #a0ce8ce0 !important;
}

.bg_card_table_anno {
    background-color: #8eb87bd9 !important;
}


.logo_home_navbar {
    height: 20px !important;
    width: 20px !important;
}

.color_home_navbar {
    color: #065b49 !important;
}

/*DRAG AND DROP*/
.input_drophere {
    text-align: center;
    color: gray;
    border-radius: 7px;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    padding: 28px;
    background-color: #DCF5FB;
    border-color: #DCF5FB;
}

.input_drophere:focus {
    background-color: #DCF5FB !important;
    border-color: #DCF5FB !important;
}

.input_drophere:focus-visible {
    background-color: #DCF5FB !important;
    border-color: #DCF5FB !important;
}

/*****/

.search-cliente {
    background: #ffffff;
    position: absolute;
    z-index: 1;
}

p.bg-search-cliente {
    color: #007992;
}

.mt-body {
    margin-top: 6rem !important;
}

.size_checkbox {
    height: 16px;
    width: 16px;
}

.ss-table-responsive {
    width: 100%;
    overflow-x: auto;
}

thead tr:nth-child(1) th {
    background: #007992;
    position: sticky;
    top: 0;
    z-index: 10;
}

.mostra {
    visibility: visible !important;
}

.nascondi {
    display: none !important;
}

html {
    font-size: 16px !important;
}

span.bs-caret {
    display: none !important;
}


/*PER LA GESTIONE UTENTI */
#regForm {
    padding: 40px;
    min-width: 300px;
}

h1 {
    text-align: center;
}

/* SBALLA UN PO' IL RESTO
input {
  padding: 10px;
  width: 100%;
  font-size: 27px;
  border: 1px solid #aaaaaa;
}
*/


/* Mark input boxes that gets an error on validation: */
input.invalid {
    background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
    display: none;
    min-height: 500px !important;
    max-height: 500px !important;
}

button {
    background-color: #04AA6D;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    cursor: pointer;
    border-radius: 5px !important;
}

button:hover {
    opacity: 0.8;
}

button:focus {
    outline: none !important;
}

#prevBtn {
    background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #04AA6D;
}
/*#endregion GENERAL*/

/*#region NICHITA */

/*#region FLEXBOX */
.fx { display: flex; box-sizing: border-box; }

.fx[order='x'] { flex-direction: row; }
.fx[align-x='start'] { justify-content: start; }
.fx[align-x='center'] { justify-content: center; }
.fx[align-x='end'] { justify-content: end; }
.fx[align-y='start'] { align-items: start; }
.fx[align-y='center'] { align-items: center; }
.fx[align-y='end'] { align-items: end; }

.fx[order='y'] { flex-direction: column; }
.fx[order='y'][align-x='start'] { align-items: start; }
.fx[order='y'][align-x='center'] { align-items: center; }
.fx[order='y'][align-x='end'] { align-items: end; }
.fx[order='y'][align-y='start'] { justify-content: start; }
.fx[order='y'][align-y='center'] { justify-content: center; }
.fx[order='y'][align-y='end'] { justify-content: end; }

.fx[align='start'] { align-items: start; justify-content: start; }
.fx[align='center'] { align-items: center; justify-content: center; }
.fx[align='end'] { align-items: end; justify-content: end; }

.fx[wrap=''] { flex-wrap: wrap; }

.fx[wrap='desktop'] { flex-wrap: wrap; }

@media screen and (max-width: 840px) {
    .fx[wrap='tablet'] { flex-wrap: wrap; }
    *[responsive='tablet'] { width: 100%; }
    .fx[adaptive='tablet'] { flex-direction: column; }
}
@media screen and (max-width: 414px) {
    .fx[wrap='phone'] { flex-wrap: wrap; }
    *[responsive='phone'] { width: 100%; }
    .fx[adaptive='phone'] { flex-direction: column; }
}

*[flex='1'] { flex: 1 }
*[flex='2'] { flex: 2 }
*[flex='3'] { flex: 3 }
*[flex='4'] { flex: 4 }
*[flex='5'] { flex: 5 }
*[flex='6'] { flex: 6 }
*[flex='7'] { flex: 7 }
*[flex='8'] { flex: 8 }
*[flex='9'] { flex: 9 }
*[flex='10'] { flex: 10 }

/*#endregion FLEXBOX */

/*#region TEXT FORMATTING */
*[weight='lighter'] { font-weight: lighter; }
*[weight='normal'] { font-weight: normal; }
*[weight='bold'] { font-weight: bold; }
*[weight='bolder'] { font-weight: bolder; }
*[weight='300'] { font-weight: 300; }
*[weight='400'] { font-weight: 400; }
*[weight='500'] { font-weight: 500; }
*[weight='600'] { font-weight: 600; }
*[weight='700'] { font-weight: 700; }
*[weight='800'] { font-weight: 800; }
*[weight='900'] { font-weight: 900; }
*[weight='1000'] { font-weight: 1000; }
*[weight='1100'] { font-weight: 1100; }
*[weight='1200'] { font-weight: 1200; }

*[font='poppins'] {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h6 { font-size: 0.75em !important; }
h5 { font-size: 1.05em !important; }
h4 { font-size: 1.35em !important; }
h3 { font-size: 1.65em !important; }
h2 { font-size: 1.95em !important; }
h1 { font-size: 2.35em !important; }

@media screen and (min-width: 1024px) {
    h6 { font-size: 0.75em !important; }
    h5 { font-size: 1.05em !important; }
    h4 { font-size: 1.35em !important; }
    h3 { font-size: 1.65em !important; }
    h2 { font-size: 1.95em !important; }
    h1 { font-size: 2.35em !important; }
}

@media screen and (min-width: 1600px) {
    h6 { font-size: 0.8em !important; }
    h5 { font-size: 1.1em !important; }
    h4 { font-size: 1.4em !important; }
    h3 { font-size: 1.7em !important; }
    h2 { font-size: 2em !important; }
    h1 { font-size: 2.4em !important; }
}

@media screen and (min-width: 1920px) {
    h6 { font-size: 0.85em !important; }
    h5 { font-size: 1.15em !important; }
    h4 { font-size: 1.45em !important; }
    h3 { font-size: 1.75em !important; }
    h2 { font-size: 2.05em !important; }
    h1 { font-size: 2.45em !important; }
}

@media screen and (min-width: 2400px) {
    h6 { font-size: 0.9em !important; }
    h5 { font-size: 1.2em !important; }
    h4 { font-size: 1.5em !important; }
    h3 { font-size: 1.8em !important; }
    h2 { font-size: 2.1em !important; }
    h1 { font-size: 2.5em !important; }
}

.text-nowrap { white-space: nowrap; }
/*#endregion TEXT FORMATTING */

/*#region BUTTON FORMATTING*/
.button, .button:hover, .button:disabled {
    background: unset;
    color: unset;
    border: unset;
}
.button {
    display: flex;
    justify-content: center;
    align-content: center;

    white-space: nowrap;

    text-decoration: none !important;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    width: min-content;
    height: min-content;
    padding: 8px;
    border-radius: 6px !important;

    cursor: pointer;

    font-weight: 500;

    transition-duration: 125ms;
        background-color: #1d7890;
        color: white;
}
.button:hover { background-color: white; color: #1d7890; }

.button[design='round'] { border-radius: 9999px !important; }

.button[design='square'] { border-radius: unset !important; }

.button[size='s'] { padding: 4px 8px; font-size: 14px; }
.button[size='m'] { padding: 8px; }
.button[size='l'] { padding: 12px; font-size: 18px; }

/*#endregion*/


/*#region CHAT*/
#chatbox {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#chatbox > .message {
    width: 100%;
    display: flex;
    margin: 10px 0;
}

#chatbox > .message[align='right'] {
    justify-content: end;
}


#chatbox > .message > .profile-box {
    margin: 0 5px;
}

#chatbox > .message > .profile-box > .profile {
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    font-size: 24px;
}

#chatbox > .message > .profile-box > .profile[color='gray'] {
    background-color: #000074;
    color: white;
}

#chatbox > .message > .profile-box > .profile[color='blue'] {
    background-color: #63b393;
    color: white;
}

#chatbox > .message > .text-box {
    position: relative;
    margin: 0 7px;
    background-color: #F9F9F9;
    border: 1px lightgrey solid;
    border-radius: 16px;
    padding: 10px;
}

#chatbox > .message > .text-box > .triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 11px 7px 0;
    border-color: transparent lightgrey transparent transparent;
    left: -11px;
}

#chatbox > .message > .text-box > .triangle:before {
    position: absolute;
    content: "\A";
    width: 0;
    height: 0;
    border-radius: 0 0 0 4px;
    border-style: solid;
    border-width: 6px 10px 6px 0;
    border-color: transparent #f9f9f9 transparent transparent;
    top: -6px;
    left: 2px;
}

#chatbox > .message[align='right'] > .text-box > .triangle {
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent lightgrey;
    left: unset;
    right: -11px;
}

#chatbox > .message[align='right'] > .text-box > .triangle:before {
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #f9f9f9;
    border-radius: 0 4px 0 0;
    left: unset;
    top: -6px;
    right: 2px;
}

#chatbox > .message > .text-box > .name[color='gray'] {
    color: #000074;
}

#chatbox > .message > .text-box > .name[color='blue'] {
    color: #63b393;
}

#chatbox > .message > .text-box > .name[weight='bold'] {
    font-weight: bold;
}

#chatbox > .message > .text-box > .text {
    color: black;
}

.chat-footer {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

}

.chat-footer > * {
    margin-left: 4px;
    margin-right: 4px;
}

.chat-footer > button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 50px;
    height: 50px;
    padding: 0;

    background-color: #63b393;
    color: #f5f5f9;
    border: 1px solid transparent;
    border-radius: 10000px !important;
}

.chat-footer > button:hover {
    background-color: #f5f5f5;
    color: #63b393;
    border: 1px solid #e5e5e5;
}

.chat-footer > input[type='text'] {
    padding: 24px 10px !important;
    font-size: 18px;
}


.scroll_bottom {
    display: flex;
    flex-direction: column-reverse;
}

.numero-nuovi-messaggi {
    display: flex;
    position: absolute;
    padding: 0;
    width: 20px;
    height: 20px;
    right: -10px;
    top: -10px;
    color: white;
    background-color: #ff0000;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
}

.text-red {
    color: red;
}

/*#endregion CHAT*/

/*#region MENU*/
navbar, dropbar {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #1d7890;
    width: 100%;
    height: 90px;
    padding: 0 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

navbar > * {
    margin: 0 2px;
}

navbar > a {
    display: flex;
}

navbar > a > logo {
    background-color: #c8e5eb;
    padding: 10px;
    height: 70px;
    border-radius: 4px;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.5);
}

navbar > a > logo > img {
    width: 250px;
}

navbar > menu {
    display: flex;
    flex-direction: row;
    transform: skew(-20deg);
    overflow-x: auto;
    padding: 0;
    margin: 0 12px;
}

navbar, dropbar {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

navbar > menu::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

navbar > menu::-webkit-scrollbar-track {
    background-color: transparent;
}

navbar > menu::-webkit-scrollbar-thumb {
    background-color: transparent;
    transition: background-color 125ms;
}

navbar > menu:hover::-webkit-scrollbar-thumb {
    background-color: #c8e5eb;
}

navbar > menu > * > text {
    transform: skew(20deg);
    white-space: nowrap;
}

navbar > menu > * {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
    color: #1d7890;
    font-weight: bold;
    cursor: pointer;
    min-width: 115px;
    padding: 10px;
    background: #c8e5eb;
    border-right: 1px solid lightgrey;
    transition-duration: 125ms;
}

navbar > menu > *:hover {
    background: #a5cbd3;
    color: #1d7890;
}

navbar > menu > *:first-child {
    border-radius: 4px 0 0 4px;
}

navbar > menu > *:nth-last-child(2) {
    border-radius: 0 4px 4px 0;
    border-right: none;
}

navbar > menu > *.selected, navbar > menu > *.active {
    background-color: #FFF;
}

navbar > menu > drop > routes {
    display: none;
}

dropbar {
    display: flex;
    visibility: hidden;
    opacity: 0;
    justify-content: center;
    height: 50px;
    top: 90px;
    z-index: 90;
    transition-duration: 300ms;
}

dropbar.show {
    visibility: visible;
    opacity: 1;
}

dropbar > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    color: #1d7890;
    font-weight: bold;
    cursor: pointer;
    min-width: 120px;
    padding: 10px;
    height: 100%;
    background: #c8e5eb;
    border-right: 1px solid lightgrey;
    transition-duration: 125ms;
}

dropbar > a:hover {
    background: #a5cbd3;
    color: #1d7890;
}

.mobile-only {
    display: none;
    visibility: hidden;
}

.desktop-only {
    display: flex;
    visibility: visible;
}

@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 992px) {
    navbar, dropbar {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 100%;
        opacity: 0;
        flex-direction: column;
        align-items: center;
        padding: 0;
        visibility: hidden;
        transition-duration: 300ms;
    }

    navbar {
        left: -100%;
    }

    navbar > a {
        margin: 10px 0;
        text-decoration: none !important;
    }

    navbar > menu {
        display: flex;
        flex-direction: column;
        transform: skew(0);
        width: 100%;
        padding: 0;
        margin: 0;
    }

    navbar > menu > * > text {
        transform: skew(0);
        font-size: 1.1em !important;
    }

    navbar > menu > * {
        width: 100%;
    }

    navbar > menu > *:first-child, navbar > menu > *:nth-last-child(2) {
        border-radius: unset;
    }

    navbar.show {
        visibility: visible;
        opacity: 1;
        left: 0;
    }

    dropbar {
        z-index: 110;
        justify-content: start;
        top: -50%;
    }

    dropbar.show {
        visibility: visible;
        opacity: 1;
        top: 0;
    }

    dropbar > a {
        width: 100%;
        height: unset;
    }

    .mobile-only {
        display: flex;
        visibility: visible;
    }

    .desktop-only {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 992px) {
    navbar > menu > * > text {
        font-size: 0.7em;
    }

    navbar > menu > * {
        min-width: unset;
    }
}

@media screen and (min-width: 1280px) {
    navbar > menu > * > text {
        font-size: 0.8em;
    }

    navbar > menu > * {
        min-width: unset;
    }
}

@media screen and (min-width: 1600px) {
    navbar > menu > * > text {
        font-size: 0.9em;
    }

    navbar > menu > * {
        min-width: 100px !important;
    }
}

body {
    position: unset !important;
}

.open-menu-absolute {
    margin: 5px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    z-index: 50;
    padding: 2px;
    color: whitesmoke;
    background-color: unset;
}

.open-menu-relative {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    margin: 5px;
    padding: 2px;
    color: whitesmoke;
    background-color: unset;
}

.round-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
    width: 38px;
    height: 38px;
    padding: 3px;
    border-radius: 9999px;
    background-color: white;
    color: #1d7890;
    transition-duration: 75ms;
}

.round-button:hover {
    background-color: #d9d9d9;
    color: #1d7890;
}

.round-button.for-text {
    width: unset;
    white-space: nowrap;
    padding: 6px 8px;
}

.menu-left-buttons {
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 5px 0;
    flex: 1;
}

@media screen and (max-width: 1450px) {
    .menu-left-buttons {
        flex: 0;
    }
}

/*#endregion MENU */

/*#region LOADBAR*/
loadscreen {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;

    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;

    z-index: 9999999;

    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
}

.loadbar.hide {
    visibility: hidden;
}

.loadbar {
    display: flex;
    visibility: visible;
    align-self: center;
    width: 100px;
    height: 100px;
    margin: 35px;
}

.loadbar:after {
    content: ' ';
    display: block;
    width: 95px;
    height: 95px;
    margin: 4px;
    border-radius: 50%;
    border: 12px solid #7c7c7c;
    border-color: #7c7c7c transparent #7c7c7c transparent;
    animation: loadbar 1.2s linear infinite;
}

.loadbar.light:after {
    border: 12px solid #e3e3e3;
    border-color: #e3e3e3 transparent #e3e3e3 transparent;
}

@keyframes loadbar {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*#endregion LOADBAR*/

/*#region TOOLTIP*/
body { overflow-x: hidden; }

.ss-tooltip {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(110%);
    padding: 4px;
    text-align: center;

    font-size: 12px;
    font-family: "Open Sans" !important;
    font-weight: normal;
    white-space: nowrap;
    background-color: white;
    border: 0.1em black solid;
    color: black;

    transition-duration: 125ms;
        visibility: hidden;
        opacity: 0;
}

.ss-tooltip.active {
    visibility: visible;
    opacity: 1;
}
/*#endregion TOOLTIP */

/*#region MISC */

/*#region OLD*/
*[items-space='0'] > * { margin: 0; }
*[items-space='1'] > * { margin: 3px; }
*[items-space='2'] > * { margin: 7px; }
*[items-space='3'] > * { margin: 10px; }
*[items-space='4'] > * { margin: 13px; }
*[items-space='5'] > * { margin: 15px; }
/*#endregion OLD*/

.new-button {
    all: initial;
    text-decoration: none;

    font-family: "Poppins";

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    padding: 10px 16px;

    cursor: pointer;

    border: none;
    border-radius: 99999px;
    transition-duration: 300ms;
    box-shadow: -4px 4px 4px rgba(0,0,0,0.15);
    color: white;
    background: linear-gradient(45deg, #035f72 0%, #00b5da 100%);
    background-size: 200% 200%;
}

.new-button:hover {
    text-decoration: none;
    color: white;
    background-position: 50% 50%;
    box-shadow: -6px 6px 4px rgba(0,0,0,0.15);
}

.new-button:active {
    text-decoration: none;
    box-shadow: -4px 4px 4px rgba(0,0,0,0.15);
    color: white;
    background-position: 0 0;
}


@media screen and (max-width: 840px) {
    *[responsive='tablet'] { width: 100%; }
}
@media screen and (max-width: 414px) {
    *[responsive='phone'] { width: 100%; }
}

*[child-margin='0'] > * { margin: 0; }
*[child-margin='1'] > * { margin: 3px; }
*[child-margin='2'] > * { margin: 7px; }
*[child-margin='3'] > * { margin: 10px; }
*[child-margin='4'] > * { margin: 13px; }
*[child-margin='5'] > * { margin: 15px; }

*[child-margin-x='1'] > * { margin: 0 3px; }
*[child-margin-x='2'] > * { margin: 0 7px; }
*[child-margin-x='3'] > * { margin: 0 10px; }
*[child-margin-x='4'] > * { margin: 0 13px; }
*[child-margin-x='5'] > * { margin: 0 15px; }

*[child-margin-y='1'] > * { margin: 3px 0; }
*[child-margin-y='2'] > * { margin: 7px 0; }
*[child-margin-y='3'] > * { margin: 10px 0; }
*[child-margin-y='4'] > * { margin: 13px 0; }
*[child-margin-y='5'] > * { margin: 15px 0; }

*[margin='0'] { margin: 0; }
*[margin='1'] { margin: 3px; }
*[margin='2'] { margin: 7px; }
*[margin='3'] { margin: 10px; }
*[margin='4'] { margin: 13px; }
*[margin='5'] { margin: 15px; }

*[margin-y='1'] { margin: 3px 0; }
*[margin-y='2'] { margin: 7px 0; }
*[margin-y='3'] { margin: 10px 0; }
*[margin-y='4'] { margin: 13px 0; }
*[margin-y='5'] { margin: 15px 0; }

*[margin-x='1'] { margin: 0 3px; }
*[margin-x='2'] { margin: 0 7px; }
*[margin-x='3'] { margin: 0 10px; }
*[margin-x='4'] { margin: 0 13px; }
*[margin-x='5'] { margin: 0 15px; }

*[padding='0'] { padding: 0; }
*[padding='1'] { padding: 3px; }
*[padding='2'] { padding: 7px; }
*[padding='3'] { padding: 10px; }
*[padding='4'] { padding: 13px; }
*[padding='5'] { padding: 15px; }

*[padding-y='1'] { padding: 3px 0; }
*[padding-y='2'] { padding: 7px 0; }
*[padding-y='3'] { padding: 10px 0; }
*[padding-y='4'] { padding: 13px 0; }
*[padding-y='5'] { padding: 15px 0; }

*[padding-x='1'] { padding: 0 3px; }
*[padding-x='2'] { padding: 0 7px; }
*[padding-x='3'] { padding: 0 10px; }
*[padding-x='4'] { padding: 0 13px; }
*[padding-x='5'] { padding: 0 15px; }


.fx[order='x'] > *[self-align-x='start'] { justify-self: start; }
.fx[order='x'] > *[self-align-x='center'] { justify-self: center; }
.fx[order='x'] > *[self-align-x='end'] { justify-self: end; }

.fx[order='y'] > *[self-align-x='start'] { align-self: start; }
.fx[order='y'] > *[self-align-x='center'] { align-self: center; }
.fx[order='y'] > *[self-align-x='end'] { align-self: end; }

.fx[order='x'] > *[self-align-y='start'] { align-self: start; }
.fx[order='x'] > *[self-align-y='center'] { align-self: center; }
.fx[order='x'] > *[self-align-y='end'] { align-self: end; }

.fx[order='y'] > *[self-align-y='start'] { justify-self: start; }
.fx[order='y'] > *[self-align-y='center'] { justify-self: center; }
.fx[order='y'] > *[self-align-y='end'] { justify-self: end; }


.bottone-tabella { width: 45px !important; }
.ss-responsive { width: 100%; overflow-x: auto; }
.w-lg-100 { width: 100%; }
.w-lg-auto { width: auto; }
@media screen and (max-width: 576px) {
    .w-sm-100 { width: 100%; }
    .w-sm-auto { width: auto; }
}

*[items-nowrap='desktop'] > td, *[items-nowrap='desktop'] > th { white-space: nowrap; }
@media screen and (max-width: 840px) { *[items-nowrap='tablet'] > td, *[items-nowrap='tablet'] > th { white-space: nowrap; } }
@media screen and (max-width: 414px) { *[items-nowrap='phone'] > td, *[items-nowrap='phone'] > th { white-space: nowrap; }  }

*[items-nowrap='desktop'] { white-space: nowrap; }
@media screen and (max-width: 840px) { *[items-nowrap='tablet'] { white-space: nowrap; } }
@media screen and (max-width: 414px) { *[items-nowrap='phone'] { white-space: nowrap; }  }

*[items-align-y='start'] > td, *[items-align-y='start'] > th { vertical-align: top !important; }
*[items-align-y='center'] > td, *[items-align-y='center'] > th { vertical-align: middle !important; }
*[items-align-y='end'] > td, *[items-align-y='end'] > th { vertical-align: bottom !important; }

*[items-align-x='start'] > td, *[items-align-x='start'] > th { text-align: start !important; }
*[items-align-x='center'] > td, *[items-align-x='center'] > th { text-align: center !important; }
*[items-align-x='end'] > td, *[items-align-x='end'] > th { text-align: end !important; }

*[items-align='start'] > td, *[items-align='start'] > th { text-align: start !important; vertical-align: top !important; }
*[items-align='center'] > td, *[items-align='center'] > th { text-align: center !important; vertical-align: middle !important; }
*[items-align='end'] > td, *[items-align='end'] > th { text-align: end !important; vertical-align: bottom !important; }

td[align-y='start'], th[align-y='start'] { vertical-align: top !important; }
td[align-y='center'], th[align-y='center'] { vertical-align: middle !important; }
td[align-y='end'], th[align-y='end'] { vertical-align: bottom !important; }

td[align-x='start'], th[align-x='start'] { text-align: start !important; }
td[align-x='center'], th[align-x='center'] { text-align: center !important; }
td[align-x='end'], th[align-x='end'] { text-align: end !important; }


.table-bordered { border-right: unset !important; border-left: unset !important; }
.table-bordered th:last-child, .table-bordered td:last-child { border-right: unset !important; }
.table-bordered th:first-child, .table-bordered td:first-child { border-left: unset !important; }

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0px solid #edf2f9;
    border-radius: 0.375rem;
}

ss-btn {
    display: flex;
    justify-content: center;
    align-content: center;

    padding: 8px;

    border-radius: 5px;

    color: #fff !important;
    background-color: #007992 !important;
    border: 0.1em solid #007992;
}

ss-btn:hover {
    color: #007992 !important;
    background-color: #fff !important;
    border-color: #007992 !important;
}

/*#endregion MISC */

/*#endregion NICHITA */


/* DRAG AND DROP - CALENDARIO*/

.drop_menu{
    z-index: 2000!important;
  }
  
  .opt-tools {
    height: 100%;
    width: 25px;
    right: -21px;
    position: absolute;
    border: 1px solid #E8E8E8;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .opt-edit, .opt-trash, .opt-info {
    height: 50%;
    line-height: 25px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
  }
  .opt-info {
    border-bottom: 1px solid #E8E8E8;
    border-top-right-radius: 8px;
    background-color: #fff;
    color: #0066ff;
  }
  
  .opt-info:hover {
    color: #fff;
    background-color: #0066ff;
  }
  .opt-edit {
    border-bottom: 1px solid #E8E8E8;
    border-top-right-radius: 8px;
    background-color: #fff;
    color: #ff8e00;
  }
  
  .opt-edit:hover {
    color: #fff;
    background-color: #ff8e00;
  }
  .opt-trash {
    border-bottom-right-radius: 8px;
    background-color: #fff;
    color: #cc0000;
  }
  .opt-trash:hover {
    color: #fff;
    background-color: #cc0000;
  }
  
  /* LOCK HEADER AND FIRST COLUMN */
  .table td,
  .table th {
    padding: 5px !important;
  }
  /*
  th:first-child {
    position: sticky;
    left: 0;
    z-index: 1030;
  }
  td:first-child {
   position: sticky;
    left: 0;
   z-index: 1010;
  }
  thead th {
   position: sticky;
    top: 0;
    z-index: 1020;
  }
  */

  /* ---------- END (LOCK HEADER AND FIRST COLUMN ) --------- */
  
  .datetimepicker {
    width: 70% !important;
    height: 70% !important;
  }
  
  .cal-container {
    max-width: 900px;
    max-height: 500px;
    overflow: auto;
    margin: auto;
  }
  .cal-table {
    position: relative;
    border: solid #ebebeb;
    border-width: 0 1px 0 0;
 /*   overscroll-behavior: contain;*/
  }
  .cal-thead {
    top: 0px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.04);
  }
  
  .cal-viewmonth {
    font-size: 16px;
    background: #fdfdfd;
    width: 150px;
    height: 50px;
  }
  .cal-toprow {
    width: 182px;
    min-width: 182px;
    color: #3e5569;
    background-color: #f7f9fb !important;
    border: 1px solid #ebebeb !important;
  }
  
  .cal-viewmonth,
  .cal-toprow {
    font-weight: 700 !important;
    text-align: center;
    vertical-align: middle !important;
  }
  
  .cal-userinfo {
    height: 80px;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.05);
  }
  
  .cal-tbody .cal-userinfo {
    text-align: center;
    color: hsla(210, 5%, 40%, 1);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
    background: #fdfdfd;
    padding: 0.3em;
    border: 1px solid #ebebeb;
    vertical-align: inherit;
  }

  
  .cal-usersheader {
    height: 20px;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.05);
    min-width: 150px !important;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.03em;
    padding: 0.3em;
  }
  
  .thead_th{
  z-index: 10 !important;
  }
  
  .table_new{
  
    overflow-x: scroll !important;
    overflow-y: visible !important;
   
    width: 105px !important;
    height: 70px !important;
}
  


.weekend {
    background-color: #b5b5b5;
  }
  .drag {
    z-index: 10;
    cursor: all-scroll;
  }
  .span-info {
    display: inline-block;
    padding: 0.25em 0.4em;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    width: 25px;
    background-color: red;
    cursor: pointer;
  }
  
  .ui-draggable-dragging {
    z-index: 9999 !important;
  }
  
  .cal-usercounter {
    bottom: 0;
    right: 0;
    position: absolute;
    text-align: right;
    border-radius: 0px;
    border: 2px thick red;
  }
  
  .cal-userbadge {
    border-radius: 0;
    font-weight: 600;
    font-size: 11px;
  }

.details {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #ebecee;
    padding: 0px 0px 5px 10px;
    margin: 2px;
    z-index: 1;
  }
  
  .details-uren {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    margin: 0;
    right: 0px;
    text-align: right;
    padding-right: 10px;
  }
  
  .details-task {
    margin-top: 5px;
    margin-bottom: 2px;
    font-size: 12px;
    padding: 2px 5px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 2px;
    width: 94%;
  }
  /*******/



.font-dashboard-budget{
font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* SEACHER BUTTON */

.show-searcher-button {
    display: none;
}

.space-searcher {
    display: none;
}

@media screen and (max-width: 900px) {
    .show-searcher-button {
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
        bottom: 0;
        left: 0;
        margin: 10px;
        padding: 12px;
        border-radius: 99999px !important;
        z-index: 9998;
        box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        font-size: 24px;
    }
    .space-searcher {
        display: block;
        width: 100%;
        height: 64px;
    }
}

/* END SEARCHER BUTTON */


/*colori per stato cliente in dashboard*/
.stato-N{
    color: #424242 !important;
    background-color: #CBF8FE !important;
    border-color: #CBF8FE  !important;
    }
    
    .stato-N :hover{
      background-color: rgba(0, 0, 0, 0.075) !important;
    }
    
    .stato-P{
    color: #424242 !important;
    background-color: #FFC7C7 !important;
    border-color: #FFC7C7  !important;
    }
    
    .stato-P :hover{
      background-color: rgba(0, 0, 0, 0.075) !important;
    }
    
    .stato-A{
    color: #424242 !important;
    background-color: #D0FFD2 !important;
    border-color: #D0FFD2  !important;
    }
    
    .stato-A :hover{
      background-color: rgba(0, 0, 0, 0.075) !important;
    }
    
    .stato-C{
    color: #424242$ !important;
    background-color: #FFFCC0 !important;
    border-color: #FFFCC0  !important;
    }
    
    .stato-C :hover{
      background-color: rgba(0, 0, 0, 0.075) !important;
    }