:root{
    --color-success:#4caf50;
    --color-danger: #d0181e;
    --color-warning: rgba(251, 149, 3, 1);
   
}

.progresso .icona-custom {
    color: #000;
    line-height: 16px;
    padding: 8px 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.10);
    cursor: pointer !important;
}

/* nonSaprei343# */

.progresso{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 200px; height: 100px; /* Half circle (overflow) */
  margin-bottom: -10px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 200px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 10px solid #b5d711;     /* half gray, */
  border-bottom-color: #19b4ed;  /* half azure */
  border-right-color: #19b4ed;
}

.pr-detail{margin-top: -95px}
.pr-totale{color: #FFF; line-height: 30px ; font-size: 20px; padding-top: 9px ; background-image: url("../images/bg-circle.png");background-repeat: no-repeat;
  
  background-position: center; }

.pr-titolo  {color:#989898 ; line-height: 35px}
.pr-subtitolo-no-promo {color:#989898 ; line-height: 35px}
.pr-titolo-no-promo {color:#989898 ; line-height: 35px}

.pr-final{}
.pr-percent{width: 15%; display: inline-block ; color:#0d476d ; text-align: right ; font-size: 18px; font-weight: 700}
.pr-percent-no-promo{font-size: 18px; font-weight: 700 ; line-height: 2px}
.pr-icon{width: 24% ; display: inline-block ; text-align: center}
.pr-promo{width:40%; color: #FFF; font-size: 11px; background-color: #b5d414 ;border-radius: 2px; display: inline-block; text-align: center }


.pr-tipo-red{color:#ee2922}
.pr-tipo-green{color:#b5d711}


.out-orange:hover , .out-green:hover , .out-red:hover , .btn-table-success .icona-custom  , .btn-table-warning .icona-custom , .btn-table-danger .icona-custom{
    color: #FFF !important
}


.badge-green , .out-green:hover , .btn-table-success .icona-custom , .info-notifica-success , .info-summer-success, .badge-success {
    background-color: var(--color-success) !important
}

.badge-red , .out-red:hover ,  .btn-table-danger .icona-custom  , .info-notifica-danger , .badge-danger {
    background-color: var(--color-danger) !important
}

.badge-orange , .out-orange:hover , .btn-table-warning .icona-custom , .info-notifica-warning , .info-summer-warning , .badge-warning {
   background-color:  var(--color-warning) !important
}


.btn-table .icona-custom,.btn-header .icona-custom ,
.btn-table-colored .icona-custom  {
    color: #000;
    line-height: 16px;
    padding: 8px 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.10);
}

.btn-table-colored:hover .icona-custom {
    box-shadow: none;
 
}