

.status-chip {
  width: fit-content;
  border-radius: 50px;
  color: black !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: regular;
  padding: 0.4rem;
  font-family: "Roboto", sans-serif;
}
.status-chip-small {
  font-size: 0.5625rem;
  min-width: 70px;
}
.status-chip-medium {
  font-size: 0.75rem;
  min-width: 85px;
}
.status-chip-severity-ok {
  background-color: #24fc0c;
  border: 1px solid #87ff7a;
}
.status-chip-severity-warning {
  background-color: #fcac0c;
  border: 1px solid #ffce7a;
}
.status-chip-severity-error {
  background-color: #fc0c3d;
  border: 1px solid #fc0c3d;
}
div .tooltip {
  top: 2rem;
  /* transition: opacity 50ms; */
  /* transition-delay: 100ms, 250ms; */
  position: relative;
}

div .tooltip div {
  top: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  background: #020714;

  max-width: 400px;
  width: max-content;

  padding: 0.75rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  transition: all 150ms;
  transition-delay: 100ms, 250ms;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

div .tooltip span.text {
  text-align: start;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

span.popup-opener {
  text-align: end;
}
p {
  margin: 0;
  text-align: start;
  font-family: "Roboto", sans-serif;
}
h6 {
  margin: 0;
  text-align: start;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 400 !important;
}
.campetella-cloud-ui-card-title {
  font-size: 1rem;
  font-weight: 400;
}
.campetella-cloud-ui-card-subtitle {
  font-size: 0.75rem;
  font-weight: 300;
}
.campetella-cloud-ui-card {
  /* UI Properties */
  width: 100%;
  background: #111827 0% 0% no-repeat padding-box;
  border: 2px solid #252a40;
  border-radius: 10px;
  opacity: 1;
  padding: 1.8rem 1rem; /* 18px */
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}
.campetella-cloud-ui-card-left-side-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}
.campetella-cloud-ui-card .left-icon,
.left-icon {
  margin-right: 1.5rem;
}

.campetella-cloud-ui-card .campetella-cloud-ui-card-barra-inferiore {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 5px 7px;
  color: white;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: end;
  background: linear-gradient(0.25turn, #070e1e, #232635 70%);
}

.campetella-cloud-ui-card .campetella-cloud-ui-card-barra-inferiore label {
  /* Se va a capo resta a destra come su una riga (il button centra il testo). */
  text-align: right;
  font-weight: 300;
  font-size: 0.65rem;
}

.campetella-cloud-ui-card-status-container {
  min-width: 70px;
  padding: 0.4rem;
  border-radius: 50px;
  background-color: white;
  color: black !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.5625rem !important;
  position: absolute;
  top: 9px;
  right: 20px;
}
.campetella-cloud-ui-card-top-adornament-wrapper{
  position: absolute;
  top: 9px;
  right: 20px;
}
.alert-banner-wrapper {
  width: 100%;
  background: #7e061f;
  background: linear-gradient(45deg, rgb(126, 6, 31) 0%, rgb(252, 12, 45) 100%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  /* Griglia a 12 colonne */
  display: grid; /* Abilita il layout a griglia */
  grid-template-columns: repeat(12, 1fr); /* Definisce 12 colonne di uguale larghezza */
  gap: 1rem; /* Aggiunge uno spazio tra le colonne (opzionale) */
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.alert-banner-wrapper .alert-banner-wrapper-error {
  background: #7e061f;
  background: linear-gradient(45deg, rgb(126, 6, 31) 0%, rgb(252, 12, 45) 100%);
}
.alert-banner-wrapper .alert-banner-wrapper-warning {
  background: #745911;
  background: linear-gradient(45deg, rgb(116, 89, 17) 0%, rgb(252, 217, 12) 100%);
}
.alert-banner-wrapper strong,
.alert-banner-wrapper p {
  color: white;
  font-family: "Inter", sans-serif;
  margin: 0;
}
.alert-banner-wrapper .severity {
  margin-right: 100px !important;
  grid-column: span 2;
}
.alert-banner-wrapper h4 {
  font-size: 1rem !important;
}
.alert-banner-wrapper p {
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}
.alert-banner-wrapper .severity-icon {
  width: 20px;
  height: 20px;
  margin-right: 17px;
}
.alert-banner-wrapper a {
  color: white;
  text-decoration: underline;
  font-weight: 400;
}
.alert-banner-wrapper .message {
  grid-column: span 8;
  display: flex;
  align-items: center;
}
.alert-banner-wrapper .link-wrapper {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.alert-banner-wrapper .link {
  text-align: right;
  margin-right: 7px !important;
}