.sangM{}



progress:not(value) {
/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
/* Get rid of the default appearance */
appearance: none;

/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
border: none;

/* Add dimensions */
width: 100%; height: 20px;

/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
background-color:#e5e5e5;
border-radius: 3px;

/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
color: #ff0099;
border-radius: 3px;

position: relative;
margin: 0 0 1.5em; 
}

progress[value]::-webkit-progress-bar {
background-color:#e5e5e5;
border-radius: 3px;
}

progress[value]::-webkit-progress-value {
position: relative;
background-color:#ff0099;
border-radius: 3px;

background-size: 35px 20px, 100% 100%, 100% 100%;

/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
content: '';
position: absolute;
width:5px; height:5px;
top:7px; right:7px;

background-color: white;
border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
/* Gradient background with Stripes */
background:#ff0099;
border-radius: 3px;

background-size: 35px 20px, 100% 100%, 100% 100%;

/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
background-color: #e5e5e5;
border-radius: 3px;


/* Dimensions should be similar to the parent progress element. */
width: 100%; height:20px;
}

.progress-bar span {
background-color: royalblue;
border-radius: 3px;

display: block;
text-indent: -9999px;
}

p[data-value] { 
position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
content: attr(data-value) '%';
position: absolute; right:0;
}

.rotate {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
}