/* ---------------------------------- styles - classi che si possono usare nel tile xml */

.fs-120 {
  font-size: 120% !important;
}

.fs-110 {
  font-size: 110% !important;
}

.fs-95 {
  font-size: 95%;
}

.fs-90 {
  font-size: 90%;
}

.fs-80 {
  font-size: 80%;
}

.fs-75 {
  font-size: 75%;
}

.wpx-20 {
  width: 20px;
}

.wpx-25 {
  width: 25px;
}

.wpx-40 {
  width: 40px;
}

.wpx-60 {
  width: 60px;
}

.wpx-80 {
  width: 80px;
}

.wpx-100 {
  width: 100px;
}

.wp-100 {
  width: 100%;
}

.wp-50 {
  width: 50%;
}

.wp-33 {
  width: 33.3%;
}

.wp-25 {
  width: 25%;
}

.nowrap {
  white-space: nowrap;
}

.text-lightness {
  color: lightgray !important;
}

.text-light {
  color: darkgray !important;
}


/* ---------------------------------- tiles/page_hdr */

/* margine da applicare */

.ph-margin {
  height: 60px;
}

.ph-bck {
  background-color: var(--clr-bck-hdr);
}



/* ---------------------------------- tiles/row_btn */

button.row-btn {
  color: var(--clr-btn);
  background-color: var(--clr-bck-btn);
}

  button.row-btn:hover {
    color: var(--clr-btn);
    background: var(--clr-bck-btn-hover);
  }

  button.row-btn:focus {
    color: var(--clr-btn);
    background: var(--clr-bck-btn-hover);
  }

  button.row-btn:active {
    color: var(--clr-btn);
    background: var(--clr-bck-btn-hover);
  }



/* ---------------------------------- tiles/row_val */

/* @label (@evidence = true) */
.rv-label-ev {
  color: var(--clr-evidence);
}



/* ---------------------------------- tiles/row_hdr */

/* @title {level: 0, 1, 2, 3} */

.rh-title-0 {
  color: var(--clr-hdr-0);
}

.rh-title-1 {
  color: var(--clr-hdr-1);
  opacity: 0.8;
}

.rh-title-2 {
  color: var(--clr-hdr-2);
  opacity: 0.8;
}

.rh-title-3 {
  color: var(--clr-hdr-3);
  opacity: 0.8;
}

/* @small */

.rh-tsmall {
  font-size: 75%;
}


/* ---------------------------------- tiles/txt/badge */

.text-bg-warning2 {
  background-color: #cccc00 !important;
  color: darkslategray;
}