*{
	margin: 0;
	padding: 0;
}
body
{
	background-color: #212c40!important;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
}
.cus-border
{
	border-bottom: 1px solid #495a6c;
}
.cus-border-r
{
	border-right: 1px solid #495a6c;
}
.left-side-maintain
{
	padding: 6% 3%;
}
.img-content 
{
	display: flex;
}
.img-content .avater
{
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 4px solid #5eebb9;
	border-radius: 50%;	
}
.online-box
{
	position: absolute;
	width: 15px;
	height: 15px;
	background-color: #5eebb9;
	border-radius: 50%;
	transform: translate(5rem,74px);
}
.content-tilte
{
	padding: 10px 20px;
}
.content-tilte h4
{
	font-size: bold;
	color: #fff;
}
.content-tilte a
{
	color: #9197a6;
	font-weight: 400;
	border-bottom: 1px solid #9197a6;
}
.content-tilte p
{
	color: #dee1ea;
}
.edit-icon
{
	position: absolute;
	right: 0;
	padding: 0px 20px;
}
.edit-icon i
{
	width: 25px;
	height: 25px;
	color: #fff;
	background-color: #5eebb9;
	font-size: 12px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0px 20px #11282c;
	cursor: pointer;
 }
 .content-left 
 {
 	padding: 20px 0;
 }
 .content-left h4
 {
	padding: 0 10px;
	font-weight: 500;
	font-size: 14px;
	color:  #5eebb9;
	text-transform: uppercase;
 }
.content-left-num
{
	display: flex;justify-content: space-between;
	padding: 0 10px;
}
.content-left-num h1
{
	color: #fff;
	font-weight: bold;
}
.content-left-num span
{
	color: #e3e1e7;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	margin-top: 20px;
}
.plat-img
{
	display: flex;
	gap: 10px;
}
.plat-img img
{
	width: 40px;
	height: 40px;
	margin-top: 10px;
}
.genres-box p
{
	background-color: #587583;
	border-radius: 50px;
	margin: 10px 0;
	padding: 3px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: -1px 1px 20px 0px #00000045;
	color: #fff;
	font-size: 12px;
}
.pera
{
	color: #a1a7b7;
	font-size: 13px;
	font-weight: bold;
}
.pera2
{
	color: #a1a7b7;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	line-height: 4px;
}
.butonn-trac button
{
	width: 100%;
	padding: 8px 20px;
	border: 2px solid #5eebb9;
	background: transparent;
	border-radius: 10px;
	color: #5eebb9;
	font-weight: bold;
	cursor: pointer;
}
.button-left1 button
{
	width: 100%;
	padding: 8px 20px;
	border: none;
	background: #488e72;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	margin-bottom: 10px;
}
.heading-right h1
{
	color: #dbdfe7;
	font-weight: bold;
	padding: 20px 0px;
}
.actueal
{
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #5eebb9;
	border-radius: 50%;
}
.actueal i
{
	color: #000;
}
.r-head h1
{
	color: #fff;
	font-weight: bold;
}
.cus-border-mus
{
	border-right: 1px solid #495a6c;
	padding: 0px 10px;
}
.edit-margin
{
	margin-top: 50px;
}
@media only screen and (max-width: 786px)
{
	.cus-border-r
	{
		border-right: none;
	}
	.cus-border-avatar
	{
	border-bottom: 1px solid #495a6c;

	}
	.heading-right h1
	{
		font-size: 34px;
	}
	.edit-margin
{
	margin-top: 10px;
}

.con-warp {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.con-warp-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}