/* your custom style here */

.emoji {
  font-size: 1em;
}


.room_cover_img {height: 20px;width:auto;float:left;padding-left:5px;padding-right: 5px;border-radius: 50%;}.room_cover_count{float: right;padding-right: 5px;}

.user_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
}
.av_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
}

.frame_class {
height: 45px !important;left: -2px!important;width: 45px !important;position: absolute;top: 2px;margin: -8px 0 !important;background-position: center bottom;		}

}


.gift_img {
	border-radius:12px;
	max-width:100px;
	max-height:auto;
}
/*shadow_avatar*/
.info {
    border-radius: 5px;
    background: #069;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
div.gift-container img{
	padding:10px 5px 5px;
	height:auto;
	width:80px;
	height:80px
}
div.gift-desc{
	padding:5px 3px;
	text-align:center;
	background:#069;
	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%}
}
.gift-container {
	border:1px solid #069;
	text-align:center;
	cursor:pointer;
}
div.gift-container img{
	height:70px;width:70px
}
.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}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;}


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

@keyframes wardan{to{background-position:200% center;}
}
.sedraname{color:#fff;font-size:15px;font-weight:700;background:linear-gradient(to right, #750b9c 10%, #fff 50%, #b330e3 60%);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sed 1.5s linear infinite;display:inline-block;}
@keyframes sed{to{background-position:200% center;}
}
.ammarname{color:#fff;font-size:15px;font-weight:700;background:linear-gradient(to right, crimson 10%, #000 50%, crimson 60%);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ammar 1.5s linear infinite;display:inline-block;}
@keyframes ammar{to{background-position:200% center;}
}
@keyframes sm_3600{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-3600px, 0px, 0px);}
}
@keyframes sm_756{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-756px, 0px, 0px);}
}
@keyframes sm_3456{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-3456px, 0px, 0px);}
}
@keyframes sm_1512{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-1512px, 0px, 0px);}
}
@keyframes sm_1800{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-1800px, 0px, 0px);}
}
@keyframes sm_960{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-960px, 0px, 0px);}
}
@keyframes sm_2880{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-2880px, 0px, 0px);}
}
@keyframes a_1800{100%{background-position:-1800px center;}
}
@keyframes a_3456{100%{background-position:-3456px center;}
}


.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 sm_3600 { 100% { background-position: -3600px center;}}
@keyframes sm_2304 { 100% { background-position: -2304px center;}}
@keyframes a_3456 { 100% { background-position: -3456px center;}}
@keyframes a_3024 { 100% { background-position: -3024px center;}}
@keyframes a_3600 { 100% { background-position: -3600px center;}}
@keyframes a_720 { 100% { background-position: -720px center;}}
@keyframes a_1800 { 100% { background-position: -1800px center;}}
@keyframes a_720 { 100% { background-position: -720px center;}}


@keyframes wardan{to{background-position:200% center;}
}
.sedraname{color:#fff;font-size:15px;font-weight:700;background:linear-gradient(to right, #750b9c 10%, #fff 50%, #b330e3 60%);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sed 1.5s linear infinite;display:inline-block;}
@keyframes sed{to{background-position:200% center;}
}
.ammarname{color:#fff;font-size:15px;font-weight:700;background:linear-gradient(to right, crimson 10%, #000 50%, crimson 60%);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ammar 1.5s linear infinite;display:inline-block;}
@keyframes ammar{to{background-position:200% center;}
}
@keyframes sm_3600{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-3600px, 0px, 0px);}
}
@keyframes sm_756{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-756px, 0px, 0px);}
}
@keyframes sm_3456{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-3456px, 0px, 0px);}
}
@keyframes sm_1512{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-1512px, 0px, 0px);}
}
@keyframes sm_1800{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-1800px, 0px, 0px);}
}
@keyframes sm_960{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-960px, 0px, 0px);}
}
@keyframes sm_2880{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-2880px, 0px, 0px);}
}
@keyframes a_1800{100%{background-position:-1800px center;}
}
@keyframes a_3456{100%{background-position:-3456px center;}
}

.user_level { color: white; position: absolute; top: 0; left: 0; font-size: 8px; padding: 1px 3px; border-radius: 0 25px 25px 25px; text-align: center; z-index:2; } 
.av_level { color: white; position: absolute; top: 0; left: 0; font-size: 8px; padding: 1px 3px; border-radius: 0 25px 25px 25px; text-align: center; z-index:2; }  
.rank_level { margin-top: 5px; width: 100%; font-weight: bold; font-size: 7px; padding: 2px; color: #fff; border-radius: 3px; }




.my_notice{

background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

color:#fff!important;font-weight:700!important;padding:3px 10px;display:inline-block;line-height:1em;margin-top:2px;border-radius:20px;}



::-webkit-scrollbar {width: 8px !important;height: 5px!important;}
::-webkit-scrollbar-button {  background-color: transparent!important;; }
::-webkit-scrollbar-track {  background-color: #f2f2f2!important;;}
::-webkit-scrollbar-track-piece { background-color: transparent!important;;}
::-webkit-scrollbar-thumb {height: 50px!important;
background-color: #5650ce;!important;
border-radius: 8px!important;}
::-webkit-scrollbar-corner { background-color: transparent!important;;}
::-webkit-resizer { background-color: transparent!important;;}

.room_cover_img {
	height: 20px;width: 
	auto;float: 
	left;padding-left:5px;
	padding-right: 5px;
	border-radius: 50%;
}

.room_cover_count {
	float: right;padding-right: 5px;
}



.user_item_avatar .acav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
    cursor: pointer;
}

.cavatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.time-morning {
	background: url(../default_images/user_information/time-morning.png) 0 0 repeat-x
}
.time-afternoon {
	background: url(../default_images/user_information/time-afternoon.png) 0 0 repeat-x
}
.time-night {
	background: url(../default_images/user_information/time-night.png) 0 0 repeat-x
}
.peep_avatar_field_preview {
	width: 100px;
	height: 100px;
	position: relative;
	cursor: pointer;
	float: left
}
.peep_avatar_field_preview span {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 2px;
	top: 2px;
	background: url(images/chat_btn_close.png) no-repeat center top;
	cursor: pointer
}
.peep_avatar_field_preview img {
	width: 100px;
	height: 100px
}
.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: 5px
}
.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 32px;
	margin-bottom: 0;
	margin-left: 17px
}
.user-info-wrapper.sm {
	margin-left: 0;
	background: linear-gradient(rgba(41, 41, 95, .7), rgba(41, 41, 95, .7)), #29295f url(../default_images/user_information/user-info-background.jpg) no-repeat center;
	background-size: cover
}
.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 {
	margin-top: 10px;
	margin-left: -35px;
	text-align: center;
	padding: 0 10px
}
.greeting_time {
	color: #fff;
	font-weight: 700;
	font-size: 14px
}
.greeting_message {
	color: #fff;
	font-weight: 400;
	font-size: 12px
}
.user_profile_header {
	background: linear-gradient(rgba(38, 1, 50, .7), rgba(38, 1, 50, .9)), rgba(38, 1, 50, .99) url(../default_images/user_information/user-info-background.jpg) no-repeat center;
	background-size: cover;
	position: relative
}


.level {
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    width: 14px;
    text-align: center;
    position: absolute;
    margin: 0px;
    margin-left: -13px;
    font-size: 7px;
    height: 14px;
    vertical-align: bottom;
    line-height: 12px;
	-webkit-font-smoothing: antialiased;
}

.av-level {
    position: absolute;
    right: 0;
    bottom: 0;
    background: #cccccc;
	color: #ffffff;
	border-radius: 50px;
    padding: 1px 4px;
    font-size: 8px;
	line-height: 1.4;
}

.av-level-clog {
    position: absolute;
    right: 0;
    top: 22px;
    background: #cccccc;
    color: #ffffff;
    border-radius: 50px;
    padding: 1px 4px;
    font-size: 8px;
    line-height: 1.4;
}

.level2 {
    background: url(../default_images/greeting/level.png) 0px 0px repeat-x;
    width: 40px !important;
    height: 40px !important;
    margin: -10px 20px;
}






.user_item {
    table-layout: auto;
    margin-bottom: 3px;
    margin-right:1px;
    border: 1px dashed #012832;
    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 #012832;
    border-left-width: 3px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: solid #012832;
    border-right-width: 3px;
}

.aclist{
    margin-bottom: 3px;
    border: 1px dashed #012832;
    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 #012832;
    border-left-width: 3px;
}

.cleft, .cleft2{
    width:220px !important;
}

.system_notice {
    color: #6633ff;
    display: inline-block;
    line-height: 1em;
    margin-top: 2px;
    font-weight: bold;
}

.ulist_item {
    margin-bottom: 3px;
    margin-right: 1px;
    border: 1px dashed #012832;
    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 #012832;
    border-left-width: 3px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: solid #012832;
    border-right-width: 3px;
}



/*shadow_avatar*/
.shadow_1{box-shadow:1px 1px 8px 1px #F44336;}
.shadow_2{box-shadow:1px 1px 8px 1px #E91E63;}
.shadow_3{box-shadow:1px 1px 8px 1px #9C27B0;}
.shadow_4{box-shadow:1px 1px 8px 1px #673AB7;}
.shadow_5{box-shadow:1px 1px 8px 1px #3F51B5;}
.shadow_6{box-shadow:1px 1px 8px 1px #2196F3;}
.shadow_7{box-shadow:1px 1px 8px 1px #03A9F4;}
.shadow_8{box-shadow:1px 1px 8px 1px #00BCD4;}
.shadow_9{box-shadow:1px 1px 8px 1px #009688;}
.shadow_10{box-shadow:1px 1px 8px 1px #4CAF50;}
.shadow_11{box-shadow:1px 1px 8px 1px #8BC34A;}
.shadow_12{box-shadow:1px 1px 8px 1px #CDDC39;}
.shadow_13{box-shadow:1px 1px 8px 1px #FFEB3B;}
.shadow_14{box-shadow:1px 1px 8px 1px #FFC107;}
.shadow_15{box-shadow:1px 1px 8px 1px #FF9800;}
.shadow_16{box-shadow:1px 1px 8px 1px #FF5722;}
.shadow_17{box-shadow:1px 1px 8px 1px #0019ad;}
.shadow_18{box-shadow:1px 1px 8px 1px #000000;}
.shadow_19{box-shadow:1px 1px 8px 1px #1ca061;}
.shadow_20{box-shadow:1px 1px 8px 1px #72ca09;}
.shadow_display {display:inline-block !important;margin-left: 9px;}
@keyframes wardan{to{background-position:200% center;}
}
.sedraname{color:#fff;font-size:15px;font-weight:700;background:linear-gradient(to right, #750b9c 10%, #fff 50%, #b330e3 60%);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sed 1.5s linear infinite;display:inline-block;}
@keyframes sed{to{background-position:200% center;}
}
.ammarname{color:#fff;font-size:15px;font-weight:700;background:linear-gradient(to right, crimson 10%, #000 50%, crimson 60%);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ammar 1.5s linear infinite;display:inline-block;}
@keyframes ammar{to{background-position:200% center;}
}
@keyframes sm_3600{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-3600px, 0px, 0px);}
}
@keyframes sm_756{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-756px, 0px, 0px);}
}
@keyframes sm_3456{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-3456px, 0px, 0px);}
}
@keyframes sm_1512{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-1512px, 0px, 0px);}
}
@keyframes sm_1800{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-1800px, 0px, 0px);}
}
@keyframes sm_960{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-960px, 0px, 0px);}
}
@keyframes sm_2880{0%{transform:translate3d(0px, 0px, 0px);}
100%{transform:translate3d(-2880px, 0px, 0px);}
}
@keyframes a_1800{100%{background-position:-1800px center;}
}
@keyframes a_3456{100%{background-position:-3456px center;}
}

.ribbon {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#FF5722 0%, #FF9800 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #FF5722;
}
.ribbon span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #FF9800;
}





.ribbon1 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon1 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#9bddf7 0%, #2cafd6 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon1 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon1 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #95c9ef;
}
.ribbon1 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #74b6f9;
}




.ribbon2 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon2 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#ff3e00 0%,#ec7a9a 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon2 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon2 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #fb6435;
}
.ribbon2 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #f18f79;
}

.ribbon3 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon3 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#3ab706 0%, #8bf17f 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon3 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon3 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #28d014;
}
.ribbon3 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #15e839;
}







.ribbon4 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon4 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#058ba0 0%, #b6d5f5 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon4 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon4 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #058ba0;
}
.ribbon4 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #b6d5f5;
}

.ribbon5 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon5 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#bc02bf 0%, #f794fd 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon5 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon5 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #bc02bf;
}
.ribbon5 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #f794fd;
}







.ribbon6 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon6 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#020e1f 0%, #c3c3c3 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon6 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon6 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #020e1f;
}
.ribbon6 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #c3c3c3;
}







.ribbon7 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon7 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#00f7f7 0%, #14ce9a 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon7 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon7 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #00f7f7;
}
.ribbon7 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #14ce9a;
}






.ribbon8 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon8 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#000000 0%, #000000 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 7px;
    width: 67px;
    color: #FFFFFF;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: Bad+Script;
}
.ribbon8 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon8 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #000000;
}
.ribbon8 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 9px 9px 0 0;
    background: #000000;
}






.ribbon9 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon9 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#5a65b7 0%, #57608c 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon9 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon9 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #5a65b7;
}
.ribbon9 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #57608c;
}






.ribbon10 {
  position: absolute;
  top: -6.1px;
  right: 10px;
}

.ribbon10 span {
    position: relative;
    display: block;
    text-align: center;
    background: linear-gradient(#1dbd00 0%, #57608c 100%);
    font-size: 6px;
    line-height: 1;
    padding: 4px 0px 4px;
    border-top-right-radius: 4px;
    width: 57px;
    color: #fff;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-family: cursive;
}
.ribbon10 span:before, .ribbon span:after {
  position: absolute;
  content: "";
}
.ribbon10 span:before {
    height: 7px;
    width: 7px;
    left: -5px;
    top: 0;
    background: #1dbd00;
}
.ribbon10 span:after {
    height: 7px;
    width: 7px;
    left: -7px;
    top: 0px;
    border-radius: 8px 8px 0 0;
    background: #57608c;
}

.overlay-ribbon {
    position: absolute;
    width: 13em;
    height: 14em;
    z-index: 9999;
    top: 0;
    right: 2%;
    background: #8f4abd;
    padding: 5px 0;
    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%, #2ec4b6 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, #cbf3f0 0%, #2ec4b6 100%);
    -webkit-box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
    box-shadow: -5px 21px 28px -4px rgba(0, 0, 0, 0.43);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    animation: slidein 3s ease-in-out forwards;
}

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

.ribbon-content h3 {
    margin: 0;
    padding: 5px 0 5px 0;
    line-height: 16px;
    font-family: 'Hammersmith One', sans-serif;
    color: #24505a;
    text-align: center;
}

.ribbon-content>p,
.ribbon-content>p span {
    color: #24505a;
    margin: 0;
    padding: 0;
}

.medo_text {
    height: auto;
    text-align: center;
    color: aliceblue !important;
    font-size: 11px;
}

.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: #2ec4b6;
    color: #fff;
    padding: 0 4px;
    font-weight: normal;
    text-decoration: none;
}

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

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

.user-title {
    text-align: center;
}

.overlay-ribbon:after {
    content: "";
    position: absolute;
    bottom: -9em;
    right: 0;
    width: 0;
    height: 0;
    border-top: 10em solid #a89eff;
    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);
    }
}