body{font-family: sans-serif;
}
.users-row-wrapper{
  background-color: #ebe7e8;
  padding: 0px 10px 10px 10px;
}
.designationH{
 width:300px;display: inline-block; font-size:18px;line-height: 46px; color:#dd6124;padding-left: 7px;

}
.users-wrapper {
	padding:0;
	position:relative;
	margin-bottom:10px;
	background:#fff;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
	box-shadow:0 1px 0 rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1)
}
.users-wrapper.green {
	border-top:2px solid #91c46b
}
.users-wrapper.yellow {
	border-top:2px solid #ffd65f
}
.users-wrapper.red {
	border-top:2px solid #e77338
}
.users-wrapper.blue {
	border-top:2px solid #5e83bf;
}
.users-wrapper.violet {
	border-top:2px solid #c790e1;
}
.users-wrapper .users-info {
	padding:15px
}
.users-wrapper .users-info .users-avatar {
	width:60px;
	height:60px;
	float:left
}
.users-wrapper .users-info .users-avatar img {
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px
}
.users-wrapper .users-info .users-detail {
	margin-left:75px
}
.users-wrapper .users-info .users-detail h5 {
	padding:0;
	margin:-4px 0 -1px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	font-weight: 600;
    color: #29367d;
}
.users-wrapper .users-info .users-detail p {
	margin:0;
	padding:0;
	font-size:11px;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
    font-weight: bold;
    color: #3c3c3c !important;
}
.users-wrapper ul.users-footer {
	background:#f0f0f0
}
.users-wrapper ul.users-footer li {
	float:left;
	width:40%;
	padding:10px 10px 10px 15px;
	box-sizing:border-box;
	border-left:1px solid #e0e0e0
}
.users-wrapper ul.users-footer li:first-child {
	border-left:0
}
.users-wrapper ul.users-footer li:last-child {
	width:20%;
	border-left:1;
	height: 50px;
}

.userlive{
	color: #83b85c;
    display: block;
    font-size: 17px;
}
.useroffline{
	color: #999999;
    display: block;
    font-size: 17px;
}
.users-wrapper ul.users-footer li p {
	margin:0;
	padding:0;
	line-height:100%;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	color:#0e0e0e;font-size: 12px;
}
.users-wrapper ul.users-footer li p.light {
	margin:0 0 5px;
	font-size:12px;
	color: #000000;
}
.users-wrapper ul.users-footer li .add-btn {
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	float:right;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px;
	background:#FFF;
	width:30px;
	height:30px;
	text-align:center;
	display:block
}
.users-wrapper ul.users-footer li .add-btn i {
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	color:#91c46b;
	font-size:20px;
	line-height:30px
}
.users-wrapper ul.users-footer li .add-btn.added {
	background:#91c46b
}
.users-wrapper ul.users-footer li .add-btn.added i {
	color:#fff
}
.card-wrapper {
	margin-bottom:10px;
	background:#fcfcfc;
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
	box-shadow:0 1px 0 rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
	border-top:2px solid #bfbfbf;
	-webkit-transition:all 1s ease-in-out;
	-moz-transition:all 1s ease-in-out;
	-ms-transition:all 1s ease-in-out;
	-o-transition:all 1s ease-in-out;
	transition:all 1s ease-in-out
}
.card-wrapper .card .card-type:after, .card-wrapper .card .card-type:before {
	content:"";
	bottom:-8px;
	border-top:8px solid #bfbfbf
}
.card-wrapper .card {
	padding:10px;
	text-align:center;
	position:relative;
	width:100%;
	box-sizing:border-box
}
.card-wrapper .card .card-type {
	color:#fff;
	position:absolute;
	right:15px;
	top:0;
	font-size:13px;
	background-color:#bfbfbf;
	padding:10px 5px;
	width:36px
}
.card-wrapper .card .card-type:after {
	position:absolute;
	left:0;
	border-right:16px solid transparent
}
.card-wrapper .card .card-type:before {
	position:absolute;
	right:0;
	border-left:16px solid transparent
}
.card-wrapper .card img.card-avatar {
	width:64px;
	height:64px;
	margin:30px auto;
	border:2px solid #ffd65f;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px
}
.card-wrapper .card h5 {
	text-transform:uppercase;
	font-size:13px;
	margin:0 0 10px;
	font-weight:500
}
.card-wrapper .card p {
	font-size:14px;
	margin:0 0 10px
}
.card-wrapper ul.card-actions {
	text-align:center
}
.card-wrapper ul.card-actions li {
	width:40px;
	margin:0 5px 20px;
	display:inline-block
}
.card-wrapper ul.card-actions li .action-btn {
	display:block;
	width:40px;
	height:40px;
	line-height:38px;
	background:#FFF;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	border:1px solid #ededed;
	z-index:1;
	text-align:center
}
.card-wrapper ul.card-actions li .action-btn i {
	display:block;
	font-size:24px;
	line-height:38px;
	color:#b3b3b3
}
.card-wrapper ul.card-actions li .action-btn:hover {
	border:1px solid #ccc;
	box-shadow:0 0 10px #b3b3b3
}
.card-wrapper.red {
	border-top:2px solid #e77338
}
.card-wrapper.red img.card-avatar {
	border:2px solid #e77338
}
.card-wrapper.red .card-type {
	background-color:#e77338
}
.card-wrapper.red .card-type:after, .card-wrapper.red .card-type:before {
	border-top:8px solid #e77338
}
.card-wrapper.yellow {
	border-top:2px solid #ffd65f
}
.card-wrapper.yellow img.card-avatar {
	border:2px solid #ffd65f
}
.card-wrapper.yellow .card-type {
	color:#4d4d4d;
	background-color:#ffd65f
}
.card-wrapper.yellow .card-type:after, .card-wrapper.yellow .card-type:before {
	border-top:8px solid #ffd65f
}
.card-wrapper.pink {
	border-top:2px solid #F782AA
}
.card-wrapper.pink img.card-avatar {
	border:2px solid #F782AA
}
.card-wrapper.pink .card-type {
	background-color:#F782AA
}
.card-wrapper.pink .card-type:after, .card-wrapper.pink .card-type:before {
	border-top:8px solid #F782AA
}
.card-wrapper.blue {
	border-top:2px solid #5e83bf
}
.card-wrapper.blue img.card-avatar {
	border:2px solid #5e83bf
}
.card-wrapper.blue .card-type {
	background-color:#5e83bf
}
.card-wrapper.blue .card-type:after, .card-wrapper.blue .card-type:before {
	border-top:8px solid #5e83bf
}
.card-wrapper.green {
	border-top:2px solid #91c46b
}
.card-wrapper.green img.card-avatar {
	border:2px solid #91c46b
}
.card-wrapper.green .card-type {
	background-color:#91c46b
}
.card-wrapper.green .card-type:after, .card-wrapper.green .card-type:before {
	border-top:8px solid #91c46b
}
.card-wrapper.violet {
	border-top:2px solid #597FC5
}
.card-wrapper.violet img.card-avatar {
	border:2px solid #597FC5
}
.card-wrapper.violet .card-type {
	background-color:#597FC5
}
.card-wrapper.violet .card-type:after, .card-wrapper.violet .card-type:before {
	border-top:8px solid #597FC5
}
.card-wrapper.orange {
	border-top:2px solid #FF9251
}
.card-wrapper.orange img.card-avatar {
	border:2px solid #FF9251
}
.card-wrapper.orange .card-type {
	background-color:#FF9251
}
.card-wrapper.orange .card-type:after, .card-wrapper.orange .card-type:before {
	border-top:8px solid #FF9251
}
.card-wrapper.peach {
	border-top:2px solid #FF9997
}
.card-wrapper.peach img.card-avatar {
	border:2px solid #FF9997
}
.card-wrapper.peach .card-type {
	background-color:#FF9997
}
.card-wrapper.peach .card-type:after, .card-wrapper.peach .card-type:before {
	border-top:8px solid #FF9997
}
.card-wrapper.purple {
	border-top:2px solid #C790E1
}
.card-wrapper.purple img.card-avatar {
	border:2px solid #C790E1
}
.card-wrapper.purple .card-type {
	background-color:#C790E1
}
.card-wrapper.purple .card-type:after, .card-wrapper.purple .card-type:before {
	border-top:8px solid #C790E1
}
.card-wrapper.brown {
	border-top:2px solid #987345
}
.card-wrapper.brown img.card-avatar {
	border:2px solid #987345
}
.card-wrapper.brown .card-type {
	background-color:#987345
}
.card-wrapper.brown .card-type:after, .card-wrapper.brown .card-type:before {
	border-top:8px solid #987345
}
	.users-detail{ float:left; margin-left:15px!important;}
	.contact-lnk{ float:right;}
	.contact-lnk a{ font-size:22px; line-height:1.3!important;}
	
	.users-avatar .img-responsive{ width: 100%; !important;}
	.users-row-wrapper{ background-color:none!important; padding: 0px 0px 10px 0px!important;}
	.control-label {text-align:left!important;}