.di--login-left-section {
  display: flex;
  width: 50%;
  padding: 60px;
  flex-direction: column;
  flex-shrink: 0;
}
.di--recover-left-section {
  display: flex;
  width: 50%;
  padding: 60px;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
}
.di--login-right-section {
  display: flex;
  width: 40%;
  flex-shrink: 0;
  position: relative;
}
.di--logo-head {
  align-items: start !important;
}
.di--img-right {
  width: 104%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.di--login-title {
  color: #000;
  font-family: Lexend;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.di--forgot-password {
  color: #0097cb;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.di--direitos-copy {
  color: #949eaa;
  text-align: center;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.di--remember-me {
  color: #454d57;
  font-family: Lexend;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  user-select: none;
}
.di--recover-description {
  color: #707d8d;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.di--button-back {
  color: #1b1e22;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 150% */
}
.di--recover-description {
  color: #707d8d;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.di--img-logo-left {
  width: 15%;
}
.di--did-u-remember {
  color: #1b1e22;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.di--make-login {
  color: #0097cb;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.di--panel-cliques {
  display: flex;
  width: 55%;
  height: 17%;
  padding: 14.16px;
  align-items: center;
  gap: 58px;
  border-radius: 4.72px;
  background: rgba(249, 250, 251, 0.1);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  position: absolute;
  z-index: 10;
  bottom: 17px;
  left: -135px;
}
.di--panel-cliques-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0;
  height: 100%;
}
.di--panel-cliques-title {
  text-align: left;
  margin-bottom: 4px;
  color: #545e6a;
  font-family: Lexend;
  font-size: 15.34px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  align-self: stretch;
}
.di--panel-cliques-desc {
  text-align: left;
  margin-bottom: 12px;
  color: #707d8d;
  font-family: Lexend;
  font-size: 7.08px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  align-self: stretch;
}
.di--panel-cliques-legend {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.di--legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #545e6a;
  font-family: Lexend;
  font-size: 7.08px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.di--legend-dot {
  width: 5.9px;
  height: 5.9px;
  border-radius: 50%;
  display: inline-block;
}
.di--legend-dot-valid {
  background: #0097cb;
}
.di--legend-dot-invalid {
  background: #42c1c7;
}
.di--panel-cliques-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 120px;
  min-width: 120px;
  height: 100%;
}
.di--pizza-graph-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.di--img-pizza {
  width: 100px;
  height: 100px;
  display: block;
}
.di--pizza-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.di--pizza-value {
  color: #707d8d;
  font-family: Lexend;
  font-size: 12.98px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.di--pizza-label {
  color: #949eaa;
  text-align: center;
  font-family: Lexend;
  font-size: 9.44px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* Painel superior - Total de cliques */
.di--panel-total-cliques {
  display: flex;
  width: 68%;
  height: 9%;
  padding: 12px;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  background: rgba(249, 250, 251, 0.1);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  position: absolute;
  z-index: 10;
  top: 12.5%;
  left: 32%;
}

.di--panel-total-cliques-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.di--panel-total-cliques-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  width: 100%;
}

.di--panel-total-cliques-title {
  color: var(--Netraul-Colors-500, #707d8d);
  font-family: Lexend;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  white-space: pre-line; /* Permite quebra de linha com \n */
}

.di--panel-total-cliques-value {
  color: var(--Netraul-Colors-600, #545e6a);
  font-family: Lexend;
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-left: auto; /* Empurra para a direita */
}

/* Certifique-se de que a section direita tenha position relative */
.di--login-right-section {
  position: relative;
}