/* تنسيق القائمة */
    .follow-menu {
        position: relative;
        display: inline-block;
    }

    .follow-dropdown {
        display: none;
        position: absolute;
        background-color: #fff;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        min-width: 180px;
        z-index: 1;
        opacity: 0; /* جعلها غير مرئية بدايةً */
        transform: translateY(-10px); /* إزاحة القائمة لأعلى */
        transition: opacity 0.3s ease, transform 0.3s ease; /* تأثيرات التحويل */
    }

    .follow-dropdown.active {
        display: block;
        opacity: 1; /* جعلها مرئية */
        transform: translateY(0); /* عودة القائمة لمكانها الأصلي */
    }

    .follow-dropdown div {
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .follow-dropdown div:hover {
        background-color: #f1f1f1;
    }

    /* أيقونات */
    .fmenu_icon i {
        font-size: 18px;
    }
    
    
    
    
    
    
    
    
    
    




 .user_item  {
    background: linear-gradient(to right, #ddd 0%,#f9cbcb 100%);
    margin-bottom: 3px;
    border: 1px dashed #000000;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: solid #000000;
    border-left-width: 3px;
}
.top_users{
    text-align: center;
    padding: 10px;
    box-shadow: inset 0 0 3px black;
    border-radius: 12px;
    background: linear-gradient(344deg, rgba(19,137,150,1) 35%, rgba(131,17,60,1) 78%);
    color: white;
    font-weight: bold;
}
.vipMsg{
    animation: rotate-scale-up-diag-1 4s linear alternate both;
    background:radial-gradient( circle farthest-corner at 48.7% 44.3%,rgb(39 78 143) 0%,rgb(38 76 140) 22.9%,rgb(67 102 160) 76.7%,rgb(87 120 175) 100.2% )!important;
    border:1px dotted white;
    border-radius:25px;
}



.user_stage {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 8px;
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 0 25px 25px 25px;
    text-align: center;
}




.ctr {
    text-align: center;
}


.ref {
    color: #fff!important;
}





















/* your custom style here */

.roomHeader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(rgba(0, 203, 255, 0.69), rgba(0, 0, 0, 0.47));
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:23px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 4px;
    cursor: pointer;
    font-size: 12px;
}


.djHeader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(#8b00d1, rgba(255, 0, 0, 0.85));
    clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#47e771;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.owner {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(rgba(255, 33, 220, 0.9), rgba(0, 0, 0, 0.47));
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#66dbdb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}


.friendHeader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(rgba(0, 255, 146, 0.69), rgba(0, 0, 0, 0.47));
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}

.vipHeader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(rgba(255, 185, 0, 0.91), rgba(0, 0, 0, 0.47));
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}

.userHeader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(rgba(0, 203, 255, 0.69), rgba(0, 0, 0, 0.47));
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}
.dj {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg, rgba(202,78,224,1) 45%, rgba(118,131,224,1) 58%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e5ff09;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}
.vip {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg, rgba(78,220,224,1) 3%, rgba(45,68,235,1) 100%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#eedeb2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}
.onlineheader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg, rgba(224,78,106,1) 3%, rgba(45,150,235,1) 100%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#ffb9cc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}
.mod {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(344deg, #ff0000 43%, rgba(72,115,223,1) 78%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}





.sgn {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(344deg, #6e4f4f 43%, #E3F2FD 78%);
    clip-path: polygon(0% 100%, /* top left */ 10px 0%, /* top left */ calc(100% - 10px) 0%, /* top right */ 100% 100%, /* top right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom left */ 100% 100% /* bottom left */);
    height: 20px;
    width: 100%;
    color: #e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}







.admin {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(344deg, rgba(61,204,160,1) 1%, rgba(223,72,128,1) 78%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#050002;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}
.hadmin {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(344deg, rgba(19,137,150,1) 35%, rgba(131,17,60,1) 78%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#feb000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}



.fdi {
    border-bottom: 1px solid #88ab5f;
    background-image: linear-gradient(344deg, #2196F3 35%, #FF6F00 78%);
    clip-path: polygon(0% 100%, /* top left */ 10px 0%, /* top left */ calc(100% - 10px) 0%, /* top right */ 100% 100%, /* top right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom left */ 100% 100% /* bottom left */);
    height: 20px;
    width: 100%;
    color: #feb000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}






.bronz {
    border-bottom: 1px solid #9c27b0; /* لون الحد بنفسجي */
    background-image: linear-gradient(344deg, rgb(156, 39, 176) 35%, rgb(255, 64, 129) 78%); /* تدرج من بنفسجي للوردي */
    clip-path: polygon(0% 100%, 10px 0%, calc(100% - 10px) 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    height: 20px;
    width: 100%;
    color: #ffeb3b; /* لون النص أصفر */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}





.frache {
    border-bottom: 1px solid #4caf50; /* لون الحد أخضر */
    background-image: linear-gradient(344deg, rgb(76, 175, 80) 35%, rgb(33, 150, 243) 78%); /* تدرج من الأخضر إلى الأزرق الفاتح */
    clip-path: polygon(0% 100%, 10px 0%, calc(100% - 10px) 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    height: 20px;
    width: 100%;
    color: #ffeb3b; /* لون النص أصفر */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}



.kahtear {
    border-bottom: 1px solid #88ab5f;
    background-image: linear-gradient(344deg, rgb(78 75 75) 35%, #FF6F00 78%);
    clip-path: polygon(0% 100%, /* top left */ 10px 0%, /* top left */ calc(100% - 10px) 0%, /* top right */ 100% 100%, /* top right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom left */ 100% 100% /* bottom left */);
    height: 20px;
    width: 100%;
    color: #feb000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}




.tohell {
    border-bottom: 2px solid #d4af37; /* ذهبي ملكي */
    background-image: linear-gradient(145deg, #2c2c2c 0%, #5e4b8b 50%, #d4af37 100%);
    clip-path: polygon(
        0% 100%, 
        12px 0%, 
        calc(100% - 12px) 0%, 
        100% 100%
    );
    height: 30px;
    width: 100%;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Cairo', sans-serif;
    cursor: pointer;
    margin-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    transition: background 0.3s ease-in-out, transform 0.2s;
}








.NOoHead {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(344deg, rgb(150 19 19) 35%, rgb(128 131 17) 78%);
    clip-path: polygon( 0% 100%, /* top left */ 10px 0%, /* top left */ calc(100% - 10px) 0%, /* top right */ 100% 100%, /* top right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom left */ 100% 100% /* bottom left */ );
    height: 20px;
    width: 100%;
    color: #feb000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}





.sadmin {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(344deg, rgba(19,27,150,1) 35%, rgba(223,72,128,1) 78%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}
.guestHeader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(rgba(0, 203, 255, 0.69), rgba(0, 0, 0, 0.47));
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}

.offlineHeader {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg, rgba(21,108,88,1) 3%, rgba(45,220,235,1) 100%);
	clip-path: 
	polygon(
		0% 100%,                 /* top left */
		10px 0%,                 /* top left */
		calc(100% - 10px) 0%,    /* top right */
		100% 100%,               /* top right */
		100% 100%,  /* bottom right */
		100% 100%,  /* bottom right */
		100% 100%,               /* bottom left */
		100% 100%      /* bottom left */
	);
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}




.zaem {
    border-bottom: 1px solid #c2a15e;
    background-image: linear-gradient(218deg, rgb(0, 210, 255) 0%, rgb(255, 215, 0) 100%);
    clip-path: polygon(
        0% 100%, /* top left */
        10px 0%, /* top left */
        calc(100% - 10px) 0%, /* top right */
        100% 100%, /* top right */
        100% 100%, /* bottom right */
        100% 100%, /* bottom right */
        100% 100%, /* bottom right */
        100% 100% /* bottom left */
    );
    height: 20px;
    width: 100%;
    color: #222222;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}




.mbda {
    border-bottom: 1px solid #8aa6c1;
    background-image: linear-gradient(218deg, rgb(63, 94, 251) 0%, rgb(252, 70, 107) 100%);
    clip-path: polygon(
        0% 100%, /* top left */
        10px 0%, /* top left */
        calc(100% - 10px) 0%, /* top right */
        100% 100%, /* top right */
        100% 100%, /* bottom right */
        100% 100%, /* bottom right */
        100% 100%, /* bottom right */
        100% 100% /* bottom left */
    );
    height: 20px;
    width: 100%;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}











.bronze {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg, rgb(0 1 1) 3%, rgb(235 225 45) 100%);
    clip-path: polygon( 0% 100%, /* top left */ 10px 0%, /* top left */ calc(100% - 10px) 0%, /* top right */ 100% 100%, /* top right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom right */ 100% 100%, /* bottom left */ 100% 100% /* bottom left */ );
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}






.fde {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg,rgb(0 1 1) 3%,rgb(240 240 240) 100%);
    clip-path: polygon( 0% 100%,10px 0%,calc(100% - 10px) 0%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100% );
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}









.zhbe {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg,rgb(0 1 1) 3%,rgb(255 187 0) 100%);
    clip-path: polygon( 0% 100%,10px 0%,calc(100% - 10px) 0%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100% );
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}







.mase {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg,rgb(215 104 15) 3%,rgb(255 255 255) 100%);
    clip-path: polygon( 0% 100%,10px 0%,calc(100% - 10px) 0%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100% );
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}


.mtfog {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg,rgb(177 174 255) 3%,rgb(0 193 208) 100%);
    clip-path: polygon( 0% 100%,10px 0%,calc(100% - 10px) 0%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100% );
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}





.mhnds {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg, #F44336 3%, #009688 100%);
    clip-path: polygon(0% 100%, 10px 0%, calc(100% - 10px) 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    height: 20px;
    width: 100%;
    color: #e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}








.kade {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg, #929191 3%, #009688 100%);
    clip-path: polygon(0% 100%, 10px 0%, calc(100% - 10px) 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    height: 20px;
    width: 100%;
    color: #e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}









.dj_booot {
    border-bottom: 1px solid #5f9bab;
    background-image: linear-gradient(218deg,rgb(177 174 255) 3%,rgb(0 193 208) 100%);
    clip-path: polygon( 0% 100%,10px 0%,calc(100% - 10px) 0%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100% );
	height:20px;
	width:100%;
	color:#e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
	display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top:1px;
}

.msahm {
    border-bottom: 1px solid #00e6ac;
    background-image: linear-gradient(218deg, #fb832e 3%, rgb(0 193 208) 100%);
    clip-path: polygon(0% 100%, 10px 0%, calc(100% - 10px) 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
    height: 20px;
    width: 100%;
    color: #e4ecec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    display: table;
    table-layout: fixed;
    padding-top: 2px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 1px;
}

 .user_stage { color: white; position: absolute; top: 0; left: 0; font-size: 8px; padding: 1px 2px; border-radius: 25px; text-align: center; z-index: 2; } 
 
 
 
 
 
 .chat_system {
     display: block;
    padding: 4px;
    overflow: visible;
    width: calc(100% - 25px) !important;
    position: relative;
    float: left;
    background: #eff4ff;
    border-radius: 0.4em;
    left: 5px;
}