//----------------------------------------------------- Timer ---------------------------------------------------------https://medium.com/geekculture/23-javascript-countdown-timer-for-website-273efc2f5618-
.develux{
.countdown-container {
  display: flex;
  max-width: 480px;
  gap: 10px;
}

.days-container,
.hours-container,
.minutes-container,
.seconds-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
  border: 2px solid #9b4e31;
  color: white;
  width: 70px;
  height: 70px;
  margin-top: 20px;
}

.days,
.hours,
.minutes,
.seconds {
  font-size: 2.5em;
  margin: 0 0;
}


.days-label,
.hours-label,
.minutes-label,
.seconds-label {
  text-transform: uppercase;
  margin-bottom: 5px;
}

@media (max-width: 800px) {

  .countdown-container {
    max-width: 90%;
  }

  .days-container,
  .hours-container,
  .minutes-container,
  .seconds-container {
    font-size: 0.8em;
    width: 70px;
    height: 70px;
  }
}

//----------------------------------------------------------------------------------------------------------------------
:root {
  --color-grey-blue: hsl(185, 32%, 47%);
  --color-red: hsl(0, 100%, 50%);
  --color-white: hsl(0, 0%, 100%);
  --color-top: hsl(159, 100%, 19%);
  --color-desaturated: hsl(159, 100%, 19%);
  --color-dark-blue: hsl(235, 16%, 14%);
  --color-black: hsl(234, 17%, 12%);
  --dot: 10px;
  --gap: 5px;
  --ff: "Red Hat Text", sans-serif;
  --fs: 14px;
  --flip: 250ms;
  --counter-height: 50px;
  --margin: 10px;
  --number: 28px;
  --radius: 8px;
  --title: 30px;
}

* {
  box-sizing: border-box;
}
.countdown-timer-location-js{
  min-width:100%;
  z-index:20;
}
/* counter */
.countdown-wrapper{
  position: relative;
  border-style:solid;
}
.counter {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: var(--gap);
  width: 100%;
  max-width: 230px;
  margin: auto;
  position: relative;
}
.counter-item {
  position: relative;
  width: 25%;
}
.counter-title {
  color: var(--color-grey-blue);
  text-align: center;
}

/* countnum */
.countnum {
  width:100%;
  position: relative;
  perspective: 500px;
  margin-bottom: 5px;
}
.develux-timer-countnum-top, .develux-timer-countnum-bottom, .develux-timer-countnum-backtop, .develux-timer-countnum-backbottom {
  position: absolute;
  width: 100%;
  left: 0;
  line-height: inherit;
  height: 50%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.develux-timer-countnum-top, .develux-timer-countnum-backtop {
  background: inherit;
  border-radius: inherit;
  top: 0;
}
.countnum.animate .develux-timer-countnum-top {
  animation: flip 250ms linear 0ms forwards;
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
  transform-origin: bottom;
  transform: rotateX(0deg);
}
.develux-timer-countnum-bottom, .develux-timer-countnum-backbottom {
  align-items: flex-end;
  background: inherit;
  border-radius: inherit;
  bottom: 0;
}
.countnum.animate .develux-timer-countnum-backbottom {
  animation: flip2 250ms linear 250ms forwards;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  transform-origin: top;
  transform: rotateX(90deg);
  z-index: 10;
}
.develux-timer-countnum-line {
  background: inherit;
  height: 0;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 50;
}
  .countnum.animate {
    .develux-timer-countnum-line {
      height: 1px;
    }
  }
}
@keyframes flip {
  100% {
    transform: rotateX(-90deg);
  }
}
@keyframes flip2 {
  100% {
    transform: rotateX(0deg);
  }
}

.develux-timer-items-loop{
  .develux-label-item{
    height: 300px;
  }
}

#develux-timer-builder{
  .develux-custom-blocks{
    display:none;
  }
}
.develux-timer-item{
  cursor: pointer;
  border: 2px solid #e2deee;
  padding: 14px;
  width: 250px;
  height: 350px;
  background: #F5F4F9;
  text-decoration: none;
  h3{
    padding: 13px 0;
    font-size: 1.3em;
    z-index:11;
    position:absolute;
    top:165px;
    left:0;
    margin: 0 15px;
    width: calc(100% - 30px);
    text-align:center
  }
  &:hover{
    border: 2px solid #e2deee;
    box-shadow: 1px 1px 1px #e0dddd;
    h3{
      color: #1d2327;
      background: RGBA(255, 255, 255, 0.9);
    }
  }
  button.develux-delete-timer-permanently{
    position:absolute;
    bottom:15px;
    left:15px;
    width:calc(100% - 30px);
  }
}