.ud-counter-container{
position:absolute;
display: block;
width:60px;
height:60px;
top:80%;
left:8px;
cursor:default;
animation: fadein 0.5s;
-moz-animation: fadein 0.5s;
-webkit-animation: fadein 0.5s;
-o-animation: fadein 0.5s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
.ud-counter-container-hide{
position:absolute;
display: block;
width:60px;
height:60px;
top:80%;
left:8px;
animation: fadeout 0.5s;
-moz-animation: fadeout 0.5s;
-webkit-animation: fadeout 0.5s;
-o-animation: fadeout 0.5s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
.ud-percentage{
top:24px;
position:relative;
}
.ud-circle{
position:relative;
font-size:11px;
font-family:Tahoma, Geneva, sans-serif;
top:5px;
left:5px;
text-align:center;
width:60px;
height:60px;
border-radius:100%;
color:#FFFFFF;
background-color:#666;
}
.ud-active-border{
position:relative;
text-align:center;
width:70px;
height:70px;
border-radius:100%;
background-color:#2752BE;
background-image:linear-gradient(95deg, transparent 50%, #8EA9EE 50%), linear-gradient(90deg, #8EA9EE 50%, transparent 50%);
}
.tooltips{
display:inline;
text-decoration:none;
}
.tooltips .ud-span{
position:absolute;
width:240px;
color:#FFFFFF;
background:#000000;
height:140px;
line-height:20px;
display:none;
border-radius:6px;
}
.tooltips .ud-span:after{
content:'';
position:absolute;
top:110px;
right:100%;
margin-top:-8px;
width:0;
height:0;
border-right:8px solid #000000;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
}
.tooltips:hover .ud-span{
display:block;
left:100%;
top:-30px;
margin-top:-50px;
margin-left:10px;
z-index:999;
padding: 8px;
direction: rtl;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-align:justify;
}
.ud-ltr{
text-align:left;
display: block;
}