.md-timepicker 
{
    width: 250px;
    height: 290px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.md-timepicker .clock-header 
{
    color: #436d7d;
    z-index: 5;
    position: absolute;
    width: 100%;
}

.md-timepicker .clock 
{
    height: 230px;
    width: 230px;
  background: rgba(152, 174, 183, 0.22);
    border-radius: 50%;
    margin: 10px;
    position: relative;
    z-index: 0;
    margin-top: 40px;
}

.md-timepicker .clock-header .time 
{
    font-size: 28px;
    font-family: sans-serif;
    text-align: center;
}

.md-timepicker .time span
{
    color: #98aeb7;
}

.md-timepicker .time span.active 
{
    color: #436d7d;
}

.md-timepicker .clock-header .ampm 
{
    font-size: 13px;
    line-height: 9px;
    font-family: sans-serif;
    text-align: center;
    padding-top: 17px;
}  

md-timepicker .hour-clock .number 
{
    position: absolute;
    font-family: sans-serif;
}

.hour-clock .md-button, .minute-clock .md-button 
{
    height: 40px;
    width: 40px;
    min-width: 0;
    border-radius: 50%;
    min-height: 0;
    padding: 0;
    color: #436d7d;
    line-height: 0px;
    font-size: 16px;
    font-weight: bold;
}

.hour-clock, .minute-clock 
{
    position: absolute;
    border-radius: 50%;
    padding: 0;
    list-style: none;
    height: 100%;
    width: 100%;
    margin: 13px auto 0px 13px;
}

.hour-clock > *, .minute-clock > *
{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -3em;
}

.hour-clock > *:nth-of-type(4) 
{
  -webkit-transform: rotate(30deg) translate(90px) rotate(-30deg);
          transform: rotate(30deg) translate(90px) rotate(-30deg);
}
.hour-clock > *:nth-of-type(5) 
{
  -webkit-transform: rotate(60deg) translate(90px) rotate(-60deg);
          transform: rotate(60deg) translate(90px) rotate(-60deg);
}
.hour-clock > *:nth-of-type(6) 
{
  -webkit-transform: rotate(90deg) translate(90px) rotate(-90deg);
          transform: rotate(90deg) translate(90px) rotate(-90deg);
}
.hour-clock > *:nth-of-type(7) 
{
  -webkit-transform: rotate(120deg) translate(90px) rotate(-120deg);
          transform: rotate(120deg) translate(90px) rotate(-120deg);
}
.hour-clock > *:nth-of-type(8) 
{
  -webkit-transform: rotate(150deg) translate(90px) rotate(-150deg);
          transform: rotate(150deg) translate(90px) rotate(-150deg);
}
.hour-clock > *:nth-of-type(9) 
{
  -webkit-transform: rotate(180deg) translate(90px) rotate(-180deg);
          transform: rotate(180deg) translate(90px) rotate(-180deg);
}
.hour-clock > *:nth-of-type(10) 
{
  -webkit-transform: rotate(210deg) translate(90px) rotate(-210deg);
          transform: rotate(210deg) translate(90px) rotate(-210deg);
}
.hour-clock > *:nth-of-type(11) 
{
  -webkit-transform: rotate(240deg) translate(90px) rotate(-240deg);
          transform: rotate(240deg) translate(90px) rotate(-240deg);
}
.hour-clock > *:nth-of-type(12) 
{
  -webkit-transform: rotate(270deg) translate(90px) rotate(-270deg);
          transform: rotate(270deg) translate(90px) rotate(-270deg);
}
.hour-clock > *:nth-of-type(1) 
{
  -webkit-transform: rotate(300deg) translate(90px) rotate(-300deg);
          transform: rotate(300deg) translate(90px) rotate(-300deg);
}
.hour-clock > *:nth-of-type(2) 
{
  -webkit-transform: rotate(330deg) translate(90px) rotate(-330deg);
          transform: rotate(330deg) translate(90px) rotate(-330deg);
}
.hour-clock > *:nth-of-type(3)
{
  -webkit-transform: rotate(360deg) translate(90px) rotate(-360deg);
          transform: rotate(360deg) translate(90px) rotate(-360deg);
}

.minute-clock > *:nth-of-type(1) 
{
  -webkit-transform: rotate(0deg) translate(90px) rotate(-0deg);
          transform: rotate(0deg) translate(90px) rotate(-0deg);
}
.minute-clock > *:nth-of-type(2) 
{
  -webkit-transform: rotate(90deg) translate(90px) rotate(-90deg);
          transform: rotate(90deg) translate(90px) rotate(-90deg);
}
.minute-clock > *:nth-of-type(3) 
{
  -webkit-transform: rotate(180deg) translate(90px) rotate(-180deg);
          transform: rotate(180deg) translate(90px) rotate(-180deg);
}
.minute-clock > *:nth-of-type(4) 
{
  -webkit-transform: rotate(270deg) translate(90px) rotate(-270deg);
          transform: rotate(270deg) translate(90px) rotate(-270deg);
}

.ampm button 
{
    background: transparent;
    border: 0;
    height: 10px;
    color: #98aeb7;
}

.ampm button:hover 
{
    color: #436d7d;
}

.ampm button.active 
{
    color: #436d7d;
}

.hour-clock.ng-hide-add, .minute-clock.ng-hide-add      
{ 
    animation:0.2s zoomOut ease; 
}

.hour-clock.ng-hide-remove, .minute-clock.ng-hide-remove
{ 
    animation:0.2s zoomIn ease; 
}

.md-timepicker .clock canvas 
{
    position: absolute;
    top: 0;
    left: 0;
}

.hour-clock .md-button.active, .minute-clock .md-button.active 
{
    background: #436d7d;
    color: white;
}

.ampm button.active:after 
{
    content: '';
    position: absolute;
    height: 7px;
    width: 7px;
    background: #436d7d;
    border-radius: 50%;
    top: 30px;
    right: 17px;
}

.md-timepicker .clock-hand 
{
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: .2s all;
}

.md-timepicker .clock-hand md-icon 
{
    width: 100%;
    height: 100%;
    fill: #436d7d;
}