.u-clock-ul{
  background-color: #fff;
  position: fixed;
  list-style: none;
  height: auto;
  width: auto;
  padding: 8px 0;
  margin: 0;
  opacity: 0;
  filter:alpha(opacity=0); 
  display: block;
  border: none;
  border-radius: 2px;
  overflow: auto;
  transform: scale(0);
  transform-origin: 0 0;
  border:1px solid \9;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display:none \9;
  &.is-visible{
    opacity:1;
    filter:alpha(opacity=100); 
    transform: scale(1);
    display:block \9;
    //z-index: 999;
  }
  &.is-animating {
    transition: opacity $menu-fade-duration $animation-curve-default;
    //clip $menu-expand-duration $animation-curve-default;
  }
}
.popover-title{
  padding: 8/16 * $unit 14/16 * $unit;
  margin: 0;
  font-size: 14/16 * $unit;
  background-color: #eee;
  border-bottom: 1/16 * $unit solid #e1e1e1;
  border-radius: 3/16 * $unit 3/16 * $unit 0 0;
}


.clockpicker-dial.zoom-in{
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
}


.clockpicker-popover {
  z-index: 1200;
}
.clockpicker-popover .btn {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
-ms-user-select: none;
    user-select: none;
  background-image: none;
  border: 1/16 * $unit solid transparent;
  border-radius: 0 0 4/16 * $unit 4/16 * $unit;
}
.clockpicker-popover .btn.active:focus,
.clockpicker-popover .btn:active:focus,
.clockpicker-popover .btn:focus {
  border: 1/16 * $unit solid transparent;
  outline: dotted thin;
  outline: -webkit-focus-ring-color auto 5/16 * $unit;
  outline-offset: -2/16 * $unit;
}
.clockpicker-popover .btn:focus,
.clockpicker-popover .btn:hover {
  text-decoration: none;
}
.clockpicker-popover .btn.active,
.clockpicker-popover .btn:active {
  background-image: none;
  outline: 0;
}
.clockpicker-popover .btn-default.active,
.clockpicker-popover .btn-default:active,
.clockpicker-popover .open .dropdown-toggle.btn-default {
  background-image: none;
  border: 1/16 * $unit solid transparent;
}
.clockpicker-popover .btn-block {
  display: block;
  width: 100%;
}
.clockpicker-popover .text-primary {
  color: #3f51b5;
}
.clockpicker .input-group-addon {
  cursor: pointer;
}
.clockpicker-moving {
  cursor: move;
}
.clockpicker-align-left.popover > .arrow {
  left: 25/16 * $unit;
}
.clockpicker-align-top.popover > .arrow {
  top: 17/16 * $unit;
}
.clockpicker-align-right.popover > .arrow {
  right: 25/16 * $unit;
  left: auto;
}
.clockpicker-align-bottom.popover > .arrow {
  top: auto;
  bottom: 6/16 * $unit;
}
.clockpicker-popover .popover-title {
  font-size: 24/16 * $unit;
  font-weight: 500;
  line-height: 30/16 * $unit;
  color: #757575;
  text-align: center;
  background-color: #fff;
}
.clockpicker-popover .popover-title span {
  cursor: pointer;
}
.clockpicker-popover .popover-content {
  padding: 12/16 * $unit;
  background-color: #f8f8f8;
}
.popover-content:last-child {
  border-bottom-right-radius: 5/16 * $unit;
  border-bottom-left-radius: 5/16 * $unit;
}
.clockpicker-plate {
  position: relative;
  width: 200/16 * $unit;
  height: 200/16 * $unit;
  overflow: visible;
  -webkit-user-select: none;
     -moz-user-select: none;
-ms-user-select: none;
    user-select: none;
  background-color: #fff;
  border: 1/16 * $unit solid #e0e0e0;
  border-radius: 50%;

  -webkit-touch-callout: none;
}
.clockpicker-canvas,
.clockpicker-dial {
  position: absolute;
  top: -1/16 * $unit;
  left: -1/16 * $unit;
  width: 200/16 * $unit;
  height: 200/16 * $unit;
}
.clockpicker-minutes {
  visibility: hidden;
}
.clockpicker-tick {
  position: absolute;
  width: 26/16 * $unit;
  height: 26/16 * $unit;
  line-height: 26/16 * $unit;
  color: #666;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
}
.clockpicker-tick.active,
.clockpicker-tick:hover {
  color: #fff;
  background-color: #7986cb;
}
.clockpicker-button {
  padding: 10/16 * $unit 0;
  margin: 0;
  background-color: #fff;
  background-image: none;
  border-width: 1/16 * $unit 0 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.clockpicker-button:hover {
  background-color: #eee;
  background-image: none;
}
.clockpicker-button:focus {
  outline: 0 !important;
}
.clockpicker-dial {
  -webkit-transition: -webkit-transform 350ms, opacity 350ms;
 -o-transition:-o-transform 350ms, opacity 350ms;
    transition:   transform 350ms, opacity 350ms;
}
.clockpicker-dial-out {
  opacity: 0;
}
.clockpicker-hours.clockpicker-dial-out {
  -webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
 -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}
.clockpicker-minutes.clockpicker-dial-out {
  -webkit-transform: scale(.8, .8);
-ms-transform: scale(.8, .8);
 -o-transform: scale(.8, .8);
    transform: scale(.8, .8);
}
.clockpicker-canvas {
  -webkit-transition: opacity 175ms;
 -o-transition: opacity 175ms;
    transition: opacity 175ms;
}
.clockpicker-canvas-out {
  opacity: .25;
}
.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
  stroke: none;
  fill: #3f51b5;
}
.clockpicker-canvas-bg {
  stroke: none;
  fill: #c5cae9;
}
.clockpicker-canvas-bg-trans {
  fill: #7986cb;
  fill: rgba(0, 149, 221, .25);
}
.clockpicker-canvas line {
  stroke: #3f51b5;
  stroke-width: 1;
  stroke-linecap: round;
}
.clockpicker-button.am-button {
  padding: 5/16 * $unit;
  margin: 1/16 * $unit;
  border: 1/16 * $unit solid rgba(0, 0, 0, .2);
  border-radius: 4/16 * $unit;
}
.clockpicker-button.pm-button {
  padding: 5/16 * $unit;
  margin: 1/16 * $unit 1/16 * $unit 1/16 * $unit 136/16 * $unit;
  border: 1/16 * $unit solid rgba(0, 0, 0, .2);
  border-radius: 4/16 * $unit;
}

.clockpicker-tick-1{
  left: 87/16 * $unit; top: 7/16 * $unit;
}
.clockpicker-tick-2{
  left: 114/16 * $unit; top: 40.2346/16 * $unit; font-size: 120%;
}
.clockpicker-tick-3{left: 133.765/16 * $unit; top: 60/16 * $unit; font-size: 120%;}
.clockpicker-tick-4{left: 141/16 * $unit; top: 87/16 * $unit; font-size: 120%;}
.clockpicker-tick-5{left: 133.765/16 * $unit; top: 114/16 * $unit; font-size: 120%;}
.clockpicker-tick-6{left: 114/16 * $unit; top: 133.765/16 * $unit; font-size: 120%;}
.clockpicker-tick-7{left: 87/16 * $unit; top: 141/16 * $unit; font-size: 120%;}
.clockpicker-tick-8{left: 60/16 * $unit; top: 133.765/16 * $unit; font-size: 120%;}
.clockpicker-tick-9{left: 40.2346/16 * $unit; top: 114/16 * $unit; font-size: 120%;}
.clockpicker-tick-10{left: 33/16 * $unit; top: 87/16 * $unit; font-size: 120%;}
.clockpicker-tick-11{left: 40.2346/16 * $unit; top: 60/16 * $unit; font-size: 120%;}
.clockpicker-tick-12{left: 60/16 * $unit; top: 40.2346/16 * $unit; font-size: 120%;}
.clockpicker-tick-13{left: 87/16 * $unit; top: 33/16 * $unit; font-size: 120%;}
.clockpicker-tick-14{left: 127/16 * $unit; top: 17.718/16 * $unit;}
.clockpicker-tick-15{left: 156.282/16 * $unit; top: 47/16 * $unit;}
.clockpicker-tick-16{left: 167/16 * $unit; top: 87/16 * $unit;}
.clockpicker-tick-17{left: 156.282/16 * $unit; top: 127/16 * $unit;}
.clockpicker-tick-18{left: 127/16 * $unit; top: 156.282/16 * $unit;}
.clockpicker-tick-19{left: 87/16 * $unit; top: 167/16 * $unit;}
.clockpicker-tick-20{left: 47/16 * $unit; top: 156.282/16 * $unit;}
.clockpicker-tick-21{left: 17.718/16 * $unit; top: 127/16 * $unit;}
.clockpicker-tick-22{left: 7/16 * $unit; top: 87/16 * $unit;}
.clockpicker-tick-23{left: 17.718/16 * $unit; top: 47/16 * $unit;}
.clockpicker-tick-24{left: 47/16 * $unit; top: 17.718/16 * $unit;}


.clockpicker-tick-25{left: 87/16 * $unit; top: 7/16 * $unit; font-size: 120%;}
.clockpicker-tick-26{left: 127/16 * $unit; top: 17.718/16 * $unit; font-size: 120%;}
.clockpicker-tick-27{left: 156.282/16 * $unit; top: 47/16 * $unit; font-size: 120%;}
.clockpicker-tick-28{left: 167/16 * $unit; top: 87/16 * $unit; font-size: 120%;}
.clockpicker-tick-29{left: 156.282/16 * $unit; top: 127/16 * $unit; font-size: 120%;}
.clockpicker-tick-30{left: 127/16 * $unit; top: 156.282/16 * $unit; font-size: 120%;}
.clockpicker-tick-31{left: 87/16 * $unit; top: 167/16 * $unit; font-size: 120%;}
.clockpicker-tick-32{left: 47/16 * $unit; top: 156.282/16 * $unit; font-size: 120%;}
.clockpicker-tick-33{left: 17.718/16 * $unit; top: 127/16 * $unit; font-size: 120%;}
.clockpicker-tick-34{left: 7/16 * $unit; top: 87/16 * $unit; font-size: 120%;}
.clockpicker-tick-35{left: 17.718/16 * $unit; top: 47/16 * $unit; font-size: 120%;}
.clockpicker-tick-36{left: 47/16 * $unit; top: 17.718/16 * $unit; font-size: 120%;}


.clockpicker-svg{
      width: 12.5rem;
    height: 12.5rem;
}

.u-clock-clean{
      padding-left: 0px;
    left: 0px;
    position: absolute;
    line-height: 2.875rem;
    height: 2.875rem;
    top: 0px;
}