.ez-cdtm-display-circles > div {
  overflow: visible;
}

.ez_cdtm-count-cont {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: var(--ez-cdtm-segment-spacing, 12px);
}

.ez_cdtm-count-cont > div {
  width: var(--ez-cdtm-circle-size, 190px);
  min-width: var(--ez-cdtm-circle-size, 190px);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ez_cdtm-count-cont > div h4 {
  margin: var(--ez-cdtm-circle-label-gap, 8px) 0 0 !important;
  font-size: 16px;
}

.ez-cdtm-display-circles .ez_cdtm-count-cont > div h4 {
  font-size: var(--ez-cdtm-label-size, 12px);
}

.ez-cdtm-display-circles .ez-cdtm-segment {
  border: none;
  background: transparent !important;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  min-width: auto;
}

.ez-cdtm-display-circles .ez-cdtm-value {
  min-width: 0;
  width: 100%;
  min-height: var(--ez-cdtm-circle-size, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ez-cdtm-display-circles.ez-cdtm-numbers-colon .ez_cdtm-count-cont > .ez-cdtm-segment {
  position: relative;
}

.ez-cdtm-display-circles.ez-cdtm-numbers-colon .ez_cdtm-count-cont > .ez-cdtm-segment:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + (var(--ez-cdtm-segment-spacing, 12px) / 2));
  transform: translate(-50%, -50%);
  width: calc(var(--ez-cdtm-colon-dot-size, 4px) + 2px);
  height: calc(var(--ez-cdtm-colon-dot-size, 4px) * 3);
  background:
    radial-gradient(circle at 50% calc(var(--ez-cdtm-colon-dot-size, 4px) / 2), var(--ez-cdtm-colon-color, #111) calc(var(--ez-cdtm-colon-dot-size, 4px) / 2), transparent calc(var(--ez-cdtm-colon-dot-size, 4px) / 2 + 0.2px)),
    radial-gradient(circle at 50% calc(var(--ez-cdtm-colon-dot-size, 4px) * 2.5), var(--ez-cdtm-colon-color, #111) calc(var(--ez-cdtm-colon-dot-size, 4px) / 2), transparent calc(var(--ez-cdtm-colon-dot-size, 4px) / 2 + 0.2px));
}

.ez-cdtm-display-flip_cards .ez-cdtm-segment {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  min-width: var(--ez-cdtm-box-size, 92px);
  overflow: visible;
}

.ez-cdtm-display-flip_cards .ez-cdtm-segment::before {
  content: '';
  display: var(--ez-cdtm-flip-pin-display, block);
  position: absolute;
  top: calc(var(--ez-cdtm-flip-pin-size, 14px) / -2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--ez-cdtm-flip-pin-size, 14px);
  height: var(--ez-cdtm-flip-pin-size, 14px);
  border-radius: 50%;
  background: var(--ez-cdtm-flip-pin-color, #67c23a);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  z-index: 6;
  pointer-events: none;
}

.ez-cdtm-display-flip_cards .ez-cdtm-label {
  white-space: nowrap;
  color: var(--ez-cdtm-label-color, #ffffff);
  margin-top: var(--ez-cdtm-flip-label-gap, 8px);
}

.ez-cdtm-display-flip_cards .ez-cdtm-plain-cont {
  gap: var(--ez-cdtm-flip-segment-spacing, var(--ez-cdtm-segment-spacing, 12px)) !important;
}

.ez-cdtm-display-flip_cards.ez-cdtm-numbers-colon .ez-cdtm-plain-cont {
  --ez-cdtm-effective-gap: var(--ez-cdtm-flip-segment-spacing, var(--ez-cdtm-segment-spacing, 12px));
  gap: var(--ez-cdtm-effective-gap) !important;
}

.ez-cdtm-display-flip_cards.ez-cdtm-numbers-colon .ez-cdtm-segment {
  position: relative;
}

.ez-cdtm-display-flip_cards.ez-cdtm-numbers-colon .ez-cdtm-segment:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--ez-cdtm-box-size, 92px) / 2);
  left: calc(100% + (var(--ez-cdtm-effective-gap, var(--ez-cdtm-colon-gap, 10px)) / 2));
  transform: translate(-50%, -50%);
  width: calc(var(--ez-cdtm-colon-dot-size, 4px) + 2px);
  height: calc(var(--ez-cdtm-colon-dot-size, 4px) * 3);
  background:
    radial-gradient(circle at 50% calc(var(--ez-cdtm-colon-dot-size, 4px) / 2), var(--ez-cdtm-colon-color, #111) calc(var(--ez-cdtm-colon-dot-size, 4px) / 2), transparent calc(var(--ez-cdtm-colon-dot-size, 4px) / 2 + 0.2px)),
    radial-gradient(circle at 50% calc(var(--ez-cdtm-colon-dot-size, 4px) * 2.5), var(--ez-cdtm-colon-color, #111) calc(var(--ez-cdtm-colon-dot-size, 4px) / 2), transparent calc(var(--ez-cdtm-colon-dot-size, 4px) / 2 + 0.2px));
}

.ez-cdtm-display-flip_cards .ez-cdtm-timer-shell-plain {
  padding-top: var(--ez-cdtm-flip-pin-padding-top, calc(var(--ez-cdtm-flip-pin-size, 14px) / 2 + 1px));
}

.ez-flip-digit {
  position: relative;
  width: var(--ez-cdtm-box-size, 92px);
  height: var(--ez-cdtm-box-size, 92px);
  min-width: var(--ez-cdtm-box-size, 92px);
  min-height: var(--ez-cdtm-box-size, 92px);
  font-size: var(--ez-cdtm-font-size, 18px);
  font-weight: inherit;
  color: var(--ez-cdtm-text-color, #fff);
  line-height: var(--ez-cdtm-box-size, 92px);
  letter-spacing: inherit;
  text-align: center;
  background: linear-gradient(180deg, var(--ez-cdtm-flip-bg-start, #0f8ea5) 0%, var(--ez-cdtm-flip-bg-end, #4caf34) 100%);
  border-radius: var(--ez-cdtm-flip-border-radius, var(--ez-cdtm-box-radius, 6px));
  border: 0;
  box-shadow:
    0 0 0 var(--ez-cdtm-flip-border-width, 0px) var(--ez-cdtm-flip-border-color, rgba(255, 255, 255, 0.2)),
    var(--ez-cdtm-flip-shadow, 0 8px 18px var(--ez-cdtm-flip-shadow-color, rgba(0, 0, 0, 0.15)));
  box-sizing: border-box;
  overflow: hidden;
}

.ez-cdtm-countdown-wrapper[data-display-mode="flip_cards"] {
  perspective: 1500px;
}

.ez-flip-digit .upper,
.ez-flip-digit .lower,
.ez-flip-digit .base {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.ez-flip-digit .upper,
.ez-flip-digit .base.upper {
  top: 0;
  border-bottom: solid var(--ez-cdtm-flip-divider-size, 1px) rgba(0, 0, 0, 0.1);
  transform-origin: 50% 100%;
}

.ez-flip-digit .lower,
.ez-flip-digit .base.lower {
  top: 50%;
  border-top: solid var(--ez-cdtm-flip-divider-size, 1px) rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  transform-origin: 50% 0%;
}

.ez-flip-digit .base.upper {
  z-index: 3;
}

.ez-flip-digit .base.lower {
  z-index: 2;
}

.ez-flip-digit > .upper:not(.base) {
  z-index: 4;
  opacity: 0;
}

.ez-flip-digit > .lower:not(.base) {
  z-index: 5;
  opacity: 0;
}

.ez-flip-digit .upper,
.ez-flip-digit .base.upper {
  align-items: flex-start;
  line-height: var(--ez-cdtm-box-size, 92px);
  padding-top: 0;
}

.ez-flip-digit .lower,
.ez-flip-digit .base.lower {
  align-items: flex-end;
  line-height: var(--ez-cdtm-box-size, 92px);
  padding-top: 0;
}

#ez_cdtm_preview .ez-cdtm-display-circles .ez_cdtm-count-cont {
  flex-wrap: nowrap;
}

#ez_cdtm_preview .ez-cdtm-display-circles .ez_cdtm-count-cont > div {
  width: var(--ez-cdtm-circle-size, 190px);
  min-width: var(--ez-cdtm-circle-size, 190px);
  margin: 0;
}

@media (max-width: 900px) {
  #ez_cdtm_preview .ez-cdtm-display-circles .ez_cdtm-count-cont > div {
      width: min(23vw, var(--ez-cdtm-circle-size, 190px));
      min-width: min(23vw, var(--ez-cdtm-circle-size, 190px));
      margin: 0;
  }
}

@media (max-width: 600px) {
  #ez_cdtm_preview .ez-cdtm-display-circles .ez_cdtm-count-cont > div {
      width: min(22vw, var(--ez-cdtm-circle-size, 190px));
      min-width: min(22vw, var(--ez-cdtm-circle-size, 190px));
      margin: 0;
  }
}