@import url('../css-4.css');
@import url('../css-5.css');
@import url('../css-6.css');
@import url('../css-7.css');
@import url('../css-8.css');
@import url('../css-9.css');
@import url('../css-10.css');
@import url('../css-11.css');
.rtl_fright {
	float: right
}

.inline {
	display: inline!important
}
.username{
    height:20px;
    padding-right:5px;
}
/* chat left menu css */
.left_item_text {
 display:table-cell;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 vertical-align:middle;
 color: #000;
 padding:0px 6px;   
} 
.left_item_icon { 
 display:table-cell; 
 overflow:hidden; 
 text-overflow:ellipsis; 
 white-space:nowrap; 
 vertical-align:middle; 
 text-align:center; 
 width:26px; 
}
.ev_rank {
	height: 15px!important;
	position: absolute;
	top: 19px;
	width: 15px!important;
	background: #fbefef;
	left: 21px;
	border-radius: 25px!important
}
.priv_ev_rank {
    position: relative;
    bottom: 32px;
    font-size: 7px;
    font-weight: 600;
    width: 17px;
    padding:0;
    border-radius: 0 5px 5px 5px;
    text-align: center;
    left:20px;
}
.my_text {
	padding: 0px 5px 0 0;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	font-size:16px;
}

.cclear {
	color: #5b0404;
	border-radius: 25px;
	padding: 0 5px;
	width: 35px
}
.peep_avatar_field_preview img {
    width: 100px;
    height: 100px
}

.btn {
    border: none;
    display: inline-block;
    background: transparent;
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 8px;
    transition: all .4s;
    box-shadow: 0 1px 0 0 rgb(217, 132, 184), 0 -1px 0 0 rgba(219, 167, 218, 0.88), 1px 0 0 0 rgba(255, 165, 245, 0.9), -1px 0 0 0 rgba(240, 13, 237, 0.97), 1px -1px 0 0 rgba(5, 119, 240, 0.5), -1px 1px 0 0 rgba(120, 200, 232, 0.87), 1px 1px 0 0 rgba(217, 124, 194, 0.75), -1px -1px 0 0 rgba(180, 32, 234, 0.75);
}

.btn:hover {
    box-shadow: 0 2px 0 0 rgb(217, 132, 284), 0 -1px 0 0 rgba(259, 1675, 218, 0.88), 2px 0 0 0 rgba(150, 50, 200, 0.9), -1px 0 0 0 rgba(340, 13, 237, 0.97), 1px -1px 0 0 rgba(41, 576, 176, 0.5), -1px 1px 0 0 rgba(120, 200, 232, 0.87), -1px 0 0 0 rgba(240, 13, 237, 0.97), 1px -1px 0 0 rgba(5, 119, 240, 0.5), -1px 1px 0 0 rgba(120, 200, 232, 0.87);
    color: rgb(0, 0, 0);
    background: transparent;
}

.side_block_avatar {
    float: left;
    margin: 0 15px 5px 5px;
    position: relative;
    background-size: 100%
}

.side_block_avatar .peep_avatar {
    width: 42px!important;
    height: 42px!important;
    background: #ddd;
    padding: 4px
}

.side_block_avatar .peep_avatar img {
    width: 42px!important;
    height: 42px!important
}

.peep_greeting {
    position: relative;
    top: 20px;
    left: 0;
    font-size: 11px
}

#greeting_ico {
    width: 50px;
    height: 50px;
    z-index: 9;
    background-size: 100%!important;
    -webkit-background-size: 100%!important;
    -moz-background-size: 100%!important;
    -o-background-size: 100%!important;
    -ms-background-size: 100%!important;
    display: inline-block;
    position: absolute;
    top: 38px;
    left: 38px;
}

.quick-report-side {
    float: left;
    padding: 10px 0;
    width: 100%
}

.quick-report-side>span {
    color: #a6a8b0;
    float: left;
    font-size: 12px;
    width: 100%
}

.quick-report-side>ul {
    display: inline;
    list-style: outside none none;
    margin: 0 -1px;
    padding: 0
}

.quick-report-side>ul>li {
    float: left;
    padding: 0 1px;
    width: 33.334%
}

.quick-report-side>ul>li>div {
    background: #30313e none repeat scroll 0 0;
    float: left;
    margin-top: 16px;
    padding: 11px 0 16px;
    text-align: center;
    width: 100%
}

.quick-report-side div>strong {
    color: #fff;
    float: left;
    font-size: 17px;
    font-weight: 500;
    width: 100%
}

.user-info-wrapper {
    display: block;
    margin: 0 auto;
    margin-bottom: 0;
    margin-left: 17px
}

.tamila_mteam_elem.user_square_elem img {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    margin: 10px 0
}

.user_square_elem_desc {
    background: #c865c6;
    color: #000;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px
}

.user_square_elem_desc_name {
    margin: auto;
    padding: 9px 0
}
.user_square_elem_desc_title {
    margin: auto;
    padding-bottom: 10px
}
.color_left {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #f2b5b5;
 box-shadow: 0px 1px 1px 1px #04010191;
}
.color_wall {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #e8c675;
 box-shadow: 0px 1px 1px 1px #77726791;
 color: #000;
}
.color_news {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #91afdd7a;
 box-shadow: 0px 1px 1px 1px #0c1d1e9c;
 color: #0c4793;
}
.color_cast {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #f2b5f1;
 box-shadow: 0px 1px 1px 1px #04010191;
 color: #d202cf;
}
.color_vote {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #c691d5;
 box-shadow: 0px 1px 1px 1px #04010147;
 color: #8b00ff;
}
.color_quiz {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #daf2b7;
 box-shadow: 0px 1px 1px 1px #04010166;
 color: #017745;
}
.color_usquiz {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #f9eec3;
 box-shadow: 0px 1px 1px 1px #04010159;
 color: #b509e6cc;
}
.color_rules {
 height:21px;
 width:21px;
 border-radius:5px 5px 5px !important;
 background: #ffbcbc;
 box-shadow: 0px 1px 1px 1px #04010191;
 color: #c10000;
}
.user_item_icon {
	vertical-align: middle;
	width: 23px;
	text-align: center;
	font-size: 15px;
	margin: 3px
}
.chat_system{padding:2px 7px;border-radius:10px;background:rgb(255,255,255);background:linear-gradient(90deg, rgb(255, 255, 255) 35%, rgb(249, 206, 244) 100%);color:rgb(0, 0, 0);font-family:tahoma;font-size:12px;font-weight:bold;display: inline-block;}

.list_rank {
	height: 16px;
	width: auto;
	display: inline-block
}

.my_text .username {
	font-size: 15px;
}

.chat_ranks {
	height: 12px!important;
	padding: 0!important
}

.target_private {
	border-radius: 25px 0 25px 25px;
	font-size: 12px
}

.hunter_private {
	border-radius: 0 25px 25px 25px;
	font-size: 12px;
	background: #ffff;
    color: #000;
}

.gift-container {
	border: 1px solid #ccc;
	text-align: center
}

div.gift-container:hover {
	border: 1px solid #777
}

div.gift-container img {
	padding: 10px 5px 5px;
	height: auto;
	width: 90px;
	height: 90px
}

div.gift-desc {
	padding: 5px 3px;
	text-align: center;
	background: #260132;
	font-size: 13px;
	color: #fff
}

.gift-responsive {
	padding: 6px;
	float: left;
	width: 25%
}

@media only screen and (max-width:700px) {
	.gift-responsive {
		width: 33%;
		margin: 6px 0
	}
}

@media only screen and (max-width:500px) {
	.gift-responsive {
		width: 33%
	}
}

p.giftheading {
	padding-bottom: 5px;
	text-align: center;
	color: #20292f;
	font-size: 17px
}

div.gift-container:hover>div.gift-desc {
	background: #a703dc;
	color: #fff
}

.chat_orders {
	background: linear-gradient(#f9f0f0, #d8e2eb);
    border-radius: 80px;
    display: inline-flex;
}
.user-overlay {
    background: rgba(93, 83, 134, .8)
}

.user-info-wrapper .profile-wrapper {
    border-radius: 100px;
    position: relative
}

.user-info-wrapper .profile-wrapper.sm {
    overflow: visible;
    top: 10px;
    margin-bottom: 10px
}

.user-info-wrapper .profile-wrapper.sm img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    border-color: #fff
}

.user-info-wrapper .profile-wrapper .availability-bubble {
    height: 16px;
    width: 16px;
    border: 2px solid #30313e;
    position: absolute;
    bottom: 25px;
    right: -15px;
    border-radius: 100px
}

.user-info-wrapper .profile-wrapper .availability-bubble.online {
    background-color: #0aa699
}

.user-info-wrapper .profile-wrapper .availability-bubble.away {
    background-color: #fbb05e
}

.user-info-wrapper .profile-wrapper .availability-bubble.busy {
    background-color: #f35958
}

.user-info-wrapper .profile-wrapper .availability-bubble.offline {
    background-color: #8b91a0
}

.user-info-wrapper .user-info {
    color: #fff;
    display: inline-block;
    float: left;
    margin-left: 35px;
    margin-bottom: 10px
}

.user-info-wrapper .user-info.sm .status {
    margin-bottom: 20px;
    margin-top: 0
}

.user-info-wrapper .user-info .status {
    color: #929fa5;
    font-size: 13px;
    margin-bottom: 10px;
    margin-top: 2px;
    font-weight: 400
}

.user-info-wrapper .user-info .profile {
    float: right;
    display: inline
}

.user-info-wrapper .user-info .btn-set {
    margin-top: 10px
}

.user-info-wrapper .user-info {
    font-size: 18px;
    float: left
}

.user-info-wrapper .user-info .greeting {
    font-size: 19px;
    font-weight: 600;
    position: relative;
    top: 1.5px
}

.user-info-wrapper .user-info a {
    color: #fff
}

.user-info-wrapper .user-info a:hover {
    text-decoration: none
}

.user-info-wrapper .user-info .status-icon {
    margin: 0 5px
}

.user-info-wrapper .user-info .collapse {
    width: 18px;
    height: 18px;
    background-color: #50545c;
    position: absolute;
    right: 15px;
    margin-top: 10px
}

.user-info-wrapper .user-info .collapse i {
    position: relative;
    margin-top: -8px;
    top: -2px;
    left: 3px
}

.user-info-wrapper .user-info .collapse:hover {
    background-color: #000
}

.username2 {
    font-size: 18px;
    font-weight: 700;
    padding: 4px 0
}

.welcome-text {
    right: 5px;
    text-align: center;
    padding: 7px 25px 30px 0px;
}

.greeting_time {
    color: #fff;
    font-weight: 700;
    font-size: 14px
}

.greeting_message {
    color: #fff;
    font-weight: 400;
    font-size: 12px
}

.levelcol {
    color: white;
    position: absolute;
    top: 27px;
    right: 0px;
    font-size: 9pt;
    font-weight: 600;
    padding: 0 3px;
    border-radius: 40%;
}

.boy-back {
    background: #600a56;
}

.girl-back {
    background: #f0f;
}

.nosex-back {
    background: #e15510;
}

.bot_message {
	box-shadow: #ffa2a5 0 0 15px inset!important;
	border: 11px solid #ffa2a5!important;        
	background-color: #fff !important;
}
.list_AY {
 background:#e645c5f5;
 color:#fff;
 border-radius:5px;
 padding:3px 9px;
 font-size:15px
}
.pro_verified {
    width: 13px;
    height: 13px;
    margin-bottom: -2px
}
.status_color {
 background:#e645c5f5;
 color:#fff
}
.wall_color {
 background:#e645c5f5;
 color:#fff
}
.cast_color {
 background:#e645c5f5;
 color:#fff
}
.vote_color {
 background:#e645c5f5;
 color:#fff
}
.quiz_color {
 background:#e645c5f5;
 color:#fff
}
.stars winners_color {
 background:#e645c5f5;
 color:#fff
}
.S_H_color {
 background:#e645c5f5;
 color:#fff
}
.menu_color {
 background:#e645c5f5;
 color:#fff
}
.hell_color {
 background:#e645c5f5;
 color:#fff
}

/*  Overlay Banner */


/*  ---------------------------------------------------- */

.overlay-ribbon {
    position: absolute;
    width: 13em;
    height: 20em;
    z-index: 9999;
    top: -14%;
    right: -60%;
    background: #000;
    padding: 5px 0;
    font-size: 14px!important;
    background-image: -ms-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #2ec4b6 100%);
    background-image: -moz-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #fff 100%);
    background-image: -o-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #2ec4b6 100%);
    background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, #cbf3f0), color-stop(1, #2ec4b6));
    background-image: -webkit-radial-gradient(center top, circle farthest-side, #cbf3f0 0%, #2ec4b6 100%);
    background-image: radial-gradient(circle farthest-side at center top, #5e0000 0%, #000 100%);
    -webkit-box-shadow: -5px 21px 28px -4px rgb(0, 0, 0);
    -moz-box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, .43);
    box-shadow: -10px 21px 28px -4px rgb(230, 0, 0);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 1px;
    animation: slidein 3s cubic-bezier(.52, .3, .07, 1) forwards;
}

.ribbon-content {
    z-index: 99999;
    position: relative;
    margin: 0 6px
}

.ribbon-content h3 {
    margin: 0;
    padding: 5px 0;
    line-height: 16px;
    font-family: hammersmith one, sans-serif;
    color: #cc0000;
    text-align: center
}

.ribbon-content>p,
.ribbon-content>p span {
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: 100;
    font-family: cairo;
    font-size: 15px;
    white-space: pre-line;
    width: 100%;
    overflow: hidden;
    line-height: 1.7
}

.ribbon-content p span {
    display: block
}

.close-x {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 99
}

.close-x a:link,
.close-x a:visited {
    background: #cc0000;
    color: #fff;
    padding: 0 4px;
    font-weight: 400;
    text-decoration: none
}

.close-x a:hover {
    background: #ff9f1c
}

.overlay-ribbon:before {
    content: "";
    position: absolute;
    bottom: -2em;
    left: 0;
    width: 0;
    height: 0;
    border-top: 10em solid #000;
    border-right: 10em solid transparent;
    z-index: 997
}

.overlay-ribbon:after {
    content: "";
    position: absolute;
    bottom: -2em;
    -9em;
    right: 0;
    width: 0;
    height: 0;
    border-top: 10em solid #000;
    border-left: 10em solid transparent;
    z-index: 998
}

.slideout {
    animation: slideout 1s ease-in-out forwards
}

@-webkit-keyframes slidein {
    from {
        transform: translate(0, -400px)
    }
    to {
        transform: translate(0, 100px)
    }
}

@-o-keyframes slidein {
    from {
        transform: translate(0, -400px)
    }
    to {
        transform: translate(0, 100px)
    }
}

@-moz-keyframes slidein {
    from {
        transform: translate(0, -400px)
    }
    to {
        transform: translate(0, 100px)
    }
}

@keyframes slidein {
    from {
        transform: translate(0, -400px)
    }
    to {
        transform: translate(0, 100px)
    }
}

@-webkit-keyframes slideout {
    from {
        transform: translate(0, 100px)
    }
    to {
        transform: translate(0, -400px)
    }
}

@-o-keyframes slideout {
    from {
        transform: translate(0, 100px)
    }
    to {
        transform: translate(0, -400px)
    }
}

@-moz-keyframes slideout {
    from {
        transform: translate(0, 100px)
    }
    to {
        transform: translate(0, -400px)
    }
}

@keyframes slideout {
    from {
        transform: translate(0, 100px)
    }
    to {
        transform: translate(0, -400px)
    }
}

@media screen and (max-width: 768px) {
    #private_box {
        bottom: 50px !important;
        left: 0;
        right: 0;
        margin: auto;
    }
    .overlay-ribbon {
        right: 9px;
        top: -9%;
    }
    .box {
        margin: 0 5px;
    }
    .triangle-down {
        width: 0;
        height: 0;
        margin: 0 6px;
        border-left: 39px solid transparent;
        border-right: 40px solid transparent;
        border-top-width: 25px;
        z-index: 3;
        margin-top: -1px;
    }
    #close_stream {
        float: right;
        padding: 0;
        font-size: 19px !important;
        color: #ff4d4d;
    }
    #hide_stream {
        float: right;
        padding: 0;
        margin-right: 20px;
        font-size: 19px !important;
        color: #012832;
    }
    #stream_header {
        width: 100%;
        height: 55px;
        background: #00129;
        padding: 12px;
        border-bottom: 8px solid #000 !important;
        cursor: move;
    }
    #container_stream {
        -webkit-user-drag: auto;
        user-drag: auto;
        background: #d0a9c3;
        box-shadow: #df06c8 0px 0px 50px !important;
        border: 1px solid #000;
    }
    top: 35%;
    border-radius: 7px;
    overflow: hidden;
}

#wrap_stream.hide {
    height: 0 !important;
    transition: all ease 0.3s;
    padding: 0;
}

.opennot_toyplayer {
    background: red;
    padding: 4px 8px;
    position: relative;
    right: auto;
    top: auto;
    cursor: pointer;
    opacity: 1;
    z-index: 11;
    border-radius: 5px;
    width: auto;
    display: inline-block;
}

.open_player i.fa {
    font-size: 11px;
}

#container_stream {
    left: 18px;
    right: 18px;
    top: 40px;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

#stream_header {
    width: 100%;
    height: 36px;
    background: #f7f5f6;
    padding: 9px;
    border-bottom: 1px solid #d8e1e8 !important;
    cursor: move;
}

#wrap_stream {
    width: auto;
    height: 200px;
    padding: 10px;
    overflow: hidden;
    border-top: none;
    transition: all ease 0.3s;
}

.open_player.hide_mobile {
    display: inline-block !important;
}


}
#profile_likes {
    font-size: 0;
    max-height: 332px;
    overflow: hidden;
    overflow-y: overlay
}
.textbg1 {
    background: url(../fancy/text1.png) 0% 100% no-repeat;
}
.textbg2 {
    background: url(../textbg/savabg.gif) 0% 100% no-repeat;
}
.textbg3 {
    background: url(../textbg/killua.gif) 0% 100% no-repeat;
}
.textbg9 {
    background: url(../textbg/farh.gif) 0% 100% no-repeat;
}
.textbg5 {
    background: url(../textbg/3mmar.gif) 0% 100% no-repeat;
}
.textbg6 {
    background: url(../textbg/lilo.gif) 0% 100% no-repeat;
}
.textbg7 {
    background: url(../textbg/zahra.gif) 0% 100% no-repeat;
}
.textbg8 {
    background: url(../textbg/nour.gif) 0% 100% no-repeat;
}
.textbg10 {
    background: url(../textbg/lili.gif) 0% 100% no-repeat;
}
.textbg11 {
    background: url(../textbg/nody.gif) 0% 100% no-repeat;
}
.textbg12 {
    background: url(../textbg/liza.gif) 0% 100% no-repeat;
}
.textbg13 {
    background: url(../textbg/maro.gif) 0% 100% no-repeat;
}
.textbg14 {
    background: url(../textbg/elaaf.gif) 0% 100% no-repeat;
}
.textbg15 {
    background: url(../textbg/lili.gif) 0% 100% no-repeat;
}
.textbg29 {
    background: url(../textbg/rn55.gif) 0% 100% no-repeat;
}
.textbg23 {
    background: url(../textbg/3shq.gif) 0% 100% no-repeat;
}
.textbg100 {
    background: url(../textbg/s12.png) 0% 100% no-repeat;
}
.textbg30 {
    background: url(../textbg/mekoo.gif) 0% 100% no-repeat;
}
.textbg26 {
    background: url(../textbg/sin.gif) 0% 100% no-repeat;
}
.textbg27 {
    background: url(../textbg/samk.gif) 0% 100% no-repeat;
}
.textbg28 {
    background: url(../textbg/warda.gif) 0% 100% no-repeat;
}
.textbg40 {
    background: url(../textbg/jass.gif) 0% 100% no-repeat;
}
.textbg41 {
    background: url(../textbg/farah.gif) 0% 100% no-repeat;
}
.textbg42 {
    background: url(../textbg/mar.gif) 0% 100% no-repeat;
}
.textbg43 {
    background: url(../textbg/asma.gif) 0% 100% no-repeat;
}
.textbg44 {
    background: url(../textbg/meme.gif) 0% 100% no-repeat;
}
.textbg45 {
    background: url(../textbg/sav.gif) 0% 100% no-repeat;
}
.textbg46 {
    background: url(../textbg/kbr.gif) 0% 100% no-repeat;
}
.textbg47 {
    background: url(../textbg/mai.gif) 0% 100% no-repeat;
}
.textbg96 {
    background: url(../textbg/NN.gif) 0% 100% no-repeat;
}
.textbg01 {
    background: url(../textbg/vv.gif) 0% 100% no-repeat;
}
.textbg100 {
    background: url(../textbg/HASAN.gif) 0% 100% no-repeat;
}
.textbg02 {
    background: url(../textbg/Waheed.gif) 0% 100% no-repeat;
}
.textbg254 {
    background: url(../textbg/Hanzada.gif) 0% 100% no-repeat;
}
.textbghirotoo {
    background: url(../textbg/hirotoo.gif) 0% 100% no-repeat;
}
.Stirs_Ev {
    padding: 4px 7px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgb(255, 244, 251) 35%, rgb(255, 255, 255), rgb(247, 246, 251) 70%);
    color: rgb(0, 0, 0);
    font-family: tahoma;
    font-size: 11px;
    font-weight: bold;
}
.level-badge {
    padding: 1px 5px 1px 5px;
    border-radius: 3px;
    margin: 0 3px 0 3px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.badge1_color {
    background: #4287f5;
    color: white;
}
.badge2_color {
    background: #0b1c36;
    color: white;
}
.badge3_color {
    background: #75139c;
    color: white;
}
.badge4_color {
    background: #c91c90;
    color: white;
}
.badge5_color {
    background: #c91c3c;
    color: white;
}
.badge6_color {
    background: #3c9911;
    color: white;
}
.badge7_color {
    background: #909911;
    color: white;
}
.badge8_color {
    background: #cc8f25;
    color: white;
}
.badge9_color {
    background: #cc4425;
    color: white;
}
.badge10_color {
    background: #c90808;
    color: white;
}
.badge {
    padding: 1px 5px 1px 5px;
    margin: 0 3px 0 3px;
    font-size: 10px !important;
    font-weight: bold;
    white-space: nowrap;
    color: #ffffff;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 5px;
}
.badge:hover {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}
.badge-error {
    background-color: #b94a48;
}
.badge-error:hover {
    background-color: #953b39;
}
.badge-warning {
    background-color: #f89406;
}
.badge-warning:hover {
    background-color: #c67605;
}
.badge-success {
    background-color: #468847;
}
.badge-success:hover {
    background-color: #356635;
}
.badge-info {
    background-color: #3a87ad;
}
.badge-info:hover {
    background-color: #2d6987;
}
.badge-inverse {
    background-color: #333333;
}
.badge-inverse:hover {
    background-color: #1a1a1a;
}
@keyframes sm_3600 {
    0% {
        transform: translate(0px);
    }
    
    100% {
        transform: translate(-3600px);
    }
}
.tajawal {
    font-family: 'Tajawal', sans-serif;
}
.cairo {
    font-family: 'Cairo', sans-serif;
}
.side_mehtap {
    padding: 5px;
    width: 97%;
    background: #abbaab;
    background: -webkit-linear-gradient(to bottom, #ffffff, #f1fef1);
    background: linear-gradient(to bottom, #fff, #f0cdcf);
    border-radius: 4px;
    font-size: 14px;
    color: #4d4d4d;
    text-decoration: none;
    margin: 0px auto;
    direction: rtl;
}
.varto_points {
    position: relative;
    top: 10px;
    left: 10px;
    color: #000000;
}
.varto_greeting {
    position: relative;
    top: 10px;
    left: 5px;
    color: #000000;
}
.side_block_avatar4 .varto_avatar4 {
    width: 52px !important;
    height: 52px !important;
    background: #ED213A;
    background: -webkit-linear-gradient(to bottom, #93291E, #ED213A);
    background: linear-gradient(to bottom, #93291E, #ED213A);
    padding: 4px;
    border-radius: 100%;
}
.side_block_avatar4 {
    float: left;
    margin: 0px 15px 5px 5px;
    position: relative;
    background-size: 100%;
}
.side_block_avatar5 {
    width: 43px !important;
    height: 43px !important;
    background: #abbaab;
    background: -webkit-linear-gradient(to bottom, #ffffff, #abbaab);
    background: linear-gradient(to bottom, #ffffff, #abbaab);
    padding: 4px;
    border-radius: 100%;
    font-size: 10px;
}
.varto_greeting {
    color: #000000;
}
.side_block_avatar2 {
    float: left;
    margin: 0px 15px 5px 5px;
    position: relative;
    background-size: 100%;
}
.side_block_avatar2 .varto_avatar2 {
    width: 52px !important;
    height: 52px !important;
    background: #ccc;
    padding: 4px;
    border-radius: 100%;
}
.side_block_avatar6 {
    float: left;
    margin: 0px 15px 5px 5px;
    position: relative;
    background-size: 100%;
}
.side_block_avatar6 .varto_avatar6 {
    width: 52px !important;
    height: 52px !important;
    background: #1D976C;
    background: -webkit-linear-gradient(to bottom, #93F9B9, #1D976C);
    background: linear-gradient(to bottom, #6D0404, #AA0F0F);
    padding: 4px;
    border-radius: 100%;
}
.side_block_avatar7 {
    width: 43px !important;
    height: 43px !important;
    background: #abbaab;
    background: -webkit-linear-gradient(to bottom, #ffffff, #abbaab);
    background: linear-gradient(to bottom, #ffffff, #abbaab);
    padding: 4px;
    border-radius: 100%;
    font-size: 10px;
}
#greeting_ico2 {
    width: 30px;
    height: 30px;
    z-index: 9;
    background-size: 100% !important;
    -webkit-background-size: 100% !important;
    -moz-background-size: 100% !important;
    -o-background-size: 100% !important;
    -ms-background-size: 100% !important;
    display: inline-block;
    border-radius: 6px 6px 0px 0px;
    margin: -10px 12px;
    position: absolute;
}
#greeting_ico {
    width: 30px;
    height: 30px;
    z-index: 9;
    background-size: 100% !important;
    -webkit-background-size: 100% !important;
    -moz-background-size: 100% !important;
    -o-background-size: 100% !important;
    -ms-background-size: 100% !important;
    display: inline-block;
    border-radius: 6px 6px 0px 0px;
    margin: -10px 35px;
    position: absolute;
}
.evening2 {
    background: url('https://www.hi4best.com/chat/default_images/points.png') 0px 0px repeat-x;
    background-size: auto;
    width: 40px !important;
    height: 40px !important;
    margin: -10px 20px;
}
.level2 {
    background: url('https://www.hi4best.com/chat/default_images/level.png') 0px 0px repeat-x;
    background-size: auto;
    width: 40px !important;
    height: 40px !important;
    margin: -10px 20px;
}
.evening {
    background: url('https://www.hi4best.com/chat/default_images/evening.png') 0px 0px repeat-x;
    background-size: auto;
    width: 40px !important;
    height: 40px !important;
    margin: -10px 20px;
}
.morning {
    background: url('https://www.hi4best.com/chat/default_images/sun_m.png') 0px 0px repeat-x;
    background-size: auto;
    width: 50px !important;
    height: 50px !important;
    margin: -15px 25px !important;
}
.noon {
    background: url('https://www.hi4best.com/chat/default_images/sun_n.png') 0px 0px repeat-x;
    background-size: auto;
    width: 40px !important;
    height: 40px !important;
    margin: -10px 20px;
}
.side_block_avatar2 .varto_avatar2 img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 100%;
}

/* latin-ext */
@font-face {
    font-family: 'Nosifer';
    font-style: normal;
    font-weight: 400;
    src: local('Nosifer'), local('Nosifer-Regular'), url(../s/nosifer/v8/ZGjXol5JTp0g5bxZWCRbVQNd.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Nosifer';
    font-style: normal;
    font-weight: 400;
    src: local('Nosifer'), local('Nosifer-Regular'), url(../s/nosifer/v8/ZGjXol5JTp0g5bxZWCpbVQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
paste custom css and finish good chat:) .admin_sm_content {
    background: #f7f7f7;
    color: #666;
    position: relative;
    font-family: cursive;
    vertical-align: top;
    padding: 9px;
    word-wrap: break-word;
}
.fadeInLeftBig,
#main_emoticon {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
.fadeInRight,
#private_box,
.small_modal_in,
.large_modal_in {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}
@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
.slideInUp,
.chat_message.bcolor1 {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}
.under-10 {
	background: #03add8
}

.under-20 {
	background: #0327d8
}

.under-30 {
	background: #d803c8
}

.under-40 {
	background: #d8035b
}

.under-50 {
	background: #03d8b1
}

.under-60 {
	background: #129810
}

.under-70 {
	background: #981010
}

.under-80 {
	background: #9a603e
}

.under-90 {
	background: #949019
}

.under-100 {
	background: #ff43b4
}

.reach-100 {
	background: #d67701
}

.border-10 {
	border: 2px solid #03add8
}

.border-20 {
	border: 2px solid #0327d8
}

.border-30 {
	border: 2px solid #d803c8
}

.border-40 {
	border: 2px solid #d8035b
}

.border-50 {
	border: 2px solid #03d8b1
}

.border-60 {
	border: 2px solid #129810
}

.border-70 {
	border: 2px solid #981010
}

.border-80 {
	border: 2px solid #9a603e
}

.border-90 {
	border: 2px solid #949019
}

.border-100 {
	border: 2px solid #ff43b4
}

.reachborder-100 {
	border: 2px solid #d67701
}

.pro_border-10 {
	border: 5px solid #03add8
}

.pro_border-20 {
	border: 5px solid #0327d8
}

.pro_border-30 {
	border: 5px solid #d803c8
}

.pro_border-40 {
	border: 5px solid #d8035b
}

.pro_border-50 {
	border: 5px solid #03d8b1
}

.pro_border-60 {
	border: 5px solid #129810
}

.pro_border-70 {
	border: 5px solid #981010
}

.pro_border-80 {
	border: 5px solid #9a603e
}

.pro_border-90 {
	border: 5px solid #949019
}

.pro_border-100 {
	border: 5px solid #ff43b4
}

.proreachborder-100 {
	border: 5px solid #d67701
}

.proborder-level {
	color: white;
	position: sticky;
	top: 0;
	left: 0;
	font-size: 12px;
	font-weight: 600;
	padding: 1px 3px;
	border-radius: 5px 5px 0 0;
	text-align: center
}

.avatar_profile {
	border-radius: 0 0 5px 5px
}

.border-level {
	color: white;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 8px;
	font-weight: 600;
	padding: 1px 3px;
	border-radius: 0 25px 25px 25px;
	text-align: center
}
.priv-border-level {
	color: white;
    position: relative;
    top: -35px;
    font-size: 7px;
    font-weight: 600;
    width: 18px;
    padding:0;
    border-radius: 0 5px 5px 5px;
    text-align: center;
}

.ex_rank {
	height: 15px!important;
	position: absolute;
	top: 19px;
	width: 15px!important;
	background: #000;
	left: 21px;
	border-radius: 25px!important
}
.priv_ex_rank {
    position: relative;
    bottom: 32px;
    font-size: 7px;
    font-weight: 600;
    width: 17px;
    padding:0;
    border-radius: 0 5px 5px 5px;
    text-align: center;
    left:20px;
}

.cclear {
	width: 17px
}

.nameWave {
	background-size: 200% 100%;
	background-position: 0 0;
	-webkit-animation: nameWave 3s linear infinite normal;
	animation: nameWave 3s linear infinite normal
}

.clip {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

@keyframes nameWave {
	0% {
		background-position: 0 0
	}
	100% {
		background-position: 100% 0
	}
}

.prograd1,
.pgrad1 {
	background: linear-gradient(to top, #f33, #800000)!important;
	color: white!important
}

.prograd2,
.pgrad2 {
	background: linear-gradient(to top, #f63, #4d1300)!important;
	color: white!important
}

.prograd3,
.pgrad3 {
	background: linear-gradient(to top, #f93, #4d2600)!important;
	color: white!important
}

.prograd4,
.pgrad4 {
	background: linear-gradient(to top, #fc3, #806000)!important;
	color: white!important
}

.prograd5,
.pgrad5 {
	background: linear-gradient(to top, #cc0, #4d4d00)!important;
	color: white!important
}

.prograd6,
.pgrad6 {
	background: linear-gradient(to top, #9c0, #394d00)!important;
	color: white!important
}

.prograd7,
.pgrad7 {
	background: linear-gradient(to top, #59b300, #264d00)!important;
	color: white!important
}

.prograd8,
.pgrad8 {
	background: linear-gradient(to top, #829356, #2b301c)!important;
	color: white!important
}

.prograd9,
.pgrad9 {
	background: linear-gradient(to top, #008000, #001a00)!important;
	color: white!important
}

.prograd10,
.pgrad10 {
	background: linear-gradient(to top, #00e639, #00330d)!important;
	color: white!important
}

.prograd11,
.pgrad11 {
	background: linear-gradient(to top, #00e673, #063)!important;
	color: white!important
}

.prograd12,
.pgrad12 {
	background: linear-gradient(to top, #00e6ac, #004d39)!important;
	color: white!important
}

.prograd13,
.pgrad13 {
	background: linear-gradient(to top, #0cc, #004d4d)!important;
	color: white!important
}

.prograd14,
.pgrad14 {
	background: linear-gradient(to top, #03add8, #013d4b)!important;
	color: white!important
}

.prograd15,
.pgrad15 {
	background: linear-gradient(to top, #36f, #002080)!important;
	color: white!important
}

.prograd16,
.pgrad16 {
	background: linear-gradient(to top, #107896, #073845)!important;
	color: white!important
}

.prograd17,
.pgrad17 {
	background: linear-gradient(to top, #004d99, #66b3ff)!important;
	color: white!important
}

.prograd18,
.pgrad18 {
	background: linear-gradient(to top, #8a76c8, #5901ae) !important;
	color: white!important
}

.prograd19,
.pgrad19 {
	background: linear-gradient(to top, #93f, #d9b3ff)!important;
	color: white!important
}

.prograd20,
.pgrad20 {
	background: linear-gradient(to top, #c3f, #ecb3ff)!important;
	color: white!important
}

.prograd21,
.pgrad21 {
	background: linear-gradient(to top, #f3f, #ffb3ff)!important;
	color: white!important
}

.prograd22,
.pgrad22 {
	background: linear-gradient(to top, #f3c, #ff99e6)!important;
	color: white!important
}

.prograd23,
.pgrad23 {
	background: linear-gradient(to top, #f39, #ffb3d9)!important;
	color: white!important
}

.prograd24,
.pgrad24 {
	background: linear-gradient(to top, #f36, #ffb3c6)!important;
	color: white!important
}

.prograd25,
.pgrad25 {
	background: linear-gradient(to top, #40e0d0, #ff8c00, #ff0080)!important;
	color: white!important
}

.prograd26,
.pgrad26 {
	background: linear-gradient(to top, #11998e, #38ef7d)!important;
	color: white!important
}

.prograd27,
.pgrad27 {
	background: linear-gradient(to top, #108dc7, #ef8e38)!important;
	color: white!important
}

.prograd28,
.pgrad28 {
	background: linear-gradient(to top, #fc5c7d, #6a82fb)!important;
	color: white!important
}

.prograd29,
.pgrad29 {
	background: linear-gradient(to top, #fc466b, #3f5efb)!important;
	color: white!important
}

.prograd30,
.pgrad30 {
	background: linear-gradient(to top, #c94b4b, #4b134f)!important;
	color: white!important
}

.prograd31,
.pgrad31 {
	background: linear-gradient(to top, #00f260, #0575e6)!important;
	color: white!important
}

.prograd32,
.pgrad32 {
	background: linear-gradient(to top, #fc4a1a, #f7b733)!important;
	color: white!important
}

.prograd33,
.pgrad33 {
	background: linear-gradient(to top, #22c1c3, #fdbb2d)!important;
	color: white!important
}

.prograd34,
.pgrad34 {
	background: linear-gradient(to top, #7f00ff, #e100ff)!important;
	color: white!important
}

.prograd35,
.pgrad35 {
	background: linear-gradient(to top, #67b26f, #4ca2cd)!important;
	color: white!important
}

.prograd36,
.pgrad36 {
	background: linear-gradient(to top, #ee0979, #ff6a00)!important;
	color: white!important
}

.prograd37,
.pgrad37 {
	background: linear-gradient(to top, #00c3ff, #ffff1c)!important;
	color: white!important
}

.prograd38,
.pgrad38 {
	background: linear-gradient(to top, #fc00ff, #00dbde)!important;
	color: white!important
}

.prograd39,
.pgrad39 {
	background: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045)!important;
	color: white!important
}

.prograd40,
.pgrad40 {
	background: linear-gradient(to top, #43cea2, #185a9d)!important;
	color: white!important
}

.prograd41,
.pgrad41 {
	background: linear-gradient(to top, #bdc3c7, #2c3e50)!important;
	color: white!important
}

.prograd42,
.pgrad42 {
	background: linear-gradient(to top, #373b44, #4286f4)!important;
	color: white!important
}

.prograd43,
.pgrad43 {
	background: linear-gradient(to top, #2980b9, #6dd5fa, #fff)!important;
	color: white!important
}

.prograd44,
.pgrad44 {
	background: linear-gradient(to top, #f09, #493240)!important;
	color: white!important
}

.prograd45,
.pgrad45 {
	background: linear-gradient(to top, #f953c6, #b91d73)!important;
	color: white!important
}

.prograd46,
.pgrad46 {
	background: linear-gradient(to left, #c31432, #240b36)!important;
	color: white!important
}

.prograd47,
.pgrad47 {
	background: linear-gradient(to top, #dd3e54, #6be585)!important;
	color: white!important
}

.prograd48,
.pgrad48 {
	background: linear-gradient(to top, #8360c3, #2ebf91)!important;
	color: white!important
}

.prograd49,
.pgrad49 {
	background: linear-gradient(to top, #544a7d, #ffd452)!important;
	color: white!important
}

.prograd50,
.pgrad50 {
	background: linear-gradient(to top, #009fff, #ec2f4b)!important;
	color: white!important
}

.prograd51,
.pgrad51 {
	background: linear-gradient(to top, #59c173, #a17fe0, #5d26c1)!important;
	color: white!important
}

.prograd52,
.pgrad52 {
	background: linear-gradient(to top, #005aa7, #fffde4)!important;
	color: white!important
}

.prograd53,
.pgrad53 {
	background: linear-gradient(to top, #da4453, #89216b)!important;
	color: white!important
}

.prograd54,
.pgrad54 {
	background: linear-gradient(to top, #ad5389, #3c1053)!important;
	color: white!important
}

.prograd55,
.pgrad55 {
	background: linear-gradient(to top, #a8c0ff, #3f2b96)!important;
	color: white!important
}

.prograd56,
.pgrad56 {
	background: linear-gradient(to top, #333, #dd1818)!important;
	color: white!important
}

.prograd57,
.pgrad57 {
	background: linear-gradient(to top, #108dc7, #ef8e38)!important;
	color: white!important
}

.prograd58,
.pgrad58 {
	background: linear-gradient(to top, #23074d, #cc5333)!important;
	color: white!important
}

.prograd59,
.pgrad59 {
	background: linear-gradient(to top, #fffbd5, #b20a2c)!important;
	color: white!important
}

.prograd60,
.pgrad60 {
	background: linear-gradient(to top, #0f0c29, #302b63, #24243e)!important;
	color: white!important
}

.prograd61,
.pgrad61 {
	background: linear-gradient(to top, #800080, #ffc0cb)!important;
	color: white!important
}

.prograd62,
.pgrad62 {
	background: linear-gradient(to top, #00f260, #0575e6)!important;
	color: white!important
}

.prograd63,
.pgrad63 {
	background: linear-gradient(to top, #667db6, #0082c8, #ec38bc, #fdeff9)!important;
	color: white!important
}

.prograd64,
.pgrad64 {
	background: linear-gradient(to top, #e1eec3, #f05053)!important;
	color: white!important
}

.prograd65,
.pgrad65 {
	background: linear-gradient(to top, #03001e, #7303c0, #ec38bc, #fdeff9)!important;
	color: white!important
}

.prograd66,
.pgrad66 {
	background: linear-gradient(to top, #1a2a6c, #b21f1f, #fdbb2d)!important;
	color: white!important
}

.prograd67,
.pgrad67 {
	background: linear-gradient(to top, #000, #0f9b0f)!important;
	color: white!important
}

.prograd68,
.pgrad68 {
	background: linear-gradient(to top, #36d1dc, #5b86e5)!important;
	color: white!important
}

.prograd69,
.pgrad69 {
	background: linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b)!important;
	color: white!important
}

.prograd70,
.pgrad70 {
	background: linear-gradient(to top, #283c86, #45a247)!important;
	color: white!important
}

.prograd71,
.pgrad71 {
	background: linear-gradient(to top, #ef3b36, #fff)!important;
	color: white!important
}

.prograd72,
.pgrad72 {
	background: linear-gradient(to top, #159957, #155799)!important;
	color: white!important
}

.prograd73,
.pgrad73 {
	background: linear-gradient(to top, #000046, #1cb5e0)!important;
	color: white!important
}

.prograd74,
.pgrad74 {
	background: linear-gradient(to top, #56ccf2, #2f80ed)!important;
	color: white!important
}

.prograd75,
.pgrad75 {
	background: linear-gradient(to top, #eb5757, #000)!important;
	color: white!important
}

.prograd76,
.pgrad76 {
	background: linear-gradient(to top, #20002c, #cbb4d4)!important;
	color: white!important
}

.prograd77,
.pgrad77 {
	background: linear-gradient(to top, #34e89e, #0f3443)!important;
	color: white!important
}

.prograd78,
.pgrad78 {
	background: linear-gradient(to top, #bdc3c7, #2c3e50)!important;
	color: white!important
}

.prograd79,
.pgrad79 {
	background: linear-gradient(to top, #a80077, #6f0)!important;
	color: white!important
}

.prograd80,
.pgrad80 {
	background: linear-gradient(to top, #000, #656565)!important;
	color: white!important
}

.shgrad1,
.shback1 {
	box-shadow: #422f99 0 0 20px!important;
	border: 1px solid #422f99
}

.shgrad2,
.shback2 {
	box-shadow: #a80077 0 0 20px!important;
	border: 1px solid #a80077
}

.shgrad3,
.shback3 {
	box-shadow: #000 0 0 20px!important;
	border: 1px solid #000
}

.shgrad4,
.shback4 {
	box-shadow: #4d3e3e 0 0 20px!important;
	border: 1px solid #4d3e3e
}

.shgrad5,
.shback5 {
	box-shadow: #142850 0 0 20px!important;
	border: 1px solid #142850
}

.shgrad6,
.shback6 {
	box-shadow: #00909e 0 0 20px!important;
	border: 1px solid #00909e
}

.shgrad7,
.shback7 {
	box-shadow: #dae1e7 0 0 20px!important;
	border: 1px solid #dae1e7
}

.shgrad8,
.shback8 {
	box-shadow: #ffe0ac 0 0 20px!important;
	border: 1px solid #ffe0ac
}

.shgrad9,
.shback9 {
	box-shadow: #888 0 0 20px!important;
	border: 1px solid #888
}

.shgrad10,
.shback10 {
	box-shadow: #120136 0 0 20px!important;
	border: 1px solid #120136
}

.shgrad11,
.shback11 {
	box-shadow: #f6f578 0 0 20px!important;
	border: 1px solid #f6f578
}

.shgrad12,
.shback12 {
	box-shadow: #862a5c 0 0 20px!important;
	border: 1px solid #862a5c
}

.shgrad13,
.shback13 {
	box-shadow: #eaac9d 0 0 20px!important;
	border: 1px solid #eaac9d
}

.shgrad14,
.shback14 {
	box-shadow: #06623b 0 0 20px!important;
	border: 1px solid #06623b
}

.shgrad15,
.shback15 {
	box-shadow: #f79071 0 0 20px!important;
	border: 1px solid #f79071
}

.shgrad16,
.shback16 {
	box-shadow: #f6acc8 0 0 20px!important;
	border: 1px solid #f6acc8
}

.shgrad17,
.shback17 {
	box-shadow: #af8baf 0 0 20px!important;
	border: 1px solid #af8baf
}

.shgrad18,
.shback18 {
	box-shadow: #584153 0 0 20px!important;
	border: 1px solid #584153
}

.shgrad19,
.shback19 {
	box-shadow: #c1a57b 0 0 20px!important;
	border: 1px solid #c1a57b
}

.shgrad20,
.shback20 {
	box-shadow: #2c003e 0 0 20px!important;
	border: 1px solid #2c003e
}

.shgrad21,
.shback21 {
	box-shadow: #43d8c9 0 0 20px!important;
	border: 1px solid #43d8c9
}

.shgrad22,
.shback22 {
	box-shadow: #95389e 0 0 20px!important;
	border: 1px solid #95389e
}

.shgrad23,
.shback23 {
	box-shadow: #0779e4 0 0 20px!important;
	border: 1px solid #0779e4
}

.shgrad24,
.shback24 {
	box-shadow: #d8345f 0 0 20px!important;
	border: 1px solid #d8345f
}

.shgrad25,
.shback25 {
	box-shadow: #c70039 0 0 20px!important;
	border: 1px solid #c70039
}

.shgrad26,
.shback26 {
	box-shadow: #ff5733 0 0 20px!important;
	border: 1px solid #ff5733
}

.shgrad27,
.shback27 {
	box-shadow: #8566aa 0 0 20px!important;
	border: 1px solid #8566aa
}

.shgrad28,
.shback28 {
	box-shadow: #6983aa 0 0 20px!important;
	border: 1px solid #6983aa
}

.shgrad29,
.shback29 {
	box-shadow: #f8e1f4 0 0 20px!important;
	border: 1px solid #f8e1f4
}

.shgrad30,
.shback30 {
	box-shadow: #97e5ef 0 0 20px!important;
	border: 1px solid #97e5ef
}

.shgrad31,
.shback31 {
	box-shadow: #b9ebcc 0 0 20px!important;
	border: 1px solid #b9ebcc
}

.shgrad32,
.shback32 {
	box-shadow: #5a3f11 0 0 20px!important;
	border: 1px solid #5a3f11
}

.shgrad33,
.shback33 {
	box-shadow: #9c5518 0 0 20px!important;
	border: 1px solid #9c5518
}

.shgrad34,
.shback34 {
	box-shadow: #ffb385 0 0 20px!important;
	border: 1px solid #ffb385
}

.shgrad35,
.shback35 {
	box-shadow: #698474 0 0 20px!important;
	border: 1px solid #698474
}

.shgrad36,
.shback36 {
	box-shadow: #de7119 0 0 20px!important;
	border: 1px solid #de7119
}

.shgrad37,
.shback37 {
	box-shadow: #204051 0 0 20px!important;
	border: 1px solid #204051
}

.shgrad38,
.shback38 {
	box-shadow: #3b6978 0 0 20px!important;
	border: 1px solid #3b6978
}

.shgrad39,
.shback39 {
	box-shadow: #f76a8c 0 0 20px!important;
	border: 1px solid #f76a8c
}

.shgrad40,
.shback40 {
	box-shadow: #fbcffc 0 0 20px!important;
	border: 1px solid #fbcffc
}

.shgrad41,
.shback40 {
	box-shadow: #be79df 0 0 20px!important;
	border: 1px solid #be79df
}

.shgrad42,
.shback40 {
	box-shadow: #cff1ef 0 0 20px!important;
	border: 1px solid #cff1ef
}

.shgrad43,
.shback40 {
	box-shadow: #ffd1bd 0 0 20px!important;
	border: 1px solid #ffd1bd
}

.shgrad44,
.shback40 {
	box-shadow: #9dc6a7 0 0 20px!important;
	border: 1px solid #9dc6a7
}

.shgrad45,
.shback40 {
	box-shadow: #323232 0 0 20px!important;
	border: 1px solid #323232
}
.animated,
#notify_private,
.ch_logs.bcolor1 .small_modal_in,
.large_modal_in,
#private_box,
#main_emoticon,
.ico_vip,
.my_mood {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
#notify_private {
    -webkit-animation-iteration-count: 20;
    animation-iteration-count: 20
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}
@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}
.bounce,
#notify_private {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
@-webkit-keyframes bounceInUp {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes bounceInUp {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
.bounceInUp,
.my_mood {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}
@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
.fadeInLeftBig,
#main_emoticon {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
.fadeInRight,
#private_box,
.small_modal_in,
.large_modal_in {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}
@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}
.slideInUp,
.chat_message.bcolor1 {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}
.kura {
    border: none;
    display: inline-block;
    background: 0 0;
    color: #000;
    background: rgb(194, 128, 200);
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 26px;
    transition: all .2s;
    box-shadow: 0 1px 0 0 #b70000, 0 -1px 0 0 rgba(249, 243, 243, .88), 1px 0 0 0 rgba(12, 32, 140, .9), -1px 0 0 0 rgba(240, 13, 237, .97), 1px -1px 0 0 rgba(4, 176, 176, .5), -1px 1px 0 0 rgba(120, 200, 232, .87), 1px 1px 0 0 rgba(3, 82, 130, .75), -1px -1px 0 0 rgba(180, 32, 234, .75)
}
.kura:hover {
    box-shadow: 0 5px 0 0 rgba(165, 181, 222, .25), 0 -36px 0 0 rgba(225, 131, 194, .25), 1px 0 0 0 rgba(165, 181, 222, .25), -1px 0 0 0 rgba(225, 131, 194, .25), 1px -1px 0 0 rgba(195, 156, 208, .5), -1px 1px 0 0 rgba(195, 156, 208, .5), 1px 1px 0 0 rgba(135, 206, 235, .75), -1px -1px 0 0 rgba(255, 105, 180, .75);
    color: #000;
    background: rgba(0, 0, 0, .05)
}
.bestcast {
    display: inline-block;
    width: 100%;
    height: 3.125rem;
    border: 1px solid #d975ce;
    border-radius: 1.5rem;
    background-color: #e3b864ab;
    color: #000;
    font: 700 0.75rem/1.75rem 'El Messiri', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bestcast:hover {
    background-color: #000;
    color: #eb56f0;
}
.castrooms:hover {
    background-color: #000;
    color: #fb83ff;
}
.castrooms {
    display: inline-block;
    width: 100%;
    height: 2.255rem;
    border: 4px solid #d975ce;
    border-radius: 1.5rem;
    background-color: #000f444f;
    color: #fff;
    font: 700 0.75rem/1.75rem 'El Messiri', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.jbox-danger-confirm .jBox-Confirm-button-submit,
.jbox-danger-confirm .jBox-Confirm-button-submit {
    background: #dd0c0c;
}
.jbox-danger-confirm .jBox-Confirm-button-submit:active,
.jbox-danger-confirm .jBox-Confirm-button-submit:hover {
    background: #c00;
}

/* Start: style for ads manages.  */
.advs-message {
    border: none !important;
    box-shadow: none !important;
}
.advs-message .my_text {
    width: 100%;
}
.advs-message .my_text .btable .cname {
    background-color: white;
    padding: 10px;
    border-radius: .4rem .4rem 0 0;
    width: 94%;
}
.advs-message .my_text .btable .cname .chat_rank,
.advs-message .my_text .btable .cname span {
    display: none;
}
.advs-message .my_text .btable .cname .chat_rank {
    height: auto;
    width: 17px;
}
.advs-message .my_text .username {
    color: white;
    font-size: 1.5rem;
}
.advs-message .my_text .chat_message {
    background: #fff38c;
    background-image: none;
    background-image: linear-gradient(bottom, rgb(196, 139, 96) 0%, rgb(255, 244, 140) 95%);
    background-image: -o-linear-gradient(bottom, rgb(196, 139, 96) 0%, rgb(255, 244, 140) 95%);
    background-image: -moz-linear-gradient(bottom, rgb(196, 139, 96) 0%, rgb(255, 244, 140) 95%);
    background-image: -webkit-linear-gradient(bottom, rgb(196, 139, 96) 0%, rgb(255, 244, 140) 95%);
    background-image: -ms-linear-gradient(bottom, rgb(196, 139, 96) 0%, rgb(255, 244, 140) 95%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(196, 139, 96)), color-stop(0.95, rgb(255, 244, 140)));
    color: #000;
    padding: 15px;
    width: 94%;
    border-top: 20px #8e0f0f solid;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: bold;
}
.advs-message .my_text .chat_message a {
    font-size: 16px;
}

/* End: style for ads manages.  */

/* Start: style for heart animated 1.  */
.heart-animated-1 {
    width: 100px;
    height: 100px;
    background: url("../images/posts/steps/heart.png") no-repeat;
    background-position: 0 0;
    cursor: pointer;
    transition: background-position 1s steps(28);
    transition-duration: 0s;
}
.heart-animated-1.is-active {
    transition-duration: 1s;
    background-position: -2800px 0;
}

/* End: style for heart animated 1.  */

/* Start: style for hidden youtube player */
#hidden-y-player-wrapper {
    z-index: 11;
    position: absolute;
    top: 1rem;
    right: 2rem;
    direction: rtl;
    display: inline-block;
}
.hidden-y-player-preview-btn {
    background-color: brown;
    padding: 0.3rem 0.5rem;
    border-radius: 30%;
}
.hidden-y-player-btn {
    width: 3.2rem;
    height: 3.2rem;
    background-color: black;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    margin-right: .3rem;
}
.hidden-y-player-btn i {
    font-size: 1.3rem;
}
.hidden-y-player-btn.btn-danger {
    background-color: red;
}
.hidden-y-player-btn.btn-success {
    background-color: green;
}
.hidden-y-player-timer {
    height: 1rem;
    background-color: bisque;
    margin-top: .2rem;
    text-align: center;
}
.hidden-y-player-timer-lbl,
.hidden-y-player-duration-lbl {
    font-weight: bold;
}
.hidden-y-player-timer-lbl {
    color: blue;
}
.hidden-y-player-duration-lbl {
    color: black;
}

/* End: style for hidden youtube player */

/* Start: style for meka system msg */
.system_meka .chat_system_meka .msg-content {
    background: #60c;
    color: white;
    padding: 8px;
    border-radius: 11px;
    font-weight: bold;
    margin-top: 4px;
    font-size: 1.1rem;
}
.system_meka .chat_system_meka .msg-content .alert-label {
    background: white;
    padding: 1px 4px;
    border-radius: 13px;
    color: red;
    margin-left: 7px;
    font-size: 1rem;
}

/* End: style for meka system msg */