/*********************************************
 * Countdown Timer > Style flipping
**********************************************/
.vii-countdown-timer.style-flipping {
    --w:67px;
    --h:55px;
    --bg:var(--vii-color-blue);
    --color:#fff;
}
.txt_color_white .vii-countdown-timer.style-flipping {
    --bg:#fff;
    --color:var(--vii-color-red);
}


/* labels */
.vii-countdown-timer__label-item {
    width:var(--w); text-transform:capitalize;
    font-size:12px; font-weight:500;
}


/* flip */
.vii-countdown-timer__labels,
.vii-countdown-timer__tick > div {
    display:flex; gap:18px;
}

.vii-countdown-timer .tick-flip {
    font-size:37px;
    font-weight:700;

    width:var(--w); height:var(--h);
    margin:0;
    border-radius:2px;
    box-shadow:0 0 0 1px #d8d8d8;
}
.vii-countdown-timer .tick-flip-panel-text-wrapper {letter-spacing:-.005em; transform:translate(-4px, 4px);}
.vii-countdown-timer .tick-flip-panel {background:var(--bg); color:var(--color);}

/* avoid cls */
.vii-countdown-timer__tick:not([data-state="initialised"]) {min-height:var(--h);}


/* clock */
.vii-countdown-timer__remain-clock {width:25px; transform:translateY(-.2em);}
.style-flipping .vii-countdown-timer__remain {gap:.3em; font-weight:400;}


/* layout flip */
.style-flipping .vii-countdown-timer__inner {gap:16px;}
.style-flipping .vii-countdown-timer__item {
    width:72px; height:72px; background:linear-gradient(0deg, #f4f4f4 0%, #fefefe 100%);
    box-shadow:0 0 0 rgba(0, 0, 0, .07), 0 0 1px rgba(0, 0, 0, .05), 0 3px 3px 0 rgba(0, 0, 0, .25), 0 1px 4px 1px rgba(0, 0, 0, .12), 0 0 0 4px #f2f2f2;
}
.style-flipping .vii-countdown-timer__item:before {
    content:"";
    position:absolute; inset:2px; z-index:1; border-radius:50%;
    background:linear-gradient(0deg, #fff 0%, #ececec 100%);
}
.style-flipping .vii-countdown-timer__item .progress-ring {
    position:absolute; top:-2px; left:-2px; transform:rotate(90deg) scale(-1);
    z-index:2;
}
.style-flipping .vii-countdown-timer__item .ring-bg {
    fill:none; stroke:rgba(0, 0, 0, 0); stroke-width:2;
}
.style-flipping .vii-countdown-timer__item .ring-bar {
    fill:none;
    stroke:var(--vii-color-red); stroke-width:2; stroke-linecap:round;
    transition:stroke-dashoffset 0.8s ease;
}
.style-flipping .vii-countdown-timer__item .ring-dot {
    fill:var(--vii-color-red);
    transition:cx 0.8s ease, cy 0.8s ease;
}
.style-flipping .vii-countdown-timer__item-content {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2;
    text-align:center;
}
.style-flipping .vii-countdown-timer__item-label {
    font-size:11px;color:var(--vii-color-blue); line-height:1.2;
    text-transform:capitalize;
}
.style-flipping .vii-countdown-timer__item-value {
    font-size:32px; font-weight:700; color:var(--vii-color-red);
    line-height:1;
}