.flip-clock{--border-radius:.15em;--font-size:4.5em;--font-family:"Helvetica Neue",Helvetica,sans-serif;--width:1em;--height:1.45em;--animation-duration:.25s;--animation-delay:var(--animation-duration);font-family:var(--font-family);font-size:var(--font-size);-webkit-user-select:none;user-select:none;text-align:center;box-sizing:border-box;align-items:flex-end;gap:.25rem;width:100%;display:inline-flex;position:relative}.flip-clock .flip-clock-label{margin-bottom:.5rem;font-size:1rem}.flip-clock .flip-clock-meridium{text-transform:uppercase;flex:0;width:auto;font-weight:200;line-height:1em;top:50%;left:100%;transform:translate(.5em,-50%)}.flip-clock .flip-clock-divider{color:#333;height:var(--height);justify-content:center;align-items:center;font-family:serif;display:flex;position:relative}.flip-clock .flip-clock-divider .flip-clock-divider-inner{font-size:1.25em}.flip-clock .flip-clock-divider[data-value=\ ]{min-width:1rem}.dark .flip-clock .flip-clock-divider{color:#ccc}.flip-clock .flip-clock-group{flex-direction:column;display:flex}.flip-clock .flip-clock-group+.flip-clock-group{margin-left:1rem}.flip-clock .flip-clock-group .flip-clock-group-items{align-items:end;gap:.25rem;display:flex}.flip-clock .flip-clock-card{width:var(--width);height:var(--height);border-radius:var(--border-radius);color:#ccc;flex-shrink:0;font-weight:700;position:relative;box-shadow:0 1.5px 3px #0000003d,0 3px 8px #0000000d}.flip-clock .flip-clock-card:not(.animate) .active .flip-clock-card-item-inner{z-index:4}.flip-clock .flip-clock-card:not(.animate) .flip-clock-card-item-inner .top:after,.flip-clock .flip-clock-card:not(.animate) .flip-clock-card-item-inner .bottom:after{display:none}.flip-clock .flip-clock-card .flip-clock-card-item-inner{width:100%;height:100%;position:absolute}.flip-clock .flip-clock-card .flip-clock-card-item-inner:first-child{z-index:2}.flip-clock .flip-clock-card .flip-clock-card-item-inner .top,.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom{background:#333;width:100%;height:50%;font-size:1em;position:relative;overflow:hidden;box-shadow:inset 0 0 .2em #00000080}.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:after,.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:after{content:" ";display:block;position:absolute;inset:0;overflow:hidden}.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:before,.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:before{content:" ";width:100%;height:1px;display:block;position:absolute}.flip-clock .flip-clock-card .flip-clock-card-item-inner .top{border-radius:var(--border-radius)var(--border-radius)0 0;line-height:var(--height)}.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:after{border-radius:var(--border-radius)var(--border-radius)0 0}.flip-clock .flip-clock-card .flip-clock-card-item-inner .top:before{opacity:.4;background:#333;bottom:0}.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom{border-radius:0 0 var(--border-radius)var(--border-radius);line-height:0}.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:after{border-radius:0 0 var(--border-radius)var(--border-radius)}.flip-clock .flip-clock-card .flip-clock-card-item-inner .bottom:before{opacity:.1;background:#ccc}.flip-clock .flip-clock-card.animate{animation-duration:var(--animation-duration);animation-delay:var(--animation-delay)}.flip-clock .flip-clock-card.animate .flip-clock-card-item-inner{perspective:15em}.flip-clock .flip-clock-card.animate .top,.flip-clock .flip-clock-card.animate .bottom,.flip-clock .flip-clock-card.animate .active,.flip-clock .flip-clock-card.animate .active>div,.flip-clock .flip-clock-card.animate .before,.flip-clock .flip-clock-card.animate .before>div{animation-delay:inherit;animation-fill-mode:forwards;animation-duration:inherit;animation-timing-function:inherit}.flip-clock .flip-clock-card.animate .top:after,.flip-clock .flip-clock-card.animate .bottom:after,.flip-clock .flip-clock-card.animate .active:after,.flip-clock .flip-clock-card.animate .active>div:after,.flip-clock .flip-clock-card.animate .before:after,.flip-clock .flip-clock-card.animate .before>div:after{animation-duration:inherit;animation-fill-mode:inherit}.flip-clock .flip-clock-card.animate .before{animation-timing-function:ease-in;animation-delay:0s}.flip-clock .flip-clock-card.animate .before .top{animation-name:flip-clock-top}.flip-clock .flip-clock-card.animate .before .top:after,.flip-clock .flip-clock-card.animate .before .bottom:after{animation-name:flip-clock-show-shadow}.flip-clock .flip-clock-card.animate .active{animation-timing-function:ease-out}.flip-clock .flip-clock-card.animate .active>div{animation-name:flip-clock-indexing}.flip-clock .flip-clock-card.animate .active .top:after,.flip-clock .flip-clock-card.animate .active .bottom:after{animation-name:flip-clock-hide-shadow}.flip-clock .flip-clock-card.animate .active .bottom{animation-name:flip-clock-bottom}.flip-clock .flip-clock-card .active{z-index:2}.flip-clock .flip-clock-card .active .bottom{z-index:2;transform-origin:top}.flip-clock .flip-clock-card .before{z-index:3}.flip-clock .flip-clock-card .before .top{z-index:2;transform-origin:bottom}.flip-clock .flip-clock-card .before .top:after{background:linear-gradient(#0000001a 0%,#000 100%)}.flip-clock .flip-clock-card .before .bottom:after{background:linear-gradient(#000 0%,#0000001a 100%)}@keyframes flip-clock-indexing{0%{z-index:2}1%{z-index:3}to{z-index:4}}@keyframes flip-clock-bottom{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes flip-clock-top{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-clock-show-shadow{0%{opacity:0}to{opacity:1}}@keyframes flip-clock-hide-shadow{0%{opacity:1}to{opacity:0}}