.flip-clock-container {
     margin: auto;
     direction: ltr;
     padding: 0;
     margin: 0;
     list-style: none;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     --flip-bg-color: #fff;
     --flip-text-color: #000;
     --flip-dots-color: #fff;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row;
}

.flip-clock-container * {
     padding: 0;
     margin: 0;
     list-style: none;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

.flip-clock-container *::before,
.flip-clock-container *::after {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

.flip-clock-container [class|="flip-item"] {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse;
}

.flip-clock-container [class|="flip-item"]::after {
     content: ":";
     font-size: 40px;
     color: var(--flip-dots-color);
     line-height: 127px;
     
}

.flip-clock-container [class|="flip-item"]:first-child::after {
     content: none;
}

.flip-clock-container [class|="flip-item"] .flip-digit {
     width: 70px;
     height: 130px;
     position: relative;
     margin: 0 3px;
}

.flip-clock-container [class|="flip-item"] .flip-digit > span {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: block;
     -webkit-perspective: 300px;
     perspective: 300px;
}

.flip-clock-container [class|="flip-item"] .flip-digit > span::after,
.flip-clock-container [class|="flip-item"] .flip-digit > span::before {
     content: attr(data-digit);
     position: absolute;
     left: 0;
     width: 100%;
     height: 50%;
     font-size: 75px;
     font-weight: 800;
     text-align: center;
     color: var(--flip-text-color);
     background-color: var(--flip-bg-color);
     overflow: hidden;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     letter-spacing: -0.03em;
}

.flip-clock-container [class|="flip-item"] .flip-digit > span::before {
     top: 0;
     line-height: 137px;
     border-radius:10px;
     border-bottom: 1px solid #e6e5e5;
     border-right: 1px solid #e6e5e5;
     -webkit-transform-origin: bottom;
     transform-origin: bottom;
}

.flip-clock-container [class|="flip-item"] .flip-digit > span::after {
     bottom: 0;
     line-height: 7px;
     border-radius:10px;
     border-right: 1px solid #e6e5e5;
     border-bottom: 1px solid #e6e5e5;
     -webkit-transform-origin: top;
     transform-origin: top;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-next {
     z-index: 0;
     -webkit-animation: afterZIndexAnim 0.9s linear forwards;
     animation: afterZIndexAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-next::before {
     -webkit-animation: afterUpShadowAnim 0.9s linear forwards;
     animation: afterUpShadowAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-next::after {
     -webkit-animation: afterFlipAnim 0.9s linear forwards, afterDownShadowAnim 0.9s linear forwards;
     animation: afterFlipAnim 0.9s linear forwards, afterDownShadowAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-current {
     z-index: 1;
     -webkit-animation: currentZIndexAnim 0.9s linear forwards;
     animation: currentZIndexAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-current::before {
     -webkit-animation: currentFlipAnim 0.9s linear forwards, currentUpShadowAnim 0.9s linear forwards;
     animation: currentFlipAnim 0.9s linear forwards, currentUpShadowAnim 0.9s linear forwards;
}

.flip-clock-container [class|="flip-item"] .flip-digit.flipping .flip-digit-current::after {
     -webkit-animation: currentDownShadowAnim 0.9s linear forwards;
     animation: currentDownShadowAnim 0.9s linear forwards;
}

@-webkit-keyframes afterZIndexAnim {
     0% {
          z-index: 0;
     }
     100% {
          z-index: 1;
     }
}

@keyframes afterZIndexAnim {
     0% {
          z-index: 0;
     }
     100% {
          z-index: 1;
     }
}

@-webkit-keyframes currentZIndexAnim {
     0% {
          z-index: 1;
     }
     100% {
          z-index: 0;
     }
}

@keyframes currentZIndexAnim {
     0% {
          z-index: 1;
     }
     100% {
          z-index: 0;
     }
}

@-webkit-keyframes afterFlipAnim {
     0% {
          -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
     }
     100% {
          -webkit-transform: rotateX(0);
          transform: rotateX(0);
     }
}

@keyframes afterFlipAnim {
     0% {
          -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
     }
     100% {
          -webkit-transform: rotateX(0);
          transform: rotateX(0);
     }
}

@-webkit-keyframes afterUpShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 -100px 20px -10px #999;
          box-shadow: inset 0 -100px 20px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
     }
}

@keyframes afterUpShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 -100px 20px -10px #999;
          box-shadow: inset 0 -100px 20px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
     }
}

@-webkit-keyframes afterDownShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 100px 20px -10px #999;
          box-shadow: inset 0 100px 20px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
     }
}

@keyframes afterDownShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 100px 20px -10px #999;
          box-shadow: inset 0 100px 20px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0);
     }
}

@-webkit-keyframes currentFlipAnim {
     0% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
     }
     100% {
          -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
     }
}

@keyframes currentFlipAnim {
     0% {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
     }
     100% {
          -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
     }
}

@-webkit-keyframes currentUpShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
     }
     50% {
          -webkit-box-shadow: inset 0 -50px 25px -10px #999;
          box-shadow: inset 0 -50px 25px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 -100px 25px -10px #999;
          box-shadow: inset 0 -100px 25px -10px #999;
     }
}

@keyframes currentUpShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
     }
     50% {
          -webkit-box-shadow: inset 0 -50px 25px -10px #999;
          box-shadow: inset 0 -50px 25px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 -100px 25px -10px #999;
          box-shadow: inset 0 -100px 25px -10px #999;
     }
}

@-webkit-keyframes currentDownShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
     }
     50% {
          -webkit-box-shadow: inset 0 50px 25px -10px #999;
          box-shadow: inset 0 50px 25px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 100px 25px -10px #999;
          box-shadow: inset 0 100px 25px -10px #999;
     }
}

@keyframes currentDownShadowAnim {
     0% {
          -webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0);
     }
     50% {
          -webkit-box-shadow: inset 0 50px 25px -10px #999;
          box-shadow: inset 0 50px 25px -10px #999;
     }
     100% {
          -webkit-box-shadow: inset 0 100px 25px -10px #999;
          box-shadow: inset 0 100px 25px -10px #999;
     }
}
/*# sourceMappingURL=flip-clock.css.map */