.phoneicon{
    display:inline-block;
    vertical-align:middle;
    width:33px;
    height:33px;
	xborder:solid red 1px;
	margin:4px;
	cursor:pointer;
	position:relative;
}
.phoneicon.disabled{
	opacity:0.3;
	cursor:default;
}


.phoneicon.phoneicon-phone{background-image:url('img/icon-phone.svg');}
.phoneicon.phoneicon-email{background-image:url('img/icon-email.svg');}
.phoneicon.phoneicon-voicemail{background-image:url('img/icon-voicemail.svg');}
.phoneicon.phoneicon-calendar{background-image:url('img/icon-calendar.svg');}
.phoneicon.phoneicon-recording{background-image:url('img/icon-recording.svg');}
.phoneicon.phoneicon-appt{background-image:url('img/icon-appt.svg');}
.phoneicon.phoneicon-sms{background-image:url('img/icon-sms.svg');}
.phoneicon.phoneicon-view{background-image:url('img/icon-view.svg');}


.phoneicon.phoneicon-recording.playing{
	background-image:url('img/icon-recording-playing.svg');
}
.phoneicon.phoneicon-voicemail.playing{
	background-image:url('img/icon-voicemail-playing.svg');
}



svg.phoneicon-progress{
	position:absolute;
	top:-6px;left:-6px;right:-6px;bottom:-6px;
    xpadding: 1px;
    display: none;
}

svg.phoneicon-progress .path1 {
	fill:none;
	stroke-width:2;
    stroke: #ddd;
}

svg.phoneicon-progress .path2 {
	fill:none;
	stroke-width:2;
	stroke-linecap:round;

    xstroke: rgba(255,255,255,.95);
    stroke: #F26522;

    transition: all 0.4s ease-out;
    xanimation: Progress .9s ease-out forwards;
}

.phoneicon.playing svg.phoneicon-progress{
	display:block;
}




.phoneicon-voicemail svg.phoneicon-progress .path2{
	stroke:#009DBB;
}