/* Casovac */

#timer {
    width: 25px;
    -prefix-transform: scale(-1, 1);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.pietimer {
  position:relative;
  font-size: 200px;
  width:1em;
  height:1em;
  float: left;
  background: url(img/bg_logout_timer.png) top left no-repeat;  
}

 .pietimer > .percent {
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 3.33em;
    font-size: 0.3em;
    text-align:center;
    display: none;
}
 .pietimer > .slice {
    position:absolute;
    width:1em;
    height:1em;
    clip:rect(0px,1em,1em,0.5em);
}
 .pietimer > .slice.gt50 {
    clip:rect(auto, auto, auto, auto);

}
.pietimer > .slice > .pie {
    border: 4px solid #9a9a9a;
    position:absolute;
    width: 17px; /* 1 - (2 * border width) */
    height: 17px; /* 1 - (2 * border width) */
    clip:rect(0em,0.5em,1em,0em);
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em;
    border-radius: 0.5em;
}
 .pietimer > .slice > .pie.fill {
    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}
 .pietimer.fill > .percent {
    display: none;
}
 .pietimer.fill > .slice > .pie {
    border: transparent;
    background-color: red!important;    
    width:1em;
    height:1em;
}