.td-overlay, .td-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.td-clock:before, .td-select:after {
  content: ""
}

.td-wrap, .td-wrap * {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-sizing: initial !important;
  -moz-box-sizing: initial !important;
  box-sizing: initial !important;
  -webkit-tap-highlight-color: transparent
}

.td-wrap svg {
  width: 100%
}

.td-input {
  cursor: pointer
}

.td-wrap {
  display: none;
  font-family: sans-serif;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  outline: 0;
  z-index: 9999;
  color: #4d4d4d
}

.td-overlay {
  position: fixed
}

.td-clock, .td-clock:before, .td-svg, .td-svg-2 {
  position: absolute
}

.td-clock {
  width: 156px;
  height: 156px;
  border-radius: 156px;
  box-shadow: 0 0 0 1px #1977CC, 0 0 0 8px rgba(0, 0, 0, .05);
  background: center no-repeat #FFF;
  margin: 0 auto;
  text-align: center;
  line-height: 156px;
  background-size: cover
}

.td-clock:before {
  top: -10px;
  margin-left: -10px;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  background: #FFF;
  border-left: 1px solid #1977CC;
  border-top: 1px solid #1977CC;
  border-top-left-radius: 4px
}

.td-init .td-deg {
  -webkit-animation: slide 1s cubic-bezier(.7, 0, .175, 1) 1.2s infinite
}

.td-svg {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

.td-svg-2 {
  top: 18px;
  left: 18px;
  bottom: 18px;
  right: 18px
}

.td-deg, .td-medirian {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute
}

.td-wrap.td-show {
  display: block
}

.td-deg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  z-index: 1
}

.td-medirian span {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  line-height: 40px;
  text-align: center;
  margin: 0 0 0 -20px;
  position: absolute;
  z-index: 2;
  left: 50%;
  font-size: .8em;
  opacity: 0;
  font-weight: 700
}

.td-medirian .td-icon-am {
  top: 40px
}

.td-medirian .td-icon-pm {
  bottom: 40px
}

.td-medirian .td-icon-am.td-on {
  top: 26px;
  opacity: 1
}

.td-medirian .td-icon-pm.td-on {
  bottom: 26px;
  opacity: 1
}

.td-select {
  position: absolute;
  top: 4px;
  left: 32px;
  right: 32px;
  bottom: 22px
}

.td-select svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0
}

.td-select:after {
  position: absolute;
  background: #FFF;
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 1px #1977CC;
  border-radius: 60px 60px 60px 0;
  top: -16px;
  left: 50%;
  margin-left: -18px;
  transform: rotate(-45deg);
  cursor: pointer
}

.td-clock .td-time {
  font-weight: 700;
  position: relative
}

.td-clock .td-time span {
  width: 42px;
  height: 42px;
  display: inline-block;
  vertical-align: middle;
  line-height: 42px;
  text-align: center;
  margin: 6px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  font-size: 2em;
  border-radius: 6px
}

.td-clock .td-time span.on {
  color: #1977CC
}

.td-n {
  -webkit-transition: all .4s cubic-bezier(.7, 0, .175, 1) 0s;
  -moz-transition: all .4s cubic-bezier(.7, 0, .175, 1) 0s;
  -ms-transition: all .4s cubic-bezier(.7, 0, .175, 1) 0s;
  transition: all .4s cubic-bezier(.7, 0, .175, 1) 0s
}

.td-n2 {
  -webkit-transition: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -ms-transition: all .2s linear 0s;
  transition: all .2s linear 0s
}

@-webkit-keyframes td-alert {
  0%, 100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
  }
}

@keyframes td-alert {
  0%, 100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
  }
}

.td-alert {
  -webkit-animation-name: td-alert;
  animation-name: td-alert;
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

@-webkit-keyframes td-bounce {
  0%, 100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }

  20% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }

  30% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1)
  }

  60% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }

  70% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }

  80% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
}

@keyframes td-bounce {
  0%, 100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }

  20% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }

  30% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1)
  }

  60% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }

  70% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }

  80% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
}

.td-bounce {
  -webkit-animation-name: td-bounce;
  animation-name: td-bounce;
  -webkit-animation-duration: 1s;
  animation-duration: 1s
}

@-webkit-keyframes td-fadein {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes td-fadein {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.td-fadein {
  -webkit-animation-name: td-fadein;
  animation-name: td-fadein;
  -webkit-animation-duration: .3s;
  animation-duration: .3s
}

@-webkit-keyframes td-fadeout {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes td-fadeout {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.td-fadeout {
  -webkit-animation: td-fadeout .3s forwards;
  animation: td-fadeout .3s forwards
}

@-webkit-keyframes td-dropdown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

@keyframes td-dropdown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.td-dropdown {
  -webkit-animation-name: td-dropdown;
  animation-name: td-dropdown;
  -webkit-animation-duration: .5s;
  animation-duration: .5s
}

.td-bulletpoint, .td-bulletpoint div, .td-lancette, .td-lancette div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.td-bulletpoint div:after, .td-lancette div:after {
  position: absolute;
  left: 50%;
  content: ""
}

.td-bulletpoint div:after {
  top: 14px;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 10px
}

.td-lancette {
  border: 2px solid #DFF3FA;
  border-radius: 100%;
  margin: 6px
}

.td-lancette div:after {
  top: 20px;
  margin-left: -1px;
  width: 2px;
  bottom: 50%;
  border-radius: 10px;
  background: #DFF3FA
}

.td-lancette div:last-child:after {
  top: 36px
}