:root {
  --base-color: #cad521;
  --base-color-light: lch(from var(--base-color) calc(l + 90) c h);
  --base-color-lighter: lch(from var(--base-color) calc(l + 10) c h);
  --base-color-dark: lch(from var(--base-color) calc(l - 90) c h);
  --base-color-less-dark: lch(from var(--base-color) calc(l - 20) c h);
  --base-color-lesser-dark: lch(from var(--base-color) calc(l - 10) c h);
  
}
.dgg-popover.driver-popover {
  background-color: var(--base-color-light);
  width: 500px;
  border-radius: 10px;
  padding: 10px;
  font-size: 1.3rem;
}
.dgg-popover .driver-popover-arrow {
  border-width: 10px
}
.dgg-popover .driver-popover-footer {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.dgg-popover .dgg-driver-progress {
  margin-top: 40px;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dgg-popover .dgg-driver-progress-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dgg-popover .dgg-driver-progress-dot {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--base-color-lesser-dark);
  opacity: 0.45;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.dgg-popover .dgg-driver-progress-dot--active {
  transform: scale(1.35);
  background-color: var(--base-color-less-dark);
  opacity: 1;
}
.dgg-popover .driver-popover-arrow-side-right {
  border-right-color: var(--base-color-light);
}
.dgg-popover .driver-popover-arrow-side-left {
  border-left-color: var(--base-color-light);
}
.dgg-popover .driver-popover-arrow-side-top {
  border-top-color: var(--base-color-light);
}
.dgg-popover .driver-popover-arrow-side-bottom {
  border-bottom-color: var(--base-color-light);
}
.dgg-popover .driver-popover-next-btn,
.dgg-popover .driver-popover-prev-btn,
.dgg-popover .driver-popover-done-btn {
  padding: 5px 20px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 400;
  text-shadow: none;
  border: none;
  background-color: var(--base-color-dark);
  color: #fff;
}
.dgg-popover .driver-popover-next-btn:hover,
.dgg-popover .driver-popover-prev-btn:hover,
.dgg-popover .driver-popover-done-btn:hover {
  background-color: var(--base-color-less-dark);
  color: #fff;
}