/* ---- Modal de confirmação de inatividade ---- */

.my-inactivity-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--cor-modal-overlay);
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.my-inactivity-modal-overlay.my-inactivity-modal-overlay--visible {
  display: flex;
}

.my-inactivity-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.my-inactivity-countdown-text {
  font-size: 56px;
  font-weight: bold;
  color: var(--corfonteeicone);
  margin: 0;
}

.my-inactivity-monitoring-dialog {
  position: relative;
  z-index: 2001;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 96px 32px 32px 32px;

  width: 480px;
  height: 360px;
  background: var(--corsecundaria);

  border: 4px solid var(--corborda);
  border-radius: 10px;

  font-size: 30px;
  text-align: center;
}

.my-inactivity-monitoring-dialog-header {
  position: absolute;
  top: 0;
  left: 0;

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

  width: 100%;
  height: 64px;

  font-size: 24px;

  background: var(--corsecundaria);
  border-bottom: 4px solid var(--corborda);
  border-radius: 6px 6px 0 0;
}

.my-inactivity-monitoring-dialog-image {
  width: 280px;
  height: 280px;
  object-fit: cover;

  border: 4px solid var(--corborda);
  border-radius: 10px;
}

.my-inactivity-monitoring-dialog-btn-container {
  display: flex;
  gap: 16px;
}

.my-inactivity-monitoring-btn {
  width: 201px;
  height: 68px;

  padding: 8px 16px;

  border: 4px solid var(--corborda);
  border-radius: 10px;

  font-size: 32px;
  color: var(--corfonteeicone);

  cursor: pointer;

  background: var(--corprimaria);
}

.my-inactivity-countdown-text-seconds {
  font-size: 36px;
}

/* ---- fim modal inatividade ---- */