.templated-friends[data-state="hidden"]{
	display: none;
}
.templated-friends{
	display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    position: fixed;
    z-index: 999;
    left: 190px;
    top: 110px;
    background-color: rgba(0, 0, 0, 0.7);
    right: 20px;
    border-radius: 0px;
    border: solid 1px #291445;
    padding: 30px;
    bottom: 20px;
    overflow: auto;
}
.templated-friends>div.manage-friends{
}
.templated-friends>div.manage-friends>ul{
	list-style: none;
    margin: 0px;
    padding: 0px;
	position: relative;
	margin-top: 50px;
}
.templated-friends>div.manage-friends>ul>li{
	display: inline-block;
    width: calc(25% - 28px);
    vertical-align: top;
    background-color: #000;
    padding: 10px;
    margin: 4px;
    font-size: 11px;
    max-width: 156px;
	position: relative;
}
.templated-friends>div.manage-friends>ul>li img{
	width: 100%;
}
.templated-friends>div.manage-friends>ul.awaiting-confirmation-from-you:before{
	content: "Awaiting Confirmation From You";
    display: block;
    padding: 5px;
    color: #fc65fc;
    text-transform: uppercase;
    font-size: 12px;
    position: absolute;
    top: -30px;
}
.templated-friends>div.manage-friends>ul.awaiting-confirmation-from-others:before{
	display: block;
    content: "Awaiting Confirmation From Other People";
    padding: 5px;
    color: #fc65fc;
    text-transform: uppercase;
    font-size: 12px;
    position: absolute;
    top: -30px;
}
.templated-friends>div.manage-friends>ul.confirmed-friends:before{
	display: block;
    content: "Confirmed Friends";
    padding: 5px;
    color: #fc65fc;
    text-transform: uppercase;
    font-size: 12px;
    position: absolute;
    top: -30px;
}

.templated-friends>div.manage-friends>ul>li img.avatar{
	width: 100%;
}
.templated-friends>div.manage-friends>ul>li img.flag{
	height: 12px;
	width: 18px;
    vertical-align: middle;
    margin-right: 4px;
}
.templated-friends>div.manage-friends>ul>li p.user{
	color: #e145fc;
    font-size: 15px;
	margin: 0px;
    margin-top: 10px;
}
.templated-friends>div.manage-friends>ul>li p.aka{
	color: #3f11d2;
    font-size: 12px;
    margin: 0px;
    margin-bottom: 10px;
    word-break: break-all;
}
.templated-friends>div.manage-friends>ul>li .actions{
}
.templated-friends>div.manage-friends>ul>li .call-button{
	padding: 6px;
    font-size: 8px;
    vertical-align: middle;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    background: none;
    background-color: #e52828;
    cursor: pointer;
    transition: all 0.3s;
    white-space: normal;
    position: absolute;
    top: 20px;
    left: 20px;
}
.templated-friends>div.manage-friends>ul>li .call-button:hover{
	box-shadow: 0px 0px 10px 1px #e52828;
}
.templated-friends>div.manage-friends>ul>li .call-button.online{
	background-color: #099f09;
}
.templated-friends>div.manage-friends>ul>li .call-button.online:hover{
	box-shadow: 0px 0px 10px 1px #13e113;
}
.templated-friends>div.manage-friends>ul>li .call-button>img{
	width: 100%;
}
.templated-friends>div.manage-friends>ul>li .actions button{
	width: calc(50% - 2px);
    padding: 7px;
    background-color: #5d5d5d;
    color: #fff;
    font-size: 11px;
    border: none;
    border-radius: 5px;
	cursor: pointer;
}
.templated-friends>div.manage-friends>ul>li .actions button.accept{
	background-color: #09b75f;
}
.templated-friends>div.manage-friends>ul>li .actions button.reject{
	background-color: #e52828;
}
.templated-friends>div.manage-friends>ul>li .actions button.cancel{
	width: 100%;
    background-color: #e52828;
}
.templated-friends>div.manage-friends>ul>li button.remove-friend{
	width: 100%;
    padding: 7px;
    background-color: #111;
    color: #e52828;
    border: #e52828 solid 1px;
    border-radius: 5px;
    cursor: pointer;
}
.templated-friends>div.manage-friends>ul>li button.challenge-friend{
	width: 100%;
    padding: 7px;
    background-color: #000;
    color: #d5a90a;
    border: #d5a90a solid 1px;
    border-radius: 5px;
    cursor: pointer;
	margin-bottom: 20px;
	font-size: 12px;
}
.templated-friends>div.manage-friends>ul>li button.challenge-friend>img{
	margin-top: 3px;
	width: 100%;
}

.templated-friends>div.manage-friends>ul.awaiting-confirmation-from-you:empty{
	display:none;
}
.templated-friends>div.manage-friends>ul.awaiting-confirmation-from-others:empty{
	display: none;
}
.templated-friends>div.manage-friends>ul.confirmed-friends:empty:after{
	content: "You have no people in your network. Click 'LIVE' and search DIMVID users by email address to connect with people you know already using DIMVID. You can also invite the person if they are not found in the DIMVID database.";
	display: block;
	text-align: center;
	padding: 50px;
	color: #666;
	font-size: 13px;
}
@media (max-width: 1024px) {
	.templated-friends>div.manage-friends>ul>li p.user{
		font-size: 13px;
	}
	.templated-friends>div.manage-friends>ul>li p.aka{
		font-size: 10px;
	}
}
@media (max-width: 920px) {
	.templated-friends>div.manage-friends>ul>li {
        width: calc(33.33% - 28px);
        max-width: initial;
    }
}
@media (max-width: 768px) {
	.templated-friends{
		left: 20px;
	}
	.templated-friends>div.manage-friends>ul>li {
		width: calc(33.33% - 28px);
		max-width: initial;
	}
}
@media (max-width: 640px) {
	.templated-friends>div.manage-friends>ul>li {
		width: calc(50% - 28px);
		max-width: initial;
	}
}
@media (max-width: 480px) {
	.templated-friends>div.manage-friends>ul>li {
		width: calc(100% - 28px);
		max-width: initial;
	}
	.templated-friends{
		padding: 10px;
	}
}