body
{
	font-family: Vazir;
	background-color: #f7f8f9;
    font-size: 14px;
    direction: rtl;
	margin: 0px;
	padding: 0px;
}

.block
{
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    padding: 20px;
	text-align: right;
}

#block-parent
{
	display: flex;
	height: 100%;
}
#block-right
{
	width: 242px;
    margin: 20px 20px;
}
#block-middle
{
    margin: 20px 0px;
    margin-top: 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
#block-left
{
	width: 50px;
    margin: 20px 20px;
    padding: 0px;
	display: flex;
	flex-direction: column;
}

#block-avatar
{
	width: 200px;
	height: 300px;
}
#block-topservice
{
	height: 300px;
	float: right;
}
#block-server
{
	width: 300px;
	height: 400px;
	float: right;
}

#block-left-list
{
	flex-grow: 1;
}

.block-left-item
{
	background-color: #ffffff;
	border-left: 0px #185bf5 solid;
	width: 50px;
}
.block-left-item>img
{
	filter: invert(93%) sepia(16%) saturate(944%) hue-rotate(184deg) brightness(93%) contrast(97%);
	width: 20px;
	margin: 10px 15px;
}
.block-left-item:hover
{
	background-color: #ced4e9;
	border-left: 4px #657490 solid;
	width: 46px;
}
.block-left-item:hover>img
{
	filter: invert(49%) sepia(16%) saturate(721%) hue-rotate(181deg) brightness(86%) contrast(81%);
	width: 20px;
	margin: 10px 15px;
}
.block-left-item-selected
{
	background-color: #e6edff;
	border-left: 4px solid #185bf5;
	width: 46px;
	border-left-color: #185bf5;
}
.block-left-item-selected>img
{
	filter: invert(22%) sepia(74%) saturate(3612%) hue-rotate(221deg) brightness(99%) contrast(94%);
	width: 20px;
	margin: 10px 15px;
}

#i-avatar
{
	width: 100px;
    border-radius: 50%;
}
#i-menu
{
	filter: invert(93%) sepia(16%) saturate(944%) hue-rotate(184deg) brightness(93%) contrast(97%);
	width: 20px;
	margin: 15px;
}
#i-logout
{
	width: 20px;
	margin: 15px;
}