/* Simple active user intro */
.embed_logo_wrap { margin-bottom:10px; }
.embed_logo { display:block; height:50px; width:auto; margin:0 auto; }
#last_embed_title { font-size:13px; text-align:center; padding:10px 0 0 0; }
#last_embed { width:100%; height:auto; text-align:center; margin:10px 0; }
.active_embed { width:50px; height:50px; display:inline; margin:5px; }
.active_embed_user { width:50px; height:50px; border-radius:50%; }
.login_not_member { text-align:center; padding-top:5px; }

/* active_user  */
#active_container{ display: flex; justify-content: center;}
.active_user { margin-left: -12px; width: 50px !important; height:50px; text-align:center; float:left; overflow:hidden; }
.active_avatar { width:50px; height:50px; border-radius:50%;border: 2px solid #03add8;  }

/* default login css */

.rlist_container {
    color: #ffffff; /* White text color */
    max-width: 580px;
    max-height: 150px;
    overflow: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.1); /* Black background with 20% opacity */
    border-radius: 10px; /* Rounded corners with 10px radius */
}
.chatlist_container {
    color: #ffffff; /* White text color */
    max-width: 580px;
    max-height: 340px;
    overflow: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.1); /* Black background with 20% opacity */
    border-radius: 10px; /* Rounded corners with 10px radius */
}

/*intro css */
#intro_top { width:100%; z-index:1; position:relative; height:auto; padding:80px 0; background:#03add8 url('images/background.jpg'); background-repeat:no-repeat; background-size:auto auto; background-position:center 50px; background-attachment:fixed; }
#login_wrap { width:100%; height:100%; }
#login_all { width:800px; max-width:94%; border-radius:20px; display:block; margin:0 auto; color:#fff; }
.intro_social_container { width:100%; height:auto; text-align:center; padding-top:20px; }
.intro_social_btn { display:inline-block; width:40px; height:40px; margin:0 3px; border-radius:50%; }
.login_not_member { text-align:center; padding-top:5px; }

/* active_user intro  */
#intro_section_user { padding:72px 0; }
.active_user { height:110px; text-align:center; float:left; overflow:hidden; }
#last_active { width: 100%; height:110px; margin:0 auto; }
.active_avatar { width:110px; height:110px; border-radius:50%; }
#last_active .left-arrow,
#last_active .right-arrow { width: 0; height: 0; border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  margin-top: 5px; cursor: pointer; margin-top:40px; }
#last_active .left-arrow {  float: left; border-right: 10px solid #ccc; display:none;}
#last_active .left-arrow:hover { border-right: 10px solid #000; }
#last_active .right-arrow { float: right;  border-left: 10px solid #ccc; display:none; }
#last_active .right-arrow:hover { border-left: 10px solid #000; }
#last_active .last-clip {  margin: 0 20px; overflow: hidden; position: relative; }
#last_active .last_10 { height: 110px; width: 10000%;  overflow: hidden;  position: relative; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}
@media screen and (min-width:1121px){
	#intro_top { background-attachment: fixed; }
}
@media screen and (max-width:1100px){
	#intro_top { background-size:auto 100%; background-position:center 0px; padding:80px 0; }
}
@media screen and (max-width:768px){
	#intro_top { background-size:auto 100%; background-position:center 0px;  }
}