.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;
}

.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;
}








.ctr {
    text-align: center;
}
.maincontent1 {
    background-color: #f06;
    padding: 10px;
    border-radius: 25px;
}
.textlinez1 {
    font-weight: 400;
    font-size: 16px!important;
    color: #fff!important;
}
.headlinez1 {
    font-weight: 400;
    font-size: 32px;
    color: #fff!important;
}
.maincontent2 {
    background-color: #c3f;
    padding: 10px;
    border-radius: 25px;
}
.maincontent3 {
    background-color: #39f;
    padding: 10px;
    border-radius: 25px;
}
.maincontent4 {
    background-color: #3c3;
    padding: 10px;
    border-radius: 25px;
}
.maincontent5 {
    background-color: #f93;
    padding: 10px;
    border-radius: 25px;
}
.maincontent6 {
    background-color: #90f;
    padding: 10px;
    border-radius: 25px;
}
.maincontent7 {
    background-color: #0c9;
    padding: 10px;
    border-radius: 25px;

}
.maincontent8 {
    background-color: #333300;
    padding: 10px;
    border-radius: 25px;    
    
    
}
.maincontent9 {
    background-color: #ff0066;
    padding: 10px;
    border-radius: 25px;
    
    
}
.maincontent10 {
    background-color: #993366;
    padding: 10px;
    border-radius: 25px;
    
    
    
}
.maincontent11 {
    background-color: #CC9900;
    padding: 10px;
    border-radius: 25px;
    
}
.maincontent12 {
    background-color: #00a600;
    padding: 10px;
    border-radius: 25px;


}

.maincontent13 {
    background-color: #c3f;
    padding: 10px;
    border-radius: 25px;
}
.maincontent14 {
    background-color: #39f;
    padding: 10px;
    border-radius: 25px;
}
.maincontent15 {
    background-color: #3c3;
    padding: 10px;
    border-radius: 25px;
}
.maincontent16 {
    background-color: #f93;
    padding: 10px;
    border-radius: 25px;
}
.maincontent17 {
    background-color: #90f;
    padding: 10px;
    border-radius: 25px;
}
.maincontent18 {
    background-color: #0c9;
    padding: 10px;
    border-radius: 25px;

}
.maincontent19 {
    background-color: #333300;
    padding: 10px;
    border-radius: 25px;    
    
    
}
.maincontent20 {
    background-color: #ff0066;
    padding: 10px;
    border-radius: 25px;
    
    
}
.maincontent21 {
    background-color: #993366;
    padding: 10px;
    border-radius: 25px;
    
    
    
}
.maincontent22 {
    background-color: #CC9900;
    padding: 10px;
    border-radius: 25px;
    
}
.maincontent23 {
    background-color: #00a600;
    padding: 10px;
    border-radius: 25px;    
    
}
.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;
}
.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;
}
.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;
}







.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;
}