.templated-notifications[data-state="hidden"]{
	display: none;
}
.templated-notifications{
	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-notifications>div.friend-requests{
}
.templated-notifications>div.friend-requests>ul{
	list-style: none;
    margin: 0px;
    padding: 0px;
}
.templated-notifications>div.friend-requests>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;
}
.templated-notifications>div.friend-requests>ul.awaiting-confirmation-from-you:before{
	content: "Awaiting Confirmation From You";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
}
.templated-notifications>div.friend-requests>ul.awaiting-confirmation-from-others:before{
	content: "Awaiting Confirmation From Other People";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    margin-top: 20px;
}
.templated-notifications>div.friend-requests>ul>li img.avatar{
	width: 100%;
}
.templated-notifications>div.friend-requests>ul>li img.flag{
	height: 12px;
    vertical-align: middle;
    margin-right: 4px;
}
.templated-notifications>div.friend-requests>ul>li p.user{
	color: #e145fc;
    font-size: 15px;
	margin: 0px;
    margin-top: 10px;
}
.templated-notifications>div.friend-requests>ul>li p.aka{
	color: #3f11d2;
    font-size: 12px;
    margin: 0px;
    margin-bottom: 10px;
    word-break: break-all;
}
.templated-notifications>div.friend-requests>ul>li .actions{
}
.templated-notifications>div.friend-requests>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-notifications>div.friend-requests>ul>li .actions button.accept{
	background-color: #09b75f;
}
.templated-notifications>div.friend-requests>ul>li .actions button.reject{
	background-color: #e52828;
}
.templated-notifications>div.friend-requests>ul>li .actions button.cancel{
	width: 100%;
    background-color: #e52828;
}

.templated-notifications>div.friend-requests>ul.awaiting-confirmation-from-you:empty:after{
	content: "Nothing to do here :)";
	display: block;
	text-align: center;
	padding: 50px;
	color: #666;
	font-size: 13px;
}
.templated-notifications>div.friend-requests>ul.awaiting-confirmation-from-others:empty:after{
	content: "All Request have been replied to :)";
	display: block;
	text-align: center;
	padding: 50px;
	color: #666;
	font-size: 13px;
}
@media (max-width: 1024px) {
	.templated-notifications>div.friend-requests>ul>li p.user {
		font-size: 13px;
	}
	.templated-notifications>div.friend-requests>ul>li p.aka {
		font-size: 10px;
	}
}
@media (max-width: 920px) {
	.templated-notifications>div.friend-requests>ul>li {
		width: calc(33.33% - 28px);
		max-width: initial;
	}
}
@media (max-width: 768px) {
	.templated-notifications{
		left: 20px;
	}
}
@media (max-width: 640px) {
	.templated-notifications>div.friend-requests>ul>li {
		width: calc(50% - 28px);
		max-width: initial;
	}
}
@media (max-width: 480px) {
	.templated-notifications>div.friend-requests>ul>li {
		width: calc(100% - 28px);
		max-width: initial;
	}
}